/* YardsaleList Web — Shared Styles */

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

:root {
  /* ── Brand palette — single source of truth. Change these (and brand.config.json) to re-theme the whole web app. ── */
  --brand-amber: #F5A623;       /* treasure-hunt energy / highlights */
  --brand-teal: #1A7A6E;        /* map / trust / primary surfaces */
  --brand-teal-dark: #145d54;
  --brand-coral: #E8513A;       /* calls to action */
  --brand-coral-dark: #c8402b;
  --brand-cream: #FAF7F2;

  /* ── Semantic roles (reference these in rules, not raw hex) ── */
  --primary: var(--brand-teal);
  --primary-dark: var(--brand-teal-dark);
  --accent: var(--brand-coral);
  --accent-dark: var(--brand-coral-dark);
  --highlight: var(--brand-amber);
  --primary-tint: #e7f3f1;          /* selected / hover wash of primary */
  --primary-tint-border: #b9ddd7;
  --cta-wash: #fff4ec;              /* warm section background */

  --text: #2C2C2C;
  --muted: #7a756c;
  --border: #E5E0D8;
  --bg: var(--brand-cream);
  --card-bg: #fff;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(0,0,0,.08);
  --gap: 1.25rem;
  /* Live height of the sticky masthead (nav.js measures it and overrides this).
     Used as the sticky offset for the map/list bar and as scroll-margin so the
     results land just below the header instead of behind it. */
  --header-h: 52px;

  /* Back-compat aliases for legacy rules */
  --green: var(--primary);
  --green-dark: var(--primary-dark);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* ── Accessibility: keyboard focus + reduced motion ─────── */
:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Respect users who ask for less motion (vestibular comfort). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Small layout utilities (so markup needs no inline styles) ── */
.text-center { text-align: center; }
.fw-normal { font-weight: 400; }
.mb-xs { margin-bottom: .25rem; }
.mt-sm { margin-top: .75rem; }
.mt-md { margin-top: 1rem; }
.notice { text-align: center; padding: 1rem 0; }
.notice__icon { font-size: 2rem; }
.notice__title { font-weight: 600; margin-bottom: .5rem; }
.notice__text { color: var(--muted); font-size: .9rem; }

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  background: var(--green);
  color: #fff;
  padding: 3rem 1.5rem 2.5rem;
  text-align: center;
}
.hero--compact { padding: 2rem 1.5rem; }
.hero__content { max-width: 640px; margin: 0 auto; }
.eyebrow { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; opacity: .92; margin-bottom: .5rem; }
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; margin-bottom: .75rem; }
.hero p { opacity: .95; margin-bottom: 1.5rem; }

