/* Core — generated from @invert/tokens. Do not hand-edit a colour here. */
:root {
  color-scheme: light dark;
  --bg: #fbfbfd;
  --card: #ffffff;
  --field: #f2f4f8;
  --field-hover: #eceff5;
  --ink: #101826;
  --muted: #5a6473;
  --label: #6a7079;
  --accent: #2547e0;
  --red-dark: #b23a2a;
  --green-dark: #2a7e38;
  --amber-dark: #9f6200;
  --accent-soft: rgba(37, 71, 224, 0.08);
  --line: #e6e8ee;
  --line-soft: #f0f2f6;
  --red: #e0533d;
  --green: #2e8b3d;
  --amber: #e08a00;
  --muted-3: #9aa3b0;
  --muted-2: #6b7686;
  --on-accent: #ffffff;
  --t-lg: 0.9375rem;
  --t-md: 0.8125rem;
  --t-sm: 0.75rem;
  --t-xs: 0.6875rem;
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --ctl-h: 2.125rem;
  --chip-h: 1.75rem;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1219;
    --card: #161b24;
    --field: #1b212b;
    --field-hover: #212836;
    --ink: #e8ecf2;
    --muted: #a3aebd;
    --label: #8d97a5;
    --accent: #7d97ff;
    --red-dark: #f0917e;
    --green-dark: #6bcf7a;
    --amber-dark: #e8b04a;
    --accent-soft: rgba(125, 151, 255, 0.14);
    --line: #262d38;
    --line-soft: #1e242e;
    --red: #e0674f;
    --green: #3fa552;
    --amber: #d09122;
    --muted-3: #6c7787;
    --muted-2: #8b96a5;
    --on-accent: #0e1219;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* Geist, served by Core itself (/fonts/geist.woff2, OFL). The system font
   stands in while it loads and wherever it cannot. */
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-md)/1.5 "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

main { max-width: 46rem; margin: 0 auto; padding: var(--s5) var(--s4) 4rem; }

h1 { font-size: 1.35rem; margin: 0 0 var(--s1); letter-spacing: -0.01em; }
h2 { font-size: var(--t-lg); margin: 0 0 var(--s3); }
h3 { font-size: 1rem; margin: var(--s4) 0 var(--s2); }
p  { margin: 0 0 var(--s3); color: var(--muted); }
a  { color: var(--accent); }

.sub { color: var(--muted); margin-bottom: var(--s5); }

/* A label over a column uses --label, not --muted-3: at 2.47:1 that was the
   smallest text on the platform and the hardest to read across a gym. */
.label {
  display: block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--label);
  margin-bottom: var(--s1);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
  margin-bottom: var(--s4);
}

.row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
/* Cards space themselves from each other; a row of buttons or a back link
   sitting directly above one needs the same gap, or it reads as glued on. */
.row + .card { margin-top: var(--s4); }
/* A notice that needs doing, not just reading: the roster reminder. */
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); margin-bottom: var(--s4); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--field); font-size: var(--t-sm); }
.bar > div { flex: 1 1 18rem; min-width: 0; }
.chip.warn { color: var(--red-dark); }
.grow { flex: 1 1 12rem; min-width: 0; }
.between { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }

input, select, button { font: inherit; height: var(--ctl-h); border-radius: var(--r-sm); border: 1px solid transparent; }

input, select { width: 100%; padding: 0 var(--s2); background: var(--field); color: var(--ink); }
input:hover, select:hover { background: var(--field-hover); }
input:focus, select:focus { outline: none; border-color: var(--accent); background: var(--card); }
input[type="checkbox"], input[type="radio"] { width: auto; height: auto; padding: 0; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
/* hidden means hidden, whatever display a class gives the element. */
[hidden] { display: none !important; }
label.check { display: flex; align-items: center; gap: var(--s2); }

button { padding: 0 var(--s3); background: var(--accent); color: var(--on-accent); cursor: pointer; white-space: nowrap; }
button:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.55; cursor: default; filter: none; }
button.quiet { background: var(--field); color: var(--ink); }
button.quiet:hover { background: var(--field-hover); filter: none; }
button.danger { background: transparent; color: var(--red-dark); border-color: var(--line); }
button.danger:hover { background: var(--field); filter: none; }
button.link { background: none; border: none; color: var(--accent); padding: 0; height: auto; text-decoration: underline; }

ul.list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
ul.list > li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
ul.list > li:first-child { border-top: none; }
nav.tabs { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
nav.tabs button.tab { background: var(--field); color: var(--ink); }
nav.tabs button.tab.active { background: var(--accent); color: var(--on-accent); }

/* The QR code ignores the colour scheme on purpose. Many phone scanners
   cannot read a light-on-dark code, so it is the light theme's ink on its
   card in both schemes — taken from the token package, not invented. */
.qr-wrap { display: flex; justify-content: center; margin: var(--s4) 0; }
.qr { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.qr-light { fill: #ffffff; }
.qr-dark { fill: #101826; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.04em; }
.key { font-size: var(--t-lg); overflow-wrap: anywhere; }
ul.codes { list-style: none; padding: 0; margin: var(--s3) 0 var(--s4); display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s2); }
ul.codes > li { padding: var(--s2); background: var(--field); border-radius: var(--r-sm); }
.who { min-width: 0; flex: 1 1 auto; }
.who .name { font-weight: 600; }
.who .mail { color: var(--muted); font-size: var(--t-sm); overflow-wrap: anywhere; }

.chip { height: var(--chip-h); display: inline-flex; align-items: center; padding: 0 var(--s2); border-radius: 999px; background: var(--field); color: var(--label); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.chip.you { background: var(--accent); color: var(--on-accent); }

.note { padding: var(--s3); border-radius: var(--r-sm); margin-bottom: var(--s3); font-size: var(--t-sm); background: var(--field); }
.note.bad  { color: var(--red-dark); }
.note.good { color: var(--green-dark); }

.field + .field { margin-top: var(--s3); }
.actions { margin-top: var(--s4); }
/* Inline style attributes are blocked by the page's CSP, deliberately:
   style-src 'self' covers attributes too, not just <style> blocks. Anything
   a view needs is a class. Chromium caught the ones that were here. */
.narrow { width: auto; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

/* ---- the shell: products first, one section per job (redesign, Oct 2026) ----
   A phone gets a bottom tab bar; from 900px wide the same sections move to
   a sidebar. Signed-in pages only: sign-in, invite and reset keep the narrow
   centred column above. Every colour is a token, so dark mode follows. */
main.wide { max-width: none; margin: 0; padding: 0; }
.shell { display: flex; min-height: 100vh; font-size: 0.9375rem; }
.page { flex: 1 1 auto; min-width: 0; max-width: 66rem; margin: 0 auto; padding: var(--s5) var(--s4) 7rem; }
.page h1 { font-size: 1.75rem; line-height: 1.15; margin: 0; }
.page .card { padding: var(--s4) 1.125rem; }
.page button, .page input, .page select { min-height: 2.75rem; }
.page input[type="checkbox"], .page input[type="radio"] { min-height: 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }
.kicker { display: block; color: var(--muted); font-size: var(--t-md); margin-bottom: var(--s1); }
.section-label { margin: var(--s5) 0 var(--s3); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); }

.side { display: none; }
.side-brand { font-size: 1.125rem; font-weight: 700; padding: 0 var(--s2); }
.side-link, .tab-link { display: flex; align-items: center; color: var(--muted); text-decoration: none; }
.side-link { gap: var(--s3); min-height: 2.75rem; padding: 0 var(--s3); border-radius: var(--r-md); color: var(--ink); }
.side-link:hover { background: var(--field); }
/* The console's sections are buttons, not links: same look, no button chrome. */
button.side-link, button.tab-link { width: 100%; height: auto; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; white-space: normal; }
button.side-link { color: var(--ink); font-size: inherit; }
button.side-link:hover { background: var(--field); filter: none; }
button.side-link.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
button.tab-link { color: var(--muted); font-size: var(--t-xs); }
button.tab-link:hover { filter: none; }
button.tab-link.on { color: var(--accent); font-weight: 600; }
.side-link.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-link .badge { margin-left: auto; }
/* The sidebar is a full-height column, so this sits at its foot. */
.side-foot { margin-top: auto; color: var(--muted); }
button.side-link.side-foot { color: var(--muted); }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: var(--s1) var(--s1) calc(var(--s3) + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
.tab-link { position: relative; flex-direction: column; justify-content: center; gap: 0.125rem; min-height: 3rem; font-size: var(--t-xs); font-weight: 500; }
.tab-link.on { color: var(--accent); font-weight: 600; }
.tab-link .badge { position: absolute; top: 0.125rem; left: calc(50% + 0.375rem); }
.icon { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.badge { min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; border-radius: 999px; background: var(--amber); color: var(--ink);
  font-size: var(--t-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.badge:empty { display: none; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s5); }
.switcher { position: relative; }
/* A long club name wraps rather than running out of the sidebar. */
.side .switcher .pill { height: auto; min-height: 2.75rem; padding-top: 0.375rem; padding-bottom: 0.375rem; text-align: left; white-space: normal; }
.side .switcher .pill > span:not(.monogram) { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; line-height: 1.25; }
.side .switcher .pill .icon { flex: 0 0 auto; }
.pill { display: inline-flex; align-items: center; gap: var(--s2); height: 2.75rem; padding: 0 0.875rem 0 0.375rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 600; }
button.pill:hover { background: var(--field); filter: none; }
.monogram { width: 2rem; height: 2rem; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-sm); font-weight: 700; flex: 0 0 auto; }
.avatar { width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--field); color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.avatar.big { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; background: var(--accent); color: var(--on-accent); }
.menu { position: absolute; z-index: 6; top: calc(100% + var(--s1)); left: 0; min-width: 16rem; padding: var(--s1);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 0.125rem; }
.menu button { display: flex; flex-direction: column; align-items: flex-start; height: auto; padding: var(--s2) var(--s3);
  background: transparent; color: var(--ink); border-radius: var(--r-md); text-align: left; white-space: normal; }
.menu button:hover { background: var(--field); filter: none; }
.menu button.on { background: var(--accent-soft); }

.attention { display: flex; align-items: center; gap: var(--s3); padding: 0.875rem var(--s4); margin-bottom: var(--s3);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; }
.attention:hover { background: var(--field); }
.dot { width: 0.625rem; height: 0.625rem; border-radius: 999px; background: var(--amber); flex: 0 0 auto; }
.dot.good { background: var(--green); }
/* Only something with no spaces at all, such as a long email address, is
   ever broken mid-word. */
.stack { display: flex; flex-direction: column; gap: 0.125rem; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
/* In a list row the words take at least 12rem before the row's buttons may
   sit beside them; narrower than that, the buttons move to their own line. */
.rows > * > .stack { flex-basis: 12rem; }
.strong { font-weight: 600; }
.side nav { display: flex; flex-direction: column; gap: 0.125rem; }
.stack .muted { font-size: var(--t-md); }

.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.product { display: flex; flex-direction: column; gap: 0.875rem; min-height: 9.25rem; padding: var(--s4); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; }
a.product:hover { border-color: var(--accent); }
.product .mark { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; }
.product .title { font-size: 1rem; font-weight: 700; }
.product .blurb { font-size: var(--t-md); color: var(--muted); }
.product .go { margin-top: auto; font-size: var(--t-md); font-weight: 600; color: var(--accent); }
.product.off { background: var(--field); border-style: dashed; }
.product.off .mark { background: var(--card); color: var(--label); }
.product.off .title, .product.off .go { color: var(--muted); font-weight: 600; }

.rows { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.rows > * { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding: 0.875rem var(--s4); border-top: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; }
.rows > *:first-child { border-top: none; }
a.rows-link:hover { background: var(--field); }
.profile { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s5); }
.profile h1 { font-size: 1.5rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.status { display: flex; align-items: center; gap: var(--s3); padding: 0.875rem var(--s4); margin-bottom: var(--s4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
details.help { margin: var(--s3) 0 0; }
details.help summary { cursor: pointer; color: var(--accent); }
details.help ol { margin: var(--s2) 0 0; padding-left: 1.25rem; color: var(--muted); }
.section-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.section-row .section-label { margin-bottom: var(--s3); }
.check-card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) 1.125rem; margin-bottom: var(--s3);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.check-card p { margin: 0; }
.check-kind { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--amber-dark); }
.check-who { font-size: 1.0625rem; font-weight: 700; }
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.compare > div { display: flex; flex-direction: column; gap: 0.125rem; padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--field); min-width: 0; overflow-wrap: break-word; }
.decisions { display: flex; flex-direction: column; gap: var(--s2); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.decisions button, .confirm button { height: auto; min-height: 2.75rem; padding: var(--s2) var(--s3); white-space: normal; font-weight: 600; }
.confirm { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); border-radius: var(--r-md); background: var(--accent-soft); }
.confirm p { margin: 0; color: var(--ink); }

.segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s1); padding: var(--s1); background: var(--field); border-radius: var(--r-md); }
button.segment { height: 2.5rem; background: transparent; color: var(--muted); font-weight: 600; border-radius: var(--r-sm); }
button.segment:hover { background: var(--field-hover); filter: none; }
button.segment.on { background: var(--card); color: var(--accent); border-color: var(--line); }
.segments + p { margin: var(--s2) 0 0; }
/* Club settings' four tabs do not fit side by side on a phone: two rows of two. */
@media (max-width: 599px) { .segments.tabs-wide { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } }
.rows > .person { display: block; padding: 0; }
.person-row { display: flex; align-items: center; gap: var(--s3); padding: 0.75rem var(--s4); }
.person-row .avatar { width: 2.5rem; height: 2.5rem; font-size: var(--t-sm); }
.manage { display: flex; flex-direction: column; gap: var(--s3); padding: 0 var(--s4) var(--s4); }
.rows .muted { overflow-wrap: break-word; }
.role-chip { height: var(--chip-h); padding: 0 0.625rem; border-radius: 999px; background: var(--field); color: var(--muted); font-size: var(--t-sm); font-weight: 600; display: inline-flex; align-items: center; flex: 0 0 auto; }
.role-chip.good { color: var(--green-dark); }
.mark-small { width: 2.25rem; height: 2.25rem; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mark-small.off { background: var(--field); color: var(--label); }
.tabs-wide { margin-bottom: var(--s4); }
.confirm select, .confirm input { background: var(--card); }
.rows + p { margin-top: var(--s3); }

/* ---- Reading sizes, and the shared page parts (UI review, 13 Oct 2026) ----

   Core is used by coaches and club managers who did not grow up with
   software, often on a laptop in a gym office. The shared token scale (it
   is Rotation Scheduler's, and dense by design) is too small for that, so
   Core sets its own reading sizes on top of it. Labels are sentence case:
   capitals are slower to read. Every colour is still a token. */
:root {
  --fs-body: 1.0625rem;   /* 17px */
  --fs-small: 0.9375rem;  /* 15px */
  --fs-tab: 0.8125rem;    /* 13px, the phone tab bar only */
}
body, .shell { font-size: var(--fs-body); line-height: 1.55; }
p { font-size: inherit; }
.small, .note, .bar, .who .mail, .stack .muted, .product .blurb, .product .go, .kicker, .hint { font-size: var(--fs-small); }
.label { font-size: var(--fs-small); text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink); margin-bottom: 0.375rem; }
.section-label { font-size: 1.125rem; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--ink); }
.chip, .check-kind { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); }
.tab-link, button.tab-link { font-size: var(--fs-tab); }
input, select, button { min-height: 2.75rem; font-size: var(--fs-body); }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 1.25rem; height: 1.25rem; }
/* A field you can see before you click it. */
input, select { border-color: var(--line); }
.hint { display: block; color: var(--muted); margin-top: 0.375rem; }
h1 { font-size: 1.75rem; }

/* A warning box: a coloured edge and the ordinary ink colour, so the words
   stay easy to read whatever the message. */
.note { border-left: 4px solid var(--line); color: var(--ink); padding: var(--s3) var(--s4); }
.note.bad { border-left-color: var(--red); color: var(--ink); }
.note.good { border-left-color: var(--green); color: var(--ink); }
.note.warn { border-left-color: var(--amber); }

/* The confirmation box: anything that cannot be taken back, or that
   changes something for other people, asks here first. */
.modal-back { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: var(--s4); background: color-mix(in srgb, var(--ink) 45%, transparent); }
.modal { width: 100%; max-width: 32rem; max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5) var(--s5) var(--s4); }
.modal h2 { font-size: 1.375rem; margin: 0 0 var(--s3); }
.modal p { color: var(--ink); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
button.danger-fill { background: var(--red-dark); color: var(--bg); border-color: transparent; font-weight: 600; }

/* An empty state says what will appear here and how to get it. */
.empty { padding: var(--s5) var(--s4); text-align: center; background: var(--card); border: 1px dashed var(--line); border-radius: var(--r-lg); margin-bottom: var(--s4); }
.empty .strong { display: block; font-size: 1.0625rem; margin-bottom: var(--s1); }
.empty p { margin: 0 auto var(--s3); max-width: 32rem; }
.empty p:last-child { margin-bottom: 0; }

/* A panel: a titled card. */
.panel > h2 { font-size: 1.25rem; margin: 0 0 var(--s2); }
.panel > .intro { margin-bottom: var(--s4); }

/* A table on a laptop; on a phone each row becomes a small card with its
   labels beside the values. */
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s4); }
table.table { width: 100%; border-collapse: collapse; }
table.table th { text-align: left; font-size: var(--fs-small); font-weight: 600; color: var(--muted); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
table.table td { padding: 0.875rem var(--s4); border-top: 1px solid var(--line-soft); vertical-align: middle; overflow-wrap: break-word; }
table.table tbody tr:first-child td { border-top: none; }
table.table tr.open { cursor: pointer; }
table.table tr.open:hover td { background: var(--field); }
table.table td.go { width: 2rem; color: var(--muted); }
@media (max-width: 699px) {
  table.table thead { display: none; }
  table.table, table.table tbody, table.table tr, table.table td { display: block; width: 100%; }
  table.table tr { padding: var(--s3) var(--s4); border-top: 1px solid var(--line-soft); }
  table.table tbody tr:first-child { border-top: none; }
  table.table td { border: none; padding: 0.125rem 0; }
  table.table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: var(--fs-small); }
  table.table td.first::before { content: none; }
  table.table td.first { font-weight: 600; }
  table.table td.go { display: none; }
}

/* A sport's own word, with a plain hint beside it. */
.term-hint { color: var(--muted); font-size: var(--fs-small); }

/* The pages before signing in: Core's name at the top, so a first-time
   visitor knows whose page this is, and the form a little way down the
   screen rather than pinned to its top edge. */
main:not(.wide) { max-width: 34rem; padding-top: clamp(2rem, 8vh, 5rem); }
.brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); }
.brand-mark { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--accent); color: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; flex: 0 0 auto; }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name .strong { font-size: 1.25rem; }
.brand-name .muted { font-size: var(--fs-small); }
.ways-in { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.ways-in a { font-weight: 600; }

/* Finding a page by name, including the names pages used to have. */
.find-page { margin-bottom: var(--s4); }
.find-page .rows { margin-top: var(--s2); }
.side .find-page input { min-height: 2.5rem; font-size: var(--fs-small); }
.side .find-page .rows > * { padding: 0.5rem var(--s3); font-size: var(--fs-small); }

details.panel-details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--s4); }
details.panel-details > summary { cursor: pointer; padding: var(--s4); font-weight: 700; font-size: 1.0625rem; }
details.panel-details > .inside { padding: 0 var(--s4) var(--s4); }
details.panel-details .card { border: none; padding: 0; margin: 0; background: transparent; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); margin: 0 0 var(--s4); }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: break-word; }

.phone-only { margin-top: var(--s5); }
@media (min-width: 900px) {
  .phone-only { display: none; }
  .side { display: flex; flex-direction: column; gap: var(--s5); width: 15.5rem; flex: 0 0 auto; padding: var(--s5) var(--s4);
    background: var(--card); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; }
  .side .switcher .pill { width: 100%; border-radius: var(--r-lg); }
  .side .menu { width: 100%; min-width: 0; }
  .tabbar, .topbar .switcher { display: none; }
  .topbar { justify-content: flex-end; }
  .page { padding: 2.5rem 3rem 4rem; }
  .page h1 { font-size: 2.125rem; }
  .products { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: var(--s4); }
  .product { min-height: 11.25rem; padding: 1.375rem; }
}