/* Beers & Lunch - app.css */
/* Palette: near-neutral with slate undertone, subtle amber accent */

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

:root {
    --bg:         #1a1c1e;
    --surface:    #23262a;
    --surface-2:  #2c3036;
    --border:     #363b42;
    --text:       #d8dde3;
    --text-dim:   #7a8390;
    --text-faint: #4a5260;
    --accent:     #c8a96e;
    --accent-dim: #8a7248;

    /* Overdue levels - restrained, not garish */
    --warn-bg:    #272318;
    --warn-line:  #6b5a2a;
    --flag-bg:    #291e18;
    --flag-line:  #7a4020;
    --urgent-bg:  #2a1818;
    --urgent-line:#8a2828;
    --never-bg:   #1e2228;
    --never-line: #3a4a60;

    --radius:     6px;
    --font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono:       'SF Mono', 'Fira Code', monospace;
    --bottom-nav-h: 56px;

    --accent-contrast: #1a1410;
    --accent-tint:      #231f14;

    --danger:        #e88080;
    --danger-border:  #5a2828;
    --danger-bg:      #7a2828;
    --danger-bg-hover:#8a3030;
    --danger-contrast:#f0c0c0;

    --edit-hover-bg: #c5d8bf;
    --edit-hover-border: #78966f;
    --edit-hover-text: #294126;
    --default-hover-bg: #e5d69f;
    --default-hover-border: #a38a3e;
    --default-hover-text: #514217;
    --delete-hover-border: #602020;

    --success-bg:   #182218;
    --success-line: #2a4a2a;
    --success-text: #90c890;
}

/* -- Light theme overrides -- */
[data-theme="light"] {
    --bg:         #f7f6f3;
    --surface:    #ffffff;
    --surface-2:  #ececea;
    --border:     #ddd9d2;
    --text:       #2a2a28;
    --text-dim:   #6b6862;
    --text-faint: #9c988f;
    --accent:     #9c7a3c;
    --accent-dim: #c8a96e;

    --warn-bg:    #fbf3df;
    --warn-line:  #c9a23a;
    --flag-bg:    #fbe9df;
    --flag-line:  #c46a30;
    --urgent-bg:  #fbe2e2;
    --urgent-line:#c83a3a;
    --never-bg:   #e9eef6;
    --never-line: #5878a8;

    --accent-contrast: #fdf8ee;
    --accent-tint:      #f3e9d3;

    --danger:        #b03030;
    --danger-border:  #e0b0b0;
    --danger-bg:      #c84040;
    --danger-bg-hover:#b03030;
    --danger-contrast:#ffffff;

    --edit-hover-bg: #e3eedc;
    --edit-hover-border: #91ad82;
    --edit-hover-text: #36512f;
    --default-hover-bg: #faf0c7;
    --default-hover-border: #c2a34d;
    --default-hover-text: #70591d;
    --delete-hover-border: #a83232;

    --success-bg:   #e3f3e3;
    --success-line: #8ac08a;
    --success-text: #2a7a2a;
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    padding-bottom: calc(var(--bottom-nav-h) + 8px);
}

a { color: inherit; text-decoration: none; }

