/* ============================================================
   NestScore — interactive map (map.html)
   Loaded after assets/styles.css. Owns the full-viewport map app
   layout: login screen, header, list panel, filter toolbar, score
   bands, weights panel, legend, listing detail, modals (upgrade /
   account / welcome onboarding), Leaflet overrides, and toasts.
   Tokens come from styles.css; nothing here clashes with the
   marketing pages because they don't load this file.
   ============================================================ */

/* ── Map-app body overrides ── */
html, body { font-size: 16px; line-height: 1.5; height: 100%; overflow: hidden; }

/* ── Login ── */
#login-screen { position:fixed; inset:0; z-index:9999; background:var(--paper); display:none; align-items:center; justify-content:center; }
#login-screen.open { display:flex; }
.login-card { background:var(--paper-lift); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-3); padding:48px 40px 40px; width:100%; max-width:400px; position:relative; }
.login-card .modal-close { position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:9999px; border:none; background:var(--paper-dim); color:var(--ink-500); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--dur-base) var(--ease); }
.login-card .modal-close:hover { background:var(--border); color:var(--ink); }
.login-guest-link { display:block; text-align:center; margin-top:14px; font-size:13px; color:var(--ink-500); background:none; border:none; cursor:pointer; font-family:var(--font-sans); }
.login-guest-link:hover { color:var(--moss); text-decoration:underline; }
.login-logo { display:flex; align-items:center; gap:12px; margin-bottom:32px; }
.login-wordmark { font-size:22px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.login-wordmark em { font-style:normal; color:var(--moss); }
.login-tagline { font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--ink-500); margin-bottom:28px; }
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-500); margin-bottom:6px; }
.form-input { width:100%; height:44px; padding:0 14px; border-radius:8px; border:1px solid var(--border-strong); background:var(--paper); font-family:var(--font-sans); font-size:15px; color:var(--ink); outline:none; transition:border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.form-input:focus { border-color:var(--moss); box-shadow:0 0 0 3px rgba(31,77,63,.2); }
.btn-primary { display:flex; align-items:center; justify-content:center; width:100%; height:46px; background:var(--moss); color:var(--paper); border:none; border-radius:8px; font-family:var(--font-sans); font-size:15px; font-weight:600; cursor:pointer; margin-top:8px; transition:background var(--dur-base) var(--ease); }
.btn-primary:hover { background:var(--moss-700); }
.btn-primary:disabled { opacity:0.55; cursor:not-allowed; }
.login-error { background:var(--brick-100); color:var(--brick); border-radius:8px; padding:10px 14px; font-size:14px; font-weight:500; margin-bottom:16px; display:none; }
.btn-oauth { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:46px; background:var(--paper); color:var(--ink); border:1px solid var(--border-strong); border-radius:8px; font-family:var(--font-sans); font-size:15px; font-weight:500; cursor:pointer; transition:background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.btn-oauth:hover { background:var(--paper-dim); border-color:var(--moss); }
.btn-oauth:disabled { opacity:0.55; cursor:not-allowed; }
.btn-oauth .oauth-icon { flex-shrink:0; }
.login-divider { display:flex; align-items:center; gap:12px; margin:18px 0 16px; color:var(--ink-300); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-family:var(--font-mono); }
.login-divider::before, .login-divider::after { content:""; flex:1; height:1px; background:var(--border); }

/* ── App ── */
#app { display:flex; flex-direction:column; height:100vh; }

/* ── Header ── */
header { position:sticky; top:0; z-index:500; height:56px; background:rgba(240,232,210,0.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; padding:0 16px; flex-shrink:0; }
.header-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.header-wordmark { font-size:17px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.header-wordmark em { font-style:normal; color:var(--moss); }
.header-howlink { font-size:13px; font-weight:500; color:var(--ink-500); text-decoration:none; padding:0 4px; transition:color 150ms ease; flex-shrink:0; }
.header-howlink:hover { color:var(--moss); }
.header-stats { flex:1; display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-500); font-family:var(--font-mono); }
.header-pill { background:var(--moss); color:var(--paper); border-radius:9999px; padding:2px 8px; font-size:12px; font-weight:600; }
.btn-icon { height:34px; padding:0 12px; border-radius:8px; border:1px solid var(--border-strong); background:transparent; font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--ink-500); cursor:pointer; transition:all var(--dur-base) var(--ease); display:flex; align-items:center; gap:5px; white-space:nowrap; flex-shrink:0; }
.btn-icon:hover { background:var(--paper-dim); color:var(--ink); }
.btn-icon.active { background:var(--moss); color:var(--paper); border-color:var(--moss); }
.btn-icon.go-pro { background:var(--moss); color:var(--paper); border-color:var(--moss); font-weight:600; }
.btn-icon.go-pro:hover { background:var(--moss-700); border-color:var(--moss-700); color:var(--paper); }
.saved-count { background:var(--brick); color:var(--paper); border-radius:9999px; padding:1px 6px; font-size:11px; font-weight:600; font-family:var(--font-mono); }
.btn-icon-svg { display:inline-block; flex-shrink:0; vertical-align:-2px; }
.btn-icon.active .btn-icon-svg { color: var(--paper); }

/* ── Body ── */
#body { flex:1; display:flex; overflow:hidden; position:relative; }

/* ── List panel ── */
#list-panel { width:0; flex-shrink:0; background:var(--paper-lift); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; transition:width 360ms var(--ease); }
#list-panel.open { width:var(--list-w); }
#list-panel .list-header, #list-panel #list-items { min-width:var(--list-w); }
.list-header { padding:14px 16px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.list-tabs { display:flex; gap:4px; }
.list-tab { height:30px; padding:0 12px; border-radius:8px; border:1px solid transparent; background:transparent; font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--ink-500); cursor:pointer; transition:all var(--dur-base) var(--ease); }
.list-tab.active { background:var(--moss); color:var(--paper); border-color:var(--moss); }
.list-tab:hover:not(.active) { background:var(--paper-dim); color:var(--ink); }
.list-close { width:28px; height:28px; border-radius:9999px; background:var(--paper-dim); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--ink-500); transition:background var(--dur-base) var(--ease); }
.list-close:hover { background:var(--border); }
#list-items { flex:1; overflow-y:auto; padding:8px; }
#list-items::-webkit-scrollbar { width:4px; }
#list-items::-webkit-scrollbar-thumb { background:var(--border); border-radius:9999px; }
.list-row { display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; cursor:pointer; transition:background var(--dur-base) var(--ease); border:1px solid transparent; }
.list-row:hover { background:var(--paper); border-color:var(--border); }
.list-row.active { background:var(--paper); border-color:var(--moss); }
.list-badge { width:44px; height:44px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:16px; font-weight:600; color:var(--paper); flex-shrink:0; }
.list-info { flex:1; min-width:0; }
.list-price { font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--ink); }
.list-address { font-size:12px; color:var(--ink-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-meta { font-family:var(--font-mono); font-size:11px; color:var(--ink-300); }
.list-together { color:var(--moss); font-weight:600; }
.heart-btn { width:32px; height:32px; border-radius:9999px; border:none; background:transparent; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; transition:transform 200ms var(--ease); color:var(--ink-300); }
.heart-btn:hover { transform:scale(1.2); }
.heart-btn.saved { color:var(--brick); }
.list-empty { padding:40px 16px; text-align:center; color:var(--ink-500); font-family:var(--font-serif); font-style:italic; font-size:15px; }

/* ── Skeletons ── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skeleton-row { display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; }
.skeleton-pulse {
  background: linear-gradient(90deg, var(--paper-dim) 25%, var(--paper-lift) 50%, var(--paper-dim) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 9999px;
}
.skeleton-circle { width:44px; height:44px; flex-shrink:0; }
.skeleton-lines { flex:1; display:flex; flex-direction:column; gap:7px; }
.skeleton-line { height:11px; border-radius:4px; }
.skeleton-line.wide  { width:70%; }
.skeleton-line.med   { width:50%; }
.skeleton-line.short { width:35%; }

/* ── Map ── */
#map-wrap { flex:1; position:relative; overflow:hidden; }
#map { width:100%; height:100%; }

/* ── Filter toolbar ── */
#filter-bar {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:401; display:flex; align-items:center; gap:6px;
  background:rgba(240,232,210,0.92); backdrop-filter:blur(12px);
  border:1px solid var(--border); border-radius:9999px;
  padding:5px 12px; box-shadow:var(--shadow-1); white-space:nowrap;
}
.filter-divider { width:1px; height:18px; background:var(--border); flex-shrink:0; margin:0 2px; }
.filter-label { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-500); }
.filter-price-wrap { display:flex; align-items:center; gap:5px; }
.filter-price-input { width:82px; height:26px; padding:0 7px; border-radius:6px; border:1px solid var(--border-strong); background:var(--paper); font-family:var(--font-mono); font-size:12px; color:var(--ink); outline:none; transition:border-color var(--dur-base) var(--ease); }
.filter-price-input:focus { border-color:var(--moss); }
.filter-unit-input { width:58px; }
.filter-price-sep { font-size:12px; color:var(--ink-300); }
.hood-mode-btn { height:26px; padding:0 10px; border-radius:9999px; border:1.5px solid transparent; cursor:pointer; font-family:var(--font-sans); font-size:12px; font-weight:500; background:transparent; color:var(--ink-500); transition:all var(--dur-base) var(--ease); display:flex; align-items:center; gap:4px; }
.hood-mode-btn:hover { color:var(--ink); }
.hood-mode-btn.active { color:var(--ink); background:var(--paper-lift); border-color:var(--border-strong); }
.filter-active-pill { height:22px; padding:0 8px; border-radius:9999px; background:var(--moss); color:var(--paper); font-family:var(--font-mono); font-size:11px; font-weight:600; display:none; align-items:center; gap:5px; }
.filter-active-pill.visible { display:flex; }
.filter-active-pill button { background:none; border:none; color:var(--paper); cursor:pointer; font-size:13px; padding:0; line-height:1; opacity:0.8; }
.filter-active-pill button:hover { opacity:1; }

