/* ccc — T-card planning rack. Steel panel, slotted stations, card stock by source. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  /* steel panel */
  --panel: #cfd4d6;
  --panel-deep: #c1c7ca;
  --slot-line: rgb(38 48 54 / 0.16);
  --slot-shade: rgb(38 48 54 / 0.07);
  --frame: #aab2b6;
  /* printed strips + paper */
  --strip: #fbfbf8;
  --paper: #fbfbf8;
  --ink: #1d2327;
  --ink-2: #414b51;
  --ink-3: #5a646a;
  /* card stock */
  --stock-claude: #ecca7c;
  --stock-codex: #a3c7e8;
  --stock-mail: #f3bccb;
  --stock-manual: #fbfbf6;
  --stock-edge: rgb(29 35 39 / 0.22);
  /* riders */
  --rider-go: #23874d;
  --rider-stop: #c8321f;
  --rider-fail: #7d1f14;
  --stop: #c8321f;
  --stop-ink: #fff;
  --done: #1f6b44;
  --focus: #1d2327;
  --lift: 0 0.35em 0.9em rgb(29 35 39 / 0.22), 0 0.08em 0.2em rgb(29 35 39 / 0.18);
  --rest: 0 0.06em 0.12em rgb(29 35 39 / 0.2);
  /* rhythm */
  --head-h: 4.75rem;
  --pitch: 5.35rem;
  --gap: 0.6rem;
  --radius: 3px;
  --rail-h: 3.6rem;
  font-size: clamp(15px, 0.34vw + 10.6px, 24px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --panel: #262c2f;
    --panel-deep: #1f2427;
    --slot-line: rgb(0 0 0 / 0.42);
    --slot-shade: rgb(255 255 255 / 0.025);
    --frame: #3a4246;
    --strip: #e4e6e0;
    --paper: #eceee8;
    --stock-claude: #d4b46a;
    --stock-codex: #8fb2d2;
    --stock-mail: #d9a6b4;
    --stock-manual: #e6e8e2;
    --lift: 0 0.4em 1.1em rgb(0 0 0 / 0.55), 0 0.08em 0.2em rgb(0 0 0 / 0.4);
    --rest: 0 0.06em 0.14em rgb(0 0 0 / 0.5);
    --focus: #f1f2ee;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --panel: #262c2f;
  --panel-deep: #1f2427;
  --slot-line: rgb(0 0 0 / 0.42);
  --slot-shade: rgb(255 255 255 / 0.025);
  --frame: #3a4246;
  --strip: #e4e6e0;
  --paper: #eceee8;
  --stock-claude: #d4b46a;
  --stock-codex: #8fb2d2;
  --stock-mail: #d9a6b4;
  --stock-manual: #e6e8e2;
  --lift: 0 0.4em 1.1em rgb(0 0 0 / 0.55), 0 0.08em 0.2em rgb(0 0 0 / 0.4);
  --rest: 0 0.06em 0.14em rgb(0 0 0 / 0.5);
  --focus: #f1f2ee;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--panel);
  color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
::selection { background: var(--stock-claude); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 1.15em; height: 1.15em; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* scrollbars: thin steel */
* { scrollbar-width: thin; scrollbar-color: var(--frame) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--frame); border-radius: 4px; }

/* ── top rail ─────────────────────────────────────────────── */
.rail {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--rail-h);
  padding: 0.55rem 1.25rem;
  background: var(--panel-deep);
  border-bottom: 1px solid var(--frame);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rail { color: #e9ebe6; } }
:root[data-theme="dark"] .rail { color: #e9ebe6; }

.mark {
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}
.rail-summary {
  display: flex;
  gap: 1.1rem;
  align-items: baseline;
  font-size: 0.93rem;
  white-space: nowrap;
  overflow: hidden;
}
.rail-summary .sum { display: inline-flex; align-items: baseline; gap: 0.35em; }
.rail-summary b { font-weight: 700; font-size: 1.1rem; }
.rail-summary .sum-stop {
  background: var(--stop);
  color: var(--stop-ink);
  padding: 0.12em 0.55em 0.16em;
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
}
.rail-summary .sum-stop[data-zero] { background: transparent; color: inherit; padding: 0; cursor: default; }
.rail-tools { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; }

.filters { display: flex; gap: 0.25rem; padding: 0.2rem; background: var(--panel); border-radius: 5px; border: 1px solid var(--frame); }
.filters button {
  display: inline-flex; align-items: center; gap: 0.4em;
  border: 0; background: transparent; padding: 0.3em 0.7em; border-radius: var(--radius);
  font-size: 0.9rem; min-height: 2.1rem; color: inherit;
}
.filters button:hover { background: rgb(128 138 143 / 0.18); }
.filters button[aria-checked="true"] { background: var(--strip); color: var(--ink); box-shadow: var(--rest); font-weight: 600; }
.stock { width: 0.8em; height: 0.8em; border-radius: 2px; border: 1px solid var(--stock-edge); display: inline-block; }
.stock-claude { background: var(--stock-claude); }
.stock-codex { background: var(--stock-codex); }
.stock-mail { background: var(--stock-mail); }
.stock-manual { background: var(--stock-manual); }

.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 0.6em; color: var(--ink-3); pointer-events: none; }
.search input {
  width: 12rem; min-height: 2.35rem; padding: 0.3em 0.7em 0.3em 2.1em;
  background: var(--paper); color: var(--ink); border: 1px solid var(--frame); border-radius: var(--radius);
}
.search input::placeholder { color: var(--ink-3); }

.btn {
  display: inline-flex; align-items: center; gap: 0.45em;
  min-height: 2.35rem; padding: 0.3em 0.9em; border-radius: var(--radius);
  border: 1px solid var(--frame); background: transparent; color: inherit; font-weight: 600; font-size: 0.93rem;
  transition: background-color 140ms ease-out, box-shadow 140ms ease-out;
}
.btn:hover { background: rgb(128 138 143 / 0.18); }
.btn-card { background: var(--stock-manual); color: var(--ink); border-color: var(--stock-edge); box-shadow: var(--rest); }
.btn-card:hover { background: var(--paper); box-shadow: var(--lift); }
.btn-stop { background: var(--stop); color: var(--stop-ink); border-color: transparent; }
.btn-stop:hover { background: #a92816; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── rack + stations ─────────────────────────────────────── */
.rack {
  display: grid;
  grid-auto-flow: column;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem 0.6rem;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.station {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  min-height: 0;
  background: var(--panel-deep);
  border: 1px solid var(--frame);
  border-radius: 4px;
  box-shadow: inset 0 1px 3px var(--slot-line);
}
.strip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.45rem 0.45rem 0;
  padding: 0.4rem 0.75rem;
  background: var(--strip);
  color: var(--ink);
  border-radius: 2px;
  box-shadow: var(--rest);
  min-height: 3rem;
}
.strip h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 650;
  font-stretch: 78%;
  letter-spacing: 0.005em;
  line-height: 1.1;
  text-wrap: balance;
}
.strip .count {
  margin-left: auto;
  font-size: 1.6rem;
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1;
}
.strip .fold {
  border: 0; background: transparent; padding: 0.2rem; margin: -0.2rem -0.3rem -0.2rem 0; border-radius: var(--radius);
  color: var(--ink-3); display: inline-flex;
}
.strip .fold:hover { color: var(--ink); background: rgb(29 35 39 / 0.08); }

.station[data-tone="stop"] .strip { background: var(--stop); color: var(--stop-ink); }
.station[data-tone="stop"] .strip .count { font-size: 2.2rem; }
.station[data-tone="stop"] .strip .fold { color: var(--stop-ink); }
.station[data-tone="stop"] .strip .fold:hover { background: rgb(255 255 255 / 0.18); }
.station[data-tone="stop"] { border-color: color-mix(in srgb, var(--stop) 55%, var(--frame)); }
.station[data-tone="go"] .strip h2::before,
.station[data-tone="done"] .strip h2::before {
  content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.45em; border-radius: 1px;
  vertical-align: 0.08em;
}
.station[data-tone="go"] .strip h2::before { background: var(--rider-go); }
.station[data-tone="done"] .strip h2::before { background: var(--done); }
.station[data-tone="quiet"] .strip { background: color-mix(in srgb, var(--strip) 70%, var(--panel-deep)); }
.station[data-tone="info"] .strip { background: var(--stock-codex); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .station[data-tone="quiet"] .strip { background: #3a4246; color: #e9ebe6; } }
:root[data-theme="dark"] .station[data-tone="quiet"] .strip { background: #3a4246; color: #e9ebe6; }

/* slots: the rails every card head sits on */
.slots {
  list-style: none;
  margin: 0;
  padding: 0.95rem 0.55rem 1rem;
  overflow-y: auto;
  min-height: 0;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--pitch) - 3px),
    var(--slot-line) calc(var(--pitch) - 3px), var(--slot-line) calc(var(--pitch) - 1px),
    var(--slot-shade) calc(var(--pitch) - 1px), var(--slot-shade) var(--pitch));
  background-position: 0 0.95rem;
  background-attachment: local;
}
.slots > li { height: var(--pitch); position: relative; }
.slots > li:last-child { height: auto; }
.station[data-spread] .slots { background-image: none; padding-bottom: 1rem; }
.station[data-spread] .slots > li { height: auto; margin-bottom: var(--gap); }

.empty {
  margin: 1.2rem 0.4rem;
  color: var(--ink-3);
  font-size: 0.93rem;
  line-height: 1.45;
  max-width: 22ch;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .empty { color: #a6afb3; } }
:root[data-theme="dark"] .empty { color: #a6afb3; }

/* collapsed station: a narrow closed drawer */
.station[data-collapsed] { grid-template-rows: 1fr; }
.station[data-collapsed] .strip {
  writing-mode: vertical-rl;
  margin: 0.45rem;
  padding: 0.75rem 0.4rem;
  min-height: 0;
  height: calc(100% - 0.9rem);
  cursor: pointer;
  border: 0;
  font: inherit;
  justify-content: flex-start;
}
.station[data-collapsed] .strip .count { margin: 0.6rem 0 0; font-size: 1.3rem; }
.station[data-collapsed] .slots { display: none; }

/* ── T-card ───────────────────────────────────────────────── */
.tcard {
  --stock: var(--stock-manual);
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  z-index: 0;
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tcard[data-source="claude"] { --stock: var(--stock-claude); }
.tcard[data-source="codex"] { --stock: var(--stock-codex); }
.tcard[data-source="mail"] { --stock: var(--stock-mail); }

.tcard-head {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.18rem;
  height: var(--head-h);
  padding: 0.5rem 0.7rem 0.5rem;
  background: var(--stock);
  border: 1px solid var(--stock-edge);
  border-radius: var(--radius) var(--radius) 1px 1px;
  box-shadow: var(--rest);
}
.tcard-line {
  display: flex; align-items: baseline; gap: 0.5em;
  font-size: 0.8rem; color: var(--ink-2); line-height: 1.2; height: 1.2em;
  white-space: nowrap; overflow: hidden;
}
.tcard-line .src { font-weight: 700; color: var(--ink); font-stretch: 85%; }
.tcard-line .who { overflow: hidden; text-overflow: ellipsis; }
.tcard-line .age { margin-left: auto; flex: none; }

.tcard-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 620;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* the narrow T body, tucked behind the next card's head */
.tcard-body {
  margin: -1px 7% 0;
  padding: 0.5rem 0.65rem 0.6rem;
  background: var(--stock);
  border: 1px solid var(--stock-edge);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--rest);
  font-size: 0.86rem;
  color: var(--ink-2);
}
.tcard-body p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.tcard-body p + .stamps { margin-top: 0.45rem; }
/* in a stack only the card edge peeks out; the content shows when pulled up */
.station:not([data-spread]) .slots > li:not(:last-child) .tcard-body > * { visibility: hidden; }
.station:not([data-spread]) .slots > li:not(:last-child) .tcard:is(:hover, :focus-within) .tcard-body > * { visibility: visible; }

.tcard-title a { color: inherit; text-decoration: none; }
.tcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tcard-title a:focus-visible { outline: none; }
.tcard .stamps a { position: relative; z-index: 2; }
.tcard:hover, .tcard:focus-within { z-index: 5; transform: translateY(-0.35rem); }
.tcard:hover .tcard-head, .tcard:hover .tcard-body,
.tcard:focus-within .tcard-head, .tcard:focus-within .tcard-body { box-shadow: var(--lift); }
.tcard:has(.tcard-title a:focus-visible) .tcard-head { outline: 2px solid var(--focus); outline-offset: 2px; }
.station[data-drop] .slots { background-color: color-mix(in srgb, var(--rider-go) 12%, transparent); }
.tcard[data-selected] { z-index: 4; }
.tcard[data-selected] .tcard-head { outline: 2px solid var(--focus); outline-offset: 1px; }
.tcard.dragging { opacity: 0.35; }

/* rider clip: state as colour and word */
.rider {
  position: absolute;
  top: -0.62rem;
  right: 0.7rem;
  padding: 0.08rem 0.45rem 0.12rem;
  border-radius: 2px 2px 1px 1px;
  font-size: 0.72rem;
  font-weight: 700;
  font-stretch: 85%;
  line-height: 1.25;
  color: #fff;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.25);
}
.rider-go { background: var(--rider-go); }
.rider-stop { background: var(--rider-stop); }
.rider-fail { background: var(--rider-fail); }
.rider-hand { background: var(--ink-2); }
.rider-go::before {
  content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-right: 0.35em; border-radius: 50%;
  background: #c8f5d6; vertical-align: 0.1em;
}

/* stamped destination labels */
.stamps { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.stamp {
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.08rem 0.4rem 0.1rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  font-size: 0.74rem;
  font-weight: 700;
  font-stretch: 85%;
  color: var(--done);
  background: rgb(255 255 255 / 0.35);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
}
.stamp svg { width: 1.05em; height: 1.05em; }
.stamp-work { color: #1f4f8a; }
.stamp-private { color: #6b2f6e; }
.stamp-exchange { color: var(--done); }
.stamp-link, .stamp-mail { color: var(--ink-2); }
/* delivered cards: a taller head carries the stamps, the rack pitch follows */
.tcard[data-dest] .tcard-head { height: calc(var(--head-h) + 1.75rem); grid-template-rows: auto auto 1fr; }
.station:not([data-spread]) .slots > li:has(> .tcard[data-dest]):not(:last-child) { height: calc(var(--pitch) + 1.75rem); }
.head-stamps { align-self: end; flex-wrap: nowrap; overflow: hidden; position: relative; z-index: 2; }
.head-stamps .stamp { flex: none; background: rgb(255 255 255 / 0.45); }
.stamp-tag { color: var(--ink-2); }
.stamp-cc { color: var(--stop); }
a.stamp:hover { background: rgb(255 255 255 / 0.75); }

/* spread cards (Needs input): full cards, question visible */
.station[data-spread] .tcard-body p { -webkit-line-clamp: 6; color: var(--ink); }

/* moving between stations */
.tcard.arrive { animation: slot-in 420ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slot-in { from { transform: translateY(-1.2rem); opacity: 0; } }

/* ── footer ───────────────────────────────────────────────── */
.foot {
  display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center;
  padding: 0.35rem 1.25rem 0.55rem;
  font-size: 0.8rem;
  color: var(--ink-3);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .foot { color: #a6afb3; } }
:root[data-theme="dark"] .foot { color: #a6afb3; }
.foot .feed { display: inline-flex; align-items: center; gap: 0.4em; }
.foot .feed i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--rider-go); display: inline-block; }
.foot .feed[data-bad] i { background: var(--stop); }
.foot button { border: 0; background: transparent; padding: 0.2em 0.3em; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; font-size: inherit; }
.foot .spacer { margin-left: auto; }

/* ── drawer: the pulled card ─────────────────────────────── */
.scrim { position: fixed; inset: 0; background: rgb(20 25 28 / 0.28); z-index: 20; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(36rem, 100vw);
  z-index: 30;
  background: var(--panel);
  border-left: 1px solid var(--frame);
  box-shadow: -0.5rem 0 2rem rgb(20 25 28 / 0.25);
  transform: translateX(104%);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow-y: auto;
  visibility: hidden;
}
.drawer[aria-hidden="false"] { transform: none; visibility: visible; }
.drawer-inner { padding: 1.1rem 1.2rem 2.5rem; color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drawer-inner { color: #e9ebe6; } }
:root[data-theme="dark"] .drawer-inner { color: #e9ebe6; }

.drawer-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.drawer-top .x { margin-left: auto; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.35rem; height: 2.35rem; border-radius: var(--radius);
  border: 1px solid var(--frame); background: transparent; color: inherit;
}
.icon-btn:hover { background: rgb(128 138 143 / 0.18); }

.pulled { --stock: var(--stock-manual); color: var(--ink); }
.pulled[data-source="claude"] { --stock: var(--stock-claude); }
.pulled[data-source="codex"] { --stock: var(--stock-codex); }
.pulled[data-source="mail"] { --stock: var(--stock-mail); }
.pulled-head {
  position: relative;
  background: var(--stock);
  border: 1px solid var(--stock-edge);
  border-radius: var(--radius) var(--radius) 1px 1px;
  padding: 0.85rem 1rem 0.95rem;
  box-shadow: var(--rest);
}
.pulled-head .tcard-line { font-size: 0.86rem; white-space: normal; flex-wrap: wrap; }
.pulled-head h2 {
  margin: 0.35rem 0 0;
  font-size: 1.45rem;
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: -0.012em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.pulled-head input.title-edit {
  width: 100%; margin-top: 0.35rem; font-size: 1.3rem; font-weight: 650;
  background: rgb(255 255 255 / 0.55); border: 1px solid var(--stock-edge); border-radius: 2px; padding: 0.2em 0.35em;
}
.pulled-body {
  margin: -1px 4% 0;
  background: var(--paper);
  border: 1px solid var(--stock-edge);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0.95rem 1rem 1.1rem;
  box-shadow: var(--rest);
}
.pulled-body > * + * { margin-top: 1.15rem; }
.pulled-body h3 {
  margin: 0 0 0.35rem;
  font-size: 0.86rem;
  font-weight: 700;
  font-stretch: 85%;
  color: var(--ink-2);
}
.pulled-body .text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 68ch;
}
.pulled-body .text.long { max-height: 18rem; overflow-y: auto; padding-right: 0.4rem; }
.pulled-body .question {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
  border: 1.5px solid var(--stop);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  background: color-mix(in srgb, var(--stop) 6%, var(--paper));
}
.pulled-body .stamps .stamp { font-size: 0.86rem; padding: 0.2rem 0.55rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0; font-size: 0.88rem; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.86em; }
.linkrow { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.linkrow a, .linkrow button {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 2.2rem; padding: 0.25em 0.75em; border-radius: var(--radius);
  border: 1px solid var(--frame); background: var(--paper); color: var(--ink); font-size: 0.88rem; font-weight: 600;
  text-decoration: none;
}
.linkrow a:hover, .linkrow button:hover { box-shadow: var(--rest); background: #fff; }

.controls { margin-top: 1.1rem; display: grid; gap: 0.8rem; }
.controls .row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.field { display: grid; gap: 0.3rem; font-size: 0.88rem; font-weight: 600; }
.field input, .field textarea, .field select, .controls select {
  width: 100%;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--frame); border-radius: var(--radius);
  padding: 0.45em 0.6em; font-weight: 400; font-size: 0.95rem; min-height: 2.35rem;
}
.controls select { width: auto; }
.field textarea { min-height: 6rem; resize: vertical; line-height: 1.45; }
.field .hint { font-weight: 400; color: var(--ink-3); font-size: 0.82rem; }
.drawer .btn { color: inherit; }

.log { list-style: none; margin: 0; padding: 0; font-size: 0.84rem; color: var(--ink-2); display: grid; gap: 0.2rem; }
.log time { color: var(--ink-3); margin-right: 0.5em; }

/* settings */
.settings h2 { margin: 0; font-size: 1.35rem; font-weight: 650; }
.settings h2.rules-title { margin-top: 2.2rem; }
.settings .row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.settings p.lead { margin: 0.35rem 0 1rem; max-width: 60ch; font-size: 0.93rem; }
.col-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.45rem; }
.col-list li {
  display: grid; grid-template-columns: 1fr 10rem auto auto auto auto; gap: 0.35rem; align-items: center;
  background: var(--strip); color: var(--ink); padding: 0.4rem; border-radius: 2px; box-shadow: var(--rest);
}
.col-list input, .col-list select {
  min-height: 2.2rem; border: 1px solid var(--frame); border-radius: var(--radius); background: #fff; padding: 0.2em 0.45em; width: 100%;
  font-size: 0.9rem;
}
.col-list label.chk { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.8rem; white-space: nowrap; }
.col-list .icon-btn { width: 2.2rem; height: 2.2rem; color: var(--ink); }
.rules { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.rules th { text-align: left; font-weight: 600; color: var(--ink-3); padding: 0.3rem 0.3rem; }
.rules td { padding: 0.2rem 0.3rem; border-top: 1px solid var(--frame); }
.rules select { min-height: 2rem; border: 1px solid var(--frame); border-radius: var(--radius); background: var(--paper); color: var(--ink); width: 100%; }
.rules code { font-size: 0.9em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rules th { color: #a6afb3; } }
:root[data-theme="dark"] .rules th { color: #a6afb3; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 1rem);
  background: var(--ink); color: #f1f2ee; padding: 0.55rem 1rem; border-radius: var(--radius);
  font-size: 0.92rem; opacity: 0; pointer-events: none; transition: opacity 160ms, transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 50;
}
.toast[data-show] { opacity: 1; transform: translate(-50%, 0); }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .rail { flex-wrap: wrap; gap: 0.6rem 1rem; }
  .rail-tools { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .search input { width: 9rem; }
}
@media (max-width: 720px) {
  body { overflow: auto; }
  .rail { padding: 0.5rem 1rem; }
  .rail-summary { order: 3; width: 100%; font-size: 0.86rem; gap: 0.8rem; }
  .rail-tools { gap: 0.45rem; }
  .filters { width: 100%; overflow-x: auto; }
  .filters button { flex: 1 0 auto; justify-content: center; }
  .search { flex: 1; }
  .search input { width: 100%; }
  .hide-sm { display: none; }
  .rack {
    grid-auto-columns: 86vw !important;
    grid-template-columns: none !important;
    scroll-snap-type: x mandatory;
    padding: 0.8rem 1rem;
    gap: 0.6rem;
  }
  .station { scroll-snap-align: start; }
  .station[data-collapsed] { grid-template-rows: auto 1fr; }
  .station[data-collapsed] .strip { writing-mode: horizontal-tb; height: auto; min-height: 3rem; margin: 0.45rem 0.45rem 0; padding: 0.4rem 0.75rem; }
  .station[data-collapsed] .strip .count { margin: 0 0 0 auto; }
  .col-list li { grid-template-columns: 1fr auto auto; }
  .col-list li select, .col-list li .chk { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tcard:hover, .tcard:focus-within { transform: none; }
}

/* ── login ────────────────────────────────────────────────── */
body.login {
  grid-template-rows: 1fr;
  place-items: center;
  overflow: auto;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--pitch) - 3px),
    var(--slot-line) calc(var(--pitch) - 3px), var(--slot-line) calc(var(--pitch) - 1px),
    var(--slot-shade) calc(var(--pitch) - 1px), var(--slot-shade) var(--pitch));
}
.login-wrap { width: min(26rem, 100% - 2rem); padding: 2rem 0; }
.login-mark { display: block; margin: 0 0 1rem; font-size: 2.6rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .login-mark { color: #e9ebe6; } }
.login-card h1 { margin: 0; font-size: 1.9rem; font-weight: 700; font-stretch: 78%; line-height: 1.1; }
.login-card .field input { font-size: 1.1rem; }
.login-error { margin: 0.7rem 0 0; color: var(--stop); font-weight: 600; font-size: 0.93rem; }
.login-go { margin-top: 1rem; width: 100%; justify-content: center; min-height: 2.8rem; font-size: 1rem; }