:root {
  /* A clinical-chart palette: white and a faint blush paper, coral-red and
     a warm orange doing the accent work, dark slate-blue ink instead of
     warm brown - the family real vital-sign monitors and lab charts
     actually use, rather than an invented "journal" or "recorder" mood. */
  --bg: #fdf2f2;
  --surface: #ffffff;
  --surface-2: #f6e0e0;
  --border: #e6c9cc;
  --text: #2c3b42;
  --text-dim: #5c6f78;
  --accent: #c73529;       /* coral-red, darkened slightly from the reference for AA contrast with white button text - the color of the thing this app measures (blood volume pulse); heart rate + primary actions */
  --accent-2: #1f6b68;     /* petrol teal - breathing, a distinct cool hue rather than a second warm tone */
  --success: #1f6b68;      /* high confidence */
  --warning: #d9713f;      /* warm orange - medium-confidence and plausibility warnings */
  --danger: #b71c1c;       /* deeper, more alarmed red than the coral accent - errors read as distinct from "this is your heart rate" */
  --ink-on-accent: #ffffff;
  --sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
}

.app {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 20px 72px;
}

/* A focused single-task page stays a single column at every width - that is
   the identity (DESIGN.md), not a default to escape - but a fixed column on
   a wide desktop leaves the page stranded with dead margins either side.
   Let it breathe proportionally instead. */
@media (min-width: 1024px) {
  .app { max-width: 820px; }
}

@media (min-width: 1440px) {
  .app { max-width: 900px; }
}

.brand-mark {
  width: 40px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Static, not looping - the hero's trace (below) is the page's one
   orchestrated motion moment. A second, permanently-looping animation in
   the corner of every screen the whole time someone reads the page would
   be exactly the scattered-effects pattern worth avoiding. */
.brand-mark polyline {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

/* Site nav: fixed to the viewport, moves with scroll on purpose so Home /
   How it works / About / sign-in stay reachable from anywhere on a page
   that's now long enough to need that. Flush with the page, not a bar
   sitting visually on top of it: same background as .app, no border, no
   shadow, no blur - it reads as the top of the same surface everything
   else sits on, not a separate translucent panel floating above it. */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bg);
}

.site-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
}

.nav-link {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
}

.nav-link:hover { color: var(--text); }

.auth-widget {
  position: relative;
  flex-shrink: 0;
}

/* Hidden above 700px (the full nav-links row already covers it); below
   700px it replaces that row rather than just removing it, so Home/How it
   works/About stay reachable from a tap instead of only by scrolling. */
.nav-menu-toggle {
  display: none;
  appearance: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 9px;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-menu-toggle svg { width: 18px; height: 14px; }
.nav-menu-toggle:hover { border-color: var(--text-dim); }

.nav-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 16px 32px -24px rgba(44, 59, 66, 0.35);
  padding: 8px 20px;
}

.nav-menu-panel .nav-link {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.nav-menu-panel .nav-link:last-child { border-bottom: none; }

/* Below ~700px there isn't room for brand + three nav links + the auth
   control without wrapping or truncation - the menu button (above) takes
   the link row's place instead. */
@media (max-width: 700px) {
  .nav-links { display: none; }
  .nav-menu-toggle { display: block; }
  .site-nav-inner { gap: 12px; }
}

@media (min-width: 701px) {
  .nav-menu-panel { display: none !important; }
}

@media (max-width: 480px) {
  .site-nav-inner { flex-wrap: wrap; row-gap: 6px; }
  .account-bar strong { max-width: 90px; }
}

@media (max-width: 420px) {
  #authToggleBtn { font-size: 12px; }
}

/* Anchor-scrolled sections land below the fixed nav, not hidden under it. */
#top, #how-it-works, #see-it-in-action, #recorder, #about {
  scroll-margin-top: 76px;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.account-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}

