/* =====================================================================
 *  OWLiFT - Dark Editorial design system
 *  Dark forest green palette · Plus Jakarta Sans · JetBrains Mono
 * ===================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Surfaces - warm near-black (was forest-green-tinted; pulled back so
     green stops bleeding into the entire atmosphere). */
  --bg-0:  #0a0908;   /* page base */
  --bg-1:  #141210;   /* sidebar / nav */
  --bg-2:  #1d1a16;   /* card surface */
  --bg-3:  #2a261f;   /* inset / deeper card */
  --bg-4:  #3a3325;   /* highlight surface */

  /* Lines */
  --line:     rgba(255, 255, 255, 0.08);
  --line-mid: rgba(255, 255, 255, 0.14);

  /* Accent - bright forest green (owl pupils, primary CTA, data highlights) */
  --accent:       #4ade80;
  --accent-light: #86efac;
  --accent-dim:   #16a34a;
  --accent-bg:    rgba(74, 222, 128, 0.10);

  /* Gold - milestone / achievement / win signal. Used SPARINGLY for
     completed wins. Targets: hero achievement numbers, "achieved" goal
     badges, Hoot's NEXT recommendation, page eyebrow numerals. */
  --gold:       #d4a853;
  --gold-light: #f0cc7a;
  --gold-dim:   #c19237;
  --gold-bg:    rgba(212, 168, 83, 0.10);

  /* Ember (deep amber) - ENERGY / ACTION / heat. The "go do this" color
     that breaks the green monochrome. Targets: primary CTAs (+ Log scan,
     ENTER SYSTEM, Save *), active nav left-border, hover states on
     cards, achievement hero glow halo, streak counters. NOT a data
     signal - for kinetic moments, not measurements. */
  --ember:       #c87a1f;
  --ember-light: #e09940;
  --ember-dim:   #9c5e15;
  --ember-bg:    rgba(200, 122, 31, 0.10);

  /* Legacy alias retained so `--amber*` references keep working. */
  --amber:    var(--gold);
  --amber-bg: var(--gold-bg);

  /* Status */
  --positive:    #4ade80;
  --positive-bg: rgba(74, 222, 128, 0.10);
  --negative:    #e05252;
  --negative-bg: rgba(224, 82, 82, 0.08);
  --warn:        #d4a853;
  --warn-bg:     rgba(212, 168, 83, 0.10);

  /* Text */
  --text:       #f0ede8;
  --text-muted: #9b8e82;
  --text-dim:   #5d5550;

  /* Backward-compatibility aliases - selectors reference these throughout */
  --black:      var(--bg-0);
  --charcoal:   var(--bg-1);
  --surface:    var(--bg-2);
  --surface2:   var(--bg-3);
  --surface3:   var(--bg-4);
  --border:     var(--line);
  --border2:    var(--line-mid);
  --teal:       var(--accent);
  --teal-light: var(--accent-light);
  --teal-dim:   var(--accent-dim);
  --teal-bg:    var(--accent-bg);
  --navy:       var(--bg-0);
  --green:      var(--positive);
  --green-bg:   var(--positive-bg);
  --red:        var(--negative);
  --red-bg:     var(--negative-bg);
  --blue:       var(--text-muted);
  --blue-bg:    rgba(155, 142, 130, 0.06);
  --ink:        var(--text);
  --ink-2:      #c8c0b8;
  --muted:      var(--text-muted);
  --muted-2:    var(--text-dim);

  /* Type - Plus Jakarta Sans replaces Bebas Neue + DM Sans everywhere */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif:   'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Layout */
  --sidebar-w: 220px;
  --nav-h: 56px;
  --mobile-header-h: 56px;
  --container-w: 1200px;
  --gutter: 24px;
  --radius:    10px;
  --radius-sm: 7px;
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
hr.rule { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--black); padding: 8px 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ── Site shell - fixed sidebar + main ─────────────────────────────── */
/* Sidebar is position: fixed (always locked to viewport) and main content
   gets a left margin equal to the sidebar width to compensate. We keep
   the grid hint as a fallback for browsers that disable position: fixed,
   but the fixed sidebar is the canonical layout. */
body { min-height: 100vh; }

.site-header {
  background: var(--charcoal);
  border-right: 1px solid var(--border);
  padding: 22px 0;
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w); height: 100vh; overflow-y: auto;
  z-index: 50;
}

.site-nav { display: contents; }
.nav-inner {
  display: flex; flex-direction: column; gap: 22px;
  flex: 1; padding: 0 14px;
}

.logo {
  display: flex; align-items: center;
  gap: 10px;
  padding: 0 8px 18px;
  border-bottom: 1px solid var(--border);
}
img.logo-mark {
  width: 42px; height: 42px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.22));
  display: block;
}
.logo-wordmark-stack {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 3px; min-width: 0;
}
.logo-wordmark {
  font-family: var(--font-display);
  font-weight: 800; font-size: 17px;
  letter-spacing: -0.045em; line-height: 1;
  color: rgba(240,237,232,0.92);
  display: block;
}
.logo-domain {
  font-size: 9px; color: var(--text-dim);
  letter-spacing: 1.2px; text-transform: uppercase;
}

.footer-wordmark {
  width: 160px; height: auto; display: block;
  margin-bottom: 10px;
  opacity: 0.92;
}

