/* ==========================================================================
   Transmit — control-room stylesheet
   Hand-written, no CDN, no build step. Loads from disk on a laptop with the
   Wi-Fi off. Palette and type are deliberate: this screen is a playout desk,
   so timecodes are monospace and tabular, destinations carry their own colour,
   and anything urgent glows amber like a tally light.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Surfaces: deep blue-slate, not black — easier on the eyes at 2am */
  --ink:        #101522;
  --ink-deep:   #0b0f19;
  --panel:      #151b2b;
  --panel-2:    #1a2133;
  --raised:     #202942;
  --line:       #232c42;
  --line-soft:  #1d2436;

  /* Type */
  --text:       #e7eaf3;
  --text-dim:   #a7b0c6;
  --text-mute:  #7d879e;

  /* Signals — these mean something, they are not decoration */
  --live:       #33d6a6;   /* published */
  --queue:      #ffb454;   /* scheduled / on air soon */
  --fail:       #ff5d73;   /* failed */
  --idle:       #6d8bff;   /* neutral action */
  --draft:      #8c96ae;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --radius: 10px;
  --radius-sm: 7px;

  --sans: "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, system-ui, -apple-system,
          "Helvetica Neue", Arial, "Noto Sans Bengali", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas,
          "DejaVu Sans Mono", monospace;

  --rail: 216px;
}

/* --------------------------------------------------------------- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--text);
  font: 400 15px/1.55 var(--sans);
  min-height: 100vh;
  /* faint vertical grid, like a scheduling grid seen through the panel */
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px);
  background-size: 72px 100%;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 24px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
a { color: var(--idle); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
img, video { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--queue);
  outline-offset: 2px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------ utilities --- */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-mute); }
.dim { color: var(--text-dim); }
.tiny { font-size: 12px; }
.small { font-size: 13px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.stack { display: grid; gap: 14px; }
.stack-sm { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: 6px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pad { padding: 16px; }
.mt { margin-top: 16px; }
.mt-sm { margin-top: 10px; }
.mb { margin-bottom: 16px; }

.eyebrow {
  font: 600 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ----------------------------------------------------------------- shell -- */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }

.rail {
  background: var(--ink-deep);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.rail-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.rail-brand .mark {
  width: 26px; height: 26px; flex: none;
  border-radius: 7px;
  background: linear-gradient(150deg, var(--queue), #ff7d5d);
  display: grid; place-items: center;
  font: 700 13px/1 var(--mono); color: #24160a;
}
.rail-brand b { font-size: 15px; letter-spacing: -.015em; }
.rail-brand span { display: block; font: 500 10px/1.3 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute); }

.rail-nav { padding: 10px 8px; display: grid; gap: 1px; }
.rail-group { padding: 14px 10px 5px; }

.rail-link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 14px;
  border-left: 2px solid transparent;
}
.rail-link:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.rail-link.on {
  background: var(--panel-2); color: var(--text);
  border-left-color: var(--queue);
  font-weight: 500;
}
.rail-link .ico { width: 16px; flex: none; text-align: center; opacity: .8; font-size: 13px; }
.rail-link .tag {
  margin-left: auto;
  font: 600 11px/1 var(--mono);
  padding: 3px 6px; border-radius: 20px;
  background: var(--raised); color: var(--text-dim);
}
.rail-link .tag.hot { background: rgba(255, 93, 115, .16); color: var(--fail); }
.rail-link .tag.warm { background: rgba(255, 180, 84, .16); color: var(--queue); }

.rail-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--line-soft); }
.rail-user { display: flex; align-items: center; gap: 9px; padding: 6px 4px; }
.rail-user .who { min-width: 0; }
.rail-user .who b { display: block; font-size: 13px; font-weight: 600; }
.rail-user .who span { font-size: 11px; color: var(--text-mute); }

/* --------------------------------------------------------------- topbar --- */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 11px 22px;
  background: rgba(16, 21, 34, .93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.crumb { font: 500 13px/1 var(--mono); letter-spacing: .04em; color: var(--text-mute); }
.crumb b { color: var(--text); font-weight: 600; }

/* Dual clocks: the team is in Dhaka, the audience is not. */
.clocks { display: flex; gap: 14px; margin-left: auto; align-items: stretch; }
.clock {
  text-align: right; padding-left: 14px; border-left: 1px solid var(--line);
  line-height: 1.15;
}
.clock:first-child { border-left: 0; padding-left: 0; }
.clock b { display: block; font: 600 15px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.clock span { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute); }
.clock.audience b { color: var(--queue); }

.worker-lamp {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute);
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 20px;
}
.lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--draft); flex: none; }
.lamp.ok { background: var(--live); box-shadow: 0 0 0 3px rgba(51, 214, 166, .15); }
.lamp.off { background: var(--fail); box-shadow: 0 0 0 3px rgba(255, 93, 115, .15); }

/* No width cap, and no stepped overrides either.
   A container capped at some number of pixels is a guess about the screen, and
   it was wrong in both directions: a 2560 display lost a third of its window
   while a table inside it grew a horizontal scrollbar. What actually needs
   limiting is the *measure* — how many characters a reader crosses in a line —
   and that belongs on the text, in `ch`, not on the shell. See --measure. */
