/* Review interface — Kapita Research brand system.
   Source of truth: ~/.claude/skills/kapita-research-tools/references/design-system.md
   ("Bloomberg Terminal meets Linear meets 2026" — sharp, geometric, data-forward.)

   Three deliberate departures from that document, all forced by what this is —
   an internal multi-page app, not a single-file public landing page:

   1. Inter is SELF-HOSTED, not loaded from Google Fonts. This app's CSP is
      `default-src 'self'` (main.py), so an external font request would be
      blocked outright. Self-hosting keeps the CSP strict and means the tool
      makes no external request at all. One variable file covers 400–900.
   2. The nav pill group is NOT absolutely centered. The design system centers
      it against a bare marketing banner; here it shares the bar with a signed-in
      user block, and absolute centering overlaps it below ~1100px.
   3. The logo links to "/" (this app's dashboard), not research.kapita.iq.
      Sending a reviewer off to the public site every time they click the
      wordmark would be hostile in a working tool.

   Everything else — tokens, banner treatment, buttons, fields, cards, badges,
   data-viz, rhythm — is lifted from the design system verbatim. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/static/fonts/Inter-Variable.woff2') format('woff2-variations');
}

:root {
  /* Canonical brand values - design-system.md §1. Do not substitute. */
  --navy: #1A284A;
  --blue: #2352FF;
  --blue-deep: #1a43e0;      /* the documented hover for --blue */
  --sky: #79C8FF;
  --cream: #F4EEE0;
  --amber: #FAAD40;
  --red: #EC4136;
  --ink-black: #1B1B1C;
  --slate: #44474d;
  --slate-soft: #6b6f78;
  --line: #e7e2d6;
  --bg: #F4EEE0;
  --surface: #ffffff;
  --field-bg: #fbf9f4;
  --ghost-line: #c9d0e0;
  --shadow: 0 1px 2px rgba(26, 40, 74, .04), 0 8px 24px rgba(26, 40, 74, .06);
  --shadow-lift: 0 4px 12px rgba(26, 40, 74, .08), 0 16px 40px rgba(26, 40, 74, .10);
  --radius: 14px;

  /* Aliases kept so existing template markup didn't have to change. */
  --paper: var(--bg);
  --paper-raised: var(--surface);
  --ink: var(--navy);
  --muted: var(--slate);
  --faint: var(--slate-soft);
  --accent: var(--blue);
  --accent-ink: #ffffff;
  --accent-soft: rgba(35, 82, 255, 0.10);

  /* Status pills. Red is reserved for genuine alerts and negative results
     only, never decoration (design-system.md §1). */
  --good-bg: #E3F3EA; --good-fg: #157A44;
  --warn-bg: #FEF1DC; --warn-fg: #8A5A12;
  --bad-bg: #FDECEB;  --bad-fg: #C0332A;
  --muted-bg: #EFEBDE; --muted-fg: #6b6f78;
  --okwarn-bg: #E3F1FC; --okwarn-fg: #1B6FA8;
}

/* NO `prefers-color-scheme: dark` block, on purpose. The brand is light-first:
   cream + white foundation carrying navy and electric blue. design-system.md
   ships a dark variant but says to build it ONLY on request - and an automatic
   switch meant every reviewer on a dark-mode OS saw an off-brand navy app that
   nobody had designed or reviewed. */

/* Arabic falls back to the platform's Arabic UI face. Inter carries no Arabic
   glyphs, so without this the browser picks an arbitrary fallback and the
   interface loses its typographic identity the moment you switch language.
   A bundled Arabic webfont (IBM Plex Sans Arabic / Noto Sans Arabic) would be
   better and would match Kapita's Arabic print materials - it needs the font
   file added to /static/fonts and this stack updated, since the CSP forbids
   loading one from Google Fonts. */
[dir="rtl"] body,
[dir="rtl"] .btn,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  font-family: "Segoe UI", "Noto Sans Arabic", "Dubai", Tahoma, "Geeza Pro", 'Inter', sans-serif;
}
/* Arabic sits lower and needs more leading than Latin at the same size. */
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; }

/* Numbers stay Western (123) and stay LTR inside Arabic text - the
   kapita-arabic-translator skill's Rule 1.2. */
[dir="rtl"] .mono, [dir="rtl"] .num, [dir="rtl"] .stat-n { direction: ltr; unicode-bidi: embed; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  /* Layered radial glows over cream - sky top-right, faint blue top-left.
     This is what stops the page reading as flat beige. design-system.md §1. */
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(121, 200, 255, .18), transparent 60%),
    radial-gradient(900px 480px at 0% 0%, rgba(35, 82, 255, .06), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--slate);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Headings: heavy, tight, navy, top-left aligned. Never a serif. */
h1, h2, h3 {
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-align: start;
}

.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--slate); }
.fine { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; text-align: end; }

a { color: var(--blue); }
a:hover { color: var(--blue-deep); }

/* ---------- Banner / top nav (design-system.md §3) ---------- */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: 1180px; margin-inline: auto; padding: 14px 32px;
  display: flex; align-items: center; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); white-space: nowrap; transition: opacity .15s; }
.brand:hover { opacity: .8; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-sub {
  color: var(--slate-soft); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  padding-inline-start: 12px; border-inline-start: 1px solid var(--line);
}

/* The pill group: white, hairline border, soft shadow, fully rounded. */
.topnav {
  display: flex; align-items: center; gap: 6px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 99px; padding: 6px; box-shadow: var(--shadow);
}
.topnav a {
  text-decoration: none; color: var(--navy); font-size: 14.5px; font-weight: 600;
  padding: 9px 16px; border-radius: 99px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.topnav a:hover { background: #f1eee4; color: var(--blue); }
.topnav a.active { background: var(--blue); color: #fff; }
.topnav a.active:hover { background: var(--blue-deep); color: #fff; }

.topbar-user { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--slate); }
.whoami {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  color: var(--navy); text-decoration: none; padding: 5px 10px; border-radius: 99px;
  transition: background .15s;
}
.whoami:hover { background: #f1eee4; color: var(--navy); }
.role-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--accent-soft); color: var(--blue); padding: 3px 9px; border-radius: 99px;
}
.link-button { background: none; border: none; color: var(--slate-soft); cursor: pointer; font-size: 13px; font-weight: 600; padding: 0; font-family: inherit; transition: color .15s; }
.link-button:hover { color: var(--blue); }

/* ---------- Language toggle ---------- */

.lang-form {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--field-bg); border: 1px solid var(--line);
  border-radius: 99px; padding: 3px;
}
.lang-btn {
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  border: none; background: none; color: var(--slate-soft);
  padding: 5px 12px; border-radius: 99px; transition: background .15s, color .15s;
}
.lang-btn:hover { color: var(--blue); }
.lang-active { background: var(--surface); color: var(--navy); box-shadow: var(--shadow); }
/* The Arabic option renders in Arabic ("العربية"), so it needs the Arabic
   face even while the interface is still in English. */
.lang-btn[lang="ar"] { font-family: "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif; font-size: 13px; }
/* Signed out there is no top bar to hang it on, so it floats above the card. */
.lang-floating { display: flex; justify-content: flex-end; margin-bottom: 16px; }

/* ---------- Page shell ---------- */

.page { max-width: 1180px; margin-inline: auto; padding: 48px 32px 96px; }
.page-narrow { max-width: 460px; padding-top: 72px; }

/* Hero two-tone: navy line, electric-blue accent line (design-system.md §2). */
.page-title { font-size: 34px; line-height: 1.15; margin: 0 0 8px; }
.page-title .accent { color: var(--blue); display: block; }
.page-lede { font-size: 15px; color: var(--slate-soft); margin: 0 0 40px; max-width: 70ch; }
.section-title { font-size: 21px; margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.back-link { display: inline-block; margin-bottom: 16px; text-decoration: none; color: var(--slate-soft); font-size: 13px; font-weight: 600; }
.back-link:hover { color: var(--blue); }
/* Arrows come from CSS, not from the markup, so they can point the right way
   in each direction - a literal "←" glued into a template means "forward" once
   the page flips to RTL. */
.back-link::before { content: "\2190\00a0"; }
[dir="rtl"] .back-link::before { content: "\2192\00a0"; }
.go::after { content: "\00a0\2192"; }
[dir="rtl"] .go::after { content: "\00a0\2190"; }
.pager-prev::before { content: "\2190\00a0"; }
[dir="rtl"] .pager-prev::before { content: "\2192\00a0"; }
.pager-next::after { content: "\00a0\2192"; }
[dir="rtl"] .pager-next::after { content: "\00a0\2190"; }

/* Eyebrow badge with the sky dot (design-system.md §7). */
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 13px; font-weight: 600; color: var(--blue); margin-bottom: 20px;
}
.badge .dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px rgba(121, 200, 255, .25); }

/* ---------- Flash messages ---------- */

.flashes { margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.flash { padding: 13px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; box-shadow: var(--shadow); }
.flash-success { background: var(--good-bg); color: var(--good-fg); }
.flash-error { background: var(--bad-bg); color: var(--bad-fg); }
.flash-info { background: var(--surface); color: var(--slate); border-inline-start: 3px solid var(--blue); }

/* ---------- Cards (design-system.md §5) ---------- */

.card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px 32px;
}
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--line);
}
.card-head .ic {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--blue); flex-shrink: 0;
}
.card-head .ic svg { width: 18px; height: 18px; display: block; }
.card-head h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.card-head .head-note { margin-inline-start: auto; font-size: 12.5px; color: var(--slate-soft); font-weight: 500; }

