/* Homecourt shell. Tokens follow the 002 morning view (002/ops/app/index.html, 11 Sep 2026), light and dark, and the
   declutter design system (docs/DECLUTTER.md §2, 14 Sep 2026). No inline styles anywhere: views set el.style through h().
   Chart colours are CSS variables, stepped for each theme, so a chart never hard-codes a hex:
   - categorical slots, fixed order: --s1 blue · --s2 orange · --s3 aqua · --s4 yellow · --s5 magenta · --s6 green ·
     --s7 violet (dataviz palette.md; light on #ffffff, dark on #1a1a19: validate_palette.js passes both);
   - use of the courts, 0 → 100%: --q0 is the near-zero cell (neutral), --q1…--q5 one blue hue (validate_palette.js
     --ordinal passes both themes; light gets darker with use, dark gets lighter);
   - --bb: basketball, a neutral (grey means elsewhere). */
:root {
  color-scheme: light;
  --page: #f4f5f7; --surface: #ffffff; --raised: #ffffff; --line: #e6e5df; --axis: #c9c8c1; --grid: #eeede8;
  --ink: #0b0b0b; --ink2: #52514e; --muted: #8a8984; --brand: #4657e8;
  --good: #006300; --bad: #c9302c; --warn: #b77900;
  --dot: #3d4a5c; --prime: #f1f2fa; --bb: #3d4a5c;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7;
  --q0: #eceef1; --q1: #86b6ef; --q2: #5598e7; --q3: #2a78d6; --q4: #1c5cab; --q5: #0d366b;
  --shadow: 0 8px 28px rgba(0, 0, 0, .14);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* type: numbers 28/700 · page title 20/650 · card title 15/650 · body 13 · meta 11.5, tabular figures */
  --fs-num: 28px; --fs-title: 20px; --fs-card: 15px; --fs-body: 13px; --fs-meta: 11.5px;
  /* 4-pt spacing: card padding 16, gaps 12, sections 24 */
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 20px; --sp6: 24px;
  --pad-card: var(--sp4); --gap: var(--sp3); --section: var(--sp6); --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --raised: #20201f; --line: #2c2c2a; --axis: #44443f; --grid: #262624;
    --ink: #ffffff; --ink2: #c3c2b7; --muted: #8f8e86; --brand: #8b98f0;
    --good: #0ca30c; --bad: #e66767; --warn: #fab219;
    --dot: #c3c9d6; --prime: #1e2030; --bb: #9aa7ba;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9;
    --q0: #24272c; --q1: #184f95; --q2: #256abf; --q3: #3987e5; --q4: #6da7ec; --q5: #b7d3f6;
    --shadow: 0 12px 32px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --raised: #20201f; --line: #2c2c2a; --axis: #44443f; --grid: #262624;
  --ink: #ffffff; --ink2: #c3c2b7; --muted: #8f8e86; --brand: #8b98f0;
  --good: #0ca30c; --bad: #e66767; --warn: #fab219;
  --dot: #c3c9d6; --prime: #1e2030; --bb: #9aa7ba;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9;
  --q0: #24272c; --q1: #184f95; --q2: #256abf; --q3: #3987e5; --q4: #6da7ec; --q5: #b7d3f6;
  --shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--ink); font: var(--fs-body)/1.45 var(--font); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
a { color: var(--brand); }
.num, td.r, th.r { font-variant-numeric: tabular-nums; }

/* layout: header on top; navigation on the left from 1024 px, a sideways strip below it */
.app { max-width: 1560px; margin: 0 auto; padding: 12px 16px 48px; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "bypass" "top" "nav" "view"; }
.bypass { grid-area: bypass; background: var(--bad); color: #fff; font-weight: 650; border-radius: 8px; padding: 6px 12px; margin-bottom: 10px; }

/* header: logos + name · date · one data pill (its ⓘ lists every source) · the user menu */
.top { grid-area: top; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: var(--sp4); }
.brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand .bname { font-weight: 750; font-size: 16px; letter-spacing: -.2px; }
.brand .logo { width: 30px; height: 30px; border-radius: 7px; display: block; object-fit: cover; }
.today { font-size: 18px; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
.today .d-short { display: none; }
.fresh { display: flex; align-items: center; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.chip i, .pv-link i, .pill i.dot, .src i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.chip i.green, .pv-link i.green, .pill i.green, .src i.green { background: var(--good); }
.chip i.amber, .pill i.amber, .src i.amber { background: var(--warn); }
.chip i.red, .pv-link i.red, .pill i.red, .src i.red { background: var(--bad); }
.chip b { color: var(--ink); font-weight: 650; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink2); border: 1px solid var(--line);
  background: var(--surface); border-radius: 999px; padding: 4px 6px 4px 11px; white-space: nowrap; cursor: pointer; min-height: 30px; }
.pill b { color: var(--ink); font-weight: 650; }
.pill .pl-short { display: none; }
.pill:hover, .pill[aria-expanded="true"] { border-color: var(--axis); }
.pill:focus-visible, .menu-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pill.amber { border-color: var(--warn); }
.pill.red { border-color: var(--bad); }
.who { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.menu-btn { border: 1px solid transparent; background: transparent; color: var(--ink2); font-weight: 600; font-size: 12.5px;
  border-radius: 8px; padding: 5px 8px; cursor: pointer; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; min-height: 32px; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { border-color: var(--line); color: var(--ink); }
.src-list { display: grid; gap: 2px; margin: 2px 0 0; }
.src { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 2px 0; }
.src b { color: var(--ink); font-weight: 650; }
.src .st { color: var(--muted); font-size: var(--fs-meta); }
.pop-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* navigation: every screen the role may see, grouped (web/lib/screens.js NAV) */
nav.nav { grid-area: nav; display: flex; gap: 4px 14px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px 6px; margin-bottom: 14px; scrollbar-width: thin; align-self: start; }
nav.nav .grp { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
nav.nav .grp + .grp { border-left: 1px solid var(--line); padding-left: 10px; }
nav.nav .gl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-right: 4px; }
nav.nav a { color: var(--ink2); text-decoration: none; font-weight: 600; font-size: 13px; padding: 6px 10px;
  border-radius: 7px; white-space: nowrap; }
nav.nav a:hover { color: var(--ink); }
nav.nav a[aria-current="page"] { background: var(--ink); color: var(--surface); }
nav.nav a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
@media (min-width: 1024px) {
  .app { grid-template-columns: 184px minmax(0, 1fr); grid-template-areas: "bypass bypass" "top top" "nav view"; column-gap: 20px; }
  nav.nav { flex-direction: column; gap: 8px; overflow: visible; padding: 8px 6px; position: sticky; top: 12px; }
  nav.nav .grp { flex-direction: column; align-items: stretch; }
  nav.nav .grp + .grp { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 8px; }
  nav.nav .gl { margin: 2px 0 2px 10px; }
}

.view { grid-area: view; min-height: 40vh; min-width: 0; container-type: inline-size; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad-card);
  margin-bottom: var(--gap); min-width: 0; }
.card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 650; }
.card h3 { margin: 0; font-size: var(--fs-card); font-weight: 650; }
.card .sub { color: var(--muted); font-size: 12px; margin: 1px 0 0; }
/* a card's header: title, its ⓘ, then whatever the card puts on the right */
.chead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp3); min-height: 22px; }
.chead .right { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--ink2); }
.muted { color: var(--muted); }
.lbl { font-size: 12px; color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 8px; }

.btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 6px 12px;
  font-weight: 600; font-size: 13px; cursor: pointer; }
.btn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn.ghost { color: var(--ink2); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
select, input { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; }

/* login and password forms */
.auth { max-width: 360px; margin: 12vh auto 0; }
.auth h1 { font-size: 22px; letter-spacing: -.4px; margin: 0 0 2px; }
.auth form { display: grid; gap: 10px; margin-top: 16px; }
.auth label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink2); font-weight: 600; }
.auth input { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 16px; }
.auth input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.auth .btn { padding: 9px 12px; font-size: 14px; }
.auth .row { display: flex; gap: 8px; }
.err { color: var(--bad); font-size: 13px; min-height: 1.2em; margin: 0; }
.okmsg { color: var(--good); font-size: 13px; margin: 0; }

/* ---------------------------------------------------------------- page template (docs/DECLUTTER.md §2) */
.phead { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: var(--sp3); }
.phead h1 { margin: 0; font-size: var(--fs-title); font-weight: 650; letter-spacing: -.3px; }
.phead .tabs { margin-bottom: 0; }
.phead .spacer { flex: 1 1 auto; }
.period { font-size: 13px; color: var(--ink2); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.period select { font-weight: 650; }
.notice { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink2); margin: -2px 0 var(--sp3); }
.notice i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: 0 0 auto; }
.notice i.hatch { width: 11px; height: 11px; border-radius: 2px; }
.notice i.plain { background: var(--muted); }
.foot { margin: var(--section) 0 0; font-size: var(--fs-meta); color: var(--muted); display: flex; gap: 8px; align-items: baseline; line-height: 1.5; }
.glyph { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--muted); color: var(--muted); font: 700 9.5px/12px var(--font);
  text-align: center; display: inline-block; flex: 0 0 auto; font-style: normal; }
.row2 { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: var(--gap); align-items: start; }
.row2 > .card { margin-bottom: 0; }
@container (max-width: 900px) { .row2 { grid-template-columns: minmax(0, 1fr); } }

/* the ⓘ: a button that opens its card's basis, as-of and Table view in #tip (lib/charts.js info()) */
.info { position: relative; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--muted); color: var(--muted);
  background: transparent; font: 700 11px/1 var(--font); font-style: normal; padding: 0; cursor: pointer; display: inline-grid;
  place-items: center; flex: 0 0 auto; }
.info::after { content: ""; position: absolute; inset: -8px; }   /* a 34px target around an 18px glyph */
.info:hover, .info[aria-expanded="true"] { color: var(--ink); border-color: var(--ink); }
.info:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pill .info { width: 16px; height: 16px; font-size: 10px; }
.pop-body { display: none; }
details.tv.pop-tv > summary { display: none; }
details.tv.pop-tv[open] { margin-top: var(--sp3); }

