/* Design tokens: see tokens.css (linked before this file). */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:'Jost',sans-serif;background:var(--warm);color:var(--charcoal);min-height:100vh}
.hide{display:none!important}

/* ══ APP SHELL ══ */
/* Shell is always visible: app.html is only served to authenticated staff
   (see health.index), so there is no pre-login hidden state to gate here. */
#appShell{display:flex;flex-direction:column;min-height:100vh}
.nav-tabs{display:flex;gap:2px}
.nav-tab{
  padding:18px 16px;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(248,244,238,0.4);cursor:pointer;border-bottom:2px solid transparent;
  transition:all 0.2s;white-space:nowrap;
  /* Rendered as <button> (prototype used <div>): strip the default button chrome
     so the cream label shows on the teal nav. */
  background:none;border-top:none;border-left:none;border-right:none;
  font-family:inherit;-webkit-appearance:none;appearance:none;
}
.nav-tab:hover{color:rgba(248,244,238,0.7)}
/* §E2 — strengthened active state: gold text + 2px gold rule (kept) PLUS a
   subtle gold-tinted pill so the current surface reads at a glance. */
.nav-tab.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(191,164,101,0.10)}

/* ══ §E2 STAFF NAV GROUPS — primary tabs + collapsible clusters ══════════════
   buildNav renders primary tabs flat, then each group as a .nav-group with a
   .nav-group-btn (label + caret) toggling a hidden .nav-group-menu of .nav-tab
   buttons. Group children dispatch via the SAME showTab(id). */
.nav-group{position:relative;display:flex;align-items:stretch}
.nav-group-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:18px 16px;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(248,244,238,0.4);cursor:pointer;border-bottom:2px solid transparent;
  transition:all 0.2s;white-space:nowrap;
  background:none;border-top:none;border-left:none;border-right:none;
  font-family:inherit;-webkit-appearance:none;appearance:none;
}
.nav-group-btn:hover{color:rgba(248,244,238,0.7)}
.nav-group-caret{font-size:9px;line-height:1;transition:transform 0.2s}
.nav-group.open .nav-group-btn{color:var(--gold)}
.nav-group.open .nav-group-caret{transform:rotate(180deg)}
/* parent lights gold when any child tab is the active surface — the front desk
   is never lost inside Operations. */
.nav-group.has-active .nav-group-btn{color:var(--gold)}
.nav-group-menu{
  display:none;position:absolute;top:100%;left:0;min-width:180px;z-index:210;
  flex-direction:column;background:var(--navy);
  border:1px solid rgba(191,164,101,0.18);border-top:2px solid var(--gold);
  border-radius:0 0 10px 10px;box-shadow:var(--shadow-md);overflow:hidden;
}
.nav-group.open .nav-group-menu{display:flex}
.nav-group-menu .nav-tab{
  border-bottom:none;padding:13px 16px;text-align:left;width:100%;
  border-left:2px solid transparent;
}
.nav-group-menu .nav-tab.active{
  border-bottom-color:transparent;border-left-color:var(--gold);
  background:rgba(191,164,101,0.12);
}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-user{font-family:var(--font-mono);font-size:12px;color:rgba(248,244,238,0.45);letter-spacing:0.06em}
.nav-role-badge{
  font-size:10px;padding:3px 10px;border-radius:10px;letter-spacing:0.08em;
  text-transform:uppercase;font-weight:500;
}
.badge-admin{background:rgba(191,164,101,0.15);color:var(--gold)}
.badge-staff{background:rgba(74,222,128,0.1);color:var(--green)}
.badge-member{background:rgba(99,179,237,0.1);color:#63b3ed}
.badge-guest{background:rgba(255,255,255,0.07);color:rgba(248,244,238,0.5)}

.app-body{flex:1;overflow:auto}
.portal{display:none;padding:28px 24px 60px;max-width:900px;margin:0 auto}
.portal.active{display:block}

/* ══ SHARED COMPONENTS ══ */
/* page H1 keeps the Cormorant serif (the warmth) + adopts the print h1
   tightening discipline (composed, not airy) — §2 type law. */
.page-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;
  color:var(--teal);letter-spacing:-.01em;line-height:1.05;margin-bottom:4px}
.page-sub{font-size:13px;color:var(--mid);margin-bottom:28px;line-height:1.6}
.section-card{background:white;border:1.5px solid var(--border-s);border-radius:14px;padding:24px;margin-bottom:20px}
.sc-title{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:300;
  color:var(--teal);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-s)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
/* (removed dead .stat-card/.stat-val/.stat-label — serif numerals that competed
   with the single numeral law: .statbox-val, Inter 800. One numeral philosophy.) */
.tag{display:inline-block;font-size:10px;padding:3px 10px;border-radius:10px;font-weight:500;letter-spacing:0.06em}
.tag-gold{background:rgba(191,164,101,0.12);color:var(--gold-ink)}
.tag-teal{background:rgba(26,60,64,0.1);color:var(--teal)}
.tag-green{background:rgba(74,222,128,0.1);color:#166534}
.tag-blue{background:rgba(99,179,237,0.1);color:#1e40af}
.tag-red{background:rgba(248,113,113,0.1);color:#991b1b}
.btn-p{
  padding:13px 24px;background:var(--navy);border:1px solid rgba(191,164,101,0.3);
  border-radius:10px;font-family:'Jost',sans-serif;font-size:12px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);cursor:pointer;transition:all 0.2s;
}
.btn-p:hover{background:var(--navy-600)}
.btn-g{
  padding:13px 20px;background:transparent;border:1.5px solid var(--border-s);
  border-radius:10px;font-family:'Jost',sans-serif;font-size:12px;color:var(--mid);
  cursor:pointer;transition:all 0.2s;
}
.btn-g:hover{border-color:var(--teal);color:var(--teal)}
.btn-row{display:flex;gap:10px;margin-top:20px}

/* ══ BOOKING (member) ══ */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:24px}
.svc-card{
  background:white;border:1.5px solid var(--border-s);border-radius:12px;
  padding:16px 14px;cursor:pointer;transition:all 0.2s;position:relative;
}
.svc-card:hover:not(.locked):not(.depleted){border-color:var(--gold);transform:translateY(-2px)}
.svc-card.selected{background:var(--teal);border-color:var(--teal)}
.svc-card.selected .sc-name{color:var(--gold-light)}
.svc-card.selected .sc-dur{color:rgba(248,244,238,0.4)}
.svc-card.selected .sc-price{color:var(--gold)}
.svc-card.selected::after{content:'✓';position:absolute;top:10px;right:10px;
  width:20px;height:20px;background:var(--gold);color:var(--teal);border-radius:50%;
  font-size:11px;display:flex;align-items:center;justify-content:center;
  line-height:20px;text-align:center}
.svc-card.locked{opacity:0.35;cursor:not-allowed}
.svc-card.depleted{opacity:0.5;cursor:not-allowed}
.svc-card.included::before{content:'Included';position:absolute;top:8px;right:8px;
  font-size:9px;padding:2px 7px;background:rgba(26,60,64,0.08);color:var(--teal);
  border-radius:8px;letter-spacing:0.06em}
.sc-name{font-size:13px;font-weight:500;color:var(--charcoal);margin-bottom:4px;line-height:1.3}
.sc-dur{font-size:11px;color:var(--mid);letter-spacing:0.04em}
.sc-price{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--teal);margin-top:8px}
.lock-msg{font-size:10px;color:var(--red);margin-top:4px;letter-spacing:0.04em}

/* ══ CLIENT PROFILES ══ */
.client-list{display:flex;flex-direction:column;gap:10px}
.client-row{
  background:white;border:1.5px solid var(--border-s);border-radius:12px;
  padding:16px 18px;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;transition:all 0.2s;
}
.client-row:hover{border-color:var(--gold);transform:translateX(3px)}
/* selected/active row state (replaces inline gold-border hack on Clients rows) */
.is-selected{border-color:var(--gold);background:rgba(191,164,101,0.05)}
.cr-name{font-size:14px;font-weight:500;color:var(--charcoal)}
.cr-meta{font-size:12px;color:var(--mid);margin-top:2px}
.cr-right{text-align:right}

/* ══ DAY BOARD (staff) ══ */
.db-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.db-head .page-sub{margin-bottom:0}
/* spacing utility for the Day Board grid/cards (formalizes inline gap/margin residuals) */
.db-grid{gap:16px;margin-bottom:24px}
.db-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:0.16em;
  text-transform:uppercase;color:var(--mid);white-space:nowrap;padding-top:8px}
/* Live pulse breathes (2.6s) with a gentle floor — a calm heartbeat, not a
   blink (§3 motion personality: ambient signals BREATHE). */
.db-live-dot{width:8px;height:8px;border-radius:var(--radius-round);background:var(--gold);
  animation:dbPulse var(--dur-pulse) var(--ease-in-out) infinite}
@keyframes dbPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.85)}}
.db-wrap{overflow-x:auto;padding-bottom:16px;-webkit-overflow-scrolling:touch}
.db-cols{display:flex;gap:14px;min-width:max-content;align-items:flex-start}
.db-col{
  width:232px;flex-shrink:0;background:var(--surface);
  border:1px solid var(--border-s);border-left:3px solid var(--status-color,var(--blue));
  border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);
}
.db-col:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.db-col[data-status="pending"]{--status-color:var(--blue)}
.db-col[data-status="confirmed"]{--status-color:var(--teal)}
/* done/no-show recede via the status rail + the card's own .done service tint,
   NOT a heavy whole-card fade stacked on a low-contrast badge (the old 0.74
   double-dimmed them muddy). A light 0.9 keeps them scannable but secondary. */
.db-col[data-status="completed"]{--status-color:var(--green);opacity:0.9}
.db-col[data-status="no_show"]{--status-color:var(--mid);opacity:0.9}
.db-col[data-status="cancelled"]{--status-color:var(--mid);opacity:0.6}
.db-col-hdr{display:flex;align-items:center;gap:10px;background:var(--navy);padding:12px 14px}
.dch-avatar{flex-shrink:0;width:34px;height:34px;border-radius:var(--radius-round);
  background:rgba(191,164,101,0.16);color:var(--gold);display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:600;letter-spacing:0.03em}
