/* longevity-levers.css \u2014 "Longevity Levers" explorer (Phase 1)
 * Matches the longevity page's gold/teal aesthetic; tokens from tokens.css.
 */

.lv-section{max-width:820px;margin:0 auto;padding:3.5rem 1.25rem 1rem}
.lv-section-head{text-align:center;margin-bottom:2rem}
.lv-section-eye{display:inline-block;font-family:'Space Grotesk',Inter,sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--hc-teal);margin-bottom:.75rem}
.lv-section-title{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.9rem,4.5vw,2.8rem);font-weight:700;letter-spacing:-.02em;color:var(--hc-ink-900);margin:0 0 .6rem}
.lv-section-sub{font-size:1rem;line-height:1.65;color:var(--hc-slate-600);max-width:600px;margin:0 auto}

.lv-wrap{position:relative}

/* progress */
.lv-prog{height:4px;background:var(--hc-surface-300);border-radius:50px;overflow:hidden;margin-bottom:1.5rem}
.lv-prog-bar{height:100%;background:linear-gradient(90deg,#E0B43C,var(--hc-teal));border-radius:50px;transition:width .45s cubic-bezier(.25,1,.5,1)}

/* generic card (question steps + intro) */
.lv-card{background:var(--hc-surface-50);border:1px solid var(--hc-surface-300);border-radius:18px;padding:2.25rem 2rem;box-shadow:0 8px 30px rgba(6,15,32,.06)}

/* intro */
.lv-intro{text-align:center}
.lv-eyebrow{font-family:'Space Grotesk',Inter,sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--hc-teal);margin-bottom:.9rem}
.lv-intro-h{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.7rem,4vw,2.4rem);font-weight:700;color:var(--hc-ink-900);margin:0 0 1rem}
.lv-intro-p{font-size:1.02rem;line-height:1.7;color:var(--hc-slate-700);max-width:560px;margin:0 auto 1rem}
.lv-intro-note{font-size:.9rem;line-height:1.65;color:var(--hc-slate-500);max-width:560px;margin:0 auto 1.75rem;padding:.9rem 1.1rem;background:var(--hc-surface-200);border-left:3px solid var(--hc-teal);border-radius:0 10px 10px 0;text-align:left}

/* question steps */
.lv-q-count{font-family:'Space Grotesk',Inter,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hc-slate-450);margin-bottom:.85rem}
.lv-q{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.35rem,3vw,1.7rem);font-weight:600;color:var(--hc-ink-900);line-height:1.3;margin:0 0 .5rem}
.lv-q-help{font-size:.9rem;line-height:1.55;color:var(--hc-slate-500);margin:0 0 1.5rem}

.lv-opts{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.25rem}
.lv-opt{width:100%;text-align:left;font-family:Inter,sans-serif;font-size:.98rem;font-weight:500;color:var(--hc-ink-800);background:var(--hc-surface-100);border:1.5px solid var(--hc-surface-350);border-radius:12px;padding:1rem 1.15rem;cursor:pointer;transition:all .2s cubic-bezier(.25,1,.5,1)}
.lv-opt:hover{border-color:var(--hc-teal);background:var(--hc-surface-50);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,180,162,.12)}
.lv-opt-on{border-color:var(--hc-teal);background:rgba(0,180,162,.07)}

.lv-btn{font-family:'Space Grotesk',Inter,sans-serif;font-weight:700;font-size:.92rem;letter-spacing:.02em;border:none;border-radius:50px;padding:.85rem 2rem;cursor:pointer;transition:all .25s cubic-bezier(.25,1,.5,1)}
.lv-btn-go{background:linear-gradient(120deg,#E0B43C,var(--hc-teal));color:#fff}
.lv-btn-go:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,180,162,.28)}
.lv-back{background:none;border:none;color:var(--hc-slate-500);font-family:Inter,sans-serif;font-size:.88rem;font-weight:500;cursor:pointer;padding:.35rem .1rem}
.lv-back:hover{color:var(--hc-teal)}

/* results */
.lv-results-head{text-align:center;margin-bottom:1.75rem}
.lv-results-h{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:700;color:var(--hc-ink-900);margin:0 0 .55rem}
.lv-results-sub{font-size:.95rem;line-height:1.6;color:var(--hc-slate-600);max-width:560px;margin:0 auto}

.lv-rcard{background:var(--hc-surface-50);border:1px solid var(--hc-surface-300);border-radius:16px;padding:1.5rem 1.6rem;margin-bottom:1.1rem;box-shadow:0 4px 18px rgba(6,15,32,.05)}
.lv-rcard-top{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.lv-rcard-icon{font-size:1.7rem;line-height:1;flex-shrink:0}
.lv-rcard-titles{flex:1;min-width:0}
.lv-rcard-name{font-family:'Fraunces',Georgia,serif;font-size:1.2rem;font-weight:600;color:var(--hc-ink-900);margin-bottom:.4rem}
.lv-badges{display:flex;flex-wrap:wrap;gap:.4rem}
.lv-tier{font-family:'Space Grotesk',Inter,sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.24rem .6rem;border-radius:50px}
.lv-tier-strong{background:rgba(16,185,129,.14);color:#0a7d5a}
.lv-tier-moderate{background:rgba(224,180,60,.16);color:#997611}
.lv-tier-observational{background:var(--hc-surface-300);color:var(--hc-slate-600)}
.lv-mod{font-family:'Space Grotesk',Inter,sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.24rem .6rem;border-radius:50px;background:rgba(0,180,162,.12);color:var(--hc-teal-deep)}

.lv-standing{font-size:1.02rem;font-weight:500;line-height:1.55;color:var(--hc-ink-800);margin:0 0 .8rem}
.lv-says{font-size:.94rem;line-height:1.65;color:var(--hc-slate-700);margin:0 0 .9rem}
.lv-figure{font-family:'Space Grotesk',Inter,sans-serif;font-size:.86rem;font-weight:500;color:var(--hc-ink-900);background:var(--hc-surface-200);border-radius:10px;padding:.7rem .9rem;margin-bottom:.9rem;line-height:1.45}
.lv-agenote{font-size:.88rem;line-height:1.55;color:var(--hc-teal-deep);background:rgba(0,180,162,.07);border-left:3px solid var(--hc-teal);border-radius:0 8px 8px 0;padding:.6rem .85rem;margin-bottom:.9rem}
.lv-src{font-size:.82rem;line-height:1.5;color:var(--hc-slate-500);margin-bottom:.5rem}
.lv-src-lbl{font-weight:700;color:var(--hc-slate-600);text-transform:uppercase;letter-spacing:.05em;font-size:.68rem}
.lv-caveat{font-size:.85rem;line-height:1.55;color:var(--hc-slate-600);background:var(--hc-surface-100);border-radius:10px;padding:.75rem .9rem}
.lv-caveat-lbl{font-weight:700;color:var(--hc-warning);text-transform:uppercase;letter-spacing:.05em;font-size:.68rem;display:block;margin-bottom:.15rem}

.lv-foot{margin-top:1.5rem;text-align:center}
.lv-foot-note{font-size:.86rem;line-height:1.65;color:var(--hc-slate-500);max-width:600px;margin:0 auto 1.5rem;padding:1rem 1.2rem;background:var(--hc-surface-200);border-radius:12px}
.lv-btn-reset{background:var(--hc-surface-300);color:var(--hc-ink-800)}
.lv-btn-reset:hover{background:var(--hc-surface-400);transform:translateY(-1px)}

/* dark mode */
body.dark .lv-card,body.dark .lv-rcard{background:var(--hc-ink-800);border-color:var(--hc-ink-700)}
body.dark .lv-section-title,body.dark .lv-intro-h,body.dark .lv-q,body.dark .lv-rcard-name,body.dark .lv-results-h,body.dark .lv-standing{color:#fff}
body.dark .lv-opt{background:var(--hc-ink-750);border-color:var(--hc-ink-700);color:var(--hc-slate-200)}
body.dark .lv-opt:hover{background:var(--hc-ink-700)}
body.dark .lv-intro-note,body.dark .lv-figure,body.dark .lv-foot-note{background:var(--hc-ink-750)}
body.dark .lv-caveat{background:var(--hc-ink-750)}
body.dark .lv-says,body.dark .lv-intro-p{color:var(--hc-slate-300)}
body.dark .lv-prog{background:var(--hc-ink-700)}
/* dark-mode text fixes: these elements re-darken their background, so their text must lighten too */
body.dark .lv-figure{color:var(--hc-slate-200)}
body.dark .lv-caveat,body.dark .lv-foot-note,body.dark .lv-intro-note{color:var(--hc-slate-300)}
body.dark .lv-src{color:var(--hc-slate-400)}
body.dark .lv-src-lbl{color:var(--hc-slate-300)}
body.dark .lv-q-help,body.dark .lv-results-sub,body.dark .lv-section-sub{color:var(--hc-slate-400)}
body.dark .lv-agenote{background:rgba(0,180,162,.12);color:var(--hc-teal-light)}

@media(max-width:600px){
  .lv-card{padding:1.6rem 1.25rem}
  .lv-rcard{padding:1.25rem 1.15rem}
  .lv-section{padding-top:2.5rem}
}

/* ---- Dense rebuild additions (v2.23.0): ladder, view tabs, reference table ---- */

/* View toggle tabs (results <-> browse) */
.lv-viewtabs{display:flex;gap:.4rem;justify-content:center;margin-bottom:1.5rem}
.lv-viewtab{font-family:'Space Grotesk',Inter,sans-serif;font-size:.82rem;font-weight:600;color:var(--hc-slate-500);background:var(--hc-surface-200);border:1px solid var(--hc-surface-300);border-radius:50px;padding:.5rem 1.1rem;cursor:pointer;transition:all .2s cubic-bezier(.25,1,.5,1)}
.lv-viewtab:hover{color:var(--hc-teal);border-color:var(--hc-teal)}
.lv-viewtab-on{background:var(--hc-teal);color:#fff;border-color:var(--hc-teal)}

/* Intro actions (start + browse) */
.lv-intro-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;align-items:center}
.lv-btn-ghost{background:transparent;color:var(--hc-teal);border:1.5px solid var(--hc-surface-350)}
.lv-btn-ghost:hover{border-color:var(--hc-teal);background:rgba(0,180,162,.06)}

/* Expandable ladder on result cards */
.lv-ladder{margin:.4rem 0 .9rem}
.lv-ladder-toggle{font-family:'Space Grotesk',Inter,sans-serif;font-size:.78rem;font-weight:600;color:var(--hc-teal);background:none;border:none;cursor:pointer;padding:.3rem 0}
.lv-ladder-toggle:hover{text-decoration:underline}
.lv-ladder-rows{margin-top:.5rem;border:1px solid var(--hc-surface-300);border-radius:10px;overflow:hidden}
.lv-ladder-row{display:flex;justify-content:space-between;gap:.9rem;padding:.55rem .85rem;font-size:.84rem;border-bottom:1px solid var(--hc-surface-300)}
.lv-ladder-row:last-child{border-bottom:none}
.lv-ladder-ref{background:var(--hc-surface-200)}
.lv-ladder-lvl{color:var(--hc-ink-800);font-weight:500;flex:1}
.lv-ladder-fig{font-family:'Space Grotesk',Inter,sans-serif;color:var(--hc-slate-600);text-align:right;white-space:nowrap}

.lv-standing-skip{color:var(--hc-slate-500);font-style:italic;font-weight:400}

/* Reference table (browse view) */
.lv-table{display:flex;flex-direction:column;gap:.6rem}
.lv-trow{background:var(--hc-surface-50);border:1px solid var(--hc-surface-300);border-radius:12px;padding:1rem 1.1rem;display:grid;grid-template-columns:1.1fr 1.6fr;gap:.5rem 1.2rem;align-items:start}
.lv-tcell-name{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-family:'Fraunces',Georgia,serif;font-size:1rem;font-weight:600;color:var(--hc-ink-900)}
.lv-ticon{font-size:1.15rem}
.lv-tname{margin-right:.15rem}
.lv-tcell-levels{display:flex;flex-direction:column;gap:.3rem}
.lv-trow-lvl{display:flex;justify-content:space-between;gap:.8rem;font-size:.82rem;padding:.2rem 0;border-bottom:1px dotted var(--hc-surface-350)}
.lv-trow-lvl:last-child{border-bottom:none}
.lv-tcell-src{grid-column:1 / -1;font-size:.76rem;color:var(--hc-slate-500);padding-top:.5rem;border-top:1px solid var(--hc-surface-200)}

/* emerging tier badge */
.lv-tier-emerging{background:rgba(139,110,220,.15);color:#6b4fb0}

/* dark mode for new elements */
body.dark .lv-viewtab{background:var(--hc-ink-750);border-color:var(--hc-ink-700);color:var(--hc-slate-300)}
body.dark .lv-viewtab-on{background:var(--hc-teal);color:#fff}
body.dark .lv-ladder-rows{border-color:var(--hc-ink-700)}
body.dark .lv-ladder-row{border-color:var(--hc-ink-700)}
body.dark .lv-ladder-ref{background:var(--hc-ink-750)}
body.dark .lv-ladder-lvl{color:var(--hc-slate-200)}
body.dark .lv-ladder-fig{color:var(--hc-slate-400)}
body.dark .lv-trow{background:var(--hc-ink-800);border-color:var(--hc-ink-700)}
body.dark .lv-tcell-name{color:#fff}
body.dark .lv-trow-lvl{border-color:var(--hc-ink-700);color:var(--hc-slate-200)}
body.dark .lv-tcell-src{color:var(--hc-slate-400);border-color:var(--hc-ink-700)}
body.dark .lv-tier-emerging{background:rgba(139,110,220,.25);color:#b9a4e8}
body.dark .lv-standing-skip{color:var(--hc-slate-400)}

@media(max-width:600px){
  .lv-trow{grid-template-columns:1fr}
  .lv-tcell-src{padding-top:.4rem}
}

/* ---- Biomarker clinical tier (v2.24.0) ---- */

/* Gating banner \u2014 the standing "not a diagnosis" frame */
.bio-banner{display:flex;gap:.85rem;align-items:flex-start;background:rgba(0,180,162,.06);border:1px solid rgba(0,180,162,.25);border-left:4px solid var(--hc-teal);border-radius:12px;padding:1rem 1.15rem;margin-bottom:1.5rem;font-size:.9rem;line-height:1.6;color:var(--hc-slate-700)}
.bio-banner-icon{font-size:1.3rem;line-height:1;flex-shrink:0}

/* Biomarker cards \u2014 clinical visual treatment (subtle left accent) */
.bio-card{border-left:3px solid var(--hc-teal-deep)}
.bio-explainer{border-left-color:var(--hc-warning)}
.bio-kind{font-family:'Space Grotesk',Inter,sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.24rem .6rem;border-radius:50px;background:var(--hc-surface-300);color:var(--hc-slate-600)}
.bio-explainer .bio-kind{background:rgba(230,126,34,.15);color:#b5651a}
.bio-q{margin-bottom:.9rem}

/* Biomarker option buttons (compact range pickers) */
.bio-opts{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.bio-opt{font-family:Inter,sans-serif;font-size:.9rem;font-weight:500;color:var(--hc-ink-800);background:var(--hc-surface-100);border:1.5px solid var(--hc-surface-350);border-radius:10px;padding:.6rem .9rem;cursor:pointer;transition:all .18s cubic-bezier(.25,1,.5,1)}
.bio-opt:hover{border-color:var(--hc-teal);transform:translateY(-1px)}
.bio-opt-on{border-color:var(--hc-teal);background:rgba(0,180,162,.08);color:var(--hc-teal-deep);font-weight:600}

/* Clinical sub-section header in the browse table */
.bio-table-head{margin:2.25rem 0 1rem;text-align:center}
.bio-table-h{font-family:'Fraunces',Georgia,serif;font-size:1.3rem;font-weight:600;color:var(--hc-ink-900);margin:0 0 .35rem}
.bio-table-sub{font-size:.86rem;line-height:1.5;color:var(--hc-slate-500);max-width:520px;margin:0 auto}
.bio-trow{border-left:3px solid var(--hc-teal-deep)}

/* dark mode */
body.dark .bio-banner{background:rgba(0,180,162,.1);border-color:rgba(0,180,162,.3);color:var(--hc-slate-200)}
body.dark .bio-kind{background:var(--hc-ink-700);color:var(--hc-slate-300)}
body.dark .bio-explainer .bio-kind{background:rgba(230,126,34,.22);color:#e8a86a}
body.dark .bio-opt{background:var(--hc-ink-750);border-color:var(--hc-ink-700);color:var(--hc-slate-200)}
body.dark .bio-opt:hover{border-color:var(--hc-teal)}
body.dark .bio-opt-on{background:rgba(0,180,162,.14);color:var(--hc-teal-light);border-color:var(--hc-teal)}
body.dark .bio-table-h{color:#fff}
body.dark .bio-table-sub{color:var(--hc-slate-400)}