/* HL Tracker · shared styles for the public page and the admin desk.
   EuroLeague language: off-white and near-black planes, EuroLeague orange
   (#FF5100, sampled from euroleaguebasketball.net) as the one accent, YouTube
   red only where YouTube is meant. Plus Jakarta Sans stands in for Bw
   Modelica, Archivo (expanded, black) for Constructio Grotesk.
   Data colour: delivery minutes ride a heat ramp (core.js HEAT); the YouTube
   leg is plain graphite. Nothing else on the page is coloured. */

@font-face{font-family:Jakarta;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/jakarta-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Jakarta;font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/jakarta-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:600 900;font-stretch:100% 125%;font-display:swap;src:url(fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;font-style:normal;font-weight:600 900;font-stretch:100% 125%;font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============================================================ tokens === */

:root{
  color-scheme:light;
  --plane:#F4F4F2;
  --surface:#FFFFFF;
  --sunken:#EFEFEC;
  --line:#E7E7E3;
  --line-2:#D5D5D0;
  --ink:#0B0B0B;
  --ink-2:#4B4B48;
  --ink-3:#72726D;
  --accent:#FF5100;
  --accent-2:#E87400;
  --accent-ink:#C93F00;        /* orange as small text, 4.6:1 on white */
  --accent-wash:rgba(255,81,0,.10);
  --on-accent:#FFFFFF;
  --yt:#FF0033;
  --ours:#35352F;              /* highlights ready -> YouTube */
  --track:#ECECE8;
  --focus:#FF5100;
  --ok:#14804A;
  --warn:#C42B1C;
  --logo-mark:#FF5100;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 20px -12px rgba(0,0,0,.16);
  --shadow-lift:0 2px 4px rgba(0,0,0,.05), 0 16px 40px -18px rgba(0,0,0,.28);
  --r:16px;
  --gut:clamp(16px, 4vw, 40px);
  --display:Archivo, "Arial Black", sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --plane:#111112;
    --surface:#1A1A1B;
    --sunken:#151516;
    --line:#29292B;
    --line-2:#38383B;
    --ink:#F4F4F1;
    --ink-2:#BEBEB9;
    --ink-3:#8E8E89;
    --accent:#FF6A1A;
    --accent-2:#FF8A1F;
    --accent-ink:#FF8040;
    --accent-wash:rgba(255,106,26,.14);
    --on-accent:#111112;
    --yt:#FF3355;
    --ours:#D9D9D4;
    --track:#252527;
    --focus:#FF6A1A;
    --ok:#3CC47E;
    --warn:#FF6B5B;
    --logo-mark:#FF6A1A;
    --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -16px rgba(0,0,0,.7);
    --shadow-lift:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --plane:#111112; --surface:#1A1A1B; --sunken:#151516; --line:#29292B; --line-2:#38383B;
  --ink:#F4F4F1; --ink-2:#BEBEB9; --ink-3:#8E8E89; --accent:#FF6A1A; --accent-2:#FF8A1F; --accent-ink:#FF8040;
  --accent-wash:rgba(255,106,26,.14); --on-accent:#111112; --yt:#FF3355; --ours:#D9D9D4; --track:#252527;
  --focus:#FF6A1A; --ok:#3CC47E; --warn:#FF6B5B; --logo-mark:#FF6A1A;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -16px rgba(0,0,0,.7);
  --shadow-lift:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -18px rgba(0,0,0,.8);
}

/* ============================================================== base === */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--plane);color:var(--ink);font:400 15px/1.5 Jakarta,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
svg.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}

/* ============================================================ header === */

.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2) 55%,transparent)}
.top .wrap{display:flex;align-items:center;gap:14px;height:60px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);min-width:0}
.brand svg{width:116px;height:16px;flex:none}
.brand .sep{width:1px;height:20px;background:var(--line-2)}
.brand .app{font-weight:700;font-size:14px;white-space:nowrap;letter-spacing:-.005em}
.top .right{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3);min-width:0}
.pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--line-2);
  background:transparent;font-size:12.5px;font-weight:700;color:var(--ink-2);text-decoration:none;white-space:nowrap}
a.pill:hover{color:var(--ink);border-color:var(--ink-3)}
.tz::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ============================================================== hero === */

