/*
 * VNP voter map + search module — EMBED styles.
 *
 * This is the tool-only slice: everything the module renders into its host page
 * (the results layout, jurisdiction card, tab nav, location cards, map, search
 * slots). It is what Webflow loads for the embed — alongside tokens.css (whose
 * --c-/--fs-/--s-/--r-/--ff-/--bw-/--ls-/--shadow-/--state- variables every rule
 * below consumes). It does NOT need components.css (the tool uses only custom
 * classes, never .btn/.chip/.badge).
 *
 *   Webflow embed loads:  tokens.css → app-embed.css
 *   Standalone loads:     tokens.css → components.css → app.css → app-embed.css
 *
 * Deliberately NO global element resets (body, headings, p, a) live here — those
 * stay in app.css so the embed never restyles the host page's own chrome. The tool's
 * rendered content carries explicit margins/fonts on its own classes; the only reset
 * here is box-sizing, scoped to the tool's injected root (#results-cols) + search box.
 *
 * Mount points (resolved by app.js — Webflow id first, standalone fallback):
 *   results shell → #results-content || #results-view   (module injects #results-cols inside)
 *   search mount  → #search-field    || #search-slot
 */

/* Scoped box-sizing: guarantees the tool's padded flex/grid layout is correct regardless of the
   host page's reset. Scoped to the injected shell so it never touches host elements. */
#results-cols, #results-cols *, #results-cols *::before, #results-cols *::after { box-sizing: border-box; }

/* Base type for the tool's rendered content. app-embed.css carries no global element styles (so it
   never restyles the host page's chrome), which means the tool's INHERITED text — empty states, card
   addresses, detail/hours lines, tab helper text — takes its font from the tool's own root here, not
   the host <body>. Elements with an explicit family (serif headings, etc.) override this. */
#results-cols {
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text-primary);
}

/* ---- Results layout (responsive) ---- */
/* Mobile / narrow: the column wrappers dissolve (display:contents) so their children become flex
   items of #results-cols and reorder into the mobile stack — juris-block → toggle → map → cards. */
#results-cols { display: flex; flex-direction: column; }
#col-list, #col-map { display: contents; }
/* Screen-reader-only on mobile: no visible heading (the jurisdiction card is the visual header), but it
   stays in the a11y tree as the results heading + focus target on the view switch (a11y A2). The desktop
   block below restores it visible. */
#results-heading {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#juris-block  { order: 1; }
#type-toggle  { order: 2; }
#map          { order: 3; }
#results-list { order: 4; }

/* ---- Results: header (carries the shared search field, spec §3) ---- */
/* Keep the box + its suggestion list left-aligned even inside a centered card
   (text-align inherits through the search box's shadow DOM). Covers the home mount
   (#search-field embed / #search-slot standalone) and the results mount. */
#search-field, #search-slot, #results-search-slot { text-align: left; }
#search-field mapbox-search-box, #results-search-slot mapbox-search-box { width: 100%; display: block; }
#juris-info { display: flex; flex-direction: column; gap: var(--s-4); }
#results-list { padding: 0 var(--s-4); }

/* ---- Results: map ---- */
#map {
  height: 320px;   /* 8pt scale (40×8); full-bleed band */
  background: var(--c-surface-subtle);
  margin: 0 0 var(--s-4);   /* full-bleed band — edge to edge; chrome above + cards below stay inset */
  position: relative;
  overflow: hidden;
}
.map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-5);
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}
/* Prototype static map (no-token mode) */
.map-static { position: absolute; inset: 0; overflow: hidden; }
.map-static__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-pin { position: absolute; width: 24px; height: 29px; transform: translate(-50%, -100%); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.map-pin svg { width: 100%; height: 100%; display: block; }
.map-pin--ev { color: var(--c-brand-blue-light); }
.map-pin--dropbox { color: var(--c-brand-red); }
.map-static__note {
  position: absolute; bottom: var(--s-2); right: var(--s-2);
  padding: 2px var(--s-2);
  background: rgba(255, 255, 255, 0.85); color: var(--c-text-muted);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-chip); text-transform: uppercase;
  border-radius: var(--r-xs);
}

/* ---- Eyebrow / section label (gold) — used by the jurisdiction card ---- */
.eyebrow {
  font-family: var(--ff-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-gold-text);
  margin: 0 0 var(--s-2);
}

/* ---- Jurisdiction card (Figma 962:19524) ---- */
.jurisdiction-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--c-surface-subtle);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}
.juris-heading { display: flex; flex-direction: column; gap: var(--s-1); }
.juris-heading .eyebrow { margin: 0; }
.jurisdiction-card .juris-name {
  margin: 0;
  font-family: var(--ff-serif); font-weight: var(--fw-bold);
  font-size: var(--fs-title-sm); line-height: 1.65; color: var(--c-text-primary);
}
.clerk-details { display: flex; flex-direction: column; gap: var(--s-4); }
.clerk-details[hidden] { display: none; }
.clerk-details .detail-text { color: var(--c-text-primary); }
.juris-empty { margin: 0; font-size: var(--fs-body-md); line-height: 1.5; color: var(--c-text-muted); }   /* name-only jurisdiction (not yet Verified in the clerk feed) */

/* ---- Tab nav — mobile queue toggle (Figma 1385:40826); filters both list + map ---- */
.tab-nav { display: flex; justify-content: center; gap: var(--s-5); border-bottom: var(--bw-default) solid var(--c-border-subtle); margin-bottom: var(--s-4); }
.tab {
  appearance: none; background: none; border: 0;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-bottom: var(--bw-thick) solid transparent;
  margin-bottom: -1px;                 /* overlap the 1px baseline so the 2px underline replaces it */
  font-family: var(--ff-sans); cursor: pointer;
}
.tab-icon { flex-shrink: 0; }
.tab--ev .tab-icon { color: var(--c-brand-blue); }
.tab--dropbox .tab-icon { color: var(--c-brand-red); }
.tab-label {
  font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; font-weight: var(--fw-bold); line-height: 1.4;
  color: var(--c-text-muted);          /* inactive */
}
.tab[aria-pressed="true"] { border-bottom-color: var(--c-brand-red); }
.tab[aria-pressed="true"] .tab-label { color: var(--c-text-primary); }
.tab-desc { font-size: var(--fs-body); color: var(--c-text-secondary); margin-bottom: var(--s-4); padding: 0 var(--s-4); }

/* ---- Location cards (Figma 949:35804) ---- */
.card-list { display: flex; flex-direction: column; gap: var(--s-3); }
.location-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--c-surface-page);
  border: var(--bw-default) solid var(--c-border-subtle);
  border-radius: var(--r-sm);            /* tighter mobile radius (was --r-lg) */
  padding: var(--s-4);
  box-shadow: var(--shadow-results-card);
}
.location-card.is-selected { background: var(--c-brand-blue-tint-soft); border-color: var(--c-brand-blue-light); border-width: var(--bw-medium); }

/* Header row: type label ↔ Get directions */
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.type-label { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: var(--fw-bold); line-height: 1.4; }
.location-card.ev .type-label { color: var(--c-brand-blue-light); }
.location-card.dropbox .type-label { color: var(--c-brand-red-dark); }
/* Get directions — card-size outline button, colored by location type */
.directions {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border: var(--bw-default) solid currentColor;
  border-radius: var(--r-button);
  font-family: var(--ff-sans); font-weight: var(--fw-semibold); font-size: var(--fs-label);
  line-height: 1.65; white-space: nowrap; text-decoration: none;
}
.location-card.ev .directions { color: var(--c-brand-blue); }
.location-card.dropbox .directions { color: var(--c-brand-red-dark); }
.directions__icon { flex-shrink: 0; }

.location-card .name { margin: 0; font-family: var(--ff-serif); font-weight: var(--fw-bold); font-size: var(--fs-title-sm); line-height: 1.65; color: var(--c-text-primary); }
.location-card .addr { font-size: var(--fs-body-md); line-height: 1.5; color: var(--c-text-secondary); }
.location-card .addr p { margin: 0; }

/* Attribute tags — dark chips w/ icon (module-specific, distinct from status .chip) */
.attr-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.attr-chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-chip); line-height: 1.4; text-transform: uppercase;
  background: var(--c-surface-subtle); border: var(--bw-default) solid var(--c-border-subtle);
  color: var(--c-text-secondary);
}
.attr-chip--dark { background: var(--c-text-primary); border-color: transparent; color: var(--c-text-on-dark); }
.attr-chip__icon { flex-shrink: 0; }

/* ---- Shared: hairline divider, expand toggle, detail groups (both cards) ---- */
.card-divider { align-self: stretch; height: 0; border-top: var(--bw-default) solid var(--c-border-subtle); }
.toggle-detail {
  appearance: none; background: none; border: 0; padding: 0;
  display: inline-flex; align-items: center; gap: var(--s-1); align-self: flex-start;
  font-family: var(--ff-sans); font-weight: var(--fw-bold); font-size: var(--fs-small);
  color: var(--c-brand-blue); cursor: pointer;
}
.toggle-chevron { flex-shrink: 0; transition: transform 0.15s ease; }
.toggle-detail[aria-expanded="true"] .toggle-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .toggle-chevron { transition: none; } }

.card-detail { display: flex; flex-direction: column; gap: var(--s-4); }
.card-detail[hidden] { display: none; }
.detail-group { display: flex; flex-direction: column; gap: var(--s-1); }
.detail-label { margin: 0; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--c-accent-gold-text); }
.detail-text { font-size: var(--fs-body-md); line-height: 1.5; color: var(--c-text-secondary); }
.detail-text p { margin: 0; }
.hours-line { margin: 0; font-size: var(--fs-body-md); line-height: 1.5; color: var(--c-text-secondary); }
.hours-date { font-weight: var(--fw-semibold); }
.contact-line { margin: 0; font-size: var(--fs-body-md); line-height: 1.5; color: var(--c-text-primary); }
.contact-label { font-weight: var(--fw-semibold); }
.no-hours { margin: 0; font-size: var(--fs-body-md); line-height: 1.5; color: var(--c-text-muted); }

/* ---- Empty / status states ---- */
.empty-state { text-align: center; color: var(--c-text-muted); padding: var(--s-6) var(--s-4); }
.status-banner { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); margin-bottom: var(--s-4); font-size: var(--fs-small); }
.status-banner.error { background: var(--c-brand-red-tint); color: var(--c-brand-red-dark); }
.status-banner.notice { background: var(--c-brand-blue-tint); color: var(--c-text-primary); border-radius: var(--r-sm); }

/* ---- Hover states — shared overlay convention (inset --state-hover), consistent with the dashboards ---- */
.directions { transition: box-shadow 0.15s ease; }
.directions:hover { box-shadow: inset 0 0 0 999px var(--state-hover); }
.tab .tab-label { transition: color 0.15s ease; }
.tab:hover:not([aria-pressed="true"]) .tab-label { color: var(--c-text-primary); }
.toggle-detail:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .directions, .tab .tab-label { transition: none; } }

/* ---- Desktop: two columns — the list (left) scrolls independently of the map (right).
   ▸ BREAKPOINT KNOB: raise this value if the map feels cramped (per the design intent).
     The card→map "scroll into view" is breakpoint-agnostic (checks the map's visibility), so
     only this one number needs tuning. ---- */
@media (min-width: 1024px) {
  #results-cols {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    gap: var(--s-6);
    padding: var(--s-6);
    max-width: 1440px;                          /* matches the Figma frame; centered on wider screens */
    margin-inline: auto;
    height: calc(100vh - var(--nav-h, 64px));   /* fill the viewport below the nav (--nav-h set in JS) */
    align-items: stretch;
  }
  #col-list, #col-map { display: flex; flex-direction: column; min-height: 0; }
  #juris-block, #type-toggle, #map, #results-list { order: 0; }   /* reset mobile order */

  /* LIST side (left) */
  #results-heading {
    position: static; width: auto; height: auto; margin: 0 0 var(--s-4);
    overflow: visible; clip: auto; white-space: normal;   /* undo the mobile sr-only clamp */
    font-family: var(--ff-serif); font-weight: var(--fw-bold);
    font-size: var(--fs-h2); line-height: 1.25; color: var(--c-text-primary);
  }
  #type-toggle { flex: 0 0 auto; }
  /* Left-aligned + tighter so the two tabs fit on ONE line from the breakpoint up — at ~1024 the
     column is narrowest and the default spacing pushed them to the wrapping boundary (icon/text gap). */
  #type-toggle .tab-nav { justify-content: flex-start; gap: var(--s-3); }
  #type-toggle .tab { padding-left: var(--s-2); padding-right: var(--s-2); }
  #type-toggle .tab-desc { padding: 0; }
  #results-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--s-2) 0 0; }

  /* MAP side (right): keep the mobile jurisdiction-card treatment (subtle gray bg + padding) and bump
     it flush against the map so the two read as one connected panel (rounded top on the card, rounded
     bottom on the map). */
  #juris-block { flex: 0 0 auto; margin-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  #map { flex: 1 1 auto; height: auto; min-height: 0; margin: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
}