/* Shared site chrome + components for the public pages (/, /market,
   /vendor, /vendors): base type, skip link, header/nav, footer, buttons,
   chips, status pills, fact lists, vendor tiles, breadcrumbs, the "reviewed"
   line. Every color/radius/font comes from tokens.css; page-specific layout
   lives in each page's own CSS file. Mobile breakpoint: 640px (matches
   isMobile() in index.js). */

*, *::before, *::after { box-sizing: border-box; }
/* Components below set `display`, which would otherwise beat the hidden
   attribute the page scripts use to show/hide them. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); }
p { margin: 0; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
button, input, select, textarea { font: inherit; }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.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;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--ink); color: var(--surface); padding: 12px 16px; border-radius: 8px;
}
.skip-link:focus { top: 12px; color: var(--surface); }

.container { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

.mobile-only { display: none !important; }

.eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eyebrow);
}
.section-label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--label);
}
.muted { color: var(--text-muted); }

/* Skip-link / in-page targets get focus programmatically. */
[tabindex="-1"]:focus { outline: none; }

/* --- Buttons ------------------------------------------------------------ */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--target-min); padding: 0 16px;
  font-weight: 600; text-decoration: none; cursor: pointer;
  border-radius: var(--radius-control); border: 0;
}
.button--brand { background: var(--brand); color: var(--on-brand); }
.button--brand:hover { background: var(--brand-hover); color: var(--on-brand); }
.button--outline { background: var(--surface); color: var(--ink); border: 1.5px solid var(--border-input); }
.button--outline:hover { background: var(--surface-muted); color: var(--ink); }
.button--outline-brand {
  background: var(--surface); color: var(--brand); border: 1.5px solid var(--brand);
  border-radius: var(--radius-pill); padding: 0 18px;
}
.button--outline-brand:hover { color: var(--brand-hover); background: var(--surface-tint); }

.link-button {
  min-height: var(--target-min); padding: 0 8px;
  font-weight: 600; color: var(--link); background: transparent; border: 0;
  text-decoration: underline; cursor: pointer;
}
.link-button:hover { color: var(--link-hover); }

.chip {
  min-height: var(--target-min); padding: 0 16px; font-weight: 600; font-size: 15px;
  border-radius: var(--radius-pill); cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--border-input);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Header -------------------------------------------------------------- */

.site-header { border-bottom: 1px solid var(--border); background: var(--surface); }
.site-header__inner {
  padding-top: 14px; padding-bottom: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: var(--target-min); }
.logo:hover { color: var(--ink); }
.logo__mark { width: 36px; height: 36px; color: var(--brand); }
.logo__word { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }

.menu-button {
  display: none; width: var(--target-min); height: var(--target-min);
  align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--radius-control); color: var(--ink); cursor: pointer;
}

.site-menu { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.main-nav { flex: 1 1 auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.main-nav a {
  display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 12px;
  font-weight: 500; color: var(--text-soft); text-decoration: none; border-bottom: 3px solid transparent;
}
.main-nav a:hover { color: var(--ink); }
/* aria-current="page" on the page itself; "true" on the section a detail
   page belongs to (Find a market for /market, Vendors for /vendor). */
.main-nav a[aria-current] { font-weight: 600; color: var(--ink); border-bottom-color: var(--brand); }

.nav-auth { display: inline-flex; align-items: center; gap: 4px 16px; }
.nav-auth a {
  display: inline-flex; align-items: center; min-height: var(--target-min);
  margin: 0 !important; /* nav-auth.js sets an inline margin for older pages */
  min-width: var(--target-min); justify-content: center;
  font-weight: 600;
}

/* --- Breadcrumb ---------------------------------------------------------- */

.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 15px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.breadcrumb [aria-current] { color: var(--text-muted); }
.breadcrumb__sep { color: var(--text-muted); }

/* --- Status pills ---------------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: var(--radius-pill); font-size: 14px; font-weight: 600;
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pill--open { background: var(--status-open-bg); color: var(--status-open-fg); }
.pill--upcoming { background: var(--status-upcoming-bg); color: var(--status-upcoming-fg); }
.pill--closed { background: var(--status-closed-bg); color: var(--status-closed-fg); }
.pill--plain { background: var(--surface-chip); color: #2E3D35; }
.pill--plain::before { display: none; }
.pill--lg { padding: 6px 12px; font-size: 15px; font-weight: 700; }

/* --- Facts (<dl>) ------------------------------------------------------------ */

.facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.facts dt {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--label);
}
.facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.facts--stack { display: flex; flex-direction: column; gap: 12px; }

/* --- Vendor tiles ------------------------------------------------------------ */

.vendor {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-control); min-width: 0;
}
a.vendor { text-decoration: none; color: inherit; min-height: var(--target-min); }
a.vendor:hover { border-color: var(--border-input); }
.vendor__avatar {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--avatar-fg); background: var(--avatar-bg);
}
/* A vendor's own photo or logo: shown whole (logos are often wide), on a
   plain ground. */
.vendor__avatar--photo { object-fit: contain; background: var(--surface); border: 1px solid var(--border-soft); }
.vendor__text { display: flex; flex-direction: column; min-width: 0; }
.vendor__name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.vendor__cat { font-size: 14px; color: var(--text-muted); }

.vendor-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .button--brand { padding: 0 20px; }

/* --- "Reviewed by Traders Trove" line + link lists ----------------------------- */

.verified { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text-muted); }
.verified svg { flex: 0 0 auto; margin-top: 2px; color: var(--link); }

.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.link-list a { display: inline-flex; align-items: center; gap: 10px; min-height: var(--target-min); font-weight: 600; overflow-wrap: anywhere; }
.link-list svg { flex: 0 0 auto; }

/* --- Panels (sidebar cards etc.) ------------------------------------------------ */

.panel {
  border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface);
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
.panel h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.panel--verified { background: var(--status-open-bg); border-color: transparent; }
.panel--verified h2 svg { color: var(--status-open-fg); }

.status-message:empty { display: none; }
.status-message { font-weight: 600; color: var(--status-open-fg); }

.empty {
  padding: 24px; border: 1.5px dashed var(--border-dashed); border-radius: var(--radius-card);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.empty__title { font-weight: 700; color: var(--ink); }
.empty__body { color: var(--text-muted); }
.empty .button { margin-top: 4px; }

/* --- Leaflet ------------------------------------------------------------------------ */

.leaflet-container { font-family: var(--font-body); }
.leaflet-bar a, .leaflet-touch .leaflet-bar a { width: var(--target-min); height: var(--target-min); line-height: var(--target-min); font-size: 22px; }
.leaflet-container a:focus-visible, .leaflet-container:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-offset) - 3px); }
.leaflet-control-attribution { font-size: 12px; }
.leaflet-control-attribution a { color: var(--link); }

.map-region {
  position: relative; height: 340px; border-radius: var(--radius-panel); overflow: hidden;
  border: 1px solid var(--border); background: #E9EFE6;
}
.map { position: absolute; inset: 0; }

/* Numbered map pins: a real <button> inside a Leaflet divIcon. */
.pin-icon { background: none; border: 0; }
.pin {
  position: relative; display: block; width: 44px; height: 52px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
}
.pin svg { display: block; }
.pin path { fill: var(--brand); stroke: var(--surface); stroke-width: 2.5; }
.pin[aria-pressed="true"] path, .pin--accent path { fill: var(--accent); }
.pin__num {
  position: absolute; left: 0; right: 0; top: 10px; text-align: center;
  font-weight: 700; font-size: 14px; color: var(--on-brand); font-family: var(--font-body);
}
.pin:focus-visible { outline: var(--focus-ring); outline-offset: 0; border-radius: 8px; }
/* Several markets too close to tell apart at this zoom: one round pin with
   the count; selecting it zooms in (TT.layoutPins in common.js). */
