/* Ballparked design system. Generated by build/build_site.py from
   the Numbers page -- edit there, not here. */
:root{
    --field:#0F1A16;
    --panel:#162420;
    --rule:#28403A;
    --chalk:#EEE9DC;
    --chalk-dim:#8FA39B;
    --flare:#FF7A3D;
    --brass:#D8B36A;
    --under:#6FA8DC;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;background:var(--field);color:var(--chalk);}
  body{
    font-family:'Bricolage Grotesque', system-ui, sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
    padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  }
  .num, input, .mono{font-family:'JetBrains Mono', monospace; font-variant-numeric:tabular-nums;}

  #app{width:100%;max-width:440px;padding:16px 16px 22px;}
  @supports (height: 100dvh){ body{min-height:100dvh;} }

  header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
  .wordmark{text-decoration:none;color:inherit;font-weight:700;font-size:22px;letter-spacing:-0.02em;}
  .hright{display:flex;align-items:center;gap:10px;}
  .backbtn{display:inline-flex;align-items:center;gap:4px;background:var(--panel);border:1px solid var(--rule);color:var(--chalk-dim);font-family:inherit;font-size:12px;padding:6px 11px 6px 8px;border-radius:999px;cursor:pointer;}
  .backbtn:active{transform:scale(.97);}
  .wordmark span{color:var(--flare);}
  .daytag{font-size:12px;color:var(--chalk-dim);}

  .pips{display:flex;gap:6px;margin-bottom:14px;}
  .pip{flex:1;height:5px;border-radius:3px;background:var(--rule);}
  .pip.done{background:var(--brass);}
  .pip.now{background:var(--chalk-dim);}

  .panel{
    background:var(--panel);
    border-radius:22px;
    padding:22px 18px;
    min-height:400px;
    box-shadow:0 20px 50px -30px rgba(0,0,0,.8);
    display:flex;flex-direction:column;
  }

  .qnum{font-size:12px;color:var(--chalk-dim);margin-bottom:12px;}
  .question{font-size:22px;line-height:1.25;font-weight:500;margin-bottom:18px;}

  .inputwrap{position:relative;margin-bottom:8px;}
  .unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--chalk-dim);pointer-events:none;}
  input{
    width:100%;
    background:var(--field);
    border:1px solid var(--rule);
    border-radius:14px;
    padding:16px 14px;
    padding-right:90px;
    color:var(--chalk);
    font-size:22px;
    font-weight:500;
  }
  input:focus{outline:none;border-color:var(--brass);}
  input::placeholder{color:var(--rule);}
  .err{font-size:13px;color:var(--flare);min-height:18px;}

  .btn{
    margin-top:auto;
    background:var(--chalk);
    color:var(--field);
    border:none;border-radius:999px;
    padding:15px;
    font-family:inherit;font-weight:700;font-size:15px;
    cursor:pointer;
  }
  .btn:active{transform:scale(.985);}
  .btn.quiet{background:transparent;color:var(--chalk-dim);border:1px solid var(--rule);margin-top:10px;font-weight:500;}
  .btn.flare{background:var(--flare);color:#1A0C05;}

  /* ---------- landing ---------- */
  .hero{font-size:32px;line-height:1.05;font-weight:700;letter-spacing:-0.02em;margin:4px 0 12px;}
  .lede{color:var(--chalk-dim);font-size:15px;line-height:1.5;margin-bottom:auto;}
  .streak{font-size:13px;color:var(--brass);margin-bottom:14px;text-align:center;}
  .panel.landing{min-height:0;}
  .hero{font-size:32px;margin:2px 0 10px;}
  .lede{margin-bottom:16px;font-size:14px;}
  .legend{display:flex;flex-direction:column;gap:7px;margin:2px 0 auto;}
  .band{
    display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;
    background:var(--field);border-radius:13px;padding:9px 13px;
    border-left:4px solid var(--c);
  }
  .band .emoji{font-size:25px;line-height:1;text-align:center;}
  .band .bl{font-size:14px;font-weight:500;}
  .band .bsub{display:block;font-size:11px;color:var(--chalk-dim);font-weight:400;}
  .callout{text-align:center;font-weight:700;font-size:19px;margin:2px 0 6px;min-height:23px;}
  @keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
  .pop{animation:pop .32s ease-out;}
  @keyframes crackring{0%{r:3;opacity:.9}100%{r:22;opacity:0}}
  .crackring{animation:crackring .4s ease-out forwards;}
  @keyframes splashring{0%{r:4;opacity:.9}100%{r:26;opacity:0}}
  .splashring{animation:splashring .6s ease-out forwards;}
  .band .bp{font-size:21px;font-weight:700;color:var(--c);}

  /* ---------- reveal ---------- */
  .range{position:relative;height:120px;margin:6px 0 4px;overflow:visible;}
  .range.tall{height:auto;aspect-ratio:3/2;margin:6px -4px 10px;}
  .range svg{width:100%;height:100%;overflow:visible;}
  
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-bottom:6px;}
  .stat .k{font-size:11px;color:var(--chalk-dim);margin-bottom:3px;}
  .stat .v{font-size:19px;font-weight:500;}
  .stat .v.big{font-size:30px;color:var(--brass);}
  .src{font-size:11px;color:var(--chalk-dim);margin:10px 0 14px;}

  /* ---------- final ---------- */
  .total{font-size:62px;font-weight:700;line-height:1;text-align:center;margin:18px 0 2px;color:var(--brass);}
  .of{text-align:center;color:var(--chalk-dim);font-size:13px;margin-bottom:16px;}
  .grid{text-align:center;font-size:30px;letter-spacing:4px;margin-bottom:18px;}
  .recap{border-top:1px solid var(--rule);}
  /* everything open: tighten so all five fit in one screenshot */
  .recap.allopen .rrow summary{padding:8px 2px;}
  .recap.allopen .rbody{padding:0 2px 10px 33px;}
  .recap.allopen .rline{padding:2px 0;}
  .recap.allopen .rsrc{display:none;}
  .rules-link{background:none;border:none;color:var(--chalk-dim);font-family:inherit;font-size:12px;text-decoration:underline;cursor:pointer;padding:0;}
  .sheet{position:fixed;inset:0;background:rgba(8,14,12,.72);display:flex;align-items:flex-end;justify-content:center;z-index:20;}
  .sheet-inner{background:var(--panel);width:100%;max-width:440px;border-radius:22px 22px 0 0;padding:26px 22px 30px;max-height:88vh;overflow:auto;}
  .sheet h3{margin:0 0 6px;font-size:22px;font-weight:700;}
  .sheet p{color:var(--chalk-dim);font-size:14px;line-height:1.5;margin:0 0 18px;}
  .countdown{text-align:center;color:var(--chalk-dim);font-size:12px;margin-top:14px;}
  .countdown b{color:var(--brass);font-weight:500;}
  .bandbar{display:flex;justify-content:space-between;gap:5px;margin:10px 0 2px;}
  .bandbar div{flex:1;text-align:center;background:var(--field);border-radius:10px;padding:6px 2px;}
  .bandbar span{font-size:17px;display:block;}
  .bandbar b{font-size:13px;font-weight:700;display:block;margin-top:1px;}
  .statgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);text-align:center;}
  .sv{font-size:19px;font-weight:700;}
  .sk{font-size:10px;color:var(--chalk-dim);margin-top:2px;}
  .recaphead{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-bottom:6px;font-size:11px;color:var(--chalk-dim);}
  .togglerow{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:12px;color:var(--chalk-dim);}
  .switch{position:relative;width:40px;height:23px;background:var(--field);border:1px solid var(--rule);border-radius:999px;cursor:pointer;padding:0;flex:none;}
  .switch i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--chalk-dim);transition:left .16s ease,background .16s ease;}
  .switch.on{background:rgba(216,179,106,.22);border-color:var(--brass);}
  .switch.on i{left:20px;background:var(--brass);}
  .rrow{border-bottom:1px solid var(--rule);}
  .rrow:last-of-type{border-bottom:none;}
  .rrow summary{
    display:grid;grid-template-columns:24px 1fr auto 14px;align-items:center;gap:9px;
    padding:11px 2px;cursor:pointer;list-style:none;font-size:13px;
  }
  .rrow summary::-webkit-details-marker{display:none;}
  .rrow .rem{font-size:17px;line-height:1;}
  .rrow .rq{color:var(--chalk-dim);line-height:1.3;text-align:left;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .rrow .rpt{font-weight:700;font-size:15px;}
  .rrow .chev{color:var(--chalk-dim);transition:transform .18s ease;}
  .rrow[open] .chev{transform:rotate(180deg);}
  .rrow[open] .rq{-webkit-line-clamp:unset;color:var(--chalk);}
  .rbody{padding:2px 2px 14px 33px;}
  .rline{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;font-size:13px;}
  .rline span{color:var(--chalk-dim);font-size:11px;}
  .rline b{font-weight:500;}
  .rsrc{font-size:10px;color:var(--chalk-dim);margin-top:7px;opacity:.75;}

  @keyframes thunk{0%{transform:translateX(0)}35%{transform:translateX(-3px)}70%{transform:translateX(1.5px)}100%{transform:translateX(0)}}
  .thunk{animation:thunk .22s ease-out;}
  @keyframes ring{0%{r:6;opacity:.9}100%{r:38;opacity:0}}
  .ring{animation:ring .7s ease-out forwards;}
  @media (prefers-reduced-motion: reduce){.thunk,.ring{animation:none;}}