/* What lives inside the windows. Every block here belongs to one of four surfaces, uses one of the
   five type sizes and one of the seven spaces, and nothing is invented at the point of use. */

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.lbl {
  font-size: var(--t-16);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s-12);
}

.note {
  font-size: var(--t-16);
  line-height: 1.5;
  margin: 0 0 var(--s-16);
  max-width: 70ch;
}
.note:last-child { margin-bottom: 0; }

/* ----------------------------------------- the one accent block of the desk */

.hero {
  background: var(--lit);
  color: var(--knock);
  padding: var(--s-24) var(--s-32);
  margin-bottom: var(--s-24);
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  column-gap: var(--s-24);
  row-gap: var(--s-12);
}
.hero__mark {
  width: 48px;
  height: 48px;
  background: var(--knock);
  -webkit-mask: var(--icon) center / 48px 48px no-repeat;
  mask: var(--icon) center / 48px 48px no-repeat;
}
.hero__name {
  font-family: var(--f-px);
  font-weight: 700;
  font-size: var(--t-32);
  line-height: var(--t-48);
  letter-spacing: 2px;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  white-space: nowrap;
}
.hero__sub {
  grid-column: 2;
  font-size: var(--t-16);
  font-weight: 600;
  line-height: 1.5;
}
.hero__time {
  grid-row: 1 / 3;
  grid-column: 3;
  font-family: var(--f-px);
  font-weight: 700;
  font-size: var(--t-48);
  line-height: var(--t-48);
  letter-spacing: 2px;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  white-space: nowrap;
  align-self: center;
}

/* -------------------------------------------------- the day, as four steps */

.steps {
  list-style: none;
  margin: 0 0 var(--s-24);
  padding-block: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-8);
}
.steps li {
  background: var(--sunken);
  padding: var(--s-16);
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: start;
  column-gap: var(--s-12);
  row-gap: var(--s-4);
  box-shadow: inset 0 0 0 2px var(--edge);
}
.steps li.is-now {
  background: var(--lit);
  color: var(--knock);
  box-shadow: none;
}
.steps li.is-done { box-shadow: inset 0 0 0 2px var(--lit); }
.steps__mark {
  width: 24px;
  height: 24px;
  grid-row: 1 / 3;
  background: var(--ink);
  -webkit-mask: var(--icon) center / 24px 24px no-repeat;
  mask: var(--icon) center / 24px 24px no-repeat;
}
.steps li.is-now .steps__mark { background: var(--knock); }
.steps__when {
  font-family: var(--f-mono);
  font-size: var(--t-16);
  font-weight: 700;
  line-height: 1.5;
}
.steps__what {
  font-size: var(--t-16);
  line-height: 1.5;
  color: var(--ink-2);
}
.steps li.is-now .steps__what { color: var(--knock); }

/* ------------------------------------------------- the three player cards */

.players {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-16);
}
@container (max-width: 880px) {
  .players { grid-template-columns: 1fr; }
}
.player {
  background: var(--sunken);
  box-shadow: inset 0 0 0 2px var(--edge);
  padding: var(--s-24);
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: var(--s-16);
  row-gap: var(--s-12);
}
.player__rows { align-self: end; }
.player__mark {
  width: 48px;
  height: 48px;
  grid-row: 1 / 3;
  background: var(--lit);
  -webkit-mask: var(--icon) center / 48px 48px no-repeat;
  mask: var(--icon) center / 48px 48px no-repeat;
}
.player__name {
  font-size: var(--t-20);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.player__what {
  font-size: var(--t-16);
  line-height: 1.5;
  color: var(--ink-2);
  grid-column: 2;
}
.player__rows {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 0;
  margin-inline: calc(var(--s-16) * -1);
}
.player__rows dt,
.player__rows dd {
  margin: 0;
  padding: var(--s-12) var(--s-16);
  min-height: var(--row);
  display: flex;
  align-items: center;
  font-size: var(--t-16);
  line-height: 1.5;
}
.player__rows dt { color: var(--ink-2); }
.player__rows dd { font-family: var(--f-mono); justify-content: flex-end; }
.player__rows dt:not(:first-of-type),
.player__rows dt:not(:first-of-type) + dd { box-shadow: inset 0 2px 0 0 var(--edge); }

/* ---------------------------------------------------------- label / value */

.rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  column-gap: 0;
  margin: 0 calc(var(--s-16) * -1);
  font-size: var(--t-16);
}
.rows dt,
.rows dd {
  margin: 0;
  padding: var(--s-12) var(--s-16);
  min-height: var(--row);
  display: flex;
  align-items: center;
  line-height: 1.5;
  min-width: 0;
}
.rows dt { color: var(--ink-2); }
.rows dd { font-family: var(--f-mono); justify-content: flex-end; text-align: right; overflow-wrap: break-word; }
.rows dt:not(:first-of-type),
.rows dt:not(:first-of-type) + dd { box-shadow: inset 0 2px 0 0 var(--edge); }
.rows dd.brk { overflow-wrap: anywhere; }
.rows dd.plain { font-family: var(--f-text); }

