/* ─────────────────────────────────────────────────────────────────
   LongevityGraph — AI Labs aesthetic
   IBM Plex Sans / IBM Plex Mono · paper white · terminal green
   ─────────────────────────────────────────────────────────────── */

:root {
  /* Core tokens */
  --ink:            #0F1112;
  --ink-soft:       #5F6266;  /* WCAG AA on paper: 5.87:1 (was #6F7478, marginal 4.52:1) */
  --ink-faint:      #6F7478;  /* WCAG AA on paper: 4.52:1 (was #A6A9AC, failed 2.26:1) */
  /* 3-tier surface model. body sits on --canvas; cards/drawers/modals on
     --surface (white) lift visibly off canvas. --paper is the inset tier
     (avatars, code blocks, nested chips inside cards). 2026-05-01: tuned
     from doc-spec #F1EFEA → #FAF8F4 after on-device review — ~1% darker
     than paper, retains warm direction. */
  --canvas:         #FAF8F4;
  --paper:          #FAFAF8;
  --surface:        #FFFFFF;
  --hairline:       #E8E6E1;
  --hairline-strong:#D6D3CC;
  --green:          #00A36C;
  --green-deep:     #00754F;
  --green-soft:     #E8F5EF;
  /* Recommendation picker family stripes (handoff/recommendation-picker) */
  --teal:           #005E53;
  --teal-soft:      #E6EFEE;
  --sage-stripe:    #7BAF95;
  --sage-glyph:     #3F7E5E;
  --sage-border:    #9CCFB6;
  --red:            #C2410C;
  --red-soft:       #FEE9D9;
  --amber:          #B45309;
  --amber-soft:     #FEF3C7;

  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --gutter: clamp(20px, 4vw, 48px);
  --max: 1180px;
  --max-narrow: 760px;

  /* Type scale — clinical, subdued */
  --t-display:  clamp(2rem, 4.5vw, 3.5rem);
  --t-h1:       clamp(1.55rem, 2.6vw, 2rem);
  --t-h2:       clamp(1.2rem, 1.8vw, 1.45rem);
  --t-h3:       1.05rem;
  --t-body-lg:  1.05rem;
  --t-body:     0.95rem;
  --t-body-sm:  0.85rem;
  --t-caption:  0.72rem;

  --section-pad: clamp(64px, 9vw, 120px);

  /* Legacy aliases — keep old inline styles working as we migrate */
  --color-bg:              var(--paper);
  --color-accent:          var(--green);
  --color-accent-light:    var(--green-soft);
  --color-accent-dark:     var(--green-deep);
  --color-text:            var(--ink);
  --color-text-secondary:  var(--ink-soft);
  --color-text-tertiary:   var(--ink-faint);
  --color-border:          var(--hairline);
  --color-card:            var(--surface);
  --color-success:         var(--green);
  --color-warning:         var(--amber);
  --color-error:           var(--red);
  --font-display:          var(--sans);
  --font-body:             var(--sans);
  --font-mono:             var(--mono);
  --content-max:           var(--max);
  --content-narrow:        var(--max-narrow);
  --shadow-sm: 0 1px 2px rgba(15,17,18,0.04);
  --shadow-md: 0 1px 3px rgba(15,17,18,0.05);
  --shadow-lg: 0 2px 8px rgba(15,17,18,0.06);
  --radius:    var(--r-md);
  --radius-sm: var(--r-sm);
  --text-hero: var(--t-display);
  --text-h1:   var(--t-h1);
  --text-h2:   var(--t-h2);
  --text-h3:   var(--t-h3);
  --text-body-lg: var(--t-body-lg);
  --text-body:    var(--t-body);
  --text-body-sm: var(--t-body-sm);
  --text-caption: var(--t-caption);
  --section-gap:  var(--section-pad);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
.serif, .font-serif { font-family: var(--sans); font-weight: 500; }
.mono { font-family: var(--mono); }

/* Default h1-h6 reset — markdown body content (blog posts, FAQ answers,
   etc.) renders bare headings that would otherwise inherit browser-default
   weight 700. Force AI Labs medium weight; .prose etc. can still override. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* ── Layout ── */
.wrap, .container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 var(--gutter); }

section {
  padding: var(--section-pad) 0;
  border-top: 1.5px solid var(--hairline);
}
section.first, section:first-of-type, .no-rule { border-top: 0; }
/* App pages render inside <main class="main-content"> (see layout.html).
   The marketing-section padding above is the wrong default there — every
   app `<section>` was silently inheriting clamp(64px, 9vw, 120px) of
   vertical padding plus a hairline border. Neutralize for the app shell;
   the marketing site (which doesn't use .main-content) is unaffected. */
.main-content section { padding: 0; border-top: 0; }

.sec-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 56px;
}
.sec-head.row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
@media (max-width: 720px) {
  .sec-head.row { flex-direction: column; align-items: flex-start; }
}

/* ── Top nav ── */
.topbar {
  border-bottom: 1.5px solid var(--hairline);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-mark {
  width: 22px; height: 22px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}
.brand small {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 400;
}
.top-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
}
.top-nav a {
  text-decoration: none;
  font-size: 0.85rem;
  color: var(--ink-soft);
  transition: color 0.15s;
}
.top-nav a:hover, .top-nav a.active { color: var(--ink); }
.top-cta {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper) !important;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity 0.15s;
}
.top-cta:hover { opacity: 0.85; }
.nav-mobile-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  cursor: pointer;
  color: var(--ink);
}
@media (max-width: 760px) {
  .top-nav { display: none; }
  .nav-mobile-toggle { display: inline-flex; }
}
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--paper);
  border-bottom: 1.5px solid var(--hairline);
  padding: 12px var(--gutter) 20px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 12px 0;
  border-bottom: 1.5px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.95rem;
}
.mobile-menu a:last-child { border-bottom: 0; margin-top: 8px; }

/* ── Footer ── */
footer.foot {
  border-top: 1.5px solid var(--hairline);
  padding: 28px 0;
}
footer.foot .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
footer.foot .meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
footer.foot ul {
  display: flex;
  gap: 22px;
  list-style: none;
  flex-wrap: wrap;
}
footer.foot a {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-decoration: none;
  letter-spacing: 0.04em;
}
footer.foot a:hover { color: var(--ink); }

/* ── Eyebrow ── */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink-soft);
}
.eyebrow.center::before { display: none; }

