/* ═══════════════════════════════════════════════════════════════
   ARTHOUSE OPS / INTERNAL BRAND SYSTEM · v2.1 "CONTROL ROOM"
   The canonical stylesheet for every internal Arthouse surface:
   the ops hub, the executive dashboard, vault, tools, playbooks.

   WHAT'S OURS vs WHAT'S CANON:
   · OURS (internal only): the environment. Two themes (LIGHT default,
     DARK alt via [data-theme="dark"], toggle in the topbar), hairline
     borders, DM Mono for DATA VALUES ONLY (numbers, paths,
     timestamps), and BRAND ORANGE #FC4600 as the ops signal color in
     both themes. Orange says back-of-house; yellow stays on the
     consumer site.
   · CANON (verbatim from _Style System/arthouse-brand.css, rebuilt
     2026-07-02 from Tom's V2 guide): the full type scale
     (--ah-text-*), Universal Sans Display for display/body/UI/labels
     at V2 weights (Black 900 full-width; the 800/80%-stretch
     condensed treatment is RETIRED), Trade Gothic BoldCondTwenty for
     chips/tags/status ONLY, radii 6/5/4/14, flat buttons that lift
     on hover, brand + flavor hexes, canon paper neutrals for the
     light theme.
   If the consumer kit changes, re-sync the token block here.

   v1 2026-06-25 · v2 dark 2026-07-02 · v2.1 canon-aligned 2026-07-02
   v2.2 two themes + orange signal 2026-07-02
   v3 "EDITORIAL" 2026-07-09 · the DAM-brief editorial system ported
   from the Ops Editorial Restyle proto (Justino-approved): hard
   --ed-rule strokes (1.5px components / 2px section rules), chips in
   Universal Sans (TG retired on OPS surfaces per Justino 7-09; the
   consumer kit keeps TG), Black Tea house-pattern texture on the
   topbar, orange masthead bands (.ops-mast) on core pages, dark
   theme runs paper rules on ink (print-negative).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap');
/* DM Sans is FALLBACK ONLY (V2). DM Mono is the internal data face. */

@font-face {
  font-family: 'Universal Sans Display';
  src: url('UniversalSansDisplayGX.woff2') format('woff2-variations'),
       url('UniversalSansDisplayGX.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 50% 100%;
  font-style: normal;
  font-display: swap;
}
/* Trade Gothic LT Bold Condensed No. 20, the CANONICAL chip cut.
   Chips/tags/status eyebrow-chips/stepper numerals ONLY. */
@font-face {
  font-family: 'Trade Gothic Bold Cond';
  src: url('TradeGothicLT-BoldCondTwenty.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Core palette (canon) ── */
  --ah-yellow:        #FFE802;
  --ah-brand-orange:  #FC4600;
  --ah-ink:           #0A0A0A;
  --ah-ink-soft:      #232323;
  --ah-paper:         #FFFFFF;
  --ah-paper-2:       #F6F6F4;
  --ah-muted:         #6B6B6B;
  --ah-hairline:      #E8E6E1;
  --ah-warm-grey-2:   #D6D3CC;
  --ah-line:          #E8E6E1;
  --ah-line-strong:   #D6D3CC;
  --ah-g1:            #F5F5F3;
  --ah-g2:            #EBEBEA;

  /* ── Flavor palette (canon V2) ── */
  --ah-flavor-black-tea:   #0A0A0A;
  --ah-flavor-lemon-honey: #FECE00;
  --ah-flavor-mango:       #FF8300;
  --ah-flavor-peach:       #FE5466;
  --ah-flavor-raspberry:   #FD0367;
  --ah-flavor-tropical:    #24C1E2;
  --ah-accent-turquoise:   #06D6E6;
  --ah-accent-pink:        #FF2A8B;
  --ah-accent-sea-green:   #00B573;
  --ah-cyan:               #24C1E2;
  --ah-red:                #EE4323;  /* semantic placeholder (Tom hasn't specced) */
  --ah-green:              #00B573;  /* success on dark = Sea Green (semantic unspecced) */
  --ah-orange:             #FC4600;

  /* ── OPS SURFACES (internal only). Two themes, one accent. ──
     LIGHT is the default (paper, per canon neutrals). DARK is the
     control-room alt via [data-theme="dark"], toggle in the topbar.
     THE OPS ACCENT IS BRAND ORANGE #FC4600 in both themes: a
     different signal color than the consumer site's yellow, so you
     always know you're back-of-house. Yellow stays consumer-side. */
  --ops-accent:          #FC4600;
  --ops-accent-contrast: #FFFFFF;
  --ops-accent-soft:     rgba(252,70,0,.5);

  --ops-bg:           #F6F6F4;   /* canon paper-2 */
  --ops-bar:          #0A0A0A;   /* topbar stays ink in both themes */
  --ops-surface:      #FFFFFF;
  --ops-surface-2:    #F5F5F3;
  --ops-line:         #E8E6E1;   /* canon hairline */
  --ops-line-strong:  #D6D3CC;
  --ops-text:         #0A0A0A;
  --ops-text-dim:     #232323;
  --ops-muted:        #6B6B6B;
  --ops-faint:        #9A988F;

  /* v3 editorial rules: hard ink strokes light, paper strokes dark */
  --ed-rule:          #0A0A0A;
  --ed-rule-soft:     #D6D3CC;

  /* ── Radii (canon: 6 core / 5 button / 4 pill / 14 panel) ── */
  --ah-radius:        6px;
  --ah-radius-btn:    5px;
  --ah-radius-pill:   4px;
  --ah-radius-panel:  6px;   /* v3 editorial: cards square-ish like the brief (was 14px) */

  /* ── Spacing (canon 4px base) ── */
  --ah-s1: 4px;  --ah-s2: 8px;   --ah-s3: 12px; --ah-s4: 16px; --ah-s5: 24px;
  --ah-s6: 32px; --ah-s7: 48px;  --ah-s8: 64px;

  /* ── Motion ── */
  --ah-ease:         cubic-bezier(.2,.8,.2,1);
  --ah-shadow-hover: 0 6px 16px rgba(10,10,10,.14);  /* canon hover lift */

  /* ── TYPE SCALE (canon V2, the steps ops uses) ── */
  --ah-text-h1-size:             36px;   /* subsection heads. Black 900, upper */
  --ah-text-h1-lh:               40px;
  --ah-text-h1-tracking:         0.47px;
  --ah-text-h2-size:             26px;
  --ah-text-h2-lh:               24px;
  --ah-text-h2-tracking:         -0.26px;
  --ah-text-body-size:           16px;   /* Regular 400 */
  --ah-text-body-lh:             25px;
  --ah-text-body-tracking:       0.16px;
  --ah-text-card-title-size:     16px;   /* SemiBold 600 */
  --ah-text-card-title-lh:       22px;
  --ah-text-button-size:         13px;   /* Bold 700, upper, 1.08px */
  --ah-text-button-lh:           13px;
  --ah-text-button-tracking:     1.08px;
  --ah-text-eyebrow-size:        11px;   /* USD Bold, upper, 1.54px */
  --ah-text-eyebrow-lh:          13px;
  --ah-text-eyebrow-tracking:    1.54px;
  --ah-text-chip-size:           12px;   /* Trade Gothic, upper, 2.25px */
  --ah-text-chip-lh:             16px;
  --ah-text-chip-tracking:       2.25px;

  /* ── Families (canon roles + the internal data face) ── */
  --ah-display:     'Universal Sans Display', 'DM Sans', sans-serif;
  --ah-body:        'Universal Sans Display', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ah-font-chip:   'Universal Sans Display', 'DM Sans', sans-serif;  /* v3: ops chips run USD (Justino 7-09); TG stays consumer-side */
  --ah-mono:        'DM Mono', ui-monospace, Menlo, monospace;  /* DATA VALUES ONLY: numbers, paths, timestamps */

  --ops-topbar-h:  56px;
  color-scheme: light;
}

/* ── DARK THEME (the control-room alt) ── */
:root[data-theme="dark"] {
  --ops-bg:           #0E0E0D;
  --ops-surface:      #161614;
  --ops-surface-2:    #1C1C1A;
  --ops-line:         #262624;
  --ops-line-strong:  #3A3936;
  --ops-text:         #F4F3EF;
  --ops-text-dim:     #C9C7BF;
  --ops-muted:        #94928A;
  --ops-faint:        #5E5D57;
  --ed-rule:          #EDEBE4;
  --ed-rule-soft:     #3A3936;
  --ah-shadow-hover:  0 6px 16px rgba(0,0,0,.45);
  color-scheme: dark;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scrollbar-gutter:stable }  /* no horizontal shake when page length changes between views */
html,body{ height:100% }
body{
  font-family:var(--ah-body); font-weight:400; color:var(--ops-text);
  background:var(--ops-bg);
  font-size:14px; line-height:1.5; letter-spacing:var(--ah-text-body-tracking);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit }
::selection{ background:var(--ops-accent); color:var(--ops-accent-contrast) }

/* helpers */
.ops-disp{ font-family:var(--ah-display); font-weight:900; text-transform:uppercase; letter-spacing:.01em; line-height:.95 }
.ops-eyebrow{ font-family:var(--ah-display); font-weight:700; font-size:var(--ah-text-eyebrow-size); line-height:var(--ah-text-eyebrow-lh); letter-spacing:var(--ah-text-eyebrow-tracking); text-transform:uppercase; color:var(--ops-muted) }
.ops-mono{ font-family:var(--ah-mono); font-size:11px; letter-spacing:.02em }

/* ── TOPBAR + NAV ────────────────────────────────────────────── */
.ops-topbar{
  position:sticky; top:0; z-index:40;
  height:var(--ops-topbar-h);
  background:var(--ops-bar); color:#fff;
  /* v3: Black Tea house pattern, tone-on-tone under a heavy ink overlay */
  background-image:linear-gradient(rgba(10,10,10,.8), rgba(10,10,10,.8)), url('house-pattern-blacktea.webp');
  background-size:auto, 360px; background-repeat:repeat;
  border-bottom:0;  /* v3.1: the hairline read as a white stroke over the orange masthead */
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; gap:18px;
}
.ops-topbar__brand{ display:flex; align-items:center; gap:12px; flex:none }
.ops-topbar__logo{ height:18px; width:auto; display:block }
.ops-topbar__logo svg{ height:18px; width:auto; display:block }
.ops-topbar__tag{
  font-family:var(--ah-font-chip); font-weight:700;   /* status chip role = TG (canon) */
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ops-accent); padding-left:12px; border-left:1px solid rgba(255,255,255,.22);
}
.ops-nav{ display:flex; align-items:center; gap:2px; flex:1; justify-content:flex-start; margin-left:32px }
.ops-nav a, .ops-nav-trigger{
  font-family:var(--ah-display); font-weight:700;      /* USD Bold = canon UI */
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.6); text-decoration:none;
  padding:0 13px; height:var(--ops-topbar-h); transition:color .12s;  /* v3.1: full-height items, underline sits on the bar edge, dropdowns hang flush */
  background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
}
.ops-nav a:hover, .ops-nav-trigger:hover{ color:#fff }
.ops-nav a.active{ color:#fff; box-shadow:inset 0 -2px 0 #fff }  /* v3.2: white indicator; orange underline vanished against the orange masthead */
.ops-nav-trigger .caret{ font-size:8px; opacity:.65; transition:transform .12s }
/* ── GROUPED CATEGORIES (v3) ─────────────────────────────────── */
.ops-nav-group{ position:relative }
.ops-nav-group.active > .ops-nav-trigger{ color:#fff; box-shadow:inset 0 -2px 0 #fff }
.ops-nav-group.open > .ops-nav-trigger .caret{ transform:rotate(180deg) }
/* v3.1: no bubble. A square black slab hanging flush off the bar bottom,
   reads as an extension of the bar, not a floating tooltip. */
.ops-nav-dropdown{
  display:none; flex-direction:column; position:absolute; top:100%; left:0; margin-top:0;
  background:var(--ops-bar); border:0; border-radius:0; padding:4px 0 8px;
  min-width:210px; z-index:50; box-shadow:0 14px 28px rgba(0,0,0,.3);
}
.ops-nav-group.open > .ops-nav-dropdown{ display:flex }
.ops-nav-dropdown a{
  font-family:var(--ah-display); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.7); text-decoration:none; padding:12px 18px; border-radius:0; white-space:nowrap;
  height:auto;
}
.ops-nav-dropdown a:hover{ background:rgba(255,255,255,.06); color:var(--ops-accent) }
.ops-nav-dropdown a.active{ color:#fff; box-shadow:inset 3px 0 0 var(--ops-accent) }
/* ── SUB-NAV ─────────────────────────────────────────────────── */
.ops-subnav{ background:var(--ops-bg); border-bottom:1px solid var(--ops-line); padding:11px 22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; position:sticky; top:var(--ops-topbar-h); z-index:30 }
.ops-subnav a{ color:var(--ops-text); text-decoration:none; font-family:var(--ah-display); font-weight:700; text-transform:uppercase; letter-spacing:.09em; font-size:11px; opacity:.55; padding:4px 0; transition:opacity .12s }
.ops-subnav a:hover{ opacity:1 }
.ops-subnav a.active{ opacity:1; box-shadow:inset 0 -2px 0 var(--ops-accent) }
.ops-subnav .sep{ flex:1 }
.ops-subnav .muted{ opacity:.5; font-size:11px; font-weight:400; letter-spacing:0; text-transform:none }
.ops-acct{ display:flex; align-items:center; gap:10px; flex:none; font-size:11px }
.ops-acct__who{ color:rgba(255,255,255,.65); font-family:var(--ah-mono); font-size:11px; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ops-acct__out{ color:rgba(255,255,255,.45); text-decoration:none; text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-weight:700; font-family:var(--ah-display) }
.ops-acct__out:hover{ color:#fff }
.ops-theme-btn{ background:transparent; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:rgba(255,255,255,.75); width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; line-height:1; cursor:pointer; transition:color .12s, border-color .12s }
.ops-theme-btn:hover{ color:#fff; border-color:rgba(255,255,255,.6) }
.ops-nav-toggle{ display:none }
@media(max-width:780px){
  /* 7-10: desktop padding (22px) + gaps (18px) summed to ~1-3px past a 375px
     viewport, pushing .ops-acct over the edge (horizontal scroll). Tighten both. */
  .ops-topbar{ padding:0 14px; gap:10px }
  .ops-nav{ position:absolute; top:var(--ops-topbar-h); left:0; right:0; max-height:calc(100vh - var(--ops-topbar-h)); overflow-y:auto; background:var(--ops-bar); flex-direction:column; align-items:stretch; padding:8px 14px 14px; gap:2px; display:none; margin-left:0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14) }
  .ops-nav.open{ display:flex }
  .ops-nav a{ padding:13px 12px; min-height:44px; height:auto }
  .ops-nav-toggle{ display:inline-flex; background:none; border:0; color:#fff; font-size:20px; cursor:pointer; flex:none; min-width:44px; min-height:44px; align-items:center; justify-content:center }
  .ops-acct__who{ display:none }
  /* Categories become accordion rows instead of hover dropdowns. */
  .ops-nav-group{ position:static }
  .ops-nav-trigger{ width:100%; justify-content:space-between; padding:13px 12px; min-height:44px; height:auto }
  .ops-nav-dropdown{ position:static; display:none; margin:0 0 4px; padding:0 0 0 12px; border:0; border-radius:0; background:none; box-shadow:none; min-width:0; box-sizing:border-box }
  .ops-nav-group.open > .ops-nav-dropdown{ display:flex }
  .ops-nav-dropdown a{ padding:12px; min-height:44px; color:rgba(255,255,255,.6) }
  .ops-nav-dropdown a:hover, .ops-nav-dropdown a.active{ background:rgba(255,255,255,.06) }
}

/* ── LAYOUT ──────────────────────────────────────────────────── */
.ops-wrap{ max-width:1180px; margin:0 auto; padding:0 22px 80px }
.ops-wrap--narrow{ max-width:940px }
.ops-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; padding:32px 0 18px }
.ops-head h1{ font-family:var(--ah-display); font-weight:900; font-size:var(--ah-text-h1-size); line-height:calc(var(--ah-text-h1-lh) / var(--ah-text-h1-size)); letter-spacing:var(--ah-text-h1-tracking); text-transform:uppercase; color:var(--ops-text) }
.ops-head .sub{ font-size:13px; color:var(--ops-muted); margin-top:8px; max-width:64ch }
.ops-head .meta{ text-align:right; font-family:var(--ah-mono); font-size:11px; color:var(--ops-muted) }
.ops-head .meta b{ color:var(--ops-text); font-weight:500 }

/* ── DOORS STRIP (overview): the three front doors ───────────── */
.ops-doors{ display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 8px }
.ops-door{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; background:var(--ops-surface); border:1.5px solid var(--ed-rule); border-radius:var(--ah-radius); padding:9px 14px; font-family:var(--ah-display); font-weight:700; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ops-text); transition:transform .15s var(--ah-ease) }
a.ops-door:hover{ transform:translateY(-2px) }
.ops-door .k{ font-family:var(--ah-font-chip); font-weight:700; font-size:10px; letter-spacing:.14em; color:var(--ops-muted) }
.ops-door.here{ background:var(--ah-ink); border-color:var(--ah-ink); color:#fff; cursor:default }
:root[data-theme="dark"] .ops-door.here{ border-color:var(--ed-rule) }
.ops-door.here .k{ color:var(--ops-accent) }

/* ── BANNER ──────────────────────────────────────────────────── */
.ops-banner{ display:flex; align-items:center; gap:12px; background:var(--ops-surface); border:1.5px solid var(--ed-rule); border-left:6px solid var(--ops-accent); border-radius:var(--ah-radius); padding:12px 16px; margin:6px 0 26px; font-size:12.5px; color:var(--ops-text-dim) }
.ops-banner b{ color:var(--ops-text) }
.ops-banner.live{ border-left-color:var(--ah-green) }
.ops-banner .dot{ width:9px; height:9px; border-radius:50%; background:var(--ops-accent); flex:none }
.ops-banner.live .dot{ background:var(--ah-green) }

/* ── KPI CARDS ───────────────────────────────────────────────── */
.ops-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px }
.ops-kpi{ background:var(--ops-surface); border:1.5px solid var(--ed-rule); border-radius:var(--ah-radius-panel); padding:16px 16px 15px }
.ops-kpi .k-lab{ font-family:var(--ah-display); font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ops-muted) }
.ops-kpi .k-val{ font-family:var(--ah-display); font-weight:900; font-size:30px; line-height:1; letter-spacing:.02em; margin:9px 0 6px; color:var(--ops-text) }
.ops-kpi .k-meta{ font-size:11px; color:var(--ops-muted) }
.ops-kpi .k-src{ display:inline-block; margin-top:8px; font-family:var(--ah-mono); font-size:9px; letter-spacing:.05em; color:var(--ops-faint); text-transform:uppercase }

/* ── PANELS ──────────────────────────────────────────────────── */
.ops-sections{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
.ops-panel{ background:var(--ops-surface); border:1.5px solid var(--ed-rule); border-radius:var(--ah-radius-panel); padding:18px 18px 16px; grid-column:span 6 }
.ops-panel.wide{ grid-column:span 12 }
.ops-panel.third{ grid-column:span 4 }
.ops-panel.eight{ grid-column:span 8 }
.ops-panel h2{ font-family:var(--ah-display); font-weight:900; font-size:16px; text-transform:uppercase; letter-spacing:.03em; display:flex; align-items:center; gap:9px; color:var(--ops-text) }
.ops-panel .pill{ font-family:var(--ah-font-chip); font-weight:700; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ops-muted); background:var(--ops-surface-2); border:1.5px solid var(--ed-rule-soft); border-radius:999px; padding:3px 9px }
.ops-panel .ph{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
.ops-chart{ position:relative; height:180px }
.ops-chart.sm{ height:140px }

/* ── ROWS / MINI TABLE ───────────────────────────────────────── */
.ops-rows{ display:flex; flex-direction:column }
.ops-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--ops-line); font-size:13px }
.ops-row:last-child{ border-bottom:0 }
.ops-row .r-name{ font-weight:500; color:var(--ops-text-dim) }
.ops-row .r-val{ font-family:var(--ah-mono); font-size:12px; color:var(--ops-muted) }
.ops-bar{ height:6px; border-radius:999px; background:var(--ops-surface-2); overflow:hidden; flex:1; margin:0 12px; max-width:160px }
.ops-bar i{ display:block; height:100%; background:var(--ops-accent) }

/* ── STATUS CHIPS (Trade Gothic territory, canon) ────────────── */
.ops-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--ah-font-chip); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:3px 10px; border-radius:999px; border:1.5px solid var(--ed-rule-soft); color:var(--ops-muted) }
.ops-chip.done{ border-color:rgba(0,181,115,.5); color:var(--ah-accent-sea-green) }
.ops-chip.prog{ border-color:rgba(36,193,226,.5); color:var(--ah-flavor-tropical) }
.ops-chip.pend{ color:var(--ops-muted) }
.ops-chip .d{ width:7px; height:7px; border-radius:50%; background:currentColor }

/* ── PIPELINE STAGES (stepper numerals = TG, canon) ──────────── */
.ops-stagebar{ display:flex; gap:6px; margin:4px 0 14px }
.ops-stage{ flex:1; text-align:center; font-family:var(--ah-font-chip); font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ops-muted); background:var(--ops-surface-2); border:1px solid var(--ops-line); border-radius:var(--ah-radius); padding:6px 4px }

/* ── BUTTON (canon: flat at rest, lift on hover, USD Bold 13, 5px) ── */
.ops-btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--ah-display); font-weight:700; text-transform:uppercase; font-size:var(--ah-text-button-size); line-height:var(--ah-text-button-lh); letter-spacing:var(--ah-text-button-tracking); color:var(--ops-accent-contrast); background:var(--ops-accent); border:1.5px solid transparent; border-radius:var(--ah-radius-btn); padding:14px 22px; cursor:pointer; text-decoration:none; transition:all .2s var(--ah-ease); box-shadow:none }
.ops-btn:hover{ transform:translateY(-2px); box-shadow:var(--ah-shadow-hover) }
.ops-btn:active{ transform:translateY(0); box-shadow:none }
.ops-btn--secondary,
.ops-btn--outline{ background:transparent; color:var(--ops-text); border-color:var(--ops-line-strong) }
.ops-btn--secondary:hover,
.ops-btn--outline:hover{ border-color:var(--ops-text) }
.ops-btn--alert{ background:var(--ah-red); color:#fff; border-color:var(--ah-red) }

/* ── CARDS (hub) ─────────────────────────────────────────────── */
.ops-cardgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:14px 0 }
.ops-card{ display:block; text-decoration:none; color:inherit; background:var(--ops-surface); border:1.5px solid var(--ed-rule); border-radius:var(--ah-radius-panel); padding:20px 22px; transition:background .12s var(--ah-ease), transform .2s var(--ah-ease), box-shadow .2s var(--ah-ease) }
.ops-card:hover{ background:var(--ops-surface-2); transform:translateY(-2px); box-shadow:var(--ah-shadow-hover) }
.ops-card.feature{ grid-column:span 2 }
.ops-card .tag{ display:inline-block; font-family:var(--ah-font-chip); font-weight:700; font-size:10px; letter-spacing:.12em; text-transform:uppercase; background:var(--ah-ink); color:#fff; padding:4px 10px; border-radius:999px }
:root[data-theme="dark"] .ops-card .tag{ background:var(--ed-rule); color:var(--ah-ink) }
.ops-card h3{ font-family:var(--ah-display); font-weight:900; font-size:22px; letter-spacing:.01em; text-transform:uppercase; margin:8px 0 8px; color:var(--ops-text) }
.ops-card.feature h3{ font-size:var(--ah-text-h2-size) }
.ops-card p{ font-size:13px; color:var(--ops-muted) }
.ops-card .go{ display:inline-block; margin-top:14px; font-family:var(--ah-display); font-weight:700; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ops-accent) }
.ops-card.soon{ opacity:.5 } .ops-card.soon .go{ color:var(--ops-muted) }

/* ── PILLAR BLOCKS (overview) ────────────────────────────────── */
.ops-wrap{ counter-reset:opsPillar }
.ops-pillar{ margin:34px 0 6px; padding-bottom:10px; border-bottom:2px solid var(--ed-rule); display:flex; align-items:baseline; gap:14px; flex-wrap:wrap }
.ops-pillar::before{ counter-increment:opsPillar; content:counter(opsPillar, decimal-leading-zero); font-family:var(--ah-display); font-weight:900; font-size:13px; letter-spacing:.1em; color:var(--ops-muted) }
.ops-pillar__name{ font-family:var(--ah-display); font-weight:900; font-size:26px; letter-spacing:.02em; text-transform:uppercase; color:var(--ops-text) }
.ops-pillar__q{ font-size:12.5px; color:var(--ops-muted) }
.ops-pillar__state{ margin-left:auto }
.ops-next{ font-size:12px; color:var(--ops-faint); margin:2px 0 8px }
.ops-next b{ color:var(--ops-muted); font-weight:600 }

.ops-sectionlab{ font-family:var(--ah-display); font-weight:700; font-size:var(--ah-text-eyebrow-size); letter-spacing:var(--ah-text-eyebrow-tracking); text-transform:uppercase; color:var(--ops-muted); margin:26px 0 4px; padding-bottom:8px; border-bottom:2px solid var(--ed-rule) }
[id]{ scroll-margin-top:calc(var(--ops-topbar-h) + 16px) }  /* anchors land below the sticky topbar */
.ops-foot__links{ margin-top:34px; padding-top:18px; border-top:2px solid var(--ed-rule); display:flex; flex-wrap:wrap; gap:6px 22px }
.ops-foot__links a{ font-family:var(--ah-display); font-weight:700; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ops-muted); text-decoration:none; transition:color .12s }
.ops-foot__links a:hover{ color:var(--ops-accent) }
.ops-foot__links + .ops-foot{ margin-top:14px; padding-top:0; border-top:0 }
.ops-empty{ font-size:12.5px; color:var(--ops-muted); font-style:italic; padding:10px 0 }
.ops-foot{ margin-top:34px; padding-top:18px; border-top:2px solid var(--ed-rule); font-family:var(--ah-mono); font-size:10px; color:var(--ops-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px }

/* ── LOG ENTRIES (status log) ────────────────────────────────── */
.logentry{ background:var(--ops-surface); border:1.5px solid var(--ed-rule); border-radius:var(--ah-radius-panel); padding:20px 22px; margin-bottom:16px }
.logentry .meta{ font-family:var(--ah-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ops-muted); margin-bottom:12px; font-weight:500 }
.logentry h1,.logentry h2,.logentry h3{ font-family:var(--ah-display); font-weight:700; font-size:14px; margin:14px 0 8px; color:var(--ops-text); text-transform:none; letter-spacing:0; line-height:1.3 }
.logentry p,.logentry li{ font-size:13.5px; line-height:1.55; color:var(--ops-text-dim) }
.logentry ul{ margin:6px 0 8px 18px }
.logentry strong{ font-weight:600; color:var(--ops-text) }
.logentry code{ font-family:var(--ah-mono); font-size:12px; background:var(--ops-surface-2); border:1px solid var(--ops-line); border-radius:4px; padding:1px 5px }
.logempty{ color:var(--ops-muted); font-size:14px }

@media(max-width:900px){ .ops-kpis{ grid-template-columns:repeat(2,1fr) } .ops-panel,.ops-panel.third,.ops-panel.eight{ grid-column:span 12 } .ops-card.feature{ grid-column:span 2 } }
@media(max-width:560px){ .ops-wrap{ padding:0 14px 60px } .ops-kpis{ grid-template-columns:1fr } .ops-cardgrid{ grid-template-columns:1fr } .ops-card.feature{ grid-column:span 1 } .ops-head{ flex-direction:column; align-items:flex-start } .ops-head .meta{ text-align:left } .ops-pillar__state{ margin-left:0 } }

/* ── MASTHEAD (v3 editorial band, core pages) ────────────────── */
.ops-mast{ background:var(--ops-accent); color:var(--ah-ink); border-bottom:2px solid var(--ah-ink); padding:38px 0 26px }
.ops-mast__in{ max-width:1180px; margin:0 auto; padding:0 22px }
.ops-mast__in--narrow{ max-width:940px }
.ops-mast__eyebrow{ font-family:var(--ah-display); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:14px }
.ops-mast h1{ font-family:var(--ah-display); font-weight:900; font-size:clamp(34px, 5.5vw, 54px); line-height:.94; letter-spacing:-.01em; text-transform:uppercase; color:var(--ah-ink) }
.ops-mast__deck{ font-size:13.5px; font-weight:500; margin-top:12px; max-width:66ch; line-height:1.45 }
.ops-mast__deck b{ font-weight:700 }
.ops-mast__meta{ border-top:1.5px solid var(--ah-ink); margin-top:22px; padding-top:12px; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase }
.ops-mast__meta b{ font-weight:700 }
@media(max-width:560px){ .ops-mast{ padding:28px 0 20px } .ops-mast__in{ padding:0 14px } }
.ops-mast + .ops-wrap{ padding-top:26px }  /* content clears the band on mast pages (ops-head used to carry this) */

/* placeholder so the bar area never jumps even before JS runs (v3: same texture, no flash) */
#ops-nav{
  height:var(--ops-topbar-h); background:var(--ops-bar); display:block;
  background-image:linear-gradient(rgba(10,10,10,.8), rgba(10,10,10,.8)), url('house-pattern-blacktea.webp');
  background-size:auto, 360px; background-repeat:repeat;
}