/* Colours, radii, spacing and fonts all come from tokens.css; nothing below uses a raw colour. */
*{box-sizing:border-box}html,body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px)}
body{background:var(--ground);color:var(--ink);font:16px/1.5 var(--font);padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));-webkit-tap-highlight-color:transparent}
header{margin:var(--s-2) var(--s-3) var(--s-1);padding:var(--s-3) var(--s-4) var(--s-4);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--hairline);color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);position:relative;overflow:hidden;max-width:836px}
@media(min-width:860px){header{margin:var(--s-3) auto var(--s-1);width:836px}}
/* red / blue alliance stripe: softened and blended through purple (OKLCH), not through grey (sRGB) */
header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,color-mix(in oklch,var(--alliance-red) 80%,var(--surface)) 8%,color-mix(in oklch,var(--alliance-red),var(--alliance-blue)) 50%,color-mix(in oklch,var(--alliance-blue) 80%,var(--surface)) 92%);background:linear-gradient(90deg in oklch,color-mix(in oklch,var(--alliance-red) 80%,var(--surface)) 8%,color-mix(in oklch,var(--alliance-blue) 80%,var(--surface)) 92%)}
.on-light{display:var(--logo-on-light)}.on-dark{display:var(--logo-on-dark)}
.brand{display:flex;align-items:center;gap:var(--s-3);min-width:0}.brand>div{min-width:0;flex:1 1 auto}.appicon{width:40px;height:40px;border-radius:var(--r-md);flex:0 0 auto}
.wordmark{color:var(--ink);line-height:0}.wm{height:22px;width:auto;overflow:visible}.wm .wm-o{stroke:var(--accent)}.wm .wm-dot{fill:var(--accent);stroke:none}
#evname{margin-top:6px}
#theme{padding:0;width:var(--control-h);display:flex;align-items:center;justify-content:center}#theme svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hr{display:flex;align-items:center;gap:var(--s-3);flex:0 0 auto}
#evname{font-size:13px;line-height:1.35;color:var(--ink-muted);margin-top:var(--s-1);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
#sync{font-size:12px;color:var(--ink-muted);white-space:nowrap}
#sync.off{color:var(--danger);font-weight:700}#sync.busy{color:var(--accent-text)}
h2{font:600 17px/1.3 var(--font);margin:0 0 var(--s-2)}
h3{font:600 14px/1.2 var(--font);margin:var(--s-4) 0 var(--s-2);color:var(--ink-muted)}
main{max-width:860px;margin:0 auto;padding:var(--s-2) var(--s-3) var(--s-5)}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--s-4);margin:var(--s-3) 0}

/* inputs */
input,select,textarea{width:100%;min-height:var(--control-h);background:var(--surface-sunken);color:var(--ink);border:1px solid var(--border-control);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);font:inherit;margin:var(--s-1) 0}
select{background:var(--surface-raised)}
input::placeholder,textarea::placeholder{color:var(--ink-muted)}
input:focus,select:focus,textarea:focus{outline:1px solid var(--accent);outline-offset:0;border-color:var(--accent)}
textarea{min-height:76px;resize:vertical}

/* buttons: secondary by default (surface-raised + hairline). .p = the one main action (accent).
   .d = quiet destructive text button, only red when hovered or armed. .link = inline text button. */
button{font:600 15px var(--font);min-height:var(--control-h);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:0 var(--s-4);background:var(--surface-raised);color:var(--ink);cursor:pointer;
  transition:background-color var(--dur-1),color var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1) var(--ease)}
button:hover{background:color-mix(in srgb,var(--surface-raised),var(--ink) var(--tint-hover))}
button:active{transform:scale(.97);background:color-mix(in srgb,var(--surface-raised),var(--ink) var(--tint-press))}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.p,.composer.has button{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
button.p:hover,.composer.has button:hover{background:color-mix(in srgb,var(--accent),var(--ink) var(--tint-hover))}
button.p:active,.composer.has button:active{background:color-mix(in srgb,var(--accent),var(--ink) var(--tint-press))}
button.wide{width:100%;margin-top:var(--s-2)}
button.d{background:transparent;border-color:transparent;color:var(--ink-muted);min-height:0;padding:var(--s-1) var(--s-2);font-size:13px;font-weight:500}
button.d:hover,button.d.armed{color:var(--danger);background:var(--danger-soft)}button.d.armed{font-weight:700}
button.link{background:none;border:0;min-height:0;padding:0;color:var(--accent-text);font:inherit;font-weight:600}
button.link:hover{background:none;text-decoration:underline}button.link:active{transform:none}
button.link.back{margin:var(--s-1) 0 var(--s-1);font-size:15px}
a{color:var(--accent-text);font-weight:600;text-decoration:none}a:hover{text-decoration:underline}
button.icon{width:var(--control-h);padding:0;display:inline-flex;align-items:center;justify-content:center}
button.icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.row{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}.row>*{flex:1 1 120px}.row>button{flex:0 0 auto}

/* bottom tab bar. Selected = accent-soft + accent-text + 2px underline; hover = surface-raised only */
nav{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:var(--s-3);right:var(--s-3);max-width:560px;margin:0 auto;display:flex;gap:var(--s-1);background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:6px;box-shadow:var(--shadow-float);z-index:5}
nav button{flex:1;background:none;border-color:transparent;color:var(--ink-muted);border-radius:var(--r-md);padding:var(--s-2) 2px 6px;font-size:11.5px;display:flex;flex-direction:column;align-items:center;gap:2px}
nav button:hover{background:var(--surface-raised)}
nav button.on{background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 0 -2px 0 var(--accent)}
nav:empty{display:none}nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* team chips: green = with us, red = against us, accent = us, accent outline = selected */
.chip{display:inline-block;min-height:0;padding:var(--s-1) 10px;border-radius:var(--r-sm);border:2px solid var(--hairline);background:var(--surface-raised);color:var(--ink);margin:3px 3px 3px 0;font:700 16px/1.25 var(--font);font-variant-numeric:tabular-nums}
.chip:hover{background:color-mix(in srgb,var(--surface-raised),var(--ink) var(--tint-hover))}
.chip.gn{background:var(--success-soft);border-color:var(--success);color:var(--success)}.chip.rd{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.chip.me{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.chip.both{border-color:transparent;color:var(--ink);background:linear-gradient(105deg,var(--success-soft) 50%,var(--danger-soft) 50%) padding-box,linear-gradient(105deg,var(--success) 50%,var(--danger) 50%) border-box}
.card.us{border-color:color-mix(in srgb,var(--accent) 55%,var(--hairline));box-shadow:inset 3px 0 0 var(--accent)}
.num{font:700 22px/1 var(--font);font-variant-numeric:tabular-nums;margin-right:6px}
.note{border-top:1px solid var(--hairline);padding:10px 0;white-space:pre-wrap;word-break:break-word}.note small{color:var(--ink-muted);display:flex;align-items:center;gap:var(--s-2);margin-top:2px;white-space:normal}.note small .d{margin-left:auto}
.mut{color:var(--ink-muted);font-size:13.5px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:var(--s-2)}.vs .side{border-radius:var(--r-sm);padding:calc(var(--s-2) + 4px) 10px 6px}
/* the alliance bar is an inset shadow so it follows the rounded corners; our own alliance gets a full frame in its colour and a stronger tint */
.vs .r{background:var(--alliance-red-soft);box-shadow:inset 0 4px 0 var(--alliance-red)}.vs .b{background:var(--alliance-blue-soft);box-shadow:inset 0 4px 0 var(--alliance-blue)}
.vs .r.mine{background:color-mix(in srgb,var(--alliance-red) var(--mine-a),transparent);box-shadow:inset 0 0 0 2px var(--alliance-red),inset 0 5px 0 var(--alliance-red)}
.vs .b.mine{background:color-mix(in srgb,var(--alliance-blue) var(--mine-a),transparent);box-shadow:inset 0 0 0 2px var(--alliance-blue),inset 0 5px 0 var(--alliance-blue)}
.vs .chip.gn{background:color-mix(in srgb,var(--success) var(--soft-a),var(--surface))}.vs .chip.rd{background:color-mix(in srgb,var(--danger) var(--soft-a),var(--surface))} /* solid, so the text contrast doesn't depend on the tint behind */
.vs .side>span{font-size:12px;font-weight:700;color:var(--ink-muted);display:block}.vs .side.mine>span{color:var(--ink)}

/* 1–5 rating buttons: selected = accent-soft + accent-text + 2px underline */
.rate{display:flex;gap:6px}
.rate button{flex:1;padding:0;background:var(--surface-raised);color:var(--ink-muted);border-color:var(--hairline);font:600 16px var(--font)}
.rate button:hover{background:color-mix(in srgb,var(--surface-raised),var(--ink) var(--tint-hover))}
.rate button.on{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.hint{margin:var(--s-2) 0 0;font-size:13px}

/* team sheet */
#modal{position:fixed;inset:0;background:var(--scrim);display:none;z-index:9;overflow:auto;padding:calc(12px + env(safe-area-inset-top,0px)) 10px 30px;backdrop-filter:blur(3px)}
#modal>div{max-width:640px;margin:0 auto;background:var(--ground);border-radius:var(--r-lg);padding:var(--s-4)}

/* scout team list, picklist */
.trow{display:flex;gap:10px;align-items:center;padding:10px 6px;border-top:1px solid var(--hairline);cursor:pointer;transition:background-color var(--dur-1)}
.trow:hover{background:var(--surface-raised)}
.trow.sel{background:var(--accent-soft);border-radius:var(--r-sm);box-shadow:inset 2px 0 0 var(--accent)}
.lab{font-size:13.5px;font-weight:600}.lab.g{color:var(--success)}.lab.r{color:var(--danger)}
.pk{display:flex;align-items:center;gap:var(--s-2);padding:10px var(--s-1);border-top:1px solid var(--hairline);border-radius:var(--r-sm);background:var(--surface)}.pk .x{font-size:22px;line-height:1;padding:var(--s-1) var(--s-2)}
.pk.drag{position:relative;z-index:3;box-shadow:var(--shadow-drag);background:var(--surface-raised)}
.grip{touch-action:none;cursor:grab;font-size:28px;line-height:1;padding:var(--s-1) var(--s-2);color:var(--ink-muted);user-select:none;-webkit-user-select:none}
.arrows{display:flex;flex-direction:column;gap:3px}.arrows button{min-height:0;padding:3px 9px;font-size:11px;line-height:1.2}.arrows button:disabled{opacity:.3;cursor:default}


/* match header: label, score, result, side tag */
.mhead{display:flex;align-items:center;gap:var(--s-2);cursor:pointer;-webkit-user-select:none;user-select:none}.mhead .num{margin:0}.grow{flex:1}
.score{font:700 18px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink-muted);white-space:nowrap}
.res{font:700 13px/1 var(--font);padding:var(--s-1) 7px;border-radius:var(--r-xs);background:var(--surface-raised);color:var(--ink-muted)}.res.w{background:var(--success-soft);color:var(--success)}.res.l{background:var(--danger-soft);color:var(--danger)}


/* segmented switch: selected = accent-soft + accent-text + 2px underline; hover = surface-raised */
.seg{display:flex;gap:var(--s-1);background:var(--surface-sunken);border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--s-1);margin:var(--s-3) 0}
.seg button{flex:1;background:none;border-color:transparent;color:var(--ink-muted);padding:var(--s-2) 6px}
.seg button:hover{background:var(--surface-raised)}
.seg button.on{background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 0 -2px 0 var(--accent)}

details>summary{list-style:none;cursor:pointer}details>summary::-webkit-details-marker{display:none}details>summary h2{display:inline;margin:0}
details>summary:after{content:"›";float:right;color:var(--ink-muted);font-size:22px;line-height:1;transform:rotate(90deg);transition:transform var(--dur-2) var(--ease)}details[open]>summary:after{transform:rotate(-90deg)}details[open]>summary{margin-bottom:10px}
details.sub{margin:var(--s-3) 0 0;border-top:1px solid var(--hairline);padding-top:var(--s-3)}details.sub>summary{color:var(--ink-muted);font-size:14px;font-weight:600}details.sub>summary:after{font-size:18px}

#toast{position:fixed;left:var(--s-4);right:var(--s-4);bottom:calc(96px + env(safe-area-inset-bottom,0px));max-width:520px;margin:0 auto;background:var(--ink);color:var(--ground);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);font-size:14px;box-shadow:var(--shadow-float);z-index:10;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s}
#toast.show{opacity:1;transform:none}

/* rankings table */
.tblwrap{overflow-x:auto;margin:var(--s-2) calc(-1 * var(--s-1))}
table.rk{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.rk th{text-align:right;font-size:12px;color:var(--ink-muted);font-weight:600;padding:6px 5px;border-bottom:1px solid var(--hairline);white-space:nowrap}
.rk td{text-align:right;padding:9px 5px;border-bottom:1px solid var(--hairline);white-space:nowrap}
.rk th:nth-child(2),.rk td:nth-child(2){text-align:left}.rk th:first-child,.rk td:first-child{text-align:left;color:var(--ink-muted)}
.rk tbody tr{cursor:pointer}.rk tbody tr:hover td{background:var(--surface-raised)}
.rk tr.us td{background:var(--accent-soft)}.rk tr.us td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
@media(max-width:520px){.rk .wide{display:none}}

/* calmer layout bits */
.empty{text-align:center;padding:var(--s-6) var(--s-4)}
.meta{margin:var(--s-2) 0 0}
.err{color:var(--danger);margin:var(--s-2) 0 0}
.foot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2);justify-content:flex-end;margin-top:var(--s-3)}
.foot .grow{flex:1}
input.narrow{flex:0 1 110px}
.sheethead{display:flex;align-items:flex-start;gap:var(--s-3);margin-bottom:var(--s-1)}.sheethead h2{margin:0}
.codeval{flex:1 1 120px;font:600 15px var(--mono);letter-spacing:.06em;background:var(--surface-sunken);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);min-height:var(--control-h);display:flex;align-items:center;word-break:break-all}
input[type=search]{-webkit-appearance:none;appearance:none}

