/* ============================================================================
   Ride NZ — application styles.

   Everything here is a transcription of the inline styles in the design
   prototype (design_handoff_ridenz_php/design/Ride NZ Portal.dc.html), lifted
   into classes so hover, focus and print states have somewhere to live. Values
   are token references wherever the prototype used one. Load order matters:
   tokens -> light-theme -> this file.
   ========================================================================= */

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-base);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
::selection { background: var(--accent); color: var(--accent-fg); }
input, select, textarea, button { font-family: var(--font-ui); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; }
input:focus, select:focus { box-shadow: var(--shadow-inset-border-focus); }
textarea:focus { box-shadow: var(--shadow-inset-border-focus) !important; }
input[type="checkbox"]:focus-visible + span,
input[role="switch"]:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.page { min-height: 100vh; background: var(--bg-base); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------- design-system: Button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font: var(--type-button);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-tight);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  cursor: pointer;
  width: auto;
  box-sizing: border-box;
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
  padding: var(--space-8) var(--space-16);
  font-size: var(--text-14);
  min-height: 40px;
  border: 1px solid transparent;
  background: transparent;
}
.btn:active { transform: scale(var(--press-scale)); }
.btn ion-icon { font-size: 1.15em; }

.btn--sm { padding: var(--space-4) var(--space-12); font-size: var(--text-12); min-height: 28px; border-radius: var(--radius-full); }
.btn--lg { padding: var(--space-12) var(--space-20); font-size: var(--text-14); min-height: 48px; }
.btn--block { width: 100%; }

.btn--primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent-border); }
.btn--primary:hover { background: var(--accent-border); color: var(--accent-fg); }

.btn--outlined { background: transparent; color: var(--text-base); border-color: var(--border-muted); }
.btn--outlined:hover { background: var(--surface-2); border-color: var(--text-base); color: var(--text-base); }

.btn--ghost { background: transparent; color: var(--link); border-color: transparent; }
.btn--ghost:hover { background: var(--surface-2); color: var(--text-base); }

/* ----------------------------------------------- design-system: IconButton */

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-circle);
  cursor: pointer;
  padding: 0;
  transition: var(--transition-surface);
  width: 40px;
  height: 40px;
  font-size: 19px;
  background: transparent;
}
.icon-btn--sm { width: 28px; height: 28px; font-size: 15px; }
.icon-btn--outlined { background: transparent; color: var(--text-base); border-color: var(--border-muted); }
.icon-btn--outlined:hover { background: var(--surface-2); }
.icon-btn--ghost { background: transparent; color: var(--text-muted); }
.icon-btn--ghost:hover { background: var(--surface-2); color: var(--text-base); }
.icon-btn[disabled] { cursor: not-allowed; opacity: .4; }

/* ---------------------------------------------------- design-system: Badge */

/* Casing is pass-through, never title-cased: badges read "Sinch e-bike fleet"
   and "Opens 19-20 September 2026" exactly as written. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font: var(--type-badge);
  text-transform: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-badge);
}
.badge ion-icon { font-size: 1.15em; }
.badge--accent { background: var(--accent); color: var(--accent-fg); }
.badge--neutral { background: var(--surface-card-alt); color: var(--text-secondary); }

/* Qualmark badges wear their own metal: an accreditation you have to read is a badge that failed.
   The rim is an inset shadow rather than a border so a coloured badge is exactly the same size as
   a neutral one sitting next to it, and each ink is the dark end of its own metal — every pair
   clears 5:1 against the darker stop of its gradient. */
.badge--gold {
  background: linear-gradient(180deg, #f6e3a4, #e0bd55);
  color: #453207;
  box-shadow: inset 0 0 0 1px #c9a53f, 0 1px 2px rgba(26, 26, 23, .18);
}
.badge--silver {
  background: linear-gradient(180deg, #f3f4f5, #ccd0d5);
  color: #3a3f46;
  box-shadow: inset 0 0 0 1px #aeb4bb, 0 1px 2px rgba(26, 26, 23, .18);
}
.badge--bronze {
  background: linear-gradient(180deg, #f0d2b2, #cf9a68);
  color: #46290f;
  box-shadow: inset 0 0 0 1px #ad7748, 0 1px 2px rgba(26, 26, 23, .18);
}

/* --------------------------------------------- design-system: Select/Input */

.field { display: inline-block; width: auto; }
.field--block { display: block; width: 100%; }
.field__label {
  display: block;
  font: var(--type-small-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-tight);
  margin-bottom: var(--space-6);
}
.field__hint { display: block; font: var(--type-small); color: var(--text-muted); margin-top: var(--space-6); }

.select {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-inset-border);
}
.select select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-base);
  font: var(--type-caption-bold);
  padding: var(--space-10) 36px var(--space-10) var(--space-14);
  width: 100%;
  cursor: pointer;
}
.select ion-icon {
  position: absolute;
  right: 12px;
  font-size: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.input {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-inset-border);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.input input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-base);
  font: var(--type-body);
  padding: var(--space-10) var(--space-12);
}

.textarea {
  background: var(--surface-2);
  color: var(--text-base);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-16);
  font: var(--type-caption);
  line-height: 1.5;
  resize: vertical;
  outline: none;
  box-shadow: var(--shadow-inset-border);
  width: 100%;
}

/* ------------------------------------------ design-system: Checkbox/Switch */

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  cursor: pointer;
}
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: var(--shadow-inset-border);
  color: var(--accent-fg);
  transition: var(--transition-surface);
}
.checkbox input:checked + .checkbox__box { background: var(--accent); box-shadow: none; }
/* The tick belongs to the checked state only. (The prototype asks its icon set for
   "checkmark-sharp", which the bundled icons.js does not carry, so its box renders blank when
   ticked — this restores the glyph the design system specifies.) */
.checkbox input:not(:checked) + .checkbox__box ion-icon { display: none; }
.checkbox__box ion-icon { font-size: 14px; }
.checkbox__label { display: block; font: var(--type-caption); color: var(--text-base); }

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  cursor: pointer;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-full);
  flex: 0 0 auto;
  background: var(--surface-2);
  box-shadow: var(--shadow-inset-border);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-circle);
  background: var(--text-muted);
  transition: left var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}
.switch input:checked + .switch__track { background: var(--accent); box-shadow: none; }
.switch input:checked + .switch__track::after { left: 23px; background: var(--black); }
.switch__label { font: var(--type-caption); color: var(--text-base); }

/* ------------------------------------------------- image placeholder slots */

/* Labelled slots exactly as the prototype's <image-slot> empty state — real
   photography drops in later via the admin photo-folder link. Never a stock photo.

   The 3/2 ratio is load-bearing, not decoration: <image-slot> declares it on :host, so a wrapper
   whose own ratio is wider AND whose overflow is visible grows to 3/2 (its automatic minimum size
   becomes the slot's min-content height). That is why the 16:9 and 16:10 operator-card photos
   render 3:2 in the prototype while the 4:3 trail cards keep their own ratio. Reproducing the
   mechanic rather than the measurement means the wrapper snaps back to its declared ratio the day
   a real <img> replaces the placeholder. */
.slot {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 12px;
  box-sizing: border-box;
  font: 13px/1.3 system-ui, -apple-system, sans-serif;
  background: rgba(127, 127, 127, .08);
  color: inherit;
}
.slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1.5px dashed currentColor;
  opacity: .35;
}
.slot svg { opacity: .45; }
.slot__cap { max-width: 90%; font-weight: 500; letter-spacing: .01em; opacity: .75; }

.photo { position: relative; overflow: hidden; background: var(--surface-card-alt); }
.photo--4x3 { aspect-ratio: 4 / 3; }
.photo--16x9 { aspect-ratio: 16 / 9; }
.photo--16x10 { aspect-ratio: 16 / 10; }
.photo--1x1 { aspect-ratio: 1; }
.photo--rounded { border-radius: var(--radius-lg); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }

/* The ratio is the size of the box, whatever ends up inside it.
   aspect-ratio on its own does not clamp a child: `height: 100%` against a height that is only
   implied resolves to auto, the child falls back to its own intrinsic height, and the box grows to
   meet it. One 800x1200 portrait photograph was enough to make a single card in a grid of fifteen
   twice the height of its neighbours, and .slot carries its own 3/2 which did the same to every
   placeholder. Taking both out of flow leaves the ratio as the only thing with a say. */
.photo > img,
.photo > .slot,
.photo__link > img,
.photo__link > .slot { position: absolute; inset: 0; aspect-ratio: auto; }
/* A card photo wrapped in a link: the anchor fills the box so the whole image is the target. */
.photo > .photo__link { position: absolute; inset: 0; display: block; }
.card:hover .photo img { transform: scale(1.03); }

/* -------------------------------------------------------------- structure */

.wrap { max-width: var(--container-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.band { background: var(--surface-1); border-top: 1px solid var(--hairline); }
.band--edged { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface-1); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--header-height);
  background: var(--bg-base);
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-32);
}
.wordmark {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.5px;
  color: var(--text-base);
}
.wordmark span { color: var(--accent-text); }
.wordmark--sm { font-size: 18px; letter-spacing: -0.4px; }

.mainnav { display: flex; gap: var(--space-24); margin-left: var(--space-16); }
.mainnav a {
  font: var(--type-nav);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-tight);
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
}
.mainnav a:hover { color: var(--text-base); }
.mainnav a.is-active { border-bottom-color: var(--accent); color: var(--text-base); }

.powered { margin-left: auto; display: flex; align-items: center; gap: var(--space-16); }
.powered__by {
  font: var(--type-micro);
  letter-spacing: var(--tracking-caps-tight);
  text-transform: uppercase;
  color: var(--text-faint);
}
.powered__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--accent-text);
}

.site-footer { border-top: 1px solid var(--hairline); background: var(--surface-1); }
.site-footer__cols {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-40) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-40);
}
.site-footer__col { display: flex; flex-direction: column; gap: var(--space-12); }
.site-footer__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-8) var(--space-24); }
.site-footer__links--narrow { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.site-footer__links a { font: var(--type-small); color: var(--text-secondary); }
.site-footer__links a:hover { color: var(--link-hover); }
.site-footer__bar { border-top: 1px solid var(--hairline); }
.site-footer__bar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-16) var(--gutter);
  display: flex;
  gap: var(--space-16);
  flex-wrap: wrap;
  align-items: center;
}
.site-footer__legal { font: var(--type-micro); color: var(--text-faint); }
.site-footer__admin { margin-left: auto; font: var(--type-micro); color: var(--text-faint); }
.site-footer__admin:hover { color: var(--link-hover); }

/* ------------------------------------------------------------- typography */

