body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    color: #222;
    background: #fafafa;
}

.site-header {
    background: #1f3a5f;
    color: #fff;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.site-header h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.site-header h1 a {
    color: inherit;
    text-decoration: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
}

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

.nav-greeting {
    font-size: 0.95rem;
    opacity: 0.9;
}

.nav-logout {
    margin: 0;
}

.nav-logout button {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0.3rem 0.7rem;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9rem;
}

.nav-logout button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.site-main {
    padding: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Flash messages */

.flashes {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.flash {
    padding: 0.6rem 0.85rem;
    border-radius: 4px;
    font-size: 0.95rem;
}

.flash-success {
    background: #e2f5ea;
    color: #1f5d3a;
    border: 1px solid #b6e0c4;
}

.flash-error {
    background: #fbe3e3;
    color: #7a1f1f;
    border: 1px solid #ecbdbd;
}

.flash-message,
.flash-info {
    background: #e7eef7;
    color: #1f3a5f;
    border: 1px solid #c4d3e8;
}

/* Buttons */

.button,
a.button {
    display: inline-block;
    background: #1f3a5f;
    color: #fff;
    padding: 0.55rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
}

.button:hover,
a.button:hover {
    background: #284a78;
    text-decoration: none;
}

.link-button {
    background: none;
    border: none;
    color: #a02020;
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-decoration: underline;
}

/* Auth forms */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 360px;
    margin: 1rem 0;
}

.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.95rem;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    padding: 0.55rem 0.7rem;
    border: 1px solid #c7c7c7;
    border-radius: 4px;
    font-size: 1rem;
}

.auth-form input[type="file"] {
    font-size: 0.9rem;
}

.auth-form button {
    margin-top: 0.5rem;
    padding: 0.6rem 1rem;
    background: #1f3a5f;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

.auth-form button:hover {
    background: #284a78;
}

.auth-alt {
    font-size: 0.9rem;
    margin-top: 1rem;
}

/* Current hike card on home */

.current-hike-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-left: 4px solid #1f3a5f;
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
}

.current-hike-card h2 {
    margin-top: 0;
}

/* Hike catalog list */

.hike-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.hike-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.hike-list-item > a {
    flex: 1;
    color: #1f3a5f;
    text-decoration: none;
    font-weight: 500;
    min-width: 12rem;
}

.hike-list-item > a:hover {
    text-decoration: underline;
}

.hike-dates,
.hike-dist {
    color: #666;
    font-size: 0.9rem;
}

.hike-status {
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hike-current .hike-status {
    background: #cce7d6;
    color: #1f5d3a;
}

.hike-upcoming .hike-status {
    background: #ffe9c5;
    color: #7a4a1f;
}

.hike-past .hike-status {
    background: #e2e2e2;
    color: #555;
}

/* Hike detail */

.hike-detail h2 {
    margin-top: 0;
}

.hike-meta {
    display: flex;
    gap: 1.5rem;
    color: #666;
    font-size: 0.95rem;
    flex-wrap: wrap;
}

.hike-format {
    font-size: 0.75rem;
    background: #eee;
    color: #555;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

.hike-notes {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 1rem;
    margin: 1rem 0;
    white-space: pre-wrap;
}

.hike-map {
    width: 100%;
    height: 480px;
    border-radius: 6px;
    overflow: hidden;
    margin: 1rem 0;
    background: #e8e8e8;
}

.admin-inline-actions {
    font-size: 0.9rem;
    color: #666;
}

/* Admin */

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    overflow: hidden;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.admin-table th {
    background: #f3f3f3;
    font-weight: 600;
    font-size: 0.9rem;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.admin-actions form {
    display: inline;
    margin: 0;
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 640px;
    margin: 1rem 0;
}

.admin-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.admin-form input[type="text"],
.admin-form input[type="date"],
.admin-form textarea {
    padding: 0.55rem 0.7rem;
    border: 1px solid #c7c7c7;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
}

.admin-form textarea {
    resize: vertical;
}

.admin-form .hint {
    color: #888;
    font-weight: normal;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-row label {
    flex: 1;
    min-width: 12rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 0.5rem;
}

.form-actions a {
    color: #666;
    text-decoration: none;
}

.form-actions a:hover {
    text-decoration: underline;
}

/* Elevation profile — Chart.js area chart on the hike detail page.
   The wrapper sets an explicit height because the chart runs with
   maintainAspectRatio:false so it can resize horizontally on window
   changes without growing unbounded vertically. position: relative
   gives Chart.js a positioning context for its internal canvas sizing. */
.hike-elevation-wrap {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 0.6rem 0.5rem 0.3rem;
    margin: 1rem 0;
    height: 240px;
    position: relative;
    box-sizing: border-box;
}

/* Completion CTA block on the hike detail page.
   Subtle blue-tinted card that sits between the elevation chart and
   the completion roll, with a state-aware message inside (login prompt,
   "submissions open on X", "I completed this hike" button, or
   "View/edit your completion"). */
.completion-cta {
    background: #f7faff;
    border: 1px solid #dde6f0;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
}

.completion-cta p {
    margin: 0;
}

.completion-cta p + p {
    margin-top: 0.6rem;
}

/* Completion roll — list of all users who've earned the duck for the hike.
   Each row is one user's submission with avatar, date, optional comment,
   and a photo grid. */
.completions h3 {
    margin: 2rem 0 0.75rem 0;
}

.completion-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.completion-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 0.9rem 1rem;
}

.completion-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.completion-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #d9e2ec;
    color: #34495e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.avatar-placeholder {
    text-transform: uppercase;
}

.completion-byline {
    line-height: 1.2;
}

.completion-date {
    display: block;
    color: #666;
    font-size: 0.85rem;
}

.completion-edit {
    margin-left: auto;
    font-size: 0.9rem;
    color: #1f3a5f;
}

.completion-comment {
    margin: 0.4rem 0 0.5rem;
    color: #444;
    white-space: pre-wrap;
}

/* Photo grid. auto-fill keeps columns 140px wide and lays as many
   columns as fit per row. aspect-ratio:1 makes each thumbnail a square
   even if the original photo isn't, so the grid stays tidy. */
.completion-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.completion-photos img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    transition: opacity 0.15s;
}

.completion-photos a:hover img {
    opacity: 0.85;
}

/* Completion form (submit and edit share this).
   max-width caps the form at a readable line length on wide screens. */
.completion-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 720px;
    margin: 1rem 0;
}

