/* ShieldAI — workspace shell, screens, drawers, command palette.
   Layout only: every colour, radius, shadow, duration and font below reads
   from static/vendor/glass/tokens.css (+ themes/shield.css for hue). Nothing
   here paints a raw colour — see primitives.css §"two rules". */

:root {
  --sidebar-w: 264px;
  /* Type — the design artifact (redesigns/shieldai.html) is set in Fraunces
     (display), IBM Plex Sans (UI/body) and IBM Plex Mono (numerals, labels,
     code). Those faces are self-hosted same-origin under static/fonts and
     declared in static/fonts/fonts.css, so they load under the app's
     `default-src 'self'` CSP where an external Google Fonts link would be
     blocked. We override the vendored glass package's --font-ui / --font-mono
     here (in the app layer, not in the shared tokens.css) so ShieldAI keeps
     the artifact's exact stacks while every other glass project keeps its own.
     The fallback stacks mirror the artifact character-for-character so the
     computed font-family matches even before the webfont paints. */
  --font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", SFMono-Regular, Consolas, monospace;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --shadow-drawer: -24px 0 60px -20px oklch(0% 0 0 / 0.45);
  --shadow-cmdk: 0 30px 70px -24px oklch(0% 0 0 / 0.45);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --shadow-drawer: -24px 0 50px -22px oklch(0% 0 0 / 0.16);
    --shadow-cmdk: 0 30px 60px -26px oklch(0% 0 0 / 0.2);
  }
}
:root[data-theme="light"] {
  --shadow-drawer: -24px 0 50px -22px oklch(0% 0 0 / 0.16);
  --shadow-cmdk: 0 30px 60px -26px oklch(0% 0 0 / 0.2);
}

* {
  box-sizing: border-box;
}
/* The mobile off-canvas sidebar (below) sits at negative x via transform
   while closed; without this, that fixed-position box still (in Chromium)
   inflates document.documentElement.scrollWidth and the page grows a
   horizontal scrollbar it never visually needs. */
html,
body {
  overflow-x: hidden;
}
/* Any element carrying both the `hidden` attribute and an author class that
   sets its own `display` (`.btn{display:inline-flex}`, `.screen{display:flex}`,
   …) would otherwise stay on-screen: author rules of equal specificity always
   beat the user-agent's own `[hidden]{display:none}`, regardless of selector
   order. One !important here is the standard fix, applied once, globally,
   instead of chasing every individual component that might combine the two. */
[hidden] {
  display: none !important;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 560;
  letter-spacing: -0.01em;
  margin: 0;
}
p {
  margin: 0;
}
/* Form controls do not inherit font-family from the document by default — the
   UA sheet pins buttons/inputs to a system stack, which left the sidebar's
   command trigger, nav items and icon buttons rendering in Arial instead of
   the workspace's IBM Plex Sans. Match the design artifact's reset so every
   control carries the same type as its surrounding text. */
button,
input,
select,
textarea {
  font-family: inherit;
}
svg {
  display: block;
}

/* =============================================================================
   APP SHELL
   ============================================================================= */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  min-height: 100vh;
}

.sidebar {
  grid-area: sidebar;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border-right: 1px solid var(--line);
  background: var(--gl-fill);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  z-index: 40;
}
.side-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 2px var(--sp-1) 0;
  color: inherit;
  text-decoration: none;
}
.side-logo {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-logo svg {
  width: 19px;
  height: 19px;
}
.side-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.side-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.14rem;
  color: var(--ink);
}
.side-sub {
  font-size: 0.71rem;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdk-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--target-min);
  text-align: left;
  padding: 9px 11px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.83rem;
  transition:
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.cmdk-trigger:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.cmdk-trigger svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.cmdk-trigger span {
  flex: 1;
  min-width: 0;
}
.cmdk-trigger kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-2);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  flex: none;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.side-nav-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--sp-4) var(--sp-2) 6px;
}
.side-nav-label:first-child {
  padding-top: 2px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--target-min);
  text-align: left;
  padding: 9px 10px;
  border-radius: var(--r-1);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 500;
  transition:
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.nav-item svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease);
}
.nav-item:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}
.nav-item:hover svg {
  color: var(--ink-2);
}
.nav-item.is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--surface));
}
.nav-item.is-active svg {
  color: var(--accent);
}
.nav-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-2);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 1px 7px;
}

