/* ==========================================================================
   STATE PICKER — reusable component
   --------------------------------------------------------------------------
   A compact combobox for jumping to any of the 50 state pages. Drop
   <div data-state-picker></div> anywhere and load state-component.js.

   Collapsed footprint: one input row (~3rem). The popover overlays the
   page, so the component never pushes layout around when it opens.

   Depends on the tokens in style.css (--fleece-*, --indigo, --radius,
   --shadow-*, --ease). Fallbacks are provided so the component degrades
   gracefully if a page ever loads without the main stylesheet.
   ========================================================================== */

.state-picker{
  position:relative;               /* anchors the popover */
  max-width:20rem;
  font-family:var(--font-body, system-ui, sans-serif);
}

/* A wider variant for pages where the picker is the main event. */
.state-picker.is-wide{ max-width:26rem; }

/* --- Field --- */
.sp-field{ position:relative; }

.sp-input{
  width:100%;
  padding:.6875rem 2.5rem .6875rem 1rem;
  background:var(--fleece-card, #FBFAF7);
  border:1px solid var(--fleece-beige, #DCD5C8);
  border-radius:var(--radius, 3px);
  font:inherit;
  font-size:.9375rem;
  color:var(--fleece-bay, #2E2823);
  transition:border-color .2s var(--ease, ease);
}
.sp-input::placeholder{ color:var(--fleece-silver, #A8A29B); }
.sp-input:focus{
  outline:none;
  border-color:var(--indigo, #1F5C6B);
  box-shadow:0 0 0 3px rgba(31,92,107,.12);
}

/* Chevron — pure CSS, flips when the popover is open. */
.sp-chev{
  position:absolute;
  right:1rem;
  top:50%;
  width:.5rem;
  height:.5rem;
  border-right:1.5px solid var(--fleece-silver, #A8A29B);
  border-bottom:1.5px solid var(--fleece-silver, #A8A29B);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
  transition:transform .25s var(--ease, ease), border-color .25s var(--ease, ease);
}
.state-picker.is-open .sp-chev{
  transform:translateY(-30%) rotate(225deg);
  border-color:var(--indigo, #1F5C6B);
}

/* --- Popover list --- */
.sp-list{
  position:absolute;
  z-index:60;                      /* above the sticky header's 50 */
  inset-inline:0;
  top:calc(100% + .375rem);
  max-height:19rem;
  margin:0;
  padding:.375rem;
  overflow-y:auto;
  list-style:none;
  background:var(--fleece-card, #FBFAF7);
  border:1px solid var(--fleece-beige, #DCD5C8);
  border-radius:var(--radius, 3px);
  box-shadow:var(--shadow-md, 0 4px 16px rgba(46,40,35,.08));
}
.sp-list[hidden]{ display:none; }

/* --- Options ---
   The same fiber rule as the accordion and the homepage grid:
   3px on the left, silver at rest, indigo when active. */
.sp-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.5rem .75rem;
  border-left:3px solid transparent;
  border-radius:0 2px 2px 0;
  font-size:.9375rem;
  font-weight:500;
  color:var(--fleece-bay, #2E2823);
  cursor:pointer;
}
.sp-option em{
  font-style:normal;
  font-size:.8125rem;
  font-variant-numeric:tabular-nums;
  color:var(--fleece-silver, #A8A29B);
}

/* Active = keyboard highlight or mouse hover. Driven by JS so the two
   input methods can't fight each other. */
.sp-option.is-active{
  background:var(--fleece-white, #F2EFE9);
  border-left-color:var(--indigo, #1F5C6B);
}

/* The state the visitor is already on. */
.sp-option.is-current{ border-left-color:var(--fleece-beige, #DCD5C8); }
.sp-option.is-current::after{
  content:"you're here";
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fleece-silver, #A8A29B);
}
.sp-option.is-current em{ display:none; }

/* Empty state — direction, not mood. */
.sp-empty{
  padding:.75rem;
  font-size:.875rem;
  color:var(--fleece-brown, #6B5B4F);
}

/* The "browse all fifty states" escape hatch that accompanies the picker
   wherever it appears — keeps a plain-HTML path to the full state index. */
.browse-all{
  margin:1rem 0 0;
  font-size:.875rem;
  color:var(--fleece-brown, #6B5B4F);
}