/* Swell Otter account button and menu (auth.js). Uses the page's own colour tokens. */
#so-account{flex:none;display:flex;align-items:center}
#so-account:empty{display:none}
header.bar nav{margin-left:auto}
#so-account.so-wide{margin-left:18px}
.so-acct{display:inline-flex;align-items:center;gap:7px;border:2px solid var(--sand,#efe4cc);background:none;color:var(--cream,#f6efdf);border-radius:999px;cursor:pointer;font:800 12px var(--body,Archivo,sans-serif);text-transform:uppercase;letter-spacing:.1em;padding:6px 13px 6px 9px;line-height:1}
.so-acct svg{width:17px;height:17px;flex:none}
.so-acct:hover{background:var(--cream,#f6efdf);color:var(--navy,#1f3044)}
.so-acct[aria-expanded="true"]{background:var(--mustard,#f3b23a);border-color:var(--mustard,#f3b23a);color:var(--navy,#1f3044)}
.so-me{padding:0;width:38px;height:38px;justify-content:center;border-color:var(--mustard,#f3b23a);overflow:hidden;background:var(--teal,#1c8790)}
.so-me img{width:100%;height:100%;object-fit:cover;display:block}
.so-me b,.so-who b{font:400 18px/1 var(--display,Georgia,serif);color:var(--cream,#f6efdf);letter-spacing:0;text-transform:none}
.so-compact .so-acct.so-in{width:36px;height:36px;padding:0;justify-content:center;border-color:transparent}
.so-compact .so-acct.so-in span{display:none}
.so-compact .so-acct.so-in svg{width:21px;height:21px}
.so-compact .so-me{width:32px;height:32px;margin-inline:2px}

.so-menu{position:fixed;z-index:3000;background:var(--paper,#fbf7ee);color:var(--ink,#24303a);border:2px solid var(--navy,#1f3044);border-radius:8px;padding:16px 16px 14px;box-shadow:5px 5px 0 var(--mustard,#f3b23a),10px 10px 0 var(--rust,#d2412a);font:14px/1.45 var(--body,Archivo,sans-serif)}
.so-menu h2{margin:0 0 4px;font:400 26px/1.1 var(--display,Georgia,serif);color:var(--navy,#1f3044)}
.so-menu p{margin:0 0 12px}
.so-menu .so-hi{font:400 20px/1.15 var(--display,Georgia,serif);color:var(--rust,#d2412a);margin-bottom:10px}
.so-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:44px;border:2px solid var(--navy,#1f3044);border-radius:999px;background:#fff;color:#1f1f1f;font:700 15px var(--body,Archivo,sans-serif);cursor:pointer}
.so-google:hover{background:var(--cream,#f6efdf)}
.so-g{width:20px;height:20px}
.so-check{display:flex;gap:9px;align-items:flex-start;margin:12px 0 4px;font-size:13px;line-height:1.35;cursor:pointer}
.so-check input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--teal,#1c8790)}
.so-fine{font-size:12px;color:var(--muted,#6f7a80);margin:10px 0 0!important}
.so-msg{font:700 13px var(--narrow,sans-serif);color:var(--rust,#d2412a);margin:6px 0 0!important}
.so-msg:empty{display:none}
.so-who{display:flex;gap:11px;align-items:center;padding-bottom:12px;border-bottom:2px dashed var(--line,#e4dac4)}
.so-who img,.so-who b{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;border:2px solid var(--mustard,#f3b23a)}
.so-who b{display:grid;place-items:center;background:var(--teal,#1c8790)}
.so-who strong{display:block;color:var(--navy,#1f3044);font-weight:800}
.so-who small{display:block;color:var(--muted,#6f7a80);font:600 12px var(--narrow,sans-serif);overflow-wrap:anywhere}
.so-facts{list-style:none;margin:10px 0 0;padding:0}
.so-facts li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px}
.so-facts span{color:var(--muted,#6f7a80);font:700 12px var(--narrow,sans-serif);text-transform:uppercase;letter-spacing:.06em}
.so-facts b{color:var(--navy,#1f3044)}
.so-out{margin-top:12px;width:100%;min-height:40px;border:2px solid var(--navy,#1f3044);border-radius:999px;background:var(--navy,#1f3044);color:var(--cream,#f6efdf);font:800 12px var(--body,Archivo,sans-serif);text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
.so-out:hover{background:var(--rust,#d2412a);border-color:var(--rust,#d2412a)}

/* ---------- sign-in sheet ---------- */
html.so-locked{overflow:hidden}
.so-scrim{position:fixed;inset:0;z-index:2999;background:rgba(20,30,42,.62);animation:so-fade .18s ease-out}
.so-sheet{position:fixed;z-index:3000;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;background:var(--paper,#fbf7ee);color:var(--ink,#24303a);border:3px solid var(--navy,#1f3044);border-radius:14px;box-shadow:6px 6px 0 var(--mustard,#f3b23a),12px 12px 0 var(--orange,#ee7d24),18px 18px 0 var(--rust,#d2412a);font:15px/1.45 var(--body,Archivo,sans-serif);animation:so-pop .22s cubic-bezier(.2,.9,.3,1.2)}
@media (max-width:560px){
  .so-sheet{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:92dvh;border-radius:18px 18px 0 0;border-width:3px 0 0;box-shadow:0 -6px 0 var(--mustard,#f3b23a);padding-bottom:env(safe-area-inset-bottom,0px);animation:so-up .26s cubic-bezier(.2,.9,.3,1)}
}
@keyframes so-fade{from{opacity:0}}
@keyframes so-pop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
@keyframes so-up{from{transform:translateY(40%);opacity:.4}}
@media (prefers-reduced-motion:reduce){.so-scrim,.so-sheet{animation:none}}
.so-band{position:relative;background:var(--navy,#1f3044);color:var(--cream,#f6efdf);text-align:center;padding:26px 22px 20px}
.so-band h2{margin:10px 0 4px;font:400 clamp(28px,7vw,34px)/1.05 var(--display,Georgia,serif);color:var(--cream,#f6efdf);text-shadow:2px 2px 0 var(--rust,#d2412a)}
.so-band p{margin:0;color:var(--sand,#efe4cc);font-size:14px}
.so-band p b{color:var(--mustard,#f3b23a);overflow-wrap:anywhere}
.so-logo{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--cream,#f6efdf);border:3px solid var(--mustard,#f3b23a);box-shadow:0 0 0 3px var(--navy,#1f3044),0 0 0 5px var(--orange,#ee7d24)}
.so-x{position:absolute;top:10px;right:10px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--sand,#efe4cc);cursor:pointer}
.so-x:hover{background:rgba(255,255,255,.1)}
.so-x svg{width:18px;height:18px}
.so-stripes{display:grid}
.so-stripes i{display:block;height:5px}
.so-stripes i:nth-child(1){background:var(--mustard,#f3b23a)}
.so-stripes i:nth-child(2){background:var(--orange,#ee7d24)}
.so-stripes i:nth-child(3){background:var(--rust,#d2412a)}
.so-body{padding:18px 22px 20px}
.so-proof{list-style:none;margin:0 0 14px;padding:10px 12px;display:grid;gap:4px;background:var(--cream,#f6efdf);border:2px dashed var(--line,#e4dac4);border-radius:10px;font:600 13px var(--narrow,sans-serif);color:var(--ink,#24303a)}
.so-proof li{display:flex;gap:8px;align-items:center}
.so-proof svg{width:15px;height:15px;color:var(--mustard,#f3b23a);flex:none}
.so-proof b{color:var(--navy,#1f3044);font-weight:800}
.so-perks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.so-perks li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.35}
.so-perks svg{flex:none;width:34px;height:34px;padding:8px;border-radius:9px;background:var(--teal,#1c8790);color:var(--cream,#f6efdf)}
.so-perks li:nth-child(2) svg{background:var(--orange,#ee7d24)}
.so-perks li:nth-child(3) svg{background:var(--navy,#1f3044)}
.so-perks b{color:var(--navy,#1f3044)}
.so-or{display:flex;align-items:center;gap:10px;margin:14px 0 12px;color:var(--muted,#6f7a80);font:700 11px var(--narrow,sans-serif);text-transform:uppercase;letter-spacing:.12em}
.so-or::before,.so-or::after{content:"";flex:1;height:2px;background:var(--line,#e4dac4)}
.so-form{display:grid;gap:10px}
.so-field{display:grid;gap:5px}
.so-field>span{font:800 11px var(--body,sans-serif);text-transform:uppercase;letter-spacing:.1em;color:var(--navy,#1f3044)}
.so-field em{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted,#6f7a80)}
.so-field input{width:100%;min-height:48px;padding:10px 14px;border:2px solid var(--navy,#1f3044);border-radius:10px;background:#fff;color:var(--ink,#24303a);font:500 16px var(--body,sans-serif)}
.so-field input:focus{outline:none;box-shadow:0 0 0 3px var(--mustard,#f3b23a)}
.so-otp{text-align:center;font:800 26px/1 var(--narrow,monospace)!important;letter-spacing:.4em;padding-left:calc(14px + .4em)!important}
.so-primary,.so-ghost{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;border-radius:999px;font:800 13px var(--body,sans-serif);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;border:2px solid var(--navy,#1f3044)}
.so-primary{background:var(--navy,#1f3044);color:var(--cream,#f6efdf);box-shadow:0 4px 0 var(--mustard,#f3b23a)}
.so-primary:hover{background:var(--navy2,#2a4058)}
.so-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--mustard,#f3b23a)}
.so-primary svg{width:18px;height:18px}
.so-ghost{background:var(--paper,#fbf7ee);color:var(--navy,#1f3044)}
.so-ghost:hover{background:var(--cream,#f6efdf)}
.so-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.so-two button{font-size:12px;padding-inline:8px}
.so-sheet .so-google{min-height:50px;box-shadow:0 4px 0 var(--navy,#1f3044)}
.so-sheet .so-google:active{transform:translateY(2px);box-shadow:0 2px 0 var(--navy,#1f3044)}
.so-link{display:block;margin:12px auto 0;border:0;background:none;padding:4px;color:var(--teal,#1c8790);font:700 13px var(--body,sans-serif);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.so-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.so-row .so-link{margin:12px 0 0}
.so-sheet .so-check{margin-top:16px;padding-top:14px;border-top:2px dashed var(--line,#e4dac4)}
.so-msg.ok{color:var(--teal,#1c8790)}
.so-sheet button:disabled{opacity:.6;cursor:progress}
/* Email + password: tabs, show/hide, and the why-join list under the form */
.so-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 12px;background:var(--cream,#f6efdf);border:2px solid var(--line,#e4dac4);border-radius:999px}
.so-tabs button{min-height:38px;border:0;border-radius:999px;background:none;color:var(--muted,#6f7a80);font:800 12px var(--body,sans-serif);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.so-tabs button[aria-selected="true"]{background:var(--navy,#1f3044);color:var(--cream,#f6efdf)}
.so-tabs button:focus-visible{outline:3px solid var(--mustard,#f3b23a);outline-offset:1px}
.so-pw{position:relative;display:block}
.so-pw input{padding-right:72px}
.so-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:36px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--teal,#1c8790);font:800 11px var(--body,sans-serif);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.so-eye:hover{background:var(--cream,#f6efdf)}
.so-hint{margin:-2px 0 0;text-align:center;font:600 12px var(--narrow,sans-serif);color:var(--muted,#6f7a80)}
.so-why{margin-top:18px;padding-top:16px;border-top:2px dashed var(--line,#e4dac4)}
.so-why .so-perks{margin-bottom:0}
.so-sheet .so-why + .so-check{border-top:0;padding-top:0}
@media (max-width:560px){
  .so-band{padding:16px 18px 14px}
  .so-logo{width:44px;height:44px}
  .so-band h2{font-size:26px;margin-top:8px}
  .so-body{padding:14px 18px 18px}
  .so-perks{gap:8px;margin-bottom:14px}
  .so-perks svg{width:30px;height:30px;padding:7px}
}
.so-row:has(> :only-child){justify-content:center}
.so-sheet .so-news{margin-top:14px;padding:10px 12px;border:2px solid var(--line,#e4dac4);border-radius:10px;background:var(--cream,#f6efdf)}