/* Fimacode portal. One stylesheet, no framework, no web fonts: fast and private. */

:root {
  --ink: #0b1b2b;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --bg: #f6f8fb;
  --card: #ffffff;
  --brand: #0b3d5c;
  --brand-2: #0f5f8a;
  --brand-soft: #e8f1f7;
  --accent: #0d9488;
  --accent-soft: #e6f6f4;
  --danger: #b42318;
  --danger-soft: #fef3f2;
  --success: #067647;
  --success-soft: #ecfdf3;
  --warning: #b54708;
  --warning-soft: #fffaeb;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgb(15 23 42 / 6%), 0 4px 16px rgb(15 23 42 / 6%);
  --shadow-lg: 0 2px 4px rgb(15 23 42 / 6%), 0 16px 40px rgb(15 23 42 / 10%);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1120px;
}

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

/* Component display rules (inputs are display:block) must not undo the hidden attribute. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
}

/* One title size on every working page; only the landing hero is larger. */
h1 {
  font-size: 1.625rem;
  font-weight: 750;
  line-height: 1.25;
}

.hero h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.2;
}

@media (max-width: 640px) {
  h1 {
    font-size: 1.375rem;
  }
}

h2 {
  font-size: 1.25rem;
  font-weight: 700;
}

.section h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
}

h3 {
  font-size: 1.05rem;
  font-weight: 650;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--brand-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--brand);
}

:focus-visible {
  outline: 3px solid #5eead4;
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--card);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  z-index: 10;
}

.skip:focus {
  left: 8px;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.875rem;
}

.center {
  text-align: center;
}

.mt {
  margin-top: 14px;
}

/* Header */

.site-header {
  background: rgb(255 255 255 / 92%);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: saturate(1.4) blur(8px);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 750;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.brand img {
  width: 30px;
  height: 30px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.site-nav a,
.site-nav button.linkish {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.9375rem;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.site-nav a:hover,
.site-nav button.linkish:hover {
  background: var(--bg);
  color: var(--ink);
}

/* The language comes last and small, as a code: EN on a Greek page, ΕΛ on an English one. */
.site-nav .lang {
  margin-left: 6px;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.site-nav a.nav-upgrade {
  color: var(--accent);
  font-weight: 700;
}

.site-nav a.nav-upgrade:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Account: one button for everything about the account, and signing out in its menu. */
.nav-account {
  position: relative;
  margin-left: 6px;
}

.nav-account > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink-2);
  font-weight: 550;
  font-size: 0.9375rem;
  list-style: none;
  cursor: pointer;
}

.nav-account > summary::-webkit-details-marker {
  display: none;
}

.nav-account > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin: -3px 0 0 2px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}

.nav-account > summary:hover,
.nav-account[open] > summary,
.nav-account > summary.is-current {
  border-color: var(--brand-2);
  color: var(--ink);
}

.nav-account .nav-menu-panel {
  min-width: 260px;
}

.site-nav .nav-menu-panel a {
  white-space: nowrap;
}

.nav-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
  font-size: 0.8125rem;
}

.nav-who {
  margin: 0;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.nav-menu-panel hr {
  width: 100%;
  margin: 4px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.nav-signup .short {
  display: none;
}

@media (max-width: 640px) {
  .nav-signup .long {
    display: none;
  }

  .nav-signup .short {
    display: inline;
  }
}

@media (max-width: 900px) {
  .site-nav .hide-md {
    display: none;
  }
}

.site-nav a.btn-primary,
.site-nav a.btn-primary:hover {
  color: #fff;
  background: var(--brand);
  margin-left: 6px;
}

.site-nav a.btn-primary:hover {
  background: var(--brand-2);
}

.inline {
  display: inline;
  margin: 0;
}

.show-sm {
  display: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* On a phone the signed-in links fold into one menu button. */
.nav-menu {
  display: none;
  position: relative;
}

.nav-menu > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--brand);
  list-style: none;
  cursor: pointer;
}

.nav-menu > summary::-webkit-details-marker {
  display: none;
}

.nav-menu svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
}

.site-nav .nav-menu-panel a,
.site-nav .nav-menu-panel button.linkish {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  text-align: left;
}

.nav-menu-panel form {
  display: block;
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 4px;
}

.nav-menu-panel svg {
  width: 18px;
  height: 18px;
}

/* The signed-in bar needs about 960px; below that it folds into the menu button. */
@media (max-width: 1000px) {
  .nav-links {
    display: none;
  }

  .nav-menu {
    display: block;
  }
}

/* A visitor's links stay in the bar down to 900px; the menu takes over below that, and
   below 480px it also holds Sign in, so the bar fits a phone. */
@media (min-width: 901px) {
  .nav-menu-guest {
    display: none;
  }
}

@media (max-width: 480px) {
  .site-nav .hide-xs {
    display: none;
  }
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 650;
  font-size: 0.9375rem;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgb(11 61 92 / 30%);
}

.btn-primary:hover {
  background: var(--brand-2);
  color: #fff;
}

.btn-secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-2);
}

.btn-secondary:hover {
  background: var(--bg);
  color: var(--ink);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  background: #912018;
  color: #fff;
}

.btn-block {
  width: 100%;
}

.btn-sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.875rem;
}

button.linkish {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--brand-2);
  padding: 0;
}

/* Landing */

.hero {
  padding: 72px 0 56px;
  background:
    radial-gradient(1000px 400px at 85% -10%, rgb(94 234 212 / 18%), transparent 60%),
    radial-gradient(800px 360px at 0% 0%, rgb(15 95 138 / 10%), transparent 60%);
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

/* The home page's live figures, between the hero and the features. */
.numbers {
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.numbers .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.estimate-trust {
  margin-top: 12px;
  margin-bottom: 0;
  color: var(--ink-2);
}

.numbers strong {
  display: block;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--brand);
}

.numbers span {
  color: var(--ink-2);
}

@media (max-width: 620px) {
  .numbers .wrap {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.lead {
  font-size: 1.125rem;
  color: var(--ink-2);
  max-width: 38em;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 12px;
}

.hero-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 22px;
}

.hero-card .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}

.hero-card .row:last-child {
  border-bottom: 0;
}

.hero-card .label {
  color: var(--muted);
  font-size: 0.875rem;
}

.hero-card .value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.drop {
  color: var(--success);
  font-weight: 650;
  font-size: 0.875rem;
}

.section {
  padding: 64px 0;
}

.section-alt {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  max-width: 44em;
  margin: 0 auto 36px;
  text-align: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.feature .icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  margin-bottom: 14px;
}

.feature .icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature p {
  color: var(--ink-2);
  margin: 0;
}

.trust {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  max-width: 820px;
  margin: 0 auto;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid #b7e4de;
}

.trust .icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
}

.trust .icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust p {
  margin: 0;
  color: var(--ink-2);
}

/* Pricing */

.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}

.plans-compact {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.plan.popular {
  border: 2px solid var(--brand);
  box-shadow: var(--shadow-lg);
}

.plan.current {
  border-color: var(--accent);
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.6;
  background: var(--brand-soft);
  color: var(--brand);
}

.badge-accent {
  background: var(--accent-soft);
  color: var(--accent);
}

.badge-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-muted {
  background: var(--bg);
  color: var(--muted);
}

.plan .badge-top {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--brand);
  color: #fff;
}