/* -- Header -- */
.app-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 12px;
    height: 60px;
    max-width: 680px; margin: 0 auto;
    gap: 8px;
}
.app-name {
    font-size: 1rem;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent);
    text-transform: uppercase;
    flex-shrink: 0;
    text-decoration: none;
}
.header-nav { flex-shrink: 0; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.nav-link { font-size: 0.8rem; color: var(--text-dim); }
.nav-link.active { color: var(--accent); font-weight: 600; }
.header-center-nav { display: none; }
.back-link { font-size: 0.85rem; color: var(--text-dim); }
/* Scale controls smoothly; keep the header edges fixed on narrow screens. */
.header-nav { gap: clamp(4px, calc(2vw - 4.4px), 6px); }
.header-nav .btn {
    padding: clamp(5px, calc(1vw + 0.8px), 6px) clamp(7px, calc(3vw - 5.6px), 10px);
    font-size: clamp(0.72rem, calc(0.468rem + 0.96vw), 0.78rem);
}

/* -- Main -- */
.main {
    max-width: 680px; margin: 0 auto;
    padding: 16px 16px 0;
}

/* -- Buttons -- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 7px 14px;
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background-color .15s, border-color .15s, color .15s;
    white-space: nowrap;
}

.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-ghost {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.btn-full { width: 100%; }
.btn-sm { padding: 5px 10px; font-size: 0.78rem; }

/* -- Theme toggle -- */
.theme-toggle {
    padding: 6px 9px;
    line-height: 1;
}
.theme-icon { display: none; font-size: 0.9rem; }
.theme-icon-dark  { display: inline; }
.theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark  { display: none; }
[data-theme="light"] .theme-icon-light { display: inline; }

.login-theme-toggle-wrap {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10;
}

/* -- Theme transition -- */
body, .app-header, .btn, .place-row, .outing-row, .form-section,
.stat, .delete-confirm-card, .type-row, .alert, .toolbar, .filter-panel {
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* -- Stats row -- */
.stats-row {
    display: flex; gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
}
.stat {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 8px;
    background: var(--surface);
    gap: 2px;
}
.stat-num {
    font-size: 1.4rem; font-weight: 700;
    color: var(--text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 0.7rem; color: var(--text-dim); text-align: center; }

/* -- Toolbar -- */
.sticky-controls {
    position: sticky;
    top: 60px;
    z-index: 90;
    background: var(--bg);
    padding-bottom: 4px;
}
.toolbar {
    padding: 10px 0 4px;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.filter-group, .sort-group {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.sort-label { font-size: 0.75rem; color: var(--text-faint); }
.filter-pill, .sort-pill {
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    color: var(--text-dim);
    background: transparent;
    transition: background-color .15s, border-color .15s, color .15s;
}
.filter-pill.active, .sort-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    font-weight: 600;
}

/* -- Places list -- */
.places-list { display: flex; flex-direction: column; gap: 1px; }

.place-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    background: var(--surface);
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    gap: 12px;
    transition: background 0.15s;
}
.place-row:active { background: var(--surface-2); }

.place-row.level-warn  { background: var(--warn-bg);   border-left-color: var(--warn-line); }
.place-row.level-flag  { background: var(--flag-bg);   border-left-color: var(--flag-line); }
.place-row.level-urgent{ background: var(--urgent-bg); border-left-color: var(--urgent-line);}
.place-row.level-never { background: var(--never-bg);  border-left-color: var(--never-line); }

.place-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.place-name { font-size: 0.95rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-meta { font-size: 0.72rem; color: var(--text-dim); }

.place-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.place-since { font-size: 0.75rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.place-since.never { color: var(--never-line); }
.place-visits { font-size: 0.68rem; color: var(--text-faint); }

/* -- Legend -- */
.legend {
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding: 10px 0;
    border-top: 1px solid var(--border);
}
.legend-item {
    font-size: 0.7rem; color: var(--text-dim);
    padding: 3px 8px; border-radius: 3px;
}
.legend-item.level-warn   { background: var(--warn-bg);   border-left: 2px solid var(--warn-line); }
.legend-item.level-flag   { background: var(--flag-bg);   border-left: 2px solid var(--flag-line); }
.legend-item.level-urgent { background: var(--urgent-bg); border-left: 2px solid var(--urgent-line); }
.legend-item.level-never  { background: var(--never-bg);  border-left: 2px solid var(--never-line); }

/* -- Outings list -- */
.page-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.count-badge {
    font-size: 0.72rem; color: var(--text-dim);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 100px; padding: 1px 7px;
}
.outings-list { display: flex; flex-direction: column; gap: 1px; }
.outing-row {
    display: flex; gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border-radius: var(--radius);
    transition: background 0.15s;
}
.outing-row:active { background: var(--surface-2); }
.outing-left { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; min-width: 90px; }
.outing-date { font-size: 0.82rem; color: var(--text); font-weight: 500; }
.outing-vibe { font-size: 0.68rem; color: var(--text-dim); }
.outing-right { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.outing-places { font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outing-notes { font-size: 0.72rem; color: var(--text-faint); }

/* -- Forms -- */
.form-section { margin-bottom: 24px; }
.section-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 0.78rem; color: var(--text-dim); }
.field input[type="text"],
.field input[type="url"],
.field input[type="date"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
    padding: 9px 12px;
    width: 100%;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--accent-dim);
}
.field textarea { resize: vertical; }
.field-inline { flex-direction: row; align-items: center; gap: 8px; }
.field-inline label { font-size: 0.88rem; color: var(--text); }

/* Place checkboxes */
.place-checkboxes { display: flex; flex-direction: column; gap: 1px; }
.check-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.check-row input[type="checkbox"] { flex-shrink: 0; accent-color: var(--accent); width: 16px; height: 16px; }
.check-row.checked { border-color: var(--accent-dim); background: var(--accent-tint); }
.check-name { font-size: 0.9rem; flex: 1; }
.check-meta { font-size: 0.7rem; color: var(--text-dim); flex-shrink: 0; }

.form-actions { display: flex; gap: 10px; padding-top: 4px; }

/* Visit history */
.visits-list { display: flex; flex-direction: column; gap: 1px; }
.visit-row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
    padding: 10px 14px;
    background: var(--surface);
    border-radius: var(--radius);
}
.visit-date { font-size: 0.85rem; font-weight: 500; }
.visit-vibe { font-size: 0.72rem; color: var(--text-dim); }
.visit-notes { font-size: 0.78rem; color: var(--text-faint); width: 100%; }

/* -- Login page -- */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.login-wrap { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 20px; }
.login-title { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); text-align: center; text-transform: uppercase; }
.login-form { display: flex; flex-direction: column; gap: 14px; }

/* -- Alerts -- */
.alert { padding: 10px 14px; border-radius: var(--radius); font-size: 0.82rem; margin-bottom: 14px; }
.alert-error { background: var(--urgent-bg); border: 1px solid var(--urgent-line); color: var(--danger); }
.alert-success { background: var(--success-bg); border: 1px solid var(--success-line); color: var(--success-text); }
.form-error { font-size: 0.82rem; color: var(--danger); }

/* -- Empty state -- */
.empty-state { padding: 32px 16px; text-align: center; color: var(--text-dim); font-size: 0.88rem; }
.empty-state a { color: var(--accent); }

/* -- Bottom nav -- */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-h);
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-around;
    z-index: 100;
}
.bottom-nav-item {
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; color: var(--text-dim);
    flex: 1; height: 100%;
    letter-spacing: 0.02em;
}
.bottom-nav-item.active { color: var(--accent); font-weight: 600; }
.bottom-nav-item.cta {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.85rem;
}

/* -- Responsive tweaks -- */
@media (min-width: 540px) {
    .outing-row { align-items: flex-start; }
}

/* -- Settings / Outing Types -- */
.types-list { display: flex; flex-direction: column; gap: 1px; margin-bottom: 16px; }
.type-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    border-radius: var(--radius);
}
/* Group tag names and actions without divider lines. */
.modular-tag-list { gap: 6px; }
.modular-tag-list > .type-row {
    background: color-mix(in srgb, var(--surface-2) 45%, var(--surface));
}
.modular-tag-list > .type-row:focus-within { background: var(--surface-2); }
.type-row[draggable="true"] { cursor: grab; }
.type-drag { color: var(--text-faint); font-size: 1.1rem; cursor: grab; flex-shrink: 0; }
.type-name { flex: 1; font-size: 0.9rem; }
.type-count { font-size: 0.72rem; color: var(--text-dim); flex-shrink: 0; }
.type-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-danger { color: var(--danger); border-color: var(--danger-border); }
.btn-disabled { color: var(--text-faint); border-color: var(--border); cursor: not-allowed; opacity: 0.5; }

/* -- Place Picker -- */
.picker-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    min-height: 0;
    margin-bottom: 6px;
}
.picker-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--accent-tint);
    border: 1px solid var(--accent-dim);
    border-radius: 100px;
    padding: 4px 10px 4px 12px;
    font-size: 0.8rem;
    color: var(--accent);
}
.picker-chip button {
    background: none; border: none; cursor: pointer;
    color: var(--accent-dim); font-size: 1rem; line-height: 1;
    padding: 0; display: flex; align-items: center;
}
.picker-chip button:hover { color: var(--accent); }

