/* Global Styles */

/* Theme colours (admin-editable; overridden at runtime via JS setting these
   custom properties on :root). Light row tints are derived with color-mix. */
:root {
    --c-primary: #4f46e5;
    --c-success: #2e9e5b;
    --c-danger:  #dc3545;
    --c-warning: #f0ad4e;
    --c-navbar:  #b7410e;  /* rusty orange banner */
    --c-link:    #b7410e;  /* content links & dashboard figures */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
    padding-top: 60px; /* space for the fixed navbar */
}

/* Content links use the link colour (more specific rules — nav links,
   buttons — override this). */
a {
    color: var(--c-link);
}
a:hover {
    text-decoration: underline;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Auth Pages */
.auth-page {
    background: linear-gradient(135deg, var(--c-navbar) 0%, color-mix(in srgb, var(--c-navbar) 55%, #f0ad4e) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-container {
    max-width: 400px;
}

.auth-box {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.auth-box h1 {
    text-align: center;
    margin-bottom: 10px;
    color: var(--c-link);
}

.auth-box h2 {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 30px;
    color: #333;
}

.auth-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
}

.auth-link a {
    color: var(--c-link);
    text-decoration: none;
}

.auth-link a:hover {
    text-decoration: underline;
}

/* Hide the fixed navbar while a workout is active (reclaim its space). */
body.workout-active #navbar { display: none; }
body.workout-active { padding-top: 0; }

/* Layout */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: var(--c-navbar);
    color: white;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.navbar-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;  /* nav on the left, brand on the right */
    align-items: center;
    gap: 12px;
    overflow-x: auto;
}

.navbar h1 {
    font-size: 1.5em;
}

.nav-links {
    display: flex;
    gap: 20px;
    list-style: none;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

.nav-links a:hover,
.nav-links a:focus,
.nav-links a:active {
    color: white;
    font-weight: 700;
}

/* Forms */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}

/* iOS renders date/time inputs at an intrinsic width that ignores width:100%
   and sits misaligned; normalise them to behave like text fields. */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control {
    -webkit-appearance: none;
    appearance: none;
    min-height: 42px;
}

.form-control:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 5px color-mix(in srgb, var(--c-primary) 40%, transparent);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

select.form-control {
    cursor: pointer;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s ease;
}

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

.btn-primary:hover {
    background: color-mix(in srgb, var(--c-primary) 85%, black);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
}

.btn-danger {
    background: var(--c-danger);
    color: white;
}

.btn-danger:hover {
    background: color-mix(in srgb, var(--c-danger) 85%, black);
}

.btn-sm {
    padding: 5px 10px;
    font-size: 0.9em;
}

/* Alerts */
.alert {
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    position: fixed;
    top: 70px;            /* below the fixed navbar */
    right: 20px;
    z-index: 1100;        /* above the navbar (1000) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
    }
    to {
        transform: translateX(0);
    }
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Bouldering / "passed" toggle button (amber). */
.set-fail-on {
    background: var(--c-warning);
    border-color: var(--c-warning);
    color: #fff;
}

/* Workout-detail meta chips: soft, icon-led, gently coloured. */
.wo-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.wo-meta-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--c-navbar) 7%, white);
    border: 1px solid color-mix(in srgb, var(--c-navbar) 14%, white);
}
.wo-meta-ic { font-size: 20px; line-height: 1; }
/* Chips that link somewhere: keep the chip look, add an affordance. */
a.wo-meta-link { text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.15s; }
a.wo-meta-link:hover { border-color: color-mix(in srgb, var(--c-navbar) 45%, white); }
a.wo-meta-link .wo-meta-val { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c-navbar) 40%, transparent); }
.wo-meta-val { font-weight: 600; color: #555; font-size: 0.95em; }
.wo-meta-lbl {
    font-size: 0.68em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b0a8a3;
}

/* Bouldering weekly chart: highlight the hovered column. */
.boulder-hit:hover { fill-opacity: 0.12 !important; cursor: default; }

/* Missed activity blocks on the workout detail — struck-through titles. */
.missed-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.missed-list li {
    color: #999;
    padding: 2px 0;
}

/* Resolved set rows: green when completed, red when passed (light tints). */
.set-row.set-complete { background: color-mix(in srgb, var(--c-success) 16%, white); }
.set-row.set-passed { background: color-mix(in srgb, var(--c-danger) 14%, white); }

/* Pinned workout action bar (Start / Finish) */
.wo-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    gap: 16px;
    justify-content: center;
    padding: 14px 20px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e2e2e2;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}
.wo-actionbar .btn {
    flex: 1;
    max-width: 220px;
    margin: 0;
    padding: 12px 16px;
}