/* team list: one card of rows instead of a card per team */
.card.list{padding:var(--s-1) var(--s-3)}
.card.list .trow:first-child{border-top:0}
.trow .num{font-size:18px;min-width:84px}
.trow.us{box-shadow:inset 2px 0 0 var(--accent)}
.chev{color:var(--ink-muted);font-size:22px;line-height:1;padding:0 2px;transition:transform var(--dur-2) var(--ease)}
.mhead .chev{transform:rotate(90deg)}.mhead .chev.up{transform:rotate(-90deg)}

/* scout tab: team list rows + compact form (label left, 1-5 right) */
.scouthead{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin:var(--s-2) var(--s-1) 0}
.rels{margin-top:var(--s-1);display:flex;flex-wrap:wrap;gap:var(--s-1)}
/* match tags: green = plays with us, red = plays against us (same colours as the team chips on the Matches tab) */
.mtag{display:inline-block;font:700 12px/1.3 var(--font);padding:2px 8px;border-radius:var(--r-sm);border:1.5px solid}
.mtag.g{background:var(--success-soft);border-color:var(--success);color:var(--success)}.mtag.r{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.legend{font-size:13px;margin:var(--s-1) var(--s-1) 0}.legend .mtag{margin:0 2px 0 var(--s-2)}.legend .mtag:first-child{margin-left:0}
.tick{font-size:13px;font-weight:700;color:var(--accent-text);white-space:nowrap}

/* login: show / hide the team code */
.login{max-width:420px;margin:var(--s-6) auto}
.pw{position:relative}.pw input{padding-right:calc(var(--control-h) + var(--s-2))}
.pw .icon{position:absolute;right:1px;top:50%;transform:translateY(-50%);background:transparent;border-color:transparent;color:var(--ink-muted)}
.pw .icon:hover{background:transparent;color:var(--ink)}.pw .icon:active{transform:translateY(-50%) scale(.94)}

/* note box: one line until you tap in; Add only shows (and turns accent) once there's text */
.composer{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-1);margin:var(--s-1) 0 var(--s-2)}
.composer textarea{margin:0;min-height:var(--control-h);height:calc(1.5em + 2 * var(--s-2) + 2px);resize:none;overflow:hidden;transition:height var(--dur-2) var(--ease),border-color var(--dur-1)}
.composer:focus-within textarea,.composer.has textarea{height:84px;overflow:auto;resize:vertical}
.composer button{display:none}
.composer.has button{display:inline-flex;align-items:center;animation:pop var(--dur-2) var(--ease)}

