/* ============================================================
   The app stylesheet — Direction A · "Instrument".

   Lifted out of index.html, which was a 550 KB single document: 109 KB
   of it was this. Served from its own content-hashed URL it is downloaded
   once and then reused until the CSS itself actually changes.

   Design tokens are NOT here -- they are in tokens.css, shared with the
   landing page and the Academy, and linked before this file so anything
   here can override them.

   The system in one paragraph (design handoff, 13 Sep 2026): everything
   sits on hairlines; numbers are the loudest thing on the page and are
   always mono and tabular; colour is spent only where a value crosses a
   threshold, and never alone -- a status carries a glyph or a word. One
   filled button per screen. Cards and buttons have no radius, inputs and
   bars 2 px, dots are round. Nothing lifts on hover: hover darkens a
   hairline or steps a fill, in 150 ms. Two shadows exist, for things that
   float (menus, toast, modal); a section of the report is a rectangle on a
   page, not an object on a table.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);font-size:14px;line-height:1.5;color:var(--c-ink);background:var(--c-ground)}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.hidden{display:none!important}
/* Every numeral in the product is mono and tabular, so a '1' takes the
   width of an '8' and columns never jitter on update. */
.tc-val,.tchart .tval,.t-val,.quota b,.quota-line b,.jobchip .fchip,.fmeta .fsize,
.issue .i-val,.limit-card .bigwait,table.data td.num,table.data td.pct,
.score-num,.hscore,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- Free-tier upgrade panel (teaser paywall) ---------- */
/* The locked-section panel: accent tint, hairline, one CTA. No texture, no
   gradient -- the real layout sits blurred underneath and is the argument. */
.upsell{position:relative;border:1px solid var(--c-line);border-radius:var(--radius);
  background:var(--c-panel-blue);padding:20px 22px;margin-top:20px}
.upsell h3{font-family:var(--f-display);font-weight:600;font-size:18px;line-height:1.3;color:var(--c-ink);margin:2px 0 4px}
.upsell p{color:var(--c-ink-soft);max-width:60ch;margin-bottom:14px;font-size:13.5px}
.upsell ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin:0 0 16px}
@media(max-width:560px){.upsell ul{grid-template-columns:1fr}}
.upsell li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--c-ink)}
.upsell li svg{flex:0 0 auto;width:14px;height:14px;margin-top:3px;color:var(--st-good-fill)}
/* Marks a bullet the one-off unlock does not include. Quiet on purpose: it is
   a boundary on an offer, not a second sales pitch. */
.upsell li .only-plan{font-style:normal;font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;padding:1px 6px;margin-left:6px;border-radius:var(--radius-xs);
  border:1px solid var(--c-line);color:var(--c-ink-faint);vertical-align:1px;background:var(--c-bg)}
.upsell .cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* The one-off unlock is the filled button on a locked report; the plan
   button beside it is the outline. */
.upsell .btn-unlock{font-size:14px;padding:10px 20px}
.upsell .btn-unlock .ic{width:14px;height:14px}
.upsell .cta-row .btn-primary:not(.btn-unlock){background:transparent;color:var(--c-ink);border-color:var(--c-line-strong)}
.upsell .cta-row .btn-primary:not(.btn-unlock):hover{background:var(--c-panel)}
.upsell .price-tag{font-family:var(--f-mono);font-size:12px;color:var(--c-ink-faint)}
.upsell .price-tag b{color:var(--c-ink);font-size:13px;font-weight:500}
.lock-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);
  font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-blue-dk);background:var(--c-bg);border:1px solid var(--c-blue-dk);
  padding:2px 8px;border-radius:var(--radius-xs)}
.lock-chip .ic{width:12px;height:12px}

.profilefield{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.profilefield label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-ink-faint)}
.profilefield select,.profilefield input{font-family:var(--f-body);font-size:13.5px;
  padding:8px 10px;border:1px solid var(--c-line-strong);border-radius:var(--radius-xs);background:var(--c-bg);
  color:var(--c-ink);min-width:200px;flex:1 1 200px;min-height:36px}
.profilehint{text-align:left;margin:6px 0 0;font-size:12.5px}
#heightField input{min-width:90px;flex:0 0 90px}
#heightField .hunit{font-size:13px;color:var(--c-ink-faint)}
/* Filter chips: a chosen value keeps the ink fill -- that contrast now means
   "selected" and nothing else. */
.profilefilter{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}
.profilefilter button{font-family:var(--f-body);font-size:13px;font-weight:500;cursor:pointer;min-height:32px;
  padding:5px 12px;border-radius:var(--radius);border:1px solid var(--c-line-strong);background:var(--c-bg);color:var(--c-ink-soft)}
.profilefilter button:hover{background:var(--c-panel)}
.profilefilter button[aria-pressed="true"]{background:var(--c-brand-navy);border-color:var(--c-brand-navy);color:#fff}

/* ---------- Pricing section ---------- */
.pricing-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.pricing-head .eyebrow{display:none}
.pricing-head h2{font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.3;
  color:var(--c-ink);letter-spacing:0;margin:0}
.pricing-head p{color:var(--c-ink-soft);max-width:52ch;margin:0;font-size:13.5px;flex:1 1 320px}
.billtoggle{display:inline-flex;margin:0;padding:0;border:1px solid var(--c-line-strong);
  border-radius:var(--radius);background:var(--c-bg);overflow:hidden}
.billtoggle button{font-family:var(--f-body);font-weight:500;font-size:13px;border:0;cursor:pointer;min-height:36px;
  padding:6px 14px;border-radius:0;background:transparent;color:var(--c-ink-soft);transition:background-color .15s ease-out,color .15s ease-out}
.billtoggle button:hover{background:var(--c-panel)}
.billtoggle button[aria-pressed="true"]{background:var(--c-brand-navy);color:#fff}
.billtoggle .save{font-family:var(--f-mono);font-size:10.5px;font-weight:500;color:inherit;opacity:.8;margin-left:6px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;align-items:stretch}
@media(max-width:900px){.tiers{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}
.planserr{grid-column:1/-1;text-align:center;padding:28px 24px;border:1px solid var(--c-line);
  border-radius:var(--radius);background:var(--c-bg)}
.planserr p{margin:0 0 12px;color:var(--c-ink-soft);font-size:14px}
.tier{position:relative;display:flex;flex-direction:column;background:var(--c-bg);border:1px solid var(--c-line);
  border-radius:var(--radius);padding:20px 20px 18px}
.tier.pop{border-color:var(--c-blue);border-width:2px;padding-top:44px}
/* "Most popular" is a bar across the top of the card, in the accent, not a
   floating pill. */
.tier{overflow:hidden}
.tier .poptag{position:absolute;top:0;left:0;right:0;font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-blue-ink);background:var(--c-blue);padding:6px 20px;border-radius:var(--radius);transform:none;white-space:nowrap}
.tier-name{font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--c-ink);margin:0}
.tier-tagline{color:var(--c-ink-soft);font-size:13px;margin:8px 0 14px;min-height:38px;line-height:1.45}
.tier-price{display:flex;align-items:baseline;gap:6px;margin-bottom:2px;font-variant-numeric:tabular-nums}
.tier-price .amt{font-family:var(--f-mono);font-weight:500;font-size:40px;line-height:1;color:var(--c-ink);letter-spacing:-.03em}
.tier-price .per{font-family:var(--f-mono);font-size:12px;color:var(--c-ink-faint)}
.tier-sub{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-faint);min-height:18px;margin:6px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--c-line)}
.tier ul{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px}
.tier li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--c-ink);line-height:1.45}
.tier li svg{flex:0 0 auto;width:14px;height:14px;margin-top:3px;color:var(--st-good-fill)}
.tier li.off{color:var(--c-ink-faint)} .tier li.off svg{color:var(--c-ink-disabled)}
.tier li b{font-weight:600}
.tier .tier-cta{margin-top:auto}
.tier .btn{width:100%;justify-content:center}
/* Secondary CTA. NOT scoped to .tier — the Expert Review add-on strip uses it
   too. Outline, ink text: the one filled button on the page is the popular tier. */
.btn-outline{background:transparent;color:var(--c-ink);border:1px solid var(--c-line-strong);font-size:14px;padding:9px 20px}
.btn-outline:hover{background:var(--c-panel);border-color:var(--c-ink)}
.tier .current-badge{display:flex;justify-content:center;align-items:center;gap:7px;font-family:var(--f-mono);
  font-size:12px;font-weight:500;color:var(--c-ink-faint);border:1px solid var(--c-line);
  padding:10px;border-radius:var(--radius)}
/* Expert Review, as a card rather than a footnote. */
.tier-solo{margin-top:16px;padding:20px 22px}
.tier-solo .poptag-addon{position:static;display:inline-block;background:transparent;color:var(--c-ink-faint);
  border:1px solid var(--c-line-strong);padding:2px 8px;margin-bottom:8px}
.solo-head{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap}
.solo-head>div:first-child{flex:1 1 320px}
.tier-solo .tier-tagline{min-height:0;margin:4px 0 0;max-width:56ch}
.solo-buy{flex:0 0 auto;text-align:right;min-width:200px}
.solo-buy .tier-price{justify-content:flex-end}
.solo-buy .tier-sub{min-height:0;margin-bottom:12px;border:0;padding:0}
.solo-btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.tier-solo .btn{width:auto}
.solo-list{margin:18px 0 0!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
@media(max-width:640px){
  .solo-buy{text-align:left;min-width:0}
  .solo-buy .tier-price,.solo-btns{justify-content:flex-start}
  .solo-list{grid-template-columns:1fr}
}
.addon-strip{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:16px;padding:16px 20px;
  background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius)}
.addon-strip .ao-chip{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-ink-faint);border:1px solid var(--c-line-strong);padding:2px 8px;border-radius:var(--radius-xs)}
.addon-strip .ao-name{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--c-ink)}
.addon-strip .ao-desc{color:var(--c-ink-soft);font-size:13px;max-width:44ch}
.addon-strip .ao-price{font-family:var(--f-mono);font-weight:500;font-size:22px;color:var(--c-ink);margin-left:auto}
.addon-strip .ao-price small{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-faint);font-weight:400}
.addon-strip .btn{white-space:nowrap}

/* ---- Expert Review: the report, the queue, the editor ---- */
.rr-wrap{max-width:760px;margin:0 auto}
.rr-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--c-ink-faint);font-family:var(--f-mono);
  margin:0 0 28px;padding-bottom:16px;border-bottom:1px solid var(--c-line)}
.rr-meta b{color:var(--c-ink);font-weight:500}
.rr-sec{margin:0 0 30px}
.rr-h{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-ink-faint);margin:0 0 10px}
.rr-body{font-size:14.5px;line-height:1.65;color:var(--c-ink)}
.rr-body p{margin:0 0 12px}
.rr-body p:last-child{margin-bottom:0}
.rr-prio{border:1px solid var(--c-line);border-radius:var(--radius);padding:16px 18px;margin:0 0 12px;background:var(--c-bg)}
.rr-prio-n{font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--c-ink-faint);letter-spacing:.08em}
.rr-prio-t{font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--c-ink);margin:2px 0 12px}
.rr-row{display:grid;grid-template-columns:150px 1fr;gap:6px 16px;margin:0 0 9px;font-size:14px;line-height:1.55}
.rr-row:last-child{margin-bottom:0}
.rr-row dt{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-ink-faint);padding-top:3px}
.rr-row dd{margin:0;color:var(--c-ink)}
.rr-fit{width:100%;border-collapse:collapse;font-size:13.5px}
.rr-fit th{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-ink-faint);text-align:left;padding:0 12px 8px 0;white-space:nowrap}
.rr-fit td{padding:10px 12px 10px 0;border-top:1px solid var(--c-line);vertical-align:top;color:var(--c-ink)}
.rr-fitwrap{overflow-x:auto}
@media (max-width:640px){
  .rr-row{grid-template-columns:1fr;gap:2px}
  .rr-row dt{padding-top:0}
}
/* Queue */
.ex-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--c-line);
  border-radius:var(--radius);padding:14px 16px;margin:0 0 10px;background:var(--c-bg)}
.ex-card .ex-em{font-weight:600;color:var(--c-ink)}
.ex-card .ex-sub{font-size:12.5px;color:var(--c-ink-faint)}
.ex-card .btn{margin-left:auto}
.ex-pill{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--radius-xs);border:1px solid var(--c-line-strong);color:var(--c-ink-faint);white-space:nowrap}
.ex-pill.is-todo{border-color:var(--st-warn-fill);color:var(--st-warn)}
.ex-pill.is-draft{border-color:var(--c-blue);color:var(--c-blue-dk)}
.ex-pill.is-done{border-color:var(--st-good-fill);color:var(--st-good)}
/* Editor */
.ex-grid{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
@media (max-width:900px){ .ex-grid{grid-template-columns:1fr} }
.ex-fld{margin:0 0 20px}
.ex-fld label{display:block;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-ink-faint);margin:0 0 4px}
.ex-fld .ex-hint{font-size:12.5px;color:var(--c-ink-soft);margin:0 0 8px;line-height:1.45}
.ex-fld textarea,.ex-fld input[type=text]{width:100%;font:inherit;font-size:14px;line-height:1.55;
  padding:10px 12px;border:1px solid var(--c-line-strong);border-radius:var(--radius-xs);background:var(--c-bg);color:var(--c-ink);resize:vertical}
.ex-fld textarea:focus,.ex-fld input:focus{border-color:var(--c-blue);outline:none;box-shadow:var(--ring)}
.ex-req{color:var(--st-bad)}
.ex-side{position:sticky;top:16px;border:1px solid var(--c-line);border-radius:var(--radius);
  padding:16px;background:var(--c-bg);font-size:13px}
.ex-side img{width:100%;border-radius:var(--radius);display:block;margin:0 0 12px;background:var(--c-media-bg)}
.ex-side dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0 0 14px}
.ex-side dt{color:var(--c-ink-faint)}
.ex-side dd{margin:0;font-weight:500;color:var(--c-ink)}
.ex-sub-card{border:1px solid var(--c-line);border-radius:var(--radius);padding:12px 14px;margin:0 0 10px;background:var(--c-panel)}
.ex-bar{position:sticky;bottom:0;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  padding:14px 0;margin-top:8px;background:var(--c-ground);border-top:1px solid var(--c-line)}
.ex-bar .ex-status{font-size:13px;color:var(--c-ink-faint);margin-right:auto}

/* "Your review is ready" on the dashboard. */
.rev-card{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 20px;
  padding:16px 18px;border-radius:var(--radius);border:1px solid var(--c-line);background:var(--c-bg)}
.rev-card.is-unread{border-color:var(--c-blue);background:var(--c-panel-blue)}
.rev-card .rev-t{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--c-ink)}
.rev-card .rev-s{font-size:13px;color:var(--c-ink-soft);max-width:56ch}
.rev-card .btn{margin-left:auto}
.rev-dot{width:8px;height:8px;border-radius:50%;background:var(--c-blue);flex:none}

/* Printing is how a review becomes a file the athlete can keep. */
.printhead,.printfoot{display:none}
/* The print-only stand-in for the overlay video. It has no job on screen at
   any width (it once sat above the player and scrolled the page sideways). */
