/*
 * Droog Naar Huis - planner styles
 *
 * Structure, in source order:
 *   1. layout and shared form controls
 *   2. map, radar bar and weather markers
 *   3. neutral UI polish (deliberately overrides earlier blocks)
 *   4. results panel: answer card, departure list, journey ribbon
 *   5. all @media blocks, widest breakpoint first
 *
 * Two rules keep this predictable:
 *   - Every @media block lives at the end. Responsive overrides placed higher
 *     up lose on source order to any base rule declared below them, which is
 *     silent and has caused several bugs.
 *   - Add a declaration to a component's existing block rather than appending
 *     a new one at the end of the file. Where a selector does appear twice it
 *     is because a later layer intentionally overrides it; check what sits
 *     between the two before merging them.
 */

.rrp-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
    color: #172033;
    font-family: inherit;
}

.rrp-wrapper * {
    box-sizing: border-box;
}

/* Answer and map side by side, so the recommendation can be read against the
   radar it came from instead of scrolling between the two. */

.rrp-layout {
    display: grid;
    grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.rrp-form {
    display: grid;
    gap: 12px;
}

.rrp-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid #d9e0ea;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

/* .rrp-panel's own gap only ever spaces its direct children. Now that
   .rrp-panel-toggle collapsibility needs everything below the header
   wrapped in one .rrp-panel-body element, that wrapper needs the same
   gap for what used to be direct siblings of .rrp-panel (.rrp-form,
   .rrp-bottom-row, .rrp-results) - without it they butt straight into
   each other (e.g. the plan button against the last visible field). */
.rrp-panel-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rrp-panel h2, .rrp-panel h3 {
    margin: 0;
    line-height: 1.2;
}

.rrp-panel h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.rrp-panel h3 {
    margin-top: 14px;
    font-size: 1.05rem;
}

.rrp-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.rrp-top-row-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Collapses the whole planner card down to this header on mobile; see the
   mobile layout section for the collapsed/expanded rules themselves. Hidden
   here unconditionally so desktop never shows a toggle it doesn't need. */
.rrp-panel-toggle {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.rrp-panel-toggle-label {
    pointer-events: none;
}

.rrp-panel-toggle::after {
    content: "\25BE";
    display: block;
    transition: transform 0.15s ease;
}

.rrp-panel-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.rrp-muted, .rrp-attribution {
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.45;
}

.rrp-muted {
    margin: 0;
}

.rrp-grid {
    display: grid;
    gap: 12px;
}

.rrp-options-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Vervoer/Vanaf/Tot live behind a "Meer opties" toggle on mobile only
   (app.js adds the click handler and flips .rrp-more-options.is-open).
   This deliberately isn't a <details>/<summary>: Chromium hides closed
   <details> content via `content-visibility: hidden`, which collapses the
   content to a zero-size box no matter what `display` an author rule gives
   its children - there is no CSS-only way to keep it expanded on desktop.
   A plain toggle button avoids that trap entirely. Desktop needs no toggle
   at all: the button stays display:none and .rrp-options-grid is always a
   normal grid child, exactly as before this existed. */
.rrp-more-options-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    padding: 4px 2px;
    border: 0;
    background: transparent;
    color: #344054;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.rrp-more-options-toggle::after {
    content: "\25BE";
    transition: transform 0.15s ease;
}

.rrp-more-options-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.rrp-sub-grid {
    position: relative;
    min-width: 0;
}

/* .rrp-sub-grid wraps every individual field - both the bare Vertrekpunt/
   Bestemming fields directly in .rrp-form and the Vervoer/Vanaf/Tot fields
   inside .rrp-options-grid - so scoping to it (rather than .rrp-grid, which
   only the latter sit inside) styles every field the same way. Vertrekpunt/
   Bestemming used to fall back to the browser's default input width instead
   of filling the panel, which is what made them look misaligned against
   everything else. */
.rrp-sub-grid label {
    display: grid;
    gap: 6px;
    color: #344054;
    font-size: 0.88rem;
    font-weight: 700;
}

.rrp-sub-grid input, .rrp-sub-grid select, .rrp-actions button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 42px;
    border-radius: 10px;
    font: inherit;
}