.picker-input-wrap {
    position: relative;
}
.picker-search {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
    padding: 9px 12px;
    width: 100%;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.picker-search:focus { border-color: var(--accent-dim); }

.picker-dropdown {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 3px;
    max-height: 220px;
    overflow-y: auto;
    position: relative;
    z-index: 50;
}
.picker-option {
    display: flex; flex-direction: column; gap: 1px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.picker-option:last-child { border-bottom: none; }
.picker-option:hover { background: var(--surface); }
.picker-opt-name { font-size: 0.88rem; color: var(--text); }
.picker-opt-meta { font-size: 0.7rem; color: var(--text-dim); }
.picker-more {
    padding: 8px 12px;
    font-size: 0.72rem;
    color: var(--text-faint);
    text-align: center;
    font-style: italic;
}

/* -- Tag checkboxes (place form) -- */
.tag-checkboxes {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.tag-check {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.82rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.tag-check input[type="checkbox"] { display: none; }
.tag-check.checked, .tag-check:has(input:checked) {
    background: var(--accent-tint);
    border-color: var(--accent-dim);
    color: var(--accent);
}

/* -- Detail header with back link + action buttons -- */
.header-inner .back-link {
    font-size: 0.8rem;
    color: var(--text-dim);
    white-space: nowrap;
}

/* -- Delete confirmation page -- */
.delete-confirm-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 4px;
}
.delete-place-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.delete-meta {
    font-size: 0.78rem;
    color: var(--text-dim);
}
.delete-warning {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin-top: 12px;
}
.btn-danger-solid {
    background: var(--danger-bg);
    color: var(--danger-contrast);
    border: none;
}

/* -- Utilities -- */
/* Hides an element visually while leaving it readable by screen readers.
   Used for the search inputs' <label>s, which would otherwise render as
   stray visible text above the field. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -- Search bar (places + outings) -- */
.search-bar {
    position: relative;
    margin-bottom: 10px;
}
.search-bar input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
    padding: 9px 36px 9px 12px;
    width: 100%;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.search-bar input:focus { border-color: var(--accent-dim); }
.search-bar button {
    position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    color: var(--text-dim); font-size: 1.1rem;
    cursor: pointer; padding: 0; line-height: 1;
}
.search-bar button:hover { color: var(--text); }
/* Highlighted hit inside an outing's matched-notes excerpt. Both custom
   properties are redefined by the light theme, so this follows along. */
.outing-notes mark {
    background: var(--accent-tint);
    color: var(--accent);
    border-radius: 2px;
    padding: 0 1px;
}
.search-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.88rem;
    display: none;
}

/* -- Lazy loading + filtering -- */
/* Element-agnostic so .place-row and .outing-row share them, since
   initFilterableList() drives both lists the same way. */
.lazy-hidden { display: none; }
.tag-hidden { display: none; }
.filter-pill { cursor: pointer; }

/* -- Sort pills as buttons -- */
.sort-pill { cursor: pointer; background: transparent; }

/* -- Two-section places layout -- */
.section-heading {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px; flex-wrap: wrap; gap: 8px;
}
.section-label {
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-dim);
    display: flex; align-items: center; gap: 6px;
}
.section-heading .legend {
    border-top: none; padding: 0; margin: 0;
}

/* -- Collapsible filter panel -- */
.toolbar-row {
    width: 100%; min-width: 0; flex: 0 0 auto;
    display: flex; align-items: center; gap: 10px;
    justify-content: space-between;
}
.filter-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.82rem; font-weight: 500; line-height: 18px;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.filter-toggle.active {
    background: var(--accent-tint);
    border-color: var(--accent-dim);
    color: var(--accent);
}
.filter-badge {
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 100px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
}
.filter-panel {
    margin-top: 12px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.filter-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.filter-group-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.filter-clear {
    font-size: 0.75rem;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.filter-clear:hover { text-decoration: underline; }

/* Consistent list, label, and pill typography at every viewport width. */
    /* Places list */
    .place-name   { font-size: 1rem; }
    .place-meta   { font-size: 0.78rem; }
    .place-since  { font-size: 0.8rem; }
    .place-visits { font-size: 0.72rem; }

    /* Outings list */
    .outing-date   { font-size: 0.88rem; }
    .outing-vibe   { font-size: 0.74rem; }
    .outing-places { font-size: 0.86rem; }
    .outing-notes  { font-size: 0.74rem; }

    /* Visit history on place detail */
    .visit-date  { font-size: 0.9rem; }
    .visit-vibe  { font-size: 0.76rem; }
    .visit-notes { font-size: 0.82rem; }

    /* Filter and sort pills */
    .sort-pill   { font-size: 0.8rem; }
    .filter-pill { font-size: 0.8rem; }

    /* Bottom nav */
    .bottom-nav-item { font-size: 0.82rem; }

/* =========================================================
   Desktop mode
   Nav moves into the header; bottom nav is hidden; lists
   switch from a single mobile column to a card grid.
   ========================================================= */
@media (min-width: 900px) {
    body { padding-bottom: 24px; }

    /* -- Header nav takes over from the bottom nav -- */
    .bottom-nav { display: none; }
    .header-nav .btn { margin-left: 4px; }

    /* -- Give the layout room to breathe -- */
    .header-inner,
    .main {
        max-width: 1080px;
    }
    .header-inner { padding: 0 24px; position: relative; }
    .main { padding: 24px 24px 0; }


    /* -- Places / Outings, centered and larger -- */
    .header-center-nav {
        display: flex;
        gap: 32px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .center-nav-link {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-dim);
        padding: 6px 2px;
        border-bottom: 2px solid transparent;
    }
    .center-nav-link:hover { color: var(--text); }
    .center-nav-link.active { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }

    /* -- Card grid for places & outings -- */
    .places-list,
    .outings-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 10px;
    }
    .place-row,
    .outing-row {
        border: 1px solid var(--border);
    }
    .place-row.level-warn,
    .place-row.level-flag,
    .place-row.level-urgent,
    .place-row.level-never {
        border-left-width: 3px;
    }
    .outing-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .outing-left { min-width: 0; flex-direction: row; align-items: baseline; gap: 8px; }
    .outing-right { width: 100%; }

    /* -- Toolbar can go horizontal now that there's space -- */
    .toolbar { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }

    /* -- Forms don't need to stretch full width on wide screens -- */
    .login-page .login-wrap { max-width: 340px; }
    .form { max-width: 520px; }
    .place-row:hover,
    .outing-row:hover { background: var(--surface-2); cursor: pointer; }
}

/* Place and outing detail/editor pages match the list-page content width. */
.detail-main .form { max-width: none; }

/* -- Google Places autofill (place.php) ---------------------------------- */
.places-autocomplete-wrap { position: relative; }

.places-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    max-height: 260px;
    overflow-y: auto;
}

.places-suggestion {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.places-suggestion:hover,
.places-suggestion.active {
    background: var(--surface-2, var(--border));
}

.places-suggestion-main { font-size: 0.85rem; color: var(--text); }
.places-suggestion-secondary { font-size: 0.72rem; color: var(--text-dim); }

.places-autofill-status {
    font-size: 0.72rem;
    color: var(--text-dim);
}
.places-autofill-status.is-error { color: #d97066; }

[hidden] { display: none !important; }

/* Right-aligned sort dropdown at every viewport width. */
.sort-control { position: relative; margin-left: auto; flex-shrink: 0; }
.sort-control > .sort-group { flex-wrap: nowrap; }
.sort-toggle { display: inline-flex; white-space: nowrap; }
.sort-control > .sort-group {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    z-index: 30; width: 180px; padding: 6px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(0,0,0,.2); flex-direction: column; align-items: stretch;
}
.sort-control.is-open > .sort-group { display: flex; }
.sort-control .sort-label { display: none; }
.sort-control .sort-pill { transition: none; border: 0; min-height: 44px; text-align: left; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
.sort-control .sort-pill:not(.active):hover { background: var(--surface-2); }
.sort-control .sort-pill.active::after { content: '\2713'; }
.sort-toggle:focus-visible, .sort-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* iOS may zoom focused controls with text below 16px. Include touch devices
   at any width so this also applies to large phones in landscape. */
@media (max-width: 899px), (any-pointer: coarse) {
    input:not(:where([type="hidden"], [type="checkbox"], [type="radio"],
                    [type="button"], [type="submit"], [type="reset"],
                    [type="range"], [type="color"], [type="file"])),
    .field input[type="text"],
    .field input[type="url"],
    .field input[type="date"],
    .field input[type="password"],
    .field input[type="number"],
    .search-bar input,
    .picker-search,
    select,
    textarea,
    .field select,
    .field textarea {
        font-size: max(16px, 1rem);
    }
}

/* Type and Cuisine multi-select dropdowns. */
.filter-controls { display: flex; gap: 6px; flex-shrink: 0; }
.filter-dropdown { position: relative; }
.filter-dropdown summary { list-style: none; user-select: none; white-space: nowrap; padding-inline: 10px; }
.filter-dropdown summary::-webkit-details-marker { display: none; }
.filter-dropdown summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.filter-count { color: var(--accent); font-size: .72rem; }
.filter-menu {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 31;
    width: min(270px, calc(100vw - 32px)); padding: 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.filter-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .85rem; }
.filter-menu-heading .filter-clear:disabled { opacity: .4; cursor: default; }
.filter-menu-hint { font-size: .72rem; color: var(--text-dim); margin: 8px 0; }
.filter-options { max-height: min(320px, 50dvh); overflow-y: auto; }
.filter-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px; cursor: pointer; font-size: .85rem; }
.filter-option:hover { background: var(--surface-2); }
.filter-option input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }
@media (max-width: 500px) {
    .filter-controls { position: relative; }
    .filter-controls .filter-dropdown { position: static; }
    .toolbar-row { gap: 6px; }
    .sort-toggle { padding-inline: 10px; }
}

.defaults-help { font-size: .8rem; color: var(--text-dim); margin-bottom: 12px; }

.general-filter { position: relative; align-self: flex-start; }

.set-default { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.set-default[aria-pressed="true"] { background: var(--accent); color: var(--accent-contrast); }

.type-actions { flex-wrap: wrap; }
@media (max-width: 500px) {
    .type-row { flex-wrap: wrap; }
    .type-actions { width: 100%; justify-content: flex-end; }
}

.settings-sort { margin-left: 0; align-self: flex-start; }
.settings-sort > .sort-group { left: 0; right: auto; }

/* Keep Reset beside Sort, wrapping the pair together on narrow screens. */
.toolbar-row { flex-wrap: wrap; }
.sort-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.reset-filters:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Personal place ratings: native radios support keyboard and touch selection. */
.place-rating { border: 0; padding: 0; margin: 0; min-width: 0; }
.place-rating legend { font-size: .82rem; margin-bottom: 6px; }
.rating-stars { display: flex; width: fit-content; }
.rating-star { position: relative; display: inline-flex; width: 26px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.rating-star input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rating-star svg { width: 16px; height: 16px; fill: #d9dce6; pointer-events: none; }
.rating-star.is-lit svg { fill: #ffb400; }
.rating-star:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#clear-rating { align-self: flex-start; }

/* Success messages float below the fixed-height header without shifting content. */
.success-overlay {
    position: fixed; top: 73px; left: 50%; transform: translateX(-50%);
    width: calc(100% - 32px); max-width: 648px; z-index: 110;
    margin: 0; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
.success-overlay span { min-width: 0; overflow-wrap: anywhere; }
.success-dismiss {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px;
    background: transparent; color: inherit; font: inherit; font-size: 22px; cursor: pointer;
}
.success-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (min-width: 900px) {
    .success-overlay { width: calc(100% - 48px); max-width: 1032px; }
}

.place-tag-controls { display: flex; gap: 8px; position: relative; }
.place-tag-controls .place-tag-dropdown { position: static; }
.place-tag-controls .filter-menu { left: 0; max-width: 100%; }

.outing-type-dropdown { align-self: flex-start; max-width: 100%; }
.outing-type-dropdown summary { white-space: normal; }
.outing-type-dropdown .filter-menu { max-height: 320px; overflow-y: auto; }
.outing-type-option { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px; border: 0; border-radius: 4px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.outing-type-option:hover { background: var(--surface-2); }
.outing-type-option[aria-pressed="true"] { background: var(--accent); color: var(--accent-contrast); }
.outing-type-option[aria-pressed="true"]::after { content: '✓'; }
.outing-type-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#outing-type-error { color: var(--danger); font-size: .82rem; }

#delete-usage-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 24px; margin: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
#delete-usage-dialog::backdrop { background: rgba(0,0,0,.45); }
#delete-usage-title { font-size: 1.1rem; margin-bottom: 12px; }
#delete-usage-list { max-height: 40dvh; overflow-y: auto; padding-left: 24px; margin: 12px 0; overflow-wrap: anywhere; }
dialog .form-actions { justify-content: flex-end; }

/* Multi-activity collection */
.filter-controls { flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
.activity-control { max-width: 100%; }
#activity-filter {
    width: auto; max-width: 100%; height: 32px;
    font-family: var(--font); font-size: .82rem; font-weight: 500; line-height: 18px;
    padding: 6px 30px 6px 10px;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%237a8390' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
    cursor: pointer;
}
.activity-tabs, .activity-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
.activity-tabs { margin: 12px 0; }
.modular-help { color: var(--text-dim); font-size: .85rem; margin: 10px 0; }
.modular-add { margin-top: 18px; }
.modular-add > summary { cursor: pointer; color: var(--accent); margin-bottom: 12px; }
.modular-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.modular-group { border: 1px solid var(--border); border-radius: var(--radius); margin: 14px 0; }
.modular-group > summary { padding: 12px; cursor: pointer; font-weight: 500; }
.modular-group-body { padding: 0 12px 12px; }
.modular-group-actions { justify-content: flex-end; margin-bottom: 8px; }
.modular-inline-form { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.modular-inline-form input { min-width: 0; flex: 1; }
.modular-inline-form button { flex-shrink: 0; }
.modular-reorder { margin: 10px 0; }
.modular-dialog { width: min(520px,calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.modular-dialog::backdrop { background: rgba(0,0,0,.45); }
#taxonomy-delete-usage { max-height: 40dvh; overflow: auto; padding-left: 22px; margin-top: 12px; }
#taxonomy-delete-usage:has(> li) { margin-bottom: 12px; }
.place-activities { border: 0; padding: 0; margin: 0; }
.place-activities legend { font-size: .82rem; margin-bottom: 6px; }
.modular-place-groups { flex-wrap: wrap; }
.modular-group-caption { display: block; color: var(--text-faint); font-size: .7rem; margin-bottom: 4px; }
.place-activity-group { position: relative; max-width: 100%; }
.modular-place-groups .filter-menu { max-width: none; }
.modular-place-groups .place-tag-dropdown { position: static; }
@media(max-width:500px) {
 .place-activity-group { position: static; }
 .modular-place-groups .filter-menu { max-width: 100%; }
 .modular-heading .type-actions { flex-wrap: wrap; }
}

.modular-inline-form input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font: inherit; }
.modular-group > summary .type-count { margin-left: 8px; }

.activity-control { min-width: 0; }
.filter-controls .filter-dropdown { max-width: 100%; }
.filter-controls summary, .place-activity-group summary { white-space: normal; overflow-wrap: anywhere; }



#activity-add { width: min(440px, calc(100% - 32px)); }
#activity-add .form-actions { flex-wrap: wrap; }

/* Collapse header actions when their full row no longer fits. */
.header-inner { position: relative; }
.header-menu-toggle { flex-shrink: 0; width: 44px; height: 40px; padding: 8px; margin-left: auto; }
.header-menu-toggle[hidden] { display: none; }
.actions-collapsed .app-name { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
.actions-collapsed .header-nav { display: none; }
.actions-collapsed.menu-open .header-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    position: absolute; right: 12px; top: calc(100% + 6px);
    width: 190px; max-width: calc(100vw - 24px); padding: 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.actions-collapsed.menu-open .header-nav .btn { margin: 0; min-height: 44px; font-size: .82rem; }
.header-inner .header-nav.measure-actions {
    display: flex; flex-direction: row; position: absolute; visibility: hidden;
    width: max-content; max-width: none; padding: 0; border: 0; gap: 6px;
}
.header-inner .header-nav.measure-actions .btn { min-height: 0; font-size: .78rem; padding: 6px 10px; }

.header-inner:not(.actions-collapsed) .header-nav { gap: 6px; }
.header-inner:not(.actions-collapsed) .header-nav .btn { padding: 6px 10px; font-size: .78rem; }
@media (min-width: 900px) {
    .header-inner .header-nav.measure-actions .btn { margin-left: 4px; }
}

/* Keep group actions beside the accordion title without nesting buttons in summary. */
.modular-group-shell { position: relative; margin: 14px 0; background: var(--surface); border-radius: var(--radius); }
.modular-group-shell .modular-group { margin: 0; }
.modular-group-shell .modular-group-actions {
    position: absolute; top: 25px; right: 12px; z-index: 1; transform: translateY(-50%);
    width: auto; margin: 0; flex-wrap: nowrap;
}
.modular-group-shell .modular-group > summary {
    padding-right: var(--group-action-space, 230px); white-space: nowrap; min-height: 50px; line-height: 26px; padding-block: 12px; overflow-wrap: anywhere;
}

/* Settings row actions switch to icons before the labels need another row. */
.row-action-icon { display: none; flex-shrink: 0; }
.type-row:has(.row-action-icon) { flex-wrap: nowrap; }
.type-row:has(.row-action-icon) > .type-name { min-width: 0; overflow-wrap: anywhere; }
.type-row:has(.row-action-icon) > .type-actions { width: auto; margin-left: auto; flex-wrap: nowrap; }
.compact-actions .row-action-label { display: none; }
.compact-actions .row-action-icon { display: block; width: 13.5px; height: 13.5px; }
.type-row .type-actions .btn:has(.row-action-icon),
.activity-heading .type-actions .btn:has(.row-action-icon) { height: var(--action-button-height, auto); }
.compact-actions .type-actions .btn { width: var(--action-icon-width, 27px); min-height: 0; padding: 0; }

.measure-row-actions { position: fixed; visibility: hidden; width: max-content !important; flex-wrap: nowrap; pointer-events: none; }
.measure-row-actions .row-action-icon { display: none; }
.measure-row-actions .row-action-label { display: inline; }

.settings-page .filter-pill, .settings-page .sort-pill { font-size: .75rem; padding: 4px 10px; flex-shrink: 0; }

.activity-heading { flex-wrap: nowrap; }
.activity-heading > .section-title { margin-bottom: 0; min-width: 0; white-space: nowrap; overflow-wrap: normal; flex-shrink: 0; }
.activity-heading > .type-actions { width: auto; margin-left: auto; flex-wrap: nowrap; }

#types-list > .type-row > .type-name { white-space: nowrap; overflow-wrap: normal; flex-shrink: 0; }
#types-list > .hide-outing-count > .type-count { display: none; }

.modular-group-actions .btn:has(.row-action-icon) { height: var(--action-button-height, auto); }

.compact-group-actions > .modular-group-actions .row-action-label { display: none; }
.compact-group-actions > .modular-group-actions .row-action-icon { display: block; width: 13.5px; height: 13.5px; }
.compact-group-actions > .modular-group-actions .btn { width: var(--action-icon-width, 27px); min-height: 0; padding: 0; }


/* Keep outing details aligned regardless of how many types an outing has. */
.outing-vibe { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 899px) {
    .outing-left { flex: 0 0 110px; width: 110px; min-width: 0; }
    .outing-right { flex: 1; }
    .outing-date { white-space: nowrap; }
}
@media (min-width: 900px) {
    .outing-left { width: 100%; }
    .outing-left .outing-date { flex-shrink: 0; }
    .outing-left .outing-vibe { min-width: 0; }
}

#activity-filter.active,
#place-activity-dropdown > summary.active { background-color: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 600; }
#activity-filter option { background: var(--surface); color: var(--text); font-weight: 400; }
.activity-tabs .filter-pill { font-size: .75rem; padding: 4px 10px; line-height: 1.5; }

/* Match the activity chevron to the selector text in either theme. */
.activity-control { position: relative; color: var(--text-dim); }
.activity-control:has(#activity-filter.active) { color: var(--accent-contrast); }
.activity-control::after {
    content: ''; position: absolute; right: 12px; top: 50%;
    width: 6px; height: 6px; border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
#activity-filter { background-image: none; }

/* Mobile Places controls: activity/sort, then filters/reset. */

    .places-toolbar.toolbar-stacked { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
    .places-toolbar.toolbar-stacked .activity-control { grid-column: 1; grid-row: 1; justify-self: start; max-width: 100%; }
    .places-toolbar.toolbar-stacked #activity-filter { max-width: 100%; text-overflow: ellipsis; }
    .places-toolbar.toolbar-stacked .sort-actions { display: contents; }
    .places-toolbar.toolbar-stacked #sort-control { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; }
    .places-toolbar.toolbar-stacked #filter-controls { grid-column: 1 / -1; grid-row: 2; min-width: 0; gap: 8px; }
    .places-toolbar.toolbar-stacked:has(#reset-filters:not([hidden])) #filter-controls { margin-right: 86px; }
    .places-toolbar.toolbar-stacked #reset-filters { grid-column: 2; grid-row: 2; justify-self: end; }
    .places-toolbar.toolbar-stacked #filter-controls:not(:has(.filter-dropdown:not([hidden]))) { display: none; }
    .places-toolbar.toolbar-stacked #sort-toggle { gap: 4px; }
@media (max-width: 500px) {
    .places-toolbar .sort-prefix { display: none; }
}

.places-toolbar:not(.toolbar-stacked) { flex-wrap: nowrap; }
.places-toolbar:not(.toolbar-stacked) #filter-controls { flex-wrap: nowrap; }
.places-toolbar.toolbar-measure { position: fixed; visibility: hidden; width: max-content; max-width: none; pointer-events: none; }
.places-toolbar.toolbar-measure .activity-control,
.places-toolbar.toolbar-measure #activity-filter { max-width: none; }

.places-toolbar .reset-dropdown { position: relative; }
.reset-dropdown .filter-menu { left: auto; right: 0; width: 140px; }
.reset-option { display: block; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--text); font: inherit; font-size: .82rem; text-align: left; cursor: pointer; }
.reset-option:hover:not(:disabled) { background: var(--surface-2); }
.reset-option:disabled { opacity: .45; cursor: default; }

/* Dropdowns fit their contents instead of reserving a fixed-width panel. */
.filter-dropdown .filter-menu,
.modular-place-groups .filter-menu,
.sort-control > .sort-group {
    width: max-content; max-width: calc(100vw - 32px);
    transform: translateX(var(--menu-shift, 0px));
}
.filter-menu .filter-menu-hint { width: 0; min-width: 100%; }
.filter-menu .filter-option { padding-inline: 6px; }
.filter-menu .filter-option span { min-width: 0; overflow-wrap: anywhere; }
.sort-control .sort-pill { gap: 16px; }
.sort-control .sort-pill::after { content: ''; width: 12px; flex-shrink: 0; }
.sort-control .sort-pill.active::after { content: '\2713'; }
.field select { width: fit-content; max-width: 100%; }

/* Header button height stays independent of the gear icon dimensions. */
.header-inner:not(.actions-collapsed) .header-nav .btn,
.header-inner .header-nav.measure-actions .btn {
    height: calc(1.17rem + 12px);
}

/* Shared warm hover palette; selected states remain unchanged off hover. */
:root {
    --pill-hover-bg: #3a3224;
    --pill-hover-text: #f3e7cf;
}
[data-theme="light"] {
    --pill-hover-bg: #f3e9d3;
    --pill-hover-text: #674a24;
}


/* Outing cards share the toolbar's warm hover palette. */
#outings-list .outing-row {
    border: 1px solid var(--border);
    transition: background-color .15s, border-color .15s, color .15s;
}
@media (hover: hover) {
    #outings-list .outing-row:hover {
        background-color: var(--pill-hover-bg);
        border-color: var(--accent);
        color: var(--pill-hover-text);
    }
    #outings-list .outing-row:hover :is(.outing-date, .outing-vibe, .outing-places, .outing-notes) {
        color: var(--pill-hover-text);
    }
}

/* Match outing form actions to the Places toolbar hover treatment. */
.outing-detail-page :is(.btn:not(.btn-primary), .filter-toggle, select) {
    transition: background-color .15s, border-color .15s, color .15s;
}


/* Place tag dropdown borders match the outing Type dropdown on hover. */


/* Include the heading and match hint when sizing Places filter menus. */
.places-toolbar .filter-menu .filter-menu-hint { width: auto; min-width: 0; }

/* Match place activity selection, Cancel, and inactive activity tabs to Settings. */
#place-activity-dropdown > summary,
.place-cancel,
.activity-tabs a.filter-pill:not(.active) {
    transition: background-color .15s, border-color .15s, color .15s;
}


/* Activity selectors and active Settings tabs retain their fill and text on hover. */


/* Consistent destructive actions on place and outing forms. */
:root {
    --delete-record-hover-bg: #e3b8b4;
    --delete-record-hover-border: #ad6963;
    --delete-record-hover-text: #662d29;
}
[data-theme="light"] {
    --delete-record-hover-bg: #f6dfdc;
    --delete-record-hover-border: #cd938b;
    --delete-record-hover-text: #8a3932;
}
.detail-main .delete-record {
    transition: background-color .15s, border-color .15s, color .15s;
}


.setting-field-heading { font-size: .78rem; color: var(--text-dim); }
/* Long Settings names never displace the action buttons. */
.settings-page .type-row > .type-name,
.activity-heading > .section-title { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.settings-page .type-row.wrap-row-name > .type-name,
.activity-heading.wrap-row-name > .section-title { white-space: normal; overflow-wrap: anywhere; }
.type-row.hide-row-count > .type-count,
.modular-group-shell.hide-row-count > .modular-group > summary > .type-count { display: none; }
.modular-group-shell.wrap-row-name > .modular-group > summary { white-space: normal; overflow-wrap: anywhere; }
.modular-group-shell > .modular-group > summary > .type-count { white-space: nowrap; }

#types-list > .type-row > .type-name { flex: 1 1 0; min-width: 0; }
#types-list > .type-row.wrap-row-name > .type-name { white-space: normal; overflow-wrap: anywhere; }

/* Native Settings selects use the same pill shape and chevron as Activity. */
.settings-pill-select { width: fit-content; }
.field .settings-pill-select > select {
    width: auto; max-width: 100%; min-height: 32px;
    border-radius: 100px; padding: 6px 30px 6px 10px;
    font-size: .82rem; font-weight: 500; line-height: 18px;
    color: var(--text-dim); cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
@media (max-width: 600px) {
    .field .settings-pill-select > select { font-size: 16px; }
}


/* Match the header theme button to the Settings cog's 18px icon footprint. */
.header-nav .theme-icon { width: 18px; height: 18px; line-height: 18px; }
.header-nav .theme-icon-dark { display: inline-block; }
[data-theme="light"] .header-nav .theme-icon-dark { display: none; }
[data-theme="light"] .header-nav .theme-icon-light { display: inline-block; }

/* A separate hours button keeps card navigation and keyboard actions independent. */
.place-row { position: relative; }
.place-card-link::after { content: ''; position: absolute; inset: 0; }
.place-card-link:focus-visible { outline: 2px solid var(--accent); }
.weekly-hours-trigger {
    position: relative; z-index: 1; background: none; border: 0; padding: 0;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.weekly-hours-trigger::after { content: '⌄'; margin-left: 4px; font-size: .85em; }
.weekly-hours-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.weekly-hours-panel {
    position: fixed; z-index: 1000; width: max-content; max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box;
    padding: 12px; background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 4px 18px rgba(0,0,0,.2); font-size: .82rem;
}
.weekly-hours-panel h3 { font-size: .9rem; margin: 0 0 8px; }
.weekly-hours-day { display: grid; grid-template-columns: 6em minmax(0,1fr); gap: 12px; padding: 4px 6px; }
.weekly-hours-day span { overflow-wrap: anywhere; }
.weekly-hours-day.is-today { background: var(--accent-tint); color: var(--accent); border-radius: 4px; font-weight: 600; }

.place-hours-controls { display: flex; align-items: center; gap: 8px; }
.hours-refresh {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.275rem; height: 1.275rem; padding: 0; border-radius: 50%;
    background: #e3edda; border: 1px solid #9eaf89; color: #435c34; cursor: pointer;
}
.hours-refresh svg { width: 12px; height: 12px; }
.hours-refresh:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hours-refresh:disabled { opacity: .6; cursor: wait; }
.hours-refresh-status { font-size: .75rem; color: var(--text-dim); }
.hours-refresh-status:empty { display: none; }

.business-hours-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#hours-batch-progress { width: min(100%, 320px); accent-color: var(--accent); }
#hours-batch-status { font-size: .82rem; color: var(--text-dim); }
.business-hours-actions .btn:disabled { opacity: .55; cursor: wait; }

/* Subtle entrance shared by all modal dialogs and their dimmed backdrops. */
@keyframes modal-enter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes modal-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
    dialog[open] { animation: modal-enter 150ms ease-out; }
    dialog[open]::backdrop { animation: modal-backdrop-enter 150ms ease-out; }
}

/* Discard feedback shares success-toast placement with a warm yellow palette. */
.discard-toast {
    background: #f3e9c7;
    border: 1px solid #c8a96e;
    color: #674a24;
}

/* Match-mode symbols share the group action buttons’ dimensions. */
.group-match-toggle .row-action-icon { font-weight: 700; line-height: 13.5px; text-align: center; }

/* Reorder only from the handle, leaving accordion and action clicks independent. */
.filter-group-order > .modular-group-shell > .modular-group > summary { padding-left: 44px; }
.group-drag-handle { position: absolute; left: 4px; top: 3px; width: 36px; height: 44px; z-index: 2; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-dim); cursor: grab; touch-action: none; user-select: none; }
.group-drag-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.group-drag-handle:disabled { cursor: wait; opacity: .5; }
.group-dragging { z-index: 3; outline: 2px solid var(--accent); border-radius: 8px; }
.group-dragging .group-drag-handle { cursor: grabbing; }

.filter-group-order { position: relative; }

.activity-tabs { position: relative; }
.activity-tabs [data-order-activity] { transition: background-color .15s, border-color .15s, color .15s; touch-action: none; user-select: none; -webkit-user-select: none; }
.activity-tabs .activity-dragging { position: relative; z-index: 3; cursor: grabbing; box-shadow: 0 3px 10px #0003; }

.place-external-links { flex-wrap: wrap; }
.place-external-links > .btn { flex-shrink: 0; white-space: nowrap; }

/* Shared control palette: neutral actions, gold selection, red destruction. */
:root {
    --control-hover-bg: #3a3224;
    --control-hover-text: #f3e7cf;
    --control-selected-bg: #393020;
    --control-selected-hover: #493b25;
    --control-selected-text: #e2c68d;
    --control-primary-hover: #b99a60;
    --control-active-border: #78613b;
    --control-danger-hover: #422a2a;
    --control-danger-border: #a56660;
    --control-danger-text: #efb4ad;
}
[data-theme="light"] {
    --control-hover-bg: #f3e9d3;
    --control-hover-text: #674a24;
    --control-selected-bg: #f3e9d3;
    --control-selected-hover: #ebdbb5;
    --control-selected-text: #795b28;
    --control-primary-hover: #86652e;
    --control-active-border: #604822;
    --control-danger-hover: #f6dfdc;
    --control-danger-border: #cd938b;
    --control-danger-text: #8a3932;
}
:is(.btn, .filter-pill, .filter-toggle, .settings-pill-select, .hours-refresh) {
    --control-hover-fill: var(--control-hover-bg);
    --control-hover-ink: var(--control-hover-text);
    --control-hover-line: var(--accent);
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn-ghost, .set-default, .filter-pill:not(.active), .activity-add-pill, .hours-refresh {
    background: var(--surface);
    color: var(--text-dim);
    border-color: var(--border);
}
.btn-primary {
    --control-hover-fill: var(--control-primary-hover);
    --control-hover-ink: var(--accent-contrast);
    --control-hover-line: var(--control-primary-hover);
}
.filter-toggle.active, .set-default[aria-pressed="true"] {
    background: var(--control-selected-bg);
    border-color: var(--accent);
    color: var(--control-selected-text);
    --control-hover-fill: var(--control-selected-hover);
    --control-hover-ink: var(--control-selected-text);
}
.set-default[aria-pressed="true"] .row-action-icon { color: var(--accent); fill: currentColor; }
.activity-tabs .filter-pill.active,
.settings-page > .toolbar .filter-pill.active,
#activity-filter, #place-activity-dropdown > summary {
    --control-hover-fill: var(--accent);
    --control-hover-ink: var(--accent-contrast);
    --control-hover-line: var(--control-active-border);
}
.btn-danger, .btn.delete-record, .btn-danger-solid, #taxonomy-delete-ok, #delete-usage-ok {
    --control-hover-fill: var(--control-danger-hover);
    --control-hover-ink: var(--control-danger-text);
    --control-hover-line: var(--control-danger-border);
}
.btn-danger, .btn.delete-record { color: var(--danger); background: var(--surface); border-color: var(--border); }
@media (hover: hover) {
    :is(.btn, .filter-pill, .filter-toggle, .hours-refresh):not(:disabled):not(.btn-disabled):not([aria-disabled="true"]):hover {
        background-color: var(--control-hover-fill);
        color: var(--control-hover-ink);
        border-color: var(--control-hover-line);
    }
    .settings-pill-select:has(select:hover) { color: var(--control-hover-text); }
}
:is(.btn, .filter-pill, .filter-toggle, .hours-refresh, .sort-pill, .reset-option, .outing-type-option):focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px;
}
:is(.btn, .filter-pill, .filter-toggle, .hours-refresh):is(:disabled, .btn-disabled, [aria-disabled="true"]) {
    opacity: .5; cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
    :is(.btn, .filter-pill, .filter-toggle, .hours-refresh, .settings-pill-select) { transition: none; }
}

#taxonomy-delete-ok, #delete-usage-ok { background: var(--danger-bg); color: var(--danger-contrast); }

/* Opaque activity menus replace browser/OS-rendered select popups. */
.solid-activity-control::after { display: none; }
.solid-activity-control > .filter-toggle { padding-right: 14px; }
.solid-activity-control > button.filter-toggle::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-left: 6px; margin-top: -3px; }
#activity-filter-toggle.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); --control-hover-fill: var(--accent); --control-hover-ink: var(--accent-contrast); --control-hover-line: var(--control-active-border); }
.solid-activity-menu { width: max-content; max-width: calc(100vw - 32px); max-height: min(320px, 60vh); overflow: auto; padding: 6px; background: var(--surface); opacity: 1; }
.solid-activity-menu .outing-type-option { font-size: .82rem; white-space: normal; }
.solid-activity-menu [aria-selected="true"] { color: var(--accent); font-weight: 600; }
.solid-activity-menu [aria-selected="true"]::after { content: '✓'; margin-left: 12px; }

/* Read-only record views share the existing forms' spacing and palette. */
.record-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.record-heading h1 { font-size: 1.3rem; line-height: 1.35; overflow-wrap: anywhere; min-width: 0; }
.record-heading .btn { flex-shrink: 0; }
.record-subtitle { color: var(--text-dim); margin-top: 8px; }
.record-details .place-external-links { margin-top: 16px; }
.record-facts { display: grid; gap: 20px; margin-top: 24px; }
.record-facts dt { font-size: .78rem; color: var(--text-dim); font-weight: 600; margin-bottom: 6px; }
.record-facts dd { font-size: .9rem; line-height: 1.6; overflow-wrap: anywhere; }
.record-notes { white-space: pre-wrap; }
.record-rating { color: var(--accent); }
.record-place-list { list-style: none; display: grid; gap: 10px; }
.record-place-list a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.record-place-list span { color: var(--text-dim); }
.record-delete { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }