/* Property Kunji design system.
   White ground with a red brand, the way the big Indian property portals read.
   Every colour is a token so light, dark and system all resolve. */

:root {
  --bg: #f5f6f7;
  --surface: #ffffff;
  --surface-2: #eef0f2;
  --ink: #1b1b1f;
  --ink-2: #5b6068;
  --ink-3: #8a9099;
  --line: #e2e5e9;
  --line-strong: #c9cdd3;

  --navy: #ffffff;
  --navy-ink: #1b1b1f;
  --navy-muted: #6d737c;

  --brand: #d8232a;
  --brand-hover: #b81a20;
  --brand-on: #ffffff;
  --brand-soft: #fdeaeb;
  --brand-soft-ink: #a5151b;

  --accent: #d8232a;
  --accent-hover: #b81a20;
  --accent-on: #ffffff;
  --accent-soft: #fdeaeb;
  --accent-ink: #a5151b;

  --danger: #c0362c;
  --danger-soft: #fbe7e5;

  --logo-bg: #ffffff;

  --shadow-1: 0 1px 2px rgba(22, 38, 74, .07), 0 1px 3px rgba(22, 38, 74, .05);
  --shadow-2: 0 4px 8px rgba(22, 38, 74, .06), 0 12px 26px rgba(22, 38, 74, .08);
  --shadow-3: 0 14px 42px rgba(22, 38, 74, .16);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  --header-h: 62px;
  --bottom-h: 64px;
  --container: 1200px;

  --font-display: "Plus Jakarta Sans", "Noto Sans Devanagari", system-ui, sans-serif;
  --font-body: "Public Sans", "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101114;
    --surface: #191b1f;
    --surface-2: #22252a;
    --ink: #eceef1;
    --ink-2: #a1a7b0;
    --ink-3: #7d838d;
    --line: #2a2e34;
    --line-strong: #3a3f47;

    --navy: #191b1f;
    --navy-ink: #eceef1;
    --navy-muted: #a1a7b0;

    --brand: #f2555c;
    --brand-hover: #ff6a71;
    --brand-on: #1b0507;
    --brand-soft: #2d1416;
    --brand-soft-ink: #ff9298;

    --accent: #f2555c;
    --accent-hover: #ff6a71;
    --accent-on: #1b0507;
    --accent-soft: #2d1416;
    --accent-ink: #ff9298;

    --danger: #e8776b;
    --danger-soft: #2d1614;

    --logo-bg: #191b1f;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 6px 22px rgba(0, 0, 0, .45);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --bg: #101114;
  --surface: #191b1f;
  --surface-2: #22252a;
  --ink: #eceef1;
  --ink-2: #a1a7b0;
  --ink-3: #7d838d;
  --line: #2a2e34;
  --line-strong: #3a3f47;

  --navy: #191b1f;
  --navy-ink: #eceef1;
  --navy-muted: #a1a7b0;

  --brand: #f2555c;
  --brand-hover: #ff6a71;
  --brand-on: #1b0507;
  --brand-soft: #2d1416;
  --brand-soft-ink: #ff9298;

  --accent: #f2555c;
  --accent-hover: #ff6a71;
  --accent-on: #1b0507;
  --accent-soft: #2d1416;
  --accent-ink: #ff9298;

  --danger: #e8776b;
  --danger-soft: #2d1614;

  --logo-bg: #191b1f;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 6px 22px rgba(0, 0, 0, .45);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); }
h2 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); }
h3 { font-size: 1.05rem; }

p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-soft); color: var(--brand-soft-ink); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 900px) { .container { padding-inline: 28px; } }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--navy);
  color: var(--navy-ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.site-header > .container {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex: none;
}

.brand-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  flex: none;
}
.brand-mark svg { width: 27px; height: 27px; --logo-bg: var(--brand); }

.brand-words { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -0.03em;
}
.brand-name b { color: var(--brand); font-weight: 800; }
.brand-tag {
  /* No uppercase or letter spacing: Devanagari has no capitals and the extra
     tracking only makes a long line harder to read. */
  font-size: .68rem;
  line-height: 1.3;
  color: var(--navy-muted);
  font-weight: 600;
}

/* The header has limited room, so the line only appears once there is space. */
.site-header .brand-tag {
  display: none;
  max-width: 36ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1080px) { .site-header .brand-tag { display: block; } }

/* The footer has room, so it wraps and shows in full. */
.site-footer .brand-tag { max-width: 30ch; white-space: normal; }

.city-picker {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--navy-ink);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 190px;
}
.city-picker svg { width: 16px; height: 16px; flex: none; }
.city-picker svg:last-child { width: 14px; height: 14px; opacity: .7; }
.city-picker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-picker:hover { border-color: var(--brand); }
@media (min-width: 700px) { .city-picker { display: inline-flex; } }

.city-sheet {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 16px 0 20px;
  box-shadow: var(--shadow-2);
}
.city-sheet .sheet-title {
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-3); margin-bottom: 10px;
}
.city-list { display: flex; flex-wrap: wrap; gap: 8px; }
.city-list button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  font-size: .9rem; font-weight: 600; cursor: pointer;
}
.city-list button svg { width: 15px; height: 15px; color: var(--ink-3); }
.city-list button[aria-current="true"] {
  background: var(--brand); border-color: var(--brand); color: var(--brand-on);
}
.city-list button[aria-current="true"] svg { color: inherit; }

.header-nav { display: none; margin-left: auto; gap: 2px; }
@media (min-width: 900px) { .header-nav { display: flex; } }
.header-nav a {
  padding: 9px 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--navy-muted);
  font-size: .94rem;
  font-weight: 600;
}
.header-nav a:hover { background: var(--surface-2); color: var(--navy-ink); }
.header-nav a[aria-current="page"] { color: var(--navy-ink); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (min-width: 900px) { .header-actions { margin-left: 0; } }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn.ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-2);
}
.icon-btn.ghost:hover { border-color: var(--brand); color: var(--ink); }

/* How many properties have sold to a buyer who came from here. Said plainly,
   on the front page and at the top of the board itself. */
.sold-count {
  margin-top: 10px; font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.hero-sold {
  display: inline-block; margin-top: 14px;
  max-width: min(92vw, 460px); text-align: center;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; font-weight: 700; font-size: .86rem;
  text-decoration: none; backdrop-filter: blur(4px);
}
.hero-sold:hover { background: rgba(255, 255, 255, .22); }

/* The sell button is the loudest thing on the page, the way OLX does it. */
.btn-sell {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 17px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .04em;
  text-decoration: none;
  border: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .16);
  white-space: nowrap;
}
.btn-sell:hover { background: var(--accent-hover); }
.btn-sell svg { width: 17px; height: 17px; }

@media (max-width: 560px) {
  .btn-sell { padding-inline: 13px; }
}

/* On a narrow phone the header row was wider than the screen, which let the
   whole page slide sideways. The brand gives up the room instead. */
@media (max-width: 480px) {
  .site-header .container { gap: 8px; }
  /* The words may be squeezed away to nothing; the mark may not. Without a
     floor here the whole brand was crushed to four pixels and the mark, which
     keeps its own width, spilled out from under it and sat beneath the button
     next to it. */
  .brand { min-width: 38px; flex-shrink: 1; }
  .brand-words { min-width: 0; }
  .brand-name, .brand-tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-name { font-size: .98rem; }
  .header-actions { gap: 6px; flex: none; }
  .icon-btn { width: 38px; height: 38px; }
  .btn-sell { padding-inline: 11px; font-size: .86rem; }
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .94rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary { background: var(--brand); color: var(--brand-on); }
.btn-primary:hover { background: var(--brand-hover); }

.btn-accent { background: var(--accent); color: var(--accent-on); }
.btn-accent:hover { background: var(--accent-hover); }

.btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--surface-2); }