.dch-id{min-width:0}
.dch-name{font-size:var(--text-md);font-weight:500;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dch-arrival{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:0.08em;text-transform:uppercase;
  color:var(--gold-light);margin-top:1px}
.db-col-body{padding:12px}
.db-svc-card{
  border-radius:var(--radius-md);padding:11px 12px;font-size:var(--text-sm);
  border:1px solid transparent;background:var(--surface-2);transition:all var(--dur-1) var(--ease-out);
}
.db-svc-seq{font-weight:600;color:var(--charcoal);font-size:var(--text-base);letter-spacing:0.01em}
.db-svc-meta{font-size:var(--text-xs);color:var(--mid);margin-top:3px;line-height:1.4}
.db-svc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.db-svc-card.queued{background:rgba(99,179,237,0.07)}
.db-svc-card.inprogress{background:rgba(26,60,64,0.06)}
.db-svc-card.done{background:rgba(0,0,0,0.03);opacity:0.7}
.db-svc-card.locked{background:var(--gold-pale)}
.db-svc-badge{font-size:var(--text-2xs);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.db-svc-badge.s-queued{background:rgba(99,179,237,0.16);color:var(--blue-ink)}
.db-svc-badge.s-inprogress{background:rgba(26,60,64,0.1);color:var(--teal)}
.db-svc-badge.s-done{background:rgba(74,222,128,0.18);color:var(--green-ink)}
.db-svc-badge.s-locked{background:rgba(191,164,101,0.16);color:var(--gold-ink)}
.db-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.db-acts .edit-btn{white-space:nowrap}

/* ── In Session (in_service) — teal-active card + badge ─────────────────── */
.db-svc-card.inservice{background:rgba(26,60,64,0.10);box-shadow:inset 3px 0 0 var(--teal)}
.db-svc-badge.s-inservice{background:var(--teal);color:#fff}

/* ── Chip rail: [status | forms | payment] under the service line ───────── */
.db-chiprail{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.db-chip-btn{appearance:none;background:transparent;cursor:pointer}
.db-chip-btn:hover{background:var(--gold-pale)}

/* ── Visit timer (in-session): mono countdown + thin meter; past-100% goes
     gold (informational), never red. Meter width transition is covered by
     the global prefers-reduced-motion override in ui.css. ─────────────────── */
.db-timer{margin-top:10px}
.db-timer-text{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.04em;color:var(--teal)}
.db-timer.is-over .db-timer-text{color:var(--gold-ink)}
.db-timer-track{height:4px;margin-top:5px;border-radius:2px}
.db-timer .meter{background:var(--teal)}
.db-timer.is-over .meter{background:var(--gold)}

/* ── Sequence checklist (in-session): tappable check rows ───────────────── */
.db-seqlist{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.db-seq-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  appearance:none;background:transparent;border:1px solid var(--border-s);border-radius:6px;
  padding:6px 8px;cursor:pointer;font:inherit;color:var(--charcoal)}
.db-seq-row:hover{background:rgba(26,60,64,0.05)}
.db-seq-box{width:14px;height:14px;flex:none;border:1.5px solid var(--teal);border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center}
.db-seq-row.is-done .db-seq-box{background:var(--teal)}
.db-seq-row.is-done .db-seq-box::after{content:'✓';color:#fff;font-size:10px;line-height:1}
.db-seq-name{flex:1;font-size:var(--text-xs)}
.db-seq-row.is-done .db-seq-name{text-decoration:line-through;opacity:0.6}
.db-seq-min{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--mid)}

/* ── Payment modal (Day Board chip) + rebook payment-link opt-in ────────── */
.pay-modal-summary{margin-bottom:14px}
.pay-modal-amount{font-size:var(--text-xl);font-weight:700;color:var(--charcoal)}
.pay-modal-client{font-size:var(--text-xs);color:var(--mid);margin-top:2px}
.pay-modal-note{font-size:var(--text-xs);color:var(--gold-ink);margin-top:8px}
.pay-modal-actions{display:flex;flex-direction:column;gap:8px}
.rebook-paylink{display:flex;align-items:center;gap:8px;margin-top:12px;
  font-size:var(--text-xs);color:var(--charcoal);cursor:pointer}
#dbCols.just-updated .db-col{animation:dbFlash var(--dur-4) var(--ease-out)}
@keyframes dbFlash{0%{box-shadow:0 0 0 2px var(--gold-ring)}100%{box-shadow:var(--shadow-sm)}}

/* shared queue rows + dots (reused on Orders / Resets / Dashboard) */
.queue-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--border-s)}
.queue-row:last-child{border-bottom:none}
.queue-row__title{font-size:var(--text-base);font-weight:500;color:var(--charcoal)}
.queue-row__meta{font-size:var(--text-xs);color:var(--mid);margin-top:2px}
.btn-done{padding:6px 13px;background:rgba(74,222,128,0.12);border:1px solid rgba(74,222,128,0.32);
  border-radius:var(--radius-sm);font-family:var(--font-ui);font-size:var(--text-xs);font-weight:500;
  color:var(--green-ink);cursor:pointer;transition:all var(--dur-2) var(--ease-out)}
.btn-done:hover{background:rgba(74,222,128,0.2)}
.dot{width:8px;height:8px;border-radius:var(--radius-round);display:inline-block}
.dot--amber{background:var(--amber)}
.dot--red{background:var(--red)}
.dot--green{background:var(--green)}
/* queue-row internals (block-off rows on Day Board / Block-offs) */
.queue-row__main{width:100%}
.queue-row__head{display:flex;gap:8px;align-items:center;margin-bottom:3px}
/* dot + text lead block (Orders / Resets / Dashboard queue rows) */
.queue-row__lead{display:flex;align-items:flex-start;gap:12px}
.queue-row__lead .dot{margin-top:5px;flex-shrink:0}
.edit-btn--danger{border-color:rgba(248,113,113,0.45);color:var(--red)}
.edit-btn--danger:hover{border-color:var(--red);background:rgba(248,113,113,0.06)}

/* ══ DASHBOARD (statbox grid + section dividers) ══ */
.stat-row{margin-bottom:20px}
/* live-pulse flash when a polled count changes (matches #dbCols.just-updated) */
.stat-row.just-updated .statbox{animation:dbFlash var(--dur-4) var(--ease-out)}
/* action row under a statbox value / at the foot of a section card */
.card-act{margin-top:12px}
/* .sec divider leading a section card sits flush with the card padding */
.section-card .sec:first-child{margin-top:0}

/* ══ ADMIN ══ */
.member-table{width:100%;border-collapse:collapse}
/* §C6 editorial table: mono header voice + single gold rule under the head */
.member-table th{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--mid);padding:10px 12px;border-bottom:1.5px solid var(--gold);text-align:left}
.member-table td{padding:13px 12px;border-bottom:1px solid rgba(0,0,0,0.04);
  font-size:13px;vertical-align:middle}
.member-table tr:hover td{background:rgba(26,60,64,0.02)}
.member-table tr:last-child td{border-bottom:none}
.td-primary{font-weight:600;color:var(--charcoal);display:block}
.td-sub{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--faint-ink);display:block;margin-top:1px}
.edit-btn{padding:5px 12px;background:transparent;border:1px solid var(--border-s);
  border-radius:7px;font-family:'Jost',sans-serif;font-size:11px;color:var(--mid);
  cursor:pointer;transition:all 0.2s}