.plan h3 {
  margin-bottom: 2px;
}

.plan .for {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
  min-height: 2.9em;
  margin-bottom: 0;
}

.price {
  white-space: nowrap;
  margin: 14px 0 18px;
  font-size: 2.1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.price small {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.price .from {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
  margin-right: 4px;
}

.ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
}

.ticks li {
  position: relative;
  padding: 5px 0 5px 26px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Auth */

.auth {
  display: grid;
  place-items: start center;
  padding: 56px 16px 72px;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 32px;
}

.auth-foot {
  margin-top: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Forms */

.field {
  margin-bottom: 18px;
}

label,
.label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 6px;
  color: var(--ink);
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.label-row a {
  font-size: 0.875rem;
  font-weight: 500;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"] {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:hover {
  border-color: #94a3b8;
}

input:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 4px rgb(15 95 138 / 15%);
}

input[aria-invalid="true"] {
  border-color: var(--danger);
}

.code-input {
  font-family: var(--mono);
  font-size: 1.6rem !important;
  letter-spacing: 0.4em;
  text-align: center;
}

.hint {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
  flex-shrink: 0;
}

.prefix {
  display: flex;
}

.prefix span {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--bg);
  color: var(--ink-2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.prefix input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.turnstile {
  margin: 4px 0 18px;
  min-height: 65px;
}

/* Messages */

.alert {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-size: 0.9375rem;
  border: 1px solid;
}

.alert-error {
  background: var(--danger-soft);
  border-color: #fecdca;
  color: var(--danger);
}

.alert-success {
  background: var(--success-soft);
  border-color: #abefc6;
  color: var(--success);
}

.alert-info {
  background: var(--brand-soft);
  border-color: #c7dcea;
  color: var(--brand);
}

.alert-warning {
  background: var(--warning-soft);
  border-color: #fedf89;
  color: var(--warning);
}

/* Account */

.account {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 36px 24px 72px;
}

.side-nav {
  position: sticky;
  top: 88px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-nav .org {
  font-weight: 700;
  padding: 0 12px 4px;
  overflow-wrap: anywhere;
}

.side-nav .org-plan {
  padding: 0 12px 16px;
}

.side-nav a {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 550;
}

.side-nav a:hover {
  background: var(--card);
  color: var(--ink);
}

.side-nav a[aria-current="page"] {
  background: var(--card);
  color: var(--brand);
  box-shadow: var(--shadow);
}

.page-head {
  margin-bottom: 24px;
}

.page-head p {
  color: var(--muted);
  margin: 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}

.card h2 {
  font-size: 1.125rem;
  margin-bottom: 4px;
}

.card .card-lead {
  color: var(--muted);
  font-size: 0.9375rem;
  margin-bottom: 18px;
}

.card-danger {
  border-color: #fecdca;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.stat .label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.stat .value {
  font-size: 1.75rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat .sub {
  color: var(--muted);
  font-size: 0.875rem;
}

.meter-svg {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 12px;
}

.meter-svg .track {
  fill: var(--line);
}

.meter-svg .fill {
  fill: var(--accent);
}

.chart {
  width: 100%;
  height: auto;
  display: block;
}

.chart .bar {
  fill: var(--brand-2);
}

.chart .bar-error {
  fill: #f97066;
}

.chart .base {
  stroke: var(--line);
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.8125rem;
  margin-top: 6px;
}

.empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.list li:last-child {
  border-bottom: 0;
}

.person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
  flex-shrink: 0;
}

.person .who {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.person .meta {
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.plan-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.plan-name {
  font-size: 1.5rem;
  font-weight: 750;
}

/* Search */

.wrap.search {
  max-width: 1280px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 28px;
  padding-top: 20px;
  padding-bottom: 72px;
}

/* Statistics and valuation keep their form beside the results; it stays in view while
   they scroll. Above the results, a sticky form would cover them. */
@media (min-width: 961px) {
  .wrap.search:not(.with-map) {
    grid-template-columns: 290px minmax(0, 1fr);
  }
}

/* The filters in one bar over the list and the map: the common ones as buttons that
   open a small panel, the rest behind "Filters". */
.filter-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.filter-bar .segmented {
  flex: none;
  margin: 0;
  min-height: 44px;
  box-sizing: border-box;
}

.filter-bar .segmented span {
  white-space: nowrap;
  padding-left: 14px;
  padding-right: 14px;
}

.place-box {
  flex: 1 1 300px;
  min-width: 0;
}

/* Price, Bedrooms, Type and Filters: in the bar's row on a wide screen, a row of their
   own that scrolls sideways on a phone. */
.bar-pills {
  display: contents;
}

.place-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.place-fields .field {
  flex: 1 1 160px;
  margin: 0;
}

.place-fields label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 4px;
}

/* With the script, the three place fields become one box of chips and a picker. */
.place-box.is-live .place-fields {
  display: none;
}

.place-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 2px 8px 2px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.place-chips:focus-within {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.place-chips > svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.place-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
  font-size: 0.875rem;
}

.place-chip button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.place-chip button:hover {
  background: var(--card);
}

.place-chip-list {
  display: contents;
}

/* What tells two places of one name apart: "whole town", "quarter", the town it lies in. */
.place-chip-note {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.where-name {
  font-weight: 600;
}

.where-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  vertical-align: 1px;
}

.where-parent {
  margin-left: 6px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.place-chips .picker {
  flex: 1 1 140px;
  min-width: 0;
}

.place-chips input,
.place-chips input:focus {
  width: 100%;
  height: 32px;
  border: 0;
  outline: 0;
  box-shadow: none;
  padding: 0 28px 0 0;
  background: transparent;
  font: inherit;
}

/* Price, Bedrooms and Filters: a button that opens its panel under it. */
.pop {
  position: relative;
}

.pop > summary,
.bar-select select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.pop > summary::-webkit-details-marker {
  display: none;
}

.pop > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(-2px) rotate(45deg);
}

.more-filters > summary::after {
  display: none;
}

/* Every "show more" fold opens the same way: a link-coloured label with a chevron that
   turns down when open, instead of the browser's bare triangle. */
.pro > summary,
.more > summary,
.bands > summary,
.pin-coords > summary,
.report-for > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand);
}

.pro > summary::-webkit-details-marker,
.more > summary::-webkit-details-marker,
.bands > summary::-webkit-details-marker,
.pin-coords > summary::-webkit-details-marker,
.report-for > summary::-webkit-details-marker {
  display: none;
}

.pro > summary::before,
.more > summary::before,
.bands > summary::before,
.pin-coords > summary::before,
.report-for > summary::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.pro[open] > summary::before,
.more[open] > summary::before,
.bands[open] > summary::before,
.pin-coords[open] > summary::before,
.report-for[open] > summary::before {
  transform: translateY(-2px) rotate(45deg);
}

.pro > summary:hover,
.more > summary:hover,
.bands > summary:hover,
.pin-coords > summary:hover,
.report-for > summary:hover {
  text-decoration: underline;
}

.pop > summary svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
}

.pop.is-set > summary,
.bar-select.is-set select {
  border-color: var(--brand-2);
  background: var(--brand-soft);
  color: var(--brand);
}

.bar-select select {
  height: 44px;
  appearance: none;
  padding-right: 36px;
}

/* The same chevron as Price and Bedrooms, drawn beside the list rather than by the browser. */
.bar-select {
  position: relative;
  display: inline-flex;
  align-self: center;
  margin: 0;
  font-size: 1rem;
  color: var(--ink-2);
}

.bar-select.is-set {
  color: var(--brand);
}

.bar-select::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-size: 0.75rem;
}

.pop-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 300px;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pop-panel .range {
  margin: 0;
}

.quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quick button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.quick button[aria-pressed="true"] {
  border-color: var(--brand-2);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

/* "Filters": a side panel on a wide screen, the whole screen on a phone. */
.more-panel {
  left: auto;
  right: 0;
  width: 400px;
  max-height: min(70vh, 640px);
  padding: 0;
  gap: 0;
}

.more-head,
.more-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

.more-head {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.more-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.more-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-2);
  font-size: 1.3rem;
  cursor: pointer;
}

.more-body {
  overflow-y: auto;
  padding: 14px 18px 4px;
}

.more-body .field,
.more-body .range,
.more-body .checks {
  margin: 0 0 14px;
}

.more-body label,
.more-body legend {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.more-body .check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

.more-body select,
.more-body input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.more-body .range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.more-body .range legend {
  grid-column: 1 / -1;
}

.pro > summary {
  margin: 4px 0 14px;
}

.more-foot {
  justify-content: space-between;
  border-top: 1px solid var(--line);
  font-weight: 600;
}

/* With the script the bar applies each change at once, so the button is not needed. */
.filter-bar.is-live .bar-submit {
  display: none;
}

.active-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.active-chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: none;
}

.active-chips a span {
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
}

.active-chips a:hover {
  border-color: var(--brand-2);
  color: var(--brand);
}

.active-chips .chips-clear {
  border: 0;
  background: none;
  font-weight: 600;
  color: var(--brand-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sort-by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--muted);
}

/* How many are shown and in what order, on one line under the heading. */
.results-bar {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.results-range {
  margin: 0;
}

.sort-by .bar-select select {
  height: 40px;
  min-height: 40px;
}

.filters {
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.filters .field {
  margin-bottom: 14px;
}

.filters label,
.filters legend {
  font-size: 0.875rem;
}

select {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 8px 34px 8px 12px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background-color: var(--card);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  appearance: none;
}

.picker {
  position: relative;
}

.picker input[role="combobox"] {
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.picker-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.picker-list [role="option"] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  font-size: 0.9375rem;
  border-radius: 6px;
  cursor: pointer;
}

.picker-list [role="option"]:hover,
.picker-list [role="option"].is-active {
  background: var(--brand-soft);
}

.picker-list [aria-selected="true"] {
  font-weight: 600;
  color: var(--brand);
}

.picker-name {
  min-width: 0;
}

.picker-alt {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
}

.picker-count {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.picker-group {
  position: sticky;
  top: -4px;
  padding: 8px 10px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--card);
}

.picker-empty {
  padding: 10px;
  font-size: 0.875rem;
  color: var(--muted);
}

select:hover {
  border-color: #94a3b8;
}

select:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 4px rgb(15 95 138 / 15%);
}

select[aria-invalid="true"] {
  border-color: var(--danger);
}

.filters input[type="text"] {
  min-height: 42px;
  font-size: 0.9375rem;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  margin-bottom: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.segmented label {
  margin: 0;
  cursor: pointer;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  display: block;
  padding: 7px 8px;
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink-2);
  border-radius: 6px;
}

.segmented input:checked + span {
  background: var(--card);
  color: var(--brand);
  box-shadow: var(--shadow);
}

.segmented input:focus-visible + span {
  outline: 3px solid #5eead4;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

fieldset legend {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  padding: 0;
}

.range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.range legend {
  grid-column: 1 / -1;
}

.checks {
  margin-bottom: 14px;
}

.checks .check {
  font-size: 0.875rem;
  margin-bottom: 6px;
}

.more {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 4px 0 16px;
  padding: 4px 0;
}

.more summary {
  padding: 8px 0;
}

.more[open] summary {
  margin-bottom: 8px;
}

.filter-actions {
  display: grid;
  gap: 8px;
}

.btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.results-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 16px;
}

.results-head h1 {
  margin: 0;
}

.results-head p {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.save-search {
  flex: 1 0 100%;
  margin-top: 8px;
}

.notify-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

/* After a search: one line saying what it is for, and the button beside it. */
.notify-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.notify-bar p {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  color: var(--brand);
}

.notify-bar svg,
.notify-open svg,
.notify-head svg,
.notify-actions svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The "Notify me" dialog: one card over the dimmed page; full screen on a phone. */
.notify-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.notify-dialog::backdrop {
  background: rgb(11 27 43 / 45%);
}

.notify-form {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}

.notify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--line);
}

.notify-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
}

.notify-close {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.notify-body {
  overflow-y: auto;
  padding: 16px 22px 8px;
}

.notify-group {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.notify-group legend {
  margin-bottom: 8px;
  padding: 0;
  font-weight: 600;
}

.area-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.area-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
}

.chip-remove {
  border: 0;
  background: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.area-add {
  display: flex;
  gap: 8px;
}

.area-add input {
  flex: 1;
  min-width: 0;
}

.notify-group .check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-weight: 400;
}

.check-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 0 8px;
}

.check-row .check {
  margin: 0;
}

.check-row select {
  width: auto;
}

/* Three choices that read as one control. */
.segmented {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.segmented label {
  flex: 1;
  margin: 0;
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented span {
  display: block;
  padding: 9px 6px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}

.segmented label + label span {
  border-left: 1px solid var(--line);
}

.segmented input:checked + span {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--brand-2);
  outline-offset: -2px;
}

.notify-estimate {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 14px;
}

.notify-estimate:empty {
  display: none;
}

.notify-estimate.is-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.notify-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}

.notify-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* A label never breaks inside its button. When the two do not fit side by side, the
   main one takes the top row and Cancel the row under it, each the full width. */
.notify-actions {
  flex-wrap: wrap-reverse;
}

.notify-actions .btn {
  flex: 1 1 auto;
  white-space: nowrap;
}

@media (min-width: 641px) {
  .notify-actions .btn {
    flex: 0 1 auto;
  }
}

@media (max-width: 640px) {
  .notify-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .notify-form {
    height: 100%;
    max-height: none;
  }

  .notify-body {
    flex: 1;
  }
}

.save-search .hint,
.save-search .field {
  flex: 1 0 100%;
  margin: 0;
}

.to-filters {
  display: none;
  order: 2;
  font-weight: 600;
}

/* Search map */

.view-toggle {
  display: inline-flex;
  gap: 6px;
}

.view-toggle[hidden] {
  display: none;
}

.view-toggle .btn[aria-pressed="true"] {
  background: var(--brand-soft);
  border-color: var(--brand-2);
  color: var(--brand);
}

.view-toggle svg,
.shape-row svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.map-pane[hidden] {
  display: none;
}

/* On the map itself, top left, as map apps do: Draw, and Search this area once zoomed in. */
.map-tools {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 56px;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.map-tools > * {
  pointer-events: auto;
}

.map-tools .btn {
  border-color: transparent;
  background: var(--card);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.16);
}

.map-tools .map-area {
  margin: 0 auto;
}

.map-tools .btn[hidden],
.map-shapes[hidden],
.drawing .map-tools {
  display: none;
}