.side-foot {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.key-mini {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 9px 10px;
  border-radius: var(--r-1);
  background: var(--surface);
  border: 1px solid var(--line);
}
.key-mini-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  flex: none;
}
.key-mini-dot.is-live {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.key-mini-t {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}
.key-mini-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-2);
}
.eco-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--target-min);
  padding: 6px 10px;
  border-radius: var(--r-1);
  color: var(--ink-2);
  font-size: 0.76rem;
  text-decoration: none;
  border: 1px solid transparent;
}
.eco-link:hover {
  color: var(--ink);
  border-color: var(--line);
}
.eco-link svg {
  width: 13px;
  height: 13px;
  flex: none;
}

/* ---- topbar ---- */
.topbar {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.sidebar-toggle {
  display: none;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  color: var(--ink-2);
  min-width: 0;
}
.crumbs svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.crumbs #crumbCurrent {
  color: var(--ink);
  font-weight: 600;
}
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  transition:
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
  text-decoration: none;
}
.icon-btn:hover {
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-1px);
}
.icon-btn svg {
  width: 16px;
  height: 16px;
}

/* gradient identity avatar (topbar) — doubles as the profile link */
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-accent);
  text-decoration: none;
  background: linear-gradient(155deg, var(--accent), var(--accent-2));
  transition: transform var(--t-fast) var(--ease);
}
.avatar:hover {
  transform: translateY(-1px);
}

.theme-switch {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  padding: 3px;
  gap: 2px;
}
.theme-opt {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  background: transparent;
}
.theme-opt svg {
  width: 14px;
  height: 14px;
}
.theme-opt.is-active {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
}

/* ---- main / screens ---- */
.main {
  grid-area: main;
  padding: var(--sp-7) var(--sp-7) 64px;
  min-width: 0;
}
.screen {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 1180px;
}
.screen-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.screen-head h1 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  color: var(--ink);
}
.screen-head p {
  color: var(--ink-2);
  font-size: 0.92rem;
  margin-top: 6px;
  max-width: 56ch;
}
.screen-head-actions {
  display: flex;
  gap: var(--sp-2);
  flex: none;
}

/* stat tiles */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.stat-tile {
  background: var(--gl-fill);
  border: 1px solid var(--gl-edge);
  border-radius: var(--r-3);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  box-shadow: var(--gl-shadow);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ink);
}
.stat-value.stat-value-sm {
  font-size: 1.05rem;
}
.stat-value small {
  font-size: 0.68rem;
  color: var(--ink-2);
  font-weight: 500;
}
.stat-sub {
  font-size: 0.78rem;
  color: var(--ink-2);
}
.stat-sub.is-good {
  color: var(--ok);
}

/* button icon sizing + two small button variants this app needs beyond the
   four primitives.css already ships (.btn, .btn-primary, .btn-ghost, .btn-glass) */
.btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
  min-height: 30px;
}
.btn-danger-ghost {
  background: color-mix(in srgb, var(--bad) 16%, transparent);
  color: var(--bad);
  border-color: transparent;
}
.btn-danger-ghost:hover {
  background: var(--bad);
  color: var(--on-accent);
  border-color: var(--bad);
}

/* band pill — reuses the system's ok/warn/bad hues (the same three a .state
   chip would use), but the label IS the distinguishing text already ("Lower
   pressure" / "Moderate pressure" / "Higher pressure"), so colour is never
   the only channel here either. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.pill-low {
  background: color-mix(in srgb, var(--ok) 20%, var(--surface));
  color: var(--ok);
}
.pill-moderate {
  background: color-mix(in srgb, var(--warn) 20%, var(--surface));
  color: var(--warn);
}
.pill-high {
  background: color-mix(in srgb, var(--bad) 20%, var(--surface));
  color: var(--bad);
}

/* generic glass panel */
.panel {
  background: var(--gl-fill);
  border: 1px solid var(--gl-edge);
  border-radius: var(--r-3);
  -webkit-backdrop-filter: var(--gl-blur);
  backdrop-filter: var(--gl-blur);
  box-shadow: var(--gl-shadow);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.panel-head h3 {
  font-family: var(--font-ui);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
}
.panel-head-sub {
  font-size: 0.78rem;
  color: var(--ink-2);
  margin-top: 2px;
}
.panel-link {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  min-height: var(--target-min);
}
.panel-link svg {
  width: 12px;
  height: 12px;
}
.panel-body {
  padding: var(--sp-5);
}

/* =============================================================================
   OVERVIEW SCREEN
   ============================================================================= */
.overview-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.recent-list {
  display: flex;
  flex-direction: column;
}
.recent-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  min-height: var(--target-min);
  transition: background var(--t-fast) var(--ease);
  color: inherit;
  font: inherit;
}
.recent-row:first-of-type {
  border-top: none;
}
.recent-row:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.recent-id {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink);
}
.recent-meta {
  font-size: 0.76rem;
  color: var(--ink-2);
  margin-top: 2px;
}
.recent-score {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.empty-note {
  padding: var(--sp-5);
  color: var(--ink-2);
  font-size: 0.86rem;
}
.empty-note--tight {
  padding: 6px 0;
}

.howit-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.howit-step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px dashed var(--line);
}
.howit-step:first-child {
  border-top: none;
  padding-top: 0;
}
.howit-num {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.82rem;
}
.howit-step b {
  font-size: 0.88rem;
  color: var(--ink);
}
.howit-step span {
  display: block;
  font-size: 0.79rem;
  color: var(--ink-2);
  margin-top: 2px;
}
.formula-box {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 11px 12px;
  overflow-x: auto;
  white-space: nowrap;
}
.howit-foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-2);
}

