/* ============================================================================
   StatsPL (Premier League stats) — Google-style controls, modern minimal colourful content
============================================================================ */
:root, html.theme-light {
  --blue:#4285F4; --red:#EA4335; --yellow:#FBBC05; --green:#34A853;
  --blue-ink:#1967d2; --green-ink:#137333; --red-ink:#c5221f; --yellow-ink:#a05a00;
  --blue-c:#e8f0fe; --green-c:#e6f4ea; --red-c:#fce8e6; --yellow-c:#fef7e0; --purple-c:#f3e8fd; --purple-ink:#8430ce;
  --ink:#1f2430; --ink-soft:#5f6470; --ink-faint:#697080;      /* every text token ≥ 4.5 : 1 on the surfaces it sits on (WCAG AA) */
  --kit-edge-d:transparent; --kit-edge-l:rgba(31,36,48,.55);   /* thin edge for club colours that vanish on this theme (see colorEdge in ui-core.js) */
  --surface:#ffffff; --surface-2:#f6f7fb; --surface-3:#eef0f6; --surface-4:#e4e7ef;
  --border:#e3e6ee; --border-soft:#eef0f5;
  --scrim:rgba(20,22,30,.42);
  --shadow-sm:0 1px 2px rgba(20,20,43,.05), 0 1px 1px rgba(20,20,43,.03);
  --shadow-md:0 2px 10px rgba(20,20,43,.05), 0 1px 3px rgba(20,20,43,.04);
  --shadow-pop:0 16px 40px rgba(20,20,43,.16), 0 4px 12px rgba(20,20,43,.08);
  --glow-a:rgba(66,133,244,.07); --glow-b:rgba(234,67,53,.05); --glow-c:rgba(251,188,5,.05);
  --r-card:20px; --r-ctl:12px;
  --brand-ink:#14213d; --brand-pl:#1f4fb5;                    /* StatsPL wordmark: navy "Stats" + blue "PL", as in brand/statspl-logo.png */
  color-scheme:light;
}
html.theme-dark {
  --blue:#8ab4f8; --red:#f28b82; --yellow:#fdd663; --green:#81c995;
  --blue-ink:#8ab4f8; --green-ink:#81c995; --red-ink:#f28b82; --yellow-ink:#fdd663;
  --blue-c:#1f2b44; --green-c:#1b2f23; --red-c:#3a2220; --yellow-c:#3a3119; --purple-c:#2f2240; --purple-ink:#d7aefb;
  --ink:#e8eaed; --ink-soft:#a0a6ae; --ink-faint:#8e949c;
  --brand-ink:#e8eaed; --brand-pl:#8ab4f8;
  --kit-edge-d:rgba(255,255,255,.6); --kit-edge-l:transparent;
  --surface:#202124; --surface-2:#171819; --surface-3:#2d2e30; --surface-4:#3a3b3e;
  --border:#3c4043; --border-soft:#2d2e30;
  --scrim:rgba(0,0,0,.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 2px 12px rgba(0,0,0,.35);
  --shadow-pop:0 16px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  --glow-a:rgba(138,180,248,.08); --glow-b:rgba(242,139,130,.05); --glow-c:rgba(253,214,99,.04);
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; min-height:100vh; color:var(--ink); -webkit-font-smoothing:antialiased;
  font-family:'Google Sans','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:14px; line-height:1.4;
  background:
    radial-gradient(1100px 480px at 92% -8%, var(--glow-a), transparent 60%),
    radial-gradient(900px 480px at -8% 6%, var(--glow-b), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, var(--glow-c), transparent 60%),
    var(--surface-2);
  background-attachment:fixed;
}
button{font-family:inherit; color:inherit;}
button:focus-visible, input:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------------------------------------------------------------- app bar */
.appbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px; padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));
  background:color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0; flex:1;}
.logo{width:38px; height:38px; flex:none; display:grid; place-items:center; filter:drop-shadow(0 1px 2px rgba(20,33,61,.18));}
.logo img{width:100%; height:100%; display:block;}
.brand h1{font-size:19px; font-weight:700; margin:0; letter-spacing:-.015em; color:var(--brand-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.brand h1 .pl{color:var(--brand-pl); position:relative;}
/* arrow across the P (PL_ARROW in ui-core.js): the box is the P glyph's cap square (Google Sans: glyph starts .081em right of the
   span's left edge, cap .716em, baseline .287em above the span's bottom), all in em so it follows every responsive font size.
   overflow:hidden (the svg default) is what cuts the tail flush with the P's left edge. */
.pl-arrow{position:absolute; left:.081em; bottom:.287em; width:.716em; height:.716em; overflow:hidden; pointer-events:none;}
.brand .sub{font-size:12.5px; color:var(--ink-soft); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bar-actions{display:flex; align-items:center; gap:6px; flex:none;}
.icon-btn{
  width:40px; height:40px; border-radius:50%; border:none; background:transparent; cursor:pointer; display:grid; place-items:center; color:var(--ink-soft); transition:background .15s,color .15s;
}
.icon-btn:hover, .icon-btn.open{background:var(--surface-3); color:var(--ink);}
.icon-btn svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.fab{
  height:40px; padding:0 16px 0 12px; border-radius:20px; border:none; cursor:pointer; background:var(--blue-ink); color:#fff; font-weight:600; font-size:13.5px;
  display:inline-flex; align-items:center; gap:6px; box-shadow:var(--shadow-sm); transition:filter .15s, box-shadow .15s;
}
html.theme-dark .fab{color:#0b1d3a;}
.fab:hover{filter:brightness(1.07); box-shadow:var(--shadow-md);}
.fab svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round;}

/* ---------------------------------------------------------------- layout */
.app{max-width:1280px; margin:0 auto; padding:20px max(20px,env(safe-area-inset-right)) 64px max(20px,env(safe-area-inset-left));}
.card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-card); box-shadow:var(--shadow-md);
  padding:20px 22px; margin-bottom:16px;
}
.boot .card, #sec-output:not(.noanim) .chart-card{animation:rise .32s ease both;}
@keyframes rise{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.card-head{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.card-head h2{margin:0; font-size:15px; font-weight:600; letter-spacing:-.005em;}
.card-head .dot{width:10px; height:10px; border-radius:50%; flex:none;}
.card-head .grow{flex:1;}
.card-head .hint{color:var(--ink-faint); font-size:12.5px;}

.row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 22px;}
.row + .row{margin-top:16px; padding-top:16px; border-top:1px solid var(--border-soft);}
.field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.field > .lbl{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; display:flex; align-items:center; gap:8px;}
.field > .lbl .val{color:var(--blue-ink); letter-spacing:0; text-transform:none; font-weight:600;}
.spacer{flex:1;}

/* ---------------------------------------------------------------- controls */
.seg{display:inline-flex; align-items:center; background:var(--surface-3); border-radius:999px; padding:3px; gap:2px; height:38px; max-width:100%;}
.seg button{
  border:none; background:transparent; padding:0 15px; height:100%; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--ink-soft);
  cursor:pointer; transition:background .15s,color .15s,box-shadow .15s; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
}
.seg button:hover:not(.on){color:var(--ink);}
.seg button.on{background:var(--surface); color:var(--blue-ink); font-weight:600; box-shadow:var(--shadow-sm);}
html.theme-dark .seg button.on{background:var(--surface-4);}
.seg.tight button{padding:0 11px;}

.chip{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px 0 14px; max-width:100%;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-ctl); font-size:13.5px; font-weight:500; color:var(--ink);
  cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s;
}
.chip:hover{border-color:var(--blue);}
.chip.open{border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);}
.chip .lab{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.chip .caret{width:16px; height:16px; flex:none; stroke:var(--ink-faint); fill:none; stroke-width:2; transition:transform .15s;}
.chip.open .caret{transform:rotate(180deg); stroke:var(--blue);}
.chip.add{border-style:dashed; color:var(--blue-ink); padding:0 14px;}
.chip.add:hover{background:var(--blue-c);}
.chip.small{height:34px; font-size:13px;}

.btn{
  height:38px; padding:0 18px; border-radius:var(--r-ctl); border:1px solid transparent; font-size:13.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:background .15s, box-shadow .15s, filter .15s, border-color .15s;
}
.btn.primary{background:var(--blue-ink); color:#fff; box-shadow:0 1px 3px color-mix(in srgb, var(--blue-ink) 40%, transparent);}
html.theme-dark .btn.primary{color:#0b1d3a;}
.btn.primary:hover{filter:brightness(1.07);}
.btn.ghost{background:var(--surface); border-color:var(--border); color:var(--blue-ink);}
.btn.ghost:hover{background:var(--blue-c); border-color:var(--blue);}
.btn.text{background:transparent; color:var(--blue-ink); padding:0 12px;}
.btn.text:hover{background:var(--blue-c);}
.btn.danger{background:var(--surface); border-color:var(--border); color:var(--red-ink);}
.btn.danger:hover{background:var(--red-c); border-color:var(--red);}
.btn.danger-solid{background:var(--red-ink); color:#fff;}
html.theme-dark .btn.danger-solid{color:#3b0a07;}
.btn.sm{height:32px; padding:0 12px; font-size:13px;}
.btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

.input{
  height:38px; border:1px solid var(--border); border-radius:var(--r-ctl); padding:0 13px; font:inherit; font-size:13.5px; color:var(--ink);
  background:var(--surface); outline:none; transition:border-color .15s, box-shadow .15s; min-width:0;
}
.input:focus{border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);}
.input.num{width:72px; text-align:center; padding:0 8px;}
.input.invalid{border-color:var(--red); box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);}
.input::placeholder{color:var(--ink-faint);}
.field-error{color:var(--red-ink); font-size:12px; margin-top:2px;}
.range{appearance:none; -webkit-appearance:none; width:150px; height:6px; border-radius:3px; outline:none; background:linear-gradient(90deg,var(--blue) var(--p,50%), var(--surface-4) var(--p,50%)); cursor:pointer;}
.range::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--blue-ink); border:3px solid var(--surface); box-shadow:var(--shadow-sm); cursor:grab;}
.range::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--blue-ink); border:3px solid var(--surface); box-shadow:var(--shadow-sm);}

