/* benchr product system — shared tokens and components for every surface. */
:root {
  color-scheme: light;
  --color-background: #fbfaf7;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-muted: #f3f0eb;
  --color-text-primary: #15121b;
  --color-text-secondary: #4e4957;
  --color-text-muted: #706979;
  --color-border: #ded9e2;
  --color-border-strong: #9b92a6;
  --color-accent: #5c348c;
  --color-accent-strong: #402063;
  --color-accent-soft: #eee6f8;
  --color-success: #166a49;
  --color-success-soft: #e5f5ed;
  --color-warning: #845b08;
  --color-warning-soft: #fff3d7;
  --color-danger: #a33037;
  --color-danger-soft: #fdebed;
  --color-focus: #8d62c4;
  --color-overlay: rgba(18, 14, 24, .7);
  --surface-shadow: 0 18px 55px rgba(30, 20, 42, .11);
  --surface-shadow-small: 0 8px 26px rgba(30, 20, 42, .08);
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-dialog: 20px;
  --control-height: 44px;
  --content-reading: 68ch;
  --product-header-height: 72px;

  /* Backward-compatible aliases used by the existing editorial and tool CSS. */
  --white: var(--color-background);
  --black: var(--color-text-primary);
  --orange: var(--color-accent);
  --accent: var(--color-accent);
  --accent-deep: var(--color-accent-strong);
  --accent-on-dark: #d1bceb;
  --code-bg: var(--color-surface-muted);
  --bg-soft: var(--color-surface-muted);
  --ink: var(--color-text-primary);
  --ink-soft: var(--color-text-secondary);
  --rule: var(--color-border);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #111015;
  --color-surface: #19171f;
  --color-surface-elevated: #211e29;
  --color-surface-muted: #25212c;
  --color-text-primary: #eeeaf2;
  --color-text-secondary: #c7c0ce;
  --color-text-muted: #a39baa;
  --color-border: #3b3543;
  --color-border-strong: #6e6578;
  --color-accent: #c0a2e8;
  --color-accent-strong: #dccaf3;
  --color-accent-soft: #312640;
  --color-success: #71d2a7;
  --color-success-soft: #16392b;
  --color-warning: #e9c06e;
  --color-warning-soft: #3b2e14;
  --color-danger: #f099a0;
  --color-danger-soft: #442127;
  --color-focus: #c5a6ef;
  --color-overlay: rgba(3, 2, 6, .82);
  --surface-shadow: 0 20px 64px rgba(0, 0, 0, .42);
  --surface-shadow-small: 0 9px 30px rgba(0, 0, 0, .3);
  --accent-on-dark: #d9c4f2;
}

html { max-width: 100%; overflow-x: clip; scrollbar-gutter: stable; background: var(--color-background); scroll-padding-top: calc(var(--product-header-height) + 1rem); }
body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  color: var(--color-text-primary);
  background: var(--color-background);
  font-style: normal;
}

body, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
.article__body { max-width: var(--content-reading); }
.article__body p, .article__body li { max-width: var(--content-reading); }

::placeholder { color: var(--color-text-muted); opacity: 1; }
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus) 72%, transparent);
  outline-offset: 3px;
}
:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .55; }

