/* =====================================================================
   CyberForge · Specter-grade instrument UI
   Design tokens: Paper (default) and Studio (dark) — luxury editorial
   Type: Cormorant Garamond (serif) / Inter (sans) / JetBrains Mono (mono)

   Three surface layers drive the whole palette:
     --nf-bg          page chrome (topbar, rails, plain page background)
     --nf-bg-elev     cards, panels, stat boxes (a step above chrome)
     --nf-bg-reading  long-form reading column only — warmer / softer
                      than chrome in Paper, warmer / lighter than chrome
                      in Studio. The eye rests here; chrome recedes.
   ===================================================================== */

:root,
html[data-theme="paper"],
html[data-theme="light"] {
  /* ---- Limestone (default) ----
     A stone/mineral workspace rather than cream paper: warm enough for
     long reading, restrained enough for a security intelligence product. */
  --nf-bg:          #F3F2EC;   /* chrome -- limestone */
  --nf-bg-elev:     #FBFAF6;   /* cards -- warm porcelain */
  --nf-bg-reading:  #EFECE2;   /* long-form surface -- muted parchment */
  --nf-ink-deep:    #0E100C;   /* true graphite ink */
  --nf-bg-subtle:   #ECE9DE;   /* hover fills, sublabels */

  --nf-ink:         #151612;   /* graphite, not pure black */
  --nf-ink-soft:    #2D3029;
  --nf-ink-mute:    #606154;
  --nf-ink-faint:   #969181;

  --nf-rule:        #D8D4C5;   /* stone hairline */
  --nf-rule-soft:   #E5E1D4;
  --nf-rule-strong: #BEB8A6;

  /* Muted brass -- quieter and more institutional than gold. */
  --nf-accent:      #927746;
  --nf-accent-ink:  #594827;
  --nf-accent-wash: #EEE4C8;

  /* Light-theme glass panels: white with a very faint sage cast, inspired
     by NewsForge's newspaper cards. Kept separate from --nf-bg-elev so the
     page remains limestone while panels feel less creamy and more premium. */
  --nf-glass-surface: rgba(255, 255, 250, 0.72);
  --nf-glass-surface-strong: rgba(255, 255, 252, 0.86);
  --nf-glass-tint: rgba(229, 239, 236, 0.42);
  --nf-glass-border: rgba(96, 106, 91, 0.20);
  --nf-glass-highlight: rgba(255, 255, 255, 0.66);
  --nf-glass-shadow: 0 14px 34px -26px rgba(22, 31, 26, 0.22);

  /* Domain accent tokens */
  --nf-dom-osint:       #3A6A7A;
  --nf-dom-cyber:       #6F5420;
  --nf-dom-fincrime:    #3B6E3F;
  --nf-dom-scams:       #8A4A2C;
  --nf-dom-humanrights: #5E3E7A;

  /* Status — muted, never cartoonish */
  --nf-ok:          #2F7D4F;
  --nf-warn:        #B78A1F;
  --nf-err:         #9B2F2F;
  --nf-info:        #3A5C8A;

  /* Tier semantic colors */
  --nf-tier-1:      #7A5E2A;
  --nf-tier-2:      #3A3A38;
  --nf-tier-3:      #A8A59B;

  /* Type scale */
  --nf-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --nf-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nf-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — tuned for Cormorant Garamond's narrower x-height.
     Body is 15px at the base because Cormorant reads ~1 step smaller
     than a sans at the same pixel height. Anything meant for long
     reading (article body, briefings) should use --nf-fs-md or larger. */
  --nf-fs-xs:   12px;
  --nf-fs-sm:   13.5px;
  --nf-fs-base: 15px;
  --nf-fs-md:   17px;
  --nf-fs-lg:   21px;
  --nf-fs-xl:   26px;
  --nf-fs-2xl:  34px;
  --nf-fs-3xl:  48px;

  --nf-lh-tight:  1.25;
  --nf-lh-normal: 1.6;
  --nf-lh-loose:  1.75;

  /* Layout */
  --nf-rail:     256px;
  --nf-max:      1240px;
  --nf-gutter:   28px;
  --nf-radius:   4px;
  --nf-radius-lg: 8px;

  /* Shadows — nearly invisible, just lift */
  --nf-shadow-1: 0 1px 0 rgba(11,12,14,0.03);
  --nf-shadow-2: 0 2px 8px rgba(11,12,14,0.04), 0 1px 0 rgba(11,12,14,0.03);
}

/* =====================================================================
   Paper-tone variants. Three additional light themes sitting alongside
   the default `paper` palette, each overriding ONLY the chrome / elev /
   reading / subtle / rule surface tokens. Everything else (ink,
   typography, accent, status colours, layout) is inherited from the
   `:root` block above and stays identical across the four light
   themes -- the brand stays consistent, only the paper changes.

   The four light themes are exposed to customers as a "Reading mode"
   on /settings so they can pick the paper that fits their day:

     paper  - Limestone: mineral light default
     bone   - gentle warm lift, modern  (Linear / Vercel feel)
     warm   - distinctly warm publication paper  (Stripe Press feel)
     cream  - editorial weight, magazine-grade  (FT Weekend feel)

   `studio` (dark) is its own block immediately below this group.
   ===================================================================== */

html[data-theme="bone"] {
  --nf-bg:          #F7F5EF;
  --nf-bg-elev:     #FFFFFF;
  --nf-bg-reading:  #F1ECDF;
  --nf-bg-subtle:   #EFEBDF;
  --nf-rule:        #DCD6C5;
  --nf-rule-soft:   #E7E1D2;
  --nf-rule-strong: #C2BBA8;
}

html[data-theme="warm"] {
  --nf-bg:          #F5F1E8;
  --nf-bg-elev:     #FFFCF4;
  --nf-bg-reading:  #EFE8D5;
  --nf-bg-subtle:   #ECE6D3;
  --nf-rule:        #D4CCB6;
  --nf-rule-soft:   #DFD8C3;
  --nf-rule-strong: #B8AE94;
}

html[data-theme="cream"] {
  --nf-bg:          #F3EEDE;
  --nf-bg-elev:     #FBF7E9;
  --nf-bg-reading:  #ECE3CB;
  --nf-bg-subtle:   #E9E1C9;
  --nf-rule:        #CDC2A2;
  --nf-rule-soft:   #DAD0B2;
  --nf-rule-strong: #B0A380;
}

html[data-theme="studio"],
html[data-theme="dark"] {
  /* ---- Graphite Paper (dark) ---------------------------------------
     The reading experience uses neutral graphite and soft grey ink.
     French Blue remains a brand accent, but body copy and panels avoid
     the cold blue cast so the page feels calmer and more editorial. */
  --nf-bg:          #14171C;   /* graphite desk */
  --nf-bg-elev:     #1C2128;   /* flat paper cards / panels */
  --nf-bg-reading:  #232931;   /* charcoal reading atmosphere */
  --nf-ink-deep:    #F0EDE5;   /* heading ink */
  --nf-bg-subtle:   #2A3039;   /* quiet row/hover fill */

  --nf-ink:         #E8E3D8;   /* primary bone text */
  --nf-ink-soft:    #C4BEB2;   /* secondary text */
  --nf-ink-mute:    #8F918B;   /* muted / placeholder text */
  --nf-ink-faint:   #666A66;   /* faintest labels */

  --nf-rule:        #343A43;   /* paper edge borders */
  --nf-rule-soft:   #282E36;   /* soft separators */
  --nf-rule-strong: #4A535F;   /* strong rules */

  /* French Blue as editorial brand colour, not a glow effect. */
  --nf-accent:      #023E8A;
  --nf-accent-ink:  #9BAFCB;
  --nf-accent-wash: #172234;

  /* Domain accents stay restrained so the page reads like a newspaper. */
  --nf-dom-osint:       #9BAFCB;
  --nf-dom-cyber:       #9BAFCB;
  --nf-dom-fincrime:    #8FAE98;
  --nf-dom-scams:       #C98B6A;
  --nf-dom-humanrights: #A295C8;

  --nf-ok:          #8FAE98;
  --nf-warn:        #C6A15B;
  --nf-err:         #D66A61;
  --nf-info:        #9BAFCB;

  --nf-tier-1:      #C6A15B;
  --nf-tier-2:      #C8C5BC;
  --nf-tier-3:      #6B6D6A;

  --nf-shadow-1: 0 1px 0 rgba(255,255,255,0.035);
  --nf-shadow-2: 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(255,255,255,0.015);

  --nf-glass-surface: var(--nf-bg-elev);
  --nf-glass-surface-strong: var(--nf-bg-elev);
  --nf-glass-tint: transparent;
  --nf-glass-border: var(--nf-rule);
  --nf-glass-highlight: rgba(255,255,255,0.035);
  --nf-glass-shadow: var(--nf-shadow-2);
}

/* Long-form reading polish for dark mode. ``optical-sizing: auto``
   lets variable fonts (Cormorant Garamond, Inter) render at their
   intended weight axis for the size; ``-webkit-font-smoothing:
   antialiased`` cuts the over-sharp glyph edges that pure-greyscale
   subpixel rendering produces on dark backgrounds (this is the
   single biggest cause of "stabby ink" on dark). Together they
   shift the dark theme from "neon through black" to "paper through
   gauze". Light themes keep the default rendering since their high
   ink-to-paper contrast actually benefits from sharp edges. */
html[data-theme="studio"] body,
html[data-theme="dark"]  body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

html[data-theme="studio"] ::selection,
html[data-theme="dark"]  ::selection {
  background: rgba(2, 62, 138, 0.40);   /* French Blue tint */
  color: var(--nf-ink-deep);
}

/* =====================================================================
   Reset + base
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--nf-bg);
  color: var(--nf-ink);
  font-family: var(--nf-sans);
  font-size: var(--nf-fs-base);
  line-height: var(--nf-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--nf-accent-ink); }
p { margin: 0 0 0.6em; }
hr { border: 0; border-top: 1px solid var(--nf-rule); margin: 20px 0; }
::selection { background: var(--nf-accent-wash); color: var(--nf-ink); }

/* =====================================================================
   Login - private cyber news threshold
   ===================================================================== */

.nf-login-body {
  --nf-bg:          #080B10;
  --nf-bg-elev:     #171B22;
  --nf-bg-reading:  #20252D;
  --nf-bg-subtle:   #1E2430;
  --nf-ink:         #F1EFE7;
  --nf-ink-soft:    #C9C5B8;
  --nf-ink-mute:    #9B9A91;
  --nf-ink-faint:   #646861;
  --nf-rule:        #323943;
  --nf-rule-soft:   #242B35;
  --nf-rule-strong: #4B5565;
  --nf-accent:      #023E8A;
  --nf-accent-ink:  #AEBFD7;
  --nf-accent-wash: #152033;
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 34px;
  overflow-x: hidden;
  position: relative;
  background:
    radial-gradient(circle at 18% 12%, rgba(198,161,91,0.16), transparent 24%),
    radial-gradient(circle at 16% 24%, rgba(2,62,138,0.42), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(174,191,215,0.18), transparent 34%),
    linear-gradient(135deg, #05070B, var(--nf-bg) 45%, #11161D);
}
.nf-login-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
  opacity: 0.36;
}
.nf-login-lamp {
  position: fixed;
  left: 9vw;
  top: 8vh;
  width: min(560px, 70vw);
  height: min(560px, 70vw);
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(174,191,215,0.16), transparent 24%),
    radial-gradient(circle, rgba(2,62,138,0.18), transparent 58%);
  filter: blur(1px);
  opacity: 0.84;
}
.nf-login-shell {
  width: min(1120px, 100%);
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(340px, 0.76fr);
  gap: clamp(34px, 7vw, 92px);
  align-items: center;
}
.nf-login-brand {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  padding: 42px 0 42px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.nf-login-orb {
  position: absolute;
  left: min(340px, 36vw);
  top: 44px;
  width: 220px;
  height: 220px;
  pointer-events: none;
  opacity: 0.62;
}
.nf-login-orb span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(155,175,203,0.22);
  border-radius: 50%;
}
.nf-login-orb span:nth-child(2) {
  inset: 24px;
  border-color: rgba(198,161,91,0.20);
}
.nf-login-orb span:nth-child(3) {
  inset: 54px;
  border-color: rgba(255,255,255,0.12);
}
.nf-login-brand::before {
  content: "";
  position: absolute;
  left: -44px;
  top: 14px;
  width: min(540px, 72vw);
  height: min(540px, 72vw);
  border: 1px solid rgba(174,191,215,0.16);
  border-radius: 50%;
  box-shadow: inset 0 0 90px rgba(2,62,138,0.08);
  opacity: 0.82;
  pointer-events: none;
}
.nf-login-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(174,191,215,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174,191,215,0.09) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.32;
  mask-image: radial-gradient(circle at 28% 36%, black, transparent 72%);
}
.nf-login-folio,
.nf-login-kicker,
.nf-login-stamp,
.nf-login-ledger span {
  font-family: var(--nf-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.nf-login-folio {
  font-size: 10px;
  color: var(--nf-accent-ink);
}
.nf-login-brand h1 {
  margin: auto 0 0;
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: clamp(72px, 10vw, 138px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.07em;
  text-shadow:
    0 24px 70px rgba(0,0,0,0.5),
    0 0 42px rgba(2,62,138,0.12);
}
.nf-login-brand h1 em {
  color: var(--nf-accent-ink);
  font-style: italic;
}
.nf-login-lede {
  max-width: 540px;
  margin: 22px 0 0;
  color: var(--nf-ink-soft);
  font-family: var(--nf-serif);
  font-size: 25px;
  line-height: 1.34;
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.nf-login-ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 42px;
  max-width: 560px;
  border-top: 1px solid var(--nf-rule);
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-login-ledger div {
  padding: 12px 14px;
  border-right: 1px solid var(--nf-rule);
}
.nf-login-ledger div:last-child { border-right: 0; }
.nf-login-ledger span {
  display: block;
  margin-bottom: 5px;
  color: var(--nf-ink-faint);
  font-size: 9px;
}
.nf-login-ledger strong {
  display: block;
  color: var(--nf-ink-soft);
  font: 500 12px var(--nf-mono);
}
.nf-login-signal-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  max-width: 560px;
}
.nf-login-signal-strip span {
  padding: 7px 10px;
  border: 1px solid rgba(155,175,203,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.025);
  color: var(--nf-ink-mute);
  font: 600 10px var(--nf-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nf-login-card {
  position: relative;
  isolation: isolate;
  padding: 42px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nf-login-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -8px -28px -8px -28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018) 42%, rgba(2,62,138,0.10)),
    rgba(23,27,34,0.76);
  border: 1px solid rgba(174,191,215,0.16);
  border-radius: 18px;
  transform: perspective(900px) rotateY(-2.5deg) skewY(-0.55deg);
  box-shadow:
    0 34px 90px -58px rgba(0,0,0,0.92),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.nf-login-card::after {
  content: "ACCESS PLATE / 01";
  position: absolute;
  right: 2px;
  bottom: 4px;
  color: var(--nf-ink-faint);
  font: 500 10px var(--nf-mono);
  letter-spacing: 0.18em;
  opacity: 0.34;
  pointer-events: none;
}
.nf-login-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 38px;
}
.nf-login-kicker {
  margin-bottom: 8px;
  color: var(--nf-ink-mute);
  font-size: 10px;
}
.nf-login-card h2 {
  margin: 0;
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: 42px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.nf-login-stamp {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid rgba(174,191,215,0.34);
  border-radius: 3px;
  background: rgba(2,62,138,0.18);
  color: var(--nf-accent-ink);
  font-size: 9px;
}
.nf-login-alert {
  margin: 0 0 18px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--nf-err) 45%, var(--nf-rule));
  border-radius: var(--nf-radius);
  background: color-mix(in srgb, var(--nf-err) 8%, transparent);
  color: var(--nf-err);
  font-size: var(--nf-fs-sm);
}
.nf-login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.nf-login-field {
  display: block;
}
.nf-login-field span {
  display: block;
  margin: 0 0 7px;
  color: var(--nf-ink-mute);
  font: 600 10.5px var(--nf-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nf-login-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 13px;
  border: 1px solid var(--nf-rule);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  color: var(--nf-ink);
  font: 500 14px var(--nf-sans);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.nf-login-field input:focus {
  border-color: var(--nf-accent-ink);
  background: rgba(255,255,255,0.04);
  box-shadow:
    0 0 0 3px rgba(155,175,203,0.08),
    0 12px 28px -24px rgba(174,191,215,0.72);
}
.nf-login-submit {
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(174,191,215,0.44);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent),
    linear-gradient(90deg, var(--nf-accent-ink), #C6A15B);
  color: #071018;
  font: 700 12px var(--nf-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 18px 44px -24px rgba(198,161,91,0.34),
    0 12px 34px -28px rgba(155,175,203,0.42);
}
.nf-login-submit:hover {
  filter: brightness(1.05);
}
.nf-login-note {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--nf-rule-soft);
  color: var(--nf-ink-mute);
  font: 500 11px/1.6 var(--nf-mono);
}
@media (max-width: 820px) {
  .nf-login-body { padding: 18px; }
  .nf-login-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .nf-login-brand {
    min-height: 300px;
    padding: 36px 30px;
    border-bottom: 1px solid var(--nf-rule);
  }
  .nf-login-orb {
    display: none;
  }
  .nf-login-card { padding: 34px 28px; }
  .nf-login-ledger { grid-template-columns: 1fr; }
  .nf-login-ledger div {
    border-right: 0;
    border-bottom: 1px solid var(--nf-rule);
  }
  .nf-login-ledger div:last-child { border-bottom: 0; }
}

/* =====================================================================
   Layout — left rail + main column
   ===================================================================== */

.nf-shell {
  display: grid;
  grid-template-columns: var(--nf-rail) minmax(0, 1fr);
  min-height: 100vh;
}

.nf-rail {
  border-right: 1px solid var(--nf-rule);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nf-bg-elev) 96%, transparent),
      color-mix(in srgb, var(--nf-bg-reading) 82%, transparent));
  padding: 18px 16px 22px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.nf-wordmark {
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-xl);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--nf-ink);
  margin-bottom: 2px;
}
.nf-wordmark em {
  font-style: italic;
  color: var(--nf-accent-ink);
  font-weight: 400;
}
.nf-wordmark-sub {
  font-family: var(--nf-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--nf-ink-mute);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.nf-rail-intro {
  display: grid;
  gap: 4px;
  margin: 2px 0 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--nf-bg-elev) 78%, transparent);
  border: 1px solid var(--nf-rule-soft);
  border-radius: var(--nf-radius-lg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nf-rule-soft) 70%, transparent);
}
.nf-rail-intro span,
.nf-rail-intro em {
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nf-rail-intro strong {
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-lg);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.05;
}

.nf-nav { display: flex; flex-direction: column; gap: 6px; }
.nf-nav-section {
  border: 1px solid transparent;
  border-radius: var(--nf-radius-lg);
}
.nf-nav-section[open] {
  background: color-mix(in srgb, var(--nf-bg-elev) 42%, transparent);
  border-color: color-mix(in srgb, var(--nf-rule-soft) 64%, transparent);
}
.nf-nav-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--nf-mono);
  font-size: 10px;
  color: var(--nf-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 10px 10px 7px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.nf-nav-group::-webkit-details-marker {
  display: none;
}
.nf-nav-group::after {
  content: "+";
  color: var(--nf-ink-faint);
  font-family: var(--nf-mono);
  font-size: 11px;
  line-height: 1;
}
.nf-nav-section[open] > .nf-nav-group::after {
  content: "−";
}
.nf-nav-section__body {
  display: grid;
  gap: 2px;
  padding: 0 6px 8px;
}
.nf-nav a {
  padding: 8px 10px;
  font-size: var(--nf-fs-sm);
  color: var(--nf-ink-soft);
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: var(--nf-radius);
  display: flex; align-items: center; gap: 8px;
  line-height: 1.2;
  transition: color 120ms, background 120ms, border-color 120ms, transform 120ms;
}
.nf-nav a:hover {
  color: var(--nf-ink);
  background: color-mix(in srgb, var(--nf-bg-subtle) 74%, transparent);
  border-color: var(--nf-rule-soft);
}
.nf-nav a.is-active {
  color: var(--nf-ink);
  border-left-color: var(--nf-accent);
  border-top-color: var(--nf-rule-soft);
  border-right-color: var(--nf-rule-soft);
  border-bottom-color: var(--nf-rule-soft);
  background: color-mix(in srgb, var(--nf-bg-subtle) 86%, transparent);
}
.nf-nav a .count {
  margin-left: auto;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  color: var(--nf-ink-mute);
}

.nf-rail-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--nf-rule-soft);
  font-family: var(--nf-mono);
  font-size: 10px;
  color: var(--nf-ink-mute);
  display: flex; flex-direction: column; gap: 4px;
}
.nf-rail-foot .row { display: flex; justify-content: space-between; gap: 8px; }
.nf-rail-foot .row strong { color: var(--nf-ink-soft); font-weight: 500; }

