/* ══════════════════════════════════════════════════════════════════════════
   NEWS BRIEF v2 — "The Front"
   Scope: .nb2. Every value is a token. Dark is primary, light is a token flip.
   House rules honoured: no one-sided accent bars (full border + fill only),
   44px minimum touch targets, no em dashes in copy.
   ══════════════════════════════════════════════════════════════════════════ */

.nb2 {
  /* ── Surfaces + ink (dark) ─────────────────────────────────────────────── */
  --nb-page:        var(--cc-detail-bg, #0D0D0D);
  --nb-panel:       rgba(255, 255, 255, 0.034);
  --nb-panel-2:     rgba(255, 255, 255, 0.058);
  --nb-line:        rgba(255, 255, 255, 0.085);
  --nb-line-strong: rgba(255, 255, 255, 0.17);
  --nb-ink:         #FAFAFA;   /* headlines            19.4:1 on #0D0D0D */
  --nb-ink-2:       #C9C9CF;   /* body                 12.6:1 */
  --nb-ink-3:       #9A9AA3;   /* meta / source chips   7.0:1 */

  /* ── Department palette. Badge, rule and label scale only. Never a fill
        behind body text. Each is an extension of an existing app token
        family, not a foreign palette. ─────────────────────────────────── */
  --nb-top:      #F5A524;   /* warning family  — Top Story        */
  --nb-israel:   #4FA8E8;   /* primary family  — Israel & ME      */
  --nb-world:    #9AA3B8;   /* tertiary family — World & US       */
  --nb-canada:   #EE6E68;   /* error family    — Canada           */
  --nb-markets:  #34C77B;   /* success family  — Markets          */
  --nb-tech:     #A78BFA;   /* --a-think       — Tech / AI        */
  --nb-misc:     #9A9AA3;   /* text-dim        — Worth a look     */
  --nb-spin:     #D2A05A;   /* ochre           — opposing frame   */
  --nb-up:       #34C77B;
  --nb-down:     #F87171;   /* 4.6:1 on #0D0D0D. #EF4444 is 4.0 and fails. */
  --nb-accent:   var(--md-sys-color-primary, #2693D1);

  /* ── Type scale. Tracking tightens as size grows. That single rule is
        most of what separates set type from default type. ─────────────── */
  --nb-fs-mast:    30px;  --nb-lh-mast: 1.06;  --nb-tr-mast: -0.032em;
  --nb-fs-lead:    22px;  --nb-lh-lead: 1.19;  --nb-tr-lead: -0.022em;
  --nb-fs-head:    17px;  --nb-lh-head: 1.29;  --nb-tr-head: -0.014em;
  --nb-fs-brief:   15px;  --nb-lh-brief: 1.36; --nb-tr-brief: -0.008em;
  --nb-fs-body:    15px;  --nb-lh-body: 1.62;
  --nb-fs-leadbody:16px;  --nb-lh-leadbody: 1.6;
  --nb-fs-kicker:  11px;  --nb-tr-kicker: 0.14em;
  --nb-fs-meta:  11.5px;
  --nb-fs-num:     19px;
  --nb-fs-delta:   13px;

  /* ── Space. 4px base, same ladder as --a-space-*. ─────────────────────── */
  --nb-s1: 4px; --nb-s2: 8px; --nb-s3: 12px; --nb-s4: 16px;
  --nb-s5: 24px; --nb-s6: 32px; --nb-s7: 44px;

  --nb-r-sm: var(--md-sys-shape-corner-xs, 4px);
  --nb-r-md: var(--md-sys-shape-corner-md, 12px);
  --nb-r-lg: 16px;
  --nb-r-pill: var(--md-sys-shape-corner-full, 999px);

  --nb-measure: 68ch;

  font-family: var(--md-sys-typescale-font-family, 'Inter', system-ui, sans-serif);
  font-size: var(--nb-fs-body);
  line-height: var(--nb-lh-body);
  color: var(--nb-ink-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

html[data-theme="light"] .nb2 {
  --nb-page:        #FFFFFF;
  --nb-panel:       rgba(0, 0, 0, 0.026);
  --nb-panel-2:     rgba(0, 0, 0, 0.048);
  --nb-line:        rgba(0, 0, 0, 0.10);
  --nb-line-strong: rgba(0, 0, 0, 0.20);
  --nb-ink:         #0A0A0A;
  --nb-ink-2:       #35353D;   /* 10.9:1 on white */
  --nb-ink-3:       #64646E;   /* 5.5:1 on white  */
  --nb-top:         #8A5100;   /* #B26A00 measured 4.24:1 on the coverage fill. This is 5.6:1. */
  --nb-israel:      #1E6FA8;
  --nb-world:       #5A6478;
  --nb-canada:      #C0392B;
  --nb-markets:     #0F7C4B;
  --nb-tech:        #6D46D6;
  --nb-misc:        #64646E;
  --nb-spin:        #8A6224;
  --nb-up:          #0F7C4B;
  --nb-down:        #C22B2B;
  --nb-accent:      #1E6FA8;
}

/* ── Shared primitives ─────────────────────────────────────────────────── */
.nb2-kicker {
  font-size: var(--nb-fs-kicker);
  font-weight: 700;
  letter-spacing: var(--nb-tr-kicker);
  text-transform: uppercase;
  line-height: 1.2;
}
.nb2 :is(h1, h2, h3, h4, p, ul, ol) { margin: 0; }
.nb2 strong { color: var(--nb-ink); font-weight: 650; }
.nb2 em { font-style: italic; }
.nb2 a { color: var(--nb-accent); text-decoration: none; }
.nb2 a:focus-visible,
.nb2 button:focus-visible,
.nb2 summary:focus-visible {
  outline: 2px solid var(--nb-accent);
  outline-offset: 2px;
  border-radius: var(--nb-r-sm);
}

/* Department badge: the emoji stops floating naked next to grey caps and
   becomes iconography inside a tinted, department-coloured disc. */
.nb2-badge {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--nb-r-pill);
  background: color-mix(in srgb, var(--nb-c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--nb-c) 42%, transparent);
  font-size: 13px;
  line-height: 1;
}
.nb2-badge--sm { width: 20px; height: 20px; font-size: 10px; }

/* ══ MASTHEAD ═══════════════════════════════════════════════════════════ */
.nb2-mast {
  padding: var(--nb-s1) 0 var(--nb-s4);
  border-bottom: 1px solid var(--nb-line-strong);
  margin-bottom: var(--nb-s4);
}
.nb2-mast-top {
  display: flex; align-items: center; gap: var(--nb-s2);
  margin-bottom: var(--nb-s3);
}
.nb2-mast-top .nb2-kicker { color: var(--nb-accent); }
.nb2-edition {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--nb-ink-3);
  border: 1px solid var(--nb-line);
  background: var(--nb-panel);
  border-radius: var(--nb-r-pill);
  padding: 3px 9px;
}
.nb2-title {
  font-size: var(--nb-fs-mast);
  line-height: var(--nb-lh-mast);
  letter-spacing: var(--nb-tr-mast);
  font-weight: 700;
  color: var(--nb-ink);
}
.nb2-dateline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--nb-s2);
  margin-top: var(--nb-s3);
  font-size: 12.5px;
  color: var(--nb-ink-3);
}
/* Separators are ::before on the FOLLOWING item, never a standalone element.
   A standalone dot becomes a dangling bullet at the end of a wrapped line. */
