/* ── HMI Foundation tokens ─────────────────────────────────
   Names mirror the HMI Foundation Semantic collection
   (Figma: HMI Foundation → Start here). Components below use
   these tokens only. Values are resolved per brand + mode.
   Radii are HMI values × 0.75 for desktop viewing distance;
   type sizes are the hmi/* scale × ~0.6.                    */
:root {
  --spacing-component-xs: 4px;
  --spacing-component-sm: 8px;
  --spacing-component-md: 12px;
  --spacing-component-lg: 16px;
  --spacing-component-xl: 24px;
  --spacing-component-xxl: 32px;
  --spacing-layout-sm: 24px;
  --spacing-layout-md: 32px;
  --spacing-layout-lg: 40px;
  --spacing-layout-xl: 48px;

  /* hmi/display/3, hmi/body/1–3, hmi/label/1, hmi/label/3 */
  --hmi-display-3: 24px/30px;
  --hmi-body-1: 18px/24px;
  --hmi-body-2: 16px/22px;
  --hmi-body-3: 14.5px/20px;
  --hmi-label-1: 14px/18px;
  --hmi-label-3: 11.5px/16px;
  --tracking-body: 0.01em;
  --tracking-label: 0.05em;
  --tracking-label-3: 0.067em;

  --radius-full: 999px;
  --opacity-state-disabled-content: 0.38;
  --state-hover: 8%;
  --state-pressed: 20%;

  --font-fallback: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Semantic base — neutral grays + Inter. Used for brands without
   an HMI extension yet (Porsche, Bentley, Lamborghini, Škoda,
   SEAT, CUPRA). Light values from Figma; dark derived from the
   same HCT neutral ramp. */
:root[data-hmi="base"] {
  --color-surface-container-high: #e8e8e8;
  --color-surface-container-highest: #e2e2e2;
  --color-floating-base-top: #f9f9f9;
  --color-floating-base-bottom: #f9f9f9;
  --color-floating-container: #eeeeee;
  --color-floating-container-low-top: #f3f3f3;
  --color-floating-container-low-bottom: #f3f3f3;
  --color-system-bar-status-top: #f3f3f3;
  --color-system-bar-status-bottom: #f3f3f3;
  --color-text-primary: #1b1b1b;
  --color-text-secondary: #5e5e5e;
  --color-text-accent: #1b1b1b;
  --color-border-default: #c6c6c6;
  --color-border-subtle: #e2e2e2;
  --color-border-depth: #ffffff00;
  --color-border-depth-highlight: #ffffff00;
  --color-brand-primary-top: #1b1b1b;
  --color-brand-primary-bottom: #1b1b1b;
  --color-button-on-primary: #ffffff;
  --color-brand-secondary-container: #e2e2e2;
  --color-brand-on-secondary-container: #1b1b1b;
  --blur-floating: 0px;
  --blur-system-bar: 0px;
  --radius-card: 18px;
  --radius-button: var(--radius-full);
  --radius-sm: 4px;
  --radius-app-icon: 9px;
  --type-family-display: var(--font-fallback);
  --type-family-body: var(--font-fallback);
  --type-weight-heading: 400;
  --type-weight-label: 400;
  --type-weight-emphasized-label: 600;
}
:root[data-hmi="base"][data-mode="dark"] {
  --color-surface-container-high: #2a2a2a;
  --color-surface-container-highest: #353535;
  --color-floating-base-top: #131313;
  --color-floating-base-bottom: #131313;
  --color-floating-container: #1f1f1f;
  --color-floating-container-low-top: #1b1b1b;
  --color-floating-container-low-bottom: #1b1b1b;
  --color-system-bar-status-top: #1b1b1b;
  --color-system-bar-status-bottom: #1b1b1b;
  --color-text-primary: #e2e2e2;
  --color-text-secondary: #ababab;
  --color-text-accent: #e2e2e2;
  --color-border-default: #474747;
  --color-border-subtle: #303030;
  --color-brand-primary-top: #e2e2e2;
  --color-brand-primary-bottom: #e2e2e2;
  --color-button-on-primary: #1b1b1b;
  --color-brand-secondary-container: #474747;
  --color-brand-on-secondary-container: #e2e2e2;
}

/* VW Group — glass surfaces, gradient primary */
:root[data-hmi="vwg"] {
  --color-surface-container-high: #dbebf2;
  --color-surface-container-highest: #d6e5ed;
  --color-floating-base-top: #ffffffd6;
  --color-floating-base-bottom: #e1f0f8d6;
  --color-floating-container: #e1f0f8d6;
  --color-floating-container-low-top: #ffffffd6;
  --color-floating-container-low-bottom: #e7f6fed6;
  --color-system-bar-status-top: #e7f6feb8;
  --color-system-bar-status-bottom: #e7f6feb8;
  --color-text-primary: #0f1d23;
  --color-text-secondary: #526167;
  --color-text-accent: #008c82;
  --color-border-default: #bac9d1;
  --color-border-subtle: #d6e5ed;
  --color-border-depth: #0f1d2324;
  --color-border-depth-highlight: #ffffff00;
  --color-brand-primary-top: #113441;
  --color-brand-primary-bottom: #002733;
  --color-button-on-primary: #ffffff;
  --color-brand-secondary-container: #8bf4e8;
  --color-brand-on-secondary-container: #0f1d23;
  --blur-floating: 16px;
  --blur-system-bar: 40px;
  --radius-card: 18px;
  --radius-button: 18px;
  --radius-sm: 4px;
  --radius-app-icon: 9px;
  --type-family-display: "The Group HEAD Pro", var(--font-fallback);
  --type-family-body: "The Group TEXT Pro", var(--font-fallback);
  --type-weight-heading: 400;
  --type-weight-label: 400;
  --type-weight-emphasized-label: 500;
}
:root[data-hmi="vwg"][data-mode="dark"] {
  --color-surface-container-high: #1e2c32;
  --color-surface-container-highest: #29373d;
  --color-floating-base-top: #142127d6;
  --color-floating-base-bottom: #031015d6;
  --color-floating-container: #142127d6;
  --color-floating-container-low-top: #3b494fd6;
  --color-floating-container-low-bottom: #1e2c32d6;
  --color-system-bar-status-top: #0f1d23b8;
  --color-system-bar-status-bottom: #0f1d23b8;
  --color-text-primary: #d6e5ed;
  --color-text-secondary: #9faeb5;
  --color-text-accent: #c2fe06;
  --color-border-default: #1e333c;
  --color-border-subtle: #354a53;
  --color-border-depth: #ffffff24;
  --color-brand-primary-top: #aaccdb;
  --color-brand-primary-bottom: #7596a4;
  --color-button-on-primary: #113441;
  --color-brand-secondary-container: #00504a;
  --color-brand-on-secondary-container: #d6e5ed;
}

/* Volkswagen */
:root[data-hmi="vw"] {
  --color-surface-container-high: #e4e7f8;
  --color-surface-container-highest: #dfe2f2;
  --color-floating-base-top: #faf8ff;
  --color-floating-base-bottom: #faf8ff;
  --color-floating-container: #eaedfe;
  --color-floating-container-low-top: #f2f3ff;
  --color-floating-container-low-bottom: #f2f3ff;
  --color-system-bar-status-top: #f2f3ff;
  --color-system-bar-status-bottom: #f2f3ff;
  --color-text-primary: #171b27;
  --color-text-secondary: #5a5e6c;
  --color-text-accent: #475d92;
  --color-border-default: #c0c6dc;
  --color-border-subtle: #dce2f9;
  --color-border-depth: #ffffff00;
  --color-border-depth-highlight: #ffffff00;
  --color-brand-primary-top: #475d92;
  --color-brand-primary-bottom: #475d92;
  --color-button-on-primary: #ffffff;
  --color-brand-secondary-container: #c5e7ff;
  --color-brand-on-secondary-container: #171b27;
  --blur-floating: 0px;
  --blur-system-bar: 0px;
  --radius-card: 18px;
  --radius-button: 24px;
  --radius-sm: 4px;
  --radius-app-icon: 13px;
  --type-family-display: "VW Head", var(--font-fallback);
  --type-family-body: "VW Text", var(--font-fallback);
  --type-weight-heading: 700;
  --type-weight-label: 700;
  --type-weight-emphasized-label: 600;
}
:root[data-hmi="vw"][data-mode="dark"] {
  --color-surface-container-high: #252a36;
  --color-surface-container-highest: #303441;
  --color-floating-base-top: #0f131e;
  --color-floating-base-bottom: #0f131e;
  --color-floating-container: #1b1f2b;
  --color-floating-container-low-top: #171b27;
  --color-floating-container-low-bottom: #171b27;
  --color-system-bar-status-top: #171b27;
  --color-system-bar-status-bottom: #171b27;
  --color-text-primary: #dfe2f2;
  --color-text-secondary: #a7abba;
  --color-text-accent: #b0c6ff;
  --color-border-default: #293042;
  --color-border-subtle: #404659;
  --color-brand-primary-top: #1db7f7;
  --color-brand-primary-bottom: #1db7f7;
  --color-button-on-primary: #001e2d;
  --color-brand-secondary-container: #2e4578;
  --color-brand-on-secondary-container: #dfe2f2;
}

/* Audi — dark is Audi Black Panel from Figma. The file has no
   Audi light mode, so light uses the neutral base colors with
   Audi's shape, type and red accent. */
:root[data-hmi="audi"] {
  --color-surface-container-high: #e8e8e8;
  --color-surface-container-highest: #e2e2e2;
  --color-floating-base-top: #f9f9f9;
  --color-floating-base-bottom: #f9f9f9;
  --color-floating-container: #eeeeee;
  --color-floating-container-low-top: #f3f3f3;
  --color-floating-container-low-bottom: #f3f3f3;
  --color-system-bar-status-top: #f3f3f3;
  --color-system-bar-status-bottom: #f3f3f3;
  --color-text-primary: #000000;
  --color-text-secondary: #5e5e5e;
  --color-text-accent: #c8102e;
  --color-border-default: #c6c6c6;
  --color-border-subtle: #e2e2e2;
  --color-border-depth: #ffffff00;
  --color-border-depth-highlight: #ffffff00;
  --color-brand-primary-top: #000000;
  --color-brand-primary-bottom: #000000;
  --color-button-on-primary: #ffffff;
  --color-brand-secondary-container: #e2e2e2;
  --color-brand-on-secondary-container: #000000;
  --blur-floating: 0px;
  --blur-system-bar: 0px;
  --radius-card: 0px;
  --radius-button: 0px;
  --radius-sm: 0px;
  --radius-app-icon: 3px;
  --type-family-display: "Audi Type Variable", "Audi Type", var(--font-fallback);
  --type-family-body: "Audi Type Variable", "Audi Type", var(--font-fallback);
  --type-weight-heading: 400;
  --type-weight-label: 400;
  --type-weight-emphasized-label: 700;
}
:root[data-hmi="audi"][data-mode="dark"] {
  --color-surface-container-high: #1b1b1b;
  --color-surface-container-highest: #2a2a2a;
  --color-floating-base-top: #1b1b1b;
  --color-floating-base-bottom: #000000;
  --color-floating-container: #131313;
  --color-floating-container-low-top: #1f1f1f;
  --color-floating-container-low-bottom: #000000;
  --color-system-bar-status-top: #2a2a2a;
  --color-system-bar-status-bottom: #000000;
  --color-text-primary: #ffffff;
  --color-text-secondary: #919191;
  --color-text-accent: #e12f3c;
  --color-border-default: #474747;
  --color-border-subtle: #353535;
  --color-border-depth: #474747;
  --color-border-depth-highlight: #5e5e5e;
  --color-brand-primary-top: #ffffff;
  --color-brand-primary-bottom: #ffffff;
  --color-button-on-primary: #000000;
  --color-brand-secondary-container: #303030;
  --color-brand-on-secondary-container: #ffffff;
}

/* Status colors: positive / destructive from Semantic base,
   caution from the same HCT tone (40 light, 80 dark). */
:root {
  --color-status-high: #b4271f;
  --color-status-medium: #8a5100;
  --color-status-low: #296b2a;
}
:root[data-mode="dark"] {
  --color-status-high: #ffb4ab;
  --color-status-medium: #ffb95c;
  --color-status-low: #93d68a;
}
:root {
  --color-status-high-container: color-mix(in srgb, var(--color-status-high) 14%, transparent);
  --color-status-medium-container: color-mix(in srgb, var(--color-status-medium) 14%, transparent);
  --color-status-low-container: color-mix(in srgb, var(--color-status-low) 14%, transparent);
  --color-state-focus-ring: var(--color-text-accent);
  --size-focus-ring-width: 3px;
  --depth-edge-highlight: inset 0 1px 0 var(--color-border-depth-highlight);
  --elevation-overlay: 0 8px 16px #00000066, 0 24px 64px 8px #00000066;
}

/* ── Base ──────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: light; }
html[data-mode="dark"] { color-scheme: dark; }
body {
  background: var(--color-surface-container-high);
  color: var(--color-text-primary);
  font: 400 var(--hmi-body-3) var(--type-family-body);
  letter-spacing: var(--tracking-body);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}
.icon {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  display: inline-flex;
  white-space: nowrap;
  user-select: none;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
}
/* Rotary-style focus: inside stroke, per AAOS car-ui-lib */
:focus-visible {
  outline: var(--size-focus-ring-width) solid var(--color-state-focus-ring);
  outline-offset: calc(var(--size-focus-ring-width) * -1);
}
.state-layer { position: relative; }
.state-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.state-layer:hover::after { opacity: 0.08; }
.state-layer:active::after { opacity: 0.2; }

/* ── System status bar ────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--spacing-component-lg);
  padding: 0 var(--spacing-layout-sm);
  height: 64px;
  background: linear-gradient(var(--color-system-bar-status-top), var(--color-system-bar-status-bottom));
  backdrop-filter: blur(var(--blur-system-bar));
  -webkit-backdrop-filter: blur(var(--blur-system-bar));
  border-bottom: 1px solid var(--color-border-depth);
}
.topbar-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-md);
  flex-shrink: 0;
  min-width: 0;
}
.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-app-icon);
  background: linear-gradient(var(--color-brand-primary-top), var(--color-brand-primary-bottom));
  box-shadow: var(--depth-edge-highlight);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-button-on-primary);
  font: var(--type-weight-emphasized-label) 13px/1 var(--type-family-display);
  letter-spacing: 0.02em;
  transition: background 0.3s, border-radius 0.3s;
}
/* Brand logo from the HMI Foundation brand-logo component. Single-color
   SVGs used as a mask so the mark takes the theme's ink in light and dark. */
.brand-logo {
  height: 36px;
  max-width: 160px;
  flex-shrink: 0;
  background: var(--color-text-primary);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.brand-logo[hidden], .logo-mark[hidden] { display: none; }
.topbar-divider {
  width: 1px;
  height: 28px;
  background: var(--color-border-default);
  flex-shrink: 0;
}
.topbar-title {
  font: var(--type-weight-heading) var(--hmi-body-1) var(--type-family-display);
  letter-spacing: 0;
  white-space: nowrap;
}
.topbar-title span { color: var(--color-text-secondary); }
.topbar-selectors {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-sm);
}
.select-wrap { position: relative; display: inline-flex; }
/* Keep the switchers on screen as the bar narrows: drop subtitle, tab labels, then title */
@media (max-width: 1100px) { .topbar-title span { display: none; } }
@media (max-width: 1240px) { .app-nav .tab-label { display: none; } .topbar .app-nav .tab { padding: 0 var(--spacing-component-md); } }
@media (max-width: 900px) { .topbar-title, .topbar-divider { display: none; } }
/* Phones: the view tabs drop to their own row under the logo and switchers */
@media (max-width: 720px) {
  header.topbar { flex-wrap: wrap; height: auto; padding-top: var(--spacing-component-sm); padding-bottom: var(--spacing-component-sm); }
  .topbar-selectors { margin-left: auto; }
  .topbar .app-nav { order: 3; width: 100%; justify-content: center; }
}
.select-wrap .icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--color-text-secondary);
  pointer-events: none;
}
select {
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  height: 40px;
  padding: 0 38px 0 var(--spacing-component-lg);
  border: 1px solid var(--color-border-depth);
  border-radius: var(--radius-button);
  background: var(--color-floating-container);
  color: var(--color-text-primary);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background 0.3s, border-radius 0.3s;
}
select:disabled { opacity: var(--opacity-state-disabled-content); cursor: default; }
.icon-button {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
}
.icon-button { text-decoration: none; }

/* ── Page layout ──────────────────────────────────────── */
.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--spacing-layout-sm) var(--spacing-layout-sm) 0;
}

/* ── Search field ─────────────────────────────────────── */
/* Extra room above and below the search field so it stands out */
.search-wrap { position: relative; margin-top: var(--spacing-layout-sm); }

/* Category filter under the search field */
.category-filter[hidden] { display: none; }
.category-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-component-sm);
  margin-top: var(--spacing-component-md);
}
.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--spacing-component-md) 0 var(--spacing-component-sm);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-button);
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
  white-space: nowrap;
}
.category-chip .check { width: 20px; height: 20px; }
.category-chip .check::after { font-size: 16px; }
.category-chip > .icon { font-size: 18px; color: var(--color-text-secondary); }
.category-chip.checked { border-color: var(--color-text-accent); background: var(--color-brand-secondary-container); }
.category-chip .count { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); font-weight: 400; }
.category-filter .btn-text { height: 36px; padding: 0 var(--spacing-component-md); }
.search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
  z-index: 1;
}
.search-input {
  width: 100%;
  height: 56px;
  font: 400 var(--hmi-body-2) var(--type-family-body);
  letter-spacing: var(--tracking-body);
  padding: 0 56px 0 56px;
  border: 1px solid var(--color-border-depth);
  border-radius: var(--radius-button);
  background: linear-gradient(var(--color-floating-container-low-top), var(--color-floating-container-low-bottom));
  backdrop-filter: blur(var(--blur-floating));
  -webkit-backdrop-filter: blur(var(--blur-floating));
  box-shadow: var(--depth-edge-highlight);
  color: var(--color-text-primary);
  transition: border-radius 0.3s;
}
.search-input::-webkit-search-cancel-button { display: none; }
.search-input:focus { outline: none; }
.search-input:focus-visible {
  outline: var(--size-focus-ring-width) solid var(--color-state-focus-ring);
  outline-offset: calc(var(--size-focus-ring-width) * -1);
}
.search-input::placeholder { color: var(--color-text-secondary); }
.search-input { padding-right: 152px; }
.search-clear {
  position: absolute;
  right: 104px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  display: none;
}
.search-submit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(var(--color-brand-primary-top), var(--color-brand-primary-bottom));
  color: var(--color-button-on-primary);
  border-radius: var(--radius-button);
}
.search-submit:disabled { opacity: var(--opacity-state-disabled-content); cursor: default; }
.search-filters {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
}
.search-filters.active { color: var(--color-text-accent); background: var(--color-brand-secondary-container); }
.filter-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: linear-gradient(var(--color-brand-primary-top), var(--color-brand-primary-bottom));
  color: var(--color-button-on-primary);
  font: 600 11px/16px var(--type-family-body);
  text-align: center;
}
.filter-badge[hidden] { display: none; }

/* Results header: stats left, export top right */
.results-head { display: flex; align-items: flex-start; gap: var(--spacing-component-lg); }
.results-head .stats-row { flex: 1; min-width: 0; }
.results-head > .btn-primary { margin-top: var(--spacing-component-sm); flex-shrink: 0; }  /* centred on the stats chips */
.results-head > .btn-primary[hidden] { display: none; }
@media (max-width: 720px) { .results-head { flex-direction: column-reverse; gap: 0; } }

/* General research vs topic research */
.result-kind {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-lg);
  flex-wrap: wrap;
  margin-top: var(--spacing-layout-md);
  padding: var(--spacing-component-md) var(--spacing-component-lg);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
}
.result-kind[hidden] { display: none; }
.result-kind.topic {
  border-color: transparent;
  border-left: 6px solid var(--color-brand-primary-top);
  background: var(--color-floating-container);
}
.result-kind-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 var(--spacing-component-md);
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  font: var(--type-weight-emphasized-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.result-kind-tag .icon { font-size: 18px; }
.result-kind.topic .result-kind-tag {
  border-color: transparent;
  background: linear-gradient(var(--color-brand-primary-top), var(--color-brand-primary-bottom));
  color: var(--color-button-on-primary);
}
.result-kind-main { flex: 1; min-width: 200px; }
.result-kind-title { font: var(--type-weight-heading) var(--hmi-body-1) var(--type-family-display); }
.result-kind-desc { color: var(--color-text-secondary); margin-top: 2px; }

/* Query suggestion chips */
.suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--spacing-component-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text-primary);
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}
.suggestion-chip .icon { font-size: 18px; color: var(--color-text-accent); }
.stats-row .btn-text { height: 32px; padding: 0 var(--spacing-component-md); gap: 6px; }
.stats-row .btn-text .icon { font-size: 18px; }
.scope-label {
  align-self: center;
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-secondary);
}

/* Live research progress */
.progress-card {
  margin-bottom: var(--spacing-component-lg);
  padding: var(--spacing-component-lg) var(--spacing-component-xl);
  border: 1px solid var(--color-border-depth);
  border-radius: var(--radius-card);
  background: linear-gradient(var(--color-floating-base-top), var(--color-floating-base-bottom));
  backdrop-filter: blur(var(--blur-floating));
  -webkit-backdrop-filter: blur(var(--blur-floating));
}
.progress-card[hidden] { display: none; }
.progress-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-md);
}
.progress-title {
  flex: 1;
  font: var(--type-weight-heading) var(--hmi-body-1) var(--type-family-display);
}
.progress-log {
  list-style: none;
  margin-top: var(--spacing-component-md);
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-component-xs);
  color: var(--color-text-secondary);
  max-height: 180px;
  overflow-y: auto;
}
.progress-log li { display: flex; align-items: center; gap: var(--spacing-component-sm); }
.progress-log .icon { font-size: 16px; color: var(--color-text-accent); }

/* ── Stats row ────────────────────────────────────────── */
.stats-row {
  display: flex;
  gap: var(--spacing-component-sm);
  padding: var(--spacing-component-lg) 0;
  flex-wrap: wrap;
}
.stat-chip {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-sm);
  height: 32px;
  padding: 0 var(--spacing-component-md);
  background: var(--color-floating-container);
  border: 1px solid var(--color-border-depth);
  border-radius: var(--radius-button);
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.stat-chip strong {
  color: var(--color-text-primary);
  font-weight: var(--type-weight-emphasized-label);
}
.stat-chip .icon { font-size: 18px; color: var(--color-text-accent); }

