/* ===== Atlas shared chrome: colorful social + email signup (2026-07-11) ===== */

/* base social rail (also used when chrome.js injects the rail on pages that lack it, e.g. ride) */
.social{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:65;display:flex;flex-direction:column;gap:12px}
.social a{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;text-decoration:none;
  box-shadow:0 4px 16px rgba(0,0,0,.45);transition:transform .25s,filter .25s,box-shadow .25s}
.social svg{width:21px;height:21px}
.social a:hover,.social a:focus-visible{transform:translateY(-2px);filter:brightness(1.12);outline:none}
.social a:focus-visible{outline:3px solid #f6edd8;outline-offset:2px}

/* colorful, distinct brand chips (override any per-page plain styling via attribute specificity) */
.social a[aria-label="TikTok"]{background:#010101;border:1px solid rgba(255,255,255,.28)}
.social a[aria-label="TikTok"] svg{fill:#fff;filter:drop-shadow(1.1px 0 #25F4EE) drop-shadow(-1.1px 0 #FE2C55)}
.social a[aria-label="Instagram"]{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);border:1px solid rgba(255,255,255,.4)}
.social a[aria-label="Instagram"] svg{fill:#fff}
.social a[aria-label="Threads"]{background:#0a0a0a;border:1px solid rgba(255,255,255,.28)}
.social a[aria-label="Threads"] svg{fill:#fff}
.social a[aria-label="YouTube"]{background:#ff0000;border:1px solid rgba(255,255,255,.4)}
.social a[aria-label="YouTube"] svg{fill:#fff}
@media (max-width:640px){ .social{left:9px;gap:9px} .social a{width:38px;height:38px} .social svg{width:19px;height:19px} }

/* email signup button (top-right, every page) */
.mailbtn{position:fixed;top:16px;right:16px;z-index:70;display:inline-flex;align-items:center;gap:.5em;
  min-height:44px;padding:11px 18px;border:0;border-radius:999px;cursor:pointer;
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:600;font-size:.92rem;
  color:#0a1710;background:linear-gradient(180deg,#f7c96c,#e6a34a);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.mailbtn:hover{transform:translateY(-1px)}
.mailbtn:focus-visible{outline:3px solid #f6edd8;outline-offset:3px}
@media (max-width:640px){ .mailbtn{padding:11px 13px} .mailbtn .mb-txt{display:none} }

/* email modal + working confirmation toast */
.mailmodal{position:fixed;inset:0;z-index:95;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,10,7,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mailmodal.open{display:flex}
.mailcard{position:relative;width:min(92vw,420px);background:rgba(10,24,16,.98);border:1px solid rgba(247,201,108,.25);
  border-radius:18px;padding:28px 24px 22px;box-shadow:0 30px 90px rgba(0,0,0,.65);color:#f6edd8;text-align:center;
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.mailcard h3{font-family:"Fraunces",Georgia,serif;font-size:1.5rem;font-weight:600;margin:0 0 6px}
.mailcard p{font-size:.95rem;color:rgba(246,237,216,.82);margin:0 0 16px}
.mailx{position:absolute;top:8px;right:10px;background:none;border:0;color:rgba(246,237,216,.72);font-size:1.35rem;cursor:pointer;min-height:42px;min-width:42px}
.mailx:hover{color:#f7c96c}
.mailrow{display:flex;gap:8px}
.mailrow input{flex:1;min-height:48px;padding:12px 15px;border-radius:11px;border:1px solid rgba(247,201,108,.4);background:rgba(8,20,14,.7);color:#f6edd8;font-family:inherit;font-size:1rem}
.mailrow input:focus-visible{outline:2px solid #f7c96c;outline-offset:1px}
.mailrow button{min-height:48px;padding:0 18px;border:0;border-radius:11px;cursor:pointer;font-family:inherit;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;color:#0a1710;background:linear-gradient(180deg,#f7c96c,#e6a34a)}
.mailnote{margin-top:14px;font-size:1.02rem;color:#f7c96c;min-height:1.2em;opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s}
.mailnote.show{opacity:1;transform:none}