.nb2-dateline > *:not(:first-child)::before {
  content: "\00B7"; margin-right: var(--nb-s2); opacity: .5; font-weight: 700;
}
@media (max-width: 460px) { .nb2-dateline > .nb2-src-count { display: none; } }
.nb2-dateline b { color: var(--nb-ink-2); font-weight: 600; }

/* Coverage note. A data-provenance signal, not an error. Amber outline,
   full border, collapsible. Showing this well is a trust feature. */
.nb2-coverage {
  display: flex; gap: var(--nb-s2); align-items: flex-start;
  margin-top: var(--nb-s3);
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--nb-top) 38%, transparent);
  background: color-mix(in srgb, var(--nb-top) 9%, transparent);
  border-radius: var(--nb-r-md);
  font-size: 12.5px; line-height: 1.45;
  color: var(--nb-ink-2);
}
.nb2-coverage .nb2-kicker { color: var(--nb-top); flex: 0 0 auto; padding-top: 2px; }

/* ══ TL;DR — "The 60 second read" ═══════════════════════════════════════ */
.nb2-tldr {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--nb-accent) 34%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nb-accent) 11%, transparent),
      color-mix(in srgb, var(--nb-accent) 4%, transparent));
  border-radius: var(--nb-r-lg);
  padding: var(--nb-s4) var(--nb-s4) var(--nb-s3);
  margin-bottom: var(--nb-s4);
}
.nb2-tldr-head {
  display: flex; align-items: center; gap: var(--nb-s2);
  margin-bottom: var(--nb-s3);
  color: var(--nb-accent);
}
.nb2-tldr-head .nb2-kicker { color: inherit; }
.nb2-tldr-time {
  margin-left: auto;
  font-size: 11px; font-weight: 600;
  color: var(--nb-ink-3);
  font-variant-numeric: tabular-nums;
}
.nb2-tldr ol { list-style: none; counter-reset: tldr; padding: 0; }
.nb2-tldr li {
  counter-increment: tldr;
  position: relative;
  padding-left: 28px;
  padding-bottom: var(--nb-s3);
  margin-bottom: var(--nb-s3);
  border-bottom: 1px solid color-mix(in srgb, var(--nb-accent) 15%, transparent);
  font-size: var(--nb-fs-body);
  line-height: 1.5;
  color: var(--nb-ink-2);
}
.nb2-tldr li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.nb2-tldr li::before {
  content: counter(tldr);
  position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px;
  display: grid; place-items: center;
  border-radius: var(--nb-r-pill);
  background: color-mix(in srgb, var(--nb-accent) 20%, transparent);
  color: var(--nb-accent);
  font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nb2-tldr-lead { color: var(--nb-ink); font-weight: 650; }

/* ══ STICKY RAIL — where am I in 16KB ═══════════════════════════════════ */
.nb2-rail {
  position: sticky; top: 0; z-index: 5;
  margin: 0 calc(var(--nb-s4) * -1) var(--nb-s4);
  padding: var(--nb-s2) var(--nb-s4);
  background: color-mix(in srgb, var(--nb-page) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--nb-line);
}
.nb2-rail { display: flex; align-items: center; gap: var(--nb-s2); }
.nb2-rail-scroll {
  flex: 1; min-width: 0;
  display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nb2-rail-scroll::-webkit-scrollbar { display: none; }
.nb2-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 11px;
  border: 1px solid var(--nb-line);
  background: var(--nb-panel);
  border-radius: var(--nb-r-pill);
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--nb-ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms var(--md-sys-motion-easing-standard, ease),
              border-color 150ms var(--md-sys-motion-easing-standard, ease);
}
.nb2-chip .nb2-n {
  font-size: 10.5px; font-weight: 700; color: var(--nb-ink-3);
  font-variant-numeric: tabular-nums;
}
.nb2-chip[aria-current="true"] {
  border-color: color-mix(in srgb, var(--nb-c, var(--nb-accent)) 55%, transparent);
  background: color-mix(in srgb, var(--nb-c, var(--nb-accent)) 15%, transparent);
  color: var(--nb-ink);
}
.nb2-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nb-c); }
/* Touch surfaces get the full 44px floor. */
@media (pointer: coarse) { .nb2-chip { min-height: 40px; } }

/* ══ DEPARTMENT HEADER ══════════════════════════════════════════════════ */
.nb2-dept {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--nb-s2);
  margin: var(--nb-s7) 0 var(--nb-s4);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--nb-c);
  scroll-margin-top: 64px;
}
.nb2-dept-name {
  white-space: nowrap;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--nb-ink);
}
.nb2-dept-note {
  flex: 1 1 100%;
  order: 3;
  margin-top: 6px;
  font-size: 11.5px; font-weight: 500;
  color: var(--nb-ink-3);
}
.nb2-dept-count {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--nb-c);
  border: 1px solid color-mix(in srgb, var(--nb-c) 34%, transparent);
  background: color-mix(in srgb, var(--nb-c) 11%, transparent);
  border-radius: var(--nb-r-pill);
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.nb2-section, .nb2-mast, .nb2-tldr { max-width: var(--nb-measure); }

/* Sub-group divider inside a department. */
.nb2-sub {
  display: flex; align-items: center; gap: var(--nb-s3);
  margin: var(--nb-s5) 0 var(--nb-s1);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--nb-ink-3);
}
.nb2-sub::after { content: ""; flex: 1; height: 1px; background: var(--nb-line); }

/* ══ SOURCE CHIPS — sources, not code ═══════════════════════════════════ */
.nb2-srcs { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }
.nb2-src {
  display: inline-flex; align-items: center;
  height: 19px; padding: 0 7px;
  border-radius: var(--nb-r-pill);
  background: var(--nb-panel-2);
  color: var(--nb-ink-3);
  font-size: var(--nb-fs-meta);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ══ LEAD STORY ═════════════════════════════════════════════════════════ */
.nb2-lead {
  border: 1px solid color-mix(in srgb, var(--nb-top) 30%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nb-top) 8%, transparent),
      color-mix(in srgb, var(--nb-top) 2%, transparent));
  border-radius: var(--nb-r-lg);
  padding: var(--nb-s5) var(--nb-s4);
  margin-bottom: var(--nb-s5);
  max-width: var(--nb-measure);
  scroll-margin-top: 64px;
}
.nb2-lead-kicker {
  display: flex; align-items: center; gap: 7px;
  color: var(--nb-top);
  margin-bottom: var(--nb-s3);
}
.nb2-lead h2 {
  font-size: var(--nb-fs-lead);
  line-height: var(--nb-lh-lead);
  letter-spacing: var(--nb-tr-lead);
  font-weight: 700;
  color: var(--nb-ink);
  margin-bottom: var(--nb-s3);
  text-wrap: balance;
}
.nb2-lead .nb2-srcs { margin-bottom: var(--nb-s3); display: flex; }
.nb2-lead p { font-size: var(--nb-fs-leadbody); line-height: var(--nb-lh-leadbody); }

/* ══ STORY — collapsed by default, headline is the summary ══════════════ */
.nb2-story { border-bottom: 1px solid var(--nb-line); }
.nb2-story:last-child { border-bottom: none; }

.nb2-story > summary {
  display: flex; align-items: flex-start; gap: var(--nb-s3);
  list-style: none; cursor: pointer;
  padding: var(--nb-s3) 0;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.nb2-story > summary::-webkit-details-marker { display: none; }
.nb2-story-main { flex: 1; min-width: 0; }
.nb2-story h3 {
  font-size: var(--nb-fs-head);
  line-height: var(--nb-lh-head);
  letter-spacing: var(--nb-tr-head);
  font-weight: 650;
  color: var(--nb-ink);
  text-wrap: pretty;
}
.nb2-story-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  margin-top: 7px;
}
/* The tell: this story carries an opposing frame inside. */
.nb2-flag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 19px; padding: 0 7px;
  border-radius: var(--nb-r-pill);
  border: 1px solid color-mix(in srgb, var(--nb-spin) 45%, transparent);
  color: var(--nb-spin);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.nb2-flag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.nb2-chev {
  flex: 0 0 auto;
  width: 28px; height: 28px; margin-top: 2px;
  display: grid; place-items: center;
  border-radius: var(--nb-r-pill);
  color: var(--nb-ink-3);
  transition: transform 200ms var(--md-sys-motion-easing-emphasized-decel, ease),
              background 150ms ease;
}
.nb2-story[open] > summary .nb2-chev { transform: rotate(180deg); }
@media (hover: hover) {
  .nb2-story > summary:hover .nb2-chev { background: var(--nb-panel-2); color: var(--nb-ink); }
  .nb2-story > summary:hover h3 { color: var(--nb-ink); }
}
.nb2-story-body { padding: 0 0 var(--nb-s4) 0; }
.nb2-story-body p { font-size: var(--nb-fs-body); line-height: var(--nb-lh-body); }

