:root {
    --bg: #004400;            /* dark green page background (signature) */
    --brand: #004400;         /* primary buttons, panel-head text, h1 on light */
    --brand-dark: #003300;    /* hover/active on brand */
    --navy: #1B365D;          /* section headers + body text inside panels/tables */
    --ink: #1B365D;           /* content text = navy */
    --muted: #5b6b85;         /* muted navy-grey (inside panels/tables) */
    --muted-on-dark: #b9d7b4; /* muted text sitting directly on the green page */
    --panel: #F0F4F8;         /* panel body background */
    --panel-head: #d4e8d3;    /* light-green panel header */
    --panel-line: #d1dbe5;    /* panel + table borders */
    --line: #d1dbe5;          /* default border alias */
    --card: #ffffff;          /* white sub-cards (recents, stat cards) */
    --soft: #d4e8d3;          /* light-green accents/tints */
    --soft-line: #b9d4b6;
    --th-bg: #e3eaf1;         /* table header fill */
    --row-hover: #e8eef5;
    --input-bg: #d4e8d3;      /* light-green inputs (PoC look) */
    --input-line: #b6c4d4;
    --highlight: #fdf6cf;     /* searched-team cell highlight */
    --highlight-line: #efe4a0;
    --danger: #dc2626;
    --radius: 6px;
}

* { box-sizing: border-box; }

html { font-size: 14px; }    /* PoC base size — tighter than the 16px default */

body {
    margin: 0;
    font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--muted-on-dark);
    background: var(--bg);
}

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

/* ---- top bar ---- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: .7rem 1.25rem; background: #1f2937; border-bottom: 3px solid #004400;
    color: #fff;
}
.brand { font-weight: 700; text-decoration: none; color: #fff; font-size: 1.15rem; }
.topbar nav { display: flex; align-items: center; gap: 1.1rem; }
.topbar nav a { text-decoration: none; color: #cbd5e1; }
.topbar nav a:hover { color: #fff; }
.topbar .who { color: #9fb0c9; font-size: .85rem; }
.nav-drop { position: relative; display: inline-block; }
.nav-drop-btn { background: none; border: none; color: #cbd5e1; font: inherit; cursor: pointer; padding: 0; }
.nav-drop-btn:hover { color: #fff; }
.nav-drop-menu { position: absolute; top: 100%; left: 0; margin-top: .4rem; z-index: 60; background: #fff; border: 1px solid var(--panel-line); border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.25); min-width: 9rem; overflow: hidden; }
.nav-drop-menu[hidden] { display: none; }
.topbar .nav-drop-menu a { display: block; padding: .5rem .85rem; color: var(--brand); text-decoration: none; }
.topbar .nav-drop-menu a:hover { background: var(--soft); color: var(--brand-dark); }
.score-pair { display: flex; align-items: center; gap: .5rem; }
.score-pair input { width: 4rem; text-align: center; margin-top: .25rem; }
.date-with-today { display: flex; align-items: center; gap: .5rem; }
.date-with-today input[type=date] { flex: 1 1 auto; margin-top: 0; }
.date-with-today .btn { flex: 0 0 auto; }
.topbar .linkish { color: #cbd5e1; }
.topbar .linkish:hover { color: #fff; }

/* ---- content shell ----
   Default: a single light "page card" on the dark-green body, so every page
   stays readable without per-page edits. Panel-structured pages (Matches)
   opt out via :has(), letting the green show between their own panels. */
.wrap {
    max-width: 1400px; margin: 1.5rem auto; padding: 1.5rem 1.75rem;
    background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius);
    color: var(--navy);
}
.wrap:has(> .panel) { background: transparent; border: none; padding: 0 1.25rem; }
.foot { max-width: 1400px; margin: 1.5rem auto; padding: 0 1.75rem; color: var(--muted-on-dark); font-size: .8rem; }

h1 { font-size: 1.5rem; margin: 0 0 .9rem; color: var(--brand); }
.wrap:has(> .panel) h1 { color: #fff; }     /* white h1 on the dark-green page */
.wrap:has(> .panel) h1 .muted,
.wrap:has(> .panel) h1 a,
.wrap:has(> .panel) h1 a:link,
.wrap:has(> .panel) h1 a:visited,
.wrap:has(> .panel) h1 a:hover { color: var(--muted-on-dark); }  /* legible sub-text/link on dark green */
h2 { font-size: 1.15rem; color: var(--navy); }
h3 { font-size: 1rem; color: var(--navy); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

.head-row { display: flex; align-items: center; justify-content: space-between; }

/* ── Standard page header (DESIGN_STANDARD.md): a floating white panel. ── */
.pagehead { padding: 14px 18px; margin-bottom: 16px; }
.pagehead-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pagehead-title { margin: 0; font-size: 1.4rem; color: var(--brand); }
.pagehead-sub { font-weight: 400; font-size: .9rem; color: var(--navy); }
.pagehead-actions { display: flex; gap: 8px; align-items: center; }
.pagehead-actions .view-on-site { color: var(--brand); text-decoration: none; border-bottom: 1px dotted var(--brand); font-size: .9rem; }
.pagehead-actions .view-on-site:hover { color: var(--brand-dark); border-bottom-color: var(--brand-dark); }
.pagehead-tabs { margin: 12px 0 -14px; border-bottom: none; }
/* The header is a .panel, so on a dark-green page the global green-page rules try
   to whiten its text — restate the on-white colours with higher specificity. */
.wrap:has(> .panel) .pagehead-title { color: var(--brand); }
.wrap:has(> .panel) .pagehead-sub { color: var(--navy); }
.wrap:has(> .panel) .pagehead h1 a { color: var(--brand); }
.wrap:has(> .panel) .pagehead-tabs .tab { color: var(--navy); }
.wrap:has(> .panel) .pagehead-tabs .tab.active { color: var(--brand); background: var(--panel-head); }

/* ── Standard locate list bar (count + pagination), a floating panel. ── */
.listbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 16px; }
.listbar--top { margin: 0 0 14px; }
.listbar--bottom { margin: 14px 0 0; }
.listbar-count { color: var(--navy); font-size: 13px; font-weight: 600; }
.listbar-nav { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.listbar-step { color: var(--brand); text-decoration: none; font-weight: 600; }
.listbar-step.is-disabled { color: var(--muted); opacity: .5; cursor: default; }
.listbar-page { color: var(--navy); }

/* ── Standard edit-page audit + record-nav bar, a floating panel. ── */
.auditbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 16px; font-size: 13px; flex-wrap: wrap; }
.auditbar--top { margin: 0 0 14px; }
.auditbar--bottom { margin: 14px 0 0; }
.auditbar-meta { color: var(--navy); }
.auditbar-meta strong { font-weight: 700; }
.auditbar-sep { color: var(--muted); margin: 0 5px; }
.auditbar-nav { display: flex; align-items: center; gap: 12px; }
.auditbar-step { color: var(--brand); font-weight: 600; text-decoration: none; }
a.auditbar-step:hover { text-decoration: underline; }
.auditbar-step.is-disabled { color: var(--muted); opacity: .5; cursor: default; }
.auditbar-page { color: var(--navy); }

/* ---- panels (the PoC card structure) ---- */
.panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); margin-bottom: 1.25rem; color: var(--navy); }
.panel-head { background: var(--panel-head); padding: .75rem 1rem; border-bottom: 1px solid var(--panel-line); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; font-weight: 600; color: var(--brand); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.panel-head .ph-title { font-weight: 600; }
.panel-body { padding: 1rem; }
/* Right-side controls in a panel head (status badge + close/reopen on the season Overview). */
.panel-head-actions { display: flex; align-items: center; gap: .5rem; }
/* A detail grid sitting directly in a panel body shouldn't draw its own card. */
.panel-body > dl.detail { background: transparent; border: 0; border-radius: 0; padding: 0; }
.panel-body > .note:first-child, .panel-body > .add-tools { margin-top: 0; }

/* ---- cards ---- */
.card { background: var(--card); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.card.narrow { max-width: 360px; margin: 3rem auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1rem 0; }
.card.stat { text-align: center; text-decoration: none; color: var(--navy); border-top: 3px solid var(--brand); }
.card.stat .num { display: block; font-size: 1.9rem; font-weight: 700; color: var(--brand); }
.card.stat .lbl { color: var(--muted); }

/* ---- tables ---- */
table.grid { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--panel-line); border-radius: var(--radius); overflow: hidden; color: var(--navy); }
.grid th, .grid td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--panel-line); font-size: .93rem; }
.grid th { background: var(--th-bg); font-weight: 600; color: var(--navy); }
.grid th a { color: var(--navy); text-decoration: none; }
.grid td.num, .grid th.num { text-align: right; }
.grid tbody tr:hover { background: var(--row-hover); }
.grid tr:last-child td { border-bottom: none; }
.grid a { text-decoration: none; }
.grid a:hover { text-decoration: underline; }

dl.detail { display: grid; grid-template-columns: 160px 1fr; gap: .35rem 1rem; background: var(--card); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 1.1rem 1.25rem; color: var(--navy); }
dl.detail dt { color: var(--muted); }
dl.detail dd { margin: 0; }

/* ---- forms ---- */
form.stack label, .card label { display: block; margin: 0 0 .85rem; font-size: .93rem; color: var(--navy); font-weight: 500; }
form .row { display: flex; gap: 1rem; }
form .row label { flex: 1; }
label { color: var(--navy); }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], select, textarea {
    width: 100%; padding: 6px 8px; margin-top: .25rem;
    border: 1px solid var(--input-line); border-radius: 4px; font: inherit;
    background: var(--input-bg); color: var(--navy);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: var(--navy); }
