/* Two-night agenda (#runsheet), v7.1 redesign. Paper ground. Built on ds.css (.ds-ticket, .ds-tag, .ds-tag--live, .ds-mark, .ds-card).
   Proof object: two event passes. Each head = night pill + date, the night's promise word (看懂 / 动手) huge, a one-line title.
   Night 2's head is ink: the step up from 看懂 to 动手. Items = icon tile on a dotted spine + one bold title + one short sub-line.
   The live test (只限现场) is the one highlighted card: yellow OUTLINE only (the button below is the screen's yellow fill).
   Phone: head, ticket 1, the cliffhanger bridge, ticket 2, outcomes, button.
   Desktop (>= 960): ticket 1 + the bridge (arrow points right) | ticket 2, then outcomes | button. Max 1120px.
   zh.css still carries v4 global .agenda/.ag rules (dark list); everything they set is reset here under #runsheet.
   Spacing uses only s1 s2 s4 s5 s6 s8. Motion: items step in once (300ms each, staggered), only under html.ds-motion. */

#runsheet .rs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- head ---------- */
#runsheet .ds-h2 .l { display: block; }
#runsheet .rs-head { margin: 0 0 var(--ds-s4); }

/* ---------- layout ---------- */
#runsheet .rs-tix { display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: ag; }
#runsheet .rs-col { display: grid; min-width: 0; }
#runsheet .rs-tk { min-width: 0; }

/* ---------- pass head ---------- */
#runsheet .ds-ticket-head { position: relative; padding: var(--ds-s5) var(--ds-s5) var(--ds-s4); }
#runsheet .ag-night { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s1) var(--ds-s2); font-family: var(--ds-zh); letter-spacing: 0; }
#runsheet .ag-nk { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--ds-ink); color: var(--ds-text-d); font: 900 var(--ds-fs-fine)/1 var(--ds-zh); letter-spacing: .06em; }
#runsheet .ag-nd, #runsheet .ag-nm { font: 700 var(--ds-fs-fine)/1.4 var(--ds-zh); color: var(--ds-mute); white-space: nowrap; }
#runsheet .ag-nd:not([hidden]) + .ag-nm::before { content: "·"; margin-right: var(--ds-s2); }
#runsheet .ag-nd[hidden] { display: none; }
#runsheet .rs-word { margin: var(--ds-s2) 0 0; font: 900 clamp(44px, 12.4vw, 72px)/1 var(--ds-zh); letter-spacing: .04em; color: var(--ds-text); }
#runsheet .ds-ticket-t { margin: var(--ds-s2) 0 0; font: 700 var(--ds-fs-body)/1.5 var(--ds-zh); color: var(--ds-text-2); text-wrap: balance; }
#runsheet .ds-ticket-no { top: calc(var(--ds-s5) + 34px); bottom: auto; right: var(--ds-s5); font-size: clamp(56px, 15vw, 104px); line-height: .8; letter-spacing: -.02em; color: rgba(20,22,26,.08); }

/* night 2: the ink pass (step up) */
#runsheet .rs-tk--2 .ds-ticket-head { background: var(--ds-ink); }
#runsheet .rs-tk--2 .ag-nk { background: var(--ds-paper); color: var(--ds-text); }
#runsheet .rs-tk--2 .ag-nd, #runsheet .rs-tk--2 .ag-nm { color: var(--ds-mute-d); }
#runsheet .rs-tk--2 .rs-word { color: var(--ds-text-d); }
#runsheet .rs-tk--2 .ds-ticket-t { color: var(--ds-text-d2); }
#runsheet .rs-tk--2 .ds-ticket-no { color: rgba(255,255,255,.12); }

/* ---------- items on a dotted spine (reset zh.css's v4 dark list) ---------- */
#runsheet .ds-ticket-body { padding: var(--ds-s4) var(--ds-s5) var(--ds-s5); }
#runsheet .rs-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-s4); }
/* the spine: a dotted line from each tile down to the next item (into the live card on night 2) */
#runsheet .ag:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: calc(-1 * var(--ds-s4) + 4px); border-left: 2px dotted rgba(20,22,26,.24); }
#runsheet .ag { counter-increment: ag; position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: var(--ds-s4); margin: 0; padding: 0; border: 0; break-inside: auto; }
#runsheet .ag-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ds-r-s); background: var(--ds-paper); color: var(--ds-text); box-shadow: 0 0 0 4px var(--ds-white); }
#runsheet .ag-ic svg { width: 22px; height: 22px; }
#runsheet .ag-b { min-width: 0; padding-top: 1px; }
#runsheet .ag p { margin: 0; }
#runsheet .ag-t { margin: 0; font: 700 17px/1.45 var(--ds-zh); color: var(--ds-text); text-wrap: balance; word-break: keep-all; line-break: strict; }
#runsheet .ag-n { display: inline-block; margin-right: var(--ds-s2); font: 700 var(--ds-fs-tag)/1 var(--ds-mono); color: var(--ds-mute); vertical-align: 2px; }
#runsheet .ag-n::before { content: counter(ag, decimal-leading-zero); }
#runsheet .ag-s { margin-top: 2px !important; font: 400 var(--ds-fs-small)/1.5 var(--ds-zh); color: var(--ds-text-2); text-wrap: pretty; line-break: strict; }
#runsheet .ag-s .num { font-family: var(--ds-num); font-weight: 800; font-stretch: 88%; font-size: 16px; color: var(--ds-text); }
#runsheet [data-live-copy] { word-break: keep-all; }   /* lander.js may append plain text if flags.replay is ever set */

/* the open loop: the 2 locked numbers */
#runsheet .ag .ag-lock { margin-top: var(--ds-s2); line-height: 0; }
#runsheet .ag-lock .ds-tag { padding: 4px 10px; border-color: var(--ds-line-strong); color: var(--ds-text); font: 700 var(--ds-fs-fine)/1.3 var(--ds-zh); letter-spacing: 0; }
#runsheet .ag-lock .ds-tag svg { width: 13px; height: 13px; }

/* ---------- the live test: the one highlighted card ---------- */
#runsheet .ag-live { grid-template-columns: minmax(0, 1fr); }   /* full width so the chat mock fits a phone */
#runsheet .ag-live .ag-ic { display: none; }
#runsheet .ag-live .ag-b { position: relative; margin-top: var(--ds-s2); padding: var(--ds-s5) var(--ds-s4) var(--ds-s4); border: 1.5px solid var(--ds-y-deep); border-radius: var(--ds-r); }
#runsheet .ag .ag-tag { position: absolute; top: -13px; left: var(--ds-s4); line-height: 0; }
#runsheet .ds-tag--live { padding: 4px 10px; background: var(--ds-white); border: 1.5px solid var(--ds-y-deep); color: var(--ds-text); font: 900 var(--ds-fs-fine)/1.2 var(--ds-zh); letter-spacing: .06em; }
#runsheet .ag-live .ag-t { font: 900 var(--ds-fs-h3)/var(--ds-lh-h3) var(--ds-zh); }
#runsheet .ag-live .ag-s { margin-top: var(--ds-s1) !important; }
#runsheet .ag .ag-only { margin-top: var(--ds-s2); font: 700 var(--ds-fs-fine)/1.5 var(--ds-zh); color: var(--ds-text); }

