/* The Cliff staff area: light CRM look. Loaded after cliff.css and staff.css, staff pages only.
   The public site's dark tokens are remapped here so every existing staff component turns light. */
html.staff-html{background:#F5F2EC}
body.staff{
  color-scheme:light;
  --royal:#F5F2EC;--deep:#F8F5F0;--night:#FFFFFF;--panel:#FFFFFF;
  --cream:#16285A;--ink:#16285A;--ink-2:#3C4B72;
  --gold:#8A6420;--brass:#8A6420;--amber:#B4530A;
  --mist:#5A6584;--mist-2:#7D869E;
  --line:#E9E3D8;--line-cream:#E9E3D8;
  --accent:#D9BC7E;--accent-2:#CDAE69;--navy:#16285A;--bg:#F5F2EC;--card:#FFFFFF;--soft:#FAF8F4;--edge:#E9E3D8;
  --ok:#155E3B;--ok-bg:#E5F4EB;--warn:#7A4D00;--warn-bg:#FDF3D9;--bad:#9A3412;--bad-bg:#FDEEE6;--info:#1E3A8A;--info-bg:#E8EEFA;
  --shadow:0 1px 2px rgba(22,40,90,.05),0 6px 20px rgba(22,40,90,.05);
  --shadow-lift:0 2px 4px rgba(22,40,90,.06),0 14px 34px rgba(22,40,90,.1);
  --r:16px;
  background:var(--bg);color:var(--navy);font-size:16px;line-height:1.5;
}
body.staff h1,body.staff .h-lg{font-family:var(--body);font-weight:600;letter-spacing:-.015em;font-size:clamp(26px,2.6vw,34px);line-height:1.15;font-variant-numeric:lining-nums}
body.staff .h-md{font-family:var(--body);font-weight:600;font-size:22px}
body.staff .eyebrow{color:var(--brass);letter-spacing:.14em;font-size:12px}
body.staff a:hover{color:inherit}
body.staff :focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:8px}
body.staff ::selection{background:#F1E3BF}

/* ---------- app frame ---------- */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{position:sticky;top:0;height:100vh;height:100dvh;background:var(--navy);color:#F4EEE4;display:flex;flex-direction:column;padding:20px 14px 16px;gap:6px;overflow-y:auto;z-index:40}
.side-brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:2px 10px 18px;text-decoration:none;color:inherit}
.side-brand img{height:38px;width:auto}
.side-brand span{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:600}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;color:#DCE1EE;text-decoration:none;font-weight:500;font-size:15.5px;transition:background-color .15s,color .15s}
.side-nav a:hover{background:rgba(244,238,228,.08);color:#fff}
.side-nav a[aria-current=page]{background:#F4EEE4;color:var(--navy);font-weight:600}
.side-nav svg{flex:none;opacity:.9}
.nav-badge{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:var(--accent);color:var(--navy);font:700 12px/22px var(--body);font-style:normal;text-align:center}
.side-nav a[aria-current=page] .nav-badge{background:var(--navy);color:#fff}
.side-foot{margin-top:auto;display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 10px;align-items:center;padding:14px 8px 2px;border-top:1px solid rgba(244,238,228,.14)}
.side-me{display:flex;flex-direction:column;font-size:14px;line-height:1.25;min-width:0}
.side-me b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-me span{color:#AEB7CF;font-size:12.5px}
.side-out{grid-column:1/-1;margin-top:8px;background:transparent;border:1px solid rgba(244,238,228,.22);color:#DCE1EE;border-radius:10px;min-height:38px;font:500 14px var(--body);cursor:pointer}
.side-out:hover{background:rgba(244,238,228,.08);color:#fff}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--navy);display:grid;place-items:center;font:700 13px var(--body);flex:none;letter-spacing:.02em}
.avatar.sm{width:30px;height:30px;font-size:12px}
.avatar.lg{width:56px;height:56px;font-size:19px}
.app-main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:12px 28px;background:rgba(245,242,236,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(233,227,216,.8)}
.searchbtn{flex:1 1 auto;max-width:480px;display:flex;align-items:center;gap:10px;height:42px;padding:0 12px 0 14px;border-radius:12px;border:1px solid var(--edge);background:#fff;color:var(--mist);font:400 15px var(--body);cursor:text;text-align:left;box-shadow:0 1px 2px rgba(22,40,90,.04);transition:border-color .15s,box-shadow .15s}
.searchbtn:hover{border-color:#D4CCBB;box-shadow:var(--shadow)}
.searchbtn span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.searchbtn kbd{font:600 11px var(--body);color:var(--mist);background:var(--soft);border:1px solid var(--edge);border-radius:6px;padding:2px 6px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.testflag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);border-radius:99px;padding:5px 10px}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--edge);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer}
.topbar-brand img{height:30px;width:auto;filter:brightness(0) saturate(100%) invert(13%) sepia(37%) saturate(2400%) hue-rotate(210deg)}
.st-main{width:100%;max-width:1440px;margin:0 auto;padding:26px 28px 72px;display:flex;flex-direction:column;gap:20px;box-sizing:border-box}
.st-bare{min-height:100vh;display:grid;place-items:start center;padding:0 18px}
.side-scrim{position:fixed;inset:0;background:rgba(9,18,48,.45);z-index:35;animation:fade .2s}
.bottombar{display:none}
.only-phone{display:none}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- search ---------- */
.search-dlg{border:0;padding:0;border-radius:18px;width:min(640px,calc(100vw - 24px));margin:10vh auto auto;box-shadow:0 30px 80px rgba(9,18,48,.35);background:#fff;color:var(--navy)}
.search-dlg::backdrop{background:rgba(9,18,48,.4);backdrop-filter:blur(3px)}
.search-dlg[open]{animation:rise .18s}
.search-in{display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--edge);color:var(--mist)}
.search-in input{flex:1;border:0;outline:0;font:400 18px var(--body);color:var(--navy);height:60px;background:transparent;min-width:0}
.search-res{max-height:min(60vh,520px);overflow-y:auto;padding:8px}
.search-h{margin:8px 10px 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.search-hint{padding:18px 12px;color:var(--mist);font-size:15px}
.search-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--navy)}
.search-item b{font-weight:600;display:block}
.search-item small{display:block;color:var(--mist);font-size:13px}
.search-item[aria-selected=true],.search-item:hover{background:var(--soft);box-shadow:inset 3px 0 0 var(--accent)}
.st-dot{width:10px;height:10px;border-radius:50%;flex:none;margin:0 10px;background:#9AA3BA}
.st-dot.st-enquiry{background:#6B83C9}.st-dot.st-provisional{background:#C9A04F}.st-dot.st-confirmed,.st-dot.st-balance_requested{background:#3F8F63}.st-dot.st-paid{background:#2E7D83}.st-dot.st-cancelled{background:#C2410C}

/* ---------- components, light ---------- */
.st-title{align-items:center}
.st-title .eyebrow{margin-bottom:4px}
.card,.empty-state,.kpi,.p-card{background:var(--card);border:1px solid var(--edge);box-shadow:var(--shadow);border-radius:var(--r)}
.card{padding:22px 24px;gap:14px}
.card h2{font:600 19px/1.25 var(--body);letter-spacing:-.005em}
.card .sub{font-style:normal;font-size:14px;color:var(--mist);margin-top:-6px}
.empty-state{font-style:normal;text-align:center;padding:28px;color:var(--mist);border-style:dashed;box-shadow:none}
.btn{font-weight:600;font-size:15.5px;min-height:44px;padding:0 20px;letter-spacing:0;transition:transform .15s,background-color .15s,box-shadow .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn-sm{min-height:38px;padding:0 14px;font-size:14px}
.btn-gold{background:var(--accent);color:var(--navy);box-shadow:0 1px 2px rgba(122,92,34,.25)}
.btn-gold:hover{background:var(--accent-2);color:var(--navy);box-shadow:0 6px 16px rgba(122,92,34,.25)}
.btn-cream{background:#F1ECE2;color:var(--navy)}
.btn-cream:hover{background:#E9E2D4;color:var(--navy)}
.btn-royal{background:var(--navy);color:#fff}
.btn-line{border:1px solid #D7CFBF;background:#fff;color:var(--navy)}
.btn-line:hover{border-color:var(--navy);color:var(--navy)}
.btn-danger{background:#fff;border:1px solid #F1B4AE;color:#B42318}
.btn-danger:hover{background:#FEF3F2;color:#B42318}
.btn .ic{margin-right:-2px}
.field label{font-weight:600;font-size:14px;color:var(--ink-2)}
.field input,.field select,.field textarea,.pick-add select,.team-row select,.addg input,.tl-row input,.lines-tbl input,.pl-qty input,.dtbl.set input,.mgrid input:not([type=radio]),.td-act select{background:#fff;color:var(--navy);border:1px solid #DCD4C4;border-radius:12px;font-size:15.5px;transition:border-color .15s,box-shadow .15s}
.field input,.field select,.field textarea{min-height:46px;padding:9px 14px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#C9BFAB}
.field input:focus,.field select:focus,.field textarea:focus,.lines-tbl input:focus,.tl-row input:focus,.mgrid input:focus,.pick-add select:focus,.dtbl.set input:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(217,188,126,.45)}
.field input::placeholder,.field textarea::placeholder{color:#9AA1B4}
.field input[disabled],.field textarea[disabled],.field select[disabled]{background:var(--soft);opacity:1;color:var(--ink-2)}
.chip span{border:1px solid #D7CFBF;background:#fff;color:var(--navy);font-weight:600;font-size:14.5px;min-height:40px}
.chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.tabs-row button,.jump a{border:1px solid var(--edge);background:#fff;color:var(--navy);font:600 14.5px/1 var(--body);min-height:38px}
.tabs-row button:hover{border-color:#CFC6B4}
.tabs-row button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.note-ok{background:var(--ok-bg);border:1px solid #BFE3CC;color:var(--ok)}
.note-err{background:var(--bad-bg);border:1px solid #F3C3A6;color:var(--bad)}
.toast{background:var(--navy);color:#fff;font-weight:600;font-size:15px;box-shadow:0 14px 34px rgba(9,18,48,.3);animation:rise .2s}
.tbl-wrap{background:#fff;border:1px solid var(--edge);border-radius:14px}
.tbl{font-size:14.5px}
.tbl th{color:var(--mist);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--soft)}
.tbl tbody tr{transition:background-color .12s}
.tbl tbody tr:hover td{background:#FBF9F6}
.tbl .wait{color:var(--amber)}
.kpi{padding:16px 18px}
.kpi .kv{font-size:30px}
.kpi.warn{box-shadow:var(--shadow),inset 3px 0 0 var(--amber)}
.sumrows div{border-bottom:1px solid #F1ECE3}
.sumrows div.big{font-size:17px}
.payrow,.action,.note-item,.td-row{background:var(--soft);border:1px solid #EFE9DE}
.linkbox code,.share code{background:var(--soft);border:1px dashed #D7CFBF;color:var(--navy)}
.xbtn,.pl-rm{border:1px solid var(--edge);background:#fff;color:var(--mist)}
.xbtn:hover{color:#B42318;border-color:#F1B4AE}
.lines-tbl th{color:var(--mist);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.lines-tbl td{border-color:#F1ECE3}
.logl{color:var(--mist)}
.logl b{color:var(--navy);font-weight:600}
.pill{font-size:12.5px;font-weight:700;padding:4px 10px}
.bitem{background:#fff;border:1px solid var(--edge);box-shadow:var(--shadow);border-radius:14px;color:var(--navy);transition:transform .15s,box-shadow .15s,border-color .15s}
.bitem:hover{background:#fff;color:var(--navy);transform:translateY(-1px);box-shadow:var(--shadow-lift);border-color:#DDD4C3}
.bitem .d{font-size:16px}
.bitem .d small{font-style:normal;font-size:13px}
.mailrow,.team-row{background:#fff;border:1px solid var(--edge);color:var(--navy)}
.bar{background:#EFE9DE}
.bar span{background:linear-gradient(90deg,#C9A04F,var(--accent))}
.signin{margin-top:10vh}
.chooser img{filter:none!important}
.signin img{filter:brightness(0) saturate(100%) invert(13%) sepia(37%) saturate(2400%) hue-rotate(210deg)}
.signin .card{box-shadow:var(--shadow-lift)}
.linkish{color:var(--brass)}
.agree a{color:var(--brass)}
.mg-tick:hover{background:rgba(22,40,90,.05)}
.mg-tick input,.agree input{accent-color:var(--navy)}
.mgrid tfoot td{color:var(--navy);font-weight:700}
.dchart .gl{stroke:rgba(22,40,90,.08)}
.dchart .bk{fill:#C9A04F}
.dchart .hd{fill:rgba(201,160,79,.35)}
.dchart .vl{fill:var(--navy)}
.dchart .mb:hover rect,.dchart .mb:focus rect{fill:rgba(22,40,90,.04)}
.sw.bk{background:#C9A04F}.sw.hd{background:rgba(201,160,79,.35)}.sw.tg{background:var(--navy)}
.dtbl tr.cur td{background:#FBF5E6}
.dtbl td.up{color:var(--ok)}
.rv-dist .bar{background:#EFE9DE}
.rv-dist .bar i{background:#C9A04F}
details.card summary::after{color:var(--brass)}
/* run sheets */
.role{background:#fff;border:1px solid var(--edge)}
.role button{color:var(--navy)}
.role button[aria-pressed=true]{background:var(--navy);color:#fff}
.k-item{background:#fff;border:1px solid var(--edge);box-shadow:var(--shadow);color:var(--navy)}
.k-item.on{border-color:var(--navy);background:#fff;box-shadow:var(--shadow-lift),inset 3px 0 0 var(--accent)}
.k-date{color:var(--brass);font-style:normal;font-weight:600}
.k-flag{background:var(--warn-bg);color:var(--warn)}
.sheet-doc{background:#fff;border:1px solid var(--edge);box-shadow:var(--shadow)}
.sd-facts div,.sd-money div{background:var(--soft);border:1px solid #EFE9DE}
.kit{padding-top:0}
/* to-do list */
.td-badge{background:var(--accent);color:var(--navy)}
.td-row{border-radius:12px;transition:box-shadow .15s,transform .15s}
.td-row:hover{box-shadow:var(--shadow)}
.td-row.td-overdue{box-shadow:inset 3px 0 0 #D2793A}
.td-tick span{border-color:#C9BFAB;border-radius:7px;transition:background-color .15s,border-color .15s}
.td-tick:hover span{border-color:var(--navy)}
.td-tick input:checked+span{background:var(--navy);border-color:var(--navy);box-shadow:inset 0 0 0 3px #fff}
.td-late{color:var(--bad)}
.td-h{color:var(--navy)}
.td-fold{color:var(--navy)}
.td-act select{border-radius:99px}
/* calendar */
.sc-grid{background:#fff;border:1px solid var(--edge);box-shadow:var(--shadow)}
.sc-dow div{color:var(--mist);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.sc-day{border-color:#F0EBE2}
.sc-wknd{background:#FCFAF6}
.sc-blank{background:#F7F4EE}
.sc-today{box-shadow:inset 0 0 0 2px var(--accent)}
.sc-today .sc-n{color:var(--navy);background:var(--accent);border-radius:99px;padding:3px 7px;align-self:flex-start}
.sc-ev{transition:transform .12s}
.sc-ev:hover{transform:translateY(-1px)}
.sc-sw.sc-enq,.sc-ev.sc-enq,.sc-lrow.sc-enq{background:#fff;color:var(--navy);border:1px dashed #9AA3BA}
.sc-add{color:var(--mist)}
.sc-day:hover .sc-add{background:var(--soft)}

/* ---------- page header ---------- */
.pgh{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px}
.pgh-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pgh-t p{color:var(--mist);font-size:14.5px}
.pgh-r{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:inline-flex;background:#fff;border:1px solid var(--edge);border-radius:12px;padding:3px;box-shadow:0 1px 2px rgba(22,40,90,.04)}
.seg button,.seg a{font:600 14px var(--body);border:0;background:transparent;color:var(--navy);padding:0 14px;min-height:34px;border-radius:9px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.seg [aria-pressed=true],.seg [aria-current=page]{background:var(--navy);color:#fff}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fsel{font:500 14px var(--body);color:var(--navy);background:#fff;border:1px solid var(--edge);border-radius:99px;min-height:36px;padding:0 30px 0 14px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316285A' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;cursor:pointer}
.ftog{font:600 14px var(--body);border-radius:99px;min-height:36px;padding:0 14px;border:1px solid #F3C9B5;background:#fff;color:var(--bad);cursor:pointer}
.ftog[aria-pressed=true]{background:var(--bad-bg)}
.fsum{margin-left:auto;font-size:14px;color:var(--mist)}
.fsum b{color:var(--navy);font-weight:600}

/* ---------- tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.tile{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow);text-decoration:none;color:var(--navy);transition:transform .15s,box-shadow .15s;animation:rise .35s both}
a.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);color:var(--navy)}
.tile .tl{font-size:14px;color:var(--mist);display:flex;align-items:center;gap:8px}
.tile .tv{font-size:30px;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.tile .ts{font-size:13px;font-weight:600;color:var(--mist)}
.tile .ts.bad{color:var(--bad)}.tile .ts.ok{color:var(--ok)}
.tile .ti{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--soft);color:var(--brass)}
.tiles .tile:nth-child(2){animation-delay:.04s}.tiles .tile:nth-child(3){animation-delay:.08s}.tiles .tile:nth-child(4){animation-delay:.12s}

/* ---------- home ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.cols>div{display:flex;flex-direction:column;gap:20px;min-width:0}
.card-h{display:flex;align-items:center;gap:10px}
.card-h h2{margin:0}
.card-h a,.card-h .more{margin-left:auto;font-size:14px;font-weight:600;color:var(--navy);text-decoration:none}
.card-h a:hover{text-decoration:underline}
.wk{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-top:1px solid #F1ECE3;text-decoration:none;color:var(--navy)}
.wk:first-of-type{border-top:0}
.wk:hover .wk-n{background:var(--accent)}
.wk-d{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--soft);border:1px solid #EFE9DE;border-radius:12px;height:52px;transition:background-color .15s}
.wk-d small{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.wk-d b{font-size:19px;line-height:1.1}
.wk-t b{font-weight:600}
.wk-t small{display:block;color:var(--mist);font-size:13.5px}
.wk.own .wk-d{background:#EEF0FB}
.wk.held .wk-t b::after{content:"On hold";margin-left:8px;font-size:11.5px;font-weight:700;color:var(--warn);background:var(--warn-bg);border-radius:99px;padding:2px 8px;vertical-align:2px}
.mrow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #F1ECE3;text-decoration:none;color:var(--navy)}
.mrow small{display:block;font-size:13px;color:var(--mist)}
.mrow small.bad{color:var(--bad);font-weight:600}
.mrow b{font-weight:600;white-space:nowrap}
.review-card{background:var(--navy);color:#F4EEE4;border:0}
.review-card h2{color:#fff}
.review-card .stars{color:var(--accent);font-size:20px;letter-spacing:2px}
.review-card p{font-size:16px;line-height:1.55}
.review-card small{color:#AEB7CF}
.review-card a{color:#fff}

/* ---------- pipeline board ---------- */
.board-wrap{overflow-x:auto;margin:0 -28px;padding:0 28px 10px;scroll-snap-type:x proximity;scrollbar-width:thin}
.board{display:grid;grid-template-columns:repeat(7,minmax(256px,1fr));gap:14px;min-width:min-content}
.col{background:#EEE9DF;border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:10px;min-height:420px;scroll-snap-align:start}
.col-h{padding:6px 6px 8px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0}
.col-h div{display:flex;align-items:center;gap:8px}
.col-h h2{font:700 14.5px var(--body);margin:0}
.col-h .n{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--mist);background:#fff;border-radius:99px;padding:1px 8px}
.col-h small{font-size:13px;color:var(--mist)}
.col-h i{display:block;height:3px;border-radius:3px;margin-top:4px}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.c-new{--c:#6B83C9}.c-quoted{--c:#C9A04F}.c-booked{--c:#3F8F63}.c-balance{--c:#D2793A}.c-paid{--c:#2E7D83}.c-after{--c:#8A8FA3}.c-feedback{--c:#A97BC0}
.col .dot,.col-h i{background:var(--c)}
.pcard{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid #E6E0D4;border-radius:13px;padding:12px 13px;text-decoration:none;color:var(--navy);box-shadow:0 1px 2px rgba(22,40,90,.06);transition:transform .15s,box-shadow .15s,border-color .15s;animation:rise .3s both}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:#D9CFBD;color:var(--navy)}
.pc-top{display:flex;gap:8px;align-items:flex-start}
.pc-top b{font-weight:600;font-size:15px;line-height:1.3;flex:1;min-width:0}
.pc-top span{font-weight:700;font-size:14px;white-space:nowrap}
.pc-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--mist)}
.cat{font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:99px;background:#F1ECE2;color:var(--ink-2)}
.pc-foot{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mist)}
.pc-foot .ref{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.flag{font-size:12.5px;font-weight:600;padding:6px 9px;border-radius:8px;line-height:1.3;background:var(--info-bg);color:var(--info)}
.flag.overdue{background:var(--bad-bg);color:var(--bad)}.flag.today{background:var(--warn-bg);color:var(--warn)}.flag.ok{background:var(--ok-bg);color:var(--ok)}
.stars{color:#C9A04F;letter-spacing:1px}
.col-empty{font-size:13.5px;color:var(--mist);text-align:center;padding:20px 8px;border:1px dashed #D9D1C1;border-radius:12px}
.board-note{font-size:13px;color:var(--mist)}
.skel{background:linear-gradient(90deg,#EFEAE1 25%,#F7F4EE 37%,#EFEAE1 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:13px}

/* ---------- list view ---------- */
.ltable td .who b{font-weight:600}
.ltable td .who small{display:block;color:var(--mist);font-size:13px}
.ltable tr{cursor:pointer}

/* ---------- booking page ---------- */
.bk-top{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end}
.bk-back{font-size:14px;font-weight:600;color:var(--mist);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.bk-back:hover{color:var(--navy)}
.bk-id{display:flex;flex-direction:column;gap:6px;flex:1 1 380px;min-width:0}
.bk-chips{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:13.5px;color:var(--mist)}
.bk-sub{color:var(--ink-2);font-size:16px}
.bk-act{display:flex;flex-wrap:wrap;gap:8px}
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.stages li{display:flex;flex-direction:column;gap:7px;font-size:12.5px;font-weight:600;color:var(--mist)}
.stages li i{display:block;height:6px;border-radius:6px;background:#E6DFD2;transition:background-color .3s}
.stages li.done i{background:#3F8F63}
.stages li.now i{background:var(--navy)}
.stages li.now{color:var(--navy);font-weight:700}
.stages li.done{color:var(--ink-2)}
.btabs{display:flex;gap:2px;border-bottom:1px solid var(--edge);overflow-x:auto;scrollbar-width:none;position:sticky;top:67px;z-index:5;background:rgba(245,242,236,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin:0 -28px;padding:0 28px}
.btabs::-webkit-scrollbar{display:none}
.btabs button{font:500 15px var(--body);color:var(--mist);background:none;border:0;padding:12px 14px;cursor:pointer;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;transition:color .15s,box-shadow .15s;display:inline-flex;gap:6px;align-items:center}
.btabs button:hover{color:var(--navy)}
.btabs button[aria-selected=true]{color:var(--navy);font-weight:600;box-shadow:inset 0 -3px 0 var(--navy)}
.btabs .tn{font-size:11.5px;font-weight:700;background:var(--bad-bg);color:var(--bad);border-radius:99px;padding:1px 7px}
.bpanel{display:none}
.bpanel.on{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px;align-items:start;animation:fade .2s}
.bpanel.on.one{grid-template-columns:minmax(0,1fr)}
.bpanel>div{display:flex;flex-direction:column;gap:20px;min-width:0}
.cust{display:flex;flex-direction:column;gap:10px}
.cust-h{display:flex;gap:12px;align-items:center}
.cust-h b{font-weight:600;display:block}
.cust-h small{color:var(--mist);font-size:13px}
.cust-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:10px;border-top:1px solid #F1ECE3}
.cust-stats span{display:flex;flex-direction:column;font-size:12.5px;color:var(--mist)}
.cust-stats b{font-size:16px;color:var(--navy);font-weight:600}
.cust a{color:var(--navy)}
.mbar{height:10px;border-radius:10px;background:#EFE9DE;overflow:hidden}
.mbar i{display:block;height:100%;background:#3F8F63;border-radius:10px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.m3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.m3 span{display:flex;flex-direction:column;font-size:13px;color:var(--mist)}
.m3 b{font-size:22px;font-weight:600;color:var(--navy);letter-spacing:-.01em}
.m3 b.ok{color:var(--ok)}
.tline{display:flex;flex-direction:column}
.tl-ev{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:8px 0;position:relative}
.tl-ev::before{content:"";position:absolute;left:14.5px;top:36px;bottom:-6px;width:1px;background:#EAE4D9}
.tl-ev:last-child::before{display:none}
.tl-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--body);background:#F1ECE2;color:var(--ink-2)}
.tl-ic.tk-pay{background:var(--ok-bg);color:var(--ok)}.tl-ic.tk-mail{background:var(--info-bg);color:var(--info)}.tl-ic.tk-cust{background:#F3ECFA;color:#6B3E8A}.tl-ic.tk-bad{background:var(--bad-bg);color:var(--bad)}
.tl-ev b{font-weight:500;font-size:14.5px;display:block;line-height:1.35}
.tl-ev small{font-size:12.5px;color:var(--mist)}

/* ---------- customers ---------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.ccard{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow);text-decoration:none;color:var(--navy);display:flex;flex-direction:column;gap:10px;transition:transform .15s,box-shadow .15s;animation:rise .3s both}
.ccard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);color:var(--navy)}
.ccard-h{display:flex;gap:12px;align-items:center;min-width:0}
.ccard-h b{font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard-h small{display:block;color:var(--mist);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccard-h>span:last-child{min-width:0}
.ccard-s{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--mist);align-items:center}
.ccard-s b{color:var(--navy);font-weight:600}
.repeat{font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--ok-bg);color:var(--ok)}
.cprof{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.cprof-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.cprof-t p{color:var(--mist);font-size:15px}
.cprof-t a{color:var(--navy)}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- smaller screens ---------- */
@media (max-width:1180px){.board-wrap{margin:0 -20px;padding:0 20px 10px}.cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:980px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;width:280px;transform:translateX(-102%);transition:transform .25s cubic-bezier(.2,.7,.2,1);box-shadow:none}
  body.side-open .side{transform:none;box-shadow:20px 0 60px rgba(9,18,48,.3)}
  .only-phone{display:grid}
  .topbar-brand.only-phone{display:block}
  .topbar{padding:10px 16px;gap:10px}
  .searchbtn{order:3;flex:1 0 100%;max-width:none}
  .topbar{flex-wrap:wrap}
  .st-main{padding:18px 16px 110px}
  .bottombar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--edge);padding:6px 4px max(8px,env(safe-area-inset-bottom,0px))}
  .bottombar a,.bottombar button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font:500 11.5px var(--body);color:var(--mist);text-decoration:none;background:none;border:0;cursor:pointer;border-radius:10px}
  .bottombar [aria-current=page]{color:var(--navy);font-weight:700}
  .bottombar .nav-badge{position:absolute;top:0;left:calc(50% + 6px);margin:0;min-width:18px;height:18px;line-height:18px;font-size:10.5px;padding:0 5px}
  .board-wrap{margin:0 -16px;padding:0 16px 10px}
  .btabs{margin:0 -16px;padding:0 16px;top:113px}
  .bpanel.on{grid-template-columns:minmax(0,1fr)}
  .hide-phone{display:none}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:600px){
  .stages{gap:3px;margin-bottom:14px}.stages li{position:relative}.stages li span{display:none}.stages li.now span{display:block;position:absolute;top:13px;left:0;white-space:nowrap}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{padding:12px 14px}.tile .tv{font-size:24px}.tile .tl{font-size:13px}.tile .ti{display:none}
  .m3 b{font-size:19px}
  .card{padding:18px}
  .pgh-r{margin-left:0}
  .fsum{margin-left:0;flex-basis:100%}
}
@media print{.side,.topbar,.bottombar,.btabs{display:none!important}.app{display:block}.st-main{padding:0}}
.bk-glance{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.bk-glance div{display:flex;flex-direction:column;gap:1px;min-width:0}
.bk-glance dt{font-size:12.5px;color:var(--mist);font-weight:600}
.bk-glance dd{margin:0;font-size:15px;overflow-wrap:anywhere}
@media (max-width:600px){.bk-glance{grid-template-columns:minmax(0,1fr)}}
.linkish.more{color:var(--navy);font:600 14px var(--body);text-decoration:none;padding:0}
.linkish.more:hover{text-decoration:underline}

.bk{display:flex;flex-direction:column;gap:18px}
.bk .stages{margin-top:2px}
@media (max-width:980px){.bottombar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
.search-in input:focus,.search-in input:focus-visible{outline:0;box-shadow:none}
.search-in:focus-within{color:var(--navy)}
/* moving cards */
.pcard{position:relative}
.pcard[draggable=true]{cursor:grab}
.pcard[draggable=true]:active{cursor:grabbing}
.pcard.dragging{opacity:.45;transform:rotate(1.5deg) scale(.98);box-shadow:var(--shadow-lift)}
.pc-move{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:9px;border:1px solid var(--edge);background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s,background-color .15s}
.pcard:hover .pc-move,.pc-move:focus-visible{opacity:1}
.pcard:hover .pc-top>span{visibility:hidden}
.pc-move:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (hover:none){.pc-move{position:static;opacity:1;align-self:flex-end;margin-top:-2px}.pcard:hover .pc-top>span{visibility:visible}}
.col{transition:background-color .15s,box-shadow .15s,opacity .15s}
.col.drop-over{background:#E6EEF9;box-shadow:inset 0 0 0 2px var(--navy)}
.col.drop-no{opacity:.55}
body.is-dragging .col:not(.drop-no){box-shadow:inset 0 0 0 1.5px rgba(22,40,90,.18)}
.lostbin{position:fixed;left:50%;bottom:24px;translate:-50% 0;z-index:50;display:flex;align-items:center;gap:10px;padding:16px 26px;border-radius:16px;background:#fff;border:2px dashed #E9A99A;color:var(--bad);font-weight:600;box-shadow:var(--shadow-lift);animation:rise .2s}
.lostbin.over{background:var(--bad-bg);border-style:solid;transform:scale(1.04)}
.move-dlg{border:0;padding:0;border-radius:18px;width:min(460px,calc(100vw - 24px));box-shadow:0 30px 80px rgba(9,18,48,.35);background:#fff;color:var(--navy)}
.move-dlg::backdrop{background:rgba(9,18,48,.4);backdrop-filter:blur(3px)}
.move-dlg[open]{animation:rise .18s}
.move-box{padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.move-box h2{font:600 20px/1.25 var(--body)}
.move-box p{font-size:15px;line-height:1.5}
.mv-btns{justify-content:flex-end;margin-top:4px}
.mv-list{display:flex;flex-direction:column;gap:6px}
.mv-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:500 15px var(--body);color:var(--navy);background:var(--soft);border:1px solid #EFE9DE;border-radius:12px;padding:12px 14px;cursor:pointer}
.mv-opt:hover{background:#fff;border-color:var(--navy)}
.mv-opt .dot{background:var(--c,#9AA3BA)}
.dot.c-lost{--c:#C2410C}
/* till instructions */
.till-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.till-steps li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45}
.till-steps .tn{flex:none;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 12.5px var(--body);margin-top:1px}
.till-card{border-color:#E9D9B4;background:linear-gradient(#FFFDF7,#fff)}
/* accounts */
.vat-steps{display:flex;flex-direction:column}
.vat-steps>div{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid #F1ECE3}
.vat-steps>div:first-child{border-top:0}
.vat-steps .vn{width:26px;height:26px;border-radius:50%;background:var(--soft);border:1px solid var(--edge);display:grid;place-items:center;font:700 13px var(--body);margin-top:1px}
.vat-steps b{font-weight:600}
.vat-steps small{display:block;color:var(--mist);font-size:13.5px;line-height:1.45;margin-top:2px}
.vat-steps .va{text-align:right;font-weight:600;font-size:17px;white-space:nowrap}
.vat-steps .va small{font-weight:600}
.vat-steps .va.up small{color:var(--ok)}.vat-steps .va.down small{color:var(--bad)}
.vat-steps .vt{border-top:2px solid var(--navy)}
.vat-steps .vt .vn{background:var(--navy);color:#fff;border-color:var(--navy)}
.vat-steps .vt .va{font-size:22px}
.how{margin-top:6px;font-size:14.5px;color:var(--ink-2)}
.how summary{cursor:pointer;font-weight:600;color:var(--navy)}
.how p{margin-top:8px;line-height:1.55}
.acc-tabs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.acc-tabs .seg{flex-wrap:wrap}
.cnt{font-size:11.5px;font-weight:700;background:rgba(22,40,90,.08);border-radius:99px;padding:1px 7px;margin-left:4px}
.seg [aria-pressed=true] .cnt{background:rgba(255,255,255,.2)}
.tbl.acc{min-width:1060px}
.tbl.acc td small{display:block;color:var(--mist);font-size:12.5px;margin-top:2px}
.tbl.acc .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl.acc tr.tot td{font-weight:700;border-top:2px solid var(--edge);background:var(--soft)}
.tbl.acc code{font-size:12px;color:var(--mist)}
.tg{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:99px;background:#F1ECE2;color:var(--ink-2)}
.tg.ok{background:var(--ok-bg);color:var(--ok)}.tg.info{background:var(--info-bg);color:var(--info)}.tg.bad{background:var(--bad-bg);color:var(--bad)}
@media (max-width:600px){.vat-steps>div{grid-template-columns:26px minmax(0,1fr)}.vat-steps .va{grid-column:2;text-align:left}}
.note-info{background:var(--info-bg);border:1px solid #C9D7F2;color:var(--info);border-radius:14px;padding:12px 14px;font-size:15px}
.acc-wrap{display:flex;flex-direction:column;gap:16px}
.acc-wrap>p{margin:0}
.tbl.acc td:first-child{white-space:nowrap}
.tbl.acc td:nth-child(2){min-width:170px}
/* Laura's view-only login */
.testflag.vo-flag{color:var(--info);background:var(--info-bg)}
body.view-only a[href*="new=1"],body.view-only .sc-add{display:none!important}
.linkbtn{background:none;border:0;padding:0;font:600 13.5px var(--body);color:var(--navy);text-decoration:underline;cursor:pointer}
.linkbtn:disabled{opacity:.6;cursor:default}
.ls-line{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--soft);border:1px solid var(--edge);font-size:14px}

/* ---------- Coast (downstairs) large tables: classes start cst- to stay clear of the public styles ---------- */
.cst-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0E5A6B;background:#E2F2F5;border-radius:6px;padding:1px 6px}
.pill.cst-ok{background:var(--ok-bg);color:var(--ok)}.pill.cst-warn{background:var(--warn-bg);color:var(--warn)}.pill.cst-bad{background:var(--bad-bg);color:var(--bad)}.pill.cst-info{background:var(--info-bg);color:var(--info)}
.pill.cst-coast{background:#E2F2F5;color:#0E5A6B}
.cst-al{display:inline-block;font-size:12px;font-weight:700;color:#B42318;background:#FEF3F2;border:1px solid #F7C9C4;border-radius:99px;padding:2px 8px;margin-left:6px;vertical-align:1px}
.cst-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cst-pills .cst-al{margin-left:0}
.cst-last{color:var(--mist);font-size:14.5px;margin:-4px 0 0}
.cst-last .bad{color:var(--bad);font-weight:600}
.cst-file{cursor:pointer}
.cst-seg{flex-wrap:wrap}
.cst-n{font-style:normal;font-size:11.5px;font-weight:700;background:var(--bad-bg);color:var(--bad);border-radius:99px;padding:1px 7px;margin-left:6px}
[aria-pressed=true] .cst-n{background:#fff}
.cst-n[hidden]{display:none}
.cst-list{display:flex;flex-direction:column;gap:22px}
.cst-day{display:flex;flex-direction:column;gap:8px}
.cst-day h2{font:600 17px/1.3 var(--body);color:var(--navy);margin:0 0 2px}
.cst-day h2 span{font-weight:400;color:var(--mist);font-size:14.5px;margin-left:6px}
.cst-item{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--edge);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);text-decoration:none;color:var(--navy);transition:transform .15s,box-shadow .15s,border-color .15s}
.cst-item:hover{transform:translateY(-1px);border-color:#D7CFBF;color:var(--navy)}
.cst-time{font-weight:700;font-size:17px}
.cst-main b{font-weight:600;font-size:16.5px}
.cst-main small{display:block;color:var(--mist);font-size:14px}
.cst-guests{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;height:52px;background:var(--soft);border:1px solid #EFE9DE;border-radius:12px}
.cst-guests b{font-size:19px;line-height:1.1}.cst-guests small{font-size:11px;color:var(--mist);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.cst-back{display:inline-block;font-weight:600;color:var(--navy);text-decoration:none;margin-bottom:10px}
.cst-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.cst-head h1{font:600 28px/1.2 var(--body);margin:0}
.cst-when{color:var(--ink-2);margin-top:4px;font-size:16px}
.cst-head-r{display:flex;gap:8px;flex-wrap:wrap}
.cst-kv{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:0;margin:0}
.cst-kv>div{display:contents}
.cst-kv dt{color:var(--mist);font-size:14px;padding:9px 12px 9px 0;border-top:1px solid #F1ECE3}
.cst-kv dd{margin:0;padding:9px 0;border-top:1px solid #F1ECE3;color:var(--navy);overflow-wrap:anywhere}
.cst-kv>div:first-child dt,.cst-kv>div:first-child dd{border-top:0}
.cst-kv .bad,.bpanel .bad{color:var(--bad)}.bpanel .ok{color:var(--ok)}
.cst-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.cst-log span{display:block;font-size:12.5px;color:var(--mist)}
.cst-big{font-size:17px}.cst-big b{font-size:26px;font-weight:600}
.cst-bar{height:10px;background:#EFE9DE;border-radius:99px;overflow:hidden;margin:2px 0 6px}
.cst-bar span{display:block;height:100%;background:var(--navy);border-radius:99px}
.cst-allergy{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cst-allergy li{background:#FEF3F2;border:1px solid #F7C9C4;border-radius:12px;padding:10px 12px;color:#7A271A}
.cst-allergy b{display:block;color:var(--navy)}
.cst-check{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid #F1ECE3;cursor:pointer}
.cst-check:first-of-type{border-top:0}
.cst-check input{width:22px;height:22px;margin-top:2px;accent-color:var(--navy);flex:none}
.cst-check small{display:block;color:var(--mist);font-size:13.5px}
.cst-dlg{border:0;border-radius:20px;padding:26px;max-width:560px;width:calc(100% - 32px);box-shadow:0 24px 64px rgba(22,40,90,.25);color:var(--navy)}
.cst-dlg::backdrop{background:rgba(22,40,90,.45)}
.cst-dlg h2{font:600 22px/1.25 var(--body);margin:0 0 10px}
.cst-dlg p{margin:0 0 10px}
.cst-dlg form{display:flex;flex-direction:column;gap:12px}
.cst-dlg .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cst-dlg .btn-row{margin-top:6px}
.cst-msg{width:100%;font:15px/1.5 var(--body);color:var(--navy);background:var(--soft);border:1px solid var(--edge);border-radius:12px;padding:12px 14px;resize:vertical;margin:4px 0 12px}
.cst-decide{border-color:#F3C3A6;box-shadow:0 0 0 3px var(--bad-bg)}
.cst-wx{margin:-4px 0 4px;color:var(--navy)}.cst-wx b{font-size:20px}.cst-wx span{color:var(--mist);font-size:14px}
.cst-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center}
.cst-week div{background:var(--soft);border:1px solid #EFE9DE;border-radius:12px;padding:8px 2px;display:flex;flex-direction:column;gap:1px}
.cst-week small{font-size:11.5px;font-weight:700;color:var(--mist);text-transform:uppercase}
.cst-week b{font-size:17px}.cst-week span{font-size:11.5px;color:#1C5CAB;font-weight:600}
.sc-sw.sc-coast,.sc-ev.sc-coast,.sc-lrow.sc-coast{background:#E2F2F5;color:#0E5A6B;border:1px solid #A9D6DF}
.team-row{grid-template-columns:minmax(0,1fr) 150px 130px auto auto}
.cst-row4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (max-width:620px){
  .cst-item{grid-template-columns:58px minmax(0,1fr);padding:12px 14px}
  .cst-guests{display:none}
  .cst-kv{grid-template-columns:1fr}.cst-kv dt{padding-bottom:0;border-top:1px solid #F1ECE3}.cst-kv dd{border-top:0;padding-top:2px}
  .cst-dlg{padding:20px}.cst-dlg .row2{grid-template-columns:1fr}
  .cst-week{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cst-head h1{font-size:24px}
}
@media (max-width:860px){.team-row{grid-template-columns:1fr}}
/* switching between the Coast and Cliff staff areas */
.side-switch{background:var(--accent);border-color:var(--accent);color:var(--navy);font-weight:600}
.side-switch:hover{background:var(--accent-2);color:var(--navy)}
.cst-topswitch{min-height:36px;padding:0 12px;font-size:13px;margin-left:auto}
[data-switch][hidden],[data-logo][hidden]{display:none!important}
.side-brand img[data-logo="coast"]{height:auto}
.chooser{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:720px;margin-top:8px}
.chooser a,.chooser button{display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 22px 26px;border-radius:20px;background:var(--navy);color:#F4EEE4;text-decoration:none;border:0;cursor:pointer;font:inherit;text-align:center;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.chooser a:hover,.chooser button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(22,40,90,.25)}
.chooser img{width:150px;height:auto}
.chooser b{font-size:19px;font-weight:600;color:#fff}
.chooser small{font-size:14.5px;color:#C9D1E6}
.chooser .here{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
@media (max-width:620px){.chooser{grid-template-columns:1fr}}

/* ---------- Coast weather (staff area): classes start cwx- ---------- */
.cwx { --rain: #2A78D6; --temp: #D9592A; --fc: #8A97A3; }
.cwx-note { margin: 18px 0 0; font-size: 15px; color: var(--mist); }

.cwx-bar { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cwx-years { display: flex; align-items: center; gap: 6px; }
.cwx-years strong { font-size: 22px; font-weight: 600; min-width: 64px; text-align: center; }
.cwx-years button { width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid var(--edge); background: #fff; color: var(--navy); font-size: 20px; cursor: pointer; }
.cwx-years button:disabled { opacity: .35; cursor: default; }
.cwx-key { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 13px; color: var(--mist); }
.cwx-key .cx-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-left: 6px; }
.cwx-key .cx-cold { background: rgb(158,197,244); } .cwx-key .cx-warm { background: rgb(244,170,160); }
.cwx-key .cx-rainkey { background: var(--rain); height: 4px; border-radius: 2px; }
.cwx-key .cx-fckey { background: #fff; border: 1.5px dashed var(--fc); }

/* Today and the week ahead */
.cwx-now { margin-top: 20px; display: grid; align-items: start; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 14px; }
.cwx-today { display: grid; gap: 6px; padding: 20px 22px; border-radius: 22px; background: var(--navy); color: #fff; text-decoration: none; }
.cwx-today:hover { color: #fff; background: #0F2639; }
.cwx-today .cx-k { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #D7E0E8; }
.cwx-today .cx-big { display: flex; align-items: center; gap: 14px; }
.cwx-today .cx-big b { font-size: 46px; font-weight: 600; line-height: 1; display: block; }
.cwx-today .cx-big i { font-style: normal; color: #D7E0E8; }
.cwx-today .cx-c { font-size: 18px; }
.cwx-today .cx-m { display: grid; font-size: 15px; color: #D7E0E8; }
.cwx-today .cwx-ic circle[fill], .cwx-today .cwx-ic path[fill] { stroke-opacity: .9; }
.cwx-week { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.cwx-wd { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 12px 4px; border-radius: 18px; background: #fff; border: 1.5px dashed var(--edge); color: var(--navy); text-decoration: none; text-align: center; }
.cwx-wd:hover { border-color: var(--navy); }
.cwx-wd .cx-dn { font-size: 14px; font-weight: 600; }
.cwx-wd b { font-size: 20px; font-weight: 600; }
.cwx-wd i { font-style: normal; font-size: 14px; color: var(--mist); }
.cwx-wd .cwx-chc { font-size: 12px; color: var(--rain); font-weight: 600; }

/* The year in numbers */
.cwx-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.cwx-stat { display: grid; gap: 2px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 var(--edge); color: var(--navy); text-decoration: none; }
a.cwx-stat:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.cwx-stat .cx-l { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); font-weight: 600; }
.cwx-stat .cx-v { font-size: 28px; font-weight: 600; line-height: 1.15; }
.cwx-stat .cx-s { font-size: 14px; color: var(--mist); }

/* Months */
.cwx-month { margin-top: 30px; }
.cwx-mh { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.cwx-mh h2 { font-size: 26px; font-weight: 600; }
.cwx-mh h2 span { color: var(--mist); font-weight: 400; }
.cwx-mh p { font-size: 15px; color: var(--mist); }
.cwx-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cwx-dow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); font-weight: 600; padding: 0 4px 2px; }
.cwx-tile { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n ic" "t t" "r r"; align-content: start; gap: 2px 4px; min-height: 92px; padding: 8px 9px 10px; border-radius: 14px; color: var(--navy); text-decoration: none; overflow: hidden; }
a.cwx-tile:hover, a.cwx-tile:focus-visible { box-shadow: inset 0 0 0 2px var(--navy); color: var(--navy); }
.cwx-wd:hover, a.cwx-stat:hover, .cwx-back:hover, .cwx-daynav a:hover { color: var(--navy); }
.cwx-tile .cx-n { grid-area: n; font-size: 14px; font-weight: 600; }
.cwx-tile .cwx-ic { grid-area: ic; }
.cwx-tile .cx-t { grid-area: t; display: flex; gap: 6px; align-items: baseline; }
.cwx-tile .cx-t b { font-size: 20px; font-weight: 600; }
.cwx-tile .cx-t i { font-style: normal; font-size: 14px; color: var(--ink-2); }
.cwx-tile .cx-r { grid-area: r; font-size: 13px; font-weight: 600; color: #1C5CAB; min-height: 1em; }
.cwx-tile .cx-rain { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--rain); border-radius: 0 2px 2px 0; }
.cwx-tile.cx-fc { background: #fff !important; border: 1.5px dashed var(--fc); }
.cwx-tile.cx-now { box-shadow: inset 0 0 0 2px var(--navy); }
.cwx-tile.cx-empty { background: #F7F5F1; color: var(--mist); }
.cwx-tile.cx-empty.cx-future { background: none; border: 1.5px dashed #EFE9DE; }
.cwx-tile.cx-pad { background: none; min-height: 0; }
.cwx-foot { margin-top: 34px; font-size: 14px; color: var(--mist); }

/* Day view */
.cwx-dayhead { margin-top: 14px; display: flex; gap: 18px; align-items: center; }
.cwx-dh { font-size: 32px; font-weight: 600; line-height: 1.15; }
.cwx-desc { color: var(--ink-2); margin-top: 2px; }
.cwx-open { margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 var(--edge); }
.cwx-facts { margin-top: 14px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cwx-facts > div { display: grid; gap: 1px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 1px 0 var(--edge); }
.cwx-facts .cx-l { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); font-weight: 600; }
.cwx-facts .cx-v { font-size: 24px; font-weight: 600; }
.cwx-facts .cx-s { font-size: 14px; color: var(--mist); }
.cwx-hourly { margin-top: 26px; padding: 20px 20px 14px; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 var(--edge); }
.cwx-hourly h3 { font-size: 22px; font-weight: 600; }
.cwx-chart { margin-top: 14px; touch-action: pan-y; }
.cwx-chart svg { display: block; overflow: visible; }
.cwx-ct { font-size: 14px; font-weight: 600; color: var(--ink-2); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cwx-ct .cx-k { font-weight: 400; color: var(--mist); display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cwx-ct .cx-ln { display: inline-block; width: 16px; height: 2px; border-radius: 1px; margin-left: 6px; }
.cwx-ct .cx-ln.cx-t { background: var(--temp); } .cwx-ct .cx-ln.cx-f { background: none; border-top: 2px dashed #C0866F; height: 0; } .cwx-ct .cx-ln.cx-c { background: none; border-top: 2px dotted #5B6B78; height: 0; }
.cwx-ct .cx-bx { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--rain); margin-left: 6px; }
.cwx-chart .cx-opn { fill: #F4EEE4; }
.cwx-chart .cx-gl { stroke: #EDE5D8; stroke-width: 1; }
.cwx-chart .cx-base { stroke: #DCCFBB; stroke-width: 1; }
.cwx-chart .cx-ax { font-size: 12px; fill: #5B6B78; font-family: var(--body); }
.cwx-chart .cx-lbl { font-size: 13px; font-weight: 600; fill: #17324A; font-family: var(--body); }
.cwx-chart .cx-lbl.cx-dim { fill: #5B6B78; font-weight: 400; }
.cwx-chart .cx-tl { fill: none; stroke: var(--temp); stroke-width: 2; stroke-linejoin: round; }
.cwx-chart .cx-fl { fill: none; stroke: #C0866F; stroke-width: 1.5; stroke-dasharray: 4 4; }
.cwx-chart .cx-cl { fill: none; stroke: #5B6B78; stroke-width: 1.5; stroke-dasharray: 1 4; stroke-linecap: round; }
.cwx-chart .cx-pt { fill: var(--temp); stroke: #fff; stroke-width: 2; }
.cwx-chart .cx-bar { fill: var(--rain); }
.cwx-chart .cx-xh { stroke: #17324A; stroke-width: 1; }
.cwx-tip { position: fixed; z-index: 30; width: 176px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: 0 8px 28px rgba(14,31,48,.18); font-size: 14px; color: var(--mist); pointer-events: none; }
.cwx-tip .cx-h { color: var(--navy); font-weight: 600; margin-bottom: 4px; }
.cwx-tip b { color: var(--navy); font-weight: 600; }
.cwx-table { margin-top: 14px; }
.cwx-table summary { cursor: pointer; font-weight: 600; color: var(--navy); padding: 8px 0; }
.cwx-scroll { overflow-x: auto; }
.cwx-table table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.cwx-table th, .cwx-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #EFE9DE; white-space: nowrap; }
.cwx-table th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.cwx-table tr.cx-op td { background: #FBF8F3; }
.cwx-daynav { margin-top: 24px; display: flex; justify-content: space-between; }
.cwx-daynav a { font-weight: 600; color: var(--navy); text-decoration: none; padding: 10px 0; }

@media (max-width: 980px) {
  .cwx-now { grid-template-columns: 1fr; }
  .cwx-stats { grid-template-columns: repeat(3, 1fr); }
  .cwx-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .cwx-week { grid-template-columns: repeat(3, 1fr); }
  .cwx-stats { grid-template-columns: repeat(2, 1fr); }
  .cwx-grid { gap: 3px; }
  .cwx-tile { grid-template-columns: 1fr; grid-template-areas: "n" "ic" "t" "r"; justify-items: center; text-align: center; min-height: 82px; padding: 5px 2px 8px; border-radius: 10px; gap: 1px; }
  .cwx-tile .cx-n { font-size: 12px; }
  .cwx-tile .cx-t i { display: none; }
  .cwx-tile .cx-t b { font-size: 16px; }
  .cwx-tile .cx-r { font-size: 11px; }
  .cwx-dow { font-size: 10px; letter-spacing: .04em; text-align: center; padding: 0; }
  .cwx-dh { font-size: 26px; }
  .cwx-dayhead { align-items: flex-start; }
  .cwx-hourly { padding: 16px 12px 10px; }
}

.cwx{display:flex;flex-direction:column;gap:0}
.cwx-dayhead{display:flex;gap:18px;align-items:center;margin-top:4px}
.cwx-dayhead .pill{margin-bottom:6px;display:inline-block}
.cwx-open{margin-top:14px;padding:14px 18px}
.cwx-hourly{margin-top:20px}
.cwx-table .tbl td,.cwx-table .tbl th{white-space:nowrap}
.cwx-table .tbl tr.cx-op td{background:var(--soft)}
.cwx-tip{position:fixed;z-index:60;width:176px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:0 8px 28px rgba(22,40,90,.18);font-size:14px;color:var(--mist);pointer-events:none}
.cwx-tip .cx-h{color:var(--navy);font-weight:600;margin-bottom:4px}.cwx-tip b{color:var(--navy);font-weight:600}

.card.cwx-dayhead{display:flex;flex-direction:row;align-items:center;gap:18px}
.card.cwx-open{display:block}
.cwx-today .cx-big b,.cwx-today .cx-c,.cwx-today b{color:#fff}
/* training */
.tr-wrap{display:flex;flex-direction:column;gap:18px}
.tr-prog{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink-2)}
.tr-bar{display:block;width:160px;height:8px;border-radius:99px;background:#ECE5D8;overflow:hidden}
.tr-bar.sm{width:110px;height:6px}
.tr-bar i{display:block;height:100%;background:linear-gradient(90deg,#C9A45E,var(--brass));border-radius:99px;transition:width .4s}
.tr-next{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--navy);padding:22px 24px;background:linear-gradient(135deg,#16285A,#22387A);border-color:#16285A}
.tr-next b{font-size:22px;font-weight:600;color:#fff}.tr-next .tr-sum{color:#D7DCEC;font-size:15px}.tr-next .tr-eb{color:var(--brass)}
.tr-next .btn{align-self:flex-start;margin-top:8px}
.tr-next.done{background:var(--ok-bg);border-color:#BFE3CC}.tr-next.done b{color:var(--ok)}.tr-next.done .tr-sum{color:var(--ok)}.tr-next.done .tr-eb{color:var(--ok)}
.tr-eb{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8A6A24}
.tr-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column}
.tr-row{display:grid;grid-template-columns:24px 26px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 6px;border-top:1px solid #F1ECE3;text-decoration:none;color:var(--navy);border-radius:10px}
.tr-list li:first-child .tr-row{border-top:0}
.tr-row:hover{background:var(--soft)}
.tr-row .tr-t{display:flex;flex-direction:column;min-width:0}.tr-row .tr-t b{font-weight:600}.tr-row small{color:var(--mist);font-size:13.5px}
.tr-n{font-size:13px;font-weight:700;color:var(--mist);text-align:center}
.tr-m{font-size:12px;font-weight:700;color:var(--ink-2);background:#F1ECE2;border-radius:99px;padding:3px 9px}
.tr-row.is-done .tr-t b{color:var(--mist)}
.tr-tick{width:22px;height:22px;border-radius:50%;border:2px solid #D7CFBF;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.tr-tick.on{background:var(--ok);border-color:var(--ok)}
.tr-back{font-size:14.5px;font-weight:600;color:var(--navy);text-decoration:none;align-self:flex-start}
.tr-lesson{display:flex;flex-direction:column;gap:18px;padding:24px}
.tr-head h2{margin:4px 0 4px;font-size:26px;line-height:1.2;text-wrap:balance}
.tr-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
.tr-film{display:flex;flex-direction:column;gap:8px;min-width:0}
.tr-film video{width:100%;max-width:100%;aspect-ratio:1440/888;border-radius:12px;background:#0E1630;display:block}
.tr-novid{border:1px dashed #D7CFBF;border-radius:12px;padding:28px;color:var(--mist);text-align:center;background:var(--soft)}
.tr-steps h3{margin:0 0 10px;font-size:17px}
.tr-steps ol{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:9px}
.tr-steps li{counter-increment:s;display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;font-size:15px;line-height:1.45}
.tr-steps li::before{content:counter(s);width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:600;font-size:12.5px;margin-top:1px}
.tr-tip{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:#FBF6EA;border:1px solid #EFE2C2;font-size:14.5px;color:var(--ink-2)}
.tr-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px solid #F1ECE3;padding-top:16px}
.tr-sp{flex:1 1 auto}
.tr-donechip{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ok)}
.tr-team{display:flex;flex-direction:column}
.tr-mate{display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #F1ECE3}
.tr-mate:first-child{border-top:0}.tr-mate .tr-t{display:flex;flex-direction:column}.tr-mate small{color:var(--mist);font-size:13px}.tr-c{font-size:13.5px;font-weight:600;color:var(--ink-2);min-width:52px;text-align:right}
@media (max-width:900px){.tr-body{grid-template-columns:minmax(0,1fr)}.tr-bar{width:110px}}
@media (max-width:600px){.tr-row{grid-template-columns:22px minmax(0,1fr) auto}.tr-n{display:none}.tr-mate .tr-bar{display:none}.tr-lesson{padding:16px}}

/* ---------- Coast compliance and training (/staff/compliance/) ---------- */
.cmpl-link{display:flex;flex-direction:row;text-align:left;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:16px 20px;margin-top:14px}
.cmpl-link b{display:block;font-weight:600}.cmpl-link span{color:var(--mist);font-size:14px}
.cmpl-link-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cmpl-link code{font-size:13.5px;background:var(--soft);border:1px solid var(--edge);border-radius:8px;padding:6px 10px;color:var(--navy)}
.cmpl-kpis{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.cmpl-kpi{background:#fff;border:1px solid var(--edge);border-radius:99px;padding:6px 14px;font-size:14px;color:var(--ink-2)}
.cmpl-kpi b{color:var(--navy);font-size:16px;margin-right:2px}
.cmpl-kpi.is-ok{background:var(--ok-bg);border-color:#BFE3CC}.cmpl-kpi.is-ok b{color:var(--ok)}
.cmpl-kpi.is-warn{background:var(--warn-bg);border-color:#F1DDA8}.cmpl-kpi.is-warn b{color:var(--warn)}
.cmpl-kpi.is-bad{background:var(--bad-bg);border-color:#F3C3A6}.cmpl-kpi.is-bad b{color:var(--bad)}
.cmpl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmpl-tbl{border-collapse:separate;border-spacing:0;min-width:980px;width:100%}
.cmpl-tbl th,.cmpl-tbl td{padding:8px 6px;text-align:center;border-bottom:1px solid #F1ECE3;vertical-align:middle}
.cmpl-tbl thead th{position:sticky;top:0;z-index:1}
.cmpl-tbl .cmpl-grp{border-left:2px solid var(--edge);text-align:left;padding-left:10px}
.cmpl-tbl .cmpl-mh{font-size:11.5px;letter-spacing:.02em;text-transform:none;line-height:1.2;min-width:64px;max-width:86px;white-space:normal}
.cmpl-tbl .cmpl-sticky{position:sticky;left:0;z-index:2;background:#fff;text-align:left;min-width:190px;padding-left:14px;box-shadow:1px 0 0 var(--edge)}
.cmpl-tbl thead .cmpl-sticky{z-index:3;background:var(--soft)}
.cmpl-tbl tbody th b{display:block;font-weight:600;font-size:15px;text-transform:none;letter-spacing:0;color:var(--navy)}
.cmpl-tbl tbody th small{display:block;color:var(--mist);font-size:12.5px;font-weight:400;text-transform:none;letter-spacing:0}
.cmpl-tbl tbody tr{cursor:pointer}
.cmpl-tbl tbody tr:hover th,.cmpl-tbl tbody tr:focus th{background:#FBF9F6}
.cmpl-tbl tbody tr:focus{outline:2px solid var(--navy);outline-offset:-2px}
.cmpl-na{background:repeating-linear-gradient(135deg,transparent 0 6px,#F6F2EA 6px 7px)}
.cmpl-done{font-weight:600;font-size:14px;white-space:nowrap}
.cmpl-pin{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:700;background:var(--info-bg);color:var(--info);border-radius:99px;padding:1px 8px;text-transform:none;letter-spacing:0}
.cmpl-pin.is-bad{background:var(--bad-bg);color:var(--bad)}
.cmpl-c{display:inline-block;font-size:12.5px;font-weight:700;line-height:1.3;padding:3px 8px;border-radius:99px;white-space:nowrap}
.cmpl-c.is-ok{background:var(--ok-bg);color:var(--ok)}
.cmpl-c.is-ok.is-soon{background:var(--warn-bg);color:var(--warn)}
.cmpl-c.is-warn{background:var(--warn-bg);color:var(--warn)}
.cmpl-c.is-bad{background:var(--bad-bg);color:var(--bad)}
.cmpl-c.is-plain{background:var(--soft);color:var(--mist);border:1px solid var(--edge)}
.cmpl-c.is-todo{color:#B9B2A4;font-size:18px;line-height:1;padding:0 6px}
.cmpl-key{margin-top:12px;font-size:13px;color:var(--mist);line-height:2}
.cmpl-key .cmpl-c{font-size:11.5px}
.cmpl-dlg{max-width:720px;max-height:min(92vh,960px);overflow:auto}
.cmpl-ph{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.cmpl-ph h2{margin:0}
.cmpl-x{border:0;background:none;font-size:28px;line-height:1;width:40px;height:40px;border-radius:50%;cursor:pointer;color:var(--mist);flex:none}
.cmpl-x:hover{background:var(--soft)}
.cmpl-prog{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin:14px 0 10px}
.cmpl-prog .cst-bar{margin:0}
.cmpl-acts{margin:12px 0 4px}
.cmpl-danger{color:var(--bad)!important;border-color:#F3C3A6!important}
.cmpl-edit{background:var(--soft);border:1px solid var(--edge);border-radius:14px;padding:14px 16px;margin-top:12px}
.cmpl-setup{background:var(--soft);border:1px solid var(--edge);border-radius:14px;padding:16px;margin:10px 0}
.cmpl-setup p{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.cmpl-code{display:block;font-size:34px;font-weight:600;letter-spacing:.12em;font-variant-numeric:tabular-nums;margin:2px 0}
.cmpl-setup small{display:block;color:var(--mist);font-size:13.5px;margin-bottom:10px}
.cmpl-setup .cst-msg{margin:10px 0 0;font-size:13.5px}
.cmpl-mods{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column}
.cmpl-mods>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:12px 0;border-top:1px solid #F1ECE3}
.cmpl-mods>li>div:first-child b{font-weight:600;margin-right:8px}
.cmpl-mods>li small{display:block;color:var(--mist);font-size:13px;margin-top:4px}
.cmpl-slot{grid-column:1/-1}
.cmpl-slot:empty{display:none}
.cmpl-slot form{background:var(--soft);border:1px solid var(--edge);border-radius:14px;padding:14px 16px}
.cmpl-answers{margin:4px 0 12px;padding-left:22px;display:flex;flex-direction:column;gap:12px;font-size:14.5px}
.cmpl-answers p{font-weight:600}
.cmpl-answers blockquote{margin:4px 0 6px;padding:8px 12px;background:#fff;border:1px solid var(--edge);border-radius:10px;white-space:pre-wrap}
.cmpl-log{margin-top:16px}
.cmpl-log summary{cursor:pointer;font-weight:600;padding:6px 0}
.cmpl-slips{display:none}
@media (max-width:640px){.cmpl-mods>li{grid-template-columns:1fr}.cmpl-code{font-size:28px}.cmpl-tbl .cmpl-sticky{min-width:128px;max-width:150px;padding-left:10px}.cmpl-tbl tbody th b{font-size:14px}.cmpl-tbl tbody th small{font-size:11.5px;white-space:normal;overflow-wrap:anywhere}.cmpl-c{font-size:11.5px;padding:3px 6px}.cmpl-tbl th,.cmpl-tbl td{padding:7px 4px}}
@media print{
  body.cmpl-printing .app>*:not(.app-main),body.cmpl-printing .topbar,body.cmpl-printing .cmpl-noprint,body.cmpl-printing .cmpl-key{display:none!important}
  body.cmpl-printing .cmpl-slips{display:grid;grid-template-columns:1fr 1fr;gap:10mm}
  .cmpl-slip{border:1.5px dashed #999;border-radius:6mm;padding:7mm;break-inside:avoid;font-size:12pt;color:#000}
  .cmpl-slip h3{font-size:18pt;margin:2mm 0}
  .cmpl-slip-t{font-size:9pt;letter-spacing:.12em;text-transform:uppercase}
  .cmpl-slip dl{display:flex;gap:8mm;margin:3mm 0}.cmpl-slip dt{font-size:9pt}.cmpl-slip dd{margin:0;font-size:20pt;font-weight:700;letter-spacing:.06em}
  .cmpl-slip-s{font-size:9.5pt}
}

/* ---------- Directors' sales (Coast staff area): classes start sl- ---------- */
.sl-feed{color:var(--mist);font-size:14.5px;margin:-6px 0 0}
.sl-feed .bad,.sl-loads .bad{color:var(--bad)}.sl-loads .ok{color:var(--ok)}
.sl-tiles .tile .ts{font-size:13.5px}
.sl-tn{font-size:12.5px;color:var(--mist);margin-top:2px}
.sl-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.sl-mcard{display:flex;flex-direction:column;gap:0}
.sl-mh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--edge);margin-bottom:4px}
.sl-big{font-size:30px;font-weight:600;line-height:1.1;letter-spacing:-.01em;display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.sl-big small{font-size:13px;font-weight:500;color:var(--mist);letter-spacing:0}
.sl-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 12px;padding:9px 0;border-bottom:1px solid #F1ECE3;font-size:15px}
.sl-r:last-child{border-bottom:0}
.sl-r span{color:var(--ink-2)}
.sl-r b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.sl-r small{grid-column:1/-1;color:var(--mist);font-size:13px}
.sl-r .ok,.sl-tbl .ok,.sl-tip .ok{color:var(--ok)}.sl-r .bad,.sl-tbl .bad,.sl-tip .bad{color:var(--bad)}
.sl-chartcard{position:relative}
.sl-ch{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap}
.sl-key{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.sl-key span,.sl-tip span{display:inline-flex;align-items:center;gap:6px}
.sl-sw{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
.sl-sw-a{background:#3D5BA3}
.sl-sw-f{background:repeating-linear-gradient(45deg,#E9EDF6 0 3px,rgba(61,91,163,.55) 3px 5px)}
.sl-sw-t{height:3px;border-radius:2px;background:#B8862B}
.sl-chart{width:100%;overflow:hidden}
.sl-chart svg{display:block;max-width:100%}
.sl-ax{font:500 11.5px var(--body);fill:#7D869E}
.sl-axnow{fill:#16285A;font-weight:700}
.sl-hit{cursor:pointer;outline:none}
.sl-hit:focus-visible{stroke:#16285A;stroke-width:1.5}
.sl-tip{position:absolute;z-index:5;min-width:170px;max-width:240px;background:#fff;border:1px solid var(--edge);border-radius:12px;box-shadow:var(--shadow-lift);padding:10px 12px;display:flex;flex-direction:column;gap:3px;font-size:13.5px;pointer-events:none}
.sl-tip[hidden]{display:none}
.sl-tip b{font-weight:600}
.sl-sec{display:flex;flex-direction:column;gap:10px}
.sl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sl-tbl{width:100%;border-collapse:collapse}
.sl-tbl th,.sl-tbl td{padding:9px 10px;text-align:right;white-space:nowrap;border-bottom:1px solid #F1ECE3;font-variant-numeric:tabular-nums}
.sl-tbl th:first-child,.sl-tbl td:first-child{text-align:left}
.sl-tbl td.sl-notes{text-align:left;white-space:normal;min-width:180px;max-width:320px;color:var(--mist);font-size:13px}
.sl-tbl tr.sl-closed td{color:#A3A9BA;background:#FCFBF8}
.sl-tbl tr.sl-future td{color:var(--ink-2)}
.sl-tbl tr.sl-total td{border-top:2px solid var(--edge);background:var(--soft)}
.sl-tbl tr.sl-cur td{background:#FBF6EA}
.sl-fc{color:var(--mist);font-style:italic}
.sl-muted{color:var(--mist)}
.sl-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--info);background:var(--info-bg);border-radius:6px;padding:1px 5px;vertical-align:1px}
.sl-tag.sl-warn{color:var(--warn);background:var(--warn-bg)}
.sl-small{font-size:13px;color:var(--mist);margin:0}
.sl-loads summary{cursor:pointer;font-weight:600}
.sl-loads ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.sc-sales{display:block;font-size:11.5px;font-weight:600;line-height:1.3;margin-top:2px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.sc-sales .ok{color:var(--ok)}.sc-sales .bad{color:var(--bad)}.sc-sales.sc-sf{color:var(--mist);font-weight:500;font-style:italic}
@media (max-width:600px){.sl-big{font-size:26px}.sl-months{grid-template-columns:minmax(0,1fr)}.sl-mh{flex-direction:column}.sl-big{align-items:flex-start}}
.sl-tbl tr.sl-hasnote td{border-bottom:0}
.sl-tbl tr.sl-noterow td{text-align:left;white-space:normal;color:var(--mist);font-size:13px;padding-top:0;line-height:1.4}
@media (max-width:700px){.sl-tbl .sl-x,.sl-tbl .sl-mo{display:none}.sl-tbl td b{white-space:nowrap}.tbl.sl-tbl{min-width:0}.sl-tbl td{white-space:normal}.sl-tbl td:first-child{white-space:normal}.sl-tbl td small{display:block}.sl-tbl th,.sl-tbl td{padding:8px 6px;font-size:13.5px}.sl-tbl .sl-tag{font-size:10px}.sl-tbl th{font-size:11px;white-space:normal}}

/* staff sign-in: the team door to training and compliance */
.card.team-door{display:flex;flex-direction:row;align-items:center;gap:14px;text-decoration:none;color:inherit;border:1px solid var(--line);transition:border-color .15s, transform .15s}
.team-door:hover{border-color:var(--gold, #D9B977);transform:translateY(-1px)}
.team-door:focus-visible{outline:3px solid var(--gold, #D9B977);outline-offset:2px}
.team-door-t{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.team-door-t b{font-size:17px}
.team-door-t span{font-size:14.5px;color:var(--mist)}
.team-door-go{font-size:22px;flex:none}
.team-or{margin:8px 0 -6px}

/* money tab: part payments and earlier dates, under an unpaid link */
.payrow{flex-wrap:wrap}
.paypart{flex:1 1 100%;margin-top:8px;font-size:14.5px}
.paypart summary{cursor:pointer;color:var(--mist);font-weight:500}
.paypart[open] summary{margin-bottom:8px}

/* directors: a tile that jumps to its list; booking: paying on the night */
a.kpi-link{text-decoration:none;color:inherit;cursor:pointer;transition:transform .15s, box-shadow .15s}
a.kpi-link:hover{transform:translateY(-1px)}
a.kpi-link:focus-visible{outline:3px solid var(--gold, #D9B977);outline-offset:2px}
#money-owed{scroll-margin-top:90px}
.paynight{display:flex;gap:10px;align-items:flex-start;margin:12px 0 4px;font-size:15px;cursor:pointer}
.paynight input{margin-top:4px;width:18px;height:18px;flex:none}

/* team page: sign-in code for someone whose email is held up */
.code-out{grid-column:1/-1;background:var(--cream-2, #F5F1EA);border-radius:12px;padding:10px 12px;font-size:15px}
.code-out b{font-size:22px;letter-spacing:.08em}
@media (max-width:860px){.team-row{grid-template-columns:1fr}}
/* sales: the combined column stands out */
.sl-year .sl-both{border-left:2px solid var(--edge);font-size:16px}
/* sales: year-to-date headline */
.sl-ytd{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.sl-ytd-big{font-size:clamp(34px,6vw,52px);font-weight:700;line-height:1.05;margin:0;color:var(--navy)}
.sl-ytd-split{margin:0;color:var(--mist);font-size:15px}
.sl-ytd-vs{margin:6px 0 0;font-size:18px}
.sl-ytd-vs.ok b{color:var(--ok, #1F7A4D)}.sl-ytd-vs.bad b{color:var(--bad, #A4441F)}

/* ---------- Directors' KPIs (Coast staff area): ten dials, classes start kp- ---------- */
.kp-panel{background:#fff;border:1px solid var(--edge);border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.kp-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kp-head h2{margin:0;font-size:22px;font-weight:600;flex:1}
.kp-ico{width:46px;height:46px;border-radius:50%;background:#F1F0EC;display:grid;place-items:center}
.kp-ico svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:2}.kp-ico circle+circle{fill:var(--navy)}
.kp-pill{font-size:14px;font-weight:500;color:var(--ink-2);background:#F1F0EC;border-radius:99px;padding:8px 15px}
.kp-sub{margin:8px 0 -4px;font-size:15px;font-weight:600;color:var(--ink-2)}
.kp-note{margin:-6px 0 0;font-size:14px;color:var(--warn)}
.kp-foot{margin:2px 0 0;font-size:13px;color:var(--mist)}
.kp-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.kp-card{--kp:#9CA1AF;container-type:inline-size;background:#15171C;color:#fff;border-radius:24px;padding:18px 16px 20px;display:flex;flex-direction:column;gap:6px;min-width:0;animation:kp-in .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--kp-i,0) * 110ms)}
.kp-good{--kp:#7BE495}.kp-bad{--kp:#FF8A65}
.kp-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:26px}
.kp-top h3{margin:0;font-size:15.5px;font-weight:500;color:#fff;font-family:var(--body);letter-spacing:0;line-height:1.25}
.kp-chip{flex:none;font-size:12px;font-weight:700;border-radius:99px;padding:4px 9px;color:#15171C;background:var(--kp);white-space:nowrap}
.kp-dial{position:relative;width:100%;max-width:210px;align-self:center;aspect-ratio:1/1}
.kp-dial svg{display:block;width:100%;height:100%;overflow:visible}
.kp-track{fill:none;stroke:#2A2D35;stroke-width:14;stroke-linecap:round}
.kp-arc{fill:none;stroke:var(--kp);stroke-width:14;stroke-linecap:round}
.kp-goal{fill:#D9BC7E}
.kp-knob{fill:#fff;stroke:var(--kp);stroke-width:4}
.kp-mid{position:absolute;left:8%;right:8%;top:31%;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.kp-l,.kp-t{font-size:12.5px;color:#A9AEBB;line-height:1.3}
.kp-v{font-size:clamp(18px,14cqi,28px);font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;color:#fff}
.kp-v-none{font-size:20px;color:#A9AEBB;font-weight:600}
.kp-st{margin:-12px 0 0;text-align:center;font-size:13.5px;font-weight:600;color:var(--kp);line-height:1.35}
@keyframes kp-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kp-card{animation:none}}
@media (max-width:1280px){.kp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.kp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kp-panel{padding:14px;border-radius:22px}.kp-head h2{font-size:19px}.kp-pill{order:3;flex-basis:100%;text-align:center}.kp-card{padding:14px 12px 16px;border-radius:20px}.kp-top{flex-direction:column;align-items:flex-start;gap:6px}.kp-l,.kp-t{font-size:11.5px}.kp-st{font-size:12.5px;margin-top:-8px}}
.kp-pick{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.kp-range{font:600 14px var(--body);color:var(--navy);padding:0 10px;display:inline-flex;align-items:center;min-width:112px;justify-content:center;white-space:nowrap}
.seg button:disabled{opacity:.35;cursor:default}
.kp-custom{display:flex;gap:10px 14px;align-items:flex-end;flex-wrap:wrap;justify-content:flex-end;margin:-8px 0 0}
.kp-custom[hidden]{display:none}
.kp-custom label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--ink-2)}
.kp-custom input{font:500 15px var(--body);padding:8px 10px;border:1px solid var(--edge);border-radius:10px;background:#fff;color:var(--navy);min-height:40px}
@media (max-width:820px){.kp-pick{justify-content:flex-start}.kp-custom{justify-content:flex-start}}
.kp-chip.kp-chip-part{background:#F5C451;color:#15171C}
.kp-part{margin:0;text-align:center;font-size:12.5px;font-weight:600;color:#F5C451;line-height:1.35}
.kp-card:has(.kp-part) .kp-arc,.kp-card:has(.kp-part) .kp-knob{opacity:.55}