/* Dead channel: components for the website and the desk. Needs tokens.css first.
   Everything is scoped under .dc (put it on <body>). No inline style or script is needed,
   so it runs under the website's self-only CSP. Rules: design/README.md. */

/* ───────── base ───────── */
.dc { margin: 0; background: var(--night); color: var(--fg); font: 400 var(--text-body)/var(--leading) var(--font-sans); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
.dc *, .dc *::before, .dc *::after { box-sizing: border-box; }
.dc [hidden] { display: none !important; }
.dc a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.dc a:hover { text-decoration-thickness: 2px; }
.dc :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.dc .printout :focus-visible { outline-color: var(--ink); }
.dc ::selection { background: var(--fg); color: var(--night); }
.dc .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dc .skip { position: absolute; left: var(--space-4); top: -100px; z-index: 60; background: var(--fg); color: var(--night); padding: var(--space-2) var(--space-4); font: 500 var(--text-meta)/1.2 var(--font-sans); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.dc .skip:focus { top: var(--space-4); }
.dc .cond { font-family: var(--font-cond); }
.dc .mono { font-family: var(--font-mono); }

/* ───────── layout ───────── */
.dc .wrap { width: min(var(--page), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.dc .sec { padding: var(--section) 0; border-top: 1px solid var(--line); }
.dc .hero + .sec { border-top: 0; }
.dc .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 104px); align-items: center; }
.dc .split.is-top { align-items: start; }
.dc .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }

/* ───────── type ───────── */
.dc .h1 { font: 600 var(--text-h1)/1.04 var(--font-cond); letter-spacing: -.004em; margin: 0; max-width: 16ch; text-wrap: balance; }
.dc .h2 { font: 600 var(--text-h2)/var(--leading-tight) var(--font-cond); margin: 0 0 var(--space-5); max-width: 17ch; text-wrap: balance; }
.dc .h3 { font: 600 var(--text-h3)/1.15 var(--font-cond); margin: var(--space-6) 0 var(--space-3); }
.dc .lede { font-size: var(--text-lede); color: var(--fg-2); margin: var(--space-5) 0 0; max-width: 46ch; }
.dc .body p { color: var(--fg-2); margin: 0 0 1em; max-width: 54ch; }
.dc .body .statement { color: var(--fg); font-weight: 500; font-size: var(--text-statement); }
.dc .label { display: block; font: 500 var(--text-meta)/1.4 var(--font-cond); color: var(--fg-2); margin: 0 0 var(--space-3); }
.dc .quote { font: 500 var(--text-quote)/1.2 var(--font-cond); margin: 0; max-width: 24ch; overflow-wrap: anywhere; }
.dc .caption { font-size: var(--text-caption); color: var(--fg-2); margin: var(--space-5) 0 0; }

/* ───────── wordmark: Doto, the only place it appears besides the boards ───────── */
.dc .wordmark { font: 800 var(--text-dot-m)/1 var(--font-dot); letter-spacing: .02em; color: var(--fg); text-decoration: none; }
.dc .wordmark.is-board { font-size: var(--text-board); line-height: .9; margin: 0 0 var(--space-6); }
.dc .wordmark.is-empty { display: block; font-size: var(--text-dot-l); margin: 0 0 var(--space-5); }
.dc .wordmark.is-foot { font-size: 30px; }

/* ───────── marks: squares only. Hollow = waiting, filled = done or on, static = hidden or unknown, sodium = live ───────── */
.dc .mark { display: inline-block; flex: none; width: 12px; height: 12px; border: 2px solid var(--fg); vertical-align: -1px; }
.dc .mark.is-small { width: 8px; height: 8px; border-width: 1.5px; border-color: currentColor; vertical-align: 0; }
.dc .mark.is-on { background: var(--fg); border-color: var(--fg); }
.dc .mark.is-static { border-color: var(--fg-2); background: url("plates/static-full.png") 0 0 / 480px auto; image-rendering: pixelated; }
.dc .mark.is-live { border-color: var(--sodium); background: var(--sodium); }
/* A check's result, in whole pixels (12 px, on night and slate): ticked = it passed, the tick cut out of a
   filled square; crossed = it failed, a cross in a hollow one. A check that could not run is static. */
.dc .mark.is-ticked, .dc .mark.is-crossed { --px: linear-gradient(var(--fg), var(--fg)); background-repeat: no-repeat; background-origin: border-box; }
.dc .mark.is-ticked { --px: linear-gradient(var(--night), var(--night)); background-color: var(--fg); background-size: 2px 2px;
  background-image: var(--px), var(--px), var(--px), var(--px), var(--px), var(--px), var(--px);
  background-position: 2px 5px, 3px 6px, 4px 7px, 5px 6px, 6px 5px, 7px 4px, 8px 3px; }
.dc .mark.is-crossed { background-size: 1px 1px;
  background-image: var(--px), var(--px), var(--px), var(--px), var(--px), var(--px), var(--px), var(--px), var(--px), var(--px), var(--px), var(--px);
  background-position: 3px 3px, 4px 4px, 5px 5px, 6px 6px, 7px 7px, 8px 8px, 8px 3px, 7px 4px, 6px 5px, 5px 6px, 4px 7px, 3px 8px; }
.dc .printout .mark { border-color: var(--ink); }
.dc .printout .mark.is-small { border-color: currentColor; }
.dc .printout .mark.is-on { background: var(--ink); border-color: var(--ink); }
.dc .status { display: inline-flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-caption); color: var(--fg-2); }
.dc .status b { color: var(--fg); font-weight: 500; }

/* ───────── buttons: on night a line around a word; on paper, Sign plus any secondary actions ───────── */
.dc .btn { font: 400 var(--text-meta)/1.2 var(--font-sans); color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: 0; padding: var(--space-2) var(--space-4); min-height: var(--control); cursor: pointer; white-space: nowrap; }
.dc .btn:hover { border-color: var(--fg-2); }
.dc .btn.is-strong { border-color: var(--fg-2); font-size: var(--text-small); padding: 0 var(--space-5); }
.dc .btn.is-strong:hover { border-color: var(--fg); }
.dc .btn[aria-disabled="true"], .dc .btn:disabled { color: var(--fg-2); border-style: dashed; cursor: default; }
.dc .sign { display: block; width: 100%; margin: var(--space-5) 0 0; font: 500 var(--text-body)/1.2 var(--font-sans); color: var(--paper); background: var(--ink); border: 0; border-radius: 0; min-height: var(--control-l); cursor: pointer; }
.dc .sign:hover { background: var(--ink-hover); }
.dc .sign[aria-disabled="true"], .dc .sign:disabled { background: var(--perf); color: var(--ink); cursor: default; }
.dc .printout .btn { color: var(--ink); border-color: var(--perf); }
.dc .printout .btn:hover { border-color: var(--ink); }
.dc .printout .btn[aria-disabled="true"], .dc .printout .btn:disabled { color: var(--ink-2); }
.dc .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; }

/* ───────── notices: a note informs, an alert stops you, working shows that something runs ───────── */
.dc .note { display: flex; gap: var(--space-3); align-items: baseline; font-size: var(--text-caption); color: var(--fg-2); margin: 0; max-width: var(--measure); overflow-wrap: anywhere; }
.dc .alert { background: var(--fg); color: var(--night); padding: var(--space-3) var(--space-4); font-size: var(--text-small); margin: 0; max-width: var(--measure); overflow-wrap: anywhere; }
.dc .alert b { font-weight: 500; }
.dc .working { display: inline-flex; gap: var(--space-3); align-items: baseline; font-size: var(--text-caption); color: var(--fg-2); }
.dc .working .mono { font-size: var(--text-mono-s); }
.dc .note:empty, .dc .alert:empty, .dc .working:empty { display: none; }
.dc .printout .status, .dc .printout .note, .dc .printout .working { color: var(--ink-2); }
.dc .printout .status b { color: var(--ink); }

/* ───────── plate, static and the hero board ───────── */
.dc .hero { position: relative; overflow: hidden; }
.dc .plate { position: relative; width: max(100%, 1080px); left: 50%; transform: translateX(-50%) scaleX(-1); aspect-ratio: 480 / 210; background: url("plates/harbour-night.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.dc .plate .static { position: absolute; inset: 0; background: url("plates/static-full.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; -webkit-mask-size: calc(100% / 60) calc(100% / 26.25); mask-size: calc(100% / 60) calc(100% / 26.25); }
.dc .board { position: absolute; left: clamp(20px, 6vw, 104px); top: clamp(20px, 8%, 84px); width: min(620px, calc(100% - 40px)); background: var(--night); border: 1px solid var(--line); padding: clamp(24px, 2.4vw, 36px) clamp(24px, 2.6vw, 40px); }
.dc .board .status { display: flex; margin: 0 0 var(--space-5); }
.dc .band { width: 100%; image-rendering: pixelated; }
.dc .band.is-down { height: 24px; background: url("plates/static-band-down.png") 0 0 / 100% 100% no-repeat; }
.dc .band.is-up { aspect-ratio: 480 / 40; background: url("plates/static-band-up.png") 0 0 / 100% 100% no-repeat; }

/* ───────── printout: continuous-form paper. Paper means you can sign it now ───────── */
.dc .printout { position: relative; color: var(--ink); padding: var(--space-7) 52px var(--space-6);
  background:
    radial-gradient(circle at 13px 14px, var(--night) 0 4.4px, transparent 5px) left top / 26px 28px repeat-y,
    radial-gradient(circle at 13px 14px, var(--night) 0 4.4px, transparent 5px) right top / 26px 28px repeat-y,
    repeating-linear-gradient(to bottom, var(--paper) 0 84px, var(--bar) 84px 168px); }
.dc .printout::before, .dc .printout::after { content: ""; position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--perf); }
.dc .printout::before { left: 31px; }
.dc .printout::after { right: 31px; }
.dc .printout-head { display: flex; justify-content: space-between; gap: var(--space-3); font: 500 var(--text-mono-s)/1.4 var(--font-mono); color: var(--ink-2); border-bottom: 1px dashed var(--perf); padding-bottom: var(--space-3); margin: 0 0 var(--space-4); }
.dc .printout-title { font: 600 var(--text-title)/1.15 var(--font-cond); margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.dc .printout-lead { font-size: var(--text-meta); color: var(--ink-2); margin: 0 0 var(--space-4); overflow-wrap: anywhere; }
.dc .amounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) 0; border-top: 1px dashed var(--perf); border-bottom: 1px dashed var(--perf); }
.dc .amounts > :only-child { grid-column: 1 / -1; }
.dc .amounts .k { display: block; font: 400 var(--text-mono-s)/1.4 var(--font-mono); color: var(--ink-2); }
.dc .amounts .v { display: block; font: 500 var(--text-amount)/1.2 var(--font-mono); letter-spacing: -.02em; overflow-wrap: anywhere; }
.dc .facts { margin: 0; font: 400 var(--text-mono)/1.5 var(--font-mono); }
.dc .facts div { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: var(--space-3); padding: 5px 0; }
.dc .facts dt { color: var(--fg-2); }
.dc .facts dd { margin: 0; overflow-wrap: anywhere; }
.dc .printout .facts dt { color: var(--ink-2); }
.dc .exact { margin: var(--space-3) 0 0; font: 400 var(--text-mono)/1.4 var(--font-mono); }
.dc .exact summary { cursor: pointer; padding: var(--space-3) 0; font-weight: 500; }
.dc .exact p { margin: var(--space-1) 0 0; font-size: var(--text-mono-s); line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.dc .printout-note { font-size: var(--text-mono-s); color: var(--ink-2); margin: var(--space-3) 0 0; }
.dc .check { border-left: 4px solid var(--ink); padding: var(--space-1) 0 var(--space-1) var(--space-3); margin: var(--space-4) 0 0; font: 500 var(--text-caption)/1.45 var(--font-sans); overflow-wrap: anywhere; }
.dc .printout input { font: 400 var(--text-mono)/1.2 var(--font-mono); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 0; padding: var(--space-2) var(--space-3); width: 7rem; min-height: var(--control); }
/* A plan drawn as a route (the website): a note over each leg, then the stops on the same columns,
   each named under its square. The private leg is static, the open leg a solid bar. The plan is its own
   container, so it reads its own width, not the window's (the rule at the end of this file). */
.dc .plan-view { container: plan-view / inline-size; }
.dc .plan-notes, .dc .plan-route { display: grid; grid-template-columns: 22px minmax(0, 4fr) 22px minmax(0, 5fr) 22px; }
.dc .plan-notes { margin: 0 0 var(--space-3); font: 400 var(--text-mono)/1.4 var(--font-mono); color: var(--ink-2); }
.dc .plan-notes p { margin: 0; padding-right: var(--space-3); text-wrap: balance; }
.dc .plan-notes p:first-child { grid-column: 2; }
.dc .plan-notes p:last-child { grid-column: 4; }
.dc .plan-notes b { display: block; font-weight: 500; color: var(--ink); }
.dc .plan-route { align-items: center; padding-bottom: var(--space-8); }
.dc .plan-stop { position: relative; display: block; }
.dc .plan-stop span { position: absolute; top: calc(100% + var(--space-2)); white-space: nowrap; font: 500 var(--text-small)/1.3 var(--font-mono); }
.dc .plan-stop:first-child span { left: 0; }
.dc .plan-stop:nth-child(3) span { left: 50%; transform: translateX(-50%); text-align: center; }
.dc .plan-stop:last-child span { right: 0; text-align: right; }
.dc .plan-node { display: block; width: 22px; height: 22px; border: 2px solid var(--ink); }
.dc .plan-node.is-on { background: var(--ink); }
.dc .plan-leg { height: 4px; background: var(--ink); }
.dc .plan-leg.is-private { height: 12px; background: url("plates/static-full.png") 0 0 / 1440px auto; image-rendering: pixelated; }
.dc .sigline { display: flex; align-items: end; gap: var(--space-4); margin-top: var(--space-6); }
.dc .sigline span { flex: 1; border-bottom: 1.5px solid var(--ink); height: 28px; }
.dc .sigline b { font: 500 var(--text-caption) var(--font-sans); }
/* A carbon copy: a review that can no longer be signed. It stops being paper. */
.dc .printout.is-carbon { color: var(--fg); background:
    radial-gradient(circle at 13px 14px, var(--night) 0 4.4px, transparent 5px) left top / 26px 28px repeat-y,
    radial-gradient(circle at 13px 14px, var(--night) 0 4.4px, transparent 5px) right top / 26px 28px repeat-y,
    var(--slate); outline: 1px dashed var(--line); outline-offset: -1px; }
.dc .printout.is-carbon::before, .dc .printout.is-carbon::after { border-color: var(--line); }
.dc .printout.is-carbon .printout-head, .dc .printout.is-carbon .amounts { border-color: var(--line); color: var(--fg-2); }
.dc .printout.is-carbon .printout-lead, .dc .printout.is-carbon .facts dt, .dc .printout.is-carbon .amounts .k,
.dc .printout.is-carbon .exact p, .dc .printout.is-carbon .printout-note,
.dc .printout.is-carbon .status, .dc .printout.is-carbon .note, .dc .printout.is-carbon .working { color: var(--fg-2); }
.dc .printout.is-carbon .status b { color: var(--fg); }
.dc .printout.is-carbon .mark { border-color: var(--fg); }
.dc .printout.is-carbon .mark.is-small { border-color: currentColor; }
.dc .printout.is-carbon .mark.is-on { background: var(--fg); border-color: var(--fg); }
.dc .printout.is-carbon .btn { color: var(--fg); border-color: var(--line); }
.dc .printout.is-carbon .alert { margin: var(--space-4) 0 0; }
.dc .printout.is-carbon :focus-visible { outline-color: var(--fg); }

/* ───────── website: diagrams, transcript, departures, footer ───────── */
.dc .dia { display: block; width: 100%; height: auto; background: var(--slate); border: 1px solid var(--line); }
.dc .dia .s { stroke: var(--fg); stroke-width: 2; fill: none; shape-rendering: crispEdges; }
.dc .dia .s.is-thick { stroke-width: 4; }
.dc .dia .s.is-filled { fill: var(--fg); }
.dc .dia .f { fill: var(--fg); }
.dc .dia .d { stroke: var(--fg-2); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; shape-rendering: crispEdges; }
.dc .dia text { font: 500 var(--text-diagram) var(--font-mono); fill: var(--fg-2); }
.dc .dia .t1 { fill: var(--fg); }
.dc .dia .t2 { fill: var(--night); }
.dc .trio .h3 { margin-top: var(--space-6); }
.dc .trio p { color: var(--fg-2); margin: 0 0 .8em; font-size: var(--text-small); }
.dc .trio dl { margin: var(--space-4) 0 0; }
.dc .trio dt { font-weight: 500; font-size: var(--text-meta); }
.dc .trio dd { margin: 0 0 var(--space-3); color: var(--fg-2); font-size: var(--text-meta); }
/* A chat: 0zk on the left behind a thin rule, leaning 2.5deg (the sans ships no italic, and Chromium
   will not synthesize a small oblique); your turns (.is-you) offset right in a slate box. */
.dc .transcript { display: flex; flex-direction: column; gap: var(--space-6); margin: var(--space-9) 0 0; max-width: 760px; font-size: var(--text-transcript); }
.dc .transcript div { align-self: flex-start; max-width: min(46ch, 88%); }
.dc .transcript dt { font: 500 var(--text-meta)/1.4 var(--font-cond); color: var(--fg-2); margin: 0 0 var(--space-2); }
.dc .transcript dd { margin: 0; overflow-wrap: anywhere; border-left: 2px solid var(--edge); padding-left: var(--space-4); transform: skewX(-2.5deg); transform-origin: 0 100%; }
.dc .transcript .is-you { align-self: flex-end; }
.dc .transcript .is-you dt { text-align: right; }
.dc .transcript .is-you dd { transform: none; background: var(--slate); border: 1px solid var(--line); padding: var(--space-3) var(--space-4); }
.dc .split > .transcript { margin: 0; }
.dc .departures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: var(--space-14) 0 0; background: var(--line); border: 1px solid var(--line); }
.dc .departures > div { background: var(--night); padding: var(--space-5) var(--space-6); }
.dc .departures h3 { display: flex; align-items: center; gap: var(--space-3); font: 800 var(--text-dot-m)/1.1 var(--font-dot); letter-spacing: .02em; margin: 0 0 var(--space-3); }
.dc .departures p { margin: 0; color: var(--fg-2); font-size: var(--text-small); }
.dc .foot { display: grid; grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 3fr)); gap: var(--space-8); padding: var(--space-14) 0 var(--space-6); border-top: 1px solid var(--line); }
.dc .foot p, .dc .foot li { color: var(--fg-2); font-size: var(--text-meta); margin: 0 0 var(--space-2); }
.dc .foot h4 { font: 600 var(--text-meta)/1.4 var(--font-cond); margin: var(--space-1) 0 var(--space-3); }
.dc .foot ul { list-style: none; margin: 0; padding: 0; }
.dc .foot .wordmark + p { margin-top: var(--space-3); }
.dc .legal { display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; font-size: var(--text-caption); color: var(--fg-2); padding: 0 0 var(--space-6); }

