/* Reverb Workbench — base stylesheet.
   Option B (warm tan) default + Option C (desat navy) toggle, light + dark mode.
   Editorial monochrome chassis derived from Sanjay-Personal; denser line-height for ops use.
*/

:root {
  /* Brand Split theme (2026-07-02): clean WHITE base + the Reverb brand colours, one per
     workspace — Operations = red, Productions = orange (driven off html.ws-* below, so the
     workspace identity wins over the old per-user accent picker). Cream is gone. */
  --bg:          #f6f7f9;   /* very light cool-grey page (NOT cream) — so white cards lift above it */
  --surface:     #ffffff;   /* white cards */
  --surface-2:   #f1f3f6;   /* subtle card / zebra rows / wells */
  --bg-2:        #eceff3;   /* deeper cool-grey — chat bubbles, rails */
  --ink:        #1a1f2b;
  --ink-soft:   #3a4150;
  --ink-muted:  #5b6472;
  --ink-faint:  #6f7889;   /* F4/H13-F4: was #9aa3b2 (~2.5:1, fails AA) — darkened to ~4.6:1 so informational meta/timestamps are legible; still clearly the faintest ink tone. */
  --rule:       #e6e8ec;
  --rule-faint: #f0f2f5;
  /* F4/H13-F4: a VISIBLE keyboard-focus ring. The old ring used --accent-faint (a near-white pale
     tint, ~1.1:1 on white → invisible; only the border-colour signalled focus). A translucent accent
     is unmistakable and inherits the per-workspace/theme --accent automatically (one definition). */
  --focus-ring: color-mix(in srgb, var(--accent) 42%, transparent);

  /* Reverb RED — the default + Operations accent (Productions → orange via html.ws-bp). */
  --accent:        #D82D22;
  --accent-hover:  #B8241B;
  --accent-faint:  #fdeceb;
  /* #3 / H3-F1: contrast-safe accent for TEXT + FILL (links, buttons). Vivid --accent stays for
     decorative use (borders, tab underlines, faint rings). Overridden per-workspace-light below;
     in dark it falls back to --accent (a light accent already reads on the dark surface). */
  --accent-ink:    var(--accent);

  /* Card depth — cool, crisp */
  --card:               #ffffff;
  --card-radius:        12px;
  --card-shadow:        0 1px 2px rgba(20,25,40,.06), 0 6px 18px rgba(20,25,40,.05);
  --card-shadow-hover:  0 6px 20px rgba(20,25,40,.10);
  --line:               var(--rule);

  /* Functional status palette (badges only, never card fills) */
  --ok:    #0a7a4f;
  --warn:  #b4690e;
  --alert: #c5341a;
  --hold:  #6b7280;

  /* Type scale */
  --font-sans: 'General Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --fs-body: 16px;
  --lh-body: 1.55;
  --lh-dense: 1.4;
  --tracking-caps: 0.22em;

  color-scheme: light;
}

/* Option C — desaturated navy */
html.accent-navy {
  --accent:       #1F2A37;
  --accent-hover: #131A23;
  --accent-faint: #eef0f3;
}

/* Option D — Red Orange (matches MS Office "Red Orange" theme) */
html.accent-red-orange {
  --accent:       #C5341A;
  --accent-hover: #9E2914;
  --accent-faint: #fbe9e3;
}

/* Option E — Terracotta (legacy accent option; superseded by Brand Split's per-workspace colours) */
html.accent-terracotta {
  --accent:       #b23a28;
  --accent-hover: #8f2e20;
  --accent-faint: #f6e9e6;
}

/* Brand Split — WORKSPACE identity is the accent (Operations = Reverb red, Productions = Reverb
   orange). Defined AFTER the per-user accent-* blocks so, at equal specificity, source order makes
   the workspace colour win — the brand identity is consistent regardless of any legacy accent pref. */
