/* ═══ OPS GLASS ═══ the ONE stylesheet for the Ops Hub.
   Replaces vaph-canon.css (plan: plans/2026-11-05-ops-hub-glass-ui.md).
   Brand: Agency Handoff brief v2026-10 (03-marketing/agency-handoff-brand-guide/).
   Design language: glassmorphism on brand tokens. Montserrat headings and numbers,
   Inter body, no Orbitron, no glow. Two brand buttons: gradient primary, teal secondary;
   everything else is quiet chrome derived from the secondary.
   Theming: html[data-theme="dark"|"light"], same mechanism as before (theme-init.js).
   The [style*=...] guard selectors stay until Phase 4 removes inline styles. */

/* ─── Fonts (local, no Google Fonts requests) ─── */
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/Montserrat-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

/* Brand: no Orbitron in apps. Pages still naming it render Montserrat until their CSS is ported. */
@font-face {
  font-family: 'Orbitron';
  src: url('/assets/fonts/Montserrat-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

/* ─── Brand constants (theme-independent) ─── */
:root {
  --ah-cyan: #00E9DC;        /* accent, lines, icons; text only on dark */
  --ah-teal-mid: #00A88F;    /* chart series, active nav bar */
  --ah-green: #00702F;
  --ah-gold: #FFDE59;        /* highlight on dark */
  --ah-orange: #F8882E;      /* highlight on light */
  --ah-accent-on-light: #008F86;
  --ah-teal-btn: #0E8377;    /* secondary button, active pills */
  --ah-ink: #14181A;
  --ah-muted-light: #5F6B66;
  --ah-red: #C62828;         /* late, missed, at risk only */
  --ah-paper-yellow: #FFF6C8;
  --ah-logo-gradient: linear-gradient(135deg, #00E9DC 0%, #00A88F 50%, #00702F 100%);
  --ah-hero-gradient: linear-gradient(135deg, #00B3A6 0%, #00916F 55%, #00702F 100%);
  --ah-btn-gradient: linear-gradient(90deg, #FFFF00 0%, #00FFFF 100%);
  --font-head: 'Montserrat', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-num: 'Montserrat', -apple-system, sans-serif;
  /* motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  /* ONE button height everywhere; the compact height exists only inside table rows */
  --btn-h: 38px;
  --btn-h-row: 28px;
}

/* ─── Theme tokens: DARK (default) ─── */
:root,
html[data-theme="dark"] {
  --c-bg: #0A1514;                              /* content background */
  --c-menu: #142927;                            /* sidebar, always dark in both themes */
  --c-card-solid: #1A3331;
  --c-card: rgba(26, 51, 49, 0.55);             /* glass card fill */
  --c-sticky-cell: #122422;                     /* opaque bg for sticky table columns, must stay solid */
  --c-border: #263A38;
  --c-border-soft: rgba(227, 236, 234, 0.10);
  --c-text: #E3ECEA;
  --c-text-70: rgba(227, 236, 234, 0.72);
  --c-text-50: rgba(227, 236, 234, 0.55);
  --c-menu-text: #A0B2AE;
  --c-accent: var(--ah-cyan);                   /* active tab / accent text on dark */
  --c-teal: var(--ah-teal-mid);
  --c-highlight: var(--ah-gold);
  --c-attention: #D09D46;
  --c-success: color-mix(in srgb, var(--ah-green), #ffffff 52%);
  --c-warn: color-mix(in srgb, #8A5A00, #ffffff 48%);
  --c-danger: color-mix(in srgb, var(--ah-red), #ffffff 38%);
  --c-donut-track: #2B4441;
  /* liquid glass recipe: a frosted pane needs colour behind it (see --ambient) to read as glass.
     Depth comes from layered insets: bright top rim, soft inner top light, inner bottom shade. */
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 100%);
  --glass-bg-raised: linear-gradient(180deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0.07) 100%);
  --glass-blur: 24px;
  --glass-saturate: 1.8;
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 12px 22px -16px rgba(255, 255, 255, 0.40),
    inset 0 -12px 20px -16px rgba(0, 0, 0, 0.55);
  --glass-shadow-raised:
    0 20px 50px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 14px 24px -16px rgba(255, 255, 255, 0.50),
    inset 0 -14px 22px -16px rgba(0, 0, 0, 0.55);
  /* gel: the glossy filled pill for active tab, active menu item, secondary button */
  --gel-bg: linear-gradient(180deg, #1FA898 0%, #0E8377 52%, #09665D 100%);
  --gel-shadow:
    0 6px 16px rgba(0, 30, 27, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 9px 12px -9px rgba(255, 255, 255, 0.50),
    inset 0 -3px 8px rgba(0, 0, 0, 0.22);
  --overlay: rgba(4, 12, 11, 0.62);
  /* main panel: frosted but calm, so text never sits on the bright background art */
  --reading-surface: rgba(8, 20, 24, 0.58);
  /* shape */
  --c-radius-card: 16px;
  --c-radius-pill: 999px;
  --c-radius-input: 8px;
  --c-radius-btn: 8px;
  --c-radius-cta: 12px;
  /* spacing scale (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  /* page / view rhythm */
  --ops-page-max: 1280px;
  --ops-page-pad-x: 28px;
  --ops-page-pad-top: 22px;
  --ops-page-pad-bot: 40px;
  --ops-view-pad: var(--ops-page-pad-top) var(--ops-page-pad-x) var(--ops-page-pad-bot);
  --ops-card-pad: var(--space-4);
  --ops-grid-gap: var(--space-4);
  --ops-section-gap: var(--space-6);
  --sidebar-w: 260px;
  /* liquid background artwork: glass needs real colour behind it to read as glass */
  --ambient: url('/assets/glass-bg-dark.svg') center / cover no-repeat;
}

/* ─── Theme tokens: LIGHT ─── */
html[data-theme="light"] {
  --c-bg: #F1F6F5;
  --c-card-solid: #FFFFFF;
  --c-card: rgba(255, 255, 255, 0.66);
  --c-sticky-cell: #FFFFFF;
  --c-border: #E2ECEC;
  --c-border-soft: rgba(20, 24, 26, 0.10);
  --c-text: #14181A;
  --c-text-70: rgba(20, 24, 26, 0.74);
  --c-text-50: rgba(20, 24, 26, 0.56);
  --c-accent: var(--ah-teal-btn);               /* active tab on light */
  --c-highlight: var(--ah-orange);
  --c-attention: #8A5A00;
  --c-success: var(--ah-green);
  --c-warn: #8A5A00;
  --c-danger: #B42318;
  --c-donut-track: #D5E3E1;
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.36) 100%);
  --glass-bg-raised: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.55) 100%);
  --glass-blur: 24px;
  --glass-saturate: 1.7;
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-shadow:
    0 12px 32px rgba(10, 60, 55, 0.14),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 12px 22px -14px rgba(255, 255, 255, 0.95),
    inset 0 -12px 20px -14px rgba(0, 80, 72, 0.20);
  --glass-shadow-raised:
    0 22px 48px rgba(10, 60, 55, 0.20),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 14px 24px -14px rgba(255, 255, 255, 1),
    inset 0 -14px 22px -14px rgba(0, 80, 72, 0.22);
  --gel-shadow:
    0 6px 16px rgba(10, 80, 72, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    inset 0 9px 12px -9px rgba(255, 255, 255, 0.55),
    inset 0 -3px 8px rgba(0, 0, 0, 0.18);
  --overlay: rgba(14, 26, 24, 0.42);
  --reading-surface: rgba(244, 249, 248, 0.52);
  --ambient: url('/assets/glass-bg-light.svg') center / cover no-repeat;
  /* page-local token names: pages declare these in their own :root, and
     html[data-theme="light"] outranks :root, so light wins without editing
     the page. Add a name here the moment a page invents one. */
  --ok: var(--ah-green);
  --err: #B42318;
  --success: var(--ah-green);
  --danger: #B42318;
  --green: var(--ah-green);
  --red: #B42318;
  --aqua: var(--ah-accent-on-light);
  --border-soft: rgba(20, 24, 26, 0.10);
  --border-subtle: rgba(20, 24, 26, 0.10);
  --dark:  #F1F6F5;
  --dark2: #FFFFFF;
  --dark3: #E9F1F0;
  --dark4: #DFEAE8;
  --dark5: #D5E3E1;
  --c-cream: #FFFFFF;         /* legacy alias from the cream era; now plain white */
  --bg: #F1F6F5;
  --surface: #FFFFFF;
  --surface2: #FFFFFF;
  --surface3: #E9F1F0;
  --option-bg: #FFFFFF;
  --text: #14181A;
  --text-90: rgba(20, 24, 26, 0.92);
  --text-70: rgba(20, 24, 26, 0.74);
  --text-50: rgba(20, 24, 26, 0.56);
  --text-40: rgba(20, 24, 26, 0.46);
  --text-30: rgba(20, 24, 26, 0.38);
  --text-20: rgba(20, 24, 26, 0.30);
  --c-text-90: rgba(20, 24, 26, 0.92);
  --c-text-30: rgba(20, 24, 26, 0.38);
  --muted: rgba(20, 24, 26, 0.56);
  --fg: #14181A;
  --fg-muted: var(--ah-muted-light);
  --teal: var(--ah-accent-on-light);
  --cyan: var(--ah-accent-on-light);
  --c-teal: var(--ah-teal-mid);
  --c-cyan: var(--ah-accent-on-light);
  --c-gold: var(--ah-accent-on-light);
  --c-yellow: var(--ah-accent-on-light);
  --fill-subtle: rgba(20, 24, 26, 0.04);
  --fill-muted: rgba(20, 24, 26, 0.07);
  --grid-line: transparent;
  --c-ink: #14181A;
  --c-ink-70: rgba(20, 24, 26, 0.74);
  --c-ink-55: rgba(20, 24, 26, 0.56);
  --c-ink-muted: var(--ah-muted-light);
}
/* dark-era token names some pages still read; mapped so dark pages inherit brand values */
html[data-theme="dark"] {
  --c-cream: #1A3331;
  --c-cyan: var(--ah-cyan);
  --c-gold: var(--ah-gold);
  --c-yellow: var(--ah-gold);
}

/* ─── Base ─── */
body {
  background: var(--ambient), var(--c-bg) !important;
  background-attachment: fixed !important;
  color: var(--c-text);
  font-family: var(--font-body) !important;
  margin: 0;
  padding: var(--ops-page-pad-top) var(--ops-page-pad-x) var(--ops-page-pad-bot) !important;
  max-width: var(--ops-page-max);
  margin-left: auto !important; margin-right: auto !important;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Shell layout opt-out: index.html uses sidebar + main + iframes and needs full viewport width. */
body.ops-shell {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.ops-shell #dashboardView,
body.ops-shell #clientDatabaseView,
body.ops-shell #clientOverviewView,
body.ops-shell #contentCalendarView,
body.ops-shell #pipelineView,
body.ops-shell #commandCenterView,
body.ops-shell #cashTimelineView,
body.ops-shell .content-panel,
body.ops-shell .inv-view {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: var(--ops-view-pad) !important;
  box-sizing: border-box;
}
body h1, body h2, body h3,
body .main-title, body .dash-section-title,
body .sidebar-brand, body .logo-text, body .sidebar-logo-title,
body .panel-title, body .recent-title, body .success-title,
body .cal-header-title, body .cal-detail-title, body .inv-title,
body .inv-modal-title, body .slide-modal-title {
  font-family: var(--font-head) !important;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
body h1 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
body ::selection { background: rgba(0, 168, 143, 0.30); }

/* focus visibility, keyboard only */
body :focus-visible {
  outline: 2px solid var(--c-accent) !important;
  outline-offset: 2px;
}

/* themed thin scrollbars */
body ::-webkit-scrollbar { width: 10px; height: 10px; }
body ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-border), transparent 20%);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
body ::-webkit-scrollbar-track { background: transparent; }

/* ─── Glass primitives ─── */
.glass,
body .card, body > .card,
body .stat-card, body .dash-card {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--c-radius-card) !important;
  box-shadow: var(--glass-shadow);
}
body .card, body > .card { padding: var(--ops-card-pad) !important; }
.glass-raised,
body .modal, body .inv-modal, body [class*="modal-box"] {
  background: var(--glass-bg-raised) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(var(--glass-saturate));
  backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--c-radius-card);
  box-shadow: var(--glass-shadow-raised);
}
body .card,
body .stat-card,
body .dash-card {
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
body .card:hover {
  border-color: color-mix(in srgb, var(--ah-teal-mid), transparent 55%) !important;
  box-shadow: var(--glass-shadow-raised) !important;
  transform: translateY(-2px);
}
body .card h2 {
  font-family: var(--font-head) !important;
  font-weight: 700; font-size: 15px;
  color: var(--c-text); margin: 0 0 14px;
}
/* overlay behind modals and panels */
body .modal-overlay, body .overlay, body [class*="-overlay"] {
  background: var(--overlay) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ─── Forms ─── */
body label {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 500;
  color: var(--c-text-50) !important;
  text-transform: none !important;
  letter-spacing: 0;
  margin: 10px 0 6px;
  display: block;
}
body input, body select, body textarea {
  background: color-mix(in srgb, var(--c-card-solid), transparent 45%) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--c-radius-input) !important;
  color: var(--c-text);
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  padding: 10px 14px !important;
  line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  width: 100%;
  box-sizing: border-box;
}
body input[type="checkbox"], body input[type="radio"] {
  accent-color: var(--ah-teal-btn) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer;
  margin: 0 !important;
  vertical-align: middle;
}
body input:focus, body select:focus, body textarea:focus {
  outline: none !important;
  border-color: var(--ah-teal-mid) !important;
  background: color-mix(in srgb, var(--ah-teal-mid), transparent 94%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ah-teal-mid), transparent 86%) !important;
}

/* ─── Buttons ───
   Brand allows exactly two: the gradient primary CTA and the teal secondary.
   The bare-button default is quiet chrome derived from the secondary (tinted teal),
   so dense toolbars stay calm and the one primary per screen stands out. */
body button {
  background: color-mix(in srgb, var(--ah-teal-btn), transparent 90%) !important;
  color: var(--c-accent) !important;
  border: 1px solid color-mix(in srgb, var(--ah-teal-btn), transparent 55%) !important;
  padding: 0 18px !important;
  height: var(--btn-h) !important;
  min-height: var(--btn-h) !important;
  box-sizing: border-box !important;
  border-radius: var(--c-radius-btn) !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease) !important;
  margin-top: 8px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
body button:hover {
  background: color-mix(in srgb, var(--ah-teal-btn), transparent 82%) !important;
  border-color: var(--ah-teal-btn) !important;
  color: var(--c-text) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Brand PRIMARY: the gradient CTA, one per screen */
body button.primary, body .btn-primary, body button.ah-primary,
body a.btn-primary {
  background: var(--ah-btn-gradient) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: none !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: var(--c-radius-cta) !important;
  padding: 0 22px !important;
  height: var(--btn-h) !important;
  min-height: var(--btn-h) !important;
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.75),
              inset 0 -3px 8px rgba(0, 0, 0, 0.12) !important;
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease) !important;
}
body button.primary:hover, body .btn-primary:hover, body button.ah-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px) !important;
}
/* Brand SECONDARY: solid teal */
body button.solid, body button.btn-secondary, body .inv-btn-primary, body .inv-btn-success {
  background: var(--gel-bg) !important;
  box-shadow: var(--gel-shadow) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: var(--c-radius-btn) !important;
}
body button.solid:hover, body button.btn-secondary:hover {
  background: color-mix(in srgb, var(--ah-teal-btn), #000 12%) !important;
}
/* Ghost alias = the quiet default */
body button.ghost {
  background: color-mix(in srgb, var(--ah-teal-btn), transparent 90%) !important;
  color: var(--c-accent) !important;
  border: 1px solid color-mix(in srgb, var(--ah-teal-btn), transparent 55%) !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 9px 20px !important;
  box-shadow: none !important;
}
body button.ghost:hover {
  background: color-mix(in srgb, var(--ah-teal-btn), transparent 82%) !important;
  border-color: var(--ah-teal-btn) !important;
  color: var(--c-text) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Danger: status red, outlined */
body button.ghost.danger, body button.danger {
  background: color-mix(in srgb, var(--c-danger), transparent 90%) !important;
  color: var(--c-danger) !important;
  border: 1px solid color-mix(in srgb, var(--c-danger), transparent 55%) !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 9px 20px !important;
  box-shadow: none !important;
}
body button.ghost.danger:hover, body button.danger:hover {
  background: color-mix(in srgb, var(--c-danger), transparent 82%) !important;
  border-color: var(--c-danger) !important;
  color: var(--c-text) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Cancel: neutral ghost */
body button.btn-cancel, body button[class*="cancel"] {
  background: color-mix(in srgb, var(--c-text), transparent 95%) !important;
  color: var(--c-text-70) !important;
  border: 1px solid var(--c-border-soft) !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.82rem !important;
  box-shadow: none !important;
}
body button.btn-cancel:hover, body button[class*="cancel"]:hover {
  background: color-mix(in srgb, var(--c-text), transparent 90%) !important;
  color: var(--c-text) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Close X buttons */
body button.panel-close, body button.cal-detail-close,
body button.slide-modal-close, body button.icon-close, body button[class*="close"] {
  background: transparent !important;
  color: var(--c-text-50) !important;
  border: 1px solid var(--c-border-soft) !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast) !important;
}
body button.panel-close:hover, body button.cal-detail-close:hover,
body button.slide-modal-close:hover, body button.icon-close:hover, body button[class*="close"]:hover {
  color: var(--c-danger) !important;
  border-color: color-mix(in srgb, var(--c-danger), transparent 60%) !important;
  background: color-mix(in srgb, var(--c-danger), transparent 92%) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* .sm outside a table row is styled exactly like a normal button, so a row of buttons lines up */
/* Compact row buttons: only inside table rows, where they must fit flush */
body tr button.sm {
  padding: 0 12px !important;
  height: var(--btn-h-row) !important;
  min-height: var(--btn-h-row) !important;
  font-size: 11px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
}
body button.sm.danger {
  background: color-mix(in srgb, var(--c-danger), transparent 86%) !important;
  color: var(--c-danger) !important;
  border-color: color-mix(in srgb, var(--c-danger), transparent 70%) !important;
}
body button.sm.sm-done {
  background: color-mix(in srgb, var(--ah-teal-mid), transparent 86%) !important;
  color: var(--ah-teal-mid) !important;
  border-color: color-mix(in srgb, var(--ah-teal-mid), transparent 70%) !important;
}
body button:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ─── Template-picker chips: match canonical tab style ─── */
html body button[data-template] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--c-text-50) !important;
  padding: 10px 18px !important;
  height: auto !important;
  min-height: 0 !important;
  font-family: var(--font-head) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  box-shadow: none !important;
  position: relative;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease) !important;
}
html body button[data-template]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ah-teal-mid);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
html body button[data-template]:hover {
  background: transparent !important;
  color: var(--c-text) !important;
  border: none !important;
  box-shadow: none !important;
}
html body button[data-template]:hover::after { transform: scaleX(0.4); opacity: 0.6; }
html body button[data-template].active {
  color: var(--c-accent) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ah-teal-mid), transparent 90%), transparent) !important;
  font-weight: 800 !important;
}
html body button[data-template].active::after { transform: scaleX(1); opacity: 1; }

