/* AD Report # 1: Forecast style. A data-journal look (deep slate, cream type, orange bands, pill controls, Jost),
   loaded after site.css (and noc.css on the Ops Dashboard) on every Report # 1 page. Report # 1 is always dark:
   each page's <head> sets data-theme="dark", so site.css's dark rules apply first and this file restyles them.
   site.css stays the neutral base that Build-ReportStyles.ps1 copies into the other reports; keep Report # 1's
   look in this file so it doesn't spread to them. Rules are prefixed with :root[data-theme] so they outrank
   site.css's :root[data-theme="dark"] rules. */
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root, :root[data-theme] {
  color-scheme: dark;
  /* the palette */
  --fc-bg: #142026; --fc-surface: #1A2A31; --fc-well: #22323A; --fc-grid: #2C3A3F; --fc-rule: #3B4A50; --fc-mid: #3A4A50;
  --fc-cream: #F3EBDD; --fc-muted: #B9B2A4; --fc-orange: #E07A45; --fc-on-orange: #142026;
  --fc-teal: #5AA3A6; --fc-blue: #6F9AE0; --fc-red: #EC6A5C; --fc-gold: #F0B94A; --fc-plum: #B892E8;
  --fc-radius: 22px;

  --font: "Jost", Futura, "Century Gothic", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --ground: var(--fc-bg); --surface: var(--fc-surface); --well: var(--fc-well); --track: var(--fc-grid);
  --primary: var(--fc-orange); --primary-dark: #C9652F; --teal-2: var(--fc-teal);
  --link: #7CC3C6; --link-hover: var(--fc-cream);
  --ink: var(--fc-cream); --ink-2: #E2D9C9; --muted: var(--fc-muted); --rule: rgba(243, 235, 221, .10);

  --pass-bg: rgba(90, 163, 166, .18); --pass-fg: #8FD0D2;
  --warn-bg: rgba(240, 185, 74, .16); --warn-fg: #F5CB75; --warn-strong: var(--fc-gold);
  --fail-bg: rgba(236, 106, 92, .18); --fail-fg: #F69A8F; --fail-strong: #F07A6D;
  --info-bg: rgba(111, 154, 224, .18); --info-fg: #A9C3EE; --info-strong: #93B4EA;
  --fail-solid: #C94A3F; --warn-solid: #D39A2A; --info-solid: #4F72AE;

  /* charts: teal, orange, blue, plum, gold (regions take the first four) */
  --c1: var(--fc-teal); --c2: var(--fc-orange); --c3: var(--fc-blue); --c4: var(--fc-plum); --c5: var(--fc-gold); --c-other: #6B7A7F;
  --m1: #4F8E91; --m2: #C46C3E; --m3: #6385C2; --m4: #9C7CC6; --m5: #CFA145; --m6: #5F7D88;
  --s-good: var(--fc-teal); --s-warn: var(--fc-gold); --s-bad: var(--fc-red); --s-info: var(--fc-blue);
  --alert-red: var(--fc-red);

  --tint: rgba(90, 163, 166, .16); --field: #10181C; --edge: var(--fc-grid);
  --row-hover: rgba(243, 235, 221, .04); --row-open: rgba(243, 235, 221, .06);
  --teal-rgb: 90,163,166; --shade-rgb: 0,0,0; --lo-rgb: 0,0,0; --lo-a: 0; --hi-rgb: 255,255,255; --hi-a: 0;
  --tip-bg: #0E171B; --tip-edge: var(--fc-rule);
  --yes-bg: rgba(90, 163, 166, .18); --yes-fg: #8FD0D2; --no-bg: var(--fc-well); --no-fg: var(--fc-muted);
  --sea: #10191E; --land: #22323A; --land-edge: #3B4A50; --land-edge-strong: #6B7A7F; --land-dim: #1A2A31;
  --hub-line: #D8CFBF; --repl-ok: var(--fc-teal); --map-ring: var(--fc-bg); --halo: rgba(20, 32, 38, .9);
  --topo-bg: #10191E; --topo-land: #1F2E35; --topo-land-edge: #3B4A50; --topo-node: rgba(26, 42, 49, .96); --glass: rgba(26, 42, 49, .94);

  /* flat: borders instead of the neumorphic shadows */
  --sh-raised: none; --sh-control: none; --sh-small: none; --sh-inset: none; --sh-inset-sm: none; --sh-primary: none;

  --range-a: var(--fc-gold); --range-b: var(--fc-orange); --range-track: var(--fc-grid); --range-thumb: var(--fc-bg); --range-ring: var(--fc-orange); --range-glow: rgba(224, 122, 69, .3);
}

:root[data-theme] body { background: var(--fc-bg); font-size: 15px; }
:root[data-theme] :focus-visible { outline: 3px solid var(--fc-gold); outline-offset: 2px; }
:root[data-theme] ::selection { background: var(--fc-orange); color: var(--fc-on-orange); }

/* ---------- headings ---------- */
:root[data-theme] h1 { font-weight: 600; font-size: 38px; letter-spacing: -0.02em; }
:root[data-theme] .eyebrow, :root[data-theme] .tile .label { font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--fc-teal); }
@media (max-width: 600px) { :root[data-theme] h1 { font-size: 28px; } }

/* ---------- sidebar ---------- */
:root[data-theme] .sidebar { background: var(--fc-bg); border: 1.5px solid var(--fc-rule); border-radius: var(--fc-radius); box-shadow: none; }
:root[data-theme] .brand-mark { background: var(--fc-orange); border-radius: 14px; }
:root[data-theme] .brand-mark svg, :root[data-theme] .brand-mark svg * { stroke: var(--fc-on-orange); }
:root[data-theme] .brand-name { font-weight: 700; font-size: 17px; }
:root[data-theme] .brand-sub { letter-spacing: .02em; }
:root[data-theme] .forest-chip { background: var(--fc-surface); border: 1px solid var(--fc-grid); }
:root[data-theme] .forest-chip small { color: var(--fc-orange); font-weight: 600; letter-spacing: .16em; }
:root[data-theme] .rail-toggle { background: var(--fc-surface); border: 1px solid var(--fc-grid); color: var(--fc-cream); }
:root[data-theme] .nav-group-label { font-weight: 600; font-size: 12px; letter-spacing: .18em; color: var(--fc-muted); }
:root[data-theme] .nav-group-label:hover { background: transparent; color: var(--fc-cream); }
:root[data-theme] .nav-group.folded:has(.nav-item[aria-current="page"]) .nav-group-label { color: var(--fc-orange); background: transparent; }
:root[data-theme] .nav-item { font-weight: 500; font-size: 15px; color: var(--ink-2); border-radius: 999px; }
:root[data-theme] .nav-item:hover { background: var(--fc-surface); color: var(--fc-cream); }
:root[data-theme] .nav-item[aria-current="page"] { background: var(--fc-orange); color: var(--fc-on-orange); font-weight: 600; }
:root[data-theme] .nav-item[aria-current="page"] svg, :root[data-theme] .nav-item[aria-current="page"] svg * { stroke: var(--fc-on-orange); }
:root[data-theme] .nav-badge { font-weight: 700; }
:root[data-theme] .freshness { background: var(--fc-surface); border: 1px solid var(--fc-grid); }
:root[data-theme] .freshness .head { color: var(--fc-teal); }
:root[data-theme] .freshness .dot { background: var(--fc-teal); }

/* ---------- page header ---------- */
:root[data-theme] .crumbs, :root[data-theme] .page-head .crumbs { background: transparent; border: 1.5px solid var(--fc-rule); border-radius: 999px; box-shadow: none; font-weight: 500; }
:root[data-theme] .crumbs b { font-weight: 700; }
:root[data-theme] .page-head .titles .page-sub { color: var(--fc-muted); font-weight: 400; }
:root[data-theme] .page-head .titles .page-sub a { color: var(--fc-cream); font-weight: 600; }
:root[data-theme] .page-head .head-tools .gsearch .search { background: var(--fc-surface); border: 1.5px solid var(--fc-cream); box-shadow: none; border-radius: 999px; }
:root[data-theme] .page-head .head-tools .gsearch .search:hover, :root[data-theme] .page-head .head-tools .gsearch:focus-within .search { border-color: var(--fc-gold); box-shadow: 0 0 0 3px rgba(240, 185, 74, .2); }
:root[data-theme] .page-head .head-tools .gsearch .search input { color: var(--fc-cream); caret-color: var(--fc-gold); }
:root[data-theme] .page-head .head-tools .gsearch .search input::placeholder { color: var(--fc-muted); }
:root[data-theme] .page-head .head-tools .gsearch .search > svg, :root[data-theme] .page-head .head-tools .gsearch .search > svg * { stroke: var(--fc-cream); }
:root[data-theme] .page-head .head-tools .gsearch .search .gs-key { color: var(--fc-cream); background: var(--fc-well); }
:root[data-theme] .fs-pill, :root[data-theme] .fs-pill[aria-pressed="true"] { background: transparent; color: var(--fc-cream); border: 1.5px solid var(--fc-cream); box-shadow: none; animation: none; }
:root[data-theme] .fs-pill:hover { border-color: var(--fc-gold); color: var(--fc-gold); }

/* ---------- buttons and switches: pills ---------- */
:root[data-theme] .btn { font-weight: 600; font-size: 13.5px; letter-spacing: .02em; }
:root[data-theme] .btn-primary, :root[data-theme] .btn-primary:hover { background: var(--fc-orange); color: var(--fc-on-orange); }
:root[data-theme] .btn-primary:hover { background: #EA8C5A; }
:root[data-theme] .btn-primary svg, :root[data-theme] .btn-primary svg * { stroke: currentColor; }
:root[data-theme] .btn-secondary { background: transparent; color: var(--fc-cream); border: 1.5px solid var(--fc-cream); }
:root[data-theme] .btn-secondary:hover { border-color: var(--fc-gold); color: var(--fc-gold); }
:root[data-theme] .back-btn { background: var(--fc-orange); color: var(--fc-on-orange); }
:root[data-theme] .seg { background: transparent; border: 1.5px solid var(--fc-cream); border-radius: 999px; box-shadow: none; }
:root[data-theme] .seg button { border-radius: 999px; font-weight: 600; }
:root[data-theme] .seg button[aria-selected="true"] { background: var(--fc-orange); color: var(--fc-on-orange); box-shadow: none; }
:root[data-theme] .seg button.tone-fail[aria-selected="true"] { background: var(--fc-red); color: #10181C; }
:root[data-theme] .seg button.tone-warn[aria-selected="true"] { background: var(--fc-gold); color: #10181C; }

/* everything else that sat white text on --primary: dark text on the orange */
:root[data-theme] .pager button[aria-current="page"], :root[data-theme] .pager .pg-size button[aria-pressed="true"], :root[data-theme] .pg-sel.on select,
:root[data-theme] .region-pill, :root[data-theme] .row-x:hover, :root[data-theme] .row-x[aria-expanded="true"],
:root[data-theme] .detail-bar .nav-btns:last-child > a.btn, :root[data-theme] .jump-nav .jump .n, :root[data-theme] .jump-nav .jump:hover,
:root[data-theme] .pager button.edge:not([disabled]):hover, :root[data-theme] .gp-step, :root[data-theme] .gpr-btn:hover, :root[data-theme] .help-i:hover,
:root[data-theme] .flow-n, :root[data-theme] .guide-toc a.on, :root[data-theme] .about-real-icon, :root[data-theme] .flow-btn.play,
:root[data-theme] select option:checked { color: var(--fc-on-orange); box-shadow: none; }
:root[data-theme] .pager button[aria-current="page"] { border-radius: 999px; }
:root[data-theme] .pg-size { background: var(--fc-well); border-radius: 999px; }
:root[data-theme] .pager .pg-size button { border-radius: 999px; color: var(--fc-cream); }
:root[data-theme] .pg-sel select { color: var(--fc-cream); }
:root[data-theme] .pager button.edge { color: var(--fc-cream); }

/* ---------- cards: an orange band across the top, like a forecast panel ---------- */
:root[data-theme] .card { background: var(--fc-surface); border: 1px solid var(--fc-grid); border-radius: var(--fc-radius); box-shadow: none; }
:root[data-theme] .card > .card-head:first-child { margin: -24px -24px 0; padding: 11px 24px; min-height: 44px; background: var(--fc-orange); color: var(--fc-on-orange); border-radius: calc(var(--fc-radius) - 1px) calc(var(--fc-radius) - 1px) 0 0; }
:root[data-theme] .card > .card-head:first-child h2 { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fc-on-orange); display: flex; align-items: center; gap: 8px; }
:root[data-theme] .card > .card-head:first-child h2 .count { color: rgba(20, 32, 38, .72); font-weight: 600; }
:root[data-theme] .card > .card-head:first-child h2 svg, :root[data-theme] .card > .card-head:first-child h2 svg * { stroke: var(--fc-on-orange); }
:root[data-theme] .card > .card-head:first-child .card-link, :root[data-theme] .card > .card-head:first-child a { color: var(--fc-on-orange); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme] .card > .card-head:first-child .alert-dot { background: var(--fc-on-orange); color: var(--fc-orange); }
/* table tools that sit in the band: dark-on-orange pills */
:root[data-theme] .card > .card-head:first-child .search { background: rgba(20, 32, 38, .14); border: 1.5px solid var(--fc-on-orange); box-shadow: none; border-radius: 999px; }
:root[data-theme] .card > .card-head:first-child .search input { color: var(--fc-on-orange); }
:root[data-theme] .card > .card-head:first-child .search input::placeholder { color: rgba(20, 32, 38, .7); }
:root[data-theme] .card > .card-head:first-child .search svg, :root[data-theme] .card > .card-head:first-child .search svg * { stroke: var(--fc-on-orange); }
:root[data-theme] .card > .card-head:first-child .btn, :root[data-theme] .card > .card-head:first-child .seg { background: transparent; color: var(--fc-on-orange); border: 1.5px solid var(--fc-on-orange); }
:root[data-theme] .card > .card-head:first-child .seg button { color: var(--fc-on-orange); background: transparent; box-shadow: none; }
:root[data-theme] .card > .card-head:first-child .seg button[aria-selected="true"] { background: var(--fc-on-orange); color: var(--fc-orange); }
:root[data-theme] .card > .card-head:first-child .seg button .n { color: inherit; }
:root[data-theme] .card > .card-head:first-child .btn svg, :root[data-theme] .card > .card-head:first-child .btn svg * { stroke: currentColor; }
:root[data-theme] .card.card-alert { border-color: rgba(236, 106, 92, .55); }
:root[data-theme] .card.card-alert > .card-head:first-child { background: var(--fc-red); }
@media (max-width: 600px) { :root[data-theme] .card > .card-head:first-child { margin: -18px -18px 0; padding: 10px 18px; } }
:root[data-theme] .card h2 { font-weight: 700; }
:root[data-theme] .well, :root[data-theme] .kv > div, :root[data-theme] .issue, :root[data-theme] .dt-empty { background: var(--fc-bg); border: 1px solid var(--fc-grid); box-shadow: none; }
:root[data-theme] .kv dd { font-weight: 600; }
:root[data-theme] .country-chip { background: var(--fc-bg); border: 1px solid var(--fc-grid); }

/* ---------- summary tiles: eyebrow, then a big cream number ---------- */
:root[data-theme] .tile { background: var(--fc-surface); border: 1px solid var(--fc-grid); border-radius: var(--fc-radius); box-shadow: none; }
:root[data-theme] a.tile:hover { border-color: var(--fc-orange); box-shadow: none; }
:root[data-theme] .tile .value, :root[data-theme] .tile .value:not(.warn):not(.fail):not(.info) { font-weight: 700; letter-spacing: -0.02em; color: var(--fc-cream); }
:root[data-theme] .tile .value.warn { color: var(--fc-gold); }
:root[data-theme] .tile .value.fail { color: var(--fc-red); }
:root[data-theme] .tile .value.info { color: var(--fc-blue); }
:root[data-theme] .mini-legend b, :root[data-theme] .mini-bars .col em { font-weight: 700; }

/* ---------- status ---------- */
:root[data-theme] .badge { font-weight: 700; letter-spacing: .02em; }
:root[data-theme] .badge.neutral { background: var(--fc-well); }
:root[data-theme] .banner { background: var(--fc-orange); color: var(--fc-on-orange); border-radius: var(--fc-radius); box-shadow: none; }
:root[data-theme] .banner a:not(.btn) { color: var(--fc-on-orange); }
:root[data-theme] .banner .text span { opacity: 1; }
:root[data-theme] .banner .icon { background: var(--fc-on-orange); box-shadow: none; }
:root[data-theme] .banner .icon svg, :root[data-theme] .banner .icon svg * { stroke: var(--fc-red); }
:root[data-theme] .banner a.btn { background: var(--fc-on-orange); color: var(--fc-cream); }
:root[data-theme] .banner.ok { background: var(--fc-teal); }
:root[data-theme] .banner.ok .icon { background: rgba(20, 32, 38, .2); }
:root[data-theme] .banner.ok .icon svg, :root[data-theme] .banner.ok .icon svg * { stroke: var(--fc-on-orange); }
:root[data-theme] .bar, :root[data-theme] .stack { background: var(--fc-well); box-shadow: none; }
:root[data-theme] .bar > span { background: var(--fc-teal); }
:root[data-theme] .ring { box-shadow: none; }
:root[data-theme] .ring .hole { background: var(--fc-surface); box-shadow: none; }
:root[data-theme] .ring .big, :root[data-theme] .meter .top b { color: var(--fc-cream); font-weight: 700; }
:root[data-theme] .flow .node { background: var(--fc-well); box-shadow: none; }

/* ---------- tables ---------- */
:root[data-theme] table.data thead th { background: var(--fc-bg); color: var(--fc-muted); font-weight: 600; letter-spacing: .12em; border-bottom: 1.5px solid var(--fc-rule); }
:root[data-theme] table.data thead th:first-child, :root[data-theme] table.data thead th:last-child { border-radius: 0; }
:root[data-theme] table.data thead tr { box-shadow: none; }
:root[data-theme] table.data thead th .arrow { color: var(--fc-orange); }
:root[data-theme] table.data tbody td { border-bottom-color: var(--fc-grid); }
:root[data-theme] .card > .dt-scroll, :root[data-theme] .dt-scroll { border-radius: 0; }
:root[data-theme] .search { border-radius: 999px; }

/* ---------- maps ---------- */
:root[data-theme] .map { box-shadow: none; border: 1px solid var(--fc-grid); }
:root[data-theme] .flag { box-shadow: 0 0 0 1px rgba(243, 235, 221, .18); }

/* ---------- pop-ups ---------- */
:root[data-theme] .modal-card, :root[data-theme] .popped { border: 1px solid var(--fc-rule); }

/* ---------- Ops Dashboard (index.html, noc.css) ---------- */
:root[data-theme], body.noc {
  --bg: var(--fc-bg); --bg-2: #10191E; --panel: var(--fc-surface); --panel-2: var(--fc-well);
  --line: rgba(243, 235, 221, .10); --line-2: rgba(243, 235, 221, .22);
  --teal: var(--fc-teal); --teal-dim: #3D7476;
  --st-ok: var(--fc-teal); --st-warn: var(--fc-gold); --st-alert: var(--fc-red); --st-info: var(--fc-blue);
  --st-ok-bg: rgba(90, 163, 166, .15); --st-warn-bg: rgba(240, 185, 74, .15); --st-alert-bg: rgba(236, 106, 92, .17);
  --g-ocean-1: #1E313A; --g-ocean-2: #10191E; --g-land: #2C4049; --g-land-hi: #3E5965; --g-border: rgba(243, 235, 221, .34);
  --g-grat: rgba(243, 235, 221, .07); --g-glow: rgba(224, 122, 69, .16); --g-label: rgba(243, 235, 221, .8);
}
body.noc .noc-app { background: var(--fc-bg); }
body.noc .noc-globe { background: var(--fc-surface); border-color: var(--fc-grid); border-radius: var(--fc-radius); }
body.noc .noc-brand b { font-weight: 700; }
body.noc .noc-brand small, body.noc .noc-side > h2, body.noc .noc-wall > h2 { font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; color: var(--fc-teal); }
body.noc .noc-links a { font-weight: 500; font-size: 13px; border-radius: 999px; }
body.noc .noc-links a:hover { background: var(--fc-orange); color: var(--fc-on-orange); }
body.noc .noc-overall { border-radius: 999px; background: transparent; border: 1.5px solid var(--fc-rule); }
body.noc .noc-side > h2 { letter-spacing: .08em; }
/* the menu badge on the page you are on */
:root[data-theme] .nav-item[aria-current="page"] .nav-badge { background: var(--fc-on-orange); color: var(--fc-cream); }
/* All reports: an outlined pill like the breadcrumb */
:root[data-theme] .home-link { background: transparent; border: 1.5px solid var(--fc-rule); border-radius: 999px; box-shadow: none; color: var(--fc-cream); font-weight: 600; }
:root[data-theme] .home-link:hover { border-color: var(--fc-orange); color: var(--fc-orange); }
:root[data-theme] .home-link svg, :root[data-theme] .home-link svg * { stroke: currentColor; }