/* ==========================================================================
   Fort Leonard Wood Tour Visualization
   Public application layout and components.

   Depends on theme.css for tokens. Order of sections:
     1  Layout primitives
     2  Chrome: top bar, navigation, footer
     3  Persistent overlays: tour runner, arrival prompt
     4  History screen
     5  Tours screens
     6  Map screen
     7  Explore and search
     8  Point of interest detail
     9  Feedback
    10  About
    11  Utility states
   ========================================================================== */

/* ==========================================================================
   1  Layout primitives
   ========================================================================== */

.main {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - var(--topbar-h) - 120px);
  padding-bottom: var(--s-9);
}
.main:focus { outline: none; }

.wrap {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 940px; }
.wrap--flush { padding-inline: 0; }

.section { padding-block: var(--s-8); }
.section + .section { padding-top: 0; }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.section__title { font-size: var(--t-xl); }

.section__lede {
  max-width: 52ch;
  margin: var(--s-2) 0 0;
  color: var(--ink-muted);
  font-size: var(--t-sm);
  line-height: 1.6;
}

.section__aside {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  text-align: right;
  line-height: 1.6;
}

.stack > * + * { margin-top: var(--s-4); }
.stack--lg > * + * { margin-top: var(--s-6); }

.row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.row--tight { gap: var(--s-2); }
.row--end { justify-content: flex-end; }

/* ==========================================================================
   2  Chrome
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--topbar-h);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  height: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink-strong);
  flex: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: var(--ink-strong);
  color: var(--surface);
  flex: none;
}
.brand__mark .icon { width: 21px; height: 21px; stroke-width: 1.7; }

.brand__text { display: flex; flex-direction: column; line-height: 1.12; }

.brand__line1 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 620;
  letter-spacing: -0.018em;
}

.brand__line2 {
  font-size: 0.685rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 520;
}

.nav__list { display: flex; align-items: center; gap: var(--s-1); }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.44rem 0.68rem;
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 560;
  letter-spacing: -0.006em;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav__link .icon { width: 17px; height: 17px; opacity: .82; }
.nav__link:hover { background: var(--ground-deep); color: var(--ink); }

.nav__link.is-active {
  color: var(--ink-strong);
  background: var(--primary-wash);
  font-weight: 640;
}
.nav__link.is-active .icon { opacity: 1; color: var(--primary); }

@media (max-width: 860px) {
  :root { --topbar-h: 56px; }
  .brand__line2 { display: none; }
  .nav__link span { display: none; }
  .nav__link { padding: 0.5rem; }
  .nav__link .icon { width: 21px; height: 21px; }
}

@media (max-width: 620px) {
  .topbar { position: fixed; inset: auto 0 0 0; height: 62px; border-top: 1px solid var(--line); border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .topbar__inner { padding-inline: var(--s-2); }
  .brand { display: none; }
  .nav { width: 100%; }
  .nav__list { justify-content: space-between; width: 100%; }
  .nav__link { flex-direction: column; gap: 2px; padding: 0.34rem 0.4rem; font-size: 0.62rem; letter-spacing: 0.02em; }
  .nav__link span { display: block; }
  .nav__link .icon { width: 20px; height: 20px; }
  body { padding-bottom: 62px; }
}

.footer {
  position: relative;
  z-index: 1;
  margin-top: var(--s-8);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.footer__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--s-5) var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--ink-faint);
}
.footer p { margin: 0; }

@media (max-width: 620px) { .footer { margin-bottom: 62px; } }

/* ==========================================================================
   3  Persistent overlays
   ========================================================================== */

.runner-host {
  position: fixed;
  left: 50%;
  bottom: var(--s-4);
  transform: translateX(-50%);
  z-index: 70;
  width: min(720px, calc(100vw - 2 * var(--s-4)));
  pointer-events: none;
}
.runner-host[hidden] { display: none; }

@media (max-width: 620px) {
  .runner-host { bottom: calc(62px + var(--s-2)); width: calc(100vw - 2 * var(--s-3)); }
}

.runner {
  pointer-events: auto;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
  padding: var(--s-4);
}

.runner__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}

.runner__tour {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
}

.runner__pos {
  margin: 2px 0 0;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  display: flex;
  align-items: baseline;
  gap: 0.32rem;
  flex-wrap: wrap;
}
.runner__pos .num { color: var(--ink); }
.runner__sep { color: var(--line-strong); }
.runner__dist { color: var(--ink-muted); font-weight: 560; display: contents; }

.runner__stop {
  margin: var(--s-3) 0 var(--s-3);
  font-size: var(--t-lg);
}