/* ── Type ── */
.display {
  font-family: var(--sans);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.h1 {
  font-family: var(--sans);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--sans);
  font-size: var(--t-h2);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.h3 {
  font-family: var(--sans);
  font-size: var(--t-h3);
  font-weight: 500;
}
.lede {
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}
.accent { color: var(--green); }
em.accent, .accent-em { font-style: normal; color: var(--green); font-weight: 500; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-fill, .btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-fill:hover, .btn-primary:hover { opacity: 0.85; }
.btn-outline, .btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover, .btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn .arrow { font-family: var(--mono); font-size: 0.85em; }
.btn-sm { padding: 7px 12px; font-size: 0.8rem; }
.btn-lg { padding: 14px 22px; font-size: 0.98rem; }

/* ── Stats strip ── */
.stats {
  border-top: 1.5px solid var(--hairline);
  border-bottom: 1.5px solid var(--hairline);
  padding: 22px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.stat-cell { display: flex; flex-direction: column; gap: 4px; }
.stat-cell .num {
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.stat-cell .lbl {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

/* ── Console panel ── */
.console {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.82rem;
}
.console-head {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.console-dots { display: flex; gap: 5px; }
.console-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}
.console-title { margin-left: 6px; opacity: 0.7; }
.console-body {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.console-line { display: flex; gap: 10px; align-items: flex-start; }
.console-line .prompt { color: var(--ink-soft); flex-shrink: 0; }
.console-line .text { line-height: 1.55; }
.console-line.ai .prompt { color: var(--green-deep); }
.console-line.ai .text {
  color: var(--ink);
  border-left: 2px solid var(--green);
  padding-left: 10px;
  margin-left: -12px;
}
.console-line.ai .text .tool {
  display: inline-block;
  font-size: 0.72rem;
  color: var(--green-deep);  /* WCAG AA on green-soft: 5.12:1 (was --green, 3.11:1) */
  background: var(--green-soft);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  margin-right: 4px;
}
.console-cursor {
  display: inline-block;
  width: 8px; height: 1.1em;
  background: var(--green);
  vertical-align: -2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ── Hairline three-up ── */
.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1.5px solid var(--hairline);
  border-top: 1.5px solid var(--hairline);
}
@media (max-width: 760px) { .three { grid-template-columns: 1fr; } }
.three > div {
  padding: 28px 24px;
  border-right: 1.5px solid var(--hairline);
  border-bottom: 1.5px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
}
.three .big {
  font-family: var(--mono);
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.three .lbl {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.three p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: 6px;
}

/* ── Hairline-row table (data layers, tools list, generic) ── */
.hair-table { border-top: 1.5px solid var(--hairline); }
.hair-row {
  display: grid;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1.5px solid var(--hairline);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
}
.hair-row.link { transition: background 0.15s; }
.hair-row.link:hover { background: rgba(15,17,18,0.02); }
.hair-row.link:hover .hair-arrow { transform: translateX(4px); color: var(--green); }
.hair-row .idx {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.hair-row .nm { font-size: 1rem; font-weight: 500; }
.hair-row .desc { color: var(--ink-soft); font-size: 0.92rem; }
.hair-row .count {
  font-family: var(--mono);
  font-size: 0.85rem;
  text-align: right;
  color: var(--ink);
}
.hair-row .count small {
  display: block;
  font-size: 0.65rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 400;
  margin-top: 2px;
}
.hair-row .tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-align: right;
}
.hair-arrow {
  font-family: var(--mono);
  transition: transform 0.15s, color 0.15s;
  color: var(--ink-faint);
}
.hair-row.cols-4-name { grid-template-columns: 60px 200px 1fr 110px; }
.hair-row.cols-3-tool { grid-template-columns: 60px 1fr 110px 24px; }
.hair-row.cols-2-feat { grid-template-columns: 60px 1fr; }
@media (max-width: 760px) {
  .hair-row.cols-4-name,
  .hair-row.cols-3-tool { grid-template-columns: 40px 1fr 24px; }
  .hair-row.cols-4-name .desc,
  .hair-row.cols-4-name .count { grid-column: 1 / -1; padding-left: 64px; margin-top: -10px; }
  .hair-row.cols-3-tool .tag { display: none; }
}

/* ── Two-col ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.two-col.even { grid-template-columns: 1fr 1fr; }
.two-col.flip { grid-template-columns: 1.1fr 1fr; }
@media (max-width: 880px) { .two-col, .two-col.even, .two-col.flip { grid-template-columns: 1fr; } }

/* ── Check grid ── */
.checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.checks > div {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.checks > div::before { content: "✓"; color: var(--green-deep); font-weight: 600; }

/* ── Chart card ── */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 24px;
}
.chart-card .chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}
.chart-card .chart-title {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.chart-card .delta {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--green-deep);
  font-weight: 500;
}
.chart-card .delta.bad { color: var(--red); }
.chart-card svg { width: 100%; height: 140px; }
.chart-card .axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

/* ── Numbered scoring list (right side of bio age) ── */
.scoring { display: flex; flex-direction: column; gap: 18px; }
.scoring-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding-top: 18px;
  border-top: 1.5px solid var(--hairline);
}
.scoring-item:first-child { padding-top: 0; border-top: 0; }
.scoring-item .num {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.scoring-item .lbl { font-weight: 500; font-size: 0.95rem; }
.scoring-item .desc { color: var(--ink-soft); font-size: 0.88rem; margin-top: 2px; }

/* ── Bio-age horizontal marker (replaces gauge) ── */
.bioage-marker {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 28px 24px;
}
.bioage-marker .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 28px;
}
.bioage-marker .head .lbl {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.bioage-marker .head .delta {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--green-deep);
  font-weight: 500;
}
.bioage-marker .axis {
  position: relative;
  height: 60px;
}
.bioage-marker .axis-line {
  position: absolute;
  top: 28px;
  left: 0; right: 0;
  height: 1px;
  background: var(--hairline-strong);
}
.bioage-marker .axis-fill {
  position: absolute;
  top: 27px;
  left: 0;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
}
.bioage-marker .tick {
  position: absolute;
  top: 22px;
  width: 1px;
  height: 13px;
  background: var(--ink-faint);
}
.bioage-marker .marker {
  position: absolute;
  top: 18px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border: 2px solid var(--green);
  background: var(--paper);
  border-radius: 50%;
}
.bioage-marker .marker.chrono {
  border-color: var(--red);
  background: var(--red);
  width: 1px;
  height: 28px;
  top: 14px;
  margin-left: -1px;
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--paper);
}
.bioage-marker .axis-labels {
  position: absolute;
  top: 44px;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.bioage-marker .legend {
  display: flex;
  gap: 28px;
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.bioage-marker .legend span::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
}
.bioage-marker .legend .bio::before { background: var(--green); }
.bioage-marker .legend .chrono::before {
  background: var(--red); border-radius: 0; width: 2px; height: 12px; vertical-align: -2px;
}
.bioage-marker .big {
  font-family: var(--mono);
  font-size: 3.4rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.bioage-marker .big small {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 400;
  margin-left: 6px;
}

/* ── Dashboard panel mockup ── */
.panel {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--hairline);
  background: var(--paper);
}
.panel-head .ttl {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.panel-head .meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.panel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 600px) { .panel-grid { grid-template-columns: repeat(2, 1fr); } }
.panel-cell {
  padding: 18px 16px;
  border-right: 1.5px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
}
.panel-cell:last-child { border-right: 0; }
@media (max-width: 600px) {
  .panel-cell:nth-child(2) { border-right: 0; }
  .panel-cell:nth-child(1), .panel-cell:nth-child(2) { border-bottom: 1.5px solid var(--hairline); }
}
.panel-cell .lbl {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.panel-cell .num {
  font-family: var(--mono);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.panel-cell .delta {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--green-deep);
}
.panel-cell .delta.warn { color: var(--amber); }
.panel-cell .delta.bad  { color: var(--red); }
.panel-row {
  padding: 16px 18px;
  border-top: 1.5px solid var(--hairline);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.panel-row .icon {
  width: 22px; height: 22px;
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  flex-shrink: 0;
}
.panel-row .body { display: flex; flex-direction: column; gap: 2px; }
.panel-row .ttl { font-size: 0.92rem; font-weight: 500; }
.panel-row .desc { font-size: 0.85rem; color: var(--ink-soft); }

/* ── Evaluator card ── */
.eval-card {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}
.eval-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border-bottom: 1.5px solid var(--hairline);
}
.eval-head .name { font-size: 0.95rem; font-weight: 500; }
.eval-head .url {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.eval-grade {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: var(--r-sm);
  padding: 4px 12px;
  min-width: 48px;
  text-align: center;
}
.eval-scores {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eval-score { display: grid; grid-template-columns: 1fr 40px; gap: 14px; align-items: center; }
.eval-score .row1 {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.eval-score .bar {
  height: 4px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.eval-score .bar-fill {
  height: 100%;
  background: var(--green);
  border-radius: 2px;
}
.eval-score .val {
  font-family: var(--mono);
  font-size: 0.95rem;
  text-align: right;
  font-weight: 500;
}
.eval-note {
  padding: 14px 18px;
  border-top: 1.5px solid var(--hairline);
  background: var(--paper);
  display: flex;
  gap: 12px;
}
.eval-note .icon {
  width: 22px; height: 22px;
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.eval-note .ttl { font-size: 0.88rem; font-weight: 500; }
.eval-note .desc { font-size: 0.82rem; color: var(--ink-soft); }

/* ── Pricing ── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
@media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } }
.plan {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.plan + .plan { border-left: 1.5px solid var(--hairline); }
@media (max-width: 720px) {
  .plan + .plan { border-left: 0; border-top: 1.5px solid var(--hairline); }
}
.plan-head { display: flex; justify-content: space-between; align-items: baseline; }
.plan-name {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.plan-popular {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green-deep);  /* WCAG AA on green-soft */
  background: var(--green-soft);
  padding: 2px 8px;
  border-radius: var(--r-sm);
}
.plan-price {
  font-family: var(--mono);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}
.plan-price small { font-size: 0.85rem; color: var(--ink-soft); font-weight: 400; }
.plan ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan ul li {
  font-size: 0.9rem;
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--ink);
}
.plan ul li::before {
  content: "✓";
  color: var(--green-deep);
  font-weight: 600;
}

/* ── Dark optimizer section (inverted AI Labs) ── */
.invert {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}
.invert .eyebrow { color: rgba(250,250,248,0.55); }
.invert .eyebrow::before { background: rgba(250,250,248,0.45); }
.invert .display, .invert .h1, .invert .h2 { color: var(--paper); }
.invert .lede { color: rgba(250,250,248,0.65); }
.invert .opt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-left: 1px solid rgba(250,250,248,0.12);
  border-top: 1px solid rgba(250,250,248,0.12);
  margin-top: 40px;
}
@media (max-width: 720px) { .invert .opt-grid { grid-template-columns: 1fr; } }
.invert .opt-cell {
  padding: 18px 22px;
  border-right: 1px solid rgba(250,250,248,0.12);
  border-bottom: 1px solid rgba(250,250,248,0.12);
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--paper);
}
.invert .opt-cell::before {
  content: "✓";
  color: var(--green);
  font-family: var(--mono);
  font-weight: 500;
  flex-shrink: 0;
}
.invert .opt-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(250,250,248,0.12);
}
@media (max-width: 600px) { .invert .opt-stats { grid-template-columns: repeat(2, 1fr); } }
.invert .opt-stats .num {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.invert .opt-stats .lbl {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(250,250,248,0.55);
  margin-top: 4px;
}

/* ── Community data table ── */
.comm-table { border-top: 1.5px solid var(--hairline); }
.comm-row {
  display: grid;
  grid-template-columns: 50px 2fr 1.4fr 1.5fr 60px 100px;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1.5px solid var(--hairline);
  align-items: center;
  font-size: 0.9rem;
}
.comm-row.head {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  padding: 12px 0;
}
.comm-row .rank {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.comm-row .nm { font-weight: 500; }
.comm-row .brand { color: var(--ink-soft); font-size: 0.86rem; }
.comm-row .prev {
  display: flex; align-items: center; gap: 10px;
}
.comm-row .prev-bar {
  flex: 1;
  height: 4px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.comm-row .prev-fill {
  height: 100%;
  background: var(--ink);
  border-radius: 2px;
}
.comm-row .prev-pct {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  min-width: 32px;
  text-align: right;
}
.comm-row .grade {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  border: 1px solid var(--green);
  color: var(--green-deep);
  border-radius: var(--r-sm);
  padding: 2px 0;
}
.comm-row .grade.b { border-color: var(--amber); color: var(--amber); }
.comm-row .grade.c { border-color: var(--red); color: var(--red); }
.comm-row .dose {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink);
  text-align: right;
}
@media (max-width: 760px) {
  .comm-row { grid-template-columns: 30px 1fr 60px; gap: 12px; }
  .comm-row .brand, .comm-row .prev, .comm-row .dose { display: none; }
  .comm-row.head .brand, .comm-row.head .prev, .comm-row.head .dose { display: none; }
}
.comm-fade {
  position: relative;
  margin-top: -16px;
  padding-top: 16px;
}
.comm-fade::before {
  content: "";
  position: absolute;
  inset: 0 0 64px 0;
  background: linear-gradient(to bottom, rgba(250,250,248,0) 0%, var(--paper) 80%);
  pointer-events: none;
}
.comm-fade .comm-row { opacity: 0.5; pointer-events: none; }
.comm-cta-row {
  text-align: center;
  padding: 24px 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  position: relative;
  z-index: 1;
}
.comm-cta-row a {
  color: var(--green-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--green);
  padding-bottom: 1px;
}

/* ── Case study record ── */
.case-record {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}
.case-record .head {
  padding: 18px 22px;
  border-bottom: 1.5px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--paper);
}
.case-record .head .id {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.case-record .head .id strong { color: var(--ink); font-weight: 500; }
.case-record .head .tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border: 1px solid var(--hairline-strong);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
}
.case-record .body {
  padding: 28px 22px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 760px) {
  .case-record .body { grid-template-columns: 1fr; }
}
.case-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-summary .ages {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
}
.case-summary .ages .before {
  font-size: 1.6rem;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.case-summary .ages .arrow { color: var(--ink-soft); font-size: 1rem; }
.case-summary .ages .after {
  font-size: 2.4rem;
  color: var(--green);
  letter-spacing: -0.03em;
}
.case-summary .ages .unit {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-left: 2px;
}
.case-summary .delta {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--green-deep);
}
.case-steps {
  display: flex;
  flex-direction: column;
}
.case-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1.5px solid var(--hairline);
}
.case-step:first-child { border-top: 0; padding-top: 0; }
.case-step .num {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.case-step .ttl { font-weight: 500; font-size: 0.92rem; margin-bottom: 2px; }
.case-step .desc { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; }

/* ── Final CTA ── */
.cta-final {
  text-align: center;
  padding: clamp(80px, 10vw, 140px) 0;
}
.cta-final .display { max-width: 22ch; margin: 0 auto 24px; }
.cta-final .lede { margin: 0 auto 36px; text-align: center; }
.cta-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cta-final .meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 28px;
  letter-spacing: 0.04em;
}

/* ── Preview banner ── */
.preview-banner {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  text-align: center;
  padding: 6px 12px;
  letter-spacing: 0.04em;
}
.preview-banner a { color: var(--green); text-decoration: none; }

/* ── Accordion (FAQ) ── */
.faq { border-top: 1.5px solid var(--hairline); }
.faq details {
  border-bottom: 1.5px solid var(--hairline);
}
.faq details > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-weight: 500;
  font-size: 1rem;
}
.faq details > summary::-webkit-details-marker { display: none; }
.faq details > summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--ink-soft);
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.faq details[open] > summary::after { content: "−"; }
.faq details > div {
  padding: 0 0 22px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 64ch;
}

/* ── Comparison table (pricing) ── */
.cmp { border-top: 1.5px solid var(--hairline); }
.cmp-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1.5px solid var(--hairline);
  align-items: baseline;
  font-size: 0.92rem;
}
.cmp-row.head {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 12px 0;
}
.cmp-row.cat {
  border-bottom: 1px solid var(--ink);
  padding: 28px 0 10px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.cmp-row .yes { color: var(--green-deep); font-family: var(--mono); }
.cmp-row .no  { color: var(--ink-faint); font-family: var(--mono); }
.cmp-row .val { font-family: var(--mono); font-size: 0.85rem; }
.cmp-row .v-c { text-align: center; }
/* 5-col compare: Feature + 4 vendors. First vendor is "us" — slightly bolder. */
.cmp.cols-5 .cmp-row { grid-template-columns: 1.6fr repeat(4, 1fr); }
.cmp.cols-5 .cmp-row .us {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink);
  text-align: center;
}
.cmp.cols-5 .cmp-row .vendor {
  font-family: var(--mono);
  color: var(--ink-soft);
  text-align: center;
  font-size: 0.82rem;
}
@media (max-width: 760px) {
  .cmp.cols-5 .cmp-row {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 12px;
    font-size: 0.85rem;
  }
  .cmp.cols-5 .cmp-row > *:nth-child(4),
  .cmp.cols-5 .cmp-row > *:nth-child(5) { display: none; }
}

/* ── Form: hairline ── */
.form-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.form-row input[type="email"],
.form-row input[type="text"],
.form-row input[type="search"],
.form-row input[type="number"],
.form-row select,
.form-row textarea {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.95rem;
  color: var(--ink);
  font-family: var(--sans);
  transition: border-color 0.15s;
  min-width: 0;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--ink-faint); }
.form-row select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

/* ── Compact inline form-grid (for multi-input tools like bio-age) ── */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field label {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.field label .unit { color: var(--ink-faint); margin-left: 4px; }
.field input, .field select {
  padding: 9px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--ink);
  font-family: var(--sans);
  transition: border-color 0.15s;
  min-width: 0;
  width: 100%;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--ink); }

/* Field grid (multi-input forms like bio-age) */
.field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 600px) { .field-grid { grid-template-columns: repeat(2, 1fr); } }

/* Chips (interactive removable tags) */
.chip-input {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 44px;
  transition: border-color 0.15s;
}
.chip-input:focus-within { border-color: var(--ink); }
.chip-input input {
  flex: 1;
  min-width: 120px;
  border: 0;
  outline: 0;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink);
  background: transparent;
  padding: 4px 6px;
}
.chip-input input::placeholder { color: var(--ink-faint); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  padding: 4px 4px 4px 10px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.chip.unresolved {
  border-color: var(--amber);
  color: var(--amber);
}
.chip button {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.chip button:hover { background: var(--hairline); color: var(--ink); }

/* ── Reaction-time arena ── */
.rt-arena {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  background: var(--ink);
  color: var(--paper);
  transition: background 0.2s;
  overflow: hidden;
  border: 1px solid var(--ink);
}
.rt-arena.wait  { background: var(--red); border-color: var(--red); }
.rt-arena.ready { background: var(--green); border-color: var(--green); }
.rt-arena .rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.rt-arena .rings .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0, 163, 108, 0.18);
}
.rt-arena .rings .ring.r1 { width: 200px; height: 200px; }
.rt-arena .rings .ring.r2 { width: 140px; height: 140px; opacity: 0.55; }
.rt-arena .rings .ring.r3 { width:  80px; height:  80px; opacity: 0.85; }
.rt-arena .rings .dot {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(0, 163, 108, 0.5);
  animation: rt-glow 2s ease-in-out infinite;
}
@keyframes rt-glow {
  0%, 100% { box-shadow: 0 0 8px  rgba(0, 163, 108, 0.4); transform: scale(1); }
  50%      { box-shadow: 0 0 20px rgba(0, 163, 108, 0.7); transform: scale(1.3); }
}
.rt-arena.wait .rings, .rt-arena.ready .rings { display: none; }
.rt-arena .label {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.rt-arena .label.big {
  font-family: var(--mono);
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--green);
}
.rt-arena.wait .label.big, .rt-arena.ready .label.big { color: var(--paper); }

/* ── Round chips (RT result rounds) ── */
.round-chips {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.round-chips .rc {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 4px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}

/* ── Protocol picker (breathing) ── */
.protocol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 32px;
}
.protocol-card {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}
.protocol-card:hover { border-color: var(--ink); }
.protocol-card.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.protocol-card .nm {
  font-size: 0.95rem;
  font-weight: 500;
}
.protocol-card .seq {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-top: 4px;
  letter-spacing: 0.03em;
}
.protocol-card.active .seq { color: rgba(250,250,248,0.7); }

/* ── Breathing circle ── */
.breathe-stage {
  text-align: center;
  margin: 32px 0;
  padding: 32px 0;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
}
.breathe-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--green-soft);
  border: 2px solid var(--green);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.breathe-circle .phase {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green-deep);
}
.breathe-circle .countdown {
  font-family: var(--mono);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 4px;
}

/* ── Tool state machine ── */
[data-tool] [data-state] { transition: opacity 0.15s; }
[data-tool] [data-state][hidden] { display: none; }

/* Hairline rotating spinner */
.ring-spinner {
  width: 18px; height: 18px;
  border: 1.5px solid var(--hairline-strong);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: ring-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
.tool-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 0;
}
.tool-loading .label {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

/* Error banner */
.tool-error {
  border: 1px solid var(--red);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  background: var(--surface);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.tool-error .icon {
  width: 22px; height: 22px;
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.tool-error .msg {
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.5;
}

/* ── iPhone-frame panel ── */
.phone {
  width: 240px;
  border: 1.5px solid var(--ink);
  border-radius: 26px;
  padding: 10px;
  background: var(--ink);
}
.phone-screen {
  background: var(--surface);
  border-radius: 18px;
  padding: 22px 16px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.phone-screen .top {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
}
.phone-screen .big-num {
  font-family: var(--mono);
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.phone-screen .big-num small {
  display: block;
  font-size: 0.7rem;
  color: var(--green-deep);
  margin-top: 6px;
  font-weight: 400;
}
.phone-screen .row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 8px 0;
  border-top: 1.5px solid var(--hairline);
}
.phone-screen .row span:first-child { color: var(--ink-soft); }
.phone-screen .row span:last-child { font-family: var(--mono); font-weight: 500; }

/* ── Stat 2-col grid ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-left: 1.5px solid var(--hairline);
  border-top: 1.5px solid var(--hairline);
}
@media (max-width: 720px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-grid > div {
  padding: 22px 18px;
  border-right: 1.5px solid var(--hairline);
  border-bottom: 1.5px solid var(--hairline);
}
.stat-grid .num {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat-grid .lbl {
  font-size: 0.85rem;
  color: var(--ink);
  margin-top: 4px;
}
.stat-grid .meta {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-top: 4px;
}

/* ── Pill row (trust pills, stat pills) ── */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  background: var(--surface);
}
.pill .v { color: var(--ink); font-weight: 500; }

/* ── Toggle (billing) ── */
.toggle {
  display: inline-flex;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  padding: 3px;
  background: var(--surface);
}
.toggle button {
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 6px 14px;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background 0.15s, color 0.15s;
}
.toggle button.active {
  background: var(--ink);
  color: var(--paper);
}

/* ── Feature catalog (grouped hair-table) ── */
.cat-group { margin-bottom: 56px; }
.cat-group:last-child { margin-bottom: 0; }
.cat-group .cat-title {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  display: flex;
  justify-content: space-between;
}
.cat-group .cat-title small {
  color: var(--ink-faint);
  font-weight: 400;
}
.cat-group .hair-row.feat {
  grid-template-columns: 50px 220px 1fr 90px;
}
@media (max-width: 760px) {
  .cat-group .hair-row.feat { grid-template-columns: 40px 1fr 60px; }
  .cat-group .hair-row.feat .desc { grid-column: 1 / -1; padding-left: 60px; margin-top: -8px; }
}

/* ── Generic prose (blog body, legal) ── */
.prose { max-width: 68ch; line-height: 1.7; }
.prose h1, .prose h2, .prose h3 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.015em; }
.prose h1 { font-size: var(--t-h1); margin: 1.4em 0 0.5em; }
.prose h2 { font-size: var(--t-h2); margin: 1.6em 0 0.4em; }
.prose h3 { font-size: var(--t-h3); margin: 1.4em 0 0.3em; }
.prose p, .prose ul, .prose ol { margin-bottom: 1em; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--paper);
  border: 1.5px solid var(--hairline);
  padding: 1px 5px;
  border-radius: var(--r-sm);
}
.prose pre {
  background: var(--ink);
  color: var(--paper);
  padding: 16px;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.86rem;
}
.prose pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.prose a { color: var(--green-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose blockquote {
  border-left: 2px solid var(--green);
  padding: 4px 0 4px 16px;
  color: var(--ink-soft);
  margin: 1em 0;
  font-style: normal;
}

/* ─────────────────────────────────────────────────────────────────
   EMR PATIENT SUMMARY V2 — design handoff April 28, 2026.
   See docs/specs/emr-patient-summary-v2.md.

   These classes are scoped to the patient summary page. They follow
   AI Labs rules: hairlines not shadows, mono on every number, ink-fill
   only for the one strongest CTA per page. The grouping below mirrors
   the section order on the page (top → bottom).
   ───────────────────────────────────────────────────────────────── */

/* ── Patient chart header (unified strip) ─────────────────────────
   One sticky strip per EMR patient page: breadcrumb (Summary) or
   Back-to-chart (Labs/Plan/Messages) on the left, viewer-action
   buttons on the right. Replaces the old .app-top + .crumbs +
   .top-actions trio that lived only on the Summary page and
   duplicated the global .emr-patient-banner. */
.patient-chart-header {
  position: sticky; top: 56px; z-index: 50;
  background: var(--paper);
  border-bottom: 1.5px solid var(--hairline);
}
.pch-strip {
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px; height: 44px;
}
.pch-back, .pch-crumbs {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-faint); letter-spacing: .04em;
  text-decoration: none;
  display: flex; align-items: center; gap: 6px;
}
.pch-back:hover { color: var(--ink); }
.pch-crumbs a {
  color: inherit;
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 1px;
}
.pch-crumbs .sep { color: var(--ink-faint); }
.pch-crumbs .here { color: var(--ink); }
.pch-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
}
.pch-actions .btn {
  height: 26px; padding: 0 10px; font-size: 11.5px;
}
.pch-actions .btn[aria-current="page"] {
  background: var(--ink-soft); color: var(--paper);
  border-color: var(--ink-soft);
  pointer-events: none;
}
/* Message button lights up amber when the polled badge fragment
   reports unread provider messages. :has() keeps the styling
   server-state-driven without a second swap. Excluded when
   aria-current="page" is set so the active-tab dark fill doesn't
   collide with the amber text + amber-tinted badge background —
   the visual that produced the orange-on-dark pill on /messages
   for a patient with unread threads. */
.pch-actions .pch-message:not([aria-current="page"]):has(.pch-message-badge .badge) {
  color: var(--warning);
  font-weight: 600;
}
/* When the Message button IS the active page AND there are unread
   threads, render the badge with the inverse contrast so the count
   is legible on the dark fill. The pch-message-badge wraps the
   server-rendered .badge, so target via the descendant. */
.pch-actions .pch-message[aria-current="page"] .pch-message-badge .badge {
  background: var(--paper);
  color: var(--ink-soft);
}

/* ATTENDING label rendered inside the Brief section eyebrow row. */
.lg-section .sec-head .attending {
  margin-left: 10px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── Patient sticky header ────────────────────────────────────── */
.patient-header {
  position: sticky; top: 44px; z-index: 40;
  background: var(--paper);
  border-bottom: 1.5px solid var(--hairline);
}
.ph-row1 { display: flex; align-items: center; gap: 14px; padding: 14px 24px 10px; }
.pt-avatar {
  width: 42px; height: 42px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 500;
  font-size: 13px; color: var(--ink);
  flex-shrink: 0;
}
.pt-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-name { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.pt-meta {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft); letter-spacing: .02em;
}
.pt-meta span + span {
  margin-left: 10px; padding-left: 10px;
  border-left: 1px solid var(--hairline-strong);
}
.pt-meta strong { color: var(--ink); font-weight: 500; }
.ph-divider { width: 1px; height: 30px; background: var(--hairline); }

/* Vitals strip */
.vitals { display: flex; gap: 0; }
.vital {
  padding: 0 14px;
  border-left: 1.5px solid var(--hairline);
  display: flex; flex-direction: column; gap: 2px;
}
.vital:first-child { border-left: 0; padding-left: 0; }
.vital .vl {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.vital .vv {
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.vital .vv.amber { color: var(--amber); }
.vital .vv.red   { color: var(--red); }
.vital .vv.green { color: var(--green); }
.vital .vv .u {
  font-family: var(--sans); font-size: 10px; font-weight: 400;
  color: var(--ink-soft); margin-left: 2px;
}
.pt-actions {
  margin-left: auto;
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}

/* Allergy / condition / care plan strip (Row 2) */
.ph-row2 {
  display: flex; align-items: center; gap: 0;
  padding: 0 24px; height: 32px;
  border-top: 1.5px solid var(--hairline);
  background: var(--surface);
  overflow: hidden;
}
.strip-cell {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px; height: 100%;
  border-right: 1.5px solid var(--hairline);
  flex-shrink: 0;
}
.strip-cell:first-child { padding-left: 0; }
.strip-cell:last-child { border-right: 0; margin-left: auto; padding-right: 0; }
.strip-lbl {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.strip-val { font-size: 12px; }
.strip-val.green { color: var(--green); font-weight: 500; }
.strip-val.mono { font-family: var(--mono); font-size: 11.5px; }
.pill-cluster { display: flex; gap: 6px; align-items: center; }
.pill .icd { font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); }
.pill.amber { border-color: var(--amber); color: var(--amber); }
.pill.red   { border-color: var(--red);   color: var(--red); }

/* Sub-nav (Row 3) */
.ph-row3 {
  display: flex; align-items: center; gap: 0;
  padding: 0 24px; height: 34px;
  border-top: 1.5px solid var(--hairline);
  background: var(--paper);
}
.subnav { display: flex; gap: 0; height: 100%; }
.subnav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 100%;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--ink); border-bottom-color: var(--ink); }
.subnav a .ct {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-faint); font-weight: 500;
}
.subnav a.active .ct { color: var(--ink-soft); }
.ph-row3 .right {
  margin-left: auto;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-soft);
}
.ph-row3 .right .item .v { color: var(--ink); font-weight: 500; }
.ph-row3 .right .stat-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  display: inline-block; vertical-align: middle; margin-right: 5px;
}

/* ── Section eyebrow + heading ────────────────────────────────── */
.lg-section { margin-bottom: 32px; scroll-margin-top: 160px; }

/* ── 01 / Brief ───────────────────────────────────────────────── */
.brief-card {
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: grid; grid-template-columns: 96px 1fr; gap: 18px;
}
.brief-meta {
  display: flex; flex-direction: column; gap: 8px;
  border-right: 1.5px solid var(--hairline);
  padding-right: 16px;
}
.brief-meta .lbl {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.brief-meta .v {
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.brief-meta .v.green { color: var(--green); }
.brief-body { display: flex; flex-direction: column; gap: 7px; }
.brief-line {
  display: grid; grid-template-columns: 64px 1fr; gap: 10px;
  font-size: 13px; line-height: 1.5;
}
.brief-line .tag {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); padding-top: 3px;
}
.brief-line strong { font-weight: 500; }
.brief-line em.ai-em { color: var(--green); font-style: normal; font-weight: 500; }
.brief-line .ref {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-faint); vertical-align: super;
}

/* Pinned alerts collapsible panel */
details.alerts {
  margin-top: 14px;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
details.alerts > summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--paper);
}
details.alerts > summary::-webkit-details-marker { display: none; }
details.alerts[open] > summary { border-bottom: 1.5px solid var(--hairline); }
.alerts-head-left { display: flex; align-items: center; gap: 10px; }
.alerts-head-left .caret {
  font-family: var(--mono); color: var(--ink-soft);
  transition: transform .15s; display: inline-block;
}
details.alerts[open] .alerts-head-left .caret { transform: rotate(90deg); }
.alerts-head-left .ttl {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
}
.alerts-head-counts {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: 10.5px;
}
.ah-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 7px; border-radius: var(--r-sm);
  border: 1px solid; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; font-weight: 500;
}
.ah-chip.red   { color: var(--red);      border-color: var(--red); }
.ah-chip.amber { color: var(--amber);    border-color: var(--amber); }
.ah-chip.ink   { color: var(--ink-soft); border-color: var(--hairline-strong); }
.alerts-head-counts .meta { color: var(--ink-faint); }

