/* Layout: deep club colour sidebar on desktop, sticky top bar plus floating tab bar on phones.
   Brand and accent come from the club's own colours at runtime; deeper shades are mixed from them. */
:root {
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --brand: #15926f;          /* club main colour (Shipston green) */
  --brand-ink: #ffffff;      /* text on brand */
  --accent: #fdcc01;         /* club accent (tennis ball yellow) */
  --accent-ink: #191b1d;     /* text on accent */
  --brand-deep: color-mix(in oklab, var(--brand) 64%, #04100c);
  --brand-deeper: color-mix(in oklab, var(--brand) 40%, #030a08);
  --brand-soft: color-mix(in oklab, var(--brand) 9%, var(--surface));
  --brand-text: color-mix(in oklab, var(--brand) 78%, var(--ink));
  --court: #0f7a5c;          /* success, going */
  --warn: #b26d00;
  --danger: #b8333a;

  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #f1efe9;
  --ink: #15181a;
  --ink-2: #3b403d;
  --muted: #6c716d;
  --line: #e8e5dd;
  --line-strong: #d8d4c9;
  --shadow-sm: 0 1px 2px rgba(18, 26, 22, .05);
  --shadow: 0 1px 2px rgba(18, 26, 22, .04), 0 6px 16px -4px rgba(18, 26, 22, .07), 0 20px 40px -20px rgba(18, 26, 22, .14);
  --shadow-lg: 0 2px 6px rgba(10, 18, 14, .06), 0 30px 70px -20px rgba(10, 18, 14, .35);

  --f-display: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 11px;
  --sidebar: 276px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0d0c; --surface: #111614; --surface-2: #171e1b; --ink: #eef1ee; --ink-2: #c9d0cb; --muted: #949e98; --line: #222a26; --line-strong: #2e3833;
    --brand-text: color-mix(in oklab, var(--brand) 55%, #ffffff);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6); --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.8);
    --court: #34c697; --danger: #ef6b6f; --warn: #f0a530;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0d0c; --surface: #111614; --surface-2: #171e1b; --ink: #eef1ee; --ink-2: #c9d0cb; --muted: #949e98; --line: #222a26; --line-strong: #2e3833;
  --brand-text: color-mix(in oklab, var(--brand) 55%, #ffffff);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6); --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.8);
  --court: #34c697; --danger: #ef6b6f; --warn: #f0a530;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11", "calt" 0;
}
/* The font turns an x between numbers into a times sign (calt), which breaks links and codes such as 8zy4xo. */
input, textarea, select, button, [contenteditable] { font-feature-settings: "ss01", "cv11", "calt" 0; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.12; margin: 0; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(1.75rem, 3.6vw, 2.35rem); font-weight: 750; letter-spacing: -.035em; }
h2 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.025em; }
h3 { font-size: 1.02rem; font-weight: 650; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: color-mix(in oklab, var(--accent) 45%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.muted { color: var(--muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-text);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 1fr; min-height: 100%; }
@media (min-width: 900px) { .shell { grid-template-columns: var(--sidebar) 1fr; background: linear-gradient(to right, var(--brand-deeper) var(--sidebar), transparent var(--sidebar)); } }
.topbar a { text-decoration: none; }

.sidebar { display: none; }
@media (min-width: 900px) {
  .sidebar {
    display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    color: var(--brand-ink); padding: 28px 16px 20px max(16px, env(safe-area-inset-left, 0px));
    background:
      radial-gradient(120% 50% at 0% 0%, color-mix(in oklab, var(--brand) 55%, transparent), transparent 70%),
      linear-gradient(180deg, var(--brand-deep), var(--brand-deeper));
    box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
    scrollbar-width: none;
  }
}
.club-mark { display: flex; align-items: center; gap: 12px; padding: 0 8px; text-decoration: none; }
.club-badge {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  color: var(--accent); font: 800 .95rem var(--f-display); letter-spacing: -.01em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.2), 0 6px 16px -6px rgba(0,0,0,.4);
}
.club-name { font: 700 1rem/1.2 var(--f-display); letter-spacing: -.02em; }
.club-sub { font-size: .74rem; opacity: .6; letter-spacing: .02em; }
.side-section { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .45; padding: 0 12px 8px; }
.side-link {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; text-decoration: none;
  color: inherit; opacity: .74; transition: background .2s var(--ease), opacity .2s; font-weight: 500; font-size: .93rem;
  border: 0; background: none; cursor: pointer; text-align: left; width: 100%;
}
.side-link .icon { width: 19px; height: 19px; }
.side-link:hover { background: rgba(255,255,255,.06); opacity: 1; }
.side-link.active { background: rgba(255,255,255,.1); opacity: 1; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.side-link.active::before { content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.side-link.active .icon { color: var(--accent); }
.side-link .vis { margin-left: auto; opacity: .45; width: 14px; height: 14px; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.book-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 13px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 86%, #fff), var(--accent));
  color: var(--accent-ink); font-weight: 700; font-size: .92rem; letter-spacing: -.01em; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.08), 0 8px 20px -8px color-mix(in oklab, var(--accent) 70%, transparent);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.book-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.08), 0 12px 26px -8px color-mix(in oklab, var(--accent) 80%, transparent); }
.book-btn .icon { width: 18px; height: 18px; }
.me-chip {
  text-decoration: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 14px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border: 0; color: inherit; cursor: pointer; text-align: left; transition: background .2s;
}
.me-chip:hover { background: rgba(255,255,255,.09); }

/* ---------- top bar (phones) ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: var(--sat); z-index: 30; background: var(--brand-deep); }
.topbar {
  position: sticky; top: var(--sat); z-index: 20; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, var(--brand-deep), color-mix(in oklab, var(--brand-deep) 92%, #000));
  color: var(--brand-ink); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 8px 24px -12px rgba(0,0,0,.35);
  padding: 11px max(16px, env(safe-area-inset-right, 0px)) 11px max(16px, env(safe-area-inset-left, 0px));
}
.topbar .club-badge { width: 34px; height: 34px; border-radius: 11px; font-size: .8rem; }
.topbar .club-name { font-size: .97rem; }
.topbar .spacer { flex: 1; }
.topbar .book-btn { padding: 7px 14px; border-radius: 999px; font-size: .8rem; }
.topbar .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
@media (min-width: 900px) { .topbar { display: none; } }

.tabbar {
  position: fixed; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(10px + var(--sab));
  padding: 6px; border-radius: 22px;
  background: color-mix(in oklab, var(--surface) 93%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid color-mix(in oklab, var(--line-strong) 70%, transparent); box-shadow: var(--shadow-lg);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; text-decoration: none;
  font-size: .68rem; font-weight: 600; letter-spacing: .01em; color: var(--muted); border-radius: 16px; transition: background .2s, color .2s;
}
.tabbar a .icon { width: 21px; height: 21px; }
.tabbar a.active { color: var(--ink); background: var(--brand-soft); }
.tabbar a.active .icon { color: var(--brand-text); }
:root[data-theme="dark"] .tabbar a.active { background: var(--surface-2); }
:root[data-theme="dark"] .tabbar a.active .icon { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabbar a.active { background: var(--surface-2); } :root:not([data-theme="light"]) .tabbar a.active .icon { color: var(--accent); } }
@media (min-width: 900px) { .tabbar { display: none; } }

.main { min-width: 0; padding-block: 20px 120px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 900px) { .main { padding: 40px 48px 72px; } }
.page { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; animation: pageIn .4s var(--ease); }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); color: var(--brand-ink);
  padding: 28px 22px 24px; display: grid; gap: 22px;
  background:
    radial-gradient(70% 120% at 92% -10%, color-mix(in oklab, var(--brand) 80%, #fff 20%), transparent 62%),
    radial-gradient(60% 90% at -10% 120%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
    linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 55%, var(--brand-deeper) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.12), var(--shadow);
}
@media (min-width: 700px) { .hero { padding: 40px 40px 36px; } }
.hero::after { /* court plan, drawn in fine lines */
  content: ""; position: absolute; z-index: -1; right: -70px; bottom: -110px; width: 460px; height: 290px; pointer-events: none; opacity: .14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Crect x='6' y='6' width='388' height='248' rx='2'/%3E%3Cpath d='M200 6v248M6 36h388M6 224h388M100 36v188M300 36v188M100 130h200'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-14deg);
}
.hero::before { /* fine grain for depth */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .ball { position: absolute; right: 24px; top: 24px; width: 46px; height: 46px; filter: drop-shadow(0 10px 14px rgba(0,0,0,.3)); animation: float 5s ease-in-out infinite; }
@media (min-width: 700px) { .hero .ball { right: 40px; top: 38px; width: 58px; height: 58px; } }
.hero-greet { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 10px; }
.hero h1 { color: inherit; max-width: 17ch; font-size: clamp(1.9rem, 4.4vw, 2.75rem); letter-spacing: -.04em; font-weight: 750; }
.hero-lede { margin-top: 10px; font-size: .95rem; opacity: .78; max-width: 46ch; }
.hero-next {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 12px 16px 12px 12px; max-width: 520px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 30px -14px rgba(0,0,0,.4);
  cursor: pointer; text-align: left; color: inherit; transition: background .2s, transform .2s var(--ease);
}
.hero-next:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.hero-next strong { font-size: 1.02rem; font-weight: 650; letter-spacing: -.015em; }
.hero-next .when { font-size: .78rem; opacity: .72; margin-bottom: 1px; }
.hero-next > .icon { opacity: .6; width: 18px; height: 18px; }
.hero-actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .92rem; letter-spacing: -.01em;
  cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), background .2s, border-color .2s, box-shadow .2s; white-space: nowrap;
}
.btn .icon { width: 18px; height: 18px; }
.btn:hover { border-color: color-mix(in oklab, var(--line-strong) 60%, var(--muted)); background: color-mix(in oklab, var(--surface) 70%, var(--surface-2)); }
.btn:active { transform: scale(.97); }
.btn.primary {
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 88%, #fff), var(--brand-deep)); color: #fff; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.12), 0 6px 16px -8px color-mix(in oklab, var(--brand) 80%, transparent);
}
.btn.primary:hover { background: linear-gradient(180deg, var(--brand), var(--brand-deep)); }
.btn.accent {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 86%, #fff), var(--accent)); color: var(--accent-ink); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.08), 0 10px 24px -10px color-mix(in oklab, var(--accent) 80%, transparent);
}
.btn.accent:hover { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 78%, #fff), var(--accent)); }
.hero .btn { padding: 12px 18px; border-radius: 14px; }
.btn.ghost-light { background: rgba(255,255,255,.08); color: inherit; border-color: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn.ghost-light:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); }
.btn.danger { color: var(--danger); }
.btn.sm { padding: 6px 12px; font-size: .82rem; border-radius: 10px; }
.btn.sm .icon { width: 16px; height: 16px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.icon-btn { border: 0; background: none; padding: 7px; border-radius: 10px; cursor: pointer; color: inherit; display: inline-grid; place-items: center; transition: background .15s; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .icon { width: 18px; height: 18px; }

/* ---------- sections & cards ---------- */
.section { display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-head > div { display: flex; flex-direction: column; gap: 6px; }
.section-head h1 + * { margin-top: 2px; }
.grid-2 { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .grid-2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; } }
.stack { display: flex; flex-direction: column; gap: 12px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.post { position: relative; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: box-shadow .25s var(--ease), border-color .25s; }
.post:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.post h3 { font-size: 1.06rem; margin-top: 2px; }
.post-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.post-meta strong { font-weight: 650; }
.post-body { white-space: pre-line; overflow-wrap: anywhere; color: var(--ink-2); font-size: .95rem; }
.post.pinned { background: linear-gradient(100deg, color-mix(in oklab, var(--accent) 7%, var(--surface)), var(--surface) 55%); }
.post.pinned::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.chip {
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600;
  letter-spacing: .005em; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; transition: background .15s;
}
a.chip:hover { background: color-mix(in oklab, var(--surface-2) 60%, var(--line)); }
.chip.pin { background: color-mix(in oklab, var(--accent) 20%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); }
.chip.hidden { background: color-mix(in oklab, var(--danger) 9%, var(--surface)); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger) 20%, transparent); }
.chip.restricted { background: color-mix(in oklab, var(--warn) 10%, var(--surface)); color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 22%, transparent); }
.chip.open { background: color-mix(in oklab, var(--court) 9%, var(--surface)); color: var(--court); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 20%, transparent); }
.chip .icon { width: 13px; height: 13px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 700 .74rem var(--f-display); color: #fff; letter-spacing: .03em;
  background-image: linear-gradient(160deg, rgba(255,255,255,.22), rgba(0,0,0,.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.avatar.sm { width: 26px; height: 26px; font-size: .6rem; }
.avatars { display: flex; }
.avatars .avatar { box-shadow: 0 0 0 2px var(--surface); margin-left: -7px; }
.avatars .avatar:first-child { margin-left: 0; }

/* event row: calendar card date tile */
.event {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px 12px 12px;
  cursor: pointer; text-align: left; width: 100%; color: inherit; font: inherit;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.event:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.date-tile {
  border-radius: 13px; overflow: hidden; text-align: center; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.04);
}
.date-tile .mon { color: var(--brand-text); font-size: .6rem; font-weight: 800; letter-spacing: .16em; padding: 7px 0 0; text-transform: uppercase; }
.date-tile .day { font: 700 1.38rem/1.15 var(--f-display); letter-spacing: -.03em; padding: 0 0 7px; }
.date-tile.glass { width: 54px; flex: none; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.date-tile.glass .mon { color: var(--accent); }
.date-tile.glass .day { color: #fff; }
.event-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.event-info h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; padding-bottom: .04em; }
.event-sub { font-size: .8rem; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.event-sub span { display: inline-flex; gap: 5px; align-items: center; }
.event-sub span + span::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); margin-right: 5px; }
.event-sub .icon { width: 14px; height: 14px; }
.rsvp-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rsvp-dot.going { background: var(--court); box-shadow: 0 0 0 3px color-mix(in oklab, var(--court) 18%, transparent); }
.rsvp-dot.maybe { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); }
.rsvp-dot.no { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 18%, transparent); }
.rsvp-dot.none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }

/* spaces grid */
.spaces { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.space-card {
  position: relative; overflow: hidden; padding: 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; min-height: 150px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.space-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--brand) 9%, transparent), transparent); pointer-events: none; transition: transform .4s var(--ease); }
.space-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.space-card:hover::after { transform: scale(1.3); }
.space-card.locked { opacity: .68; }
.space-card h3 { margin-top: 4px; }
.space-ico {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: linear-gradient(160deg, color-mix(in oklab, var(--brand) 14%, var(--surface)), color-mix(in oklab, var(--brand) 6%, var(--surface)));
  color: var(--brand-text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 16%, transparent);
}
:root[data-theme="dark"] .space-ico { color: var(--accent); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .space-ico { color: var(--accent); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); } }
.space-card p { font-size: .86rem; color: var(--muted); line-height: 1.5; }
.space-card .chip { align-self: flex-start; margin-top: auto; }

/* space header */
.space-head { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.space-head .space-ico { width: 58px; height: 58px; border-radius: 18px; }
.space-head .space-ico .icon { width: 26px; height: 26px; }
.space-head .titles { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.tabs { display: flex; gap: 2px; padding: 4px; background: var(--surface-2); border-radius: 14px; align-self: flex-start; overflow-x: auto; max-width: 100%; box-shadow: inset 0 0 0 1px var(--line); }
.tabs button { border: 0; background: none; padding: 7px 16px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--muted); white-space: nowrap; transition: color .15s, background .15s; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--line); }

/* composer */
.composer { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.composer.collapsed { flex-direction: row; align-items: center; cursor: text; color: var(--muted); font-size: .92rem; transition: border-color .2s, box-shadow .2s; }
.composer.collapsed:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }

/* forms */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label, .field .lbl { font-size: .82rem; font-weight: 650; letter-spacing: -.005em; }
.theme-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.theme-chip:hover { border-color: var(--ink-2); }
.theme-chip.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent); }
.tc-dot { width: 20px; height: 20px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--tb) 0 62%, var(--ta) 62% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.tc-dot.own { background: conic-gradient(#e5484d, #f5a524, #30a46c, #3e63dd, #8e4ec6, #e5484d); }
.field .hint { font-size: .78rem; color: var(--muted); }
.input, select.input, textarea.input {
  width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03); transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: color-mix(in oklab, var(--muted) 75%, transparent); }
.input:hover { border-color: color-mix(in oklab, var(--line-strong) 60%, var(--muted)); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 16%, transparent); }
textarea.input { min-height: 100px; resize: vertical; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 180px; min-width: 0; }
.row > .avatar { flex: 0 0 auto; }
.choice { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice label { display: flex; flex-direction: column; gap: 2px; padding: 12px 13px; border: 1px solid var(--line-strong); border-radius: 13px; cursor: pointer; font-size: .8rem; color: var(--muted); transition: border-color .15s, box-shadow .15s; }
.choice label strong { color: var(--ink); font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 16%, transparent); background: var(--brand-soft); }
.icon-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.icon-pick label { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; transition: background .15s; }
.icon-pick label:hover { background: var(--surface-2); }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick label:has(input:checked) { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }
.checks { display: flex; gap: 8px; flex-wrap: wrap; }
.checks label { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; font-size: .84rem; font-weight: 600; transition: background .15s; }
.checks label:has(input:checked) { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }
.checks input { position: absolute; opacity: 0; pointer-events: none; }
.toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.toggle input { width: 42px; height: 24px; appearance: none; background: var(--line-strong); border-radius: 999px; position: relative; cursor: pointer; transition: background .2s; flex: none; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.toggle input:checked { background: var(--court); }
.toggle input:checked::after { transform: translateX(18px); }
.form-error { color: var(--danger); font-size: .85rem; font-weight: 600; }
.form-error:empty { display: none; }

/* sheet / dialog */
.scrim {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease;
  background: color-mix(in oklab, var(--brand-deeper) 55%, rgba(0,0,0,.35)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sheet {
  width: 100%; max-height: 92vh; overflow-y: auto; background: var(--surface); border-radius: 26px 26px 0 0; box-shadow: var(--shadow-lg);
  padding: 10px max(20px, env(safe-area-inset-right, 0px)) calc(24px + var(--sab)) max(20px, env(safe-area-inset-left, 0px));
  animation: rise .32s var(--ease); display: flex; flex-direction: column; gap: 18px;
}
.sheet .grab { width: 38px; height: 4px; border-radius: 4px; background: var(--line-strong); align-self: center; }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; }
.sheet-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sheet-head h2 { font-size: 1.35rem; }
.sheet-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding-top: 4px; }
@media (min-width: 700px) {
  .scrim { align-items: center; padding: 24px; }
  .sheet { max-width: 560px; border-radius: var(--r-xl); padding: 26px 30px 30px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg); }
  .sheet .grab { display: none; }
}
@keyframes rise { from { transform: translateY(24px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } }

/* RSVP */
.rsvp {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; border-radius: 18px;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.rsvp button {
  --tone: var(--court);
  display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 8px 10px; border: 0; border-radius: 14px;
  background: transparent; color: var(--ink-2); cursor: pointer; font: 650 .9rem var(--f-body); letter-spacing: -.01em;
  transition: background .2s var(--ease), color .2s, box-shadow .2s, transform .15s var(--ease);
}
.rsvp button.maybe { --tone: var(--warn); }
.rsvp button.not_going { --tone: var(--danger); }
.rsvp button:hover { background: color-mix(in oklab, var(--surface) 60%, transparent); color: var(--ink); }
.rsvp button:active { transform: scale(.97); }
.rsvp .r-ico {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  color: var(--tone); background: color-mix(in oklab, var(--tone) 13%, transparent); transition: background .2s, color .2s;
}
.rsvp .r-ico .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.rsvp .count {
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; color: var(--muted); background: color-mix(in oklab, var(--line-strong) 45%, transparent);
}
.rsvp button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 16px -8px color-mix(in oklab, var(--tone) 55%, transparent), inset 0 0 0 1.5px color-mix(in oklab, var(--tone) 45%, transparent); }
.rsvp button.on .r-ico { background: var(--tone); color: #fff; }
.rsvp button.on .count { background: color-mix(in oklab, var(--tone) 16%, transparent); color: var(--tone); }
/* narrow phones: icon above the words */
@media (max-width: 440px) {
  .rsvp button { flex-direction: column; gap: 5px; min-height: 76px; padding: 10px 4px; font-size: .84rem; }
  .rsvp .count { position: absolute; top: 6px; right: 6px; height: 18px; min-width: 18px; font-size: .66rem; }
  .rsvp button { position: relative; }
}
.bounce-ball { position: fixed; width: 34px; height: 34px; z-index: 80; pointer-events: none; animation: bounce 1s cubic-bezier(.3,0,.5,1) forwards; }
@keyframes bounce {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  15% { opacity: 1; transform: translate(0, -90px) scale(1) rotate(90deg); }
  45% { transform: translate(0, 0) scale(1, .85) rotate(200deg); }
  70% { transform: translate(0, -36px) rotate(280deg); }
  100% { transform: translate(0, 0) rotate(360deg); opacity: 0; }
}

.detail-list { display: flex; flex-direction: column; gap: 12px; }
.detail-list > div { display: flex; gap: 12px; align-items: flex-start; }
.detail-list .icon { color: var(--muted); margin-top: 2px; width: 18px; height: 18px; }

/* admin */
/* Club admin: grouped menu beside the page on wide screens, a page switcher above it on smaller ones */
.section-head > .toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; }
.admin-body { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.ad-head { align-items: flex-end; }
.ad-head > div:first-child { flex: 1 1 360px; min-width: 0; }
.ad-sub { max-width: 64ch; margin-top: 4px; line-height: 1.55; }
.ad-head > .btn, .ad-head > a.btn { flex: none; }
.admin-rail { display: none; }
.ad-switch-wrap { display: flex; }
.ad-switch {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.ad-switch > .icon:first-child { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); flex: none; }
.ad-switch > span { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.ad-switch small { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ad-switch strong { font: 750 1.2rem/1.2 var(--f-display); letter-spacing: -.02em; }
.ad-switch > .icon:last-child { color: var(--muted); }
.ad-switch + * { margin-top: 0; }
.admin-body > .ad-switch-wrap + .ad-head .eyebrow { display: none; }
/* Below the wide layout the switcher names the page, so the big title steps back (kept for screen readers) */
.admin-body > .ad-switch-wrap + .ad-head h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.admin-body > .ad-switch-wrap + .ad-head:not(:has(.ad-sub)):not(:has(> :nth-child(2))) { display: none; }
.ad-group { display: flex; flex-direction: column; gap: 2px; }
.ad-group + .ad-group { margin-top: 14px; }
.ad-label { font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 10px 6px; }
.ad-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none;
  font-weight: 550; font-size: .92rem; position: relative; transition: background .12s, color .12s;
}
.ad-link .icon { width: 17px; height: 17px; color: var(--muted); flex: none; }
.ad-link > span:not(.sys-dot) { flex: 1; min-width: 0; }
.ad-link > .sys-dot { flex: none; margin-left: 0; }
.ad-link:hover { background: var(--surface-2); color: var(--ink); }
.ad-link.active { background: var(--brand-soft); color: var(--brand-text); font-weight: 650; }
.ad-link.active .icon { color: var(--brand); }
.ad-sheet { display: flex; flex-direction: column; padding: 4px 2px 8px; }
.ad-sheet .ad-link { padding: 12px 12px; font-size: 1rem; }
.ad-sheet .ad-link .icon { width: 19px; height: 19px; }
@media (min-width: 1200px) {
  .page:has(> .admin-layout) { max-width: 1240px; }
  .admin-layout { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 40px; align-items: start; }
  .admin-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 92px; padding: 4px 0; max-height: calc(100vh - 110px); overflow-y: auto; }
  .ad-title { display: flex; align-items: center; gap: 8px; font: 700 .98rem/1 var(--f-display); color: var(--ink); text-decoration: none; padding: 4px 10px 6px; }
  .ad-title .icon { width: 18px; height: 18px; color: var(--brand); }
  .ad-switch-wrap { display: none; }
  .admin-body > .ad-switch-wrap + .ad-head .eyebrow { display: inline-flex; }
  .admin-body > .ad-switch-wrap + .ad-head h1 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .admin-body > .ad-switch-wrap + .ad-head:not(:has(.ad-sub)):not(:has(> :nth-child(2))) { display: flex; }
}
@media (max-width: 600px) {
  .admin-body { gap: 20px; }
  .ad-head { flex-direction: column; align-items: stretch; }
  .ad-head > div:first-child { flex: none; }
  .ad-head > .toolbar { width: 100%; }
  .ad-head > .toolbar > .btn { flex: 1 1 auto; justify-content: center; }
  .ad-head > .btn, .ad-head > a.btn { width: 100%; justify-content: center; }
}
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: color-mix(in oklab, var(--surface-2) 50%, var(--surface)); }
td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; transition: background .12s; }
tbody tr:hover { background: color-mix(in oklab, var(--surface-2) 60%, var(--surface)); }
.person { display: flex; align-items: center; gap: 12px; min-width: 180px; }
.person strong { font-weight: 650; }
.person small { display: block; color: var(--muted); font-size: .8rem; }
.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .84rem; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--court); box-shadow: 0 0 0 3px color-mix(in oklab, var(--court) 18%, transparent); }
.status.expired::before { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn) 18%, transparent); }
.status.suspended::before { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 18%, transparent); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar .input { max-width: 300px; flex: 1 1 200px; }
.stat-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { padding: 16px 18px; }
.stat b { display: block; font: 750 1.75rem/1.15 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat span { font-size: .8rem; color: var(--muted); }
.swatches { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.swatch { display: flex; align-items: center; gap: 10px; }
.swatch input[type=color] { width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 13px; padding: 3px; background: var(--surface); cursor: pointer; }
.preview-strip { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.preview-strip .bar { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: var(--brand-ink); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.preview-strip .body { padding: 14px 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.log { display: flex; flex-direction: column; }
.log div { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.log time { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 92px; }

/* sign in */
.signin { min-height: 100%; display: grid; grid-template-columns: 1fr; background: var(--bg); }
@media (min-width: 900px) { .signin { grid-template-columns: 1.15fr 1fr; } }
.signin-art {
  position: relative; isolation: isolate; overflow: hidden; color: var(--brand-ink); display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding-block: 32px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
  min-height: 300px;
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in oklab, var(--brand) 85%, #fff 15%), transparent 60%),
    radial-gradient(60% 60% at 0% 100%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 65%),
    linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 50%, var(--brand-deeper) 100%);
}
.signin-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width: 900px) { .signin-art { padding: 56px; } }
.signin-art h1 { color: inherit; font-size: clamp(2.2rem, 5.4vw, 3.9rem); max-width: 12ch; font-weight: 750; letter-spacing: -.045em; line-height: 1.02; }
.signin-art h1 em { font-style: normal; color: var(--accent); }
.signin-art p { font-size: 1.02rem; }
.signin-art .court { position: absolute; z-index: -1; right: -90px; bottom: -80px; width: 480px; opacity: .1; pointer-events: none; transform: rotate(-10deg); }
.signin-art .court g { stroke-width: 1.6; }
.signin-art .ball { width: 64px; height: 64px; position: absolute; right: 44px; top: 40px; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(25deg); } }
.signin-form { display: flex; align-items: center; justify-content: center; padding-block: 40px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.signin-form .inner { width: 100%; max-width: 390px; display: flex; flex-direction: column; gap: 20px; }
.signin-form h2 { font-size: 1.6rem; letter-spacing: -.035em; margin-bottom: 6px; }
.signin-form .btn.primary { padding: 13px 18px; border-radius: 13px; }
.demo-who { display: grid; gap: 8px; }
.demo-who .eyebrow { margin-bottom: 4px; }
.demo-who button {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 11px; border-radius: 15px; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; text-align: left; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.demo-who button:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.demo-who strong { font-weight: 650; }
.demo-who small { display: block; color: var(--muted); font-size: .8rem; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .78rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.empty { padding: 34px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .92rem; }
.empty .icon { width: 30px; height: 30px; color: var(--line-strong); }
.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--sab)); transform: translateX(-50%); z-index: 90;
  background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: .88rem; box-shadow: var(--shadow-lg);
  animation: rise .3s var(--ease); max-width: calc(100% - 32px);
}
@media (min-width: 900px) { .toast { bottom: 28px; } }
.demo-banner {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px 8px 8px 14px; font-size: .82rem; color: var(--muted);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; box-shadow: var(--shadow-sm);
}
.demo-banner > .icon { width: 16px; height: 16px; color: var(--warn); }
.demo-banner strong { color: var(--ink); font-weight: 650; }
.demo-banner button { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- gradient layer ---------- */
/* soft club colour wash behind the content area */
.main { background:
  radial-gradient(900px 420px at 85% -120px, color-mix(in oklab, var(--brand) 10%, transparent), transparent 70%),
  radial-gradient(700px 360px at 0% -160px, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%); }
:root[data-theme="dark"] .main { background: radial-gradient(900px 420px at 85% -120px, color-mix(in oklab, var(--brand) 16%, transparent), transparent 70%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .main { background: radial-gradient(900px 420px at 85% -120px, color-mix(in oklab, var(--brand) 16%, transparent), transparent 70%); } }
/* warm accent glow at the foot of the sidebar */
@media (min-width: 900px) {
  .sidebar { background:
    radial-gradient(120% 40% at 0% 0%, color-mix(in oklab, var(--brand) 55%, transparent), transparent 70%),
    radial-gradient(90% 30% at 50% 105%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--brand-deep), var(--brand-deeper)); }
}
/* headline picks up a light sheen */
.hero h1, .signin-art h1 { background: linear-gradient(100deg, #fff 30%, color-mix(in oklab, #fff 72%, var(--accent))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.signin-art h1 em { -webkit-text-fill-color: var(--accent); }
/* gradient hairline on pinned notices and the event you are going to */
.post.pinned { border-color: transparent; background:
  linear-gradient(100deg, color-mix(in oklab, var(--accent) 8%, var(--surface)), var(--surface) 55%) padding-box,
  linear-gradient(120deg, color-mix(in oklab, var(--accent) 70%, transparent), var(--line) 45%) border-box; }
.stat { background: linear-gradient(160deg, var(--surface), color-mix(in oklab, var(--brand) 4%, var(--surface))) ; }

/* editable sign in wording */
.signin-copy { display: flex; flex-direction: column; gap: 16px; }
.signin-intro { max-width: 38ch; opacity: .78; }
.form-section { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }
.signin-preview {
  position: relative; overflow: hidden; border-radius: var(--r-md); padding: 20px 22px; color: #fff; display: flex; flex-direction: column; gap: 10px;
  background: radial-gradient(80% 90% at 100% 0%, color-mix(in oklab, var(--brand) 85%, #fff 15%), transparent 60%), linear-gradient(150deg, var(--brand), var(--brand-deep) 55%, var(--brand-deeper));
}
.signin-preview h2 { color: #fff; font-size: 1.5rem; letter-spacing: -.035em; max-width: 16ch; }
.signin-preview h2 em { font-style: normal; color: var(--accent); }
.signin-preview p { font-size: .86rem; opacity: .78; max-width: 46ch; }

/* two step sign in */
.step-badge { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none; color: var(--brand-text);
  background: linear-gradient(160deg, color-mix(in oklab, var(--brand) 16%, var(--surface)), color-mix(in oklab, var(--brand) 6%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 18%, transparent); }
.step-badge .icon { width: 24px; height: 24px; }
.step-badge.on { color: var(--court); background: color-mix(in oklab, var(--court) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 25%, transparent); }
.code-input { font: 650 1.35rem/1 var(--f-display); letter-spacing: .22em; text-align: center; padding: 14px; font-variant-numeric: tabular-nums; }
.code-input::placeholder { letter-spacing: .22em; }
.notice { display: flex; align-items: center; gap: 14px; padding: 16px 18px; flex-wrap: wrap;
  background: linear-gradient(100deg, color-mix(in oklab, var(--accent) 10%, var(--surface)), var(--surface) 60%); }
.notice > .icon { color: var(--warn); width: 22px; height: 22px; }
.notice > div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.notice p { font-size: .86rem; }
.lock-card { padding: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 620px; }
.lock-card .btn { margin-top: 4px; }
.two-step-card .ts-head { display: flex; gap: 14px; align-items: flex-start; }
.two-step-card .ts-head p { font-size: .9rem; margin-top: 2px; }
.setup-steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 18px; }
.setup-steps li { counter-increment: s; position: relative; padding-left: 40px; display: flex; flex-direction: column; gap: 4px; }
.setup-steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 700 .8rem var(--f-display); color: #fff; background: linear-gradient(160deg, var(--brand), var(--brand-deep)); }
.setup-steps li > .muted { font-size: .84rem; }
.qr-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.qr { width: 168px; height: 168px; padding: 12px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); flex: none; }
.qr svg { width: 100%; height: 100%; display: block; }
.qr-alt { flex: 1 1 180px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; font-size: .84rem; }
.secret, .backup-codes code { font: 600 .86rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; }
.secret { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); word-break: break-all; }
.backup-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.backup-codes code { text-align: center; padding: 6px; border-radius: 8px; background: var(--surface); }
.reset-row { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 13px; background: var(--surface-2); font-size: .84rem; color: var(--muted); }
.reset-row .icon { color: var(--court); }
.reset-row span { flex: 1; }
.signin-form .step-badge { margin-bottom: -4px; }

/* fixtures, team selection and replies */
.event.fixture .vs { font-weight: 600; color: var(--muted); margin-right: 2px; }
.event.playing { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); background: linear-gradient(100deg, color-mix(in oklab, var(--accent) 8%, var(--surface)), var(--surface) 55%); }
.ha { font-weight: 650; }
.ha.home { color: var(--court); }
.ha.away { color: var(--warn); }
.team-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .8rem; margin-top: 3px; min-width: 0; }
.team-line .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.team-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.team-box.set { background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 9%, var(--surface)), var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 20%, var(--line)); }
.team-box > .muted { font-size: .88rem; }
.playing-note { display: flex; gap: 8px; align-items: center; font-weight: 650; font-size: .9rem; align-self: flex-start; padding: 8px 14px 8px 10px; border-radius: 12px; line-height: 1.35; background: var(--brand-soft); color: var(--brand-text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 22%, var(--line)); }
.playing-note .icon { color: var(--brand-text); }
.pick-count { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: .86rem; }
.pick-count.full { background: color-mix(in oklab, var(--court) 12%, var(--surface)); color: var(--court); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 30%, transparent); }
.squad { display: flex; flex-direction: column; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.squad-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; border-top: 1px solid var(--line); transition: background .15s; }
.squad-row:first-child { border-top: 0; }
.squad-row:hover { background: var(--surface-2); }
.squad-row input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.squad-row .nm { flex: 1; font-weight: 600; font-size: .92rem; }
.squad-row.out { opacity: .6; }
.squad-row:has(input:checked) { background: color-mix(in oklab, var(--brand) 7%, var(--surface)); }
.replies { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.reply { display: flex; gap: 10px; align-items: flex-start; }
.reply > div { flex: 1; min-width: 0; background: var(--surface-2); border-radius: 4px 14px 14px 14px; padding: 8px 12px; }
.reply-meta { display: flex; gap: 8px; align-items: center; font-size: .78rem; color: var(--muted); }
.reply-meta strong { color: var(--ink); font-weight: 650; }
.reply-meta .icon-btn { margin-left: auto; padding: 2px; }
.reply-meta .icon-btn .icon { width: 14px; height: 14px; }
.reply .post-body { font-size: .9rem; }
.reply.tucked { display: none; }
.reply .post-body.folded { max-height: 7.2em; }
.reply .read-more { margin-top: 2px; font-size: .8rem; }
.replies-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--brand-text); font: 650 .84rem var(--f-display); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.replies-more svg { width: 15px; height: 15px; }
.replies-more:hover { background: var(--surface-2); border-color: var(--brand-text); }
.reply-form { display: flex; gap: 8px; align-items: center; }
.reply-form .input { padding: 8px 12px; border-radius: 999px; font-size: .9rem; }
.reply-form .btn { border-radius: 999px; padding: 7px 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.kind-pick label { font-size: .78rem; }
[hidden] { display: none !important; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* polls */
.polls-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.poll { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(160deg, var(--surface), color-mix(in oklab, var(--brand) 4%, var(--surface))); }
.poll-opts { display: flex; flex-direction: column; gap: 8px; }
.poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; text-align: left; font-weight: 600; font-size: .92rem; transition: border-color .15s, transform .12s; }
.poll-opt:hover:not([disabled]) { border-color: var(--brand); }
.poll-opt:active:not([disabled]) { transform: scale(.99); }
.poll-opt[disabled] { cursor: default; }
.poll-opt .bar { position: absolute; inset: 0 auto 0 0; background: color-mix(in oklab, var(--brand) 12%, transparent); transition: width .5s var(--ease); }
.poll-opt.lead .bar { background: color-mix(in oklab, var(--accent) 30%, transparent); }
.poll-opt .lbl, .poll-opt .pct { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.poll-opt .pct { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .84rem; }
.poll-opt.mine { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand) 18%, transparent); }
.poll-opt.mine .icon { width: 16px; height: 16px; color: var(--brand-text); }
.poll-foot { font-size: .78rem; }
.poll.closed { opacity: .85; }
.opts { display: flex; flex-direction: column; gap: 8px; }
.opt-row { display: flex; gap: 6px; align-items: center; }
/* Poll: when voting closes, as clear choices */
.close-pick { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.close-pick legend { display: flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 10px; font: 650 .9rem var(--f-display); color: var(--ink); }
.close-pick legend .icon { width: 16px; height: 16px; color: var(--brand-text); }
.cp-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.cp-opt { position: relative; cursor: pointer; }
.cp-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cp-opt span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 11px 13px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: box-shadow .15s, background .15s; }
.cp-opt strong { font: 700 .9rem var(--f-display); color: var(--ink); }
.cp-opt small { font-size: .74rem; color: var(--muted); }
.cp-opt:hover span { box-shadow: inset 0 0 0 1.5px var(--brand); }
.cp-opt input:checked + span { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.cp-opt input:checked + span strong { color: var(--brand-text); }
.cp-opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.cp-note { margin: 0; }
.composer-row { display: flex; gap: 10px; align-items: stretch; }
.composer-row .composer { flex: 1; }

/* moderation */
.post-tools { margin-left: auto; display: inline-flex; gap: 2px; align-items: center; }
.post-tools .icon-btn { color: var(--muted); padding: 5px; }
.post-tools .icon-btn .icon { width: 15px; height: 15px; }
.post-tools .icon-btn:hover { color: var(--ink); }
.reply-meta .post-tools .icon-btn { padding: 2px; }
.quoted { margin: 0; padding: 12px 14px; border-left: 3px solid var(--line-strong); background: var(--surface-2); border-radius: 0 12px 12px 0; font-size: .9rem; }
.report.dismissed, .report.removed { opacity: .65; }

/* search */
.search-box { position: relative; }
.search-box > .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-box .input { padding: 15px 50px 15px 46px; font-size: 1.05rem; border-radius: 16px; }
/* The browser's own clear button is replaced by ours, which looks the same everywhere. */
.search-box .input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--line, rgba(0,0,0,.06)); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.search-clear[hidden] { display: none; }
.search-clear .icon { width: 16px; height: 16px; }
.search-head { align-items: flex-start; flex-wrap: nowrap; }
.search-close { flex: 0 0 auto; width: 44px; height: 44px; }
.result { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; text-decoration: none; color: inherit; transition: box-shadow .2s, border-color .2s; }
.result:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.result p { font-size: .88rem; }
mark { background: color-mix(in oklab, var(--accent) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.top-search { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: inherit; background: rgba(255,255,255,.08); }

/* fold and unfold sidebar headings */
.side-toggle { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; border-radius: 8px; padding-top: 4px; transition: opacity .15s; }
.side-label.side-toggle { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.side-toggle:hover { opacity: .85; }
.side-toggle .count { margin-left: auto; font-size: .64rem; letter-spacing: .04em; opacity: .9; }
.side-toggle .count:empty { display: none; }
.side-toggle .chev { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.side-toggle .count:empty + .chev { margin-left: auto; }
.side-section.shut .side-toggle .chev { transform: rotate(-90deg); }
.side-list { display: flex; flex-direction: column; gap: 2px; }
/* ---------- event types ---------- */
.cat { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .01em; }
.event-sub .cat + span::before, .event-sub span.cat + span::before { display: none; }
.cat-match { background: color-mix(in oklab, var(--court) 12%, var(--surface)); color: var(--court); }
.cat-training { background: color-mix(in oklab, #3e6fb0 12%, var(--surface)); color: color-mix(in oklab, #3e6fb0 85%, var(--ink)); }
.cat-social { background: color-mix(in oklab, var(--warn) 13%, var(--surface)); color: var(--warn); }
.cat-meeting { background: color-mix(in oklab, #7a52a8 12%, var(--surface)); color: color-mix(in oklab, #7a52a8 85%, var(--ink)); }
.cat-event { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- What's on list ---------- */
.whats-on { display: flex; flex-direction: column; gap: 12px; }
.wo-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.wo-filters button {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 12px;
  font: 600 .82rem var(--f-body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; transition: background .15s, border-color .15s;
}
.wo-filters button span { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.wo-filters button:hover { border-color: color-mix(in oklab, var(--line-strong) 60%, var(--muted)); }
.wo-filters button.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.wo-filters button.on span { color: inherit; opacity: .75; }
.wo-more { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wo-more .muted { font-size: .8rem; margin-left: auto; }
.wo-month { margin-top: 10px; font-size: 1.05rem; }

/* ---------- space home ---------- */
.space-home { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.sh-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.sh-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.sh-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sh-head h2 { font-size: 1.15rem; }
.sh-post { display: flex; gap: 10px; text-align: left; border: 0; background: var(--surface-2); border-radius: 4px 14px 14px 14px; padding: 10px 12px; cursor: pointer; color: inherit; font: inherit; width: 100%; }
.sh-post > span:not(.avatar) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sh-post-meta { font-size: .76rem; color: var(--muted); }
.sh-post-meta strong { color: var(--ink); font-weight: 650; }
.sh-post-title { font-size: .92rem; }
.sh-post-body { font-size: .86rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.next-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg); color: var(--brand-ink); padding: 22px; display: flex; flex-direction: column; gap: 16px;
  background: radial-gradient(70% 120% at 100% 0%, color-mix(in oklab, var(--brand) 80%, #fff 20%), transparent 60%), linear-gradient(135deg, var(--brand), var(--brand-deep));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--shadow);
}
.next-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.next-eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.next-when { font-size: .78rem; font-weight: 650; background: rgba(255,255,255,.14); border-radius: 999px; padding: 4px 10px; }
.next-main { display: flex; gap: 16px; align-items: center; border: 0; background: none; color: inherit; text-align: left; padding: 0; cursor: pointer; font: inherit; }
.next-main .date-tile { width: 64px; }
.next-main h2 { color: inherit; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.03em; }
.next-main p { font-size: .9rem; opacity: .85; }
.next-team { margin-top: 2px; }
.next-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.next-q { font-size: .85rem; font-weight: 650; opacity: .85; flex-basis: 100%; }
.next-rsvp {
  min-height: 44px; border-radius: 12px; padding: 0 16px; font: 700 .9rem var(--f-body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08); color: inherit; border: 1px solid rgba(255,255,255,.3); transition: background .15s;
}
.next-rsvp:hover { background: rgba(255,255,255,.16); }
.next-rsvp.on { background: #fff; color: var(--brand-deeper); border-color: #fff; }
.next-rsvp .icon { width: 16px; height: 16px; }
.next-rsvp.ghost { margin-left: auto; }

.results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.res-row { display: flex; align-items: center; gap: 12px; }
.res-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .9rem; }
.res-info .muted { font-size: .78rem; }
.score { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wdl { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: none; }
.wdl.won { background: color-mix(in oklab, var(--court) 13%, var(--surface)); color: var(--court); }
.wdl.lost { background: color-mix(in oklab, var(--danger) 11%, var(--surface)); color: var(--danger); }
.wdl.drawn, .wdl.tbc { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.score-row { display: flex; align-items: flex-end; gap: 12px; }
.score-row .field { flex: 1; }
.score-input { text-align: center; font: 700 1.6rem var(--f-display); }
.score-v { font-weight: 700; color: var(--muted); padding-bottom: 14px; }

/* ---------- add form: type and sharing ---------- */
.type-pick, .share-pick { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.type-pick legend, .share-pick legend { font-size: .82rem; font-weight: 650; padding: 0; margin-bottom: 8px; }
.type-pick label {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); font-weight: 650; font-size: .88rem; transition: background .15s, border-color .15s;
}
.type-pick label .icon { width: 16px; height: 16px; }
.type-pick input, .share-pick input { position: absolute; opacity: 0; pointer-events: none; }
.type-pick label:has(input:checked) { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.type-pick label:has(input:focus-visible), .share-pick label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.share-pick { flex-direction: column; }
.share-pick label { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 14px; cursor: pointer; }
.share-pick label::before { content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 2px; box-shadow: inset 0 0 0 2px var(--line-strong); transition: box-shadow .15s; }
.share-pick label > span { display: flex; flex-direction: column; gap: 2px; font-size: .86rem; }
.share-pick label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 14%, transparent); }
.share-pick label:has(input:checked)::before { box-shadow: inset 0 0 0 6px var(--brand); }

/* ---------- date and time picker ---------- */
.dp-pair { align-items: flex-start; }
.dp-row { display: flex; gap: 8px; align-items: stretch; }
.dp-trigger {
  flex: 1; min-width: 0; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 13px; background: var(--surface); color: var(--ink); font: inherit; transition: border-color .15s, box-shadow .15s;
}
.dp-trigger:hover { border-color: color-mix(in oklab, var(--line-strong) 60%, var(--muted)); }
.dp-trigger:focus-visible, .dp.open .dp-trigger { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 16%, transparent); }
.dp-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand-text); }
.dp-ico .icon { width: 17px; height: 17px; }
.dp-text { display: flex; flex-direction: column; min-width: 0; }
.dp-val { font-weight: 650; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-sub { font-size: .76rem; color: var(--muted); }
.dp.empty .dp-val { color: var(--muted); font-weight: 600; }
.dp-clear { align-self: center; }
.dp-pop { border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); box-shadow: var(--shadow); }
.dp-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-presets button, .dp-times button {
  min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 650 .8rem var(--f-body); cursor: pointer;
}
.dp-presets button:hover, .dp-times button:hover { background: var(--surface-2); }
.dp-month { display: flex; align-items: center; justify-content: space-between; }
.dp-nav { width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--surface-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.dp-nav .icon { width: 16px; height: 16px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; text-align: center; }
.dp-grid .dow { font-size: .7rem; font-weight: 700; color: var(--muted); padding: 2px 0 4px; }
.dp-grid button {
  min-height: 38px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--ink);
  font: 650 .86rem var(--f-body); cursor: pointer; font-variant-numeric: tabular-nums;
}
.dp-grid button:hover:not([disabled]) { background: var(--surface-2); }
.dp-grid button.today { border-color: var(--brand); color: var(--brand-text); }
.dp-grid button.sel { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.dp-grid button[disabled] { color: color-mix(in oklab, var(--muted) 50%, transparent); cursor: default; }
.dp-time { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.dp-label { font-size: .76rem; font-weight: 700; color: var(--muted); }
.dp-times { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dp-times button.sel { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.dp-other { width: auto; min-height: 36px; padding: 4px 10px; font-size: .8rem; border-radius: 999px; }
.dp-foot { display: flex; justify-content: flex-end; gap: 8px; }

/* sign in fallbacks: password option and admin made links */
.link-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; padding: 6px; color: var(--muted); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; border-radius: 10px; }
.link-btn:hover { color: var(--ink); background: var(--surface-2); }
.link-btn .icon { width: 16px; height: 16px; }
.link-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 13px; background: var(--surface-2); }
.link-box textarea { font-size: .84rem; resize: none; min-height: 0; word-break: break-all; }
.link-box .row { gap: 8px; flex-wrap: wrap; }

/* ---------- desktop top bar: search, light and dark, notifications, account ---------- */
.deskbar { display: none; }
@media (min-width: 900px) {
  .deskbar {
    position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 16px;
    padding: 14px 48px; min-height: 68px;
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
    border-bottom: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  }
  .main { padding-top: 30px; }
}
.desk-search {
  position: relative; display: flex; align-items: center; flex: 1; max-width: 440px; cursor: text;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.desk-search:focus-within { border-color: color-mix(in oklab, var(--brand) 55%, var(--line)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 14%, transparent); }
.desk-search > .icon { position: absolute; left: 15px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.desk-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 10px 44px 10px 42px; font-size: .92rem; color: var(--ink); }
.desk-search input::placeholder { color: var(--muted); }
.desk-search input::-webkit-search-cancel-button { display: none; }
.desk-search kbd {
  position: absolute; right: 10px; font: 600 .72rem/1 var(--f-body); color: var(--muted);
  padding: 4px 7px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface-2);
}
.desk-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.desk-btn {
  position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 0; background: none; color: var(--ink-2); cursor: pointer; transition: background .18s, color .18s;
}
.desk-btn:hover, .desk-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.desk-btn .icon { width: 21px; height: 21px; stroke-width: 1.8; }
.desk-div { width: 1px; height: 26px; background: var(--line-strong); margin: 0 8px; }
.desk-me {
  display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; transition: background .18s;
}
.desk-me:hover, .desk-me[aria-expanded="true"], .desk-me.active { background: var(--surface-2); }
.desk-me .avatar { width: 38px; height: 38px; font-size: .8rem; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in oklab, var(--brand) 45%, transparent); }
.desk-me-txt { display: flex; flex-direction: column; line-height: 1.2; }
.desk-me-txt strong { font-size: .9rem; font-weight: 650; }
.desk-me-txt small { font-size: .72rem; color: var(--muted); text-transform: capitalize; }
.desk-me .chev { width: 16px; height: 16px; color: var(--muted); transition: transform .2s var(--ease); }
.desk-me[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* the unread count on the bell, in the club's accent so it reads on both bars */
.bell { position: relative; }
.bell-badge {
  position: absolute; top: 5px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center; font: 800 .62rem/1 var(--f-body); letter-spacing: 0;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 2px var(--bg);
  animation: badgeIn .35s var(--ease);
}
.topbar .bell { border: 0; cursor: pointer; }
.topbar .bell-badge { top: -3px; right: -4px; box-shadow: 0 0 0 2px var(--brand-deep); }
@keyframes badgeIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- popovers ---------- */
.pop {
  position: fixed; z-index: 45; background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
  animation: popIn .18s var(--ease); transform-origin: top right;
}
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.notif-pop { width: min(400px, calc(100vw - 20px)); max-height: min(560px, calc(100vh - 100px)); display: flex; flex-direction: column; overflow: hidden; }
.pop-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.pop-head > div { flex: 1; min-width: 0; }
.nt-allread { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 7px 11px; border: 0; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); font: inherit; font-size: .78rem; font-weight: 650; cursor: pointer; white-space: nowrap; }
.nt-allread:hover { background: color-mix(in oklab, var(--brand) 16%, var(--surface)); }
.nt-allread .icon { width: 14px; height: 14px; }
.pop-head h2 { font-size: 1.08rem; }
.pop-head p { font-size: .8rem; margin-top: 2px; }
.pop-list { overflow-y: auto; padding: 6px 8px 10px; overscroll-behavior: contain; }
.pop-list .empty { padding: 34px 16px; }
.nt-more { display: block; width: calc(100% - 24px); margin: 6px 12px 10px; padding: 10px; border: 0; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer; }
.nt-more:hover { background: color-mix(in oklab, var(--brand) 16%, var(--surface)); }
.nt-clear { padding: 18px 16px 6px; }
.nt-group { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 6px; }
.nt {
  position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 11px 30px 11px 12px;
  border: 0; background: none; color: inherit; text-align: left; border-radius: 14px; cursor: pointer; transition: background .15s;
}
.nt:hover { background: var(--surface-2); }
.nt.unread { background: var(--brand-soft); }
.nt.unread:hover { background: color-mix(in oklab, var(--brand) 14%, var(--surface)); }
.nt-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--surface-2); color: var(--brand-text); box-shadow: inset 0 0 0 1px var(--line); }
.nt-ico .icon { width: 18px; height: 18px; }
.nt-selected .nt-ico { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.nt-reports .nt-ico { color: var(--danger); }
.nt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nt-line { font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.nt-line strong { color: var(--ink); font-weight: 650; }
.nt-sub { font-size: .84rem; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-when { color: var(--muted); font-weight: 400; }
.nt-meta { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.nt-tag { font-size: .68rem; padding: 1px 8px; }
.nt-dot { position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 20%, transparent); }

.me-pop { width: 270px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.me-pop-head { display: flex; align-items: center; gap: 11px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.me-pop-head div { min-width: 0; display: flex; flex-direction: column; }
.me-pop-head strong { font-size: .92rem; }
.me-pop-head small { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-pop-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; font-size: .9rem; font-weight: 500;
  text-decoration: none; color: var(--ink); border: 0; background: none; cursor: pointer; text-align: left; width: 100%;
}
.me-pop-link:hover { background: var(--surface-2); }
.me-pop-link .icon { width: 18px; height: 18px; color: var(--muted); }
.me-pop-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 10px; margin: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .86rem; color: var(--ink-2); }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { display: grid; place-items: center; width: 32px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.seg button .icon { width: 16px; height: 16px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }

/* gentle cross fade when switching light and dark */
.theme-shift, .theme-shift *, .theme-shift *::before, .theme-shift *::after { transition: background-color .3s ease, border-color .3s ease, color .3s ease !important; }
@media (prefers-reduced-motion: reduce) { .pop, .bell-badge { animation: none; } }

/* Club admin sits in its own section at the foot of the sidebar, away from everyday navigation */
.side-admin { padding-top: 14px; margin-bottom: 4px; border-top: 1px solid rgba(255,255,255,.08); }
.side-admin .side-label { padding-bottom: 6px; }

/* breadcrumb above a space: Spaces / Teams / Men's A Team */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .84rem; color: var(--muted); margin-bottom: -14px; }
.crumbs a { color: var(--brand-text); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-2); font-weight: 600; }

/* cancelled events stay in the diary, greyed out with the reason */
.event.cancelled { opacity: .72; }
.event.cancelled h3 { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--muted); }
.event.cancelled .date-tile { filter: grayscale(1); }
.cancel-chip { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 30%, transparent); }
.cancel-chip .icon { width: 13px; height: 13px; }
.cancel-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in oklab, var(--danger) 10%, var(--surface)); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger) 25%, transparent); }
.cancel-banner > div { flex: 1; display: flex; flex-direction: column; }
.cancel-banner span { color: var(--ink-2); font-size: .9rem; }
.cancel-banner .btn { color: var(--ink); }
.cancel-dates { display: flex; flex-direction: column; gap: 6px; }
[data-reason].on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* who else is going, on the home page's next event */
.hero-going { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .8rem; font-weight: 500; opacity: .9; }
.hero-going .avatars .avatar { box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-deep) 70%, #fff 0%); }

/* the picked team on the Next match card */
.next-squad { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.next-squad-label { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.next-squad-list { display: flex; flex-wrap: wrap; gap: 8px; }
.next-player { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px; font-size: .86rem; font-weight: 600; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.next-player .avatar { box-shadow: 0 0 0 1.5px rgba(255,255,255,.35); }
.next-player.me { background: var(--accent); color: var(--accent-ink); box-shadow: none; }

/* "Edited 5m ago" next to a post's time */
.post-meta .edited { font-size: .74rem; color: var(--muted); font-style: italic; }
.post-meta .edited::before { content: "·"; margin-right: 6px; font-style: normal; }

/* the number in the home headline, on a shaded tennis ball */
.hero-num {
  position: relative; top: -.06em; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin: -.35em .12em -.35em 0;
  vertical-align: middle; filter: drop-shadow(0 .12em .14em rgba(0,0,0,.28));
}
.hero-num svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-num-n {
  position: relative; top: -.02em; font-size: .7em; font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: var(--brand-deeper); -webkit-text-fill-color: var(--brand-deeper); background: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

/* "A new version is ready" bar, floating above the content */
.update-bar {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); top: calc(12px + var(--sat));
  width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px;
  border-radius: 16px; background: var(--brand-deeper); color: #fff; box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.1);
  animation: barIn .3s var(--ease);
}
.update-bar > .icon { color: var(--accent); flex: none; }
.update-bar span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.update-bar strong { font-size: .9rem; }
.update-bar small { font-size: .78rem; opacity: .75; }
.update-bar .btn { background: var(--accent); color: var(--accent-ink); border-color: transparent; flex: none; }
.update-bar .icon-btn { color: #fff; opacity: .7; }
.update-bar .icon-btn:hover { background: rgba(255,255,255,.1); opacity: 1; }
@keyframes barIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (min-width: 900px) { .update-bar { top: auto; bottom: 24px; left: calc(50% + var(--sidebar) / 2); } }

/* weather: a line on the home page, and the forecast for an event's start */
.hero-weather { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: .86rem; opacity: .92; }
.hero-weather .icon { width: 18px; height: 18px; }
.hero-weather strong { font-size: 1rem; font-weight: 750; }
.hero-weather span { display: inline-flex; align-items: center; gap: 5px; }
.hero-weather .dot { opacity: .5; }
.hero-weather span .icon { width: 15px; height: 15px; }
.next-wx { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .84rem; opacity: .85; }
.next-wx .icon { width: 16px; height: 16px; }
.wx-row .icon { color: var(--brand-text); }
.wx-credit { font-size: .72rem; color: var(--muted); text-decoration: none; opacity: .8; }

/* group permissions */
.perm-chip { background: var(--brand-soft); color: var(--brand-text); border-color: color-mix(in oklab, var(--brand) 22%, transparent); }
.perm-chip .icon { width: 13px; height: 13px; }
.perm-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.perm-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--surface); color: var(--brand-text); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.perm-ico .icon { width: 18px; height: 18px; }
.perm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.perm-text .muted { font-size: .8rem; line-height: 1.4; }
.switch { width: 42px; height: 24px; appearance: none; background: var(--line-strong); border-radius: 999px; position: relative; cursor: pointer; transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch:checked { background: var(--court); }
.switch:checked::after { transform: translateX(18px); }
#club-settings .toggle { align-items: flex-start; }
#club-settings .toggle input { margin-top: 2px; }
.checks label.locked { opacity: .55; cursor: not-allowed; }
.checks label .icon { width: 13px; height: 13px; color: var(--brand-text); }
.pending-chip { background: color-mix(in oklab, var(--warn) 14%, var(--surface)); color: var(--warn); border-color: color-mix(in oklab, var(--warn) 30%, transparent); }
.pending-chip .icon { width: 13px; height: 13px; }

/* Create menu and the space picker */
.desk-create { margin-right: 6px; border-radius: 999px; }
.create-pop { width: 290px; }
.create-item span { display: flex; flex-direction: column; line-height: 1.3; }
.create-item small { color: var(--muted); font-size: .76rem; font-weight: 500; }
.space-pick { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.space-pick button { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.space-pick button:hover { background: var(--surface-2); }
.space-pick button > .icon { width: 20px; height: 20px; color: var(--brand-text); flex: none; }
.space-pick span { display: flex; flex-direction: column; min-width: 0; }
.space-pick small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* League table from MyDivision on a team page */
.lg-wrap { overflow-x: auto; margin: 0 -4px; }
.lg-table { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
.lg-table th { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 4px 6px 8px; }
.lg-table td { text-align: center; padding: 7px 6px; border-top: 1px solid var(--line); }
.lg-table .tm { text-align: left; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.lg-table .pos { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 999px; font-weight: 700; color: var(--muted); }
.lg-table tr.us td { background: color-mix(in oklab, var(--brand) 9%, var(--surface)); font-weight: 700; color: var(--ink); border-top-color: transparent; }
.lg-table tr.us + tr td { border-top-color: transparent; }
.lg-table tr.us td:first-child { border-radius: 12px 0 0 12px; }
.lg-table tr.us td:last-child { border-radius: 0 12px 12px 0; }
.lg-table tr.us .pos { background: var(--brand); color: #fff; }
.lg-results li { display: flex; align-items: center; gap: 12px; }
.lg-res { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .88rem; }
.lg-res small { color: var(--muted); font-size: .76rem; }
.lg-next { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-2); }
.lg-next .icon { width: 16px; height: 16px; color: var(--brand-text); }
.lg-foot { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); text-decoration: none; }
.lg-foot .icon { width: 13px; height: 13px; }
.lg-foot:hover { color: var(--brand-text); }
.league-card { container-type: inline-size; }
@container (max-width: 330px) { .lg-table .wdlc { display: none; } .lg-table .tm { max-width: 150px; } }

/* lift sharing on away matches */
.lifts { display: flex; flex-direction: column; gap: 10px; }
.lift-list { display: flex; flex-direction: column; gap: 8px; }
.lift { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.lift.mine { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--brand) 45%, transparent); }
.lift-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--surface); color: var(--brand-text); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.lift.need .lift-ico { color: var(--warn); }
.lift-ico .icon { width: 19px; height: 19px; }
.lift-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.lift-body small { color: var(--muted); font-size: .8rem; }
.lift-riders { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lift-form { padding: 12px; border-radius: 14px; background: var(--surface-2); }
.lg-next small { color: var(--muted); }

/* free courts from ClubSpark */
.courts-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.courts-card .sh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seg-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.seg-tabs button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: 650 .8rem var(--f-body); color: var(--muted); cursor: pointer; }
.seg-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
.court-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.court-row > strong { width: 72px; font-size: .9rem; }
.court-slots { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.slot { padding: 5px 11px; border-radius: 999px; font-size: .82rem; font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums;
  color: var(--court); background: color-mix(in oklab, var(--court) 11%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 25%, transparent); }
.slot:hover { background: color-mix(in oklab, var(--court) 18%, var(--surface)); }
.courts-hint { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; }
.courts-hint > .icon { color: var(--brand-text); }
.courts-hint span { display: flex; flex-direction: column; gap: 2px; }
.courts-hint small { color: var(--muted); }

/* Home or Away pill beside the opponent on the Next match card */
.ha-pill { display: inline-flex; align-items: center; vertical-align: .32em; margin-left: 12px; padding: 4px 11px; border-radius: 999px;
  font: 800 .7rem var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.ha-pill.home { background: #fff; color: var(--brand-deeper); }
.ha-pill.away { background: var(--accent); color: var(--accent-ink); }
.next-rsvp.cal { text-decoration: none; }
.next-rsvp.cal + .next-rsvp.ghost { margin-left: 0; }
@media (max-width: 600px) { .next-rsvp.cal span { display: none; } }

.wx-credit a { color: inherit; }

/* ---------- rich posts: bold, bullets, subheadings ---------- */
.post-body.rich { white-space: normal; line-height: 1.62; }
.post-body.rich > * + * { margin-top: .6em; }
.post-body.rich p { margin: 0; }
.post-body.rich strong { color: var(--ink); font-weight: 680; }
.post-body.rich h4 { font: 700 .98rem/1.3 var(--f-display); letter-spacing: -.012em; color: var(--ink); margin: .95em 0 0; }
.post-body.rich > h4:first-child { margin-top: 0; }
.post-body.rich ul { margin: .5em 0 0; padding: 0; list-style: none; display: grid; gap: .3em; }
.post-body.rich li { position: relative; padding-left: 1.15em; }
.post-body.rich li::before { content: ""; position: absolute; left: .2em; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 22%, transparent); }
.post-body.folded { max-height: 9.6em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.read-more { align-self: flex-start; margin-top: -4px; padding: 4px 0; border: 0; background: none; cursor: pointer; font: 650 .85rem var(--f-display); color: var(--brand-text); display: inline-flex; align-items: center; gap: 6px; }
.read-more::after { content: ""; width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.post-body:not(.folded) + .read-more::after { transform: translateY(1px) rotate(-135deg); }
.read-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the formatting toolbar sits flush on top of the message box */
.rich-field { display: flex; flex-direction: column; }
.fmt-bar { display: flex; align-items: center; gap: 2px; padding: 5px; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--surface-2); }
.fmt-bar button { width: 36px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; font: 750 .95rem var(--f-display); transition: background .12s, color .12s; }
.fmt-bar button:hover { background: var(--surface); color: var(--ink); }
.fmt-bar button[aria-pressed="true"] { background: var(--surface); color: var(--brand-text); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-strong); }
.fmt-bar button svg { width: 18px; height: 18px; fill: currentColor; }
.rich-edit { position: relative; border-top-left-radius: 0; border-top-right-radius: 0; min-height: 180px; max-height: 50vh; overflow-y: auto; height: auto; padding: 12px 14px; cursor: text; font-size: .95rem; color: var(--ink); }
.rich-edit:focus { outline: none; }
.rich-edit.is-empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; position: absolute; left: 14px; top: 12px; }
.rich-edit > div + div, .rich-edit > div + ul, .rich-edit > ul + div { margin-top: 0; }
/* ---------- premium polish: noticeboard and diary ---------- */
.post { padding: 22px 24px 22px; gap: 11px; border-color: color-mix(in oklab, var(--line) 80%, transparent);
  box-shadow: 0 1px 1px rgba(18, 26, 22, .03), 0 8px 24px -16px rgba(18, 26, 22, .12); }
.post h3 { font-size: 1.12rem; letter-spacing: -.02em; }
.post-body { line-height: 1.62; }
.post-meta { font-size: .8rem; }
.post-meta .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
@media (hover: hover) {
  .post .post-tools .icon-btn { opacity: .45; transition: opacity .15s, background .15s; }
  .post:hover .post-tools .icon-btn, .post .post-tools .icon-btn:focus-visible { opacity: 1; }
}
.post.pinned { border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }

.event { gap: 16px; padding: 13px 16px 13px 13px; border-color: color-mix(in oklab, var(--line) 80%, transparent);
  box-shadow: 0 1px 1px rgba(18, 26, 22, .03), 0 8px 24px -18px rgba(18, 26, 22, .12); }
.event-info { gap: 5px; }
.event-info h3 { font-size: 1.04rem; }
.date-tile { position: relative; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.04), 0 6px 14px -10px rgba(18, 26, 22, .25); }
.date-tile:not(.glass)::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--brand); opacity: .85; }
.date-tile .mon { padding-top: 9px; }
.event-sub { row-gap: 4px; align-items: center; }
.event-sub .repeat-mark { color: var(--muted); }
.event-sub .repeat-mark .icon { width: 14px; height: 14px; }
/* no stray separator dots when the details wrap onto a second line */
.event-sub { column-gap: 12px; }
.event-sub span + span::before { content: none; }

/* ---------- add to calendar ---------- */
.cal-list { display: grid; gap: 8px; margin-top: 4px; }
.cal-app { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .2s, transform .15s; }
.cal-app:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.cal-app > span:not(.cal-logo) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-app strong { font: 650 .95rem var(--f-display); }
.cal-app small { font-size: .8rem; color: var(--muted); }
.cal-app > .icon { width: 16px; height: 16px; color: var(--muted); }
.cal-logo { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; font: 800 1.05rem var(--f-display); color: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.cal-logo .icon { width: 20px; height: 20px; }
.cal-logo.apple { background: linear-gradient(180deg, #3a3a3c, #111); }
.cal-logo.google { background: #fff; color: #1a73e8; box-shadow: inset 0 0 0 1px var(--line-strong); }
.cal-logo.outlook { background: linear-gradient(135deg, #1490df, #0a5fb4); }
.cal-logo.office { background: linear-gradient(135deg, #0f6cbd, #063f72); }
.cal-sync-cta { margin-top: 14px; width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; border-radius: 14px; cursor: pointer; color: #fff;
  border: 0; background: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand) 60%, #000)); box-shadow: var(--shadow); }
.cal-sync-cta > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cal-sync-cta strong { font: 700 .98rem var(--f-display); }
.cal-sync-cta small { font-size: .8rem; opacity: .85; }
.cal-sync-cta > .icon:first-child { width: 22px; height: 22px; color: var(--accent); }
.cal-sync-cta > .icon:last-child { transform: rotate(-90deg); opacity: .8; }
.linkish { border: 0; background: none; padding: 0; color: var(--brand-text); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---------- undo toast ---------- */
.toast.with-action { display: flex; align-items: center; gap: 14px; padding-right: 8px; }
.toast.with-action button { border: 0; border-radius: 8px; padding: 6px 12px; cursor: pointer; font: 750 .85rem var(--f-display); background: var(--accent); color: #1a1a1a; }

/* ---------- audit log ---------- */
.audit-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; }
.audit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 6px 12px; font: 600 .8rem var(--f-display); cursor: pointer; }
.chip-btn:hover { border-color: var(--muted); }
.chip-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
#audit-q { min-width: 0; width: min(300px, 100%); }
.audit-card { padding: 4px 0; overflow: hidden; }
.audit-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.audit-row:last-child { border-bottom: 0; }
.audit-row time { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.audit-row > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.audit-row > span > span { min-width: 0; overflow-wrap: anywhere; }
.audit-row em { font-style: normal; color: var(--ink-2); }
.audit-more { margin: 10px 18px 14px; }
@media (max-width: 560px) { .audit-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 14px; } }

/* ---------- recently deleted ---------- */
.trash-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.trash-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.trash-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.trash-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-left { color: var(--warn); font-weight: 600; }
.trash-actions { display: flex; gap: 6px; flex: none; }
@media (max-width: 560px) { .trash-row { flex-wrap: wrap; } .trash-actions { width: 100%; justify-content: flex-end; } }

/* ---------- privacy notice ---------- */
.privacy { display: flex; flex-direction: column; gap: 10px; color: var(--ink-2); line-height: 1.6; font-size: .95rem; max-width: 70ch; }
.privacy .lede { font-size: 1.02rem; color: var(--ink); }
.privacy h3 { margin-top: 12px; font-size: 1.02rem; }
.privacy ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.privacy a { color: var(--brand-text); }
.public-page { max-width: 820px; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.public-page .card { width: 100%; }
.reset-row.warn { background: color-mix(in oklab, var(--warn) 12%, var(--surface)); color: var(--ink-2); }
.reset-row.warn .icon { color: var(--warn); }

/* ---------- reactions ---------- */
.reacts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.reacts.sm { margin-top: 6px; gap: 4px; }
.react { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font: 650 .8rem var(--f-display); transition: transform .12s, background .15s, border-color .15s; }
.react:hover { border-color: var(--line-strong); }
.react:active { transform: scale(.94); }
.react .e { font-size: 1rem; line-height: 1; }
.react.mine { background: color-mix(in oklab, var(--brand) 12%, var(--surface)); border-color: color-mix(in oklab, var(--brand) 45%, var(--line)); color: var(--brand-text); }
.react.add { color: var(--muted); background: transparent; border-style: dashed; }
.react.add .icon { width: 17px; height: 17px; }
.reacts.sm .react { height: 26px; padding: 0 8px; font-size: .75rem; }
.reacts.sm .react .e { font-size: .9rem; }
.reacts.sm .react.add .n { display: none; }
@media (hover: hover) { .reacts.sm .react.add { opacity: 0; } .reply:hover .reacts.sm .react.add, .reacts.sm .react.add:focus-visible { opacity: 1; } }
.react-pop { position: absolute; z-index: 95; display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: rise .18s var(--ease); }
.react-pop button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 1.35rem; cursor: pointer; transition: transform .12s, background .12s; }
.react-pop button:hover { background: var(--surface-2); transform: scale(1.18); }

/* ---------- the club app: install banner, notification settings, mute ---------- */
.app-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 18px;
  background: linear-gradient(120deg, color-mix(in oklab, var(--brand) 10%, var(--surface)), var(--surface) 70%); border-color: color-mix(in oklab, var(--brand) 25%, var(--line)); }
.app-banner img { width: 48px; height: 48px; border-radius: 12px; flex: none; box-shadow: var(--shadow-sm); }
.app-banner > div:not(.app-banner-actions) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-banner strong { font: 700 .98rem var(--f-display); }
.app-banner small { color: var(--muted); font-size: .84rem; }
.app-banner-actions { display: flex; align-items: center; gap: 4px; flex: none; }
@media (max-width: 520px) { .app-banner { flex-wrap: wrap; } .app-banner-actions { width: 100%; justify-content: flex-end; } }
.install-steps { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 12px; }
.install-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; }
.install-steps .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--brand); color: #fff; font: 700 .8rem var(--f-display); }
.install-steps .icon { width: 18px; height: 18px; vertical-align: -3px; color: var(--brand-text); }
.checks.col { flex-direction: column; align-items: flex-start; gap: 8px; }
.space-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.btn.ghost-on .icon { color: var(--brand-text); }
.pref-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; font-size: .92rem; cursor: pointer; }
.pref-row + .pref-row { border-top: 1px solid var(--line); }
/* Notification groups: a switch for the whole group above its own list (Private messages, About you, Club news). */
.notify-prefs { display: flex; flex-direction: column; gap: 14px; }
.pref-group { display: flex; flex-direction: column; gap: 6px; }
.pref-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 2px 15px 2px 4px; cursor: pointer; }
.pref-head strong { display: block; font: 700 .95rem var(--f-display); }
.pref-head small { display: block; margin-top: 2px; font-size: .78rem; color: var(--muted); }
.pref-group.all-off .pref-list { opacity: .6; }
.pref-head > span:first-child { flex: 1; min-width: 0; }
.pref-state { flex: none; font: 650 .72rem var(--f-display); color: var(--muted); white-space: nowrap; }
.switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; flex: none; transition: background .2s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(18px); }
.switch:indeterminate { background: color-mix(in oklab, var(--brand) 50%, var(--line-strong)); }
.switch:indeterminate::after { transform: translateX(9px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.react-pop button.on { background: color-mix(in oklab, var(--brand) 16%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--brand) 45%, transparent); }

/* ---------- event chat ---------- */
.ev-chat { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.ev-chat .eyebrow .icon { width: 14px; height: 14px; }
.ev-chat .chat-list { margin-top: 0; padding-top: 0; border-top: 0; }
/* Match page: the venue on a map, under the hero */
.ev-venue { border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.evm-map { position: relative; height: 210px; background: color-mix(in oklab, var(--brand) 8%, var(--surface-2)); cursor: pointer; display: grid; place-items: center; }
.evm-map .leaflet-control-zoom { display: none; }
.evm-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.evm-bar > .icon { flex: none; width: 20px; height: 20px; color: var(--brand-text); }
.evm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.evm-txt strong { font: 700 .95rem var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evm-txt small { font-size: .8rem; color: var(--muted); }
.evm-bar .btn { flex: none; }
.ev-venue.nomap .evm-bar { border-top: 0; }
@media (max-width: 600px) { .evm-map { height: 170px; } }

/* ---------- match and event page body: main column and a side column ---------- */
.event-page.laid-out { max-width: 1040px; gap: 0; }
.ev-cols { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.ev-main, .ev-side { display: contents; }
.ev-main > .ev-rsvp { order: 1; } .ev-main > .cancel-banner, .ev-main > .day-banner { order: 0; }
.ev-main > .team-box { order: 2; } .ev-side > .detail-list { order: 3; } .ev-main > .ev-going { order: 4; }
.ev-main > .call-box { order: 5; } .ev-main > .md-panel { order: 6; } .ev-side > .travel-box { order: 7; } .ev-side > .lifts { order: 8; } .ev-main > .ev-chat { order: 9; }
@media (min-width: 980px) {
  .ev-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
  .ev-main, .ev-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .ev-side { position: sticky; top: 20px; }
}
.laid-out .sheet-actions { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.laid-out .detail-list { display: flex; flex-direction: column; gap: 12px; }
.laid-out .detail-list > div:not(.ev-venue) { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: .9rem; }

/* Can you play? as its own clear card */
.laid-out .ev-rsvp { padding: 16px; border-radius: 18px; background: linear-gradient(135deg, var(--brand-soft), var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 18%, var(--line)); }
.laid-out .ev-rsvp .eyebrow { font-size: .78rem; }
.laid-out .ev-rsvp .rsvp { background: var(--surface); }

/* The team, in pairs */
.ts-squad { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ts-squad .ts-p { padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.ts-squad .ts-p > .ts-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
/* Your own place: white card, solid club ring and a filled tick, so it stands out on the tinted team card */
.ts-squad .ts-p.me { background: var(--surface); box-shadow: inset 0 0 0 2px var(--brand), 0 4px 14px -6px color-mix(in oklab, var(--brand) 55%, transparent); }
.ts-p .ts-av { position: relative; flex: none; display: inline-flex; }
.ts-p .ts-tick { position: absolute; right: -4px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); box-shadow: 0 0 0 2px var(--surface); }
.ts-p .ts-tick .icon { width: 10px; height: 10px; stroke-width: 3.5; color: var(--brand-ink); }
.ts-squad .ts-p.open { background: transparent; box-shadow: inset 0 0 0 1px var(--line); border: 0; }
.ts-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-p { display: flex; align-items: center; gap: 9px; font: 600 .9rem var(--f-body); }
.ts-p.me .ts-name::after { content: " (you)"; color: var(--muted); font-weight: 500; }
.ts-p.open { color: var(--muted); font-weight: 500; }
.ts-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px dashed var(--line-strong); flex: none; }

/* Chat on the match: tight bubbles */
.ev-chat .reply > div { padding: 8px 12px 8px; }
.ev-chat .reply .post-body { margin: 2px 0 0; }
.ev-chat .reply .react-bar:empty, .ev-chat .reply .reacts:empty { display: none; }
/* With no reactions yet, the hidden React button no longer leaves a gap under each message: it appears in the corner on hover. */
@media (hover: hover) {
  .reply > div { position: relative; }
  .reply .reacts.sm:has(> .react.add:only-child) { position: absolute; right: 44px; top: 5px; margin: 0; }
}
.detail-list > .ev-venue { display: block; padding: 0; gap: 0; }
.ev-venue .evm-bar { display: flex; }
.ev-venue .evm-map { width: 100%; }
.ev-venue .evm-bar { flex-wrap: wrap; }
.ev-venue .evm-txt { flex: 1 1 160px; }
.ev-venue .evm-txt strong { white-space: normal; }
.ev-venue .evm-bar [data-navigate] .icon { color: inherit; }
.chat-empty { font-size: .9rem; }
.event-sub .chat-mark { color: var(--muted); }
.event-sub .chat-mark .icon { width: 13px; height: 13px; }

/* ---------- post page, team messages ---------- */
.post.linked { cursor: pointer; }
.post.linked:hover h3 { color: var(--brand-text); }
.team-chip { background: color-mix(in oklab, var(--accent) 22%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, var(--line)); color: var(--ink); }
.team-chip .icon { width: 13px; height: 13px; }
.post-page { max-width: 760px; }
.send-to { display: flex; flex-direction: column; align-items: stretch; }
.send-to label { justify-content: flex-start; }
.send-to-hint { margin-top: -6px; }
.courts-hint .icon-btn { margin-left: auto; flex: none; }

/* ---------- next four hours in the hero ---------- */
.hero-hours { display: flex; gap: 6px; }
.hero-hours .hh { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px; padding: 8px 6px 7px; border-radius: 14px;
  background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter: blur(6px); color: #fff; }
.hero-hours .hh-t { font-size: .68rem; font-weight: 700; letter-spacing: .04em; opacity: .75; font-variant-numeric: tabular-nums; }
.hero-hours .icon { width: 22px; height: 22px; color: var(--accent); }
.hero-hours strong { font: 750 .95rem var(--f-display); }
.hero-hours .hh-r { font-size: .64rem; font-weight: 700; color: #bfe3ff; }
.hero-hours .hh-r.dry { color: rgba(255,255,255,.55); font-weight: 600; }
/* The hours sit in the top corner only when the hero itself is wide enough for them beside the
   headline (measured on the hero, not the screen), so iPads and narrow desktop windows never overlap. */
.hero:has(.hero-corner) { container-type: inline-size; }
@container (min-width: 860px) {
  .hero-corner { position: absolute; top: 26px; right: 28px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
}
@media (min-width: 900px) { .hero:has(.hero-hours) > .ball { display: none; } }
@media (max-width: 899px) { .hero-hours { justify-content: flex-start; } .hero-hours .hh { flex: 1; min-width: 0; } }
@media (max-width: 899px) { .hero-hours .hh { padding: 6px 4px; gap: 1px; border-radius: 12px; } .hero-hours .icon { width: 18px; height: 18px; } .hero-hours strong { font-size: .88rem; } }

/* ---------- getting there and the match map ---------- */
.travel-box { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.travel-box .eyebrow .icon { width: 14px; height: 14px; }
.travel-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.travel-facts > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.travel-facts strong { font: 750 1.15rem var(--f-display); letter-spacing: -.02em; }
.travel-facts span { font-size: .78rem; color: var(--muted); }
.travel-facts .leave { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, var(--line)); }
.travel-map { height: 190px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface-2); }
.map-layout { display: grid; gap: 14px; }
@media (min-width: 900px) { .map-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.venues-map { height: min(68vh, 560px); overflow: hidden; padding: 0; }
.venue-list { display: flex; flex-direction: column; gap: 6px; }
.venue-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.venue-row:hover { border-color: var(--line-strong); }
.venue-row > div { display: flex; flex-direction: column; min-width: 0; }
.venue-row small { color: var(--muted); font-size: .78rem; }
.venue-row .vn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--brand); color: #fff; font: 750 .8rem var(--f-display); }
.venue-row .vn.past { background: var(--line-strong); color: var(--ink-2); }
.venue-row.club { cursor: default; background: color-mix(in oklab, var(--accent) 12%, var(--surface)); }
.venue-row.club .vn { background: none; }
.venue-row.club .vn svg { width: 30px; height: 30px; }
.map-pin { background: none; border: 0; }
.map-pin span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--brand); color: #fff; font: 750 .72rem var(--f-display); box-shadow: 0 2px 6px rgba(0,0,0,.28); border: 2px solid #fff; }
.map-pin span > * { transform: rotate(45deg); }
.map-pin.past span { background: #8c948f; }
.map-pin.club span { width: 30px; height: 30px; border-radius: 50%; transform: none; background: #fff; border: 2px solid var(--brand); padding: 2px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.map-pin.club span svg { width: 100%; height: 100%; }
.leaflet-container { font: inherit; }
/* Maps keep their own layers to themselves, so the sticky header and bottom bar always stay on top when scrolling. */
.leaflet-container { isolation: isolate; z-index: 0; background: color-mix(in oklab, var(--brand) 6%, var(--surface-2)); }
/* Calmer controls, popups and credit line on every map */
.leaflet-bar { border: 0 !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.14) !important; }
.leaflet-bar a { width: 34px !important; height: 34px !important; line-height: 34px !important; background: var(--surface) !important; color: var(--ink) !important; border-bottom: 1px solid var(--line) !important; font: 600 1.1rem var(--f-display) !important; }
.leaflet-bar a:last-child { border-bottom: 0 !important; }
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.18); background: var(--surface); color: var(--ink); }
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-content { margin: 12px 16px; font-size: .88rem; line-height: 1.45; }
.leaflet-control-attribution { font-size: 9.5px; line-height: 1.4; padding: 1px 6px !important; margin: 0 6px 6px 0 !important; border-radius: 6px; background: color-mix(in oklab, var(--surface) 82%, transparent) !important; color: var(--muted); max-width: calc(100% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaflet-control-attribution a { color: var(--muted); text-decoration: none; }
/* After a few seconds the credit tucks into a small (i) in the corner; tap it to read it again. */
.leaflet-control-attribution { transition: max-width .3s ease, opacity .3s ease; }
.leaflet-container:not(.credit-open) .leaflet-control-attribution { max-width: 22px !important; width: 22px; min-width: 22px; height: 22px; box-sizing: border-box; overflow: hidden; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; color: transparent; cursor: pointer; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.leaflet-container:not(.credit-open) .leaflet-control-attribution::before { content: "i"; font: 700 12px/1 Georgia, serif; font-style: italic; color: var(--ink-2, var(--muted)); }
.leaflet-container:not(.credit-open) .leaflet-control-attribution > * { display: none; }
/* The plain fallback tiles are toned down to match the calm map style */
.leaflet-tile-pane .leaflet-tile { filter: saturate(.55) brightness(1.03) contrast(.95); }
:root[data-theme="dark"] .leaflet-tile-pane .leaflet-tile { filter: grayscale(.6) invert(.92) hue-rotate(180deg) brightness(.9) contrast(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane .leaflet-tile { filter: grayscale(.6) invert(.92) hue-rotate(180deg) brightness(.9) contrast(.9); } }
/* A soft inner edge so map cards sit neatly in the page */
.evm-map, .venue-pop-map, .travel-map, .venues-map { box-shadow: inset 0 0 0 1px var(--line); }
.leaflet-popup-content a { color: var(--brand-text); }
.talk-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 2px 0; margin-top: 2px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink-2); font: inherit; font-size: .85rem; cursor: pointer; text-align: left; }
.talk-row > span:not(.avatars) { flex: 1; }
.talk-row strong { color: var(--brand-text); font-weight: 700; }
.talk-row .avatars { display: flex; }
.talk-row .avatars .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.talk-row .avatars .avatar:first-child { margin-left: 0; }
.talk-row > .icon { width: 16px; height: 16px; color: var(--muted); }
.talk-row > .icon:first-child { color: var(--brand-text); }
.talk-row:hover strong, .talk-row:hover span { color: var(--brand-text); }

.hero-clock { margin: 0; font-size: .82rem; font-weight: 650; letter-spacing: .02em; color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .hero-corner { display: flex; flex-direction: column; gap: 8px; } }

/* ---------- agendas and minutes ---------- */
@media (min-width: 700px) { .sheet.wide { width: min(860px, calc(100vw - 48px)); max-width: none; } }
.papers-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.papers-head .muted { font-size: .86rem; }
.meeting { display: flex; gap: 16px; align-items: center; padding: 14px 16px; }
.meeting-date { width: 58px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 14px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: inset 0 0 0 1px var(--line); }
.meeting-date .mon { font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-text); }
.meeting-date .day { font: 750 1.4rem/1.1 var(--f-display); }
.meeting-date .yr { font-size: .64rem; color: var(--muted); }
.meeting-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.meeting-papers { display: flex; flex-wrap: wrap; gap: 6px; }
.paper-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 650 .84rem var(--f-display); }
.paper-chip:hover { border-color: var(--brand); color: var(--brand-text); }
.paper-chip .icon { width: 15px; height: 15px; color: var(--brand-text); }
.paper-chip.minutes { background: color-mix(in oklab, var(--brand) 8%, var(--surface)); }
.paper-chip .n { font-size: .72rem; color: var(--muted); font-weight: 600; padding-left: 4px; border-left: 1px solid var(--line-strong); }
.paper-attend, .paper-actions { display: flex; flex-direction: column; gap: 8px; }
.paper-actions { padding: 14px 16px; border-radius: 16px; background: color-mix(in oklab, var(--accent) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, var(--line)); }
.paper-actions ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.paper-actions li { display: grid; grid-template-columns: minmax(70px, max-content) 1fr; gap: 12px; font-size: .9rem; }
.paper-actions li strong { color: var(--brand-text); }
.paper-actions .eyebrow .icon, .paper-attend .eyebrow .icon { width: 14px; height: 14px; }
.paper-body { max-height: none; padding-top: 6px; border-top: 1px solid var(--line); }
.paper-import { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.paper-import > label:first-child { font-size: .84rem; font-weight: 650; }
#pp-body.rich-edit { min-height: 320px; max-height: 55vh; }
@media (max-width: 560px) { .paper-actions li { grid-template-columns: 1fr; gap: 0; } }

/* ---------- show password, saving spinner, fixtures filter ---------- */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 48px; width: 100%; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.pw-eye:hover { background: var(--surface-2); color: var(--ink); }
.pw-check { transition: color .15s; }
.pw-check.ok { color: var(--court); font-weight: 600; }
.btn.busy { opacity: .85; cursor: progress; }
.spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ev-filter { margin-bottom: 4px; }
.chip-btn .n { opacity: .7; font-weight: 600; margin-left: 2px; }

/* ---------- match day panel ---------- */
.md-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: color-mix(in oklab, var(--brand) 7%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 25%, var(--line)); }
.md-panel:empty { display: none; }
.md-panel .eyebrow .icon { width: 14px; height: 14px; }
.md-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-sum { font-size: .78rem; color: var(--muted); font-weight: 600; }
.md-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.md-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 700 .86rem var(--f-display); cursor: pointer; transition: transform .1s, border-color .15s, background .15s; }
.md-btn span { font-size: 1.4rem; line-height: 1; }
.md-btn:active { transform: scale(.96); }
.md-btn.on { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 14%, var(--surface)); color: var(--brand-text); }
.md-late { display: flex; flex-wrap: wrap; gap: 6px; }
.md-share { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.md-share span { display: flex; flex-direction: column; gap: 2px; }
.md-share small { font-size: .76rem; color: var(--muted); font-weight: 400; }
.md-list { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.md-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: .88rem; }
.md-row + .md-row { border-top: 1px solid var(--line); }
.md-name { font-weight: 650; flex: 1; min-width: 0; }
.md-state { color: var(--ink-2); font-size: .84rem; }
.md-state small { color: var(--muted); font-size: .72rem; margin-left: 4px; }
.md-row.none .md-state { color: var(--muted); }
.md-loc { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--brand-text); background: color-mix(in oklab, var(--brand) 12%, var(--surface)); padding: 3px 8px; border-radius: 999px; }
.md-loc .icon { width: 12px; height: 12px; }
.md-dot span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; font: 750 .72rem var(--f-display); border: 3px solid #fff; box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 35%, transparent), 0 4px 10px rgba(0,0,0,.25); }
.live-bar { position: fixed; z-index: 92; left: 50%; transform: translateX(-50%); top: calc(10px + var(--sat)); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; background: #0f5c45; color: #fff; font-size: .84rem; font-weight: 600; box-shadow: var(--shadow-lg); max-width: calc(100% - 24px); }
.live-bar button { border: 0; border-radius: 999px; padding: 6px 12px; background: rgba(255,255,255,.18); color: #fff; font: 700 .8rem var(--f-display); cursor: pointer; }
.live-bar .pulse { width: 10px; height: 10px; border-radius: 50%; background: #5cf2a5; box-shadow: 0 0 0 0 rgba(92,242,165,.7); animation: livepulse 1.6s infinite; flex: none; }
@keyframes livepulse { to { box-shadow: 0 0 0 12px rgba(92,242,165,0); } }

/* ---------- the captain's call on the day ---------- */
.day-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; }
.day-banner .em { font-size: 1.5rem; line-height: 1.1; }
.day-banner > div { display: flex; flex-direction: column; gap: 2px; }
.day-banner strong { font: 750 1rem var(--f-display); }
.day-banner small { font-size: .74rem; opacity: .75; }
.day-banner.on { background: color-mix(in oklab, var(--court) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 40%, var(--line)); }
.day-banner.pending { background: color-mix(in oklab, var(--accent) 22%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, var(--line)); }
.day-banner.off { background: color-mix(in oklab, var(--danger, #c0392b) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger, #c0392b) 40%, var(--line)); }
.day-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.day-chip.on { background: color-mix(in oklab, var(--court) 16%, var(--surface)); color: var(--court); }
.day-chip.pending { background: color-mix(in oklab, var(--accent) 30%, var(--surface)); color: #6b5200; }
.day-chip.off { background: color-mix(in oklab, var(--danger, #c0392b) 14%, var(--surface)); color: var(--danger, #c0392b); }
.next-call { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .82rem; }
.call-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; border: 1px dashed var(--line-strong); }
.call-box .eyebrow .icon { width: 14px; height: 14px; }
.call-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ---------- @mentions and seen by ---------- */
.mention { color: var(--brand-text); font-weight: 650; background: color-mix(in oklab, var(--brand) 10%, transparent); border-radius: 6px; padding: 0 3px; white-space: nowrap; }
.mention.me { background: color-mix(in oklab, var(--accent) 40%, transparent); color: var(--ink); }
.mention-pop { position: absolute; z-index: 96; min-width: 220px; max-width: 300px; display: flex; flex-direction: column; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.mention-pop button { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 600 .9rem var(--f-body); text-align: left; cursor: pointer; }
.mention-pop button.on, .mention-pop button:hover { background: var(--surface-2); }
.seen-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: -4px; padding: 3px 9px; border-radius: 999px; border: 0; background: var(--surface-2); color: var(--muted); font: 650 .74rem var(--f-display); cursor: pointer; }
.seen-chip .icon { width: 13px; height: 13px; }
.seen-chip:hover { color: var(--brand-text); }
.seen-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.seen-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: .9rem; }
.seen-row + .seen-row { border-top: 1px solid var(--line); }
.seen-row .seen-name { flex: 1; font-weight: 600; }
.seen-row small { color: var(--muted); font-size: .76rem; }

/* a tick on the chosen option */
.type-pick label { position: relative; }
.type-pick label::after { content: ""; width: 18px; height: 18px; border-radius: 50%; margin-left: auto; flex: none; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.type-pick label:has(input:checked)::after { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2315926f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow: none; }
.type-pick:not(.send-to) label::after { margin-left: 6px; }

/* events on their own page */
.event-page { max-width: 780px; padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 16px; }
.event-page .sheet-head h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.event-page .sheet-actions { position: static; }
@media (max-width: 600px) { .event-page { padding: 18px 16px 20px; } }

/* ---------- unread, new, for you, pinned team message ---------- */
.side-link .unread, .space-card .unread { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--accent); color: #1a1a1a; font: 800 .7rem var(--f-display); }
.space-card .unread { margin-left: 6px; vertical-align: 2px; height: 18px; font-size: .66rem; }
.new-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 20%, transparent); flex: none; }
.reply.pending { opacity: .55; }
.for-you { margin-top: 4px; }
.fy-list { display: grid; gap: 10px; }
@media (min-width: 900px) { .fy-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fy-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; font: inherit; cursor: pointer; box-shadow: 0 1px 1px rgba(18,26,22,.03), 0 8px 24px -18px rgba(18,26,22,.12); }
.fy-card:hover { border-color: var(--line-strong); }
.fy-card.today { background: linear-gradient(120deg, color-mix(in oklab, var(--brand) 12%, var(--surface)), var(--surface)); border-color: color-mix(in oklab, var(--brand) 30%, var(--line)); }
.fy-card.team { background: color-mix(in oklab, var(--accent) 14%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.fy-card.ask { flex-direction: column; align-items: stretch; cursor: default; }
.fy-main { display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
a.fy-card, a.fy-card:hover, a.fy-card * { text-decoration: none; }
a.fy-card { color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
a.fy-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.fy-card > .icon { flex: none; width: 18px; height: 18px; color: var(--muted); }
.fy-sub { font-size: .8rem; color: var(--muted); }
.fy-card.book { border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); background: linear-gradient(120deg, color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface) 70%); }
.fy-card.book .fy-ico { background: var(--accent); color: var(--accent-ink); }
.fy-card.book .fy-sub { color: color-mix(in oklab, var(--warn) 85%, var(--ink)); font-weight: 600; }
.fy-card.hit .fy-ico { background: color-mix(in oklab, var(--accent) 22%, var(--surface)); color: #b98600; }
.fy-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--brand-text); }
.fy-ico .icon { width: 19px; height: 19px; }
.fy-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fy-txt small { font-size: .76rem; color: var(--muted); font-weight: 600; }
.fy-txt strong { font: 700 .98rem var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fy-sub { font-size: .8rem; color: var(--brand-text); }
.fy-card > .icon:last-child { width: 16px; height: 16px; color: var(--muted); }
.fy-rsvp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fy-rsvp .next-rsvp { justify-content: center; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); }
.fy-rsvp .next-rsvp.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.fy-rsvp .next-rsvp.s-going { --tone: var(--court, #1f9d72); }
.fy-rsvp .next-rsvp.s-maybe { --tone: var(--warn); }
.fy-rsvp .next-rsvp.s-not_going { --tone: var(--danger); }
.fy-rsvp .next-rsvp[class*="s-"] { border-color: color-mix(in oklab, var(--tone) 40%, var(--line)); background: color-mix(in oklab, var(--tone) 8%, var(--surface-2)); color: color-mix(in oklab, var(--tone) 70%, var(--ink)); }
.fy-rsvp .next-rsvp[class*="s-"]:hover { background: color-mix(in oklab, var(--tone) 16%, var(--surface-2)); }
.fy-poll .card { height: 100%; }
.more-btn { align-self: center; margin-top: 4px; }
.pinned-msg { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin-bottom: 12px; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line)); background: color-mix(in oklab, var(--accent) 14%, var(--surface)); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.pinned-msg > .icon:first-child { width: 20px; height: 20px; color: var(--brand-text); flex: none; }
.pinned-msg > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pinned-msg small { font-size: .74rem; color: var(--muted); font-weight: 600; }
.pinned-msg strong { font: 700 .98rem var(--f-display); }
.pinned-msg .pm-body { font-size: .86rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinned-msg > .icon:last-child { width: 16px; height: 16px; color: var(--muted); }
@media (min-width: 900px) { .hero:has(.hero-corner) > .ball { display: none; } }
/* A tighter home card on phones: the essentials without scrolling past it */
@media (max-width: 640px) {
  .hero { padding: 22px 18px 18px; gap: 14px; }
  .hero h1 { font-size: clamp(1.55rem, 7.4vw, 2rem); }
  .hero .hero-lede { display: none; }
  .hero > .ball { width: 38px; height: 38px; right: 18px; top: 18px; }
  .hero-clock { font-size: .76rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-actions .btn { justify-content: center; padding-left: 10px; padding-right: 10px; }
  .hero-next { padding: 12px; }
}

/* minutes: actions grouped by person */
.paper-actions { gap: 12px; }
.pa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.pa-note { font-size: .74rem; color: var(--muted); }
.pa-grid { display: grid; gap: 10px; }
@media (min-width: 700px) { .pa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pa-person { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pa-who { display: flex; align-items: center; gap: 8px; }
.pa-who strong { font: 700 .9rem var(--f-display); color: var(--ink); }
.pa-who .avatars { display: flex; }
.pa-who .avatars .avatar + .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.pa-n { margin-left: auto; min-width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; background: var(--surface-2); font: 700 .7rem var(--f-display); color: var(--muted); }
.pa-person ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pa-person li { position: relative; padding-left: 16px; font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
.pa-person li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 7px; height: 7px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--brand); }
.paper-actions .pa-person li { display: block; }

/* reply and chat boxes that show @mention pills while typing */
.lite-edit { min-height: 44px; max-height: 140px; overflow-y: auto; padding: 10px 16px; border-radius: 22px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.lite-edit:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 16%, transparent); }
.lite-edit:empty::before { content: attr(data-placeholder); color: color-mix(in oklab, var(--muted) 75%, transparent); pointer-events: none; }
.reply-form .lite-edit { flex: 1; min-width: 0; }

/* minutes and agendas on their own page */
.paper-page { display: flex; flex-direction: column; gap: 18px; }
.paper-title { display: flex; flex-direction: column; gap: 6px; }
.paper-title h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.paper-cols { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1000px) { .paper-cols { grid-template-columns: minmax(0, 1fr) 380px; } .paper-side { position: sticky; top: 90px; } }
.paper-side { display: flex; flex-direction: column; gap: 14px; }
.paper-side .pa-grid { grid-template-columns: 1fr; }
.paper-side .paper-attend { padding: 14px 16px; }
.att-list { display: flex; flex-direction: column; gap: 6px; }
.att { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; }
.paper-doc { padding: 26px 30px; }
@media (max-width: 600px) { .paper-doc { padding: 18px 16px; } }
.paper-doc .paper-body { border-top: 0; padding-top: 0; max-width: 72ch; font-size: .98rem; line-height: 1.7; color: var(--ink-2); }
.paper-doc .paper-body h4 { font-size: 1.08rem; margin-top: 1.6em; padding-top: 1em; border-top: 1px solid var(--line); color: var(--ink); }
.paper-doc .paper-body > h4:first-child { border-top: 0; padding-top: 0; }
.paper-doc .paper-body > p:first-child strong { font: 750 1.1rem/1.4 var(--f-display); color: var(--ink); }
.paper-doc .paper-body ul { margin-top: .5em; }
.paper-doc .hint { margin-top: 18px; }
/* Minutes and agendas read like a document: calmer line height, a clear gap between paragraphs and after lists,
   headings sitting close to what they introduce, and small neat bullets hanging under the text. */
.paper-doc .paper-body { line-height: 1.58; }
.paper-doc .post-body.paper-body > * + * { margin-top: .95em; }
.paper-doc .post-body.paper-body > h4 { margin-top: 1.7em; margin-bottom: 0; }
.paper-doc .post-body.paper-body > h4:first-child { margin-top: 0; }
.paper-doc .post-body.paper-body > h4 + * { margin-top: .5em; }
.paper-doc .post-body.paper-body > p:first-child + * { margin-top: 1.2em; }
.paper-doc .post-body.paper-body ul { margin-top: .95em; gap: .55em; }
.paper-doc .post-body.paper-body > h4 + ul { margin-top: .6em; }
.paper-doc .post-body.paper-body li { padding-left: 1.3em; line-height: 1.5; }
.paper-doc .post-body.paper-body li::before { left: .3em; top: .6em; width: 6px; height: 6px; box-shadow: none; background: color-mix(in oklab, var(--brand) 75%, var(--surface)); }
@media (max-width: 600px) {
  .paper-doc .paper-body { font-size: .94rem; line-height: 1.55; }
  .paper-doc .paper-body h4 { font-size: 1.02rem; }
  .paper-doc .paper-body li { padding-left: 1.15em; }
  .paper-doc .paper-body li::before { left: .15em; }
}
.meeting[data-open-meeting] { cursor: pointer; transition: border-color .15s, box-shadow .2s, transform .15s; }
.meeting[data-open-meeting]:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.meeting[data-open-meeting]::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); flex: none; }

/* the diary stays in view while you scroll the feed */
@media (min-width: 1000px) { .grid-2 > .section:last-child { position: sticky; top: 88px; align-self: start; } }
.post-tools .seen-chip { margin-top: 0; margin-right: 4px; }

/* ---------- photos ---------- */
.photos { display: grid; gap: 4px; border-radius: 14px; overflow: hidden; margin-top: 2px; }
.photos .ph { position: relative; display: block; padding: 0; border: 0; background: var(--surface-2); cursor: zoom-in; overflow: hidden; }
.photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photos.n1 .ph { max-height: 460px; }
.photos.n1 img { height: auto; max-height: 460px; object-fit: cover; }
.photos.n2 { grid-template-columns: 1fr 1fr; } .photos.n2 .ph { aspect-ratio: 1; }
.photos.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; } .photos.n3 .ph:first-child { grid-row: span 2; }
.photos.n4 { grid-template-columns: 1fr 1fr; } .photos.n4 .ph { aspect-ratio: 4 / 3; }
.photos .more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font: 750 1.4rem var(--f-display); }
.photos.small { max-width: 260px; border-radius: 12px; margin-top: 6px; }
.photos.small.n1 .ph, .photos.small.n1 img { max-height: 220px; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,12,10,.94); display: grid; place-items: center; animation: rise .2s var(--ease); }
.lightbox img { max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox button { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lightbox button:hover { background: rgba(255,255,255,.24); }
.lightbox .lb-x { top: calc(14px + var(--sat)); right: 14px; }
.lightbox .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-n { position: absolute; bottom: calc(18px + var(--sab)); color: rgba(255,255,255,.8); font-size: .85rem; font-weight: 600; }
.photo-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-tile { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.pp-tile img { width: 100%; height: 100%; object-fit: cover; }
.pp-tile button, .lite-prev button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pp-tile button .icon, .lite-prev button .icon { width: 12px; height: 12px; }
.lite-cam { flex: none; cursor: pointer; }
.reply-form { flex-wrap: wrap; }
.lite-prev { position: relative; flex-basis: 100%; width: 84px; max-width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; margin-left: 40px; }
.lite-prev img { width: 100%; height: 100%; object-fit: cover; }
/* GIFs: a small button beside the camera, the picked GIF in the message, and the picker */
.lite-gif { flex: none; font-family: inherit; font-weight: 800; font-size: .68rem; line-height: 1; letter-spacing: .04em; padding: 0 7px; min-width: 34px; border: 1.5px solid currentColor; border-radius: 7px; height: 22px; align-self: center; color: var(--muted); background: none; cursor: pointer; }
.lite-gif:hover, .lite-gif:focus-visible { color: var(--brand); }
.lite-prev.gif img { object-fit: cover; }
.gif-out { margin-top: 6px; width: 240px; max-width: 100%; border-radius: 12px; overflow: hidden; background: var(--surface-2); line-height: 0; }
.gif-out img { display: block; width: 100%; height: auto; }
.gif-pop { position: fixed; inset: 0; z-index: 120; background: rgba(10, 14, 12, .45); display: flex; align-items: flex-end; justify-content: center; }
.gif-panel { width: min(560px, 100%); max-height: min(78vh, 640px, calc(100% - 12px)); background: var(--surface); border-radius: 20px 20px 0 0; padding: 14px 16px calc(12px + var(--sab)); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -10px 40px rgba(0,0,0,.18); }
@media (min-width: 700px) { .gif-pop { align-items: center; } .gif-panel { border-radius: 20px; } }
.gif-head { display: flex; gap: 8px; align-items: center; }
.gif-head .input { flex: 1; }
/* grid-auto-rows: max-content keeps tiles square when the sheet is short (above the keyboard); plain auto rows shrank to fit and the tiles overlapped */
.gif-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: max-content; gap: 6px; min-height: 160px; align-content: start; }
.gif-grid > p, .gif-grid > .spin { grid-column: 1 / -1; justify-self: center; margin: 24px 0; }
.gif-tile { border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: var(--surface-2); aspect-ratio: 1; cursor: pointer; }
.gif-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gif-more { align-self: center; }
.gif-credit { margin: 0; text-align: center; font-size: .72rem; color: var(--muted); }

/* ---------- space pages: hero bar, posts left, diary right ---------- */
.space-hero { position: relative; overflow: hidden; padding: 22px 24px; border-radius: var(--r-xl, 24px); color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--brand) 85%, #fff 15%), var(--brand) 45%, color-mix(in oklab, var(--brand) 60%, #000) 100%); box-shadow: var(--shadow); }
.space-hero::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); box-shadow: 0 0 0 40px rgba(255,255,255,.04); pointer-events: none; }
.space-hero h1 { color: #fff; }
.space-hero .muted { color: rgba(255,255,255,.82); }
.space-hero .space-ico { background: rgba(255,255,255,.14); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.space-hero .chip { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.space-hero .chip .icon { color: var(--accent); }
.space-hero .space-head-actions .btn { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); color: #fff; box-shadow: none; }
.space-hero .space-head-actions .btn .icon { color: var(--accent); }
.space-home { display: grid; gap: 22px; align-items: start; }
@media (min-width: 1000px) { .space-home { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); } .sh-side { position: sticky; top: 88px; } }
.sh-main, .sh-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* all caught up */
.fy-clear { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: color-mix(in oklab, var(--court) 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 22%, var(--line)); }
.fy-tick { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--court); color: #fff; flex: none; box-shadow: 0 0 0 5px color-mix(in oklab, var(--court) 16%, transparent); }
.fy-tick .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.fy-clear > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.fy-clear strong { font: 700 .98rem var(--f-display); color: var(--ink); }
.fy-clear small { font-size: .82rem; color: var(--muted); font-weight: 500; }
/* photos: consistent crops */
.photos.n1.wide .ph { aspect-ratio: 4 / 3; max-height: none; }
.photos.n1.tall .ph { aspect-ratio: 4 / 5; max-width: 420px; max-height: none; }
.photos.n1 img { height: 100%; max-height: none; }
.photos.small.n1 .ph { max-height: none; }
.lightbox .lb-flag { top: calc(14px + var(--sat)); right: 70px; }
.report-photo { display: block; max-width: 240px; max-height: 240px; border-radius: 10px; margin-top: 6px; object-fit: cover; }
.cropper { position: fixed; inset: 0; z-index: 400; background: rgba(8,20,14,.82); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; }
.cr-panel { background: var(--surface); border-radius: 22px; padding: 18px; display: grid; gap: 12px; justify-items: center; box-shadow: 0 30px 80px rgba(0,0,0,.4); max-width: 100%; }
.cr-head { justify-self: stretch; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cr-head small { color: var(--muted); }
.cr-stage { position: relative; overflow: hidden; border-radius: 14px; background: #111; touch-action: none; cursor: grab; user-select: none; }
.cr-stage.dragging { cursor: grabbing; }
.cr-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.cr-grid { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); border-radius: 14px;
  background: linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
  linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.cr-hint { margin: 0; color: var(--muted); font-size: 13px; }
.cr-zoom { width: min(320px, 100%); accent-color: var(--brand); }
.cr-shapes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cr-shapes button { border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.cr-shapes button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.cr-actions { justify-self: stretch; display: flex; justify-content: flex-end; gap: 8px; }
.photos.n1.square .ph { aspect-ratio: 1; max-width: 520px; }
.chip.warn { background: #fff4d6; color: #8a5a00; }
:root[data-theme="dark"] .chip.warn { background: #3a2c08; color: #ffd36b; }
.fy-tick .icon { color: #fff; }
/* Live match card on home: calm and light until match day, then it takes on the captain's call colour */
.match-pulse { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; width: 100%; cursor: pointer;
  padding: 18px 20px; border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.match-pulse::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--brand); }
.match-pulse:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-lg); }
.match-pulse:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.mp-date { width: 62px; height: 72px; border-radius: 16px; display: grid; place-content: center; text-align: center; background: var(--brand); color: #fff; box-shadow: 0 10px 22px -12px var(--brand); }
.mp-date span { font: 800 .7rem var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.mp-date b { font: 800 1.7rem/1 var(--f-display); }
.mp-date small { font-size: .68rem; font-weight: 600; opacity: .8; margin-top: 2px; }
.mp-info { display: grid; gap: 5px; min-width: 0; }
.mp-live { display: inline-flex; align-items: center; gap: 8px; font: 800 .7rem var(--f-display); letter-spacing: .13em; text-transform: uppercase; color: var(--brand-text, var(--brand)); }
.mp-team { color: var(--muted); letter-spacing: .04em; text-transform: none; font-weight: 600; font-size: .78rem; }
.mp-team::before { content: '·'; margin-right: 8px; }
.mp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--court); position: relative; flex: none; }
.mp-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: mp-pulse 1.6s ease-out infinite; }
@keyframes mp-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mp-dot::after { animation: none; } }
.mp-info strong { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 800 1.45rem/1.15 var(--f-display); letter-spacing: -.01em; }
.mp-info .ha-pill { font-size: .66rem; margin-left: 0; }
.match-pulse.calm .ha-pill.home { background: var(--brand-soft); color: var(--brand-text, var(--brand)); }
.mp-meta { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .9rem; min-width: 0; }
.mp-meta .icon { width: 15px; height: 15px; flex: none; color: var(--brand); }
.mp-leave { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; color: var(--ink); font-weight: 700; }
.mp-call { justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-weight: 700; font-size: .84rem; padding: 5px 12px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.mp-call em { font-style: normal; font-weight: 500; opacity: .85; }
.mp-count { display: grid; justify-items: center; gap: 6px; padding: 12px 14px; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.mp-count > small { font: 800 .66rem var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cd { display: flex; gap: 6px; }
.cd-u { display: grid; justify-items: center; min-width: 52px; padding: 8px 6px 6px; border-radius: 12px; background: var(--brand); color: #fff; box-shadow: 0 8px 18px -12px var(--brand); }
.cd-u:last-child { background: var(--brand-deep); }
.cd-u b { font: 800 1.5rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.cd-u small { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; opacity: .8; margin-top: 4px; }
.cd-now { font: 800 1.3rem var(--f-display); color: var(--brand); }
/* Match day: full colour, following the captain's call */
.match-pulse.today { color: #fff; background: radial-gradient(120% 160% at 100% 0%, var(--brand) 0%, var(--brand-deep) 75%); box-shadow: 0 18px 40px -18px var(--brand); }
.match-pulse.today::before { background: var(--accent); }
.match-pulse.today.pending { background: radial-gradient(120% 160% at 100% 0%, #c98a12 0%, #7a4d05 75%); }
.match-pulse.today.off { background: radial-gradient(120% 160% at 100% 0%, #b4443a 0%, #6d1f1a 75%); }
.match-pulse.today .mp-live, .match-pulse.today .mp-team, .match-pulse.today .mp-meta, .match-pulse.today .mp-meta .icon, .match-pulse.today .mp-leave { color: #fff; }
.match-pulse.today .mp-dot { background: #5dfc9f; }
.match-pulse.today .mp-date { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.match-pulse.today .mp-call, .match-pulse.today .mp-count { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.match-pulse.today .mp-count > small { color: rgba(255,255,255,.8); }
.match-pulse.today .cd-u { background: rgba(255,255,255,.18); box-shadow: none; }
.match-pulse.today .cd-now { color: #fff; }
@media (max-width: 720px) {
  .match-pulse { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; align-items: start; }
  .mp-call { border-radius: 12px; }
  .mp-count { grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
  .mp-count .cd { justify-self: end; }
  .mp-info strong { font-size: 1.2rem; }
  .mp-date { width: 54px; height: 64px; }
  .cd-u { min-width: 44px; } .cd-u b { font-size: 1.2rem; }
}
/* Post covers: ready made banners */
.post-cover { --c1: #15926f; --c2: #0b4f3c; position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; height: 116px; padding: 0 24px; margin: 4px 0 2px; border-radius: 16px; color: #fff;
  background: radial-gradient(90% 140% at 100% 0%, color-mix(in oklab, var(--c1) 80%, #fff) 0%, var(--c1) 35%, var(--c2) 100%); }
.post-cover::before, .post-cover::after { content: ''; position: absolute; pointer-events: none; border: 2px solid rgba(255,255,255,.16); }
.post-cover::before { right: -40px; top: 18px; width: 260px; height: 160px; border-radius: 4px; transform: skewX(-18deg); }
.post-cover::after { right: 70px; top: 18px; width: 0; height: 160px; border-width: 0 0 0 2px; transform: skewX(-18deg); }
.cv-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); flex: none; }
.cv-ic .icon { width: 28px; height: 28px; stroke-width: 1.9; }
.cv-l { font: 800 1.4rem var(--f-display); letter-spacing: -.01em; position: relative; z-index: 1; }
.cv-announcement { --c1: #15926f; --c2: #0b4f3c; }
.cv-meeting { --c1: #3d6fd8; --c2: #1d3477; }
.cv-match { --c1: #e0a800; --c2: #8a5600; }
.cv-social { --c1: #d4486f; --c2: #7b1f3d; }
.cv-training { --c1: #2aa198; --c2: #0f5550; }
.cv-courts { --c1: #6b7680; --c2: #2c3338; }
.cover-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cover-pick legend { font-weight: 700; font-size: .9rem; margin-bottom: 8px; padding: 0; }
.cover-pick legend .muted { font-weight: 500; font-size: .8rem; }
.cover-pick label { position: relative; cursor: pointer; }
.cover-pick input { position: absolute; opacity: 0; pointer-events: none; }
.cover-pick label > span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; font-size: .85rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s, transform .15s; }
.cover-pick label > span .icon { width: 16px; height: 16px; }
.cover-pick .cp-none > span { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.cover-pick input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); transform: translateY(-1px); }
.cover-pick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 560px) { .post-cover { height: 92px; padding: 0 18px; } .cv-ic { width: 44px; height: 44px; } .cv-l { font-size: 1.15rem; } }
/* People picker and per space powers */
.people-picker { display: grid; gap: 8px; }
.pp-chosen { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: center; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border-radius: 999px; background: color-mix(in oklab, var(--brand) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 30%, var(--line)); font-weight: 650; font-size: .86rem; }
.pp-chip .avatar { width: 26px; height: 26px; font-size: .62rem; }
.pp-chip button { border: 0; background: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muted); }
.pp-chip button:hover { background: var(--surface-2); color: var(--ink); }
.pp-chip button .icon { width: 13px; height: 13px; }
.pp-search { position: relative; }
.pp-search > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.pp-search .input { padding-left: 36px; }
.pp-results { display: grid; gap: 2px; }
.pp-results:empty { display: none; }
.pp-results button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 10px; border-radius: 10px; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.pp-results button:hover, .pp-results button:focus-visible { background: var(--surface-2); }
.pp-results button .icon { margin-left: auto; width: 16px; height: 16px; color: var(--brand); }
.pp-results .avatar { width: 28px; height: 28px; font-size: .64rem; }
.pp-results p { margin: 4px 10px; font-size: .85rem; }
.powers { border: 0; padding: 14px; margin: 0; border-radius: 16px; background: var(--surface-2); display: grid; gap: 12px; }
.powers legend { font-weight: 700; font-size: .9rem; padding: 0; float: left; margin-bottom: 2px; }
.power-row { display: grid; gap: 8px; }
.pw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pw-head strong { font-size: .9rem; }
.pw-head select { width: auto; min-width: 240px; flex: 0 1 auto; }
@media (max-width: 560px) { .pw-head select { min-width: 0; width: 100%; } }

/* Composer: clearly a place to write, with its own Post button */
.composer.collapsed { border: 1.5px solid color-mix(in oklab, var(--brand) 28%, var(--line)); background: color-mix(in oklab, var(--brand) 3%, var(--surface)); }
.composer.collapsed:hover { border-color: var(--brand); }
.composer.collapsed .cp-prompt { flex: 1; text-align: left; }
.cp-go { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: .86rem; flex: none; }
.cp-go .icon { width: 15px; height: 15px; }
/* Location pin on the next match card: tap for directions */
.next-loc { display: flex; align-items: center; gap: 8px; margin: -4px 0 4px; padding: 9px 12px; border-radius: 12px; color: #fff; text-decoration: none; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: .9rem; transition: background .15s; }
.next-loc:hover { background: rgba(255,255,255,.18); }
.next-loc .icon { width: 17px; height: 17px; color: var(--accent); flex: none; }
.next-loc span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-loc small { font-weight: 700; font-size: .78rem; opacity: .9; flex: none; }
.venue-line a { color: var(--brand); font-weight: 700; text-decoration: none; }
.venue-line a:hover { text-decoration: underline; }
.venue-line > .icon { color: var(--brand); }
.venue-line.missing > .icon { color: var(--muted); }
/* Hit with me */
.hit-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.hit-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.hit-card.cancelled { opacity: .6; }
.hit-card .date-tile { flex: none; }
.hit-main { display: grid; gap: 3px; min-width: 0; flex: 1; }
.hit-main small { color: var(--muted); font-size: .8rem; font-weight: 600; }
.hit-main strong { font: 700 1.02rem var(--f-display); }
.hit-side { display: flex; align-items: center; gap: 8px; color: var(--muted); flex: none; }
.hit-msgs { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 700; }
.hit-msgs .icon { width: 15px; height: 15px; }
.hit-book { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 650; }
.hit-book .icon { width: 15px; height: 15px; }
.hit-book.ok { color: var(--court); } .hit-book.wait { color: var(--warn); } .hit-book.none { color: var(--muted); }
.hit-box { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.hit-box .eyebrow { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.hit-box .eyebrow .icon { width: 15px; height: 15px; }
.hit-players { display: grid; gap: 8px; }
.hit-p { display: flex; align-items: center; gap: 10px; }
.hit-p .hit-pn { flex: 1; font-weight: 650; display: grid; }
.hit-p small { color: var(--muted); font-weight: 500; font-size: .76rem; }
.hit-reply { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hit-reply > span { font-weight: 700; font-size: .9rem; margin-right: 4px; }
.hit-reply .next-rsvp { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.hit-reply .next-rsvp.on { background: var(--brand); color: #fff; box-shadow: none; }
.hit-chat { margin-top: 18px; }
.hit-chat .eyebrow { display: flex; align-items: center; gap: 6px; }
.hit-chat .eyebrow .icon { width: 15px; height: 15px; }

.hit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hit-actions .btn { flex: 0 0 auto; }
.hit-actions:empty { display: none; }
.hit-card .date-tile { width: 54px; min-width: 54px; height: 58px; display: grid; place-content: center; text-align: center; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
/* Venue: map pop up and navigate */
.venue-line > span { display: grid; gap: 8px; }
.venue-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.venue-acts .btn { flex: 0 0 auto; }
.venue-pop-map { height: 300px; border-radius: 16px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; margin: 4px 0 12px; }
.venue-pop-map.leaflet-container { display: block; }
.nav-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.nav-apps .btn { justify-content: center; }
@media (max-width: 480px) { .nav-apps { grid-template-columns: 1fr; } }
.venue-drive { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 650; }
.venue-drive .icon { width: 17px; height: 17px; color: var(--brand); }
button.next-loc { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; margin: -4px 0 4px; padding: 9px 12px; border-radius: 12px; color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: .9rem; }
button.next-loc:hover { background: rgba(255,255,255,.18); }
button.next-loc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.venue-pop-map.nomap { height: auto; padding: 14px 16px; place-items: start; }
.venue-pop-map.nomap p { margin: 0; }
/* Next up card: tidy answer row and a quiet footer */
.next-actions { display: grid; gap: 8px; }
.next-rsvps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.next-rsvps .next-rsvp { justify-content: center; padding: 6px; gap: 4px; min-width: 0; text-align: center; line-height: 1.15; white-space: nowrap; }
.next-rsvps .next-rsvp .icon { display: none; } /* the solid colour shows the choice */
@media (max-width: 1400px) { .next-rsvps .next-rsvp { white-space: normal; font-size: .86rem; } }
@media (max-width: 420px) { .next-rsvps { gap: 6px; } .next-rsvps .next-rsvp { font-size: .8rem; padding: 6px 4px; } }
/* Reply colours: going green, maybe amber, can't make it coral; soft tints until chosen */
.next-rsvp.s-going { --tone: #5fe0b0; --tone-ink: #06392a; }
.next-rsvp.s-maybe { --tone: #ffc35c; --tone-ink: #4a2c00; }
.next-rsvp.s-not_going { --tone: #ff8a80; --tone-ink: #5a1214; }
.next-rsvps .next-rsvp[class*="s-"] { background: color-mix(in oklab, var(--tone) 16%, transparent); border-color: color-mix(in oklab, var(--tone) 70%, transparent); color: color-mix(in oklab, var(--tone) 30%, #fff); }
.next-rsvps .next-rsvp[class*="s-"]:hover { background: color-mix(in oklab, var(--tone) 26%, transparent); }
.next-rsvps .next-rsvp[class*="s-"].on { background: var(--tone); border-color: var(--tone); color: var(--tone-ink); box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--tone) 80%, transparent); }
.next-foot { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16); }
.next-link { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .88rem; color: #fff; opacity: .9; padding: 4px 0; }
.next-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.next-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.next-link .icon { width: 16px; height: 16px; color: var(--accent); }
.next-place { display: flex; align-items: center; gap: 8px; margin: -4px 0 4px; font-size: .92rem; opacity: .9; }
.next-place .icon { width: 16px; height: 16px; color: var(--accent); }
.venue-acts .btn .icon, .nav-apps .btn .icon { color: currentColor; width: 16px; height: 16px; margin-top: 0; }
/* Lift offer: tap to choose seats and leaving time */
.lift-form { padding: 14px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.lf-group { display: grid; gap: 8px; }
.lf-label { font-size: .84rem; font-weight: 650; }
.lf-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lf-chip { position: relative; cursor: pointer; }
.lf-chip input { position: absolute; opacity: 0; pointer-events: none; }
.lf-chip span { display: inline-grid; justify-items: center; min-width: 44px; padding: 9px 14px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 700; font-variant-numeric: tabular-nums; transition: background .15s, color .15s, box-shadow .15s; }
.lf-chip.time span { min-width: 72px; }
.lf-chip span small { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .75; margin-top: 1px; }
.lf-chip input:checked + span { background: var(--brand); color: #fff; box-shadow: none; }
.lf-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.lf-other { width: auto; min-width: 104px; padding-top: 9px; padding-bottom: 9px; }
/* Section labels with an icon drop the dot, so each label has one clean marker */
.eyebrow:has(> .icon)::before { display: none; }
.eyebrow > .icon { width: 15px; height: 15px; flex: none; color: var(--brand); stroke-width: 2; }
.lift-riders { display: grid; gap: 6px; margin-top: 6px; }
.lift-rider { display: flex; align-items: center; gap: 8px; }
.lift-rider > span { display: grid; }
.lift-rider strong { font-size: .86rem; }
.lift-rider small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .78rem; }
.lift-rider small .icon { width: 12px; height: 12px; color: var(--brand); }
/* Leaving time chips stay on one line on phones */
.lf-chips.times, .lf-group .lf-chips { gap: 6px; }
@media (max-width: 560px) { .lf-chip span { padding: 8px 10px; min-width: 40px; } .lf-chip.time span { min-width: 60px; } .lf-other { min-width: 92px; } }
.lift-form .row:last-child { justify-content: flex-end; }
.lift-form .row:last-child .btn { flex: 0 0 auto; }
.lift-rider small { display: block; } .lift-rider small .icon { vertical-align: -2px; margin-right: 2px; }
.dp[data-times="play"] .dp-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
.dp[data-times="play"] .dp-times button { padding-left: 4px; padding-right: 4px; }
.dp[data-times="play"] .dp-other { grid-column: span 2; width: 100%; }
.hit-state { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 700; }
.hit-state .icon { width: 15px; height: 15px; }
.hit-state.ok { color: var(--court); } .hit-state.wait { color: var(--warn); } .hit-state.out { color: var(--danger); }
.ev-head .hit-state { margin: 4px 0 2px; }
.hit-note { align-items: flex-start; }
.hit-note > span:not(.avatar) { display: grid; gap: 2px; padding: 10px 14px; border-radius: 4px 14px 14px 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.hit-note small { color: var(--muted); font-size: .76rem; font-weight: 650; }
.people-picker input:disabled { background: var(--surface-2); cursor: not-allowed; }

/* Player status pills: one clear colour each */
.hit-p em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: .78rem; font-weight: 700; padding: 5px 11px 5px 9px; border-radius: 999px; }
.hit-p em .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.hit-p.in em { background: color-mix(in oklab, var(--court) 14%, var(--surface)); color: color-mix(in oklab, var(--court) 80%, var(--ink)); }
.hit-p.wait em { background: color-mix(in oklab, var(--accent) 22%, var(--surface)); color: color-mix(in oklab, var(--warn) 85%, var(--ink)); }
.hit-p.out em { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); color: var(--danger); }
.hit-players { gap: 10px; }
.hit-p { padding: 8px 10px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.detail-list .hit-note > .avatar { width: 30px; height: 30px; min-width: 30px; font-size: .64rem; margin-top: 2px; border-radius: 50%; }
/* What's on: your plans first */
.plans { display: grid; gap: 8px; }
.plan { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.plan:hover { box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow); transform: translateY(-1px); }
.plan[hidden] { display: none; }
.plan-date { width: 50px; height: 56px; border-radius: 13px; display: grid; place-content: center; text-align: center; background: var(--brand-soft); color: var(--brand-text, var(--brand)); }
.plan-date span, .plan-date small { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.plan-date b { font: 800 1.3rem/1.05 var(--f-display); color: var(--ink); }
.plan-main { display: grid; gap: 2px; min-width: 0; }
.plan-main strong { font: 700 .98rem var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-main span { color: var(--muted); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-main small { font-size: .78rem; font-weight: 700; color: var(--brand-text, var(--brand)); }
.plan-tag { font-size: .74rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.plan-tag.play { background: var(--brand); color: #fff; }
.plan-tag.go { background: color-mix(in oklab, var(--court) 14%, var(--surface)); color: color-mix(in oklab, var(--court) 80%, var(--ink)); }
.plan-tag.maybe { background: color-mix(in oklab, var(--accent) 24%, var(--surface)); color: color-mix(in oklab, var(--warn) 85%, var(--ink)); }
.plan-tag.hit { background: color-mix(in oklab, var(--accent) 60%, var(--surface)); color: var(--accent-ink, #3a2c00); }
.plans-note { display: flex; align-items: center; gap: 6px; font-size: .82rem; margin-top: 10px; }
.plans-note .icon { width: 14px; height: 14px; }
.chip.new-chip { background: var(--brand); color: #fff; }
/* Captain's planner */
.pl-intro { margin: 0 0 12px; }
.planner { display: grid; gap: 10px; }
.pl-row { border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.pl-row[open] { box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow); }
.pl-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; }
.pl-row summary::-webkit-details-marker { display: none; }
.pl-chev { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
.pl-row[open] .pl-chev { transform: rotate(180deg); }
.pl-date { width: 50px; height: 58px; border-radius: 13px; display: grid; place-content: center; text-align: center; background: var(--brand); color: #fff; }
.pl-date span, .pl-date small { font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.pl-date span { color: var(--accent); opacity: 1; }
.pl-date b { font: 800 1.3rem/1.05 var(--f-display); }
.pl-main { display: grid; gap: 8px; min-width: 0; }
.pl-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-title strong { font: 800 1.05rem var(--f-display); }
.pl-title .ha-pill { margin-left: 0; font-size: .6rem; }
.pl-title .ha-pill.home { background: var(--brand-soft); color: var(--brand-text, var(--brand)); }
.pl-state { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.pl-state .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.pl-state.ok { background: color-mix(in oklab, var(--court) 14%, var(--surface)); color: color-mix(in oklab, var(--court) 80%, var(--ink)); }
.pl-state.short { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); color: var(--danger); }
.pl-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.pl-bar i { display: block; height: 100%; }
.pl-bar .a { background: var(--court); } .pl-bar .m { background: var(--accent); } .pl-bar .u { background: var(--danger); } .pl-bar .n { background: var(--line-strong); }
.pl-need { position: relative; display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.pl-need i { display: block; height: 100%; }
/* One gradient across the whole track, so a half full bar ends in amber and a full one in green. */
.pl-need .fill { background-image: linear-gradient(90deg in oklab, var(--danger), #f2a516 45%, #f5c400 60%, var(--court)); background-repeat: no-repeat; border-radius: 999px 0 0 999px; transition: width .4s var(--ease); }
.pl-need.full .fill { border-radius: 999px; }
.pl-need .maybe { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--accent) 70%, var(--surface)) 0 4px, color-mix(in oklab, var(--accent) 30%, var(--surface)) 4px 8px); }
.pl-need .tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--surface); opacity: .9; }
.pl-counts .a.low b { color: var(--danger); } .pl-counts .a.half b { color: var(--warn); } .pl-counts .a.full b { color: var(--court); }
.pl-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--muted); }
.pl-counts b { color: var(--ink); font-size: .9rem; }
.pl-counts span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pl-counts .a::before { background: var(--court); } .pl-counts .m::before { background: var(--accent); } .pl-counts .u::before { background: var(--danger); } .pl-counts .n::before { background: var(--line-strong); }
.pl-detail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; padding: 4px 16px 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.pl-col { display: grid; gap: 6px; align-content: start; }
.pl-name { display: flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 600; }
.pl-name .avatar { width: 24px; height: 24px; font-size: .56rem; }
.pl-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.pl-acts .btn { flex: 0 0 auto; }
.pl-acts .muted { flex-basis: 100%; font-size: .84rem; }
/* Planner, cleaner: a smooth bar, a big players count on the right, and only the counts that matter. */
.pl-row summary { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.pl-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pl-need { height: 8px; box-shadow: none; background: color-mix(in oklab, var(--line) 70%, var(--surface-2)); }
.pl-need .maybe { opacity: .8; }
.pl-sum { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .8rem; color: var(--muted); }
.pl-sum span + span::before { content: "·"; margin: 0 8px; color: var(--line-strong); }
.pl-sum .lead { color: var(--ink-2); font-weight: 600; }
.pl-score { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: center; min-width: 64px; padding: 8px 10px; border-radius: 14px; text-align: center;
  background: var(--surface-2); color: var(--ink); }
.pl-score b { font: 800 1.5rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.pl-score span { font: 700 .9rem var(--f-display); color: var(--muted); }
.pl-score small { grid-column: 1 / -1; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.pl-score.low { background: color-mix(in oklab, var(--danger) 9%, var(--surface)); } .pl-score.low b { color: var(--danger); }
.pl-score.half { background: color-mix(in oklab, #f2a516 14%, var(--surface)); } .pl-score.half b { color: color-mix(in oklab, #f2a516 70%, var(--ink)); }
.pl-score.full { background: color-mix(in oklab, var(--court) 12%, var(--surface)); } .pl-score.full b { color: var(--court); }
.pl-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 600px) { .pl-score { min-width: 52px; padding: 6px 8px; } .pl-score b { font-size: 1.2rem; } .pl-score small { display: none; } }

/* Planner: pick the team right in the row */
.pl-detail { display: flex; flex-direction: column; gap: 14px; }
.pl-pick { display: flex; flex-direction: column; gap: 14px; }
.pp-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pp-slots { display: flex; gap: 5px; }
.pp-slots i { width: 26px; height: 10px; border-radius: 999px; background: color-mix(in oklab, var(--line) 70%, var(--surface-2)); transition: background .2s; }
.pp-slots.low i.on { background: var(--danger); } .pp-slots.half i.on { background: #f2a516; } .pp-slots.full i.on { background: var(--court); }
.pp-slots i.extra { background: var(--warn) !important; }
.pp-n { font: 700 .92rem var(--f-display); }
.pp-n small { font-weight: 600; color: var(--muted); margin-left: 6px; font-size: .8rem; }
.pp-group { display: flex; flex-direction: column; gap: 8px; }
.pp-group.dim { opacity: .6; }
.pp-label { display: flex; align-items: center; gap: 6px; margin: 0; font: 800 .68rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pp-label .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.pp-label.st-going { color: var(--court); } .pp-label.st-maybe { color: color-mix(in oklab, #f2a516 75%, var(--ink)); } .pp-label.st-not_going { color: var(--danger); }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pp-p { display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 8px; border-radius: 14px; border: 0; cursor: pointer; text-align: left; font: 600 .9rem var(--f-body); color: var(--ink);
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: box-shadow .15s, background .15s, transform .1s; }
.pp-p:hover { box-shadow: inset 0 0 0 1.5px var(--brand); }
.pp-p:active { transform: scale(.98); }
.pp-p .pp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-p i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: transparent; flex: none; }
.pp-p i .icon { width: 13px; height: 13px; stroke-width: 3; }
.pp-p.on { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.pp-p.on i { background: var(--brand); box-shadow: none; color: #fff; }
.pp-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.pp-foot .hint { flex: 1; min-width: 200px; margin: 0; }
.pl-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-foot .hint { font-size: .8rem; color: var(--muted); }
.pp-p .avatar.sm { flex: none; }
@media (max-width: 720px) { .pl-detail { grid-template-columns: 1fr 1fr; } .pl-row summary { gap: 10px; padding: 12px; } }
/* Club logo */
.club-badge.has-logo { background: none; box-shadow: none; border: 0; }
.club-badge.has-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.signin-logo img { height: 64px; width: auto; display: block; }
@media (max-width: 720px) { .signin-logo img { height: 48px; } }
img.brand-ball { object-fit: contain; }
.topbar-logo { height: 34px; width: auto; display: block; }
.sidebar .club-badge.has-logo { width: 40px; height: 44px; }
/* Sidebar: the club's own logo with a small label */
.side-logo { display: grid; gap: 10px; justify-items: start; padding: 6px 8px 4px; }
.side-logo img { height: 46px; width: auto; display: block; }
.side-tag { display: inline-flex; align-items: center; gap: 6px; font: 700 .64rem var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
/* Breathing room between the last message and the reply box */
.replies + .reply-form, .chat-list + .reply-form, .chat-empty + .reply-form { margin-top: 14px; }
/* Date tiles by type */
.dbadge { --c1: var(--brand); --c2: var(--brand-deep); --fg: #fff; --hi: var(--accent);
  position: relative; width: 56px; height: 62px; border-radius: 15px; display: grid; place-content: center; text-align: center; gap: 0;
  background: linear-gradient(160deg, var(--c1), var(--c2)); color: var(--fg); box-shadow: 0 10px 20px -14px var(--c2), inset 0 1px 0 rgba(255,255,255,.18); }
.dbadge .db-wd { font: 800 .58rem var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--hi); }
.dbadge b { font: 800 1.45rem/1 var(--f-display); letter-spacing: -.02em; margin: 1px 0; }
.dbadge .db-mo { font: 700 .58rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; opacity: .82; }
.dbadge .db-ic { position: absolute; right: -7px; top: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--c2); box-shadow: 0 0 0 2px var(--surface), 0 4px 10px -4px rgba(0,0,0,.35); }
.dbadge .db-ic .icon { width: 12px; height: 12px; stroke-width: 2.2; }
.dbadge.t-match { --c1: #1aa37b; --c2: #0d5f48; }
.dbadge.t-hit { --c1: #ffd84a; --c2: #f0b400; --fg: #3a2c00; --hi: #0d5f48; }
.dbadge.t-hit .db-ic { color: #b98600; }
/* Matches have to be impossible to miss: club yellow badge with a proper cup, and a Match label on the row.
   Personal hits step back to a light badge so the yellow means "match". */
.dbadge.t-match { --c1: #ffe066; --c2: #f5c400; --fg: #0d3f30; --hi: #0d5f48; box-shadow: 0 10px 20px -12px #c99a00, inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(13,95,72,.12); }
.dbadge.t-match .db-ic { width: 26px; height: 26px; right: -11px; top: -11px; background: #0d5f48; color: #ffe066; box-shadow: 0 0 0 2px var(--surface), 0 4px 10px -4px rgba(0,0,0,.4); }
.dbadge.t-match .db-ic .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.dbadge.t-hit { --c1: var(--surface); --c2: color-mix(in oklab, var(--accent) 14%, var(--surface)); --fg: var(--ink); --hi: #b98600; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 70%, var(--line)); }
.plan-kind { display: inline-flex; align-items: center; gap: 4px; font: 800 .66rem var(--f-display); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in oklab, #0d5f48 80%, var(--ink)); }
.plan-kind .icon { width: 12px; height: 12px; stroke-width: 2.4; color: #c99a00; }
.plan.p-match { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, var(--line)); background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 9%, var(--surface)), var(--surface) 60%); }
.plan.p-match.is-playing { box-shadow: inset 4px 0 0 var(--accent), inset 0 0 0 1px color-mix(in oklab, var(--accent) 70%, var(--line)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-kind { color: #ffe066; } }
:root[data-theme="dark"] .plan-kind { color: #ffe066; }
.dbadge.t-training { --c1: #2fa6a0; --c2: #145a57; --hi: #bff3ee; }
.dbadge.t-social { --c1: #e0567c; --c2: #8c2346; --hi: #ffd6e2; }
.dbadge.t-club { --c1: color-mix(in oklab, var(--brand) 12%, var(--surface)); --c2: color-mix(in oklab, var(--brand) 20%, var(--surface)); --fg: var(--ink); --hi: var(--brand-text, var(--brand)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 25%, var(--line)); }
.dbadge.t-club .db-ic { color: var(--brand); }
/* The club's ball image takes the same space as the drawn ball */
.venue-row.club .vn img { width: 30px; height: 30px; display: block; }
.map-pin.club span img { width: 100%; height: 100%; display: block; }
.bounce-ball img { width: 100%; height: 100%; display: block; }

/* ---------- tasks ---------- */
.task-list { padding: 4px 0; display: flex; flex-direction: column; }
.card.task-list { padding: 4px 6px; }
.task { display: flex; gap: 12px; align-items: flex-start; padding: 12px 10px; border-radius: 14px; }
.task + .task { border-top: 1px solid var(--line); border-radius: 0; }
.task-tick { flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); color: transparent; display: grid; place-items: center; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s; }
.task-tick .icon { width: 15px; height: 15px; stroke-width: 3; }
.task-tick:hover:not(:disabled) { border-color: var(--court); color: color-mix(in oklab, var(--court) 50%, transparent); }
.task-tick:disabled { cursor: default; opacity: .55; }
.task.done .task-tick { background: var(--court); border-color: var(--court); color: #fff; }
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.task-title { all: unset; cursor: pointer; font: 650 .96rem/1.35 var(--f-display); color: var(--ink); overflow-wrap: anywhere; }
.task-title:hover { color: var(--brand-text); }
.task-title:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.task.done .task-title { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: .8rem; color: var(--muted); }
.task-who { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; }
.task-who .avatar.sm { width: 20px; height: 20px; font-size: .6rem; }
.chip.due.soon { background: color-mix(in oklab, var(--warn) 12%, var(--surface)); color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 25%, transparent); }
.chip.due.late { background: color-mix(in oklab, var(--danger) 10%, var(--surface)); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger) 25%, transparent); }
.done-fold { margin-top: 14px; }
.done-fold summary { cursor: pointer; font: 650 .86rem var(--f-display); color: var(--muted); padding: 6px 2px; }
.done-fold .task-list { margin-top: 8px; }
.paper-tasks { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.paper-tasks .task { padding: 10px 2px; }
.paper-tasks .pa-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.paper-actions li[data-action-what] { grid-template-columns: 1fr auto; align-items: center; }
.pa-assign .btn.sm { padding: 4px 10px; font-size: .76rem; }
.pa-given { display: inline-flex; align-items: center; gap: 4px; font: 650 .76rem var(--f-display); color: var(--court); white-space: nowrap; }
.pa-given .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.pa-given.done { color: var(--muted); }

/* ---------- inbox ---------- */
.inbox-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.inbox-cols.single { grid-template-columns: minmax(0, 760px); }
.inbox-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
@media (max-width: 960px) { .inbox-cols { grid-template-columns: minmax(0, 1fr); } }
/* Messages lead the inbox; the chat list gets room to breathe. */
.inbox-msgs .chat-list-card .chat-row { padding-block: 14px; }
.inbox-msgs .chat-list-card .empty .btn { margin-top: 12px; }
.inbox-tasks.aside .card.task-list .empty.slim { min-height: 0; padding: 18px 16px; flex-direction: row; gap: 10px; }
.inbox-tasks.aside .card.task-list .empty.slim p { margin: 0; }
.inbox-tasks.aside .card.task-list .empty.slim .icon { width: 20px; height: 20px; }
.inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 2px 10px; }
.inbox-head h2 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0; }
.inbox-head h2 .icon { width: 18px; height: 18px; color: var(--brand-text); }
.inbox-tasks .inbox-head:not(:first-child) { margin-top: 24px; }
.chat-list-card { padding: 4px; display: flex; flex-direction: column; }
.chat-list-card.compact { padding: 0; margin: -4px -6px 0; }
.chat-row { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 14px; color: inherit; text-decoration: none; }
.chat-row:hover { background: var(--surface-2); }
.chat-row .avatar, .chat-ava { flex: 0 0 auto; width: 40px; height: 40px; }
.chat-ava { border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); }
.chat-ava .icon { width: 19px; height: 19px; }
.chat-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-mid strong { font: 650 .94rem var(--f-display); }
.chat-mid small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .84rem; }
.chat-row.unread .chat-mid small { color: var(--ink-2); font-weight: 600; }
.chat-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--muted); font-size: .74rem; }
.chat-end .icon { width: 14px; height: 14px; }
.chat-end .unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--brand); color: #fff; font: 800 .7rem var(--f-display); }
.dm-warn { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; color: var(--muted); }
.dm-warn .icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; }
.dm-warn.banner { margin: 0 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }

/* ---------- a conversation ---------- */
.chat-page { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.chat-head .avatar { width: 44px; height: 44px; }
.chat-titles { flex: 1; min-width: 180px; }
.chat-titles h1 { font-size: 1.2rem; margin: 0; }
.chat-titles p { margin: 0; font-size: .84rem; }
.chat-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-page .dm-warn.banner { margin: 12px 18px 0; }
.dm-list { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 18px; max-height: min(62vh, 640px); overflow-y: auto; }
.dm-list.review { max-height: 60vh; padding: 0; }
.dm { display: flex; gap: 8px; align-items: flex-end; max-width: 82%; }
.dm.mine { align-self: flex-end; flex-direction: row-reverse; }
.dm-bubble { background: var(--surface-2); border-radius: 16px 16px 16px 5px; padding: 8px 12px 6px; min-width: 0; }
.dm.mine .dm-bubble { background: var(--brand); color: var(--brand-ink); border-radius: 16px 16px 5px 16px; }
.dm-bubble strong { display: block; font: 650 .76rem var(--f-display); color: var(--brand-text); }
.dm-bubble .post-body { margin: 0; font-size: .93rem; overflow-wrap: anywhere; }
.dm-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: .68rem; opacity: .7; }
.dm-meta .icon-btn { padding: 1px; color: inherit; }
.dm-meta .icon-btn .icon { width: 12px; height: 12px; }
.dm-day { align-self: center; margin: 8px 0 2px; font: 650 .72rem var(--f-display); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dm-notice { align-self: center; text-align: center; margin: 2px 0; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); font-size: .76rem; color: var(--muted); max-width: 90%; }
.dm-empty { text-align: center; margin: 30px 0; }
.dm-form { padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.dm-form .lite-edit { flex: 1; max-height: 160px; overflow-y: auto; }
.dm-closed { display: flex; gap: 8px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); margin: 0; font-size: .86rem; }
.dm-closed .icon { width: 15px; height: 15px; }

/* ---------- admin: private messages ---------- */
.chat-admin { padding: 4px 6px; }
.ca-row { display: flex; align-items: center; gap: 12px; padding: 12px 8px; }
.ca-row + .ca-row { border-top: 1px solid var(--line); }
.ca-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ca-main small { font-size: .8rem; }
.top-search.bell, .desk-btn.bell { position: relative; }

/* ---------- inbox: mentions ---------- */
.inbox-head .at { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--brand-soft); color: var(--brand-text); font: 800 .8rem var(--f-display); }
.mention-list { padding: 4px 6px; }
.mention-row { display: flex; gap: 10px; padding: 12px 8px; }
.mention-row + .mention-row { border-top: 1px solid var(--line); }
.mr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mr-top { font-size: .84rem; }
.mr-where { font: 650 .86rem var(--f-display); color: var(--brand-text); text-decoration: none; }
.mr-body { margin: 2px 0 4px; font-size: .9rem; background: var(--surface-2); border-radius: 4px 14px 14px 14px; padding: 8px 12px; }
.mr-reply .lite-edit { flex: 1; }
.mr-sent { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .84rem; color: var(--court); }
.mr-sent .icon { width: 14px; height: 14px; }

/* ---------- chat mode ---------- */
.chat-back { display: none; }
/* On a computer the conversation is a tall panel with the message box at the bottom. */
@media (min-width: 900px) {
  body.chat-mode .chat-page { height: calc(100vh - 170px); min-height: 460px; }
  body.chat-mode .dm-list { flex: 1; max-height: none; }
}
/* On a phone the app steps back: no club header or tabs, the chat fills the screen like WhatsApp. */
@media (max-width: 899px) {
  body.chat-mode .topbar, body.chat-mode .tabbar, body.chat-mode .crumbs, body.chat-mode .demo-banner { display: none !important; }
  body.chat-mode .main { padding: 0; }
  body.chat-mode .chat-page {
    position: fixed; inset: 0; z-index: 40; border-radius: 0; box-shadow: none; border: 0;
    height: 100dvh; background: var(--bg);
  }
  body.chat-mode .chat-head { padding: calc(10px + var(--sat)) 12px 10px 6px; gap: 8px; background: var(--surface); flex-wrap: nowrap; }
  body.chat-mode .chat-back { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); flex: 0 0 auto; }
  body.chat-mode .chat-back .icon { width: 24px; height: 24px; }
  body.chat-mode .chat-head .avatar, body.chat-mode .chat-head .chat-ava { width: 38px; height: 38px; }
  body.chat-mode .chat-titles { min-width: 0; }
  body.chat-mode .chat-titles h1 { font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.chat-mode .chat-titles p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .76rem; }
  body.chat-mode .chat-tools { flex-wrap: nowrap; }
  body.chat-mode .chat-tools .btn { padding: 6px 8px; font-size: 0; gap: 0; }
  body.chat-mode .chat-tools .btn .icon { width: 18px; height: 18px; }
  body.chat-mode .chat-tools [data-chat-leave] { font-size: .76rem; }
  body.chat-mode .chat-page .dm-warn.banner { margin: 8px 10px 0; padding: 6px 10px; font-size: .72rem; }
  body.chat-mode .dm-list { flex: 1; max-height: none; padding: 10px 12px; }
  body.chat-mode .dm { max-width: 88%; }
  body.chat-mode .dm-form { background: var(--surface); padding: 8px 10px calc(8px + var(--sab)); }
  body.chat-mode .dm-form > .avatar { display: none; }
  body.chat-mode .dm-closed { background: var(--surface); padding-bottom: calc(14px + var(--sab)); }
}
.dm.mine .post-body, .dm.mine .post-body .mention { color: var(--brand-ink); }
.chat-titles { all: unset; cursor: pointer; flex: 1; min-width: 180px; }
.chat-titles:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.dm-warn .short { display: none; }
.chat-people { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
@media (max-width: 899px) {
  body.chat-mode .chat-tools [data-chat-rename], body.chat-mode .chat-tools [data-chat-leave] { display: none; }
  body.chat-mode .chat-page .dm-warn .full { display: none; }
  body.chat-mode .chat-page .dm-warn .short { display: inline; }
  body.chat-mode .chat-titles { min-width: 0; }
}
.paper-actions .pa-person li[data-action-what] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.paper-actions .pa-person li[data-action-what] > span:first-child { flex: 1; min-width: 0; }
.pa-assign:empty { display: none; }

/* Phones: room in the top bar for the inbox as well. */
@media (max-width: 520px) {
  .topbar { gap: 7px; }
  .topbar .club-mark { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .topbar .club-name { display: none; }
  .topbar-logo { max-width: 108px; height: auto; max-height: 34px; object-fit: contain; }
  .topbar .top-search { width: 34px; height: 34px; flex: 0 0 auto; }
  .topbar .book-btn { padding: 7px 11px; flex: 0 0 auto; }
}

/* ---------- chat, redesigned: a sidebar of chats on computers, a rich header, grouped bubbles ---------- */
.chat-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 1100px) { .chat-shell { grid-template-columns: 300px minmax(0, 1fr); } }
.chat-rail { display: none; }
@media (min-width: 1100px) {
  .chat-rail { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 10px; height: calc(100vh - 150px); min-height: 480px; overflow: hidden; }
}
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 6px; }
.rail-head h2 { margin: 0; font-size: 1.15rem; }
.rail-head .icon-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-text); display: grid; place-items: center; }
.rail-back { display: flex; align-items: center; gap: 6px; padding: 4px 8px 10px; font: 650 .8rem var(--f-display); color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.rail-back .icon { width: 15px; height: 15px; }
.rail-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.chat-row.on { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }

.chat-page { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow); background: var(--surface); height: calc(100vh - 150px); min-height: 480px; padding: 0; }
.chat-head {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 0; flex-wrap: nowrap;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--brand) 85%, #fff 0%), var(--brand-deep) 70%);
  color: #fff; overflow: hidden;
}
.chat-head::after { content: ""; position: absolute; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(255,255,255,.08); box-shadow: 0 0 0 30px rgba(255,255,255,.03); pointer-events: none; }
.chat-head > .avatar { width: 46px; height: 46px; font-size: .95rem; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.chat-faces { display: flex; flex: 0 0 auto; }
.chat-faces .avatar { width: 40px; height: 40px; font-size: .8rem; box-shadow: 0 0 0 3px var(--brand-deep); }
.chat-faces .avatar + .avatar { margin-left: -12px; }
.chat-faces .avatar.more { background: rgba(255,255,255,.18) !important; color: #fff; }
.chat-titles { all: unset; cursor: pointer; flex: 1; min-width: 0; }
.chat-titles h1 { margin: 0; font-size: 1.22rem; line-height: 1.3; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.chat-titles p { margin: 1px 0 0; font-size: .82rem; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-titles:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.chat-tools { display: flex; gap: 6px; flex: 0 0 auto; position: relative; z-index: 1; }
.ch-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 11px; justify-content: center; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font: 650 .8rem var(--f-display); backdrop-filter: blur(6px); transition: background .15s; }
.ch-btn:hover { background: rgba(255,255,255,.22); }
.ch-btn .icon { width: 18px; height: 18px; }
.ch-btn[data-muted="1"] { background: var(--accent); color: var(--accent-ink); }
.chat-back { color: #fff !important; }

.dm-scroll {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 16px 20px 20px;
  background-color: var(--bg);
  background-image: radial-gradient(color-mix(in oklab, var(--brand) 14%, transparent) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.dm-lock { align-self: center; display: flex; gap: 8px; align-items: flex-start; max-width: 520px; margin: 4px 0 12px; padding: 9px 14px; border-radius: 14px;
  background: color-mix(in oklab, var(--accent) 16%, var(--surface)); color: color-mix(in oklab, var(--ink) 75%, var(--warn)); font-size: .76rem; line-height: 1.45; box-shadow: var(--shadow-sm); }
.dm-lock .icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--warn); }
.dm-day { position: sticky; top: 0; z-index: 2; align-self: center; margin: 12px 0 8px; }
.dm-day span { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); font: 700 .7rem var(--f-display); letter-spacing: .04em; color: var(--muted); }
.dm-notice { align-self: center; margin: 8px 0; padding: 5px 12px; border-radius: 999px; background: color-mix(in oklab, var(--brand) 8%, var(--surface)); color: var(--brand-text); font-size: .74rem; text-align: center; max-width: 90%; box-shadow: var(--shadow-sm); }

.dm { display: flex; align-items: flex-end; gap: 8px; max-width: min(78%, 560px); }
.dm.first { margin-top: 8px; }
.dm.mine { align-self: flex-end; }
.dm > .avatar.sm, .dm-gap { flex: 0 0 auto; width: 28px; height: 28px; }
.dm > .avatar.sm { font-size: .62rem; }
.dm-bubble { position: relative; min-width: 0; padding: 7px 12px 6px; border-radius: 6px 18px 18px 6px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 1px var(--line); }
.dm.first .dm-bubble { border-top-left-radius: 18px; }
.dm.last .dm-bubble { border-bottom-left-radius: 4px; }
.dm.mine .dm-bubble { border-radius: 18px 6px 6px 18px; color: #fff; box-shadow: 0 6px 16px -10px var(--brand-deep);
  background: linear-gradient(150deg, color-mix(in oklab, var(--brand) 92%, #fff 8%), var(--brand) 60%, color-mix(in oklab, var(--brand) 80%, var(--brand-deep))); }
.dm.mine.first .dm-bubble { border-top-right-radius: 18px; }
.dm.mine.last .dm-bubble { border-bottom-right-radius: 4px; }
.dm-bubble strong { display: block; margin-bottom: 1px; font: 700 .76rem var(--f-display); color: var(--brand-text); }
.dm-bubble .post-body { margin: 0; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.dm.mine .dm-bubble .post-body, .dm.mine .dm-bubble .mention { color: #fff; }
.dm-meta { float: right; display: inline-flex; align-items: center; gap: 2px; margin: 6px 0 -2px 10px; font-size: .66rem; line-height: 1; opacity: .6; white-space: nowrap; }
.dm-flag { all: unset; cursor: pointer; display: none; padding: 0 0 0 4px; }
.dm-flag .icon { width: 11px; height: 11px; }
.dm:hover .dm-flag, .dm-flag:focus-visible { display: inline-flex; }
@media (hover: none) { .dm-flag { display: inline-flex; } }
/* Reactions on private messages: a smiley by the time, chips tucked under the bubble's bottom edge like WhatsApp. */
.dm-react-btn { all: unset; cursor: pointer; display: none; padding: 0 0 0 5px; }
.dm-react-btn .icon { width: 13px; height: 13px; }
.dm:hover .dm-react-btn, .dm-react-btn:focus-visible { display: inline-flex; }
@media (hover: none) { .dm-react-btn { display: inline-flex; } }
.dm-reacts { clear: both; position: relative; z-index: 1; display: flex; gap: 3px; margin: 4px -4px -25px; }
.dm.mine .dm-reacts { justify-content: flex-end; }
.dm-reacts:empty { display: none; }
.dm-bubble:has(.dm-reacts .react) { margin-bottom: 18px; }
.dm-reacts .react { height: 24px; padding: 0 7px; gap: 3px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: .72rem; }
.dm-reacts .react .e { font-size: .88rem; }
.dm-reacts .react.mine { background: color-mix(in oklab, var(--brand) 12%, var(--surface)); border-color: color-mix(in oklab, var(--brand) 45%, var(--line)); color: var(--brand-text); }
.dm-bubble.held { transform: scale(.98); transition: transform .15s; }
@media (hover: none) { .dm-bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
.react-pop .rp-copy { display: inline-grid; place-items: center; color: var(--muted); margin-left: 2px; box-shadow: inset 1px 0 0 var(--line); border-radius: 0 50% 50% 0; }
.react-pop .rp-copy .icon { width: 18px; height: 18px; }
.dm-empty { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); }
.dm-empty .dm-wave { font-size: 2.2rem; }
.dm-empty strong { color: var(--ink); font: 700 1.05rem var(--f-display); }
.dm-empty p { margin: 0; font-size: .86rem; }

.dm-compose { display: flex; align-items: flex-end; gap: 10px; padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--line); }
.dm-field { flex: 1; min-width: 0; border-radius: 22px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); padding: 0 16px; transition: box-shadow .15s; }
.dm-field:focus-within { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--brand) 55%, var(--line)); background: var(--surface); }
/* Olly, 13 Nov: the cursor sat low. One line is now exactly the send button's 46px (11 + 24 + 11) on a whole pixel line height,
   so the text, the cursor and the button share one centre line. */
.dm-field .lite-edit { max-height: 140px; overflow-y: auto; outline: none; font-size: .95rem; line-height: 24px; padding: 11px 0; border: 0; border-radius: 0; background: none; min-height: 46px; }
.dm-field .lite-edit:focus { box-shadow: none; }
/* iPhones zoom the whole page into any box with text under 16px, which pushed the chat off the side of the screen. */
@media (hover: none) and (pointer: coarse) { .lite-edit, input, textarea, select { font-size: max(16px, 1em); } .dm-field .lite-edit { font-size: 16px; } }
.dm-send { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--accent) 80%, #000); transition: transform .15s var(--ease); }
.dm-send:hover { transform: scale(1.06); }
.dm-send:active { transform: scale(.94); }
.dm-send .icon { width: 20px; height: 20px; stroke-width: 2.2; margin-left: -2px; }
.dm-closed { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 0; padding: 16px; background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }

/* Phones: full screen chat mode keeps the rich header and pins the message box. */
@media (max-width: 899px) {
  body.chat-mode .chat-shell { display: block; }
  body.chat-mode .chat-page { position: fixed; inset: 0 0 auto 0; z-index: 40; width: 100%; height: var(--chat-vh, 100dvh); min-height: 0; border-radius: 0; box-shadow: none; transform: translateY(var(--chat-top, 0px)); }
  html:has(body.chat-mode), body.chat-mode { overflow: hidden; overscroll-behavior: none; }
  body.chat-mode .chat-head { padding: calc(10px + var(--sat)) 12px 12px 4px; gap: 8px; background: radial-gradient(120% 140% at 0% 0%, var(--brand), var(--brand-deep) 70%); }
  body.chat-mode .chat-back { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; }
  body.chat-mode .chat-head > .avatar { width: 38px; height: 38px; }
  body.chat-mode .chat-faces .avatar { width: 32px; height: 32px; }
  body.chat-mode .chat-titles h1 { font-size: 1.02rem; }
  body.chat-mode .chat-titles p { font-size: .74rem; }
  body.chat-mode .ch-btn span { display: none; }
  body.chat-mode .ch-btn { height: 36px; min-width: 36px; padding: 0; }
  body.chat-mode .dm-scroll { padding: 10px 12px 14px; }
  body.chat-mode .dm { max-width: 86%; }
  body.chat-mode .dm-compose { padding: 8px 10px calc(8px + var(--sab)); }
  body.chat-mode.kb-open .dm-compose { padding-bottom: 8px; }
  body.chat-mode .dm-closed { padding-bottom: calc(16px + var(--sab)); }
}
@media (min-width: 900px) and (max-width: 1099px) { .chat-page { height: calc(100vh - 150px); } }
.chat-faces .avatar + .avatar { margin-left: -8px; }
@media (min-width: 1100px) { .chat-rail, body.chat-mode .chat-page { height: calc(100vh - 150px); } }
.dm-lock .short { display: none; }
button.dm-lock { border: 0; font: inherit; text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
button.dm-lock:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
button.dm-lock:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dm-lock-text { flex: 1 1 auto; min-width: 0; }
.dm-lock-more { display: block; margin-top: 3px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.linkish { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.privacy-points { display: grid; gap: 14px; margin: 4px 0 16px; }
.pp-row { display: flex; gap: 12px; align-items: flex-start; }
.pp-row strong { display: block; font-size: .92rem; }
.pp-row p { margin: 2px 0 0; font-size: .84rem; color: var(--muted); line-height: 1.45; }
.pp-ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 18%, var(--surface)); color: var(--ink); }
.pp-ic .icon { width: 17px; height: 17px; }
.pp-tip { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.pp-tip .icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; }

@media (max-width: 899px) { .dm-lock .full { display: none; } .dm-lock .short { display: inline; } .dm-lock { font-size: .72rem; padding: 7px 12px; } }

/* ---------- event and match page hero ---------- */
.event-page { max-width: 900px; overflow: hidden; }
.ev-hero {
  --h1: var(--brand); --h2: var(--brand-deep); --hk: var(--accent);
  position: relative; margin: -24px -26px 4px; padding: 20px 26px 22px; color: #fff; overflow: hidden; isolation: isolate;
  background: radial-gradient(130% 120% at 0% 0%, var(--h1), var(--h2) 72%);
}
.ev-hero.t-match { --h1: #1b9a73; --h2: #0b4a39; }
.ev-hero.t-training { --h1: #2fa6a0; --h2: #124d4a; --hk: #bff3ee; }
.ev-hero.t-social { --h1: #e0567c; --h2: #6e1a37; --hk: #ffd6e2; }
.ev-hero.off { filter: grayscale(.85); }
/* Court lines behind the hero, drawn with gradients. */
.ev-hero::before { content: ""; position: absolute; inset: -2px; z-index: -1; opacity: .08;
  background:
    linear-gradient(#fff, #fff) 50% 0 / 2px 100% no-repeat,
    linear-gradient(#fff, #fff) 0 22% / 100% 2px no-repeat,
    linear-gradient(#fff, #fff) 0 78% / 100% 2px no-repeat,
    linear-gradient(#fff, #fff) 22% 0 / 2px 100% no-repeat,
    linear-gradient(#fff, #fff) 78% 0 / 2px 100% no-repeat,
    linear-gradient(#fff, #fff) 22% 50% / 56% 2px no-repeat; }
.ev-hero::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 230px; height: 230px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 35% 35%, color-mix(in oklab, var(--hk) 70%, #fff), var(--hk) 55%, color-mix(in oklab, var(--hk) 70%, #000)); opacity: .14; }
.evh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.evh-kind { display: inline-flex; align-items: center; gap: 7px; font: 800 .7rem var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--hk); }
.evh-kind .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.evh-close { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; }
.evh-close:hover { background: rgba(255,255,255,.24); }
.evh-close .icon { width: 18px; height: 18px; }
.evh-title { margin: 14px 0 4px; color: #fff; font-size: clamp(1.6rem, 4vw, 2.3rem); letter-spacing: -.02em; line-height: 1.1; }
.evh-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 18px 0 6px; }
.evh-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.evh-team strong { font: 750 clamp(.95rem, 2.4vw, 1.2rem)/1.2 var(--f-display); color: #fff; overflow-wrap: anywhere; }
.evh-crest { width: clamp(54px, 9vw, 72px); height: clamp(54px, 9vw, 72px); border-radius: 50%; display: grid; place-items: center; font: 800 1.15rem var(--f-display); letter-spacing: .02em; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
.evh-crest.ours { background: var(--hk); color: var(--h2); box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 10px 24px -10px rgba(0,0,0,.5); }
.evh-crest.ours img { width: 64%; height: 64%; object-fit: contain; }
.evh-crest.opp { background: rgba(255,255,255,.95); color: var(--h2); }
.evh-vs { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.evh-vs span { font: 800 1.9rem/1 var(--f-display); color: var(--hk); }
.evh-vs small { font: 700 .8rem var(--f-display); color: rgba(255,255,255,.8); }
.evh-score { display: flex; align-items: center; gap: 12px; }
.evh-score b { font: 800 clamp(2rem, 6vw, 2.8rem)/1 var(--f-display); color: #fff; }
.evh-score span { font: 800 .66rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--h2); background: var(--hk); padding: 4px 9px; border-radius: 999px; }
.evh-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin-top: 14px; }
.ev-hero.t-social .evh-chips, .ev-hero.t-training .evh-chips, .ev-hero.t-club .evh-chips { justify-content: flex-start; }
.evh-admin { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); }
.evh-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--h2); font: 700 .82rem var(--f-display); box-shadow: 0 2px 8px -2px rgba(0,0,0,.25); }
.evh-btn:hover { background: #fff; }
.evh-btn .icon { width: 15px; height: 15px; }
.evh-btn + .evh-btn { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; backdrop-filter: blur(6px); }
.evh-btn + .evh-btn:hover { background: rgba(255,255,255,.22); }
.evh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.13); color: #fff; font: 650 .78rem var(--f-display); backdrop-filter: blur(6px); }
.evh-chip .icon { width: 14px; height: 14px; }
.evh-chip.strong { background: rgba(255,255,255,.22); }
.evh-chip.you { background: var(--hk); color: var(--h2); }
@media (max-width: 600px) { .ev-hero { margin: -18px -16px 4px; padding: 16px 16px 18px; } .evh-board { gap: 6px; } }

/* Countdown in the match hero */
.evh-count { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 14px 0 2px; }
.evh-count > small { font: 800 .64rem var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: var(--hk); }
.evh-count .cd { gap: 8px; }
.evh-count .cd-u { min-width: 58px; padding: 9px 8px 7px; border-radius: 14px; background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.evh-count .cd-u:last-child { background: var(--hk); color: var(--h2); box-shadow: none; }
.evh-count .cd-u b { font-size: 1.65rem; }
.evh-count .cd-now { color: var(--hk); font-size: 1.4rem; }
.evh-count .cd-now + small { color: #fff; opacity: .8; }
.ev-hero:not(.t-match) .evh-count { align-items: flex-start; }
@media (max-width: 600px) { .evh-count .cd-u { min-width: 50px; } .evh-count .cd-u b { font-size: 1.35rem; } }

/* Event hero uses the home page look: the club green, a court plan drawn in fine lines, and a fine grain. */
.ev-hero {
  background:
    radial-gradient(70% 120% at 92% -10%, color-mix(in oklab, var(--h1) 80%, #fff 20%), transparent 62%),
    radial-gradient(60% 90% at -10% 120%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
    linear-gradient(135deg, var(--h1) 0%, var(--h2) 60%, color-mix(in oklab, var(--h2) 70%, #000) 100%);
}
.ev-hero.t-match { --h1: var(--brand); --h2: var(--brand-deep); }
.ev-hero.t-club { --h1: var(--brand); --h2: var(--brand-deep); }
.ev-hero::before {
  inset: 0; opacity: .18; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ev-hero::after {
  right: -60px; bottom: -110px; width: 520px; height: 330px; border-radius: 0; opacity: .14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Crect x='6' y='6' width='388' height='248' rx='2'/%3E%3Cpath d='M200 6v248M6 36h388M6 224h388M100 36v188M300 36v188M100 130h200'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-14deg);
}
@media (max-width: 600px) { .ev-hero::after { width: 380px; height: 240px; right: -90px; bottom: -90px; } }
.ev-hero.t-match::after { /* a TV view of the court, in perspective, between the two teams */
  right: 50%; margin-right: -230px; top: auto; bottom: -6px; margin-top: 0; width: 460px; height: 300px; transform: none; opacity: .2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg fill='none' stroke='%23fff' stroke-linejoin='round'%3E%3Cpath stroke-width='2.4' d='M20 250 L110 20 L290 20 L380 250 Z'/%3E%3Cpath stroke-width='1.6' d='M60 250 L132 20 M340 250 L268 20'/%3E%3Cpath stroke-width='1.6' d='M86.6 165 L313.4 165 M118.8 62 L281.2 62 M200 165 L200 62'/%3E%3Cpath stroke-width='1.6' d='M196 250 L204 250'/%3E%3Cpath stroke-width='4' d='M66 110 L334 110'/%3E%3Cpath stroke-width='2' opacity='.6' d='M66 110 L66 96 M334 110 L334 96 M66 96 L334 96'/%3E%3C/g%3E%3C/svg%3E") center bottom / contain no-repeat;
}
@media (max-width: 600px) { .ev-hero.t-match::after { margin-right: -170px; width: 340px; height: 222px; } }

/* Inbox: both column headings the same height so the cards line up; the policy note sits inside the messages card. */
.inbox-head { min-height: 32px; margin: 0 2px 12px; }
.inbox-head h2 { line-height: 1.2; }
.inbox-head .muted { font-size: .84rem; }
.chat-list-card .empty { padding: 34px 20px; }
.chat-list-foot { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; padding: 12px 10px 8px; border-top: 1px solid var(--line); font-size: .76rem; line-height: 1.45; color: var(--muted); }
.chat-list-foot .icon { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
.card.task-list .empty, .chat-list-card .empty { min-height: 160px; justify-content: center; }

/* Match page venue card (Nov 2026 refresh): calmer map, clear address, one tap directions */
.ev-venue { position: relative; border-radius: 20px; }
.ev-venue .evm-map { height: 190px; }
.ev-venue .evm-map::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36px; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--surface) 55%, transparent)); pointer-events: none; z-index: 400; }
.ev-venue .leaflet-control-attribution { font-size: 9.5px; line-height: 1.4; padding: 1px 6px; margin: 0 6px 6px 0 !important; border-radius: 6px; background: color-mix(in oklab, var(--surface) 82%, transparent) !important; color: var(--muted); white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 401; }
.ev-venue .leaflet-control-attribution a { color: var(--muted); text-decoration: none; }
.evm-expand { position: absolute; top: 10px; right: 10px; z-index: 450; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; border: 0; cursor: pointer; background: color-mix(in oklab, var(--surface) 92%, transparent); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 6px 16px -8px rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.evm-expand .icon { width: 17px; height: 17px; }
.evm-expand:active { transform: scale(.95); }
.ev-venue.nomap .evm-expand { display: none; }
.ev-venue .evm-bar { flex-wrap: nowrap; align-items: flex-start; gap: 12px; padding: 14px 16px 4px; border-top: 0; }
.evm-pin { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 18%, var(--line)); }
.evm-pin .icon { width: 19px; height: 19px; }
.ev-venue .evm-txt { gap: 2px; }
.evm-kind { font: 800 .66rem var(--f-display) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-text) !important; }
.ev-venue .evm-txt strong { font-size: 1rem; line-height: 1.3; }
.evm-sub:empty { display: none; }
.evm-acts { display: flex; gap: 8px; padding: 12px 16px 16px; }
.evm-acts .btn { flex: 0 0 auto; }
.evm-acts .btn.primary { flex: 1; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.12); }
.evm-acts .btn .icon { color: currentColor; }
/* The organiser's note: reads as a note, not a help box */
.detail-list > div.ev-note, .laid-out .detail-list > div.ev-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 3px 0 0 var(--brand), inset 0 0 0 1px var(--line); }
.ev-note > .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--brand-text); }
.ev-note .post-body { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
/* Event hero: yellow is kept for the crest and "You're playing" only, so it stays meaningful */
.evh-kind { color: rgba(255,255,255,.78); }
.evh-vs span { color: #fff; opacity: .92; }
.evh-count > small { color: rgba(255,255,255,.72); }
.evh-count .cd-u:last-child { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.evh-count .cd-now { color: #fff; }
/* The club's own logo (often a yellow ball) sits on white so it never vanishes into the yellow */
.evh-crest.ours:has(img) { background: #fff; }
.evh-crest.ours img { width: 78%; height: 78%; }
.evh-score span { background: rgba(255,255,255,.92); color: var(--h2); }

/* Team Results tab */
.res-season { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.rs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rs-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; background: var(--surface-2); }
.rs-stats b { font: 800 1.6rem/1 var(--f-display); }
.rs-stats small { font: 700 .66rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rs-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .88rem; }
.rs-form { display: inline-flex; align-items: center; gap: 6px; }
.rs-form small { font: 700 .66rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.rs-form .wdl { width: 26px; height: 26px; border-radius: 7px; font-size: .75rem; }
.res-season > .btn { align-self: flex-start; }
.res-all { margin-top: 14px; }
.res-all .res-info a { color: inherit; text-decoration: none; }
.res-all .res-info a:hover { color: var(--brand-text); }
.res-all { padding: 8px 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); gap: 0; }
.res-all .res-row { padding: 10px 0; }
.res-all .res-row + .res-row { border-top: 1px solid var(--line); }
/* Team header: the season in numbers */
.season-strip { order: 3; flex: 1 1 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); }
.ss-league { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 800 .72rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.ss-league > .icon { width: 15px; height: 15px; color: var(--accent); }
.ss-league a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ss-league a .icon { width: 13px; height: 13px; opacity: .7; }
.ss-league a:hover { color: #fff; }
.ss-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-stats > div { display: flex; flex-direction: column; gap: 3px; min-width: 84px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.ss-stats b { font: 800 1.45rem/1 var(--f-display); color: #fff; display: inline-flex; align-items: baseline; gap: 4px; }
.ss-stats b i { font-style: normal; font-weight: 500; opacity: .45; font-size: 1.1rem; }
.ss-stats small { font: 700 .62rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ss-stats .ss-rub { background: rgba(255,255,255,.18); }
@media (max-width: 600px) { .ss-stats { display: grid; grid-template-columns: repeat(2, 1fr); } .ss-stats > div { min-width: 0; } }

/* The next match card opens the match from anywhere on it, except its own buttons */
.next-card[data-open-card] { cursor: pointer; transition: transform .18s var(--ease), box-shadow .2s; }
@media (hover: hover) { .next-card[data-open-card]:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } }
.next-card[data-open-card]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ---------- Hit with me page (Nov 2026 refresh) ---------- */
.hit-page.event-page { padding: 0; overflow: hidden; }
.hp-hero { display: flex; gap: 16px; align-items: flex-start; padding: 26px 26px 22px; background: radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 55%), linear-gradient(135deg, var(--brand-soft), var(--surface)); border-bottom: 1px solid var(--line); }
.hp-ico { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); color: var(--brand-text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 20%, var(--line)), var(--shadow-sm); }
.hp-ico .icon { width: 26px; height: 26px; }
.hp-titles { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hp-kind { margin: 0; font: 800 .7rem var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-text); }
.hp-titles h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -.02em; line-height: 1.1; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: center; }
.hp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 650 .8rem var(--f-display); }
.hp-chip .icon { width: 14px; height: 14px; color: var(--brand-text); }
.hp-chip.strong { background: var(--brand); color: #fff; box-shadow: none; }
.hp-chip.strong .icon { color: #fff; }
.hp-chips .hit-state { padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: .8rem; }
.hit-page.off .hp-hero { filter: grayscale(.7); }
.hp-cols { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 24px; }
.hp-main, .hp-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 900px) { .hp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; } .hp-side { position: sticky; top: 20px; } }
@media (max-width: 899px) {
  .hp-main, .hp-side { display: contents; }
  .hp-main > .hp-box { order: 1; } .hp-main > .hit-box { order: 2; } .hp-side > .hp-where { order: 3; } .hp-side > .hp-note { order: 4; } .hp-main > .hit-chat { order: 5; } .hp-side > .hp-manage { order: 6; }
}
.hp-box, .hit-page .hit-box { margin: 0; padding: 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.hp-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.hp-box-head .eyebrow { margin: 0; display: flex; align-items: center; gap: 6px; }
.hp-box-head .eyebrow .icon { width: 15px; height: 15px; }
.hp-box-head small { font-size: .8rem; }
.hit-page .hit-p { padding: 8px 10px 8px 8px; border-radius: 14px; background: var(--surface-2); }
.hit-page .hit-p em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font: 650 .78rem var(--f-display); }
.hit-page .hit-p em .icon { width: 13px; height: 13px; }
.hit-page .hit-p.in em { background: color-mix(in oklab, var(--court) 13%, var(--surface)); color: var(--court); }
.hit-page .hit-p.wait em { background: color-mix(in oklab, var(--warn) 14%, var(--surface)); color: var(--warn); }
.hit-page .hit-p.out em { background: color-mix(in oklab, var(--danger) 11%, var(--surface)); color: var(--danger); }
.hit-page .hit-chat { margin: 0; padding-top: 4px; }
.hp-where { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.hp-where > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-where strong { font: 700 1rem/1.3 var(--f-display); }
.hp-where .btn { grid-column: 1 / -1; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.12); }
.hp-where .btn .icon { color: currentColor; }
.hp-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 3px 0 0 var(--brand), inset 0 0 0 1px var(--line); }
.hp-note > .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--brand-text); }
.hp-note small { display: block; color: var(--muted); font-size: .76rem; font-weight: 650; margin-bottom: 2px; }
.hp-note p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
.hp-manage { display: flex; flex-direction: column; gap: 8px; }
.hp-manage .btn { justify-content: center; }
@media (max-width: 600px) { .hp-hero { padding: 20px 16px 18px; } .hp-ico { width: 44px; height: 44px; } .hp-cols { padding: 16px 14px 20px; } }
.ss-stats .ss-pos { background: rgba(255,255,255,.18); }
.res-row.pending .muted { color: var(--warn); }
/* Won, drawn, lost: each number sits over its own label */
.ss-stats .ss-wdl { flex-direction: row; gap: 0; padding: 0; }
.ss-wdl > span { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; min-width: 64px; }
.ss-wdl > span + span { border-left: 1px solid rgba(255,255,255,.14); }
@media (max-width: 600px) { .ss-stats .ss-wdl { grid-column: 1 / -1; order: 10; } .ss-wdl > span { flex: 1; min-width: 0; } }
/* ---------- seasons ---------- */
.ss-league { flex-wrap: wrap; }
.ss-name { padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; letter-spacing: .1em; }
.ss-manage { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); font: 700 .74rem var(--f-display); letter-spacing: .02em; text-transform: none; }
.ss-manage .icon { width: 14px; height: 14px; color: #fff !important; }
.ss-manage:hover { background: rgba(255,255,255,.22); }
.season-strip.between .ss-league span { letter-spacing: .08em; }
.past-seasons { margin-top: 22px; }
.ps-card { padding: 0; overflow: hidden; }
.ps-card > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.ps-card > summary::-webkit-details-marker { display: none; }
.ps-card > summary > .icon:last-child { width: 18px; height: 18px; color: var(--muted); transition: transform .2s var(--ease); }
.ps-card[open] > summary > .icon:last-child { transform: rotate(180deg); }
.ps-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); }
.ps-ico .icon { width: 18px; height: 18px; }
.ps-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ps-t strong { font: 700 1rem var(--f-display); }
.ps-t small { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-sum { font: 700 .82rem var(--f-display); color: var(--brand-text); }
.ps-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.ps-body .res-all { margin: 0; box-shadow: inset 0 0 0 1px var(--line); }
.ps-body > .btn { align-self: flex-start; }
.ps-line { margin: -4px 0 0; font-size: .86rem; }
.se-label { font-size: .84rem; font-weight: 650; display: flex; gap: 8px; align-items: baseline; }
.se-team { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.se-team-name { margin: 0; display: flex; align-items: center; justify-content: space-between; font: 800 .68rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.se-team-name .linkish { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.se-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.se-p { display: flex; align-items: center; gap: 9px; padding: 7px 10px 7px 7px; border-radius: 12px; border: 0; cursor: pointer; text-align: left; font: 600 .88rem var(--f-body); color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.se-p > span:not(.avatar) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-p .icon { width: 16px; height: 16px; color: var(--brand-text); }
.se-p.on { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--brand) 55%, var(--line)); }
@media (max-width: 600px) { .ss-stats { grid-template-columns: repeat(3, 1fr); } .ss-stats > div { padding: 9px 10px; } .ss-stats b { font-size: 1.3rem; } }
.sheet .hint { font-size: .8rem; color: var(--muted); margin: 0; }
@media (max-width: 600px) {
  .ss-stats { grid-template-columns: repeat(6, 1fr); }
  .ss-stats > div { grid-column: span 2; }
  .ss-stats > .ss-wdl { grid-column: 1 / -1; order: 5; }
  .ss-stats > .ss-rub, .ss-stats > .ss-rub + div { grid-column: span 3; order: 6; }
}
.se-add { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.se-found { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
.se-found .se-p .icon { color: var(--brand-text); }
.tr-share { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
/* Club logo on the white crest: comfortably inside the circle, centred */
.evh-crest.ours:has(img) { overflow: hidden; }
.evh-crest.ours img { width: 62%; height: 62%; object-fit: contain; display: block; }

/* ---------- membership ---------- */
.mem-pill { --tone: var(--court); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 650 .76rem/1.2 var(--f-display); white-space: nowrap; color: var(--tone); background: color-mix(in oklab, var(--tone) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 24%, transparent); }
.mem-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mem-pill.soon { --tone: var(--warn); }
.mem-pill.late { --tone: var(--danger); }
.mem-pill.quiet { --tone: var(--muted); }
.mem-bar { --tone: var(--court); position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.mem-bar > span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, color-mix(in oklab, var(--tone) 70%, var(--surface)), var(--tone)); transition: width .6s var(--ease); }
.mem-bar.soon { --tone: var(--warn); }
.mem-bar.late { --tone: var(--danger); }
.mem-bar.late > span { min-width: 0; }
.mem-card { display: flex; flex-direction: column; gap: 14px; }
.mem-card.inset { padding: 16px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.mem-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mem-top h3 { margin: 2px 0 0; }
.mem-left { display: flex; flex-direction: column; gap: 8px; }
.mem-left > strong { font: 750 1.35rem/1.15 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mem-left > .muted { font-size: .86rem; }
.mem-pay { padding: 12px 14px; border-radius: var(--r-sm); background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 18%, transparent); font-size: .9rem; }
.mem-pay > strong { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--brand-text); }
.mem-pay .icon { width: 16px; height: 16px; }
.mem-stats button.stat { font: inherit; color: inherit; text-align: left; cursor: pointer; border: 0; }
.mem-stats button.stat:hover { box-shadow: var(--shadow), inset 0 0 0 1px var(--line-strong); }
.mem-tools { justify-content: space-between; }
.mem-tools .input { flex: 1 1 200px; max-width: 320px; }
.mem-filters { flex-wrap: wrap; }
.mem-list { display: flex; flex-direction: column; gap: 8px; }
.mem-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.mem-row:hover { box-shadow: var(--shadow), inset 0 0 0 1px var(--line-strong); }
.mem-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mem-row.dim, .mem-plans li.dim { opacity: .6; }
.mem-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mem-who strong { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mem-who small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-who .mem-bar { height: 5px; max-width: 260px; margin-top: 2px; }
.mem-side { display: flex; align-items: center; gap: 8px; }
.mem-bulk { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--brand-soft); }
.mem-bulk > .icon { width: 20px; height: 20px; color: var(--brand-text); flex: none; }
.mem-bulk > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mem-bulk small { color: var(--muted); font-size: .82rem; }
.mem-history, .mem-plans { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mem-history li, .mem-plans li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.mem-history li > div, .mem-plans li > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mem-history small, .mem-plans small { color: var(--muted); font-size: .8rem; }
.mem-pick { max-height: 260px; overflow: auto; flex-direction: column; align-items: stretch; padding: 4px 2px; }
.radio-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line); font-size: .9rem; cursor: pointer; }
.radio-row:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-soft); }
.fy-card.renew .fy-ico { background: color-mix(in oklab, var(--warn) 12%, var(--surface)); color: var(--warn); }
@media (max-width: 640px) {
  .mem-row { grid-template-columns: auto minmax(0, 1fr); }
  .mem-side { grid-column: 2; justify-content: space-between; }
  .mem-tools .input { max-width: none; }
}
.mem-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* ---------- court booking ---------- */
.bk-green { --bk: #15926f; } .bk-blue { --bk: #2f6fd6; } .bk-yellow { --bk: #d9a400; } .bk-purple { --bk: #7c4dce; }
.bk-orange { --bk: #e07a1f; } .bk-red { --bk: #c8423f; } .bk-grey { --bk: #7b817d; }
.bk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--bk, var(--muted)); flex: none; }
.bk-off { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 14px; }
.bk-off > span { flex: 1; display: flex; flex-direction: column; } .bk-off small { color: var(--muted); }
.bk-mine { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.bk-mine-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bk-mine-row { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.bk-mine-date { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; flex: none; }
.bk-mine-date b { font: 750 1.05rem var(--f-display); } .bk-mine-date small { font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.bk-mine-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bk-mine-txt small { color: var(--muted); font-size: .82rem; }
.bk-sheet { padding: 14px 14px 18px; }
.bk-days { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; align-items: stretch; }
.bk-days::-webkit-scrollbar { display: none; }
.bk-days button { flex: none; min-width: 52px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; cursor: pointer; color: var(--ink); font-family: var(--f-body); line-height: 1.15; }
.bk-days button small { font-size: .68rem; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
.bk-days button b { font: 750 1.05rem var(--f-display); }
.bk-days button.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.bk-days button.on small { color: color-mix(in oklab, var(--brand-ink) 80%, transparent); }
.bk-dayhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 2px 6px; }
.bk-dayhead h2 { font-size: 1.05rem; }
.bk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--muted); margin: 2px 2px 10px; }
.bk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bk-sheet { --hours: 52px; }
.bk-stick { position: sticky; top: var(--bk-top, 0px); z-index: 4; background: var(--surface); margin: 0 -14px; padding: 8px 14px 0; border-bottom: 1px solid var(--line); box-shadow: 0 8px 12px -12px rgba(0,0,0,.25); }
.bk-head { display: grid; grid-template-columns: var(--hours) repeat(var(--cols), minmax(0, 1fr)); gap: 0; padding: 4px 0 8px; }
.bk-grid { padding-top: 10px; }
.bk-head strong { font-size: .86rem; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-body { position: relative; display: grid; grid-template-columns: var(--hours) repeat(var(--cols), minmax(0, 1fr)); gap: 0; padding-bottom: 4px; }
.bk-lines { position: absolute; left: var(--hours); right: 0; top: 0; bottom: 0; pointer-events: none; }
.bk-lines i { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.bk-lines i.half { border-top: 1px dashed color-mix(in oklab, var(--line) 75%, transparent); }
.bk-lines i.q { border-top: 1px dotted color-mix(in oklab, var(--line) 55%, transparent); }
.bk-hours { position: relative; }
.bk-hr { position: absolute; right: 10px; transform: translateY(-50%); font-size: .7rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--surface); padding: 0 2px; }
.bk-hr:first-child { transform: translateY(-2px); }
.bk-col { position: relative; border-left: 1px solid var(--line); }
.bk-col:last-of-type { border-right: 1px solid var(--line); }
.bk-free { position: absolute; left: 4px; right: 4px; border: 0; background: none; border-radius: 8px; cursor: pointer; padding: 0; display: grid; place-items: center; color: transparent; font: 650 .74rem var(--f-body); transition: background .15s, color .15s; }
.bk-free span { display: inline-flex; align-items: center; gap: 4px; } .bk-free .icon { width: 12px; height: 12px; }
@media (hover: hover) { .bk-free:hover { background: color-mix(in oklab, var(--court) 12%, var(--surface)); color: var(--court); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 40%, transparent); } }
.bk-free:focus-visible, .bk-free:active { background: color-mix(in oklab, var(--court) 14%, var(--surface)); color: var(--court); outline: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 45%, transparent); }
.bk-block { position: absolute; left: 4px; right: 4px; margin-top: 2px; z-index: 1; border: 0; border-radius: 10px; padding: 5px 8px; text-align: left; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; gap: 1px;
  background: color-mix(in oklab, var(--bk) 14%, var(--surface)); color: var(--ink); box-shadow: inset 3px 0 0 var(--bk), 0 1px 2px rgba(0,0,0,.04); font-family: var(--f-body); transition: transform .15s var(--ease), box-shadow .15s; }
.bk-block strong { font-size: .78rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.bk-block strong .icon { margin-right: 3px; }
.bk-block small { font-size: .68rem; color: var(--ink-2); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-block .icon { width: 12px; height: 12px; flex: none; vertical-align: -2px; }
.bk-block.mine { background: var(--bk); color: #fff; box-shadow: 0 6px 14px -8px var(--bk); } .bk-block.mine small { color: rgba(255,255,255,.9); }
.bk-block.closed { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--bk) 12%, var(--surface)) 0 7px, color-mix(in oklab, var(--bk) 22%, var(--surface)) 7px 14px); }
@media (hover: hover) { .bk-block:hover { transform: translateY(-1px); box-shadow: inset 3px 0 0 var(--bk), 0 6px 14px -8px rgba(0,0,0,.3); } .bk-block.mine:hover { box-shadow: 0 8px 18px -8px var(--bk); } }
.bk-past { position: absolute; left: var(--hours); right: 0; top: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--surface-2) 70%, transparent) 0 6px, color-mix(in oklab, var(--surface) 50%, transparent) 6px 12px); }
.bk-past.now { border-bottom: 2px solid var(--danger); }
.bk-past.now::after { content: ""; position: absolute; left: -5px; bottom: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.bk-detail { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.bk-detail .icon { width: 14px; height: 14px; vertical-align: -2px; }
.bk-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 650; background: color-mix(in oklab, var(--bk) 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bk) 35%, transparent); }
.bk-types label { gap: 8px; }
.bk-clash { border-radius: 12px; padding: 12px 14px; background: color-mix(in oklab, var(--warn) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 35%, transparent); display: flex; flex-direction: column; gap: 8px; font-size: .86rem; }
.bk-clash ul { margin: 0; padding-left: 18px; max-height: 160px; overflow: auto; }
.bk-clash-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-switch { gap: 10px; }
.bk-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-gchk { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .86rem; font-weight: 600; cursor: pointer; }
.bk-gchk:has(input:checked) { background: var(--brand-soft); border-color: color-mix(in oklab, var(--brand) 45%, transparent); color: var(--brand-text); }
.bk-gchk input { accent-color: var(--brand); margin: 0; }
.bk-edit-list { display: flex; flex-direction: column; gap: 8px; }
.bk-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-edit > input.input { flex: 1 1 160px; min-width: 0; }
.bk-edit select.input { flex: 0 1 150px; width: auto; }
.bk-edit-type { padding: 10px; border-radius: 12px; background: var(--surface-2); }
.bk-upic { transform: rotate(180deg); }
.book-btn.active { outline: 2px solid color-mix(in oklab, var(--accent) 60%, #fff); outline-offset: 2px; }
@media (max-width: 520px) { .bk-sheet { padding: 12px 10px 16px; --hours: 40px; } .bk-stick { margin: 0 -10px; padding: 8px 10px 0; } .bk-block { padding: 3px 6px; left: 3px; right: 3px; } .bk-free { left: 3px; right: 3px; } .bk-hr { right: 6px; } }
.bk-detail { gap: 14px; }
.bk-detail-top { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk-facts > div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; line-height: 1.3; }
.bk-facts small { font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bk-facts strong { font-size: .95rem; } .bk-facts .muted { font-size: .8rem; }
.bk-section { display: flex; flex-direction: column; gap: 8px; }
.bk-section h3 { font-size: .9rem; }
.bk-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-people { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-person { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--surface-2); font-size: .88rem; font-weight: 600; line-height: 1.2; }
.bk-person > span { display: flex; flex-direction: column; }
.bk-person small { font-size: .72rem; color: var(--muted); font-weight: 600; }
.bk-person small a { color: var(--brand-text); }
.bk-contact .bk-person { align-self: flex-start; border-radius: 14px; }
.bk-cal { align-self: flex-start; }
.bk-venue { display: flex; flex-direction: column; }
.bk-venue .evm-map { height: 170px; }
.bk-venue .nav-apps { padding: 10px 12px 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.bk-mine-row { cursor: pointer; }

.bk-avail { font-size: .85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; margin-top: -4px; min-height: 1.2em; }
.bk-avail.ok { color: var(--court); } .bk-avail.warn { color: var(--warn); } .bk-avail .icon { width: 15px; height: 15px; }
.bk-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-more { align-self: flex-start; margin-top: 4px; }
.bk-courts .btn { align-self: center; }

.bk-home { padding: 0; gap: 0; overflow: hidden; }
.bk-home-head { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; }
.bk-home-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-md); }
.bk-home-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--court) 12%, var(--surface)); color: var(--court); flex: none; }
.bk-home-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.bk-home-txt strong { font: 700 1rem var(--f-display); letter-spacing: -.01em; }
.bk-home-txt small { color: var(--muted); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-home-head .chev { width: 18px; height: 18px; color: var(--muted); transition: transform .2s var(--ease); }
.bk-home-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.bk-home-body { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.bk-home-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-home .slot { border: 0; cursor: pointer; font-family: var(--f-body); }
.bk-home-note { font-size: .8rem; }
.bk-person .avatar { display: grid; place-items: center; line-height: 1; flex: none; }

/* ---------- members page and profiles ---------- */
.members-tile { text-decoration: none; color: inherit; margin-bottom: 18px; }
.members-tile > .icon:last-child { width: 16px; height: 16px; color: var(--muted); }
.dir-row { text-decoration: none; color: inherit; }
.dir-mem { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 150px; text-align: right; }
.dir-mem small { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.dir-mem .mem-bar { width: 140px; height: 5px; }
.fam-chip { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 2px; padding: 2px 9px; border-radius: 999px; font: 650 .74rem/1.4 var(--f-display); color: var(--brand-text); background: var(--brand-soft); }
.fam-chip .icon, .fam-names .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.fam-names { color: var(--muted); font-size: .78rem; }
.profile-head { display: flex; align-items: center; gap: 18px; padding: 22px; flex-wrap: wrap; margin-top: 12px; }
.profile-head > .avatar { width: 72px; height: 72px; font-size: 1.5rem; flex: none; }
.profile-who { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.profile-who h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); }
.profile-mail { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-text); font-weight: 600; font-size: .9rem; text-decoration: none; word-break: break-all; }
.profile-mail .icon { width: 15px; height: 15px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.fam-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.fam-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.fam-list li > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fam-list small { color: var(--muted); font-size: .8rem; }
.fam-list a { color: inherit; }
.detail-list { margin: 0; display: grid; gap: 12px; }
.detail-list dt { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 650; }
.detail-list dd { margin: 2px 0 0; font-weight: 600; line-height: 1.45; }
.detail-list a { color: var(--brand-text); }
.money-in { display: flex; align-items: center; gap: 8px; }
.money-in > span { font: 700 1.1rem var(--f-display); color: var(--muted); }
.money-in .input { font: 700 1.15rem var(--f-display); max-width: 200px; }
[data-quick] { margin-top: 8px; }
.warn-note { color: var(--warn); display: flex; gap: 6px; align-items: flex-start; }
.warn-note .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
@media (max-width: 760px) {
  .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .dir-row { grid-template-columns: auto minmax(0, 1fr); }
  .dir-mem { grid-column: 2; align-items: flex-start; text-align: left; min-width: 0; }
}

.bk-jump { position: relative; overflow: hidden; }
.bk-jump input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.bk-dayhead { align-items: center; }
.bk-dayacts { display: flex; gap: 6px; margin-left: auto; }
.bk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.bk-views { width: max-content; }
.bk-views button { padding: 7px 16px; font-size: .84rem; }
.bk-list { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.bk-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bk-range { width: auto; flex: 0 1 190px; padding-top: 8px; padding-bottom: 8px; }
.bk-typechips { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.bk-typechips .chip { cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); font: 600 .8rem var(--f-body); padding: 5px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.bk-typechips .chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.bk-count { font-size: .82rem; }
.bk-month { display: flex; flex-direction: column; }
.bk-month h3 { font-size: .9rem; margin: 10px 0 6px; display: flex; gap: 8px; align-items: baseline; } .bk-month h3 .muted { font-size: .78rem; font-weight: 600; }
.bk-li { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 10px; }
.bk-li:hover { background: var(--surface-2); } .bk-li:focus-visible { outline: 2px solid var(--accent); }
.bk-li-date { width: 46px; height: 46px; border-radius: 12px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; background: color-mix(in oklab, var(--bk) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bk) 30%, transparent); }
.bk-li-date small { font-size: .64rem; font-weight: 700; text-transform: uppercase; color: var(--muted); } .bk-li-date b { font: 750 1.08rem var(--f-display); }
.bk-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.bk-li-main strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-li-main small { color: var(--muted); font-size: .8rem; } .bk-li-main .icon { width: 12px; height: 12px; vertical-align: -2px; }
.bk-li .bk-pill { flex: none; font-size: .74rem; padding: 3px 9px; }
.bk-li-go { width: 16px; height: 16px; color: var(--muted); flex: none; }
@media (max-width: 520px) { .bk-li .bk-pill { display: none; } .bk-dayacts .bk-jump { padding-left: 10px; padding-right: 10px; } }

.desk-book { width: auto; padding: 9px 16px; font-size: .88rem; gap: 8px; white-space: nowrap; }
.desk-book .icon { width: 17px; height: 17px; }
.pp-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pp-who small { color: var(--muted); font-weight: 500; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-hint { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 650; padding: 4px 10px 0; }


.bk-hour-pop { padding: 12px; min-width: 210px; }
.bk-hour-head { font-size: .78rem; font-weight: 650; color: var(--muted); margin: 0 2px 8px; }
.bk-hour-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bk-hour-times .slot { border: 0; cursor: pointer; font-family: var(--f-body); text-align: center; padding: 8px 10px; }

/* time picker: how long, hour, exact start */
.bk-tp { display: flex; flex-direction: column; gap: 14px; }
.tp-sec { display: flex; flex-direction: column; gap: 8px; }
.tp-label { font-size: .84rem; font-weight: 650; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tp-chip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 8px 14px; font: 650 .88rem var(--f-body); cursor: pointer; font-variant-numeric: tabular-nums; transition: background .12s, border-color .12s; min-height: 40px; }
@media (hover: hover) { .tp-chip:hover { border-color: var(--brand); } }
.tp-chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.tp-chip.busy { color: var(--warn); border-style: dashed; }
.tp-chip.busy.on { background: var(--warn); border-color: var(--warn); color: #fff; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.tp-hour { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 9px 8px 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: 650 .88rem var(--f-body); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .12s, border-color .12s; }
@media (hover: hover) { .tp-hour:not(:disabled):hover { border-color: var(--brand); } }
.tp-hour-t { text-align: center; }
.tp-bar { display: flex; gap: 2px; height: 5px; }
.tp-bar i, .tp-key i { flex: 1; border-radius: 3px; }
.tp-bar i.b, .tp-key i.b { background: repeating-linear-gradient(135deg, var(--warn) 0 2px, transparent 2px 5px); opacity: .75; }
.tp-bar i.g, .tp-key i.g { background: var(--line); }
.tp-bar i.f, .tp-key i.f { background: var(--brand); opacity: .75; }
.tp-key-note { flex-basis: 100%; }
.tp-hour.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.tp-hour.on .tp-bar i { background: rgba(255,255,255,.3); } .tp-hour.on .tp-bar i.f { background: #fff; opacity: 1; }
.tp-hour.busy { color: var(--muted); background: var(--surface-2); border-style: dashed; }
.tp-hour:disabled { cursor: not-allowed; opacity: .7; }
.tp-hour.busy.on { background: var(--warn); border-color: var(--warn); color: #fff; }
.tp-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .76rem; color: var(--muted); }
.tp-key span { display: inline-flex; align-items: center; gap: 6px; } .tp-key i { display: inline-block; width: 18px; height: 5px; flex: none; }
.tp-mins { grid-column: 1 / -1; position: relative; margin: 4px 0 2px; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.tp-mins::before { content: ""; position: absolute; top: -7px; left: var(--tp-x, 50%); width: 14px; height: 14px; margin-left: -7px; background: var(--surface-2); transform: rotate(45deg); border-radius: 3px; }
.tp-mins .tp-chip { position: relative; }
.tp-mins .tp-chip { flex: 1 1 0; min-width: 72px; }
.tp-other { width: auto; padding: 7px 10px; border-radius: 999px; min-height: 40px; }
.tp-other.on { border-color: var(--brand); color: var(--brand-text); font-weight: 650; }
.tp-none { font-size: .88rem; }
.bk-avail { padding: 10px 12px; border-radius: 12px; margin-top: 0; }
.bk-avail.ok { background: color-mix(in oklab, var(--court) 9%, var(--surface)); }
.bk-avail.warn { background: color-mix(in oklab, var(--warn) 9%, var(--surface)); }

/* courts: one navigation bar for day, week and month */
.bk-toolbar .btn.primary span { white-space: nowrap; }
.bk-navrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 2px 0 10px; }
.bk-step { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bk-step .icon-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.bk-datebtn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px; cursor: pointer; font: 750 1.05rem var(--f-display); letter-spacing: -.01em; color: var(--ink); min-width: 0; }
.bk-datebtn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-datebtn .chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
@media (hover: hover) { .bk-datebtn:hover { background: var(--surface-2); } }
.bk-quick { display: flex; gap: 6px; }
.bk-quick .chip { cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); font: 650 .82rem var(--f-body); padding: 7px 12px; border-radius: 999px; color: var(--ink-2); }
.bk-quick .chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.bk-dl-short { display: none; }
/* Phones: arrows, date and Today / Tomorrow on one row, so the sticky header stays short and the sheet has room. */
@media (max-width: 600px) {
  .bk-stick { padding-top: 6px; }
  .bk-navrow { flex-wrap: nowrap; gap: 6px; padding-bottom: 6px; }
  .bk-step { flex: 1 1 auto; gap: 3px; }
  .bk-navrow .bk-step .icon-btn { width: 30px; height: 32px; border-radius: 10px; flex: none; }
  .bk-navrow .bk-datebtn { flex: 1 1 auto; justify-content: center; gap: 4px; padding: 6px 6px; font-size: .9rem; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
  .bk-navrow .bk-datebtn span { overflow: visible; }
  .bk-navrow .bk-dl-long { display: none; } .bk-navrow .bk-dl-short { display: inline; }
  .bk-navrow .bk-datebtn .chev { width: 12px; height: 12px; }
  .bk-quick { gap: 4px; flex: none; }
  .bk-navrow .bk-quick .chip { padding: 6px 8px; font-size: .74rem; }
  .bk-sheet .bk-head { padding-bottom: 6px; }
  .bk-sheet .bk-head strong { font-size: .8rem; }
}
@media (max-width: 370px) { .bk-navrow .bk-datebtn .chev { display: none; } .bk-navrow .bk-quick .chip { padding: 6px 6px; font-size: .7rem; } }
.bk-notyet { font-size: .82rem; margin: -4px 0 8px; }
.bk-sheet > .bk-legend { margin: 14px 2px 0; padding-top: 12px; border-top: 1px solid var(--line); }
/* week */
.bk-weekcard, .bk-monthcard { padding-bottom: 16px; }
.bk-wk-scale { display: grid; grid-template-columns: 60px 1fr 20px; padding: 0 0 6px; }
.bk-wk-ticks { position: relative; height: 16px; margin-left: 46px; }
.bk-wk-ticks i { position: absolute; transform: translateX(-50%); font: 600 .68rem var(--f-body); font-style: normal; color: var(--muted); white-space: nowrap; }
.bk-wk-ticks i:first-child { transform: none; } .bk-wk-ticks i:last-child { transform: translateX(-100%); }
.bk-week { display: flex; flex-direction: column; }
.bk-wk-day { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 60px 1fr 20px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; border-radius: 10px; }
.bk-wk-day:focus-visible { outline: 2px solid var(--accent); }
@media (hover: hover) { .bk-wk-day:hover { background: var(--surface-2); } }
.bk-wk-day.past { opacity: .55; }
.bk-wk-label { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.bk-wk-label small { font-size: .66rem; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .03em; }
.bk-wk-label b { font: 750 1.15rem var(--f-display); }
.bk-wk-day.today .bk-wk-label b { color: var(--brand-text); } .bk-wk-day.today .bk-wk-label small { color: var(--brand-text); }
.bk-wk-lanes { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bk-wk-lane { display: grid; grid-template-columns: 40px 1fr; gap: 6px; align-items: center; }
.bk-wk-lane em { font: 600 .66rem var(--f-body); font-style: normal; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-wk-bar { position: relative; height: 12px; border-radius: 999px; background: color-mix(in oklab, var(--court) 10%, var(--surface-2)); overflow: hidden; }
.bk-wk-seg { position: absolute; top: 0; bottom: 0; background: color-mix(in oklab, var(--bk) 55%, var(--surface)); }
.bk-wk-seg.mine { background: var(--bk); }
.bk-wk-past { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--muted) 18%, transparent) 0 3px, transparent 3px 6px); }
.bk-wk-go { width: 16px; height: 16px; color: var(--muted); justify-self: end; }
.bk-wk-hint { font-size: .8rem; margin-top: 10px; }
/* month */
.bk-mhead, .bk-mcells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-mhead span { font: 700 .7rem var(--f-body); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: center; padding-bottom: 6px; }
.bk-mc { all: unset; box-sizing: border-box; position: relative; min-height: 78px; padding: 8px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.bk-mc:focus-visible { outline: 2px solid var(--accent); }
@media (hover: hover) { .bk-mc:hover { box-shadow: inset 0 0 0 1px var(--brand); } }
.bk-mc b { font: 750 .95rem var(--f-display); }
.bk-mc.out { opacity: .4; } .bk-mc.past { opacity: .6; } .bk-mc.out.past { opacity: .35; }
.bk-mc.today { box-shadow: inset 0 0 0 2px var(--brand); } .bk-mc.today b { color: var(--brand-text); }
.bk-mc-n { position: absolute; top: 7px; right: 8px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font: 700 .7rem/20px var(--f-body); text-align: center; }
.bk-mc-dots { display: flex; gap: 3px; flex-wrap: wrap; } .bk-mc-dots .bk-dot { width: 8px; height: 8px; }
.bk-mc-busy { margin-top: auto; height: 5px; border-radius: 999px; background: color-mix(in oklab, var(--line) 80%, transparent); overflow: hidden; }
.bk-mc-busy i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
@media (max-width: 520px) {
  .bk-wk-scale, .bk-wk-day { grid-template-columns: 46px 1fr 14px; } .bk-wk-ticks { margin-left: 38px; } .bk-wk-lane { grid-template-columns: 32px 1fr; }
  .bk-mhead, .bk-mcells { gap: 3px; } .bk-mc { min-height: 58px; padding: 5px; border-radius: 9px; } .bk-mc-n { top: 4px; right: 4px; min-width: 16px; height: 16px; line-height: 16px; font-size: .62rem; padding: 0 4px; }
  .bk-navrow { gap: 6px; } .bk-datebtn { font-size: .98rem; padding: 6px 6px; } .bk-step .icon-btn { width: 34px; height: 34px; }
  .bk-toolbar .bk-views button { padding: 7px 12px; }
}

@media (max-width: 520px) {
  .bk-toolbar { flex-wrap: nowrap; }
  .bk-toolbar .btn.primary { padding: 9px 12px; flex: none; }
  .bk-toolbar .bk-views { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .bk-toolbar .bk-views button { padding: 7px 10px; }
}
@media (max-width: 400px) { .bk-toolbar .btn.primary span { display: none; } .bk-toolbar .btn.primary { width: 44px; height: 40px; padding: 0; justify-content: center; } }

/* month view: hover card for a day */
.bk-peek { position: fixed; z-index: 60; width: 300px; max-width: calc(100vw - 24px); padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); pointer-events: none; animation: bkPeek .12s var(--ease); }
@keyframes bkPeek { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.bk-peek-head { font: 700 .9rem var(--f-display); margin-bottom: 8px; }
.bk-peek ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-peek li { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; line-height: 1.3; }
.bk-peek li .bk-dot { margin-top: 5px; }
.bk-peek li span { min-width: 0; } .bk-peek li strong { font-variant-numeric: tabular-nums; }
.bk-peek li small { display: block; color: var(--muted); font-size: .76rem; }
.bk-peek-more, .bk-peek-none { font-size: .82rem; margin-top: 6px; }
.bk-peek-foot { font-size: .74rem; color: var(--muted); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }

/* booking popup: a clear ticket */
.bk-ticket-head { justify-content: flex-end; margin-bottom: -18px; position: relative; z-index: 1; }
.bk-ticket { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.bk-tdate { flex: none; width: 66px; padding: 8px 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; line-height: 1.05; background: color-mix(in oklab, var(--bk) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bk) 30%, transparent); }
.bk-tdate small { font: 700 .68rem var(--f-body); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.bk-tdate b { font: 800 1.7rem var(--f-display); letter-spacing: -.03em; margin: 2px 0; }
.bk-tmain { min-width: 0; flex: 1; padding-right: 36px; }
.bk-tmain h2 { font-size: 1.3rem; line-height: 1.2; }
.bk-ttime { font: 750 1.45rem var(--f-display); letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.bk-tsub { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.bk-tpills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.bk-actrow { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.bk-act { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 14px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font: 650 .82rem var(--f-body); color: var(--ink); text-align: center; line-height: 1.2; }
.bk-act .icon { width: 20px; height: 20px; color: var(--brand-text); }
@media (hover: hover) { .bk-act:hover { border-color: var(--brand); background: var(--brand-soft); } }
.bk-block2 { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.bk-block2 h3 { font: 700 .74rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bk-who { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bk-who li { display: flex; align-items: center; gap: 10px; }
.bk-who .avatar { width: 34px; height: 34px; font-size: .74rem; display: grid; place-items: center; flex: none; }
.bk-who-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bk-who-txt strong { font-size: .95rem; } .bk-who-txt a { font-size: .8rem; color: var(--brand-text); overflow: hidden; text-overflow: ellipsis; }
.bk-tag { font-style: normal; flex: none; font-size: .72rem; font-weight: 650; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.bk-note { font-size: .86rem; }
.bk-where .bk-venue .evm-map { height: 130px; }
.bk-where-txt { padding: 12px 14px 0; display: flex; flex-direction: column; line-height: 1.3; } .bk-where-txt small { color: var(--muted); font-size: .84rem; }
.bk-where .nav-apps .btn { padding: 8px 12px; font-size: .84rem; }
.bk-cancelbox { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.bk-cancels { display: flex; flex-direction: column; gap: 8px; }
.bk-cancel { width: 100%; justify-content: center; color: var(--danger); border-color: color-mix(in oklab, var(--danger) 30%, var(--line)); }
@media (hover: hover) { .bk-cancel:hover { background: color-mix(in oklab, var(--danger) 8%, var(--surface)); border-color: var(--danger); } }
.bk-cancel.sure, .bk-cancel.sure:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
@media (max-width: 520px) { .bk-tdate { width: 56px; } .bk-tdate b { font-size: 1.45rem; } .bk-ttime { font-size: 1.25rem; } .bk-tmain h2 { font-size: 1.12rem; } }
/* ---------- coaching ---------- */
.notice-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.notice-card > .icon { flex: none; width: 20px; height: 20px; color: var(--brand-text); margin-top: 2px; }
.notice-card p { margin: 2px 0 0; font-size: .88rem; }
.course-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.course-card:hover { box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in oklab, var(--brand) 30%, transparent); }
.course-card.off { opacity: .7; }
.cc-day { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-content: center; text-align: center; background: var(--brand-soft); color: var(--brand-text); }
.cc-day small { font: 800 .66rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; }
.cc-day b { font: 750 .95rem var(--f-display); }
.cc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cc-top strong { font: 700 1.02rem var(--f-display); }
.cc-meta { font-size: .85rem; color: var(--muted); }
.cc-full { color: var(--warn); font-weight: 650; }
.cc-go { flex: none; color: var(--muted); }
.past-courses summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink-2); list-style: none; }
.past-courses summary::-webkit-details-marker { display: none; }
.past-courses[open] summary .chev { transform: rotate(180deg); }
.course-page { padding: 0; overflow: hidden; max-width: 1040px; }
.course-page.off .hp-hero { filter: grayscale(.7); }
.course-cols { display: grid; gap: 20px; padding: 20px 22px 24px; }
.course-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.course-side { align-self: start; padding: 16px; border-radius: 16px; background: var(--surface-2); }
.course-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
@media (min-width: 900px) { .course-cols { grid-template-columns: minmax(0, 1fr) 300px; } }
.course-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.course-mine > div { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.course-mine > .icon { flex: none; width: 22px; height: 22px; color: var(--brand-text); }
.course-mine.ok { background: color-mix(in oklab, var(--court) 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 25%, transparent); }
.course-mine.ok > .icon { color: var(--court); }
.course-mine.wait { background: color-mix(in oklab, var(--warn) 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 25%, transparent); }
.course-mine.wait > .icon { color: var(--warn); }
.course-mine.join { background: linear-gradient(135deg, var(--brand-soft), var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 25%, var(--line)); }
.course-mine .muted { font-size: .86rem; }
.cs-list { list-style: none; margin: 8px 0 6px; padding: 0; display: flex; flex-direction: column; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.cs-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.cs-row:first-child { border-top: 0; }
.cs-row.past .cs-when strong { color: var(--muted); }
.cs-row.off .cs-when { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--danger) 60%, transparent); }
.cs-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 .78rem var(--f-display); background: var(--surface-2); color: var(--ink-2); }
.cs-when { flex: 1; min-width: 150px; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.cs-when small { color: var(--muted); font-size: .82rem; }
.cs-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.cs-count { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--muted); }
.cs-count .icon { width: 14px; height: 14px; }
.course-people { display: flex; flex-direction: column; gap: 12px; }
.cp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cp-head h3 { margin: 2px 0 0; }
.cp-head p { margin: 2px 0 0; }
.cp-sub td { font: 750 .72rem var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.paid-tick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .86rem; white-space: nowrap; }
.paid-tick input { width: 18px; height: 18px; accent-color: var(--court); }
.status.done::before { background: var(--muted); box-shadow: 0 0 0 3px color-mix(in oklab, var(--muted) 18%, transparent); }
.reg-list { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow: auto; }
.reg-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.reg-row input { position: absolute; opacity: 0; pointer-events: none; }
.reg-row > span:last-child { display: flex; flex-direction: column; }
.reg-row small { color: var(--muted); font-size: .78rem; }
.reg-tick { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--line-strong, var(--line)); color: transparent; }
.reg-tick .icon { width: 16px; height: 16px; }
.reg-row:has(input:checked) { background: color-mix(in oklab, var(--court) 10%, var(--surface)); }
.reg-row:has(input:checked) .reg-tick { background: var(--court); color: #fff; box-shadow: none; }
.reg-row:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.coach-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.coach-picks .chip { padding: 3px 4px 3px 3px; gap: 6px; }
.chip-x { border: 0; background: transparent; color: var(--muted); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; }
.chip-x:hover { background: var(--surface-2); color: var(--danger); }
.ap-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.ap-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ap-row:hover { background: var(--surface-2); }
.ap-row > span:not(.avatar) { flex: 1; font-weight: 600; }
.ap-row > .icon { color: var(--brand-text); }
.ev-course { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--brand-soft); }
.ev-course p { margin: 0; }
/* What you follow: per space switches, the list on What's on and the account page */
.follow-sheet { display: flex; flex-direction: column; gap: 10px; }
.fl-label { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font: 700 .74rem var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fl-label .icon { width: 15px; height: 15px; }
.pref-row > span small { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); }
.fl-row { display: inline-flex; align-items: center; gap: 10px; }
.fl-row .icon { width: 18px; height: 18px; color: var(--brand-text); flex: none; }
.fl-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.fl-foot { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in oklab, var(--brand) 8%, var(--surface)); font-size: .85rem; color: var(--ink-2, var(--muted)); }
.fl-foot .icon { width: 18px; height: 18px; flex: none; color: var(--brand-text); margin-top: 1px; }
.follow-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.fl-space + .fl-space { border-top: 1px solid var(--line); }
.fl-space summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.fl-space summary::-webkit-details-marker { display: none; }
.fl-space summary .space-ico { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.fl-space summary .space-ico .icon { width: 18px; height: 18px; }
.fl-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fl-t strong { font-size: .95rem; }
.fl-t small { color: var(--muted); font-size: .8rem; }
.fl-space summary > .icon:last-child { width: 18px; height: 18px; color: var(--muted); transition: transform .2s var(--ease); flex: none; }
.fl-space[open] summary > .icon:last-child { transform: rotate(180deg); }
.fl-body { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px; }
.wo-hidden { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 12px; font-size: .88rem; color: var(--muted); }
.wo-hidden > .icon { width: 18px; height: 18px; flex: none; }
.wo-hidden > span { flex: 1 1 200px; }
.follow-list, .fl-foot, .follow-sheet > * { flex-shrink: 0; }

/* ---------- tasks: counts, jobs with steps, recently completed ---------- */
.task-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 14px; }
.tstat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.tstat strong { font: 750 1.5rem/1.1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.tstat span { font-size: .78rem; color: var(--muted); font-weight: 600; }
.tstat.late strong { color: var(--danger); }
.tstat.late { border-color: color-mix(in oklab, var(--danger) 25%, var(--line)); background: color-mix(in oklab, var(--danger) 4%, var(--surface)); }
.tstat.good strong { color: var(--court); }
.step-progress { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--ink-2); }
.sp-bar { width: 64px; height: 6px; border-radius: 99px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; display: inline-block; }
.sp-bar i { display: block; height: 100%; background: var(--court); border-radius: inherit; transition: width .3s var(--ease); }
.chip.part-of { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-list > .job + .task, .task-list > .task + .job, .task-list > .job + .job { border-top: 1px solid var(--line); }
.job .task.job-head .task-title { font-size: 1rem; }
.job-steps { margin: -4px 10px 10px 48px; }
.job-steps > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--muted); padding: 4px 0 6px; }
.job-steps > summary::-webkit-details-marker { display: none; }
.job-steps > summary .icon { width: 14px; height: 14px; transition: transform .15s var(--ease); }
.job-steps[open] > summary .icon { transform: rotate(180deg); }
.job-steps .avatars .avatar { width: 20px; height: 20px; font-size: .58rem; }
.step-list { border-left: 2px solid var(--line); padding-left: 12px; display: flex; flex-direction: column; }
.step-list .task { padding: 9px 4px; }
.step-list .task-tick { width: 22px; height: 22px; }
.step-list .task-title { font-size: .9rem; font-weight: 600; }
.add-step { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; font: 650 .82rem var(--f-display); color: var(--brand-text); }
.add-step .icon { width: 14px; height: 14px; }
.add-step:focus-visible { outline: 2px solid var(--brand); border-radius: 6px; }
.done-recent { margin-top: 18px; }
.done-recent .inbox-head { margin-bottom: 8px; }
.steps-field .step-edits { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.step-edit { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 150px auto; gap: 8px; align-items: center; }
.steps-field > .btn { align-self: flex-start; }
@media (max-width: 640px) {
  .task-stats { gap: 8px; }
  .tstat { padding: 10px 12px; }
  .tstat strong { font-size: 1.25rem; }
  .job-steps { margin-left: 22px; }
  .step-edit { grid-template-columns: 1fr 1fr auto; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
  .step-edit [data-step-title] { grid-column: 1 / -1; }
}

/* month view: hover card for a day */
.bk-peek { position: fixed; z-index: 60; width: 300px; max-width: calc(100vw - 24px); padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); pointer-events: none; animation: bkPeek .12s var(--ease); }
@keyframes bkPeek { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.bk-peek-head { font: 700 .9rem var(--f-display); margin-bottom: 8px; }
.bk-peek ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-peek li { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; line-height: 1.3; }
.bk-peek li .bk-dot { margin-top: 5px; }
.bk-peek li span { min-width: 0; } .bk-peek li strong { font-variant-numeric: tabular-nums; }
.bk-peek li small { display: block; color: var(--muted); font-size: .76rem; }
.bk-peek-more, .bk-peek-none { font-size: .82rem; margin-top: 6px; }
.bk-peek-foot { font-size: .74rem; color: var(--muted); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }

/* booking popup: a clear ticket */
.bk-ticket-head { justify-content: flex-end; margin-bottom: -18px; position: relative; z-index: 1; }
.bk-ticket { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.bk-tdate { flex: none; width: 66px; padding: 8px 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; line-height: 1.05; background: color-mix(in oklab, var(--bk) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--bk) 30%, transparent); }
.bk-tdate small { font: 700 .68rem var(--f-body); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.bk-tdate b { font: 800 1.7rem var(--f-display); letter-spacing: -.03em; margin: 2px 0; }
.bk-tmain { min-width: 0; flex: 1; padding-right: 36px; }
.bk-tmain h2 { font-size: 1.3rem; line-height: 1.2; }
.bk-ttime { font: 750 1.45rem var(--f-display); letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.bk-tsub { color: var(--muted); font-size: .92rem; margin-top: 2px; }
.bk-tpills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.bk-actrow { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; }
.bk-act { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 14px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font: 650 .82rem var(--f-body); color: var(--ink); text-align: center; line-height: 1.2; }
.bk-act .icon { width: 20px; height: 20px; color: var(--brand-text); }
@media (hover: hover) { .bk-act:hover { border-color: var(--brand); background: var(--brand-soft); } }
.bk-block2 { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.bk-block2 h3 { font: 700 .74rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bk-who { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bk-who li { display: flex; align-items: center; gap: 10px; }
.bk-who .avatar { width: 34px; height: 34px; font-size: .74rem; display: grid; place-items: center; flex: none; }
.bk-who-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bk-who-txt strong { font-size: .95rem; } .bk-who-txt a { font-size: .8rem; color: var(--brand-text); overflow: hidden; text-overflow: ellipsis; }
.bk-tag { font-style: normal; flex: none; font-size: .72rem; font-weight: 650; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.bk-note { font-size: .86rem; }
.bk-where .bk-venue .evm-map { height: 130px; }
.bk-where-txt { padding: 12px 14px 0; display: flex; flex-direction: column; line-height: 1.3; } .bk-where-txt small { color: var(--muted); font-size: .84rem; }
.bk-where .nav-apps .btn { padding: 8px 12px; font-size: .84rem; }
.bk-cancelbox { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.bk-cancels { display: flex; flex-direction: column; gap: 8px; }
.bk-cancel { width: 100%; justify-content: center; color: var(--danger); border-color: color-mix(in oklab, var(--danger) 30%, var(--line)); }
@media (hover: hover) { .bk-cancel:hover { background: color-mix(in oklab, var(--danger) 8%, var(--surface)); border-color: var(--danger); } }
.bk-cancel.sure, .bk-cancel.sure:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
@media (max-width: 520px) { .bk-tdate { width: 56px; } .bk-tdate b { font-size: 1.45rem; } .bk-ttime { font-size: 1.25rem; } .bk-tmain h2 { font-size: 1.12rem; } }


/* flexible repeats */
.bk-rep { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.bk-rep .field { margin: 0; }
.bk-rep-opts { display: flex; flex-direction: column; gap: 14px; }
.bk-rep-opts[hidden] { display: none; }
.bk-daychip { position: relative; min-width: 52px; justify-content: center; display: inline-flex; align-items: center; }
.bk-daychip input { position: absolute; opacity: 0; pointer-events: none; }
.bk-daychip:has(input:checked) { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.bk-daychip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.bk-rep-end { width: max-content; max-width: 100%; }
.bk-rep-end button { white-space: nowrap; }
.bk-rep-sum { font-size: .86rem; } .bk-rep-sum .warn { color: var(--warn); font-weight: 650; }
.bk-rep-dates { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow: auto; padding: 2px; }
.bk-rep-date { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 10px; padding: 6px 9px; font: 600 .8rem var(--f-body); cursor: pointer; color: var(--ink); }
.bk-rep-date.clash { border-color: var(--warn); color: var(--warn); background: color-mix(in oklab, var(--warn) 8%, var(--surface)); }
.bk-rep-date.off { text-decoration: line-through; opacity: .45; border-style: dashed; }
.bk-series { display: flex; flex-direction: column; max-height: 60vh; overflow: auto; margin-bottom: 12px; }

/* Court usage report (admins and report groups) */
.us-card { display: flex; flex-direction: column; gap: 16px; padding: 18px; }
.us-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.us-bar .bk-step { display: flex; align-items: center; gap: 4px; }
.us-label { font-weight: 700; min-width: 150px; text-align: center; font-variant-numeric: tabular-nums; }
.us-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.us-tile { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); }
.us-tile small { color: var(--muted); font-weight: 650; font-size: .78rem; }
.us-tile b { font: 750 1.7rem/1.1 var(--f-display, var(--f-body)); font-variant-numeric: tabular-nums; }
.us-tile span { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.us-tile.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.us-note { font-size: .84rem; margin-top: -6px; }
.us-h { font-size: .95rem; margin: 6px 0 0; }
.us-h .muted { font-weight: 500; font-size: .82rem; margin-left: 4px; }
.us-chart { display: flex; gap: 8px; height: 180px; }
.us-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 20px; color: var(--muted); font-size: .7rem; text-align: right; }
.us-cols { flex: 1; display: flex; gap: 4px; align-items: stretch; min-width: 0; background: linear-gradient(to bottom, var(--line) 1px, transparent 1px) 0 0 / 100% calc((100% - 20px) / 2) no-repeat, linear-gradient(to bottom, transparent calc((100% - 20px) / 2), var(--line) calc((100% - 20px) / 2), var(--line) calc((100% - 20px) / 2 + 1px), transparent calc((100% - 20px) / 2 + 1px)); }
.us-cols.dense { gap: 2px; }
.us-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; cursor: default; outline: none; }
.us-track { flex: 1; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line-strong); }
.us-track i { display: block; width: 100%; max-width: 40px; margin: 0 auto; background: var(--brand); border-radius: 4px 4px 0 0; transition: filter .12s; }
.us-col.future .us-track i { opacity: .45; }
.us-col:hover .us-track i, .us-col:focus-visible .us-track i { filter: brightness(1.15); }
.us-col small { font-size: .68rem; color: var(--muted); white-space: nowrap; height: 16px; display: flex; justify-content: center; }
.us-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.us-hbar { display: grid; grid-template-columns: 90px 1fr 70px; gap: 10px; align-items: center; padding: 6px 0; }
.us-hname { font-weight: 650; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-htrack { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.us-htrack i { display: block; height: 100%; background: var(--brand); border-radius: 0 4px 4px 0; }
.us-hval { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-variant-numeric: tabular-nums; }
.us-hval small { color: var(--muted); font-size: .72rem; }
.us-types { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.us-types li { display: grid; grid-template-columns: 12px 1fr auto 44px; gap: 4px 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .88rem; font-variant-numeric: tabular-nums; }
.us-types li:last-child { border-bottom: 0; }
.us-tname { font-weight: 650; } .us-tshare { text-align: right; font-weight: 700; }
.us-tn { grid-column: 2 / -1; font-size: .76rem; margin-top: -4px; }
.us-heatwrap { overflow-x: auto; }
.us-heat { display: grid; grid-template-columns: 34px repeat(var(--cols), minmax(16px, 1fr)); gap: 3px; min-width: calc(34px + var(--cols) * 19px); }
.us-hh { font-size: .66rem; color: var(--muted); white-space: nowrap; }
.us-hd { font-size: .74rem; font-weight: 650; color: var(--muted); align-self: center; }
.us-c { display: block; height: 22px; border-radius: 4px; background: var(--surface-2); }
.us-c.l1 { background: color-mix(in srgb, var(--brand) 18%, var(--surface)); }
.us-c.l2 { background: color-mix(in srgb, var(--brand) 36%, var(--surface)); }
.us-c.l3 { background: color-mix(in srgb, var(--brand) 56%, var(--surface)); }
.us-c.l4 { background: color-mix(in srgb, var(--brand) 76%, var(--surface)); }
.us-c.l5 { background: var(--brand); }
.us-c.lx { background: repeating-linear-gradient(135deg, var(--line-strong) 0 2px, transparent 2px 5px); }
.us-c.pk { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 55%, transparent); }
.us-key { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: .74rem; color: var(--muted); }
.us-key .us-c { width: 18px; height: 12px; }
.us-key span:nth-of-type(2) { margin-right: 14px; }
.us-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.us-foot p { font-size: .82rem; margin: 0; flex: 1 1 280px; }
.us-tip { max-width: 220px; pointer-events: none; }
.us-tip p { margin: 0; font-size: .8rem; } .us-tip .us-tip-v { font-weight: 700; font-size: .92rem; }
@media (max-width: 720px) {
  .us-card { padding: 14px; }
  .us-bar { flex-direction: column; align-items: stretch; }
  .us-bar .seg-tabs { justify-content: stretch; } .us-bar .seg-tabs button { flex: 1; }
  .us-bar .bk-step { justify-content: space-between; }
  .us-tiles { grid-template-columns: 1fr 1fr; }
  .us-two { grid-template-columns: 1fr; gap: 12px; }
  .us-chart { height: 150px; }
  .us-cols.q .us-col:nth-child(even) small { visibility: hidden; }
  .us-c { height: 18px; }
}
/* Import from ClubSpark: preview sheet */
.imp-summary { margin: 0 0 .6rem; }
.imp-h { font-size: .95rem; margin: 1.1rem 0 .45rem; }
.imp-h small { font-weight: 600; }
.imp-grid { display: grid; gap: 8px; }
.imp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: center; font-weight: 600; font-size: .9rem; }
.imp-row .chip { margin-left: 4px; }
.imp-item { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin: 0 0 8px; }
.imp-item.off { opacity: .6; }
.imp-item > summary { list-style: none; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; cursor: pointer; }
.imp-item > summary::-webkit-details-marker { display: none; }
.imp-item > summary input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--brand); }
.imp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.imp-main .muted { font-size: .84rem; }
.imp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.imp-chev { flex: none; color: var(--muted); transition: transform .15s; margin-top: 2px; }
.imp-item[open] .imp-chev { transform: rotate(180deg); }
.imp-more { padding: 0 12px 12px 40px; display: grid; gap: 10px; }
.imp-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.imp-date { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; padding: 6px 8px; border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.imp-date input { margin-top: 2px; accent-color: var(--brand); }
.imp-date small { display: block; color: var(--muted); font-size: .76rem; line-height: 1.3; }
.imp-date b { font-weight: 700; color: var(--ink); }
.imp-date.off { opacity: .55; cursor: default; }
.imp-radio { display: grid; gap: 6px; font-size: .9rem; }
.imp-gone { margin: .4rem 0; padding-left: 1.1rem; font-size: .86rem; color: var(--ink-2); }
@media (max-width: 560px) { .imp-row { grid-template-columns: 1fr; gap: 4px; } .imp-more { padding-left: 12px; } }
/* ---------- match fees ---------- */
.ss-manage + .ss-manage { margin-left: 6px; }
.fee-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fee-stats > div { padding: 12px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 2px; }
.fee-stats b { font: 750 1.2rem var(--f-display); letter-spacing: -.01em; }
.fee-stats small { color: var(--muted); font-size: .76rem; font-weight: 600; }
.fee-stats .warn b { color: var(--warn); }
.fee-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in oklab, var(--accent) 14%, var(--surface)); font-size: .86rem; }
.fee-note .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.fee-set { display: flex; flex-direction: column; gap: 8px; }
.fee-fee { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 4px; font-size: .9rem; }
.fee-fee > span:first-child { margin-right: auto; }
.fee-links { display: inline-flex; gap: 14px; }
.danger-text { color: var(--danger); }
.fee-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fee-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: var(--r-md); background: var(--surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.fee-row:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.fee-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fee-who small { color: var(--muted); font-size: .8rem; }
.fee-bal { display: inline-flex; align-items: center; gap: 4px; font: 750 .95rem var(--f-display); white-space: nowrap; }
.fee-bal.owe { color: var(--ink); }
.fee-bal.over { color: var(--brand-text); font-size: .82rem; }
.fee-bal.ok, .fee-bal.ok .icon { color: var(--court); }
.fee-bal.none { color: var(--muted); font-size: .82rem; font-weight: 650; }
.fee-bal .icon { width: 16px; height: 16px; }
.fee-match { padding: 0; overflow: hidden; }
.fee-match summary, .fee-team summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.fee-match summary::-webkit-details-marker, .fee-team summary::-webkit-details-marker { display: none; }
.fee-match summary > .icon, .fee-team summary > .icon { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; flex: none; }
.fee-match[open] summary > .icon, .fee-team[open] summary > .icon { transform: rotate(180deg); }
.fee-date { flex: none; width: 52px; font: 700 .8rem var(--f-display); color: var(--muted); text-transform: uppercase; }
.fee-match-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.fee-plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fee-plist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .9rem; }
.fee-plist li > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.fee-match-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fee-match-actions .linkish { margin-left: auto; font-size: .84rem; }
.fee-pay { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); flex-wrap: wrap; }
.fee-pay-end { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.fee-method { position: relative; }
.fee-method input { position: absolute; opacity: 0; pointer-events: none; }
.fee-method span { display: inline-block; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 7px 14px; font: 600 .84rem var(--f-display); cursor: pointer; }
.fee-method input:checked + span { background: var(--brand); color: var(--brand-ink, #fff); border-color: var(--brand); }
.fee-method input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.fee-card { display: flex; flex-direction: column; gap: 12px; }
.fee-team { border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.fee-team .fee-plist { padding: 0 14px 14px; }
.fee-captain { display: flex; flex-direction: column; gap: 10px; }
.fee-off { display: flex; flex-direction: column; gap: 6px; }
.fee-off p { margin: 0; }
@media (max-width: 520px) { .fee-stats b { font-size: 1.02rem; } .fee-stats > div { padding: 10px; } }
.fee-cap-head { display: flex; align-items: center; gap: 10px; }
.fee-cap-head .btn { flex: none; }
.fee-dl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

/* Group permissions sheet: own spaces first, club wide powers second */
.gp-sec { display: flex; flex-direction: column; gap: 10px; }
.gp-spaces { gap: 8px; }
.gp-space { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.gp-space .space-ico { flex: none; }
.gp-space-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.gp-space-text .muted { font-size: .8rem; line-height: 1.4; }
.gp-warn { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-size: .84rem; line-height: 1.45; background: color-mix(in oklab, var(--accent) 16%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent); }
.gp-warn .icon { width: 17px; height: 17px; flex: none; margin-top: 1px; }
@media (max-width: 560px) { .gp-space { flex-wrap: wrap; } .gp-space-text { flex-basis: calc(100% - 60px); } .gp-space .btn { margin-left: 56px; } }

/* Roles, People tab and the Access card */
.role-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font: 650 .76rem var(--f-display); background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.role-chip.admin { background: var(--brand); color: #fff; box-shadow: none; }
.role-chip.power { background: var(--brand-soft); color: var(--brand-text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 25%, transparent); }
.role-chip.lead { background: color-mix(in oklab, var(--accent) 22%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); }
.who-holds { gap: 12px; }
.who-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.who-table th { text-align: left; font: 650 .74rem var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.who-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.who-table tr:last-child td { border-bottom: 0; }
.who-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink); text-decoration: none; }
.who-name:hover span { text-decoration: underline; }
.tick-on { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-text); font-weight: 650; }
.tick-on .icon { width: 15px; height: 15px; }
.role-new { flex-direction: column; align-items: stretch; gap: 10px; }
.role-new-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
/* Role cards: name and people on top, powers wrap across the full width, buttons along the bottom */
.role-card { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; min-width: 0; }
.role-head { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.role-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.role-title h3 { overflow-wrap: anywhere; }
.role-title p { font-size: .85rem; }
.role-card .avatars { flex: none; }
.role-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .role-new-row .btn { flex: 1 1 100%; justify-content: center; }
  .role-card { padding: 16px 16px 14px; }
  .role-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .role-actions .btn { justify-content: center; padding-inline: 8px; min-width: 0; }
}
@media (max-width: 640px) { .hide-sm { display: none; } }

.sp-wrap { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.sp-wrap > .sp-card:first-child { grid-row: span 2; }
@media (max-width: 860px) { .sp-wrap { grid-template-columns: minmax(0, 1fr); } .sp-wrap > .sp-card:first-child { grid-row: auto; } }
.sp-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.sp-head { display: flex; gap: 12px; align-items: flex-start; }
.sp-head > .icon { width: 22px; height: 22px; color: var(--brand); flex: none; margin-top: 2px; }
.sp-head > div { display: flex; flex-direction: column; gap: 2px; }
.sp-head strong { font: 700 1.05rem var(--f-display); }
.sp-head .muted { font-size: .86rem; line-height: 1.45; }
.sp-lead { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: color-mix(in oklab, var(--accent) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent); }
.sp-lead > .icon { width: 18px; height: 18px; flex: none; }
.sp-lead > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sp-lead small { font: 650 .72rem var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sp-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sp-rules li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.sp-rules li:last-child { border-bottom: 0; }
.sp-rules .icon { width: 17px; height: 17px; color: var(--muted); }
.sp-rules strong { text-align: right; font-weight: 650; }
.sp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sp-person { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sp-person:last-child { border-bottom: 0; }
.sp-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-whys { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-why { font: 650 .7rem var(--f-display); padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.sp-why.lead { background: color-mix(in oklab, var(--accent) 26%, var(--surface)); color: var(--ink); box-shadow: none; }
.sp-why.via { background: var(--brand-soft); color: var(--brand-text); box-shadow: none; }
.sp-why.jr { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); color: var(--danger); box-shadow: none; }
.sp-also p { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.sp-also p > .icon { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 2px; }
.sp-also p > span { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.sp-pick { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.sp-pick button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.sp-pick button:hover { background: var(--surface-2); }
.sp-pick button > span { flex: 1; }
.sp-pick button > .icon { width: 18px; height: 18px; opacity: 0; color: var(--brand); }
.sp-pick button.on { background: var(--brand-soft); }
.sp-pick button.on > .icon { opacity: 1; }

.access-card { gap: 14px; }
.access-card h3 { display: flex; align-items: center; gap: 8px; }
.access-card h3 .icon { width: 18px; height: 18px; color: var(--brand); }
.acc-admin { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); font-size: .88rem; margin: 0; }
.acc-admin .icon { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.acc-sec { display: flex; flex-direction: column; gap: 8px; }
.acc-sec > .muted { font-size: .88rem; margin: 0; }
.acc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.acc-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-size: .9rem; }
.acc-list li > .icon { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--brand); }
.acc-list li > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acc-list li a { color: var(--ink); text-decoration: none; }
.acc-list li small { color: var(--muted); font-size: .78rem; }
.acc-list li.sens { box-shadow: inset 3px 0 0 var(--accent); }
.sp-pick button > :first-child { flex: none; }
.tick-off { color: var(--danger); font-weight: 650; font-size: .84rem; }
/* ---------- courts for home matches ---------- */
.ev-main > .courts-box { order: 2; }
.courts-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.courts-box .cb-line { display: flex; align-items: flex-start; gap: 12px; }
.courts-box .cb-line > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.courts-box .cb-line small { color: var(--muted); font-size: .86rem; line-height: 1.4; }
.cb-tick, .cb-warn { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.cb-tick .icon, .cb-warn .icon { width: 17px; height: 17px; stroke-width: 2.4; }
.cb-tick { background: color-mix(in oklab, var(--court) 16%, var(--surface)); color: color-mix(in oklab, var(--court) 80%, var(--ink)); }
.cb-warn { background: color-mix(in oklab, var(--warn) 16%, var(--surface)); color: var(--warn); }
.courts-box.todo { background: color-mix(in oklab, var(--warn) 7%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 32%, var(--line)); }
.courts-box.todo.urgent { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--warn) 70%, var(--line)), 0 6px 20px -12px color-mix(in oklab, var(--warn) 60%, transparent); }
.courts-box .cb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-left: 46px; }
.courts-box .linkish { align-self: flex-start; font-size: .86rem; }
.courts-box.ok .linkish { margin-left: 46px; }
@media (max-width: 600px) { .courts-box .cb-acts { padding-left: 0; } .courts-box .cb-acts .btn { flex: 1 1 100%; justify-content: center; } .courts-box.ok .linkish { margin-left: 0; } }
.pl-courts { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: color-mix(in oklab, var(--warn) 14%, var(--surface)); color: var(--warn); }
.pl-courts .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.fy-card.courts .fy-ico { background: color-mix(in oklab, var(--warn) 14%, var(--surface)); color: var(--warn); }
.fy-card.courts.urgent { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--warn) 55%, var(--line)); }
.bk-match-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: var(--r-sm, 10px); background: var(--surface-2); font-size: .86rem; color: var(--muted); }
.bk-match-note .icon { flex: 0 0 auto; width: 17px; height: 17px; color: var(--ink); margin-top: 1px; }
.task-row.courts-due { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.task-row.courts-due .cd-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; background: color-mix(in oklab, var(--warn) 14%, var(--surface)); color: var(--warn); }
.task-row.courts-due .cd-ico .icon { width: 16px; height: 16px; }
.task-row.courts-due .cd-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.task-row.courts-due > .icon:last-child { width: 16px; height: 16px; color: var(--muted); }

/* ---------- message pop outs (phones: a card from the top; computers: bubbles on the right and a chat panel) ---------- */
.msg-pops {
  position: fixed; z-index: 70; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px));
  top: calc(8px + var(--sat)); display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.msg-pop {
  pointer-events: auto; position: relative; display: flex; align-items: center; gap: 4px; padding: 10px 10px 10px 12px; border-radius: 20px;
  background: color-mix(in oklab, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.45), 0 0 0 1px color-mix(in oklab, var(--line-strong) 70%, transparent);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform .25s var(--ease), opacity .25s var(--ease);
  animation: popDown .42s cubic-bezier(.2, 1.2, .3, 1);
}
.msg-pop::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.msg-pop.bump { animation: popBump .4s var(--ease); }
.msg-pop.out:not([data-swiped]) { transform: translateY(-130%); opacity: 0; }
@keyframes popDown { from { transform: translateY(-120%); opacity: 0; } }
@keyframes popBump { 40% { transform: scale(1.025); } }
.mp-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; -webkit-user-drag: none; }
.mp-face { position: relative; flex: 0 0 auto; }
.mp-face .avatar { width: 40px; height: 40px; font-size: .8rem; }
.mp-grp { position: absolute; right: -4px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; box-shadow: 0 0 0 2px var(--surface); }
.mp-grp .icon { width: 11px; height: 11px; }
.mp-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mp-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.mp-top strong { font: 700 .9rem var(--f-display); overflow: hidden; text-overflow: ellipsis; }
.mp-top small { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mp-top em { margin-left: auto; padding-left: 6px; font-style: normal; font-size: .7rem; color: var(--brand-text); font-weight: 650; flex: 0 0 auto; }
.mp-body { font-size: .86rem; line-height: 1.35; color: color-mix(in oklab, var(--ink) 82%, var(--muted)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-unread { flex: 0 0 auto; align-self: flex-start; margin-top: 2px; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 800 .66rem var(--f-body); }
.mp-x { flex: 0 0 auto; align-self: flex-start; width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center; background: none; color: var(--muted); cursor: pointer; }
.mp-x:hover { background: var(--surface-2); color: var(--ink); }
.mp-x .icon { width: 15px; height: 15px; }

.msg-dock { position: fixed; z-index: 45; right: 22px; bottom: 22px; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; }
.md-item { position: relative; display: flex; align-items: center; justify-content: flex-end; animation: bubbleIn .45s cubic-bezier(.2, 1.3, .3, 1); transition: opacity .25s, transform .25s; }
.md-item.out { opacity: 0; transform: scale(.6); }
@keyframes bubbleIn { from { opacity: 0; transform: scale(.4) translateY(20px); } }
.md-bubble {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--surface); box-shadow: 0 14px 30px -12px rgba(0,0,0,.45), 0 0 0 3px var(--surface), 0 0 0 4px color-mix(in oklab, var(--accent) 80%, transparent);
  transition: transform .2s var(--ease);
}
.md-bubble:hover { transform: scale(1.06); }
.md-bubble .avatar { width: 50px; height: 50px; font-size: .95rem; }
.md-bubble .mp-grp { right: -2px; bottom: -2px; }
.md-bubble .bell-badge { top: -4px; right: -4px; box-shadow: 0 0 0 2px var(--surface); }
.md-peek {
  position: absolute; right: 70px; bottom: 0; width: 310px; display: flex; align-items: center; gap: 4px; padding: 10px 8px 10px 12px; border-radius: 18px 18px 6px 18px;
  background: var(--surface); box-shadow: 0 18px 40px -16px rgba(0,0,0,.4), 0 0 0 1px var(--line);
  opacity: 0; transform: translateX(10px) scale(.96); transform-origin: right bottom; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.md-item.peek .md-peek { opacity: 1; transform: none; pointer-events: auto; }
.md-peek .mp-main { cursor: pointer; }

.msg-panel {
  position: fixed; z-index: 48; top: 12px; right: 12px; bottom: 12px; width: min(400px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; background: var(--surface); box-shadow: 0 30px 70px -20px rgba(0,0,0,.5), 0 0 0 1px var(--line);
  transform: translateX(calc(100% + 24px)); transition: transform .32s cubic-bezier(.2, .9, .3, 1);
}
.msg-panel.in { transform: none; }
.mpanel-load { flex: 1; display: grid; place-items: center; }
.mpanel-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, var(--brand), var(--brand-deep) 70%); }
.mpanel-head .avatar, .mpanel-head .chat-ava { width: 38px; height: 38px; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.mpanel-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mpanel-t strong { font: 700 1rem var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpanel-t small { font-size: .74rem; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpanel-head .icon-btn { color: #fff; background: rgba(255,255,255,.1); }
.mpanel-head .icon-btn:hover { background: rgba(255,255,255,.2); }
.mpanel-list { padding: 12px 14px 16px; }
.msg-panel .dm { max-width: 88%; }
.msg-panel .dm-compose { padding: 10px 12px 12px; }
@media (max-width: 899px) { .msg-dock, .msg-panel { display: none; } }
@media (prefers-reduced-motion: reduce) { .msg-pop, .md-item, .msg-panel { animation: none; transition: none; } }

/* Messages in the phone bottom bar, with its unread count */
.tabbar a.bell { position: relative; }
.tabbar .bell-badge { top: 2px; right: calc(50% - 22px); box-shadow: 0 0 0 2px var(--surface); }

/* ---------- do not disturb ---------- */
.dnd-moon { position: absolute; left: -2px; bottom: -2px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: #3b3f8f; color: #fff; box-shadow: 0 0 0 2px var(--brand-deep); }
.dnd-moon .icon { width: 9px; height: 9px; fill: currentColor; }
.deskbar .dnd-moon, .tabbar .dnd-moon { box-shadow: 0 0 0 2px var(--surface); }
.desk-btn .dnd-moon { left: 4px; bottom: 4px; }
.tabbar .dnd-moon { left: calc(50% - 20px); bottom: auto; top: 18px; }
.dnd-btn.on { background: color-mix(in oklab, #3b3f8f 14%, var(--surface)); color: color-mix(in oklab, #3b3f8f 75%, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in oklab, #3b3f8f 35%, transparent); }
:root[data-theme="dark"] .dnd-btn.on { color: #c6c9ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dnd-btn.on { color: #c6c9ff; } }
.inbox-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) { .section-head > .inbox-acts { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .inbox-acts .btn { justify-content: center; } .inbox-acts .btn:only-child { grid-column: 1 / -1; } }
.dnd-status { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 14px; border-radius: 14px; background: color-mix(in oklab, #3b3f8f 12%, var(--surface)); font-size: .86rem; }
.dnd-status .icon { flex: 0 0 auto; width: 18px; height: 18px; color: #3b3f8f; }
.dnd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 520px) { .dnd-grid { grid-template-columns: 1fr; } }
.dnd-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border-radius: 16px; border: 0; cursor: pointer; text-align: left; color: var(--ink);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, transform .15s var(--ease); }
.dnd-opt:hover { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--brand) 55%, var(--line)); transform: translateY(-1px); }
.dnd-opt .icon { width: 20px; height: 20px; color: var(--brand-text); }
.dnd-opt strong { font: 700 .9rem var(--f-display); }
.dnd-opt small { font-size: .76rem; color: var(--muted); margin-top: -4px; }
@media (max-width: 520px) { .dnd-opt { flex-direction: row; align-items: center; } .dnd-opt small { margin: 0 0 0 auto; } }
[data-dnd-off] { align-self: flex-start; }
.dnd-quiet { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.dnd-quiet .pref-row > span { display: flex; flex-direction: column; gap: 2px; }
.dnd-quiet .pref-row small { color: var(--muted); font-size: .78rem; }
.dnd-times { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .88rem; color: var(--muted); }
.dnd-times[hidden] { display: none; }
.dnd-times select { width: auto; flex: 0 0 auto; }
.popup-field .seg-tabs { align-self: flex-start; flex-wrap: wrap; }
.dnd-quiet .pref-row { padding: 0; }
.mp-txt { flex: 1; }
.dnd-moon { width: 16px; height: 16px; }
.dnd-moon .icon { fill: none; stroke: #fff; stroke-width: 2.6; width: 10px; height: 10px; }
.tabbar .dnd-moon { left: calc(50% - 24px); top: 3px; }
.bk-scopes { display: flex; flex-direction: column; gap: 10px; }
.bk-scope { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.bk-scope-name { font: 650 .84rem var(--f-display); }
.where-pick { padding: 12px 14px; border-radius: 14px; background: var(--brand-soft); }
.where-pick label { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-text); }
.where-pick label .icon { width: 16px; height: 16px; }
.where-pick .input { background: var(--surface); }

/* ---------- noticeboard ---------- */
.nb-headrow { align-items: flex-end; }
.section-head > .nb-actions { display: flex; flex-direction: row; gap: 8px; align-items: center; flex: none; }
.nb-lede { margin: -4px 0 16px; max-width: 60ch; }
.nbc-general { --nb: var(--brand); }
.nbc-important { --nb: var(--danger); }
.nbc-courts { --nb: var(--court); }
.nbc-social { --nb: #8a5bd6; }
.nbc-kit { --nb: #2f7fd6; }
.nbc-juniors { --nb: #e0781f; }
.nb-board {
  --cork: #c4925a; --frame: #8a5a33;
  position: relative; padding: 26px 22px; border-radius: 14px; margin: 10px; display: flex; flex-direction: column; gap: 22px;
  background-color: var(--cork);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(90, 50, 20, .35) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(255, 230, 190, .35) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 80%, rgba(70, 40, 15, .3) 0 1.4px, transparent 2px),
    radial-gradient(circle at 85% 15%, rgba(110, 65, 30, .28) 0 .8px, transparent 1.3px),
    radial-gradient(ellipse at 50% 40%, rgba(255, 220, 170, .25), transparent 70%),
    radial-gradient(ellipse at 100% 100%, rgba(60, 30, 10, .25), transparent 60%);
  background-size: 7px 7px, 11px 11px, 13px 13px, 5px 5px, 100% 100%, 100% 100%;
  box-shadow: inset 0 2px 10px rgba(50, 25, 5, .45), inset 0 0 0 1px rgba(60, 30, 10, .4),
    0 0 0 10px var(--frame), 0 0 0 11px #5e3a1e, 0 1px 0 11px #a7744a, 0 14px 30px 8px rgba(40, 20, 5, .25);
}
:root[data-theme="dark"] .nb-board { --cork: #8f6638; --frame: #5e3c20; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nb-board { --cork: #8f6638; --frame: #5e3c20; } }
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px 22px; align-items: start; }
.nb-card, .nb-home { position: relative; padding: 22px 18px 14px; border-top: 4px solid var(--nb, var(--brand)); display: flex; flex-direction: column; gap: 10px; }
.nb-card {
  /* Paper: light in both themes, like a sheet pinned to the cork. The sheet itself is drawn by ::before
     with slightly uneven edges, a coloured top edge, and now and then a fold or a turned corner. */
  --surface: #fffdf6; --surface-2: #f5efe2; --ink: #26221c; --ink-2: #4b453b; --muted: #706a5e; --line: rgba(70, 50, 25, .14); --line-strong: rgba(70, 50, 25, .26); --brand-text: color-mix(in oklab, var(--brand) 80%, #000);
  --paper: #fffcf3; --flap: #ece2cc; --fold: none;
  --edge: polygon(0.5% 0.8%, 28% 0.2%, 55% 0.9%, 81% 0.1%, 99.6% 0.7%, 99.2% 26%, 100% 52%, 99.4% 79%, 99.8% 99.5%, 71% 99.1%, 44% 100%, 18% 99.3%, 0.2% 99.8%, 0.8% 71%, 0 44%, 0.6% 18%);
  color: var(--ink); background: none; border: 0; border-radius: 0; box-shadow: none; padding-top: 28px;
  transform: rotate(var(--tilt, 0deg)); transition: transform .25s var(--ease), filter .25s var(--ease);
  filter: drop-shadow(0 1px 1px rgba(40, 20, 5, .28)) drop-shadow(0 7px 7px rgba(40, 20, 5, .28));
}
.nb-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--edge);
  background:
    linear-gradient(var(--band, var(--nb, var(--brand))) 0 5px, transparent 5px),
    var(--fold),
    radial-gradient(ellipse at 0% 0%, rgba(255, 255, 255, .85), transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(150, 115, 60, .12), transparent 55%),
    linear-gradient(176deg, var(--paper), color-mix(in oklab, var(--paper) 92%, #c8b48c));
}
/* A few kinds of sheet, so the board looks pinned up by different hands. */
.nb-card:nth-child(4n+2) { --paper: #ffffff; --fold: linear-gradient(181deg, transparent 47%, rgba(90, 65, 30, .07) 48.2%, rgba(255, 255, 255, .9) 48.6%, transparent 50.5%);
  --edge: polygon(0.3% 0.4%, 33% 1%, 64% 0.2%, 99.7% 0.9%, 100% 33%, 99.3% 61%, 99.9% 99.2%, 62% 99.8%, 37% 99.1%, 0.4% 100%, 0 67%, 0.7% 35%); }
.nb-card:nth-child(4n+3) { --paper: #fdf8ec;
  --edge: polygon(0.6% 0.3%, 40% 0.9%, 74% 0.1%, 99.5% 0.6%, 99.9% 40%, 99.3% 72%, 100% calc(100% - 22px), calc(100% - 22px) 100%, 52% 99.4%, 21% 100%, 0.1% 99.5%, 0.7% 58%, 0 25%); }
.nb-card:nth-child(4n) { --fold: linear-gradient(91deg, transparent 58%, rgba(90, 65, 30, .06) 59.2%, rgba(255, 255, 255, .85) 59.6%, transparent 61.5%);
  --edge: polygon(0.2% 0.9%, 24% 0.2%, 51% 0.7%, 77% 0, 99.8% 0.5%, 99.4% 48%, 100% 99.6%, 58% 99%, 29% 99.8%, 0.5% 99.3%, 0 52%); }
.nb-top { --edge: polygon(0.3% 1.2%, 20% 0.3%, 42% 1%, 63% 0.2%, 84% 0.9%, 99.8% 0.4%, 99.4% 50%, 100% 99.3%, 76% 98.8%, 51% 99.7%, 26% 98.9%, 0.4% 99.6%, 0 50%); }
.nb-card:hover { transform: rotate(0deg) translateY(-2px); filter: drop-shadow(0 2px 2px rgba(40, 20, 5, .26)) drop-shadow(0 12px 12px rgba(40, 20, 5, .3)); }
/* The pin presses a little dimple into the paper. */
.nb-card::after { content: ""; position: absolute; top: 2px; left: 50%; width: 44px; height: 22px; margin-left: -22px; background: radial-gradient(ellipse at 50% 0%, rgba(60, 40, 15, .16), transparent 70%); pointer-events: none; }
/* The turned corner on some sheets. */
.nb-card:nth-child(4n+3)::after { top: auto; left: auto; right: 0; bottom: 0; margin: 0; width: 22px; height: 22px; background: linear-gradient(to bottom right, #f4ecda 0, var(--flap) 49%, transparent 50%); filter: drop-shadow(-1px -1px 1px rgba(60, 40, 15, .18)); }
.nb-card .nb-cat { color: color-mix(in oklab, var(--nb, var(--brand)) 85%, #000); }
.nb-card h3 { letter-spacing: -.01em; }
.nb-card .nb-private { background: color-mix(in oklab, var(--nb, var(--brand)) 7%, #fffdf6); }
.nb-card .btn:not(.primary) { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.nb-card .icon-btn { color: var(--ink-2); }
.nb-card h3, .nb-home h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.nb-top { padding: 24px 22px 16px; }
.nb-top h3 { font-size: 1.35rem; }
.nb-pin {
  position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85) 0 2px, rgba(255,255,255,0) 4.5px), radial-gradient(circle at 50% 55%, var(--nb, var(--brand)) 0 55%, color-mix(in oklab, var(--nb, var(--brand)) 60%, #000) 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,.35), 3px 5px 4px -1px rgba(40, 20, 5, .45);
}
.nb-pin::after { content: ""; position: absolute; left: 50%; top: 15px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: linear-gradient(#cfd2d6, #8d9196); opacity: .0; }
.nb-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 28px; }
.nb-cat { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--nb, var(--brand)); }
.nb-cat .icon { width: 14px; height: 14px; }
.nb-topchip { color: var(--ink-2); padding-left: 8px; border-left: 1px solid var(--line); }
.nb-new { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--nb, var(--brand)); color: #fff; }
.nb-tools { margin-left: auto; display: inline-flex; gap: 2px; }
.nb-up .icon { transform: rotate(180deg); }
.nb-card .post-body { margin: 0; }
.nb-private {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md);
  background: color-mix(in oklab, var(--nb, var(--brand)) 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nb, var(--brand)) 25%, transparent);
}
.nb-private > .icon { width: 18px; height: 18px; color: var(--nb, var(--brand)); flex: none; }
.nb-plabel { flex: 1; font-weight: 650; font-size: .9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-secret { flex: none; font: 700 .9rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.nb-left { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 600; min-width: 2.4ch; display: inline-block; text-align: right; }
.nb-private.shown .nb-secret { color: var(--ink); font-size: 1.3rem; letter-spacing: .1em; user-select: all; }
.nb-link { align-self: flex-start; }
.nb-foot { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); }
.nb-foot > span:not(.avatar) { display: inline-flex; align-items: center; gap: 4px; }
.nb-foot .icon { width: 13px; height: 13px; }
.nb-foot .avatar { width: 24px; height: 24px; font-size: .58rem; letter-spacing: 0; }
.nb-foot .btn { margin-left: auto; }
.nb-down { opacity: .82; }
.nb-flash { animation: nb-flash 1.6s var(--ease) 2; }
@keyframes nb-flash { 50% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--nb, var(--brand)) 40%, transparent), var(--shadow); } }
.nb-pastsec { margin-top: 18px; }
.nb-pastsec > [data-nb-past] { align-self: flex-start; width: auto; }
.nb-past { margin-top: 14px; }
.nb-home { margin-bottom: 18px; }
.nb-home-main { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px; }
.nb-home-main p { margin: 0; }
.nb-more { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 650; color: var(--brand-text); text-decoration: none; align-self: flex-start; }
.nb-more .icon { width: 14px; height: 14px; }
.nb-strip { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 18px; text-decoration: none; color: inherit; border-left: 4px solid var(--brand); }
.nb-strip > span { flex: 1; display: flex; flex-direction: column; }
.nb-pfield { padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.nb-ptitle { display: flex; gap: 10px; align-items: flex-start; }
.nb-ptitle > .icon { width: 20px; height: 20px; color: var(--brand); flex: none; margin-top: 2px; }
.nb-ptitle > div { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
.nb-prow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nb-catpick label:has(input:checked) { background: var(--nb); border-color: var(--nb); color: #fff; }
@media (max-width: 640px) {
  .nb-board { padding: 22px 12px; margin: 8px 4px; gap: 20px; }
  .nb-card { transform: rotate(calc(var(--tilt, 0deg) * .6)); }
  .nb-prow { grid-template-columns: 1fr; }
  .nb-private { flex-wrap: wrap; row-gap: 8px; }
  .nb-plabel { flex: 1 0 calc(100% - 30px); white-space: normal; }
  .nb-secret { margin-right: auto; }
  .nb-headrow { flex-wrap: wrap; gap: 10px; }
  .section-head > .nb-actions { flex-wrap: wrap; }
}

/* ---------- noticeboard: photos, sticky notes and stamps ---------- */
.nb-hand, .nb-hand-title, .nb-caption, .nb-sign > span:first-child { font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; }
.nb-ptop { display: flex; align-items: center; gap: 6px; min-height: 24px; margin-top: -8px; }
.nb-ptop .nb-tools { margin-left: auto; }
.nb-sign { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: .78rem; color: var(--muted); }
.nb-sign > span:first-child { font-size: 1.25rem; color: var(--ink-2); margin-right: auto; }
.nb-sign .btn { margin-left: auto; }

/* A photo pinned up like a print, taped at the top corners. */
.nb-card.nbs-photo { --band: transparent; --paper: #ffffff; --fold: none; --edge: polygon(0 0, 100% 0, 100% 100%, 0 100%); padding: 14px 14px 12px; gap: 8px; }
.nb-card.nbs-photo::after { display: none; }
.nb-print { margin: 0; }
.nb-print .ph { display: block; position: relative; width: 100%; padding: 0; border: 0; background: #eee; cursor: zoom-in; }
.nb-print img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.nb-print .more { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; font-weight: 700; }
.nb-caption { margin: 2px 0 0; text-align: center; font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: #2b2721; }
.nbs-photo .nb-hand { text-align: center; font-size: 1.25rem; line-height: 1.25; }
.nbs-photo .nb-sign { justify-content: center; }
.nbs-photo .nb-sign > span:first-child { margin-right: 0; }
.nb-tape { position: absolute; top: -9px; width: 86px; height: 26px; z-index: 2; pointer-events: none;
  background: linear-gradient(rgba(255, 252, 235, .72), rgba(245, 236, 205, .62)); box-shadow: 0 1px 2px rgba(60, 40, 15, .18);
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 2%, 82% 0, 88% 9%, 94% 1%, 100% 10%, 100% 92%, 94% 100%, 88% 90%, 82% 99%, 18% 100%, 12% 91%, 6% 99%, 0 90%); }
.nb-tape.t1 { left: -18px; transform: rotate(-32deg); }
.nb-tape.t2 { right: -18px; transform: rotate(32deg); }

/* Sticky notes: coloured, handwritten, a touch of glue darker at the top. */
.nb-card.nbs-note { --band: rgba(0, 0, 0, .05); --paper: #fff3a3; --fold: none; --edge: polygon(0 0, 100% 0, 100% 100%, 0 100%); min-height: 210px; padding: 26px 20px 14px; }
.nb-card.nbs-note::after { display: none; }
.nbs-note.nbk-yellow { --paper: #fff1a1; }
.nbs-note.nbk-pink { --paper: #ffd3e1; }
.nbs-note.nbk-blue { --paper: #cfe6ff; }
.nbs-note.nbk-green { --paper: #d3f2c4; }
.nbs-note.nbk-orange { --paper: #ffd9ab; }
.nb-hand-title { margin: 0; font-size: 2rem !important; font-weight: 700; line-height: 1.05; color: #2b2721; }
.nbs-note .nb-hand { font-size: 1.4rem; line-height: 1.22; color: #2f2a22; }
.nbs-note .nb-hand ul { padding-left: 1.1em; }
.nbs-note .nb-private, .nbs-photo .nb-private { background: rgba(255, 255, 255, .55); }
.nbs-note .nb-sign { margin-top: auto; padding-top: 6px; }

/* Rubber stamps. */
.nb-stamp {
  position: relative; align-self: flex-end; margin: 6px 10px 2px 0; z-index: 3; pointer-events: none; transform: rotate(-8deg);
  padding: 5px 12px; border: 3px solid currentColor; border-radius: 6px; color: var(--st, #c0392b);
  font: 800 .95rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; opacity: .8;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 0 55%, rgba(0,0,0,.75) 70%), radial-gradient(#000 .6px, transparent .9px);
  -webkit-mask-size: 100% 100%, 5px 5px; -webkit-mask-composite: source-over;
}
.nbs-photo .nb-stamp { align-self: center; margin-right: 0; }
.st-thanks { --st: #c2333a; } .st-welldone { --st: #1d7a3a; } .st-welcome { --st: #1f5fd1; }
.st-savedate { --st: #7a3fd0; } .st-congrats { --st: #c26a00; } .st-cancelled { --st: #b3121d; }

/* The notice sheet: how it looks, colour, stamp and quick starts. */
#nb-form .only-note { display: none; }
#nb-form[data-look="note"] .only-note { display: flex; }
.nb-starts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nb-starts > .muted { font-size: .82rem; font-weight: 650; margin-right: 4px; }
.nb-starts .chip { cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); }
.nb-starts .chip.on { background: var(--brand-soft); border-color: var(--brand); }
.nb-lookpick, .nb-colours, .nb-stamppick { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nb-lookpick legend, .nb-colours legend, .nb-stamppick legend { font-size: .82rem; font-weight: 650; padding: 0; margin-bottom: 8px; width: 100%; }
.nb-look-opt { flex: 1 1 140px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px 10px; border: 1px solid var(--line-strong); border-radius: 14px; cursor: pointer; text-align: center; }
.nb-look-opt input, .nb-colours input, .nb-stamppick input { position: absolute; opacity: 0; pointer-events: none; }
.nb-look-opt:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.nb-look-opt small { font-size: .75rem; }
.nb-mini { width: 64px; height: 46px; border-radius: 6px; margin-bottom: 6px; display: grid; place-items: center; background: radial-gradient(rgba(90,50,20,.3) .8px, transparent 1.2px) 0 0 / 6px 6px, #c4925a; box-shadow: inset 0 0 0 3px #8a5a33; }
.nb-mini i { display: block; transform: rotate(-4deg); box-shadow: 0 2px 3px rgba(40,20,5,.35); }
.nbm-paper i { width: 26px; height: 32px; background: linear-gradient(#c33 0 3px, #fffcf3 3px); }
.nbm-photo i { width: 28px; height: 30px; background: linear-gradient(#7fb3d5, #4e8a5a) 3px 3px / 22px 19px no-repeat, #fff; }
.nbm-note i { width: 28px; height: 28px; background: #fff1a1; transform: rotate(5deg); }
.nb-colours label { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; position: relative; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.nb-colours label:has(input:checked) { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--brand); }
.nb-colours .nbk-yellow { --sw: #fff1a1; } .nb-colours .nbk-pink { --sw: #ffd3e1; } .nb-colours .nbk-blue { --sw: #cfe6ff; } .nb-colours .nbk-green { --sw: #d3f2c4; } .nb-colours .nbk-orange { --sw: #ffd9ab; }
.nb-stamppick label { cursor: pointer; position: relative; padding: 6px; border-radius: 10px; border: 1px solid transparent; }
.nb-stamppick label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.nb-stamppick .nb-stamp { position: static; transform: rotate(-4deg); font-size: .72rem; display: inline-block; mix-blend-mode: normal; }
.nb-nostamp { display: inline-block; padding: 5px 10px; font-size: .8rem; font-weight: 650; color: var(--muted); }
label.nb-ptitle { cursor: pointer; align-items: center; }
label.nb-ptitle > div { flex: 1; min-width: 0; }
label.nb-ptitle > .switch { flex: none; }
.nb-pbody { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.nb-pbody[hidden] { display: none; }

/* Home: a photo top notice shows its picture. */
.nb-home-main.has-photo { flex-direction: row; gap: 14px; align-items: center; }
.nb-home-ph { width: 84px; height: 84px; object-fit: cover; flex: none; border: 5px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.18); transform: rotate(-3deg); }
.nb-home-main > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Arrange: drag notices around the board. */
.nb-arrange-hint { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); font-size: .9rem; font-weight: 600; }
.nb-arrange-hint .icon { width: 16px; height: 16px; color: var(--brand); }
.nb-arranging .nb-grid > .nb-card { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.nb-arranging .nb-grid > .nb-card:hover { transform: rotate(var(--tilt, 0deg)); }
.nb-grid > .nb-card.nb-dragging { z-index: 20; cursor: grabbing; transition: none; filter: drop-shadow(0 4px 4px rgba(40, 20, 5, .3)) drop-shadow(0 22px 22px rgba(40, 20, 5, .35)); }
.nb-dragging-on > .nb-card:not(.nb-dragging) { transition: transform .2s var(--ease); }

/* Sizes: notices line up in columns (one on phones, two on tablets, three on wide screens). A normal notice fills a column,
   a wide one two, and a small one half a column, so two small photos sit neatly side by side. */
.nb-board { container-type: inline-size; }
.nb-board .nb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
.nb-grid > .nb-card { grid-column: span 2; }
.nb-grid > .nbz-small { grid-column: span 1; }
.nb-grid > .nbz-wide { grid-column: span 2; }
@container (min-width: 620px) { .nb-board .nb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nb-grid > .nbz-wide { grid-column: span 4; } }
@container (min-width: 900px) { .nb-board .nb-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 20px; } }
.nb-past { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.nb-past > .nb-card { grid-column: auto; }
.nbz-small { padding: 20px 12px 10px; gap: 8px; }
.nbz-small h3 { font-size: .98rem; }
.nbz-small .post-body { font-size: .88rem; }
.nbz-small.nbs-photo { padding: 10px 10px 8px; }
.nbz-small .nb-caption { font-size: 1.3rem; }
.nbz-small .nb-hand-title { font-size: 1.5rem !important; }
.nbz-small.nbs-note { min-height: 150px; padding: 22px 14px 10px; }
.nbz-small.nbs-note .nb-hand { font-size: 1.15rem; }
.nbz-small .nb-stamp { font-size: .72rem; padding: 4px 8px; border-width: 2px; }
.nbz-small .nb-foot { font-size: .72rem; }
.nbz-small .nb-tape { width: 64px; height: 22px; }
.nbz-wide.nbs-note .nb-hand { font-size: 1.55rem; }
.nbz-wide .nb-print img { max-height: 460px; }
/* The size picker in the sheet. */
.nb-sizepick { border: 0; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.nb-sizepick legend { font-size: .82rem; font-weight: 650; padding: 0; margin-bottom: 8px; width: 100%; }
.nb-sizepick label { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; font-weight: 650; font-size: .88rem; }
.nb-sizepick input { position: absolute; opacity: 0; pointer-events: none; }
.nb-sizepick label:has(input:checked) { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.nb-sz { display: inline-block; height: 14px; border-radius: 2px; background: currentColor; opacity: .55; }
.nbsz-small { width: 9px; } .nbsz-normal { width: 16px; } .nbsz-wide { width: 28px; }

/* Packed board: tiny rows, each notice spans what it needs (packBoard in app.js), so shorter notices sit snugly under each other. */
.nb-board .nb-grid.nb-packed { grid-auto-rows: 4px; row-gap: 0; align-items: start; }

/* Wide notices and the Top notice: a pin at each end instead of one in the middle. */
.nb-pin.nb-pin-l { left: 14%; }
.nb-pin.nb-pin-r { left: 86%; }
.nb-card:has(.nb-pin-l)::after { display: none; }

/* Noticeboard: a small tennis ball bounces beside the link while something is new or changed (no count). */
.nb-ball { flex: none; margin-left: auto; width: 11px; height: 11px; border-radius: 50%; display: inline-block; position: relative;
  background: radial-gradient(circle at 35% 30%, #f4ff7a 0 22%, #d9f02c 55%, #b5cc12 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.25); animation: nbBounce 1.6s cubic-bezier(.3,.1,.4,1) infinite; }
.nb-ball::after { content: ''; position: absolute; inset: 1px; border-radius: 50%; border: 1.2px solid rgba(255,255,255,.85); border-left-color: transparent; border-bottom-color: transparent; transform: rotate(-20deg); }
.members-tile strong .nb-ball { margin-left: 8px; vertical-align: 2px; }
@keyframes nbBounce { 0%, 55%, 100% { transform: translateY(0); } 20% { transform: translateY(-6px); } 38% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .nb-ball { animation: none; } }

/* All spaces: Noticeboard and Members tiles sit close together. */
.space-tiles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.space-tiles .members-tile { margin-bottom: 0; }

/* Sidebar heading picker with a clear button. */
.sec-pick { display: flex; gap: 8px; align-items: center; }
.sec-pick select { flex: 1; }

/* Club admin, Branding: menu order. */
.nav-order { display: flex; flex-direction: column; gap: 6px; }
.nav-order li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); list-style: none; }
.nav-order li > .icon { width: 18px; height: 18px; color: var(--brand-text); }
.nav-order li span { flex: 1; font-weight: 600; }
.nav-order li .icon-btn:disabled { opacity: .3; }
.nav-order ol { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* offline: a calm bar while there is no signal, and things waiting to send */
.offline-bar {
  position: fixed; z-index: 59; left: 50%; transform: translateX(-50%); bottom: calc(92px + var(--sab));
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 16px 8px 12px;
  border-radius: 999px; background: #2b3135; color: #fff; box-shadow: var(--shadow-lg); animation: offIn .3s var(--ease);
  pointer-events: none;
}
.offline-bar > .icon { width: 18px; height: 18px; color: #ffcf5c; flex: none; }
.offline-bar span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.offline-bar strong { font-size: .82rem; }
.offline-bar small { font-size: .74rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offline-bar.sending { background: var(--brand-deeper); }
.offline-bar .spin { flex: none; width: 14px; height: 14px; }
html.is-offline .toast { bottom: calc(150px + var(--sab)); }
body.chat-mode .offline-bar { bottom: calc(78px + var(--sab)); }
@media (min-width: 900px) { .offline-bar { bottom: 24px; left: calc(50% + var(--sidebar) / 2); } html.is-offline .toast { bottom: 84px; } }
.reply.pending.queued { opacity: .75; }
.queued-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.queued-tag .icon, .dm.queued .dm-meta .icon { width: 12px; height: 12px; }
.dm.queued .dm-bubble { opacity: .7; }
.mr-sent .icon { vertical-align: -2px; }
@keyframes offIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Long pills (training night with other teams) wrap on phones instead of running off the screen. */
.chip.chip-wrap { white-space: normal; max-width: 100%; min-width: 0; line-height: 1.35; text-align: left; height: auto; }
.chip.chip-wrap .icon { flex: none; }
.space-hero .chip-row { min-width: 0; max-width: 100%; }

/* Popups stay put: no sideways drift, no pinch zoom, and the page behind does not scroll. */
.sheet { overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; }
.sheet * { max-width: 100%; }
.sheet .sheet-actions > *, .sheet .icon-btn, .sheet .chip, .sheet .btn { max-width: none; }
.scrim { touch-action: none; overscroll-behavior: contain; }
.scrim .sheet { touch-action: pan-y; }
html.sheet-open, html.sheet-open body { overflow: hidden; }

/* Phone menu: the sidebar as a sheet */
.tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; border: 0; background: none; font: 600 .68rem var(--f-body, inherit); letter-spacing: .01em; color: var(--muted); border-radius: 16px; position: relative; cursor: pointer; transition: background .2s, color .2s; }
.tabbar button .icon { width: 21px; height: 21px; }
.tabbar button.active { color: var(--ink); background: var(--brand-soft); }
.tabbar button.active .icon { color: var(--brand-text); }
.tab-dot { position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.phone-menu { gap: 16px; }
.pm-sec { display: flex; flex-direction: column; gap: 8px; }
.pm-sec .eyebrow { margin: 0; }
.pm-recent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pm-tile { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--surface-2); color: var(--ink); text-decoration: none; min-width: 0; }
.pm-tile strong { font-size: .9rem; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pm-tile .space-ico { flex: none; width: 36px; height: 36px; }
.pm-tile .unread { position: absolute; top: 6px; right: 6px; }
.pm-tile.active, .pm-space.active, .pm-link.active { background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 30%, transparent); }
.pm-list { display: flex; flex-direction: column; gap: 2px; }
.pm-space { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.pm-space .icon { width: 19px; height: 19px; color: var(--brand); flex: none; }
.pm-space span:first-of-type { flex: 1; min-width: 0; }
.pm-space:active, .pm-link:active, .pm-tile:active { background: var(--surface-2); }
.pm-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pm-link { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.pm-link .icon { width: 18px; height: 18px; color: var(--brand); flex: none; }

/* Member editor: everyone is a member, then anything else they do */
.em-roles { display: flex; flex-direction: column; gap: 8px; }
.em-roles-head { display: flex; flex-direction: column; gap: 2px; }
.em-roles-head strong { font: 700 1rem var(--f-display); }
.em-roles-head .muted { font-size: .85rem; }
.em-sub { margin: 6px 0 0; font: 650 .74rem var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.em-base, .em-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 14px; background: var(--surface-2); color: var(--ink); text-decoration: none; position: relative; }
.em-base > .icon, .em-opt > .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--brand); }
.em-base > span, .em-opt > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.em-base strong, .em-opt strong { font-size: .92rem; }
.em-base small, .em-opt small { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.em-base .em-tick { margin-left: auto; color: var(--brand); }
.em-base.admin, .em-opt.admin > .icon { color: var(--brand-text); }
.em-opt { cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.em-opt input { position: absolute; opacity: 0; pointer-events: none; }
.em-opt::after { content: ''; flex: none; width: 20px; height: 20px; border-radius: 6px; margin-left: auto; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--surface); }
.em-opt:has(input:checked) { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--brand) 55%, transparent); }
.em-opt:has(input:checked)::after { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow: none; }
.em-opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.em-opt.admin:has(input:checked) { background: color-mix(in oklab, var(--accent) 18%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 55%, transparent); }
.em-opt.locked { opacity: .6; cursor: not-allowed; }
.em-opt.fixed { cursor: pointer; }
.em-opt.fixed::after { content: none; }
.em-manage { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--brand-text); text-decoration: none; padding: 4px 0; }
.em-manage .icon { width: 16px; height: 16px; }
.role-chip .icon { width: 12px; height: 12px; }

/* Member editor: everyone is a member, then anything else they do */
.em-roles { display: flex; flex-direction: column; gap: 8px; }
.em-roles-head { display: flex; flex-direction: column; gap: 2px; }
.em-roles-head strong { font: 700 1rem var(--f-display); }
.em-roles-head .muted { font-size: .85rem; }
.em-sub { margin: 6px 0 0; font: 650 .74rem var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.em-base, .em-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 14px; background: var(--surface-2); color: var(--ink); text-decoration: none; position: relative; }
.em-base > .icon, .em-opt > .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--brand); }
.em-base > span, .em-opt > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.em-base strong, .em-opt strong { font-size: .92rem; }
.em-base small, .em-opt small { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.em-base .em-tick { margin-left: auto; color: var(--brand); }
.em-opt { cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.em-opt input { position: absolute; opacity: 0; pointer-events: none; }
.em-opt::after { content: ''; flex: none; width: 20px; height: 20px; border-radius: 6px; margin-left: auto; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--surface); }
.em-opt:has(input:checked) { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--brand) 55%, transparent); }
.em-opt:has(input:checked)::after { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow: none; }
.em-opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.em-opt.admin:has(input:checked) { background: color-mix(in oklab, var(--accent) 18%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 55%, transparent); }
.em-opt.locked { opacity: .6; cursor: not-allowed; }
.em-opt.fixed::after { content: none; }
.em-manage { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--brand-text); text-decoration: none; padding: 4px 0; }
.em-manage .icon { width: 16px; height: 16px; }
.role-chip .icon { width: 12px; height: 12px; }

/* ---------- Emails and alerts (Club admin) ---------- */
.am-group { margin-top: 22px; }
.am-group h3 { font: 700 .78rem var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px 4px; }
.am-note { font-size: .85rem; margin: -2px 4px 10px; }
.am-list { padding: 4px; overflow: hidden; }
.am-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: 0; border-radius: 12px; padding: 12px 12px; color: inherit; font: inherit; cursor: pointer; }
.am-row + .am-row { box-shadow: 0 -1px 0 var(--line); }
.am-row:hover { background: var(--surface-2); }
.am-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.am-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.am-main strong { font: 650 .95rem var(--f-display); }
.am-main .muted { font-size: .82rem; line-height: 1.35; }
.am-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 46%; }
.am-ch { background: transparent; }
.am-empty { text-align: center; margin: 28px 0; }
@media (max-width: 620px) {
  .am-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .am-tags { justify-content: flex-start; max-width: none; }
}
.am-facts { display: grid; gap: 8px; margin: 4px 0 16px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
.am-facts p { margin: 0; font-size: .9rem; color: var(--ink-2); }
.am-facts strong { display: block; font: 700 .7rem var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 1px; }
.am-locked { display: flex; gap: 8px; align-items: flex-start; }
.am-locked .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.am-h { display: flex; align-items: center; gap: 8px; font: 700 1rem var(--f-display); margin: 22px 0 10px; }
.am-h .icon { width: 18px; height: 18px; color: var(--muted); }
.am-words { margin: 10px 0 4px; }
.am-words .chip-btn { font-family: ui-monospace, Menlo, monospace; font-weight: 600; font-size: .78rem; }
.am-words .chip-btn .muted { font-family: var(--f-body, inherit); font-weight: 500; }
.am-preview { display: grid; gap: 14px; }
.am-push { display: grid; gap: 2px; padding: 12px 14px; border-radius: 18px; background: color-mix(in oklab, var(--surface-2) 85%, var(--ink) 4%); box-shadow: var(--shadow-sm); max-width: 380px; font-size: .88rem; }
.am-push-app { display: flex; justify-content: space-between; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; margin-bottom: 2px; }
.am-push strong { font-weight: 700; }
.am-mail { border-radius: 14px; overflow: hidden; background: #fff; color: #374151; box-shadow: inset 0 0 0 1px var(--line); max-width: 520px; }
.am-mail-subj { padding: 10px 14px; font-size: .85rem; background: #f3f4f6; color: #111827; font-weight: 600; }
.am-mail-subj .muted { color: #6b7280; font-weight: 500; margin-right: 6px; }
.am-mail-bar { padding: 10px 16px; background: var(--brand); color: #fff; font: 700 .88rem var(--f-display); }
.am-mail-body { padding: 16px 18px 18px; font-size: .9rem; line-height: 1.5; }
.am-mail-body h4 { margin: 0 0 10px; font: 800 1.25rem/1.2 var(--f-display); color: #111827; }
.am-mail-body p { margin: 0 0 10px; }
.am-mail-panel { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--brand); background: color-mix(in oklab, var(--brand) 8%, #fff); color: #6b7280; font-size: .8rem; }
.am-mail-btn { display: inline-block; padding: 8px 16px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: .85rem; margin-bottom: 12px; }
.am-mail-note { color: #6b7280; font-size: .8rem; }
.am-actions { margin-top: 16px; flex-wrap: wrap; }
.toolbar [data-am-search] { flex: 1; max-width: 460px; }
/* Rich notes (saved with no signal, back online): the same look as the No signal bar. */
.toast { border-radius: 22px; text-align: center; }
.toast.toast-rich {
  display: flex; align-items: center; gap: 12px; text-align: left; width: max-content; max-width: min(400px, calc(100% - 32px));
  padding: 10px 18px 10px 10px; border-radius: 20px; background: #2b3135; color: #fff; font-weight: 500;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.06); transition: opacity .25s, transform .25s;
}
.toast-rich.out { opacity: 0; transform: translate(-50%, 6px); }
.tr-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 207, 92, .14); color: #ffcf5c; }
.tr-ico .icon { width: 18px; height: 18px; }
.tr-sent .tr-ico { background: rgba(76, 214, 160, .16); color: #5fdcaa; }
.tr-failed .tr-ico { background: rgba(255, 140, 120, .16); color: #ff9a86; }
.tr-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }
.tr-text strong { font-size: .86rem; font-weight: 700; }
.tr-text small { font-size: .76rem; opacity: .78; }
html.is-offline .toast-rich { bottom: calc(152px + var(--sab)); }
@media (min-width: 900px) { .toast.toast-rich { left: calc(50% + var(--sidebar) / 2); } html.is-offline .toast-rich { bottom: 84px; } }
.offline-bar { padding: 8px 18px 8px 8px; box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.06); }
.offline-bar > .icon { box-sizing: content-box; padding: 7px; border-radius: 50%; background: rgba(255, 207, 92, .14); }
.offline-bar .spin { margin: 0 6px; }

/* Popup headers stay at the top while the popup scrolls, so the close button is always in reach. */
.sheet > .sheet-head { max-width: none; position: sticky; top: -10px; z-index: 3; margin: -10px -20px -6px; padding: 14px 20px 10px; background: var(--surface); }
.sheet > .sheet-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: linear-gradient(var(--surface), transparent); pointer-events: none; }
.sheet > .sheet-head > [data-close] { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.sheet > .sheet-head > [data-close]:hover { background: color-mix(in oklab, var(--surface-2) 70%, var(--line-strong)); }
.sheet > .sheet-head > [data-close] .icon { width: 18px; height: 18px; }
.sheet > .grab + .sheet-head { margin-top: -18px; }
.phone-menu > .sheet-head { padding-bottom: 6px; }
.phone-menu > .sheet-head h2 { font-size: 1.2rem; }
@media (min-width: 700px) {
  .sheet > .sheet-head { top: -26px; margin: -26px -30px -6px; padding: 26px 30px 10px; }
  .sheet > .grab + .sheet-head { margin-top: -26px; }
}

.sh-short { display: none; }
/* Space header on phones (Olly, 11 Nov): the icon tile sat in its own column and pushed
   everything right, leaving a gap under it. On phones the icon sits beside the name,
   then the description, chips, season and buttons all use the full width. */
@media (max-width: 600px) {
  .space-hero { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: center; padding: 18px 16px 16px; border-radius: 22px; }
  .space-hero::after { right: -90px; bottom: -110px; }
  .space-hero .titles { display: contents; }
  .space-hero .space-ico { grid-column: 1; grid-row: 1; width: 44px; height: 44px; border-radius: 14px; }
  .space-hero .space-ico .icon { width: 21px; height: 21px; }
  .space-hero h1 { grid-column: 2; grid-row: 1; font-size: 1.6rem; line-height: 1.1; min-width: 0; overflow-wrap: anywhere; }
  .space-hero .titles > p, .space-hero .chip-row, .space-hero .season-strip, .space-hero .space-head-actions { grid-column: 1 / -1; position: relative; z-index: 1; }
  .space-hero .titles > p { margin: -2px 0 0; font-size: .92rem; line-height: 1.4; }
  .space-hero .titles > p:empty { display: none; }
  .space-hero .chip-row { gap: 6px; }
  .space-hero .chip { font-size: .8rem; }
  .space-hero .season-strip { margin-top: 2px; padding-top: 12px; }
  .space-hero .space-head-actions { order: 4; margin: 4px 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 8px; }
  .space-hero .space-head-actions .btn { justify-content: center; gap: 6px; padding: 10px 10px; font-size: .86rem; border-radius: 12px; white-space: nowrap; }
  .space-hero .space-head-actions .sh-full { display: none; }
  .space-hero .space-head-actions .sh-short { display: inline; }
}
/* Space settings: the way in to the People tab, so adding people is easy to find on phones. */
.sp-people-link { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.sp-people-link > svg { flex: none; width: 22px; height: 22px; color: var(--muted); }
.sp-people-link > span { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-people-link > span .muted { font-size: .84rem; }
.sp-people-link .btn { flex: none; margin-left: auto; }
/* Tabs on phones (Olly, 11 Nov): tabs off the right edge were easy to miss (People, Planner,
   Usage). On phones every tab strip wraps onto as many rows as it needs, so all of them show,
   and the courts view switch gets its own full width row with New booking under it. */
@media (max-width: 600px) {
  .tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); overflow: visible; align-self: stretch; gap: 3px; }
  .tabs button { text-align: center; padding: 8px 8px; white-space: normal; line-height: 1.25; }
  .bk-toolbar { flex-wrap: wrap; gap: 10px; }
  .bk-toolbar .bk-views { flex: 1 1 100%; width: 100%; flex-wrap: wrap; overflow: visible; gap: 3px; }
  .bk-toolbar .bk-views button { flex: 1 1 auto; text-align: center; padding: 8px 10px; }
  .bk-toolbar .btn.primary, .bk-toolbar .btn.primary:only-child { flex: 1 1 100%; width: 100%; height: auto; padding: 11px 14px; justify-content: center; }
  .bk-toolbar .btn.primary span { display: inline; }
}

/* ---------- System status (Club admin, System) ---------- */
.sys-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 6px; vertical-align: middle; background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn) 22%, transparent); }
.sys-dot.bad { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent); }
.sys-hero { --tone: var(--court); display: flex; align-items: center; gap: 16px; padding: 20px 22px; margin: 14px 0; border-radius: var(--r-lg); background: linear-gradient(135deg, color-mix(in oklab, var(--tone) 13%, var(--surface)), var(--surface) 70%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 24%, var(--line)), var(--shadow-sm); }
.sys-hero.warn { --tone: var(--warn); } .sys-hero.bad { --tone: var(--danger); }
.sys-hero > div { flex: 1; min-width: 0; }
.sys-hero h2 { margin: 0; font: 750 1.35rem/1.2 var(--f-display); letter-spacing: -.02em; }
.sys-hero p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.sys-orb { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 6px color-mix(in oklab, var(--tone) 18%, transparent); animation: sys-pulse 2.4s var(--ease) infinite; }
@keyframes sys-pulse { 50% { box-shadow: 0 0 0 11px color-mix(in oklab, var(--tone) 6%, transparent); } }
@media (prefers-reduced-motion: reduce) { .sys-orb { animation: none; } }
.sys-problems { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.sys-problems li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sys-problems li.bad { box-shadow: inset 3px 0 0 var(--danger), inset 0 0 0 1px var(--line); }
.sys-problems li.warn { box-shadow: inset 3px 0 0 var(--warn), inset 0 0 0 1px var(--line); }
.sys-problems strong { display: block; font-weight: 650; }
.sys-problems small, .sys-services small, .sys-facts small, .sys-steps small, .sys-incidents small { display: block; color: var(--muted); font-size: .8rem; font-weight: 500; margin-top: 2px; }
.sys-page { container-type: inline-size; display: grid; gap: 22px; }
.sys-page > .sys-hero, .sys-page > .sys-problems { margin: 0; }
/* At a glance: one tile per card, tap to jump to it. */
.sys-overview { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 560px) { .sys-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 760px) { .sys-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sys-tile { --tone: var(--court); display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 0; border-radius: var(--r-md); background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); transition: box-shadow .15s var(--ease), transform .15s var(--ease); }
.sys-tile:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 45%, var(--line)), var(--shadow-sm); transform: translateY(-1px); }
.sys-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sys-tile.warn { --tone: var(--warn); } .sys-tile.bad { --tone: var(--danger); } .sys-tile.off { --tone: var(--muted); }
.sys-tile.warn, .sys-tile.bad { background: color-mix(in oklab, var(--tone) 7%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 30%, var(--line)), var(--shadow-sm); }
.sys-tile-ic { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in oklab, var(--tone) 12%, var(--surface)); color: var(--tone); }
.sys-tile-ic .icon { width: 16px; height: 16px; }
.sys-tile-ic::after { content: ""; position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 2px var(--surface); }
.sys-tile > span:last-child { min-width: 0; display: grid; }
.sys-tile strong { font-size: .86rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-tile small { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-tile.warn small, .sys-tile.bad small { color: color-mix(in oklab, var(--tone) 80%, var(--text)); font-weight: 600; }
/* Sections: a heading, then cards. Wide cards take the full row and split in two. */
.sys-sec { display: grid; gap: 12px; min-width: 0; }
.sys-sec-head h2 { margin: 0; font: 750 1.08rem/1.25 var(--f-display); letter-spacing: -.01em; }
.sys-sec-head p { margin: 2px 0 0; color: var(--muted); font-size: .86rem; }
.sys-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 640px) { .sys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .sys-card.wide { grid-column: 1 / -1; } }
.sys-card { padding: 18px 20px; display: grid; gap: 12px; min-width: 0; align-content: start; scroll-margin-top: 80px; }
.sys-card > .hint:last-child { margin-top: 2px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .82rem; }
.sys-split { display: grid; gap: 14px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.sys-split > div { display: grid; gap: 12px; align-content: start; min-width: 0; }
@container (min-width: 640px) { .sys-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } .sys-split > div + div { padding-left: 24px; border-left: 1px solid var(--line); } }
.sys-split .sys-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
.sys-split .sys-actions .btn { justify-content: center; white-space: normal; text-align: center; min-width: 0; }
.sys-note { color: var(--text-2, var(--muted)); font-size: .9rem; line-height: 1.5; }
.sys-flash { animation: sys-flash 1.2s var(--ease); }
@keyframes sys-flash { 0%, 30% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 40%, transparent), var(--shadow-sm); } 100% { box-shadow: var(--shadow-sm); } }
@media (prefers-reduced-motion: reduce) { .sys-flash { animation: none; } .sys-tile:hover { transform: none; } }
/* Small number tiles (notifications, database counts). */
.sys-stats { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sys-stats > div { display: grid; gap: 1px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.sys-stats b { font: 750 1.4rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.sys-stats span { font-size: .84rem; font-weight: 600; }
.sys-stats small { font-size: .76rem; color: var(--muted); }
.sys-secrets code { display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: .74rem; box-shadow: inset 0 0 0 1px var(--line); }
@container (min-width: 640px) { .sys-secrets { grid-template-columns: 1fr 1fr; column-gap: 28px; } .sys-secrets li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); } .sys-secrets li:last-child:nth-child(even), .sys-secrets li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }
.sys-secrets .sys-pill, .sys-services em { flex: none; }
.sys-card header { display: flex; align-items: center; gap: 10px; }
.sys-card h3 { margin: 0; flex: 1; font: 700 1.02rem/1.2 var(--f-display); }
.sys-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); }
.sys-ic .icon { width: 17px; height: 17px; }
.sys-card .hint, .sys-card p { margin: 0; }
.sys-pill { --tone: var(--court); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: .78rem; font-weight: 650; white-space: nowrap; color: var(--tone); background: color-mix(in oklab, var(--tone) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 22%, transparent); }
.sys-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sys-pill.warn, .sys-pill.slow { --tone: var(--warn); } .sys-pill.bad, .sys-pill.down { --tone: var(--danger); } .sys-pill.unknown, .sys-pill.off { --tone: var(--muted); }
.sys-big { font: 700 1.15rem/1.3 var(--f-display); }
.sys-big .muted { font: 500 .9rem var(--f-body); }
.sys-strip { display: grid; grid-template-columns: repeat(96, 1fr); gap: 2px; height: 28px; }
.sys-strip i { border-radius: 2px; background: var(--line); }
.sys-strip i.ok { background: color-mix(in oklab, var(--court) 75%, var(--surface)); }
.sys-strip i.bad { background: var(--danger); }
.sys-strip i.miss { background: color-mix(in oklab, var(--warn) 55%, var(--surface)); }
.sys-strip-key { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; margin-top: -6px; }
.sys-more summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--brand-text); }
.sys-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.sys-steps li { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; }
.sys-steps li span { flex: 1; }
.sys-steps li em { font-style: normal; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.sys-steps .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--court); }
.sys-steps li.bad .icon { color: var(--danger); }
.sys-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; border-radius: var(--r-sm); overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.sys-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--surface); font-size: .9rem; }
.sys-facts li > span { color: var(--muted); flex: 0 1 auto; }
.sys-facts li b { flex: 1 1 auto; min-width: 0; }
.sys-facts li b { font-weight: 650; text-align: right; }
.sys-counts { grid-template-columns: 1fr 1fr; }
.sys-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; letter-spacing: .02em; word-break: break-all; }
.sys-meter > div { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; margin-bottom: 6px; }
.sys-meter span { color: var(--muted); }
.sys-meter b span { font-weight: 500; }
.sys-bar { display: block; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.sys-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.sys-bar.warn i { background: var(--warn); } .sys-bar.bad i { background: var(--danger); }
.sys-services { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sys-services li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sys-services li:last-child { border-bottom: 0; }
.sys-services li > div { flex: 1; min-width: 0; }
.sys-services strong { font-weight: 650; font-size: .93rem; }
.sys-services em { font-style: normal; font-weight: 600; font-size: .85rem; text-align: right; white-space: nowrap; }
.sys-sv { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--court); box-shadow: 0 0 0 3px color-mix(in oklab, var(--court) 16%, transparent); }
.sys-sv.slow { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn) 18%, transparent); }
.sys-sv.down { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 18%, transparent); }
.sys-sv.off { background: var(--line-strong); box-shadow: none; }
.sys-problems .sys-sv { margin-top: 5px; }
.sys-plat { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); display: grid; gap: 6px; }
.sys-plat-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sys-parts, .sys-incidents { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; }
.sys-parts li { display: flex; justify-content: space-between; gap: 10px; }
.sys-parts span { color: var(--warn); font-weight: 600; text-transform: capitalize; }
.sys-incidents li.rel { padding-left: 10px; box-shadow: inset 2px 0 0 var(--warn); }
.sys-incidents a, .sys-link { color: var(--brand-text); font-weight: 600; text-decoration: none; }
.sys-link { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.sys-link .icon { width: 14px; height: 14px; }
.sys-actions { flex-wrap: wrap; gap: 8px; margin: 0; }
.sys-copyline { display: flex; gap: 8px; align-items: center; padding: 8px 8px 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.sys-copyline code { flex: 1; min-width: 0; }
.sys-warn { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in oklab, var(--warn) 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 24%, transparent); }
.sys-warn .icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--warn); margin-top: 1px; }
.sys-warn p { margin: 0; font-size: .9rem; }
.sys-keybox { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sys-keybox code { font-size: 1rem; line-height: 1.5; user-select: all; }
.sys-howto { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.sys-ren { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sys-ren .sys-ren-note { grid-column: 1 / 3; }
.sys-ren [data-rm] { grid-row: 1; grid-column: 3; }
@media (max-width: 600px) {
  .sys-hero { flex-wrap: wrap; padding: 16px; }
  .sys-hero .btn { width: 100%; }
  .sys-card { padding: 16px; }
  .sys-strip { gap: 1px; height: 24px; }
}
/* Shared links: a card with the page's picture, headline and website, like the ones in WhatsApp. */
.link-card { position: relative; display: flex; flex-direction: column; margin-top: 12px; max-width: 560px; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
a.link-card:hover { box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-sm); }
a.link-card:active { transform: scale(.995); }
.link-card .lc-img { display: block; aspect-ratio: 1.91 / 1; background: var(--line); overflow: hidden; }
.link-card .lc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.link-card .lc-text { display: grid; gap: 3px; padding: 11px 14px 13px; min-width: 0; }
.link-card .lc-site { display: flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-card .lc-site .icon { width: 13px; height: 13px; flex: none; }
.link-card .lc-title { font-family: var(--f-display); font-weight: 700; font-size: .98rem; line-height: 1.32; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.link-card .lc-desc { font-size: .86rem; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-card .lc-go { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--surface) 88%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--ink); opacity: 0; transition: opacity .2s var(--ease); }
.link-card .lc-go .icon { width: 15px; height: 15px; }
a.link-card:hover .lc-go, a.link-card:focus-visible .lc-go { opacity: 1; }
.link-card.no-img .lc-go { top: 50%; transform: translateY(-50%); background: transparent; opacity: .6; }
.link-card.no-img .lc-text { padding-right: 46px; }
/* In a form: a small card with a picture on the left and a cross to take the link off. */
.link-card.compact { flex-direction: row; align-items: stretch; margin-top: 0; max-width: none; }
.link-card.compact .lc-img { flex: 0 0 96px; aspect-ratio: auto; min-height: 76px; }
.link-card.compact .lc-text { flex: 1; padding: 10px 44px 10px 12px; align-content: center; }
.link-card.compact .lc-desc { -webkit-line-clamp: 1; }
.link-card .lc-rm { position: absolute; top: 6px; right: 6px; }
.link-card.loading .lc-title { color: var(--muted); font-weight: 600; }
.link-card.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--surface) 60%, transparent) 50%, transparent 70%); background-size: 200% 100%; animation: lc-shine 1.2s linear infinite; }
@keyframes lc-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .link-card.loading::after { animation: none; } }
.link-hint { display: flex; align-items: center; gap: 6px; margin-top: -6px; }
.link-hint .icon { width: 14px; height: 14px; flex: none; }
form:has([data-link-box]:not([hidden])) .link-hint { display: none; }
@media (max-width: 600px) { .link-card { max-width: none; } .link-card .lc-go { opacity: 1; } .link-card.compact .lc-img { flex-basis: 84px; } }

/* ---------- Terms of use and the Clubhouse licence ---------- */
.terms-text { color: var(--ink-2); line-height: 1.62; font-size: .95rem; max-width: 70ch; }
.terms-text > * + * { margin-top: 10px; }
.terms-text h3 { margin-top: 22px; font-size: 1.04rem; color: var(--ink); font-family: var(--f-display); }
.terms-text h3:first-child { margin-top: 0; }
.terms-text ul { margin: 6px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.terms-text a { color: var(--brand-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.terms-text strong { color: var(--ink); }
.terms-page { display: flex; flex-direction: column; gap: 16px; }
.terms-short { background: var(--brand-soft); border-radius: var(--r-md); padding: 16px 18px; }
.terms-short .eyebrow { margin-bottom: 8px; }
.terms-ver { font-size: .82rem; }
.sheet .terms-text, .sheet .terms-short { margin-top: 4px; }

/* The accept screen: the short version first, the full text folded away, and I agree always in reach. */
.terms-gate { min-height: 100dvh; background: radial-gradient(1200px 500px at 50% -10%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 70%), var(--bg); padding: 28px 16px 0; }
.tg-card { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 210px; }
.tg-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tg-head h1 { font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.12; }
.tg-logo { width: 56px; height: 56px; border-radius: 16px; object-fit: contain; background: #fff; box-shadow: var(--shadow-sm); padding: 6px; }
span.tg-logo { display: grid; place-items: center; padding: 0; }
.tg-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 20px 20px 18px; max-width: none; }
.tg-summary ul { list-style: none; padding: 0; gap: 12px; margin-top: 14px; }
.tg-summary li { position: relative; padding-left: 30px; }
.tg-summary li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.tg-summary p:last-child { font-size: .88rem; color: var(--muted); }
.tg-change { background: color-mix(in oklab, var(--accent) 18%, var(--surface)); border: 1px solid color-mix(in oklab, var(--accent) 50%, var(--line)); border-radius: var(--r-md); padding: 12px 14px; font-size: .92rem; }
.tg-change p { margin-top: 4px; color: var(--ink-2); }
.tg-more { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.tg-more > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; border-radius: inherit; }
.tg-more > summary::-webkit-details-marker { display: none; }
.tg-more > summary:hover { background: var(--surface-2); }
.tg-more > summary > .icon { width: 20px; height: 20px; color: var(--brand); flex: none; }
.tg-more > summary > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tg-more > summary small { color: var(--muted); font-size: .82rem; }
.tg-more .tg-chev { transition: transform .2s var(--ease); color: var(--muted); }
.tg-more[open] .tg-chev { transform: rotate(180deg); }
.tg-more > .terms-text { padding: 4px 18px 20px; border-top: 1px solid var(--line); padding-top: 16px; max-width: none; }
.tg-junior { background: var(--surface-2); border-radius: var(--r-md); padding: 12px 14px; font-size: .9rem; font-weight: 600; }
.tg-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: color-mix(in oklab, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgb(0 0 0 / .08); padding: 14px 16px calc(14px + var(--sab)); }
.tg-bar-in { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.tg-side { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.tg-agree { width: 100%; justify-content: center; min-height: 52px; font-size: 1.05rem; }
.tg-legal { font-size: .8rem; color: var(--muted); text-align: center; line-height: 1.45; }
.tg-legal a { color: var(--brand-text); }
.tg-out { align-self: center; padding: 2px 8px; }
.tg-bar .form-error:empty { display: none; }

/* Club admin, Terms of use */
.tc-status { display: flex; flex-direction: column; gap: 12px; }
.tc-bar { display: block; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.tc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.tc-waiting summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.tc-waiting p { margin: 6px 0 8px; }
.tc-names { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.tc-btns { display: flex; flex-wrap: wrap; gap: 8px; }

.tc-label { font-size: .82rem; font-weight: 650; letter-spacing: -.005em; }
.tc-pols { display: flex; flex-direction: column; gap: 8px; }
.tc-pol-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
.tc-pol-add { align-self: flex-start; }
@media (max-width: 600px) {
  .tc-pol-row { grid-template-columns: minmax(0, 1fr) auto; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
  .tc-pol-row [data-pol-url] { grid-column: 1; grid-row: 2; }
  .tc-pol-row [data-pol-del] { grid-column: 2; grid-row: 1 / span 2; }
}

@media (min-width: 760px) {
  .terms-gate .tg-card { padding-bottom: 150px; }
  .tg-bar .tg-bar-in { flex-direction: row; align-items: center; gap: 24px; position: relative; }
  .tg-bar .form-error { position: absolute; left: 0; bottom: 100%; margin-bottom: 8px; }
  .tg-bar .tg-agree { width: auto; min-width: 220px; order: 2; flex: 0 0 auto; }
  .tg-bar .tg-side { flex: 1 1 auto; min-width: 0; align-items: flex-start; order: 1; }
  .tg-bar .tg-legal { text-align: left; }
  .tg-bar .tg-out { align-self: flex-start; padding-left: 0; }
}
.sys-sub { margin: 6px 0 0; font: 700 .92rem/1.3 var(--f-display); }

/* Links members write: tappable, short, and never stretching the page. */
.auto-link { color: var(--brand-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; word-break: break-word; font-weight: 600; }
.auto-link:hover { text-decoration-thickness: 2px; }
.dm.mine .auto-link { color: inherit; }
/* First link on this device: a short reminder under the card. */
.link-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: .84rem; color: var(--ink-2); }
.link-note > svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--muted); }
.link-note p { margin: 0; flex: 1; line-height: 1.45; }
.link-note .btn { flex: 0 0 auto; align-self: center; }
@media (max-width: 600px) { .link-note { flex-wrap: wrap; } .link-note .btn { margin-left: 28px; } }

/* ---------- weather (Met Office) and court conditions ---------- */
a.hero-weather { color: inherit; text-decoration: none; border-radius: 10px; }
a.hero-weather:hover span:not(.dot) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
a.hero-hours { text-decoration: none; color: inherit; border-radius: 16px; transition: transform .15s ease; }
a.hero-hours:hover .hh { background: rgba(255,255,255,.15); }
a.hero-hours:active { transform: scale(.98); }
.hero-court { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 6px 10px 6px 8px; border-radius: 999px; font-size: .78rem; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); backdrop-filter: blur(6px); max-width: 100%; }
.hero-court b { font-weight: 750; margin-right: 2px; }
.hero-court .icon { width: 15px; height: 15px; flex: none; }
.hero-court .icon:last-child { width: 13px; height: 13px; opacity: .6; }
.hero-court.tone-good .icon:first-child { color: #8ff0c4; }
.hero-court.tone-warn .icon:first-child { color: #e6cf9f; }
.hero-court.tone-bad .icon:first-child { color: #ffb3a6; }
@media (max-width: 899px) { .hero-corner .hero-court { margin-top: 10px; } }

.wx-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1100px; }
.wx-page > * { min-width: 0; }
.wx-page .card { padding: 20px; }
.wx-head { max-width: 1100px; margin-bottom: 16px; align-items: flex-end; }
@media (max-width: 600px) { .wx-page .card { padding: 16px; } }
.wx-col { display: contents; }
.wx-now { order: 1; } .wx-courts { order: 2; } .wx-hours-card { order: 3; } .wx-days { order: 4; } .wx-events { order: 5; } .wx-page > .wx-credit { order: 6; }
@media (min-width: 980px) {
  .wx-page { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
  .wx-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .wx-side { position: sticky; top: 84px; }
  .wx-page > .wx-credit { grid-column: 1 / -1; }
}
.wx-now { color: #fff; background: radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--brand) 70%, #3fd0a1) 0%, var(--brand-deep) 55%, var(--brand-deeper) 100%); border: 0; }
.wx-now .eyebrow { color: rgba(255,255,255,.75); }
.wx-now-main { display: flex; align-items: center; gap: 16px; }
.wx-now-main > .icon { width: 64px; height: 64px; color: var(--accent); stroke-width: 1.4; flex: none; }
.wx-temp { font: 800 3.4rem/1 var(--f-display); letter-spacing: -.03em; margin: 2px 0; }
.wx-label { font-weight: 650; opacity: .9; }
.wx-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.wx-facts > div { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 14px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.wx-facts .icon { width: 20px; height: 20px; color: var(--accent); flex: none; }
.wx-facts span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.wx-facts b { font-weight: 750; font-size: .95rem; white-space: nowrap; }
.wx-facts small { font-size: .7rem; opacity: .7; }
@media (max-width: 520px) { .wx-facts { grid-template-columns: repeat(2, 1fr); } }
.wx-src { margin-top: 14px; font-size: .8rem; color: rgba(255,255,255,.75) !important; }

.wx-courts { --tone: #1f9d6b; border-top: 4px solid var(--tone); }
.wx-courts.tone-warn { --tone: #b8925a; }
.wx-courts.tone-bad { --tone: var(--danger); }
.wxc-head { display: flex; align-items: center; gap: 12px; }
.wxc-head h2 { margin: 0; font-size: 1.5rem; }
.wxc-badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in oklab, var(--tone) 14%, var(--surface)); color: var(--tone); flex: none; }
.wxc-badge .icon { width: 24px; height: 24px; }
.wxc-advice { margin-top: 12px; font-size: 1rem; line-height: 1.45; }
.wxc-reported { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .84rem; color: var(--brand-text); font-weight: 600; }
.wxc-reported .icon { width: 16px; height: 16px; flex: none; }
.wxc-reported.old { color: var(--muted); font-weight: 500; }
.wxc-strip { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; margin-top: 16px; height: 12px; }
.wxc-strip span { border-radius: 3px; background: #1f9d6b; }
.wxc-strip .st-damp { background: #d2b07c; } .wxc-strip .st-wet { background: #e46b3b; } .wxc-strip .st-rain { background: #4f86d9; } .wxc-strip .st-frost { background: #8fc6ec; }
.wxc-strip-key { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); margin-top: 4px; }
.wxc-rain { margin-top: 12px; font-size: .84rem; }
.wxc-next { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #eef4fd; border: 1px solid #d9e6fa; font-size: .9rem; line-height: 1.4; }
[data-theme="dark"] .wxc-next { background: rgba(79,134,217,.14); border-color: rgba(79,134,217,.3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wxc-next { background: rgba(79,134,217,.14); border-color: rgba(79,134,217,.3); } }
.wxc-next .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #4f86d9; }
.wxc-next b { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.wxc-rain .icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.wxc-report { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.wxr-title { font-weight: 700; font-size: .92rem; }
.wxr-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wxr-chip { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 6px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 650; font-size: .86rem; cursor: pointer; text-align: center; }
.wxr-wind .wxr-chip { min-height: 38px; font-size: .8rem; font-weight: 600; }
.wxr-chip input { position: absolute; opacity: 0; pointer-events: none; }
.wxr-chip .icon { width: 17px; height: 17px; flex: none; }
.wxr-chip:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-soft); color: var(--brand-text); }
.wxr-chip.st-dry:has(input:checked) { box-shadow: inset 0 0 0 2px #1f9d6b; } .wxr-chip.st-damp:has(input:checked) { box-shadow: inset 0 0 0 2px #b8925a; background: color-mix(in oklab, #b8925a 12%, var(--surface)); color: inherit; } .wxr-chip.st-wet:has(input:checked) { box-shadow: inset 0 0 0 2px var(--danger); background: color-mix(in oklab, var(--danger) 10%, var(--surface)); color: inherit; }
.wxr-state { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wxr-state .wxr-chip { flex-direction: column; gap: 3px; min-height: 58px; padding: 8px 4px; }
.wxr-chip.st-icy:has(input:checked) { box-shadow: inset 0 0 0 2px #4f8fc0; background: color-mix(in oklab, #4f8fc0 12%, var(--surface)); color: inherit; }
.wxr-chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.wxc-report .btn { justify-self: stretch; }
.wxr-hint { font-size: .74rem; color: var(--muted); }
.wxc-reported q { display: block; margin-top: 3px; font-style: italic; color: var(--ink); font-weight: 500; }
.wxc-reported { align-items: flex-start !important; }
.wxc-note { margin-top: 12px; font-size: .74rem; color: var(--muted); }

.wx-hours { display: flex; gap: 6px; overflow-x: auto; padding: 10px 2px 4px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.wxh { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 58px; padding: 9px 4px; border-radius: 14px; background: var(--surface-2); scroll-snap-align: start; }
.wxh.now { background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 30%, transparent); }
.wxh-t { font-size: .7rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.wxh .icon { width: 22px; height: 22px; color: var(--brand-text); }
.wxh strong { font: 750 1rem var(--f-display); }
.wxh-r { font-size: .7rem; font-weight: 700; color: #2f6fc0; } .wxh-r.dry { color: var(--muted); font-weight: 600; }
.wxh-w { font-size: .7rem; color: var(--muted); } .wxh-w small { margin-left: 1px; font-size: .6rem; }

.wx-days .wxd { display: grid; grid-template-columns: 7.2rem 22px minmax(0, 1fr) 2.6rem 2rem 1fr 2rem; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.wx-days .wxd:first-of-type { border-top: 0; }
.wxd-n { font-weight: 700; display: flex; align-items: center; gap: 4px; }
.wxd-good { font-size: .8rem; }
.wxd .icon { width: 22px; height: 22px; color: var(--brand-text); }
.wxd-l { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wxd-r { font-size: .78rem; font-weight: 700; color: var(--muted); text-align: right; } .wxd-r.wet { color: #2f6fc0; }
.wxd-lo { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; } .wxd-hi { font-weight: 750; font-variant-numeric: tabular-nums; }
.wxd-bar { position: relative; height: 6px; border-radius: 3px; background: var(--surface-2); }
.wxd-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #6fb6e8, var(--accent)); }
@media (max-width: 520px) { .wx-days .wxd { grid-template-columns: 5.6rem 22px 2.4rem 1.8rem 1fr 1.8rem; } .wxd-l { display: none; } }

.wx-events .wxe { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.wx-events .wxe:first-of-type { border-top: 0; }
.wxe-d { display: flex; flex-direction: column; min-width: 3.4rem; font-size: .78rem; color: var(--muted); } .wxe-d b { color: var(--ink); font-size: .9rem; }
.wxe-m { display: flex; flex-direction: column; flex: 1; min-width: 0; } .wxe-m small { color: var(--muted); font-size: .8rem; }
.wxe-m small .icon { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.wx-page > .wx-credit { text-align: center; }

.wx-courts-row { text-decoration: none; color: inherit; }
.wx-courts-row.st-damp .icon { color: #a5814b; } .wx-courts-row.st-wet .icon, .wx-courts-row.st-rain .icon, .wx-courts-row.st-frost .icon { color: var(--danger); }

.wx-admin .wxa-key { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); }
.wx-admin .wxa-key p { font-size: .82rem; margin-top: 2px; }
.wxa-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wxa-entry { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
.wxa-entry .input { flex: 1; min-width: 200px; font-family: ui-monospace, monospace; }
.wx-admin form { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }

.hero-said { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: .78rem; opacity: .9; }
.hero-said .icon { width: 14px; height: 14px; color: var(--accent); flex: none; }
.wx-said { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 650; }
.wx-said .icon { width: 14px; height: 14px; }

/* Met Office mark (text only; their logo needs permission) */
.mo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 999px; font-size: .68rem; font-weight: 750; letter-spacing: .02em; white-space: nowrap;
  color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.mo-badge i { width: 8px; height: 8px; border-radius: 50%; background: #9be15d; box-shadow: 0 0 0 3px rgba(155,225,93,.25); }
.mo-badge.lg { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: .76rem; padding: 6px 12px 6px 10px; }
.mo-badge.lg i { background: #2e9d4a; box-shadow: 0 0 0 3px rgba(46,157,74,.18); }

/* Right now on Home */
.hero-now { display: block; margin-top: 16px; max-width: 520px; padding: 14px 16px; border-radius: 18px; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); backdrop-filter: blur(8px); transition: background .15s ease; }
.hero-now:hover { background: rgba(255,255,255,.13); }
.hn-main { display: flex; align-items: center; gap: 12px; }
.hn-main > .icon { width: 42px; height: 42px; color: var(--accent); flex: none; stroke-width: 1.5; }
.hn-main > strong { font: 800 2.3rem/1 var(--f-display); letter-spacing: -.03em; }
.hn-main > span:not(.mo-badge) { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.hn-main b { font-weight: 700; }
.hn-main small { font-size: .78rem; opacity: .75; }
.hn-main .mo-badge { align-self: flex-start; }
.hn-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.hn-facts > span { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; padding: 7px 9px; border-radius: 12px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.hn-facts .icon { grid-row: span 2; width: 18px; height: 18px; color: var(--accent); }
.hn-facts b { font-size: .86rem; font-weight: 750; white-space: nowrap; }
.hn-facts small { font-size: .66rem; opacity: .7; white-space: nowrap; }
.hn-line { margin-top: 10px; font-size: .82rem; opacity: .85; }
@media (max-width: 420px) { .hn-main > strong { font-size: 2rem; } .hn-facts b { font-size: .8rem; } }

/* Weather page extras */
.wx-now .mo-badge { margin-left: auto; align-self: flex-start; }
.wxh-bar { position: relative; width: 6px; height: 22px; border-radius: 3px; background: color-mix(in oklab, #2f6fc0 12%, var(--surface)); overflow: hidden; }
.wxh-bar i { position: absolute; left: 0; right: 0; bottom: 0; background: #4f86d9; border-radius: 3px; }
.wxr-desk { display: flex !important; align-items: center; gap: 10px; }
.wxr-desk > .icon { width: 22px; height: 22px; color: var(--brand-text); flex: none; }
.wxr-desk span { display: flex; flex-direction: column; } .wxr-desk small { color: var(--muted); font-size: .8rem; }

/* Weather card on an event's page */
.ev-wx { display: block; margin-bottom: 14px; padding: 16px; border-radius: 18px; color: #fff; text-decoration: none;
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--brand) 70%, #3fd0a1) 0%, var(--brand-deep) 55%, var(--brand-deeper) 100%); }
.ev-wx .eyebrow { color: rgba(255,255,255,.75); margin: 0; }
.evw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ev-wx .hn-facts { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
.evw-hours { display: flex; gap: 5px; overflow-x: auto; margin-top: 12px; padding-bottom: 2px; scrollbar-width: none; }
.evw-h { flex: 1 0 46px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 3px 6px; border-radius: 12px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); font-size: .66rem; }
.evw-h.start { background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1.5px var(--accent); }
.evw-h > span { font-weight: 700; opacity: .8; }
.evw-h .icon { width: 18px; height: 18px; color: var(--accent); }
.evw-h b { font-size: .84rem; }
.evw-h small { color: #bfe3ff; font-weight: 700; }
.evw-h i { width: 18px; height: 4px; border-radius: 2px; margin-top: 2px; background: #5fd39a; }
.evw-h i.cs-damp { background: #e6cf9f; } .evw-h i.cs-wet { background: #ff8a65; } .evw-h i.cs-rain { background: #7fb2ff; } .evw-h i.cs-frost { background: #bfe3ff; }
.evw-now { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: .84rem; opacity: .9; }
.evw-now .icon { width: 17px; height: 17px; flex: none; }
.evw-now b { font-weight: 750; margin-right: 3px; }
.evw-rain { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 9px 11px; border-radius: 12px; background: rgba(138,180,255,.14); border: 1px solid rgba(138,180,255,.22); font-size: .86rem; line-height: 1.4; }
.evw-rain .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #8ab4ff; }
.evw-rain b { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.evw-courts { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 9px 11px; border-radius: 12px; background: rgba(255,255,255,.1); font-size: .84rem; line-height: 1.4; }
.evw-courts .icon { width: 18px; height: 18px; flex: none; color: #5fd39a; margin-top: 1px; }
.evw-courts.st-damp .icon { color: #e6cf9f; } .evw-courts.st-wet .icon, .evw-courts.st-rain .icon, .evw-courts.st-frost .icon { color: #ff8a65; }
.evw-note { margin-top: 8px; font-size: .7rem; opacity: .65; }

/* Maps inside popups: the popup's "nothing wider than the popup" rule (.sheet *) squeezed Leaflet's
   zero width panes, crushing pins and stopping the map drawing. Map internals size themselves. */
.sheet .leaflet-container *, .sheet .maplibregl-map * { max-width: none; }
/* The weather card sits in the event's detail list, whose links and icons are brand coloured. */
.detail-list a.ev-wx { color: #fff; margin-bottom: 0; }
.detail-list .ev-wx .icon { color: var(--accent); margin-top: 0; }
.detail-list .ev-wx .hn-main > .icon { width: 40px; height: 40px; }
.detail-list .ev-wx .evw-courts .icon { color: #5fd39a; margin-top: 1px; }
.detail-list .ev-wx .evw-rain .icon { color: #8ab4ff; }
.detail-list .ev-wx .evw-courts.st-damp .icon { color: #e6cf9f; }
.detail-list .ev-wx .evw-courts.st-wet .icon, .detail-list .ev-wx .evw-courts.st-rain .icon, .detail-list .ev-wx .evw-courts.st-frost .icon { color: #ff8a65; }
/* How are the courts? One tap card on Home */
.ca-host { margin: 0; }
.ca-card { position: relative; padding: 18px 18px 14px; border-radius: 20px; background: linear-gradient(160deg, color-mix(in oklab, var(--brand) 9%, var(--surface)), var(--surface) 60%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 22%, var(--line)), 0 14px 30px -24px rgba(18,26,22,.35); }
.ca-x { position: absolute; top: 10px; right: 10px; }
.ca-head { display: flex; gap: 12px; align-items: flex-start; padding-right: 30px; }
.ca-head h2, .ca-txt h2 { margin: 2px 0 4px; font-size: 1.2rem; }
.ca-head p.muted, .ca-txt p.muted { margin: 0; font-size: .86rem; }
.ca-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; }
.ca-ico .icon { width: 20px; height: 20px; }
.ca-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.ca-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.ca-btn .icon { width: 24px; height: 24px; }
.ca-btn:active { transform: scale(.97); }
.ca-btn.st-dry .icon { color: #1f9d6b; } .ca-btn.st-damp .icon { color: #a5814b; } .ca-btn.st-wet .icon { color: var(--danger); }
.ca-btn.st-dry.on { box-shadow: inset 0 0 0 2px #1f9d6b; background: color-mix(in oklab, #1f9d6b 10%, var(--surface)); }
.ca-btn.st-damp.on { box-shadow: inset 0 0 0 2px #b8925a; background: color-mix(in oklab, #b8925a 12%, var(--surface)); }
.ca-btn.st-wet.on { box-shadow: inset 0 0 0 2px var(--danger); background: color-mix(in oklab, var(--danger) 10%, var(--surface)); }
.ca-btn:disabled:not(.on) { opacity: .45; }
.ca-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 12px 0 0; font-size: .76rem; color: var(--muted); }
.ca-foot a { color: var(--brand-text); font-weight: 650; }
.ca-foot .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.ca-done, .ca-thanks { display: flex; gap: 12px; align-items: center; padding-right: 44px; }
.ca-done .btn { margin-top: 8px; }
.ca-thanks .ca-ico { background: #1f9d6b; animation: ca-pop .35s ease; }
@keyframes ca-pop { from { transform: scale(.6); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ca-thanks .ca-ico { animation: none; } .ca-btn { transition: none; } }
.ca-small { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ca-small > .icon { width: 20px; height: 20px; color: var(--brand); flex: none; }
.ca-small > span { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: .88rem; }
.ca-small small { color: var(--muted); font-size: .78rem; }
.wxc-seen { display: block; margin-top: 3px; font-weight: 500; color: var(--muted); }

/* One weather card on Home (right now, next five hours, courts), replacing the separate strip. */
.hero-now { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 440px; margin-top: 0; padding: 14px; }
.hero-now:hover { background: rgba(255,255,255,.09); }
.hn-top { display: block; color: inherit; text-decoration: none; border-radius: 12px; }
.hn-top:hover .hn-main b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.hn-facts-line { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; font-size: .78rem; opacity: .88; }
.hn-facts-line span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.hn-facts-line .icon { width: 14px; height: 14px; color: var(--accent); }
.hn-facts-line .hn-out { flex-basis: 100%; opacity: .85; }
.hero-now .hero-hours { width: 100%; }
.hero-now .hero-hours .hh { flex: 1; min-width: 0; padding: 7px 4px 6px; background: rgba(255,255,255,.07); }
.hero-now .hero-court { margin-top: 0; align-self: stretch; }
.hero-court .hc-strip { display: inline-flex; gap: 4px; margin-left: auto; padding-left: 8px; flex: none; }
.hero-court .hc-h { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 18px; }
.hero-court .hc-h small { font-size: .6rem; line-height: 1; opacity: .75; font-variant-numeric: tabular-nums; }
.hero-court .hc-strip i { display: block; width: 14px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.3); }
.hero-court .hc-strip .st-dry { background: #3fbf86; } .hero-court .hc-strip .st-damp { background: #e6cf9f; }
.hero-court .hc-strip .st-wet { background: #f0794a; } .hero-court .hc-strip .st-rain { background: #6f9ff0; } .hero-court .hc-strip .st-frost { background: #a9d6f5; }
.hero-court { flex-wrap: wrap; border-radius: 16px; }
.hero-court .hc-key { order: 10; flex: 1 0 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px 10px; margin: 2px 0 0; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.12); font-size: .62rem; font-weight: 500; color: rgba(255,255,255,.72); }
.hero-court .hc-key b { font-weight: 500; }
.hc-key span { display: inline-flex; align-items: center; gap: 5px; }
.hc-key > span:first-child { margin-right: auto; opacity: .85; }
.hc-key i { width: 9px; height: 9px; border-radius: 2px; }
.hc-key .st-dry { background: #3fbf86; } .hc-key .st-damp { background: #e6cf9f; } .hc-key .st-wet { background: #f0794a; } .hc-key .st-rain { background: #6f9ff0; } .hc-key .st-frost { background: #a9d6f5; }
@media (max-width: 420px) { .hero-court .hc-strip { gap: 2px; } .hero-court .hc-h { min-width: 16px; } .hero-court .hc-strip i { width: 12px; } }
.hero-corner .hero-now { margin-left: auto; }
@container (min-width: 860px) { .hero-corner { width: 420px; } .hero-now { max-width: none; } }
@media (max-width: 899px) { .hero-corner { margin-top: 16px; } .hero-corner .hero-now { margin-left: 0; } }

/* Courts card: say plainly it is about the courts, with a key for the strip. */
.wxc-strip-title { margin: 16px 0 6px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.wxc-strip-title + .wxc-strip { margin-top: 0; }
.wxc-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: .74rem; color: var(--muted); }
.wxc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.wxc-legend i { width: 10px; height: 10px; border-radius: 3px; background: #1f9d6b; }
.wxc-legend i.st-damp { background: #d2b07c; } .wxc-legend i.st-wet { background: #e46b3b; } .wxc-legend i.st-rain { background: #4f86d9; } .wxc-legend i.st-frost { background: #8fc6ec; }

/* Next 24 hours: all hours visible on wider screens (wrapping rows); phones scroll with a fade and a hint. */
@media (min-width: 600px) {
  .wx-hours { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); overflow: visible; }
  .wxh { width: auto; }
}
@media (max-width: 599px) {
  .wx-hours-card { position: relative; }
  .wx-hours { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .wx-hours-card .eyebrow::after { content: 'Swipe for more'; margin-left: 8px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); font-size: .72rem; }
}

/* Met Office credit: a light outline pill with the wording the DataHub licence asks for
   ("Powered by Met Office data"). White on the green cards, ink on light pages. */
.mo-badge, .mo-badge.lg { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: transparent;
  font-size: .6rem; font-weight: 600; letter-spacing: .01em; line-height: 1.4; white-space: nowrap;
  color: rgba(255,255,255,.78); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.mo-badge.lg { color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); font-size: .66rem; padding: 3px 10px; }
/* Where picker: the club and its courts, an away venue, or somewhere else */
.wp .wp-courts { margin-top: 8px; }
.wp .wp-courts[hidden], .wp .hint[hidden] { display: none; }
.wp [data-wp-other] { margin-top: 8px; }
.wp .wp-all span { font-weight: 650; }
/* Where does it go? before anything is picked: a gentle nudge to choose */
.where-pick.wp-none { box-shadow: inset 0 0 0 2px var(--brand); }
.where-pick.wp-none .input { color: var(--muted); }
.where-pick.wp-none .input option { color: var(--ink); }

/* ---------- Phone bottom bar, premium (Olly, 11 Nov) ----------
   Frosted glass dock, a brand pill behind the current tab that slides from the last tab (tabbar() in app.js sets --i, --from, --n). */
/* Sit into the home bar zone like Apple's own floating tab bars (Olly, 11 Nov: the dock looked too high).
   About 18pt from the bottom on iPhones with a home bar, 10px on phones without one. */
.tabbar {
  bottom: max(10px, calc(var(--sab) - 16px));
  --gap: 2px; --pad: 5px;
  gap: var(--gap); padding: var(--pad); max-width: 480px; margin-inline: auto; border-radius: 26px;
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.9); backdrop-filter: blur(26px) saturate(1.9);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 .5px rgba(10,30,20,.08), 0 2px 6px rgba(10,30,20,.05), 0 18px 40px -14px rgba(10,30,20,.32);
}
.tabbar > a, .tabbar > button {
  position: relative; z-index: 1; gap: 4px; padding: 9px 2px 7px; border-radius: 21px;
  font: 650 .66rem/1.1 var(--f-body, inherit); letter-spacing: .015em; color: var(--muted);
  -webkit-tap-highlight-color: transparent; transition: color .3s var(--ease), transform .18s var(--ease);
}
.tabbar > a span:not([class]), .tabbar > button span:not([class]) { white-space: nowrap; }
.tabbar > a .icon, .tabbar > button .icon { width: 22px; height: 22px; stroke-width: 1.6; transition: stroke-width .3s; }
.tabbar > a:active, .tabbar > button:active { transform: scale(.93); }
.tabbar > .active { background: transparent !important; color: #fff !important; }
.tabbar > .active .icon { color: #fff !important; stroke-width: 2; }
.tab-ind {
  position: absolute; z-index: 0; top: var(--pad); bottom: var(--pad); left: var(--pad);
  width: calc((100% - 2 * var(--pad) - (var(--n) - 1) * var(--gap)) / var(--n)); border-radius: 21px;
  transform: translateX(calc(var(--i) * (100% + var(--gap))));
  background: linear-gradient(165deg, color-mix(in oklab, var(--brand) 82%, #fff) 0%, var(--brand) 48%, color-mix(in oklab, var(--brand) 78%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.12), 0 8px 18px -8px color-mix(in oklab, var(--brand) 80%, transparent);
}
@media (max-width: 899px) {
  body::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(28px + var(--sab)); z-index: 19; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--bg) 70%); }
  body.chat-mode::after { display: none; }
}
.tab-ind.slide { animation: tab-slide .45s var(--ease); }
.tab-ind.slide ~ .active .icon { animation: tab-pop .45s var(--ease); }
@keyframes tab-slide { from { transform: translateX(calc(var(--from) * (100% + var(--gap)))); } }
@keyframes tab-pop { 0% { transform: scale(.8); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
.tabbar .tab-dot, .tabbar .bell-badge, .tabbar .dnd-moon { z-index: 2; }
.tabbar > .active .tab-dot { box-shadow: 0 0 0 2px var(--brand); }
:root[data-theme="dark"] .tabbar { background: color-mix(in oklab, var(--surface) 72%, transparent); border-color: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -12px rgba(0,0,0,.75); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabbar { background: color-mix(in oklab, var(--surface) 72%, transparent); border-color: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -12px rgba(0,0,0,.75); } }
@media (prefers-reduced-motion: reduce) { .tab-ind.slide, .tab-ind.slide ~ .active .icon { animation: none; } }

/* ---------- Home Courts bar on phones (Olly, 11 Nov) ----------
   The pill squeezed the words into three lines beside the strip. On phones: words on top, the six hours across the full width under them. */
@media (max-width: 600px) {
  .hero-now .hero-court { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic txt ch" "strip strip strip" "key key key"; align-items: center; column-gap: 9px; row-gap: 11px; padding: 12px 14px 11px; border-radius: 18px; font-size: .84rem; line-height: 1.3; }
  .hero-now .hero-court > .icon:first-child { grid-area: ic; width: 18px; height: 18px; }
  .hero-now .hero-court > span:not(.hc-strip):not(.hc-key) { grid-area: txt; min-width: 0; }
  .hero-now .hero-court > .icon:last-child { grid-area: ch; }
  .hero-now .hero-court .hc-strip { grid-area: strip; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.14); }
  .hero-now .hero-court .hc-h { min-width: 0; gap: 5px; }
  .hero-now .hero-court .hc-strip i { width: 100%; height: 7px; border-radius: 4px; }
  .hero-now .hero-court .hc-h small { font-size: .66rem; }
  .hero-now .hero-court .hc-key { grid-area: key; margin: -3px 0 0; padding-top: 0; border-top: 0; font-size: .66rem; }
}

/* ---------- For you: today's plan as a ticket (Olly, 11 Nov) ---------- */
.fy-card.today { position: relative; gap: 0; padding: 0; overflow: hidden; align-items: stretch; border-radius: 20px; border: 1px solid color-mix(in oklab, var(--brand) 22%, var(--line));
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--brand) 7%, var(--surface)), var(--surface) 60%);
  box-shadow: 0 1px 2px rgba(10,30,20,.05), 0 14px 30px -18px color-mix(in oklab, var(--brand) 55%, transparent); transition: transform .18s var(--ease), box-shadow .18s; }
.fy-card.today:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(10,30,20,.05), 0 18px 36px -18px color-mix(in oklab, var(--brand) 65%, transparent); }
.fy-card.today:active { transform: scale(.985); }
.fyt-time { position: relative; flex: none; width: 92px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; padding: 14px 6px; color: #fff; text-align: center;
  background: linear-gradient(160deg, color-mix(in oklab, var(--brand) 80%, #fff), var(--brand) 45%, color-mix(in oklab, var(--brand) 72%, #000)); }
.fyt-time small { font: 700 .62rem var(--f-body, inherit); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.fyt-time strong { font: 750 1.32rem/1.15 var(--f-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fyt-time em { font-style: normal; font-size: .7rem; font-weight: 600; margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.18); white-space: nowrap; }
.fyt-time::after { content: ""; position: absolute; top: 10px; bottom: 10px; right: -1px; border-right: 2px dotted color-mix(in oklab, var(--surface) 70%, transparent); }
.fy-card.today .fy-txt { justify-content: center; gap: 5px; padding: 14px 6px 14px 18px; }
.fy-card.today .fy-txt strong { font-size: 1.04rem; letter-spacing: -.005em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fyt-where { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--muted); min-width: 0; }
.fyt-where .icon { width: 14px; height: 14px; flex: none; }
.fyt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 1px; }
.fyt-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--brand-text); background: color-mix(in oklab, var(--brand) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 22%, transparent); }
.fyt-chip .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.fyt-chip.maybe { color: var(--muted); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.fyt-luck { font-size: .78rem; font-weight: 650; color: var(--muted); }
.fy-card.today > .icon:last-child { align-self: center; margin-right: 14px; }
/* Matches keep the club rule: yellow means a match */
.fy-card.today.match { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); box-shadow: 0 1px 2px rgba(10,30,20,.05), 0 14px 30px -18px color-mix(in oklab, var(--accent) 80%, transparent); }
.fy-card.today.match .fyt-time { color: var(--accent-ink, #2a2200); background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 70%, #fff), var(--accent) 50%, color-mix(in oklab, var(--accent) 85%, #000)); }
.fy-card.today.match .fyt-time em { background: rgba(0,0,0,.1); }
.fy-card.today.match .fyt-time::after { border-right-color: rgba(255,255,255,.6); }

/* ---------- Reply and chat box (Olly, 11 Nov) ----------
   The placeholder wrapped onto two lines inside a pill on phones. Placeholder stays on one line, the box is a soft rounded field,
   send is a solid club colour circle, and on phones the avatar steps aside to give the box room. */
.lite-edit:empty::before { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-form .lite-edit { border-radius: 22px; }
.reply-form > .btn[type="submit"] { flex: none; width: 42px; height: 42px; padding: 0; border-radius: 50%; display: grid; place-items: center; border-color: transparent;
  background: linear-gradient(160deg, color-mix(in oklab, var(--brand) 85%, #fff), var(--brand) 55%, color-mix(in oklab, var(--brand) 80%, #000)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -8px color-mix(in oklab, var(--brand) 80%, transparent); transition: transform .15s var(--ease); }
.reply-form > .btn[type="submit"] .icon { width: 18px; height: 18px; color: #fff; margin-left: -1px; }
.reply-form > .btn[type="submit"]:active { transform: scale(.92); }
.reply-form > .lite-cam { flex: none; color: var(--muted); }
@media (max-width: 600px) { .reply-form { gap: 6px; } .reply-form > .avatar { display: none; } }

/* ---------- Checklists ---------- */
.cl-st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font: 700 .72rem/1.3 var(--f-body); letter-spacing: .01em; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.cl-st .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.cl-st.good { background: color-mix(in oklab, var(--court) 13%, var(--surface)); color: var(--court); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 30%, transparent); }
.cl-st.warn { background: color-mix(in oklab, var(--warn) 13%, var(--surface)); color: color-mix(in oklab, var(--warn) 85%, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 30%, transparent); }
.cl-st.bad { background: color-mix(in oklab, var(--danger) 11%, var(--surface)); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger) 28%, transparent); }

.cl-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.cl-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cl-card.paused { opacity: .72; }
.cl-card-top { display: flex; gap: 12px; align-items: flex-start; }
.cl-card-name { flex: 1; min-width: 0; }
.cl-card-name h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.cl-card-name p { margin: 2px 0 0; font-size: .82rem; }
.cl-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--brand-soft); color: var(--brand-text); }
.cl-ico .icon { width: 20px; height: 20px; }
.cl-facts { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--ink-2); }
.cl-facts span { display: flex; gap: 8px; align-items: flex-start; }
.cl-facts .icon { width: 15px; height: 15px; margin-top: 3px; flex: none; color: var(--muted); }
.cl-last { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font: 500 .82rem var(--f-body); color: var(--ink-2); text-align: left; cursor: pointer; }
.cl-last > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-last > .icon { width: 15px; height: 15px; color: var(--muted); }
.cl-last.none { cursor: default; margin: 0; background: none; border-style: dashed; }
.cl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 600px) { .cl-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .cl-acts .btn { justify-content: center; padding-inline: 6px; } }

.cl-quick { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.cl-q { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s, border-color .15s; }
.cl-q:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.cl-q strong { font-size: .95rem; margin-top: 6px; }
.cl-q small { color: var(--muted); font-size: .8rem; }
.cl-q.blank { border-style: dashed; background: none; box-shadow: none; }
.cl-q-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--brand); color: var(--brand-ink); }
.cl-q-ico .icon { width: 19px; height: 19px; }
.cl-q.blank .cl-q-ico { background: var(--surface-2); color: var(--ink-2); }
@media (max-width: 600px) { .cl-quick { grid-template-columns: 1fr 1fr; } .cl-q { padding: 14px; } }

.cl-mini { --p: 0; width: 26px; height: 26px; flex: none; border-radius: 50%; background: conic-gradient(var(--court) calc(var(--p) * 360deg), var(--line) 0); -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 64%); mask: radial-gradient(farthest-side, transparent 62%, #000 64%); }
.fy-card.cl-todo { border-color: color-mix(in oklab, var(--brand) 32%, var(--line)); background: linear-gradient(120deg, color-mix(in oklab, var(--brand) 9%, var(--surface)), var(--surface) 70%); }
.fy-card.cl-todo .fy-ico { background: var(--brand); color: var(--brand-ink); }
.fy-card.cl-todo:not(.mine) .fy-sub { color: var(--brand-text); font-weight: 650; }
.cl-inbox { margin-bottom: 18px; }

/* the builder */
.cl-sheet { max-width: 640px; }
.cl-form .sheet-actions .spacer { flex: 1; }
.cl-fs { border: 0; margin: 0; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); display: block; min-width: 0; }
/* Block, not flex: Safari leaves a legend on the border of a flex fieldset (Olly, 11 Nov). Spacing between items replaces the flex gap. */
.cl-fs > legend + * { clear: both; }
.cl-fs > * + *:not([hidden]) { margin-top: 10px; }
.cl-fs > legend + * { margin-top: 0; }
.cl-fs legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font: 750 .78rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cl-fs .hint { margin: 0; }
.cl-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cl-items li { display: grid; grid-template-columns: 18px 38px minmax(0, 1fr) auto 34px; gap: 6px; align-items: center; }
.cl-items li.cl-none { display: block; font-size: .88rem; padding: 6px 2px; }
.cl-n { font: 700 .78rem var(--f-body); color: var(--muted); text-align: right; }
.cl-items .input { background: var(--surface); }
.cl-kind { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--court); display: grid; place-items: center; cursor: pointer; }
.cl-kind .icon { width: 18px; height: 18px; }
.cl-kind.k-photo { color: #2f6f80; background: color-mix(in oklab, #2f6f80 10%, var(--surface)); }
.cl-kind.k-note { color: #a7792c; background: color-mix(in oklab, #a7792c 10%, var(--surface)); }
.cl-move { display: flex; }
.cl-move .icon-btn { width: 30px; }
.cl-items .icon-btn .bk-upic { transform: rotate(180deg); }
.cl-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.cl-add .input { background: var(--surface); }
.cl-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-seg label { position: relative; }
.cl-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cl-seg span { display: inline-flex; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font: 650 .84rem var(--f-body); cursor: pointer; color: var(--ink-2); }
.cl-seg input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.cl-seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.cl-panel[hidden] { display: none; }
.cl-panel { display: flex; flex-direction: column; gap: 10px; }
.cl-days { display: flex; gap: 6px; }
.cl-days label { position: relative; flex: 1; }
.cl-days input { position: absolute; opacity: 0; pointer-events: none; }
.cl-days span { display: grid; place-items: center; height: 40px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); font: 750 .9rem var(--f-body); cursor: pointer; color: var(--ink-2); }
.cl-days input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.cl-days input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.cl-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-inline label { margin: 0; }
.cl-inline .input { width: auto; min-width: 120px; background: var(--surface); }
.cl-row3 { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; }
.cl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cl-fs .input { background: var(--surface); }
.cl-fs [data-wp][hidden], .cl-fs [data-tp][hidden], .cl-fs [data-cl-espace][hidden] { display: none; }
.cl-on { border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
.cl-on small { display: block; color: var(--muted); font-size: .8rem; }
@media (max-width: 600px) { .cl-row3, .cl-row2 { grid-template-columns: 1fr; } .cl-items li { grid-template-columns: 38px minmax(0, 1fr) 28px 30px; gap: 4px; } .cl-n { display: none; } .cl-move { flex-direction: column; } .cl-move .icon-btn { width: 28px; height: 19px; min-height: 0; padding: 0; } .cl-move .icon-btn .icon { width: 14px; height: 14px; } .cl-items li .icon-btn[data-cl-rm] { width: 30px; } }
.fy-card.cl-todo { min-width: 0; max-width: 100%; }
.fy-card.cl-todo strong { overflow-wrap: anywhere; }

/* start and record */
.cl-start { display: flex; flex-direction: column; gap: 10px; }
.cl-start-opt { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.cl-start-opt:hover { border-color: var(--brand); }
.cl-start-opt > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cl-start-opt small { color: var(--muted); font-size: .82rem; }
.cl-start-opt > .icon { width: 16px; height: 16px; color: var(--muted); }
.cl-hist-list { overflow: hidden; }
.cl-hist-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.cl-hist-row + .cl-hist-row { border-top: 1px solid var(--line); }
.cl-hist-row:hover { background: var(--surface-2); }
.cl-hist-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: .9rem; }
.cl-hist-main small { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cl-hist-main small .icon { width: 12px; height: 12px; }
.cl-hist-row > .icon { width: 15px; height: 15px; color: var(--muted); }
.cl-hist-row .cl-st { min-width: 92px; justify-content: center; }

/* running a checklist */
.cl-run { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.cl-run-head { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: var(--r-xl); color: #fff; background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--brand) 92%, #fff), var(--brand-deep)); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.cl-run-head::after { content: ""; position: absolute; right: -50px; bottom: -70px; width: 200px; height: 200px; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); box-shadow: 0 0 0 34px rgba(255,255,255,.04); pointer-events: none; }
.cl-run-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: relative; z-index: 1; }
.cl-run-titles .eyebrow { color: rgba(255,255,255,.8); display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cl-run-titles .eyebrow .icon { width: 14px; height: 14px; }
.cl-run-head h1 { color: #fff; margin: 0; font-size: clamp(1.45rem, 5vw, 1.9rem); line-height: 1.15; }
.cl-run-sub { margin: 0 0 6px; color: rgba(255,255,255,.86); font-size: .9rem; }
.cl-run-head .cl-st { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.cl-ring { --p: 0; flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative; z-index: 1; background: conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(255,255,255,.18) 0); }
.cl-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: color-mix(in oklab, var(--brand-deep) 70%, var(--brand)); }
.cl-ring strong, .cl-ring small { position: relative; color: #fff; line-height: 1; }
.cl-ring strong { font: 800 1.7rem var(--f-display); }
.cl-ring small { font-size: .74rem; opacity: .8; margin-top: 3px; }
.cl-claim { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: color-mix(in oklab, var(--accent) 16%, var(--surface)); border: 1px solid color-mix(in oklab, var(--accent) 50%, var(--line)); }
.cl-claim > span { flex: 1; display: flex; gap: 10px; align-items: flex-start; }
.cl-claim > span > span, .cl-claim.taken > span { display: flex; flex-direction: column; }
.cl-claim small { color: var(--ink-2); font-size: .82rem; }
.cl-claim .icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.cl-claim.taken { background: var(--brand-soft); border-color: color-mix(in oklab, var(--brand) 30%, var(--line)); color: var(--ink); }
.cl-claim.taken > .icon { color: var(--court); }
.cl-claim .btn { flex: none; }
@media (max-width: 600px) { .cl-claim { flex-direction: column; align-items: stretch; } .cl-claim .btn { justify-content: center; min-height: 46px; } .cl-run-head { padding: 18px; gap: 12px; } .cl-ring { width: 76px; height: 76px; } .cl-ring strong { font-size: 1.4rem; } }
.cl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cl-item { border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .2s, background .2s; }
.cl-tap { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cl-tap:disabled { cursor: default; }
.cl-tap:active:not(:disabled) .cl-box { transform: scale(.9); }
.cl-box { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; background: var(--surface); transition: background .2s var(--ease), border-color .2s, transform .12s, color .2s; }
.cl-box .icon { width: 19px; height: 19px; stroke-width: 3; }
.cl-tap:hover:not(:disabled) .cl-box { border-color: var(--court); }
.cl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.cl-t { font: 650 1.02rem/1.35 var(--f-body); }
.cl-need, .cl-by { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--muted); }
.cl-need .icon, .cl-by .icon { width: 13px; height: 13px; }
.k-photo .cl-need { color: #2f6f80; } .k-note .cl-need { color: color-mix(in oklab, #a7792c 85%, var(--ink)); }
.cl-note { font-size: .88rem; color: var(--ink-2); padding: 6px 10px; border-radius: 10px; background: var(--surface-2); margin-top: 4px; }
.cl-item .photos { margin: 0 16px 14px 64px; max-width: 240px; }
.cl-item.done { background: color-mix(in oklab, var(--court) 6%, var(--surface)); border-color: color-mix(in oklab, var(--court) 26%, var(--line)); }
.cl-item.done .cl-box { background: var(--court); border-color: var(--court); color: #fff; animation: cl-pop .3s var(--ease); }
.cl-item.done .cl-t { color: var(--ink-2); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--court) 55%, transparent); text-decoration-thickness: 2px; }
.cl-item.done .cl-by .icon { color: var(--court); }
.cl-item.pending .cl-box { background: var(--warn); border-color: var(--warn); }
.cl-tap.busy .cl-box { border-color: var(--court); border-top-color: transparent; animation: spin .8s linear infinite; }
@keyframes cl-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.cl-alldone { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-md); background: color-mix(in oklab, var(--court) 12%, var(--surface)); border: 1px solid color-mix(in oklab, var(--court) 32%, var(--line)); }
.cl-alldone > div { display: flex; flex-direction: column; }
.cl-alldone strong { font-size: 1.05rem; }
.cl-alldone small { color: var(--ink-2); }
.cl-big-tick { width: 46px; height: 46px; border-radius: 50%; background: var(--court); color: #fff; display: grid; place-items: center; flex: none; animation: cl-pop .4s var(--ease); }
.cl-big-tick .icon { width: 24px; height: 24px; stroke-width: 3; }
.cl-foot { display: flex; align-items: center; gap: 6px; font-size: .8rem; margin: 2px 0 0; }
.cl-foot .icon { width: 14px; height: 14px; flex: none; }
.cl-foot a { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .cl-item.done .cl-box, .cl-big-tick { animation: none; } }

.cl-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px 6px 8px; margin-bottom: -4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font: 650 .86rem var(--f-body); text-decoration: none; box-shadow: var(--shadow-sm); }
.cl-back:hover { border-color: var(--line-strong); color: var(--ink); }
.cl-back .icon { width: 16px; height: 16px; }
.cl-all { align-self: center; margin: 4px 0 12px; }
@media (max-width: 600px) { .cl-run { padding-bottom: 90px; } .cl-all { align-self: stretch; justify-content: center; } }
.cl-run-titles .eyebrow .icon { color: var(--accent); }
/* builder: section headings inside their box, space pills, tidier rows on phones */
.cl-fs-h { margin: 0 0 2px; font: 750 .78rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cl-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-pills label { position: relative; }
.cl-pills input { position: absolute; opacity: 0; pointer-events: none; }
.cl-pills span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font: 650 .86rem var(--f-body); color: var(--ink-2); cursor: pointer; }
.cl-pills span .icon { width: 14px; height: 14px; stroke-width: 3; }
.cl-pills input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.cl-pills input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 600px) {
  .cl-seg { display: grid; grid-template-columns: 1fr 1fr; }
  .cl-seg span { display: flex; justify-content: center; }
  .cl-row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .cl-row3 > :last-child { grid-column: 1 / -1; }
}
/* ---------- Menu bubble in the middle of the phone bar (Olly, 11 Nov) ----------
   A raised club colour orb that sits half out of the dock, with a glass ring so it reads as one piece. */
.tabbar { overflow: visible; }
.tabbar > .tab-menu { color: var(--ink-2); }
.tabbar > .tab-menu.active { color: var(--brand-text) !important; }
.tab-orb {
  position: relative; display: grid; place-items: center; width: 42px; height: 42px; margin: -24px auto 4px; border-radius: 50%;
  color: #fff;
  background: radial-gradient(120% 90% at 30% 15%, color-mix(in oklab, var(--brand) 70%, #fff) 0%, var(--brand) 52%, color-mix(in oklab, var(--brand) 72%, #000) 100%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--surface) 92%, transparent), 0 0 0 3.5px rgba(10,30,20,.07), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.18), 0 8px 16px -6px color-mix(in oklab, var(--brand) 80%, transparent);
  transition: transform .25s var(--ease), box-shadow .3s var(--ease);
}
.tabbar > .tab-menu .tab-orb .icon { width: 19px; height: 19px; color: #fff !important; stroke-width: 2; transition: transform .35s var(--ease); }
.tabbar > .tab-menu:active { transform: none; }
.tabbar > .tab-menu:active .tab-orb { transform: scale(.92); }
.tabbar > .tab-menu.active .tab-orb { box-shadow: 0 0 0 3px color-mix(in oklab, var(--surface) 92%, transparent), 0 0 0 5px color-mix(in oklab, var(--brand) 45%, #fff), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.18), 0 8px 16px -6px color-mix(in oklab, var(--brand) 80%, transparent); }
html.sheet-open .tab-menu .tab-orb .icon { transform: rotate(45deg); }
.tabbar > .tab-menu .tab-dot { top: 0; right: 0; width: 10px; height: 10px; box-shadow: 0 0 0 2.5px var(--brand); }
:root[data-theme="dark"] .tab-orb { box-shadow: 0 0 0 3px var(--surface), 0 0 0 3.5px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 4px rgba(0,0,0,.3), 0 12px 26px -8px rgba(0,0,0,.8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tab-orb { box-shadow: 0 0 0 3px var(--surface), 0 0 0 3.5px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 4px rgba(0,0,0,.3), 0 12px 26px -8px rgba(0,0,0,.8); } }
@media (prefers-reduced-motion: reduce) { .tab-orb, .tab-orb .icon { transition: none; } }

/* Balance (Olly, 11 Nov): the Menu bubble is the only solid shape in the bar; the current tab is a soft tint with a club colour icon. */
.tabbar > .active { color: var(--brand-text) !important; }
.tabbar > .active .icon { color: var(--brand-text) !important; }
.tab-ind { background: color-mix(in oklab, var(--brand) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 10%, transparent); }
.tabbar > .active .tab-dot { box-shadow: 0 0 0 2px var(--surface); }
.tabbar > a, .tabbar > button:not(.tab-menu) { color: color-mix(in oklab, var(--muted) 85%, var(--ink)); }
:root[data-theme="dark"] .tab-ind { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tab-ind { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } }
.tabbar { background: color-mix(in oklab, var(--surface) 93%, transparent); }
:root[data-theme="dark"] .tabbar { background: color-mix(in oklab, var(--surface) 92%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabbar { background: color-mix(in oklab, var(--surface) 92%, transparent); } }
/* checklists round two: personal lists, not needed today, problems, the event card */
.cl-card.mine .cl-ico { background: color-mix(in oklab, var(--accent) 22%, var(--surface)); color: #8a6400; }
.cl-q.mine .cl-q-ico { background: var(--accent); color: var(--accent-ink); }
.cl-q.mine.blank .cl-q-ico { background: var(--surface-2); color: var(--ink-2); }
.cl-q-ico.warn { background: color-mix(in oklab, var(--danger) 14%, var(--surface)); color: var(--danger); }
.cl-item { position: relative; }
.cl-item:has(.cl-more) .cl-tap { padding-right: 56px; }
.cl-more { position: absolute; top: 12px; right: 10px; width: 40px; height: 40px; border-radius: 12px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.cl-more:hover { background: var(--surface-2); color: var(--ink); }
.cl-more .icon { width: 20px; height: 20px; }
.cl-item.skipped { background: var(--surface-2); border-color: var(--line); }
.cl-item.skipped .cl-box { background: var(--muted); border-color: var(--muted); }
.cl-item.skipped .cl-t { text-decoration-color: var(--muted); }
.cl-prob { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin: 0 14px 14px; padding: 10px 12px; border-radius: 12px; background: color-mix(in oklab, var(--danger) 8%, var(--surface)); border: 1px solid color-mix(in oklab, var(--danger) 26%, var(--line)); font-size: .88rem; }
.cl-prob > .icon { width: 16px; height: 16px; color: var(--danger); margin-top: 2px; flex: none; }
.cl-prob > span { flex: 1; min-width: 180px; }
.cl-prob small { display: block; color: var(--muted); }
.cl-prob .photos { margin: 0; max-width: 200px; flex-basis: 100%; }
.cl-prob.sorted { background: var(--surface-2); border-color: var(--line); }
.cl-prob.sorted > .icon { color: var(--court); }
.cl-probs .cl-prob { margin: 0 0 8px; }
.cl-wrong { align-self: center; color: var(--danger); }
.cl-wrong .icon { color: var(--danger); }
.cl-dl { margin-top: 12px; width: 100%; justify-content: center; }
.cl-prob-photo { display: flex; align-items: center; gap: 10px; }
.cl-row2.one { grid-template-columns: 1fr; }
.cl-heads { margin-top: 2px; }
[data-cl-eoff][hidden], [data-cl-evetime][hidden], .cl-heads[hidden], .cl-fs[hidden] { display: none; }
.ev-cl { display: flex; flex-direction: column; gap: 8px; }
.ev-cl-list { display: flex; flex-direction: column; gap: 8px; }
.ev-cl-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
a.ev-cl-row:hover { border-color: var(--line-strong); }
.ev-cl-row > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; font-size: .9rem; }
.ev-cl-row small { color: var(--muted); font-size: .8rem; }
.ev-cl-row > .icon { width: 15px; height: 15px; color: var(--muted); }
.ev-cl-row.soon { border-style: dashed; background: none; }
.cl-row3:has([data-cl-eoff][hidden]) select[name="ewhen"] { grid-column: 1 / -1; }
@media (min-width: 601px) { .cl-row3:has([data-cl-eoff][hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cl-form .cl-inline { flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; }
.cl-form .cl-inline label { flex: none; min-width: 72px; }
.cl-form .cl-inline .input { flex: 1; max-width: 240px; }

/* Home weather card on phones: keep the corner inside the hero (it grew to its content and ran off the right edge). */
@media (max-width: 899px) {
  .hero-corner { min-width: 0; max-width: 100%; }
  .hero-corner .hero-now { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .hero-now .hn-facts-line, .hero-now .hn-out { min-width: 0; white-space: normal; }
}
.cl-st.muted { background: var(--surface-2); color: var(--muted); }
.cl-skipped { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-strong); }
.cl-skipped > div { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.cl-skipped .cl-big-tick { background: var(--muted); }
.cl-skipped small { color: var(--ink-2); }
.cl-list.off { opacity: .55; }
.cl-run-acts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .cl-run-acts { display: grid; grid-template-columns: 1fr 1fr; } .cl-run-acts .btn { justify-content: center; } }
.inbox-cl { margin-bottom: 18px; }
.inbox-cl .inbox-head a { font-size: .85rem; font-weight: 650; }

/* Sharing a court update: a branded picture plus a live link for the other team (PR for 11 Nov) */
.wxc-share { margin-top: 12px; }
.cs-open { align-self: flex-start; margin: 2px 0 4px 34px; }
.cs-body { display: flex; flex-direction: column; gap: 14px; }
.cs-wait { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 18px 0; }
.cs-img { display: block; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 4 / 5; border-radius: var(--r-md); box-shadow: var(--shadow); background: var(--brand); }
.cs-nudge { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: color-mix(in oklab, var(--accent) 18%, var(--surface)); border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line)); }
.cs-nudge > .icon { flex: 0 0 auto; color: var(--warn); }
.cs-nudge span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cs-nudge small { color: var(--ink-2); font-size: .82rem; line-height: 1.4; }
.cs-nudge .btn { flex: 0 0 auto; }
.cs-live { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
.cs-live .icon { flex: 0 0 auto; margin-top: 2px; color: var(--brand-text); }
.cs-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
/* Keep Share in view on phones, where the picture fills the screen, with a soft fade above it so it is
   clear there is more below. */
.cs-acts { position: sticky; bottom: 0; z-index: 2; background: var(--surface); padding: 10px 0 max(10px, var(--sab, 0px)); }
.cs-acts::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
.cs-acts .btn { justify-content: center; }
.cs-stop { align-self: center; font-size: .86rem; color: var(--muted); }
.cs-stop.sure { color: var(--danger); }
.cs-save-note { margin: -4px 0 0; font-size: .84rem; text-align: center; }
@media (max-width: 600px) { .cs-acts { grid-template-columns: 1fr 1fr; } .cs-acts [data-cs-share] { grid-column: 1 / -1; } .cs-open { margin-left: 0; } }

/* ---------- phone top bar, refined (12 Nov) ----------
   The search, create, inbox and bell buttons sit together in one glass toolbar
   instead of four separate tiles; Book is a slimmer pill with a tighter glow
   (it used to bleed onto the bar), and the account picture gets a clean ring.
   Buttons are 38px, so tap targets stay generous on every phone. */
.topbar { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.topbar .tb-tools {
  display: flex; align-items: center; flex: 0 0 auto; padding: 2px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.08);
}
.topbar .tb-tools .top-search {
  width: 38px; height: 38px; border: 0; border-radius: 999px; padding: 0; margin: 0; background: transparent;
  color: inherit; font: inherit; cursor: pointer; opacity: .92; -webkit-appearance: none; appearance: none;
  transition: background .18s var(--ease), transform .18s var(--ease), opacity .18s;
}
.topbar .tb-tools .top-search .icon { width: 20px; height: 20px; }
.topbar .tb-tools .top-search:hover { background: rgba(255,255,255,.1); opacity: 1; }
.topbar .tb-tools .top-search:active { background: rgba(255,255,255,.16); transform: scale(.92); }
.topbar .tb-tools .top-search:focus { outline: none; }
.topbar .tb-tools .top-search:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.topbar .tb-tools .bell-badge { top: 3px; left: 21px; right: auto; min-width: 16px; height: 16px; padding: 0 4px; font-size: .58rem; box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-deep) 86%, #fff); }
.topbar .book-btn {
  height: 36px; padding: 0 15px; border-radius: 999px; font-size: .84rem; letter-spacing: -.005em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.08), 0 2px 6px -2px rgba(0,0,0,.35);
}
.topbar .book-btn:hover { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.08), 0 3px 8px -2px rgba(0,0,0,.4); }
.topbar .book-btn:active { transform: scale(.95); }
.topbar .tb-me { display: flex; flex: 0 0 auto; border-radius: 50%; transition: transform .18s var(--ease); }
.topbar .tb-me:active { transform: scale(.92); }
.topbar .tb-me .avatar { width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--brand-deep), 0 0 0 3.5px rgba(255,255,255,.32); }
@media (max-width: 520px) {
  .topbar { gap: 8px; }
  .topbar .tb-tools .top-search { width: 36px; height: 36px; }
  .topbar .book-btn { padding: 0 13px; }
}
@media (max-width: 370px) {
  .topbar .tb-tools .top-search { width: 34px; height: 34px; }
  .topbar .tb-tools .top-search .icon { width: 19px; height: 19px; }
  .topbar .book-btn { padding: 0 11px; height: 34px; }
  .topbar .tb-me .avatar { width: 32px; height: 32px; }
}
/* a narrow phone shrinks the logo whole rather than cropping it */
.topbar .club-mark { min-width: 0; flex: 0 1 auto; overflow: visible; }
.topbar .topbar-logo { max-width: min(108px, 100%); height: auto; max-height: 34px; object-fit: contain; object-position: left center; }
@media (prefers-reduced-motion: reduce) { .topbar .tb-tools .top-search, .topbar .tb-me, .topbar .book-btn { transition: none; transform: none !important; } }
/* Menu: what is waiting for you, a number on the bubble and a More below hint (12 Nov) */
.tabbar > .tab-menu .tab-dot.tab-num { width: auto; height: 18px; min-width: 18px; padding: 0 5px; top: -4px; right: -6px; border-radius: 9px; display: grid; place-items: center; font: 800 .66rem/1 var(--f-display); color: #1c1c1c; background: var(--accent); }
.pm-wait { display: flex; flex-direction: column; gap: 6px; }
.pm-w { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 22%, transparent); color: var(--ink); text-decoration: none; }
.pm-w:active { transform: scale(.985); }
.pm-w-ico { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); }
.pm-w-ico .icon { width: 18px; height: 18px; color: #fff; }
.pm-w-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pm-w-txt strong { font-size: .93rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-w-txt small { font-size: .78rem; color: var(--ink-3, var(--muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-w .pm-w-go { width: 16px; height: 16px; flex: none; color: var(--brand); }
.pm-link { position: relative; }
.pm-link .unread { margin-left: auto; }
.pm-more { position: sticky; bottom: -14px; align-self: center; margin: -52px 0 -8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px 9px 12px; border: 0; border-radius: 999px; background: color-mix(in oklab, var(--ink) 88%, transparent); color: var(--surface); font: 600 .82rem/1 inherit; box-shadow: 0 10px 24px -10px rgba(0,0,0,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.pm-more .icon { width: 16px; height: 16px; animation: pm-nudge 1.6s var(--ease) infinite; }
.pm-more.gone { opacity: 0; transform: translateY(12px); pointer-events: none; }
@keyframes pm-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .pm-more .icon { animation: none; } }
.phone-menu .unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--accent); color: #1a1a1a; font: 800 .7rem var(--f-display); flex: none; }
.pm-space .unread { margin-left: auto; }

/* Team header on phones (Olly, 12 Nov: too cluttered, the header filled the whole first screen).
   Phones: no description on team spaces, a short training chip, the season numbers on one
   tappable line instead of eight tiles, and the captain's buttons in one Manage sheet.
   Computers are unchanged. */
.ph-short, .ss-line, .sh-manage { display: none; }
@media (max-width: 600px) {
  .space-hero.team-hero .titles > p { display: none; }
  .space-hero .chip .ph-full { display: none; }
  .space-hero .chip .ph-short { display: inline; }
  .space-hero .chip-wrap { white-space: nowrap; }
  .space-hero .season-strip { gap: 8px; }
  .space-hero .season-strip[data-season] .ss-stats, .space-hero .season-strip:not(.between) .ss-stats { display: none; }
  .space-hero .ss-manage { display: none; }
  .space-hero .space-head-actions [data-tab="people"], .space-hero .space-head-actions [data-edit-space] { display: none; }
  .space-hero .space-head-actions .sh-manage { display: inline-flex; }
  .ss-line { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 14px; border: 0; border-radius: 14px; cursor: pointer; color: #fff; text-align: left;
    background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); font: inherit; }
  .ss-line:active { background: rgba(255,255,255,.18); }
  .ss-line .sl-n { display: inline-flex; align-items: baseline; gap: 3px; }
  .ss-line .sl-n b { font: 800 1.2rem/1 var(--f-display); color: #fff; }
  .ss-line .sl-n small { font: 700 .66rem var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
  .ss-line .sl-pos b { font-size: 1.3rem; }
  .ss-line .sl-sep { width: 1px; height: 18px; background: rgba(255,255,255,.22); }
  .ss-line > .icon { margin-left: auto; width: 16px; height: 16px; color: rgba(255,255,255,.7); flex: none; }
}
@media (max-width: 360px) { .ss-line { gap: 9px; } .ss-line .sl-n b { font-size: 1.05rem; } }
.sm-list { display: flex; flex-direction: column; gap: 8px; }
.sm-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.sm-row:active { background: var(--line); }
.sm-row .sm-ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.sm-row .sm-ico .icon { width: 19px; height: 19px; }
.sm-row .sm-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sm-row .sm-t small { color: var(--muted); font-size: .84rem; line-height: 1.35; }
.sm-row > .icon { flex: none; width: 16px; height: 16px; color: var(--muted); }

/* courts strip: make the Now hour stand out (Olly, 12 Nov) */
.wxc-strip { height: auto; grid-auto-rows: 12px; padding: 4px 0 3px; }
.wxc-strip span.now { margin: -4px 0 -1px; border-radius: 4px; outline: 2px solid var(--ink); outline-offset: 0; box-shadow: inset 0 0 0 2px var(--surface); }
.wxc-strip-key span.now { font-weight: 800; color: var(--ink); }
/* Space tabs (Olly, 12 Nov): counts are small badges (none for 0), the current tab is tinted in the
   club colour with an underline, and on phones a slim bar slides in under the top bar once the tabs
   scroll away, showing the space and tab; tapping it opens every tab in a sheet. */
.tabs .tb-n { display: inline-grid; place-items: center; min-width: 20px; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1; background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); vertical-align: 1px; }
.space-tabs button.active { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand), 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); }
.space-tabs button.active .tb-n { background: var(--brand); color: var(--brand-ink, #fff); }
.tab-stick { display: none; }
@media (max-width: 600px) {
  .space-tabs { gap: 2px; padding: 3px; }
  .space-tabs button { padding: 7px 6px; font-size: .86rem; }
  .tab-stick { display: flex; position: fixed; left: 50%; z-index: 40; align-items: center; gap: 6px; max-width: calc(100% - 32px); margin-top: 8px; padding: 9px 12px 9px 16px; border: 0; border-radius: 999px; cursor: pointer;
    font: 700 .9rem var(--f-display); color: var(--ink); text-align: left;
    background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 0 0 1px var(--line);
    transform: translate(-50%, -12px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
  .tab-stick.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  .tab-stick .ts-space { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-weight: 600; }
  .tab-stick .tsk-sep { color: var(--muted); }
  .tab-stick .ts-tab { flex: none; color: var(--brand); }
  .tab-stick > .icon { flex: none; width: 15px; height: 15px; color: var(--brand); }
  body.chat-mode .tab-stick { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tab-stick { transition: none; } }
.ts-list .sm-row { padding: 14px 16px; }
.ts-list .sm-row .tb-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.ts-list .sm-row.on { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
.ts-list .sm-row.on strong { color: var(--brand); }
.ts-list .sm-row > .icon { width: 18px; height: 18px; color: var(--brand); }
/* Results tab: the division table sits in the season card, above the MyDivision link (Olly, 12 Nov). */
.rs-table { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Next 7 days on phones: short day names so the tennis ball never runs into the icon, and room for two digit highs (Olly, 12 Nov) */
.wxd-n .dn-short { display: none; }
@media (max-width: 520px) {
  .wxd-n .dn-full { display: none; }
  .wxd-n .dn-short { display: inline; }
  .wx-days .wxd { grid-template-columns: 4.6rem 22px 2.4rem 1.9rem minmax(0, 1fr) 2.2rem; gap: 7px; }
  .wxd-n { min-width: 0; white-space: nowrap; }
}

/* ---------- Blocking ---------- */
.block-row { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.att .att-block { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--muted); }
.att .att-block:hover { color: var(--danger); }
.block-list { display: flex; flex-direction: column; margin-top: 8px; }
.block-person { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 600; }
.block-person + .block-person { border-top: 1px solid var(--line); }
.block-person .bp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.digest-row { padding: 0; }

/* ---------- Engagement ---------- */
.eng-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.eng-tile { --tone: var(--brand); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); min-width: 0; }
.eng-tile.good { --tone: var(--court); } .eng-tile.warn { --tone: var(--warn); }
.eng-ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--tone); background: color-mix(in oklab, var(--tone) 12%, var(--surface)); }
.eng-ic svg { width: 18px; height: 18px; }
.eng-tile strong { display: block; font: 700 1.6rem/1.1 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.eng-tile strong em { font-style: normal; font-size: 1rem; color: var(--muted); font-weight: 600; }
.eng-tile > div > span { display: block; font-weight: 600; font-size: .86rem; color: var(--ink-2); line-height: 1.25; }
.eng-tile small { display: block; font-size: .78rem; color: var(--muted); margin-top: 1px; }
.eng-card { padding: 16px 18px; margin-bottom: 14px; }
.eng-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.eng-card-head h3 { margin: 0; }
.eng-chart { display: block; width: 100%; height: 150px; overflow: visible; }
.eng-chart path { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.eng-chart .eng-area { fill: url(#engFill); stroke: none; }
.eng-fill-top { stop-color: var(--court); stop-opacity: .18; } .eng-fill-bottom { stop-color: var(--court); stop-opacity: .02; }
.eng-chart .eng-base { stroke: var(--line); stroke-width: 1; }
.eng-chart .eng-dot { stroke-width: 7; } .eng-chart .eng-dot.week { stroke: var(--court); } .eng-chart .eng-dot.day { stroke: color-mix(in oklab, var(--brand) 70%, var(--accent)); stroke-width: 6; }
.eng-chart .eng-week { stroke: var(--court); }
.eng-chart .eng-day { stroke: color-mix(in oklab, var(--brand) 70%, var(--accent)); stroke-width: 1.6; stroke-dasharray: 1 5; }
.eng-chart .eng-members { stroke: var(--line-strong); stroke-dasharray: 4 4; stroke-width: 1.4; }
.eng-axis { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); margin-top: 4px; }
.eng-key { display: flex; gap: 16px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: 8px; }
.eng-key i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.eng-key .k-week { background: var(--court); } .eng-key .k-day { background: color-mix(in oklab, var(--brand) 70%, var(--accent)); } .eng-key .k-members { background: var(--line-strong); }
.eng-empty { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: .88rem; }
.eng-empty svg { width: 18px; height: 18px; }
.eng-welcome { display: flex; align-items: center; gap: 18px; background: color-mix(in oklab, var(--warn) 7%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 28%, var(--line)), var(--shadow-sm); }
.eng-welcome-text { flex: 1; min-width: 0; }
.eng-welcome h3 { margin: 0 0 4px; }
.eng-welcome p { margin: 0; font-size: .88rem; }
.eng-welcome .btn { flex: 0 0 auto; }
.eng-tools { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
.eng-tools .input { max-width: 240px; }
.eng-bulk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; margin-bottom: 6px; border-radius: var(--r-md); background: var(--brand-soft); font-weight: 600; font-size: .88rem; position: sticky; top: 64px; z-index: 2; }
.eng-list { display: flex; flex-direction: column; }
.eng-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); cursor: default; }
.eng-row:first-child { border-top: 0; }
.eng-row[hidden] { display: none; }
.eng-pick { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); flex: 0 0 auto; cursor: pointer; }
.eng-pick-gap { width: 18px; flex: 0 0 auto; }
.eng-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.eng-who strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eng-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.eng-status small { font-size: .8rem; }
.eng-pill { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.eng-pill.never { color: color-mix(in oklab, var(--warn) 70%, var(--ink)); background: color-mix(in oklab, var(--warn) 16%, var(--surface)); }
.eng-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 600; color: var(--ink-2); }
.eng-tag svg { width: 13px; height: 13px; }
.eng-none { padding: 14px 2px; }
@media (max-width: 900px) { .eng-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .eng-tile { padding: 12px; gap: 8px; } .eng-tile strong { font-size: 1.3rem; }
  .eng-welcome { flex-direction: column; align-items: stretch; }
  .eng-tools .input { max-width: none; flex: 1 1 100%; }
}

/* Inbox at a glance (13 Nov): what is waiting, each a jump to its section, so a long chat list never hides tasks. */
.inbox-glance { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 20px; }
.glance-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: 650 .86rem var(--f-display); text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.glance-chip .icon { width: 16px; height: 16px; color: var(--brand-text); }
.glance-chip .at { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--brand); color: #fff; font: 800 .74rem var(--f-display); }
.glance-chip.late { border-color: color-mix(in oklab, var(--danger, #c0392b) 45%, var(--line)); color: var(--danger, #c0392b); }
.glance-chip.late .icon { color: inherit; }
.glance-chip:hover { border-color: var(--brand); }
.glance-chip.new { background: var(--brand-soft); border-color: color-mix(in oklab, var(--brand) 35%, var(--line)); }
/* On a computer the columns already sit side by side, so the jump line only shows when something is waiting. */
@media (min-width: 961px) { .inbox-glance:not(.busy) { display: none; } }
@media (max-width: 960px) { .inbox-glance { margin: -6px 0 14px; } }
#inbox-msgs, #inbox-tasks, #inbox-mentions { scroll-margin-top: 90px; }
/* Overdue tasks or courts to book come before messages on phones. */
@media (max-width: 960px) { .inbox-cols.tasks-first .inbox-tasks { order: -1; } }
.chat-more summary { cursor: pointer; list-style: none; padding: 12px 14px; font: 650 .86rem var(--f-display); color: var(--brand-text); border-top: 1px solid var(--line); }
.chat-more summary::-webkit-details-marker { display: none; }
.chat-more[open] summary { display: none; }
.chat-badges { display: inline-flex; gap: 4px; align-items: center; }
.chat-end .unread.at { background: var(--accent); color: #1a1a1a; }
.chat-list-foot .linkish { font-size: inherit; }

/* Someone's been in touch (13 Nov): a friendly card when you open the app with new messages waiting. */
.touch-card {
  position: fixed; z-index: 75; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(92px + var(--sab)); margin: 0 auto; max-width: 440px; padding: 16px; border-radius: 24px;
  display: grid; gap: 14px; overflow: hidden; background: var(--surface); color: var(--ink);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.5), 0 0 0 1px color-mix(in oklab, var(--line-strong) 70%, transparent);
  transform: translateY(24px) scale(.97); opacity: 0; transition: transform .38s var(--ease), opacity .25s;
}
.touch-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 24px 24px 0 0; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.touch-card.in { transform: none; opacity: 1; }
.touch-card.out { transform: translateY(18px) scale(.98); opacity: 0; }
@media (min-width: 900px) { .touch-card { left: auto; right: 28px; bottom: 28px; width: 400px; } }
@media (prefers-reduced-motion: reduce) { .touch-card { transition: opacity .2s; transform: none; } }
.tc-top { display: flex; align-items: center; gap: 14px; padding-right: 28px; }
.tc-faces { position: relative; display: flex; flex: none; padding-right: 6px; }
.tc-faces .avatar { width: 44px; height: 44px; font-size: .9rem; box-shadow: 0 0 0 3px var(--surface); }
.tc-faces .avatar + .avatar { margin-left: -12px; }
.tc-ball { position: absolute; right: -2px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--brand-deep, #123); box-shadow: 0 0 0 3px var(--surface); animation: tc-bounce 1.4s var(--ease) .4s 2; }
.tc-ball .icon { width: 13px; height: 13px; }
@keyframes tc-bounce { 0%, 100% { transform: none; } 30% { transform: translateY(-6px) rotate(-8deg); } 55% { transform: translateY(0) rotate(4deg); } }
.tc-txt { display: grid; gap: 2px; min-width: 0; }
.tc-txt small { font: 800 .66rem var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-text, var(--brand)); }
.tc-txt strong { font: 800 1.12rem/1.2 var(--f-display); letter-spacing: -.01em; }
.tc-txt span { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tc-acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.tc-acts .btn { justify-content: center; }
.tc-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 0; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.tc-x .icon { width: 15px; height: 15px; }

/* New message button that floats above the bottom bar on phones, like WhatsApp. */
.inbox-fab {
  position: fixed; z-index: 19; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(96px + var(--sab));
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 18px; border: 0; border-radius: 18px; cursor: pointer;
  font: 700 .92rem var(--f-body, inherit); color: #fff; background: linear-gradient(160deg, var(--brand), var(--brand-deep, var(--brand)));
  box-shadow: 0 14px 30px -10px color-mix(in oklab, var(--brand) 70%, #000), 0 0 0 1px rgba(255,255,255,.08) inset;
  animation: fab-in .4s var(--ease) both;
}
.inbox-fab .icon { width: 19px; height: 19px; }
@keyframes fab-in { from { transform: translateY(16px) scale(.9); opacity: 0; } }
@media (min-width: 900px) { .inbox-fab { display: none; } }
@media (max-width: 899px) { .inbox-acts .inbox-new { display: none; } }
@media (max-width: 899px) { .page:has(> .inbox-fab) { padding-bottom: 72px; } }

/* ---------- Tournaments and ladders (Nov 2026) ---------- */
.dbadge.t-tourn { --c1: #6b4fd8; --c2: #2d1b73; --hi: #ffd76a; }
.ev-hero.t-tourn { --h1: #6b4fd8; --h2: #2a1868; --hk: #ffd76a; }
.ev-hero.t-tourn .evh-chips { justify-content: flex-start; }
.tn-box { display: grid; gap: 10px; }
.tn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tn-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.tn-row > .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #6b4fd8; }
.tn-row span { display: grid; gap: 2px; min-width: 0; }
.tn-row small { font: 800 .64rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tn-row strong { font: 750 .98rem/1.3 var(--f-display); overflow-wrap: anywhere; }
.tn-row em { font-style: normal; font-weight: 500; font-size: .82rem; color: var(--muted); display: block; }
.tn-manage { display: flex; flex-wrap: wrap; gap: 8px; }
.tn-fields { display: grid; gap: 14px; padding: 14px; border-radius: 16px; background: color-mix(in oklab, #6b4fd8 6%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, #6b4fd8 22%, var(--line)); }
.tn-fields[hidden], .tn-fields [hidden] { display: none !important; }
.tn-fields .lbl, .tn-courts .lbl { font-size: .84rem; font-weight: 650; display: block; margin-bottom: 6px; }
.ld-join { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ld-join .hint { margin: 0; }
.ladder-box { display: grid; gap: 12px; }
.ld-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ld-head .eyebrow { margin: 0; }
.ld-you { font: 800 .78rem var(--f-display); padding: 5px 12px; border-radius: 999px; background: #ffd76a; color: #2a1868; }
.ld-note { display: flex; gap: 8px; align-items: center; font-size: .88rem; margin: 0; }
.ld-note .icon { width: 16px; height: 16px; }
.ld-tip { margin: 0; }
.ld-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ld-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; }
.ld-list li:nth-child(odd) { background: var(--surface-2); }
.ld-list li.me { background: color-mix(in oklab, #ffd76a 28%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, #d9a400 45%, transparent); }
.ld-rank { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font: 800 .9rem var(--f-display); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-variant-numeric: tabular-nums; }
.ld-list li.top .ld-rank { background: linear-gradient(160deg, #6b4fd8, #2d1b73); color: #ffd76a; box-shadow: none; }
.ld-name { flex: 1; min-width: 0; display: grid; font-weight: 650; }
.ld-name small { font-weight: 500; font-size: .78rem; color: var(--muted); }
.ld-empty { padding: 14px; }
.ld-mine, .ld-others, .ld-results { display: grid; gap: 8px; }
.ld-mine .eyebrow, .ld-others .eyebrow, .ld-results .eyebrow { margin: 0; }
.ld-ch { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ld-mine .ld-ch { box-shadow: inset 4px 0 0 #6b4fd8, inset 0 0 0 1px color-mix(in oklab, #6b4fd8 35%, var(--line)); }
.ld-ch-who { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ld-ch-who span { color: var(--muted); font-size: .86rem; }
.ld-ch > small { color: var(--muted); font-size: .8rem; }
.ld-ch-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ld-ch-acts:empty { display: none; }
.ld-results ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.ld-results li { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.ld-results li small { margin-left: auto; color: var(--muted); font-size: .76rem; }
.ld-up { display: inline-flex; align-items: center; gap: 2px; font-size: .74rem; font-weight: 700; color: var(--court, var(--brand)); }
.ld-up .icon { width: 12px; height: 12px; }
.ld-manage { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-top: 4px; border-top: 1px solid var(--line); }
.ld-manage .hint { margin: 0; }
.ld-arrange { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 50vh; overflow: auto; }
.ld-arrange li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: var(--surface-2); }
.tn-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 28px 26px; border-radius: var(--r-xl, 24px); color: #fff;
  background: radial-gradient(70% 120% at 92% -10%, color-mix(in oklab, #6b4fd8 80%, #fff 20%), transparent 62%), linear-gradient(135deg, #6b4fd8 0%, #2d1b73 60%, #1b0f47 100%); box-shadow: var(--shadow); margin-bottom: 8px; }
.tn-hero::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; z-index: -1; opacity: .12;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='M8.5 10 6 3h4l2 4 2-4h4l-2.5 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.tn-hero h1 { color: #fff; margin: 2px 0 6px; }
.tn-hero p { margin: 0; color: rgba(255,255,255,.85); max-width: 52ch; }
.tn-hero .eyebrow { color: #ffd76a; }
.tn-card { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; cursor: pointer; padding: 14px 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05)); }
.tn-card:hover { box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow); }
.tn-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tn-card.off { opacity: .6; }
.tn-card.past { opacity: .85; }
.tn-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tn-main small { font: 800 .66rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: #6b4fd8; }
.tn-main strong { font: 800 1.08rem/1.25 var(--f-display); }
.tn-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: .84rem; }
.tn-meta span { display: inline-flex; align-items: center; gap: 5px; }
.tn-meta .icon { width: 14px; height: 14px; }
.tn-meta .warn { color: var(--warn); font-weight: 700; }
.tn-side { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.tn-you { display: inline-flex; align-items: center; gap: 4px; font: 800 .74rem var(--f-display); padding: 5px 10px; border-radius: 999px; background: color-mix(in oklab, #ffd76a 45%, var(--surface)); color: #2a1868; }
.tn-you.maybe { background: var(--surface-2); color: var(--muted); }
.tn-you .icon { width: 13px; height: 13px; }
.match-pulse.tn-pulse::before { background: #6b4fd8; }
.match-pulse.tn-pulse .mp-date { background: linear-gradient(160deg, #6b4fd8, #2d1b73); box-shadow: 0 10px 22px -12px #2d1b73; }
.match-pulse.tn-pulse .mp-date span { color: #ffd76a; }
.match-pulse.tn-pulse .mp-live { color: #6b4fd8; }
.match-pulse.tn-pulse .mp-dot { background: #6b4fd8; }
.match-pulse.tn-pulse .mp-meta .icon { color: #6b4fd8; }
.match-pulse.tn-pulse .cd-u { background: #6b4fd8; box-shadow: 0 8px 18px -12px #6b4fd8; }
.match-pulse.tn-pulse .cd-u:last-child { background: #2d1b73; }
.fy-card.ladder .fy-ico { background: color-mix(in oklab, #6b4fd8 16%, var(--surface)); color: #6b4fd8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tn-main small, :root:not([data-theme="light"]) .tn-row > .icon, :root:not([data-theme="light"]) .match-pulse.tn-pulse .mp-live { color: #a993ff; } }
:root[data-theme="dark"] .tn-main small, :root[data-theme="dark"] .tn-row > .icon, :root[data-theme="dark"] .match-pulse.tn-pulse .mp-live { color: #a993ff; }
@media (max-width: 600px) { .tn-hero { padding: 22px 18px; } .tn-card { padding: 12px; gap: 10px; } }
/* A date picker with no date carries .empty; keep the page's empty state styles off it. */
.field.dp.empty { padding: 0; text-align: left; align-items: stretch; color: inherit; font-size: inherit; gap: 7px; }
/* ---------- Tabs, premium (Olly, 13 Nov) ----------
   One quiet track with a raised white thumb behind the current tab that glides to the next one
   (tabThumbs() in app.js), like an iPhone segmented control. No more green tint and underline.
   On phones the tabs flow on as few rows as they need and stretch to fill each row, so there is
   never a lonely tab with a gap beside it, and all of them still show. */
.tabs {
  position: relative; isolation: isolate; gap: 2px; padding: 4px; border-radius: 16px;
  background: color-mix(in oklab, var(--surface-2) 92%, var(--ink) 4%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--line) 80%, transparent), inset 0 1px 2px rgba(10,30,20,.05);
}
.tabs button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0;
  min-height: 38px; padding: 8px 16px; border-radius: 12px;
  font: 600 .9rem/1.2 var(--f-body, inherit); letter-spacing: -.005em; color: var(--muted);
  -webkit-tap-highlight-color: transparent; transition: color .3s var(--ease), transform .18s var(--ease);
}
.tabs button:hover { color: var(--ink); }
.tabs button:active { transform: scale(.97); }
.tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tabs button.active, .space-tabs button.active { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 .5px rgba(10,30,20,.1), 0 1px 2px rgba(10,30,20,.06), 0 6px 14px -6px rgba(10,30,20,.2); }
.tabs.has-thumb button.active { background: none; box-shadow: none; }
.tabs-thumb {
  position: absolute; z-index: 0; left: 0; top: 0; border-radius: 12px; pointer-events: none;
  background: var(--surface);
  box-shadow: 0 0 0 .5px rgba(10,30,20,.1), 0 1px 2px rgba(10,30,20,.06), 0 6px 14px -6px rgba(10,30,20,.2);
  transition: transform .42s var(--ease), width .42s var(--ease), height .42s var(--ease);
}
.tabs .tb-n { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); transition: background .3s, color .3s; }
.tabs button.active .tb-n, .space-tabs button.active .tb-n { background: var(--brand); color: var(--brand-ink, #fff); }
:root[data-theme="dark"] .tabs { background: color-mix(in oklab, var(--surface) 70%, #000); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .tabs-thumb, :root[data-theme="dark"] .tabs:not(.has-thumb) button.active { background: color-mix(in oklab, var(--surface-2) 80%, #fff 8%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.06), 0 6px 14px -6px rgba(0,0,0,.7); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tabs { background: color-mix(in oklab, var(--surface) 70%, #000); box-shadow: inset 0 0 0 1px var(--line); }
  :root:not([data-theme="light"]) .tabs-thumb, :root:not([data-theme="light"]) .tabs:not(.has-thumb) button.active { background: color-mix(in oklab, var(--surface-2) 80%, #fff 8%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.06), 0 6px 14px -6px rgba(0,0,0,.7); }
}
@media (prefers-reduced-motion: reduce) { .tabs-thumb { transition: none; } }
@media (max-width: 600px) {
  .tabs, .space-tabs { display: flex; flex-wrap: wrap; align-self: stretch; gap: 2px; padding: 4px; }
  .tabs button, .space-tabs button { flex: 1 0 auto; min-height: 40px; padding: 8px 12px; font-size: .88rem; white-space: nowrap; line-height: 1.2; }
  /* five or more tabs: even rows of three (six tabs = 3 + 3), seven or more: rows of four */
  .tabs:has(> button:nth-of-type(5)) button { flex: 1 0 calc(33.333% - 2px); white-space: normal; padding-inline: 8px; }
  .tabs:has(> button:nth-of-type(7)) button { flex-basis: calc(25% - 2px); padding-inline: 6px; font-size: .84rem; }
}

/* Tournaments keep their purple in a space's Next up card */
.next-card.tourn { background: radial-gradient(70% 120% at 100% 0%, color-mix(in oklab, #6b4fd8 80%, #fff 20%), transparent 60%), linear-gradient(135deg, #6b4fd8, #2a1868); color: #fff; }
.next-card.tourn .next-eyebrow { color: #ffd76a; opacity: 1; }
.next-card.tourn .date-tile .mon { color: #ffd76a; }
.next-card.tourn .next-rsvp.on:not([data-status]) { background: #ffd76a; color: #2a1868; border-color: #ffd76a; }
.next-card.tourn .next-q .icon, .next-card.tourn .next-link .icon, .next-card.tourn .next-loc .icon { color: #ffd76a; }

/* ---------- date and time picker, refreshed (Nov 2026) ---------- */
/* An open picker takes the full width of its row, so the calendar is never squeezed beside another field. */
.row > .dp.open { flex-basis: 100%; }
.dp-pop { padding: 16px; gap: 14px; border-radius: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 40px -18px rgba(18,26,22,.35); max-width: 420px; }
.dp-month { gap: 8px; }
.dp-month strong { flex: 1; text-align: center; white-space: nowrap; font: 750 1rem var(--f-display); letter-spacing: -.01em; }
.dp-nav { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.dp-grid { gap: 2px 0; }
.dp-grid .dow { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding-bottom: 6px; }
.dp-grid button { justify-self: center; width: 100%; max-width: 42px; min-height: 0; aspect-ratio: 1; padding: 0; border-radius: 50%; font-size: .9rem; position: relative; }
.dp-grid button.today { border-color: transparent; color: var(--brand-text, var(--brand)); font-weight: 800; }
.dp-grid button.today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.dp-grid button.sel { background: var(--brand); color: #fff; box-shadow: 0 6px 14px -8px var(--brand); }
.dp-grid button.sel::after { background: #fff; }
.dp-time { gap: 10px; padding-top: 14px; }
.dp-time-head { display: flex; align-items: baseline; justify-content: space-between; }
.dp-time-val { font: 800 1.5rem/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.dp-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.dp-hours button, .dp-mins button { min-height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: 700 .88rem var(--f-body); font-variant-numeric: tabular-nums; cursor: pointer; padding: 0; }
.dp-hours button:hover, .dp-mins button:hover { border-color: var(--line-strong); }
.dp-hours button.sel, .dp-mins button.sel { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 14px -8px var(--brand); }
.dp-mins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 3px; border-radius: 13px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.dp-mins button { border: 0; background: transparent; border-radius: 10px; }
.dp-mins button.sel { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 10px -6px rgba(0,0,0,.25); }
.dp-foot { padding-top: 2px; }
.dp-foot .btn { min-width: 84px; justify-content: center; }
/* Tournament on one day: date, then start and finish side by side */
.tn-when { display: grid; gap: 12px; }
.tn-oneday { display: grid; gap: 12px; }
.tn-oneday[hidden], .tn-when[hidden] { display: none; }
.tn-times > .dp { flex: 1 1 140px; }
.dp-tonly .dp-time { border-top: 0; padding-top: 0; }
.ld-dates[hidden] { display: none; }
.tn-entered { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: color-mix(in oklab, #ffd76a 26%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, #d9a400 40%, transparent); flex-wrap: wrap; }
.tn-entered > span:nth-child(2) { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.tn-entered small { color: var(--muted); font-size: .82rem; }
.tn-tick { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #6b4fd8; color: #fff; }
.tn-tick .icon { width: 18px; height: 18px; }
.tn-peek { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.tn-entered .linkish { font-size: .84rem; }
.tn-peek span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--surface-2); font-size: .8rem; font-weight: 650; }
.tn-peek span b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; background: linear-gradient(160deg, #6b4fd8, #2d1b73); color: #ffd76a; }
.tn-peek span.me { background: color-mix(in oklab, #ffd76a 40%, var(--surface)); }
.tn-peek em { font-style: normal; font-size: .8rem; font-weight: 700; color: #6b4fd8; margin-left: auto; }
.tn-mine { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; cursor: pointer; background: linear-gradient(120deg, color-mix(in oklab, #6b4fd8 10%, var(--surface)), var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, #6b4fd8 28%, var(--line)); }
.tn-mine > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tn-mine small { color: var(--muted); font-size: .82rem; }
.tn-mine-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: linear-gradient(160deg, #6b4fd8, #2d1b73); color: #ffd76a; }
.tn-mine-ico .icon { width: 19px; height: 19px; }
.tn-yours .hint { margin: 8px 2px 0; }
.tn-you-row { display: flex; margin: 2px 0; }
.tn-org { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.tn-org > .avatar, .tn-org > span:first-child { flex: none; }
.tn-org .tn-org-txt { flex: 1; min-width: 0; display: grid; }
.tn-org small { font: 800 .64rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* Your plans: a heading for each month */
.plans-month { margin: 14px 0 2px; }
.plans-month:first-child { margin-top: 0; }

/* ---------- Ladder scores (Olly, 13 Nov) ----------
   A finished match is a little scoreboard: a row per player, games per set, the winner in bold with a tick.
   Adding a score is a grid of drop downs, a row per player and a column per set. */
.sb { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.sb-row { display: flex; align-items: center; gap: 6px; min-height: 30px; color: var(--muted); }
.sb-row.won { color: var(--ink); font-weight: 700; }
.sb-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.sb-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tick { width: 16px; height: 16px; flex: none; color: var(--brand); }
.sb-g { width: 30px; text-align: center; font: 600 1rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.sb-g.win { color: var(--ink); font-weight: 800; }
.sb-g.tb { font-size: .86rem; }
.sb-note { margin: 4px 0 0 22px; font-size: .8rem; color: var(--muted); }
.sb.small { padding: 6px 10px; }
.sb.small .sb-row { min-height: 24px; font-size: .88rem; }
.sb.small .sb-g { width: 24px; font-size: .9rem; }
.ld-results li.ld-res { display: block; }
.ld-results li.ld-res small { margin: 0; }
/* Scoreboard with avatars (ladder results, Hit with me result): avatar, name, winner's tick, games */
.sb.av { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); padding: 10px 14px; gap: 4px; }
.sb.av .sb-row { min-height: 34px; }
.sb.av .sb-name { gap: 10px; }
.sb.av .sb-name > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sb.av .sb-row:not(.won) .avatar { opacity: .72; }
.sb.av .sb-tick { width: 15px; height: 15px; margin-left: -4px; }
.sb.av .sb-note { margin-left: 36px; }
.sb.small.av { padding: 9px 12px; }
.sb.small.av .sb-row { min-height: 32px; font-size: .92rem; }
.sb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 0; padding-top: 7px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.sb-foot small { font-size: .76rem; color: var(--muted); }

.sc-grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--sc-n, 1), 72px); gap: 8px; align-items: center; }
.sc-h { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: center; }
.sc-name { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-sel { padding: 10px 8px; text-align: center; text-align-last: center; font-weight: 700; font-size: 1.05rem; }
.sc-out { margin: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-size: .92rem; }
.sc-out.ok { background: var(--brand-soft); color: var(--ink); }
.sc-out.ok .icon { color: var(--brand); flex: none; }
.check-row { display: flex; gap: 8px; align-items: center; font-size: .88rem; cursor: pointer; }
@media (max-width: 520px) { .sc-grid { grid-template-columns: minmax(0, 1fr) repeat(var(--sc-n, 1), 58px); gap: 6px; } }

.hp-ladder { text-decoration: none; color: inherit; align-items: center; }
.hp-ladder > div { flex: 1; min-width: 0; }
.hp-ladder p { margin: 0; }
.hp-ladder .muted { font-size: .84rem; margin-top: 2px; }
.hp-kind .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* The club's own logo on the accept screen: the coloured version, or the light one in dark mode. */
.tg-brand { display: block; margin-bottom: 6px; }
.tg-brand img { display: block; height: 64px; width: auto; max-width: 100%; }
.tg-brand .tg-brand-night { display: none; }
:root[data-theme="dark"] .tg-brand .tg-brand-day { display: none; }
:root[data-theme="dark"] .tg-brand .tg-brand-night { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tg-brand .tg-brand-day { display: none; }
  :root:not([data-theme="light"]) .tg-brand .tg-brand-night { display: block; }
}

/* WhatsApp style placeholder for a message a moderator removed */
.removed-note { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--muted); font-size: .86rem; }
.removed-note .icon { width: 14px; height: 14px; flex: none; opacity: .8; }
.removed-note em { font-style: italic; }
.reply.is-removed .avatar { opacity: .55; }
.dm-removed { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; margin: 0; }
.dm-removed .removed-note { margin: 0; }
.dm.mine .dm-removed .removed-note { color: inherit; opacity: .8; }

/* Read receipts and typing in private chats */
.dm-tick { display: inline-flex; margin-left: 3px; vertical-align: -2px; opacity: .7; }
.dm-tick .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.dm-tick.read { color: var(--brand); opacity: 1; }
.dm.mine .dm-tick.read { color: #bdf0ff; }
.dm-meta:has(.dm-tick.read) { opacity: .95; }
.dm-seen { align-self: flex-end; display: flex; align-items: center; gap: 4px; margin: 2px 4px 4px; font-size: .72rem; color: var(--muted); }
.dm-seen .icon { width: 13px; height: 13px; color: var(--brand); }
.dm-typing .dm-bubble { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; }
.typing-dots { display: inline-flex; gap: 4px; align-items: center; height: 10px; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .4; animation: typing-dot 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-3px); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .typing-dots i { animation: none; opacity: .6; } }

/* Pause notifications (13 Nov 2026): the moon sits on your picture, and the sheet chooses how quiet. */
.topbar .tb-me, .desk-me { position: relative; }
.topbar .tb-me .dnd-moon { left: -3px; bottom: -3px; top: auto; }
.desk-me .dnd-moon { left: 30px; bottom: 6px; top: auto; box-shadow: 0 0 0 2px var(--surface); }
.me-pop-link.dnd-btn { width: 100%; justify-content: flex-start; }
.dnd-level { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .dnd-level { grid-template-columns: 1fr; } }
.dnd-level .dnd-lv { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.dnd-level .dnd-lv:has(input:checked) { box-shadow: inset 0 0 0 2px #3b3f8f; background: color-mix(in oklab, #3b3f8f 8%, var(--surface)); }
.dnd-level .dnd-lv input { margin-top: 3px; accent-color: #3b3f8f; flex: 0 0 auto; }
.dnd-level .dnd-lv span { display: flex; flex-direction: column; gap: 2px; }
.dnd-level .dnd-lv strong { font: 700 .9rem var(--f-display); }
.dnd-level .dnd-lv small { font-size: .78rem; color: var(--muted); }

/* Popups rise above the keyboard (13 Nov 2026). --kb is set while a keyboard is up (fitChat in app.js). */
.scrim { padding-bottom: var(--kb, 0px); transition: padding-bottom .2s var(--ease); }
.sheet { max-height: calc(92vh - var(--kb, 0px)); }
@media (min-width: 700px) { .scrim { padding-bottom: 24px; } .sheet { max-height: 92vh; } }
/* Pause notifications: two numbered steps so it is clear a time starts the pause. */
.dnd-step { display: flex; align-items: center; gap: 8px; margin: 0 0 -8px; font: 700 .82rem var(--f-display); color: var(--muted); letter-spacing: .01em; }
.dnd-step span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #3b3f8f; color: #fff; font-size: .72rem; }

/* Booking calendar: our own date picker under the date on /courts (replaces the browser's). */
.bk-datebtn { border: 0; background: transparent; }
.bk-datebtn[aria-expanded="true"] { background: var(--surface-2); }
.bk-datebtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.bk-datebtn .chev { transition: transform .18s ease; }
.bkc-scrim { position: fixed; inset: 0; z-index: 400; background: transparent; }
.bkc { position: fixed; width: 360px; max-height: calc(100vh - 24px); overflow-y: auto; background: var(--surface); border-radius: 22px; padding: 16px 16px 14px;
  box-shadow: 0 0 0 1px var(--line), 0 2px 4px rgba(0,0,0,.04), 0 24px 48px -16px rgba(18,26,22,.32);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top center; transition: opacity .16s ease, transform .18s cubic-bezier(.2,.8,.2,1); }
.bkc-scrim.open .bkc { opacity: 1; transform: none; }
.bkc-scrim.closing .bkc { opacity: 0; transform: translateY(-4px) scale(.98); }
.bkc-scrim.phone { background: rgba(10,16,13,0); transition: background .2s ease; }
.bkc-scrim.phone.open { background: rgba(10,16,13,.38); }
.bkc-scrim.phone.closing { background: rgba(10,16,13,0); }
.bkc-scrim.phone .bkc { left: 0; right: 0; bottom: 0; width: auto; border-radius: 24px 24px 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); opacity: 1; }
.bkc-scrim.phone.open .bkc { transform: none; }
.bkc-scrim.phone.closing .bkc { transform: translateY(100%); }
.bkc .grab { width: 38px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 2px auto 10px; }
.bkc-in { display: flex; flex-direction: column; gap: 14px; }
.bkc-head { display: flex; align-items: flex-start; gap: 10px; }
.bkc-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bkc-rel { font: 700 .7rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text, var(--brand)); }
.bkc-head strong { font: 750 1.2rem var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.bkc-head .icon-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 0; flex: none; }
.bkc-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.bkc-quick::-webkit-scrollbar { display: none; }
.bkc-quick button { flex: none; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font: 650 .78rem var(--f-body); padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: background .12s, border-color .12s; }
.bkc-quick button:hover { background: var(--surface-2); }
.bkc-quick button.on { background: var(--brand-soft); border-color: color-mix(in oklab, var(--brand) 45%, transparent); color: var(--brand-text, var(--brand)); }
.bkc-nav { display: flex; align-items: center; gap: 6px; }
.bkc-arrow { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.bkc-arrow:hover { background: var(--surface-2); }
.bkc-arrow .icon { width: 16px; height: 16px; }
.bkc-title { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; color: var(--ink); font: 750 .98rem var(--f-display); letter-spacing: -.01em; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.bkc-title:hover { background: var(--surface-2); }
.bkc-title .chev { width: 13px; height: 13px; color: var(--muted); }
.bkc-body.in-l { animation: bkc-in-l .22s ease; } .bkc-body.in-r { animation: bkc-in-r .22s ease; } .bkc-body.in-0 { animation: bkc-fade .18s ease; }
@keyframes bkc-in-l { from { opacity: 0; transform: translateX(-14px); } }
@keyframes bkc-in-r { from { opacity: 0; transform: translateX(14px); } }
@keyframes bkc-fade { from { opacity: 0; transform: scale(.98); } }
.bkc-dow, .bkc-wk { display: grid; grid-template-columns: repeat(7, 1fr); }
.bkc-dow span { text-align: center; font: 700 .68rem var(--f-body); color: var(--muted); letter-spacing: .06em; padding-bottom: 6px; }
.bkc-grid { display: flex; flex-direction: column; gap: 2px; }
.bkc-wk { border-radius: 999px; transition: background .12s; }
.bkc-wk button { position: relative; justify-self: center; width: 100%; max-width: 42px; aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font: 600 .9rem var(--f-body); font-variant-numeric: tabular-nums; cursor: pointer; display: grid; place-items: center; transition: background .12s, color .12s; }
.bkc-wk button:hover { background: var(--surface-2); }
.bkc-wk button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.bkc-wk button.out { color: color-mix(in oklab, var(--muted) 55%, transparent); }
.bkc-wk button.past, .bkc-wk button.later { color: color-mix(in oklab, var(--muted) 80%, transparent); font-weight: 500; }
.bkc-wk button.today { color: var(--brand-text, var(--brand)); font-weight: 800; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--brand) 55%, transparent); }
.bkc-wk button.sel { background: var(--brand); color: #fff; font-weight: 750; box-shadow: 0 6px 14px -8px var(--brand); }
.bkc-wk button i { position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent, #e3b505); }
.bkc-wk button.sel i { background: #fff; }
/* Week view: the whole week is one pill. */
.bkc-grid.weeks .bkc-wk { cursor: pointer; }
.bkc-grid.weeks .bkc-wk:hover { background: var(--surface-2); }
.bkc-grid.weeks .bkc-wk:hover button { background: transparent; }
.bkc-grid.weeks .bkc-wk.sel { background: var(--brand); box-shadow: 0 6px 14px -8px var(--brand); }
.bkc-grid.weeks .bkc-wk.sel button { color: #fff; box-shadow: none; }
.bkc-grid.weeks .bkc-wk.sel button i { background: #fff; }
.bkc-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bkc-months button { border: 0; background: transparent; color: var(--ink); font: 650 .92rem var(--f-body); padding: 14px 0; border-radius: 14px; cursor: pointer; }
.bkc-months button:hover { background: var(--surface-2); }
.bkc-months button.today { color: var(--brand-text, var(--brand)); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--brand) 55%, transparent); }
.bkc-months button.sel { background: var(--brand); color: #fff; box-shadow: none; }
.bkc-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 11px; font: 500 .76rem var(--f-body); color: var(--muted); }
.bkc-foot span { display: inline-flex; align-items: center; gap: 6px; }
.bkc-k-mine { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #e3b505); }
.bkc-scrim.phone .bkc-wk button { max-width: 46px; font-size: .98rem; }
.bkc-scrim.phone .bkc-head strong { font-size: 1.3rem; }
@media (prefers-reduced-motion: reduce) { .bkc, .bkc-body { transition: none !important; animation: none !important; } }
/* What you follow: clearer separation (13 Nov). Rows sit on a light club green tint, each space is its own card, off switches are darker. */
.follow-list { border: 0; border-radius: 0; overflow: visible; gap: 10px; }
.fl-space { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; }
.fl-space + .fl-space { border-top: 1px solid var(--line-strong); }
.fl-space[open] { border-color: color-mix(in oklab, var(--brand) 35%, var(--line-strong)); }
.fl-space[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.fl-body { padding-top: 6px; }
.follow-sheet .pref-list, .fl-body .pref-list { background: color-mix(in oklab, var(--brand) 9%, var(--surface)); border-color: color-mix(in oklab, var(--brand) 22%, var(--line-strong)); }
.follow-sheet .pref-row + .pref-row, .fl-body .pref-row + .pref-row { border-top-color: color-mix(in oklab, var(--brand) 16%, var(--line)); }
.follow-sheet .pref-row, .fl-body .pref-row { color: var(--ink); font-weight: 500; }
.follow-sheet .fl-label, .fl-body .fl-label { color: var(--ink-2); margin-top: 10px; }
.follow-sheet .switch:not(:checked), .fl-body .switch:not(:checked) { background: color-mix(in oklab, var(--muted) 60%, var(--surface)); }

/* Phone menu, redesigned (13 Nov): club pages as an icon grid first, your teams as cards, spaces as one grouped list. */
.phone-menu { gap: 18px; }
.pm-head { align-items: center; }
.pm-head h2 { font-size: 1.45rem !important; letter-spacing: -.01em; }
.pm-head-btns { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pm-me { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in oklab, var(--brand) 35%, transparent); text-decoration: none; }
.pm-me .avatar.sm { width: 36px; height: 36px; font-size: .78rem; }
.pm-me.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--brand); }
.pm-sec .eyebrow { margin: 0 2px; }
.pm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; column-gap: 4px; padding: 14px 6px 12px; border-radius: 22px; background: var(--surface-2); }
.pm-g { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; min-width: 0; -webkit-tap-highlight-color: transparent; }
.pm-g-ico { position: relative; width: 52px; height: 52px; border-radius: 17px; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.04); transition: transform .15s var(--ease); }
.pm-g-ico > .icon { width: 23px; height: 23px; color: var(--brand); }
.pm-g:active .pm-g-ico { transform: scale(.93); }
.pm-g.active .pm-g-ico { background: var(--brand); box-shadow: none; }
.pm-g.active .pm-g-ico > .icon { color: #fff; }
.pm-g-lab { font-size: .72rem; font-weight: 600; line-height: 1.2; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pm-g-ico .unread { position: absolute; top: -5px; right: -7px; box-shadow: 0 0 0 2px var(--surface-2); }
.pm-g-ico .sys-dot { position: absolute; top: -2px; right: -2px; margin: 0; }
.pm-g-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2.5px var(--surface-2); }
.pm-teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pm-team { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 18px; background: var(--surface-2); color: var(--ink); text-decoration: none; min-width: 0; transition: transform .15s var(--ease); }
.pm-team:active { transform: scale(.98); }
.pm-team.active { background: var(--brand-soft); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 30%, transparent); }
.pm-tb { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px; background: var(--brand); color: #fff; font: 800 .8rem var(--f-display); letter-spacing: .02em; }
.pm-tb.alt { background: var(--accent); color: var(--accent-ink); }
.pm-team strong { font-size: .92rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-team small { font-size: .78rem; color: var(--muted); }
.pm-team-dot { position: absolute; top: 14px; right: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.pm-fold { border-radius: 16px; }
.pm-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; color: var(--ink-2); font-weight: 600; font-size: .9rem; cursor: pointer; }
.pm-fold > summary::-webkit-details-marker { display: none; }
.pm-fold > summary .icon { width: 16px; height: 16px; color: var(--brand); transition: transform .2s var(--ease); transform: rotate(-90deg); }
.pm-fold[open] > summary .icon { transform: none; }
.pm-fold-n { margin-left: auto; font-size: .78rem; color: var(--muted); }
.pm-fold .pm-list { margin-top: 4px; }
.phone-menu .pm-list { gap: 0; padding: 2px 12px; border-radius: 20px; background: var(--surface-2); }
.phone-menu .pm-space { gap: 12px; padding: 9px 0; border-radius: 0; font-size: .95rem; box-shadow: none; background: none; }
.phone-menu .pm-space + .pm-space { border-top: 1px solid var(--line); }
.phone-menu .pm-space.active { color: var(--brand-text, var(--brand)); background: none; box-shadow: none; }
.phone-menu .pm-space .pm-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.phone-menu .pm-ico .icon { width: 18px; height: 18px; color: var(--brand); }
.phone-menu .pm-space.active .pm-ico { background: var(--brand); box-shadow: none; }
.phone-menu .pm-space.active .pm-ico .icon { color: #fff; }
.phone-menu .pm-space > span:nth-of-type(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-chev { width: 16px !important; height: 16px !important; margin-left: auto; flex: none; color: var(--muted) !important; opacity: .7; }
.pm-all { display: flex; align-items: center; gap: 10px; margin-top: -6px; padding: 10px 12px; border-radius: 14px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .9rem; }
.pm-all > .icon:first-child { width: 18px; height: 18px; color: var(--brand); }
.pm-all.active { color: var(--brand-text, var(--brand)); }
@media (max-width: 350px) { .pm-g-ico { width: 46px; height: 46px; border-radius: 15px; } .pm-g-lab { font-size: .68rem; } }
.pm-team-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-teams > .pm-team:only-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
.pm-teams > .pm-team:only-child .pm-tb { margin: 0; flex: none; }
.pm-teams > .pm-team:only-child .pm-team-dot { top: 50%; margin-top: -4px; }

/* Chat on a computer (14 Nov): the page itself never scrolls. The two panels fill the space under the top bar
   and only the messages (and the chat list) scroll inside them. */
@media (min-width: 900px) {
  html:has(.chat-shell), body:has(.chat-shell) { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .shell > div:has(.chat-shell) { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  .shell > div:has(.chat-shell) > .deskbar { flex: none; }
  .main:has(.chat-shell) { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: 28px; padding-bottom: 28px; }
  .main:has(.chat-shell) > .page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .chat-shell { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .chat-shell > .chat-rail, .chat-shell > .chat-page,
  body.chat-mode .chat-shell > .chat-page { height: auto; min-height: 0; max-height: 100%; }
  .chat-shell > .chat-rail .rail-list { flex: 1; min-height: 0; }
  .chat-shell .dm-scroll { min-height: 0; overscroll-behavior: contain; }
}

/* Each day's messages sit in their own block, so a day's sticky date is pushed away by the next one
   instead of two dates stacking on top of each other while scrolling. */
.dm-dayset { display: flex; flex-direction: column; gap: inherit; }
/* GIFs in private messages and side chats */
.dm-gif .gif-out { margin: 2px 0 6px; max-width: min(240px, 100%); }
.dm-bubble .post-body.gif-only { display: flex; justify-content: flex-end; }
.dm-compose .lite-gif { align-self: flex-end; margin-bottom: 12px; }
.dm-field .lite-prev { margin: 10px 0 0; flex-basis: auto; }
/* Room under a search box in a popup so it can rise to the top while the keyboard is up (keepFieldClear in app.js, 14 Nov 2026). */
.sheet > .kb-spacer { flex: none; pointer-events: none; }

/* Hand tuned themes (Olly, 14 Nov 2026). A community that picks a theme gets text in its colour tuned for
   at least 6:1 on white, and dark mode surfaces tinted towards its colour with text at 7:1 or better.
   Communities on their own colours (Shipston) have no data-palette, so none of this applies to them. */
:root[data-palette="green"] { --brand-text: #007151; }
@media (prefers-color-scheme: dark) { :root[data-palette="green"]:not([data-theme="light"]) { --bg: #090d0b; --surface: #101513; --surface-2: #151b18; --line: #202623; --line-strong: #29302d; --brand-text: #6ecda8; } }
:root[data-palette="green"][data-theme="dark"] { --bg: #090d0b; --surface: #101513; --surface-2: #151b18; --line: #202623; --line-strong: #29302d; --brand-text: #6ecda8; }
:root[data-palette="blue"] { --brand-text: #185acc; }
@media (prefers-color-scheme: dark) { :root[data-palette="blue"]:not([data-theme="light"]) { --bg: #0a0c0f; --surface: #111418; --surface-2: #171a1e; --line: #212429; --line-strong: #2b2e33; --brand-text: #83b7ff; } }
:root[data-palette="blue"][data-theme="dark"] { --bg: #0a0c0f; --surface: #111418; --surface-2: #171a1e; --line: #212429; --line-strong: #2b2e33; --brand-text: #83b7ff; }
:root[data-palette="navy"] { --brand-text: #1f3a7a; }
@media (prefers-color-scheme: dark) { :root[data-palette="navy"]:not([data-theme="light"]) { --bg: #0b0c0f; --surface: #121418; --surface-2: #17191e; --line: #222429; --line-strong: #2b2e34; --brand-text: #93b6ff; } }
:root[data-palette="navy"][data-theme="dark"] { --bg: #0b0c0f; --surface: #121418; --surface-2: #17191e; --line: #222429; --line-strong: #2b2e34; --brand-text: #93b6ff; }
:root[data-palette="red"] { --brand-text: #bb0022; }
@media (prefers-color-scheme: dark) { :root[data-palette="red"]:not([data-theme="light"]) { --bg: #0f0b0b; --surface: #181212; --surface-2: #1e1817; --line: #292222; --line-strong: #332c2b; --brand-text: #ff918c; } }
:root[data-palette="red"][data-theme="dark"] { --bg: #0f0b0b; --surface: #181212; --surface-2: #1e1817; --line: #292222; --line-strong: #332c2b; --brand-text: #ff918c; }
:root[data-palette="burgundy"] { --brand-text: #7d1e3e; }
@media (prefers-color-scheme: dark) { :root[data-palette="burgundy"]:not([data-theme="light"]) { --bg: #0f0b0c; --surface: #171213; --surface-2: #1e1819; --line: #292223; --line-strong: #332c2d; --brand-text: #fd92ac; } }
:root[data-palette="burgundy"][data-theme="dark"] { --bg: #0f0b0c; --surface: #171213; --surface-2: #1e1819; --line: #292223; --line-strong: #332c2d; --brand-text: #fd92ac; }
:root[data-palette="purple"] { --brand-text: #6a35c9; }
@media (prefers-color-scheme: dark) { :root[data-palette="purple"]:not([data-theme="light"]) { --bg: #0c0c0f; --surface: #141318; --surface-2: #19191e; --line: #242329; --line-strong: #2e2d33; --brand-text: #bba5ff; } }
:root[data-palette="purple"][data-theme="dark"] { --bg: #0c0c0f; --surface: #141318; --surface-2: #19191e; --line: #242329; --line-strong: #2e2d33; --brand-text: #bba5ff; }
:root[data-palette="orange"] { --brand-text: #ad3300; }
@media (prefers-color-scheme: dark) { :root[data-palette="orange"]:not([data-theme="light"]) { --bg: #0f0b0a; --surface: #171311; --surface-2: #1e1816; --line: #282220; --line-strong: #332c2a; --brand-text: #ff976f; } }
:root[data-palette="orange"][data-theme="dark"] { --bg: #0f0b0a; --surface: #171311; --surface-2: #1e1816; --line: #282220; --line-strong: #332c2a; --brand-text: #ff976f; }
:root[data-palette="teal"] { --brand-text: #006d6d; }
@media (prefers-color-scheme: dark) { :root[data-palette="teal"]:not([data-theme="light"]) { --bg: #090d0d; --surface: #101515; --surface-2: #151b1b; --line: #202525; --line-strong: #292f2f; --brand-text: #73c8c8; } }
:root[data-palette="teal"][data-theme="dark"] { --bg: #090d0d; --surface: #101515; --surface-2: #151b1b; --line: #202525; --line-strong: #292f2f; --brand-text: #73c8c8; }
:root[data-palette="slate"] { --brand-text: #334155; }
@media (prefers-color-scheme: dark) { :root[data-palette="slate"]:not([data-theme="light"]) { --bg: #0b0c0d; --surface: #131415; --surface-2: #18191b; --line: #232426; --line-strong: #2c2e30; --brand-text: #a8b9d1; } }
:root[data-palette="slate"][data-theme="dark"] { --bg: #0b0c0d; --surface: #131415; --surface-2: #18191b; --line: #232426; --line-strong: #2c2e30; --brand-text: #a8b9d1; }
/* Scheduled posts: a quiet list of what is waiting to go out (space Posts and Home, Club admin) */
.sched-box { padding: 4px 0; border-style: dashed; border-color: var(--line-strong); background: color-mix(in oklab, var(--surface) 92%, var(--surface-2)); }
.sched-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px 6px; font-size: .9rem; }
.sched-head .icon { width: 16px; height: 16px; color: var(--muted); }
.sched-head .muted { font-size: .8rem; flex-basis: 100%; }
.sched-box.bare { padding: 0; }
.sched-box.bare .sched-row:first-child { border-top: 0; }
.sched-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.sched-date { flex: none; width: 44px; height: 46px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.sched-date b { font-size: 1.15rem; font-weight: 750; }
.sched-date small { font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.sched-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sched-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.sched-info small { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: .8rem; }
.sched-info small .icon { width: 13px; height: 13px; }
.sched-actions { flex: none; display: flex; gap: 6px; }
@media (max-width: 560px) {
  .sched-row { flex-wrap: wrap; }
  .sched-actions { width: 100%; padding-left: 56px; }
  .sched-actions .btn { flex: 1; justify-content: center; }
}
.sched-month { margin: 18px 0 8px; }
.sched-month:first-of-type { margin-top: 4px; }
.when-pick { margin-top: 2px; }
[data-when-later][hidden] { display: none; }

/* Club admin, Pay and play */
.pp-adm-top { display: grid; gap: 14px; }
.pp-adm-status { display: flex; gap: 12px; align-items: flex-start; }
.pp-adm-status h3 { margin: 0 0 2px; }
.pp-warn { background: color-mix(in oklab, var(--warn) 10%, var(--surface)); border-color: color-mix(in oklab, var(--warn) 30%, var(--line)); }
.pp-row-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pp-row-item:last-of-type { border-bottom: 0; }
.pp-row-item > div:first-child { min-width: 0; }
.pp-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
@media (max-width: 600px) { .pp-row-item { flex-direction: column; align-items: stretch; } .pp-acts { justify-content: flex-start; } }
.pp-stopped { display: inline-block; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: color-mix(in oklab, var(--danger) 12%, var(--surface)); color: var(--danger); }
.pp-recent summary { cursor: pointer; font-weight: 700; }
.pp-poster { text-align: center; border: 2px solid var(--brand); border-radius: 22px; padding: 24px 18px; margin-bottom: 14px; }
.pp-poster h2 { font-size: 1.8rem; margin: 0 0 6px; }
.pp-poster .qr { width: 210px; max-width: 70%; margin: 16px auto 10px; }
.pp-poster .qr svg { width: 100%; height: auto; display: block; }
@media print {
  body:has(.pp-poster) > *:not(.scrim) { display: none !important; }
  body:has(.pp-poster) .scrim { position: static; background: none; }
  body:has(.pp-poster) .sheet { position: static; box-shadow: none; transform: none; max-height: none; }
  body:has(.pp-poster) .sheet-head, body:has(.pp-poster) .grab, body:has(.pp-poster) [data-pp-print] { display: none !important; }
  .pp-poster { border-width: 3px; margin: 40px auto; max-width: 520px; }
  .pp-poster .qr { width: 300px; }
}

/* Public spaces: what visitors see without signing in. */
.pub { max-width: 760px; }
.pub-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pub-brand { font: 750 1.05rem var(--f-display); color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.pub-spaces { display: grid; gap: 10px; margin-top: 16px; }
.pub-space, .pub-card { display: flex; gap: 14px; align-items: flex-start; text-decoration: none; color: var(--ink); }
.pub-card { flex-direction: column; gap: 4px; margin-top: 10px; }
.pub-card h2 { font-size: 1.08rem; letter-spacing: -.015em; display: flex; gap: 6px; align-items: center; }
.pub-space small { display: block; margin-top: 2px; font-size: .86rem; }
.pub-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--brand-text); background: color-mix(in oklab, var(--brand) 10%, var(--surface)); }
.pub-head { display: flex; gap: 14px; align-items: center; margin: 16px 0 6px; }
.pub-head h1 { font-size: 1.6rem; }
.pub-h { margin: 22px 0 8px; font-size: .95rem; }
.pub-meta { font-size: .85rem; margin: 4px 0 10px; }
.pub-snip { color: var(--ink-2); font-size: .94rem; line-height: 1.5; }
.pub-post { margin-top: 12px; } .pub-post h1 { font-size: 1.5rem; }
.pub-reply { margin-top: 8px; padding: 14px 16px; }
.pub-event { margin-top: 8px; padding: 14px 16px; }
.pub-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.pub-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.pub-cta { margin-top: 18px; display: grid; gap: 6px; justify-items: start; }
.pub-space, .pub-cta { padding: 16px 18px; }
.pub-top { position: sticky; top: 0; z-index: 5; padding: 10px 0; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(8px); }
/* Background art follows the kind of community and its sport (Olly, 14 Nov 2026). Court lines are the default,
   so Shipston (tennis) is unchanged. app.js sets data-art on the page from /api/community (artFor). */
:root[data-art]:not([data-art="court"]) .ev-hero.t-match::after { right: -60px; margin-right: 0; top: auto; bottom: -110px; width: 520px; height: 330px; transform: rotate(-14deg); opacity: .14; }
:root[data-art]:not([data-art="court"]) .signin-art .court { display: none; }
:root[data-art]:not([data-art="court"]) .signin-art::after { content: ""; position: absolute; z-index: -1; right: -90px; bottom: -80px; width: 480px; height: 312px; opacity: .12; pointer-events: none; transform: rotate(-10deg); background-position: center; background-size: contain; background-repeat: no-repeat; }
:root[data-art="plain"] .hero::after, :root[data-art="plain"] .ev-hero::after, :root[data-art="plain"] .signin-art::after { background-image: none; }
:root[data-art="pitch"] .hero::after, :root[data-art="pitch"] .ev-hero::after, :root[data-art="pitch"] .signin-art::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg stroke='%23fff' stroke-width='1.6' fill='none'%3E%3Crect x='6' y='6' width='388' height='248' rx='2'/%3E%3Cpath d='M200 6v248M6 72h62v116H6M394 72h-62v116h62M6 106h22v48H6M394 106h-22v48h22'/%3E%3Ccircle cx='200' cy='130' r='40'/%3E%3Cpath d='M68 104a30 30 0 0 1 0 52M332 104a30 30 0 0 0 0 52'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-art="cricket"] .hero::after, :root[data-art="cricket"] .ev-hero::after, :root[data-art="cricket"] .signin-art::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg stroke='%23fff' stroke-width='1.6' fill='none'%3E%3Cellipse cx='200' cy='130' rx='192' ry='122'/%3E%3Cellipse cx='200' cy='130' rx='112' ry='72'/%3E%3Crect x='186' y='80' width='28' height='100'/%3E%3Cpath d='M178 92h44M178 168h44'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-art="map"] .hero::after, :root[data-art="map"] .ev-hero::after, :root[data-art="map"] .signin-art::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg stroke='%23fff' stroke-width='1.6' fill='none'%3E%3Cpath d='M-10 200C60 170 90 220 160 190S260 120 330 150 410 130 410 130'/%3E%3Cpath d='M-10 160C50 130 100 175 165 150S250 85 320 112 410 90 410 90'/%3E%3Cpath d='M-10 120C55 95 105 135 170 110S245 50 315 75 410 50 410 50'/%3E%3Cpath d='M-10 80C60 60 110 95 175 72S240 15 310 38 410 12 410 12'/%3E%3Cpath d='M-10 240C70 215 95 255 165 232S270 165 340 190 410 175 410 175'/%3E%3Ccircle cx='250' cy='118' r='5'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-art="arch"] .hero::after, :root[data-art="arch"] .ev-hero::after, :root[data-art="arch"] .signin-art::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg stroke='%23fff' stroke-width='1.6' fill='none'%3E%3Cpath d='M40 256V120Q40 34 120 8Q200 34 200 120V256M200 256V120Q200 34 280 8Q360 34 360 120V256'/%3E%3Cpath d='M72 256V130Q72 62 120 42Q168 62 168 130V256M232 256V130Q232 62 280 42Q328 62 328 130V256'/%3E%3Ccircle cx='120' cy='104' r='16'/%3E%3Ccircle cx='280' cy='104' r='16'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-art="dots"] .hero::after, :root[data-art="dots"] .ev-hero::after, :root[data-art="dots"] .signin-art::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cdefs%3E%3Cpattern id='d' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='1.8' fill='%23fff'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='400' height='260' fill='url(%23d)'/%3E%3C/svg%3E"); }
:root[data-art="dots"] .hero::after, :root[data-art="dots"] .ev-hero::after, :root[data-art="dots"] .signin-art::after { transform: none; opacity: .16; }
/* Away from racket sports: the Home count is a plain badge in the accent colour, and the floating ball on
   the sign in page and Home is not shown. Small dots (map pins) stay as plain accent circles. */
.hero-num.hn-badge { width: auto; min-width: 1.3em; padding: 0 .28em; border-radius: .32em; background: var(--accent); filter: none; box-shadow: 0 .08em .2em rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.35); }
.hero-num.hn-badge .hero-num-n { color: var(--accent-ink); -webkit-text-fill-color: var(--accent-ink); text-shadow: none; }
:root[data-art]:not([data-art="court"]) .signin-art .ball, :root[data-art]:not([data-art="court"]) .hero .ball { display: none; }

/* Uploaded community logos sit on white so any logo reads on the coloured header. */
.club-badge.own-logo { background: #fff; padding: 4px; overflow: hidden; }
.club-badge.own-logo img { width: 100%; height: 100%; object-fit: contain; }
.logo-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pub-acts { display: flex; gap: 8px; }
.jr-row { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; }
.jr-acts { display: flex; gap: 8px; }
/* The lock up list editor uses the checklist builder's rows, without the step kind button. */
.cl-items.pp-lock li { grid-template-columns: 18px minmax(0, 1fr) auto 34px; }
.cl-items.pp-lock li.cl-none { display: block; }
@media (max-width: 600px) { .cl-items.pp-lock li { grid-template-columns: minmax(0, 1fr) 28px 30px; } }

/* ---------- Space types (events, Q&A, notices, listings, booking) ---------- */
.ty-page { display: flex; flex-direction: column; gap: 14px; }
.ty-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.ty-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ty-row .audit-chips { margin: 0; }
.ty-sum { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: .9rem; }
.ty-sum .icon { width: 17px; height: 17px; color: var(--brand-text); }
.ty-pick label strong { display: inline-flex; align-items: center; gap: 6px; }
/* Events */
.ev-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.ev-card { display: flex; gap: 14px; padding: 16px; cursor: pointer; text-align: left; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.ev-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.ev-card.cancelled { opacity: .7; }
.ev-card.cancelled h3 { text-decoration: line-through; }
.evc-date { flex: none; width: 58px; border-radius: var(--r-sm); background: var(--brand-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0; line-height: 1.1; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 18%, transparent); }
.evc-date span, .evc-date small { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-text); }
.evc-date b { font: 750 1.55rem/1.1 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.evc-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.evc-main h3 { font-size: 1.05rem; }
.evc-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: .84rem; }
.evc-sub span { display: inline-flex; align-items: center; gap: 5px; }
.evc-sub .icon { width: 14px; height: 14px; }
.evc-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; font-size: .84rem; }
.evc-acts .btn { margin-left: auto; }
/* Q&A */
.chip.qa-done, .chip.read-tick { background: color-mix(in oklab, var(--court) 9%, var(--surface)); color: var(--court); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 22%, transparent); }
.chip.qa-open { color: var(--warn); background: color-mix(in oklab, var(--warn) 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn) 22%, transparent); }
.chip.new-chip { background: var(--brand); color: var(--brand-ink); }
.qa-best { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: color-mix(in oklab, var(--court) 7%, var(--surface)); box-shadow: inset 3px 0 0 var(--court); font-size: .9rem; color: var(--ink-2); }
.qa-best .icon { flex: none; width: 17px; height: 17px; color: var(--court); margin-top: 2px; }
.qa-best small { display: block; font-weight: 700; color: var(--court); font-size: .76rem; }
.reply.best > div:last-child { background: color-mix(in oklab, var(--court) 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 30%, transparent); }
.best-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--court); font-weight: 700; font-size: .78rem; }
.best-tag .icon { width: 13px; height: 13px; }
.btn.sm.qa-pick { padding: 2px 9px; min-height: 0; font-size: .76rem; }
/* Notices */
.ack-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .86rem; }
.btn.ack-done { color: var(--court); }
/* Listings */
.chip.lst-kind.sale { color: var(--brand-text); }
.chip.lst-kind.wanted { color: var(--warn); }
.chip.lst-kind.free { color: var(--court); }
.chip.lst-st.gone { color: var(--muted); text-decoration: line-through; }
.lst-status { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.lst-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 190px), 1fr)); }
.lst-tile { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; cursor: pointer; border: 0; font: inherit; color: inherit; }
.lst-tile.gone { opacity: .6; }
.lst-pic { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.lst-pic img { width: 100%; height: 100%; object-fit: cover; }
.lst-pic > .icon { width: 34px; height: 34px; color: var(--muted); }
.lst-badge { position: absolute; top: 8px; left: 8px; padding: 2px 9px; border-radius: 99px; font-size: .72rem; font-weight: 750; background: var(--ink); color: var(--surface); }
.lst-badge.reserved { background: var(--accent); color: var(--accent-ink); }
.lst-info { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.lst-info strong { font-size: .92rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lst-info small { font-size: .76rem; }
.lst-price { font: 750 1.05rem/1.2 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.lst-price.free { color: var(--court); }
.lst-price.wanted { color: var(--warn); }
/* Booking spaces */
.res-days { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.res-day { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 7px 0; border-radius: var(--r-sm); border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; color: var(--ink); font: inherit; }
.res-day span, .res-day small { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.res-day b { font: 750 1.15rem/1.2 var(--f-display); }
.res-day.on { background: var(--brand); box-shadow: none; color: var(--brand-ink); }
.res-day.on span, .res-day.on small { color: color-mix(in oklab, var(--brand-ink) 80%, transparent); }
.res-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.res-head h3 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; }
.res-head h3 .icon { width: 17px; height: 17px; color: var(--brand-text); }
.res-head p { margin: 4px 0 2px; font-size: .88rem; }
.res-slots { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.res-slot { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: var(--r-sm); border: 0; font: inherit; cursor: pointer; line-height: 1.2; }
.res-slot b { font-size: .9rem; }
.res-slot small { font-size: .7rem; font-weight: 600; }
.res-slot.free { background: color-mix(in oklab, var(--court) 8%, var(--surface)); color: var(--court); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 24%, transparent); }
.res-slot.free:hover:not(:disabled) { background: color-mix(in oklab, var(--court) 16%, var(--surface)); }
.res-slot.taken { background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.res-slot.taken.mine { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.res-slot:disabled { cursor: default; opacity: .55; }
.res-mine { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.res-mine:first-of-type { border-top: 0; }
.res-mine small { display: block; }
.res-edit { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.res-edit .row { align-items: flex-end; }
.len-to { font-weight: 500; opacity: .8; }
.res-edit .row:first-child { flex-wrap: nowrap; }
.res-edit .row:first-child .field { flex: 1; }
.pub-reply.best { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--court) 35%, transparent); background: color-mix(in oklab, var(--court) 6%, var(--surface)); }
.pub-listing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 2px; }
.pub-event.cancelled strong { text-decoration: line-through; }
a.lst-tile { text-decoration: none; }
.pub .lst-grid { width: 100%; align-self: stretch; grid-template-columns: repeat(auto-fill, minmax(min(46%, 190px), 1fr)); }
.res-edit > .row:first-child { flex-wrap: nowrap; align-items: flex-end; }
.res-edit > .row:first-child > .field { flex: 1 1 auto; max-width: none; }
.bk-in-space .bk-wk-lane em { width: auto; min-width: 72px; }
.bk-res { margin: 2px 0 6px; }
.bk-res-details { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .88rem; }
.bk-res-details .icon { width: 15px; height: 15px; }
.bk-area-rules { margin: 0 0 8px; }