textarea { resize: vertical; }
label.check { display: flex; align-items: center; gap: .5rem; }
label.check input { width: auto; margin: 0; }
small.muted { font-weight: 400; }
small.err { color: var(--danger); }
.has-error input, .has-error select { border-color: var(--danger); }

/* ---- buttons (PoC: neutral default, green primary, solid red danger) ---- */
.actions { display: flex; gap: .6rem; margin-top: .5rem; align-items: center; }
.btn { display: inline-block; padding: 6px 14px; border: 1px solid #cdd5df; border-radius: 4px; background: #fff; color: #1f2937; text-decoration: none; cursor: pointer; font: inherit; line-height: 1.3; }
.btn:hover { background: #eef1f5; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn.sm, .btn.small { padding: 3px 9px; font-size: .82rem; }
.linkish { border: none; background: none; color: var(--brand); cursor: pointer; font: inherit; padding: 0; }
.linkish.danger { color: var(--danger); }
.inline { display: inline; }

/* ---- alerts / notes ---- */
.alert { padding: .6rem .85rem; border-radius: 4px; margin: 0 0 1rem; }
.alert.error { background: #fdecea; color: var(--danger); }
.alert.notice { background: #fff; color: var(--brand-dark); border: 1px solid var(--soft-line); }
.alert ul.errs { margin: .15rem 0 0; padding-left: 1.1rem; }
.alert ul.errs li { margin: .1rem 0; }
.alert.warn { background: #fdf3da; color: #7a531a; border: 1px solid #ecd9a6; }
.alert.warn ul { margin: .4rem 0; padding-left: 1.2rem; }
.alert.warn a { color: #7a531a; }
.alert.warn .check { margin-top: .4rem; font-weight: 600; }
.note { background: #fff; border: 1px solid var(--soft-line); border-radius: 4px; padding: .6rem .85rem; margin: 0 0 1rem; color: var(--muted); }

.pager { display: flex; gap: 1rem; margin-top: 1rem; align-items: center; }
.pager a { text-decoration: none; }

/* ---- filter bars ---- */
.filterbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.filterbar input[type=text] { flex: 1 1 220px; margin-top: 0; }
.filterbar select { flex: 0 1 auto; width: auto; margin-top: 0; }
.filterbar .btn { margin-top: 0; }

/* Teams-using-this-ground / season-teams panels */
h2#teams { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--soft-line); }
.teams td, .teams th { vertical-align: middle; }
.teams td.actions-col, .teams th.actions-col { white-space: nowrap; text-align: right; width: 1%; }
.teams .actions-col .btn { padding: .3rem .6rem; font-size: .85rem; }
.teams .actions-col form.inline { display: inline; margin-left: .35rem; }
.teams td input[type=text] { margin-top: 0; width: 100%; min-width: 90px; }
.teams td input[type=checkbox] { margin: 0; }
.teams tr.editing td { background: #eef5fb; }
.findbar, .addbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: 0 0 1rem; }
.findbar label, .addbar label { display: flex; flex-direction: column; font-size: .85rem; gap: .25rem; }
.findbar input[type=text], .addbar input[type=text], .findbar select, .addbar select { margin-top: 0; width: auto; }
.findbar .btn, .addbar .btn { margin-top: 0; }
.addbar label.check { flex-direction: row; align-items: center; gap: .4rem; }

/* Points fieldset */
fieldset.points { border: 1px solid var(--panel-line); border-radius: var(--radius); padding: .6rem .8rem 0; margin: 0 0 .85rem; }
fieldset.points legend { font-size: .82rem; color: var(--muted); padding: 0 .35rem; }
.points-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.points-grid label { display: block; margin: 0 0 .6rem; font-size: .72rem; line-height: 1.2; color: var(--navy); }
.points-grid input[type=text] { padding: .4rem .35rem; text-align: center; }
@media (max-width: 760px) { .points-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 460px) { .points-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Season Teams panel */
ul.entries { list-style: none; margin: 0 0 .4rem; padding: 0; }
ul.entries li { padding: .15rem 0; font-size: .88rem; }
ul.entries .tag { display: inline-block; background: var(--soft); color: var(--brand-dark); border: 1px solid var(--soft-line); border-radius: 4px; font-size: .72rem; padding: 0 .3rem; }
ul.entries form.inline { display: inline; }
details.add-entry { margin-top: .3rem; }
details.add-entry summary { cursor: pointer; color: var(--brand); }
.entry-form { margin-top: .5rem; padding: .6rem; background: var(--soft); border: 1px solid var(--soft-line); border-radius: 4px; }
.entry-form label { display: flex; flex-direction: column; gap: .2rem; margin: 0; }
.entry-form input[type=text], .entry-form select { margin-top: 0; width: auto; }
.ef-top { display: flex; gap: .5rem; align-items: flex-end; margin-bottom: .5rem; }
.ef-top .ef-date { margin-left: auto; }
.ef-mid { display: flex; gap: .5rem; align-items: flex-end; margin-bottom: .5rem; }
.entry-form .num3 { width: 3.5rem; text-align: center; }
.entry-form .num-date { width: 7rem; }
.entry-deltas { display: flex; gap: .5rem; align-items: flex-end; }
.entry-form .entry-detail { margin-bottom: .5rem; }
.entry-form .entry-detail textarea { width: 100%; resize: vertical; min-height: 4.5rem; }
.entry-form .ef-actions { display: flex; justify-content: flex-end; }
.entry-detail-text { white-space: pre-line; }

/* Related seasons */
h2#related { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--soft-line); }
ul.related-list { list-style: none; margin: .5rem 0 1rem; padding: 0; }
ul.related-list li { padding: .4rem .6rem; background: var(--card); border: 1px solid var(--panel-line); border-radius: 4px; margin-bottom: .4rem; display: flex; justify-content: space-between; align-items: center; }
ul.related-list a { text-decoration: none; font-weight: 600; }
ul.related-list a:hover { text-decoration: underline; }
ul.related-list form.inline { display: inline; }

/* Back-to-top */
#to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--brand); background: var(--soft); color: var(--brand); font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
#to-top:hover { background: #fff; }
#to-top[hidden] { display: none; }

/* Progressive enhancement */
.js-only { display: none; }
body.js .js-only { display: block; }
body.js th.js-only, body.js td.js-only { display: table-cell; }
body.js .no-js-only { display: none; }
body.js .js-hide { display: none; }
#results.is-loading, #match-results.is-loading { opacity: .55; transition: opacity .1s; }

/* ============ Matches browse ============ */
/* Recents strip — cards inside a panel */
.recents-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.recent-card { flex: 1 1 0; min-width: 160px; background: var(--card); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: .7rem .9rem; text-decoration: none; color: var(--navy); }
.recent-card:hover { border-color: var(--brand); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.recent-card .rc-title { font-weight: 600; color: var(--navy); display: block; }
.recent-card .rc-sub { color: var(--muted); font-size: .85rem; display: block; margin-top: .15rem; }
.recent-card .rc-used { color: var(--muted); font-style: italic; font-size: .78rem; display: block; margin-top: .3rem; }

/* By team / by competition pill toggle */
.mode-pills { display: flex; gap: .4rem; }
.mode-pill { padding: .3rem .85rem; border-radius: 999px; border: 1px solid var(--panel-line); background: #fff; color: var(--navy); text-decoration: none; font-size: .88rem; }
.mode-pill.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Finder row (competition or team mode) */
.finder-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: start; }
.finder-grid.two { grid-template-columns: 1fr 2fr; }
@media (max-width: 900px) { .finder-grid, .finder-grid.two { grid-template-columns: 1fr; } }
.finder-grid label { display: block; font-size: .85rem; color: var(--navy); margin-bottom: .15rem; }

/* Clubs locate finder — single flex row; search box + country select share a
   height, compact buttons so Search + Clear sit on the same line. The base rule
   sets select { width:100% }, so widths are explicitly overridden here. */
.club-finder { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.club-finder #club-q { flex: 1 1 280px; max-width: 420px; width: auto;
    border: 1px solid var(--input-line); border-radius: 4px; background: var(--input-bg); color: var(--navy); }
.club-finder #club-country { width: auto; }
.club-finder #club-q,
.club-finder #club-country { height: 34px; box-sizing: border-box; padding: 4px 8px; margin: 0; font: inherit; }
.club-finder .btn { height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; }
.finder-actions { display: flex; gap: .5rem; margin-top: 1rem; }

/* Selected-team chip */
.team-chip { display: inline-flex; align-items: center; gap: .5rem; background: var(--navy); color: #fff; border-radius: 999px; padding: .3rem .4rem .3rem .8rem; font-size: .9rem; }
.team-chip .tc-x { border: none; background: none; color: #fff; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 .25rem; }

/* Results */
.results-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.month-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.month-btn { padding: .25rem .7rem; border: 1px solid var(--panel-line); border-radius: 999px; background: #fff; color: var(--navy); text-decoration: none; font-size: .82rem; }
.month-btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.month-btn:hover { border-color: var(--brand); }
table.matches td.is-team { background: var(--highlight); font-weight: 600; }
table.matches tbody tr:hover td.is-team { background: var(--highlight); }
table.matches .check-col { width: 1.6rem; text-align: center; }
table.matches td.num, table.matches th.num { white-space: nowrap; }
table.matches .score-note { display: block; font-size: .72rem; font-weight: 400; color: var(--muted); line-height: 1.1; margin-top: .1rem; }
table.matches .has-pens { cursor: help; }
table.matches .pen-mark { font-size: .68rem; font-weight: 700; color: var(--brand); vertical-align: super; margin: 0 .1rem; }
table.matches td.actions-col { white-space: nowrap; text-align: right; }
table.matches td.actions-col .btn { margin-left: .35rem; }
.bulk-bar { display: flex; justify-content: flex-start; margin: .9rem 0 0; }

/* ---- single-match editor ---- */
.three-col { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 1.25rem; align-items: start; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 1100px) { .three-col { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

/* panel-group: merge a set of panels into ONE block — the wrapper is the card,
   inner panels drop their own chrome and are split by thin dividers instead of
   gaps. Used on the match editor (date/result/venue, squads, events). No
   overflow:hidden here — the venue type-ahead must be free to escape. */
.panel-group { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); margin-bottom: 1.25rem; color: var(--navy); }
.panel-group > .three-col, .panel-group > .two-col { gap: 0; }
.panel-group > .three-col > .panel, .panel-group > .two-col > .panel { background: transparent; border: 0; border-radius: 0; margin: 0; }
.panel-group > .three-col > .panel > .panel-head, .panel-group > .two-col > .panel > .panel-head { background: transparent; border-radius: 0; }
.panel-group > .three-col > .panel + .panel, .panel-group > .two-col > .panel + .panel { border-left: 1px solid var(--panel-line); }
@media (max-width: 1100px) { .panel-group > .three-col > .panel + .panel { border-left: 0; border-top: 1px solid var(--panel-line); } }
@media (max-width: 800px) { .panel-group > .two-col > .panel + .panel { border-left: 0; border-top: 1px solid var(--panel-line); } }
.match-edit .panel-body label { display: block; margin: 0 0 .8rem; }
.match-edit textarea { width: 100%; }
.match-nav { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 0 1rem; }
.match-nav-pos { font-size: .85rem; color: var(--navy); min-width: 4.5rem; text-align: center; }
.btn.is-disabled { opacity: .45; pointer-events: none; }
.match-sub { font-weight: 400; font-size: .95rem; color: var(--navy); margin-left: .5rem; }
.match-sub a.view-on-site { color: var(--brand); text-decoration: none; border-bottom: 1px dotted var(--brand); }
.match-sub a.view-on-site:hover { color: var(--brand-dark); border-bottom-color: var(--brand-dark); }
/* On dark-green pages (e.g. player edit) the header sits on green, not a white card. */
.wrap:has(> .panel) .match-sub { color: var(--muted-on-dark); }
.wrap:has(> .panel) .match-sub a.view-on-site { color: var(--muted-on-dark); border-bottom-color: var(--muted-on-dark); }
.wrap:has(> .panel) .match-sub a.view-on-site:hover { color: #fff; border-bottom-color: #fff; }
.teams-fixed { font-size: 1.05rem; margin: .2rem 0 .8rem; }
.is-hidden { display: none !important; }
.is-asleep { opacity: .5; }
.audit-line { margin-top: 1rem; }
.wrap:has(> .panel) .audit-line, .wrap:has(> .panel) .audit-line.muted { color: var(--muted-on-dark); }

.score-grid { margin: .4rem 0; }
.walkover-box { margin-top: .6rem; padding: .85rem .95rem 1rem; background: var(--card); border: 1px solid var(--panel-line); border-radius: var(--radius); }
.walkover-box .note { background: var(--panel); }
.wo-inner { max-width: 26rem; margin: 0 auto; text-align: center; }
.wo-winner { display: block; width: 100%; margin: .2rem 0 1rem; text-align: left; }
.wo-winner select { width: 100%; }
.wo-block { margin: 0 0 1rem; }
.wo-block:last-child { margin-bottom: 0; }
.wo-block-title { display: block; font-weight: 600; color: var(--navy); margin-bottom: .35rem; }
.wo-pair { display: flex; align-items: flex-end; justify-content: center; gap: .75rem; }
.wo-pair label { display: flex; flex-direction: column; align-items: center; gap: .25rem; font-size: .85rem; color: var(--muted); }
.wo-pair input { width: 5rem; text-align: center; }
.wo-dash { align-self: center; padding-bottom: .35rem; color: var(--muted); }
.wo-hint { display: block; margin-top: .4rem; }
.sg-row { display: grid; grid-template-columns: 2rem 1fr 5.5rem 1fr; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.sg-head { font-size: .78rem; color: var(--muted); text-align: center; }
.sg-head span:nth-child(2), .sg-head span:nth-child(4) { text-align: center; }
.sg-gate { margin: 0; display: flex; justify-content: center; }
.sg-num { width: 100%; text-align: center; margin-top: 0; }
.sg-label { text-align: center; font-size: .82rem; color: var(--navy); }
.sg-num:disabled { background: #c8d2dd; color: #4a5d7e; }

/* Type-ahead */
.ta { position: relative; }
.ta-field { min-width: 16rem; }
.ta-field .ta { width: 100%; }
.findbar .ta .ta-input, .addbar .ta .ta-input, .ta input.ta-input, .finder-grid .ta .ta-input { width: 100%; margin-top: .25rem; box-sizing: border-box; }
.rel-line { align-items: flex-end; }
.rel-line .rel-comp-field { flex: 1 1 24rem; min-width: 18rem; }
.rel-line #ta-rel-form { display: flex; gap: .5rem; align-items: flex-end; margin: 0; }
.ta-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--card); border: 1px solid var(--panel-line); border-top: none; border-radius: 0 0 6px 6px; max-height: 16rem; overflow-y: auto; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.ta-item { padding: .4rem .6rem; cursor: pointer; color: var(--navy); }
.ta-item:hover, .ta-item.is-active { background: var(--soft); }
.ta-empty { padding: .4rem .6rem; color: var(--muted); }

/* Staged chips */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--soft); border: 1px solid var(--soft-line); border-radius: 999px; padding: .2rem .3rem .2rem .7rem; font-size: .88rem; color: var(--navy); }
.chip-x { border: none; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--muted); padding: 0 .2rem; }
.chip-x:hover { color: var(--danger); }
.add-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem; }
.add-tool { background: var(--card); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.add-tool h3 { margin: 0 0 .6rem; font-size: 1rem; color: var(--brand); }
ul.checklist { list-style: none; margin: .5rem 0; padding: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--panel-line); border-radius: 4px; }
ul.checklist li { padding: .3rem .6rem; border-bottom: 1px solid var(--panel-line); }
ul.checklist li:last-child { border-bottom: none; }
ul.checklist label.check { margin: 0; }
ul.checklist label.is-in { color: var(--muted); }
@media (max-width: 760px) { .add-tools { grid-template-columns: 1fr; } }
.venue-flags { display: flex; gap: 1.25rem; margin: .2rem 0 .6rem; }
.venue-flags .check { margin: 0; }
.panel-body.locked { opacity: .55; pointer-events: none; }
.form-row-inline { display: flex; gap: .8rem; }
.form-row-inline label { flex: 1 1 auto; }

/* ---- squads (step 3) ---- */
.section-h { color: #004400; margin: 1.5rem 0 .75rem; font-size: 1.1rem; }
.squad-cols { align-items: start; }
.squad-copy-form { margin-bottom: 1rem; }
.squad-table { width: 100%; }
.squad-table th, .squad-table td { padding: 4px 8px; }
.squad-table .col-in { width: 38px; text-align: center; }
.squad-table .col-pos { width: 150px; }
.squad-table .col-cap { width: 52px; text-align: center; }
.squad-table .col-evt { width: 44px; text-align: center; color: #4a5d7e; }
.squad-table select { margin: 0; width: 100%; }
.squad-avail-head td { background: #e3eaf1; color: #4a5d7e; padding-top: 8px; }
.lineup-flag { font-weight: 600; font-size: .8rem; }
.lineup-red { color: #dc2626; }
.lineup-amber { color: #b45309; }
.lineup-blue { color: #2563eb; }

/* ---- match events (step 4) ---- */
.events-cols { align-items: start; }
.event-add-form { margin-bottom: 1rem; }
.event-rows { display: flex; flex-direction: column; gap: 4px; }
.event-row { display: grid; grid-template-columns: 88px 60px 56px 1fr 1.4fr 28px; gap: 6px; align-items: center; }
.event-row-head { font-size: .72rem; font-weight: 600; color: #4a5d7e; text-transform: uppercase; letter-spacing: .02em; }
.event-row select, .event-row input { margin: 0; width: 100%; }
.btn-remove-row { border: none; background: none; color: #94a3b8; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0; }
.btn-remove-row:hover { color: #dc2626; }
.event-add-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.events-table { width: 100%; margin-top: 1rem; }
.events-table .col-select { width: 30px; text-align: center; }
.events-table .col-half { width: 56px; }
.events-table .col-time { width: 64px; }
.events-table .col-action { width: 40px; text-align: center; }
.event-edit-grid {
    display: grid;
    /* PoC widths: Half 70 / Minute 55 / Injury 45 / Event 1fr / Player 1.5fr /
       Actions auto — keeps all six on one row without widening the table. */
    grid-template-columns: 70px 55px 45px 1fr 1.5fr auto;
    gap: 10px; align-items: end; padding: 8px 0;
}
.event-edit-grid label { display: flex; flex-direction: column; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #4a5d7e; gap: 2px; margin: 0; }
.event-edit-grid select, .event-edit-grid input { margin: 0; width: 100%; font-size: .93rem; padding: 4px 6px; }
.event-edit-actions { display: flex; gap: 6px; align-items: center; }
@media (max-width: 900px) {
    .event-edit-grid { grid-template-columns: 1fr 1fr; }
    .event-edit-grid .event-edit-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
.event-check { padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; font-size: .85rem; border-left: 4px solid; }
.event-check.lineup-red { background: #fef2f2; border-color: #dc2626; color: #991b1b; }
.event-check.lineup-blue { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.event-check div { margin-top: 4px; }
.bulk-actions { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.bulk-count { font-size: .8rem; color: #4a5d7e; }
.btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn.danger:hover { background: #b91c1c; }
.btn.danger:disabled { opacity: .45; cursor: default; }

/* ---- aggregated top-of-page warnings ---- */
.page-warnings { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 8px; margin: 0 0 1.25rem; border-left: 5px solid; }
.page-warnings.lineup-red { background: #fef2f2; border-color: #dc2626; color: #991b1b; }
.page-warnings.lineup-amber { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.page-warnings.lineup-blue { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.page-warnings .pw-icon { font-size: 1.25rem; line-height: 1.4; }
.page-warnings .pw-body { font-size: .9rem; }
.page-warnings .pw-line { margin-top: 4px; }
.page-warnings .pw-red { color: #991b1b; }
.page-warnings .pw-amber { color: #92400e; }
.page-warnings .pw-blue { color: #1e40af; }

/* ---- data-quality completion dot (Locate list) ---- */
.dq-col { width: 32px; text-align: center; }
th.dq-col { font-size: .85rem; color: #4a5d7e; }
.dq-dot { font-size: 1.85rem; line-height: 1; cursor: help; }
.dq-dot.dq-ok { color: #16a34a; }
.dq-dot.dq-blue { color: #3b82f6; }
.dq-dot.dq-amber { color: #f59e0b; }
.dq-dot.dq-red { color: #dc2626; }
.dq-dot.dq-none { color: #cbd5e1; }

/* ---- team-change lock note (edit match) ---- */
.lock-note { display: inline-block; margin-left: .4rem; font-size: .78rem; color: #b45309; white-space: nowrap; }

/* ---- match-header data flags (events missing a minute, no date, fixture) ---- */
.hdr-flag { display: inline-flex; align-items: center; margin: 0 .5rem .9rem 0; padding: .3rem .7rem; border-radius: 999px;
    background: #fff3e0; color: #b45309; border: 1px solid #f0c890; font-size: .85rem; font-weight: 600;
    text-decoration: none; white-space: nowrap; }
.hdr-flag:hover { background: #ffe9c7; }
.hdr-flag strong { font-weight: 700; }
/* Status callout (e.g. "This match is a Fixture") — informational blue, not a warning. */
.hdr-flag-status { background: #e7f0fb; color: #1b4f8a; border-color: #bcd6f0; }
.hdr-flag-status:hover { background: #d8e7f7; }

/* ---- fixture generator grid ---- */
.gf-table { width: 100%; }
.gf-table .gf-num { width: 34px; text-align: center; color: #6b7a90; }
.gf-table .gf-date { width: 112px; }
.gf-table .gf-home, .gf-table .gf-away { width: 24%; }
.gf-table .gf-sc { width: 34px; text-align: center; }
.gf-table .gf-vs { width: 20px; text-align: center; color: #6b7a90; font-weight: 600; }
.gf-table .gf-crowd { width: 78px; text-align: center; }
.gf-in { padding: 3px 5px; font-size: .9rem; }
.gf-in-date { width: 96px; }
.gf-in-sc { width: 30px; text-align: center; }
.gf-in-crowd { width: 64px; text-align: center; }
.gf-actions { display: flex; gap: 8px; align-items: center; margin: 1rem 0; }
.ph-aside { margin-left: auto; font-size: .82rem; color: #4a5d7e; }

/* ---- "date not known" marker in the matches list ---- */
.table.matches td.date-nk a, table.matches td.date-nk a { color: #7c8aa0; }
.nk-tag { font-style: italic; font-size: .82rem; color: #7c8aa0; white-space: nowrap; cursor: help; }

/* ---- results import ---- */
.ir-paste { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
.ir-actions { display: flex; gap: 8px; align-items: center; margin-top: 1rem; }
.ir-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .8rem; }
.ir-chip { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.ir-chip.ok { background: #e7f0fb; color: #1b4f8a; border: 1px solid #bcd6f0; }
.ir-chip.warn { background: #fff3e0; color: #b45309; border: 1px solid #f0c890; }
.ir-chip.bad { background: #fdeaea; color: #b42318; border: 1px solid #f0c0c0; }
.ir-chip.muted { background: #eef1f5; color: #5a6b80; border: 1px solid #d8dee7; }
.ir-block { margin: 0 0 1rem; }
.ir-table .ir-apply, .ir-table .ir-sc { text-align: center; }
.ir-table tr.ir-bad td { background: #fdeaea; }
.ir-table tr.ir-warn td { background: #fff7ec; }
.ir-table tr.ir-muted td { color: #8a97a8; }

.ir-map-form { margin: 0 0 1rem; }
.ir-map-table { width: auto; min-width: 380px; margin-bottom: .6rem; }
.ir-map-table select { min-width: 220px; }
.ir-all { display: inline-flex; align-items: center; gap: 3px; font-size: .75rem; font-weight: 600; cursor: pointer; white-space: nowrap; }

/* ---- bulk match entry grid ---- */
.bulk-table { width: 100%; }
.bulk-table .bk-num { width: 28px; text-align: center; color: #6b7a90; }
.bulk-table .bk-date { width: 104px; }
.bulk-table .bk-ko { width: 80px; }
.bulk-table .bk-sc { width: 30px; text-align: center; }
.bulk-table .bk-vs { width: 16px; text-align: center; color: #6b7a90; }
.bulk-table .bk-crowd { width: 68px; }
.bulk-table .bk-ref { width: 110px; }
.bulk-table .bk-x { width: 22px; text-align: center; }
.bk-in { padding: 3px 5px; font-size: .9rem; width: 100%; box-sizing: border-box; }
.bk-in-date { width: 96px; }
.bk-ko-wrap { display: inline-flex; align-items: center; gap: 2px; }
.bk-ko-wrap .bk-in { width: 28px; text-align: center; }
.bk-colon { font-weight: 600; color: #6b7a90; }
.team-drop { padding: 3px 5px; font-size: .88rem; max-width: 180px; }
.bk-remove { color: #b42318; text-decoration: none; font-weight: 700; }
.bk-remove:hover { color: #7a1a12; }
.bulk-actions { display: flex; gap: 8px; align-items: center; margin-top: 1rem; }
.b-round-row { margin-top: .8rem; }
.ir-edit-form { margin: 0 0 1rem; }
.ir-edit-head { font-weight: 600; color: var(--brand); margin-bottom: .4rem; font-size: .9rem; }

/* ---- inline crowd edit (browse list) ---- */
.crowd-cell.crowd-edit { cursor: pointer; }
.crowd-cell.crowd-edit:hover { background: #eef3f9; outline: 1px dashed #b6c4d4; }
.crowd-input { width: 64px; padding: 1px 4px; font-size: .85rem; text-align: right; border: 1px solid var(--brand); border-radius: 2px; }
.crowd-cell.crowd-saving { opacity: .55; }
.crowd-cell.crowd-saved { background: #d4e8d3; transition: background .3s; }
/* ---- inline full-time score edit (completeness work-queue) ---- */
.score-cell.score-edit { cursor: pointer; }
.score-cell.score-edit:hover { background: #eef3f9; outline: 1px dashed #b6c4d4; }
.score-inputs { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.score-input { width: 30px; padding: 1px 3px; font-size: .85rem; text-align: center; border: 1px solid var(--brand); border-radius: 2px; }
.score-dash { color: var(--muted); }
.score-cell.score-saving { opacity: .55; }
tr.row-removing { opacity: 0; transition: opacity .25s ease; }
.match-completeness { margin: 0 0 14px; }
.match-completeness .mc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.match-completeness .mc-label { font-size: .8rem; font-weight: 600; color: var(--navy); }
.match-completeness .mc-pct { font-size: .85rem; font-weight: 700; }

/* ---- players browse ---- */
.player-search { display: flex; gap: 8px; align-items: center; }
.player-search input[type="search"] { flex: 1; max-width: 420px; padding: 5px 8px; }
.players-table .actions-col { white-space: nowrap; text-align: right; }
.players-table tr.is-soundex td:first-child a { font-style: italic; }
.nat-chip { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; white-space: nowrap; font-size: .85rem; }
.nat-flag { display: inline-block; width: 20px; height: 15px; border: 1px solid rgba(0,0,0,.15); border-radius: 1px; vertical-align: -2px; object-fit: cover; }
.pager { display: flex; gap: 10px; align-items: center; margin-top: 1rem; }
#player-results.is-loading { opacity: .5; }
#club-results.is-loading { opacity: .5; transition: opacity .1s; }
.inline-form { display: inline; }

/* players list markers */
.soundex-marker { color: var(--muted); margin-left: .25rem; font-weight: 700; }
.retired-marker { display: inline-block; margin-left: .4rem; padding: 0 .3rem; font-size: .7rem; font-weight: 700; color: #fff; background: #6b7a8d; border-radius: 2px; vertical-align: middle; }
.prev-name { font-size: .78rem; }

/* ---- player edit/create form (ported from PoC admin.css) ---- */
/* Player edit: name fields left, headshot + details right. */
.player-split, .entity-split { display: flex; gap: 28px; align-items: flex-start; }
.player-split-main, .entity-split-main { flex: 1 1 auto; min-width: 0; }
.player-split-side, .entity-split-side { flex: 0 0 190px; text-align: center; padding-top: 4px; }
.player-split-side .headshot-side-empty { width: 100%; max-width: 180px; aspect-ratio: 3 / 4; margin: 0 auto; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--panel-line); border-radius: 6px; color: var(--ink); font-size: 12px; opacity: .65; }
.entity-split-side .cover-empty { width: 100%; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--panel-line); border-radius: 6px; color: var(--ink); font-size: 12px; opacity: .65; }
.headshot-side-meta, .entity-side-meta { margin-top: 8px; font-size: 12px; }
.headshot-side-meta a, .entity-side-meta a { display: block; margin-top: 3px; }
@media (max-width: 720px) { .player-split, .entity-split { flex-direction: column-reverse; } .player-split-side, .entity-split-side { align-self: flex-start; text-align: left; } .player-split-side .headshot-side-empty { margin: 0; } }

.form-section { margin: 18px 0; }
.form-section-title { font-size: 14px; font-weight: 600; color: var(--navy); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--panel-line); }
.form-row-labeled { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; margin-bottom: 12px; }
.form-row-labeled > label { text-align: right; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--navy); }
.form-row-labeled .form-input { min-width: 0; }
/* width:auto + min-width so inputs are sized to content, NOT full-width;
   inline rows can sit a date next to a checkbox without stretching. */
.form-row-labeled .form-input input[type="text"],
.form-row-labeled .form-input input[type="date"],
.form-row-labeled .form-input input[type="number"],
.form-row-labeled .form-input select { width: auto; min-width: 220px; padding: 5px 8px; }
.form-row-labeled .form-input .form-hint { margin-top: 4px; font-size: 12px; color: var(--muted); font-style: italic; }
.form-row-labeled .form-input-inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.inline-sublabel { font-size: 13px; color: var(--navy); font-weight: 600; }
.inline-city-input { min-width: 180px; }
.inline-check { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--navy); cursor: pointer; }
.inline-check input[type="checkbox"] { margin: 0; }
.inline-hint { margin-left: 4px; font-style: italic; }
.req { color: #b3261e; font-weight: 600; margin-left: 2px; }
.positions-fieldset { margin: 12px 0; padding: 12px 14px; border: 1px solid #b6c4d4; border-radius: 4px; background: #f7f9fc; }
.positions-fieldset legend { color: var(--navy); font-weight: 600; font-size: 13px; padding: 0 6px; }
.positions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 14px; }
.position-cell { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--navy); cursor: pointer; }
.position-cell input[type="checkbox"] { margin: 0; }
.form-row-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0; }
.form-cell label { display: block; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.form-cell textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.form-actions { display: flex; gap: 8px; margin-top: 12px; }
/* nationality pill multi-select */
.nat-picker { display: flex; flex-direction: column; gap: 6px; width: 320px; max-width: 100%; }
.form-row-labeled .form-input .nat-picker select { width: 100%; min-width: 0; padding: 5px 8px; }
.nat-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.nat-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px 2px 8px; background: #e7f0ff; border: 1px solid #b6c9ec; border-radius: 12px; font-size: 13px; color: #1B365D; }
.nat-pill button { border: none; background: none; cursor: pointer; font-size: 14px; line-height: 1; color: #5a6b86; padding: 0 2px; }
.nat-pill button:hover { color: #b3261e; }
.nat-pill .nat-flag { width: 18px; height: 13px; }
/* retired advisory (blue) + the [hidden] override the PoC documents */
.retired-advice { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 4px 10px; background: #eff6ff; border: 1px solid #3b82f6; border-radius: 4px; font-size: 13px; color: #1e40af; }
.retired-advice[hidden] { display: none; }
.retired-advice button { margin-left: 4px; }
.notice { padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; }
.notice.ok { background: #d4e8d3; border: 1px solid #9ec79b; color: #1d4d1a; }
.notice.err { background: #fde8e6; border: 1px solid #f0b3ad; color: #8a1c12; }
.notice.err ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.h1-right { float: right; font-size: 13px; }
@media (max-width: 720px) {
  .form-row-labeled { grid-template-columns: 1fr; gap: 4px; }
  .form-row-labeled > label { text-align: left; padding-top: 0; }
  .form-row-labeled .form-input input[type="text"],
  .form-row-labeled .form-input input[type="date"],
  .form-row-labeled .form-input input[type="number"],
  .form-row-labeled .form-input select { width: 100%; }
  .form-row-pair { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .positions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .positions-grid { grid-template-columns: 1fr; } }

/* player form — unsaved-change affordances (no auto-save) */
.nat-unsaved { margin-top: 4px; font-size: 12px; color: #8a5a00; background: #fff4e0; border: 1px solid #f0c97a; border-radius: 3px; padding: 2px 8px; display: inline-block; }
.nat-unsaved[hidden] { display: none; }
.form-dirty-note { align-self: center; font-size: 13px; color: #8a5a00; font-style: italic; }
.form-dirty-note[hidden] { display: none; }
.btn.primary.needs-save { box-shadow: 0 0 0 3px rgba(245, 159, 11, .45); }
/* Keep the action row (Save/Cancel) above any stray sibling that might overlap
   its hit area — a defensive guard against "the button does nothing" clicks. */
.player-form .form-actions { position: relative; z-index: 5; }
.player-form .form-actions .btn { position: relative; z-index: 5; }

/* player relationships — banded "family tree" view */
.family-bands { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1rem; }
.family-band { border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 8px 12px; background: #fafcff; }
.family-band.is-focus-band { background: #eef5ee; border-color: #9ec79b; }
.band-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.band-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-card { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; background: #fff; border: 1px solid var(--panel-line); border-radius: var(--radius); font-size: 13px; }
.rel-card a { color: var(--navy); font-weight: 600; text-decoration: none; }
.rel-card a:hover { text-decoration: underline; }
.rel-card-role { color: var(--muted); font-size: 12px; }
.rel-card.focus-card { background: #004400; color: #fff; font-weight: 600; border-color: #004400; }
.rel-card.focus-card .muted { color: #b9d7b4; }
.rel-card-del { border: none; background: none; cursor: pointer; color: #b08; font-size: 14px; line-height: 1; padding: 0 0 0 2px; color: #a23; }
.rel-card-del:hover { color: #b3261e; }
.rel-card .inline-form { display: inline; margin: 0; }
.relations-add-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--panel-line); }
.rel-add-grid { display: grid; grid-template-columns: 220px 1fr auto; gap: 12px; align-items: end; }
.rel-add-grid label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.rel-add-grid select, .rel-add-grid input[type="text"] { width: 100%; box-sizing: border-box; padding: 5px 8px; }
.rel-player-wrap { position: relative; }
.rel-typeahead { position: absolute; z-index: 30; left: 0; right: 0; background: #fff; border: 1px solid #b6c4d4; border-top: none; border-radius: 0 0 3px 3px; max-height: 280px; overflow-y: auto; box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.rel-typeahead[hidden] { display: none; }
.rel-ta-row { padding: 6px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.rel-ta-row:hover { background: #eef2f7; }
.rel-ta-name { color: var(--navy); font-weight: 600; font-size: 13px; }
.rel-ta-meta { color: var(--muted); font-size: 12px; }
.rel-ta-empty { padding: 8px 10px; color: var(--muted); font-size: 13px; }
.rel-chosen { margin-top: 4px; font-size: 12px; color: #1d4d1a; }
.rel-chosen[hidden] { display: none; }
@media (max-width: 760px) { .rel-add-grid { grid-template-columns: 1fr; } }

/* player career (league records) panel */
.career-table .col-id { width: 1%; white-space: nowrap; color: var(--muted); }
.career-table .col-order { width: 1%; white-space: nowrap; text-align: center; }
.career-table .col-suggest { width: 1%; white-space: nowrap; }
.career-table .reorder-arrow { display: inline-block; padding: 0 3px; text-decoration: none; color: var(--brand); font-size: 12px; line-height: 1; }
.career-table .reorder-arrow.disabled { color: #c2cdd9; cursor: default; }
.career-table tr.suggest-row td { background: #eef4ff; }
.suggest-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.suggest-inline .form-hint { flex-basis: 100%; margin: 2px 0 0; }
.suggest-inline.suggest-none { color: var(--navy); }
.career-table .col-check { width: 28px; text-align: center; }
.career-table .col-edit { width: 1%; white-space: nowrap; }
.career-table .num { text-align: right; }
.career-table .col-audit { font-size: 12px; color: var(--muted); white-space: nowrap; }
.career-table .col-audit small { display: block; opacity: .8; }
.career-table .lock-mark { font-size: 12px; opacity: .8; }
.career-row-locked { background: #fbfbf4; }
.career-actions { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.readonly-label { padding: 5px 8px; background: #f0f4f8; border: 1px dashed var(--panel-line); border-radius: var(--radius); font-size: 13px; color: var(--navy); min-width: 220px; display: inline-block; }
.notice.warn { background: #fff4e0; border: 1px solid #f0c97a; color: #8a5a00; }

/* season rounds add-tool */
.round-mode { display: flex; gap: 16px; margin-bottom: 10px; }
.round-type-fields, .round-custom-fields { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 10px; }
.round-type-fields .inline-check { align-self: center; }

/* season teams count + pager */
.count-badge { display: inline-block; font-size: 0.7em; font-weight: 600; background: var(--panel-head); color: var(--navy); border-radius: 10px; padding: 1px 8px; vertical-align: middle; }
.pager-info { color: var(--muted); font-size: 13px; }
.pager-links { display: flex; gap: 8px; align-items: center; }
.pager-page { color: var(--muted); font-size: 13px; }
.btn.disabled { opacity: 0.45; pointer-events: none; }

/* trialist lineup rows */
.squad-table tr.trialist-row td { background: #f3f0fb; }
.trialist-add-form { margin-top: 8px; display: flex; align-items: center; gap: 8px; }

/* club edit — condensed two-column layout (explicit flex columns: each column
   holds its own fields, so nothing can be auto-placed/scrambled). */
.club-cols { display: flex; gap: 1.5rem; align-items: flex-start; }
.club-notes-cols { margin-top: .8rem; }
.club-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.club-col-notes { gap: .3rem; }
.club-col-notes textarea { width: 100%; }
@media (max-width: 760px) { .club-cols { flex-direction: column; } }
/* Club form fields stack (label above, left-justified) so inputs fill their
   column — long names get the width, website/address aren't right-shifted. */
.club-form .form-row-labeled { grid-template-columns: 1fr; gap: 4px; margin-bottom: 0; }
.club-form .form-row-labeled > label { text-align: left; padding-top: 0; }
.club-form .form-row-labeled .form-input input[type="text"],
.club-form .form-row-labeled .form-input input[type="date"],
.club-form .form-row-labeled .form-input select { width: 100%; min-width: 0; }
.club-form .form-row-labeled .form-input input[type="date"] { max-width: 220px; }

/* club colours */
.colour-fieldset { border: 1px solid var(--panel-line); border-radius: 4px; padding: .6rem .8rem 0; margin: 0; }
.colour-fieldset legend { font-weight: 600; padding: 0 .4rem; }
.colour-default-toggle { display: inline-flex; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.colour-fieldset.is-default .colour-row { opacity: .5; }
.colour-row { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.colour-pick { display: flex; flex-direction: column; gap: .3rem; font-size: 13px; }
.colour-pick-label { font-weight: 600; }
.colour-pick input[type="color"] { width: 56px; height: 30px; padding: 0; border: 1px solid var(--panel-line); border-radius: 4px; cursor: pointer; }
.hex-input { width: 80px; font-family: monospace; text-transform: uppercase; padding: .25rem .35rem; border: 1px solid var(--panel-line); border-radius: 4px; }
.colour-preview-wrap { display: flex; flex-direction: column; gap: .3rem; min-width: 180px; }
.colour-preview { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 4px; border: 1px solid var(--panel-line); padding: .5rem 1rem; }
.colour-preview span { font-weight: 700; font-size: 18px; }
.form-actions { margin-top: 1rem; display: flex; gap: .5rem; }

/* teams panel */
.team-level-group { margin-bottom: 1rem; }
.team-level-head { margin: .2rem 0 .3rem; font-size: .95rem; color: var(--navy); }
.team-table { width: 100%; }
.team-table td { padding: 5px 8px; vertical-align: middle; border-bottom: 1px solid var(--panel-line); }
.team-table tr.is-current .team-name { font-weight: 600; }
.team-reorder { width: 38px; white-space: nowrap; text-align: center; }
.team-reorder a { text-decoration: none; color: var(--brand); font-size: .8rem; padding: 0 1px; }
.team-reorder .dis { color: #c2cdd9; font-size: .8rem; padding: 0 1px; }
.team-name .badge-current { display: inline-block; margin-left: .4rem; padding: 0 6px; font-size: .7rem; font-weight: 600;
    background: var(--panel-head); color: var(--navy); border-radius: 10px; vertical-align: middle; }
.team-actions { text-align: right; white-space: nowrap; }
.team-actions .inline-form { display: inline; }
.team-form { margin-top: .5rem; padding-top: .8rem; border-top: 1px solid var(--panel-line); }
.team-form-head { margin: 0 0 .5rem; font-size: .95rem; color: var(--navy); }
.team-form-grid { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: flex-end; }
.team-form-grid > label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--navy); }
.team-form-grid > label input, .team-form-grid > label select { margin: 0; }
.team-form-grid .tf-name input { min-width: 240px; }
.team-form-grid .tf-check { flex-direction: row; align-items: center; gap: .4rem; }
.team-form-notes { display: flex; gap: 1rem; margin-top: .8rem; }
.team-form-notes > label { flex: 1 1 0; display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--navy); }
.team-form-notes textarea { width: 100%; }
.team-form-actions { display: flex; gap: .5rem; align-items: center; margin-top: .8rem; }
@media (max-width: 700px) { .team-form-notes { flex-direction: column; } }
.danger-zone { margin-top: 1rem; border: 1px solid #e9c4c0; }
.danger-zone .inline-form { display: flex; gap: .6rem; align-items: center; }

/* team transfer (merge squads into another club) */
.team-pick-cell { width: 26px; text-align: center; display: none; }
#teams-body.transfer-mode .team-pick-cell { display: table-cell; }
.transfer-bar[hidden] { display: none; }
.transfer-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .5rem .6rem; margin-bottom: .8rem;
    background: var(--panel-head); border: 1px solid var(--panel-line); border-radius: 4px; }
.xfer-list { margin: .4rem 0 1rem; padding-left: 1.2rem; }
.xfer-list li { margin: .15rem 0; }
.xfer-pick-label { display: block; font-weight: 600; color: var(--navy); margin-bottom: .25rem; }
.xfer-ta { position: relative; max-width: 420px; }
.xfer-ta .ta-input { width: 100%; box-sizing: border-box; }
.xfer-chosen { margin-top: .4rem; }

/* reports / data progress */
.page-head h1 { margin-bottom: .2rem; }
.drill-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.drill-head .drill-head-main { min-width: 0; }
.drill-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn.is-disabled { opacity: .45; pointer-events: none; cursor: default; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 1.2rem; }
.kpi { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 8px; padding: .8rem .9rem; }
.kpi-label { font-size: 12px; color: var(--muted); }
.kpi-value { font-size: 26px; font-weight: 600; color: var(--navy); line-height: 1.2; }
.kpi-sub { font-size: 12px; margin-top: .15rem; }
.mode-toggle { display: inline-flex; gap: 4px; }
.mode-btn { font-size: 12px; padding: 4px 10px; border: 1px solid var(--panel-line); background: #fff; color: var(--navy); border-radius: 6px; cursor: pointer; }
.mode-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.chart-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: .8rem; }
.metric-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.metric-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border: 1px solid var(--panel-line); background: #fff; color: var(--navy); border-radius: 14px; cursor: pointer; }
.metric-chip .dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.metric-chip.off { opacity: .4; }
.yoy-metric[hidden] { display: none; }
.yoy-metric { font-size: 12px; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.yoy-metric select { margin: 0; width: auto; }
.chart-box { position: relative; width: 100%; height: 360px; }
.wrap:has(> .panel) .page-head .muted { color: var(--muted-on-dark); }
.wrap:has(> .panel) .cache-bar .muted { color: var(--muted-on-dark); }
/* On the dark-green panel pages, wrap the completeness bar in a light card so its
   navy label/percentage/legend stay readable (match edit page is light, untouched). */
.wrap:has(> .panel) .match-completeness {
    background: var(--panel);
    border: 1px solid var(--panel-line);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

/* reports sub-tabs */
.report-tabs { display: flex; gap: 4px; margin-bottom: 1.1rem; }
.report-tab { font-size: 13px; padding: 6px 14px; border-radius: 6px 6px 0 0; color: var(--muted-on-dark); text-decoration: none; border: 1px solid transparent; }
.report-tab:hover { color: #fff; }
.report-tab.active { background: var(--panel); color: var(--navy); border-color: var(--panel-line); border-bottom-color: var(--panel); font-weight: 600; }
.cache-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 1rem; }
.cache-bar .inline-form { margin: 0; }

/* severity stacked bar */
.sev-bar { display: flex; height: 22px; border-radius: 5px; overflow: hidden; background: var(--panel-line); }
.sev-seg { height: 100%; }
.sev-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: .7rem; font-size: 12px; color: var(--navy); }
.sev-key { display: inline-flex; align-items: center; gap: 6px; }
.sev-key .dot { width: 10px; height: 10px; border-radius: 2px; }

/* per-check completeness bars */
.check-tier { margin: 1.1rem 0 .5rem; font-size: 13px; font-weight: 600; }
.check-tier:first-of-type { margin-top: .3rem; }
.check-row { display: grid; grid-template-columns: 220px 1fr 46px 110px; align-items: center; gap: 12px; padding: 3px 0; font-size: 13px; color: var(--navy); }
.check-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check-bar-track { background: var(--panel-line); height: 12px; border-radius: 3px; overflow: hidden; }
.check-bar-fill { display: block; height: 100%; }
.check-pct { text-align: right; font-variant-numeric: tabular-nums; }
.check-count { text-align: right; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .check-row { grid-template-columns: 1fr 60px; } .check-bar-track, .check-count { display: none; } }
.rel-table { width: 100%; margin-bottom: 1rem; }
.rel-table td { padding: 5px 8px; border-bottom: 1px solid var(--panel-line); vertical-align: middle; }
.rel-label { width: 40%; color: var(--navy); }
.rel-actions { text-align: right; white-space: nowrap; }
.rel-form { padding-top: .8rem; border-top: 1px solid var(--panel-line); }
.rel-form-head { margin: 0 0 .5rem; font-size: .95rem; color: var(--navy); }
.rel-form-row { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.rel-form-row > label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--navy); }
.rel-form-row .rel-type-select { margin: 0; }
.rel-ta { position: relative; display: flex; flex-direction: column; gap: .2rem; min-width: 260px; }
.rel-other-label { font-size: .82rem; color: var(--navy); }
.rel-ta .ta-input { width: 100%; box-sizing: border-box; margin: 0; }
/* completeness scope picker */
.scope-picker { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.scope-picker label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--navy); }
.scope-picker select { margin: 0; width: auto; min-width: 180px; }
.scope-active { margin: 0 0 .6rem; color: var(--navy); }
.check-row-link { text-decoration: none; color: var(--navy); border-radius: 4px; }
.check-row-link:hover { background: #e8eef5; }
.check-row-link:hover .check-label { text-decoration: underline; }
.drill-table { width: 100%; }
.drill-table th { text-align: left; }
.drill-edit { text-align: right; white-space: nowrap; }
.season-group { border: 1px solid var(--panel-line); border-radius: 5px; margin-bottom: 6px; background: #fff; }
.season-group[open] { box-shadow: 0 1px 3px rgba(27,54,93,.08); }
.season-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 9px 12px; color: var(--navy); }
.season-summary::-webkit-details-marker { display: none; }
.season-summary::before { content: '▸'; color: #6b7b8f; font-size: 12px; transition: transform .12s; }
.season-group[open] .season-summary::before { transform: rotate(90deg); }
.season-summary:hover { background: #eef3f8; }
.ssum-label { font-weight: 600; }
.ssum-meta { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12.5px; }
.ssum-comps, .ssum-matches { color: #6b7b8f; }
.ssum-pct { min-width: 42px; text-align: right; }
.ssum-iss { min-width: 120px; text-align: right; }
.season-group .team-seasons { margin: 0 12px 12px; width: calc(100% - 24px); }
.team-seasons th { text-align: left; }
.team-seasons td.num, .team-seasons th.num { text-align: right; }
.team-seasons .c-matches { width: 6rem; }
.team-seasons .c-pct { width: 8rem; }
.team-seasons .c-iss { width: 14rem; }
.team-seasons .c-view { width: 6rem; text-align: right; }
@media (max-width: 620px) {
    .ssum-meta { gap: 9px; }
    .ssum-comps { display: none; }
    .ssum-iss { min-width: 0; }
}
.drill-pager .pager-links { display: inline-flex; gap: 6px; }

/* --- Tabs (Details / Images on the player page) --- */
.tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--panel-line); }
.tabs .tab { padding: 8px 16px; text-decoration: none; color: var(--muted-on-dark); border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 600; }
.tabs .tab:hover { color: #fff; }
.tabs .tab.active { background: var(--panel); color: var(--brand); border-color: var(--panel-line); margin-bottom: -1px; }
/* On white "page card" pages (e.g. the match Details/Images/Programme pages) the
   dark-green page text would be invisible — but the brand green reads fine on the
   light card, so use it rather than navy. The dark-green pages keep the light label. */
.wrap:not(:has(> .panel)) .tabs .tab { color: var(--brand); }
.wrap:not(:has(> .panel)) .tabs .tab:hover { color: var(--brand); }
/* Match Images/Programme pages: panel-head titles ("Upload an image", "Images (N)",
   "Programme covers (N)") in brand green to match the site palette. */
.match-tab-body .panel-head h2 { color: var(--brand); }

/* --- Gallery: player Images tab --- */
.img-upload { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.img-upload label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.img-upload .form-hint { flex-basis: 100%; margin: 4px 0 0; }
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; align-items: start; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filter-bar label { display: block; font-size: 13px; }
.filter-bar select { display: block; margin-top: .2rem; }
.img-card { border: 1px solid var(--panel-line); border-radius: 8px; overflow: hidden; background: #fff; display: flex; }
.img-card.img-card-hidden .img-card-thumb img { opacity: 0.5; }

/* Image editor — match-id tag cascade */
.img-match-cascade { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--panel-line); }
.tag-sub { font-size: 14px; margin: 0 0 .55rem; color: var(--ink); }
.cascade-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; margin-bottom: .6rem; }
.cascade-grid label { display: block; font-size: 13px; }
.cascade-grid select { width: 100%; box-sizing: border-box; margin-top: .2rem; }
.cascade-grid .c-country, .cascade-grid .c-comp { grid-column: span 3; }
.cascade-grid .c-season, .cascade-grid .c-team, .cascade-grid .c-match { grid-column: span 2; }
@media (max-width: 760px) {
    .cascade-grid { grid-template-columns: 1fr 1fr; }
    .cascade-grid .c-country, .cascade-grid .c-comp,
    .cascade-grid .c-season, .cascade-grid .c-team, .cascade-grid .c-match { grid-column: auto; }
}
.img-card-thumb { display: block; background: #eef2f6; }
.img-card-thumb img { display: block; width: 100%; height: auto; max-height: 190px; object-fit: contain; }
.img-badge { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px; color: #fff; }
.img-badge.primary { background: var(--brand); }
.img-badge.hidden { background: var(--muted); }
.img-dims { font-size: 11px; color: var(--muted); margin-left: auto; }
.q-dot { width: 10px; height: 10px; border-radius: 50%; margin-left: auto; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.q-dot.q-green { background: #1D9E75; }
.q-dot.q-amber { background: #BA7517; }
.q-dot.q-red   { background: #A32D2D; }

/* Redesigned image card: quality stripe + on-image tools + derived title + chips */
.img-card-stripe { flex: 0 0 4px; align-self: stretch; }
.img-card-stripe.q-green { background: #1D9E75; }
.img-card-stripe.q-amber { background: #BA7517; }
.img-card-stripe.q-red   { background: #A32D2D; }
.img-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.img-card-thumb-wrap { position: relative; }
.img-card-tools { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; justify-content: space-between;
    pointer-events: none; opacity: 0; transition: opacity .12s ease; }
.img-card:hover .img-card-tools, .img-card:focus-within .img-card-tools { opacity: 1; }
@media (hover: none) { .img-card-tools { opacity: 1; } }
.tools-left, .tools-right { display: flex; gap: 4px; pointer-events: auto; }
.tools-left form, .tools-right form { margin: 0; display: inline; }
.img-tool { width: 26px; height: 26px; padding: 0; border-radius: 6px; background: rgba(255,255,255,0.92);
    border: 1px solid var(--panel-line); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.img-tool:hover { background: #fff; border-color: var(--brand); color: var(--brand); }
.img-card-badges { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 4px; }
.img-card-body { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 5px; }
.img-card-title { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.3; }

/* --- Gallery: crop stage on the upload form --- */
.crop-stage { flex-basis: 100%; margin: 8px 0 0; }
.crop-frame { max-width: 360px; background: #eef2f6; border: 1px solid var(--panel-line); border-radius: 6px; overflow: hidden; }
.crop-frame img { display: block; max-width: 100%; }
.crop-stage .form-hint { margin: 6px 0 0; }

/* --- Gallery: live crop-size readout --- */
.crop-size { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.crop-size.too-small { color: #A32D2D; font-weight: 600; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

.crop-stage .btn { margin-top: 8px; }

/* --- Gallery: action row, pop-up, re-crop modal --- */
.img-actions { flex-basis: 100%; display: flex; gap: 10px; align-items: center; margin-top: 4px; }

.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); padding: 16px; }
.modal[hidden] { display: none; }
.modal-card { background: var(--panel); border-radius: 10px; padding: 18px 20px; max-width: 440px; width: 100%; box-shadow: 0 8px 40px rgba(0,0,0,.4); max-height: calc(100vh - 32px); overflow-y: auto; }
.modal-card h2 { margin: 0 0 12px; color: var(--ink); }
.modal-card .crop-frame { max-width: 100%; }
.modal .crop-frame img { max-height: 62vh; }
body.modal-open { overflow: hidden; }

/* --- Image lightbox (in-page, with Edit overlay) --- */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox-stage { position: relative; display: inline-block; max-width: 92vw; max-height: 92vh; }
.lightbox-img { display: block; max-width: 92vw; max-height: 92vh; width: auto; height: auto; border-radius: 4px; }
.lightbox-edit { position: absolute; top: 10px; right: 10px; background: var(--brand); color: #fff; padding: 7px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.lightbox-edit:hover { background: var(--brand-dark); color: #fff; }
.lightbox-edit[hidden] { display: none; }
.lightbox-close { position: fixed; top: 12px; right: 18px; background: none; border: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; padding: 0; }

/* --- Gallery upload: player tag picker --- */
.tag-picker { flex-basis: 100%; }
.tag-picker > label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.tag-ta { position: relative; max-width: 360px; }
.tag-ta .ta-input { width: 100%; box-sizing: border-box; }
.stadium-pick-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.stadium-pick-row .stadium-country { flex: 0 0 auto; }
.stadium-pick-row .tag-ta { flex: 1 1 220px; min-width: 0; max-width: 360px; }
.stadium-chosen { margin-top: 8px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--panel-head); color: var(--ink); border: 1px solid var(--panel-line); border-radius: 14px; padding: 2px 4px 2px 10px; font-size: 13px; }
.tag-chip-x { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 4px; }
.tag-chip-x:hover { color: #A32D2D; }
/* ---- image editor (chunk 2) ---- */
.stack-form label { display: block; margin-bottom: .7rem; color: var(--ink); }
.stack-form input[type="text"], .stack-form input[type="date"], .stack-form textarea {
  display: block; width: 100%; max-width: 480px; box-sizing: border-box; margin-top: .2rem;
}
.stack-form .form-hint { margin-top: .15rem; }
.stack-form label.check-line { display: flex; align-items: center; gap: .5rem; max-width: 480px; }
.stack-form label.check-line input { margin: 0; }
.tag-type { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
  background: #fff; border: 1px solid var(--panel-line); border-radius: 8px; padding: 0 5px; margin-right: 2px; }
.tag-add { margin-top: 14px; max-width: 480px; }
.tag-add > label { display: block; margin-bottom: .25rem; font-weight: 600; color: var(--ink); }
.tag-suggests { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tag-suggest-group { margin-bottom: 8px; }
.tag-suggest-team { display: block; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 2px 0 4px; }
.tag-suggest { background: var(--panel); color: var(--ink); border: 1px solid var(--panel-line); border-radius: 14px; padding: 3px 10px; font-size: 13px; cursor: pointer; }
.tag-suggest:hover:not(:disabled) { background: var(--panel-head); }
.tag-suggest:disabled { opacity: .45; cursor: default; }

/* Book/list tag pills */
.tag-pill { display: inline-block; padding: 1px 8px; margin: 1px 0; font-size: 11px; border-radius: 10px; background: var(--panel-head); color: var(--navy); border: 1px solid var(--panel-line); }

/* Book cover picker (edit form) */
.cover-pick { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cover-pick-side { flex: 0 0 132px; }
.cover-pick-main { flex: 1 1 280px; min-width: 0; }
.cover-thumb { width: 132px; height: auto; border: 1px solid var(--panel-line); border-radius: 4px; background: var(--panel); display: block; }
.cover-pick-actions { margin-top: 8px; }
.cover-ta-item { display: flex; align-items: center; gap: 8px; }
.cover-ta-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 3px; background: var(--panel); flex: 0 0 auto; }

/* Season status — green = in progress (active), slate/navy = closed (archived, not danger) */
.status-badge { display: inline-block; font-size: 0.72rem; font-weight: 600; border-radius: 10px;
    padding: 1px 9px; vertical-align: middle; line-height: 1.5; border: 1px solid transparent; white-space: nowrap; }
.status-badge.live   { background: #d9efd6; color: #1f6b3f; border-color: #b6d4b2; }
.status-badge.closed { background: #e7f0fb; color: #1b4f8a; border-color: #bcd6f0; }
.season-state { margin: .35rem 0 1rem; padding: .55rem .8rem; border-radius: 6px; font-size: .9rem;
    background: #eef3f9; border-left: 4px solid var(--navy); color: var(--navy); }

/* Sortable column headers (competition seasons list) */
.grid th a.sort-th { cursor: pointer; white-space: nowrap; }
.grid th a.sort-th:hover { text-decoration: underline; }
.grid th a.sort-th.is-sorted { font-weight: 700; }

/* Brief "why not 100%" note marker (next to a season's matches figure) */
.note-flag { display: inline-block; font-size: 0.78rem; color: #1b4f8a; cursor: help; white-space: nowrap; }

/* Outcome-band swatches + editor */
.band-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 4px; border: 1px solid rgba(0,0,0,.18); }
.form-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
form.inline { display: inline; }

/* Per-season band editor */
table.band-editor .num { width: 48px; text-align: center; }
table.band-editor .band-cell { white-space: nowrap; }
table.band-editor select { min-width: 140px; }
table.band-editor input[type=text] { width: 100%; }
.alert.ok { background: #e3f3e5; border: 1px solid #b7dcbb; color: #1f5a2b; padding: 8px 12px; border-radius: 6px; }

/* Per-season band editor */
table.band-editor td.num { width: 3rem; text-align: center; }
table.band-editor .band-cell { white-space: nowrap; }
table.band-editor .band-cell select { min-width: 9rem; }
table.band-editor td input[type=text] { width: 100%; min-width: 8rem; }

/* Standings tables (cached league/group tables on the season page) */
table.standings { table-layout: fixed; }
table.standings th, table.standings td { padding: 6px 6px; overflow: hidden; text-overflow: ellipsis; }
table.standings td.num, table.standings th.num { text-align: right; white-space: nowrap; }
table.standings td.c-team, table.standings th:nth-child(2) { white-space: normal; }
.standings .c-pos { width: 2.4rem; }
.standings .c-st  { width: 2.5rem; }
.standings .c-g   { width: 2.9rem; }
.standings .c-m   { width: 3.6rem; }
.standings .c-pts { width: 3.4rem; }
.standings .c-mv  { width: 3.8rem; }
.standings .band-note { color: var(--muted); font-size: .85em; font-style: italic; }
table.standings tr.band-green  { background: #e3f3e5; }
table.standings tr.band-blue   { background: #e1ecf7; }
table.standings tr.band-teal   { background: #dcefef; }
table.standings tr.band-yellow { background: #f6efd2; }
table.standings tr.band-orange { background: #f7e6d6; }
table.standings tr.band-red    { background: #f7dede; }
table.standings tr.band-purple { background: #ece2f5; }
table.standings tr.band-grey   { background: #e9ecef; }

/* Club league-history table: reuse the standings outcome tints + a centred "in progress" cell. */
table.club-history tr.band-green  { background: #e3f3e5; }
table.club-history tr.band-blue   { background: #e1ecf7; }
table.club-history tr.band-teal   { background: #dcefef; }
table.club-history tr.band-yellow { background: #f6efd2; }
table.club-history tr.band-orange { background: #f7e6d6; }
table.club-history tr.band-red    { background: #f7dede; }
table.club-history tr.band-purple { background: #ece2f5; }
table.club-history tr.band-grey   { background: #e9ecef; }
table.club-history .hist-inprog   { text-align: center; color: var(--muted); }
.club-history-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .75rem; border-bottom: 1px solid var(--panel-line); }
.ch-tab { border: 1px solid var(--panel-line); border-bottom: none; background: #eef2f6; color: var(--navy); padding: .35rem .85rem; cursor: pointer; border-radius: 6px 6px 0 0; font-size: .9rem; line-height: 1.4; }
.ch-tab.active { background: var(--panel-head); color: var(--brand); font-weight: 600; }
.prov-mark { color: var(--brand); font-weight: 700; }
.prov-note { margin-top: .5rem; }
table.standings tr.exp-sep td { background: #eef1f4; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #5a6672; padding: 4px 8px; }
table.standings tr.expunged { color: #8a8a8a; font-style: italic; }
table.standings .reorder { white-space: nowrap; }
table.standings .reorder form { display: inline; }
table.standings .reorder .btn.sm { padding: 0 5px; line-height: 1.5; }
.band-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: .35rem 0 1.2rem; font-size: 13px; }
.band-legend .legend-item { display: inline-flex; align-items: center; gap: 5px; }

/* Points-adjustment marker on the standings table */
.standings .pts-adj { display: block; font-size: .7rem; font-weight: 400; line-height: 1.1; color: #a12020; }

/* ── Modal overlay (custom, no native dialog) + report-duplicate modal ── */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,30,0,0.55); padding: 4rem 1rem; overflow-y: auto; }
.modal-overlay[hidden] { display: none; }
.modal-overlay:not([hidden]) { display: flex; align-items: flex-start; justify-content: center; }
.modal { background: var(--card); border-radius: var(--radius); width: 100%; max-width: 30rem; box-shadow: 0 12px 40px rgba(0,0,0,.32); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; border-bottom: 1px solid var(--panel-line); }
.modal-head h2 { margin: 0; font-size: 1.05rem; color: var(--navy); }
.modal-close { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 .2rem; }
.modal-close:hover { color: var(--navy); }
.modal-body { padding: 1rem; }
.modal-body label { display: block; margin-top: .6rem; color: var(--navy); }
.modal-body input[type=text], .modal-body textarea { width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* Open-count badge on the nav */
.nav-badge { display: inline-block; min-width: 1.1rem; padding: 0 .35rem; margin-left: .25rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.4; }

/* ── Duplicate-report review: side-by-side compare ── */
table.compare th.cmp-field { width: 11rem; text-align: left; color: var(--muted); font-weight: 600; background: #f5f8fb; }
table.compare td, table.compare th { vertical-align: top; }
table.compare tr.is-diff td { background: #fff7e6; }
table.compare tr.cmp-section th { background: var(--panel-head); color: var(--navy); font-weight: 700; padding-top: .6rem; }
table.compare .btn.sm { margin-left: .4rem; }
.compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.cmp-col-head { margin: 0 0 .4rem; font-size: .95rem; color: var(--navy); border-bottom: 1px solid var(--panel-line); padding-bottom: .25rem; }
.spell-list { margin: 0; padding-left: 1.1rem; }
.spell-list li { margin: .15rem 0; font-size: 13px; }
.reject-form textarea { width: 100%; }
.reject-form .form-actions { margin-top: .75rem; display: flex; gap: .5rem; }
@media (max-width: 640px) { .compare-cols { grid-template-columns: 1fr; } }

/* ── Duplicate-report merge: survivor choice + plan ── */
.survivor-opt { display: block; padding: .4rem .6rem; margin: .3rem 0; border: 1px solid var(--panel-line); border-radius: var(--radius); cursor: pointer; }
.survivor-opt:hover { background: #eef2f7; }
.survivor-form .form-actions, .reject-form .form-actions { margin-top: .75rem; display: flex; gap: .5rem; }
.soft-divider { border: 0; border-top: 1px solid var(--panel-line); margin: 1.25rem 0; }
table.merge-fields td .pick { display: block; cursor: pointer; }
table.merge-fields td { vertical-align: top; }
table.merge-fields td:has(input:checked) { background: #eaf5ea; }
table.merge-summary td, table.merge-summary th.cmp-field { text-align: left; }
.merge-form .form-actions { margin-top: 1rem; display: flex; gap: .5rem; }