.runner__bar {
  height: 3px;
  background: var(--ground-deep);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: var(--s-4);
}

.runner__fill {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-pill);
  transition: width var(--slow) var(--ease);
}

.runner__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.runner__actions .btn { flex: 1 1 auto; justify-content: center; }
.runner__actions a.btn { text-decoration: none; }

.arrival-host {
  position: fixed;
  left: 50%;
  top: calc(var(--topbar-h) + var(--s-4));
  transform: translateX(-50%);
  z-index: 90;
  width: min(520px, calc(100vw - 2 * var(--s-4)));
}
.arrival-host[hidden] { display: none; }

@media (max-width: 620px) { .arrival-host { top: var(--s-3); } }

.arrival {
  background: var(--surface);
  border: 1px solid var(--ink-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
  padding: var(--s-5);
  animation: arrival-drop var(--slow) var(--ease) both;
}

@keyframes arrival-drop {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.arrival.is-leaving {
  animation: arrival-lift var(--fast) var(--ease) both;
}

@keyframes arrival-lift {
  to { opacity: 0; transform: translateY(-10px); }
}

.arrival__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.arrival__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 4px var(--primary-wash);
}

.arrival__title { font-size: var(--t-lg); margin-bottom: var(--s-2); }

.arrival__body {
  margin: 0 0 var(--s-4);
  color: var(--ink-muted);
  font-size: var(--t-sm);
  line-height: 1.55;
}

.arrival__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.arrival__actions .btn { flex: 1 1 auto; justify-content: center; }

.arrival__note {
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-faint);
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ==========================================================================
   4  History screen
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.75rem, 6vw, 5.5rem) var(--s-8);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--line-strong), transparent);
  max-width: 9rem;
}

.hero__title {
  font-size: var(--t-3xl);
  font-weight: 600;
  margin-bottom: var(--s-5);
  max-width: 15ch;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(96deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__standfirst {
  font-size: var(--t-lg);
  line-height: 1.46;
  color: var(--ink-muted);
  max-width: 44ch;
  margin-bottom: var(--s-6);
}

.hero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-7); }
.hero__actions a.btn { text-decoration: none; }

.hero__figures {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  flex-wrap: wrap;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.figure { display: flex; flex-direction: column; gap: 2px; }

.figure__num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.05rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.figure__num small {
  font-size: 0.52em;
  font-weight: 560;
  letter-spacing: 0;
  color: var(--ink-faint);
  margin-left: 2px;
}

.figure__label {
  font-size: var(--t-2xs);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 540;
}

.hero__map {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--lift-2);
  overflow: hidden;
}

.minimap { width: 100%; height: 100%; display: block; }

.hero__map-caption {
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-4);
  margin: 0;
  padding: var(--s-3);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-2xs);
  line-height: 1.5;
  color: var(--ink-muted);
}
.hero__map-caption b { color: var(--ink); font-weight: 620; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-7) var(--s-6); }
  .hero__map { aspect-ratio: 16 / 11; }
  .hero__title { max-width: 18ch; }
}

/* --- Timeline --- */

.timeline { position: relative; }

.chapter {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  padding-block: var(--s-7);
  border-top: 1px solid var(--line);
}
.chapter:first-child { border-top: 0; padding-top: var(--s-4); }

.chapter__rail { position: relative; }

.chapter__era {
  position: sticky;
  top: calc(var(--topbar-h) + var(--s-5));
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.chapter__era::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  background: var(--primary);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-3);
}
.chapter__index {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 540;
}

.chapter__title { font-size: var(--t-xl); margin-bottom: var(--s-3); max-width: 22ch; }

.chapter__standfirst {
  font-size: var(--t-md);
  color: var(--ink-muted);
  margin-bottom: var(--s-4);
  max-width: 56ch;
  font-weight: 500;
}

.chapter__text {
  max-width: var(--measure);
  line-height: var(--lead-long);
  color: var(--ink-muted);
  margin-bottom: var(--s-5);
}

.chapter__tools { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }

.chapter__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
}

.chapter__links-label {
  width: 100%;
  margin: 0 0 var(--s-1);
  font-size: var(--t-2xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 540;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: var(--t-xs);
  font-weight: 540;
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 1px;
  background: var(--cat, var(--ink-faint));
  flex: none;
}
.chip:hover { border-color: var(--ink-faint); color: var(--ink); background: var(--surface-sunk); }

@media (max-width: 800px) {
  .chapter { grid-template-columns: 1fr; gap: var(--s-4); padding-block: var(--s-6); }
  .chapter__era { position: static; }
}

/* ==========================================================================
   5  Tours
   ========================================================================== */

.tour-list { display: grid; gap: var(--s-4); }

.tour-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: var(--s-6);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--lift-1);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.tour-card:hover { border-color: var(--line-strong); box-shadow: var(--lift-2); }

.tour-card__name { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.tour-card__name a { color: inherit; text-decoration: none; }
.tour-card__name a:hover { color: var(--primary); }

.tour-card__summary {
  color: var(--ink-muted);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 58ch;
  margin-bottom: var(--s-4);
}

.tour-card__stats {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-faint);
}

.stat { display: flex; flex-direction: column; gap: 1px; }

.stat__num {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.1;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.stat__num small { font-size: 0.6em; font-weight: 540; color: var(--ink-faint); }

.stat__label {
  font-size: var(--t-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 540;
}

.tour-card__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
  padding-left: var(--s-6);
  border-left: 1px solid var(--line-faint);
}

.tour-card__actions { display: grid; gap: var(--s-2); }
.tour-card__actions a.btn { text-decoration: none; }

/* Status line above a tour name, holding the in progress tag. It is repainted
   from runner state, so it collapses when the tour is not the one running. */
.tour-card__flag { margin-bottom: var(--s-3); }
.tour-card__flag:empty { display: none; }

@media (max-width: 860px) {
  .tour-card { grid-template-columns: 1fr; gap: var(--s-4); }
  .tour-card__side { padding-left: 0; border-left: 0; padding-top: var(--s-4); border-top: 1px solid var(--line-faint); }
}

/* Capacity meter against a contract ceiling. */
.capacity { display: flex; flex-direction: column; gap: var(--s-2); }

.capacity__label {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-2xs);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 540;
}
.capacity__label b { color: var(--ink); font-weight: 620; font-variant-numeric: tabular-nums; }

.capacity__bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--ground-deep);
  overflow: hidden;
}

.capacity__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--primary);
}
.capacity__fill[data-level="warn"]  { background: var(--warn); }
.capacity__fill[data-level="alert"] { background: var(--alert); }

/* --- Tour detail --- */

.tour-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
}

.tour-detail__side { position: sticky; top: calc(var(--topbar-h) + var(--s-5)); display: grid; gap: var(--s-4); }

/* The figures panel in the side column. .panel carries surface, border, and
   lift only, so the inset and the spacing between the figures, the capacity
   meter, and the tour control are set here. */
.tour-panel { padding: var(--s-5); display: grid; gap: var(--s-5); }

/* Same reason as .poi-detail > *. A grid item takes its content as its minimum
   width unless told otherwise, and at phone width the single column rule below
   cannot carry the minmax(0, 1fr) that the two column rule above does. */
.tour-detail > * { min-width: 0; }

.stop-list { counter-reset: stop; display: grid; }

.stop {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
}
.stop:first-child { border-top: 0; }
.stop.is-current { background: var(--primary-wash); border-radius: var(--r-sm); padding-inline: var(--s-3); }

.stop__order {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 620;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.stop.is-current .stop__order { background: var(--primary); border-color: var(--primary); color: var(--ink-inverse); }

.stop__name { font-size: var(--t-md); margin-bottom: 3px; }
.stop__name a { color: inherit; text-decoration: none; }
.stop__name a:hover { color: var(--primary); text-decoration: underline; }

.stop__meta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  margin-bottom: var(--s-2);
}

.stop__prompt {
  font-size: var(--t-xs);
  color: var(--ink-muted);
  background: var(--surface-sunk);
  border-left: 2px solid var(--line-strong);
  padding: var(--s-2) var(--s-3);
  line-height: 1.5;
  margin: 0;
}

.stop__actions { display: flex; gap: var(--s-2); }

@media (max-width: 900px) {
  .tour-detail { grid-template-columns: 1fr; }
  .tour-detail__side { position: static; }
  .stop { grid-template-columns: 2.7rem minmax(0, 1fr); }
  .stop__actions { grid-column: 2; }
}

/* ==========================================================================
   6  Map screen
   ========================================================================== */

body[data-route="map"] .main { padding-bottom: 0; }
body[data-route="map"] .footer { display: none; }

.map-screen {
  position: relative;
  height: calc(100vh - var(--topbar-h));
  width: 100%;
  overflow: hidden;
  background: var(--ground-deep);
}

@media (max-width: 620px) {
  .map-screen { height: calc(100vh - 62px); }
}

.map-canvas { position: absolute; inset: 0; }
.map-canvas canvas:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }

/* One glassmorphic surface class, used only for panels floating over the map. */
.map-panel {
  position: absolute;
  z-index: 5;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--lift-2);
}

.map-panel--search {
  top: var(--s-4);
  left: var(--s-4);
  width: min(23rem, calc(100vw - 2 * var(--s-4)));
  padding: var(--s-3);
}

.map-panel--legend {
  /* Clears the search panel above it: 16px offset, plus its 12px padding, plus
     the 44px input, plus 12px padding, plus an 8px gap. */
  top: calc(var(--s-4) + 5.1rem);
  left: var(--s-4);
  width: min(23rem, calc(100vw - 2 * var(--s-4)));
  padding: var(--s-4);
  max-height: min(26rem, calc(100vh - var(--topbar-h) - 12rem));
  overflow-y: auto;
}

.map-panel__title {
  font-family: var(--font-display);
  font-size: var(--t-2xs);
  font-weight: 620;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s-3);
}

.map-toolbar {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 5;
  display: grid;
  gap: var(--s-2);
  justify-items: end;
}

.map-toolbar .btn {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--lift-1);
}
.map-toolbar .btn.is-on { background: var(--primary); border-color: var(--primary); color: var(--ink-inverse); }

.legend { display: grid; gap: 1px; }

.legend__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 0.34rem 0.4rem;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  text-align: left;
  font-size: var(--t-xs);
  color: var(--ink-muted);
  transition: background var(--fast) var(--ease);
}
.legend__item:hover { background: var(--ground-deep); }
.legend__item[aria-pressed="false"] { opacity: .42; }

.legend__swatch {
  width: 11px; height: 11px;
  border-radius: 2px;
  flex: none;
  background: var(--cat);
}

.legend__label { flex: 1; }

.legend__count {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-faint);
  font-size: var(--t-2xs);
}

.legend__note {
  margin: var(--s-3) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-faint);
  font-size: var(--t-2xs);
  line-height: 1.5;
  color: var(--ink-faint);
}

.map-status {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  z-index: 5;
  max-width: min(30rem, calc(100vw - 2 * var(--s-4)));
  padding: var(--s-3) var(--s-4);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-muted);
  box-shadow: var(--lift-1);
}
.map-status b { color: var(--ink); font-weight: 620; }
.map-status .dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 0.4rem;
  vertical-align: 1px;
}
.map-status.is-off .dot { background: var(--ink-faint); }

@media (max-width: 720px) {
  .map-panel--legend { display: none; }
  .map-panel--legend.is-open { display: block; top: calc(var(--s-3) + 4.9rem); left: var(--s-3); right: var(--s-3); width: auto; }
  .map-panel--search { top: var(--s-3); left: var(--s-3); right: 3.9rem; width: auto; }
  .map-toolbar { top: var(--s-3); right: var(--s-3); }
  .map-status { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); max-width: none; }
}

/* --- Markers, drawn as DOM so the map needs no sprite or glyph fetch --- */

.map-marker {
  width: 22px; height: 22px;
  border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg);
  background: var(--cat, var(--primary));
  border: 2px solid var(--surface);
  box-shadow: 0 2px 6px rgba(8, 16, 31, .3);
  cursor: pointer;
  padding: 0;
  transition: transform var(--fast) var(--ease);
}
.map-marker:hover { transform: rotate(-45deg) scale(1.18); }
.map-marker.is-selected { transform: rotate(-45deg) scale(1.28); box-shadow: 0 0 0 4px var(--primary-wash), 0 2px 8px rgba(8, 16, 31, .35); }
.map-marker:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

.map-cluster {
  display: grid;
  place-items: center;
  min-width: 32px; height: 32px;
  padding-inline: 5px;
  border-radius: var(--r-pill);
  background: var(--ink-strong);
  color: var(--ink-inverse);
  border: 2px solid var(--surface);
  box-shadow: 0 2px 8px rgba(8, 16, 31, .32);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.map-cluster:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

.map-label {
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 3px var(--ground), 0 0 6px var(--ground);
}

.map-me {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 2px var(--primary), 0 2px 8px rgba(8, 16, 31, .3);
}

/* --- Detail sheet: docks right on desktop, rises from the bottom on phone --- */

.sheet {
  position: absolute;
  z-index: 8;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--lift-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 721px) {
  .sheet {
    top: var(--s-4);
    right: var(--s-4);
    bottom: var(--s-4);
    width: 26rem;
    border-radius: var(--r-md);
    transform: translateX(calc(100% + var(--s-5)));
    transition: transform var(--slow) var(--ease);
  }
  .sheet.is-open { transform: translateX(0); }
}

@media (max-width: 720px) {
  .sheet {
    left: 0; right: 0; bottom: 0;
    max-height: 74%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
    transition: transform var(--slow) var(--ease);
  }
  .sheet.is-open { transform: translateY(0); }
}

.sheet[hidden] { display: none; }

.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--line);
}