.nf-theme-toggle {
  font: inherit; background: transparent; border: 1px solid var(--nf-rule);
  color: var(--nf-ink-mute); cursor: pointer; padding: 6px 8px;
  border-radius: var(--nf-radius); margin-top: 6px; text-align: center;
  font-family: var(--nf-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  transition: border-color 120ms, color 120ms;
}
.nf-theme-toggle:hover { border-color: var(--nf-accent); color: var(--nf-ink); }

/* =====================================================================
   Main column
   ===================================================================== */

.nf-main {
  padding: 28px var(--nf-gutter) 80px;
  max-width: none;
  min-width: 0;
  width: 100%;
}

.nf-topbar {
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--nf-rule);
  padding-bottom: 18px; margin-bottom: 24px;
}
.nf-topbar h1 {
  font-family: var(--nf-serif);
  font-weight: 400;
  font-size: var(--nf-fs-2xl);
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.05;
}
.nf-topbar h1 em { color: var(--nf-accent-ink); font-style: italic; font-weight: 400; }
.nf-topbar .nf-kicker {
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.nf-topbar .spacer { flex: 1; }
.nf-topbar .nf-meta { font-family: var(--nf-mono); font-size: var(--nf-fs-xs); color: var(--nf-ink-mute); }

/* =====================================================================
   Stat strip on the briefing / home view ("The Record of the Day").
   Renders as a single horizontal row of stat cards on desktop --
   one card per metric, each with a quiet kicker label, a big
   typographic number, and a small caption underneath. The row scrolls
   horizontally on narrow viewports rather than stacking, so the strip
   keeps its identity even on a 360px phone (the eye learns to read
   left-to-right, and a vertical column would force a re-learn).

   The card surface uses --nf-bg-elev for the "lit-from-behind" lift
   that makes them sit visibly above the page, with a hairline rule
   and a barely-there shadow. The accent card (Tier 1 signal) gets a
   thin gold top border so the eye finds it without the card needing
   a coloured background that would clash with the four light themes.
   ===================================================================== */
.nf-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 0 0 32px;
}

.nf-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  box-shadow: var(--nf-shadow-1);
  min-width: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease,
              transform 150ms ease;
}

.nf-stat-card:hover {
  border-color: var(--nf-rule-strong);
  box-shadow: var(--nf-shadow-2);
}

/* The accent card (Tier 1 signal). Gold capstone signals "this is
   the one you want to look at" without colouring the whole card. */
.nf-stat-card.is-accent {
  border-top: 2px solid var(--nf-accent);
  padding-top: 15px;
}

.nf-stat-num {
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-2xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--nf-ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* OK / BROKEN tag uses the sans face since it isn't really a number;
   the .is-state hook lets us tone it (ok / err) without rewriting
   the layout. */
.nf-stat-num.is-state {
  font-family: var(--nf-sans);
  font-size: var(--nf-fs-xl);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nf-stat-num.is-state.is-ok  { color: var(--nf-ok); }
.nf-stat-num.is-state.is-err { color: var(--nf-err); }

.nf-stat-label {
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nf-ink-mute);
}

.nf-stat-sub {
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  /* On narrow screens, scroll horizontally rather than wrap, so the
     strip keeps reading as a single row. ``scroll-snap`` makes the
     scroll feel intentional rather than incidental. */
  .nf-stat-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;     /* room for any scrollbar */
    margin-right: -16px;     /* bleed to the screen edge for a cleaner end-of-row */
  }
  .nf-stat-card {
    flex: 0 0 75%;
    scroll-snap-align: start;
  }
}

.nf-section-head {
  display: flex; align-items: baseline; gap: 10px;
  border-bottom: 1px solid var(--nf-rule);
  padding-bottom: 8px; margin: 34px 0 14px;
}
.nf-section-head h2 {
  font-family: var(--nf-serif); font-weight: 400; font-size: var(--nf-fs-xl);
  letter-spacing: -0.01em; margin: 0; line-height: 1.1;
}
.nf-section-head .nf-count {
  font-family: var(--nf-mono); font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute); letter-spacing: 0.06em;
}
.nf-section-head .spacer { flex: 1; }

/* =====================================================================
   Article row (broadsheet-style)
   ===================================================================== */

.nf-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-row.t1 { border-left: 2px solid var(--nf-accent); padding-left: 14px; }

.nf-row .stamp {
  font-family: var(--nf-mono);
  font-size: 10.5px;
  color: var(--nf-ink-mute);
  letter-spacing: 0.02em;
  padding-top: 3px;
}
.nf-row .stamp .date { color: var(--nf-ink-soft); }
.nf-row .stamp .tier { margin-top: 6px; display: inline-block; }

.nf-row .body .title {
  font-family: var(--nf-serif);
  font-weight: 400;
  font-size: var(--nf-fs-md);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 4px;
}
.nf-row .body .title a { color: var(--nf-ink); }
.nf-row .body .title a:hover { color: var(--nf-accent-ink); }

.nf-row .sourceline {
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
  margin-bottom: 6px;
}
.nf-row .sourceline .src { color: var(--nf-ink-soft); }

.nf-row .summary {
  color: var(--nf-ink-soft);
  font-size: var(--nf-fs-base);
  line-height: var(--nf-lh-normal);
  margin: 4px 0 8px;
  max-width: 68ch;
}

.nf-row .chips { margin-top: 6px; }

/* =====================================================================
   Chips (topics / entities / tier / hash)
   ===================================================================== */

.nf-chip {
  display: inline-block;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  padding: 2px 7px;
  margin: 2px 3px 2px 0;
  border: 1px solid var(--nf-rule);
  color: var(--nf-ink-soft);
  background: var(--nf-bg-elev);
  border-radius: var(--nf-radius);
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.nf-chip.topic { }
.nf-chip.accent { border-color: var(--nf-accent); color: var(--nf-accent-ink); background: var(--nf-accent-wash); }
.nf-chip.mono  { font-family: var(--nf-mono); }
.nf-chip.kind-person   { }
.nf-chip.kind-org      { }
.nf-chip.kind-domain   { color: var(--nf-info); border-color: color-mix(in oklab, var(--nf-info) 30%, var(--nf-rule)); }
.nf-chip.kind-hash     { color: var(--nf-accent-ink); }
.nf-chip.kind-cve      { color: var(--nf-err); border-color: color-mix(in oklab, var(--nf-err) 40%, var(--nf-rule)); }
.nf-chip.kind-country  { }
.nf-chip.kind-product  { }
.nf-chip.kind-actor    { color: var(--nf-err); }

.nf-tier {
  display: inline-block; padding: 1px 6px;
  font-family: var(--nf-mono); font-size: 10px; letter-spacing: 0.08em;
  border: 1px solid var(--nf-rule); border-radius: var(--nf-radius);
  color: var(--nf-ink-mute); background: var(--nf-bg-elev);
}
.nf-tier.t1 { color: var(--nf-tier-1); border-color: var(--nf-accent); background: var(--nf-accent-wash); }
.nf-tier.t2 { color: var(--nf-tier-2); }
.nf-tier.t3 { color: var(--nf-tier-3); }

/* =====================================================================
   Buttons
   ===================================================================== */

.nf-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 12px;
  border: 1px solid var(--nf-rule);
  background: var(--nf-bg-elev);
  color: var(--nf-ink-soft);
  border-radius: var(--nf-radius);
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.nf-btn:hover { border-color: var(--nf-accent); color: var(--nf-ink); }
.nf-btn.primary {
  border-color: var(--nf-accent);
  color: var(--nf-accent-ink);
  background: var(--nf-accent-wash);
}
.nf-btn.primary:hover { filter: brightness(0.97); }

/* =====================================================================
   Ledger tables (sources, intelligence, search results)
   ===================================================================== */

.nf-ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nf-fs-sm);
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  overflow: hidden;
}
.nf-ledger thead th {
  text-align: left;
  font-family: var(--nf-mono);
  font-weight: 500;
  font-size: 10.5px;
  color: var(--nf-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 14px;
  background: var(--nf-bg-subtle);
  border-bottom: 1px solid var(--nf-rule);
}
.nf-ledger tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--nf-rule-soft);
  vertical-align: top;
  color: var(--nf-ink-soft);
}
.nf-ledger tbody tr:last-child td { border-bottom: 0; }
.nf-ledger tbody tr:hover td { background: var(--nf-bg-subtle); }
.nf-ledger td.num  { font-family: var(--nf-mono); text-align: right; color: var(--nf-ink); font-variant-numeric: tabular-nums; }
.nf-ledger td.mono { font-family: var(--nf-mono); color: var(--nf-ink-mute); font-size: var(--nf-fs-xs); }
.nf-ledger td.title a { color: var(--nf-ink); }
.nf-ledger td.title a:hover { color: var(--nf-accent-ink); }

/* =====================================================================
   Status dots + state chips
   ===================================================================== */

.nf-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--nf-mono); font-size: 10.5px;
  color: var(--nf-ink-soft);
}
.nf-state .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nf-ink-faint); box-shadow: 0 0 0 2px var(--nf-bg-elev);
}
.nf-state.ok       .dot { background: var(--nf-ok); }
.nf-state.warn     .dot { background: var(--nf-warn); }
.nf-state.err      .dot { background: var(--nf-err); }
.nf-state.disabled .dot { background: var(--nf-ink-faint); }

/* =====================================================================
   KPI cards (small analytic strip on Briefing)
   ===================================================================== */

.nf-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 24px;
}
.nf-kpi {
  border: 1px solid var(--nf-rule);
  background: var(--nf-bg-elev);
  border-radius: var(--nf-radius);
  padding: 12px 14px 14px;
}
.nf-kpi .k { font-family: var(--nf-mono); font-size: 10.5px; color: var(--nf-ink-mute);
             text-transform: uppercase; letter-spacing: 0.1em; }
.nf-kpi .v { font-family: var(--nf-serif); font-size: var(--nf-fs-2xl); font-weight: 400;
             line-height: 1.1; letter-spacing: -0.01em; color: var(--nf-ink); margin-top: 2px; }
.nf-kpi .sub { font-family: var(--nf-mono); font-size: 10.5px; color: var(--nf-ink-mute); margin-top: 4px; }
.nf-kpi.accent .v { color: var(--nf-accent-ink); }

/* =====================================================================
   Search + inputs
   ===================================================================== */

.nf-input {
  width: 100%;
  font: inherit;
  font-size: var(--nf-fs-md);
  padding: 10px 12px;
  background: var(--nf-bg-elev);
  color: var(--nf-ink);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  outline: none;
  transition: border-color 120ms, background 120ms;
}
.nf-input:focus { border-color: var(--nf-accent); background: var(--nf-bg-elev); }
.nf-input::placeholder { color: var(--nf-ink-faint); }

.nf-filter-bar {
  display: flex; gap: 10px; align-items: center;
  margin: 4px 0 16px;
}

/* =====================================================================
   Empty state
   ===================================================================== */

.nf-empty {
  border: 1px dashed var(--nf-rule);
  background: var(--nf-bg-elev);
  padding: 28px;
  text-align: center;
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-sm);
  border-radius: var(--nf-radius);
}

/* =====================================================================
   Intelligence ledger: entity row with inline sparkline
   ===================================================================== */

.nf-entity-spark {
  width: 120px; height: 28px; display: block;
}
.nf-entity-spark .line { stroke: var(--nf-accent); stroke-width: 1.25; fill: none; }
.nf-entity-spark .area { fill: var(--nf-accent); opacity: 0.10; }
.nf-entity-spark .axis { stroke: var(--nf-rule); stroke-width: 1; }
.nf-entity-spark .dot  { fill: var(--nf-accent-ink); }

.nf-cooc {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
}
.nf-cooc .pair {
  font-family: var(--nf-mono);
  font-size: 10.5px;
  padding: 2px 8px;
  border: 1px solid var(--nf-rule);
  border-radius: 999px;
  color: var(--nf-ink-soft);
  background: var(--nf-bg-elev);
}
.nf-cooc .pair .n { color: var(--nf-ink-mute); margin-left: 6px; }

/* =====================================================================
   Digest (weekly) — long-form print-style
   ===================================================================== */

.nf-digest-hero {
  text-align: center;
  padding: 22px 0 28px;
  border-bottom: 1px solid var(--nf-rule);
  margin-bottom: 30px;
}
.nf-digest-hero .title {
  font-family: var(--nf-serif); font-weight: 400;
  font-size: var(--nf-fs-3xl); line-height: 1.05; letter-spacing: -0.02em;
}
.nf-digest-hero .title em { color: var(--nf-accent-ink); font-style: italic; }
.nf-digest-hero .sub { font-family: var(--nf-mono); font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute); text-transform: uppercase; letter-spacing: 0.18em; margin-top: 10px; }

.nf-digest-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 30px;
}
@media (max-width: 900px) {
  .nf-shell { grid-template-columns: 1fr; }
  .nf-rail  { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--nf-rule); }
  .nf-digest-grid { grid-template-columns: 1fr; }
  .nf-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Print (for browser-print fallback)
   ===================================================================== */

@media print {
  .nf-rail, .nf-btn, .nf-filter-bar, .nf-topbar-global { display: none !important; }
  .nf-shell { display: block; }
  .nf-main  { max-width: 100%; padding: 0; }
  body { background: #fff; color: #000; }
}

/* =====================================================================
   Top bar (global header)
   Palantir / Recorded Future pattern: domain switcher + global search +
   notifications. One bar across the top, above the sidebar and main.
   ===================================================================== */

.nf-topbar-global {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  background: var(--nf-bg-elev);
  border-bottom: 1px solid var(--nf-rule);
  min-height: 56px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.nf-brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-md);
  font-weight: 500;
  color: var(--nf-ink);
  letter-spacing: -0.01em;
}

.nf-brand-mark em {
  font-style: italic;
  color: var(--nf-accent-ink);
  font-weight: 400;
}

/* Domain switcher — pill group */
.nf-dom-switcher {
  display: flex;
  gap: 2px;
  background: var(--nf-bg-subtle);
  padding: 3px;
  border-radius: var(--nf-radius);
  margin-left: 6px;
}

.nf-dom-switcher button,
.nf-dom-switcher a {
  font: inherit;
  font-size: var(--nf-fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border: 0;
  background: transparent;
  color: var(--nf-ink-mute);
  cursor: pointer;
  border-radius: calc(var(--nf-radius) - 1px);
  white-space: nowrap;
  transition: all 0.12s ease;
}
.nf-dom-switcher button:hover,
.nf-dom-switcher a:hover {
  color: var(--nf-ink);
  background: var(--nf-bg-elev);
}
.nf-dom-switcher .is-active {
  background: var(--nf-bg-elev);
  color: var(--nf-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px var(--nf-rule);
}

/* Domain accent dot before the label when active */
.nf-dom-switcher .is-active::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--nf-accent);
}
.nf-dom-switcher .is-active[data-dom="osint"]::before       { background: var(--nf-dom-osint); }
.nf-dom-switcher .is-active[data-dom="cyber"]::before       { background: var(--nf-dom-cyber); }
.nf-dom-switcher .is-active[data-dom="fincrime"]::before    { background: var(--nf-dom-fincrime); }
.nf-dom-switcher .is-active[data-dom="scams"]::before       { background: var(--nf-dom-scams); }
.nf-dom-switcher .is-active[data-dom="humanrights"]::before { background: var(--nf-dom-humanrights); }

/* Global quicksearch trigger button */
.nf-qs-trigger {
  flex: 1;
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 5px 7px;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: 999px;
  color: var(--nf-ink-soft);
  font: inherit;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.nf-qs-trigger:hover {
  background: var(--nf-bg-subtle);
  border-color: var(--nf-rule-strong);
  color: var(--nf-ink);
}
.nf-qs-trigger:focus-visible {
  outline: 2px solid var(--nf-accent);
  outline-offset: 2px;
}
.nf-qs-trigger .nf-qs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: 50%;
  background: var(--nf-bg-subtle);
  color: var(--nf-accent-ink);
  font-family: var(--nf-serif);
  font-size: 15px;
  line-height: 1;
  flex: 0 0 26px;
}
.nf-qs-trigger .nf-qs-label {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--nf-ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nf-qs-trigger .nf-qs-kbd {
  font-family: var(--nf-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--nf-ink-soft);
  background: var(--nf-bg-subtle);
  border: 1px solid var(--nf-rule-strong);
  border-radius: 999px;
  padding: 4px 8px;
  min-width: 44px;
  text-align: center;
  box-shadow: inset 0 -1px 0 var(--nf-rule);
}
html[data-theme="studio"] .nf-qs-trigger,
html[data-theme="dark"] .nf-qs-trigger {
  background: var(--nf-bg-subtle);
  border-color: var(--nf-rule-strong);
}
html[data-theme="studio"] .nf-qs-trigger:hover,
html[data-theme="dark"] .nf-qs-trigger:hover {
  background: var(--nf-bg-elev);
  border-color: var(--nf-accent);
}
html[data-theme="studio"] .nf-qs-trigger .nf-qs-icon,
html[data-theme="dark"] .nf-qs-trigger .nf-qs-icon {
  background: var(--nf-bg-elev);
  border-color: var(--nf-rule);
}

@media (max-width: 980px) {
  .nf-qs-trigger {
    max-width: none;
  }
  .nf-qs-trigger .nf-qs-label {
    max-width: 22ch;
  }
}

.nf-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--nf-ink-mute);
}
.nf-topbar-right > span,
.nf-topbar-right > a,
.nf-topbar-right > form,
.nf-topbar-right > button {
  opacity: .72;
}
.nf-topbar-right > span:hover,
.nf-topbar-right > a:hover,
.nf-topbar-right > form:hover,
.nf-topbar-right > button:hover {
  opacity: 1;
}
.nf-topbar-right a { color: inherit; }
.nf-topbar-right a:hover { color: var(--nf-ink); }

/* =====================================================================
   Quicksearch overlay (Cmd+K)
   ===================================================================== */

.nf-qs-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 31, 31, 0.32);
  backdrop-filter: blur(2px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 100;
  padding-top: 12vh;
}
.nf-qs-backdrop.is-open { display: flex; }