html.ws-reverb  { --accent:#D82D22; --accent-hover:#B8241B; --accent-faint:#fdeceb; --accent-ink:#C0271C; }
html.ws-bp      { --accent:#F7931E; --accent-hover:#E07E0C; --accent-faint:#fef3e2; --accent-ink:#B25E00; }

/* Dark mode — cool-neutral (matches Brand Split's clean light theme; red/orange lightened to read on dark) */
html.theme-dark {
  --bg:         #0f1115;
  --surface:    #171a21;
  --surface-2:  #1d212a;
  --bg-2:       #141821;
  --ink:        #e8eaf0;
  --ink-soft:   #c2c7d2;
  --ink-muted:  #9aa2b1;
  --ink-faint:  #6b7382;
  --rule:       #2a2f3a;
  --rule-faint: #20242d;
  /* red-dark as the dark DEFAULT accent (Operations); Productions → orange-dark via html.theme-dark.ws-bp */
  --accent:       #f26257;
  --accent-hover: #f47c72;
  --accent-faint: rgba(242,98,87,0.16);
  --card:               #171a21;   /* = --surface; cards read a shade lighter than the dark page */
  --card-shadow:        0 1px 2px rgba(0,0,0,.40), 0 6px 18px rgba(0,0,0,.35);
  --card-shadow-hover:  0 6px 20px rgba(0,0,0,.45);
  color-scheme: dark;
}
/* Brand Split in dark — workspace accents (lightened brand reds/oranges) */
html.theme-dark.ws-reverb { --accent:#f26257; --accent-hover:#f47c72; --accent-faint:rgba(242,98,87,0.16); --accent-ink:var(--accent); }
html.theme-dark.ws-bp     { --accent:#fba53d; --accent-hover:#fcb85f; --accent-faint:rgba(251,165,61,0.16); --accent-ink:var(--accent); }
html.theme-dark.accent-navy {
  --accent-faint: rgba(31,42,55,0.32);
}
html.theme-dark.accent-red-orange {
  --accent-faint: rgba(197,52,26,0.22);
}
html.theme-dark.accent-terracotta {
  --accent:       #d9654f;   /* dark-tuned terracotta so the accent reads on the dark bg */
  --accent-hover: #e27c67;
  --accent-faint: rgba(217,101,79,0.20);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; } /* clear the sticky frosted nav on #anchor jumps (bell deep-links: #task-N, #score-N, #comments) */

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent-ink); text-decoration: none; }

/* F5/H13: reusable screen-reader-only utility (visually hidden, still announced + focusable).
   Was only an ad-hoc .cbx-native pattern; this is the shared version for status-cue text + skip links. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--font-sans); margin: 0 0 0.6rem; color: var(--ink); }
h1 { font-weight: 300; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-weight: 500; font-size: 1.45rem; letter-spacing: -0.015em; }
h3 { font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; }

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.6rem;
}

/* ---- centered auth shell (login / verify-otp / enroll-totp) ---- */

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 2.5rem 2.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.auth-card .wordmark {
  display: block;
  margin: 0 0 0.25rem;
  font-weight: 300;
  font-size: 2.4rem;
  letter-spacing: -0.04em;
  line-height: 1;
}
.auth-card .wordmark-byline {
  display: block;
  margin: 0 0 2rem;
  color: var(--ink-muted);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}
/* Logo on auth pages */
.auth-logo { display: block; max-height: 72px; width: auto; margin: 0 auto 0.4rem; }
.auth-brand-sub { display: block; text-align: center; font-size: .82rem; color: var(--ink-muted); margin: 0 0 2rem; letter-spacing: .04em; }

/* Workspace picker — selectable cards, not a stack of primary CTAs. Uses the
   app's surface/rule/ink/accent tokens so it reads as the same product as every
   authenticated screen (the default button style would render each option as a
   filled accent button = N competing primary actions). */
.workspace-picker { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.25rem; }
.workspace-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1.05rem;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.workspace-option::after {
  content: "→";
  color: var(--ink-faint);
  font-size: 1.05rem;
  transition: color 150ms ease, transform 150ms ease;
}
.workspace-option:hover {
  background: var(--rule-faint);
  border-color: var(--accent);
  color: var(--ink);
}
.workspace-option:hover::after { color: var(--accent); transform: translateX(2px); }
.workspace-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.auth-card .qr-frame {
  display: block;
  margin: 1.2rem auto 1rem;
  width: 220px;
  height: 220px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.auth-card .qr-frame img { width: 100%; height: 100%; display: block; }

.auth-card .secret-fallback {
  display: block;
  margin: 0.5rem 0 1.4rem;
  padding: 0.6rem 0.75rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.86rem;
  text-align: center;
  background: var(--rule-faint);
  border: 1px solid var(--rule);
  border-radius: 4px;
  word-break: break-all;
  color: var(--ink-soft);
}

/* ---- form primitives ---- */

label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 0.35rem; text-transform: uppercase; }

input[type=text], input[type=email], input[type=password], input[type=tel] {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input[inputmode=numeric] {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.1rem;
  letter-spacing: 0.4em;
  text-align: center;
}

.form-row { margin-bottom: 1.1rem; }
.form-row.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.form-row.checkbox label {
  display: inline; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.92rem;
}

button, .btn {
  display: inline-block;
  font: inherit;
  font-weight: 500;
  padding: 0.7rem 1.1rem;
  color: #ffffff;
  background: var(--accent-ink);
  border: 1px solid var(--accent-ink);
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 150ms ease, border-color 150ms ease;
}
button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.full, .btn.full { width: 100%; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover { background: var(--rule-faint); color: var(--ink); border-color: var(--ink-faint); }

/* ---- flash banner ---- */

.flash {
  margin: 0 0 1.25rem;
  padding: 0.65rem 0.85rem;
  border-radius: 4px;
  font-size: 0.92rem;
  line-height: 1.4;
}
.flash.error  { background: rgba(181, 72, 47, 0.12); color: #8a3220; border: 1px solid rgba(181, 72, 47, 0.55); font-weight: 500; }
.flash.warn   { background: rgba(184, 134, 47, 0.12); color: #7d5a1f; border: 1px solid rgba(184, 134, 47, 0.55); font-weight: 500; }
.flash.info   { background: var(--rule-faint); color: var(--ink-soft); border: 1px solid var(--rule); }
html.theme-dark .flash.error { color: #f0a896; background: rgba(181, 72, 47, 0.18); border-color: rgba(181, 72, 47, 0.65); }
html.theme-dark .flash.warn  { color: #f0d28a; background: rgba(184, 134, 47, 0.18); border-color: rgba(184, 134, 47, 0.65); }

/* ---- top nav (authed pages) ---- */

.topnav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  /* Semi liquid-glass: sticky frosted bar, accent-tinted so it's visibly part of
     the theme even at scroll-top (and shifts with warm/navy/red-orange). The accent
     layer is kept translucent on purpose — a solid --accent-faint would be opaque in
     light mode and kill the backdrop blur. z-index 60 sits above page content (≤50)
     but below modals (100) + chat (99). First background line is the opaque fallback. */
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--accent-faint) 35%, var(--bg)); /* opaque tinted fallback */
  background:
    linear-gradient(color-mix(in srgb, var(--accent-faint) 78%, transparent),
                    color-mix(in srgb, var(--accent-faint) 78%, transparent)),
    color-mix(in srgb, var(--bg) 68%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  transition: box-shadow 0.2s ease;
}
/* Deepen the hairline shadow once the page scrolls off the top (JS toggles). */
.topnav--scrolled { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); }

/* #8 (PM-122): per-workspace nav contrast. Productions (ws-bp) gets a teal-tinted nav + left accent +
   teal brand/active-underline so it's distinct from Operations (default terracotta) — at a glance and
   across browser tabs. Scoped to the nav chrome; the global --accent (user's accent_pref) is untouched. */
/* Per-workspace nav tint — now TOKEN-DRIVEN off --accent (Brand Split: red Operations / orange
   Productions), replacing the old hardcoded teal so the top bar always matches the workspace colour. */
html.ws-reverb .topnav, html.ws-bp .topnav { border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
html.ws-reverb .topnav .brand, html.ws-bp .topnav .brand { color: var(--accent); }
html.ws-reverb .topnav nav a.active, html.ws-bp .topnav nav a.active { border-bottom-color: var(--accent); }

/* #11 (PM-122): notification banner — a strip below the nav with act-on-able count chips (reuses the
   bell's data; links to existing pages). Dismissible; re-shows when counts change. */
.notif-banner { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem 1.25rem; background: var(--accent-faint); border-bottom: 1px solid var(--rule); }
.nb-lead { font-size: .78rem; font-weight: 700; color: var(--ink-muted); }
.nb-chip { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .8rem; font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 999px; padding: .28rem .7rem; cursor: pointer; text-decoration: none; }
.nb-chip:hover { border-color: var(--accent); text-decoration: none; }
.nb-chip b { color: var(--accent); }
.nb-chip.nb-urgent b { color: #c5341a; }
.nb-x { margin-left: auto; border: 0; background: none; color: var(--ink-faint); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }
.nb-x:hover { color: var(--ink); }

/* #9 (PM-122): report-a-bug/idea modal (opened from the account menu, every page). */
.fb-ov { position: fixed; inset: 0; background: rgba(0,0,0,.42); display: flex; align-items: flex-start; justify-content: center; padding-top: 9vh; z-index: 1300; }
.fb-ov[hidden] { display: none; }   /* the hidden attr must beat display:flex */
.fb-modal { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 1.2rem 1.3rem; width: min(460px, 93vw); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.fb-modal h3 { margin: 0 0 .3rem; }
.fb-modal .fb-sub { margin: 0 0 .8rem; color: var(--ink-muted); font-size: .85rem; }
.fb-kinds { display: flex; gap: 1rem; margin-bottom: .7rem; font-size: .86rem; }
.fb-kinds label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.fb-modal textarea { width: 100%; border: 1px solid var(--rule); border-radius: 8px; padding: .5rem .6rem; font: inherit; background: var(--surface); color: var(--ink); box-sizing: border-box; }
.fb-act { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; margin-top: .8rem; }
.fb-msg { margin-right: auto; font-size: .8rem; color: var(--ink-muted); }

/* #6 Option B (PM-122): cross-tab workspace-staleness banner (above everything, incl. modals). */
.ws-guard-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000;
  display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap;
  background: var(--alert); color: #fff; padding: .6rem 1rem; font-size: .9rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.ws-guard-banner b { font-weight: 700; }
.ws-guard-reload {
  background: #fff; color: var(--alert); border: 0; border-radius: 6px;
  padding: .3rem .75rem; font: inherit; font-weight: 700; cursor: pointer;
}
.ws-guard-reload:hover { opacity: .9; }
.ws-guard-flash { animation: wsGuardFlash .45s ease; }
@keyframes wsGuardFlash { 0%,100% { background: var(--alert); } 50% { background: #7f1d1d; } }

/* No backdrop-filter support → keep the bar opaque (still accent-tinted) so content can't bleed through. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topnav { background: color-mix(in srgb, var(--accent-faint) 35%, var(--bg)); }
}
.topnav .brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  font-weight: 500;
  color: var(--ink);
}
.topnav .brand:hover { text-decoration: none; }
.brand-logo { height: 28px; width: auto; display: block; }
.brand-logo--dark  { display: none; }
html.theme-dark .brand-logo--light { display: none; }
html.theme-dark .brand-logo--dark  { display: block; }
/* Auth pages: same pattern at larger size */
.auth-logo--dark  { display: none; }
html.theme-dark .auth-logo--light { display: none; }
html.theme-dark .auth-logo--dark  { display: block; }
.brand-sub { font-size: 0.62rem; color: var(--ink-muted); letter-spacing: 0.04em; margin-top: 0.15rem; }
/* Toast notification (quick-entry enquiry modal) */
.krama-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: .6rem 1.25rem;
  border-radius: 8px; font-size: .88rem; z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  animation: toast-in .25s ease, toast-out .4s ease 2.6s forwards;
}
@keyframes toast-in  { from { opacity:0; transform: translateX(-50%) translateY(12px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
@keyframes toast-out { to   { opacity:0; transform: translateX(-50%) translateY(12px); } }
/* New Enquiry quick-entry modal */
.enq-modal-backdrop { position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:800;display:flex;align-items:center;justify-content:center; }
.enq-modal-backdrop[hidden] { display:none; }
.enq-modal { background:var(--card);border-radius:12px;padding:1.5rem;width:min(720px,95vw);max-height:90vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.18); }
.topnav nav { display: flex; gap: 1.25rem; flex: 1; }
.topnav nav a {
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}
.topnav nav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--ink-faint); }
.topnav nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
/* Role-switcher dropdown (multi-role users; now lives inside the account menu) */
.topnav .role-switch-select {
  font-size: 0.8rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--border, #d8d2c8);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--ink-soft);
  cursor: pointer;
  max-width: 9rem;
}

.topnav .toggles { display: flex; gap: 0.4rem; }
.topnav .toggles button {
  font-size: 0.78rem;
  padding: 0.35rem 0.6rem;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  letter-spacing: 0.04em;
}
.topnav .toggles button:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--rule-faint); }

/* Right-cluster Enquiries quick-action (left of the bell) */
.topnav-action {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  white-space: nowrap;
}
.topnav-action:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--rule-faint); text-decoration: none; }
.topnav-action.active { color: #fff; background: var(--accent); border-color: var(--accent); }
/* Mobile hamburger toggle — hidden on desktop (base rule); shown ≤640 (see media block). */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--rule); border-radius: 8px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
}
.nav-toggle:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--rule-faint); }

/* Consolidated account menu (avatar → dropdown: name+role · switch role · settings · sign out) */
.account-menu { position: relative; display: inline-flex; align-items: center; }
.account-btn {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: transparent; border: none; padding: 0.1rem; cursor: pointer;
}
.account-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 0.85rem; font-weight: 600;
}
.account-caret { color: var(--ink-muted); font-size: 0.7rem; }
.account-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px; background: var(--card);   /* D5b-4: floats off the dark page (was var(--bg)) */
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 0.4rem; z-index: 95;
}
.account-dropdown[hidden] { display: none; }
.account-head { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule-faint); margin-bottom: 0.3rem; }
.account-head strong { display: block; font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.account-role { font-size: 0.78rem; color: var(--ink-muted); }
.account-roleswitch { display: block; margin: 0 0 0.3rem; padding: 0.35rem 0.6rem; }
.account-roleswitch-label { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin: 0 0 0.2rem; }
.account-roleswitch .role-switch-select { max-width: 100%; width: 100%; }
.account-item, .account-signout {
  display: flex; align-items: center; gap: 0.45rem; width: 100%;
  padding: 0.5rem 0.6rem; font-size: 0.88rem; font-family: inherit; text-align: left;
  background: transparent; border: none; border-radius: 6px; color: var(--ink-soft); cursor: pointer;
}
.account-item:hover, .account-signout:hover { background: var(--rule-faint); color: var(--ink); text-decoration: none; }
.account-signout { color: var(--alert); }
.account-item-form { margin: 0; }

/* Enquiries pipeline board (drag-and-drop) */
.enq-board { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; align-items: flex-start; }
.enq-col { flex: 0 0 220px; background: var(--rule-faint); border: 1px solid var(--rule); border-radius: 8px; padding: 0.5rem; }
.enq-col-head { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 0.5rem; display: flex; justify-content: space-between; align-items: center; }
.enq-col-count { background: var(--bg); border-radius: 999px; padding: 0.05rem 0.45rem; font-size: 0.72rem; color: var(--ink-muted); }
.enq-col-body { min-height: 60px; display: flex; flex-direction: column; gap: 0.4rem; border-radius: 6px; }
.enq-col-body--over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.enq-card { background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: 0.5rem 0.6rem; cursor: grab; }
.enq-card:active { cursor: grabbing; }
.enq-card--dragging { opacity: 0.45; }
.enq-card-title { font-weight: 600; font-size: 0.9rem; }
.enq-card-meta { font-size: 0.78rem; color: var(--ink-muted); margin: 0.15rem 0 0; }

/* ---- containers ---- */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

/* ---- status badges (G/A/R/H letter dots) ---- */

.status-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0;
  vertical-align: -3px;
}
.status-dot.ok    { background: var(--ok); }
.status-dot.warn  { background: var(--warn); }
.status-dot.alert { background: var(--alert); }
.status-dot.hold  { background: var(--hold); }

/* ---- dashboard grid ---- */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.dash-card {
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.dash-card--wide { grid-column: 1 / -1; }
.dash-card--alert { border-left: 3px solid var(--alert); }
.dash-card--warn  { border-left: 3px solid var(--warn); }

.dash-big-n {
  font-size: 2.6rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0.4rem 0 0.6rem;
  color: var(--ink);
}
.dash-big-n--alert { color: var(--alert); }
.dash-big-n--warn  { color: var(--warn); }

.dash-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.dash-pill  {
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.dash-pill strong { color: var(--ink); }

.dash-empty {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 0.5rem 0;
  font-style: italic;
}
.dash-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
}

.dash-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
}
.dash-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0 0.6rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule-faint);
  font-size: 0.88rem;
}
.dash-list li:last-child { border-bottom: none; }
.dash-list a, .dash-list-label {
  font-weight: 500;
  color: var(--ink);
  font-size: 0.85rem;
}
.dash-list a { color: var(--accent); }
.dash-list-sub  { color: var(--ink-soft); font-size: 0.82rem; }
.dash-list-meta { color: var(--ink-muted); font-size: 0.78rem; text-align: right; white-space: nowrap; }

/* ---- badges ---- */

.badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge--alert { background: rgba(181,72,47,0.12); color: #8a3220; }
.badge--warn  { background: rgba(184,134,47,0.12); color: #7d5a1f; }
.badge--info  { background: var(--rule-faint); color: var(--ink-muted); }
.badge--ok    { background: rgba(46,125,91,0.13);  color: #1f6b46; }
.badge--hold  { background: rgba(110,110,110,0.14); color: #5e5e5e; }
/* On-hold = a pause overlay on any primary → muted/desaturated so paused work reads as paused (two-tier status). */
.badge.ep-onhold { opacity: .6; filter: grayscale(.45); }
html.theme-dark .badge--alert { background: rgba(181,72,47,0.22); color: #f0a896; }
html.theme-dark .badge--warn  { background: rgba(184,134,47,0.22); color: #f0d28a; }
html.theme-dark .badge--ok    { background: rgba(46,125,91,0.24);  color: #7fd0a6; }
html.theme-dark .badge--hold  { background: rgba(150,150,150,0.22); color: #bdbab3; }

/* ---- tables (Project Manager list) ---- */

.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.data-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.data-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--rule-faint);
  color: var(--ink);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--rule-faint); }
.data-table a { color: var(--accent); font-weight: 500; }

/* Permissions matrix — freeze the Role column while the permission columns scroll
   horizontally. Uses an explicit .rolecol class (not :first-child — the rowspan=2
   header makes :first-child ambiguous with the action sub-header row). */
.perm-matrix .rolecol {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 2;
  box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.12);
}
.perm-matrix thead .rolecol { z-index: 3; }
.perm-matrix tr:hover .rolecol { background: var(--rule-faint); }

/* toast.js — transient "popup" notifications (top-right), replaces error-landing redirects
   for in-page actions. Error/success are fixed semantic colors; info rides theme tokens. */
#kr-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(380px, 90vw); pointer-events: none; }
.kr-toast { pointer-events: auto; background: var(--ink); color: var(--bg); padding: 0.7rem 0.95rem; border-radius: 8px; font-size: 0.86rem; line-height: 1.4; box-shadow: 0 6px 24px rgba(0,0,0,0.18); opacity: 0; transform: translateX(12px); transition: opacity 0.22s ease, transform 0.22s ease; }
.kr-toast.show { opacity: 1; transform: translateX(0); }
.kr-toast--error { background: #b3261e; color: #fff; }
.kr-toast--success { background: #1f7a4d; color: #fff; }
.kr-toast--info { background: var(--ink); color: var(--bg); }

.table-container {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-top: 1.25rem;
}
/* D5b-2 — lists & tables. The card treatment (bg + 12px radius + shadow) already
   reaches .table-container via the shared card group (D5b-1c). D5b-2 adds the faint
   header band so column labels read as a header inside the card; the container's
   overflow + border-radius clips the corners (no per-th radius needed). */
.data-table thead th { background: var(--rule-faint); }

/* ---- form sections (Project intake) ---- */

.form-section { margin-bottom: 2rem; }
.form-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem 1.5rem;
}
.form-grid .form-row { margin-bottom: 0; }

select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8a8a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
  cursor: pointer;
}
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  resize: vertical;
  min-height: 80px;
}
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

/* ---- multi-assignee chips (#1, task forms — checkbox pills, native assignee_ids[] submit) ---- */
.assignee-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; max-height: 168px; overflow: auto; padding: 0.15rem 0; }
.achip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.84rem; font-weight: 500; border: 1px solid var(--rule); border-radius: 999px; padding: 0.25rem 0.65rem; cursor: pointer; color: var(--ink); background: var(--surface); user-select: none; }
.achip:hover { border-color: var(--ink-faint); }
.achip:has(input:checked) { border-color: var(--accent); background: var(--accent-faint); color: var(--accent); }
.achip input { margin: 0; }

/* ---- checklist ---- */

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-faint);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.checklist li:last-child { border-bottom: none; }
.checklist li.checked { color: var(--ink-muted); text-decoration: line-through; }
.checklist li.bypassed { color: var(--warn); font-style: italic; }
.checklist input[type=checkbox] { flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); }

/* ---- page header row ---- */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-header h1 { margin: 0; }

/* ---- tablet + below (≤960px) — wraps topnav, narrows layouts ---- */

@media (max-width: 960px) {
  .auth-card { padding: 1.75rem 1.25rem; }
  .topnav { gap: 0.6rem; padding: 0.65rem 1rem; flex-wrap: wrap; }
  .topnav nav { width: 100%; order: 3; gap: 0.75rem; padding-top: 0.35rem; overflow-x: auto;
                scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .topnav nav::-webkit-scrollbar { display: none; }
  .topnav .toggles { font-size: 0.78rem; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-card--wide { grid-column: 1; }
  .form-grid { grid-template-columns: 1fr; }
  /* Tables: prevent ID/code columns from wrapping */
  .data-table td:first-child, .data-table th:first-child { white-space: nowrap; }
  /* Dash list: 2-col layout on tablet, collapse meta on phone */
  .dash-list li { grid-template-columns: auto 1fr; }
  .dash-list-meta { display: none; }
}

/* ---- small phone (≤480px) ---- */

@media (max-width: 480px) {
  /* Hide theme toggles on small phones — saves nav height.
     Theme persists via cookie/localStorage so the toggle isn't needed mid-session. */
  .topnav .toggles { display: none; }
  .topnav nav { gap: 0.6rem; font-size: 0.82rem; }
  .topnav .brand { font-size: 0.95rem; }
  /* Dash list: show only label + sub, not the meta column */
  .dash-list li { grid-template-columns: auto 1fr; }
  .dash-list-meta { display: none; }
  /* Table: tighten cell padding */
  .data-table th, .data-table td { padding: 0.55rem 0.5rem; font-size: 0.82rem; }
  /* Page header: stack title + actions vertically */
  .page-header { gap: 0.5rem; }
  /* Section label rows */
  .section-label-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* ---- mobile: wide tables scroll horizontally instead of overflowing the page ----
   display:block makes the <table> a scroll container; the rows/cells stay table-laid-out
   inside it (anonymous table box), so the page never overflows and the table swipes.
   Scoped to in-content tables (.page / .ch-* shells) so chrome/widgets are untouched. */
@media (max-width: 640px) {
  /* Any table scrolls horizontally rather than overflowing the page (data tables, form
     tables, etc.). Broad on purpose — scoping by container regressed tables not under .page. */
  table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* Force main+aside .dash-grid layouts to one column on phones. Several HR pages
     (team/time 3fr 1fr, team/leave 2fr 1fr) set grid-template-columns INLINE, which
     beats the ≤960 collapse — !important is required to override the inline value. */
  .dash-grid { grid-template-columns: 1fr !important; }
  /* let grid items shrink below their content min-width so a wide table inside scrolls
     (display:block above) instead of expanding the column past the viewport. */
  .dash-grid > * { min-width: 0; }
  /* Inline 2-col form-pair grids (e.g. tasks/new: assignee|due, priority|status) set
     grid-template-columns:1fr 1fr INLINE and so don't collapse — stack them on phones. */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---- mobile nav: collapse the primary nav behind the ☰ toggle (≤640px) ---- */
@media (max-width: 640px) {
  /* ☰ toggle — a clearly FILLED button so it reads as "menu". Was a faint near-empty
     box (transparent bg + #ededed border + low-contrast icon) that nobody recognised. */
  .nav-toggle {
    display: inline-flex;
    background: var(--accent); color: #fff; border-color: var(--accent);
  }
  .nav-toggle:hover { background: var(--accent); color: #fff; border-color: var(--accent); opacity: 0.9; }
  .nav-toggle svg { width: 22px; height: 22px; flex-shrink: 0; }
  /* Nav hidden by default; the ☰ button toggles .nav-open on .topnav to reveal it. */
  .topnav #primaryNav { display: none; }
  /* Opened = a full-width dropdown PANEL dropping below the header (was wedged into the
     wrapping flex row, floating over the bell/avatar). position:absolute anchors to the
     sticky .topnav; z-index lifts it above the later header siblings (bell/avatar). */
  .topnav.nav-open #primaryNav {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0; width: 100%;
    background: var(--bg);
    border-top: 1px solid var(--rule);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 1rem 0.75rem; gap: 0.1rem;
    overflow-y: auto; max-height: 80vh; z-index: 10;
  }
  .topnav.nav-open #primaryNav > a { padding: 0.55rem 0.2rem; }
  .topnav.nav-open #primaryNav > a,
  .topnav.nav-open .nav-group { width: 100%; }
  .topnav.nav-open .nav-group-btn { width: 100%; justify-content: flex-start; }
  /* Group submenus open INLINE (accordion), not as floating dropdowns. 🔴 Do NOT set `display`
     here — the [hidden] attribute (toggled by nav-groups.js) must keep controlling visibility,
     so taps still expand ONE group at a time (else all submenus show at once). */
  .topnav.nav-open .nav-group-menu {
    position: static; min-width: 0;
    border: none; box-shadow: none; border-radius: 0;
    background: transparent; padding: 0.1rem 0 0.3rem 0.9rem;
  }
  .topnav.nav-open .nav-group-menu::before { display: none; }
}

/* ---- assign grid stack on phones (≤640px) ---- */

@media (max-width: 640px) {
  /* The 5-col Assigned/Budget/Agreed/Deadline/Primary grid in projects/new + edit
     forms collapses to a single column so each contributor's row stacks vertically. */
  .form-row > div[style*="grid-template-columns:1fr 110px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---- info-tip — hover tooltip for explaining metrics ---- */

.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-muted, #8a8a8a);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  font-family: Georgia, serif;
  cursor: help;
  position: relative;
  margin-left: 0.35rem;
  vertical-align: 1px;
  text-transform: none;
  letter-spacing: 0;
  user-select: none;
}
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink, #1a1a1a);
  color: #fff;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 400;
  font-style: normal;
  font-family: inherit;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  text-align: left;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.info-tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink, #1a1a1a);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.info-tip:hover::after,
.info-tip:focus::after,
.info-tip:hover::before,
.info-tip:focus::before {
  opacity: 1;
}

/* Inside table headers the surrounding .table-container has overflow:auto
   which clips a tooltip positioned above. Flip below the icon there and
   reset the inherited uppercase/letter-spacing from the th. */
.data-table th .info-tip::after {
  bottom: auto;
  top: calc(100% + 6px);
  text-transform: none;
  letter-spacing: 0;
}
.data-table th .info-tip::before {
  bottom: auto;
  top: calc(100% + 1px);
  border-top-color: transparent;
  border-bottom-color: var(--ink, #1a1a1a);
}

/* ---- glass modal — Apple Glass aesthetic on <dialog> ---- */

dialog.glass-modal {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 0;
  max-width: 460px;
  width: calc(100% - 2rem);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.08);
  color: var(--ink);
  overflow: hidden;
}
html.theme-dark dialog.glass-modal { background: rgba(28, 28, 30, 0.74); border-color: rgba(255, 255, 255, 0.08); }
dialog.glass-modal::backdrop {
  background: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
dialog.glass-modal[open] {
  animation: glass-modal-in 0.18s ease-out;
}
@keyframes glass-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.glass-modal__hd {
  padding: 1.1rem 1.5rem 0.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.glass-modal__hd h2 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.glass-modal__hd .close-x {
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}
.glass-modal__hd .close-x:hover { color: var(--ink); }
.glass-modal__bd { padding: 0.75rem 1.5rem 1.25rem; max-height: 70vh; overflow-y: auto; }
.glass-modal__ft {
  padding: 0.9rem 1.5rem;
  background: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}
html.theme-dark .glass-modal__ft { background: rgba(255,255,255,0.03); border-top-color: rgba(255,255,255,0.08); }
.glass-modal__err {
  background: rgba(208, 80, 60, 0.12);
  border: 1px solid rgba(208, 80, 60, 0.35);
  color: #8a3220;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
html.theme-dark .glass-modal__err { color: #f2a394; }

/* ----- Phase 5c-d: row action buttons (text labels) + sticky Actions column + modals ----- */
.row-action-btn {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.25rem 0.55rem;
  margin-right: 0.25rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ink) !important;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.row-action-btn:hover {
  background: var(--rule-faint);
  border-color: var(--ink-muted);
  text-decoration: none;
}
.row-action-btn:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.row-action-btn--danger { color: var(--alert) !important; border-color: rgba(181, 72, 47, 0.4); }
.row-action-btn--danger:hover { background: rgba(181, 72, 47, 0.08); border-color: var(--alert); }
/* Sticky Actions column so it stays visible when the table overflows horizontally. */
.data-table th.row-actions,
.data-table td.row-actions {
  position: sticky;
  right: 0;
  background: var(--surface);
  white-space: nowrap;
  box-shadow: -8px 0 12px -8px rgba(0, 0, 0, 0.18);
  z-index: 1;
}
.data-table th.row-actions--header { background: var(--rule-faint); }
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 900;
}
.row-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  padding: 1rem 1.25rem;
  z-index: 901;
  min-width: 460px;
  max-width: 90vw;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.row-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.5rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.modal-close {
  background: transparent; border: 0;
  font-size: 1.4rem; color: var(--ink-muted);
  cursor: pointer; padding: 0 0.25rem;
}
.modal-close:hover { color: var(--ink); }

/* ----- Phase 5d-a: dashboard section headings + collapsible sections ----- */
.dash-section {
  margin-bottom: 1.5rem;
}
.dash-section[open] > .dash-section-summary,
.dash-section .dash-section-summary--static {
  /* visible regardless of <details> state */
}
.dash-section-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  /* caret (::before) + heading group on the LEFT; the count is pushed right via
     margin-left:auto. (Was justify-content:space-between, which — with the ::before
     caret as a 3rd flex item — spread caret/heading/count apart and floated the
     heading to centre on every viewport.) */
  justify-content: flex-start;
  gap: 0;
  padding: 0.5rem 0 0.6rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1rem;
}
.dash-section-summary::-webkit-details-marker { display: none; }
.dash-section-summary--static { cursor: default; }
.dash-section-h {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.dash-section-count {
  margin-left: auto;   /* push the count to the far right; caret+heading stay grouped left */
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-muted);
  background: var(--rule-faint);
  border: 1px solid var(--rule);
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  min-width: 1.5rem;
  text-align: center;
}
.dash-section-count--warn  { color: #7d5a1f; background: rgba(184,134,47,0.12); border-color: rgba(184,134,47,0.4); }
.dash-section-count--alert { color: #8a3220; background: rgba(181,72,47,0.12);  border-color: rgba(181,72,47,0.45); }
.dash-section--critical {
  /* No <details> wrapper; subtle accent on the left edge keeps it distinct */
  padding-left: 0.75rem;
  border-left: 3px solid rgba(181, 72, 47, 0.55);
}
/* Visual cue: rotating chevron on collapsible section headings (not on static) */
.dash-section > .dash-section-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--ink-muted);
  font-size: 0.7rem;
  transition: transform 150ms ease;
}
.dash-section[open] > .dash-section-summary::before { transform: rotate(90deg); }
.dash-section-summary--static::before { content: none; }

/* ----- Phase 5d-b: pending-approval card sub-headings ----- */
.dash-subhead {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.dash-subhead:first-of-type { margin-top: 0.5rem; }

/* ----- Phase 5f: /analytics page — headline tiles + 2-column chart grid ----- */
.analytics-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}
.analytics-total-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
.analytics-grid {
  display: grid;
  /* min(380px,100%) so a card goes full-width when the viewport is narrower than
     380px (a bare 380px floor overflowed a 390px phone once page padding is counted). */
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 1rem;
}
/* Section heading that groups the analytics tiles + charts (Money / Vendor spend / …) */
.analytics-sec {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 2.2rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--rule);
}
.analytics-sec:first-of-type { margin-top: 0.5rem; }
.chart-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem 1.1rem 0.6rem;
  min-width: 0;
}
.chart-card-h h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.chart-card-sub {
  margin: 0.2rem 0 0.7rem;
  font-size: 0.78rem;
  color: var(--ink-muted);
}

/* SVG charts — monochrome editorial */
.kr-chart {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--font-sans);
  overflow: visible;
}
.kr-chart text {
  font-size: 10px;
  fill: var(--ink-soft);
}
.kr-chart__grid {
  stroke: var(--rule);
  stroke-width: 0.5;
}
.kr-chart__bar,
.kr-chart__hbar {
  fill: var(--accent);
  opacity: 0.85;
}
.kr-chart__bar:hover,
.kr-chart__hbar:hover { opacity: 1; }
.kr-chart__track {
  fill: var(--rule-faint);
}
.kr-chart__line {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
}
.kr-chart__dot {
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width: 1.5;
}
.kr-chart__xlabel,
.kr-chart__ylabel,
.kr-chart__hlabel,
.kr-chart__hvalue,
.kr-chart__legend {
  font-size: 9px;
}
.kr-chart__hlabel { font-weight: 500; fill: var(--ink); }
.kr-chart__hvalue { font-weight: 600; fill: var(--ink); }
.kr-chart__donut-total {
  font-size: 22px;
  font-weight: 300;
  fill: var(--ink);
}
.kr-chart__donut-sub {
  font-size: 9px;
  fill: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kr-chart__empty-text {
  font-size: 14px;
  fill: var(--ink-muted);
  font-style: italic;
}
html.theme-dark .kr-chart text { fill: var(--ink-soft); }
html.theme-dark .kr-chart__hlabel,
html.theme-dark .kr-chart__hvalue { fill: var(--ink); }

/* ----- Phase 5g-a: Tasks filter tabs ----- */
.task-filters {
  display: flex;
  flex-wrap: wrap;   /* chips wrap instead of overflowing the viewport on mobile */
  gap: 0.4rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.25rem;
}
.task-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.task-filter:hover { color: var(--ink); text-decoration: none; }
.task-filter--active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.task-filter-count {
  font-size: 0.72rem;
  background: var(--rule-faint);
  border: 1px solid var(--rule);
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  color: var(--ink-muted);
  font-weight: 500;
}
.task-filter--active .task-filter-count {
  background: var(--accent-faint);
  border-color: var(--accent);
  color: var(--ink);
}

/* ----- Phase 5k: vendor assignment card-per-row (replaces 5i+5j inline grid) ----- */
.script-row.script-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--bg);
}
.script-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule-faint);
  margin-bottom: 0.75rem;
}
.script-card-header .script-row-name {
  font-size: 0.95rem;
  color: var(--ink);
}
.script-card-verticals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.35rem 0;
}
.script-card-verticals label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0;
  cursor: pointer;
}
.script-card-verticals input { width: auto; padding: 0; }
.script-row-primary {
  display: flex; align-items: center; gap: 0.3rem;
  font-weight: normal; text-transform: none; letter-spacing: 0;
  font-size: 0.78rem; color: var(--ink-soft); margin: 0;
  white-space: nowrap;
}
.script-row-primary input { width: auto; padding: 0; }
.script-row-remove {
  background: transparent; border: 1px solid var(--rule);
  color: var(--ink-muted);
  width: 26px; height: 26px;
  border-radius: 4px;
  font-size: 1rem; line-height: 1;
  padding: 0; cursor: pointer;
}
.script-row-remove:hover {
  border-color: var(--alert);
  color: var(--alert);
  background: transparent;
}
.vendor-search {
  position: relative;
  margin-top: 0.75rem;
}
.vendor-search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  font-size: 0.88rem;
  background: var(--bg);
}
.vendor-search-input:focus {
  border-style: solid;
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.vendor-search-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.vendor-search-result {
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rule-faint);
}
.vendor-search-result:last-child { border-bottom: 0; }
.vendor-search-result:hover { background: var(--rule-faint); }
.vendor-search-empty {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-style: italic;
}

