/* ============================================================
   SCOPELINE COMPONENTS
   Requires tokens.css. Class prefix-free; semantic names.
   ============================================================ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* The canvas behind view transitions and overscroll is the html background;
   without this it flashes white between pages. It carries the same grain as
   the ambient field: the glow layer is viewport-fixed, so anything painted
   beyond it (overscroll, full-page screenshot tools) shows this canvas -
   grained dark keeps those regions visually continuous. */
html { background: var(--grain) repeat, var(--grain-dark) repeat, var(--bg-base); }

body {
  /* The canvas (html) owns the base color + grain; body stays transparent
     so the fixed ambient glow layer (z -1) shows through. The critical
     inline style still paints body dark for the pre-CSS frame. */
  background: transparent;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient light fields — give the glass something to refract.
   --grain is a tiled feTurbulence noise layer: large soft gradients band
   visibly in 8-bit dark colors, and fine two-sided noise (lighter AND
   darker specks, ~9% peak) dithers the steps away without changing the
   look. Reused by every banding-prone surface (qrows, project hero). */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23d)'/%3E%3C/svg%3E");
}

body::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    var(--grain) repeat,
    var(--grain-dark) repeat,
    radial-gradient(46% 52% at 10% -4% in oklab, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(40% 48% at 92% 8% in oklab, color-mix(in oklab, var(--info) 14%, transparent), transparent 70%),
    radial-gradient(36% 44% at 70% 105% in oklab, color-mix(in oklab, var(--sys-remarcable) 12%, transparent), transparent 70%),
    radial-gradient(30% 40% at 0% 80% in oklab, color-mix(in oklab, var(--sys-sharepoint) 9%, transparent), transparent 70%);
}
:root[data-theme="light"] body::before { opacity: 0.5; }

a { color: inherit; }

.icon { width: 20px; height: 20px; flex: none; display: block; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-3);
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app {
  max-width: 1720px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-8) var(--sp-10);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ---- Top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: var(--sp-5);
  position: relative;
  isolation: isolate;
}

.brand-mark {
  width: 36px;
  height: 36px;
  flex: none;
  filter: drop-shadow(0 0 9px color-mix(in oklab, var(--accent) 38%, transparent));
}

/* Hover halo behind the mark; fades in/out via transition while the breathe
   runs continuously on filter, so leave reverts as smoothly as enter. */
.brand::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 18px;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle in oklab, color-mix(in oklab, var(--accent) 36%, transparent) 0%, color-mix(in oklab, var(--accent) 10%, transparent) 44%, transparent 74%);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
  animation: glow-breathe 4.4s ease-in-out infinite;
}
.brand:hover::before { opacity: 1; transition-duration: 0.45s; }

.brand-word {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-switcher {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-raised);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 1px 0 var(--edge-hl);
}
.project-switcher:hover { border-color: var(--stroke-strong); }
.project-switcher .ps-name { font-weight: 700; font-size: var(--fs-h3); white-space: nowrap; }
.project-switcher .ps-id { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-3); white-space: nowrap; }
.project-switcher .icon { color: var(--text-3); }

.icon-btn {
  width: var(--control-h-lg);
  height: var(--control-h-lg);
  display: grid;
  place-items: center;
  background: var(--bg-raised);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 1px 0 var(--edge-hl);
}
.icon-btn:hover { border-color: var(--stroke-strong); color: var(--text-1); }
.icon-btn.active { border-color: var(--accent); color: var(--accent); }

.avatar {
  width: var(--control-h-lg);
  height: var(--control-h-lg);
  border-radius: var(--r-md);
  background: linear-gradient(135deg in oklab, var(--accent-soft), var(--bg-overlay));
  border: 1px solid var(--stroke);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--text-1);
}

/* ---- Global top nav ---- */
.top-nav {
  display: flex;
  gap: 2px;
  margin-right: auto;
  flex-wrap: wrap;
}
.top-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--fs-body);
  text-decoration: none;
  white-space: nowrap;
}
.top-nav a:hover { background: var(--bg-hover); color: var(--text-1); }
.top-nav a.active { color: var(--accent); background: var(--accent-softer); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--accent) 22%, transparent); }
.top-nav a.soon { color: var(--text-3); }

.phase-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border: 1px solid var(--stroke-strong);
  border-radius: 5px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

/* ---- System identity chips ---- */
.sys-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 var(--sp-3) 0 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke);
  background: var(--bg-overlay);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