/* team badges */
.tag{display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:0 7px; height:20px; min-width:36px; border-radius:6px; flex:none; font-variant-numeric:tabular-nums;}
.badge{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; font-weight:700; font-size:11.5px; letter-spacing:.02em; flex:none; box-shadow:var(--shadow-sm);}
.badge.sm{width:30px; height:30px; font-size:10px;}

/* ------------------------------------------------------------ summary strip */

/* ---------------------------------------------------------- scoreline / results */
.scoreline{display:flex; align-items:center; gap:20px 28px; flex-wrap:wrap; justify-content:space-between;}
.score-box{background:var(--surface-2); border-radius:12px; padding:6px 18px; font-size:22px; font-weight:700; letter-spacing:.02em; box-shadow:inset 0 0 0 1px var(--border-soft); white-space:nowrap; font-variant-numeric:tabular-nums;}
.score-box .dash{opacity:.45; margin:0 5px;}
/* One event = ONE pill: [minute | ⚽ scorer · 🎯 assister · type]. Same ink on the same tint throughout (no nested fills), so the AA contrast of
   --*-ink on --*-c holds for every part; the minute cap, the type tag and the assist are separated by a hairline / outline only. */
.gwr-tl{list-style:none; margin:0 auto; padding:0; display:flex; flex-direction:column; gap:6px; max-width:560px;}   /* centred under the score on wide screens, so home and away pills stay within sight of each other */
.tl{display:flex; justify-content:flex-start; min-width:0;}
.tl.away{justify-content:flex-end;}
.ev{display:inline-flex; align-items:stretch; max-width:100%; min-width:0; border-radius:14px; font-size:12px; font-weight:600; background:var(--green-c); color:var(--green-ink);}
.ev.miss{background:var(--yellow-c); color:var(--yellow-ink);}
.ev.og, .ev.red{background:var(--red-c); color:var(--red-ink);}
.ev.assist{background:var(--blue-c); color:var(--blue-ink);}
.ev .mn{display:flex; align-items:center; justify-content:center; flex:none; min-width:42px; padding:5px 9px 5px 11px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; border-right:1px solid color-mix(in srgb, currentColor 30%, transparent);}
.ev .bd{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; min-width:0; padding:5px 11px;}
.ev .mn + .bd{padding-left:9px;}
.ev .who, .ev .as{display:inline-flex; align-items:center; gap:5px; min-width:0; overflow-wrap:anywhere;}
.ev .as{font-weight:500;}
.ev .ico{flex:none; font-size:12px; line-height:1;}
.ev .tg{flex:none; font-size:10.5px; font-weight:700; letter-spacing:.02em; line-height:15px; padding:0 7px; border-radius:999px; border:1px solid color-mix(in srgb, currentColor 45%, transparent);}
.ev .rc{flex:none; width:9px; height:13px; border-radius:2px; background:var(--red); display:inline-block;}
.ev .rc.y{background:linear-gradient(135deg, var(--yellow) 50%, var(--red) 50%);}   /* second yellow */

.fold-body{margin-top:16px; display:flex; flex-direction:column; gap:10px;}   /* one fixture per row, each with its own height */
.gwr{border:1px solid var(--border-soft); border-radius:16px; background:var(--surface-2); overflow:hidden; transition:background .15s;}
.gwr-head{width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; background:none; border:none; cursor:pointer; text-align:left;}
.gwr-head:hover{background:color-mix(in srgb, var(--blue) 6%, transparent);}
.gwr-m{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; flex:1; min-width:0;}
.gwr-side{display:flex; align-items:center; gap:8px; min-width:0; font-weight:600; font-size:13.5px;}
.gwr-side.home{justify-content:flex-end; text-align:right;}
.gwr-side .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gwr .score-box{font-size:16px; padding:3px 12px; background:var(--surface);}
.gwr-cnt{font-size:11.5px; color:var(--ink-faint); white-space:nowrap;}
.gwr-caret{width:16px; height:16px; stroke:var(--ink-faint); fill:none; stroke-width:2; transition:transform .2s; flex:none;}
.gwr.open .gwr-caret{transform:rotate(180deg);}
.gwr-body{display:none; padding:2px 14px 14px; border-top:1px dashed var(--border);}
.gwr.open .gwr-body{display:block; padding-top:12px;}
.note{font-size:12.5px; color:var(--ink-soft); margin-top:8px;}
.note code{background:var(--surface-3); padding:1px 6px; border-radius:6px; font-size:12px;}

/* ----------------------------------------------------------- config blocks */
.chips-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-width:0;}
.cfg{display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; padding:10px 12px; border-radius:16px; background:var(--surface-2); border:1px solid var(--border-soft);}
.cond{display:inline-flex; align-items:center; gap:4px; height:34px; padding:0 4px 0 12px; border:1px solid var(--border); background:var(--surface); border-radius:999px; font-size:13px; font-weight:500; box-shadow:var(--shadow-sm);}
.cond .cn{max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cond .op{border:none; background:var(--blue-c); color:var(--blue-ink); font-weight:700; border-radius:999px; height:24px; min-width:28px; padding:0 8px; cursor:pointer; font-size:13px;}
.cond .cv{width:62px; border:none; background:transparent; font:inherit; font-size:13px; color:var(--ink); outline:none; text-align:center; border-bottom:1.5px solid var(--border); height:24px; margin:0 2px;}
.cond .cv:focus{border-bottom-color:var(--blue);}
.empty-hint{color:var(--ink-faint); font-size:13px;}

/* ------------------------------------------------------------------- charts */
.chart-card{padding:20px 22px 18px;}
.chart-head{display:flex; align-items:center; gap:10px; margin-bottom:14px; min-height:32px;}
.chart-head h3{margin:0; font-size:15px; font-weight:600; letter-spacing:-.005em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chart-head .sub{font-size:12.5px; color:var(--ink-soft); white-space:nowrap;}
.chart-head .grow{flex:1;}
.star{width:34px; height:34px; border-radius:50%; border:none; background:transparent; cursor:pointer; display:grid; place-items:center; color:var(--ink-faint); transition:transform .15s, color .15s, background .15s; flex:none;}
.star svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linejoin:round;}
.star:hover{color:#f0b400; background:var(--yellow-c); transform:scale(1.08) rotate(-6deg);}
.star.saved{color:#f0b400;} .star.saved svg{fill:#f0b400;}
.stack{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));}
.stack{margin-bottom:16px;}
.stack > .card{margin-bottom:0;}
.app section{scroll-margin-top:84px;}
.stack.single{grid-template-columns:1fr;}

.hb{display:flex; flex-direction:column; gap:7px;}
.hb-row{display:grid; grid-template-columns:minmax(120px,215px) 1fr; align-items:center; gap:12px;}
.hb-name{display:flex; align-items:center; gap:8px; min-width:0; font-weight:500; font-size:13.5px;}
.hb-name .rk{width:16px; text-align:right; color:var(--ink-faint); font-size:11.5px; font-weight:600; flex:none; font-variant-numeric:tabular-nums;}
.hb-name .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.hb-track{position:relative; height:28px; border-radius:9px; background:var(--surface-3);}
.hb-fill{position:relative; height:100%; border-radius:9px; display:flex; width:var(--w); animation:grow .55s cubic-bezier(.2,.8,.2,1) both; min-width:6px;}
.noanim .hb-fill{animation:none;}
@keyframes grow{from{width:0;}}
.hb-seg{height:100%; flex:0 0 auto; min-width:0; transition:filter .15s;}
.hb-seg:first-child{border-radius:9px 0 0 9px;} .hb-seg:last-child{border-radius:0 9px 9px 0;} .hb-seg:only-child{border-radius:9px;}
.hb-seg:hover{filter:brightness(1.1);}
.hb-seg + .hb-seg{box-shadow:inset 1.5px 0 0 var(--surface);}
.hb-val{position:absolute; top:50%; transform:translateY(-50%); font-size:12.5px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; pointer-events:none;}
.hb-val.in{right:9px;} .hb-val.out{left:calc(100% + 8px); color:var(--ink);}
.legend{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.lg{display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink);}
.lg i{width:10px; height:10px; border-radius:3px; flex:none;}
.lg.off{opacity:.45; text-decoration:line-through;}
.lg:hover{border-color:var(--blue);}

/* scatter + line */
.plot{position:relative; width:100%; user-select:none;}
.plot svg{display:block; width:100%; overflow:visible;}
.plot .grid line{stroke:var(--border); stroke-width:1;}
.plot .grid line.zero{stroke:var(--surface-4);}
.plot .axis text{fill:var(--ink-faint); font-size:11.5px; font-weight:500; font-variant-numeric:tabular-nums;}
.plot .axis-title{fill:var(--ink-soft); font-size:12px; font-weight:600;}
.plot .pt{cursor:pointer; transition:r .12s, opacity .15s;}
.plot .pt-lbl{fill:var(--ink-soft); font-size:10.5px; font-weight:600; pointer-events:none; paint-order:stroke; stroke:var(--surface); stroke-width:3px; stroke-linejoin:round;}
.plot .guide{stroke:var(--ink-faint); stroke-dasharray:3 4; stroke-width:1; pointer-events:none;}
.plot .ln{fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:opacity .15s;}
.plot .dim{opacity:.13;}
.plot .hit{cursor:pointer;}
.tip{
  position:fixed; z-index:200; pointer-events:none; background:var(--surface); color:var(--ink); border:1px solid var(--border-soft); border-radius:14px;
  box-shadow:var(--shadow-pop); padding:11px 13px; font-size:12.5px; min-width:150px; max-width:280px; opacity:0; transform:translateY(4px); transition:opacity .1s, transform .1s;
}
.tip.show{opacity:1; transform:none;}
.tip .th{display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; margin-bottom:7px;}
.tip .th + .th{margin-top:-2px;}
.tip .tr{display:flex; justify-content:space-between; gap:18px; margin-top:3px; color:var(--ink-soft);}
.tip .tr b{color:var(--ink); font-variant-numeric:tabular-nums;}
.tip .tr b.good{color:var(--green-ink);}
.tip .sw{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px;}
.tip .tl{color:var(--ink-faint); font-size:11.5px; margin-top:6px;}
.lines-legend{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.lines-legend .lg{height:30px; padding:0 10px 0 6px;}
.lines-legend .lg.on{background:var(--surface-3);}
.lines-legend .lg.dim{opacity:.4;}
.lines-note{font-size:12px; color:var(--ink-faint); margin-top:8px;}

/* table */
.tbl-wrap{overflow-x:auto; margin:0 -6px; padding:0 6px 4px;}
table.data{width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px;}
table.data th{
  position:sticky; top:0; text-align:right; padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--ink-faint); text-transform:uppercase;
  border-bottom:2px solid var(--border-soft); white-space:nowrap; background:var(--surface);
}
table.data th.l{text-align:left;}
table.data th.sortable{cursor:pointer; user-select:none;}
table.data th.sortable:hover{color:var(--blue-ink);}
table.data th.sorted{color:var(--blue-ink);}
table.data td{padding:9px 14px; border-bottom:1px solid var(--border-soft); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
table.data td.l{text-align:left;}
table.data td.n{font-weight:600; background-repeat:no-repeat; background-position:left center; background-size:var(--bw,0%) 70%; border-radius:6px; background-image:linear-gradient(color-mix(in srgb, var(--tc, var(--blue)) 34%, transparent), color-mix(in srgb, var(--tc, var(--blue)) 34%, transparent));}
table.data td.best{color:var(--green-ink); font-weight:700;}
table.data .cell-name{display:inline-flex; align-items:center; gap:9px; font-weight:500;}
table.data .rk{color:var(--ink-faint); font-size:11.5px; width:18px; text-align:right; display:inline-block;}

/* empty / banner */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; padding:34px 20px; gap:10px; color:var(--ink-soft);}
.empty svg{width:56px; height:56px; stroke:var(--ink-faint); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;}
.empty .t{font-weight:600; color:var(--ink); font-size:15px;}
.empty .s{font-size:13px; max-width:420px;}
.dropzone{border:2px dashed var(--border); border-radius:var(--r-card); padding:48px 24px; background:var(--surface); text-align:center;}
.dropzone.drag{border-color:var(--blue); background:var(--blue-c);}
.banner{display:none; margin-bottom:16px; padding:12px 16px; border-radius:14px; font-size:13.5px; font-weight:500;}
.banner.show{display:block; background:var(--blue-c); color:var(--blue-ink);}
.banner.error{background:var(--red-c); color:var(--red-ink);}

/* saved / manager lists */
.list-item{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-soft);}
.list-item:last-child{border-bottom:none; padding-bottom:0;}
.list-item .body{flex:1; min-width:0;}
.list-item .t{font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.list-item .m{font-size:12.5px; color:var(--ink-soft); margin-top:2px; overflow:hidden; text-overflow:ellipsis;}
.pill{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:11.5px; font-weight:600; background:var(--surface-3); color:var(--ink-soft);}
.pill.blue{background:var(--blue-c); color:var(--blue-ink);} .pill.green{background:var(--green-c); color:var(--green-ink);}
.pill.yellow{background:var(--yellow-c); color:var(--yellow-ink);} .pill.red{background:var(--red-c); color:var(--red-ink);}
.saved-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px;}
.saved{border:1px solid var(--border-soft); background:var(--surface-2); border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:8px;}
.saved .t{font-weight:600; font-size:14px;}
.saved .pills{display:flex; flex-wrap:wrap; gap:6px;}
.saved .acts{display:flex; gap:8px; margin-top:2px;}
.saved .when{font-size:11.5px; color:var(--ink-faint);}

/* ------------------------------------------------------------------ popovers */
#popLayer{position:fixed; inset:0; z-index:300; pointer-events:none;}
.pop-scrim{position:fixed; inset:0; background:var(--scrim); pointer-events:auto; animation:fade .15s both;}
@keyframes fade{from{opacity:0;}}
.pop{
  position:fixed; pointer-events:auto; background:var(--surface); border:1px solid var(--border-soft); border-radius:16px; box-shadow:var(--shadow-pop);
  display:flex; flex-direction:column; overflow:hidden; animation:pop .16s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes pop{from{opacity:0; transform:translateY(-4px) scale(.98);}}
.pop.sheet{left:0 !important; right:0 !important; bottom:0 !important; top:auto !important; width:auto !important; max-height:72vh !important; border-radius:22px 22px 0 0; animation:sheet .22s cubic-bezier(.2,.9,.3,1) both;}
@keyframes sheet{from{transform:translateY(40px); opacity:.4;}}
.pop-search{padding:10px; border-bottom:1px solid var(--border-soft); flex:none;}
.pop-search .input{width:100%;}
.pop-list{overflow-y:auto; padding:6px; overscroll-behavior:contain;}
.pop-grp{font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); padding:12px 12px 4px;}
.pop-item{
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 12px; border:none; background:transparent; border-radius:10px; cursor:pointer; text-align:left; font-size:13.5px; color:var(--ink);
}
.pop-item:hover{background:var(--surface-2);}
.pop-item.on{background:var(--blue-c); color:var(--blue-ink); font-weight:600;}
.pop-item .grow{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pop-item .meta{color:var(--ink-faint); font-size:12px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums;}
.pop-item .chk{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; flex:none;}
.pop-item.disabled{opacity:.45; cursor:not-allowed;}
.pop-item.danger{color:var(--red-ink);}
.pop-item .ic{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; color:var(--ink-soft);}
.pop-empty{padding:22px; text-align:center; color:var(--ink-faint); font-size:13px;}
.pop-item .sub{display:block; font-size:12px; color:var(--ink-faint); font-weight:400;}

/* ------------------------------------------------------------------- modal */
#modalLayer{position:fixed; inset:0; z-index:250; pointer-events:none;}
.modal-scrim{position:absolute; inset:0; background:var(--scrim); display:flex; align-items:center; justify-content:center; padding:16px; pointer-events:auto; animation:fade .15s both; backdrop-filter:blur(2px);}
.modal{background:var(--surface); border-radius:24px; width:min(520px,100%); max-height:92vh; overflow:auto; padding:24px 24px 20px; box-shadow:var(--shadow-pop); animation:modal .2s cubic-bezier(.2,.9,.3,1.1) both;}
@keyframes modal{from{opacity:0; transform:translateY(12px) scale(.97);}}
.modal h2{font-size:18px; font-weight:600; margin:0 0 4px;}
.modal .desc{color:var(--ink-soft); font-size:13px; margin-bottom:18px;}
.modal .fields{display:flex; flex-direction:column; gap:16px;}
.modal .acts{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}
.op-row{display:flex; align-items:center; gap:10px;}
.op-row .ol{font-size:12px; color:var(--ink-faint); min-width:64px; font-weight:600;}

/* toast */
#toasts{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:400; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
.toast{background:#303134; color:#e8eaed; padding:11px 18px; border-radius:12px; font-size:13.5px; box-shadow:var(--shadow-pop); animation:toast .25s cubic-bezier(.2,.9,.3,1.1) both; display:flex; align-items:center; gap:10px;}
html.theme-dark .toast{background:#e8eaed; color:#202124;}
.toast.out{opacity:0; transform:translateY(8px); transition:all .2s;}
@keyframes toast{from{opacity:0; transform:translateY(12px);}}

footer.foot{text-align:center; color:var(--ink-faint); font-size:12px; margin-top:20px;}

/* -------------------------------------------------------------- responsive */
@media (max-width:900px){
}
@media (max-width:640px){
  .app{padding-top:14px; padding-bottom:48px; padding-left:max(14px,env(safe-area-inset-left)); padding-right:max(14px,env(safe-area-inset-right));}
  .appbar{padding-left:max(14px,env(safe-area-inset-left)); padding-right:max(14px,env(safe-area-inset-right));}
  .card{padding:16px 16px; border-radius:18px;}
  .brand .sub{display:none;}
  .brand h1{font-size:16px;} .bar-actions{gap:2px;} .brand{gap:10px;}
  .fab span{display:none;} .fab{padding:0 12px;}
  .row{gap:14px 14px;}
  .field{flex:1 1 calc(50% - 7px);} .field.full, .field.grow{flex:1 1 100%;}
  .seg{max-width:100%;}
  .seg button{padding:0 12px;}
  .hb-row{grid-template-columns:minmax(96px,128px) 1fr; gap:8px;}
  .hb-name .rk{display:none;}
    .scoreline{flex-direction:column; align-items:flex-start;}
  .stack{grid-template-columns:1fr;}
  .range{width:100%;}
}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001s !important; transition-duration:.001s !important;} }

@media (max-width:420px){ .brand h1{font-size:14.5px;} .logo{width:34px;height:34px;} .appbar{gap:8px;} }
@media (max-width:480px){
  .hb-row{grid-template-columns:1fr; gap:3px;}
  .hb-track{height:24px;} .hb-fill, .hb-seg:first-child{border-radius:8px;}
  .hb{gap:10px;}
  .hb-name .rk{display:inline-block;}
}
.stack:not(.single) .hb-row{grid-template-columns:minmax(104px,150px) 1fr; gap:10px;}

/* ---- appbar middle summary (only when there is room) ---- */
.brand{flex:1 1 0;}
.bar-actions{flex:1 1 0; justify-content:flex-end;}
.bar-mid{display:none; flex:0 1 auto; min-width:0; align-items:center; gap:8px; justify-content:center;}
@media (min-width:1120px){ .bar-mid{display:flex;} }
.mid-chip{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:999px; font-size:13px; white-space:nowrap; min-width:0;}
.mid-chip span.l{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;}
.mid-chip b{font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink);}
.mid-chip .nm{overflow:hidden; text-overflow:ellipsis; max-width:150px; color:var(--ink); font-weight:600;}
.mid-chip.blue{background:var(--blue-c); color:var(--blue-ink);} .mid-chip.green{background:var(--green-c); color:var(--green-ink);}
.mid-chip.yellow{background:var(--yellow-c); color:var(--yellow-ink);} .mid-chip.red{background:var(--red-c); color:var(--red-ink);}

/* ---- collapsible card ---- */
.card-head.toggle{cursor:pointer; user-select:none; margin-bottom:0;}
.card-head.toggle .caret{margin-left:auto; width:18px; height:18px; stroke:var(--ink-faint); fill:none; stroke-width:2; transition:transform .2s; flex:none;}
.card.collapsed .card-head.toggle .caret{transform:rotate(-90deg);}
.card:not(.collapsed) .card-head.toggle{margin-bottom:16px;}
.card.collapsed .card-body{display:none;}
.card-head .sum{display:none; flex:1 1 0; min-width:0; justify-content:flex-start; align-items:center; gap:8px; overflow-x:auto; overflow-y:hidden; padding:2px 14px; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent); mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);}
.card-head .sum::-webkit-scrollbar{display:none;}
.card-head .sum::before, .card-head .sum::after{content:""; margin:auto;}   /* centres the chips; still scrolls from the start when they overflow */
.card.collapsed .card-head .sum{display:flex;}
.card-head.toggle .hint{flex:1 1 auto; text-align:right; padding-right:8px;}
.card.collapsed .card-head .hint{display:none;}
.card-head.toggle h2{flex:none;}

/* ---- stepper (replaces native number spinners) ---- */
input[type=number]{appearance:textfield; -moz-appearance:textfield;}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.stepper{display:inline-flex; align-items:center; height:38px; border:1px solid var(--border); border-radius:999px; background:var(--surface); padding:0 3px; transition:border-color .15s, box-shadow .15s;}
.stepper:focus-within{border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);}
.stepper button{width:30px; height:30px; border-radius:50%; border:none; background:transparent; color:var(--blue-ink); cursor:pointer; display:grid; place-items:center; padding:0;}
.stepper button:hover{background:var(--blue-c);}
.stepper button svg{width:16px; height:16px; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; fill:none;}
.stepper input{width:46px; border:none; outline:none; background:transparent; text-align:center; font:inherit; font-size:13.5px; font-weight:600; color:var(--ink); padding:0; height:100%;}
.stepper input:disabled{opacity:.5;}

/* ---- hero metric ---- */
.chip.hero{background:var(--blue-c); border-color:var(--blue); color:var(--blue-ink); font-weight:600; box-shadow:0 1px 3px color-mix(in srgb, var(--blue) 25%, transparent);}
.chip.hero .caret{stroke:var(--blue-ink);}

/* ---- match scoreline: teams as columns, players listed below ---- */

/* ---- hero chip alignment ---- */
.chip .lab{display:inline-flex; align-items:center; gap:7px;}
.chip .caret{align-self:center;}

/* ---- bookmarks button + drawer ---- */
.bm-btn{position:relative;}
.bm-n{position:absolute; top:3px; right:1px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--yellow); color:#3b2a00; font-size:10.5px; font-weight:700; display:grid; place-items:center; line-height:1;}
.drawer-scrim{position:fixed; inset:0; z-index:215; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity .2s;}
.drawer-scrim.open{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(460px,100vw); z-index:220; background:var(--surface-2); box-shadow:var(--shadow-pop); transform:translateX(104%); transition:transform .26s cubic-bezier(.2,.9,.3,1); display:flex; flex-direction:column; visibility:hidden;}
.drawer.open{transform:none; visibility:visible;}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px 22px; border-bottom:1px solid var(--border-soft); background:var(--surface);}
.drawer-head h2{margin:0; font-size:17px; font-weight:600;}
.drawer-body{flex:1; overflow-y:auto; padding:16px; overscroll-behavior:contain;}
.drawer .card{box-shadow:none; margin-bottom:14px; padding:16px 18px;}
.drawer .saved-grid{grid-template-columns:1fr;}

.card-head .sum .mid-chip{height:30px; flex:none; font-size:12.5px;}
.mid-chip.purple{background:var(--purple-c); color:var(--purple-ink);}
.mid-chip .tag{height:18px; min-width:30px; font-size:10px;}

.brand{flex:0 1 auto; max-width:340px;}
.bar-mid{flex:1 1 0; overflow:hidden; padding:0 8px;}
.bar-actions{flex:none;}
.appbar{gap:16px;}
.bar-mid .mid-chip{flex:none;}
@media (max-width:1119px){ .brand{flex:1 1 0; max-width:none;} .bar-actions{flex:none;} }

/* ---- chip internals: everything on one optical centre line ---- */
.mid-chip{line-height:1; align-items:center;}
.mid-chip > *{display:inline-flex; align-items:center; line-height:1; height:100%;}
.mid-chip span.l{padding-top:1px;}
.mid-chip b, .mid-chip .nm{font-size:13px;}

/* ---- per-chart rank controls ---- */
.rank-ctl{display:inline-flex; align-items:center; gap:8px;}
.rank-ctl.off{opacity:.5;}
.seg.sm{height:34px;} .seg.sm button{font-size:12.5px; padding:0 12px;}
.stepper.sm{height:34px;} .stepper.sm button{width:26px; height:26px;} .stepper.sm input{width:40px; font-size:13px;}

/* ---- players / teams token box ---- */
.ent-box{display:flex; align-items:flex-start; gap:10px; padding:8px; border:1px solid var(--border-soft); border-radius:16px; background:var(--surface-2); min-height:50px;}
.ent-box > .chip{flex:none; align-self:flex-start;}
.ent-chips{flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; max-height:104px; overflow-y:auto; padding:1px 2px; align-content:flex-start; min-height:34px;}
.ent-chips .empty-hint{padding:0 4px;}
.ent-chip{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 4px 0 6px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-size:13px; font-weight:500; box-shadow:var(--shadow-sm);}
.ent-chip .tag{height:18px; min-width:30px; font-size:10px;}
.ent-chip .en{max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ent-box > .btn{flex:none; align-self:center;}
@media (max-width:640px){ .ent-box{flex-wrap:wrap;} .ent-chips{flex:1 1 100%;} .rank-ctl{flex-wrap:wrap;} }

/* ---- rank controls inside chart headers ---- */
.chart-head{flex-wrap:wrap; row-gap:8px;}
.chart-head .rank-ctl{margin:0 4px 0 6px;}
.ent-box{align-items:center;}
.ent-box > .chip{align-self:center;}
.ent-chips{align-content:center;}
.ent-chips .empty-hint{display:inline-flex; align-items:center; min-height:34px;}

/* ---- metric setup inside chart cards + "add" grid cell ---- */
.add-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:190px; width:100%; cursor:pointer; font:inherit; font-size:14px; font-weight:600; color:var(--blue-ink);
  background:transparent; border:2px dashed var(--border); box-shadow:none; transition:background .15s, border-color .15s;}
.add-card:hover{background:var(--blue-c); border-color:var(--blue);}
.add-card .plus{width:44px; height:44px; border-radius:50%; background:var(--blue-c); display:grid; place-items:center;}
.add-card:hover .plus{background:var(--surface);}
.add-card svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round;}
.stack > .add-card{margin-bottom:0;}

/* ================= chart card layout ================= */
.chart-card{padding:18px 20px 20px;}
.chart-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; min-height:38px; flex-wrap:nowrap;}
.ch-main{display:flex; align-items:center; gap:10px; min-width:0; flex:1; flex-wrap:wrap; row-gap:4px;}
.ch-main h3{font-size:16px; font-weight:600; margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ch-main .sub{font-size:12.5px; color:var(--ink-soft); white-space:nowrap;}
.ch-actions{display:flex; align-items:center; gap:4px; flex:none;}
.chip.hero.title{height:36px; font-size:15px; padding:0 12px 0 12px; max-width:100%;}
.chip.hero.title .lab{gap:8px;}

.filters-row{display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px 12px; margin:-4px 0 14px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:14px;}
.filt-toggle .fn{width:15px; height:15px; fill:none; stroke:var(--ink-soft); stroke-width:1.7; stroke-linejoin:round; flex:none;}
.filt-toggle{padding:0 10px 0 11px;}
.filt-toggle .lab{gap:6px;}
.filt-toggle .cnt{min-width:18px; height:18px; border-radius:9px; background:var(--blue-ink); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; padding:0 5px; margin-left:-2px;}
html.theme-dark .filt-toggle .cnt{color:#0b1d3a;}
.filt-toggle.on{background:var(--blue-c); border-color:var(--blue);}
.filt-toggle.on .fn{stroke:var(--blue-ink);}
.filt-toggle.on .caret{transform:rotate(180deg); stroke:var(--blue);}

/* Top/Bottom + N as a single pill */
.rank-ctl{display:inline-flex; align-items:center; height:34px; gap:2px; padding:0 3px 0 3px; border:1px solid var(--border); border-radius:999px; background:var(--surface); margin:0;}
.rank-ctl .rk-dir{display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 11px 0 8px; border:none; border-radius:999px; font-size:12.5px; font-weight:600; cursor:pointer; background:var(--blue-c); color:var(--blue-ink); transition:filter .15s;}
.rank-ctl .rk-dir.bottom{background:var(--red-c); color:var(--red-ink);}
.rank-ctl .rk-dir:hover{filter:brightness(.96);}
.rank-ctl .rk-dir svg{width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.rank-ctl .rk-dir:disabled{cursor:not-allowed;}
.rank-ctl .stepper{border:none; box-shadow:none; background:transparent; height:30px; padding:0;}
.rank-ctl .stepper:focus-within{box-shadow:none;}
.rank-ctl .stepper input{width:34px;}
.rank-ctl .stepper button{width:24px; height:24px;}
.rank-ctl.off{opacity:.5;}
.chart-head .rank-ctl{margin:0;}
@media (max-width:640px){ .chart-head{flex-wrap:wrap;} .chip.hero.title{font-size:14px;} }

/* ---- unified single-line chart header ---- */
.chart-head{margin-bottom:14px;}
.ch-main{gap:8px 10px;}
.filters-row{margin:-4px 0 14px;}

.ch-actions{gap:2px;}
.ch-main{gap:8px;}
.rank-ctl .stepper input{width:30px;}
.rank-ctl .rk-dir{padding:0 10px 0 7px;}

/* ---- plain hero metric (no special effects) ---- */
.chip.title{height:36px; font-size:15px; font-weight:600; padding:0 12px; max-width:100%;}
.chip.title .lab{gap:8px;}

/* ---- scatter quality zones ---- */
.plot .zone{stroke:none;}
.plot .z-ex{fill:var(--green);} .plot .z-best{fill:var(--blue);} .plot .z-avg{fill:var(--yellow);} .plot .z-bad{fill:var(--red);}
.plot rect.zone{fill-opacity:.09;}
html.theme-dark .plot rect.zone{fill-opacity:.13;}
.plot .zone-line{stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:5 5; opacity:.7; pointer-events:none;}
.tip .tr b.zb{color:var(--blue-ink);} .tip .tr b.za{color:var(--yellow-ink);} .tip .tr b.zbad{color:var(--red-ink);}

/* ---- dropdown category shortcuts ---- */
.pop-list{position:relative;}
.pop-cats{display:flex; gap:6px; overflow-x:auto; padding:8px 10px; border-bottom:1px solid var(--border-soft); scrollbar-width:none; flex:none;}
.pop-cats::-webkit-scrollbar{display:none;}
.pop-cats[hidden]{display:none;}
.pop-cat{flex:none; height:28px; padding:0 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:12px; font-weight:600; color:var(--ink-soft); cursor:pointer; white-space:nowrap; transition:background .12s, color .12s, border-color .12s;}
.pop-cat:hover{background:var(--blue-c); color:var(--blue-ink); border-color:var(--blue);}

/* ---- filter value inputs: an inset field with breathing room (no underline hugging the pill edge) ---- */
.cond{gap:6px; padding:0 5px 0 12px; height:36px;}
.cond .cv{width:68px; height:26px; margin:0 2px; padding:0 8px; border:1px solid var(--border-soft); border-bottom-width:1px; border-radius:8px; background:var(--surface-2); text-align:center; font-size:13px;}
.cond .cv:focus{border-color:var(--blue); background:var(--surface); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);}
.cond .op{height:26px;}

/* ---- scatter header + options ---- */
.plot-opts{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border-soft);}
.chk{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft); cursor:pointer; user-select:none;}
.chk input{accent-color:var(--blue-ink); width:16px; height:16px; margin:0;}

/* ---- scatter axis control: icon · metric · operator · value in one pill ---- */
.axis-grp{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 6px 0 5px; border:1px solid var(--border); border-radius:999px; background:var(--surface); box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s;}
.axis-grp:hover{border-color:var(--ink-faint);}
.axis-grp:focus-within{border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);}
.axis-grp .ax-ic{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none;}
.axis-grp.y .ax-ic{background:var(--red-c); color:var(--red-ink);} .axis-grp.x .ax-ic{background:var(--blue-c); color:var(--blue-ink);}
.axis-grp .ax-ic svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;}
.axis-grp .ax-metric{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 6px 0 4px; border:none; background:transparent; border-radius:999px; font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; max-width:200px;}
.axis-grp .ax-metric:hover, .axis-grp .ax-metric.open{background:var(--surface-3);}
.axis-grp .ax-metric .lab{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.axis-grp .ax-metric .caret{width:16px; height:16px; stroke:var(--ink-faint); fill:none; stroke-width:2; flex:none;}
.axis-grp .ax-sep{width:1px; height:20px; background:var(--border); flex:none; margin:0 2px;}
.axis-grp .op{border:none; background:var(--blue-c); color:var(--blue-ink); font-weight:700; border-radius:999px; height:26px; min-width:28px; padding:0 8px; cursor:pointer; font-size:13px;}
.axis-grp .cv{width:64px; height:26px; margin:0; padding:0 8px; border:1px solid var(--border-soft); border-radius:8px; background:var(--surface-2); text-align:center; font-size:13px; color:var(--ink); outline:none;}
.axis-grp .cv:focus{border-color:var(--blue); background:var(--surface);}

/* ================= unified header control sizing (every chart type) ================= */
.chart-head{--hc:36px;}
.chart-head .chip, .chart-head .rank-ctl, .chart-head .axis-grp, .chart-head .btn.sm{height:var(--hc); min-height:var(--hc); box-sizing:border-box; font-size:14px; font-weight:600;}
.chart-head .chip{padding:0 12px; border-radius:var(--r-ctl);}
.chart-head .chip.filt-toggle{padding:0 12px; gap:8px;}
.chart-head .chip .lab{font-size:14px;}
.chart-head .btn.sm{padding:0 14px; border-radius:var(--r-ctl);}
.chart-head .rank-ctl{padding:0 4px; gap:4px;}
.chart-head .rank-ctl .rk-dir{height:28px; font-size:13.5px; padding:0 11px 0 8px;}
.chart-head .rank-ctl .stepper{height:30px;}
.chart-head .rank-ctl .stepper input{width:32px; font-size:14px; font-weight:600;}
.chart-head .rank-ctl .stepper button{width:26px; height:26px;}
.chart-head .axis-grp{padding:0 5px 0 4px; gap:6px;}
.chart-head .axis-grp .ax-ic{width:26px; height:26px;}
.chart-head .axis-grp .ax-metric{height:28px; font-size:14px;}
.chart-head .axis-grp .op, .chart-head .axis-grp .cv{height:28px;}
.chart-head .chip.add{font-weight:600;}

/* scatter axis pills: no border / shadow / focus highlight — a flat tinted fill instead */
.axis-grp, .chart-head .axis-grp{border:none; box-shadow:none; background:var(--surface-2);}
.axis-grp:hover{border:none;}
.axis-grp:focus-within{border:none; box-shadow:none;}
.axis-grp .cv:focus{border-color:var(--border-soft); background:var(--surface);}

/* ================= fixed-size chart grid: height follows the window, content scrolls ================= */
#sec-output{--card-h:clamp(420px, 66vh, 700px);}
#sec-output > .chart-card{height:var(--card-h);}
.stack > .chart-card, #sec-output > .chart-card{display:flex; flex-direction:column; overflow:hidden;}
.stack > .chart-card .chart-head, .stack > .chart-card .filters-row, #sec-output > .chart-card .chart-head, #sec-output > .chart-card .filters-row{flex:none;}
.chart-card > .chart-body{min-height:0; flex:1 1 auto; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; margin:0 -10px; padding:0 8px 2px 10px; overscroll-behavior:contain;}
.chart-card > .chart-body::-webkit-scrollbar{width:8px;}
.chart-card > .chart-body::-webkit-scrollbar-thumb{background:var(--surface-4); border-radius:4px;}
.chart-card > .chart-body{scrollbar-width:thin; scrollbar-color:var(--surface-4) transparent;}
.chart-card > .chart-body .tbl-wrap{overflow:visible; margin:0; padding:0;}
.chart-card > .chart-body table.data th{top:0; z-index:1;}
.chart-card > .chart-body .plot svg{max-width:100%;}
@media (max-width:640px){ #sec-output{--card-h:clamp(380px, 72vh, 640px);} }

/* ================= H-Bar / Line grid: 3-up (wide) · 2-up (medium) · 1-up (small); height = 10 rows ================= */
#sec-output{--row:35px;}
.stack{grid-template-columns:repeat(3, minmax(0, 1fr));}
@media (max-width:1099px){ .stack{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width:699px){ .stack{grid-template-columns:minmax(0, 1fr);} }
@media (max-width:480px){ #sec-output{--row:57px;} }
.stack > .chart-card .chart-body{height:var(--body-h, 350px); flex:none;}   /* --body-h = 10 × one measured bar row (see fitGrid) */
.stack > .add-card{min-height:140px;}
/* narrower cards: tighten the bar rows so ~10 bars fit comfortably */
.stack .hb-row, .stack:not(.single) .hb-row{grid-template-columns:minmax(96px, 138px) 1fr; gap:10px;}
@media (max-width:480px){ .stack .hb-row{grid-template-columns:1fr; gap:3px;} }

/* ---- H-Bar / Line card header: the hero metric shows its FULL name.
   Row 1 holds [hero ... ★ ✕] and, when everything fits, also [Top N] [Filters]; when it doesn't (fitHeads() in
   ui-render.js adds .two-row) Top N + Filters move to row 2. A name too long even for row 1 is truncated (ellipsis). ---- */
.stack > .chart-card{container-type:inline-size; container-name:cc;}
.ch-wrap{flex-wrap:wrap; row-gap:8px; justify-content:flex-start;}
.ch-wrap .ch-main{display:contents;}
.ch-wrap .chip.title{order:1; flex:0 1 auto; min-width:0; max-width:none;}
.ch-wrap .chip.title .lab{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
.ch-wrap .rank-ctl{order:2; flex:none;}
.ch-wrap .chip.filt-toggle{order:3; flex:none;}
.ch-wrap .ch-actions{order:4; margin-left:auto; flex:none;}
.ch-wrap.two-row .chip.title{flex:1 1 calc(100% - var(--act-w, 80px));}
.ch-wrap.two-row .ch-actions{order:2;}
.ch-wrap.two-row .rank-ctl{order:3;}
.ch-wrap.two-row .chip.filt-toggle{order:4;}
.ch-wrap.two-row.put-rank .chip.title, .ch-wrap.two-row.put-filt .chip.title{flex:0 1 auto;}
.ch-wrap.two-row.put-rank .rank-ctl{order:2;}  .ch-wrap.two-row.put-rank .ch-actions{order:3;}  .ch-wrap.two-row.put-rank .chip.filt-toggle{order:4;}
.ch-wrap.two-row.put-filt .chip.filt-toggle{order:2;}  .ch-wrap.two-row.put-filt .ch-actions{order:3;}  .ch-wrap.two-row.put-filt .rank-ctl{order:4;}
.ch-wrap.compact .rank-ctl .rk-dir{font-size:0; gap:0; padding:0 8px;}
.ch-wrap.compact .chip.filt-toggle{padding:0 10px;}
.ch-wrap.compact .chip.filt-toggle .lab{display:none;}
.ch-wrap.measure{flex-wrap:nowrap;}
.ch-wrap.measure .chip.title, .ch-wrap.measure .chip.title .lab{flex:none; max-width:none; overflow:visible;}

/* ---- merged Data & chart card ---- */

/* ---- phones: compact "add" card ---- */
@media (max-width:699px){
  .stack > .add-card{min-height:0; height:56px; flex-direction:row; gap:10px; border-width:1.5px; border-radius:16px; font-size:14px;}
  .add-card .plus{width:32px; height:32px;}
  .add-card svg{width:18px; height:18px;}
}

/* ================= phones ================= */
@media (max-width:480px){
  /* nav: theme toggle lives in the settings menu */
  .bar-actions [data-act=theme]{display:none;}
  .brand h1{font-size:15px;}
}
@media (max-width:480px){
  .appbar{gap:6px;}
  .brand{gap:8px;} .brand h1{font-size:14px;}
  .bar-actions{gap:0;} .bar-actions .icon-btn{width:36px; height:36px;} .fab{height:36px; padding:0 10px;}
}
@media (max-width:480px){
  .stack .hb-row, .stack:not(.single) .hb-row{grid-template-columns:1fr; gap:3px;}
  .stack .hb{gap:10px;}
}

/* header controls never get squashed */
.rank-ctl, .chip.filt-toggle, .chart-head .btn{flex:none;}
.stepper{flex:none;}

/* tables scroll sideways when they have more columns than fit */
.chart-card > .chart-body:has(.tbl-wrap){overflow-x:auto;}
.chart-card > .chart-body .tbl-wrap{min-width:max-content;}

@media (max-width:480px){
  /* Table card: columns on top, then Top/N + Filters, actions right-aligned underneath */
  .ch-table{flex-wrap:wrap; row-gap:10px;}
  .ch-table .ch-main{flex:1 1 100%; flex-wrap:wrap;}
  .ch-table .ch-actions{flex:1 1 100%; justify-content:flex-end; order:3; gap:6px;}
  .ch-table .chip.title{max-width:100%;}
  /* keep the player column visible while scrolling sideways */
  table.data th.l, table.data td.l{position:sticky; left:0; z-index:2; background:var(--surface);}
  table.data th{padding:10px 10px;} table.data td{padding:9px 10px;}
  /* line chart legend: compact chips */
  .lines-legend{gap:6px;}
  .lines-legend .lg{height:28px; font-size:12px; padding:0 8px 0 4px; max-width:100%;}
  .lines-note{display:none;}
}
@media (max-width:480px){
  .ch-table .ch-main{flex:1 1 calc(100% - 92px);}
  .ch-table .ch-actions{flex:none; order:2; margin-left:auto; align-self:flex-start;}
  .ch-table .btn .ex-l{display:none;}
  .ch-table .btn.sm{padding:0 10px; width:36px;}
}
@media (max-width:480px){
  /* Scatter header: Y pill / X pill full width, then [Top − N +] ........ [★] */
  .ch-scatter{flex-wrap:wrap; row-gap:8px;}
  .ch-scatter .ch-main{display:contents;}
  .ch-scatter .axis-grp{order:1; flex:1 1 100%; min-width:0;}
  .ch-scatter .axis-grp .ax-metric{flex:1 1 auto; justify-content:flex-start; max-width:none; min-width:0;}
  .ch-scatter .axis-grp .ax-metric .caret{margin-left:auto;}
  .ch-scatter .rank-ctl{order:2;}
  .ch-scatter .filt-toggle{order:2;}
  .ch-scatter .ch-actions{order:3; margin-left:auto;}
}
@media (max-width:520px){
  /* scoreline: score on top, then each team full width with its players listed below */
}
.op-row .chip{min-width:0; max-width:100%;}
.op-row .chip .lab{overflow:hidden; text-overflow:ellipsis;}
@media (max-width:480px){
  /* fixture rows: the club badge already carries the name, truncated full names add nothing */
  .gwr-side .nm{display:none;}
  .gwr-m{gap:14px; justify-content:center; grid-template-columns:auto auto auto;}
  .gwr-side.home{justify-content:flex-end;}
  .gwr-head{padding:10px 14px;}
  .gwr-m{flex:1;}
}

/* segmented controls keep the size of their labels on phones too */
@media (max-width:640px){ .field.full .seg{width:auto;} }

/* table column chip: remove (×) lives inside the chip */
.col-chip{display:inline-flex; align-items:center; gap:2px; padding:0 5px 0 12px !important;}
.col-chip .col-main{display:inline-flex; align-items:center; gap:8px; height:100%; padding:0; border:none; background:transparent; font:inherit; color:inherit; cursor:pointer; min-width:0;}
.col-chip .col-main.open{color:var(--blue-ink);}
.col-chip .col-main .lab{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.col-chip:hover{border-color:var(--blue);}

@media (max-width:480px){
  /* bars: ONE line per row — name beside the bar; no rank number / club tag (the bar colour carries the club) */
  .stack .hb-name .rk, .stack .hb-name .tag{display:none;}
  .stack .hb-row, .stack:not(.single) .hb-row{grid-template-columns:minmax(92px, 120px) 1fr; gap:10px; align-items:center;}
  .stack .hb{gap:7px;}
  .stack .hb-name{font-size:13px;}
  /* table header: columns, then [Top n] [Filters] on ONE row, actions underneath */
  .ch-table .ch-main{display:contents;}
  .ch-table .col-chips{order:1; flex:1 1 0; min-width:0; display:flex; flex-wrap:wrap; gap:8px;}
  .ch-table .ch-actions{order:2; flex:none; margin-left:auto; align-self:flex-start; flex-direction:row;}
  .ch-table .ch-ctls{order:3;}
}
.field > .seg{align-self:flex-start;}   /* size to the labels instead of stretching across the field */
.ch-ctls{display:contents;}
@media (max-width:480px){ .ch-table .ch-ctls{display:flex; flex:1 1 100%; align-items:center; gap:8px;} }

.col-chips{display:contents;}
@media (max-width:480px){ .ch-table .col-chips{display:flex;} }

/* table cards: several tables stack full-width; body = header + 10 rows, scrolls beyond that */
.tbl-stack, .sc-stack{display:flex; flex-direction:column; gap:16px;}
.tbl-stack > .chart-card > .chart-body{max-height:var(--tbl-h, 420px); overflow:auto;}
.tbl-stack > .chart-card > .chart-body .tbl-wrap{overflow:visible;}
.tbl-stack table.data th{position:sticky; top:0; z-index:3; background:var(--surface);}
.tbl-stack table.data th.l{z-index:4; left:0;}

.tbl-stack .add-card, .sc-stack .add-card{flex-direction:row; gap:12px; min-height:64px;}
.tbl-stack .add-card .plus, .sc-stack .add-card .plus{width:34px; height:34px;}

:root{--col0:var(--blue); --col1:var(--green); --col2:var(--yellow); --col3:var(--red); --col4:var(--purple-ink);}


/* filter capsule: [operator | value] as ONE joined control (axis filters + chart filter chips) */
.fcap{display:inline-flex; align-items:center; height:30px; padding:2px; gap:2px; border-radius:999px; background:var(--surface-3); box-sizing:border-box; transition:box-shadow .15s, background .15s;}
.fcap:focus-within{background:var(--surface); box-shadow:0 0 0 2px var(--blue);}
.fcap .op, .axis-grp .fcap .op, .chart-head .axis-grp .fcap .op, .cond .fcap .op{height:26px; min-width:26px; padding:0; display:grid; place-items:center; border-radius:50%; font-size:14px; background:var(--blue-c); color:var(--blue-ink);}
.fcap .op:hover{filter:brightness(1.12);}
.fcap .cv, .axis-grp .fcap .cv, .chart-head .axis-grp .fcap .cv, .cond .fcap .cv{width:58px; height:26px; margin:0; padding:0 10px 0 8px; border:none; border-radius:999px; background:transparent; box-shadow:none; text-align:left; font-size:13.5px; font-weight:600; color:var(--ink); outline:none; -moz-appearance:textfield; appearance:textfield;}
.fcap .cv::placeholder{color:var(--ink-faint); font-weight:500;}
.fcap .cv::-webkit-outer-spin-button, .fcap .cv::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.fcap .cv:focus{background:transparent; border:none; box-shadow:none;}
.cond .fcap{height:28px;}

.chart-card > .chart-body:has(.plot-opts){overflow:visible; scrollbar-gutter:auto; margin:0; padding:0;}
.chart-card:has(.plot-opts){height:auto;}

@media (max-width:480px){ #sec-output .chart-card:has(.plot-opts){padding:14px 10px 12px;} #sec-output .chart-card:has(.plot-opts) .plot-opts{margin-left:4px;} }

.stack[data-multi="0"] .rm-chart, .tbl-stack[data-multi="0"] .rm-chart, .sc-stack[data-multi="0"] .rm-chart{display:none;}

.plot .pt-lbl{stroke:none; paint-order:normal;}

/* one size for every chart-header icon button (save ★ / remove ×) in every view and breakpoint */
.chart-head .ch-actions .star, .chart-head .ch-actions .x-btn{width:32px; height:32px;}

/* REMOVE / CLOSE button — single component (xBtn() in ui-render.js). Sizes: default 24px · .rm-chart / .lg 32px */
.x-btn{width:24px; height:24px; flex:none; padding:0; border:none; border-radius:50%; background:transparent; color:var(--ink-faint); display:grid; place-items:center; cursor:pointer; transition:background .15s, color .15s;}
.x-btn svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;}
.x-btn:hover{background:var(--red-c); color:var(--red-ink);}
.x-btn.rm-chart, .x-btn.lg{width:32px; height:32px;}
.x-btn.rm-chart svg, .x-btn.lg svg{width:15px; height:15px;}
.col-chip .x-btn{margin-left:2px;}
.filters-row .chip.add{height:36px;}

/* collapsible match card: header = [dot] BRE 3–0 CHE · Match · GW n  ⌄ ; the scoreline sits below when open */

.pop-gw{display:inline-block; min-width:38px; font-size:11px; font-weight:700; color:var(--ink-faint); letter-spacing:.04em;}


/* collapsible section header: the WHOLE top strip of the card is the click target, not just the title text */
.card-head.toggle{position:relative; min-height:40px; --cpx:22px; --cpy:20px;}
@media (max-width:640px){ .card-head.toggle{--cpx:16px; --cpy:16px;} }
.card-head.toggle::before{content:""; position:absolute; inset:calc(var(--cpy) * -1) calc(var(--cpx) * -1) -10px calc(var(--cpx) * -1); border-radius:var(--r-card) var(--r-card) 0 0; z-index:0;}   /* invisible hit area: no hover tint */
.card.collapsed .card-head.toggle::before{bottom:calc(var(--cpy) * -1); border-radius:var(--r-card);}
.card-head.toggle > *{position:relative; z-index:1;}
.card-head.toggle{-webkit-tap-highlight-color:transparent;}
.card-head.toggle:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:10px;}   /* keyboard focus only (not mouse) */

/* ---- storage status (drawer footer): where saved charts / groups / derived metrics live ---- */
.drawer-foot{flex:none; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--border-soft); background:var(--surface);}
.drawer-foot:empty{display:none;}
.store-pill{display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border-radius:var(--r-ctl); background:var(--green-c); color:var(--ink);}
.store-pill.warn{background:var(--yellow-c);}
.store-pill.err{background:var(--red-c);}
.store-pill .dot{flex:none; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 24%, transparent);}
.store-pill.warn .dot{background:var(--yellow); box-shadow:0 0 0 3px color-mix(in srgb, var(--yellow) 28%, transparent);}
.store-pill.err .dot{background:var(--red); box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 24%, transparent);}
.store-pill .t{font-size:13px; font-weight:600; line-height:1.35;}
.store-pill .m{font-size:12px; color:var(--ink-soft); line-height:1.4; overflow-wrap:anywhere;}
.store-pill code{font:inherit; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:var(--ink); background:color-mix(in srgb, var(--ink) 8%, transparent); padding:1px 5px; border-radius:5px;}

/* ================= audit fixes (later rules win) ================= */
/* filter capsules shrink inside a narrow card — the metric name ellipsises, the ✕ stays reachable (320px phones) */
.cond{min-width:0; max-width:100%;}
.cond .cn{flex:0 1 auto; min-width:0;}
.cond .fcap, .cond .x-btn{flex:none;}
@media (max-width:480px){ .ch-table .ch-ctls{flex-wrap:wrap; row-gap:8px;} }

/* sortable table headers are real buttons (keyboard + screen readers); they look exactly like the old header text */
table.data th.sortable{padding:0;}      /* the button carries the padding: the WHOLE header cell is the click target, as before */
.th-btn{display:block; width:100%; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; text-align:inherit; background:none; border:0; padding:10px 14px; margin:0; cursor:pointer; white-space:nowrap;}
@media (max-width:480px){ .th-btn{padding:10px;} }
.th-btn:focus-visible{outline-offset:2px; border-radius:4px;}
table.data th.sorted .th-btn{color:var(--blue-ink);}
.pop-item:focus-visible, .pop-cat:focus-visible, .seg button:focus-visible{outline-offset:-2px;}
.pop-item:focus-visible{background:var(--surface-2);}
.pop-item.on:focus-visible{background:var(--blue-c);}

/* status banner: message + optional Retry + dismiss; error / warn / info */
.banner.show{display:flex; align-items:center; gap:10px;}
.banner .banner-msg{flex:1; min-width:0; overflow-wrap:anywhere;}
.banner .btn{flex:none;}
.banner.warn{background:var(--yellow-c); color:var(--yellow-ink);}

/* skip link: first stop for keyboard users */
.skip{position:absolute; left:12px; top:-60px; z-index:500; background:var(--blue-ink); color:#fff; padding:10px 16px; border-radius:var(--r-ctl); font-weight:600; font-size:13.5px; text-decoration:none; transition:top .12s;}
.skip:focus{top:10px;}
html.theme-dark .skip{color:#0b1d3a;}
#sec-output:focus{outline:none;}

/* line chart: halo under a series whose colour would vanish on this theme */
.plot .ln-halo{fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; pointer-events:none;}

/* initial load */
.card.loading{margin-bottom:16px;}

/* bookmarks drawer: search box (shown once there is a lot to scroll through) */
.drawer-search{flex:none; padding:10px 16px; border-bottom:1px solid var(--border-soft); background:var(--surface);}
.drawer-search[hidden]{display:none;}
.drawer-search .input{width:100%;}
.empty-hint .q{font-weight:600; color:var(--ink);}

/* buttons are fixed-height controls: a label never wraps; in a card header the TITLE gives way (ellipsis), not the action button */
.btn{white-space:nowrap;}
.card-head .btn{flex:none;}
.card-head.toggle h2{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}