/* ============================================================
   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}

/* ---------- add-to-home-screen strip ---------- */
.installbar{
  max-width:var(--maxw);margin:12px auto 0;border-radius:var(--radius-sm);
  padding:10px 12px;font-size:13px;font-weight:600;line-height:1.45;
  background:#eef3fb;border:1px solid #cfdcf0;color:#1f3a63;
  display:flex;align-items:center;gap:9px;
}
/* display:flex above outranks the UA [hidden] rule, so say it again. */
.installbar[hidden]{display:none}
.installbar .ico{font-size:16px;line-height:1}
.installbar .msg{flex:1;min-width:0}
.installbar b{font-weight:800}
.installbar .go{
  flex:none;border:0;border-radius:999px;padding:7px 15px;cursor:pointer;
  background:var(--ink);color:#fff;font:inherit;font-weight:750;
}
.installbar .go:disabled{opacity:.55;cursor:default}
/* Big enough to hit with a thumb without crowding the text. */
.installbar .x{
  flex:none;border:0;background:none;cursor:pointer;color:#5b7196;
  font-size:22px;line-height:1;padding:0 2px;width:28px;height:28px;
}
.installbar .x:hover{color:#1f3a63}

/* ---------- 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}
/* The radio is invisible, so its focus ring is too — put one on the row. */
.team:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.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}
/* Mid-submit: stay solid and readable rather than fading out like a dead
   button, and show the wait in the cursor too. */
.cta.working,.cta.working[disabled],
.btn.working,.btn.working[disabled]{opacity:1;cursor:progress}
.cta.working::after,
.btn.working::after{
  content:"";display:inline-block;width:.7em;height:.7em;margin-left:.55em;
  vertical-align:-1px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:ctaspin .6s linear infinite;
}
@keyframes ctaspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cta.working::after,.btn.working::after{animation:none}}

@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}}

/* ============ iOS standalone: clear the status bar ============
   Added to the Home Screen, iOS runs the site with viewport-fit=cover and a
   translucent status bar, so the page is drawn UNDER the clock and the Dynamic
   Island. Nothing consumed the safe area, so the title sat behind them.

   The padding goes on .top rather than its .chrome wrapper so the header's own
   translucent background paints the inset strip; on the wrapper it would be a
   transparent gap with the page scrolling through it.

   env() is 0 everywhere else, so this is inert in a browser and on desktop. */
.top{
  padding-top:calc(12px + env(safe-area-inset-top));
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}
/* Landscape on a notched phone puts the island on one side. */
.mainnav-in{
  padding-left:max(10px, env(safe-area-inset-left));
  padding-right:max(10px, env(safe-area-inset-right));
}
.wrap{
  padding-left:max(13px, env(safe-area-inset-left));
  padding-right:max(13px, env(safe-area-inset-right));
}

/* ---- show/hide password ---- */
.pwwrap{position:relative;display:block}
.pwwrap input{width:100%;padding-right:44px}
.pweye{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  border:0;background:none;padding:7px;margin:0;cursor:pointer;
  color:var(--muted);border-radius:8px;display:grid;place-items:center;line-height:0;
}
.pweye:hover{color:var(--accent);background:#f2f5f8}
.pweye svg{width:18px;height:18px;display:block}

/* Signed out there is no header, so nothing else consumes the safe area and
   the title sits under the status bar in the installed app. */
.auth{padding-top:calc(38px + env(safe-area-inset-top))}