a.sys-chip:hover { border-color: var(--stroke-strong); color: var(--text-1); }
.sys-mark {
  width: 21px;
  height: 21px;
  border-radius: 6px;
  display: inline-grid;
  place-items: center;
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: var(--locked);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}
.sys-procore .sys-mark, .sys-mark.sys-procore { background: var(--sys-procore); }
.sys-sharepoint .sys-mark, .sys-mark.sys-sharepoint { background: var(--sys-sharepoint); }
.sys-remarcable .sys-mark, .sys-mark.sys-remarcable { background: var(--sys-remarcable); }
.sys-accubid .sys-mark, .sys-mark.sys-accubid { background: var(--sys-accubid); }
.sys-scopeline .sys-mark, .sys-mark.sys-scopeline { background: var(--sys-scopeline); }
.sys-chip .icon { width: 14px; height: 14px; color: var(--text-3); }
.sys-row { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
/* Visible system+env token beside each linked-account glyph, so identity reads
   without a hover (the glyph's aria-label stays authoritative for SR). */
.sys-acct-env { font-size: 10px; color: var(--text-3); margin-right: 4px; }
/* not-linked state is carried by the dashed glyph, so the caption stays at the
   AA-safe muted token rather than dimming below the contrast floor. */
/* An "off" mark reads as inactive everywhere it appears (system rows, the
   per-project Connections card, etc.) — neutralise the coloured backer too,
   not just the glyph, so it isn't a grey logo on a live-coloured square. */
.sys-mark.off { background: transparent; border: 1.5px dashed var(--stroke-strong); color: var(--text-3); box-shadow: none; }
/* A disabled (unconfigured / not-ready) integration reads as desaturated
   wherever its logo shows — the coloured backer goes grey and the mark dims. */
.sys-mark.disabled { filter: grayscale(1); opacity: 0.5; }
a.sys-mark.disabled:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28); }
/* Dev-environment icon: subtle 45deg hazard stripes (the same angle as the
   Dev env pill) painted behind the logo, so a dev SharePoint/Procore mark
   reads as dev at a glance without obscuring the glyph. */
.sys-mark.sys-env-dev { position: relative; }
.sys-mark.sys-env-dev::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(2, 5, 9, 0.22) 3px 6px);
  pointer-events: none;
}
.sys-mark.sys-env-dev .sm-logo { position: relative; z-index: 1; }

/* ---- Tooltip ----
   JS-positioned (position:fixed, appended to <body>) so it escapes the
   overflow clipping of .table-wrap and other scroll containers. Any element
   with data-tip gets one; add data-tip-warn for a cautionary second line
   (e.g. destructive "click to unlink" actions). */
.sl-tip {
  position: fixed;
  top: -9999px;
  left: 0;
  z-index: 200;
  max-width: 280px;
  padding: 8px 11px;
  background: color-mix(in oklab, var(--solid-raised) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.sl-tip.show { opacity: 1; transform: translateY(0); }
.sl-tip .slt-main { color: var(--text-1); }
/* full amber-tinted hairline instead of a left stripe (the .slt-warn glyph carries the rest). */
.sl-tip.warn { border-color: color-mix(in oklab, var(--warning) 55%, var(--stroke-strong)); }
.sl-tip .slt-warn {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: var(--warning);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.sl-tip .slt-warn::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 6px 1px color-mix(in oklab, var(--warning) 60%, transparent);
}
@media (prefers-reduced-motion: reduce) { .sl-tip { transition: none; } }
/* Inline-citation hover tooltip: a richer summary of the cited record. */
.sl-tip.cite-tip { max-width: 320px; padding: 9px 12px; }
.cite-tip .ct-title { color: var(--text-1); font-weight: 600; font-size: 12.5px; line-height: 1.35; margin-bottom: 3px; }
.cite-tip .ct-meta { color: var(--text-2); font-size: 11.5px; }
.cite-tip .ct-status { color: var(--text-1); font-weight: 600; }
.cite-tip .ct-sub { color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.cite-tip .ct-dim { font-style: italic; }

/* ---- Origin tags (link provenance) ---- */
.origin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.origin-sync { color: var(--info); border-color: color-mix(in oklab, var(--info) 50%, transparent); }
.origin-manual { color: var(--text-2); }
.origin-ai { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); }

/* ---- Trace chain ---- */
.trace { display: flex; flex-direction: column; }
.trace-hop { display: flex; gap: var(--sp-4); }
.trace-rail { display: flex; flex-direction: column; align-items: center; flex: none; width: 36px; }
.trace-rail .tr-node {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  color: #fff;
  flex: none;
}
.trace-rail .tr-line { width: 2px; flex: 1; min-height: 18px; background: var(--stroke-strong); }
.trace-hop:last-child .tr-line { display: none; }
.trace-body { flex: 1; min-width: 0; padding-bottom: var(--sp-5); }
.trace-hop:last-child .trace-body { padding-bottom: 0; }
.trace-body .th-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-inset);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.trace-body .th-title { font-weight: 700; }
.trace-body .th-sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 1px; }
.trace-body .th-spacer { flex: 1; }

/* ---- Open-in-source (external deep link) ---- */
.btn-ext {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--stroke);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  flex: none;
  text-decoration: none;
}
.btn-ext:hover { color: var(--text-1); border-color: var(--stroke-strong); background: var(--bg-hover); }
.btn-ext .icon { width: 14px; height: 14px; }
.btn-ext.lg { width: var(--control-h-sm); height: var(--control-h-sm); border-radius: var(--r-xs); }