/* ── Filter row: tab-bar + primary button ─────────────── */
.filter-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-lg);
  padding-bottom: var(--spacing-layout-sm);
  flex-wrap: wrap;
}
.tab-bar {
  display: inline-flex;
  gap: var(--spacing-component-xs);
  padding: var(--spacing-component-xs);
  background: var(--color-floating-container);
  border: 1px solid var(--color-border-depth);
  border-radius: var(--radius-button);
  backdrop-filter: blur(var(--blur-floating));
  -webkit-backdrop-filter: blur(var(--blur-floating));
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-component-sm);
  height: 40px;
  padding: 0 var(--spacing-component-xl);
  border: none;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text-primary);
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.tab.active {
  background: var(--color-brand-secondary-container);
  color: var(--color-brand-on-secondary-container);
}
.tab-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.tab-dot.high   { background: var(--color-status-high); }
.tab-dot.medium { background: var(--color-status-medium); }
.tab-dot.low    { background: var(--color-status-low); }
.filter-spacer { flex: 1; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-component-sm);
  height: 48px;
  padding: 0 var(--spacing-component-xl);
  border: none;
  border-radius: var(--radius-button);
  background: linear-gradient(var(--color-brand-primary-top), var(--color-brand-primary-bottom));
  box-shadow: var(--depth-edge-highlight);
  color: var(--color-button-on-primary);
  font: var(--type-weight-emphasized-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
  white-space: nowrap;
  transition: border-radius 0.3s;
}
.btn-primary .icon { font-size: 20px; }
.btn-primary:disabled {
  background: color-mix(in srgb, var(--color-text-primary) 12%, transparent);
  color: color-mix(in srgb, var(--color-text-primary) 38%, transparent);
  cursor: not-allowed;
}
.btn-primary:disabled::after { display: none; }
.btn-text {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--spacing-component-xl);
  border: none;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text-primary);
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}

/* ── Findings ─────────────────────────────────────────── */
.findings-main { padding-bottom: 80px; }
.theme-group {
  margin-bottom: var(--spacing-component-lg);
  border: 1px solid var(--color-border-depth);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: linear-gradient(var(--color-floating-base-top), var(--color-floating-base-bottom));
  backdrop-filter: blur(var(--blur-floating));
  -webkit-backdrop-filter: blur(var(--blur-floating));
  box-shadow: var(--depth-edge-highlight);
  transition: border-radius 0.3s;
}
.theme-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-lg);
  padding: var(--spacing-component-lg) var(--spacing-component-xl);
  cursor: pointer;
  user-select: none;
}
.theme-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-app-icon);
  background: var(--color-brand-secondary-container);
  color: var(--color-brand-on-secondary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s, border-radius 0.3s;
}
.theme-info { flex: 1; min-width: 0; }
.theme-name {
  font: var(--type-weight-heading) var(--hmi-display-3) var(--type-family-display);
  letter-spacing: 0;
}
.theme-desc {
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.theme-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-md);
  flex-shrink: 0;
}
.theme-count {
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.theme-chevron {
  color: var(--color-text-secondary);
  transition: transform 0.2s;
}
.theme-group.collapsed .theme-chevron { transform: rotate(-90deg); }
.theme-body { padding: 0 var(--spacing-component-sm) var(--spacing-component-sm); }
.theme-group.collapsed .theme-body { display: none; }

/* list-item */
.finding-card {
  border-top: 1px solid var(--color-border-subtle);
}
.finding-card-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-lg);
  padding: var(--spacing-component-lg);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.finding-rank {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-floating-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--type-weight-emphasized-label) var(--hmi-label-1) var(--type-family-body);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.finding-title-wrap { flex: 1; min-width: 0; }
.finding-title {
  font: 400 var(--hmi-body-2) var(--type-family-body);
  letter-spacing: var(--tracking-body);
}
.finding-meta-line {
  margin-top: var(--spacing-component-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-component-sm);
  flex-wrap: wrap;
}
.sev-badge, .trend-badge, .category-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-component-xs);
  height: 22px;
  padding: 0 var(--spacing-component-sm);
  border-radius: var(--radius-sm);
  font: var(--type-weight-emphasized-label) var(--hmi-label-3) var(--type-family-body);
  letter-spacing: var(--tracking-label-3);
  white-space: nowrap;
}
.sev-badge { text-transform: uppercase; }
.trend-badge .icon, .category-badge .icon { font-size: 16px; }
.category-badge { background: var(--color-brand-secondary-container); color: var(--color-brand-on-secondary-container);
  font-weight: var(--type-weight-label); }
.sev-high { background: var(--color-status-high-container); color: var(--color-status-high); }
.sev-med  { background: var(--color-status-medium-container); color: var(--color-status-medium); }
.sev-low  { background: var(--color-status-low-container); color: var(--color-status-low); }
.trend-up     { background: var(--color-status-high-container); color: var(--color-status-high); }
.trend-new    { background: var(--color-status-medium-container); color: var(--color-status-medium); }
.trend-stable { background: var(--color-floating-container); color: var(--color-text-secondary); }
.mention-count {
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.mention-count strong { color: var(--color-text-primary); font-weight: var(--type-weight-emphasized-label); }
.finding-expand-btn {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform 0.2s;
}
.finding-card.expanded .finding-expand-btn { transform: rotate(180deg); }
.finding-detail {
  display: none;
  padding: 0 var(--spacing-component-lg) var(--spacing-component-xl) 72px;
}
.finding-card.expanded .finding-detail { display: block; }
.finding-summary {
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.finding-quote {
  margin: var(--spacing-component-lg) 0;
  padding: var(--spacing-component-md) var(--spacing-component-lg);
  border-left: 3px solid var(--color-text-accent);
  background: linear-gradient(var(--color-floating-container-low-top), var(--color-floating-container-low-bottom));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.55;
}
.finding-feature-req {
  padding: var(--spacing-component-md) var(--spacing-component-lg);
  background: var(--color-brand-secondary-container);
  color: var(--color-brand-on-secondary-container);
  border-radius: calc(var(--radius-card) / 2);
  line-height: 1.5;
}
.finding-feature-req-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-xs);
  margin-bottom: var(--spacing-component-xs);
  font: var(--type-weight-emphasized-label) var(--hmi-label-3) var(--type-family-body);
  letter-spacing: var(--tracking-label-3);
  text-transform: uppercase;
}
.finding-feature-req-label .icon { font-size: 16px; }
.sources-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-sm);
  margin-top: var(--spacing-component-lg);
  flex-wrap: wrap;
}
.sources-label {
  font: var(--type-weight-label) var(--hmi-label-3) var(--type-family-body);
  letter-spacing: var(--tracking-label-3);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.source-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--spacing-component-md);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-button);
  text-decoration: none;
  color: var(--color-text-accent);
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-body);
}
.source-link .icon { font-size: 16px; }
.source-type {
  font: var(--type-weight-label) var(--hmi-label-3) var(--type-family-body);
  letter-spacing: var(--tracking-label-3);
  color: var(--color-text-secondary);
}

/* ── Empty state ──────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 64px 20px;
  color: var(--color-text-secondary);
  display: none;
}
.empty-state > .icon { font-size: 48px; margin-bottom: var(--spacing-component-lg); }
.empty-state h3 {
  font: var(--type-weight-heading) var(--hmi-display-3) var(--type-family-display);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-component-sm);
}
.empty-state p { max-width: 520px; margin: 0 auto; }
.empty-state .btn-primary { margin-top: var(--spacing-component-xl); }
.empty-state.error > .icon { color: var(--color-status-high); }
.empty-state code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-floating-container);
  color: var(--color-text-primary);
}

/* ── Dialog ───────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: #00000080;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--color-surface-container-high);
  border: 1px solid var(--color-border-depth);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-overlay), var(--depth-edge-highlight);
  width: 100%;
  max-width: 520px;
  overflow: hidden;
}
.modal-header {
  padding: var(--spacing-component-xl) var(--spacing-component-xl) var(--spacing-component-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-component-lg);
}
.modal-title {
  font: var(--type-weight-heading) var(--hmi-display-3) var(--type-family-display);
}
.modal-close { color: var(--color-text-secondary); }
.modal-body { padding: 0 var(--spacing-component-xl); }
.export-progress {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-md);
  padding: var(--spacing-component-md) var(--spacing-component-lg);
  background: linear-gradient(var(--color-floating-container-low-top), var(--color-floating-container-low-bottom));
  border-radius: var(--radius-button);
  margin-bottom: var(--spacing-component-lg);
}
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border-default);
  border-top-color: var(--color-text-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.spinner.done {
  border-color: var(--color-status-low);
  animation: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.export-status { color: var(--color-text-secondary); }
.slide-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-component-lg);
}
.slide-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-md);
  padding: var(--spacing-component-md) var(--spacing-component-xs);
  border-top: 1px solid var(--color-border-subtle);
}
.slide-list li:first-child { border-top: none; }
.slide-pick {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-component-md);
  cursor: pointer;
}
.slide-pick-label { flex: 1; }
.slide-num {
  font: var(--type-weight-emphasized-label) var(--hmi-label-1) var(--type-family-body);
  color: var(--color-text-secondary);
  min-width: 22px;
  font-variant-numeric: tabular-nums;
}
.modal-footer {
  padding: var(--spacing-component-sm) var(--spacing-component-xl) var(--spacing-component-xl);
  display: flex;
  gap: var(--spacing-component-sm);
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .topbar { padding: 0 var(--spacing-component-lg); gap: var(--spacing-component-sm); }
  .topbar-title span { display: none; }
  .page { padding: var(--spacing-component-lg) var(--spacing-component-lg) 0; }
  .filter-spacer { display: none; }
  .tab { padding: 0 var(--spacing-component-lg); }
  .theme-count { display: none; }
  .finding-detail { padding-left: var(--spacing-component-lg); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation-duration: 0s !important; }
}

/* ── App views ────────────────────────────────────────── */
/* View tabs sit in the top bar: no container outline or fill, only the active tab is highlighted */
.app-nav {
  display: flex;
  flex-shrink: 0;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.app-nav .icon { font-size: 20px; }
.view[hidden] { display: none; }
.view-head { margin-bottom: var(--spacing-layout-sm); }
.view-title {
  font: var(--type-weight-heading) var(--hmi-display-3) var(--type-family-display);
  margin-bottom: var(--spacing-component-xs);
}
.view-desc { color: var(--color-text-secondary); max-width: 720px; }
.section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-sm);
  font: var(--type-weight-heading) var(--hmi-body-1) var(--type-family-display);
  margin-bottom: var(--spacing-component-md);
}
.section-title .icon { color: var(--color-text-accent); }
.section-title[hidden] { display: none; }
.card {
  border: 1px solid var(--color-border-depth);
  border-radius: var(--radius-card);
  background: linear-gradient(var(--color-floating-base-top), var(--color-floating-base-bottom));
  backdrop-filter: blur(var(--blur-floating));
  -webkit-backdrop-filter: blur(var(--blur-floating));
  box-shadow: var(--depth-edge-highlight);
}

/* Notice banner (stale results) */
.notice {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-component-lg);
  padding: var(--spacing-component-md) var(--spacing-component-lg);
  border-radius: var(--radius-button);
  background: var(--color-brand-secondary-container);
  color: var(--color-brand-on-secondary-container);
}
.notices { display: flex; flex-direction: column; gap: var(--spacing-component-sm); margin-bottom: var(--spacing-component-lg); }
.notices[hidden] { display: none; }
.notices .notice { margin-bottom: 0; }
.list-sub.blocked { display: flex; align-items: center; gap: 4px; color: var(--color-status-medium); }
.list-sub.blocked .icon { font-size: 16px; }
.notice .icon { font-size: 20px; }
.notice-text { flex: 1; min-width: 200px; }
.notice .btn-text { height: 36px; color: inherit; gap: 6px; }

/* Last research / scan stamp, always set right before the view's Refresh button */
.run-stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}
.run-stamp .icon { font-size: 20px; }
.run-stamp time { color: var(--color-text-primary); font-weight: var(--type-weight-emphasized-label); font-variant-numeric: tabular-nums; }
/* Dashboard: one line at the top right of the results, with why a refresh is due when it is */
.run-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--spacing-component-sm) var(--spacing-component-md);
}
.run-status .btn-text { height: 36px; gap: 6px; }
.run-why { color: var(--color-status-medium); font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body); }
.run-why::before { content: "· "; color: var(--color-text-secondary); }
@media (max-width: 600px) { .run-stamp-label { display: none; } }
@media (max-width: 720px) { .list-row .run-stamp { display: none; } }

/* ── Business case ────────────────────────────────────── */
.business-case { margin-bottom: var(--spacing-layout-sm); padding: var(--spacing-component-lg) var(--spacing-component-xl) var(--spacing-component-xl); }
.business-case[hidden] { display: none; }
.bc-head { display: flex; align-items: center; gap: var(--spacing-component-md); flex-wrap: wrap; }
.bc-head > .icon { color: var(--color-text-accent); }
.bc-title { font: var(--type-weight-heading) var(--hmi-body-1) var(--type-family-display); }
.bc-head .btn-text { margin-left: auto; height: 36px; gap: 6px; }
.bc-headline {
  margin: var(--spacing-component-md) 0 var(--spacing-component-lg);
  font: var(--type-weight-heading) var(--hmi-display-3) var(--type-family-display);
}
.bc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-component-md); }
.bc-block {
  padding: var(--spacing-component-lg);
  border-radius: calc(var(--radius-card) / 1.5);
  background: var(--color-floating-container);
}
.bc-block h3 {
  margin-bottom: var(--spacing-component-sm);
  font: var(--type-weight-emphasized-label) var(--hmi-label-3) var(--type-family-body);
  letter-spacing: var(--tracking-label-3);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.bc-block ul { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.bc-block p + p { margin-top: var(--spacing-component-sm); }
.bc-affected { color: var(--color-text-secondary); }
.bc-reason { margin-top: var(--spacing-component-md); color: var(--color-text-secondary); }
.business-case > .btn-primary { margin-top: var(--spacing-component-md); }
.spinner.error { border-color: var(--color-status-high); }
/* Four formats in equal columns across the dialog, so none is cut off; two rows on narrow screens */
#modalOverlay .modal { max-width: 600px; }
.export-formats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin-bottom: var(--spacing-component-lg);
}
.export-formats .tab { justify-content: center; gap: 6px; min-width: 0; padding: 0 var(--spacing-component-sm); }
@media (max-width: 520px) { .export-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.export-formats[hidden] { display: none; }
.export-formats .icon { font-size: 20px; }

/* ── Top opportunities ────────────────────────────────── */
/* Product propositions: three cards, quick win → bold bet */
.propositions { margin-bottom: var(--spacing-layout-sm); }
.propositions[hidden] { display: none; }
.prop-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-component-md);
}
.prop {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-component-sm);
  padding: var(--spacing-component-lg) var(--spacing-component-xl);
}
.prop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-component-sm); }
.prop-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 var(--spacing-component-md);
  border-radius: 999px;
  background: linear-gradient(var(--color-brand-primary-top), var(--color-brand-primary-bottom));
  color: var(--color-button-on-primary);
  font: var(--type-weight-emphasized-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
}
.prop-tag .icon { font-size: 18px; }
.prop-name { font: var(--type-weight-heading) var(--hmi-body-1) var(--type-family-display); }
.prop-pitch {
  padding: var(--spacing-component-sm) var(--spacing-component-md);
  border-radius: calc(var(--radius-card) / 2);
  background: var(--color-brand-secondary-container);
  color: var(--color-brand-on-secondary-container);
}
/* Each subheading gets room above it and sits close to its own paragraph */
.prop-row { display: flex; flex-direction: column; gap: var(--spacing-component-xs); padding-top: var(--spacing-component-md); }
.prop-deliverable {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-component-xs);
  margin-top: var(--spacing-component-sm);
  padding: var(--spacing-component-sm) var(--spacing-component-md);
  border: 1px solid var(--color-border-default);
  border-radius: calc(var(--radius-card) / 2);
}
.prop-deliverable .prop-label { display: inline-flex; align-items: center; gap: 4px; }
.prop-deliverable .prop-label .icon { font-size: 16px; }
.prop-brands { color: var(--color-text-secondary); }
.prop-label {
  font: var(--type-weight-emphasized-label) var(--hmi-label-3) var(--type-family-body);
  letter-spacing: var(--tracking-label-3);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.prop-findings { align-self: flex-start; margin-top: auto; height: 36px; gap: 6px; }
.prop-empty { padding: var(--spacing-component-lg) var(--spacing-component-xl); }
.prop-empty .bc-reason { margin: 0 0 var(--spacing-component-md); }

.opportunities { margin-bottom: var(--spacing-layout-sm); }
.opportunities[hidden] { display: none; }
/* Two rows of three: equal columns, and every row as tall as the tallest card */
.opportunity-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--spacing-component-md);
}
@media (max-width: 900px) { .opportunity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .opportunity-list { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }
.opportunity-list > li { display: flex; min-width: 0; }
.opportunity {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-component-sm);
  padding: var(--spacing-component-lg) var(--spacing-component-xl);
  border: 1px solid var(--color-border-depth);
  border-radius: var(--radius-card);
  background: linear-gradient(var(--color-floating-base-top), var(--color-floating-base-bottom));
  box-shadow: var(--depth-edge-highlight);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.opportunity-head { display: flex; align-items: center; gap: var(--spacing-component-md); }
.opportunity-rank {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(var(--color-brand-primary-top), var(--color-brand-primary-bottom));
  color: var(--color-button-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--type-weight-emphasized-label) var(--hmi-label-1) var(--type-family-body);
}
.opportunity-title { font: var(--type-weight-heading) var(--hmi-body-2) var(--type-family-display); }
.opportunity-problem { color: var(--color-text-secondary); }
.opportunity-direction {
  padding: var(--spacing-component-sm) var(--spacing-component-md);
  border-radius: calc(var(--radius-card) / 2);
  background: var(--color-brand-secondary-container);
  color: var(--color-brand-on-secondary-container);
}
.opportunity-meta { display: flex; align-items: center; gap: var(--spacing-component-sm); margin-top: auto; }
/* Toggle between top opportunities and top successes */
.highlight-tabs { margin-bottom: var(--spacing-component-md); }
.highlight-tabs .tab { gap: 6px; }
.opportunity.success { cursor: default; }
.success-sources { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.success-sources a { color: inherit; }
.highlights-empty {
  grid-column: 1 / -1;
  padding: var(--spacing-component-lg) var(--spacing-component-xl);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-card);
  color: var(--color-text-secondary);
}
.finding-card.highlight { animation: highlight 1.6s ease-out; }
@keyframes highlight {
  from { background: var(--color-brand-secondary-container); }
  to { background: transparent; }
}

/* ── Lists (documents, sources) ───────────────────────── */
.list { list-style: none; }
.list-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-lg);
  padding: var(--spacing-component-md) var(--spacing-component-xl);
  border-top: 1px solid var(--color-border-subtle);
}
.list-row:first-child { border-top: none; }
.list-row.disabled .list-title, .list-row.disabled .list-sub:not(.blocked) { opacity: var(--opacity-state-disabled-content); }
.list-main { flex: 1; min-width: 0; }
.list-title { font: 400 var(--hmi-body-2) var(--type-family-body); overflow-wrap: anywhere; }
.list-sub { color: var(--color-text-secondary); overflow-wrap: anywhere; }
.list-sub.error { color: var(--color-status-high); }
.list-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-app-icon);
  background: var(--color-floating-container);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}
.list-empty { padding: var(--spacing-component-xl); color: var(--color-text-secondary); text-align: center; }
.list .spinner { width: 20px; height: 20px; }

/* Checkbox: checked = enabled */
.check {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.check::after {
  content: "check";
  font: 400 18px/1 "Material Symbols Rounded";
  color: var(--color-button-on-primary);
  opacity: 0;
}
.check:checked {
  border-color: transparent;
  background: linear-gradient(var(--color-brand-primary-top), var(--color-brand-primary-bottom));
}
.check:checked::after { opacity: 1; }

.source-groups { display: flex; flex-wrap: wrap; width: fit-content; margin-bottom: var(--spacing-component-lg); }
.source-groups .count {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  font-weight: 400;
}
.tab.active .count { color: inherit; }
.source-add {
  display: flex;
  gap: var(--spacing-component-sm);
  flex-wrap: wrap;
  padding: var(--spacing-component-lg) var(--spacing-component-xl);
  border-top: 1px solid var(--color-border-subtle);
}
.text-field {
  flex: 1;
  min-width: 180px;
  height: 48px;
  padding: 0 var(--spacing-component-lg);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-button);
  background: linear-gradient(var(--color-floating-container-low-top), var(--color-floating-container-low-bottom));
  color: var(--color-text-primary);
  font: 400 var(--hmi-body-3) var(--type-family-body);
}
.text-field::placeholder { color: var(--color-text-secondary); }
.form-error { padding: 0 var(--spacing-component-xl) var(--spacing-component-lg); color: var(--color-status-high); }
.form-error[hidden] { display: none; }

/* Historical view: summary and report excerpts under the chart or table */
.trend-summary { margin-top: var(--spacing-component-xl); padding-top: var(--spacing-component-lg); border-top: 1px solid var(--color-border-subtle); }
.trend-summary-title { display: flex; align-items: center; gap: var(--spacing-component-sm); margin-bottom: var(--spacing-component-sm);
  font: var(--type-weight-emphasized-label) var(--hmi-label-1) var(--type-family-body); }
.trend-summary-title .icon { color: var(--color-text-accent); font-size: 20px; }
.trend-summary ul { padding-left: 1.25em; display: grid; gap: 4px; max-width: 900px; }
.trend-summary-sub { margin: var(--spacing-component-lg) 0 var(--spacing-component-sm); color: var(--color-text-secondary);
  font: var(--type-weight-label) var(--hmi-label-3) var(--type-family-body); letter-spacing: var(--tracking-label-3); }
.excerpt { margin: 0 0 var(--spacing-component-md); padding-left: var(--spacing-component-lg); border-left: 3px solid var(--color-text-accent); max-width: 900px; }
.excerpt blockquote { margin: 0; font-style: italic; overflow-wrap: anywhere; }
.excerpt figcaption { margin-top: 2px; color: var(--color-text-secondary); overflow-wrap: anywhere; }

/* Folders (documents, sources) */
.folder-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-component-sm) var(--spacing-component-lg);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-component-md);
}
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; }
.breadcrumb > span[aria-current] { font: var(--type-weight-emphasized-label) var(--hmi-label-1) var(--type-family-body); }
.breadcrumb .link-button, .breadcrumb > span[aria-current] { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb .icon { font-size: 20px; }
.breadcrumb-sep { color: var(--color-text-secondary); }
.folder-add { display: flex; gap: var(--spacing-component-sm); flex: 0 1 380px; }
.folder-add .text-field { height: 40px; min-width: 140px; }
.folder-add .btn-text { height: 40px; gap: 6px; padding: 0 var(--spacing-component-md); white-space: nowrap; }
.folder-row .list-title { display: block; text-align: left; }
.folder-icon { color: var(--color-text-accent); }
.check-spacer { width: 24px; flex-shrink: 0; }
.folder-picker .list-row { padding-left: calc(var(--spacing-component-xl) + var(--depth) * 24px); }
.folder-dest { display: inline-flex; align-items: center; gap: var(--spacing-component-sm); }
.folder-dest .icon { color: var(--color-text-accent); }
.folder-dest:disabled { cursor: default; color: var(--color-text-secondary); text-decoration: none; }
.panel-body .folder-bar { margin: var(--spacing-component-md) 0 0; }

/* Document upload */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-component-xs);
  margin-bottom: var(--spacing-component-lg);
  padding: var(--spacing-layout-sm);
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-card);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-align: center;
}
.dropzone .icon { font-size: 36px; color: var(--color-text-accent); }
.dropzone strong { color: var(--color-text-primary); }
.dropzone.dragging { border-color: var(--color-text-accent); background: var(--color-brand-secondary-container); }
.dropzone-hint { font: var(--type-weight-label) var(--hmi-label-3) var(--type-family-body); letter-spacing: var(--tracking-label-3); }

/* ── Historical view chart ────────────────────────────── */
/* Categorical series slots: dataviz reference palette, validated
   against the light and dark card surfaces used here. */
:root {
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #6250d6; --series-8: #e34948;
  --chart-grid: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
  --chart-axis: color-mix(in srgb, var(--color-text-primary) 25%, transparent);
}
:root[data-mode="dark"] {
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
}
/* One-row toolbar: title, topic picker, summary, chart/table toggle */
.trend-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-component-md);
}
.trend-toolbar[hidden] { display: none; }
.trend-toolbar .view-title { margin: 0 var(--spacing-component-sm) 0 0; }
.trend-toolbar .btn-text { margin-left: auto; height: 40px; gap: 6px; }
.chart-card { padding: var(--spacing-component-lg) var(--spacing-component-xl); }

/* Topics to watch: six trend cards, two rows of three */
.watch { margin-bottom: var(--spacing-layout-sm); }
.watch-head { display: flex; align-items: center; gap: var(--spacing-component-md); flex-wrap: wrap; margin-bottom: var(--spacing-component-md); }
.watch-head .view-title { margin: 0; }
.watch-tabs { display: flex; width: fit-content; }
.watch-tabs .tab { gap: 6px; }
.tab-spinner { width: 14px; height: 14px; margin-left: 2px; }
.watch-status { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--spacing-component-sm); margin-bottom: var(--spacing-component-md); }
.watch-status[hidden] { display: none; }
#watchMeta { display: inline-flex; align-items: center; gap: var(--spacing-component-sm); }
.watch-status .btn-text { height: 40px; gap: 6px; }
.watch-status .btn-text[hidden] { display: none; }
.watch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-component-lg); }
@media (max-width: 1100px) { .watch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .watch-grid { grid-template-columns: minmax(0, 1fr); } }
.steep-social { --steep: var(--series-5); }
.steep-technological { --steep: var(--series-1); }
.steep-economic { --steep: var(--series-4); }
.steep-environmental { --steep: var(--series-3); }
.steep-political { --steep: var(--series-7); }
.watch-card { display: flex; flex-direction: column; overflow: hidden; border-top: 3px solid var(--steep); }
.watch-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  background: color-mix(in srgb, var(--steep) 16%, transparent);
}
.watch-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.watch-fallback { font-size: 44px; color: var(--steep); }
.watch-content { display: flex; flex-direction: column; gap: var(--spacing-component-sm); flex: 1; padding: var(--spacing-component-lg); }
.watch-tags { display: flex; flex-wrap: wrap; gap: var(--spacing-component-xs); }
.steep-badge {
  display: inline-flex; align-items: center; gap: var(--spacing-component-xs);
  height: 22px; padding: 0 var(--spacing-component-sm); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--steep) 16%, transparent); color: var(--color-text-primary);
  font: var(--type-weight-emphasized-label) var(--hmi-label-3) var(--type-family-body); letter-spacing: var(--tracking-label-3);
  white-space: nowrap;
}
.steep-badge .icon { font-size: 16px; color: var(--steep); }
.watch-title { font: var(--type-weight-heading) var(--hmi-body-1) var(--type-family-display); }
.watch-summary { color: var(--color-text-primary); }
.watch-why { color: var(--color-text-secondary); }
.watch-link {
  display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: var(--spacing-component-xs);
  color: var(--color-text-accent); text-decoration: none;
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body); letter-spacing: var(--tracking-label);
}
.watch-link:hover { text-decoration: underline; }
.watch-link .icon { font-size: 16px; }
.watch-empty { display: flex; align-items: center; gap: var(--spacing-component-lg); flex-wrap: wrap; padding: var(--spacing-component-lg) var(--spacing-component-xl); }
.watch-empty > .icon { font-size: 36px; color: var(--color-text-accent); }
.watch-empty > div { flex: 1; min-width: 260px; color: var(--color-text-secondary); }
.watch-empty strong { color: var(--color-text-primary); }
.watch-progress { margin: 0; }
.watch .notice { margin-bottom: var(--spacing-component-md); }

/* Trends: sidebar of topic pages, charts of the open page */
.trend-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--spacing-component-lg); align-items: start; }
.trend-nav {
  position: sticky;
  top: var(--spacing-component-lg);
  max-height: calc(100vh - 2 * var(--spacing-component-lg));
  display: flex;
  flex-direction: column;
  padding: var(--spacing-component-md);
}
.trend-nav[hidden] { display: none; }
.trend-layout:has(.trend-nav[hidden]) { grid-template-columns: minmax(0, 1fr); }
.trend-nav .text-field { flex: 0 0 auto; height: 40px; min-width: 0; margin-bottom: var(--spacing-component-sm); }
.trend-nav-list { overflow-y: auto; margin: 0 calc(var(--spacing-component-md) * -1); padding: 0 var(--spacing-component-sm); }
.trend-nav-group + .trend-nav-group { margin-top: var(--spacing-component-md); }
.trend-nav-heading {
  padding: var(--spacing-component-xs) var(--spacing-component-sm);
  color: var(--color-text-secondary);
  font: var(--type-weight-emphasized-label) var(--hmi-label-3) var(--type-family-body);
  letter-spacing: var(--tracking-label-3);
  text-transform: uppercase;
}
.trend-nav-heading .count { font-weight: 400; }
.trend-nav-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-component-sm);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}
.trend-nav-item.active { background: var(--color-brand-secondary-container); color: var(--color-brand-on-secondary-container); }
.trend-nav-title { font: 400 var(--hmi-body-3) var(--type-family-body); overflow-wrap: anywhere; }
.trend-nav-sub { color: var(--color-text-secondary); font: var(--type-weight-label) var(--hmi-label-3) var(--type-family-body); letter-spacing: var(--tracking-label-3); }
.trend-page { display: flex; flex-direction: column; gap: var(--spacing-component-lg); min-width: 0; }
.trend-page-head { padding: 0 var(--spacing-component-xs); }
.trend-page-title { font: var(--type-weight-heading) var(--hmi-body-1) var(--type-family-display); }
.trend-jump { display: flex; flex-wrap: wrap; gap: var(--spacing-component-xs); margin-top: var(--spacing-component-sm); }
.trend-jump .suggestion-chip { height: 28px; text-decoration: none; font-weight: 400; }
.trend-page .chart-card { scroll-margin-top: var(--spacing-component-lg); }
.chart-card.trend-summary { margin-top: 0; border-top: none; padding-top: var(--spacing-component-lg); }
.table-scroll { overflow-x: auto; }
@media (max-width: 900px) {
  .trend-layout { grid-template-columns: minmax(0, 1fr); }
  .trend-nav { position: static; max-height: 360px; }
}
.chart-head { display: flex; align-items: flex-start; gap: var(--spacing-component-lg); flex-wrap: wrap; }
.chart-title { flex: 1; font: var(--type-weight-heading) var(--hmi-body-1) var(--type-family-display); }
.chart-sub { color: var(--color-text-secondary); margin-top: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: var(--spacing-component-md); margin: var(--spacing-component-lg) 0 var(--spacing-component-sm); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-secondary); }
.line-key { width: 16px; height: 2px; border-radius: 1px; flex-shrink: 0; }
.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-wrap text {
  font: 400 12px var(--type-family-body);
  fill: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.chart-wrap .end-label { fill: var(--color-text-primary); }
.chart-tooltip {
  position: absolute;
  top: 0;
  pointer-events: none;
  min-width: 160px;
  padding: var(--spacing-component-sm) var(--spacing-component-md);
  border-radius: var(--radius-sm);
  background: var(--color-surface-container-highest);
  color: var(--color-text-primary);
  box-shadow: 0 4px 16px #00000033;
  font: 400 13px/1.4 var(--type-family-body);
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip .tt-year { color: var(--color-text-secondary); margin-bottom: 4px; }
.chart-tooltip .tt-row { display: flex; align-items: center; gap: 8px; }
.chart-tooltip strong { font-variant-numeric: tabular-nums; }
.chart-tooltip .tt-name { color: var(--color-text-secondary); }
.data-table { width: 100%; border-collapse: collapse; margin-top: var(--spacing-component-lg); }
.data-table th, .data-table td {
  padding: 6px 10px;
  text-align: right;
  border-bottom: 1px solid var(--color-border-subtle);
  font-variant-numeric: tabular-nums;
}
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table th { font: var(--type-weight-emphasized-label) var(--hmi-label-3) var(--type-family-body); color: var(--color-text-secondary); }
.chart-sources summary { cursor: pointer; width: fit-content; }
.chart-sources ul { margin: var(--spacing-component-xs) 0 0 var(--spacing-component-lg); }
.chart-sources { margin-top: var(--spacing-component-md); color: var(--color-text-secondary); font: var(--type-weight-label) var(--hmi-label-3) var(--type-family-body); letter-spacing: var(--tracking-label-3); }

/* ── Gear menu (HMI floating menu) ─────────────────────── */
.gear { position: relative; }
.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 150;
  min-width: 260px;
  padding: var(--spacing-component-sm);
  border: 1px solid var(--color-border-depth);
  border-radius: calc(var(--radius-card) / 1.5);
  background: linear-gradient(var(--color-floating-base-top), var(--color-floating-base-bottom));
  backdrop-filter: blur(var(--blur-floating));
  -webkit-backdrop-filter: blur(var(--blur-floating));
  box-shadow: 0 4px 30px #00000040, var(--depth-edge-highlight);
}
.menu[hidden] { display: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-md);
  width: 100%;
  height: 44px;
  padding: 0 var(--spacing-component-md);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-primary);
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body);
  letter-spacing: var(--tracking-label);
  text-align: left;
  cursor: pointer;
}
.menu-item .icon { font-size: 20px; color: var(--color-text-secondary); }
.menu-divider { margin: 6px var(--spacing-component-sm); border-top: 1px solid var(--color-border-subtle); }
.menu-divider span {
  display: block;
  margin-top: 8px;
  font: var(--type-weight-emphasized-label) var(--hmi-label-3) var(--type-family-body);
  letter-spacing: var(--tracking-label-3);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* ── Shared panel ───────────────────────────────────────── */
.modal.panel { max-width: 720px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.panel-body { overflow-y: auto; padding-bottom: var(--spacing-component-xl); }
.panel-desc { color: var(--color-text-secondary); margin: var(--spacing-component-sm) 0; }
.panel-list { margin: var(--spacing-component-sm) calc(var(--spacing-component-xl) * -1) 0; }
.panel-list .list-row { padding-left: var(--spacing-component-xl); padding-right: var(--spacing-component-xl); }
.panel-tabs { display: flex; width: fit-content; margin-bottom: var(--spacing-component-sm); }
.reports-filter { display: flex; align-items: center; gap: var(--spacing-component-sm); flex-wrap: wrap; }
.reports-filter .panel-desc { flex: 1; margin: 0; }
.reports-filter .btn-text { height: 36px; }
.panel-actions { display: flex; justify-content: flex-end; gap: var(--spacing-component-sm); margin-top: var(--spacing-component-lg); flex-wrap: wrap; }
.panel-actions.center { justify-content: center; }
.panel-body .source-add { padding: var(--spacing-component-lg) 0 0; border-top: none; }
.panel-body .form-error { padding: var(--spacing-component-sm) 0 0; }
.notice-inline { display: flex; gap: var(--spacing-component-sm); align-items: center; margin-bottom: var(--spacing-component-md);
  padding: var(--spacing-component-md); border-radius: var(--radius-sm);
  background: var(--color-brand-secondary-container); color: var(--color-brand-on-secondary-container); }
.link-button {
  border: none; background: none; padding: 0; cursor: pointer; text-align: left;
  font: 400 var(--hmi-body-2) var(--type-family-body); color: var(--color-text-primary);
}
.link-button:hover { color: var(--color-text-accent); text-decoration: underline; }
.list-main .sev-badge { margin-top: 4px; }

/* Forms */
.field-stack { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--spacing-component-md);
  font: var(--type-weight-label) var(--hmi-label-1) var(--type-family-body); color: var(--color-text-secondary); }
.field { display: inline-flex; align-items: center; gap: var(--spacing-component-sm); flex-wrap: wrap; }
.text-field.num { flex: 0 0 auto; width: 84px; min-width: 0; }
.text-field.area { height: auto; padding: var(--spacing-component-md) var(--spacing-component-lg); border-radius: calc(var(--radius-card) / 2); resize: vertical; line-height: 1.5; }
.radio { display: flex; align-items: flex-start; gap: var(--spacing-component-sm); padding: 6px 0; cursor: pointer; }
.radio input { accent-color: var(--color-brand-primary-bottom); margin-top: 4px; }
fieldset { border: none; margin: 0 0 var(--spacing-component-lg); }
legend { margin-bottom: var(--spacing-component-sm);
  font: var(--type-weight-emphasized-label) var(--hmi-label-3) var(--type-family-body);
  letter-spacing: var(--tracking-label-3); text-transform: uppercase; color: var(--color-text-secondary); }
.account { display: flex; align-items: center; gap: var(--spacing-component-lg); }
.avatar { width: 56px; height: 56px; border-radius: var(--radius-full); display: grid; place-content: center;
  background: linear-gradient(var(--color-brand-primary-top), var(--color-brand-primary-bottom));
  color: var(--color-button-on-primary); font: 600 24px var(--type-family-display); }

/* ── Benchmarking ───────────────────────────────────────── */
.bench-new { padding: var(--spacing-component-lg) var(--spacing-component-xl); margin-bottom: var(--spacing-layout-sm); }
.bench-new-row { display: flex; gap: var(--spacing-component-sm); flex-wrap: wrap; }
.bench-new .form-error { padding: var(--spacing-component-sm) 0 0; }
.progress-bar {
  height: 6px;
  margin-top: var(--spacing-component-md);
  border-radius: 999px;
  background: var(--color-border-subtle);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-brand-primary-top), var(--color-brand-primary-bottom));
  transition: width 250ms linear;
}
@media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } }
.bench-scope { padding: var(--spacing-component-xl); }
.scope-head { margin-bottom: var(--spacing-component-lg); }
.scope-head .section-title { margin-bottom: 4px; }
.bench-scope .notice ul { margin: 6px 0 0 18px; }
.dim-row { display: grid; grid-template-columns: minmax(140px, 1fr) 2.4fr 40px; gap: var(--spacing-component-sm); margin-bottom: var(--spacing-component-sm); }
.card-radio { padding: var(--spacing-component-md); margin-bottom: var(--spacing-component-sm); border-radius: calc(var(--radius-card) / 2);
  background: var(--color-floating-container); }
.card-radio .list-sub { display: block; margin-top: 2px; }
.card-radio .text-field { margin-top: var(--spacing-component-sm); width: 100%; }
.scope-foot { display: flex; flex-direction: column; gap: var(--spacing-component-sm); }
.hint { margin: -4px 0 var(--spacing-component-lg); color: var(--color-text-secondary); }
.hint summary { cursor: pointer; width: fit-content; }
.hint ul { margin: var(--spacing-component-sm) 0 0 18px; display: grid; gap: 4px; }
.bench-review-head { display: flex; align-items: center; gap: var(--spacing-component-sm); flex-wrap: wrap; margin-bottom: var(--spacing-component-lg); }
.bench-review-head .list-main { min-width: 0; flex: 1 1 160px; }  /* title wraps so the actions stay on one row */
.bench-review-head a.btn-text { text-decoration: none; gap: 6px; }
.bench-review-head .bench-export { margin-left: auto; }  /* top right of the results, like the dashboard */
.bench-frame { display: block; width: 100%; height: 900px; border: 1px solid var(--color-border-depth); border-radius: var(--radius-card); background: #fff; overflow: hidden; }
.count { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); font-weight: 400; }