:root{
  --paper:#f7f6f2; --card:#ffffff; --line:#e6e4dd; --line-2:#d6d3c9; --head:#fbfaf7;
  --ink:#13233d; --ink-2:#3c4a63; --mute:#6f7785;
  --blue:#2f7fd6; --blue-soft:#e3eefb; --teal-soft:#ddf3ef; --teal:#0b5f55;
  --good:#1e8e5a; --good-soft:#e2f5ea; --warn:#8a5d00; --warn-soft:#fff3d6; --warn-line:#f0dda6;
  --bad:#c23a4c; --bad-soft:#fbe4e7; --bad-line:#f2bfc7;
  --mono:'JetBrains Mono',monospace; --sans:'Public Sans',system-ui,sans-serif; --display:'Archivo',sans-serif;
  --r:10px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* beats any display rule on the same element */
html,body{margin:0;padding:0}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.45; min-height:100vh; -webkit-font-smoothing:antialiased}
button{font:inherit; cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---- masthead ---- */
.top{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:28px 24px 14px; flex-wrap:wrap}
.eyebrow{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin:0 0 4px}
h1{font-family:var(--display); font-weight:800; font-stretch:110%; font-size:clamp(28px,4.5vw,36px); line-height:1; letter-spacing:-.02em; margin:0; color:var(--ink)}
.controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.team{display:flex; background:var(--card); border:1px solid var(--line-2); border-radius:9px; padding:3px}
.team button{border:0; background:transparent; color:var(--mute); padding:7px 16px; border-radius:6px; font-weight:600; font-size:14px}
.team button.on{background:var(--blue); color:#fff}
.chip{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border-radius:99px; background:#ecebe6; color:var(--mute)}
.chip.saved{background:var(--good-soft); color:var(--good)}
.chip.saving,.chip.unsaved{background:var(--warn-soft); color:var(--warn)}
.chip.error{background:var(--bad-soft); color:var(--bad)}
.ghost{background:var(--card); color:var(--ink); border:1px solid var(--line-2); border-radius:9px; padding:8px 14px; font-weight:500}
.ghost:hover{border-color:var(--blue); color:var(--blue)}
.ghost.danger{color:var(--bad); border-color:var(--bad-line)}
.ghost.danger:hover{border-color:var(--bad)}
.ghost.icon{padding:8px 10px; font-family:var(--mono); font-size:12px}

/* ---- tabs & key ---- */
.tabs{display:flex; gap:2px; padding:0 24px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; align-items:stretch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0; background:transparent; color:var(--mute); padding:12px 14px; font-size:14px; font-weight:500; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px}
.tabs button.on{color:var(--ink); border-bottom-color:var(--blue)}
.tabs button:hover:not(.on){color:var(--ink)}
.tabs .key-btn{margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:12px 10px}
.tabs .key-btn[aria-expanded=true]{color:var(--blue)}
.key{display:flex; flex-wrap:wrap; gap:6px 18px; margin:12px 24px 0; padding:12px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); font-size:13px; color:var(--ink-2)}
.key b{color:var(--ink)}
.sw{display:inline-block; width:14px; height:14px; border-radius:4px; border:1px solid var(--line-2); vertical-align:-2px; margin-right:6px}

/* ---- view ---- */
.view{padding:20px 24px 80px}
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.toolbar.actions{margin-bottom:10px}
.toolbar input[type=search]{background:var(--card); color:var(--ink); border:1px solid var(--line-2); border-radius:9px; padding:10px 12px; font:inherit; font-size:15px; min-width:240px}
.toolbar .spacer{flex:1}
.legend{font-size:13px; color:var(--mute); margin:0 0 12px}
h2.band{font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink); margin:26px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line)}
h3{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); margin:22px 0 8px}
.empty{color:var(--mute); padding:14px 2px}
.score{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px 22px; margin:4px 0 14px}
.score-n{font-family:var(--display); font-weight:800; font-size:44px; line-height:1; color:var(--ink); letter-spacing:-.02em}
.score-l{font-size:14px; color:var(--mute)}
.score-s{margin-left:auto; font-size:14px; color:var(--ink-2)}
details.how{margin:0 0 18px; padding:0 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
details.how summary{cursor:pointer; padding:12px 0; font-weight:600; color:var(--ink-2); list-style-position:inside}
details.how p{color:var(--ink-2); font-size:14px; line-height:1.55; margin:0 0 12px}
details.how .btn,details.how .drop{margin-bottom:12px}

/* ---- tables ---- */
.wrap{overflow:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--card); max-height:calc(100vh - 230px)}
table{border-collapse:separate; border-spacing:0; font-size:14px; min-width:100%}
th,td{padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; text-align:left}
th{position:sticky; top:0; z-index:2; background:var(--head); color:var(--ink-2); font-size:12px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; border-bottom:1px solid var(--line-2)}
th.ev{color:var(--ink); cursor:pointer; user-select:none}
th.ev:hover{filter:brightness(.96)}
th.sorted::after{content:' ▲'; font-size:9px}
th.sorted.desc::after{content:' ▼'}
td.t{font-family:var(--mono); text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2)}
td.recent,td.t.recent{font-weight:700; color:var(--ink)}      /* a this-season time, in the grid or in a report cell */
td.conv::after{content:' conv.'; font-size:10px; font-weight:400; color:var(--mute)}   /* converted from metres, as the sheet marked them */
tr.fr td.nm,tr.fr td.t,td.fr{font-style:italic}
td.nm{font-weight:500}
th.pin,td.pin{position:sticky; left:0; z-index:1; background:var(--card); box-shadow:1px 0 0 var(--line)}
th.pin{z-index:3; background:var(--head)}
td.pin2,th.pin2{position:sticky; left:var(--pin-w,180px); z-index:1; background:var(--card)}
th.pin2{z-index:3; background:var(--head)}
tr:hover td{background:#f3f6fb}
tr:hover td.pin,tr:hover td.pin2{background:#f3f6fb}   /* pinned cells must stay opaque over scrolled columns */
td.recruit,tr.recruit td.nm{background:var(--teal-soft); color:var(--teal)}
td.c{text-align:center}
td.edit{cursor:text; outline:1px dashed transparent}
.unlocked td.edit:hover{outline-color:rgba(47,127,214,.5)}
.unlocked td.edit:focus-visible,th.ev:focus-visible{outline:2px solid var(--blue); outline-offset:-2px}   /* inside the cell: pinned columns and the scroll box would hide an outer ring */
td.editing{padding:0}
.cell{display:flex; align-items:center; gap:6px; padding:4px 8px; background:var(--card); outline:2px solid var(--blue)}
.cell input[type=text]{width:88px; background:transparent; border:0; color:var(--ink); font-family:var(--mono); font-size:14px; text-align:right}
.cell label{font-size:11px; color:var(--mute); display:flex; align-items:center; gap:3px; white-space:nowrap}
.cell .bad{color:var(--bad); font-size:11px}
select.cls,input.cls{background:var(--card); color:var(--ink); border:1px solid var(--line-2); border-radius:6px; padding:4px 6px; font:inherit; font-size:13px}
input.cls.bad-input{border-color:var(--bad)}
.grid-small table{min-width:0}
.cols{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.card h4{margin:0; padding:9px 12px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--ink)}
.card table{width:100%}
.card td.rk{color:var(--mute); width:30px; text-align:center}
tr.alt td{color:var(--mute)}

/* ---- banner & panel ---- */
.banner{margin:12px 24px 0; padding:12px 14px; border-radius:var(--r); background:var(--warn-soft); border:1px solid var(--warn-line); color:var(--warn); display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.banner.err{background:var(--bad-soft); border-color:var(--bad-line); color:var(--bad)}
.banner .spacer{flex:1}
.banner form.passform{display:flex; gap:8px; align-items:center; flex:1; flex-wrap:wrap}
.banner input.pass{flex:1; min-width:160px; padding:8px 10px; background:var(--card); color:var(--ink); border:1px solid var(--line-2); border-radius:6px; font:inherit}
.panel{position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(440px,100vw); background:var(--card); border-left:1px solid var(--line); box-shadow:-20px 0 50px rgba(19,35,61,.14); padding:22px 20px; overflow:auto; z-index:10}
.panel h2{font-family:var(--display); font-weight:800; font-size:22px; margin:0 0 14px; color:var(--ink)}
.panel .close{position:absolute; top:14px; right:14px}
.field{margin-bottom:14px}
.field label{display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; padding:11px 12px; background:var(--card); color:var(--ink); border:1px solid var(--line-2); border-radius:9px; font:inherit}
.field textarea{font-family:var(--mono); font-size:12px; min-height:120px}
.hint{font-size:13px; color:var(--mute); margin-top:6px; min-height:16px}
.hint b{color:var(--blue)}
.hint.warn{color:var(--bad)}
.btn{width:100%; margin-top:10px; padding:13px; background:var(--blue); color:#fff; border:0; border-radius:9px; font-weight:600; font-size:15px}
.btn.danger{background:var(--bad); color:#fff}
.btn.quiet{background:var(--card); color:var(--ink); border:1px solid var(--line-2)}
.btn:disabled{background:#e6e4dd; color:#9aa0ab; cursor:not-allowed}   /* after the variants so a disabled one always looks disabled */
.flash{margin-top:12px; padding:11px 13px; border-radius:9px; font-size:14px; display:none}
.flash.ok{display:block; background:var(--good-soft); border:1px solid #bfe6cf; color:var(--good)}
.flash.err{display:block; background:var(--bad-soft); border:1px solid var(--bad-line); color:var(--bad)}
.flash small{display:block; color:var(--ink-2); margin-top:4px; font-size:12.5px; white-space:pre-wrap}
.drop{display:block; border:2px dashed var(--line-2); border-radius:var(--r); padding:22px; text-align:center; color:var(--mute); margin-top:10px}
.drop.over{border-color:var(--blue); color:var(--ink)}
.list{margin:0; padding:0; list-style:none}
.list li{display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--line); font-size:14px}
.list li .mn{font-family:var(--mono); font-size:12px; color:var(--mute)}
.list li .spacer{flex:1}
.list button{padding:5px 10px; font-size:12px}
.pill{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:99px; background:var(--warn-soft); color:var(--warn)}

@media (max-width:700px){
  .top{padding:18px 16px 10px}
  .tabs,.view{padding-left:16px; padding-right:16px}
  .key,.banner{margin-left:16px; margin-right:16px}
  .cols{grid-template-columns:1fr}
  td.pin2,th.pin2{position:static}
  .score-n{font-size:36px}
  .score-s{margin-left:0; width:100%}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }