/* Design tokens: see tokens.css (linked before this file). */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{font-family:'Jost',sans-serif;background:var(--warm);color:var(--charcoal)}
/* shell layout (portal/app.html): header / scrolling content / bottom tab bar */
body.portal-shell{display:flex;flex-direction:column}
.screen{display:none;height:100vh;flex-direction:column;overflow:hidden}
.screen.active{display:flex}
/* HAMBURGER DRAWER */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:300;display:none;opacity:0;transition:opacity 0.3s}
.drawer-overlay.open{display:block;opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;width:75%;max-width:280px;background:var(--navy);z-index:400;transform:translateX(100%);transition:transform 0.3s ease;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
.drawer.open{transform:translateX(0)}
.drawer-header{padding:20px 20px 16px;border-bottom:1px solid rgba(191,164,101,0.1);display:flex;align-items:center;justify-content:space-between}
.drawer-logo{font-family:Jost,sans-serif;font-size:16px;font-weight:600;letter-spacing:0.14em;color:var(--gold)}
.drawer-mark{height:26px;width:auto;display:block}
.drawer-close{background:none;border:none;color:rgba(248,244,238,0.4);font-size:24px;cursor:pointer;line-height:1;padding:0}
.drawer-user{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.06)}
.drawer-user-name{font-size:14px;font-weight:500;color:var(--cream);font-family:Jost,sans-serif}
.drawer-user-plan{font-size:11px;color:rgba(248,244,238,0.4);margin-top:2px;font-family:Jost,sans-serif}
.drawer-nav{flex:1;overflow-y:auto;padding:12px 0}
.drawer-item{display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;transition:all 0.2s;font-family:Jost,sans-serif;font-size:14px;color:rgba(248,244,238,0.6);background:none;border:none;width:100%;text-align:left}
.drawer-item:hover,.drawer-item.active{background:rgba(191,164,101,0.08);color:var(--cream)}
.drawer-item.active{border-right:3px solid var(--gold);color:var(--gold)}
.drawer-item-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.drawer-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,0.06)}
.drawer-signout{font-size:12px;color:rgba(248,244,238,0.3);cursor:pointer;font-family:Jost,sans-serif;background:none;border:none}
.content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.panel{display:none;padding:20px 16px 32px}
.panel.active{display:block;animation:fi 0.25s ease}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.panel-title{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:300;letter-spacing:0.05em;color:var(--teal);margin-bottom:4px}
.panel-sub{font-size:13px;color:var(--mid);margin-bottom:20px;line-height:1.6}
.card{background:white;border:1.5px solid var(--bs);border-radius:14px;padding:18px;margin-bottom:14px}
.card-title{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:300;color:var(--teal);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--bs)}
.wallet-item{margin-bottom:14px}
.wi-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--mid);margin-bottom:6px;display:flex;justify-content:space-between}
.wi-count{font-weight:500;color:var(--teal)}
.wi-bar-bg{height:8px;background:rgba(26,60,64,0.08);border-radius:8px;overflow:hidden}
.wi-bar-fill{height:100%;border-radius:8px;transition:width 0.5s}
.wi-bar-fill.ok{background:var(--teal)}
.wi-bar-fill.low{background:var(--amber)}
.wi-bar-fill.empty{background:var(--red)}
.wi-note{font-size:11px;color:var(--red);margin-top:4px}
.svc-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px}
.svc-card{background:white;border:1.5px solid var(--bs);border-radius:12px;padding:14px 12px;cursor:pointer;transition:all 0.2s;position:relative}
.svc-card:active{transform:scale(0.98)}
.svc-card.selected{background:var(--teal);border-color:var(--teal)}
.svc-card.selected .svc-name{color:var(--gold-light)}
.svc-card.selected .svc-dur{color:rgba(248,244,238,0.45)}
.svc-card.selected .svc-price{color:var(--gold)}
.svc-card.locked,.svc-card.depleted{opacity:0.4;cursor:not-allowed}
.svc-card.included::after{content:'Incl.';position:absolute;top:8px;right:8px;font-size:9px;padding:2px 6px;background:var(--gold-pale);border:1px solid var(--border);border-radius:6px;color:var(--teal);letter-spacing:0.06em}
.svc-card.selected::after{display:none}
.svc-check{position:absolute;top:8px;right:8px;width:18px;height:18px;background:var(--gold);border-radius:50%;display:none;align-items:center;justify-content:center;font-size:10px;color:var(--teal);font-weight:700;line-height:18px;text-align:center}
.svc-card.selected .svc-check{display:flex}
.svc-name{font-size:13px;font-weight:500;color:var(--charcoal);margin-bottom:3px;line-height:1.3}
.svc-dur{font-size:11px;color:var(--mid)}
.svc-price{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--teal);margin-top:8px}
.svc-lock-msg{font-size:10px;color:var(--red);margin-top:4px}
.filter-row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:16px;padding-bottom:4px}
.filter-row::-webkit-scrollbar{display:none}
.fchip{flex-shrink:0;padding:7px 16px;border:1.5px solid var(--bs);border-radius:20px;font-size:12px;color:var(--mid);cursor:pointer;white-space:nowrap;transition:all 0.2s;background:transparent;font-family:'Jost',sans-serif}
.fchip.active{background:var(--teal);color:var(--gold);border-color:var(--teal)}
.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.time-btn{padding:13px 6px;border:1.5px solid var(--bs);border-radius:10px;background:white;font-family:'Jost',sans-serif;font-size:13px;color:var(--charcoal);cursor:pointer;text-align:center;transition:all 0.2s}
.time-btn.blocked{opacity:0.35;cursor:not-allowed;text-decoration:line-through;font-size:11px}
.time-btn.blocked:active{transform:none}
.time-btn.selected{background:var(--teal);border-color:var(--teal);color:var(--gold);font-weight:500}
.btn-p{width:100%;padding:16px;background:var(--teal);border:none;border-radius:12px;font-family:'Jost',sans-serif;font-size:14px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);cursor:pointer;transition:all 0.2s;margin-top:8px}
.btn-p:active{background:var(--teal-mid);transform:scale(0.98)}
.btn-p:disabled{opacity:0.4;cursor:not-allowed}
.btn-s{width:100%;padding:14px;background:transparent;border:1.5px solid var(--bs);border-radius:12px;font-family:'Jost',sans-serif;font-size:13px;color:var(--mid);cursor:pointer;margin-top:8px}
/* KEEP: .plan-card / .co-* checkout CSS — Phase 3 Square revives this (spec §A0.3/§D) */
.plan-card{background:white;border:2px solid var(--bs);border-radius:14px;padding:20px;margin-bottom:12px;cursor:pointer;transition:all 0.2s;position:relative}
.plan-card:active{transform:scale(0.98)}
.plan-card.featured{border-color:var(--gold)}
.plan-card.inquiry-card{border-color:rgba(191,164,101,0.3);background:rgba(191,164,101,0.02)}
.plan-badge{position:absolute;top:-10px;right:16px;background:var(--gold);color:var(--teal);font-size:10px;font-weight:600;padding:3px 12px;border-radius:10px;letter-spacing:0.08em}
.plan-name{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--teal);margin-bottom:4px}
.plan-desc{font-size:12px;color:var(--mid);line-height:1.6;margin-bottom:12px}
.plan-price{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--teal)}
.plan-period{font-size:12px;color:var(--mid);margin-left:4px}
.plan-section-title{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mid);margin:20px 0 10px}
.co-card{background:var(--teal-deep);border-radius:16px;padding:24px 20px;margin-bottom:16px}
.co-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(248,244,238,0.4);margin-bottom:6px}
.co-value{font-size:15px;color:var(--cream);margin-bottom:14px}
.co-total-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(248,244,238,0.4);margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.08)}
.co-total{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:300;color:var(--gold)}
.co-period{font-size:13px;color:var(--gold-light)}
.fake-input{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:14px 16px;margin-bottom:10px;font-size:14px;color:rgba(248,244,238,0.4);font-family:'Jost',sans-serif}
.fi-row{display:flex;gap:10px}
.tag{display:inline-block;font-size:10px;padding:3px 10px;border-radius:10px;font-weight:500;letter-spacing:0.06em}
.tag-gold{background:rgba(191,164,101,0.12);color:var(--gold-ink)}
.tag-teal{background:rgba(26,60,64,0.1);color:var(--teal)}
.tag-blue{background:rgba(99,179,237,0.1);color:#1e40af}
.tag-green{background:rgba(74,222,128,0.1);color:#166534}
.success-wrap{text-align:center;padding:40px 20px}
.success-icon{width:72px;height:72px;border-radius:50%;background:var(--teal);margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--gold)}
.success-title{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;color:var(--teal);margin-bottom:8px}
.success-sub{font-size:13px;color:var(--mid);line-height:1.7;margin-bottom:24px}
.next-step{display:flex;align-items:flex-start;gap:12px;background:white;border:1px solid var(--bs);border-radius:10px;padding:14px;margin-bottom:10px;text-align:left}
/* (.ns-num teal circle removed — success steps use the ui.css .idx-num gold numbering, §C7) */
.ns-text{font-size:13px;color:var(--charcoal);line-height:1.5}
.pr-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(0,0,0,0.05);font-size:13px}
.pr-row:last-child{border-bottom:none}
.pr-label{color:var(--mid)}
.pr-value{font-weight:500;color:var(--charcoal);text-align:right}
.hero-banner{background:var(--navy);padding:24px 20px;margin:-20px -16px 20px;text-align:center;border-bottom:2px solid rgba(191,164,101,0.35)}
/* §6 imagery: a navy-duotone luxe render sits behind the greeting band — never
   a radial glow. A flat navy scrim (.78) holds Cormorant legibility; the image
   is luminosity-blended onto navy so it reads structural, not spa. */
