/* admin-tokens.css — admin-specific tokens.
   Foundation tokens (palettes, shadows, typography, spacing, motion, status colors)
   come from @scilence/tokens via the import at the top of this file.
   This file declares ONLY tokens admin owns: --oar-*, --surface-tag-*, --orient-*,
   and admin-overrides (currently none). Pan-app tokens land in scilence FIRST. */

@import url('/scilence/tokens/index.css');

/* Admin overrides — rare; document partnership before adding silent overrides vs scilence. */

/* ===== gh-261 compatibility aliases — light + dark token parity =====
 * Project surface (Venetoclax + others) consumes a small set of semantic
 * tokens that were never minted in scilence:
 *   --s-color-fg-default, --s-color-fg-tertiary, --s-color-surface-default,
 *   --s-color-surface-hover, --s-color-surface-sunken,
 *   --s-color-accent-default, --s-color-accent-muted, --s-color-accent-subtle.
 *
 * Light theme already covers the surface-* and accent-* triplet (declared in
 * scilence/packages/tokens/src/_themes-light.css). Dark theme only overrode
 * --s-color-surface-raised + --s-color-border-default, so the project chrome
 * (sidebar / right rail / left view-switcher) inherited LIGHT cream surfaces
 * in dark mode — a Demo-blocking regression (GH #261, 2026-05-27).
 *
 * Same pattern as the existing --s-color-fg-secondary alias in
 * scilence/packages/tokens/src/_status-colors.css ("compatibility aliases
 * used across shell CSS while we complete cleanup waves"). Promote-to-scilence
 * brief: research/flywheel/handoffs/briefs/scilence-promote-gh261-aliases.md.
 */
:root {
	/* fg-default and fg-tertiary — alias to existing theme-aware fg tokens.
	 * fg-default == fg-primary (high-contrast body text)
	 * fg-tertiary == fg-soft (most-muted of the three fg tiers)
	 * Aliases live at :root so they pick up the active theme via their
	 * referent (which IS theme-overridden in _themes-light.css / -dark.css). */
	--s-color-fg-default: var(--s-color-fg-primary);
	--s-color-fg-tertiary: var(--s-color-fg-soft);
}

[data-theme='dark'] {
	/* Surface tier — match the dark canvas hierarchy (raised already set in
	 * scilence dark theme to oklch(0.20 0 0); fill in the rest with the
	 * same brandscale ladder used by --s-color-bg-* in _themes-dark.css). */
	--s-color-surface-default: var(--s-color-bg-app);     /* canvas — brand-975 */
	--s-color-surface-hover: var(--s-color-hover-bg-strong); /* brand-800 */
	--s-color-surface-sunken: var(--s-brand-975);          /* sunken / inset */
	/* Accent tier — same hue ladder as light, lifted slightly so the focal
	 * accent reads on dark surfaces. Hue 200 matches scilence light theme. */
	--s-color-accent-default: oklch(0.66 0.09 180); /* re-hued to brand 180 + de-jeweled 2026-05-31; final lightness reconciliation at de-fork */
	--s-color-accent-muted: oklch(0.50 0.07 180);
	--s-color-accent-subtle: oklch(0.28 0.04 180);
}