.pin--group {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.pin--group.pin--accent { background: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.pin--group:focus-visible { border-radius: 50%; }
.pin__count { font-weight: 700; font-size: 15px; color: var(--on-brand); font-family: var(--font-body); }

/* --- Footer ----------------------------------------------------------------------------- */

.site-footer { background: var(--footer-bg); color: #DCE6DF; }
.site-footer__inner {
  padding-top: 40px; padding-bottom: 40px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px;
}
.site-footer__about { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.site-footer__about p:last-child { font-size: 15px; color: var(--footer-text); }
.site-footer__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--footer-link); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--footer-link); }
.site-footer a:hover { color: var(--footer-text); }
.footer-link {
  display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0;
  font: inherit; color: var(--footer-link); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.footer-link:hover { color: var(--footer-text); }
.nav-auth__link { white-space: nowrap; }
.site-footer :focus-visible { outline-color: #F4B860; } /* --accent is too dark on the footer */

/* Footer feedback band: the first row of the footer. */
.feedback-band { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.feedback-band__inner {
  padding-top: 36px; padding-bottom: 36px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px;
}
.feedback-band__copy { display: flex; flex-direction: column; gap: 8px; max-width: 62ch; }
.feedback-band h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--footer-link); }
.feedback-band p { color: var(--footer-text); }
.feedback-band .button { background: #F4B860; color: var(--ink); padding: 0 22px; }
.feedback-band .button:hover { background: #F7C981; color: var(--ink); }

/* --- Pop-up forms (static/js/forms.js) ------------------------------------------------------ */
html.form-open { overflow: hidden; }
.form-dialog {
  width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0;
  border: 0; border-radius: var(--radius-panel); background: var(--surface); color: var(--text);
  box-shadow: 0 24px 60px rgba(23, 37, 30, 0.25);
}
.form-dialog[open] { display: flex; }
.form-dialog::backdrop { background: var(--scrim); }
.form-dialog__panel { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.form-dialog__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--border-soft);
}
.form-dialog__head h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); }
.form-dialog__close {
  width: var(--target-min); height: var(--target-min); flex: 0 0 auto; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted); cursor: pointer; display: grid; place-items: center;
}
.form-dialog__close:hover { background: var(--surface-muted); color: var(--ink); }
.form-dialog__body { padding: 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.form-dialog__foot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 14px 24px; border-top: 1px solid var(--border-soft); background: var(--surface-muted);
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
}
.form-dialog__foot .button { padding: 0 22px; }
.form-dialog__foot .button:only-child { margin-left: auto; }
.form-intro { color: var(--text-soft); }
.form-section { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--label); padding-top: 4px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; color: var(--ink); min-width: 0; }
.form-field--wide { grid-column: 1 / -1; }
.form-optional { font-weight: 400; color: var(--text-muted); }
.form-dialog input, .form-dialog textarea, .form-dialog select {
  width: 100%; min-height: var(--target-min); padding: 9px 12px; font: inherit; font-weight: 400; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--border-input); border-radius: 8px;
}
.form-dialog textarea { resize: vertical; }
.form-dialog [aria-invalid="true"] { border-color: var(--accent); }
.form-error:empty { display: none; }
.form-error { color: var(--accent); font-weight: 600; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.change-list { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.change-list legend { font-weight: 600; font-size: 15px; color: var(--ink); padding: 0; margin-bottom: 6px; }
.change-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.change-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) var(--target-min); gap: 8px; align-items: start; }
.change-row__value { display: block; min-width: 0; }
.change-row__remove {
  width: var(--target-min); height: var(--target-min); border: 0; border-radius: 8px; background: transparent;
  color: var(--text-muted); cursor: pointer; display: grid; place-items: center;
}
.change-row__remove:hover { background: var(--surface-muted); color: var(--accent); }
.change-add { align-self: flex-start; }
.form-thanks { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 0; color: var(--text-soft); }
.form-thanks svg { color: var(--status-open-fg); }
.form-thanks__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); }

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

/* --- Mobile ------------------------------------------------------------------------------ */

@media (max-width: 640px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: revert !important; }

  .container { padding-left: 16px; padding-right: 16px; }

  .site-header__inner { padding: 8px 12px 8px 16px; min-height: 60px; gap: 8px; justify-content: space-between; }
  .logo { gap: 8px; }
  .logo__mark { width: 30px; height: 30px; }
  .logo__word { font-size: 19px; }
  .menu-button { display: flex; }
  .site-menu { display: none; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 8px; padding: 4px 0 8px; }
  .site-menu.is-open { display: flex; }
  .main-nav ul { flex-direction: column; }
  .main-nav a { display: flex; }
  .header-cta { align-self: flex-start; }

  .facts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vendor-grid { grid-template-columns: minmax(0, 1fr); }

  .site-footer__inner { padding-top: 32px; padding-bottom: 32px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .change-row { grid-template-columns: minmax(0, 1fr) var(--target-min); }
  .change-row select { grid-column: 1 / -1; }
  .form-dialog { width: 100%; max-width: none; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
  .form-dialog__foot { border-radius: 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .feedback-band__inner { padding-top: 28px; padding-bottom: 28px; }
}