@container (max-width: 440px) {
  .rows { grid-template-columns: minmax(0, 1fr); }
  .rows dt { padding: var(--s-12) var(--s-16) var(--s-8); min-height: 0; }
  .rows dd { padding: 0 var(--s-16) var(--s-12); min-height: 0; justify-content: flex-start; text-align: left; }
  .rows dt:not(:first-of-type) + dd { box-shadow: none; }
}

/* ------------------------------------------------------------ the mint box */

.mintrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: var(--s-8);
  align-items: stretch;
}
.mint {
  background: var(--sunken);
  box-shadow: inset 0 0 0 2px var(--edge);
  display: flex;
  align-items: center;
  padding: var(--s-16);
  min-height: 56px;
  min-width: 0;
}
.mint__v {
  font-family: var(--f-mono);
  font-size: var(--t-16);
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
  user-select: all;
}
.mint__v--empty { font-family: var(--f-text); color: var(--ink-2); user-select: auto; }

.feedback {
  font-size: var(--t-16);
  color: var(--ink-2);
  margin: var(--s-12) 0 0;
  min-height: var(--s-24);
}
.feedback--bad { color: var(--lit-hi); font-weight: 600; }

/* the four platform keys: each one carries the platform's own mark on its own dark plate */
.linkkeys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
  margin-top: var(--s-16);
}
.linkkeys .key {
  grid-template-columns: 32px auto;
  display: grid;
  align-items: center;
  justify-content: center;
  column-gap: var(--s-12);
  text-align: left;
  padding-inline: var(--s-20, 20px);
}
.linkkeys .key img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  background: var(--knock);
  padding: var(--s-4);
  box-sizing: content-box;
}
.linkkeys .key .mark--mask {
  width: 24px;
  height: 24px;
  background: var(--ink);
  padding: var(--s-4);
  box-sizing: content-box;
  -webkit-mask: var(--icon) center / 24px 24px no-repeat;
  mask: var(--icon) center / 24px 24px no-repeat;
}
.linkkeys .key .plate {
  width: 32px;
  height: 32px;
  background: var(--knock);
  display: grid;
  place-items: center;
}
.linkkeys .key .plate > * { width: 20px; height: 20px; }
.linkkeys .key .plate .xmark {
  background: var(--ink);
  -webkit-mask: url("../marks/x.svg") center / contain no-repeat;
  mask: url("../marks/x.svg") center / contain no-repeat;
}
.linkkeys .key[aria-disabled="true"] .plate { background: var(--sunken); }

/* ---------------------------------------------------------------- the table */

.gut {
  display: inline-block;
  width: var(--s-24);
  font-weight: 700;
}

.lnk {
  padding: var(--s-12) var(--s-8);
  margin: calc(var(--s-12) * -1) calc(var(--s-8) * -1);
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--edge);
}
.lnk:hover { text-decoration-color: currentColor; }
.tbl td .lnk { padding-inline: 0; margin-inline: 0; }
.tbl td:first-child .lnk { padding-inline: var(--s-8); margin-inline: calc(var(--s-8) * -1); }
.lnk.brk { overflow-wrap: anywhere; }

.coin { display: flex; align-items: center; gap: var(--s-12); min-width: 0; }
.coin__sym { font-weight: 700; }

.wbar {
  display: inline-block;
  width: 96px;
  height: var(--s-12);
  background: var(--sunken);
  box-shadow: inset 0 0 0 2px var(--edge);
  vertical-align: middle;
  margin-right: var(--s-12);
}
.wbar i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--lit);
  transition: width 0.28s ease-out;
}
.is-pick .wbar { background: rgba(3, 17, 11, 0.3); box-shadow: none; }
.is-pick .wbar i { background: var(--knock); }
.wnum { display: inline-block; min-width: 48px; text-align: right; }

.marks { display: inline-flex; gap: var(--s-8); }
.mark {
  width: 32px;
  height: 32px;
  background: var(--edge);
  -webkit-mask: var(--icon) center / 24px 24px no-repeat;
  mask: var(--icon) center / 24px 24px no-repeat;
}
.mark--on { background: var(--lit); }
.is-pick .mark { background: rgba(3, 17, 11, 0.35); }
.is-pick .mark--on { background: var(--knock); }

/* ---------------------------------------------------- the 60 per cent gauge */

.gauge { margin: 0 0 var(--s-16); }
.gauge__track {
  position: relative;
  height: var(--s-32);
  background: var(--sunken);
  box-shadow: inset 0 0 0 2px var(--edge);
}
.gauge__fill {
  height: 100%;
  width: var(--w, 0%);
  background: var(--lit);
  transition: width 0.28s ease-out;
}
.gauge__fill.is-over { background: var(--lit-hi); }
.gauge__line {
  position: absolute;
  top: calc(var(--s-8) * -1);
  bottom: calc(var(--s-8) * -1);
  left: 60%;
  width: 2px;
  background: var(--ink);
}
.gauge__legend {
  display: flex;
  justify-content: space-between;
  gap: var(--s-16);
  margin-top: var(--s-8);
  font-size: var(--t-16);
  color: var(--ink-2);
}
.gauge__legend b { font-family: var(--f-mono); font-weight: 700; color: var(--ink); }

/* -------------------------------------------------------------- the picker */

.picker { display: grid; gap: var(--s-8); }
.pick {
  position: relative;
  display: grid;
  grid-template-columns: var(--s-24) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-16);
  min-height: 56px;
  padding: var(--s-8) var(--s-16);
  background: var(--sunken);
  box-shadow: inset 0 0 0 2px var(--edge);
  cursor: pointer;
  font-size: var(--t-16);
}
.pick__in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pick__g { font-weight: 700; color: transparent; }
.pick:hover { box-shadow: inset 0 0 0 2px var(--lit); }
.pick:has(.pick__in:checked) { background: var(--lit); color: var(--knock); box-shadow: none; }
.pick:has(.pick__in:checked) .pick__g { color: var(--knock); }
.pick:has(.pick__in:focus-visible) { outline: 3px solid var(--lit-hi); outline-offset: -3px; }
.pick__s { font-weight: 600; }
.pick__m { font-family: var(--f-mono); color: var(--ink-2); }
.pick:has(.pick__in:checked) .pick__m { color: var(--knock); }

/* ------------------------------------------------------------- plain lists */

.howto { list-style: none; margin: 0; padding-block: 0; display: grid; gap: var(--s-8); }
.howto li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--s-16);
  align-items: start;
  background: var(--sunken);
  box-shadow: inset 0 0 0 2px var(--edge);
  padding: var(--s-16);
  font-size: var(--t-16);
  line-height: 1.5;
}
.howto__mark {
  width: 24px;
  height: 24px;
  background: var(--lit);
  -webkit-mask: var(--icon) center / 24px 24px no-repeat;
  mask: var(--icon) center / 24px 24px no-repeat;
}
.howto b { display: block; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.howto span { color: var(--ink-2); }

.memos { list-style: none; margin: 0; padding-block: 0; display: grid; gap: var(--s-8); }
.memos li {
  background: var(--sunken);
  box-shadow: inset 0 0 0 2px var(--edge);
  padding: var(--s-16);
  display: flex;
  justify-content: space-between;
  gap: var(--s-24);
  font-size: var(--t-16);
  line-height: 1.5;
}
.memo { font-family: var(--f-mono); overflow-wrap: anywhere; min-width: 0; }

/* ------------------------------------------------- the desk paints itself in */

#stack.is-paint .win { animation: paint 0.28s steps(7, end) both; }
#stack.is-paint .win:nth-child(2) { animation-delay: 0.05s; }
#stack.is-paint .win:nth-child(3) { animation-delay: 0.1s; }
@keyframes paint {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* --------------------------------------------------- a table on a phone */

@media (max-width: 760px) {
  .tbl, .tbl tbody, .tbl tbody tr, .tbl tbody td { display: block; width: auto; }
  .tbl thead { display: none; }
  .tbl tbody tr { padding: var(--s-12) var(--pad); position: relative; }
  .tbl tbody tr + tr td:first-child::after { left: var(--pad); right: var(--pad); top: calc(var(--s-12) * -1); }
  .tbl tbody td {
    height: auto;
    padding: var(--s-4) 0 !important;
    text-align: left !important;
    white-space: normal;
    display: flex;
    align-items: center;
    gap: var(--s-12);
  }
  .tbl tbody td[data-h]::before {
    content: attr(data-h);
    font-family: var(--f-text);
    color: var(--ink-2);
    flex: 0 0 auto;
    min-width: 96px;
  }
  .tbl tbody tr.is-pick td[data-h]::before { color: var(--knock); }
  .tbl tbody td:first-child { font-weight: 700; padding-bottom: var(--s-8) !important; }
  .tbl tbody td:first-child::before { content: none; }
  .tbl tr.is-wait td { height: auto; padding: var(--s-8) 0 !important; }
  .tbl tr.is-wait { padding: var(--s-24) var(--pad); }
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 48px minmax(0, 1fr); row-gap: var(--s-16); }
  .hero__time { grid-row: auto; grid-column: 1 / -1; font-size: var(--t-32); line-height: var(--t-48); }
  .hero__name { font-size: var(--t-24); line-height: var(--t-32); white-space: normal; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .players { grid-template-columns: 1fr; }
  .linkkeys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mintrow { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
  /* a plate, a gap and a word do not fit two to a row on a phone */
  .linkkeys { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #stack.is-paint .win { animation: none; }
  .wbar i, .gauge__fill { transition: none; }
}

/* a table that is still waiting keeps its heads and its room, and says so in one line */
.tbl tr.is-wait td {
  height: 140px;
  white-space: normal;
  line-height: 1.5;
  vertical-align: middle;
  padding: var(--s-24) var(--pad);
  font-family: var(--f-text);
  color: var(--ink);
}