/* ===== Surface-tag + OAR + orient-step (admin shell / roadmap) ===== */
:root {
	/* Shell: `.admin-shell__nav-column` stacks sidebar + Wave F footer (narrow gap; flex handles fill). */
	--admin-shell-nav-footer-stack-gap: var(--s-space-0);
	/* Surface-tag focal colors — roadmap Kanban filter chips echo card oar-tag hues (OKLCH).
	 * `*-color` = background (legacy name; tracked for `--s-` prefix rename in tech-debt).
	 * `*-fg` = foreground text on the matching background. Dark/saturated variant of the same hue
	 *         (lightness 16-18%, chroma 0.04-0.05) — guarantees AAA contrast on the light bg.
	 * Added 2026-05-07 to retire briefing-tab raw oklch() literals (ds_drift HIGH cluster).
	 */
	--surface-tag-design-system-color: oklch(72% 0.1 60);
	--surface-tag-design-system-fg: oklch(16% 0.04 60);
	--surface-tag-operations-color: oklch(72% 0.08 220);
	--surface-tag-operations-fg: oklch(18% 0.05 220);
	--surface-tag-provenance-color: oklch(72% 0.09 58);
	--surface-tag-provenance-fg: oklch(18% 0.05 58);
	--surface-tag-marketing-color: oklch(72% 0.08 180);
	--surface-tag-marketing-fg: oklch(18% 0.05 180);
	--surface-tag-macro-color: oklch(72% 0.08 225);
	--surface-tag-macro-fg: oklch(18% 0.05 225);
	--surface-tag-routing-color: oklch(72% 0.09 62);
	--surface-tag-routing-fg: oklch(18% 0.05 62);
	--surface-tag-shell-color: oklch(72% 0.08 30);
	--surface-tag-shell-fg: oklch(18% 0.05 30);
	--surface-tag-studio-color: oklch(72% 0.08 210);
	--surface-tag-studio-fg: oklch(18% 0.05 210);
	--surface-tag-projects-color: oklch(72% 0.08 235);
	--surface-tag-projects-fg: oklch(18% 0.05 235);
	--surface-tag-fallback-color: oklch(70% 0.05 145);
	--surface-tag-fallback-fg: oklch(18% 0.04 145);
	--surface-tag-event-color: oklch(72% 0.1 300);
	--surface-tag-event-fg: oklch(18% 0.05 300);

	/* OAR briefing drawer lane-state surfaces — paired bg/fg for "eyes" and "decision" states.
	 * Distinct from workstream tag taxonomy: these classify the *lane* a brief sits in
	 * (informational vs needs-eyes vs needs-decision) rather than its workstream bucket.
	 */
	--oar-state-eyes-bg: oklch(96% 0.04 55);
	--oar-state-eyes-fg: oklch(32% 0.09 55);
	--oar-state-decision-bg: oklch(96% 0.04 25);
	--oar-state-decision-fg: oklch(35% 0.1 25);

	/* Web shell prototype chrome — semantic alias over scilence warning slots (same pattern as `.s-tag--warning`). */
	--s-status-prototype-bg: oklch(
		var(--s-status-warning-O) var(--s-status-warning-C) var(--s-status-warning-H) / 0.12
	);
	--s-status-prototype-fg: var(--s-color-status-warning);
	--s-status-prototype-border: oklch(
		var(--s-status-warning-O) var(--s-status-warning-C) var(--s-status-warning-H) / 0.22
	);
	--s-status-prototype-bg-hover: oklch(
		var(--s-status-warning-O) var(--s-status-warning-C) var(--s-status-warning-H) / 0.18
	);

	/* Typography aliases — ds-defensive-fallback-sweep 2026-05-16.
	 * --s-font-family-mono aliases --s-font-mono (the canonical scilence mono font token).
	 * --s-radius-pill aliases --s-radius-round (9999px, maximum-radius pill shape).
	 * Candidates for scilence promotion once admin-tokens.css is de-forked. */
	--s-font-family-mono: var(--s-font-mono);
	--s-radius-pill: var(--s-radius-round);

	/* JS-set layout vars — initial/safe defaults before admin-shell.js measures and overwrites.
	 * Declared here so naked token references in admin-shell.css need no fallback. */
	--admin-shell-drawer-top: 36px;
	--pm-menu-top: 0px;
	--pm-menu-left: 0px;

	/* Adaptive sidebar (Brief 82, 2026-05-14) — sizes for the project-state icon
	 * strip row and the collapse-arrow affordance. Absolute px values so the
	 * tokens resolve at :root cascade time (independent of the JS-driven
	 * --s-font-size-active set by appearance-store). Icon strip ~22px tall
	 * per spec; collapse arrow is a compact ~22px square glyph button. */
	--shell-sidebar-icon-strip-h: 26px;
	--shell-sidebar-collapse-w: 22px;
	/* Project TIMELINE day cards (Brief 102) — widget-card register in project sidebar. */
	--shell-sidebar-card-header-h: 28px;
	--shell-sidebar-card-surface: var(--s-color-bg-panel);

	/* Sidebar column width (visceral 2026-05-15) — single source of truth for
	 * the left nav column. Used by .admin-shell grid-template-columns AND by
	 * .shell-footer__left so the user-footer's right-edge border lines up
	 * exactly with the sidebar's right border. Previously hardcoded 248px in
	 * multiple places; the footer-left was also offset by .shell-footer__inner
	 * horizontal padding, breaking alignment by --s-space-2. */
	--shell-sidebar-w: 248px;

	/* Right-rail widgets (Brief 83, 2026-05-14) — sizes for the v5 right-rail
	 * widget bay. Width is a clamp() of min/default/max so the rail breathes
	 * within 160–220px range; default ~200px (slightly wider than 180px hint
	 * to accommodate the three-button widget header without crowding). Header
	 * row ~28px tall, body padding 10px. Absolute px values for the same
	 * cascade-resolution reason as the sidebar tokens above. */
	--shell-right-rail-w-min: 160px;
	--shell-right-rail-w-max: 220px;
	--shell-right-rail-w: clamp(var(--shell-right-rail-w-min), 14vw, var(--shell-right-rail-w-max));
	--oar-drawer-rail-width-px: 560px;
	--shell-right-rail-drawer-w-max: min(960px, 52vw);
	--shell-right-rail-widget-header-h: 28px;
	--shell-right-rail-widget-body-pad: 10px;

	/* Rail / inspector ribbon widths — single source of truth for the
	 * three spatial constants of the notebook chrome:
	 *   • collapsed: icon-only ribbon (chevron + 2-3 buttons)
	 *   • rail-expanded: navigator/outline at full width
	 *   • inspector-expanded: right-rail/inspector at full width
	 * Previously hardcoded ~48× (46px) / ~10× (244px) / ~7× (340px) across
	 * notebook-shell.css. Used by the admin-shell grid-template-columns
	 * chain at narrow viewports + by inner rail/inspector flex sizing.
	 * Caitlin direct 2026-06-07 (B audit). */
	--shell-rail-collapsed-w: 46px;
	--shell-rail-expanded-w: 244px;
	--shell-inspector-expanded-w: 340px;

	/* SurfaceChrome slot widths (Brief shell-surface-chrome-slot-logic,
	 * 2026-06-09; spec GUIDE_SURFACE_CHROME_CONTRACT v1 §1). Per the
	 * contract: surfaces declare `{ leftRail, rightDrawer }`; the shell
	 * mounts/omits each region. These tokens are the canonical names the
	 * contract uses (`--shell-rail-w`, `--shell-drawer-w`); they alias the
	 * existing rail/inspector constants so the visual rhythm matches every
	 * existing surface (notebook 244/340, library 244/340).
	 *
	 *   --shell-rail-w   → expanded contextual rail width (244px)
	 *   --shell-drawer-w → expanded right-drawer width (340px,
	 *                      reuses the --nb-insp-w / inspector-expanded
	 *                      precedent — the contract explicitly calls this
	 *                      reuse out, §1 table).
	 *
	 * When a surface declares `rightDrawer: null`, the shell sets
	 * `[data-surface-drawer="absent"]` on `.admin-shell`; admin-shell.css
	 * drops the col-3 width entirely (no `--shell-drawer-w` gap). */
	--shell-rail-w: var(--shell-rail-expanded-w);
	--shell-drawer-w: var(--shell-inspector-expanded-w);

	/* Orient-step-chip TBD state — light yellow surface for unresolved orient steps. */
	--orient-step-chip-tbd-bg: oklch(96% 0.05 82);

	/* OAR roadmap — substate/source pills (active state: light bg, dark fg).
	 * ds_drift LOW #1 Phase C — extends surface-tag-* pattern (Lock 4, 2026-05-07 doctrine).
	 */
	--oar-pill-src-brief-bg: oklch(75% 0.06 200);
	--oar-pill-src-brief-fg: oklch(20% 0.05 200);
	--oar-pill-src-batch-bg: oklch(75% 0.06 260);
	--oar-pill-src-batch-fg: oklch(20% 0.05 260);
	--oar-pill-src-handoff-bg: oklch(75% 0.06 320);
	--oar-pill-src-handoff-fg: oklch(20% 0.05 320);
	--oar-pill-src-lineage-bg: oklch(75% 0.06 50);
	--oar-pill-src-lineage-fg: oklch(20% 0.05 50);
	--oar-pill-src-decision-bg: oklch(75% 0.06 0);
	--oar-pill-src-decision-fg: oklch(20% 0.05 0);
	--oar-pill-src-workunit-bg: oklch(75% 0.06 160);
	--oar-pill-src-workunit-fg: oklch(20% 0.05 160);

	/* OAR roadmap — surface tag pills (active state). */
	--oar-pill-tag-shell-bg: oklch(75% 0.06 30);
	--oar-pill-tag-shell-fg: oklch(20% 0.05 30);
	--oar-pill-tag-page-bg: oklch(75% 0.06 220);
	--oar-pill-tag-page-fg: oklch(20% 0.05 220);
	--oar-pill-tag-cap-bg: oklch(75% 0.06 60);
	--oar-pill-tag-cap-fg: oklch(20% 0.05 60);
	--oar-pill-tag-site-bg: oklch(75% 0.06 180);
	--oar-pill-tag-site-fg: oklch(20% 0.05 180);
	--oar-pill-tag-lineage-bg: oklch(75% 0.06 50);
	--oar-pill-tag-lineage-fg: oklch(20% 0.05 50);

	/* OAR roadmap — phase card granularity chips. */
	--oar-phase-brief-bg: oklch(94% 0.04 200);
	--oar-phase-brief-fg: oklch(35% 0.08 200);
	--oar-phase-batch-bg: oklch(94% 0.04 260);
	--oar-phase-batch-fg: oklch(35% 0.08 260);
	--oar-phase-feature-bg: oklch(94% 0.04 50);
	--oar-phase-feature-fg: oklch(40% 0.08 50);
	--oar-phase-commit-bg: oklch(94% 0.04 140);
	--oar-phase-commit-fg: oklch(35% 0.08 140);
	--oar-phase-handoff-bg: oklch(94% 0.04 320);
	--oar-phase-handoff-fg: oklch(38% 0.08 320);
	--oar-phase-synthesized-bg: oklch(94% 0.02 0);
	--oar-phase-synthesized-fg: oklch(45% 0 0);

	/* OAR roadmap — phase card confidence (foreground only). */
	--oar-conf-on-track-fg: oklch(50% 0.10 140);
	--oar-conf-at-risk-fg: oklch(55% 0.12 60);
	--oar-conf-blocked-fg: oklch(50% 0.15 30);

	/* OAR roadmap — Kanban substate row chips (bridged via `--substate-color` in JS). */
	--oar-substate-active-fg: oklch(70% 0.10 140);
	--oar-substate-iterating-fg: oklch(72% 0.10 80);
	--oar-substate-locked-fg: oklch(60% 0.05 240);
	--oar-substate-queued-fg: oklch(70% 0.05 220);
	--oar-substate-blocked-fg: oklch(60% 0.10 30);
	--oar-substate-awaiting-fg: oklch(72% 0.08 60);
	--oar-substate-needs-fix-fg: oklch(65% 0.12 30);

	/* OAR roadmap — Kanban column header accents (bridged via `--col-accent` in JS). */
	--oar-column-parking-lot-accent: oklch(70% 0.04 280);
	--oar-column-inbox-accent: oklch(72% 0.06 50);
	--oar-column-design-accent: oklch(70% 0.10 140);
	--oar-column-build-accent: oklch(70% 0.05 220);
	--oar-column-running-accent: oklch(72% 0.12 195);
	--oar-column-test-accent: oklch(72% 0.08 60);
	--substrate-tile-bg: var(--s-color-bg-subtle);
	--substrate-tile-border: var(--s-color-border-subtle);
	--substrate-tile-fg: var(--s-color-fg-primary);
	--substrate-tile-muted: var(--s-color-fg-muted);
	/* Prototype column — distinct hue vs Test/Done; doctrine 2026-05-11 */
	--oar-column-prototype-accent: oklch(68% 0.09 310);
	/* Kanban STASHED chip — scilence status-info (parking / recall cue; same indirection pattern as `--s-status-prototype-*`). */
	--oar-pill-stashed-bg: color-mix(in oklch, var(--s-color-status-info) 14%, var(--s-color-surface-subtle));
	--oar-pill-stashed-fg: var(--s-color-status-info);
	--oar-column-done-accent: oklch(70% 0.05 180);

	/* Roadmap JS-driven theming vars — safe defaults before JS sets brand/accent colours.
	 * --col-accent: per-Kanban-column accent; --substate-color: per-card substate bg.
	 * substrate-*/focal-point-* are pill/chip colour channels injected by roadmap.js. */
	--col-accent: transparent;
	--substate-color: var(--s-color-bg-subtle);
	--substrate-cool-active: var(--s-color-accent-active);
	--substrate-cool-rest: var(--s-color-bg-card);
	--substrate-warm-rest: transparent;
	--focal-point-warm: var(--s-color-border);

	/* Roadmap test-panel layout vars — JS resizes these; safe defaults match original fallbacks. */
	--ts-panel-w: clamp(600px, 70vw, 1100px);
	--ts-left-col-flex: 0 0 45%;
	--ts-iframe-scale: 1;
	--ts-iframe-transform-origin: top left;
	--ts-iframe-wrap-w: auto;
	--ts-iframe-wrap-h: auto;
	--ts-iframe-wrap-flex: 0 1 auto;
	--ts-iframe-w: auto;
	--ts-iframe-h: auto;
	--ts-iframe-max-w: none;
	--ts-iframe-flex: 1 1 auto;

	/* OAR briefing focus ring — accessible focus outline color, theme-aware (dark variant below).
	 * Resolves the briefing tab pre-2B a11y foundation (commit a2279cb9 / c933d6c6 2026-05-07).
	 */
	--oar-briefing-focus-ring: oklch(58% 0.14 230);

	/* OAR keys-help backdrop scrim — semi-transparent overlay behind the help dialog.
	 * Cool dark hue (260) at 45% alpha; matches the calm-UI scrim convention.
	 */
	--oar-keys-help-backdrop-scrim: oklch(0.15 0.02 260 / 0.45);

	/* Browser component (Brief 85, 2026-05-14) — view-switcher substrate.
	 * Header strip composes existing atoms (search, pill-filter, view-mode-toggle).
	 * Body is a virtualized scroll container with marker rail. Tokens here are
	 * the few admin-shell-level values; rest are component-local in browser.css. */
	--browser-header-h: 44px;
	--browser-marker-rail-w: 12px;
	--browser-pill-bg: oklch(72% 0.13 230);
	--browser-pill-fg: oklch(99% 0 0);
	--browser-marker-hit: oklch(70% 0.16 50);
	--browser-marker-selected: oklch(64% 0.16 220);
	--browser-marker-both: oklch(60% 0.2 290);
	--browser-marker-viewport: oklch(82% 0.05 230 / 0.4);
	--browser-lasso-bg: oklch(70% 0.16 220 / 0.12);
	--browser-lasso-border: oklch(60% 0.18 220);

	/* Local search highlight (Brief guide-shell-v5-local-search-highlight,
	 * 2026-05-15). Teal left-border accent + soft mint fill on matched
	 * sidebar timeline rows, scrollbar tick marks at match positions, and
	 * a small green dot badge on view-switcher icons whose surface contains
	 * matches. Tokens are theme-aware via the dark override below. */
	--local-search-match-fg: var(--s-color-accent-default);
	--local-search-match-border: var(--s-color-accent-default);
	--local-search-match-bg: oklch(95% 0.04 175 / 0.7);
	--local-search-match-current-bg: oklch(92% 0.06 175 / 0.85);
	--local-search-marker-color: var(--s-color-accent-default);
	--local-search-marker-current-color: oklch(55% 0.18 175);
	--local-search-badge-color: oklch(64% 0.16 145);
	--local-search-marker-rail-w: 8px;

	/* Calibration-wizard tier badges — admin-namespaced, per ds-audit-patches V10
	 * (no oklch() literals in interactive primitives). 5 tier hues:
	 *   enterprise=280 (purple), pro=200 (teal), modest=150 (green),
	 *   modest-degraded=60 (amber), web-frontier-only=30 (orange).
	 * Lifted from guide/shell/css/calibration-wizard.css 2026-06-07 to unblock
	 * future tier-chip Chip primitive migration. */
	--calibration-tier-enterprise-bg: oklch(0.92 0.06 280);
	--calibration-tier-enterprise-fg: oklch(0.35 0.15 280);
	--calibration-tier-pro-bg: oklch(0.92 0.06 200);
	--calibration-tier-pro-fg: oklch(0.35 0.15 200);
	--calibration-tier-modest-bg: oklch(0.93 0.05 150);
	--calibration-tier-modest-fg: oklch(0.38 0.14 150);
	--calibration-tier-modest-degraded-bg: oklch(0.93 0.05 60);
	--calibration-tier-modest-degraded-fg: oklch(0.42 0.12 60);
	--calibration-tier-web-frontier-only-bg: oklch(0.93 0.04 30);
	--calibration-tier-web-frontier-only-fg: oklch(0.40 0.12 30);
}

/* Dark-theme overrides for tokens that need theme-specific values.
 * First entry 2026-05-07 — focus ring needs higher lightness on dark surfaces.
 * If this section grows, consider a dedicated tokens-dark.css partial.
 */
[data-theme="dark"] {
	--oar-briefing-focus-ring: oklch(78% 0.12 230);
	/* Search highlights need stronger contrast on dark surfaces. */
	--local-search-match-bg: oklch(35% 0.08 175 / 0.45);
	--local-search-match-current-bg: oklch(45% 0.10 175 / 0.6);
	--local-search-marker-color: oklch(78% 0.13 175);
	--local-search-marker-current-color: oklch(85% 0.16 175);
	--local-search-badge-color: oklch(72% 0.16 145);

	/* Calibration tier badges — dark-theme overrides. NOTE: original CSS
	 * had no dark-mode rule for modest-degraded (rendered light-mode values
	 * on dark surfaces); extrapolated from the other 4 dark variants
	 * (same L=0.28/0.82 + C=0.06/0.10 ramp on hue 60). */
	--calibration-tier-enterprise-bg: oklch(0.28 0.07 280);
	--calibration-tier-enterprise-fg: oklch(0.82 0.12 280);
	--calibration-tier-pro-bg: oklch(0.28 0.07 200);
	--calibration-tier-pro-fg: oklch(0.82 0.12 200);
	--calibration-tier-modest-bg: oklch(0.28 0.06 150);
	--calibration-tier-modest-fg: oklch(0.82 0.10 150);
	--calibration-tier-modest-degraded-bg: oklch(0.28 0.06 60);
	--calibration-tier-modest-degraded-fg: oklch(0.82 0.10 60);
	--calibration-tier-web-frontier-only-bg: oklch(0.28 0.05 30);
	--calibration-tier-web-frontier-only-fg: oklch(0.82 0.10 30);
}

/* ===== Tier-A doctrine primitives (queues / briefing surfaces) — utility classes ===== */
/* `--s-tier-a-*` token vars live in scilence; admin owns chip/badge selectors only. */

.s-tier-a-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-space-hair);
	padding: var(--s-space-hair) var(--s-space-1);
	border-radius: var(--s-radius-1);
	font-size: var(--s-font-size-0);
	font-weight: var(--s-font-weight-semibold);
	background: rgba(184, 116, 26, 0.12);
	color: var(--s-color-status-warning);
	border: 1px solid rgba(184, 116, 26, 0.35);
}

.s-tier-a-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 var(--s-space-hair);
	border-radius: var(--s-radius-1);
	font-size: var(--s-font-size-0);
	font-weight: var(--s-font-weight-bold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--s-color-status-warning);
	color: var(--s-color-on-warning);
}

/* Kanban Done column — retired prototype distinguisher (doctrine 2026-05-11; reuses tier-A chip) */
.oar-phasecard--has-retired-chip {
	position: relative;
}

.oar-phasecard-retired-chip {
	position: absolute;
	right: var(--s-space-hair);
	bottom: var(--s-space-hair);
	max-width: min(100%, 14rem);
	z-index: 1;
}

.oar-phasecard-retired-popover {
	position: absolute;
	right: var(--s-space-hair);
	bottom: calc(100% + var(--s-space-hair));
	max-width: min(100vw - var(--s-space-2), 18rem);
	max-height: 12rem;
	overflow: auto;
	padding: var(--s-space-1);
	border-radius: var(--s-radius-1);
	font-size: var(--s-font-size-0);
	font-weight: var(--s-font-weight-regular);
	background: var(--s-color-bg-app);
	color: var(--s-color-fg-primary);
	border: 1px solid var(--s-color-border-subtle);
	box-shadow: var(--s-shadow-md);
	z-index: 2;
	white-space: pre-wrap;
}

