/* ── Design Tokens ─────────────────────────────────────────── */
:root {
    /* Colors */
    --color-primary: #531882;
    --color-primary-hover: #3d1160;
    --color-primary-light: #f3e8fb;
    --color-danger: #c0392b;
    --color-danger-hover: #a93226;
    --color-success-bg: #d4edda;
    --color-success-text: #155724;
    --color-error-bg: #f8d7da;
    --color-error-text: #721c24;
    --color-muted: #666;
    --color-muted-bg: #999;
    --color-link: #0066cc;
    --color-border: #ccc;
    --color-bg-subtle: #f5f5f5;
    --color-bg-form: #f8f9fa;
    --color-bg-form-border: #dee2e6;
    --color-bg-hover: #f0f0f0;
    --color-test-bg: #fffde7;
    --color-test-badge: #ffc107;
    --color-deleted-bg: #fdecea;

    /* Round status colors */
    --color-finished: #607d8b;
    --color-finished-light: #eceff1;
    --color-in-progress: #e67e22;
    --color-in-progress-light: #fef5e7;
    --color-pairable: #2980b9;
    --color-pairable-light: #ebf5fb;
    --color-published: #1e9e57;
    --color-published-light: #e6f6ee;
    --color-future: #95a5a6;
    --color-future-light: #f2f3f4;

    /* Surfaces */
    --surface: #f6f5f3;          /* warm off-white page background */
    --surface-raised: #ffffff;   /* cards, table headers, sticky bars */
    --text: #1d1d1f;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Radii */
    --radius-sm: 3px;
    --radius: 4px;

    /* Typography (font phase will swap these families; tokens stay) */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: var(--font-family);
    --font-body: var(--font-family);
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --line-height: 1.45;

    /* Layout */
    --content-max: 1440px;       /* content fills the laptop, capped here */
    --pad-inline: clamp(16px, 4vw, 40px);
    --header-h: 88px;            /* approx sticky header height (scroll offset math) */
    --measure: 640px;           /* narrow column for form-only pages */
}

/* ── Base ──────────────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    line-height: var(--line-height);
    background: var(--surface);
    color: var(--text);
}

h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.2;
}

h1 { font-size: 1.6rem; margin: 0 0 var(--space-md); }
h2 { font-size: 1.2rem; margin: var(--space-lg) 0 var(--space-sm); }
h3 { font-size: 1.02rem; margin: var(--space-md) 0 var(--space-sm); }

/* ── App shell ─────────────────────────────────────────────── */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--color-border);
}

.app-main {
    display: block;
}

.page {
    max-width: var(--content-max);
    margin-inline: auto;
    padding: var(--space-lg) var(--pad-inline) var(--space-xl);
}

.page--narrow {
    max-width: var(--measure);
}

/* ── Embed (public published pages) ────────────────────────── */
.embed-header {
    padding: var(--space-md) var(--pad-inline) 0;
}

.embed-logo-link {
    display: inline-block;
}

.embed-logo {
    height: 44px;
    width: auto;
}

.embed-page {
    max-width: var(--measure);
    padding: var(--space-lg) var(--pad-inline) var(--space-xl);
}

.embed-eyebrow {
    margin: 0 0 var(--space-xs);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.pairings-updated {
    margin: 0 0 var(--space-md);
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* Round jump-links */
.round-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

/* Give every round's pairings table identical column widths. Default (auto)
   layout sizes each table to its own content, so rounds with longer names get
   wider columns and the tables don't line up with each other. A fixed layout
   with set widths for the Table number and action columns leaves the two name
   columns to split the remaining space equally, identically in every table. */
.round-section table {
    table-layout: fixed;
}

.round-section th:first-child {
    width: 5rem;
}

.round-section th.no-print {
    width: 12rem;
}

/* Keep the round heading visible while scrolling that round's table.
   Scoped to the embed page: the in-nav tab has its own sticky app header
   that this would slide behind. */
.embed-page .round-section h2 {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: var(--space-sm) 0;
    background: var(--surface);
}

/* ── Print ─────────────────────────────────────────────────── */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .embed-header {
        padding: 0 0 var(--space-sm);
    }

    .embed-page {
        max-width: none;
        padding: 0;
    }

    .round-section {
        break-inside: avoid;
    }

    /* Clear the per-row rules, then draw only the heading/body separator and the
       table's bottom edge. Both lines are drawn on tbody `td` cells: Firefox
       won't print border-collapse borders on `thead`/`th` cells, so the header
       separator is the first body row's top border rather than the th's bottom. */
    .embed-page th,
    .embed-page td {
        border-bottom: none;
    }

    .embed-page tbody tr:first-child td {
        border-top: 1px solid var(--text);
    }

    .embed-page tbody tr:last-child td {
        border-bottom: 1px solid var(--text);
    }

    /* Anchored sticky headers waste ink and can overlap on paper */
    .embed-page .round-section h2 {
        position: static;
        background: none;
    }
}

/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
    max-width: var(--content-max);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--pad-inline);
    font-size: 0.9em;
}

.nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    white-space: nowrap;
}

.nav-brand {
    font-weight: bold;
    color: var(--color-primary);
    text-decoration: none;
}

.nav-brand:hover {
    text-decoration: underline;
}

.nav-sep {
    color: var(--color-border);
    user-select: none;
}

.nav-left a {
    text-decoration: none;
    color: var(--color-link);
}

.nav-left a:hover {
    text-decoration: underline;
}

.nav-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.nav-tab {
    text-decoration: none;
    color: var(--color-muted);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius);
    font-size: 0.9em;
}

.nav-tab:hover {
    background-color: var(--color-bg-subtle);
    color: var(--color-primary);
}

.nav-tab.active {
    background-color: var(--color-primary);
    color: white;
}

.nav-tab-sep {
    display: inline-block;
    width: 1px;
    height: 1em;
    background-color: var(--color-border);
    margin: 0 var(--space-xs);
    vertical-align: middle;
}

/* Secondary nav menu ("Settings ▾"), built on a native <details> so it opens
   with no JS. The panel floats below the summary; a click on the summary
   toggles it, and datastar closes it on an outside click. */
.nav-menu {
    position: relative;
}

.nav-menu-summary {
    list-style: none;   /* drop the default disclosure triangle */
    cursor: pointer;
    user-select: none;
}

.nav-menu-summary::-webkit-details-marker {
    display: none;
}

/* Keep the summary highlighted (like a hovered tab) while the menu is open. */
.nav-menu[open] > .nav-menu-summary:not(.active) {
    background-color: var(--color-bg-subtle);
    color: var(--color-primary);
}

.nav-menu-caret {
    font-size: 1.2em;
}

.nav-menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    margin-top: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 160px;
    padding: var(--space-xs);
    background-color: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.nav-menu-item {
    text-decoration: none;
    color: var(--color-muted);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius);
    font-size: 0.9em;
    white-space: nowrap;
}

.nav-menu-item:hover {
    background-color: var(--color-bg-subtle);
    color: var(--color-primary);
}

.nav-menu-item.active {
    background-color: var(--color-primary);
    color: white;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    white-space: nowrap;
}

.nav-right a {
    text-decoration: none;
    color: var(--color-link);
}

.nav-right a:hover {
    text-decoration: underline;
}

.nav-logout-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.nav-link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-link);
    cursor: pointer;
    font-size: inherit;
}

.nav-link-btn:hover {
    text-decoration: underline;
    background: none;
}

.nav-logo {
    height: 28px;
    width: auto;
    vertical-align: middle;
}

/* ── Messages ─────────────────────────────────────────────── */
.messages {
    list-style: none;
    padding: 0;
}

.messages li {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: var(--radius);
}

.messages .success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

.messages .error {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
}

/* Inline validation error (e.g. an inline-edit form), highlighted like a flash
   message but usable on its own outside the .messages list. */
.error {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius);
    padding: 8px 12px;
}

/* Confirmation shown after a result is saved, with an Edit button to fix it. */
.result-saved {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border-radius: var(--radius);
    padding: 8px 12px;
    margin-bottom: 15px;
}

/* ── Forms ─────────────────────────────────────────────────── */
form p {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-sizing: border-box;
}

textarea {
    resize: vertical;
}

/* Native <select> and number inputs default to the browser's form-control font
   (~13px), which reads smaller than the surrounding body text. Inherit the page
   font and match the text-input padding/border so they line up in size. Width is
   left alone so inline selects (e.g. the fixed-pairing pickers) and compact
   score fields keep their natural sizing. */
select,
input[type="number"] {
    font: inherit;
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-sizing: border-box;
}

