/* Better Athlete — Signal Screen (vanilla). Canon V1.4 dark surface.
   Load Hanken Grotesk + Space Mono in the host page. */
.ba-phone {
  position: relative; width: 366px; height: 792px; border-radius: 46px; overflow: hidden;
  background: #0b0e13; border: 1px solid #20262e; box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  display: flex; flex-direction: column;
  color: #f4f2ee; font-family: 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
.ba-statusbar { display:flex; align-items:center; justify-content:space-between; padding:15px 28px 0; flex:none; }
.ba-statusbar b { font-size:13px; font-weight:700; }
.ba-batt { display:inline-block; width:22px; height:11px; border:1.5px solid #f4f2ee; border-radius:3px; position:relative; }
.ba-batt::after { content:''; position:absolute; top:2px; left:2px; bottom:2px; right:7px; background:#f4f2ee; border-radius:1px; }
.ba-titlebar { display:flex; align-items:center; justify-content:center; padding:14px 22px 6px; flex:none; }
.ba-titlebar span { font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; }
.ba-scroll { flex:1; overflow-y:auto; padding:4px 18px 20px; }
.ba-hero { border-radius:20px; padding:8px 0 14px; margin:0 -14px; display:flex; flex-direction:column; align-items:center; margin-bottom:6px; }
.ba-hero h2 { font-size:16px; font-weight:800; letter-spacing:-0.01em; margin:6px 0 0; text-align:center; }
.ba-hero p { font-size:11.5px; line-height:1.45; color:#9aa0a8; margin:4px 0 0; text-align:center; }
.ba-stats { display:flex; gap:8px; margin:12px 0 16px; }
.ba-stat { flex:1; border-radius:11px; padding:10px 12px; text-align:center; }
.ba-stat .big { font-family:'Space Mono',monospace; font-size:17px; font-weight:700; }
.ba-stat .lab { font-family:'Space Mono',monospace; font-size:8.5px; letter-spacing:0.06em; color:#5c6b62; }
.ba-mlabel { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:#5c6b62; margin:0 0 8px; }
.ba-measures { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.ba-measure { border:1px solid #161d24; border-radius:10px; background:#0c1116; padding:9px 11px; }
.ba-measure .row { display:flex; align-items:center; gap:9px; }
.ba-chip { width:22px; height:22px; border-radius:6px; font-family:'Space Mono',monospace; font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.ba-measure .name { font-size:12px; font-weight:700; color:#e9ebee; line-height:1.15; }
.ba-measure .age { font-family:'Space Mono',monospace; font-size:8.5px; color:#5c6b62; }
.ba-track { flex:none; width:64px; height:5px; border-radius:99px; background:#141b18; overflow:hidden; position:relative; }
.ba-track > i { position:absolute; top:0; bottom:0; left:0; border-radius:99px; }
.ba-measure .score { text-align:right; flex:none; width:34px; }
.ba-measure .score b { font-family:'Space Mono',monospace; font-size:14px; font-weight:700; color:#f4f2ee; line-height:1; display:block; }
.ba-measure .score em { font-family:'Space Mono',monospace; font-size:8px; font-style:normal; }
.ba-cta { width:100%; border:none; border-radius:14px; padding:14px; font-family:'Hanken Grotesk'; font-size:15px; font-weight:800; cursor:pointer; }
.ba-route { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.06em; color:#4f5a52; padding-left:4px; }
/* Explainer — "how this works" (toggle) */
.ba-explain-toggle { display:block; margin:0 auto 12px; background:none; border:1px solid #232b34; color:#9aa0a8; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; padding:7px 15px; border-radius:99px; cursor:pointer; }
.ba-explain-toggle:hover { border-color:#33404c; color:#c6ccd3; }
.ba-explain { display:none; border:1px solid #161d24; background:#090d12; border-radius:14px; padding:13px 14px; margin:0 0 16px; }
.ba-explain.is-open { display:block; }
.ba-exp-head { font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; margin-bottom:8px; }
.ba-exp-row { display:flex; gap:10px; padding:8px 0; border-top:1px solid #12181e; }
.ba-exp-row:first-of-type { border-top:none; padding-top:2px; }
.ba-exp-k { flex:none; width:92px; font-family:'Space Mono',monospace; font-size:8px; letter-spacing:0.06em; color:#5c6b62; padding-top:2px; line-height:1.35; }
.ba-exp-v { flex:1; min-width:0; font-size:11.5px; line-height:1.5; color:#cdd2d8; }
.ba-exp-mlabel { font-family:'Space Mono',monospace; font-size:8.5px; letter-spacing:0.14em; text-transform:uppercase; color:#5c6b62; margin:13px 0 4px; }
.ba-exp-m { display:flex; gap:9px; align-items:flex-start; padding:6px 0; }
.ba-exp-m > div { min-width:0; }
.ba-exp-m b { display:block; font-size:11.5px; color:#e9ebee; line-height:1.25; }
.ba-exp-m span { display:block; font-size:10.5px; color:#8b93a0; line-height:1.4; margin-top:1px; }
.ba-exp-sig { margin-top:14px; padding-top:12px; border-top:1px solid #1a222b; }
.ba-exp-sig:first-of-type { margin-top:8px; }
.ba-top { width:100%; margin-top:16px; border:1px solid #223028; border-radius:14px; background:#0c1116; color:#9aa0a8; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; padding:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:border-color .15s, color .15s; }
.ba-top:hover { border-color:#3a4a3f; color:#f4f2ee; }
.ba-top-arrow { font-size:14px; line-height:1; }
/* Combined view — categories */
.ba-cats { display:flex; flex-direction:column; gap:16px; margin-top:14px; }
.ba-cat-head { display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.ba-cat-dot { width:9px; height:9px; border-radius:50%; flex:none; }
.ba-cat-name { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; }
.ba-cat-stat { margin-left:auto; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:0.06em; color:#5c6b62; }
/* React tabbed app shell (App.jsx) */
.ba-app { display:flex; flex-direction:column; height:100vh; height:100dvh; background:#05070a; padding-top:env(safe-area-inset-top); }
.ba-app-stage { flex:1; overflow:hidden; display:flex; align-items:stretch; justify-content:center; }
.ba-app-stage .ba-phone { width:100%; max-width:440px; height:100%; border-radius:0; border:none; box-shadow:none; }
.ba-app-tabs { flex:none; display:flex; background:#0b0e13; border-top:1px solid #182029; padding-bottom:env(safe-area-inset-bottom); }
.ba-app-tab { flex:1; border:none; background:none; padding:11px 0 9px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:#5c6b62; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; }
.ba-app-tab-dot { width:8px; height:8px; border-radius:50%; }
.ba-app-tab[aria-selected="true"] { color:#f4f2ee; }