/* Session clock: sticks to the top of the viewport while scrolling through
   the activity list. Its containing block is the workout card, which wraps the
   whole session, so it stays pinned for the full scroll. */
.wo-timerbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    padding: 6px 0 4px;
    margin: 0 -4px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    border-bottom: 1px solid transparent;
}
/* Lift off the page only once actually pinned (toggled in JS). */
.wo-timerbar.is-pinned {
    border-bottom-color: #e8e8e8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.wo-rest-line { margin: 4px 0 0; }
/* Keep the last content clear of the fixed bar. */
#workout-area:not(.hidden) {
    padding-bottom: 84px;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 16px;
}
.modal-box {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

/* Avatar */
.avatar-lg {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e2e2e2;
}
.avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    background: #f0f0f0;
    color: #9e9e9e;
}

/* Badges */
.badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 10px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge-public {
    background: #e0e7ff;
    color: #3730a3;
}
.badge-private {
    background: #eee;
    color: #555;
}

/* Cards */
.card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

/* Workout screen: maximise content real estate — trim page padding and card
   chrome so the set logger fills the width. */
.wo-page { padding: 8px; }
.wo-page .card { padding: 12px; margin-bottom: 10px; }
@media (max-width: 768px) {
    .wo-page { padding: 4px; }
    .wo-page .card { padding: 8px; margin-bottom: 8px; border-radius: 6px; }
}

.card h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* List */
.list-group {
    list-style: none;
}

.list-item {
    background: white;
    padding: 15px;
    border: 1px solid #eee;
    margin-bottom: 10px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-item:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.list-item-actions {
    display: flex;
    gap: 10px;
}

/* Dashboard */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: white;
    padding: 14px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.stat-card .number {
    font-size: 1.6em;
    font-weight: bold;
    color: var(--c-link);
    margin: 6px 0;
}

.stat-card .label {
    color: #999;
    font-size: 0.8em;
}

/* Timer */
.timer {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    padding: 20px;
    background: #f0f0f0;
    border-radius: 8px;
    font-family: monospace;
}

.timer-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}

/* Table */
table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

table th {
    background: #f0f0f0;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #ddd;
}

table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

table tr:hover {
    background: #f9f9f9;
}

/* These data tables should fill their card and spread columns evenly on
   larger screens (on mobile they switch to horizontal scroll below). */
#trend-table, #workouts-table {
    width: 100%;
    table-layout: fixed;
}
#trend-table td, #trend-table th { text-align: center; }
#trend-table td:first-child, #trend-table th:first-child { text-align: left; width: 3em; }

/* Icon navbar — desktop: icons + labels on one line, left-aligned. Must stay
   ABOVE the responsive block so the mobile @media rules override it (equal
   specificity — later source wins). */