.hero{padding:clamp(28px,5vw,52px) 0 clamp(20px,3vw,28px)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 12px}
h1{font-family:var(--display);font-stretch:116%;font-weight:900;font-size:clamp(30px,4.6vw,52px);line-height:1;letter-spacing:-.02em;margin:0;color:var(--ink);text-transform:uppercase}
.lede{margin:14px 0 0;max-width:62ch;color:var(--ink-2);font-size:clamp(14.5px,1.5vw,16px)}

/* ======================================================= sections === */

section{margin:0 0 32px}
.sec-h{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin:0 0 14px}
.sec-h h2{margin:0;font-family:var(--display);font-stretch:115%;font-weight:900;font-size:19px;letter-spacing:-.005em;text-transform:uppercase}
.sec-h .meta{font-size:13px;color:var(--ink-3)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--accent);animation:ring 1.8s ease-out infinite;flex:none}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}

/* ======================================================= game card === */

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px}
.gc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;
  display:flex;flex-direction:column;gap:14px;min-width:0;text-align:left;width:100%}
.gc.live{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:var(--shadow-lift);padding:18px 20px}
.gc.live::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.gc-h{display:flex;align-items:center;gap:10px;min-height:26px}
.gc-when{font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.gc-when b{color:var(--ink);font-weight:800}
.gc-h .st{margin-left:auto}
.gc-teams{display:flex;flex-direction:column;gap:10px}
.tm{display:flex;align-items:center;gap:12px;min-width:0}
.tm .nm{font-weight:700;font-size:16px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc.live .tm .nm{font-size:18px;font-weight:800}
.crest{width:36px;height:36px;object-fit:contain;flex:none}
.gc.live .crest{width:46px;height:46px}
.crest.ph{display:inline-grid;place-items:center;border-radius:50%;background:var(--sunken);font-size:11px;font-weight:800;color:var(--ink-3)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid var(--line);padding-top:12px}
.stp{min-width:0}
.stp .k{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.stp .v{display:block;margin-top:4px;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.15}
.stp .d{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-top:2px}
.stp .d b{color:var(--ink);font-weight:800}
.stp.off .v{color:var(--line-2)}
.stp.now .v{color:var(--accent-ink)}
.yt-ic{width:16px;height:11px;flex:none;border-radius:3px;background:var(--yt);position:relative;display:inline-block}
.yt-ic::after{content:"";position:absolute;left:6px;top:3px;border-left:5px solid #fff;border-top:2.6px solid transparent;border-bottom:2.6px solid transparent}
.hbar{position:relative;height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.hbar i{position:absolute;top:0;bottom:0;transition:width .5s cubic-bezier(.2,.7,.2,1), left .5s cubic-bezier(.2,.7,.2,1)}
.hbar i.d{left:0}
.hbar i.p{background:var(--ours)}
.hbar i.pending{background-image:linear-gradient(135deg,rgba(255,255,255,.42) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.42) 75%,transparent 75%);
  background-size:16px 16px;animation:crawl .9s linear infinite}
.hbar i.p.pending{background-color:color-mix(in srgb,var(--ours) 45%,transparent)}
@keyframes crawl{to{background-position:16px 0}}
/* Live cards never sit still: in play, an orange glint runs the empty track;
   once timed, a slow sheen passes over the bar. Waiting legs crawl (above). */
.hbar.play::after,.hbar.sheen::after{content:"";position:absolute;top:0;bottom:0;left:0;width:28%;pointer-events:none}
.hbar.play::after{background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.55;animation:sweep 1.9s cubic-bezier(.45,0,.55,1) infinite}
.hbar.sheen::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:sweep 3.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sweep{from{transform:translateX(-110%)}to{transform:translateX(380%)}}
.gc .gnote{font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:12px}

/* status pills */
.st{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:800;white-space:nowrap;
  background:var(--sunken);color:var(--ink-2);font-variant-numeric:tabular-nums}
.st .hd{width:8px;height:8px;border-radius:50%;flex:none}
.st.play{background:var(--accent);color:var(--on-accent)}
.st.play::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.4s ease-in-out infinite}
.st.wait{background:var(--accent-wash);color:var(--accent-ink)}
.st.done{background:transparent;border:1px solid var(--line-2);color:var(--ink)}
.st.mute{background:transparent;border:1px solid var(--line-2);color:var(--ink-3)}
@keyframes pulse{50%{opacity:.25}}

/* ========================================================== anatomy === */

.anat{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.anat-main{padding:22px 24px 24px}
.anat-side{border-left:1px solid var(--line);padding:22px 24px 24px}
.ttl{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ttl h3,.spread h3{margin:0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ttl .meta{font-size:13px;color:var(--ink-3)}
.line-v{position:relative;margin:44px 8px 0;height:50px}
.line-v .seg{position:absolute;top:10px;height:12px;border-radius:6px;transition:width .6s cubic-bezier(.2,.7,.2,1), left .6s cubic-bezier(.2,.7,.2,1)}
.line-v .node{position:absolute;top:5px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--surface);border:2.5px solid var(--ink)}
.line-v .node.yt{border:0;background:var(--yt);width:30px;height:22px;margin-left:-15px;border-radius:7px}
.line-v .node.yt::after{content:"";position:absolute;left:12px;top:6px;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.line-v .lab{position:absolute;top:34px;font-size:12px;font-weight:700;color:var(--ink-3);white-space:nowrap;transform:translateX(-50%)}
.line-v .lab.first{transform:none;margin-left:-8px}
.line-v .lab.last{transform:translateX(-100%);margin-left:8px}
.line-v .lab.up{top:-26px}
.figs{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px;margin-top:24px}
.fig .k{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.fig .k i{width:14px;height:6px;border-radius:3px;flex:none}
.fig .v{font-family:var(--display);font-stretch:112%;font-weight:900;font-size:44px;line-height:1;letter-spacing:-.02em}
.fig .v small{font-family:Jakarta,sans-serif;font-size:15px;font-weight:700;letter-spacing:0;color:var(--ink-3);margin-left:6px}
.fig.hero-fig .v{font-size:clamp(58px,6.6vw,80px)}
.fig .s{margin-top:8px;font-size:13px;color:var(--ink-3)}
.fig .s b{font-weight:800;color:var(--ink-2)}
.spread p{margin:4px 0 14px;font-size:12.5px;color:var(--ink-3)}
.hist{display:flex;align-items:flex-end;gap:2px;height:118px}
.hist .b{flex:1;min-width:0;border-radius:4px 4px 0 0;transition:height .5s cubic-bezier(.2,.7,.2,1)}
.hist .b.zero{background:var(--line)!important;height:2px!important;border-radius:1px}
.hist-ax{position:relative;height:16px;margin-top:6px;font-size:11px;color:var(--ink-3)}
.hist-ax span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.hist-ax span:first-child{transform:none}
.hist-ax span:last-child{transform:translateX(-100%)}
.empty{margin:0;color:var(--ink-3);font-size:14px;max-width:46ch}

/* ===================================================== round columns === */

.cols-wrap{padding:16px 18px 10px;overflow-x:auto;scrollbar-width:thin}
.cols{position:relative;height:190px;min-width:100%;display:flex;align-items:flex-end;padding-left:30px}
.cols .grid{position:absolute;left:30px;right:0;height:1px;background:var(--line)}
.cols .grid span{position:absolute;left:-30px;top:-8px;width:24px;text-align:right;font-size:11px;color:var(--ink-3)}
.cols .grid.base{background:var(--line-2)}
.col{flex:1 0 22px;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  background:none;border:0;padding:0 0 26px;border-radius:8px}
.col .stack{width:min(16px,62%);display:flex;flex-direction:column-reverse;gap:2px}
.col .stack i{display:block;width:100%}
.col .stack i:last-child{border-radius:4px 4px 0 0}
.col .x{position:absolute;bottom:5px;font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.col .tick{width:4px;height:4px;border-radius:50%;background:var(--line-2)}
.col:hover{background:var(--sunken)}
.col[aria-current="true"]{background:var(--accent-wash)}
.col[aria-current="true"] .x{color:var(--accent-ink);font-weight:900}
.col[aria-current="true"]::after{content:"";position:absolute;bottom:0;left:50%;width:16px;height:3px;margin-left:-8px;border-radius:2px;background:var(--accent)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;font-weight:600;color:var(--ink-3);padding:0 20px 16px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:14px;height:6px;border-radius:3px}
.legend .heat{width:44px;background:linear-gradient(90deg,var(--h0),var(--h1),var(--h2),var(--h3),var(--h4))}

/* ============================================================ round === */

.rbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.rnav{display:flex;align-items:center;gap:8px}
.rnav button{width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);display:grid;place-items:center;color:var(--ink-2)}
.rnav button:hover:not(:disabled){color:var(--ink);border-color:var(--ink-3)}
.rnav button:disabled{opacity:.35;cursor:default}
.rnav .t{min-width:0;padding:0 6px}
.rnav .t b{display:block;font-family:var(--display);font-stretch:118%;font-weight:900;font-size:24px;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase}
.rnav .t span{font-size:13px;font-weight:600;color:var(--ink-3)}
.rbar .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.seg-ctl{display:inline-flex;border:1px solid var(--line-2);border-radius:12px;padding:3px;background:var(--surface)}
.seg-ctl button{border:0;background:none;height:32px;padding:0 14px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink-3)}
.seg-ctl button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);
  background:var(--surface);font-size:13px;font-weight:700;color:var(--ink-2);text-decoration:none}
.btn:hover{color:var(--ink);border-color:var(--ink-3)}
.rsum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 18px;box-shadow:var(--shadow)}
.rsum div{background:var(--surface);padding:14px 18px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.rsum b{display:block;font-family:var(--display);font-stretch:112%;font-weight:900;font-size:30px;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.rsum b small{font-family:Jakarta,sans-serif;font-size:13px;font-weight:700;color:var(--ink-3);margin-left:4px;letter-spacing:0}
.day{margin:22px 0 10px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:12px}
.day::after{content:"";flex:1;height:1px;background:var(--line)}
.day:first-child{margin-top:0}

.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:11px 14px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
th{font-weight:800;color:var(--ink-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
td{font-variant-numeric:tabular-nums}
td.r,th.r{text-align:right}
th:first-child,td:first-child{padding-left:20px}
th:last-child,td:last-child{padding-right:20px}
tr:last-child td{border-bottom:0}
td .crest{width:22px;height:22px;vertical-align:-6px;margin-right:6px}

footer{padding:24px 0 56px;color:var(--ink-3);font-size:12.5px;line-height:1.7}
footer .wrap{display:flex;gap:10px 28px;flex-wrap:wrap;justify-content:space-between}

.tt{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:var(--surface);font-size:12px;line-height:1.5;padding:8px 10px;border-radius:9px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;transform:translateY(4px);transition:opacity .12s, transform .12s;max-width:250px}
.tt.on{opacity:1;transform:none}
.tt b{font-weight:800}

[data-loading] main{opacity:0}
main{transition:opacity .3s}
.banner{margin:16px 0 0;padding:10px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--ink-2)}

/* Crests are drawn for light grounds; black ones vanish on the dark plane. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) img.crest{background:#F2F2EF;border-radius:50%;padding:4px} }
:root[data-theme="dark"] img.crest{background:#F2F2EF;border-radius:50%;padding:4px}

/* ========================================================== mobile === */

@media (max-width: 900px){
  .anat{grid-template-columns:1fr}
  .anat-side{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width: 640px){
  .brand svg{width:100px}
  .brand .sep,.brand .app{display:none}
  .figs{grid-template-columns:1fr 1fr;gap:20px 16px}
  .fig.hero-fig{grid-column:1 / -1}
  .anat-main,.anat-side{padding-left:18px;padding-right:18px}
  .cols-wrap{padding-left:8px;padding-right:8px}
  .legend{padding-left:18px;padding-right:18px}
  .cards{grid-template-columns:1fr}
  .rbar .acts{margin-left:0;width:100%}
  .rbar .acts .seg-ctl{flex:1}
  .rbar .acts .seg-ctl button{flex:1}
  .rsum div{padding:12px}
  .rsum b{font-size:24px}
  th:first-child,td:first-child{padding-left:14px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  .top,.acts,.rnav button{display:none!important}
  body{background:#fff}
  .card,.gc{box-shadow:none}
}
.stp .d .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px}