/* KOHO Portal — shell styles. "Boutique Editorial / Night Concierge"
   redesign (2026-09-22): two named, KOHO-branded themes — a warm
   editorial-catalog light mode and a cinematic near-black dark mode —
   with a manual toggle (assets/portal/theme.js) that defaults to the
   OS light/dark preference and persists an override via localStorage.
   Token block order matters: :root (light default) → the OS-driven
   dark media query (only when no manual override) → explicit
   [data-theme="light"] → explicit [data-theme="dark"] last, so the
   manual override always wins on equal specificity. Supersedes the
   "Warm Lounge" redesign (2026-09-15), which had no manual toggle. */
:root{
  /* ---- Boutique Editorial (light) — also the no-JS/no-media fallback ---- */
  --bone:#F6EFE2;        /* warm cream editorial stock — page bg */
  --panel:#FFFEFB;       /* near-white card / product-tile surface, never pure #fff */
  --sand:#ECE0CB;        /* section tint / hover / muted chip bg */
  --ink:#17262A;         /* deep teal-black text */
  --sea:#145560;         /* deepened door teal — primary buttons, active nav, accents */
  --clay:#6E5232;        /* teak clay — section labels, secondary accent */
  --brass:#2FA9A6;       /* pool turquoise — reserved for future use */
  --line:#DED0B8;
  --soft:#54655D;
  --ok:#256B44; --warn:#8A5B0C; --danger:#9C3527;
  --on-accent:#FFFBF3;   /* text placed on solid --sea/--danger fills */
  --sea-soft:color-mix(in srgb, var(--sea) 14%, var(--panel));
  --clay-soft:color-mix(in srgb, var(--clay) 16%, var(--panel));
  --ok-soft:color-mix(in srgb, var(--ok) 14%, var(--panel));
  --warn-soft:color-mix(in srgb, var(--warn) 14%, var(--panel));
  --danger-soft:color-mix(in srgb, var(--danger) 14%, var(--panel));
  --r:16px; --r-sm:10px; --r-pill:999px;
  --shadow:0 14px 34px -22px rgba(23,38,42,.20);
  --nav-w:252px;
  --theme-transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
@media(prefers-color-scheme:dark){
  /* ---- Night Concierge (dark), OS-driven — only when there's no manual override ---- */
  :root:not([data-theme]){
    --bone:#14181A; --panel:#1C2326; --sand:#242C2F; --ink:#EDE7DA;
    --sea:#45B8B4; --clay:#D9B382; --brass:#6FE0D6; --line:#2A3336; --soft:#9FB0AC;
    --ok:#5FCB8C; --warn:#E0A857; --danger:#E88268;
    --on-accent:#12181A;
    --sea-soft:color-mix(in srgb, var(--sea) 14%, var(--panel));
    --clay-soft:color-mix(in srgb, var(--clay) 16%, var(--panel));
    --ok-soft:color-mix(in srgb, var(--ok) 14%, var(--panel));
    --warn-soft:color-mix(in srgb, var(--warn) 14%, var(--panel));
    --danger-soft:color-mix(in srgb, var(--danger) 14%, var(--panel));
    --shadow:0 16px 40px -20px rgba(0,0,0,.55);
  }
}
/* ---- explicit manual overrides (assets/portal/theme.js sets data-theme) ---- */
:root[data-theme="light"]{
  --bone:#F6EFE2; --panel:#FFFEFB; --sand:#ECE0CB; --ink:#17262A;
  --sea:#145560; --clay:#6E5232; --brass:#2FA9A6; --line:#DED0B8; --soft:#54655D;
  --ok:#256B44; --warn:#8A5B0C; --danger:#9C3527;
  --on-accent:#FFFBF3;
  --sea-soft:color-mix(in srgb, var(--sea) 14%, var(--panel));
  --clay-soft:color-mix(in srgb, var(--clay) 16%, var(--panel));
  --ok-soft:color-mix(in srgb, var(--ok) 14%, var(--panel));
  --warn-soft:color-mix(in srgb, var(--warn) 14%, var(--panel));
  --danger-soft:color-mix(in srgb, var(--danger) 14%, var(--panel));
  --shadow:0 14px 34px -22px rgba(23,38,42,.20);
}
:root[data-theme="dark"]{
  --bone:#14181A; --panel:#1C2326; --sand:#242C2F; --ink:#EDE7DA;
  --sea:#45B8B4; --clay:#D9B382; --brass:#6FE0D6; --line:#2A3336; --soft:#9FB0AC;
  --ok:#5FCB8C; --warn:#E0A857; --danger:#E88268;
  --on-accent:#12181A;
  --sea-soft:color-mix(in srgb, var(--sea) 14%, var(--panel));
  --clay-soft:color-mix(in srgb, var(--clay) 16%, var(--panel));
  --ok-soft:color-mix(in srgb, var(--ok) 14%, var(--panel));
  --warn-soft:color-mix(in srgb, var(--warn) 14%, var(--panel));
  --danger-soft:color-mix(in srgb, var(--danger) 14%, var(--panel));
  --shadow:0 16px 40px -20px rgba(0,0,0,.55);
}
@media(prefers-reduced-motion:reduce){ :root{ --theme-transition:none } }
body,.ptop,.pnav,.pcard,.pbox,.pstat,.ptable-wrap,table.ptable th,table.ptable td,.mhero-id,.mprof-card,.emp-panel{
  transition:var(--theme-transition);
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:var(--bone); color:var(--ink);
  font-family:'Public Sans',system-ui,-apple-system,sans-serif; font-weight:400;
  font-size:15px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1{font-family:'Domine',serif; font-weight:600; font-size:1.5rem; line-height:1.16; letter-spacing:-.005em}
h2{font-family:'Domine',serif; font-weight:600; font-size:1.12rem; line-height:1.22; margin-bottom:.3em}
h3{font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--soft); font-weight:600}
h4{font-size:.82rem; font-weight:600; color:var(--ink)}
a{color:var(--sea)}
.hidden{display:none !important}
.muted{color:var(--soft)}

/* ---------- centred views (sign-in, gate, pending) ---------- */
.pv-center{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:28px}
.pcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:36px 34px; width:100%; max-width:410px; box-shadow:0 22px 54px -28px rgba(21,42,46,.3)}
.pcard-wide{max-width:660px}
.pcard-brand{display:flex; align-items:center; gap:10px; font-family:'Domine',serif; font-weight:600; font-size:1.12rem; letter-spacing:.02em; margin-bottom:18px}
.pcard h1{margin-bottom:.2em}
.pcard .muted{margin-bottom:22px; font-size:.9rem}

.pbtn{font:inherit; font-family:'Public Sans',sans-serif; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; line-height:1;
  padding:10px 20px; border:1px solid var(--sea); background:var(--sea); color:var(--on-accent); cursor:pointer;
  border-radius:var(--r-pill); box-shadow:0 8px 18px -12px rgba(27,95,107,.55); transition:filter .15s, background .15s}
.pbtn:hover{filter:brightness(1.08)}
.pbtn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.pbtn-block{display:block; width:100%; margin-top:8px; padding-top:12px; padding-bottom:12px}
.pbtn-ghost{background:transparent; color:var(--sea); box-shadow:none}
/* Google sign-in — white per Google's brand guidelines, so it reads as the Google service */
.pbtn-google{display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#152A2E; border:1px solid var(--line); box-shadow:none}
.pbtn-google:hover{background:#FAF7F1; filter:none}
.pbtn-google svg{flex:none}
.pbtn-google span{letter-spacing:.06em}
.pbtn-ghost:hover{background:var(--sea-soft); filter:none}
.pbtn-mini{padding:7px 14px; font-size:.58rem; letter-spacing:.1em}
/* buttons sitting in an inline form align to the input height */
.pform-inline .pbtn{padding-top:8px; padding-bottom:8px}
.pbtn-danger{border-color:var(--danger); background:var(--danger); box-shadow:0 8px 18px -12px rgba(178,63,52,.5)}

.por{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--soft); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase}
.por::before,.por::after{content:''; flex:1; height:1px; background:var(--line)}

.pform{display:grid; gap:10px}
.pform label,.pfield{display:grid; gap:4px; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); font-weight:600}
.pform input,.pfield input,.pfield select,input.pinput,select.pinput,textarea.pinput{
  font:inherit; font-family:'Public Sans',sans-serif; font-size:.84rem; line-height:1.35; color:var(--ink); background:var(--panel);
  border:1px solid var(--line); padding:6px 11px; width:100%; border-radius:var(--r-sm)}
textarea.pinput{line-height:1.5}
.pform input:focus,.pinput:focus{outline:2px solid var(--sea); outline-offset:0; border-color:var(--sea)}

.prow-split{display:flex; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap}
.plink{background:none; border:0; font:inherit; font-size:.82rem; color:var(--sea); cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px}
.pmsg{margin-top:14px; font-size:.85rem; min-height:1.2em}
.pmsg.err{color:var(--danger)}
.pmsg.ok{color:var(--ok)}
.pcheck{display:flex; gap:9px; align-items:flex-start; margin:10px 0 4px; font-size:.83rem; cursor:pointer}
.pcheck input{margin-top:3px}

/* password strength meter */
.pwm{margin-top:7px}
.pwm-bar{height:6px; border-radius:var(--r-pill); background:var(--sand); overflow:hidden}
.pwm-bar > i{display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left; border-radius:var(--r-pill); background:var(--danger); transition:transform .2s, background .2s}
.pwm-bar > i.pwm-s2{background:var(--warn)}
.pwm-bar > i.pwm-s3{background:var(--sea)}
.pwm-bar > i.pwm-s4{background:var(--ok)}
.pwm-txt{font-size:.72rem; margin-top:4px; letter-spacing:0; text-transform:none}
.pwm-txt.ok{color:var(--ok)}

/* weak-password nudge bar (top of app) */
.pwarn-bar{background:var(--warn-soft); color:var(--warn); border-bottom:1px solid var(--warn);
  padding:9px 46px 9px 24px; font-size:.85rem; position:relative}
.pwarn-bar a{color:var(--warn); text-decoration:underline; text-underline-offset:2px}
.pwarn-x{position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:0;
  font-size:1.15rem; line-height:1; color:var(--warn); cursor:pointer}

/* ---------- Employee overview (Operations) ---------- */
.pmain-head{position:relative}
.emp-topbar{position:absolute; right:0; top:2px; display:flex; gap:8px}
.emp-toolbar{margin-bottom:10px}
.emp-views{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:4px}
.emp-split{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start}
.emp-split.emp-nopanel{grid-template-columns:minmax(0,1fr)}
.emp-split.emp-nopanel .emp-panel{display:none}
@media(max-width:560px){ .emp-topbar{position:static; margin-top:10px} }
.emp-tablewrap{overflow-x:auto}
.emp-groups{display:grid; grid-template-columns:minmax(0,1fr); gap:12px}
.emp-group .emp-tablewrap{border:1px solid var(--line); border-radius:0 0 var(--r-sm) var(--r-sm); border-top:0}
.emp-dept-h{width:100%; text-align:left; display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:600;
  background:var(--sand); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 13px}
.emp-group:has(.emp-tablewrap) .emp-dept-h{border-radius:var(--r-sm) var(--r-sm) 0 0}
.emp-dept-h .c{color:var(--soft); font-weight:400}
.emp-table{font-size:.8rem; border-radius:0}
.emp-table th,.emp-table td{white-space:nowrap; padding:5px 9px}
.emp-table tr[data-id]{cursor:pointer}
.emp-table tbody tr.on td{background:var(--sea-soft)}
.emp-table th.emp-sortable{cursor:pointer; user-select:none}
.emp-table th.emp-sortable:hover{color:var(--ink)}
.emp-panel{border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:15px 17px; box-shadow:var(--shadow)}
.emp-panel-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px}
.emp-panel-head strong{font-family:'Domine',serif; font-size:1.1rem}
.emp-ptabs{gap:8px; margin-bottom:12px}
.emp-ptabs .ptab{font-size:.72rem; padding:6px 4px}
.emp-exp{color:var(--danger); font-weight:500}
.ptag.emp-ok{background:var(--ok-soft); color:var(--ok)}
.ptag.emp-warn{background:var(--warn-soft); color:var(--warn)}
.ptag.emp-info{background:var(--sea-soft); color:var(--sea)}
.ptag.emp-clay{background:var(--clay-soft); color:var(--clay)}
.ptag.emp-muted{background:var(--sand); color:var(--soft)}
@media(max-width:900px){ .emp-split{grid-template-columns:minmax(0,1fr)} }

/* ---------- gate docs ---------- */
#gateDocs{max-height:46vh; overflow:auto; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bone); padding:20px 22px; margin-top:12px}
.gate-doc + .gate-doc{margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.gate-doc h2{font-size:1.2rem}
.gate-doc .gate-body{font-size:.86rem; white-space:pre-wrap; color:var(--ink)}
.gate-doc .gate-ver{font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin-bottom:8px}

/* ---------- app shell ---------- */
.ptop{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  padding:14px 26px; background:var(--panel); border-bottom:1px solid var(--line); box-shadow:0 2px 14px -10px rgba(21,42,46,.14)}
/* Staging-only debug label (app.js's renderDataSourceTag) — which
   Firestore collection(s)/Postgres table(s) back the page currently
   open. Absolutely centered on .ptop (its own sticky positioning
   already establishes the containing block) rather than a flex child,
   so it stays dead-center regardless of how much the brand/right-hand
   groups take up — but "dead-center of the whole bar" is NOT the same
   as "centered in the gap between them" when those two sides are
   asymmetric widths (brand is short, the button cluster on the right
   is long), so a wide single line reached far enough right to overlap
   the buttons. Two short stacked lines in a narrow, wrapping box (not
   one long nowrap/ellipsis line) keeps it clear of that cluster in
   practice, without needing to measure either side's actual width. */
/* In the header's flex flow (not absolutely centred), so it can only take
   the space left between the brand and the button cluster — it shrinks and
   ellipsises instead of running under the buttons. Staging-only diagnostic. */
.pdata-tag{flex:1 1 0; min-width:0; margin:0 18px;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  font-size:.6rem; letter-spacing:.02em; color:var(--soft); opacity:.7;
  text-align:center; line-height:1.3; pointer-events:none}
.pdata-tag > span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media(max-width:1100px){ .pdata-tag{display:none} }
.ptop-brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink)}
.ptop-wm{font-family:'Domine',serif; font-size:1.08rem; letter-spacing:.08em; text-transform:uppercase; line-height:1}
.ptop-wm small{display:block; font-family:'Public Sans',sans-serif; font-size:.48rem; letter-spacing:.28em; text-transform:uppercase; opacity:.5; margin-top:5px}
.ptop-right{margin-left:auto; display:flex; align-items:center; gap:16px}
.ptheme-toggle{position:relative; width:34px; height:34px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--panel);
  color:var(--ink); cursor:pointer; padding:0; transition:var(--theme-transition), background .12s}
.ptheme-toggle:hover{background:var(--sand)}
.ptheme-toggle svg{width:17px; height:17px; position:absolute; transition:opacity .15s, transform .15s}
.ptheme-toggle[aria-pressed="true"] .ptheme-ic--sun{opacity:0; transform:rotate(-20deg) scale(.7)}
.ptheme-toggle[aria-pressed="false"] .ptheme-ic--moon{opacity:0; transform:rotate(20deg) scale(.7)}
@media(prefers-reduced-motion:reduce){ .ptheme-toggle svg{transition:none} }
.ptop-site{font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; padding:6px 13px; border:1px solid var(--line); border-radius:var(--r-pill); opacity:.85}
.ptop-site:hover{background:var(--sand); opacity:1}
.pbadge{font-size:.82rem; color:var(--soft)}
.pnav-toggle{display:none; background:none; border:0; font-size:1.3rem; cursor:pointer; color:var(--ink)}
@media(max-width:640px){ .ptop-site{display:none} .ptop-wm small{display:none} }

/* "View as role" preview switcher — admin-groups editors only (see
   app.js's realCanPreviewGroups()). Solid pill so it reads as a
   privileged control, not an ordinary field. */
.prole-switch{display:flex; align-items:center; gap:4px}
.prole-step{background:none; border:0; font-size:1rem; font-weight:700; line-height:1; color:var(--sea); cursor:pointer; padding:2px 3px}
.prole-step:hover{opacity:.7}
.prole-select{font:inherit; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color:var(--sea); background:var(--sea-soft); border:1px solid var(--sea); border-radius:var(--r-pill);
  padding:5px 10px; cursor:pointer; max-width:140px}
.prole-exit{font:inherit; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  color:var(--warn); background:var(--warn-soft); border:1px solid var(--warn); border-radius:var(--r-pill);
  padding:5px 10px; margin-left:2px; cursor:pointer; white-space:nowrap}
.prole-exit:hover{filter:brightness(1.05)}
@media(max-width:900px){ .prole-switch{display:none} }

/* site-style footer */
.psitefoot{background:var(--ink); color:var(--bone); padding:48px 24px 22px; margin-top:44px}
.psf-grid{max-width:900px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px}
@media(max-width:640px){ .psf-grid{grid-template-columns:1fr 1fr} }
.psf-wm{font-family:'Domine',serif; font-size:1.12rem; letter-spacing:.1em; text-transform:uppercase}
.psf-tag{font-family:'Domine',serif; font-style:italic; font-size:1.18rem; opacity:.75; margin-top:10px; line-height:1.4}
.psitefoot h4{font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; opacity:.55; margin-bottom:12px}
.psitefoot ul{list-style:none; display:grid; gap:9px}
.psitefoot a{color:var(--bone); opacity:.78; text-decoration:none; font-size:.86rem}
.psitefoot a:hover{opacity:1}
.psf-bot{max-width:900px; margin:32px auto 0; padding-top:18px; border-top:1px solid rgba(250,247,241,.15);
  display:flex; justify-content:space-between; gap:12px; font-size:.72rem; opacity:.5; flex-wrap:wrap; position:relative}
/* "what's new" — pill in the footer next to the copyright (it used to be
   fixed bottom-left and covered menu items on shorter windows, 2026-10-06);
   the card still opens fixed, bottom-left. */
.pcl-toggle{position:static; margin-left:12px;
  background:var(--panel); border:1px solid var(--line); color:var(--soft);
  font:inherit; font-size:.68rem; letter-spacing:.04em; cursor:pointer;
  padding:6px 13px; border-radius:var(--r-pill); box-shadow:var(--shadow); opacity:1}
.pcl-toggle:hover{color:var(--ink); border-color:var(--soft)}
.pcl-flyout{position:fixed; left:16px; bottom:48px; z-index:40;
  width:min(340px, 92vw); max-height:min(64vh, 460px); overflow-y:auto;
  background:var(--panel); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:0 22px 54px -24px rgba(21,42,46,.4); padding:12px 14px}
.pcl-ver{padding:7px 0; border-bottom:1px solid var(--line)}
.pcl-ver:last-of-type{border-bottom:0}
.pcl-ver:first-child{padding-top:0}
.pcl-head{display:flex; align-items:baseline; gap:8px; font-size:.8rem}
.pcl-head strong{font-weight:600}
.pcl-head .muted{font-size:.72rem}
.pcl-ver ul{margin:4px 0 0 16px; font-size:.76rem; line-height:1.45; color:var(--soft)}
.pcl-ver li{margin-bottom:2px}
.pcl-manage{display:block; margin-top:8px; font-size:.74rem; color:var(--sea); text-decoration:none}
.pcl-manage:hover{text-decoration:underline}

.pshell{display:grid; grid-template-columns:var(--nav-w) 1fr; min-height:calc(100dvh - 96px)}
.pnav{border-right:1px solid var(--line); background:var(--panel); padding:16px 14px}
.pnav .pnav-sec{
  display:flex; align-items:center; gap:10px;
  font-size:.6rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--clay); margin:20px 8px 7px; padding:0;
}
.pnav .pnav-sec::after{content:''; flex:1 1 auto; height:1px; background:var(--line)}
.pnav .pnav-sec:first-child{margin-top:4px}
.pnav .pnav-subsec{
  font-size:.56rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--soft); opacity:.75; margin:12px 8px 3px; padding:0;
}
.pnav .pnav-subsec:first-of-type{margin-top:6px}
.pnav a{display:block; margin:2px 0; padding:6px 14px; font-size:.84rem; color:var(--ink); text-decoration:none;
  border-radius:var(--r-pill); cursor:pointer; transition:background .12s}
.pnav a:hover{background:var(--sand)}
.pnav a.on{background:var(--sea); color:var(--on-accent); font-weight:600}

.pmain{padding:22px 28px 48px; max-width:1000px; min-width:0} /* min-width:0 — without it a wide table widens the whole grid column on phones instead of scrolling inside .ptable-wrap */
.pmain:focus{outline:none}
.pmain-head{margin-bottom:12px}
.pmain-head p{color:var(--soft); font-size:.86rem; margin-top:.2em}

.ptabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap}
.ptab{background:none; border:0; padding:8px 4px; margin-bottom:-1px; font-size:.84rem; color:var(--soft);
  cursor:pointer; border-bottom:2px solid transparent; font-weight:500}
.ptab:hover{color:var(--ink)}
.ptab.on{color:var(--sea); border-bottom-color:var(--sea); font-weight:600}

.pce-toolbar{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
.pce-editor{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); padding:14px 16px;
  min-height:180px; font-size:.92rem; line-height:1.6}
.pce-editor:focus{outline:2px solid var(--sea); outline-offset:0; border-color:var(--sea)}
.pce-editor p{margin-bottom:.8em}
.pce-editor ul{margin-left:20px}

/* role cards (Admin → Roles) */
.prole{margin-bottom:6px; padding:9px 14px}
.prole > summary{cursor:pointer; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; list-style:none}
.prole > summary::-webkit-details-marker{display:none}
.prole > summary::before{content:'▸'; color:var(--soft); font-size:.72rem}
.prole[open] > summary::before{content:'▾'}
.prole-name{font-weight:600; font-size:.9rem}
.prole-id{font-size:.68rem; color:var(--soft); letter-spacing:.04em}
.prole-sum{margin-left:auto; font-size:.74rem; color:var(--clay)}
.prole .ptable td{padding-top:5px; padding-bottom:5px}

.pfoot{padding:14px 24px; border-top:1px solid var(--line); font-size:.72rem; color:var(--soft); background:var(--panel)}

/* ---------- generic content bits ---------- */
.pcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:18px}
.pstat{border:1px solid var(--line); background:var(--panel); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow)}
.pstat .n{font-family:'Domine',serif; font-size:1.55rem; font-weight:600; color:var(--ink); line-height:1}
.pstat .l{font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--soft); margin-top:6px}
.pstat ul{list-style:none; margin-top:8px; font-size:.8rem; display:grid; gap:5px}
.pstat ul small{color:var(--soft)}

/* ---------- "My membership" tabbed profile ---------- */
.mprof-top{display:flex; flex-wrap:wrap; gap:18px 26px; align-items:flex-start; margin-bottom:18px}
.mprof-av{display:flex; flex-direction:column; align-items:center; gap:7px; width:88px; flex:none}
.mprof-av-face{width:84px; height:84px; border-radius:50%; overflow:hidden; background:var(--sea-soft); border:1px solid var(--line)}
.mprof-av-face svg{width:100%; height:100%; display:block}
.mprof-av-face img{width:100%; height:100%; object-fit:cover; display:block}
.mprof-avpick{grid-template-columns:repeat(4,1fr); gap:5px; margin-top:2px}
.mprof-avopt{width:26px; height:26px; padding:0; border:1px solid var(--line); border-radius:50%; overflow:hidden; background:var(--panel); cursor:pointer}
.mprof-avopt svg{width:100%; height:100%; display:block}
.mprof-avopt:hover{border-color:var(--sea)}
.mprof-avup{display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--sea); background:var(--sea-soft)}
.mprof-id{flex:1 1 300px; min-width:min(100%,260px)}
.mprof-name{font-family:'Domine',serif; font-weight:600; font-size:1.5rem; line-height:1.12; color:var(--ink)}
.mprof-chips{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px}
.mprof-kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0 24px}
.mprof-kv > div{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:5px 0; border-bottom:1px solid var(--line); font-size:.85rem}
.mprof-kv span:first-child{color:var(--soft); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}
.mprof-kv span:last-child{color:var(--ink); text-align:right; overflow-wrap:anywhere}
.mprof-card{flex:0 0 300px; max-width:100%}
.mprof-card .mcard{max-width:none; width:100%}
.mprof-stats{margin-top:4px}
.ptab-staff{color:var(--clay)}
.ptab-staff.on{border-color:var(--clay) !important; color:var(--clay)}
@media(max-width:760px){
  .mprof-id{flex-basis:100%}
  .mprof-card{flex-basis:100%; max-width:360px}
}

.mhero{display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-bottom:4px}
.mhero .mcard{flex:0 0 auto}
.mhero-id{flex:1 1 240px; min-width:210px; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  box-shadow:var(--shadow); overflow:hidden}
.mhero-row{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:10px 15px}
.mhero-row + .mhero-row{border-top:1px solid var(--line)}
.mhero-row .k{color:var(--soft); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase}
.mhero-row .v{color:var(--ink); font-size:.9rem; text-align:right}

/* watermark-crest stat card (per-benefit icon, faint, bottom-right) */
.pstat--crest{position:relative; overflow:hidden}
.pstat--crest .n,.pstat--crest .l{position:relative; z-index:1}
.pstat--crest .crest{position:absolute; right:-10px; bottom:-14px; width:64px; height:64px;
  fill:none; stroke:var(--clay); stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round; opacity:.13}

.mfree{margin:2px 0 2px}
.mfree-track{height:8px; border-radius:var(--r-pill); background:var(--sand); overflow:hidden; margin-bottom:6px}
.mfree-track > i{display:block; height:100%; border-radius:var(--r-pill); background:var(--sea)}

.mcols{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px 28px; margin-top:20px}
.mcols .mcol h3{color:var(--soft)}
.mcols .mcol ul{color:var(--ink)}

/* ---------- surveys (Communication -> Surveys) ---------- */
.ptag-ok{background:var(--ok-soft); color:var(--ok)}
.ptag-muted{background:var(--sand); color:var(--soft)}
.psb-qs{display:grid; gap:12px; max-width:640px}
.psb-q{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); padding:12px 14px; display:grid; gap:8px}
.psb-qtop{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.psb-qn{font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin-right:2px}
.psb-q label{display:grid; gap:3px; font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:var(--soft)}
.psb-q label.pcheck{grid-auto-flow:column; justify-content:start; align-items:center; letter-spacing:0; text-transform:none; font-size:.83rem; color:var(--ink)}
.psv-q{border-bottom:1px solid var(--line); padding:12px 0}
.psv-label{font-size:.9rem; color:var(--ink); margin-bottom:6px}
.psv-opts{display:grid; gap:5px}
.psv-opts .pcheck{margin:0}
.psv-ovbox summary{list-style:revert}

.ptable-wrap{overflow:hidden; border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  margin-bottom:14px; box-shadow:var(--shadow)}
.ptable-wrap.pscroll,.ptable-wrap{overflow-x:auto}
table.ptable{border-collapse:collapse; width:100%; font-size:.84rem}
.ptable th,.ptable td{text-align:left; padding:6px 12px; vertical-align:middle}
.ptable td{border-bottom:1px solid var(--line)}
.ptable thead th{background:var(--sea); color:var(--on-accent); font-size:.56rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600; padding-top:8px; padding-bottom:8px}
.ptable tbody th{background:var(--sand); font-weight:600; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); padding:6px 13px; border-bottom:1px solid var(--line)}
.ptable tbody tr:hover td{background:var(--sand)}
.ptable tr:last-child td,.ptable tr:last-child th{border-bottom:0}
.ptable td small{color:var(--soft)}
.ptable td .pinput,.ptable td select.pinput{padding:3px 7px; font-size:.8rem; line-height:1.25}
.pempty{padding:12px 14px; color:var(--soft); font-size:.85rem; background:var(--sand); border-radius:var(--r-sm)}

.ptag{display:inline-block; font-size:.58rem; letter-spacing:.04em; padding:4px 11px; border:0;
  border-radius:var(--r-pill); background:var(--clay-soft); color:var(--clay); font-weight:600}
.ptag.ok{background:var(--ok-soft); color:var(--ok)}
.ptag.err{background:var(--danger-soft); color:var(--danger)}
.ptag.pending{background:var(--warn-soft); color:var(--warn)}

/* tier badges */
.ttag{display:inline-block; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  padding:4px 11px; border-radius:var(--r-pill); background:var(--sand); color:var(--soft)}
.ttag.voyager{background:var(--sand); color:var(--ink)}
.ttag.syndicate{background:var(--sea-soft); color:var(--sea)}
.ttag.cartel{background:var(--clay-soft); color:var(--clay)}
.ttag.maestro{background:var(--ok-soft); color:var(--ok)}

/* membership card — one shared underwater-light photo (brand/card-water.jpg)
   tinted per tier in CSS: the tier gradient carries the colour, the photo
   carries the caustic light (mix-blend-mode: luminosity). Retinted for
   "Warm Lounge" (2026-09-15) around the real KOHO teal/clay — a clay/sand
   base, door-teal for the shareholder tiers, and a warm gold top tier.
   Override the photo per tier with --mcard-img if ever needed. */
.mcard{position:relative; isolation:isolate; width:100%; max-width:400px; aspect-ratio:1.585/1;
  border-radius:18px; overflow:hidden; color:#fff; padding:22px 24px; display:flex;
  flex-direction:column; justify-content:space-between; box-shadow:0 22px 50px -22px rgba(21,42,46,.55);
  --c1:#241B10; --c2:#4A3A22; --c3:#7A5E38;
  background:linear-gradient(122deg, var(--c1) 0%, var(--c2) 46%, var(--c3) 82%, var(--c2) 100%)}
