/* PoolSpotter app styles. Dark values here, light theme below; brand colors come from poolspotter.com. */
:root {
  /* brand */
  --brand-950: #050D11;
  --brand-900: #022846;
  --brand-700: #377287;
  --brand-600: #43819A;
  --brand-lime: #50C9DE;   /* the aqua accent (the variable keeps its first name) */
  --brand-tint: rgba(80, 201, 222, .14);   /* selected rows, pressed choices */

  /* surfaces (deep blue-black, lifting toward the front) */
  --bg: #0D1215;
  --panel: #14191D;
  --panel-2: #1B2126;
  --line: #232B31;
  --line-strong: #323B42;
  --line-hover: #445058;
  --hover: #1A2025;
  --text: #EEF0F1;
  --text-2: #C5CBCF;
  --text-3: #989FA3;


  /* score */
  --s-high: #50C9DE;
  --s-mid: #3EA0C3;
  --s-low: #2B5467; /* below 70: deep and muted */

  --amber: #F2C76A;
  --amber-bg: rgba(242, 199, 106, .1);
  --amber-line: rgba(242, 199, 106, .3);
  --ok: #75C4DC;
  --ok-bg: rgba(117, 196, 220, .1);
  --ok-line: rgba(117, 196, 220, .35);
  --bad: #F08A7D;
  --bad-bg: rgba(240, 138, 125, .1);
  --bad-line: rgba(240, 138, 125, .35);
  --danger: #E4655B;
  --danger-solid: #C8413A; /* deep enough for white text on the solid button */
  --danger-bg: rgba(228, 101, 91, .14);
  --chip-bg: rgba(255, 255, 255, .04);
  --map-bg: #191E21;
  --marker-outline: rgba(255, 255, 255, .7);
  --focus: 0 0 0 3px rgba(80, 201, 222, .3);
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* shapes: soft corners on panels, pills on controls */
  --r: 6px;
  --r-sm: 4px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); /* a hairline of depth only; panels rely on their borders */
}

/* Light theme (the sun/moon toggle in the top bar; theme.js keeps the choice). */
:root[data-theme="light"] {
  --brand-tint: #E7F3F6;
  --bg: #F5F4EF;
  --panel: #FCFBF7;
  --panel-2: #F8F7F2;
  --line: #E4E2DA;
  --line-strong: #CFCCC0;
  --line-hover: #BDB9AB;
  --hover: #F7F6F1;
  --text: #161F26;
  --text-2: #4C5459;
  --text-3: #666B6E; /* 4.7:1 or better on every light surface (WCAG AA for small text) */
  --s-high: #165983;
  --s-mid: #44B2C8;
  --s-low: #ABD6E2; /* below 70: soft pale blue */
  --amber: #7A5A12;
  --amber-bg: #FFF9E8;
  --amber-line: #EAD9A8;
  --ok: #245B72;
  --ok-bg: #EEF7F9;
  --ok-line: #C3DCE3;
  --bad: #A13D22;
  --bad-bg: #FCF3F0;
  --bad-line: #EDCFC4;
  --danger: #B3261E;
  --danger-solid: #B3261E;
  --danger-bg: #FCEBEA;
  --chip-bg: #F4F3EE;
  --map-bg: #EDEBE3;
  --marker-outline: #fff;
  --focus: 0 0 0 3px rgba(55, 114, 135, .25);
  --shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
:root[data-theme="light"] body { color-scheme: light; }
:root[data-theme="light"] a:not(.btn) { color: var(--brand-700); } /* links only: buttons keep their own colors */
:root[data-theme="light"] .btn-link, :root[data-theme="light"] .leg button, :root[data-theme="light"] .stop-side a { color: var(--brand-700); }
:root[data-theme="light"] .input:focus, :root[data-theme="light"] .route-name:focus { border-color: var(--brand-700); }
:root[data-theme="light"] .input, :root[data-theme="light"] select.input, :root[data-theme="light"] .seg, :root[data-theme="light"] .stepper, :root[data-theme="light"] .status-grid button { background-color: var(--panel); }
:root[data-theme="light"] .status-grid button[aria-pressed="true"] { border-color: var(--brand-700); color: var(--brand-900); }
:root[data-theme="light"] .lead-row.is-active { background: var(--brand-tint); }
:root[data-theme="light"] .signal::before { background: var(--brand-700); }
:root[data-theme="light"] .info:hover, :root[data-theme="light"] .info:focus { border-color: var(--brand-700); color: var(--brand-700); }
:root[data-theme="light"] .score.low { color: #1B3843; }
:root[data-theme="light"] .toast { background: var(--brand-950); color: #fff; }
:root[data-theme="light"] .pin-stop, :root[data-theme="light"] .stop-num { background: var(--brand-900); }
:root[data-theme="light"] .pin-stop.is-active { background: var(--brand-700); color: #fff; }
:root[data-theme="light"] .pin-handle { border-color: var(--brand-700); }
:root[data-theme="light"] .base-tiles { filter: sepia(.12) saturate(1.05); }
:root[data-theme="light"] .street-tiles { filter: grayscale(.6) sepia(.12) brightness(1.05) contrast(.94); }
:root[data-theme="light"] .legend, :root[data-theme="light"] .busy { background: rgba(255,255,255,.95); }
:root[data-theme="light"] .leaflet-control-attribution { background: rgba(255,255,255,.85) !important; }
:root[data-theme="light"] .leaflet-control-scale-line { background: rgba(255,255,255,.8) !important; }
:root[data-theme="light"] .leaflet-tooltip { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
:root[data-theme="light"] .tooltip { border-color: var(--brand-950); }
:root[data-theme="light"] .crew-progress .bar span { background: var(--brand-700); }

/* the sun / moon switch */
.theme-toggle {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: rgba(255,255,255,.85); cursor: pointer;
}
.theme-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
.theme-toggle.on-page { border-color: var(--line-strong); color: var(--text-2); }
.theme-toggle.on-page:hover { background: var(--hover); color: var(--text); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.43;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--brand-lime); }
.muted { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--panel-2);
  font-size: 13.5px; font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--hover); border-color: var(--line-hover); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn-dark { background: transparent; border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.9); }
.btn-dark:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }
.btn-sm { height: 28px; padding: 0 12px; font-size: 13px; }
.btn-upgrade { background: transparent; border-color: var(--brand-lime); color: var(--brand-lime); font-weight: 600; }
.btn-upgrade:hover { background: rgba(80,201,222,.14); border-color: var(--brand-lime); color: #fff; }
.account-upgrade { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.account-upgrade .note { margin: 0; }
@media (max-width: 760px) { #upgradeLink { display: none !important; } .account-upgrade { flex-direction: column; align-items: stretch; } }
.btn-lg { height: 42px; font-size: 14px; font-weight: 600; }
.btn-block { width: 100%; }
.btn-link { background: none; border: 0; padding: 0; font-size: 13px; font-weight: 500; color: var(--brand-lime); }
.btn-link:hover { text-decoration: underline; }
.btn-danger { color: var(--danger); }
.btn svg { width: 15px; height: 15px; flex: none; }

.input {
  height: 36px; padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--bg);
  font: inherit; font-size: 14px; color: var(--text);
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; border-color: var(--brand-lime); box-shadow: var(--focus); }
.input-sm { height: 30px; font-size: 13px; padding: 0 10px; }
select.input { padding-right: 28px; appearance: none; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237F868B' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center; }
select.input option { background: var(--panel-2); color: var(--text); }
.label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }

.seg { display: flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg); }
.seg button {
  flex: 1; height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: transparent;
  font-size: 13px; color: var(--text-2); white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--brand-700); color: #fff; font-weight: 500; }
.seg button:focus-visible { outline: none; box-shadow: var(--focus); }

.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--brand-lime); cursor: pointer; }