/* Explore comparison: the what-if and actual round tables side by side (stacked
   on narrow screens). */
.explore-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: start;
}
.explore-compare .pairings-main {
    max-width: none;
}
@media (max-width: 980px) {
    .explore-compare {
        grid-template-columns: 1fr;
    }
}

/* A pairing that appears on both the what-if and actual side. */
.common-mark {
    color: var(--color-finished);
    font-weight: bold;
}

/* The earlier rounds a repeat pairing already met in, shown in the Repeats cell:
   inline next to the count on wide screens, stacked under it on narrow. */
.repeat-rounds {
    font-size: 0.75em;
    font-weight: normal;
    color: var(--color-muted);
    white-space: nowrap;
    margin-left: 0.5em;
}

@media (max-width: 980px) {
    .repeat-rounds {
        display: block;
        margin-left: 0;
    }
}

.errorlist {
    color: var(--color-error-text);
    list-style: none;
    padding: 0;
    margin: 5px 0;
}

/* ── Buttons ──────────────────────────────────────────────── */
button,
input[type="submit"] {
    background-color: var(--color-primary);
    color: white;
    padding: 8px 14px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
}

button:hover,
input[type="submit"]:hover {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    display: inline-block;
    background-color: #fff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 6px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
}

.btn-secondary:hover {
    background-color: var(--color-primary-light);
}

.btn-secondary:disabled {
    background-color: #fff;
    color: var(--color-border);
    border-color: var(--color-border);
    cursor: default;
}

.btn-secondary:disabled:hover {
    background-color: #fff;
}

/* Filled purple button, used on anchors that should read as a primary action
   (e.g. the "Submit results" links in the pairings table). */
.btn-primary {
    display: inline-block;
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    color: white;
}

.btn-cancel {
    background-color: #fff;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    padding: 6px 14px;
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
}

.btn-cancel:hover {
    background-color: var(--color-bg-subtle);
}

.btn-publish-needed {
    background-color: var(--color-danger);
}

.btn-publish-needed:hover {
    background-color: var(--color-danger-hover);
}

.btn-publish-current {
    background-color: var(--color-muted-bg);
    cursor: default;
}

.btn-publish-current:hover {
    background-color: var(--color-muted-bg);
}

/* Save buttons reflect unsaved-changes state: grey when clean, red when the
   form/grid has edits that haven't been saved yet. */
.btn-save {
    background-color: var(--color-muted-bg);
}

.btn-save:hover {
    background-color: var(--color-muted);
}

.btn-save.is-dirty {
    background-color: var(--color-danger);
}

.btn-save.is-dirty:hover {
    background-color: var(--color-danger-hover);
}

/* ── Tables ────────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-md);
}

th,
td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

td {
    font-variant-numeric: tabular-nums;
}

th {
    background-color: var(--surface-raised);
    font-weight: 600;
}

tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

tbody tr:hover {
    background-color: var(--color-primary-light);
}

/* Numeric columns (scores, wins, spread, ratings): left-aligned like every
   other column, with tabular figures so digits still line up. `.num-left` is a
   kept alias for the same treatment. */
.num,
.num-left {
    text-align: left;
    font-variant-numeric: tabular-nums;
}

td a:hover {
    background-color: var(--color-bg-hover);
    border-radius: var(--radius-sm);
}

/* Bounded scroll region: long tables scroll internally so page-level controls
   stay on screen. Header row sticks to the top of the scroll box (no dependency
   on the sticky-header height). */
.table-scroll {
    max-height: calc(100vh - var(--header-h) - 96px);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--surface-raised);
}

.table-scroll table {
    margin-bottom: 0;
}

.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    /* border-collapse drops borders on sticky cells; use an inset shadow. */
    box-shadow: inset 0 -1px 0 var(--color-border);
}

.table-narrow {
    max-width: 680px;
}

/* ── Layout utilities ─────────────────────────────────────── */
/* Title row with right-aligned page actions (replaces stacked controls). */
.page-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.page-head h1 {
    margin: 0;
}

.page-head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* Primary content + a contextual side panel. */
.split-main-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: var(--space-lg);
    align-items: start;
}

@media (max-width: 900px) {
    .split-main-side {
        grid-template-columns: 1fr;
    }
}

.card {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-md);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-md);
}

/* Sticky action bar above a bounded grid (Tabulator edit pages). */
.table-toolbar {
    position: sticky;
    top: var(--header-h);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    background: var(--surface);
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
}

/* Keep the toolbar controls in scale with the 13px table rows below them. */
.table-toolbar button {
    font-size: 0.8rem;
    padding: 4px 10px;
}

/* Inline simulate buttons in the pairings tables, sized to match the rows. */
.btn-sim {
    font-size: 0.8rem;
    padding: 4px 10px;
}

.table-toolbar #save-status {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.form-narrow {
    max-width: 480px;
}

/* Pairings: table + fixed-pairings editor side by side on pairable rounds. */
.pairings-main {
    max-width: 860px;
}

.pairings-body--split {
    display: grid;
    grid-template-columns: minmax(0, 860px) 300px;
    gap: var(--space-lg);
    align-items: start;
}

/* The side panel comes first in the DOM but sits in column 2, so both items
   need an explicit row 1 — otherwise grid's sparse auto-placement drops the
   main table to row 2 (below the panel). */
.pairings-body--split .pairings-main {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
}

.pairings-body--split .pairings-side {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.pairings-side h3 {
    margin-top: 0;
}

/* Keep the two player selects on one line ([name] vs [name]); the selects
   shrink to share the panel width (the dropdown still shows full names) and the
   Add button wraps to its own full-width line below. */
.pairings-side .fixed-pairing-add select {
    flex: 1 1 0;
    min-width: 0;
}

.pairings-side .fixed-pairing-add button {
    flex: 1 1 100%;
}

/* Narrow screens: stack into a single column. Clearing the explicit row/column
   placement lets the items flow in DOM order, floating the side panel on top of
   the main table. */
@media (max-width: 980px) {
    .pairings-body--split {
        grid-template-columns: 1fr;
    }
    .pairings-body--split .pairings-main,
    .pairings-body--split .pairings-side {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Settings formset: size the table to its content instead of stretching the
   full container width (which leaves large gaps between the few columns). */
#settings-formset table {
    width: auto;
}

#settings-formset th,
#settings-formset td {
    padding-right: var(--space-lg);
}

/* Round-number inputs hold a single value; keep them narrow so the columns
   (and the controls row above) stay tight instead of spreading. */
#settings-formset input[type="text"],
#settings-formset input[type="number"],
.settings-controls input[type="text"],
.settings-controls input[type="number"] {
    width: 5em;
}

/* Tournament detail: divisions beside a metadata card. */
.tournament-divisions h2 {
    margin-top: 0;
}

.card dl {
    margin: 0;
}

.card dl dt:first-child {
    margin-top: 0;
}

/* ── Definition Lists ─────────────────────────────────────── */
dl {
    margin-bottom: 20px;
}

dt {
    font-weight: bold;
    margin-top: 10px;
}

dd {
    margin-left: 0;
    margin-bottom: 5px;
}

/* ── Division Components ──────────────────────────────────── */
.division-test {
    background-color: var(--color-test-bg);
}

.division-deleted {
    background-color: var(--color-deleted-bg);
}

.settings-controls {
    display: flex;
    gap: var(--space-lg);
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.division-toolbar {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: 12px;
}

.division-inline-form {
    background-color: var(--color-bg-form);
    border: 1px solid var(--color-bg-form-border);
    border-radius: var(--radius);
    padding: 12px var(--space-md);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.division-inline-form form {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
}

.division-inline-form input[type="text"] {
    width: 220px;
    padding: 6px 10px;
}

.test-badge {
    display: inline-block;
    background-color: var(--color-test-badge);
    color: #333;
    font-size: 0.75em;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

/* Marker for a withdrawn (dropped) entrant in standings/entrant lists. */
.tag-dropped {
    display: inline-block;
    background-color: var(--color-muted-bg);
    color: #fff;
    font-size: 0.75em;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    vertical-align: middle;
}

.row-dropped {
    color: var(--color-muted);
}

/* ── Round Tabs ───────────────────────────────────────────── */
.round-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 0;
}

/* Each round-tab status class sets --tab-color and --tab-bg; the base
   .round-tab rules then plug those into resting / active states. */
.round-tab {
    --tab-color: var(--color-future);
    --tab-bg: var(--color-future-light);

    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    border-radius: var(--radius) var(--radius) 0 0;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    background-color: var(--tab-bg);
    color: var(--tab-color);
}

.round-tab-finished     { --tab-color: var(--color-finished);    --tab-bg: var(--color-finished-light); }
.round-tab-in_progress  { --tab-color: var(--color-in-progress); --tab-bg: var(--color-in-progress-light); }
.round-tab-pairable     { --tab-color: var(--color-pairable);    --tab-bg: var(--color-pairable-light); }
.round-tab-published    { --tab-color: var(--color-published);   --tab-bg: var(--color-published-light); }
.round-tab-future       { --tab-color: var(--color-future);      --tab-bg: var(--color-future-light); }
.round-tab-error_no_pairings { --tab-color: #b3261e; --tab-bg: #fdecea; }

.round-tab:hover {
    filter: brightness(0.95);
}

.round-tab.active {
    background-color: var(--tab-color);
    color: white;
    border-color: var(--color-border);
    border-bottom: 2px solid var(--tab-color);
    position: relative;
    z-index: 1;
    box-shadow: inset 0 3px 0 0 currentColor;
    padding-top: calc(var(--space-xs) + 2px);
}

#round-tab-content {
    border: 1px solid var(--color-border);
    border-top: none;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.round-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.round-header h2 {
    margin: 0;
}

.btn-publish-round {
    font-size: 0.85rem;
    padding: var(--space-xs) var(--space-md);
}

.btn-unpublish-round {
    font-size: 0.85rem;
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-muted-bg);
}

.btn-unpublish-round:hover {
    background-color: var(--color-muted);
}

.round-status-badge {
    display: inline-block;
    font-size: 0.6em;
    font-weight: bold;
    padding: 2px var(--space-sm);
    border-radius: var(--radius);
    vertical-align: middle;
    text-transform: uppercase;
}

.badge-finished { background-color: var(--color-finished-light); color: var(--color-finished); }
.badge-in-progress { background-color: var(--color-in-progress-light); color: var(--color-in-progress); }
.badge-pairable { background-color: var(--color-pairable-light); color: var(--color-pairable); }
.badge-published { background-color: var(--color-published-light); color: var(--color-published); }
.badge-future { background-color: var(--color-future-light); color: var(--color-future); }
.badge-error { background-color: #fdecea; color: #b3261e; }

/* ── Inline fixed pairings (pairings tab) ──────────────────── */
.fixed-pairings-section {
    margin: var(--space-md) 0;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.fixed-pairings-section h3 {
    margin-top: 0;
}

.fixed-pairings-list {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
}

.fixed-pairings-list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 2px 0;
}

.fixed-pairing-remove {
    line-height: 1;
    padding: 0 var(--space-sm);
}

.fixed-pairings-empty {
    color: var(--color-future);
    margin: 0 0 var(--space-md);
}

.fixed-pairing-add {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* ── Utilities ────────────────────────────────────────────── */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-xl { margin-top: var(--space-xl); }
.ml-md { margin-left: var(--space-md); }
.hidden { display: none; }
.inline { display: inline; }
.input-narrow { width: 5em; }

.inline-panel {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
}

.toolbar {
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.board-table-map-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
}

.board-table-map-main {
    flex: 1 1 auto;
    min-width: 0;
}

.board-table-map-explainer {
    flex: 0 0 auto;
    margin: 0;
}

.board-table-map-explainer figcaption {
    margin-bottom: var(--space-sm);
    font-size: 0.9rem;
    max-width: 220px;
}

.board-table-map-explainer .example-value {
    color: #dc2626;
    font-weight: 600;
}

.board-table-map-explainer img {
    width: 220px;
    max-width: 100%;
    height: auto;
}

.empty-state {
    color: var(--color-muted);
    font-style: italic;
    margin: var(--space-md) 0;
}

/* "Someone else is editing this" warning shown on the edit grids. */
.presence-banner {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-in-progress-light);
    color: var(--color-in-progress);
    border: 1px solid var(--color-in-progress);
    border-radius: var(--radius);
    font-weight: 600;
}

/* Stronger styling once the data has actually gone stale (someone saved). */
.presence-banner.is-stale {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border-color: var(--color-danger);
}

/* Two edit grids side by side on a wide window, stacked when narrow. The
   minmax(0, ...) tracks + min-width:0 columns let each Tabulator table shrink
   to its share of the width (it scrolls internally) rather than overflowing. */
.editgrid-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

.editgrid-columns > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .editgrid-columns {
        grid-template-columns: 1fr;
    }
}