#printKeyframe{display:none}
@page{margin:14mm 12mm}
@media print{
  .topbar,.sidebar,.botnav,.scrim,footer,.backhome-row,.skip,.modal{display:none !important}
  main,.wrap,body{margin:0 !important;padding:0 !important;background:#fff !important}
  .rr-wrap{max-width:none}
  .rr-sec,.rr-prio{break-inside:avoid;page-break-inside:avoid}
  .rr-h{color:#14181F !important}
  button{display:none !important}
  .upsell,.fb-host,.again-row,.quota-line,.switch,.drop,.filepreview,
  .guides,.share-row,.disclaimer-cta,.profilefield,.profilehint,
  .billtoggle,.addon-strip,.tlock,.tcard-lock,
  .screenhead,.ephem-note,.fb{display:none !important}
  .lockbar,.dform-lockrow,.lock-chip{display:none !important}
  #videoCol video,.videocap{display:none !important}
  #printKeyframe{display:block !important;max-width:320px;margin:0 auto}
  .foldblock > .fold-body{display:block !important}
  .fold-chev,.fold-peek{display:none !important}
  .foldblock > .fold-head{border-bottom:1px solid var(--c-line)}
  .kinowrap{overflow:visible !important}
  .kinowrap img,.kinowrap>*{max-width:100% !important;height:auto !important}
  #results,#photoResults{display:block !important}
  .printhead{display:block;border-bottom:2px solid #14181F;padding-bottom:8px;margin-bottom:16px}
  .printhead .ph-brand{font-family:var(--f-brand);font-weight:900;font-style:italic;
    font-size:20px;color:#14181F;letter-spacing:-.02em}
  .printhead .ph-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .printhead .ph-who{font-family:var(--f-mono);font-size:11px;color:#5B6470}
  .printhead .ph-meta{display:flex;justify-content:space-between;gap:12px;
    font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;
    text-transform:uppercase;color:#5B6470;margin-top:4px}
  .printfoot{display:block !important;margin-top:22px;padding-top:12px;
    border-top:1px solid #D9DDE3;break-inside:avoid;page-break-inside:avoid}
  .printfoot p{font-size:10.5px;line-height:1.55;color:#5B6470;margin:0 0 6px}
  .printfoot b{color:#14181F}
  .block{break-inside:avoid;page-break-inside:avoid;box-shadow:none !important;
    border:1px solid #D9DDE3 !important}
  table{break-inside:auto}
  tr,td,th{break-inside:avoid;page-break-inside:avoid}
  thead{display:table-header-group}
  details{display:block !important}
  details>*{display:revert !important}
  a[href]::after{content:""}
}
.pricing-foot{text-align:left;color:var(--c-ink-faint);font-family:var(--f-mono);font-size:11.5px;margin-top:20px;
  padding-top:14px;border-top:1px solid var(--c-line)}
.pricing-foot svg{width:13px;height:13px;vertical-align:-2px;margin-right:4px}

/* Free-tier teasers (cabinet): locked previews never show real data. */
.tcard-lock{position:relative;opacity:.92}
.tcard-lock .tc-lbl{color:var(--c-ink-soft)}
.tcard-lock .tc-sub{color:var(--c-ink-faint)}
.tlock{margin-top:12px;filter:blur(3px);opacity:.5;pointer-events:none}
.lockbar{display:inline-block;width:44px;height:11px;border-radius:var(--radius-xs);
  background:var(--c-panel);filter:blur(1px);vertical-align:middle}
.dform-lockrow th{color:var(--c-ink-faint)}

/* ---------- Accessibility primitives ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* history */
.hist-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 6px}
.hist-count{font-family:var(--f-mono);font-size:12px;color:var(--c-ink-faint)}
.hist-clear{color:var(--st-bad)}
.hist-clear:hover{background:var(--st-bad-bg);border-color:var(--st-bad-fill)}
.hist-clear .ic{width:14px;height:14px}
.hist-hint{color:var(--c-ink-soft);font-size:13px}
#histList{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.hcard{position:relative;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;background:var(--c-bg);cursor:pointer;transition:border-color .15s ease-out;text-align:left;padding:0}
.hcard:hover{border-color:var(--c-ink)}
.hcard:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
.hthumb-none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.28)}
.hthumb-none .ic{width:34px;height:34px}
.hthumb{position:relative;background:var(--c-media-bg);aspect-ratio:16/10;overflow:hidden}
.hthumb img{width:100%;height:100%;object-fit:cover;display:block}
.kf-load::after,#hdImg.kf-wait{background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);background-size:220% 100%;animation:kfshine 1.4s ease-in-out infinite}
.kf-load::after{content:"";position:absolute;inset:0}
#hdImg.kf-wait{aspect-ratio:16/10}
@keyframes kfshine{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){ .kf-load::after,#hdImg.kf-wait{animation:none} }
.kf-img{opacity:0;transition:opacity .15s ease-out}
.kf-img.kf-in{opacity:1}
.kf-slot{aspect-ratio:16/10}
/* The score on a thumbnail: a mono figure on an ink card. The JS still hands
   it a grade colour inline; on the Instrument system the figure is the
   information and the colour is not, so the card overrides it. */
.hscore{position:absolute;left:8px;top:8px;font-family:var(--f-mono);font-weight:500;font-size:15px;color:var(--c-bg);
  padding:2px 8px;border-radius:var(--radius-xs);background:rgba(14,17,22,.82)!important}
.hmeta{padding:10px 12px 12px}
.htitle{font-weight:600;font-size:13.5px;text-transform:capitalize;background:none;border:0;padding:0;
  font-family:inherit;color:inherit;cursor:pointer;text-align:left;line-height:inherit}
.htitle:focus-visible{outline:2px solid var(--c-blue);outline-offset:3px;border-radius:var(--radius-xs)}
.hsub{font-size:11.5px;color:var(--c-ink-faint);margin-top:3px;font-family:var(--f-mono)}
.hdel{position:absolute;right:4px;top:4px;width:44px;height:44px;border:none;background:none;
  color:#fff;cursor:pointer;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
.hdel .hdel-glyph{width:28px;height:28px;border-radius:50%;background:rgba(14,17,22,.6);
  display:flex;align-items:center;justify-content:center;transition:background-color .15s ease-out}
.hdel .hdel-glyph svg{width:14px;height:14px}
.hdel:hover .hdel-glyph{background:var(--st-bad-fill)}
.hdel:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:var(--radius-btn)}
/* progress / trends */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:12px}
.tcard{border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);padding:14px 16px 12px}
.tcard-score{background:var(--c-bg);grid-column:1/-1}
.tc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tc-lbl{font-weight:600;font-size:13.5px;color:var(--c-ink)}
.tc-val{font-family:var(--f-brand);font-weight:900;font-style:italic;font-size:24px;color:var(--c-ink);letter-spacing:-.01em}
.tc-sub{font-size:11.5px;color:var(--c-ink-faint);margin-top:6px;font-family:var(--f-mono);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tdelta{font-weight:500}
/* A delta is a chip, as on the landing: green when it went the right way. */
.tdelta{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 9px;border-radius:999px;border:1px solid var(--c-line);background:var(--c-bg);color:var(--c-ink-faint);white-space:nowrap}
.tdelta.imp{color:var(--c-live-good);background:var(--c-live-good-bg);border-color:var(--c-live-good-line)}
.tdelta.reg{color:var(--c-live-bad);background:var(--c-live-bad-bg);border-color:var(--c-live-bad-line)}
.tdelta.sta{color:var(--c-ink-faint)}
.tchart{width:100%;height:auto;display:block;margin-top:10px;overflow:visible}
/* ---------- Dashboard ("My technique") ---------- */
/* Order is the design's: the counters strip first (four tiles), the two sport
   cards -- the entry point, 56 px numeral -- then form, focus + plan side by
   side, recent. The markup keeps its old order; the flex order re-sorts it. */
#dashboard{display:flex;flex-direction:column}
#dashboard > .blockhead:first-child{order:0;margin:0 0 16px}
#dashCounts{order:1} #dashSummary{order:2} #dashSports{order:3} #dashForm{order:4}
#dashFocus{order:5} #dashPlan{order:6} #dashboard > .blockhead:not(:first-child){order:7} #dashRecent{order:8}
.dash-summary:not(:empty){margin:4px 0 20px}
.dash-welcome{border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);padding:22px}
.dash-welcome p{margin:0 0 14px;color:var(--c-ink)}
/* full-height centered empty state for History / Progress views */
.emptybox{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:12px;min-height:38vh;padding:44px 32px;border:1px solid var(--c-line);border-radius:var(--radius);
  background:var(--c-bg);max-width:560px;margin:0 auto;width:100%}
.emptybox .ic-lg{color:var(--c-ink-faint)}
.emptybox h4{font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--c-ink);margin:0}
.emptybox p{margin:0;max-width:44ch;color:var(--c-ink-soft);font-size:13.5px;line-height:1.55}
.emptybox .btn{margin-top:4px}
.emptybox .emptysub{font-size:12.5px;color:var(--c-ink-faint)}
.emptybox .emptysub a{color:var(--c-blue-dk);font-weight:500}
.dash-sports{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:20px}
.dsport{border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);padding:16px 18px}
.dsport-empty{background:var(--c-bg)}
.ds-head{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14px;color:var(--c-ink)}
.ds-head .ic{width:16px;height:16px;vertical-align:-3px;margin-right:6px;color:var(--c-ink-faint)}
.ds-count{font-size:11.5px;font-weight:400;color:var(--c-ink-faint);font-family:var(--f-mono)}
.ds-scorerow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
/* The numeral is the entry point of the screen. The JS colours it by grade
   inline; the number carries the meaning here, so ink it is. */
.ds-score{font-family:var(--f-brand);font-weight:900;font-style:italic;font-size:56px;line-height:1;letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;color:var(--c-ink)!important}
.ds-score small{font-family:var(--f-mono);font-size:16px;color:var(--c-ink-faint);font-style:normal;font-weight:400;margin-left:4px}
.dspark{width:160px;height:52px;flex:none}
/* was -> now, as the landing's proof tiles: the first score struck through,
   the latest in Archivo, the change as a chip. */
.ds-delta{margin-top:10px;font-size:13px;color:var(--c-ink-soft);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.d-was{font-family:var(--f-mono);font-size:14px;color:var(--c-ink-faint);text-decoration:line-through;text-decoration-color:rgba(241,85,63,.55);text-decoration-thickness:2px}
.d-arrow{color:var(--c-ink-faint);font-size:12px}
.d-now{font-family:var(--f-brand);font-weight:900;font-style:italic;font-size:22px;line-height:1;color:var(--c-ink);letter-spacing:-.01em}
.ds-actions{display:flex;gap:8px;margin-top:14px}
.dfocus{border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);padding:16px 18px;margin-bottom:20px}
.dfocus .ic{width:16px;height:16px;vertical-align:-2px;margin-right:4px}
.dfocus-body{font-size:13.5px;line-height:1.55;color:var(--c-ink);margin:6px 0 12px}
.dfocus-body p{margin:0 0 8px}
.focus-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.focus-item{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius);padding:12px 14px}
.focus-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.focus-lbl{font-weight:600;font-size:14px;color:var(--c-ink)}
.focus-top .tdelta{font-size:12px;font-family:var(--f-mono)}
.focus-sub{font-size:12.5px;color:var(--c-ink-soft);margin:4px 0 10px}
.focus-item .btn{padding:5px 12px;font-size:12px;min-height:32px}
.dash-recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.drec{display:flex;gap:10px;align-items:center;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);padding:8px;cursor:pointer;transition:border-color .15s ease-out,background-color .15s ease-out}
.drec:hover,.drec:focus-visible{border-color:var(--c-ink);outline:none}
.drec-thumb{position:relative;width:64px;height:48px;flex:none;border-radius:var(--radius-xs);overflow:hidden;background:var(--c-media-bg)}
.drec-thumb img{width:100%;height:100%;object-fit:cover}
.drec-score{position:absolute;left:4px;bottom:4px;color:#fff;font-family:var(--f-mono);font-weight:500;font-size:12px;padding:1px 6px;border-radius:var(--radius-xs);background:rgba(14,17,22,.82)!important}
.drec-title{font-weight:600;font-size:13px;color:var(--c-ink)}
.ds-pbrow{margin-top:8px}
.ds-pb{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--c-ink-faint);font-family:var(--f-mono)}
.ds-pb b{color:var(--c-ink);font-weight:500}
.ds-pb .ic{width:14px;height:14px}
.ds-pb-new{color:var(--st-good)}
/* Inside a card a heading is the card's own, not a section break. Only the
   header's Analyze is filled; the sport cards' actions are outlines. */
.dform .blockhead,.dfocus .blockhead,.dplan .blockhead,.dsport .blockhead{margin:0 0 12px}
#dashboard .dsport .btn-primary,#dashboard .dfocus .btn-primary,#dashboard .dplan .btn-primary,#dashboard .dash-welcome .btn-primary{background:var(--c-bg);color:var(--c-ink);border-color:var(--c-line-strong)}
#dashboard .dsport .btn-primary:hover,#dashboard .dfocus .btn-primary:hover,#dashboard .dplan .btn-primary:hover{background:var(--c-panel);border-color:var(--c-ink)}
/* Current-form table */
.dform{margin-bottom:20px;border:1px solid var(--c-line);background:var(--c-bg);padding:16px 18px}
.dform-sport{margin-top:16px}
.dform-sport:first-of-type{margin-top:8px}
.dform-sub{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px;color:var(--c-ink);margin:0 0 8px}
.dform-sub .ic{width:16px;height:16px;color:var(--c-ink-faint)}
.dform-when{font-weight:400;color:var(--c-ink-faint);font-size:11.5px;font-family:var(--f-mono)}
table.data td.dform-tr{font-family:var(--f-mono);font-weight:500;white-space:nowrap;text-align:right}
.dform-tr .tdelta{font-size:10.5px}
.dform-first{color:var(--c-ink-faint);font-weight:400}
.dform-segrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 14px}
.dform-seg{margin:0}
.dform-seghint{font-size:12px}
/* Counters: four tiles in one row, the number mono, the label small. */
.dash-counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:0 0 20px;
  border:1px solid var(--c-line);background:var(--c-bg)}
.dash-counts:empty{display:none}
.dash-counts .dcount{display:flex;flex-direction:column-reverse;gap:6px;padding:14px 18px;font-size:11.5px;color:var(--c-ink-faint);
  border-left:1px solid var(--c-line)}
.dash-counts .dcount:first-child{border-left:0}
.dash-counts b{font-family:var(--f-mono);font-weight:500;font-size:26px;line-height:1;color:var(--c-ink);font-feature-settings:"tnum" 1}
.dform-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 4px}
.dform-empty .hint{margin:0}
/* Phone: the three counters stay one row -- "3 days ago" is the widest value,
   so the last tile's value is set a size smaller rather than let it wrap. */
@media (max-width:560px){ .dspark{width:110px;height:auto} .ds-score{font-size:44px}
  .dash-counts{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr)}
  .dash-counts .dcount{padding:12px 10px;min-width:0}
  .dash-counts b{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash-counts .dcount:last-child b{font-size:15px;line-height:20px} }
.tchart .tval{font-family:var(--f-mono);font-size:11px;font-weight:500;fill:var(--c-ink)}
/* before / after compare */
.cmp-pickers{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 20px}
.cmp-pick{display:flex;flex-direction:column;gap:5px;flex:1;min-width:220px}
.cmp-pick-lbl{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-faint)}
.pairslot{margin-bottom:20px}
.pairmode-hide{display:none!important}
.pairgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.paircard{border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);
  padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.paircard.empty{border-style:dashed;border-color:var(--c-line-strong);background:transparent;cursor:pointer}
.paircard.drag{border-color:var(--c-blue);background:var(--c-panel-blue)}
.paircard-tag{display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:var(--c-ink-faint)}
.paircard-tag i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.paircard.filled .paircard-tag{color:var(--c-blue-dk)}
.paircard-thumb{width:100%;aspect-ratio:16/9;height:auto;object-fit:contain;
  border-radius:var(--radius-xs);background:var(--c-media-bg)}
.paircard-meta{min-width:0}
.paircard-meta .fname{font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.paircard-meta .fsize{font-family:var(--f-mono);font-size:12px;color:var(--c-ink-faint);margin-top:3px}
.paircard-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:30px 10px;color:var(--c-ink-soft)}
.paircard-empty b{font-size:14px;font-weight:600}
.paircard-empty small{font-size:12px}
.paircard .change{margin-top:auto;align-self:flex-start}
.pairhint{text-align:left;margin:12px 0 0}
@media(max-width:640px){.pairgrid{grid-template-columns:1fr}}
.bil{margin:18px 0 0;border:1px solid var(--c-line);border-radius:var(--radius);padding:16px;background:var(--c-bg)}
.bil-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.bil-h b{font-size:15px;font-weight:600}
.bil-val{font-size:26px;font-weight:500;font-family:var(--f-mono);color:var(--c-ink)}
.bil-val small{font-size:13px;font-weight:400;color:var(--c-ink-faint)}
.bil-sides{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.bil-side{flex:1 1 160px;border:1px solid var(--c-line);border-radius:var(--radius);padding:10px 12px;background:var(--c-panel)}
.bil-side span{display:block;color:var(--c-ink-faint);font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.bil-side b{font-size:18px;font-family:var(--f-mono);font-weight:500}
.bil-side-alone{display:block;color:var(--c-ink-faint);font-size:12px;margin-top:2px}
.bil-shot{width:100%;aspect-ratio:16/9;height:auto;object-fit:contain;border-radius:var(--radius-xs);
  background:var(--c-media-bg);margin-bottom:8px}
.bil-vids{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.bil-vid video{width:100%;border-radius:var(--radius-xs);background:var(--c-media-bg)}
.bil-vid-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 0}
.bil-vid-h span{font-family:var(--f-mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--c-ink-faint)}
@media(max-width:640px){.bil-vids{grid-template-columns:1fr}}
.bil-note{color:var(--c-ink-soft);font-size:13px;line-height:1.55;margin:8px 0 0}
.bil-flag{display:inline-block;padding:1px 8px;border-radius:var(--radius-xs);font-family:var(--f-mono);font-size:11px;font-weight:500;border:1px solid}
.bil-ok{background:var(--st-good-bg);color:var(--st-good);border-color:var(--st-good-fill)}.bil-warn{background:var(--st-warn-bg);color:var(--st-warn);border-color:var(--st-warn-fill)}
.cmp-select{font-family:var(--f-body);font-size:13.5px;font-weight:500;color:var(--c-ink);padding:8px 12px;border:1px solid var(--c-line-strong);border-radius:var(--radius-xs);background:var(--c-bg);cursor:pointer;min-height:36px}
.cmp-arrow{color:var(--c-ink-faint);padding-bottom:8px;transform:rotate(180deg)}
.cmp-head{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px}
.cmp-card{border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);padding:14px;text-align:center}
.cmp-tag{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-faint);margin-bottom:8px}
.cmp-thumb{width:100%;height:auto;border-radius:var(--radius-xs);display:block;background:var(--c-panel)}
.cmp-thumb-empty{aspect-ratio:16/10}
/* ---- Before/after wipe ---- */
.baslider{--pos:50%;position:relative;aspect-ratio:4/5;max-width:420px;margin:0 auto 12px;
  border-radius:var(--radius);overflow:hidden;background:var(--c-media-bg);
  border:1px solid var(--c-line);touch-action:pan-y}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;pointer-events:none;user-select:none}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;
  background:#fff;pointer-events:none;z-index:3}
