/* ==========================================================================
   petban — classified ads for Pet Saze

   Hand-written, no framework. The tokens below are copied from the WordPress
   theme's petsaze.css rather than imported, because the two apps are deployed
   separately and a build step shared across them would couple releases that
   have no other reason to be coupled. When a token changes there, change it
   here in the same commit — they have to look like one site.

   Two rules carried over from the design system:
   - Orange is action; red / amber / blue are status. A status never fills a
     button, and a page gets one orange CTA.
   - No letter-spacing on Persian text: it breaks the cursive joins.
   ========================================================================== */

@font-face {
  font-family: 'Dana';
  src: url('../fonts/Dana-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Dana';
  src: url('../fonts/Dana-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Design system v2, the same palette the WordPress half runs on. petban was
   still carrying the retired navy/orange set, so the two halves of one site —
   which share a header, a logo and an origin — rendered in two different
   colour systems: an ad page reached from the front page changed its brand
   colour on the way. Sampled from the logo, not guessed. */
:root {
  --ink: #1F2124;
  --ink-deep: #15171A;
  --ink-soft: #565C63;
  --ink-muted: #6C727B;    /* 4.85:1 on white, 4.52:1 on --mist. Was #8B9199
                              (3.18:1), which every caption failed AA at. */
  --accent: #F66F00;
  --accent-ink: #BB5100;   /* accent-coloured TEXT: #F66F00 is 2.79:1 and
                              #DC5F00 only 3.70:1 — fine for an icon, short for
                              a word. This clears 4.5 on white and on --sand. */

  --paper: #FFFFFF;
  --mist: #F6F7F8;
  --sand: #FFF4E9;
  --line: #E7E9EC;

  /* Ad status, deliberately outside the orange family so "lost" never
     competes with "buy". */
  --st-lost: #D93A2B;
  --st-found: #12905C;
  --st-rehome: #2F6FE0;
  --st-lost-bg: #FDECEA;
  --st-found-bg: #E6F5EE;
  --st-rehome-bg: #EAF1FD;
  --st-neutral: #565C63;
  --st-neutral-bg: #F6F7F8;

  /* The three hues above are sized for a dot or a border. As pill TEXT on
     their own tints they land at 4.00 / 3.61 / 4.14 — short of AA — so text
     gets its own step: same hue, lightness walked down until it clears 4.5. */
  --st-lost-ink: #CB3324;
  --st-found-ink: #107D50;
  --st-rehome-ink: #2367DE;

  --line-soft: #EFF1F3;

  /* The theme's own names for the accent, so rules ported from petsaze.css
     work here unaltered instead of being retyped with a different token. */
  --brand: var(--accent);
  --brand-ink: var(--accent-ink);
  --brand-hover: #DC5F00;
  /* A button fill dark enough to carry a white label. White on the brand
     orange #F66F00 is 2.92:1 — below AA at every size — so a white-labelled
     button cannot use it. Same hue walked down until white clears 4.5. The
     bright orange keeps every job that is not a text ground. */
  --brand-btn:       #BB5100;   /* white 4.90:1 */
  --brand-btn-hover: #A84900;   /* white 5.80:1 */
  --brand-surface: var(--sand);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --r-sm: 8px; --r-card: 12px; --r-block: 18px; --r-pill: 999px;
  --shadow: 0 2px 10px rgba(31, 33, 36, .06);
  --shadow-lift: 0 8px 24px rgba(31, 33, 36, .10);

  --font: 'Dana', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --t-xxs: .6875rem; --t-xs: .8125rem; --t-sm: .875rem; --t-md: 1rem;
  --t-lg: .9375rem; --t-xl: 1.25rem; --t-2xl: 1.5rem; --t-3xl: 1.75rem;
  --t-4xl: 2.25rem;

  /* 1440 with an 80px gutter, the same container the WordPress side uses.
     petban was on 1280 with a 48px gutter, so the shared header measured
     160px narrower here — the logo, the search field and the menu all landed
     in different places on the two halves of one site. */
  --wrap: 1440px;
  --wrap-read: 720px;
  --gutter: 80px;
  --header-h: 96px;
}

@media (max-width: 1100px) { :root { --gutter: 24px; } }
@media (max-width: 899px)  { :root { --header-h: 64px; } }
@media (max-width: 700px) {
  :root { --t-3xl: 1.5rem; --t-4xl: 1.875rem; --gutter: 16px; }
}

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

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

body.store-body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.9;
  color: var(--ink-soft);
  background: var(--paper);
}

h1, h2, h3, h4 { color: var(--ink); line-height: 1.5; margin: 0 0 var(--s4); }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }

a { color: var(--ink); }
img { max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--read { max-width: calc(var(--wrap-read) + var(--gutter) * 2); }
.section { padding-block: var(--s8); }

.store-skip-link {
  position: absolute; inset-inline-start: -9999px;
  background: var(--ink); color: #fff; padding: var(--s3) var(--s5);
}
.store-skip-link:focus { inset-inline-start: var(--s4); top: var(--s4); z-index: 99; }

/* ---------------------------------------------------------------- chrome */

/* The header below is a port of the WordPress theme's, rule for rule. petban
   ships its own stylesheet — the two apps do not share a CSS toolchain — so
   the price of one header is that these rules exist twice. They are kept
   verbatim rather than "adapted", because an adapted copy is how the two
   drifted apart in the first place. */

.store-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.announce {
  background: var(--brand-surface, var(--sand));
  color: var(--accent-ink);
  font-size: .75rem;
  line-height: 1.833;
}
.announce__inner {
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  gap: var(--s3);
  text-align: center;
}

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.masthead__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s4);
  min-height: var(--header-h, 96px);
}

