/* KFT Instrument — design system.
   Physical controls (keys, faders, dials, switches) sit on a quiet ground; data stays flat and readable.
   Two finishes: graphite (dark) and aluminium (light). Boxes are rare: sections are separated by space
   and hairlines; only instruments that hold a live value get a recessed well. */
@font-face{font-family:Manrope;src:url(../img/manrope-latin-variable.woff2) format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Sora;src:url(../img/sora.woff2) format('woff2');font-weight:300 800;font-display:swap}

:root,[data-theme=dark]{
  color-scheme:dark;
  --ground:#14181c; --ground-2:#181d22; --raised:#1f252b; --well:#10161b; --well-edge:#0a0f13;
  --ink:#eef1f3; --ink-2:#c9d1d8; --muted:#97a3ae; --faint:#85919d; --hair:#ffffff12; --hair-2:#ffffff1f;
  --accent:#ff9e7a; --accent-ink:#2a1d16; --accent-soft:#ff9e7a22;
  --good:#7fdcc3; --bad:#ff8f84; --warn:#f2c46b; --info:#8fd2ff;
  --key-top:#4a535c; --key-mid:#363f47; --key-bot:#2b333a; --key-edge:#151a1f; --key-lip:#69737c; --key-skirt:#0f1317; --key-ink:#eef1f3;
  --acc-top:#ffc9ac; --acc-mid:#f1a383; --acc-bot:#df8f70; --acc-edge:#231b18; --acc-lip:#ffe0ca; --acc-skirt:#784631;
  --tray:#11161a; --tray-edge:#0a0e11; --led:#16212b; --led-on:#ffb08c;
  --metal-1:#c9d1d6; --metal-2:#6b7782; --metal-3:#b3bdc4; --metal-4:#5c6974; --metal-rim:#aeb9bf;
  --track:#0e151b; --track-edge:#070b0e;
  --shadow:0 18px 40px -22px #000c;
  --fdr1:#23684f;--fdr2:#2e7a5f;--fdr3:#5a646d;--fdr4:#a1563f;--fdr5:#8a2f2f;--fdr-ink:#f2f5f6;
  --pitch:#1a3433; --pitch-line:#c9e0d82a;
  --skel:#232a31; --skel-hi:#2f3840;
}
[data-theme=light]{
  color-scheme:light;
  --ground:#e9ebee; --ground-2:#f1f2f4; --raised:#f7f8f9; --well:#dde1e6; --well-edge:#c4cad1;
  --ink:#14191e; --ink-2:#2f3740; --muted:#454f59; --faint:#56606a; --hair:#14191e14; --hair-2:#14191e22;
  --accent:#b04524; --accent-ink:#fff7f2; --accent-soft:#b045241a;
  --good:#0d6b4c; --bad:#a82d1e; --warn:#805400; --info:#2a6fa8;
  --key-top:#ffffff; --key-mid:#f1f3f5; --key-bot:#e2e6ea; --key-edge:#aab3bc; --key-lip:#ffffff; --key-skirt:#9aa4ae; --key-ink:#1d242b;
  --acc-top:#d9683f; --acc-mid:#c2552f; --acc-bot:#b04524; --acc-edge:#7a2f15; --acc-lip:#f0a080; --acc-skirt:#93401f;
  --tray:#cfd5db; --tray-edge:#b5bdc5; --led:#b9c1c9; --led-on:#ff6a3d;
  --metal-1:#f2f4f6; --metal-2:#9aa5af; --metal-3:#e0e5e9; --metal-4:#8b97a2; --metal-rim:#8e99a3;
  --track:#c6cdd4; --track-edge:#aab2ba;
  --shadow:0 18px 40px -24px #2a35424d;
  --fdr1:#2f9b72;--fdr2:#6cbf96;--fdr3:#c9cfd5;--fdr4:#e59a7c;--fdr5:#d86a55;--fdr-ink:#10161b;
  --pitch:#2e6b55; --pitch-line:#ffffff40;
  --skel:#dde2e7; --skel-hi:#f4f6f8;
}
@media (prefers-color-scheme:light){:root:not([data-theme]){color-scheme:light}}

*{box-sizing:border-box}
html{background:var(--ground);color:var(--ink);font:15px/1.6 Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scrollbar-color:var(--faint) var(--ground)}
body{margin:0;background:var(--ground)}
h1,h2,h3,h4{font-family:Sora,Manrope,sans-serif;letter-spacing:-.03em;margin:0;color:var(--ink)}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--info);outline-offset:3px;border-radius:6px}
.num{font-variant-numeric:tabular-nums lining-nums}
.muted{color:var(--muted)}
.label{font:700 11px/1.3 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- Keys ---------- */
.key{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:8px;cursor:pointer;
  font:700 13px Manrope,sans-serif;letter-spacing:.005em;color:var(--key-ink);text-decoration:none;white-space:nowrap;user-select:none;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(var(--key-top),var(--key-mid) 48%,var(--key-bot));border:1px solid var(--key-edge);border-top-color:var(--key-lip);
  box-shadow:inset 0 1px #ffffff12,inset 0 -1px #0004,0 3px 0 var(--key-skirt),0 4px 6px #0004;transition:transform .09s,box-shadow .09s,filter .12s}
.key:hover{filter:brightness(1.05)}
.key:active,.key.is-down{transform:translateY(2px);box-shadow:inset 0 1px 2px #0005,0 1px 0 var(--key-skirt)}
.key:disabled{opacity:.45;cursor:default;transform:none;box-shadow:inset 0 1px #ffffff08,0 1px 0 var(--key-skirt)}
.key.accent{color:var(--accent-ink);background:linear-gradient(var(--acc-top),var(--acc-mid) 48%,var(--acc-bot));border-color:var(--acc-edge);border-top-color:var(--acc-lip);text-shadow:0 1px #fff3;
  box-shadow:inset 0 1px #fff4,inset 0 -1px #0002,0 3px 0 var(--acc-skirt),0 5px 8px #0005}
[data-theme=light] .key.accent{text-shadow:0 -1px #0002}
.key.accent:active,.key.accent.is-down{box-shadow:inset 0 1px 2px #0004,0 1px 0 var(--acc-skirt)}
.key.sm{min-height:32px;padding:0 11px;font-size:12px;border-radius:7px}
.key.lg{min-height:52px;padding:0 24px;font-size:15px;border-radius:10px}
.key.icon{width:40px;padding:0}.key.sm.icon{width:32px}
.key svg{width:16px;height:16px;flex:none}

/* Selector bank: keys in a recessed tray; the chosen key latches down and its LED lights */
.bank{display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:var(--tray);border:1px solid var(--tray-edge);box-shadow:inset 0 2px 4px #0005,inset 0 -1px #ffffff0c}
[data-theme=light] .bank{box-shadow:inset 0 2px 4px #0002,inset 0 -1px #ffffffa0}
.bank button{position:relative;min-height:34px;padding:0 12px;border-radius:6px;cursor:pointer;font:700 12px Manrope,sans-serif;color:var(--ink-2);
  background:linear-gradient(var(--key-top),var(--key-bot));border:1px solid var(--key-edge);border-top-color:var(--key-lip);box-shadow:inset 0 1px #ffffff0c,0 2px 0 var(--key-skirt);transition:transform .08s,box-shadow .08s}
.bank button::before{content:"";display:block;width:4px;height:4px;margin:0 auto 3px;border-radius:50%;background:var(--led);box-shadow:inset 0 1px 1px #0008}
.bank button[aria-pressed=true]{transform:translateY(1px);color:var(--ink);box-shadow:inset 0 1px 3px #0006,0 1px 0 var(--key-skirt);background:linear-gradient(var(--key-mid),var(--key-bot))}
.bank button[aria-pressed=true]::before{background:var(--led-on);box-shadow:0 0 6px var(--led-on)}
.bank button:active{transform:translateY(2px)}

/* Switch: a real toggle with a lamp */
.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:700 12px Manrope;color:var(--ink-2);background:none;border:0;padding:0}
.toggle .slot{position:relative;width:44px;height:24px;border-radius:12px;background:var(--tray);border:1px solid var(--tray-edge);box-shadow:inset 0 2px 4px #0006}
.toggle .slot i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;transition:left .16s cubic-bezier(.3,.7,.3,1.3);
  background:conic-gradient(from 30deg,var(--metal-1),var(--metal-2) 60deg,var(--metal-3) 130deg,var(--metal-4) 190deg,var(--metal-1) 260deg,var(--metal-2) 320deg,var(--metal-1));border:1px solid var(--metal-rim);box-shadow:0 2px 2px #0007}
.toggle[aria-checked=true] .slot i{left:22px}
.toggle[aria-checked=true] .slot{background:linear-gradient(90deg,var(--accent-soft),var(--tray))}

/* Fader: silver cap on a grooved track with a coral fill */
.fader{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer;--v:50%;touch-action:none}
.fader::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--acc-mid) var(--v),var(--track) var(--v));border:1px solid var(--track-edge);box-shadow:inset 0 1px 2px #0009,0 1px #ffffff14}
.fader::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--acc-mid) var(--v),var(--track) var(--v));border:1px solid var(--track-edge)}
.fader::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:5px;border:1px solid var(--metal-rim);border-top-color:#eef3f6;
  background:repeating-linear-gradient(0deg,var(--metal-4) 0 2px,var(--metal-1) 2px 3px,var(--metal-3) 3px 5px);box-shadow:0 3px 0 #141c24,0 4px 6px #0007;transition:transform .08s}
.fader::-moz-range-thumb{width:22px;height:22px;border-radius:5px;border:1px solid var(--metal-rim);background:repeating-linear-gradient(0deg,var(--metal-4) 0 2px,var(--metal-1) 2px 3px,var(--metal-3) 3px 5px);box-shadow:0 3px 0 #141c24,0 4px 6px #0007}
.fader:active::-webkit-slider-thumb{transform:translateY(1px);box-shadow:0 2px 0 #141c24,0 3px 4px #0007}
[data-theme=light] .fader::-webkit-slider-thumb{box-shadow:0 3px 0 #7d8893,0 4px 6px #0003}

/* Dial: knurled silver knob */
.dial{position:relative;width:46px;height:46px;border-radius:50%;flex:none;cursor:ew-resize;touch-action:none;border:1px solid var(--metal-rim);
  background:repeating-conic-gradient(from 0deg,var(--metal-3) 0deg,var(--metal-4) 5deg,var(--metal-3) 9deg,var(--metal-2) 13deg);box-shadow:0 3px 0 #111920,0 5px 7px #0008,inset 0 1px #fff5}
.dial::before{content:"";position:absolute;inset:5px;border-radius:50%;background:conic-gradient(from 30deg,var(--metal-1),var(--metal-2) 60deg,#e3e8ea 130deg,var(--metal-4) 185deg,var(--metal-3) 250deg,var(--metal-2) 310deg,var(--metal-1));border:1px solid #42515c}
.dial::after{content:"";position:absolute;left:calc(50% - 1px);top:6px;width:2px;height:10px;border-radius:1px;background:#26333d;transform-origin:50% 17px;transform:rotate(var(--a,0deg))}

/* Inputs: recessed */
.field{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;border-radius:9px;background:var(--well);border:1px solid var(--well-edge);box-shadow:inset 0 2px 4px #0004,inset 0 -1px #ffffff08;color:var(--ink)}
.field input,.field select{flex:1;min-width:0;border:0;background:none;outline:none;font:600 14px Manrope}
.field svg{width:16px;height:16px;color:var(--muted);flex:none}
select.field{appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;font:600 14px Manrope}

/* Readout: a recessed display well for a live number */
.readout{display:inline-grid;gap:2px;padding:12px 16px;border-radius:10px;background:var(--well);border:1px solid var(--well-edge);box-shadow:inset 0 2px 8px #0006,inset 0 -1px #ffffff0a}
.readout b{font:600 32px/1 Sora;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.readout small{font:700 11px Manrope;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Data: no boxes. Hairlines and rhythm. */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{position:sticky;top:0;z-index:1;padding:10px 10px;text-align:right;font:700 11px Manrope;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--ground);border-bottom:1px solid var(--hair-2);white-space:nowrap}
.table th:first-child,.table td:first-child{text-align:left}
.table th button{all:unset;cursor:pointer}
.table th[aria-sort] button::after{content:" ↓";color:var(--accent)}
.table td{padding:10px 10px;text-align:right;border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums;white-space:nowrap}
.table tbody tr{transition:background .12s}
.table tbody tr:hover{background:var(--accent-soft)}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.who .kit{width:28px;height:26px;flex:none;display:grid;place-items:center}.who .kit svg{width:28px;height:auto}
.who b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{display:block;font-size:12px;color:var(--muted);white-space:nowrap}
.heat{display:inline-block;min-width:44px;padding:3px 7px;border-radius:5px;text-align:right;font-weight:700;background:color-mix(in oklab,var(--accent) calc(var(--h,0)*60%),transparent);color:var(--ink)}
.fdr{display:grid;place-items:center;height:36px;border-radius:6px;font:800 11.5px/1.1 Manrope;color:var(--fdr-ink);box-shadow:inset 0 1px #ffffff18,inset 0 -1px #0003}
.fdr small{display:block;font-size:10px;font-weight:700;opacity:.8}
.f1{background:var(--fdr1)}.f2{background:var(--fdr2)}.f3{background:var(--fdr3)}.f4{background:var(--fdr4)}.f5{background:var(--fdr5)}.fx{background:var(--hair);color:var(--muted)}
.bar{position:relative;height:8px;border-radius:4px;background:var(--track);box-shadow:inset 0 1px 2px #0006;overflow:hidden}
.bar i{position:absolute;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,var(--acc-bot),var(--acc-top))}
.bar b{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);border-radius:1px}
.pos{color:var(--good)}.neg{color:var(--bad)}

/* Skeletons: an instrument powering up — a sweep of light across dim segments, with a scanning LED */
.skel{position:relative;overflow:hidden;border-radius:6px;background:var(--skel);color:transparent!important}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(100deg,transparent 20%,var(--skel-hi) 45%,color-mix(in oklab,var(--accent) 22%,var(--skel-hi)) 50%,var(--skel-hi) 55%,transparent 80%);animation:sweep 1.5s cubic-bezier(.45,0,.2,1) infinite}
.skel-row{display:grid;grid-template-columns:28px 1fr 70px 70px;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--hair)}
.skel-row:nth-child(2) .skel::after{animation-delay:.08s}.skel-row:nth-child(3) .skel::after{animation-delay:.16s}.skel-row:nth-child(4) .skel::after{animation-delay:.24s}.skel-row:nth-child(5) .skel::after{animation-delay:.32s}.skel-row:nth-child(6) .skel::after{animation-delay:.4s}
@keyframes sweep{to{transform:translateX(100%)}}
.boot{display:flex;align-items:center;gap:10px;font:700 11px Manrope;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.boot i{width:6px;height:6px;border-radius:50%;background:var(--led);animation:led 1.2s infinite}
.boot i:nth-child(2){animation-delay:.15s}.boot i:nth-child(3){animation-delay:.3s}
@keyframes led{0%,100%{background:var(--led);box-shadow:none}40%{background:var(--led-on);box-shadow:0 0 8px var(--led-on)}}
/* odometer: digits roll into place when data lands */
.odo{display:inline-flex;overflow:hidden;height:1em;line-height:1}
.odo span{display:inline-block;transition:transform 1s cubic-bezier(.2,.9,.2,1)}

/* Motion: confident, not floaty */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0s!important;transition-duration:0s!important}}
[hidden]{display:none!important}

/* the shared site footer (written by scripts/build-pages.cjs into every page) */
.sitefoot{margin-top:40px;padding:32px clamp(16px,3vw,32px) 40px;border-top:1px solid var(--hair);background:var(--ground)}
.sitefoot-in{display:grid;gap:16px;width:min(1120px,100%);margin:0 auto}
.sitefoot .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:12px;line-height:1.1;color:var(--muted)}
.sitefoot .brand b{display:block;font:700 15px Sora;color:var(--ink);letter-spacing:-.02em}
.sitefoot .brand img{border-radius:50%;box-shadow:0 0 0 1px var(--hair-2)}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.sitefoot nav a{font:700 13px Manrope;color:var(--ink-2);text-decoration:none;padding:4px 0}
.sitefoot nav a:hover,.sitefoot nav a[aria-current=page]{color:var(--accent)}
.sitefoot .fine{margin:0;max-width:760px;font:500 12px/1.6 Manrope;color:var(--faint)}

/* the analytics consent bar (lib/kft-consent.js injects its own base styles; these restyle it) */
html .kft-consent{gap:16px;padding:14px 16px;border-radius:14px;background:var(--raised);border:1px solid var(--hair-2);box-shadow:var(--shadow),inset 0 1px #ffffff0d;color:var(--ink);font:500 13.5px/1.5 Manrope,system-ui,sans-serif}
html .kft-consent p{color:var(--ink-2)}html .kft-consent p strong{color:var(--ink)}html .kft-consent a{color:var(--accent)}
html .kft-consent .kft-consent-actions{gap:12px}
html .kft-consent button{min-height:36px!important;padding:0 16px!important;border-radius:8px!important;font:700 12.5px/1 Manrope,system-ui,sans-serif!important;color:var(--key-ink)!important;
  background:linear-gradient(var(--key-top),var(--key-mid) 48%,var(--key-bot))!important;border:1px solid var(--key-edge)!important;border-top-color:var(--key-lip)!important;box-shadow:inset 0 1px #ffffff12,0 3px 0 var(--key-skirt)!important}
html .kft-consent [data-consent="granted"]{color:var(--accent-ink)!important;background:linear-gradient(var(--acc-top),var(--acc-mid) 48%,var(--acc-bot))!important;border-color:var(--acc-edge)!important;box-shadow:inset 0 1px #fff4,0 3px 0 var(--acc-skirt)!important}
html .kft-consent button:active{transform:translateY(2px)}

/* club crests (js/crests.js): the crest image, with the club's disc mark held back as the fallback */
.kft-crest{display:inline-grid;place-items:center;flex:none;width:var(--crest,16px);height:var(--crest,16px);vertical-align:middle}
.kft-crest>*{grid-area:1/1;width:100%;height:100%}
.kft-crest>img{object-fit:contain;filter:drop-shadow(0 1px 1px #0005)}
.kft-crest>svg{display:none}
.kft-crest.is-disc>img{display:none}.kft-crest.is-disc>svg{display:block}