/* ─── HARD STOP: every tab-container button loses borders/backgrounds/shadows ─── */
html body .tab-strip button,
html body .tabs button,
html body .ops-tabs button,
html body .invsys-tabs button,
html body .tab-strip button.active,
html body .tabs button.active,
html body .ops-tabs button.active,
html body .invsys-tabs button.active {
  border: 0 !important;
  border-width: 0 !important;
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: var(--c-radius-pill) !important;
}
html body .tab-strip button.active,
html body .tabs button.active,
html body .ops-tabs button.active,
html body .invsys-tabs button.active {
  background: var(--gel-bg) !important;
  box-shadow: var(--gel-shadow) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* ─── Calendar post delete X (position + red fill survive everything) ─── */
html body .cal-day button.cal-post-delete-x {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  box-sizing: border-box !important;
  background: var(--c-danger) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  z-index: 5;
  transition: background var(--dur-fast), transform var(--dur-fast) !important;
}
html body .cal-day .cal-day-post-preview.has-own-x { padding-right: 22px !important; }
html body .cal-day .cal-day-post-preview.has-own-x > button.cal-post-delete-x { top: 0 !important; right: 0 !important; }
html body .cal-day button.cal-post-delete-x:hover {
  background: color-mix(in srgb, var(--c-danger), #000 15%) !important;
  color: #ffffff !important;
  border: none !important;
  transform: scale(1.1) !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45) !important;
}

/* ─── Canonical tabs: a liquid-glass pill bar, active tab = gel pill ─── */
body .invsys-tabs, body .ops-tabs, body .tab-strip, body .tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--c-radius-pill);
  box-shadow: var(--glass-shadow);
  margin: 0 0 24px;
  flex-wrap: wrap;
  position: relative;
}
body .invsys-tabs > button, body .ops-tabs > button,
body .tab-strip > button, body .tabs > button,
body button.cal-tab-btn, body button.cal-copy-toggle-btn,
body button[role="tab"], body button.tab, body button[class*="tab-btn"] {
  background: transparent !important;
  color: var(--c-text-70) !important;
  border: none !important;
  border-radius: var(--c-radius-pill) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 0.72rem !important;
  box-shadow: none !important;
  padding: 0 20px !important;
  margin: 0 !important;
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease) !important;
  transform: none !important;
}
body .invsys-tabs > button::after, body .ops-tabs > button::after,
body .tab-strip > button::after, body .tabs > button::after,
body button.cal-tab-btn::after, body button.cal-copy-toggle-btn::after,
body button[role="tab"]::after, body button.tab::after, body button[class*="tab-btn"]::after {
  content: none;
}
body .invsys-tabs > button:hover, body .ops-tabs > button:hover,
body .tab-strip > button:hover, body .tabs > button:hover,
body button.cal-tab-btn:hover, body button.cal-copy-toggle-btn:hover,
body button[role="tab"]:hover, body button.tab:hover, body button[class*="tab-btn"]:hover {
  color: var(--c-text) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
}
body .invsys-tabs > button.active, body .ops-tabs > button.active,
body .tab-strip > button.active, body .tabs > button.active,
body button.cal-tab-btn.active, body button.cal-copy-toggle-btn.active,
body button[role="tab"][aria-selected="true"], body button.tab.active,
body button[class*="tab-btn"].active {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: var(--gel-bg) !important;
  font-weight: 800 !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: var(--gel-shadow) !important;
}
body .invsys-tabs > button, body .invsys-tabs > button:hover, body .invsys-tabs > button:focus,
body .ops-tabs > button, body .ops-tabs > button:hover, body .ops-tabs > button:focus,
body .tab-strip > button, body .tab-strip > button:hover, body .tab-strip > button:focus,
body .tabs > button, body .tabs > button:hover, body .tabs > button:focus {
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
}
body .invsys-tabs > button.active::after, body .ops-tabs > button.active::after,
body .tab-strip > button.active::after, body .tabs > button.active::after,
body button.cal-tab-btn.active::after, body button.cal-copy-toggle-btn.active::after,
body button[role="tab"][aria-selected="true"]::after, body button.tab.active::after,
body button[class*="tab-btn"].active::after {
  content: none;
}