.crosses-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.crosses-col b {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: var(--font-mono);
  color: var(--ink-2);
  display: block;
  margin-bottom: var(--sp-2);
}
.crosses-col ul {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.crosses-col li {
  font-size: 0.81rem;
  color: var(--ink-2);
}

.spark-card .panel-body {
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
}
.spark-wrap {
  width: 100%;
}
.spark-wrap svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.spark-caption {
  font-size: 0.75rem;
  color: var(--ink-2);
  margin-top: var(--sp-2);
}

/* =============================================================================
   EVALUATIONS SCREEN
   ============================================================================= */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.search-field {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}
.search-field svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--ink-3);
}
.search-field input {
  width: 100%;
  min-height: var(--target-min);
  padding: 8px 12px 8px 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
}
.search-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
.chip-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
/* band-filter chips — mono pills; the active one fills with accent-soft so the
   current filter is unmistakable (primitives' base .chip gives no active state) */
.chip-row .chip {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  min-height: 30px;
  transition:
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.chip-row .chip:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--ink);
}
.chip-row .chip.is-active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 34%, var(--surface));
  color: var(--accent);
}
.toolbar-count {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--ink-2);
  font-family: var(--font-mono);
}

.table-wrap {
  overflow-x: auto;
}
table.eval-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.eval-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  padding: 10px var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.eval-table tbody td {
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
  vertical-align: middle;
  color: var(--ink);
}
.eval-table tbody tr {
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.eval-table tbody tr:hover {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.eval-table tbody tr:last-child td {
  border-bottom: none;
}
.eval-table td.mono,
.eval-table th.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.eval-table td.id {
  font-family: var(--font-mono);
  font-weight: 600;
}
.row-time {
  color: var(--ink-2);
}

/* =============================================================================
   SETTINGS SCREEN
   ============================================================================= */
.settings-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 760px;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
}
.setting-row:first-child {
  border-top: none;
  padding-top: 0;
}
.setting-row-l {
  min-width: 0;
}
.setting-row-l b {
  font-size: 0.9rem;
  display: block;
  color: var(--ink);
}
.setting-row-l span {
  font-size: 0.79rem;
  color: var(--ink-2);
  display: block;
  margin-top: 3px;
  max-width: 44ch;
}
.setting-row-r {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.fp-chip {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 7px 11px;
  border-radius: var(--r-1);
  color: var(--ink-2);
}

.segmented {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px;
  background: var(--surface);
  gap: 2px;
}
.segmented button {
  font-size: 0.78rem;
  min-height: 26px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  border: none;
}
.segmented button.is-active {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
  font-weight: 600;
}

.switch {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--raised);
  border: 1px solid var(--line);
  flex: none;
  transition: background var(--t-base) var(--ease);
}
.switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink-2);
  transition:
    transform var(--t-base) var(--ease),
    background var(--t-base) var(--ease);
}
.switch.is-on {
  background: color-mix(in srgb, var(--accent) 30%, var(--surface));
  border-color: transparent;
}
.switch.is-on::after {
  transform: translateX(18px);
  background: var(--accent);
}

.model-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2px;
}
.model-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 10px 0;
  border-top: 1px dashed var(--line);
  font-size: 0.83rem;
}
.model-row:first-child {
  border-top: none;
  padding-top: 0;
}
.model-row b {
  font-weight: 500;
  color: var(--ink-2);
}
.model-row span {
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: 0.82rem;
  text-align: right;
}

/* =============================================================================
   SCRIM + DRAWERS
   ============================================================================= */
