/* warroom design system v3 — Vercel school: pure black, hairline borders,
   quiet type, one green accent used sparingly. No grids, no scanlines, no
   brackets — restraint is the aesthetic. Standalone; not fdl.css. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root { color-scheme:dark;
  --bg:#000;
  --card:#0a0a0a;
  --card-2:#111;
  --border:#1f1f1f;
  --border-2:#3a3a3a;
  --ink:#ededed;
  --ink-2:#a1a1a1;
  --mute:#666;
  --green:#00dc82;
  --green-bright:#63f8b5;
  --green-dim:rgba(0,220,130,.12);
  --bad:#f75f5f; --warn:#f5a623;
  --good:#00dc82;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:12px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scrollbar-color:#333 var(--bg); }
body { background:var(--bg); color:var(--ink);
  font:14px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding:0 24px; }
::selection { background:var(--green); color:#000; }
a { color:var(--ink); text-decoration:none; transition:color .15s; }
a:hover { color:var(--green); }
.wrap { max-width:1064px; margin:0 auto; }
h1 { font-size:22px; font-weight:600; letter-spacing:-.02em; margin:26px 0 4px; }
.sub { color:var(--ink-2); font-size:14px; margin-bottom:24px; }

/* ---- nav: quiet bar, hairline under ---- */
.nav { display:flex; align-items:center; gap:26px; padding:16px 0;
  border-bottom:1px solid var(--border); margin-bottom:0; }
.nav .brand { font-weight:650; letter-spacing:-.02em; font-size:15.5px; color:var(--ink);
  display:flex; align-items:center; }
.nav .brand::before { content:""; width:9px; height:9px; border-radius:50%; margin-right:9px;
  background:var(--green); box-shadow:0 0 12px rgba(0,220,130,.7); }
.nav .brand b { color:var(--ink); font-weight:650; }
.nav a.link { color:var(--ink-2); font-size:13.5px; font-weight:500; }
.nav a.link:hover, .nav a.link.here { color:var(--ink); }
.nav .spacer { flex:1; }
/* invite chip — you hold keys to a closed door, and it should feel that way */
.nav .invchip { display:inline-flex; align-items:center; margin-right:2px;
  padding:5px 12px; border:1px solid #1e4632; border-radius:99px;
  background:var(--green-dim); font:600 12px var(--sans); color:var(--ink);
  transition:border-color .15s, box-shadow .15s; }
.nav .invchip .spark { color:var(--green); margin-right:6px; font-size:11px;
  text-shadow:0 0 8px rgba(0,220,130,.8); }
.nav .invchip b { color:var(--green); font-weight:700; }
.nav .invchip .invword { color:var(--ink-2); font-weight:500; }
.nav .invchip:hover { border-color:var(--green); color:var(--ink);
  box-shadow:0 0 14px rgba(0,220,130,.25); }
@media (max-width:560px) { .nav .invchip .invword { display:none; } }
.nav .status { display:flex; align-items:center; gap:7px; font:500 11px var(--mono);
  letter-spacing:.08em; color:var(--ink-2); text-transform:uppercase;
  border:1px solid var(--border); border-radius:99px; padding:5px 12px; }
.dotlive { width:6px; height:6px; border-radius:50%; background:var(--green);
  animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.35 } }

/* ---- buttons & inputs ---- */
button, .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--green); border:1px solid var(--green); border-radius:8px; color:#000;
  padding:0 18px; height:40px; font:500 14px var(--sans); cursor:pointer;
  transition:all .15s; white-space:nowrap; }
button:hover, .btn:hover { background:var(--green-bright); border-color:var(--green-bright); }
button.ghost { background:transparent; border-color:var(--border-2); color:var(--ink); }
button.ghost:hover { background:var(--card); border-color:#555; }
button.danger { background:transparent; border-color:var(--border); color:var(--bad); }
button.danger:hover { border-color:var(--bad); background:rgba(247,95,95,.06); }
button:disabled { opacity:.4; cursor:default; }
button.small { height:30px; padding:0 12px; font-size:12.5px; border-radius:6px; }
input, select { background:var(--bg); border:1px solid var(--border-2); border-radius:8px;
  color:var(--ink); padding:0 13px; height:40px; font:14px var(--sans); min-width:0;
  transition:border-color .15s, box-shadow .15s; }
input::placeholder { color:var(--mute); }
input:focus, select:focus { outline:none; border-color:#888;
  box-shadow:0 0 0 3px rgba(255,255,255,.06); }
select { padding-right:30px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row input { flex:1; }

/* ---- cards ---- */
.panel { background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:20px 22px; margin-bottom:14px; transition:border-color .2s; }
.panel:hover { border-color:#2c2c2c; }
.panel h2 { font-size:11px; margin-bottom:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); font-weight:500; font-family:var(--mono); }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th { text-align:left; color:var(--mute); font-weight:500; font-size:11px; text-transform:uppercase;
  letter-spacing:.1em; padding:8px 9px; border-bottom:1px solid var(--border); white-space:nowrap;
  font-family:var(--mono); }
td { padding:9px; border-bottom:1px solid #141414; }
tr:last-child td { border-bottom:none; }
.dim { color:var(--ink-2); } .mute { color:var(--mute); }
.good { color:var(--good); } .bad { color:var(--bad); } .warn { color:var(--warn); }

.chip { font-size:11px; border:1px solid var(--border-2); border-radius:99px; padding:2px 10px;
  color:var(--ink-2); font-family:var(--mono); white-space:nowrap; }
.chip.sleeper { color:#7ec8ff; border-color:rgba(126,200,255,.35); }
.chip.mfl { color:#c7a4ff; border-color:rgba(199,164,255,.35); }
.chip.fleaflicker { color:#ffd27e; border-color:rgba(255,210,126,.35); }

.tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.tabs button { background:transparent; border:1px solid transparent; border-radius:99px;
  color:var(--ink-2); height:32px; padding:0 16px; font:500 13px var(--sans); }
.tabs button:hover { color:var(--ink); background:var(--card-2); border-color:transparent; }
.tabs button.on { color:#000; background:var(--green); border-color:var(--green); }

code, .url { font-family:var(--mono); font-size:12.5px; background:var(--card-2);
  border:1px solid var(--border); border-radius:6px; padding:2px 7px; }
.url { display:block; padding:12px 14px; margin:8px 0; word-break:break-all; user-select:all;
  color:var(--green); background:var(--card); }
.note { font-size:13px; color:var(--ink-2); }
/* the finish-your-subscription bar on /app — one hairline card, green accent */
.billbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:1px solid var(--border); border-left:2px solid var(--green);
  border-radius:var(--r); padding:14px 18px; margin:0 0 18px; }
.billbar .bb-what { font-size:13px; color:var(--ink-2); }
.billbar .bb-what b { color:var(--ink); }
.billbar .bb-price { font-family:var(--mono); font-size:13px; color:var(--green); }
.billbar .spacer { flex:1; }
.billbar button { background:var(--green); color:#000; border:0; font-weight:600;
  font:600 13px var(--sans); padding:8px 16px; border-radius:8px; cursor:pointer; }
.billbar button:disabled { opacity:.6; cursor:default; }
.billbar select { background:var(--card-2); color:var(--ink); border:1px solid var(--border);
  border-radius:8px; padding:7px 10px; font:500 13px var(--sans); cursor:pointer; }
.billbar .bb-intel { display:inline-flex; align-items:center; gap:7px; font-size:13px;
  color:var(--ink-2); cursor:pointer; white-space:nowrap; }
.billbar .bb-intel input { accent-color:var(--green); width:15px; height:15px; cursor:pointer; }
.billbar.ok { border-left-color:var(--green); background:var(--green-dim); }
.err { color:var(--bad); font-size:13px; padding:6px 0; }
.ok { color:var(--good); font-size:13px; padding:6px 0; }
.ok::before { content:"✓ "; }
.q { color:var(--ink-2); font-style:italic; padding:3px 0; }
.q::before { content:"“"; color:var(--mute); font-style:normal; }
.q::after { content:"”"; color:var(--mute); font-style:normal; }
ol { margin-left:20px; } ol li { margin:8px 0; }
ol li::marker { color:var(--green); font-family:var(--mono); }

.loading { color:var(--mute); font-size:13px; padding:10px 0; }
.loading::after { content:""; display:inline-block; width:11px; height:11px; margin-left:8px;
  border:1.5px solid var(--border-2); border-top-color:var(--ink-2); border-radius:50%;
  animation:spin .7s linear infinite; vertical-align:-1px; }
@keyframes spin { to { transform:rotate(360deg) } }

.checklist label { display:flex; gap:10px; align-items:center; padding:9px 4px;
  border-bottom:1px solid #141414; cursor:pointer; font-size:13.5px; }
.checklist label:hover { background:var(--card-2); }
.checklist label:last-child { border-bottom:none; }
.checklist input[type=checkbox] { accent-color:var(--green); width:15px; height:15px;
  min-width:15px; }

.tabpane { display:none; } .tabpane.on { display:block; }

/* ---- landing ---- */
/* The hero owns the first viewport: core copy centered, platform bar anchored
   at the bottom, everything else on scroll. Capped so huge monitors don't get
   a football field of nothing. */
.hero { position:relative; text-align:center; padding:0 10px;
  display:flex; flex-direction:column; align-items:center;
  min-height:min(calc(100vh - 60px), 960px);
  min-height:min(calc(100svh - 60px), 960px); }
.hero-core { margin:auto 0; }
.hero::before { content:""; position:absolute; inset:-40px 0 0; pointer-events:none;
  background:
    linear-gradient(rgba(0,220,130,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,220,130,.045) 1px, transparent 1px),
    radial-gradient(560px 280px at 50% 30%, rgba(0,220,130,.10), transparent 70%);
  background-size:44px 44px, 44px 44px, auto;
  /* the grid dissolves to black well before the viewport edges */
  -webkit-mask-image:radial-gradient(115% 85% at 50% 46%, #000 35%, transparent 92%);
  mask-image:radial-gradient(115% 85% at 50% 46%, #000 35%, transparent 92%); }
.hero > * { position:relative; }
.pill { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border);
  border-radius:99px; padding:6px 14px; font:500 12px var(--mono); color:var(--ink-2);
  letter-spacing:.04em; margin-bottom:28px; background:rgba(10,10,10,.6); }
.pill b { color:var(--green); font-weight:500; }
.hero h1.display { font-size:72px; line-height:1.03; letter-spacing:-.045em; font-weight:650;
  margin:0; }
.hero h1.display .grad { background:linear-gradient(100deg, var(--green) 10%, var(--green-bright) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.lede { color:var(--ink-2); font-size:17px; line-height:1.7; max-width:580px;
  margin:22px auto 32px; }
.lede b { color:var(--ink); font-weight:600; }
.cta-row { display:flex; gap:10px; justify-content:center; }

/* the invite gate — sign-up is code-only for now. Full-screen takeover; the
   radar keeps sweeping behind the scrim. */
.gate { position:fixed; inset:0; z-index:60; display:flex; align-items:center;
  justify-content:center; background:rgba(0,0,0,.78);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.gate[hidden] { display:none; }
.gate-x { position:fixed; top:18px; right:22px; background:transparent; border:none;
  color:var(--ink-2); font:500 12px var(--mono); cursor:pointer; padding:6px; height:auto; }
.gate-x:hover { background:transparent; border:none; color:var(--ink); }
.gate-x span { color:var(--mute); }
.gate-box { text-align:center; width:min(400px, calc(100vw - 48px)); }
.gate-eyebrow { font:500 11px var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); margin-bottom:12px; }
.gate-box h2 { font-size:28px; font-weight:650; letter-spacing:-.02em; margin:0 0 24px;
  color:var(--ink); }
.invite-row { display:flex; gap:8px; }
.invite-row input { flex:1; height:48px; text-align:center;
  font:500 15px var(--mono); letter-spacing:.06em; }
.invite-row button { height:48px; }
.invite-note { margin-top:12px; font:500 11px var(--mono); color:var(--mute);
  letter-spacing:.05em; }
.gate-box.shake { animation:invshake .18s ease 2; }
@keyframes invshake { 0%,100%{transform:none} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* radar — the hero backdrop. Sweep and blips run on one shared clock (--spin):
   a blip at --a degrees lights up the moment the line passes it. */
.hero { overflow:hidden; }
.radar { --rs:min(1080px,170vw); --spin:9s;
  position:absolute; left:50%; top:46%; width:var(--rs); aspect-ratio:1/1;
  margin-left:calc(var(--rs)/-2); transform:translateY(-50%);
  pointer-events:none; z-index:0; }
.radar .disc { position:absolute; inset:0; border-radius:50%;
  -webkit-mask-image:radial-gradient(closest-side, #000 34%, rgba(0,0,0,.5) 68%, transparent 99%);
  mask-image:radial-gradient(closest-side, #000 34%, rgba(0,0,0,.5) 68%, transparent 99%); }
.radar .rings { position:absolute; inset:0; width:100%; height:100%; }
.radar .sweep { position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0 58%, rgba(0,220,130,.03) 74%, rgba(0,220,130,.14) 99.7%, transparent 99.7%);
  animation:sweep var(--spin) linear infinite; }
.radar .sweep::before { content:""; position:absolute; left:calc(50% - .5px); top:0; height:50%;
  width:1px; background:linear-gradient(to bottom, rgba(99,248,181,.85), rgba(0,220,130,.2));
  box-shadow:0 0 14px rgba(0,220,130,.55); }
.radar .core { position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px;
  border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(0,220,130,.8); }
@keyframes sweep { to { transform:rotate(360deg) } }

.blip { position:absolute; left:50%; top:50%; width:0; height:0;
  transform:rotate(calc(var(--a)*1deg)) translateY(calc(var(--rs)*var(--r)/-2))
            rotate(calc(var(--a)*-1deg)); }
.blip i, .blip .b-tag { opacity:0; animation-duration:var(--spin);
  animation-timing-function:linear; animation-iteration-count:infinite;
  animation-delay:calc(var(--a)/360*var(--spin)); }
.blip i { position:absolute; left:-3px; top:-3px; width:6px; height:6px; border-radius:50%;
  background:var(--green-bright); box-shadow:0 0 10px rgba(0,220,130,.9);
  animation-name:blipdot; }
.blip i::after { content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid var(--green); opacity:0;
  animation:blipping var(--spin) linear infinite;
  animation-delay:calc(var(--a)/360*var(--spin)); }
.blip .b-tag { position:absolute; left:11px; top:-11px; white-space:nowrap;
  font:500 10.5px var(--mono); letter-spacing:.05em; color:var(--ink-2);
  background:rgba(5,5,5,.78); border:1px solid rgba(0,220,130,.22); border-radius:6px;
  padding:3px 9px; animation-name:bliptag; }
.blip .b-tag b { color:var(--green); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:9px; margin-right:7px; }
.blip.w .b-tag { left:auto; right:11px; }
@keyframes blipdot  { 0%{opacity:0} 1.2%{opacity:1} 40%{opacity:.7} 58%{opacity:0} 100%{opacity:0} }
@keyframes bliptag  { 0%{opacity:0; transform:translateY(3px)} 3%{opacity:1; transform:none}
                      44%{opacity:1} 56%{opacity:0} 100%{opacity:0} }
@keyframes blipping { 0%{opacity:.8; transform:scale(.3)} 10%{opacity:0; transform:scale(2.4)}
                      100%{opacity:0; transform:scale(2.4)} }
@media (prefers-reduced-motion:reduce){
  .radar .sweep { animation:none; opacity:.3 }
  .blip i, .blip .b-tag, .blip i::after { animation:none; opacity:.55 }
}

/* platform strip — the bar pinned to the bottom of the first viewport */
.platforms { display:flex; gap:10px 26px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin:0 auto 26px; width:100%; }
.platforms .cap { flex-basis:100%; font:500 11px var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mute); margin-bottom:14px; }
.pf { display:flex; align-items:center; gap:8px; font:500 13px var(--sans); color:var(--ink-2); }
.pf img { width:20px; height:20px; border-radius:5px; display:block; filter:saturate(.85); }
.pf.soon { opacity:.45; }
.pf.soon i { font:500 9.5px var(--mono); font-style:normal; color:var(--mute);
  border:1px solid var(--border); border-radius:99px; padding:1px 7px; letter-spacing:.08em;
  text-transform:uppercase; }

/* sections */
.section { padding:72px 0 8px; }
.section .eyebrow { font:500 11px var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); margin-bottom:12px; }
.section h2.title { font-size:34px; font-weight:650; letter-spacing:-.03em; margin:0 0 10px; }
.section .blurb { color:var(--ink-2); font-size:15px; max-width:560px; margin-bottom:32px; }

/* features */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:720px){ .grid3 { grid-template-columns:1fr; } }
.feature { margin-bottom:0; }
.feature .idx { font:500 11px var(--mono); color:var(--mute); letter-spacing:.1em; }
.feature h3 { font-size:15px; font-weight:600; letter-spacing:-.01em; margin:10px 0 7px;
  color:var(--ink); }
.feature p { font-size:13px; color:var(--ink-2); }

/* steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:900px){ .steps { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps { grid-template-columns:1fr; } }
.step { background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:18px; }
.step .n { font:600 12px var(--mono); color:var(--green); }
.step h4 { font-size:14px; font-weight:600; margin:9px 0 5px; letter-spacing:-.01em; }
.step p { font-size:12.5px; color:var(--ink-2); }

/* ---- app: page headers, league cards, statuses, detail rows ---- */
.pagehead { display:flex; align-items:center; gap:14px; margin:30px 0 22px; flex-wrap:wrap; }
.pagehead h1 { margin:0; font-size:24px; }
.pagehead .spacer { flex:1; }
.pagehead .crumb { color:var(--mute); font-size:13px; }
.pagehead .crumb a { color:var(--ink-2); }

/* ---- the league table: one dense hairline row per league ----
   Vercel's project list, not a card wall. Columns collapse from the right as the
   viewport narrows; name + status + type survive all the way down to 390px. */
.ltable { border:1px solid var(--border); border-radius:var(--r); background:var(--card);
  overflow:hidden; }
.lthead, .lrow { display:grid; align-items:center; gap:14px; padding:0 16px;
  grid-template-columns:minmax(0,1.45fr) 128px minmax(0,.85fr) minmax(0,168px) minmax(0,1.5fr) 14px; }
.lthead { height:33px; background:#050505; border-bottom:1px solid var(--border);
  font:500 10px var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--mute); }
.lrow { position:relative; min-height:54px; padding-top:11px; padding-bottom:11px;
  border-bottom:1px solid #141414; transition:background .12s; }
.lrow:last-child { border-bottom:none; }
.lrow:hover { background:var(--card-2); }
.lrow .stretch { position:absolute; inset:0; }
.lrow .z { position:relative; z-index:1; }
.lrow > div { min-width:0; }
.lrow .c-name { display:flex; align-items:center; gap:10px; }
.lrow .c-name img { width:20px; height:20px; border-radius:5px; flex-shrink:0; }
.lrow .lname { font-weight:600; font-size:14px; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lrow .c-st .st { font-size:11.5px; }
.lrow .c-team { color:var(--ink-2); font-size:13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lrow .c-type, .lrow .c-tags { display:flex; align-items:center; gap:5px; flex-wrap:nowrap;
  overflow:hidden; }
/* chips keep their natural width (a squashed chip clips its own text), and a row
   that still runs out of room fades at the edge instead of guillotining a word */
.lrow .c-type > *, .lrow .c-tags > * { flex:0 0 auto; }
.lrow .c-tags { mask-image:linear-gradient(90deg,#000 calc(100% - 10px),transparent);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 10px),transparent); }
.lrow .c-go { color:#2f2f2f; font-size:13px; text-align:right; transition:color .12s; }
.lrow:hover .c-go { color:var(--ink-2); }
.boardnote { margin:12px 2px 0; }

/* the table sheds columns from the right; name + status + type never go */
@media (max-width:960px){
  .lthead, .lrow { grid-template-columns:minmax(0,1.4fr) 120px minmax(0,1fr) minmax(0,168px) 14px; }
  .lthead > div:nth-child(5), .lrow .c-tags { display:none; }
}
@media (max-width:720px){
  .lthead, .lrow { grid-template-columns:minmax(0,1.5fr) 116px minmax(0,168px) 14px; }
  .lthead > div:nth-child(3), .lrow .c-team { display:none; }
}
@media (max-width:560px){
  .lthead { display:none; }
  .lrow { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name name" "st type";
    gap:9px 10px; padding:13px 14px; min-height:0; }
  .lrow .c-name { grid-area:name; }
  .lrow .c-st { grid-area:st; }
  .lrow .c-type { grid-area:type; justify-self:end; }
  .lrow .c-go { display:none; }
}

.st { display:inline-flex; align-items:center; gap:7px; font:500 12px var(--mono); }
.st::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--mute); }
.st.wait { color:var(--mute); }
.st.wait::before { animation:pulse 1.2s ease-in-out infinite; }
.st.ok { color:var(--good); } .st.ok::before { background:var(--good); }
.st.err { color:var(--bad); } .st.err::before { background:var(--bad); }
.st.warn { color:var(--warn); } .st.warn::before { background:var(--warn); }
.st.off { color:var(--mute); } .st.off::before { background:#333; }

.addrow { display:flex; align-items:center; justify-content:center; width:100%; height:46px;
  margin-top:12px; border:1px dashed var(--border-2); border-radius:var(--r);
  color:var(--ink-2); background:transparent; font:500 13.5px var(--sans); }
.addrow:hover { border-color:var(--green); color:var(--green); background:transparent; }

.kv { display:grid; grid-template-columns:170px 1fr; gap:0; font-size:13.5px; }
.kv > div { padding:9px 0; border-bottom:1px solid #141414; }
.kv > div:nth-last-child(-n+2) { border-bottom:none; }
.kv .k { color:var(--mute); font-family:var(--mono); font-size:12px; }
@media (max-width:560px){ .kv { grid-template-columns:1fr; } .kv .k { padding-bottom:0; border-bottom:none; } }

.conn { display:flex; gap:14px; align-items:flex-start; }
.conn img { width:34px; height:34px; border-radius:8px; margin-top:2px; }
.conn .body { flex:1; min-width:0; }
.conn .pname { font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:10px; }
.conn .rowline { display:flex; gap:12px; align-items:baseline; padding:7px 0;
  border-bottom:1px solid #141414; font-size:13px; flex-wrap:wrap; }
.conn .rowline:last-child { border-bottom:none; }
.conn .rowline .lbl { font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--mute); min-width:52px; }
.conn .rowline .det { color:var(--ink-2); font-size:12.5px; flex:1; min-width:200px; }

.toolrow td:first-child { white-space:nowrap; }
.toolrow .cov { display:inline-flex; gap:4px; margin-left:8px; vertical-align:-3px; }
.toolrow .cov img { width:15px; height:15px; border-radius:4px; opacity:.9; }

.foot { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:88px 0 0; padding:22px 0 26px; border-top:1px solid var(--border);
  font:400 12.5px var(--sans); color:var(--mute); flex-wrap:wrap; }
.foot .fbrand { display:flex; align-items:center; gap:7px; color:var(--ink-2); font-weight:500; }
.foot .fbrand::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); }

/* ================= league intel: takeover, type picker, groups, chips =========
   Same school as everything above — pure black, hairline borders, one accent.
   The add-league flow is a full-screen takeover rather than a modal: the flow is
   multi-step, and a dialog floating over a dashboard fights the flat aesthetic. */

.takeover { position:fixed; inset:0; z-index:80; background:var(--bg);
  display:flex; flex-direction:column; animation:tkin .18s ease both; }
.takeover[hidden] { display:none; }
@keyframes tkin { from { opacity:0; transform:translateY(6px) } to { opacity:1; transform:none } }
.takeover .tk-bar { display:flex; align-items:center; gap:16px; padding:16px 24px;
  border-bottom:1px solid var(--border); flex-shrink:0; }
.takeover .tk-bar .brand { font-weight:650; letter-spacing:-.02em; font-size:15.5px;
  display:flex; align-items:center; color:var(--ink); }
.takeover .tk-bar .brand::before { content:""; width:9px; height:9px; border-radius:50%;
  margin-right:9px; background:var(--green); box-shadow:0 0 12px rgba(0,220,130,.7); }
.takeover .spacer { flex:1; }
.tk-steps { display:flex; align-items:center; gap:8px; font:500 11px var(--mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--mute); flex-wrap:wrap; }
.tk-steps i { font-style:normal; display:flex; align-items:center; gap:6px; }
.tk-steps i::before { content:""; width:6px; height:6px; border-radius:50%; background:#2a2a2a; }
.tk-steps i.on { color:var(--ink); }
.tk-steps i.on::before { background:var(--green); box-shadow:0 0 10px rgba(0,220,130,.6); }
.tk-steps i.done { color:var(--ink-2); }
.tk-steps i.done::before { background:var(--ink-2); }
.tk-steps s { color:#2a2a2a; text-decoration:none; }
.tk-x { background:transparent; border:1px solid var(--border-2); color:var(--ink-2);
  height:32px; padding:0 12px; border-radius:6px; font:500 12.5px var(--sans); }
.tk-x:hover { background:var(--card); border-color:#555; color:var(--ink); }
.tk-x kbd { font:500 10.5px var(--mono); border:1px solid var(--border); border-radius:4px;
  padding:1px 5px; color:var(--mute); background:var(--card-2); }
.takeover .tk-body { flex:1; overflow-y:auto; padding:0 24px 64px; }
.takeover .tk-inner { max-width:820px; margin:0 auto; padding-top:46px; }
.tk-title { font-size:30px; font-weight:650; letter-spacing:-.03em; margin:0 0 8px; }
.tk-sub { color:var(--ink-2); font-size:14.5px; margin:0 0 26px; max-width:620px; }

/* platform choice cards inside the takeover */
.pcards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:820px){ .pcards { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pcards { grid-template-columns:1fr; } }
.pcard { display:block; text-align:left; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:16px 17px; height:auto; color:var(--ink); cursor:pointer;
  white-space:normal; transition:border-color .15s, background .15s; }
.pcard:hover { background:var(--card-2); border-color:#3a3a3a; }
.pcard .top { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.pcard .top img { width:24px; height:24px; border-radius:6px; }
.pcard .pn { font-weight:600; font-size:14.5px; letter-spacing:-.01em; }
.pcard .pb { color:var(--mute); font-size:12.5px; line-height:1.55; }

/* the type picker: six formats + a best-ball switch */
.fmtgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
@media (max-width:760px){ .fmtgrid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .fmtgrid { grid-template-columns:1fr; } }
.optcard { display:block; text-align:left; height:auto; padding:13px 14px; cursor:pointer;
  background:var(--card); border:1px solid var(--border); border-radius:10px; color:var(--ink);
  white-space:normal; transition:all .15s; }
.optcard:hover { background:var(--card-2); border-color:#3a3a3a; }
.optcard b { display:block; font-size:13.5px; font-weight:600; letter-spacing:-.01em; margin-bottom:3px; }
.optcard span { display:block; font-size:12px; color:var(--mute); line-height:1.5; font-weight:400; }
.optcard.on { border-color:var(--green); background:var(--green-dim); }
.optcard.on:hover { border-color:var(--green); background:var(--green-dim); }
.optcard.on b { color:var(--green); }
.optcard.on b::after { content:" ✓"; }

.switch { display:inline-flex; align-items:center; gap:11px; cursor:pointer; user-select:none;
  padding:4px 0; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch .track { width:38px; height:22px; border-radius:99px; background:var(--card-2);
  border:1px solid var(--border-2); position:relative; flex-shrink:0; transition:all .15s; }
.switch .track::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:var(--mute); transition:all .15s; }
.switch input:checked + .track { background:var(--green-dim); border-color:var(--green); }
.switch input:checked + .track::after { transform:translateX(16px); background:var(--green); }
.switch input:focus-visible + .track { box-shadow:0 0 0 3px rgba(255,255,255,.08); }
.switch .lbl { font-size:13.5px; font-weight:500; }
.switch .lbl i { display:block; font-style:normal; font-size:12px; color:var(--mute); font-weight:400; }

.typeblock { background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:18px 20px; margin-bottom:12px; }
.typeblock .tb-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.typeblock .tb-head img { width:22px; height:22px; border-radius:6px; }
.typeblock .tb-head b { font-size:14.5px; font-weight:600; letter-spacing:-.01em; }

/* settings chips */
.tags { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 11px; }
.tags:empty { display:none; }
.chip.bb { color:var(--green); border-color:rgba(0,220,130,.35); background:var(--green-dim); }
.chip.rso { color:#8fd7ff; border-color:rgba(143,215,255,.35); }
.chip.espn { color:#ff8f8f; border-color:rgba(255,143,143,.35); }
.chip.fmt { color:var(--ink-2); border-color:var(--border-2); }
.chip.more { color:var(--mute); border-color:var(--border); }
/* the one amber thing on the dashboard: a league whose type warroom does not know */
button.chip.settype { height:22px; padding:0 11px; font:500 11px var(--mono); border-radius:99px;
  color:var(--warn); border:1px solid rgba(245,166,35,.4); background:rgba(245,166,35,.07);
  cursor:pointer; }
button.chip.settype:hover { color:#ffc25c; border-color:var(--warn);
  background:rgba(245,166,35,.14); }

/* roster + scoring breakdown on the league page */
.statgrid { display:flex; flex-wrap:wrap; gap:8px; }
.slot { border:1px solid var(--border); background:var(--card-2); border-radius:8px;
  padding:8px 12px; min-width:74px; }
.slot .sn { font:500 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mute); }
.slot .sv { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.slot.bench { opacity:.65; }
.scorelist { display:grid; grid-template-columns:repeat(2,1fr); gap:0 22px; font-size:13.5px; }
@media (max-width:560px){ .scorelist { grid-template-columns:1fr; } }
.scorelist > div { display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid #141414; }
.scorelist .sk { color:var(--ink-2); }
.scorelist .sv { font-family:var(--mono); font-size:12.5px; color:var(--ink); }

@media (max-width:640px){
  .takeover .tk-bar { padding:14px; gap:10px; }
  .takeover .tk-body { padding:0 14px 48px; }
  .takeover .tk-inner { padding-top:28px; }
  .tk-title { font-size:23px; }
  .tk-steps { display:none; }
}

@media (max-width:640px){
  body { padding:0 14px; }
  .hero { padding:0 4px; }
  .hero h1.display { font-size:42px; }
  /* the bottom bar stays one slim row on a phone: live platforms only */
  .platforms { gap:8px 18px; margin-bottom:16px; }
  .platforms .cap { display:none; }
  .pf.soon { display:none; }
  /* phones get the simple, functional hero: static grid texture only —
     no radar, no sweep, no blips */
  .radar { display:none; }
  .pill { font-size:10.5px; padding:5px 10px; gap:6px; }
  .lede { font-size:15px; }
  .section { padding:52px 0 4px; }
  .section h2.title { font-size:26px; }
  .panel { padding:16px; }
  /* the four app links do not fit one line on a phone — wrap them rather than
     letting the bar push the whole page sideways */
  .nav { gap:6px 16px; flex-wrap:wrap; }
  .nav a.link { white-space:nowrap; }
  .nav .status { display:none; }
}
@media (prefers-reduced-motion: reduce){
  .dotlive { animation:none }
}