.map-draw svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.map-draw-group {
  position: relative;
}

.map-shapes {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.map-shapes .btn {
  justify-content: flex-start;
  box-shadow: none;
}

.map-tools .btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.map-tools .btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.map-hint {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 52px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 0.875rem;
}

.map-hint[hidden],
.map-hint .btn[hidden] {
  display: none;
}

.map-hint span {
  flex: 1 1 200px;
}

.map {
  position: relative;
  flex: 1;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #eef2f6;
}

.map-status {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.8125rem;
  color: var(--muted);
}

.map-status.is-warning {
  color: var(--warning);
}

.map-status.is-error {
  color: var(--danger);
}

.map-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 8px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: 650 0.75rem/1.2 var(--font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgb(15 23 42 / 30%);
  cursor: pointer;
}

.map-marker:hover,
.map-marker:focus-visible {
  background: var(--brand-2);
  outline: none;
  z-index: 2;
}

.map-marker.approx {
  background: #fff;
  border-color: var(--brand-2);
  border-style: dashed;
  color: var(--brand);
}

.map-marker.group {
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  background: var(--accent);
}

.map-marker.group.medium {
  min-width: 36px;
  height: 36px;
}

.map-marker.group.large {
  min-width: 44px;
  height: 44px;
  font-size: 0.8125rem;
}

/* Close in, a group shows its lowest price with its count beside it. */
.map-marker.group.priced {
  gap: 5px;
  min-width: 0;
  height: auto;
  padding: 3px 4px 3px 8px;
}

.map-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font-size: 0.6875rem;
}

/* An open popup sits above the zoom buttons, which would hide its close button. */
.map .maplibregl-popup {
  z-index: 3;
}

.drawing .map-marker {
  pointer-events: none;
  opacity: 0.6;
}

.map-popup {
  display: grid;
  gap: 6px;
  font-family: var(--font);
  font-size: 0.875rem;
  color: var(--ink);
}

.map-popup strong {
  font-size: 1rem;
}

.shape-chip {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
}

.shape-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

.shape-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shape-chip .hint {
  margin-bottom: 0;
}

@media (min-width: 1280px) {
  .wrap.search.map-ready {
    max-width: 1760px;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .wrap.search.map-ready .map-pane {
    position: sticky;
    top: 84px;
    align-self: start;
    height: calc(100vh - 100px);
  }
}

@media (max-width: 1279px) {
  .wrap.search.show-map .results > :not(.results-head, .map-pane) {
    display: none;
  }

  .wrap.search.show-map .map {
    flex: none;
    height: 70vh;
  }
}

.result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.result {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.result:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}

.thumb {
  position: relative;
  display: block;
  text-decoration: none;
  width: 240px;
  height: 180px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No photo to show: a calm box that names whose photo it is, so it never reads as ours. */
.no-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #eef2f6, #e4eaf0);
  color: var(--muted);
  text-align: center;
}

.no-photo strong {
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 650;
}

.no-photo small {
  font-size: 0.75rem;
  line-height: 1.3;
}

.no-photo svg {
  margin-bottom: 2px;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.result-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2px 4px 0 0;
}

/* "New" on the photo of an offer first seen in the last few days. */
.badge-new {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--success);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.result-title {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
  margin: 0 0 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.result-title a {
  color: var(--ink);
  text-decoration: none;
}

.result-title a:hover {
  color: var(--brand-2);
  text-decoration: underline;
}

.result-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 4px;
}

.result-price .amount {
  font-size: 1.35rem;
  color: var(--brand);
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.result-price .amount small {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}

.result-price .per-sqm {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.change {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.change.down {
  background: var(--success-soft);
  color: var(--success);
}

.change.up {
  background: var(--danger-soft);
  color: var(--danger);
}

.result-place {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0 0 8px;
}

.facts {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.facts li {
  padding: 2px 9px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.result-foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.result-foot .source {
  font-weight: 600;
  color: var(--ink-2);
}

/* A development: many offers at one place, type, bedroom count and price. */
.project-note {
  margin: 4px 0 6px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.project-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--warning-soft);
  color: var(--warning);
  font-weight: 700;
}

.project-note a {
  font-weight: 700;
  white-space: nowrap;
}

/* The same home on other websites: a red pill, so a client sees it can compare. */
.result-foot .compare {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 700;
  text-decoration: none;
}

.result-foot .compare:hover,
.result-foot .compare:focus-visible {
  background: var(--danger);
  color: #fff;
}

.result-foot .open {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  text-decoration: none;
}

.result-foot svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flag {
  display: inline-flex;
  color: var(--warning);
  cursor: help;
}

/* What the home has, as the site states it: sea view, pool, lift, parking, furniture. */
.feature-tags {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.feature-tags li {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Floor and features in the Filters panel: tap targets, not small boxes. */
.seg-field,
.feature-checks {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
}

.seg-choice {
  display: flex;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.seg-choice label {
  flex: 1;
  margin: 0;
}

.seg-choice input,
.check-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg-choice span {
  display: block;
  padding: 9px 4px;
  text-align: center;
  font-weight: 500;
  cursor: pointer;
}

.seg-choice label + label span {
  border-left: 1px solid var(--line-2);
}

.seg-choice input:checked + span {
  background: var(--brand);
  color: #ffffff;
  font-weight: 600;
}

.seg-choice input:focus-visible + span,
.check-pill input:focus-visible + span {
  outline: 2px solid var(--brand-2);
  outline-offset: -2px;
}

.feature-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.more-body .feature-checks legend {
  flex: 1 0 100%;
}

.more-body .check-pill {
  display: inline-block;
  margin: 0;
  font-weight: 400;
}

.check-pill span {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
}

.check-pill input:checked + span {
  border-color: var(--brand-2);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

/* A doubt about the offer, in words; a click or tap opens the reason. */
.result-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.flag-tag > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid #fedf89;
  border-radius: 6px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 0.8125rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.flag-tag > summary::-webkit-details-marker {
  display: none;
}

.flag-tag > summary svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flag-tag > p {
  margin: 6px 0 0;
  max-width: 46ch;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.notify-bar-rate {
  font-weight: 400;
  color: var(--ink-2);
}

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.site-nav a[aria-current="page"] {
  color: var(--brand);
}

/* Legal */

.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.prose h2 {
  font-size: 1.25rem;
  margin-top: 2em;
}

.prose li {
  margin-bottom: 0.4em;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: 28px 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ink);
}

/* Error */

.error-page {
  text-align: center;
  padding: 96px 24px;
}

.error-page .code {
  font-size: 4rem;
  font-weight: 800;
  color: var(--line-2);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 12px;
}

/* Small screens */

@media (max-width: 960px) {
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero .wrap {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .wrap.search {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-top: 20px;
  }

  .filters {
    position: static;
    max-height: none;
  }

  /* The search page's bar stays on top; the other pages' forms move under their results. */
  .wrap.search .filter-bar {
    order: -2;
  }

  /* After a search the results come first on a narrow screen; a link leads to the form. */
  .wrap.search.searched .results {
    order: -1;
  }

  .wrap.search.searched .to-filters {
    display: inline-block;
  }
}

@media (max-width: 760px) {
  .account {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 20px;
  }

  /* One row that scrolls sideways, as on the big sites; wrapped, it read as three rows. */
  .side-nav {
    position: static;
    flex-direction: row;
    margin: 0 -16px;
    padding: 4px 16px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .side-nav::-webkit-scrollbar {
    display: none;
  }

  .side-nav a {
    flex: none;
    white-space: nowrap;
  }

  .side-nav .org,
  .side-nav .org-plan {
    display: none;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .brand span {
    display: none;
  }
}

@media (max-width: 480px) {
  .site-header.is-signed .brand span {
    display: none;
  }
}

.site-nav .show-sm svg {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 620px) {
  .wrap {
    padding: 0 16px;
  }

  .site-header .wrap {
    gap: 8px;
  }

  .site-nav .hide-sm {
    display: none;
  }

  .site-nav .show-sm {
    display: inline;
  }

  .site-nav a,
  .site-nav button.linkish {
    padding: 8px 7px;
    font-size: 0.875rem;
  }

  .site-nav a.btn-primary {
    margin-left: 2px;
  }

  .plans,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 44px 0 36px;
  }

  .auth {
    padding-top: 28px;
  }

  .auth-card {
    padding: 24px 20px;
  }

  .trust {
    grid-template-columns: 1fr;
  }

  .result {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 0 0 12px;
    overflow: hidden;
  }

  .thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 240px;
    border-radius: 0;
  }

  .result-body {
    padding: 0 12px;
  }

  .result-foot .open {
    margin-left: 0;
  }
}

/* On a phone the panels open from the bottom over a dimmed page, and "Filters" takes
   the whole screen. */
@media (max-width: 640px) {
  .filter-bar .segmented {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .filter-bar .segmented span {
    justify-content: center;
    text-align: center;
  }

  .place-box {
    flex: 1 1 100%;
  }

  .bar-pills {
    display: flex;
    flex: 1 1 100%;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px 2px;
    scrollbar-width: none;
  }

  .bar-pills::-webkit-scrollbar {
    display: none;
  }

  .bar-pills > * {
    flex: none;
  }

  .more-filters {
    order: -1;
  }

  .pop[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgb(15 23 42 / 45%);
  }

  /* The buttons already show what is set; on a phone the chips would say it twice. */
  .active-chips {
    display: none;
  }

  .sort-by .sort-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .results-head h1 {
    flex: 1 0 100%;
  }

  .results-head {
    align-items: center;
    gap: 8px;
  }

  .view-toggle {
    flex: 1 0 100%;
  }

  .view-toggle .btn {
    flex: 1;
  }

  .sort-by .bar-select select {
    height: 38px;
    min-height: 38px;
  }

  html.is-locked {
    overflow: hidden;
  }

  .pop-panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .more-panel {
    top: 0;
    max-height: none;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .more-body {
    flex: 1;
  }

  .more-foot .btn {
    flex: 1;
  }

  .sort-by {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Listing page */

.wrap.listing {
  padding-top: 20px;
  padding-bottom: 56px;
}

.crumbs {
  margin-bottom: 14px;
  font-size: 0.875rem;
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.crumbs li + li::before {
  content: "›";
  margin: 0 8px;
}

.crumbs [aria-current] {
  color: var(--ink);
  font-weight: 600;
}

.stats-page .crumbs {
  margin-bottom: 6px;
}

.crumbs svg,
.listing .btn svg,
.no-gallery svg,
.flag-note svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.listing-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 18px;
}

.listing-name {
  min-width: 0;
}

.listing-name .eyebrow {
  margin-bottom: 6px;
}

.listing-name h1 {
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.listing-place {
  margin: 0;
  color: var(--muted);
}

.listing-site-title {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.listing-price {
  flex: none;
  /* Its notes wrap here; without a limit they take the row and break the home's name. */
  max-width: 420px;
  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
}

.listing-price .amount {
  font-size: 1.875rem;
  font-weight: 750;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.listing-price .amount small {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
}

.listing-price p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

.listing-price .per:empty {
  display: none;
}

.listing .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.flag-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.flag-note svg {
  margin-top: 3px;
}

.listing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

.listing-side .card,
.listing-main .card {
  padding: 20px;
}

.listing-side .btn-block {
  margin-top: 12px;
}

.listing .card h3 {
  font-size: 0.9375rem;
  margin: 18px 0 8px;
}

.gallery {
  margin-bottom: 20px;
}

.gallery-strip {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 72%);
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  border-radius: var(--radius);
}

.gallery-strip li {
  scroll-snap-align: start;
}

.gallery-strip a {
  display: block;
}

.gallery-strip img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--line);
}

.no-gallery {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 18px 20px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.9375rem;
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 20px;
  margin: 12px 0 0;
}

.kv-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.kv-list .kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.kv-list dd {
  text-align: right;
}

.kv-list .kv dt {
  flex: 1 1 auto;
}

.kv-list dd.when {
  flex: none;
  white-space: nowrap;
}

.listing .card > p.small {
  margin: 12px 0 0;
}

.kv dt {
  font-size: 0.8125rem;
  color: var(--muted);
}

.kv dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.kv dd .sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
}

.price-chart {
  margin: 12px 0 14px;
}

.price-chart-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}

.price-chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.price-chart svg {
  display: block;
  width: 100%;
  height: 160px;
  overflow: visible;
}

.price-chart .grid {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.price-chart .area {
  fill: var(--brand-soft);
  stroke: none;
}

.price-chart .line {
  fill: none;
  stroke: var(--brand-2);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.price-chart .dots {
  fill: none;
  stroke: var(--brand);
  stroke-width: 8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.price-chart-x {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--muted);
}

.history {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.history th,
.history td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.history th {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--muted);
}

.description {
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: var(--ink-2);
}

.features {
  margin-top: 14px;
}

.listing-map {
  height: 240px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #eef2f6;
  margin: 12px 0 8px;
}

.listing-map.is-failed {
  display: none;
}

.map-gap {
  margin: 0 0 8px;
  color: var(--warning);
  font-size: 0.875rem;
}

.map-marker.pin {
  width: 22px;
  height: 22px;
  padding: 0;
  border-width: 3px;
}

.map-marker.pin.approx {
  width: 56px;
  height: 56px;
  background: rgb(15 95 138 / 18%);
}

.map-marker.pin.area {
  width: 22px;
  height: 22px;
  background: var(--muted);
}

.others {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.others a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.others a:hover,
.others a:focus-visible {
  border-color: var(--brand-2);
  background: var(--brand-soft);
}

.others .who {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}

.others .what {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.others .how {
  font-size: 0.75rem;
  color: var(--muted);
}

.others-all {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Property page */

.property,
.stats-page {
  --s0: #0f5f8a;
  --s1: #d97706;
  --s2: #0d9488;
  --s3: #b42318;
  --s4: #7c3aed;
  --s5: #475569;
}

.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 0;
  flex: none;
  background: var(--s0);
}

.swatch.s1 { background: var(--s1); }
.swatch.s2 { background: var(--s2); }
.swatch.s3 { background: var(--s3); }
.swatch.s4 { background: var(--s4); }
.swatch.s5 { background: var(--s5); }

.price-chart .line.s1, .price-chart .dots.s1 { stroke: var(--s1); }
.price-chart .line.s2, .price-chart .dots.s2 { stroke: var(--s2); }
.price-chart .line.s3, .price-chart .dots.s3 { stroke: var(--s3); }
.price-chart .line.s4, .price-chart .dots.s4 { stroke: var(--s4); }
.price-chart .line.s5, .price-chart .dots.s5 { stroke: var(--s5); }
.property .price-chart .line.s0, .property .price-chart .dots.s0,
.stats-page .price-chart .line.s0, .stats-page .price-chart .dots.s0 { stroke: var(--s0); }

.property .price-chart .dots,
.stats-page .price-chart .dots {
  stroke-width: 7;
}

/* The week or month still in progress: a dashed last segment and a hollow dot. */
.price-chart .line.tail {
  stroke-dasharray: 4 4;
}

.price-chart .dots.hole {
  stroke: var(--card);
  stroke-width: 3.5;
}

.insight {
  list-style: none;
  margin: 10px 0 14px;
  padding: 0;
  display: grid;
  gap: 6px;
  color: var(--ink-2);
}

.insight:empty {
  display: none;
}

.insight li {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}

.insight li.insight-warn {
  background: var(--warning-soft);
  color: var(--warning);
}

.table-scroll {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.offers-table {
  min-width: 460px;
}

.offers-table td {
  vertical-align: top;
}

.offers-table .who {
  display: flex;
  align-items: baseline;
}

.offers-table .who .swatch {
  flex: none;
}

.offers-table .sub {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
}

.offers-table .badge {
  margin-top: 4px;
}

.offers-table tr.is-gone td {
  color: var(--muted);
}

.history td.when,
.history .change {
  white-space: nowrap;
}

.offers-table td.links {
  white-space: nowrap;
  text-align: right;
}

.offers-table td.links a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-weight: 600;
}

.offers-table td.links svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legend {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.legend li {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 960px) {
  .listing-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.offers-table .unit {
  display: none;
}

@media (max-width: 620px) {
  .offers-table {
    min-width: 0;
  }

  .offers-table thead {
    display: none;
  }

  .offers-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .offers-table td {
    padding: 0;
    border: 0;
  }

  .offers-table td:first-child {
    grid-column: 1 / -1;
  }

  .offers-table td:nth-child(3),
  .offers-table td.links {
    text-align: right;
  }

  .offers-table td.links a:first-child {
    margin-left: 0;
  }

  .offers-table .unit {
    display: inline;
  }

  .listing-head {
    flex-direction: column;
    gap: 12px;
  }

  .listing-price {
    max-width: none;
    justify-items: start;
    text-align: left;
  }

  .listing-price .btn {
    width: 100%;
  }

  .listing-actions,
  .listing-actions .watch-wide,
  .listing-actions .watch-wide button {
    width: 100%;
  }

  .listing-actions .watch-wide button {
    justify-content: center;
  }

  .gallery-strip {
    grid-auto-columns: 88%;
  }
}

/* Plan card */

.plan-rows {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.plan-row:last-child {
  border-bottom: 0;
}

.plan-row-name {
  font-weight: 600;
}

.plan-row-name .badge {
  margin-left: 6px;
  vertical-align: middle;
}

.plan-row-value {
  font-variant-numeric: tabular-nums;
}

.plan-row-value .meter-svg {
  margin-top: 6px;
  max-width: 220px;
}

.plan-row.is-locked .plan-row-value {
  color: var(--muted);
}

.icon-inline svg {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.unlock-note {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

@media (max-width: 620px) {
  .plan-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .unlock-note {
    grid-column: 1;
  }
}

/* Statistics */

.stats-answer {
  margin: 0 0 16px;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--ink);
}

.stats-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 20px;
}

/* Label, figure, and note share rows across the cards, so every figure sits on one line
   however many lines a label takes. */
.stats-summary .stat {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  border-top: 3px solid var(--brand-2);
}

.stats-summary .label {
  margin-bottom: 10px;
  line-height: 1.35;
}

.stats-summary .value {
  line-height: 1.1;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

/* A seven-figure price in a narrow card ("€1.100.000") shrinks to fit instead of spilling. */
@supports (font-size: 1cqi) {
  .stats-summary .stat {
    container-type: inline-size;
  }

  .stats-summary .value {
    font-size: clamp(1.1rem, 14cqi, 1.75rem);
  }
}

.stats-summary .sub {
  line-height: 1.45;
}

.stats-summary .value small,
.stats-table small,
.trend-table small {
  margin-left: 2px;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--muted);
}

/* Five columns answer most questions; the rest open with the toggle above the table. */
.cols-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cols-label {
  margin-bottom: 10px;
}

.cols-toggle:focus-visible + .cols-label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cols-toggle:not(:checked) ~ .table-scroll .more,
.cols-toggle:not(:checked) + .cols-label .cols-hide,
.cols-toggle:checked + .cols-label .cols-show {
  display: none;
}

/* The statistics form with its script: one "Where?" box, and each change applied at once. */
.place-label,
.live-note {
  display: none;
}

.place-box.is-live .place-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.stats-place {
  margin-bottom: 8px;
}

.place-free {
  margin-bottom: 16px;
}

.place-free .hint {
  margin: 0 0 4px;
}

.filters.is-live .bar-submit {
  display: none;
}

.filters.is-live .live-note {
  display: block;
  margin: 0 0 8px;
  text-align: center;
}

/* A sort click lands on the table; the sticky header would cover its title. */
#areas {
  scroll-margin-top: 88px;
}

.sort-head {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.sort-head:hover,
[aria-sort] .sort-head {
  color: var(--brand);
}

.sort-mark {
  margin-left: 4px;
  color: var(--muted);
}

[aria-sort] .sort-mark {
  color: var(--brand);
}

.cols-toggle:checked ~ .table-scroll .stats-table {
  min-width: 760px;
}

.stats-table .num,
.trend-table .num,
.stats-page .history .num {
  text-align: right;
  white-space: nowrap;
}

.stats-table .nowrap {
  white-space: nowrap;
}

.stats-table tbody th {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}

.stats-table td:first-child {
  width: 44px;
  white-space: nowrap;
}

.stats-table .swatch {
  margin: 0 0 0 6px;
}

.stats-table .alt {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--muted);
}

.stats-table .row-offers {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 500;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 14px;
}

.table-actions .unlock-note {
  grid-column: auto;
}

.card > .unlock-note {
  margin: -4px 0 14px;
}

.stats-page .price-chart svg {
  height: 180px;
}

.histogram {
  margin-top: 8px;
}

.histogram .bar {
  fill: var(--brand-2);
}

.histogram .bar:hover {
  fill: var(--brand);
}

.bands {
  margin-top: 12px;
}

.card .card-lead:has(+ .how) {
  margin-bottom: 6px;
}

.how {
  margin-bottom: 16px;
  font-size: 0.875rem;
  color: var(--muted);
}

.how summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--brand);
  list-style: none;
}

.how summary::-webkit-details-marker {
  display: none;
}

.how summary svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
}

.how p {
  max-width: 70ch;
  margin: 6px 0 0;
}

.notes ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.notes li + li {
  margin-top: 6px;
}

.did-you-mean {
  display: block;
  margin-top: 4px;
}

.field.is-locked input:disabled {
  background: var(--bg, #f8fafc);
  cursor: not-allowed;
}

@media (max-width: 1180px) {
  .stats-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .stats-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .stats-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Valuation */

.badge-high {
  background: var(--success-soft);
  color: var(--success);
}

.badge-low {
  background: var(--warning-soft);
  color: var(--warning);
}

.estimate-amount {
  margin: 4px 0 8px;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.estimate-amount small {
  margin-left: 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}

.estimate-card p {
  margin: 0 0 8px;
}

.filters .valuation-map {
  height: 320px;
}

/* "Γεωγραφικό πλάτος" does not fit in half of the 290px sidebar. */
.filters .pin-pair {
  grid-template-columns: 1fr;
}

/* Where the home is: a map to tap, a line saying where the pin sits, coordinates tucked away. */
.pin-block {
  margin: 4px 0 0;
}

.pin-title {
  margin: 0;
  font-weight: 600;
}

.map-frame {
  position: relative;
}

.map-expand {
  position: absolute;
  top: 22px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.map-expand svg,
.map-done svg,
.pin-set svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-bar {
  display: none;
}

/* Full screen inside the page: the browser's own full screen does not exist on iPhone.
   The script moves the frame under <body> first, so no sticky column or header can sit
   on top of it. */
.map-frame.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: var(--card);
}

.map-frame.is-expanded .valuation-map {
  flex: 1;
  height: auto;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.map-frame.is-expanded .map-expand {
  display: none;
}

.map-frame.is-expanded .map-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--card);
}

.map-bar-note {
  color: var(--ink-2);
  font-size: 14px;
}

.map-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 22px;
}

body.map-open {
  overflow: hidden;
}

.pin-status {
  margin: 0 0 4px;
  font-size: 14px;
}

.pin-set {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand);
  font-weight: 600;
}

.pin-clear {
  margin: 0 0 6px;
}

.pin-coords .pin-pair {
  margin-top: 6px;
}

.results .valuation-map {
  height: 420px;
}

.listing-price .value-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.alert ul {
  margin: 0;
  padding-left: 1.1rem;
}

.map-marker.pin.subject {
  background: var(--accent);
}

.map-marker.pin.comp {
  width: 16px;
  height: 16px;
  padding: 0;
  background: #fff;
  color: var(--brand);
  border-color: var(--brand);
}

/* A dashed border breaks into stray arcs on a 16 px dot, so a blurred spot is a pale fill. */
.map-marker.pin.comp.approx {
  border-style: solid;
  border-width: 2px;
  border-color: rgb(15 95 138 / 55%);
  background: rgb(15 95 138 / 22%);
  box-shadow: none;
}

.map-marker.pin.comp.area {
  border-width: 2px;
  border-color: #fff;
  background: var(--muted);
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.map-legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.map-legend .map-marker {
  flex: none;
  cursor: default;
}

.map-legend .map-marker.subject {
  width: 16px;
  height: 16px;
}

@media (max-width: 960px) {
  .results .valuation-map {
    height: 300px;
  }
}

.pdf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.pdf-row .hint,
.pdf-row .muted {
  margin: 0;
}

.form-pair {
  display: grid;
  grid-template-columns: 1fr;
}

.form-pair select {
  width: 100%;
}

.form-pair-hint {
  margin: 0 0 16px;
}

/* Before the first valuation there are no results to sit beside: the title comes first,
   and on a wide screen the fields take two columns beside the map, so the button shows
   without scrolling. */
#valuation:not(.searched) .results {
  order: -1;
}

@media (min-width: 961px) {
  #valuation.wrap.search:not(.searched) {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  #valuation:not(.searched) .filters {
    position: static;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 0 20px;
    align-items: start;
    padding: 24px;
  }

  #valuation:not(.searched) .filters > * {
    grid-column: span 1;
  }

  #valuation:not(.searched) .filters > :is(.segmented, .wide, .form-pair, .form-pair-hint) {
    grid-column: 1 / span 2;
  }

  #valuation:not(.searched) .segmented {
    margin-bottom: 14px;
  }

  #valuation:not(.searched) .filters {
    grid-auto-flow: row dense;
  }

  #valuation:not(.searched) .filter-actions {
    grid-column: 1;
    justify-items: start;
    margin-top: 4px;
  }

  #valuation:not(.searched) .valuation-allowance {
    grid-column: 2;
    align-self: center;
    margin: 4px 0 0;
  }

  #valuation:not(.searched) .results p {
    margin: 0 0 6px;
  }

  #valuation:not(.searched) .form-pair {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }

  #valuation:not(.searched) .pin-block {
    grid-column: 3;
    grid-row: 1 / span 12;
    margin: 0;
  }

  #valuation:not(.searched) .valuation-map {
    height: 400px;
  }

  #valuation:not(.searched) .pin-pair {
    grid-template-columns: 1fr 1fr;
  }

  #valuation:not(.searched) .filter-actions .btn-block {
    width: auto;
    min-width: 240px;
  }
}

.feature-split {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--bg);
  border-left: 3px solid var(--brand-2);
  border-radius: var(--radius-sm);
}

.feature-split-title {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.feature-split ul {
  margin: 0 0 6px;
  padding-left: 18px;
}

.feature-split li {
  margin-bottom: 4px;
}

.feature-split .small {
  margin: 0;
}

.result .alike {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}

.report-for {
  flex-basis: 100%;
}

.report-form {
  max-width: 520px;
  margin-top: 12px;
}

.report-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.report-form textarea:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 4px rgb(15 95 138 / 15%);
}

.logo-preview {
  display: block;
  max-width: 180px;
  max-height: 72px;
  margin: 0.75rem 0;
  object-fit: contain;
}

/* The address the letters go to, with "Change" beside it. */
.notify-email { margin: 0 0 8px; }
.notify-email > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
}
.notify-email > summary::-webkit-details-marker { display: none; }
.notify-email-edit {
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.notify-email[open] .notify-email-edit { display: none; }
.notify-email .field { margin-top: 10px; }

/* Watch this home: a round bell on a card's photo, a full button on a listing. Pressed,
   the bell fills with the brand colour. */
.thumb-box {
  position: relative;
  min-width: 0;
}

.watch {
  margin: 0;
}

.thumb-box .watch {
  position: absolute;
  top: 8px;
  right: 8px;
}

.watch button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 94%);
  color: var(--ink-2);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.watch button:hover {
  color: var(--brand);
}

.watch button:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
}

.watch button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.watch svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.watch button[aria-pressed="true"] {
  background: var(--brand);
  color: #ffffff;
}

.watch button[aria-pressed="true"] svg {
  fill: currentcolor;
}

.listing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.watch-wide button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
}

.watch-wide button[aria-pressed="true"] {
  border-color: var(--brand-2);
  background: var(--brand-soft);
  color: var(--brand);
}

/* The note after a bell press, above the bottom of the screen. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: max-content;
  max-width: min(92vw, 460px);
  margin: 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #ffffff;
  box-shadow: var(--shadow-lg);
  font-size: 0.9375rem;
  transform: translateX(-50%);
}

/* Watched homes on the account page: what it is and its prices, the bell on the right. */
.watch-letters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 14px;
  margin: 0 0 8px;
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.watch-letters p {
  margin: 0;
}

.list li.watched-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
}

.watched-home > :not(form) {
  grid-column: 1;
}

.watched-home > .watch {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.watched-name {
  font-weight: 650;
}

.watched-home.gone .watched-name {
  color: var(--muted);
}

.watched-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.watched-prices .amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.watched-home .meta {
  color: var(--muted);
  font-size: 0.875rem;
}

/* The first bell on an account without an email asks for one. */
.watch-email {
  width: min(440px, calc(100vw - 32px));
}

.watch-email-body {
  display: grid;
  gap: 10px;
  padding: 20px 22px 16px;
}

.watch-email-body h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.125rem;
}

.watch-email-body h2 svg {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 999px;
  background: var(--brand);
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.watch-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.watch-to {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg, #f6f8fb);
}

.watch-to[hidden] {
  display: none;
}

.watch-to-label {
  color: var(--muted);
  font-size: 0.875rem;
}

.watch-to strong {
  overflow-wrap: anywhere;
}

.text-button {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand-2);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.watch-skip {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.875rem;
}

.watch-email-body p {
  margin: 0;
}

.watch-email-body .watch-email-plan {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.8125rem;
}

.field-error {
  margin: 6px 0 0;
  color: var(--danger);
  font-size: 0.875rem;
}

/* On a phone the email question is a short sheet from the bottom, not a full page. */
@media (max-width: 640px) {
  /* An open dialog is pinned to all four edges, so "auto" would stretch it to fill them. */
  .notify-dialog.watch-email {
    width: 100vw;
    height: fit-content;
    max-height: 90dvh;
    margin: auto 0 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  .watch-email .notify-form {
    height: auto;
  }
}

/* The page behind an open window stays still, and its scroll bar does not cut the window. */
html:has(dialog[open]) {
  overflow: hidden;
}

/* A panel that scrolls keeps the scroll to itself: at its end the page behind stays put. */
dialog,
.pop-panel,
.more-body,
.filters,
.picker-list,
.notify-body,
.where-body,
.nav-menu-panel {
  overscroll-behavior: contain;
}

.bar-pills,
.table-scroll {
  overscroll-behavior-x: contain;
}

/* The "Where?" sheet: the place box on a phone, over the whole screen. */
.where-sheet {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--card);
  color: var(--ink);
}

.where-sheet[open] {
  display: flex;
  flex-direction: column;
}

.where-sheet::backdrop {
  background: rgb(15 23 42 / 45%);
}

.where-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  border-bottom: 1px solid var(--line);
}

