/* ==========================================================================
   GunningRadar dashboard — De Gunningskrant skin (site B, picked 2026-09-24)
   Loads after app.css. Paper, ink, one Dutch signal orange.
   Fraunces / Hanken Grotesk / IBM Plex Mono, same tokens as phaseC/site-b/css/site.css.
   ========================================================================== */
:root {
  /* Legacy names used by dash.css / admin.css, now mapped onto tokens.css (--gr-*).
     The old inverted aliases (--ink meaning paper, --navy, --amber) are gone. */
  --paper: #F3EFE6;      /* = --gr-paper */
  --paper-hi: #FFFFFF;   /* = --gr-surface */
  --paper-lo: #ECE7DC;   /* = --gr-sunken */
  --ink-k: #121212;      /* = --gr-ink */
  --ink-2: #4B463F;      /* = --gr-ink-2 */
  --rule: var(--gr-rule);
  --orange: #FF5A1F;     /* = --gr-accent: fills only, never text */
  --orange-ink: #B53A0C; /* = --gr-accent-ink */
  --hi: var(--gr-accent-tint);
  --grid: var(--gr-rule);
  --grid-2: #9F968A;
  --text: var(--gr-ink);
  --soft: var(--gr-ink-2);
  --muted: #5E584F;      /* = --gr-ink-3 */
  --mint: #1F6B45;       /* = --gr-pos */
  --slate: var(--gr-info);
  --ease: var(--gr-ease);
  --sans: var(--gr-f-body);
  --mono: var(--gr-f-mono);
  --serif: var(--gr-f-display);
  --hdr: 64px;
}

html, body { background: var(--paper); color: var(--ink-k); }
body { font: 400 15px/1.55 var(--sans); letter-spacing: 0; background: var(--paper); font-variant-numeric: lining-nums tabular-nums; }
::selection { background: var(--hi); color: var(--ink-k); }
:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 3px; border-radius: 2px; }  /* orange-ink: 5.1:1 on paper (orange itself is 2.7:1) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink-k); color: var(--paper-hi); padding: 10px 16px; font: 600 14px/1 var(--sans); text-decoration: none; }
.skip-link:focus { top: 8px; }
#main:focus, #view:focus, #view h1:focus, #drawer:focus { outline: none; }
.rowbtn { all: unset; box-sizing: border-box; display: block; max-width: 100%; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.rowbtn:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.serif { font-family: var(--serif); font-weight: 500; }
.amber { color: var(--orange-ink); }
.num { font-family: var(--mono); }
.eyebrow { font: 400 11px/1.2 var(--mono); letter-spacing: .12em; color: var(--ink-k); }
.eyebrow i { width: 7px; height: 7px; border-radius: 0; background: var(--orange); box-shadow: none; }

/* ---------- brand: Fraunces wordmark, placeholder logo slot ---------- */
.logo-slot { width: 36px; height: 36px; border: 1.5px dashed var(--ink-2); border-radius: 0; font: 400 .5rem/1 var(--mono); letter-spacing: .08em; color: var(--ink-2); }
.brand__name { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; letter-spacing: -.03em; color: var(--ink-k); }
.brand__logo { display: inline-block; line-height: 0; }
.brand__logo img { height: 36px; width: auto; display: block; }
.brand__tag { border: 0; padding: 0; margin-left: .4em; align-self: flex-start; font: .55rem/1 var(--mono); letter-spacing: .08em; color: var(--ink-2); }

/* ---------- buttons (polish r5): ONE primary style app-wide ----------
   .btn--primary = orange fill (--gr-btn-primary), the single main action on a page.
   .btn / .btn--quiet = ink outline, every other action. .btn--sm = smaller quiet button.
   .btn--amber is a legacy alias of .btn--primary (same orange; no second accent). No black-fill button. */
.btn { height: auto; min-height: 44px; padding: .7em 1.2em; border-radius: var(--gr-r-2); border: 1px solid var(--gr-ink); background: transparent; color: var(--gr-ink);
  font: 600 .9375rem/1.2 var(--sans); box-shadow: none; transition: background var(--gr-dur) var(--gr-ease), border-color var(--gr-dur) var(--gr-ease), color var(--gr-dur) var(--gr-ease); }
.btn:hover, .btn--quiet:hover { background: var(--gr-surface); border-color: var(--gr-ink); color: var(--gr-ink); }
.btn:active { background: var(--gr-sunken); }
.btn--quiet { background: transparent; border-color: var(--gr-ink); color: var(--gr-ink); }
.btn--amber, .btn--primary { background: var(--gr-btn-primary); border-color: var(--gr-btn-primary); color: var(--gr-btn-primary-ink); }
.btn--amber:hover, .btn--primary:hover { background: var(--gr-btn-primary-hover); border-color: var(--gr-btn-primary-hover); color: var(--gr-btn-primary-ink); }
.btn--sm { height: auto; min-height: 36px; padding: .5em .9em; font-size: .875rem; }

/* ---------- login: ink front page on the left, paper form on the right ---------- */
.login__art { background: var(--ink-k); color: var(--paper); border-right: 3px solid var(--ink-k); }
.login__art .brand__name { color: var(--paper); }
.login__art .brand__tag { color: #CFC8BA; }
.login__art .logo-slot { border-color: #CFC8BA; color: #CFC8BA; }
.login__art .eyebrow { color: var(--paper); }
.login__h { font-family: var(--serif); font-weight: 380; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; font-size: clamp(44px, 5vw, 80px); line-height: .96; letter-spacing: -.035em; color: var(--paper); text-wrap: balance; }
.login__h .serif { color: var(--orange); }
.login__stats { gap: 0; border-top: 1px solid #555; padding-top: 18px; }
.login__stats > div { padding: 0 28px; border-left: 1px solid #555; }
.login__stats > div:first-child { padding-left: 0; border-left: 0; }
.login__stats b { font-family: var(--serif); font-weight: 600; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 44px; letter-spacing: -.04em; color: var(--orange); }
.login__stats span { color: #CFC8BA; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
.login__card h2 { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: 44px; line-height: 1; letter-spacing: -.035em; }
.field span { color: var(--ink-k); }
.field input, .sel, .inp { border-radius: 0; border: 1.5px solid var(--ink-k); background: var(--paper-hi); color: var(--ink-k); }
.field input:focus, .inp:focus, .sel:focus { border-color: var(--ink-k); box-shadow: 0 0 0 3px var(--hi), 0 0 0 4px var(--orange); outline: none; }
.demo-accts { border-top: 3px solid var(--ink-k); position: relative; }
.demo-accts::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1px; background: var(--ink-k); }
.demo-acct { border-radius: 0; border: 1px solid var(--rule); border-left: 3px solid var(--ink-k); background: var(--paper-hi); }
.demo-acct:hover { border-color: var(--ink-k); border-left-color: var(--orange); background: var(--hi); }
.demo-acct b { font-weight: 600; }
.demo-acct .price { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--orange-ink); letter-spacing: -.02em; }
.proto-note { border-left: 3px solid var(--orange); color: var(--ink-2); }

/* ---------- app shell: masthead strip + double rule, paper sidebar ---------- */
.hdr { background: rgba(243, 239, 230, .94); backdrop-filter: blur(6px); border-bottom: 3px solid var(--ink-k); }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--ink-k); }
.plan-badge { border-radius: 0; border: 1.5px solid var(--ink-k); color: var(--ink-k); }
.plan-badge.pro { border-color: var(--ink-k); background: var(--orange); color: var(--ink-k); }
.demo-switch { color: var(--ink-2); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.demo-switch select { border-radius: 0; border: 1.5px solid var(--ink-k); background: var(--paper-hi); text-transform: none; font-family: var(--sans); letter-spacing: 0; font-size: 13px; }
.side { background: transparent; border-right: 1px solid var(--ink-k); padding: 22px 0 18px; gap: 0; }
.side a { border-radius: 0; padding: 10px 20px; color: var(--ink-k); font-size: 14.5px; border-bottom: 1px solid var(--rule); }
.side a:hover { background: var(--paper-lo); }
.side a.on { background: var(--paper-hi); color: var(--ink-k); font-weight: 600; box-shadow: inset 4px 0 0 var(--orange); }
.side a .lk { border-radius: 0; border: 1px solid var(--orange-ink); color: var(--orange-ink); font-weight: 400; }
.side__grp { margin: 20px 20px 8px; }
.side__foot { border-top: 1px solid var(--ink-k); color: var(--ink-2); margin: auto 20px 0; padding: 12px 0 0; }
.main { padding: calc(var(--hdr) + 32px) 40px 72px; }

/* view head: a newspaper headline over a double rule */
.vh { border-bottom: 1px solid var(--ink-k); padding-bottom: 18px; margin-bottom: 26px; position: relative; }
.vh::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--ink-k); }
.vh h1 { font-family: var(--serif); font-weight: 380; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; font-size: clamp(38px, 3.6vw, 60px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.vh h1 .serif { color: var(--orange-ink); }
.vh p { color: var(--ink-2); }

/* ---------- panels: newspaper columns, no rounded cards ---------- */
.grid { gap: 20px; }
.panel { background: var(--paper-hi); border: 1px solid var(--rule); border-top: 3px solid var(--ink-k); border-radius: 0; padding: 16px 20px 20px; }
.panel h2 { font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 48, "SOFT" 20; font-size: 21px; line-height: 1.1; letter-spacing: -.02em; }
.panel h2 small { font: 400 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.panel .sub { color: var(--ink-2); }
.tile .eyebrow { color: var(--ink-2); }
.tile b { font-family: var(--serif); font-weight: 600; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 52px; line-height: .9; letter-spacing: -.05em; font-variant-numeric: lining-nums tabular-nums; }
.g4 > .tile:first-child b { color: var(--orange); }
.tile .d { color: var(--ink-2); }
.tile .d .up { color: var(--mint); font-weight: 600; }
.tile .d .dn { color: var(--orange-ink); font-weight: 600; }

/* ---------- filters ---------- */
/* polish r6: chips speak the quiet-button language (1px ink, radius 4); "on" = sunken + ink underline, no black fill. */
.chip { border-radius: var(--gr-r-2); border: 1px solid var(--gr-ink); background: transparent; color: var(--gr-ink); font-weight: 600; }
.chip.on { background: var(--gr-sunken); border-color: var(--gr-ink); color: var(--gr-ink); box-shadow: inset 0 -2px 0 var(--gr-ink); }
.count { color: var(--ink-2); }

/* ---------- tables: ruled ledger ---------- */
.tbl-wrap { border: 0; border-top: 2px solid var(--ink-k); border-bottom: 1px solid var(--ink-k); border-radius: 0; background: transparent; }
table { font-size: 13.5px; }
th { color: var(--ink-k); background: var(--paper-hi); border-bottom: 1px solid var(--ink-k); font-size: 10px; }
td { border-bottom: 1px solid var(--rule); }
tbody tr.click:hover td { background: var(--hi); }
td .t2 { color: var(--ink-2); }
.tag { border-radius: 0; border: 1px solid var(--ink-2); color: var(--ink-k); }
.tag.a { border-color: var(--orange-ink); color: var(--orange-ink); background: var(--hi); }
.tag.m { border-color: var(--mint); color: var(--mint); }
.wlink { color: var(--ink-k); border-bottom: 1.5px solid var(--ink-k); }
.wlink:hover { color: var(--orange-ink); border-color: var(--orange); }
.wlink.amber { color: var(--orange-ink); border-color: var(--orange-ink); }

/* ---------- paywall: the locked panel reads as a cut-out subscription coupon ---------- */
.blur { filter: blur(5px) grayscale(.3); }
.locked > .lk-body { filter: blur(6px) grayscale(.4); opacity: .55; }
.lk-card { border-radius: 0; border: 1.5px solid var(--ink-k); background: var(--paper-hi); box-shadow: 0 0 0 10px var(--paper), 0 0 0 11.5px var(--ink-k), 0 24px 60px rgba(18, 18, 18, .18);
  outline: 1.5px dashed var(--ink-k); outline-offset: 14px; }
.lk-card::before { content: "✂"; position: absolute; top: -27px; left: 50%; transform: translateX(-50%); background: var(--paper); padding: 0 6px; font-size: 14px; line-height: 1; color: var(--ink-k); }
.lk-card h2 { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: 30px; line-height: 1.02; letter-spacing: -.03em; }
.lk-card p { color: var(--ink-2); }
.lk-card ul { color: var(--ink-k); }
.lk-card li { border-bottom: 1px dotted var(--rule); padding-bottom: 6px; }
.lk-card li::before { content: "— "; color: var(--orange); }
.teaser-bar { border-radius: 0; border: 1.5px dashed var(--ink-k); background: var(--hi); }

/* ---------- modal / drawer ---------- */
.scrim { background: rgba(18, 18, 18, .55); backdrop-filter: blur(2px); }
.modal { border-radius: 0; border: 1.5px solid var(--ink-k); background: var(--paper); box-shadow: var(--gr-shadow-2); border-radius: var(--gr-r-2); }
.modal h2 { font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 30; font-size: 44px; line-height: 1; letter-spacing: -.035em; }
.modal h2 .serif { display: block; font-size: .6em; margin-top: 6px; }
.plan { border-radius: 0; border: 1.5px solid var(--ink-k); background: var(--paper-hi); outline: 1.5px dashed var(--ink-k); outline-offset: 7px; margin: 8px; }
.plan.pro { border-color: var(--ink-k); background: var(--hi); }
.plan .p { font-family: var(--serif); font-weight: 700; font-variation-settings: "opsz" 144, "SOFT" 100; font-size: 64px; line-height: .9; letter-spacing: -.06em; color: var(--orange); }
.plan .p small { font-family: var(--sans); font-weight: 600; color: var(--ink-k); letter-spacing: 0; }
.plan ul { color: var(--ink-k); }
.plan li { border-bottom: 1px dotted var(--rule); padding-bottom: 6px; }
.plan li::before { content: "— "; color: var(--orange); }
.drawer { background: var(--paper); border-left: 3px solid var(--ink-k); }
.drawer.on { box-shadow: -20px 0 60px rgba(18, 18, 18, .18); }
.drawer h2 { font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 72, "SOFT" 30; font-size: 30px; line-height: 1.05; letter-spacing: -.025em; }
.kv { border-top: 1px solid var(--ink-k); padding-top: 14px; }
.kv dt { color: var(--ink-2); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.hook { border-radius: 0; background: var(--hi); border-left: 4px solid var(--orange); }
.x { border-radius: 0; border: 1.5px solid var(--ink-k); background: var(--paper-hi); }

/* ---------- charts ---------- */
.chart .ax { fill: var(--ink-2); }
.chart .gl { stroke: var(--rule); }
.chart .bar { fill: var(--orange); }
.chart .bar.dim { fill: #F2B89E; }
.chart .hit:hover + .bar, .chart g:hover .bar { fill: var(--ink-k); }
.tip { background: var(--ink-k); color: var(--paper); border: 0; border-radius: var(--gr-r-1); box-shadow: var(--gr-shadow-2); }
.tip b { font-weight: 600; }
.hbar .tr { background: var(--paper-lo); border-radius: 0; height: 12px; }
.hbar .tr i { background: var(--orange); border-radius: 0 2px 2px 0; }
.hbar .v { color: var(--ink-k); }
.cal .mo h2 { color: var(--ink-k); border-bottom: 2px solid var(--ink-k); padding-bottom: 6px; }
.cal .it { border-top: 1px solid var(--rule); }
.cal .it:hover { color: var(--orange-ink); }
.dots { border-bottom: 1px solid var(--ink-k); }
.dots i { background: var(--orange); border: 2px solid var(--paper-hi); }
.search-list a { border-bottom: 1px solid var(--rule); }
.search-list a:hover, .search-list a.on { background: var(--hi); }
.search-list a.on { box-shadow: inset 4px 0 0 var(--orange); }
.search-list small, .empty, .note { color: var(--ink-2); }
.note b { color: var(--ink-k); font-weight: 600; }

@media (max-width: 1100px) { .login__art { border-right: 0; border-bottom: 3px solid var(--ink-k); } }

/* profile columns: let 1fr tracks shrink (Fraunces numerals are wider than Geist) */
.main .grid > * { min-width: 0; }
.panel .tile b { font-size: clamp(30px, 2.6vw, 44px); overflow-wrap: anywhere; }