/* ─── Uniform tool-panel width across every view ─── */
body .inv-view, body .content-panel, body .content-panel.visible,
body #dashboardView, body #clientDatabaseView, body #clientOverviewView,
body #contentCalendarView, body #pipelineView, body #commandCenterView,
body .ops-page, body .tool-panel {
  max-width: var(--ops-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* ─── Tables ─── */
body table thead th {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--c-text-50) !important;
  background: color-mix(in srgb, var(--ah-teal-mid), transparent 94%) !important;
  padding: 11px 12px !important;
  border-bottom: 1px solid var(--c-border) !important;
  text-align: left;
}
body tbody td {
  padding: 10px 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--c-border), transparent 45%) !important;
  color: var(--c-text-70) !important;
  font-variant-numeric: tabular-nums;
}
body tbody tr { transition: background var(--dur-fast) var(--ease); }
body tbody tr:hover td {
  background: color-mix(in srgb, var(--c-text), transparent 97%);
  color: var(--c-text) !important;
}

/* ─── Status chips: always icon + word in markup, never color alone ─── */
body .pill {
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  border: 1px solid var(--c-border-soft) !important;
  background: color-mix(in srgb, var(--c-text), transparent 95%);
  color: var(--c-text-50);
  display: inline-block;
  white-space: nowrap;
}
body .pill.ok {
  color: var(--c-success);
  background: color-mix(in srgb, var(--c-success), transparent 88%);
  border-color: color-mix(in srgb, var(--c-success), transparent 65%);
}
body .pill.warn {
  color: var(--c-warn);
  background: color-mix(in srgb, var(--c-warn), transparent 88%);
  border-color: color-mix(in srgb, var(--c-warn), transparent 65%);
}
body .pill.bad {
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger), transparent 88%);
  border-color: color-mix(in srgb, var(--c-danger), transparent 65%);
}
body .status-ok   { color: var(--c-success) !important; }
body .status-bad  { color: var(--c-danger) !important; }
body .status-warn { color: var(--c-warn) !important; }

/* ─── Links ─── */
body a { color: var(--c-accent) !important; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
body a:hover { color: var(--ah-teal-mid) !important; }
/* Inline yellow-to-cyan gradient on <a>: that is the brand primary; keep it, clean it */
body a[style*="linear-gradient"][style*="FFFF00"],
body a[style*="linear-gradient"][style*="ffff00"],
body a[style*="linear-gradient"][style*="#ff0"],
body a[style*="linear-gradient"][style*="#FF0"] {
  background: var(--ah-btn-gradient) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: none !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 0 18px rgba(0, 255, 255, 0.25) !important;
  padding: 10px 22px !important;
  border-radius: var(--c-radius-cta) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: filter var(--dur-fast) var(--ease) !important;
}
body a[style*="linear-gradient"][style*="FFFF00"]:hover,
body a[style*="linear-gradient"][style*="ffff00"]:hover,
body a[style*="linear-gradient"][style*="#ff0"]:hover,
body a[style*="linear-gradient"][style*="#FF0"]:hover {
  filter: brightness(1.06);
  color: #000 !important;
}

/* ─── Misc components ─── */
body .file-slot {
  border: 1px solid var(--c-border-soft) !important;
  border-radius: var(--c-radius-card) !important;
  padding: 14px !important;
  background: color-mix(in srgb, var(--c-card-solid), transparent 60%);
  margin-bottom: 10px;
}
body .file-slot.has {
  border-color: color-mix(in srgb, var(--c-success), transparent 55%) !important;
  background: color-mix(in srgb, var(--c-success), transparent 94%);
}
body .file-slot .name { font-weight: 600; font-size: 14px; color: var(--c-text); }
body .file-slot .meta { color: var(--c-text-50); font-size: 12px; margin-top: 4px; }
body pre {
  background: color-mix(in srgb, var(--c-bg), #000 25%);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--c-radius-input); padding: 12px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px; color: var(--c-text-70);
  white-space: pre-wrap; max-height: 320px; overflow-x: auto;
}
html[data-theme="light"] body pre { background: #E9F1F0; color: var(--ah-ink); }
body .cp-lede { font-size: 0.82rem; color: var(--c-text-50); margin-bottom: 18px; max-width: 70ch; }

/* ─── Theme toggle ─── */
html body button.theme-toggle {
  width: var(--btn-h) !important;
  height: var(--btn-h) !important;
  min-height: var(--btn-h) !important;
  padding: 0 !important;
  margin: 0 0 0 auto !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 0 !important;
}
html body button.theme-toggle svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
  display: block !important;
}
html[data-theme="light"] body button.theme-toggle {
  background: #FFFFFF !important;
  color: var(--ah-ink) !important;
  border: 1.5px solid var(--ah-teal-mid) !important;
}
html[data-theme="light"] body button.theme-toggle:hover {
  background: #E9F1F0 !important;
  color: var(--ah-accent-on-light) !important;
  border-color: var(--ah-accent-on-light) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ah-teal-mid), transparent 82%) !important;
}
html[data-theme="dark"] body button.theme-toggle {
  background: var(--c-card-solid) !important;
  color: var(--ah-teal-mid) !important;
  border: 1.5px solid color-mix(in srgb, var(--ah-teal-mid), transparent 30%) !important;
}
html[data-theme="dark"] body button.theme-toggle:hover {
  background: color-mix(in srgb, var(--c-card-solid), #fff 6%) !important;
  color: var(--ah-cyan) !important;
  border-color: var(--ah-teal-mid) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ah-teal-mid), transparent 82%) !important;
}

/* ─── Spacing / orientation helpers ─── */
.ops-stack { display: flex; flex-direction: column; gap: var(--ops-section-gap); }
.ops-grid {
  display: grid;
  gap: var(--ops-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ops-section { margin-bottom: var(--ops-section-gap); }
.ops-view-pad { padding: var(--ops-view-pad); box-sizing: border-box; }
body:not(.ops-shell) .toolbar,
body:not(.ops-shell) .tab-strip { margin-bottom: var(--ops-section-gap); }
body:not(.ops-shell) .grid { gap: var(--ops-grid-gap) !important; }
body:not(.ops-shell)::before { content: none !important; display: none !important; }

/* ─── Floating shell: glass sidebar + glass main panel, both inset from the window edge ─── */
body.ops-shell .sidebar {
  position: fixed !important;
  top: 12px !important; left: 12px !important; bottom: 12px !important;
  height: auto !important;
  width: var(--sidebar-w);
  box-sizing: border-box;
  overflow-y: auto;
  /* keep item width fixed when opening a section makes the menu scroll */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--glass-shadow) !important;
  color: var(--c-text-70) !important;
  z-index: 50;
}
html[data-theme="dark"] body.ops-shell .sidebar,
html:not([data-theme]) body.ops-shell .sidebar {
  background: linear-gradient(180deg, rgba(4, 18, 26, 0.50) 0%, rgba(4, 18, 26, 0.38) 100%) !important;
}
html[data-theme="dark"] body.ops-shell .sidebar,
html:not([data-theme]) body.ops-shell .sidebar { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
body.ops-shell .main {
  margin: 12px 12px 12px calc(var(--sidebar-w) + 24px) !important;
  min-height: calc(100vh - 24px);
  box-sizing: border-box;
  background: var(--reading-surface) !important;
  -webkit-backdrop-filter: blur(56px) saturate(1.6);
  backdrop-filter: blur(56px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff, transparent 75%);
}
body.ops-shell .sidebar-logo { border-bottom: 1px solid var(--glass-border) !important; }
body.ops-shell .sidebar-logo-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--c-text) !important;
  color: var(--c-text) !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
}
body.ops-shell .sidebar-logo-sub,
body.ops-shell .sidebar-footer {
  color: var(--c-text-70) !important;
  -webkit-text-fill-color: var(--c-text-70) !important;
  border-top-color: var(--glass-border) !important;
}
body.ops-shell .sidebar-section-label {
  color: var(--c-text-70) !important;
  -webkit-text-fill-color: var(--c-text-70) !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}
body.ops-shell .sidebar-section-label:hover {
  color: var(--c-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
body.ops-shell .sidebar-section-label .chevron { color: var(--c-accent) !important; }
body.ops-shell .sidebar-item {
  color: var(--c-text) !important;
  -webkit-text-fill-color: var(--c-text) !important;
  font-weight: 500;
  border-radius: var(--c-radius-pill) !important;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
body.ops-shell .sidebar-item:not(.active):hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--c-text) !important;
  -webkit-text-fill-color: var(--c-text) !important;
}
html[data-theme="light"] body.ops-shell .sidebar-item:not(.active):hover { background: rgba(255, 255, 255, 0.60) !important; }
body.ops-shell .sidebar-item.active {
  background: var(--gel-bg) !important;
  box-shadow: var(--gel-shadow) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
}
body.ops-shell .sidebar-item-name { color: inherit !important; -webkit-text-fill-color: inherit !important; }
body .sidebar-item-icon .nav-ico, body .sidebar-item-icon svg { width: 18px; height: 18px; display: block; }
body.ops-shell .sidebar-badge.live {
  background: color-mix(in srgb, var(--c-accent), transparent 86%) !important;
  color: var(--c-accent) !important;
  -webkit-text-fill-color: var(--c-accent) !important;
  border-color: color-mix(in srgb, var(--c-accent), transparent 65%) !important;
}
body.ops-shell .sidebar-badge.soon {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--c-text-50) !important;
  border-color: var(--glass-border) !important;
}
/* keep sidebar ink unflattened by the light sweep below */
html[data-theme="light"] .sidebar,
html[data-theme="light"] .sidebar .sidebar-item-name,
html[data-theme="light"] .sidebar .nav-label,
html[data-theme="light"] .sidebar span,
html[data-theme="light"] .sidebar a {
  -webkit-text-fill-color: unset;
}

