/* Say Hello - guest + signed-in visual demo.
   Standalone stylesheet: no inline CSS anywhere on the page, because Say Hello
   may ship as its own PWA later and every rule it needs lives here (or in the
   shared common.css). Pure presentation - all data is hardcoded mock data and
   nothing here ever talks to a backend. */

/* ---------- state switch: guest vs signed-in ----------
   The demo class lands on <body> from an inline script (profile cookie) or
   the ?demo=1 hand-off, before the first paint. */
.sh-signed{display:none}
body.demo .sh-guest{display:none}
body.demo .sh-signed{display:block}

/* ---------- page frame ---------- */
/* Nothing may ever push past the side edges of the page. */
.sh-wrap{max-width:860px;margin:0 auto;padding:16px 20px 72px;overflow-x:clip}

/* ---------- guest: hero ---------- */
.sh-hero{position:relative;height:clamp(300px,42vh,500px);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow);margin-top:8px;background:linear-gradient(160deg,var(--mist),var(--rose-l))}
.sh-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sh-hero-veil{position:absolute;inset:0;background:rgba(255,255,255,.26)}
/* Lighter, more translucent, pushed down so the tiles show above the card. */
.sh-hero-card{position:absolute;left:50%;top:63%;transform:translate(-50%,-50%);width:min(88%,470px);text-align:center;padding:26px 30px;border-radius:24px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.6);box-shadow:0 14px 32px rgba(150,100,110,.13);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.sh-hero-card h1{font-family:'Fraunces',serif;font-size:clamp(28px,6vw,44px);font-weight:600;line-height:1.18;color:var(--ink);margin:0}
.sh-hero-card p{margin:10px 0 0;font-size:14.5px;font-weight:700;letter-spacing:.06em;color:var(--jade)}

/* ---------- guest: primary button ---------- */
.sh-btn{font-family:'Fraunces',serif;font-size:17px;font-weight:600;letter-spacing:.04em;color:#fff;background:linear-gradient(170deg,var(--jade-l),var(--jade));border:none;border-radius:999px;padding:15px 34px;cursor:pointer;box-shadow:0 12px 28px rgba(63,116,100,.28);transition:transform .22s ease,box-shadow .22s ease}
.sh-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(63,116,100,.34)}
.sh-btn:active{transform:translateY(0)}

/* ---------- guest: city picker ---------- */
.sh-picker{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:24px 24px 28px;margin-top:12px}
/* Single pink headline - no sub-heading. */
.sh-picker-title{font-family:'Fraunces',serif;font-size:24px;font-weight:600;margin:0 0 20px;color:var(--rose-d);line-height:1.3}
.sh-field{display:block;margin-bottom:14px}
.sh-label{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--jade);margin-bottom:7px}
/* Inputs are a quarter shorter than before; everything else unchanged. */
.sh-select,.sh-input,.sh-city{width:100%;font-family:'Nunito',sans-serif;font-size:18px !important;font-weight:700;color:var(--ink);border-radius:14px;padding:8px 16px;outline:none;transition:border-color .18s,box-shadow .18s;-webkit-appearance:none;appearance:none}
.sh-select{background:#fff;border:1.5px solid var(--rose-l);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C6168' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px;padding-right:46px;cursor:pointer}
.sh-select:focus,.sh-input:focus,.sh-city:focus{border-color:var(--celadon);box-shadow:0 0 0 4px rgba(143,182,162,.18)}
/* ZIP hint: bold gray, small enough that the whole sentence shows uncut on a
   phone (the placeholder scales with the viewport, the typed ZIP stays 18px). */
.sh-input::placeholder{font-weight:800;color:#8A7278;opacity:1;font-size:clamp(9.5px,2.75vw,11.5px);letter-spacing:0}
.sh-city::placeholder{color:#8A7278;font-weight:600;opacity:1;font-size:clamp(9.5px,2.75vw,11.5px)}
/* ZIP is the write-only field: pale green fill with a dashed celadon border,
   echoing the city search window it feeds. */
.sh-input{background:var(--mist);border:1.5px dashed var(--celadon)}
.sh-city{margin-top:10px;color:var(--jade);background:#fff;border:1.5px solid var(--rose-l)}
/* The city field is read-only now: one tap opens the search window. */
.sh-city[readonly]{cursor:pointer}
/* The city field owns the suggestion box; it is a plain wrapper (not a label)
   so tapping a suggestion never double-fires the input. */
.sh-field-city{position:relative}
/* City suggestions ALWAYS open upward (a phone keyboard would cover a dropdown
   that opens down). The box is fixed to the viewport and parked above whichever
   field is active (say-hello.js places it); ten to twelve rows fit before it
   scrolls inside. */
.sh-suggest{position:fixed;left:0;top:auto;bottom:0;width:100%;z-index:2147481000;max-height:min(52vh,480px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;border:1.5px solid var(--celadon);border-radius:14px;box-shadow:0 16px 36px rgba(180,120,150,.24);display:none}
.sh-suggest.on{display:block}
/* Ghost-wall guard: hidden fixed panels never eat taps, even before their
   display flips. The open states below restore interaction. */
.sh-suggest,.city-panel{pointer-events:none}
.sh-suggest.on,.city-panel.on{pointer-events:auto}
.sh-suggest button{display:block;width:100%;text-align:left;font-family:'Nunito',sans-serif;font-size:15.5px;font-weight:700;color:var(--ink);background:none;border:none;border-radius:10px;padding:10px 14px;cursor:pointer}
.sh-suggest button:hover,.sh-suggest button:focus-visible{background:var(--mist);outline:none}
.sh-suggest button .sz{float:right;font-size:12px;font-weight:600;color:var(--ink-soft)}
.sh-hint{font-size:13.5px;color:var(--ink-soft);font-weight:600;margin:10px 2px 0}

/* ---------- guest: city search window ----------
   A two-thirds-screen, gray, translucent panel floating dead-centre over a
   dimmed page: a search field with a close button on top, the state's cities
   scrolling in the middle, and the phone keyboard sitting under it while you
   type. Picking a city fills the form and closes the window - the same shape
   as the city pickers in the big shopping apps. */
.sh-city-mask{position:fixed;inset:0;z-index:2147482900;background:rgba(70,58,64,.38);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.sh-city-mask.on{opacity:1;pointer-events:auto}
.city-panel{position:fixed;left:50%;transform:translateX(-50%);width:66.67vw;background:rgba(112,104,110,.62);border-radius:16px;display:none;flex-direction:column;z-index:2147483000;overflow:hidden;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1.5px solid rgba(255,255,255,.34);box-shadow:0 26px 60px rgba(90,60,70,.34)}
.city-panel.on{display:flex}
/* The head (search field + close) is fixed and never scrolls; the body holds
   the scrolling list - so the input stays in sight above the phone keyboard. */
.city-panel-head{flex:none;display:flex;align-items:center;gap:8px;padding:12px 12px 10px;border-bottom:1.5px solid rgba(255,255,255,.26)}
.city-panel-input{flex:1;min-width:0;font-family:'Nunito',sans-serif;font-size:16.5px !important;font-weight:700;color:var(--ink);background:rgba(255,255,255,.92);border:1.5px solid rgba(255,255,255,.7);border-radius:999px;padding:9px 16px;outline:none}
.city-panel-input::placeholder{color:var(--ink-soft);font-weight:600}
.city-panel-input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.city-panel-close{flex:none;width:34px;height:34px;display:grid;place-items:center;font-family:'Nunito',sans-serif;font-size:20px;font-weight:800;line-height:1;color:#fff;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.4);border-radius:50%;cursor:pointer;padding:0 0 2px}
.city-panel-close:hover{background:rgba(255,255,255,.32)}
.city-panel-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 10px calc(10px + env(safe-area-inset-bottom))}
.city-panel-body button{display:block;width:100%;text-align:left;font-family:'Nunito',sans-serif;font-size:16px;font-weight:700;color:#fff;background:none;border:none;border-radius:12px;padding:11px 12px;cursor:pointer}
.city-panel-body button:hover,.city-panel-body button:focus-visible{background:rgba(255,255,255,.22);outline:none}
.city-panel-empty{margin:0;padding:18px 12px;text-align:center;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.86)}

/* numeric keypad (display only in this demo) */
.sh-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:336px;margin:20px auto 2px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sh-pad button{font-family:'Nunito',sans-serif;font-size:24px;font-weight:800;color:var(--ink);background:linear-gradient(170deg,#fff,var(--pale));border:1.5px solid var(--line);border-radius:16px;padding:18px 0;cursor:pointer;box-shadow:0 4px 10px rgba(180,140,150,.10);transition:transform .12s ease,background .12s ease}
.sh-pad button:hover{border-color:var(--rose-d)}
.sh-pad button:active{transform:scale(.93);background:var(--rose-l)}
.sh-pad .k0{grid-column:2}
/* Clear and Backspace share the number-key look and the same visual weight
   (Clear is full 24px like the digits; Backspace is the iOS-style delete icon). */
.sh-pad .k-clear{grid-column:1;font-size:24px;font-weight:800;letter-spacing:.02em}
.sh-pad .k-bs{grid-column:3;font-size:24px;display:flex;align-items:center;justify-content:center}
.sh-pad .k-bs svg{width:32px;height:24px;display:block}

/* ---------- guest: login section ---------- */
/* One pressable card: opens the shared sign-in modal (#mP1). */
.sh-login{margin-top:36px;padding:0;background:none;border:none;box-shadow:none;border-radius:0}
.sh-login-btn{display:block;width:100%;max-width:560px;margin:0 auto;text-align:center;font-family:inherit;cursor:pointer;padding:24px 22px 26px;border-radius:var(--r-xl);border:1.5px solid var(--rose-l);background:linear-gradient(170deg,var(--paper),var(--pale));box-shadow:0 14px 30px rgba(180,120,130,.20),inset 0 1px 0 #fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;-webkit-tap-highlight-color:transparent}
.sh-login-btn:hover{border-color:var(--rose-d);box-shadow:0 18px 40px rgba(180,120,130,.28);transform:translateY(-2px)}
.sh-login-btn:active{transform:translateY(1px);box-shadow:0 6px 14px rgba(180,120,130,.22)}
.sh-login-btn:focus-visible{outline:3px solid var(--jade);outline-offset:3px}
.sh-login-copy{display:block}
.sh-login-title{display:block;font-family:'Fraunces',serif;font-size:clamp(26px,5vw,36px);font-weight:600;margin:0 0 8px;color:var(--ink);line-height:1.15}
.sh-login-sub{display:block;max-width:460px;margin:0 auto;font-size:15.5px;line-height:1.5;color:var(--ink-soft);font-weight:600}
/* Mascot on the left, a big beautiful "Go" on the right, the pair centered. */
.sh-login-mark{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.sh-login-logo{height:58px;width:auto;display:block;margin:0}
/* "Go": tall italic Fraunces in champagne gold, gradient-clipped so it reads
   as a jewel on the pale card. */
.sh-login-go{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:clamp(46px,10vw,66px);line-height:.92;letter-spacing:.01em;padding:0 6px 0 10px;background:linear-gradient(122deg,var(--gold-d) 5%,var(--gold) 55%,var(--gold-l) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;user-select:none}

/* ---------- signed-in: welcome + fireworks ---------- */
/* The welcome block ends flush with its text; the 1cm of air below it belongs
   to the ring section's own margin, so the measured gap stays exactly 1cm. */
.sh-welcome{position:relative;text-align:center;padding:36px 16px 0}
.sh-welcome-title{font-family:'Fraunces',serif;font-size:clamp(30px,6vw,46px);font-weight:600;margin:0;background:linear-gradient(120deg,var(--rose-d),var(--gold-d) 55%,var(--jade));-webkit-background-clip:text;background-clip:text;color:transparent;cursor:pointer}
.sh-welcome-sub{margin:12px auto 0;max-width:520px;font-size:16px;font-weight:600;color:var(--ink-soft)}
/* Soft gray aside (no parentheses); only the domain is picked out in gold. */
.sh-welcome-note{margin:8px auto 0;max-width:520px;font-size:13.5px;font-weight:600;line-height:1.5;color:#8E767F}
.sh-welcome-note .sh-domain{color:var(--gold-d)}

/* pure-CSS fireworks: an overlay that takes no layout space and fades away */
.sh-fw{position:absolute;left:50%;top:54%;width:0;height:0;pointer-events:none;z-index:2}
.sh-fw i{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;opacity:0}
.sh-fw.play i{animation:shSpark 1.5s cubic-bezier(.15,.7,.3,1) forwards}
.sh-fw.play::before{content:'';position:absolute;left:-72px;top:-72px;width:144px;height:144px;border-radius:50%;background:radial-gradient(circle,rgba(255,243,214,.9),rgba(255,243,214,0) 68%);animation:shFlash .7s ease-out forwards}
@keyframes shSpark{
  0%{opacity:1;transform:translate(0,0) scale(.5)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.25)}
}
@keyframes shFlash{
  0%{opacity:0;transform:scale(.4)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.3)}
}
.sh-fw i:nth-child(1){--x:-96px;--y:-38px;background:var(--rose-d);animation-delay:0s}
.sh-fw i:nth-child(2){--x:-72px;--y:-78px;background:var(--gold);animation-delay:.04s}
.sh-fw i:nth-child(3){--x:-30px;--y:-104px;background:var(--blush);animation-delay:.08s}
.sh-fw i:nth-child(4){--x:18px;--y:-112px;background:var(--rose-d);animation-delay:.02s}
.sh-fw i:nth-child(5){--x:62px;--y:-92px;background:var(--gold);animation-delay:.1s}
.sh-fw i:nth-child(6){--x:96px;--y:-52px;background:var(--celadon);animation-delay:.06s}
.sh-fw i:nth-child(7){--x:108px;--y:-8px;background:var(--rose-d);animation-delay:.12s}
.sh-fw i:nth-child(8){--x:88px;--y:36px;background:var(--gold-l);animation-delay:.05s}
.sh-fw i:nth-child(9){--x:48px;--y:74px;background:var(--blush);animation-delay:.14s}
.sh-fw i:nth-child(10){--x:-8px;--y:96px;background:var(--celadon);animation-delay:.09s}
.sh-fw i:nth-child(11){--x:-58px;--y:76px;background:var(--gold);animation-delay:.16s}
.sh-fw i:nth-child(12){--x:-96px;--y:34px;background:var(--rose-d);animation-delay:.07s}
.sh-fw i:nth-child(13){--x:-118px;--y:-14px;background:var(--gold-l);animation-delay:.13s}
.sh-fw i:nth-child(14){--x:-40px;--y:-118px;background:var(--rose-d);animation-delay:.11s}
.sh-fw i:nth-child(15){--x:34px;--y:-124px;background:var(--gold);animation-delay:.03s}
.sh-fw i:nth-child(16){--x:118px;--y:-30px;background:var(--blush);animation-delay:.15s}

/* ---------- signed-in: greeting rings ---------- */
/* Exactly 1cm of breathing room above the whole ring block: the gap from the
   welcome note's bottom edge to the ring headline's top edge. */
.sh-ring{margin-top:15px}
.sh-ring-head{text-align:center;margin-bottom:6px}
.sh-ring-head h2{font-family:'Fraunces',serif;font-size:26px;font-weight:600;margin:0;color:var(--ink)}
/* City name stands out a little larger than the rest of the headline. */
.sh-ring-head .sh-city-name{font-size:1.2em;font-weight:700}
.sh-ring-head p{font-size:14px;color:var(--ink-soft);font-weight:600;margin:6px auto 0;max-width:460px}
/* Square, centered stage: screen width minus a safe 20px on each side. */
.sh-stage{position:relative;width:min(calc(100vw - 40px),420px);aspect-ratio:1;margin:0 auto}
.sh-track{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1.5px dashed rgba(217,166,176,.6)}
.sh-track.t1{width:60%;height:60%}
.sh-track.t2{width:84%;height:84%}
.sh-track.t3{width:100%;height:100%;border-style:dotted;border-color:rgba(199,165,103,.4)}
/* Center "you": your own avatar (or initials) plus your name, dead-centre on
   the stage. The static mascot <img> in the markup is only the no-JS fallback;
   say-hello.js repaints this chip from /api/auth/me on load. */
.sh-self{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;width:auto;background:none;border:none;box-shadow:none;border-radius:0}
.sh-self img{width:44px;height:44px;border-radius:50%;object-fit:contain;display:block;background:rgba(255,255,255,.94);border:1.5px solid var(--rose-l);box-shadow:0 8px 20px rgba(180,120,130,.20)}
/* Live avatar chip: a photo when the account has one, initials when it does not. */
.sh-self-av{position:relative;flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.94);border:1.5px solid var(--rose-l);box-shadow:0 8px 20px rgba(180,120,130,.20)}
.sh-self-av img{width:100%;height:100%;object-fit:cover;display:block}
.sh-self-av.is-initials{background:linear-gradient(150deg,var(--rose),var(--rose-d));color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 8px 20px rgba(180,120,130,.20)}
.sh-self-name{font-size:10.5px;font-weight:800;color:var(--ink);line-height:1.1;text-align:center;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Empty ring: no fellow players in this city yet - a soft note under "you". */
.sh-ring-empty{position:absolute;left:50%;top:64%;transform:translate(-50%,0);width:72%;text-align:center;font-family:'Nunito',sans-serif;font-size:12.5px;font-weight:600;line-height:1.5;color:var(--ink-soft)}

/* Player chips: a round avatar with initials. Names appear only on roomy
   screens, so all 19 chips stay clear of each other and of the page edges. */
.sh-node{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;padding:0;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sh-node-av{position:relative;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;font-family:'Nunito',sans-serif;font-weight:800;font-size:11px;background:linear-gradient(150deg,var(--rose),var(--rose-d));box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 4px 10px rgba(180,120,130,.18);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;overflow:hidden}
.sh-node-av img{width:100%;height:100%;object-fit:cover;display:block}
/* Nearer players (inner ring) read a little larger than the far ones. */
.sh-node.r1 .sh-node-av{width:36px;height:36px;font-size:13px}
.sh-node.r2 .sh-node-av{width:28px;height:28px;font-size:11px}
/* Every avatar carries its owner's name underneath - no city, no state. */
.sh-node-name{display:block;font-size:10.5px;font-weight:800;color:var(--ink);line-height:1.1;text-align:center;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Desktop pointer: hover lifts the chip and tints it. */
@media(hover:hover){
  .sh-node:hover .sh-node-av{transform:translateY(-4px);filter:brightness(1.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 10px 20px rgba(180,120,130,.28)}
  .sh-node:hover .sh-node-name{color:var(--jade)}
}

/* Red dot: blinks, stronger the closer the player is (inner ring beats outer). */
.sh-dot{position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:#E2574C;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 0 2.5px rgba(226,87,76,.18)}
.sh-node.r1 .sh-dot{animation:shBlink 1.05s ease-in-out infinite}
.sh-node.r2 .sh-dot{animation:shBlinkFar 2.1s ease-in-out infinite}
@keyframes shBlink{
  0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 9px 3px rgba(226,87,76,.55)}
  50%{opacity:.45;transform:scale(.8);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 3px 1px rgba(226,87,76,.20)}
}
@keyframes shBlinkFar{0%,100%{opacity:.6}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.sh-node .sh-dot{animation:none}}

/* One shared hello box. It lives on <body> (a chip carries a transform and
   would become the containing block for position:fixed), so it is always
   dead-centre on the screen no matter which avatar you tapped. */
.sh-pop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);width:320px;max-width:88vw;padding:16px;background:#fff;border:1.5px solid var(--rose-l);border-radius:20px;box-shadow:0 22px 50px rgba(180,120,130,.30);z-index:2147482000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s}
.sh-pop.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.sh-pop-to{font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;color:var(--jade);margin:0 0 9px;text-align:left}
.sh-pop textarea,
.sh-pop input{width:100%;font-family:'Nunito',sans-serif;font-size:17px !important;font-weight:600;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;resize:none;outline:none;line-height:1.45}
.sh-pop textarea:focus{border-color:var(--celadon)}
.sh-pop-row{display:flex;align-items:center;justify-content:flex-end;margin-top:8px}
.sh-pop-send{font-family:'Nunito',sans-serif;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(170deg,var(--jade-l),var(--jade));border:none;border-radius:999px;padding:9px 20px;cursor:pointer}

/* Top, semi-transparent confirmation. */
.sh-toast{position:fixed;left:50%;top:78px;transform:translate(-50%,-12px);z-index:2147483000;max-width:88vw;padding:12px 22px;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid var(--rose-l);box-shadow:0 14px 34px rgba(180,120,130,.22);font-family:'Nunito',sans-serif;font-size:14.5px;font-weight:800;color:var(--ink);text-align:center;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease}
.sh-toast.show{opacity:1;transform:translate(-50%,0)}

/* Required-field dot after the State / City labels: a tiny hollow circle,
   red until the field holds a value, green the moment it does. Only a class
   is toggled - no layout, font or colour anywhere else is touched. */
.sh-req{display:inline-block;width:9px;height:9px;margin-left:7px;border:1px solid #E5484D;border-radius:50%;vertical-align:middle;transition:border-color .25s ease}
.sh-req.on{border-color:#34A853}
/* Centred notice when a guest taps Login before state + city are picked:
   hairline red border, no shadow, very light grey plate, darker grey text. */
.sh-req-toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2147483001;max-width:86vw;padding:14px 26px;background:#F4F4F4;border:1px solid #E5484D;border-radius:10px;font-family:'Nunito',sans-serif;font-size:14.5px;font-weight:700;color:#5F5F5F;text-align:center;opacity:0;pointer-events:none;transition:opacity .28s ease}
.sh-req-toast.show{opacity:1}

/* ---------- small screens ---------- */
@media(max-width:520px){
  .sh-wrap{padding:12px 16px 60px}
  .sh-hero{height:clamp(260px,38vh,420px)}
  .sh-hero-card{padding:20px 22px}
  .sh-picker{padding:22px 18px 24px}
  .sh-login-btn{padding:20px 16px 22px}
  .sh-node.r1 .sh-node-av{width:30px;height:30px;font-size:11.5px}
  .sh-node.r2 .sh-node-av{width:24px;height:24px;font-size:10px}
  .sh-node-name{font-size:9.5px;max-width:56px}
  .sh-self img{width:36px;height:36px}
  .sh-self-av{width:36px;height:36px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .sh-fw.play i,.sh-fw.play::before{animation-duration:.001s}
  .sh-btn{transition:none}
}

/* floating inbox button: right edge, vertically centered */
.sh-fib{position:fixed;right:16px;top:50%;transform:translateY(-50%);width:62px;height:62px;border:none;border-radius:50%;z-index:90;background:linear-gradient(170deg,var(--rose-l),var(--rose-d));color:#fff;box-shadow:0 10px 26px rgba(200,110,130,.45),inset 0 1px 0 rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s ease;-webkit-tap-highlight-color:transparent}
.sh-fib:hover{box-shadow:0 14px 30px rgba(200,110,130,.52)}
.sh-fib:active{transform:translateY(-50%) scale(.96)}
.sh-fib svg{width:27px;height:27px;display:block}
@media (max-width:360px){.sh-fib{right:12px;width:56px;height:56px}.sh-fib svg{width:24px;height:24px}}
/* the floating inbox button only makes sense for signed-in visitors */
body:not(.demo) .sh-fib{display:none}