.masthead__burger {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink);
}

.masthead__brand img { display: block; width: auto; height: 66px; }

/* width, not just justify-self: an auto inline margin on a grid item wins over
   stretch and shrinks the item to its content. */
.masthead__search {
  justify-self: stretch;
  width: 100%;
  max-width: 660px;
  margin-inline: auto;
}

.masthead__actions { display: flex; align-items: center; gap: var(--s2); }

.action {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  min-height: 44px;
  text-decoration: none;
  font-size: var(--t-xs);
  line-height: 1.846;
  color: var(--ink-soft);
}
.action:hover { color: var(--ink); }
.action .icon { flex: none; color: var(--ink); }
.action:hover .icon { color: var(--accent-ink); }
.action__label { display: none; }
.action__count { font-variant-numeric: tabular-nums; }

@media (min-width: 900px) { .action__label { display: inline; } }

@media (max-width: 899px) {
  .masthead__burger { display: inline-flex; }
  .masthead__search { display: none; }
  .masthead__row { grid-template-columns: auto auto 1fr; }
  .masthead__burger  { grid-column: 1; grid-row: 1; }
  .masthead__actions { grid-column: 2; grid-row: 1; justify-self: start; }
  .masthead__brand   { grid-column: 3; grid-row: 1; justify-self: end; }
  .masthead__brand img { height: 48px; }
}

/* Search */
.searchform {
  display: flex; align-items: center;
  min-height: 48px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding-inline-start: var(--s4);
}
.searchform:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(246, 111, 0, .18);
}
.searchform__input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  padding: var(--s2) 0;
  font: inherit;
  font-size: var(--t-sm);
  line-height: 1.857;
  outline: none;
}
.searchform__input::placeholder { color: var(--ink-muted); opacity: 1; }
.searchform__submit {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; align-self: stretch;
  border: 0; background: transparent;
  color: var(--ink-muted); cursor: pointer;
}
.searchform__submit:hover { color: var(--ink); }

