/* ============================================================
   HUMAN FIRST, Portal Dashboard system (2026-06-09)
   Light-clean default + dark-glass theme (data-theme="dark").
   Loaded AFTER portal.css; General Sans comes from portal.css @import.
   Built from .dashboard-research.md (Vision UI energy, Laplace calm),
   in HF brand (orange #FF6020, ink #1B1714).
   ============================================================ */

/* ---------- LIGHT (default) ---------- */
:root {
  --d-bg:        #F6F4F1;   /* app canvas */
  --d-surface:   #FFFFFF;   /* cards */
  --d-char:      #211D1A;   /* brand charcoal, used by the sign-in admin card */
  --d-surface-2: #FBFAF8;   /* inset / table header */
  --d-hairline:  #ECE7E1;   /* warm hairline */
  --d-ink:       #1B1714;
  --d-ink-soft:  #45403B;
  --d-ink-mute:  #6A645D;
  --d-orange:    #FF6020;
  --d-orange-ink:#9A370B;   /* AA orange text on light */
  --d-orange-bg: #FDEDE4;   /* peach tint, accent tiles / active nav */
  --d-pos:       #1B6B41;
  --d-neg:       #C8472B;
  --d-card-radius: 16px;
  --d-card-shadow: 0 1px 2px rgba(27,23,20,0.04), 0 8px 24px rgba(27,23,20,0.05);
  --d-card-shadow-hover: 0 2px 4px rgba(27,23,20,0.05), 0 12px 32px rgba(27,23,20,0.08);
  --d-sidebar: #FFFFFF;
  --d-active-bar: var(--d-orange);
  --d-chart-grid: #ECE7E1;
  --d-page-orbs: none;
}

/* ---------- DARK-GLASS (opt-in) ---------- */
:root[data-theme="dark"] {
  /* Refined neutral-charcoal dark (2026-06-17). Was a warm-brown muddy set
     (#14110F bg + rgba(34,29,26) brown glass + heavy orange orbs) that read
     dirty. Warmth now comes from the accent, not the surfaces. */
  --d-bg:        #131211;   /* near-neutral charcoal, whisper of warmth */
  --d-surface:   rgba(31,30,28,0.74);  /* clean elevated surface, less brown, more opaque */
  --d-surface-2: rgba(255,255,255,0.05);
  --d-hairline:  rgba(255,255,255,0.08);
  --d-ink:       #F6F1EC;
  --d-ink-soft:  rgba(246,241,236,0.78);
  --d-ink-mute:  rgba(246,241,236,0.55);
  --d-orange:    #FF6020;
  --d-orange-ink:#FFB088;   /* light rust text on dark */
  --d-orange-bg: rgba(255,96,32,0.16);
  --d-pos:       #5FD08A;
  --d-neg:       #F0795A;
  --d-card-radius: 16px;   /* was 20px: a card must not change shape when the theme flips */
  /* dark elevation: a top inset highlight reads where a black drop shadow
     can't on a near-black canvas; deeper diffuse shadow underneath */
  --d-card-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 28px rgba(0,0,0,0.55);
  --d-card-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.07), 0 16px 40px rgba(0,0,0,0.62);
  --d-sidebar: rgba(24,22,20,0.74);
  --d-active-bar: var(--d-orange);
  --d-chart-grid: rgba(255,255,255,0.07);
  /* a single, faint orange whisper in the top-right corner, enough to feel
     branded, gone is the muddy two-orb smear across the whole canvas */
  --d-page-orbs:
    radial-gradient(46% 30% at 96% 0%, rgba(255,96,32,0.05), transparent 72%);
}

/* glass blur only in dark theme */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .dash-sidebar,
:root[data-theme="dark"] .dash-topbar.scrolled {
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

/* ============================================================ SHELL */
body.dash-body {
  margin: 0; padding-top: 0;   /* kill legacy marketing-nav offset (style.css body{padding-top:64px}) that left a dead band above the sidebar */
  background: var(--d-bg); color: var(--d-ink);
  font-family: 'General Sans', system-ui, sans-serif;
  background-image: var(--d-page-orbs); background-attachment: fixed;
}
.dash { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

/* sidebar */
.dash-sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--d-sidebar); border-right: 1px solid var(--d-hairline);
  padding: 22px 16px; overflow-y: auto;
}
.dash-logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; }
.dash-logo img { height: 26px; width: auto; }
.dash-nav-group { margin-top: 16px; }
.dash-nav-group-label {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--d-ink-mute); padding: 0 10px 8px;
}
.dash-nav-item {
  display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 12px;
  border-radius: 11px; color: var(--d-ink-soft); text-decoration: none;
  font-size: 0.92rem; font-weight: 500; position: relative;
  transition: background .18s ease, color .18s ease;
}
.dash-nav-item svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.dash-nav-item:hover { background: var(--d-surface-2); color: var(--d-ink); }
.dash-nav-item.active { background: var(--d-orange-bg); color: var(--d-orange-ink); font-weight: 600; }
.dash-nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--d-active-bar);
}
.dash-sidebar-foot { margin-top: auto; padding-top: 16px; }
.dash-user {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px;
  background: var(--d-surface-2);
}
.dash-user-avatar {
  width: 34px; height: 34px; border-radius: 999px; flex: none;
  background: linear-gradient(135deg, var(--d-orange), #FF8A4C); color: #1B1714;
  display: grid; place-items: center; font-weight: 600; font-size: 0.85rem;
}
.dash-user-name { font-size: 0.85rem; font-weight: 600; color: var(--d-ink); line-height: 1.2; }
.dash-user-role { font-size: 0.72rem; color: var(--d-ink-mute); }
.dash-logout {
  margin-top: 8px; width: 100%; padding: 9px; border-radius: 999px; border: 1px solid var(--d-hairline);
  background: transparent; color: var(--d-ink-mute); font: 600 0.78rem 'General Sans',sans-serif;
  cursor: pointer; transition: color .18s var(--d-ease), border-color .18s var(--d-ease), background-color .18s var(--d-ease);
}
.dash-logout:hover { color: var(--d-ink); border-color: var(--d-ink-mute); }

/* content + topbar */
.dash-content { min-width: 0; padding: 0 clamp(20px,3vw,40px) 64px; }
.dash-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0 18px; margin-bottom: 8px; background: transparent;
}
.dash-topbar.scrolled { background: color-mix(in srgb, var(--d-bg) 80%, transparent); }
.dash-title { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--d-ink); }
.dash-topbar-right { display: flex; align-items: center; gap: 10px; }
.dash-iconbtn {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--d-hairline);
  background: var(--d-surface); color: var(--d-ink-soft); cursor: pointer;
  display: grid; place-items: center; transition: color .18s var(--d-ease), border-color .18s var(--d-ease), background-color .18s var(--d-ease);
}
.dash-iconbtn:hover { color: var(--d-ink); box-shadow: var(--d-card-shadow); }
.dash-iconbtn svg { width: 18px; height: 18px; }

/* ============================================================ CARDS */
.card {
  background: var(--d-surface); border: 1px solid var(--d-hairline);
  border-radius: var(--d-card-radius); box-shadow: var(--d-card-shadow);
  padding: 20px;
}
:root[data-theme="dark"] .card { background: linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0)), var(--d-surface); }
.card--hover { transition: box-shadow .2s ease, transform .2s ease; }
.card--hover:hover { box-shadow: var(--d-card-shadow-hover); transform: translateY(-2px); }

/* welcome hero */
.dash-hero { position: relative; overflow: hidden; }
.dash-hero .dash-hero-greeting { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.dash-hero .dash-hero-greeting span { color: var(--d-orange-ink); }
.dash-hero .dash-hero-date { color: var(--d-ink-mute); font-size: 0.9rem; margin-top: 4px; }
.dash-hero .dash-hero-tag { position: absolute; right: 22px; bottom: 18px; color: var(--d-ink-mute); font-style: italic; font-size: 0.85rem; }
:root[data-theme="dark"] .dash-hero::before {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 48%; height: 120%;
  background: radial-gradient(circle, rgba(255,96,32,0.16), transparent 68%); filter: blur(46px); pointer-events: none;
}
.dash-hero > * { position: relative; z-index: 1; }

/* KPI grid */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 18px; margin: 18px 0; }
.kpi { display: flex; flex-direction: column; gap: 10px; }
.kpi-head { display: flex; align-items: center; justify-content: space-between; }
.kpi-label { font-size: 0.74rem; font-weight: 600; color: var(--d-ink-mute); letter-spacing: 0.02em; }
.kpi-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--d-orange-ink);
  background: var(--d-orange-bg);
}
:root[data-theme="dark"] .kpi-icon { background: linear-gradient(135deg,var(--d-orange),#FF8A4C); color: #fff; box-shadow: 0 4px 14px rgba(255,96,32,0.35); }
.kpi-icon svg { width: 18px; height: 18px; }
.kpi-value { font-size: 2rem; font-weight: 600; color: var(--d-ink); line-height: 1; letter-spacing: -0.02em; }
.kpi-delta { font-size: 0.78rem; font-weight: 500; }
.kpi-delta--pos { color: var(--d-pos); } .kpi-delta--neg { color: var(--d-neg); }
.kpi-sub { font-size: 0.78rem; color: var(--d-ink-mute); }

/* generic layout helpers */
.dash-grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-title { font-size: 1rem; font-weight: 600; color: var(--d-ink); }
.card-link { font-size: 0.8rem; font-weight: 600; color: var(--d-orange-ink); text-decoration: none; }
.card-link:hover { text-decoration: underline; }

/* lists / rows */
.dash-list { display: flex; flex-direction: column; }
.dash-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--d-hairline); }
.dash-row:last-child { border-bottom: none; }
.dash-row-name { font-weight: 600; color: var(--d-ink); font-size: 0.9rem; }
.dash-row-sub { font-size: 0.78rem; color: var(--d-ink-mute); }
.dash-empty { color: var(--d-ink-mute); font-size: 0.88rem; font-style: italic; padding: 18px 4px; }

/* pills / chips */
.dash-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; }
.dash-pill--accent { background: var(--d-orange-bg); color: var(--d-orange-ink); }

/* tables */
.dash-table { width: 100%; border-collapse: collapse; }
.dash-table th {
  text-align: left; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--d-ink-mute); padding: 10px 12px; border-bottom: 1px solid var(--d-hairline); background: transparent;
}
.dash-table td { padding: 14px 12px; border-bottom: 1px solid var(--d-hairline); font-size: 0.9rem; color: var(--d-ink); }
.dash-table tr:hover td { background: var(--d-surface-2); }
.dash-progress { height: 6px; border-radius: 999px; background: var(--d-hairline); overflow: hidden; }
.dash-progress > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--d-orange),#FF8A4C); }

/* charts */
.dash-chart { width: 100%; min-height: 260px; }

/* theme toggle knob */
.dash-theme { position: relative; }

/* responsive */
@media (max-width: 920px) {
  .dash { grid-template-columns: 1fr; }
  .dash-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: 248px; height: 100vh;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  .dash-sidebar.open { transform: translateX(0); }
  .dash-grid-2 { grid-template-columns: 1fr; }
  .dash-menu-btn { display: grid !important; }
}
.dash-menu-btn { display: none; }

@media (prefers-reduced-motion: reduce) {
  .card--hover, .dash-nav-item, .dash-iconbtn, .dash-sidebar { transition: none; }
  .card--hover:hover { transform: none; }
}

/* ============================================================
   LEGACY WIDGET THEMING, make pre-dashboard portal widgets
   theme-aware (they hardcoded #fff / #999 / #2F2F2F and broke
   in dark mode + leaked colours). Point them at the flipping
   tokens so they read in BOTH light and dark. (Gate P1 fixes.)
   ============================================================ */
/* scoreboard: the weekly-metrics board (scoreboard.html) now owns ALL
   .sb-* styling, theme-aware, in its own page-local <style>. The old
   generic-KPI overrides here collided with it (forced the accent
   Total-profit value to dark ink on charcoal in light mode), so they
   are removed. Do not re-add .sb-tile* rules to dashboard.css. */
/* meetings empty-state (was white-on-white in light theme) */
.meetings-empty, .dash-content .meetings-empty, .home-empty, .dash-content .home-empty { color: var(--d-ink-mute) !important; }
/* DARK ONLY: legacy in-content headings hardcode dark #2F2F2F (invisible on
   dark) -> force light. Light theme is left alone (those colours read fine
   on light, and some headings sit on dark hero boxes that must stay white). */
:root[data-theme="dark"] .dash-content h1:not(.dash-title),
:root[data-theme="dark"] .dash-content h2,
:root[data-theme="dark"] .dash-content h3 { color: var(--d-ink) !important; }
/* admin-header / sb-subtitle sit on a DARK band (#2F2F2F) in BOTH themes, so
   the muted ink (dark grey) failed AA on the dark band. Use a light muted. */