.stepper { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; background: var(--bg); }
.stepper button { width: 32px; height: 30px; border: 0; background: var(--panel-2); color: var(--text-2); font-size: 16px; }
.stepper button:hover { background: var(--hover); color: var(--text); }
.stepper input {
  width: 56px; height: 30px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: transparent; color: var(--text);
  text-align: center; font: inherit; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; background: var(--brand-tint); }

/* ---------- sign in ---------- */
.login { min-height: 100%; display: grid; grid-template-columns: minmax(320px, 40%) 1fr; background: var(--bg); }
.login-side {
  display: flex; flex-direction: column; padding: 40px 48px;
  background: var(--brand-900); color: rgba(255,255,255,.85);
}
.login-side .logo { width: 240px; height: auto; }
.login-tagline { margin-top: auto; max-width: 340px; font-size: 20px; line-height: 1.4; font-weight: 500; color: #fff; }
.login-legal { margin-top: 32px; font-size: 12.5px; color: rgba(255,255,255,.55); }
.login-main { display: grid; place-items: center; padding: 40px 24px; }
.login-form { width: 100%; max-width: 340px; display: flex; flex-direction: column; }
.login-form h1 { font-size: 22px; font-weight: 600; margin-bottom: 24px; letter-spacing: -0.01em; }
.login-form .input { margin-bottom: 16px; }
.login-form .btn { margin-top: 4px; }
.form-error { margin: -4px 0 12px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--danger-bg); color: var(--danger); font-size: 13px; }
.form-intro { margin: -12px 0 20px; font-size: 14px; color: var(--text-2); }
.form-intro + .form-intro { margin-top: -8px; }
.form-intro.muted { font-size: 13px; color: var(--text-3); }
.label-row { display: flex; align-items: baseline; justify-content: space-between; }
.label-row .btn-link { font-size: 12.5px; }
.form-back { align-self: center; margin-top: 16px; }
.login-form > .btn + .btn-link { margin-top: 16px; }

/* ---------- app shell ---------- */
.app { height: 100%; display: flex; flex-direction: column; }
.topbar {
  flex: none; height: 52px; display: flex; align-items: center; gap: 16px;
  padding: 0 16px; background: var(--brand-950); color: #fff; border-bottom: 1px solid rgba(80,201,222,.18);
}
.topbar .logo { height: 28px; width: auto; flex: none; }
.logo-pic { display: contents; } /* phones get the round badge instead of the full wordmark */
.market { flex: none; display: flex; align-items: center; gap: 8px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.15); }
.market label { font-size: 12px; color: rgba(255,255,255,.6); }
.market select {
  width: 210px; text-overflow: ellipsis;
  height: 30px; padding: 0 30px 0 12px; border-radius: var(--r-pill); appearance: none;
  border: 1px solid rgba(255,255,255,.2); color: #fff; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;
}
.market select:focus { outline: none; border-color: var(--brand-lime); }
.market option { color: var(--text); background: var(--panel-2); font-weight: 400; }
/* State headings between the markets (the list is grouped by state). Without an explicit color
   they inherit the select's white text on the list's white background and look like empty boxes. */
.market optgroup { color: var(--brand-lime); background: var(--brand-950); font-weight: 700; font-style: normal; }
:root[data-theme="light"] .market optgroup { color: var(--brand-900); background: #DFEDF1; }
.tabs { display: flex; flex: none; align-self: stretch; gap: 4px; }
.tabs button {
  position: relative; padding: 0 9px; border: 0; background: none; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,.65);
}
.tabs button:hover { color: #fff; }
.tabs button[aria-current="page"] { color: #fff; }
.tabs button[aria-current="page"]::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--brand-lime); }
.tab-count { margin-left: 4px; padding: 1px 7px; border-radius: var(--r-pill); background: rgba(255,255,255,.14); font-size: 11.5px; }
.tab-count:empty { display: none; }
.topbar-right { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.topbar-right > * { flex: none; }
/* Long company names are cut with an ellipsis so the section tabs never wrap. */
.topbar-right > .user { flex: 0 1 auto; min-width: 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user { font-size: 13px; color: rgba(255,255,255,.7); }
.demo-badge { padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid rgba(242,199,106,.5); color: var(--amber); font-size: 12px; font-weight: 500; }

/* ---------- free trial: the bar with the big Upgrade button, and locked paid-plan controls ---------- */
.trial-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; background: var(--brand-tint); border-bottom: 1px solid var(--line); }
.trial-bar p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.trial-bar b { color: var(--text); }
.btn-trial, :root[data-theme="light"] a.btn-trial { height: 40px; padding: 0 22px; border-color: transparent; background: var(--brand-lime); color: #161F26; font-family: "Archivo", var(--font); font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.btn-trial:hover { background: #72D4E5; border-color: transparent; color: #161F26; }
.btn-trial::after { content: " →"; }
.type-row.is-locked { cursor: not-allowed; color: var(--text-3); }
.type-row.is-locked .type-shape { opacity: .45; }
.lock-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-700); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.menu button.is-locked { color: var(--text-3); }
[data-locked]::after { content: attr(data-locked); display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-700); font-size: 11px; font-weight: 600; vertical-align: 1px; }
@media (max-width: 760px) {
  .trial-bar { flex-direction: column; align-items: stretch; text-align: center; padding: 10px 14px; }
  .btn-trial { justify-content: center; }
}

.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr) 380px; }

/* ---------- filters column ---------- */
.filters { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.filters-toggle { display: none; }
.filters-body { flex: 1; overflow-y: auto; overflow-x: hidden; }
.group { padding: 16px; border-bottom: 1px solid var(--line); }
.group-head { display: flex; align-items: baseline; justify-content: space-between; }
.group-title { margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row + .row, .row + .check, .check + .row { margin-top: 12px; }
.row > label, .row-label { font-size: 13px; color: var(--text-2); }
.row .input { min-width: 140px; }
.row-stack { flex-direction: column; align-items: stretch; gap: 6px; }
.pool-size-note { margin-top: 6px; }
.pool-size-note + .check { margin-top: 12px; }
.note { margin-top: 8px; font-size: 12.5px; color: var(--text-3); }
.weather { margin-top: 14px; }
.weather-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.weather-src { font-size: 11px; font-weight: 400; color: var(--text-3); }
.weather-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.weather-days li { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--chip-bg); font-size: 12px; line-height: 1.3; cursor: default; }
.weather-days .wd { color: var(--text-3); }
.weather-days .wt { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.weather-days .wr { color: var(--text-3); font-variant-numeric: tabular-nums; }
.weather-days li.wet { border-color: var(--line-strong); }
.weather-days li.wet .wr { color: var(--text); font-weight: 600; }
.weather-pool { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.weather-pool li { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.weather-pool b { color: var(--text); font-weight: 600; }
.note .btn-link { font-size: 12.5px; }
.filters-foot { flex: none; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel); }

.radius { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin-top: 10px; }
.radius input[type="range"] { width: 100%; accent-color: var(--brand-lime); }
.input-unit { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-3); }
.input-unit .input { width: 62px; min-width: 0; text-align: right; }

.checklist { display: flex; flex-direction: column; }
.type-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; cursor: pointer; }
.type-row .type-label { flex: 1; }
.type-shape { display: inline-grid; place-items: center; width: 16px; flex: none; }
.type-shape .shape { fill: var(--text-2); }
.tag .shape { fill: currentColor; opacity: .75; margin-right: 4px; vertical-align: -1px; }
.legend-note { color: var(--text-3); }
.type-row .type-count { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ---------- map ---------- */
.map-wrap { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: var(--map-bg); }
.leaflet-container { font-family: var(--font); background: var(--map-bg); }
.base-tiles { filter: saturate(.85) brightness(.92); }
.street-tiles { filter: invert(.93) hue-rotate(180deg) saturate(.45) brightness(.82) contrast(.92); } /* close zoom: turn the street map dark */
#map.is-satellite .street-tiles { filter: none; }
.leaflet-bar { border: 1px solid var(--line-strong) !important; border-radius: var(--r-pill) !important; overflow: hidden; box-shadow: var(--shadow) !important; }
.leaflet-bar a { background: var(--panel-2) !important; color: var(--text) !important; border-bottom: 1px solid var(--line) !important; }
.leaflet-bar a:hover { background: var(--hover) !important; }
.leaflet-bar a:last-child { border-bottom: 0 !important; }
.leaflet-control-attribution { background: rgba(20,25,29,.85) !important; color: var(--text-3) !important; border-radius: var(--r-sm) 0 0 0; }
.leaflet-control-attribution a { color: var(--text-2) !important; }
.leaflet-control-scale-line { background: rgba(20,25,29,.8) !important; color: var(--text-2) !important; border-color: var(--line-strong) !important; }
.leaflet-tooltip { background: var(--panel-2) !important; color: var(--text) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--r-sm) !important; box-shadow: var(--shadow); }
.leaflet-tooltip-top::before { border-top-color: var(--line-strong) !important; }
.leaflet-tooltip-bottom::before { border-bottom-color: var(--line-strong) !important; }
.leaflet-tooltip-left::before { border-left-color: var(--line-strong) !important; }
.leaflet-tooltip-right::before { border-right-color: var(--line-strong) !important; }
.basemap {
  position: absolute; top: 10px; right: 52px; z-index: 500; display: flex; padding: 3px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--panel-2); box-shadow: var(--shadow);
}
.basemap button { height: 26px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.basemap button:hover { color: var(--text); }
.basemap button[aria-pressed="true"] { background: var(--brand-700); color: #fff; }
#map.is-satellite .leaflet-control-scale-line { background: rgba(20,25,29,.8); }
.legend {
  position: absolute; left: 10px; bottom: 26px; z-index: 500;
  display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(20,25,29,.92); border: 1px solid var(--line-strong); font-size: 12px; color: var(--text-2);
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-title { font-weight: 600; color: var(--text); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.sw.s-high { background: var(--s-high); }
.sw.s-mid { background: var(--s-mid); }
.sw.s-low { background: var(--s-low); }
.map-banner {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 600;
  display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 16px; border-radius: var(--r-pill);
  background: var(--brand-950); border: 1px solid rgba(80,201,222,.3); color: #fff; font-size: 13px; box-shadow: var(--shadow);
}
.map-banner button { height: 26px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.25); background: none; color: #fff; font-size: 12.5px; }
.map-banner button:hover { background: rgba(255,255,255,.1); }
.app.picking #map { cursor: crosshair; touch-action: none; }
.busy {
  position: absolute; top: 10px; right: 56px; z-index: 600; display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill); background: rgba(27,33,38,.96); border: 1px solid var(--line-strong); font-size: 12.5px; color: var(--text-2);
}
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--brand-lime); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* growth badge next to the market picker */
.growth-pill {
  height: 24px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.28);
  background: transparent; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.85); white-space: nowrap;
}
.growth-pill.fast, .growth-pill.growing { color: var(--brand-lime); border-color: rgba(80,201,222,.55); }
.growth-pill.shrinking { color: #F08A7D; border-color: rgba(240,138,125,.45); }
.growth-pill:hover { background: rgba(255,255,255,.08); }
@media (max-width: 1100px) { .growth-pill { display: none; } }

/* home base (Settings) */
.setting-row.setting-row-stack { flex-direction: column; align-items: stretch; gap: 10px; } /* outranks .setting-row, defined further down */
.setting-row-stack .setting-label { max-width: none; }
.home-base { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; width: 100%; max-width: 560px; }
.home-base .input { min-width: 0; }
.home-base-note { grid-column: 1 / -1; margin-top: 0; }

/* drive-time area */
.drive { margin-top: 10px; }
.drive-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* heat map */
.heat-toggle {
  position: absolute; top: 10px; right: 212px; z-index: 500; height: 32px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--panel-2);
  font-size: 12.5px; font-weight: 500; color: var(--text-2); box-shadow: var(--shadow);
}
.heat-toggle:hover { color: var(--text); }
.heat-toggle[aria-pressed="true"] { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.heat-bar { display: inline-block; width: 90px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(55,114,135,0), #377287 25%, #50C9DE 55%, #F2C76A 80%, #E4655B); }
.leaflet-heat { position: absolute; left: 0; top: 0; pointer-events: none; }
@media (max-width: 760px) { .heat-toggle { top: 50px; right: 52px; } }

.pin-stop {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-700); color: #fff; font: 600 11px/1 var(--font); font-variant-numeric: tabular-nums;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.pin-stop.is-done { background: #5E656A; }
.pin-stop.is-active { background: var(--brand-lime); color: #161F26; transform: scale(1.2); }
.pin-start { width: 16px; height: 16px; border-radius: 50%; background: #4C8DFF; border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(76,141,255,.3); }
.pin-handle { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--brand-lime); box-shadow: 0 1px 3px rgba(0,0,0,.4); cursor: move; }
.leaflet-tooltip.lead-tip { padding: 4px 10px; font-size: 12.5px; }
.leaflet-tooltip.lead-tip b { font-weight: 600; }

/* ---------- results column ---------- */
.results { position: relative; min-height: 0; background: var(--panel); border-left: 1px solid var(--line); }
.pane { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pane-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.pane-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.pane-sub { margin-top: 2px; font-size: 12.5px; color: var(--text-3); }
.pane-body { flex: 1; overflow-y: auto; }
.pane-foot { flex: none; padding: 10px 16px; }
.pane-foot:has(> [hidden]:only-child) { display: none; }
.sort { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
/* Lead list header: title and sort share the first row; the count and the links run full width
   beneath them, so a long title (Spanish) never squeezes the count or pushes the sort past the edge. */
#listPane .pane-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: start; }
#listPane .pane-head > div:first-child { display: contents; }
#listPane .pane-head .pane-title { grid-column: 1; grid-row: 1; }
#listPane .pane-head .sort { grid-column: 2; grid-row: 1; }
#listPane .pane-head .pane-sub, #listPane .pane-head .pane-links { grid-column: 1 / -1; }
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.back:hover { color: var(--text); }

.lead-list { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.search-row { flex: none; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.search-row .input { width: 100%; border-radius: var(--r-pill); }
.note-box { width: 100%; min-height: 72px; padding: 8px 12px; resize: vertical; font: inherit; font-size: 13.5px; }
.note-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--text-3); }
.lead-row {
  display: grid; grid-template-columns: 38px 1fr auto auto; gap: 2px 10px; align-items: start;
  padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.lead-row .heart { grid-row: span 2; margin-top: -3px; }

/* the heart that saves a lead */
.heart {
  display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer;
}
.heart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.heart:hover { background: var(--hover); color: #FF6FA0; }
.heart:focus-visible { outline: none; box-shadow: var(--focus); }
.heart[aria-pressed="true"] { color: #FF4F8B; }
.heart[aria-pressed="true"] svg { fill: #FF4F8B; }
.detail-actions .heart { width: 32px; height: 32px; margin-left: auto; border: 1px solid var(--line-strong); }
.lead-row:hover { background: var(--hover); }
.lead-row.is-active { background: var(--brand-tint); }
.lead-row .score { grid-row: span 2; }
.lead-addr { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-value { font-size: 13px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lead-meta { grid-column: 2 / 4; font-size: 12.5px; color: var(--text-2); }
.lead-row .tags { grid-column: 2 / 5; }
.status-text { color: var(--text-2); font-weight: 500; }

/* Scores use Archivo: its plain, even digits read cleanly at pill size (Plex's looked off). */
.score {
  display: inline-grid; place-items: center; width: 38px; height: 24px; border-radius: var(--r-pill);
  font-family: "Archivo", var(--font); font-size: 13px; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums; line-height: 1; color: #0D1F26; background: var(--s-high); /* dark digits on the bright aqua of dark mode */
}
:root[data-theme="light"] .score:not(.mid):not(.low) { color: #fff; } /* light mode's deep blue takes white digits */
.score.mid { background: var(--s-mid); color: #0D262D; }
.score.low { background: var(--s-low); color: var(--text); }

.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tag {
  padding: 0 9px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--chip-bg);
  font-size: 11.5px; font-weight: 500; line-height: 19px; color: var(--text-2); white-space: nowrap;
}
/* Every tag is the same neutral pill. The small shape in front of it is the lead type's map
   marker shape, so types stay easy to tell apart without a color per type. */
.tag .shape { fill: var(--text-3); opacity: 1; }

/* characteristic filter chips under Sort */
.chips-row { flex: none; padding: 8px 16px 10px; border-bottom: 1px solid var(--line); }
.chips-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.chips-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.chips-head .btn-link { font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  height: 24px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent;
  font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap;
}
.chip:hover { border-color: var(--line-hover); color: var(--text); }
.chip:focus-visible { outline: none; box-shadow: var(--focus); }
/* A chosen filter chip: the one brand accent, the same for every chip. */
.chip[aria-pressed="true"] { font-weight: 600; color: var(--text); background: var(--brand-tint); border-color: var(--brand-lime); }
:root[data-theme="light"] .chip[aria-pressed="true"] { color: var(--brand-900); border-color: var(--brand-700); }

.pane-link { margin-top: 2px; font-size: 12.5px; white-space: nowrap; } /* a long label moves to the next line whole */
.pane-links { display: flex; flex-wrap: wrap; gap: 0 14px; }

/* market trends and top streets (modals) */
.modal-card.wide { max-width: 760px; }
.trend-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; font-size: 15px; font-weight: 600; }
.trend-label { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.trend-label.fast, .trend-label.growing { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
.trend-label.steady { background: var(--chip-bg); color: var(--text-2); border: 1px solid var(--line-strong); }
.trend-label.shrinking { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-line); }
.trend-facts { margin-top: 12px; }
.trend-facts td:first-child { white-space: normal; font-weight: 400; color: var(--text-2); }
.trend-facts b { font: 700 16px/1.2 "Archivo", var(--font); font-variant-numeric: tabular-nums; }
.up { color: var(--ok); }
.down { color: var(--bad); }
.trend-chart { padding: 14px 18px 0; }
.trend-chart-title { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.trend-chart svg { width: 100%; height: auto; display: block; }
.trend-chart .permit-bar { fill: var(--brand-700); }
.trend-chart .permit-bar.ytd { fill: var(--brand-lime); }
.trend-chart text { font: 500 11px var(--font); fill: var(--text-3); }
.trend-chart text.val { fill: var(--text); font-weight: 600; }
.trend-table { margin: 14px 18px 0; width: calc(100% - 36px); font-size: 13px; }
.trend-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.trend-note { padding: 12px 18px 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.street-list { list-style: none; margin: 0; padding: 4px 8px 12px; }
.street-list li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; }
.street-list li:hover { background: var(--hover); }
.street-list b { font-weight: 600; }
.street-list .sub { display: block; font-size: 12px; color: var(--text-3); }
.street-list .count { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.chip-count { margin-left: 3px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.new-types { margin: -4px 0 14px; }
.new-types .chip { height: 30px; padding: 0 12px; font-size: 12.5px; }
.chip-due:not([aria-pressed="true"]) { border-color: var(--amber-line); color: var(--amber); }

/* ---------- follow-up ---------- */
.fu-badge { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: 11.5px; font-weight: 500; line-height: 17px; color: var(--text-2); white-space: nowrap; }
.fu-badge.is-due { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber); }
.tab-due { background: var(--amber); color: #1A1405; }
.tab-due:empty { display: none; }
.followup-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.followup-ctl input[type="date"] { width: 150px; color-scheme: inherit; }
.fu-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.history { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.history:empty { display: none; }
.history li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.history li b { font-weight: 600; color: var(--text); }
.history li span { color: var(--text-3); text-align: right; }

.empty { padding: 40px 24px; text-align: center; color: var(--text-3); font-size: 13.5px; }
.empty b { display: block; margin-bottom: 4px; color: var(--text); font-weight: 600; }
.empty .btn { margin-top: 12px; }

/* ---------- lead detail ---------- */
.detail-head { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.detail-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.detail-sub { font-size: 13px; color: var(--text-3); }
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.detail-actions .score { width: auto; padding: 0 10px; }
.section { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.section-title { margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.signal { display: flex; gap: 10px; padding: 6px 0; }
.signal::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--brand-lime); }
.signal b { display: block; font-size: 13.5px; font-weight: 600; }
.signal span { display: block; font-size: 12.5px; color: var(--text-3); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.pitch { font-size: 13.5px; color: var(--text-2); }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.status-grid button {
  height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--bg);
  font-size: 13px; color: var(--text-2); text-align: left;
}
.status-grid button:hover { background: var(--hover); color: var(--text); }
.status-grid button[aria-pressed="true"] { border-color: var(--brand-lime); background: var(--brand-tint); color: var(--brand-lime); font-weight: 600; }
.status-when { margin-top: 8px; font-size: 12px; color: var(--text-3); }

/* ---------- route ---------- */
.route-name {
  width: 100%; margin: 0 0 2px -6px; padding: 2px 6px; border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-size: 16px; font-weight: 600; color: var(--text); background: transparent;
}
.route-name:hover { border-color: var(--line); }
.route-name:focus { outline: none; border-color: var(--brand-lime); background: var(--bg); box-shadow: var(--focus); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.stats div { padding: 10px 16px; }
.stats div + div { border-left: 1px solid var(--line); }
.stats b { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stats span { font-size: 12px; color: var(--text-3); }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.menu-wrap { position: relative; }
.menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000; min-width: 190px; padding: 6px;
  background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow);
}
.menu a, .menu button {
  display: block; width: 100%; padding: 7px 12px; border: 0; border-radius: var(--r-sm); background: none;
  font-size: 13px; color: var(--text); text-align: left; text-decoration: none;
}
.menu a:hover, .menu button:hover { background: var(--hover); }
.menu-note { padding: 6px 12px 4px; font-size: 11.5px; color: var(--text-3); }
.route-note { padding: 8px 16px; font-size: 12.5px; color: var(--amber); background: var(--amber-bg); border-bottom: 1px solid var(--amber-line); }

.stop-list { list-style: none; margin: 0; padding: 0 0 12px; }
.leg { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 29px; font-size: 12px; color: var(--text-3); }
.leg::before { content: ""; width: 1px; height: 14px; margin-right: 9px; background: var(--line-strong); }
.leg button { margin-left: auto; padding: 0; border: 0; background: none; font-size: 12px; font-weight: 500; color: var(--brand-lime); }
.leg button:hover { text-decoration: underline; }
.steps { list-style: none; margin: 0 16px 6px 44px; padding: 6px 0; border-left: 1px solid var(--line-strong); }
.steps li { display: flex; gap: 10px; padding: 4px 0 4px 12px; font-size: 12.5px; color: var(--text-2); }
.steps li span { margin-left: auto; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stop {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 2px 10px; align-items: start;
  margin: 0 8px; padding: 9px 8px; border-radius: var(--r-sm); cursor: pointer;
}
.stop:hover { background: var(--hover); }
.stop.is-active { background: var(--brand-tint); }
.stop-num {
  grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-700); color: #fff; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.stop.is-done .stop-num { background: #5E656A; }
.stop.is-done .lead-addr { color: var(--text-3); }
.stop-side { grid-row: span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.stop-side .input { height: 26px; font-size: 12px; padding: 0 22px 0 8px; background-position: right 7px center; }
.stop-side a { font-size: 12px; font-weight: 500; color: var(--brand-lime); text-decoration: none; }
.stop-side a:hover { text-decoration: underline; }
.stop .lead-meta, .stop .tags { grid-column: 2; }

.saved-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.saved-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.saved-row:hover { background: var(--hover); }
.saved-row div { flex: 1; min-width: 0; }
.saved-row b { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-row span { font-size: 12.5px; color: var(--text-3); }

/* ---------- info tooltip ---------- */
.label-info { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.info {
  position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--line-strong); font-size: 10.5px; font-weight: 600; color: var(--text-3); cursor: help; outline: none;
}
.info:hover, .info:focus { border-color: var(--brand-lime); color: var(--brand-lime); }
.has-tip { position: relative; }
.tooltip {
  position: absolute; left: 0; right: 0; top: 24px; z-index: 1200; padding: 10px 12px;
  border-radius: var(--r-sm); background: var(--brand-950); border: 1px solid var(--line-strong); color: rgba(255,255,255,.85);
  font-size: 12.5px; font-weight: 400; line-height: 1.45; text-align: left; cursor: default;
  box-shadow: var(--shadow); visibility: hidden; opacity: 0; transition: opacity .12s;
}
.tooltip b { display: block; margin-top: 8px; color: #fff; font-weight: 600; }
.tooltip b:first-child { margin-top: 0; }
.label-info:hover + .tooltip, .label-info:focus-within + .tooltip { visibility: visible; opacity: 1; }

/* ---------- full-width pages (New leads, Settings, How scoring works) ---------- */
.page { flex: 1; min-height: 0; overflow-y: auto; background: var(--bg); }
.page-inner { max-width: 1200px; margin: 0 auto; padding: 24px 24px 48px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.page-head h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.page-head p { margin-top: 2px; font-size: 13.5px; color: var(--text-3); }
.page-actions { display: flex; align-items: center; gap: 8px; }
.card-flat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.grid th {
  padding: 9px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-3);
  background: var(--panel-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.grid td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid tr:last-child td { border-bottom: 0; }
.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.grid .heart-cell { width: 44px; text-align: right; }
.grid .heart-cell .heart { display: inline-grid; }
.grid .sub { display: block; font-size: 12.5px; color: var(--text-3); }
.grid .actions { text-align: right; white-space: nowrap; }
.grid .empty-cell { padding: 40px 16px; text-align: center; color: var(--text-3); }
.grid .empty-cell b { display: block; margin-bottom: 4px; color: var(--text); font-weight: 600; }

/* Results */
.chips-links { display: flex; gap: 14px; }
.results-summary { display: grid; grid-template-columns: repeat(4, 1fr); }
.results-summary > div { padding: 14px 18px; border-right: 1px solid var(--line); }
.results-summary > div:last-child { border-right: 0; }
.results-summary .k { display: block; font-size: 12px; font-weight: 500; color: var(--text-3); }
.results-summary .v { display: block; margin-top: 2px; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.results-summary .r { display: block; font-size: 12.5px; color: var(--text-3); }
.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.results-weeks { margin-top: 16px; }
.card-title { padding: 13px 16px 11px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.card-note { padding: 10px 16px 12px; font-size: 12.5px; color: var(--text-3); border-top: 1px solid var(--line); }
.grid td.num .sub { display: inline-block; min-width: 52px; margin-left: 6px; font-size: 12px; }
.grid .nowrap { white-space: nowrap; }
.grid .bar-cell { width: 45%; vertical-align: middle; }
.bar { display: block; height: 8px; border-radius: 4px; background: var(--s-high); }
@media (max-width: 860px) {
  .results-summary { grid-template-columns: 1fr 1fr; }
  .results-summary > div:nth-child(2) { border-right: 0; }
  .results-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .results-grid { grid-template-columns: 1fr; }
  .grid .bar-cell { width: 30%; }
}
@media (max-width: 600px) {
  .results-summary > div { padding: 12px 14px; }
  .results-summary .v { font-size: 20px; }
  #resultsBody .grid th, #resultsBody .grid td { padding: 9px 10px; }
  #resultsBody .grid th { white-space: normal; }
  .grid td.num .sub { display: block; min-width: 0; margin-left: 0; }
  .grid .bar-cell { display: none; }
}

/* Customers */
.customers-actions input[type="search"] { width: 190px; }
.customers-summary .v-text { overflow: hidden; font-size: 17px; line-height: 29px; white-space: nowrap; text-overflow: ellipsis; }
.customers-export { margin-top: 16px; }
.customers-export .export-choices { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 0; padding: 14px 16px 16px; }
.customers-export .export-choice { display: flex; flex-direction: column; justify-content: flex-start; } /* text at the top when a card is taller than its text */
.card-title-sub { font-weight: 400; color: var(--text-3); }
.customers-table { margin-top: 16px; }
.customer-note span { display: -webkit-box; max-width: 260px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; color: var(--text-2); }
@media (max-width: 760px) {
  .customers-actions input[type="search"] { flex: 1 1 100%; width: auto; }
  .customers-actions label.sort { display: none; } /* "All markets" and "All time" say what they are */
  .customers-actions select { flex: 1 1 0; min-width: 0; }
  .customers-export .export-choices { grid-template-columns: 1fr 1fr; padding: 12px; }
  /* Each customer becomes a card: address and home value on top, then when it was won, how it was
     found, the pool and the note, with View on map at the side. */
  #customersPage .grid, #customersPage .grid tbody { display: block; }
  #customersPage .grid thead { display: none; }
  #customersPage .grid tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  #customersPage .grid tr:last-child { border-bottom: 0; }
  #customersPage .grid td { display: block; grid-column: 1; padding: 0; border: 0; }
  #customersPage .grid td:nth-child(5) { grid-column: 2; grid-row: 1; }
  #customersPage .grid td:nth-child(7) { grid-column: 2; grid-row: 2 / span 3; }
  #customersPage .grid td:nth-child(2) .sub { display: inline; margin-left: 6px; }
  #customersPage .grid td:empty { display: none; }
  #customersPage .grid td.empty-cell { grid-column: 1 / -1; padding: 28px 8px; }
  .customer-note span { max-width: none; }
}
@media (max-width: 480px) { .customers-export .export-choices { grid-template-columns: 1fr; } }

.doc { max-width: 820px; }
.doc h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.doc h2 { margin: 32px 0 10px; font-size: 16px; font-weight: 600; }
.doc p, .doc li { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.doc .lede { margin-top: 8px; font-size: 15px; }
.doc-list { margin: 8px 0 0; padding-left: 20px; }
.doc-list li + li { margin-top: 6px; }
.doc-list b { color: var(--text); }
.doc-table { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.doc-table td:first-child { white-space: nowrap; font-weight: 500; }
.doc-table .score { width: auto; padding: 0 10px; }

/* ---------- account ---------- */
.user-btn { padding: 4px 10px; border: 0; border-radius: var(--r-pill); background: none; font: inherit; font-size: 13px; color: rgba(255,255,255,.75); cursor: pointer; }
.user-btn:hover, .user-btn[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }
.account { max-width: 720px; }
.account-section { padding: 16px 18px; }
.account-section + .account-section { margin-top: 16px; }
.account-section h2 { margin-bottom: 12px; font-size: 15px; font-weight: 600; }
.account-kv dd { text-align: left; }
.account-kv { grid-template-columns: 140px 1fr; }
.account-form { max-width: 360px; }
.team-list { list-style: none; margin: 0 0 12px; padding: 0; }
.team-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.team-list li div { flex: 1; min-width: 0; }
.team-list li b { display: block; font-weight: 600; }
.team-list li span { font-size: 12.5px; color: var(--text-3); }
.team-list li .territory-line { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.export-choices { display: grid; gap: 10px; margin-top: 14px; }
.export-choice { display: block; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.export-choice:hover { background: var(--hover); border-color: var(--line-hover); }
.export-choice:focus-visible { outline: none; box-shadow: var(--focus); }
.export-choice b { display: block; font-weight: 600; font-size: 14px; }
.export-choice span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
@media (max-width: 600px) {
  .team-list li { flex-wrap: wrap; }
  .team-list li div { flex-basis: 100%; }
  .team-list li .territory-line { white-space: normal; }
}
.team-invite { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; }
.team-invite .input { width: 100%; }
@media (max-width: 600px) { .team-invite { grid-template-columns: 1fr; } }

/* ---------- settings ---------- */
.settings-list { display: grid; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.setting-row:first-child { border-top: 0; padding-top: 2px; }
.setting-label { flex: 1; min-width: 0; cursor: default; }
label.setting-label { cursor: pointer; }
.setting-label b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.setting-label span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-3); }
.setting-seg { flex: none; }
.setting-seg button { min-width: 84px; }
.setting-input { flex: none; width: 240px; }
.setting-num { width: 96px; text-align: right; }
.settings-saved { min-height: 18px; margin: 6px 0 0; text-align: right; color: var(--ok); }
/* An on/off switch built on a checkbox. */
input.switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 22px; margin: 0; border-radius: var(--r-pill); background: var(--line-hover); cursor: pointer; transition: background .15s; }
input.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
input.switch:checked { background: var(--brand-700); }
input.switch:checked::after { transform: translateX(18px); }
input.switch:focus-visible { outline: none; box-shadow: var(--focus); }
.settings-links { display: grid; }
.link-row {
  display: block; width: 100%; padding: 11px 28px 11px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; position: relative;
  text-decoration: none; color: inherit; /* the playbook row is a link; it looks like the button rows */
}
.fu-links { display: inline-flex; gap: 6px; align-items: baseline; color: var(--text-3); }
.link-row:first-child { border-top: 0; padding-top: 2px; }
.link-row::after { content: "›"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--text-3); }
.link-row b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.link-row span { display: block; margin-top: 1px; font-size: 12.5px; color: var(--text-3); }
.link-row:hover b { color: var(--brand-lime); }
:root[data-theme="light"] .link-row:hover b { color: var(--brand-700); }
.back-link { display: inline-block; margin-bottom: 14px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 500; color: var(--brand-lime); }
:root[data-theme="light"] .back-link { color: var(--brand-700); }
.back-link:hover { text-decoration: underline; }
.membership-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.membership-status p { font-size: 13.5px; color: var(--text-2); }
.membership-status p b { color: var(--text); }
.membership-status .btn { flex: none; }
.btn-danger-solid { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; }
.btn-danger-solid:hover { filter: brightness(1.08); }
.btn-danger-solid:disabled { opacity: .6; }
@media (max-width: 600px) {
  .setting-row { flex-wrap: wrap; }
  .setting-input { width: 100%; }
  .setting-num { width: 96px; }
  .membership-status { flex-direction: column; align-items: stretch; }
}

/* ---------- language switch ---------- */
.lang-switch { display: inline-flex; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.lang-switch button { height: 22px; padding: 0 9px; border: 0; border-radius: var(--r-pill); background: transparent; font-size: 12px; font-weight: 600; color: var(--text-3); }
.lang-switch button[aria-pressed="true"] { background: var(--brand-700); color: #fff; }
.lang-dark.lang-switch { border-color: rgba(255,255,255,.22); }
.lang-dark.lang-switch button { color: rgba(255,255,255,.65); }
.lang-dark.lang-switch button[aria-pressed="true"] { background: rgba(255,255,255,.16); color: #fff; }
.login-main { position: relative; }
.login-lang { position: absolute; top: 20px; right: 24px; }
.login-theme { position: absolute; top: 18px; right: 104px; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.modal-card { width: 100%; max-width: 480px; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 16px; font-weight: 600; }
.icon-close { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; font-size: 22px; line-height: 1; color: var(--text-3); }
.icon-close:hover { background: var(--hover); color: var(--text); }
#modalBody { padding: 16px 18px 18px; max-height: calc(100vh - 110px); overflow: auto; }
.modal-text { font-size: 13.5px; color: var(--text-2); }
.link-box { display: flex; gap: 8px; margin: 14px 0; }
.link-box .input { flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); background: var(--bg); }
.modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.modal-actions .spacer { flex: 1; }
/* Share menu: the language row on top; Share with crew: language and phone numbers */
.menu-lang { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; padding: 6px 12px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-3); }
.menu-lang .lang-switch button { width: auto; height: 22px; padding: 0 9px; }
.share-opts { display: grid; gap: 12px; margin: 14px 0 4px; }
.share-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-opt-stack { flex-direction: column; align-items: stretch; gap: 6px; }
.share-opt-label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.share-opt .note { margin-top: 0; }
.btn-danger { color: var(--danger); }
.form-grid-1 { display: grid; gap: 12px; }
.form-grid-1 label { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.form-grid-1 .input { width: 100%; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2000;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--brand-lime); color: #161F26; font-size: 13px; font-weight: 500; box-shadow: var(--shadow);
}

/* ---------- medium screens: one side column ---------- */
@media (max-width: 1180px) {
  .layout { grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .filters { grid-column: 1; grid-row: 1; border-bottom: 1px solid var(--line); max-height: 52vh; }
  .results { grid-column: 1; grid-row: 2; border-left: 0; border-right: 1px solid var(--line); }
  .map-wrap { grid-column: 2; grid-row: 1 / 3; }
}

/* ---------- top bar on narrower screens ----------
   Measured with six tabs and an Admin portal or Upgrade button, the one-row bar needs about
   1320px with short tab names (1390px in Spanish) and 1575px with the long names and the account
   name (1710px in Spanish). So: under 1680px the tabs use short names and the account name is
   hidden (it stays reachable from Settings); Spanish also drops the account name up to 1800px;
   under 1340px (1400px in Spanish) the tabs move to a second row. */
/* Spanish labels run longer: tighten the top bar so nothing spills past the edge on 1366-wide laptops. */
@media (min-width: 761px) and (max-width: 1480px) {
  /* The account name (one click away in Settings) and the growth badge give way: a Solo account's
     Upgrade button and the tab counts would otherwise push Sign out past the edge at 1366 wide. */
  .topbar-right > .user { display: none; }
  .growth-pill { display: none; }
  html[lang="es"] .topbar { gap: 12px; }
  html[lang="es"] .tabs button { padding: 0 7px; }
  html[lang="es"] .topbar-right > .user { display: none; }
  html[lang="es"] .market select { width: 190px; }
}
@media (max-width: 1800px) { html[lang="es"] .topbar-right > .user { display: none; } }
@media (max-width: 1680px) {
  .topbar-right > .user { display: none; }
  .tabs [data-tab="new"], .tabs [data-tab="routes"], .tabs [data-tab="saved"] { font-size: 0; }
  .tabs [data-tab="saved"]::before { content: "Saved"; font-size: 13.5px; }
  html[lang="es"] .tabs [data-tab="saved"]::before { content: "Guardados"; }
  .tabs [data-tab="new"]::before { content: "New"; font-size: 13.5px; }
  .tabs [data-tab="routes"]::before { content: "Routes"; font-size: 13.5px; }
  html[lang="es"] .tabs [data-tab="new"]::before { content: "Nuevos"; }
  html[lang="es"] .tabs [data-tab="routes"]::before { content: "Rutas"; }
  .tabs .tab-count { font-size: 11px; }
}
@media (max-width: 1340px) {
  .topbar { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 8px; }
  .topbar-right { padding-bottom: 0; }
  .tabs { order: 9; flex: 0 0 calc(100% + 32px); height: 40px; margin: 8px -16px 0; padding: 0 8px; border-top: 1px solid rgba(255,255,255,.12); overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
}
@media (min-width: 1341px) and (max-width: 1400px) {
  html[lang="es"] .topbar { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 8px; }
  html[lang="es"] .topbar-right { padding-bottom: 0; }
  html[lang="es"] .tabs { order: 9; flex: 0 0 calc(100% + 32px); height: 40px; margin: 8px -16px 0; padding: 0 8px; border-top: 1px solid rgba(255,255,255,.12); overflow-x: auto; scrollbar-width: none; }
  html[lang="es"] .tabs::-webkit-scrollbar { display: none; }
}

/* ---------- phones ---------- */
.phone-only { display: none !important; }
@media (max-width: 760px) {
  .phone-only { display: revert !important; }
  /* Two rows: logo, market and sign out on top; the section tabs underneath. */
  .topbar { flex-wrap: wrap; height: auto; gap: 0; padding: 0; }
  .topbar .logo { height: 32px; margin-left: 12px; }
  .market { flex: 1; min-width: 0; padding: 9px 10px; border-left: 0; }
  .market label { display: none; }
  .market select { width: 100%; }
  .topbar-right { margin: 0 10px 0 0; gap: 8px; }
  .topbar-right .lang-switch, #adminLink, .demo-badge, .user { display: none; }
  .tabs { order: 9; flex-basis: 100%; height: 40px; margin: 0; padding: 0 4px; border-top: 1px solid rgba(255,255,255,.12); overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 1 0 auto; padding: 0 8px; font-size: 13px; white-space: nowrap; }
  .tabs button[aria-current="page"]::after { left: 6px; right: 6px; }
  .tabs [data-tab="saved"]::before, .tabs [data-tab="new"]::before, .tabs [data-tab="routes"]::before { font-size: 13px; }
  .app { height: auto; min-height: 100%; }
  .layout { display: flex; flex-direction: column; }
  .map-wrap { height: 46vh; flex: none; order: -1; }
  .filters { max-height: none; border-right: 0; }
  .filters-toggle {
    display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
    padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--text);
    font-size: 14px; font-weight: 600; text-align: left;
  }
  .filters-toggle::after { content: "+"; font-size: 18px; font-weight: 400; color: var(--text-3); }
  .filters.open .filters-toggle::after { content: "\2212"; }
  .filters:not(.open) .filters-body { display: none; }
  .results { border: 0; border-top: 1px solid var(--line); }
  .pane { position: static; }
  .lead-list, .pane-body { overflow: visible; }
  /* Legend top-left, map style under the zoom buttons, so nothing overlaps the scale bar. */
  .legend { top: 8px; bottom: auto; left: 8px; font-size: 11px; gap: 8px; padding: 5px 10px; }
  /* While a point is being placed, the banner takes the top of the map and the corner controls step aside. */
  .app.picking .legend, .app.picking .heat-toggle { display: none; }
  .map-banner { top: 8px; left: 8px; right: 52px; transform: none; justify-content: space-between; }
  /* Modals fit the phone; the trends table drops its narrowest column. */
  .modal { padding: 10px; }
  .modal-card, .modal-card.wide { max-width: calc(100vw - 20px); }
  .trend-table { font-size: 12px; margin-left: 12px; margin-right: 12px; width: calc(100% - 24px); }
  .trend-table th:nth-child(4), .trend-table td:nth-child(4) { display: none; }
  .trend-table th, .trend-table td { white-space: normal; padding: 9px 10px; }
  .trend-head, .trend-chart, .trend-note { padding-left: 12px; padding-right: 12px; }
  .legend .legend-note { display: none; }
  .basemap { top: 84px; right: 10px; }
  .basemap button { height: 26px; padding: 0 10px; font-size: 12px; }
  .leaflet-control-attribution { font-size: 9px; }
  .page-inner { padding: 16px 16px 40px; }
  /* Page headers: the description takes the full width and the controls wrap underneath it. */
  .page-head { flex-wrap: wrap; align-items: flex-start; }
  .page-head > div:first-child { flex: 1 1 100%; }
  .page-actions { flex-wrap: wrap; row-gap: 8px; }
  /* Reference tables (scoring page) wrap their cells instead of running off the screen. */
  .doc-table th, .doc-table td:first-child { white-space: normal; }
  .doc-table th, .doc-table td { padding: 9px 10px; }
  .doc-table .score { white-space: nowrap; }
  /* New leads: each row becomes a card (score, address and value on top, signals and the
     buttons underneath) instead of a seven-column table that has to be scrolled sideways. */
  #newPage .grid, #newPage .grid tbody { display: block; }
  #newPage .grid thead { display: none; }
  #newPage .grid tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  #newPage .grid tr:last-child { border-bottom: 0; }
  #newPage .grid td { display: block; padding: 0; border: 0; }
  #newPage .grid td:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; }
  #newPage .grid td:nth-child(2) { grid-column: 2; grid-row: 1; }
  #newPage .grid td:nth-child(3) { display: none; }
  #newPage .grid td:nth-child(4) { grid-column: 2; grid-row: 2; }
  #newPage .grid td:nth-child(5) { grid-column: 3; grid-row: 1; }
  #newPage .grid td:nth-child(6) { grid-column: 2; grid-row: 3; text-align: left; }
  #newPage .grid td:nth-child(7) { grid-column: 3; grid-row: 3; width: auto; }
  #newPage .grid td.empty-cell { grid-column: 1 / -1; }
  .account-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .account-kv dt { margin-top: 8px; font-size: 12px; }
  .account-kv dt:first-child { margin-top: 0; }
  .account-kv dd { min-width: 0; overflow-wrap: anywhere; }
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-side { padding: 20px 24px; }
  .login-side .logo { width: 190px; }
  .login-tagline, .login-legal { display: none; }
  .login-main { place-items: start center; padding-top: 40px; }
}

/* ---------- print: route sheet with directions (always on white) ---------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #111; font-size: 11.5pt; }
  .topbar, .filters, .map-wrap, .toolbar, .back, .toast, .stop-side a, .leg button, .route-note { display: none !important; }
  .app, .layout, .results, .pane { display: block; position: static; height: auto; overflow: visible; border: 0; background: #fff; }
  #listPane, #leadPane, #savedPane { display: none !important; }
  .route-name { border: 0; font-size: 16pt; color: #111; }
  .stats div { padding: 6px 0; }
  .stats b, .lead-addr, .steps li { color: #111; }
  .stop { break-inside: avoid; margin: 0; padding: 6px 0; }
  .steps { display: block !important; margin-left: 34px; }
  .stop-side .input { border: 1px solid #999; background: #fff; color: #111; }
  .tag { border: 1px solid #ccc; background: #fff; color: #333; }
}