/* Camino View official brand palette (brand sheet, approved 2026-10-16):
   Espresso ink, Ground Ivory and Sand, Santiago Red, and the route colors. */
:root {
  --ivory: #f8f0dd;
  --paper: #fffdf7;
  --sand: #e0c497;
  --sand-soft: #eee0c4;
  --ink: #221410;
  --espresso: #221410;
  --ink-soft: #5d5148;
  --red: #c30000;
  --blue: #5379a8;
  --sage: #7d9e91;
  --ochre: #c3b052;
  --terra: #d7704f;
  --purple: #886191;
  --rose: #e89988;
  --line: #ddd0b4;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Barlow", "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}
h1, h2, h3, .brand span {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.15;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 1.8rem; margin-top: 2rem; }
h3 { font-size: 1.35rem; }
a { color: var(--red); }
a:hover { text-decoration: none; }
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem 1rem;
  padding: 0.8rem 1.25rem;
  background: linear-gradient(180deg, var(--ivory), var(--sand-soft));
  border-bottom: 2px solid var(--sand);
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); font-size: 1.5rem; }
.brand img { border-radius: 50%; }
.site-header nav a { margin-left: 1.05rem; color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 500; }
.site-header nav a:hover { color: var(--red); }
main { max-width: 920px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.hero { text-align: center; padding: 2rem 0 1rem; }
.hero img { border-radius: 50%; }
.hero h1 { font-size: 3rem; margin: 1rem 0 0.5rem; }
.button {
  display: inline-block; background: var(--red); color: #fff;
  padding: 0.6rem 1.2rem; border-radius: 6px; text-decoration: none; margin: 0.25rem;
  font-weight: 600;
}
.button.ghost { background: transparent; color: var(--red); border: 2px solid var(--red); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 1rem 1.1rem;
  border-top: 4px solid var(--sand);
}
.card h3 { margin-top: 0.2rem; }
.card.wide { margin-bottom: 1rem; }
.facts { color: var(--ink-soft); font-size: 0.92rem; }
.guide table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.98rem; }
.guide th, .guide td { border: 1px solid var(--line); padding: 0.45rem 0.6rem; text-align: left; }
.guide th { background: var(--sand-soft); }
.guide tr:nth-child(even) td { background: var(--paper); }
.plan-box {
  background: var(--paper); border: 2px solid var(--sand); border-radius: 8px;
  padding: 1rem 1.2rem; margin: 1.5rem 0;
}
.plan-box .slot-tag {
  display: inline-block; font-size: 0.78rem; color: var(--ink-soft);
  border: 1px dashed var(--sand); border-radius: 4px; padding: 0.05rem 0.4rem; margin-left: 0.4rem;
}
.plan-box a[aria-disabled="true"] { color: var(--ink-soft); pointer-events: none; text-decoration: underline dotted; }
.signup {
  background: linear-gradient(180deg, var(--sand-soft), var(--ivory));
  border: 1px solid var(--sand); border-radius: 10px;
  padding: 1.4rem 1.5rem; margin: 2rem 0; text-align: center;
}
.signup form { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-top: 0.8rem; }
.signup input[type="email"] {
  font: inherit; padding: 0.55rem 0.8rem; border: 1px solid var(--sand);
  border-radius: 6px; min-width: 260px; background: #fff;
}
.signup button {
  font: inherit; background: var(--red); color: #fff; border: 0;
  padding: 0.55rem 1.1rem; border-radius: 6px; cursor: pointer; font-weight: 600;
}
.fine { font-size: 0.85rem; color: var(--ink-soft); }
.news-list { list-style: none; padding: 0; }
.news-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.date { color: var(--ink-soft); font-size: 0.9rem; }
.crumbs { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 1rem; }
.about-badge { float: right; border-radius: 50%; margin: 0 0 1rem 1rem; }
.site-footer {
  text-align: center; padding: 2rem 1rem 2.5rem;
  border-top: 2px solid var(--sand);
  background: linear-gradient(0deg, var(--ivory), var(--sand-soft));
}
.site-footer img { border-radius: 50%; }
/* Build 216: the old left:-9999px parking made WebKit treat the label
   as scrollable overflow, so app scrollers (the planner) could be
   dragged sideways into blank space on iOS. The clip pattern hides it
   without creating any overflow in any engine. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- interactive maps ---- */
.cv-map {
  height: 420px; border: 1px solid var(--sand); border-radius: 10px;
  margin: 1rem 0 0.4rem; z-index: 0; background: var(--sand-soft);
}
.cv-map.tall { height: 520px; }
.map-credit { font-size: 0.8rem; color: var(--ink-soft); margin: 0.2rem 0 1.2rem; }
.map-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.92rem; }
.map-legend .swatch { display: inline-block; width: 22px; height: 5px; border-radius: 3px; vertical-align: middle; margin-right: 0.35rem; }
.leaflet-popup-content { font-family: "Barlow", sans-serif; font-size: 0.95rem; }

/* ---- planner tool ---- */
.tool {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.2rem 1.3rem; margin: 1.2rem 0;
}
.tool .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem; }
.tool label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
.tool input, .tool select {
  width: 100%; font: inherit; padding: 0.5rem 0.6rem;
  border: 1px solid var(--sand); border-radius: 6px; background: #fff;
}
.tool .actions { margin-top: 1rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tool button {
  font: inherit; font-weight: 600; background: var(--red); color: #fff; border: 0;
  padding: 0.55rem 1.1rem; border-radius: 6px; cursor: pointer;
}
.tool button.secondary { background: transparent; color: var(--red); border: 2px solid var(--red); }
.plan-summary { font-size: 1.05rem; margin: 1rem 0 0.4rem; }
.plan-table { border-collapse: collapse; width: 100%; margin: 0.8rem 0; font-size: 0.96rem; }
.plan-table th, .plan-table td { border: 1px solid var(--line); padding: 0.4rem 0.55rem; text-align: left; }
.plan-table th { background: var(--sand-soft); }
.plan-table tr.rest td { background: var(--sand-soft); color: var(--ink-soft); font-style: italic; }
.plan-table tr.long td { background: #fbeae8; }
.budget-out { font-size: 1.05rem; }
@media print {
  .site-header, .site-footer, .tool .fields, .tool .actions, .signup, .no-print { display: none !important; }
  body { background: #fff; }
}

/* ---- quiz and FAQ ---- */
.quiz { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.3rem; margin: 1.2rem 0; }
.quiz fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.quiz legend { font-weight: 600; margin-bottom: 0.4rem; }
.quiz label { display: block; padding: 0.25rem 0; font-weight: 400; }
.quiz button { font: inherit; font-weight: 600; background: var(--blue); color: #fff; border: 0; padding: 0.55rem 1.1rem; border-radius: 6px; cursor: pointer; }
.quiz-result { margin-top: 1rem; font-size: 1.05rem; }
.faq-item { border-bottom: 1px solid var(--line); padding: 0.9rem 0; }
.faq-item h3 { margin: 0 0 0.35rem; }
.faq-item p { margin: 0.2rem 0; }

@media (max-width: 640px) {
  .hero h1 { font-size: 2.2rem; }
  h1 { font-size: 2rem; }
  .site-header nav a { margin-left: 0.7rem; }
  .about-badge { float: none; display: block; margin: 0 auto 1rem; }
  .cv-map { height: 340px; }
  .cv-map.tall { height: 420px; }
}

/* ---- v3 design pass: depth, sticky header, dark footer, explorer ---- */
::selection { background: rgba(195, 0, 0, 0.18); }
.site-header {
  position: sticky; top: 0; z-index: 600;
  background: rgba(248, 240, 221, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 14px rgba(34, 20, 16, 0.10);
  border-bottom: 1px solid var(--sand);
}
.route-ribbon { height: 6px; }
.hero { padding: 3rem 0 1.5rem; }
.hero h1 { font-size: 3.4rem; }
.hero p { max-width: 640px; margin-left: auto; margin-right: auto; }
.hero img { box-shadow: 0 10px 30px rgba(34, 20, 16, 0.25); }
.kicker {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem;
  font-weight: 700; color: var(--red); margin-bottom: 0.3rem;
}
.button { box-shadow: 0 3px 10px rgba(195, 0, 0, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(195, 0, 0, 0.28); text-decoration: none; }
.button.ghost { box-shadow: none; }
.card {
  border-top: 4px solid var(--rc, var(--sand));
  box-shadow: 0 2px 8px rgba(34, 20, 16, 0.07);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(34, 20, 16, 0.13); }
.guide th, .plan-table th { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.signup, .tool, .quiz { box-shadow: 0 2px 10px rgba(34, 20, 16, 0.07); }
.site-footer {
  background: var(--ink); color: var(--ivory);
  border-top: 4px solid var(--red);
}
.site-footer a { color: var(--sand); }
.site-footer .fine { color: #b3a68d; }
.site-footer img { box-shadow: 0 0 0 3px var(--sand); }
.cv-map { box-shadow: 0 4px 18px rgba(34, 20, 16, 0.13); border: 1px solid var(--sand); }
.explorer {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1rem 1.2rem 1.3rem; margin: 1.2rem 0;
  box-shadow: 0 4px 18px rgba(34, 20, 16, 0.08);
}
.explorer-ways { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.6rem; }
.explorer-way {
  font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; min-height: 40px;
  background: transparent; color: var(--ink); border: 2px solid var(--line);
  padding: 0.35rem 0.9rem; border-radius: 999px;
}
.explorer-way:hover { border-color: var(--ink); }
.explorer-way.active { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; }
.chip {
  background: var(--sand-soft); border: 1px solid var(--sand); border-radius: 999px;
  padding: 0.28rem 0.8rem; font-size: 0.92rem;
}
.profile-wrap { position: relative; margin-top: 0.6rem; }
.profile {
  width: 100%; height: auto; display: block;
  background: linear-gradient(180deg, #fffdf7, var(--sand-soft));
  border: 1px solid var(--line); border-radius: 8px;
}
.profile-tip {
  position: absolute; top: -6px; transform: translateX(-50%);
  background: var(--ink); color: var(--ivory); font-size: 0.82rem;
  padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap;
  display: none; pointer-events: none;
}
.stage-head { display: flex; align-items: center; justify-content: space-between; margin-top: 1.2rem; }
.stage-head h3 { margin: 0; }
.stage-reset {
  font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--red); border: 2px solid var(--red);
  padding: 0.35rem 0.9rem; border-radius: 999px;
}
.stage-reset:hover { background: var(--red); color: #fff; }
.stage-table { border-collapse: collapse; width: 100%; margin: 0.6rem 0 0; font-size: 0.96rem; }
.stage-table th, .stage-table td { border: 1px solid var(--line); padding: 0.42rem 0.55rem; text-align: left; }
.stage-table th { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.stage-table tbody tr { cursor: pointer; }
.stage-table tbody tr:hover td { background: var(--sand-soft); }
.stage-table tr.active td { background: #f0dfba; }
.stage-table tr.active td:first-child { box-shadow: inset 4px 0 0 var(--red); }
.stage-table td.gain { color: #22685a; font-weight: 600; }
.stage-table td.loss { color: var(--terra); font-weight: 600; }
a:focus-visible, button:focus-visible, .stage-row:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.stage-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-weight: 600; }
.stage-profile text { fill: var(--ink); font-family: "Barlow", sans-serif; }
.daystrip { display: flex; gap: 0; overflow-x: auto; list-style: none; margin: 1rem 0 1.4rem; padding: 0.4rem 0.2rem 0.6rem; }
.daystrip .ds-stop { position: relative; flex: 0 0 auto; min-width: 5.2rem; max-width: 11rem; padding: 0.9rem 0.7rem 0 0.2rem; border-top: 2px solid var(--line); }
.daystrip .ds-stop::before { content: ""; position: absolute; top: -5px; left: 0.2rem; width: 8px; height: 8px; border-radius: 50%; background: var(--paper, #fff); border: 2px solid var(--ink); }
.daystrip .ds-stop.ds-end::before { background: var(--ink); }
.daystrip .ds-name { display: block; font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.daystrip .ds-stop.ds-end .ds-name { font-weight: 700; }
.daystrip .ds-km { display: block; font-size: 0.82rem; opacity: 0.75; margin-top: 0.15rem; }
@media (max-width: 640px) {
  .hero h1 { font-size: 2.5rem; }
  .stage-table { font-size: 0.88rem; }
}

/* ---- carry-along pass: locate controls and mobile polish ---- */
.locate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.6rem 0 0.2rem; }
.locate-btn {
  font: inherit; font-weight: 600; cursor: pointer; min-height: 44px;
  background: var(--blue); color: #fff; border: 0; border-radius: 999px; padding: 0.5rem 1.1rem;
  box-shadow: 0 3px 10px rgba(83, 121, 168, 0.35);
}
.locate-btn:active { transform: translateY(1px); }
.locate-out { font-size: 0.95rem; color: var(--ink-soft); }
.gpx-link { margin-left: auto; font-weight: 600; font-size: 0.95rem; }
.tool input, .tool select, .signup input[type="email"] { font-size: 16px; }
.stage-table td, .stage-table th { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.site-header nav a { padding: 0.35rem 0.1rem; display: inline-block; }
@media (max-width: 640px) {
  body { font-size: 17px; }
  main { padding: 1rem 0.9rem 2.2rem; }
  .explorer { padding: 0.8rem 0.7rem 1rem; }
  .guide table, .plan-table, .stage-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stage-table thead th { position: sticky; top: 0; }
  .gpx-link { margin-left: 0; }
  .hero { padding: 2rem 0 1rem; }
  .stats .chip { font-size: 0.88rem; padding: 0.22rem 0.65rem; }
  .button { min-height: 44px; padding: 0.65rem 1.15rem; }
}

/* ---- full-screen map app (/map/) ---- */
.app-body { overscroll-behavior: none; }
.app-shell { position: fixed; inset: 0; background: var(--ivory); }
#app-map { position: absolute; inset: 0; }
.app-body .leaflet-top { top: 74px; }
.app-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; gap: 0.6rem;
  padding: calc(0.5rem + env(safe-area-inset-top)) 0.7rem 0.5rem;
  pointer-events: none;
}
.app-brand {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--espresso); color: var(--ivory); text-decoration: none;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.05rem;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(34,20,16,0.35);
  white-space: nowrap;
}
.app-brand img { border-radius: 50%; }
.app-chips { pointer-events: auto; display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: none; padding: 0.15rem 0; }
.app-chips::-webkit-scrollbar { display: none; }
.app-chip {
  font: inherit; font-weight: 600; font-size: 0.92rem; white-space: nowrap; cursor: pointer;
  background: rgba(255,255,255,0.94); color: var(--espresso);
  border: 0; border-bottom: 4px solid var(--rc); border-radius: 999px; padding: 0.42rem 0.85rem;
  box-shadow: 0 3px 10px rgba(34,20,16,0.22); min-height: 40px;
}
.app-chip.active { background: var(--espresso); color: var(--ivory); }
.app-locate {
  position: absolute; right: 12px; top: 128px; z-index: 1000;
  font: inherit; font-weight: 700; cursor: pointer; min-height: 44px;
  background: var(--blue); color: #fff; border: 0; border-radius: 999px; padding: 0.55rem 1.05rem;
  box-shadow: 0 4px 14px rgba(34,20,16,0.3);
}
.app-panel {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1000;
  max-height: 40dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--ivory); border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 24px rgba(34,20,16,0.28);
  padding: 0.8rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
}
.app-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; position: relative; padding-right: 50px; }
.app-panel-head h1 { font-size: 1.45rem; margin: 0; }
.app-stats { color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; }
.app-locate-out { margin: 0.25rem 0 0; font-weight: 600; }
.app-locate-out:empty { display: none; }
.app-profile-wrap { position: relative; margin-top: 0.4rem; }
#app-profile { width: 100%; height: 92px; display: block; background: linear-gradient(180deg, #fbf6ea, #f3e8d2); border-radius: 10px; touch-action: pan-y; }
.app-stages { display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: none; padding: 0.55rem 0 0.2rem; }
.app-ways { display: flex; gap: 0.45rem; overflow-x: auto; scrollbar-width: none; padding: 0.55rem 0 0; }
.app-ways::-webkit-scrollbar { display: none; }
.app-ways[hidden] { display: none; }
.app-stage.app-way.active { background: var(--espresso); color: var(--ivory); border-color: var(--espresso); }
.app-stages::-webkit-scrollbar { display: none; }
.app-stage {
  font: inherit; font-size: 0.9rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  background: #fff; color: var(--espresso); border: 1.5px solid #d8c9a8; border-radius: 999px;
  padding: 0.4rem 0.8rem; min-height: 40px;
}
.app-stage.active { background: var(--espresso); color: var(--ivory); border-color: var(--espresso); }
.app-links { margin: 0.5rem 0 0.2rem; font-weight: 600; }
.app-open-row { margin: 0.4rem 0 0.6rem; display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.app-pois { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding: 0.55rem 0 0.1rem; }
.app-pois::-webkit-scrollbar { display: none; }
.app-poi-chip {
  font: inherit; font-size: 0.88rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #fff; color: var(--ink-soft); border: 1.5px solid #d8c9a8; border-radius: 999px;
  padding: 0.32rem 0.7rem; min-height: 36px; opacity: 0.75;
}
.app-poi-chip .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.app-poi-chip.active { color: var(--espresso); border-color: var(--espresso); opacity: 1; }
.app-poi-out { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.92rem; }
.app-poi-out:empty { display: none; }
.leaflet-popup-content { font-family: Barlow, system-ui, sans-serif; font-size: 0.95rem; line-height: 1.45; }

/* ---- map app v2: bottom sheet, bigger targets, POI pins ---- */
.app-panel {
  max-height: none; height: 42dvh; overflow-y: auto;
  transition: height 0.3s ease; padding-top: 0.2rem;
}
.app-panel[data-state="peek"] { height: 118px; overflow-y: hidden; }
.app-panel[data-state="full"] { height: 82dvh; }
.app-panel[data-state="peek"] .app-profile-wrap,
.app-panel[data-state="peek"] .app-pois,
.app-panel[data-state="peek"] .app-stages,
.app-panel[data-state="peek"] .app-links,
.app-panel[data-state="peek"] .fine { display: none; }
.app-handle {
  display: flex; align-items: center; justify-content: center; position: relative;
  min-height: 40px; cursor: grab; touch-action: none; margin: -0.2rem -1rem 0; 
}
.app-grab { width: 52px; height: 6px; border-radius: 3px; background: #c9b489; }
.app-chevron {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; font-weight: 700; color: var(--espresso);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
}
.app-panel-head h1 { font-size: 1.68rem; }
.app-stats { font-size: 1.03rem; color: #4a382a; }
.app-locate-out { font-size: 1.03rem; line-height: 1.5; }
.app-chip { font-size: 1rem; min-height: 46px; padding: 0.55rem 1rem; }
.app-brand { min-height: 44px; font-size: 1.12rem; }
.app-locate { min-height: 54px; font-size: 1.08rem; padding: 0.7rem 1.35rem; top: 136px; }
.app-stage { font-size: 1rem; min-height: 46px; padding: 0.55rem 0.95rem; }
.app-poi-chip { min-height: 42px; font-size: 0.96rem; padding: 0.45rem 0.85rem; }
#app-profile { height: 110px; }
.app-body .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 21px; }
.poi-pin-wrap { background: transparent; border: none; }
.poi-pin {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2.5px solid #ffffff; box-shadow: 0 2px 8px rgba(34,20,16,0.45);
  font-size: 17px; line-height: 1; color: #ffffff;
}

/* ---- map app v2.1 fixes from live QA ---- */
.app-top .app-chip.active { background: #221410; color: #f8f0dd; border-bottom-color: #f8f0dd; }
.app-body .leaflet-touch .leaflet-bar a,
.app-body .leaflet-bar a.leaflet-control-zoom-in,
.app-body .leaflet-bar a.leaflet-control-zoom-out { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
.app-panel[data-state="peek"] .app-poi-out,
.app-panel[data-state="peek"] .app-locate-out { display: none; }

/* ---- MapLibre app controls ---- */
.maplibregl-ctrl-top-left { top: 76px; left: 10px; }
.maplibregl-ctrl-top-right { top: 76px; right: 10px; }
.maplibregl-ctrl-group { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(34,20,16,0.3); }
.maplibregl-ctrl-group button { width: 46px; height: 46px; }
.maplibregl-ctrl-group button span { transform: scale(1.25); }
.maplibregl-ctrl-attrib { font-size: 11px; background: rgba(255,255,255,0.75); border-radius: 8px; }
.app-town {
  width: 15px; height: 15px; border-radius: 50%;
  background: #f8f0dd; border: 2.5px solid #221410;
  box-shadow: 0 1px 5px rgba(34,20,16,0.4); cursor: pointer;
}
.app-hdot-el {
  width: 14px; height: 14px; border-radius: 50%;
  background: #c30000; border: 2.5px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.maplibregl-popup-content { font-family: Barlow, system-ui, sans-serif; font-size: 0.98rem; line-height: 1.45; border-radius: 12px; padding: 12px 14px; }
.app-readout { font-weight: 700; color: var(--blue); font-size: 0.98rem; }
.app-base { display: inline-flex; gap: 0; margin-top: 0.55rem; border: 1.5px solid var(--espresso); border-radius: 999px; overflow: hidden; }
.app-base button {
  font: inherit; font-weight: 700; font-size: 0.98rem; cursor: pointer; min-height: 42px;
  padding: 0.45rem 1.1rem; background: #fff; color: var(--espresso); border: 0;
}
.app-base button.active { background: var(--espresso); color: var(--ivory); }
.app-locate { top: 190px; }

/* ---- map app v3: dark sheet, compass, scrollable grade profile ---- */
.app-panel { background: linear-gradient(180deg, #2e1c13 0%, #221410 30%); color: var(--ivory); }
.app-panel-head h1 { color: var(--ivory); }
.app-stats { color: #d8c9a8; }
.app-locate-out { color: var(--ivory); }
.app-poi-out { color: #c9b489; }
.app-grab { background: #8a6f52; }
.app-chevron { color: var(--ivory); }
.app-stage { background: #3a251b; color: var(--ivory); border-color: #5a4232; }
.app-stage.active { background: var(--ivory); color: var(--espresso); border-color: var(--ivory); }
.app-poi-chip { background: #3a251b; color: #e8dcc0; border-color: #5a4232; }
.app-poi-chip.active { border-color: var(--ivory); color: #ffffff; }
.app-base { border-color: #d8c9a8; }
.app-base button { background: #3a251b; color: var(--ivory); }
.app-base button.active { background: var(--ivory); color: var(--espresso); }
.app-panel .app-links a { color: #f0c978; }
.app-panel .fine { color: #b39d78; }
.app-profile-wrap { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; border-radius: 10px; }
#app-profile { background: linear-gradient(180deg, #241611, #1c110c); border-radius: 10px; height: 118px; }
.app-profile-wrap .profile-tip { background: var(--ivory); color: var(--espresso); }
.app-compass {
  position: absolute; right: 12px; top: 258px; z-index: 1000;
  width: 60px; height: 60px; border-radius: 50%; cursor: pointer;
  background: rgba(34,20,16,0.9); border: 2px solid rgba(248,240,221,0.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(34,20,16,0.35); padding: 0; font: inherit;
}
.compass-dial { width: 30px; height: 30px; display: block; }
.compass-dial svg { width: 100%; height: 100%; display: block; }
.compass-txt { font-size: 0.66rem; font-weight: 700; color: var(--ivory); line-height: 1.1; white-space: nowrap; }
.app-town-wrap { display: flex; align-items: center; }
.app-town-dot {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  background: #f8f0dd; border: 2.5px solid #221410; box-shadow: 0 1px 5px rgba(34,20,16,0.4);
}
.app-town-label {
  margin-left: 5px; background: rgba(34,20,16,0.82); color: var(--ivory);
  font-size: 0.78rem; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
#app-map[data-band="mid"] .app-town-label, #app-map[data-band="near"] .app-town-label { opacity: 1; }
/* Numbered stage discs (build 56): the number lives inside the disc, and
   variant sets sit quieter alongside (ivory disc, route color ring). */
.app-town-num {
  position: relative; width: 24px; height: 24px; border-radius: 50%;
  background: #221410; border: 2px solid rgba(248,240,221,0.95);
  box-shadow: 0 1px 5px rgba(34,20,16,0.45);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.app-town-num .app-town-code {
  color: var(--ivory); font-family: "Barlow Condensed", sans-serif;
  font-weight: 600; font-size: 13px; line-height: 1;
}
.app-town-num .app-town-label { left: 27px; }
.app-town-num.app-town-var { width: 20px; height: 20px; background: var(--ivory); }
.app-town-num.app-town-var .app-town-code { color: var(--espresso); font-size: 11px; }
.app-town-num.app-town-var .app-town-label { left: 23px; }
.app-town-varwrap .app-town-dot { width: 10px; height: 10px; border-width: 2px; }
#app-map[data-band="mid"] .app-town-var .app-town-label,
#app-map[data-band="mid"] .app-town-varwrap .app-town-label { opacity: 0; }
#app-map[data-band="near"] .app-town-var .app-town-label,
#app-map[data-band="near"] .app-town-varwrap .app-town-label { opacity: 1; }
.app-endpoint {
  display: flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%; color: #fff;
  border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(34,20,16,0.5);
  font-size: 14px; line-height: 1;
}
.app-endpoint.start { background: #4c7a3f; }
.app-endpoint.finish { background: #c30000; }
.maplibregl-ctrl-group { background: rgba(34,20,16,0.9); }
.maplibregl-ctrl-group button { background: transparent; }
.maplibregl-ctrl-group button span { filter: invert(0.92) sepia(0.3); }
.app-stage-out { margin: 9px 0 0; font-weight: 600; color: var(--ivory); }
.town-svc { font-size: 1.02rem; }

/* ---- map app v4: glass top bar, translucent sheet, marker anchor fix ---- */
.app-top {
  background: rgba(34,20,16,0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 4px 18px rgba(34,20,16,0.3);
  padding: 8px 10px;
}
.app-brand-round {
  flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(248,240,221,0.9); display: block;
}
.app-brand-round img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-top .app-chip {
  background: rgba(248,240,221,0.14); color: var(--ivory);
  border: 1px solid rgba(248,240,221,0.4); box-shadow: none; backdrop-filter: none;
}
.app-top .app-chip.active, .app-top.app-chip.active {
  background: var(--ivory); color: var(--espresso); border-color: var(--ivory);
  box-shadow: 0 0 0 2px var(--rc, #c30000) inset;
}
.app-panel {
  background: rgba(34,20,16,0.7);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.app-panel[data-state="peek"] { height: 78px; max-height: 78px; }
.app-panel[data-state="peek"] .app-stats,
.app-panel[data-state="peek"] .app-stage-out { display: none; }
.app-town-wrap { position: relative; width: 15px; height: 15px; }
.app-town-label {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%); margin-left: 0;
}

/* ---- map app v5: Ninja-style bottom-right control stack ---- */
.app-locate {
  top: auto; bottom: calc(42dvh + 12px);
  width: 54px; height: 54px; border-radius: 50%; padding: 0;
  background: var(--ivory); color: var(--espresso);
  display: flex; align-items: center; justify-content: center;
  transition: bottom 0.3s ease;
}
.app-locate svg { width: 27px; height: 27px; display: block; }
.app-compass {
  top: auto; bottom: calc(42dvh + 76px);
  width: 54px; height: 54px; transition: bottom 0.3s ease;
}
.compass-dial { width: 26px; height: 26px; }
.compass-txt { font-size: 0.6rem; }

/* ---- map app v6: multi-select route dropdown (replaces the chip scroller) ---- */
.app-routes { pointer-events: auto; position: relative; flex: 1; min-width: 0; max-width: 340px; }
.app-routes-btn {
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  max-width: 100%; min-height: 46px; padding: 0.5rem 0.95rem;
  background: rgba(248,240,221,0.14); color: var(--ivory);
  border: 1px solid rgba(248,240,221,0.4); border-radius: 999px; box-shadow: none;
}
.app-routes-btn[aria-expanded="true"] { background: var(--ivory); color: var(--espresso); border-color: var(--ivory); }
.app-routes-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-routes-caret { font-size: 0.85rem; flex: none; }
.app-routes-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 1001;
  width: min(300px, 82vw); max-height: 62dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(34,20,16,0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(248,240,221,0.25); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(34,20,16,0.45);
  padding: 0.4rem;
}
.app-routes-panel[hidden] { display: none; }
.app-route-row {
  display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
  min-height: 48px; padding: 0.45rem 0.6rem; border-radius: 10px;
  color: var(--ivory); font-weight: 600; font-size: 1rem;
}
.app-route-row:active { background: rgba(248,240,221,0.12); }
.app-route-row input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin: 0; cursor: pointer; }
.app-route-row-all { border-bottom: 1px solid rgba(248,240,221,0.2); margin-bottom: 0.25rem; }
.app-route-row-all input[type="checkbox"] { accent-color: #f8f0dd; }
.app-route-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(248,240,221,0.35); }
.app-route-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- map app v7: Ninja teardown batch (N1 labels, N2 tap cards,
   N5 offline pill) ---- */
.app-route-label {
  font-family: "Barlow", sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em;
  color: #fff; text-shadow: 0 1px 3px rgba(34,20,16,0.7);
  padding: 3px 10px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.92);
  box-shadow: 0 2px 9px rgba(34,20,16,0.45); white-space: nowrap; pointer-events: none;
}
.cv-adopt {
  font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; margin-top: 7px;
  background: var(--espresso); color: var(--ivory); border: 0; border-radius: 999px;
  padding: 0.45rem 1.05rem; min-height: 40px;
}
.app-sync {
  pointer-events: none; margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 700; color: var(--ivory);
  background: rgba(34,20,16,0.45); border: 1px solid rgba(248,240,221,0.35);
  padding: 0.3rem 0.65rem; border-radius: 999px; white-space: nowrap;
}
.app-sync[hidden] { display: none; }
.app-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); flex: none; }
.app-sync.is-offline .app-sync-dot { background: var(--ochre); }

/* ---- map app v6: live position strip, search, richer place cards ---- */
.app-strip {
  position: absolute; left: 10px; right: 86px; z-index: 990;
  background: rgba(34,20,16,0.88);
  color: var(--ivory); border-radius: 12px; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 1px;
  box-shadow: 0 4px 16px rgba(34,20,16,0.35); pointer-events: none;
}
.app-strip[hidden] { display: none; }
.app-strip-main { font-weight: 700; font-size: 0.98rem; }
.app-strip-sub { font-size: 0.82rem; color: #d8c9a8; font-weight: 600; }
.app-strip.warn { background: rgba(140,20,20,0.92); }
.app-strip.warn .app-strip-sub { color: #ffd9d0; }
.app-search-btn {
  flex: none; width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(248,240,221,0.4); background: rgba(248,240,221,0.14); font-size: 1.05rem;
}
.app-search {
  position: absolute; top: 64px; left: 10px; right: 10px; z-index: 1100;
  background: rgba(34,20,16,0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 14px; padding: 10px; box-shadow: 0 10px 30px rgba(34,20,16,0.45);
}
.app-search[hidden] { display: none; }
.app-search input {
  width: 100%; font-size: 16px; padding: 11px 13px; border-radius: 10px;
  border: 1px solid #5a4232; background: #2e1c13; color: var(--ivory);
}
.app-search-results { display: flex; flex-direction: column; margin-top: 6px; }
.app-search-hit {
  display: flex; flex-direction: column; align-items: flex-start;
  background: transparent; border: 0; border-top: 1px solid rgba(248,240,221,0.14);
  color: var(--ivory); padding: 10px 6px; min-height: 48px; text-align: left; cursor: pointer; font: inherit;
}
.app-search-hit span { font-size: 0.8rem; color: #d8c9a8; }
.app-search-none { color: #d8c9a8; margin: 8px 4px 4px; }
.maplibregl-popup-content { font-size: 0.95rem; line-height: 1.45; border-radius: 12px; padding: 12px 14px; }
.maplibregl-popup-content a { font-weight: 700; }

/* ---- map app v7: mobile card instead of desktop popups ---- */
.app-card {
  position: absolute; left: 10px; right: 10px; z-index: 1050;
  background: var(--ivory); color: var(--espresso);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 34px rgba(34,20,16,0.45);
  animation: cv-slide-up 0.18s ease-out;
  /* Build 140, queue item 11: the card is bottom-anchored above the
     panel by JS, so a tall card grows upward. Cap its height so its
     top can never reach the top bar (62px tall, 72px leaves a gap);
     JS tightens this cap further by the live panel height, and the
     card body scrolls inside the cap so the close button, which sits
     on the card itself, stays put. */
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 72px);
}
.app-card[hidden] { display: none; }
.app-card-body { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@keyframes cv-slide-up { from { transform: translateY(14px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.app-card-x {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(34,20,16,0.55); color: #fff; font-size: 0.95rem; line-height: 1;
}
.cv-head {
  color: #fff; font-weight: 700; font-size: 0.92rem;
  padding: 10px 46px 10px 14px; letter-spacing: 0.01em;
}
.cv-body { padding: 14px 16px 16px; }
.cv-title { display: block; font-size: 1.22rem; line-height: 1.2; margin-bottom: 4px; }
.cv-row { font-size: 0.98rem; margin-top: 3px; }
/* Fact grid (build 227): place facts as infographic tiles,
   small caps label over a strong value, shared by the map app
   cards and the guide map cards. */
.cv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 7px; margin: 10px 0 2px; }
.cv-fact { background: #fff; border: 1px solid rgba(34,20,16,0.09); border-radius: 10px; padding: 7px 10px 8px; }
.cv-fact span { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #8a7a63; margin-bottom: 2px; }
.cv-fact strong { display: block; font-size: 1rem; font-weight: 650; line-height: 1.18; color: var(--espresso); }
.cv-fine { font-size: 0.7rem; opacity: 0.55; margin-top: 5px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cv-chip { font-size: 0.72rem; font-weight: 600; background: rgba(83,121,168,0.13); color: #33506e; border-radius: 999px; padding: 3px 9px; text-transform: capitalize; }
.cv-addr { margin-top: 9px; font-size: 0.86rem; color: #5d4c3a; }
.cv-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cv-btn, .app-card-body .cv-adopt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 10px 20px; border-radius: 999px; border: 0;
  background: var(--espresso); color: var(--ivory);
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
}
.app-build { margin: 2px 0 0; font-size: 0.68rem; opacity: 0.55; text-align: right; }

/* Freshness reports (build 154): the stamp, its pilgrim count line,
   the quiet closed-or-gone link, and the thanks line on place cards. */
/* Freshness block, compact footer form (build 234, Tyler: the
   report buttons took up way too much space in the card). Small
   ghost pills in one row at the bottom of the card, stamps at
   reading size, nothing full width or full height. */
.cv-fresh { margin-top: 11px; border-top: 1px solid rgba(34,20,16,0.14); padding-top: 8px; }
.cv-fresh-stamp { font-weight: 700; color: #1d5c2e; font-size: 0.86rem; }
.cv-fresh-stamp.warn { color: var(--red); }
.cv-fresh-count { font-size: 0.78rem; opacity: 0.75; }
.cv-fresh-thanks { font-weight: 700; font-size: 0.84rem; }
.cv-fresh-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.cv-fresh-btns button {
  font: inherit; font-size: 0.74rem; font-weight: 600; line-height: 1.25;
  padding: 5px 10px; min-height: 0; border-radius: 999px;
  border: 1.5px solid rgba(34,20,16,0.35); background: transparent;
  color: var(--espresso); text-decoration: none; cursor: pointer; box-shadow: none;
}
.cv-fresh-btns button.cv-fresh-closed { color: var(--red); border-color: rgba(195,0,0,0.4); }
/* Place photos on cards (build 234 test): one openly licensed
   photo under the card head, photographer's credit in fine print. */
.cv-photo { display: block; width: 100%; height: 148px; object-fit: cover; }
.cv-credit { font-size: 0.62rem; opacity: 0.55; margin-bottom: 3px; }
.cv-fresh button[disabled] { opacity: 0.55; cursor: default; }

/* Freshness reports in the guide explorers (build 155, slice C): the
   same block on guide place cards, with the guide's own button style. */
.gm-fresh .gm-btn { font: inherit; cursor: pointer; }
.gm-fresh button[disabled] { opacity: 0.55; cursor: default; }

/* While the map is moving, iOS recomputes every backdrop blur on every
   frame over the repainting canvas, which murders pinch zoom. The glass
   comes back the moment the map settles. */
body.cv-moving .app-top, body.cv-moving .app-panel, body.cv-moving .app-strip,
body.cv-moving .app-card, body.cv-moving .app-routes-panel, body.cv-moving .app-search {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* Build 30: no backdrop blur anywhere on the map page. The frosted glass
   cost more than it was worth on phone GPUs; the translucent solids
   carry the look on their own. */
.app-top, .app-panel, .app-strip, .app-card, .app-routes-panel, .app-search {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* ---- map style fold-out (build 42) ---- */
.app-style-btn {
  position: absolute; right: 12px; z-index: 1000;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ivory); color: var(--espresso);
  box-shadow: 0 4px 14px rgba(34,20,16,0.3);
  display: flex; align-items: center; justify-content: center;
  transition: bottom 0.3s ease;
}
.app-style-btn svg { width: 26px; height: 26px; display: block; }
.app-style-menu {
  position: absolute; right: 12px; z-index: 1001;
  display: flex; flex-direction: column; gap: 6px;
  transition: bottom 0.3s ease;
}
.app-style-menu[hidden] { display: none; }
.app-style-menu button {
  font: inherit; font-weight: 700; cursor: pointer;
  min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 999px;
  border: 1px solid rgba(248,240,221,0.35);
  background: rgba(34,20,16,0.92); color: var(--ivory);
  box-shadow: 0 4px 14px rgba(34,20,16,0.3);
}
.app-style-menu button.active { background: var(--ivory); color: var(--espresso); border-color: var(--ivory); }
.app-style-menu #app-pack-btn { font-size: 0.82rem; font-weight: 600; max-width: 270px; white-space: normal; line-height: 1.35; }

/* ---- places fold-out (build 44) ---- */
.app-poi-btn {
  position: absolute; right: 12px; z-index: 1000;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ivory); color: var(--espresso);
  box-shadow: 0 4px 14px rgba(34,20,16,0.3);
  display: flex; align-items: center; justify-content: center;
  transition: bottom 0.3s ease;
}
.app-poi-btn svg { width: 26px; height: 26px; display: block; }
.app-poi-menu {
  position: absolute; right: 78px; z-index: 1001;
  width: min(268px, 74vw);
  background: rgba(34,20,16,0.94); color: var(--ivory);
  border-radius: 16px; padding: 12px;
  box-shadow: 0 12px 30px rgba(34,20,16,0.4);
  transition: bottom 0.3s ease;
}
.app-poi-menu[hidden] { display: none; }
.app-poi-menu-head { position: relative; padding-right: 46px; }
.app-poi-x {
  position: absolute; top: -4px; right: 0;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(248,240,221,0.16); color: var(--ivory); font-size: 0.9rem; line-height: 1;
}
.app-poi-menu .app-pois { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; padding: 0; }
.app-poi-menu .app-poi-out { margin: 10px 0 0; font-size: 0.82rem; line-height: 1.45; opacity: 0.85; }

/* ---- fold-out menus must fit the screen (build 46) ---- */
.app-style-menu, .app-poi-menu { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---- places menu header + witness outline (build 49) ---- */
.app-poi-menu { }
.app-poi-menu-head {
  font-weight: 700; font-size: 0.95rem; color: var(--ivory);
  margin: 0 0 10px; letter-spacing: 0.01em;
}

/* Homepage heroes (build 55): photo header, then the live map, both full bleed. */
html, body { overflow-x: clip; }

/* ---- Waymark restyle (builds 59-60): the map dressed as trail signage,
   matched to the approved mockup. Stage towns are chunky granite squares
   like the mojon stones themselves, the focused stage in signal yellow;
   the panel is sign blue; controls are white squares with blue borders
   and hard offset shadows. Panels are translucent solids only, no
   backdrop blur (build 30 rule still holds). */
:root { --sign-blue: #003da5; --sign-deep: #0a2a5e; --sign-yellow: #ffcc00; }
.app-top { background: rgba(0,45,114,0.95); }
.app-panel { background: rgba(0,45,114,0.94); }
.app-panel-head h1 { color: #ffffff; }
.app-stats { color: #cfe0ff; }
.app-panel .fine { color: #a9c2ee; }
.app-panel .app-links a { color: var(--sign-yellow); }
.app-grab { background: rgba(255,255,255,0.55); }
.app-strip { background: rgba(34,20,16,0.84); }
.app-routes-panel { background: rgba(10,42,94,0.96); }
.app-search { background: rgba(10,42,94,0.96); }
.app-search input { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); }
.app-poi-menu { background: rgba(10,42,94,0.96); }
.app-poi-menu .app-poi-out { color: #cfe0ff; }
.app-style-menu button { background: rgba(10,42,94,0.94); border-radius: 12px; }
.app-style-menu button.active { background: var(--sign-yellow); color: var(--espresso); border-color: var(--sign-yellow); }
.app-stage { background: rgba(255,255,255,0.14); color: #ffffff; border-color: rgba(255,255,255,0.45); }
.app-stage.active { background: var(--sign-yellow); color: var(--espresso); border-color: var(--sign-yellow); }
.app-stage.app-way.active { background: #ffffff; color: var(--sign-blue); border-color: #ffffff; }
.app-chip.active { background: var(--sign-blue); color: var(--ivory); }
.app-poi-chip { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); color: #ffffff; }
.app-poi-chip.active { background: var(--sign-yellow); border-color: var(--sign-yellow); color: var(--espresso); }
#app-profile { background: linear-gradient(180deg, #0d2f66, #0a2450); }
.app-town-num {
  width: 30px; height: 30px; border-radius: 9px;
  background: #857e6f; border: 2.5px solid #ffffff;
}
.app-town-num .app-town-code { color: #ffffff; font-size: 15px; }
.app-town-num .app-town-label { left: 34px; }
.app-town-num.app-town-sel { background: var(--sign-yellow); }
.app-town-num.app-town-sel .app-town-code { color: var(--espresso); }
.app-town-num.app-town-var {
  width: 24px; height: 24px; border-radius: 50%;
  background: #ffffff; border-color: var(--sign-blue);
}
.app-town-num.app-town-var .app-town-code { color: var(--sign-blue); font-size: 11.5px; }
.app-town-num.app-town-var .app-town-label { left: 28px; }
.app-town-label {
  background: transparent; color: var(--sign-deep);
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(248,240,221,0.95), 0 0 7px rgba(248,240,221,0.85);
  padding: 0 2px;
}
.app-compass { background: rgba(0,45,114,0.94); border-radius: 14px; border-color: #ffffff; box-shadow: 3px 3px 0 rgba(10,42,94,0.85); }
.app-locate, .app-poi-btn, .app-style-btn {
  background: #ffffff; color: var(--sign-blue);
  border: 2.5px solid var(--sign-blue); border-radius: 14px;
  box-shadow: 3px 3px 0 rgba(10,42,94,0.85);
}
.app-search-btn {
  width: 42px; height: 42px; border-radius: 12px;
  background: #ffffff; color: var(--sign-blue);
  border: 2.5px solid var(--sign-blue);
  box-shadow: 2px 2px 0 rgba(10,42,94,0.85);
  display: flex; align-items: center; justify-content: center;
}
.home-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: -1.5rem; height: min(74dvh, 660px); min-height: 400px; overflow: hidden; background: var(--espresso); }
.home-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 36%; }
.home-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,20,16,0.22) 0%, rgba(34,20,16,0) 36%, rgba(34,20,16,0.66) 100%); }
.home-hero-inner { position: absolute; left: 0; right: 0; bottom: 30px; color: var(--ivory); }
.home-hero-inner .wrap { max-width: 920px; margin: 0 auto; padding: 0 1.25rem; }
.home-hero h1 { color: var(--ivory); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.02; margin: 0 0 8px; text-shadow: 0 2px 18px rgba(34,20,16,0.45); }
.home-hero p.lede { font-size: 1.13rem; max-width: 560px; margin: 0 0 14px; text-shadow: 0 1px 10px rgba(34,20,16,0.5); }
.home-hero .button { background: var(--ivory); color: var(--espresso); box-shadow: 0 3px 12px rgba(34,20,16,0.35); }
.home-hero .button.ghost { background: transparent; color: var(--ivory); border: 2px solid var(--ivory); box-shadow: none; }
.home-hero-credit { position: absolute; right: 12px; bottom: 8px; font-size: 0.72rem; color: rgba(248,240,221,0.75); margin: 0; }
.map-bar { width: 100vw; margin-left: calc(50% - 50vw); background: var(--espresso); color: var(--ivory); }
.map-bar .wrap { max-width: 920px; margin: 0 auto; padding: 0.55rem 1.25rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.map-bar .t { font-family: "Barlow Condensed", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.95rem; }
.map-bar a { color: var(--ivory); }
.map-hero { width: 100vw; margin-left: calc(50% - 50vw); border-top: 1px solid rgba(34,20,16,0.3); border-bottom: 1px solid rgba(34,20,16,0.3); }
.map-hero iframe { display: block; width: 100%; height: 84dvh; min-height: 480px; border: 0; }

/* ============================================================
   SITE WAYMARK (2026-10-27, build 71)
   The site takes the map's signage language at reading volume
   (mockup approved 2026-10-26): ivory ground stays,
   sign blue carries headers, links and labels in condensed caps,
   granite squares carry stage numbers, buttons go square with
   blue borders and hard shadows, signal yellow stays rationed
   to the active stage and the primary action.
   ============================================================ */
h1 { color: #0a2a5e; }
h2 { color: #003da5; text-transform: uppercase; letter-spacing: 0.045em; }
h3 { color: #0a2a5e; }
a { color: #003da5; }
.site-header { border-bottom: 3px solid #003da5; }
.brand span { color: #003da5; text-transform: uppercase; letter-spacing: 0.05em; }
.site-header nav a { color: #0a2a5e; font-weight: 600; }
.site-header nav a:hover { color: #003da5; text-decoration: underline; }
.button {
  background: #003da5; color: #fff; border: 2.5px solid #0a2a5e;
  border-radius: 10px; box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.85);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.button:hover { transform: translateY(-1px); box-shadow: 4px 4px 0 rgba(10, 42, 94, 0.85); text-decoration: none; }
.button.ghost { background: transparent; color: #003da5; border: 2.5px solid #003da5; box-shadow: none; }
.home-hero .button { background: #ffcc00; color: #221410; border: 2.5px solid #0a2a5e; box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.9); }
.home-hero .button.ghost { background: rgba(255, 255, 255, 0.92); color: #0a2a5e; border: 2.5px solid #0a2a5e; box-shadow: none; }
.map-bar { background: #0a2a5e; }
.stage-table th { background: #003da5; border-color: #0a2a5e; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }
.stage-table tbody td:first-child {
  background: #857e6f; color: #fff; font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; font-size: 1.05rem; text-align: center; border-color: #6f695c;
}
.stage-table tbody tr:hover td { background: #e8eefb; }
.stage-table tbody tr:hover td:first-child { background: #857e6f; }
.stage-table tr.active td { background: #dbe6fb; }
.stage-table tr.active td:first-child { background: #ffcc00; color: #221410; box-shadow: none; }
.site-footer { background: #0a2a5e; }

/* ---- SITE WAYMARK 2 (2026-10-27, build 78): cards, planner, quiz, FAQ ---- */
.card {
  border: 1.5px solid rgba(10, 42, 94, 0.35); border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.16);
}
.card:hover { transform: none; box-shadow: 4px 4px 0 rgba(10, 42, 94, 0.32); }
.tool {
  border: 2.5px solid #0a2a5e; border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(10, 42, 94, 0.85);
}
.tool label {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.05em; color: #003da5; font-size: 1rem;
}
.tool input, .tool select { border: 2px solid rgba(0, 61, 165, 0.45); border-radius: 8px; }
.tool button {
  background: #003da5; color: #fff; border: 2.5px solid #0a2a5e; border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.85); text-transform: uppercase; letter-spacing: 0.04em;
}
.tool button.secondary { background: transparent; color: #003da5; border: 2.5px solid #003da5; box-shadow: none; }
.plan-table th { background: #003da5; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; border-color: #0a2a5e; }
.plan-table tr.rest td { background: #e8eefb; }
.quiz { border: 2.5px solid #0a2a5e; border-radius: 12px; box-shadow: 4px 4px 0 rgba(10, 42, 94, 0.85); }
.quiz legend {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.05em; color: #003da5; font-size: 1.1rem;
}
.quiz button {
  background: #003da5; border: 2.5px solid #0a2a5e; border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.85); text-transform: uppercase; letter-spacing: 0.04em;
}
.guide th { background: #dbe6fb; color: #0a2a5e; text-transform: uppercase; letter-spacing: 0.03em; }
.faq-item h3::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 0.55rem;
  background: #857e6f; border-radius: 2px; vertical-align: baseline;
}

/* ---- Plan mode (build 81): mode tabs, plan form, day list, night badges ---- */
.app-mode-tabs { display: flex; gap: 8px; margin: 10px 0 2px; }
.app-mode-tab {
  flex: 1; padding: 8px 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  border: 2.5px solid rgba(255, 255, 255, 0.55);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.app-mode-tab.active { background: #ffcc00; border-color: #0a2a5e; color: #221410; box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.85); }
/* minmax(0, 1fr), not 1fr: a plain 1fr track cannot shrink below its
   item's min-content, and a select's min-content is its longest option.
   Build 204's town options ("Name, km, service glyphs") are ~288px
   each, which forced this grid, and the whole planner column above it,
   to 584px on a 390px phone (build 205 fix). */
.app-plan-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.app-plan-fields label {
  display: block; min-width: 0; font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 13px; color: #a9c2ee;
}
.app-plan-fields select, .app-plan-fields input {
  width: 100%; min-width: 0; margin-top: 3px; padding: 8px; border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.94);
  color: #221410; font: inherit; font-size: 15px;
}
.app-plan-out { color: #cfe0ff; font-weight: 600; margin: 10px 0 4px; }
.app-plan-days { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.app-plan-badge {
  position: absolute; top: -8px; right: -8px; z-index: 3;
  min-width: 18px; height: 18px; padding: 0 3px; border-radius: 6px;
  background: #ffcc00; color: #221410; border: 2px solid #0a2a5e;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 12px; font-weight: 700; line-height: 15px; text-align: center;
}

/* Profile windowed build: the graph renders to its own window, no
   sideways scroll; zoom controls sit in its top right corner. */
.app-profile-wrap { overflow: hidden; }
#app-profile { touch-action: none; }
.app-prof-zoom { position: absolute; top: 6px; right: 6px; display: flex; gap: 5px; z-index: 3; }
.app-prof-zoom button { width: 30px; height: 30px; border-radius: 8px; border: 2px solid #0a2a5e; background: #ffffff; color: #0a2a5e; font: 700 16px/1 "Barlow", sans-serif; box-shadow: 2px 2px 0 #0a2a5e; cursor: pointer; padding: 0; }
#app-prof-reset { display: none; font-size: 14px; }
.app-profile-wrap.is-zoomed #app-prof-reset { display: block; }

/* App-wide responsive and readability pass (same standard as the
   profile rebuild): on wide screens the sheet docks as a right-hand
   column instead of stretching wall to wall, cards and search match
   it, and the small print comes up a size everywhere. */
.app-strip-sub { font-size: 0.9rem; }
.cv-head { font-size: 1rem; }
.app-search-hit span { font-size: 0.88rem; }
.app-stage-out { line-height: 1.5; }
.app-plan-days button { font-size: 1rem; line-height: 1.4; }
#app-poi-menu { max-height: calc(100dvh - 190px); overflow-y: auto; }
@media (min-width: 900px) {
  #app-panel { left: auto; width: min(620px, 46vw); border-radius: 18px 0 0 0; }
  .app-card { left: auto; width: min(600px, calc(100vw - 20px)); }
  .app-search { left: auto; width: min(520px, calc(100vw - 20px)); }
  .app-strip { left: auto; width: min(620px, 46vw); }
}

/* Planner shortcut in the top bar: a labeled pill in the control
   family, signal yellow while Plan mode is on. */
.app-plan-btn {
  /* Build 215: margin-left auto anchors Plan (and Search after it)
     to the top bar's right edge. The routes block is flex 1 but
     capped at 340px, so on desktop the leftover bar width used to
     sit empty on the right and the two buttons floated mid-bar. */
  pointer-events: auto; flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 13px; border-radius: 12px; cursor: pointer;
  background: #ffffff; color: var(--sign-blue);
  border: 2.5px solid var(--sign-blue); box-shadow: 2px 2px 0 rgba(10,42,94,0.85);
  font-family: "Barlow Condensed", sans-serif; font-size: 1.08rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; line-height: 1;
}
.app-plan-btn.active { background: #ffcc00; }

/* Panel dressing: the active route colors the sheet (top stripe,
   title bullet, grab pill), a small route photo sits in the head, and
   the collapsed peek strip keeps the current stage or plan in view. */
#app-panel { border-top: 4px solid var(--rc, #ffcc00); }
#app-title::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--rc, #ffcc00); margin-right: 9px; }
.app-grab { background: var(--rc, #d8c9a8); }
.app-peek-stage { display: none; }
.app-panel[data-state="peek"] .app-peek-stage:not([hidden]) { display: block; margin: 3px 0 0; font-weight: 700; color: #ffcc00; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-panel[data-state="peek"]:has(.app-peek-stage:not([hidden])) .app-stats,
.app-panel[data-state="peek"]:has(.app-peek-stage:not([hidden])) .app-readout { display: none; }

/* The offline status lives in the layers menu now, under the pack
   downloads where it belongs, instead of taking top bar space. */
.app-style-menu .app-sync { margin: 6px 8px 4px; margin-left: 8px; align-self: flex-start; }

/* Slim sheet: the peek is a one-line strip now, and one more swipe
   down hides the sheet entirely behind a floating Stages button. */
.app-panel { transition: height 0.3s ease, transform 0.3s ease; }
.app-panel[data-state="peek"] { height: calc(84px + env(safe-area-inset-bottom)); }
.app-panel[data-state="peek"] .app-handle { min-height: 26px; }
.app-panel[data-state="peek"] .app-panel-head h1 { font-size: 1.42rem; }
.app-panel[data-state="peek"] .app-stats,
.app-panel[data-state="peek"] .app-readout { display: none; }
.app-panel[data-state="hidden"] { transform: translateY(calc(100% + 16px)); }
.app-sheet-btn {
  position: absolute; left: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 950;
  display: inline-flex; align-items: center; gap: 5px; height: 44px; padding: 0 16px;
  border-radius: 12px; cursor: pointer; background: #ffffff; color: var(--sign-blue);
  border: 2.5px solid var(--sign-blue); box-shadow: 3px 3px 0 rgba(10,42,94,0.85);
  font-family: "Barlow Condensed", sans-serif; font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.app-sheet-btn[hidden] { display: none; }
@media (min-width: 900px) {
  .app-panel[data-state="hidden"] { transform: translateX(calc(100% + 16px)); }
}

/* Weather strip (build 133, queue item 6): current conditions at the
   walker position and the next stage town, plus the fire season link. */
.app-weather {
  margin: 0.35rem 0 0; padding: 0.5rem 0.65rem; border-radius: 10px;
  background: rgba(248,240,221,0.12); border: 1.5px solid rgba(248,240,221,0.35);
  font-size: 0.98rem; line-height: 1.45; color: var(--ivory);
}
.app-weather[hidden] { display: none; }
.app-fire { margin: 0.4rem 0 0; font-size: 0.92rem; }
.app-fire[hidden] { display: none; }
.app-fire a { color: var(--sign-yellow); font-weight: 600; }

/* Information panel chrome: an X closes the fixed panel, and the
   floating button that reopens it is labeled Info with an i badge. */
.app-panel { padding-top: 0.65rem; }
/* Build 216 (Tyler): the X sat mid-header, baseline-aligned with the
   stats line once the head wrapped. It is out of the flow now, pinned
   to the panel's top right corner, level with the title. */
.app-panel-x {
  position: absolute; top: -2px; right: 0; width: 38px; height: 38px;
  border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: rgba(248,240,221,0.14); color: var(--ivory);
  border: 2px solid rgba(248,240,221,0.5); font-size: 1.35rem; line-height: 1; font-weight: 600;
}
.app-sheet-btn-i {
  width: 20px; height: 20px; border-radius: 50%; border: 2.2px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 800; text-transform: none; letter-spacing: 0;
}

/* Weather button and forecast card (build 218, Tyler): a floating
   pill stacked above the Info button in the same bottom left
   cluster, showing the weather where you are (GPS when walking,
   the map center otherwise). It hides while the panel is fully
   open on phone widths, where the panel's own weather strip
   already shows current conditions. Tap opens the forecast card:
   now, the next hours, the next days. */
.app-wx-btn {
  position: absolute; left: 12px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 950;
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px;
  border-radius: 999px; cursor: pointer; background: #ffffff; color: var(--sign-blue);
  border: 2.5px solid var(--sign-blue); box-shadow: 3px 3px 0 rgba(10,42,94,0.85);
  font-family: "Barlow Condensed", sans-serif; font-size: 1.12rem; font-weight: 700; letter-spacing: 0.04em;
}
.app-wx-btn[hidden] { display: none; }
.app-wx-btn #app-wx-ico { font-size: 1.25rem; line-height: 1; }
.wx-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wx-now-ico { font-size: 2rem; line-height: 1; }
.wx-now-temp { font-family: "Barlow Condensed", sans-serif; font-size: 2rem; font-weight: 700; color: var(--sign-blue); }
.wx-sub { margin: 2px 0 0; color: #5a4638; font-size: 0.95rem; }
.wx-h { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: 0.98rem; color: var(--sign-blue); margin: 14px 0 6px; }
.wx-hours { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.wx-hour { flex: 0 0 auto; min-width: 52px; text-align: center; background: rgba(0,61,165,0.07); border-radius: 10px; padding: 6px 4px; }
.wx-hour-t { display: block; font-size: 0.8rem; font-weight: 700; color: #5a4638; }
.wx-hour-i { display: block; font-size: 1.15rem; margin: 2px 0; }
.wx-hour-tt { display: block; font-weight: 700; }
.wx-hour-r { display: block; font-size: 0.78rem; color: #5379a8; }
.wx-day { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(34,20,16,0.1); }
.wx-day-n { flex: 0 0 74px; font-weight: 700; }
.wx-day-i { font-size: 1.15rem; }
.wx-day-r { flex: 0 0 44px; font-size: 0.85rem; color: #5379a8; }
.wx-day-t { margin-left: auto; font-weight: 600; white-space: nowrap; }

/* Fork markers and fork cards (build 219): the marker element is
   exactly 30px square so the diamond stays anchored on the fork
   point; the label is absolutely positioned and takes no layout
   space inside the element. */
.cv-fork { position: relative; width: 30px; height: 30px; cursor: pointer; }
.cv-fork-dia {
  position: absolute; left: 50%; top: 50%; width: 17px; height: 17px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--sign-yellow); border: 2.5px solid var(--espresso); border-radius: 4px;
  box-shadow: 0 1px 5px rgba(34,20,16,0.5);
}
.cv-fork-y {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 0.92rem;
  color: var(--espresso); pointer-events: none;
}
.cv-fork-lab {
  position: absolute; left: 33px; top: 50%; transform: translateY(-50%);
  background: rgba(34,20,16,0.82); color: var(--ivory);
  font-size: 0.78rem; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  white-space: nowrap; pointer-events: none;
}
/* Picked spot bar (build 220, Tyler, after Wise Pilgrim's top bar,
   in our own idiom): when a place or stage town is picked, a slim
   bar under the top bar carries its route position at a glance:
   how far from the start, how far to Santiago, and where it sits
   relative to you when we know where you are. */
.app-spotbar {
  position: absolute; left: 10px; right: 10px; top: calc(70px + env(safe-area-inset-top)); z-index: 940;
  display: flex; align-items: stretch; gap: 10px;
  background: var(--ivory); color: var(--espresso); border-radius: 14px;
  box-shadow: 0 8px 22px rgba(34,20,16,0.35); padding: 8px 12px;
}
.app-spotbar[hidden] { display: none; }
.app-spot-cell { display: flex; flex-direction: column; justify-content: center; flex: 0 0 auto; }
.app-spot-right { text-align: right; }
.app-spot-lab { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #857e6f; }
.app-spot-num { font-family: "Barlow Condensed", sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--sign-blue); white-space: nowrap; }
.app-spot-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; border-left: 1.5px solid rgba(34,20,16,0.12); border-right: 1.5px solid rgba(34,20,16,0.12); padding: 0 8px; }
.app-spot-name { font-weight: 700; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-spot-rel { font-size: 0.85rem; color: #5a4638; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cv-fork-opt { border: 1.5px solid rgba(34,20,16,0.18); border-radius: 12px; padding: 9px 11px; margin-top: 9px; }
.cv-fork-opt.is-on { border-color: var(--sign-blue); background: rgba(0,61,165,0.06); }
.cv-fork-name { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.12rem; color: var(--sign-blue); }
.cv-fork-now { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: var(--sign-yellow); color: var(--espresso); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.cv-fork-meta { margin: 1px 0 4px; font-weight: 600; font-size: 0.92rem; color: #5a4638; }
.cv-fork-line { margin: 3px 0 0; font-size: 0.95rem; line-height: 1.45; }

/* Card text scaffolding (build 221): the fork and weather cards
   used .cv-card-h and .cv-card-p with no rules at all, so their
   text sat flush on the card edge while place cards (which use
   .cv-head and .cv-body) were padded. One padded wrapper now
   serves every card built on those classes. */
.cv-pad { padding: 16px 18px 18px; }
.cv-card-h {
  font-family: "Barlow Condensed", sans-serif; font-size: 1.42rem; font-weight: 700;
  color: var(--deep-blue, #0a2a5e); line-height: 1.15; margin: 0 42px 8px 0;
}
.cv-card-p { margin: 0 0 8px; font-size: 0.98rem; line-height: 1.5; }
.wx-ic { width: 22px; height: 22px; display: inline-block; vertical-align: middle; }
.wx-now-ico .wx-ic { width: 40px; height: 40px; }
.wx-hour-i .wx-ic { width: 21px; height: 21px; }
.wx-drop { width: 11px; height: 11px; display: inline-block; vertical-align: -1px; margin-right: 2px; }
.app-wx-btn #app-wx-ico .wx-ic { width: 21px; height: 21px; vertical-align: -4px; }
.wx-day { gap: 9px; }
.wx-day-n { flex: 0 0 62px; }
.wx-day-i { flex: 0 0 24px; display: flex; align-items: center; }
.wx-day-r { flex: 0 0 56px; white-space: nowrap; }
.wx-walk-t { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-rest { font-weight: 400; font-size: 0.85rem; color: #5a4638; }

/* ==== SITE WAYMARK 3 (build 129): every page, one system ====
   Middle volume: guide-family pages bold, written pages calm.
   This block extends builds 71/78 to the components they missed. */

/* Signup: the component on nearly every page gets the full treatment */
.signup {
  background: #0a2a5e; border: 2.5px solid #003da5; border-radius: 10px;
  color: #f8f0dd; box-shadow: 4px 4px 0 rgba(10, 42, 94, 0.35);
}
.signup h2 { color: #fff; }
.signup .fine { color: #cfd9ec; }
.signup input[type="email"] { border: 2px solid #003da5; border-radius: 8px; }
.signup button {
  background: #f8f0dd; color: #0a2a5e; border: 2.5px solid #003da5;
  border-radius: 10px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.05em; font-weight: 600; font-size: 1.05rem;
  padding: 0.5rem 1.2rem;
}
.signup button:hover { background: #fff; }

/* Explorer chrome on the guides: squared, blue, hard shadows */
.explorer {
  background: #fffdf7; border: 2.5px solid #003da5; border-radius: 10px;
  box-shadow: 4px 4px 0 rgba(10, 42, 94, 0.25);
}
.explorer-way { border-radius: 8px; border: 2px solid #003da5; color: #0a2a5e; background: #fff; }
.explorer-way:hover { border-color: #0a2a5e; }
.explorer-way.active { background: #003da5; color: #fff; border-color: #0a2a5e; }
.locate-btn {
  background: #003da5; border: 2.5px solid #0a2a5e; border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.4);
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 1.05rem;
}
.stage-reset { border-radius: 8px; color: #003da5; border: 2px solid #003da5; }
.stage-reset:hover { background: #003da5; color: #fff; }
.chip { border-radius: 8px; border: 1.5px solid #003da5; background: #eef3fc; color: #0a2a5e; }
.cv-map { border: 2px solid #003da5; border-radius: 10px; }
.profile { border: 2px solid #003da5; border-radius: 8px; background: #fffdf7; }
.profile-tip { border-radius: 6px; }

/* Cards carry their route color again */
.card { border: 1.5px solid #b9c6dd; border-top: 4px solid var(--rc, #857e6f); border-radius: 10px; }

/* Tables by family: guide tables bold like the explorer, post tables calm */
.guide table th { background: #003da5; color: #fff; border-color: #0a2a5e; }
.post table th { background: #dbe6fb; color: #0a2a5e; border-color: #b9c6dd; }
.stage-table td.gain { color: #2e7d6b; }
.plan-table tr.long td { background: #fdf3d7; }

/* Plan box on guides matches the planner tool */
.plan-box {
  background: #fffdf7; border: 2px solid #003da5; border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.25); padding: 1.1rem 1.3rem;
}
.plan-box .slot-tag { border: 1.5px dashed #857e6f; color: #5c5546; }

/* Labels and lists */
.crumbs {
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600; font-size: 1rem; color: #003da5;
}
.crumbs a { color: #003da5; }
.news-list li { padding: 0.7rem 0; }
.news-list a {
  font-family: "Barlow Condensed", sans-serif; font-size: 1.3rem;
  font-weight: 600; letter-spacing: 0.02em; color: #0a2a5e;
}
.stage-list { list-style: none; padding: 0; }
.stage-list li { position: relative; padding: 0.45rem 0 0.45rem 1.1rem; border-bottom: 1px solid var(--line); }
.stage-list li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 8px; height: 8px; background: #857e6f;
}
.stage-nav a {
  display: inline-block; border: 2px solid #003da5; border-radius: 8px;
  padding: 0.45rem 0.8rem; color: #0a2a5e; background: #fff;
}
.stage-nav a:hover { background: #eef3fc; text-decoration: none; }
.map-legend .swatch { width: 12px; height: 12px; border-radius: 2px; }
.about-badge { border-radius: 10px; border: 2.5px solid #003da5; }
.site-footer { border-top: 3px solid #857e6f; }

/* Homepage, map first: slim intro strip, photo as a band over the guides */
.home-intro { padding: 0.6rem 0 0.2rem; }
.home-intro h1 { margin-bottom: 0.3rem; }
.home-intro .lede { font-size: 1.15rem; color: var(--ink-soft); margin: 0.2rem 0 0.9rem; }
.button.primary { background: #ffcc00; color: #221410; border-color: #221410; }
.home-photo-band { width: 100vw; margin-left: calc(50% - 50vw); margin-top: 2rem; }
.home-photo-band img { display: block; width: 100%; height: 44dvh; min-height: 240px; object-fit: cover; }
.photo-credit { font-size: 0.8rem; color: var(--ink-soft); text-align: right; padding: 0.3rem 0.6rem 0; margin: 0; }

/* ==== Native guide explorer (build 130, guide-map.js) ==== */
.gm-map {
  width: 100vw; margin-left: calc(50% - 50vw);
  height: 72dvh; min-height: 480px;
  border-top: 2.5px solid #003da5; border-bottom: 2.5px solid #003da5;
  background: #e8eefb;
}
.gm-fail { padding: 2rem 1rem; text-align: center; font-size: 1.05rem; }
.gm-h { margin-top: 1.4rem; }
.gm-pois { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0 0.3rem; }
.gm-poi-chip {
  font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff; color: #0a2a5e; border: 2px solid #003da5;
  border-radius: 8px; padding: 0.35rem 0.7rem; min-height: 40px;
}
.gm-poi-chip .gm-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(10, 42, 94, 0.35); }
.gm-poi-chip .gm-count { font-weight: 700; color: #003da5; }
.gm-poi-chip.off { opacity: 0.45; }
.gm-poi-out { margin: 0.2rem 0 0.6rem; }
.gm-card {
  border: 2px solid #003da5; border-radius: 10px; overflow: hidden;
  margin: 0.8rem 0; background: #fff; box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.25);
}
.gm-card-head {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  color: #fff; padding: 0.55rem 0.9rem; position: relative;
}
.gm-card-head strong { font-family: "Barlow Condensed", sans-serif; font-size: 1.3rem; letter-spacing: 0.02em; }
.gm-card-head span { font-size: 0.92rem; opacity: 0.92; }
.gm-card-x {
  margin-left: auto; background: rgba(255, 255, 255, 0.18); color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.65); border-radius: 8px;
  font-size: 1.1rem; line-height: 1; width: 34px; height: 34px; cursor: pointer;
}
.gm-card-body { padding: 0.7rem 0.9rem 0.9rem; }
.gm-row { margin: 0.25rem 0; }
.gm-row span { font-weight: 600; color: #0a2a5e; }
.gm-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.gm-btn {
  display: inline-block; border: 2px solid #003da5; border-radius: 8px;
  padding: 0.4rem 0.9rem; font-weight: 600; color: #0a2a5e; background: #eef3fc;
}
.gm-btn:hover { background: #dbe6fb; text-decoration: none; }
.gm-town {
  width: 30px; height: 30px; position: relative; cursor: pointer;
  background: #857e6f; border: 2.5px solid #fff; border-radius: 9px;
  box-shadow: 0 1px 5px rgba(10, 42, 94, 0.45);
  display: flex; align-items: center; justify-content: center;
}
.gm-town-n { color: #fff; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 15px; line-height: 1; }
.gm-town-label {
  position: absolute; left: 50%; transform: translateX(-50%); top: 33px;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase; color: #0a2a5e; white-space: nowrap;
  text-shadow: 0 0 3px #f8f0dd, 0 0 3px #f8f0dd, 0 0 3px #f8f0dd, 0 0 3px #f8f0dd;
  pointer-events: none;
}
.gm-town-sel { background: #ffcc00; }
.gm-town-sel .gm-town-n { color: #221410; }
.gm-town-end { background: transparent; border: 0; box-shadow: none; width: 18px; height: 18px; }
.gm-town-dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2.5px solid #003da5; display: block; }
.gm-town-end .gm-town-label { top: 20px; }
.gm-badge {
  position: absolute; top: -9px; right: -9px; width: 17px; height: 17px;
  border-radius: 50%; color: #fff; font-size: 10px; line-height: 17px; text-align: center;
  border: 1.5px solid #fff;
}
.gm-badge-start { background: #2e7d32; }
.gm-badge-finish { background: #c30000; }
.gm-stages { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0 0.2rem; }
.gm-stage-chip {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 0.95rem;
  width: 34px; height: 34px; cursor: pointer;
  background: #857e6f; color: #fff; border: 2px solid #fff; border-radius: 8px;
  box-shadow: 0 0 0 1.5px #857e6f;
}
.gm-stage-chip.active { background: #ffcc00; color: #221410; box-shadow: 0 0 0 1.5px #0a2a5e; }
.gm-stage-out { font-weight: 600; color: #0a2a5e; min-height: 1.2em; margin: 0.3rem 0 0; }
.gm-pbtns { display: flex; gap: 0.4rem; margin-top: 0.45rem; }
.gm-pbtns button {
  font: inherit; font-weight: 700; cursor: pointer; min-height: 38px;
  background: #fff; color: #0a2a5e; border: 2px solid #003da5; border-radius: 8px;
  padding: 0.2rem 0.8rem;
}
.gm-pbtns button:hover { background: #eef3fc; }
.explorer-native .profile { touch-action: pan-y; }

/* ==== In-guide day planner (build 168, queue item 13 phase 2) ==== */
.gm-plan-fields { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0.6rem 0 0.2rem; }
.gm-plan-fields label { font-weight: 600; color: #0a2a5e; }
.gm-plan-fields input {
  font: inherit; color: #221410; background: #fff;
  border: 2px solid #003da5; border-radius: 8px;
  min-height: 44px; padding: 0.2rem 0.5rem; margin-left: 0.3rem;
}
.gm-plan-fields input[type="number"] { width: 5.2rem; }
.gm-plan-budget { font-weight: 600; color: #0a2a5e; margin: 0.15rem 0 0.2rem; }
.gm-plan-towns { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0 0.3rem; }
.gm-plan-town {
  font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  background: #fff; color: #0a2a5e; border: 2px solid #003da5;
  border-radius: 8px; padding: 0.35rem 0.7rem; min-height: 44px;
}
.gm-plan-town.on { background: #003da5; color: #fff; border-color: #0a2a5e; }
.gm-plan-out { font-weight: 600; color: #0a2a5e; margin: 0.4rem 0 0.2rem; }
.gm-plan-day { margin: 0.3rem 0; }
.gm-plan-n {
  display: inline-block; min-width: 1.7rem; text-align: center;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  background: #857e6f; color: #fff; border-radius: 6px; padding: 0.05rem 0.2rem;
}
.gm-plan-btns { margin: 0.6rem 0 0; }
.gm-plan-reset {
  font: inherit; font-weight: 700; cursor: pointer; min-height: 44px;
  background: #fff; color: #0a2a5e; border: 2px solid #003da5; border-radius: 8px;
  padding: 0.3rem 0.9rem;
}
.gm-plan-reset:hover { background: #eef3fc; }
.gm-plan-open {
  display: inline-block; font: inherit; font-weight: 700; min-height: 44px;
  box-sizing: border-box; text-decoration: none;
  background: #003da5; color: #fff; border: 2px solid #0a2a5e; border-radius: 8px;
  padding: 0.55rem 0.9rem 0.3rem;
}
.gm-plan-open:hover { background: #0a2a5e; }

/* ==== Guide explorer tuning (build 131, first phone pass) ==== */
.gm-map { height: 62dvh; min-height: 440px; }
.gm-map[data-band="far"] .gm-town:not(:has(.gm-badge)) { display: none; }
.gm-map[data-band="far"] .gm-town-label,
.gm-map[data-band="mid"] .gm-town-label { display: none; }
.gm-stage-chip { width: 40px; height: 40px; font-size: 1.02rem; }
.gm-poi-chip { min-height: 44px; padding: 0.45rem 0.8rem; }
.explorer-native .profile-tip { font-size: 0.95rem; padding: 0.25rem 0.7rem; }
.gm-card { margin-top: 0.9rem; }

/* ==== Route card graphics and character lines (build 150; graphics build 191) ==== */
.card-photo-link { display: block; }
.card-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover;
  border-radius: 6px; margin-bottom: 0.35rem;
}
.card.wide .card-photo { aspect-ratio: 21 / 9; }
.card-credit { font-size: 0.78rem; color: var(--ink-soft); margin: 0 0 0.4rem; }
.card-credit a { color: var(--ink-soft); }
.card-character {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  font-size: 1.25rem; letter-spacing: 0.02em; color: #0a2a5e; margin: 0 0 0.15rem;
}
/* Most walked tag on the Frances card (build 190, homepage reorder). */
.card { position: relative; }
.card-tag {
  position: absolute; top: 0.55rem; right: 0.55rem; z-index: 2;
  background: #ffcc00; color: #221410; border-radius: 999px;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.12rem 0.6rem; box-shadow: 0 2px 6px rgba(34, 20, 16, 0.25);
}

/* ==== Guided route picker (build 151, queue item 14) ==== */
.picker {
  background: var(--paper); border: 2.5px solid #003da5;
  box-shadow: 5px 5px 0 rgba(10, 42, 94, 0.85);
  padding: 1rem 1.1rem 1.1rem; margin: 0 0 1.4rem;
}
.picker h3 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: #0a2a5e;
  font-size: 1.5rem; margin: 0 0 0.6rem;
}
.picker-q { margin: 0 0 0.8rem; }
.picker-label { font-weight: 600; margin: 0 0 0.35rem; color: #0a2a5e; }
.picker-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.picker-opt {
  font: inherit; font-weight: 600; cursor: pointer; min-height: 44px;
  background: #fff; color: #0a2a5e; border: 2px solid #003da5;
  box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.85); padding: 0.4rem 0.9rem;
}
.picker-opt:hover { background: #eef3fc; }
.picker-opt[aria-pressed="true"] { background: #003da5; color: #fff; }
.picker-result { margin-top: 0.4rem; }
.picker-hint { color: var(--ink-soft); margin: 0; }
.picker-match-line { margin: 0 0 0.6rem; font-size: 1.05rem; }
.picker-actions { margin: 0; }
.card.picker-match {
  position: relative; outline: 3px solid #003da5; outline-offset: 3px;
  box-shadow: 6px 6px 0 rgba(10, 42, 94, 0.55);
}
.card.picker-match::after {
  content: "Your match"; position: absolute; top: 0.6rem; right: 0.6rem;
  background: #003da5; color: #fff; padding: 0.15rem 0.55rem;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem;
}

/* Guide weather strip (build 152) */
.guide-weather {
  margin: 0.8rem 0 0.4rem; padding: 0.7rem 0.9rem 0.4rem;
  background: #eef3fc; border: 1.5px solid #003da5; border-radius: 8px;
}
.guide-weather[hidden] { display: none; }
.gw-h {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: #0a2a5e;
  font-size: 1.25rem; margin: 0 0 0.45rem;
}
.gw-row { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0 0 0.5rem; }
.gw-place { font-weight: 700; color: #0a2a5e; min-width: 8.5rem; }
.gw-days { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.gw-day { white-space: nowrap; }

/* Wildfire check block (build 153, backlog item 4) */
.fire-check {
  margin: 1.2rem 0; padding: 0.9rem 1.1rem 0.4rem;
  background: var(--paper); border: 2.5px solid var(--red);
  box-shadow: 5px 5px 0 rgba(195, 0, 0, 0.28);
}
.fire-check h2 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--red);
  font-size: 1.5rem; margin: 0 0 0.4rem;
}
.fire-check p { margin: 0 0 0.6rem; }

/* Seasonal closure banner (build 214, queue item 19) */
.season-banner {
  margin: 1.2rem 0; padding: 0.9rem 1.1rem 0.4rem;
  background: #fdf6d8; border: 2.5px solid #003da5;
  box-shadow: 5px 5px 0 rgba(10, 42, 94, 0.28);
}
.season-banner h2 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: #0a2a5e;
  font-size: 1.5rem; margin: 0 0 0.4rem;
}
.season-banner p { margin: 0 0 0.6rem; }

/* Site search (build 156, backlog item 5) */
.search-form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0 0.6rem; }
.search-form input {
  flex: 1 1 260px; font: inherit; min-height: 48px; padding: 0.5rem 0.8rem;
  background: #fff; color: var(--ink); border: 2px solid #003da5;
  box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.85);
}
.search-form button {
  font: inherit; font-weight: 600; cursor: pointer; min-height: 48px;
  background: #003da5; color: #fff; border: 2px solid #003da5;
  box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.85); padding: 0.4rem 1.1rem;
}
.search-results { margin: 0.6rem 0 1.6rem; }
.search-hint, .search-none, .search-count { color: var(--ink-soft); }
.search-hit {
  display: block; text-decoration: none; color: var(--ink);
  background: #fff; border: 2px solid #003da5;
  box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.85);
  padding: 0.6rem 0.9rem; margin: 0 0 0.6rem;
}
.search-hit:hover { background: #eef3fc; }
.search-kind {
  display: inline-block; background: #003da5; color: #fff;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem;
  padding: 0.08rem 0.5rem; margin-right: 0.6rem; vertical-align: 0.12em;
}
.search-title { font-weight: 700; color: #0a2a5e; }
.search-meta { display: block; color: var(--ink-soft); margin-top: 0.15rem; }

/* Last 100 km landing pages (build 157, backlog item 6) */
.l100-table tbody tr { cursor: default; }
.l100-table tbody tr:hover td { background: var(--paper); }
.l100-table tbody tr:hover td:first-child { background: var(--paper); color: var(--ink); }

/* Accessibility: reduced motion (build 159, backlog Next item 8).
   Readers who ask their system for reduced motion get no CSS
   animation or transition movement anywhere on the site, and the
   hover lifts stay flat. The map scripts honour the same setting
   for camera moves (guide-map.js camDur, app-map.js dur). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .button:hover, .card:hover { transform: none; }
}

/* Profile keyboard support (build 160, backlog Next item 8): both
   elevation profiles are focusable sliders; the focus ring has to be
   visible on the dark map profile and the light guide profile alike. */
#app-profile:focus-visible { outline: 3px solid #ffcc00; outline-offset: 2px; }
.profile:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Print stylesheet for stage pages (build 161, backlog Next item 8,
   last clause). A pilgrim printing a stage page gets one clean sheet
   to carry: no site chrome, no buttons or navigation, no shadows or
   tinted boxes wasting ink, the stats and elevation profile kept
   whole, and the service cards in two plain columns. The rules are
   scoped to .stage-page so other pages keep the older print block
   above; the print-note line is hidden on screen and shows only on
   the printed sheet. */
.print-note { display: none; }
@page { margin: 13mm 12mm 14mm; }
@media print {
  .route-ribbon, .crumbs, .stage-nav { display: none !important; }
  main { max-width: none; padding: 0; }
  .stage-page { font-size: 11.5pt; line-height: 1.45; color: #000; }
  .stage-page h1 { font-size: 21pt; margin: 0 0 0.4rem; }
  .stage-page h2 { font-size: 14pt; margin: 1.1rem 0 0.4rem; break-after: avoid; }
  .stage-page p { margin: 0 0 0.5rem; }
  .stage-page a { color: #000; text-decoration: none; }
  .stage-page .button { display: none !important; }
  .stage-page .stats { break-inside: avoid; }
  .stage-page .chip {
    background: #fff !important; border: 1pt solid #666;
    box-shadow: none !important; border-radius: 0;
  }
  .stage-page .stage-profile {
    width: 100%; height: auto; border: 1pt solid #666;
    background: #fff !important; break-inside: avoid;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .stage-page .grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .stage-page .card {
    background: #fff !important; border: 1pt solid #999;
    border-radius: 0; box-shadow: none !important;
    padding: 0.45rem 0.6rem; break-inside: avoid;
  }
  .stage-page .card h3 { margin: 0 0 0.15rem; font-size: 12pt; }
  .stage-page .card p { margin: 0; }
  .stage-page ul { margin: 0.2rem 0 0.6rem; }
  .stage-page .print-note {
    display: block; margin-top: 1.2rem; padding-top: 0.5rem;
    border-top: 1pt solid #999; font-size: 9.5pt; color: #333;
  }
}

/* ==== SITE WAYMARK 4 (build 170, queue item 12): selection and focus ====
   The last two holdouts from the pre-Waymark v3 pass. Text selection was
   still the old Santiago red tint; it now highlights in signal yellow,
   the signage highlight colour, rationed everywhere else to active
   states. The keyboard focus ring was the muted brand blue (#5379a8);
   it is now sign blue (#003da5) like every other Waymark outline, and
   the ring also covers form controls (the signup email field, the
   search box, quiz and planner inputs), which the old rule missed.
   The map profile keeps its yellow ring from build 160: sign blue
   would vanish on the dark panel ground. */
::selection { background: rgba(255, 204, 0, 0.38); }
a:focus-visible, button:focus-visible, .stage-row:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #003da5; outline-offset: 2px;
}
.profile:focus-visible { outline: 3px solid #003da5; outline-offset: 2px; }

/* ==== SITE WAYMARK 5 (build 171, queue item 12): map panel readout ====
   The last live var(--blue) in the cascade. The compass readout in the
   map panel head (.app-readout, "Facing NE · 45°") still coloured its
   text the muted pre-Waymark brand blue (#5379a8), which sits at about
   2.9 to 1 contrast on the panel's sign blue ground and reads as a
   smudge next to the panel stats beside it. It now uses the panel's
   own readout colour, the pale sign blue #cfe0ff the Waymark app block
   already gives .app-stats in the same panel head (about 9.7 to 1 on
   the same ground), so the two head readouts match. Every other
   var(--blue) rule in the file is already overridden by a Waymark
   block (quiz and locate buttons, focus rings, the guide profile
   ring); this was the one still reaching the screen. */
.app-readout { color: #cfe0ff; }

/* ==== SITE WAYMARK 6 (build 172, queue item 12): the position strip ====
   The last map chrome surface still in the pre-Waymark espresso
   brown. The live position strip (.app-strip, the floating readout
   that carries the on-trail and next-town lines while walking) kept
   the brown translucent ground the v6 app shipped with, restated in
   the builds 59-60 Waymark app block, while every sibling chrome
   surface in that same block went sign blue: the top bar, the panel,
   the routes panel, search, the places menu, and the compass. The
   strip now takes the panel ground, rgba(0,45,114,0.94), and its
   shadow tint follows the other chrome shadows. Its text needs no
   change: the ivory main line and the sand sub line (#d8c9a8, the
   same sand the footer links use on sign blue) both stay above
   6.7 to 1 on the new ground. The warn state is untouched: the
   .app-strip.warn rule outranks this one, so the off-route and
   closure strip still shows red. */
.app-strip { background: rgba(0, 45, 114, 0.94); box-shadow: 0 4px 16px rgba(10, 42, 94, 0.35); }

/* ==== SITE WAYMARK 7 (build 173, queue item 12): the MapLibre controls ====
   A holdout the within-file audits missed, because the defeating rules
   are not in this file. Every map page loads this sheet first and the
   MapLibre vendor sheet second (the CSS_PATH link precedes MAPLIBRE_HEAD
   in build.py's page head), so on equal specificity the vendor rules
   win: its control group background is white (0,1,0), its radius 4px,
   its shadow comes through :not(:empty) at (0,2,0), and its buttons are
   29px (0,1,1). The site's own rules for this group (dark ground at
   line 508, 12px radius and 46px buttons at line 415) never reached
   the screen, leaving the zoom and geolocate glyphs, inverted to near
   white at line 510 for a dark ground, sitting at about 1.6 to 1 on
   white. This block outranks the vendor sheet on specificity alone,
   so sheet order no longer matters: (0,3,0) for the group, (0,2,1)
   for its buttons. The group takes the panel sign blue ground and the
   chrome shadow tint from Waymark 6, its intended radius, and its
   intended 46px tap targets; the inverted glyphs now sit at about
   8.1 to 1 on the new ground. The vendor's light divider between
   stacked buttons passes as is on the dark ground. */
.maplibregl-ctrl.maplibregl-ctrl-group:not(:empty) {
  background: rgba(0, 45, 114, 0.94); border-radius: 12px;
  box-shadow: 0 4px 14px rgba(10, 42, 94, 0.35);
}
.maplibregl-ctrl.maplibregl-ctrl-group button { width: 46px; height: 46px; }

/* ---- SITE WAYMARK 8: MapLibre popup content specificity ----
   Same vendor cascade as Waymark 7, one component on. The town marker
   popups in the map app render inside .maplibregl-popup-content. The
   site sets that box twice (lines 428 and 656) at (0,1,0): 12px radius
   and 12px 14px padding. The vendor sheet sets the same box at the
   same (0,1,0) with a 3px radius and 15px 10px padding, and it loads
   second, so the vendor box is the one that has been on screen. The
   site's font, size, and line height survive because the vendor sets
   none of them, and its white ground and small shadow pass as is. This
   block restates only the two contested properties through a (0,2,0)
   descendant selector, so specificity, not sheet order, decides. The
   vendor's anchor-corner rules are also (0,2,0) and load second, so a
   popup anchored at a corner keeps that one corner square, as intended. */
.maplibregl-popup .maplibregl-popup-content {
  border-radius: 12px; padding: 12px 14px;
}

/* ---- SITE WAYMARK 9: MapLibre control corner specificity ----
   Same vendor cascade as Waymark 7 and 8, one component on. The site
   positions the top control corners at lines 413 to 414 at (0,1,0):
   top 76px, the offset written to clear the map app top bar, with a
   10px side inset. The vendor sheet sets the same two corners at the
   same (0,1,0) to top 0 and side 0, and it loads second, so the
   vendor corners are what have been on screen and the controls have
   sat on the vendor inner margin alone, 10px from the top. This
   block restates only the contested top and side offsets through
   (0,2,0) descendant selectors, so specificity, not sheet order,
   decides. The bottom corners are not contested by the site and
   stay on the vendor values, and the vendor inner margins (10px)
   still apply inside the corners, so a top control itself lands
   86px down and 20px in from the map edge. */
.maplibregl-map .maplibregl-ctrl-top-left { top: 76px; left: 10px; }
.maplibregl-map .maplibregl-ctrl-top-right { top: 76px; right: 10px; }

/* ---- SITE WAYMARK 10: MapLibre attribution chip specificity ----
   Same vendor cascade as Waymark 7 to 9, the last component on the
   list those slices left. The site sets the attribution chip at
   line 418 at (0,1,0): font-size 11px, background
   rgba(255,255,255,0.75), and an 8px radius. The vendor sheet beats
   two of the three without needing sheet order: its base attrib rule
   (.maplibregl-ctrl.maplibregl-ctrl-attrib, (0,2,0)) sets the
   background to white at 0.5, and its compact rule
   (.maplibregl-ctrl-attrib.maplibregl-compact, (0,2,0)) sets the
   background to solid white and the radius to 12px. Both map
   surfaces use the compact chip (the guide explorers pass
   attributionControl compact true, and the map app adds its
   AttributionControl with compact true at top right), so the vendor
   chip is what has been on screen. The font size is not contested
   (the vendor sets none on the chip) and already reaches the
   screen. This block restates only the two contested properties
   through a (0,3,0) selector, so specificity, not sheet order,
   decides. The vendor compact layout (margin, padding, the info
   button, and the collapsed inner text) is untouched. */
.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, 0.75); border-radius: 8px;
}

/* ---- SITE WAYMARK 11: MapLibre control focus specificity ----
   Same vendor cascade as Waymark 7 to 10, one component on: the
   focus state of the MapLibre controls. The vendor sheet gives
   the control group buttons and the attribution toggle a
   box-shadow glow in its own azure, #0096ff, a colour in neither
   the brand palette nor the Waymark palette: the group buttons
   at (0,2,1), and at (0,3,1) for :focus-visible, and the
   attribution toggle at (0,2,0) on plain :focus. Waymark 4
   settled the site focus indicator as a 3px sign blue outline,
   and the group buttons, being buttons, already carry it, so
   the glow only stacks a second, mismatched indicator on top
   of it. The attribution toggle is a summary element, which
   the Waymark 4 rule never covered, so the vendor glow is its
   only focus indicator at all. This block removes the glow on
   both, through selectors that outrank the vendor rules on
   specificity alone, and gives the attribution toggle the same
   sign blue outline on keyboard focus. The vendor first and
   last child focus radii on the group buttons are untouched:
   the group clips them with its overflow hidden, so they never
   reach the screen. */
.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-group button:focus {
  box-shadow: none;
}
.maplibregl-map .maplibregl-ctrl-attrib-button:focus { box-shadow: none; }
.maplibregl-map .maplibregl-ctrl-attrib-button:focus-visible {
  outline: 3px solid #003da5; outline-offset: 2px;
}

/* ---- SITE WAYMARK 12: MapLibre control hover specificity ----
   Same vendor cascade as Waymark 7 to 11, one component on: the
   hover state of the MapLibre control group buttons (the zoom
   buttons on every guide explorer and the geolocate button in
   the map app). The vendor sheet sets that hover at (0,3,1) to
   a 5 percent black tint, rgb(0 0 0 / 5%). On the white ground
   the vendor group shipped with, that tint read as a light grey
   and the feedback worked. Waymark 7 moved the group onto the
   panel sign blue ground, rgba(0,45,114,0.94), and no slice
   restated the hover, so the same 5 percent black now darkens
   an already dark blue by a shade almost nobody can see: the
   controls have had effectively no hover feedback since build
   173. This block restates the hover as an 18 percent white
   tint, which lightens the sign blue visibly, through a (0,5,1)
   selector, so specificity, not sheet order, decides. The
   disabled state is excluded by the same :not(:disabled) the
   vendor rule carries, so a disabled button stays quiet. The
   popup close button keeps the vendor hover: its ground is the
   white popup box, where the 5 percent black still reads as a
   light grey, so it passes as is. */
.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-group button:not(:disabled):hover {
  background-color: rgba(255, 255, 255, 0.18);
}

/* ---- SITE WAYMARK 13: MapLibre user location specificity ----
   Same vendor cascade as Waymark 7 to 12, one component on: the
   user location dot and its accuracy circle, which the map app's
   GeolocateControl draws once a pilgrim taps locate (tracking,
   heading, and the accuracy circle are all switched on in
   app-map.js). The vendor sheet colours both in its own bright
   blue, #1da1f2, the dot and its pulse at (0,1,0) and (0,1,1),
   the accuracy circle at (0,1,0) in the same blue at 20 percent
   (#1da1f233). That blue sits in neither the brand palette nor
   the Waymark palette, and it is the one map surface a walking
   pilgrim stares at, so it now takes sign blue #003da5, the
   site colour for position and links, at the vendor's own
   strengths: solid for the dot and pulse, 20 percent for the
   accuracy circle. These selectors outrank the vendor rules on
   specificity alone, so sheet order no longer matters. The
   dot rule excludes the stale state by name: when the fix goes
   stale the control adds the stale class and the vendor grey
   #aaa must keep the dot itself, because grey is the signal
   that the position is old. The pulse rule carries no such
   exclusion, matching the vendor sheet, which greys only the
   stale dot and leaves its pulse blue. The dot's white ring
   and shadow are the vendor's and pass as is on the new blue. */
.maplibregl-map .maplibregl-user-location-dot:not(.maplibregl-user-location-dot-stale) {
  background-color: #003da5;
}
.maplibregl-map .maplibregl-user-location-dot:before {
  background-color: #003da5;
}
.maplibregl-map .maplibregl-user-location-accuracy-circle {
  background-color: rgba(0, 61, 165, 0.2);
}

/* ---- SITE WAYMARK 14: MapLibre geolocate active specificity ----
   Same vendor cascade as Waymark 7 to 13, one component on: the
   geolocate button's tracking states in the map app. The vendor
   sheet gives the active and background icons the same azure fill,
   #33b5e5, at (0,4,1), a colour in neither the brand palette nor
   the Waymark palette. Worse, the site's own icon filter at line
   510 (invert(0.92) sepia(0.3), written to turn the #333 base icon
   into a near white glyph on the dark group) turns that azure
   into a terracotta, about rgb(178, 97, 60), which sits at about
   2.9 to 1 on the Waymark 7 group ground: the one button state a
   walking pilgrim leaves on for hours has been an accidental
   orange at low contrast since the group went dark. Every other
   active state in this same app is signal yellow (the style menu,
   stage chips, POI chips, mode tabs, and plan buttons in the
   Waymark app block), so the tracking states take signal yellow
   too, at 8.6 to 1 on the group ground. A background colour cannot
   recolour an SVG fill, so these rules restate the vendor icons
   themselves, path for path identical to the vendor sheet with
   only the fill changed, through (0,6,1) selectors, and drop the
   icon filter for these two states so the yellow renders exact
   instead of inverting to a blue. The base icon's scale transform
   still applies, and the waiting state's spin animation is
   untouched. The error states are untouched on purpose: the
   control removes the active and background classes when it
   enters an error state, so the vendor error icons keep their
   own signal. */
.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23ffcc00' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
  filter: none;
}
.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23ffcc00' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3C/svg%3E");
  filter: none;
}

/* ---- SITE WAYMARK 15: MapLibre geolocate error specificity ----
   Same vendor cascade as Waymark 7 to 14, one component on: the
   geolocate button's error states in the map app, the pair
   Waymark 14 left alone. That slice restated the tracking icons
   in signal yellow and left the error icons to the vendor sheet,
   on the read that the control swaps the tracking classes out
   when it enters an error state. It does swap them (the vendor
   _setErrorState removes active and background and adds
   active-error and background-error instead), so the error icons
   are what a pilgrim sees when a fix fails, and they still run
   through the site icon filter at line 510 (invert(0.92)
   sepia(0.3), written to turn the #333 base icon near white on
   the dark group). That filter inverts the vendor's red error
   fills into teal: the active-error salmon #e58978 renders about
   rgb(70, 120, 122) at 2.6 to 1 on the Waymark 7 group ground,
   and the background-error red #e54e33 renders about
   rgb(84, 167, 172), so the one state that means something is
   wrong has been showing in the hue family of a working state
   since the group went dark. Unlike the tracking pair, the
   vendor fills themselves already carry the right signal, so
   these rules restate the vendor icons path for path with the
   fills unchanged (verified byte-identical to the vendor SVGs),
   at 5.1 and 3.4 to 1 on the group ground, through (0,6,1)
   selectors, and drop the icon filter for these two states so
   the reds render exact. The waiting state's spin animation,
   which the control adds alongside the error classes, is
   untouched: only the background image and the filter are
   restated here. */
.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
  filter: none;
}
.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3C/svg%3E");
  filter: none;
}

/* ---- SITE WAYMARK 16: MapLibre geolocate disabled specificity ----
   Same vendor cascade as Waymark 7 to 15, one component on: the
   geolocate button's disabled state in the map app, the last
   geolocate state that set never covered. The vendor JS disables
   the button in exactly two cases (read in the vendor bundle):
   geolocation is unsupported at setup, and a permission denial
   (error code 1) while tracking, which first strips every state
   class off the button. In both cases the icon on screen is the
   vendor's disabled variant: the target in grey #aaa with a red
   slash through it, at (0,4,1), dimmed to 25 percent opacity by
   the vendor's generic disabled rule, which this block leaves
   alone because faint is the disabled signal. What breaks it is
   the site icon filter at line 510 (invert(0.92) sepia(0.3),
   written for the #333 base icon): the grey inverts to a warm
   dark grey, about rgb(101, 97, 90), which at 25 percent over
   the Waymark 7 group ground composites to about 1.15 to 1, so
   the target body vanishes into the ground, and the red slash
   inverts to a teal, the working-state hue family Waymark 15
   already fixed on the error pair. A pilgrim whose phone denies
   or lacks geolocation has been looking at an apparently empty
   button with no hint why locate does nothing. The vendor
   colours already carry the right signal, so this rule restates
   the vendor icon path for path with its fills unchanged
   (verified byte-identical to the vendor SVG) through a (0,6,1)
   selector, and drops the icon filter for this state: the grey
   body renders exact at the vendor's own faintness (about 1.5
   to 1 composited on the group ground, a touch stronger than
   the 1.2 to 1 the same icon manages on the vendor's white
   ground) and the slash renders red (3.3 to 1 at full strength)
   instead of teal. */
.maplibregl-map .maplibregl-ctrl.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23aaa' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1 9-9z'/%3E%3C/svg%3E");
  filter: none;
}

/* ---- SITE WAYMARK 17: dark-ground focus rings ----
   Waymark 4 set the site focus ring to sign blue #003da5 and said
   why the map profile is the exception: sign blue would vanish
   on the dark panel ground, so the profile keeps the signal
   yellow ring it got in build 160. That exception was only ever
   applied to the profile. Every other focusable that sits on a
   dark Waymark ground still takes the sign blue ring, and the
   ring lands at its 2px offset on the ground itself: the map
   panel (rgba(0,45,114,0.94)), the map top bar (0.95), the
   routes panel, the search panel, and the places menu
   (rgba(10,42,94,0.96)), and the two sign deep grounds on every
   reading page, the signup block and the footer (#0a2a5e
   solid). Composited over light and dark map tiles alike, sign
   blue sits at 1.2 to 1.5 to 1 on those grounds, so a keyboard
   user tabbing through the panel controls, the plan fields and
   selects, the footer links, or the signup form gets no visible
   focus indicator at all. This rule gives every link, button,
   and form control inside those containers the profile's
   yellow ring instead: signal yellow #ffcc00 sits at 7.3 to
   9.5 to 1 on the same grounds, and yellow is already the dark
   chrome's own focus and active colour (the profile ring, the
   focused and active stages, the plan badge). The selectors
   are (0,2,1) against Waymark 4's (0,1,1), so specificity, not
   sheet order, decides. Untouched: the MapLibre control focus
   Waymark 11 settled, the profile's own ring (an svg, not one
   of these elements), and the floating controls over the map
   (the style menu pills and the white locate, places, and
   style squares), whose rings sit over the map itself rather
   than over a fixed dark ground. */
.app-panel a:focus-visible, .app-panel button:focus-visible,
.app-panel input:focus-visible, .app-panel select:focus-visible,
.app-panel textarea:focus-visible,
.app-top a:focus-visible, .app-top button:focus-visible,
.app-top input:focus-visible, .app-top select:focus-visible,
.app-top textarea:focus-visible,
.app-routes-panel a:focus-visible, .app-routes-panel button:focus-visible,
.app-routes-panel input:focus-visible, .app-routes-panel select:focus-visible,
.app-routes-panel textarea:focus-visible,
.app-search a:focus-visible, .app-search button:focus-visible,
.app-search input:focus-visible, .app-search select:focus-visible,
.app-search textarea:focus-visible,
.app-poi-menu a:focus-visible, .app-poi-menu button:focus-visible,
.app-poi-menu input:focus-visible, .app-poi-menu select:focus-visible,
.app-poi-menu textarea:focus-visible,
.signup a:focus-visible, .signup button:focus-visible,
.signup input:focus-visible, .signup select:focus-visible,
.signup textarea:focus-visible,
.site-footer a:focus-visible, .site-footer button:focus-visible,
.site-footer input:focus-visible, .site-footer select:focus-visible,
.site-footer textarea:focus-visible {
  outline: 3px solid #ffcc00; outline-offset: 2px;
}

/* ==== SITE WAYMARK 18 (build 184, queue item 12): the map app card
   action buttons ====
   The action buttons inside the map app cards (.cv-btn on place,
   stage town, stage, and freshness cards, and .cv-adopt on stage
   and leg cards, including inside MapLibre popups) were the last
   button family still in the pre-Waymark treatment: an espresso
   pill with no border and no shadow, set at lines 605 to 610 and
   691 to 696. Every other button on the site already speaks
   Waymark: the site primary button is sign blue with a sign deep
   border, a 10px radius, and a hard offset shadow, and the guide
   explorer buttons are square cornered with sign blue borders.
   This block restates the card buttons in that primary treatment
   through the same selectors the old rules use, so file order, not
   specificity, decides; their size, padding, and font stay on the
   old rules. White on sign blue measures 9.5 to 1. The hover
   deepens to sign deep, the same hover the guide planner open
   button uses. The card close button is untouched: it sits on the
   route coloured card head, not on the card body these buttons
   live in. */
.cv-btn, .cv-adopt, .app-card-body .cv-adopt {
  background: #003da5; color: #ffffff;
  border: 2.5px solid #0a2a5e; border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(10, 42, 94, 0.85);
}
.cv-btn:hover, .cv-adopt:hover { background: #0a2a5e; }

/* ==== SITE WAYMARK 20 (build 186, queue item 12): the map app profile
   scrub marker ====
   Scrubbing the map app elevation profile draws one point in two
   places: the dot inside the profile (#app-hdot, ivory #f8f0dd with
   an espresso #221410 stroke) and a MapLibre HTML marker on the map
   itself for the same point (.app-hdot-el, built in app-map.js
   showBest). The two halves of that one mark have never matched:
   the map half ships in Santiago red #c30000 with a white ring,
   which is pixel for pixel the Stay POI dot (GL circle radius 7.5,
   so 15px across, fill #c30000 from CAT_META, white stroke 2.5;
   the marker is 14px with a 2.5px white border). While a pilgrim
   scrubs, a red dot slides along the track through the POI field
   and reads as one more place to stay, or as the red finish mark,
   not as the profile point it is. Red is also the most loaded
   colour on the map (stay category, finish badges, the steep
   grade step), so it is the wrong colour for a neutral cursor.
   This block gives the marker its own twin's treatment, ivory
   fill with an espresso ring, the same pairing the town dots
   (.app-town) already use for a plain point on the map, through
   the same selector the old rule uses, so file order decides.
   Size, roundness, and shadow stay on the old rule. The guide
   explorers' scrub point is a GL circle in sign blue and is a
   different mark on a different surface; it is untouched. */
.app-hdot-el {
  background: #f8f0dd; border-color: #221410;
}

/* ==== SITE WAYMARK 21 (build 187, queue item 12): the guide start
   badge ====
   The start and finish marks are one pair drawn on two surfaces.
   In the map app they are standalone endpoint discs (.app-endpoint:
   a white arrow glyph in a green disc for the start, a white star
   in a Santiago red disc for the finish); in every guide explorer
   the same two glyphs ride as corner badges on the first and last
   town markers (.gm-badge-start and .gm-badge-finish). The finish
   halves match exactly, red #c30000 on both surfaces, which shows
   the pair was always meant to read as one mark. The start halves
   never matched: the guide badge ships in a one-off green #2e7d32
   that appears nowhere else in the site, while the app endpoint
   uses #4c7a3f, also a one-off, so the same arrow in the same
   white-ringed green disc has been two different greens depending
   on which explorer a pilgrim opened. This block gives the guide
   badge the app endpoint green, the primary surface the badge was
   copied from, through the same selector the old rule uses, so
   file order decides. White on the new green measures 5.0 to 1
   against 5.1 to 1 on the old, so legibility is unchanged; size,
   ring, and glyph stay on the old rules. The freshness stamp
   green and the stage gain green are text colours in different
   roles and are untouched. */
.gm-badge-start { background: #4c7a3f; }

/* SITE FIX (2026-11-01, chat session, phone screenshot): the map
   library's own geolocate button rendered in the top-right corner
   above the app's control stack, duplicating the app's find-me
   button and showing a slashed disabled glyph. The GeolocateControl
   itself stays added: it is the position engine (tracking, heading,
   accuracy circle, the user dot) and the app button triggers it
   programmatically. Only its default button is hidden. */
.maplibregl-ctrl-geolocate { display: none !important; }

/* ==== Guide stage list flow (build 194, queue item 15, Frances pilot) ====
   The explorer stage table is the guide's one stage list. Section
   rows group it (sign deep ground, ivory text, the stage table
   header treatment carried into the body) and variant rows show a
   branch inline at its stage (pale sign blue ground, sign blue
   left rule). Neither row is a stage row: no pointer cursor, no
   hover wash, no active state. */
.stage-table tbody tr.stage-section td {
  background: #0a2a5e; color: #fff; border-color: #0a2a5e;
  font-size: 1rem; padding-top: 0.55rem; padding-bottom: 0.55rem;
  cursor: default;
}
.stage-table tbody tr.stage-section td strong {
  font-family: "Barlow Condensed", sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.08rem;
}
.stage-table tbody tr.stage-section:hover td { background: #0a2a5e; }
.stage-table tbody tr.stage-variant td {
  background: #e8eefb; color: #0a2a5e; border-left: 4px solid #003da5;
  font-size: 0.92rem; cursor: default;
}
.stage-table tbody tr.stage-variant:hover td { background: #e8eefb; }

/* Map dashboard and planner page (build 196, queue item 20): the map
   panel is a live on-trail dashboard now, and planning lives on its
   own page. */
.app-plan-btn { text-decoration: none; }
.app-dash { margin: 2px 0 4px; }
.app-dash-nums { display: flex; gap: 10px; }
.app-dash-num { flex: 1; background: var(--ivory); border-radius: 14px; padding: 11px 14px 12px; box-shadow: 0 3px 12px rgba(0,0,0,.28); }
.app-dash-num span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a7a63; }
.app-dash-num strong { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 31px; line-height: 1.05; color: var(--espresso); margin-top: 2px; }
/* Dashboard tile grid (build 228): the ahead block as stat tiles,
   same label-over-value language as the place card fact grid. */
/* Dashboard tiles are solid ivory cards on the navy panel
   (build 229 redesign): espresso type, category-colored labels,
   condensed poster numerals. The translucent wash from the first
   tile pass read as the old panel with boxes drawn on it. */
.app-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.app-dash-tile { background: var(--ivory); border-radius: 14px; padding: 11px 14px 12px; box-shadow: 0 3px 12px rgba(0,0,0,.28); min-width: 0; }
.app-dash-tile.wide { grid-column: 1 / -1; }
.app-dash-tile span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a7a63; }
.app-dash-tile strong { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 25px; line-height: 1.08; color: var(--espresso); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.app-dash-tile em { display: block; font-style: normal; font-size: 12.5px; font-weight: 600; color: #7a6a55; margin-top: 3px; }
.app-dash-bar { display: block; height: 5px; border-radius: 3px; background: var(--sand); margin-top: 8px; overflow: hidden; }
.app-dash-bar b { display: block; height: 100%; border-radius: 3px; }
.app-dash-tile.note { font-size: 13.5px; line-height: 1.5; color: var(--espresso); }
.app-dash-tile.note strong { display: inline; font-family: inherit; font-size: inherit; white-space: normal; }
.app-dash-plan { margin: 8px 0 2px; font-size: 13.5px; }
.app-dash-plan a { color: #ffcc00; }
.planner .pl-fields { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 10px 0; }
.planner label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.planner select, .planner input { font: inherit; font-weight: 400; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
.pl-ways { margin: 8px 0 2px; }
.pl-route-name { font-weight: 600; margin: 8px 0 0; }
.pl-out { font-size: 15px; margin: 10px 0; }
.pl-ends p { margin: 6px 0; }
.pl-actions { margin: 12px 0 4px; }

/* ---- One app, two screens (build 201, follow-up to queue item 20):
   Tyler's direction 2026-11-03, the planner must look like the mobile
   UI of the map, one mobile app with a planner, and the UX must get
   better, not just move. The planner renders bare like the map: sign
   blue app top bar, panel style cards, Plan mode field language, an
   always-visible summary strip, and a sticky actions bar. Desktop
   keeps the map's full-width chrome; the planner column centers at
   reading width.
   Build 210 (Tyler's phone verdicts): the shared Map/Planner bottom
   tab bar build 201 added to both screens is removed; it "takes up
   more real estate", and the top bar buttons (the map's Plan button,
   this page's Map button) were always the way across. With the tab
   rules go the map sheet's tab-height offsets (scroll padding, peek
   height, Info button, attribution): the sheet returns to its build
   196 geometry from the base rules above, untouched since. */

/* The planner app shell: a flex column in the map's fixed shell,
   top bar, summary strip, scrolling cards, actions. */
.pl-shell { display: flex; flex-direction: column; background: var(--ivory); overflow-x: clip; }
.pl-top { position: relative; flex: none; }
/* Build 217 (Tyler): the shared app top bar keeps the map's rounded
   bottom corners, but in the planner the bar stacks on the summary
   strip, and the rounds left ivory wedges at the seam. Square in the
   planner shell only; the map's floating bar is untouched. */
.pl-shell .app-top { border-radius: 0; }
.pl-top .app-brand-round { pointer-events: auto; }
.pl-title {
  flex: 1; min-width: 0; margin: 0; color: #ffffff;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: 1.35rem; letter-spacing: 0.05em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-summary { flex: none; background: var(--sign-deep); color: var(--ivory); border-bottom: 2px solid rgba(248,240,221,0.18); }
/* Build 210: the strip wraps onto a second line instead of
   scrolling sideways; the recording showed its last figure ("€252
   in all") clipped mid-word at the right edge. The strip is a fixed
   flex child of the shell, so it grows a line taller when needed. */
.pl-summary-in {
  max-width: 760px; margin: 0 auto; padding: 8px 14px;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 0.95rem; font-weight: 600;
}
.pl-summary-in strong { color: var(--sign-yellow); font-family: "Barlow Condensed", sans-serif; font-size: 1.05rem; letter-spacing: 0.04em; }
/* max-width, margin and padding are reset because .pl-main is a <main>
   element and the site-wide main rule (max-width 920px, auto margins,
   1.5rem 1.25rem padding) otherwise leaks into the app shell, adding
   gutters and a tall ivory band the design never asked for. min-width 0
   lets the flex item shrink to the shell instead of sizing up to its
   content's min-content (build 205 fix). */
.pl-main { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pl-shell .planner { max-width: 760px; margin: 0 auto; padding: 12px 12px 2px; }
.app-sheet-card {
  background: rgba(0,45,114,0.95); color: var(--ivory);
  border-radius: 16px; padding: 14px 14px 16px; margin-bottom: 12px;
  box-shadow: 0 6px 20px rgba(10,42,94,0.28);
}
.app-card-title {
  font-family: "Barlow Condensed", sans-serif; color: #ffffff;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  font-size: 1.3rem; margin: 0 0 10px;
}
.pl-guide { margin: 0 0 12px; color: #cfe0ff; font-size: 0.95rem; line-height: 1.5; }
.pl-guide[hidden] { display: none; }
/* Build 210: the controls read as one compact settings card now.
   The numbered group titles are gone (markup too), and the group
   spacing tightens so the fields stack as a single settings block. */
.pl-group { margin-top: 10px; }
.pl-group:first-of-type { margin-top: 2px; }
.pl-group-title {
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700; font-size: 1.02rem;
  color: var(--sign-yellow); margin: 0 0 8px;
}
.pl-shell .app-plan-fields { margin-top: 0; }
.pl-shell .app-plan-fields label { color: #a9c2ee; }
.pl-shell .app-plan-fields select, .pl-shell .app-plan-fields input {
  width: 100%; margin-top: 3px; padding: 8px; border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.94);
  color: #221410; font: inherit; font-size: 15px; font-weight: 400;
}
.pl-shell .app-plan-fields .pl-wide { grid-column: 1 / -1; }
.pl-shell .pl-ways { margin: 10px 0 2px; }
.pl-shell .explorer-way { background: rgba(255,255,255,0.12); color: #ffffff; border-color: rgba(255,255,255,0.45); }
.pl-shell .explorer-way:hover { border-color: #ffffff; }
.pl-shell .explorer-way.active { background: #ffffff; color: var(--sign-deep); border-color: #ffffff; }
.pl-shell .pl-route-name {
  margin: 10px 0 0; color: #ffffff; font-weight: 600;
  font-family: "Barlow Condensed", sans-serif; font-size: 1.18rem; letter-spacing: 0.02em;
}
.pl-shell .pl-out { color: #cfe0ff; font-weight: 600; margin: 14px 0 4px; font-size: 0.98rem; line-height: 1.5; }
/* Build 210: with no status message to carry, the line takes no room. */
.pl-shell .pl-out:empty { margin: 0; }
.pl-shell .pl-ends p { margin: 8px 0; line-height: 1.5; }
.pl-shell .pl-ends .button {
  background: rgba(255,255,255,0.14); color: #ffffff; border: 2.5px solid rgba(255,255,255,0.55);
  border-radius: 10px; box-shadow: none; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 600; min-height: 40px; padding: 0.4rem 0.9rem;
}
.pl-card-note { margin: 0 0 10px; color: #cfe0ff; font-size: 0.92rem; line-height: 1.5; }
/* Build 210: the stages list is compact rows, not the wide table
   build 201 squeezed onto a phone. A row flexes to the card width:
   stage chip, the walk (wrapping), the distance, the stop toggle. */
.pl-stage-rows { display: flex; flex-direction: column; }
.pl-stage-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid rgba(248,240,221,0.16); min-width: 0; }
.pl-stage-row:first-child { border-top: 0; padding-top: 2px; }
.pl-stage-row.is-stop { background: rgba(255,204,0,0.13); border-radius: 8px; }
.pl-stage-n {
  flex: none; width: 26px; height: 26px; border-radius: 999px;
  background: rgba(255,255,255,0.14); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 0.95rem;
}
.pl-stage-walk { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: break-word; }
.pl-stage-svc { white-space: nowrap; }
.pl-stage-km { flex: none; font-weight: 700; white-space: nowrap; }
.pl-stage-stop { flex: none; }
.pl-stage-stop:empty { display: none; }
.pl-stop-btn {
  font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
  min-height: 36px; padding: 0.3rem 0.7rem; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,0.12); color: #cfe0ff; border: 1.5px solid rgba(255,255,255,0.4);
}
.pl-stop-btn[aria-pressed="true"] { background: var(--sign-yellow); color: var(--espresso); border-color: var(--sign-yellow); }
.pl-notes { margin-top: 10px; background: rgba(255,204,0,0.12); border: 1px solid rgba(255,204,0,0.45); border-radius: 10px; padding: 8px 12px; }
.pl-notes[hidden] { display: none; }
.pl-notes p { margin: 4px 0; font-size: 0.92rem; line-height: 1.5; color: #ffe9a8; }
.pl-note { margin: 0; padding: 2px 2px 10px; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.5; }
.pl-actions-bar { flex: none; background: rgba(10,42,94,0.97); border-top: 2px solid rgba(248,240,221,0.18); }
.pl-actions-in { max-width: 760px; margin: 0 auto; padding: 8px 10px; display: flex; gap: 8px; }
.pl-act {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 8px 6px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.14); color: #ffffff; border: 2.5px solid rgba(255,255,255,0.55);
  font-family: "Barlow Condensed", sans-serif; font-size: 1rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; line-height: 1;
}
.pl-act.primary { background: var(--sign-yellow); border-color: var(--sign-deep); color: var(--espresso); box-shadow: 3px 3px 0 rgba(10,42,94,0.85); }
.pl-below { max-width: 760px; margin: 0 auto; padding: 2px 14px 14px; }

/* Day list as stage cards (build 202): ivory place cards on the blue
   sheet, route color on the top edge like the site's route cards,
   replacing the build 196 day table in the planner. */
.pl-day-cards { display: flex; flex-direction: column; gap: 8px; }
.pl-day-card {
  background: var(--paper); color: var(--espresso);
  border-radius: 14px; border-top: 3px solid var(--rc, #857e6f);
  padding: 10px 14px 12px; box-shadow: 0 3px 10px rgba(10,42,94,0.25);
}
.pl-day-card.rest { background: var(--sand-soft); border-top-color: #857e6f; }
.pl-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pl-day-head strong {
  font-family: "Barlow Condensed", sans-serif; font-size: 1.08rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--sign-deep);
}
.pl-day-km { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.pl-day-walk { margin: 3px 0 0; font-weight: 600; font-size: 1.02rem; }
.pl-day-meta { margin: 2px 0 0; color: var(--ink-soft); font-size: 0.9rem; }
.pl-day-night { margin: 3px 0 0; font-size: 0.92rem; font-weight: 600; color: var(--sign-blue); }

/* Planner Ninja set (build 204): the starting split choice in the
   controls card, the per-stop nights stepper on a day card's night
   line, and the chosen-stay slot under it. Buttons reuse the stop
   button and place card languages already on the page. */
.pl-split { margin: 0 0 4px; }
.pl-split-label { margin: 0 0 6px; font-weight: 700; color: #cfe0ff; font-size: 0.92rem; }
.pl-split-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-split-btn {
  font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  min-height: 38px; padding: 0.35rem 0.8rem; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,0.12); color: #cfe0ff; border: 1.5px solid rgba(255,255,255,0.4);
}
.pl-split-btn[aria-pressed="true"] { background: var(--sign-yellow); color: var(--espresso); border-color: var(--sign-yellow); }
.pl-split-note { margin: 6px 0 0; color: #cfe0ff; font-size: 0.9rem; line-height: 1.5; }
/* Build 217: saved plans in the Your plan card, and the stages list's
   In your plan marker (a pressed-look chip that is not a button). */
.pl-saved { margin-top: 14px; }
.pl-saved-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pl-saved-row input[type="text"], .pl-saved-row select {
  flex: 1 1 140px; min-width: 0; font: inherit; font-size: 0.95rem; min-height: 38px;
  padding: 0.35rem 0.7rem; border-radius: 10px;
  background: rgba(255,255,255,0.12); color: #ffffff; border: 1.5px solid rgba(255,255,255,0.4);
}
.pl-saved-row input[type="text"]::placeholder { color: #a9c2ee; }
.pl-saved-row select option { color: #221410; background: #ffffff; }
.pl-stop-static { cursor: default; display: inline-flex; align-items: center; background: var(--sign-yellow); color: var(--espresso); border-color: var(--sign-yellow); }

/* Build 215: proven plan chips under the route picker, in the
   split button family. */
.pl-presets { margin: 2px 0 4px; }
.pl-preset-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-preset-btn { white-space: normal; text-align: left; line-height: 1.3; }
.pl-preset-note { margin: 6px 0 0; color: #cfe0ff; font-size: 0.9rem; line-height: 1.5; }
.pl-nights { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: middle; }
/* Build 210: the day card controls row. The destination in the walk
   line is a button (stated once, tappable); the nights stepper and
   the Change stop button sit in a wrapping flex row below the meta
   line, so the stepper is one unbreakable item and can never again
   straddle the night text the way the recording showed. The stop
   picker reuses the stay picker's row language. */
.pl-dest-btn {
  font: inherit; font-weight: 700; color: var(--sign-blue); cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid rgba(0,61,165,0.45);
  padding: 0 1px; text-align: left;
}
.pl-day-ctrls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 9px; }
.pl-day-ctrls .pl-nights { margin-left: 0; flex: none; }
.pl-nights-lab { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.pl-dest-change {
  font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; flex: none;
  min-height: 36px; padding: 0.3rem 0.75rem; border-radius: 999px;
  background: #ffffff; color: var(--sign-blue); border: 1.5px solid var(--sign-blue);
}
.pl-dest-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pl-dest-note { margin: 0 0 2px; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }
.pl-dest-pick {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #ffffff; border: 1.5px solid rgba(34,20,16,0.25); border-radius: 10px;
  padding: 8px 10px; font: inherit; min-width: 0;
}
.pl-dest-pick strong { display: block; font-size: 0.98rem; overflow-wrap: break-word; }
.pl-dest-pick span { color: var(--ink-soft); font-size: 0.88rem; }
.pl-dest-pick.is-cur { border-color: var(--sign-yellow); background: #fdf6dd; }
.pl-step {
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer; line-height: 1;
  border: 1.5px solid var(--sign-blue); background: #ffffff; color: var(--sign-blue);
  font: inherit; font-weight: 700; font-size: 1rem; padding: 0;
}
.pl-nights-n { font-size: 0.88rem; font-weight: 600; color: var(--espresso); white-space: nowrap; }
.pl-stay { margin-top: 8px; border-top: 1px dashed rgba(34,20,16,0.22); padding-top: 8px; }
.pl-stay-name { font-weight: 600; font-size: 0.95rem; }
.pl-stay-btn {
  font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
  min-height: 34px; padding: 0.3rem 0.7rem; border-radius: 999px; white-space: nowrap;
  background: rgba(0,61,165,0.07); color: var(--sign-blue); border: 1.5px solid rgba(0,61,165,0.45);
}
.pl-stay-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pl-stay-pick {
  font: inherit; text-align: left; cursor: pointer; width: 100%;
  background: #ffffff; border: 1.5px solid rgba(34,20,16,0.25); border-radius: 10px;
  padding: 8px 10px; color: var(--espresso);
}
.pl-stay-pick strong { display: block; font-size: 0.98rem; }
.pl-stay-pick span { color: var(--ink-soft); font-size: 0.88rem; }
.pl-stay-none { margin: 2px 0; color: var(--ink-soft); font-size: 0.9rem; }

/* Build 205 fit guards, same failure class as the fields grid: flex and
   grid children in the planner column may shrink below their content
   size, so a long town name, the nights stepper, or a long stay name
   wraps or truncates inside its card instead of widening the column.
   (Build 210 removed the stages table and its sideways scroll wrap;
   the stage rows flex to the card like everything else here.) */
.pl-day-card { min-width: 0; }
.pl-day-head strong { min-width: 0; }
.pl-day-night { overflow-wrap: break-word; }
.pl-act { min-width: 0; }
.pl-stay-list { min-width: 0; }
.pl-stay-pick { min-width: 0; }
.pl-stay-pick strong { overflow-wrap: break-word; }
.pl-ends { min-width: 0; overflow-wrap: break-word; }

/* Fork ahead tile (build 231): the dashboard warning before a
   registered fork takes the fork marker's signal yellow, so the
   warning reads as the same sign the walker sees on the line. It is
   a button: tapping it opens the fork comparison card. */
.app-dash-tile.fork { background: var(--sign-yellow); cursor: pointer; }
.app-dash-tile.fork span { color: #6b5410; }
.app-dash-tile.fork em { color: #5a4638; }
.app-dash-tile.fork:focus-visible { outline: 3px solid var(--sign-blue); outline-offset: 2px; }

/* ---- map app v8 (build 247): the cleaned shell. Light glass chrome
   (white frosted top bar, ivory frosted sheet, solid white tiles),
   neutral ink instead of espresso, the map's own colors for dots and
   labels. Info lives bottom right and is always on screen; the panel
   gains an Info mode (map style, offline packs, appearance, about)
   for everything secondary we want off the map. Appearance dark
   flips the chrome to a neutral dark glass. ---- */
.app-top {
  background: rgba(255,255,255,0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: 0 4px 18px rgba(20,24,20,0.18);
}
.app-routes-btn {
  background: #ffffff; color: #23272e;
  border: 1px solid rgba(35,39,46,0.16); box-shadow: 0 1px 4px rgba(20,24,20,0.12);
}
.app-routes-btn[aria-expanded="true"] { background: #23272e; color: #ffffff; border-color: #23272e; }
.app-routes-panel {
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(35,39,46,0.12); box-shadow: 0 10px 30px rgba(20,24,20,0.25);
}
.app-route-row { color: #23272e; }
.app-route-row:active { background: rgba(35,39,46,0.07); }
.app-route-row-all { border-bottom-color: rgba(35,39,46,0.12); }
.app-route-row-all input[type="checkbox"] { accent-color: #23272e; }
.app-search-btn { background: #ffffff; color: #23272e; border: 1px solid rgba(35,39,46,0.16); box-shadow: 0 1px 4px rgba(20,24,20,0.12); }
.app-search { background: rgba(255,255,255,0.97); color: #23272e; border: 1px solid rgba(35,39,46,0.1); }
.app-search input { background: rgba(35,39,46,0.06); border-color: rgba(35,39,46,0.2); color: #23272e; }
.app-search-hit { color: #23272e; }
.app-search-hit span { color: rgba(35,39,46,0.6); }
.app-panel {
  background: rgba(251,246,233,0.87);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  color: #23272e; box-shadow: 0 -6px 28px rgba(20,24,20,0.22);
}
.app-panel-head h1 { color: #23272e; }
.app-stats { color: rgba(35,39,46,0.62); }
.app-panel-x { background: #ffffff; color: #23272e; border: 1px solid rgba(35,39,46,0.18); }
.app-stage-out { color: #23272e; }
.app-locate-out { color: #23272e; }
.app-panel .app-links a { color: var(--sign-blue); }
.app-panel .fine { color: rgba(35,39,46,0.55); }
.app-dash-num, .app-dash-tile { background: #ffffff; box-shadow: 0 1px 5px rgba(20,24,20,0.13); }
.app-dash-num strong, .app-dash-tile strong { color: #23272e; }
.app-dash-num span, .app-dash-tile span { color: #8a7a63; }
.app-dash-tile em { color: rgba(35,39,46,0.6); }
.app-dash-tile.note { color: #23272e; }
.app-dash-plan a { color: var(--sign-blue); }
.app-weather { background: #ffffff; border: 1px solid rgba(35,39,46,0.1); color: #23272e; }
.app-fire a { color: var(--sign-blue); }
#app-profile { background: linear-gradient(180deg, #fdfaf1, #f3ecd9); }
.app-panel[data-state="peek"] .app-peek-stage:not([hidden]) { color: var(--rc, #c30000); }
.app-strip { background: rgba(255,255,255,0.93); color: #23272e; box-shadow: 0 4px 16px rgba(20,24,20,0.2); }
.app-strip-sub { color: rgba(35,39,46,0.65); }
.app-strip.warn { background: rgba(166,26,26,0.94); color: #ffffff; }
.app-strip.warn .app-strip-sub { color: #ffd9d0; }
.app-locate, .app-poi-btn, .app-style-btn, .app-compass {
  background: #ffffff; color: #23272e;
  border: 1px solid rgba(35,39,46,0.14); box-shadow: 0 4px 16px rgba(20,24,20,0.2);
}
.app-style-menu { background: rgba(255,255,255,0.97); border: 1px solid rgba(35,39,46,0.12); box-shadow: 0 10px 30px rgba(20,24,20,0.25); }
.app-style-menu button { background: transparent; color: #23272e; border-color: rgba(35,39,46,0.22); }
.app-style-menu button.active { background: var(--sign-yellow); color: #23272e; border-color: var(--sign-yellow); }
.app-style-menu .app-sync { color: #23272e; background: rgba(35,39,46,0.06); border-color: rgba(35,39,46,0.18); }
.app-poi-menu { background: rgba(255,255,255,0.97); color: #23272e; border: 1px solid rgba(35,39,46,0.12); }
.app-poi-menu .app-poi-out { color: rgba(35,39,46,0.6); }
.app-poi-x { background: rgba(35,39,46,0.08); color: #23272e; }
/* Info button: round, bottom right, always on screen. Its bottom is
   tracked by placeControls like the rest of the right stack. */
.app-sheet-btn {
  left: auto; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom));
  width: 54px; height: 54px; padding: 0; border-radius: 50%;
  background: #ffffff; color: #23272e; justify-content: center;
  border: 1px solid rgba(35,39,46,0.14); box-shadow: 0 4px 16px rgba(20,24,20,0.2);
  font-size: 0; letter-spacing: 0; text-transform: none;
  transition: bottom 0.3s ease;
}
.app-sheet-btn-i { width: auto; height: auto; border: 0; font-size: 1.3rem; font-family: Georgia, serif; font-style: italic; font-weight: 700; }
.app-sheet-btn.on { background: #23272e; color: #ffffff; }
/* The floating weather pill is retired: the forecast lives in the
   panel weather strip and the forecast card opens from there. */
.app-wx-btn { display: none !important; }
/* Peek shows the two big numbers now, not just the title line. */
.app-panel[data-state="peek"] { height: calc(158px + env(safe-area-inset-bottom)); max-height: calc(158px + env(safe-area-inset-bottom)); }
.app-panel[data-state="peek"] .app-weather,
.app-panel[data-state="peek"] .app-fire,
.app-panel[data-state="peek"] .app-ways,
.app-panel[data-state="peek"] .app-dash-grid,
.app-panel[data-state="peek"] .app-dash-plan { display: none; }
/* Info mode inside the panel */
#app-info[hidden] { display: none; }
.app-panel[data-mode="info"] .app-dash,
.app-panel[data-mode="info"] .app-profile-wrap,
.app-panel[data-mode="info"] .app-ways,
.app-panel[data-mode="info"] .app-weather,
.app-panel[data-mode="info"] .app-fire,
.app-panel[data-mode="info"] .app-links,
.app-panel[data-mode="info"] .fine,
.app-panel[data-mode="info"] .app-stage-out,
.app-panel[data-mode="info"] .app-peek-stage { display: none; }
.app-info-sec { margin-top: 14px; }
.app-info-h { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #8a7a63; margin-bottom: 6px; }
.app-seg { display: flex; gap: 3px; background: rgba(35,39,46,0.08); border-radius: 999px; padding: 3px; }
.app-seg button {
  flex: 1; border: 0; background: transparent; padding: 8px 2px; border-radius: 999px;
  font: inherit; font-size: 0.92rem; font-weight: 600; color: rgba(35,39,46,0.62); cursor: pointer; min-height: 38px;
}
.app-seg button.on { background: #ffffff; color: #23272e; box-shadow: 0 1px 4px rgba(20,24,20,0.2); }
.app-info-rowbtn {
  width: 100%; text-align: left; font: inherit; font-weight: 600; cursor: pointer;
  background: #ffffff; color: #23272e; border: 1px solid rgba(35,39,46,0.12);
  border-radius: 12px; padding: 11px 13px; min-height: 44px; box-shadow: 0 1px 4px rgba(20,24,20,0.1);
}
.app-info-note { font-size: 0.9rem; line-height: 1.45; color: rgba(35,39,46,0.66); margin: 7px 0 0; }
/* Appearance dark: neutral dark glass chrome, dark solid tiles. */
.app-shell[data-theme="dark"] .app-top { background: rgba(18,22,26,0.88); box-shadow: 0 4px 18px rgba(0,0,0,0.4); }
.app-shell[data-theme="dark"] .app-routes-btn { background: #26292e; color: #f2ead8; border-color: rgba(242,234,216,0.22); box-shadow: none; }
.app-shell[data-theme="dark"] .app-routes-btn[aria-expanded="true"] { background: #f2ead8; color: #23272e; border-color: #f2ead8; }
.app-shell[data-theme="dark"] .app-routes-panel { background: rgba(24,28,32,0.97); border-color: rgba(242,234,216,0.16); }
.app-shell[data-theme="dark"] .app-route-row { color: #f2ead8; }
.app-shell[data-theme="dark"] .app-search-btn { background: #26292e; color: #f2ead8; border-color: rgba(242,234,216,0.22); box-shadow: none; }
.app-shell[data-theme="dark"] .app-panel { background: rgba(18,22,26,0.9); color: #f2ead8; }
.app-shell[data-theme="dark"] .app-panel-head h1 { color: #f2ead8; }
.app-shell[data-theme="dark"] .app-stats { color: rgba(242,234,216,0.6); }
.app-shell[data-theme="dark"] .app-panel-x { background: #26292e; color: #f2ead8; border-color: rgba(242,234,216,0.25); }
.app-shell[data-theme="dark"] .app-stage-out, .app-shell[data-theme="dark"] .app-locate-out { color: #f2ead8; }
.app-shell[data-theme="dark"] .app-panel .app-links a { color: #9db8dd; }
.app-shell[data-theme="dark"] .app-panel .fine { color: rgba(242,234,216,0.5); }
.app-shell[data-theme="dark"] .app-dash-num, .app-shell[data-theme="dark"] .app-dash-tile { background: #26292e; box-shadow: 0 1px 5px rgba(0,0,0,0.4); }
.app-shell[data-theme="dark"] .app-dash-num strong, .app-shell[data-theme="dark"] .app-dash-tile strong { color: #f2ead8; }
.app-shell[data-theme="dark"] .app-dash-tile em { color: rgba(242,234,216,0.6); }
.app-shell[data-theme="dark"] .app-dash-tile.note { color: #f2ead8; }
.app-shell[data-theme="dark"] .app-weather { background: #26292e; border-color: rgba(242,234,216,0.16); color: #f2ead8; }
.app-shell[data-theme="dark"] .app-dash-plan a { color: #9db8dd; }
.app-shell[data-theme="dark"] .app-fire a { color: #9db8dd; }
.app-shell[data-theme="dark"] #app-profile { background: linear-gradient(180deg, #232830, #1a1e24); }
.app-shell[data-theme="dark"] .app-locate, .app-shell[data-theme="dark"] .app-poi-btn,
.app-shell[data-theme="dark"] .app-style-btn, .app-shell[data-theme="dark"] .app-compass,
.app-shell[data-theme="dark"] .app-sheet-btn { background: #26292e; color: #f2ead8; border-color: rgba(242,234,216,0.22); box-shadow: 0 4px 16px rgba(0,0,0,0.45); }
.app-shell[data-theme="dark"] .app-sheet-btn.on { background: #f2ead8; color: #23272e; }
.app-shell[data-theme="dark"] .app-strip { background: rgba(24,28,32,0.94); color: #f2ead8; }
.app-shell[data-theme="dark"] .app-strip-sub { color: rgba(242,234,216,0.65); }
.app-shell[data-theme="dark"] .app-style-menu, .app-shell[data-theme="dark"] .app-poi-menu, .app-shell[data-theme="dark"] .app-search { background: rgba(24,28,32,0.97); color: #f2ead8; border-color: rgba(242,234,216,0.16); }
.app-shell[data-theme="dark"] .app-style-menu button { color: #f2ead8; border-color: rgba(242,234,216,0.3); }
.app-shell[data-theme="dark"] .app-seg { background: rgba(242,234,216,0.12); }
.app-shell[data-theme="dark"] .app-seg button { color: rgba(242,234,216,0.65); }
.app-shell[data-theme="dark"] .app-seg button.on { background: #f2ead8; color: #23272e; }
.app-shell[data-theme="dark"] .app-info-h { color: rgba(242,234,216,0.55); }
.app-shell[data-theme="dark"] .app-info-rowbtn { background: #26292e; color: #f2ead8; border-color: rgba(242,234,216,0.2); }
.app-shell[data-theme="dark"] .app-info-note { color: rgba(242,234,216,0.62); }
.app-shell[data-theme="dark"] .app-search input { background: rgba(242,234,216,0.1); color: #f2ead8; border-color: rgba(242,234,216,0.3); }
.app-shell[data-theme="dark"] .app-search-hit { color: #f2ead8; }
.app-shell[data-theme="dark"] .app-search-hit span { color: rgba(242,234,216,0.6); }

/* Build 247 follow-up: readout text sits directly on the frosted
   sheet now, so it takes the neutral sheet ink in both themes
   (--ink is espresso, which the new shell avoids). */
.app-readout { color: #23272e; }
.app-shell[data-theme="dark"] .app-readout { color: #f2ead8; }

/* ---- map app v9 (build 248): the shell rebuilt to the approved
   mock (frames A to G), not a recolor of the old chrome. One
   floating frosted pill for a top bar (route dot and name, search,
   Plan as plain text, no brand disc, no separate button pills),
   the sheet floats with margins and rounded corners and leads
   with tiles, the right stack is two round buttons (locate over
   Info), the places and layers buttons move into the Info sheet,
   and the compass only appears while the map is rotated. Build 247
   recolored the old shell and Tyler's verdict was that it did not
   look anything like the mocks; this block changes the shapes. ---- */
@media (max-width: 899px) {
  .app-top {
    top: calc(8px + env(safe-area-inset-top)); left: 10px; right: 10px;
    border-radius: 999px; padding: 6px 10px 6px 16px; gap: 2px;
  }
  #app-panel {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    border-radius: 22px; border-top: 0;
  }
  .app-brand-round { display: none; }
  .app-routes { max-width: none; }
}
.app-routes-btn {
  background: transparent; border: 0; box-shadow: none; color: #23272e;
  padding: 0.35rem 0.4rem 0.35rem 0; min-height: 44px; gap: 0.45rem;
}
.app-routes-btn::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--rc, #c30000);
}
.app-routes-btn[aria-expanded="true"] { background: transparent; color: #23272e; border-color: transparent; }
.app-routes-label { font-family: "Barlow Condensed", sans-serif; font-size: 1.3rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.app-routes-btn { flex: 0 1 auto; }
.app-routes-caret { color: rgba(35,39,46,0.5); font-size: 0.8rem; }
.app-search-btn {
  order: 2; background: transparent; border: 0; box-shadow: none; color: #23272e;
  width: 42px; height: 42px;
}
.app-plan-btn {
  order: 3; background: transparent; color: #23272e; border: 0; border-left: 1px solid rgba(35,39,46,0.16);
  border-radius: 0; box-shadow: none; height: 30px; padding: 0 4px 0 12px; margin-left: 2px;
  font-size: 1.28rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none;
}
.app-plan-btn svg { display: none; }
.app-plan-btn.active { background: var(--sign-yellow); border-radius: 999px; border-left-color: transparent; padding: 0 12px; height: 38px; }
/* Sheet: grab handle, close button floats, content leads with the
   dashboard tiles in the mock's order (tiles, weather, profile). */
.app-panel { padding-top: 0.55rem; display: flex; flex-direction: column; }
.app-panel > * { flex: none; }
.app-panel::before {
  content: ""; order: -2; display: block; width: 46px; height: 5px; border-radius: 3px;
  background: rgba(35,39,46,0.22); margin: 1px auto 9px;
}
.app-panel-head { order: -1; position: absolute; top: 8px; right: 8px; padding: 0; z-index: 3; }
.app-panel-head h1, .app-panel-head .app-stats, .app-panel-head .app-readout { display: none; }
.app-panel-x { width: 34px; height: 34px; border-radius: 50%; padding: 0; font-size: 1.05rem; line-height: 1; }
.app-locate-out { order: 2; font-size: 0.85rem; font-weight: 600; color: rgba(35,39,46,0.6); margin: 7px 2px 0; }
.app-dash { order: 1; }
.app-weather { order: 3; }
.app-fire { order: 4; }
.app-profile-wrap { order: 5; }
.app-ways { order: 6; }
.app-stage-out { order: 7; }
.app-panel .app-links { order: 8; }
.app-panel .fine { order: 9; }
#app-info { order: 10; }
/* The three peek tiles (mock frame D): category colored labels,
   big condensed values, one quiet sub line each. */
.app-dash-nums { gap: 8px; }
.app-dash-num { border-radius: 16px; padding: 10px 9px 11px; min-width: 0; }
.app-dash-num strong { font-size: 24px; white-space: nowrap; letter-spacing: -0.01em; }
.app-dash-num span { white-space: nowrap; }
.app-dash-num em {
  display: block; font-style: normal; font-size: 12px; font-weight: 600;
  color: rgba(35,39,46,0.58); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-dash-num.t-route span { color: var(--rc, #c30000); }
.app-dash-num.t-stay span { color: #c30000; }
.app-dash-num.t-water span { color: #1565c0; }
/* Peek is the mock's walking state: handle plus the three tiles. */
.app-panel[data-state="peek"] { height: calc(140px + env(safe-area-inset-bottom)); max-height: calc(140px + env(safe-area-inset-bottom)); }
.app-panel[data-state="peek"] .app-profile-wrap,
.app-panel[data-state="peek"] .app-links,
.app-panel[data-state="peek"] .fine,
.app-panel[data-state="peek"] .app-stage-out,
.app-panel[data-state="peek"] .app-locate-out { display: none; }
/* Right stack: places and layers live in the Info sheet now, and
   the compass starts hidden (JS shows it while the map is rotated). */
.app-poi-btn, .app-style-btn { display: none !important; }
.app-compass { display: none; }
/* Strip and spot bar as slim frosted banners in the same language. */
.app-strip { right: 76px; border-radius: 14px; padding: 9px 14px; }
.app-spotbar { background: rgba(255,255,255,0.93); color: #23272e; box-shadow: 0 4px 16px rgba(20,24,20,0.2); border-radius: 14px; }
.app-spot-lab { color: rgba(35,39,46,0.55); }
/* Dark appearance follows the new shapes. */
.app-shell[data-theme="dark"] .app-routes-btn { background: transparent; color: #f2ead8; border-color: transparent; box-shadow: none; }
.app-shell[data-theme="dark"] .app-routes-btn[aria-expanded="true"] { background: transparent; color: #f2ead8; }
.app-shell[data-theme="dark"] .app-routes-caret { color: rgba(242,234,216,0.55); }
.app-shell[data-theme="dark"] .app-search-btn { background: transparent; color: #f2ead8; border-color: transparent; box-shadow: none; }
.app-shell[data-theme="dark"] .app-plan-btn { background: transparent; color: #f2ead8; border-left-color: rgba(242,234,216,0.25); box-shadow: none; }
.app-shell[data-theme="dark"] .app-plan-btn.active { background: var(--sign-yellow); color: #23272e; }
.app-shell[data-theme="dark"] .app-panel::before { background: rgba(242,234,216,0.3); }
.app-shell[data-theme="dark"] .app-dash-num em { color: rgba(242,234,216,0.6); }
.app-shell[data-theme="dark"] .app-locate-out { color: rgba(242,234,216,0.6); }
.app-shell[data-theme="dark"] .app-spotbar { background: rgba(24,28,32,0.94); color: #f2ead8; }
.app-shell[data-theme="dark"] .app-spot-lab { color: rgba(242,234,216,0.55); }

/* ---- map app v10 (build 249): the Trail view. A Map|Trail switch
   in the top bar opens a full-screen linear view of one stage in
   the current map colours (frame L): ivory paper, the route colour
   as the lifeline, category coloured dots, a vertical elevation
   profile locked to the node list by the YOU marker's dotted line,
   and a summary card. In Trail mode the map chrome (panel, strip,
   card, buttons) steps aside. ---- */
.app-viewseg {
  order: 1; pointer-events: auto; flex: none;
  display: flex; gap: 3px; background: rgba(35,39,46,0.09);
  border-radius: 999px; padding: 3px;
}
.app-viewseg button {
  border: 0; background: transparent; padding: 5px 10px; border-radius: 999px;
  font: inherit; font-size: 0.88rem; font-weight: 700; color: rgba(35,39,46,0.6); cursor: pointer; min-height: 32px;
}
.app-viewseg button.on { background: var(--rc, #c30000); color: #ffffff; box-shadow: 0 1px 4px rgba(20,24,20,0.25); }
.app-shell[data-view="trail"] .app-panel,
.app-shell[data-view="trail"] .app-strip,
.app-shell[data-view="trail"] .app-card,
.app-shell[data-view="trail"] .app-spotbar,
.app-shell[data-view="trail"] .app-locate,
.app-shell[data-view="trail"] .app-sheet-btn,
.app-shell[data-view="trail"] .app-compass { display: none !important; }
.app-trail {
  position: absolute; inset: 0; z-index: 900;
  background: #f8f0dd; color: #23272e;
  padding-top: calc(64px + env(safe-area-inset-top));
  display: flex; flex-direction: column;
}
.app-trail[hidden] { display: none; }
.trail-head {
  flex: none; display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 16px 10px;
}
.trail-head-main { flex: 1; min-width: 0; }
.trail-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rc, #c30000); cursor: pointer;
}
.trail-title { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 27px; line-height: 1.08; margin-top: 2px; }
.trail-stats { font-size: 13px; font-weight: 600; color: rgba(35,39,46,0.62); margin-top: 3px; }
.trail-nav { flex: none; display: flex; gap: 6px; }
.trail-nav button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(35,39,46,0.14);
  background: #ffffff; color: #23272e; font-size: 21px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(20,24,20,0.14); padding: 0 0 3px;
}
.trail-nav button:disabled { opacity: 0.35; box-shadow: none; }
.trail-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px 14px; }
.trail-main { position: relative; display: flex; min-height: 100%; }
.trail-prof { width: 84px; flex: none; position: relative; }
.trail-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trail-ele {
  position: absolute; left: 2px; font-size: 10px; font-weight: 700; color: rgba(35,39,46,0.5);
}
.trail-ele-top { top: 0; }
.trail-ele-bot { bottom: 0; }
.trail-nodes { flex: 1; min-width: 0; position: relative; padding-left: 32px; }
.trail-nodes::before {
  content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px;
  width: 4px; border-radius: 2px; background: var(--rc, #c30000);
}
.trail-node {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  min-height: 52px; padding: 6px 0; cursor: pointer;
}
.trail-node.done { opacity: 0.42; }
.tn-dot {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  border: 2.5px solid #c30000; margin-left: -31px; margin-top: 2px;
  background: #ffffff; z-index: 1;
}
.tn-dot.tn-fork {
  width: 21px; height: 21px; border-radius: 5px; margin-left: -28px; margin-top: 5px;
  background: var(--sign-yellow); border: 2.5px solid #23272e; transform: rotate(45deg);
}
.tn-main { flex: 1; min-width: 0; }
.tn-name { display: block; font-weight: 650; font-size: 15.5px; line-height: 1.25; }
.tn-sub { display: block; font-size: 12.5px; font-weight: 600; color: rgba(35,39,46,0.58); margin-top: 1px; }
.tn-km { flex: none; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 15.5px; padding-top: 2px; }
.trail-you {
  position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  border-top: 2px dotted rgba(195,0,0,0.5);
}
.trail-you[hidden] { display: none; }
.trail-you-pill {
  position: absolute; left: 106px; top: 0; transform: translateY(-50%);
  background: var(--rc, #c30000); color: #ffffff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: 999px; box-shadow: 0 4px 14px rgba(20,24,20,0.3); white-space: nowrap;
}
.trail-summary {
  flex: none; margin: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background: #ffffff; border-radius: 16px; box-shadow: 0 8px 24px rgba(20,24,20,0.16);
  padding: 12px 14px;
}
.ts-top { display: flex; align-items: center; gap: 12px; }
.ts-ring { flex: none; width: 46px; height: 46px; display: block; }
.ts-ring svg { width: 46px; height: 46px; display: block; }
.ts-main { flex: 1; min-width: 0; }
.ts-big { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 20px; line-height: 1.1; }
.ts-small { display: block; font-size: 12.5px; font-weight: 600; color: rgba(35,39,46,0.6); margin-top: 2px; }
.ts-tonight { border-top: 1px solid rgba(35,39,46,0.1); margin-top: 9px; padding-top: 8px; font-size: 13.5px; font-weight: 600; }
.ts-tonight span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #c30000; margin-right: 5px; }
/* Dark appearance */
.app-shell[data-theme="dark"] .app-viewseg { background: rgba(242,234,216,0.14); }
.app-shell[data-theme="dark"] .app-viewseg button { color: rgba(242,234,216,0.65); }
.app-shell[data-theme="dark"] .app-viewseg button.on { background: var(--rc, #c30000); color: #ffffff; }
.app-shell[data-theme="dark"] .app-trail { background: #14171b; color: #f2ead8; }
.app-shell[data-theme="dark"] .trail-stats { color: rgba(242,234,216,0.6); }
.app-shell[data-theme="dark"] .trail-nav button { background: #26292e; color: #f2ead8; border-color: rgba(242,234,216,0.22); box-shadow: none; }
.app-shell[data-theme="dark"] .trail-ele { color: rgba(242,234,216,0.5); }
.app-shell[data-theme="dark"] .tn-sub { color: rgba(242,234,216,0.58); }
.app-shell[data-theme="dark"] .trail-summary { background: #26292e; box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
.app-shell[data-theme="dark"] .ts-small { color: rgba(242,234,216,0.6); }
.app-shell[data-theme="dark"] .ts-tonight { border-top-color: rgba(242,234,216,0.14); }

/* ---- map app v11 (build 250): depth, fork labels by zoom, the
   places menu fix, and chrome tightening. Tyler, from his phone:
   the app felt flat; routes get a glow and brighter colours (in
   build.py's route table); fork diamonds stay at every zoom with
   labels only when zoomed in close; the places menu's inactive
   chips were white text on a white menu (invisible labels), a
   leftover from the dark menu era. ---- */
/* Fork labels: fade in only in the lab-on state (zoom 10 and up,
   set by applyForkVis). The label is absolutely positioned, so the
   toggle never moves the marker. */
.cv-fork-lab { opacity: 0; transition: opacity 0.18s ease; }
.cv-fork.lab-on .cv-fork-lab { opacity: 1; }
.cv-fork-dia { box-shadow: 0 2px 7px rgba(34,20,16,0.55); }
/* Places menu on the light sheet: chips legible in both themes. */
.app-poi-menu { max-height: 46vh; }
.app-poi-menu-head { color: #23272e; }
.app-poi-menu .app-poi-chip {
  background: rgba(35,39,46,0.06); color: #23272e;
  border: 1px solid rgba(35,39,46,0.18);
}
.app-poi-menu .app-poi-chip.active { background: var(--sign-yellow); color: #221410; border-color: rgba(35,39,46,0.3); }
.app-poi-x { background: rgba(35,39,46,0.08); color: #23272e; }
.app-shell[data-theme="dark"] .app-poi-menu { background: rgba(22,25,29,0.97); color: #f2ead8; border-color: rgba(242,234,216,0.18); }
.app-shell[data-theme="dark"] .app-poi-menu-head { color: #f2ead8; }
.app-shell[data-theme="dark"] .app-poi-menu .app-poi-chip { background: rgba(242,234,216,0.1); color: #f2ead8; border-color: rgba(242,234,216,0.28); }
.app-shell[data-theme="dark"] .app-poi-menu .app-poi-chip.active { background: var(--sign-yellow); color: #221410; }
.app-shell[data-theme="dark"] .app-poi-x { background: rgba(242,234,216,0.14); color: #f2ead8; }
/* One button language on the right stack: same size, same shape. */
.app-shell .app-locate, .app-shell .app-sheet-btn {
  width: 54px; height: 54px; min-height: 54px; border-radius: 50%;
}
/* Glass a touch more solid, so map text stops bleeding through. */
.app-shell .app-top { background: rgba(255,255,255,0.94); }
.app-shell[data-theme="dark"] .app-top { background: rgba(18,22,26,0.94); }
.app-shell[data-theme="dark"] .app-panel { background: rgba(18,22,26,0.96); }
/* Dashboard tiles: a little more lift. */
.app-dash-num, .app-dash-tile { box-shadow: 0 3px 10px rgba(20,24,20,0.13), inset 0 1px 0 rgba(255,255,255,0.65); }
.app-shell[data-theme="dark"] .app-dash-num, .app-shell[data-theme="dark"] .app-dash-tile { box-shadow: 0 3px 10px rgba(0,0,0,0.4); }
/* Trail depth: glowing lifeline, dimensional dots, soft cards for
   rows, a gradient ground, and a summary with a route-colour cap. */
.app-trail { background: linear-gradient(180deg, #f8f0dd 0%, #f3e7cd 100%); }
.trail-nodes::before { width: 5px; box-shadow: 0 0 12px var(--rc, #c30000); }
.trail-node {
  background: rgba(255,255,255,0.55); border: 1px solid rgba(35,39,46,0.06);
  border-radius: 14px; padding: 8px 10px; margin-bottom: 6px;
  box-shadow: 0 2px 7px rgba(20,24,20,0.07);
}
.tn-dot { box-shadow: 0 2px 6px rgba(20,24,20,0.3), inset 0 1px 2px rgba(255,255,255,0.55); }
.tn-dot.tn-fork { box-shadow: 0 2px 6px rgba(20,24,20,0.35); }
.trail-summary { border-top: 3px solid var(--rc, #c30000); box-shadow: 0 10px 26px rgba(20,24,20,0.2); }
.ts-ring { filter: drop-shadow(0 2px 4px rgba(20,24,20,0.22)); }
.app-shell[data-theme="dark"] .app-trail { background: linear-gradient(180deg, #171a1f 0%, #101216 100%); }
.app-shell[data-theme="dark"] .trail-node { background: rgba(242,234,216,0.06); border-color: rgba(242,234,216,0.1); box-shadow: 0 2px 7px rgba(0,0,0,0.35); }

/* ---- map app v12 (build 251): the Trail view against the concept
   Tyler sent back. The elevation shading now falls to the RIGHT of
   the ridge line and fades toward the timeline (it filled the
   whole column as a slab before); the numbers on the profile are
   the elevations where the line actually starts, peaks and ends;
   a whole-route overview strip sits under the header; and the
   Trail ground is translucent with a blur, so the view reads as a
   layer over the map instead of a page that replaces it. ---- */
.app-trail {
  background: linear-gradient(180deg, rgba(248,240,221,0.9) 0%, rgba(243,231,205,0.93) 100%);
  backdrop-filter: blur(7px) saturate(1.15);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
}
.trail-node { background: rgba(255,255,255,0.85); }
.trail-overview {
  flex: none; margin: 2px 16px 8px; padding: 8px 10px 6px;
  background: rgba(255,255,255,0.6); border: 1px solid rgba(35,39,46,0.07);
  border-radius: 14px; box-shadow: 0 2px 8px rgba(20,24,20,0.08); cursor: pointer;
}
.trail-ov-svg { display: block; width: 100%; height: 40px; }
.trail-ov-labs {
  display: flex; justify-content: space-between; margin-top: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: rgba(35,39,46,0.5);
}
.trail-ele-peak {
  position: absolute; left: 4px; transform: translateY(-50%);
  font-size: 10px; font-weight: 800; color: var(--rc, #c30000);
  background: rgba(255,255,255,0.78); padding: 0 4px; border-radius: 6px; white-space: nowrap;
}
.app-shell[data-theme="dark"] .app-trail { background: linear-gradient(180deg, rgba(18,20,24,0.9) 0%, rgba(13,15,18,0.93) 100%); }
.app-shell[data-theme="dark"] .trail-overview { background: rgba(242,234,216,0.07); border-color: rgba(242,234,216,0.12); }
.app-shell[data-theme="dark"] .trail-ov-labs { color: rgba(242,234,216,0.5); }
.app-shell[data-theme="dark"] .trail-node { background: rgba(32,35,40,0.88); }
.app-shell[data-theme="dark"] .trail-ele-peak { background: rgba(18,20,24,0.82); }

/* ---- map app v13 (build 252): Trail zoom, glyph dots, bolder
   icons. The timeline zooms between one stage and the whole route
   (minus and plus steppers under the overview strip; pinch fights
   the scroll, buttons do not). Trail dots now carry the same
   category glyphs as the map dots, centred on the line. The map
   glyph set itself was redrawn in tools/make_poi_icons.py as
   chunky silhouettes: the old line drawings had sub-pixel
   hairlines at marker size and read as mush. ---- */
.trail-zoomrow {
  flex: none; display: flex; align-items: center; gap: 10px; margin: 0 16px 8px;
}
.trail-zbtn {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  border: 1px solid rgba(35,39,46,0.12); background: rgba(255,255,255,0.9);
  color: #23272e; font-size: 20px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 7px rgba(20,24,20,0.12); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 0 2px;
}
.trail-zbtn:disabled { opacity: 0.35; box-shadow: none; }
.trail-zlab {
  flex: 1; text-align: center; font-size: 11px; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase; color: rgba(35,39,46,0.55);
}
.tn-dot { display: inline-flex; align-items: center; justify-content: center; }
.tn-ic { width: 19px; height: 19px; display: block; }
.app-shell[data-theme="dark"] .trail-zbtn { background: rgba(32,35,40,0.92); color: #f2ead8; border-color: rgba(242,234,216,0.2); }
.app-shell[data-theme="dark"] .trail-zlab { color: rgba(242,234,216,0.55); }
/* Lifeline through the dot centres: the v10 offset (14px) was set
   before the node cards arrived; measured in the rig, dot centres
   sit at 25.5px from the nodes edge, so the 5px line starts at 23. */
.trail-nodes::before { left: 23px; }

/* ---- map app v15 (build 263): Timeline chrome diet. Tyler: the
   title, the zoom buttons and the horizontal elevation strip were
   taking the screen from the stops. The overview strip is gone
   (build 263 removed its markup and render; the left profile is
   the elevation read), the header type steps down a size, the
   whole-route window titles itself with the route name instead of
   a three-line start-to-finish, and the summary card tightens.
   The stops are the content; everything else gets out of the way. ---- */
.trail-head { padding: 6px 16px 4px; }
.trail-title { font-size: 23px; margin-top: 1px; }
.trail-stats { font-size: 12px; margin-top: 2px; }
.trail-nav button { width: 34px; height: 34px; font-size: 19px; }
.trail-zoomrow { margin: 0 16px 6px; }
.trail-zbtn { width: 32px; height: 32px; font-size: 18px; }
.trail-summary { padding: 10px 14px; }
.ts-tonight { margin-top: 7px; padding-top: 7px; }

/* ---- map app v16 (build 265): intermediate towns and the walked
   fill. The little towns between the stage towns ride the Timeline
   as mini rows: a small route-colour dot, the name, its class and
   a strip of service glyphs from our own POI data (or "No
   services", which is real information on the Camino). The
   lifeline itself now starts pale and fills solid behind you as
   you walk, Tyler's "filling up the line". ---- */
.trail-nodes::before { opacity: 0.26; box-shadow: none; }
.trail-fill {
  position: absolute; left: 23px; top: 0; width: 5px; border-radius: 3px;
  opacity: 0.95; z-index: 0; pointer-events: none;
  box-shadow: 0 0 10px var(--rc, #c30000);
}
.trail-node { position: relative; z-index: 1; }
.trail-node.mini {
  padding: 7px 12px; border-radius: 11px; box-shadow: 0 1px 4px rgba(20,24,20,0.08);
}
.trail-node.mini .tn-dot { width: 17px; height: 17px; border-width: 2px; box-shadow: none; }
.trail-node.mini .tn-name { font-size: 15px; font-weight: 600; }
.trail-node.mini .tn-sub { font-size: 11.5px; display: flex; align-items: center; gap: 2px; }
.trail-node.mini .tn-km { font-size: 13px; }
.tn-sv { width: 13px; height: 13px; margin-left: 3px; opacity: 0.75; }
.app-shell[data-theme="dark"] .trail-node.mini { box-shadow: 0 1px 4px rgba(0,0,0,0.3); }

/* ---- map app v17 (build 276): the view switch (Tyler). The
   Map | Timeline segmented control leaves the top bar. In its
   place a vertical switch rides the bottom right, in the right
   hand stack's slot left of Info: a frosted pill with a map glyph
   at the top end and a timeline glyph at the bottom end, and a
   route colour circle that slides to the end you are on and
   carries that glyph in white. One tap flips the view. In Trail
   mode the sheet button steps aside and the switch takes the
   corner itself, like the toggle in Tyler's concept frame. ---- */
.app-viewsw {
  position: absolute; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 1002;
  width: 54px; height: 104px; padding: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(35,39,46,0.14); box-shadow: 0 4px 16px rgba(20,24,20,0.22);
  transition: bottom 0.3s ease;
}
.app-viewsw .vsw-ic {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  color: rgba(35,39,46,0.5); pointer-events: none;
}
.app-viewsw .vsw-map { top: 4px; }
.app-viewsw .vsw-tl { bottom: 4px; }
.app-viewsw .vsw-ic svg { width: 23px; height: 23px; display: block; }
.app-viewsw .vsw-knob {
  position: absolute; left: 4px; top: 4px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--rc, #c30000); color: #ffffff;
  box-shadow: 0 2px 8px rgba(20,24,20,0.35), 0 0 10px var(--rc, #c30000);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.28s cubic-bezier(0.45, 0, 0.2, 1); pointer-events: none;
}
.app-viewsw .vsw-knob svg { width: 23px; height: 23px; display: block; }
.app-viewsw .vsw-knob .kn-tl { display: none; }
.app-shell[data-view="trail"] .vsw-knob { transform: translateY(52px); }
.app-shell[data-view="trail"] .vsw-knob .kn-map { display: none; }
.app-shell[data-view="trail"] .vsw-knob .kn-tl { display: block; }
.app-shell[data-theme="dark"] .app-viewsw { background: rgba(24,27,32,0.88); border-color: rgba(242,234,216,0.18); }
.app-shell[data-theme="dark"] .app-viewsw .vsw-ic { color: rgba(242,234,216,0.55); }

/* ---- build 278: elevation ticks and terrain points on the
   Timeline profile. Ticks are the quiet interval reads; extrema
   labels reuse the peak chip, a step smaller. ---- */
.trail-ele-tick {
  position: absolute; left: 2px; transform: translateY(-50%);
  font-size: 9.5px; font-weight: 700; color: rgba(35,39,46,0.55); white-space: nowrap;
  text-shadow: 0 0 4px rgba(248,240,221,0.95), 0 0 4px rgba(248,240,221,0.95);
}
.trail-ele-x { font-size: 9.5px; padding: 0 3px; }
.app-shell[data-theme="dark"] .trail-ele-tick { color: rgba(242,234,216,0.55); text-shadow: 0 0 4px rgba(16,18,22,0.95), 0 0 4px rgba(16,18,22,0.95); }

/* ---- build 279: stage symbols on the Timeline and their dotted
   tie to the profile, plus the connector stub on stage rows.
   Stage towns wear the map's own marks: the granite numbered
   square (.app-town-num on the map), the green start arrow disc
   and the red finish star disc (.app-endpoint). The stub runs
   from the row's left edge to the profile column; the dotted
   segment sits in the profile at the same height. ---- */
.tn-dot.tn-sym {
  width: 30px; height: 30px; border-radius: 9px; margin-left: -34px;
  background: #857e6f; border: 2.5px solid #ffffff; color: #ffffff;
  font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 15px; line-height: 1;
  box-shadow: 0 2px 6px rgba(20,24,20,0.3);
}
.tn-dot.tn-sym-start, .tn-dot.tn-sym-finish {
  border-radius: 50%; font-size: 14px;
}
.tn-dot.tn-sym-start { background: #4c7a3f; }
.tn-dot.tn-sym-finish { background: #c30000; }
.tn-link {
  position: absolute; top: 24px; height: 0; pointer-events: none;
  left: calc(-1 * (100vw - 132px)); width: calc(100vw - 232px);
  border-top: 2px dotted rgba(35,39,46,0.38);
}
.trail-townlink {
  position: absolute; right: 2px; width: 7px; height: 0; transform: translateY(-50%);
  border-top: 2px dotted rgba(35,39,46,0.38);
}
.app-shell[data-theme="dark"] .tn-link,
.app-shell[data-theme="dark"] .trail-townlink { border-top-color: rgba(242,234,216,0.4); }

/* ---- build 279b: the dotted stage ties are one overlay drawn
   by the profile rebuild, a single left column line per stage
   town, so every tie sits at its town's own height. The per-row
   stub was dropped: rows cannot reach the profile column. ---- */
.trail-townlink { left: 0; right: auto; width: 100px; }
.tn-link { display: none; }