/* Spot report and Save this spot (src/spot-report.js). RIPA: light surface, petrol the only action colour. */
html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#spotReport,#spotSave):not([hidden]) { position:fixed!important; left:0!important; right:0!important; top:auto!important; bottom:var(--nav-h,0px)!important; z-index:47!important; display:block!important; width:auto!important; margin:0!important; padding:8px 0 calc(12px + env(safe-area-inset-bottom))!important; border-radius:22px 22px 0 0!important; background:var(--g-surface,#f3f9fc)!important; color:var(--g-ink,#183746)!important; box-shadow:0 -6px 24px rgba(24,55,70,.2)!important; border:0!important; overflow-y:auto!important; overscroll-behavior:contain; }
html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #spotReport:not([hidden]) { max-height:min(58dvh,calc(100dvh - var(--nav-h,0px) - 150px))!important; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #spotSave:not([hidden]) { height:auto!important; }
@media (min-width:900px) { html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#spotReport,#spotSave):not([hidden]) { left:calc(var(--dp,0px) + 48px)!important; right:auto!important; bottom:12px!important; width:360px!important; border-radius:22px!important; } }
/* The map buttons step aside while the report is open: a card never covers them. */
html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-h75]:not(#_h) :is(#thumbRail,#spotCard) { display:none!important; }
#spotReport .sr-head { position:sticky; top:-8px; z-index:1; margin-top:-8px; padding-top:12px!important; background:var(--g-surface,#f3f9fc); }
#spotReport .sr-head,#spotSave .ss-head { display:flex; align-items:center; gap:10px; padding:4px 14px 8px 18px; }
#spotReport .sr-title { flex:1; min-width:0; }
#spotReport .sr-title h2,#spotSave .ss-head h2 { display:flex; align-items:center; gap:7px; margin:0; font:600 21px/1.15 var(--font-headline,Outfit),Inter,sans-serif; color:var(--g-ink,#183746); }
#spotSave .ss-head h2 { flex:1; font-size:18px; }
#spotReport .sr-title h2 .ui-icon { width:19px; height:19px; stroke:var(--g-accent,#186676); }
#spotReport .sr-title small { display:block; margin-top:3px; font:400 13px var(--font-sans,Inter); color:var(--g-muted,#526e7b); }
#spotReport .sr-title em { font-style:normal; font-weight:600; color:var(--g-accent,#186676); }
html body.vertex-v3 #app#app#app#app#app :is(#spotReport .sr-round,#spotSave .ss-close) { flex:none; width:40px!important; height:40px!important; min-height:0!important; margin:0!important; padding:0!important; border:0!important; border-radius:50%!important; background:var(--g-raised,#dde9ee)!important; color:var(--g-ink,#183746)!important; display:grid!important; place-items:center; font:400 24px/1 var(--font-sans,Inter)!important; box-shadow:none!important; }
#spotReport .sr-round .ui-icon { width:19px; height:19px; stroke:var(--g-accent,#186676); }
html body.vertex-v3 #app#app#app#app#app #spotReport .sr-row { display:flex!important; align-items:center; gap:12px; width:100%!important; min-height:56px!important; margin:0!important; padding:8px 16px 8px 18px!important; border:0!important; border-top:1px solid var(--g-line,rgba(24,55,70,.08))!important; border-radius:0!important; background:none!important; color:var(--g-ink,#183746)!important; text-align:left!important; font:inherit!important; box-shadow:none!important; }
#spotReport .sr-ico { flex:none; width:34px; height:34px; border-radius:50%; background:var(--g-raised,#dde9ee); display:grid; place-items:center; }
#spotReport .sr-ico .ui-icon { width:17px; height:17px; }
#spotReport .sr-tx { flex:1; min-width:0; display:block; }
#spotReport .sr-tx b { display:flex; align-items:center; gap:6px; font:500 15px/1.25 var(--font-sans,Inter); }
#spotReport .sr-tx small { display:block; margin-top:2px; font:400 12.5px/1.3 var(--font-sans,Inter); color:var(--g-muted,#526e7b); }
#spotReport .sr-chev { flex:none; width:15px; height:15px; color:var(--g-muted,#526e7b); opacity:.7; }
/* EAWS danger colours, as on the Avalanche layer. */
#spotReport .sr-danger { flex:none; min-width:19px; height:19px; padding:0 5px; border-radius:5px; display:inline-grid; place-items:center; font:600 12px/1 var(--font-sans,Inter); color:#183746; background:#ccff66; }
#spotReport .sr-danger[data-level="2"] { background:#ffff00; }
#spotReport .sr-danger[data-level="3"] { background:#ff9900; color:#fff; }
#spotReport .sr-danger[data-level="4"],#spotReport .sr-danger[data-level="5"] { background:#ff0000; color:#fff; }
#spotReport .sr-wait { margin:0; padding:14px 18px; font:400 14px var(--font-sans,Inter); color:var(--g-muted,#526e7b); border-top:1px solid var(--g-line,rgba(24,55,70,.08)); }
#spotReport .sr-actions { display:flex; gap:8px; padding:10px 16px 0; }
html body.vertex-v3 #app#app#app#app#app :is(#spotReport .sr-actions button,#spotSave .ss-save) { flex:1; min-height:48px!important; margin:0!important; border:0!important; border-radius:14px!important; background:var(--g-accent,#186676)!important; color:#fff!important; font:600 16px var(--font-sans,Inter)!important; box-shadow:none!important; }
html body.vertex-v3 #app#app#app#app#app#app #spotSave .ss-save { display:block!important; width:calc(100% - 32px)!important; margin:10px 16px 0!important; }
html body.vertex-v3 #app#app#app#app#app #spotSave input { display:block; width:calc(100% - 32px)!important; box-sizing:border-box; margin:2px 16px 0!important; padding:12px 14px!important; border-radius:14px!important; color:var(--g-ink,#183746)!important; font:500 16px var(--font-sans,Inter)!important; outline:none; }
html body.vertex-v3 #app#app#app#app#app #spotSave .ss-alert { display:flex!important; align-items:center; gap:12px; width:100%!important; min-height:52px!important; margin:4px 0 0!important; padding:6px 18px!important; border:0!important; border-radius:0!important; background:none!important; color:var(--g-ink,#183746)!important; text-align:left!important; font:inherit!important; box-shadow:none!important; }
#spotSave .ss-alert>.ui-icon { flex:none; width:20px; height:20px; }
#spotSave .ss-alert>span { flex:1; min-width:0; display:block; }
#spotSave .ss-alert b { display:block; font:500 15px var(--font-sans,Inter); }
#spotSave .ss-alert small { display:block; font:400 12.5px var(--font-sans,Inter); color:var(--g-muted,#526e7b); }
/* Saved: a short note above the bottom bar, with Edit. */
html body.vertex-v3 #app#app#app#app#app#app #spotSavedNote:not([hidden]) { position:fixed; left:16px; right:16px; bottom:calc(var(--nav-h,0px) + 14px); z-index:48; display:flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; border-radius:14px; background:var(--g-ink,#183746); color:#fff; font:500 14px var(--font-sans,Inter); box-shadow:0 4px 16px rgba(24,55,70,.3); }
#spotSavedNote .ui-icon { flex:none; width:18px; height:18px; fill:#9fd4de; stroke:#9fd4de; }
#spotSavedNote span { flex:1; min-width:0; }
html body.vertex-v3 #app#app#app#app#app#app #spotSavedNote button { flex:none; min-height:36px!important; margin:0!important; padding:0 12px!important; border:0!important; border-radius:10px!important; background:none!important; color:#9fd4de!important; font:600 14px var(--font-sans,Inter)!important; box-shadow:none!important; }
@media (min-width:900px) { html body.vertex-v3 #app#app#app#app#app#app #spotSavedNote:not([hidden]) { left:calc(var(--dp,0px) + 48px); right:auto; width:340px; bottom:16px; } }
/* While the report is open the label above the dot steps back: the card says it all. */
.snow-tap.reporting .snow-tap-label { display:none; }
/* iPhone keyboard: the save sheet rides on top of it, never under it. */
html[data-keyboard-open] body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #spotSave[data-keyboard-panel]:not([hidden]) { bottom:var(--keyboard-bottom,0px)!important; height:auto!important; max-height:calc(var(--keyboard-view-height,100dvh) - 16px)!important; padding-bottom:12px!important; }
/* The save sheet pulls down like the app's other cards; its head keeps the card's own colour, not a second band. */
html body.vertex-v3 #app#app#app#app#app#app #spotSave>.ss-head { background:var(--g-surface,#f3f9fc)!important; }