/* ============================================================================
   base.css — slam-mavs shared responsive base (imported by all 7 pages)
   ONE token+layout+component layer. Three tiers ONLY:
     phone   <640
     tablet  640–1024
     desktop >1024
   Inherits the existing dark :root palette verbatim; NO new colors.
   ========================================================================== */

:root{
  /* ---- canonical palette (authoritative; reconciles arc/shotcard drift) ---- */
  --bg:#0d0f12;
  --panel:#15181d;
  --line:#23272e;
  --ink:#e8eaed;
  --mut:#878d96;
  --blue:#0064b1;          /* brand blue (Send buttons / Catapult-cause) */
  --blue2:#1d8fef;         /* links / hover / Speed / interactive          */
  --green:#34d399;         /* CV-measured · made · trusted-good            */
  --amber:#f5a623;         /* release / ball · SLAM-Vision estimate · awaiting */
  --cyan:#22d3ee;          /* trusted primary measurement (knee, mechanics) */
  --red:#f87171;           /* abstained-implausible · not-connected · 0-state */
  --gray:#3a4049;
  --track:#5a6470;         /* arc full-track points                        */

  /* ---- layout tokens ---- */
  --hdr-pad:13px 20px;
  --gap:20px;
  --radius:8px;

  /* ---- fluid type scale (hierarchy_system) ---- */
  --t-primary:clamp(28px,6vw,40px);   /* THE one primary metric/verdict per view */
  --t-secondary:clamp(20px,4vw,26px); /* the demoted second hero                 */
  --t-section:11px;                   /* panel/section titles — quiet on purpose */
  --t-body:12.5px;                    /* readable prose / notes                  */
  --t-data:12px;                      /* dense table / kv rows                   */
  --t-micro:10px;                     /* tags / chips / joint labels — FLOOR     */
}

/* type bumps one notch on tablet+ */
@media(min-width:640px){
  :root{ --t-body:13px; --t-data:12.5px; }
}

*{box-sizing:border-box}

html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  line-height:1.45;
}

/* viewport-fit is structural, never a magic number:
   body is a flex COLUMN; the header is sticky chrome; the content owns scroll. */
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;            /* guarantee no full-page horizontal scroll */
}

a{color:var(--blue2);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------------------------------------------------------------------------
   SHARED STICKY HEADER + NAV (added to ALL pages so the 7 read as one product)
   --------------------------------------------------------------------------- */
header{
  position:sticky;
  top:0;
  z-index:30;
  flex:0 0 auto;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;              /* nav can wrap on phone WITHOUT breaking math   */
  padding:var(--hdr-pad);
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
header h1{font-size:15px;font-weight:600;letter-spacing:.05em;margin:0}
header .sub{font-size:var(--t-data);color:var(--mut);min-width:0;overflow-wrap:anywhere}
header nav{
  margin-left:auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  font-size:var(--t-data);
}
header nav a{color:var(--blue2)}
header nav a:hover{color:var(--ink);text-decoration:none}
header nav a[aria-current="page"]{color:var(--ink);text-decoration:none}

/* content region: flex:1 so it fills under the sticky header */
.content,.wrap{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  margin:0 auto;
  padding:22px 20px 40px;
  max-width:var(--wrap-max,1100px);
}

/* ---------------------------------------------------------------------------
   STAGE — desktop = clamp viewer column + fluid second column;
            <1024 = single column (canvas scales to width:100%).
   Pages tune the viewer column via --stage-col.
   --------------------------------------------------------------------------- */
.stage{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
  align-items:start;
}
@media(min-width:1024px){
  .stage{ grid-template-columns:var(--stage-col,clamp(360px,40vw,640px)) 1fr; }
}

/* canvas viewer — full container width; the fixed-coord canvas scales safely */
.canvas-card{
  background:#000;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  line-height:0;
  width:100%;
  max-width:var(--canvas-max,none);
}
canvas{width:100%;height:auto;display:block}

/* ---------------------------------------------------------------------------
   TRANSPORT — flex row on desktop; wraps to 2 rows on phone
   (controls row → full-width slider row → timestamp). ALL controls retained.
   --------------------------------------------------------------------------- */
.transport{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.transport .ts,.ts{
  font-size:var(--t-data);
  color:var(--mut);
  text-align:right;
  white-space:nowrap;
  margin-left:auto;            /* push timestamp right on desktop */
}
input[type=range]{
  flex:1 1 180px;
  min-width:120px;
  accent-color:var(--blue2);
  height:4px;
}
@media(max-width:639.98px){
  .transport input[type=range]{flex:1 1 100%;min-width:0;order:2}
  .transport .ts{flex:1 1 100%;order:3;margin-left:0;text-align:left}
}

/* ---------------------------------------------------------------------------
   BUTTONS / CONTROLS
   --------------------------------------------------------------------------- */
button{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:6px;
  padding:7px 13px;
  font:inherit;
  font-size:var(--t-data);
  cursor:pointer;
}
button:hover{border-color:var(--blue2)}
button.on{border-color:var(--cyan);color:var(--cyan)}

/* ---------------------------------------------------------------------------
   PANELS / CARDS / ROWS / HEROES
   --------------------------------------------------------------------------- */
.panel,.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
}
.card{margin-bottom:14px}

.lab{
  font-size:var(--t-section);
  color:var(--mut);
  letter-spacing:.08em;
  text-transform:uppercase;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.hero{font-size:var(--t-section);color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
.v{font-weight:600;line-height:1.05;margin:6px 0 2px}
.v small{font-size:.42em;color:var(--mut);font-weight:400}

.rows{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  font-size:var(--t-data);
  border-bottom:1px solid #1b1f25;
}
.row:last-child{border-bottom:none}
.row span:first-child{color:var(--mut)}
.row.flight{color:var(--blue2)}

/* ---------------------------------------------------------------------------
   LEGEND swatch row (arc / shotcard / validation / browser)
   --------------------------------------------------------------------------- */
.legend{
  display:flex;
  gap:15px;
  margin-top:10px;
  font-size:var(--t-micro);
  color:var(--mut);
  flex-wrap:wrap;
}
.legend i{
  display:inline-block;
  width:16px;height:3px;
  border-radius:2px;
  vertical-align:middle;
  margin-right:5px;
}

/* ---------------------------------------------------------------------------
   .chip — the ONE unified status component (replaces .badge/.tag/.pill).
   .badge kept as an alias so existing JS (className='badge ok'…) still styles.
   min 10px floor for mobile legibility.
   --------------------------------------------------------------------------- */
.chip,.badge{
  display:inline-block;
  font-size:var(--t-micro);
  line-height:1.4;
  padding:2px 8px;
  border-radius:10px;
  letter-spacing:.06em;
  border:1px solid var(--line);
  color:var(--mut);
  white-space:nowrap;
}
.chip.live,.chip.demo,.badge.live,.badge.demo{
  color:var(--cyan);background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.4)}
.chip.awaiting,.chip.vis,.badge.awaiting,.badge.vis{
  color:var(--amber);background:rgba(245,166,35,.12);border-color:rgba(245,166,35,.4)}
.chip.trusted,.chip.made,.chip.ok,.badge.trusted,.badge.made,.badge.ok{
  color:var(--green);background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.4)}
.chip.abstained,.chip.missed,.chip.no,.badge.abstained,.badge.missed,.badge.no{
  color:var(--red);background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.4)}

/* ---------------------------------------------------------------------------
   .provlegend — persistent provenance key (sticky sub-header on data-dense
   pages: browser biomech / analysis / unified). One line; redundant w/ footnote.
   --------------------------------------------------------------------------- */
.provlegend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  align-items:center;
  font-size:var(--t-micro);
  color:var(--mut);
  padding:7px 0;
}
.provlegend b{font-weight:600}
.provlegend .k{display:inline-flex;align-items:center;gap:5px}
.provlegend .k::before{content:"";width:9px;height:9px;border-radius:50%;display:inline-block}
.provlegend .k.cv::before{background:var(--green)}
.provlegend .k.vis::before{background:var(--amber)}
.provlegend .k.gem::before{background:var(--blue2)}

/* ---------------------------------------------------------------------------
   FOOTER (shared methodology prose)
   --------------------------------------------------------------------------- */
footer{
  margin-top:22px;
  font-size:var(--t-micro);
  color:var(--mut);
  border-top:1px solid var(--line);
  padding-top:14px;
  line-height:1.6;
  overflow-wrap:anywhere;
}

/* global min-width:0 guard for flex/grid children that hold wrapping text */
.stage>*{min-width:0}

/* ---------------------------------------------------------------------------
   APP-SHELL MODE — the consolidated Shot Browser is viewport-LOCKED: the page
   itself never scrolls, only the regions inside it do. Scoped to .appshell so
   the other (document-scroll) pages are completely unaffected. Uses 100dvh so
   mobile browser chrome doesn't clip the last row.
   --------------------------------------------------------------------------- */
html.appshell{height:100dvh;overflow:hidden}
body.appshell{height:100dvh;min-height:0;overflow:hidden}