/* Permit review (permitReview.js) — the app's three-step review on the console's tokens.
   Mobile first: one column, the map above the panel. From 981px the panel sits left of a tall map.
   Elevation is the tone ladder (--bg → --card → --nest), no outlines on cards, no resting shadows.
   Colour only on status (amber / red / green) and on the route itself (the app's blue). */

.rv { display: flex; flex-direction: column; gap: 14px; }
.rv-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Header: back, title + permit number, "Step 2 of 3 · Start & End" with the three dots. */
.rv-head { display: flex; flex-direction: column; gap: 4px; }
.rv-back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 44px; padding: 0 4px 0 0;
  border: 0; background: none; color: var(--dim); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.rv-back:hover { color: var(--text); }
.rv-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rv-title h1 { margin: 0; font-size: clamp(22px, 4vw, 28px); overflow-wrap: anywhere; }
.rv-ident { display: inline-flex; align-items: center; gap: 2px; color: var(--dim); font-size: 14px; font-variant-numeric: tabular-nums; }
.rv-copy { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px;
  background: none; color: var(--dim); cursor: pointer; }
.rv-copy:hover { color: var(--text); background: var(--raised-2); }
.rv-copy .rv-ic { width: 16px; height: 16px; }
.rv-copy.is-done { color: var(--green); }
.rv-progress { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--dim); font-size: 14px; font-variant-numeric: tabular-nums; }
.rv-dots { display: inline-flex; gap: 5px; }
.rv-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--raised-2); }
.rv-dots i.done { background: var(--dim); }
.rv-dots i.on { width: 16px; background: var(--text); }

/* Admin: "Permit says … / Route starts on …" above the map (permitReview.js routeFacts). */
.rv-facts { display: flex; flex-direction: column; gap: 2px; }
.rv-facts p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.rv-facts-k { color: var(--dim); }

/* Layout */
.rv-grid { display: flex; flex-direction: column; gap: 14px; }
.rv-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border-radius: 14px; background: var(--card); }
.rv-step-1 .rv-panel { max-width: 760px; }

/* The map */
.rv-map { position: relative; height: 52vh; min-height: 300px; border-radius: 14px; overflow: hidden; background: var(--nest); }
.rv-map-canvas { position: absolute; inset: 0; }
.rv-map-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--dim); font-size: 15px; pointer-events: none; }
.rv-map-btn { position: absolute; left: 10px; bottom: 10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 22px; background: var(--card); color: var(--text); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.rv-placing { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 2px 2px 14px; border-radius: 12px; background: var(--amber); color: #111; font-size: 14.5px; font-weight: 500; }
.rv-placing .rv-icon-btn { color: #111; }
.rv-snapping { position: absolute; top: 66px; left: 12px; margin: 0; padding: 4px 10px; border-radius: 8px; background: var(--card); color: var(--accent); font-size: 13px; }

/* Pins: a 44 px target around a small dot (StepEndpoints renderPin). */
.rv-pin { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.rv-pin span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); background: var(--dim); }
.rv-pin-start span { background: var(--green); }
.rv-pin-custom span { background: #8E4EC6; }
/* The trip's end: deep blue from the route's own family, never red (owner, 2026-11-11: red reads as danger). */
.rv-pin-end span { background: #1D4ED8; }
.rv-pin-permit span { width: 14px; height: 14px; background: var(--dim); }
/* The start / end chip (reviewMap.js setPins): the pin's word beside its dot, in the dot's colour. */
.rv-pin .rv-pin-tag, .rv-pt .rv-pin-tag { position: absolute; left: 36px; top: 50%; transform: translateY(-50%); padding: 2px 8px; border-radius: 6px;
  background: var(--card); color: var(--text); font-size: 12.5px; font-weight: 500; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.35); pointer-events: none; }
.rv-pin-start .rv-pin-tag, .rv-pt-start .rv-pin-tag { color: var(--green); }
.rv-pin-end .rv-pin-tag, .rv-pt-end .rv-pin-tag { color: var(--text); }
.rv-pin.is-draggable { cursor: grab; }
.rv-pin.is-draggable:active { cursor: grabbing; }

/* Groups and rows (StepDetails / ConfidenceRow) */
.rv-sec { margin: 8px 0 0; font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--dim); }
.rv-group { display: flex; flex-direction: column; border-radius: 12px; background: var(--nest); overflow: hidden; }
.rv-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px 6px 10px 14px; border-top: 1px solid var(--line-soft); min-width: 0; }
.rv-row:first-child { border-top: 0; }
.rv-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rv-k { margin: 0; color: var(--dim); font-size: 13px; }
.rv-v { display: flex; align-items: flex-start; gap: 6px; font-size: 15px; overflow-wrap: anywhere; white-space: pre-line; font-variant-numeric: tabular-nums; }
.rv-v .rv-ic { width: 16px; height: 16px; margin-top: 3px; }
.rv-row.warn .rv-v .rv-ic, .rv-flag { color: var(--amber); }
.rv-row.block .rv-v .rv-ic, .rv-row.block .rv-flag { color: var(--red); }
.rv-flag { font-size: 13.5px; line-height: 1.45; }
.rv-tag { align-self: flex-start; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 500;
  color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.rv-badge { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 3px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 500;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rv-badge .rv-ic { width: 13px; height: 13px; }
.rv-row-acts { display: flex; flex: none; }
.rv-icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 0; border-radius: 10px; background: none; color: var(--dim); cursor: pointer; }
.rv-icon-btn:hover { color: var(--text); background: var(--raised-2); }
.rv-input { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  color: var(--text); font: inherit; font-size: 16px; }
.rv-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.rv-input[aria-invalid="true"] { border-color: var(--red); }
.rv-edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.rv-edit-actions .btn { min-height: 44px; padding: 0 16px; }

/* Legal cards (LegalTextCard) */
.rv-legal { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--nest); }
.rv-legal-t { margin: 0; font-size: 13.5px; font-weight: 500; }
.rv-legal.block .rv-legal-t { color: var(--red); }
.rv-legal.warn .rv-legal-t { color: var(--amber); }
.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-chip { padding: 3px 9px; border-radius: 999px; background: var(--card); font-size: 13px; }
.rv-legal-a { margin: 0; font-size: 14px; }
.rv-legal summary { cursor: pointer; color: var(--accent); font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.rv-legal-full { margin: 0; font-size: 13.5px; color: var(--body); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }

/* Notices (CorridorGapNotice, RouteChoicesNotice, ExpiredPermitNotice, MultiStateNotice) */
.rv-notice { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--nest); }
.rv-n-t { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14.5px; font-weight: 500; }
.rv-n-t .rv-ic { margin-top: 2px; }
.rv-notice.warn .rv-n-t .rv-ic { color: var(--amber); }
.rv-notice.block .rv-n-t .rv-ic { color: var(--red); }
.rv-notice.info .rv-n-t .rv-ic { color: var(--dim); }
.rv-n-b, .rv-n-l { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body); }
.rv-n-l { color: var(--dim); }
.rv-n-actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* Footer (StepFooter): the attention line, the acknowledge link, the one primary, Discard. */
.rv-foot { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.rv-attn { margin: 0; text-align: center; font-size: 13.5px; }
.rv-attn.warn { color: var(--amber); }
.rv-attn.ok { color: var(--green); }
.rv-cta { position: relative; display: flex; width: 100%; min-height: 52px; overflow: hidden; font-size: 15.5px; }
.rv-cta[disabled] { background: var(--nest); color: var(--dim); border-color: transparent; opacity: 1; }
/* Busy is not disabled: while the route builds, the button is the progress bar, blue and filling, with a wait cursor. */
.rv-cta[role="progressbar"] { background: color-mix(in srgb, var(--accent) 10%, var(--card)); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); cursor: progress; }
.rv-cta-l { position: relative; }
.rv-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: color-mix(in srgb, var(--accent) 22%, transparent); transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .rv-fill { transition: none; } }
.rv-slow { margin: 0; text-align: center; color: var(--dim); font-size: 13px; }
.rv-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px;
  border: 0; background: none; color: var(--accent); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.rv-link.warn { color: var(--amber); }
/* Discard (owner, 2026-11-10: grey text that turned red only on hover read as two different controls): a quiet neutral
   button that looks the same at rest and on hover; the red is its confirm's. */
.rv-discard { align-self: center; min-height: 36px; padding: 0 16px; font-size: 14px; }
/* Discard on its own line, a clear 16px under the primary on every step (owner QA, 2026-11-10: at the foot of step 3's
   scrolling panel it read as overlapping Confirm Route's pill), with room under it before the panel edge. */
.rv-foot .rv-discard { margin-top: 10px; margin-bottom: 4px; }
.rv-wide { display: flex; width: 100%; min-height: 48px; gap: 8px; font-size: 14.5px; }
/* Full width on phones only; on wider screens a button is as wide as its label (owner, 2026-11-09: no long bars). */
@media (min-width: 561px) {
  .rv-cta { width: auto; min-width: 220px; align-self: center; padding: 0 28px; justify-content: center; }
  .rv-wide { width: auto; align-self: flex-start; padding: 0 18px; min-height: 44px; }
}
.rv-count { min-width: 22px; padding: 0 6px; border-radius: 11px; background: var(--amber); color: #111; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Step 2: the endpoint rows */
.rv-eps { display: flex; flex-direction: column; gap: 8px; }
.rv-ep { display: flex; flex-direction: column; align-items: stretch; gap: 3px; width: 100%; min-height: 64px; padding: 10px 14px;
  border: 0; border-radius: 12px; background: var(--nest); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rv-ep:hover { background: var(--raised-2); }
.rv-ep-k { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.rv-ep-k .rv-tag { text-transform: none; letter-spacing: 0; }
.rv-ep.warn .rv-ep-k .rv-ic { color: var(--amber); width: 16px; height: 16px; }
.rv-ep.block .rv-ep-k .rv-ic { color: var(--red); width: 16px; height: 16px; }
.rv-ep-v { font-size: 15.5px; overflow-wrap: anywhere; }
.rv-ep-d { color: var(--dim); font-size: 13.5px; overflow-wrap: anywhere; }
.rv-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); flex: none; }
.rv-dot.custom { background: #8E4EC6; }
.rv-dot.end { background: #1D4ED8; }

/* The endpoint editor */
.rv-editor { display: flex; flex-direction: column; gap: 10px; }
.rv-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-editor-head h2 { margin: 0; font-size: 19px; }
.rv-search { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-radius: 10px; background: var(--nest); color: var(--dim); }
.rv-search .rv-input { border: 0; background: transparent; padding-left: 0; }
.rv-editor-under { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rv-hint { margin: 0; font-size: 13.5px; color: var(--dim); }
.rv-hint.warn { color: var(--amber); }
.rv-results { list-style: none; margin: 0; padding: 0; width: 100%; border-radius: 12px; background: var(--nest); overflow: hidden; }
.rv-results li + li { border-top: 1px solid var(--line-soft); }
.rv-results button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border: 0; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rv-results button:hover { background: var(--raised-2); }
.rv-results button > span { display: flex; flex-direction: column; min-width: 0; }
.rv-results b { font-weight: 500; font-size: 15px; }
.rv-results button > span span { color: var(--dim); font-size: 13.5px; }
.rv-results .rv-ic { color: var(--dim); }
.rv-onpermit { padding: 10px 14px; border-radius: 12px; background: var(--nest); }
.rv-onpermit p { margin: 0; font-size: 14px; color: var(--body); overflow-wrap: anywhere; }
.rv-onpermit .rv-k { font-size: 12.5px; font-weight: 500; margin-bottom: 2px; }

/* Step 3: the sections */
.rv-sum { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.rv-sum.warn { color: var(--amber); }
.rv-sum.ok { color: var(--green); }
.rv-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rv-card { display: flex; flex-direction: column; gap: 8px; border-radius: 12px; background: var(--nest); }
.rv-card.is-active { box-shadow: inset 0 0 0 2px var(--text); }
.rv-card-b { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; border: 0; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rv-card-n { flex: none; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--dim); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rv-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rv-card-t b { font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }
.rv-card-t span { color: var(--dim); font-size: 13.5px; line-height: 1.45; }
.rv-card-s { flex: none; margin-top: 2px; }
.rv-card-s.ok { color: var(--green); }
.rv-card-s.warn, .rv-card.warn .rv-card-t span { color: var(--amber); }
.rv-card-s.block, .rv-card.block .rv-card-t span { color: var(--red); }
/* A selected section's Accept, Reset to auto, the via pin. */
.rv-split { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 12px 12px; }
/* Modify / Accept: label-sized pills beside each other, never full width (owner, 2026-11-10 compact controls). */
.rv-split .btn { flex: 0 0 auto; width: auto; min-height: 36px; padding: 6px 14px; gap: 6px; border-radius: 999px; }
.rv-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rv-build { display: flex; flex-direction: column; gap: 6px; flex: 1 1 100%; }
.rv-build-bar { display: block; height: 4px; border-radius: 2px; background: var(--nest); overflow: hidden; }
.rv-build-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--accent); transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .rv-build-fill { transition: none; } }
.rv-link.quiet { color: var(--dim); font-weight: 400; font-size: 14px; padding: 0 4px; }
.rv-link.quiet:hover { color: var(--text); }
.rv-pin-waypoint span { width: 14px; height: 14px; background: #3D8BFF; } /* RouteMapLayers MAP_PIN_INTERMEDIATE, fixed in both themes */

.rv-dialog .up-help { line-height: 1.55; }
.rv-dlg-foot .btn { min-height: 44px; padding: 0 18px; }

@media (min-width: 981px) {
  .rv-grid.rv-step-2, .rv-grid.rv-step-3 { flex-direction: row-reverse; align-items: flex-start; }
  .rv-step-2 .rv-panel, .rv-step-3 .rv-panel { flex: 0 0 400px; max-height: calc(100vh - 160px); overflow-y: auto; }
  .rv-step-2 .rv-map, .rv-step-3 .rv-map { flex: 1; position: sticky; top: 20px; height: calc(100vh - 160px); min-height: 480px; }
}
@media (max-width: 560px) {
  .rv-panel { padding: 14px 12px; }
  .rv-map { height: 46vh; border-radius: 12px; }
  /* The road-work chip shrinks to its icon so it stands in the control column the route fit clears (reviewMap.js fit:
     right + 52); its full width covered the End chip. Screen readers still get the text; amber ring = not fully checked. */
  .rv-map .rw-chip.maplibregl-ctrl { padding: 4px 6px; }
  .rv-map .rw-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rv-map .rw-chip.is-warn { box-shadow: 0 0 0 2px var(--amber); }
}

/* Admin review: the route's start and end shown above and below the sections, not as buttons. */
.rv-ep.rv-ep-static { cursor: default; margin: 2px 0; flex-shrink: 0; height: auto; min-height: 0; padding: 6px 4px; gap: 2px;
  background: transparent; border: 0; border-radius: 0; }
.rv-ep.rv-ep-static .rv-ep-k { font-size: 11.5px; }
.rv-ep.rv-ep-static .rv-ep-v { font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-ep.rv-ep-static .rv-ep-d { font-size: 12.5px; }

/* Toll lanes and free frontage roads on a segment (owner, 2026-11-08). The plaque is the posted TOLL sign
   (MUTCD M4-15, black on yellow): a sign replica keeps its real colours in both themes, as the route shields do.
   `.rv-card-t span` colours every span in a card, so these rules are scoped under it to win. */
.rv-card-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-card-t .rv-roadnote { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; line-height: 16px; }
.rv-card-t .rv-roadnote.free { color: var(--green); border: 1px solid currentColor; border-radius: 6px; padding: 1px 6px; }
.rv-card-t .rv-roadnote.free.quiet { color: var(--dim); }
.rv-roadnote svg { width: 12px; height: 12px; }
.rv-roadnote.toll.wrong svg { color: var(--amber); }
.rv-card-t .rv-roadnote-n { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.rv-toll-plaque, .rv-card-t .rv-toll-plaque { display: inline-block; background: #FFCD00; color: #111111; border: 1.5px solid #111111; border-radius: 4px;
  padding: 0 5px; font-size: 11px; font-weight: 800; letter-spacing: .06em; line-height: 16px; }
.rv-toll-plaque.on-map { box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.rv-toll-sum { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rv-toll-sum.none { color: var(--green); }
.rv-toll-sum svg { width: 14px; height: 14px; }
/* A field's own rule, under its input while Accept is off (permitEdits validateFieldInput). */
.rv-issue { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--red); }

/* A state with no permit between two that have one (the app's PermitBundleReview missing_state row): in the list where the
   gap is, with the button that adds that state's permit; on the map, a dashed amber join named by this tag. */
.rv-gaprow { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid var(--amber); border-radius: 12px; background: var(--card); }
.rv-gaprow-t { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.45; }
.rv-gaprow-t::before { content: "!"; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--amber); color: var(--amber);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; line-height: 1; box-sizing: border-box; }
.rv-gaprow-add { min-height: 40px; }
.rv-gap-tag { padding: 3px 8px; border-radius: 6px; background: var(--card); color: var(--text); border: 1.5px solid var(--amber); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* Each route row: what the permit prints beside what the route drives there (permitReview.js pair). Stacked in a narrow
   list, side by side once the list has room (a container query on the panel, so every page's column width decides). */
.rv-panel { container: rvpanel / inline-size; }
.rv-pair { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin-top: 2px; }
.rv-pair-c { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rv-pair-k { font-size: 11.5px; line-height: 1.3; color: var(--dim); }
.rv-pair-v { font-size: 14px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.rv-pair-s { font-size: 12.5px; line-height: 1.3; color: var(--dim); font-variant-numeric: tabular-nums; }
@container rvpanel (min-width: 340px) {
  .rv-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
}
.rv-ep.rv-ep-static .rv-pair-v { font-size: 13.5px; }
.rv-card.extra { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.rv-card.extra .rv-card-s { color: var(--amber); }
.rv-card-n.off { background: none; }

/* Drawing state (owner, 2026-11-10: show that the route is still being drawn, not a blank). */
@keyframes rv-spin { to { transform: rotate(360deg); } }
.rv-spin { display: inline-block; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent, #58A6FF) 25%, transparent); border-top-color: var(--accent, #58A6FF); animation: rv-spin .8s linear infinite; }
.rv-wait { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); }
.rv-map-wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--panel, #161B22) 92%, transparent); color: var(--text); font-size: 13px; pointer-events: none; }
.rv-map-wait .rv-spin { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .rv-spin { animation-duration: 2.4s; } }

/* Compact check: a run of roads the permit does not name, as one quiet line (permitReview.js offLine). */
.rv-offline{list-style:none}
.rv-offline > button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:8px;background:none;color:var(--amber);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.rv-offline > button:hover{background:color-mix(in srgb,var(--amber) 10%,transparent)}
.rv-offline > button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.rv-offline svg{width:15px;height:15px;flex:none}

/* POINT CONTROL on the route check (permitReview.js routePins / pointBanner / centrePin), as the app draws it
   (RouteReviewScreen.tsx + GuidedCheckSheet.tsx, app 1cbdfbae / becfc9e4). The colours are the app's own tokens, not the
   console's: colors.ts darkColors / lightColors (card, line, textPrimary, textSecondary, primaryBlue, error, warning,
   success, onAccent), RouteMapLayers MAP_PIN_ORIGIN / _DESTINATION / _STROKE and useMapTheme pinOutline. Sizes are its
   points: a 44 target, 16 / 18 dots, 40 round buttons 6 apart either side of a 24 gap, a 22 "+", a 36 centre pin. */
.rv-map { --pt-card: #161B22; --pt-line: #30363D; --pt-ink: #E6EDF3; --pt-ink-2: #8B949E; --pt-outline: #0D1117;
  --pt-blue: #4DABF7; --pt-red: #F85149; --pt-on-accent: #0D1117; --pt-origin: #10B981; --pt-dest: #1D4ED8;
  --pt-warn: #F0883E; --pt-ok: #3FB950; --pt-stroke: #FFFFFF; }
:root[data-theme="light"] .rv-map { --pt-card: #FFFFFF; --pt-line: #C6C6C8; --pt-ink: #1C1C1E; --pt-ink-2: #636366; --pt-outline: #FFFFFF; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .rv-map { --pt-card: #FFFFFF; --pt-line: #C6C6C8; --pt-ink: #1C1C1E; --pt-ink-2: #636366; --pt-outline: #FFFFFF; }
}
.rv-ion { display: block; flex: none; fill: currentColor; }

/* A route point: the dot in its section's state (white to check, amber needs a look, green checked); the start and end
   in their own colours. The tapped one wears the blue ring. */
.rv-pt { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; }
.rv-pt > span { box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--pt-outline); background: var(--pt-stroke); }
.rv-pt-start > span, .rv-pt-end > span { width: 18px; height: 18px; }
.rv-pt-start > span { background: var(--pt-origin); }
.rv-pt-end > span { background: var(--pt-dest); }
.rv-pt-flag > span { background: var(--pt-warn); }
.rv-pt-done > span { background: var(--pt-ok); }
.rv-pt.is-sel > span { width: 22px; height: 22px; border: 3px solid var(--pt-blue); }
.rv-pt-start.is-sel > span, .rv-pt-end.is-sel > span { width: 24px; height: 24px; }
/* Over the route's shields (markers too), so a sign never hides a point; the open point's buttons over every other point. */
.rv-pt.maplibregl-marker, .rv-plus.maplibregl-marker, .rv-addmark.maplibregl-marker { z-index: 1; }
.rv-callout.maplibregl-marker { z-index: 2; }
.rv-pt:focus-visible, .rv-plus:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 50%; }

/* The two round buttons beside a tapped point (Move, the trash), or one (Move Start, Move End, Add Point). */
.rv-callout { display: flex; align-items: center; gap: 6px; pointer-events: none; }
.rv-callout-gap { width: 24px; height: 24px; flex: none; }
.rv-callout-gap.wide { width: 40px; }
.rv-round { box-sizing: border-box; width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--pt-line); border-radius: 50%; background: var(--pt-card); color: var(--pt-ink); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35); pointer-events: auto; transition: transform .12s ease; }
.rv-round .rv-ion { width: 20px; height: 20px; }
.rv-round.danger { color: var(--pt-red); }
.rv-round.strong { color: var(--pt-blue); }
.rv-round:hover { transform: scale(1.06); }
.rv-round:active { transform: scale(.94); }
.rv-round:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rv-round.big { width: 44px; height: 44px; }
.rv-round.big .rv-ion { width: 22px; height: 22px; }
.rv-round.set { border: 0; background: var(--pt-blue); color: var(--pt-on-accent); }
@media (prefers-reduced-motion: reduce) { .rv-round { transition: none; } .rv-round:hover, .rv-round:active { transform: none; } }
/* The spot a tap on the map offers a new point at. */
.rv-addmark { box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--pt-blue); pointer-events: none; }
/* The "+" midway between two points. */
.rv-plus { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; }
.rv-plus > span { box-sizing: border-box; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1.5px solid var(--pt-blue); background: var(--pt-card); color: var(--pt-blue); }
.rv-plus .rv-ion { width: 16px; height: 16px; }
.rv-plus:hover > span { transform: scale(1.12); }

/* GuidedCheckSheet's banner over the map: where the trip goes, then the instruction or what is happening, then Undo.
   The second line may wrap on a phone (the app keeps it to one line; on a 375 px map it cut the instruction off). */
.rv-pt-banner { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border-radius: 10px; background: var(--pt-card); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
.rv-pt-banner > .rv-ion { width: 24px; height: 24px; color: var(--pt-blue); }
.rv-pt-banner-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rv-pt-big { margin: 0; color: var(--pt-ink); font-size: 15px; font-weight: 700; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-pt-sub { margin: 0; color: var(--pt-ink-2); font-size: 13px; line-height: 17px; }
.rv-pt-sub.is-status { color: var(--pt-ink); }
.rv-pt-sub.warn { color: var(--pt-warn); }
.rv-pt-undo { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 32px; padding: 0 10px; border: 1px solid var(--pt-line); border-radius: 8px;
  background: none; color: var(--pt-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rv-pt-undo .rv-ion { width: 14px; height: 14px; }
.rv-pt-undo:hover { background: color-mix(in srgb, var(--pt-ink) 8%, transparent); }
.rv-pt-undo:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Undo (it says what it undoes) and Add Point. On a phone they take the banner's second row rather than squeeze the words. */
.rv-pt-banner { flex-wrap: wrap; }
.rv-pt-banner-t { flex-basis: 200px; }
.rv-pt-acts { display: flex; gap: 8px; margin-left: auto; }
.rv-pt-undo.add { color: var(--pt-blue); border-color: var(--pt-blue); }
.rv-pt-undo.danger { color: var(--pt-red); background: var(--pt-card); }
/* Delete, under the centre pin while a route point is moved. */
.rv-centre-del { position: absolute; left: 50%; top: calc((66px + 100%) / 2 + 40px); transform: translateX(-50%); pointer-events: auto; }

/* Move: the fixed centre pin, halfway between the banner (66 px, permitReview.js PIN_TOP) and the map's foot, with Cancel and
   Set Here either side of its tip. */
/* Moving a point: the road-work chip stands aside, its open width reached under Set Here on a mid-width map. */
.rv-map.is-moving .rw-chip { display: none; }
.rv-centre { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.rv-centre-pin { position: absolute; left: calc(50% - 18px); top: calc((66px + 100%) / 2 - 44px); width: 36px; height: 44px;
  display: flex; flex-direction: column; align-items: center; color: var(--pt-blue); }
.rv-centre-pin.start { color: var(--pt-origin); }
.rv-centre-pin .rv-ion { width: 36px; height: 36px; filter: drop-shadow(0 0 3px #000); }
.rv-centre-pin i { width: 6px; height: 6px; margin-top: -4px; border-radius: 50%; background: var(--pt-ink); }
.rv-centre-acts { position: absolute; left: 0; right: 0; top: calc((66px + 100%) / 2 - 20px); display: flex; align-items: center; justify-content: center; gap: 44px; }