/* Visual style per spec.txt's "** visual style **" section (ref: sailgp.com/general/esailgp).
   Typefaces follow nautique.ch (Societe Nautique de Geneve): Open Sans for body copy (their
   actual body font, confirmed from their page's computed styles), Montserrat for headings and
   the site wordmark (the closest free match to their logo's geometric sans lockup, which mixes
   a light weight with a bold emphasis word - same treatment used on ".site-logo" below). */

:root {
    --color-chrome-bg: #071b2e; /* deep offshore navy / near-black */
    --color-chrome-text: #ffffff;
    --color-chrome-text-dim: #adc2d6;
    --color-accent: #d5382a; /* the one accent color - CTAs and links only */
    --color-bg: #ffffff;
    --color-text: #111111;
    --color-text-dim: #555555;
    --color-border: #cfcfcf;
    --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.5;
}

/* ---- chrome: nav, secondary bar, footer ---- */

.site-header {
    background: var(--color-chrome-bg);
    color: var(--color-chrome-text);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
}

.site-logo {
    font-family: var(--font-heading);
    font-weight: 300;
    letter-spacing: 0.04em;
    font-size: 1.15rem;
    color: var(--color-chrome-text);
    text-decoration: none;
    text-transform: uppercase;
}

.site-logo-bold {
    font-weight: 800;
}

.nav-links {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: var(--color-chrome-text);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}

.nav-links a.active {
    border-bottom-color: var(--color-accent);
}

.nav-links a:hover {
    color: var(--color-chrome-text-dim);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    font-family: inherit;
    color: var(--color-chrome-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0 0 4px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.nav-dropdown-toggle::after {
    content: "\25be";
    margin-left: 4px;
    font-size: 0.7em;
}

.nav-dropdown-toggle:hover {
    color: var(--color-chrome-text-dim);
}

.nav-dropdown-toggle.active {
    border-bottom-color: var(--color-accent);
}

.nav-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 10px 0 0;
    padding: 6px 0;
    min-width: 190px;
    list-style: none;
    background: var(--color-chrome-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    z-index: 20;
}

.nav-dropdown-panel a {
    display: block;
    padding: 8px 16px;
    color: var(--color-chrome-text);
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: none;
}

.nav-dropdown-panel a:hover {
    background: rgba(255, 255, 255, 0.08);
}

.nav-dropdown-panel a.active {
    color: var(--color-accent);
}

.nav-dropdown.open .nav-dropdown-panel,
.nav-dropdown:hover .nav-dropdown-panel {
    display: block;
}

/* Not a full responsive redesign - just keeps the nav usable on a narrow window. Below this
   width the dropdown only opens by click/tap (no hover), as an inline list under its toggle
   rather than a floating popover that could run off-screen. */
@media (max-width: 720px) {
    .site-nav {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .nav-links {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .nav-dropdown:hover .nav-dropdown-panel {
        display: none;
    }

    .nav-dropdown.open .nav-dropdown-panel {
        display: block;
        position: static;
        margin: 4px 0 0 12px;
        padding: 0;
        border: none;
        box-shadow: none;
        background: none;
    }
}

.site-subbar {
    background: color-mix(in srgb, var(--color-chrome-bg) 85%, #ffffff 8%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-chrome-text-dim);
    font-size: 0.85rem;
}

.site-subbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-footer {
    background: var(--color-chrome-bg);
    color: var(--color-chrome-text-dim);
    margin-top: 48px;
}

.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
}

.feedback-link {
    color: var(--color-chrome-text-dim);
    text-decoration: underline;
}

.feedback-link:hover {
    color: var(--color-chrome-text);
}

/* ---- content ---- */

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
}

.page-narrow {
    max-width: 640px;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 0;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.4rem;
    margin-top: 2.5rem;
}

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

.lede {
    color: var(--color-text-dim);
    max-width: 60ch;
}

/* ---- buttons ---- */

.btn {
    display: inline-block;
    background: var(--color-accent);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
    padding: 10px 20px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

.btn:hover {
    opacity: 0.9;
}

.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

/* ---- forms ---- */

.field {
    margin-bottom: 18px;
}

.field label {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    margin-bottom: 6px;
    color: var(--color-text-dim);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="datetime-local"],
.field select,
.field textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    font-size: 1rem;
    font-family: inherit;
}

.boat-type-picker {
    position: relative;
}

.boat-type-results {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-top: none;
}

.boat-type-result {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.9rem;
}

.boat-type-result:hover {
    background: color-mix(in srgb, var(--color-bg) 90%, #000000 6%);
}

.discarded-score {
    color: var(--color-text-dim);
    text-decoration: line-through;
}

.field-hint {
    color: var(--color-text-dim);
    font-size: 0.8rem;
    margin-top: 4px;
}

.checkbox-group label {
    text-transform: none;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
}

/* ---- replay ---- */

.page-wide {
    max-width: 1440px;
}

.replay-controls {
    margin-bottom: 12px;
}

.replay-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.replay-mode-toggle {
    margin-left: auto;
    display: inline-flex;
    gap: 14px;
    font-size: 0.85rem;
}

.replay-map {
    width: 100%;
    height: 560px;
    border: 1px solid var(--color-border);
    border-radius: 2px;
}

.replay-scrubber-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

.replay-scrubber-row input[type="range"] {
    flex: 1;
}

.replay-scrubber-row span {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.replay-boat-label {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    padding: 1px 5px;
    font-size: 0.7rem;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.replay-tackgybe-label {
    background: var(--color-accent);
    color: #ffffff;
    border-radius: 2px;
    padding: 1px 5px;
    font-size: 0.68rem;
    white-space: nowrap;
}

/* ---- flash messages ---- */

.flash {
    padding: 10px 16px;
    border-radius: 2px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.flash-error {
    background: #fbe7e5;
    color: #8a1f14;
    border: 1px solid #e8b3ac;
}

.flash-success {
    background: #e6f4ea;
    color: #1e4620;
    border: 1px solid #b6dcbd;
}

/* ---- tables ---- */

table.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 24px;
    font-size: 0.9rem;
}

table.data-table th,
table.data-table td {
    border: 1px solid var(--color-border);
    padding: 8px 12px;
    text-align: left;
}

table.data-table th {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.75rem;
    cursor: pointer;
    user-select: none;
}

table.data-table th.sortable::after {
    content: " \2195";
    color: var(--color-text-dim);
}

table.data-table tbody tr:nth-child(odd) {
    background: #fafafa;
}

.list-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

/* ---- countdown widget (reused later for live start/race countdowns) ---- */

.countdown {
    display: flex;
    gap: 16px;
}

.countdown-digit {
    text-align: center;
}

.countdown-digit .value {
    font-size: 1.8rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.08);
    padding: 6px 12px;
    border-radius: 2px;
    display: inline-block;
    min-width: 2.2ch;
}

.countdown-digit .label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
    color: var(--color-chrome-text-dim);
}