/* live chat (示意): a small dark product frame. No yellow inside. */
#runsheet .br-card { margin: var(--ds-s4) 0 0; padding: var(--ds-s4) var(--ds-s2); border-radius: var(--ds-r-s); background: var(--ds-ink-2); color: var(--ds-text-d); }
#runsheet .br-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ds-dn-d); }
/* 示意 sits on the live card's top edge, opposite 只限现场 (it labels the chat mock below) */
#runsheet .br-ex { position: absolute; top: -12px; right: var(--ds-s4); padding: 3px 8px; background: var(--ds-white); border-color: var(--ds-line-strong); color: var(--ds-text-2); font: 700 var(--ds-fs-tag)/1.2 var(--ds-zh); }
#runsheet .br-msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-s2); }
#runsheet .br-msgs li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s2); min-width: 0; }
#runsheet .ag .br-msgs p { padding: 4px 10px; border-radius: 12px; font: 400 var(--ds-fs-fine)/1.5 var(--ds-zh); color: var(--ds-text-d); white-space: nowrap; }
#runsheet .br-msgs .num { font-family: var(--ds-num); font-weight: 700; font-variant-numeric: tabular-nums; }
#runsheet .ag .br-pick p { box-shadow: inset 0 0 0 1.5px #fff; font-weight: 700; color: #fff; }
#runsheet .br-tag { font: 700 var(--ds-fs-fine)/1 var(--ds-zh); color: #fff; white-space: nowrap; }
#runsheet .ag .br-you p { display: inline-flex; align-items: center; gap: var(--ds-s2); min-width: 0; border: 1px dashed rgba(255,255,255,.32); padding: 5px 11px; }
#runsheet .br-yl { font-size: var(--ds-fs-fine); color: var(--ds-mute-d); }
#runsheet .br-typed { font-weight: 700; color: #fff; }
#runsheet .br-you .caret { display: inline-block; width: 2px; height: 1.05em; margin-left: -4px; background: #fff; opacity: 0; }

/* screenshot slots: hidden by event.js until config.assets has a real file */
#runsheet .rs-ph { margin: var(--ds-s2) 0 0; }
#runsheet .rs-ph:not(:has(.asset:not([hidden]))) { display: none; }
#runsheet .rs-ph .asset { margin: 0; }
#runsheet .rs-ph .ph { display: flex; align-items: center; gap: var(--ds-s2); min-height: 44px; padding: 0 var(--ds-s4); border: 1px dashed var(--ds-line); border-radius: var(--ds-r-s); background: none; color: var(--ds-mute); }
#runsheet .rs-ph .ph em { font: 700 var(--ds-fs-tag)/1.5 var(--ds-mono); font-style: normal; color: var(--ds-mute); }
#runsheet .rs-ph .ph b { font: 700 var(--ds-fs-fine)/1.4 var(--ds-zh); color: var(--ds-text-2); }
#runsheet .rs-ph .asset-media { display: block; width: 100%; height: auto; border-radius: var(--ds-r-s); box-shadow: inset 0 0 0 1px var(--ds-line); }

/* ---------- the cliffhanger bridge ---------- */
#runsheet .rs-hook { position: relative; display: grid; justify-items: center; padding: var(--ds-s2) 0; }
#runsheet .rs-hook::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--ds-line-strong); }
#runsheet .rs-hook-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--ds-s1); width: 100%; margin: 0; padding: var(--ds-s4) var(--ds-s5); border: 2px dashed var(--ds-line-strong); border-radius: var(--ds-r); background: var(--ds-paper); text-align: center; }
#runsheet .rs-hook p { margin: 0; }
#runsheet .rs-hook-k { font: 700 var(--ds-fs-fine)/1.5 var(--ds-zh); color: var(--ds-mute); }
#runsheet .rs-hook-q { font: 900 var(--ds-fs-h3)/var(--ds-lh-h3) var(--ds-zh); color: var(--ds-text); word-break: keep-all; text-wrap: balance; }
#runsheet .rs-hook-a { display: inline-flex; align-items: center; gap: var(--ds-s1); margin-top: var(--ds-s2) !important; padding: 4px 12px; border-radius: 999px; background: var(--ds-ink); color: var(--ds-text-d); font: 900 var(--ds-fs-fine)/1.4 var(--ds-zh); letter-spacing: .04em; }
#runsheet .rs-hook-ar { width: 14px; height: 14px; }

/* ---------- outcomes + both nights + the AQA line + button ---------- */
#runsheet .rs-foot { display: grid; gap: var(--ds-s4); margin-top: var(--ds-s5); }
#runsheet .rs-out { padding: var(--ds-s4); background: var(--ds-white); box-shadow: inset 0 0 0 1px var(--ds-line); }
#runsheet .rs-out-k { margin: 0; font: 900 var(--ds-fs-h3)/var(--ds-lh-h3) var(--ds-zh); color: var(--ds-text); }
#runsheet .rs-gain { list-style: none; margin: var(--ds-s2) 0 0; padding: 0; display: grid; gap: var(--ds-s2); }
#runsheet .rs-gain li { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: var(--ds-s4); }
#runsheet .rs-gain .ds-mark { width: 28px; height: 28px; }
#runsheet .rs-gain .ds-mark svg { width: 16px; height: 16px; }
#runsheet .rs-gain-t { font: 700 15px/1.45 var(--ds-zh); color: var(--ds-text); text-wrap: pretty; }
#runsheet .rs-both { margin: 0; font: 900 var(--ds-fs-body)/1.5 var(--ds-zh); color: var(--ds-text); }
#runsheet .rs-aqa { margin: var(--ds-s1) 0 0; font: 400 var(--ds-fs-small)/1.6 var(--ds-zh); color: var(--ds-text-2); text-wrap: pretty; }
#runsheet .rs-aqa b { color: var(--ds-text); }
#runsheet .rs-cta { margin-top: var(--ds-s4); }

/* ---------- motion: items step in once the pass is in view (final state without JS / with reduced motion) ---------- */
html.ds-motion #runsheet .rs-tk:not(.in) .ag { opacity: 0; transform: translateY(8px); }
html.ds-motion #runsheet .rs-tk.in .ag { transition: opacity .3s var(--ds-ease), transform .3s var(--ds-ease); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
html.ds-motion #runsheet .rs-hook:not(.in) .rs-hook-ar { transform: translateY(-4px); opacity: 0; }
html.ds-motion #runsheet .rs-hook.in .rs-hook-ar { transition: transform .3s var(--ds-ease) .3s, opacity .3s var(--ds-ease) .3s; }
/* "your setting" types itself once ticket 2 is in view (16 steps x 40ms), caret blinks twice */
html.ds-motion #runsheet .rs-tk--2:not(.in) .br-typed { clip-path: inset(0 100% 0 0); }
html.ds-motion #runsheet .rs-tk--2.in .br-typed { clip-path: inset(0 0 0 0); transition: clip-path .64s steps(16, end) .7s; }
html.ds-motion #runsheet .rs-tk--2.in .br-you .caret { animation: rs-caret 1s steps(1, end) 1.35s 1 forwards; }
@keyframes rs-caret { 0% { opacity: 1; } 25% { opacity: 0; } 50% { opacity: 1; } 75%, 100% { opacity: 0; } }

/* ---------- TV_CONFIG.agendaByNight === false: one combined list (sec-agenda.js adds .rs-combined) ---------- */
#runsheet.rs-combined .rs-hook, #runsheet.rs-combined .rs-tk--2 .ds-ticket-head, #runsheet.rs-combined .ag-night, #runsheet.rs-combined .rs-word, #runsheet.rs-combined .ds-ticket-no { display: none; }
#runsheet.rs-combined .rs-tk--1 .ds-ticket-body { border-radius: 0; }
#runsheet.rs-combined .rs-tk--2 { margin-top: -2px; }
#runsheet.rs-combined .rs-tk--1 .ds-ticket-t { margin-top: 0; font: 900 var(--ds-fs-h3)/var(--ds-lh-h3) var(--ds-zh); color: var(--ds-text); }

/* ---------- small phones ---------- */
@media (max-width: 370px) {
  #runsheet .ds-ticket-head, #runsheet .ds-ticket-body { padding-left: var(--ds-s4); padding-right: var(--ds-s4); }
  #runsheet .ag { gap: var(--ds-s2); }
  #runsheet .ag-t { font-size: 16px; }
  #runsheet .br-yl { display: none; }
}

/* ---------- desktop ---------- */
@media (min-width: 960px) {
  #runsheet .rs-head { margin-bottom: var(--ds-s6); }
  #runsheet .rs-tix { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ds-s6); align-items: stretch; }
  #runsheet .rs-col--2 { align-content: stretch; }   /* ticket 2 runs down to the bridge: both columns end on one line */
  #runsheet .rs-tk--2 .ds-ticket-body { display: grid; }
  #runsheet .rs-tk--2 .rs-list { grid-template-rows: auto auto 1fr; }
  #runsheet .rs-tk--2 .ag-live { align-content: end; overflow: hidden; padding-top: var(--ds-s4); margin-top: calc(-1 * var(--ds-s4)); }
  #runsheet .rs-tk--2 .ag-live .ag-b::before { content: ""; position: absolute; left: 17.5px; bottom: calc(100% + 1.5px); height: 100vh; border-left: 2px dotted rgba(20,22,26,.24); }
  #runsheet .rs-col--1 { align-content: start; }
  #runsheet .ds-ticket-head { padding: var(--ds-s6) var(--ds-s6) var(--ds-s5); }
  #runsheet .br-card { padding: var(--ds-s4); }
  #runsheet .ds-ticket-body { padding: var(--ds-s5) var(--ds-s6) var(--ds-s6); }
  #runsheet .ds-ticket-no { top: auto; right: var(--ds-s6); bottom: var(--ds-s5); }
  #runsheet .rs-gain { margin-top: var(--ds-s4); }
  #runsheet .ds-ticket-t { font-size: 18px; }
  #runsheet .ag-t { font-size: 19px; }
  #runsheet .ag-s { font-size: 15px; }
  #runsheet .ag-live .ag-t { font-size: var(--ds-fs-h3); }
  /* the bridge sits under ticket 1 and points right, into ticket 2 */
  #runsheet .rs-hook { padding: var(--ds-s5) 0 0; justify-items: stretch; }
  #runsheet .rs-hook::before { display: none; }
  #runsheet .rs-hook-in { justify-items: start; text-align: left; padding: var(--ds-s5) var(--ds-s6); }
  #runsheet .rs-hook-in::after { content: ""; position: absolute; top: 50%; left: 100%; width: calc(var(--ds-s6) + 2px); border-top: 2px dashed var(--ds-line-strong); }
  #runsheet .rs-hook-ar { transform: rotate(-90deg); }
  html.ds-motion #runsheet .rs-hook:not(.in) .rs-hook-ar { transform: rotate(-90deg) translateY(-4px); }
  #runsheet .rs-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ds-s6); align-items: center; margin-top: var(--ds-s6); }
  #runsheet .rs-out { padding: var(--ds-s6); }
  #runsheet .rs-gain { gap: var(--ds-s4); }
  #runsheet .rs-gain-t { font-size: 18px; }
  #runsheet .rs-both { font-size: 19px; }
  #runsheet .rs-aqa { font-size: 15px; }
  #runsheet .rs-cta .btn { width: 100%; min-width: 0; }
  #runsheet .rs-cta { justify-items: stretch; }
  #runsheet.rs-combined .rs-tix { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}

@media (prefers-reduced-motion: reduce) {
  #runsheet .ag { opacity: 1 !important; transform: none !important; transition: none !important; }
  #runsheet .br-typed { clip-path: none !important; transition: none !important; }
  #runsheet .br-you .caret { animation: none !important; opacity: 0 !important; }
}

/* page length: phones end the section on the s6 step (40) instead of 64; desktop keeps --ds-sec-y */
@media (max-width: 959px) { #runsheet.ds-sec { padding-bottom: var(--ds-s6); } }

/* ---------- v9 mobile polish (12 Nov 2026): phones only, desktop rules above untouched ---------- */
@media (max-width: 959px) {
  /* date row: the full-width （二） left a wide hole before the ·; half-width punctuation closes it */
  #runsheet .ag-nd { font-feature-settings: "halt" 1; }
  /* nothing under 13px on a phone */
  #runsheet .ag-n, #runsheet .br-ex { font-size: var(--ds-fs-fine); }
  /* night 2: the dark head already marks the tear; the light dashed line on its dark edge read as a jagged strip */
  #runsheet .rs-tk--2 .ds-ticket-body::before { display: none; }
  /* live chat mock: "your setting" lines up under the picked pill (dot 7 + gap 8) */
  #runsheet .br-you { padding-left: calc(7px + var(--ds-s2)); }
  #runsheet .ag .br-you p { max-width: 100%; }
  /* outcomes: tighter tick-to-text gap, the ticks read as one column with the text */
  #runsheet .rs-gain li { gap: var(--ds-s3); }
}