/* KOHO Portal — shell styles. "Warm Lounge" redesign (2026-09-15): a
   softer, rounded, KOHO-branded look — the portal's own colors are now
   the real site tokens (assets/site.css: --sea, --clay-ink) rather
   than a portal-only palette. Respects the OS light/dark preference
   automatically; no manual toggle in the UI. */
:root{
  --bone:#FAF7F1;        /* page bg */
  --panel:#FFFFFF;       /* card / surface bg */
  --sand:#EBE3D6;        /* section tint / hover / muted chip bg */
  --ink:#152A2E;         /* text — KOHO's own deep teal-black */
  --sea:#1B5F6B;         /* door teal — primary buttons, active nav, accents */
  --clay:#7D5E3C;        /* teak clay (text-safe) — section labels, secondary accent */
  --brass:#2FA9A6;       /* pool turquoise — reserved for future use */
  --line:#E3D9C8;
  --soft:#6B7A76;
  --ok:#2F7D52; --warn:#B0791F; --danger:#B23F34;
  --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(21,42,46,.22);
  --nav-w:252px;
}
@media(prefers-color-scheme:dark){
  :root{
    --bone:#152A2E;
    --panel:#1D3438;
    --sand:#243F42;
    --ink:#F5F0E6;
    --sea:#3FA6A8;
    --clay:#C9A97A;
    --brass:#5FC9C2;
    --line:#2C4649;
    --soft:#9FB0AC;
    --ok:#6FCB93; --warn:#E0A857; --danger:#E0705C;
    --shadow:0 16px 36px -20px rgba(0,0,0,.45);
  }
}
*{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:#fff; 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: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; 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: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. */
.pdata-tag{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  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; white-space:normal;
  max-width:220px; pointer-events:none}
@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}
.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" — fixed pill bottom-left, card opens upward (works from
   any scroll position; the footer isn't the positioning context). */
.pcl-toggle{position:fixed; left:16px; bottom:14px; z-index:40;
  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 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:#fff; font-weight:600}

.pmain{padding:22px 28px 48px; max-width:1000px}
.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:#fff; 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%)}
.mcard.mcard-voyager   {--c1:#241B10; --c2:#4A3A22; --c3:#7A5E38}
.mcard.mcard-syndicate {--c1:#0C2124; --c2:#164147; --c3:#256E76}
.mcard.mcard-cartel    {--c1:#0A1B24; --c2:#153345; --c3:#265879}
.mcard.mcard-maestro   {--c1:#241A08; --c2:#4D3810; --c3:#8A6420}
.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-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:46%}
.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}
}