/* ───────── desk: .app > .bar, .band, .work > .thread, .rail, .compose ───────── */
.dc .app { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.dc .bar { display: flex; align-items: center; gap: var(--space-7); padding: var(--space-3) clamp(16px, 2.6vw, 32px); }
.dc .where { display: flex; gap: var(--space-4); align-items: baseline; font-size: var(--text-meta); color: var(--fg-2); }
.dc .where b { color: var(--fg); font-weight: 500; }
.dc .bar-r { margin-left: auto; display: flex; gap: var(--space-2); }
.dc .work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(var(--rail-min), var(--rail-max)); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "thread rail" "compose rail"; min-height: 0; }
.dc .thread { grid-area: thread; min-height: 0; overflow: auto; padding: var(--space-8) clamp(16px, 5vw, 80px) var(--space-6); }
.dc .msg { max-width: var(--measure); margin: 0 0 var(--space-7); overflow-wrap: anywhere; }
.dc .msg .label { font-size: var(--text-caption); margin: 0 0 var(--space-1); }
.dc .msg p { margin: 0; }
.dc .msg .text { white-space: pre-wrap; }
.dc .msg > .note, .dc .msg > .alert, .dc .msg > .balances { margin-top: var(--space-3); }
.dc .trace { display: flex; gap: var(--space-3); align-items: baseline; font: 400 var(--text-mono-s)/1.55 var(--font-mono); color: var(--fg-2); margin: calc(-1 * var(--space-3)) 0 var(--space-7); max-width: 62ch; overflow-wrap: anywhere; }
.dc .trace::before { content: ""; flex: none; width: 10px; height: 10px; background: url("plates/static-full.png") 0 0 / 480px auto; image-rendering: pixelated; transform: translateY(1px); }
.dc .plan { list-style: none; margin: calc(-1 * var(--space-2)) 0 var(--space-7); padding: 0; max-width: var(--measure); }
.dc .plan li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: 10px 0; font-size: var(--text-small); position: relative; }
.dc .plan li .mark { justify-self: center; }
.dc .plan li + li::after { content: ""; position: absolute; left: 10px; top: -14px; height: 24px; border-left: 2px dashed var(--fg-2); }
.dc .plan .st { font: 400 var(--text-mono-s) var(--font-mono); color: var(--fg-2); }
.dc .plan .is-ready .st { color: var(--fg); }
.dc .empty-state { max-width: var(--measure); padding-top: var(--space-3); }
.dc .empty-state h1, .dc .empty-state h2 { font: 600 var(--text-empty)/1.1 var(--font-cond); margin: 0 0 var(--space-4); }
.dc .empty-state p { color: var(--fg-2); margin: 0 0 var(--space-3); }
.dc .compose { grid-area: compose; padding: var(--space-4) clamp(16px, 5vw, 80px) var(--space-5); }
.dc .compose-row { display: flex; gap: var(--space-3); align-items: stretch; }
.dc .compose textarea { flex: 1; min-width: 0; font: 400 var(--text-body)/1.45 var(--font-sans); color: var(--fg); background: var(--slate); border: 1px solid var(--edge); border-radius: 0; padding: var(--space-3) var(--space-4); min-height: var(--control-l); resize: none; caret-color: var(--sodium); }
.dc .compose textarea::placeholder { color: var(--fg-2); }
.dc .compose textarea:focus { outline: 2px solid var(--fg-2); outline-offset: 0; }
.dc .compose-foot { font-size: var(--text-caption); color: var(--fg-2); margin: var(--space-2) 0 0; }
.dc .rail { grid-area: rail; min-height: 0; padding: var(--space-8) clamp(16px, 2.4vw, 32px); overflow: auto; background: var(--slate); border-left: 1px solid var(--line); }
.dc .rail-h { font: 600 var(--text-small)/1.4 var(--font-cond); margin: 0; }
.dc .rail-s { font-size: var(--text-caption); color: var(--fg-2); margin: 2px 0 var(--space-4); }
.dc .rail-none { font-size: var(--text-meta); color: var(--fg-2); margin: var(--space-2) 0 0; max-width: 34ch; }
.dc .rail .printout + .printout { margin-top: var(--space-6); }
.dc .balances { background: var(--slate); border: 1px solid var(--line); padding: var(--space-4) var(--space-5); max-width: var(--measure); }
.dc .balances .label { margin: 0 0 var(--space-2); font-size: var(--text-caption); }
.dc .balances .note { margin-top: var(--space-3); }
.dc .lines { list-style: none; margin: 0; padding: 0; font: 400 var(--text-mono-s)/1.5 var(--font-mono); }
.dc .lines li { padding: var(--space-1) 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* ───────── drawer: account and activity. Modal: the page behind is inert while it is open ───────── */
.dc .scrim { position: fixed; inset: 0; background: rgba(13, 17, 19, .6); z-index: 40; }
.dc .drawer { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--slate); border-left: 1px solid var(--line); }
.dc .drawer-head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-4); padding: var(--space-6); border-bottom: 1px solid var(--line); }
.dc .drawer-head h2 { font: 600 var(--text-h3)/1.15 var(--font-cond); margin: 0; }
.dc .drawer-head p { margin: var(--space-1) 0 0; font-size: var(--text-caption); color: var(--fg-2); }
.dc .drawer-body { overflow: auto; padding: var(--space-2) var(--space-6) var(--space-8); }
.dc .drawer-body h3 { font: 600 var(--text-meta)/1.4 var(--font-cond); margin: var(--space-6) 0 var(--space-3); }
.dc .activity { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dc .activity > * { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.dc .activity .mark { margin-top: 5px; justify-self: center; }
.dc .activity strong { display: block; font-weight: 500; font-size: var(--text-small); overflow-wrap: anywhere; }
.dc .activity .facts { font-size: var(--text-mono-s); margin-top: var(--space-1); }
.dc .activity .facts div { grid-template-columns: 4.6rem minmax(0, 1fr); padding: 2px 0; }
.dc .activity .btn { margin-top: var(--space-3); padding: var(--space-1) var(--space-3); font-size: var(--text-caption); }

/* ───────── responsive and motion ───────── */
@media (max-width: 1100px) {
  /* One scroll area: the thread, then the rail; the composer stays pinned at the bottom. */
  .dc .work { display: flex; flex-direction: column; overflow: auto; scroll-padding-bottom: var(--compose-h); }
  .dc .thread, .dc .rail { flex: none; overflow: visible; }
  .dc .rail { border-left: 0; border-top: 1px solid var(--line); }
  .dc .compose { position: sticky; bottom: 0; z-index: 2; margin-top: auto; background: var(--night); border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .dc .split, .dc .trio, .dc .departures, .dc .foot { grid-template-columns: 1fr; }
  .dc .board { position: relative; left: auto; top: auto; width: auto; margin: -64px 16px 0; }
  .dc .bar { gap: var(--space-4); flex-wrap: wrap; }
  .dc .where > :not(:first-child) { display: none; }
}
/* A plan reads its own width. Under 420 px the middle name hangs from its square, like the first (centred,
   it would meet the first name). Under 340 px (a phone, and the website's split below about 960 px) the notes
   stack and each name wraps under its square. Any wider it is the deck's route, whatever the window. */
@container plan-view (max-width: 420px) {
  .dc .plan-stop:nth-child(3) span { left: 0; transform: none; text-align: left; }
}
@container plan-view (max-width: 340px) {
  .dc .plan-notes { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .dc .plan-notes p:first-child, .dc .plan-notes p:last-child { grid-column: 1; padding-right: 0; }
  .dc .plan-route { padding-bottom: var(--space-12); }
  .dc .plan-stop span { white-space: normal; font-size: var(--text-mono-s); }
}
@media (prefers-reduced-motion: reduce) {
  .dc .plate .static { display: none; }
}