.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); }

.btn-sm { padding: 7px 12px; font-size: .85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------------ hero */

/* A full height hero: one photograph, a dark scrim, and everything centred,
   so the first screen states what the site is before anything else. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Everything on this screen has to be on the screen. The bottom bar on a
     phone eats into it too, so the padding and the gaps below are measured in
     vh: on a short phone they shrink rather than pushing the button under the
     fold. */
  /* The bottom bar on a phone sits over the page, so the screen this has to
     fit into is shorter than the window by that much. */
  min-height: calc(100svh - var(--header-h));
  display: grid;
  place-items: center;
  color: #fff;
  padding: clamp(14px, 3vh, 44px) 0 clamp(18px, 4vh, 52px);
}

body.has-bottom-nav .hero {
  min-height: calc(100svh - var(--header-h) - var(--bottom-h) - env(safe-area-inset-bottom));
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/img/hero.jpg") center 28% / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Dark enough for white type to read, light enough that the photograph is
     still a photograph. A flat grey wash over it was what made it look cheap;
     this leans warm and lets the sky and the building keep their colour. */
  background:
    linear-gradient(180deg,
      rgba(26, 12, 14, .58) 0%,
      rgba(26, 12, 14, .34) 42%,
      rgba(40, 10, 12, .68) 100%),
    radial-gradient(88% 62% at 50% 42%, transparent 0%, rgba(30, 8, 10, .42) 100%);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(6px, 1.3vh, 14px);
}

.hero-mark {
  width: min(44vw, 21vh, 200px);
  height: auto;
  margin-bottom: 2px;
  border-radius: 24px;
  /* The artwork is drawn on black, so it sits on a tile of that same black.
     Screen blending was tried first and washed the bird out against a pale
     part of the photograph. */
  background: #06060a;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(201, 162, 76, .38);
}

.hero-brand {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(.82rem, .76rem + .3vw, .95rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  color: #16264a;
  font-weight: 700;
  font-size: clamp(.82rem, .74rem + .4vw, .96rem);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}
.hero-badge svg { width: 18px; height: 18px; color: #1a8f5f; flex: none; }
:root[data-theme="dark"] .hero-badge,
:root:not([data-theme="light"]) .hero-badge { color: #16264a; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 1rem + 5vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  color: #fff;
  text-wrap: balance;
  max-width: 15ch;
  margin-top: 0;
  text-shadow: 0 3px 26px rgba(0, 0, 0, .5);
}

/* The brand name sits on a bar, the way a highlighter would mark it.
   Painted as a background on the text itself, so it can never end up behind
   the hero's overlay the way a negative z-index pseudo element would. */
.hero-title .mark {
  display: inline-block;
  color: #fff;
  padding: 0 .1em .06em;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-size: 100% .16em;
  background-position: 0 100%;
}

.hero-kicker {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, .92rem + .5vw, 1.2rem);
  letter-spacing: .06em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.hero-types {
  color: rgba(255, 255, 255, .86);
  font-size: clamp(.86rem, .82rem + .3vw, .98rem);
  line-height: 1.6;
  max-width: 46ch;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.hero-trust {
  color: #fff;
  font-weight: 700;
  font-size: clamp(.94rem, .88rem + .35vw, 1.05rem);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 19px 34px;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: var(--brand-on);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.06rem, 1rem + .45vw, 1.25rem);
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(216, 35, 42, .42);
  transition: background .15s ease, transform .12s ease;
}
.hero-cta:hover { background: var(--brand-hover); transform: translateY(-2px); }

/* Buy and Sell sit side by side and share the row evenly, so neither reads as
   the lesser choice. */
.hero-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  margin-top: 10px;
}
.hero-actions .hero-cta {
  justify-content: center;
  margin-top: 0;
  padding-inline: 20px;
}
.hero-cta-alt {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.hero-cta-alt:hover { background: #fff; color: var(--brand-hover); }

/* The one way on from this screen, so it is a button and not a footnote:
   a white box with the brand red inside it, the loudest thing under the words. */
.hero-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(10px, 2.2vh, 26px);
  padding: clamp(13px, 2vh, 18px) 34px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
  transition: transform .12s ease, box-shadow .12s ease;
}
.hero-link:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
/* Room for the helper button, which stands in the bottom right corner and
   was sitting across the middle of this one. */
@media (max-width: 760px) {
  .hero-link { margin-bottom: 68px; }
  /* While the home screen strip is up it stands over the foot of the front
     page, so the badge above shrinks and the whole column rises clear of it.
     The strip is shown once and closes with a cross; the page is back to its
     full size the moment it goes. */
  body.has-install .hero-mark { width: min(30vw, 13vh, 128px); }
  body.has-install .hero-link { margin-bottom: calc(64px + var(--install-h, 0px)); }
}
.hero-link svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------ categories */

/* Ten categories, so the columns are chosen to leave no orphan on a row. */
.cat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 460px) { .cat-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .cat-strip { grid-template-columns: repeat(5, 1fr); } }

.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cat-tile:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.cat-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-soft-ink);
  display: grid; place-items: center;
}
.cat-icon svg { width: 24px; height: 24px; }
.cat-tile b { font-family: var(--font-display); font-size: .88rem; font-weight: 700; }
.cat-tile small { color: var(--ink-3); font-size: .75rem; margin-top: -4px; }

.quick-links { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 2px; scrollbar-width: none; }
.quick-links::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-size: .87rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--brand); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
.chip .count { color: var(--ink-3); margin-left: 5px; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- section */

.section { padding: 30px 0; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
  /* On a narrow phone the buttons drop under the heading rather than pushing
     it off the side of the screen. */
  flex-wrap: wrap;
}
.section-head p { color: var(--ink-2); font-size: .92rem; margin-top: 4px; }
.eyebrow {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 800; color: var(--brand);
}

/* --------------------------------------------------------------- filters */

.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 20px;
}
.filters > summary {
  list-style: none; cursor: pointer; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px; font-weight: 700;
}
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary svg { width: 18px; height: 18px; color: var(--ink-2); }
.filters > summary .active-count {
  margin-left: auto; background: var(--brand-soft); color: var(--brand-soft-ink);
  border-radius: 999px; padding: 2px 9px; font-size: .78rem;
}

.filter-grid {
  display: grid; gap: 14px;
  padding: 16px 16px 16px;
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) { .filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .filter-grid { grid-template-columns: repeat(4, 1fr); } }

/* A class that sets display beats the browser's own [hidden] rule, so .field
   and friends stayed on screen after being hidden. This puts hidden back in
   charge, everywhere. */
[hidden] { display: none !important; }

.field { display: flex; flex-direction: column; gap: 6px; }

/* A rupee sign sitting inside the box, so a figure is read as money at a
   glance and nobody types the sign themselves. */
.money { position: relative; flex: 1; }
.money > span {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-weight: 700; pointer-events: none;
}
.money > input[type="number"] { padding-left: 26px; }
.field label { font-size: .82rem; font-weight: 700; color: var(--ink-2); }
.field .hint { font-size: .78rem; color: var(--ink-3); }