.nf-qs-panel {
  width: min(640px, 92vw);
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 72vh;
}
.nf-qs-input {
  font: inherit;
  font-size: var(--nf-fs-md);
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--nf-rule);
  background: transparent;
  color: var(--nf-ink);
  outline: none;
}
.nf-qs-input::placeholder { color: var(--nf-ink-faint); }
.nf-qs-results {
  overflow-y: auto;
  max-height: 60vh;
}
.nf-qs-group {
  padding: 6px 0 2px;
}
.nf-qs-group-head {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nf-ink-faint);
  padding: 6px 18px 4px;
}
.nf-qs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  color: var(--nf-ink);
  cursor: pointer;
  font-size: var(--nf-fs-sm);
  border-left: 2px solid transparent;
}
.nf-qs-item:hover,
.nf-qs-item.is-highlighted,
.nf-qs-item.is-active {
  background: var(--nf-bg-subtle);
  border-left-color: var(--nf-accent);
  text-decoration: none;
}
.nf-qs-item .nf-qs-kind {
  font-family: var(--nf-mono);
  font-size: 10px;
  color: var(--nf-ink-faint);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  width: 72px;
  flex: 0 0 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nf-qs-item .nf-qs-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nf-qs-item .nf-qs-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nf-ink);
}
.nf-qs-item .nf-qs-subtitle {
  font-family: var(--nf-mono);
  font-size: 11px;
  color: var(--nf-ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nf-qs-empty {
  padding: 18px;
  text-align: center;
  color: var(--nf-ink-faint);
  font-size: var(--nf-fs-sm);
}
.nf-qs-foot {
  display: flex;
  gap: 18px;
  padding: 8px 18px 10px;
  border-top: 1px solid var(--nf-rule);
  font: 500 10px var(--nf-mono);
  color: var(--nf-ink-faint);
  letter-spacing: 0.06em;
}
.nf-qs-foot kbd {
  display: inline-block;
  padding: 1px 5px;
  margin-right: 4px;
  border: 1px solid var(--nf-rule);
  border-radius: 3px;
  font-family: var(--nf-mono);
  font-size: 10px;
  color: var(--nf-ink-mute);
  background: var(--nf-bg);
}

/* =====================================================================
   Domain home — 3-widget landing page
   ===================================================================== */

.nf-domain-hero {
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius-lg);
  padding: 22px 26px;
  margin-bottom: 22px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.nf-domain-hero .nf-dom-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-top: 8px;
  flex: 0 0 12px;
}
.nf-domain-hero[data-dom="osint"]       .nf-dom-dot { background: var(--nf-dom-osint); }
.nf-domain-hero[data-dom="cyber"]       .nf-dom-dot { background: var(--nf-dom-cyber); }
.nf-domain-hero[data-dom="fincrime"]    .nf-dom-dot { background: var(--nf-dom-fincrime); }
.nf-domain-hero[data-dom="scams"]       .nf-dom-dot { background: var(--nf-dom-scams); }
.nf-domain-hero[data-dom="humanrights"] .nf-dom-dot { background: var(--nf-dom-humanrights); }
.nf-domain-hero[data-dom="all"]         .nf-dom-dot { background: var(--nf-accent); }

.nf-domain-hero h1 {
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-2xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--nf-ink);
}
.nf-domain-hero p {
  margin: 0;
  color: var(--nf-ink-soft);
  font-size: var(--nf-fs-md);
  max-width: 640px;
}

.nf-widgets {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 22px;
}
@media (max-width: 900px) {
  .nf-widgets { grid-template-columns: 1fr; }
}

.nf-widget {
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius-lg);
  padding: 18px 20px;
}
.nf-widget h2 {
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-lg);
  font-weight: 400;
  margin: 0 0 12px;
  color: var(--nf-ink);
  letter-spacing: -0.01em;
}
.nf-widget .nf-widget-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--nf-rule-soft);
  display: block;
}
.nf-widget .nf-widget-row:last-child { border-bottom: 0; }
.nf-widget .nf-widget-row:hover { background: var(--nf-bg-subtle); }
.nf-widget .nf-widget-title {
  font-size: var(--nf-fs-base);
  color: var(--nf-ink);
  line-height: 1.35;
  margin-bottom: 4px;
}
.nf-widget .nf-widget-meta {
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
}
.nf-widget .nf-widget-entity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--nf-rule-soft);
  font-size: var(--nf-fs-sm);
}
.nf-widget .nf-widget-entity .kind {
  font-family: var(--nf-mono);
  font-size: 10px;
  color: var(--nf-ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 10px;
}
.nf-widget .nf-widget-entity .count {
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
}
.nf-widget-empty {
  padding: 14px 0;
  color: var(--nf-ink-faint);
  font-size: var(--nf-fs-sm);
  text-align: center;
}

/* =====================================================================
   Lead story — the Bloomberg/Recorded Future "one headline above all"
   pattern. Serif display title, drop-cap on the quote, no competing widgets.
   ===================================================================== */

.nf-lead-story {
  position: relative;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius-lg);
  padding: 26px 32px 22px;
  margin: 0 0 28px;
  overflow: hidden;
}
.nf-lead-story::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--nf-accent);
}
.nf-lead-story[data-dom="osint"]::before       { background: var(--nf-dom-osint); }
.nf-lead-story[data-dom="cyber"]::before       { background: var(--nf-dom-cyber); }
.nf-lead-story[data-dom="fincrime"]::before    { background: var(--nf-dom-fincrime); }
.nf-lead-story[data-dom="scams"]::before       { background: var(--nf-dom-scams); }
.nf-lead-story[data-dom="humanrights"]::before { background: var(--nf-dom-humanrights); }

.nf-lead-kicker {
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nf-ink-mute);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.nf-lead-kicker .nf-dot { color: var(--nf-ink-faint); }

.nf-lead-title {
  font-family: var(--nf-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--nf-ink);
}
.nf-lead-title a { color: inherit; text-decoration: none; }
.nf-lead-title a:hover { color: var(--nf-accent-ink); }

.nf-lead-quote {
  font-family: var(--nf-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--nf-ink-soft);
  margin: 0 0 14px;
  max-width: 720px;
}
.nf-lead-quote::first-letter {
  font-family: var(--nf-serif);
  font-size: 2.6em;
  float: left;
  line-height: 0.9;
  padding: 6px 8px 0 0;
  color: var(--nf-accent-ink);
  font-weight: 400;
}

.nf-lead-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.nf-ink-faint { color: var(--nf-ink-faint); font-size: var(--nf-fs-xs); }

/* =====================================================================
   Polished empty states
   ===================================================================== */

.nf-empty-polished {
  text-align: center;
  padding: 48px 28px;
  background: var(--nf-bg-elev);
  border: 1px dashed var(--nf-rule);
  border-radius: var(--nf-radius-lg);
  margin: 20px 0 28px;
}
.nf-empty-polished .nf-empty-icon {
  font-size: 36px;
  color: var(--nf-ink-faint);
  line-height: 1;
  margin-bottom: 12px;
}
.nf-empty-polished h3 {
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-lg);
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--nf-ink);
}
.nf-empty-polished p {
  margin: 0 auto;
  max-width: 460px;
  color: var(--nf-ink-soft);
  font-size: var(--nf-fs-sm);
}

/* =====================================================================
   Provenance strip — Source → SHA → Chain → Timestamp, one glance line.
   ===================================================================== */

.nf-provenance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--nf-bg-subtle);
  border: 1px solid var(--nf-rule-soft);
  border-radius: var(--nf-radius);
  margin: 0 0 20px;
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
}
.nf-prov-label {
  font-family: var(--nf-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nf-ink-faint);
  font-size: 10px;
  padding-right: 8px;
  border-right: 1px solid var(--nf-rule);
}
.nf-prov-seg {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.nf-prov-k {
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nf-ink-faint);
}
.nf-prov-v {
  color: var(--nf-ink-soft);
  font-weight: 500;
}
.nf-prov-v.mono {
  font-family: var(--nf-mono);
  font-weight: 400;
}
a.nf-prov-v { color: var(--nf-ink); text-decoration: none; border-bottom: 1px dotted var(--nf-rule); }
a.nf-prov-v:hover { color: var(--nf-accent-ink); border-bottom-color: var(--nf-accent); }
.nf-prov-arrow {
  color: var(--nf-ink-faint);
  font-weight: 300;
  margin: 0 2px;
}

/* =====================================================================
   Cases — placeholder grid, real case pages arrive next session.
   ===================================================================== */

.nf-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
  margin: 18px 0 10px;
}
.nf-case-card {
  position: relative;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius-lg);
  padding: 20px 22px 18px;
  overflow: hidden;
}
.nf-case-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--nf-accent);
}
.nf-case-card[data-dom="osint"]::before       { background: var(--nf-dom-osint); }
.nf-case-card[data-dom="cyber"]::before       { background: var(--nf-dom-cyber); }
.nf-case-card[data-dom="fincrime"]::before    { background: var(--nf-dom-fincrime); }
.nf-case-card[data-dom="scams"]::before       { background: var(--nf-dom-scams); }
.nf-case-card[data-dom="humanrights"]::before { background: var(--nf-dom-humanrights); }

.nf-case-kicker {
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nf-ink-mute);
  margin-bottom: 10px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.nf-case-kicker .nf-dom-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nf-accent);
}
.nf-case-card[data-dom="osint"]       .nf-dom-dot { background: var(--nf-dom-osint); }
.nf-case-card[data-dom="cyber"]       .nf-dom-dot { background: var(--nf-dom-cyber); }
.nf-case-card[data-dom="fincrime"]    .nf-dom-dot { background: var(--nf-dom-fincrime); }
.nf-case-card[data-dom="scams"]       .nf-dom-dot { background: var(--nf-dom-scams); }
.nf-case-card[data-dom="humanrights"] .nf-dom-dot { background: var(--nf-dom-humanrights); }

.nf-case-title {
  font-family: var(--nf-serif);
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 8px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--nf-ink);
}
.nf-case-lead {
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-sm);
  line-height: 1.55;
  color: var(--nf-ink-soft);
  margin: 0 0 12px;
}
.nf-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.nf-case-foot {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--nf-rule-soft);
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
}

/* =====================================================================
   Save-to-case command palette — IDE-style inline input on articles
   ===================================================================== */

.nf-saved-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.nf-saved-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--nf-fs-xs);
  font-weight: 500;
  color: var(--nf-ok);
  background: color-mix(in srgb, var(--nf-ok) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--nf-ok) 35%, transparent);
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.nf-saved-chip:hover {
  background: color-mix(in srgb, var(--nf-ok) 18%, transparent);
  border-color: var(--nf-ok);
}
.nf-saved-check { font-weight: 700; }

.nf-save-btn.is-busy { opacity: 0.6; pointer-events: none; }

.nf-savepal {
  max-width: 640px;
  margin: 14px 0 24px;
  border: 1px solid var(--nf-accent);
  border-radius: 8px;
  background: var(--nf-bg-elev);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.nf-savepal[hidden] { display: none; }

.nf-savepal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nf-rule);
}
.nf-savepal-prompt {
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-sm);
  color: var(--nf-accent-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nf-savepal-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--nf-mono);
  font-size: 14px;
  color: var(--nf-ink);
}
.nf-savepal-close {
  border: 1px solid var(--nf-rule);
  background: transparent;
  padding: 2px 8px;
  border-radius: 4px;
  font: 500 11px var(--nf-mono);
  color: var(--nf-ink-mute);
  cursor: pointer;
}
.nf-savepal-close:hover { color: var(--nf-ink); border-color: var(--nf-ink-mute); }

.nf-savepal-results {
  max-height: 260px;
  overflow-y: auto;
}

.nf-savepal-item {
  display: grid;
  grid-template-columns: minmax(100px, auto) 1fr auto;
  gap: 12px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  align-items: center;
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-savepal-item:last-child { border-bottom: 0; }
.nf-savepal-item.is-active,
.nf-savepal-item:hover {
  background: var(--nf-accent-wash);
}
.nf-savepal-slug {
  font-family: var(--nf-mono);
  font-size: 12px;
  color: var(--nf-accent-ink);
  font-weight: 600;
  white-space: nowrap;
}
.nf-savepal-label {
  font-size: var(--nf-fs-sm);
  color: var(--nf-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nf-savepal-meta {
  font-family: var(--nf-mono);
  font-size: 11px;
  color: var(--nf-ink-faint);
  white-space: nowrap;
}
.nf-savepal-item.is-new .nf-savepal-slug {
  color: var(--nf-ok);
}

.nf-savepal-empty {
  padding: 14px;
  font-size: var(--nf-fs-sm);
  color: var(--nf-ink-mute);
  text-align: center;
}
.nf-savepal-empty code {
  background: var(--nf-bg);
  border: 1px solid var(--nf-rule);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--nf-mono);
  font-size: 11px;
}

.nf-savepal-hint {
  padding: 7px 14px;
  border-top: 1px solid var(--nf-rule);
  font-size: 11px;
  color: var(--nf-ink-faint);
  background: var(--nf-bg);
}
.nf-savepal-hint kbd {
  border: 1px solid var(--nf-rule);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--nf-mono);
  font-size: 10px;
  background: var(--nf-bg-elev);
  color: var(--nf-ink-mute);
  margin: 0 2px;
}
.nf-savepal-hint code {
  font-family: var(--nf-mono);
  font-size: 11px;
  color: var(--nf-accent-ink);
}

/* =====================================================================
   Flash messages — tiny non-blocking confirmations (pre-workspace toast)
   ===================================================================== */

.nf-flash {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: var(--nf-fs-sm);
  font-weight: 500;
  background: var(--nf-ink);
  color: var(--nf-bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transform: translateY(0);
  opacity: 1;
  transition: transform 240ms ease, opacity 240ms ease;
}
.nf-flash--ok   { background: var(--nf-ok); color: white; }
.nf-flash--err  { background: var(--nf-err); color: white; }
.nf-flash--warn { background: var(--nf-accent); color: #000; }
.nf-flash--info { background: var(--nf-ink); color: var(--nf-bg); }
.nf-flash.is-leaving { transform: translateY(10px); opacity: 0; }

/* P3: archived case card — dims the card so investigators scanning
   the "all" view can spot archived ones at a glance without having
   to read the status line. Hover reverts to full opacity so the
   card's actions (Unarchive, Open case) stay comfortably tappable. */
.nf-case-card--archived        { opacity: 0.66; filter: saturate(0.7); }
.nf-case-card--archived:hover  { opacity: 1;    filter: none; }

/* =====================================================================
   Settings page — reusable card primitives shared across the
   platform / infrastructure status tiles (Cloud assistant, Sealed
   cases / Ollama, Tor transport, Court-mode key, Budget).
   ===================================================================== */

.nf-settings-section       { max-width: 860px; }
.nf-settings-title {
  font-family: var(--nf-serif);
  font-size: 20px;
  margin: 28px 0 10px;
}
.nf-settings-title:first-of-type { margin-top: 18px; }

.nf-setting-card {
  padding: 14px 16px;
  border: 1px solid var(--nf-rule);
  border-radius: 4px;
  background: var(--nf-bg-elev);
}
.nf-setting-card__hdr {
  display: flex;
  gap: 14px;
  align-items: center;
}
.nf-setting-card__body { flex: 1; }
.nf-paid-intel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.nf-paid-intel-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-subtle);
}
.nf-paid-intel-row strong {
  display: block;
  color: var(--nf-ink);
  font-size: var(--nf-fs-sm);
}
.nf-paid-intel-row code {
  display: inline-block;
  margin-top: 5px;
  color: var(--nf-ink-faint);
  font-size: 10.5px;
}
.nf-setting-card__rule {
  border: 0;
  border-top: 1px solid var(--nf-rule);
  margin: 12px 0;
}
.nf-setting-card__help {
  font-size: 13px;
  line-height: 1.55;
}
.nf-setting-card__steps {
  margin: 6px 0 0 18px;
  padding: 0;
}
.nf-setting-card__code {
  background: var(--nf-bg-subtle);
  padding: 8px 10px;
  border-radius: 4px;
  margin: 6px 0;
  font: 500 12px var(--nf-mono);
  white-space: pre;
  overflow-x: auto;
}

/* Status pill reused on every card; colour comes from the
   ``nf-tier t1|t2|t3`` helpers which already map to semantic palette. */
.nf-setting-card__badge {
  padding: 2px 8px;
}

/* =====================================================================
   Reading-mode picker (settings.html · "Reading mode" card).
   Five swatches in a responsive grid. Each swatch is a real <button>
   so keyboard / screen-reader users get sensible focus + role
   semantics for free.
   ===================================================================== */
.nf-theme-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.nf-theme-swatch {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  color: var(--nf-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease,
              transform 150ms ease, box-shadow 150ms ease;
}

.nf-theme-swatch:hover {
  border-color: var(--nf-accent);
}

.nf-theme-swatch:focus-visible {
  outline: 2px solid var(--nf-accent);
  outline-offset: 2px;
}

.nf-theme-swatch[aria-checked="true"] {
  border-color: var(--nf-accent);
  background: var(--nf-bg-subtle);
  box-shadow: inset 0 0 0 1px var(--nf-accent);
}

.nf-theme-swatch__chip {
  width: 36px;
  height: 36px;
  border-radius: var(--nf-radius);
  border: 1px solid var(--nf-rule);
  flex-shrink: 0;
}

.nf-theme-swatch__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}

.nf-theme-swatch__meta strong {
  font-weight: 600;
  font-size: var(--nf-fs-sm);
  color: var(--nf-ink);
}

.nf-theme-swatch__meta .nf-meta {
  font-size: var(--nf-fs-xs);
  font-family: var(--nf-mono);
  color: var(--nf-ink-mute);
}

/* Budget progress — accent while in safe range, flips to err once
   the fill passes the 80% threshold (handled via --pct custom prop
   set inline by the template). Falls back gracefully if the prop
   is missing. */
.nf-progress {
  width: 160px;
  height: 6px;
  background: var(--nf-bg-subtle);
  border-radius: 3px;
  overflow: hidden;
}
.nf-progress__bar {
  height: 100%;
  width: var(--pct, 0%);
  background: var(--nf-accent);
  transition: width 240ms ease;
}
.nf-progress--warn .nf-progress__bar { background: var(--nf-err); }

/* Live-run feedback on the pipeline strip: amber dot + subtle breathe
   while the button is mid-poll. Reverts to the last-run dot state the
   moment the strip re-renders on the next page load. */
.nf-pipe-run[disabled] ~ *,
.nf-pipe-run[disabled] {
  /* no-op structural selector anchor — kept so future state styles
     have one stable entry point on the run-now button. */
}
.nf-pipe-run[disabled] .nf-pipe-run-label::before {
  content: "● ";
  color: var(--nf-accent);
  font-size: 10px;
  vertical-align: 1px;
  animation: nf-pipe-pulse 1.4s ease-in-out infinite;
}
@keyframes nf-pipe-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* =====================================================================
   CASE WORKSPACE — /cases/{slug}
   Slim chrome, three columns: drawers · reader · AI assistant.
   ===================================================================== */

.nf-cw {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  margin: -24px -32px 0;
}

/* Header */
.nf-cw-head {
  display: flex;
  gap: 24px;
  padding: 14px 28px 10px;
  border-bottom: 1px solid var(--nf-rule);
  background: var(--nf-bg-elev);
}
.nf-cw-head-main { flex: 1 1 auto; min-width: 0; }
.nf-cw-title {
  font-family: var(--nf-serif);
  font-size: 26px;
  line-height: 1.15;
  margin: 2px 0 0;
  color: var(--nf-ink);
}
.nf-cw-lead {
  margin: 6px 0 0;
  color: var(--nf-ink-soft);
  font-size: 14px;
  max-width: 72ch;
}
.nf-cw-seal {
  color: var(--nf-err);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-left: 8px;
}
.nf-cw-head-side {
  display: flex;
  gap: 18px;
  align-items: center;
  flex: 0 0 auto;
}
.nf-cw-metric {
  text-align: right;
  line-height: 1.1;
  padding: 0 4px;
}
.nf-cw-metric span {
  display: block;
  font-family: var(--nf-serif);
  font-size: 22px;
  color: var(--nf-ink);
  font-weight: 500;
}
.nf-cw-metric em {
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nf-ink-mute);
}

/* 3-column grid */
.nf-cw-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 280px 1fr 380px;
  min-height: 0;
  overflow: hidden;
}

/* LEFT — drawers */
.nf-cw-rail {
  border-right: 1px solid var(--nf-rule);
  background: var(--nf-bg-subtle);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.nf-cw-drawers {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px;
  border-bottom: 1px solid var(--nf-rule);
  background: var(--nf-bg-elev);
}
.nf-cw-drawer {
  flex: 1 1 auto;
  border: 1px solid transparent;
  background: transparent;
  color: var(--nf-ink-soft);
  padding: 6px 8px;
  font: 500 12px var(--nf-sans);
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nf-cw-drawer:hover { background: var(--nf-bg-subtle); color: var(--nf-ink); }
.nf-cw-drawer.is-active {
  background: var(--nf-bg-elev);
  border-color: var(--nf-rule);
  color: var(--nf-ink);
  box-shadow: inset 0 -2px 0 var(--nf-accent);
}
.nf-cw-count {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  font: 500 11px var(--nf-mono);
  color: var(--nf-ink-mute);
  background: var(--nf-bg-subtle);
  border-radius: 3px;
}
.nf-cw-drawer.is-active .nf-cw-count {
  color: var(--nf-accent-ink);
  background: var(--nf-accent-wash);
}
.nf-cw-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 6px 16px;
}
.nf-cw-loading {
  padding: 20px 10px;
  color: var(--nf-ink-mute);
  font-style: italic;
  text-align: center;
}
.nf-cw-empty {
  padding: 20px 14px;
  color: var(--nf-ink-mute);
  font-size: 13px;
  line-height: 1.4;
}

.nf-cw-row {
  display: block;
  padding: 8px 10px;
  border-bottom: 1px solid var(--nf-rule-soft);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.nf-cw-row:hover { background: var(--nf-bg-elev); }
.nf-cw-row .row-title {
  font: 500 13px var(--nf-sans);
  line-height: 1.35;
  color: var(--nf-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nf-cw-row .row-meta {
  display: block;
  margin-top: 3px;
  font: 400 11px var(--nf-mono);
  color: var(--nf-ink-mute);
}

.nf-cw-notes-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
}
#nf-cw-notes-editor {
  width: 100%;
  min-height: 400px;
  resize: vertical;
  border: 1px solid var(--nf-rule);
  border-radius: 4px;
  background: var(--nf-bg-elev);
  color: var(--nf-ink);
  padding: 10px 12px;
  font: 400 13px/1.55 var(--nf-sans);
}
#nf-cw-notes-status {
  font: 400 11px var(--nf-mono);
  color: var(--nf-ink-mute);
  text-align: right;
  padding-right: 4px;
}

/* CENTER — reader */
.nf-cw-center {
  overflow-y: auto;
  padding: 24px 40px;
  background: var(--nf-bg);
}
.nf-cw-overview { max-width: 760px; }
.nf-cw-ov-title {
  font-family: var(--nf-serif);
  font-size: 30px;
  line-height: 1.15;
  margin: 6px 0 10px;
}
.nf-cw-ov-lead {
  color: var(--nf-ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 24px;
}
.nf-cw-ov-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 20px;
  padding: 16px 18px;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: 4px;
  margin-bottom: 24px;
}
.nf-cw-ov-meta em {
  display: block;
  font-style: normal;
  font: 500 11px var(--nf-mono);
  color: var(--nf-ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.nf-cw-ov-meta strong { font: 500 13px var(--nf-sans); color: var(--nf-ink); }
.nf-cw-ov-tag {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 4px;
  font: 500 11px var(--nf-mono);
  border: 1px solid var(--nf-rule);
  border-radius: 3px;
  color: var(--nf-ink-soft);
  background: var(--nf-bg-subtle);
}
.nf-cw-ov-guide p { color: var(--nf-ink-soft); line-height: 1.6; margin: 12px 0; }
.nf-cw-ov-guide kbd {
  padding: 1px 5px;
  border: 1px solid var(--nf-rule);
  border-radius: 3px;
  font: 500 11px var(--nf-mono);
  background: var(--nf-bg-elev);
}

.nf-cw-article { max-width: 760px; }
.nf-cw-article-head { border-bottom: 1px solid var(--nf-rule); padding-bottom: 12px; margin-bottom: 18px; }
.nf-cw-article-title {
  font-family: var(--nf-serif);
  font-size: 26px;
  line-height: 1.2;
  margin: 6px 0 12px;
}
.nf-cw-article-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.nf-cw-article-body { line-height: 1.65; color: var(--nf-ink); font-size: 15px; }
.nf-cw-article-body p { margin: 0 0 14px; }
.nf-cw-article-foot {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--nf-rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  font-size: 12px;
  color: var(--nf-ink-mute);
}
.nf-cw-article-foot em { font-style: normal; display: block; color: var(--nf-ink-faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.nf-cw-article-foot strong { font: 500 12px var(--nf-sans); color: var(--nf-ink-soft); }
.nf-cw-lang {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--nf-rule);
  border-radius: 3px;
  font: 500 10px var(--nf-mono);
  color: var(--nf-ink-soft);
  text-transform: uppercase;
}

/* RIGHT — AI assistant */
.nf-cw-ai {
  border-left: 1px solid var(--nf-rule);
  background: var(--nf-bg-elev);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.nf-cw-ai-head {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--nf-rule);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  background: var(--nf-bg-subtle);
}
.nf-cw-ai-title {
  font-family: var(--nf-serif);
  font-size: 16px;
  margin: 2px 0 0;
  color: var(--nf-ink);
}
.nf-cw-scope {
  border: 1px solid var(--nf-rule);
  background: var(--nf-bg-elev);
  color: var(--nf-ink);
  font: 500 12px var(--nf-sans);
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
}
.nf-cw-chat {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nf-cw-turn { display: flex; flex-direction: column; gap: 4px; }
.nf-cw-turn.is-user .nf-cw-turn-body {
  align-self: flex-end;
  background: var(--nf-accent-wash);
  color: var(--nf-ink);
  border-color: var(--nf-accent);
}
.nf-cw-turn-body {
  align-self: flex-start;
  max-width: 92%;
  padding: 8px 12px;
  border: 1px solid var(--nf-rule);
  border-radius: 6px;
  background: var(--nf-bg);
  color: var(--nf-ink);
  font: 400 13px/1.55 var(--nf-sans);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.nf-cw-turn-body.is-streaming::after {
  content: '▍';
  display: inline-block;
  margin-left: 2px;
  animation: nf-blink 1.1s steps(2, start) infinite;
  color: var(--nf-accent-ink);
}
@keyframes nf-blink { to { visibility: hidden; } }

.nf-cw-cites { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; padding-left: 2px; }
.nf-cw-cite {
  font: 500 11px var(--nf-mono);
  color: var(--nf-accent-ink);
  text-decoration: none;
  padding: 2px 4px;
  border-left: 2px solid var(--nf-accent);
  background: var(--nf-accent-wash);
  border-radius: 0 3px 3px 0;
}
.nf-cw-cite:hover { text-decoration: underline; }

.nf-cw-input {
  border-top: 1px solid var(--nf-rule);
  padding: 10px 12px 12px;
  background: var(--nf-bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#nf-cw-text {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--nf-rule);
  border-radius: 4px;
  background: var(--nf-bg-elev);
  color: var(--nf-ink);
  padding: 8px 10px;
  font: 400 13px/1.5 var(--nf-sans);
}
.nf-cw-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.nf-cw-input-row .spacer { flex: 1 1 auto; }
.nf-cw-provider-hint {
  font: 500 11px var(--nf-mono);
  color: var(--nf-ink-mute);
}

[data-theme='dark'] .nf-cw-head          { background: #1C2128; }
[data-theme='dark'] .nf-cw-rail          { background: #14171C; }
[data-theme='dark'] .nf-cw-ai            { background: #1C2128; }
[data-theme='dark'] .nf-cw-ai-head       { background: #14171C; }
[data-theme='dark'] .nf-cw-input         { background: #14171C; }
[data-theme='dark'] .nf-cw-drawers       { background: #1C2128; }
[data-theme='dark'] .nf-cw-drawer.is-active { background: #2A3039; }

@media (max-width: 1100px) {
  .nf-cw-body { grid-template-columns: 260px 1fr; }
  .nf-cw-ai   { display: none; }
}

/* Case workspace premium cockpit pass.
   Additive overrides only: existing routes/JS keep the same hooks. */
.nf-cw {
  background: var(--nf-bg);
}
.nf-cw-head {
  gap: 28px;
  padding: 14px 24px 12px;
  border-bottom: 1px solid var(--nf-rule);
  background: var(--nf-bg-elev);
  box-shadow: inset 0 -1px 0 var(--nf-rule-soft);
}
.nf-cw-backlink {
  color: inherit;
  opacity: .72;
  text-decoration: none;
}
.nf-cw-backlink:hover {
  opacity: 1;
  color: var(--nf-accent-ink);
}
.nf-cw-title {
  max-width: 18ch;
  letter-spacing: -0.02em;
}
.nf-cw-lead {
  max-width: 78ch;
}
.nf-cw-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.nf-cw-status-line span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: 999px;
  background: var(--nf-bg-subtle);
  color: var(--nf-ink-mute);
  font: 500 10.5px var(--nf-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nf-cw-seal,
.nf-cw-origin,
.nf-cw-ai-policy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--nf-rule);
  border-radius: 999px;
  background: var(--nf-bg-subtle);
  color: var(--nf-accent-ink);
  font: 600 10px var(--nf-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nf-cw-seal,
.nf-cw-ai-policy.is-sealed {
  border-color: color-mix(in srgb, var(--nf-err) 34%, var(--nf-rule));
  color: var(--nf-err);
}
.nf-cw-head-side {
  align-items: stretch;
  gap: 8px;
}
.nf-cw-metric {
  min-width: 88px;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid var(--nf-rule-soft);
  background: var(--nf-bg);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-cw-metric.is-primary {
  border-color: var(--nf-rule);
  background: var(--nf-accent-wash);
}
.nf-cw-metric span {
  font-family: var(--nf-mono);
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}
.nf-cw-metric em {
  display: block;
  margin-top: 5px;
  line-height: 1.25;
}
.nf-cw-head-actions {
  align-content: center;
  max-width: 320px;
}
.nf-cw-admin {
  margin: 10px 28px 14px;
}
.nf-cw-admin > summary {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: 999px;
  background: var(--nf-bg-elev);
  color: var(--nf-ink-soft);
  font: 600 12px var(--nf-sans);
  list-style: none;
}
.nf-cw-admin > summary::-webkit-details-marker {
  display: none;
}
.nf-cw-admin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nf-warn);
}
.nf-cw-admin-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--nf-rule);
  border-radius: 10px;
  background: var(--nf-bg-subtle);
}
.nf-btn.danger {
  border-color: color-mix(in srgb, var(--nf-err) 44%, var(--nf-rule));
  color: var(--nf-err);
}
.nf-cw-body {
  grid-template-columns: 300px minmax(520px, 1fr);
  background: var(--nf-bg);
}
.nf-cw-rail {
  background: var(--nf-bg-subtle);
}
.nf-cw-rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--nf-rule-soft);
  background: var(--nf-bg-elev);
}
.nf-cw-rail-head span {
  font: 600 11px var(--nf-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nf-ink);
}
.nf-cw-rail-head em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 10px var(--nf-mono);
  color: var(--nf-ink-faint);
  font-style: normal;
}
.nf-cw-drawers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 10px;
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-cw-drawer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
}
.nf-cw-drawer-main {
  min-width: 0;
}
.nf-cw-drawer:hover {
  background: var(--nf-bg-elev);
}
.nf-cw-drawer.is-active {
  background: var(--nf-bg-elev);
  border-color: var(--nf-rule);
  box-shadow: inset 3px 0 0 var(--nf-accent);
}
.nf-cw-count {
  margin-left: 0;
  border: 1px solid var(--nf-rule-soft);
  border-radius: 999px;
  background: var(--nf-bg);
}
.nf-cw-drawer-body {
  padding: 10px 8px 18px;
}
.nf-cw-empty {
  margin: 8px;
  padding: 12px 14px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: 8px;
  background: var(--nf-bg-elev);
}
.nf-cw-row {
  margin: 0 2px 7px;
  padding: 10px 12px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: 8px;
  background: var(--nf-bg);
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-cw-row:hover {
  border-color: var(--nf-rule);
  background: var(--nf-bg-elev);
  text-decoration: none;
}
.nf-cw-row .row-title {
  font-size: 13px;
}
.nf-cw-row .row-meta {
  margin-top: 6px;
  letter-spacing: .02em;
}
#nf-cw-notes-editor,
#nf-cw-text {
  border-radius: 9px;
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-cw-center {
  padding: 22px clamp(24px, 3vw, 42px);
  background: var(--nf-bg);
}
.nf-cw-overview,
.nf-cw-article {
  max-width: 820px;
}
.nf-cw-ov-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 16px;
  align-items: start;
  margin-bottom: 14px;
}
.nf-cw-ov-readiness {
  border: 1px solid var(--nf-rule);
  border-radius: 12px;
  padding: 11px 13px;
  background: var(--nf-bg-elev);
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-cw-ov-readiness span {
  display: block;
  font-family: var(--nf-serif);
  font-size: 21px;
  line-height: 1;
  color: var(--nf-ink);
  text-transform: capitalize;
}
.nf-cw-ov-readiness em {
  display: block;
  margin-top: 8px;
  font: 600 10px var(--nf-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nf-ink-mute);
  font-style: normal;
}
.nf-cw-ov-title {
  letter-spacing: -0.02em;
}
.nf-cw-ov-meta {
  border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-cw-ov-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: 12px;
  background: var(--nf-bg-elev);
}
.nf-cw-ov-guide p:first-child {
  margin-top: 0;
}
.nf-cw-ov-playbook {
  display: grid;
  gap: 8px;
}
.nf-cw-ov-playbook div {
  padding: 10px 12px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: 9px;
  background: var(--nf-bg);
}
.nf-cw-ov-playbook span {
  display: block;
  margin-bottom: 5px;
  font: 600 10px var(--nf-mono);
  color: var(--nf-accent-ink);
}
.nf-cw-ov-playbook strong {
  display: block;
  font-size: 13px;
  color: var(--nf-ink);
}
.nf-cw-ov-playbook em {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--nf-ink-mute);
  font-style: normal;
}
.nf-cw-ov-sealed {
  color: var(--nf-err);
}
.nf-cw-article {
  border: 1px solid var(--nf-rule-soft);
  border-radius: 14px;
  background: var(--nf-bg-elev);
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
  overflow: hidden;
}
.nf-cw-article-head {
  padding: 20px 24px 16px;
  margin-bottom: 0;
  background: var(--nf-bg-subtle);
}
.nf-cw-article-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--nf-ink-mute);
  font: 600 10px var(--nf-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nf-cw-article-kicker > span {
  padding: 2px 7px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: 999px;
  background: var(--nf-bg-elev);
}
.nf-cw-article-title {
  margin-top: 12px;
  font-size: 28px;
  letter-spacing: -0.015em;
}
.nf-cw-article-tools {
  gap: 7px;
}
.nf-cw-article-body {
  padding: 24px;
  background: var(--nf-bg-elev);
}
.nf-cw-article-foot {
  margin-top: 0;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--nf-rule-soft);
  background: var(--nf-bg-subtle);
}
.nf-cw-ai {
  position: fixed;
  display: flex;
  top: 72px;
  right: 24px;
  bottom: 24px;
  width: min(560px, calc(100vw - 48px));
  z-index: 180;
  border: 1px solid var(--nf-rule);
  border-radius: 16px;
  background: var(--nf-bg-elev);
  box-shadow: 0 18px 50px rgba(0,0,0,.16), inset 0 1px 0 var(--nf-rule-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px) scale(.985);
  transition: opacity 150ms ease, transform 150ms ease;
  overflow: hidden;
}
.nf-cw-ai-backdrop {
  position: fixed;
  inset: 56px 0 0;
  z-index: 170;
  display: none;
  background: color-mix(in srgb, var(--nf-bg) 58%, transparent);
  backdrop-filter: blur(5px);
}
.nf-cw.is-ai-open .nf-cw-ai-backdrop {
  display: block;
}
.nf-cw.is-ai-open .nf-cw-ai {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}
.nf-cw-ai-head {
  padding: 14px 16px 12px;
  align-items: flex-start;
  background: var(--nf-bg-subtle);
}
.nf-cw-ai-title {
  font-size: 19px;
  letter-spacing: -0.01em;
}
.nf-cw-ai-sub {
  margin-top: 4px;
  color: var(--nf-ink-mute);
  font-size: 12px;
}
.nf-cw-scope {
  border-radius: 999px;
  padding: 6px 10px;
}
.nf-cw-ai-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nf-cw-ai-close {
  border: 1px solid var(--nf-rule-soft);
  border-radius: 999px;
  background: var(--nf-bg-elev);
  color: var(--nf-ink-mute);
  padding: 6px 10px;
  font: 600 10px var(--nf-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.nf-cw-ai-close:hover {
  color: var(--nf-ink);
  border-color: var(--nf-rule);
}
.nf-cw-chat {
  padding: 16px;
  background: var(--nf-bg-elev);
}
.nf-cw-turn-body {
  border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-cw-input {
  padding: 12px 14px 14px;
}
.nf-cw-input-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--nf-ink-mute);
  font: 600 10px var(--nf-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nf-cw-input-head em {
  color: var(--nf-accent-ink);
  font-style: normal;
}
.nf-cw-provider-hint {
  padding: 3px 7px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: 999px;
  background: var(--nf-bg-elev);
}
html[data-theme='studio'] .nf-cw-head,
html[data-theme='dark'] .nf-cw-head,
html[data-theme='studio'] .nf-cw-ai,
html[data-theme='dark'] .nf-cw-ai,
html[data-theme='studio'] .nf-cw-article,
html[data-theme='dark'] .nf-cw-article {
  background: var(--nf-bg-elev);
}
html[data-theme='studio'] .nf-cw-row,
html[data-theme='dark'] .nf-cw-row,
html[data-theme='studio'] .nf-cw-metric,
html[data-theme='dark'] .nf-cw-metric {
  background: var(--nf-bg-subtle);
}
@media (max-width: 1280px) {
  .nf-cw-body { grid-template-columns: 280px minmax(420px, 1fr); }
  .nf-cw-head { flex-direction: column; }
  .nf-cw-head-side { flex-wrap: wrap; }
  .nf-cw-head-actions { max-width: none; }
}
@media (max-width: 900px) {
  .nf-cw-body { grid-template-columns: 1fr; }
  .nf-cw-rail { display: none; }
  .nf-cw-ov-hero,
  .nf-cw-ov-guide,
  .nf-cw-ov-meta {
    grid-template-columns: 1fr;
  }
  .nf-cw-ai {
    top: 66px;
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }
}

/* =================================================================
 * Case closure — CLOSED ribbon, close/reopen buttons, modal.
 * ================================================================= */

.nf-cw-head.is-closed {
  position: relative;
}
.nf-cw-closed-ribbon {
  position: absolute;
  top: 0; left: 0;
  padding: 4px 14px 6px;
  background: var(--nf-err);
  color: #fff;
  font-family: var(--nf-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  border-bottom-right-radius: 6px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.22);
  z-index: 2;
}

.nf-cw-head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 8px;
}
.nf-cw-head-actions .nf-btn {
  font-size: 12px;
  padding: 5px 10px;
}

.nf-cw-head.is-closed .nf-cw-title {
  color: var(--nf-muted, #666);
}

/* Disabled input area when closed. */
.nf-cw-input textarea:disabled,
.nf-cw-send:disabled {
  background: var(--nf-bg-subtle, #f5f5f4);
  color: var(--nf-muted, #888);
  cursor: not-allowed;
}

/* Modal primitives — first modal in the app, keep them small + reusable. */
.nf-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.nf-modal-backdrop[hidden] { display: none; }
.nf-modal {
  background: var(--nf-card, #fff);
  color: var(--nf-fg, #1a1a1a);
  width: min(540px, 92vw);
  max-height: 86vh;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.nf-modal-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--nf-border, #e5e5e4);
  display: flex; align-items: center; justify-content: space-between;
}
.nf-modal-head h2 {
  margin: 0; font-size: 16px; font-weight: 600;
}
.nf-modal-x {
  background: none; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--nf-muted, #888);
  padding: 0 4px;
}
.nf-modal-x:hover { color: var(--nf-fg, #111); }
.nf-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
}
.nf-modal-help {
  margin: 0 0 14px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--nf-muted, #555);
}
.nf-field {
  display: block;
  margin-bottom: 14px;
}
.nf-field > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.nf-field textarea,
.nf-field select,
.nf-field input {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--nf-border, #ddd);
  border-radius: 6px;
  background: var(--nf-card, #fff);
  color: inherit;
  font-family: inherit;
}
.nf-field textarea { resize: vertical; }
.nf-modal-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--nf-border, #e5e5e4);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* =====================================================================
   EDITORIAL POLISH - paper surfaces + typographic richness
   ---------------------------------------------------------------------
   Three layers:
     1. Paper back-light - light themes keep a soft room tone; dark
        mode stays flat so it reads as newsprint, not a tool console.
     2. Brand position   - light themes keep a tiny halo; dark mode
        removes it for a calmer editorial masthead.
     3. Surface edge     - fine borders and top hairlines, with heavy
        depth removed from dark cards and panels.

   Plus: full editorial typography features (Inter ss/cv sets,
   Cormorant ligatures, old-style numerals in prose, tabular lining
   numerals in ledgers / KPIs / forensic timestamps).

   All rules are additive and self-contained. Deleting this block
   returns the dashboard to its pre-polish state.
   ===================================================================== */

/* --- 1. Body back-light ---------------------------------------------- */
:root:not([data-theme="studio"]):not([data-theme="dark"]) body,
html[data-theme="paper"] body,
html[data-theme="light"] body {
  background-image: none;
}
html[data-theme="studio"] body,
html[data-theme="dark"] body {
  background-image: none;
}

/* Let the back-light show through the chrome surfaces — they were
   opaque, which flattened the page. A faint alpha lets the gradient
   pass without altering their apparent colour to the eye. */
html[data-theme="paper"]  .nf-topbar-global,
html[data-theme="light"]  .nf-topbar-global,
:root:not([data-theme="studio"]):not([data-theme="dark"]) .nf-topbar-global {
  background: color-mix(in srgb, var(--nf-bg-elev) 94%, transparent);
  backdrop-filter: saturate(1.02);
}
html[data-theme="studio"] .nf-topbar-global,
html[data-theme="dark"]   .nf-topbar-global {
  background: color-mix(in srgb, var(--nf-bg-elev) 92%, transparent);
  backdrop-filter: saturate(1.08);
}

/* --- 2. Brand halo --------------------------------------------------- */
.nf-brand-mark { position: relative; isolation: isolate; }
.nf-brand-mark::before {
  content: "";
  position: absolute;
  inset: -80% -55%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(158,126,46,0.10), transparent 72%);
  filter: blur(22px);
}
html[data-theme="studio"] .nf-brand-mark::before,
html[data-theme="dark"]   .nf-brand-mark::before {
  background: none;
}

/* Wordmark in the sidebar rail gets the same treatment, slightly
   smaller — it's a secondary brand position, not the primary. */
.nf-wordmark { position: relative; isolation: isolate; }
.nf-wordmark::before {
  content: "";
  position: absolute;
  inset: -40% -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(158,126,46,0.07), transparent 72%);
  filter: blur(18px);
}
html[data-theme="studio"] .nf-wordmark::before,
html[data-theme="dark"]   .nf-wordmark::before {
  background: none;
}

/* --- 3. Surface edge highlights ------------------------------------- */
/* Paper: inset top highlight mimics the way light skims the top
   edge of a real raised card on a warm desk. The drop shadow is
   directional (slight vertical offset, wide soft blur) — cards
   feel lifted, not floated. */
.nf-kpi,
.nf-widget,
.nf-domain-hero,
.nf-lead-story,
.nf-case-card,
.nf-setting-card,
.nf-qs-panel {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.60),
    0 1px 2px rgba(15,15,15,0.04),
    0 14px 36px -20px rgba(15,15,15,0.18);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

/* Studio: flat editorial paper. No floating card depth, just a fine
   top edge and a hairline border so panels stay calm while scanning. */
html[data-theme="studio"] .nf-kpi,
html[data-theme="studio"] .nf-widget,
html[data-theme="studio"] .nf-domain-hero,
html[data-theme="studio"] .nf-lead-story,
html[data-theme="studio"] .nf-case-card,
html[data-theme="studio"] .nf-setting-card,
html[data-theme="studio"] .nf-qs-panel,
html[data-theme="dark"] .nf-kpi,
html[data-theme="dark"] .nf-widget,
html[data-theme="dark"] .nf-domain-hero,
html[data-theme="dark"] .nf-lead-story,
html[data-theme="dark"] .nf-case-card,
html[data-theme="dark"] .nf-setting-card,
html[data-theme="dark"] .nf-qs-panel {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 0 0 1px rgba(255,255,255,0.012);
}

/* Interactive cards (case + widget + domain-hero hover) get a slightly
   warmer brass-tinted shadow on hover in Paper, and a subtle gold
   edge rim in Studio. This is the "premium interactive" signal. */
.nf-case-card:hover,
.nf-widget .nf-widget-row:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 1px 2px rgba(15,15,15,0.05),
    0 18px 44px -18px color-mix(in srgb, var(--nf-accent) 28%, transparent);
}
html[data-theme="studio"] .nf-case-card:hover,
html[data-theme="dark"]   .nf-case-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 0 0 1px color-mix(in srgb, var(--nf-accent) 22%, transparent);
}

/* --- 4. Section-head: a neutral structural tick left of every h2 ----
   Was gold — moved to --nf-rule-strong so gold is reserved only for
   semantic signal (T1, active nav, primary button, wordmark halo).
   Section dividers are structure, not signal. */
.nf-section-head h2 {
  position: relative;
  padding-left: 14px;
}
.nf-section-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 2px;
  background: var(--nf-rule-strong);
  border-radius: 1px;
}

/* --- 5. Typographic richness (features + variant-numeric) ----------- */
/* Body uses richer Inter feature set — sharper digits, contextual
   alternates, proper kerning. Optical sizing lets the browser pick
   the correct glyph shapes at small + display sizes. */
body {
  font-feature-settings: "cv02","cv03","cv04","cv11","ss01","ss03","calt","kern";
  font-optical-sizing: auto;
}

/* Flowing prose wants old-style numerals — they ride the baseline
   like lowercase letters so "Mr. Pavlov's 1994 report" stops
   reading as a ransom note. */
p, li, blockquote, .nf-lead-quote, .nf-row .summary,
.nf-cw-article-body, .nf-cw-ov-lead, .nf-domain-hero p {
  font-variant-numeric: oldstyle-nums proportional-nums;
}

/* Forensic / ledger surfaces want lining tabular numerals — every
   digit the same width so hashes, timestamps, budgets, and
   article counts align vertically. */
.nf-ledger,
.nf-ledger td.num,
.nf-ledger td.mono,
.nf-kpi .v,
.nf-kpi .k,
.nf-kpi .sub,
.nf-row .stamp,
.nf-prov-v,
.nf-prov-v.mono,
.nf-prov-k,
.nf-cw-metric span,
.nf-cw-metric em,
.nf-cw-count,
.nf-topbar .nf-meta,
.nf-rail-foot,
.nf-chip,
.nf-tier,
.nf-state {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Display serif wants editorial ligatures + kerning. Cormorant
   has beautiful "st" "ct" "fi" forms that only activate with
   dlig + liga set explicitly. */
.nf-wordmark,
.nf-topbar h1,
.nf-section-head h2,
.nf-widget h2,
.nf-lead-title,
.nf-digest-hero .title,
.nf-cw-title,
.nf-cw-ov-title,
.nf-cw-article-title,
.nf-case-title,
.nf-settings-title,
.nf-domain-hero h1,
.nf-empty-polished h3 {
  font-feature-settings: "liga","dlig","kern";
  font-optical-sizing: auto;
}

/* --- 6. Selection + focus now match the refined antique brass ------- */
::selection {
  background: color-mix(in srgb, var(--nf-accent) 22%, transparent);
  color: var(--nf-ink);
}
:focus-visible {
  outline: 2px solid var(--nf-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- 7. The main canvas becomes the reading surface -----------------
   This is the single biggest perceptual move in the polish. The
   chrome (sidebar, topbar) stays on --nf-bg-elev (white / graphite).
   The content column gets --nf-bg-reading (warm ivory / warm
   graphite) — the luxury reading surface the palette was designed
   around. Effect: every KPI card, widget, lead story, case card,
   and ledger now LIFTS against an ivory page instead of blending
   into bright white chrome. Same magazine-page logic as the
   Specter Journal — content sits on warm paper, not on glass.

   Case workspace (.nf-cw) uses its own bg and is unaffected because
   it bleeds outside of .nf-main with negative margins. */
.nf-main {
  background: var(--nf-bg-reading);
}

/* --- 8. Breathing room — the "not piled" + "not tight" fix --------- */
.nf-section-head { margin-top: 48px; }
.nf-section-head:first-of-type { margin-top: 28px; }
.nf-kpi { padding: 16px 18px 18px; }
.nf-kpis { gap: 16px; margin: 4px 0 28px; }
.nf-lead-story { padding: 32px 36px 28px; margin: 4px 0 32px; }
.nf-lead-kicker { margin-bottom: 16px; }
.nf-row { padding: 20px 0 22px; }

/* Chips sit on elev (white in Paper, graphite in Studio) — they
   now POP off the ivory reading surface, which is the correct
   editorial hierarchy. No change needed; they already do the right
   thing automatically because --nf-bg-elev is used in .nf-chip. */

/* Row hover on ivory: lift to chrome-white instead of the pale
   gold tint. Less gold noise, cleaner "rise to card" metaphor. */
.nf-row:hover {
  background: var(--nf-bg-elev);
}
.nf-row:hover::before {
  background: color-mix(in srgb, var(--nf-accent) 30%, transparent);
}
html[data-theme="studio"] .nf-row:hover,
html[data-theme="dark"]   .nf-row:hover {
  background: color-mix(in srgb, var(--nf-bg-elev) 80%, transparent);
}

/* Brand halo toned down slightly — gold was a touch loud now that
   ivory widens the warm-temperature range of the page. */
.nf-brand-mark::before {
  background: radial-gradient(closest-side, rgba(158,126,46,0.07), transparent 72%);
}
.nf-wordmark::before {
  background: radial-gradient(closest-side, rgba(158,126,46,0.05), transparent 72%);
}

/* --- 8. Feed row: ledger-page structure + comfortable scan ----------
   Fixes three things in one stroke:
     a. Row separators were invisible (--nf-rule-soft on #FAFAF7 ~0%
        perceptual contrast). Lifted to --nf-rule so every article
        reads as its own row instead of the page reading as one wall
        of text.
     b. No vertical structure between the timestamp column and the
        article body — a hairline column rule gives the feed the
        "ledger page" discipline Bloomberg/FT use for long scan lists.
     c. The summary (dek) was painting at body-ink weight, which on
        a 30-row scan becomes eye strain. We lift it to #4A4A4A
        (still AA, ~8:1 on #FAFAF7), bump size +0.5px and leading
        from 1.6 to 1.72. Title stays sharp; only the dek softens.
   ------------------------------------------------------------------- */
.nf-row {
  border-bottom: 1px solid var(--nf-rule);
  padding: 18px 0 20px;
  position: relative;
}
.nf-row::before {
  content: "";
  position: absolute;
  left: 96px;                   /* aligns to the end of the stamp col */
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--nf-rule-soft);
  pointer-events: none;
}
.nf-row.t1::before { background: color-mix(in srgb, var(--nf-accent) 45%, transparent); }
.nf-row .body { padding-left: 10px; }

.nf-row .summary {
  color: #4A4A4A;
  font-size: 15.5px;
  line-height: 1.72;
  margin: 6px 0 10px;
  max-width: 68ch;
}

.nf-row:hover {
  background: color-mix(in srgb, var(--nf-accent-wash) 30%, transparent);
}
.nf-row:hover::before {
  background: color-mix(in srgb, var(--nf-accent) 35%, transparent);
}

/* Studio mirrors — warmer pale grey for the dek, warmer column rule */
html[data-theme="studio"] .nf-row .summary,
html[data-theme="dark"]   .nf-row .summary {
  color: #6B8DB5;
}
html[data-theme="studio"] .nf-row:hover,
html[data-theme="dark"]   .nf-row:hover {
  background: color-mix(in srgb, var(--nf-accent) 7%, transparent);
}

/* --- 10. Article navigation + reading canvas — /article/{id} --------
   The template references .nf-reading-canvas / .nf-reading-surface /
   .nf-reading-column / .nf-read / .nf-read-lede / .nf-read-endmark /
   .nf-aftermatter / .nf-entity-cloud but none of those classes were
   styled — the browser was rendering pure defaults, which is why
   the article body looked unformatted.

   Editorial template:
     · The article sits on a white "page" (elev) floating on the
       ivory main surface — the classic "printed page on cream desk".
     · Body: Cormorant Garamond, 18px, 1.75 leading, oldstyle numerals.
     · First paragraph: 3.4-em brass drop-cap, flush-left.
     · Subsequent paragraphs: 1.4-em first-line indent (classic
       magazine rhythm — NO blank line between paragraphs, just
       indent, which is how books/FT/Economist read).
     · End-mark § centred below the body.
     · Lede (LLM summary) is a gold-bar italicised pull-quote above.
     · After-matter (entities, findings, related, evidence) is full
       width below, broken into generously spaced blocks.
   ------------------------------------------------------------------- */

.nf-reader-nav {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(130px, 0.5fr) minmax(280px, 1fr);
  gap: 10px;
  align-items: stretch;
  margin: -6px 0 18px;
  padding: 10px;
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-elev);
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-reader-nav__return,
.nf-reader-nav__pager {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.nf-reader-nav__return a,
.nf-reader-nav__pager a,
.nf-reader-nav__pager .is-disabled {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-subtle);
  color: inherit;
  text-decoration: none;
}
.nf-reader-nav__return a {
  font-family: var(--nf-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nf-accent-ink);
}
.nf-reader-nav__return a:hover,
.nf-reader-nav__pager a:hover {
  border-color: var(--nf-accent);
  background: var(--nf-bg-elev);
}
.nf-reader-nav__scope {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nf-reader-nav__scope strong {
  color: var(--nf-ink);
  font-size: var(--nf-fs-xs);
  letter-spacing: 0.04em;
}
.nf-reader-nav__pager {
  justify-content: flex-end;
}
.nf-reader-nav__pager a,
.nf-reader-nav__pager .is-disabled {
  flex: 1 1 130px;
  min-width: 0;
}
.nf-reader-nav__pager span span,
.nf-reader-nav__pager a span {
  font-family: var(--nf-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nf-ink-mute);
}
.nf-reader-nav__pager strong {
  color: var(--nf-ink);
  font-size: var(--nf-fs-xs);
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nf-reader-nav__pager .is-disabled {
  opacity: 0.55;
}
@media (max-width: 980px) {
  .nf-reader-nav {
    grid-template-columns: 1fr;
  }
  .nf-reader-nav__pager {
    justify-content: flex-start;
  }
}

.nf-reading-canvas {
  margin: 24px 0 44px;
}
.nf-reading-surface {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 34px 22px 38px;
  box-shadow: none;
}
html[data-theme="studio"] .nf-reading-surface,
html[data-theme="dark"]   .nf-reading-surface {
  background: transparent;
  box-shadow: none;
}
.nf-reading-column {
  max-width: 82ch;
  margin: 0 auto;
}
.nf-article-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.nf-read-panel {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 18px;
  padding: 28px 30px 26px;
  box-shadow: none;
}
.nf-read-panel::before,
.nf-read-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}
.nf-read-panel::before {
  inset: -18px -34px -22px;
  background: color-mix(in srgb, var(--nf-bg-elev) 78%, var(--nf-bg-reading));
  opacity: 0.22;
  filter: blur(0.4px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.nf-read-panel::after {
  display: none;
}
.nf-read-panel:hover::before,
.nf-read-panel:focus-within::before {
  opacity: 0.50;
  transform: translateY(-1px);
}
html[data-theme="studio"] .nf-read-panel,
html[data-theme="dark"]   .nf-read-panel {
  background: transparent;
  box-shadow: none;
}
html[data-theme="studio"] .nf-read-panel::before,
html[data-theme="dark"]   .nf-read-panel::before {
  background: #232931;
  opacity: 0.20;
  box-shadow: 0 24px 64px -46px rgba(0,0,0,0.78);
}
html[data-theme="studio"] .nf-read-panel:hover::before,
html[data-theme="studio"] .nf-read-panel:focus-within::before,
html[data-theme="dark"]   .nf-read-panel:hover::before,
html[data-theme="dark"]   .nf-read-panel:focus-within::before {
  opacity: 0.54;
}
html[data-theme="studio"] .nf-read-panel::after,
html[data-theme="dark"]   .nf-read-panel::after {
  display: none;
}
.nf-article-frame {
  max-width: 80ch;
  margin: 0 auto;
}
.nf-article-header {
  margin-bottom: 30px;
}
.nf-article-edition {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--nf-rule);
  border-bottom: 1px solid var(--nf-rule-soft);
  padding: 8px 0 7px;
  color: var(--nf-ink);
  font-family: var(--nf-sans);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.nf-article-edition-no {
  color: var(--nf-ink-soft);
  font-family: var(--nf-serif);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}
.nf-article-section-strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding-bottom: 0;
  border-bottom: 0;
  color: var(--nf-ink-mute);
  font-family: var(--nf-sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nf-article-desk,
.nf-article-kicker {
  color: var(--nf-accent-ink);
  font-weight: 700;
}
.nf-article-strip-sep {
  color: var(--nf-ink-faint);
  margin: 0 6px;
}
.nf-article-heading {
  margin: 24px 0 12px;
}
.nf-article-kicker {
  margin-bottom: 11px;
  font-family: var(--nf-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nf-article-headline {
  max-width: 980px;
  margin: 0 0 12px;
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: clamp(34px, 5.2vw, 58px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.99;
}
.nf-article-standfirst {
  max-width: 66ch;
  margin: 0;
  color: var(--nf-ink-soft);
  font-family: var(--nf-serif);
  font-size: 20px;
  font-style: italic;
  line-height: 1.45;
}
.nf-article-byline-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 18px 0 0;
  padding: 7px 0;
  border-top: 1px solid var(--nf-rule-soft);
  border-bottom: 0;
  color: var(--nf-ink-mute);
  font-family: var(--nf-sans);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.nf-article-byline-strip span:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
  color: var(--nf-ink-faint);
}

/* --- Lede — the LLM summary block ----------------------------------- */
.nf-read-lede {
  border-left: 2px solid var(--nf-accent);
  padding: 2px 0 2px 18px;
  margin: 0 0 30px;
}
.nf-read-lede-kicker {
  font-family: var(--nf-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nf-ink-mute);
  margin-bottom: 8px;
}
.nf-read-lede p {
  font-family: var(--nf-serif);
  font-size: 17.5px;
  line-height: 1.6;
  font-style: italic;
  color: var(--nf-ink-soft);
  margin: 0;
  font-feature-settings: "liga","dlig","kern";
}

/* --- Topics strip under the lede ------------------------------------ */
.nf-read-topics {
  margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--nf-rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --- The reading body ----------------------------------------------- */
.nf-read {
  font-family: var(--nf-serif);
  font-size: 19.5px;                 /* was 18 — slightly bigger, easier */
  line-height: 1.74;
  /* Matte ink — lifted a notch off pure #141414 so the page reads
     as printed matte rather than wet-black on glass. */
  color: #1F1F1F;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: "liga","dlig","kern";
  font-optical-sizing: auto;
  hyphens: auto;
  -webkit-hyphens: auto;
}
html[data-theme="studio"] .nf-read,
html[data-theme="dark"]   .nf-read {
  color: #E8E3D8;                    /* bone ink on graphite */
}
.nf-read p {
  margin: 0 0 0.9em;
}
.nf-read-subhead {
  margin: 1.7em 0 0.55em;
  padding-top: 0.55em;
  border-top: 1px solid var(--nf-rule-soft);
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.16;
}
.nf-read-bullets {
  margin: 1em 0 1.15em;
  padding: 14px 18px 14px 28px;
  border-top: 1px solid var(--nf-rule-soft);
  border-bottom: 1px solid var(--nf-rule-soft);
  background: color-mix(in srgb, var(--nf-bg-elev) 86%, var(--nf-accent-wash));
  color: var(--nf-ink-soft);
  font-family: var(--nf-serif);
  font-size: 0.96em;
  line-height: 1.58;
}
.nf-read-bullets li {
  margin: 0 0 0.55em;
  padding-left: 0.25em;
}
.nf-read-bullets li:last-child {
  margin-bottom: 0;
}
/* Drop cap on first paragraph — muted oak, not saturated brass,
   so it reads as pressed print rather than metallic foil. */
.nf-read p:first-of-type::first-letter {
  font-family: var(--nf-serif);
  font-size: 3.4em;
  float: left;
  line-height: 0.88;
  padding: 6px 10px 0 0;
  color: #3A2E18;                    /* muted oak — matte version of brass */
  font-weight: 500;
}
html[data-theme="studio"] .nf-read p:first-of-type::first-letter,
html[data-theme="dark"]   .nf-read p:first-of-type::first-letter {
  color: #C6A15B;                    /* tiny amber editorial signal */
}
/* Subsequent paragraphs: first-line indent, no top margin. This is
   the classic magazine rhythm — paragraphs don't "separate", they
   flow, and the indent tells the eye a new paragraph began. */
.nf-read p + p {
  text-indent: 1.4em;
}
/* A short lead-in sequence (first 3-4 words small-capped) would be
   nice here, but it needs span wrapping in the template. Skipping
   for this pass to keep the Python change minimal. */

/* End-mark § — quiet editorial closing signal (matte) */
.nf-read-endmark {
  text-align: center;
  font-family: var(--nf-serif);
  font-size: 22px;
  color: #6A5A32;
  margin: 28px 0 10px;
  opacity: 0.55;
}

/* Reading-meta — character count + collection timestamp */
.nf-read-meta {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-family: var(--nf-mono);
  font-size: 11px;
  color: var(--nf-ink-mute);
  letter-spacing: 0.04em;
  padding-top: 18px;
  border-top: 1px solid var(--nf-rule-soft);
  margin-top: 8px;
}
.nf-read-meta-sep { color: var(--nf-ink-faint); }

/* Bottom reader bridge: same-desk previous/next navigation. */
.nf-article-nav {
  margin: -10px 0 42px;
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius-lg);
  background: var(--nf-bg-elev);
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
  overflow: hidden;
}
.nf-article-nav-kicker {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nf-rule-soft);
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nf-article-nav-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.nf-article-nav-card,
.nf-article-nav-home {
  position: relative;
  min-width: 0;
  padding: 15px 16px;
  color: inherit;
  text-decoration: none;
}
.nf-article-nav-card {
  display: grid;
  gap: 5px;
}
.nf-article-nav-home {
  display: grid;
  place-items: center;
  min-width: 132px;
  border-left: 1px solid var(--nf-rule-soft);
  border-right: 1px solid var(--nf-rule-soft);
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10.5px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nf-article-nav-home span {
  color: var(--nf-accent-ink);
  font-size: 16px;
}
.nf-article-nav-direction,
.nf-article-nav-meta {
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nf-article-nav-card strong {
  overflow: hidden;
  color: var(--nf-ink);
  font-size: var(--nf-fs-sm);
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nf-article-nav-card kbd {
  position: absolute;
  right: 12px;
  top: 12px;
  padding: 1px 5px;
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  color: var(--nf-ink-faint);
  font: 500 10px var(--nf-mono);
}
.nf-article-nav-card:hover,
.nf-article-nav-home:hover {
  background: var(--nf-bg-subtle);
}
.nf-article-nav-card:hover strong,
.nf-article-nav-home:hover {
  color: var(--nf-accent-ink);
}
.nf-article-nav-card.is-disabled {
  opacity: 0.55;
}

.nf-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.nf-related-card {
  display: grid;
  gap: 7px;
  padding: 12px 13px;
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-elev);
  color: inherit;
  text-decoration: none;
}
.nf-related-card:hover {
  border-color: var(--nf-rule-strong);
  background: var(--nf-bg-subtle);
}
.nf-related-card__meta {
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nf-related-card strong {
  color: var(--nf-ink);
  font-size: var(--nf-fs-sm);
  line-height: 1.35;
}

/* --- After-matter — Entities / Findings / Related / Evidence ------- */
.nf-aftermatter {
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin: 0 0 48px;
}
.nf-aftermatter-block { }
.nf-entity-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Narrow viewports — soften the reading-surface padding so the
   drop-cap and body don't touch the frame. */
@media (max-width: 720px) {
  .nf-reading-surface { padding: 32px 20px 26px; }
  .nf-read-panel { padding: 26px 22px 22px; }
  .nf-article-edition,
  .nf-article-section-strip,
  .nf-article-byline-strip {
    align-items: flex-start;
    flex-direction: column;
  }
  .nf-article-nav-grid {
    grid-template-columns: 1fr;
  }
  .nf-article-nav-home {
    min-width: 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--nf-rule-soft);
    border-bottom: 1px solid var(--nf-rule-soft);
  }
  .nf-read { font-size: 18px; }
  .nf-read p:first-of-type::first-letter { font-size: 3em; }
}

/* --- 11. Print: strip the ambient layer, go true monochrome -------- */
@media print {
  body {
    background-image: none !important;
    background: #fff !important;
  }
  .nf-brand-mark::before,
  .nf-wordmark::before { display: none !important; }
  .nf-kpi, .nf-widget, .nf-domain-hero, .nf-lead-story,
  .nf-case-card, .nf-setting-card, .nf-qs-panel {
    box-shadow: none !important;
  }
}

/* =====================================================================
   Role-home widgets.
   The five bespoke per-role home pages (Defender / Offensive /
   Threat-Intel / CVE / Compliance) compose a small set of cyber-shaped
   widgets: KEV table rows, CVE cards, threat-actor cards, story
   strips, regulator strips, NIS2/DORA timeline, our-own-status row.
   All styles here use existing design tokens -- paper / ink / navy /
   muted / success / warning / error -- so the role pages stay on
   palette across all five reading-mode variants and Studio.
   ===================================================================== */

.nf-role-block {
  margin: 0 0 24px;
}

/* ---- KEV table ---- */
.nf-kev-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--nf-sans);
  font-size: var(--nf-fs-sm);
}
.nf-kev-table thead th {
  text-align: left;
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nf-ink-mute);
  font-weight: 500;
  padding: 8px 12px;
  border-bottom: 1px solid var(--nf-rule);
}
.nf-kev-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--nf-rule-soft);
  vertical-align: top;
  line-height: 1.45;
}
.nf-kev-row.is-ransom td:first-child {
  border-left: 2px solid var(--nf-accent);
}
.nf-kev-row:hover td {
  background: var(--nf-bg-subtle);
}
.nf-kev-cve { white-space: nowrap; }
.nf-kev-cve a {
  color: var(--nf-accent-ink);
  border-bottom: 1px dotted var(--nf-rule);
}
.nf-kev-cve a:hover {
  color: var(--nf-ink);
  border-bottom-color: var(--nf-accent);
}
.nf-kev-vendor strong {
  display: block;
  color: var(--nf-ink);
  font-weight: 600;
}
.nf-kev-vendor .nf-meta {
  display: block;
  color: var(--nf-ink-mute);
  font-size: var(--nf-fs-xs);
}
.nf-kev-name {
  color: var(--nf-ink-soft);
  max-width: 36ch;
}
.nf-kev-when { white-space: nowrap; }
.nf-kev-table.is-compact thead th,
.nf-kev-table.is-compact tbody td { padding: 6px 8px; }

/* ---- Pills + chips used inside KEV / CVE rows ---- */
.nf-cvss-chip {
  display: inline-block;
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--nf-rule);
  color: var(--nf-ink-soft);
  background: var(--nf-bg-elev);
  letter-spacing: 0.02em;
  min-width: 36px;
  text-align: center;
}
.nf-cvss-chip[data-severity="CRITICAL"] {
  border-color: var(--nf-err);
  color: var(--nf-err);
}
.nf-cvss-chip[data-severity="HIGH"] {
  border-color: var(--nf-warn);
  color: var(--nf-warn);
}
.nf-cvss-chip[data-severity="MEDIUM"] {
  border-color: var(--nf-rule-strong);
  color: var(--nf-ink-mute);
}

.nf-due-pill {
  display: inline-block;
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--nf-warn);
  color: var(--nf-warn);
  background: transparent;
}

.nf-ransom-pill {
  display: inline-block;
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--nf-accent-wash);
  color: var(--nf-accent-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nf-countdown-pill {
  display: inline-block;
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 4px;
  border: 1px solid var(--nf-rule);
  color: var(--nf-ink-fade);
}
.nf-countdown-pill.is-critical {
  border-color: var(--nf-warn);
  color: var(--nf-warn);
  background: var(--nf-warn-wash, #fff8e1);
}
.nf-countdown-pill.is-overdue {
  border-color: var(--nf-err);
  color: var(--nf-err);
  background: var(--nf-err-wash, #fce4ec);
}

/* ---- CVE card grid + card itself ---- */
.nf-cve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.nf-cve-card {
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.nf-cve-card:hover {
  border-color: var(--nf-rule-strong);
  box-shadow: var(--nf-shadow-1);
}
.nf-cve-card__hdr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.nf-cve-card__id {
  color: var(--nf-accent-ink);
  font-weight: 600;
  border-bottom: 1px dotted var(--nf-rule);
}
.nf-cve-card__id:hover {
  color: var(--nf-ink);
  border-bottom-color: var(--nf-accent);
}
.nf-cve-card__desc {
  margin: 0;
  font-size: var(--nf-fs-sm);
  line-height: 1.55;
  color: var(--nf-ink-soft);
}
.nf-cve-card__match {
  margin: 0;
  font-size: var(--nf-fs-xs);
  color: var(--nf-accent-ink);
  border-top: 1px dashed var(--nf-rule);
  padding-top: 6px;
}
.nf-cve-card__match .nf-meta { color: var(--nf-ink-mute); }

/* ---- Mini-tags inside the CVE card header ---- */
.nf-tag {
  display: inline-block;
  font-family: var(--nf-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--nf-rule);
  background: transparent;
  color: var(--nf-ink-mute);
  text-transform: uppercase;
}
.nf-tag--kev {
  border-color: var(--nf-accent);
  color: var(--nf-accent-ink);
  background: var(--nf-accent-wash);
}
.nf-tag--ssvc-act {
  border-color: var(--nf-err);
  color: var(--nf-err);
}
.nf-tag--ssvc-attend {
  border-color: var(--nf-warn);
  color: var(--nf-warn);
}
.nf-tag--ssvc-track,
.nf-tag--ssvc-track\* { border-color: var(--nf-rule-strong); }
.nf-tag--score {
  border-color: var(--nf-accent);
  color: var(--nf-accent-ink);
}

/* ---- CVE strapline counts (top of CVE home) ---- */
.nf-cve-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
}
.nf-cve-count strong {
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-xl);
  letter-spacing: -0.01em;
  color: var(--nf-ink);
  margin-right: 6px;
}
.nf-cve-count .nf-meta {
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nf-ink-mute);
}

/* ---- Source strip (story rows) ---- */
.nf-source-strip {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nf-source-strip__row {
  padding: 10px 0;
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-source-strip__row:last-child { border-bottom: 0; }
.nf-source-strip__title {
  display: block;
  color: var(--nf-ink);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.4;
}
.nf-source-strip__title:hover { color: var(--nf-accent-ink); }
.nf-source-strip__meta {
  margin-top: 2px;
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
}
.nf-source-strip__src {
  font-family: var(--nf-mono);
  color: var(--nf-ink-soft);
}

/* ---- Threat-actor card grid ---- */
.nf-actor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.nf-actor-card {
  display: block;
  padding: 12px 14px;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.nf-actor-card.is-curated {
  border-color: var(--nf-rule-strong);
}
.nf-actor-card:hover {
  border-color: var(--nf-accent);
  box-shadow: var(--nf-shadow-1);
}
.nf-actor-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.nf-actor-card__name {
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-md);
  letter-spacing: -0.01em;
  color: var(--nf-ink);
  line-height: 1.2;
}
.nf-actor-card__confidence {
  flex-shrink: 0;
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nf-ink-mute);
  border: 1px solid var(--nf-rule);
  border-radius: 999px;
  padding: 1px 6px;
}
.nf-actor-card__meta {
  margin-top: 4px;
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
  display: flex;
  gap: 8px;
}
.nf-actor-card__meta .kind {
  font-family: var(--nf-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nf-accent-ink);
}
.nf-actor-card__context,
.nf-actor-card__aliases {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--nf-ink-mute);
}
.nf-actor-card__context {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.nf-actor-card__context span {
  border: 1px solid var(--nf-rule-soft);
  border-radius: 999px;
  padding: 1px 6px;
  background: var(--nf-surface-2);
}
.nf-actor-card__aliases {
  font-family: var(--nf-mono);
  color: var(--nf-ink-faint);
}

/* ---- NIS2 / DORA timeline ---- */
.nf-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nf-timeline-item {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--nf-rule-soft);
  align-items: baseline;
}
.nf-timeline-item:last-child { border-bottom: 0; }
.nf-timeline-date {
  flex-shrink: 0;
  width: 96px;
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
  letter-spacing: 0.04em;
}
.nf-timeline-label {
  color: var(--nf-ink-soft);
  font-size: var(--nf-fs-sm);
  line-height: 1.5;
}
.nf-timeline-item.is-past .nf-timeline-date { color: var(--nf-ink-faint); }
.nf-timeline-item.is-past .nf-timeline-label { color: var(--nf-ink-mute); }
.nf-timeline-item.is-near .nf-timeline-date { color: var(--nf-warn); }
.nf-timeline-item.is-near .nf-timeline-label { color: var(--nf-ink); }
.nf-timeline-item.is-future .nf-timeline-date { color: var(--nf-ink-soft); }

/* ---- Our-own compliance status rows ---- */
.nf-compliance-status {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nf-compliance-status__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-compliance-status__row:last-child { border-bottom: 0; }
.nf-compliance-status__name strong { color: var(--nf-ink); font-weight: 600; }
.nf-compliance-status__name .nf-meta {
  margin-left: 6px;
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
}
.nf-compliance-status__state {
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--nf-rule);
  white-space: nowrap;
}
.nf-compliance-status__row.is-ok .nf-compliance-status__state {
  border-color: var(--nf-ok);
  color: var(--nf-ok);
}
.nf-compliance-status__row.is-progress .nf-compliance-status__state {
  border-color: var(--nf-warn);
  color: var(--nf-warn);
}
.nf-compliance-status__row.is-planned .nf-compliance-status__state {
  border-color: var(--nf-rule-strong);
  color: var(--nf-ink-mute);
}
.nf-compliance-status__row.is-n\/a .nf-compliance-status__state {
  border-color: var(--nf-rule);
  color: var(--nf-ink-faint);
}


/* =====================================================================
   Role-home visual differentiation -- WP-design-pass.

   The five cyber role homes share a dispatcher and a macro library, but
   each role has a distinct working posture. The CSS below gives them
   five distinct visual personalities while staying inside the existing
   token palette: no new colours, no new shadows beyond hairline lift,
   no gradients, no JS.

   The shared anatomy is the new ``.nf-role-hero``. It is a richer
   replacement for ``.nf-domain-hero`` on the five role pages. It
   carries a left-rail accent, a role-specific kicker, optional inline
   stats, and exposes ``data-role`` so per-role overrides can swap
   accent tone, kicker glyph, and ornament treatments without touching
   the markup.
   ===================================================================== */

.nf-role-hero {
  position: relative;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius-lg);
  padding: 22px 26px 22px 30px;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 18px 26px;
  overflow: hidden;
}
.nf-role-hero::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--nf-accent);
}
.nf-role-hero__head {
  min-width: 0;
}
.nf-role-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nf-ink-mute);
  margin: 0 0 8px;
}
.nf-role-hero__kicker::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nf-accent);
}
.nf-role-hero__kicker .sep {
  color: var(--nf-ink-faint);
  font-weight: 400;
}
.nf-role-hero h1 {
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-2xl);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.05;
  margin: 0 0 6px;
  color: var(--nf-ink);
}
.nf-role-hero p {
  margin: 0;
  color: var(--nf-ink-soft);
  font-size: var(--nf-fs-md);
  max-width: 62ch;
  line-height: 1.45;
}
.nf-role-hero__aside {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}
.nf-role-hero__aside .nf-btn {
  align-self: flex-end;
}

/* Inline metric tiles inside the hero -- the "counts at a glance" line.
   Used by the CVE hero (KEV total / new this week / scored 100+) and
   any role that wants a stat strip without dropping a separate widget. */
.nf-role-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 28px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--nf-rule-soft);
  grid-column: 1 / -1;
}
.nf-role-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
}
.nf-role-stat__num {
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-xl);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--nf-ink);
}
.nf-role-stat__num.is-urgent { color: var(--nf-err); }
.nf-role-stat__num.is-warn   { color: var(--nf-warn); }
.nf-role-stat__num.is-ok     { color: var(--nf-ok); }
.nf-role-stat__lbl {
  font-family: var(--nf-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nf-ink-mute);
}

@media (max-width: 720px) {
  .nf-role-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .nf-role-hero__aside { justify-self: start; align-items: flex-start; }
}

/* ---- Per-role accent + ornament -------------------------------- */

/* Defender -- SOC blue, a calm operations colour. Hero acquires a
   subtle dotted underline beneath the kicker to evoke a status line. */
.nf-role-hero[data-role="defender"]::before { background: var(--nf-info); }
.nf-role-hero[data-role="defender"] .nf-role-hero__kicker::before {
  background: var(--nf-info);
}

/* Offensive -- terminal red. The kicker prefix becomes a prompt
   glyph and the title is offset by a thin mono glyph treatment. */
.nf-role-hero[data-role="offensive"]::before { background: var(--nf-err); }
.nf-role-hero[data-role="offensive"] .nf-role-hero__kicker {
  color: var(--nf-err);
}
.nf-role-hero[data-role="offensive"] .nf-role-hero__kicker::before {
  background: transparent;
  width: auto; height: auto;
  content: "$";
  font-family: var(--nf-mono);
  color: var(--nf-err);
  font-size: var(--nf-fs-sm);
  letter-spacing: 0;
}
.nf-role-hero[data-role="offensive"] h1 {
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xl);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* Threat-Intel -- editorial briefing tone. Hero gets a centred
   hairline rule beneath the title, like a cable header. */
.nf-role-hero[data-role="threatintel"]::before {
  background: var(--nf-dom-osint);
}
.nf-role-hero[data-role="threatintel"] .nf-role-hero__kicker::before {
  background: var(--nf-dom-osint);
}
.nf-role-hero[data-role="threatintel"] h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--nf-rule-strong);
  margin: 10px 0 0;
}

/* CVE -- urgency. Heavy left rail, accent ink kicker, hero stats
   painted in the urgent ink so the operator's eye lands on the
   countdown numbers first. */
.nf-role-hero[data-role="cve"] {
  border-color: var(--nf-rule-strong);
}
.nf-role-hero[data-role="cve"]::before {
  width: 4px;
  background: var(--nf-err);
}
.nf-role-hero[data-role="cve"] .nf-role-hero__kicker {
  color: var(--nf-err);
}
.nf-role-hero[data-role="cve"] .nf-role-hero__kicker::before {
  background: var(--nf-err);
}

/* Compliance -- audit green, deliberate, structural. Kicker becomes
   a small "section symbol" §. The hero is bordered top + bottom to
   feel like a regulatory header. */
.nf-role-hero[data-role="compliance"]::before { background: var(--nf-ok); }
.nf-role-hero[data-role="compliance"] .nf-role-hero__kicker {
  color: var(--nf-ok);
}
.nf-role-hero[data-role="compliance"] .nf-role-hero__kicker::before {
  background: transparent;
  width: auto; height: auto;
  content: "\00a7";
  font-family: var(--nf-serif);
  color: var(--nf-ok);
  font-size: var(--nf-fs-md);
  letter-spacing: 0;
}


/* =====================================================================
   Role-page layouts -- one set of asymmetric grids, scoped under
   ``.nf-role-page[data-role="..."]`` so the styles never bleed into
   non-role pages.
   ===================================================================== */

.nf-role-page {
  display: grid;
  gap: 22px;
}

/* ----- Defender ------------------------------------------------------
   SOC dashboard layout: KEV table spans full width up top, then a
   2-up of breach feed (wider) and detection ideas, with a slim
   right-side rail for entities below. */

.nf-role-page[data-role="defender"] .nf-role-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
.nf-role-page[data-role="defender"] .nf-role-grid--3 {
  grid-template-columns: 1.4fr 1fr 0.9fr;
}
@media (max-width: 1080px) {
  .nf-role-page[data-role="defender"] .nf-role-grid,
  .nf-role-page[data-role="defender"] .nf-role-grid--3 {
    grid-template-columns: 1fr;
  }
}
.nf-role-page[data-role="defender"] .nf-widget {
  position: relative;
}
.nf-role-page[data-role="defender"] .nf-widget--accent::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--nf-info);
  border-radius: 2px;
}

/* ----- Offensive -----------------------------------------------------
   Tactical/terminal: a 5/7 grid where the left column is a narrow
   tool-strip (PoC drops) in monospace, and the right column hosts the
   wide CVE-card grid. Below, the techniques widget runs full-width as
   a research log. */

.nf-role-page[data-role="offensive"] .nf-role-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 18px;
}
@media (max-width: 1080px) {
  .nf-role-page[data-role="offensive"] .nf-role-grid {
    grid-template-columns: 1fr;
  }
}
.nf-role-page[data-role="offensive"] .nf-widget--terminal {
  background: var(--nf-bg-elev);
  border-color: var(--nf-rule-strong);
  font-family: var(--nf-mono);
}
.nf-role-page[data-role="offensive"] .nf-widget--terminal h2 {
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-md);
  letter-spacing: 0;
  color: var(--nf-ink);
  border-bottom: 1px solid var(--nf-rule);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.nf-role-page[data-role="offensive"] .nf-widget--terminal h2::before {
  content: "> ";
  color: var(--nf-err);
  font-family: var(--nf-mono);
}
.nf-role-page[data-role="offensive"] .nf-widget--terminal .nf-source-strip__title {
  font-family: var(--nf-mono);
  font-weight: 500;
  font-size: var(--nf-fs-sm);
  line-height: 1.45;
}