.account-bar strong {
  color: var(--text);
  font-weight: 600;
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Plain ink, underlined - not the accent color. The accent is reserved for
   the one primary action per screen and for actual signal data; a "sign
   in" prompt repeated in four different places on the page would turn
   that accent into wallpaper if it inherited the color too. */
.link-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.link-btn:hover { color: var(--text-dim); }

/* Flat, not floating - a soft ambient shadow under every card, all at the
   same radius, is the single most recognizable "SaaS card kit" tell there
   is. The border alone carries the edge; depth is reserved for things
   that actually open on top of the page (the auth popover, the nav-menu
   panel), not every static container. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 24px 24px 26px;
  margin-bottom: 20px;
}

.card h2 {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.card h2::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 9px;
  vertical-align: middle;
}

#devInsights h2::before { background: var(--text-dim); }
#appScreen > .card:last-of-type h2::before { background: var(--accent-2); }

/* Marketing sections (Persuade mode): hero, how-it-works, the live example,
   and about. Distinct from the tool's card treatment - no border, no card
   shadow, wider breathing room - so the page reads as two registers: an
   article, then a focused instrument. Set in the serif rather than the
   sans that titles the tool cards below - these read as the piece being
   written about the instrument, not a control panel label. */
.section-title {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.section-desc {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 62ch;
}

/* Asymmetric hero, left-set text - a centered headline over two centered
   buttons is the single most recognizable generic-SaaS hero shape, and a
   perfectly balanced two-column split (each side vertically centered
   against the other) is close behind it. This breaks both: an unequal
   3:2 column split, and the figure on the right sits lower than the
   headline rather than centered against it - like a diagram set into the
   margin of a page rather than a hero graphic paired symmetrically with
   its text. */
.hero {
  padding: 32px 0 48px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

@media (min-width: 860px) {
  .hero { grid-template-columns: 3fr 2fr; gap: 40px; align-items: start; }
  .hero-trace-wrap { margin-top: 64px; }
}

.hero-title {
  margin: 0 0 18px;
  max-width: 15ch;
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

@media (min-width: 640px) {
  .hero-title { font-size: 54px; }
}

.hero-subtitle {
  margin: 0 0 28px;
  max-width: 56ch;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dim);
}

.hero-cta {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-cta .btn {
  padding: 13px 24px;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.hero-trace-wrap { margin: 0; }

/* The hero's one bold visual: an actual pulse trace on a strip-chart-paper
   ground, not a gradient blob or a stock photo. Grid lines aren't
   decorative - they're the paper this kind of waveform is traditionally
   recorded on, so they carry real information about what's being shown. */
.hero-trace {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 32px -24px rgba(44, 59, 66, 0.35);
}

/* A figure caption, not a decorative eyebrow - it sits below the thing it
   describes rather than announcing content that hasn't appeared yet, the
   way a diagram in a paper or a plate in a magazine is captioned. */
.hero-trace-caption {
  margin: 10px 2px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 40ch;
}

.hero-trace-svg {
  display: block;
  width: 100%;
  height: auto;
}

.hero-trace-grid-line {
  stroke: var(--border);
  stroke-width: 1;
  opacity: 0.5;
}

.hero-trace-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: hero-trace-draw 1.6s ease-out 0.3s forwards;
}

/* The single orchestrated motion moment on the page: the trace draws
   itself in once, on load, like a strip-chart recorder's pen moving
   across the paper - then everything is still. */
@keyframes hero-trace-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-trace-line {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.feature-section,
.example-section,
.about-section {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 48px 0;
  margin-bottom: 0;
  border-top: 1px solid var(--border);
}

.feature-section .section-desc,
.example-section .section-desc {
  margin-bottom: 8px;
}

/* This section describes an actual pipeline (detect -> extract two signals
   in parallel -> score confidence), not four unrelated marketing features -
   a numbered vertical sequence with a connecting line is honest to that
   shape, reads as authored for this product rather than a generic feature
   grid, and can't produce an orphaned card at any width since it's a
   single column by construction. */
.step-sequence {
  position: relative;
  margin-top: 36px;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 20px;
  row-gap: 32px;
}

@media (min-width: 500px) {
  .step-sequence { grid-template-columns: 72px 1fr; }
}

.step-item { display: contents; }

.step-connector {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 1px;
  background: var(--border);
  justify-self: end;
  margin: 12px 6px 12px 0;
}

/* A large bare numeral set into the margin, like a numbered list in a
   printed book or paper, not a small circled UI badge - the connecting
   line is secondary now, a quiet thread rather than the main device. */
.step-number {
  grid-column: 1;
  grid-row: auto;
  z-index: 1;
  align-self: start;
  justify-self: end;
  padding-right: 6px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  font-style: italic;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.step-body { grid-column: 2; }

.step-body h3 {
  margin: 6px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
}

.step-body p {
  margin: 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
}

.feature-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-dim);
}

/* feature-icon-br / feature-icon-confidence intentionally not overridden -
   all four how-it-works icons share the same neutral ink now rather than
   scattering small color accents across a list; color is reserved for
   the one primary button and for actual signal data elsewhere on the
   page. */

.example-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

@media (min-width: 768px) {
  .example-section { grid-template-columns: 1fr 1fr; }
}

.example-legend {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-dim);
}

.example-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
}

.example-swatch-face { background: var(--text); }
.example-swatch-hr { background: var(--accent); }
.example-swatch-br { background: var(--accent-2); }

.example-visual {
  display: flex;
  justify-content: center;
}

.example-figure {
  width: 100%;
  max-width: 280px;
}

.example-figure-head,
.example-figure-shoulders {
  fill: var(--surface-2);
  stroke: none;
}

.example-box {
  fill: none;
  stroke-width: 2;
}

.example-box-face { stroke: var(--text); }
.example-box-hr { stroke: var(--accent); }
.example-box-br { stroke: var(--accent-2); }

.example-box-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
}

.example-box-label-face { fill: var(--text); }
.example-box-label-hr { fill: var(--accent); }
.example-box-label-br { fill: var(--accent-2); }

.about-section p {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 68ch;
}

/* A drop cap on the opening paragraph - a real, old typographic device
   for marking where a piece of writing begins, not a decorative flourish
   bolted onto a UI screen. */
.about-section p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 600;
  line-height: 0.8;
  padding: 6px 6px 0 0;
  color: var(--text);
}

.about-section strong { color: var(--text); }

.about-section a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.about-section a:hover { color: var(--text-dim); }

.site-footer {
  margin-top: 40px;
  padding: 24px 0 0;
  border-top: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}

/* A scrim behind the open auth popover - without it the panel visibly
   overlapped live hero/feature text with nothing to separate the two,
   reading as pasted on top of the page rather than a deliberate layer
   above it. Sits below .site-nav's z-index (100) so the nav bar and the
   panel nested inside it stay on top; clicking it closes the panel via
   the existing document-level outside-click handler, since the backdrop
   itself sits outside .auth-widget. */
.auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(44, 59, 66, 0.4);
}

/* Auth widget: a compact popover anchored under the header, not a full-page
   gate - trying the recorder below never requires opening this. */
.auth-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 10;
  width: 300px;
  max-width: calc(100vw - 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 20px 40px -20px rgba(44, 59, 66, 0.45);
}

.auth-panel .field { margin-bottom: 12px; }
.auth-panel .btn { width: 100%; }
.auth-panel .hint { margin-top: 10px; }

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
}

.auth-tab {
  flex: 1;
  appearance: none;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 9px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
}

.auth-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 6px -2px rgba(44, 59, 66, 0.3);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-dim);
}

.field input,
.field select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 11px 12px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 16px;
}

.field input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Visible keyboard focus on every interactive element - distinct from mouse
   focus (:focus-visible skips the ring on a plain click). */
.btn:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.auth-tab:focus-visible,
.link-btn:focus-visible,
.row-delete:focus-visible,
video:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.camera-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.preview-wrap {
  position: relative;
  width: 280px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  background: #1c140c;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* Mirrored like a real mirror, not like the recording - people expect to
   see themselves the way a mirror shows them (raise your right hand, see
   it on the side that feels right), even though the underlying video/ROI
   math is untouched. The overlay canvas gets the same flip so tracking
   boxes stay aligned with the mirrored face instead of appearing on the
   wrong side. */
.preview-wrap video,
.preview-wrap canvas {
  transform: scaleX(-1);
}

.preview-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-wrap canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Must match .preview-wrap video's object-fit. The video crops to fill
     this box whenever the camera's native aspect ratio isn't 4:3 (true of
     virtually every phone camera) - without the same object-fit here, the
     canvas instead stretches the full uncropped frame to fill the box, so
     tracking boxes (drawn in native video pixel coordinates) land wherever
     that stretch happens to put them instead of on the actual face. */
  object-fit: cover;
  pointer-events: none;
}

.live-tracking-status {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--success);
  border: 1px solid rgba(31, 107, 104, 0.4);
}

.live-tracking-status.warning {
  color: var(--danger);
  border-color: rgba(183, 28, 28, 0.4);
}

.camera-controls {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The "camera never leaves your device" reassurance used to live only in
   marketing copy a full scroll above this card - restated right at the
   point of highest anxiety (about to grant camera access), not just
   upstream of it. */
.camera-trust-note {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-2);
}

.camera-trust-note::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  margin-right: 7px;
  vertical-align: middle;
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.btn:hover:not(:disabled) { border-color: var(--text-dim); background: var(--surface); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-on-accent);
  box-shadow: 0 10px 24px -12px rgba(199, 53, 41, 0.55);
}

.btn-primary:hover:not(:disabled) { border-color: var(--accent); background: var(--accent); filter: brightness(1.08); }

.countdown {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-2);
  min-height: 18px;
}

.hint {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--text-dim);
  margin: 4px 0 0;
  line-height: 1.6;
}

.status {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-dim);
  min-height: 18px;
}

.status.error { color: var(--danger); }

/* A ruled note, not a filled grey "card inside a card" - a box-within-a-box
   with its own background and radius is exactly the pattern that makes
   nested containers read as a component-kit demo. Top and bottom rules
   only, no fill, no corners: reads as an annotation on the page, not a
   second surface stacked on the first. */
.save-hint {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.save-hint .link-btn,
#historySignedOut .link-btn,
#monitorSignedOut .link-btn {
  font-size: inherit;
  font-family: inherit;
}

#historySignedOut,
#monitorSignedOut {
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
}

.results {
  display: flex;
  gap: 14px;
  margin-top: 18px;
}

.results.hidden { display: none; }

.stat {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
}

.stat-value {
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Two-Signal Rule (DESIGN.md): terracotta marks heart-rate data, sage marks
   breathing-rate data - applied to both the headline result and the
   history summary tiles so the color system carries meaning at every
   point a reading is shown, not just in charts. */
.stat-value.signal-hr,
.stat-mini-value.signal-hr {
  color: var(--accent);
}

.stat-value.signal-br,
.stat-mini-value.signal-br {
  color: var(--accent-2);
}

.stat-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 4px;
}

.stat-confidence {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 8px;
}

.stat-confidence.conf-high { color: var(--success); }
.stat-confidence.conf-medium { color: var(--warning); }
.stat-confidence.conf-low { color: var(--danger); }

.stat-plausibility {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--warning);
  line-height: 1.4;
}

.stat-plausibility::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
}

.plausibility-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warning);
  margin-left: 6px;
  vertical-align: middle;
}

/* Toggle switch */
.toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-dim);
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.15s ease, background 0.15s ease;
}

.toggle input:checked + .toggle-track {
  background: rgba(199, 53, 41, 0.18);
  border-color: var(--accent);
}

.toggle input:checked + .toggle-track .toggle-thumb {
  transform: translateX(14px);
  background: var(--accent);
}

.toggle input:focus-visible + .toggle-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.toggle-label { line-height: 1.35; }

/* Background monitoring */
.monitor-card { border-color: var(--border); }

.monitor-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}

.monitor-interval {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.monitor-interval select {
  width: auto;
  padding: 7px 10px;
  font-family: var(--sans);
  font-size: 13px;
}

/* Dev insights section */
.hidden { display: none !important; }

.overlay-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: #1c140c;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* Same mirrored presentation as the live preview (see .preview-wrap) -
   the replay should match what was actually seen while recording, not
   flip back to unmirrored and feel reversed by comparison. */
.overlay-wrap video,
.overlay-wrap canvas {
  transform: scaleX(-1);
}

.overlay-wrap video {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-wrap canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-dim);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.swatch-face { background: var(--text); }
.swatch-forehead { background: var(--accent); }
.swatch-chest { background: var(--accent-2); }

.warning { color: var(--danger); }

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.chart-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}

.chart-box h3 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

/* History stats + table */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.stat-mini {
  flex: 1;
  min-width: 100px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.stat-mini-value {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stat-mini-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 3px;
}

#confidenceChart { margin-top: 20px; }

.history-actions {
  display: flex;
  justify-content: flex-end;
  margin: 18px 0 10px;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 13px;
}

.history-table th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.history-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

.history-table tr:hover td { background: rgba(199, 53, 41, 0.06); }

.row-delete {
  position: relative;
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--danger);
  width: 24px;
  height: 24px;
  border-radius: 9px;
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
  font-family: var(--sans);
}

/* The visible 24px icon stays compact for the table row's density, but the
   actual tap target extends to the 44x44 accessibility floor via an
   invisible hit-area rather than inflating the icon itself. */
.row-delete::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.row-delete:hover { background: rgba(183, 28, 28, 0.1); border-color: var(--danger); }