/* ---------------------------------------------------------------- charts (lib/charts.js) */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
@container (max-width: 1180px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 620px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.kpi .k { font-size: 12.5px; color: var(--ink2); white-space: nowrap; display: flex; gap: 6px; align-items: center; min-width: 0; }
.kpi .k .kl { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kpi .k .l-short { display: none; }
.kpi .k .info { margin-left: 2px; }
.info-w { display: inline-flex; align-items: center; }
.kpi .mid { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; margin-top: 2px; }
.kpi .v { font-size: var(--fs-num); font-weight: 700; letter-spacing: -.6px; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi svg { flex: 0 0 auto; }
.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 620px) {
  .kpis.k3 { gap: 8px; }
  .kpis.k3 .kpi { padding: 10px; }
  .kpis.k3 .kpi .v { font-size: 22px; }
  .kpis.k3 .kpi .k { font-size: var(--fs-meta); }
  .kpis.k3 .kpi .k .info, .kpis.k3 .kpi svg, .kpis.k3 .kpi .vs, .kpis.k3 .kpi .l-long { display: none; }
  .kpis.k3 .kpi .l-short { display: inline; }
}
.delta { font-weight: 650; }
.delta.up { color: var(--good); } .delta.down { color: var(--bad); } .delta.flat { color: var(--muted); }
.grid { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.grid .card { margin-bottom: 0; }
.g2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@container (max-width: 1000px) { .g2 { grid-template-columns: minmax(0, 1fr); } .minis { grid-template-columns: minmax(0, 1fr); } }
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.mh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 22px; margin-bottom: 2px; }
.mh h4 { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-meta); color: var(--ink2); align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.legend i.faint { opacity: .35; }
.legend b.up { color: var(--good); } .legend b.down { color: var(--bad); }
.board { margin-top: 6px; }
.ctl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ctl .tabs { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; font-weight: 600; color: var(--ink2); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; font-size: var(--fs-meta); }
td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; }
details.tv { margin-top: 6px; }
details.tv summary { cursor: pointer; color: var(--muted); font-size: 12px; width: max-content; }
details.tv table { margin-top: 6px; }
.scroll { overflow-x: auto; }
.more { color: var(--muted); font-size: 12px; margin-top: 4px; }
.empty { color: var(--muted); font-size: 13px; padding: 18px 0; text-align: center; }
.ok { color: var(--good); font-weight: 650; } .fail { color: var(--bad); font-weight: 650; }
ul.notes { margin: 0; padding-left: 18px; }
svg text { font-family: var(--font); }
.ax text { fill: var(--muted); font-size: 11px; }
.gl line { stroke: var(--grid); stroke-width: 1; }
.base { stroke: var(--axis); stroke-width: 1; }
.hit { fill: transparent; }
.hit:focus { outline: none; } .hit:focus-visible { fill: var(--ink); fill-opacity: .06; }
g[tabindex]:focus { outline: none; } g[tabindex]:focus-visible rect:first-child { stroke: var(--ink); stroke-width: 2; }
text.c-na { fill: var(--muted); font-size: 10px; }
text.c-end { fill: var(--ink); font-size: 11px; font-weight: 650; }
text.c-lab { fill: var(--ink2); font-size: 12px; }
text.c-val { fill: var(--ink); font-size: 12px; font-weight: 650; }
text.c-ref { fill: var(--muted); font-size: 10.5px; }
.ax text.c-row { fill: var(--ink2); font-size: 11.5px; }
text.c-blk { font-size: 11px; font-weight: 600; }
#tip { position: fixed; pointer-events: none; z-index: 10; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; font-size: 12px; min-width: 140px; max-width: 300px; }
#tip .t { color: var(--ink2); margin-bottom: 4px; }
#tip .row { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin: 2px 0; }
#tip .row .lab { display: flex; align-items: center; gap: 6px; color: var(--ink2); }
#tip .row .key { display: inline-block; width: 12px; height: 2px; border-radius: 1px; }
#tip .row b { font-variant-numeric: tabular-nums; }
/* #tip as a popover (an ⓘ, the data pill, the user menu): it takes pointer and keyboard focus */
#tip.pop { pointer-events: auto; background: var(--raised); border-color: var(--axis); border-radius: 10px; padding: 11px 13px;
  width: max-content; max-width: min(320px, calc(100vw - 16px)); color: var(--ink2); }
#tip.pop h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--ink); }
#tip.pop .kv { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; }
#tip.pop .kv b { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
#tip.pop p { margin: 6px 0 0; line-height: 1.4; }
#tip.pop .btn { padding: 4px 10px; font-size: 12px; }

/* ---------------------------------------------------------------- Money (views/analytics.js) */
.tabs { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.tabs button { border: 0; background: transparent; color: var(--ink2); font-weight: 600; font-size: 13px; padding: 5px 13px; border-radius: 7px; cursor: pointer; }
.tabs button.on { background: var(--ink); color: var(--surface); }
.tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tabs.sm button { padding: 3px 9px; font-size: 12px; }
.chips.basis { margin-bottom: 10px; }

/* ---------------------------------------------------------------- Previews (views/preview.js, views/previews/) */
.pv-card { max-width: 980px; }
.pv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pv-head h2, .pv-head h3 { margin: 0; }
.pv-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 1px 8px; }
.pv-badge.cut { color: var(--muted); border-color: var(--line); }
.pv-what { margin: 4px 0 10px; color: var(--ink2); max-width: 70ch; }
.pv-cut .sub { max-width: 70ch; }
.pv-coaches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.pv-coach { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; display: grid; gap: 3px; }
.pv-coach-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.pv-rate { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.pv-link { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2); margin-top: 2px; }
.pv-flow { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 10px 0; counter-reset: pv; }
.pv-flow li { counter-increment: pv; font-size: 12.5px; background: var(--page); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.pv-flow li::before { content: counter(pv) ". "; color: var(--muted); font-weight: 650; }
.pv-flow code { font-size: 12px; }
.pv-status { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); max-width: 520px; }
.pv-split { display: flex; height: 26px; border-radius: 6px; overflow: hidden; margin: 10px 0 8px; font-size: 12px; font-weight: 650; max-width: 520px; }
.pv-split span { display: flex; align-items: center; padding: 0 8px; color: #fff; white-space: nowrap; }
.pv-split .s1 { background: var(--s1); } .pv-split .s6 { background: var(--s6); }
.pv-kpis { margin: 10px 0; }
@container (min-width: 621px) { .pv-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* phone: the header is one row (logo, short date, the data pill's date, the user menu) */
@media (max-width: 620px) {
  .app { padding: 10px 10px 40px; }
  .top { flex-wrap: nowrap; gap: 8px; margin-bottom: 12px; }
  .brand .bname, .brand .logo + .bname + .logo { display: none; }
  .today { font-size: 15px; }
  .today .d-long { display: none; }
  .today .d-short { display: inline; }
  .pill { padding: 3px 5px 3px 9px; }
  .pill .pl-long { display: none; }
  .pill .pl-short { display: inline; }
  .who { margin-left: auto; }
  .menu-btn { max-width: 96px; }
  .phead .tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phead .tabs button { text-align: center; }
  .phead h1 { font-size: 19px; }
  .phead .btn.ghost { display: none; }   /* Money is in the navigation */
}

/* Booking desk (web/views/booking.js). Phone first: one column; queue beside the request from 900px. */
.bk-banner { border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-weight: 650; }
.bk-banner.red { background: var(--bad); color: #fff; }
.bk-banner.amber { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--ink); border: 1px solid var(--warn); }
.bk-head { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.bk-title { font-size: 18px; margin: 0; letter-spacing: -.3px; }
.bk-coaches, .bk-channels, .bk-parsed, .bk-actions, .bk-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bk-row { margin-bottom: 6px; }
.bk-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 9px; color: var(--ink2); background: var(--surface); white-space: nowrap; }
.bk-chip.ok { border-color: var(--good); color: var(--good); }
.bk-chip.warn, .bk-chip.held { border-color: var(--warn); color: var(--warn); }
.bk-chip.new, .bk-chip.options { border-color: var(--s1); color: var(--s1); }
.bk-chip.confirmed { background: var(--good); color: #fff; border-color: var(--good); }
.bk-chip.muted { color: var(--muted); }
.bk-chip.cancelled { border-color: var(--bad); color: var(--bad); }
.bk-confirm { border: 1px solid var(--bad); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.bk-note { color: var(--warn); font-weight: 600; margin: 6px 0; }
.btn.bk-danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn-chip { cursor: pointer; min-height: 32px; }
.btn-chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.bk-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 900px) { .bk-grid { grid-template-columns: minmax(280px, 360px) 1fr; } }
.bk-paste textarea, .bk-reply textarea { width: 100%; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 16px; resize: vertical; }
.bk-paste { display: grid; gap: 8px; }
.bk-label { font-size: 12.5px; color: var(--ink2); font-weight: 600; }
.bk-queue { display: grid; gap: 6px; }
.bk-item { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; text-align: left; width: 100%; background: var(--surface);
  color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; min-height: 44px; }
.bk-item.on { border-color: var(--ink); }
.bk-age { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink2); }
.bk-age.late { color: var(--bad); font-weight: 650; }
.bk-text { margin: 6px 0 8px; padding: 6px 10px; border-left: 3px solid var(--line); color: var(--ink2); white-space: pre-wrap; }
.bk-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 6px 0; }
.bk-opt { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.bk-opt.picked { border-color: var(--warn); }
.bk-when { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bk-what { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-weight: 600; }
.bk-price { font-variant-numeric: tabular-nums; }
.bk-labels { margin: 0; padding-left: 16px; color: var(--muted); font-size: 12px; }
.bk-reply { display: grid; gap: 6px; margin: 8px 0; }
.bk-edit { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 8px; }
.bk-edit label { display: grid; gap: 3px; font-size: 12px; color: var(--ink2); }
.bk-edit input, .bk-edit select { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 16px; }
.bk-kv { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--grid); }
.bk-booked h3 { font-size: 13px; margin: 8px 0 4px; color: var(--ink2); }
.bk-actions { margin: 8px 0; }
.bk-actions .btn { min-height: 40px; }

/* the courts a cancelled session still holds in alobo (Connor, 17 Sep 2026): the next step after a cancel, and
   Today's list of what is still to free. Not a card of its own on Today: rows inside one. */
.ops-free { border-left: 3px solid var(--warn); padding: 2px 0 2px 10px; margin: 8px 0; }
.ops-free.inline { border-left: 0; padding-left: 0; margin: 0; }
.ops-free p { margin: 4px 0; }
.ops-free > p:first-child { font-weight: 650; }
.dk-free .sub { color: var(--ink2); margin: 0 0 6px; }
.dk-free .ops-free + .ops-free { border-top: 1px solid var(--line); padding-top: 8px; }

/* ADVISOR D24: the sign-in card spans the shell grid and sits centred (the 2-column grid from 1024px put it top-left) */
.app > .auth { grid-column: 1 / -1; justify-self: center; width: 100%; }

/* Operations: Desk, Court board, Calendar, Programming (O4, O6, O7). Phone first: 44px taps, one column < 900px. */
.ops-title { margin: 0; font-size: var(--fs-title); letter-spacing: -.3px; }
.ops-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ops-nav .btn { min-height: 40px; }
.ops-date { font-variant-numeric: tabular-nums; }
.ops-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ops-desk { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .ops-desk { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.ops-col { min-width: 0; }
.ops-session { padding-left: 12px; }
.ops-shead { display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; }
.ops-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.ops-bar { display: flex; height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; margin: 8px 0 4px; }
.ops-bar i { display: block; height: 100%; }
.ops-roster { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.ops-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px;
  padding: 4px 0; border-bottom: 1px solid var(--grid); }
.ops-row.in .ops-who b { color: var(--good); }
.ops-row.ns .ops-who b { color: var(--bad); text-decoration: line-through; }
.ops-who { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; }
.ops-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.ops-tap { min-width: 44px; min-height: 44px; }
.ops-tap.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ops-badge { font-size: 11px; padding: 1px 7px; }
.chip.good, .ops-badge.good { color: var(--good); border-color: var(--good); }
.chip.bad, .ops-badge.bad { color: var(--bad); border-color: var(--bad); }
.chip.ok { color: var(--good); }
.chip.muted { color: var(--muted); }
.ops-3up { color: var(--s6); border-color: var(--s6); }
.ops-pay { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; padding: 6px 0; }
.ops-pay input { width: 120px; font-size: 16px; }
.ops-form { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; margin-top: 8px; }
.ops-field { display: grid; gap: 3px; font-size: 12px; color: var(--ink2); }
.ops-field input, .ops-field select { font-size: 16px; min-height: 40px; width: 100%; }
.ops-inline { display: flex; gap: 6px; }
.ops-check { display: flex; gap: 6px; align-items: center; font-size: 13px; min-height: 40px; }
.ops-found { grid-column: 1 / -1; display: grid; gap: 6px; }
.ops-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0; }
.ops-kv b { text-align: right; font-variant-numeric: tabular-nums; }
.ops-chart { min-height: 40px; }
.ops-cell { cursor: crosshair; }
.ops-blk { cursor: pointer; }
.ops-blk:focus { outline: none; } .ops-blk:focus-visible rect { stroke: var(--ink); stroke-width: 2; }
.ops-week { overflow-x: auto; }
.ops-days { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 8px; }
.ops-day h4 { margin: 4px 0; font-size: 13px; color: var(--ink2); }

/* ---------------------------------------------------------------- CRM (views/players, market, members, reports) */
.crm { min-width: 0; }
.crm-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.crm-head h2 { margin: 0; font-size: 18px; letter-spacing: -.3px; }
.crm-back { display: inline-block; font-size: 13px; margin-bottom: 6px; }
.crm-sec { margin: 14px 0 2px; font-size: 15px; }
.crm-caveat { color: var(--ink2); font-size: 12.5px; margin: 0 0 8px; max-width: 80ch; }
.crm-kpis .kpi .v { font-size: 22px; }
.crm-rhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.crm-rhead h2 { margin: 0 6px 0 0; font-size: 20px; letter-spacing: -.3px; }
.crm-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650; color: var(--ink2);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px 1px 3px; vertical-align: middle; white-space: nowrap; }
.crm-badge img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.crm-badge.none { color: var(--muted); padding: 1px 7px; }
.crm-badge.lapsed { opacity: .6; border-style: dashed; }
.crm-badge .lapsed-dot { font-size: 10px; color: var(--muted); font-weight: 500; }
.crm-status { display: inline-block; font-size: 11.5px; font-weight: 650; border-radius: 6px; padding: 1px 7px; white-space: nowrap;
  background: var(--page); color: var(--ink2); border: 1px solid var(--line); }
.crm-status.good { color: var(--good); border-color: var(--good); }
.crm-status.warn { color: var(--warn); border-color: var(--warn); }
.crm-status.bad { color: var(--bad); border-color: var(--bad); }
.crm-status.muted { color: var(--muted); }
.crm-word { display: inline-block; font-size: 11px; color: var(--ink2); background: var(--page); border-radius: 5px; padding: 0 6px; margin-right: 3px; white-space: nowrap; }
.crm-word.warn { color: var(--warn); } .crm-word.bad { color: var(--bad); }
.crm-tag { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--brand); border: 1px solid var(--brand);
  border-radius: 5px; padding: 0 6px; margin-right: 3px; white-space: nowrap; }
.crm-x { border: 0; background: transparent; color: var(--brand); cursor: pointer; font-size: 13px; padding: 0 2px; line-height: 1; }
.crm-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.crm-fbtn { border: 1px solid var(--line); background: var(--surface); color: var(--ink2); border-radius: 999px; padding: 3px 10px;
  font-size: 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.crm-fbtn.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.crm-fbtn .n { font-variant-numeric: tabular-nums; opacity: .75; }
.crm-list table td { vertical-align: top; }
.crm-table .small { font-size: 11.5px; }
.crm-split { min-width: 110px; }
.crm-split .bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--grid); }
.crm-split .bar i { display: block; height: 100%; }
.crm-split .bar i.away { background: #9aa3b2; }
.crm-split .lbl { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.crm-names { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.crm-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.crm-tl li { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--line); }
.crm-tl li:last-child { border-bottom: 0; }
.crm-tl li.v b::before { content: "✓ "; color: var(--good); }
.crm-tl li.x { color: var(--muted); }
@container (max-width: 620px) { .crm-tl li { grid-template-columns: 1fr; gap: 1px; } }
.crm-form { display: grid; gap: 8px; max-width: 460px; }
.crm-form label { display: grid; gap: 3px; font-size: 12.5px; color: var(--ink2); font-weight: 600; }
.crm-form textarea { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font: inherit; }
.crm-cb { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.crm-reviews { display: grid; gap: 10px; }
.crm-seg { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 13px; }
.crm-seg li { line-height: 1.35; }
.crm-seg .score { color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.crm-sm { padding: 2px 8px; font-size: 11.5px; margin-left: 6px; }
.crm-risk td { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.crm-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
@container (max-width: 1000px) { .crm-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 620px) { .crm-lists { grid-template-columns: minmax(0, 1fr); } }
.crm-listcard { margin-bottom: 0; display: grid; gap: 4px; align-content: start; }
.crm-listcard .v { font-size: 26px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; }
.crm-listcard .btn { justify-self: start; margin-top: 4px; }
/* Settings (Operations O9): the tab row wraps on a phone instead of widening the page */
.set-tabs { flex-wrap: wrap; max-width: 100%; }
.set-sec { margin: var(--section) 0 var(--sp2); font-size: var(--fs-card); font-weight: 650; }

/* Courts & revenue (web/views/courts.js; the owner's block is at the end): hatch keys, the track (Market's rows too), links out */
.chip i.hatch, .legend i.hatch, .notice i.hatch { background: repeating-linear-gradient(135deg, var(--axis) 0 2px, transparent 2px 4px); border-radius: 2px; }
.track { height: 12px; border-radius: 6px; background: var(--grid); position: relative; overflow: hidden; }
.track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--s2); }
.track:focus { outline: none; } .track:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@container (max-width: 820px) { .links { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.links a { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink2); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; font-size: 12.5px; min-width: 0; }
.links a b { color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.links a .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.links a .go { margin-left: auto; color: var(--muted); white-space: nowrap; }
.links a:hover { border-color: var(--axis); }
.links a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Socials (web/views/socials.js; charts.js socials pieces): 3 tiles, listed against what really ran with the real-fill
   strip, the slot scorecard and last week session by session (each card is its own container, so both stack on a
   phone), the More chips that open the old cards in place, one footnote line */
.so-chart { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.so-chart svg { display: block; }
text.so-fill { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
text.so-fill.sm { font-size: 10.5px; }
.so-card { container-type: inline-size; }
.runs { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; vertical-align: middle; }
.runs svg, .legend svg.rg { display: block; flex: 0 0 auto; }
.runs:focus { outline: none; } .runs:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.fbar { display: block; position: relative; height: 8px; border-radius: 4px; background: var(--grid); overflow: hidden; }
.fbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.fbar u { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink2); }
.sugg { display: inline-block; font-size: var(--fs-meta); font-weight: 650; line-height: 1.5; border: 1px solid var(--line); border-radius: 6px;
  padding: 0 8px; color: var(--ink2); white-space: nowrap; }
.sugg.warn { color: var(--warn); border-color: var(--warn); }
.seatbar { display: flex; gap: 1px; height: 14px; min-width: 0; }
.seatbar i { display: block; height: 100%; flex: 0 0 auto; }
.seatbar i.pl { background: var(--s1); border-radius: 3px 0 0 3px; }
.seatbar i.st { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--muted); }
.seatbar i.em { box-shadow: inset 0 0 0 1px var(--axis); }
.seatbar i.cut { border: 1px dashed var(--axis); }
.seatbar:focus { outline: none; } .seatbar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* the slot scorecard: slot · runs · real fill · seats usual → now · suggestion */
.so-slots { display: grid; gap: 10px; font-size: 12.5px; }
.so-sr { display: grid; grid-template-columns: 76px minmax(0, 1.3fr) minmax(56px, 1fr) 76px 116px; gap: 4px 12px; align-items: center; }
.so-sr.h { color: var(--muted); font-size: var(--fs-meta); }
.so-sr b { font-weight: 650; white-space: nowrap; }
.so-sr .fv { font-size: 12px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.so-sr .c-seats { white-space: nowrap; }
.so-note { color: var(--muted); font-size: 12px; margin-top: var(--sp3); }
@container (max-width: 470px) {
  .so-sr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "slot slot chip" "runs runs runs" "fill seats seats"; }
  .so-sr.h { display: none; }
  .so-sr .c-slot { grid-area: slot; } .so-sr .c-runs { grid-area: runs; } .so-sr .c-fill { grid-area: fill; }
  .so-sr .c-seats { grid-area: seats; align-self: start; } .so-sr .c-chip { grid-area: chip; }
  .so-slots { gap: 14px; }
}
/* last week: when · seats bar · "N of M (usual U)"; a cancelled session spans the bar and text */
.so-ss { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 7px 10px; align-items: center; font-size: 12.5px; }
.so-ss .lab { white-space: nowrap; }
.so-ss .cx { grid-column: 2 / -1; color: var(--muted); font-size: 12px; }
.so-ss .cx:focus { outline: none; } .so-ss .cx:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.so-ss .tx { font-variant-numeric: tabular-nums; white-space: nowrap; }
.so-ss .tx small { color: var(--muted); font-size: 12px; }
.so-ghost { color: var(--bad); font-weight: 650; }
@container (max-width: 380px) { .so-ss { grid-template-columns: 66px minmax(0, 1fr) auto; gap: 7px 8px; } }
.so-sub .s-short { display: none; }
@container (max-width: 620px) { .so-sub .s-long { display: none; } .so-sub .s-short { display: inline; } }
/* More: one chip per old card; the open one is inverted and its card sits under the row */
.so-more { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: var(--gap); font-size: 12.5px; }
.so-more .lbl { color: var(--muted); font-size: 12.5px; }
.so-more a.go { text-decoration: none; }
.so-more button, .so-more a.go { border: 1px solid var(--line); background: var(--surface); color: var(--ink2); border-radius: 999px; padding: 3px 11px;
  font-size: 12.5px; cursor: pointer; min-height: 30px; }
.so-more button:hover, .so-more a.go:hover { border-color: var(--axis); color: var(--ink); }
.so-more button[aria-expanded="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.so-more button:focus-visible, .so-more a.go:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.so-panel { margin-top: var(--gap); }
.so-panel:empty { display: none; }

/* ---------------------------------------------------------------- Players (views/players.js, DECLUTTER §4, 15 Sep 2026)
   the header, the group strip, the list (rows collapse to name, pips, dots and last seen on a phone) and the drawer */
.players { min-width: 0; }
.players .phead .pl-search { flex: 0 1 300px; min-width: 200px; display: flex; }
.players .phead .pl-search input { width: 100%; min-height: 32px; }
/* the review queue stays on a phone (the page template hides a header's ghost link there: Money is in the nav) */
.players .phead a.pl-rev { display: inline-block; }
.pl-sel { background: var(--surface); color: var(--ink2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
  font-weight: 600; font-size: 13px; min-height: 32px; cursor: pointer; max-width: 100%; }
.pl-sel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pl-groups { display: grid; gap: 8px; margin-bottom: var(--gap);
  grid-template-columns: minmax(0, 1.1fr) 16px repeat(3, minmax(0, 1fr)) 16px repeat(3, minmax(0, 1fr)); }
.pl-div { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; letter-spacing: .6px; color: var(--muted);
  text-transform: uppercase; text-align: center; align-self: center; }
.pl-tile { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.pl-tile.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pl-tile .info-w { position: absolute; top: 9px; right: 9px; }
.pl-tb { display: grid; gap: 3px; align-content: start; width: 100%; height: 100%; text-align: left; background: transparent; border: 0;
  color: var(--ink); padding: 10px 12px; cursor: pointer; border-radius: 10px; font: inherit; }
.pl-tb:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pl-tb .n { font-size: 22px; font-weight: 700; letter-spacing: -.4px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pl-tb .nm { font-size: 12.5px; font-weight: 650; }
.pl-tb .of { font-size: var(--fs-meta); color: var(--muted); }
.pl-tb .mb { height: 4px; border-radius: 2px; background: var(--grid); margin-top: 4px; overflow: hidden; display: flex; }
.pl-tb .mb i { display: block; height: 100%; background: var(--ink2); }
.pl-tb .mb i.hatch { background: repeating-linear-gradient(135deg, var(--ink2) 0 2px, transparent 2px 4px); }
.pl-card .chead .period { font-size: 13px; color: var(--ink2); }
.pl-card .chead .right { font-size: 12px; }
.pill.pl-phones { cursor: default; padding-right: 11px; }
.pl-list { display: grid; }
.pl-row { display: grid; align-items: center; gap: 0 14px; padding: 9px 10px; border-top: 1px solid var(--line); cursor: pointer;
  grid-template-columns: minmax(150px, 1.4fr) 124px 80px 170px 124px minmax(130px, 1.1fr) 108px 12px; }
.pl-list.nomoney .pl-row { grid-template-columns: minmax(150px, 1.4fr) 124px 80px 170px 124px 108px 12px; }
.pl-row.pl-h { border-top: 0; cursor: default; padding-top: 0; padding-bottom: 8px; font-size: var(--fs-meta); color: var(--muted);
  font-weight: 600; white-space: nowrap; }
.pl-row:not(.pl-h):hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.pl-row.sel, .pl-row.sel:hover { background: color-mix(in srgb, var(--s1) 14%, transparent); }
.pl-row > span { min-width: 0; }
.pl-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pl-av { width: 28px; height: 28px; border-radius: 50%; background: var(--grid); color: var(--ink2); display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; flex: 0 0 auto; }
.pl-name { border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 650; font-size: 14px; padding: 2px 0;
  cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pl-name:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.pl-club { font-size: 10.5px; color: var(--muted); font-weight: 500; border: 1px solid var(--line); border-radius: 999px; padding: 0 6px;
  white-space: nowrap; flex: 0 0 auto; }
.pl-club.lapsed { border-style: dashed; }
.pl-chip { display: inline-block; font-size: 11.5px; font-weight: 650; border-radius: 6px; padding: 1px 8px; border: 1px solid var(--line);
  color: var(--ink2); background: var(--page); white-space: nowrap; }
.pl-chip.regular { color: var(--s1); border-color: color-mix(in srgb, var(--s1) 60%, var(--surface)); }
.pl-chip.new { color: var(--good); border-color: color-mix(in srgb, var(--good) 60%, var(--surface)); }
.pl-chip.winback { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 60%, var(--surface)); }
.pl-chip.held { color: var(--muted); border-style: dashed; }
.pl-chev { color: var(--muted); text-align: right; }
.pl-more { display: flex; align-items: center; gap: 10px; margin-top: var(--sp3); font-size: 12.5px; color: var(--muted); }
.pl-mf { display: grid; gap: 10px; }
.pl-mf .chips { margin: 0; }
.pl-mf select { width: 100%; }
@container (max-width: 1180px) {
  .pl-row { grid-template-columns: minmax(140px, 1.4fr) 116px 76px 170px 110px minmax(110px, 1fr) 100px 12px; gap: 0 10px; }
  .pl-list.nomoney .pl-row { grid-template-columns: minmax(140px, 1.4fr) 116px 76px 170px 110px 100px 12px; }
  .pl-row .pc-val .t { width: 70px; }
  .pl-row .pc-rec .t { width: 60px; }
}
@container (max-width: 980px) {
  .pl-groups { display: flex; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .pl-tile { flex: 0 0 142px; }
  .pl-div { flex: 0 0 14px; }
}
@container (max-width: 820px) {
  .pl-row.pl-h { display: none; }
  .pl-row, .pl-list.nomoney .pl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who last" "lvl dots";
    gap: 6px 10px; padding: 10px 2px; }
  .pl-row > .c-who { grid-area: who; } .pl-row > .c-last { grid-area: last; justify-self: end; }
  .pl-row > .c-lvl { grid-area: lvl; padding-left: 38px; } .pl-row > .c-dots { grid-area: dots; justify-self: end; }
  .pl-row > .c-grp, .pl-row > .c-val, .pl-row > .c-shr, .pl-row > .c-chev { display: none; }
  .pl-row .pl-club { display: none; }
  .pl-row .pc-rec .t { width: 40px; }
  .pl-row .pc-dots { width: 144px; height: auto; }
  /* phone header: title ⓘ … review queue on one row, then sort and search */
  .players .phead h1 { order: 0; } .players .phead .info-w { order: 1; } .players .phead .spacer { order: 2; }
  .players .phead .pl-rev { order: 3; } .players .phead > .pl-sel { order: 8; flex: 0 0 auto; }
  .players .phead .pl-search { flex: 1 1 150px; min-width: 0; order: 9; }
}

/* Players pieces (charts.js "players pieces") */
.pc-na { color: var(--muted); }
.pc-lv { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-pips { display: inline-flex; gap: 3px; }
.pc-pips i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--s1); display: inline-block; }
.pc-pips i.f { background: var(--s1); }
.pc-lv.self .pc-pips i { border-color: var(--ink2); }
.pc-lv.self .pc-pips i.f { background: transparent; box-shadow: inset 0 0 0 2px var(--ink2); }
.pc-lv small { color: var(--muted); font-size: 11px; }
.pc-lvl { color: var(--ink2); }
.pc-dots { display: block; }
.pc-dots circle.on { fill: var(--s1); }
.pc-dots circle.off { fill: none; stroke: var(--axis); stroke-width: 1.2; }
.pc-rec, .pc-val, .pc-shr { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc-rec .t { width: 90px; height: 6px; border-radius: 3px; background: var(--grid); position: relative; flex: 0 0 auto; }
.pc-rec .t i { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--ink2); }
.pc-rec .t i.warn { background: var(--warn); }
.pc-rec .t i.old { background: var(--axis); }
.pc-val .t { width: 110px; height: 8px; border-radius: 4px; background: var(--grid); position: relative; overflow: hidden; flex: 0 0 auto; }
.pc-val .t i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--s1); }
.pc-shr .t { width: 64px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 65%, var(--surface)); overflow: hidden;
  flex: 0 0 auto; display: flex; }
.pc-shr .t i { display: block; height: 100%; background: var(--s1); }

/* the drawer: right side over a dimmed list, full screen on a phone */
.pl-dim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 8; }
.pl-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); background: var(--surface); color: var(--ink);
  border-left: 1px solid var(--axis); z-index: 9; padding: 20px 22px 40px; box-shadow: -20px 0 40px rgba(0, 0, 0, .3); overflow-y: auto;
  overscroll-behavior: contain; font-size: var(--fs-body); }
.pl-drawer:focus { outline: none; }
.pl-dh { display: flex; align-items: flex-start; gap: 12px; }
.pl-dh .pl-av { width: 44px; height: 44px; font-size: 16px; }
.pl-dh h2 { margin: 0; font-size: var(--fs-title); font-weight: 650; letter-spacing: -.3px; overflow-wrap: anywhere; }
.pl-dchips { margin-top: 5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pl-dchips .crm-word { margin: 0; font-size: 11.5px; font-weight: 650; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--line); }
.pl-dacts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.pl-x { min-width: 36px; min-height: 36px; font-size: 16px; line-height: 1; }
.pl-offer { margin: 16px 0 6px; border: 1px solid color-mix(in srgb, var(--s1) 55%, var(--surface)); border-radius: 10px; padding: 11px 14px;
  background: color-mix(in srgb, var(--s1) 10%, var(--surface)); display: grid; gap: 3px; }
.pl-offer b { font-size: var(--fs-card); font-weight: 650; }
.pl-offer .why { font-size: 12px; color: var(--ink2); }
.pl-offer.none { border-color: var(--line); background: var(--page); }
.pl-offer.none b { font-size: 13px; color: var(--ink2); }
.pl-sec { margin-top: 18px; }
.pl-sec h4 { margin: 0 0 8px; font-size: 13px; font-weight: 650; display: flex; gap: 4px 8px; align-items: baseline; flex-wrap: wrap; }
.pl-sec h4 .m { margin-left: auto; font-weight: 500; color: var(--muted); font-size: var(--fs-meta); text-align: right; }
.pl-sec .empty { padding: 6px 0; text-align: left; font-size: 12.5px; }
.pl-facts { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--ink2); align-items: center; }
.pl-facts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pl-bars { display: grid; grid-template-columns: 104px minmax(0, 1fr) 128px; gap: 9px 10px; align-items: center; }
.pl-bars .l { font-size: 12.5px; color: var(--ink2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bars .t { height: 16px; position: relative; }
.pl-bars .t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--s1); }
.pl-bars .t i.else { background: repeating-linear-gradient(135deg, var(--muted) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1.5px var(--muted); }
.pl-bars .v { font-size: 12.5px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.pl-bars .v small, .pl-bars .v.note { color: var(--muted); font-weight: 500; }
.pl-cols { display: flex; align-items: stretch; gap: 2px; height: 76px; border-bottom: 1px solid var(--axis); }
.pl-cols.dense { gap: 1px; }
.pl-cols .c { flex: 1 1 0; min-width: 1px; display: flex; flex-direction: column-reverse; }
.pl-cols .c i { display: block; background: var(--s1); }
.pl-cols .c i:last-child { border-radius: 2px 2px 0 0; }
.pl-cols .c i.u3, .pl-leg i.k3up { background: color-mix(in srgb, var(--s1) 40%, var(--surface)); }
.pl-leg i.k002 { background: var(--s1); }
.pl-cols .c.z::before { content: ""; display: block; height: 2px; background: var(--grid); }
.pl-cols .c:hover i { filter: brightness(1.15); }
.pl-xl { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.pl-leg { margin-top: 6px; }
.pl-ph { border: 1.5px dashed var(--axis); border-radius: 8px; color: var(--muted); font-size: 12px; padding: 8px 10px; margin-top: 8px; }
.pl-lv { display: flex; gap: 10px 22px; align-items: center; flex-wrap: wrap; }
.pl-tn { display: flex; gap: 8px; }
.pl-tn form { display: flex; min-width: 0; }
.pl-tn .tag { flex: 1 1 0; } .pl-tn .note { flex: 2 1 0; }
.pl-tn input { width: 100%; min-height: 34px; }
.pl-tags { margin-bottom: 8px; }
.pl-notes { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink2); display: grid; gap: 3px; }
.pl-notes b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-drawer .err:empty { display: none; }
details.pl-d { border-top: 1px solid var(--line); padding: 9px 0; font-size: 12.5px; color: var(--ink2); }
details.pl-d:first-of-type { margin-top: 18px; }
details.pl-d > summary { list-style: none; cursor: pointer; min-height: 24px; }
details.pl-d > summary::-webkit-details-marker { display: none; }
details.pl-d > summary::before { content: "▸ "; color: var(--muted); }
details.pl-d[open] > summary::before { content: "▾ "; }
details.pl-d > .pl-dbody { margin-top: 10px; }
details.pl-d table { font-size: 12px; }
/* the drawer's "Counts as a player" (owner only): one row per club, the choice then its Save, who set it under them */
.pl-play { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; margin-top: 10px; }
.pl-play label { display: grid; gap: 3px; font-size: 12.5px; color: var(--ink2); font-weight: 600; }
.pl-play .sub { flex-basis: 100%; margin: 0; }
@media (max-width: 620px) {
  .pl-drawer { width: 100vw; border-left: 0; padding: 14px 14px 32px; }
  .pl-dh .pl-av { display: none; }
  .pl-bars { grid-template-columns: 96px minmax(0, 1fr) 104px; }
  .pl-sec h4 .m { margin-left: 0; flex-basis: 100%; text-align: left; }
  .pl-tn { flex-direction: column; }
}

/* ---------------------------------------------------------------- Money + Market (declutter F, 15 Sep 2026) */
@media (max-width: 620px) { .phead .tabs.m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mn-aside { margin: calc(-1 * var(--sp1)) 0 var(--gap); }
.card.hl { box-shadow: 0 0 0 2px var(--brand); scroll-margin-top: 12px; }
.mk-rows { display: grid; gap: 12px; }
.mk-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 96px; grid-template-areas: "rk nm val sp" "rk bar bar sp";
  column-gap: 10px; row-gap: 5px; align-items: center; border-radius: 8px; }
.mk-row:focus { outline: none; } .mk-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.mk-row .rk { grid-area: rk; align-self: start; color: var(--muted); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; text-align: right; line-height: 18px; }
.mk-row .nm { grid-area: nm; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.mk-row .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 7px; vertical-align: 1px; }
.mk-row.ours .dot { background: var(--s1); }
.mk-row .val { grid-area: val; font-size: 12px; color: var(--ink2); white-space: nowrap; }
.mk-row .val b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-row .track { grid-area: bar; height: 8px; border-radius: 4px; }
.mk-row .track i { background: var(--muted); border-radius: 4px; }
.mk-row.ours .track i { background: var(--s1); }
.mk-row .sp { grid-area: sp; justify-self: end; line-height: 0; }
@container (max-width: 620px) {
  .mk-row { grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "rk nm val" "rk bar bar"; }
  .mk-row .sp { display: none; }
}
.mk-segs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mk-seg { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "n csv" "l l"; align-items: center; gap: 2px 8px; min-width: 0; }
.mk-seg b { grid-area: n; font-size: 22px; font-weight: 700; letter-spacing: -.4px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mk-seg .lbl { grid-area: l; color: var(--ink2); font-size: 12px; line-height: 1.3; }
.mk-seg .btn { grid-area: csv; padding: 3px 10px; font-size: 12px; text-decoration: none; }
.more-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: var(--section); }
.more-row button.chip { font: inherit; font-size: 12px; cursor: pointer; min-height: 32px; padding: 4px 12px; }
.more-row button.chip.on { border-color: var(--ink); color: var(--ink); }
.more-row button.chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.mk-panel { margin-top: var(--gap); }
.mk-panel .card { margin-bottom: 0; }
/* ---------------------------------------------------------------- Market recruit cards (declutter G, 15 Sep 2026) */
.mk-row.mk-rc { grid-template-columns: 22px minmax(0, 1fr) auto 120px; }
.mk-rc .nm { display: flex; align-items: center; }
.mk-rc .nm .dot { flex: none; }
.mk-rc .nm .cl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mk-rc .nm .sl { flex: none; color: var(--ink2); white-space: pre; }
.mk-rc .sp { line-height: normal; }
.mk-rc.pin { border-top: 1px dashed var(--line); border-radius: 0; padding-top: 10px; }
@container (max-width: 620px) {
  .mk-row.mk-rc { grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "rk nm" "rk val" "rk bar"; }
}

/* ---------------------------------------------------------------- Courts & revenue for the owner (views/courts.js; charts.js
   "owner pieces"; docs/OWNER_VIEW.md, 15 Sep 2026): body 15, labels 13+, tile numbers 34, the opening sentence 20/600,
   buttons and day pills 40px+. The four traffic-light bands are tokens, read apart by lightness as well as hue (light:
   darker with use; dark: lighter with use) and always shown beside their word. validate_palette.js --pairs all on the
   real surfaces (#ffffff, #1a1a19): the three coloured bands pass every check (CVD 10.8 light / 8.9 dark, normal 19.1 /
   15.2); the grey is the neutral "idle" step, so its lightness-band and chroma rows fail by design, while it clears the
   CVD and normal-vision floors against all three. Contrast under 3:1 (quiet and empty, both themes) is relieved by
   the word beside every colour and the table under More. */
:root { --band-full: #006129; --band-busy: #5a9700; --band-quiet: #e0ab10; --band-empty: #dcdbd5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --band-full: #16b401; --band-busy: #73820d; --band-quiet: #934404; --band-empty: #3a3a37; }
}
:root[data-theme="dark"] { --band-full: #16b401; --band-busy: #73820d; --band-quiet: #934404; --band-empty: #3a3a37; }
.b-full { --c: var(--band-full); } .b-busy { --c: var(--band-busy); } .b-quiet { --c: var(--band-quiet); }
.b-empty { --c: var(--band-empty); } .b-none { --c: var(--axis); }
i.bd { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: var(--c); flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
i.bd.plan { background: repeating-linear-gradient(135deg, var(--c) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1.5px var(--c); }
.ob { font-size: 15px; }
.ob .phead h1 { font-size: 22px; font-weight: 700; }
.ob .card h3 { font-size: 17px; }
.ob .card { padding: var(--sp5); }
.ob-nav { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ob-arr { min-width: 40px; min-height: 40px; padding: 0 10px; font-size: 13px; color: var(--ink2); }
.ob-arr:disabled { opacity: .35; }
.ob-sel { font-size: 16px; font-weight: 650; min-height: 40px; padding: 6px 12px; border-radius: 10px; min-width: 0; max-width: 100%; }
.ob .phead .tabs button { min-height: 40px; font-size: 13.5px; padding: 6px 13px; }
.ob .phead .btn.ghost { min-height: 40px; display: inline-flex; align-items: center; font-size: 14px; }
.ob-answer { font-size: 20px; font-weight: 600; line-height: 1.4; margin: var(--sp1) 0 var(--sp3); max-width: 62em; color: var(--ink); text-wrap: pretty; }
.ob .notice { font-size: 14px; margin: -4px 0 var(--sp3); }
.ob .notice i { width: 9px; height: 9px; }
.ob .notice i.hatch { width: 13px; height: 13px; }
/* three plain tiles: the number, what it is, the comparison in words (green up, red down, grey about the same) */
.kpis.ob-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ob-tiles .kpi { padding: 14px 18px 16px; }
.ob-tiles .kpi .k { font-size: 15px; font-weight: 650; color: var(--ink); }
.ob-tiles .kpi .v { font-size: 34px; letter-spacing: -.8px; }
.ob-tiles .kpi .s { white-space: normal; overflow: visible; display: grid; gap: 3px; margin-top: 6px; font-size: 14px; }
.ob-tiles .what { color: var(--ink2); }
.ob .cmp { font-weight: 650; color: var(--ink2); }
.ob .cmp.up, .ob .wc.up { color: var(--good); } .ob .cmp.down, .ob .wc.down { color: var(--bad); }
@container (max-width: 620px) { .kpis.ob-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; } .ob-tiles .kpi .v { font-size: 30px; } }
/* When are your courts busy?: the day pills, the sentence, the hour bars, the legend in words */
.dpills { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--sp4); }
.dpill { min-height: 54px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 6px 4px;
  display: grid; gap: 3px; justify-items: center; align-content: center; cursor: pointer; font: inherit; }
.dpill:hover { border-color: var(--axis); }
.dpill .dn { font-size: 15px; font-weight: 650; white-space: nowrap; }
.dpill .dv { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dpill .dv small { font-size: 13px; }
.dpill.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.dpill.on .dv { color: var(--surface); }
.dpill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ob-say { font-size: 17px; font-weight: 600; line-height: 1.4; margin: 0 0 var(--sp3); max-width: 60em; text-wrap: pretty; }
.ob-chart { margin: 0 -4px; min-height: 240px; }
.ob-chart svg { display: block; }
.ob-bars .ob-y text { fill: var(--ink2); font-size: 13px; font-variant-numeric: tabular-nums; }
.ob-bars .ob-y.in text { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.ob-full { stroke: var(--ink2); stroke-width: 2; stroke-dasharray: 8 5; }
.ob-full-t { fill: var(--ink); font-size: 14px; font-weight: 650; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.ob-hr text { fill: var(--ink2); font-size: 13px; font-variant-numeric: tabular-nums; }
.ob-strip { fill: var(--ink2); } .ob-strip.off { fill: var(--grid); }
.ob-blk { fill: var(--ink); font-size: 14px; font-weight: 650; }
.ob-blk-sub { fill: var(--muted); font-size: 13px; font-weight: 500; }
.legend.bands { font-size: 14px; gap: 6px 20px; margin-top: var(--sp3); color: var(--ink); }
.legend.bands span { gap: 7px; }
@container (max-width: 620px) {
  .dpills { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .dpills .dpill:first-child { grid-column: span 2; }
  .dpill .dn { font-size: 14px; }
  .ob-say { font-size: 16px; }
  .legend.bands { gap: 6px 14px; }
}
/* Better or worse than the week before?: name, today's figure and band, the words; the two bars under them */
.ob-week { container-type: inline-size; }
.wrows { display: grid; gap: 18px; }
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "l v c" "bar bar bar"; gap: 6px 16px; align-items: baseline; }
.wrow .wl { grid-area: l; min-width: 0; } .wrow .wv { grid-area: v; } .wrow .wc { grid-area: c; min-width: 7.5em; text-align: right; }
.wrow .wbar { grid-area: bar; }
.wl b { font-size: 15px; font-weight: 650; } .wl span { font-size: 13px; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.wv { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.wv b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wv .wb { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink2); }
.wc { font-size: 14px; font-weight: 650; color: var(--ink2); white-space: nowrap; }
.two { display: grid; gap: 4px; }
.two .now { display: block; height: 18px; border-radius: 5px; background: var(--grid); overflow: hidden; }
.two .now i { display: block; height: 100%; border-radius: 5px; background: var(--c); }
.two .now i.plan { background: repeating-linear-gradient(135deg, var(--c) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1.5px var(--c); }
.two .was { display: block; height: 6px; }
.two .was i { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.ob-wlg { margin-top: var(--sp4); font-size: 13.5px; }
.ob-wlg i.k-now { width: 22px; height: 11px; border-radius: 3px;
  background: linear-gradient(90deg, var(--band-empty) 0 25%, var(--band-quiet) 25% 50%, var(--band-busy) 50% 75%, var(--band-full) 75%); }
.ob-wlg i.k-was { width: 22px; height: 5px; border-radius: 3px; background: var(--muted); }
@container (max-width: 400px) {
  .wrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "bar bar" "c c"; }
  .wrow .wc { text-align: left; }
}
/* Empty court time you could sell */
.ebig { font-size: 20px; font-weight: 650; line-height: 1.35; margin: 0 0 6px; }
/* one line under the empty prime time: what the cancelled socials cost (Connor, 17 Sep 2026). Meta size, never a card. */
.ecx { font-size: var(--fs-meta); color: var(--ink2); line-height: 1.4; margin: 0 0 10px; }
.emoney { margin: 0 0 var(--sp4); color: var(--ink2); }
.emoney .tag { display: inline-block; font-size: 13px; color: var(--ink2); border: 1px solid var(--line); border-radius: 6px; padding: 0 7px; white-space: nowrap; }
.ob-empty h4 { margin: 0 0 var(--sp2); font-size: 15px; }
.ideas { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.ideas span { color: var(--ink2); }
.ob-small { font-size: 13px; color: var(--muted); margin: var(--sp3) 0 0; }
/* More: the chips, and what they open under them */
.ob-more { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: var(--gap); }
.ob-more .lbl { color: var(--ink2); font-size: 14px; }
.ob-more .chip { font: inherit; font-size: 14px; min-height: 40px; padding: 6px 14px; cursor: pointer; }
.ob-more .chip:hover { border-color: var(--axis); color: var(--ink); }
.ob-more .chip[aria-expanded="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.ob-more .chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ob-panel { margin-top: var(--gap); }
.ob-panel .card { margin-bottom: 0; }
/* every day in a table: each cell the % and the band word, tinted in its band colour (plan hatched) */
table.ob-tl { font-size: 14px; border-collapse: separate; border-spacing: 4px; min-width: 600px; }
.ob-tl th { font-size: 13.5px; color: var(--ink); font-weight: 650; border: 0; padding: 4px 8px; white-space: nowrap; text-align: left; }
.ob-tl th small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); }
.ob-tl td { border: 0; }
.ob-tl td.tl { border-radius: 8px; padding: 7px 10px; white-space: nowrap; background: color-mix(in srgb, var(--c) 28%, var(--surface));
  box-shadow: inset 5px 0 0 var(--c); font-variant-numeric: tabular-nums; }
.ob-tl td.tl b { margin-right: 6px; }
.ob-tl td.tl small { display: block; font-size: 13px; color: var(--ink2); }
.ob-tl td.tl.plan { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 28%, var(--surface)) 0 5px, var(--surface) 5px 10px); }
.ob-tl td.tl.b-none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
/* the busier the cell, the stronger it reads: Busy a deeper tint, Full the solid band colour (Quang, 15 Sep 2026: the
   28% tint made Full cells look paler than Busy ones) */
.ob-tl td.tl.b-busy:not(.plan) { background: color-mix(in srgb, var(--c) 50%, var(--surface)); }
.ob-tl td.tl.b-full:not(.plan) { background: var(--c); color: var(--surface); }
.ob-tl td.tl.b-full:not(.plan) small { color: var(--surface); }
.ob-tl tfoot th, .ob-tl tfoot td.tl { border-top: 0; }
@media (max-width: 620px) {
  .ob-head .ob-nav { order: 5; width: 100%; }
  .ob-head .ob-sel { flex: 1 1 auto; }
  .ob-head .tabs { order: 6; }
  .ob-answer { font-size: 19px; }
  .ob .card { padding: var(--sp4); }
}

/* ---------------------------------------------------------------- Money by week and product (views/analytics.js; charts.js
   "money pieces"; docs/MONEY_WEEKS.md, 15 Sep 2026): Courts & revenue's owner look (.ob: body 15, the answer 20/600,
   tiles 34, 40px+ buttons). The grouped bars scroll inside their own box when they cannot fit (gb-scroll), never the
   page; the chosen group sits on a light band with "This week" under its name; other weeks are lighter. */
.mn-est { font-size: 15px; color: var(--ink2); margin: calc(-1 * var(--sp2)) 0 var(--sp3); max-width: 62em; }
/* the contract-rate line: the same muted line, but it follows a card's own sentence, so no pull-up */
.mn-cr { margin-top: var(--sp2); }
.ob-tiles .kpi .s .what + .what { color: var(--muted); }
.mw-grp { margin-bottom: 0; }
.mw-grp button { min-height: 40px; font-size: 13.5px; padding: 6px 12px; }
.mw-chart { margin: 0 -4px; min-height: 200px; }
.mw-chart svg { display: block; }
.gb-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.gb .gb-y text { fill: var(--ink2); font-size: 13px; font-variant-numeric: tabular-nums; }
.gb .gb-y .gb-unit { fill: var(--muted); font-size: 12.5px; }
.gb .gb-name { fill: var(--ink2); font-size: 13px; }
.gb .gb-name.hi { fill: var(--ink); font-weight: 700; }
.gb .gb-hil { fill: var(--ink); font-size: 13px; font-weight: 650; }
.gb .gb-hi { fill: var(--ink); fill-opacity: .055; }
.mw-pb .legend, .mw-bb .legend { font-size: 14px; gap: 6px 18px; margin-top: var(--sp3); color: var(--ink); }
.mw-pb .legend i, .mw-bb .legend i { width: 14px; height: 14px; }
.mw-note { font-size: 13.5px; color: var(--ink2); margin: var(--sp2) 0 0; }
@media (max-width: 620px) {
  .mn-est { font-size: 14px; }
  .mw-pb .chead { flex-wrap: wrap; }
  .mw-pb .chead .right { width: 100%; margin-left: 0; }
}

/* ---------------------------------------------------------------- This week (views/courts.js; docs/STRUCTURE.md, 15 Sep 2026):
   the owner's landing on the Courts owner look (.ob). One freshness line; three answer sentences, each with its source
   word on the left (above it on a phone); "This week's 3 actions": a numbered row each with the sentence, the button
   and a "Mark done" tick (44px taps; a done row greys out); the links out as plain buttons. Money's accountant download. */
.tw .tw-fresh { margin: 0 0 var(--sp3); }
.tw-say { display: grid; gap: 10px; margin: var(--sp1) 0 var(--sp5); max-width: 64em; }
.tw-a { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 2px 14px; margin: 0; align-items: baseline; }
.tw-a .tw-l { font-size: 13px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tw-a .tw-s { font-size: 19px; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.tw-acts .tw-list { list-style: none; margin: 0; padding: 0; display: grid; }
.tw-act { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 0;
  border-top: 1px solid var(--line); }
.tw-act:first-child { border-top: 0; padding-top: 2px; }
.tw-n { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid;
  place-items: center; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.tw-act p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.tw-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tw-btns .btn, .tw-links .btn { min-height: 44px; display: inline-flex; align-items: center; font-size: 14.5px; white-space: nowrap;
  text-decoration: none; padding: 8px 14px; }
.tw-btns .tw-go { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.tw-btns .tw-done { color: var(--ink2); }
.tw-btns .tw-done[aria-pressed="true"] { color: var(--good); border-color: var(--good); }
.tw-act.done p { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.tw-act.done .tw-n { background: var(--good); }
.tw-act.done .tw-go { background: var(--surface); color: var(--ink2); border-color: var(--line); }
.tw-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--gap); }
.tw-links .btn:hover, .tw-btns .btn:hover { border-color: var(--axis); }
.mn-acct { min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; font-size: 14px; }
.tw .cmp .c-short { display: none; }
/* the phone: about two screens. Each answer runs on from its source word; an action's buttons take the full width
   under its sentence; the three tiles sit side by side with the short comparison (what each is, in its ⓘ); the
   week-before rows keep figure and words on one line (the hours are under the chart) */
@media (max-width: 620px) {
  .tw-say { gap: 8px; margin-bottom: var(--sp4); }
  .tw-a { display: block; }
  .tw-a .tw-l { display: inline; margin-right: 8px; font-size: 12px; }
  .tw-a .tw-s { font-size: 16.5px; }
  .tw-act { grid-template-columns: 26px minmax(0, 1fr); gap: 8px 10px; padding: 10px 0; }
  .tw-n { width: 26px; height: 26px; font-size: 13px; }
  .tw-act p { font-size: 15px; }
  .tw-btns { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: nowrap; }
  .tw-btns .tw-go { flex: 1 1 auto; justify-content: center; }
  .tw-links .btn { flex: 1 1 auto; justify-content: center; }
  .tw .kpis.ob-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tw .ob-tiles .kpi { padding: 10px 10px 12px; }
  .tw .ob-tiles .kpi .k { font-size: 13px; line-height: 1.25; }
  .tw .ob-tiles .kpi .v { font-size: 21px; letter-spacing: -.4px; }
  .tw .ob-tiles .kpi .spark, .tw .ob-tiles .kpi .what, .tw .cmp .c-long { display: none; }
  .tw .cmp .c-short { display: inline; }
  .tw .ob-tiles .kpi .s { font-size: 13px; margin-top: 4px; }
  .tw .ob-tiles .kpi .k .kl { white-space: normal; overflow: visible; text-overflow: clip; }
  .tw .ob-lines .ebig { font-size: 17px; }
}
@container (max-width: 400px) {
  .tw .ob-week .wrow { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "l v c" "bar bar bar"; gap: 4px 10px; }
  .tw .ob-week .wrow .wc { text-align: right; min-width: 0; }
  .tw .ob-week .wl span { display: none; }
  .tw .ob-week .wv b { font-size: 19px; }
  .tw .ob-week .wrows { gap: 14px; }
}

/* ---------------------------------------------------------------- Owner B (docs/STRUCTURE.md, 15 Sep 2026): Socials cut hard,
   Players with action groups, Find new players. The owner look (.ob, .ob-answer, .ob-tiles, .ob-nav) comes from Courts. */
.so-say { margin: -4px 0 var(--sp3); font-size: 14px; color: var(--ink2); max-width: 60em; }
.so-chart { overflow: hidden; }
.so-chart rect.so-on { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.so-chart text.so-wk { fill: var(--ink2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.so-chart text.so-wk.on { fill: var(--ink); font-weight: 700; }
.so-chart text.so-pc { fill: var(--ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.so-chart text.so-pc.sm { font-size: 12px; }
.so-chart text.so-bw { fill: var(--ink2); font-size: 12px; }
.so-chart text.so-bw.sm { font-size: 10px; }
.so-chart rect.hit { cursor: pointer; }
/* slots to change: slot · runs · reason · chip · Plan it in Programming */
.so-slots2 { display: grid; gap: 0; font-size: 14px; }
.so-sr2 { display: grid; grid-template-columns: 84px minmax(96px, auto) minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--line); }
.so-sr2:first-child { border-top: 0; padding-top: 2px; }
.so-sr2 .c-slot { font-weight: 650; white-space: nowrap; }
.so-sr2 .c-why { color: var(--ink); line-height: 1.35; }
.so-sr2:not(.go) .c-why { color: var(--ink2); }
.so-sr2 .c-act { justify-self: end; }
.so-sr2 .sugg { font-size: 13px; }
.so-plan { min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; font-size: 14px; }
@container (max-width: 640px) {
  .so-sr2 { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "slot chip" "runs runs" "why why" "act act"; }
  .so-sr2 .c-slot { grid-area: slot; } .so-sr2 .c-runs { grid-area: runs; } .so-sr2 .c-why { grid-area: why; }
  .so-sr2 .c-chip { grid-area: chip; } .so-sr2 .c-act { grid-area: act; justify-self: start; }
  .so-sr2:not(.go) { grid-template-areas: "slot chip" "runs runs" "why why"; }
}
.so-ss .cx { cursor: default; }
.so-links { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; margin-top: var(--gap); font-size: 14px; }
.so-det { min-height: 40px; font-size: 14px; }
.so-links a.go { color: var(--ink2); }
/* Players: the action groups (the number, what they are, the offer, one fact, how many can be reached; Export and
   Copy usernames under it for the owner). Six tiles (with Members and Renewing) sit three by two on a wide screen */
.pl-acts { display: grid; gap: var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--gap); }
@container (min-width: 1101px) { .pl-acts.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pl-act { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; display: grid; align-content: space-between; min-width: 0; }
.pl-act.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pl-am { display: grid; gap: 4px; align-content: start; text-align: left; background: transparent; border: 0; color: var(--ink);
  padding: 14px 16px 10px; cursor: pointer; border-radius: 12px; font: inherit; min-width: 0; }
.pl-am:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pl-am .n { font-size: 34px; font-weight: 700; letter-spacing: -.8px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pl-am .nm { font-size: 15px; font-weight: 650; }
.pl-am .of { font-size: 14px; color: var(--ink); }
.pl-am .fa { font-size: 13.5px; color: var(--ink2); line-height: 1.35; }
.pl-am .rc { font-size: 13.5px; color: var(--good); font-weight: 650; }
.pl-am .rc.none { color: var(--warn); }
.pl-ab { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 14px; }
.pl-ab .btn { min-height: 40px; display: inline-flex; align-items: center; font-size: 14px; text-decoration: none; }
.pl-ctl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 var(--sp3); }
.pl-ctl .pl-search { flex: 1 1 220px; min-width: 0; display: flex; }
.pl-ctl .pl-search input { width: 100%; min-height: 40px; }
.pl-ctl .pl-sel, .pl-ctl .btn { min-height: 40px; }
.pl-last { font-size: 13px; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-review { margin: var(--gap) 0 0; font-size: 13.5px; }
.pl-review a { color: var(--ink2); }
@container (max-width: 1100px) { .pl-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) {
  .pl-acts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pl-am .n { font-size: 30px; }
  .pl-ctl .pl-sel { flex: 1 1 40%; }
}
/* Find new players: the share line, our best slot as a reference, the three invite lists */
.mk-share { margin: -6px 0 var(--sp4); font-size: 15px; color: var(--ink2); max-width: 60em; }
.mk-best { display: flex; align-items: center; gap: 8px; margin: var(--sp4) 0 0; padding-top: var(--sp3); border-top: 1px dashed var(--line);
  font-size: 14px; color: var(--ink2); }
.mk-best .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--s1); flex: 0 0 auto; }
.fn .mk-row .nm { font-size: 15px; }
.fn .mk-row .val { font-size: 13.5px; }
.mk-segs.mk-segs3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-segs3 .mk-seg { align-items: start; }
.mk-segs3 .mk-seg .lbl { font-size: 13.5px; }
.mk-segs3 .mk-seg .lbl strong { color: var(--ink); font-weight: 650; }
.mk-segs3 .mk-seg .btn { min-height: 36px; display: inline-flex; align-items: center; }
@container (max-width: 760px) { .mk-segs.mk-segs3 { grid-template-columns: minmax(0, 1fr); } }
/* Owner B, after the visual check: the group column fits "Stopped coming"; club names wrap on a phone in Find */
.players.ob .pl-row { grid-template-columns: minmax(150px, 1.4fr) 116px 124px 170px 110px minmax(130px, 1.1fr) 108px 12px; }
.players.ob .pl-list.nomoney .pl-row { grid-template-columns: minmax(150px, 1.4fr) 116px 124px 170px 110px 108px 12px; }
@container (max-width: 1180px) {
  .players.ob .pl-row { grid-template-columns: minmax(140px, 1.4fr) 110px 120px 170px 100px minmax(110px, 1fr) 100px 12px; }
  .players.ob .pl-list.nomoney .pl-row { grid-template-columns: minmax(140px, 1.4fr) 110px 120px 170px 100px 100px 12px; }
}
@container (max-width: 820px) {
  .players.ob .pl-row, .players.ob .pl-list.nomoney .pl-row { grid-template-columns: minmax(0, 1fr) auto; }
}
@container (max-width: 620px) {
  .fn .mk-rc .nm { flex-wrap: wrap; white-space: normal; }
  .fn .mk-rc .nm .cl { overflow: visible; white-space: normal; }
}

/* Coaching: My lessons (coach) and Coach pay (owner), 15 Sep 2026 (docs/STRUCTURE.md). Owner header, answer and
   tiles come from Courts (.ob-head, .ob-answer, .ob-tiles). */
.cch .cl-week { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0 0 var(--sp3); line-height: 1.45; max-width: 60em; }
.cl-day { margin: 0 0 var(--sp4); }
.cl-day h2 { font-size: 15px; font-weight: 650; margin: 0 0 8px; color: var(--ink); }
.cl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cl-lesson { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.cl-time { font-size: 17px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.cl-who { font-size: 15px; color: var(--ink); display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.cl-lv, .cl-more { font-size: 13px; color: var(--ink2); }
.cl-meta { font-size: 13px; color: var(--ink2); margin-top: 2px; }
.cl-web { font-size: 12.5px; color: var(--brand); margin-top: 2px; font-weight: 600; }
.cl-st { font-size: 13px; font-weight: 650; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink2);
  white-space: nowrap; }
.cl-st.st-checked_in { color: var(--brand); border-color: var(--brand); }
.cl-st.st-done { color: var(--good); border-color: var(--good); }
.cl-st.st-no_show { color: var(--bad); border-color: var(--bad); }
.cl-empty p { margin: 0; font-size: 15px; color: var(--ink2); }
.cp-period { font-size: 15px; font-weight: 650; min-width: 8em; text-align: center; }
.cp-back { min-height: 40px; display: inline-flex; align-items: center; }
.cp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cp-table th { text-align: left; font-size: var(--fs-meta); color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.cp-table th.r, .cp-table td.r { text-align: right; }
.cp-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
.cp-table tr.cp-row:has(+ tr.cp-sub) td { border-bottom: 0; }
.cp-name a { font-weight: 650; color: var(--ink); }
.cp-note { font-size: 12px; color: var(--muted); font-weight: 400; }
.cp-over { color: var(--warn); font-weight: 600; }
.cp-act { text-align: right; width: 1%; white-space: nowrap; }
.cp-sub td { padding-top: 0; }
.cp-paid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink2); margin: 2px 0 6px; }
.cp-ok { color: var(--good); font-size: 13.5px; font-weight: 600; margin: 4px 0; }
.cp-form { margin: 4px 0 8px; }
.cp-links { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp3) 0 0; }
.cp-links .btn { display: inline-flex; align-items: center; }
.cp-lead { font-size: 13.5px; color: var(--ink2); margin: 0 0 6px; }
.cp-log { margin-top: var(--gap); }
@container (max-width: 620px) {
  .cl-lesson { grid-template-columns: minmax(0, 1fr) auto; }
  .cl-lesson .cl-st { grid-column: 2; grid-row: 1; }
  .cl-lesson .cl-main { grid-column: 1 / -1; }
  .cp-table thead { display: none; }
  .cp-table, .cp-table tbody { display: block; }
  .cp-table tr.cp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .cp-table tr.cp-row:has(+ tr.cp-sub) { border-bottom: 0; }
  .cp-table tr.cp-sub { display: block; border-bottom: 1px solid var(--line); }
  .cp-table tr.cp-sub td { display: block; }
  .cp-table td { display: block; border: 0; padding: 0; }
  .cp-table td.r { text-align: left; }
  .cp-table td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; color: var(--muted); }
  .cp-name, .cp-act { grid-column: 1 / -1; }
  .cp-act { text-align: left; width: auto; }
  .cp-act .btn { width: 100%; }
}

/* Settings (docs/STRUCTURE.md step 5, web/views/settings.js): six tabs as one row on a wide screen and a select on a
   phone (never three rows of wrapped tabs); the plain answer line; the one-time password card; action buttons that
   wrap; price and coach editors; Replies side by side; Setup's health line and its list of fixes */
.set-page .btn { min-height: 40px; }
.set-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.set-tabs button { min-height: 40px; white-space: nowrap; }
.set-pick { display: none; width: 100%; min-height: 44px; font-size: 16px; margin-bottom: var(--gap); }
@container (max-width: 700px) { .set-tabs { display: none; } .set-pick { display: block; } }
.set-answer { font-size: 17px; font-weight: 600; margin: var(--sp2) 0 var(--gap); max-width: 60em; }
.set-answer.sm { font-size: 15px; margin-top: 0; }
.set-lead { margin: 0 0 var(--sp3); }
.set-table td { vertical-align: top; }
/* Contract rates: the start date keeps one line beside the long source note in the account column */
#set-rates .set-table td:nth-child(3) { white-space: nowrap; }
.set-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.set-panel { border-top: 1px dashed var(--line); margin-top: var(--gap); padding-top: var(--sp3); }
.set-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.card.set-secret { border-color: var(--good); }
.set-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline; margin: var(--sp3) 0; }
.set-kv code { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.set-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.set-shown { align-self: center; }
.set-days { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.set-more { margin-top: var(--gap); }
.set-more > summary { font-size: 13.5px; color: var(--ink2); min-height: 32px; }
.set-win { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.set-win .lbl { width: 3em; }
.set-wins { grid-column: 1 / -1; display: grid; gap: 6px; }
.set-coach .set-active { align-self: center; }
.set-reply { border-top: 1px solid var(--line); padding: var(--sp3) 0; }
.set-reply:first-of-type { border-top: 0; padding-top: 0; }
.set-reply h4 { margin: 0 0 2px; font-size: 14px; }
.set-langs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: 6px; }
@container (max-width: 700px) { .set-langs { grid-template-columns: minmax(0, 1fr); } }
.set-lang textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; }
.set-lang .btn { margin-top: 6px; }
.set-health { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); margin: 0 0 var(--gap); }
.set-health p { margin: 0; font-size: 16px; font-weight: 600; flex: 1 1 240px; }
.set-health i { width: 10px; height: 10px; border-radius: 50%; background: var(--good); flex: 0 0 auto; }
.set-health.warn i { background: var(--warn); }
.set-subs { margin-bottom: var(--gap); max-width: 100%; overflow-x: auto; }
.set-subs button { min-height: 36px; white-space: nowrap; }
.set-fixes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.set-fixes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0;
  border-top: 1px solid var(--line); font-size: 14px; }
.set-fixes li:first-child { border-top: 0; }
a.set-fix { text-decoration: none; display: inline-flex; align-items: center; }
.set-tech { margin-top: var(--section); }
.set-tech > summary { cursor: pointer; font-weight: 650; min-height: 32px; }
.auth-help { margin: 4px 0 0; }
/* Money › Day closes (web/views/analytics.js closesCard): one row per day, the words in warn colour with a dot when a
   day has a difference or is not closed */
.dc-day { border-top: 1px solid var(--line); padding: 10px 0; }
.dc-day:first-child { border-top: 0; }
.dc-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px; }
.dc-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.dc-methods { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.dc-words { margin: 4px 0 0; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.dc-day.warn .dc-words { color: var(--warn); font-weight: 600; }
.dc-flag { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: 0 0 auto; }
.dc-sales td { font-size: 13px; }

/* ---------------------------------------------------------------------------------------------------------------
   Desk: Today, Requests, Schedule (docs/STRUCTURE.md, 15 Sep 2026). Touch targets 44 px and up; the courts strip
   scrolls sideways inside its own box; a sticky bottom bar under 1024 px; two columns from 768 px. */
.dk-head { align-items: flex-start; }
.dk-sub { margin: 2px 0 0; font-size: 15px; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.dk-now { font-weight: 650; font-variant-numeric: tabular-nums; }
.dk-waiting { font-weight: 650; color: var(--bad); text-decoration: none; }
.dk-waiting:hover { text-decoration: underline; }
.dk-hint { margin: 4px 0; color: var(--ink2); font-size: 13px; }
.dk-shead { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.dk-shead h3 { margin: 0; }
.dk-leg { display: flex; gap: 12px; font-size: 12px; color: var(--ink2); }
.dk-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.dk-leg i.free { border: 1.5px dashed var(--good); }
.dk-leg i.busy { background: color-mix(in srgb, var(--s1) 30%, var(--surface)); border-left: 3px solid var(--s1); }
.dk-leg i.past { background: repeating-linear-gradient(135deg, var(--axis) 0 1.5px, transparent 1.5px 5px); border: 1px solid var(--grid); }
.dk-courts { margin-bottom: var(--gap); }
.dk-cols { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 768px) { .dk-cols:not(.one) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.dk-col { min-width: 0; display: grid; gap: var(--gap); }
.dk-col > .card { margin: 0; }
.dk-panel { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-top: 10px; background: var(--raised); }
.dk-phead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dk-phead h4 { margin: 0; font-size: 16px; }
.dk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-two { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 8px 0; }
.dk-two select { min-height: 44px; font-size: 16px; }
.dk-clash { border-left: 3px solid var(--warn); padding: 6px 10px; margin: 8px 0; background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border-radius: 0 8px 8px 0; }
.dk-clash p { margin: 0 0 6px; }
.dk-price { font-size: 16px; margin: 8px 0; font-variant-numeric: tabular-nums; }
.dk-label { font-size: 12.5px; color: var(--ink2); font-weight: 650; margin: 12px 0 4px; }
.dk-who { margin-top: 6px; }
.dk-who input { min-height: 44px; font-size: 16px; }
.dk-found { display: grid; gap: 6px; margin: 6px 0; }
.dk-found p { margin: 2px 0; }
.dk-person { min-height: 44px; }
.dk-picked { margin: 6px 0; font-size: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dk-group { margin: 14px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.dk-session { border: 1px solid var(--line); border-left: 4px solid var(--c, var(--line)); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.dk-shead2 { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.dk-sname { font-size: 15px; }
.dk-hl { margin: 4px 0 6px; font-size: 14.5px; font-weight: 600; }
.dk-staff .ops-row { opacity: .62; }
.dk-fold { margin-top: 6px; min-height: 40px; }
.dk-payrow { width: 100%; padding: 6px 0; }
.dk-payrow input { max-width: 180px; }
.dk-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1280px) { .dk-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dk-prod { display: grid; gap: 2px; text-align: left; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: 14px; }
.dk-prod b { font-size: 14.5px; line-height: 1.25; }
.dk-prod span { color: var(--ink2); font-variant-numeric: tabular-nums; }
.dk-prod:hover { border-color: var(--axis); }
.dk-prod.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dk-prod:disabled { opacity: .55; cursor: default; }
.dk-qty { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: 18px; flex-wrap: wrap; }
.dk-total { font-size: 15px; color: var(--ink2); }
.dk-taken { margin-top: 12px; width: 100%; text-align: left; font-size: 15px; font-weight: 650; }
.dk-sales { margin-top: 6px; }
.dk-warn p { margin: 2px 0; }
.dk-bar { display: none; }
@media (max-width: 1023px) {
  .dk-hasbar { padding-bottom: 80px; }
  .dk-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--surface); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); box-shadow: var(--shadow); }
  .dk-barbtn { min-height: 52px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit;
    font-size: 13.5px; font-weight: 650; line-height: 1.2; cursor: pointer; padding: 4px; }
  .dk-barbtn:active { background: var(--ink); color: var(--surface); }
}
.ops-pay3 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.ops-pay3 .btn { min-height: 48px; min-width: 88px; font-size: 15px; font-weight: 650; }
.ops-more { min-height: 48px; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); padding: 0 8px; }
.ops-note { margin: 8px 0; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ops-toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--surface);
  padding: 10px 16px; border-radius: 10px; font-weight: 600; box-shadow: var(--shadow); max-width: min(92vw, 520px); }
.ops-toast.err { background: var(--bad); color: #fff; }
@media (min-width: 1024px) { .ops-toast { bottom: 24px; } }

/* the courts strip: 96 px an hour, rows 48 px, the court names stay put while it scrolls */
.cs { margin-top: 8px; }
.cs-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overscroll-behavior-x: contain; }
.cs-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cs-grid { display: grid; width: max-content; min-width: 100%; }
.cs-row { display: flex; align-items: stretch; border-top: 1px solid var(--grid); }
.cs-headrow { border-top: 0; }
.cs-row.cs-gap { border-top: 4px solid var(--grid); }
.cs-lab { position: sticky; left: 0; z-index: 4; flex: 0 0 auto; width: 112px; padding: 0 10px; display: flex; align-items: center;
  font-weight: 650; font-size: 13.5px; background: var(--surface); border-right: 1px solid var(--line); }
.cs-track { position: relative; height: 48px; flex: 0 0 auto;
  background-image: repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 48px); }
.cs-hours { height: 26px; background-image: none; }
.cs-hr { position: absolute; top: 5px; font-size: 12px; color: var(--ink2); padding-left: 4px; border-left: 1px solid var(--axis); line-height: 16px; white-space: nowrap; }
.cs-nowlab { position: absolute; top: 4px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--bad); background: var(--surface);
  padding: 0 4px; z-index: 3; border-radius: 4px; }
.cs-past { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--grid) 0 2px, transparent 2px 7px); }
.cs-free { position: absolute; top: 4px; bottom: 4px; border: 1.5px dashed var(--good); border-radius: 8px; background: color-mix(in srgb, var(--good) 6%, var(--surface));
  color: var(--good); font: inherit; font-weight: 650; font-size: 13px; cursor: pointer; padding: 0 10px; text-align: left; min-width: 44px; }
.cs-free:hover, .cs-free:focus-visible { background: color-mix(in srgb, var(--good) 16%, var(--surface)); border-style: solid; outline: none; }
.cs-blk { position: absolute; top: 4px; bottom: 4px; border: 0; border-left: 4px solid var(--c); border-radius: 6px; z-index: 1;
  background: color-mix(in srgb, var(--c) 22%, var(--surface)); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600;
  text-align: left; padding: 0 6px; overflow: hidden; cursor: pointer; }
.cs-blk span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-blk.faint { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 20%, var(--surface)) 0 5px, var(--surface) 5px 9px); }
.cs-blk.k-hold { border-left-style: dashed; }
.cs-blk.past { opacity: .5; }
.cs-blk.on, .cs-blk:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.cs-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--bad); z-index: 2; pointer-events: none; }
@media (max-width: 620px) { .cs-lab { width: 92px; font-size: 12.5px; padding: 0 8px; } }

/* Requests */
.bk-coachbox { display: grid; gap: 4px; }
.bk-legend { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-size: 12px; color: var(--ink2); }
.bk-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.bk-legend i.ok { background: var(--good); }
.bk-legend i.warn { background: var(--warn); }
.bk-sub { margin: 2px 0 0; color: var(--ink2); font-size: 14px; }
.bk-new .tabs, .bk-queue .tabs { margin: 6px 0 10px; }
.bk-new .tabs button, .bk-queue .tabs button { min-height: 40px; }
.bk-form { display: grid; gap: 8px; }
.bk-form label, .bk-two label { display: grid; gap: 3px; font-size: 12.5px; color: var(--ink2); }
.bk-form input, .bk-form select, .bk-edit select { min-height: 44px; font-size: 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.bk-form textarea { width: 100%; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: 16px; }
.bk-two { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.bk-asked p { margin: 4px 0; }
.bk-full { font-weight: 650; color: var(--warn); margin: 4px 0 8px; }
.bk-why { color: var(--warn); font-weight: 600; margin: 4px 0; }
.bk-hint { color: var(--warn); font-style: italic; }

/* Schedule */
.sch-bar { margin-bottom: 10px; }
.sch-day { margin-bottom: var(--gap); }
.sch-week { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .sch-week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .sch-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sch-wday { margin: 0; }
.sch-wday h3 { margin: 0 0 6px; font-size: 15px; }
.sch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sch-sess { display: grid; gap: 2px; width: 100%; text-align: left; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line);
  border-left: 4px solid var(--c, var(--line)); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-size: 13.5px; }
.sch-sess.on { border-color: var(--ink); }
.sch-sess.off { opacity: .55; text-decoration: line-through; }
.sch-other { margin-top: 8px; font-size: 13px; color: var(--ink2); }
.sch-other summary { cursor: pointer; min-height: 32px; }
.sch-clash p { margin: 3px 0; font-weight: 500; }

/* ---- Player drawer: memberships held and "Sell a membership" (docs/STRUCTURE.md: Members retires) ---- */
.pl-mem { margin: 10px 0 6px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--page); }
.pl-mem-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.pl-mem-now { margin: 0; font-size: 13px; color: var(--ink2); }
.pl-mem .pl-sell-btn { min-height: 44px; }
.pl-mem-none { margin: 6px 0 0; font-size: 13px; color: var(--ink2); }
.pl-sell { margin-top: 10px; display: grid; gap: 8px; }
.pl-sell-f { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; }
.pl-sell-hint { margin: 0; font-size: 12px; color: var(--ink2); }
.pl-sell-hint:empty { display: none; }
.pl-sell-h { margin: 4px 0 0; font-size: 12px; color: var(--ink2); }
.pl-sell .ops-pay3 { margin: 0; }
.pl-sell-ask { margin-top: 10px; border: 1px solid var(--ink); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.pl-sell-ask p { margin: 0 0 8px; }
.pl-sell-ask dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 6px; font-size: 14px; }
.pl-sell-ask dt { color: var(--ink2); }
.pl-sell-ask dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 620px) { .pl-sell-f { grid-template-columns: 1fr; } }

/* ---- Desk rebuild: the Requests badge in the navigation, the language line in the user menu ---- */
.nav-badge { display: inline-block; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; vertical-align: 1px; }
nav.nav a[aria-current="page"] .nav-badge { background: var(--surface); color: var(--bad); }
.pop-body .kv .btn { min-height: 36px; }

/* Settings on a phone: each table row is a small card (the first cell its title, the others led by their column name
   from data-label), so a row's button and price box stay on screen instead of inside a sideways scroll */
@container (max-width: 700px) {
  .set-table thead { display: none; }
  .set-table, .set-table tbody, .set-table tr, .set-table td { display: block; width: 100%; box-sizing: border-box; }
  .set-table tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .set-table tbody tr:first-child { border-top: 0; }
  .set-table td { border: 0; padding: 2px 0; }
  .set-table td:first-child { font-weight: 600; }
  .set-table td[data-label]::before { content: attr(data-label) ": "; color: var(--ink2); font-weight: 400; }
  .set-table td:empty { display: none; }
  .set-table td input[type=number] { max-width: 12em; }
  .set-table td .btn { margin-top: 4px; }
}

/* ---- Requests: the two-field rows (Name · Phone, Time · How long) stay inside their card on a phone ---- */
.bk-two > label { min-width: 0; }
.bk-two input, .bk-two select { width: 100%; min-width: 0; box-sizing: border-box; }