/* Scroll lab: the palette taken from the logo (Desktop/Illustrations/logo.png and Union.png), by pixel.
 *   icon gradient: highlight #384b5f at the top left, #2c3c4c across the middle, #18212b, #0c1116 in the far corner
 *   the mark and the wordmark: #edf2f7
 * Everything else is built on those two: cold paper from the mist, ink from the deep graphite. No warm beige, no yellow.
 * Loaded after base.css, cards.css and f.css, so the tokens here win. [data-accent] on html or any block switches the accent. */
:root {
  /* the logo */
  --brand-hi: #384b5f; --brand-mid: #2c3c4c; --brand-low: #18212b; --brand-deep: #0c1116; --brand-mist: #edf2f7;
  --brand-gradient: radial-gradient(130% 130% at 22% 16%, #384b5f 0%, #2c3c4c 34%, #18212b 72%, #0c1116 100%);

  /* light sections */
  --color-paper: #f5f7fa;          /* page */
  --color-paper-2: #edf2f7;        /* wells, panels: the mark's own colour */
  --color-paper-3: #e1e7ee;        /* chips, quiet buttons */
  --color-card: #ffffff;
  --color-ink: #111a23;            /* text: the icon's graphite, a step from black */
  --color-ink-2: #34414f;          /* secondary text */
  --color-muted: #5e6b79;          /* labels, captions (4.9:1 on paper) */
  --color-rule: #dde4eb;           /* hairlines */
  --color-grid: #c9d2dc;           /* outlines, dashed slots */
  --color-focus: #111a23;
  --route: #9fadbc;                /* the route line and the station frames */

  /* dark sections: the icon */
  --dark-bg: var(--brand-gradient);
  --dark-ink: #edf2f7; --dark-ink-2: #b4c0cd; --dark-rule: rgb(237 242 247 / 0.14);

  /* status, muted to sit with the cold palette */
  --st-done: #2f6f5e;  --st-done-wash: #e0eeea;
  --st-error: #a3434a; --st-error-wash: #f5e4e5;
  --st-warn: #765a20;  --st-warn-wash: #f1eadb;
  --st-info: #3f5f7e;  --st-info-wash: #e0e8f1;

  /* accent, variant 1: steel blue from the gradient */
  --color-accent: #4d6f91; --color-accent-ink: #ffffff; --color-accent-wash: #dbe5ef; --color-accent-wash-ink: #2d4a66;
  --color-primary: #1e2a36; --color-primary-hover: #384b5f; --color-primary-ink: #ffffff;
  --color-success: var(--st-done);

  --shadow-card: 0 1px 2px rgb(17 26 35 / 0.05), 0 12px 32px -16px rgb(17 26 35 / 0.2);
  --shadow-hair: 0 1px 2px rgb(17 26 35 / 0.07);
  --track: #c3ccd6; --roller: #9fadbc; --ph: var(--color-paper-3); --line-art: #34414f;

  /* hero cards */
  --lc-red: var(--st-error); --lc-red-wash: var(--st-error-wash);
  --lc-amber: var(--st-warn-wash); --lc-amber-ink: var(--st-warn);
}
/* variant 2: no accent, ink only */
[data-accent="ink"] {
  --color-accent: #111a23; --color-accent-ink: #ffffff; --color-accent-wash: #e1e7ee; --color-accent-wash-ink: #111a23;
  --color-primary: #111a23; --color-primary-hover: #34414f;
}
/* variant 3: one warm accent against the cold, for contrast */
[data-accent="warm"] {
  --color-accent: #c0623a; --color-accent-ink: #ffffff; --color-accent-wash: #f6e4da; --color-accent-wash-ink: #7c3a1d;
  --color-primary: #c0623a; --color-primary-hover: #a5532f;
}
/* base.css chrome that was warm */
.plate { background: rgb(17 26 35 / 0.94); }
.plate__name { color: #b4c0cd; }
::selection { background: var(--color-accent-wash); color: var(--color-ink); }

/* ---------- the one icon chip: 36 px square, 18 px Lucide icon dead centre ---------- */
.ico-chip { display: inline-grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 9px; border-radius: 9px; background: var(--color-paper-2); color: var(--color-ink); line-height: 0; }
.ico-chip > svg { display: block; width: 18px; height: 18px; }
.ico-chip--error { background: var(--st-error-wash); color: var(--st-error); }

/* ---------- the one status badge: 22 px pill, dot and word, colour by meaning ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 22px; padding: 0 9px 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; background: var(--color-paper-2); color: var(--color-ink-2); }
.badge > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--done { background: var(--st-done-wash); color: var(--st-done); }
.badge--new, .badge--info { background: var(--st-info-wash); color: var(--st-info); }
.badge--warn { background: var(--st-warn-wash); color: var(--st-warn); }
.badge--error { background: var(--st-error-wash); color: var(--st-error); }
.badge--accent { background: var(--color-accent-wash); color: var(--color-accent-wash-ink); }

/* ---------- the station card (f.js, final.js) ---------- */
.o-station { width: 288px; gap: 10px; padding: 12px 14px 14px 12px; }
.o-station .o-head { min-height: 36px; }
.o-station .o-title { gap: 10px; font-size: 14px; }
.o-station .o-rows { display: grid; gap: 6px; padding-left: 2px; }

/* ---------- the logo ---------- */
.wordmark { display: block; height: auto; }
.app-icon { display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: calc(var(--s) * 0.22); background: var(--brand-gradient); color: var(--brand-mist); }
.app-icon svg { display: block; transform: translateY(2%); }
.dark { background: var(--dark-bg); color: var(--dark-ink); }