/* Kanban — STASHED chip (local stash recall; dev data via GET /api/stashes) */
.oar-phasecard-stashed-chip {
	display: inline-flex;
	align-items: center;
	padding: var(--s-space-hair) var(--s-space-1);
	border-radius: var(--s-radius-1);
	font-size: var(--s-font-size-0);
	font-weight: var(--s-font-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--oar-pill-stashed-bg);
	color: var(--oar-pill-stashed-fg);
	border: 1px solid color-mix(in oklch, var(--oar-pill-stashed-fg) 22%, transparent);
	position: relative;
	cursor: default;
	max-width: 9rem;
}

.oar-phasecard-head .oar-phasecard-stashed-chip {
	flex-shrink: 0;
}

.oar-phasecard-stashed-popover {
	position: absolute;
	left: 0;
	top: calc(100% + var(--s-space-hair));
	min-width: min(100vw - var(--s-space-3), 18rem);
	max-width: min(100vw - var(--s-space-3), 22rem);
	max-height: 14rem;
	overflow: auto;
	padding: var(--s-space-1);
	border-radius: var(--s-radius-1);
	font-size: var(--s-font-size-0);
	font-weight: var(--s-font-weight-regular);
	text-transform: none;
	letter-spacing: normal;
	background: var(--s-color-bg-app);
	color: var(--s-color-fg-primary);
	border: 1px solid var(--s-color-border-subtle);
	box-shadow: var(--s-shadow-md);
	z-index: 6;
	white-space: pre-wrap;
	text-align: left;
}

/* ===== Shell reset + base typography hooks ===== */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--s-font-sans);
	background: var(--s-color-bg-app);
	color: var(--s-color-fg-primary);
	font-size: var(--s-font-size-active);
	line-height: var(--s-font-line-height-normal);
}

/* ── Utility primitives ───────────────────────────────────────────────────
 * Lightweight pan-app utility classes. Apply directly without authoring
 * surface-specific CSS that re-derives the same rule. */

/* .s-section-label — mono uppercase muted label.
 * Replaces ~5 surface-specific reimplementations (sg-lib-sidebar-title,
 * sg-lib-section-title, sg-pipe-section-label, sg-ep-heading,
 * pw-settings-section__title, pw-info-module__section-title,
 * ph-list__head-cell, pane-head titles in cas.css). Drift on letter-spacing
 * (0.05em vs 0.08em) and color-vs-opacity-muted normalized to the more
 * common pattern. Migrations are incremental — consumers swap when touched.
 * Source: 2026-06-07 componentization audit. */
.s-section-label {
	font-family: var(--s-font-mono);
	font-size: var(--s-font-size-condensed);
	font-weight: var(--s-font-weight-regular);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--s-color-fg-muted);
}

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