/* Cyprus Land Finder — one stylesheet, no build step.

   One warm-grey family, one accent (forest green), and data colours that mean something:
   the score bands and the side of the island. Every other colour is a shade of those. */

:root {
  --bg: #f6f5f1;
  --bg-sunken: #efede7;
  --panel: #fffefb;
  --panel-2: #faf9f5;
  --ink: #1b1d1a;
  --ink-2: #44473f;
  --muted: #6c6e66;
  --line: #e6e3db;
  --line-strong: #d3cfc4;
  --accent: #1f5135;
  --accent-hover: #173f29;
  --accent-soft: #e6eee6;
  --accent-line: #b9cdbd;
  --link: var(--accent);

  --great: #1e7a45;
  --great-bg: #e1f0e3;
  --good: #4f7a1c;
  --good-bg: #edf3dc;
  --fair: #9c560d;
  --fair-bg: #faefd9;
  --poor: #ad3129;
  --poor-bg: #f9e3df;

  /* The side of the island. The map and the charts read these same values. */
  --north: #c2581c;
  --south: #2f62c4;
  --sba: #7454c9;
  --buffer: #9a6a12;
  --unknown: #8b8e86;

  --font: "Geist Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 6px;
  --radius: 10px;
  --r-lg: 14px;
  --shadow: 0 1px 0 rgba(58, 50, 30, .03), 0 1px 3px rgba(58, 50, 30, .07);
  --shadow-md: 0 1px 2px rgba(58, 50, 30, .05), 0 6px 18px -6px rgba(58, 50, 30, .14);
  --shadow-lg: 0 18px 40px -12px rgba(36, 32, 18, .32), 0 2px 6px rgba(36, 32, 18, .1);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* One z-index scale. Maps get their own stacking context (see #map) so Leaflet's
     internal 400–1000 range stays inside them. */
  --z-sticky: 10;
  --z-topbar: 50;
  --z-float: 60;

  --topbar-h: 3.5rem;
  --gutter: clamp(1rem, 2.4vw, 1.75rem);
}

*, *::before, *::after { box-sizing: border-box; }
/* A class that sets `display` would otherwise beat the attribute and show what is hidden. */
[hidden] { display: none !important; }

/* Scroll padding keeps a focused or scrolled-to element clear of the sticky top bar and of
   the floating compare bar at the bottom. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding: calc(var(--topbar-h) + .5rem) 0 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* A fixed grain behind the content: enough to take the sterile edge off the flat paper. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--link); text-decoration: none; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration: underline; }
h1 {
  font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.25rem); line-height: 1.1; margin: 0 0 .5rem;
  letter-spacing: -.028em; font-weight: 650; text-wrap: balance;
}
h2 { font-size: 1.06rem; line-height: 1.3; margin: 0 0 .5rem; letter-spacing: -.012em; font-weight: 620; text-wrap: balance; }
h3 { font-size: .95rem; margin: 1rem 0 .35rem; font-weight: 600; letter-spacing: -.005em; }
p { margin: 0 0 .6rem; text-wrap: pretty; }
code { font-family: var(--mono); font-size: .88em; background: var(--bg-sunken); padding: .05em .3em; border-radius: 4px; }
pre code { background: none; padding: 0; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.tiny { font-size: .76rem; line-height: 1.45; }
.strong { font-weight: 600; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.bad { color: var(--poor); font-weight: 600; }
.prose { max-width: 68ch; }
.nowrap { white-space: nowrap; }
.spaced { margin-top: 1.2rem; }

::selection { background: #cfe0d2; }

/* ---------- focus ---------- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }

.skip-link {
  position: absolute; left: .75rem; top: -3rem; z-index: calc(var(--z-topbar) + 1);
  background: var(--ink); color: #fff; padding: .5rem .8rem; border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: .6rem; text-decoration: none; }

/* ---------- chrome ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: 1.6rem;
  min-height: var(--topbar-h);
  padding: .5rem var(--gutter);
  background: rgba(250, 249, 245, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .6);
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem; flex-shrink: 0;
  font-weight: 650; color: var(--ink); text-decoration: none; font-size: 1rem; letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
.brand-name em { font-style: normal; color: var(--muted); font-weight: 500; }

.topbar nav { display: flex; align-items: center; gap: .15rem; min-width: 0; }
.topbar nav a, .nav-logout button {
  position: relative;
  color: var(--ink-2); font-size: .875rem; font-weight: 500; white-space: nowrap;
  padding: .4rem .65rem; border-radius: var(--r-sm);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.topbar nav a:hover, .nav-logout button:hover { color: var(--ink); background: rgba(31, 81, 53, .07); text-decoration: none; }
.topbar nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.topbar nav .nav-split { width: 1px; align-self: stretch; margin: .35rem .4rem; background: var(--line-strong); }
.topbar nav .nav-account { margin-left: auto; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.topbar nav .nav-tail { display: contents; }

main {
  flex: 1 0 auto; width: 100%;
  padding: 1.6rem var(--gutter) 5rem; max-width: 110rem; margin: 0 auto;
}
.foot {
  width: 100%; border-top: 1px solid var(--line);
  padding: 1.6rem var(--gutter) 2.6rem; color: var(--muted); font-size: .8rem; line-height: 1.6;
}
.foot-inner { max-width: 110rem; margin: 0 auto; display: grid; gap: 1rem 3rem; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.foot p { max-width: 78ch; margin: 0; }
.foot-brand { font-weight: 600; color: var(--ink-2); }

/* ---------- page heads ---------- */
.page-head { margin-bottom: 1.4rem; }
.page-head p { max-width: 68ch; }
.back-link {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--muted);
  margin-bottom: .7rem; transition: color .15s, transform .2s var(--ease);
}
.back-link:hover { color: var(--accent); text-decoration: none; transform: translateX(-2px); }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate;
  margin: -1.6rem calc(var(--gutter) * -1) 1.4rem; padding: 2.2rem var(--gutter) 1.6rem;
  overflow: hidden;
}
/* Contour lines: this is a map of land, after all. Masked so they fade into the page. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-radial-gradient(ellipse 120% 90% at 88% 30%, transparent 0 26px, rgba(31, 81, 53, .09) 26px 27px),
    repeating-radial-gradient(ellipse 80% 70% at 62% 120%, transparent 0 34px, rgba(31, 81, 53, .05) 34px 35px);
  -webkit-mask-image: linear-gradient(100deg, transparent 22%, #000 70%);
          mask-image: linear-gradient(100deg, transparent 22%, #000 70%);
}
.hero h1 { max-width: 20ch; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }
.hero p { max-width: 62ch; color: var(--ink-2); }
.hero-stats { display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; margin-top: 1.2rem; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat b {
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.75rem); font-weight: 620; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.hero-stat span { font-size: .8rem; color: var(--muted); }
.hero-stat.accent b { color: var(--great); }

/* ---------- preset chip grid ---------- */
.presets { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .5rem 1rem; margin-bottom: 1.4rem; align-items: start; }
.preset-group { display: contents; }
.preset-group-label { font-size: .78rem; font-weight: 600; color: var(--muted); padding-top: .48rem; }
.preset-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.preset {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .8rem .38rem .55rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-size: .85rem; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow);
  transition: border-color .18s var(--ease), transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.preset:hover { border-color: var(--accent-line); transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
.preset:active { transform: translateY(0) scale(.98); }
.preset.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px -4px rgba(31, 81, 53, .55); }
.preset.on .txt { font-weight: 600; }
.preset .ico { font-size: .95rem; line-height: 1; }

.preset-detail {
  position: relative;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.2rem 1rem 1.35rem; margin-bottom: 1.2rem; box-shadow: var(--shadow);
  overflow: hidden;
}
.preset-detail::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
.preset-detail h2 { margin-bottom: .25rem; }
.preset-detail p { max-width: 72ch; }
.preset-detail p:last-child { margin-bottom: 0; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 20.5rem minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.sidebar {
  position: sticky; top: calc(var(--topbar-h) + 1rem); max-height: calc(100dvh - var(--topbar-h) - 2rem);
  overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .8rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding: 1px;
}
.main { min-width: 0; }

.filter-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; box-shadow: var(--shadow); }
.filter-box > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: -.85rem -1rem; padding: .85rem 1rem; border-radius: var(--radius);
}
.filter-box[open] > summary { margin-bottom: .2rem; }
.filter-box > summary::-webkit-details-marker { display: none; }
.filter-box > summary h2 { display: inline; margin: 0; }
.filter-box > summary::after {
  content: ""; width: .5rem; height: .5rem; flex-shrink: 0; margin-right: .2rem;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease);
}
.filter-box[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.summary-note { margin-left: auto; font-size: .78rem; color: var(--muted); font-weight: 500; }

.group { border: 0; border-top: 1px solid var(--line); padding: .7rem 0 .2rem; margin: 0; min-width: 0; }
.group:first-of-type { border-top: 0; padding-top: .2rem; }
.label { font-weight: 600; font-size: .8rem; color: var(--ink-2); padding: 0; display: block; margin-bottom: .35rem; }
.check {
  display: flex; align-items: center; gap: .5rem; font-size: .85rem; padding: .14rem .25rem; margin: 0 -.25rem;
  cursor: pointer; border-radius: 5px; transition: background-color .12s;
}
.check:hover { background: var(--panel-2); color: var(--accent); }
.check em { margin-left: auto; color: var(--muted); font-style: normal; font-size: .74rem; font-variant-numeric: tabular-nums; }
.scroll { max-height: 10.5rem; overflow-y: auto; padding-right: .2rem; scrollbar-width: thin; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .35rem; }
.pair label { font-size: .76rem; color: var(--muted); display: block; }
.pair input { width: 100%; margin-top: .15rem; }

input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 1rem; height: 1rem; margin: 0; flex-shrink: 0; }
input[type=search], input[type=number], input[type=text], input[type=email], input[type=password],
input[type=date], select, textarea {
  padding: .42rem .55rem; border: 1px solid var(--line-strong); border-radius: 7px;
  font: inherit; font-size: .875rem; width: 100%; background: var(--panel); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: #bdb8ab; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 81, 53, .14); }
input::placeholder { color: #a3a196; }
input[type=file] { font: inherit; font-size: .85rem; max-width: 100%; }
input[type=file]::file-selector-button {
  font: inherit; font-size: .82rem; margin-right: .6rem; padding: .38rem .7rem; border-radius: 7px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); cursor: pointer;
}

/* ---------- buttons ---------- */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-size: .85rem; font-weight: 500; line-height: 1.2; padding: .45rem .85rem;
  border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--ink); cursor: pointer; text-decoration: none;
  white-space: nowrap; box-shadow: 0 1px 0 rgba(58, 50, 30, .04);
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
button:hover, .button:hover { border-color: #b7b2a5; background: var(--panel-2); text-decoration: none; }
button:active:not(:disabled), .button:active { transform: translateY(1px) scale(.985); }
button.primary, .button.primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 8px -3px rgba(31, 81, 53, .55);
}
button.primary:hover, .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
button svg, .button svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.actions { display: flex; gap: .5rem; align-items: center; padding-top: .9rem; flex-wrap: wrap; }
.htmx-indicator { display: none; color: var(--muted); font-size: .82rem; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; align-items: center; gap: .4rem; }
.htmx-indicator::before {
  content: ""; width: .8rem; height: .8rem; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* While a filter or sort is in flight the old rows stay, dimmed, instead of vanishing. */
#results { transition: opacity .2s var(--ease); }
#results.htmx-request { opacity: .45; pointer-events: none; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 500; line-height: 1.3;
  padding: .26rem .7rem; border-radius: 999px; box-shadow: none;
  border: 1px solid var(--line-strong); background: var(--panel); text-decoration: none; color: var(--ink-2);
  transition: border-color .15s, color .15s, background-color .15s, transform .12s;
}
.chip:hover { border-color: var(--accent-line); color: var(--accent); background: var(--panel); text-decoration: none; }
.chip.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }
.chip.subtle { border-style: dashed; color: var(--muted); }
.sortbar { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 1rem; }

/* ---------- results head ---------- */
.results-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: .35rem; }
.results-count strong { font-size: 1.15rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.head-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- map ---------- */
#map, .detailmap {
  position: relative; z-index: 0; isolation: isolate;
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow);
  background: var(--bg-sunken);
}
#map { height: 16rem; margin-bottom: 1.2rem; transition: height .3s var(--ease); }
#map.map-lg { height: min(36rem, 70dvh); }
.map-bar { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: 0 0 .5rem; }
.map-bar .muted { font-size: .8rem; }
.map-legend { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: .76rem; color: var(--muted); }
.map-legend i { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .3rem; vertical-align: -.02rem; }
.detailmap { height: 19rem; }
.leaflet-container { font-family: var(--font) !important; }
.leaflet-popup-content-wrapper { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.leaflet-popup-content { margin: .75rem .9rem; font-size: .84rem; line-height: 1.45; }
.leaflet-popup-content a { font-weight: 600; }
.leaflet-bar { border: 1px solid var(--line-strong) !important; box-shadow: var(--shadow) !important; border-radius: 8px !important; overflow: hidden; }

/* ---------- tables ---------- */
.table-wrap {
  /* The scroll container must be the wrapper itself: a sticky <thead> inside a
     viewport-scrolling page floats over the rows instead of staying in its table. */
  max-height: 74vh; overflow: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.table-wrap.flat { max-height: none; }
.panel .table-wrap { box-shadow: none; }
table.listings { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.listings th, table.listings td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.listings thead th {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--panel-2); font-size: .76rem; letter-spacing: .005em;
  color: var(--muted); font-weight: 600; text-align: left; white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--line); border-bottom: 0;
}
table.listings thead th.num { text-align: right; }
table.listings tbody tr { transition: background-color .12s; }
table.listings tbody tr:hover { background: #fbfaf6; }
table.listings tbody tr:last-child td { border-bottom: 0; }
table.listings tr.gone { opacity: .55; }
table.listings tbody th { text-align: left; font-weight: 500; color: var(--ink-2); }
.pick { width: 2.2rem; }
.pickbox { width: 1.05rem; height: 1.05rem; cursor: pointer; }
.title .listing-link { font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.title .listing-link:hover { color: var(--accent); }
.meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .25rem; font-size: .77rem; color: var(--muted); }
/* An explicit delimiter: the row is several independent facts and with only a gap between
   them "south" + "Mesa Geitonia, Limassol" read as one phrase. */
.meta .sep { color: var(--line-strong); }
.deal { min-width: 11rem; }
/* A figure and its unit stay on one line; the note under it may wrap. */
.price-cell, .pp2-cell, .area-cell, .build-cell { white-space: nowrap; }
.price-cell .tiny, .area-cell .tiny, .build-cell .tiny, .ratio-cell .tiny { white-space: normal; }
.tags { display: flex; flex-direction: column; gap: .22rem; align-items: flex-start; }
.results-note { max-width: 78ch; margin-top: .8rem; }

/* ---------- score & ratio badges ---------- */
.score {
  display: inline-block; min-width: 2.3rem; padding: .2rem .4rem; border-radius: 7px;
  font-weight: 650; font-size: .92rem; text-align: center; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.score.great { background: var(--great-bg); color: var(--great); }
.score.good  { background: var(--good-bg); color: var(--good); }
.score.fair  { background: var(--fair-bg); color: var(--fair); }
.score.poor  { background: var(--poor-bg); color: var(--poor); }
.score-label { font-size: .7rem; color: var(--muted); text-align: right; margin-top: .15rem; }

.ratio { display: inline-block; padding: .16rem .45rem; border-radius: 6px; font-weight: 650; font-size: .85rem; font-variant-numeric: tabular-nums; }
.ratio.great { background: var(--great-bg); color: var(--great); }
.ratio.good  { background: var(--good-bg); color: var(--good); }
.ratio.fair  { background: var(--fair-bg); color: var(--fair); }
.ratio.poor  { background: var(--poor-bg); color: var(--poor); }

.tag {
  display: inline-block; font-size: .73rem; font-weight: 500; padding: .08rem .45rem; border-radius: 5px;
  background: var(--bg-sunken); color: var(--ink-2); white-space: nowrap;
}
.tag.good { background: var(--great-bg); color: var(--great); }
.tag.warn { background: var(--fair-bg); color: var(--fair); }
.tag.bad  { background: var(--poor-bg); color: var(--poor); }
.tag.muted { background: var(--bg-sunken); color: var(--muted); }
.pill { display: inline-block; font-size: .72rem; font-weight: 500; padding: .06rem .45rem; border-radius: 5px; background: var(--bg-sunken); color: var(--ink-2); }
.pill.dup { background: #ece8f6; color: #5a3fa8; }
.pill.new { background: var(--great-bg); color: var(--great); }
.pill.price_change { background: var(--fair-bg); color: var(--fair); }
.pill.gone { background: var(--poor-bg); color: var(--poor); }
.pill.reappear { background: #e1e9f5; color: #2b4c7e; }
.warnpill { font-size: .72rem; font-weight: 500; background: var(--fair-bg); color: var(--fair); padding: .05rem .4rem; border-radius: 5px; }
.src { font-size: .72rem; font-weight: 500; padding: .04rem .4rem; border-radius: 5px; background: var(--bg-sunken); color: var(--ink-2); }
.src.altamira { background: #f6ecd2; color: #6e5313; }
.src.landcy { background: #e1e9f5; color: #2b4c7e; }
.src.cyprusreal { background: #e1efe3; color: #275a37; }
.src.bazaraki { background: #f4e3ea; color: #7c2f4f; }

.side { font-size: .72rem; font-weight: 600; padding: .06rem .45rem; border-radius: 5px; color: #fff; background: var(--unknown); }
.side.north { background: var(--north); }
.side.south { background: var(--south); }
.side.sba { background: var(--sba); }
.side.buffer { background: var(--buffer); }

/* ---------- compare bar ---------- */
.compare-bar {
  position: fixed; left: 50%; transform: translate(-50%, 0); bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: var(--z-float);
  /* `display:flex` on the class would beat the [hidden] attribute, so hide explicitly */
  display: none;
  align-items: center; gap: .6rem;
  background: rgba(27, 29, 26, .94); color: #fff; padding: .45rem .5rem .45rem 1rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .08); font-size: .86rem;
  animation: rise .35s var(--ease);
}
.compare-bar:not([hidden]) { display: flex; }
.compare-bar button { border-color: transparent; background: rgba(255, 255, 255, .1); color: #fff; border-radius: 999px; box-shadow: none; }
.compare-bar button:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.compare-bar button.primary { background: #fff; color: var(--ink); }
.compare-bar button.primary:hover { background: #ecebe5; color: var(--ink); }
.compare-bar.full #compare-count { color: #f4d18a; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ---------- panels, KPIs, charts ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.15rem 1.3rem 1.25rem; margin-bottom: 1.2rem; box-shadow: var(--shadow); min-width: 0; }
.panel > h2:first-child { margin-bottom: .35rem; }
.panel > p.muted { max-width: 78ch; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: 0 1.2rem; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); gap: .75rem; margin: 1rem 0 1.3rem; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem 1rem; box-shadow: var(--shadow); min-width: 0; }
.kpi-label { display: block; font-size: .78rem; color: var(--muted); font-weight: 550; }
.kpi-value { display: block; font-size: 1.6rem; font-weight: 650; line-height: 1.2; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: .15rem 0 .1rem; overflow-wrap: anywhere; }
.kpi-note { display: block; font-size: .75rem; color: var(--muted); }

.chart { position: relative; height: 17rem; }
.chart.tall { height: 26rem; }

/* ---------- detail page ---------- */
.detail-head { margin-bottom: 1.4rem; }
.detail-head h1 { max-width: 30ch; margin-bottom: .55rem; }
.detail-where { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; color: var(--muted); }
.detail-where .sep { color: var(--line-strong); }
.detail-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin-bottom: .2rem; }
.detail-price .amount { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 650; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.detail-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .6rem; margin: 1rem 0 1.2rem; }
.figure { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .75rem; }
.figure span { display: block; font-size: .74rem; color: var(--muted); }
.figure b { display: block; font-size: 1.12rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.detail section > h2 { margin-top: 1.4rem; }
.detail section > h2:first-child { margin-top: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); gap: 1.6rem 2.2rem; }
table.kv { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.kv th { text-align: left; width: 12rem; color: var(--muted); font-weight: 500; padding: .42rem 1rem .42rem 0; vertical-align: top; }
table.kv td { padding: .42rem 0; vertical-align: top; }
table.kv tr + tr > * { border-top: 1px solid var(--line); }
table.kv thead th { color: var(--ink-2); font-weight: 600; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .4rem; margin-top: .8rem; }
.gallery a { display: block; border-radius: 8px; overflow: hidden; }
.gallery img { display: block; width: 100%; height: 7.5rem; object-fit: cover; background: var(--bg-sunken); transition: transform .4s var(--ease); }
.gallery a:hover img { transform: scale(1.04); }
.explain, .flags { padding-left: 1.1rem; font-size: .875rem; }
.explain li { margin-bottom: .3rem; }
.flags li { margin-bottom: .5rem; }
.description { max-width: 70ch; white-space: pre-line; line-height: 1.65; color: var(--ink-2); }
.empty {
  padding: 3rem 1.5rem; background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  text-align: center; color: var(--muted); text-wrap: balance;
}
.empty strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: .3rem; }
.doc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.3rem; white-space: pre-wrap; font-size: .86rem; line-height: 1.65; margin-bottom: 1.2rem; overflow-wrap: anywhere; }
.log { background: #1c1f1b; color: #cfe6d3; padding: 1rem; border-radius: var(--radius); font: .76rem/1.55 var(--mono); overflow-x: auto; max-height: 28rem; }

table.compare th:first-child, table.compare tbody th { width: 11rem; }
table.compare td { text-align: left; }
.compare-wrap table.compare tbody th, .compare-wrap table.compare thead th:first-child {
  position: sticky; left: 0; z-index: calc(var(--z-sticky) - 1); background: var(--panel-2);
  box-shadow: inset -1px 0 0 var(--line);
}
.compare-wrap table.compare thead th:first-child { z-index: calc(var(--z-sticky) + 1); }
.compare-wrap table.compare th a { white-space: normal; display: inline-block; min-width: 10rem; color: var(--ink); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ---------- ranking profile panel ---------- */
.inline-form { display: inline; margin: 0; }
.weights { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .6rem; }
.weights label { font-size: .74rem; color: var(--muted); }
.weights button { grid-column: 1 / -1; justify-content: center; margin-top: .3rem; }
.profile-box .chips { margin: .4rem 0 .5rem; }
.profile-box details summary { cursor: pointer; }

/* ---------- scrape control panel ---------- */
.scrape-grid { align-items: start; }
.scrape-grid .panel { margin-bottom: 1.2rem; }
.scrape-form .group { padding-top: .8rem; }
.scrape-form .check { align-items: flex-start; flex-wrap: wrap; }
.scrape-form .check > input { margin-top: .2rem; }
.scrape-form .check > span { flex: 1 1 12rem; min-width: 0; }
.scrape-form .check > span > span { display: block; }
.speed-option { border: 1px solid transparent; border-radius: 9px; padding: .5rem .6rem !important; margin: 0 0 .2rem !important; transition: background-color .15s, border-color .15s; }
.speed-option:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.speed-option em { align-self: center; font-style: normal; font-size: .78rem;
  background: var(--bg-sunken); padding: .1rem .45rem; border-radius: 5px; color: var(--muted); white-space: nowrap; }

.run-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.pill.running { background: #e1e9f5; color: #2b4c7e; }
.pill.done { background: var(--great-bg); color: var(--great); }
.pill.cancelled { background: var(--fair-bg); color: var(--fair); }
.pill.paused { background: var(--fair-bg); color: #7a4708; }
.pill.failed { background: var(--poor-bg); color: var(--poor); }
.pill.interrupted { background: var(--bg-sunken); color: var(--muted); }

.progress { position: relative; height: 1.5rem; background: var(--bg-sunken); border-radius: 999px;
  overflow: hidden; margin: .3rem 0 .8rem; box-shadow: inset 0 1px 2px rgba(58, 50, 30, .08); }
.progress-fill { height: 100%; background: linear-gradient(90deg, #2a6a45, var(--accent)); transition: width .5s var(--ease); }
.progress-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; mix-blend-mode: normal; }

table.listings.tight th, table.listings.tight td { padding: .38rem .55rem; }
.scroll-x { overflow-x: auto; max-width: 100%; margin-bottom: .6rem; scrollbar-width: thin; }
.totals { margin: .6rem 0; }
.log-box summary { cursor: pointer; }

.callout { background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius); padding: .75rem .9rem; margin-top: .6rem; font-size: .85rem; }
.callout ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.callout li { margin-bottom: .25rem; }

.kpis.compact { margin: .5rem 0 .9rem; grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); }
.kpis.compact .kpi { padding: .55rem .7rem; box-shadow: none; background: var(--panel-2); }
.kpis.compact .kpi-value { font-size: 1.2rem; }

.perm-form .pair { margin-bottom: .5rem; }
.perm-form label { font-size: .8rem; color: var(--muted); display: block; }
.perm-form input, .perm-form select { width: 100%; margin-top: .15rem; }

/* Filter sidebar groups. Each group is a collapsed <details> so 51 controls stay
   navigable: the four that matter most open by default, the rest are one click away. */
.fgroup { border-top: 1px solid var(--line); padding: .3rem 0; }
.fgroup > summary {
  cursor: pointer; list-style: none; padding: .45rem 0 .4rem 1.1rem; display: block; position: relative;
  border-radius: 6px; transition: color .15s;
}
.fgroup > summary:hover .fgroup-name { color: var(--accent); }
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::before {
  content: ""; position: absolute; left: .1rem; top: .82rem; width: .38rem; height: .38rem;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform .2s var(--ease);
}
.fgroup[open] > summary::before { transform: rotate(45deg); top: .74rem; }
.fgroup-name { font-weight: 600; font-size: .9rem; transition: color .15s; }
.fgroup-blurb { display: block; font-size: .74rem; line-height: 1.3; color: var(--muted); }
.filter-help { margin-top: .7rem; }

/* The catches page. Red flags and opportunities must not look alike: a bargain is green,
   a defect is red, and a bargain that is cheap because of a defect is amber — that last
   one being the row most worth reading. */
.catch-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr)); align-items: start; }
.catch-section { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.catch-section > header { position: relative; padding: .9rem 1.1rem .85rem 1.3rem; border-bottom: 1px solid var(--line); }
.catch-section > header::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.catch-section > header h2 { margin: 0 0 .25rem; font-size: 1.02rem; display: flex; align-items: baseline; gap: .4rem; }
.catch-section > header p { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--muted); max-width: 62ch; }
.catch-count { font-size: .78rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.catch-section.traps > header { background: #fbf3e2; }
.catch-section.traps > header::before { background: #c98a1b; }
.catch-section.flags > header { background: #faece9; }
.catch-section.flags > header::before { background: var(--poor); }
.catch-section.bargains > header { background: #eaf3eb; }
.catch-section.bargains > header::before { background: var(--great); }

.catch { padding: .75rem 1.1rem .8rem 1.3rem; border-top: 1px solid var(--line); transition: background-color .12s; }
.catch:hover { background: #fcfbf8; }
.catch:first-of-type { border-top: 0; }
.catch-head { display: flex; justify-content: space-between; gap: .3rem .8rem; align-items: baseline; flex-wrap: wrap; }
.catch-title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.catch-title a { color: var(--ink); }
.catch-title a:hover { color: var(--accent); }
.catch-figure { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.catch-figure .off { color: var(--great); font-weight: 700; margin-right: .2rem; }
.catch-meta { font-size: .77rem; color: var(--muted); margin-top: .15rem; line-height: 1.5; }
.catch-why { margin: .4rem 0 0; padding: 0; list-style: none; font-size: .8rem; }
.catch-why li { margin-top: .2rem; }
.catch-why .label { display: inline; font-weight: 600; color: var(--poor); font-size: inherit; }
.catch-why .evidence { color: var(--muted); font-style: italic; }
.catch-empty { padding: 1.1rem 1.3rem; color: var(--muted); font-size: .86rem; margin: 0; }

/* A monthly rent must never be read as an asking price. */
.permo { font-size: .7em; font-weight: 450; color: var(--muted); }

/* The type and condition switches. Deliberately not checkboxes: these are the first two
   questions a buyer asks, so they read as a segmented control at the top of the results. */
.switches { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; align-items: center; }
.switch {
  display: inline-flex; max-width: 100%; padding: 3px; gap: 2px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-sunken);
  overflow-x: auto; scrollbar-width: none;
}
.switch::-webkit-scrollbar { display: none; }
.switch .seg {
  padding: .32rem .8rem; font-size: .84rem; font-weight: 500; text-decoration: none; border-radius: 7px;
  color: var(--ink-2); white-space: nowrap; transition: background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.switch .seg:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
.switch .seg.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(58, 50, 30, .12), 0 0 0 1px rgba(58, 50, 30, .05); }

/* ---------- notices ---------- */
/* `.tag` is a one-line pill; a result message is a sentence and must wrap. */
.db-note { display: block; white-space: normal; font-size: .86rem; padding: .6rem .85rem; margin: .4rem 0 1rem; max-width: 68ch; border-radius: 8px; line-height: 1.5; }

/* ---------- the database page ---------- */
.db-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: .9rem 1.2rem; }
.db-facts > div { min-width: 0; }
.db-facts .tiny-value { font-size: 1.05rem; }
.db-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 0 1.2rem; align-items: start; }
.listings.compact td, .listings.compact th { padding: .3rem .55rem; }
.db-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.db-actions form { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.db-actions input[type=text] { width: 8.5rem; }
.db-details { margin-top: .8rem; }
.db-details summary { cursor: pointer; }
#import-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
#import-form progress { width: 100%; accent-color: var(--accent); }
.danger-zone { border-color: #edcfc9; }
.danger-zone > h2 { color: var(--poor); }
.wipe-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line); }
.wipe-row:first-of-type { border-top: 0; }
.wipe-row > div:first-child { flex: 1 1 22rem; min-width: 0; }
.wipe-row p { margin: .15rem 0 0; }
.wipe-confirm { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.wipe-confirm input { width: 10rem; }
button.danger { background: var(--poor); color: #fff; border-color: var(--poor); }
button.danger:hover { background: #932821; border-color: #932821; color: #fff; }
button.link-danger { border-color: transparent; background: none; color: var(--poor); box-shadow: none; }
button.link-danger:hover { background: var(--poor-bg); border-color: transparent; }
button:disabled, .button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---------- sign-in, setup, account ---------- */
.auth-card {
  max-width: 27rem; margin: clamp(1rem, 6vh, 4rem) auto 2rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); padding: 1.6rem 1.7rem 1.7rem;
}
.auth-card.wide { max-width: 36rem; }
.auth-card h1 { margin-top: 0; font-size: 1.5rem; }
.auth-card form { display: flex; flex-direction: column; gap: .35rem; margin-top: .8rem; }
.auth-card label { font-weight: 600; font-size: .85rem; margin-top: .4rem; }
.auth-card input[type=text], .auth-card input[type=password], .auth-card input[type=email] { padding: .6rem .7rem; font-size: 1rem; }
.auth-card button.primary { margin-top: .8rem; padding: .65rem; font-size: .95rem; }
.auth-card .qr { display: flex; justify-content: center; margin: 1rem 0; padding: .8rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.auth-card .qr svg { width: min(15rem, 100%); height: auto; }
.auth-card .secret { font-size: .95rem; letter-spacing: .06em; word-break: break-all; }
.recovery-codes { columns: 2; font-size: 1.05rem; line-height: 2; padding-left: 1.8rem; font-variant-numeric: tabular-nums; }
.recovery-codes code { letter-spacing: .08em; background: none; }
.auth-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
form.stack { display: flex; flex-direction: column; gap: .55rem; max-width: 24rem; }
form.stack label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; font-weight: 600; }
form.stack button { align-self: flex-start; margin-top: .3rem; }
.nav-logout { display: inline; margin: 0; }
.nav-logout button { background: none; border: 0; box-shadow: none; font: inherit; font-size: .875rem; cursor: pointer; }
tr.audit-bad td { color: var(--poor); }
.copied { color: var(--great) !important; border-color: var(--accent-line) !important; }

/* ---------- users and invitations ---------- */
.invite-ready { border-color: var(--accent-line); background: linear-gradient(var(--accent-soft), var(--panel) 6rem); }
.copy-row { display: flex; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.copy-row input { flex: 1; min-width: 0; font-family: var(--mono); font-size: .82rem; }
.invite-form { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }
.invite-form label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; font-weight: 600; flex: 1 1 14rem; }
.invite-form label:has(select) { flex: 0 1 9rem; }
.inline-form select { padding: .22rem .4rem; font-size: .85rem; width: auto; }
.invite-code { font-family: var(--mono); font-size: 1.1rem; letter-spacing: .12em; }

/* ======================================================================== */
/* Tablet: one column, the sidebar above the results.                       */
/* ======================================================================== */
@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .sidebar { position: static; max-height: none; overflow: visible; }
  .topbar { gap: 1rem; }
  .brand-name em { display: none; }
}

/* ======================================================================== */
/* Phone                                                                    */
/* ======================================================================== */
@media (max-width: 760px) {
  body { font-size: 15px; }
  main { padding-top: 1.1rem; padding-bottom: 6rem; }

  /* A two-row bar would eat a fifth of the screen if it stuck, so it scrolls away, and the
     nav becomes one swipeable strip rather than wrapping onto three lines. */
  .topbar { position: relative; flex-direction: column; align-items: stretch; gap: .25rem; padding: .55rem 0 .35rem; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel-2); }
  .brand { padding: 0 var(--gutter); }
  .topbar nav {
    overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter) .1rem; scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav .nav-account { margin-left: 0; }
  .topbar nav::after { content: ""; flex: 0 0 1.5rem; }

  .hero { margin-top: -1.1rem; padding-top: 1.4rem; padding-bottom: 1rem; }
  .hero::before { -webkit-mask-image: linear-gradient(170deg, transparent 30%, #000 90%); mask-image: linear-gradient(170deg, transparent 30%, #000 90%); }
  .hero-stats { gap: .5rem 1.4rem; }

  /* Presets: one swipeable row per group instead of a screenful of wrapped pills. */
  .presets { grid-template-columns: minmax(0, 1fr); gap: .15rem; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  .preset-group-label { padding: .45rem var(--gutter) 0; }
  .preset-row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: .2rem var(--gutter) .45rem;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  }
  .preset-row::-webkit-scrollbar { display: none; }
  .preset-row::after { content: ""; flex: 0 0 .1rem; }
  .preset { scroll-snap-align: start; }

  .switches { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: .4rem; }
  .switch { width: 100%; }
  .switch .seg { flex: 1 0 auto; text-align: center; }

  .sortbar {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) .2rem;
  }
  .sortbar::-webkit-scrollbar { display: none; }
  .sortbar .chip { white-space: nowrap; flex-shrink: 0; }

  .head-actions { width: 100%; flex-wrap: nowrap; }
  .head-actions .button { flex: 1 1 auto; padding-left: .55rem; padding-right: .55rem; font-size: .8rem; }
  #map { height: 14rem; }
  .map-bar { align-items: flex-end; }

  /* The results table becomes one card per listing. Numbers keep their labels, since the
     column headers are gone. */
  .results-wrap { max-height: none; overflow: visible; border: 0; background: none; box-shadow: none; }
  .results-wrap table.listings, .results-wrap tbody { display: block; }
  .results-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .results-wrap tbody tr {
    display: grid; position: relative;
    grid-template-columns: 2.9rem repeat(3, minmax(0, 1fr)) 1.6rem;
    grid-template-areas:
      "score title title title pick"
      ".     price ratio pp2   pp2"
      ".     area  build build build"
      ".     deal  deal  deal  deal";
    gap: .55rem .6rem; padding: .9rem .9rem 1rem;
    margin-bottom: .6rem; background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow);
  }
  .results-wrap tbody tr:hover { background: var(--panel); }
  .results-wrap tbody td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
  .results-wrap td.pick { grid-area: pick; width: auto; justify-self: end; }
  .results-wrap td.pick .pickbox { width: 1.25rem; height: 1.25rem; }
  .results-wrap td.score-cell { grid-area: score; }
  .results-wrap td.score-cell .score { min-width: 2.6rem; padding: .3rem .3rem; font-size: 1.05rem; }
  .results-wrap td.score-cell .score-label { text-align: center; }
  .results-wrap td.title { grid-area: title; }
  .results-wrap td.title .listing-link { font-size: .97rem; line-height: 1.3; display: block; }
  .results-wrap td.price-cell { grid-area: price; }
  .results-wrap td.ratio-cell { grid-area: ratio; }
  .results-wrap td.pp2-cell { grid-area: pp2; }
  .results-wrap td.area-cell { grid-area: area; }
  .results-wrap td.build-cell { grid-area: build; }
  .results-wrap td.deal { grid-area: deal; min-width: 0; padding-top: .55rem; border-top: 1px solid var(--line); }
  .results-wrap td[data-label]::before {
    content: attr(data-label); display: block; font-size: .7rem; font-weight: 500; color: var(--muted); margin-bottom: .05rem;
  }
  .results-wrap td.deal::before { display: none; }
  .results-wrap .tags { flex-direction: row; flex-wrap: wrap; }

  .compare-bar { left: var(--gutter); right: var(--gutter); transform: none; justify-content: space-between; padding-left: .9rem; }
  .compare-bar #compare-count { flex: 1; min-width: 0; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } }

  .panel { padding: 1rem 1rem 1.1rem; border-radius: var(--radius); }
  .chart.tall { height: 21rem; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .kpi { padding: .7rem .8rem; }
  .kpi-value { font-size: 1.3rem; }

  table.kv th { width: 40%; padding-right: .7rem; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery img { height: 6rem; }

  .catch, .catch-section > header { padding-left: 1.05rem; padding-right: .9rem; }

  .foot-inner { grid-template-columns: minmax(0, 1fr); }

  .recovery-codes { columns: 1; }
  .auth-card { padding: 1.3rem 1.2rem 1.4rem; margin-top: .5rem; }
  .db-actions form { flex-wrap: wrap; }
}

/* iOS zooms into any focused field under 16px and never zooms back out. */
@media (max-width: 760px) and (pointer: coarse) {
  input[type=search], input[type=number], input[type=text], input[type=email], input[type=password],
  input[type=date], select, textarea { font-size: 16px; }
}
/* Fingers need taller targets than a cursor. */
@media (pointer: coarse) {
  .check { padding-top: .32rem; padding-bottom: .32rem; }
  .chip { padding: .38rem .8rem; }
  .fgroup > summary { padding-top: .6rem; padding-bottom: .55rem; }
  .fgroup > summary::before { top: .98rem; }
  .fgroup[open] > summary::before { top: .9rem; }
}

@media print {
  .topbar, .sidebar, .presets, .compare-bar, .head-actions, #map, .map-bar, .sortbar, .foot, .auth-actions, .skip-link { display: none !important; }
  body { background: #fff; }
  body::before, .hero::before { display: none; }
  .layout { display: block; }
  .panel, .table-wrap, .auth-card { box-shadow: none; }
  .auth-card { border: 0; }
  .table-wrap { max-height: none; overflow: visible; }
}
.backup-now { margin-bottom: .9rem; }
/* Invitations: the ready-to-paste message, and the authenticator link on a phone. */
.copy-row textarea { flex: 1; min-width: 0; font: inherit; font-size: .85rem; resize: vertical; }
.copy-row:has(textarea) { align-items: flex-start; }
.invite-ready details { margin-top: .3rem; }
.otp-open { display: inline-block; margin: .2rem 0 .6rem; }

/* Buttons side by side in an auth card line up: the form-wide margin and padding on the
   primary button are for a lone full-width submit, not for a row of actions. */
.auth-card .auth-actions { align-items: center; }
.auth-card .auth-actions > button, .auth-card .auth-actions > .button { margin-top: 0; padding: .55rem 1rem; font-size: .9rem; }

/* ---------- analysis: the price-vs-size explorer ---------- */
.scatter-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin: .7rem 0 .6rem; }
.scatter-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.legend-lead { font-size: .78rem; font-weight: 600; color: var(--muted); margin-right: .2rem; }
.legend-item {
  display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; font-size: .8rem; font-weight: 500;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--line-strong); box-shadow: none; color: var(--ink-2);
}
.legend-item i { width: .62rem; height: .62rem; border-radius: 50%; flex-shrink: 0; }
.legend-item b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.legend-item[aria-pressed="false"] { opacity: .5; background: var(--bg-sunken); text-decoration: line-through; text-decoration-color: var(--muted); }
.legend-item[aria-pressed="false"] i { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--muted); }
.scatter-actions { display: flex; gap: .35rem; }
.scatter-actions .chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.hint-coarse, #scatter-select { display: none; }
@media (pointer: coarse) {
  .hint-fine { display: none; }
  .hint-coarse { display: inline; }
  #scatter-select { display: inline-flex; }
}

.scatter-zoombar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem;
  padding: .55rem .6rem .55rem .9rem; margin-bottom: .7rem; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: .86rem; animation: rise-in .25s var(--ease);
}
.scatter-zoombar { min-height: 3.5rem; }
.scatter-zoombar.idle { background: var(--panel-2); border-color: var(--line); border-style: dashed; color: var(--muted); animation: none; }
.zoom-links { display: flex; flex-wrap: wrap; gap: .4rem; }
@keyframes rise-in { from { opacity: 0; transform: translateY(-4px); } }

.scatter-body { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1.2rem; align-items: start; }
.scatter-chart { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.scatter-chart canvas { cursor: crosshair; }
.scatter-box {
  position: absolute; pointer-events: none; border: 1.5px solid var(--accent);
  background: rgba(31, 81, 53, .08); border-radius: 3px;
}

.scatter-side { min-width: 0; }
.scatter-side h3 { margin: 0 0 .45rem; font-size: .88rem; }
.scatter-pick {
  position: relative; padding: .8rem .9rem .9rem; margin-bottom: 1rem; border-radius: var(--radius);
  background: var(--panel-2); border: 1px solid var(--line); box-shadow: var(--shadow-md); animation: rise-in .2s var(--ease);
}
.scatter-pick[hidden] { display: none; }
.pick-close {
  position: absolute; top: .35rem; right: .35rem; width: 1.8rem; height: 1.8rem; padding: 0;
  border: 0; background: none; box-shadow: none; font-size: 1.15rem; color: var(--muted); border-radius: 6px;
}
.pick-top { display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; }
.pick-title { display: block; font-weight: 600; color: var(--ink); line-height: 1.3; margin-right: 1.4rem; }
.pick-title:hover { color: var(--accent); }
.pick-figures { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; margin: .7rem 0 .8rem; }
.pick-figures dt { font-size: .72rem; color: var(--muted); }
.pick-figures dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.scatter-pick .button { width: 100%; }

.deal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.deal-list a {
  display: flex; align-items: flex-start; gap: .55rem; padding: .45rem .5rem; margin: 0 -.5rem;
  border-radius: 8px; color: var(--ink); transition: background-color .12s;
}
.deal-list a:hover, .deal-list a:focus-visible { background: var(--accent-soft); text-decoration: none; }
.deal-list .ratio { flex-shrink: 0; min-width: 3.1rem; text-align: center; font-size: .78rem; }
.deal-text { min-width: 0; display: flex; flex-direction: column; }
.deal-title { font-size: .84rem; font-weight: 550; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-empty { padding: .4rem 0; }
#scatter-note { margin-top: .7rem; }

.chart-hint { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; }
.chart-hint svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--accent); }

@media (max-width: 1100px) {
  .scatter-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .scatter-zoombar { padding: .6rem .7rem; }
  .zoom-links, .zoom-links .button { flex: 1 1 auto; }
}
.deal-sub { margin: -.3rem 0 .5rem; }