.content { width: 100%; padding: clamp(0.875rem, 1.4vw, 1.375rem); }
.page-head { margin-bottom: 18px; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* The real limit on how wide a page may be: not the window, the line. Both of
   these are in `ch`, so they hold at any zoom and any font size — and they are
   what makes removing the shell's pixel cap safe. */
.page-head .lede { color: var(--text-mute); font-size: 13px; margin-top: 4px;
  max-width: var(--measure, 62ch); }

/* --------------------------------------------------------------- panels --- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel + .panel { margin-top: 16px; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(var(--panel-2), var(--panel));
  flex-wrap: wrap;
}
.panel-body { padding: 16px; }
.panel-body.flush { padding: 0; }
.panel-foot { padding: 11px 16px; border-top: 1px solid var(--line-soft); background: var(--ink-deep); }

/* A layout that measures itself instead of guessing the device.
   Every rule here is continuous — clamp(), min(), auto-fit — so there is no
   width at which the page snaps from one arrangement to another, and no list of
   phone sizes to keep up to date. A breakpoint for "two columns no longer fit"
   was telling the browser something it already knew.
   Lengths are rem and ch rather than px, so the same rules also hold when the
   reader has set a larger font. */
.grid { display: grid; gap: clamp(0.625rem, 1.1vw, 1rem); }

/* As many columns as will fit, wrapping on their own. `min(100%, …)` is the
   part that matters on a narrow phone: a track may never ask for more than the
   container actually has, so nothing overflows and nothing needs a media
   query to be told so. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

/* Main-and-side, without a breakpoint. Flex wrapping does the whole job: each
   child asks for a sensible share, the main one is allowed to take three times
   the slack, and the moment that share stops fitting the side drops onto its
   own line by itself. On a wide screen the side stops growing because its
   basis is reached and `flex-grow: 1` against the main's 3 leaves it the
   smaller share — which is the point, since the panel beside it is what wanted
   the room. */
.grid-side {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: clamp(0.625rem, 1.1vw, 1rem);
}
.grid-side > * { min-width: 0; }
.grid-side > :first-child { flex: 3 1 min(100%, 32rem); }
.grid-side > :last-child { flex: 1 1 min(100%, 19rem); }
.grid-side > :only-child { flex: 1 1 100%; }

/* ---------------------------------------------------------------- stats --- */
.stat { padding: 14px 16px; }
.stat-value {
  font: 600 30px/1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat-value small { font-size: 14px; color: var(--text-mute); font-weight: 500; }
.stat-label { margin-top: 6px; font: 500 11px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mute); }
.stat.live .stat-value { color: var(--live); }
.stat.queue .stat-value { color: var(--queue); }
.stat.fail .stat-value { color: var(--fail); }
.statbar { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.statbar .stat + .stat { border-left: 1px solid var(--line-soft); }

/* ===========================================================================
   SIGNATURE — the transmission strip.
   24 hours of air time on one line, with a playhead at "now". Each block is a
   scheduled post, coloured by its destination.
   =========================================================================== */
.strip { padding: 20px 16px 12px; position: relative; }
.strip-track {
  position: relative;
  height: 74px;
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 12.5%),
    linear-gradient(180deg, var(--ink-deep), #0e1320);
  border: 1px solid var(--line);
  overflow: hidden;
}
.strip-track::after {   /* the horizon line the tallies sit on */
  content: ""; position: absolute; left: 0; right: 0; bottom: 22px;
  border-bottom: 1px dashed rgba(255, 255, 255, .07);
}

.tally {
  position: absolute; bottom: 26px;
  width: 8px; height: 30px;
  transform: translateX(-4px);
  border-radius: 3px;
  background: var(--idle);
  opacity: .92;
  cursor: pointer;
  transition: height .12s ease, transform .12s ease;
}
.tally::after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  width: 1px; height: 8px; background: currentColor; opacity: .35;
  transform: translateX(-50%);
}
.tally:hover, .tally:focus-visible { height: 42px; transform: translateX(-4px) scale(1.12); z-index: 3; }
.tally.soon { box-shadow: 0 0 0 3px rgba(255, 180, 84, .18); animation: tally-pulse 2.4s ease-in-out infinite; }
.tally.late { background: var(--fail) !important; }
.tally.publishing { background: var(--queue) !important; }

@keyframes tally-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 180, 84, .1); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 180, 84, .22); }
}

.playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--queue); z-index: 4; }
.playhead::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--queue);
  box-shadow: 0 0 0 4px rgba(255, 180, 84, .18);
  animation: head-pulse 2s ease-in-out infinite;
}
.playhead .label {
  position: absolute; top: 10px; left: 7px;
  font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--queue); white-space: nowrap;
}
@keyframes head-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 180, 84, .14); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 180, 84, .05); }
}

.strip-marks { position: relative; height: 30px; margin-top: 8px; }
.strip-mark {
  position: absolute; top: 0; transform: translateX(-50%); text-align: center;
  font: 500 11px/1.35 var(--mono); color: var(--text-mute); white-space: nowrap;
}
.strip-mark i { display: block; width: 1px; height: 5px; background: var(--line);
  margin: 0 auto 4px; }
.strip-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }

.tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 8px 10px; max-width: 260px; font-size: 12px; line-height: 1.4;
  opacity: 0; transform: translateY(4px); transition: opacity .1s, transform .1s;
}
.tip.on { opacity: 1; transform: translateY(0); }
.tip b { display: block; font-size: 12px; }
.tip .mono { color: var(--queue); }

/* -------------------------------------------------------------- channels -- */
.channel {
  display: grid; grid-template-columns: 3px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.channel:last-child { border-bottom: 0; }
.channel:hover { background: var(--panel-2); }
.channel .swatch { width: 3px; height: 30px; border-radius: 3px; background: var(--idle); }
.channel .name { font-weight: 500; font-size: 14px; }
.channel .meta { font: 500 11px/1.4 var(--mono); color: var(--text-mute); }
.channel .counts { display: flex; gap: 14px; text-align: right; }
.channel .counts div { min-width: 44px; }
.channel .counts b { display: block; font: 600 15px/1 var(--mono); }
.channel .counts span { font: 500 10px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-mute); }

/* --------------------------------------------------------------- tables --- */
/* The scrollbar is the last resort, not the layout.
   A table in automatic layout is as wide as its *minimum content* demands, and
   `width: 100%` cannot shrink it below that. Three things here were quietly
   adding to that minimum — headers set to `nowrap`, `.thin` columns asking for
   their content's full width, and a long unbroken error string in the result
   column — so on the post page the table outgrew its column and `overflow-x`
   produced a horizontal slider on a screen with room to spare, while the
   result text was squeezed into one word per line.
   So: long text may break anywhere, and the slider appears only when the
   window really is too narrow. */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px;
  /* Without this a table is free to be wider than its container. */
  max-width: 100%; }
.table th {
  text-align: left; padding: 9px 12px;
  font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute);
  background: var(--ink-deep);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle;
  /* A platform error arrives as one long line with tokens like
     "OAuthException" and a URL in it. Allowed to break mid-token, because the
     alternative is the whole table growing to fit the longest word in it. */
  overflow-wrap: anywhere; }
.table tbody tr:hover { background: var(--panel-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  /* A number is one word and must be read as one. The `overflow-wrap: anywhere`
     above exists for a long platform error and it does not know the difference,
     so it broke 1,320,017 across three lines — which is not a smaller number,
     it is three wrong ones. Numbers never wrap; they are short enough that
     refusing to break them cannot squeeze the table. */
  white-space: nowrap; overflow-wrap: normal; }
.table .thin { width: 1%; white-space: nowrap; }
.table--flat th { position: static; }

.title-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.title-cell .kind {
  width: 26px; height: 26px; flex: none; border-radius: var(--radius-sm);
  display: grid; place-items: center; background: var(--raised);
  font-size: 12px; color: var(--text-dim);
}
.title-cell .lines { min-width: 0; }
.title-cell b { display: block; font-weight: 500; font-size: 13.5px; }
.title-cell span { display: block; font-size: 12px; color: var(--text-mute); }

/* --------------------------------------------------------------- badges --- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 20px;
  background: var(--raised); color: var(--text-dim);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--published { background: rgba(51, 214, 166, .12); color: var(--live); }
.badge--scheduled { background: rgba(255, 180, 84, .12); color: var(--queue); }
.badge--publishing { background: rgba(255, 180, 84, .2); color: var(--queue); }
.badge--publishing .dot { animation: head-pulse 1.4s infinite; }
.badge--failed { background: rgba(255, 93, 115, .13); color: var(--fail); }
.badge--partial { background: rgba(255, 180, 84, .1); color: #e0b070; }
.badge--draft, .badge--canceled, .badge--skipped { background: rgba(140, 150, 174, .12); color: var(--draft); }
.badge--plain { background: transparent; border-color: var(--line); color: var(--text-mute); }

/* .pill lives further down, next to its variants. */
.avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 11px/1 var(--mono); color: #0c0f18;
  background: var(--idle);
}
.avatar.lg { width: 40px; height: 40px; font-size: 15px; }