/* Skip link — visible only when focused via keyboard */
.skip-link {
  position: absolute;
  left: .5rem;
  top: -3rem;
  z-index: 1100;
  padding: .6rem 1rem;
  border-radius: 8px;
  background: #fff;
  color: var(--primary-dark);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: top .15s;
}
.skip-link:focus { top: .5rem; outline: 2px solid var(--primary-dark); }
.back-link { color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; display: inline-block; margin-bottom: .75rem; }
.back-link:hover { color: #fff; }

/* Secondary hero CTA ("Use my location") — readable on the teal hero */
.search-secondary {
  margin: .6rem auto 0;
  padding: .55rem 1.1rem;
  display: inline-block;
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.search-secondary:hover { background: rgba(255,255,255,.28); }
.search-secondary:disabled { opacity: .6; cursor: not-allowed; }
.search-status { color: #fff; font-size: .85rem; margin-top: .5rem; }

/* ── Search bar ────────────────────────────────────────── */
.search { display: flex; gap: .5rem; max-width: 380px; margin: 0 auto; }
.search input {
  flex: 1; padding: .75rem 1rem; border: none; border-radius: var(--radius);
  font-size: 1rem; outline: none;
}
.search button, .btn {
  padding: .75rem 1.25rem; background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius); cursor: pointer;
  font-size: .95rem; font-weight: 600; transition: background .15s;
  text-decoration: none; display: inline-block;
}
.search button:hover, .btn:hover { background: var(--primary-dark); }
/* Primary CTAs use the coral accent so they pop on teal surfaces */
.search button, .btn--primary { background: var(--accent); }
.search button:hover, .btn--primary:hover { background: var(--accent-dark); }
.btn--secondary { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn--secondary:hover { background: var(--primary); color: #fff; }
.btn--danger { background: #b42318; color: #fff; }
.btn--danger:hover { background: #8f1b13; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Sticky masthead bar (injected on every page by nav.js) ──── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem 1rem;
  background: var(--primary);
  box-shadow: 0 1px 8px rgba(0,0,0,.18);
}
@media print { .site-header { display: none !important; } }

/* ── Brand wordmark ─────────────────────────────────────── */
.brand-mark {
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  text-decoration: none;
}
.brand-mark:hover { color: var(--brand-cream); }

/* ── Account navigation ─────────────────────────────────── */
.account-nav {
  position: relative;
}
.account-nav__button {
  padding: .5rem .9rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}
.account-nav__button:hover { background: rgba(255,255,255,.26); }
.account-nav__menu {
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  width: 220px;
  padding: .45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.account-nav__menu a,
.account-nav__link {
  display: block;
  width: 100%;
  padding: .65rem .75rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.account-nav__menu a:hover,
.account-nav__link:hover {
  background: var(--primary-tint);
  color: var(--green-dark);
}

/* ── Map section ───────────────────────────────────────── */
/* Layout: a fixed-height column — the map/list stage grows to fill, and the route
   CTA bar is pinned as a footer underneath so it's always on screen (the map
   captures scroll input, so anything below the fold would be unreachable). */
.map-section {
  display: flex;
  flex-direction: column;
  height: min(760px, calc(100dvh - var(--header-h) - 16px));
  min-height: 400px;
  /* When we scroll the results into view, stop just below the sticky masthead
     rather than letting the header overlap the top of the map. */
  scroll-margin-top: var(--header-h);
}
.map-stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 360px;
}

/* ── Results filters (status + sale type) — results page only ── */
.results-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.4rem;
  padding: .6rem .85rem;
  margin: 0 0 .6rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.results-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.results-filters__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-right: .15rem;
}
.filter-chip {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: .32rem .72rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.filter-chip:hover { border-color: var(--primary); }
.filter-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.filter-check { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--text); cursor: pointer; }
.filter-check input { accent-color: var(--primary); width: 1rem; height: 1rem; }

/* Map/List switch — phones only (see mobile block below). */
.map-toggle { display: none; }
.map-toggle__btn {
  flex: 1;
  padding: .7rem 1rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.map-toggle__btn.is-active {
  background: var(--card-bg);
  color: var(--primary-dark);
  box-shadow: inset 0 -3px 0 var(--primary);
}

@media (max-width: 720px) {
  /* The masthead + toggle stay pinned at the top, the map takes the centre band of
     the screen (not the whole viewport), and the route CTA bar sits right below it
     so it's always visible without scrolling — which the greedy map gesture would
     otherwise swallow. The "Hosting a sale?" card peeks underneath. */
  .map-section {
    height: auto;
    min-height: 0;
  }
  .map-toggle {
    display: flex;
    position: sticky;
    top: var(--header-h);
    z-index: 5;
    height: 48px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .map-stage {
    display: block;
  }
  .map-stage > #map {
    height: 50dvh;
    min-height: 280px;
  }
  .map-stage > .map-sidebar {
    border: 0;
    /* Let the page scroll the list instead of a nested scroller fighting it. */
    overflow: visible;
    max-height: none;
  }
  .map-section .map-sidebar { display: none; }
  .map-section.show-list .map-sidebar { display: flex; }
  .map-section.show-list .map-stage > #map { display: none; }
  /* Keep the hosting card compact so it peeks below the map + CTA bar. */
  .cta-section--host { padding: 1.75rem 1rem; }
}
#map { width: 100%; height: 100%; }
.map-sidebar {
  background: var(--card-bg);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.placeholder { color: var(--muted); font-size: .9rem; padding: 1rem 0; }

/* ── Listing cards ─────────────────────────────────────── */
.listing-card {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid var(--primary-tint-border);
  border-radius: var(--radius);
  /* Default (not in route): a light "hazed" green. */
  background: var(--primary-tint);
  margin-bottom: .5rem;
  transition: background .15s, border-color .15s, color .15s;
}

/* In-route selection state — driven purely by the card's checkbox so no JS class
   toggling is needed. Selected = dark green with light text. */
.listing-card:has(input[data-select]:checked) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}
.listing-card:has(input[data-select]:checked) .listing-address,
.listing-card:has(input[data-select]:checked) .listing-type,
.listing-card:has(input[data-select]:checked) .route-toggle,
.listing-card:has(input[data-select]:checked) .muted {
  color: #eafff9;
}
.listing-card:has(input[data-select]:checked) .listing-number {
  background: #fff;
  color: var(--primary-dark);
}

/* Premium (boosted) sales sort to the top and carry a Featured badge:
   hazed gold by default, shifting metallic gold when added to the route. */
.listing-card--featured { border-color: var(--highlight); background: #fbf1d3; }
.listing-card--featured:has(input[data-select]:checked) {
  border-color: #9a7611;
  background: linear-gradient(135deg, #8a6d1b 0%, #d4af37 22%, #f7e7a6 42%, #fff7d6 52%, #e6c34d 70%, #b8860b 100%);
  background-size: 220% 220%;
  animation: gold-shift 6s ease infinite;
}
.listing-card--featured:has(input[data-select]:checked) .listing-address,
.listing-card--featured:has(input[data-select]:checked) .listing-type,
.listing-card--featured:has(input[data-select]:checked) .route-toggle,
.listing-card--featured:has(input[data-select]:checked) .muted {
  color: #3a2c05;
}
.listing-card--featured:has(input[data-select]:checked) .listing-number {
  background: #3a2c05;
  color: #ffe9a8;
}
@keyframes gold-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .listing-card--featured:has(input[data-select]:checked) { animation: none; }
}
.featured-badge {
  display: inline-block;
  margin-bottom: .25rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--highlight);
  color: #4a3608;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.upcoming-badge {
  display: inline-block;
  margin-bottom: .25rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--primary-tint);
  color: var(--green-dark);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.listing-number {
  background: var(--green);
  color: #fff;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.listing-card__body { flex: 1; min-width: 0; }
.listing-address { font-weight: 600; font-size: .9rem; }
.listing-type { color: var(--green-dark); font-size: .8rem; font-weight: 700; margin-top: .15rem; }
.muted { color: var(--muted); font-size: .85rem; }
.listing-card__items {
  display: grid;
  gap: .4rem;
  margin-top: .55rem;
}
.public-item-card {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  border-top: 1px solid var(--border);
  padding-top: .5rem;
}
.public-item-card__photo {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg);
}
.public-item-card__title {
  font-size: .8rem;
  font-weight: 700;
}
.public-item-card__deposit {
  border: 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  padding: .2rem 0;
  text-align: left;
}
.btn-flag {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 1rem; padding: .25rem;
  flex-shrink: 0;
}
.btn-flag:hover { color: #c00; }
.btn-flag:disabled { opacity: .4; cursor: default; }
/* After a confirmed report the flag becomes a small static "Reported" pill. */
.btn-flag--done {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Report-a-listing dialog ───────────────────────────── */
.report-form { display: flex; flex-direction: column; gap: .85rem; }
.report-reasons { display: flex; flex-direction: column; gap: .5rem; }
.report-reasons legend { margin-bottom: .35rem; }
.report-reason {
  flex-direction: row;
  align-items: center;
  gap: .55rem;
  font-weight: 500;
  cursor: pointer;
}
.report-reason input { accent-color: var(--primary); width: 1.05rem; height: 1.05rem; }
.report-note { font-weight: 600; font-size: .85rem; }
.report-note textarea {
  font: inherit;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  resize: vertical;
}

/* ── Route actions (pinned footer of the map section) ──── */
.route-actions {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .7rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
}
.route-actions p { font-size: .85rem; color: var(--muted); }
/* "Make my route" + "List your sale" sit side by side and share the width. */
.route-actions__ctas { display: flex; gap: .6rem; }
.route-actions__ctas .btn { flex: 1; text-align: center; }
.hidden { display: none !important; }

/* Hide visually but keep in the accessibility tree + tab order (e.g. a file
   input fronted by a styled <label>). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Flyer auto-fill shortcut on the listing form. */
.flyer-autofill {
  margin-bottom: 1.25rem;
  padding: 1rem;
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 12px;
  background: var(--surface-muted, #f8fafc);
}
.flyer-autofill__lead { margin: 0 0 .6rem; }
.flyer-autofill__btn { display: inline-block; cursor: pointer; }
.flyer-autofill input:focus-visible + .flyer-autofill__btn { outline: 2px solid var(--accent, #1A7A6E); }

/* Success-moment RouteMaster nudge under a built route. */
.route-upsell { display: inline-block; margin-top: .5rem; font-weight: 600; }

/* Struck list price next to a member's discounted tier price. */
.tier-option__was { opacity: .6; font-weight: 400; font-size: .85em; }

/* Adaptive top-of-funnel nudge (signed-out: create account; free: go ad-free).
   Fixed to the bottom so it doesn't push map content; honors the iOS safe area. */
.upsell-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  flex-wrap: wrap;
  padding: .7rem 2.4rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--accent, #1A7A6E);
  color: #fff;
  font-size: .95rem;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
}
.upsell-banner__text { opacity: .95; }
.upsell-banner__cta { color: #fff; font-weight: 700; text-decoration: underline; }
.upsell-banner__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.upsell-banner__close {
  position: absolute;
  right: .5rem; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  padding: .2rem .5rem;
  cursor: pointer;
}
.upsell-banner__close:focus-visible { outline: 2px solid #fff; }
@media (max-width: 560px) {
  .upsell-banner { font-size: .85rem; padding-left: 1rem; padding-right: 2.2rem; }
}

.route-select-controls { display: flex; gap: 1rem; }
.btn-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--primary); font: inherit; font-size: .82rem; font-weight: 600;
  text-decoration: underline;
}
.btn-link:hover { color: var(--primary-dark); }

/* "Include in route" checkbox on each sidebar card */
.route-toggle {
  display: flex; flex-direction: row; align-items: center; gap: .45rem;
  margin-top: .5rem; font-size: .82rem; font-weight: 600; color: var(--green-dark);
  cursor: pointer;
}
.route-toggle input { accent-color: var(--primary); width: 1rem; height: 1rem; }

.route-result {
  display: flex; flex-direction: column; gap: .5rem;
  border-top: 1px solid var(--border); padding-top: .75rem;
}
.route-result p { margin: 0; }

/* Sign-in gate under the hero search */
.search-gate {
  margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius);
  background: rgba(255,255,255,.16); display: flex; flex-direction: column;
  gap: .6rem; align-items: center; max-width: 380px;
  margin-left: auto; margin-right: auto;
}
.search-gate p { font-size: .9rem; margin: 0; }

/* ── Map marker info card (Zillow-style popup) ──────────── */
.iw-card { width: 250px; max-width: 78vw; }
.iw-carousel {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: var(--bg); border-radius: 8px; overflow: hidden; margin-bottom: .5rem;
}
.iw-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.iw-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 1.9rem; height: 1.9rem; border: none; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 1.2rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.iw-nav:hover { background: rgba(0,0,0,.75); }
.iw-prev { left: .4rem; }
.iw-next { right: .4rem; }
.iw-counter {
  position: absolute; bottom: .4rem; right: .5rem;
  background: rgba(0,0,0,.6); color: #fff; font-size: .72rem;
  padding: .1rem .4rem; border-radius: 999px;
}
.iw-title { font-weight: 700; color: var(--green-dark); font-size: .9rem; margin: 0; }
.iw-addr { font-size: .85rem; margin: .1rem 0 0; }
.iw-hours { font-size: .8rem; color: var(--muted); margin: .1rem 0 0; }
.iw-card .route-toggle { margin-top: .5rem; }

/* ── CTA section ───────────────────────────────────────── */
.cta-section {
  background: var(--cta-wash);
  padding: 3rem 1.5rem;
  text-align: center;
  border-top: 1px solid var(--border);
}
.cta-content { max-width: 500px; margin: 0 auto; }
.cta-content h2 { margin-bottom: .5rem; font-size: 1.5rem; }
.cta-content p { color: var(--muted); margin-bottom: 1.25rem; }

/* ── Form page ─────────────────────────────────────────── */
.form-page {
  max-width: 560px;
  margin: 2rem auto;
  padding: 0 1.5rem 3rem;
}
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.card h2 { font-size: 1.2rem; margin-bottom: .25rem; }
label { display: flex; flex-direction: column; gap: .4rem; font-weight: 500; font-size: .9rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="time"], select {
  padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 8px;
  font-size: 1rem; outline: none; transition: border-color .15s;
  background: #fff;
}
input[type="file"] {
  padding: .65rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: #fff;
}
input:focus, select:focus { border-color: var(--green); }
.field-hint { color: var(--muted); font-size: .8rem; font-weight: 400; }
/* "N more sales just outside this area" hint at the foot of the results panel. */
.results-hint {
  font-size: .85rem;
  padding: .6rem .75rem;
  margin-top: .25rem;
  border-top: 1px solid var(--border);
  text-align: center;
}
.time-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.time-select {
  border-radius: 999px;
  appearance: auto;
}

/* Weekend grid */
fieldset { border: none; }
legend { font-weight: 600; font-size: .9rem; margin-bottom: .75rem; }
/* ── Date range calendar (seller listing dates) ──────────── */
.calendar { border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem; background: #fff; }
.calendar__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.calendar__title { font-weight: 700; }
.calendar__nav {
  width: 2.1rem; height: 2.1rem; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--text);
}
.calendar__nav:hover:not(:disabled) { background: var(--primary-tint); }
.calendar__nav:disabled { opacity: .35; cursor: default; }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar__weekday { text-align: center; font-size: .7rem; font-weight: 700; color: var(--muted); padding: .25rem 0; }
.calendar__day {
  aspect-ratio: 1; border: 0; background: transparent; border-radius: 8px;
  cursor: pointer; font: inherit; font-size: .85rem; color: var(--text);
}
.calendar__day--empty { visibility: hidden; }
.calendar__day:hover:not(:disabled) { background: var(--primary-tint); }
.calendar__day:disabled { color: #c9c4bb; cursor: default; }
.calendar__day--range { background: var(--primary-tint); color: var(--primary-dark); border-radius: 0; }
.calendar__day--selected { background: var(--primary); color: #fff; font-weight: 700; }
.calendar__day--start { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.calendar__day--end { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.date-range-summary { margin-top: .5rem; font-weight: 600; color: var(--primary-dark); font-size: .9rem; }
.date-range-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.date-range-actions .date-range-summary { margin-top: 0; }
.date-range-actions .btn { padding: .45rem .9rem; font-size: .85rem; }
.date-range-summary--confirmed::before { content: '✓ '; color: var(--green-dark); }
/* When confirmed, the days read-only (taps are ignored) — drop the hover cue. */
.calendar--locked .calendar__day { cursor: default; }
.calendar--locked .calendar__day:not(:disabled):hover { background: none; }
.calendar--locked .calendar__day--range:hover { background: var(--primary-tint); }
.calendar--locked .calendar__day--selected:hover { background: var(--primary); }
.tier-options {
  display: grid;
  gap: .6rem;
}
.tier-option {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: .75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .85rem 1rem;
  cursor: pointer;
}
.tier-option:has(input:checked) {
  border-color: var(--green);
  background: var(--primary-tint);
}
.tier-option--premium:has(input:checked) {
  border-color: #b7791f;
  background: #fff8e6;
}
.tier-option input { margin-top: .2rem; accent-color: var(--green); }
.tier-option span { display: grid; gap: .15rem; }
.tier-option small { color: var(--muted); font-weight: 400; }

/* Address preview */
.address-preview {
  background: var(--primary-tint); border: 1px solid var(--primary-tint-border);
  border-radius: 8px; padding: .75rem 1rem; font-size: .9rem;
}
.address-preview .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--green-dark); font-weight: 700; margin-bottom: .2rem; }

/* Form error */
.form-error {
  background: #fef2f2; border: 1px solid #fca5a5;
  border-radius: 8px; padding: .75rem 1rem;
  color: #991b1b; font-size: .9rem;
}

/* ── Auth page ─────────────────────────────────────────── */
.auth-tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
.tab-btn {
  flex: 1; padding: .75rem; background: none; border: none;
  cursor: pointer; font-size: .95rem; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.tab-btn.active { color: var(--green); border-bottom-color: var(--green); }
.oauth-actions {
  display: grid;
  gap: .6rem;
}
.oauth-btn {
  width: 100%;
  text-align: center;
}
.oauth-btn--google { background: #4285f4; }
.oauth-btn--apple { background: #000; }
.oauth-btn--facebook { background: #1877f2; }
.auth-divider {
  text-align: center;
  margin: -.25rem 0 .25rem;
}

/* ── Success card ──────────────────────────────────────── */
.success-icon { font-size: 3rem; text-align: center; }
.success-card { text-align: center; }
.success-card h2 { font-size: 1.5rem; margin-bottom: .5rem; }

/* ── Seller listing management / admin ─────────────────── */
.manage-listing-card,
.admin-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .75rem;
  background: #fff;
}
/* Clickable listing title that deep-links into the management form. */
.listing-address--link { color: var(--green-dark); text-decoration: none; }
.listing-address--link:hover { text-decoration: underline; }
/* The results-list address is a <button> that opens the detail modal; strip the
   default button chrome so it reads as a link, left-aligned and full width. */
button.listing-address--link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
/* Brief highlight when a card is deep-linked from the account page. */
.manage-listing-card--focus { box-shadow: 0 0 0 3px var(--highlight); transition: box-shadow .2s; }
.manage-listing-card__header,
.admin-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.status-pill {
  display: inline-block;
  border-radius: 999px;
  padding: .2rem .55rem;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.status-pill--live { background: var(--primary-tint); color: var(--green-dark); }
.status-pill--upcoming { background: var(--cta-wash, #fff4e0); color: var(--highlight, #9a6b00); }
.status-pill--ended { background: var(--bg); color: var(--muted); }
/* My-listings status filter + profile security actions. */
.listing-status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}
.listing-status-filter legend { font-weight: 600; font-size: .85rem; padding: 0; }
.listing-status-filter label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;
  font-weight: 500;
}
.profile-actions { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.admin-page {
  max-width: 1120px;
  margin: 2rem auto;
  padding: 0 1.5rem 3rem;
}
.account-page {
  max-width: 780px;
  margin: 2rem auto;
  padding: 0 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.profile-list {
  display: grid;
  gap: .75rem;
}
.profile-list div {
  display: grid;
  gap: .2rem;
}
.profile-list dt {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.profile-list dd {
  overflow-wrap: anywhere;
}
.billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1rem;
}
.admin-grid__wide { grid-column: 1 / -1; }

/* Collapsible "Add a sale" card (a <details> styled like a card). */
.admin-collapsible { padding-top: 1rem; }
.admin-collapsible__summary {
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 700;
  list-style: none;
}
.admin-collapsible__summary::-webkit-details-marker { display: none; }
.admin-collapsible__summary::before { content: '▸ '; color: var(--muted); }
.admin-collapsible[open] .admin-collapsible__summary::before { content: '▾ '; }
.admin-collapsible > *:not(summary) { margin-top: 1rem; }

/* Search + export toolbar above the accounts/listings tables. */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.admin-search {
  flex: 1 1 12rem;
  min-width: 0;
  padding: .5rem .7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}
.admin-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1rem;
}
.admin-pager__label { color: var(--muted); font-size: .85rem; }

/* Per-user payment history disclosure. */
.payments-history { margin-top: .6rem; font-size: .85rem; }
.payments-history > summary { cursor: pointer; font-weight: 600; }
.payments-history__list { margin: .5rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }

/* Reports filed against a listing, shown inline under its admin card. */
.listing-reports {
  margin-top: .6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .4rem .6rem;
  background: var(--bg);
  font-size: .82rem;
}
.listing-reports summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--muted);
}
.listing-reports--alert {
  border-color: #e0b4b0;
  background: #fdf3f2;
}
.listing-reports--alert summary { color: #b42318; }
.listing-reports__list {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}
.listing-reports__list li {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding-top: .4rem;
  border-top: 1px solid var(--border);
}
.listing-reports__list li:first-child { border-top: 0; padding-top: 0; }
.listing-reports .report-reason { font-weight: 700; color: var(--text); }
.listing-reports .report-note { color: var(--text); }
.listing-reports .report-time { font-size: .72rem; }
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}
.admin-actions .btn,
.manage-listing-card .btn {
  padding: .45rem .75rem;
  font-size: .82rem;
}
.toggle-row {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .9rem;
}
.toggle-row input[type="checkbox"] {
  margin-top: .15rem;
  flex-shrink: 0;
}
.share-nudge {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 1rem;
}
.share-nudge p {
  font-size: .9rem;
  margin-bottom: .75rem;
}
.listing-share {
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  padding-top: 1rem;
}
.listing-share:empty {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.listing-share__label {
  font-weight: 600;
  margin-bottom: .5rem;
}
.listing-share__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.listing-share__buttons .btn {
  flex: 0 0 auto;
}
.listing-items {
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  padding-top: 1rem;
}
.listing-items h3 {
  font-size: .95rem;
  margin-bottom: .6rem;
}
.listing-items__list {
  display: grid;
  gap: .5rem;
  margin-bottom: .75rem;
}
.listing-item-card {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .75rem;
}
.listing-item-card__photo {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg);
  flex-shrink: 0;
}
.listing-item-form {
  display: grid;
  gap: .55rem;
}

/* ── Printable flyer ────────────────────────────────────── */
.flyer-body {
  background: #e9e9e9;
}
.flyer-shell {
  max-width: 8.5in;
  margin: 1rem auto;
}
.flyer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.flyer-page {
  width: 8.5in;
  min-height: 11in;
  background: #fff;
  color: #111;
  padding: .55in;
  text-align: center;
  border: 1px solid #ccc;
}
.flyer-brand {
  color: var(--green-dark);
  font-size: .28in;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.flyer-page h1 {
  font-size: .88in;
  line-height: 1;
  margin: .18in 0;
  letter-spacing: .03em;
}
.flyer-page h2 {
  font-size: .28in;
  line-height: 1.2;
  margin-bottom: .16in;
}
.flyer-date {
  font-size: .18in;
  font-weight: 700;
  margin-bottom: .22in;
}
.flyer-qr-wrap {
  display: flex;
  justify-content: center;
  margin: .2in 0;
}
.flyer-qr-wrap img,
.flyer-qr {
  width: 3.75in;
  height: 3.75in;
}
.flyer-qr svg { width: 100%; height: 100%; display: block; }
.flyer-scan {
  font-size: .22in;
  font-weight: 800;
  margin: .18in 0;
}
.flyer-payments {
  border-top: 3px solid #111;
  border-bottom: 3px solid #111;
  padding: .16in 0;
  margin: .18in 0;
}
.flyer-payments h3 {
  font-size: .22in;
  margin-bottom: .08in;
}
.flyer-payments p {
  font-size: .16in;
  font-weight: 700;
  margin: .04in 0;
}
.flyer-payments a {
  color: #111;
}
.flyer-disclosure {
  font-size: .12in;
  color: #333;
}

/* ── Modal dialog (out-of-routes upgrade prompt) ───────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(20, 30, 28, .55);
}
.modal-card {
  position: relative;
  width: min(420px, 100%);
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
  text-align: center;
}
.modal-card h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.modal-card p { color: var(--muted); margin-bottom: 1.25rem; }
.modal-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.modal-close {
  position: absolute;
  top: .4rem;
  right: .6rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.modal-actions { display: flex; flex-direction: column; gap: .6rem; }
.modal-card--form {
  width: min(540px, 100%);
  text-align: left;
  max-height: 90dvh;
  overflow-y: auto;
}
/* Full listing detail modal — opens over the map. */
.modal-card--listing {
  width: min(620px, 100%);
  text-align: left;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 1.5rem;
}
.lm-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-muted, #eee);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}
.lm-gallery:empty { display: none; }
.lm-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.lm-counter {
  position: absolute;
  bottom: .5rem;
  right: .6rem;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: .75rem;
  padding: .1rem .45rem;
  border-radius: 999px;
}
.lm-title { font-size: 1.3rem; margin-bottom: .25rem; }
.lm-addr { font-weight: 600; margin-bottom: .25rem; }
.lm-desc { color: var(--text, inherit); margin: .75rem 0; white-space: pre-wrap; }
.lm-toggle { margin: .75rem 0; }
.lm-items { margin-top: 1rem; }
.lm-items h3 { font-size: 1rem; margin-bottom: .5rem; }
.iw-details-btn { margin-top: .5rem; width: 100%; }
.edit-form { display: flex; flex-direction: column; gap: .7rem; }
.edit-form label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .85rem; }
.edit-form input,
.edit-form select,
.edit-form textarea {
  font: inherit;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
/* Read-only "Created …" line at the top of the admin edit form. */
.edit-created { font-size: .8rem; }
/* Group + visually separate the real schedule (start/stop) from the
   display-only notes (hours/description) so an admin can't confuse them. */
.edit-section {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 8px;
  padding: .7rem .8rem;
}
.edit-section > legend {
  padding: 0 .35rem;
  margin-bottom: 0;
}
.edit-section .field-hint { margin: 0; }
.edit-section--schedule { border-left-color: var(--primary); background: var(--primary-tint); }
.edit-section--notes { border-left-color: var(--highlight); background: var(--cta-wash); }
.modal-card--flash { animation: modal-flash .9s ease-in-out 2; }
@keyframes modal-flash {
  0%, 100% { box-shadow: 0 12px 40px rgba(0,0,0,.28); }
  50% { box-shadow: 0 0 0 4px var(--highlight), 0 12px 40px rgba(0,0,0,.28); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-card--flash { animation: none; }
}

@media print {
  @page {
    size: letter;
    margin: 0;
  }
  body {
    background: #fff;
  }
  .account-nav,
  .flyer-actions {
    display: none !important;
  }
  .flyer-shell {
    margin: 0;
    max-width: none;
  }
  .flyer-page {
    border: 0;
    width: 8.5in;
    height: 11in;
    min-height: 11in;
    page-break-after: avoid;
  }
}

/* ── Footer ────────────────────────────────────────────── */
footer {
  text-align: center; padding: 2rem 1rem;
  color: var(--muted); font-size: .85rem;
  border-top: 1px solid var(--border);
}
footer a { color: var(--green); text-decoration: none; }

@media (max-width: 560px) {
  /* The masthead is an in-flow sticky bar now, so the hero no longer needs
     extra top padding to clear floating bubbles. */
  .hero {
    padding: 2.25rem 1rem 2rem;
  }

  .search {
    flex-direction: column;
    max-width: 100%;
  }

  .search input,
  .search button,
  .btn {
    width: 100%;
    min-height: 44px;
  }

  .cta-section {
    padding: 2.2rem 1rem;
  }

  .form-page {
    margin: 1.25rem auto;
    padding: 0 1rem 2rem;
  }

  .card {
    padding: 1.25rem;
  }

  .auth-tabs {
    margin-bottom: 1rem;
  }

  .time-row,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .billing-actions .btn {
    width: 100%;
  }

  .manage-listing-card__header,
  .admin-row {
    flex-direction: column;
  }

  .admin-actions {
    justify-content: flex-start;
  }
}

/* Claim / upgrade panel on the listing detail page */
.manage-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  background: var(--surface-muted, #f8fafc);
}
.manage-panel h3 {
  margin-top: 0;
}
.manage-panel__file {
  display: block;
  margin: 0.5rem 0 0.75rem;
}
.manage-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Legal pages (privacy, terms, data deletion) — readable long-form text */
.legal {
  max-width: 720px;
  margin-inline: auto;
  line-height: 1.6;
}
.legal h2 {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.legal ul {
  padding-left: 1.25rem;
}
.legal li {
  margin-bottom: 0.4rem;
}