/* In-session workout shards. Plans use teal/cyan; actuals use black/acid yellow.
   All component rules are scoped to the training surface. */

/* The face is self-hosted and precached. The URL is relative to this
   stylesheet's own location (src/ui/), so it resolves to /assets/fonts/... */
@font-face {
  font-family: "Chakra Petch";
  src: url("../../assets/fonts/chakra-petch/chakra-petch-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chakra Petch";
  src: url("../../assets/fonts/chakra-petch/chakra-petch-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chakra Petch";
  src: url("../../assets/fonts/chakra-petch/chakra-petch-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* R10-6: every surface and the empty shell share these theme tokens. */
:root {
  color-scheme: light;
  --t-stock: #E3E5E2;
  --t-coupon: #FFFFFF;
  --t-navy: #0E0F10;
  --t-frame: #0E0F10;
  --t-band: #FCEE0A;
  --t-on-band: #0E0F10;
  --t-navy-soft: #4A5155;
  --t-hair: #C9CDCB;
  --t-plan: #006B73;
  --t-hm-wire: #0E0F10;
  --t-hm-mid: #FCEE0A;
  --t-red: #D1102E;
  --t-red-ink: #D1102E;
  --t-on-red: #FFFFFF;
  --t-record: #0E0F10;
  --t-on-record: #FCEE0A;
  --t-carbon: #0E0F10;
  --t-on-carbon: #FCEE0A;
  --t-carbon-wash: #FFFBC2;
  --t-carbon-line: #B9B47A;
  --t-field: #FFFBC2;
  --t-field-frame: #0E0F10;
  --t-band-text: #4A4710;
  --t-stub: #0E0F10;
  --t-stub-ink: #FCEE0A;
  --t-stub-line: #5B5A2A;
  --t-on-fill: #FFFFFF;
  --t-danger-wash: #FFF0F2;
  --t-danger-ink: #850A1F;
  --t-scrim: rgba(14, 15, 16, .35);
  --t-scrim-sheet: rgba(14, 15, 16, .45);
  --t-panel-drop: rgba(14, 15, 16, .2);
  --t-stub-drop: rgba(14, 15, 16, .12);
  --t-cond: "Chakra Petch", "Noto Sans SC", "Bahnschrift", "Arial Narrow", sans-serif;
  --t-han: "Noto Sans SC", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* Both dark entry points use the same palette and native-control theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --t-stock: #0F1215;
    --t-coupon: #161A1F;
    --t-navy: #E8E9E3;
    --t-frame: #5EF6FF;
    --t-band: #161A1F;
    --t-on-band: #FCEE0A;
    --t-navy-soft: #9BA3A6;
    --t-hair: #2A3036;
    --t-plan: #5EF6FF;
    --t-hm-wire: #5EF6FF;
    --t-hm-mid: #A39A12;
    --t-red: #FF4D63;
    --t-red-ink: #FF4D63;
    --t-on-red: #0E0F10;
    --t-record: #FCEE0A;
    --t-on-record: #0E0F10;
    --t-carbon: #FCEE0A;
    --t-on-carbon: #0E0F10;
    --t-carbon-wash: #2A2A14;
    --t-carbon-line: #6B6720;
    --t-field: #1E1F12;
    --t-field-frame: #FCEE0A;
    --t-band-text: #9BA3A6;
    --t-stub: #1E1F12;
    --t-stub-ink: #FCEE0A;
    --t-stub-line: #6B6720;
    --t-on-fill: #FFFFFF;
    --t-danger-wash: #32181E;
    --t-danger-ink: #FFBDC5;
    --t-scrim: rgba(0, 0, 0, .50);
    --t-scrim-sheet: rgba(0, 0, 0, .60);
    --t-panel-drop: rgba(0, 0, 0, .5);
    --t-stub-drop: rgba(0, 0, 0, .45);
  }
  :root:not([data-theme="light"]) .t-day-option:not([aria-pressed="true"]) { border-color: var(--t-navy-soft); }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --t-stock: #0F1215;
  --t-coupon: #161A1F;
  --t-navy: #E8E9E3;
  --t-frame: #5EF6FF;
  --t-band: #161A1F;
  --t-on-band: #FCEE0A;
  --t-navy-soft: #9BA3A6;
  --t-hair: #2A3036;
  --t-plan: #5EF6FF;
  --t-hm-wire: #5EF6FF;
  --t-hm-mid: #A39A12;
  --t-red: #FF4D63;
  --t-red-ink: #FF4D63;
  --t-on-red: #0E0F10;
  --t-record: #FCEE0A;
  --t-on-record: #0E0F10;
  --t-carbon: #FCEE0A;
  --t-on-carbon: #0E0F10;
  --t-carbon-wash: #2A2A14;
  --t-carbon-line: #6B6720;
  --t-field: #1E1F12;
  --t-field-frame: #FCEE0A;
  --t-band-text: #9BA3A6;
  --t-stub: #1E1F12;
  --t-stub-ink: #FCEE0A;
  --t-stub-line: #6B6720;
  --t-on-fill: #FFFFFF;
  --t-danger-wash: #32181E;
  --t-danger-ink: #FFBDC5;
  --t-scrim: rgba(0, 0, 0, .50);
  --t-scrim-sheet: rgba(0, 0, 0, .60);
  --t-panel-drop: rgba(0, 0, 0, .5);
  --t-stub-drop: rgba(0, 0, 0, .45);
}
:root[data-theme="dark"] .t-day-option:not([aria-pressed="true"]) { border-color: var(--t-navy-soft); }

.ticket {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px));
  background: var(--t-stock);
  color: var(--t-navy);
  font-family: var(--t-han);
  font-weight: 400;
  font-synthesis: none;
  font-size: 15px;
}

.ticket ::selection { background: var(--t-carbon-wash); color: var(--t-carbon); }

/* `:where()` on the scope drops this reset to the specificity of a bare
   `button` selector, so a single class can finally decide its own colour: at
   (0,1,1) it used to outrank `.t-record` and `.t-warmup`, which is how the
   record button printed its label in navy on red. */
:where(.ticket) button { font: inherit; color: inherit; cursor: pointer; }
.ticket strong { font-weight: 900; }

/* Rapid taps on a phone must not reach the browser's double-tap zoom, which
   once shifted the whole ticket sideways. `manipulation` disables exactly that
   while leaving pinch-zoom and the OS accessibility zoom alone. */
.ticket, .ticket button, .ticket select, .ticket textarea, .ticket input,
.ticket summary, .ticket .t-coupon, .ticket .t-stub, .ticket .t-sheet {
  touch-action: manipulation;
}
.ticket :focus-visible { outline: 3px solid var(--t-carbon); outline-offset: 2px; }
/* Focus follows each filled surface's foreground, never white on acid yellow. */
.t-band :focus-visible, .t-sheet-top :focus-visible { outline-color: var(--t-on-band); }
.t-record:focus-visible { outline-color: var(--t-on-record); outline-offset: -4px; }
/* `hidden` is handled once, globally, in styles.css. */

.ticket-num { font-family: var(--t-cond); font-variant-numeric: tabular-nums; }
/* Mixed HUD readouts keep the Latin weight while Han glyphs use a shipped face. */
.ticket .t-han-inline { font-weight: 400; }
/* Icons are drawn at one size and inherit their colour from the text beside
   them; `currentColor` inside the SVG does the work. */
.t-icon { width: 24px; height: 24px; flex: none; display: block; }
.ticket-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* band ------------------------------------------------------------------ */

.t-band {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
   display: flex; align-items: center; gap: 8px; min-height: 52px;
   padding: 0 16px; background: var(--t-band); color: var(--t-on-band);
   border-bottom: 2px solid var(--t-on-band);
}

/* nav menu -------------------------------------------------------------- */

.t-menu { position: relative; display: flex; }
.t-menu-button {
  min-width: 44px; min-height: 44px; background: transparent; border: 0;
   color: var(--t-on-band); line-height: 1; border-radius: 0;
  display: grid; place-items: center;
}
.t-menu-button:active { background: var(--t-carbon-wash); color: var(--t-carbon); }
.t-menu-backdrop { position: fixed; inset: 0; z-index: 21; background: var(--t-scrim); }
.t-menu-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 22;
  min-width: 148px; display: grid; padding: 6px;
   background: var(--t-coupon); border: 2px solid var(--t-frame); border-radius: 0;
  box-shadow: 0 8px 20px var(--t-panel-drop);
}
/* One class decides these now: the record-button bug was this same
   specificity fight, and the fix is the `:where` reset above, not a pile of
   compound selectors. */
.t-menu-item {
   min-height: 44px; padding: 0 12px; border: 0; border-radius: 0;
  background: transparent; color: var(--t-navy); text-align: left;
  font-weight: 400; font-size: 15px;
}
.t-menu-item:hover { background: var(--t-carbon-wash); }
.t-menu-item[aria-current="page"] {
  background: var(--t-band); color: var(--t-on-band);
  box-shadow: inset 0 0 0 2px var(--t-plan);
}

/* 外观: the same three-cell ruled pattern as the RIR row, separated from the
   page list by a hairline so it never reads as a fifth destination. */
.t-menu-panel .t-theme { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--t-hair); }
.t-menu-panel .t-theme-label { font-size: 11px; color: var(--t-navy-soft); letter-spacing: .04em; margin-bottom: 5px; }
.t-menu-panel .t-theme-group { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--t-frame); border-radius: 0; overflow: hidden; }
.t-menu-panel .t-theme-group button {
  border: 0; border-right: 1px solid var(--t-hair); background: var(--t-coupon);
   min-height: 40px; color: var(--t-navy); font-weight: 400; font-size: 13px;
}
.t-menu-panel .t-theme-group button:last-child { border-right: 0; }
.t-menu-panel .t-theme-group button[aria-pressed="true"] { background: var(--t-carbon); color: var(--t-on-carbon); }

/* The band is one row at every phone width. A name, a wheel and the wallet
   button must never break onto a second line, so the name is the only thing
   allowed to give ground: it shrinks and ends in an ellipsis rather than
   wrapping ("PUSH A" over two lines at 320px was the report). Nothing is
   dropped; the day name is still on screen. */
.t-band .t-day {
   font-family: var(--t-cond); font-weight: 700; font-size: 19px;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 0 1 auto;
}

.t-band .t-band-meta {
   display: flex; flex: none; gap: 8px; font-family: var(--t-cond); font-size: 12px;
   letter-spacing: .02em; color: var(--t-band-text); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.t-band .t-day-han { font-weight: 900; }

.t-band .t-band-meta b { color: var(--t-on-band); font-weight: 600; }
.t-band .t-wake { width: 6px; height: 6px; background: var(--t-band-text); flex: none; }
.t-band .t-wake.t-on { background: var(--t-plan); }

.t-band .t-wallet-button {
   margin-left: auto; flex: none; background: transparent; border: 1.5px solid var(--t-on-band);
   color: var(--t-on-band); border-radius: 0; min-height: 36px; padding: 0 9px;
   font-family: var(--t-han); font-weight: 900; letter-spacing: .04em; font-size: 13px;
  white-space: nowrap;
}

/* errors during a workout ------------------------------------------------ */

.t-alerts { display: grid; gap: 8px; padding: 10px 16px 0; max-width: 520px; margin: 0 auto; }
/* 12px is the old world's radius; a notice box in this one is 8px. Scoped to
   the training page, so nothing else moves. */
.t-alerts .notice { border-radius: 0; border-color: var(--t-red-ink); background: var(--t-danger-wash); color: var(--t-danger-ink); }
.t-alerts .button { border-radius: 0; }
.t-alerts .button { border-color: currentColor; background: transparent; color: inherit; min-height: 36px; font-weight: 900; }
.t-alerts .notice::before { font-family: var(--t-cond); }

/* page ------------------------------------------------------------------ */

.t-page {
  display: grid; gap: 10px; padding: 12px 16px 0;
  max-width: 520px; margin: 0 auto;
}

/* coupon ---------------------------------------------------------------- */

/* Day picker: no rest stub, and only errors carry the danger palette. */
.ticket.t-daypick {
  --t-daypick-bar-size: calc(86px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; padding-bottom: var(--t-daypick-bar-size);
}
.t-daypick > .t-band { flex: none; }
.t-daypick > .t-page { width: 100%; flex: 1; align-content: start; }
.ticket.t-daypick-empty { padding-bottom: 16px; }
.t-daypick-count { margin: 0; color: var(--t-navy-soft); font-size: 12px; }
.t-day-options { display: grid; gap: 8px; min-width: 0; }
.t-day-option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; padding: 10px 12px; text-align: left;
  border: 2px solid var(--t-frame); border-radius: 0; background: var(--t-coupon);
  color: var(--t-navy); box-shadow: none;
}
.t-day-option[aria-pressed="true"] { border-color: var(--t-plan); box-shadow: inset 0 0 0 2px var(--t-plan); }
@media (hover: hover) {
  .t-day-option:hover { background: var(--t-carbon-wash); }
}
.t-day-option:active { transform: translateY(1px); }
.t-day-copy { display: grid; gap: 4px; min-width: 0; }
.t-day-name { font-family: var(--t-cond); font-size: 20px; font-weight: 700; text-transform: uppercase; line-height: 1.15; overflow-wrap: anywhere; }
.t-day-name.t-day-han { font-weight: 900; }
.t-day-summary { font-family: var(--t-han); font-size: 13px; font-weight: 400; color: var(--t-navy-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-day-size { display: grid; justify-items: center; gap: 2px; }
.t-day-number { font-family: var(--t-cond); font-size: 24px; font-weight: 700; line-height: 1; color: var(--t-plan); font-variant-numeric: tabular-nums; }
.t-day-caption { font-size: 11px; font-weight: 400; color: var(--t-navy-soft); }
/* Reserve exactly the sticky bar's height, then let it occupy that reserve.
   Short lists put the action at the viewport bottom; long lists scroll fully. */
.t-daypick-start-bar {
  position: sticky; bottom: 0; z-index: 10; flex: none;
  margin-top: 12px; margin-bottom: calc(0px - var(--t-daypick-bar-size));
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--t-frame); background: var(--t-stock);
}
.t-daypick-start-inner { max-width: 488px; margin: 0 auto; }
.t-daypick-start {
  width: 100%; min-height: 52px; border: 0; border-radius: 0;
  background: var(--t-record); color: var(--t-on-record);
  font-family: var(--t-han); font-weight: 900; font-size: 18px;
}
.t-daypick-start:active { transform: translateY(1px); }
.t-daypick-start:focus-visible { outline-color: var(--t-on-record); outline-offset: -4px; }
.t-daypick-empty-box { padding: 14px; border: 1.5px solid var(--t-frame); background: var(--t-coupon); }
.t-daypick-empty-box h2 { margin: 0 0 8px; font-family: var(--t-han); font-size: 20px; font-weight: 900; }
.t-daypick-empty-box p { margin: 0; color: var(--t-navy-soft); line-height: 1.5; }
.t-daypick .t-day-han { font-family: var(--t-han); }
.t-daypick .t-band-meta { margin-left: auto; }
.t-daypick .t-menu-panel { width: min(260px, calc(100vw - 32px)); }
.t-menu-status {
  display: grid; gap: 6px; margin-top: 8px; padding: 10px 6px 4px;
  border-top: 1px solid var(--t-hair); color: var(--t-navy-soft); font-size: 12px;
  font-weight: 400; line-height: 1.5; overflow-wrap: anywhere;
}
.t-menu-status .local-status {
  display: block; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: inherit; font: inherit; white-space: normal;
}
.t-menu-status .local-status::before { content: none; }
.t-menu-offline { display: flex; align-items: center; gap: 6px; }
.t-menu-offline::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--t-navy-soft); }
.t-menu-offline[data-ready="true"]::before { background: var(--t-plan); }
/* R8-1: share migrated notices with coach without changing existing pages. */
:is(.t-daypick, .t-overview, .t-coach, .t-plan, .t-onboard) .t-alerts:empty { display: none; }
:is(.t-daypick, .t-overview, .t-coach, .t-plan, .t-onboard) .notice, :is(.t-daypick, .t-overview, .t-coach, .t-plan) .storage-status {
  background: var(--t-coupon); color: var(--t-navy); border: 1.5px solid var(--t-frame);
  border-radius: 0; box-shadow: none; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere;
}
:is(.t-daypick, .t-overview, .t-coach, .t-plan, .t-onboard) .notice-error, :is(.t-daypick, .t-overview, .t-coach, .t-plan, .t-onboard) .sync-conflict {
  background: var(--t-danger-wash); color: var(--t-danger-ink); border-color: var(--t-red-ink);
}
:is(.t-daypick, .t-overview, .t-coach, .t-plan, .t-onboard) .notice::before { content: none; }
:is(.t-daypick, .t-overview, .t-coach, .t-plan) .notice .button {
  min-height: 44px; border: 1.5px solid currentColor; border-radius: 0;
  background: transparent; color: inherit; box-shadow: none; font: inherit; font-weight: 900;
}
.t-daypick .storage-status { color: var(--t-navy); font: inherit; font-size: 12px; padding: 12px; overflow-wrap: anywhere; }
:is(.t-daypick, .t-overview, .t-coach, .t-plan) .sync-conflict-columns { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
:is(.t-daypick, .t-overview, .t-coach, .t-plan) .sync-conflict-side { background: var(--t-coupon); border-radius: 0; color: var(--t-navy); }
:is(.t-daypick, .t-overview, .t-coach, .t-plan) .sync-conflict .eyebrow, :is(.t-daypick, .t-overview, .t-coach, .t-plan) .sync-conflict .muted { color: var(--t-navy-soft); }
:is(.t-daypick, .t-overview, .t-coach, .t-plan) .sync-conflict .labeled-value { font: inherit; }
:is(.t-daypick, .t-overview, .t-coach, .t-plan) .sync-conflict .labeled-value strong { font-weight: 900; }
:is(.t-daypick, .t-overview, .t-coach, .t-plan) .sync-conflict .field-label { color: var(--t-navy-soft); font-weight: 400; }
.t-daypick-footer { color: var(--t-navy-soft); font-family: var(--t-han); font-size: 12px; font-weight: 400; line-height: 1.5; }
.t-daypick-footer p { margin: 0 0 6px; }

/* R8-1: coach shell and band --------------------------------------------- */
.ticket.t-coach { display: flex; flex-direction: column; padding-bottom: 0; }
.t-coach > .t-page { width: 100%; flex: 1; align-content: start; }
.t-coach > .t-alerts { width: 100%; }
.t-coach .t-day-han { font-family: var(--t-han); }
/* R8-13: explicit meta cells keep their spacing, including at the 320px floor. */
.t-coach .t-band .c-band-meta { margin-left: auto; min-width: 0; flex: 0 1 auto; gap: .3em; }
.t-coach .t-wallet-button { margin-left: 0; min-height: 44px; }
.t-coach .t-menu-panel { width: min(260px, calc(100vw - 32px)); }
.c-day-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.c-day-name.c-day-han { font-family: var(--t-han); font-weight: 400; }
.c-slot-index, .t-coach .t-band-meta .t-han-inline { flex: none; }

/* R8-2: honest local-demo strip ------------------------------------------ */
.c-demo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; padding: 8px 10px; border: 1.5px solid var(--t-frame); background: var(--t-coupon); font-size: 12px; line-height: 1.45; }
.c-demo-tag { font: 700 11px var(--t-cond); letter-spacing: .12em; border: 1.5px solid var(--t-navy); padding: 0 5px; white-space: nowrap; }
.c-demo-details { grid-column: 2; min-width: 0; }
.c-demo-details summary { display: flex; align-items: center; min-height: 44px; color: var(--t-navy-soft); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* R8-16: compact disclosure spacing without shrinking its 44px hit target. */
.c-demo-details summary { margin-block: -18px -24px; line-height: 1; }
.c-demo-details[open] summary { margin-bottom: 0; }
.c-demo-details p { margin: 0 0 8px; overflow-wrap: anywhere; }

/* R8-3: numbered native slot picker -------------------------------------- */
.c-pick { display: grid; gap: 4px; }
.c-pick label { font-size: 11px; color: var(--t-navy-soft); letter-spacing: .04em; }
.c-select { position: relative; min-width: 0; }
.c-select select { appearance: none; width: 100%; min-width: 0; min-height: 48px; padding: 0 38px 0 10px; border: 1.5px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font: 400 16px var(--t-han); }
.c-select .t-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; width: 18px; height: 18px; }

/* R8-4: four neutral context counts and expandable local JSON -------------- */
.c-context { min-width: 0; border: 2px solid var(--t-frame); background: var(--t-coupon); }
.c-context-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--t-hair); font-size: 13px; }
.c-context-head span { font-size: 11px; color: var(--t-navy-soft); }
.c-context-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-context-cells > div { padding: 6px 6px 7px; border-right: 1px solid var(--t-hair); }
.c-context-cells > div:last-child { border-right: 0; }
.c-context-cells span { display: block; font-size: 10px; color: var(--t-navy-soft); }
.c-context-cells b { color: var(--t-navy); font: 600 18px/1.1 var(--t-cond); }
.c-context-empty { margin: 0; padding: 10px; font-size: 13px; }
.c-context-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; border-top: 1.5px solid var(--t-frame); }
.c-context .context-details { min-width: 0; margin: 0; }
.c-context .context-details summary { display: flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 12px; color: var(--t-navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.c-context .context-preview { max-width: 100%; max-height: 360px; overflow: auto; margin: 0; padding: 10px; border: 0; border-top: 1px solid var(--t-hair); border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font: 12px/1.5 ui-monospace, monospace; }
.c-context-refresh { min-height: 44px; padding: 0 12px; border: 0; border-left: 1.5px solid var(--t-frame); border-radius: 0; background: transparent; font-size: 13px; font-weight: 900; }

/* R8-5: square conversation and per-field proposal shard ------------------ */
.c-thread { display: grid; gap: 10px; min-width: 0; }
.t-coach .chat-message { display: grid; gap: 4px; max-width: 88%; min-width: 0; padding: 0; border-radius: 0; background: transparent; color: var(--t-navy); }
.t-coach .chat-message.user { justify-self: end; justify-items: end; }
.t-coach .chat-message.demo { justify-self: start; }
.t-coach .chat-message-label { margin: 0; opacity: 1; color: var(--t-navy-soft); font: 700 10px var(--t-cond); letter-spacing: .14em; }
.c-message-demo { margin-left: 4px; font: 400 10px var(--t-han); letter-spacing: 0; }
.c-message-body { padding: 9px 11px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.user .c-message-body { background: var(--t-carbon-wash); border: 1.5px solid var(--t-frame); }
.demo .c-message-body { background: var(--t-coupon); border: 2px solid var(--t-frame); }
.c-thread-empty { margin: 0; color: var(--t-navy-soft); font-size: 13px; }
.t-coach .proposal-card { display: block; padding: 0; border: 2px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); gap: 0; min-width: 0; }
.c-proposal-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 9px 30px 8px 11px; border-bottom: 1.5px solid var(--t-frame); }
.c-proposal-head h2 { margin: 0; font: 900 16px var(--t-han); }
.c-proposal-head > span { color: var(--t-plan); font: 600 12px var(--t-cond); letter-spacing: .04em; }
.c-proposal-head > span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--t-plan); margin-right: 4px; }
.c-proposal-body { display: grid; gap: 9px; padding: 10px 11px 11px; overflow-wrap: anywhere; }
.c-proposal-why { margin: 0; font-size: 13px; line-height: 1.55; }
.c-proposal-scope { margin: 0; font-size: 11px; color: var(--t-navy-soft); line-height: 1.5; }
.c-diff { display: grid; border-top: 1px solid var(--t-hair); }
.c-diff-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 8px; padding: 7px 0; border-bottom: 1px solid var(--t-hair); align-items: baseline; }
.c-diff-label { color: var(--t-navy-soft); font-size: 11px; }
.c-diff-values { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; font-size: 13px; }
.c-diff-old { color: var(--t-navy-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* R8-15: an unset weight is missing data, not a value being deleted. */
.c-diff-old.c-diff-unset { text-decoration: none; }
.c-diff-arrow { color: var(--t-navy-soft); font: 600 13px var(--t-cond); }
.c-diff-new { color: var(--t-plan); font-weight: 900; }
.c-diff-number { font: 600 15px var(--t-cond); }
.c-diff-same { color: var(--t-navy); }
.c-diff-values small { color: var(--t-navy-soft); font-size: 10px; }
.c-diff-changed { box-shadow: inset 3px 0 0 var(--t-carbon-line); padding-left: 8px; margin-left: -8px; }
.c-diff-blank { color: var(--t-navy); font: 900 12px var(--t-han); }
.c-proposal-body .proposal-reason-source { margin: 0; color: var(--t-navy-soft); font-size: 11px; }
.c-proposal-body .proposal-reason-source summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.c-proposal-body .proposal-reason-source p { margin: 0; }
.c-danger { padding: 9px 11px; border: 1.5px solid var(--t-red-ink); background: var(--t-danger-wash); color: var(--t-danger-ink); font-size: 12px; line-height: 1.5; }
.c-proposal-actions { display: grid; gap: 8px; }
.c-applied-actions { grid-template-columns: auto minmax(0, 1fr); }
.c-primary, .c-secondary { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 10px; border: 2px solid var(--t-frame); border-radius: 0; font-family: var(--t-han); font-weight: 900; font-size: 14px; }
.c-primary { background: var(--t-record); color: var(--t-on-record); }
.c-primary:focus-visible { outline-color: var(--t-on-record); outline-offset: -4px; }
.c-secondary { background: var(--t-coupon); color: var(--t-navy); }
.c-applied { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; min-height: 48px; border: 2px solid var(--t-plan); color: var(--t-plan); font: 700 13px var(--t-cond); letter-spacing: .14em; }
.c-applied span { font: 900 12px var(--t-han); letter-spacing: 0; }
.c-applied-note { display: grid; gap: 8px; padding: 9px 11px; border: 1.5px solid var(--t-frame); background: var(--t-coupon); font-size: 12px; line-height: 1.5; }
.c-applied-note p { margin: 0; }

/* R8-6: sticky question composer, including the idle plan conversation ------ */
.t-coach { --c-composer-size: calc(130px + env(safe-area-inset-bottom, 0px)); }
.c-composer { position: sticky; bottom: 0; z-index: 10; flex: none; margin-top: 14px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--t-frame); background: var(--t-stock); }
.c-composer-inner { display: grid; gap: 8px; max-width: 488px; margin: 0 auto; }
.c-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.c-quick-button { min-height: 40px; padding: 0 10px; border: 1.5px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font-size: 13px; }
.c-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px; }
.c-input-row textarea { width: 100%; min-width: 0; min-height: 48px; max-height: 120px; padding: 10px; border: 1.5px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font: 400 16px/1.45 var(--t-han); resize: none; overflow-y: auto; caret-color: var(--t-carbon); }
.c-input-row textarea::placeholder { color: var(--t-navy-soft); opacity: 1; }
/* R8-12: empty prompts stay on one line; entered content still wraps/grows. */
.c-input-row textarea:placeholder-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-send { border: 0; border-radius: 0; background: var(--t-record); color: var(--t-on-record); font: 900 15px var(--t-han); }
.c-send:focus-visible { outline-color: var(--t-on-record); outline-offset: -4px; }
.c-thread > * { scroll-margin-top: 68px; scroll-margin-bottom: calc(var(--c-composer-size) + 14px); }
@media (max-width: 359px) { .c-composer { padding-left: 10px; padding-right: 10px; } }

/* R8-7: no active workout, but plan questions stay available ---------------- */
.c-idle { display: grid; gap: 8px; padding: 14px; border: 2px solid var(--t-frame); background: var(--t-coupon); }
.c-idle h2 { margin: 0; font: 900 18px var(--t-han); }
.c-idle p { margin: 0; font-size: 13px; color: var(--t-navy-soft); line-height: 1.55; }

/* R8-8: one phone-width working column even on desktop --------------------- */
.t-coach > .t-page { max-width: 520px; min-width: 0; margin-inline: auto; }
.t-coach .c-thread, .t-coach .c-context, .t-coach .c-idle { width: 100%; }
.c-composer-inner { width: 100%; min-width: 0; }
.t-coach .chat-message, .t-coach .proposal-card { max-width: 100%; }
.t-coach .chat-message { max-width: 88%; }

/* R7-1: overview shell and band ------------------------------------------ */
.ticket.t-overview { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.t-overview .t-day-han { font-family: var(--t-han); }
.t-overview .t-band-meta, .t-overview .o-back + .t-day { margin-left: auto; }
.t-overview .t-menu-panel { width: min(260px, calc(100vw - 32px)); }
.o-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 14px; }

/* R7-3: range controls and current-plan readouts -------------------------- */
.o-controls { display: grid; gap: 10px; min-width: 0; }
/* R9-1: shared underline tabs (overview pressed buttons / plan tabs). */
:is(.o-tabs, .t-tabs) { display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--t-hair); }
:is(.o-tabs, .t-tabs) button { position: relative; flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 6px 14px 8px; border: 0; background: transparent; font-weight: 900; color: var(--t-navy-soft); }
:is(.o-tabs, .t-tabs) button:is([aria-pressed="true"], [aria-selected="true"]) { color: var(--t-navy); }
:is(.o-tabs, .t-tabs) button:is([aria-pressed="true"], [aria-selected="true"])::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--t-carbon); }

/* R9-1: plan shell has no rest stub or legacy page chrome. */
.ticket.t-plan { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.t-plan > .t-page { width: 100%; }
.t-plan .t-day-han { font-family: var(--t-han); }
.t-plan .t-band-meta { margin-left: auto; }
.t-plan .t-menu-panel { width: min(260px, calc(100vw - 32px)); }
.p-panel { display: grid; gap: 10px; min-width: 0; }

/* R10-1: first-run/recovery shell, brand square and offline readout. */
.ticket.t-onboard { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.t-onboard > .t-page { width: 100%; align-content: start; }
.b-mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: var(--t-on-band); color: var(--t-band); font: 700 15px var(--t-cond); }
.b-title { font: 900 18px var(--t-han); letter-spacing: .06em; white-space: nowrap; }
.b-offline { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--t-band-text); font: 400 12px var(--t-han); white-space: nowrap; }
.b-offline::before { content: ""; width: 6px; height: 6px; flex: none; border: 1.5px solid var(--t-band-text); }
.b-offline[data-ready="true"]::before { border: 0; background: var(--t-on-band); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .b-mark { background: transparent; border: 1.5px solid var(--t-on-band); color: var(--t-on-band); } }
:root[data-theme="dark"] .b-mark { background: transparent; border: 1.5px solid var(--t-on-band); color: var(--t-on-band); }
.b-footer { margin-top: 8px; color: var(--t-navy-soft); font: 400 11px/1.6 var(--t-han); }
.t-onboard .notice { padding: 9px 11px; font-size: 12px; line-height: 1.5; }
.t-onboard .update-notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.t-onboard .update-notice .button { min-height: 40px; padding: 0 12px; border: 1.5px solid var(--t-frame); background: var(--t-coupon); color: var(--t-navy); font: 900 13px var(--t-han); }

/* R10-2: first boot choices, file controls and folded paste fallback. */
.b-hero { display: grid; gap: 6px; padding: 2px 0 4px; }
.b-kicker { display: flex; align-items: center; gap: 6px; font: 700 12px var(--t-cond); letter-spacing: .14em; color: var(--t-navy-soft); }
.b-kicker::after { content: ""; flex: 1; height: 1px; background: var(--t-hair); }
.b-hero h1 { margin: 0; font: 900 24px/1.2 var(--t-han); }
.b-hero p { margin: 0; font: 400 13px/1.6 var(--t-han); color: var(--t-navy-soft); }
.b-description { margin: 0; font-size: 13px; line-height: 1.55; }
.b-hint { margin: 0; font-size: 11px; line-height: 1.5; color: var(--t-navy-soft); }
.b-icon { width: 18px; height: 18px; flex: none; }
.t-onboard .p-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; max-width: 100%; overflow-wrap: anywhere; }
.t-onboard .p-primary:focus-visible { outline-color: var(--t-on-record); outline-offset: -4px; }
.t-onboard input, .t-onboard textarea { border: 1.5px solid var(--t-field-frame); border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font: 400 16px/1.5 var(--t-han); caret-color: var(--t-carbon); }
.t-onboard input::placeholder, .t-onboard textarea::placeholder { color: var(--t-navy-soft); opacity: 1; }
.b-paste { border-top: 1px solid var(--t-hair); }
.b-paste summary { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; list-style: none; cursor: pointer; font-size: 13px; }
.b-paste summary::-webkit-details-marker { display: none; }
.b-paste[open] summary svg { transform: rotate(180deg); }
.b-paste-body { display: grid; gap: 9px; padding-top: 6px; }
.b-status { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 8px; font-size: 13px; }
.b-status > * { padding: 6px 0; border-bottom: 1px solid var(--t-hair); min-width: 0; overflow-wrap: anywhere; }
.b-status > :nth-last-child(-n+2) { border-bottom: 0; }
.b-status > span { font-size: 11px; color: var(--t-navy-soft); align-self: center; }
.b-status b { font-weight: 400; }
.b-phase { display: inline-flex; align-items: center; gap: 6px; }
.b-phase::before { content: ""; width: 6px; height: 6px; flex: none; border: 1.5px solid var(--t-navy-soft); }
.b-phase[data-phase="idle"]::before, .b-phase[data-ready="true"]::before { border: 0; background: var(--t-plan); }
.b-phase:is([data-phase="error"], [data-phase="needs-login"])::before { border: 0; background: var(--t-red-ink); }

/* R10-3: recovery uses the same ruled boxes; only backup selection is primary. */
.t-onboard[data-mode="recovery"] .p-box-body > .p-button { width: 100%; }

/* R10-4: account controls are shared; these small differences are onboarding-only. */
.t-onboard .p-sync .p-backup-description { color: var(--t-navy); font-size: 13px; }
.t-onboard .p-sync [data-testid="sync-code"] { font: 600 22px var(--t-cond); letter-spacing: .3em; color: var(--t-carbon); }
.t-onboard .sync-conflict-columns { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.t-onboard .sync-conflict-side { background: var(--t-coupon); border-radius: 0; color: var(--t-navy); }
.t-onboard .sync-conflict .eyebrow, .t-onboard .sync-conflict .muted { color: var(--t-navy-soft); }
.t-onboard .sync-conflict .field-label { color: var(--t-navy-soft); font-weight: 400; }
.t-onboard .sync-conflict .labeled-value { font: inherit; }
.t-onboard .sync-conflict .labeled-value strong { font-weight: 900; }

/* R10-5: static boot cells are decoration, not measured progress. */
.ticket.t-loading { min-height: 100vh; min-height: 100dvh; padding: 24px 16px; display: grid; align-content: center; }
.b-loading-body { width: 100%; max-width: 488px; min-width: 0; margin-inline: auto; display: grid; gap: 10px; overflow-wrap: anywhere; }
.b-loading-body .b-kicker { display: block; }
.b-loading-body .b-kicker::after { content: none; }
.b-loading-body h1 { margin: 0; font: 900 22px/1.25 var(--t-han); }
.b-loading-body p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--t-navy-soft); }
.b-boot-bar { height: 6px; border: 1.5px solid var(--t-frame); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.b-boot-bar i:nth-child(-n+5) { background: var(--t-carbon); }
.b-loading-error { padding: 9px 11px; border: 1.5px solid var(--t-red-ink); background: var(--t-danger-wash); color: var(--t-danger-ink); font-size: 12px; line-height: 1.5; }
@media (max-width: 359px) { .ticket.t-loading { padding-inline: 10px; } }

/* R9-2: current-plan heading and square tags. */
.p-head { display: grid; gap: 6px; }
.p-title { margin: 0; font: 700 20px/1.15 var(--t-cond); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.t-plan .p-han { font-family: var(--t-han); font-weight: 900; }
.p-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.p-tag { display: inline-flex; align-items: center; gap: 3px; min-height: 24px; padding: 0 7px; border: 1.5px solid var(--t-frame); color: var(--t-navy); font-size: 12px; }
.p-tag .ticket-num { font-weight: 600; }
.p-tag-plan { border-color: var(--t-plan); color: var(--t-plan); }
.p-tag-soft { border-color: var(--t-navy-soft); color: var(--t-navy-soft); }
.p-box { border: 2px solid var(--t-frame); background: var(--t-coupon); min-width: 0; }
.p-empty { padding: 14px; display: grid; gap: 10px; }
.p-empty h2 { margin: 0; font: 900 18px var(--t-han); }
.p-hint { margin: 0; font-size: 11px; line-height: 1.5; color: var(--t-navy-soft); }
.p-button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 12px; border: 2px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font: 900 14px var(--t-han); text-align: center; }
.p-primary { background: var(--t-record); color: var(--t-on-record); }

/* R9-3: numbered, read-only schedule cells. */
.p-label { margin: 2px 0 -4px; font-size: 11px; color: var(--t-navy-soft); letter-spacing: .04em; }
.p-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--t-frame); background: var(--t-coupon); }
.p-step { min-width: 0; padding: 6px 7px 7px; border-right: 1px solid var(--t-hair); border-bottom: 1px solid var(--t-hair); display: grid; gap: 2px; }
.p-step:nth-child(4n) { border-right: 0; }
.p-step-day { font: 600 10px var(--t-cond); color: var(--t-navy-soft); letter-spacing: .08em; white-space: nowrap; }
.p-step-name { font: 700 14px var(--t-cond); color: var(--t-plan); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-rest { background: repeating-linear-gradient(45deg, transparent 0 5px, var(--t-hair) 5px 6.5px); }
.p-rest .p-step-name { color: var(--t-navy-soft); font-size: 13px; }
.p-next { box-shadow: inset 0 0 0 2px var(--t-plan); }
.p-next .p-step-day { color: var(--t-plan); }
@media (max-width: 359px) {
  .t-plan .p-step { padding-inline: 4px; }
  .t-plan .p-step-day { letter-spacing: 0; }
}

/* R9-4: disclosure rows, plan targets and source-only mapping details. */
.p-days { display: grid; gap: 8px; }
.p-day { border: 2px solid var(--t-frame); background: var(--t-coupon); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-day:not([open]) { border-color: var(--t-navy-soft); }
}
:root[data-theme="dark"] .p-day:not([open]) { border-color: var(--t-navy-soft); }
.p-day-head { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; cursor: pointer; list-style: none; }
.p-day-head::-webkit-details-marker { display: none; }
.p-day-copy { display: grid; gap: 2px; min-width: 0; }
.p-day-name { font: 700 19px/1.1 var(--t-cond); text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere; }
.p-day-summary { font-size: 12px; color: var(--t-navy-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-day-count { display: grid; justify-items: center; }
.p-day-count b { font: 700 22px/1 var(--t-cond); color: var(--t-plan); }
.p-day-count small { font-size: 10px; color: var(--t-navy-soft); }
.p-day-arrow { width: 20px; height: 20px; transform: rotate(90deg); }
.p-day[open] > summary .p-day-arrow { transform: rotate(-90deg); }
.p-slots { border-top: 1.5px solid var(--t-frame); }
.p-slot { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 8px; padding: 9px 12px 10px; border-bottom: 1px solid var(--t-hair); }
.p-slot:last-child { border-bottom: 0; }
.p-slot-order { font: 700 14px/1.5 var(--t-cond); color: var(--t-navy-soft); }
.p-slot-body { display: grid; gap: 4px; min-width: 0; }
.p-slot-heading { display: flex; flex-wrap: wrap; gap: 6px; align-items: start; }
.p-slot-name { font: 700 15px/1.3 var(--t-cond); overflow-wrap: anywhere; }
.p-slot-english { display: block; font: 600 11px var(--t-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--t-navy-soft); }
.p-optional { font: 400 11px var(--t-han); min-height: 20px; }
.p-target { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.p-target::before { content: ""; width: 6px; height: 6px; background: var(--t-plan); }
.p-target-number { font: 600 14px var(--t-cond); color: var(--t-plan); }
.p-target-rir { font-size: 11px; color: var(--t-navy-soft); }
.p-schemes { display: grid; border: 1.5px solid var(--t-hair); }
.p-schemes > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 6px; padding: 4px 7px; border-bottom: 1px solid var(--t-hair); }
.p-schemes > div:last-child { border-bottom: 0; }
.p-scheme-label { font: 600 10px var(--t-cond); color: var(--t-navy-soft); align-self: center; }
.p-alt { font-size: 12px; color: var(--t-navy-soft); overflow-wrap: anywhere; }
.p-alt strong { color: var(--t-navy); }
.p-notice, .p-danger { padding: 9px 11px; border: 1.5px solid var(--t-frame); background: var(--t-coupon); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.p-danger { border-color: var(--t-red-ink); background: var(--t-danger-wash); color: var(--t-danger-ink); }
.p-mapping > summary, .p-source > summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; font-size: 11px; color: var(--t-navy-soft); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.p-mapbox { display: grid; gap: 7px; padding: 7px 9px; background: var(--t-stock); border: 1px solid var(--t-hair); font-size: 11.5px; line-height: 1.55; overflow-wrap: anywhere; }
.p-mapping-variant { display: grid; gap: 3px; }
.p-raw-line, .p-mapping-status { color: var(--t-navy-soft); }
.p-raw-line { font: 500 11px/1.55 var(--t-cond); }
.p-pre { max-width: 100%; min-width: 0; overflow: auto; white-space: pre; padding: 10px; margin: 0; border: 1px solid var(--t-hair); background: var(--t-coupon); color: var(--t-navy); font-size: 12px; }

/* R9-5: import methods and validated draft readouts. */
.p-segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 2px solid var(--t-frame); }
.p-segmented button { min-height: 44px; padding: 6px; border: 0; border-right: 1px solid var(--t-hair); background: var(--t-coupon); color: var(--t-navy); font-size: 14px; }
.p-segmented button:last-child { border-right: 0; }
.p-segmented button[aria-pressed="true"] { background: var(--t-carbon); color: var(--t-on-carbon); font-weight: 900; }
.t-plan textarea, .t-plan input { border: 1.5px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font: 400 16px/1.5 var(--t-han); caret-color: var(--t-carbon); }
.t-plan textarea::placeholder, .t-plan input::placeholder { color: var(--t-navy-soft); opacity: 1; }
.t-plan textarea { min-height: 212px; }
.p-box-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 8px 11px; border-bottom: 1.5px solid var(--t-frame); }
.p-box-head h3, .p-preview h3 { margin: 0; font: 900 15px var(--t-han); overflow-wrap: anywhere; }
.p-box-meta { font: 600 11px var(--t-cond); letter-spacing: .1em; color: var(--t-plan); }
.p-box-body { padding: 10px 11px 11px; display: grid; gap: 9px; }
.p-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--t-frame); }
.p-cells > div { padding: 5px 7px 6px; border-right: 1px solid var(--t-hair); }
.p-cells > div:last-child { border-right: 0; }
.p-cells span { display: block; font-size: 10px; color: var(--t-navy-soft); }
.p-cells b { font: 700 20px/1.1 var(--t-cond); color: var(--t-plan); }
.p-cells .p-warning-count b { color: var(--t-navy); }
.p-warnings { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.p-warnings li { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 7px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.p-warnings li::before { content: ""; width: 6px; height: 6px; margin-top: 6px; background: var(--t-navy-soft); }
.p-quiet { min-height: 40px; border: 0; padding: 0; background: transparent; color: var(--t-navy-soft); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
.p-button:disabled { opacity: .45; cursor: not-allowed; }

/* R9-6: local backup and the plan-only cloud account card. */
.p-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.p-backup-description { margin: 0; font-size: 12px; line-height: 1.5; color: var(--t-navy-soft); }
.p-sync-kv { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 0 8px; font-size: 13px; }
.p-sync-kv > * { padding: 6px 0; border-bottom: 1px solid var(--t-hair); min-width: 0; overflow-wrap: anywhere; }
.p-sync-kv > span { color: var(--t-navy-soft); font-size: 11px; align-self: center; }
.p-sync-kv b { font-weight: 400; }
.p-sync-phase { display: flex; align-items: center; gap: 6px; }
.p-sync-ok::before, .p-sync-error::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--t-plan); }
.p-sync-error::before { background: var(--t-red-ink); }
.p-sync .field-label, .p-sync .field-hint { font: 400 11px/1.5 var(--t-han); color: var(--t-navy-soft); }
.p-sync input { min-height: 48px; }
.p-sync .button { min-height: 48px; border: 2px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font: 900 14px var(--t-han); box-shadow: none; }
.p-sync .button-primary { background: var(--t-record); color: var(--t-on-record); }
.p-sync .form-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); }
.p-sync .notice { padding: 9px 11px; font-size: 12px; }
.t-plan .sync-conflict .eyebrow { display: none; }

/* R9-7: one reading column at desktop widths, never the legacy grid-2. */
.t-plan > .t-page { max-width: 520px; min-width: 0; margin-inline: auto; align-content: start; }
.p-panel > *, .p-box-body > *, .p-slot-body > * { min-width: 0; }
.t-plan .p-button { max-width: 100%; overflow-wrap: anywhere; }
.t-plan .p-primary:focus-visible { outline-color: var(--t-on-record); outline-offset: -4px; }
.o-range { margin-left: auto; padding: 0 5px; border: 1.5px solid var(--t-navy-soft); color: var(--t-navy-soft); font-size: 11px; font-weight: 600; white-space: nowrap; }
.o-dates { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px auto; gap: 6px; }
.o-button { min-height: 44px; padding: 0 10px; border: 1.5px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); font-weight: 900; font-size: 13px; }
.o-button.ticket-num { font-weight: 600; font-size: 15px; }
.o-dates input { width: 100%; min-width: 0; padding: 0 4px; min-height: 44px; border: 1.5px solid var(--t-field-frame); border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font: 600 16px var(--t-cond); }
.o-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.o-stat { display: grid; gap: 3px; min-width: 0; }
.o-stat-value { display: flex; align-items: baseline; gap: 4px; font-family: var(--t-cond); }
.o-stat-value b { font-size: 26px; font-weight: 700; line-height: 1; color: var(--t-carbon); }
.o-plan { font: 600 13px var(--t-cond); font-style: normal; color: var(--t-plan); }
.o-progress { height: 4px; background: var(--t-hair); }
.o-progress i { display: block; height: 100%; background: var(--t-carbon); }
.o-soft { margin: 0; color: var(--t-navy-soft); font-size: 11px; line-height: 1.55; }
.o-controls > .o-soft { font-size: 12px; }

/* R7-4: one-sided eight-head wireframe ----------------------------------- */
.o-torso { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.o-body-views { width: 100%; max-width: 220px; }
.o-body-svg { display: block; width: 100%; height: auto; }
.o-body-base { fill: none; stroke: var(--t-hm-wire); stroke-width: 1.4; }
.o-body-deco, .o-body-region.quiet { fill: none; stroke: var(--t-hm-wire); stroke-opacity: .35; stroke-width: .8; }
.o-body-region { stroke: var(--t-hm-wire); stroke-width: 1; stroke-linejoin: round; cursor: pointer; }
.o-body-region.max-direct { fill: var(--t-carbon); }
.o-body-region.direct { fill: var(--t-hm-mid); }
.o-secondary-hatch { stroke: var(--t-hm-wire); stroke-width: 1.4; }
.o-body-region[aria-pressed="true"] { stroke: var(--t-plan); stroke-width: 3; stroke-opacity: 1; }
.o-side { display: grid; grid-template-columns: 1fr 1fr; width: 120px; border: 1.5px solid var(--t-frame); }
.o-side-button { border: 0; border-radius: 0; min-height: 44px; padding: 3px 0; background: transparent; font-size: 12px; font-weight: 900; }
.o-side-button[aria-pressed="true"] { background: var(--t-carbon); color: var(--t-on-carbon); }
.o-body-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--t-navy-soft); font-size: 11px; }
.o-body-legend i, .o-hatch-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--t-hair); }
.o-body-legend .max-direct { background: var(--t-carbon); }
.o-body-legend .direct { background: var(--t-hm-mid); }
.o-body-legend .quiet { border-color: var(--t-hm-wire); }

/* R7-5: comparable actual / plan gauges ---------------------------------- */
.o-rig { position: relative; container-type: inline-size; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 6px; }
.o-rig-day { grid-template-columns: minmax(0, 1fr); }
.o-gauge { display: grid; justify-items: center; gap: 6px; padding-bottom: 0; }
.o-gauge-ticks { display: flex; flex-direction: column-reverse; gap: 2px; width: 22px; height: min(286px, calc((100cqw - 92px) * 1.3)); }
.o-gauge-ticks i { flex: 1; min-height: 0; border: 1px solid var(--t-hair); }
.o-gauge-actual .on { background: var(--t-carbon); border-color: var(--t-carbon); }
.o-gauge-planned .on { background: var(--t-plan); border-color: var(--t-plan); }
.o-gauge-value { font: 700 15px var(--t-cond); padding: 1px 6px; }
.o-gauge-actual .o-gauge-value { background: var(--t-carbon); color: var(--t-on-carbon); }
.o-gauge-planned .o-gauge-value { border: 1.5px solid var(--t-plan); color: var(--t-plan); }
.o-gauge-label { color: var(--t-navy-soft); font-size: 10px; white-space: nowrap; }

/* R7-6: cyberware muscle slots ------------------------------------------- */
.o-slot-groups { display: grid; gap: 12px; }
.o-group { display: grid; gap: 6px; }
.o-group h2 { margin: 0; display: flex; align-items: center; gap: 4px; font: 700 12px var(--t-cond); letter-spacing: .14em; color: var(--t-navy-soft); }
.o-group h2::after { content: ""; flex: 1; height: 1px; margin-left: 4px; background: var(--t-hair); }
.o-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.o-slot { --cut: 10px; min-width: 0; padding: 1.5px; border: 0; border-radius: 0; background: var(--t-frame); text-align: left; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.o-slot-in { display: grid; gap: 4px; min-height: 66px; padding: 6px 7px 7px; background: var(--t-coupon); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%); }
.o-slot-name { font-size: 12px; font-weight: 400; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-slot-count { display: flex; align-items: baseline; gap: 3px; }
.o-slot-count b { font: 700 20px/1 var(--t-cond); color: var(--t-carbon); }
.o-slot-count em { font-size: 12px; }
.o-slot-count small { margin-left: auto; color: var(--t-navy-soft); font: 400 10px var(--t-han); white-space: nowrap; }
.o-slot-ticks { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.o-slot-ticks i, .o-slot-key i { width: 6px; height: 6px; border: 1px solid var(--t-plan); }
.o-slot-ticks .on, .o-slot-key .on { background: var(--t-carbon); border-color: var(--t-carbon); }
.o-slot-ticks span { font-size: 10px; color: var(--t-navy-soft); }
.o-slot-miss .o-slot-count b { color: var(--t-navy-soft); }
.o-slot-empty .o-slot-in { background: var(--t-coupon) linear-gradient(to top right, transparent calc(50% - .75px), var(--t-hair) calc(50% - .75px), var(--t-hair) calc(50% + .75px), transparent calc(50% + .75px)); }
.o-slot-empty .o-slot-name { color: var(--t-navy-soft); }
.o-slot[aria-pressed="true"] { background: var(--t-plan); padding: 3px; }
.o-slot:focus-visible { outline-offset: -4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .o-slot:not([aria-pressed="true"]) { background: var(--t-navy-soft); } }
:root[data-theme="dark"] .o-slot:not([aria-pressed="true"]) { background: var(--t-navy-soft); }
.o-slot-key { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--t-navy-soft); font-size: 11px; }
.o-slot-key i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; }

/* R7-7: non-modal chamfered readout --------------------------------------- */
.o-popup { --cut: 22px; position: absolute; top: 0; left: 46px; right: 46px; display: flex; z-index: 2; background: var(--t-plan); padding: 2px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.o-rig-day .o-popup { left: 0; right: 0; }
.o-popup-in { display: flex; flex-direction: column; gap: 5px; width: 100%; min-height: 0; padding: 10px 12px 12px; background: var(--t-coupon); clip-path: polygon(0 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% 100%, 0 100%); animation: o-pop-in .18s cubic-bezier(.2,.8,.2,1); }
.o-popup-in > :not(.o-popup-records) { flex-shrink: 0; }
.o-popup-records { display: grid; gap: 7px; }
.o-popup-head { display: flex; justify-content: space-between; align-items: center; padding-right: 14px; gap: 4px; }
.o-popup-title { margin: 0; font: 900 17px var(--t-han); }
.o-popup-title:focus { outline: none; }
.o-popup-close { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 1.5px solid var(--t-frame); border-radius: 0; background: transparent; color: var(--t-navy); }
.o-popup-close::after { content: ""; position: absolute; inset: -8px; }
.o-popup-numbers { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.o-popup-numbers > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px; border-top: 2px solid var(--t-frame); padding-top: 5px; }
.o-popup-numbers b { font: 700 26px/1 var(--t-cond); color: var(--t-carbon); }
.o-popup-numbers em { font-size: 14px; }
.o-popup-numbers span { width: 100%; color: var(--t-navy-soft); font-size: 11px; }
.o-popup-status { font-size: 12px; }
.o-popup-status b { color: var(--t-carbon); font-weight: 700; font-size: 14px; }
.o-popup-record { display: grid; gap: 2px; border-top: 1px dotted var(--t-hair); padding-top: 5px; font-size: 12px; }
.o-popup-record-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: 0 6px; }
.o-popup-record-head > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-popup-record b { font: 700 12px var(--t-cond); letter-spacing: .06em; text-transform: uppercase; }
.o-popup-record .o-name-han { font-family: var(--t-han); font-weight: 900; }
.o-popup-record > span { overflow-wrap: anywhere; }
.o-popup-record .o-actual { color: var(--t-carbon); font-weight: 600; font-size: 14px; }
.o-popup-more { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--t-plan); font-size: 12px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
@keyframes o-pop-in { from { transform: translateX(6px); opacity: 0; } 60% { transform: translateX(-3px); opacity: 1; } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .o-popup-in { animation: none; } }
@media (max-width: 375px) { .o-popup-in { gap: 4px; padding: 8px 10px; } }

/* R7-8: muscle detail and recent sessions -------------------------------- */
.o-content { display: grid; gap: 10px; min-width: 0; overflow-anchor: none; }
.o-box { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 2px solid var(--t-frame); background: var(--t-coupon); scroll-margin-top: 68px; }
.o-detail-hint { font-size: 12px; }
.o-box-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; font: 900 16px/1.3 var(--t-han); }
.o-box-title small { font: 400 11px var(--t-han); color: var(--t-navy-soft); }
.o-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.o-totals > div { display: grid; border: 1.5px solid var(--t-frame); padding: 8px 10px; }
.o-totals b { font: 700 28px/1 var(--t-cond); color: var(--t-carbon); }
.o-totals span { font-size: 11px; color: var(--t-navy-soft); }
.o-muscle-sessions { display: grid; gap: 8px; }
.o-muscle-session { display: grid; gap: 3px; border-top: 1px solid var(--t-hair); padding-top: 8px; }
.o-session-heading { display: flex; justify-content: space-between; gap: 8px; }
.o-session-name { font: 700 17px/1.2 var(--t-cond); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.o-session-heading .o-session-name { font-size: 14px; }
.t-overview .o-name-han { font-family: var(--t-han); font-weight: 900; }
.o-muscle-set { color: var(--t-navy-soft); font-size: 12px; overflow-wrap: anywhere; }
.o-actual { color: var(--t-carbon); font-weight: 600; }
.o-recent { display: grid; gap: 8px; margin-top: 4px; }
.o-recent h2 { margin: 0; font: 900 14px var(--t-han); }
.o-recent-list { display: grid; gap: 8px; }
.t-overview .o-recent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 2px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); padding: 9px 10px; min-height: 64px; }
.o-recent-main { display: grid; gap: 3px; min-width: 0; }
.o-recent-meta { font-size: 12px; color: var(--t-navy-soft); overflow-wrap: anywhere; }
.o-recent-meta b { color: var(--t-carbon); font-weight: 700; font-size: 13px; }
.o-recent-actions { display: flex; gap: 6px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .o-recent-row { border-color: var(--t-navy-soft); } }
:root[data-theme="dark"] .o-recent-row { border-color: var(--t-navy-soft); }

/* R7-9: immutable single-workout detail ---------------------------------- */
.o-detail-date { margin: 0; font-weight: 600; font-size: 13px; color: var(--t-navy-soft); }
.o-detail-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.o-detail-metrics > div { display: grid; gap: 2px; padding: 8px 10px; border: 1.5px solid var(--t-frame); }
.o-detail-metrics span { color: var(--t-navy-soft); font-size: 11px; }
.o-detail-metrics b { font: 700 22px/1 var(--t-cond); color: var(--t-carbon); }
.o-detail-metrics b.o-plan { color: var(--t-plan); }
.o-detail-exercise { display: grid; gap: 6px; border-top: 1px solid var(--t-hair); padding-top: 10px; }
.o-detail-exercise:first-child { border-top: 0; padding-top: 0; }
.o-detail-exercise h3 { margin: 0; font: 900 15px/1.3 var(--t-han); overflow-wrap: anywhere; }
.o-recorded-target { margin: 0; font-size: 11px; color: var(--t-navy-soft); }
.o-recorded-target::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--t-plan); }
.o-recorded-target .ticket-num { color: var(--t-plan); font-weight: 600; font-size: 12px; }
.o-detail-set { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; min-height: 30px; border-bottom: 1px dotted var(--t-hair); padding: 3px 0; }
.o-set-number { font: 600 12px var(--t-cond); color: var(--t-navy-soft); text-align: center; }
.o-detail-warm .o-set-number { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--t-carbon); color: var(--t-carbon); font-size: 11px; }
.o-set-figure { font: 600 16px var(--t-cond); color: var(--t-carbon); overflow-wrap: anywhere; }
.o-set-figure small { color: var(--t-navy-soft); font: 400 11px var(--t-han); margin: 0 4px 0 2px; }
.o-set-rir { border: 1.5px solid var(--t-carbon); padding: 0 6px; font: 600 12px var(--t-cond); color: var(--t-carbon); }
.o-set-note { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.5; color: var(--t-navy-soft); overflow-wrap: anywhere; }
.o-flatline { border: 2px solid var(--t-red-ink); padding: 0 5px; transform: rotate(-6deg); font: 700 11px var(--t-cond); letter-spacing: .14em; color: var(--t-red-ink); }
.o-exports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.o-primary { background: var(--t-record); color: var(--t-on-record); border-color: var(--t-record); }
.o-primary:focus-visible { outline-color: var(--t-on-record); outline-offset: -4px; }
.o-danger { border-color: var(--t-red-ink); color: var(--t-red-ink); }
.t-overview .delete-control { display: grid; gap: 8px; }
.t-overview .delete-confirm { display: grid; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--t-red-ink); border-radius: 0; background: var(--t-danger-wash); color: var(--t-danger-ink); font-size: 12px; }
.t-overview .delete-confirm p { margin: 0; color: inherit; }
.t-overview .delete-confirm-actions { display: flex; gap: 8px; }
.delete-confirm .o-button { border-color: currentColor; color: var(--t-danger-ink); background: transparent; }
.delete-confirm .o-confirm-delete { border-color: var(--t-red-ink); background: var(--t-red-ink); color: var(--t-coupon); }

.t-coupon {
  position: relative; background: var(--t-coupon); border: 2px solid var(--t-frame);
   border-radius: 0;
   clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  scroll-margin-top: 72px; transform-origin: top center;
}

.t-fields { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1.5px solid var(--t-frame); }
.t-coupon::after {
  content: ""; position: absolute; top: 4px; right: -5px; width: 31px;
  border-top: 2px solid var(--t-frame); transform: rotate(45deg);
  transform-origin: left; pointer-events: none;
}
.t-tab { padding: 6px 6px 7px; border-right: 1px solid var(--t-hair); min-width: 0; }
.t-tab:last-child { border-right: 0; }
.t-tab > span { display: block; font-size: 11px; color: var(--t-navy-soft); letter-spacing: .04em; }
.t-tab b { display: block; font-family: var(--t-cond); color: var(--t-plan); font-size: 16px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.t-tab b::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--t-plan); margin-right: 4px; vertical-align: 2px; }

.t-coupon-body { padding: 14px 14px 12px; }

.t-ex { margin: 0; font-family: var(--t-han); font-size: 26px; font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; }
.t-ex small { display: block; font-family: var(--t-cond); font-size: 14px; font-weight: 600; letter-spacing: .12em; color: var(--t-navy-soft); margin-top: 2px; text-transform: uppercase; }
/* A name with no Chinese in it is Latin text, so it takes the printed face
   rather than the system Han stack: 32px condensed caps, the way the band's
   day name is set. */
.t-ex.t-latin { font-family: var(--t-cond); font-weight: 700; font-size: 32px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; }

.t-target { margin: 8px 0 0; font-size: 14px; color: var(--t-navy-soft); }
.t-target b { color: var(--t-plan); font-family: var(--t-cond); font-size: 17px; font-weight: 600; }
.t-target .t-unknown { color: var(--t-navy-soft); font-family: var(--t-han); font-size: 13px; font-weight: 400; }

.t-pickers { display: grid; gap: 8px; margin-top: 10px; }
.t-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.t-picker span { font-size: 12px; color: var(--t-navy-soft); letter-spacing: .04em; }
.t-picker select {
  width: 100%; min-height: 40px; padding: 4px 8px; border: 1.5px solid var(--t-frame);
   border-radius: 0; background: var(--t-coupon); color: var(--t-navy);
  font-family: var(--t-cond); font-size: 16px; letter-spacing: .02em;
}

