/* Vukron website, "Floodlight" (design: canvas page "Website v2", boards W2*). Built from the logo: a near-black pitch,
   lime as the one light that matters, brushed-steel headlines, and a soft glow on whatever you should press next.
   Dark is the default; light follows the browser's preference or the toggle (stored in localStorage). */

@font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.woff2") format("woff2"), url("../fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Medium.woff2") format("woff2"), url("../fonts/Manrope-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-SemiBold.woff2") format("woff2"), url("../fonts/Manrope-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Bold.woff2") format("woff2"), url("../fonts/Manrope-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-ExtraBold.woff2") format("woff2"), url("../fonts/Manrope-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2"), url("../fonts/JetBrainsMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2"), url("../fonts/JetBrainsMono-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
    --bg: #0A0C10; --bg2: #0E1116; --surface: #13171D; --raised: #1A1F27; --side-bg: #0C0F13;
    --line: #262C35; --line2: #1D222A; --line3: #3A414C; --muted: #4A5059;
    --text: #F4F2EC; --text2: #B8BEC8; --text3: #939DA9;
    --on-fill: #0A0C10;
    --lime: #D4FF3A; --lime-ink: #D4FF3A; --lime-tint: rgba(212,255,58,.12); --lime-line: rgba(212,255,58,.45);
    --blue: #6EA8FF; --blue-ink: #8DBBFF; --blue-tint: rgba(110,168,255,.14);
    --cash: #FFB547; --cash-ink: #FFB547; --cash-tint: rgba(255,181,71,.14); --cash-line: rgba(255,181,71,.55);
    --violet: #C4B3FF; --violet-ink: #C4B3FF; --violet-tint: rgba(196,179,255,.14);
    --danger: #FF5A5F; --danger-ink: #FF8286; --danger-tint: rgba(255,90,95,.14);
    --pink: #FFB3D9; /* Women only (Who can book, 19 Oct) */
    --live: #FF4D3A;
    --heading: linear-gradient(180deg, #FFFFFF 0%, #D3D8DF 55%, #8B939E 100%);
    --glow: 0 0 0 1px rgba(212,255,58,.22), 0 18px 60px -20px rgba(212,255,58,.45);
    --glow-soft: 0 8px 28px -10px rgba(212,255,58,.75);
    --photo: linear-gradient(135deg, #1D242C 0%, #10141A 100%);
    --hero-bg: radial-gradient(70% 60% at 78% 18%, rgba(212,255,58,.16), transparent 60%), radial-gradient(50% 50% at 8% 92%, rgba(212,255,58,.07), transparent 60%);
    --shade: rgba(10,12,16,.72);
    --radius: 18px; --radius-sm: 12px;
    --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 48px -28px rgba(0,0,0,.8);
    --display: "Anton", Impact, "Arial Narrow", sans-serif;
    --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg: #F4F2EC; --bg2: #ECEAE3; --surface: #FFFFFF; --raised: #F6F5F1; --side-bg: #FFFFFF;
    --line: #E1DED5; --line2: #EAE8E1; --line3: #C8C4B8; --muted: #A3A89A;
    --text: #0A0C10; --text2: #4A5059; --text3: #5E6470;
    --lime-ink: #3F6A00; --lime-tint: #EEF8C8; --lime-line: #B8DB2F;
    --blue-ink: #1F56AE; --blue-tint: #E2ECFC;
    --cash-ink: #8A5300; --cash-tint: #FFF0D6; --cash-line: #F0BE6E;
    --violet-ink: #5A3FD0; --violet-tint: #EEE9FF;
    --danger: #D9363E; --danger-ink: #B4232B; --danger-tint: #FDE3E4;
    --pink: #A3175C;
    --heading: linear-gradient(180deg, #0A0C10 0%, #2E343C 60%, #5A626D 100%);
    --glow: 0 0 0 1px #CBEA6E, 0 18px 50px -24px rgba(63,106,0,.45);
    --glow-soft: 0 8px 22px -10px rgba(110,150,0,.6);
    --photo: linear-gradient(135deg, #E6E3DA 0%, #D5D1C6 100%);
    --hero-bg: radial-gradient(70% 60% at 78% 18%, rgba(212,255,58,.38), transparent 60%);
    --shade: rgba(244,242,236,.82);
    --shadow: 0 1px 2px rgba(10,12,16,.04), 0 16px 36px -24px rgba(10,12,16,.25);
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute always wins over a component's own display (e.g. .help-guides is a grid): without this the Help
   guide showed the player and the business owner steps together, so its switch seemed to do nothing. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--text);
    font: 500 16px/1.55 var(--body);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--lime-ink); }
p { margin: 0 0 1em; color: var(--text2); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.1; color: var(--text); }
h1, .display { font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
/* Floodlight 2: section headings in bold mixed case; the display face is kept for page titles and heroes. */
h2 { font-family: var(--body); font-weight: 800; letter-spacing: -.015em; text-transform: none; }
h3 { font-size: 1.15rem; font-weight: 800; }
h4 { font-size: 1rem; font-weight: 700; }
::selection { background: var(--lime); color: var(--on-fill); }
/* Blue, 3px: the lime ring all but vanished on the light theme (Floodlight 2 accessibility pass). */
:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; border-radius: 6px; }

/* Floodlight 2: solid headings. The brushed-steel gradient washed out on the light theme. */
.steel, .page-title h1, .page-hero h1, .section-head h2, .auth-box h1, .persona h2, .prose h1 {
    background: none; -webkit-text-fill-color: currentColor; color: var(--text);
}

/* Full width, responsive (owner decision, 13 Oct): content stretches with the screen; only the side gutter scales. */
:root { --gutter: clamp(20px, 4vw, 72px); }
.wrap { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 40px); margin-inline: auto; }
.eyebrow {
    font: 700 .75rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--lime-ink);
    display: inline-flex; align-items: center; gap: .6em;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.mono { font-family: var(--mono); }
.muted { color: var(--text3); }
.small { font-size: .875rem; }
.lime { color: var(--lime-ink); }
.center { text-align: center; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.hidden { display: none !important; }
.glow { box-shadow: var(--glow); border-color: var(--lime-line) !important; }

/* Buttons: pills. One lime button per screen, the next step; it glows. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--raised); color: var(--text); font: 700 .95rem/1 var(--body); cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
    white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { border-color: var(--line3); color: var(--text); }
.btn:active { transform: translateY(1px); }
/* The browser's own "Choose File" control, dressed as one of ours (venue, court and business photos). */
input[type=file] { font: 600 .9rem var(--body); color: var(--text2); max-width: 100%; }
input[type=file]::file-selector-button {
    margin-right: 12px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line3);
    background: var(--raised); color: var(--text); font: 800 .85rem var(--body); cursor: pointer; transition: border-color .15s ease;
}
input[type=file]::file-selector-button:hover { border-color: var(--lime-line); }
input[type=file]:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 999px; }
.btn-primary { background: var(--lime); border-color: var(--lime); color: var(--on-fill); box-shadow: var(--glow-soft); }
.btn-primary:hover { background: #C6F22C; border-color: #C6F22C; color: var(--on-fill); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--raised); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger-ink); }
.btn-danger:hover { background: var(--danger-tint); color: var(--danger-ink); }
.btn-lg { min-height: 58px; padding: 0 30px; font-size: 1.05rem; }
.btn-sm { min-height: 44px; padding: 0 15px; font-size: .85rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--lime-ink); font: inherit; font-weight: 700; cursor: pointer; }

/* Header (public site) */
.site-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--shade);
    backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px);
    border-bottom: 1px solid var(--line2);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 400 1.65rem/1 var(--display); letter-spacing: .06em; }
.brand .steel, .brand-word { color: var(--text); }
.brand:hover { color: var(--text); }
.brand-mark { height: 30px; width: auto; flex: none; display: block; }
/* An admin-uploaded logo (Admin › Brand and media) in place of the mark and wordmark. */
.brand-uploaded { height: 32px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.nav { display: flex; gap: 26px; align-items: center; }
.nav a { font-weight: 700; font-size: .95rem; color: var(--text2); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a.active { color: var(--text); }
.nav a.active { border-bottom-color: var(--lime); }
.header-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.icon-btn {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
    display: inline-grid; place-items: center; color: var(--text2); cursor: pointer; position: relative;
}
.icon-btn:hover { border-color: var(--line3); color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }
.theme-light-icon { display: none; }
:root[data-theme="light"] .theme-light-icon { display: block; }
:root[data-theme="light"] .theme-dark-icon { display: none; }
.menu-toggle { display: none; }
@media (max-width: 860px) {
    .site-header .nav { display: none; }
    .menu-toggle { display: inline-grid; }
    .site-header.open .nav {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        position: absolute; left: 0; right: 0; top: 74px; background: var(--bg); border-bottom: 1px solid var(--line);
        padding: 8px 20px 18px;
    }
    .site-header.open .nav a { padding: 14px 0; border-bottom: 1px solid var(--line2); }
    .header-actions .hide-sm { display: none; }
}

/* Hero: steel and lime headline, a sport picture from the pool on the right. */
.hero { position: relative; overflow: hidden; padding: 72px 0 96px; background: var(--hero-bg); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; position: relative; }
.hero h1 { font-size: clamp(3.4rem, 9vw, 7.8rem); line-height: .9; margin: 18px 0 22px; }
.hero h1 > span { display: block; }
.hero h1 .steel-line { color: var(--text); }
.hero h1 .outline { color: transparent; -webkit-text-stroke: 2px var(--text); }
.hero h1 .hl { color: var(--lime-ink); }
:root:not([data-theme="light"]) .hero h1 .hl { color: var(--lime); text-shadow: 0 0 40px rgba(212,255,58,.35); }
.hero .lead { font-size: 1.2rem; max-width: 38ch; color: var(--text2); }
.hero .row { margin-top: 30px; }
.hero-meta { margin-top: 34px; display: flex; gap: 36px; flex-wrap: wrap; }
.hero-meta div { font: 700 .78rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text3); }
.hero-meta strong { display: block; font: 400 2.6rem/1 var(--display); color: var(--text); letter-spacing: .02em; margin-bottom: 4px; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 40px; } }

.hero-photo { position: relative; width: min(470px, 100%); margin-inline: auto; }
.hero-photo > img { width: 100%; height: auto; border-radius: 28px; box-shadow: var(--glow); }
.hero-photo .float-tag { left: -26px; right: auto; bottom: 44px; transform: none; }

/* The floating "booked" card */
.float-tag {
    position: absolute; right: -14px; bottom: 54px; display: flex; align-items: center; gap: 12px;
    background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px;
    font-weight: 800; font-size: .95rem; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6);
}
.float-tag .feature-icon { width: 40px; height: 40px; }
.float-tag small { display: block; font: 600 .8rem/1.3 var(--body); color: var(--text3); }