/* ---- Sync footer ---- */
.sync-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--stroke);
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.sync-footer .icon { width: 14px; height: 14px; }
.sync-footer .sf-err { color: var(--danger); font-weight: 600; }
.sync-footer .sf-spacer { flex: 1; }

/* ============================================================
   PHASE NAV (dashboard tile + gated stepper)
   ============================================================ */
.phase-nav {
  display: flex;
  gap: var(--sp-4);
  align-items: stretch;
}

.dash-tile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  /* Deep-orange backing so the white title + subtitle clear WCAG AA: the
     bright --accent/--accent-hover gives white only ~3.75/2.93:1. Solved via
     OKLab — top 91% black-mix = 4.7:1, bottom 81% = 6.1:1. Derived from
     --accent so it still tracks a brand tweak. */
  background: linear-gradient(180deg in oklab, color-mix(in oklab, var(--accent) 91%, black), color-mix(in oklab, var(--accent) 81%, black));
  color: var(--on-accent);
  border-radius: var(--r-lg);
  text-decoration: none;
  flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 10px 30px -10px color-mix(in oklab, var(--accent) 70%, transparent);
}
.dash-tile:hover { filter: brightness(1.06); }
.dash-tile .dt-title { font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; }
/* Full-strength on-accent white — the orange backing limits this to ~3.75:1,
   so the accent/on-accent contrast is flagged for the colorize step (darker
   accent backing). Dropping the opacity is the most this step can safely do. */
.dash-tile .dt-sub { font-size: var(--fs-sm); }
.dash-tile.inactive {
  background: var(--bg-raised);
  color: var(--text-2);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 1px 0 var(--edge-hl);
  filter: none;
}
.dash-tile.inactive:hover { border-color: var(--stroke-strong); color: var(--text-1); }

.stepper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--edge-hl);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex: none;
}

.step-disc {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
.step .st-label { font-weight: 700; font-size: var(--fs-body); line-height: 1.25; color: var(--text-1); display: block; white-space: nowrap; }
.step .st-state { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.25; display: block; white-space: nowrap; }

.step.complete .step-disc { background: var(--success); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30); }
.step.active .step-disc { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.step.active .step-disc::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 1px color-mix(in oklab, var(--accent) 50%, transparent), inset 0 0 4px rgba(255,255,255,0.55); }
.step.attention .step-disc { background: var(--warning-soft); color: var(--warning); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.step.locked .step-disc { background: transparent; border: 1px solid var(--stroke-strong); color: var(--text-3); }
.step.locked .st-label { color: var(--text-2); }
.step.current .st-label { color: var(--accent); }
a.step:hover .st-label { text-decoration: underline; text-underline-offset: 3px; }

.step-link { display: none; }
.step-dash {
  flex: 1;
  min-width: 14px;
  max-width: 56px;
  height: 0;
  border-top: 2px dashed var(--stroke-strong);
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
}

.page-title {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 var(--sp-4);
}

.meta-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  color: var(--text-2);
  font-size: var(--fs-body);
}
.meta-strip .meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.meta-strip .meta .icon { color: var(--text-3); }
.meta-strip .sep { width: 1px; height: 18px; background: var(--stroke-strong); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--control-h);
  padding: 0 var(--sp-5);
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  color: inherit;
}
.btn .icon { width: 18px; height: 18px; }

.btn-primary {
  background: linear-gradient(180deg in oklab, var(--accent-hover), var(--accent));
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 8px 24px -8px color-mix(in oklab, var(--accent) 72%, transparent);
}
.btn-primary:hover { filter: brightness(1.07); }

.btn-emphasis {
  background: var(--text-1);
  color: var(--bg-base);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 26px -10px color-mix(in oklab, var(--text-1) 50%, transparent);
}
.btn-emphasis:hover { filter: brightness(1.06); }

.btn-danger {
  background: linear-gradient(180deg in oklab, color-mix(in oklab, var(--danger) 86%, white), var(--danger));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 24px -8px color-mix(in oklab, var(--danger) 70%, transparent);
}
.btn-danger:hover { filter: brightness(1.07); }

/* ---- Glow dynamics ----
   Elements with a diffuse outer glow get a second, larger glow on a pseudo.
   Visibility is gated by a transitioned opacity (smooth in AND out), while
   the breathe runs continuously on filter so it never fights the fade. */
.btn-primary, .btn-emphasis, .btn-danger, .dash-tile {
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  isolation: isolate;
  transition: filter 0.6s ease;
}
/* The face brightness eases with the same timing as the glow layers, so
   the whole lit look fades out together on mouse leave. */
