/* Draft to Done: a trailhead signpost read like a departures hall. Flat blocks on an 8px grid,
   square corners, no shadows, one orange accent. The ladder is the biggest thing on the screen. */

:root {
  --g: 8px;
  --edge: 2px solid var(--ak-ink);
  --pen: 44px;
  --gauge-w: 28px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, var(--ak-bg-art));
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

button,
input { font: inherit; color: inherit; }

button { cursor: pointer; touch-action: manipulation; }

:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 2px; }

[hidden] { display: none !important; }

.ico { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- the frame ---------- */

.app {
  height: 100vh;
  height: 100dvh;
  max-width: 1180px;
  margin: 0 auto;
  padding:
    calc(var(--ac-status-h, 64px) + var(--g))
    max(12px, env(safe-area-inset-right))
    max(var(--g), env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "stage" "tools";
  gap: var(--g);
  touch-action: manipulation;
}

.top { grid-area: top; display: flex; align-items: stretch; gap: var(--g); min-width: 0; }
.stage { grid-area: stage; min-height: 0; min-width: 0; position: relative; }
.tools { grid-area: tools; display: grid; gap: 4px; min-width: 0; }

.logo {
  flex: none;
  height: 48px;
  width: auto;
  align-self: center;
}

/* ---------- departure-board tabs ---------- */

.tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  min-height: 48px;
  max-width: min(13em, 44vw);
  padding: 0 12px;
  border: 0;
  border-bottom: 4px solid transparent;
  border-radius: 0;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-family: var(--ak-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--g);
  white-space: nowrap;
}
.tab-name { overflow: hidden; text-overflow: ellipsis; }
.tab-count { font-variant-numeric: tabular-nums; opacity: 0.8; font-weight: 500; }
.tab[aria-current="true"] { border-bottom-color: var(--ak-accent); }
.tab-new { background: var(--ak-btn-fill); color: var(--ak-btn-ink); }
/* New draft stays whole beside the strip of draft tabs, which scrolls on its own. */
.tab-new-slot { flex: none; display: flex; }
.tab-new-slot .tab { max-width: none; }
.tab-new[aria-current="true"] { border-bottom-color: var(--ak-ink); }

/* ---------- sign buttons ---------- */

.sign {
  min-height: 48px;
  min-width: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-family: var(--ak-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--g);
  position: relative;
}
.sign:active { background: var(--ak-ink-muted); }
.sign-go { background: var(--ak-btn-fill); color: var(--ak-btn-ink); }
.sign-go:active { background: var(--ak-btn-active); }
/* Undo is a plain outline sign: on the ladder only the orange rung is orange. */
.sign-undo { background: var(--ak-surface); color: var(--ak-ink); box-shadow: inset 0 0 0 2px var(--ak-ink); }
.sign-undo:active { background: var(--ak-bg); }
.sign[disabled] { background: var(--ak-choice-border); color: var(--ak-ink); cursor: not-allowed; }
.sign-plain { background: var(--ak-surface); color: var(--ak-ink); box-shadow: inset 0 0 0 2px var(--ak-ink); }
.sign-plain:active { background: var(--ak-bg); }
.sign-warn { background: var(--ak-surface); color: var(--ak-link); box-shadow: inset 0 0 0 2px var(--ak-link); }
.sign .pen { width: 28px; height: 28px; }

/* The undo window drains as a hard bar along the sign's foot. */
.sign-undo::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: var(--ak-ink);
  transform-origin: left center;
}

.tool-row { display: flex; flex-wrap: wrap; gap: var(--g); }
/* Signs keep their words whole and wrap to a second row rather than squeeze. */
.tool-row .sign { flex: 1 1 auto; white-space: nowrap; }

