/* ============================================================
   SHARED SURFACE PASS — reaches every tab
   ============================================================
   Loaded LAST, on purpose. styles.css is loaded FIRST, so anything
   written there for a SHARED class name (.card, .modal, .badge) loses
   to styles-editorial.css and styles-refined-dark.css, which both
   re-declare .card at html[data-aesthetic=...] / html[data-theme=...]
   specificity. Rules here are scoped to match or beat them.

   This layer is deliberately ACCENT-NEUTRAL. It supplies geometry,
   rim, shadow and material — never a hue. Each surface keeps its own
   accent (Support's --sup-accent, and whatever later passes assign),
   so "a mix of all of them" survives an app-wide pass instead of
   collapsing into one colour.
   ============================================================ */

/* ── Cards ──────────────────────────────────────────────────
   .card has 168 uses. It gets the REST of the glass pass — rim,
   specular, float — but NOT backdrop-filter. A card sits on a flat
   page ground with nothing passing behind it, so a blur would buy
   nothing and cost a compositing layer 168 times over, which is
   scroll jank on a card-heavy tab like Today.
   ------------------------------------------------------------ */
/* NOTE: deliberately NO `position: relative` here. It would anchor
   nothing — the only pseudo-element is .sh::before and html .card > .sh
   establishes its own containing block — while re-anchoring every
   absolutely-positioned descendant in the app (dropdowns, tooltips,
   popovers) across 168 cards. */
html[data-aesthetic="editorial"] .card,
html[data-theme="dark"] .card {
  box-shadow:
    inset 0 1px 0 var(--glass-spec-x),
    0 1px 2px color-mix(in oklab, var(--glass-shadow-ink, #000) 5%, transparent);
  transition:
    border-color var(--gl-dur, 180ms) ease,
    box-shadow var(--gl-dur, 180ms) ease,
    transform var(--gl-dur, 180ms) ease;
}
/* Lift on hover — the card rises toward the reader rather than just
   changing its border colour. Kept to 1px: this is a dense admin app,
   not a marketing page, and a big lift on a grid of 12 cards reads as
   noise. */
html[data-aesthetic="editorial"] .card:hover,
html[data-theme="dark"] .card:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--glass-spec),
    var(--glass-shadow);
}
/* A card that only holds a table should not lift under the cursor —
   the hover belongs to the rows, not the container. */
html[data-aesthetic="editorial"] .card:has(table):hover,
html[data-theme="dark"] .card:has(table):hover {
  transform: none;
}

/* ── Modals ─────────────────────────────────────────────────
   42 uses, and the strongest app-wide case for real glass after the
   drawer: a modal always has the page sitting live behind it.
   ------------------------------------------------------------ */
html .modal-overlay {
  background: color-mix(in oklab, #000 46%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
}
html .modal {
  background: var(--glass-tint-hi);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-spec);
}
html .modal-head,
html .modal-foot {
  background: transparent;
  border-color: var(--glass-rim);
}

/* ── Drawers ────────────────────────────────────────────────
   The other overlay family — ~30 dialogs in the app render as
   .drawer-overlay + .drawer, not .modal (the Employees "Add team
   member" dialog is one). Same material, same reasoning: the page is
   live behind it. Kept in step with .modal so the two families do not
   drift into two different glasses. */
html .drawer-overlay {
  background: color-mix(in oklab, #000 46%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);
}
html .drawer-overlay > .drawer {
  background: var(--glass-tint-hi);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  border-left: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shadow), inset 1px 0 0 var(--glass-spec-x);
}
html .drawer-overlay > .drawer > .drawer-head,
html .drawer-overlay > .drawer > .drawer-foot {
  border-color: var(--glass-rim);
}
/* The person modal is a deliberate full-screen variant and owns its own
   treatment — left alone so this pass does not quietly restyle it. */

/* ── Section headers ────────────────────────────────────────
   101 uses of <SectionHeader>. One hairline that fades out, echoing
   the stat band's accent rule — it gives every section on every tab
   the same opening gesture. currentColor-free and hue-free: it uses
   the surface's own accent where one is set, and --brand otherwise. */
html .card > .sh {
  position: relative;
}
html .card > .sh::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--surface-accent, var(--brand)) 85%, transparent),
    transparent);
  opacity: 0.75;
  pointer-events: none;
}

/* ── Fallbacks, matching the pass-1 material ────────────────
   Glass with no working backdrop-filter is an unreadable washed-out
   panel, so both branches go OPAQUE rather than translucent. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .modal { background: var(--bg-elev-1); }
  html .modal-overlay { background: rgba(0, 0, 0, 0.65); }
  html .drawer-overlay > .drawer { background: var(--bg-elev-1); }
  html .drawer-overlay { background: rgba(0, 0, 0, 0.6); }
  html .stat-band { background: var(--bg-elev-1); }
}
@media (prefers-reduced-transparency: reduce) {
  html .modal,
  html .modal-overlay,
  html .drawer-overlay,
  html .drawer-overlay > .drawer {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html .stat-band { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-elev-1); }
  html .modal,
  html .drawer-overlay > .drawer { background: var(--bg-elev-1); }
  html .modal-overlay { background: rgba(0, 0, 0, 0.65); }
  html .drawer-overlay { background: rgba(0, 0, 0, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-aesthetic="editorial"] .card,
  html[data-theme="dark"] .card,
  html[data-aesthetic="editorial"] .card:hover,
  html[data-theme="dark"] .card:hover {
    transition: none;
    transform: none;
  }
}


/* ============================================================
   STAT BAND — GetLayers composition "lumora-stats", shared
   ============================================================
   One deeply inset, tonally raised panel floating on the page
   ground: an eyebrow and a short statement in its top-left corner,
   and a row of oversized tabular numerals with small labels beneath
   running across its base.

   INVERTED HIERARCHY is the whole idea: the heading is the SMALLEST
   display element and the data is the biggest. The statement frames;
   the numbers deliver.

   This was built once for Support and is now shared — Support, Today
   and any later KPI surface render into the same band. Building the
   same composition twice is how a design system rots (see .sig-pill,
   which duplicated .badge before being deleted).

   Two cell flavours, ONE type scale:
     .stat-fig  — a plain figure (Support)
     .kpi       — the interactive KPI primitive (Today), which keeps
                  its click target, active outline and .kpi-bar
   Count-up is deliberately NOT adopted from the composition: these
   tabs re-fetch on filter and poll changes, so the figures would
   re-animate constantly.
   ------------------------------------------------------------ */
html .stat-band {
  position: relative;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-rim);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  padding: 22px 26px 24px;
  margin-bottom: 20px;
  overflow: hidden;
}
/* the surface accent touches the band in exactly one place */
html .stat-band::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--surface-accent, var(--brand)) 70%, transparent),
    transparent 62%);
}
/* Specular catch, matching .glass — the band is glass, so it carries the
   same edge as the modals and drawers. z-index 1: under the accent
   hairline at 2, over the content ground. */
html .stat-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
    var(--glass-spec) 0%,
    var(--glass-spec-x) 18%,
    transparent 42%,
    transparent 72%,
    var(--glass-spec-x) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

html .stat-band-eyebrow {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
}
html .stat-band-eyebrow i {
  width: 6px; height: 6px; border-radius: 99px; flex-shrink: 0;
  font-style: normal;
  background: var(--surface-accent, var(--brand));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--surface-accent, var(--brand)) 18%, transparent);
}
/* deliberately smaller than the numerals below it */
html .stat-band-head {
  margin: 9px 0 0;
  max-width: 24ch;
  font-size: 15.5px; font-weight: 500; line-height: 1.4;
  color: var(--text-2);
}
html .stat-band-figs {
  display: grid;
  /* One EVEN row whatever the cell count. auto-fit orphaned a cell onto a
     second row between ~700px and the breakpoint, and lumora-stats calls
     for a level four-up precisely because a tabulated row is what makes
     the figures read as a result rather than as loose callouts. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 18px;
  margin-top: 26px;
}

/* ── the cells ──────────────────────────────────────────────
   Both flavours keep a BOUNDED, POSITIONED box even though the
   card look is gone. That is not decoration:
     · .kpi-bar is position:absolute; bottom:0 and would otherwise
       re-anchor to some distant ancestor
     · ClickableKpi's active state is an outline, which needs a box
       to outline — it is the only affordance showing which category
       is currently open
   ------------------------------------------------------------ */
html .stat-band .stat-fig,
html .stat-band .kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* baseline-align a "28m" string against integers */
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 4px 6px 6px;
  overflow: hidden;            /* keeps .kpi-bar inside the cell */
  box-shadow: none;
}
/* The card flavour draws a 3px accent bar at its top edge. Inside the
   band that is both redundant — the band has its own accent hairline —
   and actively wrong: it puts a heavy coloured rule directly above a
   44px numeral and breaks the figure-over-label pairing. */
html .stat-band .kpi::before { display: none; }

html .stat-band .kpi:hover {
  background: color-mix(in oklab, var(--text) 4%, transparent);
}
/* numeral above label VISUALLY, while the DOM keeps label-then-value —
   which is also the better reading order for a screen reader. */
html .stat-band .kpi-value { order: 1; }
html .stat-band .kpi-head  { order: 2; margin: 9px 0 0; }
html .stat-band .kpi-trend { order: 3; }
html .stat-band .kpi-bar   { order: 4; }

/* ONE type scale across both flavours */
html .stat-band .stat-fig-n,
html .stat-band .kpi-value {
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
html .stat-band .stat-fig-n.is-zero { color: var(--text-3); }
html .stat-band .kpi-value .denom {
  font-size: 15px; font-weight: 300; margin-left: 5px; color: var(--text-3);
}
html .stat-band .stat-fig-l,
html .stat-band .kpi-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-3);
  display: flex; align-items: center; gap: 6px;
}
html .stat-band .stat-fig-l i {
  width: 5px; height: 5px; border-radius: 99px; flex-shrink: 0;
  font-style: normal;
  background: var(--sig, var(--sig-idle));
}
/* the icon competes with a 44px numeral — drop it inside the band */
html .stat-band .kpi-icon { display: none; }
html .stat-band .kpi-trend { margin-top: 7px; font-size: 11px; }

@media (max-width: 880px) {
  html .stat-band { padding: 18px; border-radius: 14px; }
  html .stat-band-figs {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 14px;
  }
  html .stat-band .stat-fig-n,
  html .stat-band .kpi-value { font-size: 34px; }
}

/* ============================================================
   SURFACE ACCENTS — one hue per nav group
   ============================================================
   Myron asked for "a mix of all of them", and the shared layer is
   deliberately accent-NEUTRAL so each surface can carry its own hue.
   Until now only two tabs actually set one, so sixteen of eighteen
   fell back to --brand and the "mix" existed as a mechanism rather
   than as something you could see.

   Grouped by the sidebar's own sections — Activity / Insight /
   Configure — NOT one hue per tab. Eighteen unrelated hues is a
   colour wheel; three related families make the accent mean
   "where am I" instead of just being decoration.

   Signal colours are deliberately NOT used as tab accents. --ok /
   --warn / --err mean STATE in this app, and a tab whose section
   headers are permanently amber would read as a standing warning.
   Hues come from the GetLayers palettes already in use.

   GROUNDS ARE STILL HELD. This sets one custom property. It touches
   no background, no text colour and no layout.
   ------------------------------------------------------------ */

/* ONE accent, and the mechanism kept intact.

   The per-section hues (Activity blue, Insight teal, Configure violet) are
   retired: the InRoots palette has no spare hue to spend on navigation. Ice
   means good and coral means late — both are load-bearing state colours — so
   tangerine is the only free accent, and it is the brand's.

   Every selector from the three-family version survives below, listing all
   twelve tabs explicitly rather than collapsing to a default. That is
   deliberate: restoring per-section hues means re-splitting THIS selector and
   nothing else. It stays a six-line change, not an archaeology exercise.

   What the accent drives is unchanged: one 34x2px fading hairline per section
   header (101 of them) and the card hover border. */
html[data-tab="today"],     html[data-tab="employees"],
html[data-tab="pto"],       html[data-tab="monthly"],
html[data-tab="goals"],     html[data-tab="reports"],
html[data-tab="tasks"],     html[data-tab="captures"],
html[data-tab="oncall"],    html[data-tab="messages"],
html[data-tab="audit"],     html[data-tab="ml"] {
  --surface-accent: var(--brand);
}

/* Configure keeps --brand violet by inheriting the default — the
   settings tabs should feel like the product's own chrome, and
   leaving them unassigned is what keeps three families from
   becoming four. Today and Support set their own inline and are
   untouched here. */

/* ── Make the accent actually visible ───────────────────────
   On its own --surface-accent drives one 34x2px fading hairline per
   section header. Across 101 headers that is real, but it is not
   something you would notice tab to tab. The card hover border is
   an affordance that ALREADY exists and already changes colour — it
   was hardcoded to --brand. Routing it through the accent costs no
   new chrome and makes each surface feel like its own place the
   moment you move the cursor. */
html[data-aesthetic="editorial"] .card:hover,
html[data-theme="dark"] .card:hover {
  border-color: color-mix(in oklab, var(--surface-accent, var(--brand)) 34%, var(--line));
}