/* ---------- Stat cards ---------- */

/* Five cards in a fixed four-column grid left the fifth alone at one end.
   `auto-fit` with a minimum width lets the row settle at whatever count
   fits, so adding or removing a card never strands one. */
.stat-grid {
  display: grid; gap: 18px; margin-bottom: 56px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat-card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px; text-decoration: none; color: inherit; display: block;
  transition: box-shadow .2s, transform .2s;
  position: relative; overflow: hidden;
}
/* Amber marks the key stat - as a rule above the number rather than as the
   number's own colour. design-system.md assigns amber to "key stats", but
   #FAAD40 on white measures 1.89:1 and even the brand's text-amber (#d9920f,
   from the data-viz scale) only reaches 2.6:1 - both under the 3.0 floor for
   large text. The numeral is navy (14.5:1) so it can actually be read; the
   amber still says "this is the number that matters". */
.stat-card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 44px; height: 3px; background: var(--amber);
}
.stat-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.stat-card:hover::before { width: 100%; transition: width .25s ease; }
.stat-n {
  font-size: 40px; font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--navy); display: block; line-height: 1;
  margin-block: 8px 10px; letter-spacing: -0.03em;
}
.stat-l { font-size: 13px; color: var(--navy); font-weight: 600; display: block; }
.stat-card .fine { display: block; margin-top: 6px; color: var(--slate-soft); }

/* ---------- Tables ---------- */

.table-wrap { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 24px 4px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: start; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-soft); font-weight: 700; padding: 16px 14px 12px 0; border-bottom: 1px solid var(--line);
}
.data-table td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: #faf8f2; }
.item-title { color: var(--navy); text-decoration: none; font-weight: 600; }
.item-title:hover { color: var(--blue); }

/* ---------- Pills / badges ---------- */

.pill {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  letter-spacing: 0.02em; white-space: nowrap;
}
.pill-good { background: var(--good-bg); color: var(--good-fg); }
.pill-warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill-bad { background: var(--bad-bg); color: var(--bad-fg); }
.pill-muted { background: var(--muted-bg); color: var(--muted-fg); }
.pill-ok-warn { background: var(--okwarn-bg); color: var(--okwarn-fg); }

/* Importance readout - navy filled, track in the cream hairline (§9). */
.dots { display: inline-flex; gap: 3px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #e9e3d6; display: inline-block; }
.dot-on { background: var(--navy); }

/* ---------- Buttons (design-system.md §4) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid transparent; background: transparent; color: var(--navy);
  padding: 13px 26px; border-radius: 10px; font-size: 15px; font-weight: 700;
  letter-spacing: 0.01em; cursor: pointer; text-decoration: none; font-family: inherit;
  transition: all .18s;
}
.btn-sm { padding: 7px 15px; font-size: 12.5px; border-radius: 8px; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(35, 82, 255, .28); }
.btn-ghost { background: transparent; border-color: var(--ghost-line); color: var(--navy); }
.btn-ghost:hover { border-color: var(--navy); background: var(--surface); color: var(--navy); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.inline-form { display: inline; }
.row-actions { display: flex; gap: 6px; }

/* ---------- Form fields (design-system.md §6) ---------- */

.stack-form { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.stack-form label,
.draft-form label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-soft); margin-top: 14px;
}
.stack-form input, textarea, .filter-row select {
  font-family: inherit; font-size: 15px; padding: 14px 16px; border: 1.5px solid var(--line);
  border-radius: 10px; background: var(--field-bg); color: var(--ink-black); width: 100%;
  outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
}
.stack-form input:focus, textarea:focus, .filter-row select:focus {
  border-color: var(--blue); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft);
}
textarea[readonly] { background: #f3f1ea; color: var(--slate); }
.stack-form button { margin-top: 20px; }

.draft-form { display: flex; flex-direction: column; gap: 4px; margin: 20px 0; }
.draft-form textarea { resize: vertical; line-height: 1.6; }
.draft-form button { margin-top: 20px; align-self: flex-start; }

.filter-row { margin-bottom: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-soft); }
.filter-row select { width: auto; padding: 10px 14px; font-size: 14px; }

