/* ============================================================================
   APP  —  the machinery. References the variables in theme.css.
   Designers rarely need to touch this file; change look-and-feel in theme.css.
   ========================================================================== */

@import "./theme.css";

/* --- Self-hosted fonts (no network needed at the booth) --- */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
/* Buttons don't inherit type by default; make them match (as Tailwind's reset
   does), so labels inside <button> tiles/tabs use Geist at the right size. */
button { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================================
   NAV  (injected by js/nav.js on every page)
   ========================================================================== */
.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 640px) { .site-nav { padding-left: 2rem; padding-right: 2rem; } }

.nav-toggle {
  margin-left: -0.25rem;
  display: flex;
  align-items: center;
  padding: 0.25rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: var(--snowflake-blue);
  cursor: pointer;
  transition: opacity 0.2s;
}
.nav-toggle:hover { opacity: 0.8; }
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }

.nav-brand { display: flex; align-items: baseline; gap: 0.5rem; text-decoration: none; transition: opacity 0.2s; }
.nav-brand:hover { opacity: 0.8; }
.nav-brand-name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.nav-brand-sub { font-size: 0.875rem; font-weight: 500; color: var(--snowflake-blue); }

.nav-crumb-sep { font-size: 0.875rem; color: rgba(255, 255, 255, 0.2); }
.nav-crumb {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85);
}

.nav-menu {
  position: absolute;
  left: 1.25rem;
  top: 100%;
  z-index: 50;
  display: none;
  width: 14rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--line-soft);
  border-radius: 0.75rem;
  background: var(--bg-surface);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}
.nav-menu.is-open { display: block; animation: navIn 0.15s ease-out both; }
@keyframes navIn { from { opacity: 0; transform: translateY(-0.25rem); } to { opacity: 1; transform: none; } }

.nav-item {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-item:hover, .nav-item.is-active { background: var(--fill-medium); color: var(--text-primary); }

.site-main { padding: 1.5rem 2rem; }

/* ============================================================================
   SPLASH  (index.html)
   ========================================================================== */
.wrap-page { max-width: var(--page-max); margin: 0 auto; }

.splash {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 10rem);
  padding: 2.5rem 0;
}

.splash-headline {
  max-width: 42rem;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
@media (min-width: 768px) { .splash-headline { font-size: 3rem; } }
.text-analyst { color: var(--role-analyst); }
.text-bypass { color: var(--role-bypass); }

.encode {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  margin-top: 2.5rem;
}

.encode-left { display: flex; flex-direction: column; justify-content: center; padding-right: 1.5rem; }
@media (min-width: 640px) { .encode-left { padding-right: 2.5rem; } }
.encode-left-head { display: flex; flex-direction: column; gap: 0.375rem; }
.eyebrow { display: flex; align-items: center; gap: 0.5rem; }
.eyebrow .label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.eyebrow-bypass .label { color: var(--role-bypass); }
.eyebrow-analyst .label { color: var(--role-analyst); }

.dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-pill); flex: none; }
.dot-bypass { background: var(--role-bypass); }
.dot-analyst { background: var(--role-analyst); }

.encode-domain {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}
@media (min-width: 768px) { .encode-domain { font-size: 1.875rem; } }

.encode-fields {
  margin-top: 1rem;
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
}
.encode-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.375rem 0;
  border-top: 1px solid var(--line-faint);
}
.encode-field:first-child { border-top: 0; }
.field-name {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
@media (min-width: 768px) { .field-name { font-size: 0.75rem; } }
.field-value {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .field-value { font-size: 1rem; } }

.encode-mid { position: relative; display: flex; align-items: center; justify-content: center; }
.encode-divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--line-strong);
}
.encode-badge-col {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-primary);
}
.encoder-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.encoder-pill .name { font-size: 0.75rem; font-weight: 500; color: var(--text-primary); }
.encoder-pill svg { width: 1rem; height: 1rem; color: var(--accent-cyan); }
.encode-fn { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); }

.encode-right { display: flex; flex-direction: column; justify-content: center; padding-left: 1.5rem; }
@media (min-width: 640px) { .encode-right { padding-left: 2.5rem; } }
.role-tag { display: flex; align-items: center; gap: 0.625rem; }
.role-tag .label { font-size: 0.875rem; color: var(--text-secondary); }

