/* PAGE: DASHBOARD · RUNWAY — the manager's projection layout.
   Paired with js/pages/dashboard-runway.js. Prefix: .dbr-
   Tokens follow base.css; the state ramp below is shared with the runway bars,
   the fleet bars and the board cells so one colour always means one thing. */

/* Which layout is on screen — the attribute is stamped on #dashboard by the
   dispatcher in js/pages/dashboard.js. Classic is the default when absent. */
#dbr-root { display: none; }
#dashboard[data-dash-view="runway"] #dbr-root   { display: block; }
#dashboard[data-dash-view="runway"] #db-classic { display: none; }

#dbr-root {
  --dbr-done:   #1f9d55;   /* work already ticked off                   */
  --dbr-hand:   #3b82f6;   /* open, but crew + day are set              */
  --dbr-none:   #6b7a8f;   /* open and unplanned — an absence, not a warning */
  --dbr-block:  #ef4444;   /* blocked                                   */
  --dbr-accent: var(--accent);

  --dbr-card:   #101318;
  --dbr-raised: #141922;
  --dbr-sunk:   #0c0f14;
  --dbr-border: #1f2530;
  --dbr-hair:   #2a3040;
  --dbr-ink:    #dce3ed;
  --dbr-dim:    #7a8a9b;
  --dbr-mute:   #4a5565;
}

/* ── Shared atoms ─────────────────────────────────────────────────────────── */
.dbr-spacer  { flex: 1; }
.dbr-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--dbr-mute);
}

.dbr-card {
  background: var(--dbr-card);
  border: 1px solid var(--dbr-border);
  border-radius: 14px;
  overflow: hidden;
}
.dbr-card-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--dbr-border);
}
.dbr-card-head h2 {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--dbr-ink);
}
.dbr-card-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--dbr-mute);
}

.dbr-link {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--dbr-dim); background: none; border: 0; border-radius: 7px;
  padding: 4px 7px; cursor: pointer; transition: color .14s, background .14s;
}
.dbr-link:hover { color: var(--accent); background: rgba(var(--accent-rgb), .08); }

.dbr-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--dbr-dim); background: var(--dbr-sunk);
  border: 1px solid var(--dbr-border); border-radius: 9px;
  padding: 8px 13px; cursor: pointer; transition: color .14s, border-color .14s;
}
.dbr-ghost:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .4); }
.dbr-icon { width: 38px; height: 38px; padding: 0; }
.dbr-icon .material-symbols-outlined { font-size: 20px; }

.dbr-carid {
  display: inline-flex; align-items: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .7px;
  padding: 1px 6px; border-radius: 4px;
  background: #1a2029; color: #9fb0c2; border: 1px solid #242c38;
  white-space: nowrap;
}