/* ---------- Tabs ---------- */

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
.tab {
  padding: 11px 18px; text-decoration: none; color: var(--slate); font-size: 14px; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--blue); }
.tab-active { color: var(--blue); border-bottom-color: var(--blue); }

/* ---------- Pagination ---------- */

.list-count { margin: 0 0 12px; color: var(--slate-soft); }
.list-count b { color: var(--navy); font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 28px 0 4px; }

/* ---------- Article body ---------- */

.article-body-text {
  white-space: pre-wrap; line-height: 1.75; max-height: 32em; overflow-y: auto;
  padding: 12px 2px; font-size: 15px; color: var(--slate);
}
.article-body details > summary,
.approved-text > summary { cursor: pointer; font-weight: 700; color: var(--blue); padding: 10px 0; }

/* ---------- Detail pages ---------- */

.detail-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.detail-section { margin-bottom: 32px; }
.detail-section .section-title { margin-bottom: 14px; }
.context-box {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  border-inline-start: 3px solid var(--blue); padding: 6px 24px;
}
.context-row { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.context-row:last-child { border-bottom: none; }
.context-k {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--slate-soft); width: 180px; flex-shrink: 0; padding-top: 2px;
}
.source-links { margin: 20px 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.action-row { display: flex; gap: 12px; margin: 28px 0; align-items: center; flex-wrap: wrap; }
.timeline { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.timeline li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: none; }

/* ---------- Preview banner ---------- */

.demo-banner {
  background: var(--amber); color: var(--navy);
  padding: 9px 24px; font-size: 13px; font-weight: 600; text-align: center;
  border-bottom: 1px solid rgba(26, 40, 74, .18);
}
.demo-banner b { letter-spacing: .08em; margin-inline-end: 8px; }

/* ---------- Draft generation states ---------- */

.context-box.working { border-inline-start-color: var(--amber); }
.context-box.failed  { border-inline-start-color: var(--red); }
.context-box.working p, .context-box.failed p { margin: 10px 0; }

/* ---------- Login ---------- */

.login-wrap { display: flex; justify-content: center; }
.login-card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding: 44px 40px; width: 100%; max-width: 420px;
}
.login-logo { height: 36px; width: auto; margin-bottom: 28px; display: block; }
.kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 12px;
}
.login-card h1 { font-size: 28px; margin: 0 0 6px; line-height: 1.15; }
.login-card > p.fine { color: var(--slate-soft); margin-top: 24px; }

.empty-state {
  color: var(--slate-soft); padding: 48px 32px; text-align: center;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .page { padding: 32px 20px 64px; }
  .topbar-inner { padding: 12px 20px; }
}

/* The topbar's three groups are 342 + 673 + 329 px in English - 1,456px with
   the gaps and padding, measured, not guessed. Arabic is narrower, which is
   why only English overflowed and why this went unnoticed.

   Below that width the nav takes its own row rather than pushing the page
   sideways. The wrapping layout below was already written for phones and is
   simply given the width it was always needed at: it used to start at 700px,
   so every laptop between 700 and 1456 - which is every laptop - got a
   horizontal scrollbar and a "Sign out" button off the edge of the screen. */
@media (max-width: 1500px) {
  .topbar-inner { flex-wrap: wrap; row-gap: 10px; }
  .topnav {
    /* `flex: 0 0 100%`, not `width: 100%`: `margin-inline: auto` plus the
       default flex basis otherwise squeezes the pill group to its content. */
    order: 3; flex: 0 0 100%; margin-inline: 0;
    justify-content: center; gap: 4px;
  }
}

