/* ===========================================================================
   WorkHive shared component CSS  (STREAMLINE S11)
   ---------------------------------------------------------------------------
   The KPI-summary primitives (.simple-card grid + .sc-* parts), the "what to
   do next" .action-card, and the "Show details" .details-toggle were copy-
   pasted VERBATIM into ~15 dashboard pages' inline <style>. Extracted here so
   they can't drift and the duplication leaves the clone-debt count.

   Load order contract: each page links this in <head> BEFORE its own inline
   <style>, so a page may still OVERRIDE any rule locally (e.g. analytics'
   translucent .simple-card background, ai-quality / plant-connections'
   var(--surface) theming — those pages keep their inline rule and are NOT
   converted). Precached in sw.js SHELL_FILES (cache-first) so it survives
   offline alongside the page shell.

   The card MARKUP + its data-rag-tile markers stay STATIC in each page
   (validate_rag_flywheel_locks.py / survey_ia_redundancy.py read them from the
   static file) — only the CSS moved here. Paired with the S10 shared
   wireDetailToggle() behavior in utils.js.
   =========================================================================== */

@import url("tokens.css");  /* STREAMLINE E4: the single brand-palette source — must precede all rules. */

/* ── Design tokens (STREAMLINE E4) ───────────────────────────────────────────
   The canonical brand PALETTE (--wh-orange / -blue / -navy / -steel / -cloud …)
   now lives in tokens.css — the SINGLE source of truth, @imported above so it
   loads with components.css. The `-rgb` triplets (for rgba() alpha), spacing,
   radius and type stay here. Pages reference var(--wh-*) instead of raw hex;
   validate_design_tokens.py L1 gates tokens.css, L2 bans the #e8920a drift hex,
   L3 ratchets raw brand hex on the glass down. */
:root {
  /* The platform vocabulary (colour, spacing, radius, type, elevation, z) now lives in
     tokens.css — @imported above — so the ~21 pages that link tokens.css WITHOUT
     components.css can see it too. Do not re-declare it here: a second declaration is a
     second source of truth and defeats one-place editing. (2026-07-15) */

}

/* KPI summary cards — the 3-tile "operational heartbeat" header grid */
/* Arc W · W2: section-separator margin → --wh-space-6 (24px) so the gap BETWEEN sections is ~1.5×
   the within-card padding (Gestalt grouping; was 14px ≈ card padding = no breathing-room signal). */
.simple-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-bottom:var(--wh-space-6); }
/* Arc L · L1 CLS: reserve the settled card height (measured h0 122px placeholder → h1 153px
   when sc-sub fills to 2–3 lines) so the async value-fill doesn't grow the card and push the
   whole command-center stack down. min-height = a floor, so shorter cards just pad to uniform. */
/* Arc W · W1: lift the KPI card off the page with the navy ladder (was background:var(--wh-navy)
   == page bg → coplanar). The soft shadow comes from the global elevation rule below. */
.simple-card { background:var(--wh-elev-1); border:1px solid rgba(255,255,255,0.07); border-radius:var(--wh-radius); padding:14px 16px; min-height:154px; }
.simple-card .sc-label { font-size:0.65rem; font-weight:700; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.06em; }
/* THE canonical KPI number. Two tiers only, and this is the standard one:
     .sc-hero            -> 1.5rem  (every KPI tile on every page)
     .simple-card.hero   -> clamp(2rem,5.5vw,2.4rem) (the ONE key metric, Von Restorff)
   tabular-nums lives HERE, not per page, so digits sit on a fixed pitch platform-wide:
   columns of KPIs line up and a refreshing value cannot jitter its own tile. Any page
   re-declaring .sc-hero locally SHADOWS this and silently opts out of both. (C4, 2026-07-15) */
.simple-card .sc-hero  { font-size:1.5rem; font-weight:800; line-height:1.15; margin:4px 0 2px; color:var(--wh-cloud); font-variant-numeric:tabular-nums; }
.simple-card .sc-sub   { font-size:0.7rem; color:rgba(255,255,255,0.55); line-height:1.4; }
.simple-card .sc-tag   { display:inline-block; font-size:0.58rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; padding:0.18rem 0.5rem; border-radius:999px; margin-top:7px; }
/* sc-tag text colors LIGHTENED for WCAG 2.2 AA 4.5:1 at the 0.58rem badge size (FB2
   browser-CI persona walk caught these failing live over the 0.16-tinted bg on the
   #1F2E45 card: red 3.95 + grey 4.16 FAIL, amber 4.93 borderline). Measured ratios
   over the effective tinted bg now: green 6.9 · amber 6.2 · red 5.8 · grey 7.7 — hues kept. */
.simple-card.tag-green .sc-tag { background:rgba(74,222,128,0.16);  color:#86efac; }
.simple-card.tag-amber .sc-tag { background:rgba(var(--wh-orange-rgb),0.16);  color:var(--wh-orange-light); }
.simple-card.tag-red   .sc-tag { background:rgba(248,113,113,0.16); color:#fca5a5; }
.simple-card.tag-grey  .sc-tag { background:rgba(255,255,255,0.06); color:#cbd5e1; }

/* "What to do next" recommendation card */
.action-card { background:rgba(var(--wh-blue-rgb),0.06); border:1px solid rgba(var(--wh-blue-rgb),0.25); border-radius:var(--wh-radius); padding:14px 16px; margin-bottom:var(--wh-space-6); }
.action-card .ac-label { font-size:0.65rem; font-weight:800; color:var(--wh-blue); text-transform:uppercase; letter-spacing:0.07em; }
/* Arc L · L1 CLS: reserve ~3 lines for the async recommendation (measured 1-line placeholder
   20px → up to 79px when the real "what to do next" text fills) so it doesn't grow + shift. */
.action-card .ac-text { font-size:0.82rem; line-height:1.5; margin-top:6px; color:rgba(255,255,255,0.85); min-height:60px; }
/* Arc P · Wave 1 (P3 "one obvious primary action"): the "What to do next" block ends in ONE
   primary CTA button that DOES the recommended action, not just prose. Shared so every dashboard's
   next-action block renders the same primary control (FUSION 3a). Orange = the page's single primary
   accent inside the blue advisory card. Renderers set label+href and un-hide it per-branch. */
.action-card .ac-cta { display:inline-flex; align-items:center; gap:6px; margin-top:12px; min-height:44px; padding:0.6rem 1.15rem; background:var(--wh-orange); color:var(--wh-navy); font-family:inherit; font-size:0.8rem; font-weight:800; border:none; border-radius:var(--wh-radius-sm); cursor:pointer; text-decoration:none; transition:background 0.2s, transform 0.1s; }
.action-card .ac-cta:hover { background:var(--wh-orange-dark); }
.action-card .ac-cta:active { transform:scale(0.98); }
.action-card .ac-cta[hidden], .action-card .ac-cta.hidden { display:none; }

/* Arc P · Wave 1 (P2 progressive disclosure / FUSION 2 list-discipline): heavy SECONDARY sections
   (long feeds, benchmarks, action logs, big lists) collapse into <details class="wh-disclose"> so the
   default view stays glance-first (verdict + vital-20% + one action). Reused across dashboards. */
.wh-disclose { margin-bottom:var(--wh-space-6); border:1px solid rgba(255,255,255,0.08); border-radius:var(--wh-radius); background:rgba(255,255,255,0.02); overflow:hidden; }
.wh-disclose > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; min-height:44px; box-sizing:border-box; font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.72); }
.wh-disclose > summary::-webkit-details-marker { display:none; }
.wh-disclose > summary::after { content:'\25B8'; font-size:0.7rem; opacity:0.6; transition:transform 0.2s; flex-shrink:0; }
.wh-disclose[open] > summary::after { transform:rotate(90deg); }
.wh-disclose > summary:hover { color:#F4F6FA; }
.wh-disclose > summary .wh-disclose-title { display:flex; align-items:center; gap:8px; min-width:0; }
.wh-disclose .wh-disclose-body { padding:0 16px 16px; }
@media (prefers-reduced-motion: reduce) { .wh-disclose > summary::after { transition:none; } }

/* "Show details" explainer toggle button (behavior = utils.js wireDetailToggle, S10) */
.details-toggle { display:inline-flex; align-items:center; gap:6px; background:transparent; border:1px solid rgba(255,255,255,0.07); color:rgba(255,255,255,0.6); padding:8px 14px; border-radius:8px; font-family:inherit; font-size:0.7rem; font-weight:600; cursor:pointer; min-height:44px; margin-bottom:var(--wh-space-6); }
.details-toggle:hover { color:#F4F6FA; border-color:rgba(255,255,255,0.18); }

/* ── List loading skeleton + inline error/retry (STREAMLINE E2 — consistent states) ──
   Renderers live in utils.js (whListSkeleton / whListError). A dynamic list shows a
   shimmer skeleton while fetching and an inline error+retry on failure, never a blank
   panel (the P14 IDB-blank class). Reduced-motion users get a static block. */
.wh-skeleton { display:flex; flex-direction:column; gap:8px; padding:4px 0; }
.wh-skeleton-row { height:44px; border-radius:10px; background:linear-gradient(100deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 70%); background-size:200% 100%; animation:wh-shimmer 1.3s ease-in-out infinite; }
@keyframes wh-shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@media (prefers-reduced-motion: reduce) { .wh-skeleton-row { animation:none; } }
.wh-list-error { text-align:center; padding:1.4rem 1rem; font-size:0.82rem; color:rgba(255,255,255,0.72); line-height:1.5; }
.wh-list-error .wh-list-error-icon { font-size:1.4rem; }
.wh-list-error button { margin-top:0.6rem; min-height:44px; padding:0 16px; border-radius:8px; border:1px solid rgba(255,255,255,0.18); background:transparent; color:#F4F6FA; font-family:inherit; font-size:0.78rem; font-weight:600; cursor:pointer; }
.wh-list-error button:hover { border-color:rgba(255,255,255,0.32); }
/* D1 U2 (Arc D): shared reports-tab bar — tabs ship inline min-height:34px; an
   a11y floor must override it to the platform's 44px gloved-field tap target.
   !important is justified for an accessibility minimum (overrides inline). */
/* covers the sibling shared tab bars — wh-reports-tabs / wh-growth-tabs /
   wh-conn-tabs (and any future *-tabs) — whose tab span/link ship inline 34–36px */
[class*="-tabs"] [role="tab"], [class*="-tabs"] a { min-height:44px !important; box-sizing:border-box; display:inline-flex; align-items:center; }
/* Arc U U5 (Arc D tap-target drift, 2026-07-01): .btn-primary is the platform's PRIMARY
   action button and is defined per-page inline; several pages (marketplace, marketplace-seller)
   ship it without a height, so it renders ~36-40px at 390px. A primary CTA is never
   intentionally sub-44 → floor it globally. !important overrides the later page <style>
   (same reasoning as the tab bar above); box-sizing guards the global border-box model. */
.btn-primary { min-height:44px !important; box-sizing:border-box; }

/* ════════════════════════════════════════════════════════════════════════════
   Arc W · W1 — GLOBAL ELEVATION + CONTROL-STATE CRAFT (lifts every linking page)
   The platform read flat/coplanar (R1: depth_floor=789, 0 box-shadow across 800+
   card-like els). These rules give card/panel/overlay roles a soft float and add
   the missing :active / :focus-visible state craft (M/S lens was 0+0).

   Cascade contract (same as the file header): components.css loads BEFORE each
   page's inline <style>, and these are LOW specificity (one class/attr), so any
   page that already styles its own box-shadow / :active WINS — we only lift the
   currently-flat surfaces, never override intentional styling. box-shadow +
   outline + transform are layout-neutral → zero CLS, no tap-target/anim cost.
   ════════════════════════════════════════════════════════════════════════════ */

/* D lens — give cards/panels/tiles/widgets a soft elevation (matches the Arc W probe's
   card roles so the measured depth_floor falls as these gain a shadow). */
.simple-card, .action-card, .card, [class*="-card"], .panel, [class*="-panel"],
.tile, [class*="-tile"], .widget, [class*="-widget"], .wh-card {
  box-shadow: var(--wh-shadow-1);
}
/* Overlays / modals / sheets float highest. */
.modal, .modal-content, .modal-overlay, .sheet-overlay, [role="dialog"] {
  box-shadow: var(--wh-shadow-3);
}

/* H lens (Arc W · W3) — ONE hero metric per dashboard. Add `hero` to the SINGLE most important
   KPI tile in a `.simple-row`; only its number grows (~2.2–2.4rem) so the eye lands on ONE thing,
   not six tiles shouting equally (the focal-hierarchy anti-pattern). Specificity 0,2,1 beats a
   page's `.sc-hero` (0,1,0) so it wins even when components.css loads first. Grows the number only
   (fits the 154px .simple-card min-height reserve) → no CLS. */
.simple-card.hero .sc-hero { font-size: clamp(2rem, 5.5vw, 2.4rem); line-height: 1.1; }

/* M/S lens — touch press-feedback (gloved field workers, mobile-maestro rule #5) on every
   interactive role. transform is layout-neutral; more-specific page rules (.btn-primary:active)
   override this baseline. */
button:active, .btn:active, a.btn:active, [role="button"]:active, .details-toggle:active {
  transform: scale(0.98);
}
/* M/S lens — visible keyboard/switch focus ring (WCAG 2.2 SC 2.4.13). Brand orange reads on the
   navy theme (designer rule: never white outlines). Restores a focus ring on pages that zeroed
   outline, but ONLY for keyboard focus (:focus-visible) so mouse/touch users see no ring. */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
.details-toggle:focus-visible {
  outline: 2px solid var(--wh-orange);
  outline-offset: 2px;
}

/* FC2 (FULLSTACK_COMPONENT_LIBRARY §2.2): count-chip summary — PROMOTED 2026-07-17 from
   page-local twins (agentic-rag-observability.html:74, ai-quality.html). Pages' local rules
   keep working (same shape); this is the ONE canonical source new pages use. */
.sum-card { background: var(--wh-navy); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--wh-radius, 12px); padding: 14px; text-align: center; }
.sum-card .sn { font-size: 1.6rem; font-weight: 800; display: block; line-height: 1; color: var(--wh-orange); font-variant-numeric: tabular-nums; }
.sum-card .sl { font-size: 0.58rem; font-weight: 600; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

/* FC4 (FULLSTACK_COMPONENT_LIBRARY, Ian 2026-07-17: "bless .card + promote"): the DASHBOARD-PANEL
   container — the second sanctioned container dialect beside the .simple-card family (FC1).
   Boundaries: KPI/count tiles = .simple-card/.sum-card; report/panel sections = .card.
   Pages' local .card rules (loaded after this link) intentionally override while their values
   converge; this canonical is the single reference + the floor for new pages. */
.card { background: var(--wh-navy); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--wh-radius, 12px); padding: 16px; margin-bottom: 16px; }