.dbr-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.dbr-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.dbr-pill.ok   { color: #4ec27d; background: rgba(31,157,85,.13);   border-color: rgba(31,157,85,.36); }
.dbr-pill.bad  { color: #f87171; background: rgba(239,68,68,.12);   border-color: rgba(239,68,68,.4); }
.dbr-pill.calm { color: #8fa3b8; background: rgba(107,122,143,.12); border-color: rgba(107,122,143,.32); }

.dbr-empty {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 22px 16px; color: var(--dbr-dim); font-size: 13.5px;
}
.dbr-empty-sm { padding: 14px 16px; font-size: 13px; }
.dbr-empty .material-symbols-outlined { font-size: 20px; color: var(--dbr-mute); }
.dbr-error { padding: 30px 16px; color: #f87171; display: flex; align-items: center; gap: 12px; }

.dbr-skel-wrap { display: flex; flex-direction: column; gap: 14px; }
.dbr-skel {
  display: block; border-radius: 14px;
  background: linear-gradient(90deg, #131820 25%, #1a212b 37%, #131820 63%);
  background-size: 400% 100%; animation: dbr-shim 1.3s ease infinite;
}
@keyframes dbr-shim { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ── Command bar ──────────────────────────────────────────────────────────── */
.dbr-top {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.dbr-title-row { display: flex; align-items: center; gap: 10px; }
.dbr-title-row h1 { margin: 0; }
.dbr-stamp {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: #5a6a7b; margin-top: 4px;
}

.dbr-segbar {
  display: flex; gap: 2px;
  background: var(--dbr-sunk); border: 1px solid var(--dbr-border);
  border-radius: 9px; padding: 3px;
}
.dbr-segbar button {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--dbr-dim); background: none; border: 0; border-radius: 6px;
  padding: 5px 12px; cursor: pointer; transition: background .14s, color .14s;
}
.dbr-segbar button:hover { color: var(--dbr-ink); }
.dbr-segbar button[aria-pressed="true"] { background: #212934; color: var(--dbr-ink); }

/* ── Decisions ────────────────────────────────────────────────────────────── */
.dbr-decisions { margin-bottom: 16px; }
.dbr-dec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.dbr-dec-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--dbr-ink);
}
.dbr-dec-note { font-size: 12.5px; color: var(--dbr-mute); }

.dbr-dec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dbr-dec {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--dbr-card);
  border: 1px solid var(--dbr-border);
  border-left: 3px solid var(--tone, var(--dbr-none));
  border-radius: 10px; padding: 12px 14px;
}
.dbr-dec-why {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--tone);
}
.dbr-dec-ask { font-size: 14.5px; font-weight: 600; color: var(--dbr-ink); line-height: 1.3; }
.dbr-dec-cost { font-size: 12.5px; color: var(--dbr-dim); line-height: 1.35; }
.dbr-dec-acts { display: flex; gap: 7px; margin-top: 2px; }
.dbr-dec-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  border-radius: 7px; padding: 5px 11px; cursor: pointer;
  border: 1px solid var(--dbr-hair); background: var(--dbr-raised); color: var(--dbr-dim);
  transition: color .14s, border-color .14s, background .14s;
}
.dbr-dec-btn:hover { color: var(--dbr-ink); border-color: #3a4553; }
.dbr-dec-btn.primary {
  background: rgba(var(--accent-rgb), .12);
  border-color: rgba(var(--accent-rgb), .4); color: var(--accent);
}
.dbr-dec-btn.primary:hover { background: rgba(var(--accent-rgb), .2); }

.dbr-allclear {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(31,157,85,.08); border: 1px solid rgba(31,157,85,.28);
  color: #7fd3a1; font-size: 13.5px;
}
.dbr-allclear .material-symbols-outlined { font-size: 19px; }

/* ── Runway ───────────────────────────────────────────────────────────────── */
.dbr-runway { margin-bottom: 16px; }
.dbr-rw-scroll { overflow-x: auto; }
.dbr-rw-inner  { min-width: 860px; padding: 4px 16px 16px; }

.dbr-rw-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  align-items: center; gap: 0 14px;
}
.dbr-rw-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--dbr-mute);
  text-align: right; padding-right: 6px;
}

.dbr-rw-axis { position: relative; height: 34px; }
.dbr-rw-axisline { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--dbr-border); }
.dbr-rw-week {
  position: absolute; bottom: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--dbr-mute); transform: translateX(2px);
}
.dbr-rw-tick { position: absolute; bottom: 0; width: 1px; height: 5px; background: var(--dbr-border); }
/* Dead days — texture behind the bars, never a grid competing with them */
.dbr-rw-weekend { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.012); pointer-events: none; }

.dbr-rw-plot { position: relative; }
.dbr-rw-mark { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; }
.dbr-rw-mark.loadout { border-left: 1px solid rgba(239,68,68,.45); }
.dbr-rw-mark.race    { border-left: 1px dashed rgba(220,230,240,.28); }
.dbr-rw-mark.now {
  border-left: 1.5px solid var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .35);
}
.dbr-rw-flag {
  position: absolute; top: -2px; transform: translateX(-50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  white-space: nowrap; padding: 2px 7px; border-radius: 4px; z-index: 4;
}
.dbr-rw-flag.loadout { color: #f87171; background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.4); }
.dbr-rw-flag.now     { color: #0d1005; background: var(--accent); }

.dbr-rw-events { height: 26px; margin-bottom: 6px; }
.dbr-rw-evband {
  position: absolute; top: 4px; height: 18px; border-radius: 4px;
  background: rgba(255,255,255,.05); border: 1px solid var(--dbr-hair);
  display: flex; align-items: center; padding: 0 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: #b8c6d6; overflow: hidden; white-space: nowrap;
}

.dbr-rw-lane { border-top: 1px solid rgba(255,255,255,.04); }
.dbr-rw-caprow { border-top: 1px solid var(--dbr-border); margin-top: 6px; }

.dbr-rw-label {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 0; min-width: 0; border-radius: 8px;
}
.dbr-rw-label[role="button"] { cursor: pointer; }
.dbr-rw-label[role="button"]:hover .dbr-rw-nm { color: var(--accent); }
.dbr-rw-carid {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  color: #9fb0c2; background: #1a2029; border: 1px solid #242c38;
  border-radius: 4px; padding: 1px 6px; white-space: nowrap; flex: none;
}
.dbr-rw-meta { min-width: 0; }
.dbr-rw-nm {
  font-size: 12.5px; font-weight: 600; color: #b8c6d6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .14s;
}
.dbr-rw-ev {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--dbr-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dbr-rw-track { height: 46px; }
.dbr-rw-bar {
  position: absolute; top: 11px; height: 24px;
  border-radius: 4px; display: flex; overflow: hidden;
  background: var(--dbr-sunk); cursor: pointer;
  transition: filter .14s; z-index: 2;
}
.dbr-rw-bar:hover { filter: brightness(1.18); }
.dbr-rw-seg { height: 100%; }
.dbr-rw-seg + .dbr-rw-seg { border-left: 2px solid var(--dbr-card); }
.dbr-rw-seg.hand  { background: var(--dbr-hand); }
.dbr-rw-seg.none  { background: var(--dbr-none); }
.dbr-rw-seg.block { background: var(--dbr-block); }

/* Work that lands after the truck leaves. A dark scrim, not a red one — it has
   to read over every segment colour including the red blocked one, and
   "shaded out" is the right metaphor for work that never happens in time. */
.dbr-rw-over {
  position: absolute; top: 11px; height: 24px; z-index: 3;
  border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(135deg,
    rgba(6,8,11,.82) 0 4px, rgba(6,8,11,.15) 4px 9px);
  border-left: 2px solid #ef4444;
  pointer-events: none;
}
.dbr-rw-verdict {
  position: absolute; top: 13px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  white-space: nowrap; padding-left: 9px;
}
.dbr-rw-verdict.ok  { color: #4ec27d; }
.dbr-rw-verdict.bad { color: #f87171; }

.dbr-rw-cap { height: 46px; margin-top: 2px; }
.dbr-rw-capcol { position: absolute; bottom: 12px; border-radius: 2px 2px 0 0; background: #2c3646; }
.dbr-rw-capcol.over { background: rgba(239,68,68,.75); }
.dbr-rw-capbase { position: absolute; left: 0; right: 0; bottom: 12px; height: 1px; background: var(--dbr-border); }
.dbr-rw-capline { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(200,215,230,.34); }

.dbr-rw-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 11px 16px; border-top: 1px solid var(--dbr-border); background: var(--dbr-sunk);
}
.dbr-lg {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--dbr-dim);
}
.dbr-lg.muted { color: var(--dbr-mute); }
.dbr-lg i { width: 11px; height: 11px; border-radius: 3px; display: block; flex: none; }
.dbr-lg i.hand  { background: var(--dbr-hand); }
.dbr-lg i.none  { background: var(--dbr-none); }
.dbr-lg i.block { background: var(--dbr-block); }
.dbr-lg.hatch i {
  background: repeating-linear-gradient(135deg,
    rgba(6,8,11,.85) 0 3px, rgba(120,130,145,.55) 3px 6px);
  border-left: 2px solid #ef4444; border-radius: 0 3px 3px 0;
}

/* ── Three-panel row ──────────────────────────────────────────────────────── */
.dbr-cols {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr;
  gap: 14px; margin-bottom: 16px; align-items: start;
}

/* Fleet readiness */
.dbr-fl { padding: 6px 0; }
.dbr-fl-row {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 11px 16px; border-top: 1px solid rgba(255,255,255,.04); cursor: pointer;
  transition: background .14s;
}
.dbr-fl-row:first-child { border-top: 0; }
.dbr-fl-row:hover { background: rgba(255,255,255,.02); }
.dbr-fl-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dbr-fl-name { font-size: 13.5px; font-weight: 600; color: var(--dbr-ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.dbr-fl-bar {
  grid-column: 1 / -1; display: flex; height: 9px; border-radius: 3px;
  overflow: hidden; background: var(--dbr-sunk); margin-top: 3px;
}
.dbr-fl-bar span { height: 100%; }
.dbr-fl-bar span + span { border-left: 2px solid var(--dbr-card); }
.dbr-fl-bar .done  { background: var(--dbr-done); }
.dbr-fl-bar .hand  { background: var(--dbr-hand); }
.dbr-fl-bar .none  { background: var(--dbr-none); }
.dbr-fl-bar .block { background: var(--dbr-block); }
.dbr-fl-sub { grid-column: 1 / -1; font-size: 12.5px; color: var(--dbr-dim); margin-top: 5px; }
.dbr-fl-sub b { color: #b8c6d6; font-weight: 600; }

/* Crew capacity */
.dbr-cap-hero { padding: 15px 16px 13px; border-bottom: 1px solid var(--dbr-border); }
.dbr-cap-figure { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dbr-cap-v {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 40px; font-weight: 700; line-height: .9; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.dbr-cap-v.bad { color: #f87171; }
.dbr-cap-v.ok  { color: #4ec27d; }
.dbr-cap-u {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--dbr-dim);
}
.dbr-cap-cap { font-size: 12.5px; color: var(--dbr-dim); margin-top: 7px; line-height: 1.4; }
.dbr-cap-cap b { color: #b8c6d6; font-weight: 600; }
.dbr-cap-split {
  display: flex; height: 8px; border-radius: 3px; overflow: hidden;
  background: var(--dbr-sunk); margin-top: 10px;
}
.dbr-cap-split .have { background: var(--dbr-hand); }
.dbr-cap-split .gap  { background: var(--dbr-block); border-left: 2px solid var(--dbr-card); }

.dbr-crew { padding: 6px 0 10px; }
.dbr-crew-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 8px 16px; }
.dbr-av {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .3px; flex: none;
}
.dbr-av.auto { background: rgba(59,130,246,.22); color: #3b82f6; }
.dbr-av-photo { background-size: cover; background-position: center; }
.dbr-crew-meta { min-width: 0; }
.dbr-crew-nm { font-size: 12.5px; font-weight: 600; color: #cfdae6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbr-crew-role { color: var(--dbr-mute); font-weight: 400; }
.dbr-crew-load { height: 6px; border-radius: 3px; background: var(--dbr-sunk); margin-top: 4px; position: relative; }
.dbr-crew-load i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--dbr-hand); border-radius: 3px; }
.dbr-crew-load i.over { background: var(--dbr-block); }
/* one shared scale across the crew, so a notch marks each person's own ceiling */
.dbr-crew-load u { position: absolute; top: -2px; bottom: -2px; width: 1px; background: rgba(220,230,240,.55); }
.dbr-crew-h {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12.5px; font-weight: 700; text-align: right; color: var(--dbr-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dbr-crew-h.over { color: #f87171; }

/* Supply line */
.dbr-sup-row {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 10px;
  padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.04);
  cursor: pointer; transition: background .14s;
}
.dbr-sup-row:first-child { border-top: 0; }
.dbr-sup-row:hover { background: rgba(255,255,255,.02); }
.dbr-sup-nm { font-size: 13px; font-weight: 600; color: var(--dbr-ink); }
.dbr-sup-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dbr-sup-when {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--dbr-mute);
}
.dbr-sup-when b { color: #9fb0c2; font-weight: 700; }
.dbr-sup-when.late { color: #f87171; }
.dbr-sup-foot {
  padding: 10px 16px; border-top: 1px solid var(--dbr-border);
  background: var(--dbr-sunk); font-size: 12.5px; color: var(--dbr-dim);
}

/* ── Workshop pulse ───────────────────────────────────────────────────────── */
.dbr-pulse { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.dbr-pulse-cell { padding: 13px 16px; border-left: 1px solid var(--dbr-border); }
.dbr-pulse-cell:first-child { border-left: 0; }
.dbr-pulse-lbl { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.dbr-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), .8); flex: none;
  animation: dbr-pulse 2s ease-in-out infinite;
}
@keyframes dbr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.dbr-live-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; }
.dbr-live-row:hover .dbr-live-t { color: var(--accent); }
.dbr-live-main { flex: 1; min-width: 0; }
.dbr-live-t { font-size: 13px; font-weight: 600; color: var(--dbr-ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: color .14s; }
.dbr-live-s { font-size: 12px; color: var(--dbr-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dbr-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dbr-board-cell {
  background: var(--dbr-sunk); border: 1px solid var(--dbr-border);
  border-radius: 7px; padding: 8px 9px; border-top: 2px solid var(--tone, var(--dbr-none));
}
.dbr-board-v {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1; color: var(--dbr-ink);
  font-variant-numeric: tabular-nums;
}
.dbr-board-l {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--dbr-mute); margin-top: 3px;
}

/* ── Focus ────────────────────────────────────────────────────────────────── */
#dbr-root [tabindex]:focus-visible,
#dbr-root button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .dbr-cols { grid-template-columns: 1fr 1fr; }
  .dbr-cols > .dbr-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .dbr-dec-grid { grid-template-columns: 1fr; }
  .dbr-cols { grid-template-columns: 1fr; }
  .dbr-cols > .dbr-card:first-child { grid-column: auto; }
  .dbr-pulse { grid-template-columns: 1fr; }
  .dbr-pulse-cell { border-left: 0; border-top: 1px solid var(--dbr-border); }
  .dbr-pulse-cell:first-child { border-top: 0; }
  .dbr-top { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .dbr-live-dot, .dbr-skel { animation: none; }
}

/* ── View switcher (shared with the classic dashboard header) ─────────────── */
.db-viewswitch {
  display: inline-flex; gap: 2px;
  background: #0c0f14; border: 1px solid #1f2530;
  border-radius: 9px; padding: 3px;
}
.db-viewswitch-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #7a8a9b; background: none; border: 0; border-radius: 6px;
  padding: 5px 12px; cursor: pointer; transition: background .14s, color .14s;
}
.db-viewswitch-btn:hover { color: #dce3ed; }
.db-viewswitch-btn[aria-pressed="true"] {
  background: rgba(var(--accent-rgb), .13);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3);
}
.db-viewswitch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }