/* ============================================================
   Find Your Bearing — single-user research app
   Palette: warm professional (Nexus light), Hydra Teal accent
   ============================================================ */

:root {
    /* Surfaces */
    --color-bg: #F7F6F2;
    --color-surface: #F9F8F5;
    --color-surface-alt: #FBFBF9;
    --color-border: #D4D1CA;
    --color-border-soft: #E5E2DB;

    /* Text */
    --color-text: #28251D;
    --color-text-muted: #7A7974;
    --color-text-faint: #BAB9B4;

    /* Brand */
    --color-primary: #01696F;
    --color-primary-hover: #0C4E54;
    --color-primary-soft: #E0EEEE;

    /* Semantic */
    --color-error: #A12C7B;
    --color-warning: #964219;
    --color-warning-soft: #FBE9DC;
    --color-success: #437A22;

    /* Score tiers */
    --color-score-high: #437A22;
    --color-score-mid: #20808D;
    --color-score-low: #D19900;
    --color-score-poor: #A13544;

    /* Layout */
    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(40, 37, 29, 0.04);
    --shadow-md: 0 4px 16px rgba(40, 37, 29, 0.06);

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text);
    margin: 0;
}
h1 { font-size: 36px; letter-spacing: -0.01em; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

p { margin: 0 0 12px 0; }

.muted { color: var(--color-text-muted); }
.small { font-size: 13px; }
.xsmall { font-size: 11px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   App shell
   ============================================================ */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 32px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(6px);
}
.app-header__brand { display: flex; flex-direction: column; gap: 2px; }
.app-header__title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--color-text);
}
.app-header__title:hover { text-decoration: none; }
.app-header__subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}
.app-nav {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}
.app-nav a,
.app-nav .nav-group__trigger {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 14px;
}
.app-nav a:hover,
.app-nav .nav-group__trigger:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
    text-decoration: none;
}
.app-nav a.is-active,
.app-nav .nav-group__trigger.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

/* --- Sprint 16 Day 3: grouped-nav dropdowns ---------------- */
.nav-group {
    position: relative;
    display: inline-flex;
}
.nav-group__trigger {
    background: transparent;
    border: none;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.nav-group__caret {
    font-size: 11px;
    line-height: 1;
    opacity: 0.7;
    transform: translateY(1px);
}
.nav-group__trigger[aria-expanded="true"] .nav-group__caret {
    transform: translateY(1px) rotate(180deg);
}
.nav-group__menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 180px;
    padding: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* The HTML `hidden` attribute normally forces display:none via UA styles,
 * but any explicit `display` on the element wins. Restore it explicitly. */
.nav-group__menu[hidden] { display: none; }
[data-theme="dark"] .nav-group__menu {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.nav-group__menu a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.nav-group__menu a.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

/* --- Account menu (Sign out) ------------------------------- */
/* Pushed to the far right of the nav; its dropdown is right-aligned so it
 * never overflows the viewport edge. Reuses .nav-group behavior/JS. */
.nav-account {
    position: relative;
    display: inline-flex;
    margin-left: 8px;
}
.nav-group__menu--right {
    left: auto;
    right: 0;
}
.nav-account__logout {
    margin: 0;
}
.nav-account__logout-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.nav-account__logout-btn:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

/* --- Sprint 16 Day 3: discovery pages ---------------------- */
.discover-runs-table th.num,
.discover-runs-table td.num { text-align: right; }
.discover-run-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 12px 16px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--color-text-muted);
}
.discover-run-meta strong { color: var(--color-text); }
.discover-candidates { display: flex; flex-direction: column; gap: 12px; }
.discover-candidate {
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.discover-candidate__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.discover-candidate__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}
.discover-candidate__ordinal {
    color: var(--color-text-muted);
    font-weight: 500;
    margin-right: 6px;
}
.discover-candidate__actions { display: flex; gap: 8px; align-items: center; }
.discover-candidate__rationale {
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text);
    margin: 4px 0 8px;
}
.discover-candidate__watchout {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
    padding-left: 12px;
    border-left: 2px solid var(--color-border);
}
.discover-candidate__watchout::before {
    content: 'Watch: ';
    font-weight: 600;
    color: var(--color-warning, #964219);
}
.discover-tier {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.discover-tier--within    { background: rgba(67, 122, 34, 0.15);  color: #437A22; }
.discover-tier--under     { background: rgba(0, 100, 148, 0.15);  color: #006494; }
.discover-tier--stretches { background: rgba(150, 66, 25, 0.15);  color: #964219; }
.discover-tier--none      { background: var(--color-surface-alt); color: var(--color-text-muted); }
[data-theme="dark"] .discover-tier--within    { background: rgba(109, 170, 69, 0.18);  color: #6DAA45; }
[data-theme="dark"] .discover-tier--under     { background: rgba(85, 145, 199, 0.18);  color: #5591C7; }
[data-theme="dark"] .discover-tier--stretches { background: rgba(187, 101, 59, 0.20);  color: #BB653B; }
.discover-candidate--added { border-color: #437A22; background: rgba(67, 122, 34, 0.04); }
.discover-candidate--added .discover-candidate__title::after {
    content: '✓ added';
    margin-left: 10px;
    color: #437A22;
    font-size: 12px;
    font-weight: 500;
}
.discover-prefill-banner {
    padding: 10px 14px;
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 14px;
}
.discover-prefill-banner a { text-decoration: underline; }
.discover-prompt-body {
    max-height: 320px;
    overflow: auto;
    padding: 12px 14px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--color-text);
}

.app-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px;
}

.app-footer {
    max-width: 1400px;
    margin: 48px auto 32px;
    padding: 24px 32px;
    color: var(--color-text-faint);
    font-size: 12px;
    border-top: 1px solid var(--color-border-soft);
}

/* ============================================================
   Page header
   ============================================================ */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.page-header__subtitle {
    color: var(--color-text-muted);
    font-size: 14px;
    margin-top: 4px;
}
.page-header__controls,
.page-header__actions { display: flex; gap: 12px; align-items: center; }
.back-link {
    font-size: 13px;
    color: var(--color-text-muted);
    display: inline-block;
    margin-bottom: 4px;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.card h2 { margin-bottom: 12px; }
.card h3 { margin-bottom: 8px; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* ============================================================
   Tables
   ============================================================ */
.table-wrap {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.data-table th, .data-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-soft);
}
.data-table thead th {
    background: var(--color-surface-alt);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    position: sticky;
    top: 0;
}
.data-table tbody tr:hover { background: var(--color-surface-alt); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .row-warn { background: var(--color-warning-soft); }
.data-table .row-warn:hover { background: #f8e2d0; }

.dashboard-table .overall-cell {
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

/* --- Sortable table headers ---------------------------------- */
.data-table thead th.is-sortable {
    cursor: pointer;
    user-select: none;
    padding-right: 20px;  /* room for the indicator */
    position: relative;
}
.data-table thead th.is-sortable:hover {
    color: var(--color-text);
    background: var(--color-surface);
}
.data-table thead th.is-sortable:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.sort-indicator {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.25;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;  /* placeholder pointing up */
}
.data-table thead th[data-sort-dir="asc"] .sort-indicator {
    opacity: 1;
    border-bottom: 5px solid var(--color-primary);
    border-top: none;
}
.data-table thead th[data-sort-dir="desc"] .sort-indicator {
    opacity: 1;
    border-top: 5px solid var(--color-primary);
    border-bottom: none;
}

.kv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.kv-table td { padding: 7px 0; border-bottom: 1px dashed var(--color-border-soft); }
.kv-table td:first-child {
    color: var(--color-text-muted);
    width: 38%;
    padding-right: 12px;
}
.kv-table tr:last-child td { border-bottom: none; }
.kv-table .kv-total td {
    border-top: 2px solid var(--color-border);
    border-bottom: none;
    padding-top: 10px;
    font-size: 16px;
}

.compare-table th:not(:first-child),
.compare-table td:not(:first-child) {
    min-width: 180px;
}
.compare-table td:first-child {
    color: var(--color-text-muted);
    font-weight: 500;
    width: 160px;
}

/* ============================================================
   Score chip
   ============================================================ */
.score-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: white;
    background: var(--color-text-faint);
}
.score-chip[data-tier="high"] { background: var(--color-score-high); }
.score-chip[data-tier="mid"]  { background: var(--color-score-mid); }
.score-chip[data-tier="low"]  { background: var(--color-score-low); color: #28251D; }
.score-chip[data-tier="poor"] { background: var(--color-score-poor); }
.score-chip--empty {
    background: transparent;
    color: var(--color-text-faint);
    border: 1px dashed var(--color-border);
}

.required-flag {
    display: inline-block;
    color: var(--color-error);
    font-weight: 700;
    margin-left: 4px;
}
.weight-flag {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    color: var(--color-text-faint);
    font-weight: 400;
}

/* ============================================================
   Help tooltip — inline ⓘ affordance (CSS-only; no JS/library).
   Reveals its data-tip text on hover/focus. Always pair with a
   matching title/aria-label so the text is reachable without CSS
   and by assistive tech.
   ============================================================ */
.help-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 4px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-faint);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
    user-select: none;
}
.help-tip:hover,
.help-tip:focus-visible {
    color: var(--color-text);
    border-color: var(--color-text-muted);
    outline: none;
}
.help-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    min-width: 180px;
    max-width: 280px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--color-text);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.help-tip:hover::after,
.help-tip:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* Help page FAQ list. */
.help-faq dt {
    font-weight: 600;
    margin-top: 14px;
}
.help-faq dd {
    margin: 4px 0 0;
    color: var(--color-text-muted);
}

.status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.status-pill--active { background: #DCEEDD; color: var(--color-success); }
.status-pill--archived { background: var(--color-border-soft); color: var(--color-text-muted); }
.status-pill--ruled_out { background: #F4D9E8; color: var(--color-error); }

/* ============================================================
   Forms / filters
   ============================================================ */
.filters {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 13px;
    color: var(--color-text-muted);
}
.filters select {
    margin-left: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font: inherit;
    color: var(--color-text);
}
.filters .checkbox { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ============================================================
   Compare picker
   ============================================================ */
.compare-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.compare-picker__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    transition: all 0.15s;
}
.compare-picker__chip:hover { background: var(--color-surface-alt); }
.compare-picker__chip.is-active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.compare-picker__chip input { margin: 0; }

/* ============================================================
   Listings
   ============================================================ */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 12px;
}
.listing-card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    font-size: 14px;
}
.listing-card__head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.listing-card__meta { margin: 6px 0; }
.listing-card p { margin: 6px 0; }

/* ============================================================
   Pairings
   ============================================================ */
.pairing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
}
.pairing-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.pairing-card__cities {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    text-align: center;
}
.pairing-card__plus {
    font-size: 24px;
    color: var(--color-text-faint);
    font-family: var(--font-display);
}

/* ============================================================
   Misc
   ============================================================ */
.tagline {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--color-text);
    margin: 0 0 24px 0;
    font-style: italic;
}
.tagline--inline { font-size: 16px; margin: 8px 0; }

.ranking-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ranking-list li {
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-border-soft);
    font-size: 14px;
}
.ranking-list li:last-child { border-bottom: none; }

.empty-state {
    color: var(--color-text-muted);
    text-align: center;
    padding: 32px;
    font-style: italic;
}

.legend {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.city-link { color: var(--color-text); }
.city-link:hover { color: var(--color-primary-hover); }

/* ============================================================
   Responsive
   ============================================================ */
/* ============================================================
   Inline edit
   ============================================================ */
.score-chip[data-editable] {
    cursor: pointer;
    outline-offset: 2px;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.score-chip[data-editable]:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(40, 37, 29, 0.15);
}
.score-chip[data-editable]:focus-visible {
    outline: 2px solid var(--color-primary);
}

.weight-cell {
    display: inline-block;
    min-width: 40px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    border: 1px dashed var(--color-border);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: all 0.15s;
}
.weight-cell:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}
.weight-cell:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.inline-edit-input {
    width: 68px;
    padding: 4px 8px;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.inline-edit-input:focus { outline: none; }

.is-saving { opacity: 0.6; }

.just-saved {
    animation: flashSuccess 1.2s ease-out;
}
@keyframes flashSuccess {
    0%   { box-shadow: 0 0 0 0 rgba(67, 122, 34, 0.5); }
    30%  { box-shadow: 0 0 0 6px rgba(67, 122, 34, 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(67, 122, 34, 0); }
}

.edit-hint {
    margin-top: 12px;
    font-style: italic;
}

/* Toggle for required flag */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.toggle:hover { background: var(--color-surface-alt); }
.toggle input[type="checkbox"] { cursor: pointer; }
.toggle span { font-size: 13px; color: var(--color-text-muted); }

/* Status control */
.status-control {
    display: flex;
    align-items: center;
    gap: 10px;
}
.status-control select {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font: inherit;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
}

.rule-out-banner {
    background: #F4D9E8;
    border: 1px solid var(--color-error);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin: 0 0 24px 0;
    color: var(--color-text);
    font-size: 14px;
}
.rule-out-banner strong { color: var(--color-error); }

/* Settings mini-preview */
.settings-table .preview-col { width: 180px; }
.mini-preview {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: rank;
    transition: opacity 0.2s;
}
.mini-preview li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    font-size: 13px;
    counter-increment: rank;
}
.mini-preview li::before {
    content: counter(rank) ".";
    color: var(--color-text-faint);
    font-size: 11px;
    margin-right: 6px;
    min-width: 14px;
}
.mini-preview__name {
    flex: 1;
    color: var(--color-text);
}
.mini-preview__score {
    color: var(--color-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Toast */
#toast-region {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    pointer-events: none;
}
.toast {
    background: var(--color-text);
    color: var(--color-surface);
    padding: 12px 18px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-size: 14px;
    max-width: 360px;
    animation: toastSlideIn 0.2s ease-out;
    pointer-events: auto;
}
.toast--error {
    background: var(--color-error);
    color: white;
}
@keyframes toastSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
    .app-header { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
    .app-nav { width: 100%; overflow-x: auto; }
    .app-main { padding: 16px; }
    h1 { font-size: 28px; }
    .page-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Phase 4 — Research card, refresh button, topic accordion
   ============================================================ */
.research-card {
    padding-top: 1.25rem;
}
.research-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.research-header h2 { margin: 0; }
.research-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.btn-refresh {
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
    background: var(--color-accent, #01696f);
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.btn-refresh:hover:not(:disabled) { background: var(--color-accent-hover, #0c4e54); }
.btn-refresh:disabled {
    background: var(--color-text-faint, #bab9b4);
    cursor: not-allowed;
}
.btn-refresh.is-saving::after {
    content: '';
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-left: 0.4em;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btnSpin 0.8s linear infinite;
    vertical-align: -1px;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

.research-tagline {
    font-style: italic;
    font-size: 1.05rem;
    color: var(--color-text, #28251d);
    margin: 0.25rem 0 0.75rem 0;
}
.research-summary {
    margin: 0 0 1rem 0;
    color: var(--color-text, #28251d);
}

/* --- Topic accordion --- */
.topic-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
}
.topic-item {
    border: 1px solid var(--color-border, #d4d1ca);
    border-radius: 8px;
    background: var(--color-surface, #f9f8f5);
    overflow: hidden;
}
.topic-item > summary {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color 120ms ease;
}
.topic-item > summary::-webkit-details-marker { display: none; }
.topic-item > summary::before {
    content: '▸';
    display: inline-block;
    width: 0.9em;
    color: var(--color-text-muted, #7a7974);
    transition: transform 150ms ease;
    flex-shrink: 0;
}
.topic-item[open] > summary::before { transform: rotate(90deg); }
.topic-item > summary:hover { background: var(--color-surface-alt, #fbfbf9); }
.topic-label {
    font-weight: 600;
    color: var(--color-text, #28251d);
    flex-shrink: 0;
    min-width: 12rem;
}
.topic-headline {
    color: var(--color-text-muted, #7a7974);
    font-size: 0.95rem;
}
.topic-body {
    padding: 0.25rem 1.4rem 1rem 1.4rem;
    color: var(--color-text, #28251d);
    line-height: 1.55;
}
.topic-body p { margin: 0.5rem 0; }
.topic-body p:first-child { margin-top: 0.25rem; }

/* --- Citations --- */
.cite {
    font-size: 0.75em;
    line-height: 1;
    vertical-align: super;
    margin: 0 0.05em;
}
.cite a {
    color: var(--color-accent, #01696f);
    text-decoration: none;
    padding: 0 0.15em;
}
.cite a:hover { text-decoration: underline; }
.cite--missing { color: var(--color-text-faint, #bab9b4); }

.citations-panel {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border, #d4d1ca);
}
.citations-panel > summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text-muted, #7a7974);
    user-select: none;
}
.citations-list {
    margin: 0.75rem 0 0.25rem 0;
    padding-left: 1.5rem;
    font-size: 0.9rem;
}
.citations-list li { margin: 0.25rem 0; word-break: break-word; }
.citations-list a {
    color: var(--color-accent, #01696f);
    text-decoration: none;
}
.citations-list a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .topic-item > summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }
    .topic-label { min-width: 0; }
}

/* ============================================================
   Phase 5 — Notes editor, add-city, archive, pairing suggestions
   ============================================================ */

/* --- Nav "+ Add city" -------------------------------------- */
.app-nav .nav-add-city {
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    font-weight: 600;
}

/* --- Archive button (city profile) ------------------------- */
.btn-archive {
    margin-left: 8px;
    padding: 4px 10px;
    border: 1px solid var(--border, #ddd);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}
.btn-archive:hover:not(:disabled) { background: #f5f5f5; }
.btn-archive:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Dashboard row archive button (hover-appears) ---------- */
.city-cell { position: relative; }
.btn-archive-row {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 8px;
    border: 1px solid var(--border, #ddd);
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s;
}
.dashboard-table tbody tr:hover .btn-archive-row,
.btn-archive-row:focus {
    opacity: 1;
}

/* --- Notes card (markdown editor + preview) ---------------- */
.notes-card .notes-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.notes-editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}
@media (max-width: 640px) {
    .notes-editor { grid-template-columns: 1fr; }
}
.notes-editor__pane label {
    display: block;
    margin-bottom: 4px;
}
.notes-textarea {
    width: 100%;
    min-height: 260px;
    padding: 10px 12px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}
.notes-textarea:focus { outline: 2px solid var(--primary, #01696F); outline-offset: -1px; }
.notes-preview {
    min-height: 260px;
    padding: 10px 12px;
    border: 1px dashed var(--border, #ddd);
    border-radius: 4px;
    background: #fafafa;
    overflow-y: auto;
    max-height: 500px;
}
.notes-preview h3 { margin-top: 0; margin-bottom: 8px; font-size: 1.05rem; }
.notes-preview h4 { margin-top: 12px; margin-bottom: 6px; font-size: 0.95rem; }
.notes-preview p:first-child { margin-top: 0; }
.notes-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.btn-save {
    padding: 6px 14px;
    border: 1px solid var(--primary, #01696F);
    background: var(--primary, #01696F);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
.btn-save:hover:not(:disabled) { background: var(--primary-hover, #0C4E54); }
.btn-save:disabled { opacity: 0.5; cursor: not-allowed; }
.legacy-notes {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border, #eee);
}
.legacy-notes summary { cursor: pointer; }

/* --- Add-city page ---------------------------------------- */
.add-city__form {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 8px;
}
@media (max-width: 640px) {
    .add-city__form { grid-template-columns: 1fr; }
}
.add-city__field label { display: block; margin-bottom: 4px; }
.add-city__field input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border, #ddd);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
}
.btn-primary {
    padding: 8px 16px;
    border: 1px solid var(--primary, #01696F);
    background: var(--primary, #01696F);
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover, #0C4E54); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost {
    padding: 8px 16px;
    border: 1px solid var(--border, #ddd);
    background: #fff;
    color: inherit;
    border-radius: 4px;
    cursor: pointer;
}
.add-city__result-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.research-preview { margin-bottom: 20px; }
.add-city__scores { margin-top: 8px; }
.add-city__scores input[type="number"] { width: 70px; }
.add-city__scores .rationale {
    display: block;
    line-height: 1.4;
}
.add-city__summary {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    margin-top: 12px;
    border-top: 1px solid var(--border, #eee);
}
.add-city__commit {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

/* --- Sprint 17: geocode preview in Add City wizard ------- */
.add-city__geocode {
    padding: 10px 12px;
    margin: 12px 0;
    border: 1px solid var(--border, #eee);
    border-radius: 6px;
    background: var(--surface-alt, #fbfbf9);
}
.add-city__geocode-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.add-city__geocode-body {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.add-city__geocode-edit {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 8px;
}
.add-city__geocode-edit label {
    display: block;
}
.add-city__geocode .btn-small {
    padding: 3px 8px;
    font-size: 0.85em;
}

/* --- Sprint 17 Day 2: Dashboard map/table toggle ---------- */
.view-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border, #d4d1ca);
    border-radius: 6px;
    overflow: hidden;
    margin-left: 8px;
}
.view-toggle__btn {
    padding: 4px 12px;
    font-size: 0.9em;
    color: var(--text-muted, #7a7974);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
}
.view-toggle__btn + .view-toggle__btn {
    border-left: 1px solid var(--border, #d4d1ca);
}
.view-toggle__btn.is-active {
    background: var(--primary, #01696f);
    color: #fff;
    font-weight: 600;
}
.view-toggle__btn:hover:not(.is-active) {
    background: var(--surface-alt, #fbfbf9);
    color: var(--text, #28251d);
}

.map-wrap {
    margin: 16px 0;
    padding: 0;
    border: 1px solid var(--border, #d4d1ca);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface, #f9f8f5);
}
.dashboard-map {
    width: 100%;
    height: 620px;
}
@media (max-width: 720px) {
    .dashboard-map { height: 460px; }
}
.map-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border, #d4d1ca);
    background: var(--surface-alt, #fbfbf9);
}
.map-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: middle;
    margin: 0 2px 0 6px;
}

/* Ruled-out pins get a hatched pattern via CSS so status is
   distinguishable without relying on color alone. Applied to the
   Leaflet SVG path via the className option. */
.leaflet-interactive.city-pin--ruled-out {
    stroke-dasharray: 3, 3;
}

.pin-popup {
    min-width: 200px;
    font-family: inherit;
}
.pin-popup__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.pin-popup__score {
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.pin-popup__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85em;
    color: var(--text-muted, #7a7974);
    margin-bottom: 8px;
}
.pin-popup__req--yes { color: var(--success, #437a22); }
.pin-popup__req--no  { color: var(--warning, #964219); }
.pin-popup__link {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    color: var(--primary, #01696f);
}
.pin-popup__link:hover { text-decoration: underline; }

/* --- Sprint 17 Day 3: Pairing detail arc map ------------- */
.pairing-map-card {
    padding: 0;
    overflow: hidden;
}
.pairing-map-card--pending {
    padding: 12px 16px;
}
.pairing-map {
    width: 100%;
    height: 380px;
}
@media (max-width: 720px) {
    .pairing-map { height: 300px; }
}
.pairing-map__footer {
    padding: 8px 12px;
    border-top: 1px solid var(--border, #d4d1ca);
    background: var(--surface-alt, #fbfbf9);
}

/* Permanent city-name labels floating above each pin. */
.leaflet-tooltip.pairing-city-label {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border, #d4d1ca);
    border-radius: 4px;
    padding: 2px 8px;
    font-weight: 600;
    font-size: 0.85em;
    color: var(--text, #28251d);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}
.leaflet-tooltip.pairing-city-label::before {
    /* Hide default triangle arrow — the offset already reads clearly. */
    display: none;
}

/* Distance chip at the midpoint of the arc. Rendered via divIcon so
   Leaflet positions the anchor for us; the inner span carries the
   pill styling. `pointer-events: none` on the wrapper lets clicks pass
   through to the map / pins beneath it. */
.pairing-distance-icon {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pairing-distance-chip {
    background: #28251d;
    color: #ffffff;
    font-size: 0.8em;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    pointer-events: auto;
    cursor: help;
}

/* --- Pairing suggestions ---------------------------------- */
.pairing-suggest-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pairing-suggest-card.is-saved { opacity: 0.7; }
.pairing-suggest-card__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, #eee);
}
.pairing-suggest-card__rank {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-muted, #7A7974);
    min-width: 40px;
}
.pairing-suggest-card__cities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.pairing-suggest-card__cities strong { font-size: 1.05rem; }
.pairing-suggest-card__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.pairing-breakdown {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.pairing-breakdown th,
.pairing-breakdown td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border, #f0f0f0);
    text-align: left;
}
.pairing-breakdown th.num,
.pairing-breakdown td.num { text-align: right; }
.pairing-breakdown td.winner { font-weight: 700; }
.contrib-bar {
    display: inline-block;
    width: 100%;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}
.contrib-bar__fill {
    display: block;
    height: 100%;
    background: var(--primary, #01696F);
    border-radius: 4px;
}
.pairing-suggest-card__actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

/* ============================================================
   Dark Mode
   Toggled via [data-theme="dark"] on <html>. Persisted in
   localStorage under key "theme". Anti-flash script in
   layout-head.ejs sets the attribute before body renders.
   ============================================================ */
[data-theme="dark"] {
    /* Surfaces */
    --color-bg: #171614;
    --color-surface: #1C1B19;
    --color-surface-alt: #201F1D;
    --color-border: #393836;
    --color-border-soft: #2A2927;

    /* Text */
    --color-text: #CDCCCA;
    --color-text-muted: #979692;
    --color-text-faint: #6A6967;

    /* Brand */
    --color-primary: #4F98A3;
    --color-primary-hover: #6BB5C0;
    --color-primary-soft: #1F3438;

    /* Semantic */
    --color-error: #D163A7;
    --color-warning: #BB653B;
    --color-warning-soft: #3A2418;
    --color-success: #6DAA45;

    /* Score tiers — slightly lifted for contrast on dark bg */
    --color-score-high: #6DAA45;
    --color-score-mid: #4F98A3;
    --color-score-low: #E8AF34;
    --color-score-poor: #DD6974;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Overrides for Phase 5 rules that used literal colors (via
   var(--border, #ddd) / var(--primary, #fff) fallbacks) so the
   short-name fallbacks don't leak the light palette in dark mode.
   Also handle rules that hardcoded #fff, #f5f5f5, #fafafa, #f0f0f0.
   ============================================================ */
[data-theme="dark"] .btn-refresh { color: #FFFFFF; }
[data-theme="dark"] .btn-refresh__spinner {
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #FFFFFF;
}
[data-theme="dark"] .btn-archive {
    background: var(--color-surface);
    color: var(--color-text);
}
[data-theme="dark"] .btn-archive:hover:not(:disabled) { background: var(--color-surface-alt); }
[data-theme="dark"] .btn-add-city {
    background: var(--color-surface);
    color: var(--color-text);
}
[data-theme="dark"] .notes-preview {
    background: var(--color-surface-alt);
}
[data-theme="dark"] .btn-save,
[data-theme="dark"] .btn-primary {
    color: #FFFFFF;
}
[data-theme="dark"] .btn-ghost {
    background: var(--color-surface);
    color: var(--color-text);
}
[data-theme="dark"] .contrib-bar__track {
    background: var(--color-surface-alt);
}
[data-theme="dark"] .data-table .row-warn:hover { background: #3A2418; }
[data-theme="dark"] .status-pill--active { background: #1F3820; color: var(--color-success); }
[data-theme="dark"] .status-pill--ruled_out { background: #3A1F2E; color: var(--color-error); }
[data-theme="dark"] .score-chip[data-tier="low"] { color: #171614; }

/* Theme toggle button in nav */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.theme-toggle:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}


/* ============================================================
   Phase 6 — Export cards, Change-log table, Mobile polish
   ============================================================ */

/* --- Settings: Export data grid --------------------------- */
.export-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 12px;
}
.export-card {
    padding: 14px 16px;
    border: 1px solid var(--color-border, #d4d1ca);
    border-radius: 8px;
    background: var(--color-surface-alt, #fbfbf9);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.export-card h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text, #28251d);
}
.export-card p {
    margin: 0;
    color: var(--color-text-muted, #7a7974);
    font-size: 0.9rem;
    line-height: 1.4;
}
.export-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}
.export-buttons .btn-ghost,
.export-buttons .btn-primary {
    padding: 6px 12px;
    font-size: 0.9rem;
    text-decoration: none;
    text-align: center;
}
[data-theme="dark"] .export-card {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

/* --- Change-log page ------------------------------------- */
.changelog-table th,
.changelog-table td {
    vertical-align: top;
    font-size: 0.9rem;
}
.changelog-when {
    white-space: nowrap;
    color: var(--color-text-muted, #7a7974);
    font-variant-numeric: tabular-nums;
}
.changelog-detail {
    line-height: 1.4;
    max-width: 40rem;
}
.changelog-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #d4d1ca);
    text-align: center;
}
.changelog-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: var(--color-surface-alt, #fbfbf9);
    border: 1px solid var(--color-border, #d4d1ca);
    color: var(--color-text-muted, #7a7974);
    white-space: nowrap;
}
.changelog-type--city { background: #E8F0E5; border-color: #C7DDBE; color: #437A22; }
.changelog-type--note { background: #FDF3E4; border-color: #F3D8A8; color: #964219; }
.changelog-type--score { background: #E1EEF0; border-color: #B4D2D6; color: #01696F; }
.changelog-type--pairing { background: #F1E7F0; border-color: #DDC6DA; color: #A12C7B; }
.changelog-type--category { background: #EFEDE5; border-color: #D4D1CA; color: #7A7974; }
[data-theme="dark"] .changelog-type--city { background: #1F3820; border-color: #2E5030; color: var(--color-success); }
[data-theme="dark"] .changelog-type--note { background: #3A2418; border-color: #543724; color: var(--color-warning); }
[data-theme="dark"] .changelog-type--score { background: #1F3438; border-color: #305055; color: var(--color-primary); }
[data-theme="dark"] .changelog-type--pairing { background: #3A1F2E; border-color: #562D45; color: var(--color-error); }
[data-theme="dark"] .changelog-type--category {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

/* --- Small ghost button variant --------------------------- */
.btn-ghost--sm,
.btn-sm {
    padding: 4px 10px;
    font-size: 0.85rem;
}
/* Anchor tags with button classes need matching layout */
a.btn-ghost,
a.btn-primary {
    display: inline-block;
    text-decoration: none;
    line-height: 1.2;
}

/* --- Filter form (dashboard, changelog) ------------------ */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
}
.filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--color-text-muted, #7a7974);
}
.filters input,
.filters select {
    padding: 6px 10px;
    border: 1px solid var(--color-border, #d4d1ca);
    border-radius: 4px;
    background: var(--color-surface, #f9f8f5);
    color: var(--color-text, #28251d);
    font-size: 0.9rem;
}
.filters button {
    align-self: end;
}

/* --- Pairing builder card layout ------------------------- */
.pairing-builder__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 12px 0;
}
.pairing-builder__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pairing-builder__field--wide {
    grid-column: 1 / -1;
    margin-bottom: 12px;
}
.pairing-builder__field label {
    font-size: 0.85rem;
}
.pairing-builder__field select,
.pairing-builder__field input,
.pairing-builder__field textarea {
    padding: 6px 10px;
    border: 1px solid var(--color-border, #d4d1ca);
    border-radius: 4px;
    background: var(--color-surface, #f9f8f5);
    color: var(--color-text, #28251d);
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
    width: 100%;
}
.pairing-builder__field textarea {
    resize: vertical;
    min-height: 48px;
}
.pairing-builder__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* --- Table-wrap horizontal scroll (touch) ---------------- */
.table-wrap {
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* --- Mobile — 768px --------------------------------------- */
@media (max-width: 768px) {
    .export-grid { grid-template-columns: 1fr; gap: 12px; }
    .pairing-builder__grid { grid-template-columns: repeat(2, 1fr); }
    .filters { gap: 10px; }
    .filters label { flex: 1 1 140px; min-width: 0; }
    .data-table { font-size: 0.85rem; }
}

/* --- Mobile — 640px --------------------------------------- */
@media (max-width: 640px) {
    .app-header h1 { font-size: 22px; }
    .app-nav { gap: 8px; padding-bottom: 4px; }
    .app-nav a,
    .app-nav .nav-group__trigger { flex-shrink: 0; }
    .app-nav .nav-add-city { margin-left: 0; }
    /* On very narrow screens the dropdown could clip; anchor to viewport. */
    .nav-group__menu { min-width: 160px; }

    .pairing-builder__grid { grid-template-columns: 1fr; }

    /* Hide less-critical columns in change-log */
    .changelog-table thead th:nth-child(4),
    .changelog-table tbody td:nth-child(4) { display: none; }

    /* Filters stack fully */
    .filters label { flex: 1 1 100%; }

    /* Notes editor buttons wrap */
    .notes-actions { flex-wrap: wrap; }

    /* Page header controls wrap under title */
    .page-header__controls { width: 100%; flex-wrap: wrap; }

    /* Reduce card padding */
    .card { padding: 14px; }

    /* Data-table cells tighter */
    .data-table th,
    .data-table td { padding: 6px 8px; }
}

/* ============================================================
   Phase 7: Research freshness badge (dashboard column)
   ============================================================ */
.freshness-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}
.freshness-badge--fresh {
    background: #E6F0DC;
    color: var(--color-success);
    border-color: #C9DFB1;
}
.freshness-badge--aging {
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border-color: #EDCEAF;
}
.freshness-badge--stale {
    background: #F5DEEC;
    color: var(--color-error);
    border-color: #E4BFD4;
}
.freshness-badge--none {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

/* ============================================================
   Phase 7: Dual-ownership planning
   ============================================================ */
.planning-section {
    margin: 24px 0;
}
.planning-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
    flex-wrap: wrap;
}
.planning-header h2 { margin: 0; }
.planning-header [data-planning-meta] {
    transition: color 200ms ease, opacity 200ms ease;
}
.planning-header [data-planning-meta].meta--saving { color: var(--color-warning); }
.planning-header [data-planning-meta].meta--saved  { color: var(--color-success); }
.planning-header [data-planning-meta].meta--error  { color: var(--color-error); }

.planning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.planning-card h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-soft);
}
.planning-card .form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.planning-card .form-row label {
    font-size: 12px;
    font-weight: 500;
}
.planning-card input[type="number"],
.planning-card input[type="text"],
.planning-card select,
.planning-card textarea {
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 14px;
    width: 100%;
}
.planning-card input:focus,
.planning-card select:focus,
.planning-card textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(1, 105, 111, 0.15);
}
.planning-card textarea { resize: vertical; font-family: inherit; }
.planning-card .carry-total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border-soft);
}
.planning-card .tax-summary {
    font-style: italic;
    color: var(--color-text-muted);
    padding-bottom: 6px;
}
.kv-table--compact td { padding: 4px 6px; font-size: 13px; }

/* Key destinations table */
.key-destinations-card { margin-top: 16px; }
.key-dest-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.key-dest-header h3 { margin: 0; }
.key-dest-actions { display: flex; gap: 8px; }
.key-dest-table {
    width: 100%;
    border-collapse: collapse;
}
.key-dest-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}
.key-dest-table td { padding: 6px 8px; vertical-align: middle; }
.key-dest-table input,
.key-dest-table select {
    width: 100%;
    padding: 5px 7px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 13px;
}
.key-dest-table input:focus,
.key-dest-table select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(1, 105, 111, 0.15);
}

.btn-secondary {
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
}
.btn-secondary:hover { background: var(--color-primary-soft); border-color: var(--color-primary); }

.btn-remove {
    padding: 2px 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.btn-remove:hover { color: var(--color-error); border-color: var(--color-error); background: rgba(161, 44, 123, 0.06); }

/* Dark theme: freshness + planning */
[data-theme="dark"] .freshness-badge--fresh {
    background: #1F3820;
    color: var(--color-success);
    border-color: #2E5030;
}
[data-theme="dark"] .freshness-badge--aging {
    background: #3A2418;
    color: var(--color-warning);
    border-color: #5A3820;
}
[data-theme="dark"] .freshness-badge--stale {
    background: #3A1F2E;
    color: var(--color-error);
    border-color: #5A2E45;
}
[data-theme="dark"] .freshness-badge--none {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}
[data-theme="dark"] .planning-card input[type="number"],
[data-theme="dark"] .planning-card input[type="text"],
[data-theme="dark"] .planning-card select,
[data-theme="dark"] .planning-card textarea,
[data-theme="dark"] .key-dest-table input,
[data-theme="dark"] .key-dest-table select {
    background: #201F1D;
    border-color: #393836;
    color: var(--color-text);
}
[data-theme="dark"] .btn-secondary {
    background: #201F1D;
    border-color: #393836;
    color: var(--color-text);
}
[data-theme="dark"] .btn-secondary:hover {
    background: #2A2927;
    border-color: var(--color-primary);
}

@media (max-width: 720px) {
    .planning-grid { grid-template-columns: 1fr; }
    .key-dest-table thead { display: none; }
    .key-dest-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border-bottom: 1px solid var(--color-border-soft); }
    .key-dest-table td { padding: 3px; }
    .key-dest-table td:first-child { grid-column: 1 / -1; }
    .key-dest-table td:last-child { grid-column: 1 / -1; text-align: right; }
}

/* ================================================================ */
/* Phase 8: Compare deltas, planning notes, pairing feedback         */
/* ================================================================ */

/* --- Compare table: delta highlighting --- */
.compare-table td.delta-best {
    background: rgba(67, 122, 34, 0.10);  /* success @ 10% */
    box-shadow: inset 3px 0 0 var(--color-success);
}
.compare-table td.delta-worst {
    background: rgba(161, 44, 123, 0.08);  /* error @ 8% */
    box-shadow: inset 3px 0 0 var(--color-error);
}
.compare-table tr.compare-section-head td {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 14px;
    padding-bottom: 6px;
    border-top: 1px solid var(--color-border);
}
.compare-longform {
    max-width: 320px;
    white-space: normal;
    line-height: 1.4;
}

[data-theme="dark"] .compare-table td.delta-best {
    background: rgba(109, 170, 69, 0.14);
    box-shadow: inset 3px 0 0 var(--color-success);
}
[data-theme="dark"] .compare-table td.delta-worst {
    background: rgba(209, 99, 167, 0.14);
    box-shadow: inset 3px 0 0 var(--color-error);
}
[data-theme="dark"] .compare-table tr.compare-section-head td {
    background: #201F1D;
    color: var(--color-text-muted);
}

/* --- Long-form planning notes --- */
.planning-notes {
    margin-top: 20px;
}
.planning-notes__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.planning-notes__header h3 {
    margin: 0;
}
.planning-notes__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.planning-notes__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.planning-notes__field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.planning-notes__auto {
    font-size: 11px;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    font-weight: 500;
    text-transform: none;
}
.planning-notes__field textarea {
    width: 100%;
    resize: vertical;
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    line-height: 1.5;
}
.planning-notes__field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.15);
}

[data-theme="dark"] .planning-notes__auto {
    background: rgba(79, 152, 163, 0.15);
    color: var(--color-primary);
}
[data-theme="dark"] .planning-notes__field textarea {
    background: #201F1D;
    border-color: #393836;
    color: var(--color-text);
}
[data-theme="dark"] .planning-notes__field textarea:focus {
    box-shadow: 0 0 0 3px rgba(79, 152, 163, 0.25);
}

@media (max-width: 720px) {
    .planning-notes__grid { grid-template-columns: 1fr; }
}

/* --- Pairing feedback --- */
.pairing-card {
    position: relative;
}
.pairing-card__delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-faint);
    border-radius: 4px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.pairing-card__delete:hover {
    color: var(--color-error);
    background: rgba(161, 44, 123, 0.08);
    border-color: var(--color-error);
}
.pairing-card__head-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Card-level tint by status (subtle) */
.pairing-card--approved {
    border-left: 3px solid var(--color-success);
}
.pairing-card--needs_work {
    border-left: 3px solid var(--color-warning);
}
.pairing-card--rejected {
    border-left: 3px solid var(--color-error);
    opacity: 0.85;
}

/* Feedback badge (top-right chip) */
.feedback-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.feedback-badge--approved {
    background: rgba(67, 122, 34, 0.12);
    color: var(--color-success);
    border: 1px solid rgba(67, 122, 34, 0.3);
}
.feedback-badge--needs_work {
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border: 1px solid rgba(150, 66, 25, 0.3);
}
.feedback-badge--rejected {
    background: rgba(161, 44, 123, 0.10);
    color: var(--color-error);
    border: 1px solid rgba(161, 44, 123, 0.3);
}
.feedback-badge--none {
    background: transparent;
    color: var(--color-text-faint);
    border: 1px dashed var(--color-border);
}

/* Feedback section within card */
.pairing-feedback {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pairing-feedback__status label {
    display: block;
    margin-bottom: 6px;
}
.pairing-feedback__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.feedback-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 120ms ease;
}
.feedback-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.feedback-pill:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
}
.feedback-pill--approved.is-active {
    background: rgba(67, 122, 34, 0.12);
    border-color: var(--color-success);
    color: var(--color-success);
    font-weight: 500;
}
.feedback-pill--needs_work.is-active {
    background: var(--color-warning-soft);
    border-color: var(--color-warning);
    color: var(--color-warning);
    font-weight: 500;
}
.feedback-pill--rejected.is-active {
    background: rgba(161, 44, 123, 0.10);
    border-color: var(--color-error);
    color: var(--color-error);
    font-weight: 500;
}
.feedback-clear {
    background: transparent;
    border: none;
    color: var(--color-text-faint);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: 4px;
}
.feedback-clear:hover {
    color: var(--color-text);
    text-decoration: underline;
}
.pairing-feedback__notes label {
    display: block;
    margin-bottom: 4px;
}
.pairing-feedback__notes textarea {
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    line-height: 1.4;
    resize: vertical;
}
.pairing-feedback__notes textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.15);
}
.pairing-feedback__meta {
    min-height: 1em;
}
.pairing-feedback__meta.meta--saving { color: var(--color-text-muted); }
.pairing-feedback__meta.meta--saved { color: var(--color-success); }
.pairing-feedback__meta.meta--error { color: var(--color-error); }

[data-theme="dark"] .feedback-pill {
    background: #201F1D;
    border-color: #393836;
    color: var(--color-text-muted);
}
[data-theme="dark"] .feedback-pill:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
}
[data-theme="dark"] .feedback-pill--approved.is-active {
    background: rgba(109, 170, 69, 0.16);
    border-color: var(--color-success);
    color: var(--color-success);
}
[data-theme="dark"] .feedback-pill--needs_work.is-active {
    background: rgba(187, 101, 59, 0.16);
    border-color: var(--color-warning);
    color: var(--color-warning);
}
[data-theme="dark"] .feedback-pill--rejected.is-active {
    background: rgba(209, 99, 167, 0.15);
    border-color: var(--color-error);
    color: var(--color-error);
}
[data-theme="dark"] .feedback-badge--none {
    border-color: #393836;
    color: var(--color-text-faint);
}
[data-theme="dark"] .pairing-feedback__notes textarea {
    background: #201F1D;
    border-color: #393836;
    color: var(--color-text);
}
[data-theme="dark"] .pairing-feedback__notes textarea:focus {
    box-shadow: 0 0 0 3px rgba(79, 152, 163, 0.25);
}
[data-theme="dark"] .pairing-card__delete:hover {
    background: rgba(209, 99, 167, 0.12);
    color: var(--color-error);
    border-color: var(--color-error);
}

@media (max-width: 520px) {
    .pairing-feedback__pills { flex-direction: column; align-items: stretch; }
    .feedback-pill { justify-content: center; }
}

/* =========================================================================
 * Phase 9: Radar chart, contacts, attachments, best-for
 * ========================================================================= */

/* --- Score radar chart --- */
.score-radar-wrap {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
.score-radar {
    width: 100%;
    max-width: 340px;
    height: auto;
    color: var(--color-text-muted);
    --radar-grid: rgba(40, 37, 29, 0.12);
    --radar-axis: rgba(40, 37, 29, 0.18);
    --radar-fill: rgba(32, 128, 141, 0.25);
    --radar-stroke: #20808D;
    --radar-label: var(--color-text-muted);
}
[data-theme="dark"] .score-radar {
    --radar-grid: rgba(205, 204, 202, 0.14);
    --radar-axis: rgba(205, 204, 202, 0.22);
    --radar-fill: rgba(79, 152, 163, 0.28);
    --radar-stroke: #4F98A3;
    --radar-label: var(--color-text-muted);
}

/* --- Contacts (property mgmt + realtor) --- */
.contacts-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 16px 0;
}
@media (min-width: 900px) {
    .contacts-section { grid-template-columns: 1fr 1fr; }
}
.contacts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.contacts-header h3 { margin: 0; }
.contacts-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.contacts-table th,
.contacts-table td {
    padding: 6px 8px;
    vertical-align: middle;
}
.contacts-table input[type="text"] {
    width: 100%;
    padding: 4px 6px;
    font-size: 13px;
    border: 1px solid var(--color-border, #D4D1CA);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-text);
}
.contacts-table input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.15);
}
[data-theme="dark"] .contacts-table input[type="text"] {
    background: #201F1D;
    border-color: #393836;
    color: var(--color-text);
}
[data-theme="dark"] .contacts-table input[type="text"]:focus {
    box-shadow: 0 0 0 3px rgba(79, 152, 163, 0.25);
}

/* --- Attachments grid --- */
.attachments-card { margin: 16px 0; }
.attachments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.attachments-header h2 { margin: 0; }
.attachments-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.attachments-upload-btn {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.attachments-link-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 8px;
    padding: 12px;
    margin-bottom: 12px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border, #D4D1CA);
    border-radius: var(--radius-sm);
}
.attachments-link-form input {
    padding: 6px 8px;
    font-size: 14px;
    border: 1px solid var(--color-border, #D4D1CA);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
}
[data-theme="dark"] .attachments-link-form {
    background: #201F1D;
    border-color: #393836;
}
[data-theme="dark"] .attachments-link-form input {
    background: #171614;
    border-color: #393836;
    color: var(--color-text);
}

.attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.attachment-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border, #D4D1CA);
    border-radius: var(--radius-sm);
}
[data-theme="dark"] .attachment-tile {
    background: #201F1D;
    border-color: #393836;
}
.attachment-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.05);
}
.attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.attachment-link-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft, rgba(1, 105, 111, 0.08));
    color: var(--color-primary);
    text-decoration: none;
    padding: 8px;
}
.attachment-link-tile:hover {
    text-decoration: none;
    background: rgba(1, 105, 111, 0.15);
}
[data-theme="dark"] .attachment-link-tile {
    background: rgba(79, 152, 163, 0.12);
    color: var(--color-primary);
}
.attachment-link-icon { font-size: 24px; }
.attachment-link-host {
    font-size: 12px;
    font-weight: 500;
    word-break: break-all;
}
.attachment-caption {
    width: 100%;
    padding: 3px 6px;
    font-size: 12px;
    border: 1px solid var(--color-border, #D4D1CA);
    border-radius: 4px;
    background: transparent;
    color: var(--color-text);
}
.attachment-caption:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
}
[data-theme="dark"] .attachment-caption { border-color: #393836; }
[data-theme="dark"] .attachment-caption:focus { background: #171614; }
.attachment-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 20px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--color-border, #D4D1CA);
    opacity: 0;
    transition: opacity 120ms ease;
}
.attachment-tile:hover .attachment-delete { opacity: 1; }
[data-theme="dark"] .attachment-delete {
    background: rgba(23, 22, 20, 0.85);
    border-color: #393836;
    color: var(--color-text);
}

/* --- Pairing strategy (Phase 9 addition to pairing card) --- */
.pairing-strategy {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border, #D4D1CA);
}
@media (min-width: 720px) {
    .pairing-strategy { grid-template-columns: 1fr 1fr; }
}
[data-theme="dark"] .pairing-strategy { border-top-color: #393836; }
.pairing-strategy__field label { display: block; margin-bottom: 4px; }
.pairing-strategy__field textarea {
    width: 100%;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid var(--color-border, #D4D1CA);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-text);
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}
.pairing-strategy__field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.15);
}
[data-theme="dark"] .pairing-strategy__field textarea {
    background: #201F1D;
    border-color: #393836;
}
[data-theme="dark"] .pairing-strategy__field textarea:focus {
    box-shadow: 0 0 0 3px rgba(79, 152, 163, 0.25);
}

/* --- Compare "Best for" cell --- */
.compare-bestfor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.compare-bestfor {
    vertical-align: top;
}
.compare-bestfor__text {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 4px;
}
.compare-bestfor__meta {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.compare-bestfor__generated {
    color: var(--text-muted);
    font-style: italic;
}
.compare-bestfor__stale-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #964219;                 /* Nexus warning */
    background: rgba(150, 66, 25, 0.10);
    border: 1px solid rgba(150, 66, 25, 0.35);
    cursor: help;
}
[data-theme="dark"] .compare-bestfor__stale-badge {
    color: #BB653B;                 /* Nexus warning dark */
    background: rgba(187, 101, 59, 0.15);
    border-color: rgba(187, 101, 59, 0.45);
}
.compare-bestfor.is-stale .compare-bestfor__text {
    /* Subtle visual signal that the summary is stale — slightly softer text */
    opacity: 0.75;
}
.btn-xs {
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.4;
    border-radius: 4px;
}

/* ============================================================
   Phase 11 — Cost projections
   ============================================================ */

/* Card head row: title on left, controls on right */
.card-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.card-head-row h2 { margin: 0; }

/* Projection settings form */
.projection-settings__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    align-items: end;
}
.projection-settings__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.projection-settings__field label { margin: 0; }
.projection-settings__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0 10px;
}
.projection-settings__input-wrap:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.projection-settings__input-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 4px;
    font: inherit;
    color: var(--color-text);
    outline: none;
    min-width: 0;
}
.projection-settings__prefix,
.projection-settings__suffix {
    color: var(--color-text-muted);
    font-size: 0.9em;
    white-space: nowrap;
}
.projection-settings__status {
    grid-column: 1 / -1;
    min-height: 18px;
    font-size: 12px;
    color: var(--color-text-muted);
}
.projection-settings__status.meta--saving { color: var(--color-warning); }
.projection-settings__status.meta--saved  { color: var(--color-success); }
.projection-settings__status.meta--error  { color: var(--color-error); }

/* Nominal / real toggle */
.display-toggle {
    display: inline-flex;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
}
.display-toggle button {
    background: transparent;
    border: none;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
}
.display-toggle button:hover { color: var(--color-text); }
.display-toggle button.is-active {
    background: var(--color-primary);
    color: #FFFFFF;
}

/* Per-city cost table */
.projections-city-table td.num { font-variant-numeric: tabular-nums; }
.unknown-marker {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

/* Year-one card row on pairing detail */
.projection-yearone {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.projection-yearone__card {
    flex: 1 1 180px;
    padding: 14px 16px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.projection-yearone__card--total {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
}
.projection-yearone__value {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}
.projection-yearone__plus,
.projection-yearone__equals {
    font-size: 22px;
    color: var(--color-text-muted);
    font-weight: 300;
    padding: 0 4px;
}

/* Ownership plan grid */
.ownership-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.ownership-status {
    font-size: 12px;
    color: var(--color-text-muted);
}
.ownership-status.meta--saving { color: var(--color-warning); }
.ownership-status.meta--saved  { color: var(--color-success); }
.ownership-status.meta--error  { color: var(--color-error); }
.ownership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.ownership-grid__year {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.ownership-grid__year-label {
    font-size: 12px;
    color: var(--color-text-muted);
    font-weight: 500;
}
.ownership-grid__select {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: 4px;
    padding: 4px 6px;
    font: inherit;
    font-size: 13px;
    color: var(--color-text);
    width: 100%;
}
.ownership-grid__select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
}

/* Year-by-year table */
.projection-year-table td,
.projection-year-table th {
    font-variant-numeric: tabular-nums;
}
.projection-year-table tfoot td {
    border-top: 2px solid var(--color-border);
    background: var(--color-surface-alt);
    padding-top: 10px;
}

/* Mode chip */
.mode-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
}
.mode-chip--dual {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-color: rgba(1, 105, 111, 0.25);
}
.mode-chip--single_a,
.mode-chip--single_b {
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border-color: rgba(150, 66, 25, 0.25);
}

/* Portfolio chart */
.portfolio-chart {
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
}
.portfolio-chart__svg {
    width: 100%;
    height: auto;
    display: block;
}
.portfolio-chart__grid {
    stroke: var(--color-border-soft);
    stroke-width: 1;
}
.portfolio-chart__line {
    stroke: var(--color-primary);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.portfolio-chart__ylabel,
.portfolio-chart__xlabel {
    fill: var(--color-text-muted);
    font-size: 10px;
    font-family: var(--font-sans);
}
.portfolio-chart__depletion-marker {
    fill: var(--color-error);
    stroke: var(--color-surface);
    stroke-width: 2;
}
.depletion-warning {
    color: var(--color-error);
    font-weight: 500;
}

/* Compare view */
.projection-compare-summary {
    text-align: center;
    padding: 8px 0;
}
.projection-compare-summary__delta {
    font-size: 32px;
    font-weight: 600;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    margin: 4px 0;
}
.projection-compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}
.projection-compare-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.compare-picker {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
}
.compare-picker__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 220px;
}
.compare-picker__field select {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--color-text);
}
.compare-picker__field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* Dark mode adjustments */
[data-theme="dark"] .projection-yearone__card {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}
[data-theme="dark"] .projection-yearone__card--total {
    background: rgba(79, 152, 163, 0.15);
    border-color: var(--color-primary);
}
[data-theme="dark"] .mode-chip--dual {
    background: rgba(79, 152, 163, 0.15);
    color: var(--color-primary);
    border-color: rgba(79, 152, 163, 0.4);
}
[data-theme="dark"] .mode-chip--single_a,
[data-theme="dark"] .mode-chip--single_b {
    background: rgba(187, 101, 59, 0.15);
    color: #BB653B;
    border-color: rgba(187, 101, 59, 0.4);
}
[data-theme="dark"] .unknown-marker {
    background: rgba(187, 101, 59, 0.18);
    color: #BB653B;
}
[data-theme="dark"] .display-toggle button.is-active {
    color: #FFFFFF;
}

/* Phase 14 — clickable golf-club links in the cost_references table */
.club-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--color-border);
}
.club-link:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.club-link__ext {
    font-size: 0.75em;
    color: var(--color-muted);
    margin-left: 0.15em;
}

/* Phase 14.1 — Listing search filters form */
.filter-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 16px;
    margin: 12px 0 16px;
}
.filter-form__grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9em;
    color: var(--color-text-muted, #7A7974);
}
.filter-form__grid input,
.filter-form__grid select {
    padding: 6px 8px;
    border: 1px solid var(--color-border, #D4D1CA);
    border-radius: 4px;
    font-size: 0.95em;
    background: var(--color-surface, #F9F8F5);
    color: var(--color-text, #28251D);
}
.filter-form__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Provider chips on listing tiles (Zillow / Realtor.com / Redfin) */
.listing-card__provider {
    margin-bottom: 6px;
}
.provider-chip {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    color: #fff;
}
.provider-chip--zillow  { background: #006AFF; }  /* Zillow blue */
.provider-chip--realtor { background: #C21F26; }  /* Realtor red */
.provider-chip--redfin  { background: #A02021; }  /* Redfin red */

.listing-card__btn {
    margin-top: 10px;
    display: inline-block;
}

/* =============================================================
   Phase 3 — What-if weight simulator
   ============================================================= */
.sim-toggle {
    margin: 0 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sim-panel {
    margin-bottom: 16px;
}
.sim-panel[hidden] { display: none; }

.sim-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.sim-panel__title {
    margin: 0 0 4px;
    font-size: 1.15rem;
}
.sim-panel__hint {
    margin: 0;
    max-width: 60ch;
}
.sim-panel__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.sim-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px 20px;
}

.sim-slider {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--color-border-soft, #E5E2DB);
    border-radius: 8px;
    background: var(--color-surface-alt, #FBFBF9);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.sim-slider--dirty {
    border-color: var(--color-primary, #01696F);
    background: var(--color-primary-soft, #E0EEEE);
}
.sim-slider__label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-weight: 500;
    font-size: 0.9rem;
}
.sim-slider__name { line-height: 1.2; }
.sim-slider__value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary, #01696F);
    min-width: 2.4ch;
    text-align: right;
}
.sim-slider__baseline {
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.sim-slider input[type="range"] {
    width: 100%;
    accent-color: var(--color-primary, #01696F);
    cursor: pointer;
    margin: 2px 0;
}

/* Dirty-state note next to the hint */
[data-sim-dirty-note] {
    color: var(--color-warning, #964219);
    font-weight: 600;
    margin-left: 4px;
}

/* Rank column on the dashboard */
.rank-col { width: 44px; }
.rank-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text-muted, #7A7974);
}
.rank-cell--top {
    color: var(--color-text, #28251D);
    font-weight: 700;
}
.rank-cell--gold {
    color: var(--color-primary, #01696F);
}

/* Give overall-cell recomputes a brief visual pulse */
.overall-cell strong { transition: color 0.2s ease; }

/* ----------------------------------------------------------------
   Phase 15 — Tax burden / break-even pills
   Small inline chips used inside kv-tables on the city profile.
   ---------------------------------------------------------------- */
.pill {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.pill--good {
    background: #E4EFDA;             /* success 15% */
    color: var(--color-success);
    border: 1px solid #C5DDB0;
}
.pill--warn {
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border: 1px solid #EBD0BA;
}
.pill--neutral {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
[data-theme="dark"] .pill--good {
    background: rgba(109, 170, 69, 0.14);
    color: #A6D086;
    border-color: rgba(109, 170, 69, 0.35);
}
[data-theme="dark"] .pill--warn {
    background: rgba(187, 101, 59, 0.16);
    color: #E1A57F;
    border-color: rgba(187, 101, 59, 0.4);
}
[data-theme="dark"] .pill--neutral {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

/* ----------------------------------------------------------------
   Phase 15 — Settings grid for projection/tax/baseline inputs
   ---------------------------------------------------------------- */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px 16px;
    margin-top: 12px;
}
.settings-grid .form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.settings-grid .form-row label {
    font-weight: 500;
}
.settings-grid input,
.settings-grid select {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
}
.settings-grid input:focus,
.settings-grid select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
    border-color: var(--color-primary);
}

/* ====================================================================
   Phase 16 — decision layer: leading pill, journal, scenarios, chosen
   ==================================================================== */

/* Header "Leading" pill (in layout-head.ejs brand area) */
.leading-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    white-space: nowrap;
}
.leading-pill__star {
    font-size: 11px;
    line-height: 1;
}
.leading-pill__label {
    font-weight: 500;
    opacity: 0.85;
}
.leading-pill__city {
    font-weight: 700;
}
.leading-pill:hover {
    background: var(--color-primary);
    color: var(--color-surface);
}

/* Dashboard: chosen city + chosen state */
.chosen-star {
    display: inline-block;
    margin-right: 4px;
    color: var(--color-primary);
    font-size: 14px;
    line-height: 1;
}
.dashboard-table tr.city-row--chosen-state td:first-child {
    box-shadow: inset 3px 0 0 var(--color-primary);
}
.dashboard-table tr.city-row--chosen td:first-child {
    box-shadow: inset 4px 0 0 var(--color-primary);
}

/* Decision journal on city profile */
.journal-card {
    margin-top: 20px;
}
.journal-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}
.journal-add-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-alt);
    margin-bottom: 20px;
}
.journal-add-form__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.journal-add-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.journal-add-form input,
.journal-add-form select,
.journal-add-form textarea {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    width: 100%;
}
.journal-add-form input:focus,
.journal-add-form select:focus,
.journal-add-form textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
    border-color: var(--color-primary);
}
.journal-add-form textarea {
    resize: vertical;
    min-height: 84px;
    font-family: inherit;
}
.journal-add-form__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
@media (max-width: 720px) {
    .journal-add-form__row { grid-template-columns: 1fr; }
}
.journal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.journal-empty {
    padding: 12px 0;
}
.journal-entry {
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}
.journal-entry__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.journal-entry__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.journal-entry__date {
    font-weight: 600;
    color: var(--color-text);
    font-size: 13px;
}
.journal-entry__title {
    color: var(--color-text);
    font-size: 14px;
}
.journal-entry__actions {
    display: flex;
    gap: 6px;
}
.journal-entry__body {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.55;
}
.journal-entry__body p {
    margin: 0 0 8px 0;
}
.journal-entry__body p:last-child {
    margin-bottom: 0;
}
.journal-entry__editor {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-alt);
    color: var(--color-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

/* Sentiment pills */
.sentiment-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1.6;
}
.sentiment-pill--positive {
    background: color-mix(in srgb, var(--color-success) 18%, transparent);
    color: var(--color-success);
}
.sentiment-pill--neutral {
    background: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
    color: var(--color-text-muted);
}
.sentiment-pill--concern {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

/* Danger button variant (used in journal delete + scenarios) */
.btn-ghost.btn-danger {
    color: var(--color-error);
}
.btn-ghost.btn-danger:hover {
    background: color-mix(in srgb, var(--color-error) 12%, transparent);
}

/* Scenarios list + detail */
.scenario-save-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.breadcrumb {
    display: flex;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 13px;
    margin-bottom: 8px;
}
.breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.stat-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 24px;
    margin: 8px 0 0 0;
    padding: 0;
    list-style: none;
}
.stat-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stat-list dt,
.stat-list .stat-label {
    color: var(--color-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.stat-list dd,
.stat-list .stat-value {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    font-variant-numeric: tabular-nums lining-nums;
}
.scenarios-table td.scenario-name {
    font-weight: 600;
}
.scenarios-table .auto-backup-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.diff-table tr.row--diff td {
    background: var(--color-primary-soft);
}
.diff-table tr.row--diff td:first-child {
    font-weight: 600;
    color: var(--color-primary);
}

/* ==============================================================
   Community character panel — Sprint 16 Day 4
   Renders between the page header and scores card on city profile.
   Reuses status-pill palette semantics for tier badges.
   ============================================================== */

.community-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius, 8px);
    padding: 1rem 1.25rem;
    margin: 0 0 1.25rem 0;
}
.community-panel__head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}
.community-panel__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.community-panel__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
}
.community-panel__score {
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--color-text-muted);
}
.community-panel__score-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text);
    margin-right: 0.15rem;
}
.community-panel__score-unit {
    font-size: 0.85rem;
}
.community-panel__pct-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.community-panel__pct {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    font-variant-numeric: tabular-nums lining-nums;
}
.community-panel__meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0.15rem 0 0 0;
}
.community-panel__meta--empty {
    max-width: 60ch;
}

/* Tier badges — same visual weight as status pills. */
.community-tier {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.community-tier--year_round { background: #DCEEDD; color: var(--color-success); }
.community-tier--mixed      { background: var(--color-primary-soft); color: var(--color-primary); }
.community-tier--seasonal   { background: var(--color-warning-soft); color: var(--color-warning); }
.community-tier--resort     { background: #F4D9E8; color: var(--color-error); }
.community-tier--unknown    { background: var(--color-border-soft); color: var(--color-text-muted); }

/* Sprint 16 Day 5 (d) — tier pill under city name on dashboard rows */
.city-cell__community {
    margin-top: 0.25rem;
}

/* Sprint 16 Day 5 (b) — Discover filter bar */
.discover-filter-bar {
    margin: 0 0 16px 0;
    padding: 12px 16px;
    background: var(--color-surface, #F9F8F5);
    border: 1px solid var(--color-border, #D4D1CA);
    border-radius: 8px;
}
.discover-filter-bar__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: flex-end;
}
.filter-group {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.filter-group legend {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted, #7A7974);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0;
    margin-right: 4px;
}
.filter-group--search {
    flex: 1 1 200px;
    min-width: 180px;
}
.filter-group--actions {
    display: flex;
    gap: 8px;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--color-background, #F7F6F2);
    border: 1px solid var(--color-border, #D4D1CA);
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.filter-chip:hover {
    background: var(--color-surface-alt, #FBFBF9);
}
.filter-chip input {
    margin: 0;
    cursor: pointer;
}
.filter-chip:has(input:checked) {
    background: var(--color-primary-soft, #DDE9EB);
    border-color: var(--color-primary, #01696F);
    color: var(--color-primary, #01696F);
    font-weight: 600;
}
.filter-search-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border, #D4D1CA);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--color-background, #F7F6F2);
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
[data-theme="dark"] .discover-filter-bar {
    background: var(--color-surface, #1C1B19);
    border-color: var(--color-border, #393836);
}
[data-theme="dark"] .filter-chip {
    background: var(--color-background, #171614);
    border-color: var(--color-border, #393836);
}
[data-theme="dark"] .filter-chip:hover {
    background: var(--color-surface-alt, #201F1D);
}

/* Sprint 16 Day 5 (price) — Discovery budget widget + settings form */
.discovery-budget-widget summary {
    cursor: pointer;
    list-style: revert;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.discovery-budget-widget summary::-webkit-details-marker {
    color: var(--color-text-muted, #7A7974);
}
.discovery-budget-widget__label {
    font-weight: 600;
}
.discovery-budget-widget__preview {
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
}
.discovery-budget-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
}
.discovery-budget-form__row label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--color-text-muted, #7A7974);
}
.discovery-budget-form__row label span {
    font-weight: 600;
    color: var(--color-text, #28251D);
}
.discovery-budget-form__row input[type="number"] {
    padding: 6px 10px;
    border: 1px solid var(--color-border, #D4D1CA);
    border-radius: 6px;
    background: var(--color-background, #F7F6F2);
    font-size: 0.95rem;
    width: 160px;
    font-variant-numeric: tabular-nums lining-nums;
}
.discovery-budget-form__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 2px;
}
[data-theme="dark"] .discovery-budget-form__row input[type="number"] {
    background: var(--color-background, #171614);
    border-color: var(--color-border, #393836);
    color: var(--color-text, #CDCCCA);
}
[data-theme="dark"] .discovery-budget-form__row label span {
    color: var(--color-text, #CDCCCA);
}

/* Signal rows */
.community-panel__signals {
    list-style: none;
    margin: 0.5rem 0 0.75rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
}
@media (min-width: 640px) {
    .community-panel__signals {
        grid-template-columns: repeat(3, 1fr);
    }
}
.community-signal {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-soft);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.community-signal__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.community-signal__score {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums lining-nums;
}
.community-signal__score-max {
    color: var(--color-text-faint);
    font-weight: 500;
    font-size: 0.85rem;
    margin-left: 0.1rem;
}
.community-signal__note {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}
.community-panel__sources {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem 0;
}
.community-panel__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.community-panel__status {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

[data-theme="dark"] .community-tier--year_round { background: #1F3820; color: var(--color-success); }
[data-theme="dark"] .community-tier--mixed      { background: #163B3F; color: var(--color-primary); }
[data-theme="dark"] .community-tier--seasonal   { background: #3A2213; color: var(--color-warning); }
[data-theme="dark"] .community-tier--resort     { background: #3A1F2E; color: var(--color-error); }


/* ============================================================
 * Sprint D Day 4 -- prefers-reduced-motion audit.
 *
 * WCAG 2.3.3 (AAA) recommends disabling non-essential motion when
 * the user has set prefers-reduced-motion: reduce. We use a global
 * override that shortens all transitions and animations to 0.01ms
 * (not 0s, which some engines special-case) and disables smooth
 * scroll. Any motion that carries information (spinners, growth
 * indicators) is left alone by design: authors can opt back in on
 * a specific selector.
 *
 * See also: public/js/tour-runner.js, which already checks
 * matchMedia('(prefers-reduced-motion: reduce)') to disable
 * Shepherd's smooth-scroll behavior.
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}