/* ── News-brief card layout ───────────────────────────────────────────────────
 *
 * Scoped to .nb, emitted only by modules/brief-render.js for the World News
 * Brief job card. Everything is driven off the app's own M3 tokens so it
 * follows the dark/light theme; the only fixed value is the Care& Blue accent,
 * which gets a darker variant on light backgrounds.
 *
 * House rule: no one-sided accent bars. Emphasis is carried by a full border
 * plus a light fill.
 * ─────────────────────────────────────────────────────────────────────────── */

.nb {
  --nb-blue:      #2693D1;
  --nb-blue-soft: rgba(38, 147, 209, 0.12);
  --nb-blue-line: rgba(38, 147, 209, 0.38);
  --nb-strong:    var(--md-sys-color-on-surface);
  --nb-text:      var(--md-sys-color-on-surface);
  --nb-text-2:    var(--text-secondary);
  --nb-dim:       var(--text-dim);
  /* Hairlines are set explicitly: the M3 outline-variant token resolves to
     #171717 on dark, which disappears against the card surface. */
  --nb-line:      rgba(255, 255, 255, 0.09);
  --nb-fill:      rgba(255, 255, 255, 0.035);

  font-size: 15px;
  line-height: 1.55;
  color: var(--nb-text);
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="light"] .nb {
  --nb-blue:      #1D6FA5;
  --nb-blue-soft: rgba(30, 111, 165, 0.07);
  --nb-blue-line: rgba(30, 111, 165, 0.30);
  --nb-line:      rgba(0, 0, 0, 0.10);
  --nb-fill:      rgba(0, 0, 0, 0.025);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .nb {
    --nb-blue:      #1D6FA5;
    --nb-blue-soft: rgba(30, 111, 165, 0.07);
    --nb-blue-line: rgba(30, 111, 165, 0.30);
    --nb-line:      rgba(0, 0, 0, 0.10);
    --nb-fill:      rgba(0, 0, 0, 0.025);
  }
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */
.nb-masthead {
  padding: 2px 0 16px;
  border-bottom: 1px solid var(--nb-line);
  margin-bottom: 18px;
}
.nb-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nb-blue); margin-bottom: 6px;
}
.nb-title {
  font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em;
  color: var(--nb-strong); margin: 0;
}
.nb-date { font-size: 13px; color: var(--nb-dim); margin-top: 4px; }

/* ── TL;DR ────────────────────────────────────────────────────────────────── */
.nb-tldr {
  background: var(--nb-blue-soft);
  border: 1px solid var(--nb-blue-line);
  border-radius: 14px;
  padding: 14px 16px 16px;
  margin: 0 0 18px;
}
.nb-tldr-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nb-blue); margin-bottom: 12px;
}
.nb-tldr-list { list-style: none; margin: 0; padding: 0; }
.nb-tldr-list li {
  position: relative;
  padding-left: 18px;
  margin: 0 0 12px;
  font-size: 14.5px; line-height: 1.5;
  color: var(--nb-text);
}
.nb-tldr-list li:last-child { margin-bottom: 0; }
.nb-tldr-list li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--nb-blue);
}
.nb-tldr-lead { font-weight: 650; color: var(--nb-strong); }

/* ── Jump nav ─────────────────────────────────────────────────────────────── */
.nb-nav {
  display: flex; gap: 8px; overflow-x: auto;
  margin: 0 0 20px; padding-bottom: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nb-nav::-webkit-scrollbar { display: none; }
.nb-nav-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 7px 12px;
  border: 1px solid var(--nb-line); border-radius: 999px;
  background: var(--nb-fill);
  font-size: 12.5px; font-weight: 600; color: var(--nb-text-2);
  text-decoration: none;
}
.nb-nav-chip:active { background: var(--md-sys-state-press, var(--nb-fill)); }

/* ── Section + banner headers ─────────────────────────────────────────────── */
.nb-section-head,
.nb-banner {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--nb-text-2);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--nb-line);
}
.nb-section-head { margin: 26px 0 14px; }
.nb-banner { margin: 24px 0 12px; }
.nb-banner--top { color: var(--nb-blue); border-bottom-color: var(--nb-blue-line); }
.nb-section-emoji,
.nb-banner-emoji { font-size: 15px; letter-spacing: 0; }
.nb-section-head { flex-wrap: wrap; }
.nb-section-note {
  flex: 1 1 100%;
  margin-left: 23px;
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--nb-dim);
}

/* ── Sub-dividers ─────────────────────────────────────────────────────────── */
.nb-subdiv {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--nb-dim);
}
.nb-subdiv::before,
.nb-subdiv::after { content: ""; flex: 1; height: 1px; background: var(--nb-line); }