/* ===== Phase 5p: functional nav-group dropdowns ===== */
.nav-group { position: relative; }
.nav-group-btn {
  background: transparent;
  border: none;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding: 0.25rem 0;
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.nav-group-btn:hover {
  color: var(--ink);
  background: transparent;
  border-color: var(--ink-faint);
}
.nav-group.active > .nav-group-btn {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.nav-caret {
  font-size: 0.6rem;
  color: var(--ink-muted);
  line-height: 1;
  margin-left: 0.05rem;
  transition: transform 150ms ease;
}
.nav-group-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-group-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warn);
  margin-left: 0.15rem;
}
/* 5p — numeric open-task count promoted onto the Work▾ parent button. */
.nav-group-count {
  display: inline-block;
  margin-left: 0.3rem;
  min-width: 1.1em;
  padding: 0.05rem 0.35rem;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  border-radius: 999px;
  background: rgba(184,134,47,0.16);
  color: #7d5a1f;
}
html.theme-dark .nav-group-count { background: rgba(184,134,47,0.24); color: #f0d28a; }
/* 5o — flash the destination row when arriving via a bell deep-link (#task-N / #score-N). */
@keyframes krama-row-flash {
  0%   { background-color: rgba(184,134,47,0.28); }
  100% { background-color: transparent; }
}
.krama-flash { animation: krama-row-flash 1.8s ease-out 1; }
/* Invisible bridge over the 6px button→menu gap so a hover doesn't drop when
   the cursor crosses the gap to reach an item (the menu stays within .nav-group
   for mouseleave purposes). Only present while the menu is open. */
.nav-group-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.nav-group-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--card);            /* D5b-4: float over content; --card lifts off the dark page (was var(--bg) = flat in dark) */
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  padding: 0.35rem 0;
  z-index: 90;
}
.nav-group-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-left: 3px solid transparent;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.nav-icon { flex-shrink: 0; opacity: 0.65; }
.nav-group-menu a:hover .nav-icon,
.nav-group-menu a.active .nav-icon { opacity: 1; }
.nav-group-menu a:hover {
  background: var(--rule-faint);   /* D5b-4: menu panel is var(--card); --surface == --card in dark → hover was invisible (latent since increment A) */
  color: var(--ink);
  border-left-color: var(--accent);
  text-decoration: none;
}
.nav-group-menu a.active {
  color: var(--ink);
  background: var(--surface);
  border-left-color: var(--accent);
}
/* Admin is rightmost when admin_dev — anchor its menu to the right edge of the button
   so the 180px panel doesn't spill off-viewport on narrow widths. */
.nav-group[data-group="admin"] .nav-group-menu { left: auto; right: 0; }

/* ===== Phase 5o: notification bell + dropdown ===== */
.notif-wrap { position: relative; display: inline-flex; align-items: center; }
.notif-bell {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  padding: 0.35rem;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.notif-bell:hover { background: var(--surface); border-color: var(--rule); color: var(--ink); }
.notif-bell.has-items { color: var(--ink); }
.notif-badge {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--alert);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.05rem 0.32rem;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--card);            /* D5b-4: float off the dark page; --card lifts a shade above --bg (was var(--bg) = flat in dark) */
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 0.5rem 0;
  z-index: 100;
}
.notif-dropdown-header {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.5rem 1rem 0.4rem;
  border-bottom: 1px solid var(--rule-faint);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.notif-markall {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
  padding: 0.1rem 0.2rem;
}
.notif-markall:hover { text-decoration: underline; }
.notif-markall[hidden] { display: none; }
.notif-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-muted);
  font-style: italic;
}
.notif-section { padding: 0.4rem 0; border-bottom: 1px solid var(--rule-faint); }
.notif-section:last-child { border-bottom: none; }
.notif-section-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.25rem;
  padding: 0 1rem;
  display: flex; justify-content: space-between; align-items: center;
}
.notif-section-count {
  background: var(--rule);
  color: var(--ink-soft);
  font-size: 0.65rem;
  padding: 0.02rem 0.4rem;
  border-radius: 999px;
  letter-spacing: 0;
}
.notif-item {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--ink);
  font-size: 0.88rem;
  border-left: 3px solid transparent;
  transition: background 100ms ease, border-color 100ms ease;
}
.notif-item:hover {
  background: var(--rule-faint);   /* D5b-4: --surface == --card in dark → hover invisible on the now-card panel; --rule-faint contrasts in both themes */
  border-left-color: var(--accent);
  text-decoration: none;
}
.notif-item-title { display: block; }
.notif-item-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}
.notif-item-more {
  display: block;
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--accent);
}
.notif-item-more:hover { background: var(--rule-faint); text-decoration: none; }  /* D5b-4: see .notif-item:hover */
/* F3: unread items show a bold title; read items dim in place (don't vanish). */
.notif-item:not(.notif-item--read) .notif-item-title { font-weight: 600; }
.notif-item--read { opacity: 0.5; }
.notif-item--read:hover { opacity: 0.85; }

/* ===== Phase 5o: dashboard hero card ===== */
.hero-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.2rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin-bottom: 1.5rem;
}
.hero-card-left { flex: 1; min-width: 0; }
.hero-card-greeting {
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.hero-card-date {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0.2rem 0 0;
}
.hero-card-right { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero-card-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  min-width: 88px;
  color: var(--ink);
  transition: border-color 150ms ease, transform 150ms ease;
}
.hero-card-stat:hover { text-decoration: none; transform: translateY(-1px); }
.hero-card-stat--warn  { border-color: var(--warn);  }
.hero-card-stat--alert { border-color: var(--alert); }
.hero-card-stat--ok    { border-color: var(--rule);  }
.hero-card-stat-n {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.hero-card-stat--warn  .hero-card-stat-n { color: var(--warn);  }
.hero-card-stat--alert .hero-card-stat-n { color: var(--alert); }
.hero-card-stat-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.15rem;
  white-space: nowrap;
}
@media (max-width: 780px) {
  .hero-card { flex-direction: column; align-items: flex-start; }
  .notif-dropdown { width: calc(100vw - 2rem); right: -0.5rem; }
}
/* Workspace identity label in the topnav (between the brand and the Dashboard link).
   Gradient TEXT off the workspace accent — the gradient is confined to this element only.
   Ops (red accent) and Productions (orange accent) both derive from var(--accent). */
.ws-brand-label {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  align-self: center;
  padding-left: 0.85rem;
  margin-left: 0.35rem;
  border-left: 1px solid var(--rule);
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #7c3aed));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Fallback for engines without background-clip:text support — solid accent, still readable. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ws-brand-label { color: var(--accent); background: none; }
}
/* Phones: the topnav wraps and pushes the bell + account avatar to the LEFT of row 2,
   so right:0-anchored dropdowns opened leftward off-screen. Anchor them to the VIEWPORT
   instead — a fixed panel dropping below the ~108px wrapped header, spanning the width. */
@media (max-width: 640px) {
  .notif-dropdown,
  .account-dropdown {
    position: fixed;
    top: 112px;
    left: 0.5rem; right: 0.5rem;
    width: auto; min-width: 0; max-width: none;
    max-height: calc(100vh - 124px); overflow-y: auto;
  }
  /* row-edit popup (projects/series): min-width:460px overflows a 390px phone → let
     its max-width:90vw govern. */
  .row-modal { min-width: 0; }
}

/* ===== Phase 5r: scripted chatbot widget (floating drawer) ===== */
/* ===== Phase 7: FAB tower (stacked floating buttons) ===== */
.fab-tower {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 99;
  display: flex; flex-direction: column-reverse; gap: 0.6rem;
  align-items: flex-end;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Mobile auto-hide: nav-groups.js adds this when scrolling DOWN (reading) and removes it
   on scroll-up/near-top, so the buttons never sit over content while you read. Mobile-only
   + skipped while a FAB drawer is open (the class is only added by JS under those conditions). */
.fab-tower--hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
/* Existing kRama Helper widget overrides — when inside .fab-tower, it shouldn't
   set its own position:fixed since the tower handles placement. */
.fab-tower > .chat-widget,
.fab-tower > .team-chat-wrap,
.fab-tower > .dm-wrap { position: relative; bottom: auto; right: auto; }
/* OVERLAP FIX (2026-07-02): the sticky topnav is a lower stacking context (z 60) than the
   FAB tower (z 99), so an open account/bell menu would render UNDER the FABs. Hide the FAB
   tower while a top-bar menu is open (you're not using the FABs then). */
body:has(#accountDropdown:not([hidden])) .fab-tower,
body:has(#notifDropdown:not([hidden]))  .fab-tower { display: none; }
/* OVERLAP FIX: the drawers open above their own FAB (bottom:72px), but the SIBLING FABs stacked
   above the active one would overlap the open panel. Mutual-exclusion means only one drawer is
   open at a time → hide the sibling FAB widgets so nothing overlaps the open drawer. */
.fab-tower:has(.chat-drawer:not([hidden]))      > .team-chat-wrap,
.fab-tower:has(.chat-drawer:not([hidden]))      > .dm-wrap,
.fab-tower:has(.team-chat-drawer:not([hidden])) > .chat-widget,
.fab-tower:has(.team-chat-drawer:not([hidden])) > .dm-wrap,
.fab-tower:has(.dm-drawer:not([hidden]))        > .chat-widget,
.fab-tower:has(.dm-drawer:not([hidden]))        > .team-chat-wrap { display: none; }
.chat-widget { position: fixed; bottom: 1rem; right: 1rem; z-index: 99; }
.chat-toggle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 150ms ease, background 150ms ease;
}
.chat-toggle:hover { transform: translateY(-2px); background: var(--accent-hover); }
.chat-toggle[aria-expanded="true"] { background: var(--accent-hover); }
.chat-drawer {
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 380px;
  max-width: calc(100vw - 2rem);
  height: 520px;
  max-height: calc(100vh - 6rem);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Honour the [hidden] attribute — without this, display:flex above keeps the
   drawer visible even when JS sets `drawer.hidden = true`. */
.chat-drawer[hidden] { display: none; }
.chat-drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.chat-drawer-title { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--ink); }
.chat-drawer-sub   { margin: 0.1rem 0 0; font-size: 0.72rem; color: var(--ink-muted); letter-spacing: 0.02em; }
.chat-drawer-close {
  background: transparent; border: none;
  color: var(--ink-muted);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
  padding: 0 0.35rem;
}
.chat-drawer-close:hover { color: var(--ink); background: transparent; border: none; }
.chat-log {
  flex: 1; overflow-y: auto;
  padding: 0.75rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.chat-bubble {
  max-width: 85%;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.chat-bubble p { margin: 0; }
.chat-bubble p + p,
.chat-bubble p + ul,
.chat-bubble ul + p { margin-top: 0.4rem; }
.chat-bubble--bot {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--rule-faint);
  color: var(--ink);
}
.chat-bubble--user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
}
.chat-bubble-heading {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 0 0 0.3rem;
}
.chat-bubble-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.chat-bubble-list li {
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--rule-faint);
  font-size: 0.85rem;
}
.chat-bubble-list li:last-child { border-bottom: none; }
.chat-bubble-list a { color: var(--accent); }
.chat-bubble-list a:hover { text-decoration: underline; }
.chat-bubble-meta { color: var(--ink-muted); font-size: 0.78rem; }
.chat-bubble--spinner {
  display: inline-flex; gap: 0.25rem; padding: 0.7rem 0.85rem; align-items: center;
}
.chat-spinner-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-muted);
  animation: chat-bounce 1s infinite ease-in-out;
}
.chat-spinner-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-spinner-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-4px); opacity: 1; }
}
.chat-confirm-btns {
  display: flex; gap: 0.5rem; margin-top: 0.5rem;
}
.chat-confirm-yes,
.chat-confirm-no {
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
}
.chat-confirm-yes {
  background: var(--accent);
  color: #fff;
}
.chat-confirm-yes:hover:not(:disabled) { opacity: 0.88; }
.chat-confirm-no {
  background: transparent;
  border-color: var(--rule-faint);
  color: var(--ink-muted);
}
.chat-confirm-no:hover:not(:disabled) { background: var(--surface-raised); }
.chat-confirm-yes:disabled,
.chat-confirm-no:disabled { opacity: 0.45; cursor: default; }
.chat-chips {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  padding: 0.5rem 0.75rem 0;
  border-top: 1px solid var(--rule-faint);
}
.chat-chips button {
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.chat-chips button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.chat-form {
  display: flex; gap: 0.4rem;
  padding: 0.5rem 0.75rem 0.75rem;
}
.chat-form input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}
.chat-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.chat-form button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  padding: 0 0.85rem;
  cursor: pointer;
}
.chat-form button:hover { background: var(--accent-hover); }

@media (max-width: 480px) {
  .chat-drawer { width: calc(100vw - 1rem); right: -0.5rem; }
}

/* ===== Phase 7: team chat widget (sibling of chat-widget, green accent) ===== */
.team-chat-wrap { position: relative; }
.team-chat-toggle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform 150ms ease, background 150ms ease;
}
.team-chat-toggle:hover { transform: translateY(-2px); background: #256a4d; }
.team-chat-toggle[aria-expanded="true"] { background: #256a4d; }
.team-chat-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--alert);
  color: #fff;
  font-size: 0.62rem; font-weight: 600;
  padding: 0.05rem 0.32rem;
  border-radius: 999px;
  min-width: 16px; text-align: center;
  line-height: 1.4;
}
.team-chat-drawer {
  position: absolute;
  bottom: 72px; right: 0;
  width: 400px; max-width: calc(100vw - 1rem);
  height: 600px; max-height: calc(100vh - 6rem);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.team-chat-drawer[hidden] { display: none; }
.team-chat-drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.team-chat-title { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--ink); }
.team-chat-sub { margin: 0.1rem 0 0; font-size: 0.72rem; color: var(--ink-muted); }
.team-chat-active-wrap { cursor: help; border-bottom: 1px dotted var(--ink-muted); }
.team-chat-active-wrap:hover { color: var(--ink); }
.team-chat-notif-btn {
  background: transparent; border: none;
  font-size: 1rem; line-height: 1; opacity: 0.45;
  cursor: pointer; padding: 0 0.3rem;
  transition: opacity 0.15s;
}
.team-chat-notif-btn:hover:not(:disabled) { opacity: 0.75; }
.team-chat-notif-btn.is-active { opacity: 1; }
.team-chat-notif-btn:disabled { cursor: default; }
.team-chat-drawer-close {
  background: transparent; border: none;
  color: var(--ink-muted);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer; padding: 0 0.35rem;
}
.team-chat-load-more { text-align: center; padding: 0.5rem; border-bottom: 1px solid var(--rule-faint); }
.team-chat-load-more button {
  background: transparent; border: 1px solid var(--rule); color: var(--ink-soft);
  font-size: 0.8rem; padding: 0.3rem 0.75rem; border-radius: 4px; cursor: pointer;
}
.team-chat-log {
  flex: 1; overflow-y: auto;
  padding: 0.75rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.team-chat-msg {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.55rem;
  position: relative;
}
/* WhatsApp/iOS style: own messages right-aligned (accent bubble, no avatar),
   received left-aligned (neutral bubble + avatar). */
.team-chat-msg.is-own { grid-template-columns: 1fr; justify-items: end; }
.team-chat-msg.is-own .team-chat-avatar { display: none; }
.team-chat-msg.is-own .team-chat-msg-body { background: var(--accent-faint); border-radius: 10px 10px 3px 10px; }
.team-chat-msg.is-own .team-chat-msg-header { justify-content: flex-end; }
.team-chat-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.78rem; font-weight: 600;
  flex-shrink: 0;
}
.team-chat-msg-body { min-width: 0; width: fit-content; max-width: 88%; background: var(--rule-faint); border-radius: 10px 10px 10px 3px; padding: 0.4rem 0.6rem; }
.team-chat-msg-header {
  display: flex; gap: 0.5rem; align-items: baseline;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.team-chat-msg-header strong { color: var(--ink); font-weight: 600; font-size: 0.85rem; }
.team-chat-msg-time { font-size: 0.7rem; }
/* E5 read receipts — ✓ sent (muted) / ✓✓ read (accent), on own messages only.
   Click the tick for a "Read by …" popover; hover shows the same via title. */
.tc-receipt-row { text-align: right; margin-top: 0.1rem; line-height: 1; }
.tc-receipt { font-size: 0.72rem; color: var(--ink-faint); cursor: pointer; user-select: none; letter-spacing: -1px; }
.tc-receipt.is-read { color: var(--accent); }
.tc-receipt-pop {
  position: fixed; z-index: 1400;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  padding: 0.5rem 0.7rem; font-size: 0.8rem; color: var(--ink); line-height: 1.5;
  max-width: 240px;
}
.tc-receipt-pop-title { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-bottom: 0.25rem; }
.tc-receipt-pop-muted { color: var(--ink-muted); font-style: italic; }
.team-chat-msg-text {
  margin: 0.15rem 0 0;
  font-size: 0.88rem; line-height: 1.4;
  color: var(--ink);
  word-wrap: break-word;
  white-space: pre-wrap;
}
.team-chat-msg.is-deleted .team-chat-msg-text {
  color: var(--ink-muted); font-style: italic;
}
/* Undo a soft-delete (shown on the tombstone to the deleter / Admin Dev). */
.tc-undo {
  margin-left: 0.4rem; font-size: 0.72rem; font-weight: 600; font-style: normal;
  color: var(--accent); background: none; border: none; padding: 0;
  cursor: pointer; text-decoration: underline;
}
.tc-undo:hover { color: var(--accent-hover); }
.team-chat-msg.is-pending { opacity: 0.6; }
.team-chat-msg.is-failed .team-chat-msg-text { color: var(--alert); }
.team-chat-msg-delete {
  position: absolute; top: 0.25rem; right: 0;
  background: transparent; border: none;
  color: var(--ink-faint); cursor: pointer;
  font-size: 0.95rem; padding: 0.1rem 0.3rem;
  opacity: 0; transition: opacity 100ms ease;
}
.team-chat-msg:hover .team-chat-msg-delete { opacity: 1; }
.team-chat-msg-delete:hover { color: var(--alert); }
.mention-chip {
  display: inline-block;
  padding: 0 0.3rem;
  background: var(--accent-faint);
  color: var(--accent-hover);
  border-radius: 3px;
  font-weight: 500;
  font-size: 0.82rem;
}
.mention-chip.is-self {
  background: rgba(46, 125, 91, 0.18);  /* var(--ok) at 18% */
  color: var(--ok);
}

.team-chat-typeahead {
  position: absolute;
  bottom: 86px; left: 12px; right: 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 200px; overflow-y: auto;
  z-index: 10;
}
.team-chat-typeahead-item {
  display: flex; gap: 0.5rem; align-items: center;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rule-faint);
}
.team-chat-typeahead-item:last-child { border-bottom: none; }
.team-chat-typeahead-item:hover,
.team-chat-typeahead-item.active { background: var(--surface); }
.team-chat-typeahead-item .team-chat-avatar { width: 22px; height: 22px; font-size: 0.65rem; }
.team-chat-typeahead-name { font-size: 0.85rem; color: var(--ink); }
.team-chat-typeahead-email { font-size: 0.7rem; color: var(--ink-muted); margin-left: auto; }

.team-chat-form {
  display: flex; gap: 0.4rem;
  padding: 0.5rem 0.75rem 0.75rem;
  border-top: 1px solid var(--rule-faint);
}
.team-chat-form textarea {
  flex: 1;
  padding: 0.55rem 0.75rem;
  font: inherit;
  font-size: 0.88rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  resize: none;
  min-height: 38px;
  max-height: 120px;
}
.team-chat-form textarea:focus { outline: none; border-color: var(--ok); box-shadow: 0 0 0 3px rgba(46,125,91,0.15); }
.team-chat-form button {
  background: var(--ok); color: #fff; border: none; border-radius: 6px;
  font-size: 1rem; padding: 0 0.9rem; cursor: pointer; align-self: flex-end;
  min-height: 38px;
}
.team-chat-form button:hover { background: #256a4d; }

@media (max-width: 480px) {
  .team-chat-drawer {
    position: fixed;
    bottom: 72px; right: 0.5rem; left: 0.5rem;
    width: auto; max-width: none;
    max-height: calc(100dvh - 5rem);
  }
}

/* Team chat Tier-2 (mig 345): actions, edit, reply, reactions, emoji picker */

/* Action row — hover-reveal, absolutely positioned top-right of each message */
.team-chat-msg-actions {
  position: absolute; top: 0.2rem; right: 0;
  display: flex; gap: 0.15rem; align-items: center;
  opacity: 0; transition: opacity 100ms ease;
}
.team-chat-msg:hover .team-chat-msg-actions { opacity: 1; }
.team-chat-action {
  background: transparent; border: none;
  color: var(--ink-faint); cursor: pointer;
  font-size: 0.85rem; padding: 0.1rem 0.28rem; border-radius: 3px;
  line-height: 1; transition: color 80ms ease, background 80ms ease;
}
.team-chat-action:hover { color: var(--ink); background: var(--surface); }
.tc-action-delete:hover { color: var(--alert) !important; }

/* "(edited)" label */
.tc-edited { font-size: 0.68rem; color: var(--ink-muted); font-style: italic; }

/* Quoted reply block inside a message */
.tc-reply-quote {
  display: flex; gap: 0.4rem; align-items: baseline;
  border-left: 3px solid var(--accent);
  padding: 0.15rem 0.5rem;
  margin: 0.2rem 0 0.3rem;
  background: var(--surface);
  border-radius: 0 4px 4px 0;
  font-size: 0.78rem; color: var(--ink-soft);
  max-width: 100%; overflow: hidden;
}
.tc-reply-quote-name { font-weight: 600; color: var(--accent-hover); white-space: nowrap; flex-shrink: 0; }
.tc-reply-quote-body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-deleted-text { font-style: italic; color: var(--ink-muted); }

/* Reply bar above textarea */
.tc-reply-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.3rem 0.75rem;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  font-size: 0.8rem; color: var(--ink-soft);
}
.tc-reply-bar[hidden] { display: none; }
.tc-reply-bar-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-reply-bar-cancel {
  background: transparent; border: none; color: var(--ink-muted);
  cursor: pointer; font-size: 1rem; padding: 0 0.3rem; flex-shrink: 0;
}