/* the shared water photo — colour discarded, luminance blended over the tier gradient */
.mcard::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--mcard-img, url("../../brand/card-water.jpg")) center/cover;
  mix-blend-mode:luminosity; opacity:.92; filter:contrast(1.06) brightness(1.02)}
/* readability: darken the bottom (name + tier) and the top-left corner */
.mcard::after{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,9,8,.30) 0%, rgba(4,9,8,0) 30%, rgba(4,9,8,0) 52%, rgba(4,9,8,.64) 100%),
    radial-gradient(130% 120% at 0% 100%, rgba(4,9,8,.60), rgba(4,9,8,0) 55%),
    radial-gradient(120% 120% at 6% 0%, rgba(0,0,0,.34), rgba(0,0,0,0) 52%)}
/* tier gradients are theme-scoped: Boutique Editorial gets brighter,
   glossier "catalog" stops; Night Concierge gets darker, more
   saturated "jewel-glass" stops. Same hue family per tier so a tier
   stays recognisable across both themes. */
.mcard.mcard-voyager,   :root[data-theme="light"] .mcard.mcard-voyager   {--c1:#2B2013; --c2:#5A4526; --c3:#9A7742}
.mcard.mcard-syndicate, :root[data-theme="light"] .mcard.mcard-syndicate {--c1:#0E2529; --c2:#1B4B52; --c3:#2E8189}
.mcard.mcard-cartel,    :root[data-theme="light"] .mcard.mcard-cartel    {--c1:#0B1E28; --c2:#173B52; --c3:#2C6690}
.mcard.mcard-maestro,   :root[data-theme="light"] .mcard.mcard-maestro   {--c1:#28190A; --c2:#573D10; --c3:#9C7724}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]) .mcard.mcard-voyager   {--c1:#15100A; --c2:#332512; --c3:#5C4420}
  :root:not([data-theme]) .mcard.mcard-syndicate {--c1:#07161A; --c2:#0E2C31; --c3:#1C525A}
  :root:not([data-theme]) .mcard.mcard-cartel    {--c1:#060F16; --c2:#122536; --c3:#1F425E}
  :root:not([data-theme]) .mcard.mcard-maestro   {--c1:#160E04; --c2:#33230A; --c3:#6B4E12}
}
:root[data-theme="dark"] .mcard.mcard-voyager   {--c1:#15100A; --c2:#332512; --c3:#5C4420}
:root[data-theme="dark"] .mcard.mcard-syndicate {--c1:#07161A; --c2:#0E2C31; --c3:#1C525A}
:root[data-theme="dark"] .mcard.mcard-cartel    {--c1:#060F16; --c2:#122536; --c3:#1F425E}
:root[data-theme="dark"] .mcard.mcard-maestro   {--c1:#160E04; --c2:#33230A; --c3:#6B4E12}

/* ---- Night Concierge glass treatment ----
   .mprof-card / .mhero-id sit over the page background, so they get
   the full frosted recipe. .mcard already carries its own embedded
   photo (mix-blend-mode:luminosity above), so it gets a glass rim
   only — there's nothing external to blur. Deliberately NOT applied
   to .ptable-wrap / .emp-panel / .pstat / .pcard / .pbox: dense data
   screens stay solid and legible in both themes. */
:root[data-theme="dark"] .mprof-card,
:root[data-theme="dark"] .mhero-id{
  background:color-mix(in srgb, var(--panel) 58%, transparent);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--brass) 10%, transparent),
    0 26px 60px -24px rgba(0,0,0,.65);
}
:root[data-theme="dark"] .mcard{
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 16%, transparent),
    0 30px 64px -22px rgba(0,0,0,.7);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]) .mprof-card,
  :root:not([data-theme]) .mhero-id{
    background:color-mix(in srgb, var(--panel) 58%, transparent);
    backdrop-filter:blur(24px) saturate(150%);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
    border:1px solid color-mix(in srgb, var(--ink) 16%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent),
      inset 0 0 0 1px color-mix(in srgb, var(--brass) 10%, transparent),
      0 26px 60px -24px rgba(0,0,0,.65);
  }
  :root:not([data-theme]) .mcard{
    border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--ink) 16%, transparent),
      0 30px 64px -22px rgba(0,0,0,.7);
  }
}
@media (prefers-reduced-transparency:reduce){
  :root[data-theme="dark"] .mprof-card, :root[data-theme="dark"] .mhero-id,
  :root:not([data-theme]) .mprof-card, :root:not([data-theme]) .mhero-id{
    background:var(--panel); backdrop-filter:none; -webkit-backdrop-filter:none;
  }
}
.mcard-top{display:flex; align-items:flex-start; gap:12px; position:relative; z-index:1}
.mcard-top img{opacity:.95; filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.mcard-wm{font-family:'Domine',serif; font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  line-height:1.5; color:rgba(255,255,255,.88); text-shadow:0 1px 4px rgba(0,0,0,.45)}
.mcard-wm strong{font-weight:700; letter-spacing:.2em}
.mcard-bot{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; position:relative; z-index:1}
.mcard-holder{border-left:2px solid rgba(255,255,255,.55); padding-left:12px}
.mcard-name{font-size:1rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5)}
.mcard-no{font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-top:5px; text-shadow:0 1px 3px rgba(0,0,0,.5)}
.mcard-no span{display:block; margin-bottom:1px; opacity:.8}
.mcard-no .mcard-id{font-weight:inherit; letter-spacing:.08em}
.mcard-tier{font-family:'Domine',serif; font-size:1.2rem; letter-spacing:.3em; text-transform:uppercase;
  color:#fff; white-space:nowrap; text-shadow:0 1px 6px rgba(0,0,0,.5)}
.mcard-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}

/* ---- cap table (read view) ---- */
.cap table.ptable{font-size:.9rem}
.cap .ptable th,.cap .ptable td{padding:9px 14px}
.cap .ptable thead th{font-size:.6rem; letter-spacing:.1em}
.cap-no{width:52px; color:var(--soft); font-variant-numeric:tabular-nums}
.cap-name{font-weight:500; color:var(--ink)}
.cap-name .ptag{margin-left:8px; transform:translateY(-1px)}
.cap-own{width:38%}
.cap-pay{width:16%; white-space:nowrap; font-size:.8rem}
.cap-own-inner{display:flex; align-items:center; gap:16px; justify-content:flex-end}
.cap-pct{font-weight:700; font-size:1rem; font-variant-numeric:tabular-nums; min-width:74px; text-align:right}
.cap-bar{flex:1 1 auto; max-width:230px; height:9px; border-radius:var(--r-pill); background:var(--sand); overflow:hidden}
.cap-bar>i{display:block; height:100%; border-radius:var(--r-pill); background:var(--clay)}
.cap tr.cap-pinned td{background:var(--sea-soft)}
.cap tr.cap-pinned .cap-name{color:var(--sea); font-style:italic}
.cap tr.cap-pinned .cap-bar>i{background:var(--sea)}
.cap-toolbar{display:flex; justify-content:flex-end; gap:8px; margin-bottom:12px}

.pform-inline{display:flex; gap:9px; flex-wrap:wrap; align-items:end; margin-bottom:14px}
.pform-inline .pfield{min-width:140px}

.pnote{background:var(--sea-soft); border:1px solid var(--sea); border-radius:var(--r-sm);
  padding:10px 15px; color:var(--ink); font-size:.84rem; margin:12px 0}

/* rounded cards for the ad-hoc boxes modules build inline */
.pbox{border:1px solid var(--line); background:var(--panel); border-radius:var(--r); padding:12px 15px;
  margin-bottom:10px; box-shadow:var(--shadow)}

.pspin{width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--sea); border-radius:50%; animation:pspin .8s linear infinite}
@keyframes pspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pspin{animation:none}}

@media(max-width:820px){
  .pshell{grid-template-columns:1fr}
  .pnav{position:fixed; inset:56px auto 0 0; width:250px; transform:translateX(-100%); transition:transform .2s; z-index:15; box-shadow:0 0 46px rgba(21,42,46,.25)}
  .pnav.open{transform:none}
  .pnav-toggle{display:block}
  .pmain{padding:24px 20px 52px}
}

/* ---- Email & campaigns → Lists (modules/lists.js, portal 1.39.0) ---- */
.el-root{display:flex;flex-direction:column;gap:14px}
.el-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.el-tools .pinput{flex:1 1 260px;max-width:none}
.el-sec{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--clay);margin:6px 0 2px}
.el-muted{font-size:.8rem;color:var(--soft)}
.el-cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.el-cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1100px){.el-cards3,.el-cards4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.el-cards3,.el-cards4{grid-template-columns:minmax(0,1fr)}}
.el-card{display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;color:var(--ink);font:inherit;cursor:pointer}
.el-card:hover,.el-card:focus-visible{border-color:var(--sea)}
.el-card-top{display:flex;justify-content:space-between;gap:8px}
.el-card-title{font-family:'Domine',serif;font-weight:600;font-size:1.02rem}
.el-card-add{border-style:dashed;align-items:center;justify-content:center;text-align:center;color:var(--sea)}
.el-plus{font-size:1.6rem}
.el-big{font-family:'Domine',serif;font-weight:700;font-size:2.4rem;line-height:1}
.el-mid{font-family:'Domine',serif;font-weight:700;font-size:1.6rem}
.el-bar{height:6px;border-radius:999px;background:var(--sand);overflow:hidden}
.el-bar span{display:block;height:100%;background:var(--ok)}
.el-strip{display:flex;gap:22px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
.el-stat{display:flex;flex-direction:column}
.el-crumb{font-size:.82rem;color:var(--soft)}
.el-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.el-head h2{margin:0;font-family:'Domine',serif;flex-grow:1}
.el-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media(max-width:1100px){.el-split{grid-template-columns:minmax(0,1fr)}}
.el-row{cursor:pointer}.el-row:hover td,.el-row.on td{background:var(--sea-soft)}
.el-chk{width:34px;padding-right:0!important}.el-chk input{width:16px;height:16px;accent-color:var(--sea);cursor:pointer;vertical-align:middle}
.el-bulk{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--sea-soft);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;margin:10px 0;position:sticky;top:0;z-index:2}
.el-bulk[hidden]{display:none}
.el-bulk a{font-size:.9em}
.el-preview{margin-top:6px}.el-preview .ptable{font-size:.88rem}
.el-find{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto}
.el-find-row{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r)}
.el-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;background:var(--line)}
.el-dot-koho{background:var(--sea)}.el-dot-somavita{background:#2F5D50}.el-dot-investors{background:var(--clay)}
.el-pager{display:flex;gap:8px;align-items:center;padding:10px 12px}
.el-side{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px;position:sticky;top:80px}
.el-side-name{font-family:'Domine',serif;font-size:1.2rem;font-weight:600}
.el-side-foot{margin-top:8px}
.el-consents{display:flex;flex-direction:column;gap:2px}
.el-consent{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0}
.el-switch{width:40px;height:24px;border-radius:999px;border:0;background:var(--line);position:relative;cursor:pointer;flex:none}
.el-switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--panel);transition:left .15s}
.el-switch.on{background:var(--sea)}.el-switch.on::after{left:19px}
.el-switch:disabled{opacity:.55;cursor:default}
.el-email{font-size:.88rem;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.el-tag-bad{background:var(--danger-soft);color:var(--danger)}
.el-profile-head{display:flex;gap:16px;align-items:center}
.el-profile-head h2{margin:0;font-family:'Domine',serif}
.el-avatar{width:58px;height:58px;border-radius:50%;background:var(--sea);color:var(--on-accent);display:grid;place-items:center;font-family:'Domine',serif;font-weight:700;font-size:1.2rem}
.el-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.el-cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media(max-width:1100px){.el-cols3{grid-template-columns:minmax(0,1fr)}}
.el-mini{gap:8px}
.el-ev{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--sand);font-size:.86rem}
.el-build{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
@media(max-width:1000px){.el-build{grid-template-columns:minmax(0,1fr)}}
.el-build-main{display:flex;flex-direction:column;gap:10px}
.el-name{font-family:'Domine',serif;font-weight:700;font-size:1.6rem;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);padding:4px 0}
.el-rules{display:flex;flex-direction:column;gap:6px}
.el-rule{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.el-and{font-size:.66rem;letter-spacing:.12em;font-weight:600;color:var(--clay);padding-left:16px}
.el-pill{padding:7px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:.88rem}
.el-pill-k{background:var(--sea-soft);color:var(--sea);font-weight:600;border-color:transparent}
.el-x{margin-left:auto;border:0;background:none;color:var(--soft);cursor:pointer;font-size:1rem;padding:6px}
.el-adders{display:flex;gap:8px;flex-wrap:wrap}
.el-adders .pinput{max-width:230px}
.el-build-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.el-build-foot .pinput{max-width:220px}
.el-count{background:var(--sea);color:var(--on-accent);border-radius:18px;padding:20px}
.el-count-n{font-family:'Domine',serif;font-weight:700;font-size:3rem;line-height:1.05}
.el-muted-inv{font-size:.8rem;opacity:.85}.el-count-sub{font-size:.86rem;opacity:.9}
.el-modal-back{position:fixed;inset:0;background:rgba(23,38,42,.4);z-index:60;display:grid;place-items:center;padding:16px}
.el-modal{background:var(--panel);color:var(--ink);border-radius:20px;padding:22px 24px;width:min(620px,100%);max-height:90vh;overflow:auto;display:flex;flex-direction:column;gap:12px}
.el-modal-head{display:flex;justify-content:space-between;align-items:center}
.el-modal-head h3{margin:0;font-family:'Domine',serif}
.el-modal-foot{display:flex;gap:8px;justify-content:flex-end}
.el-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.el-note{font-size:.84rem;color:var(--warn);background:var(--warn-soft);border-radius:12px;padding:0 12px}
.el-note:not(:empty){padding:10px 12px}

/* ---- Campaign composer: HTML mode, preview & check (portal 1.40.0) ---- */
.cm-label{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:.84rem;color:var(--soft)}
.cm-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel)}
.cm-seg-b{border:0;background:none;padding:6px 14px;font:inherit;font-size:.82rem;color:var(--soft);cursor:pointer}
.cm-seg-b.on{background:var(--sea);color:var(--on-accent);font-weight:600}
.cm-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.cm-tools .pinput{max-width:320px}
.cm-upload{position:relative;overflow:hidden;cursor:pointer}
.cm-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.cm-code{width:100%;box-sizing:border-box;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--ink);color:var(--bone);border-radius:12px;min-height:280px}
.cm-side{max-width:700px;margin:18px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px}
.cm-side-head{display:flex;gap:8px;align-items:center}
.cm-side-head strong{flex-grow:1;font-family:'Domine',serif}
.cm-issue{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--sand);font-size:.86rem}
.cm-ic{width:18px;font-weight:700;flex:none}
.cm-block .cm-ic{color:var(--danger)}.cm-warn .cm-ic{color:var(--warn)}.cm-ok .cm-ic{color:var(--ok)}
.cm-frame{width:100%;height:640px;border:1px solid var(--line);border-radius:12px;background:#fff}

/* ---- Template mode + photo library (portal 1.41.0) ---- */
.tp-box{display:flex;flex-direction:column;gap:14px}
.tp-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.tp-card{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);font:inherit;font-size:.8rem;cursor:pointer}
.tp-card strong{font-size:.9rem}
.tp-card:hover{border-color:var(--sea)}
.tp-card.on{border-color:var(--sea);box-shadow:inset 0 0 0 1px var(--sea)}
.tp-brand{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sea);font-weight:600}
.tp-fields{display:flex;flex-direction:column;gap:12px}
.tp-fields>label{display:flex;flex-direction:column;gap:4px;font-size:.84rem;color:var(--soft)}
.tp-hint{font-size:.74rem}
.tp-nested{gap:8px}
.tp-items{border:1px solid var(--line);border-radius:14px;padding:10px 14px 14px;margin:0;display:flex;flex-direction:column;gap:10px}
.tp-items legend{font-size:.84rem;color:var(--soft);padding:0 6px}
.tp-item{background:var(--sand);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.tp-item-head{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.tp-item-head strong{flex-grow:1;font-size:.84rem}
.tp-img{display:flex;flex-direction:column;gap:6px}
.tp-img-label{font-size:.84rem;color:var(--soft)}
.tp-img-row{display:flex;gap:12px;align-items:flex-start}
.tp-img-row img,.tp-img-empty{width:120px;height:80px;object-fit:cover;border-radius:10px;flex:none;background:var(--sand)}
.tp-img-empty{display:grid;place-items:center;font-size:.76rem;color:var(--soft);border:1px dashed var(--line)}
.tp-img-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex-grow:1;min-width:0}
.tp-img-tools .pinput{flex-basis:100%}
.ph-modal{width:min(900px,100%)}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.ph-card{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.ph-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--sand)}
.ph-pick{display:block;padding:0;border:0;background:none;cursor:pointer}
.ph-pick:hover img,.ph-pick:focus-visible img{outline:3px solid var(--sea);outline-offset:-3px}
.ph-card figcaption{padding:8px;display:flex;flex-direction:column;gap:4px}
.ph-alt{border:0;border-bottom:1px solid transparent;background:none;font:inherit;font-size:.8rem;color:var(--ink);padding:2px 0;width:100%}
.ph-alt:focus{outline:none;border-bottom-color:var(--sea)}
.ph-alt-ro{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* website photos: description comes from the site, read-only */
.ph-meta{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;color:var(--soft);gap:6px}
.ph-del{border:0;background:none;color:var(--danger);font:inherit;font-size:.72rem;cursor:pointer;padding:2px 0}
@media (max-width:560px){.tp-img-row{flex-direction:column}.tp-img-row img,.tp-img-empty{width:100%;height:auto;aspect-ratio:3/2}}

/* ---- Blocks mode: palette + drag & drop list (portal 1.42.0) ---- */
.bk{display:flex;flex-direction:column;gap:10px}
.bk-help{font-size:.78rem;margin:0}
.bk-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}
.bk-tile{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font:inherit;font-size:.8rem;cursor:grab;text-align:left}
.bk-tile:hover{border-color:var(--sea)}
.bk-tile:active{cursor:grabbing}
.bk-ic{display:inline-grid;place-items:center;min-width:26px;height:22px;border-radius:6px;background:var(--sand);color:var(--sea);font-size:.72rem;font-weight:700;flex:none}
.bk-list{list-style:none;margin:0;padding:10px;border:1px dashed var(--line);border-radius:16px;min-height:120px;display:flex;flex-direction:column;gap:6px;background:color-mix(in srgb,var(--sand) 35%,var(--panel))}
.bk-list.bk-over{border-color:var(--sea)}
.bk-empty{display:grid;place-items:center;min-height:96px;color:var(--soft);font-size:.86rem}
.bk-marker{height:3px;border-radius:3px;background:var(--sea);margin:-1px 0}
.bk-card{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.bk-card.open{border-color:var(--sea)}
.bk-card.dragging{opacity:.4}
.bk-head{display:flex;align-items:center;gap:4px;padding:4px 6px}
.bk-handle{cursor:grab;color:var(--soft);padding:4px 6px;font-size:1rem;user-select:none;-webkit-user-select:none;touch-action:none}
@media (pointer:coarse){.bk-handle{padding:10px 12px;font-size:1.2rem}}
.bk-title{flex-grow:1;min-width:0;display:flex;align-items:center;gap:8px;border:0;background:none;padding:6px 4px;font:inherit;font-size:.86rem;color:var(--ink);cursor:pointer;text-align:left}
.bk-sum{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;min-width:0}
.bk-act{border:0;background:none;color:var(--soft);font:inherit;font-size:.86rem;width:28px;height:28px;border-radius:8px;cursor:pointer;flex:none}
.bk-act:hover:not(:disabled){background:var(--sand);color:var(--ink)}
.bk-act:disabled{opacity:.3;cursor:default}
.bk-body{padding:4px 14px 14px;border-top:1px solid var(--sand)}
@media (max-width:560px){.bk-sum{display:none}}

/* ---- Email reports (portal 1.43.0) ---- */
.rp-brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:16px}
.rp-brand{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.rp-brand-name{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sea);font-weight:700}
.rp-big span{font-family:'Domine',serif;font-size:1.7rem;font-weight:700;color:var(--ink)}
.rp-big small{color:var(--soft);font-size:.8rem}
.rp-line{font-size:.8rem}
.rp-fig{margin:0 0 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.rp-chart{width:100%;height:auto;display:block}
.rp-grid{stroke:var(--line);stroke-width:1}
.rp-axis{fill:var(--soft);font-size:10px;font-family:inherit}
.rp-open{fill:none;stroke:var(--sea);stroke-width:2.5}
.rp-click{fill:none;stroke:var(--warn);stroke-width:2.5}
.rp-open-dot{fill:var(--sea)}.rp-click-dot{fill:var(--warn)}
.rp-open-bar{fill:color-mix(in srgb,var(--sea) 55%,transparent)}.rp-click-bar{fill:var(--warn)}
.rp-legend{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--soft);margin-top:6px;flex-wrap:wrap}
.rp-key{display:inline-block;width:12px;height:4px;border-radius:2px}
.rp-key-open{background:var(--sea)}.rp-key-click{background:var(--warn);margin-left:8px}
.rp-link{border:0;background:none;padding:0;font:inherit;color:var(--sea);text-decoration:underline;cursor:pointer;text-align:left}
.rp-title{font-family:'Domine',serif;margin:0 0 4px;font-size:1.4rem;text-transform:none;letter-spacing:normal;color:var(--ink)}
.rp-h4{margin:20px 0 8px;font-size:.92rem}
.rp-funnel{display:flex;flex-direction:column;gap:8px;max-width:640px;margin-top:12px}
.rp-step{display:grid;grid-template-columns:80px 1fr 130px;gap:10px;align-items:center;font-size:.84rem}
.rp-bar{height:14px;background:var(--sand);border-radius:7px;overflow:hidden}
.rp-fill{display:block;height:100%;background:var(--sea);border-radius:7px}
.rp-step-num{font-variant-numeric:tabular-nums}
.rp-neg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--soft);margin-top:12px}
.rp-url{word-break:break-all;font-size:.8rem}
@media (max-width:560px){.rp-step{grid-template-columns:70px 1fr;}.rp-step-num{grid-column:2}}

/* Booking changes (portal 1.47.0): My bookings actions + Operations → Booking changes */
.bc-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.bc-small{font-size:.82rem}
.bc-price{margin:4px 0}
.bc-credits{margin-bottom:18px;display:flex;flex-direction:column;gap:6px}
.bc-credit code,.bc-card code{font-size:.95em;padding:1px 6px;border-radius:4px;background:var(--sea-soft)}
.bc-card{margin-bottom:12px;display:flex;flex-direction:column;gap:6px}
.bc-head{display:flex;gap:10px;align-items:center;justify-content:space-between}
.bc-note{font-style:italic}
.bc-decide{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}.bc-decide .pinput{flex:1 1 280px}

/* Revenue plan & rates (modules/revenue.js) */
/* Operations → Revenue plan & rates (modules/revenue.js, 2026-10-05) */
.rv h2{margin:22px 0 8px}
.rv-head{background:var(--sea-soft);border-color:transparent}
.rv-head p{margin:2px 0}
.rv-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.rv-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.rv-tile b{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.rv-tile small{color:var(--soft);font-size:12px}
.rv-bars{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:6px;align-items:end;height:170px;padding:6px 0 0;border-bottom:1px solid var(--line)}
.rv-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px;min-width:0}
.rv-bar i{display:block;width:100%;border-radius:4px 4px 0 0;background:var(--sea);opacity:.75}
.rv-bar i.lo{background:var(--danger)}
.rv-bar i.hi{background:var(--ok);opacity:1}
.rv-bar .v{font-size:11px;font-variant-numeric:tabular-nums}
.rv-bar .d{font-size:10px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transform:translateY(16px);height:0}
.rv-legend{margin-top:22px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px}
.rv-legend span{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--sea);opacity:.75;margin-left:8px}
.rv-legend span.lo{background:var(--danger)}.rv-legend span.hi{background:var(--ok);opacity:1}
.rv-heat td.num{text-align:right;font-variant-numeric:tabular-nums;background:color-mix(in srgb, var(--sea) calc(var(--k, 0) * 55%), var(--panel))}
.rv-heat th:not(:first-child){text-align:right}
.rv-codes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.rv-sugg{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:10px}
.rv-sugg p{margin:4px 0 0}
.rv-sugg.rv-done{opacity:.7}.rv-sugg.rv-skipped{opacity:.5}
.rv-st{display:flex;gap:4px;flex-shrink:0}
@media (max-width:720px){.rv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.rv-sugg{flex-direction:column}.rv-bar .v{font-size:9px}}
.rv-col{position:relative;width:100%;flex:1;display:flex;align-items:flex-end}
.rv-col i{width:100%}
.rv-col .ly{position:absolute;left:-2px;right:-2px;height:0;border-top:2px dashed var(--clay)}
.rv-legend span.lyk{background:none;border-top:2px dashed var(--clay);height:0;border-radius:0;opacity:1}
.rv-mt{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rv-gain{margin-left:auto;font-weight:500;color:var(--ok);font-variant-numeric:tabular-nums}
/* Plan header, five numbers, Plan tab (owner's mix, 2026-10-05) */
.rv-plan{background:var(--sea);color:var(--on-accent);border-color:transparent}
.rv-plan h2{margin:4px 0 12px;font-weight:500;color:var(--on-accent)}
.rv-plan .rv-k{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.rv-pt{display:flex;justify-content:space-between;gap:10px;font-size:12px;opacity:.95;margin-top:8px}
.rv-pb{position:relative;display:flex;height:9px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.18);margin-top:4px}
.rv-pb i{display:block;height:100%;background:#6FD0CB}.rv-pb i.open{background:rgba(111,208,203,.45)}.rv-pb i.meas{background:#9BE3C0}
.rv-pb .mark{position:absolute;top:0;bottom:0;width:2px;background:#FFFBF3}
.rv-ps{margin:3px 0 0;font-size:11px;opacity:.8}
.rv-tiles5{grid-template-columns:repeat(5,minmax(0,1fr))}
/* Website-only holds (2026-10-15) */
.rv-hold{margin-bottom:12px}.rv-hold p{margin:6px 0 0}.rv-hold .ptable-wrap{margin:10px 0}
.rv-hold.rv-focus{outline:2px solid var(--sea);outline-offset:2px}
.rv-h-done,.rv-h-declined,.rv-h-expired{opacity:.65}
.rv-tile .rv-tl{color:var(--ink);font-weight:600}
.rv-pill{align-self:flex-start;font-size:11px;font-weight:600;border-radius:999px;padding:1px 8px;margin-top:4px}
.rv-pill.rv-ok{background:color-mix(in srgb,var(--ok) 18%,var(--panel));color:var(--ok)}
.rv-pill.rv-warn{background:color-mix(in srgb,var(--clay) 18%,var(--panel));color:var(--clay)}
.rv-pill.rv-bad{background:color-mix(in srgb,var(--danger) 16%,var(--panel));color:var(--danger)}
.rv-pill.rv-unk{background:var(--line);color:var(--soft)}
.rv-idea{display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,260px);gap:12px;align-items:start;margin-bottom:8px}
.rv-idea p{margin:3px 0 0}
.rv-idea-in{display:flex;flex-direction:column;gap:6px}
.rv-sq{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;font-weight:600;font-size:13px;border:1px solid transparent}
.rv-s-moving{background:var(--sea);color:#fff}.rv-s-running{background:#6FD0CB;color:#0F2124}.rv-s-attention{background:#F6D9A8;color:#6E4A0C}
.rv-s-waiting{background:var(--line);color:var(--soft)}.rv-s-notstarted{background:var(--panel);color:var(--soft);border-color:var(--line)}.rv-s-done{background:var(--ok);color:#fff}
.rv-q{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.rv-q p{margin:0}
.rv-q textarea{width:100%;resize:vertical}
.rv-sugg.rv-later{opacity:.8}
@media (max-width:860px){.rv-tiles5{grid-template-columns:repeat(2,minmax(0,1fr))}.rv-idea{grid-template-columns:34px minmax(0,1fr)}.rv-idea-in{grid-column:1/-1}}
.ptable td.num,.ptable th.num{text-align:right;font-variant-numeric:tabular-nums}

.pinput.pinput-missing{border-color:#C0563F;box-shadow:0 0 0 3px rgba(192,86,63,.25)}

/* ---- Staff tasks (modules/tasks.js, 2026-10-06) ---- */
.tk-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.tk-tab{font:inherit;font-size:.8rem;padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--soft);cursor:pointer}
.tk-tab.on{background:var(--sea);border-color:var(--sea);color:var(--on-accent);font-weight:600}
.tk-tab:focus-visible,.tk-guest:focus-visible,.tk-link:focus-visible{outline:2px solid var(--sea);outline-offset:2px}
.tk-date{max-width:160px}
.tk-list{display:flex;flex-direction:column;gap:8px}
.tk-row{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:var(--r-sm);padding:10px 12px}
.tk-row.tk-urgent{border-left-color:var(--danger);background:var(--danger-soft)}
.tk-row.tk-over{border-left-color:var(--danger)}
.tk-row.tk-done{border-left-color:var(--ok);opacity:.72}
.tk-title{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.tk-time{font-variant-numeric:tabular-nums;color:var(--soft);font-size:.86rem;min-width:3.2em}
.tk-flag{font-size:.66rem;font-weight:700;letter-spacing:.08em;color:var(--danger);border:1px solid var(--danger);border-radius:var(--r-pill);padding:1px 7px}
.tk-flag-over{color:var(--warn);border-color:var(--warn)}
.tk-rep{color:var(--sea);font-weight:700}
.tk-meta{font-size:.8rem;color:var(--soft);margin-top:3px}
.tk-guest{font:inherit;background:none;border:0;padding:0;color:var(--sea);text-decoration:underline;cursor:pointer}
.tk-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.tk-sel{max-width:190px;padding:4px 8px;font-size:.8rem}
.tk-note{max-width:220px;padding:4px 8px;font-size:.8rem}
.tk-link{font:inherit;font-size:.8rem;background:none;border:0;color:var(--sea);cursor:pointer;padding:0}
.tk-comments{margin-top:8px;padding:8px 10px;border-radius:var(--r-sm);background:var(--sea-soft)}
.tk-comment{font-size:.84rem;margin:0 0 6px}
.tk-day{margin:14px 0 4px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.tk-form{margin:0 0 12px}
/* Member card → Apple / Google Wallet (2026-10-07) */
.mwallet{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* Google's own "Add to Google Wallet" artwork, unchanged, 48px tall (Wallet brand rules, 2026-10-15) */
/* …and Apple's own "Add to Apple Wallet" badge, the same way (Apple's badge rules, 2026-10-15) */
.gw-official,.aw-official{display:inline-block;line-height:0;border-radius:999px;flex:none;padding:0;border:0;background:none;cursor:pointer}
.aw-official{border-radius:8px}
.gw-official img,.aw-official img{display:block;height:48px;width:auto;max-width:none}
.gw-official:disabled,.aw-official:disabled{cursor:wait}
.mwallet-note{flex-basis:100%;font-size:12px;color:var(--soft)}

/* ---- My membership, layout "3" (owner, 2026-10-11): greeting beside the card, one stat row, benefits menu,
   two decision tiles, a pill menu. --tier follows the member's tier (card colours), light and dark. ---- */
.mx,.mx-pills{--tier:#8A6A1F; --tier-1:#E6CFA2; --tier-2:#C9A56C}
.mx{display:grid; gap:22px; margin-bottom:22px}
:is(.mx,.mx-pills).mtier-voyager{--tier:#7D5E3C; --tier-1:#D9C3A0; --tier-2:#A9855C}
:is(.mx,.mx-pills).mtier-syndicate{--tier:#1B6E78; --tier-1:#9FE3DD; --tier-2:#3FA9A4}
:is(.mx,.mx-pills).mtier-cartel{--tier:#2C6690; --tier-1:#A9CBEA; --tier-2:#4E8FC4}
:is(.mx,.mx-pills).mtier-maestro{--tier:#8A6A1F; --tier-1:#E6CFA2; --tier-2:#C9A56C}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]) :is(.mx,.mx-pills).mtier-voyager{--tier:#D9B382}
  :root:not([data-theme]) :is(.mx,.mx-pills).mtier-syndicate{--tier:#5FC4BE}
  :root:not([data-theme]) :is(.mx,.mx-pills).mtier-cartel{--tier:#7FB3E0}
  :root:not([data-theme]) :is(.mx,.mx-pills).mtier-maestro,:root:not([data-theme]) :is(.mx,.mx-pills).mtier-none{--tier:#D9BE8F}
}
:root[data-theme="dark"] :is(.mx,.mx-pills).mtier-voyager{--tier:#D9B382}
:root[data-theme="dark"] :is(.mx,.mx-pills).mtier-syndicate{--tier:#5FC4BE}
:root[data-theme="dark"] :is(.mx,.mx-pills).mtier-cartel{--tier:#7FB3E0}
:root[data-theme="dark"] :is(.mx,.mx-pills).mtier-maestro,:root[data-theme="dark"] :is(.mx,.mx-pills).mtier-none{--tier:#D9BE8F}
.mx-split{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; align-items:center}
.mx-hello{display:grid; gap:10px; align-content:center}
.mx-eb{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tier); font-weight:500}
.mx-center{text-align:center; display:block}
.mx-greet{font-family:'Domine',serif; font-weight:500; font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.08; color:var(--ink); margin:0}
.mx-sub{color:var(--soft); font-size:.85rem; overflow-wrap:anywhere}
.mx-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:6px}
.mx-actions .mwallet{margin:0}
.mx-book{display:inline-flex; align-items:center; border-radius:999px; padding:11px 20px; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  text-decoration:none; color:#1c1a14; background:linear-gradient(120deg,var(--tier-1),var(--tier-2) 60%,var(--tier-1)); box-shadow:0 4px 14px rgba(0,0,0,.18)}
.mx-card .mcard{max-width:420px; width:100%; margin-inline:auto}
.mx-stats{display:grid; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.mx-stats > div{display:grid; gap:6px; text-align:center; padding:18px 8px; align-content:center}
.mx-stats > div + div{border-left:1px solid var(--line)}
.mx-num{font-family:'Domine',serif; font-size:2.1rem; line-height:1; color:var(--tier)}
.mx-num small{font-size:.95rem; color:var(--soft)}
.mx-num-sm{font-size:1.15rem; color:var(--ink)}
.mx-k{font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--soft)}
.mx-k a{color:var(--tier)}
.mx-ben{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.mx-ben > div{display:grid; gap:4px; text-align:center; padding:6px 16px}
.mx-ben > div + div{border-left:1px solid var(--line)}
.mx-ben .mx-num{font-size:2.5rem}
.mx-k2{color:var(--soft); font-size:.85rem}
.mx-tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.mx-tile{display:flex; flex-direction:column; gap:8px; text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; cursor:pointer; color:var(--ink); font:inherit}
.mx-tile:hover{border-color:var(--tier)}
.mx-tile-tier{background:color-mix(in srgb, var(--tier) 10%, var(--panel)); border-color:color-mix(in srgb, var(--tier) 40%, var(--line))}
.mx-tile-v{font-family:'Domine',serif; font-size:1.25rem}
.mx-tile-p{color:var(--soft); font-size:.85rem}
.mx-go{color:var(--tier); font-size:.8rem}
.mx-pills.ptabs{display:flex; flex-wrap:wrap; gap:8px; border-bottom:0; justify-content:center}
.mx-pills .ptab{border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:.78rem}
.mx-pills .ptab.on{border-color:var(--tier); color:var(--tier)}
@media(max-width:820px){.mx-split{grid-template-columns:1fr}.mx-card{order:-1}}
@media(max-width:520px){.mx-stats{grid-template-columns:1fr !important}.mx-stats > div + div{border-left:0; border-top:1px solid var(--line)}
  .mx-ben{grid-template-columns:1fr}.mx-ben > div + div{border-left:0; border-top:1px solid var(--line); padding-top:12px}}

/* ---- My membership, layout "C" (owner, 2026-10-11): slim header, card ~30 % smaller with small wallet
   buttons, one row of six numbers in two groups, side menu with live hints. ---- */
.mxc-side.mtier-voyager,.mxc-nav.mtier-voyager{--tier:#7D5E3C}
.mxc-side,.mxc-nav{--tier:#8A6A1F}
.mxc-side.mtier-syndicate{--tier:#1B6E78}.mxc-side.mtier-cartel{--tier:#2C6690}
@media(prefers-color-scheme:dark){
  :root:not([data-theme]) .mxc-side{--tier:#D9BE8F}
  :root:not([data-theme]) .mxc-side.mtier-voyager{--tier:#D9B382}
  :root:not([data-theme]) .mxc-side.mtier-syndicate{--tier:#5FC4BE}
  :root:not([data-theme]) .mxc-side.mtier-cartel{--tier:#7FB3E0}
}
:root[data-theme="dark"] .mxc-side{--tier:#D9BE8F}
:root[data-theme="dark"] .mxc-side.mtier-voyager{--tier:#D9B382}
:root[data-theme="dark"] .mxc-side.mtier-syndicate{--tier:#5FC4BE}
:root[data-theme="dark"] .mxc-side.mtier-cartel{--tier:#7FB3E0}
.mxc{gap:16px}
.mxc-head{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px; align-items:center}
.mxc-head .mprof-av{width:auto}
.mxc-hello{display:grid; gap:4px; min-width:0}
.mxc .mx-greet{font-size:clamp(1.25rem,2.4vw,1.6rem)}
.mxc .mx-sub{font-size:.8rem}
.mxc .mx-sub .mx-eb{font-size:.58rem}
.mx-link{color:var(--tier); text-decoration:none}
.mxc-card{display:grid; gap:8px; justify-items:center}
.mxc-card .mcard{width:270px; max-width:100%}
.mwallet-sm{margin:0; gap:6px; justify-content:center}
.mx-six{display:grid; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.mx-six > div{display:grid; gap:2px; text-align:center; padding:10px 6px}
.mx-six > div + div{border-left:1px solid var(--line)}
.mx-grp{font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tier); min-height:.7rem}
.mx-v{font-family:'Domine',serif; font-size:1.35rem; line-height:1.1; color:var(--tier)}
.mx-v small{font-size:.7rem; color:var(--soft)}
.mx-plain{font-size:.92rem; color:var(--ink)}
.mx-six .mx-k a{color:var(--tier)}
.mxc-side{display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; align-items:start; margin-bottom:22px}
.mxc-nav{display:grid; gap:2px; position:sticky; top:12px}
.mxc-item{display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:9px 11px; border:0; border-radius:8px; background:none; color:var(--soft); font:inherit; font-size:.84rem; text-align:left; cursor:pointer}
.mxc-item em{font-style:normal; font-size:.7rem; color:var(--tier); white-space:nowrap}
.mxc-item:hover{color:var(--ink)}
.mxc-item.on{background:var(--panel); color:var(--ink); box-shadow:inset 2px 0 0 var(--tier)}
.mxc-panel{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; min-width:0}
.mxc-title{font-family:'Domine',serif; font-weight:500; font-size:1.1rem; margin:0 0 10px}
@media(max-width:900px){.mxc-head{grid-template-columns:auto minmax(0,1fr)}.mxc-card{grid-column:1/-1; justify-items:start}
  .mx-six{grid-template-columns:repeat(3,minmax(0,1fr)) !important}.mx-six > div:nth-child(4){border-left:0}.mx-six > div:nth-child(n+4){border-top:1px solid var(--line)}
  .mxc-side{grid-template-columns:1fr}.mxc-nav{position:static; grid-auto-flow:column; overflow-x:auto}.mxc-item{white-space:nowrap}}

/* "Your details" tab, layout A (owner, 2026-10-11): cards, aligned labels, switches, small Saves. */
.yd-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start}
@media (max-width:980px){.yd-grid{grid-template-columns:minmax(0,1fr)}}
.yd-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; display:grid; gap:14px; min-width:0}
.yd-card.wide{grid-column:1/-1}
.yd-card h3{margin:0; font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:1.25rem; letter-spacing:0; text-transform:none; color:var(--ink); display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.yd-card h3 small{font:400 .74rem 'Public Sans',sans-serif; color:var(--soft)}
.yd-form{display:grid; gap:14px; margin:0}
.yd-g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 14px}
.yd-g3 .span2{grid-column:span 2}
@media (max-width:760px){.yd-g3{grid-template-columns:minmax(0,1fr)}.yd-g3 .span2{grid-column:auto}}
.yd-f{display:grid; gap:6px; align-content:start; min-width:0; margin:0}
.yd-lab{font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); font-weight:600; line-height:1.3}
.yd-f .pinput{width:100%; margin:0}
.yd-foot{display:flex; justify-content:flex-end; align-items:center; gap:12px}
.yd-foot .pmsg{margin:0; font-size:.76rem; color:var(--soft)}
.yd-foot .pmsg.ok{color:var(--ok)} .yd-foot .pmsg.err{color:var(--danger)}
.yd-rows{display:grid}
.yd-row{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 0; border-top:1px solid var(--line); cursor:default}
.yd-rows>.yd-row:first-child{border-top:0; padding-top:2px}
label.yd-row{cursor:pointer}
.yd-row b{display:block; font-weight:500; font-size:.86rem}
.yd-row em{display:block; font-style:normal; color:var(--soft); font-size:.76rem}
.yd-row .pbtn{flex:none}
.yd-sub{display:grid; gap:10px; padding:4px 0 12px}
.yd-inline{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.yd-sw{appearance:none; -webkit-appearance:none; flex:none; width:38px; height:22px; margin:0; border-radius:99px; background:var(--line); position:relative; cursor:pointer; transition:background .2s}
.yd-sw::after{content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--ink); transition:left .2s, background .2s}
.yd-sw:checked{background:var(--sea)}
.yd-sw:checked::after{left:19px; background:var(--on-accent)}
.yd-sw:focus-visible{outline:2px solid var(--sea); outline-offset:2px}
.yd-seg{display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; border:1px solid var(--line); border-radius:999px; justify-self:start}
.yd-seg button{font:inherit; font-size:.78rem; border:0; background:none; color:var(--soft); padding:6px 13px; border-radius:999px; cursor:pointer}
.yd-seg button.on{background:var(--sea); color:var(--on-accent)}
.yd-seg button:focus-visible{outline:2px solid var(--sea); outline-offset:1px}
.yd-g2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px}
.yd-g2 .full,.yd-g3 .full{grid-column:1/-1}
.yd-g2 .yd-row{padding:6px 0; border-top:0}
.yd-f textarea.pinput{resize:vertical; min-height:62px}
@media (max-width:620px){.yd-g2{grid-template-columns:minmax(0,1fr)}}
.yd-fees{display:grid; gap:4px; padding:12px 14px; border-radius:10px; background:var(--clay-soft); border-left:2px solid var(--clay); font-size:.78rem; line-height:1.55; color:var(--soft)}
.yd-fees b{color:var(--ink); font-weight:600; font-size:.8rem}
/* Email senders: recipients per email (Admin → Setup, 2026-10-13) */
.mrec-group td{background:var(--sand); padding-top:9px; padding-bottom:9px; font-size:.82rem}
.mrec-on{display:inline-flex; align-items:center; gap:6px; min-height:44px; cursor:pointer}
.mrec-on input{width:18px; height:18px; accent-color:var(--sea)}
.mrec-edit > td{padding-top:0 !important}
.mrec-box{display:grid; gap:10px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--panel)}
.mrec-line{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.mrec-label{flex:0 0 42px; font-size:.74rem; font-weight:600; color:var(--soft)}
.mrec-chips{display:contents}
.mrec-chip{display:inline-flex; align-items:center; gap:2px; padding:3px 4px 3px 10px; border-radius:999px; background:var(--sea-soft); color:var(--ink); font-size:.8rem; max-width:100%; overflow-wrap:anywhere}
.mrec-x{width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:var(--sea); font:inherit; font-size:1rem; line-height:1; cursor:pointer}
.mrec-x:hover{background:var(--panel)}
.pinput.mrec-add{width:220px; max-width:100%; padding-top:6px; padding-bottom:6px; font-size:.8rem}
.mrec-actions{display:flex; flex-wrap:wrap; gap:8px}
/* UAT 2026-10 · surveys: header picture, description line breaks, public link */
.psv-img{display:block; max-width:100%; width:auto; height:auto; max-height:360px; border-radius:var(--r-sm)}
.psv-desc{white-space:pre-line; overflow-wrap:anywhere}
.psv-sharebox{display:grid; gap:6px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel)}
.psv-share{display:grid; gap:6px; margin-top:10px}
.psv-sharebox .psv-share{margin-top:2px}
.psv-share-label{font-size:.78rem; color:var(--soft)}
.psv-share-row{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.psv-share-row .pinput{flex:1 1 260px; min-width:0; font-size:.8rem}
.psv-sharebox label.pcheck{display:flex; align-items:center; margin:0; letter-spacing:0; text-transform:none; font-size:.86rem; font-weight:500; color:var(--ink)}
.psv-sharebox label.pcheck input{width:18px; height:18px; flex:none; margin:0; padding:0; accent-color:var(--sea)}

/* UAT 2026-10 · lists + member card */
/* Lists → Import: message beside the buttons, the field at fault outlined. */
.el-foot-wrap{flex-wrap:wrap; align-items:center}
.el-modal-foot .el-foot-msg{margin:0 auto 0 0; flex:1 1 220px; min-height:0; text-align:left}
.el-bad,.pinput.el-bad{border-color:var(--danger) !important; outline:2px solid var(--danger); outline-offset:0}
label.el-bad{outline-offset:4px; border-radius:var(--r-sm)}
/* Lists → + Add person: visible search button and hint. */
.el-search{display:flex; gap:8px; align-items:stretch}
.el-search .pinput{flex:1 1 auto; min-width:0}
.el-search-b{display:inline-flex; align-items:center; gap:6px; flex:none}
.el-search-b svg{flex:none}
.el-hint{margin:-4px 0 0; font-size:.78rem}
@media(max-width:420px){.el-search-b span{display:none}}
/* My membership: the card opens large. */
.mcard.mcard-tap{cursor:pointer; transition:transform .18s ease, box-shadow .18s ease}
.mcard.mcard-tap:hover{transform:translateY(-2px)}
.mcard.mcard-tap:focus-visible{outline:2px solid var(--sea); outline-offset:3px}
.mcard-tap-hint{font-size:.66rem; letter-spacing:.08em; color:var(--soft); cursor:pointer; margin-top:-2px}
.mzoom{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:16px; overflow:auto;
  background:rgba(8,14,16,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.mzoom-box{position:relative; width:min(420px,100%); display:grid; gap:14px; justify-items:center; padding-top:44px; color:#fff}
.mzoom-box .mcard{width:100%; max-width:420px}
.mzoom-x{position:absolute; top:0; right:0; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08); color:#fff; font-size:1.05rem; line-height:1; cursor:pointer}
.mzoom-x:focus-visible{outline:2px solid #fff; outline-offset:2px}
.mzoom-info{display:grid; gap:10px; justify-items:center; text-align:center}
.mzoom-id span{display:block; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; opacity:.7}
.mzoom-id b{font-family:'Domine',serif; font-weight:500; font-size:1.35rem; letter-spacing:.08em; user-select:all}
.mzoom-disc{display:flex; flex-wrap:wrap; justify-content:center; gap:6px}
.mzoom-disc span{padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); font-size:.8rem}
.mzoom-disc b{font-weight:600}
.mzoom .mwallet{margin:0; justify-content:center}
@media(prefers-reduced-motion:reduce){.mcard.mcard-tap{transition:none}.mcard.mcard-tap:hover{transform:none}}

/* UAT 2026-10 · campaign editor */
/* Text editor: brand swatches for text colour and highlight (campaigns.js SWATCHES); "Default" is the slashed one. */
.pce-swatches{display:inline-flex; align-items:center; gap:5px; padding:0 4px 0 10px; border-left:1px solid var(--line)}
.pce-sw-label{font-size:.72rem; color:var(--soft); margin-right:2px}
.pce-sw{width:22px; height:22px; flex:none; padding:0; border:1px solid rgba(23,38,42,.25); border-radius:50%; background:var(--panel); cursor:pointer}
.pce-sw-highlight{border-radius:5px}
.pce-sw:hover{transform:scale(1.1)}
.pce-sw:focus-visible{outline:2px solid var(--sea); outline-offset:2px}
.pce-sw-none{background:linear-gradient(135deg, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%), #FFFEFB}
@media(prefers-reduced-motion:reduce){.pce-sw:hover{transform:none}}
/* The swatches are email colours for a light panel: in dark mode the editor stays paper-light, as the email will be. */
@media(prefers-color-scheme:dark){:root:not([data-theme]) .pce-editor{background:#FFFEFB; color:#17262A}}
:root[data-theme="dark"] .pce-editor{background:#FFFEFB; color:#17262A}