.btn-primary:hover, .btn-emphasis:hover, .btn-danger:hover, .dash-tile:hover { transition-duration: 0.45s; }
.btn-primary::after, .btn-emphasis::after, .btn-danger::after, .dash-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
  animation: glow-breathe 4.4s ease-in-out infinite;
}
.btn-primary::after, .dash-tile::after { box-shadow: 0 10px 40px -6px color-mix(in oklab, var(--accent) 85%, transparent), 0 16px 96px -12px color-mix(in oklab, var(--accent) 38%, transparent); }
.btn-emphasis::after { box-shadow: 0 10px 42px -8px color-mix(in oklab, var(--text-1) 70%, transparent), 0 16px 100px -14px color-mix(in oklab, var(--text-1) 30%, transparent); }
.btn-danger::after { box-shadow: 0 10px 40px -6px color-mix(in oklab, var(--danger) 82%, transparent), 0 16px 96px -12px color-mix(in oklab, var(--danger) 36%, transparent); }
/* Edge-lit inner glow: the hover glow also permeates the face of the
   control — an organic inner bloom plus lit edges (bright top rim, faint
   bottom rim, hairline ring), breathing in sync with the outer glow.
   The shadows hug the edges (negative spread), so text stays clear. */
.btn-primary::before, .btn-emphasis::before, .btn-danger::before, .dash-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  animation: glow-breathe 4.4s ease-in-out infinite;
  background: radial-gradient(circle 92px at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.32), transparent 68%);
  box-shadow:
    inset 0 0 22px -7px rgba(255, 255, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.btn-emphasis::before {
  /* White face: the bloom alone is invisible, so depth comes from a darker
     seat at the bottom edge under the same lit top rim. */
  background: radial-gradient(circle 92px at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.68), transparent 68%);
  box-shadow:
    inset 0 0 18px -7px rgba(255, 255, 255, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 -4px 10px rgba(15, 22, 32, 0.16);
}
.btn-danger::before {
  background: radial-gradient(circle 92px at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.28), transparent 68%);
}

.btn-primary:hover::after, .btn-emphasis:hover::after, .btn-danger:hover::after, .dash-tile:hover::after,
.btn-primary:hover::before, .btn-emphasis:hover::before, .btn-danger:hover::before, .dash-tile:hover::before {
  opacity: 1;
  transition-duration: 0.45s;
}
.dash-tile.inactive::after, .dash-tile.inactive::before { content: none; }

@keyframes glow-breathe {
  0%, 100% { filter: opacity(100%); }
  50% { filter: opacity(55%); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .btn-emphasis::after, .btn-danger::after, .dash-tile::after,
  .btn-primary::before, .btn-emphasis::before, .btn-danger::before, .dash-tile::before,
  .brand::before { animation: none; }
}

.btn-outline { border-color: var(--stroke-strong); color: var(--text-1); }
.btn-outline:hover { background: var(--bg-hover); border-color: var(--text-3); }

.btn-ghost { color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-1); }

.btn-sm { height: var(--control-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-xs); }
.btn-lg { height: var(--control-h-lg); padding: 0 var(--sp-6); font-size: var(--fs-h3); border-radius: var(--r-md); }
.btn-block { width: 100%; }

/* ---- Activity / "something is happening" feedback ------------------------
   A pressed button that triggers a save or navigation gets a looping spinner
   (injected as .btn-spin) and goes non-interactive; the page shows a slim
   top progress bar and a progress cursor until it unloads. See
   scopeline_activity_script(). currentColor keeps the spinner correct on every
   button variant (white on primary, accent on outline, muted on ghost). */
@keyframes scopeline-spin { to { transform: rotate(360deg); } }
.btn.is-busy { pointer-events: none; opacity: 0.9; }
.btn.is-busy > .btn-spin {
  width: 0.95em; height: 0.95em; flex: none; box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: scopeline-spin 0.62s linear infinite;
}
.route-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 9999; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; }
.route-progress.on { opacity: 1; }
.route-progress > i {
  display: block; height: 100%; width: 38%; border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg in oklab, transparent, var(--accent) 45%, color-mix(in oklab, var(--accent) 55%, white) 72%, var(--accent));
  box-shadow: 0 0 10px 1px color-mix(in oklab, var(--accent) 60%, transparent);
  animation: scopeline-route 1.1s ease-in-out infinite;
}
@keyframes scopeline-route { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
body.is-navigating { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .btn.is-busy > .btn-spin { animation-duration: 1.1s; }
  .route-progress > i { animation: none; width: 100%; opacity: 0.75; }
}

/* ============================================================
   BADGES / PILLS / CHIPS
   ============================================================ */
.count-badge {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg in oklab, color-mix(in oklab, var(--danger) 85%, white), var(--danger));
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.count-badge.neutral { background: var(--bg-overlay); color: var(--text-2); border: 1px solid var(--stroke-strong); box-shadow: none; }
.count-badge.accent { background: linear-gradient(180deg in oklab, var(--accent-hover), var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
/* warning count = needs-attention exception (e.g. pending suggested matches);
   amber with dark ink (~8.3:1) so orange stays reserved for action. */
.count-badge.warning { background: linear-gradient(180deg in oklab, color-mix(in oklab, var(--warning) 88%, white), var(--warning)); color: #15191E; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.pill .icon { width: 14px; height: 14px; }
a.pill { text-decoration: none; cursor: pointer; }
a.pill:hover { filter: brightness(1.15); }
.pill-success { color: var(--success); border-color: color-mix(in oklab, var(--success) 55%, transparent); background: var(--success-soft); }
.pill-warning { color: var(--warning); border-color: color-mix(in oklab, var(--warning) 55%, transparent); background: var(--warning-soft); }
.pill-danger  { color: var(--danger);  border-color: color-mix(in oklab, var(--danger) 55%, transparent);  background: var(--danger-soft); }
.pill-info    { color: var(--info);    border-color: color-mix(in oklab, var(--info) 55%, transparent);    background: var(--info-soft); }
.pill-neutral { color: var(--text-2);  border-color: var(--stroke-strong); background: transparent; }
.pill-accent  { color: var(--accent);  border-color: color-mix(in oklab, var(--accent) 55%, transparent); background: var(--accent-softer); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--bg-overlay);
  border: 1px solid var(--stroke);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.chip-integration {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-xs);
  background: var(--paper-raised);
  color: var(--paper-text);
  border: 1px solid var(--paper-stroke);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.chip-file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke-strong);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-decoration: none;
}
.chip-file .icon { width: 15px; height: 15px; color: var(--text-3); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
}

.card-paper {
  background: var(--paper-bg);
  color: var(--paper-text);
  border: none;
  box-shadow: var(--paper-shadow);
}
.card-paper .eyebrow { color: var(--paper-text-2); }

.card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.card-title { font-size: var(--fs-h2); font-weight: 700; margin: 0; letter-spacing: -0.01em; white-space: nowrap; }
.card-head .help { color: var(--text-3); display: grid; place-items: center; cursor: help; }
.card-head .spacer { flex: 1; }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--fs-body);
  text-decoration: none;
  white-space: nowrap;
}
.card-link:hover { color: var(--text-1); }

/* ============================================================
   QUEUE ROWS (severity stripe + wash)
   ============================================================ */
.qrow {
  --sev: var(--danger);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-6);
  background:
    var(--grain) repeat,
    linear-gradient(90deg in oklab, color-mix(in oklab, var(--sev) 13%, transparent), transparent 78%),
    var(--bg-inset);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}
.qrow::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--sev);
  box-shadow: 0 0 8px -1px color-mix(in oklab, var(--sev) 55%, transparent), inset 0 0 3px rgba(255,255,255,0.35);
}
.qrow.sev-warning { --sev: var(--warning); }
.qrow.sev-info { --sev: var(--info); }
.qrow.sev-success { --sev: var(--success); }
.qrow.sev-neutral { --sev: var(--locked); }
.qrow .q-icon { color: var(--sev); flex: none; }
.qrow .q-title { font-weight: 700; font-size: var(--fs-h3); color: var(--text-1); }
.qrow .q-desc { color: var(--text-3); font-size: var(--fs-body); }
.qrow .q-meta { color: var(--text-3); font-size: var(--fs-sm); white-space: nowrap; }
.qrow .q-spacer { flex: 1; }
a.qrow:hover, .qrow.clickable:hover { border-color: var(--stroke-strong); cursor: pointer; }
.qrow.selected { border-color: color-mix(in oklab, var(--sev) 60%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 20px -10px var(--sev), inset 0 0 26px -14px color-mix(in oklab, var(--sev) 40%, transparent); }

.qstack { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Paper-context queue rows */
.card-paper .qrow {
  background: linear-gradient(90deg in oklab, color-mix(in oklab, var(--sev) 9%, transparent), transparent 65%), var(--paper-raised);
  border-color: var(--paper-stroke);
}
.card-paper .qrow .q-title { color: var(--paper-text); }
.card-paper .qrow .q-desc, .card-paper .qrow .q-meta { color: var(--paper-text-2); }

/* ============================================================
   STAT / PROGRESS
   ============================================================ */
.stat-num {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-num .unit { font-size: 0.45em; font-weight: 600; color: var(--text-2); }

.ring { position: relative; width: 150px; height: 150px; flex: none; }
/* overflow: visible lets the stroke glow bloom past the viewBox - SVGs
   clip at their viewport by default, which cropped the halo on all sides. */
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring .track { stroke: var(--stroke-strong); }
.ring .fill { stroke: currentColor; color: var(--success); stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in oklab, currentColor 40%, transparent)) drop-shadow(0 0 1px rgba(255,255,255,0.4)); }

/* ---- Charts ----------------------------------------------------------------
   Token-driven, dependency-free chart primitives (SVG + flex). Every series
   colour comes from --bar (default --accent); set it inline per element to a
   system colour, e.g. style="--bar: var(--sys-procore)". Data (heights, points,
   dash arrays) is supplied inline so the same CSS serves any dataset. */
.chart { display: block; width: 100%; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.chart-legend > span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.chart-legend .key { width: 11px; height: 11px; border-radius: 3px; flex: none; background: var(--bar, var(--accent)); }

/* Vertical bar / column chart. Each .col gets an inline height:NN%. A grid
   (plot row + label row) pins every column's bottom to the same baseline
   regardless of value/label size; the value floats absolutely above the column
   so a tall bar can't push its own baseline down. */
.chart-bars { display: flex; align-items: stretch; gap: var(--sp-2); height: 168px; }
.chart-bars .bar { flex: 1; min-width: 0; display: grid; grid-template-rows: 1fr auto; row-gap: 6px; }
.chart-bars .col {
  align-self: end; justify-self: center; position: relative;
  width: 100%; max-width: 40px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: linear-gradient(180deg in oklab, var(--bar, var(--accent)), color-mix(in oklab, var(--bar, var(--accent)) 62%, var(--bg-raised)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 18px -8px color-mix(in oklab, var(--bar, var(--accent)) 60%, transparent);
  transition: height 0.5s cubic-bezier(0.22,1,0.36,1);
}
.chart-bars .col .val { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--text-2); font-family: var(--font-mono); transition: color 0.14s ease; }
.chart-bars .col { cursor: pointer; transition: height 0.5s cubic-bezier(0.22,1,0.36,1), filter 0.14s ease, box-shadow 0.14s ease; }
/* The hovered / focused (tooltip-active) column lifts off the others: brighter
   fill, an accent ring, a stronger glow, and a full-strength value label. */
.chart-bars .col:hover, .chart-bars .col.tip-active {
  filter: brightness(1.14) saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4),
              0 0 0 2px color-mix(in oklab, var(--bar, var(--accent)) 62%, transparent),
              0 10px 26px -8px color-mix(in oklab, var(--bar, var(--accent)) 88%, transparent);
}
.chart-bars .col:hover .val, .chart-bars .col.tip-active .val { color: var(--text-1); }
.chart-bars .lbl { text-align: center; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.14s ease; }
.chart-bars .bar:hover .lbl, .chart-bars .bar:has(.col.tip-active) .lbl { color: var(--text-1); }

/* Line / area chart (inline SVG). Path data set inline; styling here. */
.chart-line { width: 100%; height: auto; display: block; overflow: visible; }
.chart-line .grid { stroke: var(--stroke); stroke-width: 1; }
.chart-line .area { fill: var(--bar, var(--accent)); fill-opacity: 0.14; }
.chart-line .line { fill: none; stroke: var(--bar, var(--accent)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px color-mix(in oklab, var(--bar, var(--accent)) 40%, transparent)); }
.chart-line .dot { fill: var(--bar, var(--accent)); stroke: var(--bg-raised); stroke-width: 1.5; cursor: pointer; transition: r 0.12s ease, stroke-width 0.12s ease, filter 0.12s ease; }
/* The hovered / focused (tooltip-active) node grows, gains a ring against the
   plot, and glows — so the point the tooltip refers to is unmistakable. */
.chart-line .dot:hover, .chart-line .dot.tip-active {
  r: 5.5px;
  stroke-width: 3;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--bar, var(--accent)) 78%, transparent));
}
.chart-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-top: 6px; font-family: var(--font-mono); }

/* Donut / pie (inline SVG; each segment gets stroke + stroke-dasharray +
   stroke-dashoffset). Wrap in .chart-donut-wrap to centre a label. */
.chart-donut-wrap { position: relative; width: 132px; height: 132px; flex: none; }
.chart-donut { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.chart-donut .track { fill: none; stroke: var(--bg-inset); }
.chart-donut .seg { fill: none; stroke-linecap: butt; transition: stroke-dasharray 0.5s cubic-bezier(0.22,1,0.36,1); }
.chart-donut-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }

/* Horizontal bars / ranked meter list. */
.chart-hbars { display: flex; flex-direction: column; gap: var(--sp-2); }
.chart-hbars .row { display: grid; grid-template-columns: minmax(72px, 130px) 1fr auto; align-items: center; gap: var(--sp-3); }
.chart-hbars .name { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-hbars .track { height: 10px; border-radius: var(--r-pill); background: var(--bg-inset); overflow: hidden; }
.chart-hbars .fill { height: 100%; border-radius: inherit; background: var(--bar, var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); transition: width 0.5s cubic-bezier(0.22,1,0.36,1); }
.chart-hbars .num { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); font-weight: 600; text-align: right; }

/* Sparkline — inline trend, sized to flow with text. .up / .down recolour. */
.spark { width: 90px; height: 26px; vertical-align: middle; overflow: visible; }
.spark .line { fill: none; stroke: var(--bar, var(--accent)); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.spark .area { fill: var(--bar, var(--accent)); fill-opacity: 0.12; }
.spark.up { --bar: var(--success); }
.spark.down { --bar: var(--danger); }

.check-list { display: flex; flex-direction: column; }
.check-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}
.check-item + .check-item { border-top: 1px solid var(--stroke); }
.check-disc {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
}
.check-disc .icon { width: 15px; height: 15px; }
.check-item.done .check-disc { background: var(--success); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30); }
.check-item.pending .check-disc { background: var(--warning-soft); color: var(--warning); }
.check-item.pending .check-disc::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.check-item.todo .check-disc { border: 1.5px solid var(--stroke-strong); }
.check-item .ck-label { font-weight: 600; }
.check-item .ck-value { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-3); }

/* Bar rows (data viz) */
.bar-row { display: grid; grid-template-columns: 170px 1fr 64px; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0; }
.bar-row .br-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.bar-row .br-track { height: 10px; border-radius: var(--r-pill); background: var(--bg-inset); overflow: hidden; }
.bar-row .br-fill { height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.bar-row .br-val { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); text-align: right; }

.progress {
  display: block;
  height: 8px; border-radius: var(--r-pill);
  background: var(--bg-inset); overflow: hidden;
  border: 1px solid var(--stroke);
}
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.progress.p-success > i { background: var(--success); }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap { overflow-x: auto; }
table.dt { width: 100%; border-collapse: collapse; }
.dt th {
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--stroke-strong);
  white-space: nowrap;
}
.dt td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--stroke);
  vertical-align: middle;
  font-size: var(--fs-body);
}
.dt tbody tr:hover td { background: var(--bg-hover); }
.dt tbody tr.selected td { background: var(--accent-softer); }
.dt td.num, .dt th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dt td .td-main { font-weight: 600; color: var(--text-1); }
.dt td .td-sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 1px; }
.dt tr.group-row td {
  background: var(--bg-inset);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--text-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--stroke);
}
.dt tr.group-row:hover td { background: var(--bg-inset); }
.dt tr.subtotal td { font-weight: 600; color: var(--text-2); background: transparent; border-bottom: 1px solid var(--stroke-strong); }
.dt tfoot td { font-weight: 700; border-bottom: none; padding-top: var(--sp-4); }

/* ============================================================
   FORMS
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field > label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--text-3); }
.field .hint { font-size: var(--fs-sm); color: var(--text-3); }

.input, .select, .textarea {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--sp-3);
  background: var(--bg-inset);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-family: inherit;
  font-size: var(--fs-body);
  outline: none;
}
.textarea { height: auto; min-height: 96px; padding: var(--sp-3); resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-softer);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }

/* Fixed / read-only fields: clearly non-editable - flatter, dimmer,
   softer border, no focus affordance, not-allowed cursor. */
.input:disabled, .input[readonly],
.textarea:disabled, .textarea[readonly],
.select:disabled {
  background: var(--bg-base);
  border-color: var(--stroke);
  border-style: dashed;
  color: var(--text-3);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.8;
}
.input:disabled:focus, .input[readonly]:focus,
.textarea:disabled:focus, .textarea[readonly]:focus,
.select:disabled:focus {
  border-color: var(--stroke);
  box-shadow: none;
}

.select {
  appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23808a96' stroke-width='2' stroke-linecap='round' d='M1.5 1.5L6 6l4.5-4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Native dropdown popups: the option list follows the element's
   color-scheme and option styles, not the page CSS - set both explicitly
   or the OS default light-gray menu leaks into the dark theme. */
select { color-scheme: dark; }
:root[data-theme="light"] select { color-scheme: light; }
select option,
select optgroup {
  background-color: var(--solid-raised);
  color: var(--text-1);
  font-family: var(--font-sans);
}
select option:disabled { color: var(--text-3); }
select option:checked { background-color: var(--accent-soft); }

/* Custom dropdowns: a themed button + floating panel enhance every
   .select; the native element stays (hidden) as the form value carrier.
   Matches the other floating lists (search, contacts, folders). */
.dd { position: relative; display: inline-block; vertical-align: middle; }
.dd select.dd-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; }
.dd-btn {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
}
.dd-btn .dd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-panel {
  /* Fixed-positioned (coords set by the enhancer from the button rect):
     escapes table-wrap and any other overflow container that would
     otherwise clamp an absolute panel. */
  position: fixed;
  z-index: 80;
  width: max-content;
  max-width: min(440px, 90vw);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: var(--solid-raised);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
}
.dd-opt {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--text-1);
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: 8px 10px;
  border-radius: var(--r-xs);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-opt:hover:not(:disabled), .dd-opt:focus { background: var(--bg-hover); outline: none; }
.dd-opt.on { background: var(--accent-softer); color: var(--accent); }
.dd-opt:disabled { color: var(--text-3); cursor: default; }

.input-wrap { position: relative; }
.input-wrap .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 18px; height: 18px; pointer-events: none; }
.input-wrap .input { padding-left: 40px; }

.select-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--control-h);
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke-strong);
  background: transparent;
  color: var(--text-1);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.select-pill:hover { background: var(--bg-hover); }
.select-pill .icon { width: 16px; height: 16px; color: var(--text-3); }
.select-pill .sp-key { color: var(--text-3); font-weight: 500; }
.card-paper .select-pill { border-color: var(--paper-stroke); color: var(--paper-text); }
.card-paper .select-pill .icon, .card-paper .select-pill .sp-key { color: var(--paper-text-2); }