/* The older court card (kept for pages that still show it) */
.court-card { position: relative; border-radius: 28px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--glow); padding: 18px; }
.court-card .court { border-radius: 18px; aspect-ratio: 16/10; position: relative; overflow: hidden; background: linear-gradient(160deg, #1d3a12, #0e1d09); }
:root[data-theme="light"] .court-card .court { background: linear-gradient(160deg, #6fa53a, #4d7f22); }
.court svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.court .ball { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 24px var(--lime); animation: rally 3.6s ease-in-out infinite; }
@keyframes rally { 0% { left: 14%; top: 70%; } 25% { left: 46%; top: 22%; } 50% { left: 82%; top: 62%; } 75% { left: 52%; top: 30%; } 100% { left: 14%; top: 70%; } }
@media (prefers-reduced-motion: reduce) { .court .ball { animation: none; left: 46%; top: 40%; } }
.live-chip {
    position: absolute; top: 12px; left: 12px; background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px; padding: 5px 10px; font: 700 .7rem/1 var(--mono); letter-spacing: .1em; display: inline-flex; gap: 6px; align-items: center;
}
.live-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.slot-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.slot { border: 1px solid var(--line); border-radius: 14px; padding: 12px 6px; text-align: center; font: 700 .9rem/1 var(--mono); color: var(--text); background: var(--raised); }
.slot.taken { opacity: .45; text-decoration: line-through; border-style: dashed; }
.slot.pick { background: var(--lime); color: var(--on-fill); border-color: var(--lime); box-shadow: var(--glow-soft); }
.court-card .row-between { margin-top: 14px; }

/* Sports ticker */
.ticker { border-block: 1px solid var(--line2); overflow: hidden; background: var(--bg2); }
.ticker-track { display: flex; gap: 48px; padding: 20px 0; width: max-content; animation: ticker 36s linear infinite; }
.ticker-item { display: inline-flex; align-items: center; gap: 12px; font: 400 1.7rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--text2); }
.ticker-item img { width: 28px; height: 28px; }
.ticker-item .dot { width: 8px; height: 8px; background: var(--lime); border-radius: 2px; margin-left: 36px; box-shadow: 0 0 10px var(--lime); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
.icon-dark { display: none; }
:root[data-theme="light"] .icon-dark { display: block; }
:root[data-theme="light"] .icon-light { display: none; }

/* Sections */
.section { padding: 96px 0; }
.section-alt { background: var(--bg2); border-block: 1px solid var(--line2); }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); margin-top: 14px; line-height: .95; }
.section-head p { font-size: 1.1rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards-2, .cards-4 { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: none; }
.section-alt .card { background: var(--surface); }
.card h3 { margin-top: 16px; font-size: 1.3rem; }
.card p:last-child { margin-bottom: 0; }
.card-link { display: block; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.card-link:hover { border-color: var(--lime-line); color: inherit; transform: translateY(-3px); box-shadow: var(--glow); }
.feature-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--lime-tint); color: var(--lime-ink); flex: none; }
.feature-icon svg { width: 22px; height: 22px; }
.feature-icon.blue { background: var(--blue-tint); color: var(--blue-ink); }
.feature-icon.cash { background: var(--cash-tint); color: var(--cash-ink); }
.feature-icon.violet { background: var(--violet-tint); color: var(--violet-ink); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.persona { border-radius: 28px; padding: 38px; border: 1px solid var(--line); position: relative; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.persona.player { background: radial-gradient(90% 70% at 100% 0%, var(--lime-tint), transparent 60%), var(--surface); }
.persona.owner { background: radial-gradient(90% 70% at 100% 0%, var(--blue-tint), transparent 60%), var(--surface); box-shadow: var(--glow); border-color: var(--lime-line); }
.persona h2 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); margin: 14px 0 12px; line-height: .95; }
.persona ul { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 12px; }
.persona li { display: flex; gap: 12px; color: var(--text2); }
.persona li::before {
    content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; background: var(--lime) no-repeat center/12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0C10' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
.persona.owner li::before { background-color: var(--blue); }
.persona .eyebrow::before { background: var(--lime); }
.persona.owner .eyebrow { color: var(--blue-ink); }
.persona.owner .eyebrow::before { background: var(--blue); box-shadow: 0 0 12px var(--blue); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.step::before { counter-increment: step; content: "0" counter(step); display: block; font: 400 3.6rem/1 var(--display); color: var(--lime-ink); margin-bottom: 14px; }
:root:not([data-theme="light"]) .step::before { color: var(--lime); text-shadow: 0 0 30px rgba(212,255,58,.35); }

/* The big call to action: a glowing card, not a flat lime slab. */
.banner {
    border-radius: 28px; padding: 44px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
    background: radial-gradient(80% 120% at 100% 0%, var(--lime-tint), transparent 60%), var(--surface);
    border: 1px solid var(--lime-line); box-shadow: var(--glow);
}
.banner h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin: 0 0 10px; color: var(--text); line-height: 1.1; }
.banner p { color: var(--text2); margin: 0; max-width: 60ch; }
.banner .btn { background: var(--lime); color: var(--on-fill); border-color: var(--lime); box-shadow: var(--glow-soft); }
.banner .btn:hover { color: var(--on-fill); }
@media (max-width: 760px) { .banner { grid-template-columns: 1fr; padding: 28px; } }

/* A full-width sport picture from the pool, with a headline over it. */
.poster-banner { position: relative; border-radius: 28px; overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; background: #0A0C10; }
.poster-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .72; }
.poster-banner .over { position: relative; width: 100%; padding: 40px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; background: linear-gradient(180deg, transparent, rgba(10,12,16,.92)); }
.poster-banner .over h2, .poster-banner .over .display { color: #F4F2EC; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .95; margin: 0; }
.poster-banner .over p { color: #B8BEC8; margin: 8px 0 0; }

.quote { font: 400 clamp(2rem, 4.4vw, 3.6rem)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; color: #F4F2EC; }
.quote em { font-style: normal; color: var(--lime); text-shadow: 0 0 30px rgba(212,255,58,.4); }

.page-hero { padding: 72px 0 44px; border-bottom: 1px solid var(--line2); background: var(--hero-bg); }
.page-hero h1 { font-size: clamp(3rem, 7.4vw, 5.6rem); line-height: .92; margin: 16px 0 16px; }
.page-hero p { font-size: 1.15rem; max-width: 62ch; }

/* Footer */
.site-footer { border-top: 1px solid var(--line2); padding: 64px 0 36px; margin-top: 40px; background: var(--bg2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font: 700 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); margin-bottom: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-grid a { color: var(--text2); font-weight: 600; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--text3); font-size: .85rem; }

/* Legal documents */
.legal-layout { display: grid; grid-template-columns: 260px 1fr; gap: 48px; padding: 48px 0 24px; }
@media (max-width: 860px) { .legal-layout { grid-template-columns: 1fr; gap: 20px; } }
.legal-nav { position: sticky; top: 98px; align-self: start; display: grid; gap: 4px; }
@media (max-width: 860px) { .legal-nav { position: static; display: flex; overflow-x: auto; gap: 8px; padding-bottom: 6px; } }
.legal-nav a { padding: 11px 15px; border-radius: 14px; font-weight: 700; color: var(--text2); white-space: nowrap; }
.legal-nav a.active { background: var(--lime); color: var(--on-fill); box-shadow: var(--glow-soft); }
.prose { max-width: 72ch; }
.prose h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: .95; }
.prose h2 { font-family: var(--body); text-transform: none; font-weight: 800; font-size: 1.35rem; margin-top: 2em; letter-spacing: 0; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { color: var(--text2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .35em 0; }
.prose strong { color: var(--text); }
.prose a { color: var(--lime-ink); text-decoration: underline; }
.prose table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: .92rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--raised); }

/* Sign-in screens: a sport picture from the pool on the left, the form on the right. */
.auth-shell { min-height: calc(100vh - 74px); display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } .auth-art { display: none !important; } }
.auth-art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 40px; padding: 48px; background: #0A0C10; }
.auth-art .art-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% center; opacity: .55; }
.auth-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,16,.15) 0%, rgba(10,12,16,.92) 100%); }
.auth-art > :not(.art-photo) { position: relative; z-index: 1; }
.auth-art .quote { max-width: 12ch; }
.auth-art .brand-logo { width: min(380px, 100%); height: auto; }
.auth-panel { display: grid; place-items: center; padding: 48px 20px; }
.auth-box { width: min(460px, 100%); }
.auth-box h1 { font-size: 3.4rem; margin: 14px 0 8px; line-height: .95; }
.form { display: grid; gap: 18px; margin-top: 24px; }
.field { display: grid; gap: 8px; }
.field label, .label { font-weight: 700; font-size: .92rem; color: var(--text); }
.field .hint { font-size: .82rem; color: var(--text3); }
.input, select.input, textarea.input {
    width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line);
    background: var(--bg2); color: var(--text); font: 600 1rem/1.3 var(--body);
}
textarea.input { min-height: 110px; resize: vertical; }
/* Phone: the country code list, then the rest of the number (Pages/Shared/_PhoneInput) */
.phone-field { display: grid; grid-template-columns: minmax(160px, 40%) 1fr; gap: 8px; }
.phone-field .phone-code { font-weight: 700; padding-right: 10px; text-overflow: ellipsis; }
.phone-field .phone-number { font-family: var(--mono); letter-spacing: .02em; }
.input:focus { outline: none; border-color: var(--lime-line); box-shadow: 0 0 0 3px var(--lime-tint), var(--glow-soft); }
.input-code { font: 700 1.6rem/1 var(--mono); letter-spacing: .4em; text-align: center; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--text2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--lime); flex: none; }
.check a { color: var(--lime-ink); text-decoration: underline; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label { border: 1px solid var(--line); border-radius: 18px; padding: 16px; cursor: pointer; background: var(--surface); display: grid; gap: 2px; }
.segmented label strong { font-size: 1rem; }
.segmented label span { font-size: .82rem; color: var(--text3); font-weight: 600; }
.segmented input:checked + label { border-color: var(--lime-line); background: var(--lime-tint); box-shadow: var(--glow); }
.segmented input:focus-visible + label { outline: 3px solid var(--blue-ink); }
/* "Whose watch?" on Your watches (27 Oct): a plain group around the segmented choice, its legend set like a form label. */
.whose { border: 0; padding: 0; margin: 0; min-width: 0; }
.whose legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: .9rem; color: var(--text); }
.whose .segmented { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.alert { border-radius: 14px; padding: 13px 16px; font-weight: 600; font-size: .92rem; white-space: pre-line; }
.alert-error { background: var(--danger-tint); color: var(--danger-ink); border: 1px solid color-mix(in srgb, var(--danger-ink) 30%, transparent); }
.alert-ok { background: var(--lime-tint); color: var(--lime-ink); border: 1px solid var(--lime-line); }
.alert-info { background: var(--blue-tint); color: var(--blue-ink); border: 1px solid color-mix(in srgb, var(--blue-ink) 30%, transparent); }
.alert-warn { background: var(--cash-tint); color: var(--cash-ink); border: 1px solid var(--cash-line); }
.qr { background: #fff; padding: 12px; border-radius: 16px; width: 200px; margin: 6px auto; box-shadow: var(--glow); }
.key { font: 700 1rem/1.4 var(--mono); letter-spacing: .06em; background: var(--raised); border-radius: 12px; padding: 10px 12px; text-align: center; word-break: break-all; }
/* Authenticator steps (design pass 27 Oct): a lime-ringed badge per step, numbered step cards, the QR in a scan frame
   with lime corners, the key in groups of four with Copy, the recovery code as a dashed ticket. */
.auth-badge { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px;
  color: var(--lime-ink); background: var(--lime-tint); box-shadow: 0 0 0 2px var(--lime-line), var(--glow); }
.auth-steps { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 10px; }
.auth-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.auth-steps .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 .95rem/1 var(--mono);
  background: var(--lime); color: var(--on-fill); }
.auth-steps strong { display: block; font-size: .98rem; }
.auth-steps div span { display: block; font-size: .86rem; color: var(--text2); margin-top: 2px; }
.auth-scan { border: 1px solid var(--line); border-radius: 20px; padding: 18px; background: var(--surface); display: grid; gap: 16px;
  justify-items: center; margin: 4px 0 12px; }
.qr-figure { margin: 0; display: grid; justify-items: center; gap: 10px; }
.qr-frame { padding: 10px; line-height: 0;
  --c: var(--lime); --l: 26px; --t: 3px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) top left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l) no-repeat; }
.qr-frame .qr { margin: 0; box-shadow: none; display: block; }
.qr-figure figcaption { font-size: .8rem; font-weight: 700; color: var(--text3); }
.key-row { width: 100%; display: grid; gap: 8px; }
.key-label { font-size: .8rem; font-weight: 700; color: var(--text3); text-align: center; }
.key-box { display: flex; align-items: center; gap: 8px; }
.key-box .key { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; word-break: normal; }
.key-box .key span { white-space: nowrap; }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; }
.ticket { border: 2px dashed var(--lime-line); border-radius: 18px; padding: 18px 16px; background: var(--lime-tint); display: grid; gap: 10px;
  justify-items: center; margin: 18px 0; }
.ticket-label { font: 700 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lime-ink); }
.ticket-code { font: 700 1.7rem/1.2 var(--mono); letter-spacing: .08em; color: var(--text); }
.field-help { display: block; font-size: .82rem; color: var(--text3); margin-top: 6px; }
.touch-only { display: none; }
@media (hover: none) and (pointer: coarse) { .touch-only { display: flex; align-items: center; justify-content: center; gap: 8px; } }
.divider { display: flex; align-items: center; gap: 12px; color: var(--text3); font-size: .85rem; margin: 6px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ======== The app in the browser ======== */
.app-shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.app-side {
    position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line2); padding: 22px 14px;
    display: flex; flex-direction: column; gap: 4px; background: var(--side-bg); overflow-y: auto;
}
.app-side .brand { padding: 4px 10px 18px; font-size: 1.5rem; }
.app-side .brand-mark { height: 26px; }
.app-side .brand-uploaded { height: 28px; }
.side-persona { font: 700 .68rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--text3); padding: 4px 14px 12px; }
.side-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; font-weight: 700; color: var(--text2); }
.side-link svg { width: 20px; height: 20px; flex: none; }
.side-link:hover { background: var(--surface); color: var(--text); }
.side-link.active { background: var(--lime); color: var(--on-fill); font-weight: 800; box-shadow: var(--glow-soft); }
.side-section { font: 700 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text3); padding: 20px 14px 8px; }
.side-foot { margin-top: auto; display: grid; gap: 4px; padding-top: 14px; }
/* The foot (Appearance, you, Sign out) stays in view while the long menu scrolls (5 Nov 2026). */
.side-foot { position: sticky; bottom: -22px; padding-bottom: 8px; background: var(--side-bg); box-shadow: 0 -10px 14px -10px color-mix(in srgb, var(--text) 18%, transparent); }
.side-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.avatar {
    width: 38px; height: 38px; border-radius: 50%; background: var(--raised); display: grid; place-items: center; flex: none;
    font: 800 .9rem/1 var(--body); color: var(--text); overflow: hidden; border: 1px solid var(--line);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 76px; height: 76px; font-size: 1.5rem; }