.sheet__body { padding: var(--s-4); overflow-y: auto; flex: 1; }

.sheet__title { font-size: var(--t-lg); margin-bottom: var(--s-2); }

/* MapLibre's own stylesheet is linked after this one and sets
   .maplibregl-map { position: relative }, which lands on the same element and
   would collapse the map container to zero height. One extra level of
   specificity puts it back where section 6 intends it. */
.map-screen .map-canvas { position: absolute; inset: 0; }

/* --- Marker group ------------------------------------------------------
   Every point of interest is a real button, so the markers are wrapped in one
   named group to keep the tab sequence comprehensible. The group covers the
   canvas, so it passes pointer events through and the markers take them back. */

.map-markers { position: absolute; inset: 0; pointer-events: none; }
.map-markers > * { pointer-events: auto; }
.map-markers > .map-label { pointer-events: none; }

/* With a tour running its stops hold and everything else steps back. */
.map-marker.is-stop { box-shadow: 0 0 0 3px var(--surface), 0 2px 8px rgba(8, 16, 31, .34); }
.map-marker.is-dim { opacity: .32; }

/* --- Skip the map ------------------------------------------------------
   Visible, not focus revealed, because it is the documented equivalent path to
   the same content rather than a courtesy for keyboard users alone. */

.map-skip {
  position: absolute;
  z-index: 6;
  top: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.42rem 0.86rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--lift-1);
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.map-skip:hover { color: var(--ink); border-color: var(--ink-faint); }
.map-skip .icon { width: 16px; height: 16px; }

/* --- Search results dropdown ------------------------------------------- */

.map-results { display: grid; gap: 1px; margin-top: var(--s-2); max-height: 17rem; overflow-y: auto; }
.map-results[hidden] { display: none; }

.map-result {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-xs);
  cursor: pointer;
}
.map-result:hover,
.map-result[aria-selected="true"] { background: var(--primary-wash); }

.map-result__swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; background: var(--cat, var(--ink-faint)); }
.map-result__body { min-width: 0; }
.map-result__name { display: block; font-size: var(--t-xs); font-weight: 580; color: var(--ink-strong); line-height: 1.35; }
.map-result__meta { display: block; font-size: var(--t-2xs); color: var(--ink-faint); line-height: 1.4; }

/* --- Legend total and overlay opacity ---------------------------------- */

.legend__total {
  margin: var(--s-3) 0 0;
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.map-opacity { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-faint); }
.map-opacity[hidden] { display: none; }
.map-opacity .label { margin-bottom: var(--s-2); }
.map-opacity__row { display: flex; align-items: center; gap: var(--s-3); }
.map-opacity__row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--primary); }
.map-opacity__value {
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.map-status__detail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: 3px;
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 721px) {
  /* The legend is always on screen at this width, so the toggle is redundant. */
  .map-toolbar__layers { display: none; }
  /* The sheet docks over the toolbar, so the toolbar steps aside while it is open. */
  .map-screen:has(.sheet.is-open) .map-toolbar { right: calc(26rem + var(--s-4) * 2); }
}

@media (max-width: 720px) {
  .map-skip {
    top: auto;
    bottom: var(--s-3);
    left: var(--s-3);
    right: var(--s-3);
    transform: none;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .map-status { bottom: calc(var(--s-3) + 3.1rem); }
}

/* ==========================================================================
   7  Explore and search
   ========================================================================== */

.explore__controls {
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
  padding-block: var(--s-4);
  background: linear-gradient(var(--ground) 72%, transparent);
  margin-bottom: var(--s-4);
}

@media (max-width: 620px) { .explore__controls { top: 0; } }

.searchbar { position: relative; display: flex; align-items: center; }

.searchbar .icon {
  position: absolute;
  left: 0.85rem;
  color: var(--ink-faint);
  pointer-events: none;
}

.searchbar__input {
  width: 100%;
  padding: 0.78rem 2.8rem 0.78rem 2.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--t-md);
  box-shadow: var(--lift-1);
}
.searchbar__input:focus-visible { border-color: var(--primary); outline: 3px solid var(--primary); outline-offset: -1px; }

.searchbar__clear {
  position: absolute;
  right: 0.4rem;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--ink-faint);
}
.searchbar__clear:hover { background: var(--ground-deep); color: var(--ink); }

.filters {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-3);
  align-items: center;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.66rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: var(--t-xs);
  font-weight: 540;
  white-space: nowrap;
  transition: all var(--fast) var(--ease);
}
.filter-chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 1px;
  background: var(--cat, transparent);
  flex: none;
}
.filter-chip:not([data-cat])::before { display: none; }
.filter-chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.filter-chip[aria-pressed="true"] {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--ink-inverse);
}
.filter-chip[aria-pressed="true"]::before { box-shadow: 0 0 0 1px rgba(255,255,255,.55); }

.filters__sep { width: 1px; height: 20px; background: var(--line); margin-inline: var(--s-1); }

.results-count {
  font-size: var(--t-xs);
  color: var(--ink-faint);
  margin: 0 0 var(--s-4);
}
.results-count b { color: var(--ink); font-weight: 620; font-variant-numeric: tabular-nums; }

.result-group + .result-group { margin-top: var(--s-6); }

.result-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

.result-group__title {
  font-family: var(--font-display);
  font-size: var(--t-2xs);
  font-weight: 620;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.result-group__hint { font-size: var(--t-2xs); color: var(--ink-faint); margin: 0; }

.result-list { display: grid; gap: 1px; background: var(--line-faint); border-radius: var(--r-sm); overflow: hidden; }

.result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: background var(--fast) var(--ease);
}
.result:hover { background: var(--primary-wash); }

.result__mark {
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--cat, var(--ink-faint)) 12%, transparent);
  color: var(--cat, var(--ink-faint));
  flex: none;
}
.result__mark .icon { width: 17px; height: 17px; }

.result__name { font-size: var(--t-sm); font-weight: 580; color: var(--ink-strong); line-height: 1.35; }
.result__meta { font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.4; margin-top: 1px; }
.result__go { color: var(--ink-faint); }

mark {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
  font-weight: 620;
}

.poi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: var(--s-4);
}

.poi-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.poi-card:hover { border-color: var(--line-strong); box-shadow: var(--lift-2); transform: translateY(-1px); }

.poi-card__art { aspect-ratio: 16 / 9; background: var(--ground-deep); }
.poi-card__art img { width: 100%; height: 100%; object-fit: cover; }

.poi-card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }

.poi-card__name {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  line-height: 1.25;
  color: var(--ink-strong);
}

.poi-card__summary {
  font-size: var(--t-xs);
  color: var(--ink-muted);
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.poi-card__meta { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

.empty {
  padding: var(--s-8) var(--s-5);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
}
.empty h2 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.empty p { color: var(--ink-muted); font-size: var(--t-sm); max-width: 44ch; margin-inline: auto; }

/* Example queries offered when nothing matched. They are drawn from the live
   data, so the row is as wide as the data makes it and wraps rather than
   scrolls. */
.empty__queries {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* Stated when a group holds more matches than the screen shows, so a capped
   list never reads as the whole answer. */
.result-group__more {
  margin-top: var(--s-3);
  font-size: var(--t-2xs);
  color: var(--ink-faint);
}

/* When the empty state is the whole screen, its heading is the screen's h1.
   It reads at the same size as the h2 form above so a not found screen does
   not shout. */
.empty h1 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.empty .btn { margin-top: var(--s-4); }

/* ==========================================================================
   8  Point of interest detail
   ========================================================================== */

.poi-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19.5rem;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
  padding-top: var(--s-6);
}

.poi-hero__art {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: var(--s-5);
  background: var(--ground-deep);
}
.poi-hero__art img { width: 100%; display: block; }

.poi-detail__side { position: sticky; top: calc(var(--topbar-h) + var(--s-5)); display: grid; gap: var(--s-4); }

.poi-actions { display: grid; gap: var(--s-2); }
.poi-actions a.btn { text-decoration: none; justify-content: center; }
.poi-actions .btn { justify-content: center; }

.facts { display: grid; gap: 0; }

.fact {
  display: grid;
  grid-template-columns: 8.2rem minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-faint);
  font-size: var(--t-xs);
  align-items: baseline;
}
.fact:first-child { border-top: 0; }

/* A fact row can be held back until it has a value, as the live distance row
   is until the visitor turns arrival alerts on. .fact sets display, so the
   hidden attribute needs its own declaration to win. */
.fact[hidden] { display: none; }

.fact__label {
  color: var(--ink-faint);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 540;
  font-size: var(--t-2xs);
}
.fact__value { color: var(--ink); line-height: 1.5; }
.fact__value .num { font-size: var(--t-sm); }

.video-link {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.video-link:hover { border-color: var(--primary); background: var(--primary-wash); }
.video-link__body { flex: 1; }
.video-link__title { font-family: var(--font-display); font-weight: 620; font-size: var(--t-sm); color: var(--ink-strong); }
.video-link__note { font-size: var(--t-2xs); color: var(--ink-faint); line-height: 1.5; margin-top: 3px; }

.related { display: grid; gap: var(--s-2); }

.related__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  font-size: var(--t-xs);
  transition: border-color var(--fast) var(--ease);
}
.related__item:hover { border-color: var(--ink-faint); }
.related__item b { display: block; font-family: var(--font-display); font-size: var(--t-sm); color: var(--ink-strong); font-weight: 600; }

.roll-table { font-size: var(--t-xs); }
.roll-table th {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: var(--t-2xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 620;
  white-space: nowrap;
}
.roll-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line-faint); color: var(--ink-muted); }
.roll-table td:first-child { color: var(--ink); font-weight: 560; }
.roll-table tr:hover td { background: var(--surface-sunk); }

/* The roll carries five columns that do not reflow to a phone width. It scrolls
   inside this box so the page body never scrolls sideways. The box takes
   tabindex in poi.js, which is what makes the off screen columns reachable
   without a mouse. */
.roll-scroll { overflow-x: auto; }

/* A grid item's automatic minimum size is its content, so the widest thing in
   a column can push the column past the track and take the whole page sideways
   with it. The two column rule above sets minmax(0, 1fr), but the single
   column rule at phone width cannot, so the zero is set on the items instead.
   With this in place .roll-scroll is what scrolls, not the document. */
.poi-detail > * { min-width: 0; }

@media (max-width: 900px) {
  .poi-detail { grid-template-columns: 1fr; }
  .poi-detail__side { position: static; }
}

/* ==========================================================================
   9  Feedback
   ========================================================================== */

.form-card {
  max-width: 40rem;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--lift-1);
}

.charcount {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-2xs);
  color: var(--ink-faint);
  margin-top: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.charcount.is-over { color: var(--alert); font-weight: 620; }

.form-note {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-faint);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  line-height: 1.6;
}
.form-note b { color: var(--ink-muted); font-weight: 620; }

.notice {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  line-height: 1.55;
  margin-bottom: var(--s-4);
}
.notice--ok    { background: var(--ok-wash);    color: var(--ok);    border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent); }
.notice--warn  { background: var(--warn-wash);  color: var(--warn);  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent); }
.notice--alert { background: var(--alert-wash); color: var(--alert); border: 1px solid color-mix(in srgb, var(--alert) 28%, transparent); }
.notice--info  { background: var(--primary-wash); color: var(--primary-deep); border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent); }
.notice .icon { flex: none; margin-top: 2px; }
.notice b { font-weight: 640; }
.notice p { margin-bottom: 0; }
.notice p + p { margin-top: var(--s-2); }
.notice .row { margin-top: var(--s-3); }
.notice a.btn { text-decoration: none; }
.notice--ok a.btn, .notice--warn a.btn, .notice--alert a.btn { color: var(--ink); }

/* ==========================================================================
   10  About
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
  padding-top: var(--s-6);
}

.about__toc { position: sticky; top: calc(var(--topbar-h) + var(--s-5)); display: grid; gap: 1px; }

.about__toc a {
  padding: 0.42rem 0.6rem;
  border-radius: var(--r-xs);
  font-size: var(--t-xs);
  color: var(--ink-muted);
  text-decoration: none;
  border-left: 2px solid var(--line);
  transition: all var(--fast) var(--ease);
}
.about__toc a:hover { background: var(--ground-deep); color: var(--ink); border-left-color: var(--primary); }

.about__section { padding-bottom: var(--s-7); scroll-margin-top: calc(var(--topbar-h) + var(--s-5)); }
.about__section h2 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.about__section p { color: var(--ink-muted); line-height: var(--lead-long); max-width: var(--measure); }

.about__lede { padding-bottom: var(--s-7); }
.about__lede h1 { margin-bottom: var(--s-3); }

.kv { display: grid; gap: 0; margin-top: var(--s-4); }

.kv__row {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line-faint);
  font-size: var(--t-sm);
  align-items: baseline;
}
.kv__row:first-child { border-top: 1px solid var(--line); }
.kv__row dt { color: var(--ink-faint); font-size: var(--t-xs); letter-spacing: 0.02em; }
.kv__row dd { margin: 0; color: var(--ink-muted); line-height: 1.55; }
.kv__row dd b { color: var(--ink); font-weight: 620; }

@media (max-width: 820px) {
  .about { grid-template-columns: 1fr; }
  .about__toc { position: static; display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .about__toc a { border-left: 0; border: 1px solid var(--line); border-radius: var(--r-pill); }
  .kv__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   11  Utility states
   ========================================================================== */

.noscript {
  max-width: 44rem;
  margin: var(--s-9) auto;
  padding: var(--s-6);
  background: #fff;
  border: 1px solid #C3CEE0;
  border-radius: 10px;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.noscript h1 { font-size: 1.6rem; margin-bottom: 1rem; }
.noscript p { color: #47546B; line-height: 1.65; }

.boot-error { max-width: 40rem; margin: var(--s-9) auto; padding: var(--s-6); }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: var(--s-4);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  text-decoration: none;
}
.crumb:hover { color: var(--ink); }
.crumb .icon { width: 15px; height: 15px; }

.spinner-note {
  padding: var(--s-8);
  text-align: center;
  color: var(--ink-faint);
  font-size: var(--t-sm);
}

/* Not found screen. The three ways back in. */
.empty__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.empty__actions a.btn { text-decoration: none; }

/* --------------------------------------------------------------------------
   Standalone pages.

   The two login screens and the printable QR entry page are plain HTML
   documents served outside the application shell. They load the same three
   stylesheets and use the same tokens, so they cannot drift from the product,
   and they carry their own centred layout because there is no top bar and no
   router on them. Nothing below is used by the application itself.
   -------------------------------------------------------------------------- */

.auth-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: clamp(1.5rem, 5vw, 4rem) var(--gutter) var(--s-8);
}

.auth-shell__inner { width: 100%; max-width: 38rem; }

.auth-shell__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink-strong);
  margin-bottom: var(--s-6);
}
.auth-shell__brand img { width: 38px; height: 38px; border-radius: var(--r-sm); flex: none; }

.auth-shell__title { font-size: var(--t-xl); margin-bottom: var(--s-3); }

.auth-shell__lede {
  color: var(--ink-muted);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 52ch;
}

.auth-shell .notice { align-items: flex-start; }
.auth-shell .notice p + p { margin-top: var(--s-3); }
.auth-shell .form-card { max-width: none; margin-top: var(--s-5); }
.auth-shell .form-card .row { margin-top: var(--s-5); }

.auth-open {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--t-sm);
  color: var(--ink-muted);
  line-height: 1.6;
}
.auth-open a { font-weight: 620; }

.auth-shell__foot {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--ink-faint);
  line-height: 1.6;
}

/* --- Printable QR entry page --- */

.qr-shell { max-width: 44rem; }

.qr-card {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--lift-1);
}

.qr-card img {
  width: min(22rem, 68vw);
  height: auto;
  background: #FFFFFF;
}

.qr-url {
  font-family: var(--font-mono);
  font-size: var(--t-md);
  letter-spacing: 0.01em;
  color: var(--ink-strong);
  word-break: break-all;
  text-align: center;
  margin: 0;
}

.qr-instruction {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-muted);
  text-align: center;
  max-width: 40ch;
}

.qr-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); }
.qr-actions a.btn { text-decoration: none; }

/*
 * Print. One page, no chrome, no ambient field, black on white so a laser
 * printer produces a code with the contrast a phone camera needs.
 */
@media print {
  .ambient,
  .qr-actions,
  .qr-page__foot { display: none !important; }

  body { background: #FFFFFF; }

  .auth-shell { min-height: 0; padding: 0; display: block; }
  .qr-shell { max-width: none; }

  .qr-card {
    border: 0;
    box-shadow: none;
    padding: 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .qr-card img { width: 3.6in; }

  .auth-shell__brand { margin-bottom: 0.35in; }
  .auth-shell__title { font-size: 20pt; }
  .qr-url { font-size: 12pt; }
  .qr-instruction { font-size: 11pt; }

  @page { margin: 0.6in; }
}

/* MapLibre chrome, restyled to match the product rather than the library. */
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-logo { display: none !important; }

.maplibregl-ctrl-group {
  border-radius: var(--r-sm) !important;
  box-shadow: var(--lift-1) !important;
  border: 1px solid var(--line-strong) !important;
}
.maplibregl-ctrl-group button { width: 34px !important; height: 34px !important; }
.maplibregl-ctrl-group button:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.maplibregl-popup-content { display: none; }