/* Commute Route Picker: cut paper on an oak table. Torn edges, tape, cut-out letters. */

:root {
  --tape: color-mix(in srgb, var(--ak-accent-2) 34%, var(--ak-bg));
  --rule: color-mix(in srgb, var(--ak-ink) 28%, transparent);
  --pad-t: max(8px, env(safe-area-inset-top));
  --pad-r: max(10px, env(safe-area-inset-right));
  --pad-b: max(8px, env(safe-area-inset-bottom));
  --pad-l: max(10px, env(safe-area-inset-left));
  --cut-size: 24px;
}

[hidden] { display: none !important; }

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

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

body {
  display: grid;
  align-content: center;
  min-height: 100dvh;
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, var(--ak-bg-art));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- the desk ---------- */

.desk {
  width: 100%;
  height: min(100dvh, 940px);
  margin: 0 auto;
  max-width: 560px;
  padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 52px auto minmax(min-content, 1fr) auto auto;
  grid-template-areas: "top" "case" "record" "cards" "action";
  gap: 9px;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: manipulation;
}

.top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 64px;
  min-width: 0;
}

.logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  rotate: -1.5deg;
}

/* One small mute toggle, top left. The help button owns the top right. */
.mute {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 30;
  width: 48px;
  height: 48px;
  padding: 10px;
  border: 0;
  background: var(--ak-surface);
  color: var(--ak-ink);
  rotate: -3deg;
  cursor: pointer;
}
.mute svg { display: block; width: 100%; height: 100%; }
/* Nothing of the play screen shows before the week starts, not even the toggle. */
body:not(.is-playing) .mute { display: none; }
.mute[aria-pressed="true"] { color: var(--ak-ink-muted); }

/* ---------- paper ---------- */

.sheet {
  position: relative;
  min-width: 0;
  min-height: 0;
  filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--ak-ink) 30%, transparent));
}

.paper {
  height: 100%;
  background: var(--ak-bg);
}

/* A faint fibre in every sheet: flecks and a slanted grain, too light to sit behind words. */
.desk .paper {
  background-image:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--ak-ink) 5%, transparent) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 60% 70%, color-mix(in srgb, var(--ak-accent-2) 9%, transparent) 0 1px, transparent 1.6px),
    repeating-linear-gradient(97deg, transparent 0 13px, color-mix(in srgb, var(--ak-ink) 2.5%, transparent) 13px 14px);
  background-size: 11px 9px, 17px 13px, auto;
}

.tape {
  position: absolute;
  z-index: 3;
  display: block;
  width: 74px;
  height: 22px;
  background: var(--tape);
  pointer-events: none;
}
.tape-case { top: -9px; left: 22%; rotate: -4deg; }
.tape-record { top: -9px; right: 18%; rotate: 3deg; }
.tape-note { top: -10px; left: 50%; translate: -50% 0; rotate: -2deg; width: 64px; }

/* Cut-out letters: each a scrap of its own paper. */
.cut-word {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  font-weight: normal;
}
.cut {
  display: inline-block;
  padding: 3px 4px 2px;
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: var(--cut-size);
  line-height: 1;
  rotate: var(--tilt, 0deg);
  color: var(--ak-ink);
}
.cut-0 { background: var(--ak-surface); }
.cut-1 { background: var(--ak-bg); box-shadow: inset 0 0 0 1.5px var(--ak-ink-muted); }
.cut-2 { background: var(--ak-choice-selected-bg); color: var(--ak-choice-selected-ink); }
.cut-gap { display: inline-block; width: 8px; }

/* ---------- the case: this morning ---------- */

.case {
  grid-area: case;
  rotate: -0.8deg;
}
/* Upright, the morning never shrinks below its words, and the table's own header names it. */
@media (orientation: portrait) {
  .case { min-height: auto; }
  .record-head { display: none; }
  .record-paper { padding-top: 12px; }
}

.case-paper {
  display: grid;
  gap: 6px;
  padding: 12px 16px 10px;
}

.case-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px 12px;
}

.day-block { min-width: 0; }
.day-word { --cut-size: 22px; }
.day-word .cut { padding: 3px 3px 2px; }
.day-count {
  margin: 4px 0 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.mood { display: grid; gap: 4px; justify-items: end; }
.mood-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ak-ink-muted);
}
.mood-label { display: flex; align-items: center; gap: 3px; }
.mood-label b { color: var(--ak-ink); font-size: 16px; }
.mood-face { display: inline-block; width: 14px; height: 14px; color: var(--ak-ink); }
.mood-bar { display: flex; gap: 2px; }
.mood-cell {
  width: 9px;
  height: 18px;
  background: var(--ak-surface);
  box-shadow: inset 0 0 0 1.5px var(--ak-ink-muted);
}
.mood-cell.is-on { background: var(--ak-ink); }
.mood.is-low .mood-cell.is-on { background: var(--ak-accent); }

.slips {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.slip {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  column-gap: 8px;
  row-gap: 6px;
  height: 100%;
  padding: 9px 10px 16px;
  background: var(--ak-surface);
}
.slip-wrap { position: relative; min-width: 0; }
.slip-wrap:nth-child(1) { rotate: 1deg; }
.slip-wrap:nth-child(2) { rotate: -1.4deg; margin-top: 4px; }

.slip-icon { display: block; width: 32px; height: 32px; color: var(--ak-ink); }
.slip-icon svg,
.really-icon svg,
.row-icon svg { display: block; width: 100%; height: 100%; }

.slip-words { display: grid; gap: 1px; min-width: 0; }
.slip-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}
.slip-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ak-ink);
}

/* The real day, stamped under the hint once you have picked. */
.really {
  position: absolute;
  right: 8px;
  bottom: -13px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 3px 9px 3px 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  rotate: -2deg;
  visibility: hidden;
}
.really.is-shown { visibility: visible; }
/* Before the pick: an empty slot that says the real day is still to come. */
.really.is-pending {
  visibility: visible;
  min-height: 24px;
  font-size: 12.5px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  background: var(--ak-bg);
  color: var(--ak-ink-muted);
  outline: 1.5px dashed var(--ak-ink-muted);
  outline-offset: -1.5px;
}
.really-icon { display: block; width: 18px; height: 18px; }


.ruling-words { display: grid; gap: 3px; }
.verdict {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ak-ink);
}

/* How the real day set the numbers, in plain words. */
.why {
  margin: 0;
  min-height: 2.5em;
  font-size: 13px;
  line-height: 1.25;
  color: var(--ak-ink);
}
.why b { font-weight: 700; }

/* ---------- this week's brief ---------- */

.brief {
  grid-area: action;
  justify-self: start;
  align-self: center;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1px;
  max-width: calc(100% - 184px);
  padding: 6px 9px 5px;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  rotate: -1.2deg;
}
.tape-brief { top: -6px; left: 14px; width: 40px; height: 13px; rotate: -6deg; }
/* The week's brief rides on oxblood paper, so it is the first thing seen beside the choice. */
.brief-ask { font-size: 14px; font-weight: 700; line-height: 1.2; }
.brief-ask::before {
  content: attr(data-pre);
  font-weight: 600;
}
.brief-progress { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.brief.is-broken .brief-progress { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- the record: your week ---------- */

.record {
  grid-area: record;
  rotate: 0.6deg;
}

.record-paper {
  container: record / inline-size;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 10px;
  background: var(--ak-surface);
}

.record-head {
  margin: 0 0 2px;
  font-family: var(--ak-font-display);
  font-size: 20px;
  font-weight: var(--ak-title-weight);
  color: var(--ak-ink);
}

.rows {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-rows: repeat(5, minmax(36px, 1fr));
}

.rows-head,
.row {
  display: grid;
  grid-template-columns: 44px repeat(3, minmax(0, 1fr));
  column-gap: 6px;
  align-items: center;
}
.rows-head span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
  padding-left: 6px;
}

.row {
  position: relative;
  min-width: 0;
  border-bottom: 1.5px solid var(--rule);
}
.row-day {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}
.row-day b {
  font-family: var(--ak-font-display);
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  color: var(--ak-ink);
}
.row-truth { display: flex; gap: 2px; color: var(--ak-ink); }
.row-icon { display: block; width: 16px; height: 16px; }

.cell {
  position: relative;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.12;
  white-space: nowrap;
}
.cell.is-pencil,
.cell-slip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.c-usd::before { content: '\00a0·\00a0'; }
.c-mood { flex-basis: 100%; display: inline-flex; align-items: center; }
.c-mw { margin-right: 0.28em; }
.c-face { display: none; width: 12px; height: 12px; margin-right: 2px; flex: none; }

/* A narrow record: minutes on top, dollars and a mood face below. */
@container record (max-width: 280px) {
  .c-min { flex-basis: 100%; }
  .c-usd::before { content: none; }
  .c-mood { flex-basis: auto; margin-left: 6px; }
  .c-mw { display: none; }
  .c-face { display: inline-block; }
}
/* The roads not taken, in faded pencil, straight on the record. */
.cell.is-pencil {
  padding: 3px 6px;
  font-style: italic;
  color: var(--ak-ink-muted);
}
/* Your road: a ruling slip taped down in ink. */
.cell.is-ink { rotate: var(--tilt, 0deg); }
.cell-slip {
  padding: 3px 6px 2px;
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--ak-ink);
}
.tape-cell {
  top: -5px;
  left: 50%;
  translate: -50% 0;
  width: 30px;
  height: 11px;
  rotate: -6deg;
}

.totals {
  position: relative;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.totals-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}
.totals-line {
  font-family: var(--ak-font-display);
  font-size: 21px;
  font-weight: var(--ak-title-weight);
  color: var(--ak-ink);
}
.totals-big {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 16px;
  padding-right: 64px;
}
.tot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.tot-num { --cut-size: 24px; }
.tot-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}
.totals-seal {
  position: absolute;
  right: -4px;
  bottom: -8px;
  width: 64px;
  height: auto;
  rotate: -10deg;
}

/* ---------- teaching, hint ---------- */

.teach {
  position: absolute;
  z-index: 6;
  left: 7%;
  right: 7%;
  bottom: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  rotate: -1deg;
}
.teach-text {
  margin: 0;
  padding: 16px 18px 14px;
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: inset 0 0 0 2px var(--ak-ink);
}
.teach-arrow {
  display: block;
  width: 34px;
  height: 34px;
  margin-top: 2px;
  color: var(--ak-accent);
}
.teach-arrow svg { display: block; width: 100%; height: 100%; }

/* Grows upward from the foot of the record, over the morning if it must. */
.hint-note {
  position: absolute;
  z-index: 7;
  left: 6px;
  right: 6px;
  bottom: 8px;
  padding: 18px 18px 14px;
  background: var(--ak-bg);
  box-shadow: inset 0 0 0 2px var(--ak-ink);
  rotate: 1deg;
}
.hint-note .tape-note { top: 0; }
.hint-note::after { content: ''; display: block; clear: both; }
.hint-text {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ak-ink);
}
.hint-close { float: right; }

/* ---------- the three ways in ---------- */

.cards {
  grid-area: cards;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  height: clamp(146px, 20dvh, 250px);
  min-height: 0;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ak-ink);
  font: inherit;
  cursor: pointer;
  rotate: var(--tilt, 0deg);
  -webkit-tap-highlight-color: transparent;
}
.card:disabled { cursor: default; }
.card:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 3px; }

.card-art {
  position: relative;
  flex: 1 1 auto;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-art > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.seal {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 58%;
  max-width: 96px;
  height: auto;
  translate: -50% -50%;
  rotate: -8deg;
  opacity: 0;
  pointer-events: none;
}
.card.is-chosen .seal { opacity: 1; }
.card.is-passed { scale: 0.93; translate: 0 6px; }
.card.is-passed .card-art > img:first-child { filter: grayscale(1) contrast(0.75) brightness(1.18); }

.card-tag {
  position: relative;
  z-index: 1;
  margin-top: -4px;
  padding: 5px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  box-shadow: inset 0 0 0 2px var(--ak-choice-border);
}
/* The road's name, cut out letter by letter like the day. */
.card-tag .tag-name { --cut-size: 17px; margin-bottom: 3px; justify-content: center; }
.card-tag .tag-name .cut { padding: 2px 3px 1px; }
/* A road that would break the brief wears the warning across its top edge, over the tape. */
.tag-flag {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  translate: -50% 0;
  rotate: -2deg;
  padding: 2px 6px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  background: var(--ak-bg);
  color: var(--ak-ink);
  box-shadow: inset 0 0 0 1.5px var(--ak-ink);
}
.tag-flag.is-risk {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  box-shadow: none;
}
.card.is-chosen .cut { box-shadow: inset 0 0 0 1.5px var(--ak-choice-selected-ink); }
.card.is-chosen .card-tag {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  box-shadow: inset 0 0 0 2px var(--ak-choice-selected-border);
}

/* ---------- actions ---------- */

.action {
  grid-area: action;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
}

/* Upright, Hint sits in the top row beside the mute toggle; sideways, beside Next day. */
.hint {
  grid-area: top;
  justify-self: start;
  align-self: center;
  margin-left: 54px;
  z-index: 2;
}

.next-wrap {
  position: relative;
  display: inline-flex;
  margin-left: auto;
}

.next {
  min-height: 56px;
  min-width: 168px;
  white-space: nowrap;
  padding: 0 22px;
  border: 0;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-size: 23px;
  font-weight: var(--ak-title-weight);
  rotate: -1.5deg;
  cursor: pointer;
}
.next:active { background: var(--ak-btn-active); }
.next:focus-visible,
.scrap-btn:focus-visible,
.mute:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 3px; }

.scrap-btn {
  min-height: 48px;
  min-width: 72px;
  padding: 0 18px;
  border: 0;
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  box-shadow: inset 0 0 0 2px var(--ak-choice-border);
  font-size: 16px;
  font-weight: 700;
  rotate: 1.5deg;
  cursor: pointer;
}
.scrap-btn:active { background: var(--ak-choice-selected-bg); color: var(--ak-choice-selected-ink); }

@media (hover: hover) {
  .next:hover { background: var(--ak-btn-hover); }
}

/* The pointing ring for the first move. */
.is-pointed::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 3px solid var(--ak-accent);
  pointer-events: none;
}

/* ---------- the end of the week ---------- */

.end {
  grid-area: end;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  min-height: 0;
}

/* The reason stays pinned while the result scrolls beneath it, so it is never hidden. */
.end-reason {
  position: sticky;
  top: 60px;
  z-index: 4;
  align-self: flex-start;
  margin: 0;
  padding: 6px 12px;
  background: var(--ak-bg);
  font-family: var(--ak-font-display);
  font-size: 19px;
  font-weight: var(--ak-title-weight);
  line-height: 1.2;
  color: var(--ak-ink);
  rotate: -1deg;
}

.end-slip {
  position: relative;
  rotate: -1.4deg;
  filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--ak-ink) 30%, transparent));
}
.tape-end-l { top: -10px; left: 10%; rotate: -7deg; }
.tape-end-r { top: -10px; right: 10%; rotate: 5deg; }

.end-paper {
  display: grid;
  gap: 8px;
  padding: 18px 16px 14px;
}
.end-word { --cut-size: 27px; }
/* The week's headline: a strip of newsprint pasted on at a slant. */
.end-headline {
  justify-self: start;
  margin: 0 0 2px;
  padding: 7px 14px 8px;
  background: var(--ak-bg);
  color: var(--ak-ink);
  box-shadow: inset 0 0 0 1.5px var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 21px;
  font-style: italic;
  font-weight: var(--ak-title-weight);
  line-height: 1.15;
  rotate: 1.2deg;
}
.end-says {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ak-ink);
}
.end-left,
.end-right { display: grid; gap: 8px; align-content: start; min-width: 0; }
.end-notes {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ak-ink-muted);
}
.end-brief {
  margin: 0;
  padding: 5px 9px;
  justify-self: start;
  font-size: 14px;
  font-weight: 700;
  background: var(--ak-surface);
  color: var(--ak-ink);
  rotate: -1deg;
}
.end-brief.is-met { background: var(--ak-choice-selected-bg); color: var(--ak-choice-selected-ink); }
.found { display: grid; gap: 5px; }
.found-label {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}
.found-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.found-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-family: var(--ak-font-display);
  font-size: 16px;
  font-weight: var(--ak-title-weight);
  line-height: 1.1;
  rotate: var(--tilt, 0deg);
}
.found-tag.is-found { background: var(--ak-choice-selected-bg); color: var(--ak-choice-selected-ink); }
.found-tag.is-missing {
  background: var(--ak-bg);
  color: var(--ak-ink-muted);
  font-style: italic;
  box-shadow: inset 0 0 0 1.5px var(--ak-ink-muted);
}
.found-new {
  padding: 0 4px;
  font-family: var(--ak-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ak-bg);
  color: var(--ak-ink);
}
/* Next week: the brief, the streak and the weather, right above the button that starts it. */
.next-brief {
  display: grid;
  gap: 3px;
  margin: 2px 0 0;
  padding: 10px 12px 9px;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  rotate: -0.6deg;
}
.next-brief-label {
  font-family: var(--ak-font-display);
  font-size: 20px;
  font-weight: var(--ak-title-weight);
  line-height: 1;
}
.next-brief-ask { font-size: 16px; font-weight: 700; line-height: 1.25; }
.next-brief-stakes { font-size: 14.5px; line-height: 1.35; }
.end-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.end-table th,
.end-table td {
  padding: 3px 4px;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--rule);
  text-align: right;
}
.end-table thead th {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}
.end-table tbody th { text-align: left; font-weight: 600; }
.end-table .is-mine { color: var(--ak-ink); font-weight: 700; }
.end-table .is-mine th { font-weight: 700; }
.end-table .is-pencil { color: var(--ak-ink-muted); font-style: italic; }
.end-line {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ak-ink);
}
.end-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 4px;
}
.end-again { min-width: 150px; }

.desk.is-over {
  grid-template-rows: 52px auto auto;
  row-gap: 8px;
  grid-template-areas: "top" "record" "end";
}
.desk.is-over .case,
.desk.is-over .cards,
.desk.is-over .action { display: none; }
.desk.is-over .rows { grid-template-rows: repeat(5, minmax(34px, 1fr)); }
.desk.is-over .end { gap: 10px; padding-bottom: 14px; }
/* The crooked column of rulings. */
.desk.is-over .cell.is-ink { rotate: calc(var(--tilt, 0deg) * 2.4); }

/* ---------- sideways: record on the left, the morning on the right ---------- */

@media (orientation: landscape) {
  .desk {
    max-width: 1180px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr) minmax(0, 0.98fr);
    grid-template-rows: 56px minmax(0, 1fr) auto;
    grid-template-areas:
      "top case ."
      "record case cards"
      "record case action";
    column-gap: 16px;
    row-gap: 8px;
  }
  .top { padding: 0 8px 0 60px; }
  .logo { height: 36px; }
  .case-paper { align-content: start; height: 100%; }
  .case-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mood { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
  .slips { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 14px; }
  .slip-wrap:nth-child(2) { margin-top: 0; }
  .cards {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .card { flex-direction: row; align-items: center; }
  .card-art { flex: 1 1 52%; height: 100%; }
  .card-tag { flex: 1 1 48%; margin: 0 0 0 -6px; align-self: center; }
  .seal { width: auto; height: 88%; max-width: 90%; }
  .action { justify-content: space-between; }
  /* Sideways, the brief sits beside the logo, above the record. */
  .top { justify-content: flex-start; }
  .hint { grid-area: action; margin-left: 0; }
  .brief {
    grid-area: top;
    justify-self: end;
    align-self: center;
    max-width: calc(100% - 132px);
    padding: 3px 8px 3px;
  }
  .brief-ask { font-size: 12px; line-height: 1.15; }
  .brief-progress { font-size: 11.5px; line-height: 1.15; }
  .next { min-width: 0; padding: 0 20px; }
  .teach {
    left: 5%;
    right: 46px;
    bottom: 40px;
    flex-direction: row;
  }
  .teach-arrow {
    position: absolute;
    right: -42px;
    top: 50%;
    margin: -17px 0 0;
    rotate: -90deg;
  }
  .desk.is-over {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-rows: 52px minmax(0, 1fr);
    grid-template-areas: "top end" "record end";
  }
  /* Sideways the reason sits beside the logo, and the result slip takes the whole column. */
  .desk.is-over .end { display: contents; }
  .desk.is-over .end-reason {
    grid-area: top;
    justify-self: end;
    align-self: center;
    position: static;
    max-width: calc(100% - 132px);
    margin: 0;
    font-size: 16px;
  }
  .desk.is-over .end-slip {
    grid-area: end;
    grid-row: 1 / -1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 4px 0;
  }

  .desk.is-over .end-slip .tape { top: 2px; }
  .desk.is-over .end-paper { height: auto; min-height: 100%; }
  .desk.is-over .record-head { display: none; }
  .desk.is-over .rows { grid-template-rows: repeat(5, minmax(32px, 1fr)); }
  .desk.is-over .totals { margin-top: 4px; }
  .end-word { padding-right: 56px; }
  /* Sideways the slip is two balanced columns under the title, so the buttons stay in view. */
  .end-paper {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-areas: "word word" "head head" "left right" "buttons buttons";
    column-gap: 16px;
    row-gap: 8px;
    align-items: start;
  }
  /* Two free columns: what happened on the left; next week first on the right, then the numbers. */
  .end-word { grid-area: word; }
  .end-headline { grid-area: head; font-size: 19px; }
  .end-left { grid-area: left; gap: 8px; }
  .end-right { grid-area: right; gap: 8px; }
  .next-brief { order: -1; }
  /* The replay buttons stay pinned in view while the results scroll above them. */
  .end-buttons {
    grid-area: buttons;
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -12px -10px;
    padding: 8px 12px 10px;
    background: var(--ak-bg);
    box-shadow: 0 -1.5px 0 var(--rule);
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  :root { --cut-size: 20px; }
  .day-word { --cut-size: 19px; }
  .day-count { margin-top: 2px; }
  .case-paper { gap: 5px; padding: 10px 12px 8px; }
  .slips { gap: 13px; margin-bottom: 12px; }
  .verdict { line-height: 1.15; }
  .why { min-height: 0; }
  .slip { padding: 6px 8px 14px; grid-template-columns: 26px minmax(0, 1fr); }
  .slip-icon { width: 26px; height: 26px; }
  .slip-text { font-size: 14px; }
  .really { min-height: 22px; font-size: 12px; padding: 2px 8px 2px 5px; }
  .verdict { font-size: 17px; }
  .why { font-size: 13px; }
  .record-paper { padding: 8px 12px 8px; }
  .record-head { font-size: 18px; }
  .rows { grid-template-rows: repeat(5, minmax(38px, 1fr)); }
  .totals { margin-top: 4px; }
  .totals-line { font-size: 18px; }
  .card-tag { padding: 4px 5px; font-size: 12px; }
  .card-tag .tag-name { --cut-size: 15px; }
  .action { min-height: 54px; }
  .next { min-height: 52px; font-size: 20px; }
  .teach-text { padding: 12px 14px; }
  .end { gap: 10px; }
  .end-reason { font-size: 17px; padding: 6px 10px; }
  .end-paper { padding: 14px 12px 10px; }
  .end-word { --cut-size: 26px; margin-bottom: 2px; }
  .end-says { font-size: 15px; line-height: 1.35; }
  .end-line { font-size: 15px; line-height: 1.35; }
  .end-notes { font-size: 14px; line-height: 1.35; }
  .end-table { font-size: 14px; }
  .end-table th,
  .end-table td { padding: 3px 4px; }
  .end-table thead th { font-size: 11.5px; letter-spacing: 0.02em; }
  .end-brief { font-size: 14.5px; padding: 5px 9px; }
  .found-tag { font-size: 15px; padding: 3px 7px; }
  .found-list { gap: 6px; }
  .end-buttons { gap: 12px; }
  .end-buttons .next { min-height: 54px; font-size: 21px; }
  .end-buttons .scrap-btn { min-height: 52px; font-size: 16px; }
  .tot-num { --cut-size: 19px; }
  .totals-seal { width: 48px; }
}

/* A narrow sideways phone: keep the end table clear of the help button in the corner. */
@media (orientation: landscape) and (max-width: 800px) {
  .desk.is-over .end-table { margin-top: 14px; }
}

/* Desktop: the same sideways layout, centered at a readable size. */
@media (orientation: landscape) and (min-height: 600px) {
  .desk { height: min(100dvh, 700px); max-width: 1060px; }
}

/* A short phone held upright: tighten so the whole board still fits. */
@media (orientation: portrait) and (max-height: 820px) {
  .desk { gap: 5px; }
  .record-head { display: none; }
  .record-paper { padding-top: 10px; }
  .case-paper { padding: 10px 14px 8px; }
  .slip { padding: 7px 8px 14px; }
  .verdict { font-size: 17px; }
  .cards { height: clamp(130px, 16.5dvh, 200px); }
  .rows { grid-template-rows: repeat(5, minmax(34px, 1fr)); }
  .why { font-size: 13px; min-height: 0; }
  .slips { margin-bottom: 8px; }
  .action { min-height: 56px; }
  .next { min-height: 52px; }
}

/* The shortest upright phones: a little less card and a little less gap. */
@media (orientation: portrait) and (max-height: 760px) {
  .desk { gap: 5px; }
  .cards { height: 116px; }
  .next { min-width: 140px; padding: 0 16px; font-size: 21px; }
  .brief { max-width: calc(100% - 150px); }
  .brief-ask { font-size: 13px; }
  .brief-progress { font-size: 12px; }
  .verdict { font-size: 16px; }
  .case-paper { gap: 4px; }
}

/* ---------- motion: the choice settles, then the day arrives ---------- */

@media (prefers-reduced-motion: no-preference) {
  .card { transition: scale 380ms ease, translate 380ms ease; }
  .card-art > img:first-child { transition: filter 420ms ease; }

  .card.is-fresh .seal { animation: seal-thump 460ms cubic-bezier(0.3, 1.4, 0.5, 1) both; }
  .card.is-fresh { animation: card-press 260ms ease 160ms; }
  .really.is-shown.is-fresh { animation: stamp 260ms ease-out 420ms both; }

  .row.is-fresh .cell-slip { animation: slip-in 720ms cubic-bezier(0.25, 0.9, 0.3, 1) 620ms both; }
  .row.is-fresh .tape-cell { animation: tape-on 240ms ease-out 1240ms both; }
  .row.is-fresh .cell.is-pencil,
  .row.is-fresh .row-truth { animation: pencil-in 500ms ease 1100ms both; }

  .is-pointed::after { animation: ring 1.4s ease-in-out infinite; }
  .teach[data-step] .teach-arrow svg { animation: nudge 1.2s ease-in-out infinite; }

  .end-reason { animation: stamp 300ms ease-out both; }
  .end-slip:not([hidden]) { animation: tape-down 720ms cubic-bezier(0.25, 0.9, 0.3, 1) both; }
  .end-slip:not([hidden]) .end-headline { animation: paste-on 420ms cubic-bezier(0.3, 1.4, 0.5, 1) 620ms both; }
  .desk.is-over .totals-seal { animation: seal-thump 460ms cubic-bezier(0.3, 1.4, 0.5, 1) 300ms both; }

  @keyframes seal-thump {
    0% { scale: 2.3; opacity: 0; rotate: -26deg; }
    55% { scale: 0.9; opacity: 1; rotate: -5deg; }
    78% { scale: 1.04; }
    100% { scale: 1; opacity: 1; rotate: -8deg; }
  }
  @keyframes card-press {
    40% { scale: 0.96; }
  }
  @keyframes stamp {
    0% { scale: 1.5; opacity: 0; }
    100% { scale: 1; opacity: 1; }
  }
  @keyframes slip-in {
    0% { translate: 140% 0; rotate: 9deg; opacity: 0; }
    55% { translate: 0 0; rotate: -3deg; opacity: 1; }
    78% { rotate: 1.5deg; }
    100% { translate: 0 0; rotate: 0deg; opacity: 1; }
  }
  @keyframes pencil-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes tape-on {
    0% { scale: 1.5; opacity: 0; }
    100% { scale: 1; opacity: 1; }
  }
  @keyframes ring {
    0%, 100% { opacity: 1; scale: 1; }
    50% { opacity: 0.35; scale: 1.03; }
  }
  @keyframes nudge {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 5px; }
  }
  @keyframes paste-on {
    0% { scale: 1.25; rotate: -4deg; opacity: 0; }
    100% { scale: 1; rotate: 1.2deg; opacity: 1; }
  }
  @keyframes tape-down {
    0% { translate: 0 -36px; rotate: -7deg; opacity: 0; }
    60% { translate: 0 4px; rotate: 0.4deg; opacity: 1; }
    82% { rotate: -2.2deg; }
    100% { translate: 0 0; rotate: -1.4deg; opacity: 1; }
  }
}