.vector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  width: fit-content;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--accent-cyan);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .vector { font-size: 1rem; } }
.vector span { display: flex; align-items: center; justify-content: flex-end; min-height: 1.5rem; transition: color 0.3s ease; }
.vector.showing-raw span { color: var(--text-primary); }

.splash-tagline { max-width: 42rem; margin-top: 2.5rem; font-size: 1.125rem; font-weight: 500; color: var(--text-primary); }
.splash-tagline .muted { font-weight: 400; color: var(--text-secondary); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.5rem; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.btn-primary { font-weight: 600; background: var(--accent-orange); color: #fff; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent-orange) 90%, transparent); transform: translateY(-0.125rem); }
.btn-primary:hover svg { transform: translateX(0.125rem); }
.btn-primary:active { transform: none; }
.btn-secondary { font-weight: 500; background: var(--fill-medium); color: var(--text-secondary); }
.btn-secondary:hover { background: var(--fill-strong); color: var(--text-primary); transform: translateY(-0.125rem); }
.btn-secondary:active { transform: none; }

/* --- Splash motion --- */
@keyframes splashUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.splash-up { animation: splashUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes encodeLock { from { text-shadow: 0 0 10px rgba(0, 240, 255, 0.5); } to { text-shadow: 0 0 0 rgba(0, 240, 255, 0); } }
.encode-lock { animation: encodeLock 0.6s ease-out both; }
@keyframes leftRefresh { from { opacity: 0.4; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.left-refresh { animation: leftRefresh 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes domainSwap { 0% { opacity: 0; transform: translateY(8px) scale(0.98); } 100% { opacity: 1; transform: none; } }
.domain-swap { animation: domainSwap 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .splash-up, .encode-lock, .left-refresh, .domain-swap { animation: none; }
  .btn:hover { transform: none; }
}

/* ============================================================================
   CONTENT PAGES  —  layout tokens shared by the architecture, comparison,
   and evaluation pages. Added here so theme.css stays a pure palette.
   ========================================================================== */
:root {
  --reading-max: 64rem;  /* the architecture reading column (max-w-5xl) */
  --wide-max:    80rem;  /* the comparison / evaluation grids (max-w-7xl) */
  --tooltip-bg:  #0d1829;
}

/* Single content wrapper, mirroring the dashboard's `main px-8`: a 2rem
   horizontal gutter on every page. Vertical rhythm is owned per page. */
.content-main { padding: 0 2rem; }

/* ============================================================================
   ARCHITECTURE PAGES  (architecture / tokenization / data-flow /
   access-control / training / deploy). Mirrors arch_components.ex.
   ========================================================================== */
.arch > section { border-top: 1px solid var(--line-faint); }
.arch > section:first-child { border-top: 0; }
.arch-inner { max-width: var(--reading-max); margin: 0 auto; }
.arch code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: #e7edf2;
  background: var(--fill-strong);
  padding: 0.15em 0.45em;
  border-radius: 5px;
  white-space: nowrap;
}
.arch strong { color: var(--text-primary); font-weight: 600; }

/* Hero */
.arch-hero { padding: 3.5rem 1.5rem 3rem; }
@media (min-width: 768px) { .arch-hero { padding: 5rem 1.5rem 4rem; } }
.arch-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--text-muted);
}
.arch-title {
  margin: 0; max-width: 48rem;
  font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.05; color: var(--text-primary);
}
@media (min-width: 768px) { .arch-title { font-size: 3rem; } }
.arch-subtitle {
  margin: 1.25rem 0 0; max-width: 42rem;
  font-size: 1.125rem; line-height: 1.6; color: var(--text-secondary);
}

/* Section */
.arch-section { padding: 3.5rem 1.5rem; }
@media (min-width: 768px) { .arch-section { padding: 4rem 1.5rem; } }
.arch-section-head { max-width: 42rem; }
.arch-section-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--text-muted);
}
.arch-h2 {
  margin: 0; font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.025em; color: var(--text-primary);
}
@media (min-width: 768px) { .arch-h2 { font-size: 1.875rem; } }
.arch-desc { margin: 0.75rem 0 0; line-height: 1.6; color: var(--text-secondary); }

/* Cards */
.arch-cards {
  margin-top: 2rem; display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .arch-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .arch-cards { grid-template-columns: repeat(3, 1fr); } }
.arch-cards.two { }
@media (min-width: 640px) { .arch-cards.two { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .arch-cards.two { grid-template-columns: repeat(2, 1fr); } }
.arch-card {
  border: 1px solid var(--line-faint);
  background: var(--fill-soft);
  border-radius: 1rem; padding: 1.5rem;
}
.arch-card-label {
  margin: 0 0 0.5rem;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
}
.arch-card-title { margin: 0 0 0.375rem; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.arch-card-body { font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); }

/* Table */
.arch-table-wrap {
  margin-top: 2rem; overflow-x: auto;
  border: 1px solid var(--line-faint); border-radius: 1rem;
}
.arch-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.875rem; }
.arch-table th {
  border-bottom: 1px solid var(--line-soft);
  padding: 0.75rem 1rem; text-align: left;
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
}
.arch-table td {
  border-bottom: 1px solid var(--line-faint);
  padding: 0.75rem 1rem; vertical-align: top; color: var(--text-secondary);
}
.arch-table tbody tr:last-child td { border-bottom: 0; }
.arch-table tbody tr { transition: background 0.15s; }
.arch-table tbody tr:hover { background: var(--fill-faint); }

/* Steps */
.arch-steps { margin: 2rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.arch-step { display: flex; gap: 1rem; }
.arch-step-num {
  display: grid; place-items: center; flex: none;
  height: 1.75rem; width: 1.75rem; border-radius: var(--radius-pill);
  background: var(--fill-medium); font-size: 0.875rem; font-weight: 600; color: var(--text-primary);
}
.arch-step-body { padding-top: 0.125rem; line-height: 1.6; color: var(--text-secondary); }

/* Note */
.arch-note { margin: 1rem 0 0; max-width: 42rem; font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); }

/* Inline lifecycle badge */
.arch-badge {
  margin-left: 0.5rem; display: inline-block; vertical-align: middle;
  border-radius: var(--radius-pill); background: var(--fill-medium);
  padding: 0.1rem 0.5rem; font-size: 0.65rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
}

/* Diagram panel + flow chips */
.diagram-panel {
  margin-top: 2rem; border: 1px solid var(--line-faint);
  background: var(--fill-faint); border-radius: 1rem; padding: 1.5rem;
}
@media (min-width: 768px) { .diagram-panel { padding: 2rem; } }
.diagram-label {
  margin: 0 0 1.25rem;
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--text-muted);
}
.flow-col { display: flex; flex-direction: column; gap: 1.5rem; }
.flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.flow-group + .flow-group { }
.flow-group-label {
  margin: 0 0 0.75rem;
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
}
.flow-divide { border-top: 1px solid var(--line-faint); padding-top: 1.5rem; }
.flow-chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  border: 1px solid var(--line-soft); border-radius: 0.5rem;
  padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--text-primary);
  background: var(--bg-surface);
}
.flow-chip.mono { font-family: var(--font-mono); font-size: 0.8rem; }
.flow-chip.bypass  { border-color: color-mix(in srgb, var(--role-bypass) 40%, transparent);  color: var(--role-bypass); }
.flow-chip.analyst { border-color: color-mix(in srgb, var(--role-analyst) 40%, transparent); color: var(--role-analyst); }
.flow-chip.accent  { border-color: color-mix(in srgb, var(--accent-cyan) 40%, transparent);  color: var(--accent-cyan); }
.flow-chip.wide { width: 10rem; justify-content: center; }
.flow-arrow { display: inline-flex; flex-direction: column; align-items: center; flex: none; color: var(--text-muted); }
.flow-arrow-label { margin-bottom: 0.25rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; }
.flow-arrow-glyph { font-size: 1.125rem; line-height: 1; }
.flow-plus { color: var(--text-muted); }
.flow-aside { font-size: 0.875rem; color: var(--text-muted); }
.flow-aside.cap { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; }
.flow-note { margin: 1.25rem 0 0; max-width: 42rem; font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); }

/* Closing CTA (the one orange moment on an arch page) */
.arch-cta { padding: 3.5rem 1.5rem; }
@media (min-width: 768px) { .arch-cta { padding: 4rem 1.5rem; } }
.arch-cta-inner {
  max-width: var(--reading-max); margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem;
}
@media (min-width: 640px) { .arch-cta-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.arch-cta-text { max-width: 28rem; margin: 0; color: var(--text-secondary); }
.arch-cta-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: var(--radius-pill); background: var(--accent-orange);
  padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 600;
  color: #fff; text-decoration: none; transition: transform 0.2s ease;
}
.arch-cta-btn:hover { transform: translateY(-0.125rem); }
.arch-cta-btn:active { transform: none; }
.arch-cta-btn .arr { transition: transform 0.2s ease; }
.arch-cta-btn:hover .arr { transform: translateX(0.125rem); }

/* ============================================================================
   COMPARISON PAGE
   ========================================================================== */
.content-wrap-wide { max-width: var(--wide-max); margin: 0 auto; padding: 1.5rem 0; }
.content-wrap-narrow { max-width: var(--wide-max); margin: 0 auto; padding: 1.5rem 0; }

.cmp-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.page-title { margin: 0; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary); }
.cmp-subtitle-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; min-height: 1.75rem; flex-wrap: wrap; }
.cmp-subtitle { margin: 0; color: var(--text-muted); }
.cmp-source-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.1rem 0.5rem; border-radius: var(--radius-pill);
  background: var(--fill-medium); color: var(--text-muted);
}
.cmp-source-badge.live { background: color-mix(in srgb, var(--feedback-success) 15%, transparent); color: var(--feedback-success); }
.cmp-snowflake-link {
  display: inline-flex; height: 1.75rem; width: 1.75rem; align-items: center; justify-content: center;
  border-radius: 0.5rem; background: color-mix(in srgb, var(--snowflake-blue) 10%, transparent);
  color: var(--snowflake-blue); transition: background 0.15s;
}
.cmp-snowflake-link:hover { background: color-mix(in srgb, var(--snowflake-blue) 20%, transparent); }
.cmp-snowflake-link svg { width: 1rem; height: 1rem; }

.cmp-tabs { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cmp-tab {
  padding: 0.5rem 1rem; border: 0; border-radius: var(--radius-pill);
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
  background: var(--fill-medium); color: var(--text-secondary); transition: background 0.15s, color 0.15s;
}
.cmp-tab:hover { background: var(--fill-strong); }
.cmp-tab.is-active { background: var(--accent-orange); color: #fff; font-weight: 600; }

.cmp-panels { border: 1px solid var(--line-faint); background: var(--bg-surface); border-radius: 1rem; overflow: hidden; }
.cmp-head-row, .cmp-row { display: grid; grid-template-columns: 1fr 1fr; }
.cmp-head-row { border-bottom: 1px solid var(--line-faint); }
.cmp-head-row > * + *, .cmp-row > * + * { border-left: 1px solid var(--line-faint); }
.cmp-row + .cmp-row { border-top: 1px solid var(--line-faint); }
.cmp-colhead { padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.cmp-colhead-title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.2; color: var(--text-primary); }
.cmp-colhead-sub { margin: 0; font-size: 0.75rem; color: var(--text-muted); }
.cmp-cell { padding: 1.25rem 1.5rem; }
.cmp-pt-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.75rem; }
.cmp-pt-val { margin-left: 0.25rem; font-family: var(--font-mono); font-size: 1rem; text-transform: none; letter-spacing: normal; }
.cmp-pt-val.bypass { color: var(--role-bypass); }
.cmp-pt-val.analyst { color: var(--role-analyst); word-break: break-all; }
.cmp-features { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.25rem; row-gap: 0.625rem; }
.cmp-feature-name { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; color: color-mix(in srgb, var(--text-secondary) 80%, transparent); line-height: 1; margin-bottom: 0.25rem; }
.cmp-feature-val { font-family: var(--font-mono); font-size: 1rem; color: var(--accent-cyan); line-height: 1; }
.cmp-latent { border-radius: 0.5rem; background: var(--fill-faint); padding: 0.625rem 0.75rem; }
.cmp-latent-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.5rem; }
.cmp-latent-vals { display: flex; flex-wrap: wrap; column-gap: 0.75rem; row-gap: 0.375rem; }
.cmp-latent-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1rem; color: color-mix(in srgb, var(--accent-cyan) 80%, transparent); }

/* Imaging (chest x-ray) rows */
.cmp-scan-row { display: flex; align-items: center; gap: 1rem; }
.cmp-scan { width: 7rem; height: 7rem; flex: none; border-radius: 0.5rem; overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px var(--line-soft); }
.cmp-scan img { width: 100%; height: 100%; object-fit: cover; }
.cmp-scan-meta { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }
.cmp-scan-name { font-size: 1rem; font-weight: 600; color: var(--role-bypass); line-height: 1.2; }
.cmp-scan-fields { display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: 0.25rem; margin-top: 0.5rem; }
.cmp-scan-field-name { text-transform: uppercase; letter-spacing: 0.025em; color: color-mix(in srgb, var(--text-secondary) 70%, transparent); }
.cmp-scan-field-val { margin-left: 0.25rem; font-family: var(--font-mono); color: var(--text-secondary); }
.cmp-pt-row { display: flex; align-items: center; gap: 0.5rem; }
.cmp-label-badge { margin-left: auto; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); }
.cmp-label-badge.normal { background: color-mix(in srgb, var(--feedback-success) 15%, transparent); color: var(--feedback-success); }
.cmp-label-badge.disease { background: color-mix(in srgb, var(--feedback-error) 15%, transparent); color: var(--feedback-error); }

.cmp-loading { display: flex; align-items: center; justify-content: center; padding: 5rem 0; color: var(--text-muted); }

/* ============================================================================
   EVALUATION PAGE
   ========================================================================== */
.eval-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.eval-title-row { display: flex; align-items: center; gap: 0.75rem; }
.eval-arxiv {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.25rem 0.625rem; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-blue) 15%, transparent);
  color: var(--accent-cyan); text-decoration: none; transition: background 0.15s;
}
.eval-arxiv:hover { background: color-mix(in srgb, var(--accent-blue) 25%, transparent); }
.eval-arxiv svg { width: 0.625rem; height: 0.625rem; opacity: 0.7; }

/* info dot tooltip */
.info-dot { position: relative; display: inline-flex; cursor: help; vertical-align: middle; }
.info-dot-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; font-size: 10px; font-weight: 600;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent-blue) 30%, transparent); color: var(--accent-cyan);
}
.info-dot.sm .info-dot-i { width: 0.875rem; height: 0.875rem; font-size: 9px; }
.info-dot-tip {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 0.5rem; width: 16rem; padding: 0.5rem 0.75rem; z-index: 50;
  font-size: 0.75rem; line-height: 1.5; text-transform: none; letter-spacing: normal; font-weight: 400;
  color: var(--text-primary); background: var(--tooltip-bg);
  border: 1px solid var(--line-soft); border-radius: 0.5rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.info-dot:hover .info-dot-tip, .info-dot:focus-within .info-dot-tip { opacity: 1; }

.eval-hero { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 2.5rem; }
@media (min-width: 1024px) { .eval-hero { grid-template-columns: repeat(2, 1fr); } }
.eval-card { background: var(--bg-surface); border: 1px solid var(--line-faint); border-radius: 1rem; padding: 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.util-eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.75rem; }
.util-big-row { display: flex; align-items: baseline; gap: 0.5rem; }
.util-big { font-size: 3rem; font-weight: 700; letter-spacing: -0.025em; color: var(--role-bypass); line-height: 1; }
.util-caption { font-size: 0.875rem; color: var(--text-secondary); margin: 0.5rem 0 0; }
.util-sub { font-size: 0.75rem; color: var(--text-muted); margin: 0.25rem 0 0; }
.eval-claim-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.eval-claim-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.eval-claim-body { font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }

.eval-why { background: var(--bg-surface); border: 1px solid var(--line-faint); border-radius: 1rem; padding: 1.5rem; margin-bottom: 3rem; }
.eval-why-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.25rem; flex-wrap: wrap; }
.eval-why-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.eval-why-dims { font-size: 0.75rem; color: var(--text-muted); font-family: var(--font-mono); }
.eval-why-sub { font-size: 0.75rem; color: var(--text-muted); margin: 0 0 1rem; }
.eval-why-bars { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 768px) { .eval-why-bars { grid-template-columns: repeat(3, 1fr); } }

/* proof bar */
.proof-bar { display: flex; align-items: center; gap: 0.75rem; }
.proof-bar-label { width: 7rem; flex: none; font-size: 0.75rem; color: var(--text-secondary); line-height: 1.2; }
.proof-bar-track { flex: 1; height: 1.25rem; background: var(--fill-medium); border-radius: 0.25rem; overflow: hidden; }
.proof-bar-fill { height: 100%; border-radius: 0.25rem; opacity: 0.7; }
.proof-bar-fill.emphasis { opacity: 1; }
.proof-bar-fill.role-bypass { background: var(--role-bypass); }
.proof-bar-fill.role-analyst { background: var(--role-analyst); }
.proof-bar-fill.feedback-warning { background: var(--feedback-warning); }
.proof-bar-fill.text-muted { background: var(--text-muted); }
.proof-bar-val { width: 2.75rem; flex: none; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.75rem; color: var(--text-primary); }

.section-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.section-head h2 { margin: 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.section-head .rule { flex: 1; height: 1px; background: var(--line-faint); }

.eval-layout { display: block; }
@media (min-width: 1024px) { .eval-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; } }
.eval-tiles-demo { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .eval-tiles-demo { grid-template-columns: repeat(3, 1fr); } }
.eval-tiles-suite { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .eval-tiles-suite { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .eval-tiles-suite { grid-template-columns: repeat(3, 1fr); } }
.eval-rail-col { margin-top: 1.5rem; }
@media (min-width: 1024px) { .eval-rail-col { margin-top: 0; } .eval-rail-sticky { position: sticky; top: 1.5rem; } }

.tile {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-surface); border: 1px solid var(--line-faint);
  border-radius: 1rem; padding: 1.25rem; transition: border-color 0.15s;
}
.tile:hover { border-color: var(--line-strong); }
.tile.is-open { border-color: var(--accent-orange); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-orange) 40%, transparent); }
.tile-task { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.tile-label { font-weight: 600; line-height: 1.2; margin-bottom: 0.75rem; color: var(--text-primary); }
.tile-verdict { font-size: 1.125rem; font-weight: 600; line-height: 1.2; }
.tile-verdict.parity { color: var(--role-analyst); }
.tile-verdict.near { color: var(--feedback-warning); }
.tile-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; font-size: 0.75rem; color: var(--text-muted); }
.tile-vsdp-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--feedback-success); }
.tile-caveat { color: color-mix(in srgb, var(--feedback-warning) 80%, transparent); }

.detail-rail { background: var(--bg-surface); border: 1px solid color-mix(in srgb, var(--accent-orange) 30%, transparent); border-radius: 1rem; padding: 1.5rem; }
.detail-rail-empty { background: color-mix(in srgb, var(--bg-surface) 50%, transparent); border: 1px dashed var(--line-soft); border-radius: 1rem; padding: 2rem; text-align: center; }
.detail-rail-empty p { margin: 0; font-size: 0.875rem; color: var(--text-muted); }
.detail-rail-empty p + p { margin-top: 0.5rem; font-size: 0.75rem; color: color-mix(in srgb, var(--text-muted) 60%, transparent); }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; }
.detail-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--text-primary); }
.detail-sub { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--text-muted); }
.detail-close { flex: none; height: 2rem; width: 2rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0.5rem; background: none; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.detail-close:hover { background: var(--fill-medium); color: var(--text-primary); }
.detail-caveat { font-size: 0.75rem; color: color-mix(in srgb, var(--feedback-warning) 90%, transparent); background: color-mix(in srgb, var(--feedback-warning) 10%, transparent); border-radius: 0.5rem; padding: 0.5rem 0.75rem; margin: 0 0 1rem; }
.detail-h4 { display: flex; align-items: center; gap: 0.25rem; margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.detail-h4 .soft { text-transform: none; letter-spacing: normal; color: color-mix(in srgb, var(--text-muted) 70%, transparent); }
.detail-bars { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.attack-table { width: 100%; font-size: 0.75rem; margin-bottom: 0.75rem; border-collapse: collapse; }
.attack-table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 500; padding-bottom: 0.375rem; }
.attack-table thead th.r, .attack-table td.r { text-align: right; }
.attack-table tbody { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.attack-table tbody tr { border-top: 1px solid var(--line-faint); }
.attack-table td { padding: 0.25rem 0; }
.attack-table td.name { color: var(--text-secondary); font-family: var(--font-sans); }
.attack-table td.dp { color: var(--text-muted); }
.detail-note { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 1.25rem; }
.detail-vsdp { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.25rem; }
.detail-vsdp-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.25rem; color: var(--feedback-success); }
.detail-vsdp-label { font-size: 0.75rem; color: var(--text-muted); }
.detail-dl { margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line-faint); display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.75rem; }
.detail-dl-row { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; }
.detail-dl dt { color: var(--text-muted); display: flex; align-items: center; gap: 0.25rem; }
.detail-dl dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.detail-dl dd.src { font-size: 10px; color: var(--text-muted); text-align: right; word-break: break-all; }

.text-success { color: var(--feedback-success); }
.text-error { color: var(--feedback-error); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================================
   SPLASH (home) v2 — D/E notation and the wide-record-collapses-to-latent
   animation, matching HomeLive. These rules extend/override the base splash.
   ========================================================================== */
.encode { position: relative; gap: 0; }
.encode-left, .encode-right { justify-content: flex-start; }

/* left: domain + raw feature count (D) */
.encode-domain-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.encode-dims, .encode-latent {
  font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-secondary); white-space: nowrap;
}
@media (min-width: 768px) { .encode-dims, .encode-latent { font-size: 1rem; } }

/* the named rows are a slice of D; the rest continue and fade out */
.encode-fade {
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.encode-fade-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.375rem 0; border-top: 1px solid var(--line-faint);
}
.encode-fade .bar { height: 0.5rem; border-radius: 2px; background: rgba(255, 255, 255, 0.15); }
.encode-fade .bar.val { width: 2.5rem; background: rgba(255, 255, 255, 0.12); }
.encode-fade .bar.w28 { width: 7rem; }
.encode-fade .bar.w20 { width: 5rem; }

/* mid: the encoder icon above the pill */
.encoder-icon { height: 3rem; width: auto; }

/* right: latent count (E) over the collapse stage */
.encode-right-head { display: flex; flex-direction: column; gap: 0.375rem; }
.latent-stage { margin-top: 1rem; height: 18rem; overflow: hidden; }

/* the vector area: JS sets grid-template-columns/gap/width as it animates */
.vector { margin-top: 0; width: fit-content; transform-origin: left center; grid-template-columns: none; }
.vector .lat-cell { display: flex; align-items: center; justify-content: flex-end; min-height: 1.5rem; }
.vector .feat-cell {
  display: block; min-height: 0; font-size: 0.6rem; line-height: 1.5; text-align: right;
  color: rgba(255, 255, 255, 0.3); overflow: hidden; white-space: nowrap;
}
.vector .feat-cell.feat-real { color: rgba(255, 255, 255, 0.78); }

@keyframes featIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.vector.feat-in { animation: featIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes collapseOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.5); } }
.vector.collapsing { animation: collapseOut 0.34s cubic-bezier(0.5, 0, 0.75, 0) both; }
@keyframes latIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.vector.lat-in { animation: latIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* paused indicator (spacebar) */
.encode-pause-hint {
  position: absolute; top: -1.75rem; right: 0; z-index: 10;
  color: var(--text-secondary); opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.encode-pause-hint svg { width: 1rem; height: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .vector.feat-in, .vector.collapsing, .vector.lat-in { animation: none; }
}

/* ============================================================================
   LINE HEIGHTS — match the dashboard's Tailwind type scale. Tailwind bundles a
   line-height with every text size; the semantic classes above left these at
   "normal", which drifts a few px. These bring the rhythm back in line.
   ========================================================================== */
.page-title { line-height: 2.25rem; }                 /* text-3xl */
.arch-h2 { line-height: 1.2; }                          /* text-2xl/3xl heading */
.util-caption { line-height: 1.25rem; }                 /* text-sm */
.eval-claim-body { line-height: 1.625; }                /* leading-relaxed */
.eval-claim-title { line-height: 1.5rem; }              /* text-base */
.tile-label, .tile-verdict { line-height: 1.25; }       /* leading-tight */
.detail-title, .cmp-colhead-title { line-height: 1.25; }/* leading-tight */
.proof-bar-label { line-height: 1.25; }                 /* leading-tight */
.detail-note { line-height: 1.625; }                    /* leading-relaxed */