/* terminal.urgent.news — the character-grid surface.
 *
 * Dark only, on purpose. The broadsheet at urgent.news is the theme-aware
 * surface; a terminal that politely turns cream in the morning is not a
 * terminal. Sixteen tokens, no opacity tints, no extra greys.
 *
 * Colour discipline (violations are bugs):
 *   amber = label / headline · white = datum · grey = unit / meta
 *   cyan  = this jumps somewhere · green/red = direction only, never decoration
 */

:root {
  --t-bg:          #000000;
  --t-bg-panel:    #050505;
  --t-bg-row-alt:  #0d0d0d;
  --t-bg-chrome:   #16181c;

  --t-amber:       #ff9e21;
  --t-amber-hi:    #ffc266;
  --t-amber-dim:   #b36a00;
  --t-field-bg:    #f2a33c;

  --t-white:       #ffffff;
  --t-gray:        #9aa0a6;
  --t-gray-dim:    #5f6368;
  --t-rule:        #2a2d31;

  --t-green:       #2bd06f;
  --t-red:         #ff453a;
  --t-cyan:        #6cb2ff;
  --t-cyan-head:   #35c4e7;
  --t-yellow:      #ffd75e;

  --t-titlebar-bg: #7a1f14;
  --t-cmd-bg:      #0b1e3a;
  --t-cmd-caret:   #2f7bff;

  --t-focus:       #ffd75e;
  --cell:          14px;
  --line:          18px;
}

/* The phosphor alternative — an honest CRT homage, off unless asked for via SET. */
:root[data-phos="1"] {
  --t-amber:     #33ff66;
  --t-amber-hi:  #8dffab;
  --t-amber-dim: #1f9c3f;
  --t-field-bg:  #33ff66;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--t-bg); color: var(--t-amber);
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: var(--cell); line-height: var(--line);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
body { display: flex; flex-direction: column; }

::selection { background: #2f7bff; color: #fff; }

/* ------------------------------- top status ------------------------------- */

#topbar {
  flex: none; height: 20px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 .5ch;
  border-bottom: 1px solid var(--t-rule);
  font-size: 12px; line-height: 20px;
}
.wordmark { color: var(--t-amber); font-weight: 700; letter-spacing: .04em; }
.clocks { color: var(--t-gray); }

/* --------------------------------- panels --------------------------------- */

#grid {
  flex: 1 1 auto; display: grid; gap: 1px; background: var(--t-rule);
  min-height: 0;
}
#grid.panels-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
#grid.panels-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
#grid.panels-3,
#grid.panels-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
@media (max-width: 1279px) {
  #grid.panels-3, #grid.panels-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 699px) {
  #grid, #grid.panels-2, #grid.panels-3, #grid.panels-4 {
    grid-template-columns: 1fr; grid-template-rows: 1fr;
  }
  .panel:not(.focused) { display: none; }
}

.panel {
  background: var(--t-bg-panel); display: flex; flex-direction: column;
  min-width: 0; min-height: 0; border: 1px solid transparent;
}
.panel.focused { border-color: var(--t-amber); }

/* toolbar */
.tbar {
  flex: none; height: 22px; display: flex; align-items: center; gap: 1ch;
  padding: 0 .5ch; background: var(--t-bg-chrome);
  font-size: 12px; line-height: 22px; white-space: nowrap; overflow: hidden;
}
.tbar .subj { color: var(--t-amber); }
.tbar .tb-fn { color: var(--t-white); }
.tbar .spacer { margin-left: auto; }
.tbar .badge {
  color: var(--t-amber); border: 1px solid var(--t-rule); padding: 0 .5ch;
}
.panel.focused .tbar .badge { background: var(--t-amber); color: #000; border-color: var(--t-amber); }
.tbar .qmark { color: var(--t-yellow); }
/* The live indicator: a dot that pulses on each tick, and the time of the last
   successful update — so a stalled feed is visible rather than silent. */
.tbar .live { color: var(--t-green); }
.tbar .live.off { color: var(--t-gray-dim); }
.tbar .live.err { color: var(--t-red); }
@media (prefers-reduced-motion: no-preference) {
  .tbar .live.tick { animation: pulse .9s ease-out 1; }
}
@keyframes pulse { from { color: var(--t-white); } to { color: var(--t-green); } }

/* Queued rows, held back because the reader is not at the top of the list. */
.tit .pend { color: var(--t-yellow); font-weight: 700; }

/* command line */
.cmdwrap { flex: none; position: relative; background: var(--t-cmd-bg); }
.cmd {
  width: 100%; height: 24px; background: transparent; border: 0;
  color: var(--t-white); font: inherit; padding: 0 .5ch; outline: none;
  caret-color: var(--t-cmd-caret);
}
.cmd::placeholder { color: var(--t-gray); }
.panel.focused .cmdwrap { box-shadow: inset 0 0 0 1px var(--t-cmd-caret); }

/* autocomplete */
.ac {
  position: absolute; left: 0; right: 0; top: 24px; z-index: 20;
  background: #0a0a0a; border: 1px solid var(--t-rule);
  max-height: 40vh; overflow-y: auto;
}
.ac[hidden] { display: none; }
.ac .head {
  color: var(--t-cyan-head); padding: 0 .5ch; border-top: 1px solid var(--t-rule);
  font-size: 12px;
}
.ac .head:first-child { border-top: 0; }
.ac .row { padding: 0 .5ch; color: var(--t-amber); cursor: pointer; display: flex; gap: 1ch; }
.ac .row .desc { color: var(--t-gray); margin-left: auto; }
.ac .row.sel { background: #2f7bff; color: #fff; }
.ac .row.sel .desc { color: #dbe7ff; }
.ac .hint { color: var(--t-gray); padding: 0 .5ch; font-size: 12px; text-align: right; }

/* function title bar */
.tit {
  flex: none; height: 20px; background: var(--t-titlebar-bg); color: #fff;
  display: flex; align-items: center; gap: 1.5ch; padding: 0 .5ch;
  font-size: 13px; line-height: 20px; font-weight: 700; white-space: nowrap;
  overflow: hidden;
}
.tit .act { color: #ffd9c9; font-weight: 400; cursor: pointer; }
.tit .act:hover { color: #fff; }
.tit .page { margin-left: auto; font-weight: 400; color: #ffd9c9; }
.tit .name { padding-left: 1.5ch; }
.tit.err { background: #3a0d08; color: var(--t-amber); }

/* function area — NOT `.fn`: the toolbar already owns that name */
.farea {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
  padding: 0 .5ch; scrollbar-width: thin; scrollbar-color: var(--t-rule) transparent;
}
.farea::-webkit-scrollbar { width: 8px; }
.farea::-webkit-scrollbar-thumb { background: var(--t-rule); }

/* -------------------------------- content --------------------------------- */

.hdr {
  color: #000; background: var(--t-amber-dim); font-weight: 700;
  display: flex; gap: 1ch; padding: 0 .5ch; position: sticky; top: 0;
}
.hdr span { color: #000; }

.row {
  display: flex; gap: 1ch; white-space: nowrap; cursor: pointer;
  border-bottom: 1px solid #0f0f0f;
}
.row:hover { background: #101010; }
.row.sel { background: #1a1408; outline: 1px solid var(--t-amber-dim); }
/* Column geometry lives on the BARE class so the header and the data rows share
   one source of truth. They used to be separate — inline width styles in the
   header, CSS widths in the rows — which is how the header came to sit one
   column left of everything it named. It also means there are now no inline
   style attributes anywhere, so `style-src 'self'` needs no `'unsafe-inline'`. */
.num  { width: 4ch;  flex: none; text-align: right; }
.ts   { width: 6ch;  flex: none; }
.src  { width: 18ch; flex: none; overflow: hidden; text-overflow: ellipsis; }
.cc   { width: 4ch;  flex: none; }
.n    { width: 4ch;  flex: none; text-align: right; }
.lag  { width: 7ch;  flex: none; text-align: right; }
.desk { width: 9ch;  flex: none; }
.hl   { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
/* TL's histogram bar. `flex: none` is load-bearing: `.hl` grows, so a bar built
   as a second `.hl` split the row with the text and shoved the outlet names to
   the far right, a column away from the bar they belong to. */
.bar  { flex: none; color: var(--t-amber-dim); letter-spacing: -.08em; }

/* A row that arrived on a live tick. The green edge persists until the next
   tick so it survives a glance away; the wash is the only animation in the
   product and it is the first thing reduced-motion turns off. */
.row.new { box-shadow: inset 2px 0 0 var(--t-green); }
.row.new .ts { color: var(--t-green); }
@media (prefers-reduced-motion: no-preference) {
  .row.new { animation: rowin 1.6s ease-out 1; }
}
@keyframes rowin { from { background: #10301c; } to { background: transparent; } }

.row .num { color: var(--t-amber-dim); }
.row .ts { color: var(--t-gray); }
.row .src { color: var(--t-gray); }
.row .cc { color: var(--t-gray); }
.row .n { color: var(--t-white); }
.row .lag { color: var(--t-gray); }
.row .lag.ok { color: var(--t-green); }
.row .n.hot { color: var(--t-green); }
.row .hl { color: var(--t-amber); }
.row .desk { color: var(--t-cyan); }
/* Another outlet's words, not ours — amber is this paper's headline voice. */
.row .hl.other { color: var(--t-gray); }
/* Volume, not direction: green is reserved for rising/falling, so the WEI bars
   take the dim amber instead. */
.row .vol { color: var(--t-amber-dim); letter-spacing: -.05em; }

.kv { display: flex; gap: 1ch; }
.kv .k { color: var(--t-amber); width: 14ch; flex: none; }
.kv .v { color: var(--t-white); flex: 1 1 auto; }

.prose { color: var(--t-amber-hi); white-space: pre-wrap; max-width: 100ch; padding: var(--line) 0; }
/* The story view's own headline, and a flush-top variant. Both were inline
   style attributes until the CSP review pointed out they could never apply. */
.prose.big { color: var(--t-white); font-weight: 700; padding-bottom: 0; }
.prose.flush { padding-top: 0; }
.meta { color: var(--t-gray); }
.rule { border-top: 1px solid var(--t-rule); margin: 0; height: 0; }
.sect { color: #000; background: var(--t-gray); font-weight: 700; padding: 0 .5ch; margin-top: var(--line); }
.warn { color: var(--t-red); }
.ok { color: var(--t-green); }
.link { color: var(--t-cyan); text-decoration: none; }
.link:hover { text-decoration: underline; }
.ai {
  color: #000; background: var(--t-yellow); font-weight: 700; padding: 0 .5ch;
  display: inline-block;
}
.dev { color: #fff; background: var(--t-red); font-weight: 700; padding: 0 .5ch; }
.spark { color: var(--t-green); letter-spacing: -.05em; }

/* --------------------------------- keybar --------------------------------- */

#keybar {
  flex: none; height: 20px; display: flex; align-items: center; gap: 2ch;
  padding: 0 .5ch; border-top: 1px solid var(--t-rule);
  font-size: 12px; line-height: 20px; color: var(--t-gray);
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
#keybar::-webkit-scrollbar { display: none; }
#keybar b { color: var(--t-amber); font-weight: 400; }
#keybar .k-red b { color: var(--t-red); }
#keybar .k-yellow b { color: var(--t-yellow); }
#keybar .k-blue b { color: var(--t-cmd-caret); }
#keybar .k-dim { color: var(--t-gray-dim); }

/* -------------------------------- noscript -------------------------------- */

.noscript {
  padding: var(--line) 2ch; max-width: 80ch; color: var(--t-amber);
  line-height: 1.5;
}
.noscript a { color: var(--t-cyan); }
.noscript code { color: var(--t-white); }

/* ------------------------------ a11y / motion ----------------------------- */

:focus-visible { outline: 2px solid var(--t-focus); outline-offset: -2px; }
.blink { animation: bl 1.06s steps(1) infinite; }
@keyframes bl { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
  * { transition: none !important; }
}