/* Pool League — public site.
   Visual language matched to the old League Republic site (measured from its pages):
   Varela Round, #555 text, #567e2c green, square white cells on a #f4f8fa panel,
   small green uppercase headings with a square bullet, dark nav. Mobile-first;
   desktop (>= 900px) adds the dark left sidebar and widens everything. */

:root {
    --green: #567e2c;
    --green-dark: #44661f;
    --text: #555;
    --muted: #7b7b7b;
    --panel: #f4f8fa;
    --line: #e3e9ec;
    --nav: #222;
    --day-active: #333;
    --todo: #666;
    --done: #090909;
    --loss: #b5432f;
    --font: "Varela Round", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.35;
    color: var(--text);
    background: #fff;
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

a { color: var(--green); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.muted { color: var(--muted); font-weight: 400; }
.empty { color: var(--muted); margin: 14px 4px; }
.smaller { font-size: 12px; margin: 8px 2px 0; }
.btn-small { font: inherit; padding: 8px 12px; border: 0; background: var(--green); color: #fff; }

/* ---------- Banner + title bar ---------- */
.banner {
    height: 116px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    background: radial-gradient(ellipse at 65% 35%, #2f7d50 0%, #1e5b37 55%, #143f26 100%);
    background-size: cover;
    background-position: center;
}
/* The league photo has the crest at its left edge, so anchor it left when cropping. */
.banner.has-image { background-color: #1e5b37; background-size: cover; background-position: left center; }
.banner .crest { width: 96px; height: 96px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }

.titlebar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 0 10px;
    background: var(--green);
}
.titlebar .title { color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; }
.menu summary { list-style: none; cursor: pointer; padding: 6px; }
.menu summary::-webkit-details-marker { display: none; }
.menu svg { display: block; width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 40;
    min-width: 210px;
    background: var(--green-dark);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}
.menu-panel a { display: block; padding: 13px 16px; color: #fff; text-decoration: none; border-top: 1px solid rgba(255, 255, 255, .12); }

/* ---------- Page + panel ---------- */
.page { padding: 10px 0; }
.panel { background: var(--panel); padding: 10px; }

.season-form { display: flex; gap: 8px; }
.season-select {
    width: 100%;
    height: 48px;
    padding: 0 30px 0 10px;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: 17px; /* >= 16px so iOS doesn't zoom on focus */
    font-weight: 700;
    color: var(--text);
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center / 18px;
}

/* ---------- Match-night day strip ---------- */
.daystrip { position: relative; margin-top: 10px; }
.days {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.days::-webkit-scrollbar { display: none; }
.day {
    flex: 0 0 102px;
    min-height: 91px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    text-transform: uppercase;
    scroll-snap-align: center;
}
.day strong { font-size: 16px; }
.day-date { font-size: 16px; }
.day.active { background: var(--day-active); color: #fff; }
.counts { display: flex; gap: 6px; margin-top: 5px; }
.c {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    color: #fff;
}
.c.todo { background: var(--todo); }
.c.done { background: var(--done); }
.strip-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    padding: 0 0 3px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 24px;
    line-height: 1;
    color: #fff;
    background: rgba(110, 110, 110, .85);
    cursor: pointer;
}
.strip-arrow.prev { left: 4px; }
.strip-arrow.next { right: 4px; }

/* ---------- Tabs ---------- */
.tabs {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 2px solid var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
    display: block;
    padding: 16px 24px 10px;
    margin-bottom: -2px;
    border-bottom: 6px solid transparent;
    color: var(--green);
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}
.tabs .active a { border-bottom-color: var(--green); }

/* ---------- Headings ---------- */
.group-heading { margin: 22px 2px 4px; font-size: 16px; font-weight: 700; color: var(--green); text-transform: uppercase; }
.time-heading, .sq-heading {
    position: relative;
    margin: 20px 0 6px;
    padding-left: 18px;
    font-weight: 700;
    color: var(--green);
    text-transform: uppercase;
}
.time-heading { font-size: 14px; }
.sq-heading { font-size: 16px; }
.time-heading::before, .sq-heading::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    background: var(--green);
}
.sq-heading .muted { text-transform: none; font-size: 14px; margin-left: 4px; }

/* ---------- Fixtures table ---------- */
.fx-table { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 13px; }
.fx-table th { padding: 0 4px 2px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.fx-table th.h { text-align: right; }
.fx-table th.a { text-align: left; }
.fx-table td { height: 41px; padding: 4px; background: #fff; vertical-align: middle; }
.fx-table td.h { width: 27%; text-align: right; }
.fx-table td.a { width: 27%; text-align: left; }
.fx-table td.v { width: 34%; }
.fx-table td.h a, .fx-table td.a a { color: var(--green); font-weight: 700; text-decoration: underline; }
.fx-table td.vs { width: 1%; text-align: center; color: var(--muted); white-space: nowrap; }
.fx-table .score { color: var(--text); font-weight: 700; text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 5px; }   /* dotted underline = tap for the match */
.fx-table .claimed { display: block; font-size: 10px; text-transform: uppercase; color: var(--muted); }
.note { margin: 10px 0 0; padding: 10px 12px; background: #fff; border-left: 4px solid var(--green); font-size: 14px; }
.fx-table td.i { width: 30px; text-align: center; }
.fx-table td.i a { display: inline-flex; }
.fx-table td.i svg { width: 22px; height: 22px; }
.fx-table td.i circle { fill: #111; }
.fx-table td.i path { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; fill: none; }

/* ---------- Standings table ---------- */
.st-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; font-size: 13px; }
.st-table th { width: 18px; padding: 0 0 2px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.st-table th.pos { width: 26px; }
.st-table th.team { width: auto; }
.st-table th:nth-child(6), .st-table th:nth-child(7) { width: 26px; }
.st-table th:nth-child(8) { width: 30px; }
.st-table th.pts { width: 30px; }
.st-table th.adj { width: 14px; }
.st-table td { height: 41px; padding: 0 2px; text-align: center; background: #fff; }
.st-table td.pos { font-weight: 700; }
.st-table td.team { padding: 2px 6px; text-align: left; background: var(--green); line-height: 1.15; }
.st-table td.team a { color: #fff; font-weight: 700; text-decoration: none; }
.st-table td.pts { background: var(--green); color: #fff; font-weight: 700; }
.st-table td.adj { padding: 0; font-size: 12px; }
.st-table tr.me td.team { background: var(--green-dark); }

/* ---------- Generic white-cell table ---------- */
.cell-table { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 14px; }
.cell-table td { height: 41px; padding: 6px 10px; background: #fff; }
.cell-table .strong { font-weight: 700; }
.cell-table .right { text-align: right; }
.cell-table a { color: var(--green); font-weight: 700; }
.cell-table.frames td.no { width: 30px; padding: 0; text-align: center; color: var(--muted); }
.cell-table.frames td.won { color: var(--green); font-weight: 700; }
.cell-table.results td.date { width: 56px; font-size: 13px; color: var(--muted); }
.cell-table.results td.ha { width: 28px; padding: 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.cell-table.results td.score { width: 58px; padding: 0; text-align: center; }
.cell-table.results td.score a { color: var(--text); text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cell-table.results td.res { width: 34px; padding: 0; text-align: center; }
.cell-table.links td.go { width: 30px; text-align: center; color: var(--muted); }
.cell-table.stat-boxes td { padding: 10px 2px; text-align: center; }
.stat-boxes b { display: block; font-size: 20px; color: var(--text); }
.stat-boxes span { font-size: 11px; color: var(--muted); text-transform: uppercase; }

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.chip.w { background: var(--green); }
.chip.l { background: var(--loss); }
.seven {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: #111; color: #fff; font-size: 10px; font-weight: 700;
}

/* ---------- Match + team pages ---------- */
.back { display: inline-block; margin: 2px 2px 6px; font-weight: 700; text-decoration: none; }
.match-season { margin: 6px 0 2px; text-align: center; font-size: 14px; font-weight: 700; color: var(--green); text-transform: uppercase; }
.match-meta { margin: 0 0 10px; text-align: center; font-size: 13px; }
.team-name { margin: 4px 2px 2px; font-size: 22px; color: var(--green); }
.team-name + .match-meta { text-align: left; margin-left: 2px; }
.match-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 18px 10px;
    text-align: center;
    background: #fff;
}
.mt-team { font-size: 18px; font-weight: 700; color: var(--green); }
.mt-vs { font-size: 20px; font-weight: 700; }
.mt-score { white-space: nowrap; }
.mt-score b { font-size: 32px; }
.mt-score b.win { color: var(--green); }
.mt-score i { margin: 0 4px; font-style: normal; color: var(--muted); }

.squad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.squad li { padding: 10px; background: #fff; font-size: 14px; }
.tag { padding: 1px 4px; font-size: 10px; font-weight: 700; color: #fff; background: var(--green); }
.soon { margin: 0; padding-left: 20px; color: var(--muted); }
.soon li { padding: 3px 0; }

/* ---------- Login + forms ---------- */
.titlebar .title { flex: 1; }
.login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 2px solid rgba(255, 255, 255, .85);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.login-btn svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.lead { margin: 6px 2px 14px; font-size: 15px; }
.form { margin: 10px 0; }
.label { display: block; margin: 0 2px 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.input {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid #d6dde1;
    background: #fff;
    font: inherit;
    font-size: 18px; /* >= 16px: no iOS zoom */
    color: var(--text);
}
.input:focus { outline: 2px solid var(--green); outline-offset: 0; }
.input::placeholder { color: #b4bcc0; }
.input.code { letter-spacing: 6px; font-size: 24px; text-align: center; }
.error { margin: 6px 2px 0; color: var(--loss); font-size: 14px; }
.btn {
    display: inline-block;
    width: 100%;
    margin-top: 12px;
    padding: 13px 18px;
    border: 0;
    background: var(--green);
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.btn.secondary { background: #fff; color: var(--green); border: 2px solid var(--green); }
.btn.small { width: auto; margin: 0; padding: 8px 12px; font-size: 14px; }
.choices { display: grid; gap: 2px; }
.choice {
    display: block;
    width: 100%;
    padding: 13px 12px;
    border: 0;
    background: #fff;
    font: inherit;
    font-weight: 700;
    text-align: left;
    color: var(--green);
    cursor: pointer;
}
.cell-table.requests td.actions { width: 1%; white-space: nowrap; }
.captain-card { margin-top: 10px; padding: 12px; background: #fff; }
.captain-card .label { margin-top: 10px; }
.captain-card .input { font-size: 17px; padding: 10px; }
.captain-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 17px; }
.captain-actions { display: flex; gap: 8px; margin-top: 10px; }
.tag.muted-tag { background: #9aa3a0; }
.cell-table td.actions { width: 1%; white-space: nowrap; text-align: right; }
.player-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px; margin-top: 2px; background: #fff; }
.player-row .input { font-size: 16px; padding: 9px; }
.player-row .btn.small { justify-self: start; }
.cell-table.teams td a { font-size: 16px; }
@media (min-width: 900px) {
    .player-row { grid-template-columns: 1.4fr 1fr auto auto; align-items: center; }
}
.role-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.role-check { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.role-check input { width: 18px; height: 18px; }
.cell-table.requests td.actions form { display: inline-block; margin-left: 4px; }

/* ---------- Player stats ---------- */
.stat-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.stat-filters .input { font-size: 16px; padding: 10px; }
.stat-filters .input.wide { grid-column: 1 / -1; }
.table-scroll { overflow-x: auto; }
.pstats { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 13px; font-variant-numeric: tabular-nums; }
.pstats th { padding: 0 3px 2px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; text-align: center; }
.pstats td { padding: 7px 4px; text-align: center; background: #fff; white-space: nowrap; }
.pstats td.pos { font-weight: 700; width: 28px; }
.pstats th.who, .pstats td.who { text-align: left; width: 100%; white-space: normal; background: var(--green); color: #fff; padding: 6px 8px; }
.pstats td.who strong { display: block; font-size: 14px; }
.pstats td.who span { display: block; font-size: 11.5px; opacity: .85; }
.pstats th.who { background: none; color: var(--muted); }
.pstats td.pts { background: var(--green); color: #fff; font-weight: 700; }

/* ---------- Match night ---------- */
.tonight {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 12px 10px;
    background: #fff7d6;
    border-bottom: 3px solid #e2b93b;
    color: #4a3d00;
}
.tonight.go { background: #e8f3d6; border-color: var(--green); color: #243a0e; }
.tonight.done { background: #eef2f3; border-color: #b9c4c8; color: var(--text); }
.tonight-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 240px; }
.tonight-text strong { font-size: 17px; }
.tonight-venue, .tonight-status { font-size: 13.5px; }
.tonight-btns { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 240px; }
.tonight-btn {
    padding: 12px 18px;
    background: var(--green);
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    flex: 1 1 200px;
}
.tonight.wait .tonight-btn, .tonight.warn .tonight-btn, .tonight.done .tonight-btn { background: #fff; color: var(--green); border: 2px solid var(--green); }
@media (min-width: 900px) { .tonight { padding: 14px 30px; } .tonight-btn { flex: 0 0 auto; } }

.sheet-form { margin-top: 14px; }
.sheet-row { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; margin-top: 4px; }
.sheet-row.doubles { grid-template-columns: 28px 1fr 1fr; }
.sheet-row .input { font-size: 16px; padding: 10px; }
.sheet-no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: #222; color: #fff; font-size: 13px; font-weight: 700; }

.frame-cols, .frame-row { display: grid; grid-template-columns: 26px 1fr 1fr; gap: 6px; align-items: stretch; }
.frame-cols { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .03em; }
.frame-cols span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame-row { margin-top: 5px; padding: 5px; background: #fff; }
.frame-row .sheet-no { align-self: center; }
.side-btn {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 6px 4px;
    min-height: 48px;
    min-width: 0;
    border: 2px solid #d6dde1;
    background: #f7f9fa;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    line-height: 1.2;
    text-align: center;
}
.side-btn span { display: block; max-width: 100%; overflow-wrap: anywhere; }
.side-btn.won { background: var(--green); border-color: var(--green); color: #fff; }
.side-btn:disabled { cursor: default; opacity: .85; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.grey { background: #9aa7ae; border-color: #9aa7ae; }
button.sheet-no.reset { border: 0; cursor: pointer; font-family: inherit; background: #222; }
button.sheet-no.reset:hover, button.sheet-no.reset:focus { background: #b3261e; }
.side-btn.absent { background: #f0f2f3; border-style: dashed; color: var(--muted); font-weight: 400; }
.frame-extra { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
/* 7-ball wins: one list + "Add 7 ball win" panel below the frames */
.sevens { margin-top: 14px; }
.seven-line { margin: 4px 0; font-size: 15px; }
.seven-add { margin-top: 8px; }
.seven-add summary { display: inline-block; cursor: pointer; list-style: none; }
.seven-add summary::-webkit-details-marker { display: none; }
.seven-add form { margin-top: 10px; padding: 10px; background: #fff; }
.seven-opt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef1f3; font-size: 15px; }
.seven-opt input { width: 22px; height: 22px; margin: 0; flex: none; }
.seven-add form .btn { margin-top: 10px; }
.clear-link { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; }
.judge { display: flex; gap: 8px; margin-top: 10px; }
.judge form { margin: 0; }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.share-row .btn { width: auto; margin-top: 4px; }

/* ---------- Footer ---------- */
.site-foot { padding: 20px 10px 26px; background: var(--green); color: #fff; }
.site-foot strong { display: block; margin-bottom: 10px; font-size: 17px; }
.site-foot nav a { display: block; padding: 6px 0; color: #fff; text-decoration: none; }

/* ---------- App nav: bottom bar on phones ---------- */
.app-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    background: var(--nav);
    padding-bottom: env(safe-area-inset-bottom);
}
.app-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 0 8px;
    border-top: 3px solid transparent;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    opacity: .78;
}
.app-nav a.active { opacity: 1; border-top-color: #8a8a8a; }
.app-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-nav svg circle { fill: currentColor; stroke: none; }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
    body { padding-bottom: 0; background: #e9eef0; }

    .shell {
        display: grid;
        grid-template-columns: 100px minmax(0, 1080px);
        justify-content: center;
    }

    .app-nav {
        position: sticky;
        top: 0;
        bottom: auto;
        left: auto;
        right: auto;
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding-bottom: 0;
    }
    .app-nav a { flex: 0 0 auto; padding: 14px 4px; font-size: 11px; border-top: 0; border-right: 3px solid transparent; }
    .app-nav a.active { border-right-color: #8a8a8a; }
    .app-nav a:hover { opacity: 1; }
    .app-nav svg { width: 30px; height: 30px; }

    .column { min-height: 100vh; background: #fff; }
    .banner { height: 170px; padding-left: 20px; }
    .banner .crest { width: 140px; height: 140px; }
    .titlebar { min-height: 50px; padding: 0 30px; }
    .titlebar .title { font-size: 19px; }
    .menu { display: none; }
    .btn { width: auto; min-width: 200px; }

    .page { padding: 30px; }
    .panel { padding: 24px 30px 30px; }
    .panel.narrow { max-width: 780px; margin: 0 auto; }

    .season-select { width: 33%; min-width: 280px; }
    .day { flex: 1 0 116px; }
    .tabs a { padding: 18px 28px 12px; }

    .fx-table { font-size: 14px; }
    .fx-table td { height: 48px; padding: 6px 12px; }
    .fx-table td.h, .fx-table td.a { width: 30%; }
    .fx-table td.v { width: 33%; }
    .fx-table td.vs, .fx-table td.i { width: 3%; }

    .st-table { font-size: 14px; }
    .st-table th { width: 48px; }
    .st-table th.pos { width: 44px; }
    .st-table th:nth-child(6), .st-table th:nth-child(7), .st-table th:nth-child(8) { width: 56px; }
    .st-table th.pts { width: 64px; }
    .st-table th.adj { width: 26px; }
    .st-table td { height: 44px; }
    .st-table td.team { padding: 2px 10px; }

    .cell-table td { height: 46px; }
    .site-foot { padding: 26px 30px 30px; }
    .site-foot nav { display: flex; gap: 22px; }
}

/* ---------- Player page ---------- */
.player-name { margin: 2px 2px 0; text-align: center; font-size: 24px; color: var(--green); }
.player-sub { margin: 2px 0 10px; text-align: center; font-size: 14px; }
.player-sub a { color: var(--green); font-weight: 700; }
.player-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 8px 0; text-align: center; }
.player-kpis div { padding: 10px 2px; background: #fff; }
.player-kpis strong { display: block; font-size: 20px; color: var(--green); }
.player-kpis span { font-size: 11.5px; text-transform: uppercase; color: var(--muted); }
.form-line { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 8px 2px; font-size: 13px; }
.pill { display: inline-block; min-width: 22px; padding: 2px 5px; text-align: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--muted); }
.pill.w { background: var(--green); }
.pill.l { background: #a33; }
.pstats.seasons td.who span { white-space: nowrap; }
.pstats tr.total td { font-weight: 700; background: #e9edd9; }
.pstats tr.total td.who { background: var(--green-dark); }
.cell-table.history td.no { width: 1%; white-space: nowrap; }
.cell-table a { color: var(--green); }
.pstats td.who a { color: #fff; text-decoration: none; }
.pstats td.who a:hover { text-decoration: underline; }

/* ---------- Search ---------- */
.search-btn { display: inline-flex; padding: 6px; }
.search-btn svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.search-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 8px 0 4px; }
.search-form .input { font-size: 16px; padding: 10px; }
.search-form .btn { width: auto; min-width: 0; padding: 0 18px; }
.player-kpis.three { grid-template-columns: repeat(3, 1fr); }
.more-link { float: right; font-size: 13px; font-weight: 700; color: var(--green); text-transform: none; }

/* ---------- Squad + change log ---------- */
.remove-row { margin: -4px 0 8px; text-align: right; }
.remove-row .clear-link { font-size: 12px; }
.cell-table.changes tr.flagged td { background: #fff6d6; }
.cell-table.changes tr.undone td { opacity: .55; }
.tag.warn { background: #b8860b; }

/* ---------- Season setup ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
textarea.input { font-family: inherit; resize: vertical; }
.team-row { grid-template-columns: 1fr; }
.add-team { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 6px 0 12px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.btn-row .btn { width: auto; min-width: 0; padding-left: 16px; padding-right: 16px; }
.week-head { margin: 16px 2px 4px; font-size: 14px; color: var(--green); text-transform: uppercase; }
.cell-table.preview td { height: 34px; padding: 4px 8px; font-size: 13px; }
.cell-table.preview td.div { width: 1%; white-space: nowrap; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.note.warn { border-left-color: #b8860b; background: #fff6d6; }
a.btn { display: inline-block; text-align: center; text-decoration: none; }
@media (min-width: 900px) { .team-row { grid-template-columns: 1.3fr 1.3fr auto auto; } }
.claim-row { display: grid; gap: 6px; padding: 8px 10px; margin-top: 2px; background: #fff; font-size: 14px; }
.claim-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.st-table td.team small.wd { display: block; font-size: 10px; color: #f1e6c8; text-transform: uppercase; }

/* ---------- Accounts ---------- */
.acct-grid td { font-size: 13px; }
.acct-grid td.a-paid, .a-paid { color: #2d6a1f; }
.acct-grid td.a-due, .a-due { background: #fff0cf; color: #7a5a00; }
.acct-grid td.a-overdue, .a-overdue { background: #fbe0e0; color: #a02323; font-weight: 700; }
.acct-grid td.a-waived, .a-waived, .acct-grid td.a-notdue, .a-notdue { color: var(--muted); }
.cell-table .a-overdue, .cell-table .a-due { background: transparent; }
.cell-table td.a-overdue { color: #a02323; }
.a-key { padding: 1px 6px; font-size: 12px; }
.player-kpis strong.bad { color: #a02323; }
.input.alloc { width: 90px; text-align: right; padding: 6px; font-size: 15px; }
.inline-form { display: inline-flex; gap: 8px; }
.cell-table.bank td { padding: 6px 8px; font-size: 13px; }
.cell-table.bank td.no { white-space: nowrap; color: var(--muted); }

/* ---------- Result sheets ---------- */
.sheet-img { display: block; max-width: 100%; max-height: 70vh; margin: 8px auto; border: 1px solid #ccc; }
.cell-table.sheet-read td { padding: 4px 8px; font-size: 13px; height: auto; }
.tabs.small { margin: 6px 0; }
.why { color: #a05a00; font-size: 13px; font-weight: 700; }
.sheet-frame { padding: 8px; margin-top: 4px; background: #fff; }
.sheet-side { display: grid; gap: 4px; margin: 6px 0; padding-left: 8px; border-left: 3px solid var(--green); }
.sheet-side .input { font-size: 15px; padding: 7px; }
.sheet-side .input.unsure { border-color: #d08a00; background: #fff8e6; }
.sheet-side .winner { font-size: 13px; font-weight: 700; color: var(--green); }
.btn.danger { background: #fff; color: #a02323; border: 2px solid #a02323; }
.btn.danger:hover { background: #a02323; color: #fff; }
.confirm-panel { margin: 10px 0; }
.match-card { margin: 8px 0; padding: 8px; background: #fff; }
.match-card p { margin: 0 0 6px; }

/* ---------- Suggest-as-you-type ---------- */
.suggest-list { list-style: none; margin: -2px 0 8px; padding: 0; background: #fff; border: 2px solid var(--green); max-height: 260px; overflow: auto; }
.suggest-list[hidden] { display: none; }
.suggest-list button { display: block; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #e3e8e0; background: none; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.suggest-list button:hover, .suggest-list button:focus { background: #eef3e6; }
.suggest-list span { color: var(--muted); }

/* ---------- Rating explainer ---------- */
.explainer { background: #fff; padding: 4px 14px 12px; font-size: 15px; }
.explainer h3 { margin: 14px 0 4px; font-size: 14px; color: var(--green); text-transform: uppercase; }
.explainer p, .explainer ul { margin: 4px 0 8px; }
.explainer ul { padding-left: 20px; }
.explainer li { margin: 3px 0; }
details.how { margin: 6px 0 10px; }
details.how > summary { cursor: pointer; color: var(--green); font-weight: 700; padding: 6px 2px; }
.role-actions { display: flex; gap: 14px; justify-content: flex-end; margin: -2px 0 8px; }
.role-actions form { margin: 0; }
.role-actions .clear-link { font-size: 12px; margin-top: 0; }
.captain-options summary { cursor: pointer; list-style: none; color: var(--muted); font-size: 12px; text-decoration: underline; }
.captain-options summary::-webkit-details-marker { display: none; }
.captain-options form { display: flex; gap: 6px; margin-top: 6px; }

/* ---------- Invites ---------- */
.wa-icon { width: 20px; height: 20px; flex: none; }
.invite-row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 2px 6px; font-size: 13px; }
.wa-invite { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 2px solid #25D366; color: #128c4a; font-weight: 700; text-decoration: none; background: #fff; }
.wa-invite:hover { background: #eafaf1; }
.role-note { margin: -4px 0 8px; text-align: right; }

/* Team-sheet change awaiting approval */
.change-box .change-lines { margin: 6px 0 8px 18px; padding: 0; font-size: 15px; }
.change-box form { display: inline-block; margin: 0; }
/* "Edit Team" beside the Score sheet heading; the panel opens underneath it */
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sheet-head .sq-heading { margin-bottom: 0; }
.sheet-head label.btn { cursor: pointer; margin: 8px 0 0; }
.edit-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.edit-panel { display: none; margin-top: 10px; padding: 10px; background: #fff; }
#edit-team-home:checked ~ #edit-panel-home, #edit-team-away:checked ~ #edit-panel-away { display: block; }
.edit-panel .sheet-form { margin-top: 0; }

.winter-toggle { margin-top: 10px; }

/* Season visibility switch (season setup page) */
.visibility-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; margin: 8px 0; border-left: 6px solid var(--green); background: #fff; }
.visibility-box.is-hidden { border-left-color: #c58a00; background: #fff8e6; }
.visibility-box form { margin: 0; flex: none; }
.tag.hidden-tag { background: #c58a00; color: #fff; }

.week-head.cup-week { background: #fff3d6; color: #7a5600; padding: 6px 10px; margin-top: 10px; }

/* Season calendar projection box */
.proj-end { font-size: 18px; margin: 0 0 6px; }
.proj-lines { margin: 0; padding-left: 18px; font-size: 15px; }
.proj-lines li { margin: 4px 0; }
.proj-warn { color: #8a5a00; }
.proj-cups div { font-size: 14px; padding: 2px 0; }
.proj-cups summary { cursor: pointer; color: var(--green); }

.weekoff-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef1f3; }
.weekoff-row form { margin: 0; }
.week-head.off-week { background: #e8edf0; color: #4a5a63; padding: 6px 10px; margin-top: 10px; }
.daystrip .day.off { opacity: .6; } .daystrip .day.off .c.off { background: #c9d2d7; color: #3b4a52; font-style: normal; }

/* ===== Cup bracket (chart view) ===== */
.b-from { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }
.b-from .input { width: auto; }
.bracket { --slot: 112px; display: flex; overflow-x: auto; padding: 4px 4px 16px; align-items: flex-start; }
.bracket.editable { --slot: 176px; }
.b-round { flex: none; width: 232px; margin-right: 32px; }
.b-round h3 { margin: 0 0 8px; font-size: 17px; font-weight: 400; }
.b-col { display: flex; flex-direction: column; height: calc(var(--first) * var(--slot)); }
.b-slot { flex: 1; position: relative; display: flex; align-items: center; }
.b-tie { width: 100%; font-size: 13px; }
.b-side { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 3px 8px; background: linear-gradient(#f3f3f3, #dcdcdc); border: 1px solid #c8c8c8; border-radius: 3px; color: #555; min-height: 24px; }
.b-side .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-side .sc { min-width: 18px; text-align: center; background: #fff; border: 1px solid #c8c8c8; font-weight: 700; padding: 0 3px; }
.b-side .sc:empty { display: none; }
.b-side.won { color: #222; font-weight: 700; }
.b-side.empty { color: #999; }
.b-tie.is-bye .b-side:last-of-type { color: #888; }
.b-meta { font-size: 11px; color: #1d4e89; padding: 2px 8px; line-height: 1.35; }
.b-meta .b-where { display: block; }
.b-form { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.b-form .input { width: auto; min-width: 0; flex: 1 1 100px; font-size: 13px; padding: 4px; }
/* connectors: a stub out of each tie, joined in pairs, running into the next round's tie */
.b-slot::after { content: ''; position: absolute; right: -16px; width: 16px; border: 0 solid #9aa5ab; }
.b-round:not(.b-final) .b-slot:nth-child(odd)::after { top: 50%; bottom: 0; border-top-width: 1px; border-right-width: 1px; }
.b-round:not(.b-final) .b-slot:nth-child(even)::after { top: 0; bottom: 50%; border-bottom-width: 1px; border-right-width: 1px; }
.b-round.b-final .b-slot::after { top: 50%; height: 0; border-top-width: 1px; }
.b-round:not(:first-child) .b-slot::before { content: ''; position: absolute; left: -16px; width: 16px; top: 50%; border-top: 1px solid #9aa5ab; }
.b-champion .b-side { background: #eef6e6; border-color: #b9d3a0; }

.b-override summary { cursor: pointer; font-size: 11px; color: var(--green); padding: 3px 8px; }
.bracket.editable { --slot: 124px; }

/* Cup night page (View Singles KO / Doubles KO) */
.cup-tie-card .cup-side { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: #f3f6f7; margin-top: 4px; }
.cup-tie-card .cup-side.won { background: #e3efd6; }
.cup-tie-card .cup-v { text-align: center; color: var(--muted); font-size: 13px; margin: 2px 0; }
.cup-score { font-size: 20px; font-weight: 700; min-width: 1.5em; text-align: center; }
.cup-who strong { display: block; font-size: 18px; line-height: 1.2; }
.cup-who small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.cup-score-input { width: 3.4em; text-align: center; font-size: 20px; padding: 6px 4px; flex: none; }
.score-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.score-row .input { width: 4.5em; text-align: center; font-size: 18px; }

/* Notification prompt */
.push-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 14px; background: #eef3e6; border-bottom: 1px solid #cfdcbc; font-size: 14px; }
.push-prompt[hidden] { display: none; }
.push-prompt .push-actions { display: flex; align-items: center; gap: 12px; }

/* Cup entry tick lists: one player per row */
.role-check.cup-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 2px; border-bottom: 1px solid #eef1f3; font-size: 16px; }
.role-check.cup-opt input { width: 22px; height: 22px; flex: none; }
.captain-card p.smaller + .role-check.cup-opt { margin-top: 2px; }
.cup-tie-card .cup-next { margin: 8px 0 0; padding: 8px 10px; background: #eef3e6; border-left: 4px solid var(--green); font-size: 14px; }

.b-tie.is-now { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 6px; }

/* Sign-in prompt on the home page for signed-out visitors */
.signin-popup { border: 0; border-radius: 12px; padding: 22px 20px 18px; max-width: min(92vw, 420px); box-shadow: 0 12px 40px rgba(0,0,0,.35); color: var(--text); }
.signin-popup::backdrop { background: rgba(20, 30, 10, .55); }
.signin-popup h2 { margin: 0 0 8px; font-size: 22px; color: var(--green); }
.signin-popup p { margin: 0 0 10px; line-height: 1.45; }
.signin-popup .signin-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; text-align: center; }
.signin-popup .btn { display: block; text-align: center; }

/* "Someone wants to join your team" banner for captains */
.joinreq .joinreq-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 6px; }
.joinreq .joinreq-actions { display: flex; gap: 8px; }
.joinreq .joinreq-actions form { margin: 0; }
.joinreq a { color: inherit; }

/* Match page frames, like the old site: a 1 / 0 box per side so you can see who won each frame */
.cell-table.frames td.sc { width: 38px; min-width: 38px; padding: 6px 0; text-align: center; font-weight: 700; background: #eef2f3; color: var(--muted); border-left: 3px solid #fff; }
.cell-table.frames td.sc.w { background: var(--green); color: #fff; }
.cell-table.frames td.sc.l { background: #eef2f3; color: #8a979e; }
.cell-table.frames tr.frames-head td { padding: 12px 8px 2px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: transparent; }

/* Tap-the-star pop-up on the league table */
.st-table td.adj { position: relative; width: 28px; text-align: center; }
details.adj-pop { display: inline-block; }
details.adj-pop > summary { list-style: none; cursor: pointer; font-weight: 700; color: var(--green); padding: 2px 8px; font-size: 18px; line-height: 1; }
details.adj-pop > summary::-webkit-details-marker { display: none; }
details.adj-pop .adj-panel { position: absolute; right: 0; top: 100%; z-index: 30; width: 270px; max-width: 80vw; text-align: left; background: #fff; border: 1px solid #cfd8dc; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.25); padding: 10px 12px; font-size: 13.5px; line-height: 1.35; font-weight: 400; color: var(--text); }
details.adj-pop .adj-panel p { margin: 8px 0 0; }
details.adj-pop .adj-panel .neg { color: #b3261e; }
details.adj-pop .adj-panel .pos { color: var(--green); }

.cell-table.frames tr.frames-total td { border-top: 3px solid #fff; padding-top: 8px; padding-bottom: 8px; }
.cell-table.frames tr.frames-total td.sc { font-size: 17px; }