/* ledger ---------------------------------------------------------------- */

.t-ledger { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--t-hair); }
.t-ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 40px; border-bottom: 1px solid var(--t-hair); }
.t-ledger .t-no { font-family: var(--t-cond); font-weight: 700; font-size: 17px; color: var(--t-navy); text-align: center; flex: none; }
/* One wrapper for both ledgers: a button in the current coupon, a read-only span
   in the wallet peek. Three children in one grid cell is what keeps a printed
   set on a single line in both places. */
.t-ledger .t-setrow { grid-column: 1 / 2; display: flex; align-items: baseline; gap: 8px; min-width: 0; border: 0; background: none; padding: 6px 0; text-align: left; }
.t-ledger .t-fig { font-family: var(--t-cond); font-size: 24px; font-weight: 600; color: var(--t-carbon); letter-spacing: .02em; }
.t-ledger .t-fig small { font-size: 15px; font-weight: 400; margin-left: 2px; }
.t-ledger .t-rir { font-family: var(--t-cond); font-size: 16px; color: var(--t-carbon); }
.t-ledger .t-warm .t-no {
  width: 22px; height: 22px; border: 1.5px solid var(--t-carbon);
  color: var(--t-carbon); border-radius: 0; font-size: 14px; line-height: 19px;
  text-align: center;
}
.t-ledger .t-warm .t-fig { opacity: .72; }
.t-ledger .t-next .t-fig { color: var(--t-plan); font-family: var(--t-han); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.t-ledger .t-next .t-no { color: var(--t-navy-soft); }
/* Undo is not one of the three reds: it prints navy like every other quiet
   action on the coupon. */
.t-ledger .t-undo { grid-column: 2 / 3; border: 0; background: none; color: var(--t-navy); font-size: 13px; min-height: 40px; padding: 0 4px; justify-self: end; }
.t-ledger .t-row-note { grid-column: 1 / -1; padding: 0 0 8px; color: var(--t-navy-soft); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.t-ledger .t-unknown-unit { font-size: 12px; font-weight: 400; color: var(--t-navy-soft); font-family: var(--t-han); }
/* The perforation already draws the rule between entry and ledger. */
.t-perf + .t-ledger { margin-top: 8px; border-top: 0; }

/* perforation ----------------------------------------------------------- */

.t-perf { position: relative; height: 0; border-top: 2px dashed var(--t-hair); margin: 14px -14px 0; }
.t-perf::before, .t-perf::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--t-stock); border: 2px solid var(--t-frame); }
.t-perf::before { left: -12px; clip-path: inset(0 0 0 50%); }
.t-perf::after { right: -12px; clip-path: inset(0 50% 0 0); }

/* entry ----------------------------------------------------------------- */

.t-entry { display: grid; gap: 10px; padding-top: 14px; }
.t-dial { display: grid; grid-template-columns: 60px 1fr 60px; gap: 8px; align-items: stretch; }
/* manipulation, not none: the dial buttons repeat on a held pointer and the
   page must not be caught zooming itself when a finger lands twice quickly.
   Pinch and the OS zoom settings are untouched. */
.t-dial > button {
   border: 2px solid var(--t-frame); background: var(--t-coupon); border-radius: 0;
  font-family: var(--t-cond); font-size: 20px; font-weight: 600; min-height: 64px;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.t-dial > button:active { background: var(--t-band); color: var(--t-on-band); }

/* The caption prints above the figure, the way a seat number sits above its
   cabin class. It used to be absolutely positioned over the field's top-left
   corner, which at a narrow width landed on the figure itself. */
.t-num {
  position: relative; display: grid; grid-template-rows: auto 1fr; gap: 3px;
  min-height: 72px; padding: 5px 8px 6px;
   border: 2px solid var(--t-field-frame); background: var(--t-field); border-radius: 0;
}
.t-num .t-cap { justify-self: start; line-height: 1; font-family: var(--t-han); font-size: 11px; color: var(--t-navy-soft); }
/* Figure and unit share one baseline-centred row; the wheel covers the lot. */
.t-num .t-value { align-self: center; display: flex; align-items: baseline; justify-content: center; gap: 6px; min-width: 0; }
.t-num .t-fig { font-family: var(--t-cond); font-variant-numeric: tabular-nums; font-size: 40px; font-weight: 600; color: var(--t-carbon); line-height: 1; }
.t-num .t-fig.t-empty { font-family: var(--t-han); font-size: 30px; font-weight: 400; color: var(--t-carbon-line); }
.t-num .t-unit { font-family: var(--t-cond); font-size: 16px; color: var(--t-carbon); font-weight: 400; }
.t-num select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; font-size: 16px; cursor: pointer; }
.t-num:focus-within { border-color: var(--t-carbon); }

.t-rir-label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--t-navy-soft); margin-bottom: 6px; }
.t-rir-label span:last-child { color: var(--t-plan); }
.t-rir-group { display: grid; grid-template-columns: repeat(5, 1fr); border: 2px solid var(--t-frame); border-radius: 0; overflow: hidden; }
.t-rir-group button { border: 0; border-right: 1px solid var(--t-hair); background: var(--t-coupon); min-height: 48px; font-family: var(--t-cond); font-size: 18px; font-weight: 600; color: var(--t-navy); }
.t-rir-group button:last-child { border-right: 0; }
.t-rir-group button:first-child { font-family: var(--t-han); font-weight: 900; font-size: 16px; }
.t-rir-group button[aria-pressed="true"] { background: var(--t-carbon); color: var(--t-on-carbon); }

.t-act { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.t-warmup { border: 2px dashed var(--t-carbon); background: transparent; color: var(--t-carbon); border-radius: 0; min-height: 58px; font-weight: 900; }
.t-warmup[aria-pressed="true"] { border-style: solid; background: var(--t-carbon-wash); }
/* The record action reverses the actual-figure pair without using danger red. */
.t-record { border: 0; background: var(--t-record); color: var(--t-on-record); border-radius: 0; min-height: 58px; font-size: 18px; font-weight: 900; letter-spacing: .04em; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.t-record:active { transform: translateY(1px); box-shadow: none; }
.t-cancel-edit { border: 2px solid var(--t-frame); background: var(--t-coupon); color: var(--t-navy); border-radius: 0; min-height: 58px; font-weight: 900; }

.t-more { border-top: 1px dashed var(--t-hair); padding-top: 10px; }
.t-more > summary { min-height: 40px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--t-navy-soft); font-size: 13px; }
.t-more > summary::-webkit-details-marker { display: none; }
/* The sign is a drawn glyph, so it cannot fall back to whatever the system font
   draws for "+". Both ship; the open state picks one. */
.t-more .t-more-toggle { margin-left: auto; display: inline-flex; }
.t-more .t-more-toggle .t-icon-plus { display: block; }
.t-more .t-more-toggle .t-icon-minus { display: none; }
.t-more[open] > summary .t-more-toggle .t-icon-plus { display: none; }
.t-more[open] > summary .t-more-toggle .t-icon-minus { display: block; }
.t-more-body { display: grid; gap: 11px; padding-top: 10px; }
.t-more .field { display: grid; gap: 6px; min-width: 0; }
.t-more .field > span { color: var(--t-navy-soft); font-size: 11px; font-weight: 400; letter-spacing: .035em; }
.t-more .field-hint { color: var(--t-navy-soft); font-size: 11px; line-height: 1.45; }
.t-more select, .t-more textarea, .t-more input {
  width: 100%; min-width: 0; padding: 9px 10px; border: 1.5px solid var(--t-field-frame);
   border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font-size: 16px;
}
.t-more textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
.t-more .t-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.t-more .t-button { min-height: 44px; padding: 0 14px; border: 2px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font-weight: 900; font-size: 13px; }
.t-more .t-effort-list { display: flex; flex-wrap: wrap; gap: 7px; }
/* Inside the ticket world a shape is ruled, not pill-shaped: the effort chips
   are the RIR row's cousins. */
.t-more .t-effort-list button { min-height: 40px; padding: 0 12px; border: 1.5px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); color: var(--t-navy-soft); font-size: 12px; font-weight: 400; }
.t-more .t-effort-list button[aria-pressed="true"] { border-color: var(--t-carbon); background: var(--t-carbon); color: var(--t-on-carbon); }
.t-history { display: grid; gap: 8px; }
.t-history summary { min-height: 40px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--t-navy); font-size: 11px; font-weight: 400; }
.t-history summary::-webkit-details-marker { display: none; }
.t-history p { margin: 0; }
.t-history strong { font-weight: 400; }
.t-history-lines { display: grid; gap: 5px; color: var(--t-navy-soft); font-size: 11px; line-height: 1.45; }
.t-entry-error { margin: 0; color: var(--t-red-ink); font-size: 12px; font-weight: 400; }
/* An empty error line must not spend a grid gap above the perforation. */
.t-entry-error:empty { display: none; }

/* availability ---------------------------------------------------------- */

.t-hold { margin-top: 12px; padding: 12px; border: 1.5px solid var(--t-red-ink); border-radius: 0; background: var(--t-danger-wash); color: var(--t-danger-ink); font-size: 12px; line-height: 1.5; display: grid; gap: 6px; }
.t-hold strong { display: block; font-weight: 900; }
.t-hold .t-button { justify-self: start; min-height: 40px; padding: 0 12px; border: 2px solid var(--t-red-ink); border-radius: 0; background: transparent; color: var(--t-red-ink); font-weight: 900; }

/* coupon foot ----------------------------------------------------------- */

.t-foot { display: grid; grid-template-columns: 1fr auto 1fr; border-top: 1.5px solid var(--t-frame); }
.t-foot button { border: 0; background: none; min-height: 48px; font-size: 14px; color: var(--t-navy); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.t-foot button:disabled { color: var(--t-hair); cursor: default; }
.t-foot .t-skip { color: var(--t-red-ink); padding: 0 16px; border-left: 1px solid var(--t-hair); border-right: 1px solid var(--t-hair); }

/* rest stub ------------------------------------------------------------- */

.t-stub { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.ticket .t-stub { transition: transform .15s ease-out; }
.ticket.t-typing .t-stub { transform: translateY(100%); visibility: hidden; }
.t-stub-in {
   pointer-events: auto; max-width: 520px; margin: 0 auto; background: var(--t-stub);
   color: var(--t-stub-ink); border: 2px solid var(--t-record); border-radius: 0;
  display: grid; grid-template-columns: auto 1fr; overflow: hidden;
  box-shadow: 0 -6px 20px var(--t-stub-drop);
}
.t-stub .t-left { padding: 8px 14px 6px; border-right: 2px dashed var(--t-stub-line); min-width: 136px; }
.t-stub .t-lbl { font-size: 12px; letter-spacing: .04em; }
.t-stub .t-clock { display: block; font-family: var(--t-cond); font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: .02em; }
/* The right column tracks minmax(0, 1fr), not auto: the nowrap exercise name
   would otherwise set an automatic minimum on the track and push the whole stub
   past the viewport at 320px. The name ellipsises, which is what it is for. */
.t-stub .t-right { padding: 8px 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: center; min-width: 0; }
.t-stub .t-line { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.t-stub .t-line b { font-family: var(--t-cond); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.t-stub .t-line .t-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 66%; }
/* minmax(0, 1fr), not 1fr: a grid track's automatic minimum is its content's,
   so one long label in a button could push the stub past the viewport edge and
   scroll the whole page sideways. */
.t-stub .t-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.t-stub .t-btns button { border: 1.5px solid var(--t-stub-ink); background: transparent; color: var(--t-stub-ink); border-radius: 0; min-height: 40px; min-width: 0; font-family: var(--t-cond); font-size: 14px; font-weight: 600; padding: 0; }
.t-stub .t-btns button:last-child { font-weight: 400; }
.t-stub[data-state="over"] .t-stub-in { background: var(--t-red); border-color: var(--t-red); color: var(--t-on-red); animation: t-pulse 1s ease-out 3; }
.t-stub[data-state="over"] .t-left { border-right-color: var(--t-on-red); }
.t-stub[data-state="over"] .t-btns button { border-color: var(--t-on-red); color: var(--t-on-red); }
.t-stub[data-state="idle"] .t-clock { color: var(--t-carbon-line); }

@keyframes t-pulse { 0% { transform: scale(1); } 30% { transform: scale(1.02); } 100% { transform: scale(1); } }

.t-toast {
  position: fixed; left: 0; right: 0; z-index: 31;
  bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; pointer-events: none;
}
/* A slip of printed matter, not a lozenge. */
.t-toast span {
   max-width: 520px; margin: 0 12px; padding: 7px 14px; border-radius: 0;
   background: var(--t-band); color: var(--t-on-band); font-size: 12px; font-weight: 400;
  box-shadow: 0 4px 14px var(--t-panel-drop);
}

/* wallet ---------------------------------------------------------------- */

dialog.t-sheet {
   border: 0; border-top: 2px solid var(--t-frame); padding: 0; margin: auto auto 0; width: 100%; max-width: 520px;
   max-height: 80vh; background: var(--t-stock); border-radius: 0;
  color: var(--t-navy);
}
dialog.t-sheet::backdrop { background: var(--t-scrim-sheet); }
.t-sheet .t-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--t-band); color: var(--t-on-band); padding: 12px 16px; font-family: var(--t-han); font-size: 20px; font-weight: 900; letter-spacing: .06em; }
.t-sheet .t-sheet-top button { background: none; border: 1.5px solid var(--t-on-band); color: var(--t-on-band); border-radius: 0; min-height: 36px; padding: 0 12px; font-weight: 400; }
.t-sheet .t-list { display: grid; gap: 8px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }

.t-stub-row, .t-head {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px;
   background: var(--t-coupon); border: 2px solid var(--t-frame); border-radius: 0;
  padding: 10px 12px; min-height: 60px; width: 100%; text-align: left;
}
.t-stub-row { border-style: dashed; border-color: var(--t-navy-soft); background: transparent; }
.t-stub-row .t-ttl, .t-head .t-ttl { font-weight: 900; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.t-ttl-zh.t-latin { font-family: var(--t-cond); font-weight: 700; overflow-wrap: anywhere; }
/* Same split as the current coupon's headline: Chinese name, English in small
   caps underneath. Two names on one line never fit at 390px. */
.t-stub-row .t-ttl-en, .t-head .t-ttl-en {
  display: block; font-family: var(--t-cond); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--t-navy-soft);
  line-height: 1.3; overflow-wrap: anywhere;
}
.t-stub-row .t-fig { display: block; font-family: var(--t-cond); font-size: 17px; color: var(--t-carbon); font-weight: 600; }
.t-stub-row .t-skip-text { display: block; font-weight: 400; font-size: 13px; color: var(--t-navy-soft); }
.t-stub-row .t-cnt, .t-head .t-cnt { font-family: var(--t-cond); font-size: 15px; color: var(--t-navy-soft); text-align: right; white-space: nowrap; }
.t-head .t-no, .t-stub-row .t-no { font-family: var(--t-cond); font-weight: 700; font-size: 20px; text-align: center; }
.t-head .t-tgt { display: block; font-family: var(--t-cond); font-size: 16px; color: var(--t-plan); font-weight: 500; }
.t-check { width: 24px; height: 24px; color: var(--t-carbon); margin: 0 auto; display: block; }
.t-void {
   position: static; transform: rotate(-8deg); white-space: nowrap;
  border: 2.5px solid var(--t-red-ink); color: var(--t-red-ink); font-family: var(--t-cond);
   font-weight: 700; font-size: 22px; letter-spacing: .14em; padding: 0 8px;
   border-radius: 0; opacity: .9; pointer-events: none;
}
.t-section-note { font-family: var(--t-cond); font-weight: 400; font-size: 14px; letter-spacing: .1em; color: var(--t-navy-soft); margin: 6px 2px -2px; }

.t-peek summary { list-style: none; cursor: pointer; }
.t-peek summary::-webkit-details-marker { display: none; }
.t-peek[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.t-peek-body { background: var(--t-coupon); border: 2px solid var(--t-frame); border-top: 0; border-radius: 0; padding: 4px 12px 12px; }
.t-peek-body .t-ledger { margin-top: 0; }
.t-peek-body .t-ledger li { border-bottom: 0; }
.t-peek-empty { margin: 10px 0 0; font-size: 13px; color: var(--t-navy-soft); }
.t-peek-go { margin-top: 10px; width: 100%; min-height: 48px; border: 2px solid var(--t-frame); background: var(--t-record); color: var(--t-on-record); border-radius: 0; font-weight: 900; }
/* A current shard is a plan-coloured frame, including an already ejected row. */
.t-head.t-current, .t-stub-row.t-current { border-color: var(--t-plan); }

.t-sheet-foot { display: grid; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 2px dashed var(--t-hair); }
.t-sheet-foot .t-button { min-height: 48px; padding: 0 14px; border: 2px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font-weight: 900; font-size: 14px; text-align: center; }
.t-sheet-foot .t-button.t-primary { background: var(--t-record); color: var(--t-on-record); }
.t-sheet-foot .t-button.t-danger { border-color: var(--t-red-ink); color: var(--t-red-ink); background: var(--t-coupon); }
/* Unobtrusive until asked for: the abandon button is not what anyone reaches
   for during a workout, but it must not be a red slab either. */
.t-sheet-foot .t-button.t-quiet-danger { min-height: 40px; border-color: transparent; background: transparent; color: var(--t-navy-soft); font-weight: 400; font-size: 13px; }
.t-sheet-foot-danger { display: grid; gap: 10px; padding: 12px; border: 1.5px solid var(--t-red-ink); border-radius: 0; background: var(--t-danger-wash); color: var(--t-danger-ink); font-size: 13px; line-height: 1.5; }
.t-sheet-foot-danger p { margin: 0; }
.t-sheet-danger-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t-sheet-foot textarea { width: 100%; min-height: 72px; padding: 9px 10px; border: 1.5px solid var(--t-field-frame); border-radius: 0; background: var(--t-coupon); color: var(--t-navy); font-size: 16px; resize: vertical; }
.t-sheet-foot .field-label { color: var(--t-navy-soft); font-size: 11px; font-weight: 400; letter-spacing: .035em; }


/* Eject: a brief lateral signal glitch, then collapse to the shard header. */
.t-coupon.t-tearing { animation: t-tear .5s cubic-bezier(.2, .8, .2, 1) forwards; }
.t-coupon.t-flatlining { animation: t-tear .45s .15s cubic-bezier(.2, .8, .2, 1) forwards; }
.t-coupon .t-flatline-stamp {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  background: var(--t-coupon);
  animation: t-flatline-stamp .15s ease-out forwards;
}
@keyframes t-flatline-stamp {
  from { transform: translate(-50%, -50%) rotate(-8deg) scale(1.3); opacity: 0; }
  to { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; }
}
@keyframes t-tear {
  0% { transform: translateX(0); opacity: 1; }
  30% { transform: translateX(6px); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
  31% { transform: translateX(-4px); }
  60%, 100% { transform: translateX(0); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 60px, 0 60px); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .ticket .t-stub { transition: none; }
  .t-coupon.t-tearing, .t-coupon.t-flatlining, .t-flatline-stamp { animation: none; }
  .t-stub[data-state="over"] .t-stub-in { animation: none; }
}

@media (max-width: 390px) {
  .t-void { font-size: 18px; }
}

@media (max-width: 380px) {
  .t-void { font-size: 16px; }
  .t-dial { grid-template-columns: 52px 1fr 52px; }
   .t-num .t-fig { font-size: 36px; }
  .t-ex.t-latin { font-size: 28px; }
   .t-stub .t-clock { font-size: 36px; }
  .t-act { grid-template-columns: 88px 1fr; }
}

/* 320px: the narrowest phone the app supports. Everything the band prints stays
   on one line, so the spacing goes instead — smaller gaps, a slightly smaller
   day name, shorter wallet button. The day name still ellipsises if a plan ever
   calls for a longer one. */
@media (max-width: 359px) {
   .t-band { gap: 6px; padding: 0 10px; }
   .t-band .t-day { font-size: 17px; letter-spacing: .04em; }
   .t-band .t-band-meta { gap: 6px; font-size: 11px; }
   .t-band .t-wallet-button { padding: 0 6px; font-size: 12px; letter-spacing: .04em; }
  .t-page, .t-alerts { padding-left: 10px; padding-right: 10px; }
  .t-daypick-start-bar { padding-left: 10px; padding-right: 10px; }
  .t-stub { padding-left: 8px; padding-right: 8px; }
  .t-stub .t-left { min-width: 116px; padding: 8px 10px 6px; }
  .t-stub .t-right { padding: 8px 8px; }
   .t-stub .t-btns button { font-size: 12px; }
}