input[type="text"], input[type="tel"], input[type="number"], input[type="search"],
input[type="password"], input[type="url"], input[type="email"], input[type="month"],
input[type="date"], input[type="file"]:not(.sr-only), select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .95rem;
}
textarea { resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238493a9' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 34px;
}

.filter-actions { display: flex; gap: 10px; padding: 0 16px 16px; flex-wrap: wrap; }

/* ----------------------------------------------------------------- cards */

.card-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--brand); box-shadow: var(--shadow-2); transform: translateY(-3px); }

.card-media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.card:hover .card-media img { transform: scale(1.06); }

/* Placeholder when a listing has no photo: a plot boundary motif, not a grey box. */
.card-media.empty {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
  display: grid; place-items: center;
}
.card-media.empty span {
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--surface); padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line);
}

/* The badges are pinned to the top left and must stop short of the heart in
   the top right, otherwise a card with three of them runs under it. */
.badges {
  position: absolute;
  top: 9px;
  left: 9px;
  right: 52px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.badges .badge { flex: none; }
.badge {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px;
  background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-1);
}
.badge.featured { background: var(--accent); color: #fff; }
.badge.purpose { background: var(--ink); color: var(--surface); }

/* A box the form is waiting on. Cleared the moment something is typed into
   it, so it never nags at somebody who has already put it right. */
.is-wrong,
.is-wrong:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent) !important;
}

/* A conversation, read in the panel. Each side leans its own way so who said
   what is clear without reading the labels. */
.chat-read { display: grid; gap: 10px; margin-top: 10px; }
.chat-read .said {
  max-width: 34rem; padding: 10px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.chat-read .said.seller { margin-inline-start: auto; background: var(--surface); }
.chat-read .who { font-size: .78rem; color: var(--ink-2); margin-bottom: 4px; }
.chat-read .said p { margin: 0; white-space: pre-line; }

/* The ready questions above the writing box. */
.ask-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ask-quick button { text-align: left; }

.fav-btn {
  position: absolute; top: 8px; right: 8px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); cursor: pointer; padding: 0;
  box-shadow: var(--shadow-1);
}
.fav-btn svg { width: 17px; height: 17px; }
.fav-btn[aria-pressed="true"] { color: var(--danger); border-color: var(--danger); }

.card-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-price {
  font-family: var(--font-display); font-size: 1.18rem; font-weight: 800;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.card-price .per { font-size: .75rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }

.card-title {
  font-size: .9rem; font-weight: 600; line-height: 1.35; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-specs { display: flex; gap: 10px; font-size: .8rem; color: var(--ink-3); flex-wrap: wrap; }
.card-specs b { color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }

.card-foot {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .76rem; color: var(--ink-3);
}
.card-loc { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.card-loc svg { width: 13px; height: 13px; flex: none; }
.card-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-date { flex: none; }

/* ----------------------------------------------------------- empty state */

.empty-state {
  text-align: center; padding: 54px 20px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface);
}
.empty-state h3 { margin-bottom: 6px; }
.empty-state p { color: var(--ink-2); max-width: 40ch; margin-inline: auto; }
.empty-state .btn { margin-top: 18px; }

.skeleton { background: var(--surface-2); border-radius: var(--r-md); height: 280px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; }
.pagination span { color: var(--ink-2); font-size: .9rem; }

/* ------------------------------------------------------------ detail page */

.detail-grid { display: grid; gap: 26px; align-items: start; }
@media (min-width: 980px) { .detail-grid { grid-template-columns: minmax(0, 1fr) 340px; } }

.gallery { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.gallery-main { aspect-ratio: 16 / 10; background: var(--surface-2); position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main.empty {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  display: grid; place-items: center; color: var(--ink-3);
  font-family: var(--font-display); letter-spacing: .07em; text-transform: uppercase; font-size: .8rem;
}
.gallery-thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; }
.gallery-thumbs button {
  flex: none; width: 76px; height: 58px; padding: 0;
  border-radius: 6px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--surface-2);
}
.gallery-thumbs button[aria-current="true"] { border-color: var(--brand); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.detail-price {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.3rem);
  font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}

.spec-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
@media (min-width: 700px) { .spec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spec { background: var(--surface); padding: 14px 15px; display: flex; flex-direction: column; gap: 3px; }
.spec dt { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; }
.spec dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.contact-card { position: sticky; top: calc(var(--header-h) + 18px); }

.owner-row { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-soft-ink);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; flex: none;
}
.owner-row .kind { font-size: .8rem; color: var(--ink-3); text-transform: capitalize; }

.phone-reveal {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 800;
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
}

.safety-note {
  font-size: .82rem; color: var(--ink-2); background: var(--surface-2);
  border-radius: var(--r-sm); padding: 11px 13px; line-height: 1.5;
}

.mobile-contact-bar {
  position: fixed; left: 0; right: 0; bottom: var(--bottom-h); z-index: 35;
  display: flex; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-3);
}
.mobile-contact-bar .btn { flex: 1; }
@media (min-width: 980px) { .mobile-contact-bar { display: none; } }

/* ------------------------------------------------------------------ form */

.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
@media (min-width: 700px) { .form-card { padding: 28px; } }

.form-section + .form-section { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.form-section h3 { margin-bottom: 3px; }
.form-section .sub { color: var(--ink-2); font-size: .88rem; margin-bottom: 16px; }

.form-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
.form-grid .span-2 { grid-column: 1 / -1; }

.radio-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .radio-cards { grid-template-columns: repeat(3, 1fr); } }
.radio-cards input { position: absolute; opacity: 0; pointer-events: none; }
.radio-cards label {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  cursor: pointer; font-weight: 700; font-size: .9rem; text-align: center; background: var(--surface);
}
.radio-cards input:checked + label { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-soft-ink); }
.radio-cards input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }

.photo-drop {
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 24px 16px; text-align: center; cursor: pointer; background: var(--surface); display: block;
}
.photo-drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.photo-drop svg { width: 26px; height: 26px; color: var(--ink-3); margin: 0 auto 8px; }
.photo-drop .sub { font-size: .83rem; color: var(--ink-3); }

