/* A route's page — a drive's guide, a shared link — laid out as the
   planner's saved route (the user, 2026-10-29): the live map fills the
   window and the route's card floats over its left side. On a phone the
   map is a frame under the bar that scrolls away with the page, and the
   card is the page's one column. Loaded after /plan/plan.css, whose bar,
   card, facts, scan unit, pins and print sheet these pages share; what's
   here is the layout and the guide's own sections. */

/* ── the layout ── */
.rv { position: fixed; inset: var(--bar) 0 0 0; }
.rv-map { position: absolute; inset: 0; background: var(--map); }
.rv-map .map { position: absolute; inset: 0; }
/* The road as a picture until the live map draws it, and for good where
   it can't (no WebGL, no scripts): the same road, from the Worker. */
.rv-still { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; }
.rv-still img { width: calc(100% - 512px); height: 100%; object-fit: cover; }
.rv-map.live .rv-still { display: none; }
.rv .panel { display: flex; flex-direction: column; }
.rv .scroll { gap: 16px; }
/* Nothing in the card squeezes to fit (the photo did, to nothing). */
.rv .scroll > * { flex-shrink: 0; }
.rv .legend { left: 512px; }
@media (min-width: 1400px) { .rv .legend { left: 562px; } .rv-still img { width: calc(100% - 562px); } }

/* The route's photo, the card's first thing (the guides' cover). */
.rv-photo { position: relative; margin: -22px -22px 0; height: 210px; background: var(--fill); overflow: hidden; }
.rv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-photo figcaption { position: absolute; left: 12px; bottom: 8px; right: 12px; font-size: 11px; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.rv-photo figcaption a { color: inherit; text-decoration: none; }
.rv-head { position: relative; }
.rv-head.with-edit { padding-right: 84px; }
.rv-head .edit { top: 0; right: 0; }
.rv .crumbs { font-size: 12.5px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.rv .crumbs a { color: inherit; text-decoration: none; }
.rv .crumbs a:hover { color: var(--ink); }
.rv-head h1 { overflow-wrap: anywhere; margin-top: 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.rv-head .sub { margin-top: 5px; font-size: 15px; color: var(--ink-3); }
.rv .facts .chip { font-size: 13px; }
/* The link field on the white card: filled, so it reads as a field. */
.rv .paste.link input { background: var(--fill); font-weight: 700; }
.rv .scan .qr svg { width: 100%; height: 100%; display: block; }

/* On a phone, the store's button instead of a code to scan. */
.rv .go { display: none; }
.rv .go a { display: flex; align-items: center; justify-content: center; gap: 9px; height: 56px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; }
.rv .go a svg { width: 20px; height: 20px; fill: #161B18; }
.rv .go p { text-align: center; color: var(--ink-3); font-size: 13px; margin-top: 8px; }
.rv .platforms { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; color: var(--ink-3); }
.rv .platforms a { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; color: inherit; background: none; height: auto; }
.rv .platforms svg { width: 22px; height: 22px; display: block; fill: currentColor; }
.rv .platforms .psep { width: 1px; height: 20px; background: currentColor; opacity: .4; }
@media (max-width: 760px), (pointer: coarse) {
  .rv .scan, .rv .paste.link { display: none; }
  .rv .go { display: block; }
}

/* ── the guide's sections, sized for the card ── */
.rv .sect { padding-top: 18px; border-top: 1px solid var(--line); }
.rv .sect > h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.rv .prose p { font-size: 16px; line-height: 1.55; color: #C3CAC5; }
.rv .prose p + p { margin-top: 10px; }
.rv .prose a, .rv .know a, .rv .rv-sources a, .rv .check a { color: var(--green-ink); font-weight: 700; text-decoration: none; }
.rv .prose a:hover, .rv .know a:hover, .rv .rv-sources a:hover, .rv .check a:hover { text-decoration: underline; }

/* Along the way: the map's own marks, the flags and the stops' letters. */
.rv .along { list-style: none; padding: 0; margin: 0; }
.rv .along li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rv .along li:last-child { border-bottom: 0; }
.rv .along .badge { width: 26px; height: 26px; font-size: 13px; margin-top: 1px; }
.rv .along .badge.place { width: 12px; height: 12px; margin: 7px 7px 0; background: #242C27; }
.rv .along .what { padding-top: 2px; min-width: 0; }
.rv .along strong { font-weight: 700; }
.rv .along .what span { display: block; color: var(--ink-3); font-size: 15px; margin-top: 2px; }

/* Elevation and curves, one above the other in the card. */
.rv .units { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 18px; }
.rv .unit .ut { font-size: 15px; font-weight: 700; }
.rv .unit .us { font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.rv .unit .us em { font-style: normal; color: #ED6EA0; font-weight: 700; }
.rv .unit .ends { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.rv .elev { position: relative; height: 72px; margin-top: 10px; }
.rv .elev svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rv .elev .peak { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #0A84FF; box-shadow: 0 0 0 2px #fff; }
.rv .elev .stem { position: absolute; bottom: 0; width: 1px; background: rgba(60,60,67,.35); }
.rv .cbar { position: relative; margin-top: 30px; height: 12px; border-radius: 6px; }
.rv .cbar .twisty { position: absolute; bottom: 19px; height: 5px; border: 1.5px solid #C2185B; border-bottom: 0; border-radius: 1px 1px 0 0; }
.rv .cbar .twisty span { position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #ED6EA0; white-space: nowrap; }

.rv .know { padding-left: 20px; margin: 0; }
.rv .know li { font-size: 16px; line-height: 1.5; color: #C3CAC5; }
.rv .know li + li { margin-top: 7px; }
.rv .check { margin-top: 10px; font-size: 15.5px; color: #C3CAC5; }
.rv .faq h3 { margin: 0; font-size: 16px; font-weight: 700; }
.rv .faq p { font-size: 15.5px; line-height: 1.5; color: #C3CAC5; margin-top: 3px; }
.rv .faq h3 + p + h3 { margin-top: 14px; }

/* Nearby drives: a photo and its words. */
.rv .cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.rv .cards a { display: block; text-decoration: none; color: inherit; }
.rv .cards img { width: 100%; height: auto; aspect-ratio: 1.6 / 1; object-fit: cover; border-radius: 14px; background: var(--fill); display: block; }
.rv .cards .n { display: block; font-weight: 700; font-size: 15px; letter-spacing: -.01em; margin-top: 8px; line-height: 1.25; }
.rv .cards .m { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--ink-3); font-size: 13px; margin-top: 3px; }
.rv .cards a:hover .n { color: var(--green-ink); }
.rv .mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.15); flex: none; }
.rv .more-link { margin-top: 14px; font-weight: 700; font-size: 15px; }
.rv .more-link a { color: var(--green-ink); text-decoration: none; }

/* What the app adds. */
.rv .feats { display: grid; grid-template-columns: 1fr; gap: 14px; }
.rv .feat { display: flex; gap: 12px; align-items: flex-start; }
.rv .feat .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--green-tint); color: var(--green-ink); flex: none; }
.rv .feat .ic svg { width: 21px; height: 21px; }
.rv .feat b { display: block; font-size: 15.5px; letter-spacing: -.01em; }
.rv .feat .d { display: block; color: var(--ink-3); font-size: 14px; line-height: 1.4; margin-top: 2px; }
.rv .apex { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; color: #76E4B4; background: #1D2420; border-radius: 6px; padding: 2px 6px; vertical-align: 2px; letter-spacing: .02em; }
.rv .get { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.rv .get p { color: var(--ink-3); font-size: 14px; }
.rv .get p a { color: inherit; }
.rv .stores { display: flex; gap: 10px; flex-wrap: wrap; }
.rv .store { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 14px; background: #000; color: #fff; text-decoration: none; }
.rv .store svg { width: 24px; height: 26px; flex: none; fill: #161B18; }
.rv .store small { display: block; font-size: 11px; font-weight: 500; opacity: .85; line-height: 1; }
.rv .store b { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }

.rv .rv-sources { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.rv-links { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.rv-links a { color: var(--ink-3); text-decoration: none; }
.rv-links a:hover { color: var(--ink); }
.rv .missing { padding: 40px 0; text-align: center; color: var(--ink-3); }

/* "Your route may change" before Google Maps (a shared route's). */
.gmaps { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 14px; border: none; border-radius: 999px; background: var(--fill); color: var(--ink); font-weight: 700; font-size: 15.5px; }
.gmaps:hover { background: #242C27; }

/* The key needs room beside the card; below that the pins speak for themselves. */
@media (max-width: 1100px) { .rv .legend { display: none !important; } }

/* ── phones (and phones held sideways): a frame of map, then the card as
   the page; the map comes first on screen though the card leads the page ── */
@media (max-width: 699px), (max-height: 560px) {
  html, body { height: auto; }
  body { background: #161B18; }
  .rv { position: static; padding-top: var(--bar); display: flex; flex-direction: column; }
  .rv-map { order: -1; }
  .rv-map { position: relative; inset: auto; height: 46vh; min-height: 260px; max-height: 420px; }
  .rv-still img { width: 100%; }
  .rv .panel { position: static; width: auto; border-radius: 0; box-shadow: none; overflow: visible; }
  .rv .scroll { overflow: visible; padding: 22px 18px 18px; }
  .rv .foot.quiet { display: none; }
  .rv .legend { left: 50%; transform: translateX(-50%); bottom: auto; top: calc(var(--bar) + 46vh - 52px); position: absolute; display: none; }
  /* The photo isn't a second banner under the map (the user, 2026-10-29):
     it follows the name and the facts, a picture in the column. */
  .rv .scroll > * { order: 3; }
  .rv .scroll > .rv-head { order: 0; }
  .rv .scroll > .facts { order: 1; }
  .rv .scroll > .rv-photo { order: 2; margin: 0; height: 190px; border-radius: 16px; }
  .rv-head h1 { font-size: 28px; }
  .rv .facts .sep { display: none; }
  /* The app's button stays in reach (the user, 2026-10-29): a bar locked
     to the bottom of the screen while the page scrolls under it. */
}

/* On a phone, an "open in the app" bar locked to the bottom while the page
   scrolls (the user, 2026-10-29): white, so it doesn't fight the green
   navbar, with a close button; the full-width button stays in the column. */
.rv .app-banner { display: none; }
@media ((max-width: 699px) or (max-height: 560px)) and ((max-width: 760px) or (pointer: coarse)) {
  .rv:has(.app-banner) { padding-bottom: 68px; }
  .rv .app-banner { display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 10px 16px max(10px, env(safe-area-inset-bottom)) 6px; background: #161B18; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0,0,0,.08); }
  .rv .app-banner .x { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
  .rv .app-banner .x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
  .rv .app-banner a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
  .rv .app-banner img { flex: none; width: 40px; height: 40px; border-radius: 9px; }
  .rv .app-banner .why { flex: 1; min-width: 0; font-size: 16px; font-weight: 800; line-height: 1.25; }
  .rv .app-banner .open { flex: none; display: flex; align-items: center; height: 38px; padding: 0 20px; border-radius: 999px; background: var(--green); color: #fff; font-size: 15px; font-weight: 800; }
  html.banner-closed .rv { padding-bottom: 0; }
  html.banner-closed .rv .app-banner { display: none; }
}

/* ── the browser's own Print: the guide itself (Print directions fills
   #printout instead, and plan.css prints only that) ── */
@media print {
  body:has(#printout:empty) > .rv { display: block !important; position: static; }
  body:has(#printout:empty) .rv-map, body:has(#printout:empty) .legend, body:has(#printout:empty) .foot,
  body:has(#printout:empty) .scan .two, body:has(#printout:empty) .paste.link, body:has(#printout:empty) .go, body:has(#printout:empty) .app-banner,
  body:has(#printout:empty) #rv-edit, body:has(#printout:empty) #rv-app, body:has(#printout:empty) .rv-links { display: none !important; }
  body:has(#printout:empty) .rv .panel { position: static; width: auto; box-shadow: none; border-radius: 0; overflow: visible; }
  body:has(#printout:empty) .rv .scroll { overflow: visible; padding: 0; }
  body:has(#printout:empty) .rv-photo { margin: 0; break-inside: avoid; }
  .rv .sect, .rv .unit { break-inside: avoid; }
}

/* light theme (scripts/light_theme.py): the device's light setting */
@media not all and (prefers-color-scheme: dark) {
  .rv .go a svg { fill: #fff; }
  .rv .platforms svg { fill: currentColor; }
  .rv .prose p { color: #3A3A3C; }
  .rv .prose a, .rv .know a, .rv .rv-sources a, .rv .check a { color: var(--green); }
  .rv .along .badge.place { background: #C7C7CC; }
  .rv .along .what span { color: var(--ink-3); }
  .rv .unit .us { color: var(--ink-3); }
  .rv .unit .us em { color: #C2185B; }
  .rv .unit .ends { color: var(--ink-3); }
  .rv .elev .peak { background: #0A84FF; }
  .rv .elev .stem { background: rgba(60,60,67,.35); }
  .rv .cbar .twisty span { color: #C2185B; }
  .rv .know li { color: #3A3A3C; }
  .rv .check { color: #3A3A3C; }
  .rv .faq p { color: #3A3A3C; }
  .rv .cards a { color: inherit; }
  .rv .cards img { background: var(--fill); }
  .rv .cards .m { color: var(--ink-3); }
  .rv .cards a:hover .n { color: var(--green); }
  .rv .more-link a { color: var(--green); }
  .rv .feat .ic { background: var(--green-tint); color: var(--green); }
  .rv .feat .d { color: var(--ink-3); }
  .rv .apex { color: #13623F; background: #E2F4EA; }
  .rv .get p { color: var(--ink-3); }
  .rv .get p a { color: inherit; }
  .rv .store { background: #000; color: #fff; }
  .rv .store svg { fill: #fff; }
  .rv .rv-sources { color: var(--ink-3); }
  .rv-links a { color: var(--ink-3); }
  .rv-links a:hover { color: var(--ink); }
  .rv .missing { color: var(--ink-3); }
  .gmaps { background: var(--fill); color: var(--ink); }
  .gmaps:hover { background: #E8E7E3; }
  @media (max-width: 699px), (max-height: 560px) {
  body { background: #fff; }
  }
  @media ((max-width: 699px) or (max-height: 560px)) and ((max-width: 760px) or (pointer: coarse)) {
  .rv .app-banner { background: #fff; }
  .rv .app-banner .x { background: none; color: var(--ink-3); }
  .rv .app-banner .x svg { fill: none; }
  .rv .app-banner a { color: var(--ink); }
  .rv .app-banner .open { background: var(--green); color: #fff; }
  }
}
/* end light theme */