/* ----- Threat-Intel --------------------------------------------------
   Intelligence briefing: actor cards take a wider, denser grid;
   ransomware feed and KEV-ransomware sit side-by-side as parallel
   columns of evidence. */

.nf-role-page[data-role="threatintel"] .nf-actor-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.nf-role-page[data-role="threatintel"] .nf-actor-card {
  border-left: 2px solid var(--nf-rule-soft);
}
.nf-role-page[data-role="threatintel"] .nf-actor-card:hover {
  border-left-color: var(--nf-dom-osint);
}
.nf-role-page[data-role="threatintel"] .nf-role-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 18px;
}
@media (max-width: 1080px) {
  .nf-role-page[data-role="threatintel"] .nf-role-grid {
    grid-template-columns: 1fr;
  }
}
.nf-role-page[data-role="threatintel"] .nf-widget--brief h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.nf-role-page[data-role="threatintel"] .nf-widget--brief h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--nf-rule-soft);
  align-self: center;
}

/* ----- CVE -----------------------------------------------------------
   Urgent: the patch-now table is the focal point and gets a stronger
   container. Vulnrichment Act + Top scored sit on a 2-up grid below;
   asset-match alerts run a wider single column at the bottom. */

.nf-role-page[data-role="cve"] .nf-widget--urgent {
  border-color: var(--nf-rule-strong);
  position: relative;
}
.nf-role-page[data-role="cve"] .nf-widget--urgent::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--nf-err);
  border-top-left-radius: var(--nf-radius-lg);
  border-bottom-left-radius: var(--nf-radius-lg);
}
.nf-role-page[data-role="cve"] .nf-widget--urgent h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.nf-role-page[data-role="cve"] .nf-widget--urgent h2 .nf-tag-urgent {
  font-family: var(--nf-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nf-err);
  border: 1px solid var(--nf-err);
  padding: 1px 6px;
  border-radius: 3px;
}
.nf-role-page[data-role="cve"] .nf-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 1080px) {
  .nf-role-page[data-role="cve"] .nf-role-grid {
    grid-template-columns: 1fr;
  }
}

/* ----- Compliance ---------------------------------------------------
   Ledger/timeline. The timeline is the page spine and gets a centred
   axis treatment. Regulator + standards run as paired columns, and
   the own-status panel is a separate ledger card. */

.nf-role-page[data-role="compliance"] .nf-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 1080px) {
  .nf-role-page[data-role="compliance"] .nf-role-grid {
    grid-template-columns: 1fr;
  }
}
.nf-role-page[data-role="compliance"] .nf-widget--ledger {
  background: var(--nf-bg-elev);
  border-color: var(--nf-rule-strong);
}
.nf-role-page[data-role="compliance"] .nf-widget--spine {
  position: relative;
  padding-left: 28px;
}
.nf-role-page[data-role="compliance"] .nf-widget--spine .nf-timeline {
  position: relative;
}
.nf-role-page[data-role="compliance"] .nf-widget--spine .nf-timeline::before {
  content: "";
  position: absolute;
  left: 113px;
  top: 6px; bottom: 6px;
  width: 1px;
  background: var(--nf-rule);
}
.nf-role-page[data-role="compliance"] .nf-widget--spine .nf-timeline-item {
  position: relative;
  padding-left: 0;
}
.nf-role-page[data-role="compliance"] .nf-widget--spine .nf-timeline-item::after {
  content: "";
  position: absolute;
  left: 110px;
  top: 14px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule-strong);
}
.nf-role-page[data-role="compliance"] .nf-widget--spine .nf-timeline-item.is-near::after {
  background: var(--nf-warn);
  border-color: var(--nf-warn);
}
.nf-role-page[data-role="compliance"] .nf-widget--spine .nf-timeline-item.is-past::after {
  background: var(--nf-rule-strong);
  border-color: var(--nf-rule-strong);
}
@media (max-width: 720px) {
  .nf-role-page[data-role="compliance"] .nf-widget--spine .nf-timeline::before,
  .nf-role-page[data-role="compliance"] .nf-widget--spine .nf-timeline-item::after {
    display: none;
  }
}

/* Compact empty-state -- one line, no padding-heavy block. Used by
   the per-role widgets when the dataset is genuinely small (e.g. a
   detection-ideas list with no rows in a 48-hour window). */
.nf-widget-empty.is-compact {
  padding: 6px 0;
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
  text-align: left;
  font-family: var(--nf-mono);
  letter-spacing: 0.02em;
}

/* Subhead under a widget H2 -- replaces the inline ``style="margin:..."``
   we used to repeat on every role page. Tighter, monospaced, mute. */
.nf-widget__sub {
  margin: -6px 0 10px;
  font-size: var(--nf-fs-xs);
  font-family: var(--nf-mono);
  color: var(--nf-ink-mute);
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.nf-widget__sub code {
  font-size: 11.5px;
  background: var(--nf-bg-subtle);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--nf-ink-soft);
}


/* =====================================================================
   Role-home premium pass v2 -- higher density, stronger hierarchy.

   This layer deliberately sits after the first role-home pass. It uses
   the same tokens and the same markup contract, but adds the details
   that make the dashboards feel designed rather than assembled:
   compact instrument plates, numbered source rows, card rails, and a
   clearer table/card rhythm.
   ===================================================================== */

.nf-role-page {
  --nf-role-accent: var(--nf-accent);
  --nf-role-accent-ink: var(--nf-accent-ink);
}
.nf-role-page[data-role="defender"] {
  --nf-role-accent: var(--nf-info);
  --nf-role-accent-ink: var(--nf-info);
}
.nf-role-page[data-role="offensive"] {
  --nf-role-accent: var(--nf-err);
  --nf-role-accent-ink: var(--nf-err);
}
.nf-role-page[data-role="threatintel"] {
  --nf-role-accent: var(--nf-dom-osint);
  --nf-role-accent-ink: var(--nf-dom-osint);
}
.nf-role-page[data-role="cve"] {
  --nf-role-accent: var(--nf-err);
  --nf-role-accent-ink: var(--nf-err);
}
.nf-role-page[data-role="compliance"] {
  --nf-role-accent: var(--nf-ok);
  --nf-role-accent-ink: var(--nf-ok);
}

.nf-role-page .nf-role-hero {
  padding: 26px 30px 24px 34px;
  border-color: var(--nf-rule-strong);
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-role-page .nf-role-hero::before {
  width: 5px;
  background: var(--nf-role-accent);
}
.nf-role-page .nf-role-hero__kicker {
  color: var(--nf-role-accent-ink);
  margin-bottom: 10px;
}
.nf-role-page .nf-role-hero h1 {
  font-size: clamp(var(--nf-fs-2xl), 3.8vw, var(--nf-fs-3xl));
}
.nf-role-page .nf-role-hero p {
  max-width: 68ch;
}

.nf-role-plate {
  min-width: 190px;
  padding: 12px 14px;
  border: 1px solid var(--nf-rule);
  border-left: 2px solid var(--nf-role-accent);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-subtle);
  text-align: left;
}
.nf-role-plate__label {
  display: block;
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nf-ink-mute);
  margin-bottom: 4px;
}
.nf-role-plate strong {
  display: block;
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-lg);
  font-weight: 500;
  line-height: 1.1;
  color: var(--nf-ink);
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.nf-role-plate span:last-child {
  display: block;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--nf-ink-mute);
}

.nf-role-page .nf-role-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px;
  border-top-color: var(--nf-rule);
}
.nf-role-page .nf-role-stat {
  min-width: 0;
  padding: 11px 12px 10px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-subtle);
}
.nf-role-page .nf-role-stat__num {
  font-size: var(--nf-fs-2xl);
}

.nf-role-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -12px 0 2px;
  padding: 10px 0 0;
  border-top: 1px solid var(--nf-rule-soft);
}
.nf-role-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-elev);
  color: var(--nf-ink-soft);
  font-family: var(--nf-mono);
  font-size: 10.5px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.nf-role-actions a:first-child {
  border-color: var(--nf-role-accent);
  color: var(--nf-role-accent-ink);
}
.nf-role-actions a:hover {
  border-color: var(--nf-role-accent);
  color: var(--nf-ink);
  background: var(--nf-bg-subtle);
}

.nf-role-page .nf-widget {
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-role-page .nf-widget h2 {
  position: relative;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-role-page .nf-widget h2::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border: 1px solid var(--nf-role-accent);
  border-radius: 50%;
  vertical-align: 0.08em;
}
.nf-role-page .nf-widget__sub {
  margin-top: -3px;
  margin-bottom: 12px;
}
.nf-role-page .nf-widget-empty {
  padding: 7px 0;
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
  text-align: left;
}

.nf-role-page .nf-source-strip {
  counter-reset: nf-source-row;
}
.nf-role-page .nf-source-strip__row {
  position: relative;
  counter-increment: nf-source-row;
  padding: 11px 12px 11px 42px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-elev);
  margin-bottom: 8px;
}
.nf-role-page .nf-source-strip__row:last-child {
  margin-bottom: 0;
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-role-page .nf-source-strip__row::before {
  content: counter(nf-source-row, decimal-leading-zero);
  position: absolute;
  left: 11px;
  top: 13px;
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--nf-role-accent-ink);
}
.nf-role-page .nf-source-strip__row:hover {
  border-color: var(--nf-rule-strong);
  background: var(--nf-bg-subtle);
}
.nf-role-page .nf-source-strip__title {
  font-size: var(--nf-fs-sm);
  line-height: 1.38;
}
.nf-role-page .nf-source-strip__meta {
  margin-top: 5px;
  font-family: var(--nf-mono);
  font-size: 11px;
}

.nf-role-page .nf-cve-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.nf-role-page .nf-cve-card {
  position: relative;
  padding: 13px 14px 12px 16px;
  border-left: 2px solid var(--nf-rule-soft);
}
.nf-role-page .nf-cve-card:hover {
  border-left-color: var(--nf-role-accent);
}
.nf-role-page .nf-cve-card__hdr {
  padding-bottom: 7px;
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-role-page[data-role="cve"] #role-widget-vulnrichment-act .nf-cve-card:first-child,
.nf-role-page[data-role="cve"] #role-widget-top-scored .nf-cve-card:first-child,
.nf-role-page[data-role="offensive"] #role-widget-high-cvss .nf-cve-card:first-child {
  grid-column: span 2;
}
@media (max-width: 720px) {
  .nf-role-page[data-role="cve"] #role-widget-vulnrichment-act .nf-cve-card:first-child,
  .nf-role-page[data-role="cve"] #role-widget-top-scored .nf-cve-card:first-child,
  .nf-role-page[data-role="offensive"] #role-widget-high-cvss .nf-cve-card:first-child {
    grid-column: span 1;
  }
}

.nf-role-page .nf-kev-table {
  border-top: 1px solid var(--nf-rule);
}
.nf-role-page .nf-kev-table tbody tr:last-child td {
  border-bottom: 0;
}
.nf-role-page .nf-kev-table tbody td:first-child {
  padding-left: 14px;
}
.nf-role-page .nf-kev-row.is-ransom td:first-child {
  border-left-color: var(--nf-role-accent);
}

.nf-role-page .nf-actor-card,
.nf-role-page .nf-widget .nf-widget-entity {
  background: var(--nf-bg-elev);
  border-radius: var(--nf-radius);
}
.nf-role-page .nf-widget .nf-widget-entity {
  padding: 9px 10px;
  border: 1px solid var(--nf-rule-soft);
  margin-bottom: 7px;
}
.nf-role-page .nf-widget .nf-widget-entity:last-child {
  margin-bottom: 0;
}
.nf-role-page .nf-widget .nf-widget-entity:hover {
  border-color: var(--nf-rule-strong);
  background: var(--nf-bg-subtle);
}

.nf-role-page[data-role="defender"] #role-widget-kev-burning {
  grid-column: 1 / -1;
}
.nf-role-page[data-role="offensive"] #role-widget-techniques {
  border-left: 2px solid var(--nf-err);
}
.nf-role-page[data-role="threatintel"] #role-widget-actor-cards {
  border-top: 2px solid var(--nf-dom-osint);
}
.nf-role-page[data-role="cve"] #role-widget-patch-now {
  border-top: 2px solid var(--nf-err);
}
.nf-role-page[data-role="compliance"] #role-widget-nis2-timeline {
  border-top: 2px solid var(--nf-ok);
}

@media (max-width: 720px) {
  .nf-role-plate {
    min-width: 0;
    width: 100%;
  }
  .nf-role-page .nf-source-strip__row {
    padding-left: 36px;
  }
}


/* =====================================================================
   Front-page signal board -- cyber newspaper lead surface on `/`.
   ===================================================================== */

.nf-start-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
  gap: clamp(18px, 2vw, 30px);
  align-items: stretch;
  margin: 0 0 18px;
  padding: 24px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nf-bg-elev) 92%, transparent),
      color-mix(in srgb, var(--nf-bg-reading) 72%, transparent));
  border: 1px solid var(--nf-rule-strong);
  border-radius: var(--nf-radius-lg);
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-global-brief-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4vw, 50px);
  min-height: 390px;
  align-items: center;
  isolation: isolate;
}
.nf-global-brief-hero::before {
  content: "";
  position: absolute;
  inset: -24% -10% auto auto;
  width: min(620px, 62vw);
  height: min(620px, 62vw);
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--nf-accent-wash) 62%, transparent),
      transparent 64%);
  opacity: .58;
  z-index: -1;
}
.nf-global-brief-hero::after {
  content: "";
  position: absolute;
  inset: auto 28px 22px 28px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--nf-rule-strong), transparent);
  opacity: .48;
}
html[data-theme="studio"] .nf-global-brief-hero::before,
html[data-theme="dark"] .nf-global-brief-hero::before {
  opacity: .18;
}
.nf-global-brief-hero > * {
  position: relative;
}
.nf-start-copy {
  max-width: 820px;
}
.nf-start-copy h2 {
  max-width: 760px;
  margin: 6px 0 14px;
  font-family: var(--nf-serif);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: .93;
}
.nf-start-copy p {
  max-width: 66ch;
  margin: 0;
  color: var(--nf-ink-soft);
  font-size: var(--nf-fs-md);
  line-height: 1.62;
}
.nf-brief-lede strong {
  display: block;
  margin-bottom: 6px;
  color: var(--nf-ink);
  font-weight: 650;
  letter-spacing: -0.01em;
}
html[data-theme="paper"] .nf-brief-lede strong,
html[data-theme="light"] .nf-brief-lede strong,
html[data-theme="bone"] .nf-brief-lede strong,
html[data-theme="warm"] .nf-brief-lede strong,
html[data-theme="cream"] .nf-brief-lede strong {
  color: var(--nf-ink-deep);
}
.nf-brief-proofline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.nf-brief-proofline span {
  padding: 6px 10px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nf-bg-elev) 62%, transparent);
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.nf-start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.nf-start-panel {
  display: grid;
  align-content: stretch;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  overflow: hidden;
  min-height: 286px;
}
.nf-start-panel__title {
  display: grid;
  gap: 4px;
  padding: 18px 18px 16px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--nf-bg-subtle) 82%, transparent),
      color-mix(in srgb, var(--nf-bg-elev) 80%, transparent));
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-start-panel__title span {
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nf-start-panel__title strong {
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-xl);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1;
}
.nf-start-panel__row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--nf-rule-soft);
  font-family: var(--nf-mono);
  font-size: 11px;
  color: var(--nf-ink-mute);
}
.nf-start-panel__row:last-child {
  border-bottom: 0;
}
.nf-start-panel__row strong {
  color: var(--nf-ink);
  font-weight: 650;
}
.nf-start-panel__row strong.is-ok {
  color: var(--nf-ok);
}
.nf-start-panel__row strong.is-err {
  color: var(--nf-err);
}

.nf-decision-routes {
  display: grid;
  gap: 14px;
  margin: 0 0 22px;
}
.nf-decision-routes__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 2px;
}
.nf-decision-routes__head h2 {
  margin: 3px 0 0;
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-2xl);
  font-weight: 400;
  letter-spacing: -0.026em;
  line-height: 1.05;
}
.nf-decision-routes__link {
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nf-decision-routes__link:hover {
  color: var(--nf-accent-ink);
}

.nf-decision-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.nf-decision-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 188px;
  padding: 17px;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-left: 3px solid var(--nf-rule-strong);
  border-radius: var(--nf-radius);
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.nf-decision-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 44px;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, white 18%, transparent), transparent);
  opacity: .44;
}
.nf-decision-card:hover {
  background: var(--nf-bg-subtle);
  border-color: var(--nf-rule-strong);
  transform: translateY(-2px);
}
.nf-decision-card.is-exposure { border-left-color: var(--nf-err); }
.nf-decision-card.is-actors { border-left-color: var(--nf-dom-osint); }
.nf-decision-card.is-ransomware { border-left-color: var(--nf-warn); }
.nf-decision-card.is-defense { border-left-color: var(--nf-info); }
.nf-decision-card.is-governance { border-left-color: var(--nf-ok); }
.nf-decision-card__label {
  display: block;
  margin-bottom: 10px;
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nf-decision-card strong {
  display: block;
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.018em;
}
.nf-decision-card small {
  display: block;
  margin-top: 10px;
  color: var(--nf-ink-mute);
  font-size: var(--nf-fs-xs);
  line-height: 1.45;
}
.nf-decision-card__metric {
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 8px;
  background: var(--nf-bg-subtle);
  border: 1px solid var(--nf-rule-soft);
  border-radius: 999px;
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nf-signal-preview {
  display: grid;
  gap: 14px;
  margin: 0 0 22px;
  padding: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nf-bg-elev) 94%, transparent), transparent 64%),
    var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius-lg);
  box-shadow:
    inset 0 1px 0 var(--nf-rule-soft),
    0 18px 46px -34px color-mix(in srgb, var(--nf-accent) 30%, transparent);
}
.nf-signal-preview__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-signal-preview__head h2 {
  margin: 3px 0 0;
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-2xl);
  font-weight: 400;
  letter-spacing: -0.026em;
  line-height: 1.02;
}
.nf-signal-preview__link {
  flex: 0 0 auto;
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nf-signal-preview__link:hover {
  color: var(--nf-accent-ink);
}
.nf-signal-preview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .72fr);
  gap: 12px;
  align-items: stretch;
}
.nf-signal-preview__lead,
.nf-signal-preview__mini,
.nf-signal-preview__empty {
  border: 1px solid var(--nf-rule-soft);
  border-radius: var(--nf-radius);
  background: color-mix(in srgb, var(--nf-bg-reading) 72%, var(--nf-bg-elev));
}
.nf-signal-preview__lead {
  padding: 17px 18px;
}
.nf-signal-preview__meta,
.nf-signal-preview__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nf-signal-preview__lead h3 {
  max-width: 820px;
  margin: 12px 0 0;
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: clamp(26px, 2.6vw, 42px);
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.02;
}
.nf-signal-preview__lead h3 a:hover {
  color: var(--nf-accent-ink);
}
.nf-signal-preview__lead p {
  max-width: 78ch;
  margin: 10px 0 0;
  color: var(--nf-ink-soft);
  font-size: var(--nf-fs-sm);
  line-height: 1.55;
}
.nf-signal-preview__foot {
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--nf-rule-soft);
}
.nf-signal-preview__rail {
  display: grid;
  gap: 8px;
}
.nf-signal-preview__mini {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "rank title"
    "rank meta";
  column-gap: 10px;
  align-content: center;
  padding: 13px 14px;
  color: inherit;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.nf-signal-preview__mini:hover {
  border-color: var(--nf-rule-strong);
  background: var(--nf-bg-subtle);
  transform: translateY(-1px);
}
.nf-signal-preview__mini-rank {
  grid-area: rank;
  color: var(--nf-ink-faint);
  font-family: var(--nf-mono);
  font-size: 10px;
}
.nf-signal-preview__mini strong {
  grid-area: title;
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-md);
  font-weight: 500;
  line-height: 1.12;
}
.nf-signal-preview__mini small {
  grid-area: meta;
  margin-top: 5px;
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.nf-signal-preview__empty {
  padding: 18px;
  color: var(--nf-ink-mute);
  font-size: var(--nf-fs-sm);
}

.nf-full-stream {
  margin-top: 24px;
  border-top: 1px solid var(--nf-rule);
  padding-top: 14px;
}
.nf-full-stream.is-open {
  border-top: 0;
  padding-top: 0;
}
.nf-full-stream__head {
  margin-bottom: 16px;
  padding: 16px 18px;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius-lg);
}
.nf-full-stream__head h2 {
  margin: 2px 0 4px;
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-xl);
  font-weight: 400;
  letter-spacing: -0.016em;
  line-height: 1.05;
}
.nf-full-stream__head p {
  margin: 0;
  color: var(--nf-ink-mute);
  font-size: var(--nf-fs-sm);
}
.nf-full-stream > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius-lg);
  cursor: pointer;
  list-style: none;
}
.nf-full-stream > summary::-webkit-details-marker {
  display: none;
}
.nf-full-stream > summary strong {
  display: block;
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-lg);
  font-weight: 500;
  line-height: 1.1;
}
.nf-full-stream > summary em {
  display: block;
  margin-top: 3px;
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 11px;
  font-style: normal;
}
.nf-full-stream > summary b {
  flex: 0 0 auto;
  color: var(--nf-accent-ink);
  font-family: var(--nf-mono);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.nf-full-stream[open] > summary {
  margin-bottom: 18px;
}
.nf-full-stream[open] > summary b::after {
  content: "ed";
}

.nf-expansion-page {
  display: grid;
  gap: 18px;
}
.nf-expansion-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .38fr);
  gap: 18px;
  align-items: stretch;
  padding: 24px;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule-strong);
  border-radius: var(--nf-radius-lg);
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-expansion-hero h1 {
  margin: 4px 0 8px;
  font-family: var(--nf-serif);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: .98;
}
.nf-expansion-hero p {
  max-width: 72ch;
  margin: 0;
  color: var(--nf-ink-soft);
  font-size: var(--nf-fs-md);
  line-height: 1.55;
}
.nf-expansion-panel {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  background: var(--nf-bg-subtle);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
}
.nf-expansion-panel span,
.nf-expansion-panel em {
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nf-expansion-panel strong {
  color: var(--nf-ink);
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-xl);
  font-weight: 500;
  line-height: 1;
}
.nf-expansion-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nf-expansion-topics span {
  padding: 5px 8px;
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule-soft);
  border-radius: 999px;
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10.5px;
}
.nf-approved-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}
.nf-approved-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--nf-accent-wash) 48%, transparent);
  border: 1px solid var(--nf-rule-soft);
  border-radius: 999px;
  color: var(--nf-ink-soft);
  font-size: 11px;
  font-weight: 650;
}
.nf-approved-source em {
  color: var(--nf-accent-ink);
  font-family: var(--nf-mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .06em;
}

@media (max-width: 900px) {
  .nf-expansion-hero {
    grid-template-columns: 1fr;
  }
}

.nf-signal-board {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .82fr);
  gap: 16px;
  align-items: start;
  margin: 0 0 24px;
}
.nf-critical-signals,
.nf-morning-card {
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius-lg);
  padding: 16px;
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-critical-head,
.nf-morning-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--nf-rule);
}
.nf-critical-head h2,
.nf-morning-head h2 {
  margin: 2px 0 0;
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-xl);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.016em;
}
.nf-critical-count,
.nf-morning-count {
  flex: 0 0 auto;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  color: var(--nf-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nf-critical-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.nf-critical-card {
  position: relative;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: var(--nf-radius);
  background: var(--nf-bg);
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.nf-critical-card.is-lead {
  grid-column: 1 / -1;
  background: var(--nf-bg-reading);
  border-color: var(--nf-rule);
}
.nf-critical-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.nf-critical-rank {
  font-family: var(--nf-mono);
  font-size: 10px;
  color: var(--nf-ink-faint);
}
.nf-critical-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--nf-accent) 35%, var(--nf-rule));
  border-radius: var(--nf-radius);
  background: var(--nf-accent-wash);
  color: var(--nf-accent-ink);
  font-family: var(--nf-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nf-critical-badge--zero-day,
.nf-critical-badge--exploited,
.nf-critical-badge--critical,
.nf-critical-badge--rce {
  border-color: color-mix(in srgb, var(--nf-err) 40%, var(--nf-rule));
  background: color-mix(in srgb, var(--nf-err) 10%, var(--nf-bg-elev));
  color: var(--nf-err);
}
.nf-critical-badge--kev,
.nf-critical-badge--cisa,
.nf-critical-badge--patch {
  border-color: color-mix(in srgb, var(--nf-warn) 42%, var(--nf-rule));
  background: color-mix(in srgb, var(--nf-warn) 12%, var(--nf-bg-elev));
  color: var(--nf-warn);
}
.nf-critical-source,
.nf-critical-age,
.nf-critical-foot {
  font-family: var(--nf-mono);
  font-size: 10.5px;
  color: var(--nf-ink-mute);
}
.nf-critical-age {
  margin-left: auto;
}
.nf-critical-title {
  margin: 0;
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-md);
  font-weight: 500;
  line-height: 1.22;
}
.nf-critical-card.is-lead .nf-critical-title {
  font-size: var(--nf-fs-lg);
}
.nf-critical-title a:hover {
  color: var(--nf-accent-ink);
}
.nf-critical-summary {
  margin: 7px 0 0;
  color: var(--nf-ink-soft);
  font-size: var(--nf-fs-sm);
  line-height: 1.48;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nf-critical-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid var(--nf-rule-soft);
}
.nf-critical-empty {
  padding: 20px;
  border: 1px dashed var(--nf-rule);
  border-radius: var(--nf-radius);
  color: var(--nf-ink-mute);
  font-size: var(--nf-fs-sm);
}
.nf-morning-list {
  display: grid;
  gap: 8px;
}
.nf-morning-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-morning-row:last-child {
  border-bottom: 0;
}
.nf-morning-pill {
  min-width: 46px;
  padding: 3px 6px;
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nf-morning-pill.ready,
.nf-morning-pill.clear {
  border-color: color-mix(in srgb, var(--nf-ok) 35%, var(--nf-rule));
  color: var(--nf-ok);
}
.nf-morning-pill.watch {
  border-color: color-mix(in srgb, var(--nf-info) 35%, var(--nf-rule));
  color: var(--nf-info);
}
.nf-morning-pill.act {
  border-color: color-mix(in srgb, var(--nf-warn) 42%, var(--nf-rule));
  color: var(--nf-warn);
}
.nf-morning-title {
  color: var(--nf-ink);
  font-size: var(--nf-fs-sm);
  font-weight: 600;
  line-height: 1.25;
}
.nf-morning-detail {
  margin-top: 3px;
  color: var(--nf-ink-mute);
  font-size: var(--nf-fs-xs);
  line-height: 1.45;
}

html[data-theme="paper"] :is(.nf-start-panel, .nf-decision-card, .nf-signal-preview, .nf-signal-preview__lead, .nf-signal-preview__mini, .nf-critical-signals, .nf-morning-card, .nf-critical-card, .nf-full-stream__head, .nf-stat-card, .nf-widget),
html[data-theme="light"] :is(.nf-start-panel, .nf-decision-card, .nf-signal-preview, .nf-signal-preview__lead, .nf-signal-preview__mini, .nf-critical-signals, .nf-morning-card, .nf-critical-card, .nf-full-stream__head, .nf-stat-card, .nf-widget),
html[data-theme="bone"] :is(.nf-start-panel, .nf-decision-card, .nf-signal-preview, .nf-signal-preview__lead, .nf-signal-preview__mini, .nf-critical-signals, .nf-morning-card, .nf-critical-card, .nf-full-stream__head, .nf-stat-card, .nf-widget),
html[data-theme="warm"] :is(.nf-start-panel, .nf-decision-card, .nf-signal-preview, .nf-signal-preview__lead, .nf-signal-preview__mini, .nf-critical-signals, .nf-morning-card, .nf-critical-card, .nf-full-stream__head, .nf-stat-card, .nf-widget),
html[data-theme="cream"] :is(.nf-start-panel, .nf-decision-card, .nf-signal-preview, .nf-signal-preview__lead, .nf-signal-preview__mini, .nf-critical-signals, .nf-morning-card, .nf-critical-card, .nf-full-stream__head, .nf-stat-card, .nf-widget) {
  background:
    linear-gradient(180deg, var(--nf-glass-highlight), transparent 48%),
    linear-gradient(135deg, var(--nf-glass-surface-strong), var(--nf-glass-tint)),
    var(--nf-glass-surface);
  border-color: var(--nf-glass-border);
  box-shadow:
    inset 0 1px 0 var(--nf-glass-highlight),
    var(--nf-glass-shadow);
  backdrop-filter: blur(10px) saturate(1.04);
}

html[data-theme="paper"] :is(.nf-critical-card, .nf-decision-card, .nf-signal-preview__mini):hover,
html[data-theme="light"] :is(.nf-critical-card, .nf-decision-card, .nf-signal-preview__mini):hover,
html[data-theme="bone"] :is(.nf-critical-card, .nf-decision-card, .nf-signal-preview__mini):hover,
html[data-theme="warm"] :is(.nf-critical-card, .nf-decision-card, .nf-signal-preview__mini):hover,
html[data-theme="cream"] :is(.nf-critical-card, .nf-decision-card, .nf-signal-preview__mini):hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), transparent 44%),
    linear-gradient(135deg, rgba(255,255,252,.92), rgba(229,239,236,.58));
  border-color: color-mix(in srgb, var(--nf-accent) 34%, var(--nf-glass-border));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 16px 38px -24px rgba(22, 31, 26, .30);
}

html[data-theme="paper"] .nf-critical-card:hover,
html[data-theme="light"] .nf-critical-card:hover,
html[data-theme="bone"] .nf-critical-card:hover,
html[data-theme="warm"] .nf-critical-card:hover,
html[data-theme="cream"] .nf-critical-card:hover {
  transform: translateY(-1px);
}

@media (max-width: 980px) {
  .nf-start-hero {
    grid-template-columns: 1fr;
  }
  .nf-decision-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nf-signal-preview__grid {
    grid-template-columns: 1fr;
  }
  .nf-signal-board {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .nf-decision-grid {
    grid-template-columns: 1fr;
  }
  .nf-critical-grid {
    grid-template-columns: 1fr;
  }
  .nf-signal-preview,
  .nf-global-brief-hero {
    padding: 18px;
  }
  .nf-signal-preview__head,
  .nf-decision-routes__head {
    align-items: start;
    flex-direction: column;
  }
}

/* Compact action ledger: operator follow-up without competing with the
   front-page news board. */
.nf-action-ledger {
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius-lg);
  margin: 0 0 24px;
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-action-ledger__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--nf-rule);
}
.nf-action-ledger__head h2 {
  margin: 2px 0 0;
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-xl);
  font-weight: 400;
  letter-spacing: -0.016em;
  line-height: 1.05;
}
.nf-action-ledger__link {
  flex: 0 0 auto;
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nf-action-ledger__link:hover {
  color: var(--nf-accent-ink);
}
.nf-action-ledger__rows {
  display: grid;
}
.nf-action-row {
  display: grid;
  grid-template-columns: minmax(110px, .32fr) auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--nf-rule-soft);
  color: inherit;
}
.nf-action-row:last-child {
  border-bottom: 0;
}
.nf-action-row:hover {
  background: color-mix(in srgb, var(--nf-bg-subtle) 58%, transparent);
}
.nf-action-row__area {
  color: var(--nf-ink);
  font-family: var(--nf-mono);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.nf-action-row__state {
  min-width: 50px;
  padding: 3px 7px;
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 9.5px;
  font-weight: 750;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nf-action-row__state.state-act,
.nf-action-row__state.state-open {
  border-color: color-mix(in srgb, var(--nf-warn) 42%, var(--nf-rule));
  color: var(--nf-warn);
}
.nf-action-row__state.state-watch {
  border-color: color-mix(in srgb, var(--nf-info) 38%, var(--nf-rule));
  color: var(--nf-info);
}
.nf-action-row__state.state-clear,
.nf-action-row__state.state-ready {
  border-color: color-mix(in srgb, var(--nf-ok) 35%, var(--nf-rule));
  color: var(--nf-ok);
}
.nf-action-row__main {
  min-width: 0;
}
.nf-action-row__main strong {
  display: block;
  overflow: hidden;
  color: var(--nf-ink);
  font-size: var(--nf-fs-sm);
  font-weight: 600;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nf-action-row__main small {
  display: block;
  margin-top: 3px;
  color: var(--nf-ink-mute);
  font-size: var(--nf-fs-xs);
  line-height: 1.35;
}
.nf-action-row__arrow {
  color: var(--nf-ink-faint);
  font-family: var(--nf-mono);
  font-size: 14px;
}
.nf-action-row:hover .nf-action-row__arrow {
  color: var(--nf-accent-ink);
}

@media (max-width: 760px) {
  .nf-action-ledger__head {
    align-items: start;
    flex-direction: column;
  }
  .nf-action-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }
  .nf-action-row__area {
    grid-column: 1;
  }
  .nf-action-row__state {
    grid-column: 2;
    grid-row: 1;
  }
  .nf-action-row__main {
    grid-column: 1 / -1;
  }
  .nf-action-row__arrow {
    display: none;
  }
}

/* =====================================================================
   Operational Daily Brief -- cross-role action notes on `/`.
   ===================================================================== */

.nf-ops-brief {
  background: var(--nf-bg-elev);
  border: 1px solid var(--nf-rule-strong);
  border-radius: var(--nf-radius-lg);
  padding: 20px 22px 22px;
  margin: 0 0 24px;
  box-shadow: inset 0 1px 0 var(--nf-rule-soft);
}
.nf-ops-brief__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 22px;
  align-items: end;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nf-rule);
  margin-bottom: 14px;
}
.nf-ops-brief__head h2 {
  font-family: var(--nf-serif);
  font-size: var(--nf-fs-2xl);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: var(--nf-ink);
  margin: 4px 0 6px;
}
.nf-ops-brief__head p {
  margin: 0;
  max-width: 72ch;
  color: var(--nf-ink-soft);
  font-size: var(--nf-fs-sm);
  line-height: 1.55;
}

.nf-ops-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.nf-ops-card {
  --nf-ops-accent: var(--nf-accent);
  position: relative;
  min-height: 190px;
  padding: 14px 14px 12px;
  border: 1px solid var(--nf-rule);
  border-left: 3px solid var(--nf-ops-accent);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-subtle);
}
.nf-ops-card.is-cve { --nf-ops-accent: var(--nf-err); }
.nf-ops-card.is-defender { --nf-ops-accent: var(--nf-info); }
.nf-ops-card.is-intel { --nf-ops-accent: var(--nf-dom-osint); }
.nf-ops-card.is-compliance { --nf-ops-accent: var(--nf-ok); }

.nf-ops-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--nf-rule-soft);
}
.nf-ops-card__top a {
  font-family: var(--nf-mono);
  font-size: 10.5px;
  color: var(--nf-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nf-ops-card__top a:hover {
  color: var(--nf-ops-accent);
}
.nf-ops-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.nf-ops-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--nf-ops-accent);
  background: var(--nf-bg-elev);
}

.nf-ops-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.nf-ops-item {
  padding: 9px 10px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-elev);
}
.nf-ops-item:hover {
  border-color: var(--nf-rule-strong);
}
.nf-ops-item__title {
  display: block;
  color: var(--nf-ink);
  font-size: var(--nf-fs-sm);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}
.nf-ops-item__title:hover {
  color: var(--nf-ops-accent);
}
.nf-ops-item__meta {
  display: block;
  margin-top: 4px;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  color: var(--nf-ink-mute);
  line-height: 1.45;
}
.nf-ops-empty {
  padding: 8px 0;
  font-family: var(--nf-mono);
  font-size: var(--nf-fs-xs);
  color: var(--nf-ink-mute);
}
.nf-ops-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--nf-rule-soft);
}
.nf-ops-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid var(--nf-rule);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-elev);
  color: var(--nf-ink-mute);
  font-family: var(--nf-mono);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.nf-ops-actions a:first-child {
  border-color: var(--nf-ops-accent);
  color: var(--nf-ops-accent);
}
.nf-ops-actions a:hover {
  border-color: var(--nf-ops-accent);
  color: var(--nf-ink);
  background: var(--nf-bg-subtle);
}

html[data-theme="studio"] .nf-ops-card,
html[data-theme="dark"] .nf-ops-card {
  background: var(--nf-bg-elev);
}
html[data-theme="studio"] .nf-ops-item,
html[data-theme="dark"] .nf-ops-item {
  background: var(--nf-bg-subtle);
}

@media (max-width: 1160px) {
  .nf-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .nf-ops-brief__head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .nf-ops-grid {
    grid-template-columns: 1fr;
  }
}


/* =====================================================================
   Restored data widgets: SSVC tree and MITRE ATT&CK matrix.
   ===================================================================== */

.nf-ssvc-tree,
.nf-ssvc-tree ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nf-ssvc-tree ol {
  margin: 8px 0 0 18px;
  padding-left: 14px;
  border-left: 1px solid var(--nf-rule-soft);
}
.nf-ssvc-node {
  margin: 0 0 8px;
}
.nf-ssvc-node details {
  border: 1px solid var(--nf-rule-soft);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-elev);
  padding: 8px 10px;
}
.nf-ssvc-node summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--nf-ink);
}
.nf-ssvc-node__label {
  font-size: var(--nf-fs-sm);
  line-height: 1.35;
}
.nf-ssvc-node__count {
  font-family: var(--nf-mono);
  font-size: 10.5px;
  color: var(--nf-ink-mute);
  border: 1px solid var(--nf-rule);
  border-radius: 999px;
  padding: 1px 7px;
}
.nf-ssvc-cves {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.nf-ssvc-cves a {
  font-size: 11px;
  color: var(--nf-accent-ink);
  border: 1px solid var(--nf-rule);
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--nf-bg-subtle);
}

.nf-attack-matrix {
  display: grid;
  grid-template-columns: repeat(14, minmax(150px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.nf-attack-tactic {
  min-width: 150px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-subtle);
  padding: 10px;
}
.nf-attack-tactic h3 {
  margin: 0 0 9px;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--nf-err);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.35;
}
.nf-attack-techniques {
  display: grid;
  gap: 7px;
}
.nf-attack-technique {
  display: block;
  padding: 8px 8px 7px;
  border: 1px solid var(--nf-rule-soft);
  border-radius: var(--nf-radius);
  background: var(--nf-bg-elev);
  color: inherit;
  text-decoration: none;
}
.nf-attack-technique:hover {
  border-color: var(--nf-err);
}
.nf-attack-technique span {
  display: block;
  color: var(--nf-err);
  font-size: 10px;
  margin-bottom: 3px;
}
.nf-attack-technique strong {
  display: block;
  color: var(--nf-ink);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 600;
}
.nf-attack-technique em {
  display: block;
  margin-top: 4px;
  font-family: var(--nf-mono);
  font-size: 10px;
  font-style: normal;
  color: var(--nf-ink-mute);
}
.nf-attack-technique.is-linked {
  border-color: var(--nf-rule-strong);
}