/* Inline edit form */
.tc-edit-input {
  width: 100%; box-sizing: border-box; display: block;
  background: var(--bg); border: 1px solid var(--ok);
  border-radius: 4px; padding: 0.25rem 0.5rem;
  font-size: 0.88rem; font-family: inherit; line-height: 1.4; color: var(--ink);
  min-height: 3.2em; max-height: 220px; resize: vertical; overflow-y: auto;
}
.tc-edit-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; }
.tc-edit-save, .tc-edit-cancel {
  font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 4px; cursor: pointer;
}
.tc-edit-save { background: var(--ok); color: #fff; border: none; }
.tc-edit-save:hover { background: #256a4d; }
.tc-edit-cancel { background: transparent; border: 1px solid var(--rule); color: var(--ink-soft); }
.tc-edit-hint { font-size: 0.7rem; color: var(--ink-soft); margin-left: auto; }

/* #3 — composer formatting toolbar (bold/italic) */
.tc-format-toolbar { display: flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.1rem 0; }
.tc-fmt-btn {
  min-width: 1.7rem; height: 1.5rem; line-height: 1; padding: 0 0.35rem;
  font-size: 0.82rem; border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-soft); border-radius: 4px; cursor: pointer;
}
.tc-fmt-btn:hover { border-color: var(--accent); color: var(--ink); }
.tc-fmt-hint { font-size: 0.7rem; color: var(--ink-soft); margin-left: auto; }

/* Reaction chips */
.team-chat-reactions { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.tc-reaction {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.82rem; padding: 0.1rem 0.45rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 999px; cursor: pointer;
  line-height: 1.4; transition: border-color 80ms ease;
}
.tc-reaction:hover { border-color: var(--accent); }
.tc-reaction.is-own { background: var(--accent-faint); border-color: var(--accent-hover); }
.tc-reaction-count { font-size: 0.75rem; color: var(--ink-soft); }

/* Emoji picker popup — fixed so drawer overflow:hidden doesn't clip it */
.tc-emoji-picker {
  position: fixed; z-index: 9999;
  display: flex; flex-wrap: wrap; gap: 0.2rem;
  padding: 0.4rem;
  background: var(--bg); border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  width: 200px;
}
.tc-emoji-btn {
  background: transparent; border: none; cursor: pointer;
  font-size: 1.3rem; padding: 0.2rem;
  border-radius: 4px; line-height: 1;
}
.tc-emoji-btn:hover { background: var(--surface); }

/* ===== PM-122 #10: direct-messages drawer (org-wide 1:1, in the FAB tower) ===== */
.dm-wrap { position: relative; }
.dm-toggle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; transition: transform 150ms ease, background 150ms ease;
}
.dm-toggle:hover { transform: translateY(-2px); background: var(--accent-hover); }
.dm-toggle[aria-expanded="true"] { background: var(--accent-hover); }
.dm-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--alert); color: #fff;
  font-size: 0.62rem; font-weight: 600; padding: 0.05rem 0.32rem;
  border-radius: 999px; min-width: 16px; text-align: center; line-height: 1.4;
}
.dm-drawer {
  position: absolute; bottom: 72px; right: 0;
  width: 380px; max-width: calc(100vw - 1rem);
  height: 560px; max-height: calc(100vh - 6rem);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
  display: flex; flex-direction: column; overflow: hidden;
}
.dm-drawer[hidden] { display: none; }
.dm-drawer-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 0.9rem; background: var(--surface); border-bottom: 1px solid var(--rule);
}
.dm-title { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-back, .dm-close { background: transparent; border: none; color: var(--ink-muted); cursor: pointer; line-height: 1; padding: 0 0.3rem; }
.dm-back { font-size: 1.5rem; }
.dm-close { font-size: 1.4rem; }
.dm-back:hover, .dm-close:hover { color: var(--ink); }
.dm-contacts { flex: 1; overflow-y: auto; padding: 0.3rem; }
.dm-contacts[hidden] { display: none; }
.dm-empty { color: var(--ink-faint); font-style: italic; font-size: 0.85rem; text-align: center; padding: 1.5rem 1rem; }
.dm-contact {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  background: transparent; border: none; border-radius: 8px;
  padding: 0.55rem 0.6rem; cursor: pointer; text-align: left; color: var(--ink);
}
.dm-contact:hover { background: var(--surface); }
.dm-c-name { flex: 1; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-c-when { font-size: 0.7rem; color: var(--ink-faint); }
.dm-c-unread {
  background: var(--accent); color: #fff; font-size: 0.62rem; font-weight: 600;
  padding: 0.05rem 0.32rem; border-radius: 999px; min-width: 16px; text-align: center;
}
.dm-thread-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dm-thread-view[hidden] { display: none; }
.dm-log { flex: 1; overflow-y: auto; padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dm-msg { display: flex; flex-direction: column; max-width: 78%; }
.dm-mine { align-self: flex-end; align-items: flex-end; }
.dm-theirs { align-self: flex-start; align-items: flex-start; }
.dm-bubble {
  position: relative; padding: 0.4rem 0.6rem; border-radius: 12px;
  font-size: 0.86rem; line-height: 1.35; word-break: break-word; white-space: normal;
  background: var(--surface); border: 1px solid var(--rule); color: var(--ink);
}
.dm-mine .dm-bubble { background: var(--accent); border-color: var(--accent); color: #fff; }
.dm-del { opacity: 0.7; }
.dm-msg-time { font-size: 0.66rem; color: var(--ink-faint); margin: 0.1rem 0.2rem 0; }
.dm-msg-del {
  background: transparent; border: none; color: inherit; opacity: 0.5;
  cursor: pointer; font-size: 0.9rem; line-height: 1; margin-left: 0.35rem; padding: 0;
}
.dm-msg-del:hover { opacity: 1; }
.dm-form { display: flex; gap: 0.4rem; padding: 0.55rem; border-top: 1px solid var(--rule); background: var(--surface); }
.dm-form textarea {
  flex: 1; resize: none; border: 1px solid var(--rule); border-radius: 8px;
  padding: 0.4rem 0.5rem; font: inherit; font-size: 0.86rem;
  background: var(--bg); color: var(--ink); box-sizing: border-box;
}
.dm-form button {
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  width: 40px; cursor: pointer; font-size: 1.1rem;
}
.dm-form button:hover { background: var(--accent-hover); }

/* ===== Phase 6: attachments panel (Drive-backed files) ===== */
.attachment-panel {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
}
.attachment-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-bottom: 0.75rem;
}
.attachment-count { color: var(--ink-muted); font-weight: 400; font-size: 0.85em; }
.attachment-actions { display: flex; gap: 0.5rem; }
.attachment-disabled-banner {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.8rem;
  background: var(--warn-faint, #fef3c7);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.attachment-empty {
  margin: 0.5rem 0;
  color: var(--ink-muted);
  font-style: italic;
  font-size: 0.88rem;
}
.attachment-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.attachment-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
}
.attachment-card-thumb {
  height: 110px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rule-faint);
  overflow: hidden;
}
.attachment-card-thumb img { max-width: 100%; max-height: 100%; object-fit: cover; }
.attachment-card-icon { font-size: 2.4rem; opacity: 0.75; }
.attachment-card-meta { padding: 0.5rem 0.6rem; flex: 1; }
.attachment-card-name {
  margin: 0 0 0.15rem;
  font-size: 0.85rem;
  word-break: break-word;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
}
.attachment-card-sub {
  margin: 0;
  font-size: 0.72rem;
  color: var(--ink-muted);
}
.attachment-card-actions {
  display: flex; gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-top: 1px solid var(--rule-faint);
  align-items: center; justify-content: space-between;
}
.attachment-card-actions .btn { font-size: 0.75rem; padding: 0.2rem 0.45rem; }
.attachment-detach {
  background: transparent; border: 1px solid var(--rule);
  color: var(--ink-muted);
  width: 24px; height: 24px;
  border-radius: 4px;
  font-size: 0.9rem; line-height: 1;
  padding: 0; cursor: pointer;
}
.attachment-detach:hover { border-color: var(--alert); color: var(--alert); background: transparent; }

/* Upload modal */
.upload-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  /* Above the series episode modal (.st-overlay z-index:1200) + escalation
     modal (1300) so the §5 upload/scoped-attach dialog opened from inside the
     episode modal renders ON TOP, not behind it. */
  z-index: 1400;
  display: flex; align-items: center; justify-content: center;
}
.upload-modal {
  width: 560px; max-width: calc(100vw - 2rem);
  background: var(--card);   /* D5b-5: modal dialog floats off the dark backdrop (D5b-3 missed this one; was var(--bg) = flat in dark) */
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 80vh;
}
.upload-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--rule-faint);   /* D5b-5: header band — --surface == --card in dark would erase it; --rule-faint keeps it */
}
.upload-modal-close {
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-muted); font-size: 1.3rem; line-height: 1; padding: 0 0.3rem;
}
.upload-dropzone {
  margin: 1rem;
  padding: 2rem 1rem;
  border: 2px dashed var(--rule);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  display: block;
  transition: border-color 150ms ease, background 150ms ease;
}
.upload-dropzone:hover, .upload-dropzone.drag {
  border-color: var(--accent);
  background: var(--rule-faint);   /* D5b-5: drag-highlight fill — visible on the now-card modal in dark (was var(--surface) = invisible) */
}
.upload-dropzone-hint { color: var(--ink-soft); font-size: 0.9rem; }
.upload-file-list {
  list-style: none;
  margin: 0; padding: 0 1rem;
  overflow-y: auto;
  flex: 1;
}
.upload-file-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr 100px;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule-faint);
  font-size: 0.85rem;
}
.upload-file-name { word-break: break-word; }
.upload-file-size { color: var(--ink-muted); font-size: 0.78rem; }
.upload-progress {
  height: 6px; background: var(--rule-faint);
  border-radius: 3px; overflow: hidden;
}
.upload-progress-bar {
  height: 100%; background: var(--accent);
  transition: width 200ms ease;
}
.upload-file-status { font-size: 0.78rem; color: var(--ink-muted); text-align: right; }
.upload-modal-footer {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--rule);
}

/* ===== Phase 6.5: Drive Browser ===== */
.drive-browser-header { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.drive-search {
  width: 100%; max-width: 480px;
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
}
.drive-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.drive-breadcrumb { font-size: 0.9rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; }
.drive-breadcrumb-link {
  background: transparent; border: none; cursor: pointer;
  color: var(--accent); font: inherit; padding: 0.1rem 0;
}
.drive-breadcrumb-link:hover { text-decoration: underline; }
.drive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
.drive-folder-card, .drive-file-card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card);          /* D5b-5: lift off the page (drive-browser is transparent; was var(--bg) = flat in dark) */
  box-shadow: var(--card-shadow);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 120ms ease, transform 120ms ease;
}
.drive-folder-card:hover, .drive-file-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.drive-card-thumb {
  height: 100px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rule-faint);
  overflow: hidden;
}
.drive-card-thumb img { max-width: 100%; max-height: 100%; object-fit: cover; }
.drive-card-icon { font-size: 2.4rem; opacity: 0.75; }
.drive-card-meta { padding: 0.5rem 0.6rem; }
.drive-card-name {
  margin: 0;
  font-size: 0.85rem;
  word-break: break-word;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
}
.drive-card-sub { margin: 0.15rem 0 0; font-size: 0.72rem; color: var(--ink-muted); }
.drive-file-open {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.drive-file-open:hover { background: #fff; color: var(--accent); }
.drive-pager { text-align: center; margin: 1rem 0; }

/* Attach-to-entity modal (in Drive Browser) */
.drive-attach-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.drive-attach-modal[hidden] { display: none; }
.drive-attach-card {
  width: 460px; max-width: calc(100vw - 2rem);
  max-height: 90vh; overflow-y: auto;
  background: var(--card);   /* D5b-5: modal dialog floats off the dark backdrop (D5b-3 missed this one; was var(--bg) = flat in dark) */
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.drive-attach-card header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.75rem;
}
.drive-attach-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 1.3rem; color: var(--ink-muted);
}
.drive-attach-card select,
.drive-attach-card input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule); border-radius: 6px;
  font-size: 0.9rem;
  background: var(--bg);
  margin-bottom: 0.5rem;
}
.drive-attach-suggest {
  list-style: none; padding: 0; margin: 0;
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
}
.drive-attach-suggest-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--rule-faint);
  font-size: 0.88rem;
}
.drive-attach-suggest-item:last-child { border-bottom: none; }
.drive-attach-suggest-item:hover { background: var(--surface); }

/* ── Help system ─────────────────────────────────────────────────────────── */

/* Right-side help drawer */
.help-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(380px, 92vw);
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--rule);
  box-shadow: -6px 0 24px rgba(0,0,0,.10);
  z-index: 950;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 200ms ease;
}
.help-drawer[hidden] { display: none; }
.help-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1rem .8rem;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.help-drawer-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
}
.help-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: .25rem;
  color: var(--ink-muted);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
}
.help-drawer-close:hover { background: var(--rule-faint); color: var(--ink); }
.help-drawer-body {
  overflow-y: auto;
  padding: 1rem;
  flex: 1;
}
.help-page-body {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.help-fields-section { margin-top: .25rem; }
.help-fields-heading {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 .75rem;
}
.help-field-entry {
  margin-bottom: .85rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--rule-faint);
}
.help-field-entry:last-child { border-bottom: none; margin-bottom: 0; }
.help-field-title {
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: .2rem;
}
.help-field-body {
  font-size: .83rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* Backdrop behind drawer on mobile */
.help-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.3);
  z-index: 940;
}
.help-backdrop[hidden] { display: none; }

/* Inline field help-tip (?) icon */
.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  background: var(--ink-faint);
  color: var(--bg);
  font-size: .58rem;
  font-weight: 700;
  cursor: help;
  margin-left: .3rem;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
  transition: background 120ms;
}
.help-tip:hover,
.help-tip.open { background: var(--accent); }
.help-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + .4rem);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: .45rem .7rem;
  border-radius: 5px;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.45;
  width: 230px;
  white-space: normal;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  display: none;
}
.help-tip:hover::after,
.help-tip.open::after { display: block; }
/* Keep tooltip on screen near left edge */
@media (max-width: 480px) {
  .help-tip::after { left: 0; transform: none; }
}
.drive-attach-suggest-item small { color: var(--ink-muted); display: block; font-size: 0.78rem; margin-top: 0.15rem; }

/* ============================================================
 * D5b-1c — app-wide card depth (the owner-approved dashboard treatment, graduated to the base).
 * White cards lifted by their border + double-shadow + radius, on the unchanged white page (no
 * cream). Token-driven so dark mode + all accents survive. Placed at end-of-file so it overrides
 * the earlier .dash-card (6px) / .hero-card radius. (D5b-1d: dashboard.css retired — this base +
 * the dashboards' own inline <style> now cover it.) Extended to analytics/table/auth cards too;
 * generic .card additions are additive (inline per-page styles win on conflict, the shadow just
 * fills the gap → nothing breaks).
 * ============================================================ */
.card,
.dash-card,
.hero-card,
.chart-card,
.analytics-total-card,
.table-container,
.auth-card {
  background: var(--card);          /* #fff light / #161616 dark — covers bare .card in BOTH themes
                                       (no transparent-shadow); per-page inline bg still wins. The
                                       .dash-card--warn/--alert tint is a border-left, so it survives. */
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow .18s ease;
}
/* Shadow deepens on hover (no transform-lift — .dash-card is also used as a STATIC info panel on
   the detail pages, where a jump would read as a bug). */
.dash-card:hover { box-shadow: var(--card-shadow-hover); }

/* Dashboard "Escalated items" rows (both dashboards). Class-extracted from inline flex so the
   ≤640px rule can stack them — inline styles can't be media-queried. Desktop = unchanged. */
.dash-esc-row {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem .8rem;
  /* dark-aware alert tint (was hardcoded #fff3f0/#e8a09a → a light unreadable patch in dark mode) */
  background: color-mix(in srgb, var(--alert) 10%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--alert) 35%, var(--bg));
  border-radius: 8px;
}
.dash-esc-reason { color: var(--ink-muted); font-size: .85rem; flex: 1; }
@media (max-width: 640px) {
  /* B2 mobile: stack each escalated item vertically so the reason/timestamp don't crush to one word per line */
  .dash-esc-row { flex-direction: column; gap: .15rem; }
  .dash-esc-reason { flex: none; }
}

/* #5 — sortable list columns (shared public/static/js/list-sort.js) */
.st-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.st-sortable:hover { color: var(--ink); }
.st-sort-ind { font-size: .6rem; opacity: .85; }

/* Q1 — Tasks view modes (List / Group by · / Manual order). Shared by both workspaces. */
.task-views { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: 0 0 1rem; }
.task-views .tv-label { font-size: .78rem; color: var(--ink-muted); margin-right: .15rem; }
.task-view { font-size: .82rem; padding: .3rem .7rem; border: 1px solid var(--line, #e5e5e5); border-radius: 7px; color: var(--ink-muted); text-decoration: none; background: var(--card, #fff); white-space: nowrap; }
.task-view:hover { color: var(--ink); }
.task-view--active { background: var(--accent, #b23a28); border-color: var(--accent, #b23a28); color: #fff; }
.task-group-row td { background: var(--bg, #f4f7f4); font-weight: 600; font-size: .8rem; padding: .45rem .8rem; color: var(--ink-muted); }
.tk-reorder-hint { font-size: .82rem; color: var(--ink-muted); margin: 0 0 .6rem; }
.tk-reorder { border: 1px solid var(--line, #e5e5e5); border-radius: 12px; overflow: hidden; }
.tk-row { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-top: 1px solid var(--line, #e5e5e5); background: var(--card, #fff); font-size: .88rem; }
.tk-row:first-child { border-top: 0; }
.tk-row[draggable="true"] { cursor: grab; }
.tk-row.drag { opacity: .45; }
.tk-row .grip { color: var(--ink-faint, #999); cursor: grab; user-select: none; }
.tk-row .tk-title { flex: 1; min-width: 0; }
.tk-row .tk-assignee { width: 9rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-row .tk-due { width: 6rem; color: var(--ink-muted); font-size: .82rem; text-align: right; }

/* Generic overlay / modal (.chm-ov / .chm) — base rules for non-channel pages;
   channel.css overrides with its --surface / --rule / --ch-radius tokens when loaded. */
.chm-ov { position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:60 }
.chm { background:var(--card,#fff);border:1px solid var(--line,#e5e5e5);border-radius:12px;padding:1.3rem 1.4rem;max-width:520px;width:90%;max-height:90vh;overflow-y:auto }
.chm h3 { margin:0 0 .9rem;font-size:1.1rem;color:var(--ink) }
.chm label { display:block;font-size:.78rem;font-weight:600;color:var(--ink-muted);margin-bottom:.3rem }
.chm input:not([type=checkbox]):not([type=radio]),.chm select,.chm textarea { width:100%;padding:.5rem .6rem;border:1px solid var(--line,#e5e5e5);border-radius:7px;background:var(--bg);color:var(--ink);font:inherit }
.chm-actions { display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.1rem }

/* combobox.js — single-select typeahead (U1). Progressive enhancement over <select data-combobox>. */
.cbx { position:relative;flex:1 1 auto;min-width:0 }
/* sr-only — !important so an inline width/height on the enhanced <select> (e.g. style="width:100%"
   on task/mom forms) can't un-hide the native select and overflow the page on mobile. */
.cbx-native { position:absolute !important;width:1px !important;height:1px !important;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.cbx-input { width:100% }
.cbx-list { position:absolute;top:100%;left:0;right:0;z-index:70;max-height:220px;overflow-y:auto;margin-top:2px;background:var(--card,#fff);border:1px solid var(--line,#e5e5e5);border-radius:7px;box-shadow:0 6px 20px rgba(0,0,0,.14) }
.cbx-item { padding:.42rem .6rem;cursor:pointer;font-size:.88rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.cbx-item:hover, .cbx-item.active { background:var(--bg,#f6f7f9) }
.cbx-item.sel { font-weight:600 }
.cbx-none { padding:.42rem .6rem;color:var(--ink-muted);font-size:.85rem }

/* U5 (UX audit 2026-06) — touch tap-targets. On COARSE pointers (phones/tablets) only, lift small
   buttons to a comfortable ~44px tap size; desktop (fine pointer) is completely unchanged. Buttons
   are inline-block so min-height applies. Inline text links are left as-is (min-height is inert on
   inline elements — a separate concern, low value). */
@media (pointer: coarse) {
  button, .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; padding-top: .4rem; padding-bottom: .4rem; }
  .attachment-card-actions .btn { min-height: 40px; }
}

/* U3 — inline status editing affordance (Ops lists). Only rendered for edit-capable roles. */
.inline-status { cursor: pointer; }
.inline-status:hover, .inline-status:focus { outline: 1px dashed var(--ink-faint); outline-offset: 2px; }
.inline-status-sel { font: inherit; font-size: .82rem; padding: .15rem .3rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg); color: var(--ink); }

/* ============================================================
 * .sec-head — consistent card / section header treatment (owner-approved).
 * A faint accent-tinted band behind the header row (title + any inline action
 * button share the row) + a thin accent underline separating it from the body.
 * Token-driven → dark-mode + all accents survive (color-mix over --accent /
 * --surface-2 / --rule). Deliberately restrained: a faint band + a soft (not
 * full-saturation) 2px accent rule — this is a whole-app treatment.
 *
 * STANDALONE mode (this rule): section headers that sit ABOVE a board/list, NOT
 * inside a card (e.g. the Productions dashboard section <h2>s). Own padding, own
 * radius, no negative margins. Composes onto an existing flex row.
 *
 * IN-CARD (full-bleed) mode lives in channel.css as `.ch-card > .sec-head`
 * (negative margins matching .pad + top-corner radius = --ch-radius); a
 * style.css rule can't see --ch-radius, so the bleed is scoped there.
 * ============================================================ */
.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 0 0 .9rem;
  padding: .5rem .85rem;
  /* faint accent-tinted grey band — subtle, not loud */
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2, #f1f3f6));
  /* soft accent rule (not full-saturation) */
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, var(--rule));
  border-radius: 8px 8px 0 0;
}
/* the title inside the band: kill any inline margin the old markup carried so the
   band hugs it. Applies to whatever heading/label element leads the row. */
.sec-head > :first-child { margin: 0; }

/* IN-CARD (full-bleed) mode for the shared Files panel (.attachment-panel, used on
   vendors/projects/clients/payments/episode/show). Same idea as channel.css's
   .ch-card bleed, but the panel padding is 1rem/1.25rem and its radius is 8px. */
.attachment-panel > .sec-head {
  margin: -1rem -1.25rem 1rem;
  /* match the panel's horizontal inset (1.25rem) so the title lines up with the body */
  padding: .5rem 1.25rem;
  border-radius: 8px 8px 0 0;
}

/* IN-CARD (full-bleed) mode for a title-header .dash-card (only fires where .sec-head
   is explicitly added — the stat-tile widgets that use .eyebrow are untouched). The
   .dash-card padding is 1.25rem/1.4rem and its radius is --card-radius. */
.dash-card > .sec-head {
  margin: -1.25rem -1.4rem 1.1rem;
  /* match the card's horizontal inset (1.4rem) so the title lines up with the body */
  padding: .5rem 1.4rem;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

/* ============================================================================
   #10 — Generic conversation side-panel. GLOBAL (here, not channel.css) so it works
   on Ops pages (projects/clients/vendors/mom/tasks) that don't load channel.css, AND on
   the channel.css pages (talent/topics). Mirrors the episode rail (.ep-*) but self-contained.
   Standalone pages wrap the body in .conv-layout (rail becomes sticky ≥1100px). Master-detail
   pages (talent/topics) drop the .conv-rail in as a plain card (no .conv-layout parent).
   ========================================================================== */
.conv-layout { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
@media (min-width: 1100px) {
  .conv-layout:not(.conv-layout--single) { grid-template-columns: minmax(0, 1fr) 360px; }
  .conv-layout:not(.conv-layout--single) .conv-rail { position: sticky; top: 4.25rem; max-height: calc(100vh - 5.25rem); display: flex; flex-direction: column; overflow: hidden; }
  .conv-layout:not(.conv-layout--single) .conv-rail .conv-rail-feed { flex: 1 1 auto; overflow-y: auto; }
}
.conv-main { min-width: 0; }   /* shrink-safe left column (long tables don't blow the grid out) */
.conv-rail { min-width: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; }
.conv-rail .conv-rail-head { padding: .7rem .9rem .55rem; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.conv-rail .conv-rail-head h3 { margin: 0; font-size: .95rem; }
.conv-rail .conv-rail-head .conv-pin { font-size: .68rem; color: var(--ink-faint); }
.conv-rail .conv-rail-feed { padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
.conv-rail .conv-rail-empty { color: var(--ink-faint); font-size: .85rem; margin: 0; }
.conv-rail .conv-rail-composer { padding: .65rem .9rem; border-top: 1px solid var(--rule); background: var(--bg); }
.conv-rail .conv-rail-composer textarea { width: 100%; margin-bottom: .4rem; }
.conv-crow { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.conv-crow select { width: auto; }
.conv-msg { display: flex; gap: .5rem; font-size: .875rem; align-items: flex-start; }
.conv-msg .conv-badge { flex: none; font-size: .72rem; margin-top: .1rem; }
.conv-msg .conv-txt { flex: 1; min-width: 0; }
.conv-msg .conv-body { white-space: pre-wrap; word-break: break-word; }
.conv-msg .conv-sys { color: var(--ink-faint); font-style: italic; }
.conv-msg time { color: var(--ink-faint); }
.conv-msg .conv-del { flex: none; }
/* conversation reactions (entity_comments) */
.conv-react { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.conv-react .conv-rx { font: inherit; font-size: .74rem; line-height: 1; cursor: pointer; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-soft); border-radius: 999px; padding: .12rem .45rem; }
.conv-react .conv-rx.on { background: var(--accent-faint); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.conv-react .conv-rx-add { color: var(--ink-faint); border-style: dashed; opacity: .7; }
.conv-react .conv-rx-add:hover { opacity: 1; }
/* below the 2-col breakpoint the rail is just a normal stacked card */
@media (max-width: 1099px) { .conv-rail { max-height: none; } }