/* Live roads: the immersive 3D road map, in the member area and as a demo on the home page (dark glass on the map). */
/* ——— live roads: immersive 3D map ——— */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.page:has(.roads-app){padding:0;max-width:none}
.roads-app{position:relative;height:100vh;height:100dvh;overflow:hidden;background:#12100d;color:#ece7dc;isolation:isolate}
.roads-canvas{position:absolute;inset:0}
.roads-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0d0c0acc 0,#0d0c0a00 22%,#0d0c0a00 62%,#0d0c0ae6 100%);z-index:1}
.roads-nomap{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:24px;text-align:center;color:#c9c3b6}
.roads-app:not(.is-ready) .roads-canvas{background:radial-gradient(circle at 50% 40%,#262520,#12100d)}
.roads-top{position:absolute;z-index:3;top:18px;left:22px;right:88px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;pointer-events:none}
.roads-top>*{pointer-events:auto}
.roads-search{display:flex;align-items:center;gap:10px;flex:0 1 360px;min-width:220px;height:48px;padding:0 16px;border-radius:99px;background:#1b1a17e0;border:1px solid #ffffff1a;box-shadow:0 14px 30px -18px #000;color:#c9c3b6}
.roads-search input{flex:1;min-width:0;height:100%;border:0;background:none;color:#fff;font:inherit;font-size:16px;outline:0}
.roads-search input::placeholder{color:#a39d90}
.roads-search:focus-within{border-color:#d2b37d80}
.roads-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.roads-filters button{flex:none;height:40px;padding:0 15px;border-radius:99px;border:1px solid #ffffff1f;background:#1b1a17cc;color:#d8d2c5;font:inherit;font-size:13.5px;cursor:pointer;transition:background .2s,color .2s}
.roads-filters button[aria-pressed=true]{background:#ece7dc;color:#1b1a17;border-color:#ece7dc}
.roads-live{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:99px;background:#1b1a17cc;font-size:12.5px;color:#a8e0b2}
.roads-live i{width:8px;height:8px;border-radius:50%;background:#7ad48a;animation:live-pulse 2s infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 #7ad48a99}70%{box-shadow:0 0 0 9px #7ad48a00}100%{box-shadow:0 0 0 0 #7ad48a00}}
.roads-tools{position:absolute;z-index:3;top:18px;right:18px;display:grid;gap:8px}
.roads-tool{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;border:1px solid #ffffff1f;background:#1b1a17e0;color:#ece7dc;font:600 13px/1 var(--sans);letter-spacing:.04em;cursor:pointer;box-shadow:0 14px 30px -18px #000;transition:background .2s,transform .15s}
.roads-tool[aria-pressed=true]{background:#d2b37d;color:#1b1a17}
.roads-tool:active{transform:scale(.93)}
.roads-pick{position:absolute;z-index:4;left:50%;top:84px;translate:-50% 0;display:flex;gap:8px;align-items:center;margin:0;padding:12px 18px;border-radius:99px;background:#d2b37d;color:#1b1a17;font-weight:500;white-space:nowrap;box-shadow:0 14px 30px -12px #000}
.roads-app.is-picking .roads-canvas{cursor:crosshair}
.roads-bottom{position:absolute;z-index:2;left:0;right:0;bottom:22px;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.roads-app.has-sheet .roads-bottom{opacity:.0;transform:translateY(20px);pointer-events:none}
.roads-carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 22px 10px;scroll-padding:0 22px;scrollbar-width:none;overscroll-behavior-x:contain}
.roads-carousel::-webkit-scrollbar{display:none}
.roads-empty{margin:0 22px;padding:14px 18px;border-radius:18px;background:#1b1a17e0;color:#c9c3b6}
.road-card{--tone:#c9b690;flex:none;width:236px;scroll-snap-align:start;display:grid;gap:6px;padding:14px 16px 13px;border-radius:22px;border:1px solid #ffffff17;background:linear-gradient(160deg,#25231ff2,#161410f2);color:#ece7dc;text-align:left;font:inherit;cursor:pointer;box-shadow:0 18px 40px -22px #000,inset 0 1px 0 #ffffff12;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s}
.road-card.is-open{--tone:#7ad48a}.road-card.is-closed{--tone:#ff6a4d}.road-card.is-restricted{--tone:#ffb347}
.road-card[aria-pressed=true]{border-color:var(--tone);transform:translateY(-4px);box-shadow:0 22px 44px -20px #000,0 0 0 1px var(--tone) inset,0 0 30px -12px var(--tone)}
.road-card:active{transform:scale(.97)}
.road-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.road-card-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--brand);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--tone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.road-card-status i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--tone);box-shadow:0 0 10px var(--tone)}
.road-card-star{color:#d2b37d}
.road-card-name{font:500 18px/1.15 var(--sans);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.road-card-meta{font-size:12.5px;color:#a39d90}
.road-card-kinds{display:flex;gap:5px;align-items:center;min-height:26px}
.road-card-more{font-size:12px;color:#a39d90}
.road-kind{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:9px;background:#ffffff14;color:#d8d2c5;flex:none}
.road-kind[data-level="1"]{background:#e0b25a2e;color:#f0c878}
.road-kind[data-level="2"]{background:#ff9f3d33;color:#ffb866}
.road-kind[data-level="3"]{background:#ff6a4d33;color:#ff8f78}
.road-kind[data-level="0"]{background:#7ad48a26;color:#9fe0aa}
.road-kind svg{width:16px;height:16px}
.road-pin{width:34px;height:34px;padding:0;border-radius:50% 50% 50% 6px;rotate:-45deg;display:grid;place-items:center;border:2px solid #fffdf8;background:#c9913a;color:#fff;box-shadow:0 8px 18px -6px #000;cursor:pointer;animation:pin-in .45s cubic-bezier(.2,1.4,.4,1) both}
.road-pin svg{rotate:45deg}
.road-pin[data-level="0"]{background:#3f9a52}.road-pin[data-level="2"]{background:#e07a1f}.road-pin[data-level="3"]{background:#d9442a}
@keyframes pin-in{from{transform:scale(.3);opacity:0}}
.maplibregl-marker:has(.road-pin){z-index:1}
.road-summit{position:relative;width:0;height:0;pointer-events:none}
.road-summit i{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1.5px solid #fff4dccc;animation:summit-pulse 2.4s cubic-bezier(.2,.7,.3,1) infinite}
.road-summit span{position:absolute;left:50%;bottom:16px;translate:-50% 0;white-space:nowrap;padding:5px 11px;border-radius:999px;background:rgba(17,15,12,.9);color:#f6ecd8;font:600 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(210,179,125,.45);box-shadow:0 8px 20px -10px #000}
@keyframes summit-pulse{0%{scale:.45;opacity:1}100%{scale:1.35;opacity:0}}

/* the road's sheet: floating glass card on desktop, bottom sheet on phones; the map stays alive behind */
.road-sheet{position:fixed;z-index:40;inset:18px 18px 18px auto;width:min(440px,calc(100vw - 36px));height:auto;max-height:calc(100dvh - 36px);margin:0;padding:0;border:1px solid #ffffff1a;border-radius:28px;background:linear-gradient(170deg,#24221ef7,#141210fa);color:#ece7dc;box-shadow:0 40px 90px -30px #000;overflow:hidden;display:none;flex-direction:column}
.road-sheet[open]{display:flex;animation:road-sheet-in .4s cubic-bezier(.2,.8,.2,1)}
@keyframes road-sheet-in{from{opacity:0;transform:translateX(30px)}}
.road-sheet-grip{display:none}
.road-sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:22px 22px 8px}
.road-sheet-head .caps{margin:0 0 4px;color:#d2b37d}
.road-sheet-head h2{margin:0;font:400 30px/1.05 var(--display,var(--sans));letter-spacing:-.02em;color:#fff}
.road-sheet-head .icon-button{background:#ffffff14;color:#ece7dc}
.road-sheet-body{display:grid;gap:14px;align-content:start;padding:8px 22px 24px;overflow-y:auto;overscroll-behavior:contain}
.road-loading{height:180px;border-radius:18px;background:linear-gradient(90deg,#ffffff08,#ffffff14,#ffffff08);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.road-hero{--tone:#c9b690;display:grid;gap:14px;padding:16px;border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--tone) 22%,transparent),#ffffff08);border:1px solid color-mix(in srgb,var(--tone) 40%,transparent)}
.road-hero.is-open{--tone:#7ad48a}.road-hero.is-closed{--tone:#ff6a4d}.road-hero.is-restricted{--tone:#ffb347}
.road-hero-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.road-hero-status{display:inline-flex;align-items:center;gap:10px;font:500 22px/1 var(--sans);color:#fff}
.road-hero-status i{width:12px;height:12px;border-radius:50%;background:var(--tone);box-shadow:0 0 16px var(--tone)}
.road-hero-source{padding:4px 10px;border-radius:99px;background:#ffffff14;font-size:12px;color:#d8d2c5}
.road-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.road-figures div{padding:10px;border-radius:14px;background:#0000002e}
.road-figures dt{font-family:var(--brand);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#a39d90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.road-figures dd{margin:4px 0 0;font:500 22px/1 var(--sans);color:#fff}
.road-weather-line{margin:-4px 2px 0;font-size:13.5px;color:#c9c3b6}
.road-official{display:grid;gap:4px;padding:12px 14px;border-radius:16px;background:#ffffff0d;border:1px solid #ffffff14}
.road-official .caps{color:#d2b37d}
.road-official p{margin:0}
.road-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.road-actions .m-button{min-height:46px;width:100%}
.m-button.is-ghost-dark{background:#ffffff12;color:#ece7dc;box-shadow:inset 0 0 0 1px #ffffff1f}
.m-button.is-light{background:#ece7dc;color:#1b1a17}
.road-reports{display:grid;gap:10px}
.road-reports .caps{color:#a39d90}
.road-reports ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.road-report{display:flex;gap:12px;padding:12px;border-radius:18px;background:#ffffff0b;border:1px solid #ffffff12}
.road-report[data-level="3"]{border-color:#ff6a4d4d}
.road-report .road-kind{width:40px;height:40px;border-radius:13px}
.road-report .road-kind svg{width:20px;height:20px}
.road-report-main{flex:1;min-width:0;display:grid;gap:4px}
.road-report-main b{font-weight:500;color:#fff}
.road-report-main p{margin:0;color:#d8d2c5;overflow-wrap:anywhere}
.road-report-by{font-size:12.5px;color:#a39d90}
.road-report-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chip-button{min-height:36px;padding:0 13px;border-radius:99px;border:1px solid #ffffff24;background:none;color:#d8d2c5;font:inherit;font-size:13px;cursor:pointer}
.chip-button[aria-pressed=true]{background:#ece7dc;color:#1b1a17;border-color:#ece7dc}
.road-empty{margin:0;color:#a39d90}
.report-route{margin:0;font:500 18px/1.2 var(--sans)}
.kind-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kind-tile{position:relative}
.kind-tile input{position:absolute;opacity:0;inset:0}
.kind-tile span{display:grid;justify-items:center;gap:6px;min-height:86px;padding:10px 4px;border-radius:16px;background:#fffdf8;border:1px solid #1b1a171a;text-align:center;font-size:12px;line-height:1.2;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.kind-tile .road-kind{width:36px;height:36px;border-radius:12px;background:#1b1a170d;color:var(--ink-soft)}
.kind-tile .road-kind[data-level="3"]{background:#b4432a1f;color:#8a3522}.kind-tile .road-kind[data-level="2"]{background:#e3a23c26;color:#8a5212}.kind-tile .road-kind[data-level="1"]{background:#c79a3c1f;color:#8a6420}.kind-tile .road-kind[data-level="0"]{background:#4f8f431f;color:#2f5327}
.kind-tile input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.kind-tile input:checked+span .road-kind{background:#ffffff1f;color:#fff}
.kind-tile input:focus-visible+span{outline:2px solid var(--bronze);outline-offset:2px}
.kind-tile span:active{transform:scale(.96)}
.m-segment.is-wide{display:flex;width:100%}
.m-segment.is-wide label{flex:1}
.m-segment.is-wide span{justify-content:center;padding:0 8px;font-size:13px;text-align:center}
.road-toast{top:auto;bottom:calc(env(safe-area-inset-bottom) + 28px)}
.roads-noscript{position:relative;z-index:5;margin:120px 22px;padding:18px;background:#1b1a17;border-radius:18px}

@media (max-width:860px){
  .roads-app{height:calc(100dvh - env(safe-area-inset-top) - 60px)}
  .roads-top{top:10px;left:10px;right:10px}
  .roads-search{flex:1 1 100%;min-width:0;margin-right:58px;height:46px}
  .roads-filters{margin:0 -10px;padding:0 10px;width:calc(100% + 20px);max-width:none}
  /* On a phone the live badge sits in the bar with the drop-downs (it used to be pinned over them), as a dot alone. */
  .roads-live{position:static;height:32px;padding:0 10px;font-size:11px}
  .roads-live b{display:none}
  .roads-selects{flex:1 1 100%;align-items:center}
  .roads-tools{top:10px;right:10px;gap:6px}
  .roads-tool{width:46px;height:46px;border-radius:15px}
  .roads-tools [data-reset]{display:none}
  .roads-bottom{bottom:calc(env(safe-area-inset-bottom) + 90px)}
  html.is-typing .roads-bottom{bottom:12px}
  .roads-carousel{padding:6px 12px 10px;scroll-padding:0 12px;gap:10px}
  .road-card{width:min(78vw,280px)}
  .road-sheet{inset:auto 0 0 0;width:100%;max-height:62dvh;border-radius:28px 28px 0 0;border-width:1px 0 0}
  .road-sheet[open]{animation:road-sheet-up .38s cubic-bezier(.2,.8,.2,1)}
  @keyframes road-sheet-up{from{transform:translateY(40px);opacity:0}}
  .road-sheet-grip{display:block;width:100%;height:22px;flex:none;position:relative;background:none;border:0}
  .road-sheet-grip::before{content:"";position:absolute;top:9px;left:50%;translate:-50% 0;width:42px;height:5px;border-radius:3px;background:#ffffff33}
  .road-sheet-head{padding:4px 18px 6px}
  .road-sheet-head h2{font-size:26px}
  .road-sheet-body{padding:6px 18px calc(env(safe-area-inset-bottom) + 96px)}
  .kind-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .roads-pick{top:112px}
  .road-toast{bottom:calc(env(safe-area-inset-bottom) + 200px)}
}
@media (prefers-reduced-motion:reduce){.road-summit i{animation:none;opacity:.8}.road-pin,.road-sheet[open],.roads-live i{animation:none}}
.roads-pick[hidden],.roads-live[hidden],.roads-empty[hidden],.road-toast[hidden]{display:none!important}
@media (min-width:861px){.roads-app.has-sheet .roads-tools{right:476px}.roads-app.has-sheet .roads-top{right:540px}.roads-tools{transition:right .35s cubic-bezier(.2,.8,.2,1)}}
@media (max-width:860px){
  .roads-tools{top:auto;bottom:calc(env(safe-area-inset-bottom) + 90px + 136px);right:12px}
  .roads-tools [data-toggle-3d]{position:fixed;top:calc(env(safe-area-inset-top) + 60px + 10px);right:10px}
  .roads-app.has-sheet .roads-tools{display:none}
}
.roads-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.roads-label{position:absolute;left:0;top:0;translate:-50% -100%;margin-top:-5px;padding:0 5px;white-space:nowrap;font:500 11.5px/1.3 var(--sans);color:#e9e3d6;text-shadow:0 1px 2px #000,0 0 6px #000c;letter-spacing:.01em;will-change:transform}
.roads-label::after{content:"";position:absolute;left:50%;bottom:-5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#e9e3d6;box-shadow:0 0 3px #000}
.roads-label.is-r1{font-size:13.5px;font-weight:600;letter-spacing:.02em;color:#fff}
.roads-label.is-r4{font-size:10.5px;color:#cfc8b9}
.roads-credit{position:absolute;z-index:1;left:12px;bottom:4px;margin:0;font-size:9.5px;color:#ffffff73;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
.roads-tool[data-toggle-sat][aria-pressed=true]{background:#1b1a17e0;color:#d2b37d;box-shadow:inset 0 0 0 1px #d2b37d80}
.road-confidence{display:flex;align-items:center;gap:10px}
.road-confidence .caps{color:#a39d90;font-size:8.5px}
.road-confidence b{font-weight:500;font-size:13px;color:#fff;font-variant-numeric:tabular-nums}
.road-meter{flex:1;height:6px;border-radius:3px;background:#ffffff1a;overflow:hidden}
.road-meter i{display:block;height:100%;border-radius:3px;background:var(--tone,#d2b37d)}
.road-meter.is-small{flex:none;width:52px;height:4px}
.road-note{margin:0;font-size:13px;color:#d8d2c5}
.road-note.is-stale{color:#f0c878}
.road-block{display:grid;gap:10px}
.road-block .caps{color:#a39d90}
.road-conditions{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.road-conditions li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:#ffffff0b}
.road-conditions .road-kind{width:32px;height:32px;border-radius:11px}
.road-condition-main{flex:1;display:grid;gap:1px;min-width:0}
.road-condition-main b{font-weight:500;color:#fff}
.road-condition-main span{font-size:12px;color:#a39d90}
.road-conditions li[data-level="3"] .road-meter i{background:#ff6a4d}.road-conditions li[data-level="2"] .road-meter i{background:#ffb347}.road-conditions li[data-level="1"] .road-meter i{background:#f0c878}.road-conditions li[data-level="0"] .road-meter i{background:#7ad48a}
.road-profile{width:100%;height:auto;display:block;border-radius:14px;background:#0000002e}
.road-sides{display:grid;gap:4px;font-size:12.5px;color:#c9c3b6}
.road-nearby{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.road-near{--tone:#c9b690;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid #ffffff14;background:#ffffff08;color:#ece7dc;text-align:left;font:inherit;cursor:pointer}
.road-near.is-open{--tone:#7ad48a}.road-near.is-closed{--tone:#ff6a4d}.road-near.is-restricted{--tone:#ffb347}
.road-near i{grid-row:span 2;width:8px;height:8px;border-radius:50%;background:var(--tone)}
.road-near b{font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.road-near span{font-size:11.5px;color:#a39d90}
.road-hero .road-figures{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
@media (max-width:860px){.road-sheet{max-height:72dvh}.road-nearby{grid-template-columns:minmax(0,1fr)}.roads-credit{bottom:calc(env(safe-area-inset-bottom) + 88px);max-width:calc(100% - 24px)}}
/* Buttons used in the road sheet, for pages without the member stylesheet (home page demo). */
.road-sheet .m-button,.roads-app .m-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:99px;border:0;background:#ece7dc;color:#1b1a17;font:500 14px/1 var(--sans);cursor:pointer;text-decoration:none;white-space:nowrap}
.road-sheet .m-button.is-bronze{background:linear-gradient(135deg,#a8834f,#7a5b30);color:#fff}
.road-sheet .icon-button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer}
.roads-app .caps,.road-sheet .caps{font-family:var(--brand);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.roads-compass svg{transition:transform .08s linear;touch-action:none}
.roads-compass{touch-action:none;cursor:grab}
.roads-compass.is-north{opacity:.85}
/* Home page demo: contained in its section, the sheet stays inside the map. */
.roads-app.is-demo{height:min(86svh,820px);border-radius:28px}
.roads-app.is-demo .road-sheet{position:absolute;inset:14px 14px 14px auto;max-height:calc(100% - 28px)}
.roads-app.is-demo [data-near],.roads-app.is-demo .roads-live,.roads-app.is-demo [data-road-filter=followed],.roads-app.is-demo [data-road-filter=alerts]{display:none}
.roads-app.is-demo .roads-bottom{bottom:18px}
@media (max-width:860px){
  .roads-app.is-demo{height:82svh;border-radius:0}
  .roads-app.is-demo .roads-tools{top:10px;bottom:auto}
  .roads-app.is-demo .roads-tools .roads-compass,.roads-app.is-demo .roads-tools [data-toggle-3d]{position:static}
  .roads-app.is-demo .roads-search{margin-right:58px}
  .roads-app.is-demo .road-sheet{inset:auto 0 0 0;max-height:74%}
  .roads-app.is-demo .roads-bottom{bottom:14px}
  .roads-app.is-demo .roads-credit{bottom:4px}
}
.routes .roads-app.is-demo{max-width:calc(var(--max, 1400px) - 2 * var(--space, 24px));margin:0 auto;width:calc(100% - 2 * var(--space, 24px))}
@media (max-width:860px){.routes .roads-app.is-demo{width:100%;margin:0}}
.road-card.is-likely-open{--tone:#b6d9a4}.road-card.is-likely-closed{--tone:#e8a08c}
.road-hero.is-likely-open{--tone:#b6d9a4}.road-hero.is-likely-closed{--tone:#e8a08c}
.road-near.is-likely-open{--tone:#b6d9a4}.road-near.is-likely-closed{--tone:#e8a08c}
.road-card.is-likely-open .road-card-status i,.road-card.is-likely-closed .road-card-status i{box-shadow:none;outline:1px dashed var(--tone);outline-offset:2px}

/* Roads in the area on screen (or around the member): a warmer edge and a small tag with the distance. */
.road-card.is-near{border-color:#d8b77a66;box-shadow:inset 0 0 0 1px #d8b77a33,0 10px 30px -18px #d8b77a88}
.road-card.is-near .road-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.road-card-near{padding:2px 8px;border-radius:99px;background:#d8b77a24;color:#e7cf9f;font-size:10.5px;letter-spacing:.02em;white-space:nowrap}

/* Area not covered by the map yet: a quiet note at the top, with a way to propose it. */
.roads-uncovered{position:absolute;z-index:4;left:50%;top:84px;translate:-50% 0;display:flex;gap:12px;align-items:center;max-width:calc(100% - 32px);margin:0;padding:10px 10px 10px 18px;border-radius:99px;background:#15130fe6;border:1px solid #d2b37d55;color:#ece7dc;font-size:13.5px;box-shadow:0 14px 30px -14px #000}
.roads-uncovered[hidden]{display:none}
.roads-uncovered span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roads-uncovered:not(:has(button)){padding-right:18px}
.roads-uncovered-action{flex:none;border:0;border-radius:99px;padding:8px 14px;background:#d2b37d;color:#1b1a17;font:500 13px/1 var(--sans, inherit);cursor:pointer}
@media (max-width:860px){.roads-uncovered{top:112px;font-size:12.5px}.roads-uncovered span{white-space:normal}}
/* Proposals */
.proposal-kinds{flex-wrap:wrap;border-radius:18px}
.proposal-mine{margin-top:26px;padding-top:18px;border-top:1px solid #1b1a1714}
.proposal-mine h3{margin:0 0 8px}
.proposal-status{flex:none;padding:3px 10px;border-radius:99px;font-size:12px;background:#1b1a170d}
.proposal.is-planned .proposal-status{background:#d2b37d33}
.proposal.is-done .proposal-status{background:#4f9d6a2e;color:#2f6d45}
.proposal.is-declined .proposal-status{opacity:.6}
.proposal-sheet [hidden]{display:none!important}

/* Layers (satellite, buildings and trees): side by side with the other tools on large screens; on phones grouped behind
   one "Layers" button that opens a small panel with their names, so the column of tools stays short. */
.roads-layers{display:contents}
.roads-layers-toggle,.roads-tool-label{display:none}
@media (max-width:860px){
  .roads-layers-toggle{display:grid}
  .roads-layers{position:absolute;right:calc(100% + 10px);top:0;display:grid;gap:6px;padding:8px;border-radius:20px;background:#15130ff2;border:1px solid #ffffff1a;box-shadow:0 20px 40px -18px #000;opacity:0;pointer-events:none;translate:10px 0;transition:opacity .2s,translate .2s}
  .roads-layers.is-open{opacity:1;pointer-events:auto;translate:0 0}
  .roads-layers .roads-tool{width:auto;min-width:210px;height:46px;display:flex;justify-content:flex-start;gap:12px;padding:0 14px;box-shadow:none}
  .roads-layers .roads-tool-label{display:inline;font:500 14px/1 var(--sans);letter-spacing:0;white-space:nowrap}
  .roads-tools{position:absolute}
  .roads-tools [data-propose]{order:5}
}
.road-events{display:grid;gap:8px}
.road-event{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:#ffffff0d;border:1px solid #ffffff1a;color:#f3ede2;text-decoration:none}
.road-event:hover{background:#ffffff17}
.road-event span{font-size:13px;color:#cfc6b6}
.road-card-marks{display:inline-flex;gap:6px;align-items:center}
.road-card-ridden{color:#8fc79a;font-weight:700}
.road-log-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.road-log-link{font-size:12px;color:#cfc6b6}
.road-log-summary{display:flex;gap:8px;align-items:center;margin:6px 0 10px;color:#e9e1d2}
.road-log-summary i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#3f9a5233;color:#8fc79a;font-size:12px}
.road-log-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.road-log-form[hidden]{display:none}
.road-log-form input,.road-log-form select{min-height:36px;padding:0 10px;border-radius:10px;border:1px solid #ffffff26;background:#ffffff0f;color:#f3ede2;font:inherit;font-size:14px;color-scheme:dark}
.road-links{display:grid;gap:8px}
.road-link-row{display:flex;gap:6px;align-items:center}
.road-link{flex:1;display:grid;gap:1px;padding:9px 12px;border-radius:12px;background:#ffffff0d;border:1px solid #ffffff1a;color:#f3ede2;text-decoration:none}
.road-link:hover{background:#ffffff17}
.road-link span{font-size:12px;color:#cfc6b6}
.road-link.is-webcam b::before{content:"● ";color:#8fc79a}
.road-link-form{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.road-link-form select,.road-link-form input{min-height:34px;padding:0 10px;border-radius:10px;border:1px solid #ffffff26;background:#ffffff0f;color:#f3ede2;font:inherit;font-size:13px;min-width:0;flex:1}
.road-link-form select{flex:0 0 auto}
.roads-selects{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.roads-selects .roads-live{margin-left:auto}
/* Every drop-down of the map wears the same chevron, set in from the edge: the native one sat against the border. */
.roads-selects select,.road-log-form select,.road-link-form select,.roads-ui select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ece7dc' stroke-width='1.6' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center}
.roads-selects select{min-height:40px;max-width:190px;padding:0 34px 0 14px;border-radius:99px;border:1px solid #ffffff1f;background-color:#1b1a17e0;color:#ece7dc;font:inherit;font-size:13px;cursor:pointer}
.roads-reset{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 15px;border-radius:99px;border:1px solid #ffffff1f;background:#1b1a17e0;color:#ece7dc;font:inherit;font-size:13px;cursor:pointer}
.roads-reset:hover{background:#26241fe6;border-color:#ffffff33}
.roads-reset[hidden]{display:none}
.roads-selects select:hover{background:#26241fe6}
@media (max-width:760px){.roads-selects select{flex:1;max-width:none}}

/* ——— adding to the map, in three steps: what, where (drawn on the map), details ——— */
.road-draw{position:absolute;z-index:6;right:22px;top:80px;width:min(380px,calc(100vw - 44px));max-height:calc(100% - 220px);display:flex;flex-direction:column;border-radius:22px;background:#13110ef2;backdrop-filter:blur(14px);border:1px solid #ffffff1a;box-shadow:0 30px 70px -30px #000;color:#ece7dc;overflow:hidden}
.road-draw[hidden]{display:none}
.draw-head{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 10px;border-bottom:1px solid #ffffff14}
.draw-head h2{margin:2px 0 0;font-size:20px;font-weight:300;letter-spacing:-.02em}
.draw-head .eyebrow{margin:0;font-size:10px;color:#a8834f}
.draw-head .icon-button{margin-left:auto;background:#ffffff0f;color:#ece7dc}
.draw-body{padding:14px 16px;overflow-y:auto;display:grid;gap:12px}
.draw-body p{margin:0;font-size:13.5px;line-height:1.5}
.draw-kinds{display:grid;gap:8px}
.draw-kind{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:12px 14px;border-radius:16px;border:1px solid #ffffff14;background:#ffffff08;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .18s,border-color .18s}
.draw-kind:hover{background:#ffffff14;border-color:#ffffff2e}
.draw-kind .icon{grid-row:span 2;color:#e0c48b}
.draw-kind b{font-weight:500;font-size:15px}
.draw-kind span{font-size:12.5px;color:#ece7dc99;line-height:1.4}
.draw-hint{color:#ece7dcd9}
.draw-count{font-size:13px;color:#e0c48b;font-variant-numeric:tabular-nums}
.draw-place{color:#ece7dc99;font-size:12.5px}
.draw-tools{display:flex;gap:8px;flex-wrap:wrap}
.draw-tools .m-button{border-color:#ffffff26;color:#ece7dc;background:#ffffff0f}
.draw-tools .m-button:hover{background:#ffffff1f}
.draw-tools [hidden]{display:none}
.draw-foot{display:flex;gap:8px;justify-content:space-between;padding:12px 16px;border-top:1px solid #ffffff14}
.draw-foot [hidden]{display:none}
.road-draw [hidden]{display:none!important}
.draw-foot .m-button:not(.is-ghost){background:#e0c48b;color:#1b1a17;border-color:transparent;margin-left:auto}
.road-draw .m-field span{color:#ece7dc99}
.road-draw .m-field input,.road-draw .m-field textarea{background:#ffffff0f;border-color:#ffffff26;color:#f3ede2;box-shadow:none}
.road-draw .proposal-mine{border-top:1px solid #ffffff14;padding-top:10px}
.road-draw .m-list li{color:#ece7dcd9;border-color:#ffffff14}
/* The marks left by each point placed, and the map itself saying it is waiting for one. */
/* The marks left by each point placed: big enough to be seen against a satellite view, numbered in the ink of the site. */
.draw-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f3dfae;color:#13110e;font:700 14px/1 var(--sans);border:3px solid #13110e;box-shadow:0 3px 10px #000b,0 0 0 2px #f3dfae66}
.draw-dot:first-letter{letter-spacing:0}
.draw-dot{cursor:grab}
.draw-dot.is-on{background:#fff;box-shadow:0 3px 10px #000b,0 0 0 4px #f3dfaeaa}
/* The points of the drawing, beside the map: each one is gone to, moved, inserted after, or taken out. */
.draw-points-box{margin:10px 0 0;border-top:1px solid #ffffff14;padding-top:10px}
.draw-points-box h3{margin:0 0 8px;font-size:10px;letter-spacing:.14em;color:#ece7dc80}
.draw-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:34vh;overflow:auto}
.draw-point{display:flex;align-items:center;gap:6px;border-radius:10px;background:#ffffff08}
.draw-point.is-on{background:#f3dfae1f;box-shadow:inset 0 0 0 1px #f3dfae4d}
.draw-point.is-waiting{box-shadow:inset 0 0 0 1px #f3dfaeaa}
.draw-point-go{flex:1;display:flex;align-items:center;gap:9px;padding:7px 9px;border:0;background:none;color:#ece7dc;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.draw-point-go b{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:#f3dfae;color:#13110e;font-size:11px}
.draw-point-go span{color:#ece7dc8c;font-size:12px}
.draw-point-tools{display:flex;gap:2px;padding-right:5px}
.draw-point-tools .icon-button{width:26px;height:26px;min-height:0;padding:0;border-radius:8px;background:#ffffff0f;color:#ece7dc;font-size:15px;line-height:1}
.draw-point-tools .icon-button:hover{background:#f3dfae;color:#13110e}
.roads-app.is-drawing .maplibregl-canvas{cursor:crosshair}
@media (max-width:860px){
  .road-draw{right:10px;left:10px;top:auto;bottom:calc(env(safe-area-inset-bottom) + 84px);width:auto;max-height:64dvh}
  .roads-app.is-drawing .roads-bottom{display:none}
}