/* Wrote today: a daily stamp sign. Orange until today is stamped, then slate with its day count. */
/* I wrote today: a slate sign with an empty box; once stamped, a white sign with a tick. */
.tool-row .sign-wrote { flex: 1.5 1 auto; padding: 0 12px; }
.sign-wrote.is-stamped { background: var(--ak-surface); color: var(--ak-ink); box-shadow: inset 0 0 0 2px var(--ak-ink); }
.sign-wrote.is-stamped .ico { color: var(--ak-accent); }
.wrote-word { white-space: nowrap; line-height: 1; }
/* Undo over the summit ending: in place upright, pinned to the card's empty bottom-right corner sideways. */
.sign-undo.is-above { z-index: 33; }
@media (orientation: landscape) {
  .sign-undo.is-above {
    position: fixed;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    min-width: 140px;
  }
}

.kept {
  margin: 0;
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ak-ink-muted);
}
.kept-mark { width: 14px; height: 14px; color: var(--ak-ink); opacity: 0; }
.kept.is-settled .kept-mark { opacity: 1; }
.kept.is-error { color: var(--ak-ink); font-weight: 600; }
.kept.is-error .kept-mark { display: none; }

/* ---------- the ladder ---------- */

.ladder {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: var(--gauge-w) minmax(0, 1fr);
  gap: var(--g);
}

.gauge {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
  justify-items: center;
}
.gauge-count {
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.gauge-bar {
  width: 12px;
  border: var(--edge);
  background: var(--ak-surface);
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: 2px;
}
.gauge-step { flex: 1 1 0; background: transparent; }
.gauge-step.is-on { background: var(--ak-accent); }

.field {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background-color: var(--ak-accent-2);
  background-image: url("art/signpost.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.post {
  position: absolute;
  left: var(--post-x, 50%);
  top: var(--post-top, 0);
  bottom: var(--post-bottom, 0);
  width: var(--post-w, 32px);
  translate: -50% 0;
  background: var(--ak-bg);
}
.rope {
  position: absolute;
  left: var(--post-x, 50%);
  bottom: var(--post-bottom, 0);
  width: 6px;
  height: var(--rope, 0px);
  translate: -50% 0;
  background: var(--ak-accent);
}

.plates {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: var(--pad, 8px) 0;
  list-style: none;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  gap: var(--gap, 8px);
}

/* A plate: the painted sign under its words. Right plates bolt on with the square end over the
   post; left plates are the same sign turned round, like a switchback marker. */
.plate {
  position: relative;
  flex: none;
  height: var(--u, 56px);
  width: var(--sw, 220px);
  margin-left: calc(50% - var(--sw, 220px) * 0.3);
  font-family: var(--ak-font-display);
  text-transform: uppercase;
  color: var(--ak-ink);
}
.plate.side-left { margin-left: calc(50% - var(--sw, 220px) * 0.7); }

/* An overview rung is one button the size of its sign: tap it to edit that step. */
.plate-open {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  text-align: inherit;
  display: block;
}
button.plate-open { cursor: pointer; }
button.plate-open:active .plate-art { filter: brightness(0.92); }

.plate-art,
.plate-fill {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.plate-art {
  background-image: url("art/rung-sign.png");
  background-repeat: no-repeat;
}
.side-left .plate-art,
.side-left .plate-fill { transform: scaleX(-1); }

.is-ahead .plate-art { background-size: 100% 358.24%; background-position: 0 0; }
.is-climbed .plate-art { background-size: 100% 362.22%; background-position: 0 45.76%; }
.is-next .plate-art { background-size: 100% 285.96%; background-position: 0 100%; }

/* The ahead sign is an outline; this fills it so its words sit on the surface, not the field. */
.plate-fill {
  background: var(--ak-surface);
  clip-path: polygon(1.5% 6%, 90% 6%, 98% 50%, 90% 94%, 1.5% 94%);
}

/* The number square sits in the painted box at the post end. */
.plate-num {
  position: absolute;
  left: 13%;
  width: 12.8%;
  top: 24%;
  bottom: 24%;
  display: grid;
  place-items: center;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-weight: 700;
  font-size: max(13px, calc(var(--u, 56px) * 0.3));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.side-left .plate-num { left: auto; right: 13%; }

.plate-body {
  position: absolute;
  left: 30%;
  right: 12%;
  top: 10%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 2px;
}
.side-left .plate-body { left: 12%; right: 30%; text-align: right; align-items: flex-end; }

.plate-label {
  font-weight: 700;
  font-size: max(13px, calc(var(--u, 56px) * 0.28));
  line-height: 1.05;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.plate-label.is-long { font-size: max(12px, calc(var(--u, 56px) * 0.22)); }
.plate-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: max(12px, calc(var(--u, 56px) * 0.2));
  line-height: 1.1;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ak-ink);
}
.is-ahead .plate-sub { color: var(--ak-ink-muted); }

/* The date stamp punched into a climbed plate: a solid slate block, its own mark. */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-weight: 600;
}
.stamp .ico { width: 0.95em; height: 0.95em; }

/* The pencil sits across the post from its plate, in the empty half of the row. */
.plate-pencil {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: calc(-1 * var(--pen) - var(--g));
  width: var(--pen);
  height: var(--pen);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  display: grid;
  place-items: center;
}
.side-left .plate-pencil { left: auto; right: calc(-1 * var(--pen) - var(--g)); }
.plate-pencil img { width: 100%; height: 100%; display: block; }

/* ---------- the next plate: orange, double height, the one big target ---------- */

.plate.is-next {
  height: auto;
  width: var(--nw, 100%);
  margin-left: calc(50% - var(--nw, 100%) / 2);
  display: flex;
  flex-direction: column;
}
.next-sign {
  position: relative;
  height: var(--nh, 112px);
  color: var(--ak-btn-ink);
}
.climb {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  text-align: left;
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}
.climb:focus-visible { outline: 0; }
.climb:focus-visible .plate-art { filter: brightness(0.92); }
.climb:active .plate-art { filter: brightness(0.9); }
.is-next .plate-num {
  left: 13%;
  width: 14.6%;
  top: 25%;
  bottom: 24%;
  font-size: max(16px, calc(var(--nh, 112px) * 0.24));
}
.is-next .plate-body {
  left: 32%;
  right: 11%;
  top: 8%;
  bottom: 8%;
  gap: 4px;
  justify-content: space-between;
}
.is-next .plate-label {
  font-size: max(15px, calc(var(--nh, 112px) * 0.16));
  color: var(--ak-btn-ink);
}
.next-words {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: max(18px, calc(var(--nh, 112px) * 0.22));
  font-weight: 700;
}
.next-unit {
  font-size: max(12px, calc(var(--nh, 112px) * 0.11));
  letter-spacing: 0.08em;
}
.next-date {
  font-size: max(13px, calc(var(--nh, 112px) * 0.12));
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.mark {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-weight: 700;
  font-size: max(13px, calc(var(--nh, 112px) * 0.13));
  letter-spacing: 0.08em;
  line-height: 1.1;
}
.mark .ico { width: 1em; height: 1em; color: var(--ak-accent); }

/* Under the next plate: the real next step and its pace on a slate strip, and the pencil beside it. */
.next-foot {
  display: flex;
  gap: 4px;
  width: 100%;
}
.next-foot .plate-pencil {
  position: static;
  translate: none;
  flex: none;
  height: var(--strip, 44px);
  width: var(--strip, 44px);
}
.is-short .next-foot { position: relative; }
.is-short .next-foot .plate-pencil {
  position: absolute;
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  width: var(--pen);
  height: var(--pen);
}
.is-short .pace { max-width: calc(100% - var(--pen) - 4px); padding-block: 2px; }
.pace {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(90% - 4px);
  min-height: var(--strip, 40px);
  margin: 0;
  padding: 4px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-family: var(--ak-font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  text-transform: none;
}
.pace { flex-direction: column; align-items: flex-start; justify-content: center; }
.pace .prompt { font-weight: 700; font-size: 14px; }
.pace-part { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pace .tiles { font-size: 17px; }
.is-short .pace { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.is-short .pace .prompt { font-size: 13px; }
.is-short .pace .tiles { font-size: 14px; }

/* Flip-board numerals: one flat tile per character with a split across the middle. */
.tiles { display: inline-flex; gap: 2px; font-family: var(--ak-font-display); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.tile {
  position: relative;
  min-width: 0.66em;
  padding: 0.1em 0.08em;
  text-align: center;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
}
/* The split between the two flaps: a dark hairline gap, as on a real board. */
.tile::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 0.5px);
  height: 1px;
  background: color-mix(in srgb, var(--ak-ink) 55%, #000);
  opacity: 0.55;
}
.tile.is-mark { min-width: 0.3em; padding-inline: 0.02em; }
.pace .tile { background: var(--ak-btn-fill); color: var(--ak-btn-ink); }

/* ---------- the done plate: the top sign turned over ---------- */

.plate.is-done {
  height: var(--nh, 112px);
  width: var(--nw, 100%);
  margin-left: calc(50% - var(--nw, 100%) / 2);
  color: var(--ak-choice-selected-ink);
}
.done-face {
  position: absolute;
  inset: 0;
  background: var(--ak-surface);
  clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}
.done-face::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--ak-choice-selected-bg);
  clip-path: polygon(0 0, 89.6% 0, 99.4% 50%, 89.6% 100%, 0 100%);
}
.done-body {
  position: absolute;
  left: 6%;
  right: 12%;
  top: 10%;
  bottom: 10%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: 12px;
}
.done-word {
  grid-row: 1 / 3;
  font-size: max(28px, calc(var(--nh, 112px) * 0.42));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}
.done-words .tiles { font-size: max(18px, calc(var(--nh, 112px) * 0.24)); }
.done-words .tile { background: var(--ak-btn-fill); color: var(--ak-btn-ink); }
.done-sub { font-size: max(12px, calc(var(--nh, 112px) * 0.11)); font-weight: 600; letter-spacing: 0.08em; }

/* ---------- the departures board: new draft and the Summits shelf ---------- */

.depart {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  gap: calc(var(--g) * 2);
  padding-bottom: var(--g);
}

.board-head,
.shelf-head {
  margin: 0;
  min-height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: var(--g);
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-left: var(--g) solid var(--ak-accent);
}
.shelf-head { min-height: 32px; font-size: 15px; }

.depart-pick { display: grid; gap: var(--g); }
.pick-say {
  margin: 0;
  font-family: var(--ak-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}
.form-top { display: grid; gap: 2px; }
.form-head {
  margin: 0;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.form-from { margin: 0; font-size: 14px; color: var(--ak-ink-muted); }

.deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g); }

.card {
  min-height: 72px;
  padding: var(--g);
  border: 0;
  border-top: var(--g) solid var(--ak-ink);
  border-radius: 0;
  background: var(--ak-surface);
  color: var(--ak-ink);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: var(--g);
  text-align: left;
  position: relative;
}
.card img { width: 44px; height: auto; display: block; }
.card-name {
  font-family: var(--ak-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.card-target {
  display: block;
  margin-top: 4px;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.card[aria-pressed="true"] {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  border-top-color: var(--ak-accent);
}
.card[aria-pressed="true"]::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background: var(--ak-accent);
}

.newform {
  display: grid;
  gap: var(--g);
  padding: 12px;
  background: var(--ak-surface);
  border-left: var(--g) solid var(--ak-ink);
}
/* The date field gets the wider share: its day, month and year must all show. */
.pair { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--g); }
.slot { display: grid; gap: 4px; min-width: 0; }
.slot-name {
  font-family: var(--ak-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}
.slot input,
.slot select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 10px;
  border: var(--edge);
  border-radius: 0;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.02em;
  appearance: none;
  -webkit-appearance: none;
}
.slot input:focus { outline: 3px solid var(--ak-focus); outline-offset: 0; }
.slot.is-wrong input { border-color: var(--ak-link); box-shadow: inset 0 0 0 2px var(--ak-link); }
.slot input[disabled] { background: var(--ak-bg); color: var(--ak-ink-muted); }

.route {
  margin: 0;
  min-height: 20px;
  font-family: var(--ak-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
  font-variant-numeric: tabular-nums;
}

.wrong {
  margin: 0;
  padding: var(--g) 12px;
  border-left: var(--g) solid var(--ak-link);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-size: 15px;
  font-weight: 600;
}

.plan-block { display: grid; gap: var(--g); }
.date-chips .chip {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 8px;
  justify-content: center;
  text-align: center;
  font-family: var(--ak-font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.when {
  margin: 0;
  min-height: 22px;
  font-family: var(--ak-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.03em;
  color: var(--ak-ink);
}
.when.is-off { color: var(--ak-link); }
.slot input[type="date"] { cursor: pointer; }
.slot input[type="date"]::-webkit-calendar-picker-indicator { width: 24px; height: 24px; cursor: pointer; }

/* The build sign stays in reach: when the form runs past the screen it rides the bottom edge. */
.build-dock {
  position: static;
  bottom: 0;
  z-index: 1;
  margin: 0 -12px -12px;
  padding: var(--g) 12px 12px;
  background: var(--ak-surface);
}
#nf-build { width: 100%; min-height: 56px; font-size: 18px; }

.shelf { display: grid; gap: var(--g); }
.plaques {
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  display: flex;
  gap: var(--g);
  overflow-x: auto;
}
.plaque {
  flex: none;
  width: 136px;
  aspect-ratio: 384 / 322;
  position: relative;
  container-type: inline-size;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("art/summit-plaque.png") center / 100% 100% no-repeat;
  color: var(--ak-ink);
}
.plaque-title,
.plaque-words {
  position: absolute;
  left: 10%;
  right: 10%;
  display: grid;
  place-items: center;
  font-family: var(--ak-font-display);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1;
}
.plaque-title { top: 44%; height: 14%; font-size: 9.5cqw; letter-spacing: 0.03em; }
.plaque-title span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.plaque-words { top: 63.5%; height: 10.5%; left: 27%; right: 27%; font-size: 9cqw; font-variant-numeric: tabular-nums; }
.shelf-empty { margin: 0; font-size: 14px; color: var(--ak-ink-muted); }

/* ---------- the guide: ring, arrow, caption ---------- */

.guide { position: fixed; inset: 0; z-index: 35; pointer-events: none; }
.guide-ring {
  position: fixed;
  border: 4px solid var(--ak-accent);
  outline: 2px solid var(--ak-ink);
}
.guide-arrow {
  position: fixed;
  width: 32px;
  height: 32px;
  color: var(--ak-accent);
}
.guide-arrow.is-up { rotate: 180deg; }
.guide-arrow.is-left { rotate: 90deg; }
.guide-say {
  position: fixed;
  margin: 0;
  max-width: min(340px, calc(100vw - 24px));
  padding: 12px 14px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  border-left: var(--g) solid var(--ak-accent);
  box-shadow: 0 0 0 2px var(--ak-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

/* Upright, the caption is part of the page: it sits just above what it points at and pushes the rest down. */
.guide-inline {
  margin: 0;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g);
  background: var(--ak-surface);
  color: var(--ak-ink);
  border-left: var(--g) solid var(--ak-accent);
  box-shadow: inset 0 0 0 2px var(--ak-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}
.guide-inline-arrow { flex: none; width: 28px; height: 28px; color: var(--ak-accent); }
.build-dock .guide-inline,
.build-dock .wrong { margin-bottom: var(--g); }

/* ---------- the sheet: an in-page editor, never a browser dialog ---------- */

.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 36;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, var(--ak-ink) 55%, transparent);
}
.sheet {
  width: min(560px, 100%);
  max-height: 88dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--ak-surface);
  color: var(--ak-ink);
  border-top: var(--g) solid var(--ak-accent);
}
.sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
}
.sheet-num {
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 20px;
}
.sheet-num:empty { display: none; }
.sheet-title {
  margin: 0;
  min-width: 0;
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sheet-body {
  overflow-y: auto;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  display: grid;
  gap: 12px;
  align-content: start;
}
.sheet-say { margin: 0; font-size: 16px; line-height: 1.45; }
.sheet-facts { margin: 0; font-family: var(--ak-font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ak-ink-muted); font-variant-numeric: tabular-nums; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: var(--g); }
.sheet-actions .sign { flex: 1 1 140px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  box-shadow: inset 0 0 0 2px var(--ak-choice-border);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.chip:active,
.chip[aria-pressed="true"] { background: var(--ak-choice-selected-bg); color: var(--ak-choice-selected-ink); box-shadow: none; }
.chip-more { box-shadow: inset 0 0 0 2px var(--ak-ink); font-family: var(--ak-font-display); text-transform: uppercase; letter-spacing: 0.08em; }

.toggle {
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: var(--ak-surface);
  color: var(--ak-ink);
  box-shadow: inset 0 0 0 2px var(--ak-ink);
  font-family: var(--ak-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--g);
}
.toggle[aria-pressed="true"] { background: var(--ak-choice-selected-bg); color: var(--ak-choice-selected-ink); box-shadow: none; }
.words-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--g); align-items: end; }

.preview-pace {
  margin: 0;
  padding: var(--g) 12px;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-weight: 600;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.preview-pace .tiles { font-size: 18px; }
.preview-pace .tile { background: var(--ak-btn-fill); color: var(--ak-btn-ink); }

.rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.rows li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: var(--g);
  align-items: center;
  min-height: 40px;
  padding: 0 var(--g) 0 0;
  background: var(--ak-bg);
  font-variant-numeric: tabular-nums;
}
.rows .n { align-self: stretch; display: grid; place-items: center; background: var(--ak-choice-selected-bg); color: var(--ak-choice-selected-ink); font-family: var(--ak-font-display); font-weight: 700; }
.rows .l { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .d { font-family: var(--ak-font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }

/* The chrome's ending stays centred when it fits; on a short sideways phone it scrolls from its top
   instead of being cut off above the screen. */
html #activity-chrome-ending.site-perseper { justify-content: flex-start; }
html #activity-chrome-ending.site-perseper .ac-card { margin-block: auto; }

/* A short screen, either way up: the ending's line tiles tighten so the whole card fits. */
@media (max-height: 700px) {
  html #activity-chrome-ending.site-perseper { padding-block: 12px; }
  html #activity-chrome-ending.site-perseper .ac-card { gap: 8px; padding: 16px; }
  html #activity-chrome-ending.site-perseper .ac-lines { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 6px; }
  html #activity-chrome-ending.site-perseper .ac-line { padding: 6px 10px; font-size: 14px; line-height: 1.3; }
  html #activity-chrome-ending.site-perseper .ac-fill { height: 12px; }
}

/* Sideways: the done number stands on the left, the message, lines and button on the right,
   so the card is as short as its words and its button is always on screen. */
@media (orientation: landscape) and (max-height: 560px) {
  html #activity-chrome-ending.site-perseper .ac-card {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
    width: min(100%, 860px);
  }
  html #activity-chrome-ending.site-perseper .ac-number {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: center;
    font-size: clamp(56px, 22dvh, 120px);
  }
  html #activity-chrome-ending.site-perseper .ac-verdict,
  html #activity-chrome-ending.site-perseper .ac-lines,
  html #activity-chrome-ending.site-perseper .ac-work,
  html #activity-chrome-ending.site-perseper .ac-fill,
  html #activity-chrome-ending.site-perseper .ac-actions { grid-column: 2; }
  html #activity-chrome-ending.site-perseper .ac-verdict { font-size: 20px; }
}

@media (orientation: landscape) and (max-height: 340px) {
  html #activity-chrome-ending.site-perseper { padding-block: 6px; }
  html #activity-chrome-ending.site-perseper .ac-card { padding: 12px; gap: 6px; }
  html #activity-chrome-ending.site-perseper .ac-line { padding: 4px 8px; font-size: 13px; }
  html #activity-chrome-ending.site-perseper .ac-verdict { font-size: 18px; }
}

/* Sideways, the status bar and the toasts sit in the controls column, never over the ladder.
   app.js sets --side-left and --side-w from that column and adds .dtd-side. */
@media (orientation: landscape) {
  html.dtd-side #activity-chrome-status {
    left: var(--side-left);
    right: auto;
    width: min(var(--side-w), calc(100vw - var(--side-left) - 72px - env(safe-area-inset-right)));
  }
  /* A toast covers the status strip for a moment: never the ladder, never Done, Undo or a tab's job. */
  html.dtd-side #activity-chrome-toast {
    left: var(--side-left);
    right: auto;
    top: max(12px, env(safe-area-inset-top));
    bottom: auto;
    translate: none;
    width: min(var(--side-w), calc(100vw - var(--side-left) - 72px - env(safe-area-inset-right)));
    max-width: none;
  }
  html.dtd-side .app { padding-top: max(var(--g), env(safe-area-inset-top)); }
  html.dtd-side .top { margin-top: calc(var(--ac-status-h, 64px) - var(--g) + 4px); flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: 4px; }
  /* Logo and New draft share a row; the draft tabs take the full width below and scroll alone. */
  html.dtd-side .top .tabs { order: 3; flex: 1 1 100%; }
  html.dtd-side .top .tab-new-slot { margin-left: auto; }
  html.dtd-side .top .logo { align-self: center; }
  /* The draft's name is on its tab right below; the bar keeps its numbers, the run and Settings. */
  html.dtd-side #activity-chrome-status .ac-label { display: none; }
}

/* Upright, a toast covers the status strip for a moment rather than the tabs or the top rung. */
@media (orientation: portrait) {
  html.dtd-up #activity-chrome-toast {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: calc(72px + env(safe-area-inset-right));
    translate: none;
    width: auto;
    max-width: none;
  }
}

/* ---------- views ---------- */

.app[data-view="depart"] .ladder,
.app[data-view="ladder"] .depart,
.app[data-view="finished"] .depart { display: none; }

/* ---------- sideways: the board on one side, the controls and status on the other ---------- */

@media (orientation: landscape) {
  .app {
    grid-template-columns: minmax(0, 1fr) clamp(244px, 36vw, 360px);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "stage top" "stage tools";
    column-gap: 12px;
  }
  /* Wide enough that the docked guide caption fits under the controls. */
  .app[data-view="depart"] { grid-template-columns: minmax(0, 1fr) clamp(240px, 33vw, 320px); }
  .top { flex-direction: column; align-items: stretch; }
  .logo { height: 40px; align-self: flex-start; }
  .tools { align-content: start; }
  .tool-row .sign { flex: 1 1 40%; }
  .tool-row .sign-wrote { padding: 0 8px; gap: 6px; letter-spacing: 0.04em; }

  .slot input[type="date"] { font-size: 16px; padding: 0 6px; }
  .depart {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-areas: "pick form" "shelf form";
    align-content: start;
    column-gap: 12px;
  }
  .depart-pick { grid-area: pick; }
  .newform { grid-area: form; align-self: start; }
  .shelf { grid-area: shelf; }
  .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { min-height: 64px; }
  .plaque { width: 112px; }

  .sheet-layer { align-items: stretch; justify-content: flex-end; }
  .sheet { max-height: none; height: 100%; width: min(460px, 100%); border-top: 0; border-left: var(--g) solid var(--ak-accent); }
}

/* A narrow sideways phone: the ladder is limited by height there, so the controls column takes
   more width and its status strip, tabs and signs each stay on one row. */
@media (orientation: landscape) and (max-width: 720px) {
  .app,
  .app[data-view="depart"] { grid-template-columns: minmax(0, 1fr) 44vw; }
}

/* Sideways the form can run past the screen, so its build sign rides the bottom edge there. */
@media (orientation: landscape) {
  .build-dock { position: sticky; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .logo { height: 32px; }
  .board-head { min-height: 36px; font-size: 17px; }
  /* A sideways phone: the form tightens so the fields, the day and the build sign all fit. */
  .newform { gap: 6px; padding: var(--g) 12px 12px; }
  .slot { gap: 2px; }
  .slot-name { font-size: 12px; }
  .slot input { min-height: 44px; font-size: 16px; }
  .route { display: none; }
  .when { font-size: 14px; min-height: 18px; }
  .form-top { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  .form-head { font-size: 16px; }
  .form-from { font-size: 12px; }
  .pick-say { font-size: 12px; }
  .date-chips { flex-wrap: nowrap; gap: 4px; }
  .date-chips .chip { padding: 0 4px; font-size: 13px; letter-spacing: 0.02em; }
  .card { grid-template-columns: 32px minmax(0, 1fr); gap: 6px; padding: 6px; }
  .card img { width: 32px; }
  .card-name { font-size: 13px; }
  .card-target { font-size: 17px; }
  .build-dock { padding-top: 6px; }
  #nf-build { min-height: 48px; font-size: 16px; }
}

@media (max-width: 380px) and (orientation: portrait) {
  .tab { padding: 0 10px; font-size: 14px; }
  .logo { height: 40px; }
  .sign { padding: 0 10px; }
}

/* ---------- motion: slow, flat, and only when the player wants it ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .rope { transition: height 900ms cubic-bezier(0.22, 1, 0.36, 1); }
  :root:not(.ac-still) .gauge-step { transition: background-color 240ms steps(2, end); }
  :root:not(.ac-still) .tile.is-flipping { animation: flap 520ms steps(6, end) both; animation-delay: calc(var(--i, 0) * 70ms); }
  :root:not(.ac-still) .plate.slide-in.side-right,
  :root:not(.ac-still) .plate.slide-in.is-next { animation: slide-from-right 640ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  :root:not(.ac-still) .plate.slide-in.side-left { animation: slide-from-left 640ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  :root:not(.ac-still) .plate.flip-over { animation: plate-turn 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  :root:not(.ac-still) .plaque.is-new { animation: slide-from-right 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  :root:not(.ac-still) .sign-undo::after { animation: drain var(--undo-ms, 5000ms) linear both; }
  :root:not(.ac-still) .kept.is-settled .kept-mark { animation: settle 600ms ease-out both; }
  :root:not(.ac-still) .flap.is-flipping { display: inline-block; animation: flap 520ms steps(6, end) both; }
  :root:not(.ac-still) .stamp.is-flipping { animation: flap 520ms steps(6, end) 140ms both; }
  :root:not(.ac-still) .guide-ring { animation: ring 1600ms ease-in-out infinite; }
  :root:not(.ac-still) .guide-say { animation: settle 500ms ease-out both; }
  :root:not(.ac-still) .sheet { animation: sheet-up 360ms cubic-bezier(0.22, 1, 0.36, 1) both; }
}

/* A split flap turning over, seen straight on: it folds flat to its hinge and opens again. */
@keyframes flap {
  0% { transform: scaleY(1); }
  45% { transform: scaleY(0.08); }
  55% { transform: scaleY(0.08); }
  100% { transform: scaleY(1); }
}
@keyframes plate-turn {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(0.04); }
  60% { transform: scaleY(0.04); }
  100% { transform: scaleY(1); }
}
@keyframes slide-from-right { from { translate: 32px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes slide-from-left { from { translate: -32px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }
@keyframes ring { 0%, 100% { outline-offset: 0; } 50% { outline-offset: 6px; } }
@keyframes sheet-up { from { translate: 0 24px; opacity: 0; } to { translate: 0 0; opacity: 1; } }

@media (orientation: landscape) and (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .sheet { animation-name: slide-from-right; }
}