.edit-btn:hover{border-color:var(--teal);color:var(--teal)}

/* (legacy .toast block removed — ui.css owns the toast component, §A0.1) */

/* ══ RESPONSIVE ══ */
@media(max-width:768px){
  .nav-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nav-tab,.nav-group-btn{padding:16px 12px;font-size:10px}
  /* on narrow chrome the group menu anchors to the scroll container's left
     edge so it never overflows offscreen. */
  .nav-group-menu{left:auto;right:0}
  .grid2,.grid3{grid-template-columns:1fr}
  .portal{padding:20px 16px 60px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:768px) and (max-width:1024px){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .nav-tab,.nav-group-btn{padding:18px 14px}
}
  /* BUILD-YOUR-OWN SMOOTHIE */
  .build-step { padding:14px 0; border-bottom:1px solid rgba(0,0,0,0.05); }
  .build-step:last-of-type { border-bottom:none; }
  .build-step-label { font-size:10px; letter-spacing:0.13em; text-transform:uppercase; color:var(--mid); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
  .build-fixed { color:var(--gold-ink); background:var(--gold-pale); border:1px solid var(--border); border-radius:6px; padding:2px 8px; font-size:9px; letter-spacing:0.1em; }
  .build-req { color:var(--mid); font-size:9px; letter-spacing:0.08em; font-weight:400; }
  .build-opts { display:flex; flex-wrap:wrap; gap:8px; }
  .build-btn { padding:9px 18px; border:1.5px solid var(--border-s); border-radius:20px; background:white; font-family:var(--font-ui); font-size:13px; color:var(--charcoal); cursor:pointer; transition:all 0.18s; white-space:nowrap; }
  .build-btn:hover { border-color:var(--gold); color:var(--teal); }
  .build-btn.active { background:var(--teal); border-color:var(--teal); color:var(--gold); font-weight:500; }
  .build-btn:disabled { opacity:0.5; cursor:default; }
  /* the always-included base (Coconut) is a SETTLED FACT, not a faded control:
     gold-ink on gold-pale w/ a solid border reads legibly (clears the contrast
     floor) where the old gold-on-teal-at-0.5-opacity failed. */
  .build-btn.active:disabled { background:var(--gold-pale); border-color:var(--border); color:var(--gold-ink); font-weight:600; opacity:1; cursor:default; }
  /* BEVERAGES */
  .bev-card { background:white; border:1.5px solid var(--border-s); border-radius:12px; padding:14px; transition:all 0.2s; }
  .bev-card.selected { border-color:var(--teal); background:rgba(26,60,64,0.03); }
  .bev-name { font-size:13px; font-weight:500; color:var(--charcoal); margin-bottom:2px; }
  /* ROOM RESET */
  .room-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
  .room-btn { background:white; border:1.5px solid var(--border-s); border-radius:12px; padding:16px 14px; cursor:pointer; transition:all 0.2s; }
  .room-btn:hover { border-color:var(--red); background:rgba(248,113,113,0.04); transform:translateY(-1px); }
  .room-btn:active { transform:scale(0.97); }
  /* FORM */
  .form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
  .form-label { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-light); }
  .form-input { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:11px 14px; font-family:var(--font-ui); font-size:13.5px; color:var(--cream); outline:none; transition:border-color 0.2s; }
  .form-input:focus { border-color:rgba(191,164,101,0.4); }
  select.form-input option { background:#1c2e2f; color:var(--cream); }
  /* light-surface variant — replaces the 20× inline background/color/border cluster (§C) */
  .form-input--light { background:#fff; color:var(--charcoal); border-color:var(--border-s); }
  .form-input--light:focus { border-color:var(--gold); }
  select.form-input--light option { background:#fff; color:var(--charcoal); }
  .btn-primary{width:100%;padding:14px;background:var(--navy);border:none;border-radius:12px;font-family:var(--font-ui);font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);cursor:pointer;margin-top:8px}

/* ══ NAV BAR (shell-specific aliases) ══ */
.nav-bar {
  background: var(--navy);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(191,164,101,0.12);
  position: sticky;
  top: 0;
  z-index: 200;
}
/* §1 signature move 2 — 2px full-bleed gold top-accent across the navy chrome
   (the catalog's opening .sheet::before gesture); brands every staff screen
   with print-family kinship. Gold scarcity: the ONE gold rule on the chrome. */
.nav-bar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gold);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: #fff;
  text-transform: uppercase;
  padding: 13px 0;
}
.nav-mark { height: 28px; width: auto; display: block; }
.login-logo-img { width: 168px; height: auto; margin: 0 auto 18px; display: block; }
.nav-meta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-signout {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  color: rgba(248,244,238,0.4);
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: all 0.2s;
}
.nav-signout:hover { border-color: rgba(191,164,101,0.3); color: var(--gold); }

/* ══ LOGIN PAGE — the doorway (login.html, staff side) ══════════════════════
   §1 signature move 3: one institution's front door. The flat cream card is
   re-skinned to the portal-entry navy-radial doorway — gold spiral mark,
   Cormorant headline, mono eyebrow. Two lanes (staff + member), one entrance.
   All strings are access/welcome framing (compliance 0 HARD). */
body.login {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--navy-600), var(--navy-deep) 70%);
  font-family: var(--font-ui); color: var(--cream);
}
.login-card {
  position: relative; background: var(--navy);
  border: 1px solid rgba(191,164,101,0.22); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg); width: min(92vw, 400px);
  padding: 40px 32px 30px; text-align: center; overflow: hidden;
}
/* 2px gold top-hairline — the same opening gesture as the staff chrome */
.login-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gold);
}
.login-mark { width: 56px; height: auto; margin: 0 auto 18px; display: block; }
.login-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: rgba(248,244,238,0.5); margin-bottom: 10px;
}
.login-eyebrow .g { color: var(--gold); }
.login-card h1 {
  font-family: var(--font-display); font-weight: 300; font-size: var(--text-2xl);
  color: var(--cream); letter-spacing: .01em; line-height: 1.05; margin: 0 0 .2rem;
}
.login-card .subtitle {
  color: rgba(248,244,238,0.55); font-size: var(--text-md); margin: 0 0 1.6rem;
}
/* primary CTA = the portal entry gold button (navy ink), with the C14 ambient
   single-CTA hover glow (.pe-btn:hover lives in ui.css). */
.login-card .pe-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: .85rem 1rem; border: 0; border-radius: var(--radius-md);
  background: var(--gold); color: var(--navy);
  font-family: var(--font-ui); font-size: var(--text-md); font-weight: 600;
  letter-spacing: .04em; cursor: pointer; text-decoration: none;
  transition: box-shadow var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
.login-card .pe-btn:hover { filter: brightness(1.02); }
/* spiral loader on submit (C12) — shown when the card flips to a waiting state */
.login-card.is-loading .pe-btn { display: none; }
.login-spinner { display: none; }
.login-card.is-loading .login-spinner { display: block; margin: 6px auto 2px; }
.footer { margin-top: 1.8rem; font-size: .72rem; color: rgba(248,244,238,0.35);
  font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }

/* ══ CLIENTS + BLOCK-OFFS (S2 lane — light-card form/detail patterns) ══ */
/* form labels inside light section-cards read mid (replaces per-label inline color) */
.section-card .form-label{color:var(--mid)}
.form-req{color:var(--red)}
.form-check{width:16px;height:16px;cursor:pointer;flex-shrink:0}
.form-group--row{flex-direction:row;align-items:center;gap:10px}
/* checkbox + label rows (booking-panel services, block-off affected services) */
.check-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border-s)}
.check-row:last-child{border-bottom:none}
.check-row label{font-size:13px;color:var(--charcoal);cursor:pointer;flex:1}
.check-row--tight{padding:4px 0;border-bottom:none}
.check-row--tight label{font-size:12px;flex:0 1 auto}
/* inline form feedback */
.inline-err{font-size:12px;color:var(--red)}
.inline-ok{font-size:12px;color:var(--teal);background:rgba(26,60,64,0.06);border-radius:8px;padding:8px 12px}
.inline-err-box{font-size:12px;color:var(--red);background:rgba(248,113,113,0.06);border-radius:8px;padding:8px 12px}
/* success card (booking confirmation in the client detail panel) */
.ok-card{background:rgba(26,60,64,0.06);border:1px solid rgba(26,60,64,0.12);border-radius:10px;padding:14px;font-size:13px;margin-top:12px}
.ok-card-title{font-weight:500;color:var(--teal);margin-bottom:8px}
/* client detail-panel: on desktop it holds the viewport (sticky) instead of
   leaving a tall dead void on the right while the left list scrolls. Below the
   grid2 collapse breakpoint it stacks normally (no sticky). align-self:start so
   the grid item doesn't stretch-fill and defeat sticky. */
