/* Pardee Oil & Gas — design system, rebuilt to the Sep 2026 design handoff
   (design_handoff_og_frontend): dark forest rail, warm-stone content, forest/slate/stone
   palette, mono labels, neutral score chips. Fidelity target is the handoff's captures.
   Class names are preserved so screens can migrate one at a time; a few OLD token aliases are
   kept at the bottom of :root while the per-screen markup is still being rebuilt. */

:root {
  /* Shell */
  --sidebar:      #1B2621;
  --sidebar-rim:  rgba(255,255,255,0.08);
  --sidebar-text: #9FB0A6;
  --sidebar-on:   #F2EFE8;
  --sidebar-mark: #6E9B7F;
  --logo:         #3E7A61;

  /* Surfaces */
  --void:    #F4F2ED;
  --surface: #FFFFFF;
  --raised:  #FAF8F4;
  --topbar:  #FBFAF7;
  --rim:     #E2DED4;
  --rim2:    #EDE9E0;
  --rim3:    #D9D4C8;

  /* Ink */
  --text:  #23302A;
  --muted: #6B7873;
  --faint: #8A948E;

  /* Brand + accents */
  --forest: #2E5847;
  --forest-strong: #1F3E31;
  --slate:  #4A6076;
  --gold:   #9A7B2E;   /* ADJACENCY ONLY */
  --stone:  #786E5C;

  /* Category hues (desaturated set) */
  --cat-decline:    #8C5E4A;
  --cat-bankruptcy: #9B4D45;
  --cat-estate:     #7A5563;
  --cat-registry:   #4A6076;
  --cat-blm:        #3D6B7A;
  --cat-permit:     #2E5847;
  --cat-county:     #5E7A5A;

  /* Review-state hues */
  --rv-unreviewed: #8A948E;
  --rv-watching:   #4A6076;
  --rv-working:    #2E5847;
  --rv-passed:     #9A9689;

  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sidebar-w: 232px;

  /* --- back-compat aliases: old token names still referenced by not-yet-rebuilt screens.
     Removed once every screen is migrated. --- */
  --brand:      #2E5847;
  --brand-strong: #1F3E31;
  --brand-rgb:  46,88,71;
  --deep:       #FBFAF7;
  --panel:      #EEEAE1;
  --coral:  #8C5E4A; --coral2: #9B4D45; --jade: #2E5847; --jade2: #5E7A5A;
  --sky: #3D6B7A; --lavender: #7A5563; --rose: #9B4D45;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  background:var(--void); color:var(--text); font-family:var(--sans); font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
button { font-family:inherit; cursor:pointer; border:none; outline:none; background:none; color:inherit; }
input, select { font-family:inherit; }
a { color:var(--forest); text-decoration:none; }
a:hover { color:var(--forest-strong); }
h1,h2,h3 { letter-spacing:-0.01em; font-weight:600; }
#app { display:flex; height:100vh; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:#D5D0C4; border-radius:5px; }
::-webkit-scrollbar-track { background:transparent; }
::selection { background:rgba(46,88,71,0.16); }

/* Mono label — the load-bearing typographic motif (uppercase, tracked). */
.lbl { font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:0.9px; text-transform:uppercase; color:var(--muted); }

/* ---------- SIDEBAR (dark rail) ---------- */
.sidebar { width:var(--sidebar-w); flex-shrink:0; background:var(--sidebar); color:var(--sidebar-text); display:flex; flex-direction:column; overflow:hidden; }
.sidebar-header { padding:20px 18px 16px; }
.logo-mark { display:flex; align-items:center; gap:10px; }
.logo-sq { width:32px; height:32px; border-radius:8px; background:var(--logo); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#fff; }
.logo-text { font-size:14px; font-weight:600; color:var(--sidebar-on); }
.logo-sub { font-size:9.5px; color:var(--sidebar-text); margin-top:1px; }
.nav-section { padding:16px 18px 8px; font-family:var(--mono); font-size:9px; letter-spacing:1px; text-transform:uppercase; color:#6C7D73; }
.nav-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 18px; font-size:12.5px; color:var(--sidebar-text); border-left:2px solid transparent; transition:background .12s ease, color .12s ease; }
.nav-item:hover { color:var(--sidebar-on); background:rgba(255,255,255,0.04); text-decoration:none; }
.nav-item:focus-visible { outline:2px solid var(--sidebar-mark); outline-offset:-2px; }
.nav-item.active { color:var(--sidebar-on); background:rgba(255,255,255,0.07); border-left-color:var(--sidebar-mark); }
.nav-icon { width:16px; text-align:center; font-size:13px; opacity:.9; }
.nav-badge { margin-left:auto; font-size:9.5px; font-weight:600; padding:1px 6px; border-radius:8px; background:rgba(110,155,127,0.18); color:#A9C4B4; }
.sidebar-foot { margin-top:auto; padding:14px 18px; border-top:1px solid var(--sidebar-rim); font-size:10px; color:#7C8C82; line-height:1.7; }

/* ---------- MAIN + TOP BAR ---------- */
.main { flex:1; display:flex; flex-direction:column; min-width:0; }  /* NO overflow:hidden — would clip the Admin dropdown */
.topbar { height:54px; flex-shrink:0; background:var(--topbar); border-bottom:1px solid var(--rim); display:flex; align-items:center; padding:0 22px; gap:14px; position:relative; z-index:50; white-space:nowrap; }
.topbar > * { flex-shrink:0; }
.topbar-title { font-size:15px; font-weight:600; color:var(--text); }
.topbar-spacer { flex:1 1 auto; min-width:0; }
.tb-refresh { display:inline-flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }
.tb-refresh .dot { width:6px; height:6px; border-radius:50%; background:var(--forest); }
.tb-refresh .tb-auto { opacity:.7; }
.tb-divider { width:1px; height:22px; background:var(--rim); }
.btn-refresh { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; padding:5px 11px; border-radius:7px; border:1px solid var(--rim3); color:var(--text); background:var(--surface); }
.btn-refresh:hover { background:var(--raised); }
.tb-user { display:inline-flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); }
.tb-avatar { width:24px; height:24px; border-radius:50%; background:var(--forest); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:600; letter-spacing:.3px; }

/* Admin dropdown */
.admin-wrap { position:relative; }
.admin-btn { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; padding:5px 10px; border-radius:7px; border:1px solid var(--rim); color:var(--muted); background:transparent; cursor:pointer; list-style:none; }
.admin-wrap > summary::-webkit-details-marker { display:none; }
.admin-wrap > summary::marker { content:""; }
.admin-btn:hover, .admin-wrap[open] > .admin-btn { color:var(--text); background:#EFECE4; }
.admin-menu { position:absolute; top:34px; right:0; z-index:120; width:252px; background:var(--surface); border:1px solid var(--rim); border-radius:10px; box-shadow:0 12px 34px rgba(31,45,38,0.14); padding:8px; }
.admin-menu .lbl { display:block; padding:8px 10px 6px; }
.admin-item { display:block; width:100%; text-align:left; padding:8px 10px; border-radius:7px; color:var(--text); }
.admin-item:hover { background:var(--raised); text-decoration:none; }
.admin-item .t { font-size:12.5px; font-weight:600; }
.admin-item .d { font-size:10.5px; color:var(--muted); margin-top:1px; }

/* ---------- CONTENT ---------- */
.content { flex:1; overflow-y:auto; padding:22px 24px 40px; }
.content-inner { max-width:1320px; margin:0 auto; }

/* ---------- CARD + label/value ---------- */
.card { background:var(--surface); border:1px solid var(--rim); border-radius:12px; padding:18px; }
.card-title { font-size:12.5px; font-weight:600; color:var(--text); }
.val { font-size:23px; font-weight:600; color:var(--text); line-height:1.1; font-variant-numeric:tabular-nums; }
.note { font-size:11px; color:var(--muted); line-height:1.55; }
.lv-label { font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:0.9px; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.lv-value { font-size:13px; font-weight:600; color:var(--text); }
.lv-value.unavailable { color:var(--faint); font-weight:500; }
.lv-note { font-size:10.5px; color:var(--muted); margin-top:2px; line-height:1.5; }

/* Section header */
.sh { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.sh h2 { font-size:14px; font-weight:600; color:var(--text); }
.sh .link { margin-left:auto; font-size:11.5px; color:var(--forest); font-weight:500; }
.page-sub { font-size:12px; color:var(--muted); margin:-6px 0 16px; line-height:1.6; }

/* ---------- PILLS / TAGS ---------- */
.tag { display:inline-flex; align-items:center; font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:0.4px; text-transform:uppercase; padding:2.5px 7px; border-radius:4px; white-space:nowrap; color:var(--text); }
.tag-decline    { background:rgba(140,94,74,0.12);  border:1px solid rgba(140,94,74,0.28); }
.tag-bankruptcy { background:rgba(155,77,69,0.12);  border:1px solid rgba(155,77,69,0.28); }
.tag-estate     { background:rgba(122,85,99,0.12);  border:1px solid rgba(122,85,99,0.28); }
.tag-registry   { background:rgba(74,96,118,0.12);  border:1px solid rgba(74,96,118,0.28); }
.tag-blm        { background:rgba(61,107,122,0.12); border:1px solid rgba(61,107,122,0.28); }
.tag-permit     { background:rgba(46,88,71,0.12);   border:1px solid rgba(46,88,71,0.28); }
.tag-county     { background:rgba(94,122,90,0.12);  border:1px solid rgba(94,122,90,0.28); }
.tag-forest     { background:rgba(62,122,97,0.12);  border:1px solid rgba(62,122,97,0.28); }
.tag-slate      { background:rgba(74,96,118,0.12);  border:1px solid rgba(74,96,118,0.28); }
.tag-mute, .tag-stone { background:rgba(120,110,92,0.12); border:1px solid rgba(120,110,92,0.26); color:var(--muted); }
.tag-gold       { background:rgba(154,123,46,0.13); border:1px solid rgba(154,123,46,0.30); }
/* old-alias tag classes (still emitted by presentation.py until the vocab pass) */
.tag-ok { background:rgba(46,88,71,0.12); border:1px solid rgba(46,88,71,0.28); }
.tag-lav { background:rgba(122,85,99,0.12); border:1px solid rgba(122,85,99,0.28); }
.tag-brand { background:rgba(46,88,71,0.12); border:1px solid rgba(46,88,71,0.28); color:var(--forest-strong); }
.tag-sky { background:rgba(61,107,122,0.12); border:1px solid rgba(61,107,122,0.28); }

/* ---------- SCORE CHIP (banded by numeric score, desaturated) ---------- */
.score { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; height:36px; border-radius:50%; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); background:rgba(138,148,142,0.09); border:1.5px solid rgba(138,148,142,0.3); }
.score-lg { width:48px; height:48px; font-size:16px; }
.score-hi  { background:rgba(46,88,71,0.09);  border-color:rgba(46,88,71,0.30); }   /* >=70 */
.score-mid { background:rgba(74,96,118,0.09); border-color:rgba(74,96,118,0.30); }  /* 45-69 */
.score-lo  { background:rgba(138,148,142,0.09); border-color:rgba(138,148,142,0.30); } /* <45 */
/* old tier aliases → map onto the banded look */
.score-hot { background:rgba(46,88,71,0.09); border:1.5px solid rgba(46,88,71,0.30); }
.score-med { background:rgba(74,96,118,0.09); border:1.5px solid rgba(74,96,118,0.30); }

/* Unified score bands (scoring/unified.py): circle colour by band + a tiny caption under it. */
.score.band-priority  { background:rgba(180,83,38,0.12);  border-color:rgba(180,83,38,0.40); }
.score.band-strong    { background:rgba(46,88,71,0.11);   border-color:rgba(46,88,71,0.36); }
.score.band-qualified { background:rgba(140,118,38,0.12); border-color:rgba(140,118,38,0.36); }
.score.band-watch     { background:rgba(138,148,142,0.10);border-color:rgba(138,148,142,0.30); }
.score.band-indicator { background:rgba(74,96,118,0.10);  border-color:rgba(74,96,118,0.30); }
.score.band-excluded  { background:rgba(138,148,142,0.06);border-color:rgba(138,148,142,0.22); color:var(--muted); }
.sc-wrap { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.sc-band { font-size:8.5px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.sc-conf { font-size:8px; color:var(--muted); white-space:nowrap; }

/* Review chip */
.rv-chip { display:inline-flex; align-items:center; font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:0.4px; text-transform:uppercase; padding:3px 8px; border-radius:4px; white-space:nowrap; }
.rv-unreviewed { background:rgba(138,148,142,0.12); border:1px solid rgba(138,148,142,0.30); color:var(--muted); }
.rv-watching { background:rgba(74,96,118,0.12);  border:1px solid rgba(74,96,118,0.30); color:var(--text); }
.rv-working  { background:rgba(46,88,71,0.12);   border:1px solid rgba(46,88,71,0.30); color:var(--text); }
.rv-passed   { background:rgba(154,150,137,0.14); border:1px solid rgba(154,150,137,0.30); color:var(--muted); }

/* ---------- BUTTONS / INPUTS ---------- */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; font-size:12px; font-weight:600; transition:background .14s ease, border-color .14s ease; }
.btn-brand { background:var(--forest); color:#fff; }
.btn-brand:hover { background:var(--forest-strong); color:#fff; text-decoration:none; }
.btn-ghost { background:var(--surface); border:1px solid var(--rim3); color:var(--text); }
.btn-ghost:hover { background:var(--raised); text-decoration:none; }
.btn:focus-visible { outline:2px solid var(--forest); outline-offset:2px; }
.input { width:100%; box-sizing:border-box; padding:10px 12px; border-radius:8px; border:1px solid var(--rim3); background:var(--surface); color:var(--text); font-size:13px; transition:border-color .14s ease, box-shadow .14s ease; }
.input:focus-visible { outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(46,88,71,0.14); }
select.input { appearance:auto; }
.form-error { background:rgba(155,77,69,0.10); border:1px solid rgba(155,77,69,0.30); border-radius:8px; padding:11px 13px; font-size:11.5px; color:var(--text); margin-bottom:14px; }

/* Filter bar (lead list) */
.filterbar { display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; margin-bottom:16px; font-size:11px; color:var(--muted); }
.filter-grp { display:inline-flex; align-items:center; gap:7px; }
.seg { display:inline-flex; border:1px solid var(--rim3); border-radius:7px; overflow:hidden; }
.seg a { padding:5px 11px; font-size:11.5px; color:var(--muted); border-right:1px solid var(--rim3); }
.seg a:last-child { border-right:none; }
.seg a:hover { background:var(--raised); text-decoration:none; }
.seg a.on { background:var(--forest); color:#fff; }
.filter-select { padding:6px 10px; border-radius:7px; border:1px solid var(--rim3); background:var(--surface); font-size:11.5px; color:var(--text); }

/* Rows / tables */
.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; padding:9px 12px; font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:0.9px; color:var(--muted); text-transform:uppercase; border-bottom:1px solid var(--rim2); }
.tbl td { padding:11px 12px; border-bottom:1px solid var(--rim2); font-size:12px; color:var(--text); }
.tbl tr:last-child td { border-bottom:none; }
.tbl tbody tr:hover { background:var(--raised); }
.tbl tr.row-inactive td { opacity:0.5; }

/* Generic lead row (dashboard/leads use a grid variant; keep this for compatibility) */
.lead { display:flex; align-items:center; gap:14px; padding:13px 16px; border-radius:9px; background:var(--surface); border:1px solid var(--rim); margin-bottom:8px; transition:border-color .14s ease, background .14s ease; }
.lead:hover { border-color:var(--rim3); background:var(--raised); text-decoration:none; }
.lead:focus-visible { outline:2px solid var(--forest); outline-offset:2px; }
.lead-info { flex:1; min-width:0; }
.lead-name { font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lead-meta { font-size:10.5px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lead-tags { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; flex-shrink:0; }

/* Adjacency band */
.band { border:1px solid var(--rim); background:var(--raised); border-radius:12px; padding:14px 16px; margin-bottom:18px; }
.band-label { display:flex; align-items:center; gap:8px; margin-bottom:10px; }

/* Lead-list row grid — one template shared by the header, band rows and table rows so columns
   stay aligned. The two blocks sit in ONE horizontal-scroll container (design handoff §5.4). */
.lead-scroll { overflow-x:auto; }
.lead-grid {
  display:grid;
  grid-template-columns:44px minmax(150px,1.7fr) 72px 86px minmax(110px,1.3fr) 44px minmax(110px,1.4fr) 78px 96px 80px;
  gap:12px; align-items:center; min-width:980px;
}
.lead-grid > * { min-width:0; }
.lg-head { font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:0.9px; text-transform:uppercase; color:var(--muted); padding:0 2px 12px; }
.lg-head a { color:var(--muted); }
.lg-head a.on { color:var(--text); }
.lg-row { padding:12px 2px; border-top:1px solid var(--rim2); color:inherit; }
.lg-row:hover { background:var(--raised); text-decoration:none; }
.lg-cell { font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lg-sub { font-size:10px; color:var(--muted); margin-top:2px; }
.lg-num { font-variant-numeric:tabular-nums; }
.lg-unavail { color:var(--faint); }

/* Empty state (dashed) */
.empty { border:1px dashed var(--rim3); border-radius:12px; padding:22px; text-align:center; color:var(--muted); background:transparent; }
.empty .t { font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:4px; }
.empty .d { font-size:11.5px; color:var(--muted); line-height:1.6; }

/* Inset / value box (kept from prior, retoned) */
.inset { background:var(--raised); border:1px solid var(--rim); border-radius:10px; padding:14px 16px; font-size:12px; color:var(--muted); line-height:1.7; }
.inset strong { color:var(--text); font-weight:600; }
.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:22px}

/* Grid helpers */
.g4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.g4 > * { min-width:0; }
.stat { display:flex; flex-direction:column; gap:7px; }
.ref-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:13px; }

/* ---------- LOGIN (two-column) ---------- */
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--void); }
.login-grid { width:100%; max-width:1040px; display:grid; grid-template-columns:1fr 400px; gap:56px; align-items:center; }
.login-marketing h1 { font-size:31px; font-weight:600; line-height:1.15; letter-spacing:-0.02em; }
.login-marketing p { font-size:13.5px; color:var(--muted); line-height:1.7; margin-top:14px; max-width:44ch; }
.login-card { width:100%; max-width:400px; padding:30px; background:var(--surface); border:1px solid var(--rim); border-radius:12px; }
@media (max-width:900px){ .login-grid{ grid-template-columns:1fr; gap:28px; max-width:400px; } .login-marketing{ display:none; } }

/* ---------- LEAD DETAIL (design handoff §5.5) ---------- */
.dt-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.dt-title { font-size:21px; font-weight:600; color:var(--text); letter-spacing:-0.2px; }
.dt-back { font-size:11px; color:var(--muted); margin-bottom:8px; display:inline-block; }
.dt-score-card { display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--rim); border-radius:11px; padding:11px 15px; }
.dt-score-note { font-size:11.5px; color:var(--text); margin-top:3px; }
.dt-rank-note { font-size:10px; color:var(--faint); margin-top:2px; max-width:26ch; line-height:1.45; }
.dt-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr); gap:16px; align-items:start; }
.dt-col { display:flex; flex-direction:column; gap:14px; min-width:0; }
.dt-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:15px 18px; }
/* Review segmented control — POST buttons, one active */
.rvseg { display:inline-flex; border:1px solid var(--rim3); border-radius:7px; overflow:hidden; }
.rvseg button { padding:5px 11px; font-size:11.5px; color:var(--muted); background:transparent; border:none; border-right:1px solid var(--rim3); cursor:pointer; font-family:inherit; }
.rvseg button:last-child { border-right:none; }
.rvseg button:hover { background:var(--raised); }
.rvseg button.on { background:var(--forest); color:#fff; }
/* Contributing sources */
.dt-src { display:flex; gap:13px; padding:12px 0; border-bottom:1px solid var(--rim2); }
.dt-src:last-child { border-bottom:none; }
.dt-src-dot { flex-shrink:0; width:8px; height:8px; border-radius:50%; margin-top:5px; }
.dt-src-title { font-size:12px; font-weight:500; color:var(--text); }
.dt-src-desc { font-size:11px; color:var(--muted); margin-top:2px; line-height:1.6; }
.dt-src-meta { text-align:right; flex-shrink:0; }
.dt-src-weight { font-family:var(--mono); font-size:11px; color:var(--slate); margin-top:6px; }
/* Checklist + provenance rows */
.dt-check { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--rim2); }
.dt-check:last-child { border-bottom:none; }
.dt-check-mark { flex-shrink:0; width:15px; font-size:12px; }
.dt-check-mark.done { color:var(--forest); }
.dt-check-mark.todo { color:var(--rim3); }
.dt-check-owner { font-size:9.5px; color:var(--faint); flex-shrink:0; padding-top:1px; }
.dt-prov { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--rim2); }
.dt-prov:last-child { border-bottom:none; }
.dt-prov-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.dt-prov-status { font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:0.3px; text-transform:uppercase; }
/* DD tools */
.dt-tools { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:7px; }
.dt-tool { display:block; padding:9px 11px; border-radius:9px; border:1px solid var(--rim); background:var(--raised); }
.dt-tool:hover { border-color:var(--rim3); background:var(--void); text-decoration:none; }
.dt-tool .n { font-size:11.5px; font-weight:500; color:var(--text); }
.dt-tool .d { font-size:10px; color:var(--faint); margin-top:2px; line-height:1.4; }
@media (max-width:860px){ .dt-grid{ grid-template-columns:1fr; } }

/* Score bar (permit-signals board rows) + muted delta text, carried from the base design. */
.bar-track { height:5px; border-radius:3px; background:var(--rim2); overflow:hidden; }
.bar-fill { height:100%; border-radius:3px; }
.delta-mute { font-size:10.5px; color:var(--muted); margin-top:3px; }
.topbar-tag { font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; padding:4px 9px; border-radius:6px; background:var(--raised); border:1px solid var(--rim); color:var(--muted); }

/* ---------- RECENT SOURCES (design handoff §5.6) ---------- */
.src-day { display:flex; align-items:baseline; gap:10px; margin-bottom:9px; }
.src-day .d { font-size:11.5px; font-weight:600; color:var(--text); }
.src-day .c { font-size:10.5px; color:var(--muted); }
.src-day .rule { flex:1; height:1px; background:var(--rim); }
.src-row { display:flex; align-items:flex-start; gap:13px; padding:12px 0; border-bottom:1px solid var(--rim2); color:var(--text); }
.src-row:last-child { border-bottom:none; }
/* v4 Recent-sources hover tints the whole row (button), as in the prototype. Horizontal padding
   + matching negative margin lets the tint reach toward the card edge without shifting content. */
.src-row { border-radius:7px; padding-inline:10px; margin-inline:-10px; }
.src-row:hover { text-decoration:none; background:#FBFAF7; }
.src-dot { flex-shrink:0; width:8px; height:8px; border-radius:50%; margin-top:5px; }
.src-title { display:block; font-size:12px; font-weight:500; color:var(--text); }
.src-sub { display:block; font-size:10.5px; color:var(--muted); margin-top:2px; }
.src-facts { display:flex; flex-wrap:wrap; gap:2px 16px; margin-top:7px; }
.src-fact { display:flex; gap:5px; align-items:baseline; }
.src-fact .k { font-family:var(--mono); font-size:8.5px; letter-spacing:0.7px; text-transform:uppercase; color:var(--faint); }
.src-fact .v { font-size:11px; color:var(--text); font-variant-numeric:tabular-nums; }
.src-fact .v.u { color:var(--faint); }
.src-time { font-size:10.5px; color:var(--faint); width:64px; text-align:right; flex-shrink:0; padding-top:1px; }