/* The route is presented as one opened trail map. This remains semantic HTML;
   the physical trailhead object is implemented separately in trailhead-guide.js. */
body.hybrid-world #world-map {
  --map-paper:#faf4e7;
  --map-ink:#243f37;
  --map-muted:#4d6257;
  --map-edge:#c7c5ad;
  --map-timber:#967754;
  --play-control-paper:#31594b;
  --play-control-paper-hover:#244638;
  --play-control-ink:#fff9ec;
  --play-control-edge:#31594b;
  --play-control-edge-hover:#244638;
  --play-control-depth:#1e3d31;
  --play-control-focus:#a64d31;
  border:0;
  background:#d9e4db;
  color:var(--map-ink);
  padding:0 22px 32px;
  box-sizing:border-box;
}
body.hybrid-world #world-map .reader-top {
  position:relative;
  top:auto;
  max-width:1204px;
  padding:18px 0;
  margin:0 auto;
  background:transparent;
  border:0;
}
body.hybrid-world #world-map #map-close {
  padding:10px 16px;
  min-height:46px;
  font-size:14px;
  border-radius:8px;
  gap:8px;
}
body.hybrid-world #world-map .map-content {
  position:relative;
  box-sizing:border-box;
  max-width:1204px;
  padding:30px clamp(22px,3vw,42px) 24px;
  background:var(--map-paper);
  color:var(--map-ink);
  border:10px solid var(--map-timber);
  border-radius:12px;
  box-shadow:inset 0 0 0 1px #fffaf0,0 6px 0 #6f583e,0 14px 30px #344d3824;
}
body.hybrid-world #world-map .map-heading {
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
body.hybrid-world #world-map .map-keyboard-hint {
  max-width:76ch;
  margin:16px 0 0;
  color:var(--map-ink);
  font:500 14px/1.65 var(--font-body);
}
body.hybrid-world #world-map .map-heading .eyebrow {
  margin:0 0 9px;
  color:var(--map-muted);
  font:700 12px/1.4 var(--font-body);
  letter-spacing:.08em;
}
body.hybrid-world #world-map #map-title {
  margin:0 0 12px;
  color:var(--map-ink);
  font:400 clamp(27px,3.2vw,37px)/1.35 var(--font-heading);
  letter-spacing:0;
}
body.hybrid-world #world-map .map-heading p:last-child {
  margin:0;
  max-width:58ch;
  color:var(--map-muted);
  font:400 16px/1.6 var(--font-body);
}
body.hybrid-world #world-map .map-fold-label {
  flex:0 0 auto;
  max-width:13ch;
  padding:11px 14px;
  border:1px solid #b5bfa9;
  border-radius:3px;
  background:#ebeedc;
  color:#3c5548;
  font:500 14px/1.5 var(--font-body);
  transform:rotate(3deg);
  text-align:center;
}
body.hybrid-world #world-map .map-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px;
  align-items:start;
  margin-top:28px;
}
body.hybrid-world #world-map .plan-view {
  position:sticky;
  top:20px;
  box-sizing:border-box;
  min-width:0;
  padding:10px;
  border:1px solid #c3c4ad;
  border-radius:4px;
  background:#eee8d6;
  box-shadow:0 3px 0 #d2c5a9;
  overflow:hidden;
}
body.hybrid-world #world-map .plan-view svg {
  display:block;
  width:100%;
  max-height:570px;
  overflow:visible;
}
body.hybrid-world #world-map .plan-view figcaption {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:8px 14px;
  margin:0;
  padding:12px 3px 4px;
  color:var(--map-ink);
  font:500 13px/1.5 var(--font-body);
}
body.hybrid-world #world-map .plan-view figcaption>span:last-child {
  margin-left:0;
  color:var(--map-muted);
}
body.hybrid-world #world-map .map-location {display:inline-flex;align-items:center;gap:7px;}
body.hybrid-world #world-map .you-dot {flex:none;width:10px;height:10px;background:#b45635;}
body.hybrid-world #world-map .map-destinations {display:grid;gap:14px;min-width:0;}
body.hybrid-world #world-map .map-stop {
  display:block;
  margin:0;
  padding:17px 18px 16px;
  min-width:0;
  border:1px solid var(--map-edge);
  border-radius:7px;
  background:#fffaf0;
  box-shadow:0 2px 0 #e4dac4;
}
body.hybrid-world #world-map .map-stop-copy {display:grid;grid-template-columns:32px minmax(0,1fr);align-items:start;gap:12px;}
body.hybrid-world #world-map .map-number {
  display:grid;
  place-items:center;
  box-sizing:border-box;
  width:32px;
  height:32px;
  padding:0;
  border-radius:50%;
  background:#31594b;
  color:#fff9ec;
  font:700 12px/1 var(--font-body);
}
body.hybrid-world #world-map .map-stop h2 {
  margin:3px 0 8px;
  color:var(--map-ink);
  font:400 16px/1.4 var(--font-heading);
  letter-spacing:0;
}
body.hybrid-world #world-map .map-stop p {
  margin:0;
  color:var(--map-muted);
  font:400 15px/1.55 var(--font-body);
  overflow-wrap:anywhere;
}
body.hybrid-world #world-map .map-stop-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:14px 0 0 44px;
}
body.hybrid-world #world-map .map-stop-actions button {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  box-sizing:border-box;
  min-height:44px;
  width:100%;
  margin:0;
  padding:10px 12px;
  color:#fff9ec;
  background:#31594b;
  border:1px solid #31594b;
  border-radius:7px;
  box-shadow:0 2px 0 #1e3d31;
  font:600 14px/1.3 var(--font-body);
  text-align:center;
  text-decoration:none;
  letter-spacing:0;
  cursor:pointer;
  transition:background-color 140ms ease,border-color 140ms ease;
}
body.hybrid-world #world-map .map-stop-actions button:hover {background:#244638;border-color:#244638;}
body.hybrid-world #world-map .map-stop-actions .map-read {
  color:var(--map-ink);
  background:#f2ead8;
  border-color:#b9b8a0;
  box-shadow:0 2px 0 #d2c6ad;
}
body.hybrid-world #world-map .map-stop-actions .map-read:hover {background:#e6e6d0;border-color:#8e9f8c;}
body.hybrid-world #world-map .map-stop-actions button:active {box-shadow:none;}
body.hybrid-world #world-map .map-stop-actions button:focus-visible,
body.hybrid-world #world-map #map-help:focus-visible {outline:3px solid #a64d31;outline-offset:4px;}
body.hybrid-world #world-map .map-footer {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:24px;
}
body.hybrid-world #world-map .map-footer p {max-width:55ch;margin:0;color:var(--map-muted);font:400 14px/1.6 var(--font-body);}
body.hybrid-world #world-map #map-help {flex:none;margin:0;padding:10px 0;min-height:44px;color:#294e41;font-size:14px;text-decoration:underline;text-underline-offset:4px;}
body.hybrid-world #world-map .map-reset {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex:1 0 100%;
  min-width:0;
  padding:16px;
  border:1px solid var(--map-edge);
  border-radius:7px;
  background:#f2ead8;
}
body.hybrid-world #world-map #map-reset {
  flex:none;
  min-height:44px;
  margin:0;
  padding:11px 16px;
  border:1px solid #8d9e89;
  border-radius:7px;
  color:var(--map-ink);
  background:#fffaf0;
  box-shadow:0 2px 0 #d2c6ad;
  font:600 14px/1.3 var(--font-body);
}
body.hybrid-world #world-map #map-reset:hover {background:#e6e6d0;border-color:#6e856b;}
body.hybrid-world #world-map #map-reset:focus-visible {outline:3px solid #a64d31;outline-offset:4px;}

/* The side map is a screen-space utility, not a physical object in the garden.
   Keep the riding scene visible for orientation while its controls are paused. */
body.hybrid-world:has(> #world-map[open]) {overflow:hidden;}
body.hybrid-world #world-map[data-presentation="side"] {
  position:fixed;
  inset:12px 12px 12px auto;
  width:min(420px,calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  height:calc(100dvh - 24px);
  max-height:calc(100dvh - 24px);
  margin:0;
  padding:0;
  border:1px solid #a5b19f;
  border-left:6px solid var(--map-timber);
  border-radius:12px;
  background:var(--map-paper);
  box-shadow:-8px 0 28px #1e3d312b;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scroll-padding-top:150px;
}
body.hybrid-world #world-map[data-presentation="side"]::backdrop {
  background:#193d3e24;
  backdrop-filter:none;
}
body.hybrid-world #world-map[data-presentation="side"][open] {animation:map-side-in 180ms cubic-bezier(.2,.7,.3,1);}
body.hybrid-world #world-map[data-presentation="side"] > .reader-top {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  position:sticky;
  top:0;
  z-index:5;
  min-height:0;
  width:100%;
  max-width:none;
  margin:0;
  padding:12px 16px;
  border-bottom:1px solid var(--map-edge);
  background:var(--map-paper);
}
body.hybrid-world #world-map[data-presentation="side"] > .reader-top #map-close {
  grid-column:2;
  grid-row:1;
  min-width:0;
  min-height:44px;
  padding:9px 10px;
  font-size:13px;
}
body.hybrid-world #world-map[data-presentation="side"] > .reader-top > .play-music-dock {
  grid-column:1/-1;
  grid-row:2;
  justify-self:start;
  position:static;
  margin:0;
  max-width:100%;
}
body.hybrid-world #world-map[data-presentation="side"] > .reader-top > #map-portfolio {
  grid-column:1;
  grid-row:1;
  max-width:100%;
}
body.hybrid-world #world-map[data-presentation="side"] .map-content {
  width:100%;
  min-width:0;
  padding:22px 16px 20px;
  border:0;
  border-radius:0;
  background:var(--map-paper);
  box-shadow:none;
}
body.hybrid-world #world-map[data-presentation="side"] .map-heading {display:block;}
body.hybrid-world #world-map[data-presentation="side"] #map-title {font-size:23px;margin-bottom:10px;}
body.hybrid-world #world-map[data-presentation="side"] .map-heading p:last-child {font-size:15px;line-height:1.55;}
body.hybrid-world #world-map[data-presentation="side"] .map-fold-label {display:none;}
body.hybrid-world #world-map[data-presentation="side"] .map-layout {grid-template-columns:minmax(0,1fr);gap:22px;margin-top:20px;}
body.hybrid-world #world-map[data-presentation="side"] .plan-view {position:relative;top:auto;margin:0;padding:8px;}
body.hybrid-world #world-map[data-presentation="side"] .plan-view svg {width:100%;height:220px;max-height:none;}
body.hybrid-world #world-map[data-presentation="side"] .plan-view figcaption {padding-top:8px;font-size:12px;gap:5px 10px;}
body.hybrid-world #world-map[data-presentation="side"] .map-destinations {gap:12px;}
body.hybrid-world #world-map[data-presentation="side"] .map-stop {padding:14px;}
body.hybrid-world #world-map[data-presentation="side"] .map-stop-copy {grid-template-columns:28px minmax(0,1fr);gap:10px;}
body.hybrid-world #world-map[data-presentation="side"] .map-number {width:28px;height:28px;}
body.hybrid-world #world-map[data-presentation="side"] .map-stop h2 {font-size:15px;margin:2px 0 7px;}
body.hybrid-world #world-map[data-presentation="side"] .map-stop p {font-size:14px;line-height:1.5;}
body.hybrid-world #world-map[data-presentation="side"] .map-stop-actions {margin:13px 0 0;}
body.hybrid-world #world-map[data-presentation="side"] .map-footer {display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:20px;}
body.hybrid-world #world-map[data-presentation="side"] .map-footer p {font-size:14px;}
body.hybrid-world #world-map[data-presentation="side"] #map-help {align-self:flex-start;}
body.hybrid-world #world-map[data-presentation="side"] .map-reset {flex:auto;align-items:flex-start;flex-direction:column;gap:12px;padding:14px;}
body.hybrid-world #world-map[data-presentation="side"] #map-reset {width:100%;}
@keyframes map-side-in {from{opacity:.5;transform:translateX(18px);}to{opacity:1;transform:translateX(0);}}
@media(max-width:1000px) {
  body.hybrid-world #world-map .map-content {padding:25px 24px 22px;border-width:8px;}
  body.hybrid-world #world-map .map-layout {gap:22px;}
  body.hybrid-world #world-map .map-fold-label {display:none;}
  body.hybrid-world #world-map .map-stop {padding:15px 14px;}
  body.hybrid-world #world-map .map-stop-actions {margin-left:0;}
}
@media(max-width:760px) {
  body.hybrid-world #world-map {padding:0 12px 25px;}
  body.hybrid-world #world-map .reader-top {padding:12px 0;gap:12px;flex-wrap:wrap;}
  body.hybrid-world #world-map #map-close {font-size:13px;padding:10px 12px;}
  body.hybrid-world #world-map .map-content {padding:22px 16px;border-width:6px;}
  body.hybrid-world #world-map #map-title {font-size:26px;}
  body.hybrid-world #world-map .map-layout {grid-template-columns:1fr;gap:22px;}
  body.hybrid-world #world-map .plan-view {position:relative;top:auto;}
  body.hybrid-world #world-map .plan-view svg {max-height:440px;}
  body.hybrid-world #world-map .plan-view figcaption>span:last-child {width:auto;}
  body.hybrid-world #world-map .map-footer {align-items:flex-start;flex-direction:column;gap:6px;}
  body.hybrid-world #world-map .map-reset {align-items:stretch;flex-direction:column;gap:12px;width:100%;}
}
@media(max-width:400px) {
  body.hybrid-world #world-map[data-presentation="side"] > .reader-top {grid-template-columns:minmax(0,1fr);}
  body.hybrid-world #world-map[data-presentation="side"] > .reader-top #map-close {grid-column:1;grid-row:2;justify-self:start;}
  body.hybrid-world #world-map[data-presentation="side"] > .reader-top > .play-music-dock {grid-row:3;}
}
@media(prefers-reduced-motion:reduce) {
  body.hybrid-world #world-map .map-stop-actions button {transition:none;}
  body.hybrid-world #world-map[data-presentation="side"][open] {animation:none;}
}
@media(forced-colors:active) {
  body.hybrid-world #world-map .map-content,
  body.hybrid-world #world-map .map-stop,
  body.hybrid-world #world-map .map-stop-actions button,
  body.hybrid-world #world-map .map-reset,
  body.hybrid-world #world-map #map-reset {border-color:CanvasText;box-shadow:none;}
}