/* Travel Map Animation */
.ra-wrap { max-width: 1240px; }
.ra-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.ra-builder { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ra-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ra-preview-card { padding: 18px; }
.ra-controls { padding: 18px; display: flex; flex-direction: column; gap: 13px; }

/* ── search ─────────────────────────────────── */
.ra-search-wrap { position: relative; }
.ra-search-wrap label {
  display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 7px;
}

/* base.css scopes its input styling to `.field input[...]`, and these two sit outside a
   .field — so without this they render as raw browser defaults: Arial, a 2px inset border
   and square corners on a dark card. Same values as the shared rule, kept in sync by hand. */
.ra-search-wrap input[type=text],
.ra-coord-row input[type=text],
.ra-coord-row input[type=number] {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ra-search-wrap input[type=text] { padding: 11px 12px; font-size: .95rem; }
.ra-search-wrap input[type=text]::placeholder,
.ra-coord-row input::placeholder { color: var(--muted-2); }
.ra-search-wrap input[type=text]:hover,
.ra-coord-row input:hover { border-color: var(--muted-2); }
.ra-search-wrap input[type=text]:focus,
.ra-coord-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}
/* Spinners crowd a 70px column and are useless for a latitude. */
.ra-coord-row input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ra-coord-row input[type=number]::-webkit-outer-spin-button,
.ra-coord-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ra-hint { margin: 6px 0 0; font-size: .78rem; color: var(--muted-2); }
.ra-results {
  position: absolute;
  z-index: 20;
  left: 0; right: 0; top: 100%;
  margin-top: 4px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}
/* Scoped to the dropdown on purpose: #raResult -- the finished-video panel -- also carries
   class="ra-result", and an unscoped rule laid it out as a flex row with align-items:baseline,
   putting the video and the Download buttons side by side instead of stacked. #raResult's own
   rules set only margin/border-top/padding-top, so they never overrode display or cursor. */
.ra-results .ra-result {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ra-results .ra-result:last-child { border-bottom: 0; }
.ra-results .ra-result:hover, .ra-results .ra-result:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, var(--card-2));
  outline: none;
}
.ra-results .ra-result b { font-size: .9rem; }
.ra-results .ra-result small { color: var(--muted); font-size: .76rem; }

.ra-coords summary { cursor: pointer; font-size: .82rem; color: var(--muted); }
/* minmax(0, …) rather than 1fr: a grid track's automatic minimum is the item's
   min-content width, and a number input's is wide enough to burst a 375px card. */
.ra-coord-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 70px auto;
  gap: 6px;
  margin-top: 8px;
}
.ra-coord-row input { font-size: .84rem; padding: 9px 10px; min-width: 0; }

/* ── itinerary ──────────────────────────────── */
.ra-stops { display: flex; flex-direction: column; }
.ra-stop {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  cursor: grab;
  transition: border-color .14s, background .14s, transform .14s;
}
.ra-stop:active { cursor: grabbing; }
.ra-stop.is-dragging { opacity: .45; }
.ra-stop.is-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-soft));
  transform: translateY(1px);
}

/* The leg sits between two stops, joined to both by a vertical rule — the visual claim is
   "this is how you got from the stop above to the stop below". */
.ra-leg {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0 6px 10px;
  margin-left: 10px;
  border-left: 2px solid var(--line);
  position: relative;
}
/* Seven modes plus the distance have to fit a 330px sidebar without wrapping to a second
   row, which read as a stray eighth button. */