@media (max-width: 700px) {
  /* The nav used to be `display: none` here with nothing replacing it, so
     below 700px a reviewer could only navigate by typing URLs - and the
     audience is explicitly non-technical (internal review M-19).
     No JavaScript, no hamburger, every destination one tap away. */
  .topnav {
    justify-content: space-between; gap: 2px; padding: 5px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* Tuned so all four destinations fit 375px without the pill group scrolling
     - measured, not guessed. */
  .topnav a { padding: 8px 9px; font-size: 12.5px; }
  .nav-long { display: none; }   /* "Approved & Publishing" -> "Approved" */
  .brand-sub { display: none; }
  .page-title { font-size: 27px; }
  .data-table { display: block; overflow-x: auto; }
  .context-row { flex-direction: column; gap: 4px; }
  .context-k { width: auto; }
  .table-wrap { padding-inline: 16px; }
}

/* The weekly analysis's citation list. Numbered because Stage 5 emits the ids
   in the order it used them, and that order is information. */
.weekly-cited { margin: 8px 0 0; padding-inline-start: 22px; }
.weekly-cited li { margin-bottom: 8px; line-height: 1.5; }
.weekly-cited code { font-size: 13px; color: var(--slate); }

/* ---------- The live-window switch ----------
   Above the cards on the dashboard and above the tabs in the inbox, because it
   changes what every number below it means. A segmented pill, following the
   `.badge` it sits under: the active half is FILLED rather than merely tinted,
   so the current view is legible at a glance and not inferred from a colour
   shift. Logical properties throughout - this page flips to RTL. */

.scope-switch { margin: 0 0 28px; }

.scope-seg {
  display: inline-flex; padding: 3px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.scope-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 99px; text-decoration: none; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--slate-soft);
  transition: background .15s, color .15s;
}
.scope-opt:hover { color: var(--blue); }

/* The active half carries THREE signals, not one: a filled background, heavier
   text, and a tick. One of them surviving is enough to answer "which view am I
   on" - and a colour fill alone does not answer it for a reader who cannot see
   the colour, or on a screen that renders it faintly. */
.scope-on, .scope-on:hover {
  background: var(--blue); color: #ffffff; font-weight: 700;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .18);
}
.scope-on::before { content: "✓"; font-size: 12px; line-height: 1; }
.scope-note { margin: 10px 0 0; }
.scope-note b { color: var(--slate); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .scope-seg { display: flex; }
  .scope-opt { flex: 1; text-align: center; padding-inline: 10px; }
}

/* ---------- Exception notice ----------
   For a state that should not exist: articles stuck before classification, a
   source that stopped answering. It appears only when there is something to
   say, so it is never wallpaper. Amber rather than red: the pipeline is
   running, something in it is not - and the warning tone already carries that
   meaning everywhere else on this page. Logical properties throughout; this
   page flips to RTL. */

.notice {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; margin: 0 0 24px;
  border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--warn-fg);
  box-shadow: var(--shadow);
}
.notice-ic { flex: none; width: 22px; height: 22px; color: var(--warn-fg); margin-top: 1px; }
.notice-ic svg { width: 100%; height: 100%; display: block; }
.notice b { display: block; color: var(--slate); font-size: 15px; }
.notice p { margin: 6px 0 0; color: var(--slate-soft); }
.notice-link {
  display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600;
  color: var(--blue); text-decoration: none;
}
.notice-link:hover { text-decoration: underline; }

/* ---------- Other outlets on the same event (Stage 2.5) ----------
   A list, not a paragraph: the reviewer is checking names against a sourcing
   note, which is scanning, not reading. Logical properties - this page flips
   to RTL. */

.also-list { margin: 6px 0 0; padding-inline-start: 18px; }
.also-list li { margin: 3px 0; font-size: 13px; line-height: 1.5; }
.also-list .mono { color: var(--slate-soft); margin-inline-end: 6px; }
.also-list a { color: var(--blue); text-decoration: none; }
.also-list a:hover { text-decoration: underline; }

.also-box {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--blue);
}
.also-box > b { font-size: 13px; color: var(--slate); }

/* ---------- The flag ----------
   The one signal saying a person has to read this story carefully, on the row
   where a reviewer scans headlines. Amber and lettered rather than a coloured
   dot: colour alone is not a signal to a reader who cannot distinguish it, and
   this is the marker that must never be missed.

   Its reason sits under the headline in full. `escalate_reason` names which of
   the three tests fired and why - a sentence, and useless in a tooltip nobody
   opens. Logical properties throughout; this page flips to RTL. */

.flag {
  display: inline-block; vertical-align: 2px; margin-inline-end: 8px;
  padding: 2px 8px; border-radius: 5px;
  background: var(--warn-bg); color: var(--warn-fg);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
/* The reason is NOT rendered in the queue. Measured: 93 of the first 100 rows
   are flagged, and a two-line reason under each headline took the table from
   9,200 pixels to 18,943 - nineteen screens of scrolling for a sentence that
   applies to most rows. It lives on the item page, where there is room, and on
   the badge's tooltip for a quick check. */

/* One story's other outlets, on the queue row. Quiet: it is context for a
   headline, not a warning - the flag beside it is the only thing on this row
   that should pull an eye. */
.outlets {
  display: inline-block; margin-inline-start: 8px;
  padding: 1px 7px; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--slate-soft); font-size: 11px; font-weight: 600; white-space: nowrap;
}