/* 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 .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); }
.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); }
.dc .legs { list-style: none; margin: 0; padding: 0; }
.dc .legs li { display: grid; grid-template-columns: 1.4rem 4.6rem minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2) 0; font: 400 var(--text-meta)/1.45 var(--font-mono); border-bottom: 1px dashed var(--perf); }
.dc .legs .k { color: var(--ink-2); }
.dc .leg-bar { display: block; margin-top: var(--space-2); }
.dc .leg-bar.is-private { height: 10px; background: url("plates/static-full.png") 0 0 / 720px auto; image-rendering: pixelated; }
.dc .leg-bar.is-open { height: 3px; background: var(--ink); }
.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 .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; }
}
@media (prefers-reduced-motion: reduce) {
  .dc .plate .static { display: none; }
}