.nav-icons { gap: 18px; flex-wrap: nowrap; }
.nav-icons a { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
.nav-lbl { font-size: 14px; }

/* Responsive */
@media (max-width: 768px) {
    /* Navbar: fit the whole bar on screen (no horizontal scroll). Icons with a
       tiny label beneath, distributed across the width; the "Céim" wordmark
       drops to just the logo. */
    .navbar-content { padding: 0 18px; gap: 6px; overflow-x: hidden; }
    .nav-icons { flex: 1 1 auto; min-width: 0; gap: 4px; justify-content: space-between; }
    .nav-icons a { flex-direction: column; gap: 1px; }
    .nav-icons .ic { width: 20px; height: 20px; }
    .nav-lbl { font-size: 9px; line-height: 1; }
    .brand-text { display: none; }
    .navbar h1 { font-size: 1em; flex: none; }

    .card-grid {
        grid-template-columns: 1fr;
    }

    /* Keep the stat pills packing ~3 across on phones (not one per row). */
    .dashboard-stats {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 10px;
    }

    .list-item {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .list-item-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* Wide data tables scroll within their card instead of overrunning the
       screen. Narrow tables (set logger, dashboard trend) fill the width. */
    table:not(.set-table):not(#trend-table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        box-shadow: none;
    }
    table:not(.set-table):not(#trend-table) th,
    table:not(.set-table):not(#trend-table) td { padding: 8px 10px; font-size: 0.85rem; }

    /* Trend table: use full width, even columns. */
    #trend-table { width: 100%; table-layout: fixed; }
    #trend-table th, #trend-table td { padding: 8px 4px; font-size: 0.8rem; }

    /* Set logger: tighten so more fits on a phone. */
    .set-cell .set-input { padding: 6px 2px; }
    .set-cell .btn-sm { padding: 6px 1px; }
    .c-btn { flex-basis: 36px; }
}

/* Utilities */
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.text-center { text-align: center; }
.text-muted { color: #999; }
.hidden { display: none !important; }

/* Type-to-search combobox */
.combobox { position: relative; }
.cb-list {
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 1000;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 220px;
    overflow-y: auto;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.cb-item { padding: 8px 10px; cursor: pointer; }
.cb-item:hover { background: #eef; }
.cb-empty { padding: 8px 10px; color: #999; }

/* Location image thumbnails + lightbox */
.loc-thumb {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #ddd;
}
.thumb-wrap { position: relative; display: inline-block; }
.thumb-del {
    position: absolute; top: -6px; right: -6px;
    background: #dc3545; color: #fff; border: none;
    width: 20px; height: 20px; border-radius: 50%;
    cursor: pointer; line-height: 1; font-size: 13px;
}
.lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.9);
    display: none; align-items: center; justify-content: center;
    z-index: 2000; cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 95vw; max-height: 95vh; border-radius: 4px; }

/* Set-based workout logger (div rows so they can swipe-to-reveal Remove) */
.set-head, .set-row { display: flex; align-items: center; gap: 4px; }
.set-head {
    padding: 2px 4px;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em;
    color: #999;
}
.set-cell { text-align: center; }
/* Column sizing shared by header and rows so they line up. */
.c-num   { flex: 0 0 30px; font-weight: 600; }
.c-prev  { flex: 1.2 1 0; min-width: 0; font-size: 0.78em; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-val   { flex: 1 1 0; min-width: 0; }
.c-btn   { flex: 0 0 52px; }
.c-x     { flex: 0 0 40px; display: none; }   /* desktop-only fallback (see below) */
/* Roomier now the per-set timer column is gone: taller inputs + bigger tap
   targets for the ✓ / – buttons. */
.set-cell .set-input { width: 100%; padding: 10px 6px; text-align: center; font-size: 1rem; }
.set-cell .btn-sm { width: 100%; padding: 11px 4px; font-size: 1.05rem; line-height: 1; }

/* One work/rest timer + remove control per activity, in the card header. */
.wo-activity-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.act-timer { flex: 0 0 auto; min-width: 62px; text-align: center; }
.act-x { flex: 0 0 auto; padding: 6px 10px; }
/* While the activity timer is running it shows no label; a soft pulse is the
   only cue that time is being counted. */
.act-timer.act-timing {
    background: var(--c-primary); border-color: var(--c-primary);
    opacity: 0.85; cursor: default;
    animation: act-pulse 1.4s ease-in-out infinite;
}
@keyframes act-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }

/* Swipe container: the row slides left to reveal Remove behind it. */
.set-swipe { position: relative; overflow: hidden; border-bottom: 1px solid #f0f0f0; }
.set-row {
    position: relative; z-index: 1; background: #fff;
    padding: 5px 4px;
    transition: transform 0.18s ease;
    touch-action: pan-y;   /* allow vertical scroll; we handle horizontal */
}
.set-row.swiped { transform: translateX(-88px); }
/* While a finger is dragging the row, follow it exactly — the transition would
   otherwise chase the finger and make the gesture feel vague. */
.set-row.set-dragging { transition: none; }
.set-remove-btn {
    position: absolute; top: 0; right: 0; z-index: 0;
    height: 100%; width: 88px; border: none;
    background: var(--c-danger); color: #fff; font-weight: 600; cursor: pointer;
}

/* On devices with a real pointer (desktop), swipe isn't available — show the
   × column and hide the swipe-behind button. */
@media (hover: hover) and (pointer: fine) {
    .c-x { display: block; }
    .set-remove-btn { display: none; }
    .set-row.swiped { transform: none; }
}

/* Inline sprite icons */
.ic { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }

/* Chart tooltip bubble (dashboard bouldering weekly chart). Positioned by JS
   relative to its host; centred on the cursor and floated just above it. */
.chart-tip {
    display: none; position: absolute; z-index: 5;
    transform: translate(-50%, -100%);
    background: #222; color: #fff; font-size: 12px; line-height: 1.2;
    padding: 5px 8px; border-radius: 6px; white-space: nowrap;
    pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.chart-tip::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #222;
}

/* Stat labels that lead to an explainer page. Kept as quiet as the plain
   labels beside them — a dotted underline hints it's there without turning the
   dashboard into a page of links. */
.stat-doc {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted #bbb;
}
.stat-doc:hover { color: var(--c-link); border-bottom-color: var(--c-link); }

/* Body-area balance bars. Untrained areas stay in the list at zero — showing
   the gap is the point — but read as muted rather than alarming. */
.balance-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.balance-label { flex: 0 0 84px; font-size: 0.8rem; font-weight: 600; }
.balance-track { flex: 1; height: 10px; background: #f0f0f0; border-radius: 5px; overflow: hidden; }
.balance-fill { height: 100%; background: var(--c-navbar); border-radius: 5px; }
.balance-val { flex: 0 0 62px; text-align: right; font-size: 0.75rem; color: #777; }
.balance-row.none .balance-label,
.balance-row.none .balance-val { color: #bbb; }
.balance-row.none .balance-track { background: #f7f7f7; }

@media (max-width: 768px) {
    .balance-label { flex-basis: 68px; font-size: 0.75rem; }
    .balance-val { flex-basis: 52px; }
}

/* Chart x-axis labels. Deliberately HTML rather than SVG <text>: text inside a
   scaled viewBox grows and shrinks with the chart width, so it can't be legible
   on a phone and sane on a desktop at the same time. */
.chart-xlabels {
    display: flex;
    margin-top: 2px;
    font-size: 0.72rem;
    color: #999;
}
.chart-xlabels span { flex: 1; }
.chart-xlabels span:nth-child(2) { text-align: center; }
.chart-xlabels span:last-child { text-align: right; }

/* Chart key: each entry toggles its line on the metrics chart. */
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.legend-item {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px;
    font-size: 0.78rem; color: #333;
    background: #fff; border: 1px solid #e2e2e2; border-radius: 999px;
    cursor: pointer;
    transition: opacity 0.12s ease, border-color 0.12s ease;
}
.legend-item:hover { border-color: #bbb; }
.legend-swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
/* Hidden series: faded, with the swatch drained of colour so the state reads
   even where the colour itself is hard to distinguish. */
.legend-item.off { opacity: 0.45; text-decoration: line-through; }
.legend-item.off .legend-swatch { background: #bbb !important; }

/* Week-on-week change under a dashboard figure. */
.stat-delta {
    font-size: 0.72rem;
    line-height: 1.2;
    color: #999;
    margin-top: 2px;
    min-height: 1em;   /* reserve space so cards stay level while loading */
}

/* Session sentiment: five faces, tap one (tap again to clear). */
.wo-sentiment { display: flex; gap: 8px; }
.sentiment-btn {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 2px;
    background: #fff; border: 1px solid #e2e2e2; border-radius: 8px;
    cursor: pointer; opacity: 0.55;
    transition: opacity 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.sentiment-btn:hover { opacity: 0.85; }
.sentiment-btn.on {
    opacity: 1;
    border-color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 8%, white);
}
.sentiment-face { font-size: 1.5rem; line-height: 1.1; }
.sentiment-lbl { font-size: 0.68rem; color: #777; }
.sentiment-btn.on .sentiment-lbl { color: var(--c-primary); font-weight: 600; }

/* Admin MET editor: compact grid of numeric inputs. */
.mets-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    margin-bottom: 12px;
}
.met-item label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 3px; }
.met-item input { max-width: 90px; }
.met-item small { display: block; margin-top: 3px; font-size: 0.72rem; line-height: 1.3; }

/* Settings pills */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.settings-pill {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}
.settings-pill:hover { border-color: var(--c-link); color: var(--c-link); }
.settings-pill .pill-ic { font-size: 22px; }

/* ---- Full-screen map overlay (UI.mapFullscreen) ---- */
#map-fs-overlay {
    position: fixed; inset: 0; z-index: 6000; background: #fff;
    display: flex; flex-direction: column; gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 14px calc(10px + env(safe-area-inset-bottom));
}
.map-fs-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex: none; }
.map-fs-title { font-weight: 700; font-size: 1.15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-fs-sub { font-size: 12px; color: #8a7f78; }
.map-fs-metrics { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.map-fs-chip {
    background: color-mix(in srgb, var(--c-navbar, #b7410e) 7%, white);
    border-radius: 10px; padding: 7px 14px; text-align: center;
}
.map-fs-chip .v { font-weight: 700; font-size: 1.1em; color: var(--c-link, #b7410e); }
.map-fs-chip .l { font-size: 10.5px; color: #8a7f78; text-transform: uppercase; letter-spacing: .04em; }
#map-fs-map { flex: 1; min-height: 0; border-radius: 10px; }
#map-fs-elev { height: 150px; flex: none; }
#map-fs-elev:empty { display: none; }
body.map-fs-open { overflow: hidden; }

/* Expand button dropped onto any Leaflet map */
.map-expand-btn {
    position: absolute; top: 10px; right: 10px; z-index: 1001;
    border: 2px solid rgba(0,0,0,0.2); background: #fff; border-radius: 6px;
    padding: 6px 9px; cursor: pointer; font-size: 15px; line-height: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.map-expand-btn:hover { background: #f4f4f4; }

/* Expand button as a Leaflet control: static in the control stack (Leaflet
   spaces topright controls vertically, so it sits under the layer switcher
   rather than over it). */
.map-expand-ctl { position: static; top: auto; right: auto; }