/* Nav row */
.mainnav {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.mainnav__row { display: flex; align-items: center; gap: var(--s6); min-height: 56px; }
@media (max-width: 899px) { .mainnav { display: none; } }

.menu { display: flex; align-items: center; gap: 34px; margin: 0; padding: 0; list-style: none; }
.menu li { position: relative; }
.menu a {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: var(--s3) 0;
  font-size: var(--t-sm);
  line-height: 1.857;
  font-weight: 400;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.menu > li > a:hover { color: var(--ink); }
.menu > li.current-menu-item > a {
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: var(--brand);
}

.mainnav__ads,
.drawer__ads { display: flex; gap: var(--s2); }
.mainnav__ads { margin-inline-start: auto; }
.drawer__ads {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  flex-direction: column;
}

.navpill {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3);
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 500;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.navpill:hover { border-color: currentColor; }
.navpill__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.navpill--lost { background: var(--st-lost-bg); color: var(--st-lost-ink); }
.navpill--lost .navpill__dot { background: var(--st-lost-ink); }
.navpill--rehome { background: var(--st-rehome-bg); color: var(--st-rehome-ink); }
.navpill--rehome .navpill__dot { background: var(--st-rehome-ink); }
.navpill.is-active { border-color: currentColor; }

/* Drawer */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer[hidden] { display: none; }
.drawer__panel {
  position: absolute; z-index: 1;
  inset-block: 0; inset-inline-start: 0;
  width: min(88vw, 340px);
  padding: var(--s5);
  background: var(--paper);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s5);
  box-shadow: var(--shadow-lift, 0 8px 24px rgba(31, 33, 36, .10));
}
.drawer__close {
  align-self: flex-end;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer; color: var(--ink);
}
.menu--drawer { flex-direction: column; align-items: stretch; gap: 0; }
.menu--drawer a {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line-soft, var(--line));
  font-size: var(--t-md);
}
.menu--drawer a:hover { color: var(--accent-ink); }
.navpill__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.navpill--lost .navpill__dot { background: var(--st-lost); }
.navpill--rehome .navpill__dot { background: var(--st-rehome); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s3) var(--s5); min-height: 44px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font: inherit; font-weight: 700; font-size: var(--t-sm);
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--ink-deep); }

/* White label on a darkened orange. The bright #F66F00 cannot carry white at
   any size — 2.92:1 — so the fill comes down rather than the label going
   charcoal. One of these per page. */
.btn--accent { background: var(--brand-btn); color: #fff; border-color: var(--brand-btn); }
.btn--accent:hover { background: var(--brand-btn-hover); color: #fff; }
.btn--wide { width: 100%; }
/* A button that is not the page's action: the map picker's helpers sit next to
   a field, and giving them the filled treatment would put three competing
   buttons on one form. */
.btn--quiet {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
  font-size: var(--t-xs);
  padding: var(--s2) var(--s3);
  min-height: 36px;
}
.btn--quiet:hover { background: var(--mist); color: var(--ink); }
.btn--quiet:disabled { opacity: .45; cursor: not-allowed; }
.btn--quiet:disabled:hover { background: transparent; color: var(--ink-soft); }

/* ------------------------------------------------------------------ pill */

.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 4px var(--s3); border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 700;
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; }
.pill--lost { background: var(--st-lost-bg); color: var(--st-lost-ink); }
.pill--found { background: var(--st-found-bg); color: var(--st-found-ink); }
.pill--rehome { background: var(--st-rehome-bg); color: var(--st-rehome-ink); }
.pill--neutral { background: var(--st-neutral-bg); color: var(--st-neutral); }
.pill--lost .pill__dot { background: var(--st-lost); }
.pill--found .pill__dot { background: var(--st-found); }
.pill--rehome .pill__dot { background: var(--st-rehome); }
.pill--neutral .pill__dot { background: var(--st-neutral); }

/* ------------------------------------------------------------ board head */

.board-head { padding-block: var(--s7) 0; }

.board-head__row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); margin-block: var(--s4) var(--s6);
}
.board-head__intro { max-width: 62ch; }
.board-head__intro h1 { margin-bottom: var(--s3); }
.board-head__intro p { margin: 0; color: var(--ink-muted); }

.board-search {
  display: flex; align-items: flex-end; gap: var(--s4);
  padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-card);
}
.board-search label { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: var(--t-xs); color: var(--ink-muted); }
.board-search select {
  font: inherit; font-size: var(--t-sm); color: var(--ink);
  padding: var(--s2); border: 0; border-bottom: 1px solid var(--line); background: transparent;
}

.board-stats { display: flex; gap: var(--s8); margin-block: var(--s6); }
.board-stats div { display: flex; flex-direction: column; }
.board-stats strong { font-size: var(--t-2xl); color: var(--ink); line-height: 1.3; }
.board-stats span { font-size: var(--t-xs); color: var(--ink-muted); }

/* ------------------------------------------------------------------ grid */

.grid { display: grid; gap: var(--s5); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.empty { color: var(--ink-muted); text-align: center; padding-block: var(--s8); }

.pager { margin-top: var(--s7); }

/* ------------------------------------------------------------------ card */

.adcard {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
}
.adcard:hover { border-color: var(--ink-muted); box-shadow: var(--shadow); }

.adcard__media {
  position: relative; display: block; aspect-ratio: 292 / 160;
  background: var(--mist); overflow: hidden;
}
.adcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.adcard__noimg {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 28px; opacity: .35;
}

.adcard__pill {
  position: absolute; inset-block-start: var(--s3); inset-inline-start: var(--s3);
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 4px var(--s3); border-radius: var(--r-pill);
  background: var(--paper); font-size: var(--t-xs); font-weight: 700;
}
.adcard__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.adcard--lost .adcard__pill { background: var(--st-lost-bg); color: var(--st-lost-ink); }
.adcard--found .adcard__pill { background: var(--st-found-bg); color: var(--st-found-ink); }
.adcard--rehome .adcard__pill { background: var(--st-rehome-bg); color: var(--st-rehome-ink); }
.adcard--lost .adcard__dot { background: var(--st-lost); }
.adcard--found .adcard__dot { background: var(--st-found); }
.adcard--rehome .adcard__dot { background: var(--st-rehome); }

.adcard__body { display: flex; flex-direction: column; gap: 2px; padding: var(--s4); flex: 1; }
.adcard__title { margin: 0 0 var(--s1); font-size: var(--t-lg); }
.adcard__title a { color: var(--ink); text-decoration: none; }
.adcard__title a:hover { text-decoration: underline; }
.adcard__line { margin: 0; font-size: var(--t-sm); line-height: 1.8; color: var(--ink-soft); }
.adcard__line--soft { color: var(--ink-muted); }

.adcard__actions { margin-block-start: auto; padding-top: var(--s4); display: flex; gap: var(--s2); }
.adcard__cta, .adcard__more {
  flex: 1; text-align: center; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); font-size: var(--t-sm); font-weight: 700; text-decoration: none;
}
.adcard__more { flex: 0 0 auto; color: var(--ink-muted); font-weight: 400; }
.adcard__cta:hover, .adcard__more:hover { background: var(--mist); }

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

.crumbs { padding-block: var(--s4); font-size: var(--t-xs); color: var(--ink-muted); border-bottom: 1px solid var(--line); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs span { margin-inline: var(--s2); }

/* ------------------------------------------------------------ the ad page

   Two columns: the prose on one side, and on the other a single card holding
   every fact a reader has to have before they can act — where, when, how, the
   reward, the number. The old page put those in sentences inside the
   description, where they could not be scanned and could not be indexed. */

.ad { padding-block: var(--s5) var(--s8); }

.ad__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s6);
}
.ad__title { margin: 0; font-size: var(--t-3xl); line-height: 1.375; }
.ad__place {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s2) 0 0;
  color: var(--ink-muted); font-size: var(--t-sm);
}
.ad__place .icon { flex: none; }
.ad__code { margin: 0; flex: none; color: var(--ink-muted); font-size: var(--t-xs); }

.ad__layout { display: grid; gap: var(--s5); align-items: start; }
.ad__body { min-width: 0; display: grid; gap: var(--s5); align-content: start; }
.ad__side { min-width: 0; display: grid; gap: var(--s5); align-content: start; }

@media (min-width: 1000px) {
  /* The facts card takes the first column, which in RTL is the right-hand one
     — the side of the page a Persian reader lands on. The photo and the prose
     share the second. Explicit placement, because the markup is ordered for
     the narrow screen and auto-placement would follow that order instead. */
  .ad__layout {
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--s6) var(--s7);
  }
  .ad__gallery { grid-column: 2; grid-row: 1; }
  .ad__body    { grid-column: 2; grid-row: 2; }
  .ad__side    { grid-column: 1; grid-row: 1 / span 2; }
}

.ad__gallery {
  border-radius: var(--r-block);
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 4 / 3;
}
.ad__gallery img { width: 100%; height: 100%; object-fit: cover; }
.ad__noimg {
  display: grid; place-items: center; align-content: center; gap: var(--s2);
  height: 100%;
  color: var(--ink-muted); font-size: var(--t-sm);
}

/* A plain white panel, the same one the description, the map and any later
   block sit in — so the left column reads as a stack of one material. */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  padding: var(--s5);
}
.panel__title {
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-xl);
  line-height: 1.4;
}
.panel__lede { margin: 0 0 var(--s4); color: var(--ink-soft); font-size: var(--t-sm); }
.panel__prose { margin: 0; line-height: 2; white-space: pre-line; }

/* The one loud element the page is allowed. It is red rather than orange
   because it is a warning, not an action — orange is reserved for the button
   directly above it. */
.scamwarn {
  background: var(--st-lost);
  color: #fff;
  border-radius: var(--r-block);
  padding: var(--s5);
  text-align: center;
}
.scamwarn p { margin: 0; font-weight: 700; line-height: 1.9; }

.ad__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  padding: var(--s5);
}
.ad__cardtop {
  display: grid; gap: var(--s4);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}

.specs { margin: 0; padding: 0; }
.specs > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.specs > div:last-child { border-bottom: 0; }
.specs dt { flex: none; max-width: 50%; color: var(--ink-muted); font-size: var(--t-xs); margin: 0; }
/* The value wraps; the label does not. An appearance description is a sentence
   and has to be allowed to run to several lines without pushing its label
   around. */
.specs dd {
  margin: 0;
  text-align: end;
  color: var(--ink); font-weight: 700; font-size: var(--t-sm); line-height: 1.8;
}
.specs__row--strong dd { color: var(--accent-ink); }
.specs__flag { color: var(--st-lost-ink); font-weight: 700; }

.contact { display: grid; gap: var(--s3); }
.contact__number {
  margin: 0;
  font-size: var(--t-xl); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; direction: ltr; text-align: center;
}

.ad__police {
  margin: var(--s5) 0 0;
  padding: var(--s4);
  background: var(--st-lost-bg);
  border: 1px solid var(--st-lost);
  border-radius: var(--r-card);
  color: var(--st-lost-ink);
  font-size: var(--t-xs);
  line-height: 2;
}
.ad__police strong { font-weight: 700; }

.ad__report {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4);
  color: var(--ink-muted); font-size: var(--t-xs); text-decoration: none;
}
.ad__report:hover { color: var(--st-lost-ink); }

.ad__share {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  padding: var(--s5);
}
.ad__sharelabel {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s3);
  color: var(--ink-muted); font-size: var(--t-xs);
}
.ad__sharebox {
  display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--mist);
  overflow: hidden;
}
.ad__sharebox input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  padding: var(--s3);
  font: inherit; font-size: var(--t-xs);
  direction: ltr; text-align: left;
  color: var(--ink-soft);
}
.ad__copy {
  flex: none;
  width: 42px; align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-inline-start: 1px solid var(--line);
  background: transparent; color: var(--ink-muted); cursor: pointer;
}
.ad__copy:hover { color: var(--ink); }
.ad__copy.is-done { color: var(--st-found-ink); }

/* ----------------------------------------------------------------- maps */

.mapbox__canvas {
  height: 320px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--mist);
  /* Leaflet paints its own stacking context; without this the panel's rounded
     corners are drawn over by square tiles. */
  isolation: isolate;
  z-index: 0;
}
.mapbox__coords {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s3) 0 0;
  color: var(--ink-muted); font-size: var(--t-xs);
}
.mapbox__coords a { margin-inline-start: auto; color: var(--accent-ink); font-weight: 700; }

.mappicker__hint { margin: var(--s1) 0 var(--s3); color: var(--ink-muted); font-size: var(--t-xs); }
.mappicker__canvas { height: 280px; }
.mappicker__row {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s3);
}
.mappicker__value {
  flex: 1; min-width: 160px;
  color: var(--ink-soft); font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

/* Leaflet's own chrome, brought onto the site's type and palette. */
.leaflet-container { font: inherit; font-size: var(--t-xxs); }
.leaflet-control-attribution { font-size: 10px; }
/* Leaflet's own link colour is #0078A8, which lands at 3.64:1 on the pale
   panel it prints itself on — the only two nodes on the site that failed AA
   after this map was added. #005B80 is the same hue walked down to 5.51:1.
   Qualified by .leaflet-container so it outweighs leaflet.css's own
   `.leaflet-container a`: that sheet is pushed onto the styles stack and so is
   served after this one, and at equal specificity it would win. */
.leaflet-container .leaflet-control-attribution a { color: #005B80; }
.leaflet-container .leaflet-control-attribution { color: #3A4046; }

.reviewspecs {
  margin-top: var(--s5);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
}
.reviewspecs__title { margin: 0 0 var(--s3); font-size: var(--t-sm); }


/* ------------------------------------------------------------- ticket thread

   Two voices, told apart by side and by ground rather than by a label alone:
   the visitor's messages start at the reading edge on the site's own paper,
   staff replies sit opposite on the warm brand tint. A label is still printed
   on both — colour is the fast read, not the only one. */

.thread { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; gap: var(--s4); }
.thread__item { display: flex; }
.thread__item--staff { justify-content: flex-end; }
.thread__bubble {
  max-width: min(100%, 42rem);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
}
.thread__item--staff .thread__bubble {
  background: var(--sand);
  border-color: transparent;
}
.thread__who { margin: 0 0 var(--s2); font-size: var(--t-xs); font-weight: 700; color: var(--ink); }
/* pre-line, so the line breaks a person typed survive without letting raw
   HTML through — the body is escaped, never rendered. */
.thread__body { margin: 0; white-space: pre-line; line-height: 2; }
/* --ink-soft, not --ink-muted: the staff bubble sits on the sand tint, where
   the muted grey lands at 4.47:1 — a third of a point under AA. The softer
   grey clears it on both grounds, so one colour serves both bubbles. */
.thread__time { margin: var(--s3) 0 0; font-size: var(--t-xxs); color: var(--ink-soft); }

/* -------------------------------------------------------------- support page */

.support__lede { color: var(--ink-soft); margin: 0 0 var(--s6); line-height: 2; }
.support__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4);
}
.support__head h1 { margin: 0; }
.support__meta { margin: var(--s2) 0 0; color: var(--ink-muted); font-size: var(--t-xs); }
.support__about { margin: 0 0 var(--s5); font-size: var(--t-sm); color: var(--ink-soft); }
.support__about a { color: var(--accent-ink); font-weight: 700; }
.support__code { color: var(--ink-muted); }

/* Shown once, on the screen right after filing. The code is the half a person
   can write down; the page they are on is the half that needs no code. */
.support__opened {
  margin-bottom: var(--s6);
  padding: var(--s5);
  border: 1px solid var(--st-found);
  border-radius: var(--r-card);
  background: var(--st-found-bg);
  color: var(--st-found-ink);
}
.support__opened p { margin: 0 0 var(--s2); }
.support__opened p:last-child { margin-bottom: 0; }
.support__bigcode {
  font-size: var(--t-2xl); font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; direction: ltr; text-align: center;
}

.support__closed {
  padding: var(--s4);
  border-radius: var(--r-card);
  background: var(--mist);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}
.support__closed a { color: var(--accent-ink); font-weight: 700; }

.support__reply { margin-top: var(--s5); }

.support__lookup {
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.support__lookup h2 { font-size: var(--t-lg); margin: 0 0 var(--s4); }

.prose { line-height: 2; }

.notice { background: var(--mist); }
.notice--warn { background: var(--sand); }
.notice h2 { font-size: var(--t-xl); }
.notice p { margin: 0; max-width: 80ch; }

/* ----------------------------------------------------------------- forms */

.steps { display: flex; gap: var(--s2); list-style: none; margin: 0 0 var(--s6); padding: 0; flex-wrap: wrap; font-size: var(--t-xs); }
.steps li { padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--mist); color: var(--ink-muted); }
.steps li.is-active { background: var(--ink); color: #fff; }
.steps li.is-done { background: var(--st-rehome-bg); color: var(--st-rehome-ink); }

.form { display: flex; flex-direction: column; gap: var(--s5); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.form label, .form__block { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); color: var(--ink); font-weight: 700; }
/* Every control, not an enumeration of the types that happened to exist when
   this was written — a date field and a select were added later and inherited
   the browser's default chrome, which is how one form ends up looking like
   two. `select` and `input` cover what comes next as well. */
.form input, .form select, .form textarea {
  font: inherit; font-size: var(--t-sm); font-weight: 400; color: var(--ink);
  min-height: 44px;
  padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
}
.form input[type=radio], .form input[type=checkbox] { min-height: 0; padding: 0; }
.form textarea { resize: vertical; line-height: 1.9; min-height: 100px; }

/* A group of related fields with a heading. */
.form__section {
  margin: 0;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--mist);
  display: flex; flex-direction: column; gap: var(--s4);
}
.form__section > legend {
  padding-inline: var(--s2);
  font-size: var(--t-sm); font-weight: 700; color: var(--ink);
}
.form__section[hidden] { display: none; }
.form__section .form__grid { background: transparent; }
.form small { font-weight: 400; color: var(--ink-muted); font-size: var(--t-xs); }
.req { color: var(--st-lost-ink); }

/* The caption is its own row inside a column-flex label. Without this the
   bare text node and the asterisk each become their own flex line, which put
   the required marker on the line below the field name. */
.cap { display: block; }

.kinds { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.kinds legend { font-weight: 700; color: var(--ink); margin-bottom: var(--s3); }

/* The selected card is marked in brand orange, never in the status colour:
   choosing is an action, and the status belongs to the listing, not the act
   of filing it. */
.kindcard {
  display: block; padding: var(--s4); border: 1px solid var(--line);
  border-radius: var(--r-card); cursor: pointer; text-align: center;
}
.kindcard:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.kindcard input { position: absolute; opacity: 0; pointer-events: none; }
.kindcard__label { display: block; font-weight: 700; color: var(--ink); }
.kindcard__hint { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--ink-muted); }

.check { flex-direction: row !important; align-items: center; gap: var(--s3) !important; font-weight: 400 !important; }
.form__row { display: flex; gap: var(--s3); }
.formerror { color: var(--st-lost-ink); font-size: var(--t-sm); margin: 0; }
.reviewcard { max-width: 320px; margin-bottom: var(--s6); }

.toast {
  position: fixed; inset-block-end: var(--s5); inset-inline-start: var(--s5);
  background: var(--ink); color: #fff; padding: var(--s3) var(--s5);
  border-radius: var(--r-sm); font-size: var(--t-sm); z-index: 50;
}

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

/* A port of the theme's footer, rule for rule. petban's own was dark — an ink
   ground with white-on-ink links — while the shop's is the pale one measured
   off the approved reference, so the page changed colour at the boundary
   between the two halves of one site.

   Geometry from that reference: column headings 14/700 with 30px under them,
   links 13px with 15px between them, and a 6px round dot before each one. The
   dot is the one place colour appears down here, which is why the rest of the
   block can stay this quiet. */

.footer {
  background: var(--mist);
  color: var(--ink);
  margin-top: var(--s9);
}
.footer a { color: var(--ink-soft); text-decoration: none; }
.footer a:hover { color: var(--accent-ink); }

/* ------------------------------------------------------- support strip */

.footer__support { border-bottom: 1px solid var(--line); }
.footer__support-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s3) var(--s6);
  padding-block: var(--s4);
}
.footer__support-item {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0;
  font-size: var(--t-xs);
  color: var(--ink-soft);
}
.footer__support-item .icon { color: var(--accent-ink); flex: none; }
.footer__support-label { color: var(--ink); font-weight: 500; }
.footer__support-item a { color: var(--ink); }
.footer__support-item a + a { margin-inline-start: var(--s3); }

/* ------------------------------------------------------------- columns */

/* One track per column, counted by the grid itself — see the theme's copy of
   this rule. */
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s6) var(--s5);
  padding-block: 56px 48px;
}

.footer__title {
  font-size: .875rem;    /* 14 */
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 30px;
}

.menu--footer {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 15px;
  margin: 0; padding: 0;
  list-style: none;
}
.menu--footer li { position: relative; padding-inline-start: 14px; }
/* The dot is a marker, not a bullet character: ::marker cannot be positioned
   in a flex column list, and a real element would be read out by a screen
   reader as content it is not. */
.menu--footer li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.menu--footer a {
  padding: 0;
  border: 0;
  font-weight: 400;
  font-size: .8125rem;   /* 13 */
  line-height: 1.6;
  white-space: normal;
}
.menu--footer a:hover { border: 0; }

/* -------------------------------------------------------------- follow */

.socials { display: flex; gap: var(--s3); margin: 0 0 var(--s6); padding: 0; list-style: none; }
.socials__link {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.socials__link:hover { background: var(--brand); border-color: var(--brand); color: var(--ink); }

.subscribe__label {
  display: block;
  margin-bottom: var(--s3);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.7;
}
.subscribe__row { display: flex; gap: var(--s2); align-items: stretch; }
.subscribe__input {
  flex: 1; min-width: 0;
  height: 46px;
  padding-inline: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-xs);
}
.subscribe__input::placeholder { color: var(--ink-muted); }
.subscribe__go {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand-btn);
  color: #fff;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.subscribe__go:hover { background: var(--brand-btn-hover); color: #fff; }
.subscribe__msg { margin: var(--s3) 0 0; font-size: var(--t-xs); line-height: 1.7; }
.subscribe__msg--ok { color: var(--st-found-ink); }
.subscribe__msg--bad { color: var(--st-lost-ink); }

/* --------------------------------------------------------- about block */

.footer__about { padding-block: var(--s6); border-top: 1px solid var(--line); }
.footer__about-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 9px; }
.footer__about-text { color: var(--ink-soft); font-size: var(--t-xs); line-height: 2; }
.footer__about-text p { margin: 0 0 var(--s3); }
.footer__about-text p:last-child { margin-bottom: 0; }
/* Clamped rather than max-height'd: a height guess either cuts a line in half
   or leaves a gap, and line-clamp counts the lines the browser actually drew. */
.footer__about-text[data-clamp] {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.footer__about-text.is-open {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
  overflow: visible;
}
.footer__about-more {
  margin-top: var(--s2);
  padding: 0; border: 0; background: none;
  color: var(--accent-ink);
  font: inherit; font-size: var(--t-xs); font-weight: 700;
  cursor: pointer;
}
.footer__about-more:hover { text-decoration: underline; }

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

.footer__base { border-top: 1px solid var(--line); }
.footer__base-row {
  padding-block: var(--s4);
  font-size: .75rem;
  line-height: 1.833;
  color: var(--ink-soft);
}
.footer__base-row p { margin: 0; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: var(--s6); padding-block: var(--s6); }
  .footer__support-row { gap: var(--s2) var(--s4); }
  .footer__title { margin-bottom: var(--s4); }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .detail { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .board-head__row { flex-direction: column; align-items: stretch; }
  .board-search { flex-direction: column; align-items: stretch; }
  .board-stats { gap: var(--s5); }
  .form__grid, .kinds { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .mainnav__row { flex-wrap: wrap; }
  .mainnav__ads { margin-inline-start: 0; }
}

/* ------------------------------------------------------------ OTP entry */

/* Latin digits, wide tracking, centred: the one place on this site where
   letter-spacing is right, because a six-digit code is not Persian text and
   the gaps are what let someone check it against the SMS a digit at a time. */
.otp {
  font-size: var(--t-2xl);
  letter-spacing: .4em;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.resend { margin-top: var(--s4); text-align: center; }

.linkbtn {
  background: none;
  border: 0;
  padding: var(--s2);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink-muted);
  text-decoration: underline;
  cursor: pointer;
}
.linkbtn:hover { color: var(--ink); }

/* ------------------------------------------------------------- filefield */

/* A Persian skin over the native file input. The real <input type=file> stays
   where it is — transparent, full-bleed inside the label, still keyboard
   focusable — so nothing about picking or submitting a file changes; only the
   browser's own "Choose File / No file chosen" stops being visible.
   .form .filefield (0,2,0) is deliberately more specific than .form label
   (0,1,1), which would otherwise stack this row into a bold column. */
.form .filefield {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: var(--s3);
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-weight: 400;
  cursor: pointer;
}
.filefield__input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.filefield__btn {
  flex: none;
  padding: var(--s2) var(--s4);
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 700;
}
/* The name can be long and must not push the button off the row. */
.filefield__name {
  min-width: 0;
  color: var(--ink-soft);
  font-size: var(--t-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filefield:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }