/* My places (src/my-places.js) and the powder alert switch on the pin card. RIPA: petrol is the only action colour. */
html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #placesSheet#placesSheet:not([hidden]) { position:fixed!important; inset:0!important; z-index:1100!important; background:var(--g-surface,#f3f9fc)!important; overflow-y:auto!important; border-radius:0!important; transform:none!important; opacity:1!important; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-body { padding:0 0 calc(24px + env(safe-area-inset-bottom)); }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-tabs { display:flex; gap:20px; padding:2px 20px 0; border-bottom:1px solid var(--g-line); overflow-x:auto; scrollbar-width:none; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-tabs::-webkit-scrollbar { display:none; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-tabs button { flex:none; margin:0; padding:8px 0 10px; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:var(--g-muted); font:500 15px var(--font-sans,Inter); min-height:0; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-tabs button[aria-selected="true"] { color:var(--g-accent); border-bottom-color:var(--g-accent); }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-head { margin:0; padding:18px 20px 4px; font:600 11px var(--font-sans,Inter); letter-spacing:.09em; text-transform:uppercase; color:var(--g-muted); }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-row { display:flex; align-items:center; gap:13px; width:100%; min-height:56px; margin:0; padding:8px 18px 8px 20px; border:0; border-radius:0; background:none; color:var(--g-ink); text-align:left; font:inherit; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-ico { flex:none; width:36px; height:36px; border-radius:50%; background:var(--g-raised,#dde9ee); display:grid; place-items:center; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-ico .ui-icon,
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-bell .ui-icon { width:18px; height:18px; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-tx { flex:1; min-width:0; display:block; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-tx b { display:block; font:500 16px var(--font-sans,Inter); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-tx small { display:block; margin-top:2px; font:400 12.5px var(--font-sans,Inter); color:var(--g-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-bell { flex:none; display:grid; color:var(--g-accent); }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-chev { flex:none; width:16px; height:16px; color:var(--g-muted); opacity:.7; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-empty { display:grid; gap:6px; padding:28px 24px; text-align:center; color:var(--g-muted); font:400 14px/1.45 var(--font-sans,Inter); }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-empty b { color:var(--g-ink); font-weight:600; font-size:16px; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-edit { padding:6px 0 8px; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-label { display:grid; gap:6px; padding:8px 18px 4px 20px; font:500 12px var(--font-sans,Inter); color:var(--g-muted); }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-field { width:100%; box-sizing:border-box; padding:12px 14px; border-radius:14px; border:1px solid var(--g-line); background:#fff; color:var(--g-ink); font:500 16px var(--font-sans,Inter); }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-field:focus { outline:none; border-color:var(--g-accent); }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-chips { display:flex; gap:8px; padding:2px 20px 6px 69px; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-chips[hidden] { display:none; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-chips button { margin:0; min-height:36px; padding:0 14px; border:0; border-radius:999px; background:var(--g-raised,#dde9ee); color:var(--g-ink); font:500 14px var(--font-sans,Inter); }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-chips button[aria-checked="true"] { background:var(--g-accent); color:#fff; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-note { margin:4px 20px 0 69px; font:400 12.5px/1.4 var(--font-sans,Inter); color:var(--g-muted); }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-note[hidden] { display:none; }
body.vertex-v3 #app#app#app#app#app #placesSheet .mp-delete { display:block; width:calc(100% - 36px); margin:22px 18px 0; min-height:48px; border:0; border-radius:14px; background:var(--g-raised,#dde9ee); color:var(--g-ink); font:600 16px var(--font-sans,Inter); }
/* The one switch: grey with a white knob, petrol when on. */
body.vertex-v3 #app#app#app#app#app .mp-switch { flex:none; position:relative; width:44px; height:26px; border-radius:999px; background:var(--g-raised,#c5d3da); transition:background .15s; }
body.vertex-v3 #app#app#app#app#app .mp-switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(var(--g-shadow-rgb,24,55,70),.24); transition:transform .15s; }
body.vertex-v3 #app#app#app#app#app [aria-checked="true"]>.mp-switch { background:var(--g-accent); }
body.vertex-v3 #app#app#app#app#app [aria-checked="true"]>.mp-switch::after { transform:translateX(18px); }
@media (prefers-reduced-motion:reduce){ body.vertex-v3 #app#app#app#app#app .mp-switch,body.vertex-v3 #app#app#app#app#app .mp-switch::after { transition:none; } }
/* Pin card: one row under the name, like the rows in My places. */
body.vertex-v3 #app#app#app#app#app #spotCard .spot-alert { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; margin:0; padding:4px 2px; border:0; border-radius:0; background:none; color:var(--g-ink); text-align:left; font:inherit; }
body.vertex-v3 #app#app#app#app#app #spotCard .spot-alert>.ui-icon { flex:none; width:20px; height:20px; }
body.vertex-v3 #app#app#app#app#app #spotCard .spot-alert>span { flex:1; min-width:0; display:block; }
body.vertex-v3 #app#app#app#app#app #spotCard .spot-alert b { display:block; font:500 15px var(--font-sans,Inter); }
body.vertex-v3 #app#app#app#app#app #spotCard .spot-alert small { display:block; font:400 12.5px var(--font-sans,Inter); color:var(--g-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.vertex-v3 #app#app#app#app#app #spotCard.spot-sending .spot-alert { display:none; }
body.vertex-v3 #app#app#app#app#app #spotCard .spot-save-status { display:none!important; }