.ba-grip{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);z-index:4;
  width:44px;height:44px;border-radius:50%;background:#fff;pointer-events:none;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.ba-grip svg{width:26px;height:14px;color:var(--c-ink)}
.baslider input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;z-index:5;-webkit-appearance:none;appearance:none;background:transparent}
.baslider input[type=range]:focus-visible ~ .ba-grip{box-shadow:var(--shadow),var(--ring)}
.ba-tag{position:absolute;top:10px;z-index:4;pointer-events:none;font-family:var(--f-mono);
  font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  padding:3px 8px;border-radius:var(--radius-xs);border:1px solid rgba(255,255,255,.35);background:rgba(14,17,22,.82)}
.ba-tag.b{left:10px}
.ba-tag.a{right:10px}
.ba-note{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-faint);text-align:center;margin:0 0 20px}
.cmp-when{font-size:11.5px;color:var(--c-ink-faint);margin-top:8px;font-family:var(--f-mono)}
.cmp-score{font-family:var(--f-brand);font-weight:900;font-style:italic;font-size:30px;margin-top:2px;color:var(--c-ink)!important}
.cmp-score small{font-family:var(--f-mono);font-size:13px;font-style:normal;font-weight:400;color:var(--c-ink-faint)}
.cmp-grid{border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;background:var(--c-bg)}
.cmp-row{display:grid;grid-template-columns:1.3fr 1fr 1.4fr 1fr;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--c-line)}
.cmp-row:last-child{border-bottom:none}
.cmp-row-head{background:var(--c-bg);font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-faint)}
.cmp-row-head .cmp-a,.cmp-row-head .cmp-b,.cmp-row-head .cmp-d{font-family:var(--f-mono);font-size:10.5px}
.cmp-lbl{font-weight:500;font-size:13px;color:var(--c-ink)}
.cmp-a,.cmp-b{font-family:var(--f-mono);font-weight:500;font-size:14px;color:var(--c-ink);text-align:center;font-variant-numeric:tabular-nums}
.cmp-a{color:var(--c-ink-faint)}
.cmp-d{text-align:center;font-size:12.5px;font-family:var(--f-mono)}
.cmp-trend{font-weight:500;font-size:11px}
.cmp-ai{border:1px solid var(--c-line);border-left:3px solid var(--c-blue);border-radius:var(--radius);background:var(--c-panel-blue);padding:14px 16px;margin:0 0 20px}
.cmp-ai-h{font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-faint);margin-bottom:8px}
.cmp-ai-lock,.cmp-ai-load,.cmp-ai-err{color:var(--c-ink-soft);font-size:13.5px}
.cmp-ai-load{border-left-color:var(--c-line-strong)}
.cmp-ai-err{border-left-color:var(--c-warn)}
@media(max-width:560px){
  .cmp-row{grid-template-columns:1.2fr .8fr 1.3fr .8fr;padding:10px;gap:5px}
  .cmp-lbl,.cmp-a,.cmp-b{font-size:12px}
  .cmp-trend{display:none}
  .fold-peek{display:none}
  .foldblock > .fold-head{padding:14px 16px;gap:10px}
  .fold-body{padding:16px}
  .fold-title{font-size:16px}
}
/* auth */
.authbox{display:flex;align-items:center;gap:10px;margin-left:0}
.usermail{font-size:12px;font-weight:500;color:var(--c-ink-soft);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.authbox .btn{white-space:nowrap}
.authbox-m{gap:8px}
.authbox-m .btn{padding:5px 11px;font-size:12px;min-height:36px}
.authbox-m .usermail{max-width:min(26vw,110px)}
.modal{position:fixed;inset:0;background:rgba(14,17,22,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.hidden{display:none}
.modal-card{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius);padding:24px 24px 22px;max-width:420px;width:100%;position:relative;box-shadow:var(--shadow-lg)}
.cardmodal-card{max-width:420px}
/* ---- Built-in camera ---- */
.cammodal-card{max-width:440px}
.cam-stage{position:relative;background:var(--c-media-bg);border-radius:var(--radius);overflow:hidden;margin:0 0 14px}
.cam-stage video{display:block;width:100%;max-height:56vh;object-fit:contain}
.cam-guides{position:absolute;inset:0;pointer-events:none}
.cam-guides::before,.cam-guides::after{content:"";position:absolute;left:6%;right:6%;
  border-top:2px dashed rgba(255,255,255,.55)}
.cam-guides::before{top:16.6%}
.cam-guides::after{top:83.3%}
.cam-guide-lbl{position:absolute;left:0;right:0;top:16.6%;transform:translateY(-125%);
  text-align:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cam-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-weight:500;font-size:96px;color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.55);background:rgba(3,10,24,.25)}
.cam-rec{position:absolute;top:10px;left:12px;display:flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:13px;font-weight:500;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.cam-rec .dot{width:10px;height:10px;border-radius:50%;background:var(--st-bad-fill)}
@media (prefers-reduced-motion: no-preference){
  .cam-rec .dot{animation:campulse 1.2s ease-in-out infinite}
  @keyframes campulse{50%{opacity:.35}}
}
.cam-actions{display:flex;gap:10px}
.cam-actions .btn{flex:1}
.cam-err{font-size:13px;color:var(--st-bad);line-height:1.5;margin:0 0 12px}
.cam-hint{font-size:12px;color:var(--c-ink-faint);line-height:1.5;margin:10px 0 0}
.camrow{text-align:left;margin:8px 0 0}
.camrow .btn{min-height:36px}
.cardprev-wrap{display:flex;justify-content:center;background:var(--c-media-bg);border-radius:var(--radius);padding:10px}
#cardPreview{display:block;max-width:100%;max-height:56vh;width:auto;height:auto;border-radius:var(--radius-xs)}
.cardmodal-actions{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.modal-close{position:absolute;right:8px;top:8px;width:40px;height:40px;border:none;background:none;
  color:var(--c-ink-faint);cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-btn)}
.modal-close svg{width:18px;height:18px}
.modal-close:hover{background:var(--c-panel);color:var(--c-ink)}
.fld{display:block;margin-bottom:14px}
.fld span{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--c-ink-faint);margin-bottom:6px}
.fld input{width:100%;padding:10px 12px;border:1px solid var(--c-line-strong);border-radius:var(--radius-xs);font-size:14px;font-family:var(--f-body);background:var(--c-bg);color:var(--c-ink);min-height:40px}
.fld input:focus{border-color:var(--c-blue)}
.modal-title{font-family:var(--f-display);font-weight:600;text-transform:none;color:var(--c-ink);font-size:20px;line-height:1.3;margin:4px 0 4px}
.autherr{color:var(--st-bad);font-size:13px;font-weight:500;min-height:18px;margin-bottom:10px}
.autherr:empty{margin-bottom:0}
.pwwrap{position:relative}
.pwwrap input{padding-right:64px}
.pwtoggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  color:var(--c-blue-dk);font-family:var(--f-body);font-size:13px;font-weight:500;padding:6px 8px;cursor:pointer;border-radius:var(--radius-xs)}
.pwtoggle:hover{background:var(--c-panel)}
.fldhint{display:block;font-size:12.5px;line-height:1.4;color:var(--c-ink-soft);margin-top:6px}
.authnote{text-align:left;margin:12px 0 0;font-size:13px}
.authnote:empty{display:none}
.authnote a{color:var(--c-blue-dk);font-weight:500;text-decoration:none}
.authnote a:hover{text-decoration:underline;text-underline-offset:3px}
.authsent{background:var(--c-panel-blue);color:var(--c-ink);border-radius:var(--radius);padding:12px 14px;
  font-size:13.5px;line-height:1.5;margin-bottom:12px;border-left:3px solid var(--c-blue)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--c-ink);color:var(--c-bg);
  padding:8px 16px;border-radius:var(--radius);font-weight:500;font-size:14px;text-decoration:none}
.skip-link:focus{left:0}
:is(a,button,select,input,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--c-blue);outline-offset:2px;border-radius:var(--radius-xs)}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.btn:focus-visible,.seg button:focus-visible,select:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
.seg button:focus-visible{outline-offset:-2px;z-index:1}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Icons ---------- */
.ic{width:16px;height:16px;flex:none}
.ic-lg{width:40px;height:40px}

/* ---------- Shared brand elements ---------- */
/* Speedlines were the old brand's skewed gradient bar under every heading.
   The Instrument system draws structure with hairlines, so they are gone;
   the elements stay in the markup for the sections that anchor to them. */
.speedline,.speedline-sm{display:none}
/* Eyebrow = h3 in the type scale: mono, 11 px, caps, +8% tracking, muted. */
/* The eyebrow carries the landing's coral dot: the one small brand mark on
   every section of every screen. */
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--c-ink-faint);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-coral);flex:none}

/* Status pill: a word beside a glyph, on its own tint, with a hairline in
   the status line. The dot is the glyph the markup already carries. */
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.02em;text-transform:none;color:var(--c-ink);padding:2px 10px;border-radius:999px;white-space:nowrap;border:1px solid var(--c-line-strong);background:var(--c-bg)}
.pill .dot{width:7px;height:7px;border-radius:50%;flex:none}
.pill-high{background:var(--st-bad-bg);color:var(--st-bad);border-color:var(--st-bad-fill)}.pill-high .dot{background:var(--st-bad-fill)}
.pill-medium{background:var(--st-warn-bg);color:var(--st-warn);border-color:var(--st-warn-fill)}.pill-medium .dot{background:var(--st-warn-fill)}
.pill-low{background:var(--c-panel);color:var(--c-ink-soft)}.pill-low .dot{background:var(--c-ink-faint)}
.pill-info{background:var(--c-panel-blue);color:var(--c-blue-dk);border-color:var(--c-blue-dk)}.pill-info .dot{background:var(--c-blue)}
.pill-good{background:var(--c-live-good-bg);color:var(--c-live-good);border-color:var(--c-live-good-line)}.pill-good .dot{background:var(--c-live-good-fill)}
.pill-warnchip{background:var(--st-warn-bg);color:var(--st-warn);border-color:var(--st-warn-fill)}.pill-warnchip .dot{background:var(--st-warn-fill)}
.pill-okchip{background:var(--c-live-good-bg);color:var(--c-live-good);border-color:var(--c-live-good-line)}.pill-okchip .dot{background:var(--c-live-good-fill)}

/* Confidence badge */
.confwrap{margin-top:12px}
.confbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.02em;color:var(--c-ink);padding:2px 10px;border-radius:999px;
  border:1px solid var(--c-line-strong);background:var(--c-bg);cursor:pointer;line-height:1.5}
.confbtn .dot{width:7px;height:7px;border-radius:50%;flex:none}
.confbtn .caret{font-size:9px;opacity:.6;transition:transform .15s}
.confbtn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.confbtn.c-high{background:var(--c-live-good-bg);color:var(--c-live-good);border-color:var(--c-live-good-line)}.confbtn.c-high .dot{background:var(--c-live-good-fill)}
.confbtn.c-medium{background:var(--st-warn-bg);color:var(--st-warn);border-color:var(--st-warn-fill)}.confbtn.c-medium .dot{background:var(--st-warn-fill)}
.confbtn.c-low{background:var(--st-bad-bg);color:var(--st-bad);border-color:var(--st-bad-fill)}.confbtn.c-low .dot{background:var(--st-bad-fill)}
.confexp{margin-top:10px;font-size:13px;line-height:1.55;color:var(--c-ink-soft);
  background:var(--c-panel);border-radius:var(--radius);padding:12px 14px;max-width:420px}
.confexp.hidden{display:none}
.conffactors{margin-top:8px;font-size:11px;color:var(--c-ink-faint);font-family:var(--f-mono)}

/* Sport tag: a squared chip so "which sport" never reads as a severity. */
.sporttag{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.02em;color:var(--c-ink-soft);padding:2px 8px;border-radius:var(--radius-xs);background:var(--c-bg);border:1px solid var(--c-line-strong)}
.sporttag .ic{width:14px;height:14px;flex:none;color:var(--c-ink-faint)}
.sporttag-run .ic,.sporttag-bike .ic{color:var(--c-ink-faint)}

/* ---------- Layout shell: fixed left sidebar + content column ----------
   --sidebar-w lives in tokens.css: the Academy renders the same shell. */
/* The wordmark: Archivo, heavy italic, lowercase, letters in ink; a round
   coral dot after it -- the one coral in the product. Never tracked caps. */
.wordmark{font-family:var(--f-brand);font-weight:900;font-style:italic;font-size:22px;line-height:1;
  text-transform:none;letter-spacing:-.02em;color:var(--c-ink);display:flex;align-items:flex-end;gap:3px;cursor:pointer;text-decoration:none}
.wordmark .dot{width:6px;height:6px;border-radius:50%;background:var(--c-coral);transform:translateY(-10px)}

.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);z-index:40;
  background:var(--c-bg);border-right:1px solid var(--c-line);display:flex;flex-direction:column;
  padding:0 8px 12px;gap:0}
.sidebar > .wordmark{height:56px;padding:0 10px;font-size:22px;border-bottom:1px solid var(--c-line);margin:0 -8px 8px;padding-left:18px;align-items:center}
.sidebar > .wordmark .dot{transform:translateY(-6px)}
.sidenav{display:flex;flex-direction:column;gap:1px;margin-top:4px;flex:1}
/* Where I am, not what I chose: the current item is a tint plus a 2 px accent
   bar and an accent glyph -- never a filled block. Hover steps to sunken. */
.navlink{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius);
  color:var(--c-ink-soft);text-decoration:none;font-size:13.5px;font-weight:500;transition:background-color .15s ease-out,color .15s ease-out;min-height:36px}
.navlink .ic{width:16px;height:16px;flex:none;color:var(--c-ink-faint)}
.navlink:hover{background:var(--c-panel);color:var(--c-ink)}
.navlink:focus-visible{outline:2px solid var(--c-blue);outline-offset:-2px}
.navlink[aria-current="page"]{background:var(--c-panel-blue);color:var(--c-ink)}
.navlink[aria-current="page"] .ic{color:var(--c-blue)}
.navlink[aria-current="page"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--c-blue)}
.navlink-ext{color:var(--c-ink-soft);font-weight:500;font-size:13px}
/* The Analyze entry used to be the nav's one filled control. On this system a
   filled block in the nav means nothing: the filled button is on the page. */
.navlink-cta{background:transparent;color:var(--c-ink-soft);margin-bottom:0}
.navlink-cta:hover{background:var(--c-panel);color:var(--c-ink)}
.navlink-cta[aria-current="page"]{background:var(--c-panel-blue);color:var(--c-ink)}
.navsep{height:1px;background:var(--c-line);margin:8px 2px}
/* The bottom group: quiet links, then the account line. */
.sidenav .navgroup-bottom{margin-top:auto;padding-top:8px;border-top:1px solid var(--c-line);display:flex;flex-direction:column;gap:1px}
.sidebar > .authbox{margin-top:0;padding:12px 10px 4px;border-top:1px solid var(--c-line);display:block}
/* The plan line under the nav: plan name, what is left, a 3 px bar. */
.planline{display:block;text-decoration:none;color:inherit}
.planline .pl-name{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-faint);display:flex;justify-content:space-between;gap:8px}
.planline .pl-quota{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-soft);margin-top:3px}
.planline .pl-quota b{font-weight:500;color:var(--c-ink)}
.planline .pl-bar{height:3px;background:var(--c-line);margin-top:8px;position:relative;overflow:hidden}
.planline .pl-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--c-blue);width:var(--used,0%)}
.planline:hover .pl-name{color:var(--c-ink)}
.authbox .btn-login{width:100%;justify-content:center}

/* content column offset by the sidebar */
.appshell{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.appshell > main{flex:1}

/* mobile top bar (hidden on desktop) + off-canvas scrim */
.topbar{display:none;position:sticky;top:0;z-index:30;background:var(--c-bg);border-bottom:1px solid var(--c-line);
  align-items:center;gap:12px;height:52px;padding:0 12px 0 16px}
.topbar-toggle{width:40px;height:40px;border:0;border-radius:var(--radius);
  background:transparent;color:var(--c-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;order:3}
.topbar-toggle:hover{background:var(--c-panel)}
.topbar-toggle .ic{width:20px;height:20px}
.topbar .wordmark{font-size:20px;order:1}
.topbar .quota-top{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--c-ink-faint);order:2;white-space:nowrap}
.topbar .authbox-m{margin-left:0;order:2}
.scrim{position:fixed;inset:0;background:rgba(14,17,22,.44);z-index:35;border:0}

/* mobile bottom tab bar (hidden on desktop): active = accent glyph + ink label, no block */
.botnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:36;background:var(--c-bg);
  border-top:1px solid var(--c-line);padding-bottom:env(safe-area-inset-bottom,0)}
.botnav{grid-auto-flow:column;grid-auto-columns:1fr}
.botlink{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:8px 4px 7px;min-height:56px;text-decoration:none;color:var(--c-ink-faint);font-size:10.5px;font-weight:500;
  letter-spacing:.01em;transition:color .15s ease-out}
.botlink .ic{width:22px;height:22px}
.botlink:active{background:var(--c-panel)}
.botlink[aria-current="page"]{color:var(--c-ink)}
.botlink[aria-current="page"] .ic{color:var(--c-blue)}
.botlink:focus-visible{outline:2px solid var(--c-blue);outline-offset:-2px;border-radius:var(--radius-btn)}
.backhome-row{display:none;margin:0 0 16px}

/* ---------- The band across the top ----------
   Brand navy to the accent, left to right. Signed out on the upload screen it
   carries the one-line pitch; everywhere else it thins to the eyebrow. On a
   phone it goes: 120 px of strapline is 120 px the upload button loses. */
.hero{color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 420px at 88% -40%, rgba(47,109,224,.55), transparent 60%),
    radial-gradient(520px 320px at -6% 140%, rgba(241,85,63,.28), transparent 60%),
    linear-gradient(135deg,var(--c-brand-navy) 0%,var(--c-brand-mid) 60%,var(--c-blue) 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(700px 300px at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(700px 300px at 50% 50%,#000 30%,transparent 80%)}
.hero::after{content:"";position:absolute;right:-40px;top:0;bottom:0;width:320px;
  background:
    linear-gradient(115deg,transparent 44%,rgba(255,255,255,.10) 44%,rgba(255,255,255,.10) 48%,transparent 48%),
    linear-gradient(115deg,transparent 56%,rgba(255,255,255,.06) 56%,rgba(255,255,255,.06) 60%,transparent 60%)}
.hero .wrap{position:relative;z-index:1;padding:14px 24px 16px}
.hero .eyebrow{color:rgba(255,255,255,.72)}
.hero h1{font-family:var(--f-brand);font-weight:900;font-style:italic;font-size:26px;line-height:1.1;letter-spacing:-.01em;margin:4px 0 0;color:#fff}
.hero h1 .accent{color:var(--c-coral)}
.hero-line{margin:4px 0 0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.82);max-width:72ch}
body:not([data-state="upload"]) .hero .wrap,
body.authed .hero .wrap{padding:12px 24px}
body:not([data-state="upload"]) .hero h1,
body.authed .hero h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body:not([data-state="upload"]) .hero-line,
body.authed .hero-line{display:none}
@media(max-width:560px){
  .hero{background:none}
  .hero::after,.hero::before{display:none}
  .hero .wrap{padding:0}
  .hero .eyebrow,.hero-line{display:none}
  .hero h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ---------- Main / cards / section headers ---------- */
main{padding:24px 0 64px}
/* The page header: title left, its one-line lede beside it, the quota or the
   one action on the right. Mirrors the artboards' 56 px band. */
.pagehead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 20px;padding:0 0 14px;border-bottom:1px solid var(--c-line)}
.pagehead h2,.pagehead .ph-title{font-family:var(--f-display);font-weight:600;font-size:16px;line-height:1.3;color:var(--c-ink);margin:0;text-transform:none;letter-spacing:0}
.pagehead .ph-lede{font-size:13px;color:var(--c-ink-faint);flex:1 1 200px}
.pagehead .ph-right{margin-left:auto;font-family:var(--f-mono);font-size:11.5px;color:var(--c-ink-faint);display:flex;align-items:center;gap:12px}
.card{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius)}
.cardhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
/* Section headings speak in the landing's voice: Archivo italic, like the
   band headline and the score. The eyebrow above stays mono. */
h2.sec{font-family:var(--f-brand);font-weight:900;font-style:italic;color:var(--c-ink);text-transform:none;
  font-size:22px;line-height:1.25;letter-spacing:-.01em;margin:4px 0 8px}
.blockhead{margin:32px 0 12px}
.blockhead .eyebrow{display:inline-flex;align-items:center;gap:8px}
.blockhead .eyebrow .ic{width:13px;height:13px}
.blockhead h3{font-family:var(--f-brand);font-weight:900;font-style:italic;text-transform:none;
  font-size:22px;line-height:1.25;color:var(--c-ink);letter-spacing:-.01em;margin:2px 0 0}
/* The section masthead of a report reads as one line: "Report · Your results". */
.screenhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--c-line)}
.screenhead h2{margin:0;font-size:16px}
.screenhead .eyebrow{display:inline-flex}

/* ---------- Report rail (sticky table of contents) ----------
   Desktop: a left column beside the report -- the score at the top, one row
   per section that exists, the confidence lines under it. Phone: a chip strip
   pinned under the top bar; the whole report stays on one page and a chip
   scrolls to its section. */
.rrail{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  background:var(--c-bg);border-bottom:1px solid var(--c-line);margin:0 0 4px;padding:8px 0}
.rrail-score{font-family:var(--f-brand);font-weight:900;font-style:italic;font-size:22px;
  color:var(--c-ink);flex:none;line-height:1;display:flex;align-items:baseline;gap:5px;letter-spacing:-.02em}
.rrail-score small{font-family:var(--f-mono);font-size:11px;font-weight:400;font-style:normal;color:var(--c-ink-faint)}
.rrail-score .rrail-grade{font-size:12px;font-family:var(--f-mono);font-weight:500;color:var(--c-ink-faint);
  border:0;padding:0;line-height:1}
.rrail-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rrail-nav::-webkit-scrollbar{display:none}
.rrail-nav button{font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--c-ink-soft);
  background:none;border:0;border-radius:var(--radius);padding:6px 10px;cursor:pointer;white-space:nowrap;min-height:34px;text-align:left}
.rrail-nav button:hover{background:var(--c-panel);color:var(--c-ink)}
.rrail-nav button.is-here{background:var(--c-panel-blue);color:var(--c-ink);border-left:2px solid var(--c-blue);padding-left:12px}
.rrail-nav button:focus-visible{outline:2px solid var(--c-blue);outline-offset:-2px}
#results .block,#results .rrail-target{scroll-margin-top:68px}
@media(max-width:900px){ .rrail{top:52px} #results .block{scroll-margin-top:110px} }
@media(min-width:901px){
  /* The report as two columns: a 200 px rail that sticks, and the report. */
  #results{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:24px;align-items:start}
  #results > *{grid-column:2}
  #results > .rrail{grid-column:1;grid-row:1/span 60;position:sticky;top:16px;align-self:start;
    display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;margin:0;
    border:1px solid var(--c-line);background:var(--c-bg)}
  #results > .rrail.hidden{display:none}
  .rrail-score{padding:14px 14px 12px;border-bottom:1px solid var(--c-line);font-size:26px}
  .rrail-nav{flex-direction:column;overflow:visible;padding:6px 0}
  .rrail-nav button{padding:7px 14px;border-radius:var(--radius);min-height:32px}
  .rrail-nav button.is-here{border-left:2px solid var(--c-blue);padding-left:12px}
  .rrail-meta{padding:10px 14px 12px;border-top:1px solid var(--c-line);font-family:var(--f-mono);font-size:10.5px;line-height:1.6;color:var(--c-ink-faint)}
}
@media(max-width:560px){
  .rrail{gap:10px;padding:6px 0}
  .rrail-score{font-size:18px}
  .rrail-nav button{font-size:12.5px;padding:6px 9px}
}
@media print{ .rrail{display:none !important} }
.rrail-meta{display:none}
@media(min-width:901px){ .rrail-meta:not(:empty){display:block} }

/* A section of the report is a rectangle on a page, not an object on a
   table: hairline and fill, no shadow. */
.block{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius);
  padding:20px;margin-top:16px}
.foldblock{padding:0;overflow:hidden}
.foldblock > .fold-head{display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;list-style:none}
.foldblock > .fold-head::-webkit-details-marker{display:none}
.foldblock > .fold-head:focus-visible{outline:2px solid var(--c-blue);outline-offset:-3px}
.foldblock[open] > .fold-head{border-bottom:1px solid var(--c-line)}
.fold-h{display:flex;flex-direction:column;gap:2px;min-width:0}
.fold-title{font-family:var(--f-display);font-weight:600;text-transform:none;font-size:16px;color:var(--c-ink);letter-spacing:0}
.fold-peek{margin-left:auto;font-family:var(--f-mono);font-size:11.5px;color:var(--c-ink-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fold-chev{width:16px;height:16px;flex:none;color:var(--c-ink-faint);transition:transform .15s ease}
.foldblock[open] .fold-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .fold-chev{transition:none} }
.fold-body{padding:18px 20px 20px}
.bm-verdict{font-size:13.5px;color:var(--c-ink-soft);background:var(--c-panel-quiet);
  border-left:3px solid var(--c-line-strong);border-radius:var(--radius);padding:12px 16px;margin:0 0 18px}
.bm-verdict b{color:var(--c-ink)}
.block > .blockhead{margin:0 0 14px}
.block > .blockhead .speedline-sm{margin-bottom:0}
/* The coach block is the one section that carries a tint: it is prose, not
   a measurement, and the tint says so. */
.block.block-coach{background:var(--c-bg);border-color:var(--c-line)}
.block.block-coach .coach{background:transparent;padding:0}

/* ---------- Buttons ----------
   primary = the one filled control on a screen; secondary = outline; tertiary
   = text; destructive = outline in the bad line. md 40 px, 44 on touch. */
.btn{font-family:var(--f-body);font-weight:500;letter-spacing:0;border-radius:var(--radius-btn);
  cursor:pointer;border:1px solid transparent;transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out;
  min-height:44px;font-size:14px;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
@media(pointer:fine){ .btn{min-height:40px} }
.btn svg{transition:transform .15s ease}
.btn-primary{background:var(--c-action);color:var(--c-action-ink);padding:9px 20px}
.btn-primary:hover{background:var(--c-action-dk);color:var(--c-action-ink)}
.btn-primary:active{background:var(--c-action-dk)}
.btn-danger{background:transparent;color:var(--st-bad);border-color:var(--st-bad-fill);padding:9px 20px}
.btn-danger:hover{background:var(--st-bad-bg)}
.confirm-actions{display:flex;gap:12px;justify-content:flex-end}
.confirm-actions .btn{padding:9px 18px}
/* "Go" was the coral action. It is the primary now: one filled button. */
.btn-go{background:var(--c-action);color:var(--c-action-ink);font-size:15px;padding:12px 28px}
.btn-go:hover{background:var(--c-action-dk);color:var(--c-action-ink)}
.btn-go:active{background:var(--c-action-dk)}
.btn-ghost{background:var(--c-bg);color:var(--c-ink);border-color:var(--c-line-strong);padding:9px 18px}
.btn-ghost:hover{background:var(--c-panel);border-color:var(--c-ink)}
/* Pressed = 1px down while held. Hover never moves anything. */
.btn:active:not(:disabled):not([aria-disabled="true"]){transform:translateY(1px)}
.btn-sm{padding:5px 12px;font-size:13px;min-height:32px}
@media(pointer:coarse){ .btn-sm{min-height:40px} }
.btn:active{transform:translateY(0)}
.btn[aria-disabled="true"],.btn:disabled{background:var(--c-panel);color:var(--c-ink-disabled);border-color:transparent;
  cursor:not-allowed;box-shadow:none;transform:none}
.btn[aria-disabled="true"]:hover svg,.btn:disabled:hover svg{transform:none}
/* Tertiary: a text link that behaves like a button. */
.btn-link{background:none;border:0;color:var(--c-blue-dk);padding:4px 2px;min-height:0;font-weight:500}
.btn-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Uploader ----------
   A numbered walk. Each step is a white block on the page ground with a
   navy number, a title and one line under it; the counter is CSS, so a
   hidden step (Position, for a run) leaves no gap in the numbering. */
#uploader{max-width:900px;margin:0;display:block;counter-reset:ustep}
.uploader{padding:0;margin-top:0;position:relative;z-index:5;width:100%;background:transparent;border:0}
.uphead{font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--c-ink);margin:0}
.uploader .pagehead{margin-bottom:16px}
.ustep{background:var(--c-bg);border:1px solid var(--c-line);padding:18px 20px 20px;margin:0 0 12px}
.ustep-head{display:flex;align-items:flex-start;gap:14px;margin:0 0 14px}
/* The step numeral is the landing's "How it works" numeral: Archivo italic,
   no fill, a blue outline. */
.ustep-n{flex:none;min-width:56px;font-family:var(--f-brand);font-weight:900;font-style:italic;font-size:40px;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--c-blue);letter-spacing:-.02em;display:flex;align-items:flex-start;margin-top:-2px}
.ustep-n::before{counter-increment:ustep;content:counter(ustep,decimal-leading-zero)}
.ustep-head h3{font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.3;color:var(--c-ink);margin:4px 0 2px;text-transform:none;letter-spacing:0}
.ustep-head p{font-size:13px;color:var(--c-ink-faint);margin:0;line-height:1.45}
/* Inside a step the rows sit on hairlines; the last one has no rule under it. */
.ustep .askbox:last-child,.ustep .switch:last-child,.ustep .overlay-locked:last-child{border-bottom:0}
/* The clip: the drop zone and the camera tile side by side. */
.cliprow{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:12px;align-items:stretch}
/* No camera (a photo, or a browser that cannot record): the drop zone takes the row. */
.cliprow:has(.camrow.hidden){grid-template-columns:1fr}
.cliprow .drop{margin:0}
.camrow{margin:0;display:flex}
.camrow.hidden{display:none}
.camtile{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  padding:22px 16px;background:var(--c-panel-blue);border:1px solid var(--c-blue);color:var(--c-ink);cursor:pointer;
  font-family:var(--f-body);transition:background-color .15s ease-out,border-color .15s ease-out;min-height:44px}
.camtile .ic-lg{width:30px;height:30px;color:var(--c-blue);margin-bottom:4px}
.camtile b{font-size:14.5px;font-weight:600;color:var(--c-brand-navy)}
.camtile small{font-size:12px;color:var(--c-ink-soft);line-height:1.4}
.camtile:hover{background:#DCE6FB;border-color:var(--c-brand-navy)}
.camtile:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
@media(max-width:640px){ .cliprow{grid-template-columns:1fr} .camtile{padding:14px 16px;flex-direction:row;text-align:left;gap:12px} .camtile .ic-lg{margin:0;width:24px;height:24px} .camtile b{display:block} }
/* Position family, then the exact position. */
.poscat{margin:0 0 12px}
#positionSeg .posgroup{display:none}
#positionSeg[data-cat="road"] .posgroup[data-cat="road"],
#positionSeg[data-cat="aero"] .posgroup[data-cat="aero"],
#positionSeg[data-cat="upright"] .posgroup[data-cat="upright"]{display:flex}
#positionSeg .posgroup-lbl{display:none}

/* Mode tiles (video / photo): two big tiles in step one. */
.modetabs{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;background:var(--c-bg);border:1px solid var(--c-line-strong);position:relative;z-index:6;max-width:640px;overflow:hidden}
.modetabs button{font-family:var(--f-body);font-weight:500;font-size:14px;color:var(--c-ink-soft);text-align:left;
  background:transparent;border:none;border-left:1px solid var(--c-line);border-radius:0;padding:14px 16px;min-height:44px;cursor:pointer;display:flex;align-items:center;gap:12px;
  transition:background-color .15s,color .15s}
.modetabs button:first-child{border-left:0}
.modetabs button .ic{width:20px;height:20px;color:var(--c-ink-faint);flex:none}
.modetabs button span{display:flex;flex-direction:column;gap:2px;min-width:0}
.modetabs button b{font-weight:600;color:var(--c-ink);font-size:14.5px}
.modetabs button small{font-size:12px;color:var(--c-ink-faint);line-height:1.35}
.modetabs button:hover{background:var(--c-panel);color:var(--c-ink)}
.modetabs button[aria-selected="true"]{background:var(--c-brand-navy);color:#fff}
.modetabs button[aria-selected="true"] .ic,.modetabs button[aria-selected="true"] b{color:#fff}
.modetabs button[aria-selected="true"] small{color:rgba(255,255,255,.75)}
.modetabs button:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}

/* Segmented control: a chosen value keeps the ink fill -- that contrast now
   means "selected" and nothing else. */
.seg{display:inline-flex;gap:0;padding:0;background:var(--c-bg);border:1px solid var(--c-line-strong);border-radius:var(--radius);overflow:hidden}
.seg button{font-family:var(--f-body);font-weight:500;font-size:13.5px;color:var(--c-ink-soft);
  background:transparent;border:none;border-left:1px solid var(--c-line);border-radius:0;padding:7px 16px;cursor:pointer;min-height:36px;
  display:inline-flex;align-items:center;gap:8px;transition:background-color .15s,color .15s}
.seg button:first-child{border-left:0}
.seg button .ic{width:15px;height:15px}
.seg button:hover{background:var(--c-panel);color:var(--c-ink)}
.seg button[aria-pressed="true"]{background:var(--c-brand-navy);color:#fff}

/* control rows (label left, control right, on a hairline) */
.ctl{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--c-line)}
.ctl-label{display:block;font-size:13px;font-weight:400;color:var(--c-ink-soft);margin:0}
/* The sport picker is the first row and the first control: a segment, not a
   row of tiles. It has no label of its own on the artboards. */
.ctl.ctl-sport{grid-template-columns:1fr;border-bottom:0;padding:0}
.ctl.ctl-sport .ctl-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tilerow{display:inline-flex;gap:0;border:1px solid var(--c-line-strong);background:var(--c-bg);overflow:hidden}
.ctl-sport .tilerow{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:640px}
#positionSeg{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.posgroup{display:flex;flex-direction:row;align-items:center;gap:8px;flex:0 1 auto;min-width:0}
.posgroup-lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--c-ink-faint);flex:none}
.posgroup .tilerow{gap:0}
.posgroup .tile-btn{padding:7px 12px;font-size:13px;min-height:36px}
.poshint{font-size:12px;color:var(--c-ink-faint);line-height:1.5;margin-top:6px;min-height:0;grid-column:2}
.poshint:empty{display:none}
.poshint b{color:var(--c-ink);font-weight:500}
@media (max-width:560px){
  .ctl{grid-template-columns:1fr;gap:6px}
  .poshint{grid-column:1}
  #positionSeg{gap:8px 14px}
  .posgroup .tile-btn{padding:8px 10px;font-size:13px}
  .tile-btn{padding:8px 10px;font-size:13px}
}
.tile-btn{font-family:var(--f-body);font-weight:500;font-size:13.5px;color:var(--c-ink-soft);cursor:pointer;
  background:transparent;border:0;border-left:1px solid var(--c-line);border-radius:0;padding:8px 14px;text-align:center;min-height:36px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background-color .15s,border-color .15s,color .15s}
.tile-btn:first-child{border-left:0}
.tile-btn .ic{flex:none;color:var(--c-ink-faint)}
.tile-btn[aria-pressed="true"] .ic{color:inherit}
.tile-btn:hover{background:var(--c-panel);color:var(--c-ink)}
.tile-btn:active{background:var(--c-panel)}
.tile-btn[aria-pressed="true"]{background:var(--c-brand-navy);color:#fff;font-weight:500}
.tile-btn:focus-visible{outline:2px solid var(--c-blue);outline-offset:-2px}
.ctl-sport .tile-btn{min-height:44px;font-size:14px}

/* drop zone: the one white rectangle on the page */
.drop{display:block;border:1px dashed var(--c-line-strong);border-radius:var(--radius);padding:36px 24px;
  text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s;background:var(--c-bg);margin:0 0 4px}
.drop:hover,.drop.drag,#file:focus-visible + .drop{border-color:var(--c-blue);background:var(--c-panel-blue)}
#file:focus-visible + .drop{box-shadow:var(--ring)}
.drop.err{border-color:var(--st-bad-fill)}
.drop .ic-lg{margin:0 auto 12px;color:var(--c-ink-faint);display:block;width:32px;height:32px}
.drop b{color:var(--c-ink);font-weight:600;font-size:15px}
.drop small{display:block;color:var(--c-ink-faint);font-size:12.5px;margin-top:6px}

.filepreview{display:none;background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius);padding:12px;gap:20px;align-items:center;margin:0 0 4px}
.filepreview.show{display:flex}
.filepreview video{width:200px;aspect-ratio:16/9;height:auto;object-fit:contain;border-radius:var(--radius);background:var(--c-media-bg);flex:none}
.filepreview img#previewImg{width:150px;aspect-ratio:3/4;height:auto;object-fit:cover;border-radius:var(--radius);background:var(--c-media-bg);flex:none}
.fmeta{min-width:0}
.fmeta .fname{font-weight:600;overflow-wrap:anywhere;font-size:14px}
.fmeta .fsize{font-family:var(--f-mono);font-size:12px;color:var(--c-ink-faint);margin-top:4px}
.fmeta .change{margin-top:12px}

/* capture guidelines (the folded list) */
.guides{list-style:none;display:grid;grid-template-columns:1fr;gap:8px;margin:0}
.guides li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--c-ink-soft);line-height:1.5;padding:0 2px}
.guides li .ic{width:14px;height:14px;color:var(--c-ink-faint);flex:none;margin-top:3px}
.guides li b{color:var(--c-ink);font-weight:500}

/* ---- Capture guide ----
   "How to film it": three panels in one row, the figure above its rule,
   the folded list of six under them. The figures are the four approved
   assets, used verbatim. */
.capguide{border:1px solid var(--c-line);border-radius:var(--radius);padding:18px 20px 20px;margin:20px 0 0;background:var(--c-bg)}
.capguide .eyebrow{display:flex;align-items:center;gap:12px}
.cg-lede{font-size:13.5px;color:var(--c-ink-soft);line-height:1.5;margin:8px 0 0;max-width:64ch}
.cg-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:16px 0 0;padding:0;list-style:none;counter-reset:cg;
  border:1px solid var(--c-line)}
.cg-step{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 16px 16px;border-left:1px solid var(--c-line);position:relative}
.cg-step:first-child{border-left:0}
.cg-step::before{counter-increment:cg;content:counter(cg);position:absolute;left:12px;top:12px;font-family:var(--f-mono);font-size:12px;color:var(--c-ink-faint)}
.cg-fig{width:120px;height:120px;aspect-ratio:1;display:block;margin:0}
.cg-step p{position:relative;padding-left:0;margin:0;font-size:13px;line-height:1.5;color:var(--c-ink-soft)}
.cg-step p b{color:var(--c-ink);font-weight:600}
.cg-step p b:first-child{display:block;margin-bottom:2px}
.cg-step p::before{display:none}
.cg-more{margin-top:10px;border:1px solid var(--c-line);background:var(--c-bg);padding:0}
.cg-more summary{font-size:13.5px;font-weight:500;color:var(--c-ink);cursor:pointer;min-height:40px;display:flex;align-items:center;gap:10px;padding:0 18px;list-style:none}
.cg-more summary::-webkit-details-marker{display:none}
.cg-more summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease;color:var(--c-ink-faint)}
.cg-more[open] summary::before{transform:rotate(45deg)}
.cg-more[open] summary{border-bottom:1px solid var(--c-line)}
.cg-more .guides{padding:12px 18px 14px}
.capguide[data-sport="run"] .fig-bike,.capguide[data-sport="bike"] .fig-run{display:none}
.capguide[data-sport="run"] li[data-sport="bike"]{display:none}
/* Arriving from a warning that named this rule: one colour step on the
   figure's ring, no motion. */
.cg-flash{animation:cgflash 1.6s ease-out}
@keyframes cgflash{0%{box-shadow:0 0 0 2px var(--c-warn)}100%{box-shadow:0 0 0 2px transparent}}
@media (prefers-reduced-motion:reduce){ .cg-flash{animation:none;outline:2px solid var(--c-warn)} }
.pf-guide{color:var(--c-blue-dk);font-weight:500;white-space:nowrap}
/* What happens to the footage, next to the button that hands it over: a quiet
   tinted strip, three claims separated by hairlines. */
.trustrow{list-style:none;margin:12px 0 0;padding:10px 14px;border:1px solid var(--c-line);background:var(--c-panel-quiet);
  display:flex;flex-wrap:wrap;gap:6px 0;font-size:12px;color:var(--c-ink-soft);line-height:1.45}
.trustrow li{display:flex;align-items:flex-start;gap:8px;padding:0 14px 0 0;margin-right:14px;border-right:1px solid var(--c-line)}
.trustrow li:last-child{border-right:0;margin-right:0;padding-right:0}
.trustrow .ic{display:none}
.trustrow a{color:var(--c-ink-soft);text-decoration:underline;text-underline-offset:2px}
.trustrow a:hover{color:var(--c-ink)}
@media(max-width:640px){
  .capguide{padding:14px}
  .cg-body{grid-template-columns:1fr}
  .cg-step{flex-direction:row;text-align:left;align-items:center;gap:14px;padding:12px 12px 12px 34px;border-left:0;border-top:1px solid var(--c-line)}
  .cg-step:first-child{border-top:0}
  .cg-fig{width:80px;height:80px;flex:none}
  .trustrow li{border-right:0;margin:0;padding:0;display:inline}
  .trustrow{display:block}
}

/* Pre-flight notes on the chosen clip */
.preflight{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.preflight li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.45;
  padding:10px 12px;border-radius:var(--radius);border:1px solid var(--st-warn-fill);border-left-width:3px;
  background:var(--st-warn-bg);color:var(--c-ink)}
.preflight li .ic{width:14px;height:14px;flex:none;margin-top:3px;color:var(--st-warn)}
.preflight li.pf-bad{border-color:var(--st-bad-fill)}
.preflight li.pf-bad{background:var(--st-bad-bg)}
.preflight li.pf-bad .ic{color:var(--st-bad)}

/* Capture report — the same conversation after the fact, but measured. */
.caprep{border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;margin-top:8px;background:var(--c-bg)}
.caprep-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--c-panel);
  font-size:13px;font-weight:500;color:var(--c-ink);cursor:pointer;list-style:none}
.caprep-head::-webkit-details-marker{display:none}
.caprep[open] .caprep-head{border-bottom:1px solid var(--c-line)}
.caprep-head .ic{width:14px;height:14px;flex:none}
.caprep-t{flex:none}
.caprep-chev{margin-left:2px;color:var(--c-ink-faint);transition:transform .15s ease}
.caprep[open] .caprep-chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .caprep-chev{transition:none} }
.caprep-n{font-family:var(--f-mono);font-size:10.5px;font-weight:500;color:var(--c-ink-faint);
  background:var(--c-bg);border:1px solid var(--c-line-strong);border-radius:var(--radius-xs);padding:1px 7px;flex:none}
.caprep-v{margin-left:auto;font-family:var(--f-mono);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:10.5px}
.caprep-v.good{color:var(--st-good)} .caprep-v.fair{color:var(--c-warn-text)} .caprep-v.poor{color:var(--st-bad-text)}
.caprep-row{display:grid;grid-template-columns:14px 1fr;gap:10px;padding:10px 14px;border-top:1px solid var(--c-line);font-size:13px}
.caprep-row:first-of-type{border-top:none}
.caprep-dot{width:8px;height:8px;border-radius:50%;margin-top:6px}
.caprep-dot.good{background:var(--st-good-fill)} .caprep-dot.warn{background:var(--c-warn)}
.caprep-dot.bad{background:var(--st-bad-fill)} .caprep-dot.unknown{background:var(--c-line-strong)}
.caprep-lbl{font-weight:500;color:var(--c-ink)}
.caprep-meas{color:var(--c-ink-soft);font-family:var(--f-mono);font-size:12px}
.caprep-meas b{color:var(--c-ink);font-weight:500}
.caprep-act{margin-top:6px;color:var(--c-ink-soft);line-height:1.5}

/* overlay toggle: a row on a hairline, the switch on the right */
.switch{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:400;cursor:pointer;user-select:none;
  margin:0;padding:12px 0;border:0;border-bottom:1px solid var(--c-line);border-radius:var(--radius);background:transparent;flex-direction:row-reverse;justify-content:flex-end}
.switch input{position:absolute;opacity:0;width:36px;height:20px;cursor:pointer}
.switch .box{width:36px;height:20px;background:var(--c-line-strong);border-radius:999px;position:relative;transition:background-color .15s ease-out;flex:none;margin-top:0}
.switch .box::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .15s ease-out}
.switch input:checked + .box{background:var(--c-blue)}
.switch input:checked + .box::after{transform:translateX(16px)}
.switch input:focus-visible + .box{box-shadow:var(--ring)}
.switch > span:last-child{flex:1}
.overlay-locked{display:flex;align-items:flex-start;gap:10px;text-align:left;font-size:13px;
  margin:0;padding:12px 0;border:0;border-bottom:1px solid var(--c-line);border-radius:var(--radius);
  background:transparent;color:var(--c-ink-soft)}
.overlay-locked .ic{width:16px;height:16px;flex:none;color:var(--c-ink-faint);margin-top:2px}
.overlay-locked b{color:var(--c-ink);font-weight:500}
.overlay-locked a{color:var(--c-blue-dk)}
.switch:hover input:not(:checked) + .box{background:var(--c-ink-faint)}
.switch:hover input:checked + .box{background:var(--c-blue-dk)}
.subhint{display:block;font-size:12px;font-weight:400;color:var(--c-ink-faint);margin-top:2px}

/* submit: the one filled button, the quota beside it, "Compare plans" right */
.analyzebar{position:sticky;bottom:0;z-index:7;background:var(--c-bg);border:1px solid var(--c-line);
  padding:12px 20px;margin:0 0 12px;box-shadow:var(--shadow)}
@media(max-width:900px){ .analyzebar{bottom:calc(68px + env(safe-area-inset-bottom,0))} }
.analyzerow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0}
.analyzemeta{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;min-width:0}
.analyzemeta .hint{margin:0;font-size:13px;color:var(--c-ink-soft)}
.analyzemeta .quota-line{margin:0;flex:0 0 auto}
.analyzemeta .hint{flex:0 0 auto}
.analyzerow .btn-go{width:auto;padding:10px 26px}
.analyzerow .quota-line{margin:0;padding:0;border:0;text-align:left}
.analyzerow .plans-link{margin-left:auto;font-size:13px;color:var(--c-blue-dk);text-decoration:none;font-weight:500}
.analyzerow .plans-link:hover{text-decoration:underline;text-underline-offset:3px}
.btn-block{width:100%;justify-content:center}
.hint{font-size:12.5px;color:var(--c-ink-faint);text-align:left;margin-top:8px}
.hint.err{color:var(--st-bad);font-weight:500}
.hint.warn{color:var(--c-warn-text);font-weight:500}
.btn.danger{color:var(--st-bad);border-color:var(--st-bad-fill);background:transparent}
.btn.danger:hover{background:var(--st-bad-bg)}
.danger-disc{margin-top:28px;border-top:1px solid var(--c-line);padding-top:16px}
.danger-disc summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:var(--c-ink-faint);padding:4px 2px}
.danger-disc summary::-webkit-details-marker{display:none}
.danger-disc summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease}
.danger-disc[open] summary::before{transform:rotate(45deg)}
.danger-disc summary:hover{color:var(--st-bad)}
.danger-disc .dd-body{padding:10px 0 4px 14px;max-width:62ch}
.danger-disc .dd-body p{font-size:13px;color:var(--c-ink-soft);margin:0 0 12px}
.quota-line{font-family:var(--f-mono);font-size:11.5px;color:var(--c-ink-faint);text-align:left;margin-top:8px;padding-top:0;border-top:0}
.quota-line b{color:var(--c-ink);font-family:var(--f-mono);font-weight:500}

/* ---------- Progress (the analysing screen) ----------
   Four named stages down the left, a bar, what is happening now. No card
   chrome; elapsed time in mono. */
.progress-card{padding:28px 0;max-width:640px;margin:0}
.progress-card{background:transparent;border:0}
.progress-card h2{font-family:var(--f-display);font-weight:600;text-transform:none;color:var(--c-ink);font-size:20px;text-align:left}
.jobchip{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin:8px 0 20px}
.jobchip .fchip{font-family:var(--f-mono);font-size:12px;color:var(--c-ink-faint);background:transparent;
  border:1px solid var(--c-line-strong);border-radius:var(--radius-xs);padding:2px 8px;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps{display:flex;flex-direction:column;justify-content:flex-start;gap:0;margin-bottom:20px;border:1px solid var(--c-line);background:var(--c-bg)}
.step{display:flex;align-items:center;gap:12px;font-size:13.5px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--c-ink-faint);padding:10px 16px;border-top:1px solid var(--c-line)}
.step:first-child{border-top:0}
.step .sdot{width:22px;height:22px;border-radius:50%;border:1px solid var(--c-line-strong);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--c-ink-faint);background:var(--c-bg);flex:none}
.step.active{color:var(--c-ink);background:var(--c-panel-blue)}
.step.active .sdot{border-color:var(--c-blue);color:var(--c-blue)}
.step.done{color:var(--c-ink-soft)}
.step.done .sdot{border-color:var(--c-brand-navy);background:var(--c-brand-navy);color:#fff}
.step .sline{display:none}
.pbar{height:4px;background:var(--c-line);border-radius:var(--radius);overflow:hidden;max-width:none;margin:0}
.pbar .fill{height:100%;width:0;border-radius:var(--radius);background:var(--c-blue);transition:width .3s ease}
.pbar.indet .fill{width:30%;animation:indet 1.4s ease-in-out infinite}
@keyframes indet{0%{margin-left:-30%}100%{margin-left:100%}}
@media (prefers-reduced-motion:reduce){.pbar.indet .fill{animation:none;width:100%;opacity:.35}}
.stagetext{text-align:left;color:var(--c-ink-soft);font-size:13.5px;margin-top:12px;min-height:24px}
.stagetext b{font-family:var(--f-mono);font-weight:500;color:var(--c-ink)}
.progress-card .cancelrow{text-align:left;margin-top:20px}

/* ---------- Results ----------
   The score card is the landing's dark tile: brand navy with the hero's
   glows, the score in Archivo italic, the grade a chip in its colour, the
   meta in white. The one dark object on a light report -- the number the
   report is about. */
.result-top{display:flex;flex-direction:column;gap:16px;align-items:stretch;margin-top:0}
.result-top > #videoCol,.result-top > div:not(.scorecard){order:-1}
.result-top.no-video{display:flex}
.scorecard{padding:22px 24px;position:relative;overflow:hidden;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:4px 22px;align-items:start;
  color:#fff;border-color:var(--c-brand-navy);
  background:
    radial-gradient(520px 260px at 92% -30%, rgba(47,109,224,.55), transparent 60%),
    radial-gradient(360px 220px at -8% 130%, rgba(241,85,63,.30), transparent 60%),
    linear-gradient(135deg,var(--c-brand-navy) 0%,#10233F 60%,var(--c-brand-mid) 100%)}
.scorecard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;-webkit-mask-image:radial-gradient(600px 260px at 40% 50%,#000 20%,transparent 80%);mask-image:radial-gradient(600px 260px at 40% 50%,#000 20%,transparent 80%)}
.scorecard > *{position:relative}
.scorecard > .sporttag,.scorecard > .pill{align-self:start;justify-self:start;grid-column:3}
.scorecard > .sporttag{grid-row:1;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.scorecard > .sporttag .ic{color:rgba(255,255,255,.8)}
.sharebtn{margin-top:14px;width:auto;justify-content:center;grid-column:3;justify-self:start}
#printBtnHost{grid-column:3}
.score-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.6);margin-top:0;grid-column:1/span 2;grid-row:1}
.score-num{font-family:var(--f-brand);font-weight:900;font-style:italic;font-size:64px;line-height:1;
  color:#fff;letter-spacing:-.02em;margin-top:8px;grid-column:1;grid-row:2;display:flex;align-items:baseline;gap:6px}
.score-num small{font-family:var(--f-mono);font-size:14px;color:rgba(255,255,255,.55);font-style:normal;font-weight:400;letter-spacing:0}
/* The change since last time, as the landing's delta chip. */
.score-delta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;font-weight:500;font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;
  grid-column:1/span 2;grid-row:3;justify-self:start;padding:3px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.75);background:rgba(255,255,255,.06)}
.score-delta .sd-val{font-family:var(--f-mono);font-weight:500;font-feature-settings:"tnum" 1}
.score-delta.imp{background:rgba(46,158,91,.2);border-color:rgba(46,158,91,.5);color:#7BE0A2}
.score-delta.imp .sd-val{color:#7BE0A2}
.score-delta.reg{background:rgba(241,85,63,.16);border-color:rgba(241,85,63,.45);color:#FFB3A6}
.score-delta.reg .sd-val{color:#FFB3A6}
.score-delta .sd-was{margin-left:2px;color:rgba(255,255,255,.5);text-transform:none;letter-spacing:0}
.score-delta .ic{width:12px;height:12px}
.score-delta.imp .ic{color:#7BE0A2}
.score-delta.reg .ic{color:#FFB3A6;transform:rotate(180deg)}
/* The grade: a chip in its colour beside the number -- green for A/B, amber
   for C, red below, like the landing's score card. */
.graderow{display:flex;align-items:center;gap:8px;margin-top:0;grid-column:2;grid-row:2;align-self:end;padding-bottom:10px;flex-wrap:wrap}
.grade{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-brand);font-weight:900;font-style:italic;
  font-size:22px;min-width:40px;height:40px;padding:0 10px;border-radius:var(--radius-lg);border:0;color:#fff;background:rgba(255,255,255,.14);flex:none;line-height:1}
.grade[data-g="a"],.grade[data-g="b"]{background:var(--c-live-good-fill);color:#fff}
.grade[data-g="c"]{background:#C97B10;color:#fff}
.grade[data-g="d"],.grade[data-g="f"]{background:var(--c-coral-btn);color:#fff}
.grade.grade-word{font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:0 12px;font-family:var(--f-mono);font-style:normal;font-weight:500}
.gradelbl{display:none}
.graderow > div{display:flex;flex-direction:column;gap:4px}
.graderow .pill{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}
.graderow .pill-okchip{background:rgba(46,158,91,.2);border-color:rgba(46,158,91,.5);color:#7BE0A2}
.graderow .pill-warnchip{background:rgba(201,123,16,.22);border-color:rgba(201,123,16,.55);color:#FFD08A}
.score-meta{font-size:13px;color:rgba(255,255,255,.72);margin-top:0;margin-bottom:0;line-height:1.7;border-top:0;padding-top:0;grid-column:3;grid-row:2/span 2;align-self:start}
.score-meta b{color:#fff;font-weight:500}
.score-meta .mono{font-family:var(--f-mono);font-weight:500;color:#fff}
.score-meta a{color:#A7C2F9}
.score-none{font-family:var(--f-mono);font-style:normal;font-weight:500;text-transform:none;font-size:.4em;letter-spacing:0;color:rgba(255,255,255,.6)}
.score-none-why{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.85);
  max-width:64ch;margin:8px 0 0;padding:12px 14px;background:rgba(255,255,255,.08);
  border-left:3px solid #FFD08A;border-radius:0;grid-column:1/-1}
.score-none-why b{color:#fff}
.score-meta .cov-why{display:inline-block;margin-top:2px;font-size:12px}
.confwrap{grid-column:3}
.scorecard .confbtn{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff}
.scorecard .confbtn.c-high{background:rgba(46,158,91,.2);border-color:rgba(46,158,91,.5);color:#7BE0A2}
.scorecard .confbtn.c-high .dot{background:#7BE0A2}
.scorecard .confbtn.c-medium{background:rgba(201,123,16,.22);border-color:rgba(201,123,16,.55);color:#FFD08A}
.scorecard .confbtn.c-medium .dot{background:#FFD08A}
.scorecard .confbtn.c-low{background:rgba(241,85,63,.16);border-color:rgba(241,85,63,.45);color:#FFB3A6}
.scorecard .confbtn.c-low .dot{background:#FFB3A6}
.scorecard .confexp{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85)}
.scorecard .conffactors{color:rgba(255,255,255,.55)}
.scorecard .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.scorecard .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.sc-scorerow{display:contents}
@media(max-width:640px){
  .scorecard{padding:16px;grid-template-columns:1fr;gap:8px}
  .scorecard > *{grid-column:1!important;grid-row:auto!important}
  .scorecard .score-label{order:-1}
  .score-num{font-size:48px}
  #historyDetail .scorecard .sharebtn{margin-top:8px}
  #historyDetail .score-meta{display:block}
}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);z-index:120;
  background:var(--c-ink);color:var(--c-bg);font-weight:500;font-size:13.5px;padding:11px 16px;border-radius:var(--radius);
  box-shadow:var(--shadow);max-width:min(90vw,420px);text-align:center;
  opacity:0;transition:transform .15s ease-out,opacity .15s ease-out;pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast{display:inline-flex;align-items:center;gap:14px;pointer-events:none}
.toast.show{pointer-events:auto}
.toast-action{font:inherit;font-weight:500;color:#A7C2F9;background:none;border:none;
  padding:4px 6px;margin:-4px -2px;cursor:pointer;border-radius:var(--radius-xs)}
.toast-action:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
.toast-action:focus-visible{outline:2px solid #A7C2F9;outline-offset:1px}

.videoframe{border-radius:var(--radius);overflow:hidden;border:1px solid var(--c-line);background:var(--c-media-bg)}
.videoframe video{display:block;width:100%;max-height:560px;background:var(--c-media-bg)}
/* A portrait keyframe at column width is 2,000 px tall. It gets the player's
   height cap and sits centred on the media ground; the inline width the JS
   sets is overridden on purpose. */
.videoframe > img{display:block;max-height:560px;width:auto!important;max-width:100%;margin:0 auto}
.videocap{font-size:12px;color:var(--c-ink-faint);padding:8px 14px;background:var(--c-bg);border-top:1px solid var(--c-line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--f-mono)}
.videocap .note{color:var(--c-ink-faint);font-family:var(--f-body)}

/* ---------- Joint editor (photo, bike) ---------- */
.lmed{margin-top:12px;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);overflow:hidden}
.lmed-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--c-line);font-size:13px;color:var(--c-ink)}
.lmed-head b{color:var(--c-ink);font-weight:600}
.lmed-wrap{position:relative;background:var(--c-media-bg);touch-action:none;user-select:none;-webkit-user-select:none}
.lmed-wrap canvas.lmed-c{display:block;width:100%;height:auto;max-height:70vh;cursor:crosshair}
.lmed-loupe{position:absolute;width:132px;height:132px;border-radius:50%;border:2px solid #fff;
  box-shadow:var(--shadow-lg);pointer-events:none;background:#000}
.lmed-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;background:var(--c-bg);border-top:1px solid var(--c-line)}
.lmed-actions .grp{display:flex;gap:8px;flex-wrap:wrap}
.lmed-status{font-size:12px;color:var(--c-ink-faint);font-family:var(--f-mono)}
.lmed-status.warn{color:var(--c-warn-text)}
.ved-wrap video{display:block;width:100%;max-height:70vh;background:#000}
.ved-wrap canvas.ved-c{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.ved-ctl{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--c-bg);border-top:1px solid var(--c-line)}
.ved-ctl input[type=range]{flex:1;min-width:80px;accent-color:var(--c-blue)}
.ved-ctl .btn{min-height:32px;padding:4px 10px}
.ved-frame{font-family:var(--f-mono);font-size:12px;color:var(--c-ink-faint);min-width:96px;text-align:right}
.corr-badge{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-family:var(--f-mono);font-size:11px;font-weight:500;
  color:var(--c-ink);border:1px solid var(--c-line-strong);border-radius:var(--radius-xs);padding:2px 8px;background:var(--c-bg)}
.corr-badge .ring{width:10px;height:10px;border-radius:50%;border:2px solid var(--st-good-fill)}

/* ---- Kinogram ---- */
.kinowrap{overflow-x:auto;overflow-y:hidden;background:var(--c-media-bg);-webkit-overflow-scrolling:touch}
.kinowrap img{display:block;height:clamp(320px,42vw,520px);width:auto;max-width:none}
@media(min-width:1100px){ .kinowrap img{height:auto;width:100%;max-width:100%} }
.kinohint{font-size:12px;color:var(--c-ink-faint)}

.banner{border-radius:var(--radius);padding:12px 16px;font-size:13.5px;margin-top:16px;display:flex;gap:10px;align-items:flex-start;border:1px solid var(--c-line);background:var(--c-bg)}
.banner .ic{margin-top:2px;width:15px;height:15px}
.banner.warn{background:var(--st-warn-bg);border-color:var(--st-warn-fill);border-left-width:3px;color:var(--c-ink)}
.banner.warn .ic{color:var(--st-warn)}
.banner.ok{background:var(--c-panel-blue);border-color:var(--c-blue);border-left-width:3px;color:var(--c-ink)}
.banner.ok .ic{color:var(--c-blue)}
.banner.good{background:var(--st-good-bg);border-color:var(--st-good-fill);border-left-width:3px;color:var(--c-ink)}
.banner.good .ic{color:var(--st-good)}

/* The coach reading: prose at 14/1.65 on a sunken panel; the one-change
   paragraph the JS marks with <strong> gets the accent tint via .plan-cue. */
.coach{background:var(--c-panel);border-radius:var(--radius);padding:18px 20px}
.coach h4{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--c-ink-faint);margin:14px 0 6px}
.coach h4:first-child{margin-top:0}
.coach p{font-size:14px;color:var(--c-ink);margin:8px 0;line-height:1.65;max-width:72ch}
.coach ul{margin:8px 0;padding-left:20px}
.coach li{font-size:14px;color:var(--c-ink);line-height:1.6;margin:4px 0}
.coach strong{color:var(--c-ink);font-weight:600}
.coach .disclaimer{font-size:11.5px;color:var(--c-ink-faint);margin-top:14px;padding-top:12px;border-top:1px solid var(--c-line);font-family:var(--f-mono)}

/* A finding: a row with a 3 px status rail, the pill, the claim, the number it fired on. */
.issue{border-radius:var(--radius);padding:14px 16px;background:var(--c-bg);border:1px solid var(--c-line);margin-bottom:8px;border-left:3px solid var(--c-line-strong)}
.issue.high{border-left-color:var(--st-bad-fill)} .issue.medium{border-left-color:var(--st-warn-fill)}
.issue.issue-lead{border-left-width:3px;box-shadow:none}
.issue .i-first{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--c-ink-faint);margin-bottom:6px}
.issue .i-top{display:flex;justify-content:space-between;gap:16px;align-items:center}
.issue .i-type{font-weight:600;color:var(--c-ink);font-size:14px}
.issue .i-rec{font-size:13.5px;color:var(--c-ink-soft);margin-top:6px;max-width:72ch;line-height:1.5}
.issue .i-val-lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--c-ink-faint);margin-top:8px;display:inline-block}
.issue .i-val{font-family:var(--f-mono);font-size:12px;color:var(--c-ink)}

/* ---- "Ask about something specific" and the other folds in the uploader ----
   Each fold is a row on a hairline: a summary you can read while it is
   closed, the "optional" tag in mono on the right. */
.askbox{border:0;border-bottom:1px solid var(--c-line);border-radius:var(--radius);padding:0;margin:0}
.askbox summary{font-size:13.5px;font-weight:500;color:var(--c-ink);cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px;list-style:none;padding:0 2px}
.askbox summary::-webkit-details-marker{display:none}
.askbox summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s ease;color:var(--c-ink-faint);flex:none}
.askbox[open] summary::before{transform:rotate(45deg)}
.askbox summary b{font-weight:500;color:var(--c-ink-soft)}
.askopt{font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--c-ink-faint);margin-left:auto}
.askbox input{width:100%;margin-top:0;padding:9px 12px;font-family:var(--f-body);font-size:14px;min-height:40px;
  color:var(--c-ink);border:1px solid var(--c-line-strong);border-radius:var(--radius-xs);background:var(--c-bg)}
.askbox input:focus{border-color:var(--c-blue);outline:none;box-shadow:var(--ring)}
.askbox > :not(summary){margin-bottom:14px}
.askhint{font-size:12.5px;color:var(--c-ink-faint);line-height:1.5;margin:8px 0 0}
.sidebox .tilerow{margin-top:0}
.sidebox .poshint{margin-top:8px}
.optbox .profilefield{margin-top:0}
.optbox .profilehint{margin-top:6px}
@media(max-width:560px){ .sidebox .tilerow{display:grid;grid-template-columns:1fr 1fr} .sidebox .tile-btn{border-left:0;border-top:1px solid var(--c-line)} .sidebox .tile-btn:nth-child(-n+2){border-top:0} .sidebox .tile-btn:nth-child(2n){border-left:1px solid var(--c-line)} }
.fplace{width:200px;aspect-ratio:16/9;flex:none;border-radius:var(--radius);
  background:var(--c-media-bg);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px;
  font-size:12px;font-weight:500;line-height:1.35}
.fplace .ic{width:22px;height:22px;opacity:.75}
.fplace small{font-weight:400;opacity:.72}
.asked{font-size:13.5px;color:var(--c-ink-soft);line-height:1.5;margin:0 0 14px;
  padding:10px 14px;background:var(--c-panel-blue);border-left:3px solid var(--c-blue);border-radius:var(--radius)}
.asked-lbl{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-ink-faint);margin-right:8px}
#planCards{display:flex;flex-direction:column;gap:0;border:1px solid var(--c-line);background:var(--c-bg)}
/* ---- Fit adjustments (cycling) ---- */
#fitRows{display:flex;flex-direction:column;gap:0;border:1px solid var(--c-line);background:var(--c-bg)}
.fit-row{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;
  padding:14px 16px;border:0;border-top:1px solid var(--c-line);border-radius:var(--radius);border-left:3px solid transparent;background:var(--c-bg)}
.fit-row:first-child{border-top:0}
.fit-row.good{border-left-color:var(--st-good-fill)}
.fit-row.warn{border-left-color:var(--st-warn-fill);background:var(--c-bg)}
.fit-row.bad{border-left-color:var(--st-bad-fill);background:var(--c-bg)}
.fit-n{width:auto;height:auto;border-radius:var(--radius);background:transparent;color:var(--c-ink-faint);
  font-family:var(--f-mono);font-size:12px;font-weight:500;display:flex;align-items:center;justify-content:flex-start;padding-top:2px}
.fit-row.bad .fit-n{background:transparent;color:var(--st-bad)}
.fit-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fit-part{font-weight:600;color:var(--c-ink);font-size:14px}
.fit-metric{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-faint);font-weight:500}
.fit-nums{font-family:var(--f-mono);font-size:13px;color:var(--c-ink-soft);margin-top:4px}
.fit-nums b{color:var(--c-ink);font-weight:500}
.fit-arrow{color:var(--c-ink-faint);padding:0 2px}
.fit-action{margin-top:6px;font-size:13.5px;font-weight:500;color:var(--c-ink)}
.fit-amount{font-family:var(--f-mono);font-weight:500;color:var(--c-blue-dk)}
.fit-why{margin-top:4px;font-size:13px;color:var(--c-ink-soft);line-height:1.5;max-width:70ch}
.fit-med .fit-part{color:var(--st-bad)}
/* ---- Off-bike mobility ---- */
.mob-card{margin:16px 0 0;padding:14px 16px;border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-panel-quiet)}
.mob-card.mob-over{background:var(--st-warn-bg);border-color:var(--st-warn-fill)}
.mob-title{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-faint);margin:0 0 8px}
.mob-card.mob-over .mob-title{color:var(--st-warn)}
.mob-msg{font-size:13.5px;color:var(--c-ink);line-height:1.55;margin:0;max-width:70ch}
.mob-rows{display:flex;flex-wrap:wrap;gap:8px 20px;margin:10px 0 0}
.mob-item{font-size:13px;color:var(--c-ink-soft)}
.mob-item b{font-family:var(--f-mono);color:var(--c-ink);font-weight:500}
.mob-tier{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;padding:1px 6px;border-radius:var(--radius-xs);margin-left:6px;border:1px solid}
.mob-tier.t-good{background:var(--st-good-bg);color:var(--st-good);border-color:var(--st-good-fill)}
.mob-tier.t-moderate{background:var(--st-warn-bg);color:var(--st-warn);border-color:var(--st-warn-fill)}
.mob-tier.t-limited{background:var(--st-bad-bg);color:var(--st-bad);border-color:var(--st-bad-fill)}
.mob-caveat{font-size:12px;color:var(--c-ink-faint);line-height:1.5;margin:10px 0 0;max-width:70ch}
.mob-when{font-family:var(--f-mono);font-size:10.5px;color:var(--c-ink-faint);margin-left:8px}
.mob-screen{border-top:1px solid var(--c-line);padding:14px 0 0;margin:14px 0 0}
.mob-screen:first-of-type{border-top:0;padding-top:8px;margin-top:8px}
.mob-screen .mob-h{font-family:var(--f-body);font-size:14px;font-weight:600;color:var(--c-ink);margin:0 0 4px;text-transform:none;letter-spacing:0}
.mob-why{font-size:12.5px;color:var(--c-ink-soft);line-height:1.5;margin:0 0 8px;max-width:66ch}
.mob-steps{margin:0 0 10px;padding-left:18px;font-size:12.5px;color:var(--c-ink-soft);line-height:1.6}
.mob-steps li{margin:2px 0}
.mob-file{display:block;font-size:12.5px;color:var(--c-ink-soft)}
.mob-state{font-size:13px;line-height:1.5;margin:8px 0 0}
.mob-state.ok{color:var(--st-good)}
.mob-state.err{color:var(--st-bad)}
.mob-clear{margin:14px 0 0}
.mob-goal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0;font-size:12.5px;color:var(--c-ink-soft)}
.mob-goal select{font-family:var(--f-body);font-size:13px;padding:6px 10px;
  border:1px solid var(--c-line-strong);border-radius:var(--radius-xs);background:var(--c-bg);color:var(--c-ink);min-height:36px}
.fit-good{margin-top:14px;font-size:13px;color:var(--c-ink-soft);display:flex;gap:8px;align-items:flex-start}
.fit-good .ic{width:14px;height:14px;flex:none;margin-top:3px;color:var(--st-good)}
@media(max-width:640px){ .fit-row{padding:12px} .fit-nums{font-size:12.5px} }
/* A drill: number, name, dose in mono on the right. Rows, not cards. */
.plan-card{border:0;border-top:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);padding:14px 16px;box-shadow:none}
.plan-card:first-child{border-top:0}
.plan-top{display:flex;align-items:center;gap:12px}
.plan-n{flex:none;width:auto;height:auto;border-radius:var(--radius);background:transparent;color:var(--c-ink-faint);font-family:var(--f-mono);font-weight:500;font-size:12px;display:flex;align-items:center;justify-content:center}
.plan-titles{flex:1;min-width:0}
.plan-drill{font-weight:600;font-size:14px;color:var(--c-ink);line-height:1.3}
.plan-metric{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-faint);margin-top:2px}
.plan-weeks{flex:none;display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--c-ink-soft);white-space:nowrap}
.plan-weeks .ic{width:13px;height:13px}
.plan-why{font-size:13px;color:var(--c-ink-soft);margin:10px 0 0}
.plan-how{font-size:13.5px;color:var(--c-ink);margin:8px 0 0;line-height:1.55;max-width:70ch}
.plan-cue{margin-top:10px;font-size:13.5px;color:var(--c-ink);background:var(--c-panel-blue);border-left:3px solid var(--c-blue);border-radius:var(--radius);padding:10px 12px}
.plan-cue-lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--c-ink-faint);margin-right:6px}
.plan-link{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:13px;font-weight:500;color:var(--c-blue-dk)}
.plan-link .ic{width:14px;height:14px}
.plan-link:hover{text-decoration:underline}
.plan-done{flex:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--c-ink-faint);user-select:none}
.plan-done input{width:16px;height:16px;accent-color:var(--st-good-fill);cursor:pointer;margin:0}
.plan-card.done{border-left:0;background:var(--c-panel)}
.plan-card.done .plan-drill{text-decoration:line-through;color:var(--c-ink-faint)}
.plan-card.done .plan-done{color:var(--st-good)}
.hdplan-prog{font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--c-ink-faint);margin:0 0 14px}
.hdplan-prog b{color:var(--c-ink);font-weight:500}
.dplan{border:1px solid var(--c-line);border-radius:var(--radius);background:var(--c-bg);padding:16px 18px;margin-bottom:20px}
.dplan .ic{width:16px;height:16px;vertical-align:-2px;margin-right:4px}
.dplan-list{display:flex;flex-direction:column;gap:0;margin:4px 0 14px;border:1px solid var(--c-line)}
.dplan-item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--c-ink);background:var(--c-bg);border:0;border-top:1px solid var(--c-line);border-radius:var(--radius);padding:9px 12px}
.dplan-item:first-child{border-top:0}
.dplan-item small{color:var(--c-ink-faint);font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;margin-left:auto;white-space:nowrap}
.dplan-check{flex:none;width:18px;height:18px;border-radius:var(--radius-xs);border:1px solid var(--c-line-strong);display:flex;align-items:center;justify-content:center}
.dplan-check svg{width:11px;height:11px;color:#fff;display:none}
.dplan-item.done{color:var(--c-ink-faint)}
.dplan-item.done .dplan-drill{text-decoration:line-through}
.dplan-item.done .dplan-check{background:var(--st-good-fill);border-color:var(--st-good-fill)}
.dplan-item.done .dplan-check svg{display:block}
.dplan-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dplan-prog{font-family:var(--f-mono);font-size:12px;font-weight:500;color:var(--c-ink-faint)}
.dplan-prog b{color:var(--c-ink);font-weight:500}
.dplan-done-note{font-size:13px;font-weight:500;color:var(--st-good)}

/* Metric tiles: label mono caps, value mono 24, range bar at the base. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.tile{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius);padding:14px 16px;min-height:96px;display:flex;flex-direction:column}
.tile .grbar{margin-top:auto;padding-top:10px}
.tile:not(:has(.grbar)) .t-ref{margin-top:auto}
.tiles-short{margin-top:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tile.tile-short{padding:12px 14px 12px;min-height:0}
.tile.tile-short .t-val{font-size:20px;margin-top:6px}
.tile.tile-short .t-val.txt{font-size:15px;margin-top:8px}
.tile.tile-short .t-ref{font-size:11px}
/* ---------- Aero panel ---------- */
#aeroBlock .eyebrow .ic{width:13px;height:13px;vertical-align:-2px;margin-right:5px}
.aero-hero{display:flex;align-items:center;gap:16px;background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius);padding:16px 20px;color:var(--c-ink)}
.aero-watts{display:flex;align-items:baseline;gap:4px;line-height:1}
.aero-w-num{font-family:var(--f-mono);font-weight:500;font-style:normal;font-size:44px;color:var(--c-ink);font-feature-settings:"tnum" 1;letter-spacing:-.03em}
.aero-w-unit{font-family:var(--f-mono);font-weight:400;font-style:normal;font-size:16px;color:var(--c-ink-faint)}
.aero-w-cap{font-size:13px;font-weight:500;color:var(--c-ink-soft)}
.aero-w-cap .hint{color:var(--c-ink-faint);font-weight:400}
.aero-speed{display:flex;align-items:center;gap:10px;margin:14px 0 2px;flex-wrap:wrap}
.aero-speed-lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--c-ink-faint)}
.aero-speed-unit{font-size:12px;color:var(--c-ink-faint);font-weight:400;font-family:var(--f-mono)}
.seg-sm button{padding:5px 12px;font-size:13px;font-weight:500;min-height:32px}
.phasepick{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius);padding:12px 14px;margin:0 0 14px}
.phasepick-lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--c-ink-faint);line-height:1.5}
.phasepick-lbl .hint{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;font-family:var(--f-body)}
.seg-sm button[aria-pressed="true"]{background:var(--c-brand-navy);color:#fff}
.aero-lead{font-size:14px;line-height:1.55;color:var(--c-ink);margin:14px 0 6px}
.aero-gauge{width:100%;max-width:400px;height:auto;display:block;margin:6px 0 10px}
.aero-levers-h{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--c-ink-faint);margin:10px 0 8px}
.aero-levers-h .hint{text-transform:none;letter-spacing:0;font-weight:400;font-family:var(--f-body)}
.aero-levers{display:flex;flex-direction:column;gap:0;margin-bottom:6px;border:1px solid var(--c-line)}
.lev-row{background:var(--c-bg);border:0;border-top:1px solid var(--c-line);border-radius:var(--radius);padding:10px 13px}
.lev-row:first-child{border-top:0}
.lev-row.is-ok{background:var(--c-panel);opacity:1}
.lev-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lev-lbl{font-weight:600;font-size:13.5px;color:var(--c-ink)}
.lev-txt{font-size:13px;color:var(--c-ink-soft);line-height:1.45;margin-top:3px}
.lev-tag{font-family:var(--f-mono);font-weight:500;font-size:11px;padding:1px 8px;border-radius:var(--radius-xs);white-space:nowrap;border:1px solid var(--c-line-strong)}
.lev-w{background:var(--c-brand-navy);color:#fff;border-color:var(--c-brand-navy)}
.lev-cue{background:var(--c-panel-blue);color:var(--c-blue-dk);border-color:var(--c-blue-dk)}
.lev-ok{background:var(--st-good-bg);color:var(--st-good);border-color:var(--st-good-fill)}
.aero-cue{display:flex;gap:8px;align-items:flex-start;background:var(--c-panel-quiet);border:1px solid var(--c-line);border-radius:var(--radius);padding:12px 14px;font-size:13.5px;color:var(--c-ink);margin:8px 0}
.aero-cue .ic{width:16px;height:16px;color:var(--c-ink-faint);flex:none;margin-top:1px}
.aero-foot{margin:12px 0 4px}
.aero-disc{font-size:11.5px;color:var(--c-ink-faint);line-height:1.5;margin:10px 0 0;font-family:var(--f-mono)}
.aero-ok{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--c-ink)}
.aero-ok .ic{width:18px;height:18px;color:var(--st-good);flex:none;margin-top:1px}
@media (max-width:560px){ .aero-w-num{font-size:36px} .aero-hero{padding:14px 16px} }
.tile .t-lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--c-ink-faint);display:flex;align-items:center;gap:8px}
.tile .t-lbl .sdot{width:7px;height:7px;border-radius:50%;flex:none}
.tile.good .t-lbl .sdot{background:var(--st-good-fill)}
.tile.warn .t-lbl .sdot{background:var(--st-warn-fill)}
.tile.bad .t-lbl .sdot{background:var(--st-bad-fill)}
/* Out-of-range tiles keep a neutral ground: colour is spent on the value and
   the pill, and surfaces stay neutral. The status line marks the left edge. */
.tile.warn{background:var(--c-bg);border-color:var(--c-line);border-left:3px solid var(--st-warn-fill)}
.tile.bad{background:var(--c-bg);border-color:var(--c-line);border-left:3px solid var(--st-bad-fill)}
.tile .t-val{font-family:var(--f-mono);font-size:26px;font-weight:500;color:var(--c-ink);margin-top:8px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.tile .t-val small{font-size:12px;color:var(--c-ink-faint);font-weight:400;letter-spacing:0}
.tile .t-val.txt{font-family:var(--f-body);font-size:16px;font-weight:600;line-height:1.3;margin-top:10px;letter-spacing:0}
.tile .t-ref{font-size:11.5px;color:var(--c-ink-faint);margin-top:6px;font-family:var(--f-mono)}
.tile .t-what{margin-left:auto;flex:none;width:18px;height:18px;border:1px solid var(--c-line-strong);border-radius:50%;
  background:var(--c-bg);color:var(--c-ink-faint);font:500 10px/1 var(--f-mono);letter-spacing:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:color .15s ease-out,border-color .15s ease-out}
.tile .t-what:hover,.tile .t-what[aria-expanded="true"]{color:var(--c-ink);border-color:var(--c-ink)}
.tile .t-def{font-family:var(--f-body);font-size:12.5px;line-height:1.45;color:var(--c-ink-soft);margin:8px 0 0;padding-top:8px;border-top:1px dashed var(--c-line);
  text-transform:none;letter-spacing:0;font-weight:400}
@media print{ .tile .t-what{display:none} .tile .t-def{display:block !important} }
.tile .t-ref .st-good{color:var(--c-live-good);font-weight:500}
.tile .t-ref .st-warn{color:var(--st-warn);font-weight:500}
.tile .t-ref .st-bad{color:var(--st-bad);font-weight:500}

/* ---------- Range bar (metric target band + marker) ----------
   A hairline track across the full axis, the target band drawn as a soft
   green zone on it, the value as a 2 px ink rule. The JS still paints the
   zone gradient inline; the zone colours are the tokens it reads. */
.grbar{margin-top:10px}
.grbar .gr-chiprow{position:relative;height:16px}
.grbar .gr-chip{position:absolute;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--f-mono);font-size:11px;font-weight:500;line-height:1;
  padding:2px 5px;border-radius:var(--radius-xs);background:var(--c-bg);color:var(--c-ink)}
.grbar .gr-chip.gr-good{color:var(--c-live-good)}
.grbar .gr-chip.gr-warn{color:var(--c-warn-text)}
.grbar .gr-chip.gr-bad{color:var(--st-bad-text)}
.grbar .gr-track{position:relative;height:8px;border-radius:var(--radius-xs);overflow:visible;margin-top:2px}
.grbar .gr-track::before{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:var(--c-line-strong)}
.grbar .gr-tri{position:absolute;top:-3px;width:2px;height:14px;border:0!important;
  background:var(--c-ink);transform:translateX(-1px);filter:none}
.grbar .gr-scale{display:flex;justify-content:space-between;font-family:var(--f-mono);
  font-size:10.5px;color:var(--c-ink-faint);margin-top:8px;font-weight:400}
.grbar .gr-scale .gr-opt{color:var(--c-live-good);font-weight:500;white-space:nowrap}
.grbar .gr-src{font-size:10.5px;color:var(--c-ink-faint);margin-top:6px;line-height:1.4;
  min-height:29px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){ .grbar .gr-scale{font-size:10px} }

/* ---------- Advanced biomechanics charts ---------- */
.biomech-intro{font-size:13px;color:var(--c-ink-soft);margin:-4px 0 18px;line-height:1.6}
.bmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}
.bmcard{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius);padding:14px 16px 12px}
.bmcard .bm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.bmcard .bm-title{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--c-ink-faint)}
.bmcard .bm-badge{font-family:var(--f-mono);font-size:11px;font-weight:500;padding:1px 8px;border-radius:var(--radius-xs);white-space:nowrap;border:1px solid}
.bmcard .bm-badge.good{color:var(--st-good);background:var(--st-good-bg);border-color:var(--st-good-fill)}
.bmcard .bm-badge.warn{color:var(--st-warn);background:var(--st-warn-bg);border-color:var(--st-warn-fill)}
.bmcard .bm-badge.bad{color:var(--st-bad-text);background:var(--st-bad-bg);border-color:var(--st-bad-fill)}
.bmcard .bm-sub{font-size:11px;color:var(--c-ink-faint);margin-bottom:8px;min-height:15px}
.bmcard .bm-metrics{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:11px;color:var(--c-ink-faint);margin-top:8px}
.bmcard .bm-metrics b{font-family:var(--f-mono);color:var(--c-ink);font-weight:500}
.bmchart{width:100%;height:auto;display:block;overflow:visible}
.bmchart text{font-family:var(--f-mono);fill:var(--c-ink-faint)}
.bmchart .bm-axtitle{fill:var(--c-ink-faint);font-weight:500}
.bmlegend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:10.5px;color:var(--c-ink-faint);margin-top:8px;font-family:var(--f-mono)}
.bmlegend .lg{display:inline-flex;align-items:center;gap:5px}
.bmlegend .sw{width:14px;height:2px;border-radius:var(--radius);flex:none}
.bmlegend .sw.dot{width:7px;height:7px;border-radius:50%}
.bmlegend .sw.dash{background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 7px);height:2px}