.hero-banner--img{position:relative;overflow:hidden;background:var(--navy)}
.hero-banner--img::before{content:"";position:absolute;inset:0;background:url(/static/img/portal-hero-luxe.png) center/cover no-repeat;mix-blend-mode:luminosity;opacity:0.7}
.hero-banner--img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,31,46,0.55),rgba(10,31,46,0.72))}
.hero-banner-inner{position:relative;z-index:1}
.hb-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;color:var(--cream);letter-spacing:0.04em}
.hb-sub{font-size:12px;color:rgba(248,244,238,0.45);margin-top:6px}
/* §6 storefront band — one section image, navy-duotone + scrim + gold hairline
   edge (NOT a glow). object-fit:cover via background-size; max one band/screen. */
.book-band{position:relative;height:128px;border-radius:var(--radius-lg);overflow:hidden;margin:0 0 16px;background:var(--navy);border:1px solid var(--gold)}
.book-band::before{content:"";position:absolute;inset:0;mix-blend-mode:luminosity;opacity:0.62;background-position:center;background-size:cover;background-repeat:no-repeat}
.book-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,31,46,0.30),rgba(10,31,46,0.62))}
.book-band--bed::before{background-image:url(/static/img/book-lightbed.png)}
/* journey spine (§B8): the four-phase .idx sequence, breathing room before record */
.jr-spine{display:flex;flex-direction:column;gap:12px;margin:4px 0 2px}
.info-box{background:var(--gold-pale);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--teal);margin-bottom:14px;line-height:1.6}
/* APPOINTMENTS */
.appt-card{background:white;border:1.5px solid var(--bs);border-radius:14px;padding:18px;margin-bottom:12px;position:relative;overflow:hidden}
.appt-card.pending-confirm{border-left:4px solid var(--amber)}
.appt-card.confirmed{border-left:4px solid var(--green)}
.appt-card.past{opacity:0.55;border-left:4px solid rgba(0,0,0,0.1)}
.appt-date{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--teal);margin-bottom:2px}
.appt-time{font-size:12px;color:var(--mid);letter-spacing:0.06em;margin-bottom:10px}
.appt-svcs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.appt-svc-tag{font-size:11px;padding:3px 10px;background:rgba(26,60,64,0.07);border-radius:8px;color:var(--teal)}
.appt-status-row{display:flex;align-items:center;justify-content:space-between}
.appt-status-badge{font-size:11px;padding:4px 12px;border-radius:10px;font-weight:500;letter-spacing:0.06em}
.appt-status-badge.pending{background:rgba(251,191,36,0.12);color:#92400e}
.appt-status-badge.confirmed{background:rgba(74,222,128,0.12);color:#14532d}
.appt-status-badge.past{background:rgba(0,0,0,0.06);color:var(--mid)}
.btn-confirm{padding:9px 18px;background:var(--teal);border:none;border-radius:9px;font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);cursor:pointer;transition:all 0.2s}
.btn-confirm:active{transform:scale(0.97)}
/* SHELL: top-bar, content-area — not in prototype, added here using theme vars */
.top-bar{background:var(--navy);padding:14px 20px;padding-top:calc(14px + env(safe-area-inset-top,0px));display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(191,164,101,0.12)}
/* §2/§5 chrome signature: a 2px full-bleed gold stroke across the top of the
   navy portal header — the catalog's opening gesture (.sheet::before), the
   cheapest highest-signature print-family kinship move. */
.top-bar::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold)}
.tb-brand{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;letter-spacing:0.18em;color:var(--gold);text-transform:uppercase}
.tb-mark{height:30px;width:auto;display:block}
.tb-actions{display:flex;align-items:center;gap:12px}
/* §A2 — gold-outline JOIN pill: the always-visible path to join, sat beside
   the hamburger. Static label (no user data). */
.tb-join{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gold);background:transparent;border:1px solid rgba(191,164,101,0.55);
  border-radius:999px;padding:6px 14px;cursor:pointer;line-height:1;
  transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out);
}
.tb-join:hover{background:rgba(191,164,101,0.12);border-color:var(--gold)}
.tb-join:active{transform:scale(0.97)}
.hamburger{background:none;border:none;cursor:pointer;font-size:20px;color:var(--gold);padding:4px 6px;line-height:1;z-index:200}
.content-area{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* drawer-overlay.show alias (JS uses .show, prototype used .open; support both) */
.drawer-overlay.show{display:block;opacity:1}
/* (legacy .toast block removed — ui.css owns the toast component, §A0.1) */

/* ══ BOTTOM TAB BAR (§A2) — Home / Book / Appointments / Profile ══ */
.bottom-nav{display:flex;flex-shrink:0;background:var(--navy);border-top:1px solid rgba(191,164,101,0.15);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));z-index:150}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;padding:7px 4px 5px;cursor:pointer;color:rgba(248,244,238,0.45);transition:color var(--dur-2) var(--ease-out)}
.bn-item:hover{color:rgba(248,244,238,0.75)}
.bn-item.active{color:var(--gold)}
.bn-icon{width:22px;height:22px;display:block}
.bn-label{font-family:var(--font-mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase}

/* §E1 — Book promoted to a centered raised primary action (FAB). The .bn-fab
   is a gold-filled circle proud of the bar; the label sits beneath it. No JS
   change — showScreen('book') is still wired through the .bn-item click loop. */
.bn-item--primary{gap:5px}
.bn-fab{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--gold);color:var(--navy);
  box-shadow:var(--shadow-md);
  transform:translateY(-14px);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);
}
.bn-fab .bn-icon{width:24px;height:24px}
.bn-item--primary .bn-label{color:var(--gold)}
.bn-item--primary:hover{color:var(--gold)}
.bn-item--primary:hover .bn-fab{transform:translateY(-16px);box-shadow:var(--shadow-lg)}
.bn-item--primary:active .bn-fab{transform:translateY(-12px)}
/* keep the active primary readable — the FAB stays gold; label already gold. */
.bn-item--primary.active .bn-fab{box-shadow:var(--shadow-lg)}
/* The label sits flush so the lifted FAB doesn't push the bar taller. */
.bn-item--primary{margin-top:0}
/* Guard the lift against reduced-motion: keep the raised FAB (it's positional,
   not animated) but drop the hover/active transform jumps. */
@media (prefers-reduced-motion: reduce){
  .bn-item--primary:hover .bn-fab,
  .bn-item--primary:active .bn-fab{transform:translateY(-14px)}
}

/* ══ MEMBER ENTRY + MAGIC-LINK PAGES (templates/portal/enter.html, login_sent.html) ══
   Navy login-card pattern: full-bleed navy chrome, gold mark, Cormorant headline. */
body.portal-entry{display:grid;overflow-y:auto;background:radial-gradient(1100px 520px at 50% -8%,var(--navy-600),var(--navy-deep) 70%);padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px))}
.pe-card{margin:auto;width:min(92vw,400px);background:var(--navy);border:1px solid rgba(191,164,101,0.22);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);padding:38px 30px 28px;text-align:center}
.pe-mark{width:60px;height:auto;margin:0 auto 16px;display:block}
.pe-title{font-family:var(--font-display);font-size:30px;font-weight:300;letter-spacing:0.03em;color:var(--cream);margin:8px 0 10px}
/* §5 entry beat: the calibration hairline, centered + constrained on the navy
   doorway card (the magic-link email already proves the gold rule on-brand). */
.pe-spectrum{width:120px;margin:2px auto 14px}
.pe-msg{font-size:14px;color:rgba(248,244,238,0.62);line-height:1.7}
.pe-email{font-family:var(--font-mono);font-size:13px;letter-spacing:0.04em;color:var(--gold);margin:12px 0 2px;word-break:break-all}
.pe-note{font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(248,244,238,0.38);margin-top:18px}
.pe-form{margin-top:18px;display:grid;gap:9px;text-align:left}
.pe-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-light)}
.pe-input{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-md);padding:13px 15px;font-family:var(--font-ui);font-size:15px;color:var(--cream);outline:none;width:100%;transition:border-color var(--dur-2) var(--ease-out)}
.pe-input::placeholder{color:rgba(248,244,238,0.28)}
.pe-input:focus{border-color:rgba(191,164,101,0.55)}
.pe-btn{width:100%;padding:14px;background:var(--gold);border:none;border-radius:var(--radius-md);font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--navy);cursor:pointer;transition:filter var(--dur-2) var(--ease-out)}
.pe-btn:hover{filter:brightness(1.07)}
/* entry submit beat (§5): on submit the link request becomes a branded wait —
   the gold spiral mark turns once while the native POST navigates. Class-driven
   (.pe-sending on the form), so markup keeps zero inline styles; reduced-motion
   is honored by ui.css's .brand-spinner net (it shows a static mark). */
.pe-form.pe-sending .pe-btn{position:relative;color:transparent;pointer-events:none}
.pe-form.pe-sending .pe-btn::after{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;background:url(/static/img/lumati-mark-gold.png) center/contain no-repeat;animation:spiralTurn var(--dur-spiral) var(--ease-in-out) infinite}
@media (prefers-reduced-motion:reduce){.pe-form.pe-sending .pe-btn::after{animation:none}}
.pe-resend{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.08)}
.pe-resend-hint{font-size:12.5px;color:rgba(248,244,238,0.5);line-height:1.6;text-align:left}
.pe-foot{margin-top:26px;font-family:var(--font-mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(248,244,238,0.3)}

/* ══ P2: BOOK SCREEN (the storefront) + APPOINTMENTS — §A2/§B7 ══════════════
   Inline-style extraction + div→button a11y. Interactive elements are real
   <button>s; the ui.css gold focus ring covers them. */

/* mono field label (was an inline-styled <label>) */
.book-label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--mid);margin-bottom:6px}

/* selected-services tray (was an inline-styled teal block) */
.sel-wrap{background:var(--teal-deep);border-radius:12px;padding:14px;margin-bottom:14px}
.sel-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-light);margin-bottom:8px}
.sel-chips{display:flex;flex-wrap:wrap;gap:8px}
.sel-chip{background:rgba(191,164,101,0.1);border:1px solid rgba(191,164,101,0.2);border-radius:16px;padding:5px 12px;font-size:12px;color:var(--gold-light);cursor:pointer;font-family:'Jost',sans-serif}

/* session-level preparation note — calm gold, never error-red (§A2) */
.prep-note{background:var(--gold-pale);border:1px solid rgba(191,164,101,0.25);border-radius:10px;padding:11px 14px;margin-bottom:14px;font-size:12px;color:var(--gold-ink);line-height:1.6}
.prep-note-label{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:3px}

/* service card internals: select button fills the card; story + prep lines */
.svc-sel{display:block;width:100%;text-align:left;background:none;border:none;padding:0;cursor:pointer;font-family:'Jost',sans-serif}
.svc-sel .svc-name,.svc-sel .svc-dur,.svc-sel .svc-price{display:block}
.svc-desc{display:block;font-size:11.5px;color:var(--mid);line-height:1.5;margin:2px 0 4px}
.svc-card.selected .svc-desc{color:rgba(248,244,238,0.55)}
.svc-prep{display:block;font-size:10.5px;background:var(--gold-pale);color:var(--gold-ink);border:1px solid rgba(191,164,101,0.25);border-radius:6px;padding:3px 8px;margin-top:4px;line-height:1.5}
.svc-card.selected .svc-prep{background:rgba(191,164,101,0.15);color:var(--gold-light);border-color:rgba(191,164,101,0.3)}
/* §B7 expandable storytelling detail */
.svc-detail-btn{background:none;border:none;padding:6px 0 0;margin-top:4px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-ink);cursor:pointer}
.svc-card.selected .svc-detail-btn{color:var(--gold-light)}
.svc-detail{margin-top:8px;padding-top:4px;border-top:1px solid var(--border-s)}
.svc-card.selected .svc-detail{border-top-color:rgba(255,255,255,0.12)}
.svc-exp-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-ink);margin:8px 0 2px}
.svc-exp-text{font-size:12px;color:var(--mid);line-height:1.55}
.svc-card.selected .svc-exp-label{color:var(--gold-light)}
.svc-card.selected .svc-exp-text{color:rgba(248,244,238,0.75)}

/* 7-day horizontal day strip (replaces native <input type=date>) */
.day-strip{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin-bottom:14px}
.day-strip::-webkit-scrollbar{display:none}
.day-chip{flex:0 0 auto;min-width:64px;padding:9px 10px;border:1.5px solid var(--bs);border-radius:12px;background:white;font-family:'Jost',sans-serif;cursor:pointer;text-align:center;transition:all 0.2s}
.day-chip .dc-dow{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mid)}
.day-chip .dc-day{display:block;font-size:16px;font-weight:500;color:var(--charcoal);margin-top:2px}
.day-chip.active{background:var(--teal);border-color:var(--teal)}
.day-chip.active .dc-dow{color:var(--gold-light)}
.day-chip.active .dc-day{color:var(--gold)}

/* time section (was inline margins + inline serif heading) */
.time-section{margin-top:14px}
.time-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--teal);margin-bottom:2px}
.time-hint{font-size:12px;color:var(--mid);margin-bottom:10px}

/* pre-Confirm visit summary — sequenced order via ui.css .idx, kv-row specs */
.visit-summary{background:white;border:1.5px solid var(--bs);border-radius:14px;padding:16px;margin:14px 0 4px}
.vs-seq{display:flex;flex-direction:column;gap:8px;margin:10px 0 6px}
.vs-rows{margin-top:6px}

/* appointment card actions (was inline flex + inline red borders) */
.appt-actions{margin-top:10px;display:flex;gap:8px}
.appt-actions .btn-s{margin-top:0;width:auto;font-size:12px;padding:7px 14px}
.btn-s--danger{border-color:var(--red);color:var(--red-ink)}
/* relative-date tag sits inside the serif date line */
.appt-date .tag{font-family:'Jost',sans-serif;vertical-align:middle;margin-left:6px}
.appt-date--sm{font-size:18px}
.nv-svcs{margin-top:8px}

/* ══ P3: HOME JOURNEY + PROFILE + DRAWER SECONDARY — §A2/§B8 ═══════════════ */
/* journey card "explored X of N experiences" line */
.jr-explored{margin-top:10px;font-size:12.5px;color:var(--mid);line-height:1.6}
.jr-explored b{color:var(--gold-ink);font-weight:600}
/* concierge card copy + tappable tel:/mailto: actions (config-driven only) */
.cg-copy{font-size:12.5px;color:var(--mid);line-height:1.6;margin-bottom:12px}
.cg-actions{display:flex;gap:8px}
.cg-btn{flex:1;display:block;text-align:center;padding:12px 8px;border:1.5px solid var(--bs);border-radius:12px;background:white;font-family:'Jost',sans-serif;font-size:13px;font-weight:500;color:var(--teal);text-decoration:none;transition:all 0.2s}
.cg-btn:active{transform:scale(0.98)}
.cg-val{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.04em;color:var(--gold-ink);margin-top:3px;word-break:break-all}
/* drawer secondary items: concierge contact links + placeholder note */
.drawer-sec-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-light);padding:6px 20px 4px}
a.drawer-item{text-decoration:none}
.drawer-note{padding:10px 20px;font-size:12px;color:rgba(248,244,238,0.4);line-height:1.6}