.eyebrow {
  font: var(--type-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow--faint {
  display: block;
  font: var(--type-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -1.4px;
  color: var(--text-base);
  text-wrap: pretty;
}
.page-title--46 { font-size: 46px; letter-spacing: -1.2px; }
.page-title--48 { font-size: 48px; letter-spacing: -1.3px; }
.page-title--44 { font-size: 44px; letter-spacing: -1.2px; }
.page-title--34 { font-size: 34px; letter-spacing: -0.8px; }
.lede { margin: 0; font: var(--type-body); font-size: 18px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.lede--17 { font-size: 17px; }
.section-title { margin: 0; font: var(--type-section-title); font-size: 28px; letter-spacing: -0.4px; color: var(--text-base); }
.section-title--26 { font-size: 26px; }
.section-title--22 { font-size: 22px; letter-spacing: -0.3px; }
.stack { display: flex; flex-direction: column; }
.stack-8 { gap: var(--space-8); }
.stack-12 { gap: var(--space-12); }
.stack-16 { gap: var(--space-16); }
.stack-24 { gap: var(--space-24); }
.stack-40 { gap: var(--space-40); }
.mt-4 { margin-top: var(--space-4); }
.mt-16 { margin-top: var(--space-16); }
.mb-16 { margin-bottom: var(--space-16); }
.mb-24 { margin-bottom: var(--space-24); }
.self-start { align-self: flex-start; white-space: nowrap; }
/* Headings break "e-bike" at the hyphen, which reads as a typo. Wrap the word, not the layout. */
.nowrap { white-space: nowrap; }

.breadcrumb {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-20) var(--gutter) 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font: var(--type-small);
  color: var(--text-muted);
}
.breadcrumb--inline { max-width: none; margin: 0; padding: 0; }
.breadcrumb ion-icon { font-size: 12px; }
.breadcrumb .is-current { color: var(--text-secondary); }

/* -------------------------------------------------------- short answer */

.answer {
  background: var(--surface-card);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}
.answer--wide { padding: var(--space-20) var(--space-24); gap: var(--space-8); }
.answer__label {
  font: var(--type-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}
.answer p { margin: 0; font: var(--type-body); line-height: 1.5; color: var(--text-base); text-wrap: pretty; }
.answer--wide p { font-size: 17px; }

/* Access restrictions: a closure, a mandatory transfer, a bike-type limit. Warning-toned rather
   than accent-lime, because this is not a selling point. */
.alert {
  background: var(--surface-card);
  border-left: 3px solid var(--orange-400);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.alert__label {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font: var(--type-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-base);
}
.alert p { margin: 0; font: var(--type-small); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }

/* --------------------------------------------------------------- the map */

.map-card { position: relative; background: var(--surface-1); border-radius: var(--radius-xl); padding: var(--space-20); }
.map-card--sm { padding: var(--space-16); }
.map-card--light { background: var(--bg-base); padding: var(--space-16); overflow: hidden; }
.map-card__title {
  display: block;
  font: var(--type-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 var(--space-4) var(--space-12);
}
.map-figure { position: relative; }
.map { width: 100%; height: auto; display: block; clip-path: inset(0); overflow: hidden; }
.map-legend { display: flex; gap: var(--space-16); flex-wrap: wrap; padding: var(--space-16) var(--space-4) 0; }
.map-legend--tight { padding: var(--space-12) var(--space-4) 0; flex-wrap: nowrap; }
.map-legend span { display: flex; align-items: center; gap: var(--space-6); font: var(--type-micro); color: var(--text-muted); }
.map-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--map-accent); }
.map-legend .line { width: 14px; height: 2px; background: var(--map-trail); }
.map-legend .line--accent { background: var(--map-accent); }
.map-label {
  position: absolute;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--map-label-strong);
  text-shadow: var(--map-label-halo);
  white-space: nowrap;
  pointer-events: none;
}

/* Region-row hover highlights that region's trails and pins. Pure enhancement:
   the map is fully drawn server-side and reads correctly without any of this. */
.map .trail-line { transition: stroke var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard); }
.map .depot-pin { transition: r var(--duration-base) var(--ease-standard), fill var(--duration-base) var(--ease-standard); }
.map.is-focused .trail-line { stroke: var(--map-trail); opacity: .3; }
.map.is-focused .trail-line.is-lit { stroke: var(--map-accent); opacity: .9; stroke-width: 4; }
.map.is-focused .depot-pin { fill: var(--map-trail); }
.map.is-focused .depot-pin.is-lit { fill: var(--map-accent); r: 6; }

/* ------------------------------------------------------------------ home

   The front door carries no listing, so it is the one page in the site that
   centres its type: a large heading, two paragraphs, and the two doors in. */

.hero {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-80) var(--gutter) var(--space-56);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
}
.hero__inner { max-width: 760px; display: flex; flex-direction: column; gap: var(--space-20); text-align: center; }
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 62px;
  line-height: 1.03;
  letter-spacing: -1.9px;
  color: var(--text-base);
  text-wrap: balance;
}
.hero__lede { margin: 0; font: var(--type-body); font-size: 19px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.hero__lede--sm { font-size: 17px; color: var(--text-muted); }

/* Two cards of equal weight. Neither is styled as the primary — which one fits
   depends on what the rider already knows, not on what we would rather they did. */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); width: 100%; max-width: 960px; }
.choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-32) var(--space-32) var(--space-24);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-xl);
  color: inherit;
  transition: var(--transition-surface);
}
.choice:hover { background: var(--surface-card-alt); color: inherit; }
.choice__icon { font-size: 26px; color: var(--accent-text); }
.choice__title { font: var(--type-section-title); font-size: 24px; letter-spacing: -0.4px; color: var(--text-base); }
.choice__copy { font: var(--type-caption); line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.choice__meta { font: var(--type-small-bold); color: var(--accent-text); }
.choice__go { margin-top: auto; padding-top: var(--space-16); display: flex; align-items: center; gap: var(--space-6); font: var(--type-caption-bold); color: var(--text-base); }
.choice__go ion-icon { transition: transform var(--duration-base) var(--ease-standard); }
.choice:hover .choice__go ion-icon { transform: translateX(3px); }

/* The opening note below the two doors. A narrow standing head beside one column of prose, so the
   measure stays readable at 1280px instead of running the full container width. */
.home-about { display: flex; flex-direction: column; align-items: center; gap: var(--space-24); }
.home-about__head { display: flex; flex-direction: column; gap: var(--space-8); text-align: center; }
.prose { display: flex; flex-direction: column; gap: var(--space-16); max-width: 66ch; }
.prose p { margin: 0; font: var(--type-body); font-size: 17px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.prose p:first-child { font-size: 19px; line-height: 1.55; color: var(--text-base); }

/* ------------------------------------------------------ region directory */

.regions-band { max-width: var(--container-max); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-80); }
.regions-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-40); align-items: start; }
.regions-col { display: flex; flex-direction: column; }
.region-rows { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.region-row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-12);
  border-bottom: 1px solid var(--hairline);
  color: inherit;
  cursor: pointer;
  background: transparent;
}
.region-row:hover { background: var(--surface-card-alt); color: inherit; }
.region-row__text { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.region-row__name { font: var(--type-feature-heading); font-size: 17px; color: var(--text-base); }
.region-row__trails { font: var(--type-small); color: var(--text-muted); }
.region-row__meta { margin-left: auto; display: flex; align-items: center; gap: var(--space-20); }
.region-row__count { font: var(--type-small); color: var(--text-secondary); white-space: nowrap; }
.region-row__ops { font: var(--type-small-bold); color: var(--accent-text); white-space: nowrap; }
.region-row ion-icon { color: var(--text-faint); }

/* -------------------------------------------------------- directory bits */

.dir-hero { max-width: var(--container-max); margin: 0 auto; padding: var(--space-40) var(--gutter) var(--space-24); }
.dir-hero__inner { display: flex; flex-direction: column; gap: var(--space-12); max-width: 680px; }
.dir-body { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter) var(--space-80); }
.trails-body { max-width: var(--container-max); margin: 0 auto; padding: var(--space-40) var(--gutter) var(--space-80); }
.trails-body__intro { display: flex; flex-direction: column; gap: var(--space-12); margin-bottom: var(--space-24); max-width: 820px; }

.filters {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--space-16);
  background: var(--surface-1);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-24);
  position: sticky;
  top: 96px;
  z-index: 20;
}
.filters--tight { margin-bottom: var(--space-20); }
.filters__count { margin-left: auto; font: var(--type-small); color: var(--text-muted); }

.grid-280 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-16); }
.grid-320 { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-16); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.grid-2--tight { gap: var(--space-10); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
}
a.card:hover { color: inherit; }
.card__badges {
  position: absolute;
  top: var(--space-10);
  left: var(--space-10);
  display: flex;
  gap: var(--space-6);
  pointer-events: none;
  white-space: nowrap;
}
.card__body { padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-6); }
.card__region {
  font: var(--type-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-tight);
  text-transform: uppercase;
  color: var(--text-muted);
}
.card__name { font: var(--type-feature-heading); font-size: 17px; color: var(--text-base); }
.card__meta { font: var(--type-small); color: var(--text-secondary); }

.empty {
  padding: var(--space-56) var(--space-20);
  text-align: center;
  background: var(--surface-1);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}
.empty--tall { padding: var(--space-80) var(--space-20); }
.empty__icon { font-size: 28px; color: var(--text-faint); }
.empty__icon--lg { font-size: 34px; }
.empty__title { font: var(--type-feature-heading); color: var(--text-base); }
.empty__title--lg { font: var(--type-section-title); font-size: 22px; }
.empty__copy { font: var(--type-caption); color: var(--text-muted); max-width: 380px; }
.empty__copy--wide { max-width: 440px; text-wrap: pretty; }
.empty__actions { display: flex; gap: var(--space-10); margin-top: var(--space-8); flex-wrap: wrap; justify-content: center; }

/* --------------------------------------------------------- operator card */

.op-card__body { padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-12); flex: 1; }
.op-card__head { display: flex; flex-direction: column; gap: var(--space-4); }
.op-card__name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-base); }
.op-card__name--18 { font: var(--type-feature-heading); font-size: 18px; }
.op-card__name:hover { color: var(--link); }
.op-card__base { font: var(--type-small); color: var(--text-muted); }
.op-card__pitch { margin: 0; font: var(--type-small); line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.op-card__services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-12);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.op-card__services--list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: none;
}
.service { display: flex; align-items: center; gap: 6px; font: var(--type-small); color: var(--text-secondary); }
.service--off { color: var(--gray-500); }
.op-card__trails { font: var(--type-micro); line-height: 1.5; color: var(--text-muted); }
.op-card__cta { margin-top: auto; }
.op-card__notice { font: var(--type-micro); color: var(--text-faint); text-align: center; }
.op-card__verified { display: flex; align-items: center; gap: 5px; font: var(--type-micro); color: var(--text-faint); }
.op-card__verified ion-icon { color: var(--accent-text); }
.qualmark-badge { position: absolute; top: var(--space-10); left: var(--space-10); pointer-events: none; white-space: nowrap; }

/* -------------------------------------------------------- region detail */

.region-hero { max-width: var(--container-max); margin: 0 auto; padding: var(--space-32) var(--gutter) var(--space-40); }
.region-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-40); align-items: start; }
.region-main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-56) var(--gutter); }
.region-main__grid { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: var(--space-40); align-items: start; }
.sticky-rail { position: sticky; top: 96px; }
.section-56 { max-width: var(--container-max); margin: 0 auto; padding: var(--space-56) var(--gutter); }

.trail-row {
  display: flex;
  gap: var(--space-20);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  color: inherit;
}
.trail-row:hover { background: var(--surface-card-alt); color: inherit; }
.trail-row__main { flex: 1; display: flex; flex-direction: column; gap: var(--space-8); }
.trail-row__title { display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap; white-space: nowrap; }
.trail-row__name { font: var(--type-feature-heading); font-size: 18px; color: var(--text-base); }
.trail-row__meta { font: var(--type-small); color: var(--text-muted); }
.trail-row__pitch { margin: var(--space-4) 0 0; font: var(--type-small); line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.trail-row__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-12);
  white-space: nowrap;
}
.trail-row__ops { font: var(--type-small-bold); color: var(--accent-text); }
.trail-row__more { display: flex; align-items: center; gap: 4px; font: var(--type-small); color: var(--text-muted); }

.chip-rail { display: flex; gap: var(--space-12); flex-wrap: wrap; }
.chip-rail--tight { gap: var(--space-10); }
.chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-16);
  color: inherit;
}
.chip:hover { background: var(--surface-card-alt); color: inherit; }
.chip--sm { padding: var(--space-10) var(--space-16); }
.chip--flat { background: var(--surface-1); box-shadow: none; padding: var(--space-10) var(--space-16); }
.chip--flat:hover { background: var(--surface-card); }
.chip__name { font: var(--type-caption-bold); color: var(--text-base); }
.chip__meta { font: var(--type-micro); color: var(--text-muted); }

/* ---------------------------------------------------------- trail detail */

.trail-layout {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-24) var(--gutter) var(--space-80);
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--space-40);
  align-items: start;
}
.trail-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--space-16); }
.trail-main { display: flex; flex-direction: column; gap: var(--space-40); min-width: 0; }
.facts-card {
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  display: flex;
  flex-direction: column;
}
.facts-card__label {
  font: var(--type-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-12);
}
.fact { display: flex; gap: var(--space-16); align-items: baseline; padding: var(--space-10) 0; border-top: 1px solid var(--hairline); }
.fact__label { flex: 0 0 96px; font: var(--type-small); color: var(--text-muted); }
.fact__value { flex: 1; font: var(--type-small-bold); color: var(--text-base); text-wrap: pretty; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.section-note { font: var(--type-micro); color: var(--text-faint); }
.section-lede { margin: 0; font: var(--type-small); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }

.faq {
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.faq h3 { margin: 0; font: var(--type-feature-heading); font-size: 16px; color: var(--text-base); text-wrap: pretty; }
.faq p { margin: 0; font: var(--type-small); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }

.depot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-1);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-16);
}
.depot--card { background: var(--surface-card); box-shadow: var(--shadow-card); }
.depot__label { font: var(--type-caption-bold); color: var(--text-base); }
.depot__addr { font: var(--type-small); color: var(--text-secondary); }
.depot__op { font: var(--type-micro); color: var(--text-faint); }


.section-note ion-icon { font-size: 14px; vertical-align: -2px; margin-right: var(--space-6); }

/* ------------------------------------------------- host profile: featured riders */

/* Instagram's embed.js swaps each <blockquote class="instagram-media"> for an iframe it sizes
   itself: inline min-width 326px, max-width 540px, and a height that grows with the caption. The
   posts sit in a horizontal, snap-scrolling rail — four to a screen on a wide display, two on a
   tablet, one on a phone — so a dozen posts cost one row of page height, not three. Each card is
   clipped to a fixed aspect ratio: the photo, header and action bar show, and however long the
   caption, the rest of the iframe is simply cut off below the fold of the card. The !important
   rules let the iframe fill the card; Instagram's inline styles would otherwise hold it at 326px
   and push the page wider than the screen. Before the script runs, and with scripts off, the
   blockquote is ours and reads as a labelled slot with a link to the post. */
/* Sits between the fact strip and "What they do best", whose own top padding supplies the gap below. */
.profile-riders { max-width: var(--container-max); margin: 0 auto; padding: var(--space-56) var(--gutter) 0; display: flex; flex-direction: column; gap: var(--space-20); }
.riders-carousel { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
/* --riders-per-view drives the card width; the breakpoints further down lower it. The negative
   margin lets cards scroll right up to the gutter edge instead of clipping mid-card inside it. */
.riders-rail {
  --riders-per-view: 4;
  --riders-gap: var(--space-16);
  display: flex;
  gap: var(--riders-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
  padding-bottom: var(--space-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  outline-offset: 4px;
}
.riders-rail::-webkit-scrollbar { display: none; }
.riders-rail:focus-visible { outline: 2px solid var(--accent-text); border-radius: var(--radius-sm); }
.riders-nav { display: flex; justify-content: flex-end; gap: var(--space-8); }
.riders-nav[hidden] { display: none; }
.riders-cta { margin: 0; font: var(--type-body); line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.riders-cta a { color: var(--accent-text); font-weight: var(--weight-semibold); text-decoration: none; }
.riders-cta a:hover { text-decoration: underline; }
.riders-cta strong { color: var(--text-base); }
/* The card: a fixed shape, clipped. 5:8 holds a portrait photo plus Instagram's header and action
   bar at these widths; a square photo shows the first line or two of caption and nothing more. */
.rider-post {
  flex: 0 0 calc((100% - (var(--riders-per-view) - 1) * var(--riders-gap)) / var(--riders-per-view));
  min-width: 0;
  aspect-ratio: 5 / 8;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface-card-alt);
  scroll-snap-align: start;
}
.rider-post .instagram-media {
  display: block;
  box-sizing: border-box;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
.rider-post blockquote.instagram-media {
  height: 100%;
  border-radius: var(--radius-lg);
  background: var(--surface-card-alt);
  padding: 0;
  overflow: hidden;
  position: relative;
}
.rider-post blockquote.instagram-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1.5px dashed currentColor;
  border-radius: inherit;
  opacity: .35;
}
.rider-post__link {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-16);
  text-align: center;
  text-decoration: none;
  color: var(--text-secondary);
}
.rider-post__link ion-icon { font-size: 28px; opacity: .45; }
.rider-post__cta { font: var(--type-small-bold); color: var(--text-base); }
.rider-post__by { font: var(--type-micro); color: var(--text-faint); max-width: 90%; }
.rider-post iframe.instagram-media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
/* Once the iframe is in, a short fade over its last few pixels so a clipped caption reads as a
   deliberate cut rather than a torn line. Instagram's iframe is white in every theme, hence the
   literal colour. The pre-script placeholder keeps its own dashed ::after and no fade. */
.rider-post:has(iframe.instagram-media)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}
@media (prefers-reduced-motion: reduce) {
  .riders-rail { scroll-behavior: auto; }
}

/* The empty state: the same dashed slot the photo placeholders use, holding the instructions
   instead of a label — the section stays, and says how to fill it. */
.riders-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-32) var(--space-24);
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--surface-card-alt);
  color: var(--text-secondary);
}
.riders-empty::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1.5px dashed currentColor;
  border-radius: inherit;
  opacity: .35;
}
.riders-empty > ion-icon { font-size: 28px; opacity: .45; }
.riders-empty__text { font: var(--type-small); color: var(--text-muted); text-wrap: balance; }

.related { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-16); border-top: 1px solid var(--hairline); }
.trail-header { display: flex; flex-direction: column; gap: var(--space-12); }
.trail-pitch { margin: 0; font: var(--type-caption); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }

/* -------------------------------------------------------------- profile */

.profile-hero { max-width: var(--container-max); margin: 0 auto; padding: var(--space-32) var(--gutter) var(--space-40); }
.profile-hero__grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-40); align-items: start; }
.profile-badges { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; white-space: nowrap; }
.profile-since { font: var(--type-small); color: var(--text-muted); }
.profile-base { display: flex; align-items: center; gap: var(--space-6); font: var(--type-body); color: var(--text-secondary); }
.profile-base ion-icon { color: var(--accent-text); }
.profile-social { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; }
.profile-social__link { display: inline-flex; align-items: center; gap: var(--space-6); font: var(--type-small-bold); color: var(--text-secondary); text-decoration: none; }
.profile-social__link ion-icon { font-size: 18px; color: var(--accent-text); }
.profile-social__link:hover { color: var(--text-base); text-decoration: underline; }
.book-card {
  background: var(--surface-1);
  border-radius: var(--radius-xl);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.book-card__label { font: var(--type-small); color: var(--text-secondary); text-align: center; }
.book-card__notice { margin: var(--space-8) 0 0; font: var(--type-micro); line-height: 1.5; color: var(--text-faint); text-align: center; text-wrap: pretty; }
.book-card__verified {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  justify-content: center;
  padding-top: var(--space-12);
  border-top: 1px solid var(--hairline);
  font: var(--type-micro);
  color: var(--text-muted);
}
.book-card__verified ion-icon { color: var(--accent-text); }

.fact-strip { max-width: var(--container-max); margin: 0 auto; padding: var(--space-24) var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16) var(--space-32); }
.fact-cell { display: flex; flex-direction: column; gap: 3px; }
.fact-cell__label {
  font: var(--type-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-tight);
  text-transform: uppercase;
  color: var(--text-faint);
}
.fact-cell__value { font: var(--type-caption-bold); color: var(--text-base); text-wrap: pretty; }

.profile-best { max-width: var(--container-max); margin: 0 auto; padding: var(--space-56) var(--gutter); }
.profile-best__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-40); align-items: start; }
.profile-best p { margin: 0; font: var(--type-body); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.profile-points { display: flex; flex-direction: column; gap: var(--space-10); padding-top: var(--space-8); }
.profile-point { display: flex; gap: var(--space-12); align-items: flex-start; }
.profile-point > ion-icon { color: var(--accent-text); font-size: 19px; margin-top: 2px; }
.profile-point__text { display: flex; flex-direction: column; gap: 2px; }
.profile-point__label { font: var(--type-caption-bold); color: var(--text-base); }
.profile-point__value { font: var(--type-small); line-height: 1.5; color: var(--text-secondary); }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }
.photo-grid__wide { grid-column: span 2; }
.profile-depots {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-56) var(--gutter);
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--space-40);
  align-items: start;
}

/* ---------------------------------------------------------- pagination */

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-8); padding-top: var(--space-32); }
.page-num {
  min-width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  font: var(--type-small-bold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-8);
}
.page-num:hover { background: var(--surface-2); color: var(--text-base); }
.page-num.is-current { border-color: var(--accent-border); background: var(--accent); color: var(--accent-fg); }

/* --------------------------------------------------------------- admin */

.admin { background: var(--surface-1); min-height: 70vh; }
.admin__inner { max-width: 1080px; margin: 0 auto; padding: var(--space-40) var(--gutter) var(--space-80); }
.admin__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); flex-wrap: wrap; margin-bottom: var(--space-32); }
.admin__intro { display: flex; flex-direction: column; gap: var(--space-8); }
.admin__intro p { margin: 0; max-width: 560px; font: var(--type-small); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.admin__actions { display: flex; gap: var(--space-10); align-items: flex-end; }
.admin__grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-32); align-items: start; }
.admin__col { display: flex; flex-direction: column; gap: var(--space-24); min-width: 0; }
.admin fieldset {
  border: none;
  margin: 0;
  padding: var(--space-24);
  background: var(--bg-base);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}
.admin legend { padding: 0; font: var(--type-feature-heading); color: var(--text-base); }
.admin__hint { font: var(--type-small); color: var(--text-muted); }
.admin__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
.admin__switches { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); }
.admin__switch-cell { display: flex; align-items: center; background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-12) var(--space-16); }
.admin__depots { display: flex; flex-direction: column; gap: var(--space-10); min-width: 0; }
.admin__depot-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr) 36px; gap: var(--space-10); align-items: center; }
.admin__chips { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.chip-toggle { display: inline-flex; }
.trail-chip {
  display: inline-block;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font: var(--type-small-bold);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-surface);
}
.chip-toggle input:checked + .trail-chip { border-color: var(--accent-border); background: var(--accent); color: var(--accent-fg); }
.chip-toggle input:focus-visible + .trail-chip { outline: 2px solid var(--accent); outline-offset: 2px; }
.field--340 { max-width: 340px; }
.admin__photos { max-width: 420px; }
.preview-services {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.admin__preview { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--space-12); }
.admin__preview-note { margin: 0; font: var(--type-micro); line-height: 1.5; color: var(--text-faint); text-wrap: pretty; }
.preview-photo { position: relative; aspect-ratio: 16 / 9; background: var(--surface-card-alt); display: grid; place-items: center; }
.preview-photo span { font: var(--type-micro); color: var(--text-faint); }
.admin__flash {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-md);
  background: var(--bg-base);
  border-left: 3px solid var(--accent);
  font: var(--type-caption);
  color: var(--text-base);
  margin-bottom: var(--space-24);
}
.admin__flash--error { border-left-color: var(--red-400); }
.admin__flash ion-icon { color: var(--accent-text); }

/* ---------------------------------------------------- admin: shell + tables */

.adminbar { background: var(--bg-base); border-bottom: 1px solid var(--hairline); }
.adminbar__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-8) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}
.adminbar__nav { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.adminbar__nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font: var(--type-small-bold);
  color: var(--text-secondary);
}
.adminbar__nav a:hover { background: var(--surface-1); color: var(--text-base); }
.adminbar__nav a.is-active { background: var(--accent); color: var(--accent-fg); }
.adminbar__badge {
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--text-base);
  color: var(--bg-base);
  font: var(--type-micro);
  text-align: center;
}
.adminbar__nav a.is-active .adminbar__badge { background: var(--accent-fg); color: var(--accent); }
.adminbar__who { margin-left: auto; display: flex; align-items: center; gap: var(--space-12); }
.adminbar__name { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.adminbar__name strong { font: var(--type-small-bold); color: var(--text-base); }
.adminbar__name > span { font: var(--type-micro); color: var(--text-muted); }
.adminbar__who form { margin: 0; }

.admin__panel {
  background: var(--bg-base);
  border-radius: var(--radius-xl);
  padding: var(--space-24);
  margin-bottom: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.admin__status { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; margin: 0 0 var(--space-24); font: var(--type-small); }
.admin__hint--boxed {
  background: var(--bg-base);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-16);
  margin-bottom: var(--space-24);
}
.admin__actions--left { margin-left: 0; justify-content: flex-start; }
.admin__grid--single { grid-template-columns: minmax(0, 1fr); }
.stack-4 { gap: var(--space-4); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-12);
  margin-bottom: var(--space-24);
}
.stat { background: var(--bg-base); border-radius: var(--radius-lg); padding: var(--space-16); display: flex; flex-direction: column; gap: 2px; }
.stat__label { font: var(--type-micro); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps-tight); text-transform: uppercase; color: var(--text-faint); }
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.5px; color: var(--text-base); }
.stat__note { font: var(--type-micro); color: var(--text-muted); }

/* display:block lets a wide table scroll inside itself instead of widening the page. The rows
   still form an anonymous table box, so the columns stay aligned. */
.dtable { width: 100%; border-collapse: collapse; font: var(--type-small); display: block; overflow-x: auto; }
.dtable > thead, .dtable > tbody { display: table; width: 100%; }
.dtable th, .dtable td { text-align: left; padding: var(--space-10) var(--space-12); border-bottom: 1px solid var(--hairline); vertical-align: top; }
.dtable th {
  font: var(--type-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-tight);
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom-color: var(--border-strong);
}
.dtable tr:last-child td { border-bottom: none; }
.dtable td.right, .dtable th.right { text-align: right; }
.dtable--diff td { font: var(--type-small); }
.nowrap { white-space: nowrap; }
.muted { color: var(--text-muted); }
.plainlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-8); font: var(--type-small); }
.plainlist .muted { display: block; }

.tag {
  display: inline-block;
  padding: 2px var(--space-6);
  border-radius: var(--radius-badge);
  background: var(--surface-2);
  color: var(--text-secondary);
  font: var(--type-badge);
  white-space: nowrap;
}
.tag--warn { background: var(--orange-400); color: var(--black); }

.pill {
  display: inline-block;
  padding: 2px var(--space-8);
  border-radius: var(--radius-full);
  font: var(--type-badge);
  white-space: nowrap;
}
.pill--published { background: var(--accent); color: var(--accent-fg); }
.pill--draft { background: var(--surface-2); color: var(--text-muted); }
.pill--pending { background: var(--orange-400); color: var(--black); }

.diff-before { color: var(--text-muted); text-decoration: line-through; }
.diff-after { color: var(--text-base); font-weight: var(--weight-bold); }
.changes { margin-top: var(--space-6); }
.changes summary { cursor: pointer; font: var(--type-micro); color: var(--accent-text); }
.changes ul { margin: var(--space-6) 0 0; padding-left: var(--space-16); display: flex; flex-direction: column; gap: 2px; font: var(--type-micro); }

.review__form { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.btn--danger { color: var(--red-400); border-color: var(--red-400); }
.btn--danger:hover { background: var(--red-400); color: var(--black); border-color: var(--red-400); }

/* ------------------------------------------------------- admin: photo manager */

.uploader { display: flex; flex-direction: column; gap: var(--space-16); max-width: 560px; }
.fileinput {
  display: block;
  width: 100%;
  font: var(--type-small);
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: var(--space-12);
  box-shadow: var(--shadow-inset-border);
}
.fileinput::file-selector-button {
  font: var(--type-button);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps-tight);
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-pill);
  padding: var(--space-6) var(--space-16);
  margin-right: var(--space-12);
  cursor: pointer;
}
.photo-manager { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-16); }
.photo-manager__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
}
.photo-manager__item .photo { border-radius: var(--radius-md); }
.photo-manager__actions { display: flex; gap: var(--space-6); flex-wrap: wrap; }

/* ------------------------------------------------------- admin: featured riders */

.rider-manager { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(326px, 100%), 1fr)); gap: var(--space-16); align-items: start; }
.rider-manager__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  min-width: 0;
}
.rider-manager__link { font: var(--type-micro); color: var(--text-faint); word-break: break-all; }
.rider-manager__link a { color: inherit; }
.rider-manager__row { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }

.login { max-width: 420px; margin: 0 auto; padding: var(--space-80) var(--gutter); display: flex; flex-direction: column; gap: var(--space-16); }
.login p { margin: 0; font: var(--type-small); line-height: 1.5; color: var(--text-muted); }
.login__error { font: var(--type-small); color: var(--red-400); }

/* --------------------------------------------------------------- 404 */

.notfound { max-width: 640px; margin: 0 auto; padding: var(--space-80) var(--gutter); display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }

/* ------------------------------------------------------------ responsive

   The reference design is specified at 1440px and carries no breakpoints.
   These only fold the multi-column grids below tablet so the pages stay
   usable on a phone; nothing above 1024px is affected. */

@media (max-width: 1024px) {
  .regions-grid,
  .choices,
  .region-hero__grid,
  .region-main__grid,
  .trail-layout,
  .profile-hero__grid,
  .profile-best__grid,
  .profile-depots,
  .admin__grid { grid-template-columns: minmax(0, 1fr); }
  .sticky-rail, .trail-rail, .admin__preview { position: static; }
  .fact-strip { grid-template-columns: repeat(2, 1fr); }
  .riders-rail { --riders-per-view: 2; }
  .site-footer__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
}

@media (max-width: 720px) {
  .page-title { font-size: 34px; letter-spacing: -0.8px; }
  .hero__title { font-size: 38px; letter-spacing: -1px; }
  .hero { padding-top: var(--space-40); }
  .choice { padding: var(--space-24); }
  .page-title--46, .page-title--48, .page-title--44 { font-size: 32px; letter-spacing: -0.7px; }
  .grid-2, .fact-strip, .admin__pair, .admin__switches { grid-template-columns: minmax(0, 1fr); }
  .riders-rail { --riders-per-view: 1; }
  .filters { position: static; }
  .admin__depot-row { grid-template-columns: minmax(0, 1fr); }
  .trail-row { flex-direction: column; }
  .trail-row__aside { flex-direction: row; align-items: center; }

  /* The header is the one row that cannot wrap. min-width:0 + overflow-x on the nav means a long
     nav scrolls itself rather than widening the page. */
  .site-header__inner { gap: var(--space-12); }
  .wordmark { font-size: 20px; }
  .mainnav {
    gap: var(--space-12);
    margin-left: 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { font-size: var(--text-12); letter-spacing: 1px; white-space: nowrap; }
  .powered { gap: var(--space-8); }
  .powered__by { display: none; }
  .powered__mark { font-size: 13px; }

  .admin__head { flex-direction: column; align-items: stretch; }
  .admin__actions { flex-wrap: wrap; }
  .chip-rail, .chip-rail--tight { gap: var(--space-8); }
  .breadcrumb { flex-wrap: wrap; row-gap: var(--space-4); }
  .filters__count { margin-left: 0; }
}