.photo-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
@media (min-width: 640px) { .photo-preview { grid-template-columns: repeat(6, 1fr); } }
.photo-preview figure { position: relative; margin: 0; aspect-ratio: 1; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview button {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; cursor: pointer; background: rgba(0, 0, 0, .62); color: #fff;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
}

.alert { border-radius: var(--r-sm); padding: 12px 14px; font-size: .9rem; border: 1px solid transparent; }
.alert-error { background: var(--danger-soft); color: var(--danger); }
.alert-error ul { margin: 6px 0 0; padding-left: 18px; }
.alert-success { background: var(--brand-soft); color: var(--brand-soft-ink); }

/* ----------------------------------------------------------------- admin */

.admin-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.admin-tabs button {
  border: 0; background: transparent; cursor: pointer;
  padding: 12px 15px; font-weight: 700; font-size: .92rem; color: var(--ink-2);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.admin-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.admin-tabs .n {
  margin-left: 6px; font-size: .78rem; background: var(--surface-2);
  border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}

.mod-row {
  display: grid; gap: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px;
}
@media (min-width: 800px) { .mod-row { grid-template-columns: 1fr auto; align-items: center; } }
.mod-row .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mod-row .meta { color: var(--ink-2); font-size: .86rem; }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.pending { background: var(--accent-soft); color: var(--accent-ink); }
.status-pill.live { background: var(--brand-soft); color: var(--brand-soft-ink); }
.status-pill.rejected { background: var(--danger-soft); color: var(--danger); }

/* ------------------------------------------------------------ bottom nav */

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
  height: calc(var(--bottom-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--line);
  /* Five now that conversations have their own place in it. */
  display: grid; grid-template-columns: repeat(5, 1fr);
}
@media (min-width: 900px) { .bottom-nav { display: none; } }

.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: var(--ink-3); font-size: .66rem; font-weight: 700;
  min-width: 0; padding: 0 2px; text-align: center;
}
.bottom-nav a > span:last-child {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bottom-nav .bn-icon { display: grid; place-items: center; }
.bottom-nav a svg { width: 21px; height: 21px; }
.bottom-nav a[aria-current="page"] { color: var(--brand); }

.bottom-nav a.sell { color: var(--accent); }
.bottom-nav a.sell .bn-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--accent-on); margin-top: -2px;
}
.bottom-nav a.sell svg { width: 19px; height: 19px; }

body.has-bottom-nav { padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body.has-bottom-nav { padding-bottom: 0; } }
body.has-contact-bar { padding-bottom: calc(var(--bottom-h) + 74px + env(safe-area-inset-bottom)); }
@media (min-width: 980px) { body.has-contact-bar { padding-bottom: 0; } }

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 34px 0 30px; margin-top: 40px; }
.footer-grid { display: grid; gap: 26px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-blurb { color: var(--ink-2); font-size: .92rem; margin-top: 12px; max-width: 34ch; }
.site-footer h4 {
  font-family: var(--font-body); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--ink-2); text-decoration: none; font-size: .92rem; }
.site-footer a:hover { color: var(--ink); }
.site-footer .brand { color: var(--ink); }
.site-footer .brand-tag { color: var(--ink-3); }
.site-footer .fine { color: var(--ink-3); font-size: .84rem; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

.theme-switch {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--surface-2); border-radius: 999px; border: 1px solid var(--line);
}
.theme-switch button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font-size: .85rem; font-weight: 700; cursor: pointer;
}
.theme-switch button svg { width: 15px; height: 15px; }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ----------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; bottom: calc(var(--bottom-h) + 20px);
  transform: translateX(-50%) translateY(12px); z-index: 60;
  background: var(--ink); color: var(--surface);
  padding: 11px 18px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  box-shadow: var(--shadow-3); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 900px) { .toast { bottom: 26px; } }

/* ---------------------------------------------------------- touch targets */

@media (pointer: coarse) {
  .btn-sm { padding: 11px 15px; }
  .icon-btn { width: 44px; height: 44px; }
  .chip { padding: 10px 16px; }
  .theme-switch button { padding: 11px 16px; }
  .city-picker { padding: 11px 13px; }
  .site-footer ul { gap: 2px; }
  .site-footer ul a { display: inline-block; padding: 11px 0; }
  .site-footer .brand { padding: 8px 0; }
  .bottom-nav a { min-height: 52px; }
  .gallery-thumbs button { width: 84px; height: 64px; }
  .photo-preview button { width: 30px; height: 30px; font-size: 16px; }
  .admin-tabs button { padding: 15px 16px; }
  .fav-btn { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .cat-tile:hover { transform: none; }
}

/* ------------------------------------------------------- language switch */

.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  flex: none;
}

.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  padding: 7px 11px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  line-height: 1;
}

.lang-switch button[aria-pressed="true"] {
  background: var(--brand);
  color: var(--brand-on);
}

@media (pointer: coarse) {
  .lang-switch button { padding: 10px 13px; }
}

/* A sample listing is labelled so nobody mistakes it for a real property. */
.badge.demo { background: var(--ink-2); color: var(--surface); }

.sample-note {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: .88rem;
  font-weight: 600;
}

/* Used on the listing page for the address and society lines. */
.card-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
  font-size: .93rem;
}
.card-meta svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }

/* ------------------------------------------------------------ splash

   Shows once when the site is opened, then fades into the site itself.
   It is an overlay rather than a separate page, so the back button never
   traps anyone on a screen that immediately redirects again. */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* 100dvh tracks the phone's address bar, so nothing is ever cut off. */
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  /* The artwork is painted on black, so the screen is that same black and the
     picture has no edge. */
  background:
    radial-gradient(120% 80% at 50% 34%, #17171a 0%, #0b0b0d 56%, #000 100%),
    #000;
  animation: splash-out .5s ease 30s forwards;
}

.splash-stage {
  position: relative;
  z-index: 1;
  display: grid;
  /* One column the full width of the screen. Left to size itself, the column
     took the width of the widest thing in it, which was the name, and the
     picture came out that wide instead of screen wide. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  gap: 14px;
  /* No padding here: the picture runs edge to edge. The words below carry
     their own margin instead. */
  padding: 0;
}
.splash-name, .splash-tag { padding-inline: 20px; }

/* The artwork, and the turn under it.

   Both the numbers below were measured off the picture: the globe's disc sits
   at 21.58% from the left, 42.56% from the top, and is 54.69% of the picture
   wide. Change the picture and these must be measured again. */
/* The buyers' box on the first screen.

   Red on black, flashing slowly - two seconds on, a breath off - so it catches
   the eye without turning the screen into a fairground. Somebody who has asked
   the phone not to animate things gets it steady instead. */
.splash-needs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(92%, 460px);
  padding: 13px 18px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--brand, #d8232a);
  color: #fff;
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1rem, .9rem + .8vw, 1.25rem);
  text-decoration: none;
  letter-spacing: .01em;
  box-shadow: 0 10px 30px rgba(216, 35, 42, .45);
  animation: needs-blink 1.6s ease-in-out infinite;
}
.splash-needs b {
  min-width: 2.2em;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand, #d8232a);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
@keyframes needs-blink {
  0%, 55% { opacity: 1; transform: scale(1); }
  70% { opacity: .35; transform: scale(.985); }
  100% { opacity: 1; transform: scale(1); }
}

.splash-art {
  position: relative;
  width: min(100%, 60vh);
  aspect-ratio: 1024 / 1022;
  animation: splash-fade .9s ease both;
}
.splash-eagle { position: absolute; inset: 0; width: 100%; height: 100%; }

.splash-earth {
  position: absolute;
  left: 21.58%;
  top: 42.56%;
  width: 54.69%;
  aspect-ratio: 1;
  overflow: hidden;
  /* The mask says where the moving map may show: not at the rim, and not at
     the top where the claws and the key are. */
  -webkit-mask-image: url("/img/earth-mask.png");
          mask-image: url("/img/earth-mask.png");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* Two copies of the world side by side. When the first has slid past, the
   second is exactly where it began, so the turn never jumps. The negative
   delay starts it over India rather than the middle of the Pacific. */
.earth-track {
  display: flex;
  width: 400%;
  height: 100%;
  animation: earth-spin 40s linear infinite -18.8s;
}
.earth-track img {
  width: 50%;
  height: 100%;
  display: block;
  /* Brought down to the light the painted globe already has. */
  filter: brightness(.76) saturate(.96) contrast(1.04);
}

/* A flat map is flat. This is what makes it read as a ball: light high on the
   left, and the edge falling away into shadow. */
.splash-earth::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 255, 255, .16), transparent 46%),
    radial-gradient(circle, transparent 32%, rgba(0, 0, 0, .66) 96%);
}

@keyframes earth-spin { to { transform: translateX(-50%); } }

.splash-name {
  display: flex;
  gap: .3em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 11vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(70, 4, 8, .4);
  animation: splash-rise .6s ease .18s both;
}
.splash-name b { color: #f2565c; font-weight: 800; }

.splash-rule {
  width: 68px;
  height: 3px;
  border-radius: 2px;
  background: #f2565c;
  animation: splash-rule .5s ease .34s both;
}

.splash-tag {
  max-width: 22ch;
  text-align: center;
  font-size: clamp(.9rem, 3.6vw, 1.05rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
  animation: splash-rise .6s ease .42s both;
}

.splash-foot {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
}

.splash-skip {
  padding: 14px 40px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--brand);
  font-family: var(--font-display, system-ui), system-ui, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  animation: skip-in .4s ease .8s both;
}
.splash-skip:hover { transform: translateY(-1px); }

@keyframes splash-fade { from { opacity: 0; } }
@keyframes splash-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes splash-rule { from { opacity: 0; width: 0; } }

.splash.gone {
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Someone who has asked for less movement gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .splash-art, .earth-track, .splash-name, .splash-rule,
  .splash-tag, .splash-skip, .splash-needs { animation: none; }
}


@keyframes skip-in { from { opacity: 0; transform: translateY(10px); } }

.splash.gone {                              /* tapped, so leave straight away */
  animation: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes splash-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .splash { transition: none; }
  .splash-skip { animation: none; }
}

/* ------------------------------------------------------- buyer requirement */

/* Each choice already made stays on screen as a button, so a buyer can go back
   to it without losing the ones after it. */
.buy-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.buy-crumbs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
}
.buy-crumbs button:hover { border-color: var(--brand); }
.buy-crumbs button span { color: var(--brand); font-weight: 700; font-size: .78rem; }

.buy-search {
  width: 100%;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.buy-search:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

.buy-group {
  margin: 22px 0 10px;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.buy-group:first-child { margin-top: 0; }

.buy-list {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .buy-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .buy-list { grid-template-columns: repeat(3, 1fr); } }

.buy-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
}
.buy-item:hover { border-color: var(--brand); transform: translateY(-1px); }
.buy-item svg { width: 17px; height: 17px; flex: none; color: var(--brand); }

/* The type grid reuses the home page tiles, which are links there and buttons
   here, so the button defaults need clearing. */
button.cat-tile {
  border: 1px solid var(--line);
  font: inherit;
  cursor: pointer;
  color: var(--ink);
}

/* --------------------------------------------------- explore poster cards */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 20px;
  padding-bottom: 10px;
}
@media (min-width: 700px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } }

/* Colour plate on top, photo below. Each card carries its own two colours in
   --c1 and --c2, so the ten of them read as a set of posters. */
.ptile {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c1);
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ptile:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, .26); }

.ptile-plate {
  position: relative;
  flex: 0 0 54%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 16px 15px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .22), transparent 60%),
    linear-gradient(150deg, var(--c1) 0%, var(--c2) 100%);
  overflow: hidden;
}

/* The type's own mark, blown up and set low in the plate the way a watermark
   sits on a poster. */
.ptile-watermark {
  position: absolute;
  right: -18px;
  bottom: -24px;
  width: 118px;
  height: 118px;
  color: #fff;
  opacity: .17;
  pointer-events: none;
}
.ptile-watermark svg { width: 100%; height: 100%; stroke-width: 1.1; }

.ptile-kicker {
  position: relative;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.ptile-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1rem + 2.2vw, 1.7rem);
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.ptile-rule {
  position: relative;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: #ffc93c;
}
.ptile-city {
  position: relative;
  font-size: .74rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .86);
}

.ptile-photo { position: relative; flex: 1 1 auto; overflow: hidden; }
.ptile-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.ptile:hover .ptile-photo img { transform: scale(1.07); }

/* Darkens the photo just enough for the white button and the count to hold. */
.ptile-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .12) 62%);
}

.ptile-count {
  position: absolute;
  top: 9px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
}
.ptile-btn {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--c1);
  font-weight: 800;
  font-size: .84rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  transition: background .14s ease, color .14s ease;
}
.ptile-btn svg { width: 15px; height: 15px; }
.ptile:hover .ptile-btn { background: #ffc93c; color: #1b1b1b; }

/* ------------------------------------------------------------ legal pages */

/* The consent line under Continue on the splash: present, readable, and small
   enough that it never competes with the brand. */
.splash-consent {
  width: min(100%, 420px);
  margin: 0;
  text-align: center;
  font-size: .72rem;
  line-height: 1.55;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  animation: skip-in .4s ease 1s both;
}
.splash-consent a { color: #ff8a86; font-weight: 800; text-decoration: underline; }


/* Footer legal row, on every page. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.footer-legal a {
  color: var(--ink-2);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
}
.footer-legal a:hover { color: var(--brand); text-decoration: underline; }

.footer-copy {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: .84rem;
  font-weight: 600;
}

/* A legal page is a column of text and nothing else, so it is set narrow and
   loose the way a document is, not the way a listing grid is. */
.legal-page {
  max-width: 74ch;
  padding-top: 30px;
  padding-bottom: 20px;
}
.legal-page h1 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem); }
.legal-updated { margin-top: 6px; color: var(--ink-3); font-size: .84rem; }

.legal-body { margin-top: 26px; color: var(--ink); line-height: 1.75; }
.legal-body h2 {
  margin-top: 30px;
  margin-bottom: 8px;
  font-size: 1.06rem;
  color: var(--ink);
}
.legal-body p { margin-bottom: 14px; }
.legal-body ul { margin: 0 0 16px 20px; }
.legal-body li { margin-bottom: 7px; }
.legal-body a { color: var(--brand); font-weight: 600; }

.legal-body .legal-contact {
  margin-left: 0;
  padding: 16px 18px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.legal-todo { color: var(--ink-3); font-style: italic; }

.legal-strong {
  padding: 14px 16px;
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
  color: var(--brand-soft-ink);
  font-weight: 600;
}

/* ----------------------------------------------------------- seller plans */

.plan-grid {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }

/* The whole card is the radio, so there is no small dot to aim at. */
.plan { position: relative; display: block; cursor: pointer; }
.plan input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.plan-body {
  display: block;
  height: 100%;
  padding: 20px 18px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.plan:hover .plan-body { border-color: var(--brand); }
.plan input:checked + .plan-body {
  border-color: var(--brand);
  box-shadow: 0 10px 26px rgba(216, 35, 42, .16);
  transform: translateY(-2px);
}
.plan input:focus-visible + .plan-body { outline: 2px solid var(--brand); outline-offset: 2px; }

.plan-tag {
  position: absolute;
  top: -11px;
  right: 14px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-on);
  font-size: .7rem;
  font-weight: 800;
}
.plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.plan-name { font-family: var(--font-display); font-size: 1.14rem; }
.plan-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--brand);
}
.plan-note { display: block; margin-top: 3px; color: var(--ink-3); font-size: .84rem; }