.avatar.me { background: var(--lime); color: var(--on-fill); border-color: var(--lime); }
.side-user .who { min-width: 0; }
.side-user .who strong { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .who span { font-size: .75rem; color: var(--text3); }

.app-main { min-width: 0; }
.app-top {
    position: sticky; top: 0; z-index: 30; min-height: 74px; display: flex; align-items: center; gap: 14px; padding: 12px var(--gutter);
    background: var(--shade); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line2);
}
.app-top .brand { display: none; font-size: 1.35rem; flex: none; }
/* Phones: the V mark only, so Back and the profile never sit on top of the wordmark. */
@media (max-width: 560px) { .app-top .brand-word { display: none; } }
.app-top .brand-mark { height: 24px; }
.top-search {
    flex: 1 1 280px; max-width: 520px; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line); color: var(--text3); font-weight: 600;
}
.top-search svg { width: 18px; height: 18px; flex: none; }
.top-search:hover { border-color: var(--lime-line); color: var(--text2); }
.app-top .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.top-me { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: .9rem; }
.top-me:hover { border-color: var(--line3); color: var(--text); }
.badge-dot { position: absolute; top: 6px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--lime); color: var(--on-fill); font: 800 .65rem/17px var(--body); text-align: center; box-shadow: 0 0 10px var(--lime); }
.app-content { padding: 36px var(--gutter) 72px; }
.app-tabbar { display: none; }
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-side { display: none; }
    .app-top { padding: 10px 16px; }
    .app-top .brand { display: inline-flex; }
    .top-search, .top-me .name { display: none; }
    .app-content { padding: 22px 16px 110px; }
    .app-tabbar {
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; z-index: 50;
        left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 68px; padding: 6px;
        border-radius: 24px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 16px 40px -12px rgba(0,0,0,.6);
    }
    .app-tabbar a { display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 18px; color: var(--text3); font: 700 .66rem/1 var(--body); }
    .app-tabbar a svg { width: 22px; height: 22px; }
    .app-tabbar a.active { background: var(--lime); color: var(--on-fill); box-shadow: var(--glow-soft); }
    /* Players: the app's bar (PlayerTabBar, 30 Oct 2026). 66px high, the open tab a 44px lime pill with icon and name,
       the others 44px icons; names stay for screen readers. */
    .app-tabbar.is-pill { display: flex; align-items: center; height: 66px; padding: 0 10px; border: 2px solid var(--line); border-radius: 22px; background: var(--surface); }
    .app-tabbar.is-pill a { flex: 1 1 0; height: 44px; min-width: 44px; border-radius: 14px; }
    .app-tabbar.is-pill a:not(.active) .tab-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .app-tabbar.is-pill a.active { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font: 800 .875rem/1 var(--body); box-shadow: none; }
    .app-tabbar.is-pill a.active svg { width: 20px; height: 20px; }
}
/* Small phones (320 px): the header buttons and the six tabs fit without sideways scrolling (27 Oct 2026). */
@media (max-width: 360px) {
    .app-top { padding: 10px 10px; gap: 8px; }
    .app-top .actions { gap: 4px; }
    .app-tabbar { grid-auto-columns: minmax(0, 1fr); left: 8px; right: 8px; padding: 4px; }
    .app-tabbar a { font-size: .6rem; overflow-wrap: anywhere; text-align: center; }
}

.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; }
/* Floodlight 2 page titles: bold mixed case ("Find your playing ground."), as in the handoff; the display face stays
   for heroes. */
.page-title h1 { font: 800 clamp(1.8rem, 3vw, 2.4rem)/1.15 var(--body); letter-spacing: -.02em; text-transform: none; margin: 8px 0 0; }
.page-title .sub { color: var(--text2); font-weight: 600; margin-top: 10px; font-size: 1.02rem; }
.back-link { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--text3); font-size: .9rem; margin-bottom: 8px; }
.back-link:hover { color: var(--text); }
/* Player pages on a phone: filter chips scroll in one row and the page intro is shorter, so the first result shows on
   the first screen (Codex design review, 10 Nov 2026: Find, Games and Classes spent the screen on filters). */
@media (max-width: 760px) {
    body:not(.desk) .app-content .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    body:not(.desk) .app-content .chips > * { flex-shrink: 0; }
    body:not(.desk) .app-content .page-title .sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* One back on a phone: a page with its own named back link drops the header's arrow (Codex design review, 10 Nov 2026). */
@media (max-width: 760px) { body:has(.app-content .back-link) .icon-btn[data-back] { display: none; } }

.grid { display: grid; gap: 18px; }
.grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A column never grows past the screen because of something wide inside it (a phone showed the court page 530 px wide). */
.grid-2 > * { min-width: 0; }
/* As many columns as fit: 1 on a phone, 3 on a laptop, 4-5 on a big screen. */
.grid-3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.grid-4 { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: none; }
.panel h3 { margin: 0 0 4px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel-head h3, .panel-head h2 { margin: 0; }
.panel-head h2 { font-size: 1.6rem; }
/* Floodlight 2: section labels read as small headings ("1 · Day", "Pitches"), not tiny mono capitals. */
.section-label { font: 800 1.02rem/1.2 var(--body); letter-spacing: -.005em; text-transform: none; color: var(--text); margin: 30px 0 14px; display: flex; align-items: center; gap: .6em; }
.section-label::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--lime); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); }
.stat .label { font: 700 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); }
.stat .value { font: 400 2.6rem/1 var(--display); margin-top: 12px; letter-spacing: .02em; }
.stat.hl { background: radial-gradient(90% 100% at 100% 0%, var(--lime-tint), transparent 70%), var(--surface); border-color: var(--lime-line); box-shadow: var(--glow); }
.stat.hl .label { color: var(--lime-ink); }
.stat.hl .value { color: var(--lime-ink); }

.list { display: grid; gap: 10px; }
.item { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
a.item { transition: border-color .15s ease, box-shadow .15s ease; }
a.item:hover { border-color: var(--lime-line); color: inherit; box-shadow: var(--glow); }
.item .main { flex: 1; min-width: 0; }
.item .title { font-weight: 800; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .meta { font-size: .87rem; color: var(--text2); font-weight: 600; }
/* Long emails and names wrap instead of pushing a phone page sideways (29 Oct 2026). */
.list > * { min-width: 0; }
.item .meta { overflow-wrap: anywhere; }
.item .end { text-align: right; flex: none; }
/* Your authenticators (27 Oct): Remove opens a password box under the phone, across the whole row. */
.auth-phone { flex-wrap: wrap; }
.auth-phone:has(details[open]) .end { flex-basis: 100%; text-align: left; }
.remove-phone summary { list-style: none; cursor: pointer; display: inline-flex; }
.remove-phone summary::-webkit-details-marker { display: none; }
.remove-phone .when-open, .remove-phone[open] .when-closed { display: none; }
.remove-phone[open] .when-open { display: inline; }
.remove-phone[open] summary { margin-bottom: 8px; }
.remove-form { display: grid; gap: 8px; margin-top: 4px; padding: 14px; border-radius: 14px; border: 1px solid var(--danger); background: var(--danger-tint); }
.remove-form label { font-weight: 700; font-size: .85rem; }
.remove-form .btn { justify-self: start; }
.time-block { flex: none; width: 66px; text-align: center; border-radius: 14px; background: var(--raised); border: 1px solid var(--line); padding: 9px 4px; }
.time-block .d { font: 400 1.7rem/1 var(--display); }
.time-block .m { font: 700 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text3); margin-top: 4px; }

.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line);
    font: 800 .75rem/1 var(--body); color: var(--text2); background: var(--raised); white-space: nowrap;
}
.chip.lime { background: var(--lime-tint); color: var(--lime-ink); border-color: transparent; }
.chip.blue { background: var(--blue-tint); color: var(--blue-ink); border-color: transparent; }
.chip.cash { background: var(--cash-tint); color: var(--cash-ink); border-color: transparent; }
.chip.violet { background: var(--violet-tint); color: var(--violet-ink); border-color: transparent; }
.chip.danger { background: var(--danger-tint); color: var(--danger-ink); border-color: transparent; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
a.chip, summary.chip { padding: 10px 16px; font-size: .85rem; }
a.chip:hover, summary.chip:hover { border-color: var(--line3); color: var(--text); }
a.chip.on, summary.chip.on { background: var(--lime); color: var(--on-fill); border-color: var(--lime); box-shadow: var(--glow-soft); }
/* A chip that opens its own small form, like the Custom period (7 Nov 2026): no triangle, same look as the link chips. */
summary.chip { list-style: none; cursor: pointer; }
summary.chip::-webkit-details-marker { display: none; }

/* The player picker when it may only pick, never create (offers to one player, 7 Nov 2026). */
.pp-pick-only [data-pp-create], .pp-pick-only [data-pp-new] { display: none !important; }

/* Sortable table headers (Players, 7 Nov 2026): the whole heading is the link; an arrow shows the current column. */
.th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.th-sort:hover { color: var(--text); text-decoration: underline; }
.th-sort.on { color: var(--text); }
.th-arrow { font-size: .6rem; min-width: .8em; }

/* Light formatting box (Pages/Shared/_LightTextArea, 7 Nov 2026): one frame like an input, a quiet toolbar on top, the
   text below. Any language, grows as you type, drag the corner to resize. */
.lt-box { border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); overflow: hidden; }
.lt-box:focus-within { border-color: var(--lime-line); box-shadow: 0 0 0 3px var(--lime-tint), var(--glow-soft); }
.lt-tools { display: flex; gap: 2px; padding: 6px 8px 0; }
.lt-tools button {
    width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text2); cursor: pointer;
    display: inline-grid; place-items: center; font: 700 .9rem/1 var(--body); padding: 0;
}
.lt-tools button:hover { background: var(--surface); color: var(--text); }
.lt-tools button:focus-visible { outline: 2px solid var(--lime-line); outline-offset: 1px; }
textarea.lt-area {
    display: block; width: 100%; min-height: 264px; max-height: 640px; padding: 8px 14px 12px; border: 0; background: transparent;
    color: var(--text); font: 500 1rem/1.5 var(--body); resize: vertical; overflow: auto;
}
textarea.lt-area:focus { outline: none; }
textarea.lt-area::placeholder { color: var(--text3); }
/* Shown back: each line keeps its own direction, so Arabic and English lines both read correctly. */
.lt-text { display: block; width: 100%; white-space: normal; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; line-height: 1.45; }
.lt-text .lt-first { font-weight: 700; }

.venue-card { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.venue-card:hover { transform: translateY(-3px); border-color: var(--lime-line); color: inherit; box-shadow: var(--glow); }
.venue-card .photo { aspect-ratio: 16/9; background: var(--photo); position: relative; }
.venue-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.venue-card .photo .chip { position: absolute; top: 12px; left: 12px; background: rgba(10,12,16,.65); color: #fff; border-color: rgba(255,255,255,.2); backdrop-filter: blur(8px); }
.venue-card .body { padding: 16px 18px; }
.venue-card .body strong { display: block; font-size: 1.1rem; }
.cover { border-radius: 26px; overflow: hidden; aspect-ratio: 21/8; background: var(--photo); margin-bottom: 22px; border: 1px solid var(--line); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
/* A venue with no photo yet: a floodlit card with the sport, not a flat grey box (Floodlight 2). */
.photo-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(244,242,236,.78); font: 400 1.6rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase;
    background: radial-gradient(70% 90% at 80% 0%, rgba(212,255,58,.22), transparent 60%), linear-gradient(160deg, #18211A 0%, #0B0E12 100%); }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.slots button, .slots .slot-btn {
    min-height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--raised); color: var(--text);
    font: 700 .95rem/1.1 var(--mono); cursor: pointer; display: grid; place-items: center; align-content: center; gap: 3px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.slots button small, .slots .slot-btn small { font: 700 .66rem/1 var(--mono); letter-spacing: .08em; color: var(--cash-ink); }
.slots button:hover, .slots .slot-btn:hover { border-color: var(--lime-line); }
.slots input { position: absolute; opacity: 0; pointer-events: none; }
.slots input:checked + .slot-btn { background: var(--lime); color: var(--on-fill); border-color: var(--lime); box-shadow: var(--glow-soft); }
.slots input:checked + .slot-btn small { color: var(--on-fill); }
.slots .slot-btn.off { opacity: .45; cursor: not-allowed; text-decoration: line-through; border-style: dashed; background: var(--bg2); }

/* position: relative keeps a hidden label (.sr-only) in a wide table inside the scroll box; without it the label sat out at
   the table's far edge and made the whole page scroll sideways (HR pay, 10 Nov 2026). */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
table.table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.table th { text-align: left; font: 700 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); padding: 14px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 14px 16px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--raised); }

.board { overflow-x: auto; border: 1px solid var(--lime-line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--glow); }
.board-grid { display: grid; min-width: 720px; }
.board-cell { border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); min-height: 52px; padding: 6px; font-size: .82rem; position: relative; }
.board-head { font: 700 .74rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text2); background: var(--raised); position: sticky; top: 0; }
.board-time { font: 700 .78rem/1 var(--mono); color: var(--text3); background: var(--raised); }
.board-booking { display: block; border-radius: 10px; padding: 7px 9px; background: var(--lime); color: var(--on-fill); font-weight: 800; height: 100%; box-shadow: var(--glow-soft); }
/* An hour's card is 88px: the name, the status and the desk buttons, each on one line (court board, 15 Oct 2026).
   Nothing shrinks: if a short booking can't hold it all, the bottom is cut, never the name at the top. */
.board-booking { display: flex; flex-direction: column; gap: 3px; overflow: hidden; padding: 6px 9px; line-height: 1.2; }
.board-booking > * { flex-shrink: 0; }
.board-booking-who, .board-booking-state { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-booking-who { font-weight: 800; color: inherit; }
.board-booking-state { font-weight: 600; font-size: .78rem; }
.board-booking-actions { display: flex; gap: 4px; margin-top: auto; }
.board .board-booking-actions .btn { min-height: 32px; padding: 0 10px; font-size: .76rem; }
.board-booking.cash { background: var(--cash-tint); color: var(--text); border: 1px solid var(--cash-line); box-shadow: none; }
.board-booking.blocked { background: var(--danger-tint); color: var(--danger-ink); box-shadow: none; }
.board-booking.blue { background: var(--blue-tint); color: var(--blue-ink); box-shadow: none; }
/* Finished bookings step back in colour, not in contrast: a faded (opacity) card failed WCAG contrast (25 Oct 2026). */
.board-booking.finished { background: var(--raised); color: var(--text2); border: 1px dashed var(--line3); box-shadow: none; }
/* Drag-to-book on the Court Board (3 Nov 2026, js/board-drag.js). Each court column is a lane: bookings, closed
   and blocked times sit at their exact minute; a drag shows a dashed box that grows by the court's step. Hour rows,
   with a faint dashed line at the half hour. */
/* The whole day (00:00-24:00) scrolls inside the board, so the court names stay on top while scrolling. */
.board:has(.board-lane) { max-height: max(420px, calc(100vh - 170px)); max-height: max(420px, calc(100dvh - 170px)); overflow: auto; overscroll-behavior: contain; }
.board:has(.board-lane) .board-head { z-index: 6; }
.board-tip { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--text2); font-size: .92rem; }
.board-tip svg { flex-shrink: 0; color: var(--blue-ink); }
.board-cell.board-half { border-bottom-style: dashed; border-bottom-color: var(--line2); }
.board-cell.board-half:not(.board-time) { border-bottom-color: color-mix(in srgb, var(--line2) 55%, transparent); }
.board-lane { position: relative; z-index: 1; cursor: cell; user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y; }
.board-lane.team-lane { cursor: default; }
/* A long shift keeps its label in sight while the day scrolls (clip, not hidden, so sticky still works). */
.team-lane .board-booking { overflow: clip; }
.team-lane .board-booking-who { position: sticky; top: 52px; }
.team-lane .board-booking-state { position: sticky; top: 70px; }
.board-booking.violet { background: var(--violet-tint); color: var(--violet-ink); box-shadow: none; }
.board-slot { position: absolute; left: 0; right: 0; padding: 3px; z-index: 3; cursor: default; }
.board-closed, .board-blocked, .board-past { position: absolute; left: 0; right: 0; pointer-events: none; }
.board-closed { z-index: 1; background: repeating-linear-gradient(135deg, var(--raised) 0 8px, color-mix(in srgb, var(--raised) 70%, var(--line2)) 8px 16px); opacity: .9; }
.board-blocked { z-index: 2; background: repeating-linear-gradient(135deg, var(--danger-tint) 0 8px, transparent 8px 16px); border-top: 2px solid var(--danger-ink); }
.board-past { z-index: 1; background: color-mix(in srgb, var(--bg) 45%, transparent); }
/* The current time across every court (5 Nov 2026); the first column carries the word. */
.board-now { position: absolute; left: 0; right: 0; z-index: 5; height: 0; border-top: 2px solid var(--danger-ink); pointer-events: none; font: 700 .68rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--danger-ink); padding-left: 4px; }

.board-closed span, .board-blocked span { position: sticky; top: 52px; display: inline-block; margin: 6px 8px; font: 700 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text3); }
.board-blocked span { color: var(--danger-ink); }
.board-ghost { position: absolute; left: 4px; right: 4px; z-index: 4; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-start; gap: 2px;
  padding: 5px 9px; border: 2px dashed var(--blue-ink); border-radius: 10px; background: var(--blue-tint); color: var(--blue-ink); font-weight: 800; font-size: .82rem; line-height: 1.2; overflow: hidden; }
.board-ghost small { font-weight: 700; font-size: .74rem; }
.board-ghost.overtime { border-color: var(--cash-ink); background: var(--cash-tint); color: var(--cash-ink); }
.board-chip-closed { background: var(--raised); color: var(--text2); }
.board-chip-blocked { background: var(--danger-tint); color: var(--danger-ink); }
.drag-book .form { display: grid; gap: 14px; }
.drag-when { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }
.drag-book .drag-when .btn { min-width: 48px; min-height: 48px; padding: 0; justify-content: center; }
.drag-book .drag-when .btn svg { flex-shrink: 0; width: 20px; height: 20px; }
.drag-when-text { display: grid; gap: 2px; text-align: center; }
.drag-when-text strong { font-size: 1.3rem; font-family: var(--mono); }
.drag-when-text span { color: var(--text2); font-weight: 600; }
.drag-when-text .drag-price { color: var(--text); font-weight: 800; }
.drag-overtime { margin: 0; }
@media (prefers-reduced-motion: no-preference) { .board-ghost { transition: height .08s ease-out, top .08s ease-out; } }

.empty { text-align: center; padding: 56px 18px; border: 1px dashed var(--line3); border-radius: var(--radius); color: var(--text2); background: var(--surface); }
.empty h3 { color: var(--text); font: 800 1.35rem/1.2 var(--body); letter-spacing: -.01em; text-transform: none; margin-bottom: 10px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; font-size: .96rem; }
.kv dt { color: var(--text3); font-weight: 600; }
.kv dd { margin: 0; font-weight: 700; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.toolbar .input { min-height: 46px; width: auto; flex: 1 1 200px; }
.tabs { display: flex; gap: 8px; margin-bottom: 22px; overflow-x: auto; padding-bottom: 2px; }
.tabs a { padding: 10px 18px; font-weight: 700; color: var(--text2); border: 1px solid var(--line); border-radius: 999px; background: var(--raised); white-space: nowrap; }
.tabs a:hover { color: var(--text); border-color: var(--line3); }
.tabs a.active { color: var(--on-fill); background: var(--lime); border-color: var(--lime); box-shadow: var(--glow-soft); }
details.more > summary { cursor: pointer; font-weight: 700; color: var(--text2); list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
.bar { height: 8px; border-radius: 999px; background: var(--bg2); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--lime); border-radius: inherit; box-shadow: 0 0 12px rgba(212,255,58,.5); }
.spark { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
.spark span { flex: 1; background: var(--lime-tint); border-radius: 8px 8px 3px 3px; min-height: 2px; position: relative; }
.spark span:last-child { background: var(--lime); box-shadow: var(--glow-soft); }
.spark span:hover { background: var(--lime); }
.spark span:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px); background: var(--text); color: var(--bg); font: 700 .7rem/1 var(--mono); padding: 5px 7px; border-radius: 6px; white-space: nowrap; }
.app-download { display: flex; gap: 10px; flex-wrap: wrap; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 14px; background: var(--text); color: var(--bg); font-weight: 800; }
.store-badge:hover { color: var(--bg); opacity: .9; }
.store-badge small { display: block; font: 600 .66rem/1 var(--body); opacity: .75; }
.store-badge svg { width: 22px; height: 22px; }

/* ======== The venue desk: simple for every age ========
   Owner and staff pages read bigger and press bigger: 17px text, tall buttons that always carry words. */
body.desk { font-size: 17px; }
body.desk p, body.desk .item .meta, body.desk .page-title .sub { font-size: 1.02rem; }
body.desk .btn { min-height: 56px; padding: 0 26px; font-size: 1.02rem; }
body.desk .btn-sm { min-height: 46px; padding: 0 20px; font-size: .95rem; }
body.desk .btn-lg { min-height: 62px; font-size: 1.1rem; }
body.desk .side-link { font-size: 1.02rem; padding: 13px 14px; }
body.desk .input, body.desk select.input { min-height: 56px; font-size: 1.05rem; }
body.desk .table { font-size: 1rem; }
body.desk .item .title { font-size: 1.05rem; }

/* Help guide (Pages/Shared/_HelpGuide): the header's 44px Help button opens it. */
.help-guide { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--text); }
.help-guide::backdrop { background: rgba(5, 6, 8, .62); }
.help-guide__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.help-guide__head h2 { margin: 0; font-size: 1.35rem; }
.help-audience { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.help-audience .btn { min-height: 44px; }
.help-guides { display: grid; gap: 16px; }
.help-guides section { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.help-guides h3 { margin: 0 0 4px; font-size: 1rem; }
.help-guides p { margin: 0 0 8px; color: var(--text2); }
.help-step { font: 700 .95rem/1 var(--mono, monospace); color: var(--lime-ink, var(--lime)); padding-top: 3px; }
.help-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--text); }
.help-link svg { width: 14px; height: 14px; }
.help-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; color: var(--text2); }

/* ===== Floodlight 2 — player Home and owner Today (13 Oct), after the design handoff's player/desk screens ===== */
.fl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.fl-eyebrow { display: block; font: 800 .68rem/1.2 var(--body, inherit); letter-spacing: .2em; text-transform: uppercase; color: var(--text3); margin-bottom: 10px; }
.fl-title { font: 800 clamp(1.8rem, 3vw, 2.4rem)/1.15 var(--body); letter-spacing: -.02em; text-transform: none; margin: 0; }
.fl-lead { color: var(--text2); margin: 8px 0 0; font-weight: 600; }
.fl-display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1.02; letter-spacing: .01em; }
.fl-row { display: flex; align-items: center; gap: 12px; }
.fl-between { justify-content: space-between; }
.fl-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; color: var(--text); white-space: nowrap; }
.fl-link svg { width: 16px; height: 16px; }
.fl-link:hover { color: var(--lime-ink); }
.fl-section { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 40px 0 16px; }
.fl-section h2 { margin: 0; font: 800 1.4rem/1.2 var(--body); letter-spacing: -.01em; text-transform: none; }
.fl-section p { margin: 4px 0 0; }
.fl-cash { color: var(--cash-ink); font-weight: 700; }
.fl-cash svg { width: 16px; height: 16px; }

/* Player hero: a sport photo, darkened from the left so the words stay readable on any picture. */
.fl-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
.fl-hero { position: relative; overflow: hidden; isolation: isolate; min-height: 360px; border-radius: var(--radius); padding: 32px; display: flex; align-items: flex-end; color: #fff; background: #142520 center 55% / cover no-repeat; }
.fl-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,16,18,.92) 0%, rgba(7,16,19,.66) 46%, rgba(7,16,19,.08) 100%); }
.fl-hero .fl-on-photo { color: #D4FF3A; }
.fl-hero h2 { font-size: clamp(2.8rem, 5vw, 4.6rem); margin: 0 0 16px; color: #fff; }
.fl-hero h2 span { color: #D4FF3A; }
.fl-hero p { max-width: 300px; color: #E0E7E4; margin: 0 0 20px; font-weight: 600; }
.fl-hero .btn-primary { background: #D4FF3A; border-color: #D4FF3A; color: #10140A; }

/* Your next game: a lime edge along the top, the time big. */
.fl-next { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.fl-next::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: var(--lime); }
.fl-next-time { font: 800 2.9rem/1 var(--body); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fl-next-time small { font: 600 .8rem/1 var(--body, inherit); letter-spacing: .08em; color: var(--text3); }
.fl-next h3 { margin: 0; font-size: 1.2rem; }
.fl-next p { margin: 4px 0 0; color: var(--text2); font-size: .9rem; }
.fl-next .btn { margin-top: auto; justify-content: center; }
.fl-avatars { display: flex; padding-left: 6px; }
.fl-avatar { width: 36px; height: 36px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--surface); background: var(--raised); color: var(--text2); display: inline-grid; place-items: center; overflow: hidden; font: 800 .7rem/1 var(--body, inherit); }
.fl-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Pick your sport */
.fl-sports { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.fl-sport { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 150px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); transition: border-color .15s, transform .15s; }
.fl-sport:hover { border-color: var(--lime-line); transform: translateY(-2px); color: var(--text); }
.fl-sport-dot { width: 14px; height: 14px; border-radius: 50%; }
.fl-sport-go { position: absolute; right: 14px; bottom: 12px; color: var(--text3); }
.fl-sport-go svg { width: 14px; height: 14px; }

/* Open games */
.fl-game { display: block; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); transition: border-color .15s, transform .15s; }
.fl-game:hover { border-color: var(--lime-line); transform: translateY(-2px); color: var(--text); }
.fl-game h3 { margin: 16px 0 6px; font-size: 1.2rem; }
.fl-game p { margin: 0; color: var(--text2); font-size: .9rem; }
.fl-game-bottom { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Owner: the day in one strip */
.fl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 28px; overflow: hidden; }
.fl-stat { display: block; padding: 22px 24px; border-right: 1px solid var(--line); color: var(--text); }
.fl-stat:last-child { border-right: 0; }
.fl-stat span { display: block; font: 800 .66rem/1.2 var(--body, inherit); letter-spacing: .16em; text-transform: uppercase; color: var(--text3); }
.fl-stat strong { display: block; font-size: 2rem; letter-spacing: -.03em; line-height: 1.2; margin: 10px 0 4px; }
.fl-stat strong em { font-style: normal; font-size: 1.1rem; color: var(--text3); }
.fl-stat small { color: var(--text2); font-weight: 600; }
a.fl-stat:hover { background: var(--raised); color: var(--text); }
.fl-stat-cash { background: var(--cash-tint); }
.fl-stat-cash strong { color: var(--cash-ink); }
.fl-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
/* The player page (7 Nov 2026, owner: "increase the horizontal length"): the details, account, tags and follow-up panels
   on the right get a wider column, up to 460px, so the forms don't wrap every word. */
.fl-split-wide { grid-template-columns: minmax(0, 1fr) clamp(460px, 40%, 560px); }
.fl-panel-cash { border-color: var(--cash-line); }
.fl-card { display: block; color: var(--text); transition: border-color .15s, transform .15s; }
.fl-card:hover { border-color: var(--lime-line); transform: translateY(-2px); color: var(--text); }
.fl-card h3 { margin: 16px 0 6px; }
.fl-iconbox { width: 44px; height: 44px; border-radius: 12px; background: var(--raised); display: grid; place-items: center; color: var(--lime-ink); }
.fl-iconbox svg { width: 20px; height: 20px; }

@media (max-width: 1100px) {
    .fl-hero-grid, .fl-split { grid-template-columns: 1fr; }
    .fl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fl-stat:nth-child(2) { border-right: 0; }
    .fl-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) { .fl-sports { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .fl-hero { min-height: 300px; padding: 24px; }
    .fl-stats { grid-template-columns: 1fr; }
    .fl-stat { border-right: 0; border-bottom: 1px solid var(--line); }
    .fl-stat:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .fl-sport, .fl-game, .fl-card { transition: none; } .fl-sport:hover, .fl-game:hover, .fl-card:hover { transform: none; } }

/* Floodlight 2 frame (13 Oct): the full logo, a workspace pill, grouped links, and the active link as a lime-tinted
   pill rather than a solid lime block. */
.side-logo { display: block; padding: 6px 10px 18px; }
.side-logo img { display: block; width: 100%; max-width: 168px; height: auto; }
.side-persona { display: flex; align-items: center; gap: 10px; margin: 0 4px 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font: 800 .82rem/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--text); }
.side-persona svg { width: 16px; height: 16px; color: var(--lime-ink); }
.side-section { font: 800 .64rem/1 var(--body); letter-spacing: .2em; padding: 22px 14px 8px; }
.side-link { min-height: 44px; padding: 10px 14px; border-radius: 12px; font-size: .9rem; border: 1px solid transparent; }
.side-link svg { width: 18px; height: 18px; }
.side-link.active { background: var(--lime-tint); color: var(--lime-ink); border-color: var(--lime-line); box-shadow: none; font-weight: 800; }
/* A door code stays beside its venue however long the name: the name wraps, the code doesn't move. */
.fl-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 10px; }
.fl-code-row .key { white-space: nowrap; }

/* ===== Floodlight 2 — public home (13 Oct), after the handoff's "Less scroll. More sport." ===== */
/* The hero fills the screen width: the campaign pictures behind, a dark shade from the left, the headline on top.
   It stays the brand's dark floodlit look in either theme. */
.fp-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; color: #F4F2EC;
    min-height: clamp(560px, calc(100vw / var(--fp-ratio, 2.4)), 92vh); background: #0A0C10; }
.fp-stage, .fp-shade { position: absolute; inset: 0; }
.fp-stage { z-index: -2; }
.fp-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.fp-slide.is-on { opacity: 1; z-index: 1; }
/* Each picture fills the hero edge to edge (owner, 15 Oct: it sat in the middle with blurred bands around it). The
   hero takes the tallest slide's shape (--fp-ratio, set by site.js) within 560px and 92vh, so a banner shows whole on
   most screens; when the hero has to be taller or shorter than the picture, the left side or the top and bottom give
   way, never the players and logo on the right (owner, 13 Oct: the right side was cut off once). The blurred copy
   underneath is only seen while a picture loads. */
.fp-slide a { position: absolute; inset: 0; display: block; }
.fp-slide .fp-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.fp-slide .fp-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    filter: blur(28px) brightness(.5) saturate(1.1); transform: scale(1.15); }
.fp-slide.is-on .fp-pic { animation: fp-zoom 9s ease-out both; }
@keyframes fp-zoom { from { transform: scale(1.05); } to { transform: scale(1); } }
/* The bundled athletes banner elsewhere (player Home, Premium, sign-in) is cropped by its frame: keep its right side. */
img[src$="/img/campaign/vukron-athletes.jpg"]:not(.fp-pic):not(.fp-fill) { object-position: right center; }
.fp-shade { z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgba(8,10,12,.92) 0%, rgba(8,10,12,.72) 38%, rgba(8,10,12,.18) 72%, rgba(8,10,12,.05) 100%),
                linear-gradient(0deg, rgba(8,10,12,.85) 0%, transparent 42%),
                radial-gradient(70% 60% at 0% 100%, rgba(212,255,58,.10), transparent 70%); }
.fp-hero-inner { position: relative; padding: 120px 0 44px; display: grid; gap: 40px; pointer-events: none; }
.fp-hero-inner > * { pointer-events: auto; }
.fp-hero-text { max-width: 760px; }
.fp-hero h1 { font-size: clamp(3.2rem, 8vw, 8.4rem); line-height: .9; margin: 14px 0 24px; color: #F4F2EC; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.fp-hero p { max-width: 520px; color: #DDE2D8; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.65; margin: 0 0 30px; font-weight: 600; }
.fp-hero .btn-primary { background: #D4FF3A; border-color: #D4FF3A; color: #10140A; }
.fp-ghost { background: transparent; color: inherit; border-color: rgba(244,242,236,.28); }
.fp-hero .fp-ghost { background: rgba(10,12,16,.35); border-color: rgba(244,242,236,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fp-hero .fp-ghost:hover { border-color: #D4FF3A; color: #F4F2EC; }
/* Progress: a thin bar for each picture; the current one fills while it shows. No count, arrows or pause (owner, 13 Oct). */
.fp-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(244,242,236,.16); }
.fp-bars { display: flex; gap: 8px; flex: 1 1 220px; min-width: 0; }
.fp-bar { flex: 1; max-width: 120px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.fp-bar span { position: relative; display: block; width: 100%; height: 4px; border-radius: 4px; background: rgba(244,242,236,.28); overflow: hidden; }
.fp-bar span::after { content: ""; position: absolute; inset: 0; background: #D4FF3A; transform: scaleX(0); transform-origin: left; }
.fp-bar.is-done span::after { transform: scaleX(1); }
.fp-bar.is-on span::after { transform: scaleX(1); }
.fp-hero.is-playing .fp-bar.is-on span::after { animation: fp-fill var(--fp-interval, 7s) linear both; }
@keyframes fp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fp-bar:focus-visible { outline: 3px solid #D4FF3A; outline-offset: 2px; border-radius: 6px; }

/* Sport tiles (owner, 13 Oct), home "What moves you?" and player Home "Pick your sport": a roomy card with the
   sport's icon in a soft badge at the top, the name and a short line at the bottom, and a round arrow that lights
   up lime. A faint glow in the sport's own colour (Admin › Categories) sits in the corner. Without a picture the
   tile keeps the plain surface; with one (Tile picture) the picture fills it under a dark shade and text turns light. */
.sport-tile { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto;
    gap: 0; min-height: 200px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; color: var(--text);
    background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--sport, #D4FF3A) 16%, transparent), transparent 55%), var(--surface);
    transition: border-color .2s, transform .2s, box-shadow .2s; }
.sport-tile:hover { color: var(--text); border-color: color-mix(in srgb, var(--sport, #D4FF3A) 55%, var(--line));
    transform: translateY(-3px); box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--sport, #D4FF3A) 60%, transparent); }
.sport-tile:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; }
.tile-badge { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
    background: color-mix(in srgb, var(--sport, #D4FF3A) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--sport, #D4FF3A) 30%, var(--line)); }
.tile-badge .sport-icon { width: 28px; height: 28px; }
.tile-badge .sport-dot { width: 16px !important; height: 16px !important; }
.tile-text { grid-row: 3; display: grid; gap: 4px; padding-right: 52px; }
.tile-text strong { font: 800 1.3rem/1.15 var(--body); letter-spacing: -.01em; }
.tile-sub { font-size: .85rem; font-weight: 600; color: var(--text3); }
.tile-go { position: absolute; right: 18px; bottom: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--line); color: var(--text2); background: var(--surface); transition: background .2s, color .2s, border-color .2s, transform .2s; }
.tile-go svg { width: 16px; height: 16px; }
.sport-tile:hover .tile-go { background: var(--lime); border-color: var(--lime); color: var(--on-fill); transform: translateX(2px); }
.sport-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(0deg, rgba(8,10,12,.9) 0%, rgba(8,10,12,.45) 55%, rgba(8,10,12,.15) 100%); }
.has-photo, .has-photo:hover { color: #F4F2EC; }
.has-photo .tile-sub { color: #C9CFC4; }
.has-photo .tile-badge { background: rgba(10,12,16,.45); border-color: rgba(244,242,236,.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.has-photo .tile-badge img.icon-dark { display: none !important; }
.has-photo .tile-badge img.icon-light { display: block !important; }
.has-photo .tile-go { background: rgba(10,12,16,.45); border-color: rgba(244,242,236,.25); color: #F4F2EC; }
.has-photo:hover .sport-photo { transform: scale(1.06); }
.fl-sports { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
@media (max-width: 560px) { .fl-sports { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .sport-tile { min-height: 170px; padding: 16px; border-radius: 18px; } .tile-text strong { font-size: 1.1rem; } .tile-text { padding-right: 0; }
    .tile-go { display: none; } }
@media (prefers-reduced-motion: reduce) { .sport-tile, .sport-photo, .tile-go { transition: none; } .sport-tile:hover, .has-photo:hover .sport-photo, .sport-tile:hover .tile-go { transform: none; } }


@media (max-width: 980px) {
    /* Phones, tablets and narrow windows (owner, 13 Oct): the picture sits on top at full width in its own shape
       (the stage takes the tallest slide's shape, set by site.js), so it is as big as the screen allows and never
       cropped; the headline and buttons follow below it instead of covering it. */
    .fp-hero { display: flex; flex-direction: column; min-height: 0; }
    .fp-stage { position: relative; inset: auto; z-index: 0; width: 100%; aspect-ratio: var(--fp-ratio, 16 / 9); }
    .fp-shade { display: none; }
    .fp-slide .fp-pic { top: 0; translate: none; height: 100%; max-height: none; -webkit-mask-image: none; mask-image: none; }
    .fp-hero-inner { padding: 26px 0 30px; gap: 26px; }
    .fp-hero h1 { margin-top: 10px; }
}
@media (max-width: 560px) {
    .fp-hero-inner { padding: 22px 0 26px; gap: 22px; }
    .fp-bar { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .fp-slide { transition: none; } .fp-slide.is-on .fp-pic { animation: none; } }
/* Narrow phones: the header keeps the V mark and its buttons; the wordmark would be cut off beside them. */
@media (max-width: 430px) { #site-header .brand-word { display: none; } }
/* Time slots keep their native radio hidden; the label shows where the keyboard is. */
.slots .slot-btn:has(input:focus-visible) { outline: 3px solid var(--blue-ink); outline-offset: 2px; }
/* ===== Floodlight 2 — Find (13 Oct) ===== */
.sport-icon { width: 18px; height: 18px; flex: none; }
.sport-dot { display: inline-block; border-radius: 50%; flex: none; }
.fd-search { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 18px; }
.fd-field { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; font-weight: 800; font-size: .82rem; }
.fd-field .input { min-height: 48px; }
.fd-search .btn { min-height: 48px; }
.fd-sports { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: thin; }
.fd-sport { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-weight: 700; white-space: nowrap; flex: none; }
.fd-sport svg { width: 18px; height: 18px; }
.fd-sport:hover { border-color: var(--lime-line); color: var(--text); }
.fd-sport.on { background: var(--lime-tint); border-color: var(--lime-line); color: var(--lime-ink); }
.fd-card-wrap { position: relative; }
.fd-fav { position: absolute; top: 10px; right: 10px; }
.fd-rating { font-weight: 800; white-space: nowrap; }
.fd-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.fd-card-foot strong { display: inline; font-size: 1.05rem; }
/* Find › Businesses and the game row (2 Nov 2026) */
.fd-games { align-items: center; }
.fd-games-label { font-weight: 800; white-space: nowrap; flex: none; padding-right: 4px; }
.fd-biz-strip { margin: 6px 0 4px; }
.fd-biz-strip .eyebrow { margin: 0 0 10px; }
.fd-biz-line { margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-card .biz-photo { aspect-ratio: 21/9; }
.biz-body { display: flex; gap: 14px; align-items: flex-start; }
.biz-logo { width: 52px; height: 52px; border-radius: 14px; background: var(--lime); color: var(--on-fill); border-color: transparent; font-size: 1.2rem; }
.biz-text { flex: 1; min-width: 0; }
.biz-text strong { overflow-wrap: anywhere; }
.biz-card .body strong.biz-price { display: inline; font-size: 1rem; }
.biz-meta { font-weight: 700; color: var(--text2); margin: 2px 0; }

/* The top bar on narrow screens: your initials without the name, so Back, you and the three actions fit. */
@media (max-width: 760px) { .top-me .name { display: none; } .top-me { padding: 4px; } }
/* A venue with no photos: a shorter floodlit band instead of a tall empty frame. */
.cover.is-empty { aspect-ratio: auto !important; height: 180px; } /* beats a page's inline proportions */
.vn-choose { flex: none; margin-left: 8px; }
@media (max-width: 640px) { .vn-choose { display: none; } }


/* ===== $10K pass on the signed-in pages (14 Oct): the public site's calmer voice ===== */
/* Small context labels and the sidebar's group names: quiet sentence case, not tracked capitals. */
.eyebrow, .fl-eyebrow { font: 700 .95rem/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--text3); }
.eyebrow::before { display: none; }
.side-section { font: 700 .8rem/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--text3); padding: 20px 14px 8px; }
/* Headings that moved from h3 to h2 for the right outline keep the size they had. */
.empty h2 { color: var(--text); font: 800 1.35rem/1.2 var(--body); letter-spacing: -.01em; margin: 0 0 10px; }
h2.h3 { font-size: 1.15rem; font-weight: 800; margin: 0; }
/* Links inside running text are underlined as well as lime (WCAG 1.4.1). */
p a.lime, .small a.lime, .sub a.lime, .muted a.lime { text-decoration: underline; text-underline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.board:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; }
/* A venue without photos shows its sport's picture, dimmed and marked, never passed off as the place. */
.photo .photo-sport, .cover .photo-sport { filter: saturate(.85) brightness(.72); }
.photo-note { position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 5px 10px; border-radius: 999px; font: 700 .72rem/1 var(--body);
    color: #F4F2EC; background: rgba(10,12,16,.62); border: 1px solid rgba(244,242,236,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cover { position: relative; }
.venue-card .photo > img, .cover > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Pages set their two columns' proportions inline (e.g. 1.5fr 1fr); on phones and narrow tablets that squeezed the
   main column (court names cut to "7-a…" on a venue page). Below 900px every two-column layout stacks. */
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr !important; } }
/* Phones: a list row's name may take two lines, and the price sits over its "Next 13:00" chip rather than beside it,
   so a court's name is never cut to "7-a-si…". */
@media (max-width: 640px) {
    .item .title { white-space: normal; overflow-wrap: anywhere; }
    .item .end .chip { display: flex; width: max-content; margin-left: auto; }
}
.alert a { text-decoration: underline; text-underline-offset: 3px; }
/* Data labels read as words, not tracked capitals: stat tiles, table headers, the Court Board's court names, time
   captions. Owners asked for the desk to be simple for every age; sentence case is easier to read at a glance. */
.stat .label, .fl-stat span, .time-block .m { font: 700 .8rem/1.25 var(--body); letter-spacing: 0; text-transform: none; color: var(--text3); }
.table th { font: 700 .82rem/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--text3); }
.board-head { font: 700 .84rem/1.25 var(--body); letter-spacing: 0; text-transform: none; }
/* The player Home hero shows a wide campaign slide in a smaller card: anchor its right side, where the slides carry
   the logo and the athletes, so the logo is never cut; the words sit over the dark left. The card is never wider for
   its height than the slides (2.74:1 banners), so the picture fills it edge to edge and only ever gives way on the
   left (owner, 15 Oct: on wide screens the top of the logo was cut off). */
.fl-hero { background-position: right top; aspect-ratio: 2.74; width: 100%; min-width: 0; }

/* ---------------------------------------------------------------- Coaching (15 Oct 2026) ----------------
   The Coaches page: a floodlit coaching picture (tall on phones, wide elsewhere: a <picture> chooses, so phones get a
   picture composed for them, not a cropped banner), three steps, the player's requests, coach cards with a price
   board and the contact details each coach chose to show. */
/* The card takes the picture's shape (7:3 wide, 4:5 on phones), so the picture fills it and the players are never cut
   (owner, 15 Oct: same as the Home pictures); it only grows past that when the words need more room. */
.coach-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius); min-height: 380px; display: flex; align-items: flex-end; color: #fff; background: #07080B; }
.coach-hero { aspect-ratio: 7 / 3; width: 100%; min-width: 0; }
.coach-hero picture, .coach-hero img { position: absolute; inset: 0; width: 100%; height: 100%; }
.coach-hero img { object-fit: cover; object-position: right center; z-index: -2; }
.coach-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,8,11,.94) 0%, rgba(6,8,11,.72) 42%, rgba(6,8,11,.05) 78%); }
.coach-hero-text { padding: 36px; max-width: 520px; display: flex; flex-direction: column; gap: 14px; }
.coach-hero-text .fl-eyebrow { color: #D4FF3A; margin: 0; }
.coach-hero h1 { font-size: clamp(2.8rem, 5.4vw, 4.8rem); margin: 0; color: #fff; }
.coach-hero h1 span { color: #D4FF3A; }
.coach-hero p { margin: 0; color: #E0E7E4; font-weight: 600; max-width: 42ch; }
.coach-hero .btn-primary { align-self: flex-start; background: #D4FF3A; border-color: #D4FF3A; color: #10140A; }
@media (max-width: 700px) {
    .coach-hero { min-height: 0; aspect-ratio: 4 / 5; }
    .coach-hero img { object-position: center top; }
    .coach-hero::before { background: linear-gradient(0deg, rgba(6,8,11,.96) 0%, rgba(6,8,11,.7) 40%, rgba(6,8,11,0) 72%); }
    .coach-hero-text { padding: 24px 22px; }
}

.coach-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.coach-steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.coach-steps b { font: 400 1.9rem/1 var(--display); color: var(--lime-ink); }
.coach-steps strong { font-size: 1rem; }
.coach-steps span { color: var(--text3); font-size: .9rem; font-weight: 600; }
@media (max-width: 560px) { .coach-steps { grid-template-columns: minmax(0, 1fr); } .coach-steps li { flex-direction: row; align-items: baseline; gap: 12px; flex-wrap: wrap; } }

.coach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
/* Coaches: search and filter panel (27 Oct 2026, ui-ux-pro-max): search, the player's sports as chips, a live count */
.coach-filter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 4px 0 20px; display: grid; gap: 14px; }
.coach-search { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: end; }
.coach-search-label { grid-column: 1 / -1; font-weight: 800; font-size: .82rem; color: var(--text2); }
.coach-search-box { position: relative; min-width: 0; }
.coach-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text3); display: flex; pointer-events: none; }
.coach-search-box .input { min-height: 48px; padding-left: 42px; width: 100%; }
.coach-search .btn { min-height: 48px; }
.coach-search-box .input { padding-right: 48px; }
.coach-search-box input::-webkit-search-cancel-button { display: none; }
.coach-search-x { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; color: var(--text2); border-radius: 50%; }
.coach-search-x:hover { color: var(--text); background: var(--raised); }
.coach-search-x:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.coach-search-x[hidden] { display: none; }
.coach-chips { margin: 0; }
.coach-count { margin: 0; font-size: .92rem; color: var(--text2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; column-gap: 14px; }
.coach-count strong { color: var(--text); }
.coach-count a { font-weight: 700; }
.empty .btn { margin-top: 14px; }
.coach-card[hidden], .empty[hidden] { display: none; }
/* Coaches filters: a summary button, then groups of choice chips (radio buttons underneath) */
.coach-filters { grid-column: 1 / -1; }
.coach-filters > summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.coach-filters > summary::-webkit-details-marker { display: none; }
.coach-filters > summary.is-on { border-color: var(--lime); }
.coach-filter-groups { display: grid; gap: 16px 28px; margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.coach-filter-groups fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.coach-filter-groups legend { font: 700 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); margin-bottom: 10px; padding: 0; }
.chip.pick { min-height: 44px; padding: 0 16px; font-size: .85rem; cursor: pointer; color: var(--text); }
.chip.pick:has(input:checked) { background: var(--lime); color: var(--on-fill); border-color: var(--lime); }
.chip.pick:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
.coach-filter-actions { display: flex; gap: 10px; flex-wrap: wrap; grid-column: 1 / -1; }
@media (max-width: 520px) { .coach-filter { padding: 14px; } .coach-filter-actions .btn { flex: 1 1 0; } }
@media (max-width: 360px) { .coach-search { grid-template-columns: 1fr; } .coach-search > .btn { width: 100%; } }
.coach-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.coach-card:hover, .coach-card:focus-within { border-color: var(--line3); transform: translateY(-2px); box-shadow: 0 18px 36px -24px rgba(0,0,0,.65); }
.coach-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; color: inherit; }
.coach-card-head strong { display: block; font-size: 1.1rem; }
.coach-rating { font-weight: 800; color: var(--cash-ink); font-size: .9rem; white-space: nowrap; }
.coach-headline { margin: 0; color: var(--text2); font-weight: 600; }
.price-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.price-board div { background: var(--raised); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.price-board span { font: 700 .66rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.price-board strong { font: 700 1.05rem/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-board strong small { font-size: .72em; color: var(--text3); margin-left: 2px; }
.coach-contact { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.coach-contact .number { font: 700 1rem/1.2 var(--mono); user-select: all; }
.coach-contact .email { color: var(--text2); font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; user-select: all; }
.contact-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.contact-actions .btn { padding: 0 10px; }
.coach-card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.coach-card-actions .btn-primary { flex: 1 1 auto; }
.coach-invite { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; margin-top: 28px; }
@media (max-width: 640px) { .coach-invite { grid-template-columns: auto minmax(0, 1fr); } .coach-invite .btn { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .coach-card { transition: none; } .coach-card:hover, .coach-card:focus-within { transform: none; } }

/* Find: which sports are on (the player's own by default) and saving the choice as their sports (15 Oct 2026) */
.fd-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; }
.fd-mine a { color: var(--lime-ink); font-weight: 700; }
.fd-mine-save { margin: 0; }
.fd-more { margin: -2px 0 12px; }
.fd-more > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px dashed var(--line3); border-radius: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.fd-more > summary::-webkit-details-marker { display: none; }
.fd-more[open] > summary { border-style: solid; border-color: var(--lime-line); }
.fd-more-filter { max-width: 320px; margin: 12px 0 0; }
.fd-more-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* ── Go live (owner venue page, 15 Oct 2026): a new venue is a hidden draft until its owner publishes it. ──
   A scoreboard reading of the checklist: the big Anton count, a five-segment meter that lights lime as things get
   done, and one primary action. Live collapses to a single strip with a slow pulse. */
.golive { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 260px); gap: 28px; align-items: start;
    margin: 0 0 28px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--hero-bg), var(--surface); }
.golive-score { display: grid; justify-items: center; padding: 6px 4px 0; min-width: 96px; }
.golive-num { font: 400 4.6rem/0.9 var(--display); letter-spacing: .01em; color: var(--text); font-variant-numeric: tabular-nums; }
.golive-num small { font-size: .45em; color: var(--text3); margin-left: 2px; }
.golive-cap { margin-top: 6px; font: 800 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--text3); }
.golive-state { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 700 .8rem/1.2 var(--body); }
.golive-state.is-draft { background: var(--blue-tint); color: var(--blue-ink); }
.golive-state.is-hidden { background: var(--cash-tint); color: var(--cash-ink); }
.golive-title { margin: 12px 0 6px; font: 400 clamp(1.7rem, 2.6vw, 2.2rem)/1.05 var(--display); letter-spacing: .01em; text-wrap: balance; }
.golive-lede { margin: 0 0 18px; color: var(--text2); max-width: 58ch; }
.golive-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 18px; max-width: 520px; }
.golive-meter span { height: 6px; border-radius: 3px; background: var(--line); transition: background-color .3s ease, box-shadow .3s ease; }
.golive-meter span.on { background: var(--lime); box-shadow: 0 0 10px -2px var(--lime); }
.golive-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.golive-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-sm); }
.golive-list li.todo { background: var(--raised); }
.golive-tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line3); }
.golive-list li.done .golive-tick { background: var(--lime); border-color: var(--lime); color: var(--on-fill); }
.golive-item { display: grid; gap: 2px; min-width: 0; }
.golive-item strong { font-weight: 800; }
.golive-item span { font-size: .88rem; color: var(--text3); overflow-wrap: anywhere; }
.golive-list li.done .golive-item strong { color: var(--text2); }
.golive-fix { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; font-weight: 800; font-size: .85rem;
    color: var(--lime-ink); border: 1px solid var(--lime-line); white-space: nowrap; transition: background-color .15s ease; }
.golive-fix:hover { background: var(--lime-tint); }
.golive-fix:focus-visible, .golive-hide:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.golive-actions { display: grid; gap: 10px; }
.golive-actions .btn, .golive-actions form { width: 100%; justify-content: center; }
.golive-publish { min-height: 52px; font-size: 1rem; }
.golive-publish:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.golive-why { margin: 2px 0 0; font-size: .85rem; color: var(--text3); text-align: center; }

.golive-live { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 20px; background: var(--surface); border-color: var(--lime-line); }
.golive-pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 var(--lime-line); animation: golive-pulse 2.4s ease-out infinite; }
.golive-live-text { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.golive-live-word { margin: 0; font: 400 1.6rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--lime-ink); }
.golive-live-text p { margin: 0; color: var(--text2); }
.golive-live-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.golive-hide { color: var(--text2); }
.golive-hide:hover { color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger-ink) 40%, transparent); }
@keyframes golive-pulse { 0% { box-shadow: 0 0 0 0 var(--lime-line); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }

/* Venue list badge: Live / Draft / Hidden next to each venue name. */
.vis-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 800 .72rem/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.vis-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vis-badge.live { background: var(--lime-tint); color: var(--lime-ink); }
.vis-badge.draft { background: var(--blue-tint); color: var(--blue-ink); }
.vis-badge.hidden { background: var(--cash-tint); color: var(--cash-ink); }

/* Player preview banner (/Business/Preview). */
.preview-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; padding: 12px 16px;
    border-radius: var(--radius-sm); background: var(--blue-tint); color: var(--blue-ink); border: 1px solid color-mix(in srgb, var(--blue-ink) 30%, transparent); }
.preview-bar-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.preview-bar-text { flex: 1; min-width: 200px; font-size: .9rem; }
.item[aria-disabled="true"] { cursor: default; }

@media (max-width: 900px) {
    .golive { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
    .golive-score { display: flex; align-items: baseline; gap: 10px; padding: 0; min-width: 0; }
    .golive-cap { margin: 0; }
    .golive-num { font-size: 3.2rem; }
    .golive-actions { position: sticky; bottom: 12px; padding: 12px; margin: 0 -8px -8px; border-radius: var(--radius-sm); background: var(--shade); backdrop-filter: blur(10px); }
    .golive-live { grid-template-columns: auto minmax(0, 1fr); }
    .golive-live-actions { grid-column: 1 / -1; }
    .golive-live-actions .btn, .golive-live-actions form { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .golive-pulse { animation: none; }
    .golive-meter span { transition: none; }
}

/* Cookie notice (_CookieNotice.cshtml): information only, the site sets no optional cookies. */
.cookie-notice { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin: 0 auto; display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--raised); color: var(--text); border: 1px solid var(--line3); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text2); }
.cookie-notice a { color: var(--lime-ink); font-weight: 700; }
.cookie-notice .btn { flex: none; }

/* Skip link for the signed-in pages (public.css has the public site's own). */
body > .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--lime); color: var(--on-fill); font-weight: 800; transition: top .15s; }
body > .skip-link:focus { top: 12px; color: var(--on-fill); }
.app-content:focus { outline: none; }

/* Photo sliders (2 Nov 2026, _PhotoSlider): swipe on touch, arrows and a count for mouse and keyboard */
.slider .slides { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slider .slides::-webkit-scrollbar { display: none; }
.slider .slides:focus-visible { outline: 3px solid var(--lime-line); outline-offset: -3px; }
.slider .slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.slider .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(10,12,16,.7); color: #F4F2EC; border: 1px solid rgba(255,255,255,.25); cursor: pointer; }
.slide-btn:hover { background: rgba(10,12,16,.9); }
.slide-btn:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.slide-btn.prev { left: 12px; }
.slide-btn.next { right: 12px; }
[dir="rtl"] .slide-btn svg { transform: scaleX(-1); }
.slide-count { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 10px; background: #07080B; color: #F4F5F0; font: 700 .8rem/1.4 var(--mono, monospace); }
@media (hover: none) { .slide-btn { display: none; } }
.fd-more-row { display: flex; justify-content: center; margin: 18px 0 6px; }

/* Searchable dropdown (2 Nov 2026, data-combo in site.js) */
.combo { position: relative; }
.combo-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; text-align: start; cursor: pointer; font-weight: 700; color: var(--text); }
.combo-field.is-empty .combo-value { color: var(--text3); font-weight: 600; }
.combo-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-chevron { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.combo.is-open .combo-field { border-color: var(--lime-line); }
.combo.is-open .combo-chevron { transform: rotate(180deg); }
.combo-panel { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); display: grid; gap: 6px; }
.combo-panel[hidden] { display: none; }
.combo-search { min-height: 44px; }
.combo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.combo-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; cursor: pointer; font-weight: 600; color: var(--text); }
.combo-option:hover, .combo-option:focus-visible { background: var(--line2); outline: none; }
.combo-option:focus-visible { box-shadow: inset 0 0 0 2px var(--lime-line); }
.combo-option[aria-selected="true"] { background: var(--lime-tint); color: var(--lime-ink); font-weight: 800; }
.combo-option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.combo-option.is-none { color: var(--text2); }
.combo-option svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.combo-empty { margin: 4px 12px 8px; }
@media (prefers-reduced-motion: reduce) { .combo-chevron { transition: none; } }
/* Games here (2 Nov 2026): a details list, read only */
.games-here > summary { list-style: none; }
.games-here > summary::-webkit-details-marker { display: none; }
.games-here[open] .combo-field { border-color: var(--lime-line); }
.games-here .combo-value { display: inline-flex; align-items: center; gap: 8px; }
.combo-option.is-plain { cursor: default; font-weight: 700; }
.combo-option.is-plain::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); flex: none; margin-inline-end: 4px; }
.combo-option.is-plain { justify-content: flex-start; }
.combo-option.is-plain:hover { background: transparent; }
.combo-option[hidden] { display: none; }
.combo-caret { width: 9px; height: 9px; flex: none; margin: 0 6px 4px 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; color: var(--text2); }
.games-here[open] .combo-caret { transform: rotate(-135deg); margin-bottom: -4px; }
@media (prefers-reduced-motion: reduce) { .combo-caret { transition: none; } }

/* Club page tabs and member filters (3 Nov 2026): Members | Add member | Club sales | Club details. The search, status
   and sort sit in one row; the rest fold under "More filters" so the list stays the first thing seen. */
.tabs a { display: inline-flex; align-items: center; gap: 8px; }
.tab-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--cash); color: var(--on-fill); font: 800 .78rem/1 var(--body); }
.club-filters { display: grid; gap: 12px; }
.club-filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.club-more > summary { cursor: pointer; font-weight: 700; color: var(--text2); min-height: 44px; display: flex; align-items: center; }
.club-more > summary:hover { color: var(--text); }
.club-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 4px; }
.club-filter-grid .field { margin: 0; }
.club-filter-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.club-members td { vertical-align: top; }
.club-members .chip { white-space: nowrap; }
.club-members .chip.on { background: var(--lime-tint); color: var(--lime-ink); border-color: var(--lime-line); }
.club-link > summary { cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--blue-ink); margin-top: 6px; text-align: end; }
/* The actions stack in their own narrow column, so nothing is cut off at the table's edge. */
.club-members { min-width: 860px; }
.club-members th:last-child, .club-members td:last-child { width: 1%; }
.club-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 120px; }
.club-actions form { display: block; }
.club-actions .btn { width: 100%; justify-content: center; }
.club-link > summary { text-align: start; }
.club-link { min-width: 200px; }
.club-link form .input { flex: 1 1 100% !important; }

