/* Masters-ish palette */
:root {
    --green-deep: #0b3d2e;
    --green: #1d5e3e;
    --green-light: #2e7c52;
    --cream: #f6f1e1;
    --cream-dark: #ebe2c4;
    --gold: #d4af37;
    --text: #2a2a2a;
    --text-soft: #5a5a5a;
    --accent: #b00020;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--cream);
    color: var(--text);
    line-height: 1.5;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

header {
    border-bottom: 3px solid var(--green);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

h1 {
    font-size: 32px;
    color: var(--green-deep);
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

h2 {
    font-size: 22px;
    color: var(--green-deep);
    margin: 32px 0 12px 0;
}

h3 {
    font-size: 18px;
    color: var(--green);
    margin: 24px 0 8px 0;
    border-bottom: 1px solid var(--cream-dark);
    padding-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

h4 {
    font-size: 14px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 16px 0 6px 0;
}

a {
    color: var(--green);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

nav.topnav {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cream-dark);
    padding-bottom: 8px;
}

nav.topnav a {
    padding: 8px 16px;
    color: var(--text-soft);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid transparent;
    margin-bottom: -9px;
}

nav.topnav a:hover {
    color: var(--green-deep);
    text-decoration: none;
}

nav.topnav a.current {
    color: var(--green-deep);
    border-bottom-color: var(--green);
}

.pill {
    display: inline-block;
    background: var(--green);
    color: var(--cream);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.pill.updated {
    background: var(--cream-dark);
    color: var(--text-soft);
}

.pill.total {
    background: var(--gold);
    color: var(--green-deep);
}

table.leaderboard {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--cream-dark);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

table.leaderboard th,
table.leaderboard td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--cream-dark);
}

table.leaderboard th {
    background: var(--green-deep);
    color: var(--cream);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

table.leaderboard td.rank,
table.leaderboard th.rank {
    width: 40px;
    text-align: center;
    color: var(--text-soft);
    font-weight: 600;
}

table.leaderboard td.num,
table.leaderboard th.num {
    text-align: right;
    width: 60px;
    font-variant-numeric: tabular-nums;
}

table.leaderboard td.total,
table.leaderboard th.total {
    font-weight: 700;
    color: var(--green-deep);
    width: 70px;
}

table.leaderboard tbody tr:nth-child(odd) {
    background: var(--cream);
}

/* On the main leaderboard each participant now occupies two rows (sweep-row +
   picks-row) so nth-child(odd) striping produces solid bands instead of
   alternating. Re-stripe by sweep-row index via nth-of-type on the class. */
table.leaderboard tbody tr.sweep-row {
    background: white;
}
table.leaderboard tbody tr.sweep-row:nth-of-type(4n + 1) {
    background: var(--cream);
}

table.leaderboard tbody tr:hover {
    background: var(--cream-dark);
}
table.leaderboard tbody tr.picks-row:hover {
    background: inherit;
}

table.leaderboard tbody tr:first-child td.total {
    color: var(--gold);
    font-size: 18px;
}

/* Live picks (field) table */
table.leaderboard.field tbody tr:first-child td.total {
    font-size: 14px;
}
table.leaderboard.field tbody tr.row-cut {
    opacity: 0.5;
    text-decoration: line-through;
}
table.leaderboard.field tbody tr.row-wd {
    opacity: 0.4;
    font-style: italic;
}
table.leaderboard.field details {
    cursor: pointer;
}
table.leaderboard.field details summary {
    list-style: none;
    font-weight: 700;
    color: var(--green);
}
table.leaderboard.field details summary::-webkit-details-marker {
    display: none;
}
table.leaderboard.field .holders {
    list-style: none;
    padding: 6px 0 0 0;
    margin: 0;
    text-align: left;
    font-weight: normal;
    font-size: 13px;
}
table.leaderboard.field .holders li {
    padding: 2px 0;
}

/* Accordion-style pick list (field.php) */
.picks-list {
    background: white;
    border: 1px solid var(--cream-dark);
    border-radius: 4px;
    overflow: hidden;
}

.picks-header,
.picks-row {
    display: grid;
    /* chevron col | pos | name (flex) | to par | thru | picked */
    grid-template-columns: 18px 50px 1fr 80px 110px 70px;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
}

.picks-header {
    /* No chevron on the header — shift the grid to start at col 2 */
    padding-left: 40px;
    grid-template-columns: 50px 1fr 80px 110px 70px;
}

.picks-header {
    background: var(--green-deep);
    color: var(--cream);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.pick-card {
    border-top: 1px solid var(--cream-dark);
}

.pick-card > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.pick-card > summary::-webkit-details-marker {
    display: none;
}

.pick-card > summary::before {
    content: "▸";
    color: var(--text-soft);
    font-size: 12px;
    display: block;
    text-align: center;
    transition: transform 0.15s;
}

.pick-card[open] > summary::before {
    transform: rotate(90deg);
}

.pick-card:nth-child(odd) > summary {
    background: var(--cream);
}

.pick-card > summary:hover {
    background: var(--cream-dark);
}

.pick-card.row-cut > summary {
    opacity: 0.5;
    text-decoration: line-through;
}

.pick-card.row-wd > summary {
    opacity: 0.5;
    font-style: italic;
}

.picks-row .col-pos {
    text-align: center;
    color: var(--text-soft);
    font-weight: 600;
}

.picks-row .col-topar {
    text-align: right;
    font-weight: 700;
    color: var(--green-deep);
    font-variant-numeric: tabular-nums;
}

.picks-row .col-thru {
    color: var(--text-soft);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.picks-row .col-picked {
    text-align: right;
    font-weight: 700;
    color: var(--green);
}

.pick-card-body {
    padding: 12px 16px 20px;
    background: white;
    border-top: 1px dashed var(--cream-dark);
}

.inline-round {
    margin-bottom: 12px;
}

.inline-round-header {
    font-weight: 700;
    color: var(--green);
    font-size: 14px;
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.inline-round-header span {
    color: var(--gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.holders-block {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--cream-dark);
}

.holders-block h4 {
    margin: 0 0 8px 0;
    color: var(--text-soft);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

ul.holders-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px 12px;
}

ul.holders-grid li {
    padding: 4px 0;
    font-size: 14px;
}

ul.holders-grid li a {
    font-weight: 600;
}

/* Narrow screens: tighten + hide Thru */
@media (max-width: 600px) {
    .picks-header,
    .picks-row {
        grid-template-columns: 14px 36px 1fr 56px 56px;
        gap: 6px;
        padding: 8px 10px;
        font-size: 13px;
    }
    .picks-header {
        grid-template-columns: 36px 1fr 56px 56px;
        padding-left: 24px;
    }
    .picks-header .col-thru,
    .picks-row .col-thru {
        display: none;
    }
    ul.holders-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* Scorecard (golfer.php) */
section.scorecard {
    padding: 0;
    overflow: hidden;
}

section.scorecard h3 {
    padding: 12px 16px 8px;
    margin: 0;
}

.scorecard-wrap {
    overflow-x: auto;
}

table.scorecard-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

table.scorecard-table th,
table.scorecard-table td {
    padding: 6px 4px;
    text-align: center;
    border: 1px solid var(--cream-dark);
    min-width: 28px;
}

table.scorecard-table thead th {
    background: var(--green-deep);
    color: var(--cream);
    font-weight: 600;
    font-size: 12px;
}

table.scorecard-table .par-row td,
table.scorecard-table .par-row th {
    background: var(--cream);
    color: var(--text-soft);
    font-weight: 500;
}

table.scorecard-table .score-row th {
    background: var(--green);
    color: var(--cream);
    text-align: right;
    padding-right: 10px;
}

table.scorecard-table .turn {
    background: var(--cream-dark) !important;
    font-weight: 700;
}

table.scorecard-table td.total {
    background: var(--gold) !important;
    color: var(--green-deep) !important;
    font-weight: 800;
}

/* Score colour coding — circle/square cues you see on TV */
td.score-hio    { background: #ff6b00; color: white; font-weight: 800; }
td.score-eagle  { background: #ffb300; color: var(--green-deep); font-weight: 800; border-radius: 50%; }
td.score-birdie {
    background: white;
    color: var(--green-deep);
    font-weight: 700;
    position: relative;
}
td.score-birdie::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    pointer-events: none;
}
td.score-par    { color: var(--text); }
td.score-bogey  {
    background: white;
    color: var(--text);
    position: relative;
}
td.score-bogey::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 2px solid #333;
    pointer-events: none;
}
td.score-double {
    background: white;
    color: var(--text);
    position: relative;
    font-weight: 700;
}
td.score-double::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 3px double #333;
    pointer-events: none;
}

ul.picks {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

ul.picks li {
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--cream-dark);
    margin-bottom: 4px;
    border-radius: 4px;
}

.seed {
    display: inline-block;
    background: var(--green-light);
    color: var(--cream);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-right: 8px;
}

section.round {
    background: white;
    padding: 12px 16px;
    border: 1px solid var(--cream-dark);
    border-radius: 4px;
    margin-bottom: 16px;
}

.round-total {
    color: var(--gold);
    font-weight: 700;
}

.category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dotted var(--cream-dark);
    font-size: 14px;
}

.category li:last-child {
    border-bottom: none;
}

.reason {
    color: var(--text);
}

.points {
    font-weight: 700;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}

.empty {
    padding: 24px;
    text-align: center;
    color: var(--text-soft);
    font-style: italic;
}

footer {
    margin-top: 48px;
    padding-top: 16px;
    border-top: 1px solid var(--cream-dark);
    color: var(--text-soft);
    font-size: 13px;
    text-align: center;
}

.rules a, .rules code {
    color: var(--green);
}

section.rules ul {
    padding-left: 20px;
}

/* admin */
.admin-form {
    background: white;
    padding: 16px;
    border: 1px solid var(--cream-dark);
    border-radius: 4px;
    margin: 16px 0;
}

.admin-form label {
    display: block;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 4px;
    font-size: 14px;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--cream-dark);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}

.admin-form button,
.btn {
    background: var(--green);
    color: var(--cream);
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
    text-decoration: none;
    display: inline-block;
}

.admin-form button:hover,
.btn:hover { background: var(--green-deep); }

.btn.danger { background: var(--accent); }

.flash {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.flash.success { background: #d4edda; color: #155724; }
.flash.error   { background: #f8d7da; color: #721c24; }

/* ============================================================
   Main leaderboard — CSS Grid based (replaces the <table> so the
   inline-pick expansion can span the full row without table-layout
   sizing quirks).
   ============================================================ */

.lb {
    width: 100%;
    background: white;
    border: 1px solid var(--cream-dark);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Shared 7-column grid template used by header + every row */
.lb-head,
.lb-row {
    display: grid;
    grid-template-columns: 40px 1fr 60px 60px 60px 60px 70px;
    align-items: center;
}

.lb-head {
    background: var(--green-deep);
    color: var(--cream);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.lb-head > div {
    padding: 10px 12px;
}
.lb-head > div:nth-child(1) { text-align: center; }
.lb-head > div:nth-child(n+3) { text-align: right; }

.lb-entry {
    border-bottom: 1px solid var(--cream-dark);
}
.lb-entry.lb-stripe > .lb-row {
    background: var(--cream);
}
.lb-entry > .lb-row:hover {
    background: var(--cream-dark);
}

.lb-row {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.lb-row .cell {
    padding: 10px 12px;
}
.lb-row .cell.rank {
    text-align: center;
    color: var(--text-soft);
    font-weight: 600;
}
.lb-row .cell.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.lb-row .cell.total {
    font-weight: 700;
    color: var(--green-deep);
}
.lb-entry.lb-leader .cell.total {
    color: var(--gold);
    font-size: 18px;
}

.lb-row .cell.name {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--green);
}
.lb-row .caret {
    display: inline-block;
    color: var(--text-soft);
    font-size: 12px;
    transition: transform 0.15s ease;
}
.lb-entry.open .lb-row .caret {
    transform: rotate(90deg);
    color: var(--green);
}
.lb-entry.open > .lb-row {
    background: var(--cream-dark);
}

/* Picks panel — pure block flow inside the entry, no table layout */
.lb-picks {
    background: white;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--cream-dark);
}
.lb-picks[hidden] {
    display: none;
}

.picks-grid {
    display: grid;
    grid-template-columns: 50px 1fr 60px 70px 1fr;
    align-items: center;
    font-size: 13px;
}
.picks-grid > .picks-head {
    color: var(--text-soft);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.4px;
    font-weight: 600;
    padding: 6px 8px;
    border-bottom: 1px solid var(--cream-dark);
}
.picks-grid > .picks-cell {
    padding: 8px 8px;
    border-bottom: 1px solid var(--cream-dark);
}
/* The .seed class is already styled elsewhere as a green badge with cream
   text — keep that styling but ensure the number is centred. (Don't override
   the colour or it'll go dark on dark.) */
.picks-grid > .picks-cell.seed {
    text-align: center;
    color: var(--cream);
}
.picks-grid > .picks-cell.name {
    font-weight: 600;
}
.picks-grid > .picks-cell.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.picks-grid > .picks-cell.pick-cut {
    opacity: 0.5;
    text-decoration: line-through;
}
.picks-grid > .picks-cell.pick-wd {
    opacity: 0.5;
    font-style: italic;
}
/* Strip the bottom border on the last row of the grid */
.picks-grid > .picks-cell:nth-last-child(-n+5) {
    border-bottom: none;
}

.lb-picks .full-breakdown {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--green);
}

@media (max-width: 600px) {
    h1 { font-size: 24px; }
    table.leaderboard th, table.leaderboard td { padding: 8px 6px; font-size: 13px; }
    table.leaderboard td.num, table.leaderboard th.num { width: 38px; }

    .lb-head,
    .lb-row {
        grid-template-columns: 28px 1fr 36px 36px 36px 36px 50px;
    }
    .lb-head > div { padding: 8px 4px; font-size: 11px; }
    .lb-row .cell { padding: 8px 4px; font-size: 13px; }
    .lb-entry.lb-leader .cell.total { font-size: 15px; }

    .lb-picks { padding: 10px 8px 12px; }
    .picks-grid {
        grid-template-columns: 36px 1fr 44px 50px 70px;
        font-size: 12px;
    }
    .picks-grid > .picks-cell,
    .picks-grid > .picks-head {
        padding: 6px 4px;
    }
}