.plan-perks { margin: 14px 0 0; padding-left: 0; list-style: none; }
.plan-perks li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: .9rem;
  line-height: 1.45;
}
.plan-perks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 10px;
  height: 6px;
  border-left: 2.4px solid var(--brand);
  border-bottom: 2.4px solid var(--brand);
  transform: rotate(-45deg);
}

.plan-fine {
  margin-top: 16px;
  padding: 13px 15px;
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
  color: var(--brand-soft-ink);
  font-size: .88rem;
  line-height: 1.6;
}

/* A promoted listing is ringed so it reads as lifted, not just first. */
.card-highlight {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand), 0 14px 30px rgba(216, 35, 42, .16);
}
.badge.premium { background: #1b1b1b; color: #fff; }

/* The single wide package under the five cards. */
.plan-wide { position: relative; display: block; margin-top: 14px; cursor: pointer; }
.plan-wide input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan-wide-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.plan-wide:hover .plan-wide-body { border-color: var(--brand); }
.plan-wide input:checked + .plan-wide-body {
  border-color: var(--brand);
  box-shadow: 0 10px 26px rgba(216, 35, 42, .16);
}
.plan-wide input:focus-visible + .plan-wide-body { outline: 2px solid var(--brand); outline-offset: 2px; }
.plan-wide .plan-note { margin-top: 2px; }

@media (min-width: 760px) { .plan-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 760px) and (max-width: 1100px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------- buyer requirement list */

.plan-grid-two { grid-template-columns: 1fr; }
@media (min-width: 640px) { .plan-grid-two { grid-template-columns: repeat(2, 1fr); } }

.req-filters {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 16px;
}
.req-select {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  min-height: 44px;
}
.req-count { color: var(--ink-2); font-size: .9rem; }

.req-list { display: grid; gap: 12px; }
@media (min-width: 820px) { .req-list { grid-template-columns: repeat(2, 1fr); } }

.req-card {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
/* A boosted requirement is ringed the same way a promoted listing is, so the
   two mean the same thing wherever you see them. */
.req-card-up { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }

.req-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: .84rem;
}
.req-type {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-soft-ink);
  font-weight: 700;
}
.req-where { font-weight: 600; }
.req-when { color: var(--ink-3); margin-left: auto; }

.req-text { margin-bottom: 14px; line-height: 1.65; }
.req-phone {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  font-weight: 800;
}
.req-phone a { color: var(--brand-soft-ink); text-decoration: none; }

/* PLC ticks: the whole word is the target, not a four pixel box. */
.tick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.tick:hover { border-color: var(--brand); }
.tick input { accent-color: var(--brand); width: 17px; height: 17px; }
.tick:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-soft-ink);
}

/* --------------------------------------------------------------- payment */

.pay-box {
  margin-top: 18px;
  padding: 18px;
  border: 2px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--surface);
}
.pay-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.pay-head span { color: var(--ink-2); font-weight: 600; }
.pay-amount { font-family: var(--font-display); font-size: 1.7rem; color: var(--brand); }
.pay-open { margin-bottom: 14px; }

.pay-id {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--surface-2, var(--brand-soft));
}
.pay-id > span { color: var(--ink-2); font-size: .84rem; font-weight: 600; }
.pay-id code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95rem;
  font-weight: 700;
  word-break: break-all;
}
.pay-id .btn { margin-left: auto; }

.pay-note {
  margin: 14px 0;
  color: var(--ink-2);
  font-size: .88rem;
  line-height: 1.6;
}

/* The payer is told in advance whose name their app will show. An unexpected
   name is what a fraud looks like, so it must not be a surprise. */
.pay-warn {
  margin-top: 14px;
  padding: 11px 14px;
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
  color: var(--brand-soft-ink);
  font-size: .87rem;
  line-height: 1.55;
  font-weight: 600;
}

/* -------------------------------------------------------- explore page bits */

.ex-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 18px 0 16px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.ex-search:focus-within { border-color: var(--brand); }
.ex-search > svg { width: 19px; height: 19px; color: var(--ink-3); }
.ex-search input {
  min-width: 0;
  padding: 11px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
}
.ex-search input:focus { outline: none; }
.ex-search .btn { border-radius: 999px; padding-inline: 20px; min-height: 42px; }

/* Shortcuts scroll sideways on a phone rather than wrapping into a wall. */
.listing-video { margin-top: 12px; }
.listing-video video {
  width: 100%;
  max-height: 70vh;
  border-radius: var(--r-md, 16px);
  background: #000;
  display: block;
}

.media-rule {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--surface-2, rgba(0, 0, 0, .03));
}
.media-rule b { display: block; margin-bottom: 8px; }
.media-rule ul { margin: 0 0 10px 18px; padding: 0; }
.media-rule li { margin: 3px 0; }
.media-rule p { margin: 0 0 12px; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }

.media-gone {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(216, 35, 42, .08);
  border: 1px solid rgba(216, 35, 42, .3);
  font-size: .9rem;
  line-height: 1.55;
}
.media-gone b { display: block; }

.mine-status {
  margin: 8px 0 0;
  font-size: .88rem;
  font-weight: 600;
}
.mine-status.pending { color: var(--accent, #d8232a); }
.mine-status.live { color: #1a8f5f; }
.mine-status.rejected { color: var(--danger, #b3121a); }

/* A listing read in full, inside the panel.

   One waiting to be let through is not on the site yet, so there is nowhere
   else to read it. Shut by default: on a busy day the admin is looking down a
   list, and only opens the one being decided. */
.whole-listing {
  /* The row is a two-column grid; this has to span both and sit last. */
  grid-column: 1 / -1; order: 9;
  margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px;
}
.whole-listing > summary {
  cursor: pointer; font-weight: 600; color: var(--brand); font-size: .92rem;
}
.whole-listing > img {
  display: block; margin-top: 10px; width: 100%; max-width: 460px;
  border-radius: 10px; background: var(--surface-2);
}
.whole-listing .said { margin-top: 10px; white-space: pre-line; color: var(--ink-2); }
.whole-listing dl {
  margin-top: 10px; display: grid; gap: 6px 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.whole-listing dl > div { display: flex; justify-content: space-between; gap: 12px; }
.whole-listing dt { color: var(--ink-2); font-size: .86rem; }
.whole-listing dd { margin: 0; font-size: .86rem; font-weight: 600; text-align: right; }

.strip-media { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* On a phone the three parts are stacked, so the word above the dropdown is
   read as its label rather than as another button. */
@media (max-width: 560px) {
  .strip-media { width: 100%; }
  .strip-media .meta { flex: 1 1 100%; }
}
.strip-media select {
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: .85rem;
}

/* A field that opens the list rather than a keyboard. */
input.picks { cursor: pointer; background-image: none; }
input.picks:read-only { background: var(--surface); }

.offer-band {
  margin: 0 0 18px;
  padding: 16px 20px;
  border-radius: var(--r-md, 16px);
  border: 2px solid var(--brand);
  background: rgba(216, 35, 42, .08);
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, .95rem + .75vw, 1.4rem);
  line-height: 1.45;
  text-align: center;
  animation: offer-band-glow 2.6s ease-in-out infinite;
}
@keyframes offer-band-glow {
  0%, 100% { background: rgba(216, 35, 42, .08); border-color: var(--brand); }
  50%      { background: rgba(216, 35, 42, .2); border-color: #a3111a; }
}
@media (prefers-reduced-motion: reduce) { .offer-band { animation: none; } }

/* The pick sheet: the whole list, on top of everything, scrolling downwards. */
html.pick-open, html.pick-open body { overflow: hidden; }

.pick-sheet {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  background: var(--bg, #fff);
}
.pick-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 12px 18px;
  border-bottom: 1px solid var(--line);
}
.pick-title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink);
}
.pick-close {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.pick-close:hover { border-color: var(--brand); color: var(--brand); }

.pick-search { padding: 12px 16px 4px; }
.pick-search input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
}
.pick-count {
  margin: 8px 18px 2px;
  color: var(--ink-3);
  font-size: .8rem;
  font-weight: 600;
}

.pick-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  margin: 0;
  padding: 4px 10px calc(24px + env(safe-area-inset-bottom));
}
.pick-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}
.pick-list button:hover { background: var(--surface-2, rgba(0, 0, 0, .05)); }
.pick-no {
  flex: none;
  min-width: 28px;
  color: var(--ink-3);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pick-own { color: var(--brand); font-weight: 700; }
.pick-empty { margin: 18px 14px; color: var(--ink-3); font-size: .95rem; line-height: 1.6; }

/* The locality list that drops out of the search box.

   It scrolls inside itself rather than pushing the page down, so the rest of
   the screen stays where it was. */
.ex-find { position: relative; }

.ex-areas {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  max-height: min(58vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 16px);
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

.ex-areas-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px 8px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.ex-areas-head p {
  flex: 1;
  margin: 0;
  color: var(--ink-3);
  font-size: .78rem;
  font-weight: 600;
}
.ex-areas-close {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.ex-areas-close:hover { border-color: var(--brand); color: var(--brand); }

.ex-areas-list { list-style: none; margin: 0; padding: 0; }
.ex-areas-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
}
.ex-areas-list a:hover { background: var(--surface-2, rgba(0, 0, 0, .04)); }
.ex-areas-no {
  flex: none;
  min-width: 26px;
  color: var(--ink-3);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Three across, two down: no dragging sideways to find the other three. */
.ex-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}
.ex-quick a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: .88rem;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color .12s ease, color .12s ease;
}
.ex-quick a:hover { border-color: var(--brand); color: var(--brand); }
/* Seven shortcuts over three columns leaves the last one alone on its row, so
   it is given the whole row and its longer name sits on one line. */
.ex-quick a:last-child { grid-column: 1 / -1; }
.ex-quick a:first-child {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-on);
}
.ex-quick a:first-child:hover { background: var(--brand-hover); color: var(--brand-on); }

.ex-heading {
  margin: 30px 0 12px;
  font-size: 1.12rem;
}
.ex-search + .ex-quick { margin-top: 0; }

/* The number request sits over the list, so the requirement stays in view. */
.ask-box {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .55);
  overflow-y: auto;
}
.ask-box .form-card { width: min(100%, 460px); }

/* ------------------------------------------------------------------- chats */

.thread {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.thread:hover { border-color: var(--brand); }
.thread-photo {
  width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
  background: var(--surface-2, var(--line));
}
.thread-photo img { width: 100%; height: 100%; object-fit: cover; }
.thread-body { min-width: 0; display: grid; gap: 3px; }
.thread-body b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-role { font-size: .74rem; font-weight: 700; color: var(--brand); }
.thread-last {
  color: var(--ink-2); font-size: .86rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-when { color: var(--ink-3); font-size: .76rem; white-space: nowrap; }

.chat-head { margin: 14px 0 10px; }
.chat-head a { color: var(--ink); text-decoration: none; }
.chat-head a:hover { color: var(--brand); }

.chat-log {
  display: grid;
  gap: 10px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.bubble {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: 14px;
  background: var(--surface-2, var(--brand-soft));
  color: var(--ink);
}
/* Your own words sit on the right, in the brand colour, the way a phone shows
   them, so nobody has to read a label to know who said what. */
.bubble.mine {
  margin-left: auto;
  background: var(--brand);
  color: var(--brand-on);
}
.bubble-who { display: block; font-size: .7rem; font-weight: 800; opacity: .75; }
.bubble p { margin: 3px 0; line-height: 1.55; white-space: pre-line; word-break: break-word; }
.bubble-when { font-size: .7rem; opacity: .7; }

.chat-reply {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}
.chat-reply textarea { min-height: 52px; }

/* Who this browser is signed in as, shown where a number used to be typed. */
.auth-who {
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-soft-ink);
  font-weight: 700;
  font-size: .92rem;
}
.auth-card { width: min(100%, 420px); }
.auth-intro { color: var(--ink-2); font-size: .92rem; margin: 8px 0 16px; line-height: 1.6; }


/* ------------------------------------------------------- the helper that talks

   A button that is always within a thumb's reach, and a panel that opens over
   the page rather than pushing it about. It sits above the bottom bar on a
   phone, so it never covers Home or Sell. */

.ai-wrap { position: fixed; right: 16px; z-index: 9000; bottom: 18px; }
body.has-bottom-nav .ai-wrap {
  bottom: calc(var(--bottom-h) + 16px + env(safe-area-inset-bottom));
}
/* While the home screen offer is up, the helper stands on top of it rather
   than across its button. The height is measured and set by the script,
   because the line wraps on a narrow phone and not on a wide one. */
/* Above the front page's own button, not across it. */
@media (max-width: 760px) {
  body.is-home.has-bottom-nav .ai-wrap {
    bottom: calc(var(--bottom-h) + 16px + 88px + env(safe-area-inset-bottom));
  }
}
body.has-install .ai-wrap { bottom: calc(18px + var(--install-h, 0px) + 12px); }
/* The front page's own button is lifted above the strip, so the helper has to
   climb with it or it lands on the button again. */
@media (max-width: 760px) {
  body.is-home.has-install.has-bottom-nav .ai-wrap {
    bottom: calc(var(--bottom-h) + 16px + var(--install-h, 0px) + 12px + 88px
                 + env(safe-area-inset-bottom));
  }
}
body.has-install.has-bottom-nav .ai-wrap {
  bottom: calc(var(--bottom-h) + 16px + var(--install-h, 0px) + 12px + env(safe-area-inset-bottom));
}

.ai-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-on, #fff);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(216, 35, 42, .42);
}
.ai-open svg { width: 22px; height: 22px; }
.ai-open:hover { background: var(--brand-hover); }

.ai-wrap.open .ai-open { display: none; }

/* On a phone this floats over the page, and the word beside the microphone
   was landing across a line of the front page. The picture says enough on its
   own there; the word stays on wider screens, where there is room for it. */
@media (max-width: 560px) {
  .ai-open { min-width: 52px; padding: 0; justify-content: center; }
  .ai-open > span { display: none; }
}

.ai-panel {
  width: min(92vw, 380px);
  max-height: min(74vh, 620px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 18px);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
  overflow: hidden;
}

.ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 14px 16px;
  background: var(--brand);
  color: #fff;
}
.ai-head b { display: block; font-size: 1rem; }
.ai-head span { display: block; font-size: .78rem; opacity: .85; }
.ai-head div { flex: 1; }
.ai-x {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}

.ai-log {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-line p {
  margin: 0;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: .94rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.ai-her { align-self: flex-start; max-width: 92%; }
.ai-her p { background: var(--surface-2, rgba(0, 0, 0, .05)); color: var(--ink); border-bottom-left-radius: 5px; }
.ai-me { align-self: flex-end; max-width: 86%; }
.ai-me p { background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }

.ai-go {
  display: inline-block;
  margin-top: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}

.ai-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 12px; }
.ai-chips button {
  padding: 8px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: .82rem;
  cursor: pointer;
}
.ai-chips button:hover { border-color: var(--brand); color: var(--brand); }

.ai-say {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.ai-say input {
  flex: 1;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: .95rem;
}
.ai-mic, .ai-send {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.ai-mic svg, .ai-send svg { width: 20px; height: 20px; }
.ai-send { background: var(--brand); border-color: var(--brand); color: #fff; }
.ai-mic.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
  animation: ai-listening 1.1s ease-in-out infinite;
}
@keyframes ai-listening {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 35, 42, .5); }
  50%      { box-shadow: 0 0 0 9px rgba(216, 35, 42, 0); }
}
@media (prefers-reduced-motion: reduce) { .ai-mic.on { animation: none; } }

/* ------------------------------------------------- who is posting

   The four kinds, one under the other, each a whole row that can be tapped.
   Numbered, because they were asked for numbered. */
.who-kinds {
  list-style: none;
  margin: 14px 0 4px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.who-kind {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 14px);
  cursor: pointer;
}
.who-kind:hover { border-color: var(--brand); }
.who-kind input { margin-top: 3px; flex: none; }
.who-kind b { display: block; font-size: .95rem; }
.who-kind em {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: .78rem;
  font-style: normal;
  line-height: 1.4;
}
.who-kind:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

/* --------------------------------------------- the home screen offer

   One line at the foot of the page, above the bottom bar so it covers
   nothing, and gone for good once it is shut. */
.install-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 8000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 14px);
  background: var(--surface);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}
.install-bar img { border-radius: 8px; flex: none; }
.install-bar p { flex: 1; margin: 0; font-size: .86rem; line-height: 1.35; }
/* On a narrow phone the sentence wrapped to four lines and the strip grew tall
   enough to sit across the button underneath it. Two lines is the most it may
   take; the rest is trimmed. */
@media (max-width: 560px) {
  .install-bar p {
    font-size: .8rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.install-close {
  flex: none;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
body.has-bottom-nav .install-bar {
  bottom: calc(var(--bottom-h) + 12px + env(safe-area-inset-bottom));
}
/* One strip, one row.

   Wrapping the sentence onto its own line made the strip three rows tall on a
   narrow phone, and it then sat across the front page's main button. Now the
   sentence is trimmed instead, and everything stays on one line. */
@media (max-width: 560px) {
  .install-bar { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; }
  .install-bar p { flex: 1 1 auto; min-width: 0; }
  .install-bar .btn { flex: none; padding: 0 12px; font-size: .78rem; }
}

/* A place taken out of the lists still shows in the admin panel, greyed, so
   it can be put back. */
/* Who asked, on a buyer's card. The first name and nothing else: no surname,
   no address, no number. */
.req-who {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
}

/* Two ways to add a picture or a clip: from the phone, or with the camera.
   Side by side on a wide screen, one under the other on a narrow one. */
.pick-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.mod-row.is-off { opacity: .55; }

/* A number that opens. It looks like the panel it replaced, but it presses,
   and the one being shown stays lit. */
.tally-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.tally {
  display: block; width: 100%; text-align: center; cursor: pointer;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  font: inherit;
  transition: border-color .12s ease, transform .05s ease;
}
.tally:hover { border-color: var(--brand); }
.tally:active { transform: scale(.98); }
.tally.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.tally b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.tally span { display: block; font-size: .8rem; color: var(--ink-2); line-height: 1.35; }
.tally .head { font-weight: 700; color: var(--ink); font-size: .95rem; margin-bottom: 2px; }

/* The line at the top of the explore page that says who is here. */
.who-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 14px);
  background: var(--surface);
  font-size: .88rem;
  color: var(--ink-2);
}
.who-bar span { flex: 1 1 auto; min-width: 12ch; }
/* On a narrow phone the two buttons sit together on their own line rather
   than one of them dropping away on its own. */
@media (max-width: 520px) {
  .who-bar { gap: 8px 10px; }
  .who-bar span { flex: 1 1 100%; }
  .who-bar .btn { flex: 0 0 auto; }
}

/* ------------------------------------------------- the two support buttons

   They stand where the Sell button stands on other pages: the word, then
   WhatsApp, then email. No number is written anywhere. */
.support { display: flex; align-items: center; gap: 8px; }
.support-word {
  font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.support-btn {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
}
.support-btn svg { width: 20px; height: 20px; }
.support-btn.wa { background: #25d366; border-color: #25d366; color: #fff; }
.support-btn.mail:hover { border-color: var(--brand); color: var(--brand); }
/* The word stays on a phone too: it was asked for, and it is what tells
   somebody the two round buttons are for asking us something. */
/* The header that carries Support carries three things more than the others,
   and on a phone there is not room for those and the name as well. The mark
   stays - it is what somebody recognises - and the name steps aside. */
@media (max-width: 620px) {
  .site-header.has-support .brand-words { display: none; }
}
@media (max-width: 420px) {
  .site-header.has-support .support-word { display: none; }
}
/* The smallest phones still sold. Everything in the row gives up a little so
   the row itself never has to slide sideways. */
@media (max-width: 360px) {
  .site-header.has-support .container { gap: 6px; }
  .site-header.has-support .header-actions { gap: 4px; }
  .site-header.has-support .icon-btn { width: 34px; height: 34px; }
}

@media (max-width: 560px) {
  .support { gap: 6px; }
  .support-word { font-size: .68rem; letter-spacing: .04em; }
  .support-btn { width: 34px; height: 34px; }
  .support-btn svg { width: 18px; height: 18px; }
}

/* The count of unread messages, on the Chat button. */
.bn-icon { position: relative; }
.unread {
  position: absolute; top: -5px; right: -9px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: .62rem; font-weight: 800; font-style: normal;
  display: grid; place-items: center; line-height: 1;
  box-shadow: 0 0 0 2px var(--surface);
}
.ex-links .unread { top: 6px; right: 8px; }

/* A tap has to show something at once.

   Every page is fetched from the server, so between the tap and the new page
   there is a moment of nothing. These make that moment visibly a press rather
   than a phone that has stopped listening. */
.btn:active, .ex-quick a:active, .bottom-nav a:active, .icon-btn:active,
.cat-tile:active, .card:active {
  transform: scale(.97);
  transition: transform .05s ease;
}
.btn[disabled] { opacity: .65; cursor: progress; }

/* ------------------------------------------- how a post is doing

   Three small numbers under a card: looked at, liked, asked about. Quiet
   enough not to compete with the price, there enough to be read. */
.card-counts, .req-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  color: var(--ink-3); font-size: .78rem; font-weight: 700;
}
.card-counts span, .req-count-eye {
  display: inline-flex; align-items: center; gap: 5px;
}
.card-counts svg, .req-count-eye svg, .req-heart svg { width: 15px; height: 15px; }

.req-heart {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink-3); font: inherit; font-size: .78rem; font-weight: 700;
}
.req-heart.on { color: var(--brand); }
.req-foot .btn { margin-left: auto; }

/* The five stars on the way out. */
.stars { display: flex; gap: 4px; }
.stars button {
  border: 0; background: none; cursor: pointer; padding: 0 2px;
  font-size: 1.9rem; line-height: 1; color: var(--line);
}
.stars button.on { color: #f5a623; }