/* /trailblazers: region training signup page. Loads after style.css and
   page.css and uses only the tokens and components declared in style.css. */

.intro-cta { margin: var(--s-5) 0 0; }

/* ── World map ──
   Three region states, each an invitation. State is carried by glyph shape as
   well as colour: hollow ring (volunteers needed), hatched (training underway),
   solid (active community), plus a text label wherever the glyph appears. */
.map__lead {
  margin: var(--s-7) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--text);
}
.map { margin: var(--s-4) 0 0; }
.map__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.map__land {
  fill: color-mix(in srgb, var(--primary) 16%, var(--surface));
  stroke: color-mix(in srgb, var(--primary) 16%, var(--surface));
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.map__water { fill: var(--surface); }
.map__hatch { stroke: var(--earth); stroke-width: 1.4; }

.map__pin-fill { stroke: none; }
.map__pin-hatch { fill: url(#pin-hatch); stroke: none; }
.map__pin-ring { fill: none; stroke-width: 2.5; }
.map__pin--needed .map__pin-fill { fill: var(--surface); }
.map__pin--needed .map__pin-ring { stroke: var(--earth); }
.map__pin--training .map__pin-fill { fill: var(--surface); }
.map__pin--training .map__pin-ring { stroke: var(--earth); }
.map__pin--active .map__pin-fill { fill: var(--gold); }
.map__pin--active .map__pin-ring { stroke: var(--earth-ink); }

.map figcaption { margin: var(--s-3) 0 0; }
.map__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: var(--fs-small);
  color: var(--text-soft);
}
.map__legend li { display: flex; align-items: center; gap: var(--s-2); margin: 0; }
.map__legend strong { color: var(--text); white-space: nowrap; }
@media (max-width: 479px) {
  .map__legend { flex-direction: column; gap: var(--s-1); }
}

/* State glyph, shared by the legend and the region rows. Same shapes as the
   pins, drawn as SVG data images so no radius or CSS fill trick is needed. The
   colours are the earth, earth-ink, gold and surface tokens written out. */
.glyph {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: none;
  vertical-align: -1px;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.5' fill='%23FBF9F4' stroke='%238B6F47' stroke-width='2'/%3E%3C/svg%3E");
}
.glyph--training {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cdefs%3E%3Cpattern id='h' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Cline x1='0' y1='0' x2='0' y2='3' stroke='%238B6F47' stroke-width='1.4'/%3E%3C/pattern%3E%3C/defs%3E%3Ccircle cx='7' cy='7' r='5.5' fill='%23FBF9F4'/%3E%3Ccircle cx='7' cy='7' r='5.5' fill='url(%23h)' stroke='%238B6F47' stroke-width='2'/%3E%3C/svg%3E");
}
.glyph--active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5.5' fill='%23D4A843' stroke='%237A6140' stroke-width='2'/%3E%3C/svg%3E");
}

/* ── Regions list: hairline rows, status as glyph and words, no pills ── */
.regions {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
  border-top: 1px solid var(--line);
}
.regions li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin: 0;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
.region__name {
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.1rem;
  min-width: 9em;
}
.region__status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.region__line { font-size: var(--fs-small); color: var(--text-soft); }
.region__note {
  flex-basis: 100%;
  font-size: var(--fs-small);
  color: var(--text-soft);
  font-style: italic;
}
.regions__next { margin: var(--s-4) 0 0; }

/* ── Signup: a section under a hairline, no panel ── */
.signup {
  margin: var(--s-8) 0 0;
  padding: var(--s-6) 0 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--s-4);
}
.signup h2 { margin-top: 0; }
.signup__lead { margin: var(--s-2) 0 var(--s-5); }
.btn--submit { width: 100%; }

/* Searchable region combobox, built from the hidden select by script. */
.combo { position: relative; }
.combo__list {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: var(--s-1);
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.combo__list li { margin: 0; }
.combo__group {
  padding: var(--s-2) var(--s-3) var(--s-1);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  font-variant-caps: small-caps;
  letter-spacing: 0.08em;
  color: var(--earth-ink);
}
.combo__option {
  padding: 9px var(--s-3);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text);
}
.combo__option:hover,
.combo__option[aria-selected="true"] {
  background: color-mix(in srgb, var(--gold) 22%, transparent);
}
.combo__empty { padding: 9px var(--s-3); color: var(--text-soft); font-size: var(--fs-small); }

/* Error and success blocks keep their ids and roles; they are notices. */
.form-error {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--danger);
  font-size: var(--fs-small);
  font-weight: 700;
}
.signup__done {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  color: var(--primary);
}
.signup__done p { margin: 0; color: var(--primary); }

@media (min-width: 768px) {
  .btn--submit { width: auto; min-width: 240px; }
}