.where-head h2 {
  margin: 0;
  font-size: 1.125rem;
  text-align: center;
}

.where-close,
.where-clear {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--brand-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.where-close {
  width: 44px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
}

.where-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
}

/* In the sheet the list is part of the page under the box, not a layer over it. */
.where-body .where-list {
  position: static;
  max-height: none;
  margin-top: 8px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.where-body .where-list [role="option"] {
  min-height: 44px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.where-body .place-chips input,
.where-body .place-chips input:focus {
  font-size: 1rem;
}

.where-foot {
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
}

.where-foot .btn {
  min-height: 50px;
}

.where-show {
  flex: 1 1 auto;
  font-size: 1rem;
}

/* Saved searches: one card per search, its filters as the search page's chips, its facts
   under labels, and the actions on one row. Delete asks first. */
.searches-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}

.searches-head > div {
  flex: 1 1 360px;
}

.searches-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.searches-bar p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  color: var(--ink-2);
}

.searches-bar p.is-missing {
  color: var(--warning);
}

.searches-bar strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.searches-bar svg,
.search-card-chips svg,
.empty-state > svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.searches-bar svg {
  color: var(--brand);
}

.searches-bar a {
  font-weight: 600;
  font-size: 0.875rem;
}

.search-cards {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-card {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.search-card.is-paused {
  background: var(--bg);
}

.search-card.is-paused .search-card-head h2,
.search-card.is-paused .search-card-facts dd {
  color: var(--muted);
}

.search-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.search-card-head h2 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 650;
}

.state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentcolor;
}

.state-on {
  background: var(--success-soft);
  color: var(--success);
}

.state-off {
  background: var(--warning-soft);
  color: var(--warning);
}

.search-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-card-chips li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.search-card-chips li.is-place {
  border-color: transparent;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

.search-card-chips li svg {
  width: 14px;
  height: 14px;
}

.search-card-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.search-card-facts dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.search-card-facts dd {
  margin: 2px 0 0;
  font-size: 0.9375rem;
}

.search-card-facts dd strong {
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}

.search-card-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.search-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.search-card-actions .inline {
  margin: 0;
}

.confirm-delete {
  position: relative;
  margin-left: auto;
}

.confirm-delete > summary {
  list-style: none;
  padding: 8px 4px;
}

.confirm-delete > summary::-webkit-details-marker {
  display: none;
}

.text-button.is-danger {
  margin: 0;
  color: var(--danger);
}

.confirm-box {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  display: grid;
  gap: 10px;
  width: min(300px, calc(100vw - 48px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}

.confirm-box p {
  margin: 0;
  font-size: 0.875rem;
}

.confirm-box .btn {
  justify-self: end;
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 36px 24px;
  text-align: center;
}

.empty-state > svg {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
}

.empty-state h2 {
  margin: 0;
  font-size: 1.125rem;
}

.empty-state p {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
}

@media (max-width: 640px) {
  .search-card {
    padding: 16px;
  }

  .search-card-actions .btn {
    flex: 1 1 auto;
  }

  .confirm-delete {
    margin-left: 0;
  }

  .confirm-box {
    left: 0;
    right: auto;
  }
}

.notify-covers {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.notify-covers-label {
  margin: 0;
  font-weight: 600;
  font-size: 0.9375rem;
}

.notify-covers .hint {
  margin: 0;
}

/* Menu: the work on the left, the person on the right. Upgrade is a small button, not a link. */
.nav-links a.nav-upgrade {
  margin-left: 6px;
  padding: 5px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 0.875rem;
}

.nav-name {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 0.9375rem;
}

.nav-who strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav .nav-menu-panel a[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand);
}

/* Alerts: saved searches and watched homes are one place, two tabs. */
.account-alerts {
  display: block;
}

.account-alerts > * {
  max-width: 860px;
}

.account-alerts > h1 {
  margin: 0 0 12px;
}

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.tabs a {
  margin-bottom: -1px;
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.tabs a:hover {
  color: var(--ink);
}

/* Settings: the logo in use with its remove button beside it, the upload under them. */
.logo-current {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0 16px;
}

.logo-current .logo-preview {
  margin: 0;
}

.logo-current form {
  margin: 0;
}

/* Billing: the plan in use first, then only the plans above it. */
.current-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.current-plan-head .price {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 750;
}

.current-plan-head .price small {
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
}

.current-plan .ticks {
  margin: 16px 0;
}

.current-plan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.current-plan-actions form {
  margin: 0;
}

.current-plan-actions .hint {
  margin: 0;
}

.section-title {
  margin: 28px 0 12px;
  font-size: 1.125rem;
}

.tabs a[aria-current="page"] {
  border-bottom-color: var(--brand);
  color: var(--brand);
}

/* A PDF report being drawn: the button waits and says so (pdf.js). */
.btn.is-busy { opacity: .7; cursor: progress; pointer-events: none; }

/* "Found a mistake?" at the end of a home or listing page */
.report-box details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand);
}

.report-box form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.report-box fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.report-box legend {
  font-weight: 600;
  margin-bottom: 4px;
}

.report-box textarea {
  width: 100%;
  font: inherit;
}

.report-box button {
  justify-self: start;
}

.report-done {
  margin: 0;
  color: var(--accent);
  font-weight: 600;
}