/* ════════════════════════════════════════════════════════════════════════
   DILS Next — shared design system  ·  COMMUNITY visual language
   Single source of truth for the redesigned app. Light + dark via
   html[data-theme]; VIBRANT + MONO data-viz via html[data-palette].
   Tokens are prefixed --dn-* and component classes are scoped under `.dn`
   so this file is safe to <link> into any page (including the legacy
   CSS-variable-driven dashboards) without clobbering their styles.
   The shell (.dn-rail / .dn-topbar) is uniquely named and works for both the
   React app and the static HTML dashboards (injected by /dils-next.js).

   Style extracted from the Figma "Widgets" + "Full charts" kits:
   20px rounded cards, soft blue-grey canvas, hot-pink→purple→blue data ramp,
   pill-shaped bars, gradient line strokes, feature tiles. The frozen classic
   dashboards do NOT link this file and are unaffected.
   ════════════════════════════════════════════════════════════════════════ */

/* ── BRAND TYPEFACES — IvyMode + Nunito Sans, and nothing else. ─────────────
   Two faces, both licensed to DILS and both vendored in /public/fonts/dils.
   No CDN, no runtime Google Fonts round trip, no third face anywhere.

   IvyMode ships as a single SemiBold cut, so its @font-face claims the whole
   400–700 range: any weight a heading asks for resolves to that one file
   instead of the browser synthesising a fake bold or silently falling back to
   a serif that isn't ours. `IvyMode SemiBold` is kept as an alias because the
   report documents already reference it by that name.

   Nunito Sans is the variable TTF, so 200–1000 come from one file.

   Previously this block declared Inter and Playfair Display and pointed
   IvyMode at /fonts/ivymode/*.woff2 — files that were never committed. Every
   heading in the app was therefore rendering in Playfair, the stand-in. ── */
@font-face{font-family:'IvyMode';src:url('/fonts/dils/IvyMode-SemiBold.otf') format('opentype');
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'IvyMode SemiBold';src:url('/fonts/dils/IvyMode-SemiBold.otf') format('opentype');
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('/fonts/dils/NunitoSans-Variable.ttf') format('truetype');
  font-weight:200 1000;font-style:normal;font-display:swap}