.health { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.health .lamp { width: 8px; height: 8px; }
.health--ok .lamp { background: var(--live); }
.health--error .lamp { background: var(--fail); }
.health--unknown .lamp { background: var(--draft); }
.health--warning .lamp { background: var(--queue); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 500 13.5px/1 var(--sans);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: #26314e; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn--primary {
  background: var(--queue); border-color: #e39c3c; color: #23170a; font-weight: 600;
}
.btn--primary:hover { background: #ffc270; }
.btn--go { background: rgba(51, 214, 166, .14); border-color: rgba(51, 214, 166, .4); color: var(--live); }
.btn--go:hover { background: rgba(51, 214, 166, .22); }
.btn--danger { background: rgba(255, 93, 115, .12); border-color: rgba(255, 93, 115, .35); color: var(--fail); }
.btn--danger:hover { background: rgba(255, 93, 115, .2); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--panel-2); }
.btn--tiny { padding: 6px 9px; font-size: 12px; }
.btn--wide { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
form.inline { display: inline; }

/* ---------------------------------------------------------------- forms --- */
.field { display: block; margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.label {
  display: block; margin-bottom: 6px;
  font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim);
}
.hint { margin-top: 6px; font-size: 12px; color: var(--text-mute); line-height: 1.45; }

.input, .textarea, select.input {
  width: 100%;
  font: 400 14px/1.5 var(--sans);
  color: var(--text);
  background: var(--ink-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  appearance: none;
}
.input:focus, .textarea:focus, select.input:focus {
  outline: none;
  border-color: rgba(255, 180, 84, .55);
  box-shadow: 0 0 0 3px rgba(255, 180, 84, .12);
}
.input::placeholder, .textarea::placeholder { color: #5f6980; }
.input.mono, .textarea.mono { font-family: var(--mono); font-size: 13px; }
.textarea { min-height: 92px; resize: vertical; }
select.input {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%),
                    linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
input[type="datetime-local"].input, input[type="date"].input { font-family: var(--mono); }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row > * { flex: 1 1 180px; }

.check { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; cursor: pointer;
  padding: 7px 0; }
.check input { margin: 2px 0 0; accent-color: var(--queue); width: 15px; height: 15px; flex: none; }
.check span b { display: block; font-weight: 500; }
.check span i { font-style: normal; color: var(--text-mute); font-size: 12px; }

/* segmented control — post type, schedule mode */
.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--ink-deep);
  border: 1px solid var(--line); border-radius: var(--radius-sm); flex-wrap: wrap; }
.seg label {
  position: relative; cursor: pointer;
  font: 500 13px/1 var(--sans); padding: 8px 13px; border-radius: 5px; color: var(--text-dim);
}
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg input:checked + em { color: #23170a; }
.seg label em { font-style: normal; position: relative; z-index: 1; }
.seg label:has(input:checked) { background: var(--queue); color: #23170a; font-weight: 600; }
.seg input:focus-visible + em { outline: 2px solid var(--queue); outline-offset: 4px; }

/* destination picker */
.dests { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }
.dest {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--ink-deep); cursor: pointer;
}
.dest:hover { border-color: #33405f; }
.dest:has(input:checked) { border-color: rgba(255, 180, 84, .5); background: rgba(255, 180, 84, .06); }
.dest input { accent-color: var(--queue); width: 16px; height: 16px; flex: none; }
.dest .swatch { width: 3px; height: 26px; border-radius: 3px; flex: none; }
.dest b { display: block; font-size: 13.5px; font-weight: 500; }
.dest span { font: 500 11px/1.3 var(--mono); color: var(--text-mute); }
.dest.dead { opacity: .55; }

/* ------------------------------------------------------------- dropzone --- */
.drop {
  border: 1.5px dashed #2e3a57;
  border-radius: var(--radius);
  background: var(--ink-deep);
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.drop:hover { border-color: #3d4c72; }
.drop--over { border-color: var(--queue); background: rgba(255, 180, 84, .07); }
.drop .big { font-size: 15px; font-weight: 500; }
.drop input[type="file"] { display: none; }

.filelist { display: grid; gap: 10px; margin-top: 14px; }
.filecard {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--ink-deep); overflow: hidden;
}
.filecard-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft); background: var(--panel);
}
.filecard-head .idx { font: 600 11px/1 var(--mono); color: var(--text-mute); }
.filecard-head b { font-weight: 500; font-size: 13px; }
.filecard-body { padding: 12px; display: grid; gap: 10px; }
.filecard-body[hidden] { display: none; }

/* ---------------------------------------------------------------- misc ----- */
.flash {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; margin-bottom: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(51, 214, 166, .3);
  background: rgba(51, 214, 166, .09);
  font-size: 13.5px;
}
.flash--warn { border-color: rgba(255, 180, 84, .32); background: rgba(255, 180, 84, .09); }
.flash--err { border-color: rgba(255, 93, 115, .32); background: rgba(255, 93, 115, .09); }
.flash .x { margin-left: auto; cursor: pointer; color: var(--text-mute); background: none;
  border: 0; font-size: 15px; line-height: 1; }

.note {
  border-left: 2px solid var(--line); padding: 2px 0 2px 12px;
  font-size: 13px; color: var(--text-dim);
}
.note--warn { border-left-color: var(--queue); }
.note--danger { border-left-color: var(--fail); }

.empty { padding: 40px 20px; text-align: center; color: var(--text-mute); }
.empty .big { font-size: 15px; color: var(--text-dim); margin-bottom: 6px; }

.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: 13.5px; }
.kv dt { font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin: 0; }
.filters .input { min-width: 130px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px;
  overflow-x: auto; }
/* A tab is a label and, usually, a count. Laid out as a centred flex row rather
   than an inline run: as inline text the count sat on the label's baseline and
   read as a subscript — "Draft ₀" — and once a label became an icon-plus-name
   `ptag`, whose baseline is its icon's, the number dropped below the text
   altogether. Centring fixes both, on every tab row in the app. */
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; font-size: 13.5px; color: var(--text-mute);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.on { color: var(--text); border-bottom-color: var(--queue); font-weight: 500; }
/* The count is a small pill, not a run of text after the label. Three things
   were wrong with it as text: on the baseline it read as a subscript, in the
   mono stack it looked like a different typeface from the label beside it, and
   with nothing around it there was no telling whether "Facebook 2" was a count
   or part of the name. A box of its own fixes the alignment outright — its
   content is centred inside it and it is centred inside the tab — and tabular
   figures keep the label still when a count goes from 9 to 10. */
.tab .n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums;
  color: var(--text-mute); background: var(--line); border-radius: 999px;
}
.tab.on .n { color: var(--text); background: rgba(255, 255, 255, .13); }

.pager { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 14px; }
.pager .now { font: 500 12px/1 var(--mono); color: var(--text-mute); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font: 500 12px/1 var(--mono); padding: 5px 8px; border-radius: 5px;
  background: rgba(109, 139, 255, .12); color: #9db0ff;
}

/* bar chart — publishing per day */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.bars .col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 5px; min-width: 0; }
.bars .bar {
  width: 100%; max-width: 26px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--queue), rgba(255, 180, 84, .35));
  min-height: 2px;
}
.bars .col.zero .bar { background: var(--line); }
.bars .col span { font: 500 9.5px/1 var(--mono); color: var(--text-mute); white-space: nowrap;
  overflow: hidden; }
.bars .col b { font: 600 10px/1 var(--mono); color: var(--text-dim); }

.hours { display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.hours .h { flex: 1; background: var(--line); border-radius: 2px 2px 0 0; min-height: 2px; }
.hours .h.peak { background: var(--live); }
.hourscale { display: flex; justify-content: space-between; font: 500 10px/1 var(--mono);
  color: var(--text-mute); margin-top: 6px; }

/* meter — success rate */
.meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: flex; }
.meter i { display: block; height: 100%; }
.meter .ok { background: var(--live); }
.meter .bad { background: var(--fail); }

/* -------------------------------------------------------------- calendar -- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.cal-dow {
  padding: 8px 10px; font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute); background: var(--ink-deep); border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line-soft);
}
.cal-cell {
  min-height: 104px; padding: 7px 8px;
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 5px;
}
.cal-cell.void { background: rgba(0, 0, 0, .18); }
.cal-cell.today { background: rgba(255, 180, 84, .05); box-shadow: inset 0 0 0 1px rgba(255, 180, 84, .25); }
.cal-day { font: 600 12px/1 var(--mono); color: var(--text-mute); }
.cal-cell.today .cal-day { color: var(--queue); }
.cal-item {
  display: block; font-size: 11.5px; line-height: 1.35; padding: 4px 6px; border-radius: 5px;
  background: var(--raised); color: var(--text-dim);
  border-left: 2px solid var(--idle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-item:hover { background: #2a3552; text-decoration: none; color: var(--text); }
.cal-item.published { border-left-color: var(--live); }
.cal-item.failed { border-left-color: var(--fail); }
.cal-item.draft { border-left-color: var(--draft); opacity: .8; }
.cal-item .t { font-family: var(--mono); color: var(--text-mute); margin-right: 4px; }

/* ---------------------------------------------------------------- inbox --- */
.threads { display: block; }
.thread-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft); align-items: center;
  color: var(--text-dim);
}
.thread-row:last-child { border-bottom: 0; }
.thread-row:hover { background: var(--panel-2); text-decoration: none; color: var(--text); }
.thread-row.unread { background: rgba(109, 139, 255, .05); box-shadow: inset 2px 0 0 var(--idle); }
.thread-row.closed { opacity: .62; }
.thread-main { display: grid; gap: 4px; min-width: 0; }
.thread-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.thread-top b { font-size: 14px; font-weight: 500; color: var(--text); }
.thread-last { font-size: 12.5px; color: var(--text-mute); display: block; }
.thread-last b { font-weight: 600; color: var(--text-dim); }
.thread-meta { display: grid; gap: 3px; justify-items: end; text-align: right; white-space: nowrap; }
.dot-new {
  font: 600 10px/1 var(--mono); padding: 3px 6px; border-radius: 10px;
  background: rgba(109, 139, 255, .18); color: #9db0ff;
}

.chat { display: grid; }
.msg {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.msg:first-child { padding-top: 0; }
.msg:last-child { border-bottom: 0; padding-bottom: 0; }
.msg-body { min-width: 0; }
.msg-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.msg-top b { font-size: 13.5px; font-weight: 600; }
.msg-kill { margin-left: auto; opacity: 0; transition: opacity .12s; }
.msg:hover .msg-kill, .msg-kill:focus-within { opacity: 1; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; }
.msg.mine .msg-text { color: var(--text); }

.seen { display: flex; flex-wrap: wrap; gap: 4px; }
.seen-one { display: inline-flex; cursor: default; }

/* ----------------------------------------------------------------- auth --- */
.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1100px 480px at 50% -10%, rgba(255, 180, 84, .1), transparent 70%),
    var(--ink);
}
.auth-card { width: 100%; max-width: 396px; }
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand .mark {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 12px;
  background: linear-gradient(150deg, var(--queue), #ff7d5d);
  display: grid; place-items: center; font: 700 20px/1 var(--mono); color: #24160a;
}
.auth-brand h1 { font-size: 21px; }
.auth-brand p { color: var(--text-mute); font-size: 13px; margin-top: 5px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 12px; color: var(--text-mute); }

/* ------------------------------------------------------------------ pills -- */
.pill {
  display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text-dim);
}
.pill.admin {
  color: var(--queue); border-color: rgba(255, 180, 84, .4);
  background: rgba(255, 180, 84, .08);
}
.pill.hot { color: var(--fail); border-color: rgba(255, 93, 115, .45); background: rgba(255, 93, 115, .1); }
.pill.live { color: var(--live); border-color: rgba(74, 214, 146, .4); background: rgba(74, 214, 146, .08); }
.pill.done { color: var(--text-mute); }
tr.dim { opacity: .55; }
.stat .v i { font-style: normal; font-size: 14px; color: var(--text-mute); margin-left: 1px; }

/* ------------------------------------------------------------- disclosure -- */
/* Hand-paste token fields and delete confirmations sit behind a fold: available,
   but not the first thing your eye lands on. */
.fold {
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--panel-2); margin-top: 10px;
}
.fold > summary {
  cursor: pointer; padding: 9px 12px; font-size: 12.5px; color: var(--text-dim);
  list-style: none; user-select: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: "▸ "; color: var(--text-mute); }
.fold[open] > summary::before { content: "▾ "; }
.fold[open] > summary { border-bottom: 1px solid var(--line-soft); color: var(--text); }
.fold > form, .fold > div { padding: 12px; }

/* -------------------------------------------------------------- form extras -- */
.req {
  font-style: normal; font-size: 10.5px; letter-spacing: .03em; color: var(--text-mute);
  border: 1px solid var(--line); border-radius: 20px; padding: 1px 6px; margin-left: 6px;
}
input.input.color {
  padding: 3px; height: 38px; cursor: pointer; background: var(--ink-deep);
}
.steps { margin: 0; padding-left: 20px; color: var(--text-dim); }
.steps li { margin-bottom: 6px; line-height: 1.55; }
.steps li b { color: var(--text); }

/* ----------------------------------------------------------- destinations -- */
/* Each card carries its page's accent as a top edge, so the same colour that
   marks the page on the strip, the calendar and the queue marks it here too. */
.channels {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}
.channel-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 2px solid var(--accent, var(--idle));
  padding: 13px 14px 11px; display: flex; flex-direction: column; gap: 11px; min-width: 0;
}
.channel-card.off { opacity: .6; }
.channel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.channel-name { display: flex; gap: 9px; align-items: center; min-width: 0; }
.channel-name b { display: block; font-size: 14px; font-weight: 650; }
.channel-name span.tiny { display: block; }
.lamp {
  flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px;
  background: var(--text-mute); cursor: help;
}
.lamp.ok { background: var(--live); box-shadow: 0 0 0 3px rgba(51, 214, 166, .16); }
.lamp.error { background: var(--fail); box-shadow: 0 0 0 3px rgba(255, 93, 115, .16); }
.lamp.unknown { background: var(--draft); }
.channel-nums { display: flex; gap: 16px; }
.channel-nums div { display: grid; }
.channel-nums b { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.channel-nums span { font-size: 10.5px; color: var(--text-mute); letter-spacing: .04em; text-transform: uppercase; }
.channel-flags { display: flex; flex-wrap: wrap; gap: 5px; }
.flag {
  padding: 2px 7px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text-dim); font-size: 10.5px;
}
.flag.warn { color: var(--queue); border-color: rgba(255, 180, 84, .35); }
.flag.off { color: var(--fail); border-color: rgba(255, 93, 115, .3); }
.channel-foot {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* -------------------------------------------------------------- flow strip -- */
.flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.flow-step {
  flex: 1 1 165px; display: grid; gap: 3px; padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); min-width: 0;
}
.flow-step b { font: 600 11px/1 var(--mono); color: var(--queue); letter-spacing: .04em; }
.flow-step span { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.flow-arrow { align-self: center; color: var(--text-mute); font-size: 15px; flex: none; }
@media (max-width: 780px) {
  .flow-arrow { display: none; }
}

/* ---------------------------------------------------------------- gallery -- */
/* Library cards. Vertical thumbnails, because everything here is shot 9:16 —
   a square grid would letterbox every single one. */
.gallery {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
}
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; min-width: 0;
  transition: border-color .14s ease, transform .14s ease;
}
.card:hover { border-color: var(--line); transform: translateY(-1px); }
.card-media {
  position: relative; display: block; background: #000; aspect-ratio: 9 / 14;
  overflow: hidden; border-bottom: 1px solid var(--line);
}
.card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 26px; color: rgba(255, 255, 255, .82);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7); pointer-events: none;
}
.card-tag {
  position: absolute; bottom: 6px; left: 6px; padding: 2px 6px; border-radius: 5px;
  background: rgba(8, 11, 18, .82); color: var(--text-dim);
  font-size: 10.5px; letter-spacing: .02em; backdrop-filter: blur(3px);
}
.card-tag.right { left: auto; right: 6px; color: var(--live); }
.card-tag.right.warn { color: var(--queue); }
.card-body { padding: 9px 10px; display: grid; gap: 3px; min-width: 0; }
.card-body b { font-size: 12.5px; font-weight: 600; }
/* The footer is the delete form itself, so the options that modify deleting can
   sit under the buttons rather than being squeezed between them. */
.card-foot {
  margin-top: auto; padding: 8px 10px; border-top: 1px solid var(--line-soft);
  display: grid; gap: 6px;
}
.card-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.card-opts > summary {
  display: block; list-style: none; cursor: pointer;
  font-size: 11px; color: var(--text-mute);
}
.card-opts > summary::-webkit-details-marker { display: none; }
.card-opts > summary::before { content: "▸ "; }
.card-opts[open] > summary::before { content: "▾ "; }
.card-opts > summary:hover { color: var(--text-dim); }
/* Wrapping onto as many lines as the sentence needs is the whole point: this
   text used to be clipped mid-word by a 190px card. */
.card-opts .check { margin-top: 7px; font-size: 11.5px; line-height: 1.4; align-items: flex-start; }
.card-opts .check span { color: var(--text-dim); }

/* --------------------------------------------------------------- preview -- */
/* A caption reads differently in a narrow column than it does in a text box,
   so the preview is shaped like the place it will actually be read. */
.phone {
  border: 1px solid var(--line); border-radius: 14px; background: var(--ink-deep);
  padding: 12px; max-width: 320px;
}
.phone .cap { font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.phone-media {
  width: 100%; display: block; border-radius: 10px; background: #000;
  max-height: 400px; object-fit: contain;
}
.phone-caption {
  margin-top: 10px; font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text);
}
.empty-media {
  display: grid; place-items: center; min-height: 150px; border: 1px dashed var(--line);
  color: var(--text-mute); font-size: 12.5px; background: var(--panel-2);
}
.media-box {
  background: var(--ink-deep); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; display: grid; place-items: center; min-height: 120px;
}
.media-box video, .media-box img { width: 100%; height: auto; }

/* ------------------------------------------------------------ fact lists -- */
/* Label on the left, value on the right, hairline between: a spec sheet, not
   a bulleted list. */
.factlist { display: grid; gap: 1px; margin-top: 12px; }
.factlist > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); min-width: 0;
}
.factlist > div:last-child { border-bottom: 0; }
.factlist span { color: var(--text-mute); font-size: 12px; flex: none; }
.factlist b { font-weight: 600; text-align: right; min-width: 0; font-size: 13px; }
.factlist b a { font-weight: 600; }

/* --------------------------------------------------------------- readouts -- */
/* Locked content: shown, clearly not editable, no disabled-input greyness. */
.readout {
  background: var(--ink-deep); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 13.5px;
  color: var(--text); overflow-wrap: anywhere;
}
.readout.pre { white-space: pre-wrap; line-height: 1.6; }
.err-line { color: var(--fail); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.sep { color: var(--text-mute); margin: 0 2px; }
.kind.big { font-size: 20px; color: var(--text-mute); margin-right: 4px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.btn-row.tight { gap: 4px; flex-wrap: nowrap; }

/* ------------------------------------------------------------- audit trail -- */
.trail { list-style: none; margin: 0; padding: 0 0 0 6px; }
.trail-item {
  position: relative; display: flex; gap: 12px; padding: 0 0 14px 14px;
  border-left: 1px solid var(--line); font-size: 13px;
}
.trail-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.trail-item .dot {
  position: absolute; left: -4px; top: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--idle); box-shadow: 0 0 0 3px var(--panel);
}
.trail-item.warning .dot { background: var(--queue); }
.trail-item.error .dot { background: var(--fail); }
.trail-item b { font-weight: 600; font-family: var(--mono); font-size: 12.5px; }
.trail-item .small { color: var(--text-dim); margin-top: 2px; overflow-wrap: anywhere; }

/* -------------------------------------------------------------- reports -- */
/* Every page gets its own titled section; the accent edge is the only thing
   that tells them apart at a glance, which is exactly enough. */
.section-title {
  font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); margin: 26px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.section-title::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}
.report-section { border-left: 2px solid var(--accent, var(--idle)); }
.mini-stats {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
  margin-bottom: 11px;
}
.mini-stats > div { display: grid; gap: 3px; }
.mini-stats span {
  font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute);
}
.mini-stats b { font: 650 19px/1 var(--mono); font-variant-numeric: tabular-nums; }

/* The week's leaderboard. The rank is the one loud thing — everything else is a
   normal table row, so the eye lands on position without the table shouting. */
.lead-table .lead-rank { font-weight: 700; color: var(--live); font-size: 15px; width: 2ch; }
.lead-table tbody tr:first-child .lead-rank { font-size: 18px; }
.lead-title { font-weight: 600; color: var(--text); text-decoration: none; }
.lead-title:hover { text-decoration: underline; }

/* --------------------------------------------------------------- the log -- */
/* Warnings and failures get a colour on the action cell only. Tinting whole
   rows turns a long log into a traffic light and stops being readable. */