@media(min-width:769px){
  #clientDetail{position:sticky;top:88px;align-self:start}
}
/* client detail-panel helpers */
.kv-list{margin-bottom:16px}
.act-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sub-panel{border-top:1px solid var(--border-s);margin-top:16px;padding-top:16px}
.cr-empty{color:var(--faint-ink);font-size:var(--text-2xs)}
.edit-btn--accent{border-color:var(--teal);color:var(--teal)}
.edit-btn--accent:hover{background:rgba(26,60,64,0.05)}
.edit-btn:disabled{opacity:0.4;cursor:not-allowed}
.tag-mid{background:rgba(0,0,0,0.06);color:var(--mid)}
/* block-off form layout */
.bo-grid{margin-bottom:14px}
.bo-svc-list{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px}
.field-row{display:flex;gap:8px}
.field-row>*{flex:1}
.input-narrow{max-width:200px}

/* ══ ORDERS + ROOM RESETS (S3 lane) ══ */
/* tighter form grid inside section-cards (food request) */
.form-grid{gap:12px;margin-bottom:12px}
/* dark "your selection" summary bar shared by smoothie + beverage builders */
.build-summary{background:var(--teal-deep);border-radius:var(--radius-lg);padding:14px 18px;margin-top:14px}
.build-summary .btn-primary{padding:12px}
.build-summary-label{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-light);margin-bottom:6px}
.build-summary-text{font-size:var(--text-base);color:var(--cream);line-height:1.6;margin-bottom:12px}
.build-hint{font-size:var(--text-sm);color:var(--mid);margin-top:14px}
.bev-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.bev-card .build-opts{margin-top:10px}
/* room tiles: name/sub lines + pending (awaiting reset) dimmed/inert state */
.room-btn-name{font-size:14px;font-weight:500;color:var(--teal)}
.room-btn-sub{font-size:11px;color:var(--mid);margin-top:4px}
.room-btn--pending{opacity:0.5;cursor:default;pointer-events:none}
.room-btn--pending .room-btn-sub{color:var(--red-ink)}
/* recently-cleaned rows */
.done-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(0,0,0,0.04);opacity:0.5;font-size:12px}
.done-row:last-child{border-bottom:none}

/* ══ STAFF (S3 lane) ══ */
.table-wrap{overflow-x:auto}
/* avatar chip + two-line identity cell (light-surface twin of .dch-avatar) */
.td-id{display:flex;align-items:center;gap:10px}
.avatar-chip{flex-shrink:0;width:32px;height:32px;border-radius:var(--radius-round);
  background:rgba(191,164,101,0.16);color:var(--gold-ink);display:inline-flex;align-items:center;
  justify-content:center;font-size:var(--text-xs);font-weight:600;letter-spacing:0.03em}
.select-compact{padding:4px 8px;font-size:12px;min-width:90px}
.form-input--light:disabled,.form-check:disabled{opacity:0.55;cursor:not-allowed}
/* inline per-row save feedback */
.staff-msg{font-size:11px;min-width:80px}
.staff-msg--ok{color:var(--teal)}
.staff-msg--err{color:var(--red)}

/* ══ S4 — REVENUE WIDGETS + ACTIVITY (§B2/§B3/§B5/§B6/§B10/§B11/§B9) ══ */
/* B2/B3 widget row between the stat grid and the queue cards */
.dash-econ{margin-bottom:20px}
.dash-econ .statbox{height:100%}
.statbox-of{font-size:20px;font-weight:600;color:var(--gold-ink);letter-spacing:0}
.statbox-note{font-size:var(--text-sm);color:var(--mid);margin-top:10px;line-height:1.5}
/* fill bars — widths/heights are set by JS from API payload values
   (applyFillStyles), so markup carries no inline style attributes */
.fill-track{height:8px;border-radius:3px;background:rgba(26,60,64,0.10);overflow:hidden;margin-top:12px}
.fill-track .meter{display:block;height:100%;border-radius:0;transition:width var(--dur-3) var(--ease-out)}
.fill-bar{display:block;height:100%;border-radius:0;background:var(--teal);transition:width var(--dur-3) var(--ease-out)}
.fill-bar--gold{background:var(--gold)}
.fill-scale{display:flex;justify-content:space-between;margin-top:5px;font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;color:var(--faint-ink);text-transform:uppercase}
.statfoot{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--faint-ink);margin-top:10px;letter-spacing:.04em}
/* B2 slim break-even rail in the Day Board head (next to the Live pulse) */
.db-head-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.db-bemeter{width:170px}
.db-bemeter .fill-track{margin-top:0}
.db-bemeter-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;color:var(--faint-ink);text-transform:uppercase;text-align:right;margin-top:4px}
/* B10 concurrency strip — teal up to the ceiling, gold zone = free capacity */
.conc-strip{display:flex;gap:4px;align-items:flex-end;margin-top:6px}
.conc-col{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0}
.conc-cells{display:flex;flex-direction:column-reverse;gap:2px}
.conc-cell{display:block;height:7px;border-radius:2px;background:rgba(26,60,64,0.07)}
.conc-cell--gz{background:rgba(191,164,101,0.14)}
.conc-cell--on{background:var(--teal)}
.conc-cell--on.conc-cell--gz{background:var(--gold)}
.conc-count{font-family:var(--font-mono);font-size:9px;color:var(--faint-ink);text-align:center;line-height:1.2}
.conc-col--busy .conc-count{color:var(--charcoal);font-weight:600}
.conc-count--over{color:var(--red-ink)!important}
.conc-time{font-family:var(--font-mono);font-size:8px;letter-spacing:.02em;color:var(--faint-ink);text-align:center;white-space:nowrap;margin-top:2px;min-height:10px}
.conc-legend{display:flex;gap:16px;margin-top:12px;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint-ink);align-items:center;flex-wrap:wrap}
.conc-key{display:inline-block;width:10px;height:7px;border-radius:2px;margin-right:5px}
.conc-key--teal{background:var(--teal)}
.conc-key--gold{background:var(--gold)}
/* B5 rebook modal day buttons */
.rebook-days{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.rebook-days .edit-btn{width:100%;text-align:left;padding:11px 14px;font-size:12px}
/* B11 month-pace sparkline (bar heights set by JS — applyFillStyles) */
.spark{position:relative;display:flex;align-items:flex-end;gap:2px;height:48px;margin:12px 0 4px}
.spark-bar{flex:1;min-height:2px;background:var(--teal);border-radius:2px 2px 0 0;transition:height var(--dur-3) var(--ease-out)}
.spark-bar--today{background:var(--gold)}
.spark-be{position:absolute;left:0;right:0;border-top:1px dashed rgba(122,94,26,0.55)}
.spark-scale{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;color:var(--faint-ink);letter-spacing:.04em;text-transform:uppercase}
/* B9 Activity screen filters + timestamp column */
.act-filters{display:flex;gap:14px;flex-wrap:wrap}
.act-filters .form-group{margin-bottom:8px}
.act-when{white-space:nowrap;flex-shrink:0;text-align:right}
/* ── Scheduler week grid — teal heat by utilization, gold dot = open NLS ── */
.sched-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.sched-grid{display:grid;grid-template-columns:70px repeat(7,minmax(56px,1fr));gap:4px;align-items:stretch}
.sched-corner{min-height:1px}
.sched-dayhead{display:flex;flex-direction:column;gap:2px;padding:6px 4px;text-align:center;border-radius:8px}
.sched-dayhead--today{background:var(--gold-pale);box-shadow:inset 0 0 0 1px rgba(191,164,101,0.4)}
.sched-dayname{font-size:var(--text-sm);font-weight:600;color:var(--teal);white-space:nowrap}
/* today's column header carries the gold-ink data voice (the calibration anchor) */
.sched-dayhead--today .sched-dayname{color:var(--gold-ink)}
.sched-daypct{font-family:var(--font-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint-ink)}
.sched-time{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;color:var(--faint-ink);text-transform:uppercase;align-self:center;text-align:right;padding-right:8px;white-space:nowrap}
/* The cell reads as an INSTRUMENT, not a database export: the raw open-units
   integer is suppressed (font-size:0) so the grid isn't a wall of identical
   numbers, and utilization is read as a bottom-anchored teal FILL via ::before
   (height = the sched-u* bucket). An empty (u0) cell is a calm open slot; a
   booked cell fills upward. The integer returns on hover/focus + on today's
   column as a quiet annotation. */
.sched-cell{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;border:1px solid var(--border-s);border-radius:6px;position:relative;overflow:hidden;isolation:isolate;font-family:var(--font-mono);font-size:0;line-height:1;color:var(--teal);background:#fff;cursor:pointer;transition:box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);padding:0}
.sched-cell::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;z-index:-1;background:var(--teal);opacity:0.85;transition:height var(--dur-2) var(--ease-out)}
.sched-cell:not(:disabled):hover{box-shadow:0 0 0 2px var(--gold-ring);transform:translateY(-1px)}
.sched-cell:disabled{cursor:default}
/* teal utilization scale → fill height (booked/bookable). u0 = open, no fill. */
.sched-u0{background:#fff}
.sched-u0::before{height:0}
.sched-u1::before{height:25%;opacity:0.55}
.sched-u2::before{height:50%;opacity:0.70}
.sched-u3::before{height:75%}
.sched-u4::before{height:100%}
/* surface the open-units integer on hover/focus (and on today) as a quiet tick */
.sched-cell:hover,.sched-cell:focus-visible,.sched-cell--today{font-size:10px}
.sched-cell:hover,.sched-cell:focus-visible{color:var(--charcoal)}
/* blocked = hatched, never tinted like a booked cell */
.sched-cell--blocked{background:repeating-linear-gradient(45deg,rgba(10,31,46,0.10) 0 4px,rgba(10,31,46,0.02) 4px 8px);color:var(--faint-ink);font-size:10px}
.sched-cell--blocked::before{display:none}
.sched-cell--partial{border-style:dashed;border-color:var(--navy-300)}
.sched-cell--nls::after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px #fff;z-index:1}
/* today's column gets a stronger gold rail than a 1px hairline (the anchor) */
.sched-cell--today{box-shadow:inset 0 0 0 2px var(--gold-ring)}
.sched-legend{display:flex;gap:16px;margin-top:14px;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint-ink);align-items:center;flex-wrap:wrap}
.sched-key{display:inline-block;width:12px;height:9px;border-radius:2px;margin-right:5px;border:1px solid var(--border-s);min-height:0;vertical-align:middle}
.sched-key--nls{background:var(--gold);border-radius:50%;width:8px;height:8px}
/* ── Wallet & packages (Clients detail) ── */
.wallet-meter{margin:6px 0 10px;height:6px}
.wallet-meter .meter{background:var(--teal)}
.wallet-pkg-row{margin-top:6px}
.sell-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.sell-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border-s);border-radius:8px;cursor:pointer}
.sell-row:hover{border-color:var(--gold-ring)}
.sell-name{flex:1;font-size:var(--text-md);color:var(--charcoal)}
.sell-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--mid);white-space:nowrap}
/* ── Visit slide-over (Day Board card tap) ── */
.db-svc-card{cursor:pointer}
.ui-dialog--slideover{margin:0 0 0 auto;width:min(420px,92vw);max-width:none;height:100vh;max-height:100vh;border-radius:0;transform:translateX(24px);overflow-y:auto}
.ui-dialog--slideover.is-open{transform:none}
.vso-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--border-s)}
.vso-row:last-of-type{border-bottom:none}
.vso-dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--navy-300);flex-shrink:0}
.vso-row.is-done .vso-dot{background:var(--teal);border-color:var(--teal)}
.vso-name{flex:1;font-size:var(--text-md);color:var(--charcoal)}
.vso-row.is-done .vso-name{color:var(--mid)}
.vso-min{font-family:var(--font-mono);font-size:10px;color:var(--faint-ink)}
@media (prefers-reduced-motion: reduce){
  .sched-cell,.ui-dialog--slideover{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   STAFF SHELL — BRAND ELEVATION (per-screen, §4)
   Devices live in ui.css (.rule-spectrum / .lume / .sec / .chip-solid /
   .tag-outline / .brand-watermark / .enter). This block is the staff-only glue:
   the doorway's dark member-entrance, the hero positioning context, the §4
   status-pill geometry, and the screen rhythm. Motif discipline holds:
   ≤1 gold rule + ≤1 .lume per region; light = a 1px hairline, never a bloom.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Login doorway: member-entrance link on the navy card (dark context) ──── */
body.login .member-entrance{border-top-color:rgba(191,164,101,0.16);color:rgba(248,244,238,0.5)}
body.login .member-entrance a{color:var(--gold-light)}

/* ── App body is the positioning context for the per-screen .brand-watermark.
     The watermark (ui.css C13: position:fixed, 3% opacity, pointer-events:none)
     drops to z-index:-1 inside the staff body so it sits BEHIND the in-flow
     section-cards (never over content or chrome) — the quiet recurring signature. */
.app-body{position:relative}
.app-body .brand-watermark{z-index:-1}

/* ── §4 page rhythm: the calibration hairline sits flush under each H1, and the
     mono eyebrow already leads every head. .rule-spectrum is the ONE gold rule
     a screen gets at the title (replaces the old plain .sec-line there). ────── */
.page-title + .rule-spectrum{margin-top:8px}

/* ── Day Board (the exemplar quality bar) ─────────────────────────────────────
     Section heads move from plain Cormorant .sc-title to the .sec
     label——hairline——live-count pattern (the Dashboard already uses it), so
     "Pending Orders ——— 0 OPEN" carries the mono data voice. (The .sec divider
     leading a card already sits flush with the card padding — see §"DASHBOARD".) */

/* ── §4 status-pill geometry standardization (Orders / Resets / Day Board) ────
     Functional status colors are KEPT (green=done, blue=queued) — only the
     geometry converges on the catalog pill (mono 2xs, 3px radius, uppercase).
     Gold (.chip-solid) is reserved for the ONE brand statement per surface. ──── */
.db-svc-badge{font-family:var(--font-mono);letter-spacing:.05em;border-radius:3px;padding:3px 8px}

/* ── Staff: the role <select> stays a live control (behavior preserved — not
     restyled to a static badge). The editorial .member-table (mono header +
     gold rule, already in §ADMIN) carries the Staff screen's elevation. ──────── */

/* ── Branded empty-state spiral on staff screens is class-driven (.state-spiral
     in ui.css); no inline style. Compact discs on the Day Board / Dashboard /
     Resets become a faint gold spiral brand moment. ──────────────────────────── */