/* ============================================================
   Design tokens
   Shared (non-color) tokens live in :root. Color/atmosphere
   tokens are set per theme below so the app can be re-skinned
   entirely from the [data-theme] blocks.
   ============================================================ */
:root {
  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  --font-ui: var(--font-sans);

  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ---------- THEME: Dark (refined, no glow) ---------- */
:root,
[data-theme='dark'] {
  --bg: #0e0e10;
  --surface-1: #161618; /* card */
  --surface-2: #1d1d20; /* raised */
  --surface-3: #27272b; /* hover */
  --inset: #121214; /* input field */
  --inset-focus: #101016;

  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.16);
  --track: rgba(255, 255, 255, 0.12);
  --hover: rgba(255, 255, 255, 0.04);

  --text: #f1f1f3;
  --text-dim: #a6a6ae;
  --text-faint: #6c6c76;

  /* One restrained accent - a clean azure, deliberately not the
     generic neon violet. */
  --accent: #5b8cff;
  --accent-hover: #75a0ff;
  --accent-ink: #06080f;
  --accent-soft: rgba(91, 140, 255, 0.16);

  --score: #5b8cff;
  --score-glow: rgba(91, 140, 255, 0.4);

  --card-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-card: 0 10px 30px -16px rgba(0, 0, 0, 0.7), 0 40px 80px -50px rgba(0, 0, 0, 0.95);
  --shadow-pop: 0 4px 12px -4px rgba(0, 0, 0, 0.6);
  --glow-opacity: 1;
}

/* ---------- THEME: Light (editorial instrument) ---------- */
[data-theme='light'] {
  --bg: #f7f5f0;
  --surface-1: #ffffff;
  --surface-2: #fbfaf7;
  --surface-3: #f0eee8;
  --inset: #ffffff;
  --inset-focus: #ffffff;

  --line: rgba(24, 24, 28, 0.12);
  --line-strong: rgba(24, 24, 28, 0.2);
  --track: rgba(24, 24, 28, 0.1);
  --hover: rgba(24, 24, 28, 0.04);

  --text: #16161a;
  --text-dim: #55555f;
  --text-faint: #8a8a93;

  --accent: #2f5fe6;
  --accent-hover: #244fc9;
  --accent-ink: #ffffff;
  --accent-soft: rgba(47, 95, 230, 0.12);

  --score: #2f5fe6;
  --score-glow: rgba(47, 95, 230, 0.18);

  --card-top: none;
  --shadow-card: 0 1px 2px rgba(20, 20, 35, 0.05), 0 14px 34px -18px rgba(20, 20, 35, 0.22);
  --shadow-pop: 0 4px 14px -6px rgba(20, 20, 35, 0.2);
  --glow-opacity: 0;
}

/* ---------- THEME: Mono (monochrome terminal) ---------- */
[data-theme='mono'] {
  --bg: #0a0a0a;
  --surface-1: #0f0f0f;
  --surface-2: #141414;
  --surface-3: #1c1c1c;
  --inset: #060606;
  --inset-focus: #060606;

  --line: rgba(255, 255, 255, 0.2);
  --line-strong: rgba(255, 255, 255, 0.32);
  --track: rgba(255, 255, 255, 0.16);
  --hover: rgba(255, 255, 255, 0.06);

  --text: #ededed;
  --text-dim: #9a9a9a;
  --text-faint: #6a6a6a;

  /* No brand accent - the score carries the only color. CTA is inverted. */
  --accent: #ededed;
  --accent-hover: #ffffff;
  --accent-ink: #0a0a0a;
  --accent-soft: rgba(255, 255, 255, 0.1);

  --score: #ededed;
  --score-glow: rgba(255, 255, 255, 0.22);

  --card-top: none;
  --shadow-card: none;
  --shadow-pop: none;
  --glow-opacity: 0;

  --font-ui: var(--font-mono);
  --r-sm: 4px;
  --r-md: 5px;
  --r-lg: 6px;
}

/* ---------- THEME: Enterprise (professional, cool corporate) ---------- */
/* A restrained, business-grade light skin: cool slate neutrals on a soft
   blue-grey ground, a single trustworthy corporate blue, crisp edges and
   subtle shadows. Distinct from the warm "Light" (paper) theme. */
[data-theme='enterprise'] {
  --bg: #eef1f6;
  --surface-1: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eaeef4;
  --inset: #ffffff;
  --inset-focus: #ffffff;

  --line: rgba(15, 23, 42, 0.12);
  --line-strong: rgba(15, 23, 42, 0.2);
  --track: rgba(15, 23, 42, 0.1);
  --hover: rgba(15, 23, 42, 0.04);

  --text: #0f172a; /* slate-900 */
  --text-dim: #475569; /* slate-600 */
  --text-faint: #94a3b8; /* slate-400 */

  /* Corporate blue - confident, not playful. */
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --accent-ink: #ffffff;
  --accent-soft: rgba(29, 78, 216, 0.1);

  --score: #1d4ed8;
  --score-glow: rgba(29, 78, 216, 0.18);

  --card-top: none;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px -16px rgba(15, 23, 42, 0.2);
  --shadow-pop: 0 4px 14px -6px rgba(15, 23, 42, 0.18);
  --glow-opacity: 0;

  /* Tighter, more businesslike corners. */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
}

/* ============================================================
   Base
   ============================================================ */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
html {
  background: var(--bg);
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 1, 'cv01' 1;
  position: relative;
  overflow-x: hidden;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
[data-theme='mono'] body {
  letter-spacing: 0;
  font-feature-settings: normal;
}

/* ---------- Atmosphere (only on dark) ---------- */
.bg-glow {
  position: fixed;
  inset: -30% -10% auto -10%;
  height: 70vh;
  z-index: 0;
  pointer-events: none;
  opacity: var(--glow-opacity);
  background: radial-gradient(50% 60% at 50% -10%, rgba(91, 140, 255, 0.08), transparent 70%);
  filter: blur(50px);
  transition: opacity 0.3s;
}
.bg-grain {
  display: none; /* the grain overlay was the most "AI template" tell - gone */
}

.hidden,
[hidden] {
  display: none !important;
}

/* Visually hidden but available to assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

/* ---------- Brand ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--text);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.brand-mark svg {
  width: 17px;
  height: 17px;
}
.brand-name {
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: -0.02em;
}
[data-theme='mono'] .brand-name {
  letter-spacing: 0.02em;
}

/* ---------- Theme switch ---------- */
.theme-slot {
  display: inline-flex;
}
.theme-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
[data-theme='mono'] .theme-switch {
  border-radius: var(--r-md);
}
.theme-switch button {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
[data-theme='mono'] .theme-switch button {
  border-radius: var(--r-sm);
}
.theme-switch button:hover {
  color: var(--text-dim);
}
.theme-switch button[aria-pressed='true'] {
  color: var(--accent);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
[data-theme='mono'] .theme-switch button[aria-pressed='true'] {
  color: var(--text);
}
.theme-switch svg {
  width: 15px;
  height: 15px;
}

/* ---------- Buttons ---------- */
.btn {
  font: inherit;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: none;
  border-radius: var(--r-md);
  padding: 10px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text);
  background: transparent;
  transition: transform 0.12s var(--ease), background 0.18s, box-shadow 0.18s, color 0.18s, opacity 0.18s;
  white-space: nowrap;
}
[data-theme='mono'] .btn {
  letter-spacing: 0.02em;
}
.btn:active {
  transform: translateY(0.5px) scale(0.992);
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.btn-block {
  width: 100%;
}
.btn-sm {
  padding: 7px 12px;
  font-size: 13.5px;
}
.btn-lg {
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 600;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: var(--shadow-pop);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}
.btn-primary:disabled {
  background: var(--accent-soft);
  color: var(--text-faint);
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 1;
}
[data-theme='mono'] .btn-primary {
  box-shadow: inset 0 0 0 1px var(--text);
}
.btn-ghost {
  color: var(--text-dim);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-ghost:hover {
  color: var(--text);
  background: var(--hover);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.link {
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.link:hover {
  color: var(--accent-hover);
}
[data-theme='mono'] .link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kbd {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  padding: 6px 9px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background: var(--hover);
  line-height: 1;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
}

/* ---------- Spinner ---------- */
.spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent-ink) 35%, transparent);
  border-top-color: currentColor;
  animation: spin 0.7s linear infinite;
}
.btn-ghost .spinner {
  border-color: var(--line);
  border-top-color: var(--accent);
}
.spinner.big {
  width: 28px;
  height: 28px;
  border-width: 3px;
  border-color: var(--line);
  border-top-color: var(--accent);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  border-radius: var(--r-sm);
  transition: box-shadow 0.15s;
}

/* ---------- Boot ---------- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--bg);
}

/* ---------- Inputs ---------- */
input,
textarea {
  width: 100%;
  background: var(--inset);
  color: var(--text);
  font: inherit;
  border: none;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  transition: box-shadow 0.16s, background 0.16s;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-faint);
}
input:focus,
textarea:focus {
  outline: none;
  background: var(--inset-focus);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft);
}
/* The 10-12% accent-soft glow is too faint on the near-white light grounds;
   give the input/pane focus a stronger ring on those themes. */
[data-theme='light'] input:focus,
[data-theme='light'] textarea:focus,
[data-theme='light'] .pane:focus-within,
[data-theme='enterprise'] input:focus,
[data-theme='enterprise'] textarea:focus,
[data-theme='enterprise'] .pane:focus-within {
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* ---------- Auth ---------- */
.auth {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-card {
  position: relative;
  width: 100%;
  max-width: 408px;
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--card-top), inset 0 0 0 1px var(--line), var(--shadow-card);
}
.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.auth-head {
  margin-bottom: 22px;
}
.auth-head .eyebrow {
  margin-bottom: 12px;
}
.auth-title {
  font-weight: 600;
  font-size: 27px;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 7px;
}
[data-theme='mono'] .auth-title {
  letter-spacing: -0.01em;
}
.auth-sub {
  color: var(--text-dim);
  margin: 0;
  font-size: 14.5px;
}

.field {
  display: block;
  margin-bottom: 14px;
}
.field-label {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 7px;
  font-weight: 450;
}
.input-wrap {
  position: relative;
}
.input-wrap input {
  padding-right: 44px;
}
.reveal {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.reveal:hover {
  color: var(--text-dim);
  background: var(--hover);
}
.reveal svg {
  width: 17px;
  height: 17px;
}
.reveal .eye-off {
  display: none;
}
.reveal[aria-pressed='true'] .eye {
  display: none;
}
.reveal[aria-pressed='true'] .eye-off {
  display: block;
}

.form-error {
  color: #e5484d;
  font-size: 13px;
  margin: 2px 0 12px;
  min-height: 0;
}
.form-error.center {
  text-align: center;
  margin: 14px 0 0;
}
#auth-submit {
  margin-top: 6px;
}
.auth-toggle {
  text-align: center;
  margin: 20px 0 0;
  color: var(--text-dim);
  font-size: 14px;
}

/* ============================================================
   App shell
   ============================================================ */
.app {
  position: relative;
  z-index: 1;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 24px;
}
.account {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Pin the topbar to the sans font in every theme. The mono theme's wider
   monospace font would otherwise resize "History" / "Sign out" / the name and
   shift the whole cluster each time the theme changes. The mono aesthetic still
   applies to everything below the header. */
[data-theme='mono'] .topbar {
  font-family: var(--font-sans);
  letter-spacing: -0.011em;
}
[data-theme='mono'] .topbar .btn {
  letter-spacing: -0.01em;
}
[data-theme='mono'] .topbar .brand-name {
  letter-spacing: -0.02em;
}
.avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  text-transform: uppercase;
}
[data-theme='mono'] .avatar {
  border-radius: var(--r-sm);
  color: var(--text);
}
.who {
  color: var(--text-dim);
  font-size: 13.5px;
  margin-right: 4px;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage {
  max-width: 880px;
  margin: 0 auto;
  padding: 12px 24px 64px;
}

/* First-run hero: before the first measurement, center the input block in the
   viewport and hold the result card, SEO explainer, and footer out of view until
   the user measures. Once revealed (a measurement starts), the layout returns to
   the normal top-aligned flow for the rest of the session. */
.stage.pre-result {
  min-height: calc(100dvh - 92px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 28px;
}
.stage.pre-result .result,
.stage.pre-result .explainer,
.stage.pre-result .foot {
  display: none;
}

/* ---------- Intro (compact, left-aligned - it's a tool, not a landing page) ---------- */
.intro {
  margin: 14px 0 22px;
}
.intro h1 {
  font-weight: 600;
  font-size: clamp(25px, 3.4vw, 33px);
  letter-spacing: -0.032em;
  line-height: 1.08;
  margin: 0 0 8px;
}
[data-theme='mono'] .intro h1 {
  letter-spacing: -0.01em;
}
.lede {
  color: var(--text-dim);
  max-width: 56ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- Console: two clearly-bordered input fields ---------- */
.console {
  display: grid;
  gap: 16px;
}
.panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pane {
  position: relative;
  padding: 14px 14px 30px;
  background: var(--inset);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.18s, background 0.18s;
}
.pane:focus-within {
  background: var(--inset-focus);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft);
}
.pane.over {
  box-shadow: inset 0 0 0 1px rgba(229, 72, 77, 0.6);
}
.pane-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  height: 16px;
}
.pane-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.18s;
}
.pane:focus-within .pane-label {
  color: var(--accent);
}
.pane.over .pane-label {
  color: #e5484d;
}
.pane-clear {
  background: none;
  border: none;
  color: var(--text-faint);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.pane-clear:hover {
  color: var(--text);
}
.console textarea {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  min-height: 176px;
  resize: none;
  line-height: 1.6;
  font-size: 15px;
  letter-spacing: -0.004em;
}
.console textarea:focus {
  background: transparent;
  box-shadow: none;
}
[data-theme='mono'] .console textarea {
  letter-spacing: 0;
}
.count {
  position: absolute;
  right: 14px;
  bottom: 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0.8;
  transition: color 0.16s, opacity 0.16s;
}
.count.zero {
  opacity: 0.4;
}
.count.warn {
  color: #d98a2b;
  opacity: 1;
}
.count.over {
  color: #e5484d;
  opacity: 1;
}

/* action bar */
.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.actions-left {
  display: flex;
  align-items: center;
  gap: 11px;
}
/* First-run lift for "Try an example": the only actionable control while the
   primary CTA is disabled. Recedes to a plain ghost button once the user types. */
.actions.first-run #try-sample {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.actions.first-run #try-sample:hover {
  color: var(--accent-hover);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
[data-theme='mono'] .actions.first-run #try-sample {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* ============================================================
   Result
   ============================================================ */
.result {
  position: relative;
  margin-top: 34px;
  padding: 30px 30px 26px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--card-top), inset 0 0 0 1px var(--line), var(--shadow-card);
  transition: box-shadow 0.5s var(--ease), background 0.5s;
}

/* Copy-result affordance: quiet by default in the card's top-right corner,
   only shown once there's a result to copy. */
.result-copy {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-faint);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.result-copy svg {
  width: 14px;
  height: 14px;
}
.result-copy:hover {
  color: var(--text);
  background: var(--hover);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.result-copy.copied {
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
[data-theme='mono'] .result-copy.copied {
  color: var(--text);
}
@media (max-width: 520px) {
  .result-copy-label {
    display: none;
  }
  .result-copy {
    padding: 7px;
  }
}

/* The cosine metric is jargon; mark its label as explainable (dotted underline,
   help cursor) so the tooltip is discoverable rather than hidden. */
.meta-help {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  cursor: help;
}
.result.is-empty {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
.result.is-active {
  box-shadow: var(--card-top), inset 0 0 0 1px var(--line), 0 0 70px -34px var(--score-glow), var(--shadow-card);
}
.result-main {
  display: flex;
  align-items: center;
  gap: 36px;
}
.gauge {
  position: relative;
  width: 188px;
  height: 188px;
  flex: none;
}
.gauge-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gauge-track {
  fill: none;
  stroke: var(--track);
  stroke-width: 15;
  stroke-linecap: round;
}
.gauge-arc {
  fill: none;
  stroke: var(--score);
  stroke-width: 15;
  stroke-linecap: round;
  stroke-dasharray: 369.45;
  stroke-dashoffset: 369.45;
  filter: drop-shadow(0 0 9px var(--score-glow));
  transition: stroke-dashoffset 1.15s var(--ease), stroke 0.6s, filter 0.6s;
}
.gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-bottom: 13px;
}
.gauge-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.gauge-readout {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  color: var(--text);
}
.gauge-num {
  font-family: var(--font-mono);
  font-size: 54px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
.is-empty .gauge-num {
  color: var(--text-faint);
  letter-spacing: 0;
}
.gauge-unit {
  position: absolute;
  left: 100%;
  bottom: 9px;
  margin-left: 3px;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 500;
  color: var(--text-faint);
}
.is-empty .gauge-unit {
  opacity: 0;
}

.verdict {
  min-width: 0;
  flex: 1;
}
.verdict-label {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 9px;
  /* Keep a hint of the score tint for character, but pull back toward the text
     color so the verdict reads as a heading, not a status pill - and holds
     contrast on the light themes. */
  color: color-mix(in oklch, var(--score) 62%, var(--text));
  transition: color 0.5s;
}
.is-empty .verdict-label {
  color: var(--text-dim);
}
.verdict-desc {
  color: var(--text-dim);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 40ch;
  /* Reserve room for ~3 lines so the band-description -> model-commentary swap
     doesn't reflow the card, and crossfade the text when it changes. */
  min-height: 3.2em;
  transition: opacity 0.28s var(--ease);
}
/* Phase 2: while the model's commentary is still being written, gently pulse the
   provisional band description so the swap-in reads as progress, not a glitch. */
.result.is-commenting .verdict-desc {
  animation: textpulse 1.5s var(--ease) infinite;
}
.verdict-desc.swapping {
  opacity: 0;
}
@keyframes textpulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.9;
  }
}
.verdict-meta {
  display: flex;
  gap: 26px;
  margin: 0;
  flex: none;
  align-self: stretch;
  padding-left: 26px;
  border-left: 1px solid var(--line);
  align-items: center;
}
.verdict-meta div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.verdict-meta dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.verdict-meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Before any result the cosine column reads only "--", which is noise - drop it
   entirely so the empty card is gauge + prompt, not a full inert instrument. */
.is-empty .verdict-meta {
  display: none;
}
.is-loading .verdict-meta {
  opacity: 0.4;
}

/* spectrum */
.spectrum {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.spectrum-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--track);
}
[data-theme='mono'] .spectrum-track {
  border-radius: 0;
}
.spectrum-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in oklch, var(--score) 35%, transparent), var(--score));
  box-shadow: 0 0 14px -2px var(--score-glow);
  transition: width 1.15s var(--ease), background 0.6s;
}
[data-theme='mono'] .spectrum-fill {
  border-radius: 0;
}
.spectrum-marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--score);
  box-shadow: 0 0 0 4px var(--bg), 0 0 16px -1px var(--score-glow);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: left 1.15s var(--ease), opacity 0.4s, background 0.6s;
}
.is-active .spectrum-marker {
  opacity: 1;
}
.spectrum-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.spectrum-scale span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* loading skeleton */
.result.is-loading .gauge-num {
  color: var(--text-faint);
}
.result.is-loading .gauge-track,
.result.is-loading .verdict-label {
  animation: pulse 1.2s var(--ease) infinite;
}
.result.is-loading .verdict-desc {
  opacity: 0.5;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.6;
  }
}

.btn svg {
  width: 15px;
  height: 15px;
}
/* The history button anchors the count badge in its corner so the badge
   appearing / gaining a digit never resizes the button or shifts its
   neighbours in the topbar. */
#history-btn {
  position: relative;
  overflow: visible;
}
.count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  line-height: 1;
  box-shadow: 0 0 0 2px var(--bg);
  z-index: 1;
}
[data-theme='mono'] .count-badge {
  border-radius: 3px;
}

/* ============================================================
   History drawer
   ============================================================ */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(5, 5, 8, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.drawer-scrim.open {
  opacity: 1;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 41;
  width: min(440px, 92vw);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  box-shadow: inset 1px 0 0 var(--line), -30px 0 80px -40px rgba(0, 0, 0, 0.6);
  transform: translateX(100%);
  transition: transform 0.36s var(--ease);
  will-change: transform;
}
.drawer.open {
  transform: translateX(0);
}
.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--line);
}
.drawer-head .eyebrow {
  margin-bottom: 9px;
}
.drawer-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.icon-btn {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-dim);
  background: transparent;
  border: none;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.icon-btn svg {
  width: 16px;
  height: 16px;
}
.icon-btn:hover {
  color: var(--text);
  background: var(--hover);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.drawer-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.link.danger {
  color: var(--text-faint);
}
.link.danger:hover {
  color: #e5484d;
}
.link.danger.armed {
  color: #e5484d;
  font-weight: 600;
}

/* history entries */
.hist-empty {
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
  padding: 60px 30px;
  line-height: 1.6;
}
.hist-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  transition: background 0.14s;
}
.hist-row:hover {
  background: var(--hover);
}
.hist {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 8px 14px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
}
.hist-score {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-align: right;
}
.hist-score small {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 1px;
}
.hist-texts {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hist-a,
.hist-b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.45;
}
.hist-a {
  color: var(--text);
}
.hist-b {
  color: var(--text-faint);
}
.hist-time {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-faint);
  white-space: nowrap;
}
/* Delete lives in its own 44px column - always reachable (keyboard + touch, not
   hover-gated), quiet at rest, and turns red on hover/focus. */
.hist-del {
  width: 44px;
  align-self: stretch;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.14s, color 0.14s;
}
.hist-row:hover .hist-del {
  opacity: 1;
}
.hist-del svg {
  width: 15px;
  height: 15px;
}
.hist-del:hover,
.hist-del:focus-visible {
  color: #e5484d;
  opacity: 1;
}

/* ---------- Explainer / FAQ (crawlable content below the tool) ---------- */
.explainer {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  max-width: 62ch;
  color: var(--text-dim);
}
.explainer h2 {
  color: var(--text);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  margin: 26px 0 8px;
}
.explainer h2:first-child {
  margin-top: 0;
}
.explainer p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.6;
}
.explainer strong {
  color: var(--text);
  font-weight: 600;
}
.explainer code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
}
.faq {
  margin: 0;
}
.faq dt {
  color: var(--text);
  font-weight: 550;
  font-size: 14.5px;
  margin-top: 16px;
}
.faq dd {
  margin: 4px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
}

.foot {
  text-align: center;
  margin-top: 26px;
  color: var(--text-faint);
  font-size: 12.5px;
}
.foot code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 680px) {
  .panes {
    grid-template-columns: 1fr;
  }
  .result {
    padding: 24px 20px 22px;
  }
  .result-main {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .verdict-desc {
    margin: 0 auto;
  }
  .verdict-meta {
    justify-content: center;
    align-self: auto;
    padding: 16px 0 0;
    border-left: none;
    border-top: 1px solid var(--line);
    width: 100%;
  }
  .actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .actions-left {
    width: 100%;
  }
  .actions-left .btn-lg {
    flex: 1;
  }
  .kbd {
    display: none;
  }
  .actions #try-sample {
    box-shadow: none;
    background: none;
    color: var(--text-faint);
    padding: 6px;
  }
  .actions #try-sample:hover {
    color: var(--text-dim);
    background: none;
  }
}

@media (max-width: 520px) {
  .who {
    display: none;
  }
  #history-btn span:not(.count-badge) {
    display: none;
  }
  /* Larger theme-switch hit targets on touch screens. */
  .theme-switch button {
    width: 34px;
    height: 34px;
  }
  .theme-switch svg {
    width: 16px;
    height: 16px;
  }
  .topbar {
    padding: 16px 18px;
  }
  .stage {
    padding: 10px 18px 56px;
  }
  .console textarea {
    min-height: 128px;
  }
}

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