/* Venues tab (owner, 3 Nov 2026): the venue list fills the left, the "Add a venue" form sits on the right. */
.venues-split { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.venues-split > * { min-width: 0; }
@media (max-width: 1100px) { .venues-split { grid-template-columns: 1fr; } }
.item.is-picked { border-color: var(--lime-line); box-shadow: var(--glow-soft); background: var(--lime-tint); }

/* "Coaches only here" on Coaching and I coach (owner, 3 Nov 2026). */
.excl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.excl-form { gap: 8px; flex-wrap: wrap; align-items: center; }
.excl-days { width: 84px; min-height: 40px; }
.excl-state { font-size: .87rem; font-weight: 700; color: var(--blue-ink); }
.excl-state.on { color: var(--lime-ink); }

/* Sports a coach may coach here (owner, 4 Nov 2026): checkbox chips. Readable (.85rem), a 40px target, the ticked
   ones lime so the choice reads without the box, a visible keyboard focus, and an inline error when none is ticked. */
.coach-sports { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 10px 0 0; padding: 0; border: 0; min-width: 0; }
.coach-sports legend { padding: 0; margin-bottom: 8px; }
.sport-pick .chip { min-height: 40px; padding: 8px 14px; gap: 8px; font: 700 .85rem/1.2 var(--body); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.sport-pick .chip input { width: 18px; height: 18px; margin: 0; accent-color: var(--lime); flex: none; cursor: pointer; }
.sport-pick .chip:hover { border-color: var(--line3); color: var(--text); }
.sport-pick .chip:has(input:checked) { background: var(--lime-tint); border-color: var(--lime-line); color: var(--text); }
.sport-pick .chip:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 2px; }
.sport-error { color: var(--danger-ink); font-size: .87rem; font-weight: 700; margin: 0; }
.sport-error[hidden] { display: none; }
.coach-row .avatar { width: 56px; height: 56px; font-size: 1.2rem; }
@media (prefers-reduced-motion: reduce) { .sport-pick .chip { transition: none; } }

/* Search and filters over an owner list (owner, 4 Nov 2026): search grows, filters keep their width, all wrap on a
   phone. Rows and groups use display: flex/grid, so hidden needs saying outright. */
.list-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.lf-search { position: relative; flex: 1 1 220px; min-width: 0; }
.lf-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); pointer-events: none; }
.lf-search .input { width: 100%; padding-left: 36px; }
/* The placeholder says what the search covers (its label is for screen readers), so it gets body-text contrast. */
.lf-search .input::placeholder { color: var(--text2); opacity: 1; }
.lf-clear { flex: none; }
.lf-clear[hidden] { display: none; }
.lf-select { flex: 0 1 190px; width: auto; min-width: 140px; }
.lf-count { flex: none; min-width: 7.5em; text-align: end; font-variant-numeric: tabular-nums; }
.lf-none { margin: 4px 0 12px; }
[data-filter-item][hidden], [data-filter-group][hidden] { display: none !important; }
/* Who a family club membership covers (owner, 4 Nov 2026): one tick per person, holder fixed, teens join alone. */
.cover-picks { flex: 1 1 100%; margin: 6px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); min-width: 0; }
.cover-picks[hidden] { display: none; }
.cover-picks legend { padding: 0 4px; }
.cover-picks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cover-pick { align-items: center; min-height: 44px; gap: 10px; }
.cover-pick > span:not(.chip) { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cover-pick b { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.cover-pick.is-fixed { cursor: default; }
.club-cover { margin-top: 6px; }
.club-cover summary { cursor: pointer; font-size: .87rem; font-weight: 700; color: var(--lime-ink); min-height: 32px; display: inline-flex; align-items: center; gap: 4px; }
.club-cover-form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 6px; min-width: 260px; }
/* Club membership card B (owner, 4 Nov 2026): headline saving, a tab per plan, who is joining on Family. */
.club-join { margin: 0 0 22px; padding: 20px; border-radius: var(--radius); border: 2px solid var(--blue-ink); background: var(--blue-tint); display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.club-join-over { font: 700 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.club-join-h { margin: 0; font: 800 1.35rem/1.25 var(--body); color: var(--text); }
.club-join-hl { color: var(--lime-ink); }
.club-join-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.club-join-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.club-join-tabs [role=tab] { min-height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--text2); font: 800 .92rem/1 var(--body); cursor: pointer; }
.club-join-tabs [role=tab][aria-selected=true] { background: var(--text); color: var(--bg); }
.club-join-tabs [role=tab]:focus-visible { outline: 2px solid var(--lime-line); outline-offset: 2px; }
.club-join-panel { display: flex; flex-direction: column; gap: 10px; }
.club-join-panel[hidden] { display: none; }
.club-join-price { display: flex; align-items: baseline; gap: 8px; }
.club-join-price b { font: 700 2.1rem/1 var(--mono); color: var(--text); }
.club-join-price span { font-weight: 700; color: var(--text2); }
.club-join-badge { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--lime); color: var(--on-fill); font-size: .82rem; font-weight: 800; }
.club-join-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.club-join-lines li { display: flex; gap: 8px; align-items: flex-start; color: var(--text); font-weight: 600; }
.club-join-lines li::before { content: ""; flex: none; width: 16px; height: 9px; margin-top: 4px; border-left: 3px solid var(--lime-ink); border-bottom: 3px solid var(--lime-ink); transform: rotate(-45deg); }
.club-join-terms { display: flex; flex-direction: column; gap: 8px; }
.club-join-term { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; color: var(--text); }
.club-join-term:has(input:checked) { border-color: var(--lime-line); background: var(--lime-tint); }
.club-join-term input { width: 18px; height: 18px; accent-color: var(--lime); flex: none; }
.club-join-term span { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.club-join-term em { font-style: normal; font-size: .82rem; font-weight: 800; color: var(--lime-ink); }
.club-join-term b { font: 700 1.05rem/1 var(--mono); }
.club-join-note { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); font-weight: 600; color: var(--text2); }
.club-join-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.club-join-ask .btn { min-height: 52px; padding: 0 22px; }

/* Equipment (owner, 4 Nov 2026; design canvas "Equipment page fix"): facilities fold under real headings, one line per
   item in real columns, Edit and Change stock open below it. Below 720px each item is a card and the headings go. */
.eq-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.eq-tools .list-filter { flex: 1 1 520px; min-width: 0; }
.eq-all { flex: none; }
.eq-list { display: flex; flex-direction: column; gap: 12px; }
.eq-fac { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.eq-head { margin: 0; }
.eq-toggle { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 10px 20px; border: 0; background: transparent; color: var(--text); text-align: start; font: inherit; cursor: pointer; }
.eq-toggle:hover { background: var(--raised); }
.eq-toggle:focus-visible { outline: 2px solid var(--lime-line); outline-offset: -2px; }
.eq-chev { flex: none; transition: transform .15s ease; }
.eq-toggle[aria-expanded="true"] .eq-chev { transform: rotate(90deg); }
.eq-fac-name { font: 800 1.08rem/1.25 var(--body); min-width: 0; overflow-wrap: anywhere; }
.eq-fac-count { margin-inline-start: auto; flex: none; font-size: .87rem; font-weight: 600; color: var(--text2); }
.eq-list[data-filtering] .eq-body { display: block !important; }
.eq-cols, .eq-line { display: flex; align-items: center; gap: 8px 12px; padding: 8px 20px; }
.eq-cols { border-top: 1px solid var(--line); background: var(--raised); font-size: .82rem; font-weight: 700; color: var(--text3); }
.eq-c-name { flex: 2 1 220px; min-width: 0; }
.eq-c-num { flex: 1 1 110px; text-align: end; font-variant-numeric: tabular-nums; }
.eq-c-act { flex: 0 0 236px; display: flex; gap: 8px; justify-content: flex-end; }
.eq-item { border-top: 1px solid var(--line2); }
.eq-line { min-height: 60px; }
.eq-name { font-weight: 700; overflow-wrap: anywhere; }
.eq-stock { font-weight: 800; }
.eq-label { display: none; }
.eq-item.is-removed .eq-line { color: var(--text2); }
.eq-item.is-removed .eq-name { font-weight: 600; text-decoration: line-through; text-decoration-color: var(--line3); }
.eq-panel { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; padding: 14px 20px 18px; background: var(--raised); border-top: 1px dashed var(--line3); }
.eq-panel[hidden] { display: none; }
.eq-fields { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.eq-fields .field { margin: 0; }
.eq-f-name { flex: 2 1 220px; min-width: 0; }
.eq-f-num { flex: 1 1 140px; min-width: 0; }
.eq-static { display: flex; align-items: center; min-height: 52px; font-weight: 700; color: var(--text2); }
.eq-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eq-panel[data-eq-panel="edit"] .eq-actions, .eq-panel[data-eq-panel="add"] .eq-actions { flex: 1 1 100%; }
.eq-spacer { flex: 1 1 auto; }
.btn-danger-soft { background: var(--danger-tint); border-color: transparent; color: var(--danger-ink); }
.btn-danger-soft:hover { border-color: var(--danger); color: var(--danger-ink); }
.eq-group { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.eq-group > legend { padding: 0; margin-bottom: 8px; }
.eq-commit { margin-inline-start: auto; align-items: flex-end; }
.eq-preview { font-size: .92rem; color: var(--text2); }
.eq-preview b { color: var(--text); font-variant-numeric: tabular-nums; }
.eq-seg { display: inline-flex; border: 1px solid var(--line3); border-radius: 999px; overflow: hidden; background: var(--surface); }
.eq-seg input, .eq-reasons input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.eq-seg label { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; font-weight: 800; font-size: .9rem; color: var(--text); cursor: pointer; }
.eq-seg input:checked + label { background: var(--text); color: var(--bg); }
.eq-seg input:focus-visible + label, .eq-reasons input:focus-visible + label { outline: 2px solid var(--lime-line); outline-offset: 2px; }
.eq-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.eq-reasons[hidden] { display: none; }
.chip-pick { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line3); background: var(--surface); color: var(--text); font-weight: 700; font-size: .9rem; cursor: pointer; }
.eq-reasons input:checked + .chip-pick { background: var(--text); border-color: var(--text); color: var(--bg); }
.eq-step { display: flex; align-items: center; gap: 6px; }
.eq-step-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line3); background: var(--surface); color: var(--text); font: 700 1.2rem/1 var(--body); cursor: pointer; }
.eq-step-btn:hover { border-color: var(--text3); }
.eq-count { width: 4.5rem; min-height: 44px; text-align: center; padding: 0 6px; }
.eq-add { border-top: 1px solid var(--line2); }
.eq-add-btn { margin: 12px 20px; border-style: dashed; border-color: var(--lime-line); background: var(--lime-tint); color: var(--lime-ink); font-weight: 800; }
.eq-add .eq-panel { border-top: 0; }
@media (max-width: 720px) {
    .eq-cols { display: none; }
    .eq-line { flex-wrap: wrap; padding: 12px 16px; }
    .eq-c-name { flex: 1 1 100%; }
    .eq-c-num { flex: 0 1 auto; text-align: start; color: var(--text2); font-size: .92rem; }
    .eq-label { display: inline; }
    .eq-c-act { flex: 1 1 100%; justify-content: stretch; }
    .eq-c-act .btn { flex: 1 1 0; }
    .eq-panel { padding: 12px 16px 16px; }
    .eq-commit { margin-inline-start: 0; align-items: stretch; flex: 1 1 100%; }
    .eq-toggle { padding: 10px 16px; }
    .eq-add-btn { margin: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .eq-chev { transition: none; } }
@media (max-width: 640px) { .lf-select { flex: 1 1 140px; } .lf-count { min-width: 0; } }
.coach-only-at { display: inline-flex; align-items: center; gap: 6px; font-size: .87rem; font-weight: 700; color: var(--lime-ink); }

/* Take a booking: the facilities as cards, then only the chosen facility's courts (4 Nov 2026). */
.take-facilities { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.take-facility { display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--raised); color: var(--text); text-decoration: none; }
.take-facility b { font-size: .95rem; overflow-wrap: anywhere; }
.take-facility span { font-size: .8rem; color: var(--text3); }
.take-facility:hover { border-color: var(--text3); }
.take-facility.on { border: 2px solid var(--lime-ink); background: var(--lime-tint); padding: 9px 13px; }

/* Court Board: the Facility row under the day, every facility always shown (4 Nov 2026). */
.board-facilities { display: flex; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 14px; }
.board-facilities > .label { min-height: 40px; display: inline-flex; align-items: center; margin: 0; }
.board-facilities .chips { flex: 1 1 320px; min-width: 0; }
.board-facilities .chip { min-height: 40px; padding: 8px 14px; font-size: .85rem; }

/* Map pin picker under latitude/longitude (map-pick.js, 5 Nov 2026). */
.map-pick { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.map-pick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.map-pick-zoom { display: flex; gap: 6px; }
.map-pick-zoom .btn { min-width: 36px; min-height: 36px; padding: 0 10px; font-size: 1.1rem; line-height: 1; }
.map-pick-zoom [data-find] { font-size: .9rem; }
.map-pick-found:empty { display: none; }
.map-pick-view { position: relative; height: 260px; overflow: hidden; border-radius: 12px; border: 1px solid var(--line, rgba(127,127,127,.3)); background: #dfe3e8; cursor: crosshair; touch-action: none; user-select: none; }
.map-pick-view:focus-visible { outline: 2px solid var(--lime, #c6ef4a); outline-offset: 2px; }
.map-pick-tiles img { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.map-pick-pin { position: absolute; width: 22px; height: 22px; margin: -26px 0 0 -11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #e5484d; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); pointer-events: none; }
.map-pick-credit { align-self: flex-end; font-size: .75rem; }

/* Player shop (Play/Shop, Play/Shop/Orders, 5 Nov 2026). */
.pshop-list { display: flex; flex-direction: column; }
.pshop-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line, rgba(127,127,127,.2)); }
.pshop-item:first-child { border-top: 0; }
.pshop-item.is-picked .pshop-name b { color: var(--lime-ink, inherit); }
.pshop-item.is-out { opacity: .55; }
.pshop-photo { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2, rgba(127,127,127,.12)); font-weight: 700; }
.pshop-photo img { width: 100%; height: 100%; object-fit: cover; }
.pshop-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pshop-qty { text-align: center; min-height: 44px; }
@media (max-width: 760px) { .shop-orders .shop-queue-empty { order: 2; } }
.pshop-stepper { display: inline-flex; align-items: center; gap: 4px; }
.pshop-stepper .pshop-qty { width: 56px; padding: 0 4px; }
.pshop-step { min-width: 44px; min-height: 44px; padding: 0; font-size: 1.3rem; font-weight: 800; }
@media (max-width: 420px) { .pshop-item { grid-template-columns: 52px 1fr; } .pshop-item .pshop-stepper { grid-column: 2; justify-self: start; } }
.pshop-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; padding-top: 6px; border-top: 1px solid var(--line, rgba(127,127,127,.2)); }
.pshop-total b { font-variant-numeric: tabular-nums; }
.pshop-lines { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pshop-lines li { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .pshop { grid-template-columns: 1fr !important; } .pshop aside { position: static !important; } }

/* Your team: what each person works in (5 Nov 2026). */
.team-access { position: relative; }
.team-access > summary { list-style: none; cursor: pointer; }
.team-access > summary::-webkit-details-marker { display: none; }
.team-access-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 8px; width: max-content; min-width: 230px;
  padding: 12px; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--line, rgba(127,127,127,.25)); box-shadow: 0 8px 24px rgba(0,0,0,.18); }

/* Detailed analytics (Business/Analytics, 5 Nov 2026): one lime ramp for "how much", recessive tracks and grid. */
.an-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 18px; }
.an-custom { display: flex; gap: 8px; align-items: center; }
.an-custom .input, .an-filters select.input { min-height: 38px; width: auto; }
.an-kpis { margin-bottom: 12px; }
/* Three or four summary cards in one row on a desktop (Codex design review, 10 Nov 2026: three sat two-and-one). */
.grid-3.an-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* The pay sheet scrolls sideways with each person's name kept in view (Codex design review, 10 Nov 2026). */
@media (max-width: 760px) { .mywork-tabs.has-bottom-bar { display: none; } .cal-month { display: none; } }
@media (min-width: 761px) { .cal-agenda { display: none; } }
.pay-table th:first-child, .pay-table td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.an-delta { margin-top: 8px; font-size: .82rem; color: var(--text3); }
.stat.hl .an-delta { color: var(--text2); }
.an-strip { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 18px; font-size: .9rem; color: var(--text2); }
.an-strip b { color: var(--text); font-variant-numeric: tabular-nums; }
.an-grid { align-items: start; margin-bottom: 18px; }
.an-section { margin-bottom: 18px; }
.an-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.an-bar-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; gap: 12px; align-items: center; }
.an-bar-name { font-size: .9rem; overflow-wrap: anywhere; }
.an-bar-track { height: 10px; border-radius: 999px; background: var(--line2); overflow: hidden; }
.an-bar { display: block; height: 100%; border-radius: 999px; background: var(--lime-ink); }
.an-bar-value { font-variant-numeric: tabular-nums; font-size: .9rem; white-space: nowrap; }
.an-risk, .an-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.an-risk > div, .an-mini > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--raised); }
.an-risk b, .an-mini b { font: 400 1.5rem/1.1 var(--display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.an-risk span, .an-mini span { font-size: .82rem; color: var(--text3); }
.an-risk em { font-style: normal; font-size: .85rem; color: var(--cash-ink); font-variant-numeric: tabular-nums; }
.an-days { display: flex; align-items: flex-end; gap: 3px; height: 150px; margin-top: 10px; }
.an-day { flex: 1; min-width: 2px; border-radius: 4px 4px 2px 2px; background: var(--lime-ink); opacity: .85; }
.an-day:hover { opacity: 1; outline: 2px solid var(--surface); }
.an-days-axis { display: flex; justify-content: space-between; font-size: .78rem; color: var(--text3); margin-top: 6px; }
.an-table-toggle { margin-top: 10px; }
.an-table-toggle summary { cursor: pointer; color: var(--text2); }
.an-legend { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--text3); }
.an-legend-ramp { width: 90px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--lime-ink) 6%, transparent), var(--lime-ink)); }
.an-heat-wrap { overflow-x: auto; margin-top: 10px; }
.an-heat { border-collapse: separate; border-spacing: 2px; font-size: .72rem; font-variant-numeric: tabular-nums; }
.an-heat th { font-weight: 600; color: var(--text3); padding: 2px 4px; text-align: center; }
.an-heat th[scope=row] { text-align: left; padding-right: 8px; }
.an-heat td { width: 30px; height: 26px; min-width: 26px; text-align: center; border-radius: 5px; color: var(--text2);
  background: color-mix(in srgb, var(--lime-ink) calc(6% + var(--p) * .94%), transparent); }
.an-heat td { color: var(--text); }
.an-heat td[data-b="b"], .an-heat td[data-b="c"] { color: var(--on-fill); font-weight: 700; }
:root[data-theme="light"] .an-heat td[data-b="b"] { color: var(--text); font-weight: 400; }
:root[data-theme="light"] .an-heat td[data-b="c"] { color: #fff; }
.an-heat td.closed { background: repeating-linear-gradient(45deg, var(--line2) 0 3px, transparent 3px 7px); }
.an-meter { display: inline-block; width: 56px; height: 8px; border-radius: 999px; vertical-align: middle; margin-right: 6px;
  background: linear-gradient(90deg, var(--lime-ink) calc(var(--p) * 1%), var(--line2) 0); }
.an-table .an-fac td { border-top: 1px solid var(--line3); }
.an-indent { padding-left: 26px !important; color: var(--text2); }
@media (max-width: 760px) { .an-risk, .an-mini { grid-template-columns: 1fr 1fr; } .an-bar-row { grid-template-columns: 1fr auto; } .an-bar-track { grid-column: 1 / -1; grid-row: 2; } }

/* Map picker (5 Nov 2026): the wheel note over the map, the "place the pin" ask, the folded number boxes. */
.map-pick-view { position: relative; }
.map-pick-wheel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 82%, transparent); color: var(--bg); font-size: .82rem; font-weight: 600; pointer-events: none; }
.map-pick-need { color: var(--danger-ink); font-weight: 600; margin: 6px 0 0; }
.map-pick-numbers { margin: 4px 0 8px; }
.map-pick-numbers > summary { cursor: pointer; color: var(--text2); padding: 4px 0; }