/* ══ P2: MEMBER FORMS — intake / consent / prep-ack renderer ═══════════════ */
/* gold badge dot on the Home tab while forms are waiting */
.bn-item{position:relative}
.bn-dot{position:absolute;top:4px;left:calc(50% + 10px);width:7px;height:7px;border-radius:50%;background:var(--gold)}
/* quiet pill-check — "on file" states (forms / intake) */
.pill-check{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;letter-spacing:0.04em;padding:3px 10px;border-radius:10px;background:rgba(74,222,128,0.12);color:#14532d;white-space:nowrap}
/* home onboarding card */
.onboard-card{border:1.5px solid rgba(191,164,101,0.4)}
.onboard-copy{font-size:12.5px;color:var(--mid);line-height:1.6;margin:4px 0 6px}
/* forms list rows */
.fm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:white;border:1.5px solid var(--bs);border-radius:14px;padding:15px 16px;margin-bottom:10px;cursor:pointer;font-family:'Jost',sans-serif;transition:all 0.2s}
.fm-row:active{transform:scale(0.98)}
.fm-row-done{cursor:default}
.fm-row-done:active{transform:none}
.fm-row-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.fm-row-title{font-size:14px;font-weight:500;color:var(--charcoal)}
.fm-row-sub{font-size:12px;color:var(--mid)}
.fm-row-go{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--gold-ink);line-height:1;flex-shrink:0}
/* form detail: back link + body copy */
.fm-back{background:none;border:none;padding:0;margin-bottom:12px;font-family:'Jost',sans-serif;font-size:13px;color:var(--teal);cursor:pointer}
.fm-body{font-size:13.5px;line-height:1.7;color:var(--mid)}
.fm-p{margin:0 0 10px}
.fm-h{font-size:14px;font-weight:600;color:var(--charcoal);margin:14px 0 6px}
.fm-list{margin:0 0 12px 18px;display:flex;flex-direction:column;gap:6px}
/* fields */
.fm-fields{margin-top:16px;display:flex;flex-direction:column;gap:16px}
.fm-field{display:flex;flex-direction:column;gap:6px}
.fm-label{font-size:13px;font-weight:500;color:var(--charcoal)}
.fm-req{font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-ink);margin-left:8px}
.fm-help{font-size:12px;color:var(--mid);line-height:1.5}
.fm-input{width:100%;padding:12px 13px;border:1.5px solid var(--bs);border-radius:10px;background:white;font-family:'Jost',sans-serif;font-size:14px;color:var(--charcoal)}
.fm-input:focus{outline:none;border-color:var(--gold)}
textarea.fm-input{resize:vertical;min-height:74px}
select.fm-input{appearance:none;-webkit-appearance:none}
/* yes / no segmented pair */
.fm-yn{display:flex;gap:8px}
.fm-yn-btn{flex:1;padding:12px 6px;border:1.5px solid var(--bs);border-radius:10px;background:white;font-family:'Jost',sans-serif;font-size:13px;color:var(--charcoal);cursor:pointer;transition:all 0.2s}
.fm-yn-btn.selected{background:var(--teal);border-color:var(--teal);color:var(--gold);font-weight:500}
/* checkbox rows (ack + multiselect options) */
.fm-opts{display:flex;flex-direction:column;gap:9px}
.fm-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--charcoal);line-height:1.55;cursor:pointer}
.fm-check input{margin-top:2px;width:17px;height:17px;flex-shrink:0;accent-color:var(--teal)}
/* typed signature */
.fm-sig{margin-top:20px;padding-top:18px;border-top:1px dashed var(--bs);display:flex;flex-direction:column;gap:6px}
.fm-sig-input{font-family:'Cormorant Garamond',serif;font-size:19px;font-style:italic}
.fm-legal{font-size:12px;color:var(--mid);line-height:1.5}
/* gentle required marks — warm amber, never red urgency */
.fm-err{font-size:12px;color:#92400e}
.fm-missing .fm-input,.fm-missing .fm-yn-btn,.fm-missing.fm-sig .fm-input{border-color:var(--amber)}
.fm-submit{margin-top:18px}
/* quiet per-visit forms line on appointment cards */
.appt-forms-line{margin-top:10px}
.appt-forms-link{background:none;border:none;padding:0;font-family:'Jost',sans-serif;font-size:13px;font-weight:500;color:var(--teal);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* booking-success forms invite */
.success-forms{margin:6px 0 14px;padding:16px;border:1.5px solid rgba(191,164,101,0.4);border-radius:14px;background:var(--gold-pale);text-align:left}
.sf-copy{font-size:13px;color:var(--charcoal);line-height:1.6;margin-bottom:4px}

/* ══ P1.3: MEMBER PAYMENTS — pay moment, quiet chips, wallet meters ════════ */
/* booking-success pay block — optional, calm, never urgent */
.success-pay{margin:6px 0 14px;padding:16px;border:1.5px solid var(--bs);border-radius:14px;background:white;text-align:center}
.success-pay .btn-p{margin-top:0}
.pay-quiet{font-size:12.5px;color:var(--mid);line-height:1.6;margin-top:8px}
.success-pay > .pay-quiet:only-child{margin-top:0}
/* quiet payment line on appointment cards */
.appt-pay-line{margin-top:10px;display:flex;align-items:center;gap:12px}
.pay-chip-due{display:inline-flex;align-items:center;font-size:11px;font-weight:500;letter-spacing:0.04em;padding:3px 10px;border-radius:10px;background:var(--gold-pale);color:var(--gold-ink);white-space:nowrap}
.appt-pay-link{background:none;border:none;padding:0;font-family:'Jost',sans-serif;font-size:13px;font-weight:500;color:var(--teal);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* card-payment modal body */
.pay-modal{text-align:center}
.pay-amount{font-family:'Cormorant Garamond',serif;font-size:34px;color:var(--charcoal);line-height:1.15}
.pay-label{font-size:12.5px;color:var(--mid);margin-top:2px}
.pay-card-host{margin:16px 0 4px;min-height:48px;text-align:left}
/* wallet meters — membership cycle + package balances (data-fill-w via JS) */
.wallet-block{margin-top:12px}
.wallet-line{font-size:12.5px;color:var(--mid);line-height:1.6}
.wallet-line b{color:var(--gold-ink);font-weight:600}
.fill-track{position:relative;height:8px;border-radius:3px;background:rgba(0,0,0,0.07);overflow:hidden;margin-top:6px}
.fill-track .meter{display:block;height:100%}
.wallet-renews{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;color:var(--mid);margin-top:5px}

/* ══ CONVERSION FLOW (conversion-flow-spec §A–§D) ═══════════════════════════
   Member Home availability + anchor, the guided Book flow (intent gate,
   merchandised coverage lines, foot-in-the-door hero, scarcity-aware time
   pick, full-day state, upsell rows), and the Offers panel. Phone-first,
   premium, honest. Reuses .plan-card / .co-card / .pill-check; tokens only. */

/* §A2 — "Availability this week" honest open/limited/tight strip */
.avail-card .avail-strip{display:flex;gap:6px;margin:12px 0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.avail-chip{flex:1 0 auto;min-width:44px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px;border-radius:var(--radius-md);border:1px solid var(--bs);background:white}
.ac-dow{font-family:var(--font-mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;color:var(--mid)}
.ac-state{font-size:10px;font-weight:600;letter-spacing:0.04em}
.avail-open{border-color:rgba(74,222,128,0.35);background:rgba(74,222,128,0.06)}
.avail-open .ac-state{color:var(--green-ink)}
.avail-limited{border-color:rgba(251,191,36,0.4);background:rgba(251,191,36,0.07)}
.avail-limited .ac-state{color:var(--amber-ink)}
.avail-tight{border-color:rgba(191,164,101,0.5);background:var(--gold-pale)}
.avail-tight .ac-state{color:var(--gold-ink)}
.avail-lead{font-size:12px;color:var(--mid);line-height:1.6;margin:0}

/* §A3 — membership anchor card (non-members only) */
.anchor-card{cursor:default}
.anchor-bullets{list-style:none;margin:10px 0 16px;padding:0;display:flex;flex-direction:column;gap:7px}
.anchor-bullets li{position:relative;padding-left:20px;font-size:12.5px;color:var(--charcoal);line-height:1.5}
.anchor-bullets li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--gold-ink);font-size:12px;font-weight:600}
.anchor-card .btn-p{margin-top:0}

/* §B1 — "What brings you in?" intent gate */
.intent-block{margin-top:4px}
.intent-title{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:300;color:var(--teal);margin:6px 0 4px}
.intent-sub{font-size:12.5px;color:var(--mid);line-height:1.6;margin:0 0 16px}
.intent-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.intent-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:18px 16px;border:1.5px solid var(--bs);border-radius:var(--radius-lg);background:white;cursor:pointer;transition:border-color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.intent-card:hover{border-color:var(--gold)}
.intent-card:active{transform:scale(0.98)}
.intent-name{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:400;color:var(--teal)}
.intent-hint{font-size:11.5px;color:var(--mid);line-height:1.45}
.intent-browse{width:100%;margin-top:14px;background:none;border:none;padding:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-ink);cursor:pointer}
.intent-browse:hover{text-decoration:underline;text-underline-offset:3px}
/* §B1 quiet membership hook beneath the intent gate — fills the dead space on
   the highest-intent screen and carries the funnel toward offers. */
.intent-foot{display:block;width:100%;margin-top:18px;background:none;border:none;padding:6px 10px;font-size:11.5px;line-height:1.5;text-align:center;color:var(--mid);cursor:pointer}
.intent-foot:hover{color:var(--teal)}

/* §B2 intent header + change-focus affordance */
.intent-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px}
.intent-head-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-ink)}
.intent-change{background:none;border:none;padding:4px 0;font-size:12px;color:var(--teal);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* §B2 — wallet-driven coverage line on a service card */
.svc-coverage{margin:8px 14px 0;display:flex;align-items:baseline;gap:2px;flex-wrap:wrap}
.cov-price{font-size:12.5px;font-weight:600;color:var(--teal)}
/* The "$X/mo" membership anchor recedes behind the single-session price so the
   card reads one price first, then the quiet membership teaser (§B2 / crit #4). */
.cov-or{font-size:11.5px;color:var(--mid);opacity:0.85}
.svc-coverage .pill-check{margin-top:2px}

/* §B3 foot-in-the-door hero */
.hero-foot{cursor:default;margin-bottom:16px}
.hero-foot .btn-p,.hero-foot .btn-s{margin-top:14px}

/* §B4 scarcity-aware time pick */
.best-avail{display:inline-flex;align-items:center;gap:5px;margin:0 0 8px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-ink)}
.best-avail::before{content:"\2726";color:var(--gold-ink)}
.scarcity-line{margin:2px 0 14px;padding:12px 14px;border-radius:var(--radius-md);background:var(--gold-pale);border:1px solid rgba(191,164,101,0.25);font-size:12.5px;color:var(--teal);line-height:1.6}
.scarcity-from{color:var(--gold-ink);font-weight:600;white-space:nowrap}

/* §B4 full-day merchandised state */
.fullday-card{padding:18px;border:1.5px solid var(--bs);border-radius:var(--radius-lg);background:white}
.fullday-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--teal);margin-bottom:4px}
.fullday-sub{font-size:12.5px;color:var(--mid);line-height:1.6;margin-bottom:12px}
.fullday-card .btn-s{margin-top:8px}
.fullday-card .scarcity-line{margin-top:14px;margin-bottom:0}

/* §B5/§B6 upsell rows (reuse .co-card surface) */
.summary-upsell{margin-top:14px}
.summary-upsell .btn-p{margin-top:14px}
.summary-upsell--member{margin-top:14px;text-align:center}
.success-upsell{margin-top:20px;text-align:left}

/* §C — Offers panel: plan rows + value calc */
.plan-rows{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.plan-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.06)}
.plan-row:last-child{border-bottom:none}
.plan-row-name{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:400;color:var(--teal)}
.plan-row-price{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;color:var(--gold-ink);text-align:right}
.plan-row-sub{grid-column:1 / -1;font-size:11.5px;color:var(--mid)}
.value-calc{margin:6px 0 16px;padding:12px 14px;border-radius:var(--radius-md);background:var(--gold-pale);line-height:1.6}
.vc-price{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:300;color:var(--teal)}
.vc-note{font-size:12px;color:var(--mid)}

@media (prefers-reduced-motion:reduce){
  .intent-card:active{transform:none}
}

/* ══ TABLET / DESKTOP — center the phone-first column so the portal doesn't
   read "lost" on a wide screen. Purely additive (min-width:768px) so the mobile
   layout below the breakpoint is untouched. The content column, sticky header,
   and bottom tab bar all share the same centered measure; the hero-banner's
   edge-bleed negative margins still resolve to the (now-centered) panel edges. */
@media (min-width:768px){
  body.portal-shell{background:var(--cream)}
  .panel{max-width:560px;margin-left:auto;margin-right:auto;padding:28px 24px 40px}
  /* keep the sticky chrome full-bleed navy, but center its inner controls to the
     same 560px measure so brand + actions align over the content column. */
  .top-bar,.bottom-nav{padding-left:max(20px,calc((100% - 560px)/2));padding-right:max(20px,calc((100% - 560px)/2))}
  .bottom-nav{padding-top:8px}
}