/* W17-04 — sales & collection storyboard inside chapter 01 (#ch-sales, assets/js/sales-cinema.js).
   Motif: a deal "signal room". A gold ledger ribbon waves through five moments above a split desk: ivory paper
   (the document as its owner sees it) beside a navy books witness (what the books recorded, in which account).
   Deliberately not the P2P look: no blueprint grid, no paper pile, no numbered rail; cyan + warm gold on navy.
   Readable sizes: nothing customers read is below 14px. Text is never faded; entrances move only. */

.scx {
  --scx-gold: #e8b85a; --scx-gold-2: #f6d58f; --scx-cyan: #5fd4ea; --scx-ink: #0b1630; --scx-ivory: #fbf7ee;
  grid-column: 1 / -1; position: relative; display: grid; gap: 1rem; margin-top: .5rem;
  padding: clamp(.9rem, .4rem + 1.6vw, 1.75rem); border-radius: 26px; overflow: clip;
  background:
    radial-gradient(70% 55% at 100% 0%, rgb(232 184 90 / .13), transparent 62%),
    radial-gradient(60% 50% at 0% 100%, rgb(95 212 234 / .12), transparent 60%),
    linear-gradient(160deg, #0c1a3d 0%, #071230 50%, #050c22 100%);
  border: 1px solid rgb(232 184 90 / .28);
  box-shadow: 0 40px 90px -50px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .05);
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.scx ::selection { background: rgb(232 184 90 / .35); }

/* ---------- head ---------- */
.scx-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.5rem; align-items: end; }
.scx-kicker { grid-column: 1 / -1; margin: 0; color: var(--scx-gold-2); font-size: .875rem; font-weight: 600; }
.scx-head h4 { margin: 0; color: var(--text-1); font-family: var(--font-display); font-size: clamp(1.3rem, 1.05rem + .9vw, 1.75rem); font-weight: 600; line-height: 1.45; text-wrap: balance; }
.scx-lead { grid-column: 1; margin: 0; max-width: 68ch; color: var(--text-2); font-size: 1rem; line-height: 1.8; }
.scx-legend { grid-column: 2; grid-row: 2 / span 2; display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.scx-legend li, .scx-ev li > b { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 600; line-height: 1.5; }
.scx-legend li { padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-1); }
.scx-legend li::before, .scx-ev li > b::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; }
.scx-legend .is-verified::before, .scx-ev .is-verified > b::before { background: var(--ok); }
.scx-legend .is-runtime::before, .scx-ev .is-runtime > b::before { background: var(--warn); }
.scx-legend .is-example::before, .scx-ev .is-example > b::before { background: transparent; border: 2px dashed #c9b6ff; }

/* ---------- stage (runway + sticky, driven by stage.js) ---------- */
.scx-sticky { display: grid; gap: .7rem; align-content: start; }
.scx-run.is-staged::after { content: ""; display: block; height: var(--stage-run, 0px); }
.scx-run.is-staged .scx-sticky { position: sticky; top: calc(var(--header-h) + 12px); }
.scx-run.is-staged, .scx-run.is-staged * { overflow-anchor: none; }

.scx-run { display: grid; gap: .5rem; }
.scx-hint { margin: 0; color: var(--text-2); font-size: .875rem; line-height: 1.6; }
.scx-hint__scroll { display: none; }
.scx-run.is-staged .scx-hint__scroll { display: inline; }
.scx-run.is-staged .scx-hint__manual { display: none; }
.scx-ctrl { flex: none; display: inline-flex; align-items: center; gap: .5rem; }
.scx-nav { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(232 184 90 / .45); background: rgb(255 255 255 / .03); color: var(--text-1); cursor: pointer; transition: background var(--dur-1), border-color var(--dur-1); }
.scx-nav svg { width: 18px; height: 18px; }
.scx-nav:hover:not(:disabled) { background: rgb(232 184 90 / .16); border-color: var(--scx-gold); }
.scx-nav:disabled { cursor: default; color: var(--text-3); border-color: var(--line-2); }
.scx-nav:focus-visible, .scx-tab:focus-visible, .scx-scene:focus-visible, .scx-mod:focus-visible, .scx-limit:focus-visible, .scx-limit a:focus-visible, .scx-jump:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.scx-count { min-width: 3.2em; color: var(--scx-gold-2); font-family: var(--font-num); font-size: .95rem; font-weight: 600; text-align: center; direction: ltr; }

/* ribbon: a waving ledger thread through five nodes; gold fills it from the right (RTL start) */
.scx-ribbon { position: relative; }
.scx-wave { position: absolute; top: 0; inset-inline: 0; width: 100%; height: 56px; overflow: visible; pointer-events: none; }
.scx-wave path { fill: none; stroke-linecap: round; }
.scx-wave__base { stroke: rgb(140 184 255 / .22); stroke-width: 2; stroke-dasharray: .006 .012; }
/* pathLength=1, so 1px (one user unit) is the whole thread */
.scx-wave__lit { stroke: var(--scx-gold); stroke-width: 3; stroke-dasharray: 1px 1px; stroke-dashoffset: calc((1 - var(--scx-f, 0)) * 1px); filter: drop-shadow(0 0 6px rgb(232 184 90 / .65)); transition: stroke-dashoffset .5s var(--ease-out); }
.scx-run.is-staged .scx-wave__lit { stroke-dashoffset: calc((1 - clamp(0, (var(--stage-p, 0) * 5 - .5) / 4, 1)) * 1px); transition: stroke-dashoffset .12s linear; }
.scx-tabs { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
/* node: a 34px diamond whose centre sits on the thread (2px padding + 9px margin + 17px = y 28 of the wave) */
.scx-tab { display: grid; justify-items: center; align-content: start; gap: .1rem; min-height: 44px; padding: 2px .2rem .3rem; border: 0; border-radius: 14px; background: none; color: var(--text-2); font: inherit; text-align: center; cursor: pointer; }
.scx-tab__n { position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin: 9px 0 .55rem; border-radius: 9px; border: 2px solid rgb(140 184 255 / .35); background: #0a1531; color: var(--text-2); font-family: var(--font-num); font-size: .875rem; font-weight: 700; transform: rotate(45deg); transition: border-color var(--dur-2), box-shadow var(--dur-2); /* background and ink switch atomically for readable contrast */ }
.scx-tab__n bdi { display: inline-block; transform: rotate(-45deg); }
.scx-tab b { color: var(--text-1); font-size: .95rem; font-weight: 600; line-height: 1.45; }
.scx-tab small { color: var(--text-2); font-size: .875rem; line-height: 1.4; }
.scx-tab small .ident { font-family: var(--font-num); }
.scx-tab:hover b { color: #fff; }
.scx-tab.is-past .scx-tab__n { border-color: var(--scx-cyan); background: #0d2a44; color: #bff1fa; }
.scx-tab[aria-selected="true"] .scx-tab__n { border-color: var(--scx-gold-2); background: #e0ad55 linear-gradient(135deg, #f0c56c, #c98f2a); color: var(--scx-ink); box-shadow: 0 0 0 6px rgb(232 184 90 / .18), 0 10px 26px -10px rgb(232 184 90 / .8); }
.scx-tab[aria-selected="true"] small { color: var(--scx-gold-2); }
.scx-meter { display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.scx-meter i { height: 4px; border-radius: 4px; background: var(--line-2); transition: background var(--dur-2); }
.scx-meter i.is-on { background: var(--scx-gold); }

/* scene: story line (+ controls) over paper | witness */
.scx-scene { display: grid; gap: .7rem; border-radius: 20px; }
.scx-line { display: flex; align-items: center; gap: .6rem 1rem; }
.scx-body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: .8rem 1rem; align-items: start; }
.scx-story { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: 0; padding: .5rem .85rem; border-radius: 14px; border: 1px solid rgb(95 212 234 / .28); background: linear-gradient(270deg, rgb(95 212 234 / .1), rgb(95 212 234 / .02)); color: var(--text-1); font-size: 1rem; line-height: 1.75; }
.scx-story__when { color: var(--scx-cyan); font-family: var(--font-num); font-size: .875rem; font-weight: 600; }
.scx-story > b { color: var(--scx-gold-2); font-weight: 600; }
.scx-story > span:last-child { flex: 1 1 26rem; min-width: 0; }
.scx-desk { position: relative; min-width: 0; padding: .7rem; border-radius: 20px; background: radial-gradient(90% 90% at 50% 0%, rgb(232 184 90 / .14), transparent 70%), #0a1636; border: 1px solid rgb(232 184 90 / .2); }
.scx-desk::after { content: ""; position: absolute; inset-block: 22%; inset-inline-end: -1rem; width: 1rem; border-top: 2px solid rgb(232 184 90 / .55); border-bottom: 2px solid rgb(95 212 234 / .45); pointer-events: none; }

.scx-doc { position: relative; display: grid; gap: .7rem; padding: .95rem 1.05rem .75rem; border-radius: 14px; background: var(--scx-ivory); color: var(--scx-ink); box-shadow: 0 26px 50px -24px rgb(0 0 0 / .85), 0 0 0 1px rgb(10 20 48 / .06); font-size: .95rem; line-height: 1.7; }
.scx-doc::before { content: ""; position: absolute; top: 0; inset-inline: 14px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(270deg, var(--scx-gold), #c98f2a); }
.scx-doc--receipt::before { background: linear-gradient(270deg, #2aa9c4, #156d86); }
.scx-doc--return::before { background: linear-gradient(270deg, #e07a3a, #a3460f); }
.scx-doc--review::before { background: linear-gradient(270deg, #0b1630, #3b4f86); }
.scx-doc__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding-bottom: .55rem; border-bottom: 1px solid #e6dfcc; }
.scx-doc__type { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.scx-doc__type svg { width: 20px; height: 20px; color: #9a6a12; }
.scx-doc__head .ident { color: #3b4766; font-family: var(--font-num); font-size: .95rem; font-weight: 600; }
.scx-doc__foot { margin: 0; color: #4c5878; font-size: .875rem; }
.scx-doc .money .sar, .scx-doc th .sar, .scx-witness th .sar { color: inherit; }
.scx th .sar { opacity: 1; }

.scx-stamp { display: inline-flex; align-items: center; margin-inline-start: auto; padding: .1rem .6rem; border: 2px solid currentColor; border-radius: 8px; font-size: .875rem; font-weight: 700; line-height: 1.5; transform: rotate(-3deg); }
.scx-stamp--ok { color: #0d6b45; background: #e6f6ee; }
.scx-stamp--wait { color: #1d3f8f; background: #e8efff; }
.scx-stamp--warn { color: #8a3a06; background: #fff0e2; }

.scx-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1rem; margin: 0; }
.scx-fields > div, .scx-sum > div { min-width: 0; }
.scx-fields dt, .scx-sum dt { color: #4c5878; font-size: .875rem; font-weight: 500; }
.scx-fields dd { margin: 0; color: var(--scx-ink); font-size: .95rem; font-weight: 600; }
.scx-lines { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .95rem; }
.scx-lines th { padding: .3rem .45rem; border-bottom: 1px solid #d9d1bd; color: #4c5878; font-size: .875rem; font-weight: 600; text-align: start; }
.scx-lines td { padding: .35rem .45rem; border-bottom: 1px solid #ece5d4; color: var(--scx-ink); overflow-wrap: anywhere; }
.scx-lines th:not(:first-child), .scx-lines td:not(:first-child) { text-align: end; }
.scx-lines tfoot td { border-bottom: 0; border-top: 2px solid currentColor; font-weight: 700; }
.scx-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0; }
.scx-sum dd { margin: 0; font-weight: 600; }
.scx-sum .is-grand { padding: .2rem .55rem; border-radius: 8px; background: var(--scx-ink); }
.scx-sum .is-grand dt { color: var(--scx-gold-2); }
.scx-sum .is-grand dd { color: #fff; }
.scx-link { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0; padding: .5rem .7rem; border-radius: 10px; background: #f3ecdb; color: #33405f; font-size: .95rem; }
.scx-link .ident { padding: .05rem .45rem; border-radius: 6px; background: #fff; color: var(--scx-ink); font-family: var(--font-num); font-weight: 700; box-shadow: 0 0 0 1px #e0d5ba; }
.scx-link__arrow svg { width: 18px; height: 18px; color: #9a6a12; }
.scx-life { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.scx-life li { display: grid; padding: .4rem .65rem; border-radius: 10px; border: 1px dashed #cfc5ab; color: #4c5878; font-size: .875rem; line-height: 1.5; }
.scx-life b { color: var(--scx-ink); font-size: .95rem; }
.scx-life li.is-on { border: 1px solid #0f7a4f; background: #e9f7ef; color: #0d5c3b; }
.scx-apart { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: .55rem .75rem; border-radius: 10px; border: 1px solid #b9dfe8; background: #ebf7fa; color: #0f3d4c; font-size: .95rem; line-height: 1.7; }
.scx-apart svg { flex: none; width: 20px; height: 20px; margin-top: .2rem; color: #156d86; }
.scx-sign { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; padding: .5rem .75rem; border-radius: 10px; background: #f3ecdb; }
.scx-sign > span:not(.scx-sign__arrow) { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.scx-sign small { color: #4c5878; font-size: .875rem; }
.scx-sign b { color: var(--scx-ink); font-weight: 600; }
.scx-sign__arrow svg { width: 18px; height: 18px; color: #4c5878; }
.scx-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.scx-fake { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .85rem; border-radius: 9px; border: 1px solid #cfc5ab; color: #33405f; font-size: .875rem; font-weight: 600; }
.scx-fake.is-on { border-color: var(--scx-ink); background: var(--scx-ink); color: #fff; }
.scx-mark { padding: .05rem .4rem; border-radius: 6px; background: #ffe6d2; color: #8a3a06; }
.scx-bound { display: grid; gap: .3rem; }
.scx-bound__bar { position: relative; display: block; height: 12px; border-radius: 12px; background: repeating-linear-gradient(135deg, #ece5d4 0 6px, #ddd3bb 6px 12px); overflow: hidden; }
.scx-bound__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--v) * 100%); border-radius: inherit; background: #c2560f; }
.scx-bound small { color: #4c5878; font-size: .875rem; }
.scx-q { margin: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; line-height: 1.5; }
.scx-calc { display: grid; gap: 0; margin: 0; padding: .2rem .8rem; border-radius: 12px; background: #f3ecdb; list-style: none; }
.scx-calc li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .8rem; padding: .35rem 0; border-bottom: 1px solid #e3d9c0; font-size: .95rem; }
.scx-calc li .money { font-weight: 600; }
.scx-calc .is-total { border-bottom: 0; border-top: 2px solid var(--scx-ink); font-weight: 700; }
.scx-calc .is-total .money { font-size: 1.15rem; font-weight: 700; }
.scx-calc em { margin-inline-start: .5rem; padding: 0 .45rem; border: 1px dashed #6b4fd8; border-radius: 999px; color: #4a31b0; font-size: .875rem; font-style: normal; font-weight: 600; }

/* books witness */
.scx-witness { display: grid; gap: .6rem; min-width: 0; padding: .9rem 1rem; border-radius: 20px; background: rgb(12 22 50 / .94); border: 1px solid rgb(95 212 234 / .25); box-shadow: inset 0 1px 0 rgb(255 255 255 / .04); }
.scx-witness__k { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; color: var(--scx-cyan); font-size: .875rem; font-weight: 600; }
.scx-witness__k span { padding: .05rem .55rem; border-radius: 999px; background: rgb(95 212 234 / .12); color: #c7f3fb; }
.scx-tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: 0; }
.scx-tally > div { min-width: 0; padding: .35rem .55rem; border-radius: 10px; border: 1px dashed var(--line-3); }
.scx-tally dt { color: var(--text-2); font-size: .875rem; line-height: 1.45; }
.scx-tally dd { margin: 0; color: var(--text-2); font-size: .875rem; font-weight: 600; line-height: 1.6; }
.scx-tally .is-on { border: 1px solid rgb(232 184 90 / .5); background: rgb(232 184 90 / .08); }
.scx-tally .is-on dd { color: #fff; font-size: 1rem; }
.scx-books { display: grid; gap: .4rem; padding: .6rem .7rem; border-radius: 12px; background: #f6f9ff; color: var(--scx-ink); }
.scx-books h5 { margin: 0; color: #1d3f8f; font-size: .95rem; font-weight: 700; line-height: 1.5; }
.scx-books .scx-lines td { padding-block: .28rem; }
.scx-books .scx-lines th { border-bottom-color: #d3dcef; }
.scx-books .scx-lines td { border-bottom-color: #e5ebf7; }
.scx-books__none, .scx-books__note { margin: 0; color: #33405f; font-size: .875rem; line-height: 1.65; }
.scx-books__stock { display: flex; align-items: flex-start; gap: .45rem; margin: 0; padding: .35rem .55rem; border-radius: 8px; background: #e9f7ef; color: #0d5c3b; font-size: .875rem; line-height: 1.6; }
.scx-books__stock svg { flex: none; width: 18px; height: 18px; margin-top: .15rem; }
.scx-guard { margin: 0; padding: .45rem .7rem; border-radius: 10px; border: 1px solid rgb(63 214 156 / .3); background: rgb(63 214 156 / .07); color: var(--text-1); font-size: .95rem; line-height: 1.65; }
.scx-guard b { color: var(--ok); font-weight: 600; }
.scx-ev { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.scx-ev li { color: var(--text-2); font-size: .875rem; line-height: 1.6; }
.scx-ev li > b { margin-inline-end: .2rem; color: var(--text-1); }
.scx-mods { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.scx-mods > small { color: var(--text-2); font-size: .875rem; margin-inline-end: .15rem; }
.scx-mod { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .1rem .65rem; border-radius: 999px; border: 1px solid rgb(95 212 234 / .45); color: #c7f3fb; font-size: .875rem; font-weight: 600; text-decoration: none; }
.scx-mod:hover { background: rgb(95 212 234 / .16); color: #fff; }
.scx-mod small { color: #ffd58a; font-size: .875rem; font-weight: 500; }

.scx-limit { margin: 0; padding: .65rem .85rem; border-radius: 12px; border: 1px dashed rgb(232 184 90 / .45); color: var(--text-2); font-size: .95rem; line-height: 1.75; }
.scx-limit b { color: var(--scx-gold-2); }
.scx-limit a { color: var(--scx-cyan); font-weight: 600; }
.scx-jump { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .85rem; border-radius: 999px; border: 1px solid rgb(232 184 90 / .5); color: var(--scx-gold-2); font-size: .9rem; font-weight: 600; text-decoration: none; }
.scx-jump:hover { background: rgb(232 184 90 / .12); color: #fff; }

/* ---------- motion (transform only; never opacity on text) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .scx-scene.is-entering .scx-doc { animation: scx-doc-in .62s var(--ease-out) both; }
  .scx[data-dir="back"] .scx-scene.is-entering .scx-doc { animation-name: scx-doc-back; }
  .scx-scene.is-entering .scx-stamp { animation: scx-stamp-in .5s var(--ease-out) .26s both; }
  .scx-scene.is-entering .scx-story { animation: scx-slide .5s var(--ease-out) both; }
  .scx-scene.is-entering .scx-witness > * { animation: scx-rise .5s var(--ease-out) both; }
  .scx-scene.is-entering .scx-witness > :nth-child(n+3) { animation-delay: 80ms; }
  .scx-scene.is-entering .scx-witness > :nth-child(n+5) { animation-delay: 150ms; }
  .scx-scene.is-entering .scx-witness > .scx-mods { animation: none; } /* keep bottom module links stable inside the witness while rest of story animates */
  .scx-scene.is-entering .scx-tally .is-new { animation: scx-pop .6s var(--ease-out) .2s both; }
  .scx-scene.is-entering .scx-bound__bar i { animation: scx-fill .8s var(--ease-out) .2s both; }
  .scx-tab[aria-selected="true"] .scx-tab__n::after { content: ""; position: absolute; inset: -8px; border-radius: 18px; border: 1px solid rgb(232 184 90 / .55); animation: scx-pulse 2.4s var(--ease-out) 2; pointer-events: none; }
}
@keyframes scx-doc-in { from { transform: translate3d(24px, 10px, 0) rotate(.8deg) scale(.985); } to { transform: none; } }
@keyframes scx-doc-back { from { transform: translate3d(-20px, 8px, 0) rotate(-.6deg) scale(.985); } to { transform: none; } }
@keyframes scx-stamp-in { from { transform: rotate(-14deg) scale(1.45); } to { transform: rotate(-3deg) scale(1); } }
@keyframes scx-slide { from { transform: translateX(16px); } to { transform: none; } }
@keyframes scx-rise { from { transform: translateY(10px); } to { transform: none; } }
@keyframes scx-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }
@keyframes scx-fill { from { transform: scaleX(0); } to { transform: none; } }
@keyframes scx-pulse { from { transform: scale(.9); } to { transform: scale(1.25); } }
.scx-bound__bar i { transform-origin: right center; }
@media (prefers-reduced-motion: reduce) {
  .scx *, .scx *::before, .scx *::after { animation: none !important; transition: none !important; }
}

/* ---------- compact desktop heights (stage only switches on if the tallest moment fits) ---------- */
@media (min-width: 1101px) and (max-height: 860px) {
  .scx-sticky { gap: .45rem; }
  .scx-tab { padding-bottom: .15rem; }
  .scx-tab__n { width: 30px; height: 30px; margin: 7px 0 .4rem; }
  .scx-wave { top: -4px; } /* node centre at 2 + 7 + 15 = 24px */
  .scx-tab b { line-height: 1.35; }
  .scx-tab small { line-height: 1.3; }
  .scx-scene { gap: .5rem; }
  .scx-body { gap: .55rem .9rem; }
  .scx-books .scx-lines td { padding-block: .2rem; }
  .scx-story { padding: .4rem .75rem; line-height: 1.6; }
  .scx-desk { padding: .5rem; }
  .scx-doc { gap: .5rem; padding: .8rem .95rem .6rem; }
  .scx-doc__head { padding-bottom: .45rem; }
  .scx-lines td { padding-block: .28rem; }
  .scx-witness { gap: .45rem; padding: .75rem .9rem; }
  .scx-books { gap: .3rem; padding: .5rem .6rem; }
  .scx-guard { padding: .35rem .6rem; line-height: 1.55; }
  .scx-ev li { line-height: 1.5; }
}

/* ---------- tablet / mobile ---------- */
@media (max-width: 1100px) {
  .scx-head { grid-template-columns: minmax(0, 1fr); }
  .scx-legend { grid-column: 1; grid-row: auto; display: flex; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .scx-body { grid-template-columns: minmax(0, 1fr); }
  .scx-desk::after { display: none; }
}
@media (max-width: 720px) {
  .scx { gap: .7rem; border-radius: 20px; }
  .scx-head { gap: .3rem; }
  .scx-head h4 { font-size: 1.15rem; line-height: 1.5; }
  .scx-lead { line-height: 1.7; }
  .scx-legend { gap: .3rem; }
  .scx-legend li { gap: .35rem; padding: .05rem .5rem; }
  .scx-sticky { gap: .5rem; }
  .scx-wave { display: none; }
  .scx-meter { display: grid; }
  .scx-tabs { gap: .3rem; }
  .scx-tab { gap: .15rem; min-height: 44px; padding: .3rem .1rem; border: 1px solid var(--line-2); border-radius: 12px; }
  .scx-tab__n { width: 28px; height: 28px; margin: 0; border-radius: 9px; font-size: .875rem; transform: none; }
  .scx-tab__n bdi { transform: none; }
  .scx-tab[aria-selected="true"] { border-color: var(--scx-gold); background: rgb(232 184 90 / .12); }
  .scx-tab[aria-selected="true"] .scx-tab__n { box-shadow: none; }
  .scx-tab small { display: none; }
  .scx-tab b { font-size: .875rem; line-height: 1.35; }
  .scx-story { font-size: .95rem; line-height: 1.7; }
  .scx-desk { padding: .4rem; border-radius: 16px; }
  .scx-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .scx-sum .is-grand { grid-column: 1 / -1; }
  .scx-tally > div { padding: .3rem .4rem; }
}
@media (max-width: 720px) {
  /* controls first (next to the tabs), the story line under them */
  .scx-line { flex-wrap: wrap; }
  .scx-ctrl { order: -1; margin-inline-start: auto; }
  .scx-story { flex-basis: 100%; }
}
@media (max-width: 440px) {
  .scx-fields { grid-template-columns: minmax(0, 1fr); }
  .scx-tally { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .scx-tally > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 .6rem; }
  .scx-lines { font-size: .875rem; }
  .scx-lines th, .scx-lines td { padding-inline: .2rem; }
  .scx-doc { padding: .85rem .7rem .65rem; }
  .scx-witness { padding: .75rem .7rem; }
  .scx-books { padding: .5rem .45rem; }
}
@media (max-width: 379px) {
  .scx-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* 320: two rows (3 + 2); 390 keeps one row */
}

/* W17-04 independent Chrome review: keep the long trial-balance witness readable without
   inflating every cell to multiple lines. Documentary material remains fully visible; no nested
   scroll surface, no hidden rows, no typography reduction. */
@media (min-width: 1101px) {
  .scx-books .scx-lines { table-layout: auto; }
  .scx-books .scx-lines th:first-child { width: 55%; }
  .scx-books .scx-lines th:not(:first-child) { width: 22.5%; }
  .scx-sticky { gap: .45rem; }
  .scx-witness { gap: .3rem; padding: .55rem .7rem; }
  .scx-books { gap: .2rem; padding: .35rem .5rem; }
  .scx-books .scx-lines td { padding-block: .14rem; }
  .scx-books .scx-lines th { padding-block: .15rem; }
  .scx-guard { padding: .22rem .45rem; line-height: 1.45; }
  .scx-ev { gap: .08rem; }
  .scx-ev li { line-height: 1.35; }
  .scx-mods { gap: .18rem; }
  .scx-mod { padding-inline: .45rem; }
}

/* W17-04C: short desktops (1536×820, 1440×800) measured the tallest moment at 760px against 696–716px of
   room, so stage.js fell back to manual and the wheel never advanced the sales story. Tighter spacing only:
   type stays ≥14px, tabs stay ≥44px, nothing hidden or clipped, no negative offsets. Tallest moment ≈685px.
   Ribbon: tab content 66px inside a 68px floor; node centre 0 + 3 + 14 = 17px = wave y 28 × 50/56 − 8. */
@media (min-width: 1101px) and (max-height: 860px) {
  .scx-sticky { gap: .25rem; }
  .scx-scene { gap: .2rem; }
  .scx-body { gap: .25rem; }
  .scx-desk { padding: .25rem; }
  .scx-desk::after { inset-inline-end: -.25rem; width: .25rem; } /* connector spans the narrower gap, never onto the witness */
  .scx-doc { gap: .3rem; padding: .55rem .7rem; }
  .scx-doc__head { padding-bottom: .2rem; }
  .scx-story { padding: .2rem .5rem; line-height: 1.35; }
  .scx-guard { padding: .15rem .4rem; line-height: 1.35; }
  .scx-ev li { line-height: 1.25; }
  .scx-witness { gap: .22rem; padding: .45rem .55rem; }
  .scx-tally > div { padding: .15rem .3rem; }
  .scx-tally dt, .scx-tally dd { line-height: 1.28; }
  .scx-books { padding: .3rem .4rem; }
  .scx-ribbon { min-height: 68px; }
  .scx-tab { gap: 0; padding: 0 .1rem .25rem; } /* keep the ID baselines inside each tab */
  .scx-tab__n { width: 28px; height: 28px; margin: 3px 0 .1rem; }
  .scx-wave { top: -8px; height: 50px; }
  .scx-tab b, .scx-tab small { line-height: 1.15; }
}

@media print {
  .scx-run::after { display: none !important; }
  .scx-sticky { position: static !important; }
}