/* Your account menu at the top (5 Nov 2026). */
.top-me-menu { position: relative; }
.top-me-menu > summary { list-style: none; cursor: pointer; }
.top-me-menu > summary::-webkit-details-marker { display: none; }
.top-me-menu > summary svg { width: 14px; height: 14px; color: var(--text3); }
.top-me-list { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; display: grid; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--glow); }
.top-me-list a, .top-me-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.top-me-list a:hover, .top-me-list button:hover, .top-me-list a:focus-visible, .top-me-list button:focus-visible { background: var(--raised); }
.top-me-list form { margin: 0; border-top: 1px solid var(--line2); margin-top: 4px; padding-top: 4px; }

/* A control and its "!" on one row (5 Nov 2026). */
.vk-hint-ctl { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.vk-hint-ctl > :first-child { flex: 1 1 auto; min-width: 0; }
.vk-hint-ctl.is-inline { display: inline-flex; width: auto; vertical-align: middle; }
.vk-hint-ctl.is-inline > :first-child { flex: 0 1 auto; }
.vk-hint-ctl > .vk-hint { flex: none; }

/* Get your business live, on Today (5 Nov 2026). */
.setup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.setup-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 14px; }
.setup-list li.is-next { border-color: var(--lime-ink); background: color-mix(in srgb, var(--lime) 12%, transparent); }
.setup-list li.is-done { opacity: .75; }
.setup-mark { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem/1 var(--mono); border: 1px solid var(--line); background: var(--surface); }
.setup-list li.is-done .setup-mark { background: var(--lime); color: var(--on-fill); border-color: transparent; }
.setup-text { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }

/* The message after a save stays in view while the page is scrolled (5 Nov 2026: a save now keeps your place). */
.page-toast { position: sticky; top: 78px; z-index: 40; box-shadow: var(--glow); transition: opacity .4s ease; }
.page-toast.is-gone { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .page-toast { transition: none; } }

/* Dates in words beside date boxes; Show on passwords (5 Nov 2026). */
.date-words { display: block; margin-top: 4px; }
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 70px; }
.pw-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 32px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text2); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.pw-show:hover, .pw-show:focus-visible { background: var(--raised); color: var(--text); }

/* Your businesses today (5 Nov 2026). */
.all-today-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.all-today-item { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 14px; color: var(--text); }
.all-today-item:hover { border-color: var(--line3); }
.all-today-item.on { border-color: var(--lime-ink); background: color-mix(in srgb, var(--lime) 12%, transparent); }
.all-today-item .small { color: var(--text2); }

/* Court page: the total before booking (5 Nov 2026). */
.book-total { margin: 14px 0 0; font-size: 1.05rem; }
.book-total b { font-size: 1.2rem; }

/* The desk's player picker (6 Nov 2026): search the venue's players, pick one or create one. */
.pp { display: grid; gap: 8px; }
.pp-status { margin: 0; min-height: 1.2em; }
.pp-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.pp-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; text-align: start;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-height: 44px; cursor: pointer; color: var(--text); font: inherit; }
.pp-row:hover, .pp-row:focus-visible { border-color: var(--text); }
.pp-row strong { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.pp-row .small { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.pp-tag { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .75rem; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; color: var(--text2); }
.pp-tag.on { border-color: var(--text); color: var(--text); }
.pp-chosen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border: 2px solid var(--text); border-radius: 10px; padding: 8px 12px; }
.pp-chosen-text { min-width: 0; overflow-wrap: anywhere; }
.pp [data-pp-create] { justify-self: start; }
/* Rentals in the board's booking panel (6 Nov 2026). */
.drag-rent { display: grid; gap: 6px; }
.drag-rent-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drag-rent-row label { min-width: 0; }
.drag-rent-row input { width: 76px; flex: none; text-align: center; }