.completion-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.completion-form input[type="date"],
.completion-form input[type="file"],
.completion-form textarea {
    padding: 0.55rem 0.7rem;
    border: 1px solid #c7c7c7;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
}

.completion-form textarea {
    resize: vertical;
}

.completion-form .hint {
    color: #888;
    font-weight: normal;
    font-size: 0.85rem;
}

.completion-form fieldset {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5rem 0.85rem 0.75rem;
    margin: 0;
}

.completion-form fieldset legend {
    padding: 0 0.4rem;
    font-weight: 500;
    font-size: 0.9rem;
}

/* List of existing photos/tracks on the edit form. Each row has the
   thumbnail (or track summary) plus a Remove checkbox. */
.existing-files {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.existing-files li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.existing-files img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.track-row {
    font-size: 0.95rem;
}

.track-stat {
    color: #666;
    font-size: 0.85rem;
}

/* Override the flex-direction column from .completion-form label for
   the inline "Remove" checkbox. More specific selector beats the
   parent rule without needing !important. */
.completion-form label.remove-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    font-weight: normal;
    margin-left: auto;
}

/* Active-window note on the submission form — a soft yellow callout
   that explains the date constraint without feeling like an error. */
.window-note {
    background: #fffae6;
    border-left: 4px solid #d4ac0d;
    padding: 0.7rem 0.9rem;
    border-radius: 4px;
    color: #444;
    margin: 1rem 0;
}

/* Delete-completion button. Visually separated from the edit form
   with top border to make it clear this is the destructive action. */
.completion-delete-form {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

/* ============================================================
   /me profile page layout. Three vertical sections: header,
   stats badges, then the track map (if any) and the completion
   list (reusing .hike-list classes from the catalog page).
   ============================================================ */
.profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background: #d9e2ec;
    color: #34495e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 2rem;
    flex-shrink: 0;
}

.profile-byline h2 {
    margin: 0 0 0.2rem 0;
}

.profile-meta {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
}

/* Stats badges. auto-fit lets the three boxes stretch to fill on
   wide screens and stack neatly on narrow ones without needing
   a media query. minmax(160px, 1fr) keeps each box readable. */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.stat {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 0.9rem 1.25rem;
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 600;
    color: #1f3a5f;
    line-height: 1.1;
}

.stat-label {
    display: block;
    color: #666;
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

/* Section headers on the profile page (My tracks, Completed hikes). */
.profile-map-section h3,
.profile-completions h3 {
    margin: 2rem 0 0.75rem 0;
}

/* ============================================================
   Team leaderboard on the home page. One row per user with
   completions, sorted by duck count desc + alphabetical
   tie-break. Top three rows get a subtle podium-color tint
   (gold/silver/bronze) reinforced by medal emoji in the
   rank column.
   ============================================================ */
.leaderboard {
    margin: 2rem 0;
}

.leaderboard h2 {
    margin-bottom: 1rem;
}

.leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
}

/* Podium tints — soft horizontal gradients fade the medal
   color into white toward the right, so the row remains
   readable and the avatar/name sit on a near-white field. */