/* ── Score band bar ── */
#band-bar { position:absolute; top:56px; left:50%; transform:translateX(-50%); z-index:400; display:flex; gap:6px; align-items:center; background:rgba(240,232,210,0.92); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:9999px; padding:5px 10px; box-shadow:var(--shadow-1); }
.band-btn { display:flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:9999px; border:1.5px solid transparent; cursor:pointer; font-family:var(--font-mono); font-size:12px; font-weight:500; background:transparent; color:var(--ink-500); transition:all var(--dur-base) var(--ease); }
.band-btn .dot { width:8px; height:8px; border-radius:9999px; flex-shrink:0; }
.band-btn.active { color:var(--ink); background:var(--paper-lift); border-color:var(--border-strong); }
.band-btn:hover { color:var(--ink); }

/* ── Weights panel ── */
#weights-panel { position:absolute; bottom:16px; right:16px; z-index:400; width:280px; max-height:calc(100vh - 32px); overflow-y:auto; background:var(--paper-lift); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-2); padding:18px 20px 20px; transform:translateX(calc(100% + 32px)); transition:transform 360ms var(--ease); }
#weights-panel.open { transform:translateX(0); }
.weights-title { font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-500); margin-bottom:14px; }
.weight-group { margin-bottom:6px; }
.weight-group-header { display:flex; align-items:center; justify-content:space-between; padding:6px 0 4px; cursor:pointer; user-select:none; font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-500); border-top:1px solid var(--border); }
.weight-group:first-of-type .weight-group-header { border-top:none; padding-top:0; }
.weight-group-toggle { display:inline-block; transition:transform 180ms var(--ease); font-size:10px; color:var(--ink-300); }
.weight-group.collapsed .weight-group-toggle { transform:rotate(-90deg); }
.weight-group-rows { padding-top:8px; overflow:hidden; transition:max-height 240ms var(--ease), padding-top 240ms var(--ease); }
.weight-group.collapsed .weight-group-rows { max-height:0 !important; padding-top:0; }
.weight-row { margin-bottom:14px; }
.weight-label { display:flex; justify-content:space-between; font-size:13px; color:var(--ink-700); margin-bottom:5px; }
.weight-val { display:none; }
.priority-axis { display:flex; justify-content:space-between; padding:2px 2px 8px; font-size:11px; color:var(--ink-500); font-style:italic; }
input[type=range] { width:100%; height:4px; border-radius:9999px; appearance:none; -webkit-appearance:none; background:var(--paper-dim); outline:none; cursor:pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:9999px; background:var(--moss); border:2px solid var(--paper-lift); box-shadow:var(--shadow-1); cursor:pointer; }
input[type=range]::-moz-range-thumb { width:16px; height:16px; border-radius:9999px; background:var(--moss); border:2px solid var(--paper-lift); cursor:pointer; }
/* ── Preset cards (Quick start) ── */
.preset-section { margin-bottom:16px; }
.preset-section-label { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-500); margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
.preset-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.preset-card { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; border:1.5px solid var(--border); background:var(--paper); cursor:pointer; transition:all var(--dur-base) var(--ease); text-align:left; font-family:var(--font-sans); }
.preset-card:hover { background:var(--paper-dim); border-color:var(--border-strong); }
.preset-card.active { border-color:var(--moss); background:var(--moss-050); }
.preset-card .preset-icon { width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--ink-500); font-size:14px; flex-shrink:0; transition:color var(--dur-base) var(--ease); }
.preset-card.active .preset-icon { color:var(--moss); }
.preset-card .preset-label { font-size:12px; font-weight:600; color:var(--ink); line-height:1.2; }
.preset-card:last-child { grid-column:1 / -1; }

/* Custom Mix — the 8th card, full-width like Balanced. Pro-only entry point
   into editable sliders. Free users see a Pro chip; clicking opens upgrade modal. */
.preset-card.custom-mix { position:relative; }
.preset-card.custom-mix.locked { background:linear-gradient(to right, var(--paper) 0%, var(--paper-dim) 100%); }
.preset-card.custom-mix.locked .preset-icon { color:var(--ink-300); }
.preset-card.custom-mix .preset-pro-chip {
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:var(--moss); color:var(--paper);
  font-size:10px; font-weight:700; letter-spacing:0.04em;
  padding:2px 7px; border-radius:9999px;
}
.preset-card.custom-mix.active { border-color:var(--moss); background:var(--moss-050); }
.preset-card.custom-mix.active .preset-icon { color:var(--moss); }

/* Disabled-slider state — applied to the whole panel when not in Custom Mix.
   The browser disabled attribute is the source of truth (defense in depth);
   these rules just make the visual disengagement obvious. */
#weights-panel.sliders-disabled .weight-row { opacity:0.55; }
#weights-panel.sliders-disabled input[type=range] { cursor:not-allowed; }
#weights-panel.sliders-disabled input[type=range]::-webkit-slider-thumb { background:var(--ink-300); cursor:not-allowed; }
#weights-panel.sliders-disabled input[type=range]::-moz-range-thumb { background:var(--ink-300); cursor:not-allowed; }
#weights-panel.sliders-disabled .weight-val { color:var(--ink-500); }
#weights-panel.sliders-disabled .traffic-direction-toggle { opacity:0.55; pointer-events:none; }

/* ── Budget total indicator ── */
.budget-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.budget-header .preset-section-label { margin-bottom:0; }
.budget-total { font-family:var(--font-mono); font-size:11px; color:var(--moss); font-weight:600; }
.budget-total.warn { color:var(--brick); }

/* ── Save footer (Pro saves; Free opens upgrade modal) ── */
.weights-save { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:38px; margin-top:16px; background:var(--moss); color:var(--paper); border:none; border-radius:8px; font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; transition:background var(--dur-base) var(--ease); }
.weights-save:hover { background:var(--moss-700); }
.weights-save.free::after { content:"Pro"; background:var(--paper); color:var(--moss); border-radius:9999px; font-size:10px; padding:1px 7px; font-weight:700; letter-spacing:0.04em; }
.weights-hint { font-size:11px; color:var(--ink-500); text-align:center; margin-top:8px; line-height:1.35; }

/* Legacy class kept for back-compat; new code uses .weights-save. */
.weights-apply { width:100%; height:36px; margin-top:16px; background:var(--moss); color:var(--paper); border:none; border-radius:8px; font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; transition:background var(--dur-base) var(--ease); }
.weights-apply:hover { background:var(--moss-700); }

/* Traffic direction toggle — sits just below the traffic slider. */
.traffic-direction-toggle { display:flex; align-items:center; gap:10px; margin-top:6px; font-size:11px; color:var(--ink-500); }
.traffic-direction-toggle .traffic-dir-prefix { font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
.traffic-direction-toggle label { display:inline-flex; align-items:center; gap:4px; cursor:pointer; color:var(--ink-700); }
.traffic-direction-toggle input[type=radio] { width:auto; height:auto; margin:0; accent-color:var(--moss); cursor:pointer; }

/* ── Legend ── */
.legend { position:absolute; bottom:24px; left:16px; z-index:400; background:var(--paper-lift); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-2); padding:14px 16px; min-width:160px; }
.legend-title { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-500); margin-bottom:10px; }
.legend-row { display:flex; align-items:center; gap:8px; font-size:13px; font-family:var(--font-mono); color:var(--ink-700); margin-bottom:5px; }
.legend-row:last-child { margin-bottom:0; }
.legend-dot { width:14px; height:14px; border-radius:9999px; flex-shrink:0; }

/* ── Detail panel ── */
#detail-panel {
  position:absolute; bottom:16px; right:16px; z-index:400;
  width:300px;
  /* Cap height so a tall panel's top clears the sticky header AND the filter
     bar below it (otherwise the top tucks behind them). The body scrolls. */
  max-height: calc(100vh - 140px);
  display:flex; flex-direction:column;
  background:var(--paper-lift); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow-3); overflow:hidden;
  transform:translateY(calc(100% + 32px));
  transition:transform 360ms var(--ease);
}
#detail-panel.open { transform:translateY(0); }
#detail-panel .detail-header { flex-shrink:0; }
#detail-panel .detail-body { flex:1; overflow-y:auto; min-height:0; }
.detail-header { padding:16px 16px 0; display:flex; justify-content:space-between; align-items:flex-start; }
.detail-score-badge { width:64px; height:64px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--paper); box-shadow:var(--shadow-2); flex-shrink:0; }
.detail-household { display:flex; gap:8px; margin:6px 0 14px; }
.detail-household .hh-chip { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px; background:var(--paper); border:1px solid var(--border); border-radius:10px; }
.detail-household .hh-chip.hh-together { background:var(--paper-dim); border-color:var(--border-strong); }
.detail-household .hh-num { min-width:30px; height:30px; padding:0 7px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:14px; font-weight:600; color:#F6F1E7; }
.detail-household .hh-label { max-width:100%; font-size:11px; color:var(--ink-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-actions { position:absolute; top:14px; right:14px; z-index:5; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.detail-close { width:32px; height:32px; border-radius:9999px; background:rgba(11,19,17,0.55); backdrop-filter:blur(6px); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; transition:background var(--dur-base) var(--ease); }
.detail-close:hover { background:rgba(11,19,17,0.75); }
.detail-heart { width:32px; height:32px; border-radius:9999px; background:rgba(11,19,17,0.55); backdrop-filter:blur(6px); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; transition:all var(--dur-base) var(--ease); }
.detail-heart:hover { transform:scale(1.15); }
.detail-heart.saved { color:var(--brick); background:rgba(240,232,210,0.85); }

/* ── Source badge / clickable source ─────────────────── */
.source-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px; border-radius:9999px;
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
  border:1px solid var(--border);
}
.source-pill.kijiji { background:#FBE9E1; color:#8C4231; border-color:#E8C7B6; }
.source-pill.condos { background:#DDE6DF; color:#0E3328; border-color:#C9D9CF; }
.source-pill.condos::before,
.source-pill.kijiji::before { content:"●"; font-size:8px; }
.source-pill.kijiji::before { color:#B14B30; }
.source-pill.condos::before { color:#1F4D3F; }

.detail-source-link {
  display:inline-flex; align-items:center; gap:4px;
  margin-top:4px; font-size:11px; color:var(--ink-500);
  text-decoration:none; transition:color var(--dur-base) var(--ease);
}
.detail-source-link:hover { color:var(--moss); text-decoration:underline; }
.detail-source-link::after { content:"↗"; font-size:11px; }
.detail-photo-link { display:block; line-height:0; }

/* Address as link — keep visual identical, but show pointer */
.detail-address-link {
  color:inherit; text-decoration:none; cursor:pointer;
  border-bottom:1px dotted transparent;
  transition:border-color var(--dur-base) var(--ease);
}
.detail-address-link:hover { border-bottom-color:var(--moss-300); }

/* ── Building / extras section ───────────────────────── */
.detail-extras {
  margin-top:12px; display:flex; flex-wrap:wrap; gap:6px;
}
.extra-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:9999px;
  background:var(--paper); border:1px solid var(--border);
  font-size:11px; color:var(--ink-700);
}
.extra-chip.warn { background:#FBE9E1; border-color:#E8C7B6; color:#8C4231; }

/* ── Price history chart ─────────────────────────────── */
.price-history-wrap { margin-top:18px; }
.price-history-title {
  font-size:11px; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-500);
  margin-bottom:8px; display:flex; justify-content:space-between;
}
.price-history-title .delta { color:var(--moss); font-family:var(--font-mono); }
.price-history-title .delta.up   { color:var(--brick); }
.price-history-title .delta.down { color:var(--moss); }
.price-history-svg { width:100%; height:60px; display:block; }
.price-history-empty {
  font-size:11px; color:var(--ink-300); font-family:var(--font-serif);
  font-style:italic; text-align:center; padding:8px;
}

/* Source dot in the list panel */
.list-source-dot {
  width:6px; height:6px; border-radius:9999px; flex-shrink:0; margin-right:2px;
}
.list-source-dot.kijiji { background:#B14B30; }
.list-source-dot.condos { background:#1F4D3F; }
.detail-body { padding:12px 16px 20px; }
.detail-price { font-family:var(--font-mono); font-size:22px; font-weight:600; color:var(--ink); margin-bottom:2px; }
.detail-address { font-size:14px; color:var(--ink-700); margin-bottom:4px; }
.detail-meta { font-family:var(--font-mono); font-size:12px; color:var(--ink-500); margin-bottom:16px; }
.detail-divider { height:1px; background:var(--border); margin:14px 0; }
.detail-score-label { font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-500); margin-bottom:8px; }
.score-bar-wrap { margin-bottom:6px; }
.score-bar-label { display:flex; justify-content:space-between; font-size:12px; color:var(--ink-500); font-family:var(--font-mono); margin-bottom:3px; }
.score-bar-track { height:5px; border-radius:9999px; background:var(--paper-dim); overflow:hidden; }
.score-bar-fill { height:100%; border-radius:9999px; transition:width 400ms var(--ease); }

/* ── Loading ── */
#loading { position:absolute; inset:0; z-index:300; background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.spinner { width:36px; height:36px; border:3px solid var(--moss-100); border-top-color:var(--moss); border-radius:9999px; animation:spin 0.7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-family:var(--font-serif); font-style:italic; font-size:17px; color:var(--ink-500); }

/* ── Leaflet overrides ── */
.leaflet-container { font-family:var(--font-sans); background:#e8e0d0; }
.leaflet-tooltip { font-family:var(--font-sans); font-size:12px; font-weight:500; background:var(--ink); color:var(--paper); border:none; border-radius:6px; padding:4px 8px; box-shadow:var(--shadow-2); }
.leaflet-tooltip::before { border-top-color:var(--ink); }

/* ── Toast ── */
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); z-index:9998; background:var(--ink); color:var(--paper); border-radius:8px; padding:10px 18px; font-size:14px; font-weight:500; box-shadow:var(--shadow-3); transition:transform 300ms var(--ease); white-space:nowrap; pointer-events:none; }
#toast.show { transform:translateX(-50%) translateY(0); }

/* ── Modal (used for upgrade / account / welcome) ── */
.modal { position:fixed; inset:0; z-index:9997; background:rgba(11,19,17,0.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity 240ms var(--ease); }
.modal.open { opacity:1; pointer-events:auto; }
.modal[hidden] { display:none; }
.modal-card { background:var(--paper-lift); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-3); width:100%; max-width:560px; max-height:90vh; overflow-y:auto; position:relative; padding:32px; }
.modal-card.compact { max-width:420px; padding:28px; }
.modal-close { position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:9999px; border:none; background:var(--paper-dim); color:var(--ink-500); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--dur-base) var(--ease); }
.modal-close:hover { background:var(--border); color:var(--ink); }
.modal-card h2 { margin:0 0 8px 0; font-size:22px; letter-spacing:-0.01em; color:var(--ink); }
.modal-card .lede { margin:0 0 20px 0; color:var(--ink-500); font-family:var(--font-serif); font-style:italic; font-size:15px; }

/* ── Tier comparison (upgrade modal) ── */
.tier-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0 20px; }
.tier-card { background:var(--paper); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.tier-card.featured { border-color:var(--moss); box-shadow:0 0 0 2px rgba(31,77,63,0.12); position:relative; }
.tier-card.featured::before { content:"Pro"; position:absolute; top:-10px; right:14px; background:var(--moss); color:var(--paper); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; padding:2px 10px; border-radius:9999px; }
.tier-card h3 { margin:0 0 10px 0; font-size:14px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-500); }
.tier-card ul { margin:0; padding:0; list-style:none; font-size:13px; line-height:1.7; color:var(--ink-700); }
.tier-card li::before { content:"✓ "; color:var(--moss); font-weight:600; }
.tier-card.free li::before { content:"· "; color:var(--ink-300); }
.pricing-row { display:flex; gap:10px; margin-top:18px; }
.plan-btn { flex:1; padding:14px; border:1px solid var(--border-strong); border-radius:12px; background:var(--paper); cursor:pointer; transition:all var(--dur-base) var(--ease); text-align:center; font-family:var(--font-sans); }
.plan-btn:hover { border-color:var(--moss); background:var(--paper-lift); }
.plan-btn .price { display:block; font-family:var(--font-mono); font-size:18px; font-weight:600; color:var(--ink); }
.plan-btn .period { display:block; font-size:12px; color:var(--ink-500); margin-top:2px; }
.plan-btn.recommended { border-color:var(--moss); background:rgba(31,77,63,0.05); }
.plan-btn.recommended .badge { display:inline-block; margin-top:6px; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--moss); font-weight:600; }

/* (Free-tier "locked slider + Make priority" CSS removed — the weights panel
   now uses presets + sum-locked sliders for both tiers. Persistence is the
   only gate, enforced at PUT /preferences with 402.) */
.weight-row { position:relative; }

/* ── Pro enrolment modal (between plan-pick and Stripe) ── */
.modal-card.enrol { max-width:620px; padding:28px 32px 26px; }
.enrol-step { display:none; }
.enrol-step.active { display:block; }
.enrol-progress { display:flex; align-items:center; gap:10px; margin-bottom:18px; font-size:12px; color:var(--ink-500); font-family:var(--font-mono); letter-spacing:0.04em; }
.enrol-progress-track { flex:1; height:4px; border-radius:9999px; background:var(--border); overflow:hidden; }
.enrol-progress-fill { height:100%; background:var(--moss); border-radius:9999px; transition:width 320ms var(--ease); }
.enrol-step h2 { margin:0 0 6px 0; font-size:20px; }
.enrol-step .lede { margin:0 0 18px 0; }
.enrol-field { margin-bottom:14px; }
.enrol-field-label { display:block; font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-500); margin-bottom:6px; }
.enrol-field-help { display:block; font-size:12px; color:var(--ink-500); font-family:var(--font-serif); font-style:italic; margin-top:4px; }
.enrol-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.enrol-row.cols-2 { grid-template-columns:1fr 1fr; }
.enrol-num { width:100%; height:42px; padding:0 12px; border-radius:8px; border:1px solid var(--border-strong); background:var(--paper); font-family:var(--font-sans); font-size:15px; color:var(--ink); outline:none; text-align:center; }
.enrol-num:focus { border-color:var(--moss); box-shadow:0 0 0 3px rgba(31,77,63,.18); }
.enrol-select { width:100%; height:42px; padding:0 12px; border-radius:8px; border:1px solid var(--border-strong); background:var(--paper); font-family:var(--font-sans); font-size:14px; color:var(--ink); outline:none; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23698077' stroke-width='1.5' fill='none'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.enrol-date { width:100%; height:42px; padding:0 12px; border-radius:8px; border:1px solid var(--border-strong); background:var(--paper); font-family:var(--font-sans); font-size:14px; color:var(--ink); outline:none; }
.enrol-question { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.enrol-question:last-child { border-bottom:none; padding-bottom:4px; }
.enrol-question-prompt { display:block; font-size:14px; font-weight:500; color:var(--ink); margin-bottom:4px; }
.enrol-question-help { display:block; font-size:12px; color:var(--ink-500); font-family:var(--font-serif); font-style:italic; margin-bottom:10px; }
.enrol-options { display:flex; flex-wrap:wrap; gap:8px; }
.enrol-option { padding:10px 14px; border:1px solid var(--border-strong); border-radius:9999px; background:var(--paper); font-family:var(--font-sans); font-size:13px; color:var(--ink-700); cursor:pointer; transition:all var(--dur-base) var(--ease); }
.enrol-option:hover { border-color:var(--moss); color:var(--ink); }
.enrol-option.selected { background:var(--moss); color:var(--paper); border-color:var(--moss); }
.enrol-checkbox-row { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid var(--border); border-radius:12px; background:var(--paper); cursor:pointer; transition:border-color var(--dur-base) var(--ease); }
.enrol-checkbox-row:hover { border-color:var(--moss); }
.enrol-checkbox-row input { margin-top:3px; width:16px; height:16px; accent-color:var(--moss); flex-shrink:0; cursor:pointer; }
.enrol-checkbox-text { font-size:14px; color:var(--ink-700); line-height:1.5; }
.enrol-checkbox-text strong { color:var(--ink); }
.enrol-skip { display:block; margin:14px auto 0; background:none; border:none; color:var(--ink-500); font-size:12px; font-family:var(--font-sans); text-decoration:underline; cursor:pointer; padding:6px 8px; }
.enrol-skip:hover { color:var(--moss); }
.enrol-actions { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:22px; }
.enrol-actions .spacer { flex:1; }
.enrol-review-list { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; margin-bottom:18px; }
.enrol-review-list dt { color:var(--ink-500); font-weight:500; }
.enrol-review-list dd { margin:0; color:var(--ink); }
.enrol-weights-grid { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; max-height:240px; overflow-y:auto; padding-right:4px; }
.enrol-weight-row { display:grid; grid-template-columns:90px 1fr 44px; gap:10px; align-items:center; font-size:12px; }
.enrol-weight-row .name { color:var(--ink-500); font-family:var(--font-mono); text-transform:capitalize; }
.enrol-weight-row .pct { font-family:var(--font-mono); color:var(--ink); text-align:right; }
.enrol-weight-track { position:relative; height:6px; background:var(--paper-dim); border-radius:9999px; overflow:hidden; }
.enrol-weight-default, .enrol-weight-derived { position:absolute; top:0; bottom:0; border-radius:9999px; }
.enrol-weight-default { background:var(--border); opacity:0.6; }
.enrol-weight-derived { background:var(--moss); }
.enrol-error { color:var(--brick); font-size:13px; margin-top:10px; }

@media (max-width: 720px) {
  .modal-card.enrol { padding:22px 20px 20px; }
  .enrol-row, .enrol-row.cols-2 { grid-template-columns:1fr; }
  .enrol-weight-row { grid-template-columns:80px 1fr 40px; }
}

/* ── Welcome carousel ── */
.welcome-step { display:none; }
.welcome-step.active { display:block; }
.welcome-illus { width:100%; height:140px; border-radius:12px; background:var(--paper); border:1px solid var(--border); margin-bottom:16px; display:flex; align-items:center; justify-content:center; font-size:48px; color:var(--moss); }
.welcome-dots { display:flex; justify-content:center; gap:6px; margin:18px 0 14px; }
.welcome-dot { width:8px; height:8px; border-radius:9999px; background:var(--border); transition:background var(--dur-base) var(--ease); }
.welcome-dot.active { background:var(--moss); }
.welcome-actions { display:flex; gap:10px; justify-content:flex-end; }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 16px; border-radius:8px; border:1px solid var(--border-strong); background:transparent; font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--ink-700); cursor:pointer; transition:all var(--dur-base) var(--ease); }
.btn-secondary:hover { background:var(--paper-dim); }
.btn-primary.compact { width:auto; height:38px; padding:0 18px; margin-top:0; }

/* ── Account modal ── */
.account-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); }
.account-row:last-child { border-bottom:none; }
.account-label { font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-500); }
.account-value { font-family:var(--font-mono); font-size:14px; color:var(--ink); }
.tier-badge { display:inline-block; padding:3px 10px; border-radius:9999px; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; }
.tier-badge.free { background:var(--paper-dim); color:var(--ink-700); }
.tier-badge.pro  { background:var(--moss); color:var(--paper); }

/* ── Saved-tab paywall (free users) ── */
.saved-paywall { padding:32px 20px; text-align:center; }
.saved-paywall h4 { margin:0 0 6px 0; font-size:15px; color:var(--ink); }
.saved-paywall p  { margin:0 0 16px 0; font-family:var(--font-serif); font-style:italic; color:var(--ink-500); font-size:14px; }
.saved-paywall .btn-primary.compact { display:inline-flex; width:auto; }

/* ── Export button (saved tab header) ── */
.list-header-actions { display:flex; gap:8px; align-items:center; }
.export-btn { height:28px; padding:0 12px; border-radius:8px; border:1px solid var(--border-strong); background:transparent; font-size:12px; color:var(--ink-700); cursor:pointer; transition:all var(--dur-base) var(--ease); display:inline-flex; align-items:center; justify-content:center; gap:5px; line-height:1; }
.export-btn:hover { background:var(--paper-dim); }
.export-btn[disabled] { opacity:0.4; cursor:not-allowed; }

/* ── Filter FAB (mobile only) ── */
#filter-fab {
  position: absolute; top: 12px; right: 12px;
  z-index: 401;
  display: none;
  align-items: center; gap: 6px;
  height: 38px; padding: 0 14px;
  border-radius: 9999px;
  background: rgba(240,232,210,0.96);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
