/* If the Train Is Late: minimal line on the night concourse. One hairline weight, square corners,
   no filled panels. Teal and coral belong to P and Q alone; the lamp-ivory line is the only accent
   and it sits only on what the player can press. */

:root {
  --hair: color-mix(in srgb, var(--ak-ink) 30%, transparent);
  --lamp: var(--ak-ink);
  --gap: clamp(10px, 1.9dvh, 22px);
  --edge-x: max(20px, env(safe-area-inset-left));
  --edge-x-end: max(20px, env(safe-area-inset-right));
}

[hidden] { display: none !important; }

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

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

body {
  min-height: 100dvh;
  background-color: var(--ak-bg);
  /* start.js paints --ak-backdrop-layer when its screen draws; the same wash stands in when it is skipped. */
  background-image: var(
    --ak-backdrop-layer,
    linear-gradient(color-mix(in srgb, var(--ak-bg) 82%, transparent), color-mix(in srgb, var(--ak-bg) 82%, transparent)),
    url("./art/canopy-night.jpg")
  );
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-font-smoothing: antialiased;
}

/* The play screen keeps the arch to the top edge: below it, a plain field so the sheet reads alone. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom, transparent 0%, var(--ak-bg) 18%, var(--ak-bg) 100%);
  opacity: 0.9;
  pointer-events: none;
}

/* The ending dims the arch: a plain wash over the backdrop, under the play screen. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--ak-bg);
  opacity: 0;
  pointer-events: none;
}

body.is-ending::after { opacity: 0.6; }

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

.caps {
  margin: 0;
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- The frame: board above controls upright, side by side when turned ---------- */

.stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas:
    "mast"
    "board"
    "desk";
  align-content: start;
  row-gap: var(--gap);
  width: 100%;
  max-width: 600px;
  height: 100dvh;
  margin: 0 auto;
  padding:
    calc(var(--ac-status-h, 64px) + 8px)
    var(--edge-x-end)
    max(16px, env(safe-area-inset-bottom))
    var(--edge-x);
  overflow-y: auto;
  touch-action: manipulation;
}

.stage[data-view="idle"] > :not(.mast):not(.opening) { display: none; }

/* The brief's frame, kept on the play screen: the title flush left over a heavy rule, the small
   logo beside it, and the argument's number in small capitals under the rule. */
.mast {
  grid-area: mast;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.mast-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 3px solid var(--ak-ink);
}

/* A single-line canopy arch beside the title: the station's one shape, drawn like the sheet's rules. */
.arch {
  display: block;
  flex: none;
  width: 30px;
  height: 18px;
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* The painted logo only where it can be read at its size: the first frame and the ending. */
.logo {
  display: block;
  width: auto;
}

.opening .logo { height: clamp(96px, 15dvh, 132px); }

.column-head .logo { height: 72px; margin-bottom: 12px; }

/* ---------- The first frame: the 8:06 platform, held still until start.js draws over it ---------- */

.stage[data-view="idle"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "mast"
    "open";
}

.opening {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 2.2dvh, 20px);
  grid-area: open;
  padding-top: clamp(8px, 2dvh, 20px);
}

.opening-line {
  max-width: 24ch;
  margin: 0;
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: clamp(20px, min(5.8vw, 3.2dvh), 28px);
  font-weight: 600;
  line-height: 1.25;
}

.opening-jump {
  min-width: min(100%, 300px);
  min-height: 52px;
  margin-top: clamp(8px, 2dvh, 20px);
  padding: 0 22px;
  border: 1.5px solid var(--lamp);
  border-radius: 0;
  background: transparent;
  color: var(--lamp);
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

@media (orientation: landscape) and (max-height: 600px) {
  .opening {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(20px, 4vw, 48px);
    row-gap: 8px;
    align-content: start;
  }

  .opening .logo { grid-row: 1 / span 4; height: clamp(96px, 30dvh, 128px); }

  .opening-line { max-width: 36ch; font-size: clamp(18px, 4.8dvh, 22px); }

  .opening-jump { justify-self: start; margin-top: 6px; }
}

.mast-title {
  margin: 0;
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: clamp(19px, min(5.4vw, 3dvh), 26px);
  font-weight: var(--ak-title-weight, 600);
  line-height: 1.1;
}

.sheet-title { color: var(--ak-ink); }

.sheet,
.example { grid-area: board; }

.desk,
.teach-desk { grid-area: desk; }

.teach { display: contents; }

.column { grid-row: 2 / 4; }

@media (orientation: landscape) {
  .stage {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "mast desk"
      "board desk";
    column-gap: clamp(28px, 5vw, 72px);
    row-gap: clamp(10px, 2dvh, 18px);
    max-width: 1120px;
  }

}

/* ---------- The argument sheet ---------- */

.sheet { align-self: start; }

.line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.6em;
  align-items: baseline;
  column-gap: 12px;
  margin: 0;
}

.num {
  justify-self: end;
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* An open box: three sides drawn, the numerals' side left open. */
.premises {
  margin: 0;
  padding: clamp(12px, 2dvh, 18px) 0 clamp(12px, 2dvh, 18px) clamp(14px, 3.4vw, 22px);
  border: 1px solid var(--hair);
  border-right: 0;
  list-style: none;
}

.premises .line + .line { margin-top: clamp(8px, 1.4dvh, 14px); }

.premises .text {
  font-size: clamp(16px, min(4.5vw, 2.3dvh), 20px);
  line-height: 1.4;
}

.conclusion {
  margin-top: clamp(14px, 2.4dvh, 22px);
  padding-top: clamp(14px, 2.4dvh, 22px);
  border-top: 1px solid var(--hair);
}

.conclusion .text {
  font-family: var(--ak-font-display);
  font-size: clamp(20px, min(5.6vw, 3.3dvh), 30px);
  font-weight: 600;
  line-height: 1.2;
}

/* P, Q and R: one idea each, told apart by tone and by the shape of the underline. */
.m {
  text-decoration-line: underline;
  text-underline-offset: 0.24em;
  text-decoration-skip-ink: none;
}

.m-P {
  text-decoration-color: var(--ak-accent);
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
}

.m-Q {
  text-decoration-color: var(--ak-accent-2);
  text-decoration-style: double;
  text-decoration-thickness: 1.5px;
}

.m-R {
  text-decoration-color: var(--ak-ink-muted);
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
}

/* ---------- The desk: the two answers, then the why ---------- */

/* The desk fills what the sheet leaves. The sheet and the answers never scroll away: on a short
   screen only the why's text scrolls, inside its own space, with Next pinned under it. */
.desk {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8dvh, 16px);
  align-self: stretch;
  min-height: 0;
}

.desk > .ask,
.desk > .answers { flex: none; }

.answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.answer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: clamp(52px, 8dvh, 64px);
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lamp);
  font-size: clamp(16px, 2.3dvh, 18px);
  font-weight: 500;
  line-height: 1.15;
  text-align: left;
  cursor: pointer;
}

.answer:disabled { cursor: default; }

/* Once the answer locks, the pair settles to the smallest comfortable height to make room for the why. */
.is-locked .answer { min-height: 48px; }

/* The line around each answer starts open; the chosen one closes. */
.edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.edge rect {
  fill: none;
  stroke: var(--lamp);
  stroke-width: 1.5;
  stroke-dasharray: 91 9;
  vector-effect: non-scaling-stroke;
}

.answer.is-chosen .edge rect {
  stroke-dasharray: 100 0;
  stroke-width: 3;
}

.answer.is-faded { opacity: 0.38; }

.answer.is-faded .edge rect {
  stroke: var(--hair);
  stroke-width: 1;
}

/* The answer's mark in the same single line as everything else: a closed bar, or the bar broken. */
.mark {
  flex: none;
  width: 30px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: square;
}

.why {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}

.why-body {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.why-foot { flex: none; }

.why p { margin: 0; }

.call {
  font-family: var(--ak-font-display);
  font-size: clamp(19px, 2.7dvh, 23px);
  font-weight: 600;
  line-height: 1.2;
}

.form-name { color: var(--ak-ink); }

/* Held or missed, said in the verdict list's own words; a miss is boxed, so it reads without colour. */
.call-mark {
  display: inline-block;
  margin-right: 6px;
  color: var(--ak-ink);
  vertical-align: 0.2em;
}

.call-mark.is-missed {
  padding: 1px 6px;
  border: 1px solid var(--ak-ink);
}

/* From the second set the shape is the player's to find: the underlines arrive with the answer. */
.marks-wait:not(.is-locked) .m { text-decoration-color: transparent; }

.sheet:focus { outline: none; }
.sheet:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 6px; }

.why-text,
.twin {
  font-size: clamp(15px, 1.85dvh, 16.5px);
  line-height: 1.42;
}

.twin { color: var(--ak-ink-muted); }

.twin-label { margin-right: 6px; font-size: 11px; }

.shape,
.row-shape {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 0.55em;
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  letter-spacing: 0.14em;
}

.why-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}

.shape {
  flex: 1 1 14em;
  font-size: 14px;
}

.s-P,
.s-Q,
.s-R {
  font-weight: 700;
  text-decoration-line: underline;
  text-underline-offset: 0.28em;
}

.s-P { color: var(--ak-accent); text-decoration-style: solid; text-decoration-thickness: 2px; }
.s-Q { color: var(--ak-accent-2); text-decoration-style: double; }
.s-R { color: var(--ak-ink); text-decoration-style: dotted; text-decoration-thickness: 2px; }

.next {
  flex: none;
  min-width: 6.5em;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid var(--lamp);
  border-radius: 0;
  background: transparent;
  color: var(--lamp);
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}

/* ---------- The worked example ---------- */

.example {
  position: relative;
  justify-self: start;
  align-self: start;
  width: min(100%, 300px, calc(36dvh * 0.79));
  margin: 0;
  aspect-ratio: 304 / 384;
  background: url("./art/argument-sheet.png") center / 100% 100% no-repeat;
  container-type: inline-size;
}

.ex {
  position: absolute;
  display: flex;
  align-items: center;
  color: var(--ak-ink);
  font-size: clamp(16px, 6.6cqw, 20px);
  line-height: 1.2;
}

.ex-1 { top: 5.5%; left: 11%; width: 68%; height: 16%; }
.ex-2 { top: 25.2%; left: 11%; width: 68%; height: 15.6%; }

.ex-3 {
  top: 53%;
  left: 9%;
  width: 80%;
  height: 40%;
  align-items: flex-start;
  font-family: var(--ak-font-display);
  font-size: clamp(18px, 8.8cqw, 27px);
  font-weight: 600;
}

.teach-desk {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8dvh, 16px);
  align-self: start;
}

.shape-art {
  display: block;
  width: min(100%, 260px, 30dvh);
  height: auto;
}

/* Teaching text: large, high contrast, on a solid backing. */
.caption {
  margin: 0;
  padding: 14px 16px;
  border-left: 2px solid var(--lamp);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-size: clamp(18px, 2.5dvh, 20px);
  line-height: 1.4;
}

.caption strong { font-weight: 600; }

.got-it {
  width: min(100%, 360px);
  min-height: 58px;
  border: 2px solid var(--lamp);
  border-radius: 0;
  background: transparent;
  color: var(--lamp);
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
}

@media (orientation: landscape) {
  /* Sideways, the example sheet takes the whole height; the logo moves over to the caption's side. */
  .stage[data-view="teach"] {
    grid-template-areas:
      "board mast"
      "board desk";
  }

  .example { width: min(100%, 300px, calc((100dvh - var(--ac-status-h, 64px) - 32px) * 0.79)); }

  .shape-art { width: min(100%, 240px); }
}

/* A short upright screen (a phone with its browser bars showing): tighter spacing and type, so
   most whys still sit whole under the pinned sheet. */
@media (orientation: portrait) and (max-height: 760px) {
  .stage { row-gap: 8px; }
  .premises { padding-top: 10px; padding-bottom: 10px; }
  .premises .line + .line { margin-top: 6px; }
  .premises .text { font-size: 16px; line-height: 1.34; }
  .conclusion { margin-top: 10px; padding-top: 10px; }
  .conclusion .text { font-size: 20px; }
  .desk { gap: 8px; }
  .why { gap: 5px; padding-top: 8px; }
  .why-body { gap: 5px; }
  .call { font-size: 18px; }
  .why-text,
  .twin { font-size: 14.5px; line-height: 1.36; }
  .why-foot { padding-top: 8px; }

  .column .column-verdict { margin-bottom: 10px; font-size: 19px; }
  .column .row { padding: 4px 0; }
}

/* A phone on its side: the why sets a little tighter so it never needs a scroll. */
@media (orientation: landscape) and (max-height: 600px) {
  .why-text,
  .twin {
    font-size: 14.5px;
    line-height: 1.38;
  }

  .call { font-size: 17px; }
}

/* A desktop window: the same layout, centred across and set down from the top by a fixed share of
   the height, so the sheet never shifts when the why appears under the answers. */
@media (orientation: landscape) and (min-height: 700px) {
  .stage {
    grid-template-rows: auto auto;
    padding-top: calc(var(--ac-status-h, 64px) + clamp(24px, 16dvh, 180px));
  }
}

/* ---------- The end: the shapes settle into one column ---------- */

.stage.is-ghosting .sheet,
.stage.is-ghosting .desk { opacity: 0.12; }

.column { align-self: start; }

.heavy-rule {
  height: 3px;
  margin-bottom: 14px;
  background: var(--ak-ink);
}

.column-verdict {
  max-width: 34ch;
  margin: 0 0 16px;
  font-family: var(--ak-font-display);
  font-size: clamp(20px, 3dvh, 28px);
  font-weight: 600;
  line-height: 1.22;
}

.column-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each row: the argument's own last line, then its form and bare shape, and held or missed. */
.row {
  display: grid;
  grid-template-columns: 1.8em minmax(0, 1fr) auto;
  grid-template-areas:
    "n text mark"
    "n meta meta";
  column-gap: 10px;
  row-gap: 2px;
  padding: 6px 0;
  border-top: 1px solid var(--hair);
}

.row-n {
  grid-area: n;
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-weight: 600;
}

.row-text { grid-area: text; font-size: 14px; line-height: 1.3; }

.row-meta {
  display: flex;
  flex-wrap: wrap;
  grid-area: meta;
  align-items: baseline;
  gap: 2px 10px;
}

.row-form { font-size: 10.5px; }

.row-shape { font-size: 10.5px; letter-spacing: 0.08em; }

.row-mark { grid-area: mark; align-self: start; font-size: 11px; }

/* A miss is boxed as well as named, so it reads without colour. */
.row.is-missed .row-mark {
  padding: 2px 6px;
  border: 1px solid var(--ak-ink);
  color: var(--ak-ink);
}

/* Sideways: the logo and the verdict on one side, the ten shape lines in one column on the other. */
@media (orientation: landscape) {
  .stage[data-view="end"] {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-areas:
      "mast rows"
      "board rows";
  }

  .column { display: contents; }

  .column-head { grid-area: board; align-self: start; }

  .column-rows { grid-area: rows; align-self: start; }

  .row { padding: 4px 0; }
}

/* Where height is short (a phone on its side, or upright with browser bars), the argument's number
   joins the title's line and the heavy rule runs under both. */
@media (orientation: landscape) and (max-height: 600px), (orientation: portrait) and (max-height: 760px) {
  .mast {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--ak-ink);
  }

  .mast-head {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .mast-title { font-size: 18px; white-space: nowrap; }

  .arch { width: 24px; height: 15px; }

  .sheet-title { flex: none; }
}

/* At the end the painted logo stands for the title over the verdict's own heavy rule, so the
   masthead steps aside rather than say the title twice. */
.stage[data-view="end"] .mast { display: none; }

/* chrome.js sets its ending to the bottom with justify-content: flex-end, so a written verdict taller
   than a sideways phone would spill off the top where no scroll can reach it. The same bottom
   anchoring by margin keeps the top reachable: the card still sits low and the layer scrolls. */
html body #activity-chrome-ending.ac-chrome {
  justify-content: flex-start;
  /* Clear of start.js's round help button (48px at 12px from the top), as the status bar is. */
  padding-top: calc(env(safe-area-inset-top) + 72px);
}
html body #activity-chrome-ending.ac-chrome > .ac-card { flex: none; margin-top: auto; }

/* The ending's review, made to scan: the plan's sentence first in full ink, then one block per form
   with its own lines (form and verdict, the reason, each argument), hairlines and space between. */
html body #activity-chrome-ending.ac-chrome .ac-line {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
  white-space: pre-line;
}

html body #activity-chrome-ending.ac-chrome .ac-line:first-child {
  padding-top: 0;
  border-top: 0;
  color: var(--ak-ink);
  font-size: 18px;
}

html body #activity-chrome-ending.ac-chrome .ac-line:not(:first-child):not(:nth-last-child(-n + 2))::first-line {
  color: var(--ak-ink);
  font-weight: 600;
}

/* ---------- Motion: slow and small, never a bounce ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) body::after { transition: opacity 1.6s ease; }

  :root:not(.ac-still) .edge rect {
    transition: stroke-dasharray 1.1s ease-in-out, stroke-width 1.1s ease-in-out, stroke 0.9s ease;
  }

  :root:not(.ac-still) .answer { transition: opacity 0.9s ease; }

  :root:not(.ac-still) .m { transition: text-decoration-color 0.9s ease 0.3s; }

  :root:not(.ac-still) .sheet,
  :root:not(.ac-still) .desk { transition: opacity 0.6s ease; }

  :root:not(.ac-still) .sheet.is-arriving { animation: ac-arrive 0.6s ease-out both; }

  /* The answer locks first; the why follows a beat later. */
  :root:not(.ac-still) .why.is-arriving { animation: ac-arrive 0.7s ease-out 0.35s both; }

  :root:not(.ac-still) .column.is-arriving .heavy-rule { animation: ac-draw 0.8s ease-out both; transform-origin: left center; }
  :root:not(.ac-still) .column.is-arriving .column-verdict { animation: ac-arrive 0.7s ease-out both; }

  :root:not(.ac-still) .column.is-arriving .row {
    animation: ac-arrive 0.55s ease-out both;
    animation-delay: calc(0.1s + var(--i) * 50ms);
  }

  @keyframes ac-arrive {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes ac-draw {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}