:root{
  /* surfaces */
  --dn-bg:#eef1f6; --dn-surface:#ffffff; --dn-surface-2:#f6f8fb; --dn-surface-3:#eceff5;
  --dn-border:#e6eaf2; --dn-border-strong:#d6dce8;
  /* ink */
  --dn-ink:#151a20; --dn-ink-2:#525c6b; --dn-ink-3:#8b94a4;
  /* nav rail */
  --dn-rail:#11131a; --dn-rail-2:#1b1e27; --dn-rail-ink:#9aa3b2; --dn-rail-ink-hi:#fff; --dn-rail-active:#23262f;
  /* brand + state */
  --dn-primary:#4361ee; --dn-primary-ink:#fff; --dn-primary-weak:#e9ecfd; --dn-primary-line:#c3cbf9;
  --dn-pink:#f72585; --dn-amber:#ffc300;
  --dn-ok:#0a9b6f; --dn-ok-weak:#e1f5ee; --dn-warn:#e6920a; --dn-warn-weak:#fdf0d8; --dn-bad:#e80054; --dn-bad-weak:#fde4ee;
  /* categorical data-viz (vibrant: hot-pink → purple → blue) */
  --dn-c-blue:#4361ee; --dn-c-green:#0a9b6f; --dn-c-amber:#ffc300; --dn-c-red:#e80054;
  --dn-c-purple:#7209b7; --dn-c-pink:#f72585; --dn-c-cyan:#4cc9f0; --dn-c-slate:#74809a;
  /* full chart ramp */
  --dn-c1:#f72585; --dn-c2:#b5179e; --dn-c3:#7209b7; --dn-c4:#560bad; --dn-c5:#3a0ca3;
  --dn-c6:#3f37c9; --dn-c7:#4361ee; --dn-c8:#4895ef; --dn-c9:#4cc9f0; --dn-c10:#0a9b6f;
  /* Amenities-map POI sector colours. Brand-fixed, so no dark-mode variant:
     these are memorandum colours and a sector must not change hue because the
     reader flipped the app to dark. Defined here rather than in the map so the
     Appearance editor can reach them — the map resolves them through var(). */
  --dn-poi-fine-dining:#E94B4B; --dn-poi-restaurants:#E0863A; --dn-poi-bars:#7F3FA8;
  --dn-poi-retail:#2E4A5A; --dn-poi-culture:#B79A4E; --dn-poi-sports:#9A9A9A;
  --dn-poi-health:#8FB3A6; --dn-poi-education:#D89BBE; --dn-poi-childcare:#F2A73B;
  --dn-poi-transport:#7FB0D0; --dn-poi-parks:#2F8A4B; --dn-poi-workplaces:#3E5C99;
  /* gradients */
  --dn-grad-a:#4361ee; --dn-grad-b:#f72585;
  --dn-grad-brand:linear-gradient(135deg,#7209b7,#f72585);
  --dn-grad-line:linear-gradient(90deg,#4361ee 0%,#7209b7 55%,#f72585 100%);
  /* shape + type */
  --dn-r-card:20px; --dn-r-ctrl:11px; --dn-r-pill:999px;
  --dn-shadow:0 1px 2px rgba(18,22,33,.04),0 4px 14px rgba(18,22,33,.05);
  --dn-shadow-md:0 10px 30px rgba(18,22,33,.10),0 2px 6px rgba(18,22,33,.05);
  --dn-font-ui:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --dn-font-display:'IvyMode',Georgia,'Times New Roman',serif;
  /* Aliases for the map tools, which name the faces by role. Kept so their CSS
     does not have to change, and so there is exactly one place a face is chosen. */
  --font-nunito:var(--dn-font-ui);
  --font-cormorant:var(--dn-font-display);
  --font-dm-sans:var(--dn-font-ui);
  --dn-rail-w:62px;
}
/* MONO data-viz palette — the kit's blue monochromatic variant.
   Keeps semantic state colours (ok/warn/bad) for usability. */
html[data-palette="mono"]{
  --dn-primary:#0077b6; --dn-primary-weak:#e1f1f9; --dn-primary-line:#a9d6ec; --dn-pink:#0096c7;
  --dn-c-blue:#0077b6; --dn-c-green:#0a9b6f; --dn-c-amber:#48cae4; --dn-c-red:#03045e;
  --dn-c-purple:#023e8a; --dn-c-pink:#0096c7; --dn-c-cyan:#00b4d8; --dn-c-slate:#74809a;
  --dn-c1:#03045e; --dn-c2:#023e8a; --dn-c3:#0077b6; --dn-c4:#0096c7; --dn-c5:#00b4d8;
  --dn-c6:#48cae4; --dn-c7:#7dd6ec; --dn-c8:#90e0ef; --dn-c9:#ade8f4; --dn-c10:#0a9b6f;
  --dn-grad-a:#0077b6; --dn-grad-b:#00b4d8;
  --dn-grad-brand:linear-gradient(135deg,#023e8a,#0096c7);
  --dn-grad-line:linear-gradient(90deg,#03045e 0%,#0077b6 55%,#00b4d8 100%);
}
/* DILS BRAND palette — the official Dils identity (Primary: red/brass/black/white;
   Secondary business-unit colours: office/logistics/living/retail/hospitality)
   mapped to accents + the data-viz ramp. Brass is the UI accent, red the
   highlight. Surfaces stay theme-driven (light/dark). Report-ready: set
   data-palette="dils" for a deterministic brand render of every chart. */
html[data-palette="dils"]{
  --dn-primary:#ae9142; --dn-primary-ink:#fff; --dn-primary-weak:#f4eedd; --dn-primary-line:#e2d4ab; --dn-pink:#e73838;
  --dn-ok:#5f8d7a; --dn-ok-weak:#e7f0eb; --dn-warn:#c98a3f; --dn-warn-weak:#f7ecda; --dn-bad:#e73838; --dn-bad-weak:#fbe4e4;
  /* categorical — DILS brand + business units */
  --dn-c-blue:#8db9ca; --dn-c-green:#789f90; --dn-c-amber:#ae9142; --dn-c-red:#e73838;
  --dn-c-purple:#d8826a; --dn-c-pink:#b5654f; --dn-c-cyan:#5e8aa0; --dn-c-slate:#b1b3b3;
  /* sequential 10-stop ramp (warm → cool DILS spread) */
  --dn-c1:#e73838; --dn-c2:#d8826a; --dn-c3:#c9a35c; --dn-c4:#ae9142; --dn-c5:#8c7a3e;
  --dn-c6:#789f90; --dn-c7:#8db9ca; --dn-c8:#5e8aa0; --dn-c9:#b1b3b3; --dn-c10:#4f5358;
  --dn-grad-a:#ae9142; --dn-grad-b:#e73838;
  --dn-grad-brand:linear-gradient(135deg,#ae9142,#e73838);
  --dn-grad-line:linear-gradient(90deg,#8db9ca 0%,#ae9142 55%,#e73838 100%);
}
/* PORTAL palette — the Dils Portal house style (navy #161C28 / cream #F4F1EA /
   one red #E73838), carried over as a colour scheme only. This is the one
   palette that also moves SURFACES and INK: the Portal look is mostly its
   ground, so evaluating it with the default blue-grey canvas would prove
   nothing. Shape and type (radii, shadows, fonts) are deliberately untouched —
   those are a separate step.

   Two rules make the scheme hold together:
     • red is STRUCTURE (active nav, markers, highlight) — never a "bad" value,
       so --dn-bad is clay #b0522f and deltas read as state, not as the accent;
     • gold #ae9142 is the UI primary and the data primary, so charts stay on
       brand without borrowing the accent.
   Surfaces here are the LIGHT (working-canvas) reading; the navy Portal proper
   is the dark pair below. */
html[data-palette="portal"]{
  /* surfaces — warm cream instead of the cold blue-grey canvas */
  --dn-bg:#e8e3d7; --dn-surface:#f4f1ea; --dn-surface-2:#efebe1; --dn-surface-3:#e3ddce;
  --dn-border:#d8d2c2; --dn-border-strong:#c2bba6;
  /* ink — Portal navy on cream. --dn-ink-3 is a step darker than the default
     palette's: cream is a lighter ground than #eef1f6, so the stock faint grey
     drops to 2.9:1 on it. #5c6572 clears AA (4.6:1 canvas, 5.2:1 card). */
  --dn-ink:#161c28; --dn-ink-2:#4c5563; --dn-ink-3:#5c6572;
  /* rail — the Portal ground itself */
  --dn-rail:#161c28; --dn-rail-2:#1e2634; --dn-rail-ink:#9aa1ad; --dn-rail-ink-hi:#f4f1ea; --dn-rail-active:#212a39;
  /* brand + state — gold leads, red marks position, clay carries "down" */
  /* navy on gold, not white on gold — white only reaches 3.0:1 against #ae9142,
     and navy (5.6:1) is the pairing the Portal itself uses for light-on-brand. */
  --dn-primary:#ae9142; --dn-primary-ink:#161c28; --dn-primary-weak:#f1ead8; --dn-primary-line:#ddd0a9;
  --dn-pink:#e73838; --dn-amber:#c9a35c;
  --dn-ok:#4e7a65; --dn-ok-weak:#e3ece6; --dn-warn:#c08a3a; --dn-warn-weak:#f4ead6;
  --dn-bad:#b0522f; --dn-bad-weak:#f6e3da;
  /* categorical — deepened from the DILS set so they hold on cream */
  --dn-c-blue:#456d84; --dn-c-green:#4e7a65; --dn-c-amber:#ae9142; --dn-c-red:#e73838;
  --dn-c-purple:#7a6a86; --dn-c-pink:#c2603f; --dn-c-cyan:#6e9db3; --dn-c-slate:#8a8f99;
  /* sequential ramp — warm red through gold and sage to Portal navy */
  --dn-c1:#e73838; --dn-c2:#c2603f; --dn-c3:#c9a35c; --dn-c4:#ae9142; --dn-c5:#8c7a3e;
  --dn-c6:#4e7a65; --dn-c7:#6e9db3; --dn-c8:#456d84; --dn-c9:#2c3b4e; --dn-c10:#161c28;
  /* the Portal has no gradients — the brand mark is a hard red/navy split */
  --dn-grad-a:#ae9142; --dn-grad-b:#e73838;
  --dn-grad-brand:linear-gradient(135deg,#e73838 0 50%,#161c28 50% 100%);
  --dn-grad-line:linear-gradient(90deg,#161c28 0%,#ae9142 55%,#e73838 100%);
}
html[data-theme="dark"]{
  --dn-bg:#0d0f15; --dn-surface:#161922; --dn-surface-2:#1c2029; --dn-surface-3:#232834;
  --dn-border:#272d39; --dn-border-strong:#343c4b;
  --dn-ink:#eef1f6; --dn-ink-2:#a7b0bf; --dn-ink-3:#6f7889;
  --dn-rail:#080910; --dn-rail-2:#14161e; --dn-rail-active:#222632;
  --dn-primary:#6573ec; --dn-primary-weak:#1c2347; --dn-primary-line:#33408a;
  --dn-ok-weak:#10271f; --dn-warn-weak:#2a2310; --dn-bad-weak:#2d1320;
  --dn-shadow:0 1px 2px rgba(0,0,0,.4); --dn-shadow-md:0 14px 36px rgba(0,0,0,.5);
}
html[data-theme="dark"][data-palette="mono"]{ --dn-primary:#3aa0d6; --dn-primary-weak:#0e2735; --dn-primary-line:#1f4f6b; }
html[data-theme="dark"][data-palette="dils"]{ --dn-primary:#c6a85a; --dn-primary-weak:#2a2412; --dn-primary-line:#5c4f23; --dn-ok-weak:#152420; --dn-warn-weak:#2a2110; --dn-bad-weak:#2e1414; }
/* PORTAL dark — the Portal proper. Needs a fuller override than the other two
   palettes because the light block above sets surfaces/ink/categoricals, and
   html[data-theme="dark"] only reclaims some of them (equal specificity, later
   in the file). Anything the light portal block sets and dark does NOT is
   restated here, or the cream-tuned value leaks into the navy render. */
html[data-theme="dark"][data-palette="portal"]{
  --dn-bg:#161c28; --dn-surface:#1e2634; --dn-surface-2:#212a39; --dn-surface-3:#2a3446;
  --dn-border:#2c3546; --dn-border-strong:#3a4557;
  --dn-ink:#f4f1ea; --dn-ink-2:#a9aeb8; --dn-ink-3:#868d9a;
  --dn-rail:#101520; --dn-rail-2:#1e2634; --dn-rail-active:#212a39;
  --dn-primary:#c6a85a; --dn-primary-weak:#2a2412; --dn-primary-line:#5c4f23;
  --dn-ok:#6e9c86; --dn-ok-weak:#152420; --dn-warn:#c9a35c; --dn-warn-weak:#2a2110;
  --dn-bad:#c2603f; --dn-bad-weak:#2e1a14;
  --dn-c-blue:#6e9db3; --dn-c-green:#6e9c86; --dn-c-amber:#c9a35c; --dn-c-red:#e73838;
  --dn-c-purple:#9a8aa6; --dn-c-pink:#d8826a; --dn-c-cyan:#8db9ca; --dn-c-slate:#9aa1ad;
  --dn-c1:#e73838; --dn-c2:#d8826a; --dn-c3:#c9a35c; --dn-c4:#ae9142; --dn-c5:#9a8a52;
  --dn-c6:#6e9c86; --dn-c7:#8db9ca; --dn-c8:#6e9db3; --dn-c9:#54677d; --dn-c10:#38445a;
}

/* Anything rendered outside .dn / .dn-app — React portals attached to <body>,
   overlays, the bare login and share shells — would otherwise inherit the UA
   default serif. Report documents that link this file set their own body font
   after this rule in document order, so they still win. */
body{font-family:var(--dn-font-ui)}

/* Form controls do not inherit font-family from their parent — the UA sheet
   gives them a system font, which Chrome resolves to Arial. Harmless while
   every such control here is icon-only, but the moment one gains a label it
   renders in a third typeface. Opt them all back into inheritance. */
button,input,select,textarea,optgroup{font-family:inherit}

/* ── scoped base ─────────────────────────────────────────────────────────── */
.dn,.dn *{box-sizing:border-box}
.dn{font-family:var(--dn-font-ui);background:var(--dn-bg);color:var(--dn-ink);
  font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.dn a{color:inherit;text-decoration:none}
.dn h1,.dn h2,.dn h3{margin:0}
.dn .display{font-family:var(--dn-font-display)}
.dn .h1{font-family:var(--dn-font-display);font-size:26px;font-weight:700;letter-spacing:-.3px;margin:0}
.dn .muted{color:var(--dn-ink-3)} .dn .dim{color:var(--dn-ink-2)}
.dn .sectlabel{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--dn-ink-3);margin:2px 0 10px}
.dn .row{display:flex;align-items:center;gap:10px}.dn .between{justify-content:space-between}
.dn .mb{margin-bottom:16px}.dn .mt{margin-top:16px}.dn .wrap{flex-wrap:wrap}

/* ════════════════════════════════════════════════════════════════════════
   App frame + rail — shell v2 (reference-B menu).
   The React <AppShell> uses the grid mode (.dn-app); the vanilla rail injected
   into standalone static HTML uses the padding mode (.dn-has-rail, below). Both
   share .dn-rail / .dn-nav-i / .sect so the look stays consistent.
   ════════════════════════════════════════════════════════════════════════ */
.dn-app{position:relative;display:grid;grid-template-columns:var(--dn-rail-w) 1fr;min-height:100vh;background:var(--dn-bg);
  font-family:var(--dn-font-ui);color:var(--dn-ink);font-size:13px;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.dn-app.expanded{--dn-rail-w:232px}
.dn-rail{position:sticky;top:0;height:100vh;background:var(--dn-rail);display:flex;flex-direction:column;
  padding:14px 12px;gap:2px;overflow:hidden;z-index:50;border-right:1px solid rgba(255,255,255,.05);transition:padding .18s}

/* profile header (avatar · role · name) */
.dn-profile{display:flex;align-items:center;gap:11px;height:46px;padding:0 4px;margin-bottom:8px;overflow:hidden}
.dn-profile-meta{min-width:0;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.dn-app.expanded .dn-profile-meta{opacity:1;transform:none}
.dn-profile-meta .role{font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--dn-rail-ink)}
.dn-profile-meta .nm{font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}

/* collapse handle riding the rail edge */
.dn-collapse{position:absolute;top:60px;left:calc(var(--dn-rail-w) - 13px);z-index:60;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--dn-border);background:var(--dn-surface);color:var(--dn-ink-2);display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--dn-shadow);transition:left .18s cubic-bezier(.4,0,.2,1),background .12s,color .12s,transform .12s}
.dn-collapse:hover{background:var(--dn-primary);border-color:var(--dn-primary);color:#fff;transform:scale(1.08)}

/* legacy logo (vanilla rail) */
.dn-rail .logo{display:flex;align-items:center;gap:11px;height:44px;padding:0 7px;color:#fff;margin-bottom:10px}
.dn-rail .logo .mark{flex:0 0 32px;height:32px;border-radius:11px;background:var(--dn-grad-brand);
  display:grid;place-items:center;font-weight:800;font-size:16px;color:#fff;box-shadow:0 4px 12px rgba(114,9,183,.4)}
.dn-rail .logo .txt{font-family:var(--dn-font-display);font-weight:600;font-size:17px;white-space:nowrap;opacity:0;transition:opacity .15s}
.dn-app.expanded .dn-rail .logo .txt,.dn-has-rail.dn-expanded .dn-rail .logo .txt{opacity:1}

/* nav scroller + sections */
.dn-nav{flex:1;display:flex;flex-direction:column;gap:1px;overflow-y:auto;overflow-x:hidden;margin:2px -4px;padding:0 4px;min-height:0;
  scrollbar-width:thin;scrollbar-color:var(--dn-rail-2) transparent}
.dn-nav::-webkit-scrollbar{width:6px}.dn-nav::-webkit-scrollbar-thumb{background:var(--dn-rail-2);border-radius:3px}
.dn-navsec{display:flex;flex-direction:column;gap:1px;padding-bottom:7px}
.dn-rail .spacer{flex:1}
.dn-rail .sect{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#5b6172;
  padding:11px 12px 5px;white-space:nowrap;opacity:0;height:0;overflow:hidden;transition:opacity .15s}
.dn-app.expanded .dn-rail .sect,.dn-has-rail.dn-expanded .dn-rail .sect{opacity:1;height:auto}

/* nav item */
.dn-nav-i{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:11px;color:var(--dn-rail-ink);
  cursor:pointer;white-space:nowrap;transition:background .12s,color .12s;position:relative;border:0;background:none;width:100%;font:inherit;text-align:left}
.dn-nav-i svg{flex:0 0 20px}
.dn-nav-i .lbl{flex:1;font-size:13px;font-weight:500;opacity:0;transition:opacity .15s;text-align:left}
.dn-app.expanded .dn-nav-i .lbl,.dn-has-rail.dn-expanded .dn-nav-i .lbl{opacity:1}
.dn-nav-i:hover{background:var(--dn-rail-2);color:var(--dn-rail-ink-hi)}
.dn-nav-i.active{background:var(--dn-rail-active);color:#fff}
.dn-nav-i.active::before{content:"";position:absolute;left:3px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--dn-pink)}
.dn-nav-i.danger:hover{background:rgba(232,0,84,.14);color:#ff6b94}
.dn-chev{flex:0 0 15px!important;opacity:.55;transition:transform .2s}
.dn-chev.open{transform:rotate(180deg)}
/* submenu toggle inside a nav link — only a hit target while the rail is expanded */
.dn-chev-btn{flex:0 0 22px;display:flex;align-items:center;justify-content:center;height:22px;border-radius:6px;
  opacity:0;pointer-events:none;transition:opacity .15s}
.dn-app.expanded .dn-chev-btn,.dn-has-rail.dn-expanded .dn-chev-btn{opacity:1;pointer-events:auto;cursor:pointer}
.dn-chev-btn:hover{background:rgba(255,255,255,.10)}
.dn-chev-btn:focus-visible{outline:2px solid var(--dn-pink);outline-offset:1px}
.dn-nav-i .pal,.dn-pal-sw{flex:0 0 20px;width:20px;height:20px;border-radius:6px;background:var(--dn-grad-brand)}

/* inline submenu (expanded) with connector line */
.dn-sub{max-height:0;overflow:hidden;transition:max-height .22s ease;margin:0 0 2px 23px;border-left:1.5px solid var(--dn-rail-2)}
.dn-sub.open{max-height:360px}
.dn-sub .dn-nav-sub{display:flex;align-items:center;gap:9px;height:32px;padding:0 10px 0 13px;margin:1px 0;border-radius:8px;
  color:var(--dn-rail-ink);font-size:12.5px;font-weight:500;white-space:nowrap;text-decoration:none}
.dn-sub-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.4;flex:0 0 5px}
.dn-sub .dn-nav-sub:hover{color:#fff;background:var(--dn-rail-2)}
.dn-sub .dn-nav-sub.active{color:#fff}
.dn-sub .dn-nav-sub.active .dn-sub-dot{background:var(--dn-pink);opacity:1}

/* vanilla-rail flat submenu (static HTML) — shown only when expanded */
.dn-nav-sub{align-items:center;height:30px;padding:0 10px 0 44px;border-radius:8px;
  color:var(--dn-rail-ink);font-size:12px;font-weight:500;white-space:nowrap;text-decoration:none}
/* Direct children only: the React rail nests its submenu links in .dn-sub,
   and a descendant selector here beat .dn-sub .dn-nav-sub on source order —
   which display:none'd every inline submenu entry in the expanded rail. */
.dn-navsec>.dn-nav-sub,.dn-rail>.dn-nav-sub{display:none}
.dn-app.expanded .dn-rail>.dn-nav-sub,.dn-app.expanded .dn-navsec>.dn-nav-sub,
.dn-has-rail.dn-expanded .dn-rail>.dn-nav-sub,.dn-has-rail.dn-expanded .dn-navsec>.dn-nav-sub{display:flex}
.dn-rail>.dn-nav-sub:hover{background:var(--dn-rail-2);color:#fff}
.dn-rail>.dn-nav-sub.active{color:#fff;background:var(--dn-rail-active)}

/* footer utility row */
.dn-rail-foot{display:flex;flex-direction:column;gap:1px;padding-top:8px;margin-top:2px;border-top:1px solid var(--dn-rail-2)}

/* collapsed-mode flyout / tooltip (JS-positioned, escapes rail clip) */
.dn-flyout{position:fixed;left:calc(var(--dn-rail-w) + 9px);z-index:200;min-width:172px;margin-top:-6px;padding:6px;
  background:var(--dn-surface);border:1px solid var(--dn-border);border-radius:12px;box-shadow:var(--dn-shadow-md);animation:dnFly .12s ease}
@keyframes dnFly{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
.dn-flyout-h{font-size:12px;font-weight:700;color:var(--dn-ink);padding:5px 10px 4px}
.dn-flyout-list{display:flex;flex-direction:column;gap:1px}
.dn-flyout-i{display:block;padding:7px 10px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--dn-ink-2);text-decoration:none}
.dn-flyout-i:hover{background:var(--dn-surface-2);color:var(--dn-ink)}
.dn-flyout-i.active{background:var(--dn-primary-weak);color:var(--dn-primary)}

/* content view + persistent dashboard iframe */
.dn-view{flex:1;min-width:0}
.dn-frame{display:block;width:100%;height:calc(100dvh - 59px);border:0;background:var(--dn-bg)}

/* topbar hamburger (mobile) + drawer backdrop */
.dn-tb-menu{display:none;border:0;background:transparent;color:var(--dn-ink-2);cursor:pointer;width:36px;height:36px;border-radius:10px;place-items:center;flex:0 0 auto}
.dn-tb-menu:hover{background:var(--dn-surface-3)}
.dn-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:45;animation:dnFly .12s ease}
@media(max-width:760px){
  .dn-collapse{display:none}
  .dn-tb-menu{display:grid}
  .dn-app.expanded .dn-backdrop{display:block}
}

/* topbar */
.dn-main{display:flex;flex-direction:column;min-width:0;min-height:100vh}
.dn-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;height:58px;padding:0 20px;
  background:color-mix(in srgb,var(--dn-surface) 84%,transparent);backdrop-filter:saturate(1.4) blur(9px);
  border-bottom:1px solid var(--dn-border)}
.dn-tb-toggle{border:0;background:transparent;color:var(--dn-ink-2);cursor:pointer;width:32px;height:32px;border-radius:10px;display:grid;place-items:center}
.dn-tb-toggle:hover{background:var(--dn-surface-3)}
.dn-crumb{font-weight:700;font-size:14px}.dn-crumb small{color:var(--dn-ink-3);font-weight:500}
.dn-search{flex:1;max-width:460px;margin:0 auto;display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;
  background:var(--dn-surface-2);border:1px solid var(--dn-border);border-radius:var(--dn-r-pill);color:var(--dn-ink-3)}
.dn-search input{flex:1;border:0;background:transparent;color:var(--dn-ink);font:inherit;outline:0}
.dn-search .kbd{font-size:11px;color:var(--dn-ink-3);border:1px solid var(--dn-border);border-radius:6px;padding:1px 6px}
.dn-tb-right{display:flex;align-items:center;gap:9px;margin-left:auto}
.dn-icon-btn{width:36px;height:36px;border-radius:12px;border:1px solid var(--dn-border);background:var(--dn-surface);
  display:grid;place-items:center;color:var(--dn-ink-2);cursor:pointer;position:relative}
.dn-icon-btn:hover{background:var(--dn-surface-2)}
.dn-icon-btn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--dn-bad)}
.dn-avatar{width:36px;height:36px;border-radius:50%;background:var(--dn-grad-brand);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:12px;cursor:pointer}
.dn-avatar.lg{width:38px;height:38px;flex:0 0 38px;font-size:13px;cursor:default;box-shadow:0 4px 12px rgba(114,9,183,.4)}
.dn-content{padding:22px;max-width:1500px;width:100%;margin:0 auto}

/* ── components (scoped) ─────────────────────────────────────────────────── */
.dn .card{background:var(--dn-surface);border:1px solid var(--dn-border);border-radius:var(--dn-r-card);box-shadow:var(--dn-shadow)}
.dn .card.pad{padding:20px}
.dn .card-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--dn-border)}
.dn .card-h h3{font-size:14px;font-weight:700}.dn .card-h .sub{color:var(--dn-ink-3);font-size:11.5px;font-weight:500}
.dn .card-h .right{margin-left:auto;display:flex;gap:6px;align-items:center}
.dn .btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;border-radius:var(--dn-r-ctrl);
  border:1px solid var(--dn-border);background:var(--dn-surface);color:var(--dn-ink);font:inherit;font-weight:600;cursor:pointer}
.dn .btn:hover{background:var(--dn-surface-2)}
.dn .btn.primary{background:var(--dn-primary);border-color:var(--dn-primary);color:var(--dn-primary-ink)}
.dn .btn.primary:hover{filter:brightness(1.07)}.dn .btn.sm{height:30px;padding:0 12px;font-size:12px}
.dn .btn.dark{background:var(--dn-ink);border-color:var(--dn-ink);color:var(--dn-surface)}
.dn .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:var(--dn-r-pill);font-size:11px;font-weight:700;background:var(--dn-surface-3);color:var(--dn-ink-2)}
.dn .pill .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.dn .pill.ok{background:var(--dn-ok-weak);color:var(--dn-ok)}.dn .pill.warn{background:var(--dn-warn-weak);color:var(--dn-warn)}
.dn .pill.bad{background:var(--dn-bad-weak);color:var(--dn-bad)}.dn .pill.pri{background:var(--dn-primary-weak);color:var(--dn-primary)}
.dn .pill.pink{background:var(--dn-bad-weak);color:var(--dn-pink)}
/* xs: fits a 168px launcher tile alongside the tool name (Lab → Next badge) */
.dn .pill.xs{padding:1px 6px;font-size:9.5px;letter-spacing:.2px;flex:0 0 auto}
.dn .delta{font-size:12px;font-weight:700}.dn .delta.up{color:var(--dn-ok)}.dn .delta.down{color:var(--dn-bad)}
.dn .tabs{display:inline-flex;gap:2px;padding:3px;background:var(--dn-surface-2);border:1px solid var(--dn-border);border-radius:12px}
.dn .tabs button{border:0;background:transparent;color:var(--dn-ink-2);font:inherit;font-weight:600;font-size:12.5px;padding:6px 13px;border-radius:9px;cursor:pointer}
.dn .tabs button.on{background:var(--dn-surface);color:var(--dn-ink);box-shadow:var(--dn-shadow)}
.dn .grid{display:grid;gap:16px}
.dn .kpis{grid-template-columns:repeat(5,1fr)}.dn .g-2{grid-template-columns:1.5fr 1fr}.dn .g-3{grid-template-columns:repeat(3,1fr)}.dn .g-2b{grid-template-columns:1fr 1fr}
@media(max-width:1100px){.dn .kpis{grid-template-columns:repeat(3,1fr)}.dn .g-2,.dn .g-3,.dn .g-2b{grid-template-columns:1fr}}
.dn .kpi{padding:18px 18px 16px;display:flex;flex-direction:column;gap:9px}
.dn .kpi .lbl{font-size:11.5px;color:var(--dn-ink-3);font-weight:600;display:flex;align-items:center;gap:8px}
.dn .kpi .lbl .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--dn-primary-weak);color:var(--dn-primary)}
.dn .kpi .val{font-size:30px;font-weight:800;letter-spacing:-.6px;line-height:1}
.dn .kpi .foot{display:flex;align-items:center;gap:7px;color:var(--dn-ink-3);font-size:11.5px}

/* table */
.dn .tablewrap{overflow:auto}
.dn table.dt{width:100%;border-collapse:collapse;font-size:12.5px}
.dn table.dt th{position:sticky;top:0;background:var(--dn-surface-2);text-align:left;font-weight:600;color:var(--dn-ink-3);
  font-size:11px;letter-spacing:.3px;text-transform:uppercase;padding:11px 16px;border-bottom:1px solid var(--dn-border);white-space:nowrap}
.dn table.dt td{padding:11px 16px;border-bottom:1px solid var(--dn-border);white-space:nowrap}
.dn table.dt tr:hover td{background:var(--dn-surface-2)}
.dn table.dt .nm{font-weight:700}.dn .num{text-align:right;font-variant-numeric:tabular-nums}

/* funnel / donut / bars (chart helpers) — pill-shaped per the kit */
.dn .funnel{display:flex;flex-direction:column;gap:8px}
.dn .frow{display:grid;grid-template-columns:96px 1fr 48px;align-items:center;gap:10px;font-size:12px}
.dn .fbar{height:22px;border-radius:var(--dn-r-pill);background:var(--dn-grad-line)}
.dn .frow .n{font-weight:700;text-align:right}.dn .frow .lab{color:var(--dn-ink-2);font-weight:600}
.dn .donut-wrap{display:flex;gap:22px;align-items:center}
.dn .donut{width:140px;height:140px;border-radius:50%;flex:0 0 auto;position:relative;
  -webkit-mask:radial-gradient(circle 44px at center,transparent 98%,#000 100%);mask:radial-gradient(circle 44px at center,transparent 98%,#000 100%)}
.dn .donut .mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.dn .legend{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.dn .lrow{display:grid;grid-template-columns:12px 1fr auto auto;gap:9px;align-items:center;font-size:12px}
.dn .lrow .sw{width:10px;height:10px;border-radius:4px}.dn .lrow .nm{color:var(--dn-ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn .lrow .v{font-weight:700}.dn .lrow .p{color:var(--dn-ink-3);width:36px;text-align:right}
.dn .blist{display:flex;flex-direction:column;gap:13px}
.dn .brow{display:grid;grid-template-columns:120px 1fr 46px;gap:12px;align-items:center;font-size:12.5px}
.dn .brow .nm{color:var(--dn-ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn .track{height:11px;border-radius:var(--dn-r-pill);background:var(--dn-surface-3);overflow:hidden}
.dn .track>span{display:block;height:100%;border-radius:var(--dn-r-pill);background:var(--dn-c-blue)}
.dn .brow .v{font-weight:700;text-align:right}

/* vertical pill bars (track-fill) + grouped 2-series */
.dn .vbars{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:8px}
.dn .vbars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;height:100%}
.dn .vbars .stack{flex:1;width:18px;display:flex;align-items:flex-end;background:var(--dn-surface-3);border-radius:var(--dn-r-pill);overflow:hidden}
.dn .vbars .fill{width:100%;border-radius:var(--dn-r-pill);background:var(--dn-c7)}
.dn .vbars .cl{font-size:11px;color:var(--dn-ink-3);font-weight:600}
.dn .gbars{display:flex;align-items:flex-end;gap:16px;height:170px;padding-top:8px}
.dn .gbars .pair{flex:1;display:flex;align-items:flex-end;gap:5px;width:100%;justify-content:center}
.dn .gbars .b{width:13px;border-radius:var(--dn-r-pill)}
.dn .gbars .b.a{background:var(--dn-c1)}.dn .gbars .b.b{background:var(--dn-c3)}

/* contribution heatmap */
.dn .heat{display:flex;gap:4px}.dn .heat .wk{display:flex;flex-direction:column;gap:4px}
.dn .heat .cell{width:15px;height:15px;border-radius:5px;background:var(--dn-surface-3)}

/* data-rich widget renderer (dashboard cards) */
.dn .dn-hbars{display:flex;flex-direction:column;gap:11px;width:100%}
.dn .dn-hbar{display:grid;grid-template-columns:minmax(58px,42%) 1fr auto;gap:10px;align-items:center;font-size:12px}
.dn .dn-hbar .lab{color:var(--dn-ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn .dn-hbar .bar{height:12px;border-radius:var(--dn-r-pill);background:var(--dn-surface-3);overflow:hidden}
.dn .dn-hbar .bar .fill{display:block;height:100%;border-radius:var(--dn-r-pill);min-width:3px}
.dn .dn-hbar .val{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:var(--dn-ink)}
.dn .vbars .col .bv{font-size:11px;font-weight:700;color:var(--dn-ink-2);font-variant-numeric:tabular-nums;line-height:1}
.dn table.dt tfoot td{padding:11px 16px;border-top:2px solid var(--dn-border);font-weight:800;color:var(--dn-ink);background:var(--dn-surface-2)}
.dn .dn-gauge-ends{display:flex;justify-content:space-between;width:160px;margin-top:3px;font-size:10px;color:var(--dn-ink-3);font-variant-numeric:tabular-nums}
.dn .dn-heat-key{display:flex;align-items:center;gap:5px;margin-top:11px;font-size:10.5px;color:var(--dn-ink-3)}
.dn .dn-heat-key i{width:13px;height:13px;border-radius:4px;display:inline-block}

/* solid feature tiles */
.dn .tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:1100px){.dn .tiles{grid-template-columns:repeat(2,1fr)}}
.dn .tile{border-radius:var(--dn-r-card);padding:18px;min-height:148px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;box-shadow:var(--dn-shadow-md)}
.dn .tile .tl{font-size:12px;font-weight:600;opacity:.9}
.dn .tile .tv{font-size:30px;font-weight:800;letter-spacing:-.6px}
.dn .tile .tf{font-size:11.5px;opacity:.85;font-weight:500}
.dn .tile .ic{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.dn .tile.purple{background:linear-gradient(150deg,#7209b7,#b5179e)}
.dn .tile.pink{background:linear-gradient(150deg,#f72585,#ff6d3b)}
.dn .tile.blue{background:linear-gradient(150deg,#3a0ca3,#4361ee)}
.dn .tile.lime{background:linear-gradient(150deg,#0a9b6f,#7bd389);color:#06241a}
.dn .tile.lime .ic{background:rgba(0,0,0,.12)}.dn .tile.lime .tf,.dn .tile.lime .tl{opacity:.8}
.dn .tile.dark{background:linear-gradient(150deg,#15171d,#2a2f3a)}
.dn .tile.amber{background:linear-gradient(150deg,#ffc300,#ff9100);color:#3a2600}
.dn .tile.amber .ic{background:rgba(0,0,0,.12)}.dn .tile.amber .tf,.dn .tile.amber .tl{opacity:.8}

/* avatar list rows */
.dn .list{display:flex;flex-direction:column}
.dn .li{display:flex;align-items:center;gap:13px;padding:12px 4px;border-bottom:1px solid var(--dn-border)}
.dn .li:last-child{border-bottom:0}
.dn .li .av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff}
.dn .li .nm{font-weight:700;font-size:13px}.dn .li .rl{color:var(--dn-ink-3);font-size:11.5px}
.dn .li .act{margin-left:auto}

/* launcher cards */
.dn .launch{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.dn .lcard{display:flex;align-items:center;gap:11px;padding:13px 14px;border:1px solid var(--dn-border);border-radius:14px;background:var(--dn-surface);cursor:pointer;transition:border-color .12s,box-shadow .12s}
.dn .lcard:hover{border-color:var(--dn-border-strong);box-shadow:var(--dn-shadow-md)}
.dn .lcard .e{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--dn-surface-3);font-size:17px}
.dn .lcard .t{font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:6px;min-width:0}
/* the name yields first: the maturity badge must never be the thing that
   truncates, or the tile stops saying where the module sits on the ladder */
.dn .lcard .t .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn .lcard .d{color:var(--dn-ink-3);font-size:11px}

/* form controls */
.dn .input,.dn .select{height:36px;padding:0 12px;border:1px solid var(--dn-border);border-radius:var(--dn-r-ctrl);background:var(--dn-surface);color:var(--dn-ink);font:inherit;font-weight:500}
.dn .input:focus,.dn .select:focus{outline:2px solid var(--dn-primary-weak);border-color:var(--dn-primary)}
.dn .banner{display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:14px;background:var(--dn-primary-weak);border:1px solid var(--dn-primary-line);color:var(--dn-ink-2);font-size:12.5px}

/* responsive rail → drawer on small screens */
@media(max-width:760px){
  .dn-app{grid-template-columns:1fr}
  .dn-rail{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .2s;width:222px;--dn-rail-w:222px}
  .dn-app.expanded .dn-rail{transform:none}
  .dn-rail .logo .txt,.dn-app .dn-rail .nav-i .lbl,.dn-rail .sect{opacity:1;height:auto}
  .dn-nav-i .lbl{opacity:1}
}

/* ── injected-rail mode: static HTML pages get the rail via /dils-next.js ─── */
.dn-has-rail{padding-left:var(--dn-rail-w);transition:padding-left .15s;min-height:100vh;background:var(--dn-bg)}
.dn-has-rail .dn-rail{position:fixed;left:0;top:0;z-index:200;width:var(--dn-rail-w)}
.dn-has-rail.dn-expanded{--dn-rail-w:222px}
.dn-has-rail.dn-expanded .dn-rail .logo .txt,
.dn-has-rail.dn-expanded .dn-nav-i .lbl,
.dn-has-rail.dn-expanded .dn-rail .sect{opacity:1;height:auto}
@media(max-width:760px){.dn-has-rail{padding-left:0}}
@media print{.dn-rail,.dn-topbar{display:none!important}.dn-has-rail{padding-left:0!important}}
/* a11y: visible keyboard focus across shell + components */
.dn a:focus-visible,.dn button:focus-visible,.dn .btn:focus-visible,.dn .input:focus-visible,.dn .select:focus-visible,
.dn-nav-i:focus-visible,.dn-icon-btn:focus-visible,.dn-tb-toggle:focus-visible,.dn-collapse:focus-visible,.dn-flyout-i:focus-visible{outline:2px solid var(--dn-primary);outline-offset:2px;border-radius:6px}

/* ════════════════════════════════════════════════════════════════════════
   Reference-A refinement — premium surfaces, bold numerals, hero, feature
   cards, bar chart with pointer tooltip. Scoped to .dn (React app only).
   ════════════════════════════════════════════════════════════════════════ */
.dn .pad{padding:18px 20px 20px}

/* refined card surface: subtle sheen + hairline + soft shadow (esp. dark) */
.dn .card{background:linear-gradient(165deg,var(--dn-surface),var(--dn-surface-2));box-shadow:var(--dn-shadow)}
html[data-theme="dark"] .dn .card{box-shadow:var(--dn-shadow),inset 0 1px 0 rgba(255,255,255,.03)}

/* bigger, bolder KPI numerals */
.dn .kpi{padding:18px 18px 16px;gap:10px}
.dn .kpi .lbl{font-size:11.5px;letter-spacing:.1px}
.dn .kpi .lbl .ic{width:28px;height:28px;border-radius:9px}
.dn .kpi .val{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1}
.dn .kpi .foot .delta{display:inline-flex;align-items:center;gap:3px}
.dn .delta svg{flex:0 0 auto}

/* welcome hero */
.dn-hero{position:relative;overflow:hidden;border-radius:var(--dn-r-card);border:1px solid var(--dn-border);
  background:linear-gradient(135deg,var(--dn-surface),var(--dn-surface-2));box-shadow:var(--dn-shadow);padding:26px 28px}
.dn-hero-body{position:relative;z-index:1}
.dn-hero-glow{position:absolute;right:-90px;top:-110px;width:360px;height:360px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--dn-primary) 30%,transparent),transparent 68%)}
html[data-theme="dark"] .dn-hero{background:linear-gradient(135deg,#181c26,#13161e)}
html[data-theme="dark"] .dn-hero-glow{background:radial-gradient(circle,color-mix(in srgb,var(--dn-pink) 26%,transparent),transparent 66%)}

/* gradient feature cards (reserve gradients for these accent moments) */
.dn-feature{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;min-height:152px;padding:20px 22px;
  border-radius:var(--dn-r-card);color:#fff;box-shadow:var(--dn-shadow-md);text-decoration:none;transition:filter .12s,transform .12s}
.dn-feature .ic{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.17);display:grid;place-items:center;margin-bottom:8px}
.dn-feature .ft-title{font-family:var(--dn-font-display);font-size:20px;font-weight:700}
.dn-feature .ft-sub{font-size:12.5px;opacity:.92;max-width:400px;line-height:1.5}
.dn-feature .ft-cta{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;font-weight:700;font-size:13px}
.dn-feature::after{content:"";position:absolute;right:-50px;bottom:-70px;width:210px;height:210px;border-radius:50%;background:rgba(255,255,255,.10);pointer-events:none}
.dn-feature:hover{filter:brightness(1.06);transform:translateY(-1px)}
.dn-feature.purple{background:linear-gradient(140deg,#7209b7,#b5179e 58%,#f72585)}
.dn-feature.teal{background:linear-gradient(140deg,#0e7490,#0891b2 52%,#06b6d4)}
html[data-palette="mono"] .dn-feature.purple{background:linear-gradient(140deg,#023e8a,#0077b6 58%,#00b4d8)}
html[data-palette="mono"] .dn-feature.teal{background:linear-gradient(140deg,#0a9b6f,#48cae4)}

/* bar chart — faint gridlines, thin rounded bars (focus accented), value tooltip */
.dn-bars{position:relative;display:flex;align-items:flex-end;gap:6px;height:164px;margin-top:4px}
.dn-bars-grid{position:absolute;left:0;right:0;height:1px;background:var(--dn-border);opacity:.7}
.dn-bar-col{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;cursor:pointer}
.dn-bar{width:62%;max-width:15px;border-radius:var(--dn-r-pill);background:var(--dn-surface-3);transition:background .12s,height .2s}
.dn-bar-col:hover .dn-bar{background:var(--dn-primary-line)}
.dn-bar.on{background:var(--dn-primary)}
.dn-bar-tip{position:absolute;left:50%;transform:translateX(-50%);background:var(--dn-ink);color:var(--dn-bg);
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;white-space:nowrap;box-shadow:var(--dn-shadow-md);z-index:3;font-variant-numeric:tabular-nums}
.dn-bar-tip::after{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:var(--dn-ink);border-bottom:0}

/* launcher tile icon chip (icons, never emoji) */
.dn .lcard .e{color:var(--dn-primary)}
html[data-theme="dark"] .dn .lcard .e{background:var(--dn-primary-weak)}

/* ── responsive overrides (kept LAST so they win the cascade) ─────────────── */
@media(max-width:760px){
  .dn .g-2,.dn .g-3,.dn .g-2b{grid-template-columns:1fr}
}
@media(max-width:600px){
  .dn .kpis{grid-template-columns:repeat(2,1fr)}
  .dn-content{padding:16px}
  .dn-topbar{padding:0 14px;gap:8px}
  .dn-search{display:none}
  .dn .h1{font-size:23px}
  .dn-hero{padding:20px 18px}
}
@media(max-width:380px){
  .dn .kpis{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════════════
   Apps hub (/apps) — the browsable index of every report, tool and beta app.
   Cards carry their tool's accent as --acc (set inline per card) so the top
   hairline + icon + CTA tint together. Badges label status: BETA / EXTERNAL /
   SOON / ADMIN. Also used for the grouped launcher on the home page.
   ════════════════════════════════════════════════════════════════════════ */
.dn .appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:14px}
.dn .appcard{position:relative;display:flex;flex-direction:column;gap:8px;min-height:132px;
  padding:16px 17px 15px;border:1px solid var(--dn-border);border-radius:16px;background:var(--dn-surface);
  box-shadow:var(--dn-shadow);overflow:hidden;transition:border-color .12s,box-shadow .12s,transform .12s}
.dn a.appcard:hover{border-color:var(--dn-border-strong);box-shadow:var(--dn-shadow-md);transform:translateY(-2px)}
.dn .appcard::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--acc,var(--dn-primary))}
.dn .appcard.off{opacity:.55;cursor:default}
.dn .appcard .ah{display:flex;align-items:flex-start;gap:11px}
/* The icon glyph is the accent pulled 45% toward ink. The raw accent is a
   categorical palette token, so on the light greys it can be a pale amber or
   cyan — measured as low as 1.4:1, under even the 3:1 floor for graphics. 55%
   accent / 45% ink keeps the hue obvious while clearing 3:1 in all four
   palettes across both themes (worst case 3.69:1). The plain-accent line above
   is the fallback for anything without color-mix. */
.dn .appcard .ai{width:36px;height:36px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:var(--dn-surface-3);color:var(--acc,var(--dn-primary));
  color:color-mix(in srgb,var(--acc,var(--dn-primary)) 55%,var(--dn-ink))}
.dn .appcard .at{font-weight:700;font-size:13.5px;line-height:1.3}
.dn .appcard .ad{color:var(--dn-ink-2);font-size:11.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* The CTA is INK, not the accent. --acc is an identity colour and now comes from
   the categorical palette tokens (app/tools.ts), so it can legitimately be a
   light amber or cyan — as 11px bold text that measured as low as 1.6:1 on the
   card, far under AA. The accent still reads on the stripe and the icon chip,
   which are graphics; only the words moved to ink. The arrow keeps the accent:
   it is decorative, sits beside a legible label, and is what ties the row to
   the stripe above it. */
.dn .appcard .af{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:var(--dn-ink-2);transition:color .12s}
.dn .appcard .af svg{color:var(--acc,var(--dn-primary))}
.dn a.appcard:hover .af{color:var(--dn-ink)}
html[data-theme="dark"] .dn .appcard .ai{background:var(--dn-primary-weak)}

/* status / audience badges */
.dn .bdgs{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.dn .bdg{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;
  font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;line-height:1.7}
.dn .bdg.beta{background:var(--dn-primary-weak);color:var(--dn-primary)}
.dn .bdg.ext{background:var(--dn-surface-3);color:var(--dn-ink-2)}
.dn .bdg.soon{background:var(--dn-surface-3);color:var(--dn-ink-3)}
.dn .bdg.adm{background:var(--dn-warn-weak);color:var(--dn-warn)}

/* filter chips + search (hub toolbar) */
.dn .segbar{display:flex;gap:6px;flex-wrap:wrap}
.dn .seg{height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--dn-border);
  background:var(--dn-surface);color:var(--dn-ink-2);font:inherit;font-size:11.5px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dn .seg:hover{border-color:var(--dn-border-strong);color:var(--dn-ink)}
.dn .seg.on{background:var(--dn-primary);border-color:var(--dn-primary);color:var(--dn-primary-ink)}
.dn .seg .n{opacity:.65;font-weight:700}
.dn .srch{position:relative;flex:1 1 200px;max-width:300px}
.dn .srch input{width:100%;height:30px;padding:0 12px 0 31px;border:1px solid var(--dn-border-strong);
  border-radius:999px;background:var(--dn-surface);color:var(--dn-ink);font:inherit;font-size:12px}
.dn .srch input:focus{outline:none;border-color:var(--dn-primary)}
.dn .srch .si{position:absolute;left:10px;top:7px;color:var(--dn-ink-3);pointer-events:none;display:grid}
.dn .emptystate{border:1px dashed var(--dn-border-strong);border-radius:16px;padding:22px 20px;
  color:var(--dn-ink-3);font-size:12.5px;line-height:1.6}
.dn .grouphead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 11px}
.dn .grouphead h2{font-family:var(--dn-font-display);font-size:17px;font-weight:700;letter-spacing:-.2px}
.dn .grouphead .gb{color:var(--dn-ink-3);font-size:11.5px;max-width:560px;line-height:1.5}