table.alerts-tbl {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px; table-layout: fixed;
}
table.alerts-tbl col.c-sev    { width: 36px; }
table.alerts-tbl col.c-kind   { width: 108px; }
table.alerts-tbl col.c-body   { width: auto; }
table.alerts-tbl col.c-action { width: 140px; }
table.alerts-tbl col.c-ack    { width: 140px; }
table.alerts-tbl tbody tr { border-top: 1.5px solid var(--hairline); }
table.alerts-tbl tbody tr:first-child { border-top: 0; }
table.alerts-tbl td { padding: 9px 12px; vertical-align: middle; }
table.alerts-tbl td.body { white-space: normal; line-height: 1.4; }
table.alerts-tbl td.body .meta { color: var(--ink-soft); font-size: 11.5px; }
table.alerts-tbl td.actions { text-align: right; white-space: nowrap; }
table.alerts-tbl td.actions .ack-group { display: inline-flex; gap: 4px; }

.sev {
  width: 14px; height: 14px; border-radius: 2px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
}
.sev.red   { background: var(--red);   color: var(--paper); }
.sev.amber { background: var(--amber); color: var(--paper); }
.sev.ink   { background: var(--ink);   color: var(--paper); }
.kind-lbl {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}

/* xs button — used in the alerts ack column */
.btn-xs {
  height: 22px; padding: 0 7px; font-size: 10.5px;
  font-family: var(--mono); letter-spacing: .04em;
}
.plus { font-family: var(--mono); font-weight: 500; }

/* ── 02 / Interventions: filter pill toolbar ──────────────────── */
.iv-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.fp {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-sm);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  border: 1px solid var(--hairline-strong);
  background: var(--paper); color: var(--ink-soft);
  cursor: pointer; line-height: 1;
  text-decoration: none;
}
.fp .ct {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-faint);
}
.fp:hover { border-color: var(--ink); color: var(--ink); }
.fp.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fp.active .ct { color: var(--paper); opacity: .7; }
.fp.dashed { border-style: dashed; }
.fp.secondary {
  border-color: var(--hairline);
  color: var(--ink-faint);
  background: transparent;
}
.fp.secondary .ct { color: var(--ink-faint); }
.fp.secondary:hover { border-color: var(--ink-soft); color: var(--ink-soft); }
.fp-divider { width: 1px; height: 18px; background: var(--hairline-strong); margin: 0 2px; }
.fp-label {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 4px;
}

/* ── 02 / Interventions: grouped table ────────────────────────── */
.iv-wrap {
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
table.iv {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px; table-layout: fixed;
}
/* 6-column layout (Name / Prescriber / Schedule / Cycle / Adherence /
   Refill). Older 9-col widths kept below for any other table that
   still references them. */
.iv col.c-name      { width: 24%; }
.iv col.c-prescr    { width: 16%; }
.iv col.c-sched     { width: 18%; }
.iv col.c-cycle     { width: 13%; }
.iv col.c-adh       { width: 14%; }
.iv col.c-refill    { width: 15%; }

/* Legacy widths — only fire when those columns exist in another table. */
.iv col.c-source    { width: 7%; }
.iv col.c-reviewed  { width: 9%; }
.iv col.c-status    { width: 9%; }
.iv thead th {
  background: var(--paper);
  border-bottom: 1.5px solid var(--hairline);
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 500;
  text-align: left; padding: 8px 10px; white-space: nowrap;
  position: sticky; top: 0;
}
.iv tbody tr.data {
  border-top: 1.5px solid var(--hairline);
  transition: background .12s;
}
.iv tbody tr.data:hover { background: var(--paper); cursor: pointer; }
.iv td {
  padding: 9px 10px; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iv td.wrap { white-space: normal; }
/* Name column wraps onto a second line so long compound stacks
   (e.g. "Glow Stack (BPC-157 + TB-500 + GHK-Cu)") stay readable.
   first-child + nth-child(1) lock to the leftmost cell — no need to
   add a class to every row. The native title attribute gives a hover
   tooltip with the full name on the off-chance the column is still
   too narrow on a small viewport. */
.iv tbody tr.data > td:first-child { white-space: normal; }
.iv .nm { font-weight: 500; color: var(--ink); }
.iv .nm .brand {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-faint); margin-left: 0;
  display: block; font-weight: 400;
}

/* Group header rows */
.iv tr.grp td {
  background: var(--surface);
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1.5px solid var(--hairline);
  padding: 10px 10px;
}
.iv tr.grp:first-child td { border-top: 0; }
.iv tr.grp .grp-inner {
  display: flex; align-items: center; gap: 14px;
}
.iv tr.grp .grp-name {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.iv tr.grp .grp-name .badge {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--ink-soft);
  padding: 1px 6px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  letter-spacing: .04em;
}
.iv tr.grp .grp-summary {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.iv tr.grp .grp-summary strong { color: var(--ink); font-weight: 500; }
.iv tr.grp .grp-actions { margin-left: auto; display: flex; gap: 6px; }

/* Empty group row */
.iv tr.grp.empty .grp-summary {
  color: var(--ink-faint);
  font-style: italic;
}
.iv tr.grp.empty .grp-summary em {
  font-style: normal; color: var(--ink-soft);
}

/* Secondary groups (Procedures / Lifestyle / Supplements) hidden by default.
   The group slug is singular ("supplement"), so the data-show key matches
   the slug after stripping the "show-" prefix. */
.iv tbody tr.grp.secondary,
.iv tbody tr.data.secondary { display: none; }
.iv.show-procedure tbody tr.grp.g-procedure,
.iv.show-procedure tbody tr.data.g-procedure { display: table-row; }
.iv.show-lifestyle tbody tr.grp.g-lifestyle,
.iv.show-lifestyle tbody tr.data.g-lifestyle { display: table-row; }
.iv.show-supplement tbody tr.grp.g-supplement,
.iv.show-supplement tbody tr.data.g-supplement { display: table-row; }

/* Filter pills (Rx / Peptides / Hormone / GLP-1 / Supplements). Each
   pill applies .filter-<slug> on the table; rows whose group doesn't
   match collapse. The "All" pill clears the filter. Slugs are singular,
   matching the per-row g-* class set by the template. The supplement
   filter overrides the .secondary hide so clicking Supplements shows
   exactly the supplement group — exclusive of the four primary groups. */
.iv[class*="filter-"] tbody tr.grp,
.iv[class*="filter-"] tbody tr.data { display: none; }
.iv.filter-rx tbody tr.grp.g-rx,
.iv.filter-rx tbody tr.data.g-rx,
.iv.filter-peptide tbody tr.grp.g-peptide,
.iv.filter-peptide tbody tr.data.g-peptide,
.iv.filter-hormone tbody tr.grp.g-hormone,
.iv.filter-hormone tbody tr.data.g-hormone,
.iv.filter-glp1 tbody tr.grp.g-glp1,
.iv.filter-glp1 tbody tr.data.g-glp1,
.iv.filter-supplement tbody tr.grp.g-supplement,
.iv.filter-supplement tbody tr.data.g-supplement { display: table-row; }

/* Source / prescriber column */
.src {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .04em; text-transform: uppercase;
}
.src.provider { color: var(--ink); font-weight: 500; }
.src.provider::before { content: "◆ "; }
.src.patient { color: var(--ink-faint); }
.src.patient::before { content: "○ "; color: var(--ink-faint); }

.prescriber {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.prescriber .nm-doc {
  font-size: 12px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prescriber .org {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px;
}
.prescriber .org.practice { color: var(--green); }
.prescriber .org.external { color: var(--amber); }
.prescriber .org.self     { color: var(--ink-faint); }
.prescriber .org::before {
  content: ""; width: 5px; height: 5px;
  border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.prescriber .org.practice::before { background: var(--green); }
.prescriber .org.external::before { background: var(--amber); }
.prescriber .org.self::before     { background: var(--ink-faint); }

/* Schedule column */
.sched {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.sched .freq { color: var(--ink-soft); }

/* Cycle column */
.cycle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.cycle .bar {
  width: 48px; height: 4px;
  background: var(--hairline);
  border-radius: 1px; overflow: hidden;
}
.cycle .bar > span {
  display: block; height: 100%;
  background: var(--green);
}
.cycle .ph {
  font-size: 9.5px; letter-spacing: .06em;
  padding: 1px 4px; border-radius: 2px; text-transform: uppercase;
}
.cycle .ph.on  { background: var(--green-soft); color: var(--green); }
.cycle .ph.off {
  background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--hairline-strong);
}

/* Adherence column */
.adh {
  font-family: var(--mono); font-size: 11px;
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; gap: 1px;
  line-height: 1.2;
}
.adh .pct { color: var(--ink); font-weight: 500; }
.adh .pct.green { color: var(--green); }
.adh .pct.amber { color: var(--amber); }
.adh .pct.red   { color: var(--red); }
.adh .doses { color: var(--ink-faint); font-size: 9.5px; }

/* Refill column */
.refill {
  font-family: var(--mono); font-size: 11px;
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; gap: 1px;
  line-height: 1.2;
}
.refill .days { font-weight: 500; }
.refill .days.red   { color: var(--red); }
.refill .days.amber { color: var(--amber); }
.refill .since { color: var(--ink-faint); font-size: 9.5px; }

.reviewed {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Status pill */
.stat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--r-sm);
  border: 1px solid; white-space: nowrap;
}
.stat-pill.active   { color: var(--green);    border-color: var(--green); }
.stat-pill.monitor  { color: var(--amber);    border-color: var(--amber); }
.stat-pill.urgent   { color: var(--red);      border-color: var(--red); }
.stat-pill.ink      { color: var(--ink-soft); border-color: var(--hairline-strong); }

/* Supplements rollup */
.supp-rollup td {
  background: var(--paper);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft); letter-spacing: .04em;
}
.supp-rollup .expand-link {
  color: var(--ink); font-weight: 500;
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 1px;
  text-decoration: none;
}

/* ── 03 / Wearables strip ─────────────────────────────────────── */
.wear-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.wear-cell {
  padding: 14px 14px 12px;
  border-left: 1.5px solid var(--hairline);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 108px;
}
.wear-cell:first-child { border-left: 0; }
.wear-cell .head { display: flex; justify-content: space-between; align-items: baseline; }
.wear-cell .lbl {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
}
.wear-cell .src7d {
  font-family: var(--mono); font-size: 9px;
  color: var(--ink-faint); letter-spacing: .04em;
  text-transform: uppercase;
}
.wear-cell .val {
  font-family: var(--mono); font-size: 22px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink); line-height: 1;
  display: flex; align-items: baseline; gap: 4px;
}
.wear-cell .val .u {
  font-family: var(--sans); font-size: 10px; font-weight: 400;
  color: var(--ink-soft);
}
.wear-cell .trend-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.wear-cell .trend.up   { color: var(--green); }
.wear-cell .trend.down { color: var(--red); }
.wear-cell .trend.flat { color: var(--ink-faint); }
.wear-cell .range { color: var(--ink-faint); }
.wear-spark { width: 100%; height: 24px; }
.wear-cell.flagged { background: #FFFBF5; }

/* ── 04 / Conditions grid ─────────────────────────────────────── */
.cond-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.cond-row {
  padding: 10px 14px;
  border-top: 1.5px solid var(--hairline);
  border-left: 1.5px solid var(--hairline);
}
.cond-row:nth-child(-n+2) { border-top: 0; }
.cond-row:nth-child(odd)  { border-left: 0; }
.cond-name {
  font-size: 13px; font-weight: 500;
  line-height: 1.35; margin-bottom: 4px;
}
.cond-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.cond-icd {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-faint);
}
.cond-sev {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: var(--r-sm);
  border: 1px solid;
}
.cond-sev.amber { color: var(--amber);    border-color: var(--amber); }
.cond-sev.red   { color: var(--red);      border-color: var(--red); }
.cond-sev.ink   { color: var(--ink-soft); border-color: var(--hairline-strong); }

/* ── 05 / Labs (extends .iv) ──────────────────────────────────── */
.lab-table .nm { display: flex; flex-direction: column; gap: 1px; }
.lab-table .nm .sub {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-faint);
}
.lab-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.lab-val.amber { color: var(--amber); }
.lab-val.red   { color: var(--red); }
.lab-val.green { color: var(--green); }
.range {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-faint);
}
.spark { display: inline-block; }

/* v2-B: Δ vs prior column. Direction class set semantically by the
   per-LOINC polarity helper — green when the trend favors health,
   red when not. */
.lab-table .trend {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.lab-table .trend.green { color: var(--green); }
.lab-table .trend.red   { color: var(--red); }

/* ── 06 / What changed ────────────────────────────────────────── */
details.changed {
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface);
}
details.changed > summary {
  padding: 10px 14px; font-size: 13px; font-weight: 500;
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between;
}
details.changed > summary::-webkit-details-marker { display: none; }
details.changed > summary .caret {
  font-family: var(--mono); color: var(--ink-soft);
  transition: transform .15s;
}
details.changed[open] > summary .caret { transform: rotate(90deg); }
details.changed[open] > summary { border-bottom: 1.5px solid var(--hairline); }
.changed-body { padding: 6px 14px 12px; }
.changed-row {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 12px;
  font-size: 12px; padding: 7px 0;
  border-top: 1.5px solid var(--hairline);
}
.changed-row:first-child { border-top: 0; }
.changed-row .when {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-faint);
}
.changed-row .delta {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.changed-row .delta.green { color: var(--green); }
.changed-row .delta.red   { color: var(--red); }
.changed-row .delta.amber { color: var(--amber); }

/* ── Patient summary page wrapper ─────────────────────────────── */
.pt-summary-page {
  padding: 20px 24px 80px;
  max-width: 1320px;
}
/* This page wants a tighter section heading than the global default —
   eyebrow + title share a baseline with a hairline tick prefix. */
.pt-summary-page .sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1.5px solid var(--hairline);
  padding-bottom: 8px; margin-bottom: 14px;
  margin-top: 0; padding-top: 0; border-top: 0; /* override global .sec-head */
}
.pt-summary-page .sec-head .left { display: flex; align-items: baseline; gap: 14px; }
.pt-summary-page .sec-title { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; }
.pt-summary-page .sec-actions { display: flex; gap: 6px; align-items: center; }
.pt-summary-page .sec-meta {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-faint); letter-spacing: .04em;
}
.pt-summary-page .eyebrow {
  position: relative; padding-left: 24px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 500;
  display: inline-block; margin: 0;
  border: 0;
}
.pt-summary-page .eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 18px; height: 1px; background: var(--hairline-strong);
}

/* End EMR PATIENT SUMMARY V2 ─────────────────────────────────── */