/* 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: #8A854A;
  --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: #8A854A;
    --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: #8A854A;
  --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); }
/* Migrated notices shared by the normal pages, without changing older surfaces. */
:is(.t-daypick, .t-overview, .t-plan, .t-onboard) .t-alerts:empty { display: none; }
:is(.t-daypick, .t-overview, .t-plan, .t-onboard) .notice {
  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-plan, .t-onboard) .notice-error, :is(.t-daypick, .t-overview, .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-plan, .t-onboard) .notice::before { content: none; }
:is(.t-daypick, .t-overview, .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;
}
:is(.t-daypick, .t-overview, .t-plan) .sync-conflict-columns { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
:is(.t-daypick, .t-overview, .t-plan) .sync-conflict-side { background: var(--t-coupon); border-radius: 0; color: var(--t-navy); }
:is(.t-daypick, .t-overview, .t-plan) .sync-conflict .labeled-value { font: inherit; }
:is(.t-daypick, .t-overview, .t-plan) .sync-conflict .labeled-value strong { font-weight: 900; }
:is(.t-daypick, .t-overview, .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; }

/* 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-builder .t-band-meta { margin-left: auto; }
.t-builder .t-band .t-band-meta { gap: 0; }
.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 .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-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.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-3 button { padding: 6px 2px; font-size: 13px; }
.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); }
/* A correction line: the basis change is the fact, so it is the strong part and
   the reason sits under it. All three parts share the bullet's second column. */
.p-warnings li.p-correction-row { grid-template-columns: 6px minmax(0, 1fr); }
.p-correction-row > * { grid-column: 2; }
.p-correction-when { color: var(--t-navy-soft); }
.p-correction-basis { color: var(--t-plan); font-weight: 900; font-size: 13px; }
.p-correction-note { color: var(--t-navy-soft); font-size: 11px; line-height: 1.45; }
.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-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.p-row3 .p-button { padding: 0 6px; }
.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 .p-link {
  justify-self: start; min-height: 40px; padding: 0 2px; border: 0; background: none;
  color: var(--t-navy); font: 400 12px var(--t-han); text-decoration: underline; cursor: pointer;
}
.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; }

/* 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); }
/* T6: the post-workout summary at the top of a finished workout's detail.
   Four cells, then one ruled row per movement. Recorded figures print carbon,
   the absence of one (首次 / —) stays dim; no colour outside DESIGN's set. */
.o-summary-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.o-summary-metrics b { font-size: 18px; }
.o-summary-rows { display: grid; gap: 6px; }
.o-summary-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  padding: 6px 8px; border: 1.5px solid var(--t-hair);
}
.o-summary-name { flex: 1 1 140px; font-weight: 900; font-size: 13px; color: var(--t-navy); overflow-wrap: anywhere; }
.o-summary-count { font: 600 13px/1.2 var(--t-cond); color: var(--t-carbon); }
.o-summary-best { font: 600 14px/1.2 var(--t-cond); color: var(--t-carbon); overflow-wrap: anywhere; }
.o-summary-trend { font: 700 16px/1 var(--t-cond); color: var(--t-carbon); }
.o-summary-trend.o-soft { color: var(--t-navy-soft); font-weight: 600; }
.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; }
/* Where a record came from, and what was corrected on it. A tag, not a colour:
   neither is a failure state, so neither may use red. */
.o-imported-tag {
  justify-self: start; padding: 1px 5px; border: 1.5px solid var(--t-frame);
  font-size: 10px; font-weight: 900; line-height: 1.4; color: var(--t-navy-soft);
}
.o-correction { grid-column: 1 / -1; }
.o-correction > summary {
  justify-self: start; min-height: 28px; display: flex; align-items: center; cursor: pointer;
  list-style: none; padding: 0 6px; border: 1.5px solid var(--t-frame);
  font-size: 11px; font-weight: 900; color: var(--t-navy-soft);
}
.o-correction > summary::-webkit-details-marker { display: none; }
.o-correction > summary::after { content: " ▸"; }
.o-correction[open] > summary::after { content: " ▾"; }
.o-correction-list { margin: 4px 0 0; padding-left: 16px; font-size: 11px; line-height: 1.5; color: var(--t-navy-soft); overflow-wrap: anywhere; }
.o-correction-list strong { color: var(--t-navy); font-weight: 900; }
.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; }

/* Batch 4: the suggested weight, one line under 上次. The suggestion figure is a
   planned number, so it prints `plan` like every planned figure; 「已用上次」 and
   暂无建议 drop to the dim readout. 「用上次」 is a small secondary button, 44px
   like every tap target, pushed to the right of the line. */
.t-suggest { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.t-suggest-key { flex: none; }
.t-suggest-reason { flex: 1 1 140px; min-width: 0; }
.t-suggest-muted,
.t-suggest-used { color: var(--t-navy-soft); }
.t-suggest-used { font-family: var(--t-han); font-size: 14px; font-weight: 400; }
.t-use-previous {
  flex: none; margin-left: auto; min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--t-frame); border-radius: 0;
  background: var(--t-coupon); color: var(--t-navy); font-weight: 900; font-size: 13px;
}

.t-pickers { display: grid; gap: 8px; margin-top: 8px; }
.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 ----------------------------------------------------------------- */

/* H2 added one row to the entry column, and DESIGN reserves the record button
   from the fixed rest stub. The entry therefore runs on DESIGN's 6px spacing
   step instead of 10px, with no top padding of its own (the coupon body's 14px
   already separates this block from the heading and the pickers), and the tag
   takes one grid gap back with a -6px margin so it still reads as its own row.
   With the shipped 10px gaps the record button sat under the stub at 390×740. */
.t-entry { display: grid; gap: 6px; padding-top: 0; }

/* Unit + load basis, one 44px tag under the weight dial (H2). Square, 2px
   frame, `plan` for the basis name so a chosen basis reads as recorded data and
   not as chrome. */
/* The tag is the one entry row that sits tight against the dial above it: the
   -8px cancels one 10px grid gap, so adding this control costs 44px and not
   54px. That is what keeps the record button clear of the fixed rest stub on a
   390×740 phone (the R4 clearance check) with one more row in the column. */
.t-basis { position: relative; display: grid; margin: -6px 0; }
.t-basis-tag {
  display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px;
  padding: 0 10px; border: 2px solid var(--t-frame); border-radius: 0;
  background: var(--t-coupon); text-align: left; font-size: 14px; color: var(--t-navy);
}
.t-basis-unit { font-family: var(--t-cond); font-weight: 600; font-size: 16px; letter-spacing: .02em; }
.t-basis-dot { color: var(--t-navy-soft); }
.t-basis-name { font-weight: 900; color: var(--t-plan); }
.t-basis-edit { width: 18px; height: 18px; margin-left: auto; flex: none; color: var(--t-navy-soft); }
.t-basis-tag[aria-expanded="true"] .t-basis-edit { color: var(--t-plan); }

/* In flow under the tag: while open it pushes the dials and the action row
   down, so all four choices and their explanations are visible at once. */
.t-basis-panel {
  display: grid; gap: 6px; margin-top: 10px; padding: 6px; border: 2px solid var(--t-frame);
  background: var(--t-coupon);
}
.t-basis-first { margin: 0; font-size: 11px; line-height: 1.4; color: var(--t-navy-soft); }
.t-basis-first::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--t-plan); vertical-align: 1px; }
.t-basis-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.t-basis-caption { font-size: 12px; color: var(--t-navy-soft); letter-spacing: .04em; }
/* The two units reuse the ruled segmented pattern at 40px. */
.t-basis-units { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 2px solid var(--t-frame); }
.t-basis-unit-btn {
  border: 0; border-right: 1px solid var(--t-hair); border-radius: 0; min-height: 40px;
  background: var(--t-coupon); color: var(--t-navy); font-family: var(--t-cond);
  font-size: 16px; font-weight: 600; letter-spacing: .02em;
}
.t-basis-unit-btn:last-child { border-right: 0; }
.t-basis-unit-btn[aria-pressed="true"] { background: var(--t-carbon); color: var(--t-on-carbon); }

/* Two by two: at 390px four cells in one row clipped the explanations (Claude
   review, 2026-10-06). Each cell is now ~170px wide, so every hint fits in one
   or two lines and the panel still stops above the action row. */
