/* ═══════════════════════════════════════════════════════════════
   ARTHOUSE OPS — INTERNAL BRAND SYSTEM
   The canonical stylesheet for every internal Arthouse surface:
   the ops hub, the executive dashboard, tools, playbooks, docs.

   Derived from the consumer style system (source of truth):
     02 Brand/Brand Guidelines/_Style System/arthouse-brand.css
   Tokens (color, radii, shadow, type) are copied verbatim from there.
   What's added here is the INTERNAL CHROME ONLY — the dark "control
   room" topbar + nav, dashboard panels, KPI cards, tables — i.e. the
   parts the consumer storefront doesn't have.

   Rule: internal tools link THIS file. They do not re-invent tokens,
   colors, radii, or fonts. If the consumer brand changes, update the
   :root block here to match arthouse-brand.css.

   v1 — 2026-06-25
   ═══════════════════════════════════════════════════════════════ */

@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');

/* Universal Sans Display — self-hosted variable font (woff2, 179KB).
   Canonical display face. Set explicit weight 700-800 + stretch 78%
   on display text or the variable font defaults thin/wide. */
@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;
}

:root {
  /* ── Brand accents (Style Guide V2.0 · 2026-05-29) ── */
  --ah-brand-orange:  #FC4600;   /* THE brand accent — emotional moments, brand identity. Use sparingly. */
  --ah-yellow:        #FFE802;   /* Accent Yellow — primary CTAs */
  --ah-yellow-shadow: #C9B400;   /* depth (legacy; V2 buttons are flat) */

  /* ── Flavor / can-coded accents (V2.0 swatches) ── */
  --ah-lemon-honey:   #FECE00;
  --ah-peach:         #FE5466;
  --ah-mango:         #FF8300;
  --ah-raspberry:     #FD0367;
  --ah-tropical:      #24C1E2;
  --ah-turquoise:     #06D6E6;
  --ah-pink:          #FF2A8B;
  --ah-sea-green:     #00B573;
  --ah-red:           #EE4323;   /* alert */
  --ah-green:         #00B573;   /* success (Sea Green) */

  /* legacy aliases — keep so older rules don't break */
  --ah-cyan:          #24C1E2;
  --ah-orange:        #FC4600;   /* generic "orange" now resolves to Brand Orange */

  /* ── Neutrals ── */
  --ah-ink:           #0A0A0A;
  --ah-paper:         #FFFFFF;
  --ah-paper-2:       #F6F6F4;
  --ah-g1:            #F5F5F3;
  --ah-g2:            #EBEBEA;
  --ah-line:          #E8E6E1;
  --ah-line-strong:   #D6D3CC;
  --ah-muted:         #6B6B6B;

  /* ── Radii (verbatim) ── */
  --ah-radius:        6px;    /* V2 core radius — buttons, small elements */
  --ah-radius-pill:   999px;  /* V2 badges are full pills */
  --ah-radius-panel:  8px;    /* V2 cards/panels (~6.7–8.4px), was 14px */

  /* ── Shadow / motion (verbatim) ── */
  --ah-shadow-card:  0 1px 0 rgba(17,17,17,.04), 0 8px 24px -16px rgba(17,17,17,.18);
  --ah-shadow-soft:  0 2px 24px rgba(0,0,0,.06);
  --ah-ease:         cubic-bezier(.2,.8,.2,1);

  /* ── Type (verbatim) ── */
  --ah-display:    'Universal Sans Display', 'Trade Gothic Bold Cond', 'Bebas Neue', sans-serif;
  --ah-body:       'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ah-mono:       'DM Mono', ui-monospace, Menlo, monospace;

  /* ── Internal chrome only ── */
  --ops-topbar-h:  56px;
  color-scheme: light;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ height:100% }
body{
  font-family:var(--ah-body); color:var(--ah-ink);
  background:var(--ah-paper-2); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit }

/* helpers */
.ops-disp{ font-family:var(--ah-display); font-weight:800; font-stretch:78%; text-transform:uppercase; letter-spacing:.01em; line-height:.95 }
.ops-eyebrow{ font-size:10px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--ah-muted) }
.ops-mono{ font-family:var(--ah-mono); font-size:11px; letter-spacing:.02em }

/* ── TOPBAR + NAV (the internal "control room" header) ───────── */
.ops-topbar{
  position:sticky; top:0; z-index:40;
  height:var(--ops-topbar-h);
  background:var(--ah-ink); color:#fff;
  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__tag{
  font-family:var(--ah-display); font-weight:700; font-stretch:78%;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ah-yellow); padding-left:12px; border-left:1px solid rgba(255,255,255,.22);
}
.ops-nav{ display:flex; align-items:center; gap:4px; flex:1; justify-content:flex-start; margin-left:32px }
.ops-nav a{
  font-family:var(--ah-display); font-weight:700; font-stretch:80%;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.72); text-decoration:none;
  padding:8px 14px; border-radius:var(--ah-radius); transition:color .12s, background .12s;
}
.ops-nav a:hover{ color:#fff; background:rgba(255,255,255,.07) }
.ops-nav a.active{ color:var(--ah-ink); background:var(--ah-yellow) }
.ops-acct{ display:flex; align-items:center; gap:10px; flex:none; font-size:11px }
.ops-acct__who{ color:rgba(255,255,255,.8); 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,.55); text-decoration:none; text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-weight:800 }
.ops-acct__out:hover{ color:#fff }
.ops-nav-toggle{ display:none }
@media(max-width:780px){
  .ops-nav{ position:absolute; top:var(--ops-topbar-h); left:0; right:0; background:var(--ah-ink); flex-direction:column; align-items:stretch; padding:8px 14px 14px; gap:2px; display:none; border-top:1px solid rgba(255,255,255,.1) }
  .ops-nav.open{ display:flex }
  .ops-nav a{ padding:11px 12px }
  .ops-nav-toggle{ display:inline-flex; background:none; border:0; color:#fff; font-size:20px; cursor:pointer; flex:none }
  .ops-acct__who{ display:none }
}

/* ── 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:30px 0 18px }
.ops-head h1{ font-family:var(--ah-display); font-weight:800; font-stretch:80%; font-size:clamp(32px,5vw,54px); text-transform:uppercase; line-height:.9; letter-spacing:-.01em }
.ops-head .sub{ font-size:13px; color:var(--ah-muted); margin-top:8px; max-width:64ch }
.ops-head .meta{ text-align:right; font-size:11px; color:var(--ah-muted) }
.ops-head .meta b{ color:var(--ah-ink) }

/* ── BANNER ──────────────────────────────────────────────────── */
.ops-banner{ display:flex; align-items:center; gap:12px; background:#FFFBD6; border:1.5px solid var(--ah-yellow); border-left:8px solid var(--ah-yellow); border-radius:var(--ah-radius); padding:12px 16px; margin:6px 0 26px; font-size:12.5px }
.ops-banner.live{ background:#F0FCE4; border-color:var(--ah-green); border-left-color:var(--ah-green) }
.ops-banner .dot{ width:9px; height:9px; border-radius:50%; background:var(--ah-orange); 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(--ah-paper); border:1.5px solid var(--ah-line); border-radius:var(--ah-radius-panel); padding:16px 16px 15px; box-shadow:var(--ah-shadow-card) }
.ops-kpi .k-lab{ font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ah-muted) }
.ops-kpi .k-val{ font-family:var(--ah-display); font-weight:800; font-stretch:80%; font-size:30px; line-height:1; margin:9px 0 6px }
.ops-kpi .k-meta{ font-size:11px; color:var(--ah-muted) }
.ops-kpi .k-src{ display:inline-block; margin-top:8px; font-family:var(--ah-mono); font-size:9px; letter-spacing:.05em; color:#9a988f; text-transform:uppercase }

/* ── PANELS ──────────────────────────────────────────────────── */
.ops-sections{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
.ops-panel{ background:var(--ah-paper); border:1.5px solid var(--ah-line); border-radius:var(--ah-radius-panel); padding:18px 18px 16px; box-shadow:var(--ah-shadow-card); 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:800; font-stretch:80%; font-size:18px; text-transform:uppercase; letter-spacing:.01em; display:flex; align-items:center; gap:9px }
.ops-panel .pill{ font-family:var(--ah-mono); font-size:9px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ah-muted); background:var(--ah-paper-2); border:1px solid var(--ah-line); border-radius:var(--ah-radius-pill); padding:2px 8px }
.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(--ah-line); font-size:13px }
.ops-row:last-child{ border-bottom:0 }
.ops-row .r-name{ font-weight:600 }
.ops-row .r-val{ font-family:var(--ah-mono); font-size:12px; color:var(--ah-muted) }
.ops-bar{ height:7px; border-radius:var(--ah-radius-pill); background:var(--ah-paper-2); overflow:hidden; flex:1; margin:0 12px; max-width:160px }
.ops-bar i{ display:block; height:100%; background:var(--ah-cyan) }

/* ── STATUS CHIPS ────────────────────────────────────────────── */
.ops-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:var(--ah-radius-pill); border:1px solid var(--ah-line-strong) }
.ops-chip.done{ background:#F0FCE4; border-color:#cdeeb0; color:#3b7a16 }
.ops-chip.prog{ background:#E7F8FF; border-color:#bfe7f5; color:#0b7ea3 }
.ops-chip.pend{ background:var(--ah-paper-2); color:var(--ah-muted) }
.ops-chip .d{ width:7px; height:7px; border-radius:50%; background:currentColor }

/* ── PIPELINE STAGES ─────────────────────────────────────────── */
.ops-stagebar{ display:flex; gap:6px; margin:4px 0 14px }
.ops-stage{ flex:1; text-align:center; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ah-muted); background:var(--ah-paper-2); border:1px solid var(--ah-line); border-radius:var(--ah-radius); padding:6px 4px }

/* ── BUTTON (boxed depth, the brand signature) ───────────────── */
/* V2.0 buttons: FLAT (no 3D depth), 13px USD Bold uppercase, ~1.1px tracking, trailing → */
.ops-btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--ah-display); font-weight:700; font-stretch:80%; text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:var(--ah-ink); background:var(--ah-yellow); border:0; border-radius:var(--ah-radius); padding:14px 22px; cursor:pointer; text-decoration:none; transition:filter .12s }
.ops-btn:hover{ filter:brightness(.96) }
.ops-btn--secondary{ background:var(--ah-ink); color:#fff }
.ops-btn--outline{ background:var(--ah-paper); color:var(--ah-ink); border:1px solid var(--ah-ink) }
.ops-btn--alert{ background:var(--ah-red); color:#fff }

/* ── CARDS (hub) ─────────────────────────────────────────────── */
.ops-cardgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:14px 0 }
.ops-card{ display:block; text-decoration:none; color:inherit; background:var(--ah-paper); border:1.5px solid var(--ah-line); border-radius:var(--ah-radius-panel); padding:22px; box-shadow:var(--ah-shadow-card); transition:transform .12s var(--ah-ease), box-shadow .12s var(--ah-ease) }
.ops-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px -16px rgba(17,17,17,.3) }
.ops-card.feature{ grid-column:span 2; border:2px solid var(--ah-ink) }
.ops-card .tag{ font-family:var(--ah-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ah-muted) }
.ops-card h3{ font-family:var(--ah-display); font-weight:800; font-stretch:80%; font-size:24px; text-transform:uppercase; margin:8px 0 8px }
.ops-card.feature h3{ font-size:30px }
.ops-card p{ font-size:13px; color:var(--ah-muted) }
.ops-card .go{ display:inline-block; margin-top:14px; font-weight:800; font-size:12px; letter-spacing:.04em; text-transform:uppercase }
.ops-card.soon{ opacity:.6 } .ops-card.soon .go{ color:var(--ah-muted) }

.ops-sectionlab{ font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ah-muted); margin:26px 0 4px }
.ops-empty{ font-size:12.5px; color:var(--ah-muted); font-style:italic; padding:10px 0 }
.ops-foot{ margin-top:34px; padding-top:18px; border-top:1px solid var(--ah-line); font-size:11px; color:var(--ah-muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px }

@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-nav{height:var(--ops-topbar-h);background:var(--ah-ink);display:block}