.scrim {
  position: fixed;
  inset: 0;
  background: oklch(0% 0 0 / 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease);
  z-index: 60;
}
.scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 440px;
  max-width: 92vw;
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease);
  z-index: 70;
  display: flex;
  flex-direction: column;
}
.drawer.is-open {
  transform: translateX(0);
}
.drawer-wide {
  width: 540px;
}
.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.drawer-head h2 {
  font-size: 1.18rem;
  color: var(--ink);
}
.drawer-head-sub {
  font-size: 0.79rem;
  color: var(--ink-2);
  margin-top: 5px;
}
.drawer-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--ink-2);
}
.drawer-close:hover {
  color: var(--ink);
  border-color: var(--accent);
}
.drawer-close svg {
  width: 14px;
  height: 14px;
}
.drawer-body {
  padding: var(--sp-5) var(--sp-6) var(--sp-7);
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.drawer-foot {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.field-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-wrap.full {
  grid-column: 1 / -1;
}
.field-wrap label {
  font-size: 0.78rem;
  color: var(--ink-2);
  font-weight: 500;
}
.field-wrap .input-wrap {
  position: relative;
}
.field-wrap .input-wrap input {
  font-variant-numeric: tabular-nums;
  padding-right: 44px;
}
.field-wrap .suffix {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--ink-2);
  pointer-events: none;
  font-family: var(--font-mono);
}
.field-wrap.has-error input {
  border-color: var(--bad) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent);
}

.consent {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
}
.consent input {
  margin-top: 3px;
  accent-color: var(--accent);
  flex: none;
  width: 16px;
  height: 16px;
}
.consent label {
  font-size: 0.79rem;
  color: var(--ink-2);
}

.form-alert {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  padding: 11px 13px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--bad) 16%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--surface));
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.45;
}
.form-alert svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
  color: var(--bad);
}

.result-banner {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.result-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.result-banner-score {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
}
.result-banner-unit {
  font-size: 0.6em;
  color: var(--ink-2);
  font-weight: 500;
}
.result-copy {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.85rem;
}
.result-view {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* gauge */
.gauge-shell {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
.gauge-shell svg {
  width: 100%;
  height: auto;
}
.gauge-readout {
  position: absolute;
  left: 50%;
  top: 63%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.gauge-score {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: block;
  color: var(--ink);
}
.gauge-unit {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-2);
}
.gauge-caption {
  text-align: center;
  font-size: 0.74rem;
  color: var(--ink-2);
  margin-top: var(--sp-1);
}

.breakdown-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.breakdown-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: 0.82rem;
}
.breakdown-top b {
  font-weight: 600;
  color: var(--ink);
}
.breakdown-top .term {
  font-family: var(--font-mono);
  color: var(--ink-2);
  font-size: 0.74rem;
}
.breakdown-top .val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.breakdown-top-left {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.breakdown-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.breakdown-bar > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  font-style: normal;
}

.receipt-box {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.receipt-row {
  display: flex;
  gap: var(--sp-3);
  font-size: 0.8rem;
}
.receipt-row svg {
  width: 14px;
  height: 14px;
  color: var(--accent-2);
  flex: none;
  margin-top: 2px;
}
.receipt-row b {
  display: block;
  font-size: 0.78rem;
  color: var(--ink);
}
.receipt-row span {
  color: var(--ink-2);
  font-size: 0.78rem;
}

.proc-status {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.state-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--ink-3);
}
.state-dot.is-info {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: dot-pulse 1.3s ease-in-out infinite;
}
.state-dot.is-ok {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.state-dot.is-bad {
  background: var(--bad);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent);
}
@keyframes dot-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.proc-phase {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}

.stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.step-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px dashed var(--line);
}
.step-row:first-child {
  border-top: none;
  padding-top: 0;
}
.step-row b {
  font-size: 0.86rem;
  display: block;
  color: var(--ink-2);
  transition: color var(--t-base) var(--ease);
}
.step-row span {
  font-size: 0.78rem;
  color: var(--ink-2);
  display: block;
  margin-top: 2px;
}
.step-row.is-active b,
.step-row.is-done b {
  color: var(--ink);
}
.step-marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  flex: none;
  font-size: 11px;
  line-height: 1;
  color: transparent;
  transition:
    border-color var(--t-base) var(--ease),
    background var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}
.step-row.is-active .step-marker {
  border-color: var(--accent);
  border-top-color: transparent;
  animation: step-spin 0.7s linear infinite;
}
.step-row.is-done .step-marker {
  border-color: var(--ok);
  background: var(--ok);
  color: var(--on-accent);
  animation: none;
}
.step-row.is-done .step-marker::after {
  content: "✓";
}
@keyframes step-spin {
  to {
    transform: rotate(360deg);
  }
}

.result-banner.is-danger {
  border-color: color-mix(in srgb, var(--bad) 45%, var(--line));
  background: color-mix(in srgb, var(--bad) 14%, var(--surface));
}

.app-foot {
  margin-top: 4px;
  padding: var(--sp-4) 2px var(--sp-2);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--ink-2);
}
.eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  min-height: 24px;
}
.eco-badge:hover {
  color: var(--ink);
  border-color: var(--accent);
}
.eco-badge svg {
  width: 13px;
  height: 13px;
}

/* =============================================================================
   COMMAND PALETTE
   ============================================================================= */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s;
}
.cmdk-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.cmdk-panel {
  width: 100%;
  max-width: 560px;
  max-height: 64vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-cmdk);
  transform: translateY(-8px) scale(0.98);
  transition: transform 0.16s;
}
.cmdk-overlay.is-open .cmdk-panel {
  transform: translateY(0) scale(1);
}
.cmdk-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.cmdk-input-row svg {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  flex: none;
}
.cmdk-input-row input {
  flex: 1;
  border: none;
  background: none;
  font-size: 0.98rem;
  color: var(--ink);
  outline: none;
  font: inherit;
}
.cmdk-input-row kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-2);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
}
.cmdk-list {
  overflow-y: auto;
  padding: var(--sp-2);
}
.cmdk-group-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 10px 5px;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  padding: 10px 11px;
  min-height: var(--target-min);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--ink-2);
  font-size: 0.88rem;
  border: none;
}
.cmdk-item svg {
  width: 15px;
  height: 15px;
  color: var(--ink-3);
  flex: none;
}
.cmdk-item.is-highlighted {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--ink);
}
.cmdk-item.is-highlighted svg {
  color: var(--accent);
}
.cmdk-empty {
  padding: 26px 16px;
  text-align: center;
  color: var(--ink-2);
  font-size: 0.85rem;
}

/* =============================================================================
   TOAST
   ============================================================================= */
.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 90;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-cmdk);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.toast.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex: none;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 880px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "main";
  }
  .sidebar {
    position: fixed;
    inset: var(--topbar-h, 0px) auto 0 0;
    width: 280px;
    height: auto;
    z-index: 75;
    transform: translateX(-104%);
    transition: transform 0.22s;
  }
  .sidebar.is-open {
    transform: translateX(0);
  }
  /* Keep the app bar (and its hamburger) above the open drawer and the scrim,
     so a second tap on the hamburger closes the menu instead of landing on
     the drawer's brand link and reloading the page. */
  .sidebar.is-open ~ .topbar {
    z-index: 76;
  }
  .sidebar-toggle {
    display: flex;
  }
  /* Grid items default to min-width:auto, so the topbar's and the overview
     panels' min-content widths would widen the single column past the
     viewport — and body{overflow-x:hidden} would then clip the avatar,
     "New evaluation" and the Settings controls off-screen. */
  .topbar,
  .overview-grid > .panel {
    min-width: 0;
  }
  .main {
    padding: var(--sp-5) var(--sp-4) 56px;
  }
  .overview-grid {
    grid-template-columns: 1fr;
  }
  .stat-row {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .crosses-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}
/* =============================================================================
   SMALL LAYOUT UTILITIES — spacing/typography variants that would otherwise be
   inline style="" attributes, which the app's CSP (style-src 'self', no
   'unsafe-inline') silently drops.
   ============================================================================= */
.panel-body--flush {
  padding-bottom: 0;
}
.formula-box--flush {
  margin-top: 0;
}
.panel-lede {
  color: var(--ink-2);
  font-size: 0.85rem;
  max-width: 60ch;
}
.example-row {
  margin-top: var(--sp-4);
}
.consent.u-mt-4 {
  margin-top: var(--sp-4);
}
.breakdown-panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (max-width: 520px) {
  .stat-row {
    grid-template-columns: 1fr;
  }
  .drawer {
    width: 100vw;
    max-width: 100vw;
  }
  .topbar {
    padding: var(--sp-3) var(--sp-4);
  }
  .main {
    padding: var(--sp-4) var(--sp-3) 48px;
  }
  /* The workspace crumb does not fit beside the topbar controls on phones;
     keep only the current-screen crumb so it is not overlapped. */
  .crumbs > span:first-child,
  .crumbs > svg {
    display: none;
  }
  /* Two head CTAs side by side outgrow a phone viewport; let them wrap. */
  .screen-head-actions {
    flex: 1 1 auto;
    flex-wrap: wrap;
  }
}