#filter-fab .filter-fab-icon {
  font-size: 11px; line-height: 1;
  transform: scaleY(0.85);
  color: var(--moss);
}
#filter-fab.has-filters .filter-fab-icon { color: var(--paper); }
#filter-fab .filter-fab-count {
  display: none;
  background: var(--moss); color: var(--paper);
  border-radius: 9999px; padding: 1px 7px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}
#filter-fab.has-filters .filter-fab-count { display: inline-block; }
#filter-fab.has-filters { background: var(--moss); color: var(--paper); border-color: var(--moss); }
#filter-fab.has-filters .filter-fab-count { background: var(--paper); color: var(--moss); }

/* ── Legend toggle button (mobile only) ── */
#legend-toggle {
  position: absolute; bottom: 16px; left: 16px;
  z-index: 401;
  display: none;
  width: 40px; height: 40px;
  border-radius: 9999px;
  background: rgba(240,232,210,0.96);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  color: var(--ink-700);
  align-items: center; justify-content: center;
}

/* ── Bottom-sheet primitive (used by filter / weights / detail on mobile) ── */
.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(11,19,17,0.45);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease);
  z-index: 1099;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet-handle {
  display: none;
  width: 40px; height: 4px; border-radius: 9999px;
  background: var(--border-strong);
  margin: 8px auto 4px;
  flex-shrink: 0;
}
.sheet-header {
  display: none;
  align-items: center; justify-content: space-between;
  padding: 4px 18px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sheet-header-title {
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-500);
}
.sheet-close {
  width: 32px; height: 32px; border-radius: 9999px;
  background: var(--paper-dim); border: none;
  cursor: pointer; font-size: 14px; color: var(--ink-500);
  display: flex; align-items: center; justify-content: center;
}
.sheet-close:hover { background: var(--border); }
.sheet-footer {
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--paper-lift);
  flex-shrink: 0;
  gap: 10px;
}
.sheet-footer .btn-secondary {
  flex: 0 0 auto; height: 44px; padding: 0 18px;
  background: transparent; color: var(--ink-700);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.sheet-footer .btn-primary {
  flex: 1; height: 44px; margin-top: 0; font-size: 15px;
}

/* ── Filter sheet body (mobile) ── */
.filter-sheet-body { display: none; }
.filter-sheet-body .row {
  display: grid; gap: 8px;
  margin-bottom: 14px;
}
.filter-sheet-body .row-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-500);
}
.filter-sheet-body .price-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.filter-sheet-body .triple-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.filter-sheet-body .filter-price-sep { color: var(--ink-300); text-align: center; }
.filter-sheet-body input[type=number] {
  width: 100%; height: 40px; padding: 0 12px;
  border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--paper); font-family: var(--font-mono);
  font-size: 14px; color: var(--ink); outline: none;
}
.filter-sheet-body input[type=number]:focus { border-color: var(--moss); }
.filter-sheet-body .hood-modes { display: flex; gap: 8px; }
.filter-sheet-body .hood-modes .hood-mode-btn {
  flex: 1; height: 40px; padding: 0 12px;
  border: 1.5px solid var(--border-strong); border-radius: 8px;
  background: transparent; color: var(--ink-500);
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
}
.filter-sheet-body .hood-modes .hood-mode-btn.active {
  background: var(--moss); color: var(--paper); border-color: var(--moss);
}

/* ── Tablet (769–1024px) — lighter touch ── */
@media (max-width: 1024px) and (min-width: 769px) {
  #weights-panel { width: 320px; max-height: calc(100vh - 96px); }
  #detail-panel { width: 320px; right: auto; left: 16px; }
  #filter-bar {
    flex-wrap: wrap;
    max-width: calc(100vw - 32px);
    border-radius: 18px;
    padding: 8px 14px;
    justify-content: center;
  }
  .header-stats { display: none; }
  /* Move band-bar to bottom so it doesn't collide with the wrapped filter pill */
  #band-bar { top: auto; bottom: 14px; }
  /* Lift legend so it doesn't fight the band-bar at bottom-left */
  .legend { bottom: 64px; }
}

/* ── Phone landscape / tablet portrait (≤768px) ── */
@media (max-width: 768px) {
  :root { --list-w: 100vw; }

  /* Header tightening */
  header { padding: 0 12px; gap: 8px; }
  .header-howlink { display: none; }
  .header-stats { display: none; }
  .btn-icon { padding: 0 10px; position: relative; min-width: 38px; justify-content: center; }
  .btn-icon span.label { display: none; }
  /* Sign in / out are critical auth shortcuts — keep their labels visible
     instead of substituting a glyph. They're short enough to fit. */
  #signin-btn .label, #signout-btn .label { display: inline; }
  #signin-btn, #signout-btn { padding: 0 12px; }
  .btn-icon .saved-count {
    position: absolute; top: -4px; right: -4px;
    padding: 0 5px; min-width: 16px; height: 16px;
    line-height: 16px; font-size: 10px;
  }

  /* Hide desktop filter bar; show FAB instead */
  #filter-bar { display: none; }
  #filter-fab { display: inline-flex; }

  /* When filter bar is converted to sheet (via .as-sheet), restyle */
  #filter-bar.as-sheet {
    display: flex;
    position: fixed; inset: auto 0 0 0;
    transform: translateX(0) translateY(100%);
    left: 0; top: auto; right: 0;
    width: 100%; max-width: none;
    flex-direction: column; align-items: stretch;
    flex-wrap: nowrap;
    border-radius: 16px 16px 0 0;
    border: 1px solid var(--border);
    background: var(--paper-lift);
    backdrop-filter: none;
    box-shadow: var(--shadow-3);
    padding: 0;
    z-index: 1100;
    max-height: 85vh;
    transition: transform 280ms var(--ease);
  }
  #filter-bar.as-sheet.open { transform: translateY(0); }
  #filter-bar.as-sheet .sheet-handle,
  #filter-bar.as-sheet .sheet-header,
  #filter-bar.as-sheet .sheet-footer,
  #filter-bar.as-sheet .filter-sheet-body { display: flex; }
  #filter-bar.as-sheet .filter-sheet-body { flex-direction: column; padding: 16px; overflow-y: auto; flex: 1; }
  /* Hide the original inline pieces */
  #filter-bar.as-sheet > .filter-label,
  #filter-bar.as-sheet > .filter-price-wrap,
  #filter-bar.as-sheet > .filter-divider,
  #filter-bar.as-sheet > .filter-price-input,
  #filter-bar.as-sheet > .hood-mode-btn,
  #filter-bar.as-sheet > .filter-active-pill { display: none; }

  /* Score band-bar — horizontally scrollable strip below header */
  #band-bar {
    top: auto; bottom: 14px;
    left: 50%; transform: translateX(-50%);
    max-width: calc(100vw - 100px);
    border-radius: 9999px;
    padding: 4px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  #band-bar::-webkit-scrollbar { display: none; }
  .band-btn { flex-shrink: 0; height: 28px; padding: 0 9px; font-size: 11px; }

  /* Weights panel → bottom sheet */
  #weights-panel {
    position: fixed; inset: auto 0 0 0;
    width: 100%; max-width: none; right: 0; bottom: 0;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 280ms var(--ease);
    padding: 0;
    z-index: 1100;
    display: flex; flex-direction: column;
  }
  #weights-panel.open { transform: translateY(0); }
  #weights-panel .sheet-handle,
  #weights-panel .sheet-header { display: flex; }
  #weights-panel .weights-title { display: none; }
  #weights-panel .weight-group:first-of-type { padding-top: 16px; }
  #weights-panel .weight-group { padding: 0 18px; }
  /* Wrap content; sticky Save at the bottom */
  #weights-panel .weights-apply,
  #weights-panel .weights-save {
    position: sticky; bottom: 0;
    margin: 12px 0 0;
    height: 48px; font-size: 14px; border-radius: 0;
    box-shadow: 0 -8px 14px rgba(11,19,17,0.10);
  }
  #weights-panel .weights-hint { padding: 0 18px 14px; }
  #weights-panel .preset-section { padding: 16px 18px 0; }
  /* Add a scroll wrapper feel — let the panel itself scroll, but pad bottom so apply doesn't cover last slider */
  #weights-panel { overflow-y: auto; }
  #weights-panel .weight-group:last-of-type { padding-bottom: 4px; }

  /* Detail panel → bottom sheet */
  #detail-panel {
    position: fixed; inset: auto 0 0 0;
    width: 100%; max-width: none; left: 0; right: 0; bottom: 0;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 280ms var(--ease);
    z-index: 1100;
    display: flex; flex-direction: column;
    overflow: hidden;
  }
  #detail-panel.open { transform: translateY(0); }
  #detail-panel .sheet-handle { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
  #detail-panel .detail-photo,
  #detail-panel .detail-photo-placeholder { height: 140px; }
  #detail-panel .detail-body { overflow-y: auto; flex: 1; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

  /* Legend → collapse to toggle button + popover */
  .legend {
    display: none;
    position: absolute; bottom: 64px; left: 16px;
    z-index: 401;
  }
  .legend.open { display: block; }
  #legend-toggle { display: flex; }

  /* List panel — full-screen with backdrop */
  #list-panel {
    position: absolute; top: 0; left: 0; bottom: 0;
    z-index: 600;
    box-shadow: var(--shadow-3);
  }

  /* Hide floating panels when list is open (mobile-only mutex) */
  body.list-open #weights-panel,
  body.list-open #detail-panel,
  body.list-open #filter-fab,
  body.list-open #legend-toggle,
  body.list-open #band-bar { visibility: hidden; }

  /* Modal tightening */
  .modal { padding: 12px; }
  .modal-card { padding: 22px 20px; border-radius: 14px; max-height: 92vh; }
  .modal-card.compact { padding: 22px 20px; }
  .modal-card h2 { font-size: 19px; }
  .modal-card .lede { font-size: 14px; }
  .tier-compare { grid-template-columns: 1fr; gap: 10px; }
  .pricing-row { flex-direction: column; gap: 8px; }
  .plan-btn { padding: 12px 14px; }
  .welcome-illus { height: 96px; font-size: 36px; margin-bottom: 12px; }
  .welcome-actions .btn-primary,
  .welcome-actions .btn-secondary { height: 42px; }
}

/* ── Small phone (≤480px) ── */
@media (max-width: 480px) {
  header { padding: 0 8px; gap: 5px; }
  .header-logo { gap: 0; }
  .header-wordmark { display: none; }
  .btn-icon { padding: 0 7px; height: 34px; min-width: 34px; font-size: 14px; }
  .btn-icon.go-pro { padding: 0 7px; }
  .btn-icon.go-pro .label { display: none; }

  #filter-fab { padding: 0 12px; height: 36px; font-size: 12px; }

  /* Login card */
  .login-card { padding: 36px 24px 28px; max-width: none; margin: 0 4px; }
  .login-tagline { font-size: 14px; margin-bottom: 22px; }

  /* Modals — even tighter */
  .modal { padding: 8px; }
  .modal-card { padding: 20px 16px; border-radius: 12px; }
  .modal-card.compact { padding: 18px 16px; }
}

/* ── Touch-target overrides (any pointer that isn't a fine mouse) ── */
@media (pointer: coarse) {
  .btn-icon { min-height: 40px; }
  .heart-btn { width: 36px; height: 36px; }
  .detail-close, .detail-heart { width: 36px; height: 36px; }
  .list-close { width: 32px; height: 32px; }
  .list-tab { height: 36px; }
  .filter-price-input { height: 32px; }
  input[type=range] { height: 6px; }
  input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; }
  input[type=range]::-moz-range-thumb { width: 22px; height: 22px; }
  .modal-close, .sheet-close { width: 36px; height: 36px; }
}