/* ============================================================================
   ZYQUAL SUPER ADMIN SUITE — IMPLEMENTATION STYLESHEET
   v1 · 12 August 2026 · handoff copy

   WHAT THIS IS
   The prototypes in this bundle are inline-styled Design Components (the
   prototype runtime paints from the first streamed character, so styles live on
   the elements). This file is the SAME visual system expressed as reusable
   classes, so the production build has one stylesheet to implement against
   instead of scraping inline styles out of 24 HTML files.

   Every value here is transcribed from a prototype or from the token sheets —
   nothing is re-invented. Where a value came from a specific component, the
   source is named in a comment.

   HOW TO USE
   1. Link the design-system token sheets FIRST (they define --zq-*):
        tokens/colors.css, typography.css, spacing.css, effects.css, fonts.css
      or, in production, ZyqualWeb/Content/css/zyqual-design-system.css.
   2. Link assets/zq-dark.css      (the ONLY definition of dark values).
   3. Link assets/zq-suite-tokens.css (the --zqk-* colour contract).
   4. Link this file last.
   Classes are prefixed .zq- (suite) and .zc- (ZyCalendar families) so they
   cannot collide with the legacy .mid-* / bootstrap layers.

   ORDER OF SECTIONS
   0  Local fallbacks           7  Chips, badges, pills
   1  Base + reset              8  Tables
   2  Type scale                9  Panels, drawers, modals
   3  Layout shell             10  Wizard / stepper
   4  Nebula chrome            11  Timeline / audit
   5  Cards + KPI tiles        12  Fields (+ voice affordance)
   6  Buttons                  13  Event families / status language
                               14  Motion, print, responsive, a11y
   ========================================================================= */


/* ── 0 · LOCAL FALLBACKS ─────────────────────────────────────────────────────
   Only used if the DS token sheets are missing. Real builds get these from
   zyqual-design-system.css; duplicated here so this file renders standalone.

   NOTE THE :where() — it is load-bearing. This sheet is linked AFTER
   zq-dark.css, so a plain :root block (specificity 0,1,0) would beat
   [data-theme="dark"] (also 0,1,0) on source order and kill dark mode.
   :where(:root) has ZERO specificity, so any real token declaration — light or
   dark, from any sheet, in any order — wins over these fallbacks. Do not
   "tidy" it back to :root. */
:where(:root) {
  --zq-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --zq-primary: #4a148c;
  --zq-primary-light: #7b1fa2;
  --zq-primary-soft: #efe9f6;
  --zq-secondary: #1B5062;
  --zq-teal: #1B5062;
  --zq-accent: #ffeb3b;
  --zq-coral: #f44236;

  --zq-text: #2e2e2e;
  --zq-text-secondary: #6b7280;
  --zq-text-muted: #6b7280;
  --zq-bg: #f8fafc;
  --zq-bg-soft: #f1f5f9;
  --zq-card-bg: #ffffff;
  --zq-card-border: rgba(0, 0, 0, 0.06);
  --zq-border-soft: #e5e7eb;
  --zq-surface-2: #f8fafc;

  --zq-success: #4caf50;  --zq-success-light: #e8f5e9;
  --zq-warning: #ff9800;  --zq-warning-light: #fff3e0;
  --zq-danger:  #f44336;  --zq-danger-light:  #ffebee;
  --zq-info:    #2196f3;  --zq-info-light:    #e3f2fd;

  --zq-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --zq-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --zq-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --zq-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --zq-shadow-xl: 0 16px 30px rgba(0, 0, 0, 0.14);

  --zq-radius-sm: 6px;  --zq-radius-md: 10px;  --zq-radius-lg: 14px;
  --zq-radius-xl: 20px; --zq-radius-pill: 50px;

  --zq-space-xs: 4px; --zq-space-sm: 8px; --zq-space-md: 16px;
  --zq-space-lg: 24px; --zq-space-xl: 32px; --zq-space-2xl: 48px;

  --zq-transition-fast: 0.15s ease;
  --zq-transition-normal: 0.25s ease;
  --zq-transition-slow: 0.4s ease;

  /* Suite layout constants — measured from the prototypes */
  --zq-shell-max: 1240px;        /* TopBar + most page shells */
  --zq-content-max: 1200px;      /* Command Centre content */
  --zq-doc-max: 1180px;          /* UI Lock / doc-style pages */
  --zq-nav-w: 212px;             /* ZyMail left nav */
  --zq-panel-w: 420px;           /* side panel / action drawer */
  --zq-gutter: 22px;             /* page gutter (20–24 range, 22 is standard) */
  --zq-gap: 12px;                /* default grid gap (10–14 range) */

  /* Nebula chrome.
     IMPORTANT: a relative url() inside a custom property resolves against the
     stylesheet that CONSUMES the var (this file), not the one that declares it
     — so overriding --zq-nebula-img from a page gives you a path relative to
     THIS file's folder, not the page's. The consuming page must therefore set
     the image itself:

       .zq-topbar, .zq-hero {
         background-image:
           linear-gradient(180deg, rgba(10,8,22,0.28), rgba(10,8,22,0.46)),
           url('/uploads/Gemini_Generated_Image_eeyaydeeyaydeeya.png');
       }

     or declare --zq-nebula-img with a root-relative or absolute URL. The
     fallback below is the brand gradient, so missing imagery degrades to
     Zyqual purple chrome rather than a flat grey bar. */
  --zq-nebula-img: linear-gradient(120deg, #4a148c 0%, #6a1b9a 55%, #1B5062 100%);
  --zq-nebula-overlay: linear-gradient(180deg, rgba(10, 8, 22, 0.28), rgba(10, 8, 22, 0.46));
  --zq-glass-bg: rgba(255, 255, 255, 0.15);
  --zq-glass-border: rgba(255, 255, 255, 0.28);
}


/* ── 1 · BASE + RESET ────────────────────────────────────────────────────── */
.zq-root {
  margin: 0;
  background: var(--zq-bg);
  color: var(--zq-text);
  font-family: var(--zq-font-family);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
.zq-root *, .zq-root *::before, .zq-root *::after { box-sizing: border-box; }

/* Links: defined for both themes so user-added links never render browser-blue */
.zq-root a { color: var(--zq-primary); text-decoration: none; }
.zq-root a:hover { color: var(--zq-primary-light); text-decoration: underline; }
[data-theme="dark"] .zq-root a { color: var(--zq-primary); }
[data-theme="dark"] .zq-root a:hover { color: var(--zq-primary-light); }

/* Material Icons ligature font — the ONLY icon system (no emoji, no ad-hoc SVG) */
.zq-root .material-icons { font-size: 18px; line-height: 1; vertical-align: middle; user-select: none; }
.zq-ico-sm { font-size: 15px !important; }
.zq-ico-md { font-size: 18px !important; }
.zq-ico-lg { font-size: 22px !important; }

/* Focus ring — one ring everywhere, 3px purple wash at 12% */
.zq-root :focus-visible {
  outline: 2px solid var(--zq-primary);
  outline-offset: 2px;
}
.zq-focus-ring { box-shadow: 0 0 0 3px rgba(74, 20, 140, 0.12); }

.zq-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ── 2 · TYPE SCALE ──────────────────────────────────────────────────────────
   Inter 400–800. The suite uses a compact px scale; half-steps are real and
   intentional (they appear in the prototypes). No size outside this list. */
.zq-t-10   { font-size: 10px; }
.zq-t-10-5 { font-size: 10.5px; }
.zq-t-11   { font-size: 11px; }
.zq-t-11-5 { font-size: 11.5px; }
.zq-t-12   { font-size: 12px; }
.zq-t-12-5 { font-size: 12.5px; }
.zq-t-13   { font-size: 13px; }
.zq-t-13-5 { font-size: 13.5px; }
.zq-t-14   { font-size: 14px; }
.zq-t-15   { font-size: 15px; }
.zq-t-17   { font-size: 17px; }
.zq-t-21   { font-size: 21px; }
.zq-t-24   { font-size: 24px; }
.zq-t-30   { font-size: 30px; }
.zq-t-32   { font-size: 32px; }   /* KPI value */

.zq-w-400 { font-weight: 400; } .zq-w-500 { font-weight: 500; }
.zq-w-600 { font-weight: 600; } .zq-w-700 { font-weight: 700; }
.zq-w-800 { font-weight: 800; }

/* Overline: section labels above content. 10–11px, 600–700, uppercase. */
.zq-overline {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--zq-text-secondary); margin: 0 0 10px;
}
.zq-overline-sm { font-size: 10px; letter-spacing: 0.06em; }

/* Big numbers: 700–800 with slight negative tracking, tabular figures */
.zq-figure {
  font-size: 32px; font-weight: 700; line-height: 1;
  letter-spacing: -0.4px; font-variant-numeric: tabular-nums;
}
.zq-h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; margin: 0; }
.zq-h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; margin: 0; }
.zq-h3 { font-size: 13.5px; font-weight: 800; margin: 0; }
.zq-body { font-size: 12.5px; line-height: 1.65; color: var(--zq-text-secondary); }
.zq-muted { color: var(--zq-text-secondary); }
.zq-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }


/* ── 3 · LAYOUT SHELL ───────────────────────────────────────────────────────
   Three shells cover every surface:
     .zq-page      single column, centred (Command Centre, Licensing, School…)
     .zq-app       left nav + main (ZyMail suite)
     .zq-split     main + fixed side panel (ZyCalendar, Delivery drawer)      */
.zq-page {
  max-width: var(--zq-content-max);
  margin: 0 auto;
  padding: var(--zq-gutter) var(--zq-gutter) 64px;
  display: flex; flex-direction: column; gap: var(--zq-gutter);
}
.zq-page--wide { max-width: var(--zq-shell-max); }
.zq-page--doc  { max-width: var(--zq-doc-max); }

.zq-app { display: grid; grid-template-columns: var(--zq-nav-w) 1fr; align-items: start; }
.zq-app > main { min-width: 0; padding: 18px var(--zq-gutter) 64px; }

.zq-split { display: grid; grid-template-columns: 1fr var(--zq-panel-w); gap: 14px; align-items: start; }

.zq-band { display: flex; flex-direction: column; gap: 10px; }
.zq-row  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zq-row--tight { gap: 8px; }
.zq-spacer { flex: 1; }

/* Auto-fit grids — the widths ARE the layout rule, keep them */
.zq-grid            { display: grid; gap: var(--zq-gap); }
.zq-grid--kpi       { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.zq-grid--action    { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
.zq-grid--card      { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.zq-grid--wide-card { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.zq-grid--2         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zq-grid--editor    { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }

/* Left nav (ZyMail suite) — 212px, sticky, 10-item list */
.zq-nav {
  position: sticky; top: 56px; align-self: start;
  width: var(--zq-nav-w); padding: 14px 12px;
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--zq-border-soft);
  min-height: calc(100vh - 56px);
  background: var(--zq-card-bg);
}
.zq-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--zq-text);
  text-decoration: none; transition: background var(--zq-transition-fast);
}
.zq-nav-item:hover { background: var(--zq-primary-soft); text-decoration: none; }
.zq-nav-item[aria-current="page"], .zq-nav-item.is-active {
  background: var(--zq-primary-soft); color: var(--zq-primary);
}
.zq-nav-item .material-icons { font-size: 17px; color: var(--zq-text-secondary); }
.zq-nav-item[aria-current="page"] .material-icons { color: var(--zq-primary); }
.zq-nav-group { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zq-text-secondary); padding: 12px 11px 5px; }


/* ── 4 · NEBULA CHROME ──────────────────────────────────────────────────────
   Transcribed from TopBar.dc.html. Present on EVERY surface.
   Image + overlay are not decoration: the overlay is what keeps white text at
   contrast over an arbitrary star field. Do not remove or lighten it. */