/* Per-story actions. Premium detail: act where the data is. */
.nb2-acts { display: flex; gap: var(--nb-s2); margin-top: var(--nb-s3); flex-wrap: wrap; }
.nb2-act {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 11px;
  border-radius: var(--nb-r-pill);
  border: 1px solid var(--nb-line);
  background: transparent;
  color: var(--nb-ink-3);
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
@media (hover: hover) {
  .nb2-act:hover { background: var(--nb-panel-2); color: var(--nb-ink); border-color: var(--nb-line-strong); }
}
@media (pointer: coarse) { .nb2-act { min-height: 40px; padding: 0 14px; } }

/* ══ OPPOSING FRAME — the editorial device, given real weight ═══════════ */
.nb2-spin {
  margin-top: var(--nb-s3);
  padding: var(--nb-s3) var(--nb-s3) var(--nb-s3) var(--nb-s4);
  border: 1px solid color-mix(in srgb, var(--nb-spin) 34%, transparent);
  background: color-mix(in srgb, var(--nb-spin) 7%, transparent);
  border-radius: var(--nb-r-md);
}
.nb2-spin-head {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 7px;
  color: var(--nb-spin);
}
.nb2-spin-glyph {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.nb2-spin p {
  font-size: 14px; line-height: 1.55;
  color: var(--nb-ink-2);
  font-style: italic;
}
.nb2-spin .nb2-srcs { margin-top: var(--nb-s2); display: flex; }

/* ══ QUIET FILE ═════════════════════════════════════════════════════════ */
.nb2-quiet {
  display: flex; gap: var(--nb-s3); align-items: flex-start;
  margin: var(--nb-s3) 0;
  padding: var(--nb-s3);
  border: 1px solid var(--nb-line);
  background: var(--nb-panel);
  border-radius: var(--nb-r-md);
}
.nb2-quiet .nb2-kicker { color: var(--nb-ink-3); flex: 0 0 auto; padding-top: 3px; }
.nb2-quiet p { font-size: 13.5px; line-height: 1.5; color: var(--nb-ink-3); }

/* ══ MARKETS — a quote grid, not a markdown table ═══════════════════════ */
.nb2-mkt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--nb-line);
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-r-lg);
  overflow: hidden;
  margin: var(--nb-s3) 0 var(--nb-s4);
  max-width: var(--nb-measure);
}
@media (min-width: 620px) { .nb2-mkt { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nb2-q {
  background: var(--nb-page);
  padding: var(--nb-s3) var(--nb-s3) 11px;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.nb2-q-name {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nb-ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nb2-q-level {
  font-size: var(--nb-fs-num);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--nb-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.nb2-q-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--nb-fs-delta); font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.nb2-q-delta.up   { color: var(--nb-up); }
.nb2-q-delta.down { color: var(--nb-down); }
.nb2-q-delta.flat { color: var(--nb-ink-3); }
/* Direction is carried by a glyph as well as colour, so colour is never the
   only channel (WCAG 1.4.1). */
.nb2-q-delta.up::before   { content: "\25B2"; font-size: 8px; }
.nb2-q-delta.down::before { content: "\25BC"; font-size: 8px; }
.nb2-q-delta.flat::before { content: "\2014"; font-size: 9px; }
/* Sparkbar: magnitude at a glance without a chart library. */
.nb2-q-bar { height: 2px; border-radius: 2px; background: var(--nb-line); overflow: hidden; margin-top: 5px; }
.nb2-q-bar i { display: block; height: 100%; border-radius: 2px; }
.nb2-q-note { font-size: 11px; color: var(--nb-ink-3); font-weight: 600; }

.nb2-mkt-take {
  max-width: var(--nb-measure);
  font-size: var(--nb-fs-body); line-height: var(--nb-lh-body);
}

/* ══ WORTH A LOOK ═══════════════════════════════════════════════════════ */
.nb2-oneliner {
  display: flex; align-items: baseline; gap: var(--nb-s3);
  padding: 11px 0;
  border-bottom: 1px solid var(--nb-line);
}
.nb2-oneliner:last-child { border-bottom: none; }
.nb2-oneliner p {
  flex: 1;
  font-size: var(--nb-fs-brief);
  line-height: var(--nb-lh-brief);
  letter-spacing: var(--nb-tr-brief);
  font-weight: 550;
  color: var(--nb-ink);
}

/* ══ BOTTOM LINE ════════════════════════════════════════════════════════ */
.nb2-bottom {
  margin: var(--nb-s6) 0 var(--nb-s4);
  padding: var(--nb-s4);
  border: 1px solid var(--nb-line-strong);
  background: var(--nb-panel);
  border-radius: var(--nb-r-lg);
  max-width: var(--nb-measure);
}
.nb2-bottom-head { display: flex; align-items: center; gap: 7px; color: var(--nb-ink); margin-bottom: var(--nb-s2); }
.nb2-bottom p { font-size: 16px; line-height: 1.55; color: var(--nb-ink); font-weight: 500; }

/* ══ DOCUMENT FOOTER ════════════════════════════════════════════════════ */
.nb2-foot {
  display: flex; flex-wrap: wrap; gap: var(--nb-s2);
  padding-top: var(--nb-s4);
  border-top: 1px solid var(--nb-line);
  max-width: var(--nb-measure);
}
.nb2-foot .nb2-act { min-height: 40px; padding: 0 14px; font-size: 13px; }
.nb2-foot .nb2-act--primary {
  border-color: color-mix(in srgb, var(--nb-accent) 55%, transparent);
  background: color-mix(in srgb, var(--nb-accent) 14%, transparent);
  color: var(--nb-accent);
}

/* ══ READ CONTROL (sits in the rail) ════════════════════════════════════ */
.nb2-readmode {
  flex: 0 0 auto;
  margin-left: var(--nb-s1);
  padding-left: var(--nb-s3);
  border-left: 0;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 11px;
  border-radius: var(--nb-r-pill);
  border: 1px solid var(--nb-line-strong);
  background: var(--nb-panel-2);
  color: var(--nb-ink);
  font: inherit; font-size: 12.5px; font-weight: 650;
  cursor: pointer; white-space: nowrap;
}

/* ══ MOTION ═════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .nb2-mast, .nb2-tldr, .nb2-rail, .nb2-lead {
    animation: nb2In 320ms var(--md-sys-motion-easing-emphasized-decel, cubic-bezier(.05,.7,.1,1)) both;
  }
  .nb2-tldr { animation-delay: 50ms; }
  .nb2-rail { animation-delay: 90ms; }
  .nb2-lead { animation-delay: 130ms; }
}
@keyframes nb2In { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ══ MOBILE ═════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .nb2 { --nb-fs-mast: 27px; --nb-fs-lead: 20px; --nb-fs-head: 16.5px; }
  .nb2-mkt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ══ STILL-DEVELOPING DIGEST ════════════════════════════════════════════
   By definition none of this is news, so it ships collapsed. Before this it
   rendered as a run of paragraphs with literal ">" characters, which put the
   least important block on the card in the most prominent form. */
.nb2-digest {
  margin: var(--nb-s3) 0;
  border: 1px solid var(--nb-line);
  background: var(--nb-panel);
  border-radius: var(--nb-r-md);
}
.nb2-digest > summary {
  display: flex; align-items: center; gap: var(--nb-s2);
  list-style: none; cursor: pointer;
  padding: 0 var(--nb-s3);
  min-height: 44px;
  color: var(--nb-ink-3);
  -webkit-tap-highlight-color: transparent;
}
.nb2-digest > summary::-webkit-details-marker { display: none; }
.nb2-digest > summary .nb2-chev { margin-left: auto; margin-top: 0; }
.nb2-digest[open] > summary .nb2-chev { transform: rotate(180deg); }
.nb2-digest[open] > summary { border-bottom: 1px solid var(--nb-line); }
@media (hover: hover) {
  .nb2-digest > summary:hover { color: var(--nb-ink-2); }
}
.nb2-digest-body { padding: var(--nb-s3); }
.nb2-digest-body p {
  font-size: 13.5px; line-height: 1.55; color: var(--nb-ink-3);
  margin-bottom: var(--nb-s2);
}
.nb2-digest-body ul { list-style: none; padding: 0; }
.nb2-digest-body li {
  position: relative;
  padding-left: 14px;
  font-size: 13px; line-height: 1.5; color: var(--nb-ink-3);
  margin-bottom: 6px;
}
.nb2-digest-body li:last-child { margin-bottom: 0; }
.nb2-digest-body li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--nb-line-strong);
}

/* ══ PREAMBLE ═══════════════════════════════════════════════════════════
   "Since last brief" and its digest sit above the top story in the document,
   before any department opens. It is a section, not a department: no badge,
   no rail chip, no count. */
.nb2-preamble { margin-bottom: var(--nb-s4); }

/* ══ UPDATE PILL ════════════════════════════════════════════════════════
   A story that MOVED since the last edition. Accent-coloured rather than the
   ochre .nb2-flag "Contested" treatment, because it is news, not a caveat. */
.nb2-flag--upd {
  border-color: color-mix(in srgb, var(--nb-accent) 45%, transparent);
  color: var(--nb-accent);
}
.nb2-lead-kicker .nb2-flag--upd { margin-left: auto; }

/* A starred (key) story keeps a quiet left-hand tell in the headline weight
   rather than a one-sided accent bar, per the house rule. */
.nb2-story--key > summary h3 { color: var(--nb-ink); font-weight: 700; }

/* ══ READING PROGRESS ═══════════════════════════════════════════════════
   The one thing a 16KB document owes the reader: how much is left. Rides the
   bottom edge of the sticky rail, so it costs no vertical space. */
.nb2-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: transparent; overflow: hidden;
}
.nb2-progress i {
  display: block; height: 100%; width: var(--nb-p, 0%);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--nb-accent) 55%, transparent), var(--nb-accent));
  transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .nb2-progress i {
    width: 100%; transform: scaleX(0);
    animation: nb2Prog linear both;
    animation-timeline: scroll();
  }
  @keyframes nb2Prog { to { transform: scaleX(1); } }
}
.nb2-rail { position: sticky; }

/* ══ BOTTOM LINE — bookends the TL;DR, same accent, closing verdict ═════ */
.nb2-bottom {
  border-color: color-mix(in srgb, var(--nb-accent) 34%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nb-accent) 4%, transparent),
      color-mix(in srgb, var(--nb-accent) 11%, transparent));
}
.nb2-bottom-head { color: var(--nb-accent); }
.nb2-bottom p { font-size: 16.5px; line-height: 1.5; letter-spacing: -0.008em; }

/* ══ DESKTOP ════════════════════════════════════════════════════════════
   The reader is not the 520px CC rail any more (see the cc.css change in the
   spec). At 68ch the masthead can carry real display type. */
@media (min-width: 1024px) {
  .nb2 { --nb-fs-mast: 40px; --nb-fs-lead: 25px; --nb-fs-head: 17.5px; }
  .nb2-mast { padding-bottom: var(--nb-s5); margin-bottom: var(--nb-s5); }
  .nb2-title { text-wrap: balance; }
  .nb2-story > summary { padding: var(--nb-s4) 0; }
}