/* A stable, identical header on every page. The HTML is generated at build time,
   while JS only enhances it, so navigation never appears after first paint. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 70;
  min-height: var(--product-header-height);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-background) 94%, transparent);
  backdrop-filter: blur(12px) saturate(125%);
}
.masthead__inner {
  min-height: var(--product-header-height);
  padding: 0 clamp(14px, 2.5vw, 32px);
  justify-content: center;
}
.masthead__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(.75rem, 2vw, 1.5rem);
  align-items: center;
  min-height: var(--product-header-height);
  width: 100%;
}
.masthead__name {
  min-width: max-content;
  font-style: normal;
  font-size: 1.55rem;
}
.masthead__logo { width: 1.15em; height: 1.15em; mix-blend-mode: normal; }
.masthead__controls {
  display: flex;
  min-width: 84px;
  justify-content: flex-end;
  gap: .35rem;
}
.masthead__ctrl-btn {
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--color-text-secondary);
  background: transparent;
}
.masthead__ctrl-btn:hover { color: var(--color-text-primary); border-color: var(--color-border); background: var(--color-surface-muted); }

.global-nav { min-width: 0; font-family: var(--font-sans); font-style: normal; }
.global-nav__scroller {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: .18rem;
}
.global-nav a,
.global-nav summary {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: .55rem .72rem;
  border-radius: 9px;
  color: var(--color-text-secondary);
  font: 650 .76rem/1 var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.global-nav a:hover,
.global-nav summary:hover { color: var(--color-text-primary); background: var(--color-surface-muted); }
.global-nav a[aria-current="page"] {
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
html[data-theme="dark"] .global-nav a[aria-current="page"] { color: var(--color-accent-strong); }
.global-nav__resources { position: relative; }
.global-nav__resources summary { list-style: none; }
.global-nav__resources summary::-webkit-details-marker { display: none; }
.global-nav__resources summary::after { content: "⌄"; margin-inline-start: .35rem; font-size: .7rem; }
.global-nav__menu {
  position: absolute;
  inset-block-start: calc(100% + .45rem);
  inset-inline-end: 0;
  display: grid;
  min-width: 220px;
  padding: .45rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-elevated);
  box-shadow: var(--surface-shadow);
}
.global-nav__menu a { justify-content: flex-start; }
.global-nav__resources:not([open]) > .global-nav__menu { display: none; }
.global-nav__menu button {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .72rem;
  border-radius: 9px;
  color: var(--color-text-secondary);
  font: 650 .76rem/1 var(--font-sans);
  text-align: start;
}
.global-nav__menu button:hover { color: var(--color-text-primary); background: var(--color-surface-muted); }
.global-nav__kbd {
  margin-inline-start: .25rem;
  padding: .2rem .38rem;
  border: 1px solid var(--color-border);
  border-bottom-color: var(--color-border-strong);
  border-radius: 5px;
  color: var(--color-text-muted);
  font: 600 .62rem/1 var(--font-mono);
  background: var(--color-surface);
}

/* Shared primitives. Existing class names are deliberately included so the
   old data and event contracts remain intact. */
.platform-button, .lab-btn, .calc-result-tool, .calc-preset-btn, .calc-toggle-btn,
.product-button, button[class*="__button"], button[class$="-btn"] {
  min-height: var(--control-height);
  border-radius: var(--radius-control);
}
.platform-button, .lab-btn, .calc-result-tool, .product-button {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
  min-height: var(--control-height);
  border-color: var(--color-border-strong);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  background: var(--color-surface);
}
textarea { min-height: 112px; }
table { font-variant-numeric: tabular-nums; }
th { color: var(--color-text-secondary); }
tr { border-color: var(--color-border); }
code, pre, kbd, samp { color: var(--color-text-primary); background: var(--color-surface-muted); }

.platform-app, .filter-panel, .model-card, .decision-card, .compare-workbench,
.local-library, .lab-step, .calc-panel, .mig-card, dialog .model-dialog__shell {
  border-color: var(--color-border);
  background: var(--color-surface);
  box-shadow: none;
}
.model-card, .lab-step, .calc-panel, .mig-card { border-radius: var(--radius-card); }
.model-card:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); box-shadow: var(--surface-shadow-small); }
.platform-status, .lab-status { min-height: 46px; }
.model-grid { min-height: 520px; align-content: start; }
.product-metric__value { min-width: 3ch; font-variant-numeric: tabular-nums; }

/* Model profile keeps a stable shell and equally sized tabs. */
.model-dialog { color: var(--color-text-primary); background: transparent; }
.model-dialog::backdrop { background: var(--color-overlay); }
.model-dialog__shell { overflow: hidden; border-radius: var(--radius-dialog); box-shadow: var(--surface-shadow); }
.model-dialog__head {
  position: sticky;
  inset-block-start: 0;
  z-index: 3;
  min-height: 92px;
  background: var(--color-surface-elevated);
}
.model-dialog__head h2 { overflow-wrap: anywhere; }
.model-dialog__close { min-width: 74px; min-height: 42px; border-radius: 10px; }
.model-dialog__actions { gap: .55rem; background: var(--color-surface); }
.model-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(112px, 1fr));
  min-height: 54px;
  overflow-x: auto;
  scrollbar-width: thin;
  background: var(--color-surface-muted);
}
.model-tabs button {
  min-width: 112px;
  min-height: 52px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--color-text-secondary);
  background: transparent;
  font: 700 .76rem/1 var(--font-sans);
}
.model-tabs button[aria-selected="true"] {
  color: var(--color-accent-strong);
  border-bottom-color: var(--color-accent);
  background: var(--color-surface-elevated);
}
.model-dialog__content { min-height: min(480px, 52vh); color: var(--color-text-primary); }
.model-smart-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .55rem;
  padding: .8rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}
.model-smart-actions a { min-height: 42px; }

.lab-progress {
  position: sticky;
  inset-block-start: calc(var(--product-header-height) + .5rem);
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .35rem;
  margin: 1rem 0 1.5rem;
  padding: .5rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-surface-elevated) 94%, transparent);
  box-shadow: var(--surface-shadow-small);
  backdrop-filter: blur(10px);
}
.lab-progress a {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem;
  border-radius: 9px;
  color: var(--color-text-muted);
  font: 700 .68rem/1.2 var(--font-sans);
  text-decoration: none;
}
.lab-progress a:hover { color: var(--color-text-primary); background: var(--color-surface-muted); }
.lab-progress a[data-state="current"] { color: var(--color-accent-strong); background: var(--color-accent-soft); }
.lab-progress a[data-state="complete"] { color: var(--color-success); }
.lab-progress a[data-state="complete"] span { color: var(--color-surface); border-color: var(--color-success); background: var(--color-success); }
.lab-progress span { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border: 1px solid var(--color-border-strong); border-radius: 50%; font: 700 .65rem/1 var(--font-mono); }

.calc-complexity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
  margin: 0 0 1rem;
  padding: .3rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface-muted);
}
.calc-complexity button { min-height: 40px; border-radius: 8px; color: var(--color-text-secondary); font: 700 .76rem/1 var(--font-sans); }
.calc-complexity button[aria-selected="true"] { color: var(--color-accent-strong); background: var(--color-surface-elevated); box-shadow: var(--surface-shadow-small); }
[data-advanced-controls][hidden] { display: none !important; }
#calc-model-focus { width: 100%; }
.calc-result-item.is-focused { border-color: var(--color-accent); background: var(--color-accent-soft); }
.calc-share-preview { margin: .75rem 0; padding: .7rem .8rem; border-inline-start: 3px solid var(--color-accent); color: var(--color-text-secondary); background: var(--color-surface-muted); font: 500 .76rem/1.5 var(--font-sans); }

/* Command palette and cross-tool compare tray. */
.command-palette {
  width: min(720px, calc(100vw - 24px));
  max-height: min(720px, calc(100vh - 32px));
  padding: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-dialog);
  color: var(--color-text-primary);
  background: var(--color-surface-elevated);
  box-shadow: var(--surface-shadow);
}
.command-palette::backdrop { background: var(--color-overlay); backdrop-filter: blur(4px); }
.command-palette__shell { display: flex; max-height: inherit; flex-direction: column; }
.command-palette__head { padding: .9rem; border-bottom: 1px solid var(--color-border); }
.command-palette__label { display: flex; align-items: center; gap: .7rem; }
.command-palette__label svg { flex: 0 0 auto; color: var(--color-text-muted); }
.command-palette__input { width: 100%; border: 0 !important; outline: 0 !important; box-shadow: none !important; font: 650 1rem/1.3 var(--font-sans); }
.command-palette__hint { color: var(--color-text-muted); font: 600 .65rem/1 var(--font-mono); white-space: nowrap; }
.command-palette__body { overflow-y: auto; padding: .55rem; }
.command-palette__group-label { padding: .55rem .65rem .35rem; color: var(--color-text-muted); font: 700 .65rem/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.command-palette__results { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.command-palette__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
  width: 100%;
  padding: .72rem;
  border-radius: 10px;
  color: var(--color-text-primary);
  text-align: start;
  text-decoration: none;
}
.command-palette__item:hover, .command-palette__item[aria-selected="true"] { background: var(--color-accent-soft); }
.command-palette__item strong { display: block; overflow: hidden; font: 700 .88rem/1.25 var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.command-palette__item small { display: block; overflow: hidden; margin-top: .2rem; color: var(--color-text-muted); font: 500 .73rem/1.35 var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.command-palette__kind { color: var(--color-accent); font: 700 .63rem/1 var(--font-mono); text-transform: uppercase; }
.command-palette__empty { padding: 2rem 1rem; color: var(--color-text-muted); text-align: center; }
.command-palette__foot { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font: 600 .65rem/1.3 var(--font-mono); }

.compare-tray {
  position: fixed;
  z-index: 65;
  inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  inset-block-end: max(12px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  width: min(920px, calc(100% - 24px));
  margin-inline: auto;
  padding: .75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 15px;
  background: var(--color-surface-elevated);
  box-shadow: var(--surface-shadow);
}
.compare-tray[hidden] { display: none; }
.compare-tray__models { display: flex; min-width: 0; gap: .4rem; overflow-x: auto; }
.compare-tray__chip { display: inline-flex; min-height: 34px; align-items: center; gap: .4rem; padding: .35rem .5rem .35rem .65rem; border: 1px solid var(--color-border); border-radius: 999px; white-space: nowrap; font: 650 .72rem/1 var(--font-sans); }
.compare-tray__chip button { width: 26px; height: 26px; border-radius: 50%; color: var(--color-text-muted); }
.compare-tray__actions { display: flex; gap: .45rem; }
.compare-tray__actions a, .compare-tray__actions button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: .55rem .8rem; border: 1px solid var(--color-border-strong); border-radius: 9px; font: 700 .72rem/1 var(--font-sans); text-decoration: none; }
.compare-tray__primary { color: #fff !important; border-color: var(--color-accent) !important; background: var(--color-accent) !important; }

/* Daily feature and global status feed. */
[data-daily-feature] { min-height: 238px; }
.daily-feature__type { color: var(--color-accent); }
.home-status-feed { margin: 0 0 clamp(3rem, 7vw, 5rem); }
.home-status-feed__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--color-border-strong); }
.home-status-feed__head h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); }
.home-status-feed__head a { color: var(--color-accent); font: 700 .75rem/1 var(--font-sans); }
.home-status-feed__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 176px; }
.home-status-feed__item { padding: 1rem; border-bottom: 1px solid var(--color-border); }
.home-status-feed__item + .home-status-feed__item { border-inline-start: 1px solid var(--color-border); }
.home-status-feed__item time, .home-status-feed__item span { color: var(--color-text-muted); font: 650 .65rem/1 var(--font-mono); }
.home-status-feed__item strong { display: block; margin: .55rem 0 .35rem; font: 700 1rem/1.25 var(--font-sans); }
.home-status-feed__item p { color: var(--color-text-secondary); font: 500 .78rem/1.5 var(--font-sans); }

/* Explicit semantic tones survive dark mode and disabled/hover states. */
[role="alert"], .is-error, [data-tone="error"] { color: var(--color-danger); }
[data-tone="success"], .is-success { color: var(--color-success); }
.evidence-badge, .err-badge { color: var(--color-text-secondary); border-color: var(--color-border-strong); background: var(--color-surface-muted); }
a[href^="http"] { text-underline-offset: .18em; }
html[data-theme="dark"] .product-gateway,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .product-search__input,
html[data-theme="dark"] .product-search__results,
html[data-theme="dark"] .search-overlay,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .fontpanel,
html[data-theme="dark"] .fontpanel__opt,
html[data-theme="dark"] .calc-headline,
html[data-theme="dark"] .calc-scenario,
html[data-theme="dark"] .lab-privacy,
html[data-theme="dark"] .lab-suite-meta,
html[data-theme="dark"] .mig-code {
  color: var(--color-text-primary);
  border-color: var(--color-border);
  background: var(--color-surface);
}
html[data-theme="dark"] .masthead__logo { filter: brightness(1.45) saturate(.75); }
.x-follow { opacity: 1 !important; }
.x-follow span { color: var(--color-text-secondary) !important; font-size: max(.65rem, 10px); }
.platform-faq summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding-block: .65rem;
  cursor: pointer;
}

/* Platform used to add vertical padding to its masthead and was visibly taller
   than every other product page. Keep the shared shell geometrically stable. */
.masthead.platform-masthead .masthead__inner,
.platform-masthead .masthead__row {
  min-height: var(--product-header-height);
}
.masthead.platform-masthead .masthead__inner { padding-block: 0; }

/* The former reveal system made content disappear until scroll/JS. Keep the
   final layout from frame one; interactions still have short state changes. */
.reveal, main:not(.is-loaded) { opacity: 1 !important; transform: none !important; }

@media (max-width: 1100px) {
  .global-nav__scroller { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .global-nav__scroller::-webkit-scrollbar { display: none; }
  .global-nav a, .global-nav summary { padding-inline: .58rem; }
}

@media (max-width: 760px) {
  :root { --product-header-height: 108px; }
  .masthead__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 56px 50px; gap: 0 .6rem; }
  .masthead__name { grid-column: 1; grid-row: 1; }
  .masthead__controls { grid-column: 2; grid-row: 1; min-width: 80px; }
  .global-nav { grid-column: 1 / -1; grid-row: 2; margin-inline: -.25rem; }
  .global-nav__scroller { justify-content: flex-start; padding-bottom: .3rem; }
  .global-nav a, .global-nav summary { min-height: 38px; }
  .global-nav__kbd { display: none; }
  .global-nav__menu { position: fixed; inset-inline: 12px; inset-block-start: calc(var(--product-header-height) - 2px); }
  .model-grid { min-height: 420px; }
  .model-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: none; margin: 0; }
  .model-dialog__shell { min-height: 100dvh; border-radius: 0; }
  .model-tabs { grid-template-columns: repeat(5, minmax(104px, 1fr)); }
  .model-smart-actions { grid-template-columns: 1fr; }
  .lab-progress { grid-template-columns: repeat(6, minmax(92px, 1fr)); overflow-x: auto; }
  .home-status-feed__list { grid-template-columns: 1fr; }
  .home-status-feed__item + .home-status-feed__item { border-inline-start: 0; }
  .compare-tray { grid-template-columns: 1fr; }
  .compare-tray__actions { display: grid; grid-template-columns: 1fr 1fr auto; }
}

@media (max-width: 390px) {
  .masthead__inner { padding-inline: 10px; }
  .global-nav a, .global-nav summary { padding-inline: .52rem; font-size: .7rem; }
  .command-palette { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); border-radius: 14px; }
  .command-palette__foot { display: none; }
  .compare-tray { inset-inline: 6px; width: calc(100% - 12px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .masthead { position: static; backdrop-filter: none; }
  .command-palette, .compare-tray { display: none !important; }
}