/* ── Story blocks ─────────────────────────────────────────────────────────── */
.nb-story {
  padding: 0 0 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--nb-line);
}
.nb-story:last-child { border-bottom: none; margin-bottom: 0; }
.nb-story--key {
  background: var(--nb-fill);
  border: 1px solid var(--nb-line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
.nb-head {
  font-size: 16px; line-height: 1.32; font-weight: 650; letter-spacing: -0.005em;
  color: var(--nb-strong);
  margin: 0 0 8px;
}
.nb-key-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--nb-blue); margin-right: 8px; vertical-align: 2px;
}
.nb-tag-update {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nb-blue);
  border: 1px solid var(--nb-blue-line); border-radius: 5px;
  padding: 2px 6px; margin-right: 8px; vertical-align: 2px;
}
.nb-body { font-size: 14.5px; line-height: 1.6; color: var(--nb-text-2); margin: 0; }
.nb-body strong { color: var(--nb-text); font-weight: 650; }

/* ── Source chips ─────────────────────────────────────────────────────────── */
.nb-sources { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.nb-src {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--nb-dim);
  border: 1px solid var(--nb-line); border-radius: 5px;
  padding: 2px 6px; white-space: nowrap;
}
.nb-src--tg { opacity: 0.75; }

/* ── "Their spin" ─────────────────────────────────────────────────────────── */
.nb-spin {
  margin-top: 12px; padding: 11px 12px;
  background: var(--nb-fill);
  border: 1px solid var(--nb-line);
  border-radius: 10px;
}
.nb-spin-head {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nb-dim); margin-bottom: 5px;
}
.nb-spin p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--nb-text-2); }
.nb-spin .nb-sources { margin: 0; }

/* ── Collapsed disclosure ("Still developing") ────────────────────────────── */
.nb-quiet {
  border: 1px solid var(--nb-line); border-radius: 12px;
  background: var(--nb-fill);
  margin: 0 0 18px;
}
.nb-quiet-head {
  display: flex; align-items: center; gap: 8px;
  list-style: none; cursor: pointer;
  min-height: 44px; padding: 12px 14px;
  font-size: 12.5px; font-weight: 650; color: var(--nb-text-2);
}
.nb-quiet-head::-webkit-details-marker { display: none; }
/* The label eats the free space so the count pill and chevron sit together at
   the right edge, whether or not a count is present. */
.nb-quiet-label { margin-right: auto; }
.nb-quiet-head::after { content: "▾"; margin-left: 2px; color: var(--nb-dim); font-size: 12px; }
.nb-quiet[open] .nb-quiet-head::after { content: "▴"; }
.nb-count {
  font-size: 11px; font-weight: 700; color: var(--nb-dim);
  border: 1px solid var(--nb-line); border-radius: 999px;
  padding: 1px 7px;
}
.nb-quiet-list { margin: 0; padding: 0 14px 12px 32px; }
.nb-quiet-list li { font-size: 13.5px; line-height: 1.5; color: var(--nb-text-2); margin-bottom: 7px; }
.nb-quiet-list li:last-child { margin-bottom: 0; }
.nb-quiet > p { margin: 0 14px 10px; font-size: 13.5px; line-height: 1.5; color: var(--nb-text-2); }

/* ── Worth-a-look one-liners ──────────────────────────────────────────────── */
.nb-brief-item {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--nb-line);
}
.nb-brief-item:last-child { border-bottom: none; }
.nb-brief-item p {
  flex: 1 1 100%; margin: 0;
  font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--nb-text);
}
.nb-brief-item .nb-sources { margin: 0; }

/* ── Markets table ────────────────────────────────────────────────────────── */
.nb-table-wrap {
  border: 1px solid var(--nb-line); border-radius: 12px;
  overflow: hidden;
  margin: 4px 0 16px;
}
.nb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nb-table th {
  text-align: left;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--nb-dim);
  padding: 10px 12px;
  background: var(--nb-fill);
  border-bottom: 1px solid var(--nb-line);
}
.nb-table td {
  padding: 10px 12px;
  color: var(--nb-text);
  border-bottom: 1px solid var(--nb-line);
}
.nb-table tr:last-child td { border-bottom: none; }
.nb-table tbody tr:nth-child(even) td { background: var(--nb-fill); }
.nb-table .nb-num { text-align: right; font-variant-numeric: tabular-nums; }
.nb-table .nb-label { color: var(--nb-text-2); }
.nb-table .nb-up   { color: var(--md-sys-color-success-fg, #4ADE80); font-weight: 600; }
.nb-table .nb-down { color: var(--md-sys-color-critical-fg, #F87171); font-weight: 600; }
.nb-table .nb-flat { color: var(--nb-dim); }

/* ── Bottom line ──────────────────────────────────────────────────────────── */
.nb-bottom {
  margin: 24px 0 4px; padding: 14px 16px;
  background: var(--nb-blue-soft);
  border: 1px solid var(--nb-blue-line);
  border-radius: 14px;
}
.nb-bottom-head {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nb-blue); margin-bottom: 7px;
}
.nb-bottom p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--nb-text); }

/* ── Inline bits ──────────────────────────────────────────────────────────── */
.nb code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.87em;
  background: var(--nb-fill);
  border: 1px solid var(--nb-line);
  border-radius: 4px;
  padding: 1px 5px;
}
.nb em { font-style: italic; }
.nb a { color: var(--accent); text-decoration: none; }