/* ============================================================
   SatCom CX — shared brand layer
   Mirrors satcommarketing.com: near-black chrome, floating white
   surfaces, Wix Madefor type, hairline rules, pill controls,
   monochrome with restrained accent.

   Loaded AFTER each board's own <style> block, so equal-specificity
   rules win on order. !important is used only on brand surfaces
   (chrome, type, radii) — never on layout or anything a board needs
   to control for its own data display.

   Built 2026-08-20. Do not fork per board.
   ============================================================ */

:root{
  /* Redefining the shared tokens restyles most of every board for free,
     because the boards already draw from these variables. */
  --navy:#0C0E12; --blue:#12141A; --steel:#3C4048; --ac:#12141A;
  --ink:#101115; --ink-2:#3C4048; --muted:#7A8089;
  --line:#E7E8EB; --canvas:#F4F5F7;
  --good:#1E7E4A; --warn:#9A6B00; --bad:#B3261E;
  --void:#08090B;
  --disp:'Wix Madefor Display',-apple-system,"Segoe UI",Arial,sans-serif;
  --text:'Wix Madefor Text',-apple-system,"Segoe UI",Arial,sans-serif;
  --r-pill:999px; --r-card:16px;
}

body{
  font-family:var(--text) !important;
  background:var(--canvas) !important;
  color:var(--ink) !important;
  -webkit-font-smoothing:antialiased;
}

/* ---- Chrome: the dark orbital band the site leads with ---------- */
.pagehdr, .hero, .topbar, .top{
  background:
    radial-gradient(120% 160% at 82% 0%, rgba(120,150,190,.26) 0%, rgba(20,26,38,.5) 44%, rgba(8,9,11,0) 72%),
    linear-gradient(160deg,#0C0E12 0%,#101319 46%,#080A0D 100%) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.pagehdr h1, .hero h1, .top h1{
  font-family:var(--disp) !important;
  font-weight:400 !important;
  letter-spacing:-.9px !important;
  color:#fff !important;
}
.pagehdr .sub, .hero .sub, .hero p, .top .sub{
  color:rgba(255,255,255,.70) !important;
  font-weight:400 !important;
}
#satcom-nav, .topbar{
  background:#08090B !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
#satcom-nav a, .topbar a{
  border-radius:var(--r-pill) !important;
  background:rgba(255,255,255,.10) !important;
  font-weight:500 !important;
  letter-spacing:.2px;
}
#satcom-nav a:hover, .topbar a:hover{ background:rgba(255,255,255,.20) !important; }

/* Header buttons + timestamp pills */
.refresh, button.pri, .refresh-btn{
  border-radius:var(--r-pill) !important;
  font-weight:600 !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:#fff !important; color:#0B0C0F !important;
}
.refresh:hover, button.pri:hover, .refresh-btn:hover{ background:#EDEEF0 !important; }
.rcount, .stamp, .clk, .clock{
  border-radius:var(--r-pill) !important;
  background:rgba(255,255,255,.12) !important;
  font-variant-numeric:tabular-nums;
}

/* ---- Filter bar: hairline, pill segments ----------------------- */
.bar, .filters{
  background:#fff !important;
  border-bottom:1px solid var(--line) !important;
}
.seg{ background:#F1F2F4 !important; border-radius:var(--r-pill) !important; padding:3px !important; }
.seg button{ border-radius:var(--r-pill) !important; font-weight:600 !important; color:var(--muted) !important; }
.seg button.on{ background:#12141A !important; color:#fff !important; }
.chip, .chips .chip{ border-radius:var(--r-pill) !important; }
.chip.on{ background:#12141A !important; border-color:#12141A !important; color:#fff !important; }
select, input[type=date], input[type=number], input[type=text], .fg select, .fg input{
  border-radius:10px !important;
  border:1px solid var(--line) !important;
  font-family:var(--text) !important;
}
label{ font-weight:600 !important; letter-spacing:.2px; }

/* ---- Cards + KPI tiles ----------------------------------------- */
.card, .chartcard, .kpi{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-card) !important;
  box-shadow:0 1px 2px rgba(8,9,11,.04) !important;
}
.card h3, .chartcard h3{
  font-family:var(--disp) !important;
  font-weight:600 !important;
  color:var(--ink) !important;
  letter-spacing:-.1px !important;
}
/* Accent survives as a hairline top rule, matching the hub cards. */
.kpi{ position:relative; overflow:hidden; }
.kpi::after{ height:2px !important; opacity:.9; }
.kpi .v, .kpi .val{
  font-family:var(--disp) !important;
  font-weight:600 !important;
  letter-spacing:-1px !important;
  font-variant-numeric:tabular-nums;
  color:var(--ink) !important;
}
.kpi .k, .kpi .lbl{
  font-weight:600 !important; letter-spacing:.6px !important;
  text-transform:uppercase; color:var(--muted) !important;
}
.kpi .s, .kpi .m, .kpi .tgt{ color:var(--muted) !important; }

/* ---- Tables: hairline, micro uppercase headers ----------------- */
thead th{
  background:#FAFAFB !important;
  color:var(--muted) !important;
  font-weight:700 !important;
  letter-spacing:.5px !important;
  text-transform:uppercase;
  border-bottom:1px solid var(--line) !important;
  font-family:var(--text) !important;
}
tbody td{ border-bottom:1px solid #F2F3F5 !important; }
tbody tr:hover td{ background:#FAFBFC !important; }
.num, td.num, th.num{ font-variant-numeric:tabular-nums; }

/* ---- Status pills ---------------------------------------------- */
.pill, .b, .badge, .status{ border-radius:var(--r-pill) !important; font-weight:600 !important; letter-spacing:.3px; }
.p-ok,  .b-live, .good{ color:#1E7E4A !important; }
.p-bad, .bad{  color:#B3261E !important; }
.p-warn,.warn{ color:#9A6B00 !important; }

/* ---- Notes / caveats ------------------------------------------- */
.note, .notebox, .provenance{
  border-radius:12px !important;
  border:1px solid #EFE4C4 !important;
  background:#FDFAF1 !important;
  color:#6B5A1E !important;
}
.err{ border-radius:12px !important; }

/* Charts inherit the type stack */
canvas{ font-family:var(--text); }

@media (max-width:820px){
  .pagehdr, .hero{ padding-left:18px !important; padding-right:18px !important; }
}

/* ============================================================
   EXCELLENCE DECK LAYER
   Design DNA lifted from reference_satcom_excellence_deck_design_system
   (mesh: satcom_excellence_deck_design_system, 2026-08-09).

     #000000 titles · #444444 charcoal body · #00B0F0 cyan accent
     #1C1C32 navy (logo only) · #F4F4F4 stat-cell fill · #CCCCCC divider

   The deck specifies Arial; the live website uses Wix Madefor. Type
   follows the WEBSITE (it is the current public brand); everything else
   -- palette, the rule bracket, stat-cell fills, the italic arrow
   punchline -- follows the DECK. That keeps the two consistent instead
   of picking a winner.
   ============================================================ */
:root{
  --xl-title:#000000; --xl-body:#444444; --xl-cyan:#00B0F0;
  --xl-navy:#1C1C32;  --xl-fill:#F4F4F4;  --xl-rule:#CCCCCC;
}

/* Cyan is the single accent, used sparingly — exactly as the deck uses it
   for section numbers only. Card top-rules become the dashboard equivalent. */
.card::before{ background:var(--xl-cyan) !important; opacity:1 !important; }
.kpi::after{ background:var(--xl-cyan) !important; }
.kpi.good::after{ background:#1E7E4A !important; }
.kpi.warn::after{ background:#9A6B00 !important; }
.kpi.bad::after { background:#B3261E !important; }

/* The deck's rule bracket: 4.45pt above the content band, 1pt below.
   Card headers get the heavy rule; the card foot gets the hairline. */
.card h3, .chartcard h3{
  border-top:0 !important;
  border-bottom:1px solid var(--xl-rule) !important;
  color:var(--xl-title) !important;
}
.card, .chartcard{ border-color:var(--xl-rule) !important; }

/* Stat cells take the deck's #F4F4F4 fill rather than pure white, so KPI
   tiles read as a block the way the deck's stat rows do. */
.kpi{ background:var(--xl-fill) !important; border-color:var(--xl-rule) !important; }
.kpi .v, .kpi .val{ color:var(--xl-title) !important; }
.kpi .k, .kpi .lbl{ color:var(--xl-body) !important; }
.kpi .s, .kpi .m, .kpi .tgt{ color:var(--xl-body) !important; }

/* Body copy sits at charcoal, not black — deck rule. */
.card p, .cbody, tbody td{ color:var(--xl-body) !important; }
thead th{ background:var(--xl-fill) !important; color:var(--xl-body) !important; border-bottom:1px solid var(--xl-rule) !important; }
tbody td{ border-bottom:1px solid #E9E9E9 !important; }

/* The punchline pattern: italic bold, arrow-led, sitting BELOW a hairline.
   Reused for the "what this means" line under a card. */
.punchline, .card .r, .card h3 .note, .card h3 .r{
  font-style:italic; font-weight:600; color:var(--xl-title) !important;
}
.punchline{
  display:block; border-top:1px solid var(--xl-rule);
  margin-top:10px; padding-top:9px; font-size:13px;
}
.punchline::before{ content:'→ '; color:var(--xl-cyan); font-style:normal; font-weight:700; }

/* Section headers echo the deck's cyan section number + black title. */
.suite-h h2, .card h3{ letter-spacing:-.1px }
.seg button.on{ background:var(--xl-navy) !important; }
.chip.on{ background:var(--xl-navy) !important; border-color:var(--xl-navy) !important; }
a{ color:var(--xl-cyan); }

/* ============================================================
   DECK SECTION-BREAK IMAGERY
   The actual assets from the Excellence deck (ppt/media), not a
   CSS approximation:
     /brand/datacity.jpg  — perspective data-city with laser rays
     /brand/orbit.jpg     — particle globe with data wires
     /brand/satcom-lockup*.png — SATCOM + LAUNCH YOUR CX FUTURE
   Reversed (white) lockups were generated from the navy originals
   by recolouring RGB and preserving the authored alpha.
   ============================================================ */

/* Board headers now sit on the data-city break, with a gradient scrim
   so white type keeps its contrast over the bright vanishing point. */
.pagehdr, .hero, .topbar, .top{
  background:
    linear-gradient(90deg, rgba(8,9,11,.94) 0%, rgba(8,9,11,.78) 42%, rgba(8,9,11,.55) 100%),
    url('/brand/datacity.jpg') center 38% / cover no-repeat,
    #08090B !important;
}
.topbar{
  background:
    linear-gradient(90deg, rgba(8,9,11,.96) 0%, rgba(8,9,11,.88) 100%),
    url('/brand/datacity.jpg') center 30% / cover no-repeat,
    #08090B !important;
}

/* The reversed lockup used to sit at the right of every header band, but that
   is exactly where the timestamp and Refresh control live — it washed them out.
   Brand is already carried by the nav bar, so the header stays clean.
   (removed 2026-08-20 after it collided on Socket Fiber) */

/* Section-break band — the orbit graphic used the way the deck uses it
   between sections. Drop <div class="deckbreak"></div> anywhere. */
.deckbreak{
  height:132px; border-radius:14px; margin:26px 0; overflow:hidden;
  background:
    linear-gradient(90deg, rgba(8,9,11,.86) 0%, rgba(8,9,11,.45) 50%, rgba(8,9,11,.86) 100%),
    url('/brand/orbit.jpg') center center / cover no-repeat, #08090B;
}

/* ============================================================
   .top — the fifth chrome variant
   commission.html, lead-360.html, optimum-leads.html, report.html and
   wfm_command_center.html name their page header ".top", which the
   selectors above did not reach, so those five kept a flat pre-brand
   header while every other board carried the data-city band. Audited
   2026-08-27: .top holds an <h1> on all five and is not used for
   anything else on any board, so this is safe to style globally.
   ============================================================ */
.top{
  padding:20px 24px !important;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.top h1{ font-size:22px !important; margin:0 !important; }
.top .sub{ font-size:12.5px !important; margin-top:3px !important; }
.top .stats span, .top .ctrl, .top .search{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.18) !important;
  color:#fff !important;
}
.top a{ color:#fff !important; }