.log-table td { vertical-align: top; }
.lvl-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px;
  background: var(--line); vertical-align: 1px;
}
tr.lvl-warning .lvl-dot { background: var(--queue); }
tr.lvl-error .lvl-dot { background: var(--fail); }
tr.lvl-warning td:nth-child(3) { color: var(--queue); }
tr.lvl-error td:nth-child(3) { color: var(--fail); }
.log-table td a.tiny { margin-left: 6px; white-space: nowrap; }

/* ------------------------------------------------------------ responsive -- */
/* The 1080px block that used to live here is gone, not moved: .grid-2/3/4 and
   .grid-side now wrap by themselves at whatever width stops fitting, which is
   a different width on every screen and font size. */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: static; height: auto; flex-direction: row; align-items: center;
    overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .rail-brand { border: 0; padding: 12px 14px; }
  .rail-brand span { display: none; }
  .rail-nav { display: flex; padding: 8px; gap: 2px; }
  .rail-group { display: none; }
  .rail-link { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 10px; }
  .rail-link.on { border-left: 0; border-bottom-color: var(--queue); }
  .rail-link .ico { display: none; }
  .rail-foot { margin: 0 0 0 auto; border: 0; }
  .rail-user .who { display: none; }
  .clocks .clock.team { display: none; }
  .worker-lamp span { display: none; }
}
@media (max-width: 620px) {
  .statbar .stat:nth-child(3) { border-left: 0; }
  .stat-value { font-size: 24px; }
  .topbar { padding: 10px 14px; }
  .crumb { display: none; }
  .cal-cell { min-height: 72px; }
  .cal-item .txt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .rail, .topbar, .btn, .filters, .pager { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { border-color: #ccc; box-shadow: none; }
}

/* ==========================================================================
   2026 pass — calmer, roomier, and destinations you can recognise at a glance.
   Everything below is an intentional override of the rules above: fewer lines
   competing for attention, more air, one accent per screen. Appended rather
   than edited in place so the original desk look stays readable in git.
   ========================================================================== */

/* The faint grid behind everything read as noise on a busy screen. Gone. */
body { background-image: none; }
[hidden] { display: none !important; }

/* ---- type: a clearer top-to-bottom hierarchy --------------------------- */
h1 { font-size: 27px; letter-spacing: -.022em; }
h2 { font-size: 16px; letter-spacing: -.008em; }
.eyebrow {
  font: 600 10.5px/1.4 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.page-head { margin-bottom: 26px; }
.page-head .lede { font-size: 13.5px; color: var(--text-dim); margin-top: 6px; }

/* ---- surfaces: softer edges, real depth, more breathing room ------------ */
.panel {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .015), 0 18px 40px -30px rgba(0, 0, 0, .9);
}
.panel + .panel, .panel.mt { margin-top: 22px; }
.panel-head {
  padding: 15px 20px 13px;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
}
.panel-body { padding: 20px; }
.panel-body.flush { padding: 0; }
.panel-foot { padding: 13px 20px; border-top: 1px solid var(--line-soft); }
.grid { gap: 22px; }

/* ---- destination marks ------------------------------------------------- */
.pmark {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 5px;
  overflow: hidden;
  vertical-align: -4px;
}
.pmark svg { width: 100%; height: 100%; display: block; }
.ptag { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.ptag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- tables: quiet rows, a header that stays put ----------------------- */
table { border-collapse: separate; border-spacing: 0; }
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 11px 16px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font: 600 10.5px/1.4 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-mute);
}
tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 0;
  border-right: 0;
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(255, 255, 255, .022); }

/* ---- cards (library) --------------------------------------------------- */
.card { border-radius: 14px; border-color: var(--line-soft); transition: transform .14s ease, border-color .14s ease; }
.card:hover { transform: translateY(-2px); border-color: var(--line); }
.card-body { padding: 13px 14px; display: grid; gap: 5px; }
.card-foot { padding: 11px 14px; border-top: 1px solid var(--line-soft); gap: 8px; }

/* ---- controls ---------------------------------------------------------- */
input[type="text"], input[type="password"], input[type="search"], input[type="number"],
input[type="datetime-local"], input[type="email"], select, textarea {
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--ink-deep);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--idle);
  box-shadow: 0 0 0 3px rgba(109, 139, 255, .22);
}
.btn { border-radius: 9px; padding: 9px 15px; font-weight: 600; letter-spacing: -.005em; }
.btn--tiny { padding: 6px 10px; border-radius: 8px; }
.btn:focus-visible { outline: 2px solid var(--idle); outline-offset: 2px; }
.badge { border-radius: 999px; padding: 3px 10px 3px 8px; }

/* ---- one section at a time (settings) --------------------------------- */
.sectabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  padding: 5px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.sectab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: 600 12px/1 var(--sans);
  letter-spacing: .01em;
  padding: 9px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sectab:hover { background: var(--panel-2); color: var(--text); }
.sectab.on { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.sectab:focus-visible { outline: 2px solid var(--idle); outline-offset: 1px; }

/* ---- studio reads as a sequence, so let it run down the page ----------- */
.grid.studio-flow { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.studio-flow .panel + .panel { margin-top: 22px; }

@media (max-width: 900px) {
  .sectabs { overflow-x: auto; flex-wrap: nowrap; }
  .panel-body { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card:hover { transform: none; }
}