.leaderboard-podium-1 {
    background: linear-gradient(to right, #fff5cc, #fff 75%);
    border-color: #e6c84a;
}
.leaderboard-podium-2 {
    background: linear-gradient(to right, #ececec, #fff 75%);
    border-color: #bfbfbf;
}
.leaderboard-podium-3 {
    background: linear-gradient(to right, #f6e1c8, #fff 75%);
    border-color: #cd9b6a;
}

.leaderboard-rank {
    width: 2.2rem;
    text-align: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1;
}

.leaderboard-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #d9e2ec;
    color: #34495e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.leaderboard-name {
    flex: 1;
    font-weight: 500;
}

.leaderboard-count {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: #1f3a5f;
}

/* The duck PNG. object-fit:contain so any non-square aspect
   ratio gets letterboxed inside the 32px box rather than
   stretching the duck's chain and sunglasses. */
.duck-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

.duck-number {
    font-size: 1.15rem;
}

/* ============================================================
   HERO BLOCK on the home page. Three visual variants driven by
   the .hero-active / .hero-victory / .hero-empty modifier
   class. Active gets a navy accent (action); victory gets a
   gold accent (celebration); empty stays neutral.
   ============================================================ */
.hero {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0;
}

.hero h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* Active state — strong navy accent on the left edge mirrors
   the primary brand color used for hike routes throughout. */
.hero-active {
    border-left: 6px solid #1f3a5f;
}

.hero-active h2 {
    color: #1f3a5f;
}

/* Victory state — gold accent reinforces the "won the duck"
   feeling without being garish about it. */
.hero-victory {
    border-left: 6px solid #d4ac0d;
}

.hero-victory h2 {
    color: #6e4d04;
    margin-top: 0.75rem;
}

.hero-empty {
    text-align: center;
    color: #666;
    padding: 2.5rem 1.5rem;
}

/* Map preview on the active hero — smaller than the detail
   page version so it doesn't dominate the landing page. */
.hero-map {
    width: 100%;
    height: 280px;
    border-radius: 6px;
    overflow: hidden;
    background: #e8e8e8;
    margin: 0.85rem 0 1rem 0;
}

/* Stats line under the title. Inline-flex with gap handles the
   variable-width labels gracefully; flex-wrap means stats break
   to a new line cleanly on narrow viewports. */
.hero-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    color: #555;
    font-size: 0.95rem;
    margin: 0.5rem 0 1rem 0;
}

.hero-days {
    font-weight: 600;
    color: #1f3a5f;
}

/* Countdown line on the victory hero. Caps + letter-spacing
   gives it an "announcement" feeling distinct from body copy. */
.hero-countdown {
    font-size: 1.05rem;
    font-weight: 600;
    color: #6e4d04;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Finisher grid — names + avatars on the victory hero. */
.hero-finishers {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 1.25rem 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-finisher {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 72px;
}

.hero-finisher-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    background: #d9e2ec;
    color: #34495e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.hero-finisher-name {
    font-size: 0.8rem;
    text-align: center;
    color: #555;
    line-height: 1.2;
}

/* Secondary button variant — lower-key than the navy primary,
   appropriate for "see last hike's photos" rather than the
   primary "submit your completion" CTA. */
.button-secondary,
a.button-secondary {
    background: #fff;
    color: #1f3a5f;
    border: 1px solid #1f3a5f;
}

.button-secondary:hover,
a.button-secondary:hover {
    background: #f0f4fa;
    color: #1f3a5f;
}

/* ============================================================
   STORY BLOCK — "The Tradition Begins"
   Warm cream background visually distinguishes the editorial
   content from the data-driven hero and leaderboard. Generous
   line-height and a narrow-ish text column for comfortable
   reading at a wider container width.
   ============================================================ */
.story {
    background: #faf7f0;
    border: 1px solid #e8e0c8;
    border-radius: 8px;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
}

.story h2 {
    margin-top: 0;
    margin-bottom: 0.85rem;
    color: #6e4d04;
    font-size: 1.3rem;
}

.story p {
    line-height: 1.65;
    color: #2f2a1f;
    margin: 0;
    max-width: 70ch;
}

.story p + p {
    margin-top: 0.95rem;
}

/* "Up next" preview strip — sits directly under the active hero
   when a future hike is queued. Visually subdued vs. the hero
   itself (dashed border + smaller font) so it reads as a
   postscript/teaser rather than competing for attention. */
.next-up {
    background: #fafbfd;
    border: 1px dashed #cdd9e8;
    border-radius: 6px;
    padding: 0.6rem 1rem;
    margin: 0 0 1.5rem 0;
    color: #555;
    font-size: 0.95rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
}

.next-up-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: #1f3a5f;
    font-size: 0.78rem;
}

.next-up-name {
    font-weight: 500;
    color: #1f3a5f;
    text-decoration: none;
}

.next-up-name:hover {
    text-decoration: underline;
}

.next-up-when {
    color: #777;
    font-size: 0.9rem;
}