/* Rain flood mini (resources/views/landlens/minis/benches/rain-flood.blade.php).
   A dark stage holding the 3D map, with the panel floating over it on a wide screen and sitting
   under it on a phone. Full screen fills the window with the map; the panel becomes a sheet. */
.rf {
    --rf-ink: #12161d;
    --rf-card: rgba(18, 22, 29, .9);
    --rf-tx: #eef1f6;
    --rf-sec: #9aa4b4;
    --rf-line: rgba(255, 255, 255, .12);
    --rf-acc: #ff6725;
    --rf-w1: #8fa3a6;
    --rf-w2: #4f6a74;
    --rf-w3: #1f3743;
    --rf-road: #ff5a36;
    position: relative;
    color: var(--rf-tx);
    font-family: inherit;
    border-radius: 20px;
    overflow: hidden;
    background: var(--rf-ink);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 18px 50px rgba(16, 24, 40, .18);
}
.rf *, .rf *::before, .rf *::after { box-sizing: border-box; }
.rf p, .rf li, .rf span, .rf b, .rf h2 { color: inherit; }
.rf .rf-sub, .rf .rf-place, .rf .rf-fine, .rf .rf-eyebrow, .rf .rf-status, .rf .rf-legend { color: var(--rf-sec); }
.rf .sv-ico { width: 20px; height: 20px; display: block; flex: none; }

.rf-stage { position: relative; height: min(78vh, 760px); min-height: 520px; background: #0b0e13; }
.rf-map { position: absolute; inset: 0; }
.rf-rain { position: absolute; inset: 0; pointer-events: none; z-index: 2; }

/* the place box, over the map */
.rf-find {
    position: absolute; top: 14px; left: 380px; right: 236px; z-index: 4; max-width: 560px;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 6px 6px 12px; background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 999px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .35); backdrop-filter: blur(8px);
}
.rf-find-ic { color: var(--rf-acc); }
.rf-find-in { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--rf-tx); font: inherit; font-size: 14px; padding: 8px 4px; }
.rf-find-in::placeholder { color: var(--rf-sec); }
.rf-find-btn {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rf-line);
    background: rgba(255, 255, 255, .04); color: var(--rf-tx); cursor: pointer; transition: background .15s, border-color .15s;
}
.rf-find-btn:hover { background: rgba(255, 103, 37, .16); border-color: rgba(255, 103, 37, .5); }

.rf-tools { position: absolute; top: 14px; right: 56px; z-index: 4; display: flex; gap: 8px; align-items: center; }
.rf-lift { display: flex; padding: 3px; gap: 2px; background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 999px; backdrop-filter: blur(8px); }
.rf-lift button {
    border: 0; background: transparent; color: var(--rf-sec); font: inherit; font-size: 12px; font-weight: 600;
    padding: 7px 10px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s;
}
.rf-lift button[aria-pressed="true"] { background: rgba(255, 103, 37, .2); color: #fff; }
.rf-tool {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
    background: var(--rf-card); border: 1px solid var(--rf-line); color: var(--rf-tx); backdrop-filter: blur(8px);
    transition: border-color .15s, box-shadow .15s;
}
.rf-tool:hover { border-color: rgba(255, 103, 37, .55); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.rf-fs-out { display: none; }
.rf.is-full .rf-fs-in { display: none; }
.rf.is-full .rf-fs-out { display: block; }
.rf .maplibregl-ctrl-top-right { top: 62px; }
.rf .maplibregl-ctrl-group { background: var(--rf-card); border: 1px solid var(--rf-line); box-shadow: none; }
.rf .maplibregl-ctrl-group button + button { border-top: 1px solid var(--rf-line); }
.rf .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.4); }