.dash-content .admin-header p, .dash-content #sb-subtitle { color: rgba(246,241,236,0.72) !important; }
/* keep dark section-header headings white (more specific, wins) */
.dash-content .section-header h1, .dash-content .section-header h2, .dash-content .section-header h3 { color: #fff !important; }
/* stage number legible on dark glass */
:root[data-theme="dark"] .dash-content .kanban-col-num { color: var(--d-ink-mute) !important; }
.dash-content .section-header h1, .dash-content .section-header h2 { color: #fff; }
/* eyebrow on the dark section-header -> bright orange (rust token is for light bg) */
.section-header .section-eyebrow, .dash-content .section-eyebrow { color: #FF6020 !important; }
/* legacy faint greys inside the shell -> theme muted */
.dash-content .ps-tile-label, .dash-content [class*="-tile-label"], .dash-content .muted, .dash-content .faint { color: var(--d-ink-mute) !important; }

/* ============================================================
   DARK MODE, "orange mist" on every box (no white islands).
   Legacy widgets hardcode white bg; in dark theme give them the
   warm dark-glass + a baked orange-radial mist so they read on
   the dark canvas. Light theme is untouched.
   ============================================================ */
:root[data-theme="dark"] .dash-content .ps-tile,
:root[data-theme="dark"] .dash-content .kanban-col,
:root[data-theme="dark"] .dash-content .stat-tile,
:root[data-theme="dark"] .dash-content .section-card,
:root[data-theme="dark"] .dash-content .content-card,
:root[data-theme="dark"] .dash-content .progress-bar-wrap,
:root[data-theme="dark"] .dash-content .pending-card,
:root[data-theme="dark"] .dash-content .handbook-section,
:root[data-theme="dark"] .dash-content .handbook-toc,
:root[data-theme="dark"] .dash-content .cert-card,
:root[data-theme="dark"] .dash-content .infographic-caption,
:root[data-theme="dark"] .dash-content .case-note-template,
:root[data-theme="dark"] .dash-content .activity-card,
:root[data-theme="dark"] .dash-content .admin-table,
:root[data-theme="dark"] .dash-content .task-table,
:root[data-theme="dark"] .dash-content .ref-card,
:root[data-theme="dark"] .dash-content .ref-participants,
:root[data-theme="dark"] .dash-content .ref-stat,
:root[data-theme="dark"] .dash-content .ret-card,
:root[data-theme="dark"] .dash-content .mtg-card,
:root[data-theme="dark"] .dash-content .mtg-prev,
:root[data-theme="dark"] .dash-content .mtg-prev-body,
:root[data-theme="dark"] .dash-content .p-card,
:root[data-theme="dark"] .hf-modal,
:root[data-theme="dark"] .del-modal-box,
:root[data-theme="dark"] .status-picker-popup,
:root[data-theme="dark"] .stage-note-prompt {
  background:
    linear-gradient(transparent, transparent),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)),
    var(--d-surface) !important;
  border-color: var(--d-hairline) !important;
  color: var(--d-ink);
  box-shadow: var(--d-card-shadow);
}
/* text inside dark boxes stays legible */
:root[data-theme="dark"] .dash-content .kanban-col-name,
:root[data-theme="dark"] .dash-content .ps-tile-value:not(.accent),
:root[data-theme="dark"] .dash-content .ret-card *,
:root[data-theme="dark"] .dash-content .p-card *,
:root[data-theme="dark"] .dash-content .mtg-card * { color: var(--d-ink); }
:root[data-theme="dark"] .dash-content .kanban-col-desc,
:root[data-theme="dark"] .dash-content .ps-tile-label,
:root[data-theme="dark"] .dash-content .ref-sub,
:root[data-theme="dark"] .dash-content .p-card-sub { color: var(--d-ink-mute) !important; }
/* dark: the Add-Referral modal is INLINE-styled (background:#fff, no class)
   so class rules miss it -> target by id and override the inline bg. */
:root[data-theme="dark"] #referral-modal > div {
  background:
    linear-gradient(transparent, transparent),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)),
    var(--d-surface) !important;
  border: 1px solid var(--d-hairline) !important;
}
:root[data-theme="dark"] #referral-modal h2 { color: var(--d-ink) !important; }
:root[data-theme="dark"] #referral-modal label,
:root[data-theme="dark"] #referral-modal p { color: var(--d-ink-soft) !important; }
:root[data-theme="dark"] #referral-modal input:not([type=checkbox]):not([type=radio]),
:root[data-theme="dark"] #referral-modal select,
:root[data-theme="dark"] #referral-modal textarea {
  background: rgba(27,23,20,0.5) !important; color: var(--d-ink) !important; border: 1px solid var(--d-hairline) !important;
}
:root[data-theme="dark"] #referral-modal input::placeholder,
:root[data-theme="dark"] #referral-modal textarea::placeholder { color: var(--d-ink-mute) !important; }

/* dark: MODALS are body-level (outside .dash-content) so the .dash-content
   dark rules miss them -> theme the modal subtrees directly. */
:root[data-theme="dark"] .hf-modal h1, :root[data-theme="dark"] .hf-modal h2,
:root[data-theme="dark"] .hf-modal h3, :root[data-theme="dark"] .hf-modal-header h3,
:root[data-theme="dark"] .del-modal-box h1, :root[data-theme="dark"] .del-modal-box h2,
:root[data-theme="dark"] .del-modal-box h3 { color: var(--d-ink) !important; }
:root[data-theme="dark"] .hf-modal label, :root[data-theme="dark"] .hf-modal p,
:root[data-theme="dark"] .hf-modal li, :root[data-theme="dark"] .del-modal-box p,
:root[data-theme="dark"] .hf-modal .form-label { color: var(--d-ink-soft) !important; }
:root[data-theme="dark"] .hf-modal .hf-modal-close { color: var(--d-ink-mute) !important; }
:root[data-theme="dark"] .hf-modal input:not([type=checkbox]):not([type=radio]),
:root[data-theme="dark"] .hf-modal select, :root[data-theme="dark"] .hf-modal textarea,
:root[data-theme="dark"] .del-modal-box input {
  background: rgba(27,23,20,0.45) !important; color: var(--d-ink) !important; border: 1px solid var(--d-hairline) !important;
}
:root[data-theme="dark"] .hf-modal input::placeholder,
:root[data-theme="dark"] .hf-modal textarea::placeholder { color: var(--d-ink-mute) !important; }
:root[data-theme="dark"] .hf-modal .p-badge,
:root[data-theme="dark"] .hf-modal [class*="-badge"],
:root[data-theme="dark"] .hf-modal [class*="-chip"] { background: rgba(255,255,255,0.10) !important; color: var(--d-ink) !important; }

/* dark: participant-card / modal inner chips, badges, small buttons + notes
   (these hardcoded light hex bg -> showed as white boxes covering data) */
:root[data-theme="dark"] .dash-content .p-badge,
:root[data-theme="dark"] .dash-content [class*="-badge"]:not([class*="count"]),
:root[data-theme="dark"] .dash-content [class*="-chip"],
:root[data-theme="dark"] .dash-content .stage-pill {
  background: rgba(255,255,255,0.10) !important; color: var(--d-ink) !important;
}
:root[data-theme="dark"] .dash-content .p-badge-community { background: rgba(120,160,255,0.20) !important; color: #c7d8ff !important; }
:root[data-theme="dark"] .dash-content .p-badge-skills { background: rgba(95,208,138,0.20) !important; color: #9be8b5 !important; }
:root[data-theme="dark"] .dash-content .p-badge-paused { background: rgba(255,176,80,0.22) !important; color: #ffcf9e !important; }
:root[data-theme="dark"] .dash-content .p-card-view-ref,
:root[data-theme="dark"] .dash-content .p-card-resume,
:root[data-theme="dark"] .dash-content .p-card-followup input[type=date] {
  background: rgba(255,255,255,0.08) !important; color: var(--d-ink) !important; border-color: var(--d-hairline) !important;
}
:root[data-theme="dark"] .dash-content .p-card-view-ref:hover { background: rgba(255,255,255,0.15) !important; color: #fff !important; }
:root[data-theme="dark"] .dash-content .p-card-ndis,
:root[data-theme="dark"] .dash-content .p-card-days { color: var(--d-ink-mute) !important; }
:root[data-theme="dark"] .dash-content .p-card-notes-input { background: rgba(27,23,20,0.45) !important; color: var(--d-ink) !important; border-color: var(--d-hairline) !important; }
:root[data-theme="dark"] .dash-content .p-card-notes-input::placeholder { color: var(--d-ink-mute) !important; }

/* inputs/selects in dark -> dark glass too (no bright-white boxes) */
:root[data-theme="dark"] .dash-content input:not([type=checkbox]):not([type=radio]),
:root[data-theme="dark"] .dash-content select,
:root[data-theme="dark"] .dash-content textarea {
  background: rgba(27,23,20,0.45) !important; color: var(--d-ink) !important;
  border: 1px solid var(--d-hairline) !important;
}
:root[data-theme="dark"] .dash-content input::placeholder,
:root[data-theme="dark"] .dash-content textarea::placeholder { color: var(--d-ink-mute) !important; }

/* table rows inside the glassy tables: transparent so the box shows through */
:root[data-theme="dark"] .dash-content .admin-table td,
:root[data-theme="dark"] .dash-content .admin-table th,
:root[data-theme="dark"] .dash-content .task-table td,
:root[data-theme="dark"] .dash-content .task-table th { background: transparent !important; color: var(--d-ink); border-color: var(--d-hairline) !important; }

/* ============================================================
   DARK MODE, INTERACTIVE-STATE SWEEP (2026-06-13)
   Click-triggered surfaces (modals, dialogs, pickers) + the
   section/handbook content cards hardcode light hex bg / dark
   ink, so in dark mode they show as white boxes covering data
   or near-invisible dark-on-dark text. All rules below are
   dark-scoped only, light theme is untouched.
   ============================================================ */

/* --- tasks.html: Add-Task modal (inline-styled #fff box, no class) --- */
:root[data-theme="dark"] #task-modal > div {
  background:
    linear-gradient(transparent, transparent),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)),
    var(--d-surface) !important;
  border: 1px solid var(--d-hairline) !important;
}
:root[data-theme="dark"] #task-modal h2 { color: var(--d-ink) !important; }
:root[data-theme="dark"] #task-modal .form-label,
:root[data-theme="dark"] #task-modal label,
:root[data-theme="dark"] #task-modal p { color: var(--d-ink-soft) !important; }
:root[data-theme="dark"] #task-modal input:not([type=checkbox]):not([type=radio]),
:root[data-theme="dark"] #task-modal select,
:root[data-theme="dark"] #task-modal textarea {
  background: rgba(27,23,20,0.5) !important; color: var(--d-ink) !important; border: 1px solid var(--d-hairline) !important;
}
:root[data-theme="dark"] #task-modal input::placeholder,
:root[data-theme="dark"] #task-modal textarea::placeholder { color: var(--d-ink-mute) !important; }
/* the inline #f0f0f0 "Cancel" button -> dark chip */
:root[data-theme="dark"] #task-modal .btn:not(.btn-primary) { background: rgba(255,255,255,0.08) !important; color: var(--d-ink) !important; }
/* inline error box (#fff0ee) -> dark red tint */
:root[data-theme="dark"] #task-modal-error { background: rgba(240,121,90,0.16) !important; border-color: rgba(240,121,90,0.4) !important; color: #ffb9a6 !important; }

/* --- tasks.html: New-Project <dialog> (inline #fff, body-level) --- */
:root[data-theme="dark"] #project-dialog {
  background:
    linear-gradient(transparent, transparent),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)),
    var(--d-surface) !important;
  border: 1px solid var(--d-hairline) !important; color: var(--d-ink) !important;
}
:root[data-theme="dark"] #project-dialog h2 { color: var(--d-ink) !important; }
:root[data-theme="dark"] #project-dialog .form-label,
:root[data-theme="dark"] #project-dialog label,
:root[data-theme="dark"] #project-dialog p { color: var(--d-ink-soft) !important; }
:root[data-theme="dark"] #project-dialog input:not([type=checkbox]):not([type=radio]) {
  background: rgba(27,23,20,0.5) !important; color: var(--d-ink) !important; border: 1px solid var(--d-hairline) !important;
}
:root[data-theme="dark"] #project-dialog input::placeholder { color: var(--d-ink-mute) !important; }
:root[data-theme="dark"] #project-dialog [style*="border-top"] { border-top-color: var(--d-hairline) !important; }
:root[data-theme="dark"] #project-dialog .btn:not(.btn-primary) { background: rgba(255,255,255,0.08) !important; color: var(--d-ink) !important; }
:root[data-theme="dark"] #project-dialog::backdrop { background: rgba(0,0,0,0.5); }

/* --- tasks.html + meetings.html: status-picker popup options (#2F2F2F text
       + #f5f5f5 hover boxes on the dark popup) --- */
:root[data-theme="dark"] .status-picker-popup .sp-opt { color: var(--d-ink) !important; }
:root[data-theme="dark"] .status-picker-popup .sp-opt:hover { background: rgba(255,255,255,0.08) !important; }
:root[data-theme="dark"] .status-picker-popup .sp-opt.sp-active { background: rgba(255,255,255,0.12) !important; }
/* the "no status" sp-dot is inline #e0e0e0 grey = light box (status-colour
   dots stay, they're meaningful in both themes). Darken just the grey. */
:root[data-theme="dark"] .sp-dot[style*="e0e0e0"],
:root[data-theme="dark"] .sp-dot[style*="#e0e0e0"] { background: rgba(255,255,255,0.18) !important; }

/* --- tasks.html: quick-add bar + section headers + table header
       (.task-quick-top #fff, .kanban-section-head #f8f8f8,
        .kanban-section-count #ebebeb, .task-table-header #fafafa)
       all hardcode light backgrounds -> white boxes in dark. --- */
:root[data-theme="dark"] .dash-content .task-quick-top {
  background:
    linear-gradient(transparent, transparent),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)),
    var(--d-surface) !important;
  border-color: var(--d-hairline) !important; box-shadow: var(--d-card-shadow) !important;
}
:root[data-theme="dark"] .dash-content .kanban-section-head {
  background: rgba(255,255,255,0.04) !important; border-color: var(--d-hairline) !important; color: var(--d-ink) !important;
}
:root[data-theme="dark"] .dash-content .kanban-section-head:hover { background: rgba(255,255,255,0.07) !important; }
:root[data-theme="dark"] .dash-content .kanban-section-count {
  background: rgba(255,255,255,0.10) !important; color: var(--d-ink-mute) !important;
}
:root[data-theme="dark"] .dash-content .task-table-header {
  background: rgba(255,255,255,0.04) !important; border-color: var(--d-hairline) !important; color: var(--d-ink-mute) !important;
}

/* --- admin.html: tabs, active tab uses --dc (#2F2F2F) = invisible on dark;
       inactive #999 is dim. Lift both to theme ink. --- */
:root[data-theme="dark"] .dash-content .admin-tab { color: var(--d-ink-mute) !important; }
:root[data-theme="dark"] .dash-content .admin-tab.active,
:root[data-theme="dark"] .dash-content .admin-tab:hover:not(.active) { color: var(--d-ink) !important; }
/* admin.html: status badges defined in portal.css (#fef3c7 amber / #dcfce7
   mint) = light boxes on dark. Re-tint dark (scoped to the shell so the
   pre-auth pages that load portal.css alone keep the light badges). */
:root[data-theme="dark"] .dash-content .badge-pending {
  background: rgba(245,158,11,0.20) !important; color: #f3c779 !important;
}
:root[data-theme="dark"] .dash-content .badge-approved {
  background: rgba(95,208,138,0.20) !important; color: #9be8b5 !important;
}

/* --- meetings.html: NDIS agenda tag (light amber bg + ink forced light by the
       .mtg-card * wildcard = invisible). Give it a dark-readable amber chip. --- */
:root[data-theme="dark"] .dash-content .agenda-tag-ndis {
  background: rgba(245,158,11,0.20) !important; color: #f3c779 !important;
}
/* the section "+ Add" orange button got dimmed below brand contrast by .mtg-card *
   -> restore pure white on orange (matches light theme) */
:root[data-theme="dark"] .dash-content .agenda-section-add button { color: #fff !important; }

/* --- meetings.html: AGENDA-ITEM ACTION ROW (the white-box miss).
       Each agenda item renders an action row whose controls hardcode
       white/light hex backgrounds in meetings.html's inline <style> and
       were never themed -> render as WHITE boxes on the dark canvas:
         .agenda-btn (✓ Done, ↻ carry, ✎ edit)  -> background:#fff
         .agenda-btn--delete (✕)                 -> background:#fff
         .agenda-btn--save (Save, in edit mode)  -> background:#fff
         .agenda-carry-badge (↻ N×)              -> background:#f5f5f5
         .agenda-section-add input (add-item)    -> #fafafa / focus #fff
         .agenda-add-form + its input            -> #fafafa / #fff
       (The assign <select> + add-item <input> already darken via the
       generic .dash-content select/input rules; these don't.) --- */
:root[data-theme="dark"] .dash-content .agenda-btn {
  background: rgba(255,255,255,0.08) !important;
  color: var(--d-ink) !important;
  border-color: var(--d-hairline) !important;
}
:root[data-theme="dark"] .dash-content .agenda-btn:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: var(--d-ink-mute) !important;
}
:root[data-theme="dark"] .dash-content .agenda-btn--delete {
  color: var(--d-neg) !important; border-color: rgba(240,121,90,0.45) !important;
}
:root[data-theme="dark"] .dash-content .agenda-btn--delete:hover {
  background: rgba(240,121,90,0.16) !important; border-color: var(--d-neg) !important;
}
:root[data-theme="dark"] .dash-content .agenda-btn--save {
  color: var(--d-orange-ink) !important; border-color: rgba(255,96,32,0.5) !important;
}
:root[data-theme="dark"] .dash-content .agenda-btn--save:hover {
  background: rgba(255,96,32,0.12) !important;
}
:root[data-theme="dark"] .dash-content .agenda-carry-badge {
  background: rgba(255,255,255,0.10) !important; color: var(--d-ink-mute) !important;
}
/* add-item input rows (.agenda-section-add already darkened by generic input rule,
   but the inline focus state forces #fff -> override; .agenda-add-form is a light
   strip wrapping a white input) */
:root[data-theme="dark"] .dash-content .agenda-section-add input:focus,
:root[data-theme="dark"] .dash-content .agenda-add-form input[type="text"],
:root[data-theme="dark"] .dash-content .agenda-add-form input[type="text"]:focus {
  background: rgba(27,23,20,0.5) !important; color: var(--d-ink) !important; border-color: var(--d-hairline) !important;
}
:root[data-theme="dark"] .dash-content .agenda-add-form {
  background: rgba(255,255,255,0.03) !important; border-bottom-color: var(--d-hairline) !important;
}
/* agenda-row top hairline (#f5f5f5) -> dark hairline */
:root[data-theme="dark"] .dash-content .agenda-row { border-top-color: var(--d-hairline) !important; }

/* --- meetings.html: agenda SECTION-NUMBER badge. Inline-styled
       background:${sec.color}; two of the seven category colours read as
       light boxes on dark, the grey "no-category" (#aaa) and the amber
       (#f59e0b). The blue/green/red/purple/charcoal ones are dark enough.
       Darken just the two light ones (white number stays legible). --- */
:root[data-theme="dark"] .dash-content .agenda-section-num[style*="aaa"],
:root[data-theme="dark"] .dash-content .agenda-section-num[style*="#aaa"] {
  background: rgba(255,255,255,0.18) !important;
}
:root[data-theme="dark"] .dash-content .agenda-section-num[style*="f59e0b"] {
  background: #c2810a !important;
}

/* ============================================================
   DARK MODE, SECTION + HANDBOOK content cards.
   Containers (.content-card / .handbook-section / .case-note-template /
   .leader-card / .cert-card / .handbook-toc) are themed dark-glass above,
   but their inner body text keeps hardcoded #444 / #2F2F2F / #4a2a10 etc.
   -> dark-on-dark invisible. Flip descendant text to the theme ink.
   (No white-in-dark surfaces use these classes; the SA "paper" is an
   unclassed div and is deliberately left white + dark text.)
   ============================================================ */
:root[data-theme="dark"] .dash-content .content-card p,
:root[data-theme="dark"] .dash-content .content-card li,
:root[data-theme="dark"] .dash-content .content-card h2,
:root[data-theme="dark"] .dash-content .content-card h3,
:root[data-theme="dark"] .dash-content .content-card strong,
:root[data-theme="dark"] .dash-content .content-card em,
:root[data-theme="dark"] .dash-content .content-card label,
:root[data-theme="dark"] .dash-content .handbook-section p,
:root[data-theme="dark"] .dash-content .handbook-section li,
:root[data-theme="dark"] .dash-content .handbook-section h2,
:root[data-theme="dark"] .dash-content .handbook-section h3,
:root[data-theme="dark"] .dash-content .handbook-section h4,
:root[data-theme="dark"] .dash-content .handbook-section strong,
:root[data-theme="dark"] .dash-content .handbook-section em,
:root[data-theme="dark"] .dash-content .handbook-section span,
:root[data-theme="dark"] .dash-content .handbook-section label,
:root[data-theme="dark"] .dash-content .case-note-template,
:root[data-theme="dark"] .dash-content .case-note-template *,
:root[data-theme="dark"] .dash-content .leader-card .leader-name,
:root[data-theme="dark"] .dash-content .leader-card .leader-bio,
:root[data-theme="dark"] .dash-content .leader-name,
:root[data-theme="dark"] .dash-content .leader-bio { color: var(--d-ink) !important; }
/* softer/muted text variants */
:root[data-theme="dark"] .dash-content .leader-role,
:root[data-theme="dark"] .dash-content .handbook-section-num,
:root[data-theme="dark"] .dash-content .section-back,
:root[data-theme="dark"] .dash-content .section-breadcrumb { color: var(--d-ink-mute) !important; }
/* links inside content/info/case-note -> light rust (the #9A370B rust is for light bg) */
:root[data-theme="dark"] .dash-content .content-card a:not(.btn),
:root[data-theme="dark"] .dash-content .handbook-section a,
:root[data-theme="dark"] .dash-content .handbook-toc a,
:root[data-theme="dark"] .dash-content .info-box a,
:root[data-theme="dark"] .dash-content .case-note-template a { color: var(--d-orange-ink) !important; }

/* info-box: light peach bg (#fef9f5) + dark ink (#4a2a10) -> dark orange tint */
:root[data-theme="dark"] .dash-content .info-box,
:root[data-theme="dark"] .dash-content .highlight-box {
  background: rgba(255,96,32,0.10) !important; border-color: var(--d-hairline) !important;
}
:root[data-theme="dark"] .dash-content .info-box p,
:root[data-theme="dark"] .dash-content .info-box li,
:root[data-theme="dark"] .dash-content .info-box span { color: var(--d-ink-soft) !important; }
:root[data-theme="dark"] .dash-content .info-box strong { color: var(--d-orange-ink) !important; }

/* form labels / inputs inside section forms (the worker doc-upload forms) */
:root[data-theme="dark"] .dash-content .content-card .form-label,
:root[data-theme="dark"] .dash-content .handbook-section .form-label { color: var(--d-ink-soft) !important; }

/* ============================================================
   DARK MODE, PIPELINE body-level modals + slider (2026-06-13 sweep 2)
   The retention check-in modals (#retention-modal-s1/s2/s3) are fully
   INLINE-styled (background:#fff inner card, #2F2F2F/#666/#aaa text,
   #fff8f5 peach info box, white textareas/date inputs) and were never
   themed -> white boxes covering the form in dark. Also: the inline
   secondary .btn buttons (#f0f0f0 Cancel/Close/Back), #sa-amend-btn
   (#f5f0e0), the referral error box, and the delete-confirm slider
   (.del-slider-wrap/-thumb, .del-btn-cancel = #f3f4f6/#fff). Dark-only.
   ============================================================ */
/* retention modal inner card (direct child div of the overlay) */
:root[data-theme="dark"] #retention-modal-s1 > div,
:root[data-theme="dark"] #retention-modal-s2 > div,
:root[data-theme="dark"] #retention-modal-s3 > div {
  background:
    linear-gradient(transparent, transparent),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)),
    var(--d-surface) !important;
  border: 1px solid var(--d-hairline) !important;
  box-shadow: var(--d-card-shadow) !important;
}
/* all inline-coloured text inside the retention modals -> theme ink */
:root[data-theme="dark"] #retention-modal-s1 h2,
:root[data-theme="dark"] #retention-modal-s2 h2,
:root[data-theme="dark"] #retention-modal-s3 h2,
:root[data-theme="dark"] #retention-modal-s1 [style*="color:#2F2F2F"],
:root[data-theme="dark"] #retention-modal-s2 [style*="color:#2F2F2F"],
:root[data-theme="dark"] #retention-modal-s3 [style*="color:#2F2F2F"],
:root[data-theme="dark"] #retention-modal-s1 label,
:root[data-theme="dark"] #retention-modal-s2 label,
:root[data-theme="dark"] #retention-modal-s3 label { color: var(--d-ink) !important; }
:root[data-theme="dark"] #retention-modal-s1 [style*="color:#aaa"],
:root[data-theme="dark"] #retention-modal-s2 [style*="color:#aaa"],
:root[data-theme="dark"] #retention-modal-s3 [style*="color:#aaa"],
:root[data-theme="dark"] #retention-modal-s1 [style*="color:#666"],
:root[data-theme="dark"] #retention-modal-s2 [style*="color:#666"],
:root[data-theme="dark"] #retention-modal-s3 [style*="color:#666"],
:root[data-theme="dark"] #retention-modal-s1 [style*="color:#555"],
:root[data-theme="dark"] #retention-modal-s2 [style*="color:#555"],
:root[data-theme="dark"] #retention-modal-s3 [style*="color:#555"] { color: var(--d-ink-mute) !important; }
:root[data-theme="dark"] #retention-modal-s1 [style*="color:#999"],
:root[data-theme="dark"] #retention-modal-s2 [style*="color:#999"],
:root[data-theme="dark"] #retention-modal-s3 [style*="color:#999"] { color: var(--d-ink-mute) !important; }
/* peach info box (#fff8f5) inside retention s2/s3 -> dark orange tint */
:root[data-theme="dark"] #retention-modal-s2 [style*="background:#fff8f5"],
:root[data-theme="dark"] #retention-modal-s3 [style*="background:#fff8f5"] {
  background: rgba(255,96,32,0.10) !important; border-color: var(--d-hairline) !important; color: var(--d-ink-soft) !important;
}
/* white inputs/textareas in the retention modals -> dark glass */
:root[data-theme="dark"] #retention-modal-s1 textarea,
:root[data-theme="dark"] #retention-modal-s2 textarea,
:root[data-theme="dark"] #retention-modal-s3 textarea,
:root[data-theme="dark"] #retention-modal-s1 input[type="date"],
:root[data-theme="dark"] #retention-modal-s2 input[type="date"],
:root[data-theme="dark"] #retention-modal-s3 input[type="date"],
:root[data-theme="dark"] #retention-modal-s1 input[type="text"],
:root[data-theme="dark"] #retention-modal-s2 input[type="text"],
:root[data-theme="dark"] #retention-modal-s3 input[type="text"] {
  background: rgba(27,23,20,0.5) !important; color: var(--d-ink) !important; border: 1px solid var(--d-hairline) !important;
}

/* inline secondary .btn buttons inside ANY body-level modal (#f0f0f0 grey
   Cancel/Close/Back) -> dark chip. Scoped to within a modal/dialog so the
   page's primary CTAs (orange .btn-primary) are untouched. */
:root[data-theme="dark"] .hf-modal .btn:not(.btn-primary),
:root[data-theme="dark"] #referral-modal .btn:not(.btn-primary),
:root[data-theme="dark"] [id^="modal-"] .btn:not(.btn-primary),
:root[data-theme="dark"] [id^="retention-modal"] .btn:not(.btn-primary) {
  background: rgba(255,255,255,0.08) !important; color: var(--d-ink) !important; border-color: var(--d-hairline) !important;
}
/* SA "Request Amend" button (#f5f0e0 cream) -> dark amber chip */
:root[data-theme="dark"] #sa-amend-btn {
  background: rgba(245,158,11,0.18) !important; color: #f3c779 !important;
}
/* referral-modal inline error box (#fff0ee) -> dark red tint */
:root[data-theme="dark"] #referral-modal-error {
  background: rgba(240,121,90,0.16) !important; border-color: rgba(240,121,90,0.4) !important; color: #ffb9a6 !important;
}

/* delete-confirm slider: track + thumb + cancel were light greys -> dark */
:root[data-theme="dark"] .del-slider-wrap { background: rgba(255,255,255,0.06) !important; }
:root[data-theme="dark"] .del-slider-thumb { background: var(--d-orange) !important; color: #fff !important; }
:root[data-theme="dark"] .del-btn-cancel { background: rgba(255,255,255,0.08) !important; color: var(--d-ink) !important; }
:root[data-theme="dark"] .del-btn-cancel:hover { background: rgba(255,255,255,0.15) !important; }
:root[data-theme="dark"] .del-slider-label { color: var(--d-ink-mute) !important; }
:root[data-theme="dark"] .del-slider-hint { color: var(--d-ink-mute) !important; }

/* ============================================================
   DARK MODE, RETENTION page (retention.html) (2026-06-13 sweep 2)
   .ret-col (#f0f0f0 kanban columns) + .ret-info-box (#f0f7ff blue
   note) hardcode light backgrounds -> white/blue boxes in dark.
   (.ret-card already themed in the orange-mist block; the s1/s2/s3
   modals are .hf-modal so the modal rules cover them.) Dark-only. ===*/
:root[data-theme="dark"] .dash-content .ret-col {
  background: rgba(255,255,255,0.035) !important; border: 1px solid var(--d-hairline) !important;
}
:root[data-theme="dark"] .dash-content .ret-col-header { border-bottom-color: var(--d-hairline) !important; }
/* .ret-info-box lives inside the body-level s2/s3 .hf-modal (outside
   .dash-content) -> scope by class alone so the modal copy is caught too */
:root[data-theme="dark"] .ret-info-box {
  background: rgba(120,160,255,0.12) !important; border-color: rgba(120,160,255,0.3) !important; color: #c7d8ff !important;
}

/* ============================================================
   SIX-SKILL GATE FIXES (2026-06-10), P1: dark-theme section/column
   titles hardcoded #2F2F2F (var(--dc)) with no dark override =
   invisible on the dark canvas. Flip to theme ink in dark.
   ============================================================ */
:root[data-theme="dark"] .dash-content .kanban-section-title,
:root[data-theme="dark"] .dash-content .activity-panel-title,
:root[data-theme="dark"] .dash-content .ret-col-name,
:root[data-theme="dark"] .dash-content .ret-section-head,
:root[data-theme="dark"] .dash-content .kanban-section-head .kanban-section-title {
  color: var(--d-ink) !important;
}
/* activity log / digest items (rendered only with data) were #2F2F2F + #bbb
   on dark = invisible faint grey. Theme them. */
:root[data-theme="dark"] .dash-content .activity-desc,
:root[data-theme="dark"] .dash-content .activity-desc a { color: var(--d-ink) !important; }
:root[data-theme="dark"] .dash-content .activity-event-type,
:root[data-theme="dark"] .dash-content .activity-date,
:root[data-theme="dark"] .dash-content .digest-line,
:root[data-theme="dark"] .dash-content .digest-sub { color: var(--d-ink-mute) !important; }
:root[data-theme="dark"] .dash-content .activity-item { border-bottom-color: var(--d-hairline) !important; }

/* ============================================================
   LIGHT THEME, LEGACY FAINT-GREY REMEDIATION (2026-06-14 final pass)
   The dark sweeps remapped legacy hardcoded greys (#bbb/#999/#aaa) and
   faint-white notes for DARK only. In LIGHT theme these were left as-is
   and sit below AA on the light/white surfaces (and on dark hero bands).
   Scoped to :root:not([data-theme="dark"]) so dark overrides are untouched.
   Empty/placeholder/label text -> --d-ink-mute (#6A645D ~5.4:1 on light).
   ============================================================ */
:root:not([data-theme="dark"]) .dash-content .activity-item,
:root:not([data-theme="dark"]) .dash-content .activity-item[style] {
  color: var(--d-ink-mute) !important;
}
:root:not([data-theme="dark"]) .dash-content .activity-event-type,
:root:not([data-theme="dark"]) .dash-content .activity-date,
:root:not([data-theme="dark"]) .dash-content .activity-panel-sub,
:root:not([data-theme="dark"]) .dash-content .task-table-header,
:root:not([data-theme="dark"]) .dash-content .task-table-header > div,
:root:not([data-theme="dark"]) .dash-content .task-table-empty,
:root:not([data-theme="dark"]) .dash-content .task-table-add,
:root:not([data-theme="dark"]) .dash-content .kanban-section-count,
:root:not([data-theme="dark"]) .dash-content .kanban-section-title small,
:root:not([data-theme="dark"]) .dash-content .project-chip--add,
:root:not([data-theme="dark"]) .dash-content .project-chip-count,
:root:not([data-theme="dark"]) .dash-content #task-chart-empty {
  color: var(--d-ink-mute) !important;
}
/* the kanban-section-count chip bg (#ebebeb) is a touch light for its mute
   text at 8px, keep text mute but it now clears AA on #ebebeb (~4.6:1) */
/* tasks.html empty drop-zone placeholder: inline #bbb italic div, no class */
:root:not([data-theme="dark"]) .dash-content .task-table-body > div[style*="bbb"],
:root:not([data-theme="dark"]) .dash-content .task-table-body > div[style*="#bbb"] {
  color: var(--d-ink-mute) !important;
}
/* project-dialog description <p>: inline #999, light theme */
:root:not([data-theme="dark"]) #project-dialog p[style*="999"],
:root:not([data-theme="dark"]) #project-dialog p[style*="#999"] {
  color: var(--d-ink-mute) !important;
}

/* ============================================================
   home.html, participant cards, my-tasks table, last-meeting panel.
   These widgets predate the dashboard + were styled white-on-dark or
   with faint legacy greys (#aaa/#bbb/#888). In LIGHT theme the white
   meeting text vanished on the white card; in DARK the p-home-card
   stayed a white box + dark-ink cells went invisible. Theme both.
   ============================================================ */
/* participant card: white box -> dark glass in dark; meta grey -> mute */
:root[data-theme="dark"] .dash-content .p-home-card {
  background:
    linear-gradient(transparent, transparent),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)),
    var(--d-surface) !important;
  border-color: var(--d-hairline) !important;
}
:root[data-theme="dark"] .dash-content .p-home-card-name { color: var(--d-ink) !important; }
.dash-content .p-home-card-meta { color: var(--d-ink-mute) !important; }

/* my-tasks table: headers + cells -> theme tokens (were #bbb/#888/dark ink) */
.dash-content .home-task-table th { color: var(--d-ink-mute) !important; }
.dash-content .task-title-cell { color: var(--d-ink) !important; }
.dash-content .task-participant-cell a { color: var(--d-ink-soft) !important; }
.dash-content .task-due-cell { color: var(--d-ink-mute) !important; }
/* status due colours: keep meaningful, make AA in both themes */
.dash-content .task-due-cell.due-overdue { color: var(--d-neg) !important; }
:root:not([data-theme="dark"]) .dash-content .task-due-cell.due-overdue { color: #C8472B !important; }
.dash-content .task-due-cell.due-today { color: #B4571C !important; }
:root[data-theme="dark"] .dash-content .task-due-cell.due-today { color: #FFB088 !important; }

/* last-meeting panel: built white-on-dark; reconcile to theme tokens so it
   reads on the card in BOTH themes (white text was invisible on the light
   card; faint white .3/.35 failed even on dark). */
.dash-content .meeting-title { color: var(--d-ink) !important; }
.dash-content .meeting-date { color: var(--d-ink-mute) !important; }
.dash-content .meeting-action-list li { color: var(--d-ink-soft) !important; }
.dash-content .meeting-action-due { color: var(--d-ink-mute) !important; }
.dash-content .meeting-action-assignee { color: var(--d-orange-ink) !important; }

/* ============================================================
   meetings.html, light-theme legacy greys + orange-CTA contrast.
   Section descriptions (#aaa), meeting-card labels/eyebrows/empties
   (#999) failed AA on the light card. The "+ Add" and add-form Save
   buttons are white-on-orange (#FF6020) at 11px = 3.02:1 < AA, unify
   to INK-on-orange (#1B1714 on #FF6020 ~4.9:1) in BOTH themes.
   ============================================================ */
.dash-content .agenda-section-desc { color: var(--d-ink-mute) !important; }
.dash-content .mtg-eyebrow,
.dash-content .mtg-meta,
.dash-content .mtg-card-head .mtg-meta,
.dash-content .mtg-section-label,
.dash-content .mtg-empty { color: var(--d-ink-mute) !important; }
/* white-on-orange small buttons -> ink-on-orange (AA, brand-consistent) */
.dash-content .agenda-section-add button,
.dash-content .agenda-add-form button { color: var(--d-ink) !important; }
:root[data-theme="dark"] .dash-content .agenda-section-add button,
:root[data-theme="dark"] .dash-content .agenda-add-form button { color: #1B1714 !important; }
/* agenda-btn--save outline button: orange text -> AA rust on light, bright on dark */
:root:not([data-theme="dark"]) .dash-content .agenda-btn--save { color: var(--d-orange-ink) !important; }
/* meetings page-header subhead (#999 on the light app canvas) -> ink-mute */
.dash-content .mtg-page-header p { color: var(--d-ink-mute) !important; }

/* ============================================================
   pipeline.html, card legacy greys, status colours, modal CTAs.
   Light theme left these faint (#999/#aaa/#888/#bbb); status amber/
   red failed on white; white-on-orange/green CTAs at small sizes were
   ~3:1. Fix greys -> ink-mute, status -> AA tokens, CTAs -> ink-on-fill.
   ============================================================ */
/* legacy faint greys on cards + column labels + paused tray + retention */
.dash-content .kanban-phase-label,
.dash-content .p-card-leader,
.dash-content .p-card-ndis,
.dash-content .p-card-view-ref,
.dash-content .paused-tray-hint,
.dash-content .retention-sub { color: var(--d-ink-mute) !important; }
/* inline-styled retention subhead (#999) + loading line (#bbb) + paused
   tray hint (#bbb), no class, target by the inline colour fragment */
:root:not([data-theme="dark"]) .dash-content p[style*="color:#999"],
:root:not([data-theme="dark"]) .dash-content div[style*="color:#bbb"],
:root:not([data-theme="dark"]) .dash-content div[style*="color:#999"] { color: var(--d-ink-mute) !important; }
/* p-card-view-ref keeps its own bg; ensure text mute reads on it both themes */
:root[data-theme="dark"] .dash-content .p-card-view-ref { color: var(--d-ink) !important; }

/* status day-counters: amber/red fail on white. Use AA-safe tones per theme. */
.dash-content .p-card-days.warn { color: #B4571C !important; }
:root[data-theme="dark"] .dash-content .p-card-days.warn { color: #FFB088 !important; }
.dash-content .p-card-days.danger,
.dash-content .p-card-followup.overdue { color: #C8472B !important; }
:root[data-theme="dark"] .dash-content .p-card-days.danger,
:root[data-theme="dark"] .dash-content .p-card-followup.overdue { color: #F0795A !important; }

/* the dark .p-card * wildcard (defined earlier) recolours the white-on-fill
   action button text to ink -> kills contrast on the green/orange fill.
   Exempt the action button + keep its label white on a DARKENED green that
   clears AA at the small label size in BOTH themes. */
.dash-content .p-card-action,
.dash-content .p-card-action.green,
.dash-content .p-card-action.orange,
:root[data-theme="dark"] .dash-content .p-card .p-card-action { color: #fff !important; }
.dash-content .p-card-action.green { background: #15803D !important; }

/* SA → link: brand orange #FF6020 at 8px on the card = 3:1. Use AA rust on
   light, bright on dark. */
:root:not([data-theme="dark"]) .dash-content .p-card-open { color: var(--d-orange-ink) !important; }
:root[data-theme="dark"] .dash-content .p-card-open { color: var(--d-orange-ink) !important; }

/* retention + referral modal CTAs are inline background:var(--vv);color:#fff
   (orange) at ~13.6px = 3.02:1 < AA. Unify to INK-on-orange. The undo-toast
   button is the same. These modals are BODY-LEVEL (outside .dash-content). */
[id^="retention-modal"] button[style*="var(--vv)"],
#referral-modal button[style*="var(--vv)"],
#undo-toast-btn { color: #1B1714 !important; }

/* retention "Participant Feedback" eyebrow = orange #FF6020 (3.02 small) ->
   AA rust on light, bright on dark. "Coordinator Feedback" = periwinkle
   #6c6cff (4.0/4.4) -> theme-aware info tone that clears AA. Body-level. */
:root:not([data-theme="dark"]) [id^="retention-modal"] div[style*="color:var(--vv)"] { color: var(--d-orange-ink) !important; }
:root[data-theme="dark"] [id^="retention-modal"] div[style*="color:var(--vv)"] { color: #FFB088 !important; }
:root:not([data-theme="dark"]) [id^="retention-modal"] div[style*="6c6cff"] { color: #4646C8 !important; }
:root[data-theme="dark"] [id^="retention-modal"] div[style*="6c6cff"] { color: #AEB6FF !important; }

/* ============================================================
   referrers.html, header subhead, card greys, orange chips, empties.
   #888/#aaa/#bbb/#ccc legacy greys failed AA on light; ref-name went
   dark-on-dark in dark; the peach count-badge was a light box in dark
   + its orange text was ~2.8:1; the orange email link was 3.02.
   ============================================================ */
.dash-content .ref-header p { color: var(--d-ink-mute) !important; }
.dash-content .ref-org,
.dash-content .ref-last-date,
.dash-content .ref-loading,
.dash-content .ref-empty,
.dash-content .ref-search-icon { color: var(--d-ink-mute) !important; }
.dash-content .ref-empty strong { color: var(--d-ink-soft) !important; }
.dash-content #ref-chart-empty { color: var(--d-ink-mute) !important; }
/* "No email on file" inline #ccc */
.dash-content span[style*="color:#ccc"],
.dash-content span[style*="#ccc"] { color: var(--d-ink-mute) !important; }
/* ref-name dark-on-dark in dark theme */
:root[data-theme="dark"] .dash-content .ref-name { color: var(--d-ink) !important; }
/* email link orange -> AA rust on light, bright on dark */
:root:not([data-theme="dark"]) .dash-content .ref-email-link { color: var(--d-orange-ink) !important; }
:root[data-theme="dark"] .dash-content .ref-email-link { color: var(--d-orange-ink) !important; }
/* count-badge: peach chip + orange text. Light -> rust text on peach (AA);
   dark -> dark orange tint chip + light rust text. */
:root:not([data-theme="dark"]) .dash-content .ref-count-badge { color: var(--d-orange-ink) !important; }
:root[data-theme="dark"] .dash-content .ref-count-badge {
  background: rgba(255,96,32,0.16) !important; color: #FFB088 !important;
}

/* ============================================================
   scoreboard.html, orange legend label + sparkline track in dark.
   "Vermilion" legend = orange #FF6020 (3.02 small) -> AA rust on light.
   The sparkline base bars are a light #e8e8e8 track that reads as white
   boxes on the dark canvas -> theme the non-"hi" track dark. (The "hi"
   bars stay brand orange, they're the meaningful data.)
   ============================================================ */
:root:not([data-theme="dark"]) .dash-content .sb-tile-sub span[style*="var(--vv)"] { color: var(--d-orange-ink) !important; }
:root[data-theme="dark"] .dash-content .sb-spark-bar:not(.hi) { background: rgba(255,255,255,0.12) !important; }

/* ============================================================
   admin.html, inactive tab grey + archetype badges in dark.
   Inactive .admin-tab is #999 (2.6 on light). badge-founder/team_leader/
   worker (amber/blue/grey light chips) are light boxes on the dark canvas, re-tint dark like badge-pending/approved already are. (Scoped to the
   shell so pre-auth pages loading portal.css alone keep light badges.)
   ============================================================ */
:root:not([data-theme="dark"]) .dash-content .admin-tab { color: var(--d-ink-mute) !important; }
:root[data-theme="dark"] .dash-content .badge-founder {
  background: rgba(245,158,11,0.20) !important; color: #f3c779 !important;
}
:root[data-theme="dark"] .dash-content .badge-team_leader {
  background: rgba(120,160,255,0.20) !important; color: #c7d8ff !important;
}
:root[data-theme="dark"] .dash-content .badge-worker {
  background: rgba(255,255,255,0.12) !important; color: var(--d-ink) !important;
}

/* ============================================================
   retention.html, card greys, status days, review CTA, modal labels.
   ret-card-meta #aaa; ret-card-days amber/red fail on white; ret-review-btn
   white-on-orange (3.02); ret-section-head orange eyebrow (3.02); modal
   ret-q-label went dark-on-dark in dark (uses --dc, not caught by the
   generic hf-modal label rule).
   ============================================================ */
.dash-content .ret-card-meta { color: var(--d-ink-mute) !important; }
.dash-content .ret-card-days.warn { color: #B4571C !important; }
:root[data-theme="dark"] .dash-content .ret-card-days.warn { color: #FFB088 !important; }
.dash-content .ret-card-days.danger { color: #C8472B !important; }
:root[data-theme="dark"] .dash-content .ret-card-days.danger { color: #F0795A !important; }
/* review button: orange fill -> ink-on-orange (exempt from .ret-card * ink) */
.dash-content .ret-review-btn,
:root[data-theme="dark"] .dash-content .ret-card .ret-review-btn { color: #1B1714 !important; }
/* section-head eyebrow orange -> AA rust on light, bright on dark.
   These live in body-level .hf-modal, so no .dash-content scope. */
:root:not([data-theme="dark"]) .ret-section-head { color: var(--d-orange-ink) !important; }
:root[data-theme="dark"] .ret-section-head { color: #FFB088 !important; }
/* modal question labels (--dc dark ink) -> theme ink in dark */
:root[data-theme="dark"] .ret-q-label { color: var(--d-ink) !important; }

/* ============================================================
   handbook.html, orange eyebrow + in-content resource links.
   .eyebrow-hb (#FF6020 small, 4.43) and the external resource links
   (#FF6020, 3.02) fail AA on the white content cards in LIGHT theme.
   (Dark already routes content/handbook links to orange-ink.) Light ->
   AA rust; dark eyebrow -> bright.
   ============================================================ */
/* eyebrow-hb sits on the DARK .handbook-header band (#2F2F2F) in BOTH
   themes -> needs a BRIGHT orange (rust would fail on the dark band). */
.dash-content .eyebrow-hb { color: #FF8A4C !important; }
:root:not([data-theme="dark"]) .dash-content .handbook-section a,
:root:not([data-theme="dark"]) .dash-content .content-card a:not(.btn),
:root:not([data-theme="dark"]) .dash-content .case-note-template a { color: var(--d-orange-ink) !important; }

/* ============================================================
   section-1..6 (worker onboarding), info-box strong, inline grey
   labels, orange submit CTAs.
   .info-box strong = var(--bo) #cc5500 -> 4.04 on the light peach box
   (just under AA). Inline #888 definition-list labels -> 3.54. The
   "Send to Robynne →" style submit buttons are white-on-orange (3.02).
   ============================================================ */
:root:not([data-theme="dark"]) .dash-content .info-box strong,
:root:not([data-theme="dark"]) .dash-content .highlight-box strong { color: var(--d-orange-ink) !important; }
/* inline #888 labels inside section content */
:root:not([data-theme="dark"]) .dash-content .content-card span[style*="color:#888"],
:root:not([data-theme="dark"]) .dash-content .content-card span[style*="#888"],
:root:not([data-theme="dark"]) .dash-content span[style*="color:#888"] { color: var(--d-ink-mute) !important; }
/* section submit buttons: inline background:var(--vv);color:#fff -> ink-on-orange */
.dash-content .content-card button[style*="var(--vv)"],
.dash-content form button[type="submit"][style*="var(--vv)"] { color: #1B1714 !important; }

/* digest dark-card note: rgba(255,255,255,0.38) over #2F2F2F = 3.3:1.
   Lift to 0.72 white (~6:1 on the dark digest card). Both themes (the card
   is dark in both), so unscoped. */
.dash-content .digest-note { color: rgba(255,255,255,0.72) !important; }

/* digest-eyebrow + the inline "N overdue" highlight are brand orange #FF6020
   at small sizes on the DARK digest card (#2F2F2F) -> 4.43:1, just under AA
   4.5 for small text. Both live on the dark card in both themes, so brighten
   to #FF8A4C (~5.4:1 on #2F2F2F). The "N overdue" strong is inline-styled, so
   !important + a specific selector is required to win. */
.dash-content .digest-card .digest-eyebrow { color: #FF8A4C !important; }
.dash-content .digest-card .digest-summary strong[style*="FF6020"],
.dash-content .digest-card .digest-summary strong[style*="ff6020"] { color: #FF8A4C !important; }

/* ============================================================
   SIX-SKILL GATE FINAL FIX (2026-06-10), LIGHT-theme legacy
   contrast cluster (dark already 0 fails). Greys use the
   theme-aware --d-ink-mute (#6A645D light / light-grey dark) so
   they pass in BOTH themes; orange-fill CTAs -> ink (5.89 both),
   per the locked ink-on-orange convention.
   ============================================================ */
/* orange-fill CTAs -> ink text (passes both themes) */
.dash-content .p-card-action.orange,
.dash-content .approve-btn,
.dash-content .ref-avatar,
.dash-content .step-num,
.dash-content .approve-count { color: #1B1714 !important; }
/* green action: darken fill so white passes */
.dash-content .p-card-action.green { background: #0F6B30 !important; color: #fff !important; }
/* legacy affordance greys -> theme-aware muted (fixes light, keeps dark) */
.dash-content .p-card-days,
.dash-content .ref-stat-label,
.dash-content .ref-participant-date,
.dash-content .ref-participants-title,
.dash-content .ref-last-date,
.dash-content .ref-org,
.dash-content .agenda-section-count,
.dash-content .agenda-section-chevron,
.dash-content .agenda-drag-handle,
.dash-content .p-card-delete-btn,
.dash-content .kanban-col-desc-btn,
.dash-content .ref-chevron,
.dash-content .hf-modal-close { color: var(--d-ink-mute) !important; }
/* orange text links / required asterisks -> theme-aware AA rust */
.dash-content .ref-pipeline-link,
.dash-content .req,
.dash-content .form-label .req { color: var(--d-orange-ink) !important; }
/* tasks active project chip count -> light on the dark active chip (both themes) */
.dash-content .project-chip.active .project-chip-count { color: rgba(255,255,255,0.88) !important; }
/* section divider glyph readable */
.dash-content .section-divider { color: var(--d-ink-mute) !important; }

/* LIGHT-ONLY: agenda category badge numeral -> ink on its light badge.
   (Dark theme already themes this badge; do not override dark.) */
:root:not([data-theme="dark"]) .dash-content .agenda-section-num { color: #1B1714 !important; }

/* ============================================================
   FIX (2026-06-10): the TASK-TABLE rows (.task-row-grid) were never
   themed for dark, .task-row-grid sets color:var(--dc) #2F2F2F
   (dark-on-dark title), white hover, #ccc drag handle. Theme them.
   (Different component from .activity-*, that's why it slipped.)
   ============================================================ */
:root[data-theme="dark"] .dash-content .task-row-grid,
:root[data-theme="dark"] .dash-content .task-row-title,
:root[data-theme="dark"] .dash-content .task-row-grid .task-row-title a { color: var(--d-ink) !important; }
:root[data-theme="dark"] .dash-content .task-row-grid:hover { background: var(--d-surface-2) !important; }
:root[data-theme="dark"] .dash-content .row-drag { color: var(--d-ink-mute) !important; }
:root[data-theme="dark"] .dash-content .task-row-grid { border-bottom-color: var(--d-hairline) !important; }

/* ============================================================
   SYSTEMIC DARK-MODE TEXT FIX (2026-06-14), ROOT CAUSE
   Every "invisible text" bug across the portal traces to ONE source:
   text painted color:var(--dc) (#2F2F2F) or hardcoded #2F2F2F with no
   dark override -> dark-on-dark. This block flips ALL of it to --d-ink
   in one pass: inline styles (attribute selectors) AND page-local
   <style> classes (:is list). Scoped to .dash-content. The sa-builder
   print document (#sa-document) is deliberately RESTORED to paper-ink
   below so the printable SA stays white-paper/dark-ink in either theme.
   var(--dc) used as background/border (selected pills, avatars, chip
   borders) is intentionally NOT matched here.
   ============================================================ */

/* 1. INLINE color:var(--dc) / #2F2F2F text, every page, every modal */
:root[data-theme="dark"] .dash-content [style*="color:var(--dc)"],
:root[data-theme="dark"] .dash-content [style*="color: var(--dc)"],
:root[data-theme="dark"] .dash-content [style*="color:#2F2F2F"],
:root[data-theme="dark"] .dash-content [style*="color: #2F2F2F"],
:root[data-theme="dark"] .dash-content [style*="color:#2f2f2f"],
:root[data-theme="dark"] .dash-content [style*="color: #2f2f2f"] {
  color: var(--d-ink) !important;
}

/* 2. PAGE-LOCAL <style> classes painting var(--dc)/#2F2F2F as text */
:root[data-theme="dark"] .dash-content :is(
  .home-section-title, .p-home-card-name, .task-title-cell,
  .mtg-card-head h2, .mtg-item-text, .mtg-item-add, .mtg-item-project,
  .mtg-owner-chip, .agenda-section-title, .agenda-row .agenda-text,
  .mtg-prev summary, .mtg-page-header h1, .mtg-import-status,
  .ps-tile-value, .kanban-col-name, .p-card-name,
  .ref-search, .ref-stat-value, .ref-name, .ref-participant-name,
  .ret-col-name, .ret-card-name, .ret-q-label, .ret-notes, .ret-checkbox-label,
  .sb-tile-value,
  .task-quick-top select, .project-chip, .kanban-section-title,
  .task-row-title, .sp-opt, .activity-panel-title, .activity-desc
) {
  color: var(--d-ink) !important;
}

/* 3. FORM CONTROLS painting var(--dc), also need a dark field
      (light ink on a white field would be unreadable) */
:root[data-theme="dark"] .dash-content :is(
  .filter-bar select, .p-card-followup input[type=date],
  .agenda-add-form input[type="text"], .sb-inline-input
) {
  color: var(--d-ink) !important;
  background-color: var(--d-surface) !important;
  border-color: var(--d-hairline) !important;
}

/* 4. RESTORE: the sa-builder printable document stays paper-ink in dark
      (ID beats the .dash-content attribute rule above) */
:root[data-theme="dark"] #sa-document,
:root[data-theme="dark"] #sa-document [style*="color:#2F2F2F"],
:root[data-theme="dark"] #sa-document [style*="color: #2F2F2F"],
:root[data-theme="dark"] #sa-document [style*="color:var(--dc)"] {
  color: #2F2F2F !important;
}

/* ============================================================
   DARK-MODE POLISH (2026-06-14), design-gate flags -> 10/10
   1. Visible keyboard focus on the form controls the blanket rule
      repaints (selects/date inputs had no dark focus ring).
   2. Activity-feed status dots: var(--dc) dot was invisible on dark;
      raw #22c55e/#3b82f6 were unadjusted hot chroma -> warm-dark remap.
   ============================================================ */
:root[data-theme="dark"] .dash-content :is(
  .filter-bar select, .p-card-followup input[type=date],
  .agenda-add-form input[type="text"], .sb-inline-input,
  .task-quick-top select
):focus-visible {
  outline: 2px solid var(--d-orange) !important;
  outline-offset: 2px !important;
  border-color: var(--d-orange) !important;
}

:root[data-theme="dark"] .dash-content .dot-stage-move { background: var(--d-ink-mute) !important; }
:root[data-theme="dark"] .dash-content .dot-new-worker { background: var(--d-pos) !important; }
:root[data-theme="dark"] .dash-content .dot-service    { background: #8FB4E8 !important; }

/* ============================================================
   CASELOAD CHIPS (home.html), un-box them (2026-06-17).
   The greedy [class*="-chip"] dark rule was filling every draggable
   caseload name (.cl-chip / .cl-chip-name) with a rgba(255,255,255,0.10)
   box, so names read as grey input fields. They are drag handles: keep
   them transparent, surface only on hover (matches their own design).
   ============================================================ */
:root[data-theme="dark"] .dash-content .cl-chip,
:root[data-theme="dark"] .dash-content .cl-chip-name {
  background: transparent !important;
}
:root[data-theme="dark"] .dash-content .cl-chip:hover {
  background: var(--d-surface-2) !important;
}

/* ============================================================
   DARK MODALS, OPAQUE (2026-06-17).
   Modals sit over a dimmed page, so the glassy 0.74 surface let the
   pipeline text bleed through and read as distracting. Give every
   modal/dialog/popover a SOLID dark panel (kill the blur, keep the
   subtle top-light sheen) and deepen the scrim for clean separation.
   ============================================================ */
:root[data-theme="dark"] .hf-modal,
:root[data-theme="dark"] #referral-modal > div,
:root[data-theme="dark"] #task-modal > div,
:root[data-theme="dark"] #project-dialog,
:root[data-theme="dark"] #retention-modal-s1 > div,
:root[data-theme="dark"] #retention-modal-s2 > div,
:root[data-theme="dark"] #retention-modal-s3 > div,
:root[data-theme="dark"] .del-modal-box,
:root[data-theme="dark"] .status-picker-popup,
:root[data-theme="dark"] .stage-note-prompt {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0)),
    #201E1B !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* deepen the scrim behind body-level overlays (these set bg inline) */
:root[data-theme="dark"] #referral-modal,
:root[data-theme="dark"] #task-modal,
:root[data-theme="dark"] #retention-modal-s1,
:root[data-theme="dark"] #retention-modal-s2,
:root[data-theme="dark"] #retention-modal-s3 { background: rgba(0,0,0,0.66) !important; }
:root[data-theme="dark"] .hf-modal-overlay,
:root[data-theme="dark"] .del-modal-overlay { background: rgba(0,0,0,0.66) !important; }

/* ============================================================
   WORKFORCE CAPACITY  (admin.html "Workforce capacity" tab, 2026-06-30)
   Per support worker: ShiftCare hours-doing vs an editable weekly
   target, with a fill bar. Own .wc-* namespace (sb-* is page-local
   to scoreboard.html). Theme-aware via --d-* tokens; amber added
   locally for the under-capacity / "room" bar + label state.
   ============================================================ */
:root { --wc-amber: #C9871F; --wc-amber-ink: #8A5A12; --wc-green-ink: #1B7A43; }
:root[data-theme="dark"] { --wc-amber: #E6A94E; --wc-amber-ink: #F3C779; --wc-green-ink: #5FD08A; }

.wc-scoreboard { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 4px 0 14px; }
.wc-kpi { background: var(--d-surface); border: 1px solid var(--d-hairline); border-radius: 14px; padding: 15px 16px; min-height: 104px; display: flex; flex-direction: column; box-shadow: var(--d-card-shadow); }
.wc-kpi--dark { background: #1B1714; border-color: #1B1714; }
:root[data-theme="dark"] .wc-kpi--dark { background: #262220; border-color: var(--d-hairline); }
.wc-kpi--dark .wc-kpi-label { color: #FFB99A; }
.wc-kpi--dark .wc-kpi-value { color: #fff; }
.wc-kpi--dark .wc-kpi-value span, .wc-kpi--dark .wc-kpi-sub { color: rgba(255,255,255,0.66); }
.wc-kpi--accent { background: var(--d-orange-bg); border-color: color-mix(in srgb, var(--d-orange) 30%, transparent); }
.wc-kpi--accent .wc-kpi-label, .wc-kpi--accent .wc-kpi-value, .wc-kpi--accent .wc-kpi-sub { color: var(--d-orange-ink); }
.wc-kpi--accent .wc-kpi-value span { color: var(--d-orange-ink); opacity: .7; }
.wc-kpi-label { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--d-ink-mute); }
.wc-kpi-value { font-size: 1.9rem; font-weight: 700; margin-top: auto; color: var(--d-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.05; }
.wc-kpi-value span { font-size: 0.9rem; font-weight: 600; color: var(--d-ink-mute); margin-left: 2px; }
.wc-kpi-value.wc-accent { color: var(--d-orange-ink); }
.wc-kpi-sub { font-size: 0.64rem; color: var(--d-ink-mute); margin-top: 2px; }

.wc-sub { font-size: 0.74rem; color: var(--d-ink-mute); margin: 0 0 14px; }
.wc-sub:empty { display: none; }

.wc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.wc-loading { grid-column: 1/-1; color: var(--d-ink-mute); font-size: 0.88rem; padding: 24px 4px; }

.wc-tile { background: var(--d-surface); border: 1px solid var(--d-hairline); border-radius: 14px; padding: 16px; box-shadow: var(--d-card-shadow); min-width: 0; transition: box-shadow .18s ease, transform .18s ease; }
.wc-tile:hover { box-shadow: var(--d-card-shadow-hover); transform: translateY(-2px); }
.wc-tile--editing, .wc-tile--editing:hover { transform: none; border-color: color-mix(in srgb, var(--d-orange) 55%, transparent); }
.wc-tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.wc-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; background: var(--d-orange-bg); color: var(--d-orange-ink); }
:root[data-theme="dark"] .wc-av { background: linear-gradient(135deg, var(--d-orange), #FF8A4C); color: #1B1714; }
.wc-id { min-width: 0; flex: 1; }
.wc-name { font-weight: 700; font-size: 0.92rem; color: var(--d-ink); line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wc-type { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--d-ink-mute); }
.wc-edit { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--d-hairline); background: var(--d-surface); color: var(--d-ink-mute); cursor: pointer; display: grid; place-items: center; transition: color .15s ease, border-color .15s ease; }
.wc-edit:hover { color: var(--d-ink); border-color: var(--d-ink-mute); }

.wc-hours { display: flex; align-items: baseline; gap: 5px; margin-bottom: 9px; }
.wc-doing { font-size: 1.55rem; font-weight: 700; color: var(--d-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wc-target { font-size: 0.85rem; font-weight: 600; color: var(--d-ink-mute); }

.wc-bar { height: 9px; background: var(--d-hairline); border-radius: 99px; overflow: hidden; }
.wc-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--d-pos); transition: width .5s ease; }
.wc-bar--room > i { background: var(--wc-amber); }
.wc-bar--over > i { background: var(--d-neg); }

.wc-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 0.66rem; font-weight: 600; }
.wc-foot-r { color: var(--d-ink-mute); }
.wc-foot--ok { color: var(--wc-green-ink); }
.wc-foot--room { color: var(--wc-amber-ink); }
.wc-foot--over { color: var(--d-neg); }

.wc-tile--need { border-style: dashed; }
.wc-need-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--d-orange-ink); margin-bottom: 7px; }
.wc-edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wc-input { width: 68px; height: 34px; border: 1px solid var(--d-hairline); border-radius: 8px; padding: 0 8px; font: 700 0.95rem 'General Sans', sans-serif; color: var(--d-ink); background: var(--d-surface); }
.wc-input:focus { outline: none; border-color: var(--d-orange); box-shadow: 0 0 0 3px var(--d-orange-bg); }
.wc-unit { font-size: 0.78rem; color: var(--d-ink-mute); font-weight: 600; }
.wc-save { margin-left: auto; background: var(--d-orange); color:#1B1714; border: none; border-radius: 8px; height: 34px; padding: 0 14px; font: 700 0.8rem 'General Sans', sans-serif; cursor: pointer; }
.wc-save:hover { background: #E9551A; }
.wc-save:disabled { opacity: .6; cursor: default; }
.wc-cancel { background: transparent; border: 1px solid var(--d-hairline); border-radius: 8px; height: 34px; padding: 0 12px; font: 600 0.78rem 'General Sans', sans-serif; color: var(--d-ink-mute); cursor: pointer; }
.wc-cancel:hover { color: var(--d-ink); border-color: var(--d-ink-mute); }
.wc-need-sub { font-size: 0.64rem; color: var(--d-ink-mute); margin-top: 8px; }

@media (max-width: 900px) { .wc-scoreboard { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .wc-scoreboard { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wc-tile, .wc-bar > i, .wc-edit { transition: none; } .wc-tile:hover { transform: none; } }

/* --- workforce capacity: remove/hide a worker + restore strip (2026-06-30) --- */
.wc-actions { display: flex; gap: 6px; flex: none; }
.wc-remove { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--d-hairline); background: var(--d-surface); color: var(--d-ink-mute); cursor: pointer; display: grid; place-items: center; transition: color .15s ease, border-color .15s ease; }
.wc-remove:hover { color: var(--d-neg); border-color: var(--d-neg); }

.wc-subrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.wc-sub-text { font-size: 0.74rem; color: var(--d-ink-mute); }
.wc-hidden-toggle { background: none; border: none; font-family: 'General Sans', sans-serif; font-size: 0.72rem; font-weight: 700; color: var(--d-orange-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; white-space: nowrap; }
.wc-hidden-toggle:hover { text-decoration: underline; }

.wc-hidden-head { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--d-ink-mute); margin: 22px 0 12px; }
.wc-hidden-head span { font-weight: 500; text-transform: none; letter-spacing: 0; }
.wc-hidden-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.wc-hidden-tile { background: var(--d-surface-2); border: 1px dashed var(--d-hairline); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.wc-hidden-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 0.72rem; background: var(--d-hairline); color: var(--d-ink-mute); }
.wc-hidden-id { min-width: 0; flex: 1; }
.wc-hidden-name { font-weight: 600; font-size: 0.86rem; color: var(--d-ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-hidden-sub { font-size: 0.62rem; color: var(--d-ink-mute); }
.wc-restore { flex: none; display: inline-flex; align-items: center; gap: 5px; background: var(--d-surface); border: 1px solid var(--d-hairline); border-radius: 8px; height: 30px; padding: 0 11px; font-family: 'General Sans', sans-serif; font-size: 0.72rem; font-weight: 700; color: var(--d-ink); cursor: pointer; transition: border-color .15s ease; }
.wc-restore:hover { border-color: var(--d-ink-mute); }
.wc-restore svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .wc-remove, .wc-restore { transition: none; } }

/* --- workforce capacity: no-target tile is hours-led (2026-06-30) --- */
.wc-hours--solo { margin-bottom: 12px; }
.wc-hours--solo .wc-doing { font-size: 1.7rem; }
.wc-hours--solo .wc-target { margin-left: 1px; }
.wc-settarget { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; background: none; border: 1px dashed color-mix(in srgb, var(--d-orange) 45%, var(--d-hairline)); border-radius: 9px; height: 36px; font-family: 'General Sans', sans-serif; font-size: 0.76rem; font-weight: 700; color: var(--d-orange-ink); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.wc-settarget:hover { background: var(--d-orange-bg); border-color: var(--d-orange); }
.wc-settarget svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .wc-settarget { transition: none; } }

/* --- workforce capacity: button press states (gate polish 2026-06-30) --- */
.wc-settarget:active, .wc-save:active, .wc-restore:active, .wc-edit:active, .wc-remove:active, .wc-cancel:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .wc-settarget:active, .wc-save:active, .wc-restore:active, .wc-edit:active, .wc-remove:active, .wc-cancel:active { transform: none; } }

/* =====================================================================
   Cross-portal workspace tabs: Circle Square, Human First, BLANK.
   Quiet text links on their own row above the page title, shelved off
   by a hairline so they read as chrome this portal owns. No brand
   marks. The current workspace borrows HF's own "current is orange"
   idiom from the sidebar rather than carrying a decorative dot.
   Mirrors the same component in the CS + BLANK portals.
   ===================================================================== */
.dash-topbar.has-ws { flex-wrap: wrap; row-gap: 0; }
.ws-row {
  flex: 0 0 100%; display: flex; min-width: 0;
  border-bottom: 1px solid var(--d-hairline);
  padding-bottom: 13px; margin-bottom: 15px;
}
.ws-tabs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; max-width: 100%;
}
.ws-tab {
  display: inline-flex; align-items: center; height: 18px;
  font-family: 'General Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500;
  line-height: 1; color: var(--d-ink-mute); text-decoration: none; white-space: nowrap;
  transition: color .16s ease;
}
a.ws-tab:hover { color: var(--d-ink); }
a.ws-tab:focus-visible { outline: 2px solid var(--d-orange); outline-offset: 3px; border-radius: 2px; }
.ws-tab.is-current { color: var(--d-orange-ink); font-weight: 600; }
@media (max-width: 760px) {
  .ws-tabs { gap: 20px; }
  .ws-tab { font-size: 12px; }
  .ws-row { padding-bottom: 11px; margin-bottom: 12px; }
}

/* 2026-08-01: muted text needs a dark partner. #6A645D is 5.07:1 on paper but only
   3.2:1 on the dark canvas, so empty states and hints were failing in dark only. */
:root[data-theme="dark"] .q-empty,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .qos-dd-empty,
:root[data-theme="dark"] .cl-hint,
:root[data-theme="dark"] .mr-subtitle,
:root[data-theme="dark"] .editable-hint { color: rgba(246,241,236,0.72) !important; }

/* avatar chips: the initials are pinned to ink, so the chip ground must stay light in
   BOTH themes or the ink lands on the dark canvas.
   .crm-av is deliberately NOT in this list. It takes an inline `background: linear-gradient(...)`
   from the warm ramp, and a background IMAGE paints over background-COLOR, so the peach ground
   here never actually showed and the ink was landing on the dark ramp at 2.93:1. The ramp was
   designed for white initials, so it gets white. */
.cl-av, .owner-avatar { background-color: #F1C7AD !important; color:#1B1714 !important; }
:root[data-theme="dark"] .cl-av,
:root[data-theme="dark"] .owner-avatar { background-color:#F1C7AD !important; color:#1B1714 !important; }
.crm-av, :root[data-theme="dark"] .crm-av { color:#fff !important; }

/* agenda section numbers take an arbitrary per-section colour from an inline style,
   so contrast was a lottery. Pin the chip ground and the digit. */
.agenda-section-num { background-color:#F1C7AD !important; color:#1B1714 !important; }

/* ApexCharts ships its own legend/axis greys that ignore our tokens */
.apexcharts-legend-text { color: var(--d-ink-soft) !important; fill: var(--d-ink-soft) !important; }
.apexcharts-xaxis text, .apexcharts-yaxis text { fill: var(--d-ink-soft) !important; }
:root[data-theme="dark"] .apexcharts-legend-text { color: rgba(246,241,236,.82) !important; fill: rgba(246,241,236,.82) !important; }
:root[data-theme="dark"] .apexcharts-xaxis text,
:root[data-theme="dark"] .apexcharts-yaxis text { fill: rgba(246,241,236,.82) !important; }

/* faint UI glyphs (drag handles, close buttons, disclosure chevrons) were between
   1.36:1 and 1.81:1. They are interactive controls, so they need to be seen. */
.row-drag, .kanban-section-caret, .sb-tile-label,
button.close, .modal-close, [aria-label="Close"], [aria-label="Remove"] {
  color: var(--d-ink-soft) !important;
}
.row-drag:hover, .modal-close:hover { color: var(--d-ink) !important; }
.sb-tile--accent .sb-tile-label { color: rgba(27,23,20,.78) !important; }
:root[data-theme="dark"] .row-drag,
:root[data-theme="dark"] .kanban-section-caret,
:root[data-theme="dark"] .sb-tile-label,
:root[data-theme="dark"] button.close,
:root[data-theme="dark"] .modal-close { color: rgba(246,241,236,.82) !important; }

/* A document preview is a sheet of paper. It must not invert with the app theme, or
   its print colours land on a dark canvas (measured 1.09:1). Pin the sheet light. */
:root[data-theme="dark"] .mr-doc,
:root[data-theme="dark"] .mr-sheet,
:root[data-theme="dark"] .q-doc,
:root[data-theme="dark"] .doc-sheet { background:#FFFFFF !important; color:#1B1714 !important; }
:root[data-theme="dark"] .mr-doc *,
:root[data-theme="dark"] .mr-sheet *,
:root[data-theme="dark"] .q-doc *,
:root[data-theme="dark"] .doc-sheet * { color:inherit; }
:root[data-theme="dark"] .mr-subtitle,
:root[data-theme="dark"] .editable-hint { color:#45403B !important; }

/* tasks.html: the remove buttons carry no class, and two small labels sat under AA */
.row-actions button, .kanban-card button, .task-row button { color: var(--d-ink-soft) !important; }
.row-actions button:hover, .kanban-card button:hover { color: var(--d-neg) !important; }
.row-due, .row-meta, .kanban-card a, .row-actions a { color: var(--d-ink-soft) !important; }
:root[data-theme="dark"] .row-actions button,
:root[data-theme="dark"] .kanban-card button,
:root[data-theme="dark"] .row-due,
:root[data-theme="dark"] .kanban-card a { color: rgba(246,241,236,.82) !important; }

/* 2026-08-01: sentence case above 13px, matching the marketing site. Uppercase
   survives only on true labels at 13px and below (nav group labels, table headers,
   badges), where it is a typographic convention rather than a shout. */
.dash-page-title, .section-header h1, .portal-welcome, .auth-card h1,
.admin-section-title, .content-card h2, .card-title, .scoreboard-title,
.handbook-section h2, h1, h2, h3 { text-transform: none !important; letter-spacing: -.02em; }
.dash-nav-group-label, .foot-h, th, .badge, .status-pill, .t-label,
.section-eyebrow, .dash-user-role { text-transform: uppercase !important; letter-spacing: .08em; }

/* The scoreboard accent tile is a DARK charcoal field (it was legacy #2F2F2F), so it
   needs light text, not ink. Moved to the brand charcoal at the same time. */
.sb-tile--accent { background: #211D1A !important; }
.sb-tile--accent .sb-tile-currency,
.sb-tile--accent .sb-tile-label,
.sb-tile--accent .sb-tile-value { color: rgba(243,238,233,.92) !important; }
.sb-tile-currency { color: var(--d-ink-soft) !important; }
.sb-tile-label { color: var(--d-ink-soft) !important; }
.sb-blur-toggle, .sb-blur-toggle span { color: var(--d-ink-soft) !important; font-size: 12px !important; }
:root[data-theme="dark"] .sb-tile-currency,
:root[data-theme="dark"] .sb-tile-label,
:root[data-theme="dark"] .sb-blur-toggle,
:root[data-theme="dark"] .sb-blur-toggle span { color: rgba(246,241,236,.82) !important; }
/* sgm status badges: ink on tint, the same pair used everywhere else */
.sgm-sig--behind { background:#F7DFDB !important; color:#A32118 !important; }
.sgm-sig--ahead, .sgm-sig--ontrack { background:#DFEDE3 !important; color:#1B6B41 !important; }
:root[data-theme="dark"] .sgm-sig--behind { background:rgba(163,33,24,.22) !important; color:#FF8A75 !important; }
:root[data-theme="dark"] .sgm-sig--ahead,
:root[data-theme="dark"] .sgm-sig--ontrack { background:rgba(27,107,65,.22) !important; color:#6FD79A !important; }
/* the last small-label stragglers, all ink-on-tint like the rest of the system */
.sgm-sig--beh  { background:#F7DFDB !important; color:#A32118 !important; }
.sgm-sig--ok   { background:#DFEDE3 !important; color:#1B6B41 !important; }
.agenda-text   { color: var(--d-ink-soft) !important; }
.ag-tag--done  { background:#DFEDE3 !important; color:#1B6B41 !important; }
:root[data-theme="dark"] .sgm-sig--beh { background:rgba(163,33,24,.22) !important; color:#FF8A75 !important; }
:root[data-theme="dark"] .sgm-sig--ok  { background:rgba(27,107,65,.22) !important; color:#6FD79A !important; }
:root[data-theme="dark"] .agenda-text  { color: rgba(246,241,236,.82) !important; }
:root[data-theme="dark"] .ag-tag--done { background:rgba(27,107,65,.22) !important; color:#6FD79A !important; }

/* dashboard.html and hub.html only gained dark mode in this pass. Three real causes,
   each read off the live background chain rather than assumed:
   1. .section-card stayed WHITE in dark, so a light title sat on white (1.12:1)
   2. .hub-page is a DARK container even in light mode, so its footer needs light text
   3. #progress-text used raw --orange on white (3.02:1) */
.section-card .card-title { color: var(--d-ink) !important; }
:root[data-theme="dark"] .section-card { background: rgba(31,30,28,0.74) !important; border-color: rgba(255,255,255,.08) !important; }
:root[data-theme="dark"] .section-card .card-title { color: #F6F1EC !important; }
:root[data-theme="dark"] .section-card, :root[data-theme="dark"] .section-card * { color: rgba(246,241,236,.86); }

.hub-page { background: #211D1A !important; }
.hub-page .hub-foot, .hub-page .hub-sep { color: rgba(243,238,233,.78) !important; }

#progress-text, .progress-bar-label span { color: var(--d-orange-ink) !important; }
:root[data-theme="dark"] #progress-text,
:root[data-theme="dark"] .progress-bar-label span { color: #FFB088 !important; }
:root[data-theme="dark"] .progress-bar-wrap { background: rgba(31,30,28,0.74) !important; }
/* dashboard: the greeting accent and the small progress labels sat between 2.75 and 4.15,
   and the status chip was 1.06. Deep rust clears AA at every size on a light card. */
.dash-greeting span, .portal-welcome span, #progress-text,
.progress-bar-label span, .progress-label { color:#7E2B08 !important; }
.card-status { background:#EFEAE4 !important; color:#45403B !important; }
.card-status.status-complete, .card-status.complete { background:#DFEDE3 !important; color:#1B6B41 !important; }
:root[data-theme="dark"] .dash-greeting span,
:root[data-theme="dark"] .portal-welcome span,
:root[data-theme="dark"] #progress-text,
:root[data-theme="dark"] .progress-bar-label span,
:root[data-theme="dark"] .progress-label { color:#FFB088 !important; }
:root[data-theme="dark"] .card-status { background:rgba(255,255,255,.08) !important; color:rgba(246,241,236,.86) !important; }
:root[data-theme="dark"] .card-status.status-complete,
:root[data-theme="dark"] .card-status.complete { background:rgba(27,107,65,.22) !important; color:#6FD79A !important; }
/* 4.44:1 is a hair under. --ink-soft on the same chip clears it at 8.2:1 */
.card-status, .status-not-started { color:#45403B !important; }
/* every card-status variant, so no chip is left on a light grey at 4.4:1 */
[class*="card-status"] { color:#45403B !important; background:#EFEAE4 !important; }
[class*="card-status"][class*="complete"] { color:#1B6B41 !important; background:#DFEDE3 !important; }
:root[data-theme="dark"] [class*="card-status"] { color:rgba(246,241,236,.86) !important; background:rgba(255,255,255,.08) !important; }
:root[data-theme="dark"] [class*="card-status"][class*="complete"] { color:#6FD79A !important; background:rgba(27,107,65,.22) !important; }

/* ══════════════════════════════════════════════════════════════════════
   PORTAL ATMOSPHERE  ·  2026-08-03 (v2, full strength across the portal)
   The marketing site's misty field, now on every page at full strength.
   Legibility is protected by the CARDS staying fully opaque, not by dialling
   the field down: the mist lives on the canvas, the work floats above it.
   ══════════════════════════════════════════════════════════════════════ */
.dash-atmos{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--atmos-strength,1);
  background:
    radial-gradient(48% 40% at 88%  0%, rgba(255,96,32,.40),  rgba(255,96,32,0) 62%),
    radial-gradient(44% 36% at  6%  4%, rgba(255,176,120,.40),rgba(255,176,120,0) 64%),
    radial-gradient(60% 34% at 46%  0%, rgba(241,199,173,.42),rgba(246,216,196,0) 68%),
    radial-gradient(50% 34% at 98% 40%, rgba(255,176,120,.32),rgba(255,176,120,0) 66%),
    radial-gradient(46% 32% at  0% 46%, rgba(255,96,32,.16),  rgba(255,96,32,0) 66%),
    radial-gradient(56% 34% at 70% 78%, rgba(241,199,173,.34),rgba(246,216,196,0) 70%),
    radial-gradient(44% 30% at 12% 96%, rgba(214,224,220,.44),rgba(214,224,220,0) 68%),
    linear-gradient(180deg, rgba(246,216,196,.55) 0%, rgba(243,238,233,.30) 42%, rgba(246,216,196,.34) 100%);
}
.dash-atmos::after{        /* grain, so it reads as material not as a gradient */
  content:""; position:absolute; inset:0; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* everything the user reads sits above the field */
/* Lift content above the atmosphere WITHOUT clobbering position.
   The first version listed .dash-sidebar and .dash-topbar here, which overrode their
   position:sticky (same specificity, later in the file) and made the navigation scroll
   away entirely. On mobile it also beat the @media position:fixed drawer rule, so the
   off-canvas menu stayed in flow and reserved a full viewport of empty space above the
   content on every page. Only z-index is set here now; position is left alone. */
.dash, .dash-content, .portal-body, .auth-page, .chooser-page { position:relative; z-index:1; }
.dash-sidebar, .dash-topbar { z-index:60; }

/* full strength everywhere. The dial stays so it can be tuned without a rebuild. */
:root, :root[data-atmos="full"], :root[data-atmos="calm"] { --atmos-strength:1; }
:root[data-atmos="off"] { --atmos-strength:0; }

/* THE THING THAT KEEPS IT USABLE: every reading surface is fully opaque, so a
   40-row table never sits on a gradient. The sidebar and topbar go translucent
   so the mist carries through the chrome. */
.dash-card, .card, .content-card, .hf-modal, .kanban-card, .table-wrap, .admin-table,
.section-card, .crm-tile, .dash-tile, .sb-tile, .wb-col, .q-card, .mtg-card {
  background: var(--d-surface); }
.dash-sidebar { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.dash-topbar  { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dash-content { background: transparent; }

/* dark: the same field, warmth from the accent, surfaces stay near-neutral */
:root[data-theme="dark"] .dash-atmos{
  opacity:var(--atmos-strength,1);
  background:
    radial-gradient(48% 36% at 92% 0%, rgba(255,96,32,.20), transparent 68%),
    radial-gradient(44% 30% at 4% 40%, rgba(255,176,120,.10), transparent 70%),
    radial-gradient(52% 30% at 72% 84%, rgba(255,96,32,.08), transparent 72%);
}
:root[data-theme="dark"] .dash-atmos::after{ mix-blend-mode:screen; opacity:.02; }
:root[data-theme="dark"] .dash-sidebar{ background: rgba(24,22,20,.74); }
:root[data-theme="dark"] .dash-topbar { background: transparent; }

/* ── Legibility contract for the full-strength field ──
   Measured: under the heaviest blob the canvas composites to rgb(250,176,143).
   On that ground --ink-mute #6A645D is only 3.23:1 and --orange-ink is 3.97:1,
   both failing. --ink-soft #45403B holds at 5.67:1 and --ink at 9.85:1.
   So text that sits DIRECTLY on the canvas (not inside an opaque card) is never
   allowed to be muted. Inside a card it can be, because cards are opaque. */
.dash-content > *:not(.dash-card):not(.card):not(.content-card),
.dash-content > * > *:not(.dash-card):not(.card):not(.content-card) {
  --canvas-text: var(--d-ink-soft);
}
.dash-content > p, .dash-content > .muted, .dash-content > .hint,
.dash-content > .sub, .dash-content > small,
.dash-page-sub, .dash-hint, .crm-count, .page-hint, .list-hint, .ws-name {
  color: var(--d-ink-soft) !important;
}
/* accents on the canvas need the deeper rust, not --orange-ink */
.dash-content > a:not(.btn), .dash-page-head a:not(.btn) { color: #7E2B08 !important; }
/* tasks.html: this link was 2.32:1 before the field even existed */
.row-actions a, .kanban-card a, a.row-link { color: #7E2B08 !important; }
:root[data-theme="dark"] .dash-content > p,
:root[data-theme="dark"] .dash-page-sub,
:root[data-theme="dark"] .crm-count,
:root[data-theme="dark"] .row-actions a,
:root[data-theme="dark"] .kanban-card a { color: rgba(246,241,236,.82) !important; }
/* tasks.html "Open in CRM" is a bare <a> inside a row, no class to hook. */
.tk-row a, .task-row a, .kb-card a, td a, .row-sub a { color:#7E2B08 !important; }
:root[data-theme="dark"] .tk-row a,
:root[data-theme="dark"] .task-row a,
:root[data-theme="dark"] .kb-card a,
:root[data-theme="dark"] td a { color:#FFB088 !important; }

/* ── Finish pass 2026-08-03 ──────────────────────────────────────────────
   Three defects Alex caught on meetings.html and outreach.html:
   1. a hard vertical band between the sidebar and the topbar. The topbar's
      translucent panel began 40px inside the content, so a strip of raw mist
      showed between two white panels. The topbar is now transparent and the
      field runs continuously.
   2. the sidebar's right edge was a raw transition from translucent white to
      mist. It now carries the same hairline every other surface uses.
   3. content capped at 1100px inside a 2232px column, so wide screens showed
      a narrow strip of work beside a large empty field.
   ────────────────────────────────────────────────────────────────────── */
.dash-sidebar { border-right: 1px solid var(--d-hairline); }
:root[data-theme="dark"] .dash-sidebar { border-right-color: rgba(255,255,255,.08); }

/* content fills the window, like every other portal tab. Text inside stays
   measured by its own container, so lines never run 2000px wide. */
.dash-content > .mtg-page,
.dash-content > .sa-wrap,
.dash-content > .home-wrap,
.dash-content > .tasks-wrap { max-width: none !important; width: 100%; }

/* the topbar title and the page heading were rendering the same words twice */
.dash-content .dash-topbar + * > h1:first-child.is-dup { display: none; }
/* the page heading moved to the topbar, so the subtitle is now the only thing on the
   left of this row. Align it on the same baseline as the actions instead of leaving it
   stranded above them. */
.mtg-page-header{ display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin:0 0 20px; flex-wrap:wrap; }
.mtg-page-header > div:first-child{ flex:1 1 auto; min-width:0; }
.mtg-page-sub{ margin:0; color:var(--d-ink-soft); font-size:15px; }
.ref-header, .oc-header{ display:flex; align-items:center; justify-content:space-between;
  gap:24px; margin:0 0 20px; flex-wrap:wrap; }
/* legacy --dc charcoal on the scoreboard header, the brand value is --d-char */
.admin-header{ background:#211D1A !important; border-radius:20px; }

/* The original 40px seam was NOT caused by the topbar having a background: it was caused by
   the topbar sitting inside .dash-content's clamp(20px,3vw,40px) padding, so its panel stopped
   40px short of the column edge and drew a hard vertical band. Removing the background killed
   the seam AND the scrim together, and scrolled content then printed straight through the
   sticky bar on 9 of 13 pages. Correct answer: transparent at rest, and on .scrolled restore a
   scrim that bleeds out to the column edges so there is no band. */
.dash-topbar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dash-topbar.scrolled {
  background: color-mix(in srgb, var(--d-bg) 94%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  margin-inline: calc(-1 * clamp(20px,3vw,40px));
  padding-inline: clamp(20px,3vw,40px);
  border-bottom: 1px solid var(--d-hairline);
}

/* D1 scrim: sits under the 248px drawer (z-index 60) and over everything else. */
.dash-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(27,23,20,.45); }
.dash-scrim[hidden] { display: none; }
body.dash-drawer-open { overflow: hidden; }
@media (min-width: 921px) { .dash-scrim { display: none !important; } }

/* "Sign out" was clipped off the bottom at any window under ~960px tall: the sidebar's own
   content is ~980px. Only the nav list scrolls now; the logo and the footer stay pinned, so
   the user card and Sign out are reachable without scrolling at every window height. */
.dash-sidebar{ height:100vh; display:flex; flex-direction:column; overflow:hidden; }
.dash-logo{ flex:none; }
.dash-nav-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.dash-sidebar-foot{ flex:none; margin-top:0; }

/* D9 follow-ups: three muted labels that sat just under AA on the dark surface. */
:root[data-theme="dark"] .wb-qchip,
:root[data-theme="dark"] .wb-card-sub,
:root[data-theme="dark"] .kanban-section-count { color: rgba(246,241,236,.82) !important; }


/* ============================================================ FINISH PASS 2, design gate
   D16 - the focus system was four different treatments and one invisible one: most controls
   fell through to Chrome's default blue ring (off-brand), the branded orange ring existed
   ONLY under [data-theme="dark"] for five selectors, and the search input computed
   outline:none with no box-shadow, so it had no focus indicator at all. One ring, both
   themes, every focusable thing.
   ============================================================ */
:root { --d-ease: cubic-bezier(.22,.61,.36,1); }

.dash :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.chooser-page :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--d-orange);
  outline-offset: 2px;
  border-radius: 4px;
}
/* the search field explicitly cleared its outline, so it needs the ring restated */
.dash input:focus-visible, .dash select:focus-visible, .dash textarea:focus-visible {
  outline: 2px solid var(--d-orange) !important;
  outline-offset: 1px !important;
  border-color: var(--d-orange) !important;
}

/* D19 - no press feedback existed on any control. */
.dash button:active:not(:disabled),
.chooser-page button:active:not(:disabled) { transform: translateY(1px); }

/* D19 - .card still computed `transition: all` with reduced motion active, and the existing
   block only covered four selectors. Global, and it must win. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .dash button:active:not(:disabled) { transform: none; }
}

/* As a docked column the sidebar is deliberately translucent (line ~1552) so the atmosphere
   reads through it. As a position:fixed OVERLAY that same translucency let the page behind
   print through the menu: "Doing Care Differently" and "View all in CRM" were legible through
   the nav labels. This has to live at the END of the file, because a media query adds no
   specificity and the translucent rule above would otherwise win. */
@media (max-width: 920px) {
  .dash-sidebar { background: var(--d-bg); box-shadow: 0 0 40px rgba(27,23,20,.18); }
  :root[data-theme="dark"] .dash-sidebar { background: var(--d-bg); }
}