/* Club branding themes (2026-10-15). Loaded after styles.css.
   html[data-theme="light"] = Clean light (default), html[data-theme="dark"] = Dark clubhouse.
   Theme is chosen on the Commish Desk and stored in KV `settings` ({"theme":"light"|"dark"}). */
:root, html[data-theme="light"] {
  --bg: #f6f7f4; --paper: #ffffff; --ink: #1d2a22; --muted: #5d6b62; --line: #dfe5dd;
  --in: #2f6b45; --in-press: #24563a; --in-soft: #e6f0e8; --out: #2f6b45; --out-bg: #ffffff;
  --accent: #6aa57a; --hero-a: #a9cfa5; --hero-b: #f6f7f4; --hero-ink: #ffffff;
  --guest: #5d6b62; --focus: #2f6b45; --radius: 14px;
  --shadow: 0 2px 10px rgba(29,42,34,.07);
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
html[data-theme="dark"] {
  --bg: #0f1612; --paper: #161f1a; --ink: #f1ead8; --muted: #b8ae95; --line: #2d3a31;
  --in: #c9a557; --in-press: #b08d42; --in-soft: #2a2a1e; --out: #c9a557; --out-bg: transparent;
  --accent: #c9a557; --hero-a: #0f1612; --hero-b: #0f1612; --hero-ink: #d9b867;
  --guest: #b8ae95; --focus: #d9b867; --shadow: 0 2px 14px rgba(0,0,0,.35);
}
body { font-family: var(--sans); background: var(--bg); color: var(--ink); }

/* ---------------- Player page ---------------- */
.hero { background: linear-gradient(180deg, var(--hero-a), var(--hero-b)); padding: 22px 16px 8px; }
.hero-in { max-width: 560px; margin: 0 auto; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.brand { display: flex; gap: 10px; align-items: center; }
.crest { font-size: 26px; line-height: 1; }
.hero h1 { color: var(--hero-ink); font-family: var(--sans); font-weight: 700; font-size: 30px; margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.12); }
.club-sub { display: none; }
.hero-line { color: var(--ink); font-size: 17px; margin: 10px 0 6px; }
.hero-line:empty { display: none; }
.hero .badge { margin: 4px 0 0; font-size: 14px; letter-spacing: .02em; text-transform: none; font-weight: 600;
  padding: 6px 14px; background: var(--paper); color: var(--in); border-color: transparent; box-shadow: var(--shadow); }
.hero .badge::after { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #1f9d55; margin-left: 8px; vertical-align: 1px; }
.hero .badge.closed { background: var(--ink); color: var(--paper); }
.hero .badge.closed::after { background: #c0392b; }
.hero .count { background: transparent; border: 0; padding: 4px 0 8px; margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.stat-label { display: none; }
.hero .count .heads { font-size: 22px; }
.hero .need { margin: 0; font-size: 17px; }
.wrap { max-width: 560px; }
body[data-role="player"] .wrap { padding-top: 4px; }
.me { border: 0; box-shadow: var(--shadow); border-radius: var(--radius); padding: 18px; }
.me-head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--in-soft); display: grid; place-items: center; font-size: 28px; flex-shrink: 0; }
.eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.me h2 { font-size: 24px; margin: 2px 0; }
.me-status { font-size: 14px; color: var(--muted); }
.me-status.is-in { color: var(--in); font-weight: 600; }
.inout { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.btn-big { min-height: 64px; font-size: 22px; border-radius: 14px; margin: 0; }
.inout .btn-in { background: var(--paper); color: var(--in); border: 2px solid var(--in); }
.inout .btn-out { background: var(--paper); color: var(--muted); border: 2px solid var(--line); }
.inout .btn-in.active { background: var(--in); color: #fff; }
.inout .btn-out.active { background: var(--muted); color: var(--paper); border-color: var(--muted); }
.inout .btn:disabled { opacity: 1; cursor: default; }
.btn-ghost { border-radius: 12px; }
.me .btn-ghost { border: 1.5px solid var(--accent); color: var(--in); font-weight: 600; }
.me label.field + input, .me input[type="text"] { border-radius: 10px; }
.who h3 { display: flex; align-items: center; gap: 10px; }
.who h3::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.ins { background: transparent; border: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 520px) { .ins { grid-template-columns: 1fr 1fr; } }
.ins > li { background: var(--paper); border-radius: 10px; box-shadow: var(--shadow); border: 0; padding: 10px 14px; }
.host::before { content: "● "; color: var(--accent); font-size: 12px; vertical-align: 2px; }
.host { font-size: 17px; }
.foot { text-align: center; margin-top: 24px; }

/* Dark clubhouse variant */
html[data-theme="dark"] .hero { padding-top: 26px; border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .hero h1 { font-family: "Iowan Old Style", Palatino, Georgia, serif; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 24px; text-shadow: none; }
html[data-theme="dark"] .club-sub { display: block; color: var(--accent); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; margin-top: 2px; }
html[data-theme="dark"] .hero .badge { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); text-transform: uppercase; letter-spacing: .12em; box-shadow: none; }
html[data-theme="dark"] .hero .badge::after { background: var(--accent); }
html[data-theme="dark"] .hero .count { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 10px 0 8px; }
html[data-theme="dark"] .stat-label { display: block; color: var(--accent); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
html[data-theme="dark"] .hero .count .heads { font-size: 30px; color: var(--ink); }
html[data-theme="dark"] .hero-line { color: var(--ink); }
html[data-theme="dark"] .me { border: 1px solid var(--line); }
html[data-theme="dark"] .eyebrow, html[data-theme="dark"] label.field { color: var(--accent); }
html[data-theme="dark"] input[type="text"] { background: transparent; border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .btn-in, html[data-theme="dark"] .inout .btn-in.active { background: linear-gradient(180deg, #d9b867, #b08d42); color: #15120a; border-color: #b08d42; letter-spacing: .1em; }
html[data-theme="dark"] .inout .btn-in:not(.active) { background: transparent; color: var(--accent); border-color: var(--accent); }
html[data-theme="dark"] .inout .btn-out { background: transparent; color: var(--muted); }
html[data-theme="dark"] .inout .btn-out.active { background: #2a332d; color: var(--ink); border-color: var(--muted); }
html[data-theme="dark"] .need.short { color: #e0b862; }
html[data-theme="dark"] .need.clean { color: #9fd3a8; }
html[data-theme="dark"] .ins > li { border: 1px solid var(--line); }
html[data-theme="dark"] .toast { background: var(--accent); color: #15120a; }

/* ---------------- Commish desk (always light; follows mockup) ---------------- */
body.desk-page { --bg: #f5f3ec; --paper: #fffdf8; --line: #e1ddd0; --in: #2c5b3c; --in-press: #224a30; --radius: 12px;
  font-family: var(--sans); }
.desk-page .wrap.wide { max-width: 1280px; }
.desk-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.desk-head .crest { width: 44px; height: 44px; border-radius: 50%; background: var(--in); display: grid; place-items: center; font-size: 22px; }
.desk-head h1 { font-family: "Iowan Old Style", Palatino, Georgia, serif; color: var(--in); font-size: 28px; margin: 0; }
.desk-head .thin { font-weight: 400; }
.desk-head-right { display: flex; gap: 14px; align-items: center; font-size: 14px; }
.desk-head .badge { margin: 0; }
.desk-page .count { box-shadow: var(--shadow); border: 0; }
.desk-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.desk-col { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; }
.col-title { font-size: 19px; margin: 0 0 10px; font-weight: 600; }
.desk-page .admin { margin-bottom: 8px; }
.desk-page .admin .btn { border-radius: 8px; }
.desk-page .admin input[type="text"] { border-radius: 8px; }
.desk-page .gcard { border: 1px solid var(--line); background: #fbf8ef; }
.desk-page .clump { background: #eef3ec; border-color: #dbe5d8; }
.theme-pick { margin: 14px 0 4px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg .btn { margin: 0; }
.seg .btn.active { background: var(--in); color: #fff; border-color: var(--in); }
@media (min-width: 960px) {
  .desk-grid { grid-template-columns: minmax(340px, 5fr) 7fr; }
  .desk-pairs { position: sticky; top: 12px; }
  .desk-page .pane-body { max-height: calc(100vh - 220px); }
}
@media (max-width: 600px) {
  .desk-head { flex-wrap: wrap; }
  .desk-head h1 { font-size: 22px; }
  .desk-page .board { grid-template-columns: 1fr; }
}
.hero .badge { white-space: nowrap; flex-shrink: 0; }
html[data-theme="dark"] .hero h1 { line-height: 1.15; }
.theme-pick .field { display:block; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.desk-page .cart { background: #eef3ec; border-color: #dbe5d8; border-left-color: var(--in); }

/* FAQ pages: badge is a label, not game status */
.faq-page .hero .badge::after { display: none; }

/* Club logo (2026-10-18): only our own static /logo-<name> files, see publicBranding() in worker.js. */
.crest-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; display: block; }

/* Commish desk and its sign-in in Dark clubhouse (2026-10-27): the desk follows the club theme, like the players' page.
   Colours chosen for WCAG AA (4.5:1 text) on --paper/--bg; checked in Chromium by test/contrast.mjs. */
html[data-theme="dark"] body.desk-page { --bg: #0f1612; --paper: #161f1a; --line: #3a4a3f; --ink: #f1ead8; --muted: #b8ae95;
  --in: #c9a557; --in-press: #b08d42; --in-soft: #2a2a1e; --out: #f0a093; --out-bg: transparent; --guest: #d9c08a;
  --warn: #e0b862; --closed: #8f8670; --focus: #d9b867; color-scheme: dark; }
html[data-theme="dark"] .desk-page .gcard { background: #1b2620; }
html[data-theme="dark"] .desk-page .clump, html[data-theme="dark"] .desk-page .cart,
html[data-theme="dark"] .desk-page .clump.linked { background: #1f2a23; border-color: #3a4a3f; }
html[data-theme="dark"] .desk-page .cart { border-left-color: var(--in); }
html[data-theme="dark"] .desk-page .btn-in, html[data-theme="dark"] .desk-page .seg .btn.active,
html[data-theme="dark"] .desk-page .pill.in { background: var(--in); color: #15120a; border-color: var(--in); letter-spacing: normal; }
html[data-theme="dark"] .desk-page .pill, html[data-theme="dark"] .desk-page .tagsoon,
html[data-theme="dark"] .desk-page .tag-g { background: #2a332d; color: var(--ink); }
html[data-theme="dark"] .desk-page .plan { background: var(--in-soft); color: var(--in); border-color: var(--in); }
html[data-theme="dark"] .desk-page .btn-danger-ghost { color: #f0a093; border-color: #b3615a; }
html[data-theme="dark"] .desk-page .alert { background: #2e2716; border-color: #8a6a2a; color: #f1d9a0; }
html[data-theme="dark"] .desk-page .roster li button:active { background: #2a332d; }
html[data-theme="dark"] .desk-page .req-hits button { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .desk-page .ok { color: #7fd29a; }
html[data-theme="dark"] .desk-page input, html[data-theme="dark"] .desk-page select, html[data-theme="dark"] .desk-page textarea {
  background: #0f1612; color: var(--ink); border-color: #5a6a5f; }
html[data-theme="dark"] .desk-page ::placeholder { color: #9c947e; opacity: 1; }
/* Upgrade tile: dimmed with a muted colour, not see-through text, so it stays readable */
html[data-theme="dark"] #upgradeMultiGame > :not(.tile-cta) { opacity: 1; color: var(--muted); }
html[data-theme="dark"] .desk-page .gcard.full { opacity: 1; }

/* Light-mode contrast (2026-10-27 feedback7): dim with colour or background, never see-through text (WCAG AA 4.5:1). */
#upgradeMultiGame > :not(.tile-cta) { opacity: 1; color: var(--muted); }
.desk-page .gcard.full { opacity: 1; background: #f3f0e6; }
/* feedback8: the honored play-with note's green on light pages; dark keeps its own colour */
html:not([data-theme="dark"]) .ok { color: #17703d; }
/* feedback10: roster upload drop box; the file input is visually hidden, its label is the button */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dropzone { border: 2px dashed var(--muted); border-radius: var(--radius); background: var(--paper); padding: 16px; margin: 8px 0; text-align: center; }
.dropzone .btn { width: auto; margin: 0; cursor: pointer; }
.dropzone .note { margin: 8px 0 0; }
.dropzone.drag { border-color: var(--in); border-style: solid; background: var(--in-soft, var(--bg)); }
.vh:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
/* fb12 (2026-10-28, Alton t932u): mockup layout cues and little icons. Icons are a small local SVG set as data: URIs
   (CSP img-src 'self' data:), drawn with mask so they take the text colour; no icon font, no CDN. */
.ic { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-flag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h11l-2.5 4L16 12H5'/%3E%3C/svg%3E"); }
.i-cal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.i-sliders { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
.i-users { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16.5 14.2c2.9.2 5 2.3 5 5.8'/%3E%3C/svg%3E"); }
.i-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
.i-userplus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 21c0-4.4 3.1-7 7-7s7 2.6 7 7M19 7v6M16 10h6'/%3E%3C/svg%3E"); }
.i-link { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.i-refresh { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7L20 8.5'/%3E%3Cpath d='M20 3.5v5h-5'/%3E%3C/svg%3E"); }
.i-plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.i-upload { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7 9l5-5 5 5M4 15v5h16v-5'/%3E%3C/svg%3E"); }
.i-download { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M4 15v5h16v-5'/%3E%3C/svg%3E"); }
.i-shuffle { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h4l10 10h4M3 17h4l3-3M14 10l3-3h4M18 4l3 3-3 3M18 14l3 3-3 3'/%3E%3C/svg%3E"); }
.i-wand { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 15 9M13 7l4 4M18 2.5v3M16.5 4h3M20.5 9v3M19 10.5h3M9 3v2M8 4h2'/%3E%3C/svg%3E"); }
.i-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.i-logout { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H5v16h4M14 8l4 4-4 4M18 12H9'/%3E%3C/svg%3E"); }
.i-help { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.4 2.3c-.6.3-.9.9-.9 1.6v.3M12 17h.01'/%3E%3C/svg%3E"); }
.i-mail { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.i-palette { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3a9 9 0 0 0 0 18z' fill='black'/%3E%3C/svg%3E"); }
.i-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.i-clip { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3' width='8' height='4' rx='1'/%3E%3Cpath d='M8 5H6a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
.i-trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13'/%3E%3C/svg%3E"); }
.i-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.i-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.i-minus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); }
.i-save { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h11l3 3v13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 3v5h7M8 21v-7h8v7'/%3E%3C/svg%3E"); }
.i-undo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3'/%3E%3C/svg%3E"); }
.i-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E"); }
.i-sheet { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M4 9h16M4 15h16M10 3v18'/%3E%3C/svg%3E"); }
/* icons on markup the tests pin exactly: drawn with ::before so the text stays as is */
:root { --lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); --mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); --up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M7 9l5-5 5 5M4 15v5h16v-5'/%3E%3C/svg%3E"); --down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M4 15v5h16v-5'/%3E%3C/svg%3E"); --grp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16.5 14.2c2.9.2 5 2.3 5 5.8'/%3E%3C/svg%3E"); --usr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); --uplus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 21c0-4.4 3.1-7 7-7s7 2.6 7 7M19 7v6M16 10h6'/%3E%3C/svg%3E"); }
#upgradeMultiGame h3 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E"); }
h3:has(+ p + #rosterDrop) { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M4 9h16M4 15h16M10 3v18'/%3E%3C/svg%3E"); }
#rosterPick { --i: var(--up); } #deskHelp { --i: var(--mail); } #downloadBackup { --i: var(--down); }
#rosterPick::before, #downloadBackup::before, #deskHelp::before, #upgradeMultiGame h3::before, h3:has(+ p + #rosterDrop)::before {
  content: ""; display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; margin-right: .45em; background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.btn .ic, h2 .ic, h3 .ic, .field .ic, a .ic { margin-right: .45em; }
.btn .ic { width: 1.2em; height: 1.2em; }
.btn .ic:last-child:not(:first-child) { margin: 0 0 0 .5em; }

/* ---- Desk: panels like the mockup (header, This week bar, Game setup / Roster / New week cards, Pairing board) ---- */
.desk-head .crest { color: #fff; font-size: 22px; }
html[data-theme="dark"] .desk-head .crest { color: #15120a; }
.desk-head-right a { display: inline-flex; align-items: center; text-decoration: none; color: var(--in); font-weight: 600; }
.desk-head-right a:hover { text-decoration: underline; }
.desk-head .btn-sm { width: auto; min-height: 40px; margin: 0; padding: 6px 12px; font-size: 14px; color: var(--ink); }
.week-bar { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 6px 18px; align-items: center; }
.week-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--in); display: inline-flex; align-items: center; white-space: nowrap; }
.week-bar .sub { margin: 0; font-size: 16px; color: var(--ink); }
.week-bar .count { margin: 0; padding: 0; box-shadow: none; border: 0; background: transparent; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; }
.week-bar .count .heads { font-size: 26px; }
.week-bar .need { margin: 0; }
.desk-page .desk-col.desk-setup { background: transparent; border: 0; padding: 0; }
.desk-page .desk-setup .admin { margin: 0; display: grid; gap: 16px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; }
.desk-page .desk-pairs { padding: 0; }
.desk-page .desk-pairs .panel { border: 0; margin: 0; }
.col-title { display: flex; align-items: center; font-size: 19px; }
.col-title .ic { color: var(--in); width: 1.25em; height: 1.25em; }
.panel h3 { display: flex; align-items: center; margin-top: 20px; }
.panel h3:first-of-type { margin-top: 14px; }
.field .ic { width: 1.1em; height: 1.1em; }
label.field:has(.ic) { display: flex; align-items: center; }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.board-head .col-title { margin: 0; }
.board-tools { display: flex; gap: 8px; }
.board-tools .btn { width: auto; margin: 0; min-height: 42px; padding: 8px 14px; }
.pane h3 { display: flex; align-items: center; }
/* groups clearly labelled: each card gets a header bar with a group icon */
.desk-page .gcard .gtitle { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.desk-page .gcard .gtitle::before { content: ""; width: 18px; height: 18px; flex: none; background-color: var(--in); --i: var(--grp);
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.desk-page .gcard .gtitle strong { font-size: 16px; }
.desk-page .cart-label { display: flex; align-items: center; gap: 6px; }
.dropzone #rosterPick { display: inline-flex; align-items: center; }
@media (max-width: 760px) {
  .week-bar { grid-template-columns: 1fr; }
  .week-bar .count { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .desk-head-right { flex-wrap: wrap; gap: 10px; }
  .board-tools { width: 100%; }
  .board-tools .btn { flex: 1; }
}

/* ---- Players' page: header with the game note, headcount, open spots and "Need X more for another group"; big In/Out ---- */
.hero .crest { color: var(--in); font-size: 28px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow); }
html[data-theme="dark"] .hero .crest { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); box-shadow: none; }
.hero-line { display: flex; align-items: center; gap: 0; }
.hero-line .ic { width: 1.2em; height: 1.2em; margin-right: .5em; color: var(--in); }
html[data-theme="dark"] .hero-line .ic { color: var(--accent); }
.hero-line:has(#gameLine:empty) { display: none; }
.hero .count { display: grid; grid-template-columns: 1fr; gap: 6px; }
.hero .stat { display: flex; align-items: center; gap: 10px; }
.hero .stat > .ic { width: 28px; height: 28px; color: var(--in); margin: 0; }
html[data-theme="dark"] .hero .stat > .ic { color: var(--accent); }
.spots { font-size: 15px; color: var(--ink); }
.spots:empty { display: none; }
.hero .need { font-size: 18px; display: flex; align-items: center; }
.hero .need::before { content: ""; width: 1.2em; height: 1.2em; margin-right: .5em; flex: none; background-color: currentColor; --i: var(--uplus);
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.hero .need:empty::before { display: none; }

.me h2 { display: flex; align-items: center; }
.avatar { color: var(--in); font-size: 32px; }
html[data-theme="dark"] .avatar { color: var(--accent); }
.me-status { display: flex; align-items: center; }
.me-status .ic { margin-right: .35em; }
.btn-big { min-height: 76px; font-size: 24px; }
.btn-big .ic { width: 1.1em; height: 1.1em; }
.inout { gap: 12px; margin-top: 14px; }
.who h3 .ic { color: var(--in); }
html[data-theme="dark"] .who h3 .ic { color: var(--accent); }
.host::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -0.15em; background-color: var(--in); --i: var(--usr);
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
html[data-theme="dark"] .host::before { background-color: var(--accent); }
.ins .g { display: flex; align-items: center; padding-left: 1.5em; }
.ins .g::before { content: ""; width: .95em; height: .95em; margin-right: .45em; flex: none; background-color: var(--guest); --i: var(--uplus);
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
@media (max-width: 420px) { .hero h1 { font-size: 26px; } .btn-big { min-height: 72px; } }
/* fb12 contrast on the light hero: every gradient stop (#a9cfa5 and #f6f7f4) is checked, so hero text is dark */
html:not([data-theme="dark"]) .hero h1 { color: #1f4a2f; text-shadow: none; }
html:not([data-theme="dark"]) .hero .count .heads span { color: var(--ink); }
html:not([data-theme="dark"]) .hero .need.short { color: #5e3c08; }
html:not([data-theme="dark"]) .hero .need.clean { color: #1f4a2f; }
html[data-theme="dark"] .req-q { background: transparent; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .req-q::placeholder { color: #9c947e; opacity: 1; }

/* ---- fb13 desk v2: one screen (Game setup tabs left, Pairing board right), Close switch, group menu, autosave footer ---- */
.desk-page .desk-setup .admin { display: block; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -6px -4px 14px; }
.tab { background: transparent; border: 0; border-bottom: 3px solid transparent; margin: 0 0 -1px; padding: 10px 10px 8px; min-height: 44px;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; cursor: pointer; white-space: nowrap; border-radius: 6px 6px 0 0; }
.tab .ic { width: 1.1em; height: 1.1em; margin-right: .4em; }
.tab[aria-selected="true"] { color: var(--in); border-bottom-color: var(--in); }
.tab:hover { color: var(--ink); }
.tabpanel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.tabpanel > label.field:first-of-type { margin-top: 0; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; }
.switch-text .field { display: flex; align-items: center; margin: 0; }
.switch-text .note { margin: 2px 0 0; }
.switch { position: relative; flex: none; width: 54px; height: 32px; padding: 0; margin: 0; border-radius: 16px; border: 2px solid var(--muted); background: var(--paper); cursor: pointer; }
.switch .knob { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: left .15s; }
.switch[aria-checked="true"] { background: var(--in); border-color: var(--in); }
.switch[aria-checked="true"] .knob { left: 26px; background: #fff; }
html[data-theme="dark"] .switch[aria-checked="true"] .knob { background: #15120a; }
#signupBox > .field { display: flex; align-items: center; }
#signupBox .link-line { word-break: break-all; margin: 4px 0 8px; font-size: 14px; }
#signupBox .row2 .btn { margin: 0; }
.setup-pair { display: grid; grid-template-columns: 1fr; gap: 4px 16px; margin-top: 8px; }
@media (min-width: 520px) { .setup-pair { grid-template-columns: 3fr 2fr; } }
.setup-pair .theme-pick { margin: 6px 0 0; }
.tee-gap { margin-top: 6px; }
.tee-gap .field { display: flex; align-items: center; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.tee-gap input { width: 100%; box-sizing: border-box; }
#copyList { margin-top: 12px; }
.linkbtn { background: transparent; border: 0; color: var(--in); font: inherit; font-weight: 600; padding: 8px 4px; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.cbadge { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; margin-left: 8px; border-radius: 12px; background: var(--in); color: #fff; font-size: 13px; font-weight: 700; box-sizing: border-box; }
html[data-theme="dark"] .cbadge { color: #15120a; }
.gcount { margin-left: 6px; font-weight: 400; color: var(--muted); }
.desk-page .gcard .gtitle { position: relative; }
.desk-page .gcard .gtitle .gtee { font-size: 16px; color: var(--ink); }
.gnum { color: var(--muted); font-size: 14px; }
.gmenu-wrap { margin-left: auto; position: relative; }
.gmenu-btn { background: transparent; border: 1px solid transparent; border-radius: 6px; width: 40px; height: 34px; padding: 0; font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; }
.gmenu-btn:hover, .gmenu-btn[aria-expanded="true"] { border-color: var(--line); background: var(--bg); }
.gmenu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; min-width: 170px; padding: 4px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.gmenu[hidden] { display: none; }
.gmenu button { background: transparent; border: 0; border-radius: 6px; text-align: left; padding: 10px 12px; min-height: 40px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.gmenu button:hover, .gmenu button:focus-visible { background: var(--bg); }
.seat-row { display: flex; align-items: center; gap: 8px; }
.seat-no { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--in); color: #fff; font-size: 12px; font-weight: 700; }
html[data-theme="dark"] .seat-no { color: #15120a; }
.seat-row .cart-seat { flex: 1; min-width: 0; }
.desk-page .cart-seat.mate { padding-left: 4px; }
.desk-page .cart-seat.mate::before { content: none; }
.desk-page .seat-open { padding-left: 30px; }
.save-bar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap;
  margin-top: 16px; padding: 8px 14px; min-height: 44px; box-sizing: border-box; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; color: var(--ink); }
.save-msg { display: inline-flex; align-items: center; }
.save-msg .ic { color: var(--in); margin-right: .45em; }
.save-right { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.save-bar .btn-sm { width: auto; min-height: 36px; margin: 0; padding: 4px 12px; font-size: 14px; color: var(--ink); }
.save-bar[data-state="saving"] .save-msg .ic, .save-bar[data-state="error"] .save-msg .ic, .save-bar[data-state="conflict"] .save-msg .ic { display: none; }
.save-bar[data-state="error"] { background: #fbeae6; border-color: #c9837a; color: #7a1d14; }
.save-bar[data-state="conflict"] { background: #fff3d9; border-color: #c9a55a; color: #5e3c08; }
.save-bar[data-state="error"] .save-right, .save-bar[data-state="conflict"] .save-right { color: inherit; }
html[data-theme="dark"] .save-bar[data-state="error"] { background: #3a1f1b; border-color: #b3615a; color: #f6c9c0; }
html[data-theme="dark"] .save-bar[data-state="conflict"] { background: #2e2716; border-color: #8a6a2a; color: #f1d9a0; }
html[data-theme="dark"] .save-bar[data-state="error"] .btn-sm, html[data-theme="dark"] .save-bar[data-state="conflict"] .btn-sm { color: var(--ink); background: var(--paper); }
.save-bar[data-state="error"] .btn-sm { background: #fffcf6; }
.desk-page .wrap.wide { padding-bottom: 12px; }
.board-actions { display: grid; gap: 8px; margin-top: 10px; }
.board-actions .row2 .btn { margin: 0; }
@media (min-width: 960px) {
  .board-actions { grid-template-columns: 1fr 1fr; }
  .board-actions .btn { min-height: 40px; padding: 6px 6px; font-size: 13px; white-space: nowrap; }
  .desk-page .pane-body { max-height: max(240px, calc(100vh - 480px)); }
  .desk-page #rosterList { max-height: max(220px, calc(100vh - 560px)); overflow: auto; }
  .desk-page .board .pane h3 { margin-bottom: 6px; }
  .setup-pair .theme-pick .btn { min-height: 40px; padding: 6px 8px; white-space: nowrap; font-size: 14px; }
}
@media (max-width: 420px) {
  .tab .ic { display: none; }
  .tab { padding: 10px 8px 8px; font-size: 14px; }
}
@media (min-width: 601px) { .desk-page .board { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }

/* fb14: Cart A and Cart B side by side in each group at 1024px and up (stacked below); long names wrap */
.desk-page .cart-seat { overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .desk-grid { grid-template-columns: minmax(320px, 5fr) 8fr; }
  .desk-page .board { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .desk-page .carts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
  .desk-page .carts .cart-empty { grid-column: 1 / -1; }
  .desk-page .cart-seat:not(.is-guest) { font-size: 16px; }
}

/* fb16: themed suggestion list (player name type-ahead and Play-with search; replaces the white .req-hits rows) */
.sugg { list-style: none; margin: 4px 0 8px; padding: 4px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  max-height: 300px; overflow-y: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.sugg[hidden] { display: none; }
.sugg [role="option"] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 10px 12px;
  border-radius: 8px; color: var(--ink); background: transparent; cursor: pointer; overflow-wrap: anywhere; }
.sugg [role="option"][aria-selected="true"], .sugg [role="option"]:not(.sugg-empty):hover { background: var(--in-soft); box-shadow: inset 0 0 0 2px var(--in); }
.sugg .sugg-empty { color: var(--muted); cursor: default; }
/* fb16: the desk tab row wraps instead of running under the Pairing board (1024 to ~1190px, fb14 5:8 grid) */
.tabs { flex-wrap: wrap; }

/* fb17: the desk roster scrolls up and down only. The rows were wider than the roster box at every desk width
   (two 1fr columns cannot shrink below their content, and the name and the In/Remove group each took flex: 1),
   so #rosterList scrolled sideways. Real fix: one column unless there is room for two, names stacked and wrapping,
   the In/Out pill and Remove keep their own width. Backstop: no sideways scroll on the box (nothing is clipped,
   the rows already fit). Only the roster rows change. */
#rosterList { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); min-width: 0; }
#rosterList > li.roster-row { min-width: 0; }
.roster-row .rn { flex: 1 1 auto; min-width: 0; display: block; overflow-wrap: anywhere; }
.roster-row .rn .rl { display: block; font-weight: 600; line-height: 1.25; }
.roster-row .rn .rf { display: block; font-size: 13px; line-height: 1.3; color: var(--muted); }
.roster-row .rn span { flex: none; }
.roster-row .ra, .roster-row .ra span { flex: none; min-width: auto; }
@media (min-width: 960px) { .desk-page #rosterList { overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; } }

/* fb18 (Alton t952u): two compact columns again (the fb12 look) with the fb17 stacked names. Two columns from 520px
   (every desk width from 1024 up), one column on phones. minmax(0, 1fr) lets the columns shrink; long names wrap
   inside the card (whole words first). Smaller In/Out badge; Remove is a 32px icon button named "Remove <name>". fb17 backstop kept. */
#rosterList { grid-template-columns: minmax(0, 1fr); gap: 6px; }
@media (min-width: 520px) { #rosterList { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#rosterList > li.roster-row { padding: 6px 2px 6px 8px; gap: 0 4px; border-radius: 8px; flex-wrap: wrap; }
/* a name too wide to sit beside the badge drops the badge and Remove onto their own line instead of splitting a word */
#rosterList .roster-row .rn { overflow-wrap: break-word; }
#rosterList .roster-row .ra { margin-left: auto; }
.roster-row .rn .rl { font-size: 15px; }
.roster-row .rn .rf { font-size: 12.5px; }
.roster-row .ra { gap: 2px; }
.roster-row .ra .pill { font-size: 11px; padding: 1px 6px; }
.roster-row button.rm { width: 32px; min-height: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--out); }
.roster-row button.rm .ic { margin: 0; width: 17px; height: 17px; }
.roster-row button.rm:hover { background: var(--bg); }
.roster-row button.rm:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* fb20 (S718): Commishes, at the bottom of Game setup; same list, row and link styles as the roster and players' link */
#commishList > li.roster-row { flex-wrap: wrap; gap: 0 8px; }
#commishList .ra { flex: 1 1 auto; min-width: 0; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 4px; }
#commishList .rn .rf { overflow-wrap: anywhere; }
#commishAdd .guest-row input { min-width: 0; }
#setupBox .link-line { word-break: break-all; margin: 4px 0 8px; font-size: 14px; }