.rf-caption {
    position: absolute; left: calc(50% + 183px); bottom: 116px; transform: translateX(-50%); z-index: 3; margin: 0;
    max-width: min(640px, calc(100% - 420px)); padding: 10px 18px; border-radius: 14px; background: rgba(0, 0, 0, .58);
    color: #fff; font-size: 17px; font-weight: 600; line-height: 1.35; text-align: center; pointer-events: none; transition: opacity .4s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.rf-caption:empty { opacity: 0; }
.rf-read {
    position: absolute; z-index: 5; max-width: 260px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4;
    background: var(--rf-card); border: 1px solid var(--rf-line); pointer-events: none; transform: translate(-50%, calc(-100% - 14px));
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
}
.rf-read[hidden], .rf-time[hidden], .rf-answer[hidden] { display: none; }

.rf-time {
    position: absolute; left: 380px; right: 16px; bottom: 40px; z-index: 4; max-width: 680px; margin: 0 auto;
    display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; background: var(--rf-card); border: 1px solid var(--rf-line);
    border-radius: 18px; backdrop-filter: blur(8px); box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.rf-play { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--rf-acc); color: #fff; cursor: pointer; }
.rf-time-track { position: relative; flex: 1; height: 44px; }
.rf-bars { position: absolute; inset: 0; width: 100%; height: 100%; }
.rf-scrub { position: absolute; inset: 0; width: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rf-scrub::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.rf-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 44px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 3px rgba(255, 103, 37, .45); }
.rf-scrub::-moz-range-track { height: 44px; background: transparent; }
.rf-scrub::-moz-range-thumb { width: 4px; height: 44px; border: 0; border-radius: 2px; background: #fff; }
.rf-clock { flex: none; min-width: 150px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rf-tx); text-align: right; }

/* the panel */
.rf-panel {
    position: absolute; top: 14px; left: 14px; bottom: 14px; z-index: 6; width: 350px; overflow: auto;
    padding: 18px; background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 20px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); scrollbar-width: thin;
}
.rf-sheet { display: none; }
.rf-eyebrow { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rf-sec); }
.rf-title { margin: 6px 0 14px; font-size: 22px; line-height: 1.2; color: var(--rf-tx); font-weight: 700; }
.rf-step { margin: 0 0 14px; }
.rf-step-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--rf-tx); }
.rf-step-h b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 103, 37, .18); color: var(--rf-acc); font-size: 11px; }
.rf-place { margin: 0 0 8px; font-size: 13px; color: var(--rf-sec); }
.rf.has-place .rf-place { color: var(--rf-tx); font-weight: 600; }
.rf-try { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-try button {
    padding: 6px 10px; border-radius: 999px; border: 1px solid var(--rf-line); background: rgba(255, 255, 255, .03);
    color: var(--rf-tx); font: inherit; font-size: 12px; cursor: pointer; transition: border-color .15s, background .15s;
}
.rf-try button:hover { border-color: rgba(255, 103, 37, .55); background: rgba(255, 103, 37, .1); }
.rf-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; margin-bottom: 8px; border: 1px solid var(--rf-line); border-radius: 12px; }
.rf-mode button { padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--rf-sec); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.rf-mode button[aria-checked="true"] { background: rgba(255, 103, 37, .18); color: #fff; }
.rf-fc { margin-bottom: 6px; padding: 10px 12px; border: 1px solid var(--rf-line); border-radius: 12px; background: rgba(255, 255, 255, .03); }
.rf-fc[hidden] { display: none; }
.rf-fc-h { margin: 0; font-size: 13px; font-weight: 600; color: var(--rf-tx); }
.rf-fc-bars { display: block; width: 100%; height: 40px; margin-top: 8px; }
.rf-fc-note { margin: 6px 0 0; font-size: 11px; line-height: 1.4; color: var(--rf-sec); }
.rf-fc-note:empty { display: none; }
.rf-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.rf-pills button {
    padding: 9px 4px; border-radius: 12px; border: 1px solid var(--rf-line); background: transparent; color: var(--rf-tx);
    font: inherit; cursor: pointer; text-align: center; transition: border-color .15s, background .15s;
}
.rf-pills button b { display: block; font-size: 13px; line-height: 1.2; }
.rf-pills button span { display: block; margin-top: 2px; font-size: 11px; color: var(--rf-sec); }
.rf-pills button:hover { border-color: rgba(255, 255, 255, .3); }
.rf-pills button[aria-checked="true"] { border-color: var(--rf-acc); background: rgba(255, 103, 37, .14); }
.rf-go {
    width: 100%; margin-top: 4px; padding: 13px; border: 0; border-radius: 14px; background: var(--rf-acc); color: #fff;
    font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: box-shadow .15s, background .15s;
}
.rf-go:hover:not(:disabled) { box-shadow: 0 8px 24px rgba(255, 103, 37, .45); }
.rf-go:disabled { background: #6b4636; color: rgba(255, 255, 255, .7); cursor: default; }
.rf-status { margin: 8px 0 0; font-size: 12px; color: var(--rf-sec); min-height: 0; }
.rf-status:empty { display: none; }
.rf-status.is-warn { color: #ffc6a8; }
.rf-answer { margin-top: 14px; padding: 14px; border: 1px solid var(--rf-line); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.rf-big { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.rf-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--rf-sec); }
.rf-roads { margin: 10px 0 0; padding: 0; list-style: none; }
.rf-roads li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13px; }
.rf-roads li + li { border-top: 1px solid var(--rf-line); }
.rf-roads b { color: var(--rf-road); white-space: nowrap; }
.rf-pinbox { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rf-line); }
.rf-pin-h { margin: 0; font-size: 13px; font-weight: 700; color: var(--rf-tx); }
.rf-spark { display: block; width: 100%; max-width: 260px; height: 48px; margin-top: 8px; }
.rf-spark-line { fill: none; stroke: #8fc8ff; stroke-width: 2; stroke-linejoin: round; }
.rf-spark-foot { stroke: rgba(255, 90, 54, .6); stroke-width: 1; stroke-dasharray: 3 3; }
.rf-read .rf-spark { max-width: 236px; }
.rf-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; font-size: 12px; color: var(--rf-sec); }
.rf-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; border-radius: 3px; vertical-align: -2px; }
.rf-legend .w1 { background: var(--rf-w1); } .rf-legend .w2 { background: var(--rf-w2); } .rf-legend .w3 { background: var(--rf-w3); border: 1px solid var(--rf-line); }
.rf-legend .rd { height: 4px; vertical-align: 2px; background: var(--rf-road); }
.rf-fine { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--rf-sec); }

/* full screen: the stage fills the window */
html.rf-noscroll, html.rf-noscroll body { overflow: hidden; }
.rf.is-full { position: fixed; inset: 0; z-index: 9999; border-radius: 0; border: 0; }
.rf.is-full .rf-stage { height: 100%; min-height: 0; }
.rf:fullscreen { width: 100vw; height: 100vh; }

/* tablet and phone: the panel goes under the map, and becomes a sheet in full screen */
@media (max-width: 899px) {
    .rf-stage { height: 62vh; min-height: 420px; }
    .rf-panel { position: relative; inset: auto; width: auto; overflow: visible; border-radius: 0; border: 0; box-shadow: none; background: var(--rf-ink); backdrop-filter: none; }
    .rf-find { left: 12px; right: 64px; max-width: none; top: 12px; }
    .rf-tools { top: 64px; right: 12px; }
    .rf .maplibregl-ctrl-top-right { top: 112px; }
    .rf-caption { left: 50%; max-width: calc(100% - 24px); bottom: 104px; font-size: 14px; padding: 8px 12px; }
    .rf-time { left: 10px; right: 10px; bottom: 34px; max-width: none; gap: 8px; padding: 6px 10px 6px 6px; }
    .rf-clock { min-width: 0; font-size: 12px; }
    .rf.is-full .rf-panel {
        position: absolute; left: 0; right: 0; bottom: 0; top: auto; max-height: 46%; overflow: auto; z-index: 7;
        border-radius: 20px 20px 0 0; border: 1px solid var(--rf-line); background: var(--rf-card); backdrop-filter: blur(10px);
        transition: transform .25s ease; padding-top: 6px;
    }
    .rf.is-full.sheet-down .rf-panel { transform: translateY(calc(100% - 44px)); }
    .rf.is-full .rf-sheet { display: block; width: 100%; height: 30px; margin: 0 0 4px; border: 0; background: transparent; cursor: pointer; }
    .rf.is-full .rf-sheet span { display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 3px; background: rgba(255, 255, 255, .35); }
    .rf.is-full .rf-time { bottom: calc(46% + 10px); }
    .rf.is-full.sheet-down .rf-time { bottom: 54px; }
    .rf.is-full .rf-caption { top: 120px; bottom: auto; }
}
@media (max-width: 480px) {
    .rf-title { font-size: 19px; }
    .rf-pills button b { font-size: 12px; }
    .rf-find-in { font-size: 13px; }
    .rf-lift button { padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .rf-caption, .rf-panel { transition: none; }
}

/* The place box, the height switch and the full screen button share one height (50 px) and one
   shape, so the row over the map reads as one set of controls. */
.rf { --rf-bar: 50px; }
.rf-find { height: var(--rf-bar); padding: 0 6px 0 14px; }
.rf-find-btn { width: 38px; height: 38px; }
.rf-lift { height: var(--rf-bar); align-items: stretch; padding: 5px; }
.rf-lift button { display: grid; place-items: center; min-width: 46px; padding: 0 12px; font-size: 13px; }
.rf-tool { width: var(--rf-bar); height: var(--rf-bar); border-radius: 50%; }
.rf .maplibregl-ctrl-top-right { top: calc(14px + var(--rf-bar) + 10px); }
.rf-tools { right: 14px; }
.rf-find { right: 296px; }
@media (max-width: 899px) {
    .rf { --rf-bar: 46px; }
    .rf-tools { top: calc(12px + var(--rf-bar) + 8px); right: 12px; }
    .rf-find { right: 12px; }
    .rf .maplibregl-ctrl-top-right { top: calc(12px + 2 * var(--rf-bar) + 18px); }
}
@media (max-width: 480px) {
    .rf-lift button { min-width: 40px; padding: 0 8px; }
}

/* The simulator sits apart from the explainer cards below it. */
.rf { margin-bottom: 28px; }

/* Count working drains: a switch, off by default. */
.rf-drain { position: relative; display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--rf-line); border-radius: 12px; cursor: pointer; }
.rf-drain input { position: absolute; opacity: 0; pointer-events: none; }
.rf-switch { position: relative; flex: none; width: 36px; height: 20px; margin-top: 1px; border-radius: 999px; background: rgba(255, 255, 255, .16); transition: background .15s; }
.rf-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.rf-drain input:checked + .rf-switch { background: var(--rf-acc); }
.rf-drain input:checked + .rf-switch::after { transform: translateX(16px); }
.rf-drain input:focus-visible + .rf-switch { box-shadow: 0 0 0 3px rgba(255, 103, 37, .45); }
.rf .rf-drain-t b { display: block; font-size: 13px; color: var(--rf-tx); }
.rf .rf-drain-t span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.4; color: var(--rf-sec); }

/* Place names found for the search box (signed in). */
.rf-sug {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 6;
    display: grid; padding: 6px; gap: 2px; max-height: 300px; overflow-y: auto;
    background: var(--rf-card); border: 1px solid var(--rf-line); border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35); backdrop-filter: blur(8px);
}
.rf-sug[hidden] { display: none; }
.rf-sug button {
    display: grid; gap: 2px; text-align: left; padding: 9px 12px; border: 0; border-radius: 10px;
    background: transparent; color: var(--rf-tx); font: inherit; cursor: pointer;
}
.rf-sug button:hover, .rf-sug button:focus-visible { background: rgba(255, 103, 37, .16); outline: 0; }
.rf-sug b { font-size: 14px; font-weight: 600; }
.rf-sug span { font-size: 12px; color: var(--rf-sec); }
.rf-find-in[readonly] { cursor: pointer; }
/* The search bar (with its list of places) sits above the height and full screen buttons, which
   on a phone are in the row right under it. */
.rf-find { z-index: 5; }