: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; }
.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: 1180px; 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: 1180px; 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 */
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; }

/* ---- 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; }

/* ---- 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 .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; }
.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; }

/* 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; } }