/* ============================================================================
   2026 FBS SEASON CALENDAR

   Stadium at night. Near-black field with a green cast, chalk type, one amber
   accent for anything live or active, and a cool cyan reserved strictly for
   interactive affordances so the two never compete.

   No web fonts and no external requests of any kind: the page renders the same
   on a machine with no network, and the content security policy has nothing to
   allow.
   ========================================================================= */
:root{
  /* field — five steps, so elevation is a real scale rather than guesswork */
  --f0:#040705;      /* page floor, behind everything */
  --f1:#070c09;      /* page */
  --f2:#0c1310;      /* raised: cards, bars */
  --f3:#121b16;      /* raised further: hover, saturday cells */
  --f4:#18241d;      /* highest: active chips, pressed states */

  --line:#1b2a22;    /* structural */
  --line-2:#132019;  /* hairline */
  --line-3:#24382d;  /* emphasised */

  --chalk:#f2f6f0;
  --chalk-2:#c3d0c6;
  --muted:#8ea299;
  --muted-2:#5f7369;

  --amber:#ffc247;       /* live, active, today */
  --amber-2:#8a6a1d;
  --amber-ghost:rgba(255,194,71,.09);
  --ice:#79d2e8;         /* interactive affordance only */
  --flag:#ff6055;

  --r-sm:3px;
  --r-md:6px;
  --r-lg:10px;
  --r-pill:100px;
  --barh:0px;

  --num:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,sans-serif;
  --display:"Oswald","Barlow Condensed","Archivo Narrow","Arial Narrow",Impact,var(--sans);

  --shadow-1:0 1px 2px rgba(0,0,0,.5);
  --shadow-2:0 6px 18px -8px rgba(0,0,0,.75);
  --shadow-3:0 24px 60px -20px rgba(0,0,0,.85);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}

/* Any `display` rule silently beats the hidden attribute's default, which is
   how the filter drawer and the empty count pip both rendered while marked
   hidden. Settle it once for everything. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;color:var(--chalk);
  font-family:var(--sans);font-size:13.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 80% at 50% -10%, #10201a 0%, transparent 55%),
    var(--f1);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;
  background-image:var(--grain);opacity:.03;mix-blend-mode:overlay;
}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px;border-radius:var(--r-sm)}
::selection{background:var(--amber);color:#150f02}
.mono,.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* `scrollbar-width: thin` alone leaves Chrome painting a pale default thumb,
   which read as a bright bar under the week rail. Set the colours explicitly. */
*{scrollbar-color:var(--line-3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--line-3);border-radius:var(--r-pill);
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--muted-2);background-clip:content-box}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================ masthead */
.mast{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    radial-gradient(90% 160% at 8% -60%, rgba(66,120,96,.30) 0%, transparent 62%),
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(242,246,240,.028) 92px 93px),
    linear-gradient(180deg,#0f1a15 0%, var(--f0) 100%);
}
.mast::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent, rgba(255,194,71,.55) 22%, transparent 60%);
}
.mast-in{
  position:relative;display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;
  padding:22px 24px 18px;max-width:1760px;
}
.brand{display:flex;align-items:baseline;gap:12px;line-height:.85}
.brand .yr{
  font-family:var(--display);font-weight:700;font-size:clamp(38px,6.2vw,60px);
  letter-spacing:-1px;color:var(--amber);
  text-shadow:0 0 40px rgba(255,194,71,.28);
}
.brand .ttl{
  font-family:var(--display);font-weight:600;font-size:clamp(15px,2.2vw,21px);
  letter-spacing:3px;text-transform:uppercase;color:var(--chalk);
}
.brand .ttl small{
  display:block;font-size:9.5px;letter-spacing:3.6px;color:var(--muted-2);
  font-weight:400;margin-top:5px;
}

.tally{
  margin-left:auto;display:flex;gap:1px;background:var(--line-2);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.tally div{background:rgba(4,7,5,.7);padding:9px 18px;min-width:92px}
.tally b{
  display:block;font-family:var(--num);font-size:23px;font-weight:600;
  color:var(--amber);letter-spacing:-.6px;line-height:1.05;font-variant-numeric:tabular-nums;
}
.tally i{
  display:block;font-style:normal;font-size:9px;letter-spacing:1.7px;
  text-transform:uppercase;color:var(--muted-2);margin-top:4px;
}
.tally div.rng b{font-size:14px;padding-top:7px}

/* ============================================== command bar + filters */
.controls{
  position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);
  background:rgba(7,12,9,.88);backdrop-filter:blur(14px) saturate(1.3);
}
.bar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:10px 24px;max-width:1760px;
}
.bar-gap{flex:1 1 auto}

