/* /vo2 — measured anchor surface. Shares tokens with /cycle/style.css */
:root, [data-theme="dark"] {
  --sig-0: #5fc8ff; --sig-1: #f2f6f8; --sig-2: #ffb547; --sig-3: #ff5a47;
  --vo2: var(--accent); --hr: var(--sig-3); --spd: #3a4a3c; --vt: var(--sig-2);
  --grid: #1b231c;
}
[data-theme="light"] {
  --sig-0: #1f7fc4; --sig-1: #5b6670; --sig-2: #c98a1c; --sig-3: #d1402d;
  --vo2: var(--accent); --hr: var(--sig-3); --spd: #cfd3c4; --vt: var(--sig-2);
  --grid: #e3e3d6;
}
.brand-path { font-family: var(--font-mono); color: var(--ink-3); font-size: var(--text-sm); }
.mono-sub { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
h1 sub { font-size: .55em; vertical-align: baseline; position: relative; top: .25em; }
h2 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.01em; margin-top: var(--space-1); }
h2 sub, .panel-sub sub, .vlg sub, .r-l sub { font-size: .7em; }

.vo2-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; }
.vo2-hero .hero-left { flex: 1 1 auto; min-width: 0; }
@media (min-width: 641px) { .vo2-hero .hero-left { flex: 1 1 320px; } }
.vo2-hero .hero-sub { line-height: 1.6; }
.anchor-big { flex: 0 0 auto; }
.anchor-big { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
.ab-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .18em; color: var(--ink-3); }
.ab-n { font-family: var(--font-mono); font-size: clamp(3.2rem, 2rem + 4.5vw, 5.4rem); font-weight: 700; line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.ab-unit { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-2); }
.ab-band { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.ab-band.est { color: var(--sig-2); }
@media (max-width: 640px) { .anchor-big { align-items: flex-start; text-align: left; align-self: flex-start; margin-top: var(--space-2); } }

/* drop zone */
.drop-section { padding-bottom: var(--space-8); }
.drop { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  border: 1px dashed var(--accent-dim); border-radius: 14px; padding: var(--space-4) var(--space-6); background: color-mix(in oklab, var(--accent) 4%, var(--bg-2)); cursor: pointer; transition: border-color .18s, background .18s; }
.drop.over { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--bg-2)); }
.drop-l p { font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--space-1); max-width: 56ch; }
.drop-r { display: flex; gap: var(--space-2); }
.lchip { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-3); color: var(--ink); cursor: pointer; }
.lchip:hover { border-color: var(--accent-dim); }
.drop-msg { margin-top: var(--space-3); min-height: 1.2em; }
.drop-msg.bad { color: var(--sig-3); }
.drop-msg.ok { color: var(--accent); }

/* metric cards (from /cycle) */
.cards-section { padding-bottom: var(--space-10); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 860px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }
.metric { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.m-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; color: var(--ink-3); }
.m-n { font-family: var(--font-mono); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 700; line-height: 1.05; margin-top: var(--space-1); }
.m-sub { font-size: var(--text-xs); color: var(--ink-2); }
.metric[data-k=hr] .m-n { color: var(--hr); } .metric[data-k=vt1] .m-n, .metric[data-k=vt2] .m-n { color: var(--vt); }
.flags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.flag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); background: var(--bg-2); }
.flag.warn { border-color: color-mix(in oklab, var(--sig-2) 50%, var(--line)); color: var(--sig-2); }
.flag.good { border-color: var(--accent-dim); color: var(--accent); }

/* panels */
.panel { border-top: 1px solid var(--line); padding: var(--space-8) 0 var(--space-10); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-4); }
.panel-sub { font-size: var(--text-sm); color: var(--ink-2); max-width: 52ch; }
.vlegend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-2); }
.vlg { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink-2); display: inline-flex; align-items: center; gap: .45rem; }
.vlg::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--ink-3); }
.vlg-vo2::before { background: var(--vo2); } .vlg-apple::before { background: var(--sig-0); } .vlg-est::before { background: repeating-linear-gradient(90deg, var(--ink-2) 0 3px, transparent 3px 6px); height: 2px; } .vlg-whoop::before { background: var(--sig-2); height: 2px; } .vlg-hr::before { background: var(--hr); } .vlg-spd::before { background: var(--spd); height: 8px; } .vlg-vt::before { background: var(--vt); height: 1px; border-top: 1px dashed var(--vt); }
.chart-wrap { position: relative; }
#curve { display: block; width: 100%; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.scrub-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
#scrub { flex: 1; min-width: 0; accent-color: var(--accent); }
.play, .play-len { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: .45rem .8rem; cursor: pointer; }
.play { min-width: 5.2rem; }
.play.on { border-color: var(--accent); color: var(--accent); }
.play-len { padding-right: .6rem; }
.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
@media (max-width: 640px) { .readout { grid-template-columns: repeat(3, 1fr); } }
.readout > div { display: flex; flex-direction: column; gap: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; min-width: 0; }
.r-l { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; color: var(--ink-3); }
.r-v { font-family: var(--font-mono); font-size: var(--text-base); font-weight: 700; color: var(--ink); white-space: nowrap; }

/* zones */
.zones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 720px) { .zones { grid-template-columns: 1fr; } }
.zcol { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: var(--space-4); }
.zcol h3 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--ink-3); font-weight: 500; margin-bottom: var(--space-3); }
.zcol h3 b { color: var(--ink); font-weight: 700; }
.zrow { display: grid; grid-template-columns: 6.8rem 1fr 5.5rem; align-items: center; gap: var(--space-3); padding: .45rem 0; border-top: 1px solid var(--line); }
.zrow:first-of-type { border-top: 0; }
.zn { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-2); letter-spacing: .06em; }
.zbar { height: 10px; border-radius: 5px; background: var(--bg-3); position: relative; overflow: hidden; }
.zbar i { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.zv { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; text-align: right; white-space: nowrap; }
.zone-note { font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--space-4); max-width: 70ch; }
.zone-note b { color: var(--ink); }

/* compare */
.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }
.cmp { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: var(--space-4); display: flex; flex-direction: column; gap: 4px; }
.cmp.anchor { border-color: var(--accent-dim); }
.cmp .c-src { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; color: var(--ink-3); }
.cmp .c-n { font-family: var(--font-mono); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 700; line-height: 1.05; }
.cmp .c-kind { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.cmp.anchor .c-kind { color: var(--accent); } .cmp:not(.anchor) .c-kind { color: var(--sig-2); }
.cmp .c-delta { font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--space-1); }
.cmp .c-delta b { color: var(--ink); }
.cmp.empty .c-n { color: var(--ink-3); }

/* slots */
.panel.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 860px) { .panel.two { grid-template-columns: 1fr; } }
.slot { background: var(--bg-2); border: 1px dashed var(--line); border-radius: 12px; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.slot-n { font-family: var(--font-mono); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 700; color: var(--ink-3); }
.slot-sub { font-size: var(--text-sm); color: var(--ink-2); }
.rec { font-family: var(--font-mono); font-size: .7rem; line-height: 1.5; color: var(--ink-2); background: var(--bg-3); border-radius: 8px; padding: var(--space-3); overflow: auto; max-height: 320px; margin: 0; }

#hrStats { margin-top: var(--space-4); }
#hrNotes .zone-note { margin-top: var(--space-3); }
.cmp .c-sub { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink-3); }

/* film */
.film-wrap { margin-top: var(--space-2); }
.film-v { display: block; width: 100%; height: auto; background: #1c1e1b; border: 1px solid var(--line); border-radius: 12px; }
.film-note { font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--space-3); max-width: 70ch; }
main > #film:first-child { border-top: 0; padding-top: var(--space-6); }