/* ─── Light theme chrome ─── */
html[data-theme="light"] body,
html[data-theme="light"] body.ops-shell {
  background: var(--ambient), var(--c-bg) !important;
  background-attachment: fixed !important;
  color: var(--ah-ink) !important;
}
html[data-theme="light"] body.ops-shell .main { color: var(--ah-ink) !important; }
html[data-theme="light"] body input,
html[data-theme="light"] body select,
html[data-theme="light"] body textarea {
  background: #FFFFFF !important;
  border: 1px solid var(--c-border) !important;
  color: var(--ah-ink) !important;
}
html[data-theme="light"] body input:focus,
html[data-theme="light"] body select:focus,
html[data-theme="light"] body textarea:focus {
  border-color: var(--ah-teal-mid) !important;
  background: #FFFFFF !important;
}
html[data-theme="light"] body button {
  background: color-mix(in srgb, var(--ah-teal-btn), transparent 92%) !important;
  color: var(--ah-teal-btn) !important;
  border: 1px solid color-mix(in srgb, var(--ah-teal-btn), transparent 55%) !important;
}
html[data-theme="light"] body button:hover {
  background: color-mix(in srgb, var(--ah-teal-btn), transparent 85%) !important;
  border-color: var(--ah-teal-btn) !important;
  color: var(--ah-ink) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body button.ghost {
  background: color-mix(in srgb, var(--ah-teal-btn), transparent 92%) !important;
  color: var(--ah-teal-btn) !important;
  border-color: color-mix(in srgb, var(--ah-teal-btn), transparent 55%) !important;
}
html[data-theme="light"] body button.ghost:hover { color: var(--ah-ink) !important; }
/* brand buttons keep their identity in light (the generic light override above outranks
   the base rules, so each needs a light twin at higher specificity) */
html[data-theme="light"] body button.primary,
html[data-theme="light"] body .btn-primary,
html[data-theme="light"] body button.ah-primary {
  background: var(--ah-btn-gradient) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border: none !important;
}
html[data-theme="light"] body button.primary:hover,
html[data-theme="light"] body .btn-primary:hover,
html[data-theme="light"] body button.ah-primary:hover {
  background: var(--ah-btn-gradient) !important;
  color: #000 !important;
  filter: brightness(1.04);
}
html[data-theme="light"] body button.solid,
html[data-theme="light"] body button.btn-secondary,
html[data-theme="light"] body .inv-btn-primary,
html[data-theme="light"] body .inv-btn-success {
  background: var(--gel-bg) !important;
  box-shadow: var(--gel-shadow) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
}
html[data-theme="light"] body button.solid:hover,
html[data-theme="light"] body button.btn-secondary:hover {
  background: color-mix(in srgb, var(--ah-teal-btn), #000 12%) !important;
  color: #FFFFFF !important;
}
/* tabs stay flat in light (the generic light button override re-added boxes) */
html[data-theme="light"] body .invsys-tabs > button,
html[data-theme="light"] body .ops-tabs > button,
html[data-theme="light"] body .tab-strip > button,
html[data-theme="light"] body .tabs > button,
html[data-theme="light"] body button.cal-tab-btn,
html[data-theme="light"] body button.cal-copy-toggle-btn,
html[data-theme="light"] body button[role="tab"],
html[data-theme="light"] body button.tab,
html[data-theme="light"] body button[class*="tab-btn"],
html[data-theme="light"] html body button[data-template] {
  background: transparent !important;
  border: none !important;
  border-radius: var(--c-radius-pill) !important;
  color: var(--c-text-70) !important;
  box-shadow: none !important;
}
html[data-theme="light"] body .invsys-tabs > button:hover,
html[data-theme="light"] body .ops-tabs > button:hover,
html[data-theme="light"] body .tab-strip > button:hover,
html[data-theme="light"] body .tabs > button:hover,
html[data-theme="light"] body button[role="tab"]:hover,
html[data-theme="light"] body button.tab:hover,
html[data-theme="light"] body button[class*="tab-btn"]:hover {
  background: rgba(255, 255, 255, 0.55) !important;
  color: var(--ah-ink) !important;
  border: none !important;
}
html[data-theme="light"] body .invsys-tabs > button.active,
html[data-theme="light"] body .ops-tabs > button.active,
html[data-theme="light"] body .tab-strip > button.active,
html[data-theme="light"] body .tabs > button.active,
html[data-theme="light"] body button.cal-tab-btn.active,
html[data-theme="light"] body button.cal-copy-toggle-btn.active,
html[data-theme="light"] body button[role="tab"][aria-selected="true"],
html[data-theme="light"] body button.tab.active,
html[data-theme="light"] body button[class*="tab-btn"].active,
html[data-theme="light"] html body button[data-template].active {
  background: var(--gel-bg) !important;
  box-shadow: var(--gel-shadow) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
}
html[data-theme="light"] body button.btn-cancel,
html[data-theme="light"] body button[class*="cancel"] {
  background: rgba(20, 24, 26, 0.04) !important;
  color: rgba(20, 24, 26, 0.72) !important;
}
html[data-theme="light"] body button.btn-cancel:hover,
html[data-theme="light"] body button[class*="cancel"]:hover {
  background: rgba(20, 24, 26, 0.08) !important;
  color: var(--ah-ink) !important;
}
html[data-theme="light"] body button.sm.danger,
html[data-theme="light"] body button.danger {
  background: color-mix(in srgb, #B42318, transparent 90%) !important;
  color: #B42318 !important;
  border-color: color-mix(in srgb, #B42318, transparent 68%) !important;
}
html[data-theme="light"] body button.sm.danger:hover,
html[data-theme="light"] body button.danger:hover {
  background: color-mix(in srgb, #B42318, transparent 84%) !important;
  color: #7f1d1d !important;
  border-color: color-mix(in srgb, #B42318, transparent 45%) !important;
}
html[data-theme="light"] body .card,
html[data-theme="light"] body > .card,
html[data-theme="light"] body .stat-card,
html[data-theme="light"] body .dash-card,
html[data-theme="light"] .main .card,
html[data-theme="light"] .main .stat-card,
html[data-theme="light"] .main .dash-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--ah-ink) !important;
}
html[data-theme="light"] body .card:hover {
  border-color: color-mix(in srgb, var(--ah-teal-mid), transparent 45%) !important;
  box-shadow: var(--glass-shadow-raised) !important;
}
html[data-theme="light"] body .invsys-tabs,
html[data-theme="light"] body .ops-tabs,
html[data-theme="light"] body .tab-strip,
html[data-theme="light"] body .tabs { border-bottom-color: var(--c-border); }
html[data-theme="light"] body table thead th {
  background: color-mix(in srgb, var(--ah-teal-mid), transparent 93%) !important;
}
html[data-theme="light"] body tbody td { border-bottom-color: rgba(20, 24, 26, 0.08) !important; }
html[data-theme="light"] body tbody tr:hover td { background: rgba(20, 24, 26, 0.03); }
html[data-theme="light"] body .pill { background: rgba(20, 24, 26, 0.05); }
html[data-theme="light"] body a { color: var(--ah-accent-on-light) !important; }
html[data-theme="light"] body a:hover { color: var(--ah-teal-mid) !important; }
html[data-theme="light"] body .file-slot { background: #FFFFFF; }
html[data-theme="light"] body .sidebar-badge.live {
  background: color-mix(in srgb, var(--c-accent), transparent 86%) !important;
  color: var(--c-accent) !important;
  -webkit-text-fill-color: var(--c-accent) !important;
  border-color: color-mix(in srgb, var(--c-accent), transparent 65%) !important;
}

/* ─── LIGHT INK SWEEP: no white / near-white / gold-as-text on light surfaces.
   Sidebar excluded (stays dark). Ported guard; retire with Phase 4. ─── */
html[data-theme="light"] body, html[data-theme="light"] body h1 { color: var(--ah-ink); }
html[data-theme="light"] body .main-title,
html[data-theme="light"] body .dash-section-title,
html[data-theme="light"] body .stat-label,
html[data-theme="light"] .main .main-title,
html[data-theme="light"] .main .dash-section-title,
html[data-theme="light"] .main .stat-label,
html[data-theme="light"] [id$="View"] .main-title {
  color: var(--ah-accent-on-light) !important;
  -webkit-text-fill-color: var(--ah-accent-on-light) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
html[data-theme="light"] body .stat-value,
html[data-theme="light"] body .cf-amt,
html[data-theme="light"] body .cf-run-val,
html[data-theme="light"] body [style*="-webkit-text-fill-color: transparent"],
html[data-theme="light"] body [style*="-webkit-text-fill-color:transparent"] {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--ah-ink) !important;
  color: var(--ah-ink) !important;
}
html[data-theme="light"] body .stat-sub,
html[data-theme="light"] body .main-subtitle,
html[data-theme="light"] body .cf-muted {
  color: rgba(20, 24, 26, 0.62) !important;
}
html[data-theme="light"] body [style*="#FFD700"],
html[data-theme="light"] body [style*="#ffd700"],
html[data-theme="light"] body [style*="#FFFF00"],
html[data-theme="light"] body [style*="#ffff00"],
html[data-theme="light"] body [style*="#FF0"],
html[data-theme="light"] body [style*="#ff0"],
html[data-theme="light"] body [style*="#FFDE59"],
html[data-theme="light"] body [style*="#ffde59"] {
  color: var(--ah-accent-on-light) !important;
  -webkit-text-fill-color: var(--ah-accent-on-light) !important;
}

/* Main content ink flattening (NUCLEAR port): force readable ink; never touches .sidebar */
html[data-theme="light"] #cashAsOf,
html[data-theme="light"] #cashAsOf.main-subtitle,
html[data-theme="light"] .main #cashAsOf,
html[data-theme="light"] .main-subtitle {
  color: rgba(20, 24, 26, 0.74) !important;
  -webkit-text-fill-color: rgba(20, 24, 26, 0.74) !important;
  opacity: 1 !important;
}
html[data-theme="light"] .main,
html[data-theme="light"] .main p, html[data-theme="light"] .main span,
html[data-theme="light"] .main div, html[data-theme="light"] .main label,
html[data-theme="light"] .main li, html[data-theme="light"] .main td,
html[data-theme="light"] .main th, html[data-theme="light"] .main small,
html[data-theme="light"] .main .cf-muted, html[data-theme="light"] .main .cf-start-detail,
html[data-theme="light"] .main .cf-cur, html[data-theme="light"] .main .cf-filter-note,
html[data-theme="light"] .main .cf-date, html[data-theme="light"] .main .cf-tag,
html[data-theme="light"] .main .cf-tag-start, html[data-theme="light"] .main .cf-recur-oneoff,
html[data-theme="light"] .main .cf-dir-out, html[data-theme="light"] .main .cf-dir-bal,
html[data-theme="light"] .main .cf-dir-start, html[data-theme="light"] .main .cf-title,
html[data-theme="light"] .main .cf-amt, html[data-theme="light"] .main .cf-run,
html[data-theme="light"] .main .cf-run-val, html[data-theme="light"] .main .cf-start-name,
html[data-theme="light"] .main .cf-empty, html[data-theme="light"] .main .stat-sub,
html[data-theme="light"] .main .stat-label, html[data-theme="light"] .main .cc-block-meta,
html[data-theme="light"] .main .cc-hour span, html[data-theme="light"] .main .mine-empty,
html[data-theme="light"] .main [class*="muted"], html[data-theme="light"] .main [class*="-sub"],
html[data-theme="light"] .main [class*="subtitle"], html[data-theme="light"] .main [class*="meta"],
html[data-theme="light"] .main [class*="hint"], html[data-theme="light"] .main [class*="note"] {
  color: var(--c-ink) !important;
  -webkit-text-fill-color: var(--c-ink) !important;
}
html[data-theme="light"] .main .main-subtitle, html[data-theme="light"] .main .stat-sub,
html[data-theme="light"] .main .cf-muted, html[data-theme="light"] .main .cf-filter-note,
html[data-theme="light"] .main .cf-start-detail, html[data-theme="light"] .main .cf-cur,
html[data-theme="light"] .main .cf-date, html[data-theme="light"] .main .cc-block-meta {
  color: var(--c-ink-70) !important;
  -webkit-text-fill-color: var(--c-ink-70) !important;
}
html[data-theme="light"] .main .stat-value, html[data-theme="light"] .main .cf-amt,
html[data-theme="light"] .main .cf-run-val {
  color: var(--ah-ink) !important;
  -webkit-text-fill-color: var(--ah-ink) !important;
}
html[data-theme="light"] .main .main-subtitle, html[data-theme="light"] .main .stat-sub {
  color: rgba(20, 24, 26, 0.60) !important;
}
html[data-theme="light"] .main .cal-day {
  background: #E9F1F0 !important;
  border-color: rgba(20, 24, 26, 0.12) !important;
}
html[data-theme="light"] .main .cal-day.has-post:hover { background: #DFEAE8 !important; }

/* Inline style white/gold/cyan text on light: attribute overrides (Phase 4 retires these) */
html[data-theme="light"] .main [style*="color:rgba(255,255,255"],
html[data-theme="light"] .main [style*="color: rgba(255,255,255"],
html[data-theme="light"] .main [style*="color:#fff"],
html[data-theme="light"] .main [style*="color: #fff"],
html[data-theme="light"] .main [style*="color:#ffffff"],
html[data-theme="light"] .main [style*="color: #ffffff"],
html[data-theme="light"] .main [style*="color:white"],
html[data-theme="light"] .main [style*="color: white"],
html[data-theme="light"] .main [style*="color:#FFD700"],
html[data-theme="light"] .main [style*="color:#ffd700"],
html[data-theme="light"] .main [style*="color:#fbbf24"],
html[data-theme="light"] .main [style*="color:#ffcc00"],
html[data-theme="light"] .main [style*="color:#FFCC00"],
html[data-theme="light"] .main [style*="color:#eab308"],
html[data-theme="light"] .main [style*="color:#f59e0b"],
html[data-theme="light"] .main [style*="color:#00FFFF"],
html[data-theme="light"] .main [style*="color:#00ffff"] {
  color: var(--c-ink-70) !important;
  -webkit-text-fill-color: var(--c-ink-70) !important;
}
html[data-theme="light"] .main .cal-stat-pill.revision .pill-value,
html[data-theme="light"] .main .cal-stat-pill.final_review .pill-value,
html[data-theme="light"] .main .mrr-gauge-pct.yellow,
html[data-theme="light"] .main .cdb-status-atrisk,
html[data-theme="light"] .main .cov-alert-yellow,
html[data-theme="light"] .main .voice-badge.warn,
html[data-theme="light"] .main .kb-stale,
html[data-theme="light"] .main .cal-detail-status-badge.final_review {
  color: var(--c-attention) !important;
  -webkit-text-fill-color: var(--c-attention) !important;
}
html[data-theme="light"] .main button.primary,
html[data-theme="light"] .main .btn-primary {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
html[data-theme="light"] .main .inv-btn-primary,
html[data-theme="light"] .main .inv-btn-success,
html[data-theme="light"] .main .cf-btn:not(.cf-ghost),
html[data-theme="light"] .main .sidebar-badge.live {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* status colour must survive the ink flattening */
html[data-theme="light"] .main .pill.ok,
html[data-theme="light"] .main .status-ok   { color: var(--c-success) !important; -webkit-text-fill-color: var(--c-success) !important; }
html[data-theme="light"] .main .pill.bad,
html[data-theme="light"] .main .status-bad  { color: var(--c-danger) !important; -webkit-text-fill-color: var(--c-danger) !important; }
html[data-theme="light"] .main .pill.warn,
html[data-theme="light"] .main .status-warn { color: var(--c-warn) !important; -webkit-text-fill-color: var(--c-warn) !important; }

/* View roots outside .main */
html[data-theme="light"] [id$="View"] p, html[data-theme="light"] [id$="View"] span,
html[data-theme="light"] [id$="View"] label, html[data-theme="light"] [id$="View"] td,
html[data-theme="light"] [id$="View"] th, html[data-theme="light"] [id$="View"] li,
html[data-theme="light"] [id$="View"] small, html[data-theme="light"] [id$="View"] div,
html[data-theme="light"] [id$="View"] .cf-title, html[data-theme="light"] [id$="View"] .cf-amt,
html[data-theme="light"] [id$="View"] .cf-run {
  color: var(--ah-ink) !important;
  -webkit-text-fill-color: var(--ah-ink) !important;
}
html[data-theme="light"] [id$="View"] .main-subtitle,
html[data-theme="light"] [id$="View"] .stat-sub,
html[data-theme="light"] [id$="View"] .cf-muted,
html[data-theme="light"] [id$="View"] .cf-filter-note {
  color: rgba(20, 24, 26, 0.74) !important;
  -webkit-text-fill-color: rgba(20, 24, 26, 0.74) !important;
}

/* inline colour literals, light remaps */
html[data-theme="light"] [style*="color:#0ff"],
html[data-theme="light"] [style*="color: #0ff"],
html[data-theme="light"] [style*="color:#00FFFF"],
html[data-theme="light"] [style*="color: #00FFFF"],
html[data-theme="light"] [style*="color:#00E9DC"],
html[data-theme="light"] [style*="color: #00E9DC"],
html[data-theme="light"] [style*="color:rgba(0,255,255"],
html[data-theme="light"] [style*="color: rgba(0,255,255"] { color: var(--ah-accent-on-light) !important; }
html[data-theme="light"] [style*="color:rgba(255,255,255"],
html[data-theme="light"] [style*="color: rgba(255,255,255"],
html[data-theme="light"] [style*="color:#e8e8e8"] { color: rgba(20, 24, 26, 0.74) !important; }
html[data-theme="light"] [style*="color:#ff6b6b"],
html[data-theme="light"] [style*="color: #ff6b6b"],
html[data-theme="light"] [style*="color:#ef4444"] { color: #B42318 !important; }
html[data-theme="light"] [style*="color:#4ade80"],
html[data-theme="light"] [style*="color:#22c55e"] { color: var(--ah-green) !important; }
html[data-theme="light"] [style*="color:rgba(251,191,36"],
html[data-theme="light"] [style*="color: rgba(251,191,36"] { color: var(--c-attention) !important; }
html[data-theme="light"] body .pipeline-view-toggle button {
  border-color: rgba(20, 24, 26, 0.18) !important;
  color: rgba(20, 24, 26, 0.60) !important;
}
html[data-theme="light"] body .pipeline-view-toggle button.active {
  background: color-mix(in srgb, var(--ah-teal-btn), transparent 90%) !important;
  border-color: var(--ah-teal-btn) !important;
  color: var(--ah-teal-btn) !important;
}
html[data-theme="light"] .main .cash-seg button,
html[data-theme="light"] body .main .cash-seg button {
  color: rgba(20, 24, 26, 0.56) !important;
  border-color: rgba(20, 24, 26, 0.18) !important;
  background: #FFFFFF !important;
}
html[data-theme="light"] body .main .cash-seg button:hover {
  color: var(--ah-ink) !important;
  border-color: rgba(20, 24, 26, 0.28) !important;
}
html[data-theme="light"] body .main .cash-seg button.active {
  color: #FFFFFF !important;
  background: var(--ah-teal-btn) !important;
  border-color: var(--ah-teal-btn) !important;
}
html[data-theme="light"] .main .cf-btn.cf-ghost,
html[data-theme="light"] body .main .cf-btn.cf-ghost { color: rgba(20, 24, 26, 0.62) !important; }
html[data-theme="light"] #cashAsOf {
  color: var(--ah-ink) !important;
  -webkit-text-fill-color: var(--ah-ink) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 500 !important;
}

/* ─── NUMBERS: Montserrat tabular (brand: headings AND numbers = Montserrat) ─── */
:root { --font-num-feature: "tnum" 1, "lnum" 1; }
.stat-value, .stat-value--hero, .stat-value.small, .stat-value.negative,
.cdb-stat-value, .cf-amt, .cf-run, .cf-run-val,
.cf-start-name, .cf-start-detail, .ret-balance-amt, .ret-balance-currency,
.cal-stat-pill .pill-value, .mrr-gauge-pct, .cov-metric-value,
.slide-thumb-num, .kpi-value, .metric-value, .money, .amount,
#cashBalAmount, #cashTimelineView .cf-amt, #cashTimelineView .cf-run,
body .stat-value, body .cdb-stat-value,
body .cf-amt, body .cf-run, body .cf-run-val, body .ret-balance-amt,
.main .stat-value, .main .cf-amt, .main .cf-run-val,
[id$="View"] .stat-value, [id$="View"] .cf-amt, [id$="View"] .cf-run,
[id$="View"] .cf-run-val, [id$="View"] .cdb-stat-value, [id$="View"] .kpi-value,
[id$="View"] .metric-value, [id$="View"] .ret-balance-amt {
  font-family: var(--font-num) !important;
  font-weight: 700;
  font-feature-settings: var(--font-num-feature);
  font-variant-numeric: tabular-nums lining-nums !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* numeric inputs and table figures stay Inter tabular for density */
input[type="number"], input[type="date"], #cashTimelineView input[type="number"] {
  font-family: var(--font-body) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ─── Chart ink: class the chart text/lines, never hardcode a fill ─── */
.ch-grid   { stroke: color-mix(in srgb, var(--c-text), transparent 92%); }
.ch-gap    { stroke: color-mix(in srgb, var(--c-text), transparent 86%); }
.ch-axis   { fill: var(--c-text-50); }
.ch-xlabel { fill: var(--c-text-70); }
.ch-value  { fill: var(--c-highlight); }
.ch-up     { fill: var(--c-success); }
.ch-down   { fill: var(--c-danger); }
.ch-series { stroke: var(--ah-teal-mid); fill: var(--ah-teal-mid); }
html[data-theme="light"] .ch-value { fill: var(--ah-accent-on-light); }

/* ─── Responsive layout (shared; canon previously had none) ─── */
@media (max-width: 1100px) {
  :root, html[data-theme="dark"], html[data-theme="light"] {
    --ops-page-pad-x: 20px;
  }
}
@media (max-width: 900px) {
  /* off-canvas sidebar; activates only once the shell carries .has-nav-toggle
     (Phase 1a adds the hamburger button and the class together) */
  body.ops-shell.has-nav-toggle .sidebar {
    transform: translateX(calc(-100% - 24px));
    transition: transform var(--dur) var(--ease);
    z-index: 60;
  }
  body.ops-shell.has-nav-toggle.sidebar-open .sidebar { transform: translateX(0); }
  body.ops-shell.has-nav-toggle .main { margin-left: 12px !important; padding-top: 56px; }
  body.ops-shell.has-nav-toggle .nav-toggle { display: inline-flex !important; }
}
@media (max-width: 760px) {
  :root, html[data-theme="dark"], html[data-theme="light"] {
    --ops-page-pad-x: 16px;
    --ops-page-pad-top: 14px;
  }
  body .invsys-tabs > button, body .ops-tabs > button,
  body .tab-strip > button, body .tabs > button { padding: 12px 14px !important; }
  .ops-grid { grid-template-columns: 1fr; }
}
body .nav-toggle {
  display: none !important;
  position: fixed;
  top: 18px; left: 18px;
  z-index: 70;
  width: var(--btn-h) !important;
  height: var(--btn-h) !important;
  min-height: var(--btn-h) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--c-radius-pill) !important;
  background: var(--glass-bg-raised) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  color: var(--c-text) !important;
}
body.sidebar-open .nav-toggle { left: calc(var(--sidebar-w) + 24px); }

/* ─── Motion safety ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ─── Readability floor ───
   Pages still carry their own faint greys (20 to 45% white) from the solid-black era.
   On glass they drop below 3:1, so every style the 2026-11-05 audit flagged gets a floor.
   Remove each line once its page's CSS is ported (Phases 1b to 2). */
body .cf-row-wrap.cf-hidden { opacity: 0.62; }
body .cf-row-paused { opacity: 0.7; }
body .cf-row-actions .cf-icon-btn { opacity: 0.7; }
html[data-theme="dark"] body .cc-grip,
html[data-theme="dark"] body .cc-hour span,
html[data-theme="dark"] body .cc-block-meta,
html[data-theme="dark"] body #dashPeriodBadge,
html[data-theme="dark"] body .main-badge,
html[data-theme="dark"] body .upload-zone-hint,
html[data-theme="dark"] body .upload-divider,
html[data-theme="dark"] body .cdb-stat-value,
html[data-theme="dark"] body .cdb-stat-label,
html[data-theme="dark"] body .cdb-status-inactive,
html[data-theme="dark"] body .cal-month-label,
html[data-theme="dark"] body .cal-dow-cell,
html[data-theme="dark"] body .cal-day-num,
html[data-theme="dark"] body .cal-detail-status-badge.pending,
html[data-theme="dark"] body .cf-run-carry,
html[data-theme="dark"] body .cf-muted,
html[data-theme="dark"] body .cf-date,
html[data-theme="dark"] body .cf-cur,
html[data-theme="dark"] body .stat-sub,
html[data-theme="dark"] body .runway-sync-ts,
html[data-theme="dark"] body .main-subtitle,
html[data-theme="dark"] body [class*="hint"],
html[data-theme="dark"] body [class*="muted"],
html[data-theme="dark"] body [class*="-meta"],
html[data-theme="dark"] body [style*="color:rgba(255,255,255,0.2"],
html[data-theme="dark"] body [style*="color: rgba(255,255,255,0.2"],
html[data-theme="dark"] body [style*="color:rgba(255,255,255,0.3"],
html[data-theme="dark"] body [style*="color: rgba(255,255,255,0.3"],
html[data-theme="dark"] body [style*="color:rgba(255,255,255,0.4"],
html[data-theme="dark"] body [style*="color: rgba(255,255,255,0.4"],
html[data-theme="dark"] body [style*="color:rgba(255, 255, 255, 0.3"],
html[data-theme="dark"] body [style*="color:rgba(255, 255, 255, 0.4"] {
  color: var(--c-text-70) !important;
  -webkit-text-fill-color: var(--c-text-70) !important;
}
html[data-theme="dark"] body .sidebar [class*="hint"],
html[data-theme="dark"] body .sidebar [class*="muted"] { color: var(--c-text-70) !important; }

/* ─── Framed views (Invoice, Runway, Revenue, US Banking, Carousel) ───
   They are position:fixed with left:var(--sidebar-w) inline. The glass .main panel has a
   backdrop-filter, which makes it the containing block for fixed children, so that offset
   would apply twice. Pin them to the panel instead, and let the framed page show the panel. */
body.ops-shell .main #carouselCreatorView,
body.ops-shell .main #contentMineView,
body.ops-shell .main #financeInvoiceView,
body.ops-shell .main #financeRetainerView,
body.ops-shell .main #financeRevenueView,
body.ops-shell .main #usBankingView {
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: transparent !important;
  border-radius: 24px;
  overflow: hidden;
}
html.in-frame,
html.in-frame body,
html.in-frame[data-theme] body,
html.in-frame[data-theme] html body {
  /* outranks the copied #d2-light-uniform block that paints framed pages grey (#cfd6dd) */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body.ops-shell .sidebar::-webkit-scrollbar { width: 6px; }
body.ops-shell .sidebar::-webkit-scrollbar-thumb { border-width: 1px; }

/* Cash Forecast row icons: line icons take the theme ink (the emoji eye was dark grey on dark) */
body .cf-row-actions .cf-icon-btn .cf-ico { display: block; color: var(--c-text-70); }
body .cf-row-actions .cf-icon-btn:hover .cf-ico { color: var(--c-accent); }
body .cf-row-actions .cf-eye-btn,
body .cf-row-actions .cf-eye-all { opacity: 0.9 !important; }

/* badge sitting on the active (gel) menu pill */
body.ops-shell .sidebar-item.active .sidebar-badge {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* ─── One tab style everywhere ───
   Some tools build their own tab strips: a plain div with inline border-bottom styles, holding
   buttons with tool-specific classes. Match the strip by what it holds and give it the
   canonical pill bar; !important beats the inline styles. */
html body .cp-panel-tabs,
body div:has(> .prep-tab-btn),
body div:has(> .hc-tab-btn),
body div:has(> .tm-tab-btn),
body div:has(> .mine-tab) {
  /* never set display here: these strips are hidden until their own tool opens */
  width: fit-content !important;
  flex-wrap: wrap;
  gap: 4px !important;
  padding: 5px !important;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--c-radius-pill) !important;
  box-shadow: var(--glass-shadow) !important;
}
html body .cp-panel-tab,
html body button.prep-tab-btn,
html body button.hc-tab-btn,
html body button.tm-tab-btn,
html body button.mine-tab {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--btn-h) !important;
  min-height: var(--btn-h) !important;
  padding: 0 20px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: var(--c-radius-pill) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--c-text-70) !important;
  -webkit-text-fill-color: var(--c-text-70) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
}
html body .cp-panel-tab:not(.active):hover,
html body button.prep-tab-btn:not(.active):hover,
html body button.hc-tab-btn:not(.active):hover,
html body button.tm-tab-btn:not(.active):hover,
html body button.mine-tab:not(.active):hover {
  background: color-mix(in srgb, var(--c-text), transparent 92%) !important;
  color: var(--c-text) !important;
  -webkit-text-fill-color: var(--c-text) !important;
}
html body .cp-panel-tab.active,
html body button.prep-tab-btn.active,
html body button.hc-tab-btn.active,
html body button.tm-tab-btn.active,
html body button.mine-tab.active {
  background: var(--gel-bg) !important;
  box-shadow: var(--gel-shadow) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
html body .cp-panel-tab::after, html body button.prep-tab-btn::after, html body button.hc-tab-btn::after,
html body button.tm-tab-btn::after, html body button.mine-tab::after { content: none !important; }

/* tabs show the gel pill as their active state; no extra focus ring on click */
html body .cp-panel-tab:focus, html body .cp-panel-tab:focus-visible,
html body button.prep-tab-btn:focus-visible, html body button.hc-tab-btn:focus-visible,
html body button.tm-tab-btn:focus-visible, html body button.mine-tab:focus-visible,
body .tabs > button:focus-visible, body .tab-strip > button:focus-visible,
body .ops-tabs > button:focus-visible, body .invsys-tabs > button:focus-visible {
  outline: none !important;
}

/* ─── Aurora: slow freeform light behind the hub shell ───
   Two blurred layers of brand-colour ribbons drift and twist on long, offset loops, so the
   glass panels always have soft moving colour behind them. Transform-only animation (cheap),
   and it stops for anyone with Reduce Motion on. Standalone pages keep the still artwork. */
html body.ops-shell,
html[data-theme] body.ops-shell {
  background: var(--c-bg) !important;
}
html body.ops-shell::before,
html body.ops-shell::after {
  content: '' !important;
  display: block !important;
  position: fixed;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  filter: blur(48px) saturate(1.4);
}
html body.ops-shell::before {
  background:
    radial-gradient(55% 9% at 30% 34%, rgba(0, 233, 220, 0.95), transparent 72%),
    radial-gradient(40% 7% at 66% 26%, rgba(120, 255, 240, 0.75), transparent 72%),
    radial-gradient(48% 14% at 70% 42%, rgba(0, 179, 166, 0.85), transparent 72%),
    radial-gradient(36% 10% at 44% 62%, rgba(0, 200, 190, 0.70), transparent 72%);
  animation: aurora-a 18s ease-in-out infinite alternate;
}
html body.ops-shell::after {
  background:
    radial-gradient(60% 8% at 58% 50%, rgba(0, 233, 220, 0.70), transparent 72%),
    radial-gradient(38% 16% at 20% 72%, rgba(0, 168, 143, 0.75), transparent 72%),
    radial-gradient(30% 6% at 40% 20%, rgba(150, 255, 245, 0.55), transparent 72%),
    radial-gradient(24% 10% at 84% 78%, rgba(255, 222, 89, 0.22), transparent 72%);
  animation: aurora-b 24s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
html[data-theme="light"] body.ops-shell::before {
  background:
    radial-gradient(55% 9% at 30% 34%, rgba(0, 233, 220, 0.60), transparent 72%),
    radial-gradient(40% 7% at 66% 26%, rgba(0, 220, 210, 0.45), transparent 72%),
    radial-gradient(48% 14% at 70% 42%, rgba(0, 179, 166, 0.45), transparent 72%),
    radial-gradient(36% 10% at 44% 62%, rgba(0, 200, 190, 0.40), transparent 72%);
}
html[data-theme="light"] body.ops-shell::after {
  background:
    radial-gradient(60% 8% at 58% 50%, rgba(0, 233, 220, 0.45), transparent 72%),
    radial-gradient(38% 16% at 20% 72%, rgba(0, 179, 166, 0.40), transparent 72%),
    radial-gradient(30% 6% at 40% 20%, rgba(0, 233, 220, 0.35), transparent 72%),
    radial-gradient(24% 10% at 84% 78%, rgba(248, 136, 46, 0.14), transparent 72%);
  mix-blend-mode: normal;
}
@keyframes aurora-a {
  0%   { transform: translate3d(-14%, -8%, 0) rotate(-16deg) scale(1); }
  33%  { transform: translate3d(10%, 4%, 0) rotate(8deg) scale(1.2); }
  66%  { transform: translate3d(-4%, 12%, 0) rotate(-6deg) scale(0.92); }
  100% { transform: translate3d(13%, -6%, 0) rotate(15deg) scale(1.12); }
}
@keyframes aurora-b {
  0%   { transform: translate3d(12%, 8%, 0) rotate(14deg) scale(1.1); }
  40%  { transform: translate3d(-12%, -5%, 0) rotate(-12deg) scale(0.95); }
  75%  { transform: translate3d(6%, -12%, 0) rotate(6deg) scale(1.22); }
  100% { transform: translate3d(-13%, 6%, 0) rotate(-15deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  html body.ops-shell::before, html body.ops-shell::after { animation: none !important; }
}

/* ─── Sidebar: logo and footer stay put, only the menu between them scrolls ─── */
html body.ops-shell .sidebar {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
body.ops-shell .sidebar-logo,
body.ops-shell .sidebar-footer { flex: 0 0 auto; }
body.ops-shell .sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
body.ops-shell .sidebar-nav::-webkit-scrollbar { width: 6px; }

/* ─── Main panel: a fixed box; only its contents scroll ─── */
html body.ops-shell {
  height: 100vh;
  overflow: hidden !important;
}
body.ops-shell .main {
  height: calc(100vh - 24px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
body.ops-shell .main::-webkit-scrollbar { width: 8px; }

/* ─── Light theme: the backdrop behind the two panels stays dark, like dark mode,
   so the light glass panels stand out (Hazel, 2026-11-06) ─── */
html[data-theme="light"] body.ops-shell {
  background: #0A1514 !important;
}
html[data-theme="light"] body.ops-shell::before {
  background:
    radial-gradient(55% 9% at 30% 34%, rgba(0, 233, 220, 0.95), transparent 72%),
    radial-gradient(40% 7% at 66% 26%, rgba(120, 255, 240, 0.75), transparent 72%),
    radial-gradient(48% 14% at 70% 42%, rgba(0, 179, 166, 0.85), transparent 72%),
    radial-gradient(36% 10% at 44% 62%, rgba(0, 200, 190, 0.70), transparent 72%);
}
html[data-theme="light"] body.ops-shell::after {
  background:
    radial-gradient(60% 8% at 58% 50%, rgba(0, 233, 220, 0.70), transparent 72%),
    radial-gradient(38% 16% at 20% 72%, rgba(0, 168, 143, 0.75), transparent 72%),
    radial-gradient(30% 6% at 40% 20%, rgba(150, 255, 245, 0.55), transparent 72%),
    radial-gradient(24% 10% at 84% 78%, rgba(255, 222, 89, 0.22), transparent 72%);
  mix-blend-mode: screen;
}
/* light panels over a dark backdrop need to be near-opaque to stay light and readable */
html[data-theme="light"] {
  --reading-surface: rgba(244, 249, 248, 0.90);
}
html[data-theme="light"] body.ops-shell .sidebar {
  background: rgba(244, 249, 248, 0.90) !important;
}

/* ─── Command Center: cards fold to their header ─── */
#commandCenterView .cc-card-head { cursor: pointer; user-select: none; }
#commandCenterView .cc-card-title { position: relative; padding-left: 20px; }
#commandCenterView .cc-card-title::before {
  content: '';
  position: absolute;
  left: 2px; top: 0.55em;
  width: 7px; height: 7px;
  border-right: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
#commandCenterView .cc-folded > .cc-card-title::before,
#commandCenterView .cc-folded .cc-card-title::before { transform: rotate(-45deg); }
#commandCenterView .cc-folded > :not(.cc-card-head) { display: none !important; }
#commandCenterView .cc-folded > .cc-card-head { margin-bottom: 0 !important; }

/* ═══ QA batch 1 (2026-11-06): pop-ups, status colours, off-brand colours, last tab strips ═══ */

/* Pop-ups: one look everywhere. Dark frosted overlay, raised glass box, 16px corners. */
body .inv-modal-overlay, body .modal-overlay, body .slide-modal-overlay, body #invViewModal {
  background: var(--overlay) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body .inv-modal, body .modal-box, body .slide-modal, body .topup-dialog, body .gi-modal,
body .cf-loans-modal, body #invViewModal > div {
  background: var(--glass-bg-raised), color-mix(in srgb, var(--c-bg), transparent 30%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--glass-shadow-raised) !important;
}
/* side detail drawer: a floating glass panel */
body .cal-detail-panel {
  top: 12px !important; right: 12px !important; bottom: 12px !important;
  /* closed: slide fully off, past the 12px inset and the shadow */
  transform: translateX(calc(100% + 40px));
  background: var(--glass-bg-raised), color-mix(in srgb, var(--c-bg), transparent 15%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--glass-shadow-raised) !important;
  overflow: hidden;
}
body .cal-detail-panel.open { transform: translateX(0); }

/* Status colours as plain values (readable, and measurable) */
:root, html[data-theme="dark"] {
  --c-success: #7CCB9C;
  --c-danger: #EC8C83;
  --c-warn: #D9A85A;
}
html[data-theme="light"] { --c-teal: var(--ah-accent-on-light); }
body .old, body .old-note { opacity: 0.8 !important; }

/* Off-brand colours mapped to brand tokens */
body .cf-amt.cf-out, body .cf-dir-out, body .badge-yellow { color: var(--c-attention) !important; -webkit-text-fill-color: var(--c-attention) !important; }
body [style*="168,85,247"], body [style*="168, 85, 247"], body [style*="#a855f7"], body [style*="#A855F7"],
body [style*="192,132,252"], body [style*="#c084fc"], body [style*="#C084FC"], body [style*="139,92,246"], body [style*="#8b5cf6"] {
  color: var(--c-accent) !important;
  -webkit-text-fill-color: var(--c-accent) !important;
  border-color: color-mix(in srgb, var(--c-accent), transparent 65%) !important;
}
body .mine-pillar-badge.P5, body .cal-detail-status-badge.design_ready, body .cal-stat-pill.design_ready .pill-value,
body .kb-action-purple, body .pl-status-pill, body .cf-tag-personal {
  color: var(--c-accent) !important;
  -webkit-text-fill-color: var(--c-accent) !important;
}
body .mine-pillar-badge.P5, body .cal-detail-status-badge.design_ready, body .kb-action-purple, body .cf-tag-personal {
  background: color-mix(in srgb, var(--c-accent), transparent 88%) !important;
  border-color: color-mix(in srgb, var(--c-accent), transparent 65%) !important;
}
body [style*="#FFD700"], body [style*="#ffd700"], body [style*="255,215,0"], body [style*="255, 215, 0"], body .demo-notice {
  color: var(--c-highlight) !important;
  -webkit-text-fill-color: var(--c-highlight) !important;
}

/* Last tab strips: Invoice output toggle, Content Calendar */
body #outputsTabs, body .cal-tab-row {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 5px !important;
  width: fit-content !important;
  max-width: 100%;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--c-radius-pill) !important;
  box-shadow: var(--glass-shadow) !important;
}
html body button.outputs-tab {
  display: inline-flex !important; align-items: center !important; gap: 6px;
  height: var(--btn-h) !important; min-height: var(--btn-h) !important;
  padding: 0 18px !important; margin: 0 !important;
  border: none !important; border-radius: var(--c-radius-pill) !important;
  background: transparent !important; box-shadow: none !important;
  color: var(--c-text-70) !important; -webkit-text-fill-color: var(--c-text-70) !important;
  font-family: var(--font-head) !important; font-weight: 700 !important; font-size: 0.72rem !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
}
html body button.outputs-tab.active {
  background: var(--gel-bg) !important; box-shadow: var(--gel-shadow) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
html body button.outputs-tab.active .pill { color: #FFFFFF !important; background: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.35) !important; }
html body button.outputs-tab:focus-visible { outline: none !important; }

/* QA batch 1b: light-mode quiet buttons and links a step darker (they read ~2.8:1 on the light panel),
   amber totals and labels to the brand attention colour, Rates sub-tab strip as a pill bar */
html[data-theme="light"] body button:not(.primary):not(.solid):not(.btn-secondary):not(.danger):not([class*="tab"]):not(.outputs-tab):not(.mine-tab):not(.cp-panel-tab):not(.tab-strip > button):not(.tabs > button):not(.ops-tabs > button):not(.invsys-tabs > button):not([role="tab"]):not(.active):not(.on),
html[data-theme="light"] body .cf-btn.cf-ghost {
  color: #0A6B62 !important;
  -webkit-text-fill-color: #0A6B62 !important;
}
html[data-theme="light"] body a:not([style*="linear-gradient"]):not(.btn-primary) { color: #007A72 !important; }
body .cf-rec-total strong,
body [style*="251,191,36"], body [style*="251, 191, 36"], body [style*="#fbbf24"], body [style*="#FBBF24"] {
  color: var(--c-attention) !important;
  -webkit-text-fill-color: var(--c-attention) !important;
}
body div:has(> button.outputs-tab) {
  display: inline-flex !important; gap: 4px !important; padding: 5px !important;
  width: fit-content !important; max-width: 100%;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--c-radius-pill) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* QA batch 2: page titles are text only everywhere (the active menu pill already shows the icon) */
body #panelIcon, body .panel-icon { display: none !important; }
body .cf-row-actions .cf-paid .cf-ico { color: var(--c-success); }

/* Line icons that replaced emoji (QA batch 2b) */
body .ah-ico { display: inline-block; vertical-align: -3px; color: var(--c-accent); flex-shrink: 0; }
body .ah-ico-empty { color: color-mix(in srgb, var(--c-accent), transparent 30%); }
body .upload-zone-icon .ah-ico, body .cal-header-icon .ah-ico { vertical-align: middle; }
body .research-icon.spin .ah-ico { animation: ah-spin 1s linear infinite; }
@keyframes ah-spin { to { transform: rotate(360deg); } }


/* ═══ ONE PAGE HEADER STANDARD (2026-11-06) ═══
   Every page title sits 32px in from the top-left of the main panel: Montserrat 800 24px in the
   theme text colour, an Inter 14px subtitle 6px below, then 24px to the content. Applies to hub
   views (.main-header), tools (.panel-header), Content Calendar, Content Mine and framed pages. */
:root, html[data-theme="dark"], html[data-theme="light"] {
  --ops-page-pad-top: 32px;
  --ops-page-pad-x: 32px;
}
body.ops-shell .main { padding: 0 !important; }
body.ops-shell #dashboardView, body.ops-shell #clientDatabaseView, body.ops-shell #clientOverviewView,
body.ops-shell #contentCalendarView, body.ops-shell #pipelineView, body.ops-shell #commandCenterView,
body.ops-shell #cashTimelineView, body.ops-shell #clientProfilesView, body.ops-shell #applicantNotesView,
body.ops-shell .content-panel, body.ops-shell .content-panel.visible, body.ops-shell .inv-view, body.ops-shell .tool-panel {
  padding: 32px 32px 40px !important;
  margin: 0 !important;
  max-width: none !important;
}
body.ops-shell .main-header, body.ops-shell .panel-header, body.ops-shell .cal-header {
  padding: 0 !important;
  margin: 0 0 24px !important;
  border: none !important;
  min-height: 0 !important;
  align-items: flex-start !important;
}
body.ops-shell .cal-header-icon { display: none !important; }
body.ops-shell #contentMineView > div {
  max-width: none !important;
  margin: 0 !important;
  padding: 32px 32px 40px !important;
}
body.ops-shell #contentMineView > div > div:first-of-type { margin-bottom: 24px !important; gap: 0 !important; }
body.ops-shell #contentMineView > div > div:first-of-type > span:first-child { display: none !important; }
html.in-frame body { padding: 32px 32px 16px !important; }

html[data-theme] body .main .main-title, html[data-theme] body .main-title,
html[data-theme] body .panel-title, html[data-theme] body .cal-header-title,
html[data-theme] body #contentMineView h1, html[data-theme].in-frame body h1 {
  font-family: var(--font-head) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--c-text) !important;
  -webkit-text-fill-color: var(--c-text) !important;
  background: none !important;
}
html[data-theme] body .main .main-subtitle, html[data-theme] body .main-subtitle,
html[data-theme] body .panel-desc, html[data-theme] body .cal-header-desc,
html[data-theme] body #contentMineView h1 + p, html[data-theme].in-frame body h1 + .sub {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 6px 0 0 !important;
  opacity: 1 !important;
  color: var(--c-text-70) !important;
  -webkit-text-fill-color: var(--c-text-70) !important;
}

html[data-theme] body #ccDateLabel,
html[data-theme].in-frame body.ah-brand h1 + .sub, html[data-theme].in-frame body.ah-brand h1 ~ .sub:first-of-type {
  font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 400 !important;
  line-height: 1.45 !important; margin: -24px 0 24px !important;
  color: var(--c-text-70) !important; -webkit-text-fill-color: var(--c-text-70) !important;
}
html[data-theme].in-frame body.ah-brand h1 { color: var(--c-text) !important; -webkit-text-fill-color: var(--c-text) !important; }


/* ═══ ONE MEASUREMENT (full sweep, 2026-11-06) ═══ */

/* A. Layout: every page fills the panel with the same 32px margin. No per-page width or centring. */
html.in-frame body { max-width: none !important; width: auto !important; margin: 0 !important; padding: 32px 32px 16px !important; }
body.ops-shell .ops-page { max-width: none !important; margin: 0 !important; }

/* B. Section headings: Montserrat 700 13px uppercase, teal, 24px above, 12px below */
body .dash-section-title, body .pay-group-label, body .out-period, body .runway-group-title,
body .rates-section-label, body .rates-section-header, body .grp-h, body .cf-section-title,
body h2:not(.card h2):not(.stat-card h2):not(.cc-card-head h2):not([class*="-card"] h2):not([class*="modal"] h2):not(.hero h2):not(.panel h2),
body h3:not(.card h3):not([class*="-card"] h3):not([class*="modal"] h3):not(.hero h3) {
  font-family: var(--font-head) !important; font-size: 13px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.08em !important; line-height: 1.3 !important;
  color: var(--c-teal) !important; -webkit-text-fill-color: var(--c-teal) !important;
  margin: 24px 0 12px !important; padding: 0 !important; background: none !important;
}
body .out-period span, body .pay-group-label .pay-progress, body .runway-group-sub {
  font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 400 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--c-text-50) !important; -webkit-text-fill-color: var(--c-text-50) !important;
}
body .pay-group-label .pill { margin-left: 8px; }

/* C. Kicker labels above numbers: Inter 600 11px uppercase, teal. Form labels keep the form style. */
html[data-theme] body .stat-label, html[data-theme] body .now-label, html[data-theme] body .cdb-stat-label,
html[data-theme] body .cf-hero-label, html[data-theme] body .cf-run-label, html[data-theme] body .pl-stat-label,
html[data-theme] body [class*="kicker"], html[data-theme] body [class*="eyebrow"] {
  font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: 0.08em !important; line-height: 1.3 !important;
  color: var(--c-teal) !important; -webkit-text-fill-color: var(--c-teal) !important;
}

/* D. Cards: 16px corners, 16px padding, 1px border */
body .card, body .stat-card, body .dash-card, body .now-cell, body .step-card, body .client-card,
body .cc-card, body .cf-card, body .inv-card {
  border-radius: 16px !important; padding: 16px !important; border-width: 1px !important;
}

/* E. Badges and pills: one shape */
body .pill, body .badge, body .chip, body .main-badge, body .pl-status-pill, body [class*="status-pill"], body .sidebar-badge {
  display: inline-block; border-radius: 999px !important; font-family: var(--font-body) !important;
  font-size: 0.65rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important;
  text-transform: uppercase !important; padding: 3px 8px !important; line-height: 1.4 !important;
}

/* F. Segmented controls are tab bars; every other button is 38px, Inter 0.85rem, 8px corners */
body .btn-cancel, body button[class*="cancel"] { font-size: 0.85rem !important; }
html[data-theme] body .rr-range, html[data-theme] body .pipeline-view-toggle, html[data-theme] body .cash-seg {
  display: inline-flex !important; gap: 4px !important; padding: 5px !important; width: fit-content !important;
  background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important;
  border-radius: var(--c-radius-pill) !important; box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
html[data-theme] body .rr-range button, html[data-theme] body .pipeline-view-toggle button, html[data-theme] body .cash-seg button {
  height: var(--btn-h) !important; min-height: var(--btn-h) !important; padding: 0 18px !important; margin: 0 !important;
  border: none !important; border-radius: var(--c-radius-pill) !important; background: transparent !important; box-shadow: none !important;
  color: var(--c-text-70) !important; -webkit-text-fill-color: var(--c-text-70) !important;
  font-family: var(--font-head) !important; font-weight: 700 !important; font-size: 0.72rem !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
}
html[data-theme] body .rr-range button.on, html[data-theme] body .pipeline-view-toggle button.active, html[data-theme] body .cash-seg button.active {
  background: var(--gel-bg) !important; box-shadow: var(--gel-shadow) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}

/* G. Inputs and selects: 38px like buttons; inside table rows 28px; textareas keep their padding */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]), body select {
  height: var(--btn-h) !important; min-height: var(--btn-h) !important;
  padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important;
}
body tr input:not([type="checkbox"]):not([type="radio"]), body tr select {
  height: var(--btn-h-row) !important; min-height: var(--btn-h-row) !important; font-size: 12px !important;
}
body textarea { padding: 10px 14px !important; }

/* H. Form labels: Inter 500 12px, one colour everywhere (beats the inline-style readability floor) */
html[data-theme] body label:not([class*="kicker"]):not(.stat-label) {
  font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 500 !important;
  color: var(--c-text-70) !important; -webkit-text-fill-color: var(--c-text-70) !important;
  text-transform: none !important; letter-spacing: 0 !important;
}

/* I. Table cells: Inter 13px, 10px/12px padding (secondary lines inside a cell may be smaller) */
html[data-theme] body tbody td { font-family: var(--font-body) !important; font-size: 13px !important; padding: 10px 12px !important; }
/* J. Table headers keep the muted ink in light mode too (the ink flattening turned them solid) */
html[data-theme="light"] .main table thead th, html[data-theme="light"] body table thead th { color: var(--c-text-50) !important; -webkit-text-fill-color: var(--c-text-50) !important; }
/* K. Text boxes: one shape */
html[data-theme] body textarea { padding: 10px 14px !important; border-radius: 8px !important; font-size: 14px !important; font-family: var(--font-body) !important; }
/* L. Employee Records pulled itself 16px outside the margin */
body #erRoot { margin: 0 !important; }
/* M. Kicker labels keep teal in light mode (after the ink flattening above) */
html[data-theme="light"] .main .stat-label, html[data-theme="light"] .main .now-label, html[data-theme="light"] .main .cdb-stat-label,
html[data-theme="light"] .main .cf-hero-label, html[data-theme="light"] .main .pl-stat-label, html[data-theme="light"] [id$="View"] .stat-label {
  color: var(--c-teal) !important; -webkit-text-fill-color: var(--c-teal) !important;
}

/* N. Cash Forecast: the projected-balance number floats top-right so the title row stays one height */
body.ops-shell #cashTimelineView { position: relative; }
body.ops-shell #cashTimelineView .main-header .cf-hero { position: absolute; top: 32px; right: 32px; margin: 0; }

/* O. Framed pages: title block then 24px to content. Same priority as the header standard, placed last. */


/* P. Labels on the green hero card stay white (the kicker rule made them teal on teal) */
html[data-theme] body .hero .hero-eyebrow, html[data-theme] body .hero [class*="kicker"], html[data-theme] body .hero .stat-label {
  color: rgba(255, 255, 255, 0.88) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}

/* Q. Header row: the title sits in a 38px line box, so a 38px button beside it never changes the row height.
   Subtitles hang straight under that box; content is always 24px below the header. */
html[data-theme] body .main .main-title, html[data-theme] body .main-title, html[data-theme] body .panel-title,
html[data-theme] body .cal-header-title, html[data-theme] body #contentMineView h1, html[data-theme].in-frame body h1 {
  line-height: 38px !important;
}
html[data-theme] body .main .main-subtitle, html[data-theme] body .main-subtitle, html[data-theme] body .panel-desc,
html[data-theme] body .cal-header-desc, html[data-theme] body #contentMineView h1 + p, html[data-theme] body #ccDateLabel {
  margin-top: 0 !important;
}
html[data-theme].in-frame body h1 { margin: 0 0 24px !important; }
html[data-theme].in-frame body h1 + .sub { margin: -24px 0 24px !important; }
body.ops-shell .main-header, body.ops-shell .panel-header, body.ops-shell .cal-header { min-height: 38px !important; }
body.ops-shell .main-header .pipeline-view-toggle {
  padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body #contentMineView div:has(> .mine-tab) { margin: 0 0 24px !important; }

/* R. Tabs: one weight in every state, 20px side padding everywhere */
html[data-theme] body .tabs > button, html[data-theme] body .tab-strip > button, html[data-theme] body .ops-tabs > button,
html[data-theme] body .invsys-tabs > button, html[data-theme] body button[role="tab"], html[data-theme] body .cp-panel-tab,
html[data-theme] body .outputs-tab, html[data-theme] body button.mine-tab, html[data-theme] body button.hc-tab-btn,
html[data-theme] body button.tm-tab-btn, html[data-theme] body button.prep-tab-btn, html[data-theme] body .rr-range button,
html[data-theme] body .pipeline-view-toggle button, html[data-theme] body .cash-seg button, html[data-theme] html body button[data-template] {
  font-weight: 700 !important; padding-left: 20px !important; padding-right: 20px !important;
}

/* S. Calendar badges take the pill shape too */
html[data-theme] body .cal-platform-badge, html[data-theme] body .cal-format-badge {
  display: inline-block; border-radius: 999px !important; font-family: var(--font-body) !important;
  font-size: 0.65rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important;
  text-transform: uppercase !important; padding: 3px 8px !important; line-height: 1.4 !important;
}

/* T. Invoice output rows: the dot between links is readable */
body #outputsBody span[style*="border-soft"] { color: var(--c-text-50) !important; }

/* U. Chart series: brand colours only. First series is liquid ice: translucent brand cyan (Hazel 2026-11-06, no blue, no white) */
:root, html[data-theme="dark"] {
  --s1: rgba(0, 233, 220, 0.42);
  --s2: var(--ah-orange);
  --s3: var(--ah-teal-mid);
  --s4: var(--ah-gold);
  --s5: var(--ah-teal-btn);
  --s-other: rgba(227, 236, 234, 0.28);
  --chart-surface: rgba(8, 20, 24, 0.35);
}
html[data-theme="light"] {
  --s1: rgba(0, 143, 134, 0.45);
  --s2: var(--ah-orange);
  --s3: var(--ah-teal-mid);
  --s4: var(--c-attention);
  --s5: var(--ah-teal-btn);
  --s-other: rgba(20, 24, 26, 0.22);
  --chart-surface: rgba(255, 255, 255, 0.45);
}