/* ---------- motion ---------- */
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes noteIn{from{opacity:0;transform:translateY(-3px);background:var(--accent-soft)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes scrimIn{from{background:transparent;backdrop-filter:blur(0)}}
@keyframes scrimOut{to{background:transparent;backdrop-filter:blur(0)}}
@keyframes sheetUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes sheetDown{to{opacity:0;transform:translateY(28px)}}
#app.enter{animation:viewIn var(--dur-2) var(--ease)}
.mx.reveal,details.reveal>:not(summary){animation:slideDown var(--dur-2) var(--ease)}
.note.fresh{animation:noteIn 600ms var(--ease)}
#modal.opening{animation:scrimIn var(--dur-2) var(--ease)}#modal.opening>div{animation:sheetUp var(--dur-3) var(--ease)}
#modal.closing{animation:scrimOut 180ms var(--ease) forwards}#modal.closing>div{animation:sheetDown 180ms var(--ease) forwards}
nav button,.seg button,.rate button,.chip{transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
nav button svg{transition:transform var(--dur-2) var(--ease)}nav button.on svg{transform:translateY(-1px)}
#sync{transition:color var(--dur-2)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* welcome, sign-up, about */
.welcome{max-width:440px;margin:0 auto}
.welcome .seg{margin:var(--s-4) 0 var(--s-3)}.welcome .hero p{max-width:380px;margin:0 auto}
.hero{text-align:center;padding:var(--s-6) var(--s-4) var(--s-2)}.hero h1{margin:var(--s-4) 0 var(--s-3);line-height:0;color:var(--ink)}.hero .wm{height:40px}
.heroicon{width:72px;height:72px;border-radius:var(--r-lg)}
.welcome .login{margin:0;max-width:none}
.found{background:var(--surface-sunken);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:var(--s-3);margin:var(--s-3) 0 var(--s-1)}
.bigcode{font:700 28px/1.2 var(--mono);letter-spacing:.08em;text-align:center;background:var(--accent-soft);color:var(--accent-text);border-radius:var(--r-md);padding:var(--s-4);margin:var(--s-1) 0 var(--s-3);user-select:all}
.credit{display:flex;align-items:center;justify-content:center;gap:var(--s-2);color:var(--ink-muted);font-size:13px;margin:var(--s-6) 0 var(--s-4)}.credit img{height:22px;width:auto}
.card .credit{justify-content:flex-start;margin:var(--s-1) 0 var(--s-2)}
.about{display:flex;gap:var(--s-4);align-items:flex-start}.about .heroicon{width:56px;height:56px}.about p{margin:var(--s-1) 0 0}
.fine{font-size:12px;text-align:center;margin:var(--s-4) 0}
button:disabled{opacity:.6;cursor:default}

/* signed out: the welcome screen fills the screen so the Invictus credit sits at the very bottom */
body.out{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding-bottom:env(safe-area-inset-bottom,0px)}
body.out main,body.out #app{flex:1;display:flex;flex-direction:column;width:100%}
body.out main{padding-bottom:0}
body.out .welcome{flex:1;display:flex;flex-direction:column;width:100%}
body.out .welcome .credit{margin-top:auto;padding:var(--s-6) 0 var(--s-4)}

/* ---------- scouting form: labelled fields in titled sections ---------- */
.card.sect{padding-top:var(--s-3)}
.sech{border-bottom:1px solid var(--hairline);margin:calc(-1 * var(--s-1)) 0 var(--s-1);padding-bottom:var(--s-2)}.sech h2{margin:0}.sech p{margin:2px 0 0}
.ff{margin:var(--s-3) 0 0}
.ff>label,.ff>.lbl{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.ff>.hint{margin:1px 0 var(--s-1)}
.ff input,.ff select,.ff textarea{margin-top:var(--s-1)}
.ff>.rate{margin-top:var(--s-2)}
.scale{display:flex;justify-content:space-between;gap:var(--s-3);font-size:12px;color:var(--ink-muted);margin-top:var(--s-1)}
.scale span:last-child{text-align:right}

/* team picker groups */
.ghead{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) 6px var(--s-1)}.ghead h3{margin:0;flex:1}
.ghead .chip{width:14px;height:14px;padding:0;margin:0;border-width:3px;border-radius:var(--r-xs)}

/* a saved scouting entry */
.note.entry{white-space:normal}
.ehead{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-1)}.ehead b{font-size:15px}.ehead .mut{font-size:12.5px}
.sg{margin-top:var(--s-2)}
.sg h4{margin:0 0 2px;font:700 11.5px/1.2 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.kv{display:flex;justify-content:space-between;gap:var(--s-3);padding:2px 0;font-size:14.5px}.kv span{color:var(--ink-muted)}.kv b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.kv.txt{display:block}.kv.txt>div{white-space:pre-wrap;word-break:break-word}

/* stat tiles (skills, season record, scouting averages) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:var(--s-2);margin:var(--s-2) 0}
.tile{background:var(--surface-sunken);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);display:flex;flex-direction:column;min-width:0}
.tile b{font:700 22px/1.15 var(--font);font-variant-numeric:tabular-nums}
.tile span{font-size:12.5px;font-weight:600;color:var(--ink-muted)}
.tile small{font-size:12px;color:var(--ink-muted)}

/* skills table + team sheet tables */
.rk td.hi{font-weight:700;color:var(--accent-text)}
.rk.sm tbody tr{cursor:default}.rk.sm tbody tr:hover td{background:none}
.rk.sm th:first-child,.rk.sm td:first-child{color:var(--ink);white-space:normal;min-width:110px}
.rk.sm small{display:block;line-height:1.2}
.rk.sm th:nth-child(2),.rk.sm td:nth-child(2){text-align:right}
.rk small{color:var(--ink-muted);font-size:11.5px}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:var(--r-xs);background:var(--accent-soft);color:var(--accent-text);vertical-align:1px}
.award{padding:6px 0;border-top:1px solid var(--hairline)}.award:first-of-type{border-top:0}
.tstat{font-variant-numeric:tabular-nums}
.stmsg{font-size:13px}

/* ---------- our own dropdowns, suggestions and confirm box ---------- */
button.sel{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);width:100%;min-height:var(--control-h);margin:var(--s-1) 0;padding:var(--s-2) var(--s-3);text-align:left;font:inherit;font-weight:400;background:var(--surface-raised);border:1px solid var(--border-control);color:var(--ink)}
button.sel .sv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}button.sel .sv.ph{color:var(--ink-muted)}
button.sel .chev{transform:rotate(90deg);flex:0 0 auto}
button.sel[aria-expanded=true]{border-color:var(--accent);outline:1px solid var(--accent)}button.sel[aria-expanded=true] .chev{transform:rotate(-90deg)}
#menu{position:fixed;z-index:11;overflow-y:auto;overscroll-behavior:contain;background:var(--surface-raised);border:1px solid var(--border-control);border-radius:var(--r-md);box-shadow:var(--shadow-float);padding:var(--s-1);animation:pop var(--dur-1) var(--ease)}
#menu .mi{display:block;width:100%;min-height:var(--control-h);text-align:left;font-weight:400;background:none;border:0;border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);color:var(--ink);white-space:normal;overflow-wrap:anywhere}
#menu .mi.dim{color:var(--ink-muted)}#menu .mi b{font-weight:700;font-variant-numeric:tabular-nums}
#menu .mi:hover,#menu .mi.act{background:var(--surface-track)}
#menu .mi.on{background:var(--accent-soft);color:var(--accent-text);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
#menu .mi.none{color:var(--ink-muted);cursor:default;padding:var(--s-3)}
#menu .mi:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#dlg{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:var(--s-4);background:var(--scrim);backdrop-filter:blur(3px);animation:scrimIn var(--dur-2) var(--ease)}
#dlg .dbox{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--shadow-float);animation:pop var(--dur-2) var(--ease)}
#dlg h2{margin:0 0 var(--s-2)}#dlg p{margin:0;font-size:15px}
#dlg.closing{animation:scrimOut 160ms var(--ease) forwards}#dlg.closing .dbox{animation:sheetDown 160ms var(--ease) forwards}
button.dng{background:var(--danger);border-color:var(--danger);color:var(--on-accent)}
button.dng:hover{background:color-mix(in srgb,var(--danger),var(--ink) var(--tint-hover))}

/* event browser + code-reset notice */
.evlist .evrow{cursor:default}.evlist .evrow:hover{background:none}
.evrow .evn{font-weight:600;overflow-wrap:anywhere}.evrow .evsku{font:12px var(--mono)}
.evrow>button{flex:0 0 auto}
#eb .seg{margin-top:var(--s-2)}.ebmsg{margin:var(--s-2) 0 0}.ebmsg:empty{display:none}#ebres{margin-top:var(--s-2)}
.bigcode.key{font-size:20px;letter-spacing:.06em;background:var(--surface-sunken);color:var(--ink);border:1px solid var(--hairline)}
.chk{display:flex;gap:var(--s-2);align-items:center;margin:var(--s-2) 0;font-weight:600}.chk input{width:auto;min-height:0;flex:0 0 auto;accent-color:var(--accent)}