/* Tables: mono caps header on a hairline, hairline rows, numbers right and mono. */
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data thead th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-faint);
  font-weight:500;text-align:left;padding:8px 14px;border-bottom:1px solid var(--c-line-strong)}
table.data th.num,table.data td.num{text-align:right;font-variant-numeric:tabular-nums}
table.data thead th .thq{font-family:var(--f-mono);font-size:10px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--c-ink-faint);margin-left:2px}
table.data td,table.data tbody th{padding:10px 14px;border-bottom:1px solid var(--c-line)}
table.data tbody th{text-align:left;font-weight:500;color:var(--c-ink)}
table.data tbody tr:hover{background:var(--c-panel)}
table.data td.num{font-family:var(--f-mono);font-weight:500;color:var(--c-ink)}
table.data td.pct{font-family:var(--f-mono);font-weight:500;color:var(--c-ink);text-align:right;font-variant-numeric:tabular-nums}
table.data td.muted{color:var(--c-ink-faint)}
.anglemerge{font-size:13px;color:var(--c-ink-soft);line-height:1.5;margin:-6px 0 14px;
  padding:10px 12px;background:var(--c-panel-blue);border-radius:var(--radius);border-left:3px solid var(--c-blue)}
.anglemerge b{color:var(--c-ink);font-weight:500}
table.data th .ang-src{display:block;font-size:10px;font-weight:400;color:var(--c-ink-faint);text-transform:none;letter-spacing:0;margin-top:2px}
table.data.no-opt .col-opt,table.data.no-opt .col-status{display:none}
table.data .noref{color:var(--c-ink-faint);font-family:var(--f-mono);font-size:11px;font-weight:400}
table.data tr.t-farrow td{border-bottom:none;padding:8px 14px 4px}
table.data tr.t-farrow:hover{background:none}
@media print{ table.data tr.t-farrow{display:none} }
.tablewrap{
  overflow-x:auto;position:relative;
  background:
    linear-gradient(to right, var(--c-bg) 40%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--c-bg) 40%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(20,24,31,.14), rgba(20,24,31,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(20,24,31,.14), rgba(20,24,31,0)) right center;
  background-repeat:no-repeat;
  background-size:28px 100%, 28px 100%, 10px 100%, 10px 100%;
  background-attachment:local, local, scroll, scroll;
}
@media print{ .tablewrap{background:none;overflow:visible} }
@media(max-width:640px){
  .tablewrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--c-bg))}
}

details.raw{margin-top:28px}
details.raw summary{cursor:pointer;font-weight:500;font-size:13px;color:var(--c-ink-faint);font-family:var(--f-mono)}
details.raw pre{background:var(--c-media-bg);color:#C6CCD6;font-family:var(--f-mono);font-size:12px;line-height:1.6;
  padding:16px;border-radius:var(--radius);overflow-x:auto;margin-top:12px;max-height:420px}

.again-row{margin-top:32px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.again-row .quota{margin:0;font-family:var(--f-mono);font-size:11.5px;color:var(--c-ink-faint)}
.exportrow{display:flex;gap:8px;flex-wrap:wrap}
/* On a report the "Analyze another" is the secondary action: outline. */
#results .again-row .btn-primary,#photoResults .again-row .btn-primary{background:var(--c-bg);color:var(--c-ink);border-color:var(--c-line-strong)}
#results .again-row .btn-primary:hover,#photoResults .again-row .btn-primary:hover{background:var(--c-panel);border-color:var(--c-ink)}
#exportBlock .btn-primary,#hdExportBlock .btn-primary{background:var(--c-bg);color:var(--c-ink);border-color:var(--c-line-strong)}
#exportBlock .btn-primary:hover,#hdExportBlock .btn-primary:hover{background:var(--c-panel);border-color:var(--c-ink)}

/* ---------- Error / limit ---------- */
.error-card{padding:24px;border-left:3px solid var(--st-bad-fill);max-width:640px}
.error-card h2{font-family:var(--f-display);font-weight:600;text-transform:none;color:var(--c-ink);font-size:20px;margin-bottom:8px}
.error-card p{color:var(--c-ink-soft)}
.error-card ul{margin:14px 0 0;padding-left:20px;color:var(--c-ink-soft);font-size:13.5px;line-height:1.7}
.error-card .actions-row{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.limit-card{border-left-color:var(--st-warn-fill)}
.limit-card h2{color:var(--c-ink)}
.limit-card .bigwait{font-family:var(--f-mono);font-weight:500;color:var(--c-ink)}

footer{border-top:1px solid var(--c-line);padding:20px 0 40px;font-size:11.5px;color:var(--c-ink-faint);font-family:var(--f-mono)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--c-ink-soft);text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--c-ink)}
footer .footlinks{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ---------- Account & Profiles ---------- */
.acct-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:900px){ .acct-grid{grid-template-columns:1fr} }
.acct-card{background:var(--c-bg);border:1px solid var(--c-line);margin-bottom:16px}
.acct-card h3{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--c-ink);margin:0;padding:12px 18px;border-bottom:1px solid var(--c-line);display:flex;align-items:center;gap:10px}
.acct-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 18px;border-top:1px solid var(--c-line);font-size:13.5px}
.acct-row:first-of-type,.acct-card h3 + .acct-row{border-top:0}
.acct-row .k{color:var(--c-ink-faint)}
.acct-row .v{font-family:var(--f-mono);color:var(--c-ink);overflow-wrap:anywhere}
.acct-row .a{color:var(--c-blue-dk);font-size:13px;text-decoration:none;background:none;border:0;cursor:pointer;font-family:inherit}
.acct-row .a:hover{text-decoration:underline;text-underline-offset:3px}
.acct-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));padding:14px 18px;gap:16px}
.acct-stat .k{font-size:11.5px;color:var(--c-ink-faint)}
.acct-stat .v{font-family:var(--f-mono);font-size:18px;font-weight:500;color:var(--c-ink);margin-top:4px}
.acct-stat .s{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-faint);margin-top:2px}
.acct-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--c-line)}
.acct-actions .right{margin-left:auto}
.acct-p{font-size:13.5px;color:var(--c-ink-soft);line-height:1.5;margin:0 0 10px}
.acct-body{padding:14px 18px;border-top:1px solid var(--c-line)}
.acct-body:first-of-type{border-top:0}
.acct-body h4{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--c-ink);margin:0 0 6px}
.acct-foot{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-faint);line-height:1.7;margin-top:6px}
.acct-foot a{color:var(--c-blue-dk);text-decoration:none}
@media(max-width:560px){ .acct-row{grid-template-columns:1fr;gap:4px} }
/* Profiles list */
.prof-list{background:var(--c-bg);border:1px solid var(--c-line)}
.prof-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 90px auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--c-line);font-size:13.5px}
.prof-row:first-child{border-top:0}
.prof-row.is-archived{color:var(--c-ink-faint)}
.prof-row .p-name{font-weight:600;color:var(--c-ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prof-row.is-archived .p-name{color:var(--c-ink-faint)}
.prof-row .p-kind{font-family:var(--f-mono);font-size:10.5px;color:var(--c-ink-faint);border:1px solid var(--c-line-strong);padding:0 6px;border-radius:var(--radius-xs)}
.prof-row .p-sub{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-faint);margin-top:2px}
.prof-row .p-n{font-family:var(--f-mono);font-size:16px;color:var(--c-ink)}
.prof-row .p-n small{display:block;font-size:11px;color:var(--c-ink-faint)}
.prof-row .p-acts{display:flex;gap:12px;justify-content:flex-end}
.prof-row .p-acts button{background:none;border:0;color:var(--c-blue-dk);font:inherit;font-size:13px;cursor:pointer;padding:4px 0}
.prof-row .p-acts button:hover{text-decoration:underline;text-underline-offset:3px}
.prof-row .p-acts button.del{color:var(--st-bad)}
.prof-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.prof-head .seg{margin-right:auto}
.prof-note{font-family:var(--f-mono);font-size:11px;color:var(--c-ink-faint);margin:10px 0 0}
.prof-edit{background:var(--c-bg);border:1px solid var(--c-line);padding:16px 18px;margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:end}
.prof-edit label{display:block;font-family:var(--f-mono);font-size:11px;color:var(--c-ink-faint);margin-bottom:6px}
.prof-edit input,.prof-edit select{width:100%;font:inherit;font-size:14px;padding:9px 12px;min-height:40px;border:1px solid var(--c-line-strong);background:var(--c-bg);color:var(--c-ink)}
.prof-limit{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;margin-top:16px;border:1px solid var(--c-line);background:var(--c-panel-blue);font-size:13.5px;color:var(--c-ink)}
.prof-limit .btn{margin-left:auto}
@media(max-width:640px){ .prof-row{grid-template-columns:1fr 1fr} .prof-row .p-acts{grid-column:1/-1;justify-content:flex-start} .prof-edit{grid-template-columns:1fr} }

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .topbar{display:flex}
  .appshell{margin-left:0}
  .sidebar{transform:translateX(-100%);transition:transform .15s ease-out;box-shadow:var(--shadow-lg)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .scrim{display:block}
  .scrim[hidden]{display:none}
  .botnav{display:grid}
  .appshell{padding-bottom:calc(68px + env(safe-area-inset-bottom,0))}
  body.authed .backhome-row{display:block}
  .result-top{grid-template-columns:1fr}
  .scorecard{max-width:none}
}
@media(min-width:901px){ .scrim{display:none!important} }
@media(max-width:640px){
  header .wrap{height:52px}
  .wordmark{font-size:20px}
  main{padding-top:16px}
  .wrap{padding:0 16px}
  .uploader{padding:0;margin-top:0}
  .modetabs{width:auto}
  .modetabs button{padding:5px 10px;font-size:12px}
  .uphead{font-size:16px}
  .drop{padding:24px 14px}
  .filepreview{flex-direction:column;align-items:stretch}
  .filepreview video{width:100%}
  .filepreview img#previewImg{width:100%;max-width:260px;margin:0 auto}
  .guides{grid-template-columns:1fr;gap:8px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .progress-card{padding:20px 0}
  .step span.slbl{display:inline}
  .videocap{flex-direction:column;align-items:flex-start}
  .blockhead{margin-top:28px}
  .again-row{flex-direction:column;align-items:stretch;text-align:center}
  table.data{font-size:13px}
  table.data td,table.data thead th{padding:8px}
  .analyzebar{padding:10px 14px}
  .analyzerow{gap:10px}
  .analyzerow .btn-go{flex:1 1 100%;width:100%}
  .analyzemeta{flex:1 1 auto}
  .analyzerow .plans-link{margin-left:auto}
  .pagehead .ph-right{margin-left:0}
}

/* ---- Result feedback ("does this match what you see?") ---- */
.fb{border-top:1px solid var(--c-line);margin-top:32px;padding-top:18px}
.fbrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fbq{font-size:13.5px;font-weight:500;color:var(--c-ink);margin:0}
.fb-thumbs{display:flex;gap:8px}
.fb-thumb{font-family:var(--f-body);font-weight:500;font-size:13px;color:var(--c-ink-soft);
  background:var(--c-bg);border:1px solid var(--c-line-strong);border-radius:var(--radius);padding:7px 14px;cursor:pointer;min-height:36px;
  display:inline-flex;align-items:center;gap:7px}
.fb-thumb:hover{border-color:var(--c-ink);color:var(--c-ink)}
.fb-thumb .ic{width:14px;height:14px}
.fb-thumb[aria-pressed="true"]{background:var(--c-brand-navy);border-color:var(--c-brand-navy);color:#fff}
.fb-thumb.fb-down[aria-pressed="true"]{background:var(--c-brand-navy);border-color:var(--c-brand-navy);color:#fff}
.fb-more{margin-top:14px;padding:16px;background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius)}
.fb-lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--c-ink-faint);margin:0 0 8px}
.fb-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.fb-tag{font-family:var(--f-body);font-weight:400;font-size:13px;color:var(--c-ink-soft);
  background:var(--c-bg);border:1px solid var(--c-line-strong);border-radius:var(--radius);padding:5px 12px;min-height:36px;cursor:pointer;display:inline-flex;align-items:center}
.fb-tag:hover{border-color:var(--c-ink)}
.fb-tag[aria-pressed="true"]{background:var(--c-brand-navy);border-color:var(--c-brand-navy);color:#fff}
.fb-more textarea{width:100%;padding:10px 12px;border:1px solid var(--c-line-strong);border-radius:var(--radius-xs);
  font-size:14px;font-family:var(--f-body);resize:vertical;min-height:76px;color:var(--c-ink);background:var(--c-bg)}
.fb-more textarea:focus{border-color:var(--c-blue)}
.fb-consent{display:flex;gap:9px;align-items:flex-start;margin:12px 0 16px;font-size:13px;color:var(--c-ink-soft);line-height:1.5;cursor:pointer}
.fb-consent input{margin:2px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:var(--c-blue)}
.fb-consent b{color:var(--c-ink);font-weight:500}
.fb-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fb-thanks{display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--c-ink);font-weight:500;margin:0}
.fb-thanks .ic{width:16px;height:16px;color:var(--st-good)}
.fb-note{font-size:11.5px;color:var(--c-ink-faint);margin:8px 0 0;font-family:var(--f-mono)}

/* ---- What's new (release notes) ---- */
.newdot{width:6px;height:6px;border-radius:50%;background:var(--c-blue);flex:0 0 auto}
.sidenav .navlink .newdot{margin-left:auto}
.topbar-toggle{position:relative}
.topbar-toggle .newdot{position:absolute;top:8px;right:8px;border:2px solid var(--c-bg);box-sizing:content-box}
.wn-entry{border-left:1px solid var(--c-line);padding:0 0 32px 22px;position:relative}
.wn-entry:last-child{border-left-color:transparent;padding-bottom:8px}
.wn-entry::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--c-line-strong);border:2px solid var(--c-ground)}
.wn-entry.is-new::before{background:var(--c-blue)}
.wn-when{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink-faint);display:flex;align-items:center;gap:8px;margin-bottom:6px}
.wn-badge{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--c-blue-dk);border:1px solid var(--c-blue-dk);padding:1px 6px;border-radius:var(--radius-xs)}
.wn-entry h3{font-family:var(--f-display);text-transform:none;color:var(--c-ink);font-weight:600;font-size:16px;line-height:1.3;margin:0 0 8px}
.wn-entry p{font-size:14px;line-height:1.65;color:var(--c-ink);margin:8px 0;max-width:66ch}
.wn-entry ul,.wn-entry ol{margin:8px 0;padding-left:20px}
.wn-entry li{font-size:14px;line-height:1.65;color:var(--c-ink);margin:4px 0;max-width:64ch}
.wn-entry strong{color:var(--c-ink);font-weight:600}
.wn-foot{margin-top:8px;padding-top:20px;border-top:1px solid var(--c-line)}

/* ---- Feedback admin (admin tier only) ---- */
.fb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin-bottom:24px;border:1px solid var(--c-line);background:var(--c-bg)}
.fb-stat{background:var(--c-bg);border-radius:var(--radius);padding:14px 16px;border-left:1px solid var(--c-line)}
.fb-stat:first-child{border-left:0}
.fb-stat .v{font-family:var(--f-mono);font-size:26px;font-weight:500;color:var(--c-ink);line-height:1}
.fb-stat .k{font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--c-ink-faint);margin-top:6px}
.fb-item{border:1px solid var(--c-line);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;background:var(--c-bg)}
.fb-item.down{border-left:3px solid var(--st-bad-fill)}
.fb-item.up{border-left:3px solid var(--st-good-fill)}
.fb-item-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.fb-item-top .who{font-size:13px;font-weight:500;color:var(--c-ink)}
.fb-item-top .when{font-size:11.5px;color:var(--c-ink-faint);font-family:var(--f-mono)}
.fb-item .msg{font-size:14px;color:var(--c-ink);line-height:1.6;margin:8px 0}
.fb-item .ctx{font-size:12px;color:var(--c-ink-faint);font-family:var(--f-mono);word-break:break-word;margin:8px 0 0}
.fb-detail{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px;align-items:start}
.fb-detail img{width:100%;border-radius:var(--radius);background:var(--c-media-bg);display:block}
@media(max-width:640px){
  .fbrow{flex-direction:column;align-items:stretch}
  .fbrow .fbq{margin-bottom:4px}
  .fb-detail{grid-template-columns:1fr}
}