/* Hashmark app - the 2026-10-26 remodel, direction A ("Night Session") with C's buttons. Light mode for now.
   Loads after index.html's style block. Every rule starts with html[data-ui="a"] so it also wins over the styles the
   feature files add at run time (same selectors, one attribute more), and taking data-ui off <html> brings back the
   old look in one step. Screen only: printing (wristbands, call sheets, scout cards) never changes.
   Rules kept: yellow only on things that do something; selected = ink with yellow text; no emojis.
   Mockups: docs/design/app-a-c-screens.html. */
@media screen {
html[data-ui="a"] {
  --bg: #f6f5f1; --panel: #ffffff; --ink: #141414; --ink-2: #3a3a37; --muted: #5c5952; --line: #e0ddd4; --line-2: #cfcabd;
  --soft: #f0eee8; --soft-2: #e8e5dd;
  --r: 10px; --rs: 6px; --rb: 10px;
  --btn-bg: #ffffff; --btn-ln: #e7e4dd; --btn-sh: 0 1px 2px rgba(0,0,0,.05);
  /* every "Npx Npx 0 ink" hard shadow in the app reads var(--hs, ...): soft here, the old one in print and without data-ui */
  --hs: 0 1px 2px rgba(20,20,20,.05), 0 10px 28px -18px rgba(20,20,20,.35);
}
html[data-ui="a"] body { font-family: 'Barlow', system-ui, 'Segoe UI', sans-serif; font-size: 14.5px; background: var(--bg); -webkit-font-smoothing: antialiased; }

/* ---------- buttons (C's) ---------- */
html[data-ui="a"] button { border: 1px solid var(--btn-ln); background: var(--btn-bg); border-radius: var(--rb); box-shadow: var(--btn-sh); font-weight: 600; padding: 6px 12px; transition: border-color .12s, filter .12s; }
html[data-ui="a"] button:hover { border-color: #8a867d; }
html[data-ui="a"] button.primary { background: var(--hi); color: var(--ink); border-color: var(--hi); font-weight: 700; box-shadow: 0 1px 0 rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.08); }
html[data-ui="a"] button.primary:hover { filter: brightness(.96); border-color: var(--hi); }
html[data-ui="a"] button.ghost { background: transparent; border-color: transparent; box-shadow: none; }
html[data-ui="a"] button.ghost:hover { background: var(--soft); }
html[data-ui="a"] button.small { border-radius: 8px; padding: 3px 9px; }
html[data-ui="a"] button:disabled { box-shadow: none; }
html[data-ui="a"] button:focus-visible { outline: 3px solid var(--sel); outline-offset: 2px; }

/* ---------- fields ---------- */
html[data-ui="a"] input[type=text], html[data-ui="a"] input[type=number], html[data-ui="a"] input[type=email], html[data-ui="a"] input[type=search],
html[data-ui="a"] input[type=password], html[data-ui="a"] input[type=date], html[data-ui="a"] input[type=time], html[data-ui="a"] select, html[data-ui="a"] textarea {
  border: 1px solid #d6d2c8; border-radius: 8px; background: #fff; }
html[data-ui="a"] input:focus, html[data-ui="a"] select:focus, html[data-ui="a"] textarea:focus { outline: 3px solid color-mix(in srgb, var(--sel) 25%, transparent); outline-offset: 0; border-color: var(--sel); }

/* ---------- top bar: stays black (A keeps the app's black bar in light mode) ---------- */
html[data-ui="a"] header.top { background: #141414; border-bottom: 1px solid #262624; padding: 8px 14px; gap: 12px; }
html[data-ui="a"] header.top button { background: transparent; color: #f3f0e8; border-color: #34342f; box-shadow: none; border-radius: var(--rb); }
html[data-ui="a"] header.top button:hover { border-color: #6b6861; color: #fff; background: transparent; }
html[data-ui="a"] header.top select, html[data-ui="a"] header.top input { background: #1d1d1b; color: #f3f0e8; border-color: #34342f; border-radius: 8px; }
html[data-ui="a"] header.top #newWeekBtn { background: var(--hi); color: var(--ink); border-color: var(--hi); }
html[data-ui="a"] #saveStatus { border-radius: 99px; padding: 3px 10px; }
html[data-ui="a"] header.top .top-nav { gap: 2px; }
html[data-ui="a"] header.top .top-nav button { border: 0; border-radius: var(--rb); text-transform: none; letter-spacing: 0; font: 600 14.5px 'Barlow', system-ui, sans-serif; color: #a9a59b; padding: 7px 12px; border-bottom: 0; }
html[data-ui="a"] header.top .top-nav button:hover { color: #f3f0e8; background: #1d1d1b; border-bottom: 0; }
html[data-ui="a"] header.top .top-nav button.on { color: var(--hi); background: #262624; border-bottom: 0; }
html[data-ui="a"] .top-nav .count { border-radius: 99px; padding: 0 6px; background: #e5341c; color: #fff; font-weight: 700; }
html[data-ui="a"] nav.tabs .count { border-radius: 99px; }

/* ---------- sidebar ---------- */
html[data-ui="a"] nav.tabs.side { background: var(--bg); border-right: 1px solid var(--line); padding: 10px 8px 14px; gap: 2px; }
html[data-ui="a"] nav.tabs.side .nav-g { font: 700 11px 'Barlow', sans-serif; letter-spacing: .08em; color: #8a867d; padding: 14px 10px 6px; }
html[data-ui="a"] nav.tabs.side button { border: 0; box-shadow: none; border-radius: var(--rs); color: var(--muted); font: 500 14.5px 'Barlow', sans-serif; padding: 7px 10px; }
html[data-ui="a"] nav.tabs.side button:hover { background: var(--soft); color: var(--ink); }
html[data-ui="a"] nav.tabs.side button.on { background: var(--ink-bg, var(--ink)); color: var(--hi); }
html[data-ui="a"] nav.tabs.side .side-wk.on .muted { color: #cfcabd; }
html[data-ui="a"] nav.tabs.side .side-wk .wk-n { font: 700 12px ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0; }
html[data-ui="a"] nav.tabs.side .side-start { color: var(--ink); font-weight: 600; }
html[data-ui="a"] nav.tabs.side .side-fold, html[data-ui="a"] nav.tabs.side .side-fb { color: var(--muted); }

/* ---------- week tabs: a line under the one you're on ---------- */
html[data-ui="a"] nav.wtabs { background: transparent; border-bottom: 1px solid var(--line); padding: 4px 16px 0; gap: 4px; }
html[data-ui="a"] nav.wtabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; background: transparent; color: var(--muted); font: 600 14.5px 'Barlow', sans-serif; padding: 11px 12px; top: 1px; margin-bottom: 0; }
html[data-ui="a"] nav.wtabs button:hover { background: transparent; color: var(--ink); }
html[data-ui="a"] nav.wtabs button.on { background: transparent; color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- surfaces ---------- */
html[data-ui="a"] .cardbox { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
html[data-ui="a"] h3 { letter-spacing: .03em; }
html[data-ui="a"] table.data { background: var(--panel); border-radius: var(--rs); }
html[data-ui="a"] table.data th { border-bottom: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 11.5px; letter-spacing: .08em; }
html[data-ui="a"] table.data tr.click:hover td { background: #f6f3e6; }
html[data-ui="a"] .chip { border-radius: var(--rs); border: 1px solid var(--line-2); background: #fff; }
html[data-ui="a"] .badge { border-radius: 4px; }
/* ---------- This week (weekpages.js) ---------- */
html[data-ui="a"] .wk-next { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--hs); padding: 18px 20px; }
html[data-ui="a"] .wk-next.done { background: #eef6f0; border-color: #cfe6d6; }
html[data-ui="a"] .wk-prog { gap: 4px; }
html[data-ui="a"] .wk-prog i { border: 0; border-radius: 2px; background: var(--soft-2); height: 6px; }
html[data-ui="a"] .wk-prog i.on { background: var(--ink); }
html[data-ui="a"] .wk-day { border-top: 1px solid var(--line); }
html[data-ui="a"] .wk-day:first-of-type { border-top: 0; }
html[data-ui="a"] .wk-day.today { outline: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--hs); overflow: hidden; }
html[data-ui="a"] .wk-day.today + .wk-day { border-top: 0; }

html[data-ui="a"] #toast { border-radius: var(--r); border-left: 0; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); padding: 10px 16px; }

/* ---------- Settings > Look ---------- */
html[data-ui="a"] .ui-look button.on { background: var(--ink-bg, var(--ink)); color: var(--hi); border-color: var(--ink-bg, var(--ink)); }

/* =================== DARK (uitheme.js sets data-theme) ===================
   The feature files write their light colours as var(--surf, #fff), var(--ink-bg, var(--ink)), var(--ink-line, ...),
   var(--tint-y, ...) and so on: only this block defines those names, so light mode and print never change. */
html[data-ui="a"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0d0f; --panel: #141619; --ink: #f3f0e8; --ink-2: #d6d2c8; --muted: #9a978f; --line: #262a30; --line-2: #3a3f47;
  --soft: #1b1e22; --soft-2: #22262b;
  --surf: #141619; --surf2: #1b1e22; --tint-y: #2a2614; --tint-g: #16281a; --tint-r: #2e1914; --tint-b: #16203d;
  --ink-bg: #262a30; --ink-line: #4a4f57;
  --sel: #7d9bff; --sel-bg: #16203d; --warn: #f2c94c; --warn-bg: #2a2614; --err: #ff9c8a; --err-bg: #2e1914; --ok: #9be3a6; --ok-bg: #16281a;
  --btn-bg: #1a1c1f; --btn-ln: #2d3137; --btn-sh: none;
  --hs: 0 12px 30px -16px rgba(0,0,0,.7);
}
html[data-ui="a"][data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-ui="a"][data-theme="dark"] button { color: var(--ink); }
html[data-ui="a"][data-theme="dark"] button:hover { border-color: #6b6861; }
html[data-ui="a"][data-theme="dark"] button.primary { color: #141414; }
html[data-ui="a"][data-theme="dark"] input[type=text], html[data-ui="a"][data-theme="dark"] input[type=number], html[data-ui="a"][data-theme="dark"] input[type=email],
html[data-ui="a"][data-theme="dark"] input[type=search], html[data-ui="a"][data-theme="dark"] input[type=password], html[data-ui="a"][data-theme="dark"] input[type=date],
html[data-ui="a"][data-theme="dark"] input[type=time], html[data-ui="a"][data-theme="dark"] select, html[data-ui="a"][data-theme="dark"] textarea {
  background: #1a1c1f; color: var(--ink); border-color: #2d3137; }
html[data-ui="a"][data-theme="dark"] input::placeholder, html[data-ui="a"][data-theme="dark"] textarea::placeholder { color: #6b6861; }
html[data-ui="a"][data-theme="dark"] input[type=checkbox], html[data-ui="a"][data-theme="dark"] input[type=radio] { accent-color: var(--hi); }
html[data-ui="a"][data-theme="dark"] header.top { background: #0c0d0f; border-bottom-color: var(--line); }
html[data-ui="a"][data-theme="dark"] header.top .top-nav button.on { background: #1b1e22; }
html[data-ui="a"][data-theme="dark"] nav.tabs.side button.on, html[data-ui="a"][data-theme="dark"] .ui-look button.on { box-shadow: inset 0 0 0 1px var(--line-2); }
html[data-ui="a"][data-theme="dark"] nav.tabs.side .nav-g { color: #6b6861; }
html[data-ui="a"][data-theme="dark"] table.data tr.click:hover td { background: #1b1e22; }
html[data-ui="a"][data-theme="dark"] .chip { background: #1a1c1f; border-color: #2d3137; }
html[data-ui="a"][data-theme="dark"] .wk-next.done { background: #16281a; border-color: #24452c; }
html[data-ui="a"][data-theme="dark"] #toast { background: #22262b; color: var(--ink); }
html[data-ui="a"][data-theme="dark"] a { color: #b9c8ff; }
/* Paper: what will be printed stays black on white, like a page in a PDF viewer */
html[data-ui="a"][data-theme="dark"] :is(#sheetWrap, .band-preview, .card, table.pt, #printTab .pp, .paper) {
  --ink: #141414; --ink-2: #3a3a37; --muted: #6d6a62; --line: #d9d4c7; --line-2: #bdb6a5; --panel: #fbfaf6;
  --surf: #fff; --surf2: #fbfaf6; --tint-y: #fffbe0; --tint-g: #dcefe1; --tint-r: #fde2e1; --tint-b: #e1e7fb;
  --ink-bg: #141414; --ink-line: #141414; color: #141414; color-scheme: light; }

/* =================== GAME DAY (gameday.js, gdquick.js, gdstat.js, gddecide.js) ===================
   Same controls and sizes; the boxes get soft lines and rounded corners. Selected stays ink with yellow. */
html[data-ui="a"] #gameTab { --ink-line: var(--line-2); }
html[data-ui="a"] #gameTab :is(.gd-board, .gq, .gh, .gs-list, .gdd-board, .gdd-verdict, .gd-pend, .gd-tools .gt-box) { border-width: 1px; border-radius: var(--r); box-shadow: var(--hs); }
html[data-ui="a"] #gameTab .gd-board { overflow: hidden; }
html[data-ui="a"] #gameTab :is(.gq-in, .gq-chip, .gs .gs-pen, .gt-b, .gh-b, .gd-sum div) { border-width: 1px; border-radius: 8px; }
html[data-ui="a"] #gameTab :is(.gd-pend, .gd-chk) { color: #141414; }
html[data-ui="a"] #gameTab .gd-group { border-width: 1px; border-radius: var(--r); padding: 4px; }
html[data-ui="a"][data-theme="dark"] #gameTab button.on { color: var(--hi); box-shadow: inset 0 0 0 1px var(--line-2); }

/* =================== SEGMENTED SWITCHES (.seg, everywhere: Wristband / Backup QB band, cards, player tabs...) ===================
   One rounded track; the buttons inside drop the general button border and shadow; selected = ink with yellow. */
html[data-ui="a"] .seg { border: 1px solid var(--line); border-radius: 12px; background: var(--soft); padding: 3px; gap: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
html[data-ui="a"] .seg::-webkit-scrollbar { display: none; }
html[data-ui="a"] .seg > button { flex: none; white-space: nowrap; }
html[data-ui="a"] .seg button { border: 0; box-shadow: none; background: transparent; border-radius: 9px; color: var(--muted); font-weight: 600; }
html[data-ui="a"] .seg button:hover { color: var(--ink); background: var(--soft-2); }
html[data-ui="a"] .seg button.on { background: var(--ink-bg, var(--ink)); color: var(--hi); }
html[data-ui="a"][data-theme="dark"] .seg button.on { box-shadow: inset 0 0 0 1px var(--line-2); }

/* =================== PLAYER, TRAINER, STATISTICIAN and BROADCASTER screens (roleapp.js) =================== */
html[data-ui="a"] .ra-top button, html[data-ui="a"] .ra-out { background: transparent; color: #f3f0e8; border-color: #4a4a46; box-shadow: none; }
html[data-ui="a"] .ra-top button:hover { border-color: #8a867d; }
html[data-ui="a"] .ra-bar { border-bottom: 1px solid var(--line); }
html[data-ui="a"] .ra-card { border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--hs); }
html[data-ui="a"] .ra-st { border-width: 1px; border-radius: 99px; }
html[data-ui="a"] .ra-add { border-width: 1px; border-radius: var(--rb); }
html[data-ui="a"] .ra-img { border-radius: var(--rs); }
html[data-ui="a"] .ra-last { border-radius: var(--r); }

/* the quiz (quiz.js, coaches and players): soft boxes, black on yellow, selected = ink with yellow */
html[data-ui="a"] .qz :is(button.qb, .qz-type, .qz-card, .qz-field, .qz-ans, .qz-miss, .qz-empty, .qz-stage, .qz-pic), html[data-ui="a"] .qz-set {
  border-width: 1px; border-color: var(--line-2); border-radius: var(--r); }
html[data-ui="a"] .qz .qz-ans { border-left: 6px solid var(--hi); }
html[data-ui="a"] .qz .qz-card { box-shadow: var(--hs); }
html[data-ui="a"] .qz button.qb.go, html[data-ui="a"] .qz button.qb.go:hover:not(:disabled) { background: var(--hi); color: #141414; border-color: var(--hi); }
html[data-ui="a"] .qz button.qb.on, html[data-ui="a"] .qz button.qb.on:hover:not(:disabled) { background: var(--ink-bg, var(--ink)); color: var(--hi); }

/* =================== FIRST PAGE and PLANS (landing.js, account.js) =================== */
html[data-ui="a"] .ld-hero h1 mark { color: #141414; }
html[data-ui="a"] .ld-strip span { border-width: 1px; border-color: var(--line); border-radius: 99px; padding: 6px 12px; }
html[data-ui="a"] :is(.ld-card, .ld-opt, .ld-pick label) { border-width: 1px; border-color: var(--line); border-radius: var(--r); }
html[data-ui="a"] .ld-opt.on { color: #141414; border-color: var(--hi); }
html[data-ui="a"] .ac-card { border: 1px solid var(--line); border-radius: var(--r); }
/* C's pricing highlights: the best plan gets an ink edge, a soft yellow ring and a round badge */
html[data-ui="a"] .ac-card.best { border: 1.5px solid var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hi) 55%, transparent), 0 30px 60px -30px rgba(0,0,0,.35); }
html[data-ui="a"] .ac-best { background: #141414; color: #f3f0e8; border: 0; border-radius: 99px; padding: 3px 10px; letter-spacing: .08em; }
html[data-ui="a"][data-theme="dark"] .ac-best { background: #f3f0e8; color: #141414; }
html[data-ui="a"] .ac-founder { border: 1px dashed var(--line-2); border-radius: var(--r); }
html[data-ui="a"] .ac-ftag { background: #e6f3e8; color: #1f6a2f; border-radius: 4px; font-family: 'Barlow', sans-serif; letter-spacing: .02em; text-transform: none; font-size: 12.5px; }
html[data-ui="a"][data-theme="dark"] .ac-ftag { background: #16281a; color: #9be3a6; }
html[data-ui="a"] .ac-badge { border-width: 1px; border-radius: 99px; }
html[data-ui="a"] :is(.ac-badge.trial, .ac-offer) { color: #141414; }
html[data-ui="a"] .ac-offer { border-width: 1px; border-radius: var(--r); }

/* =================== CLUB OFFICE: direction C ("Club Colors"), chosen 2026-10-26 ===================
   Only inside the club screen (#cbMain: club.js and the club*.js tabs). The tabs draw borders with var(--ink-line, ...)
   and shadows with var(--hs, ...), so here those become soft lines and soft shadows; cards get 1px and 16px corners. */
html[data-ui="a"] #cbMain {
  --bg: #ffffff; --panel: #ffffff; --surf: #ffffff; --surf2: #f6f5f2; --soft: #f6f5f2; --soft-2: #eeece7;
  --line: #e7e4dd; --line-2: #d9d5cc; --ink-line: #e7e4dd; --muted: #64615b;
  --tint-y: #fff8db; --tint-g: #edf6ef; --tint-r: #fdeeea; --tint-b: #eef1fd;
  --hs: 0 1px 2px rgba(20,20,20,.05), 0 8px 24px -12px rgba(20,20,20,.14);
  --rc: 16px; --rcs: 10px;
}
html[data-ui="a"][data-theme="dark"] #cbMain {
  --bg: #111214; --panel: #1a1c1f; --surf: #1a1c1f; --surf2: #202327; --soft: #202327; --soft-2: #282b30;
  --line: #2d3137; --line-2: #3a3f47; --ink-line: #2d3137; --muted: #a19e97;
  --tint-y: #2a2614; --tint-g: #17291b; --tint-r: #301a15; --tint-b: #18213d;
  --hs: 0 10px 30px -14px rgba(0,0,0,.6);
}
html[data-ui="a"] #cbMain h2, html[data-ui="a"] #cbMain h3 { font-family: 'Barlow', system-ui, sans-serif; text-transform: none; letter-spacing: -.02em; font-weight: 700; }
html[data-ui="a"] #cbMain h2 { font-size: 26px; line-height: 1.15; }
html[data-ui="a"] #cbMain h3 { font-size: 17px; }
/* cards and boxes: hairline, rounded, soft shadow */
html[data-ui="a"] #cbMain :is(.cb-card, .cb-offer, .cf-pad, .md-group, .vd-plan, .vd-row, .cc-grid) { border-width: 1px; border-radius: var(--rc); box-shadow: var(--hs); }
html[data-ui="a"] #cbMain .cb-card { padding: 22px 24px; }
html[data-ui="a"] #cbMain :is(.cb-err, .cf-note, .cf-eq, .gr-hint, .ct-link, .md-who, .md-tagp, .md-stick, .cc-mini) { border-width: 1px; border-radius: var(--rcs); }
html[data-ui="a"] #cbMain :is(.md-tile, .md-strip img, .gr-photo img, .cn-pic, .md-binimg, .md-binvd) { border-width: 1px; border-radius: var(--rcs); }
html[data-ui="a"] #cbMain :is(.cb-chip, .md-chip, .md-alink) { border-width: 1px; border-radius: 99px; }
html[data-ui="a"] #cbMain .md-tile.on { outline-color: var(--ink); }
html[data-ui="a"] #cbMain :is(.cc-cell, .cc-dayh, .cc-gh) { border-width: 1px; }
html[data-ui="a"] #cbMain .vd-bar { border-width: 1px; border-radius: 99px; height: 8px; }
/* tabs: a pill strip, selected = ink with yellow */
html[data-ui="a"] #cbMain .cb-tabs { padding: 4px; gap: 4px; background: var(--surf); border: 1px solid var(--line); border-radius: 14px; width: max-content; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; box-shadow: var(--hs); }
html[data-ui="a"] #cbMain .cb-tabs button { border: 0; box-shadow: none; background: transparent; color: var(--muted); font-weight: 600; border-radius: var(--rcs); white-space: nowrap; min-height: 38px; }
html[data-ui="a"] #cbMain .cb-tabs button:hover { color: var(--ink); background: var(--soft); }
html[data-ui="a"] #cbMain .cb-tabs button.on { background: #141414; color: var(--hi); }
html[data-ui="a"][data-theme="dark"] #cbMain .cb-tabs button.on { background: #282b30; }
html[data-ui="a"] #cbMain .cc-seg { border-width: 1px; border-radius: 12px; padding: 3px; gap: 3px; background: var(--surf2); box-shadow: none; }
html[data-ui="a"] #cbMain .cc-seg button { border-radius: 9px; background: transparent; }
html[data-ui="a"] #cbMain .cc-seg button + button { border-left: 0; }
html[data-ui="a"] #cbMain .cc-seg button.on { background: #141414; color: var(--hi); }
/* the page around the club (club.js clubShell: the first page's frame) and the club name */
html[data-ui="a"] .ld:has(#cbMain) { background: #ffffff; min-height: 100vh; }
html[data-ui="a"][data-theme="dark"] .ld:has(#cbMain) { background: #111214; color: var(--ink); }
html[data-ui="a"][data-theme="dark"] .ld-top .ld-lw { filter: invert(1) brightness(1.05); }
html[data-ui="a"] #cbMain .cb-head h1 { font: 700 clamp(30px, 4.4vw, 46px)/1.02 'Barlow', system-ui, sans-serif; text-transform: none; letter-spacing: -.04em; }
/* yes / no answers on forms stay big touch targets, just softer */
html[data-ui="a"] #cbMain .cf-yn button { border-width: 1px; border-radius: var(--rcs); box-shadow: var(--hs); }
}