.t-basis-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.t-basis-option {
  display: grid; gap: 2px; align-content: start; padding: 5px 6px; min-height: 44px; text-align: left;
  border: 1.5px solid var(--t-frame); border-radius: 0; background: var(--t-coupon);
}
/* One line: "每只 / 单手" must not break into "每只 / 单" + "手". */
.t-basis-option-label { font-weight: 900; font-size: 13px; line-height: 1.2; color: var(--t-navy); white-space: nowrap; }
.t-basis-option-hint { font-size: 11px; line-height: 1.25; color: var(--t-navy-soft); }
/* Selected: a 2px `carbon` fill plus the record yellow label, so the choice is
   unmistakable in both themes without adding a colour. */
.t-basis-option[aria-pressed="true"] { border-color: var(--t-carbon); border-width: 2px; background: var(--t-carbon); }
.t-basis-option[aria-pressed="true"] .t-basis-option-label { color: var(--t-on-carbon); }
.t-basis-option[aria-pressed="true"] .t-basis-option-hint { color: var(--t-on-carbon); opacity: .82; }

/* T3: plate loading, shown only under the 每边挂片 basis. The composition IS
   the per-side weight (no bar, no rails), so the panel sits right under the
   basis tag and feeds the weight dial above it. */
.t-plates { display: grid; gap: 6px; padding: 6px; border: 2px solid var(--t-frame); background: var(--t-coupon); }
.t-plate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.t-plate-text { flex: 1 1 150px; font-family: var(--t-cond); font-size: 13px; color: var(--t-navy); }
.t-plate-tools { display: flex; gap: 6px; }
.t-plate-tool {
  min-height: 44px; padding: 0 12px; border: 1.5px solid var(--t-frame); border-radius: 0;
  background: var(--t-coupon); color: var(--t-navy); font-weight: 900; font-size: 13px;
}
.t-plate-tool[disabled] { opacity: .45; }
.t-plate-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 4px; }
/* Square, 2px frame, at least 44×44: equal columns keep the six lb plates on
   one row at 390px, so the record button stays above the rest stub; the seven
   kg plates wrap rather than shrink below 44px (T3, Claude review). */
.t-plate {
  min-width: 44px; min-height: 44px; padding: 0;
  border: 2px solid var(--t-frame); border-radius: 0; background: var(--t-coupon);
  color: var(--t-carbon); font-family: var(--t-cond); font-weight: 600; font-size: 16px;
}
.t-plate:active { background: var(--t-carbon); color: var(--t-on-carbon); }

/* T4: swapping the coupon's movement, in place above the prev/skip/next row. */
.t-swap { display: grid; gap: 6px; margin-top: 12px; }
.t-swap-open {
  width: 100%; 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-swap-panel { display: grid; gap: 6px; padding: 6px; border: 2px solid var(--t-frame); background: var(--t-coupon); }
.t-swap-filter {
  width: 100%; 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-swap-group { margin: 2px 0 0; font-family: var(--t-cond); font-size: 12px; letter-spacing: .12em; color: var(--t-navy-soft); }
.t-swap-options { display: grid; gap: 6px; }
.t-swap-option {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 10px;
  border: 1.5px solid var(--t-frame); border-radius: 0; background: var(--t-coupon);
  color: var(--t-navy); text-align: left; font-size: 14px;
}
.t-swap-name { flex: 1 1 auto; font-weight: 900; }
.t-swap-current { font-family: var(--t-cond); font-size: 12px; color: var(--t-plan); }
.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: 4px; }
.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; }
/* T5: the edit form adds 移到别的动作 beside 取消编辑. The row turns to a wrap
   so both quiet actions keep their 58px height and the record button still
   takes the rest of the row (it wraps to its own line at 320px). */
.t-act-edit { display: flex; flex-wrap: wrap; gap: 8px; }
.t-act-edit .t-record { flex: 1 1 150px; }
.t-move-open {
  min-height: 58px; padding: 0 12px; border: 2px solid var(--t-frame); border-radius: 0;
  background: var(--t-coupon); color: var(--t-navy); font-weight: 900; font-size: 13px;
}
.t-move-panel { display: grid; gap: 6px; padding: 6px; border: 2px solid var(--t-frame); background: var(--t-coupon); }
.t-move-option {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 10px;
  border: 1.5px solid var(--t-frame); border-radius: 0; background: var(--t-coupon);
  color: var(--t-navy); text-align: left; font-size: 14px;
}
.t-move-name { 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-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; }
/* 提示音 (T1): the gym-floor self-check for the rest chime — 试听 sounds the
   real alarm and the small print reports the latest attempt. */
.t-sound-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.t-sound-label { font-size: 12px; font-weight: 400; color: var(--t-navy-soft); letter-spacing: .04em; }
.t-sound-row .t-button { min-height: 44px; padding: 0 14px; }
.t-sound-log { flex: 1 1 150px; font-family: var(--t-cond); font-size: 12px; color: var(--t-navy-soft); }
/* T2: end the workout in place under the closing coupon. Neutral frames —
   finishing saves the workout, so it is not a red destructive confirmation. */
.t-finish { display: grid; gap: 8px; margin-top: 12px; }
.t-finish-count { margin: 0; font-family: var(--t-cond); font-size: 12px; color: var(--t-navy-soft); }
.t-finish .t-button { width: 100%; 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-finish .t-button.t-primary { background: var(--t-record); color: var(--t-on-record); }
.t-finish-confirm { display: grid; gap: 8px; padding: 12px; border: 1.5px solid var(--t-frame); border-radius: 0; background: var(--t-coupon); }
.t-finish-ask { margin: 0; font-size: 13px; color: var(--t-navy); }
.t-finish-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }


/* 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; }
}

/* plan builder (batch 5, B6) -------------------------------------------- */

/* Two steps, one sticky tray: the layout mirrors the day picker's reserved
   bottom bar so the primary action never hides under the fold. */
.ticket.t-builder {
  --t-builder-bar: calc(86px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; padding-bottom: var(--t-builder-bar);
}
.t-builder > .t-band { flex: none; }
.b-page {
  display: grid; gap: 10px; padding: 12px 16px 20px;
  max-width: 520px; margin: 0 auto; width: 100%;
}
.b-back { margin-left: -6px; }
.b-kick {
  display: flex; align-items: center; gap: 8px; margin-top: 2px;
  font: 700 12px var(--t-cond); letter-spacing: .14em; color: var(--t-navy-soft); text-transform: uppercase;
}
.b-kick::after { content: ""; flex: 1; height: 1px; background: var(--t-hair); }
.b-kick-han { font: 900 12px var(--t-han); letter-spacing: .08em; }
.b-h { margin: 0; font: 900 22px/1.25 var(--t-han); }
.b-sub { margin: 0; color: var(--t-navy-soft); font-size: 13px; line-height: 1.55; }
.b-note { margin: 0; color: var(--t-navy-soft); font-size: 12px; line-height: 1.55; }
.b-empty { padding: 12px; color: var(--t-navy-soft); font-size: 13px; }

/* the draft-resume strip (§3.5) */
.b-resume {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 16px 0; padding: 8px 10px; border: 1.5px solid var(--t-frame); background: var(--t-coupon);
  font-size: 13px;
}
.b-resume-action {
  min-height: 40px; padding: 0 10px; border: 1.5px solid var(--t-frame); background: var(--t-coupon);
  color: var(--t-navy); font: 900 13px var(--t-han);
}
.b-resume-drop { border-color: var(--t-navy-soft); color: var(--t-navy-soft); font-weight: 400; }

/* template rows (day-picker rows) */
.b-trow {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  min-height: 68px; padding: 10px 12px; width: 100%; text-align: left;
  background: var(--t-coupon); border: 2px solid var(--t-frame); border-radius: 0; color: inherit; font: inherit;
}
.b-trow[aria-pressed="true"] { border-color: var(--t-plan); box-shadow: inset 0 0 0 2px var(--t-plan); }
@media (hover: hover) { .b-trow:hover { background: var(--t-carbon-wash); } }
.b-trow-name { font: 700 20px var(--t-cond); letter-spacing: .04em; }
.b-trow-han { font: 900 19px var(--t-han); letter-spacing: .04em; }
.b-trow-sub { font-size: 13px; color: var(--t-navy-soft); }
.b-trow-count { font: 700 24px var(--t-cond); color: var(--t-plan); text-align: right; line-height: 1; }
.b-trow-count small { display: block; font: 400 11px var(--t-han); color: var(--t-navy-soft); margin-top: 3px; }

/* rotation strip (§5.2): rest cells keep one fixed narrow hatch cell */
.b-rot { display: flex; border: 2px solid var(--t-frame); background: var(--t-coupon); min-width: 0; }
.b-rot-cell {
  flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 6px 4px 5px; border-right: 1px solid var(--t-hair); text-align: center;
}
.b-rot-cell:last-child { border-right: 0; }
.b-rot-cell small { display: block; font: 600 10px var(--t-cond); color: var(--t-navy-soft); letter-spacing: .1em; }
.b-rot-name { font: 700 13px var(--t-cond); color: var(--t-plan); letter-spacing: .04em; }
.b-rot-rest {
  flex: 0 0 28px; display: grid; place-items: center; color: var(--t-navy-soft); font: 400 12px var(--t-han);
  border-right: 1px solid var(--t-hair);
  background: repeating-linear-gradient(45deg, transparent 0 5px, var(--t-hair) 5px 6.5px);
}

/* underline day tabs (§5.2) */
.b-utabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--t-hair); scrollbar-width: none; }
.b-utabs::-webkit-scrollbar { display: none; }
.b-utabs button {
  flex: none; height: 44px; padding: 0 12px; border: 0; background: none;
  color: var(--t-navy-soft); font: 700 15px var(--t-cond); letter-spacing: .04em;
  position: relative; white-space: nowrap;
}
.b-utabs button small { font: 600 11px var(--t-cond); margin-left: 4px; color: var(--t-plan); }
.b-utabs button[aria-selected="true"] { color: var(--t-navy); }
.b-utabs button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; background: var(--t-carbon);
}
.b-utabs-add { font: 400 13px var(--t-han) !important; letter-spacing: 0 !important; }

/* the day box (§5.2, §5.7) */
.b-box { background: var(--t-coupon); border: 2px solid var(--t-frame); min-width: 0; }
.b-box-head {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 12px 8px;
  border-bottom: 1px solid var(--t-hair); flex-wrap: wrap;
}
.b-box-name { font: 700 18px var(--t-cond); letter-spacing: .05em; text-transform: uppercase; }
.b-box-type { font: 400 12px var(--t-han); color: var(--t-navy-soft); }
.b-box-count {
  margin-left: auto; font: 700 12px var(--t-cond); letter-spacing: .1em; color: var(--t-plan);
  border: 1.5px solid var(--t-plan); padding: 0 5px; white-space: nowrap;
}
.b-rename {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0;
  border: 0; background: none; color: inherit;
}
.b-pen { width: 16px; height: 16px; color: var(--t-navy-soft); }
.b-box-rename { align-items: center; }
.b-box-rename input {
  flex: 1 1 120px; min-width: 0; height: 40px; padding: 0 8px;
  border: 1.5px solid var(--t-field-frame); background: var(--t-field); color: var(--t-navy);
  font: 700 18px var(--t-cond); letter-spacing: .04em; border-radius: 0;
}
.b-danger-quiet {
  min-height: 40px; padding: 0 8px; border: 0; background: none;
  color: var(--t-red-ink); font: 400 13px var(--t-han);
}

/* one-tap order (§5.5) */
.b-order-row { display: grid; gap: 4px; padding: 10px 12px 0; }
.b-order-hint { margin: 0; color: var(--t-navy-soft); font-size: 12px; line-height: 1.5; }

/* exercise rows (§5.3) */
.b-list { position: relative; }
.b-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px;
  padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--t-hair);
  align-items: start; background: var(--t-coupon);
}
.b-row:last-child { border-bottom: 0; }
.b-no { font: 700 15px var(--t-cond); color: var(--t-navy-soft); padding-top: 2px; font-variant-numeric: tabular-nums; }
.b-row-body { min-width: 0; }
.b-zh { font: 900 16px/1.25 var(--t-han); overflow-wrap: anywhere; }
.b-en {
  font: 600 11px var(--t-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--t-navy-soft);
  overflow-wrap: anywhere;
}
.b-open {
  display: grid; gap: 2px; margin-top: 4px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; width: 100%; min-height: 28px;
}
.b-tgt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font: 600 14px var(--t-cond); color: var(--t-plan); }
.b-tgt > * { white-space: nowrap; }
.b-tgt-rir { font: 400 12px var(--t-han); }
.b-schtag {
  font: 900 11px/1 var(--t-han); color: var(--t-plan); border: 1.5px solid var(--t-plan);
  padding: 2px 3px; margin-right: 2px;
}
.b-bl { display: flex; align-items: center; gap: 6px; min-height: 28px; flex-wrap: wrap; }
.b-bl-val { font: 600 16px var(--t-cond); color: var(--t-carbon); }
.b-bl-unit { font: 400 12px var(--t-han); color: var(--t-navy-soft); }
.b-tag { font: 400 11px var(--t-han); color: var(--t-navy-soft); border: 1.5px solid var(--t-hair); padding: 0 4px; white-space: nowrap; }
.b-bl-empty {
  font: 400 13px var(--t-han); color: var(--t-navy-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
.b-reason { margin-top: 4px; color: var(--t-navy-soft); font-size: 12px; line-height: 1.5; }
.b-row-acts { display: flex; gap: 4px; align-items: center; }
.b-sq {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 1.5px solid var(--t-frame); background: var(--t-coupon); color: var(--t-navy);
}
.b-sq-quiet { border-color: var(--t-hair); color: var(--t-navy-soft); }
.b-row-x { width: 18px; height: 18px; }
.b-grip {
  width: 44px; height: 44px; margin: -4px -6px -4px 0; display: grid; place-items: center;
  padding: 0; border: 0; background: none; color: var(--t-navy-soft);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.b-grip svg { width: 22px; height: 22px; }
.b-grip:focus-visible { outline: 3px solid var(--t-carbon); outline-offset: -3px; }
.b-row.b-dragging {
  position: relative; z-index: 5;
  box-shadow: 0 8px 20px var(--t-panel-drop), inset 0 0 0 2px var(--t-plan);
  border-bottom-color: transparent;
}
.b-row.b-dragging .b-grip { color: var(--t-plan); }
.b-is-dragging { user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: no-preference) {
  .b-row.b-settle { animation: b-settle .6s ease-out; }
}
@keyframes b-settle {
  from { box-shadow: inset 0 0 0 2px var(--t-plan); }
  to { box-shadow: inset 0 0 0 2px transparent; }
}

/* the 怎么练 panel (§5.4) */
.b-cfg {
  grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 6px; padding: 10px;
  background: var(--t-carbon-wash); border: 1.5px solid var(--t-frame);
}
.b-q { font: 900 13px var(--t-han); }
.b-q-sub { font-weight: 400; color: var(--t-navy-soft); }
.b-q-fig { font: 600 15px var(--t-cond); color: var(--t-plan); }
.b-seg { display: grid; border: 2px solid var(--t-frame); background: var(--t-coupon); }
.b-seg button {
  min-height: 44px; padding: 0 4px; border: 0; border-right: 1px solid var(--t-hair);
  background: none; color: var(--t-navy); font: 900 13px var(--t-han);
}
.b-seg button:last-child { border-right: 0; }
.b-seg button[aria-pressed="true"] { background: var(--t-carbon); color: var(--t-on-carbon); }
.b-seg-latin { font: 700 14px var(--t-cond); letter-spacing: .04em; }
.b-seg-2 { grid-template-columns: repeat(2, 1fr); }
.b-sch { grid-template-columns: repeat(4, 1fr); }
.b-seg-3 { grid-template-columns: repeat(3, 1fr); }
.b-seg-4 { grid-template-columns: repeat(4, 1fr); }
.b-seg-5 { grid-template-columns: repeat(5, 1fr); }
.b-seg-6 { grid-template-columns: repeat(6, 1fr); }
.b-seg-4 button, .b-seg-5 button, .b-seg-6 button { min-height: 40px; font-size: 12px; }
.b-level-row { display: flex; align-items: center; gap: 8px; }
.b-level-row .b-seg { flex: 1; }
.b-sch button {
  position: relative; min-height: 52px; display: grid; align-content: center; gap: 1px;
}
.b-sch-name { font: 900 16px var(--t-han); }
.b-sch-fig { font: 600 12px var(--t-cond); color: var(--t-plan); }
.b-seg button[aria-pressed="true"] .b-sch-fig { color: var(--t-on-carbon); }
.b-usual { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; background: var(--t-plan); }
.b-seg button[aria-pressed="true"] .b-usual { background: var(--t-on-carbon); }
.b-schsub { font-size: 12px; color: var(--t-navy-soft); margin-top: -2px; }
.b-cs-rows { display: grid; gap: 6px; }
.b-cs-row { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.b-cs-label { width: 34px; font-weight: 900; flex: none; }
.b-cs-to { font-style: normal; color: var(--t-navy-soft); font-size: 12px; }
.b-cs-rir { flex: 1 1 140px; }
.b-stp { display: inline-flex; align-items: center; border: 1.5px solid var(--t-frame); background: var(--t-coupon); }
.b-stp-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; background: none; color: var(--t-navy); font: 600 18px var(--t-cond);
}
.b-stp-num {
  min-width: 30px; text-align: center; font: 600 18px var(--t-cond); color: var(--t-plan);
  font-variant-numeric: tabular-nums;
}
.b-anchor-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
.b-anchor-row input {
  height: 48px; width: 100%; padding: 0 10px;
  border: 1.5px solid var(--t-frame); background: var(--t-field); color: var(--t-carbon);
  font: 600 16px var(--t-cond); border-radius: 0;
}
.b-anchor-row input:focus-visible { outline: 3px solid var(--t-carbon); outline-offset: 2px; }
.b-cfg-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* buttons */
.b-btn {
  min-height: 44px; padding: 0 12px; border: 2px solid var(--t-frame); background: var(--t-coupon);
  color: var(--t-navy); font: 900 14px var(--t-han); text-align: center;
}
.b-btn-primary { background: var(--t-record); color: var(--t-on-record); }
.b-btn-dash { border-style: dashed; border-color: var(--t-navy-soft); background: transparent; }
.b-btn-full { width: 100%; }
.b-btn-small { min-height: 40px; font-size: 13px; }
.b-btn:disabled { opacity: .45; cursor: not-allowed; }

/* recommendation strip (§5.2) */
.b-strip-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 40px; padding: 8px 4px 0 12px; border-top: 1px solid var(--t-hair);
}
.b-strip-title { font: 900 12px var(--t-han); color: var(--t-navy-soft); letter-spacing: .06em; }
.b-strip-all {
  min-height: 40px; padding: 0 8px; border: 0; background: none;
  color: var(--t-plan); font: 900 12px var(--t-han); text-decoration: underline; text-underline-offset: 3px;
}
.b-strip { display: flex; gap: 8px; overflow-x: auto; padding: 6px 12px 12px; scrollbar-width: thin; }
.b-card {
  flex: none; width: 128px; min-height: 96px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: 6px;
  padding: 8px 9px; background: var(--t-coupon); border: 2px solid var(--t-frame);
  text-align: left; color: inherit; font: inherit;
}
.b-card[aria-pressed="true"] { border-color: var(--t-plan); box-shadow: inset 0 0 0 2px var(--t-plan); }
.b-card[aria-pressed="true"] .b-plus { background: var(--t-carbon); color: var(--t-on-carbon); border-color: var(--t-carbon); }
.b-card-zh { font: 900 14px/1.25 var(--t-han); overflow-wrap: anywhere; }
.b-card-en {
  font: 600 10px/1.2 var(--t-cond); letter-spacing: .08em; text-transform: uppercase;
  color: var(--t-navy-soft); overflow-wrap: anywhere;
}
.b-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.b-card-foot .b-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.b-card-foot .b-plus { flex: none; }
.b-plus {
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 1.5px solid var(--t-frame); font: 700 16px/1 var(--t-cond); flex: none;
}
.b-card-more { border-style: dashed; border-color: var(--t-navy-soft); align-content: center; justify-items: start; }

/* the 全部动作 sheet (§5.6) */
.b-scrim { position: fixed; inset: 0; z-index: 20; background: var(--t-scrim-sheet); }
.b-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  height: 86vh; height: 86dvh;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--t-stock); border-top: 2px solid var(--t-frame);
  box-shadow: 0 -6px 20px var(--t-stub-drop);
}
.b-sheet-top {
  display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 8px 0 14px;
  background: var(--t-band); color: var(--t-on-band);
}
.b-sheet-title { font: 900 18px var(--t-han); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-sheet-done {
  margin-left: auto; height: 40px; padding: 0 12px;
  border: 1.5px solid var(--t-on-band); background: none; color: var(--t-on-band);
  font: 900 13px var(--t-han);
}
.b-sheet-top :focus-visible { outline-color: var(--t-on-band); }
.b-sheet-filters { display: grid; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--t-hair); }
.b-sheet-filters input {
  height: 44px; width: 100%; padding: 0 10px;
  border: 1.5px solid var(--t-frame); background: var(--t-coupon); color: var(--t-navy);
  font: 400 16px var(--t-han); border-radius: 0;
}
.b-sheet-body {
  overflow-y: auto; padding: 4px 14px 16px; display: grid; gap: 8px; align-content: start;
}
.b-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.b-grid2 .b-card { width: auto; }
.b-lrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 26px; align-items: center; gap: 8px;
  min-height: 48px; padding: 6px 10px; width: 100%;
  background: var(--t-coupon); border: 1.5px solid var(--t-frame); text-align: left; color: inherit; font: inherit;
}
.b-lrow + .b-lrow { margin-top: -2px; }
.b-lrow[aria-pressed="true"] {
  border-color: var(--t-plan); box-shadow: inset 0 0 0 1.5px var(--t-plan); position: relative; z-index: 1;
}
.b-lrow[aria-pressed="true"] .b-plus { background: var(--t-carbon); color: var(--t-on-carbon); border-color: var(--t-carbon); }
.b-lrow-zh { font: 900 14px var(--t-han); overflow-wrap: anywhere; }
.b-lrow-en {
  font: 600 10px var(--t-cond); letter-spacing: .08em; text-transform: uppercase;
  color: var(--t-navy-soft); margin-left: 6px; overflow-wrap: anywhere;
}
.b-grp { font: 900 12px var(--t-han); color: var(--t-navy-soft); margin: 8px 0 4px; letter-spacing: .06em; }
.b-sheet-foot {
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--t-frame); background: var(--t-stock);
}
.b-libver { margin: 2px 0 0; text-align: center; font: 600 11px var(--t-cond); letter-spacing: .08em; color: var(--t-navy-soft); }

/* 新建自定义动作 (§5.6) */
.b-custom { padding-top: 12px; }
.b-field { display: grid; gap: 4px; }
.b-field-label { font: 900 13px var(--t-han); }
.b-field-hint { font: 400 12px var(--t-han); color: var(--t-navy-soft); }
.b-field input {
  height: 44px; padding: 0 10px; border: 1.5px solid var(--t-frame);
  background: var(--t-coupon); color: var(--t-navy); font: 400 16px var(--t-han); border-radius: 0;
}
.b-mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.b-mgrid button {
  min-height: 40px; padding: 0 4px; border: 1.5px solid var(--t-frame);
  background: var(--t-coupon); color: var(--t-navy); font: 400 13px var(--t-han);
}
.b-mgrid button[aria-pressed="true"] { background: var(--t-carbon); color: var(--t-on-carbon); border-color: var(--t-carbon); }
.b-switch-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b-switch {
  min-height: 40px; padding: 0 10px; border: 1.5px solid var(--t-frame);
  background: var(--t-coupon); color: var(--t-navy); font: 900 13px var(--t-han);
}

/* save prompt (§5.8) */
.b-save-sheet { height: auto; max-height: 80dvh; grid-template-rows: auto minmax(0, 1fr) auto; }
.b-save-summary { margin: 0; font: 600 16px var(--t-cond); color: var(--t-plan); }

/* the tray and toast (§5.5) */
.b-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  margin-top: auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--t-frame); background: var(--t-stock);
}
.b-start {
  display: block; width: 100%; min-height: 52px; border: 0; border-radius: 0;
  background: var(--t-record); color: var(--t-on-record);
  font: 900 18px var(--t-han); letter-spacing: .04em;
}
.b-start:active { transform: translateY(1px); }
.b-start:focus-visible { outline-color: var(--t-on-record); outline-offset: -4px; }
.b-toast {
  position: fixed; left: 14px; right: 14px; z-index: 31;
  bottom: calc(106px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px;
  max-width: 520px; margin: 0 auto; padding: 10px 12px;
  background: var(--t-coupon); border: 2px solid var(--t-frame);
  box-shadow: 0 4px 14px var(--t-panel-drop); font-size: 13px;
}
.b-toast-danger { border-color: var(--t-red-ink); background: var(--t-danger-wash); color: var(--t-danger-ink); }
.b-toast span { flex: 1; min-width: 0; }
.b-toast-action {
  min-height: 40px; padding: 0 10px; border: 1.5px solid var(--t-frame);
  background: var(--t-coupon); color: var(--t-navy); font: 900 13px var(--t-han);
}

@media (max-width: 359px) {
  .b-page { padding-left: 10px; padding-right: 10px; }
  .b-utabs button { padding: 0 8px; }
  .b-mgrid { grid-template-columns: repeat(3, 1fr); }
  .b-card { width: 116px; }
}