.ra-modes { display: flex; gap: 2px; flex-wrap: nowrap; }
.ra-mode-btn {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--muted-2);
  cursor: pointer;
  transition: color .14s, background .14s, border-color .14s;
}
.ra-mode-btn svg { width: 15px; height: 15px; }
.ra-mode-btn:hover { color: var(--text); background: var(--card-2); }
.ra-mode-btn.is-on {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
}
.ra-leg-km {
  margin-left: auto;
  font-size: .74rem;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ra-stop-acts { display: flex; gap: 4px; flex: none; }
.ra-stop-n {
  flex: none;
  width: 21px; height: 21px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}
.ra-stop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ra-stop-body b {
  font-size: .86rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ra-stop-body small { font-size: .72rem; color: var(--muted); }
.ra-mini {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card-2);
  color: var(--text);
  font-size: .72rem;
  cursor: pointer;
  font-family: inherit;
}
.ra-mini:hover:not(:disabled) { border-color: var(--accent); }
.ra-mini:disabled { opacity: .35; cursor: default; }
.ra-mini-x:hover { border-color: var(--danger); color: var(--danger); }

.ra-empty, .ra-restored, .ra-summary { margin: 0; font-size: .82rem; line-height: 1.5; }
.ra-empty { color: var(--muted-2); }
.ra-restored { color: var(--accent-2); }
.ra-summary { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.ra-builder-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ra-small { font-size: .8rem; padding: 7px 11px; }
.ra-mini2 { font-size: .75rem; padding: 6px 9px; }

.ra-status { font-size: .85rem; color: var(--muted); }
.ra-status.error { color: var(--danger); }
.ra-status.ok { color: var(--good); }
.ra-status.warn { color: var(--warn); }
.ra-status.loading { color: var(--accent-2); }

/* ── preview ────────────────────────────────── */
/* Intrinsic size keeps the element hugging the frame at every aspect ratio. */
.ra-canvas {
  display: block;
  max-width: 100%;
  max-height: 66vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  cursor: crosshair;
}
.ra-bar { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ra-spacer { flex: 1; }
.ra-result-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ra-meta { font-size: .84rem; color: var(--muted); }
#raResult { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
#raResult video {
  display: block; width: 100%; max-height: 56vh;
  border-radius: var(--radius-sm); background: #0b0e1c;
}

/* ── controls ───────────────────────────────── */
.ra-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ra-color-row { display: flex; gap: 6px; align-items: center; }
.ra-color-row input[type=color] { flex: 1; height: 38px; padding: 3px; cursor: pointer; }
.ra-val { color: var(--muted); font-weight: 400; font-size: .8rem; }
.ra-controls input[type=range] { width: 100%; accent-color: var(--accent); }
.ra-check {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; color: var(--text); cursor: pointer;
}
.ra-check input { accent-color: var(--accent); }

@media (max-width: 940px) {
  .ra-layout { grid-template-columns: minmax(0, 1fr); }
  .ra-bar .btn { flex: 1 1 auto; }
  .ra-spacer { display: none; }
}

/* At 375px the four-column coordinate row pushes its Add button past the card edge. */
@media (max-width: 420px) {
  .ra-coord-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ra-coord-row input:first-child { grid-column: 1 / -1; }
  .ra-coord-row button { grid-column: 1 / -1; }
}


/* ── map style chips ────────────────────────── */
.ra-styles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}
.ra-style {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--muted);
  font: inherit;
  font-size: .7rem;
  cursor: pointer;
  transition: border-color .15s, color .15s, transform .15s;
}
.ra-style:hover { border-color: var(--muted-2); color: var(--text); transform: translateY(-1px); }
.ra-style.is-on {
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
/* The chip is a miniature of the map itself: background, a landmass, and the route colour. */
.ra-style-sw {
  position: relative;
  width: 100%; height: 26px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}
.ra-style-sw i {
  position: absolute; left: 12%; top: 22%;
  width: 52%; height: 62%;
  border-radius: 40% 55% 45% 50%;
}
.ra-style-sw em {
  position: absolute; left: 18%; top: 62%;
  width: 66%; height: 3px;
  border-radius: 2px;
  transform: rotate(-14deg);
}
.ra-style small { line-height: 1; }

.ra-reset {
  float: right;
  border: 0; background: none;
  color: var(--accent);
  font: inherit; font-size: .74rem;
  cursor: pointer; padding: 0;
  text-decoration: underline;
}
#raResetColor.is-auto { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line)); }
.ra-canvas { touch-action: none; }

/* The canvas is often far narrower than its card — a 9:16 frame in a 870px column. Without
   this, the zoom and action bars span the whole card while the map is a narrow strip in the
   middle, which reads as badly aligned. The stage shrink-wraps to the canvas so every
   control sits directly under the map at the same width. */
.ra-stage {
  max-width: 100%;
  margin: 0 auto;
  /* Width is set in JS from the canvas's own rendered size — fit-content here sizes to the
     widest child (the zoom slider), not to the map. */
}

/* ── zoom bar, docked to the preview ────────── */
/* Zoom used to live in the settings card below the fold, so changing it meant scrolling
   away from the very map it changes. It sits on the preview now. */
.ra-zoombar {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
}
.ra-zoom-ico { font-size: .8rem; opacity: .7; flex: none; }
.ra-zoombar input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.ra-zoomval {
  flex: none; min-width: 42px; text-align: right;
  font-size: .8rem; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ra-reset {
  flex: none;
  border: 0; background: none; color: var(--accent);
  font: inherit; font-size: .76rem; cursor: pointer; padding: 0 2px;
  text-decoration: underline;
}
.ra-zoom-hint { flex: none; font-size: .74rem; color: var(--muted-2); }

/* ── route colour ───────────────────────────── */
.ra-color-row { display: flex; gap: 9px; align-items: center; }
/* A full-width colour input reads as a giant coloured bar on a phone. A fixed swatch with
   the explanation beside it is legible at any width. */
.ra-swatch {
  flex: none;
  width: 46px; height: 34px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  display: block;
}
.ra-swatch input[type=color] {
  width: 150%; height: 150%;
  margin: -25% 0 0 -25%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.ra-color-note { flex: 1; min-width: 0; font-size: .76rem; color: var(--muted-2); line-height: 1.35; }

/* ── desktop: keep the map on screen while the settings scroll ── */
@media (min-width: 941px) {
  /* Builder and settings share one left rail; the map takes the whole right column and
     sticks. Stacking settings *under* the preview meant every option was hidden behind the
     map — this way nothing is hidden and the map is still visible while you change things. */
  .ra-wrap { max-width: 1360px; }
  .ra-layout { grid-template-columns: 360px minmax(0, 1fr); }
  .ra-right { display: contents; }
  .ra-builder  { grid-column: 1; grid-row: 1; }
  .ra-controls { grid-column: 1; grid-row: 2; }
  .ra-preview-card {
    grid-column: 2; grid-row: 1 / span 2;
    position: sticky; top: 74px; z-index: 2;
  }
  .ra-canvas { max-height: 62vh; }
}

/* ── mobile ─────────────────────────────────── */
@media (max-width: 940px) {
  /* The map leads because it is the thing being made, but it is NOT sticky: a pinned map
     ate the top half of the screen and left every option behind it. It scrolls away
     normally, and the controls that matter most to the map — zoom, preview, export — are
     docked to it, so they scroll together. */
  .ra-layout { display: flex; flex-direction: column; }
  .ra-right { display: contents; }
  .ra-preview-card { order: 1; }
  .ra-builder { order: 2; }
  .ra-controls { order: 3; }
  .ra-styles { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .ra-zoom-hint { display: none; }
  .ra-canvas { max-height: 40vh; }
}
@media (max-width: 560px) {
  .ra-two { grid-template-columns: minmax(0, 1fr); }
  .ra-builder, .ra-controls, .ra-preview-card { padding: 14px; }
  .ra-stop-body b { font-size: .9rem; }
  .ra-zoombar { padding: 7px 10px; gap: 7px; }
  .ra-color-note { display: none; }
  .ra-bar .btn { flex: 1 1 auto; }
}

/* Touch targets. The transport picker and the stop up/down/remove buttons were 24px squares
   (27px for modes on phones) — roughly half the ~44px platforms ask for, on the two controls
   you have to hit most often when building a trip on a phone. Fixed widths are what made
   them small, so instead let the seven mode buttons share the row: each lands near 40px wide
   at 375px and still fits on one line, with no wrapping and no horizontal scroll. */
@media (pointer: coarse) {
  .ra-modes { gap: 3px; flex: 1 1 auto; min-width: 0; }
  .ra-mode-btn { width: auto; min-width: 0; flex: 1 1 0; height: 40px; border-radius: 9px; }
  .ra-mode-btn svg { width: 17px; height: 17px; }
  .ra-mini { width: 38px; height: 38px; border-radius: 9px; }
  .ra-stop-acts { gap: 5px; }
}

.ra-places-note { margin: 4px 0 0; font-size: .74rem; color: var(--accent-2); }
/* GeoNames is CC BY 4.0 — the attribution is a licence obligation, not decoration. */
.ra-attrib { margin: 6px 0 0; font-size: .72rem; color: var(--muted-2); line-height: 1.5; }
.ra-attrib a { color: var(--muted); }