.seg{
  display:flex;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;flex:none;background:var(--f2);
}
.seg button{
  background:transparent;border:0;padding:8px 16px;cursor:pointer;color:var(--muted);
  font-family:var(--display);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;
  position:relative;transition:color .16s,background .16s;
}
.seg button + button{border-left:1px solid var(--line-2)}
.seg button:hover{color:var(--chalk);background:var(--f3)}
.seg button[aria-pressed=true]{color:#150f02;background:var(--amber)}

.search-wrap{position:relative;flex:1 1 210px;max-width:300px;display:flex;align-items:center}
.search-icon{
  position:absolute;left:11px;font-family:var(--num);font-size:11px;color:var(--muted-2);
  pointer-events:none;border:1px solid var(--line-3);border-radius:3px;
  padding:0 4px;line-height:1.35;
}
.search-wrap input{
  width:100%;background:var(--f2);border:1px solid var(--line);
  padding:8px 12px 8px 34px;border-radius:var(--r-md);
  font-size:13px;transition:border-color .16s,background .16s;
}
.search-wrap input:hover{border-color:var(--line-3)}
.search-wrap input:focus{border-color:var(--ice);background:var(--f1);outline:none}
.search-wrap input::placeholder{color:var(--muted-2)}
.search-wrap input::-webkit-search-cancel-button{filter:invert(.6)}

.btn{
  background:var(--f2);border:1px solid var(--line);color:var(--chalk-2);
  padding:8px 14px;border-radius:var(--r-md);cursor:pointer;white-space:nowrap;
  transition:background .16s,border-color .16s,color .16s,transform .08s;
}
.btn:hover{background:var(--f3);border-color:var(--line-3);color:var(--chalk)}
.btn:active{transform:translateY(1px)}
.btn.go{
  background:var(--amber);color:#150f02;border-color:var(--amber);font-weight:600;
  box-shadow:0 2px 10px -4px rgba(255,194,71,.7);
}
.btn.go:hover{background:#ffd06b;border-color:#ffd06b;color:#150f02}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.ghost{background:transparent}
.btn.icon{width:30px;padding:6px 0;text-align:center}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.toggle[aria-expanded=true]{background:var(--f4);border-color:var(--amber-2);color:var(--chalk)}
.pip{
  display:inline-block;margin-left:7px;min-width:17px;padding:0 5px;
  background:var(--amber);color:#150f02;border-radius:var(--r-pill);
  font-family:var(--num);font-size:10.5px;font-weight:600;line-height:16px;text-align:center;
}
.follow-cta{letter-spacing:.2px}

.filters{
  border-top:1px solid var(--line-2);background:var(--f0);
  padding:14px 24px 16px;max-width:1760px;
  display:grid;gap:12px;
  animation:drop .18s ease-out;
}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.filter-group{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filter-group.wrapping{align-items:flex-start}
.ctl-lbl{
  font-family:var(--display);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted-2);flex:none;min-width:78px;padding-top:5px;
}
label.chk{
  display:flex;gap:7px;align-items:center;color:var(--muted);font-size:12.5px;
  cursor:pointer;user-select:none;white-space:nowrap;padding:4px 0;
}
label.chk:hover{color:var(--chalk)}
label.chk input{accent-color:var(--amber);margin:0;width:15px;height:15px}
select.tz{
  background:var(--f2);border:1px solid var(--line);padding:7px 11px;
  border-radius:var(--r-md);font-size:12.5px;cursor:pointer;min-width:170px;
}
select.tz:hover{border-color:var(--line-3)}
select.tz:focus{border-color:var(--ice);outline:none}

.chips{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.chip{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--f2);padding:4px 11px 4px 8px;border-radius:var(--r-pill);
  cursor:pointer;font-size:12px;white-space:nowrap;
  transition:opacity .16s,border-color .16s,background .16s,color .16s;
}
.chip:hover{border-color:var(--line-3);background:var(--f3)}
.chip .dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 8px -1px currentColor}
.chip .n{font-family:var(--num);color:var(--muted-2);font-size:10.5px}
.chip[data-on=false]{opacity:.32}
.chip[data-on=false] .dot{box-shadow:none}
.chip.win[data-on=true]{border-color:var(--amber-2);background:var(--amber-ghost)}
.chip-group{display:inline-flex;align-items:center;gap:1px}
.chip-group .chip{border-top-right-radius:0;border-bottom-right-radius:0}

.receipt{
  display:none;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 24px;background:linear-gradient(90deg, rgba(255,194,71,.16), rgba(255,194,71,.05));
  border-bottom:1px solid var(--amber-2);
  font-size:12px;color:#ffe6b3;position:sticky;top:var(--barh);z-index:29;
}
.receipt.on{display:flex}
.receipt .tag{
  border:1px solid rgba(255,194,71,.35);padding:2px 9px;border-radius:var(--r-pill);
  background:rgba(255,194,71,.1);
}
.receipt .btn{background:transparent;border-color:rgba(255,194,71,.4);color:#ffe6b3}
.receipt .btn:hover{background:rgba(255,194,71,.16);color:#fff}

/* ================================================================ views */
.wrap{padding:24px 24px 100px;max-width:1760px}

/* Credit where the schedule comes from, and a note on the club marks.
   Attribution is not required by the data licence — it is recommended, costs a
   line, and is the difference between using somebody's work and helping
   yourself to it. Deliberately the quietest type on the page: it should be
   findable, never competing with a kickoff time. */
.colophon{border-top:1px solid var(--line-2);margin-top:8px}
.colophon-in{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:20px 24px 36px;max-width:1760px;
}
.colophon-label{
  font-family:var(--display);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted-2);flex:0 0 auto;
}
.colophon p{margin:0;font-size:12px;line-height:1.6;color:var(--muted-2);max-width:74ch}
.colophon a,.colophon .linklike{
  color:var(--chalk-2);text-decoration:underline;text-underline-offset:3px;font-size:inherit;
}
.colophon a:hover,.colophon .linklike:hover{color:var(--amber)}

/* A ledger rather than paragraphs: the question is "what rows exist about me",
   and a list of labelled rows answers it at a glance where prose would not. */
.privacy .ledger{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.privacy .ledger li{
  display:grid;grid-template-columns:minmax(140px,200px) 1fr;gap:6px 18px;
  padding:10px 0;border-top:1px solid var(--line-2);
}
.privacy .ledger li:first-child{border-top:0}
.privacy .ledger b{
  font-family:var(--display);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--chalk-2);
}
.privacy .ledger span{font-size:12.5px;line-height:1.6;color:var(--muted)}
@media (max-width:560px){
  .privacy .ledger li{grid-template-columns:1fr;gap:3px}
}

.weeks{
  display:flex;gap:6px;overflow-x:auto;margin-bottom:24px;
  border-bottom:1px solid var(--line);scrollbar-width:thin;scroll-snap-type:x proximity;
  scrollbar-color:var(--line-3) transparent;
  /* Top room for the NOW badge and the active tab's glow. `overflow-x: auto`
     makes the vertical axis clip too, so anything drawn above a tab is cut in
     half without it. */
  padding:12px 0 14px;
}
.weeks button{
  background:var(--f2);border:1px solid var(--line);color:var(--muted);
  padding:9px 15px;cursor:pointer;white-space:nowrap;border-radius:var(--r-md);
  font-family:var(--display);letter-spacing:1.5px;font-size:13.5px;text-transform:uppercase;
  transition:color .16s,border-color .16s,background .16s;flex:none;position:relative;
  scroll-snap-align:start;
}
.weeks button:hover{color:var(--chalk);border-color:var(--line-3);background:var(--f3)}
.weeks button[aria-pressed=true]{
  border-color:var(--amber);color:var(--amber);background:var(--amber-ghost);
  box-shadow:0 0 0 1px var(--amber), 0 4px 16px -8px rgba(255,194,71,.8);
}
.weeks button .c{font-family:var(--num);font-size:10px;color:var(--muted-2);margin-left:7px}
.weeks button[aria-pressed=true] .c{color:var(--amber);opacity:.8}
.weeks button.isnow::after{
  content:"NOW";position:absolute;top:-8px;right:-4px;
  background:var(--amber);color:#150f02;font-family:var(--display);font-size:8px;
  letter-spacing:1.2px;padding:1px 5px;border-radius:var(--r-pill);
}

.dayblock{
  margin-bottom:34px;
  animation:rise .4s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * 55ms);
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.dayhead{
  display:flex;align-items:center;gap:14px;position:relative;
  padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.dayhead h3{
  font-family:var(--display);font-size:23px;margin:0;letter-spacing:2px;
  font-weight:600;text-transform:uppercase;color:var(--chalk);
}
.dayhead .c{
  font-family:var(--num);font-size:11px;color:var(--muted-2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px;
}
.dayhead.today h3{color:var(--amber)}
.dayhead.today::after{
  content:"";position:absolute;left:0;bottom:-1px;width:88px;height:2px;
  background:var(--amber);box-shadow:0 0 12px rgba(255,194,71,.7);
}
.nowchip{
  font-family:var(--display);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  background:var(--amber);color:#150f02;padding:3px 9px;border-radius:var(--r-pill);
}

/* ------------------------------------------------------------ game card */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:10px}
.game{
  position:relative;overflow:hidden;
  border:1px solid var(--line-2);border-left:3px solid var(--gc,#888);
  background:var(--f2);padding:12px 14px;border-radius:var(--r-md);
  box-shadow:var(--shadow-1);
  transition:background .16s,border-color .16s,transform .16s,box-shadow .16s;
}
.game::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg, color-mix(in srgb, var(--gc,#888) 7%, transparent), transparent 55%);
}
.game:hover{
  background:var(--f3);border-color:var(--line-3);
  transform:translateY(-2px);box-shadow:var(--shadow-2);
}
.game.followed{border-color:var(--amber-2)}
.game > *{position:relative}

.game .mu{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.game .teams{display:grid;gap:3px;font-size:14.5px;font-weight:500;letter-spacing:.15px}
.game .side{display:flex;align-items:center;gap:5px;white-space:nowrap}
.game .at{
  font-family:var(--display);color:var(--muted-2);font-weight:400;font-size:9.5px;
  letter-spacing:1.6px;text-transform:uppercase;padding-left:2px;
}
.game .rk{
  font-family:var(--num);font-size:10px;color:var(--amber);
  border:1px solid var(--amber-2);border-radius:3px;padding:0 3px;line-height:1.4;
}
.game .kick{
  font-family:var(--num);font-size:12.5px;color:var(--chalk-2);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.game .kick.tba{color:var(--muted-2);font-style:italic}
.game .score{font-family:var(--num);color:var(--muted);font-weight:600;font-size:14px}
.game .score .w{color:var(--amber)}
.game .meta{
  margin-top:9px;padding-top:9px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--muted-2);
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.game .tag{
  border:1px solid var(--gc,#888);color:var(--gc,#888);border-radius:var(--r-pill);
  padding:1px 8px;font-size:10.5px;letter-spacing:.3px;
}
.game .flagbit{
  font-family:var(--display);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted-2);border-left:1px solid var(--line);padding-left:8px;
}

/* follow star */
.team-star,.chip-star{display:none}
body[data-signed-in="true"] .team-star,
body[data-signed-in="true"] .chip-star{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;padding:0;cursor:pointer;line-height:1;
  color:var(--muted-2);transition:color .14s,opacity .14s,transform .14s;
}
body[data-signed-in="true"] .team-star{width:14px;font-size:12px;opacity:0}
.game:hover .team-star,.game .team-star:focus-visible{opacity:.75}
body[data-signed-in="true"] .team-star.on{opacity:1;color:var(--amber)}
.team-star:hover{color:var(--amber);transform:scale(1.2)}
@media (hover: none){ body[data-signed-in="true"] .team-star{opacity:.5} }

body[data-signed-in="true"] .chip-star{
  font-size:12px;padding:4px 7px;border:1px solid var(--line);border-left:0;
  background:var(--f2);border-radius:0 var(--r-pill) var(--r-pill) 0;
}
body[data-signed-in="true"] .chip-star.on{color:var(--amber);background:var(--amber-ghost)}
.chip-star:hover{color:var(--amber);background:var(--f3)}

/* -------------------------------------------------------- month grid */
.month + .month{margin-top:44px}
.month h3{
  font-family:var(--display);font-size:25px;margin:0 0 14px;letter-spacing:2.4px;
  font-weight:600;text-transform:uppercase;display:flex;align-items:baseline;gap:14px;
}
.month h3 .c{
  font-family:var(--num);font-size:11px;color:var(--muted-2);letter-spacing:0;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px;
}
.cal{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--line-2);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;
}
.cal .dow{
  background:var(--f0);color:var(--muted-2);padding:7px;text-align:center;
  font-family:var(--display);font-size:10px;letter-spacing:2px;text-transform:uppercase;
}
.cal .cell{background:var(--f2);min-height:112px;padding:8px;position:relative;transition:background .16s}
.cal .cell.sat{
  background:
    repeating-linear-gradient(135deg, rgba(255,194,71,.03) 0 7px, transparent 7px 14px),
    var(--f3);
}
.cal .cell.blank{background:var(--f0)}
.cal .cell.has{cursor:pointer}
.cal .cell.has:hover{background:var(--f4)}
.cal .cell.now{box-shadow:inset 0 0 0 2px var(--amber)}
.cal .cell.now .d b{color:var(--amber)}
.cal .cell .d{font-family:var(--num);font-size:11px;color:var(--muted-2);display:flex;gap:6px;align-items:baseline}
.cal .cell .d b{color:var(--chalk);font-weight:600;font-size:14px}
.cal .dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px;padding-right:24px}
.cal .dots i{width:7px;height:7px;border-radius:50%;display:block;box-shadow:0 0 5px -1px currentColor}
.cal .dots .plus{font-family:var(--num);font-size:9px;color:var(--muted-2);line-height:7px}
.cal .cell .top{margin-top:8px;font-size:10.5px;color:var(--muted);line-height:1.4;display:none}
.cal .cell .top .more-n{color:var(--muted-2)}
@media (min-width:1180px){ .cal .cell .top{display:block} .cal .cell{min-height:126px} }
.cal .cell button.more{position:absolute;inset:0;background:transparent;border:0;cursor:pointer;width:100%}
.cal .cell .n{
  font-family:var(--num);font-size:11px;color:var(--amber);position:absolute;right:8px;top:8px;
}
.hintline{font-size:12px;color:var(--muted-2);margin:0 0 18px;max-width:92ch}

/* -------------------------------------------------------------- table */
/* The table scrolls itself, in both directions.
   `overflow-x:auto` alone already made this a scroll container on both axes —
   CSS gives you no way to scroll one axis and let the other overflow visibly —
   which is what broke the sticky header: `th` was offsetting itself by the
   toolbar height *inside this box* rather than parking under the toolbar, so an
   empty band appeared above the header and the first row showed through it.
   Bounding the height makes that stickiness mean something instead: the header
   pins to the top of the table while 888 rows move under it. */
.tscroll{
  overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);
  max-height:calc(100vh - var(--barh) - 56px);min-height:320px;
  overscroll-behavior:contain;
}
table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:900px}
th{
  text-align:left;font-weight:600;color:var(--muted);
  border-bottom:1px solid var(--line);padding:10px 12px;
  /* Zero, because the scroll container is .tscroll and not the page. Any other
     value pushes the header down inside the table and leaves a gap above it. */
  position:sticky;top:0;background:var(--f0);z-index:5;
  font-family:var(--display);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
  white-space:nowrap;
}
th.sortable{cursor:pointer;user-select:none;transition:color .16s}
th.sortable:hover{color:var(--chalk)}
th .arrow{color:var(--amber);font-size:9px;margin-left:5px}
td{padding:8px 12px;border-bottom:1px solid var(--line-2)}
tbody tr{transition:background .12s}
tbody tr:hover td{background:var(--f3)}
td.cf{border-left:3px solid var(--gc,#888);font-weight:500}

td.going{white-space:nowrap;text-align:right;width:1%}
td.mono{font-family:var(--num);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
td .rk{font-family:var(--num);font-size:10px;color:var(--amber);margin-right:4px}

/* ------------------------------------------------------------ dialogs */
/* Dialog widths.
   The dialog is the measure — panels always fill it, and never carry a
   max-width of their own. Getting that backwards is what made three of these
   look off-centre: a 600px panel sat against the left edge of an 820px window
   with 179px of dead space beside it, and in the Feeds dialog one section was
   600px while the section under it was 778px, so their right edges disagreed.

   Three steps, named for what the surface does:
     card   one decision, a few short fields          (signing in)
     sheet  a form or a settings surface              (profile, privacy, help)
     board  a list, a grid, something to scan         (teams, feeds, friends) */
:root{
  --dlg-card:440px;
  --dlg-sheet:620px;
  --dlg-board:820px;
}

dialog{
  background:var(--f2);color:var(--chalk);border:1px solid var(--line-3);
  border-radius:var(--r-lg);max-width:var(--dlg-board);width:92%;padding:0;
  box-shadow:var(--shadow-3);
  /* Never a scroll container itself. A browser's default is overflow:auto,
     which made every dialog scrollable in its own right: the header could be
     driven off the top, taking the Close button with it, and there was empty
     space below the body to scroll through. The body is the only thing that
     scrolls. */
  overflow:hidden;
  max-height:calc(100dvh - 40px);
}

/* Only when open, or this beats the browser rule that keeps a closed dialog
   hidden and every panel in the document renders at once. */
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:rgba(2,5,3,.8);backdrop-filter:blur(4px)}

/* Narrow on purpose. At 820px the sign-in form sat in the left two thirds with
   179px of dead space beside it, which is what made it read as off-centre. A
   short column also stops an email field being six inches wide. */
#authDialog{max-width:var(--dlg-card)}
#accountDialog,#privacyDialog,#helpDialog{max-width:var(--dlg-sheet)}
/* A short card can afford more of the viewport than a data panel needs. At 70vh
   the sign-up form scrolled and put the Discord route below the fold, which
   hides the alternative from anyone who does not think to scroll. */
.dlg-head{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--f3),transparent);
  /* Fixed height, always on screen: it holds the way out. */
  flex:0 0 auto;
}
.dlg-head h3{
  font-family:var(--display);font-size:20px;margin:0;letter-spacing:2px;text-transform:uppercase;
}
.dlg-body{
  padding:20px;overflow:auto;
  /* Takes what is left after the header rather than a share of the viewport.
     70vh was a guess that did not account for the header, so head plus body
     could exceed the dialog and hand the overflow to the dialog itself.
     min-height:0 is what lets a flex child actually shrink and scroll. */
  flex:1 1 auto;min-height:0;
  /* Positioned so the visually-hidden labels inside are contained here and
     clipped by this overflow. Absolute positioning looks for the nearest
     positioned ancestor, and while this was static it found the dialog — so
     one-pixel screen-reader spans sat at their static offsets deep in the
     scrolled content and stretched the dialog's scroll height by 357px.
     That was the blank space. */
  position:relative;
}
.dlg-body h4{
  font-family:var(--display);font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--amber);margin:0 0 10px;
}
.dlg-body section + section{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)}
/* A panel that opens with a sentence needs air under it. `section + section`
   spaces the sections from each other but says nothing about the preamble
   above the first one, so the intro collided with the first heading in three
   panels at once. */
.dlg-body > * > .prose:first-child{margin-bottom:22px}
.dlg-body .prose{color:var(--muted);font-size:12.5px;margin:0;max-width:74ch;line-height:1.6}
.keys{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:12.5px;align-items:baseline}
.keys kbd{
  font-family:var(--num);font-size:11px;background:var(--f0);border:1px solid var(--line-3);
  border-bottom-width:2px;padding:3px 8px;border-radius:var(--r-sm);color:var(--chalk);white-space:nowrap;
}

/* -------------------------------------------------------------- forms */
/* Deliberately no max-width on any panel: see the dialog widths above. */
.field{display:block;margin-bottom:14px}
.field > span{
  display:block;font-family:var(--display);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;
}
.field input{
  width:100%;background:var(--f0);border:1px solid var(--line);padding:10px 12px;
  border-radius:var(--r-md);font-size:13.5px;transition:border-color .16s;
}
.field input:hover{border-color:var(--line-3)}
.field input:focus{border-color:var(--ice);outline:none}
.field input::placeholder{color:var(--muted-2)}
.fieldnote{font-size:11.5px;color:var(--muted-2);margin:0 0 14px;max-width:64ch;line-height:1.6}
.chk.remember{margin-bottom:16px}
.availability{display:block;margin-top:6px;font-size:11.5px;color:var(--muted-2);min-height:1.2em}
.availability[data-state=good]{color:#7fdca0}
.availability[data-state=bad]{color:#ffaea6}

/* Full width, because it is the one thing this card exists for. Previously a
   75px button sat beside a 600px Discord button, which inverted the hierarchy:
   the alternative looked like the action. */
.btn.wide{width:100%;justify-content:center;padding-top:11px;padding-bottom:11px}
.btn.go.wide{font-size:14px;letter-spacing:1.6px}

/* Neither an action nor a field label: a way out, parked at the edge. */
.fieldaside{display:flex;justify-content:flex-end;margin:-6px 0 14px;font-size:12px}

/* Where a challenge renders. Collapses entirely when none is configured, so
   the layout is the same whether or not one is switched on. */
.gate{display:flex;justify-content:center;margin:0}
.gate:not(:empty){margin:4px 0 16px}

.fieldnote.tight{margin:8px 0 0;font-size:11px}
.authswitch{font-size:12.5px;color:var(--muted-2);margin:20px 0 0}

/* A rule with the word sitting in it, rather than a bare line that reads as a
   section break between two unrelated things. */
/* The reminder schedule: a label and its time, aligned so the four times read
   as a column rather than four sentences. */
.tiers{list-style:none;margin:10px 0 12px;padding:0;display:grid;gap:7px}
.tiers li{
  display:flex;align-items:baseline;gap:12px;
  padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);font-size:12.5px;
}
.tiers li b{color:var(--chalk);min-width:132px}
.tiers li span{color:var(--muted-2)}

.authsep{
  display:flex;align-items:center;gap:12px;
  margin:18px 0 12px;font-family:var(--display);
  font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-2);
}
.authsep::before,.authsep::after{content:"";flex:1;height:1px;background:var(--line)}

/* Discord's blurple, outlined rather than filled.
   Filled, at full width, it drowned the amber primary beside it — the loudest
   thing on the card was the alternative route. Outlined keeps the colour
   recognisable, which is what stops a sign-in button reading as a decoy, while
   leaving amber as the only saturated surface on the page. */
.btn.discord{
  background:transparent;border-color:#4d59d6;color:#aab2ff;font-weight:600;
}
.btn.discord:hover{background:rgba(88,101,242,.14);border-color:#5865f2;color:#c8cdff}
.btn.discord:focus-visible{outline:2px solid #8b95f5;outline-offset:2px}
.linklike{
  background:none;border:0;padding:0;color:var(--ice);cursor:pointer;
  font:inherit;text-decoration:underline;text-underline-offset:3px;
}
.linklike:hover{color:var(--chalk)}

.authfault{
  border-left:3px solid var(--flag);background:linear-gradient(90deg,rgba(255,96,85,.14),transparent);
  padding:11px 14px;margin:0 0 16px;font-size:12.5px;color:#ffd9d4;border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.authnotice{
  border-left:3px solid var(--amber);background:linear-gradient(90deg,var(--amber-ghost),transparent);
  padding:11px 14px;margin:0 0 16px;font-size:12.5px;color:#ffe6b3;border-radius:0 var(--r-sm) var(--r-sm) 0;
}

/* ------------------------------------------------------------ account */
.identity{display:flex;align-items:center;gap:9px}
.identity .who{
  font-size:12.5px;color:var(--chalk-2);max-width:150px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.identity img{display:block;border-radius:50%;object-fit:cover;aspect-ratio:1}
.avatar-button{
  background:transparent;border:1px solid var(--line-3);border-radius:50%;padding:1px;
  cursor:pointer;line-height:0;transition:border-color .16s,transform .16s;
}
.avatar-button:hover{border-color:var(--amber);transform:scale(1.06)}
.identity-note{
  font-family:var(--display);font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--amber);border:1px solid var(--amber-2);background:var(--amber-ghost);
  padding:4px 10px;border-radius:var(--r-pill);
}

.avatar-preview{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.avatar-preview img{
  border-radius:50%;border:2px solid var(--line-3);display:block;
  object-fit:cover;aspect-ratio:1;background:var(--f3);
}
.avatar-name{
  font-family:var(--display);font-size:13px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--chalk);
}
.avatar-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:9px;
  max-height:330px;overflow-y:auto;padding:12px;border:1px solid var(--line-2);
  background:var(--f0);border-radius:var(--r-md);
}
.avatar-option{
  background:transparent;border:2px solid transparent;border-radius:50%;padding:0;
  cursor:pointer;line-height:0;transition:border-color .14s,transform .14s;
}
.avatar-option:hover{transform:scale(1.08)}
.avatar-option[aria-checked=true]{border-color:var(--amber);box-shadow:0 0 14px -4px var(--amber)}
.avatar-option img{
  display:block;border-radius:50%;width:100%;height:auto;
  object-fit:cover;aspect-ratio:1;background:var(--f3);
}

.account section.danger{border-top-color:#4d211c}
.account section.danger h4{color:var(--flag)}
.btn.danger{background:transparent;border-color:#5e2a24;color:#ffb0a8}
.btn.danger:hover:not([disabled]){background:#2a1310;border-color:var(--flag);color:#fff}

/* ------------------------------------------------------------ follows */
.follow-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:4px;
  max-height:320px;overflow-y:auto;padding:4px;border:1px solid var(--line-2);
  border-radius:var(--r-md);background:var(--f0);
}
.follow-row{
  display:flex;align-items:center;gap:9px;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  padding:7px 10px;cursor:pointer;font-size:12.5px;color:var(--muted);
  transition:background .14s,color .14s,border-color .14s;
}
.follow-row:hover{background:var(--f3);color:var(--chalk);border-color:var(--line)}
.follow-row[aria-checked=true]{color:var(--chalk);background:var(--amber-ghost);border-color:var(--amber-2)}
.follow-row .star{color:var(--muted-2);font-size:13px;flex:none;width:13px}
.follow-row[aria-checked=true] .star{color:var(--amber)}
.follow-row .swatch{width:8px;height:8px;border-radius:50%;flex:none}
.follow-row .follow-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* -------------------------------------------------------------- feeds */
.calendars .created{
  border-left:3px solid var(--amber);padding:2px 0 2px 16px;
  background:linear-gradient(90deg,var(--amber-ghost),transparent);
}
.feed-url{display:flex;gap:9px;margin-bottom:12px}
.feed-url input{
  flex:1;background:var(--f0);border:1px solid var(--line);padding:10px 12px;
  border-radius:var(--r-md);font-family:var(--num);font-size:12px;
}
.feeds{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.feed{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  border:1px solid var(--line-2);background:var(--f0);padding:11px 14px;
  border-radius:var(--r-md);
}
.feed b{font-size:13.5px;display:block;color:var(--chalk)}
.feed-note{display:block;font-size:11.5px;color:var(--muted-2);margin-top:2px}

/* ------------------------------------------------------------- states */
.empty{
  color:var(--muted);padding:70px 24px;text-align:center;
  border:1px dashed var(--line-3);border-radius:var(--r-lg);background:var(--f2);
}
.empty b{
  display:block;font-family:var(--display);font-size:19px;letter-spacing:2px;
  text-transform:uppercase;color:var(--chalk);margin-bottom:10px;
}
.empty .btn{margin-top:18px}

.loading{padding:90px 24px;text-align:center;color:var(--muted-2)}
.loading .bar{
  width:210px;height:2px;background:var(--line);margin:0 auto 20px;
  overflow:hidden;position:relative;border-radius:var(--r-pill);
}
.loading .bar::after{
  content:"";position:absolute;inset:0;width:40%;background:var(--amber);
  border-radius:var(--r-pill);animation:sweep 1.1s ease-in-out infinite;
}
@keyframes sweep{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
.loading p{
  font-family:var(--display);letter-spacing:2.6px;text-transform:uppercase;
  font-size:12px;margin:0;
}

.fault{
  border-left:3px solid var(--flag);background:linear-gradient(90deg,rgba(255,96,85,.12),transparent);
  padding:20px 22px;margin:24px 0;border-radius:0 var(--r-md) var(--r-md) 0;
}
.fault h3{
  font-family:var(--display);font-size:16px;letter-spacing:2px;text-transform:uppercase;
  margin:0 0 8px;color:var(--flag);
}
.fault p{margin:0 0 12px;color:var(--muted);max-width:72ch}
.fault code{
  font-family:var(--num);font-size:11.5px;background:var(--f0);padding:2px 7px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
}

@media (max-width:720px){
  .mast-in{padding:16px 14px 14px;gap:16px}
  .tally{margin-left:0;width:100%}
  .tally div{flex:1;min-width:0;padding:8px 10px}
  .bar,.filters,.receipt{padding-left:14px;padding-right:14px}
  .wrap{padding:16px 14px 80px}
  .colophon-in{padding:16px 14px 28px;gap:8px}
  .ctl-lbl{min-width:100%}
  .cal .cell{min-height:78px;padding:5px}
  .cal .dots{padding-right:18px}
  .games{grid-template-columns:1fr}
}

/* ------------------------------------------------------------- interest */
.game .right{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.in-btn{display:none}
body[data-signed-in="true"] .in-btn{
  display:inline-flex;align-items:center;
  background:transparent;border:1px solid var(--line);color:var(--muted-2);
  font-family:var(--display);font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r-pill);cursor:pointer;
  transition:color .14s,border-color .14s,background .14s,opacity .14s;
  opacity:0;
}
.game:hover .in-btn,.game .in-btn:focus-visible{opacity:1}
body[data-signed-in="true"] .in-btn.on{
  opacity:1;color:var(--amber);border-color:var(--amber-2);background:var(--amber-ghost);
}
.in-btn:hover{color:var(--chalk);border-color:var(--line-3);background:var(--f4)}
body[data-signed-in="true"] .in-btn.on:hover{color:#150f02;background:var(--amber);border-color:var(--amber)}
@media (hover: none){ body[data-signed-in="true"] .in-btn{opacity:.75} }

/* The going cell in the table.
   A card reveals its button on hover, which suits a surface you point at. A
   table is scanned top to bottom, and a control that only exists while the
   cursor is over its row is a control nobody finds — so here it is always
   visible.

   This has to sit after the rules above and carry the same [data-signed-in]
   prefix. Written as `td.going .in-btn` it tied on specificity with
   `body[data-signed-in="true"] .in-btn{opacity:0}` and lost on source order,
   which left 888 buttons in the DOM and none of them on screen. */
body[data-signed-in="true"] td.going .in-btn{opacity:1}
td.going .friends-in{margin:4px 0 0;justify-content:flex-end;font-size:10.5px}
td.going .friends-in span:last-child{max-width:14ch}

.game.marked{box-shadow:var(--shadow-1), inset 3px 0 0 -1px var(--amber)}

/* ------------------------------------------------------------- friends */
.friends-in{
  display:flex;align-items:center;gap:6px;margin-top:8px;
  font-size:11px;color:var(--ice);
}
.friends-in-icon{font-size:9px;opacity:.8}
.friends-in span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.add-friend{display:flex;gap:9px;align-items:flex-start}
.add-friend .field{flex:1;margin-bottom:0}
.friends{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.friend{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--line-2);background:var(--f0);padding:9px 12px;
  border-radius:var(--r-md);
}
.friend img{border-radius:50%;flex:none;object-fit:cover;aspect-ratio:1;background:var(--f3)}
.friend-who{flex:1;min-width:0}
.friend-who b{display:block;font-size:13.5px;color:var(--chalk)}
.friend-note{display:block;font-size:11.5px;color:var(--muted-2);margin-top:1px}
.friend-actions{display:flex;gap:6px;flex-wrap:wrap;flex:none}

/* ------------------------------------------------------------- discord */
.dlg-rule{border:0;border-top:1px solid var(--line);margin:26px 0}
.discord section + section{margin-top:24px;padding-top:20px;border-top:1px solid var(--line-2)}
.discord h4{
  font-family:var(--display);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--amber);margin:0 0 10px;
}
.discord .prose{color:var(--muted);font-size:12.5px;margin:0 0 12px;max-width:66ch}
.hook-ok{display:block;font-size:11.5px;color:#7fdca0;margin-top:2px}
.hook-bad{display:block;font-size:11.5px;color:#ffaea6;margin-top:2px}

.follow-label{display:flex;flex-direction:column;gap:1px;min-width:0}
.follow-friends{
  font-size:10.5px;color:var(--ice);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------------------------------------------------------------- logos
   No chip behind them. The provider's dark-background variant already keeps
   team colour where it reads and lightens only the marks that would vanish,
   so a chip would be a light disc under a logo already designed for this
   background. */
.logo{
  width:20px;height:20px;flex:none;object-fit:contain;
  display:inline-block;vertical-align:-4px;
}
.logo-sm{width:18px;height:18px;vertical-align:-4px}
/* Initials keep the row height identical when a team has no logo. */
.logo-none{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--f4);color:var(--muted);border-radius:50%;
  font-family:var(--display);font-size:8.5px;letter-spacing:.5px;
}
.game .side{gap:6px}
td.cf .logo{margin-right:6px}
.follow-row .logo{margin-right:2px}
.identity .fav-team{margin-left:-2px}

.favorite-now{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.favorite-now span{
  font-family:var(--display);font-size:13px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--chalk);
}
#favoriteTeam{
  width:100%;background:var(--f0);border:1px solid var(--line);padding:10px 12px;
  border-radius:var(--r-md);font-size:13.5px;cursor:pointer;
}
#favoriteTeam:hover{border-color:var(--line-3)}
#favoriteTeam:focus{border-color:var(--ice);outline:none}