.zq-topbar {
  position: sticky; top: 0; z-index: 90;
  background-image: var(--zq-nebula-overlay), var(--zq-nebula-img);
  background-size: cover; background-position: center;
  padding: 9px 22px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.zq-topbar-inner {
  max-width: var(--zq-shell-max); margin: 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
/* Brand lockup: white disc + 30px logo + product / sub-label */
.zq-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.zq-brand-disc {
  width: 36px; height: 36px; border-radius: 50%; background: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.zq-brand-disc img { height: 30px; border-radius: 50%; }
.zq-brand-text { line-height: 1.15; }
.zq-brand-product { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
.zq-brand-sub {
  font-size: 10px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.78);
}
/* Glass control (⌘K, dark toggle, hero pills) */
.zq-glass {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--zq-radius-pill);
  border: 1px solid var(--zq-glass-border);
  background: var(--zq-glass-bg);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; cursor: pointer;
  font: 600 11.5px/1 var(--zq-font-family);
}
.zq-glass:hover { background: rgba(255, 255, 255, 0.24); }
.zq-glass--circle { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%; }
/* Offline pill — amber, role="status" */
.zq-offline-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--zq-radius-pill);
  background: rgba(255, 152, 0, 0.18); border: 1px solid rgba(255, 183, 77, 0.55);
  font-size: 11.5px; font-weight: 700; color: #ffe0b2;
}
.zq-offline-pill .material-icons { font-size: 15px; color: #ffcc80; }

/* Avatar + ProfileMenu (ProfileMenu.dc.html) */
.zq-avatar {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--zq-teal); color: #fff; font: 700 13px/1 var(--zq-font-family);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 12px rgba(103, 232, 249, 0.25);
}
.zq-avatar--brain { background: #0d6b3d; }
.zq-menu {
  position: fixed; width: 236px; z-index: 9500;
  background: var(--zq-card-bg); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24);
  padding: 6px; overflow: hidden;
  animation: zqMenuIn 0.14s ease;
}
@keyframes zqMenuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.zq-menu-id { padding: 10px 12px 8px; border-bottom: 1px solid var(--zq-border-soft); }
.zq-menu-id b { display: block; font-size: 13px; font-weight: 700; }
.zq-menu-id span { font-size: 11px; color: var(--zq-text-secondary); }
.zq-menu-label { padding: 9px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zq-text-secondary); }
.zq-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 12px; border: none; border-radius: 8px; background: transparent;
  font: 600 12.5px/1.3 var(--zq-font-family); color: var(--zq-text);
  text-align: left; cursor: pointer; text-decoration: none;
}
.zq-menu-item:hover { background: var(--zq-primary-soft); text-decoration: none; }
.zq-menu-item.is-current { background: #f4f0f8; }
.zq-menu-item--danger { color: #c62828; }

/* Hero (nebula + purple/teal tint). ZyMail uses the tinted variant. */
.zq-hero {
  position: relative; overflow: hidden;
  border-radius: var(--zq-radius-lg);
  padding: 22px var(--zq-gutter);
  background-image: var(--zq-nebula-overlay), var(--zq-nebula-img);
  background-size: cover; background-position: center 30%;
  color: #fff;
}
.zq-hero--tint {
  background-image:
    linear-gradient(120deg, rgba(74, 20, 140, 0.5), rgba(106, 27, 154, 0.32) 55%, rgba(27, 80, 98, 0.46)),
    var(--zq-nebula-img);
}
.zq-hero-glass {
  background: rgba(9, 8, 20, 0.42);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: var(--zq-radius-lg); padding: 14px 18px;
}
/* Prototype strip (dark glass, above the hero on demo surfaces) */
.zq-protobar {
  background: rgba(8, 15, 11, 0.94); padding: 8px 20px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px; color: rgba(255, 255, 255, 0.82);
}


/* ── 5 · CARDS + KPI TILES ─────────────────────────────────────────────────
   Card: white, 10px, 1px hairline, shadow-sm, hover lift -2px.             */
.zq-card {
  background: var(--zq-card-bg);
  border: 1px solid var(--zq-card-border);
  border-radius: var(--zq-radius-md);
  box-shadow: var(--zq-shadow-sm);
  padding: 14px 16px;
}
.zq-card--flat { box-shadow: none; }
.zq-card--pad-sm { padding: 12px 15px; }
.zq-card--pad-lg { padding: 18px 20px; }
.zq-card--dialog { border-radius: var(--zq-radius-lg); }
.zq-card--hover { transition: transform var(--zq-transition-fast), box-shadow var(--zq-transition-fast); }
.zq-card--hover:hover { transform: translateY(-2px); box-shadow: var(--zq-shadow-md); }

/* Accent stripes — 4px left rule states a card's tone; 3px top bar is KPI */
.zq-card--accent      { border-left: 4px solid var(--zq-primary); }
.zq-card--accent-ok   { border-left: 4px solid var(--zq-success); }
.zq-card--accent-warn { border-left: 4px solid var(--zq-warning); }
.zq-card--accent-bad  { border-left: 4px solid var(--zq-danger); }
.zq-card--accent-info { border-left: 4px solid var(--zq-info); }

.zq-card-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--zq-border-soft);
}
.zq-card-title { font-size: 13.5px; font-weight: 800; }
.zq-card-note  { font-size: 11.5px; color: var(--zq-text-secondary); }

/* KPI tile — transcribed from KpiTile.dc.html */
.zq-kpi {
  display: block; height: 100%;
  background: var(--zq-card-bg);
  border: 1px solid var(--zq-card-border);
  border-left: 4px solid var(--zq-teal);
  border-radius: var(--zq-radius-md);
  padding: 13px 15px;
  box-shadow: var(--zq-shadow-sm);
  color: var(--zq-text); text-decoration: none;
  transition: transform var(--zq-transition-fast), box-shadow var(--zq-transition-fast);
}
.zq-kpi:hover { transform: translateY(-2px); box-shadow: var(--zq-shadow-md); text-decoration: none; }
.zq-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; min-height: 16px; }
.zq-kpi-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--zq-text-muted);
}
.zq-kpi-value { font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.zq-kpi-sub { font-size: 11px; color: var(--zq-text-muted); margin-top: 6px; line-height: 1.4; }
/* accents — the nine-colour dashboard palette */
.zq-kpi--purple { border-left-color: #4a148c; } .zq-kpi--purple .zq-kpi-value { color: #4a148c; }
.zq-kpi--teal   { border-left-color: #1B5062; } .zq-kpi--teal   .zq-kpi-value { color: #1B5062; }
.zq-kpi--green  { border-left-color: #4caf50; } .zq-kpi--green  .zq-kpi-value { color: #4caf50; }
.zq-kpi--orange { border-left-color: #ff9800; } .zq-kpi--orange .zq-kpi-value { color: #ff9800; }
.zq-kpi--red    { border-left-color: #f44336; } .zq-kpi--red    .zq-kpi-value { color: #f44336; }
.zq-kpi--blue   { border-left-color: #2196f3; } .zq-kpi--blue   .zq-kpi-value { color: #2196f3; }
.zq-kpi--indigo { border-left-color: #3f51b5; } .zq-kpi--indigo .zq-kpi-value { color: #3f51b5; }
.zq-kpi--cyan   { border-left-color: #00bcd4; } .zq-kpi--cyan   .zq-kpi-value { color: #00bcd4; }
.zq-kpi--pink   { border-left-color: #e91e63; } .zq-kpi--pink   .zq-kpi-value { color: #e91e63; }
.zq-kpi--neutral .zq-kpi-value { color: var(--zq-text); }
/* KPI states — loading / stale / failed / zero. A tile must never look loaded
   when its source is unknown: shimmer, then stale badge, then explicit retry. */
.zq-skel {
  height: 32px; width: 64%; border-radius: var(--zq-radius-sm);
  background: linear-gradient(90deg, #ececf2 25%, #f6f6fa 50%, #ececf2 75%);
  background-size: 720px 100%;
  animation: zqShim 1.3s infinite linear;
}
@keyframes zqShim { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } }
[data-theme="dark"] .zq-skel { background: linear-gradient(90deg, #1c1f2a 25%, #262a38 50%, #1c1f2a 75%); }
.zq-kpi-stale {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--zq-radius-pill);
  color: #ef6c00; background: #fff3e0;
}
.zq-kpi-trend { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--zq-radius-pill); flex-shrink: 0; }
.zq-kpi-trend--up   { color: #4caf50; background: #e8f5e9; }
.zq-kpi-trend--down { color: #f44336; background: #ffebee; }
.zq-kpi-failed { display: flex; align-items: center; gap: 6px; color: var(--zq-danger); font-size: 12.5px; font-weight: 600; margin-bottom: 9px; }

/* Attention banner — "Needs attention now" */
.zq-attention {
  background: var(--zq-card-bg); border: 1px solid var(--zq-card-border);
  border-left: 4px solid var(--zq-danger); border-radius: var(--zq-radius-md);
  box-shadow: var(--zq-shadow-sm); padding: 14px 16px;
}
.zq-attention-row {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--zq-border-soft);
}
.zq-attention-row:last-child { border-bottom: none; }

/* Empty state */
.zq-empty {
  text-align: center; padding: 34px 20px; color: var(--zq-text-secondary);
  border: 1px dashed var(--zq-border-soft); border-radius: var(--zq-radius-md);
}
.zq-empty .material-icons { font-size: 30px; color: var(--zq-text-muted); }
.zq-empty-title { font-size: 13.5px; font-weight: 700; color: var(--zq-text); margin: 8px 0 4px; }


/* ── 6 · BUTTONS ────────────────────────────────────────────────────────────
   Five variants. Hover lifts 1px and gains a small shadow. */
.zq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid transparent;
  font: 600 12.5px/1 var(--zq-font-family); cursor: pointer;
  transition: transform var(--zq-transition-fast), box-shadow var(--zq-transition-fast), background var(--zq-transition-fast);
  text-decoration: none;
}
.zq-btn:hover { transform: translateY(-1px); box-shadow: var(--zq-shadow-sm); text-decoration: none; }
.zq-btn:active { transform: none; }
.zq-btn[disabled], .zq-btn.is-disabled {
  opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;
}
.zq-btn--primary   { background: var(--zq-primary); color: #fff; }
.zq-btn--primary:hover { background: var(--zq-primary-light); color: #fff; }
.zq-btn--secondary { background: var(--zq-teal); color: #fff; }
.zq-btn--outline   { background: transparent; border-color: var(--zq-primary); color: var(--zq-primary); }
.zq-btn--outline:hover { background: var(--zq-primary-soft); }
.zq-btn--ghost     { background: transparent; color: var(--zq-primary); }
.zq-btn--ghost:hover { background: var(--zq-primary-soft); }
.zq-btn--accent    { background: var(--zq-accent); color: #2e2e2e; }   /* yellow, invite/CTA */
.zq-btn--danger    { background: var(--zq-danger); color: #fff; }
.zq-btn--quiet {
  background: var(--zq-card-bg); border-color: var(--zq-border-soft); color: var(--zq-primary);
  padding: 5px 11px; border-radius: 7px; font-size: 12px;
}
.zq-btn--sm { padding: 5px 11px; font-size: 11.5px; border-radius: 7px; }
.zq-btn--lg { padding: 11px 18px; font-size: 13.5px; }
.zq-btn--block { width: 100%; }

/* Icon buttons are circles: yellow (accent), glass (on nebula), primary, soft */
.zq-iconbtn {
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--zq-transition-fast), box-shadow var(--zq-transition-fast);
}
.zq-iconbtn:hover { transform: translateY(-1px); box-shadow: var(--zq-shadow-sm); }
.zq-iconbtn--yellow  { background: var(--zq-accent); color: #2e2e2e; }
.zq-iconbtn--primary { background: var(--zq-primary); color: #fff; }
.zq-iconbtn--soft    { background: var(--zq-primary-soft); color: var(--zq-primary); }
.zq-iconbtn--glass {
  background: var(--zq-glass-bg); border: 1px solid var(--zq-glass-border); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* ZyAi action — the official mark IS the button. Never a sparkle icon. */
.zq-zyai {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: var(--zq-radius-pill);
  border: 1px solid rgba(74, 20, 140, 0.28);
  background: linear-gradient(90deg, rgba(74, 20, 140, 0.06), rgba(27, 80, 98, 0.06));
  font: 700 12px/1 var(--zq-font-family); color: var(--zq-primary); cursor: pointer;
}
.zq-zyai img { height: 17px; width: auto; display: block; }
.zq-zyai[disabled], .zq-zyai.is-locked { opacity: 0.6; cursor: not-allowed; }
.zq-zyai-chip {   /* entitlement chip beside a gated ZyAi action */
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--zq-radius-pill);
  background: #f1f5f9; color: #475569;
}

/* View switcher / tabs — segmented pill row */
.zq-switch {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--zq-bg-soft); border: 1px solid var(--zq-border-soft);
  border-radius: var(--zq-radius-pill);
}
.zq-switch button {
  border: none; background: transparent; cursor: pointer;
  padding: 6px 14px; border-radius: var(--zq-radius-pill);
  font: 700 11.5px/1 var(--zq-font-family); color: var(--zq-text-secondary);
}
.zq-switch button[aria-selected="true"], .zq-switch button.is-active {
  background: var(--zq-card-bg); color: var(--zq-primary); box-shadow: var(--zq-shadow-xs);
}
.zq-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--zq-border-soft); overflow-x: auto; }
.zq-tab {
  border: none; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 10px 13px; font: 700 12px/1 var(--zq-font-family); color: var(--zq-text-secondary);
  border-bottom: 2px solid transparent;
}
.zq-tab[aria-selected="true"] { color: var(--zq-primary); border-bottom-color: var(--zq-primary); }


/* ── 7 · CHIPS, BADGES, PILLS ───────────────────────────────────────────────
   RULE: status chips are LITERAL bg/fg pairs and are identical in both themes.
   A light tint with a deep foreground reads correctly on a dark card; do not
   invert, do not re-tint, do not swap to a token that flips. */
.zq-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; padding: 4px 12px;
  border-radius: var(--zq-radius-pill); white-space: nowrap;
}
.zq-chip--lg { font-size: 11px; padding: 5px 13px; }
.zq-chip .material-icons { font-size: 12px; }

.zq-chip--done    { background: #e8f5e9; color: #1b5e20; }
.zq-chip--overdue { background: #ffebee; color: #b71c1c; }
.zq-chip--pending { background: #fff3e0; color: #9c5700; }
.zq-chip--info    { background: #e3f2fd; color: #0d47a1; }
.zq-chip--neutral { background: #f1f5f9; color: #475569; }
.zq-chip--escal   { background: #fce4ec; color: #ad1457; }

/* Outline chip (filters, criteria, merge tokens) */
.zq-chip--outline {
  background: var(--zq-card-bg); border: 1px solid var(--zq-border-soft);
  color: var(--zq-text); font-weight: 600;
}
.zq-chip--outline.is-on { border-color: var(--zq-primary); background: var(--zq-primary-soft); color: var(--zq-primary); }
.zq-chip--token { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; }

/* Reflection progress descriptors — deliberately NEUTRAL.
   Seven descriptors share one colour pair; never band/grade colours. */
.zq-descriptor {
  font-size: 11px; font-weight: 700; padding: 5px 12px;
  border-radius: var(--zq-radius-pill);
  background: #f1f5f9; color: #475569; border: 1px solid transparent; cursor: pointer;
}
.zq-descriptor.is-selected { background: #334155; color: #ffffff; }

/* Source / evidence chips. Dark theme gets BRIGHT variants (--zqk-src-*). */
.zq-src { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--zq-radius-pill); background: var(--zq-bg-soft); color: var(--zq-primary); }
[data-theme="dark"] .zq-src { color: var(--zqk-src-purple, #cfa8ff); background: rgba(255, 255, 255, 0.06); }

/* Small-print governance note under a figure or panel row */
.zq-note {
  font-size: 11px; line-height: 1.55; color: var(--zq-text-secondary);
  display: flex; gap: 6px; align-items: flex-start;
}
.zq-note .material-icons { font-size: 14px; flex-shrink: 0; transform: translateY(1px); }


/* ── 8 · TABLES ─────────────────────────────────────────────────────────────
   Uppercase header, hairline rows, faint purple row wash on hover. */
.zq-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.zq-table thead th {
  text-align: left; padding: 9px 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--zq-text-secondary); background: var(--zq-bg);
  border-bottom: 1px solid var(--zq-border-soft); white-space: nowrap;
}
.zq-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--zq-border-soft); vertical-align: middle; }
.zq-table tbody tr:hover { background: rgba(74, 20, 140, 0.02); }
.zq-table tbody tr[role="button"] { cursor: pointer; }
.zq-table tbody tr.is-selected { background: var(--zq-primary-soft); }
.zq-table--in-card { margin: 0 -16px -14px; width: calc(100% + 32px); }
.zq-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Definition-style row list (used by UI Lock, spec pages) */
.zq-defrow {
  display: grid; grid-template-columns: 240px 1fr; gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--zq-border-soft);
  align-items: baseline; font-size: 12.5px;
}
.zq-defrow:last-child { border-bottom: none; }


/* ── 9 · PANELS, DRAWERS, MODALS ───────────────────────────────────────────── */
.zq-panel {
  position: sticky; top: 62px;
  width: var(--zq-panel-w); max-height: calc(100vh - 80px); overflow-y: auto;
  background: var(--zq-card-bg); border: 1px solid var(--zq-card-border);
  border-radius: var(--zq-radius-md); box-shadow: var(--zq-shadow-md);
}
.zq-panel-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--zq-card-bg); padding: 14px 16px;
  border-bottom: 1px solid var(--zq-border-soft);
  display: flex; align-items: flex-start; gap: 10px; justify-content: space-between;
}
.zq-panel-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.zq-panel-row { display: grid; grid-template-columns: 118px 1fr; gap: 10px; font-size: 12px; align-items: baseline; }
.zq-panel-row dt { color: var(--zq-text-secondary); font-weight: 600; }
.zq-panel-row dd { margin: 0; }

/* Right-side action drawer (Command Centre "Needs you", Delivery record) */
.zq-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9400;
  width: var(--zq-panel-w); max-width: 92vw;
  background: var(--zq-bg); border-left: 1px solid var(--zq-border-soft);
  box-shadow: -12px 0 34px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
  animation: zqDrawerIn var(--zq-transition-normal);
}
@keyframes zqDrawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.zq-scrim { position: fixed; inset: 0; z-index: 9300; background: rgba(15, 16, 22, 0.42); }

.zq-modal {
  position: fixed; z-index: 9600; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, 94vw); max-height: 88vh; overflow-y: auto;
  background: var(--zq-card-bg); border-radius: var(--zq-radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); padding: 20px 22px;
}
.zq-modal-title { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
.zq-modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
/* Guarded destructive action: recorded reason + type-to-confirm */
.zq-modal--guard { border-top: 4px solid var(--zq-danger); }
.zq-guard-confirm { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.14em; text-transform: uppercase; }

/* Toast — pill, bottom centre, role="status" */
.zq-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 9000;
  background: #2e2e2e; color: #fff; border-radius: var(--zq-radius-pill);
  padding: 10px 20px; font-size: 12.5px; font-weight: 600;
  box-shadow: var(--zq-shadow-lg);
}

/* ⌘K command palette */
.zq-palette {
  position: fixed; z-index: 9700; top: 12vh; left: 50%; transform: translateX(-50%);
  width: min(620px, 94vw);
  background: var(--zq-card-bg); border-radius: var(--zq-radius-lg);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34); overflow: hidden;
}
.zq-palette input {
  width: 100%; border: none; outline: none; padding: 16px 18px;
  font: 500 15px/1 var(--zq-font-family); color: var(--zq-text); background: transparent;
  border-bottom: 1px solid var(--zq-border-soft);
}
.zq-palette-list { max-height: 46vh; overflow-y: auto; padding: 6px; }
.zq-palette-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: none; border-radius: 8px; background: transparent;
  font: 600 13px/1.3 var(--zq-font-family); color: var(--zq-text); cursor: pointer; text-align: left;
}
.zq-palette-item.is-active, .zq-palette-item:hover { background: var(--zq-primary-soft); }


/* ── 10 · WIZARD / STEPPER ─────────────────────────────────────────────────
   Composers (ZyMail 4- and 7-step, scheduling wizard, reflection 7-step). */
.zq-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zq-step {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--zq-radius-pill);
  background: var(--zq-bg-soft); color: var(--zq-text-secondary);
  font-size: 11.5px; font-weight: 700; border: 1px solid transparent;
}
.zq-step.is-current { background: var(--zq-primary); color: #fff; }
.zq-step.is-done { background: #e8f5e9; color: #1b5e20; }
.zq-step-n {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.08); font-size: 10px; font-weight: 800;
}
.zq-step.is-current .zq-step-n { background: rgba(255, 255, 255, 0.24); }
.zq-progress { height: 6px; border-radius: var(--zq-radius-pill); background: var(--zq-bg-soft); overflow: hidden; }
.zq-progress > span { display: block; height: 100%; background: var(--zq-primary); border-radius: inherit; }
.zq-wizard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--zq-border-soft);
}


/* ── 11 · TIMELINE / AUDIT ─────────────────────────────────────────────────
   AuditTrail: who / what / when / basis. Append-only; never editable in UI. */
.zq-timeline { display: flex; flex-direction: column; }
.zq-tl-item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 10px 0; }
.zq-tl-rail { position: relative; }
.zq-tl-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--zq-primary);
  margin: 4px auto 0; box-shadow: 0 0 0 3px var(--zq-primary-soft);
}
.zq-tl-rail::after {
  content: ""; position: absolute; left: 50%; top: 18px; bottom: -10px;
  width: 1px; background: var(--zq-border-soft); transform: translateX(-0.5px);
}
.zq-tl-item:last-child .zq-tl-rail::after { display: none; }
.zq-tl-when { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--zq-text-secondary); }
.zq-tl-what { font-size: 12.5px; font-weight: 600; }
.zq-tl-basis { font-size: 11px; color: var(--zq-text-secondary); }
.zq-tl-dot--ok { background: var(--zq-success); box-shadow: 0 0 0 3px #e8f5e9; }
.zq-tl-dot--bad { background: var(--zq-danger); box-shadow: 0 0 0 3px #ffebee; }
.zq-tl-dot--refused { background: #ad1457; box-shadow: 0 0 0 3px #fce4ec; }


/* ── 12 · FIELDS (+ VOICE AFFORDANCE) ──────────────────────────────────────
   Every typed field carries a visible microphone (assets/zq-voice.js) and
   reserves 32px of right padding for it. Textareas grow to fit content and
   never fight a manual drag-resize. */
.zq-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--zq-text); margin-bottom: 5px; }
.zq-hint  { font-size: 11px; color: var(--zq-text-secondary); margin-top: 5px; }
.zq-field, .zq-input, .zq-select, .zq-textarea {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--zq-border-soft); background: var(--zq-card-bg);
  font: 400 14px/1.5 var(--zq-font-family); color: var(--zq-text);
  transition: border-color var(--zq-transition-fast), box-shadow var(--zq-transition-fast);
}
.zq-field:focus, .zq-input:focus, .zq-select:focus, .zq-textarea:focus {
  outline: none; border-color: var(--zq-primary); box-shadow: 0 0 0 3px rgba(74, 20, 140, 0.12);
}
.zq-field[disabled], .zq-input[disabled] { background: var(--zq-bg); cursor: not-allowed; }
.zq-field.is-invalid, .zq-input.is-invalid { border-color: var(--zq-danger); }
.zq-error { font-size: 11px; font-weight: 600; color: var(--zq-danger); margin-top: 5px; }
.zq-textarea { min-height: 84px; resize: vertical; overflow: hidden; }  /* auto-grow: JS sets height */

.zq-field-wrap { position: relative; }
.zq-field-wrap .zq-input, .zq-field-wrap .zq-textarea { padding-right: 32px; }
.zq-mic {
  position: absolute; right: 6px; top: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: transparent; color: var(--zq-text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.zq-mic .material-icons { font-size: 16px; }
.zq-mic:hover { background: var(--zq-primary-soft); color: var(--zq-primary); }
.zq-mic.is-listening { color: var(--zq-danger); animation: zqPulse 1.1s infinite ease-in-out; }
[data-theme="dark"] .zq-mic { color: #cfa8ff; }
@keyframes zqPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Combobox (SearchSelect.dc.html) */
.zq-combo { position: relative; width: 100%; }
.zq-combo-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 9px 12px; border-radius: 8px; border: 1px solid var(--zq-border-soft);
  background: var(--zq-card-bg); color: var(--zq-text);
  font: 400 14px/1.4 var(--zq-font-family); cursor: pointer; text-align: left;
  transition: border-color var(--zq-transition-fast), box-shadow var(--zq-transition-fast);
}
.zq-combo-trigger[aria-expanded="true"] { border-color: var(--zq-primary); box-shadow: 0 0 0 3px rgba(74, 20, 140, 0.12); }
.zq-combo-trigger .zq-combo-chevron { font-size: 20px; color: var(--zq-text-muted); transition: transform var(--zq-transition-fast); }
.zq-combo-trigger[aria-expanded="true"] .zq-combo-chevron { transform: rotate(180deg); }
.zq-combo-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 220px; z-index: 60;
  background: var(--zq-card-bg); border: 1px solid var(--zq-border-soft);
  border-radius: var(--zq-radius-md); box-shadow: var(--zq-shadow-lg); overflow: hidden;
}
.zq-combo-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--zq-border-soft); }
.zq-combo-search input { border: none; outline: none; flex: 1; min-width: 0; background: transparent; font: 400 14px/1 var(--zq-font-family); color: var(--zq-text); }
.zq-combo-list { max-height: 264px; overflow-y: auto; padding: 4px; }
.zq-combo-group { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--zq-text-muted); }
.zq-combo-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 12px; border: none; border-radius: 8px; background: transparent;
  font: 400 14px/1.35 var(--zq-font-family); color: var(--zq-text); cursor: pointer; text-align: left;
}
.zq-combo-opt:hover { background: var(--zq-primary-soft); }
.zq-combo-opt.is-selected { background: var(--zq-primary-soft); font-weight: 600; }
.zq-combo-empty { padding: 18px 14px; text-align: center; color: var(--zq-text-muted); font-size: 13px; }

/* Toggle / switch */
.zq-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.zq-toggle-track {
  width: 38px; height: 22px; border-radius: var(--zq-radius-pill);
  background: var(--zq-border-soft); position: relative; transition: background var(--zq-transition-fast);
}
.zq-toggle-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: var(--zq-shadow-xs);
  transition: transform var(--zq-transition-fast);
}
.zq-toggle input:checked + .zq-toggle-track { background: var(--zq-primary); }
.zq-toggle input:checked + .zq-toggle-track::after { transform: translateX(16px); }
.zq-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }


/* ── 13 · EVENT FAMILIES / STATUS LANGUAGE ─────────────────────────────────
   Eight ZyCalendar families. Each has colour / soft / deep and is NEVER
   re-hued. Soft backgrounds keep DARK literal text (#2e2e2e) in both themes —
   white-on-pastel is a defect. */
.zc-fam { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--zq-radius-pill); font-size: 10.5px; font-weight: 700; }
.zc-fam-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.zc-fam--obs   { background: #f3e5f5; color: #2e2e2e; } .zc-fam--obs   .zc-fam-dot { background: #7b1fa2; }
.zc-fam--self  { background: #e0f2f1; color: #2e2e2e; } .zc-fam--self  .zc-fam-dot { background: #00897b; }
.zc-fam--form  { background: #e8eaf6; color: #2e2e2e; } .zc-fam--form  .zc-fam-dot { background: #3f51b5; }
.zc-fam--sum   { background: #efe9f6; color: #2e2e2e; } .zc-fam--sum   .zc-fam-dot { background: #4a148c; }
.zc-fam--task  { background: #fff3e0; color: #2e2e2e; } .zc-fam--task  .zc-fam-dot { background: #fb8c00; }
.zc-fam--disp  { background: #fce4ec; color: #2e2e2e; } .zc-fam--disp  .zc-fam-dot { background: #e91e63; }
.zc-fam--supp  { background: #e0f7fa; color: #2e2e2e; } .zc-fam--supp  .zc-fam-dot { background: #00bcd4; }
.zc-fam--refl  { background: #e1f5fe; color: #2e2e2e; } .zc-fam--refl  .zc-fam-dot { background: #0277bd; }

/* Calendar event block (month grid) — 3px left rule in the family colour */
.zc-event {
  display: block; width: 100%; text-align: left;
  padding: 4px 7px; border-radius: var(--zq-radius-sm);
  border-left: 3px solid currentColor;
  font-size: 10.5px; font-weight: 600; line-height: 1.35;
  color: #2e2e2e; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-event--obs { background: #f3e5f5; border-left-color: #7b1fa2; }
.zc-event--self { background: #e0f2f1; border-left-color: #00897b; }
.zc-event--form { background: #e8eaf6; border-left-color: #3f51b5; }
.zc-event--sum { background: #efe9f6; border-left-color: #4a148c; }
.zc-event--task { background: #fff3e0; border-left-color: #fb8c00; }
.zc-event--disp { background: #fce4ec; border-left-color: #e91e63; }
.zc-event--supp { background: #e0f7fa; border-left-color: #00bcd4; }
.zc-event--refl { background: #e1f5fe; border-left-color: #0277bd; }

/* Month grid */
.zc-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--zq-border-soft); border: 1px solid var(--zq-border-soft); border-radius: var(--zq-radius-md); overflow: hidden; }
.zc-dow { background: var(--zq-bg); padding: 7px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zq-text-secondary); text-align: center; }
.zc-day { background: var(--zq-card-bg); min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.zc-day.is-outside { background: var(--zq-bg); }
.zc-day.is-today .zc-daynum { background: var(--zq-primary); color: #fff; }
.zc-daynum { align-self: flex-start; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--zq-radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

/* Conflict tiers: a warning may be overridden with a reason; a hard conflict
   cannot be booked at all. They must never look the same. */
.zc-conflict--warn { background: #fff3e0; color: #9c5700; border: 1px solid #ffcc80; }
.zc-conflict--hard { background: #ffebee; color: #b71c1c; border: 1px solid #ef9a9a; }

/* Visibility level badge (spec §6) */
.zc-visibility { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--zq-radius-pill); background: #f1f5f9; color: #475569; }


/* ── 14 · MOTION, PRINT, RESPONSIVE, A11Y ─────────────────────────────────── */
@keyframes zqFadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.zq-enter { animation: zqFadeInUp var(--zq-transition-normal); }

@media (prefers-reduced-motion: reduce) {
  .zq-root *, .zq-root *::before, .zq-root *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .zq-card--hover:hover, .zq-kpi:hover, .zq-btn:hover { transform: none; }
}

/* Greyscale check — WCAG 1.4.1. If a status is only distinguishable by hue,
   it fails. Toggle this class on <html> to test. */
.zq-greyscale { filter: grayscale(1); }

/* Breakpoints. The suite has three: 900 (nav + two-column collapse),
   640 (Command Centre / hero), 560 (ZyMail KPIs + gutters). */
@media (max-width: 900px) {
  .zq-app { grid-template-columns: 1fr; }
  .zq-nav {
    position: static; width: auto; min-height: 0;
    flex-direction: row; overflow-x: auto; gap: 6px;
    border-right: none; border-bottom: 1px solid var(--zq-border-soft);
  }
  .zq-nav-group { display: none; }
  .zq-split, .zq-grid--editor { grid-template-columns: 1fr; }
  .zq-panel { position: static; width: auto; max-height: none; }
}
@media (max-width: 640px) {
  :root { --zq-gutter: 16px; }
  .zq-hero { padding: 16px; border-radius: var(--zq-radius-md); }
  .zq-topbar { padding: 8px 14px; }
  .zq-brand-product { font-size: 14px; }
  .zq-grid--kpi, .zq-grid--action, .zq-grid--card, .zq-grid--wide-card, .zq-grid--2 { grid-template-columns: 1fr; }
  .zq-drawer { width: 100%; max-width: none; }
  .zq-combo-pop { position: fixed; inset: 0; border-radius: 0; max-height: 100dvh; display: flex; flex-direction: column; }
  .zq-combo-list { flex: 1 1 auto; max-height: none; }
}
@media (max-width: 560px) {
  .zq-kpi-value, .zq-figure { font-size: 26px; }
  .zq-defrow { grid-template-columns: 1fr; gap: 4px; }
}

@media print {
  .zq-topbar, .zq-nav, .zq-protobar, .zq-toast, .zq-palette, .zq-drawer, .zq-scrim, .zq-mic { display: none !important; }
  .zq-root { background: #fff; }
  .zq-card, .zq-kpi { box-shadow: none; break-inside: avoid; }
  .zq-page { max-width: none; padding: 0; }
}


/* ── DARK THEME NOTES ───────────────────────────────────────────────────────
   Dark values live ONLY in assets/zq-dark.css ([data-theme="dark"]). Because
   every rule above resolves colour through --zq-* tokens, the theme flip needs
   no per-component dark rules — with three deliberate exceptions:
     · status chips + family softs stay literal (light tint, deep text);
     · skeleton shimmer gets dark greys (above);
     · the mic glyph brightens to #cfa8ff (above).
   If you find yourself writing a fourth exception, the component is reaching
   past the tokens — fix that instead. */
[data-theme="dark"] .zq-card,
[data-theme="dark"] .zq-kpi,
[data-theme="dark"] .zq-panel,
[data-theme="dark"] .zq-modal,
[data-theme="dark"] .zq-palette,
[data-theme="dark"] .zq-menu { background: var(--zq-card-bg); border-color: var(--zq-card-border); }
[data-theme="dark"] .zq-table thead th { background: var(--zq-bg-soft, #14161f); }
[data-theme="dark"] .zq-table tbody tr:hover { background: rgba(187, 134, 252, 0.06); }
[data-theme="dark"] .zq-switch { background: var(--zq-surface-2); }
[data-theme="dark"] .zq-menu-item.is-current { background: rgba(187, 134, 252, 0.12); }
[data-theme="dark"] .zq-toast { background: #1f2230; }
[data-theme="dark"] .zc-day.is-outside { background: var(--zq-bg-soft, #14161f); }


/* Profile menu — every signed-in marketplace page (owner rule 2026-08-16) */
.zq-profile { position: relative; flex-shrink: 0; }
.zq-profile__btn { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14); padding: 0; cursor: pointer; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.zq-profile__btn:hover, .zq-profile__btn[aria-expanded="true"] { border-color: #fff; background: rgba(255,255,255,.24); }
.zq-profile__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zq-profile__initials { font: 800 12px/1 var(--zq-font-family); color: #fff; letter-spacing: .04em; }
.zq-profile__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--zq-surface, #fff); color: var(--zq-text-primary, #1a1a2e); border: 1px solid var(--zq-border-soft, #e6e2f0); border-radius: 14px; box-shadow: 0 12px 32px rgba(20, 8, 46, .18); padding: 6px; z-index: 60; }
.zq-profile__who { padding: 10px 12px 8px; border-bottom: 1px solid var(--zq-border-soft, #e6e2f0); margin-bottom: 4px; display: grid; gap: 2px; }
.zq-profile__who strong { font-size: 14px; }
.zq-profile__who span { font-size: 11.5px; color: var(--zq-text-secondary, #6b6880); }
.zq-profile__item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: transparent; border-radius: 10px; font: 700 14px/1.2 var(--zq-font-family); color: var(--zq-text-primary, #1a1a2e); text-decoration: none; cursor: pointer; }
.zq-profile__item .zqi { flex-shrink: 0; }
.zq-profile__item:hover { background: var(--zq-primary-soft, #f1ecfb); color: var(--zq-primary, #4a148c); }
/* One colour per destination, from the r4 icon palette. Three-class specificity so these beat
   the glyph-keyed defaults (.zqi:has(> use[href="#tag"]) etc. in zybenefits-r4.css), which
   otherwise painted two different destinations the same purple. */
.zq-profile__menu .zq-profile__item--home .zqi     { color: #7b1fa2; }
.zq-profile__menu .zq-profile__item--wallet .zqi   { color: #00897b; }
.zq-profile__menu .zq-profile__item--deals .zqi    { color: #e91e63; }
.zq-profile__menu .zq-profile__item--orgs .zqi     { color: #3f51b5; }
.zq-profile__menu .zq-profile__item--settings .zqi { color: #fb8c00; }
.zq-profile__menu .zq-profile__item--danger .zqi   { color: #e53935; }
[data-theme="dark"] .zq-profile__menu .zq-profile__item--home .zqi { color: #ce93d8; }
[data-theme="dark"] .zq-profile__menu .zq-profile__item--wallet .zqi { color: #4db6ac; }
[data-theme="dark"] .zq-profile__menu .zq-profile__item--deals .zqi { color: #f06292; }
[data-theme="dark"] .zq-profile__menu .zq-profile__item--orgs .zqi { color: #7986cb; }
[data-theme="dark"] .zq-profile__menu .zq-profile__item--settings .zqi { color: #ffb74d; }
[data-theme="dark"] .zq-profile__menu .zq-profile__item--danger .zqi { color: #ef9a9a; }
.zq-profile__item--danger { color: var(--zq-danger, #f44336); }
.zq-profile__item--danger .zqi { color: var(--zq-danger, #f44336); }
.zq-profile__item--danger:hover { background: var(--zq-danger-light, #ffebee); color: var(--zq-danger, #f44336); }
.zq-profile__who strong { font-size: 14.5px; font-weight: 800; color: var(--zq-text-primary, #1a1a2e); }
[data-theme="dark"] .zq-profile__menu { background: #1c1730; color: #f4f1fb; border-color: #3a3060; }
[data-theme="dark"] .zq-profile__item { color: #f4f1fb; }
[data-theme="dark"] .zq-profile__item:hover { background: #2a2346; color: #fff; }
[data-theme="dark"] .zq-profile__who strong { color: #fff; }
[data-theme="dark"] .zq-profile__who span { color: #c9c2dd; }
[data-theme="dark"] .zq-profile__who { border-color: #3a3060; }