.rrp-sub-grid input, .rrp-sub-grid select {
    border: 1px solid #cfd8e3;
    background: #fff;
    color: #172033;
    padding: 9px 11px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rrp-actions {
    display: flex;
    justify-content: flex-end;
}

.rrp-actions button {
    border: 0;
    background: #1f6feb;
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 0.01em;
    padding: 0 16px;
    box-shadow: 0 6px 16px rgba(31, 111, 235, 0.24);
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.rrp-actions button {
    width: auto;
    min-width: 220px;
}

.rrp-actions button:hover {
    filter: brightness(0.96);
    box-shadow: 0 8px 20px rgba(31, 111, 235, 0.28);
}

.rrp-actions button:active {
    transform: translateY(1px);
}

.rrp-hidden-controls {
    display: none !important;
}

.rrp-bottom-row {
    display: grid;
    gap: 10px;
}

.rrp-status {
    min-height: 22px;
    font-weight: 700;
    line-height: 1.35;
}

.rrp-status[data-type="error"] {
    color: #b42318;
}

.rrp-status[data-type="success"] {
    color: #027a48;
}

.rrp-status[data-type="info"] {
    color: #175cd3;
}

.rrp-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e6eaf0;
    border: 1px solid #d0d7de;
}

.rrp-progress[hidden] {
    display: none;
}

.rrp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.rrp-table th, .rrp-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #e6e6e6;
    text-align: left;
}

.rrp-map {
    position: relative;
    /* Leaflet gives its own panes and controls z-indexes up to 1000+. Without
       a stacking context here those escape into the shared context and paint
       over the radar bar and its popover. */
    z-index: 0;
    min-height: 590px;
    width: 100%;
    overflow: hidden;
    border: 1px solid #d9e0ea;
    border-radius: 16px;
    background: #eef2f6;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.rrp-inline-option {
    display: flex !important;
    align-items: center;
    gap: 9px !important;
    min-height: 42px;
    padding: 10px 11px;
    border: 1px solid #cfd8e3;
    border-radius: 10px;
    background: #f8fafc;
    font-weight: 700;
    cursor: pointer;
}

.rrp-inline-option input {
    width: auto;
    min-height: auto;
    margin: 0;
}

.rrp-weather-marker {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    margin-left: -22px !important;
    margin-top: -22px !important;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #1f2937;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    z-index: 1200 !important;
    cursor: pointer;
}

.rrp-weather-marker span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.rrp-weather-dry span {
    background: #e9f8ef;
}

.rrp-weather-light span {
    background: #fff4ba;
}

.rrp-weather-rain span, .rrp-weather-heavy span {
    background: #d6eaff;
    color: #003a75;
}

.rrp-weather-unknown span {
    background: #f0f0f0;
}

.leaflet-rrpRoutePane-pane {
    z-index: 1200 !important;
    pointer-events: none;
}

.leaflet-rrpWeatherPane-pane {
    z-index: 1300 !important;
}

/* Softens the radar's blocky native pixels into something closer to a
   typical weather app's soft cloud/rain look. The image covers a bounding
   box well beyond the visible map (see radarBounds() in app.js), so the
   slight scale-up hides the hard edge a blur filter would otherwise leave
   right at the image's own boundary. The blur amount is set per-site as
   --rrp-radar-blur on .rrp-wrapper (Instellingen > Radarweergave); the
   2.5px here is only the fallback for markup predating that setting. */
.leaflet-rrpRadarPane-pane img {
    filter: blur(var(--rrp-radar-blur, 2.5px));
    transform: scale(1.03);
}

.leaflet-popup-pane {
    z-index: 1800 !important;
}

.leaflet-popup {
    z-index: 1800 !important;
}

.rrp-debug-details {
    margin-top: 12px;
}

.rrp-debug-details summary {
    cursor: pointer;
    font-weight: 700;
}

.rrp-debug-table-wrap {
    max-height: 260px;
    overflow: auto;
    margin-top: 8px;
}

.rrp-debug-table {
    font-size: 0.78rem;
    white-space: nowrap;
}

.rrp-autocomplete {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 96px;
    z-index: 2000;
    overflow: hidden;
    border: 1px solid #cfd8e3;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
}

.rrp-autocomplete[hidden] {
    display: none;
}

.rrp-autocomplete button {
    display: block;
    width: 100%;
    min-height: auto;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #eef2f6;
    border-radius: 0;
    background: #fff;
    color: #172033;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}

.rrp-autocomplete button:hover, .rrp-autocomplete button:focus {
    background: #f3f7ff;
    outline: none;
}

.rrp-autocomplete button:last-child {
    border-bottom: 0;
}

.rrp-plan[disabled] {
    cursor: wait;
    opacity: 0.65;
}

.rrp-attribution {
    margin: 0;
}

/* 0.4.10 radar control and result polish */

.rrp-map-wrap {
    display: grid;
    grid-template-columns: minmax(280px, 1fr);
    gap: 14px;
    align-items: stretch;
}

.rrp-map-shell {
    position: relative;
    min-width: 0;
}

.rrp-map-radar-controls {
    position: absolute;
    top: 12px;
    left: 58px;
    right: 12px;
    z-index: 1450;
    display: grid;
    grid-template-columns: 38px minmax(140px, 1fr) minmax(112px, 150px) 38px;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(8px);
}

.rrp-radar-play {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #1f6feb;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(31, 111, 235, 0.25);
}

.rrp-radar-play:disabled {
    cursor: default;
    opacity: 0.55;
}

.rrp-map-radar-controls .rrp-inline-option {
    min-height: 38px;
    padding: 7px 9px;
    background: #fff;
    white-space: nowrap;
}

/* Inside the popover the labels are full sentences, so they must wrap and
   stay within the panel width instead of running past its edge. */

.rrp-radar-settings-panel .rrp-inline-option {
    white-space: normal;
    align-items: flex-start;
    line-height: 1.3;
}

.rrp-map-radar-controls > * {
    min-width: 0;
}

.rrp-radar-timeline-label, .rrp-radar-mini-label {
    display: grid;
    gap: 4px;
    color: #344054;
    font-size: 0.78rem;
    font-weight: 800;
    min-width: 0;
}

.rrp-radar-time-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rrp-map-radar-controls input[type="range"] {
    width: 100%;
    min-width: 0;
    accent-color: #1f6feb;
}

.rrp-radar-source {
    width: 100%;
    min-width: 0;
    min-height: 26px;
    padding: 3px 6px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: #101828;
    font-size: 0.78rem;
    font-weight: 700;
}

.rrp-radar-source:disabled {
    color: #98a2b3;
    background: #f2f4f7;
}

.rrp-radar-source[data-fallback="1"] {
    border-color: #f79009;
    color: #b54708;
}

.rrp-kicker {
    display: block;
    margin-bottom: 2px;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* 0.4.11 neutral UI polish */

.rrp-sub-grid input:focus, .rrp-sub-grid select:focus {
    border-color: #475467;
    box-shadow: 0 0 0 3px rgba(71, 84, 103, 0.16);
}

.rrp-actions button, .rrp-radar-play {
    border: 1px solid #d0d5dd;
    background: #f8fafc;
    color: #111827;
    box-shadow: none;
}

.rrp-actions button {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.rrp-actions button:hover, .rrp-radar-play:hover {
    filter: none;
    background: #eef2f6;
    border-color: #98a2b3;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
}

.rrp-actions button:hover {
    background: #1f2937;
    border-color: #1f2937;
}

.rrp-actions button:focus, .rrp-radar-play:focus {
    outline: none;
    border-color: #475467;
    box-shadow: 0 0 0 3px rgba(71, 84, 103, 0.16);
}

.rrp-radar-play {
    width: 38px;
    min-width: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
    white-space: nowrap;
}

.rrp-map-radar-controls input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    height: 22px;
    padding: 0;
    background: transparent;
    accent-color: #475467;
}

.rrp-map-radar-controls input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: #d0d5dd;
}

.rrp-map-radar-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #475467;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
}

.rrp-map-radar-controls input[type="range"]::-moz-range-track {
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: #d0d5dd;
}

.rrp-map-radar-controls input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #475467;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
}

.rrp-map-radar-controls input[type="range"]:focus {
    outline: none;
}

.rrp-map-radar-controls input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(71, 84, 103, 0.16);
}

.rrp-map-radar-controls input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(71, 84, 103, 0.16);
}

.rrp-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #344054, #667085);
    transition: width 0.35s ease;
}

.rrp-weather-sunny span, .rrp-weather-dry span {
    background: #fff3b0;
    color: #5f4300;
}

.rrp-weather-partly_cloudy span {
    background: #e8f3ff;
    color: #1f4f7a;
}

.rrp-weather-cloudy span {
    background: #e5e7eb;
    color: #374151;
}

.rrp-weather-night span {
    background: #dbeafe;
    color: #1e3a8a;
}

/* 0.7.0 results panel: one answer, one comparison, detail on demand */

.rrp-results {
    margin-top: 2px;
    display: grid;
    gap: 14px;
}

.rrp-section-label {
    margin: 0;
    color: #667085;
    font-size: 0.82rem;
    font-weight: 700;
}

.rrp-answer {
    padding: 16px;
    border: 1px solid #d9e0ea;
    border-radius: 12px;
    background: #fff;
}

.rrp-answer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rrp-answer .rrp-kicker {
    display: block;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 700;
}

.rrp-answer-time {
    display: block;
    margin-top: 2px;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.rrp-answer-summary {
    margin: 10px 0 0;
    color: #475467;
    font-size: 0.9rem;
}

.rrp-answer-caveat {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f5f2e8;
    color: #7a5b12;
    font-size: 0.82rem;
    line-height: 1.35;
}

.rrp-result-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #344054;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.rrp-result-pill.is-dry {
    background: #e6f6ee;
    color: #0f6e56;
}

.rrp-result-pill.is-wet {
    background: #e6f1fb;
    color: #185fa5;
}

.rrp-departures {
    display: grid;
    border: 1px solid #d9e0ea;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.rrp-departure {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid #eceff3;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rrp-departure:last-child {
    border-bottom: 0;
}

/* .rrp-departure sets display: grid, which (equal specificity, later origin)
   would otherwise win over the browser's default [hidden] { display: none }
   and leave "hidden" extras visible. */
.rrp-departure[hidden] {
    display: none;
}

.rrp-departures-toggle {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px dashed #d9e0ea;
    border-radius: 10px;
    background: transparent;
    color: #185fa5;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.rrp-departures-toggle:hover {
    background: #f7f9fc;
}

.rrp-departure:hover {
    background: #f7f9fc;
}

.rrp-departure.is-active {
    background: #eef4fe;
}

.rrp-departure-time {
    font-size: 0.98rem;
    font-weight: 700;
}

.rrp-departure.is-active .rrp-departure-time {
    color: #185fa5;
}

.rrp-departure-metric {
    color: #667085;
    font-size: 0.78rem;
    white-space: nowrap;
}

.rrp-departure.is-active .rrp-departure-metric {
    color: #185fa5;
}

.rrp-departure-bar, .rrp-journey-bar {
    display: flex;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.rrp-departure-bar {
    height: 10px;
    border-radius: 999px;
}

.rrp-journey {
    padding: 14px;
    border: 1px solid #d9e0ea;
    border-radius: 12px;
    background: #fff;
}

.rrp-journey-bar {
    height: 26px;
    border-radius: 8px;
}

.rrp-cond {
    display: block;
    min-width: 2px;
    height: 100%;
    padding: 0;
    border: 0;
}

button.rrp-cond {
    cursor: pointer;
}

button.rrp-cond:hover {
    filter: brightness(1.08);
}

button.rrp-cond:focus-visible {
    outline: 2px solid #1f6feb;
    outline-offset: -2px;
}

.rrp-cond-dry, .rrp-cond-sunny {
    background: #9fe1cb;
}

.rrp-cond-partly_cloudy {
    background: #cfe3f5;
}

.rrp-cond-cloudy {
    background: #c4cbd6;
}

.rrp-cond-night {
    background: #8792a8;
}

.rrp-cond-light {
    background: #b5d4f4;
}

.rrp-cond-rain {
    background: #378add;
}

.rrp-cond-heavy {
    background: #185fa5;
}

.rrp-cond-unknown {
    background: #e4e7ec;
}

.rrp-journey-ends {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    color: #667085;
    font-size: 0.78rem;
}

.rrp-journey-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eceff3;
    color: #475467;
    font-size: 0.85rem;
}

.rrp-journey-facts span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rrp-journey-facts i {
    font-style: normal;
}

/* Radar bar: playback and layer stay out, preferences go behind the gear */

.rrp-radar-settings {
    position: relative;
}

.rrp-radar-settings > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
    list-style: none;
}

.rrp-radar-settings > summary::-webkit-details-marker {
    display: none;
}

.rrp-radar-settings[open] > summary {
    border-color: #1f6feb;
}

.rrp-radar-settings-panel {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 1500;
    display: grid;
    gap: 10px;
    width: 232px;
    padding: 12px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.rrp-radar-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid #eceff3;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 700;
}

.rrp-radar-legend i {
    flex: 1;
    height: 10px;
    border-radius: 2px;
}

/* Popover placement overrides live at the end of the file on purpose: the base
   .rrp-radar-settings rules above are declared later than the earlier media
   blocks, so overrides placed there lose on source order and never apply. */

@media(max-width: 1180px) {
    .rrp-options-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media(max-width: 1080px) {
    .rrp-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .rrp-map {
        min-height: 460px;
    }
}

@media(max-width: 1000px) {
    .rrp-map-wrap {
        grid-template-columns: 1fr;
    }

    .rrp-autocomplete {
        right: 96px;
    }

    .rrp-map-radar-controls {
        left: 12px;
    }
}

@media(max-width: 760px) {
    .rrp-panel {
        padding: 16px;
    }

    .rrp-options-grid {
        grid-template-columns: 1fr;
    }

    .rrp-autocomplete {
        right: 0;
    }

    .rrp-actions {
        justify-content: stretch;
    }

    .rrp-actions button {
        width: 100%;
        min-width: 0;
    }
}

@media(max-width: 720px) {
    .rrp-panel {
        padding: 16px;
    }

    .rrp-options-grid {
        grid-template-columns: 1fr;
    }

    .rrp-actions button {
        width: 100%;
        min-width: 0;
    }

    .rrp-map {
        min-height: 430px;
    }

    .rrp-autocomplete {
        right: 0;
    }

    /* Position/z-index for this bar are decided once, for real, in the
       "Mobile layout" section at the end of the file - this block only
       owns the internal grid now. Leaving position/z-index here too was
       what caused the leftover z-index: 2 bug (this rule "won" that
       property while a later block silently took over positioning). */
    .rrp-map-radar-controls {
        grid-template-columns: 38px minmax(0, 1fr) 38px;
    }

    /* Place every control explicitly. Relying on source order plus `order`
       let the layer selector and the play button land in the same cell. */

    .rrp-radar-play {
        grid-column: 1;
        grid-row: 1;
    }

    .rrp-radar-source {
        grid-column: 2;
        grid-row: 1;
    }

    .rrp-radar-timeline-label {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* Anchor the panel to the whole bar, not to the gear button. Anchored to
       the button it opened rightwards off the edge of a narrow screen. */

    .rrp-radar-settings {
        grid-column: 3;
        grid-row: 1;
        position: static;
    }

    .rrp-radar-settings-panel {
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
    }
}

/* Full-page map presentation. The planner controls remain readable as a
   floating card while the map becomes the primary surface. */
.rrp-layout {
    position: relative;
    display: block;
    min-height: calc(100svh - 24px);
}

.rrp-map-wrap {
    display: block;
    width: 100%;
}

.rrp-map-shell,
.rrp-map {
    width: 100%;
    min-height: calc(100svh - 24px);
    height: calc(100svh - 24px);
}

.rrp-panel {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1500;
    width: min(410px, calc(100% - 36px));
    max-height: calc(100svh - 60px);
    overflow: auto;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
}

/* Keep the playback toolbar in its own lane beside the desktop card. */
.rrp-map-radar-controls {
    left: min(450px, calc(100% - 470px));
}

.rrp-attribution {
    position: relative;
    z-index: 1501;
    margin: 0 18px;
}

/* Mobile layout (<=720px)
 *
 * This is a dedicated composition, not a shrunk desktop grid: four things
 * float over the full-height map, each given its own uncontested spot -
 *
 *   1. the planner card, docked to the top, collapsed to just its header
 *      by default (tap to expand - see .rrp-panel-toggle)
 *   2. the about/feedback buttons (HKHD Floating UI blocks placed in the
 *      page editor), stacked in a column against the middle of the right
 *      edge, clear of everything else regardless of how tall it is
 *   3. three full-width rows stacked on the bottom edge: the copyright
 *      and attribution labels (also HKHD Floating UI blocks) at the very
 *      bottom, and the radar timeline docked directly above them
 *
 * Band 3 used to squeeze the two labels down to an unreadable sliver
 * beside the radar bar so nobody had to know its real rendered height (it
 * varies enough between browsers that an earlier version of this hid one
 * label behind the bar entirely). Once they need to be full width and
 * actually readable, sharing a row with the bar isn't an option any more
 * - so this flips the dependency instead of reintroducing it: the two
 * labels get their own explicit, fixed heights (with overflow/line-clamp
 * as a hard cap, not just a guess), and the bar - whose own height still
 * isn't known precisely - sits on TOP of that stack, where open map is
 * the only thing above it and its real height doesn't matter to anything.
 */
@media(max-width: 720px) {
    .rrp-layout {
        min-height: 100svh;
    }

    .rrp-panel {
        top: 10px;
        left: 10px;
        width: calc(100% - 20px);
        padding: 14px;
        border-radius: 14px;
        max-height: none;
        overflow: visible;
    }

    /* Collapsed is the default (no .is-open in the markup): just the
       title and the toggle, subtitle and everything below it hidden. */
    .rrp-panel-toggle {
        display: flex;
    }

    .rrp-panel:not(.is-open) .rrp-muted {
        display: none;
    }

    .rrp-panel:not(.is-open) .rrp-panel-body {
        display: none;
    }

    .rrp-panel.is-open .rrp-panel-body {
        max-height: min(62svh, 520px);
        overflow: auto;
        margin-top: 10px;
    }

    .rrp-more-options-toggle {
        display: flex;
        border-top: 1px solid #eceff3;
        margin-top: 2px;
    }

    .rrp-more-options:not(.is-open) .rrp-options-grid {
        display: none;
    }

    .rrp-map-shell,
    .rrp-map {
        min-height: 100svh;
        height: 100svh;
    }

    /* Band 2: see hkhd-floating-ui/assets/style.css for the base
       bottom-center positioning this replaces. Scoped to this planner's
       stage so it doesn't touch any other page using the same block.
       data-direction="horizontal" (baked into the markup by that plugin's
       own JS, since bottom-center normally lays its items out as a row)
       needs an explicit override to actually stack the two buttons. */
    .hkhd-stage:has(.rrp-wrapper) .hkhd-stack[data-position="bottom-center"] {
        flex-direction: column;
        top: 50%;
        bottom: auto;
        left: auto;
        right: 16px;
        transform: translateY(-50%);
    }

    /* Band 3, row 1 (bottom-most): the attribution label, full width.
       height is a hard cap, not a guess - -webkit-line-clamp keeps it at
       exactly 3 lines (ellipsizing a 4th, if the text is ever edited to
       need one, rather than growing into row 2). That's what lets row 2
       and the radar bar above stack on top of it with a fixed, reliable
       offset instead of an estimate of its natural content height. */
    .hkhd-stage:has(.rrp-wrapper) .hkhd-stack[data-position="bottom-right"] {
        top: auto;
        bottom: 8px;
        left: 12px;
        right: 12px;
        width: calc(100% - 24px);
    }

    .hkhd-stage:has(.rrp-wrapper) .hkhd-stack[data-position="bottom-right"] .hkhd-floating-label {
        width: 100%;
        max-width: none;
        font-size: 12px;
        line-height: 1.3;
        padding: 5px 12px;
        height: 64px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .hkhd-stage:has(.rrp-wrapper) .hkhd-stack[data-position="bottom-right"] .hkhd-floating-label__content {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Band 3, row 2: the copyright label, full width, stacked directly
       above row 1 using its fixed 64px height (8px bottom + 6px gap). */
    .hkhd-stage:has(.rrp-wrapper) .hkhd-stack[data-position="bottom-left"] {
        top: auto;
        bottom: 78px;
        left: 12px;
        right: 12px;
        width: calc(100% - 24px);
    }

    .hkhd-stage:has(.rrp-wrapper) .hkhd-stack[data-position="bottom-left"] .hkhd-floating-label {
        width: 100%;
        max-width: none;
        font-size: 12px;
        line-height: 1.3;
        padding: 5px 12px;
        height: 28px;
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Band 3, row 3: the radar bar, docked directly above row 2 using
       its fixed 28px height (78px bottom + 8px gap) - not above the
       bar's own height, which this file still can't know precisely. */
    .rrp-map-radar-controls {
        position: absolute;
        top: auto;
        bottom: 114px;
        left: 12px;
        right: 12px;
        z-index: 1450;
        margin: 0;
    }

    /* The settings popover is positioned against .rrp-map-radar-controls
       itself, not the gear button, ever since .rrp-radar-settings became
       position: static a few lines up - see the comment there. `top:
       calc(100% + 8px)` (below the whole bar) made sense while the bar
       lived inline near the top of the page; now that band 3 docks it
       above the two labels instead, "below the bar" would land on top of
       them. Open upward instead. */
    .rrp-radar-settings-panel {
        top: auto;
        bottom: calc(100% + 8px);
    }

    .rrp-attribution {
        margin: 0 10px;
        font-size: 0.76rem;
    }
}

.rrp-weather-marker.is-frame-active span {
    transform: scale(1.3);
    border-color: #111827;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 0 7px rgba(31, 111, 235, 0.5), 0 8px 18px rgba(15, 23, 42, 0.3);
}