/* ============================================================
   Chalk — Dr. Evil's Pick 'Em design system
   Light, crisp, high-legibility. Ported from the approved
   prototype (artifact 552e6824) into a real responsive stylesheet.
   ============================================================ */

:root{
  --bg:#f5f7f9;
  --ink:#131a22;
  --ink-soft:#0e1620;
  --panel:#fff;
  --line:#e7ecf1;
  --line-2:#eef2f6;
  --line-3:#e6ebf0;
  --accent:#1653e6;
  --accent-soft:#eaf1ff;
  --muted:#5b6979;
  --spread-ink:#48566a;
  --cur-ink:#5a6b7d;
  --bb:#e8a400;
  --bb-ink:#c98700;
  --ou:#6d4aff;
  --good:#12a150;
  --prog-bg:#e2e8ee;
  --up:#ff7a45;
  --dn:#3aa0ff;
  --danger:#d92d20;
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(16,30,50,.04);
  --maxw:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,ui-sans-serif,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  font-size:15px;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--accent)}
button,input,select{font:inherit}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:30;
  background:rgba(245,247,249,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line-3);
  padding:12px 16px;
}
.top-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:-.02em;font-size:16px;color:var(--ink-soft);text-decoration:none}
.brand .em{color:var(--accent)}
.clock{color:var(--accent);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.clock.past{color:var(--danger)}
.sub{max-width:var(--maxw);margin:2px auto 0;font-size:12px;color:var(--muted)}
.nav{display:flex;gap:14px;align-items:center;font-size:13px;font-weight:650}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover,.nav a.on{color:var(--accent)}
.nav form{display:inline}
.linkbtn{background:none;border:0;color:var(--muted);cursor:pointer;font-weight:650;font-size:13px;padding:0}
.linkbtn:hover{color:var(--accent)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 13px 190px}
@media (min-width:900px){ .wrap{padding-bottom:44px} }

/* ---------- staging banner ---------- */
.staging{
  background:#fff7e6;border-bottom:1px solid #f0dcb0;color:#6b4e00;
  font-size:12.5px;padding:8px 16px;
}
.staging .in{max-width:var(--maxw);margin:0 auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.staging b{color:#4a3600}
.staging form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.staging select,.staging input[type=datetime-local]{
  border:1px solid #e3cf9f;background:#fff;border-radius:8px;padding:4px 7px;font-size:12.5px;color:#4a3600;
}
.staging button{
  border:1px solid #e3cf9f;background:#fff;border-radius:8px;padding:4px 10px;
  font-size:12.5px;font-weight:700;color:#6b4e00;cursor:pointer;
}
.staging button:hover{background:#fffdf7}

/* ---------- flash ---------- */
.flash{
  max-width:var(--maxw);margin:12px auto 0;border-radius:var(--radius-sm);
  padding:11px 14px;font-size:13.5px;font-weight:650;
}
.flash.ok{background:#e8f7ef;border:1px solid #bfe6d2;color:#0b6b38}
.flash.err{background:#fdecea;border:1px solid #f5c4bf;color:#a4231a}
.flash ul{margin:6px 0 0;padding-left:18px;font-weight:600}

/* ---------- game card ---------- */
.games{display:flex;flex-direction:column}
.card{
  margin:11px 0;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:6px 9px;box-shadow:var(--shadow);
}
.card.locked{background:#fbfcfd}
.card.nl{opacity:.72}

.team{
  display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none;
  padding:9px 8px;border-radius:var(--radius-sm);border:1.5px solid transparent;
  transition:background .13s,border-color .13s,color .13s;
}
.team:hover{background:#f2f5f8}
.team.picked{background:var(--accent-soft);border-color:var(--accent)}
.team.picked .spread{color:var(--accent)}
.team input{position:absolute;opacity:0;width:0;height:0}
.card.locked .team,.card.nl .team{cursor:default}
.card.locked .team:hover,.card.nl .team:hover{background:transparent}
.card.locked .team.picked:hover{background:var(--accent-soft)}

.logo{
  width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:10.5px;color:#fff;letter-spacing:-.02em;
}
.tname{display:flex;flex-direction:column;line-height:1.14;min-width:0}
.tname .c{font-size:11px;color:var(--muted)}
.tname .n{font-weight:700;font-size:15px}
.spread{
  margin-left:auto;font-variant-numeric:tabular-nums;font-weight:800;flex:none;
  display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--spread-ink);
}
.lk{font-size:10px;color:var(--accent)}
.vs{font-size:10.5px;letter-spacing:.14em;color:var(--muted);padding:2px 8px;text-transform:uppercase}

.linestrip{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:11.5px;padding:9px 8px 3px;font-variant-numeric:tabular-nums;
}
.linestrip .lab{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--muted);opacity:.8;flex:none}
.linestrip .cur{text-align:right;color:var(--cur-ink)}
.mv{font-weight:800;font-size:10.5px}
.mv.up{color:var(--up)}
.mv.dn{color:var(--dn)}
.mv.fl{opacity:.4}

.rowmeta{display:flex;align-items:center;gap:8px;padding:4px 8px 6px;flex-wrap:wrap}
.toolbar{display:flex;align-items:center;gap:8px;margin-left:auto}
.toggle{
  border:1px solid #dbe2ea;background:transparent;color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;
  font-size:11.5px;font-weight:700;transition:background .13s,border-color .13s,color .13s;
}
.toggle:hover{background:#f2f5f8}
.toggle.bb.on{background:var(--bb);border-color:var(--bb);color:#fff}
.toggle[disabled]{opacity:.45;cursor:not-allowed}
.ou{display:inline-flex;border-radius:999px;overflow:hidden;border:1px solid #dbe2ea}
.ou button{
  border:0;background:transparent;color:var(--muted);font-weight:700;font-size:11px;
  padding:5px 10px;cursor:pointer;transition:background .13s,color .13s;
}
.ou button.on{background:var(--ou);color:#fff}
.ou button[disabled]{opacity:.45;cursor:not-allowed}
.pill{
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  padding:3px 8px;border-radius:999px;background:#eef2f6;color:var(--muted);
}
.pill.lockpill{background:#eef2f6;color:var(--muted)}
.pill.nlpill{background:#f4f0ff;color:#5b45c9}

/* ---------- sticky summary slip ---------- */
.slip{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(8px);
  border-top:1px solid var(--line-3);
  padding:12px 15px calc(14px + env(safe-area-inset-bottom));
}
.slip-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:11px}
.prog{height:6px;border-radius:99px;overflow:hidden;background:var(--prog-bg)}
.prog .fill{display:block;height:100%;width:0;border-radius:99px;background:var(--good);transition:width .22s ease}
.statrow{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{display:flex;flex-direction:column;gap:3px;padding:0 8px;text-align:center;min-width:0}
.stat+.stat{border-left:1px solid var(--line-3)}
.stat .lab{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);opacity:.85}
.stat .val{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .val b{font-size:16px}
.stat .val.unset{opacity:.45;font-weight:700}
.picks.done{color:var(--good)}
.bbval.set{color:var(--bb-ink)}
.ouval.set{color:var(--ou)}
.cta{
  width:100%;font-weight:800;border:0;border-radius:var(--radius-sm);padding:12px;
  font-size:14px;cursor:pointer;background:var(--accent);color:#fff;transition:opacity .15s;
}
.cta:not(.ready){opacity:.5}
.cta[disabled]{cursor:not-allowed}

@media (min-width:900px){
  .slip{position:sticky;bottom:16px;left:auto;right:auto;border:1px solid var(--line);
        border-radius:var(--radius);box-shadow:0 10px 30px -18px rgba(16,30,50,.35);margin-top:18px}
  .slip-in{flex-direction:row;align-items:center;gap:18px}
  .slip .prog{flex:1;min-width:120px}
  .statrow{flex:2}
  .cta{width:auto;min-width:190px;flex:none}
}

/* ---------- login ---------- */
.auth{max-width:390px;margin:0 auto;padding:38px 18px 60px}
.auth h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;text-align:center}
.auth .lede{color:var(--muted);font-size:13.5px;text-align:center;margin:0 0 22px}
.auth .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.field input{
  border:1px solid #dbe2ea;border-radius:var(--radius-sm);padding:11px 12px;font-size:15px;
  background:#fff;color:var(--ink);
}
.field input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.auth .cta{margin-top:4px}
.auth .foot{text-align:center;color:var(--muted);font-size:12.5px;margin-top:16px;line-height:1.6}
.badge{
  display:inline-block;background:var(--accent-soft);color:var(--accent);border-radius:999px;
  padding:3px 9px;font-size:11px;font-weight:800;letter-spacing:.04em;
}

/* ---------- misc ---------- */
.sectionhead{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:16px 2px 2px;flex-wrap:wrap;
}
.sectionhead h2{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0}
.sectionhead .meta{font-size:12.5px;color:var(--muted)}
.empty{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center;color:var(--muted)}
.legend{font-size:12px;color:var(--muted);text-align:center;margin:14px 4px 0;line-height:1.7}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}