/* docs/theme.css — OWDB shared design tokens + primitives.
   Linked directly by docs/scrims.html and docs/capture/*.html.
   Inlined at build time into docs/index.html by faceit_sync/_dashboard.py
   (with fonts base64-embedded for that build only), because the exported
   dashboard must stay a single self-contained file — see
   tests/test_export.py::test_export_html_is_self_contained_and_valid.

   Three things live here:
     1. Tokens — colour, type, radii. Every page reads these and nothing
        restates their values; tests/test_ui_consistency.py fails a page that
        hardcodes what a token already says.
     2. Primitives — .card, .btn, the wordmark, the segmented toggle, the tab
        nav.
     3. Shared page furniture (foot of this file) — the shell, table, chip and
        bar rules the dashboard and docs/scrims.html had both written out
        byte-for-byte. Anything the two data pages agree on belongs here; a
        second copy only decides which page gets the next fix.
   Page-specific components stay in their page. They already read the tokens,
   so they re-theme without being duplicated here. */

/* Onest (SIL OFL, docs/fonts/OFL-onest.txt): one variable face in three
   subsets, so a page only downloads the scripts its text uses. Latin-ext and
   Cyrillic are there for EMEA team and player names. */
@font-face{font-family:'Onest';font-weight:100 900;font-style:normal;font-display:swap;src:url('fonts/onest-latin-wght.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:'Onest';font-weight:100 900;font-style:normal;font-display:swap;src:url('fonts/onest-latin-ext-wght.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Onest';font-weight:100 900;font-style:normal;font-display:swap;src:url('fonts/onest-cyrillic-wght.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --font-display:'Onest',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Onest',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Corner radii. Four steps, declared once here and NOT repeated in the
     palette blocks below — nothing about a corner is palette-dependent, and
     a token the palette blocks don't redefine simply carries through.
     Before this existed the pages had drifted to twelve different radii
     (3,4,5,6,7,8,9,10,11,12,20,999px), which is not a design decision anyone
     made; it is what happens when each component picks its own. Round to the
     nearest step rather than adding a fifth.
     Tightened 2026-09-24 for the match-room look (flat, square-ish).
       --r-sm   controls and chips — buttons, inputs, tags, table cells.
                Matches .btn and .card below, which set the squared-off look
                the whole system is drawn around.
       --r-md   panels and cards that float above the page
       --r-lg   modals and the large floating surfaces
       --r-pill fully-round: pills, badges, avatars */
  --r-sm:2px; --r-md:3px; --r-lg:4px; --r-pill:999px;

  /* Breakpoints are NOT tokens — custom properties cannot be used in media
     queries. The agreed set is 640px (phone) / 900px (tablet-ish) / 1500px
     (max content width); see the shared mobile pass at the foot of this file
     and keep page-specific queries on those numbers. */

  color-scheme:light;
  --bg:#f5f7fa; --surface:#ffffff; --surface2:#eef1f6; --fg:#171a20; --muted:#5c6674;
  --faint:#8b95a4; --line:#e3e8f0; --line2:#d6dce6;
  --accent:#4f46e5; --accent-bright:#4338ca; --accent-weak:rgba(79,70,229,.12); --on-accent:#fff;
  --tank:#3f80c4; --damage:#d5563f; --support:#33a06a;
  --good:#1f9d61; --mid:#b8860b; --bad:#cf4b36;
  --shadow:none;
}
@media (prefers-color-scheme: dark){
  :root{color-scheme:dark;--bg:#0d1015;--surface:#161a21;--surface2:#1d232c;--fg:#e7ebf2;--muted:#98a2b2;
    --faint:#6b7686;--line:#252c37;--line2:#313a48;--accent:#8087ff;--accent-bright:#a5abff;--accent-weak:rgba(128,135,255,.16);--on-accent:#0b1020;
    --tank:#5a9bd8;--damage:#e9694f;--support:#46b57c;--good:#34b877;--mid:#d3a02a;--bad:#e5624a;
    --shadow:none;}
}
:root[data-theme="dark"]{color-scheme:dark;--bg:#0d1015;--surface:#161a21;--surface2:#1d232c;--fg:#e7ebf2;--muted:#98a2b2;
  --faint:#6b7686;--line:#252c37;--line2:#313a48;--accent:#8087ff;--accent-bright:#a5abff;--accent-weak:rgba(128,135,255,.16);--on-accent:#0b1020;
  --tank:#5a9bd8;--damage:#e9694f;--support:#46b57c;--good:#34b877;--mid:#d3a02a;--bad:#e5624a;
  --shadow:none;}
:root[data-theme="light"]{color-scheme:light;--bg:#f5f7fa;--surface:#ffffff;--surface2:#eef1f6;--fg:#171a20;--muted:#5c6674;
  --faint:#8b95a4;--line:#e3e8f0;--line2:#d6dce6;--accent:#4f46e5;--accent-bright:#4338ca;--accent-weak:rgba(79,70,229,.12);--on-accent:#fff;
  --tank:#3f80c4;--damage:#d5563f;--support:#33a06a;--good:#1f9d61;--mid:#b8860b;--bad:#cf4b36;
  --shadow:none;}

/* Original palette — the pre-redesign look (indigo accent, cool slate
   neutrals). The palette-less :root blocks above carry these same values, so
   a page with no palette bootstrap lands here. Every page WITH a bootstrap
   (all four since 2026-08-20) defaults to Overwatch instead since the
   2026-09-24 redesign; these explicit data-palette="original" blocks keep
   Original selectable by name. */
:root[data-palette="original"]{color-scheme:light;--bg:#f5f7fa;--surface:#ffffff;--surface2:#eef1f6;--fg:#171a20;--muted:#5c6674;
  --faint:#8b95a4;--line:#e3e8f0;--line2:#d6dce6;--accent:#4f46e5;--accent-bright:#4338ca;--accent-weak:rgba(79,70,229,.12);--on-accent:#fff;
  --tank:#3f80c4;--damage:#d5563f;--support:#33a06a;--good:#1f9d61;--mid:#b8860b;--bad:#cf4b36;
  --shadow:none;}
@media (prefers-color-scheme: dark){
  :root[data-palette="original"]{color-scheme:dark;--bg:#0d1015;--surface:#161a21;--surface2:#1d232c;--fg:#e7ebf2;--muted:#98a2b2;
    --faint:#6b7686;--line:#252c37;--line2:#313a48;--accent:#8087ff;--accent-bright:#a5abff;--accent-weak:rgba(128,135,255,.16);--on-accent:#0b1020;
    --tank:#5a9bd8;--damage:#e9694f;--support:#46b57c;--good:#34b877;--mid:#d3a02a;--bad:#e5624a;
    --shadow:none;}
}
:root[data-theme="dark"][data-palette="original"]{color-scheme:dark;--bg:#0d1015;--surface:#161a21;--surface2:#1d232c;--fg:#e7ebf2;--muted:#98a2b2;
  --faint:#6b7686;--line:#252c37;--line2:#313a48;--accent:#8087ff;--accent-bright:#a5abff;--accent-weak:rgba(128,135,255,.16);--on-accent:#0b1020;
  --tank:#5a9bd8;--damage:#e9694f;--support:#46b57c;--good:#34b877;--mid:#d3a02a;--bad:#e5624a;
  --shadow:none;}
:root[data-theme="light"][data-palette="original"]{color-scheme:light;--bg:#f5f7fa;--surface:#ffffff;--surface2:#eef1f6;--fg:#171a20;--muted:#5c6674;
  --faint:#8b95a4;--line:#e3e8f0;--line2:#d6dce6;--accent:#4f46e5;--accent-bright:#4338ca;--accent-weak:rgba(79,70,229,.12);--on-accent:#fff;
  --tank:#3f80c4;--damage:#d5563f;--support:#33a06a;--good:#1f9d61;--mid:#b8860b;--bad:#cf4b36;
  --shadow:none;}

/* Overwatch palette — the game's signature orange (#f99e1a, PMS 137 C) with
   the near-black navy UI it ships, warm paper light neutrals. */
:root[data-palette="overwatch"]{color-scheme:light;--bg:#f7f1e9;--surface:#fffdf9;--surface2:#efe7da;--fg:#201b14;--muted:#6b5f4d;
  --faint:#9b8c75;--line:#e8ddca;--line2:#d8c7ab;--accent:#9a5300;--accent-bright:#7a3f00;--accent-weak:rgba(249,158,26,.14);--on-accent:#fff;
  --tank:#3f80c4;--damage:#d5563f;--support:#33a06a;--good:#1f9d61;--mid:#b8860b;--bad:#cf4b36;
  --shadow:none;}
@media (prefers-color-scheme: dark){
  :root[data-palette="overwatch"]{color-scheme:dark;--bg:#0a0d15;--surface:#10151f;--surface2:#171d2a;--fg:#eceff4;--muted:#a9b2bf;
    --faint:#717b8c;--line:#252d3a;--line2:#313a4b;--accent:#f99e1a;--accent-bright:#ffc863;--accent-weak:rgba(249,158,26,.18);--on-accent:#1a1206;
    --tank:#5a9bd8;--damage:#e9694f;--support:#46b57c;--good:#34b877;--mid:#d3a02a;--bad:#e5624a;
    --shadow:none;}
}
:root[data-theme="dark"][data-palette="overwatch"]{color-scheme:dark;--bg:#0a0d15;--surface:#10151f;--surface2:#171d2a;--fg:#eceff4;--muted:#a9b2bf;
  --faint:#717b8c;--line:#252d3a;--line2:#313a4b;--accent:#f99e1a;--accent-bright:#ffc863;--accent-weak:rgba(249,158,26,.18);--on-accent:#1a1206;
  --tank:#5a9bd8;--damage:#e9694f;--support:#46b57c;--good:#34b877;--mid:#d3a02a;--bad:#e5624a;
  --shadow:none;}
:root[data-theme="light"][data-palette="overwatch"]{color-scheme:light;--bg:#f7f1e9;--surface:#fffdf9;--surface2:#efe7da;--fg:#201b14;--muted:#6b5f4d;
  --faint:#9b8c75;--line:#e8ddca;--line2:#d8c7ab;--accent:#9a5300;--accent-bright:#7a3f00;--accent-weak:rgba(249,158,26,.14);--on-accent:#fff;
  --tank:#3f80c4;--damage:#d5563f;--support:#33a06a;--good:#1f9d61;--mid:#b8860b;--bad:#cf4b36;
  --shadow:none;}

/* FACEIT palette: the match-room charcoal and orange (specs/2026-09-24-site-redesign-design.md §5.1).
   A colour only; no FACEIT mark anywhere. Light mode darkens the accent to
   #c2410c so accent-coloured text passes AA on white. */
:root[data-palette="faceit"]{color-scheme:light;--bg:#f4f4f4;--surface:#ffffff;--surface2:#ececec;--fg:#161616;--muted:#5a5a5a;
  --faint:#8a8a8a;--line:#e2e2e2;--line2:#d2d2d2;--accent:#c2410c;--accent-bright:#9a3412;--accent-weak:rgba(255,85,0,.12);--on-accent:#fff;
  --tank:#3f80c4;--damage:#d5563f;--support:#33a06a;--good:#1f9d61;--mid:#b8860b;--bad:#cf4b36;
  --shadow:none;}
@media (prefers-color-scheme: dark){
  :root[data-palette="faceit"]{color-scheme:dark;--bg:#121212;--surface:#1b1b1b;--surface2:#232323;--fg:#ededed;--muted:#a3a3a3;
    --faint:#737373;--line:#262626;--line2:#333333;--accent:#ff5500;--accent-bright:#ff7a33;--accent-weak:rgba(255,85,0,.16);--on-accent:#111111;
    --tank:#5a9bd8;--damage:#e9694f;--support:#46b57c;--good:#34b877;--mid:#d3a02a;--bad:#e5624a;
    --shadow:none;}
}
:root[data-theme="dark"][data-palette="faceit"]{color-scheme:dark;--bg:#121212;--surface:#1b1b1b;--surface2:#232323;--fg:#ededed;--muted:#a3a3a3;
  --faint:#737373;--line:#262626;--line2:#333333;--accent:#ff5500;--accent-bright:#ff7a33;--accent-weak:rgba(255,85,0,.16);--on-accent:#111111;
  --tank:#5a9bd8;--damage:#e9694f;--support:#46b57c;--good:#34b877;--mid:#d3a02a;--bad:#e5624a;
  --shadow:none;}
:root[data-theme="light"][data-palette="faceit"]{color-scheme:light;--bg:#f4f4f4;--surface:#ffffff;--surface2:#ececec;--fg:#161616;--muted:#5a5a5a;
  --faint:#8a8a8a;--line:#e2e2e2;--line2:#d2d2d2;--accent:#c2410c;--accent-bright:#9a3412;--accent-weak:rgba(255,85,0,.12);--on-accent:#fff;
  --tank:#3f80c4;--damage:#d5563f;--support:#33a06a;--good:#1f9d61;--mid:#b8860b;--bad:#cf4b36;
  --shadow:none;}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-variant-numeric:tabular-nums;
  font-family:var(--font-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.tnum{font-variant-numeric:tabular-nums}
h1,h2,h3,.section-h h2,.tile .n,.gsc,.pname,.cmp-name,.brand h1{font-family:var(--font-display)}

.eyebrow{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin:0 0 6px}

/* card: flat surface, thin border, left accent bar. Every component that
   hand-rolls its own card-like border/background (.profcard, .funnel,
   .snode, .gcard, .pcard, .uprow, details.mapblk, …) already reads
   --line/--surface/--accent and re-themes on its own; only the literal
   .card class needs its shape redefined here. */
.card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:12px 14px;box-shadow:none}

/* buttons: outlined by default (matches the approved mockup); .primary is
   an available filled variant for a page's one standout CTA, opt-in. */
.btn{cursor:pointer;font:inherit;font-weight:650;background:transparent;color:var(--accent-bright);
  border:1px solid var(--accent);border-radius:var(--r-sm);padding:8px 11px}
.btn:hover{background:var(--accent-weak)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.btn.primary:hover{filter:brightness(1.06);background:var(--accent)}

/* wordmark: lowercase "owdb" in brackets, split-weight. Markup:
   <span class="prodname"><span class="wordmark"><span class="br">[</span><span class="ow">ow</span><span class="db">db</span><span class="br">]</span></span><span class="sub">FACEIT League</span></span> */
.prodname{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.prodname .wordmark{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.02em}
.prodname .br{color:var(--accent)}
.prodname .ow{color:var(--accent-bright);font-weight:700}
.prodname .db{color:var(--faint);font-weight:500}
.prodname .sub{font-size:11px;letter-spacing:.08em;color:var(--faint);font-weight:600;text-transform:uppercase}

/* unified segmented-control toggle — the one pattern for both the
   League/Scrims switch and the Data/Capture switch, replacing the old
   separate .navcap/.navcapdim/.modebtns markup. */
.sidebox{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-left:auto}
.sidetoggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface2)}
.sidetoggle a,.sidetoggle span{padding:6px 14px;font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;color:var(--muted)}
.sidetoggle span.on{background:var(--accent);color:var(--on-accent)}
.sidetoggle a:hover{color:var(--fg);background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* shared palette-picker <select>; the dashboard also wraps this in its own
   .themerow (adds the Light/Auto/Dark toggle beside it) but the bare class
   here is what capture/scrim pages use directly, no mode toggle. */
.themepick{font:inherit;font-size:12px;font-weight:600;padding:4px 7px;border-radius:var(--r-sm);
  background:var(--surface2);border:1px solid var(--line);color:var(--fg)}
.themepick:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

/* topbar tab nav — shared between the dashboard and scrims.html (capture
   pages use their own <header>, not a tab bar; harmless if unused there). */
nav{display:flex;gap:2px;margin-top:10px}
nav button{border:0;background:transparent;color:var(--muted);padding:9px 14px;border-radius:var(--r-sm) var(--r-sm) 0 0;
  cursor:pointer;font-size:13.5px;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
nav button:hover{color:var(--fg)}
nav button.active{color:var(--accent);border-bottom-color:var(--accent)}
nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}


/* ---- shared page furniture ---------------------------------------------
   Everything below was written out byte-for-byte in BOTH
   faceit_sync/dashboard/head.html and docs/scrims.html. Duplication is how
   they drifted — .poolgrid ended up auto-fit/210px on one page and
   auto-fill/240px on the other, and `thead th` gained a nowrap on one only —
   so a rule the two data pages agree on now lives here once.
   The capture pages do not use most of it (they have their own <header> and
   no tab bar); unused rules cost nothing and keep the two families reading
   from one source when they do converge. */
.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:min(1500px,96vw);margin:0 auto;padding:12px 18px 0}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.brand h1{margin:0;font-size:17px;font-weight:650;letter-spacing:-.01em}
.toprow{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
main{max-width:min(1500px,96vw);margin:0 auto;padding:20px 18px 72px}
.grid{display:grid;gap:10px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:1fr 1fr 1fr}
.cols-4{grid-template-columns:1fr 1fr 1fr 1fr}
.cols-auto{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* Self-contained rather than a .grid modifier: scrims.html applied it bare and
   the dashboard applied it alongside .grid, which is how the two ended up with
   different track sizes for the same hero-pool card. */
.poolgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
/* Two-stage collapse on the documented breakpoints: three-and-four-up drop to
   two across the tablet step, everything drops to one across the phone step.
   These were 980/721 and 720 before — three more numbers doing the job of the
   two the rest of the system already used. */
@media (max-width:900px) and (min-width:641px){.cols-3,.cols-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:22px 2px 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.section-h h2{margin:0;font-size:14.5px;font-weight:650}
.note{color:var(--muted);font-size:12.5px;margin:8px 2px 0}
.tile .n{font-size:27px;font-weight:680;letter-spacing:-.02em}
.tile .l{color:var(--muted);font-size:12px;margin-top:1px}
.tile .sub{color:var(--faint);font-size:11.5px;margin-top:3px}
/* Uniform vertical rhythm: section-level cards stack 14px apart; tight/small
   offsets are one-off utilities rather than inline styles. */
.stack>*+*{margin-top:14px}
.mt8{margin-top:8px}
.mt10{margin-top:10px}
.mt14{margin-top:14px}
/* tables */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:13.5px}
/* nowrap on the header too — it had been added on the dashboard only, so the
   same sortable table wrapped its headings on one page and not the other. */
thead th{color:var(--faint);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  cursor:pointer;user-select:none;position:sticky;top:0;background:var(--surface);white-space:nowrap}
thead th:hover{color:var(--fg)}
thead th.sorted{color:var(--fg)}
thead th .sar{margin-left:4px;font-size:8px;color:var(--accent);vertical-align:middle}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--surface2)}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.scroll table{font-size:13.5px}
/* bars */
.barrow{display:grid;grid-template-columns:minmax(110px,1.1fr) minmax(70px,2fr) 40px;align-items:center;gap:11px;padding:5px 2px}
.barrow+.barrow{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.barrow .lab{font-size:13px;display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track{height:9px;background:var(--surface2);border-radius:var(--r-sm);overflow:hidden}
.fill{height:100%;border-radius:var(--r-sm);background:var(--accent);min-width:3px;transition:width .2s ease}
.barval{text-align:right;font-size:12.5px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
/* chips / badges */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;
  border-radius:var(--r-pill);background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
/* Mode heading over a run of map blocks - the same break the tables get. */
.modeh{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.role-Tank{color:var(--tank)}
.role-Damage{color:var(--damage)}
.role-Support{color:var(--support)}
.pill{display:inline-block;font-size:12px;font-weight:650;padding:1px 8px;border-radius:var(--r-sm)}
.tag{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:1px 6px;border-radius:var(--r-sm);background:var(--surface2);color:var(--faint)}

/* Shared mobile pass. Both data pages had written this out identically; the
   one place they had already drifted was `main`, where only the dashboard
   carried the overflow-x:clip that keeps the sticky topbar working. 640px is
   the phone step of the breakpoint set documented at the top of this file. */
@media (max-width:640px){
  main{padding:12px 10px 48px;overflow-x:clip}  /* reclaim gutters; clip (not hidden) keeps sticky working */
  .topbar-in{padding:10px 10px 0}
  /* Five stacked rows of header pinned over a ~844px screen left half the page for content. */
  .topbar{position:static}
  nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav button{white-space:nowrap;padding:9px 10px;font-size:13px}
  .card{padding:10px}
  th,td{padding:6px 7px;font-size:12.5px}
}