.nav-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-links li { margin: 0; }
.nav-links a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 6px;
  color: var(--text-muted); font-size: 13px;
  transition: background 0.15s, color 0.15s;
  border-left: 2px solid transparent;
}
.nav-links a:hover { background: var(--surface); color: var(--text); }
.nav-links a.active {
  /* Active page = ember signal - the energy color says "you're here, do work" */
  background: var(--ember-bg); color: var(--ember-light);
  border-left-color: var(--ember);
  border-radius: 0 6px 6px 0; padding-left: 12px;
}
.nav-links .btn-primary {
  display: block; padding: 10px 14px; margin-top: 10px;
  background: var(--ember); color: var(--text);
  border-radius: 7px; text-align: center;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
}
.nav-links .btn-primary:hover { background: var(--ember-light); }
.nav-links .btn-primary.active { background: var(--ember); color: var(--text); border-left-color: transparent; }
.nav-links .nav-signout { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.nav-links .nav-signout a {
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.nav-links .nav-signout a:hover { background: transparent; color: var(--text-muted); }

/* Mobile-only "+ Log scan" CTA in header (hidden on desktop) - kept
   for backward compatibility with any callers; new pattern below. */
.nav-cta-mobile {
  display: none;
  padding: 8px 14px; flex-shrink: 0;
  background: var(--ember); color: var(--text);
  border-radius: 7px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.15s;
}
.nav-cta-mobile:hover, .nav-cta-mobile.active { background: var(--ember-light); }

/* New mobile header CTAs - Log scan (ember solid, primary) + Ask Hoot
   (ghost with green halo, secondary). Icon + label on tablets,
   icon-only on narrow phones. */
.mobile-cta-row {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.mobile-cta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mobile-cta-pill svg,
.mobile-cta-pill img { flex-shrink: 0; }

.mobile-cta-log {
  background: var(--ember);
  color: var(--text);
  border-color: var(--ember);
}
.mobile-cta-log:hover,
.mobile-cta-log.active {
  background: var(--ember-light);
  border-color: var(--ember-light);
}

.mobile-cta-hoot {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border2);
}
.mobile-cta-hoot img {
  filter: drop-shadow(0 0 6px rgba(74,222,128,0.20));
}
.mobile-cta-hoot:hover,
.mobile-cta-hoot.active {
  border-color: var(--accent-dim);
  color: var(--accent);
}
.mobile-cta-hoot.active {
  background: var(--accent-bg);
}

/* Form check pill - same ghost+green-halo pattern as Hoot but uses
   currentColor on the SVG so the reticle owl picks up the pill's text
   colour as it goes from muted → accent on hover/active. */
.mobile-cta-formcheck {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border2);
}
.mobile-cta-formcheck img {
  filter: drop-shadow(0 0 6px rgba(74,222,128,0.20));
}
.mobile-cta-formcheck:hover,
.mobile-cta-formcheck.active {
  border-color: var(--accent-dim);
  color: var(--accent);
}
.mobile-cta-formcheck.active {
  background: var(--accent-bg);
}

/* Mobile dropdown nav - hidden on desktop, shown when toggled on mobile */
.mobile-actions, .scroll-progress { display: none; }
.nav-toggle {
  display: none;       /* shown via media query at <860px */
  background: transparent; border: 1px solid var(--border);
  width: 38px; height: 38px;
  border-radius: 7px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; padding: 0; flex-shrink: 0;
  cursor: pointer; transition: border-color 0.15s;
}
.nav-toggle:hover { border-color: var(--accent-dim); }
.nav-toggle span {
  width: 16px; height: 1.5px; background: var(--text); border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-nav {
  display: none;       /* hidden by default on all sizes */
  position: fixed;
  top: var(--mobile-header-h, 56px);
  left: 0; right: 0;
  background: var(--charcoal);
  border-bottom: 1px solid var(--border);
  z-index: 49;
  max-height: 0;
  overflow-y: hidden;          /* hidden while collapsed to drive the slide */
  transition: max-height 0.28s ease;
}
.mobile-nav.open {
  /* Cap at viewport-minus-header so every menu item is reachable, and
     allow internal scroll if the list still overflows on tiny phones. */
  max-height: calc(100vh - var(--mobile-header-h, 56px));
  max-height: calc(100dvh - var(--mobile-header-h, 56px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 0; }
.mobile-nav li { margin: 0; }
.mobile-nav a {
  display: block;
  padding: 13px 22px;
  font-size: 14px;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.mobile-nav a:hover { background: var(--surface); color: var(--text); }
.mobile-nav a.active {
  background: var(--accent-bg); color: var(--accent);
  border-left-color: var(--accent);
}

#main-content {
  background: var(--black);
  min-height: 100vh;
  padding: 28px 32px 60px;
  margin-left: var(--sidebar-w);
  overflow-x: hidden;
}

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-footer {
  position: relative;
  border-top: 1px solid var(--border);
  margin-top: 72px;
  padding: 36px 32px 28px;
  font-size: 11px; color: var(--text-dim);
  font-family: var(--font-mono);
  background: var(--charcoal);
}
/* On desktop, the fixed sidebar overlays the leftmost 220px of the
   footer. Push padding right of the sidebar so content stays visible,
   and shift the ember accent so it lands on the visible portion. */
@media (min-width: 861px) {
  .site-footer { padding-left: calc(var(--sidebar-w) + 40px); padding-right: 40px; }
  .site-footer::before { left: var(--sidebar-w); }
}
.site-footer::before {
  /* Hairline ember accent - visual signature, low intensity */
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 120px; height: 1px;
  background: linear-gradient(90deg, var(--ember), transparent);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr 0.8fr 1fr;
  gap: 32px;
  max-width: var(--container-w); margin: 0 auto;
  align-items: start;
}
.footer-col {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.footer-tag {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ember);
}
.footer-fine {
  margin: 0;
  font-size: 11px; line-height: 1.55;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.footer-tagline {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-dim);
}
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 800; font-size: 20px;
  letter-spacing: -0.045em; line-height: 1;
  color: rgba(240,237,232,0.85);
}
.footer-name {
  margin: 2px 0 4px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}
.footer-credit { text-align: right; }
.footer-credit .footer-tag,
.footer-credit .footer-fine,
.footer-credit .footer-name { text-align: right; }
.footer-legal-links {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.footer-legal-links a {
  font-size: 11.5px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible {
  color: var(--ember-light);
}

/* Legal pages (Privacy, Terms) - long-form prose layout */
.legal-container { max-width: 760px; padding-bottom: 80px; }
.legal-meta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.06em;
  margin-top: -4px;
}
.legal-body {
  margin-top: 40px;
  font-size: 15.5px; line-height: 1.7;
  color: var(--text);
}
.legal-body h2 {
  margin: 36px 0 12px;
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 14px; color: var(--text-muted); }
.legal-body ul {
  margin: 0 0 18px; padding-left: 22px;
  color: var(--text-muted);
}
.legal-body li { margin-bottom: 6px; }
.legal-body a {
  color: var(--ember-light);
  text-decoration: underline;
  text-decoration-color: rgba(200,122,31,0.4);
  text-underline-offset: 2px;
}
.legal-body a:hover,
.legal-body a:focus-visible {
  text-decoration-color: var(--ember);
}
.legal-body strong { color: var(--text); font-weight: 600; }

/* On legal pages, hide the dashboard sidebar so the public legal text
   reads as a public document (it is). Authed users still get there via
   the footer link, and we surface a "Back to OWLiFT" link in the page
   header so they don't feel stranded. */
body.page-legal .site-header { display: none; }
body.page-legal #main-content { margin-left: 0; padding-top: 0; }
body.page-legal .site-footer { padding-left: 40px; padding-right: 40px; }
body.page-legal .site-footer::before { left: 0; }
@media (max-width: 720px) {
  body.page-legal #main-content { padding-top: 0; }
}
.legal-public-nav {
  width: 100%;
  padding: 22px 0 12px;
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.legal-public-nav .legal-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  letter-spacing: -0.04em;
  color: var(--text);
}
.legal-public-nav .legal-brand img { width: 28px; height: 28px; }
.legal-public-nav .legal-back {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: color 0.15s, border-color 0.15s;
}
.legal-public-nav .legal-back:hover,
.legal-public-nav .legal-back:focus-visible {
  color: var(--ember-light);
  border-color: var(--ember-dim);
}

/* Settings page - account info + data export + account deletion */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.settings-row + .settings-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.settings-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px;
}
.settings-value { font-size: 15px; color: var(--text); }
.settings-value.mono { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.settings-copy { color: var(--text-muted); margin: 0 0 16px; line-height: 1.65; }
.settings-danger { border-color: rgba(224,82,82,0.32); }
.settings-danger-disclosure {
  margin-top: 12px;
  border-top: 1px dashed var(--border);
  padding-top: 14px;
}
.settings-danger-disclosure > summary {
  cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red);
  list-style: none;
  padding: 6px 0;
}
.settings-danger-disclosure > summary::-webkit-details-marker { display: none; }
.settings-danger-disclosure[open] > summary { color: var(--red); margin-bottom: 8px; }
.settings-danger-disclosure > summary::before {
  content: "+";
  display: inline-block; width: 12px;
  margin-right: 6px;
  color: var(--red);
}
.settings-danger-disclosure[open] > summary::before { content: "−"; }
@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .footer-credit,
  .footer-credit .footer-tag,
  .footer-credit .footer-fine,
  .footer-credit .footer-name { text-align: left; }
}
.footer-tagline {
  margin: 0;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim);
}

/* ── Type primitives ─────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.eyebrow .num { color: var(--gold); }
.eyebrow .sep { color: var(--text-dim); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 16px;
  line-height: 1;
}

.lead {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 640px;
}

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

/* Section spacing */
.section { margin: 40px 0; }
.section-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 7px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-sm { padding: 7px 12px; font-size: 11px; letter-spacing: 0.02em; }
.btn-lg { padding: 13px 22px; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.btn-block { display: flex; width: 100%; }

.btn-solid, .btn-primary {
  /* Self-contained button chrome - works whether used standalone
     (`class="btn-primary"`) or compound (`class="btn btn-primary"`).
     Primary action colour is ember; green stays reserved for live
     data signals. */
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 7px;
  border: 1px solid var(--ember);
  background: var(--ember);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.btn-solid:hover, .btn-primary:hover {
  background: var(--ember-light);
  border-color: var(--ember-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(200, 122, 31, 0.22);
}
.btn-solid:active, .btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-ghost {
  background: transparent; color: var(--text-muted);
  border-color: var(--border);
}
.btn-ghost:hover { color: var(--accent); border-color: var(--accent-dim); }

.btn-danger {
  background: transparent; color: var(--red); border-color: rgba(224, 82, 82, 0.3);
}
.btn-danger:hover { background: var(--red-bg); border-color: var(--red); }

.btn:disabled,
.btn[disabled],
.btn-primary:disabled,
.btn-primary[disabled] {
  cursor: not-allowed;
  opacity: 0.48;
  filter: saturate(0.55);
  box-shadow: none;
}
.btn-solid:disabled,
.btn-solid[disabled],
.btn-primary:disabled,
.btn-primary[disabled] {
  background: var(--surface3);
  border-color: var(--border2);
  color: var(--text-dim);
}
.btn:disabled:hover,
.btn[disabled]:hover,
.btn-primary:disabled:hover,
.btn-primary[disabled]:hover {
  background: var(--surface3);
  border-color: var(--border2);
  color: var(--text-dim);
}

/* ── Hero (page-dashboard hero block) ────────────────────────────────── */
.hero {
  position: relative;
  margin: -28px -32px 24px;
  padding: 72px 32px 52px;
  background:
    linear-gradient(180deg,
      rgba(31, 61, 43, 0.35) 0%,
      var(--bg-0) 100%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero-inner { max-width: var(--container-w); margin: 0 auto; }
.hero-kicker {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-dim); display: block; margin-bottom: 14px;
}
.hero-kicker-stale { color: var(--warn); }
.hero-since-line {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--text-muted); margin: -8px 0 20px;
}
.hero-since-line .positive { color: var(--positive); }
.hero-since-line .negative { color: var(--negative); }
.hero-since-line .neutral  { color: var(--text-muted); }
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.96;
  color: var(--text);
  margin: 0 0 18px;
  max-width: 920px;
  text-transform: uppercase;
}
.hero-dek {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 0 36px;
  line-height: 1.55;
}
.hero-dek::first-letter {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 2.6em;
  line-height: 0.7;
  float: left;
  margin-right: 0.06em;
  margin-top: 0.06em;
  color: var(--accent);
}

.hero-stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 32px;
  overflow: hidden;
}
.hero-stat-strip.stat-strip-6 {
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1100px) {
  .hero-stat-strip.stat-strip-6 { grid-template-columns: repeat(3, 1fr); }
  .hero-stat-strip.stat-strip-6 .hero-stat-item:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
  .hero-stat-strip.stat-strip-6 .hero-stat-item:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 720px) {
  .hero-stat-strip.stat-strip-6 { grid-template-columns: repeat(2, 1fr); }
  .hero-stat-strip.stat-strip-6 .hero-stat-item:nth-child(-n+4) { border-bottom: 1px solid var(--border); }
  .hero-stat-strip.stat-strip-6 .hero-stat-item:nth-child(odd) { border-left: 0; }
}
.hero-stat-item { padding: 16px 18px; position: relative; }
.hero-stat-item + .hero-stat-item { border-left: 1px solid var(--border); }
.hero-stat-label {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim); display: block; margin-bottom: 6px;
}
.hero-stat-value {
  font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); line-height: 1; display: block;
  font-variant-numeric: tabular-nums;
}
.hero-stat-unit { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-left: 4px; font-weight: 400; }
.hero-stat-delta {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
  display: block; margin-top: 6px;
}
.hero-stat-delta.positive { color: var(--green); }
/* Red is the alarm signal - wrong-direction deltas, high-risk metrics.
   Gold is reserved for reward / milestone / editorial accent only. */
.hero-stat-delta.negative { color: var(--red); }

.hero-body-inset {
  position: absolute; top: 32px; right: 36px;
  width: 200px; height: auto; opacity: 0.85; pointer-events: none;
}
@media (max-width: 960px) { .hero-body-inset { display: none; } }

.hero-progress-bar {
  margin-top: 8px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.hero-progress-label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.progress-track {
  height: 4px; background: var(--surface2); border-radius: 999px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: var(--accent);
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-progress-dates {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim); letter-spacing: 0.05em;
}
.hero-progress-dates .proj { color: var(--accent); }

.status-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--border);
}
.status-badge.on-track     { color: var(--green); background: var(--green-bg); border-color: rgba(57, 217, 138, 0.25); }
.status-badge.slightly-off { color: var(--amber); background: var(--amber-bg); border-color: rgba(216, 167, 64, 0.28); }
.status-badge.behind       { color: var(--red);   background: var(--red-bg);   border-color: rgba(224, 82, 82, 0.25); }
.status-badge.neutral,
.status-badge { color: var(--text-muted); }

/* Corrective copy under the goal progress bar - quiet, italic, narrates
   what the tiered status actually means and how to get back on plan. */
.hero-progress-note {
  margin: 12px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 640px;
}

/* ── Cards ───────────────────────────────────────────────────────────── */
.card,
.metric-card,
.scan-card,
.goal-hero-card,
.goal-form-card,
.scan-form-card,
.chart-wrap,
.empty-state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Weekly Insight Card - auto-generated coach narrative under the hero */
.insight-card {
  margin: 24px 0 8px;
  padding: 22px 26px;
  background:
    linear-gradient(135deg, rgba(93, 232, 208, 0.07) 0%, rgba(93, 232, 208, 0) 60%),
    var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.insight-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.insight-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--teal);
}
.insight-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  animation: insightPulse 2.2s ease-in-out infinite;
}
@keyframes insightPulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  50%      { opacity: 0.4; box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}
.insight-source {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim); transition: opacity 0.3s ease;
}
#insight-eyebrow-label { transition: opacity 0.3s ease; }
.insight-body { display: flex; flex-direction: column; gap: 14px; }
.insight-narrative {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px; line-height: 1.55;
  color: var(--text);
}
@media (max-width: 720px) {
  .insight-card { padding: 18px 18px; margin: 18px 0 4px; }
  .insight-narrative { font-size: 16px; }
}
.insight-recommendation {
  display: flex; gap: 10px; align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.insight-rec-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  flex-shrink: 0;
}
.insight-rec-text {
  font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  color: var(--text-muted);
}

/* Skeleton loader (visible until the JS fills the real text in) */
.insight-skeleton {
  display: block;
  height: 14px; margin-bottom: 8px;
  background: linear-gradient(
    90deg,
    var(--surface2) 0%,
    var(--surface3) 50%,
    var(--surface2) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: insightShimmer 1.4s ease-in-out infinite;
}
.insight-skeleton.skeleton-short { width: 60%; }
@keyframes insightShimmer {
  0%   { background-position:  100% 0; }
  100% { background-position: -100% 0; }
}

/* Metric grid (dashboard "Latest scan") */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1080px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }
.metric-card {
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.15s, transform 0.15s;
}
.metric-card:hover { border-color: var(--accent-dim); }
.metric-label {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
}
.metric-value {
  font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric-unit { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-left: 4px; }
.metric-delta {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-muted);
}
.metric-delta.positive { color: var(--green); }
.metric-delta.negative { color: var(--red); }
.metric-delta.neutral  { color: var(--text-muted); }

/* Sheet error banner */
.sheet-error-banner {
  background: var(--red-bg);
  border: 1px solid rgba(224, 82, 82, 0.35);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--red);
  font-size: 13px;
  margin: 18px 0;
  display: flex; gap: 10px;
}

/* Empty state */
.empty-state {
  padding: 56px 28px;
  text-align: center;
}
.empty-state-art {
  display: block; margin: 0 auto 22px;
  filter: drop-shadow(0 0 16px rgba(57, 217, 138, 0.18));
}

/* Charts */
.dashboard-grid,
.charts-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 16px;
}
@media (max-width: 960px) { .dashboard-grid, .charts-row { grid-template-columns: 1fr; } }
.chart-wrap { padding: 18px; }
.chart-title {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.chart-title .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chart-title .dot.accent { background: var(--accent); }
.chart-title .dot.secondary { background: var(--blue); }
.chart-canvas-wrap { position: relative; height: 220px; }

/* Scan timeline cards */
.scan-strip-wrap { overflow-x: auto; padding-bottom: 6px; }
.scan-strip { display: flex; gap: 10px; min-width: 100%; }
.scan-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  min-width: 158px; flex-shrink: 0;
  transition: border-color 0.15s, transform 0.15s;
}
.scan-card:hover { border-color: var(--accent-dim); }
.scan-card.latest { border-color: var(--accent-dim); background: linear-gradient(180deg, var(--accent-bg) 0%, var(--surface) 100%); }
.scan-date { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.scan-weight { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); line-height: 1; }
.scan-weight small { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-left: 3px; font-weight: 400; }
.scan-bf { font-family: var(--font-mono); font-size: 10px; color: var(--accent); }
.scan-annots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.scan-annot {
  font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 2px; line-height: 1.4;
}
.annot-lowest  { background: var(--accent-bg);  color: var(--accent); }
.annot-swing   { background: var(--amber-bg);   color: var(--amber);  }

/* Empty-state icon (new-user state) */
.empty-state-icon { display: flex; justify-content: center; }

/* Goal cards */
.goal-hero-card { padding: 22px; position: relative; }
.goal-trajectory-art { display: none; } /* legacy cream illustration retired */
.goal-type-badge {
  display: inline-block; padding: 3px 10px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: 999px; margin-bottom: 14px;
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid var(--accent-dim);
}
.goal-type-badge.cut       { background: var(--blue-bg);  color: var(--blue);  border-color: rgba(92, 158, 255, 0.3); }
.goal-type-badge.bulk      { background: var(--green-bg); color: var(--green); border-color: rgba(57, 217, 138, 0.3); }
.goal-type-badge.recomp    { background: var(--accent-bg);  color: var(--accent);  border-color: var(--accent-dim); }
.goal-type-badge.maintain  { background: var(--surface2); color: var(--text-muted); border-color: var(--border); }

.goal-targets {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 720px) { .goal-targets { grid-template-columns: 1fr; } }
.goal-target { padding: 14px 16px; background: var(--surface2); border-radius: var(--radius-sm); }
.gt-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); display: block; margin-bottom: 5px; }
.gt-value { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }

.projection-block { border-top: 1px solid var(--border); padding-top: 14px; }
.projection-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.projection-row:last-child { border-bottom: 0; }
.pr-label { color: var(--text-muted); }
.pr-value { font-family: var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }

/* Forms */
.scan-form-card,
.goal-form-card { padding: 24px; }
.scan-form-layout { display: flex; flex-direction: column; gap: 20px; }
.form-section-label {
  display: block; padding-bottom: 6px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.row-actions { display: flex; gap: 8px; }

.input { display: flex; flex-direction: column; gap: 6px; position: relative; }
.input label, label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
}
.input input,
.input select,
.input textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
select, textarea {
  width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--text); font-family: var(--font-body);
  /* 16px is the magic number - iOS Safari auto-zooms when an input <16px
     gets focused, forcing the user to pinch back out. */
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s;
}
.input input:focus, .input select:focus, .input textarea:focus,
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { min-height: 80px; resize: vertical; font-family: var(--font-body); }

/* Field-glyph is decorative only and on small screens it competes with the
   native select chevron - hide it entirely. The select label is enough. */
.input-with-glyph .field-glyph { display: none; }

/* Native date input - force consistent left-aligned, full-width rendering
   across iOS Safari (which otherwise centers the value in a pill) and
   Android/Chrome. */
input[type="date"] {
  color-scheme: dark;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  width: 100%;
  display: block;
}
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-height: 0;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75) sepia(1) saturate(4) hue-rotate(0deg);
  opacity: 0.75; cursor: pointer;
  margin-left: auto;
}
input[type="date"]::-webkit-datetime-edit {
  padding: 0; color: var(--text);
}
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }

/* Chat layout - fills the viewport. Orb header and context bar are
   pinned at the top of the chat layout (they don't move when scrolling
   the message thread). The messages area is the ONLY scrollable region
   inside the chat. The input bar sits at the bottom of the layout, just
   above the iOS URL bar. The page footer is rendered below the chat
   layout so it only appears if the user over-scrolls past it. */
.page-chat #main-content { padding: 0; }
/* Chat is a full-viewport surface - lock both <html> and <body> so the
   page can't scroll and the orb header stays pinned. Hides the global
   footer entirely (irrelevant on a conversation surface). */
.page-chat .site-footer { display: none; }
html:has(body.page-chat),
body.page-chat {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.chat-layout {
  display: flex; flex-direction: column;
  background: var(--black);
  /* Fill the viewport, minus the fixed mobile header on phones.
     Order matters: vh fallback first, dvh second so dvh wins on iOS. */
  height: 100vh;
  height: 100dvh;
}
@media (max-width: 860px) {
  .chat-layout {
    height: calc(100vh - var(--mobile-header-h));
    height: calc(100dvh - var(--mobile-header-h));
  }
}
.chat-orb-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--charcoal);
  flex-shrink: 0;
}
.chat-orb-header img {
  width: 48px; height: 48px; flex: 0 0 48px;
  filter: drop-shadow(0 0 14px rgba(57, 217, 138, 0.32));
}
.chat-orb-header .label-stack { display: flex; flex-direction: column; line-height: 1; flex: 1 1 auto; }
.chat-orb-header .name { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--accent); }
.chat-orb-header .sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 5px; }

.chat-clear {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 11px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.chat-clear:hover { color: var(--accent); border-color: var(--accent-dim); }

/* Context bar - sits between the orb header and the message thread */
.chat-context-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 28px;
  background: var(--teal-bg);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--teal); letter-spacing: 0.04em;
  flex-shrink: 0;
}
.chat-context-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
  animation: insightPulse 2.2s ease-in-out infinite;
}
.chat-context-text { flex: 1; line-height: 1.45; }

/* Starter prompts - chips inside the empty-state bubble */
.chat-empty-state {
  align-self: stretch; padding: 8px 4px;
  display: flex; flex-direction: column; gap: 14px;
}
.chat-empty-headline {
  font-family: var(--font-serif); font-style: italic;
  font-size: 16px; line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}
.chat-prompt-list {
  display: flex; flex-direction: column; gap: 8px;
}
.chat-prompt-chip {
  display: block; width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: var(--font-body); font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.chat-prompt-chip:hover {
  border-color: var(--teal-dim);
  background: var(--surface2);
}
.chat-prompt-chip:active { transform: translateY(1px); }
.chat-prompt-chip::before {
  content: "→ ";
  color: var(--teal);
  font-family: var(--font-mono);
  margin-right: 6px;
}

.chat-messages {
  flex: 1 1 auto;
  min-height: 0;             /* lets the flex child actually shrink + scroll */
  padding: 24px 28px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
}
.message { display: flex; max-width: 720px; }
.message.user { align-self: flex-end; flex-direction: row-reverse; }
.message.system { max-width: 100%; align-self: center; }
.msg-bubble {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 15px;
  font-size: 13.5px; line-height: 1.7; color: var(--text);
}
.message.user .msg-bubble {
  background: var(--accent-bg); border-color: var(--accent-dim);
  border-top-right-radius: 3px;
}
.message.ai .msg-bubble { border-top-left-radius: 3px; color: var(--text-muted); }
.message.system .msg-bubble {
  background: transparent; border: 1px dashed var(--border);
  color: var(--text-dim); font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.06em; text-align: center;
}
.msg-time { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim); margin: 6px 8px 0; align-self: flex-end; }
.message.user .msg-time { margin-left: 0; margin-right: 8px; }

.typing-indicator { display: flex; gap: 5px; padding: 12px 14px; }
.typing-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: typing 1.2s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.chat-input-bar {
  border-top: 1px solid var(--border); background: var(--charcoal);
  padding: 14px 28px 18px; flex-shrink: 0;
  /* Bottom of the flex column - stays anchored without sticky, since the
     parent .chat-layout has a fixed height. */
}
.chat-input-inner {
  display: flex; gap: 10px; align-items: flex-end;
  max-width: 920px; margin: 0 auto;
}
.chat-textarea {
  flex: 1; resize: none;
  min-height: 44px; max-height: 200px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  color: var(--text); font-family: var(--font-body);
  font-size: 16px;       /* iOS auto-zoom prevention; see input rule */
  outline: none;
}
.chat-textarea:focus { border-color: var(--accent); }
.chat-send {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--ember); color: var(--text);
  border: none; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.chat-send:hover { background: var(--ember-light); }
.chat-send svg { width: 18px; height: 18px; }

.chat-keyboard-hint {
  text-align: center;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-dim);
  margin: 8px 0 0;
}
@media (max-width: 860px) {
  /* Touch keyboards don't have Shift+Enter - hide the desktop hint */
  .chat-keyboard-hint { display: none; }
}

/* Video page */
/* ── Video / Form Check page ─────────────────────────────────────────── */
.video-layout { padding: 8px 0 60px; }

.video-hero { margin-bottom: 32px; }
.video-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(240,237,232,0.3);
  margin-bottom: 10px;
}
.video-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 8vw, 72px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 0.92;
  color: rgba(240,237,232,0.92);
  margin: 0 0 14px;
}
.video-dek {
  font-family: var(--font-body); font-size: 15px; font-style: italic;
  line-height: 1.75; color: rgba(240,237,232,0.38);
  max-width: 480px; margin: 0;
}

/* Drop zone */
.drop-zone {
  position: relative; isolation: isolate;
  margin-top: 0; padding: 48px 28px 40px;
  border: 1px dashed rgba(74,222,128,0.2); border-radius: 14px;
  text-align: center;
  background: rgba(8,20,11,0.7); backdrop-filter: blur(18px);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.drop-zone:hover, .drop-zone:focus {
  border-color: rgba(74,222,128,0.5);
  background: rgba(8,20,11,0.85);
  outline: none;
}
.drop-zone input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; overflow: hidden;
}
.drop-zone.dragging {
  border-color: var(--accent);
  background: rgba(31,61,43,0.5);
}
.drop-owl {
  margin: 0 auto 16px; width: 64px; height: 64px;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.drop-zone:hover .drop-owl { transform: scale(1.1); }
.drop-zone.dragging .drop-owl { transform: scale(1.15) rotate(-4deg); }
.drop-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; color: rgba(240,237,232,0.88); margin-bottom: 6px;
}
.drop-sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(240,237,232,0.28); margin-bottom: 8px;
}
.drop-hint {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(74,222,128,0.45); letter-spacing: 0.08em; margin: 0;
}

/* File preview */
.file-preview {
  display: none; margin-top: 14px; padding: 12px 16px;
  background: rgba(8,20,11,0.6); border: 1px solid rgba(31,61,43,0.5);
  border-radius: 10px; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; color: rgba(240,237,232,0.7);
}
.file-preview.visible { display: flex; }
.file-name { flex: 1; }
.file-size { color: rgba(240,237,232,0.35); font-size: 11px; }

/* Loading */
.analysis-loading {
  display: none; flex-direction: column; align-items: center;
  padding: 56px 24px; gap: 16px; text-align: center;
}
.analysis-loading.visible { display: flex; }
.analysis-owl-wrap { position: relative; }
.analysis-owl {
  display: block;
  animation: owlPulse 1.8s ease-in-out infinite;
}
@keyframes owlPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.1); opacity: 0.75; }
}
.analysis-label {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em; color: rgba(240,237,232,0.88);
}
.analysis-note {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: rgba(240,237,232,0.3); margin: 0;
}

/* Results panel */
.result-panel {
  display: none; margin-top: 28px; padding: 26px;
  background: rgba(8,20,11,0.75); backdrop-filter: blur(18px);
  border: 1px solid rgba(31,61,43,0.45);
  border-top: 1px solid rgba(74,222,128,0.18);
  border-radius: 14px;
}
.result-panel.visible { display: block; }
.result-eyebrow {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(74,222,128,0.5); margin: 0 0 4px;
}
.result-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 18px; gap: 16px;
}
.result-exercise {
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
  color: rgba(240,237,232,0.92); letter-spacing: -0.03em;
}
.score-ring {
  flex-shrink: 0; display: flex; align-items: baseline; gap: 3px;
  font-family: var(--font-display); font-weight: 700;
  color: var(--accent); padding: 10px 16px;
  background: rgba(31,61,43,0.5);
  border: 1px solid rgba(74,222,128,0.25); border-radius: 10px;
}
.score-ring.score-green { color: var(--accent); border-color: rgba(74,222,128,0.35); }
.score-ring.score-amber { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.score-ring.score-red   { color: #f87171; border-color: rgba(248,113,113,0.3); }
.score-num { font-size: 34px; line-height: 1; }
.score-label {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(240,237,232,0.3); letter-spacing: 0.1em;
}
.result-summary {
  color: rgba(240,237,232,0.55); line-height: 1.75;
  font-size: 14px; margin: 0 0 20px;
}
.strengths-panel, .issues-panel {
  padding: 14px 16px;
  background: rgba(31,61,43,0.2);
  border: 1px solid rgba(31,61,43,0.4);
  border-radius: 10px; margin-bottom: 12px;
}
.panel-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 12px;
}
.strengths-panel .panel-title { color: var(--accent); }
.issues-panel .panel-title { color: #f87171; }
.strengths-panel ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.strengths-panel li {
  padding-left: 16px; position: relative;
  color: rgba(240,237,232,0.55); font-size: 13px; line-height: 1.65;
}
.strengths-panel li::before {
  content: '+'; position: absolute; left: 0;
  color: var(--accent); font-weight: 700;
}

/* History - desktop table, mobile card list */
.history-card-list { display: none; }

@media (max-width: 860px) {
  /* Hide the wide table; show the stacked cards instead. */
  .history-table-wrap { display: none; }
  .history-card-list  { display: flex; flex-direction: column; gap: 12px; }
  /* Charts row stacks vertically by default; just constrain height. */
  .charts-row .chart-canvas-wrap { height: 220px; }
}

.history-card {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.15s, background 0.15s;
}
.history-card:hover,
.history-card:focus-visible {
  border-color: var(--ember-dim);
  background: var(--surface2);
}
.history-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.history-card-date {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.history-card-method {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.history-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.history-card-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 0;
}
.history-card-label {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
}
.history-card-value {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--text); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.history-card-value small {
  font-family: var(--font-mono); font-size: 10px; font-weight: 400;
  color: var(--text-muted); margin-left: 3px;
}
.history-card-value.risk { color: var(--red); }
.history-card-note {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 13px; color: var(--text-muted); line-height: 1.5;
}

/* History table */
.history-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.history-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-body); font-size: 12.5px;
  min-width: 920px;          /* triggers horizontal scroll on mobile */
}
.history-table thead th {
  background: var(--charcoal);
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 400;
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.history-table tbody tr { transition: background 0.12s; }
.history-table tbody tr:hover { background: var(--surface2); }
.history-table tbody td {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  color: var(--text-muted); white-space: nowrap;
}
.history-table tbody tr:last-child td { border-bottom: 0; }
.history-table .date-col { font-family: var(--font-mono); color: var(--text); }
.history-table .weight, .history-table .ice, .history-table .neon, .history-table .gold { color: var(--text); }
.history-table .gold { color: var(--accent); }
.history-table .negative { color: var(--red); }

/* Misc */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.accent { background: var(--accent); }
.dot.secondary { background: var(--blue); }
.dot.neon, .dot.gold { background: var(--accent); }
.dot.ice { background: var(--blue); }

/* Notice banners (goals form errors etc) */
.notice {
  padding: 12px 16px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  margin: 14px 0;
  font-size: 13px;
}
.notice.red { background: var(--red-bg); border-color: rgba(224, 82, 82, 0.3); color: var(--red); }
.notice strong { display: block; margin-bottom: 4px; color: var(--red); }

/* ── Mobile (<860px): sidebar collapses to a fixed top bar w/ hamburger ─── */
@media (max-width: 860px) {
  body { display: block; }

  .site-header {
    position: fixed; top: 0; left: 0; right: 0;
    width: 100%; height: var(--mobile-header-h);
    border-right: 0; border-bottom: 1px solid var(--border);
    padding: 0; overflow: visible;
    z-index: 50;
  }
  /* placeholder - see consolidated #main-content rule below */
  .nav-inner {
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 0 14px; gap: 12px; height: 100%;
  }
  .logo {
    padding: 0; border: 0; flex-shrink: 1; min-width: 0;
    margin-right: auto;
    flex-direction: row; align-items: center; gap: 8px;
  }
  img.logo-mark { width: 34px; height: 34px; }
  .logo-wordmark { font-size: 15px; }
  .logo-wordmark-stack { gap: 0; }
  .logo-domain { display: none; }

  /* Hide the inline horizontal nav on mobile - replaced by the dropdown */
  .nav-links { display: none; }

  /* Show the legacy single-pill (rarely used) and the new two-pill
     row in the header, immediately left of the hamburger. */
  .nav-cta-mobile { display: inline-flex; align-items: center; }
  .mobile-cta-row { display: inline-flex; }

  /* Hamburger toggle is right-most */
  .nav-toggle { display: flex; margin-left: 6px; }

  /* Mobile nav drawer slides down when toggled open. Height + scroll
     are now driven by the base .mobile-nav rules above so every item
     stays reachable. */
  .mobile-nav { display: block; }

  /* Main content reflows below the fixed header. Top padding is the header
     height + a breathing-room margin so content isn't pinned to the
     header bottom. Other sides keep page-edge gutters. */
  #main-content {
    margin-left: 0;
    padding: calc(var(--mobile-header-h) + 18px) 16px 40px;
  }
  /* Chat is special - needs no top breathing-room because the orb header
     is its own visual anchor immediately under the site header. */
  .page-chat #main-content { padding: var(--mobile-header-h) 0 0; }

  /* Hero: tighten breathing room, kill drop cap (Bebas Neue 2.6x is too big at small sizes) */
  .hero {
    margin: -18px -16px 18px;
    padding: 36px 18px 30px;
    background-position: center 40%;
  }
  .hero-headline { font-size: clamp(32px, 9vw, 44px); }
  .hero-dek { font-size: 14.5px; max-width: 100%; }
  .hero-dek::first-letter {
    font-size: 1em; float: none;
    margin: 0; color: inherit;
  }
  .hero-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-stat-item:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .hero-stat-item:nth-child(odd) { border-left: 0; }
  .hero-stat-value { font-size: 24px; }

  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .goal-targets { grid-template-columns: 1fr; }

  /* Chat on mobile - pin .chat-layout via position:fixed so it physically
     cannot scroll under the site-header, regardless of html/body scroll
     state. The previous body+html overflow:hidden trick relied on :has()
     and was unreliable on iOS Safari. Fixed positioning is bulletproof. */
  .page-chat #main-content {
    padding: 0;
    height: 0;             /* main-content doesn't claim flow space */
    margin: 0;
  }
  .chat-layout {
    position: fixed;
    top: var(--mobile-header-h);
    left: 0; right: 0; bottom: 0;
    height: auto;          /* override the desktop 100dvh rule */
  }
  .chat-orb-header { padding: 14px 16px; gap: 10px; }
  .chat-orb-header img { width: 40px; height: 40px; flex-basis: 40px; }
  .chat-orb-header .name { font-size: 17px; }
  .chat-orb-header .sub { font-size: 9px; }
  .chat-clear { padding: 4px 9px; font-size: 9px; letter-spacing: 0.14em; }
  .chat-context-bar { padding: 8px 16px; font-size: 10.5px; }
  .chat-messages { padding: 16px; gap: 12px; }
  .chat-input-bar { padding: 10px 14px 14px; }
  .chat-input-inner { gap: 8px; }
  /* font-size MUST stay 16px on mobile - iOS Safari auto-zooms the page
     in for any input <16px when it gets focus. */
  .chat-textarea { padding: 11px 12px; }
  .chat-send { width: 40px; height: 40px; }
  .chat-send svg { width: 16px; height: 16px; }

  /* Video drop zone: smaller padding so the page fits without overflow */
  .drop-zone { padding: 40px 22px; margin-top: 18px; }
  .drop-title { font-size: 20px; }

  /* Footer compact */
  .site-footer { padding: 18px 18px; margin-top: 32px; }
  .footer-inner { flex-direction: column; gap: 14px; }
  .footer-links { gap: 14px; flex-wrap: wrap; }

  /* Forms */
  .scan-form-card, .goal-form-card { padding: 18px; }
  .form-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
  :root { --mobile-header-h: 52px; }
  .nav-inner { padding: 0 12px; gap: 8px; }
  img.logo-mark { width: 30px; height: 30px; }
  .logo-wordmark { font-size: 14px; }
  .nav-links a { padding: 6px 9px; font-size: 11px; }
  .nav-cta-mobile { padding: 6px 10px; font-size: 11.5px; letter-spacing: 1.2px; }

  /* Collapse mobile pills to icon-only on narrow phones to keep the
     header from cramping next to the hamburger. */
  .mobile-cta-pill { padding: 7px 9px; }
  .mobile-cta-label { display: none; }
  .hero { padding: 28px 16px 24px; }
  .hero-headline { font-size: 30px; }
  #main-content { padding: calc(var(--mobile-header-h) + 18px) 14px 32px; }
  .page-chat #main-content { padding: var(--mobile-header-h) 0 0; }
  .section-title { font-size: 26px; }
  .metric-card { padding: 13px 14px; }
  .metric-value { font-size: 26px; }
  /* Stat strip stacks to one column on narrow phones */
  .hero-stat-strip {
    grid-template-columns: 1fr;
  }
  .hero-stat-item + .hero-stat-item {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .hero-stat-value { font-size: 21px; }
  .hero-stat-item { padding: 12px 14px; }
}

/* Sub-430px - drop the wordmark to free header space for the three
   mobile CTA pills (Log scan + Hoot + Form). Owl mark stays. */
@media (max-width: 430px) {
  .logo-wordmark { display: none; }
}

/* Very narrow phones (<360px) - header still cramps even without
   wordmark. Hide the Form-check pill on these devices; it stays
   reachable via the hamburger. */
@media (max-width: 360px) {
  .mobile-cta-formcheck { display: none; }
}

/* Very narrow phones (<340px) - drop the wordmark, keep only the icon
   (legacy rule retained; the 430px rule above already covers this). */
@media (max-width: 340px) {
  .logo-wordmark { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   DARK EDITORIAL v2 - Achievement-first dashboard layout
   ═══════════════════════════════════════════════════════════════════ */

/* ── Atmospheric background (dashboard only) ──────────────────────── */
.page-dashboard #main-content {
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(31,61,43,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 10% 70%, rgba(20,45,28,0.25) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 90% 85%, rgba(15,35,22,0.2) 0%, transparent 60%);
}
.page-dashboard #main-content::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(74,222,128,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,222,128,0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 38%);
}

/* ── Achievement hero block ───────────────────────────────────────── */
.achievement-block {
  margin-bottom: 32px;
  opacity: 0; transform: translateY(16px);
  animation: achieveRise 0.7s cubic-bezier(.22,1,.36,1) 0.1s forwards;
}
@keyframes achieveRise { to { opacity: 1; transform: none; } }

.achievement-name {
  font-family: var(--font-body);
  font-size: clamp(15px, 2vw, 19px); font-weight: 400;
  color: rgba(240,237,232,0.45); letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.achievement-number-wrap { line-height: 1; display: flex; align-items: baseline; gap: 8px; }
.achievement-number {
  font-family: var(--font-display);
  font-size: clamp(72px, 11vw, 120px);
  font-weight: 700; line-height: 0.88; letter-spacing: -0.04em;
  color: var(--gold);
  /* Two-tone halo: gold core + ember outer. Reads warmer/heavier than
     pure gold and keeps the eye on the hero number. */
  text-shadow:
    0 0 60px rgba(212,168,83,0.32),
    0 0 120px rgba(200,122,31,0.22);
}
.achievement-unit {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 42px); font-weight: 400;
  color: rgba(240,237,232,0.45);
}
.achievement-context {
  font-family: var(--font-body);
  font-size: clamp(24px, 3.5vw, 44px); font-weight: 700;
  color: rgba(240,237,232,0.85); letter-spacing: -0.03em;
  line-height: 1.1; margin-top: 6px;
}
.achievement-proof {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 16px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; color: rgba(240,237,232,0.32);
}
.proof-item  { white-space: nowrap; }
.proof-sep   { margin: 0 10px; opacity: 0.25; }
.proof-hl    { color: rgba(212,168,83,0.85); }

/* Italic dek */
.a-dek {
  font-family: var(--font-body);
  font-size: 15px; font-style: italic; line-height: 1.75;
  color: rgba(240,237,232,0.38); max-width: 520px;
  margin-bottom: 32px;
  opacity: 0; animation: achieveRise 0.7s cubic-bezier(.22,1,.36,1) 0.25s forwards;
}

/* hero kicker green number prefix */
.k-num { color: var(--accent); }

/* Stat strip glass enhancement */
.hero-stat-strip {
  background: rgba(3,12,6,0.6) !important;
  backdrop-filter: blur(20px);
  border-color: rgba(31,61,43,0.4) !important;
}
.hero-stat-item + .hero-stat-item {
  border-left-color: rgba(31,61,43,0.35) !important;
}

/* Progress bar glass */
.hero-progress-bar {
  margin-top: 24px; padding: 22px 26px;
  background: rgba(3,12,6,0.6); backdrop-filter: blur(20px);
  border: 1px solid rgba(31,61,43,0.4); border-radius: 12px;
  position: relative; overflow: hidden;
}
.hero-progress-bar::before {
  content: ''; position: absolute; top: -60%; left: 30%;
  width: 100%; height: 240%;
  background: radial-gradient(ellipse, rgba(74,222,128,0.07) 0%, transparent 65%);
  pointer-events: none;
}
.hero-progress-label-row,
.hero-progress-dates,
.hero-progress-note { position: relative; z-index: 1; }

/* ── Glass metric cards ───────────────────────────────────────────── */
.dash-pulse-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-bottom: 16px;
}
.dash-wide-row {
  display: grid; grid-template-columns: 2fr 1fr; gap: 16px;
  margin-bottom: 36px;
}
.dash-glass-card {
  background: rgba(8,20,11,0.75); backdrop-filter: blur(18px);
  border: 1px solid rgba(31,61,43,0.45);
  border-top: 1px solid rgba(74,222,128,0.18);
  border-radius: 14px; padding: 22px 20px;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), border-color 0.25s, box-shadow 0.35s;
  position: relative; overflow: hidden;
}
.dash-glass-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(74,222,128,0.04), transparent 35%, transparent 70%, rgba(31,61,43,0.06));
  pointer-events: none;
}
.dash-glass-card:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: rgba(74,222,128,0.28);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35), 0 0 24px rgba(31,61,43,0.18);
}
.dash-card-label {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(240,237,232,0.3); margin-bottom: 10px; display: block;
}
.dash-card-head {
  font-family: var(--font-body); font-size: 17px; font-weight: 600;
  color: rgba(240,237,232,0.85); letter-spacing: -0.02em; margin-bottom: 8px;
}
.dash-card-val {
  font-family: var(--font-mono); font-size: 36px; font-weight: 600;
  color: rgba(240,237,232,0.9); line-height: 1;
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.dash-card-val.accent {
  color: var(--accent);
  text-shadow: 0 0 30px rgba(74,222,128,0.28);
}
.dash-card-unit { font-size: 15px; font-weight: 400; color: rgba(240,237,232,0.35); margin-left: 3px; }
.dash-card-sub  { font-family: var(--font-mono); font-size: 10.5px; }
.dash-card-sub.p { color: var(--positive); }
.dash-card-sub.n { color: var(--negative); }
.dash-card-sub.w { color: var(--warn); }

/* Aura spotlight on the goal-proximity card */
.dash-aura { position: relative; z-index: 0; }
.dash-aura::before {
  content: ''; position: absolute;
  top: -30%; left: -20%; width: 140%; height: 160%;
  background: radial-gradient(ellipse, rgba(74,222,128,0.15) 0%, transparent 65%);
  filter: blur(32px); z-index: -1; pointer-events: none;
}

/* ── Sparklines ───────────────────────────────────────────────────── */
.dash-spark { width: 100%; height: 32px; margin-top: 10px; overflow: visible; }
.dash-spark.tall { height: 80px; }
.dash-spark.mid  { height: 44px; }
.dash-spark .sp {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1);
}
.dash-spark .sp.warm { stroke: var(--warn); }
.dash-spark .area { fill: url(#sparkGrad); stroke: none; opacity: 0; transition: opacity 0.8s ease 0.3s; }
.dash-glass-card.draw .dash-spark .sp { stroke-dashoffset: 0; }
.dash-glass-card.draw .dash-spark .area { opacity: 1; }
.dash-spark circle { opacity: 0; transition: opacity 0.3s ease 1.1s; }
.dash-glass-card.draw .dash-spark circle { opacity: 1; }

/* Weight-trend SVG isn't wrapped in .dash-spark, so target it directly.
   Visible by default - no draw-on-scroll gate (was leaving the chart
   blank against the new warm-neutral surface). */
.dash-trend-svg .sp {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.dash-trend-svg .area {
  fill: url(#sparkGrad); stroke: none; opacity: 1;
}

/* ── Editorial insight (two-column, no card chrome) ──────────────── */
.insight-card.editorial {
  display: grid !important; grid-template-columns: 110px 1fr; gap: 0 32px;
  background: transparent !important; border: none !important;
  border-radius: 0 !important; padding: 32px 0 !important;
  border-top: 1px solid rgba(31,61,43,0.3) !important;
  box-shadow: none !important; margin: 4px 0 24px !important;
}
.insight-card.editorial .insight-head {
  flex-direction: column !important; align-items: flex-start !important;
  border-right: 1px solid rgba(31,61,43,0.25);
  padding-right: 0; gap: 6px !important;
}
.insight-card.editorial .insight-narrative { font-size: 14.5px; line-height: 1.78; color: rgba(240,237,232,0.55); }
.insight-card.editorial .insight-recommendation {
  padding-top: 16px; border-top: 1px solid rgba(31,61,43,0.22);
}
.insight-card.editorial .insight-rec-label { color: var(--accent); }

/* ── Scan data table ──────────────────────────────────────────────── */
.scan-tbl-section { margin-top: 8px; }
.scan-tbl-wrap { overflow-x: auto; }
.scan-tbl { width: 100%; border-collapse: collapse; }
.scan-tbl thead th {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(240,237,232,0.22);
  text-align: left; padding: 0 12px 10px 0; font-weight: 400;
  border-bottom: 1px solid rgba(31,61,43,0.3);
}
.scan-tbl thead th:last-child { text-align: right; padding-right: 0; }
.scan-tbl tbody tr {
  border-bottom: 1px solid rgba(31,61,43,0.16);
  transition: background 0.15s; cursor: pointer; text-decoration: none;
}
.scan-tbl tbody tr:hover { background: rgba(31,61,43,0.15); }
.scan-tbl tbody tr:last-child { border-bottom: none; }
.scan-tbl td {
  font-family: var(--font-mono); font-size: 12px;
  color: rgba(240,237,232,0.42); padding: 10px 12px 10px 0;
  vertical-align: baseline;
}
.scan-tbl td:last-child { text-align: right; padding-right: 0; }
.scan-tbl td.main  { color: rgba(240,237,232,0.82); }
.scan-tbl tr.scan-latest td.main { color: #fff; font-weight: 600; }
.scan-tbl td.pos   { color: var(--positive); }
.scan-tbl td.neg   { color: var(--negative); }
.scan-tbl .scan-row-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  outline-offset: 3px;
  border-radius: 2px;
}
.scan-tbl .scan-row-link:focus-visible {
  outline: 2px solid var(--accent, #4ade80);
}

/* Responsive glass rows */
@media (max-width: 860px) {
  .dash-pulse-row { grid-template-columns: 1fr 1fr; }
  .dash-wide-row  { grid-template-columns: 1fr; }
  .insight-card.editorial { grid-template-columns: 1fr !important; }
  .insight-card.editorial .insight-head {
    border-right: none !important; border-bottom: 1px solid rgba(31,61,43,0.25);
    padding-bottom: 12px !important; flex-direction: row !important;
  }
}
@media (max-width: 560px) {
  /* 2-up squarish grid for the small cards. The Goal/Consistency/
     Composition row pairs up; if there's an odd one out it spans
     full width so the row doesn't look broken. Weight Trend stays
     full-width since its chart needs the horizontal real estate. */
  .dash-pulse-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .dash-pulse-row > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .dash-glass-card { padding: 16px 14px; }
  .dash-card-label { font-size: 9px; margin-bottom: 6px; }
  .dash-card-head { font-size: 13.5px; margin-bottom: 4px; line-height: 1.2; }
  .dash-card-val { font-size: 28px; margin-bottom: 4px; }
  .dash-card-unit { font-size: 12px; }
  .dash-card-sub { font-size: 9.5px; }
  .dash-spark { height: 22px; margin-top: 6px; }
  .dash-spark.mid { height: 28px; }
  .achievement-number { font-size: clamp(60px, 18vw, 80px); }
}

/* Scroll-reveal utility */
.scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.scroll-reveal.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
 *  LOGIN SCREEN  (standalone - does not extend base.html)
 * ===================================================================== */

body.page-login {
  min-height: 100vh;
  background: var(--black);
}

.login-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.login-left {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2,10,4,0.9) 0%, rgba(2,10,4,0.66) 46%, rgba(2,10,4,0.22) 100%),
    var(--charcoal);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 72px;
}
.login-left::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Warm ember grid (was forest green) - tonally consistent with the
     ember CTA below the form and the ember radial wash. */
  background:
    linear-gradient(rgba(200, 122, 31, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 122, 31, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to right, rgba(0,0,0,0.6), transparent 75%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
.login-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 78% 58%, rgba(74,222,128,0.16), transparent 58%),
    linear-gradient(90deg, rgba(2,10,4,0.92), rgba(2,10,4,0.48) 42%, rgba(2,10,4,0.08));
  pointer-events: none;
  z-index: 2;
}

.login-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.login-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
  opacity: 0.58;
  filter: saturate(1.08) contrast(1.05);
  transform: scale(1.02);
  animation: loginHeroDrift 14s ease-in-out infinite alternate;
}
/* Headline-side darkening overlay so the hero PNG never out-shouts the
   typography. Sits above the image, below the copy. */
.login-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(2,10,4,0.72) 0%,
    rgba(2,10,4,0.40) 42%,
    rgba(2,10,4,0.10) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}
.login-scan-line {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 52%;
  width: 1px;
  background: linear-gradient(
    transparent,
    rgba(134,239,172,0.18) 18%,
    rgba(134,239,172,0.78) 50%,
    rgba(134,239,172,0.18) 82%,
    transparent
  );
  box-shadow: 0 0 24px rgba(74,222,128,0.48);
  animation: loginScanSweep 4.8s cubic-bezier(.65,0,.35,1) infinite;
}
.login-orbit {
  position: absolute;
  right: -12%;
  border: 1px solid rgba(134,239,172,0.34);
  border-radius: 50%;
  transform: rotate(-10deg);
  box-shadow: 0 0 22px rgba(74,222,128,0.12);
}
.login-orbit-one {
  top: 34%;
  width: 58%;
  height: 16%;
  animation: loginOrbit 6s ease-in-out infinite;
}
.login-orbit-two {
  top: 66%;
  width: 64%;
  height: 13%;
  border-color: rgba(212,168,83,0.34);
  animation: loginOrbit 7.5s ease-in-out 0.8s infinite reverse;
}
.login-pulse-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(74,222,128,0.5), 0 0 18px rgba(74,222,128,0.75);
  animation: loginPulse 2.4s ease-out infinite;
}
.login-pulse-one { right: 30%; top: 43%; }
.login-pulse-two {
  right: 18%;
  top: 72%;
  background: var(--amber);
  animation-delay: 0.75s;
}

@keyframes loginHeroDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1.6%, -0.8%, 0); }
}
@keyframes loginScanSweep {
  0%   { transform: translateX(-26vw); opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(30vw); opacity: 0; }
}
@keyframes loginOrbit {
  0%, 100% { opacity: 0.45; transform: rotate(-10deg) scaleX(0.96); }
  50%      { opacity: 0.9;  transform: rotate(-7deg) scaleX(1.02); }
}
@keyframes loginPulse {
  0%   { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(74,222,128,0.5), 0 0 18px rgba(74,222,128,0.7); }
  70%  { transform: scale(1.15); box-shadow: 0 0 0 14px rgba(74,222,128,0), 0 0 28px rgba(74,222,128,0.3); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(74,222,128,0), 0 0 18px rgba(74,222,128,0.5); }
}

.login-brand {
  position: absolute;
  top: 32px;
  left: 72px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  z-index: 3;
}
.login-brand-mark { width: 36px; height: 36px; }
.login-brand-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2px;
}
.login-copy {
  position: relative;
  z-index: 3;
  max-width: 540px;
  animation: loginCopyRise 0.7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes loginCopyRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.login-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.login-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 7.3vw, 98px);
  line-height: 0.86;
  letter-spacing: 0;
  margin: 0 0 22px;
  color: var(--text);
  text-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
.login-headline em {
  color: var(--gold);
  font-style: normal;
  text-shadow: 0 0 36px rgba(212,168,83,0.38);
}

.login-sub {
  color: rgba(240,237,232,0.74);
  font-size: 16px;
  font-weight: 400;
  max-width: 420px;
  line-height: 1.65;
  margin: 0 0 24px;
}

.login-metric-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.login-metric-rail span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(74,222,128,0.18);
  border-radius: 7px;
  background: rgba(3,12,6,0.48);
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  color: rgba(240,237,232,0.55);
}
.login-metric-rail strong {
  color: var(--accent);
  font-weight: 600;
}

.badge-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.lbadge {
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  background: rgba(2,10,4,0.36);
  font-size: 11px;
  color: rgba(240,237,232,0.56);
  letter-spacing: 0.3px;
  backdrop-filter: blur(10px);
}
.lbadge.gold {
  border-color: rgba(74,222,128,0.35);
  color: var(--accent);
  background: rgba(74,222,128,0.08);
}

.login-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 72px;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(31,61,43,0.28), transparent 58%),
    var(--black);
}

.login-card {
  width: 100%;
  max-width: 380px;
  margin: 0;
}
.login-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 1.5px;
  margin: 0 0 4px;
  color: var(--text);
}
.login-card-sub {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 32px;
}

.login-error {
  background: var(--negative-bg);
  border: 1px solid var(--negative);
  color: var(--negative);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 18px;
}

.form-group { margin-bottom: 14px; }
.form-label {
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.form-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text-dim); }

.btn-login {
  width: 100%;
  padding: 13px;
  background: var(--ember);
  color: var(--text);
  border: none;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 2px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s;
}
.btn-login:hover { background: var(--ember-light); }

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 14px;
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.btn-demo {
  display: block;
  width: 100%;
  padding: 11px;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn-demo:hover {
  border-color: var(--accent-dim);
  color: var(--text);
  background: var(--surface);
}
.btn-demo-sub {
  margin: 8px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
}

/* All-goals list rows: descriptive title primary, ID + dates as caption */
.goal-row-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.goal-row-meta {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.goal-row-id {
  color: rgba(240,237,232,0.22);
  font-size: 10px;
}

/* Setup page (first-run profile capture) */
.setup-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.setup-checkbox input[type="checkbox"] {
  margin: 3px 0 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.setup-checkbox span { line-height: 1.45; }

.setup-advanced {
  margin: 0 0 8px;
  padding: 0;
}
.setup-advanced > summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  padding: 8px 0;
  list-style: none;
  user-select: none;
}
.setup-advanced > summary::-webkit-details-marker { display: none; }
.setup-advanced > summary::before {
  content: "+";
  display: inline-block;
  margin-right: 8px;
  color: var(--accent);
  font-weight: 600;
}
.setup-advanced[open] > summary::before { content: "−"; }
.setup-advanced > summary:hover { color: var(--text); }

/* Log Scan: collapsed advanced section. Same disclosure pattern as setup. */
.scan-advanced {
  margin: 4px 0 12px;
  padding: 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}
.scan-advanced > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 14px 0;
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.scan-advanced > summary::-webkit-details-marker { display: none; }
.scan-advanced > summary::before {
  content: "+";
  display: inline-block;
  margin-right: 8px;
  color: var(--gold);
  font-weight: 600;
}
.scan-advanced[open] > summary::before { content: "−"; }
.scan-advanced > summary:hover { color: var(--text); }

.login-footer {
  text-align: center;
  margin: 20px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}
.login-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}
.login-legal {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}
.login-legal a {
  color: var(--ember-light);
  text-decoration: underline;
  text-decoration-color: rgba(200,122,31,0.3);
  text-underline-offset: 2px;
}
.login-legal a:hover,
.login-legal a:focus-visible {
  text-decoration-color: var(--ember);
}

@media (max-width: 860px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-left {
    min-height: 560px;
    padding: 96px 32px 42px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .login-left::after {
    background:
      linear-gradient(180deg, rgba(2,10,4,0.84), rgba(2,10,4,0.34) 46%, rgba(2,10,4,0.88)),
      radial-gradient(ellipse 80% 52% at 72% 45%, rgba(74,222,128,0.14), transparent 60%);
  }
  .login-visual img {
    object-position: 62% 44%;
    opacity: 0.62;
  }
  .login-brand { top: 20px; left: 32px; }
  .login-headline { font-size: 60px; }
  .login-sub { max-width: 100%; margin-bottom: 24px; }
  .login-right { padding: 32px 28px; }
}
@media (max-width: 480px) {
  .login-left {
    min-height: 530px;
    padding: 82px 20px 30px;
  }
  .login-brand { top: 16px; left: 20px; }
  .login-headline { font-size: 48px; letter-spacing: 0; }
  .login-metric-rail span { font-size: 8.8px; }
  .login-right { padding: 24px 20px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-visual img,
  .login-scan-line,
  .login-orbit,
  .login-pulse-dot,
  .login-copy {
    animation: none;
  }
}

/* ── Goals page polish ──────────────────────────────────────────────
   Active goal: primary action prominent, Abandon hidden behind a
   danger-zone disclosure with confirm dialog. New goal form collapsed
   behind a "+ New goal" toggle so the active goal sits at the top. */

.goal-actions-primary {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.goal-danger-zone {
  margin-top: 14px;
  padding: 0;
  border-top: 1px dashed var(--border);
}
.goal-danger-zone > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.15s;
}
.goal-danger-zone > summary::-webkit-details-marker { display: none; }
.goal-danger-zone > summary::before {
  content: "+";
  display: inline-block;
  margin-right: 8px;
  color: var(--text-dim);
}
.goal-danger-zone[open] > summary::before { content: "−"; }
.goal-danger-zone > summary:hover { color: var(--red); }
.goal-danger-zone > summary:hover::before { color: var(--red); }
.goal-danger-zone .danger-copy {
  font-size: 13px; color: var(--text-muted);
  line-height: 1.55;
  margin: 14px 0 14px;
}
.btn-danger {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-danger:hover {
  background: var(--red);
  color: var(--text);
}

.goal-new-disclosure { margin: 0; }
.goal-new-disclosure > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: 0.02em;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
  margin-top: 8px;
}
.goal-new-disclosure > summary::-webkit-details-marker { display: none; }
.goal-new-disclosure > summary:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
}
.goal-new-disclosure[open] > summary { display: none; }

/* ── Bloodwork ──────────────────────────────────────────────────────
   List of blood draws as cards; markers tagged in-range/high/low so
   gold renders only on out-of-band values. */

.page-header { margin: 0 0 32px; }
.page-header-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 8px 0 14px;
}

.bloodwork-empty {
  padding: 56px 28px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bloodwork-empty-headline {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  color: var(--text); margin: 0 0 8px;
}
.bloodwork-empty-sub {
  color: var(--text-muted); font-size: 14px; line-height: 1.6;
  max-width: 56ch; margin: 0 auto 20px;
}

.bloodwork-list {
  display: flex; flex-direction: column; gap: 18px; margin-bottom: 48px;
}
.bloodwork-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.bloodwork-card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.bloodwork-flag-pill,
.bloodwork-clean-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border: 1px solid;
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
}
.bloodwork-flag-pill {
  /* Out of band = alarm signal */
  color: var(--red); border-color: var(--red); background: var(--red-bg);
}
.bloodwork-clean-pill {
  /* All markers in range = milestone reward */
  color: var(--gold); border-color: var(--gold-dim); background: var(--gold-bg);
  box-shadow: 0 0 24px rgba(212,168,83,0.18);
}
.bloodwork-note-pill {
  /* No structured marker values - just notes. Muted; not a status. */
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.bloodwork-card-trail {
  display: inline-flex; align-items: center; gap: 10px;
}
.bloodwork-edit-link {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bloodwork-edit-link:hover,
.bloodwork-edit-link:focus-visible {
  border-color: var(--ember-dim);
  color: var(--ember-light);
  background: var(--ember-bg);
}

.bloodwork-grid {
  display: grid;
  /* Bounded track size: rich cards (4 groups) sit at ~300px each on a
     1280px container; sparse cards (1 group) don't stretch one column
     to full width, which would throw label and value to opposite edges. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 360px));
  gap: 18px 24px;
}
.bloodwork-grid:not(:has(.bloodwork-group)) { display: none; }
.bloodwork-group { min-width: 0; }
.bloodwork-group-name {
  display: block;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 8px;
}
.bloodwork-marker-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.bloodwork-marker {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono); font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.bloodwork-marker:last-child { border-bottom: 0; }
.bloodwork-marker-label { color: var(--text-muted); }
.bloodwork-marker-trail {
  display: inline-flex; align-items: baseline; gap: 8px;
  white-space: nowrap;
}
.bloodwork-marker-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Edge-of-band tier tag - only shown when status is low_normal /
   high_normal. Quiet typographic tag, not a pill, so it reads as
   metadata rather than a competing alarm. */
.bloodwork-tier-tag {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}
.bloodwork-marker.in_range    .bloodwork-marker-value { color: var(--accent); }
/* Edge-of-band: in range medically, but in the bottom or top 15% of
   the band. Gold = "watch this", not green-light, not red-flag. */
.bloodwork-marker.low_normal  .bloodwork-marker-value { color: var(--gold); }
.bloodwork-marker.high_normal .bloodwork-marker-value { color: var(--gold); }
.bloodwork-marker.high        .bloodwork-marker-value { color: var(--red); }
.bloodwork-marker.low         .bloodwork-marker-value { color: var(--red); }
.bloodwork-marker.unknown     .bloodwork-marker-value { color: var(--text); }

.bloodwork-notes {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-muted); line-height: 1.65;
  text-align: left;
}
/* Pre-wrap on the body span only (not the footer wrapper), so explicit
   line breaks in the note text render readably without leaking template
   indentation into the visible layout. */
.bloodwork-notes-body {
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* Note-only cards (no marker grid above): drop the separator line
   above the note so the card doesn't look like it has a phantom
   empty section. */
.bloodwork-notes.flush {
  margin-top: 0; padding-top: 0; border-top: 0;
}
.bloodwork-notes .mono { font-family: var(--font-mono); font-size: 12px; }

/* ── Journal ───────────────────────────────────────────────────────
   Three buckets: active experiments (gold accent - open loop),
   closed loops (verdict pill: met=green, partial=gold, missed=red),
   and plain notes. Card system mirrors bloodwork-card. */

.journal-list {
  display: flex; flex-direction: column; gap: 14px;
}
.journal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.journal-card.journal-active {
  border-left: 3px solid var(--gold);
  box-shadow: 0 0 24px rgba(212,168,83,0.06);
}
.journal-card.journal-closed.verdict-met     { border-left: 3px solid var(--accent); }
.journal-card.journal-closed.verdict-partial { border-left: 3px solid var(--gold); }
.journal-card.journal-closed.verdict-missed  { border-left: 3px solid var(--red); }

.journal-card-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.journal-card-date {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.journal-card-meta {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.journal-edit-link {
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.journal-edit-link:hover,
.journal-edit-link:focus-visible {
  border-color: var(--ember-dim);
  color: var(--ember-light);
  background: var(--ember-bg);
}
.journal-card-content {
  margin: 0;
  font-size: 14.5px; line-height: 1.6;
  color: var(--text);
}
.journal-card-protocol {
  margin: 8px 0 0;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.journal-card-watching {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
}
.journal-metric-chip {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  border: 1px solid var(--border2);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.journal-verdict-note {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 13.5px; line-height: 1.55;
  color: var(--text);
}

.journal-type-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
}
.journal-type-pill.protocol       { color: var(--gold); border-color: var(--gold-dim); }
.journal-type-pill.recommendation { color: var(--accent); border-color: var(--accent-dim); }
.journal-type-pill.decision       { color: var(--text); border-color: var(--text-muted); }
.journal-type-pill.observation,
.journal-type-pill.note           { color: var(--text-dim); border-color: var(--border); }

.journal-verdict-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.journal-verdict-pill.verdict-met     {
  color: var(--accent); border-color: var(--accent-dim); background: var(--accent-bg);
}
.journal-verdict-pill.verdict-partial {
  color: var(--gold); border-color: var(--gold-dim); background: var(--gold-bg);
}
.journal-verdict-pill.verdict-missed  {
  color: var(--red); border-color: var(--red); background: var(--red-bg);
}
.journal-verdict-pill.verdict-abandoned,
.journal-verdict-pill.verdict-pending {
  color: var(--text-dim); border-color: var(--border);
}

.metric-checkbox-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 14px;
}
.metric-checkbox {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px; color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.metric-checkbox:hover { background: var(--surface2); }
.metric-checkbox input { accent-color: var(--gold); }
.metric-checkbox small { color: var(--text-dim); margin-left: 4px; }

/* Scan detail view - read-only, reuses bloodwork card system */
.scan-detail-note {
  margin: 18px 0 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}
.scan-detail-note-text {
  margin: 6px 0 0;
  font-size: 15px; line-height: 1.6;
  color: var(--text);
}

/* ── Goal status pills ───────────────────────────────────────────────
   Gold reserved for "achieved" - the milestone signal. Active stays
   green (live state). Abandoned is muted text only. */
.goal-status {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.goal-status.active {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-bg);
}
.goal-status.achieved {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: var(--gold-bg);
  box-shadow: 0 0 24px rgba(212,168,83,0.18);
}
.goal-status.abandoned {
  color: var(--text-dim);
  border-color: var(--border);
}