/* Toggle */
.toggle { position: relative; width: 46px; height: 26px; flex: none; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.toggle .tg-track {
  position: absolute; inset: 0;
  border-radius: var(--r-pill);
  background: var(--bg-inset);
  border: 1px solid var(--stroke-strong);
  transition: background 0.15s, border-color 0.15s;
}
.toggle .tg-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform 0.15s, background 0.15s;
}
.toggle input:checked + .tg-track { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .tg-track::after { transform: translateX(20px); background: #fff; }

/* Keyboard focus for custom/icon controls that otherwise relied on hover only.
   :focus-visible keeps the ring for keyboard users without flashing it on
   click. Mirrors the input focus ring (accent border + soft halo). */
.dd-btn:focus-visible,
.icon-btn:focus-visible,
.btn:focus-visible,
.btn-ext:focus-visible,
a.card-link:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-softer);
}
.dd-opt:focus-visible { outline: none; background: var(--bg-hover); box-shadow: inset 0 0 0 2px var(--accent-softer); }
.toggle input:focus-visible + .tg-track { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-softer); }

/* Setting row */
.setting-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
}
.setting-row + .setting-row { border-top: 1px solid var(--stroke); }
.setting-row .sr-body { flex: 1; min-width: 0; }
.setting-row .sr-title { font-weight: 600; }
.setting-row .sr-desc { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }

/* Radio cards */
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.radio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-md);
  cursor: pointer;
}
.radio-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.radio-card .rc-title { font-weight: 700; }
.radio-card .rc-desc { font-size: var(--fs-sm); color: var(--text-3); }
.radio-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-softer);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ============================================================
   TABS / SEGMENTS
   ============================================================ */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--stroke); }
.tab {
  appearance: none; background: none; border: none;
  padding: var(--sp-3) var(--sp-4);
  font-family: inherit; font-size: var(--fs-body); font-weight: 600;
  color: var(--text-3); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.tab:hover { color: var(--text-1); }
.tab.active { color: var(--text-1); border-bottom-color: var(--accent); }

.seg {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-inset);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  gap: 2px;
}
.seg button, .seg a {
  appearance: none; border: none; background: none;
  padding: var(--sp-1) var(--sp-3);
  height: calc(var(--control-h-sm) - 8px);
  display: inline-flex; align-items: center;
  border-radius: calc(var(--r-sm) - 3px);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-3); cursor: pointer; text-decoration: none;
}
.seg .active { background: var(--bg-raised); color: var(--text-1); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }

/* ============================================================
   INSPECTOR (selected-item detail)
   ============================================================ */
.inspector {
  background: var(--bg-raised);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  color: var(--text-1);
  box-shadow: var(--shadow-card);
}
.inspector .ins-eyebrow { font-size: var(--fs-body); color: var(--text-3); }
.card-paper .inspector {
  background: var(--solid-raised);
}
.inspector .ins-title { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em; margin: 2px 0 0; }
.ins-cols {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  margin-top: var(--sp-5);
}
.ins-col + .ins-col { border-left: 1px solid var(--stroke); padding-left: var(--sp-6); }
.ins-label { font-size: var(--fs-body); color: var(--text-3); font-weight: 600; margin-bottom: var(--sp-2); }
.ins-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.ins-actions .push { margin-left: auto; }

/* ============================================================
   MISC
   ============================================================ */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-6); font-size: var(--fs-body); }
.kv dt { color: var(--text-3); margin: 0; white-space: nowrap; }
.kv dd { margin: 0; font-weight: 600; }
.kv dd.mono { font-weight: 500; }

.thumb {
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, var(--bg-hover) 10px 20px),
    var(--bg-inset);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
  padding: var(--sp-2);
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  border: 1.5px dashed var(--stroke-strong);
  border-radius: var(--r-lg);
  color: var(--text-3);
}
.empty .icon { width: 28px; height: 28px; }
.empty .e-title { font-weight: 700; color: var(--text-2); font-size: var(--fs-h3); }

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-6);
  border: 1.5px dashed var(--stroke-strong);
  border-radius: var(--r-lg);
  background: var(--bg-inset);
  color: var(--text-2);
  text-align: center;
  cursor: pointer;
}
.dropzone:hover { border-color: var(--accent); color: var(--text-1); box-shadow: 0 0 28px -10px color-mix(in oklab, var(--accent) 55%, transparent), 0 0 70px -22px color-mix(in oklab, var(--accent) 28%, transparent), inset 0 0 22px -10px color-mix(in oklab, var(--accent) 40%, transparent); }
.dropzone .icon { width: 26px; height: 26px; color: var(--accent); }
.dropzone .dz-title { font-weight: 700; color: var(--text-1); }
.dropzone .dz-sub { font-size: var(--fs-sm); color: var(--text-3); }

.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-overlay);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  font-weight: 600;
}
.toast .icon { color: var(--success); }
.toast.t-danger .icon { color: var(--danger); }

.hairline { border: none; border-top: 1px solid var(--stroke); margin: var(--sp-5) 0; }

/* Footer nav between example pages */
.proto-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  justify-content: center;
  padding: var(--sp-6) 0 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.proto-footer a { color: var(--text-2); font-weight: 600; text-decoration: none; }
.proto-footer a:hover { color: var(--text-1); }