/* The app behind both sites: one look, four doors. Taken from docs/design/app.html; additions for
   the real app are at the end and marked. */
:root{
  --sun:#FFB81C; --dawn:#FF6A13; --pink:#FF2E7E; --aqua:#35B9F0; --water:#0A62B8; --deep:#03163A; --mist:#EAF7FF; --foam:#F7FCFF; --copper:#B5683A;
  --paper:#F7FCFF; --card:#fff; --ink:#15131C; --soft:#6B6878; --line:rgba(21,19,28,.1);
  --accent:var(--water); --on:#fff;
  --hb-ink:var(--deep); --hb-accent:var(--water); --hb-paper:var(--foam);
  --display:'Bodoni Moda',serif; --body:'Outfit',system-ui,sans-serif;
}
/* each door has one accent; everything else is shared */
[data-door=member]{--accent:var(--water);--on:#fff}
[data-door=crew]{--accent:var(--aqua);--on:var(--deep)}
[data-door=admin]{--accent:var(--deep);--on:#fff}
[data-door=brand]{--accent:var(--copper);--on:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--mist);font-family:var(--body);color:var(--ink);font-size:16px;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;line-height:1.05;letter-spacing:-.01em}
h1 i,h2 i{font-weight:500}
.shell{max-width:440px;min-height:100vh;margin:0 auto;background:var(--paper);position:relative;padding-bottom:6.5rem;box-shadow:0 0 60px rgba(0,0,0,.12)}

/* the mark: The Water Bar drop, on its own. */
.mark{display:flex;align-items:center;gap:.5rem}
.mark img{height:34px;width:auto}
.horizon{height:6px;background:linear-gradient(90deg,var(--deep),var(--water) 50%,var(--aqua))}
.horizon + .wave{height:10px;background:radial-gradient(circle at 10px -4px,transparent 9px,var(--aqua) 10px) 0 0/20px 10px repeat-x;opacity:.9;margin-top:-1px}
header.bar{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.1rem}
/* the shared header (24 October 2026), as on both sites: the drop on the left, the person (or Back) in the middle, The
   Morning Party on the right, on its own: its registered logo has black lettering on a clear ground, so a thin cream edge
   hugs its shapes and a soft glow slowly breathes (still with less motion); the logo itself is untouched. Pages without the
   Morning Party mark keep the two-ended bar. */
header.bar:has(.mark-mp){display:grid;grid-template-columns:1fr auto 1fr}
header.bar:has(.mark-mp) .mark{grid-column:1;justify-self:start}
header.bar:has(.mark-mp) .who{grid-column:2}
.mark-mp{grid-column:3;justify-self:end;display:block;line-height:0}
.mark-mp img{display:block;height:42px;width:auto;filter:drop-shadow(0 0 .6px #FFF8E7) drop-shadow(0 0 .6px #FFF8E7) drop-shadow(0 0 1.4px #FFF8E7) drop-shadow(0 0 8px rgba(255,248,231,.35))}
@media (prefers-reduced-motion: no-preference){.mark-mp img{animation:mpHalo 7s ease-in-out infinite}}
@keyframes mpHalo{
  0%,100%{filter:drop-shadow(0 0 .6px #FFF8E7) drop-shadow(0 0 .6px #FFF8E7) drop-shadow(0 0 1.4px #FFF8E7) drop-shadow(0 0 8px rgba(255,248,231,.35))}
  50%{filter:drop-shadow(0 0 .6px #FFF8E7) drop-shadow(0 0 .6px #FFF8E7) drop-shadow(0 0 1.4px #FFF8E7) drop-shadow(0 0 18px rgba(255,248,231,.75))}}
.who{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;background:var(--accent);color:var(--on);padding:.35rem .7rem;border-radius:999px;border:0}
main{padding:.6rem 1.1rem 1rem}
.eyebrow{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--soft);margin:1.2rem 0 .5rem}
h1{font-size:2.3rem;margin:.4rem 0 1rem}
.card{background:var(--card);border-radius:22px;padding:1.1rem;margin-bottom:.8rem;border:1px solid var(--line);box-shadow:0 5px 0 rgba(21,19,28,.06)}
.btn{display:block;width:100%;border:0;border-radius:999px;padding:.95rem 1.2rem;font-weight:700;background:var(--accent);color:var(--on);box-shadow:0 5px 0 rgba(21,19,28,.16);text-align:center}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(21,19,28,.16)}
.btn.ghost{background:none;box-shadow:none;border:1.5px solid var(--ink);color:var(--ink)}
.btn.small{display:inline-block;width:auto;padding:.5rem .9rem;font-size:.85rem;box-shadow:none}
.row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.75rem 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0;padding-top:0}.row:last-child{padding-bottom:0}
.row small,.muted{color:var(--soft);font-size:.85rem;display:block}
.tag{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:.25rem .55rem;border-radius:6px;background:#F1EEE6;white-space:nowrap}
.tag.ok{background:#DDF7E6;color:#0B6B33}.tag.wait{background:#FFF0C7;color:#7A5200}.tag.no{background:#FFE1EA;color:#A3123F}
time{font-family:var(--body);font-weight:600;font-size:1.05rem;font-variant-numeric:tabular-nums;letter-spacing:.01em;min-width:3.4rem}
.notice{border-radius:18px;padding:1rem;background:var(--deep);color:#fff;margin-bottom:.8rem}
.notice b{font-family:var(--display);font-size:1.3rem;display:block;margin-bottom:.3rem}
.notice .btn{margin-top:.8rem}
/* Awaken Sleep Lab is for women: the line with every button that adds it (ui/billing.js WOMEN_ONLY_LINE) */
.women-line{font-size:.85rem;line-height:1.45;opacity:.85;margin:0 0 .7rem}

/* bottom tabs */
nav.tabs{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:2px;background:var(--ink);padding:5px;border-radius:999px;z-index:10;box-shadow:0 10px 30px rgba(0,0,0,.25)}
nav.tabs button{border:0;background:none;color:#fff;font-weight:600;font-size:.82rem;padding:.65rem .85rem;border-radius:999px}
nav.tabs button.on{background:var(--accent);color:var(--on)}
[data-door=admin] nav.tabs button.on{background:#fff;color:var(--ink)}

/* the front door */
.doors{display:grid;gap:.7rem}
.door{display:block;width:100%;text-align:left;border:0;border-radius:24px;padding:1.2rem;background:var(--c);color:var(--t,#15131C);box-shadow:0 6px 0 rgba(21,19,28,.14)}
.door b{font-family:var(--display);font-size:1.6rem;display:block}
.door span{font-size:.9rem;opacity:.9}
.door.main{padding:1.6rem 1.2rem}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.trio .door{padding:1rem .8rem;border-radius:18px}.trio .door b{font-size:1.1rem}.trio .door span{font-size:.75rem}
.g{display:inline-flex;align-items:center;gap:.6rem;background:#fff;color:#15131C;border-radius:999px;padding:.7rem 1.1rem;font-weight:600;margin-top:1rem;font-size:.95rem}
.g::before{content:"G";font-family:var(--body);font-weight:700;color:#4285F4}

/* plans */
.plan{border-radius:22px;padding:1.2rem;margin-bottom:.8rem}
.plan.a{background:var(--water);color:#fff}.plan.b{background:var(--deep);color:#fff}
.plan .by{margin:-.2rem 0 .5rem;font-size:.85rem;opacity:.85}
.plan .price{font-family:var(--display);font-size:3rem;font-weight:700;line-height:1}
.plan ul{margin:.6rem 0 1rem;padding-left:1.1rem;font-size:.92rem}
.plan.b .btn{background:var(--aqua);color:var(--deep)}.plan.a .btn{background:#fff;color:var(--deep)}
/* the small line under a Start button: what renews and how to stop it */
.plan .renews{margin:.7rem 0 0;font-size:.8rem;line-height:1.4;opacity:.85;text-align:center}
.plan .btn:disabled{opacity:.7}

/* the hero offer (screens/offer.js), in the lettering of the Way of Water film, the same as the Morning Party page's hero:
   a full-screen picture with the words over its lower part and the top left clear. Until the video is delivered the
   picture is a night sea with a low sun; the gradient at the foot keeps the words legible. While it shows, the app's bar
   floats over it, and the "Ask how this works" corner button steps aside. */
.hero{--hero-gold:#E6C27A;--hero-ink:#0B1030;--hero-cream:#FFF8E7;position:relative;margin:-.6rem -1.1rem -1rem;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:var(--hero-cream);text-align:center;
  background:radial-gradient(circle at 70% 30%,rgba(255,226,170,.85) 0,rgba(230,194,122,.35) 7%,rgba(230,194,122,0) 20%),linear-gradient(180deg,#2b3a6b 0%,#1a2550 34%,#0f1a40 56%,var(--hero-ink) 100%)}
.hero-media{position:absolute;inset:0}
.hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,16,48,.5) 0%,rgba(11,16,48,.12) 14%,rgba(11,16,48,0) 26%,rgba(11,16,48,.55) 42%,rgba(11,16,48,.86) 60%,rgba(11,16,48,.97) 100%);pointer-events:none}
.hero-body{position:relative;z-index:1;padding:6rem 1.5rem 2rem}
[data-door=member] .hero-body{padding-bottom:6.2rem}
.hero-presents,.hero-series,.hero-kicker,.hero-included,.hero-renews{margin:0;font-family:var(--body);font-size:.66rem;line-height:1.6;font-weight:500;letter-spacing:.24em;text-transform:uppercase}
/* "The Water Bar presents" sits centred just above "Way of Water", which is a touch larger and bolder */
.hero-presents{opacity:.9}
.hero-series{margin-top:.3rem;color:var(--hero-gold);font-size:.76rem;font-weight:600;letter-spacing:.26em}
.hero-title,.hero-included{text-shadow:0 1px 12px rgba(11,16,48,.55)}
.hero-title{margin:.3rem 0 0;font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:0}
.hero-title em{display:block;font-style:italic;font-weight:400;font-size:2.4rem}
.hero-title span{display:block;margin-top:.1rem;font-size:2.7rem;letter-spacing:.16em;text-transform:uppercase}
/* what the membership includes, plainly, under a thin line, as on the Morning Party page (the owner, 26 October 2026); the words sit
   in the middle of the screen rather than at its foot */
.hero-inc-k{margin:.8rem auto 0;padding-top:.75rem;max-width:22rem;border-top:1px solid rgba(255,248,231,.32);font-family:var(--body);font-size:.62rem;line-height:1.6;font-weight:500;letter-spacing:.28em;text-transform:uppercase;opacity:.85}
/* the dawn, as on the Morning Party page: the words arrive with the film, all on screen within about two and a half seconds */
@media (prefers-reduced-motion:no-preference){
  .hero :is(.hero-presents,.hero-series,.hero-inc-k,.hero-kicker,.hero-join,.hero-sub,.hero-included,.women-line,.btn,.hero-tick,.hero-renews,.hero-link){animation:hero-dawn .9s cubic-bezier(.2,.7,.2,1) both}
  .hero .hero-title{animation:hero-rise 1.1s cubic-bezier(.2,.7,.2,1) .6s both}
  .hero :is(.hero-presents,.hero-series){animation-delay:.3s}
  .hero :is(.hero-inc-k,.hero-included){animation-delay:1s}
  .hero :is(.hero-kicker,.hero-join,.hero-sub){animation-delay:1.3s}
  .hero :is(.women-line,.btn,.hero-tick,.hero-renews,.hero-link){animation-delay:1.6s}
}
@keyframes hero-dawn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hero-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-kicker{margin-top:.7rem}
.hero-join{margin:.25rem 0 0;font-family:var(--display);font-size:1.3rem;line-height:1.25}
.hero-sub{margin:.4rem auto 0;max-width:22rem;font-size:.85rem;line-height:1.45;opacity:.9}
.hero-included{margin-top:.35rem;color:var(--hero-gold);font-size:.72rem;font-weight:600;letter-spacing:.12em}
.hero .women-line{margin:.7rem auto 0;max-width:22rem;font-size:.8rem;line-height:1.45;opacity:.9}
/* the button a little brighter than the gold of the words, with a soft glow, as on the Morning Party page */
.hero .btn{max-width:22rem;margin:.9rem auto 0;border-radius:2px;background:#F4D58E;color:var(--hero-ink);box-shadow:0 0 0 1px rgba(255,240,200,.55),0 10px 30px rgba(244,213,142,.35);
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.hero .btn:active{transform:none;box-shadow:none;background:var(--hero-cream)}
.hero .btn:disabled{opacity:.7}
.hero-renews{margin-top:.45rem;font-size:.58rem;letter-spacing:.14em;opacity:.85}
.hero-tick{display:flex;align-items:flex-start;justify-content:center;gap:.55rem;max-width:22rem;margin:.45rem auto 0;font-size:.78rem;line-height:1.35;font-weight:400;letter-spacing:normal;text-transform:none;text-align:left;color:var(--hero-cream);cursor:pointer}
.hero-tick input{width:1.05rem;height:1.05rem;margin:.1rem 0 0;padding:0;flex:none;accent-color:var(--hero-gold)}
.hero-link{margin:.9rem 0 0;font-size:.8rem}
.hero-link a{color:var(--hero-cream);text-decoration:underline;text-underline-offset:3px;opacity:.85}
/* while the app starts (nothing drawn yet): the navy door from the first moment, never the old pale page with the wave; a phone
   that has been a member's (index.html marks it you-member) gets the member app's ivory instead */
.shell:has(> #view:empty){background:#0B1030}
.shell:has(> #view:empty) > :is(.horizon,.wave){display:none}
html.you-member .shell:has(> #view:empty){background:#F8F4EC}
/* the sign-in step after the hero, and the ordinary door that "Log in" opens: the same night, gold and Bodoni, so they read as pages of one thing */
.shell:has(:is([data-step=signin_step],[data-step=front_door])){background:#0B1030;color:#FFF8E7}
.shell:has(:is([data-step=signin_step],[data-step=front_door])) > .horizon,.shell:has(:is([data-step=signin_step],[data-step=front_door])) > .wave{display:none}
:is([data-step=signin_step],[data-step=front_door]) h1{font-weight:400;color:#FFF8E7}
:is([data-step=signin_step],[data-step=front_door]) .door.main{--c:#141B46 !important;border:1px solid rgba(230,194,122,.45);box-shadow:none;border-radius:4px}
:is([data-step=signin_step],[data-step=front_door]) .door.main b{font-weight:400}
:is([data-step=signin_step],[data-step=front_door]) .door.main .g{background:#E6C27A;color:#0B1030;border-radius:2px;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;font-weight:600}
:is([data-step=signin_step],[data-step=front_door]) .card{background:rgba(255,248,231,.06);border:1px solid rgba(255,248,231,.16);box-shadow:none;border-radius:4px;color:#FFF8E7}
:is([data-step=signin_step],[data-step=front_door]) .card label,:is([data-step=signin_step],[data-step=front_door]) .card .muted{color:rgba(255,248,231,.7)}
:is([data-step=signin_step],[data-step=front_door]) .card .btn.ghost{border-color:rgba(255,248,231,.7);color:#FFF8E7;border-radius:2px;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem}
:is([data-step=signin_step],[data-step=front_door]) .more a,:is([data-step=signin_step],[data-step=front_door]) .legal-links a{color:rgba(255,248,231,.7)}
/* the ordinary door keeps its staff doors, small and quiet, and a gold way back to the front page for anyone new */
:is([data-step=signin_step],[data-step=front_door]) .doors > .muted{color:rgba(255,248,231,.6)}
[data-step=front_door] .eyebrow{margin-top:1.6rem;color:#E6C27A;letter-spacing:.24em;font-weight:500}
[data-step=front_door] .trio .door{--c:rgba(255,248,231,.06) !important;--t:#FFF8E7 !important;border:1px solid rgba(255,248,231,.16);box-shadow:none;border-radius:4px;padding:.75rem .7rem}
[data-step=front_door] .trio .door b{font-weight:400;font-size:1rem}
[data-step=front_door] .new-here a{color:#E6C27A;text-decoration:underline;text-underline-offset:3px}
.shell:has([data-hero]) > .horizon,.shell:has([data-hero]) > .wave{display:none}
.shell:has([data-hero]) > header.bar{position:absolute;inset:0 0 auto 0;z-index:3}
body:has([data-hero]) .hb-corner{display:none}

/* pass */
.pass{border-radius:26px;padding:1.4rem;text-align:center;background:linear-gradient(180deg,var(--water) 0 58%,var(--aqua) 58% 100%);color:#fff;position:relative;overflow:hidden}
.pass::after{content:"";position:absolute;left:0;right:0;top:58%;height:12px;margin-top:-6px;background:radial-gradient(circle at 12px 12px,var(--water) 11px,transparent 12px) 0 0/24px 12px repeat-x}
.pass h3{font-size:1.7rem}
.qr{width:150px;height:150px;margin:1.6rem auto .6rem;border-radius:14px;background:#fff;display:grid;place-items:center;position:relative;z-index:1}
.qr i{width:118px;height:118px;background:
  linear-gradient(90deg,var(--ink) 50%,transparent 0) 0 0/18px 18px,
  linear-gradient(var(--ink) 50%,transparent 0) 0 0/18px 18px;background-blend-mode:difference;opacity:.9}
.qr.locked i{filter:blur(7px);opacity:.25}
.qr.locked::after{content:"Not ready";position:absolute;font-weight:700;font-size:.85rem;background:var(--ink);color:#fff;padding:.3rem .6rem;border-radius:999px}
.pass p{position:relative;z-index:1;margin:.2rem 0 0;font-weight:600;color:var(--deep)}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal span{aspect-ratio:1/1;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:.85rem;font-weight:600;position:relative}
.cal .h{background:none;border:0;font-size:.65rem;color:var(--soft);aspect-ratio:auto}
.cal .we{background:var(--deep);color:#fff}.cal .me::after{content:"";position:absolute;bottom:5px;width:6px;height:6px;border-radius:50%;background:var(--aqua)}

/* crew */
.big{font-size:1.1rem;padding:1.3rem}
.drinks{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.drink{border:1px solid var(--line);background:#fff;border-radius:18px;padding:1rem .8rem;text-align:left;box-shadow:0 4px 0 rgba(21,19,28,.06)}
.drink b{display:block;font-family:var(--display);font-size:1.15rem}
.drink small{color:var(--soft)}
.drink.off{opacity:.35;pointer-events:none}
.tally{position:sticky;bottom:5.2rem;background:var(--deep);color:#fff;border-radius:18px;padding:.9rem 1rem;display:flex;justify-content:space-between;align-items:center;margin-top:.8rem}
.switch{width:46px;height:28px;border-radius:999px;border:0;background:#D8D4C8;position:relative;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on{background:#19A65B}.switch.on::after{left:21px}
input,textarea,select{font:inherit;width:100%;padding:.8rem;border-radius:14px;border:1px solid rgba(21,19,28,.25);background:#fff;margin:.3rem 0 .8rem}
label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--soft)}
.terms{background:#fff;border:1px dashed var(--copper);border-radius:16px;padding:1rem;font-size:.9rem;margin-bottom:.8rem}
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.8rem}
.moments button{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:.8rem .3rem;font-weight:600;font-size:.85rem}
.moments button.on{border-color:var(--copper);background:var(--copper);color:#fff}
.check{display:flex;gap:.6rem;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--ink);font-weight:400;margin-bottom:.9rem}
.check input{width:auto;margin:.2rem 0 0}
/* The health tick inside the basket bar, while a functional shot is in the basket (26 October 2026): its own row under the total and Pay. */
.tally.tick{flex-wrap:wrap;gap:.6rem}
.tally.tick .check{flex:1 0 100%;margin:0;font-size:.8rem;line-height:1.4;color:#fff}
[hidden]{display:none!important}

/* ---- additions for the real app ---- */
a{color:inherit}
.card > b + small{display:block;color:var(--soft);font-size:.85rem;margin-bottom:.4rem}
a.btn,a.door{text-decoration:none}
.mark a{display:flex}
/* a strip of days above Today's list, in the same pill language as the moments */
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:-.4rem 0 .8rem}
.days button{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:.45rem 0;font-weight:600;font-size:.72rem;line-height:1.2}
.days button b{display:block;font-family:var(--display);font-size:1.05rem}
.days button.we{background:var(--deep);color:#fff;border-color:var(--deep)}
.days button.on{border-color:var(--ink);box-shadow:0 3px 0 rgba(21,19,28,.25)}
.days button.on:not(.we){background:var(--aqua);color:var(--deep)}
.monthbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.monthbar h1{margin-bottom:1rem}
.arrows{display:flex;gap:.4rem}
.arrows button{border:1.5px solid var(--ink);background:none;border-radius:999px;width:2.4rem;height:2.4rem;font-weight:700}
.arrows button:disabled{opacity:.25;cursor:default}
.cal span[data-day]{cursor:pointer}
.cal .past{opacity:.45}
.cal .nov{opacity:.6;border-style:dashed}
.qr svg{width:126px;height:126px;display:block}
.pass .since{display:block;font-size:.85rem;margin-top:.15rem}
.toast{position:fixed;left:50%;bottom:5.4rem;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:999px;font-size:.88rem;z-index:30;max-width:90vw;text-align:center}
.verdict{border-radius:22px;padding:1.1rem;margin-bottom:.8rem;color:var(--ink)}
.verdict.green{background:#DDF7E6}.verdict.amber{background:#FFF0C7}
.verdict h3{font-size:1.6rem}
.chip{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:var(--aqua);color:var(--deep);border-radius:999px;padding:.5rem .6rem .5rem 1rem;font-weight:600;margin-bottom:.8rem}
.chip button{border:0;background:#fff;border-radius:999px;padding:.3rem .7rem;font-size:.8rem}
.rowbtn{display:flex;width:100%;text-align:left;background:none;border:0;padding:.75rem 0;border-top:1px solid var(--line);align-items:center;justify-content:space-between;gap:.8rem}
.rowbtn:first-child{border-top:0;padding-top:0}
.scan video{width:100%;border-radius:18px;background:#000;margin-bottom:.6rem}
details.agreed{font-size:.85rem;color:var(--soft);margin-top:.3rem}
.out{text-align:center;margin-top:1.2rem}

/* One-line subtitle under a screen heading, and the compact notice shown on tabs after the first. */
.sub{color:var(--soft);font-size:.95rem;margin:-.6rem 0 1rem}
.notice.compact{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 1rem}
.notice.compact span{flex:1}
.notice.compact .btn{margin-top:0;flex:none;width:auto;padding:.55rem 1rem;font-size:.85rem}

/* Members tab (admin): the four counts are tappable filters, in the same pill language as the day strip.
   Five admin tabs are a little tighter on a narrow phone. */
.counts{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin:0 0 .9rem}
.counts button{border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:.6rem .5rem;font-weight:600;font-size:.78rem;line-height:1.25;text-align:left;display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.counts button b{font-family:var(--display);font-size:1.4rem}
.counts button.on{border-color:var(--deep);background:var(--aqua);color:var(--deep);box-shadow:0 3px 0 rgba(21,19,28,.25)}
/* Five tabs, for members (Book, Calendar, Drinks, Pass, Account) and admins alike, fit a narrow phone. */
@media (max-width:420px){nav.tabs button{padding:.65rem .62rem}}

/* Reaching any day of the season: a week at a time, the next Sunday, or a date typed or picked. */
.jump{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 .6rem}
.jump .btn{flex:1 1 auto}
.jump-date{display:block;margin:0 0 .8rem}
.jump-date input{margin:.2rem 0 0}
.btn:disabled{opacity:.35;cursor:default}

/* The quiet "Terms · Privacy · Cookies" line, and the plain legal pages (/terms/, /privacy/, /cookies/). */
a.who{text-decoration:none}
.legal-links{text-align:center;margin:1.2rem 0 0}
.legal h1{margin-bottom:.4rem}
.legal .notice{margin-top:.8rem}
.legal p,.legal ul{margin:.5rem 0}
.legal ul{padding-left:1.2rem}
.legal li{margin:.25rem 0}
.legal .card > :first-child{margin-top:0}
.legal .card > :last-child{margin-bottom:0}
.legal .tbc{background:#FFF0C7;border-radius:4px;padding:0 .2rem}
/* The legal pages in The Morning Party's look (owner, 25 October 2026): people reach them from its checkout. Night navy, cream and
   the hero's gold, as on the Way of Water hero (public/the-morning-party/style.css #hero.ww). */
body[data-page=legal]{background:#0B1030}
.shell.legal{background:#FFF8E7;color:#15131C}
.shell.legal .horizon{background:linear-gradient(90deg,#0B1030,#E6C27A 50%,#0B1030)}
.shell.legal .horizon + .wave{display:none}
.shell.legal a.who{background:#0B1030;color:#FFF8E7}
.shell.legal .eyebrow{color:#0B1030;opacity:.72}
.shell.legal .card{background:#fff;border:1px solid rgba(11,16,48,.08);box-shadow:0 2px 14px rgba(11,16,48,.06)}
.shell.legal main a:not(.btn){color:#0B1030;text-decoration-color:#E6C27A;text-decoration-thickness:2px;text-underline-offset:2px}
/* the featured drink: highlighted in the Water Bar blue (Admin > Menu row, Drinks tab card) */
.pick{background:var(--mist);border:2px solid var(--water)}
.row.pick{border-radius:14px;padding:.75rem;margin:.3rem 0}
.pick-tag{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .6rem}
.pick-tag .tag{background:var(--water);color:#fff}
.pick-tag small{margin:0;color:var(--soft);font-size:.85rem}
.btn.ghost.on{background:var(--water);border-color:var(--water);color:#fff}
/* The join screen ($1 card on its own) and the welcome after paying. */
.more{text-align:center;margin:.2rem 0 1rem;font-size:.9rem}
.more a{color:var(--soft);text-decoration:underline;text-underline-offset:3px}
.plan.welcome{padding:1.5rem 1.2rem}
.plan.welcome h2{font-size:1.9rem;line-height:1.1}

/* ==== Paying first (lib/join.js), appended on its own: the return from Stripe, the card for another address, the moment before Stripe, and
   the page the email's link opens (lib/join-pages.js). The Way of Water night and gold, so the journey reads as one thing. ==== */
.shell:has(:is([data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])){background:#0B1030;color:#FFF8E7}
/* and the page around it, on a wider screen, so the navy screen does not sit on the pale blue */
body:has(.shell :is([data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])){background:#0B1030}
.shell:has(:is([data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) > .horizon,.shell:has(:is([data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) > .wave{display:none}
:is([data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim]){padding-top:1.2rem;text-align:center}
:is([data-step=pf_return],[data-step=pf_other],[data-step=pf_go]) .plan.welcome{background:none;border:0;box-shadow:none;padding:1.5rem .4rem .8rem;color:#FFF8E7}
:is([data-step=pf_return],[data-step=pf_other],[data-step=pf_go]) .plan.welcome::before{content:"Way of Water Yacht Series";display:block;margin:0 0 .9rem;font:500 .66rem/1.6 var(--body);letter-spacing:.24em;text-transform:uppercase;color:#E6C27A}
:is([data-step=pf_return],[data-step=pf_other],[data-step=pf_go]) .plan.welcome h2,[data-step=claim] h1{font-weight:400;font-size:2rem;line-height:1.15;color:#FFF8E7}
.pf-mask{white-space:nowrap}
.pf-line{max-width:22rem;margin:0 auto 1rem;font-size:.95rem;line-height:1.45;color:rgba(255,248,231,.85)}
:is([data-step=pf_return],[data-step=pf_other]) .btn,[data-step=claim] .btn{display:block;max-width:22rem;margin:.6rem auto 0;border-radius:2px;background:#E6C27A;color:#0B1030;box-shadow:none;font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
:is([data-step=pf_return],[data-step=pf_other]) .btn.ghost{background:none;border:1px solid rgba(255,248,231,.6);color:#FFF8E7}
/* The six digits on the code screen back from Stripe (25 October 2026): a cream box for the code, the gold button under it, and the
   quiet "Send it again" and "Or continue with Google" lines */
[data-step=pf_return] .pf-code{max-width:22rem;margin:.2rem auto 0;display:grid;gap:.1rem}
[data-step=pf_return] .pf-code label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[data-step=pf_return] .pf-code input{box-sizing:border-box;width:100%;margin:0;padding:.7rem;border-radius:2px;border:1px solid rgba(230,194,122,.6);background:#FFF8E7;color:#0B1030;font-size:1.6rem;letter-spacing:.3em;text-align:center}
[data-step=pf_return] .pf-say{margin-top:.8rem;color:#E6C27A}
.pf-small{margin:.9rem auto 0;max-width:22rem;font-size:.85rem}
.pf-small a{color:rgba(255,248,231,.85);text-underline-offset:3px}
/* Just paid, not yet signed in: one button and nothing else (the owner, 25 October 2026), so no "Ask how this works" corner */
body:has(.shell :is([data-step=pf_return],[data-step=pf_other],[data-step=pf_go])) .hb-btn.hb-corner{display:none}
/* The Log in page ("Come in") and the sign-in step: only signing in, nothing else on them (the owner, 25 October 2026) */
body:has(.shell :is([data-step=front_door],[data-step=signin_step])) :is(.hb-btn.hb-corner,.hb-panel){display:none}
/* The claim pages are drawn in the legal pages' shell (lib/announce-pages.js), so these carry .shell to outrank .shell.legal's white
   card and navy links above (which left cream words on white, and navy links on the night) */
.shell [data-step=claim] .card{max-width:24rem;margin:1rem auto;background:rgba(255,248,231,.06);border:1px solid rgba(255,248,231,.16);box-shadow:none;border-radius:4px;color:#FFF8E7}
[data-step=claim] .card form{margin:0}
.shell:has([data-step=claim]) main a:not(.btn){color:rgba(255,248,231,.7)}

/* ==== The Way of Water makeover of the member app (24 October 2026): a skin only. ====
   Ivory paper, hairline cards, the Bodoni headings at a lighter weight, slim buttons in spaced capitals, night as the main
   colour and gold for what is chosen. Nothing any screen says or does changes. It applies to the member door only, and not
   to the night-and-gold moments (the offer and the pay-first screens), which keep their own rules above; the admin, crew and brands
   doors keep their look. A phone that cannot read :has() keeps the old look. To undo all of it, delete this block. */
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])){--paper:#F8F4EC;--card:#FFFDF8;--line:rgba(21,19,28,.11);--soft:#6E675E;--accent:#0B1030;--on:#FFF8E7;--mist:#F3EEE4}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) > .horizon,.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) > .wave{display:none}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) :is(h1,h2,h3){font-weight:500}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .eyebrow{color:#A8843F;letter-spacing:.24em;font-weight:500}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .card{border-radius:6px;box-shadow:none}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .btn{border-radius:2px;box-shadow:none;font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .btn:active{transform:none;box-shadow:none;opacity:.85}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .btn.small{font-size:.64rem;letter-spacing:.12em}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .btn.ghost{border:1px solid rgba(21,19,28,.5)}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .btn.ghost.on{background:#0B1030;border-color:#0B1030;color:#FFF8E7}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .days button{border-radius:4px;border:1px solid var(--line);background:var(--card);font-weight:500}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .days button.we{background:#0B1030;border-color:#0B1030;color:#FFF8E7}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .days button.on{box-shadow:0 0 0 1.5px #D9B465}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .days button.on:not(.we){background:#FFF8E7;color:#0B1030}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) :is(input,select,textarea){border-radius:4px;border-color:rgba(21,19,28,.18);background:var(--card)}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .notice{border-radius:6px;background:#0B1030}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .notice b{font-weight:500}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .plan{border-radius:6px}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .plan.a{background:#0B1030}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .plan.b{background:#141B46}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .plan .price{font-weight:500}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) :is(.plan.a,.plan.b) .btn{background:#E6C27A;color:#0B1030}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .tag{border-radius:2px}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .drink{border-radius:6px;box-shadow:none}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .cal span{border-radius:4px}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .cal .we{background:#0B1030}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .cal .me::after{background:#D9B465}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .arrows button{border:1px solid rgba(21,19,28,.5)}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .pick{background:#FFF8E7;border:1px solid #D9B465}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .pick-tag .tag{background:#0B1030}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .chip{border-radius:4px;background:#FFF8E7;color:#0B1030;border:1px solid #D9B465}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .tally{border-radius:6px;background:#0B1030}
.shell[data-door=member]:not(:has([data-hero],[data-step=pf_return],[data-step=pf_other],[data-step=pf_go],[data-step=claim])) .door{border-radius:6px;box-shadow:none}
/* the bar and the tabs belong to the whole member door, the night-and-gold moments included */
.shell[data-door=member] .who{background:#0B1030;color:#FFF8E7;border-radius:2px;letter-spacing:.2em;font-weight:500}
/* the member tabs (24 October 2026): the same frosted night glass as the bar on the Morning Party page. Book stays a word,
   the other four are line icons; the open tab is lit in gold. On a phone the bar runs edge to edge on the very bottom; on a
   wider screen it floats under the column. */
.shell[data-door=member] nav.tabs{display:grid;grid-template-columns:1.35fr repeat(4,1fr);align-items:center;gap:2px;width:min(26rem,calc(100% - 28px));padding:6px;
  background:linear-gradient(180deg,rgba(255,248,231,.14),rgba(255,248,231,.04)),rgba(11,16,48,.78);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,248,231,.26);border-radius:22px;box-shadow:0 14px 34px rgba(4,7,24,.35),inset 0 1px 0 rgba(255,255,255,.2)}
.shell[data-door=member] nav.tabs button{display:grid;place-items:center;height:48px;padding:0;border-radius:14px;color:rgba(255,248,231,.66);font-weight:500;font-size:.9rem;letter-spacing:.08em;position:relative}
.shell[data-door=member] nav.tabs .tab-icon,.shell[data-door=member] nav.tabs .tab-icon svg{display:block;width:24px;height:24px}
.shell[data-door=member] nav.tabs svg{fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.shell[data-door=member] nav.tabs button.on{color:#F1D79B;background:linear-gradient(180deg,rgba(230,194,122,.22),rgba(230,194,122,.07));box-shadow:inset 0 0 0 1px rgba(230,194,122,.42),0 0 20px rgba(230,194,122,.16)}
.shell[data-door=member] nav.tabs button.on::after{content:"";position:absolute;left:30%;right:30%;bottom:6px;height:2px;border-radius:2px;background:#E6C27A;box-shadow:0 0 8px rgba(230,194,122,.9)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.shell[data-door=member] nav.tabs{background:rgba(11,16,48,.95)}}
@media (max-width:599px){
  .shell[data-door=member] nav.tabs{left:0;right:0;bottom:0;width:auto;transform:none;padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));border:0;border-top:1px solid rgba(255,248,231,.24);border-radius:0;
    box-shadow:0 -10px 30px rgba(4,7,24,.2),inset 0 1px 0 rgba(255,255,255,.12)}
}
.shell[data-door=member] ~ .toast,.shell[data-door=member] .toast{border-radius:4px;background:#0B1030}