/* =============================================================================
   Khandaq — the staff dashboard's styles, shared by the web dashboard
   (khandaq-admin-dashboard.html) and the app's staff mode
   (welcome-disclaimer-preview.html). See staff/staff.js.

   Everything is scoped to .staff-root, the dashboard's outer element. In the
   app it sits in a shadow root, so these styles and the app's never touch.
   The fonts (Fraunces, Inter) are loaded by each page, not here: a font
   declared inside a shadow root isn't used.
   ============================================================================= */
.staff-root{
  --bg-deep:#06140E;
  --bg-emerald:#0B241B;
  --emerald-mid:#123A2C;
  --emerald-panel:#0E2A1F;
  --gold:#CFA75E;
  --gold-bright:#F0CE84;
  --gold-pale:#F7E3A8;
  --text:#F3EFE4;
  --text-muted:rgba(243,239,228,0.56);
  --line:rgba(207,167,94,0.16);
  --line-strong:rgba(207,167,94,0.32);
  --danger:#E5595E;
  --ok:#7FB88A;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

/* --staff-vh: 1% of the height the dashboard has: 1vh (the window) unless
   the page sets it, as the app does inside its phone frame on a computer. */
.staff-root{
  font-family:'Inter', sans-serif;
  background:var(--bg-deep);
  color:var(--text);
  min-height:calc(var(--staff-vh, 1vh) * 100);
  position:relative;
  overflow-x:hidden;
}

/* ---------- Scroll bars: the app's shared style ----------
   The same as the app's ("Scroll bars, one style" in
   welcome-disclaimer-preview.html), for the dashboard's scrolling areas: the
   page on the web (html), long tables, tall dialogs, the search results.
   (In the app, staff mode's page is #kqStaffHost, which the app styles; the
   areas inside the shadow root are styled here, as the app's rules don't
   reach them.) Shown only when there's more to scroll to, as always.
   Minimal but visible: a 6px pill-shaped thumb, no border, on a faint
   seam-like track with rounded ends, and no arrows. The app's gold: track
   10%, thumb 32%, brighter while the area is hovered or scrolled (45%;
   .kq-scrolling, set by staff.js), on the thumb (58%) and dragging it (70%).
   Chrome and Safari use the ::-webkit-scrollbar rules; Firefox,
   scrollbar-width and scrollbar-color. */
@property --kq-sb-thumb{ syntax:'<color>'; inherits:true; initial-value:transparent; }
/* The web page's own scroll bar is drawn over the page's background: the
   dashboard's dark, not the browser's white. */
html:has(.staff-root){ background:#06140E; }
:where(.staff-root, html:has(.staff-root)){
  --kq-sb-track:rgba(207,167,94,0.1);
  --kq-sb-rest:rgba(207,167,94,0.32);
  --kq-sb-active:rgba(207,167,94,0.45);
  --kq-sb-hover:rgba(207,167,94,0.58);
  --kq-sb-drag:rgba(207,167,94,0.7);
}
:where(.staff-root, .staff-root *, html:has(.staff-root)){ --kq-sb-thumb:var(--kq-sb-rest); transition:--kq-sb-thumb 0.2s ease; }
@media (hover:hover){
  :where(.staff-root, .staff-root *, html:has(.staff-root)):hover{ --kq-sb-thumb:var(--kq-sb-active); }
}
:where(.staff-root .kq-scrolling, .staff-root.kq-scrolling, html.kq-scrolling:has(.staff-root)){ --kq-sb-thumb:var(--kq-sb-active); }
@media (prefers-reduced-motion:reduce){
  :where(.staff-root, .staff-root *, html:has(.staff-root)){ transition:none; }
}
:where(.staff-root, .staff-root *, html:has(.staff-root))::-webkit-scrollbar{ width:6px; height:6px; background:transparent; }
:where(.staff-root, .staff-root *, html:has(.staff-root))::-webkit-scrollbar-button{ display:none; width:0; height:0; }
:where(.staff-root, .staff-root *, html:has(.staff-root))::-webkit-scrollbar-corner{ background:transparent; }
:where(.staff-root, .staff-root *, html:has(.staff-root))::-webkit-scrollbar-track{ background:var(--kq-sb-track); border:none; border-radius:999px; }
:where(.staff-root, .staff-root *, html:has(.staff-root))::-webkit-scrollbar-track:vertical{ margin:6px 0; }
:where(.staff-root, .staff-root *, html:has(.staff-root))::-webkit-scrollbar-track:horizontal{ margin:0 6px; }
:where(.staff-root, .staff-root *, html:has(.staff-root))::-webkit-scrollbar-thumb{ background:var(--kq-sb-thumb); border:none; border-radius:999px; min-height:24px; min-width:24px; }
:where(.staff-root, .staff-root *, html:has(.staff-root))::-webkit-scrollbar-thumb:hover{ background:var(--kq-sb-hover); }
:where(.staff-root, .staff-root *, html:has(.staff-root))::-webkit-scrollbar-thumb:active{ background:var(--kq-sb-drag); }
@supports not selector(::-webkit-scrollbar){
  :where(.staff-root, .staff-root *, html:has(.staff-root)){ scrollbar-width:thin; scrollbar-color:var(--kq-sb-thumb) var(--kq-sb-track); }
}

/* Ambient lattice texture — reused from the app's own mashrabiya
   motif rather than a generic dashboard grid, so this still reads
   as Khandaq rather than a bootstrapped admin template. */
.staff-root::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(207,167,94,0.035) 0, rgba(207,167,94,0.035) 1px, transparent 1px, transparent 52px),
    repeating-linear-gradient(-45deg, rgba(207,167,94,0.035) 0, rgba(207,167,94,0.035) 1px, transparent 1px, transparent 52px);
}
.staff-root::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(18,58,44,0.55) 0%, transparent 60%);
}

.serif{ font-family:'Fraunces', serif; }

/* ============= Gate screen ============= */
#gate{
  position:relative;
  z-index:1;
  min-height:calc(var(--staff-vh, 1vh) * 100);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.gate-card{
  width:100%;
  max-width:380px;
  background:linear-gradient(180deg, rgba(18,58,44,0.55), rgba(11,36,27,0.75));
  border:1px solid var(--line);
  border-radius:18px;
  padding:44px 36px 34px;
  text-align:center;
  box-shadow:0 30px 60px rgba(0,0,0,0.35);
}
.gate-mark{
  display:block;
  width:72px; height:72px;
  margin:0 auto 20px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35));
}
.gate-title{
  font-size:22px;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--gold-bright);
  margin-bottom:6px;
}
.gate-sub{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.5;
  margin-bottom:30px;
}
.field{
  text-align:left;
  margin-bottom:16px;
}
.field label{
  display:block;
  font-size:11.5px;
  color:var(--text-muted);
  margin-bottom:6px;
  letter-spacing:0.01em;
}
.field input{
  width:100%;
  background:rgba(6,20,14,0.6);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  color:var(--text);
  font-size:14px;
  font-family:'Inter', sans-serif;
}
.field input:focus{
  outline:none;
  border-color:var(--gold);
}
.field select{
  width:100%;
  background:rgba(6,20,14,0.6);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  color:var(--text);
  font-size:14px;
  font-family:'Inter', sans-serif;
}
.field select:focus{
  outline:none;
  border-color:var(--gold);
}
.gate-btn{
  width:100%;
  margin-top:10px;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  color:var(--bg-deep);
  border:none;
  border-radius:10px;
  padding:13px;
  font-size:14px;
  font-weight:700;
  font-family:'Inter', sans-serif;
  letter-spacing:0.01em;
  cursor:pointer;
}
.gate-note{
  margin-top:22px;
  font-size:11px;
  line-height:1.6;
  color:rgba(243,239,228,0.4);
}

.gate-error{ display:none; margin:4px 0 8px; font-size:12.5px; line-height:1.5; color:#F0989C; text-align:left; }
.gate-error.show{ display:block; }
.gate-btn:disabled{ opacity:0.55; cursor:default; }
.gate-link-row{ display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
.gate-link{ background:none; border:none; padding:0; color:var(--gold-pale); font-size:12px; font-family:'Inter', sans-serif; cursor:pointer; }
.gate-link:disabled{ color:var(--text-muted); cursor:default; }

#gate.hidden, #dashboard.hidden{ display:none; }
.launch-hidden{ display:none !important; }

/* ============= Dashboard shell (mobile-first: top bar + horizontal tabs) ============= */
#dashboard{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-height:calc(var(--staff-vh, 1vh) * 100);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  background:rgba(6,20,14,0.55);
  border-bottom:1px solid var(--line);
  flex-shrink:0;
  /* Above the page and the bottom nav (30), so the account menu opens over them. */
  position:relative;
  z-index:31;
}
.topbar-brand{ display:flex; align-items:center; gap:8px; min-width:0; }
/* The logo on its cream diamond (staff/khandaq-logo.png, 320px square:
   sharp at this size on any screen), in place of the name. */
.brand-logo{
  width:40px; height:40px;
  flex-shrink:0;
  display:block;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,0.35));
}
.topbar-brand-tag{ font-size:9px; color:var(--text-muted); letter-spacing:0.05em; border:1px solid var(--line); border-radius:5px; padding:2px 5px; }
.topbar-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* The search icon, beside the account button and the same size. */
.topbar-icon-btn{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:none;
  border:1px solid var(--line);
  border-radius:17px;
  color:var(--text-muted);
  cursor:pointer;
  flex-shrink:0;
}
.topbar-icon-btn svg{ width:16px; height:16px; }
.topbar-icon-btn:hover, .topbar-icon-btn[aria-expanded="true"]{ color:var(--text); border-color:var(--line-strong); background:rgba(207,167,94,0.08); }
.topbar-icon-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ============= The account menu (top bar) =============
   One button (their initial) at the right of the bar. Its menu has the same
   look as the row actions menu (.actions-menu): who's signed in, Switch to
   member mode (in the app only) and Sign out. */
.acct{ position:relative; }
.acct-btn{
  display:flex; align-items:center; gap:4px;
  height:34px; padding:0 7px 0 3px;
  background:none;
  border:1px solid var(--line);
  border-radius:17px;
  color:var(--text-muted);
  cursor:pointer;
  flex-shrink:0;
}
.acct-btn:hover, .acct-btn[aria-expanded="true"]{ color:var(--text); border-color:var(--line-strong); background:rgba(207,167,94,0.08); }
.acct-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.acct-initial{
  width:26px; height:26px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--bg-deep);
  font-family:'Inter', sans-serif;
}
.acct-chevron{ width:14px; height:14px; transition:transform 0.15s ease; }
.acct-btn[aria-expanded="true"] .acct-chevron{ transform:rotate(180deg); }
.acct-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  width:240px; max-width:calc(100vw - 32px);
  background:#0E2A20; border:1px solid var(--line-strong); border-radius:10px;
  padding:6px; box-shadow:0 12px 30px rgba(0,0,0,0.45);
}
.acct-menu[hidden]{ display:none; }
.acct-menu-head{
  padding:8px 10px 10px; margin-bottom:4px;
  border-bottom:1px solid var(--line);
  font-size:12.5px; font-weight:600; color:var(--gold-pale);
  overflow-wrap:anywhere;
}
.acct-menu-list{ list-style:none; margin:0; padding:0; }
.acct-menu-item{
  display:flex; align-items:center; gap:10px; width:100%;
  text-align:left; background:none; border:none;
  color:var(--text); font-size:12.5px; padding:10px; border-radius:6px;
  cursor:pointer; font-family:'Inter', sans-serif;
}
.acct-menu-item svg{ width:15px; height:15px; color:var(--text-muted); flex-shrink:0; }
.acct-menu-item:hover, .acct-menu-item:focus{ background:rgba(207,167,94,0.1); outline:none; }
.acct-menu-item:focus-visible{ box-shadow:inset 0 0 0 1px var(--line-strong); }
.acct-menu-sep{ height:1px; background:var(--line); margin:4px 4px; }
.signout-text{ text-align:left; margin-bottom:0; }
/* Edit display name (in the account menu) */
.dn-text{ text-align:left; margin-bottom:18px; }
.dn-field{ margin-bottom:0; }
.dn-hint{ font-size:11.5px; color:var(--text-muted); line-height:1.5; margin-top:6px; }
.dn-error{ font-size:12px; color:#F0989C; line-height:1.5; margin-top:10px; }
.dn-error:empty{ display:none; }
#displayNameInput[aria-invalid="true"]{ border-color:#F0989C; }
.dn-buttons{ flex-wrap:wrap; }
.dn-remove{ margin-right:auto; }

.role-hidden{ display:none !important; }

/* ============= Bottom nav bar ============= */
.bottom-nav{
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:30;
  display:flex;
  background:rgba(6,20,14,0.88);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  background:none;
  border:none;
  color:var(--text-muted);
  font-family:'Inter', sans-serif;
  font-size:10.5px;
  padding:6px 2px;
  cursor:pointer;
  position:relative;
}
.bottom-nav-item svg{ width:20px; height:20px; opacity:0.85; }
.bottom-nav-item.active{ color:var(--gold-bright); }
.bottom-nav-item.active svg{ opacity:1; }
.bottom-nav-badge{
  position:absolute;
  top:2px; right:calc(50% - 22px);
  font-size:9px;
  font-weight:700;
  background:#E5595E;
  color:#fff;
  border-radius:8px;
  padding:0 4px;
  min-width:14px;
  text-align:center;
  line-height:14px;
}

/* ============= More page (list navigation) ============= */
.more-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:none;
  border:none;
  border-bottom:1px solid rgba(207,167,94,0.08);
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:14px;
  padding:16px 2px;
  cursor:pointer;
  text-align:left;
}
.more-row:last-child{ border-bottom:none; }
.more-row-right{ display:flex; align-items:center; gap:8px; color:var(--text-muted); }
.more-row-right svg{ width:16px; height:16px; }

/* ============= Flagged Questions ============= */
.flagged-item{
  padding:14px 2px;
  border-bottom:1px solid rgba(207,167,94,0.1);
}
.flagged-item:last-of-type{ border-bottom:none; }
.flagged-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.flagged-name{ font-size:13px; font-weight:600; color:var(--text); }
.flagged-time{ font-size:11px; color:var(--text-muted); margin-left:auto; }
.flagged-question{ font-size:13.5px; color:var(--text); line-height:1.5; font-style:italic; margin-bottom:6px; }
.flagged-reason{ font-size:11px; color:#F0989C; }
.flagged-reason.flagged-reason-done{ color:var(--text-muted); }
.flagged-answered{ font-size:12px; color:var(--text-muted); margin:0 0 12px; }
#flaggedModal .flagged-question{ font-style:normal; white-space:pre-wrap; overflow-wrap:anywhere; margin:4px 0 12px; }
#flaggedModal textarea{ width:100%; background:rgba(6,20,14,0.6); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--text); font-size:14px; font-family:'Inter', sans-serif; resize:vertical; }
.count{
  font-size:11px;
  background:rgba(207,167,94,0.18);
  color:var(--gold-pale);
  border-radius:10px;
  padding:1px 7px;
}


/* ============= Digital Majlis ============= */
.majlis-live-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.majlis-live-dot{
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 4px rgba(127,184,138,0.18);
  margin-right:7px;
}
.majlis-safeguard-note{
  font-size:12px;
  color:var(--text-muted);
  line-height:1.6;
  margin-top:10px;
  padding-top:14px;
  border-top:1px dashed rgba(207,167,94,0.12);
}

.main{
  flex:1;
  min-width:0;
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:20px 16px calc(84px + env(safe-area-inset-bottom));
  box-sizing:border-box;
}
.page{ display:none; }
.page.active{ display:block; }

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:26px;
  gap:20px;
  flex-wrap:wrap;
}
.page-title{
  font-size:26px;
  font-weight:600;
  color:var(--text);
}
.page-sub{
  font-size:13px;
  color:var(--text-muted);
  margin-top:5px;
  max-width:520px;
  line-height:1.5;
}

/* ============= Shared card/table primitives ============= */
.card{
  background:rgba(18,58,44,0.28);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  box-sizing:border-box;
}
.card + .card{ margin-top:16px; }

.section-label{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:14px;
}

.activity-accordion{
  margin-top:16px;
  background:rgba(18,58,44,0.14);
  border:1px solid var(--line);
  border-radius:14px;
  padding:2px 16px;
}
.activity-accordion summary{
  list-style:none;
  cursor:pointer;
  padding:14px 0;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.activity-accordion summary::-webkit-details-marker{ display:none; }
.activity-accordion summary::after{
  content:'';
  width:7px; height:7px;
  border-right:1.5px solid var(--text-muted);
  border-bottom:1.5px solid var(--text-muted);
  transform:rotate(45deg);
  transition:transform 0.15s ease;
}
.activity-accordion[open] summary::after{ transform:rotate(-135deg); }
.activity-accordion[open] summary{ color:var(--text); border-bottom:1px solid var(--line); }
.activity-body{ padding:14px 0 16px; }

.stat-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  margin-bottom:22px;
}
.stat-card{
  background:rgba(18,58,44,0.28);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 20px;
}
.stat-card-split{
  display:flex;
  align-items:center;
  padding:14px 8px;
}
.stat-split-half{ flex:1; text-align:center; min-width:0; }
.stat-split-divider{ width:1px; align-self:stretch; background:var(--line); margin:0 2px; }
.stat-num-split{ font-size:22px; }
.stat-num{
  font-family:'Fraunces', serif;
  font-size:28px;
  color:var(--gold-bright);
  line-height:1;
}
.stat-dot{
  display:none;
  width:6px; height:6px;
  border-radius:50%;
  background:#F0989C;
  margin-left:7px;
  vertical-align:middle;
}
.stat-dot.show{ display:inline-block; }
.stat-label{
  font-size:12px;
  color:var(--text-muted);
  margin-top:8px;
}

/* Tabs stay on one line; where they don't fit (a phone), the row scrolls
   sideways, without a bar (the tab cut off at the edge shows there's more).
   The line under the row is drawn inside it, so the active tab's underline
   covers it without reaching outside the scrolling row. */
.tab-row{
  display:flex;
  gap:8px;
  margin-bottom:18px;
  box-shadow:inset 0 -1px 0 var(--line);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.tab-row::-webkit-scrollbar{ display:none; }
.tab-btn{
  background:none;
  border:none;
  color:var(--text-muted);
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  padding:10px 4px;
  margin-right:22px;
  cursor:pointer;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  flex-shrink:0;
}
.tab-btn:last-child{ margin-right:0; }
/* (The Users tabs sit in a toolbar with its own line.) */
#userTierTabs{ box-shadow:none; }
.tab-btn.active{ color:var(--gold-bright); border-bottom-color:var(--gold); }

table{ width:100%; border-collapse:collapse; }
th{
  text-align:left;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.03em;
  color:var(--text-muted);
  padding:0 14px 12px;
  border-bottom:1px solid var(--line);
}
td{
  padding:14px;
  font-size:13.5px;
  border-bottom:1px solid rgba(207,167,94,0.08);
  vertical-align:middle;
}
tr:last-child td{ border-bottom:none; }
tr.row-hover:hover td{ background:rgba(207,167,94,0.04); }

.pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-weight:600;
  padding:4px 10px;
  border-radius:20px;
}
.pill-outstanding{ background:rgba(229,89,94,0.14); color:#F0989C; }
.pill-inprogress{ background:rgba(240,180,80,0.14); color:#F0C177; }
.pill-awaiting{ background:rgba(120,170,230,0.14); color:#8FC1F0; }
.pill-completed{ background:rgba(127,184,138,0.14); color:var(--ok); }
.pill-refunded{ background:rgba(255,255,255,0.08); color:var(--text-muted); }
.pill-tier-bespoke{ background:rgba(207,167,94,0.16); color:var(--gold-pale); }
.pill-tier-premium{ background:rgba(255,255,255,0.08); color:var(--text-muted); }
.pill-tier-free{ background:rgba(255,255,255,0.05); color:rgba(243,239,228,0.45); }
#page-tickets tr:has(.pill-tier-bespoke){ box-shadow: inset 3px 0 0 var(--gold); }
.pill-refunded-status{ background:rgba(255,255,255,0.08); color:var(--text-muted); }
.ticket-price-sub{ font-size:10.5px; color:var(--text-muted); margin-top:3px; }
.ticket-price-sub.refunded{ color:var(--danger); font-weight:600; }
.thread-msg{ padding:10px 0; border-bottom:1px dashed rgba(207,167,94,0.12); }
.thread-msg:last-child{ border-bottom:none; }
.thread-msg-head{ font-size:10.5px; color:var(--text-muted); margin-bottom:3px; }
.thread-msg-body{ font-size:13px; color:var(--text); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.thread-msg.staff .thread-msg-head{ color:var(--gold-pale); }
.ticket-filter-empty{ display:none; font-size:12.5px; color:var(--text-muted); padding:6px 2px; }
/* The ticket queue's table: narrow enough to fit its card on a computer
   (about 1280px wide), its action buttons wrapping; on a phone it scrolls
   sideways in the card. */
.ticket-table{ min-width:700px; }
.ticket-table td, .ticket-table th{ padding-left:10px; padding-right:10px; }
.ticket-table td:last-child{ min-width:150px; }
.ticket-table .pill{ white-space:nowrap; }
/* The ticket detail's reply box. */
.ticket-reply textarea{
  width:100%; margin-top:8px;
  background:rgba(6,20,14,0.6); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--text); font-size:14px; font-family:'Inter', sans-serif; resize:vertical;
}
.ticket-reply textarea:focus{ outline:none; border-color:var(--gold); }
.ticket-reply-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ticket-reply-row label{ font-size:11.5px; color:var(--text-muted); }
.ticket-reply-row .sort-select{ flex:1; min-width:160px; }
.ticket-reply-note{ font-size:11.5px; color:var(--text-muted); margin-top:8px; }
.ticket-reply-error{ font-size:12px; color:#F0989C; margin-top:8px; line-height:1.5; }
.ticket-reply-error:empty{ display:none; }
/* A list's "Loading…" / "Nothing here" line. */
.list-empty{ font-size:12.5px; color:var(--text-muted); padding:14px 2px 4px; }
/* Bespoke Requests: fits its card at about 1280px, like the ticket queue;
   what they came about wraps, two lines at most. */
.br-table{ min-width:620px; }
.br-table td, .br-table th{ padding-left:10px; padding-right:10px; }
.br-table .pill, .br-table td:nth-child(3){ white-space:nowrap; }
.br-concern{ max-width:340px; font-size:12.5px; color:var(--text-muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.br-actions{ flex-wrap:wrap; }
.br-decline{ color:#F0989C; border-color:rgba(229,89,94,0.35); }
.br-decide-text{ text-align:left; margin:0 0 12px; }
.btn-gold.br-decline-confirm{ background:linear-gradient(135deg, #E5595E, #B8434A); color:#fff; }
.cpb-context{ font-size:12px; color:var(--text-muted); line-height:1.5; }
.cpb-context strong{ color:var(--text); font-weight:600; }
/* Stage 5's tables (promo codes, purchases, the audit log) fit their card
   at about 1280px; on a phone they scroll sideways inside it. */
.promo-table{ min-width:560px; }
.purchase-table{ min-width:700px; }
.audit-table{ min-width:700px; }
.promo-table td, .promo-table th, .purchase-table td, .purchase-table th, .audit-table td, .audit-table th{ padding-left:10px; padding-right:10px; }
.promo-table td:last-child, .purchase-table td:last-child{ white-space:nowrap; }
.promo-expired td:not(:last-child){ opacity:0.55; }
.promo-note, .refund-note{ font-size:12.5px; color:var(--text-muted); line-height:1.55; }
.promo-note strong, .refund-note strong{ color:var(--text); font-weight:600; }
.refund-note p{ margin:0 0 8px; }
.refund-note p:last-child{ margin-bottom:0; }
.pill-test{ background:rgba(243,239,228,0.1); color:var(--text-muted); font-size:10px; margin-left:4px; }
.refund-text{ text-align:left; margin:0 0 12px; }
.code-discount-row{ display:flex; gap:8px; }
.code-discount-row .sort-select{ flex:0 0 92px; padding:11px 10px; }
.code-discount-row input{ flex:1; min-width:0; }
.audit-filters{ gap:8px; flex-wrap:wrap; }
.audit-when{ white-space:nowrap; font-size:12px; }
.audit-details{ font-size:12px; color:var(--text-muted); max-width:320px; overflow-wrap:anywhere; }
.audit-none{ color:var(--text-muted); }
/* Reports: members by plan, three colours checked for colour-blind
   separation and contrast on the dark card (teal, violet, gold), with a
   2px gap between them; the legend names each. */
.tier-split-bar.plan-split{ background:transparent; gap:2px; }
.plan-fill{ height:100%; border-radius:3px; }
.plan-free{ background:#1FA787; }
.plan-premium{ background:#8F84E8; }
.plan-bespoke{ background:#B98A32; }
.rep-note{ margin-top:4px; font-size:11.5px; }
.rep-table-card summary{ cursor:pointer; font-size:13px; font-weight:600; color:var(--gold-pale); }
.rep-table{ width:100%; min-width:420px; margin-top:12px; }
/* Announcements */
#annForm .send-confirm-badge{ margin-bottom:12px; }
.ann-textarea{ width:100%; background:rgba(6,20,14,0.6); border:1px solid var(--line); border-radius:10px; padding:12px 14px; color:var(--text); font-size:14px; font-family:'Inter', sans-serif; resize:vertical; }
.ann-row{ display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:12px 0; border-bottom:1px dashed rgba(207,167,94,0.12); }
.ann-row:last-child{ border-bottom:none; }
.ann-row-main{ min-width:0; }
.ann-row-title{ font-size:13.5px; font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.ann-row-body{ font-size:12.5px; color:var(--text-muted); line-height:1.5; margin-top:3px; white-space:pre-wrap; overflow-wrap:anywhere; }
.ann-row-meta{ font-size:11px; color:var(--text-muted); margin-top:6px; }
.ann-row .btn-ghost, .ann-row .pill{ flex-shrink:0; }
.ann-retracted .ann-row-title, .ann-retracted .ann-row-body{ opacity:0.55; }
.tier-since{ font-size:10.5px; color:var(--text-muted); margin-top:4px; }
.pill-status-active{ background:rgba(127,184,138,0.12); color:var(--ok); }
.pill-status-banned{ background:rgba(229,89,94,0.16); color:#F0989C; }
.status-sub{ font-size:10.5px; color:var(--text-muted); margin-top:4px; }

/* A list's own search (Users): a slim box above its tabs, results as you type. */
.list-search{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  padding:0 12px;
  height:42px;
  background:rgba(6,20,14,0.6);
  border:1px solid var(--line);
  border-radius:10px;
}
.list-search:focus-within{ border-color:var(--gold); }
.list-search svg{ width:16px; height:16px; color:var(--text-muted); flex-shrink:0; }
.list-search input{
  flex:1;
  min-width:0;
  height:100%;
  background:none;
  border:none;
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:14px;
}
.list-search input:focus{ outline:none; }
.list-search-clear{ display:flex; background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px; flex-shrink:0; }
.list-search-clear[hidden]{ display:none; }
.list-search-clear svg{ width:14px; height:14px; }

/* Pages of a long list: "Showing 26–43 of 43", Previous and Next. Shown only
   when there's more than one page. */
.list-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.list-pager[hidden]{ display:none; }
.list-pager-info{ font-size:12px; color:var(--text-muted); }
.list-pager-btns{ display:flex; gap:8px; }
.list-pager-btns .btn-ghost:disabled{ opacity:0.4; cursor:default; }

.users-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.sort-wrap{ display:flex; align-items:center; gap:8px; }
.sort-wrap label{ font-size:11.5px; color:var(--text-muted); }
.sort-select{
  background:rgba(6,20,14,0.6);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:12.5px;
  padding:7px 10px;
}
.sort-select:focus{ outline:none; border-color:var(--gold); }

.actions-cell{ display:flex; flex-wrap:wrap; gap:6px; }

.user-name-link{
  background:none; border:none; padding:0; margin:0; font: inherit;
  color:var(--gold-pale); font-weight:600; cursor:pointer; text-align:left;
  text-decoration:underline; text-decoration-color:rgba(207,167,94,0.3); text-underline-offset:2px;
}
.user-name-link:hover{ color:var(--gold-bright); }
.actions-dropdown{ position:relative; display:inline-block; }
.actions-menu{
  display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:40;
  background:#0E2A20; border:1px solid var(--line-strong); border-radius:10px;
  padding:6px; min-width:150px; box-shadow:0 12px 30px rgba(0,0,0,0.45);
}
.actions-menu.open{ display:block; }
.actions-menu-item{
  display:block; width:100%; text-align:left; background:none; border:none;
  color:var(--text); font-size:12.5px; padding:9px 10px; border-radius:6px;
  cursor:pointer; font-family:'Inter', sans-serif;
}
.actions-menu-item:hover{ background:rgba(207,167,94,0.1); }
.profile-pills{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.profile-actions-row{ display:flex; gap:8px; flex-wrap:wrap; }
.refund-note{ font-size:11px; color:var(--ok); margin-top:6px; min-height:1px; }
.btn-danger-ghost{
  background:none;
  border:1px solid rgba(229,89,94,0.45);
  color:#F0989C;
  border-radius:8px;
  padding:7px 14px;
  font-size:12.5px;
  font-family:'Inter', sans-serif;
  cursor:pointer;
}
.btn-danger-ghost:hover{ background:rgba(229,89,94,0.1); }
.duration-row{ display:flex; gap:8px; }
.manage-divider{ border-top:1px solid var(--line); margin:16px 0; }
.manage-ticket-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.duration-row input{ flex:1; }
.duration-row select{ flex:1; background:rgba(6,20,14,0.6); border:1px solid var(--line); border-radius:10px; color:var(--text); font-family:'Inter', sans-serif; font-size:14px; padding:0 10px; }
.block-mode-row{ display:flex; gap:8px; margin-bottom:16px; }
.block-mode-btn{
  flex:1;
  background:rgba(6,20,14,0.6);
  border:1px solid var(--line);
  color:var(--text-muted);
  border-radius:8px;
  padding:9px;
  font-size:12.5px;
  font-family:'Inter', sans-serif;
  cursor:pointer;
}
.block-mode-btn.active{ border-color:var(--gold); color:var(--gold-pale); background:rgba(207,167,94,0.08); }

.ff-row{
  padding:12px 0;
  border-bottom:1px dashed rgba(207,167,94,0.12);
}
.ff-row:last-child{ border-bottom:none; }
.ff-row-sub{ margin-left:18px; padding-left:12px; border-left:1px solid rgba(207,167,94,0.15); }
.ff-row-subsub{ margin-left:18px; padding-left:12px; border-left:1px solid rgba(207,167,94,0.1); }
.ff-label{
  font-size:13px;
  font-weight:600;
  color:var(--text);
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:6px;
}
.ff-label-sub{ font-size:12px; font-weight:500; color:var(--text-muted); }
.ff-state-hidden{ color:#E89486; }
.ff-state-coming_soon{ color:var(--gold-pale); }
.ff-state-active{ color:#6FCB9F; }
.ff-badge{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:999px;
  margin-left:auto;
}
.ff-badge.ff-state-hidden{ background:rgba(200,80,70,0.16); border:1px solid rgba(200,80,70,0.3); }
.ff-badge.ff-state-coming_soon{ background:rgba(207,167,94,0.14); border:1px solid rgba(207,167,94,0.3); }
.ff-badge.ff-state-active{ background:rgba(47,163,114,0.16); border:1px solid rgba(47,163,114,0.3); }

.btn-ghost{
  background:none;
  border:1px solid var(--line-strong);
  color:var(--gold-pale);
  border-radius:8px;
  padding:7px 14px;
  font-size:12.5px;
  font-family:'Inter', sans-serif;
  cursor:pointer;
}
.btn-ghost:hover{ background:rgba(207,167,94,0.08); }
.btn-gold{
  background:linear-gradient(135deg, var(--gold-bright), var(--gold));
  color:var(--bg-deep);
  border:none;
  border-radius:8px;
  padding:9px 18px;
  font-size:13px;
  font-weight:700;
  font-family:'Inter', sans-serif;
  cursor:pointer;
}

/* ============= Users: privacy-respecting detail panel ============= */
.privacy-lock{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  color:var(--text-muted);
}
.privacy-shared{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  color:var(--ok);
}
.privacy-lock svg, .privacy-shared svg{ width:13px; height:13px; }

.user-detail{
  display:none;
  margin-top:14px;
}
.user-detail.open{ display:block; }
.locked-box{
  border:1px dashed var(--line-strong);
  border-radius:12px;
  padding:24px;
  text-align:center;
}
.locked-box svg{ width:22px; height:22px; color:var(--text-muted); margin-bottom:10px; }
.locked-box-title{ font-size:13.5px; color:var(--text); margin-bottom:4px; }
.locked-box-sub{ font-size:12px; color:var(--text-muted); line-height:1.5; max-width:340px; margin:0 auto; }

.checkin-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px dashed rgba(207,167,94,0.12);
  font-size:12.5px;
}
.checkin-row:last-child{ border-bottom:none; }
.checkin-date{ color:var(--text-muted); width:110px; flex-shrink:0; }

.staff-notes{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.staff-notes-label{
  display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  letter-spacing:0.03em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px;
}
.staff-notes-label svg{ width:12px; height:12px; }
.staff-note-row{ padding:9px 0; border-bottom:1px dashed rgba(207,167,94,0.12); font-size:12.5px; }
.staff-note-row:last-child{ border-bottom:none; }
.staff-note-date{ color:var(--text-muted); font-size:10.5px; margin-bottom:2px; }
.staff-note-text{ color:var(--text); line-height:1.5; }
.staff-note-row.breach{ border-left:3px solid #E07A5F; padding-left:10px; }
.staff-note-breach-tag{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:rgba(224,122,95,0.15); color:#E07A5F; font-size:10px; font-weight:600; }
.staff-note-breach{ display:flex; gap:8px; align-items:flex-start; margin-top:8px; font-size:11.5px; line-height:1.45; color:var(--text-muted); cursor:pointer; }
.staff-note-breach input{ margin-top:2px; accent-color:#E07A5F; flex-shrink:0; }
.staff-notes-empty{ font-size:12px; color:var(--text-muted); padding:4px 0 12px; }
.checkin-history-count{ font-size:12.5px; color:var(--gold); font-weight:600; margin-bottom:10px; }
.checkin-history-reasons{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.checkin-reply-box{
  margin-top:6px; padding:9px 11px; width:100%;
  background:rgba(207,167,94,0.07); border:1px dashed rgba(207,167,94,0.25); border-radius:10px;
}
.checkin-reply-label{ font-size:10px; font-weight:600; color:var(--gold); margin-bottom:3px; }
.checkin-reply-text{ font-size:12px; color:var(--text); line-height:1.5; white-space:pre-wrap; }
.staff-note-add{ display:flex; gap:8px; margin-top:12px; align-items:flex-start; }
.staff-note-add textarea{
  flex:1; background:rgba(6,20,14,0.6); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; color:var(--text); font-size:12.5px; font-family:'Inter', sans-serif;
  resize:vertical; min-height:38px;
}
.staff-note-add textarea:focus{ outline:none; border-color:var(--gold); }

/* ============= Care Plan Library + Builder ============= */
.cpl-category-title{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--gold-pale); margin:20px 0 10px;
}
.cpl-category-title:first-child{ margin-top:0; }
.cpl-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px dashed rgba(207,167,94,0.12);
}
.cpl-item:last-child{ border-bottom:none; }
.cpl-item-title{ font-size:13px; color:var(--text); font-weight:600; margin-bottom:2px; }
.cpl-item-desc{ font-size:11.5px; color:var(--text-muted); line-height:1.5; }
.cpl-item-actions{ display:flex; gap:6px; flex-shrink:0; }

.cpb-header-card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:14px;
  padding:16px; margin-bottom:16px;
}
.cpb-user-name{ font-size:15px; font-weight:700; color:var(--text); margin-bottom:2px; }
.cpb-user-sub{ font-size:12px; color:var(--text-muted); margin-bottom:12px; }

.cpb-panel-title{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--gold-pale); margin:18px 0 10px; display:flex; align-items:center; justify-content:space-between;
}
.cpb-search{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--line-strong);
  border-radius:8px; padding:8px 12px; color:var(--text); font-size:12.5px;
  font-family:'Inter', sans-serif; margin-bottom:10px;
}
.cpb-library-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px;
}
.cpb-library-item.added{ opacity:0.4; }
.cpb-item-title{ font-size:12.5px; color:var(--text); font-weight:600; }
.cpb-item-desc{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.cpb-add-btn, .cpb-remove-btn{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; font-weight:700;
}
.cpb-add-btn{ background:rgba(207,167,94,0.18); color:var(--gold-pale); }
.cpb-remove-btn{ background:rgba(200,80,80,0.15); color:#e88; }
.cpb-plan-empty{
  text-align:center; padding:22px 16px; border:1px dashed var(--line-strong); border-radius:12px;
  font-size:12px; color:var(--text-muted);
}
.cpb-plan-item{
  background:rgba(207,167,94,0.06); border:1px solid rgba(207,167,94,0.25); border-radius:10px;
  padding:10px 12px; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.cpb-save-row{ margin-top:20px; }

/* ---- Per-component reminders — library defaults + per-member overrides ---- */
.notif-badge{
  display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600;
  color:var(--gold-pale); background:rgba(207,167,94,0.12); border:1px solid var(--line);
  border-radius:20px; padding:3px 9px; margin-top:6px;
}
.notif-badge.off{ color:var(--text-muted); background:transparent; border-style:dashed; }
.notif-edit-btn{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,0.03); color:var(--gold-pale); display:flex; align-items:center;
  justify-content:center; cursor:pointer; font-size:13px;
}
.cpl-item-title-row, .cpb-item-title-row{ display:flex; flex-direction:column; align-items:flex-start; }
.notif-freq-row{ display:flex; gap:8px; margin-bottom:14px; }
.notif-freq-btn{
  flex:1; text-align:center; padding:9px 0; border-radius:8px; border:1px solid var(--line);
  background:rgba(6,20,14,0.4); color:var(--text-muted); font-size:12.5px; font-weight:600;
  cursor:pointer; font-family:'Inter', sans-serif;
}
.notif-freq-btn.active{ border-color:var(--gold); color:var(--gold-bright); background:rgba(207,167,94,0.12); }
.notif-day-row{ display:flex; gap:5px; margin-bottom:14px; flex-wrap:wrap; }
.notif-day-chip{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:rgba(6,20,14,0.4); color:var(--text-muted); font-size:11px; font-weight:700;
  cursor:pointer; font-family:'Inter', sans-serif; display:flex; align-items:center; justify-content:center;
}
.notif-day-chip.active{ border-color:var(--gold); color:var(--gold-bright); background:rgba(207,167,94,0.18); }
.notif-enable-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line);
}
.notif-enable-row span{ font-size:13px; font-weight:600; color:var(--text); }
.field textarea{
  width:100%; background:rgba(6,20,14,0.6); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; color:var(--text); font-size:13.5px; font-family:'Inter', sans-serif; resize:vertical;
}
.field textarea:focus{ outline:none; border-color:var(--gold); }
.notif-hint{ font-size:10.5px; color:var(--text-muted); line-height:1.5; margin-top:-4px; margin-bottom:14px; }
.cpbp-item-notif{ font-size:9px; color:#1B7A54; font-weight:700; margin-top:4px; }

/* ============= Accountability (Bespoke drift check-ins) ============= */
.acc-settings-row{
  display:flex; align-items:center; gap:10px; padding:4px 2px 6px;
}
.acc-settings-row label{ font-size:12.5px; color:var(--text-muted); flex-shrink:0; }
.acc-settings-row input{
  width:56px; text-align:center; background:rgba(6,20,14,0.6); border:1px solid var(--line);
  border-radius:8px; padding:8px 6px; color:var(--text); font-size:14px; font-family:'Inter', sans-serif;
}
.acc-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0; border-bottom:1px dashed rgba(207,167,94,0.12);
}
.acc-row:last-child{ border-bottom:none; }
.acc-name{ font-size:13.5px; font-weight:600; color:var(--text); }
.acc-meta{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.acc-status{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  padding:3px 9px; border-radius:20px; flex-shrink:0;
}
.acc-status.flagged{ background:rgba(200,140,60,0.18); color:#E8B36A; }
.acc-status.followed-up{ background:rgba(120,160,140,0.15); color:var(--text-muted); }
.acc-status.on-track{ background:rgba(255,255,255,0.05); color:var(--text-muted); }
.acc-empty{ text-align:center; padding:22px 16px; font-size:12px; color:var(--text-muted); }
.acc-reasons{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.acc-reason-chip{
  font-size:10px; padding:3px 8px; border-radius:20px; line-height:1.4;
}
.acc-reason-chip.component{ background:rgba(200,80,70,0.16); color:#E89486; border:1px solid rgba(200,80,70,0.3); font-weight:600; }
.acc-reason-chip.general{ background:rgba(255,255,255,0.05); color:var(--text-muted); border:1px solid var(--line); }
.acc-reason-chip.celebration{ background:rgba(47,163,114,0.16); color:#6FCB9F; border:1px solid rgba(47,163,114,0.3); font-weight:600; }
.btn-gold.celebration{ background:linear-gradient(135deg,#2FA372,#0F6B47); color:#FDF8EC; }
#checkinModal .modal-card{ max-width:420px; }
#checkinModal textarea{ min-height:140px; }
.checkin-draft-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.checkin-draft-btn{
  background:none; border:1px solid var(--gold); color:var(--gold); font-size:11px; font-weight:600;
  padding:5px 10px; border-radius:20px; cursor:pointer; font-family:'Inter', sans-serif; flex-shrink:0;
}
.checkin-draft-btn:disabled{ opacity:0.5; cursor:default; }
.checkin-draft-source{ font-size:10px; color:var(--text-muted); margin-top:-8px; margin-bottom:10px; }

/* ---- Live "what they'll see" preview — a faithful mini replica of the
   actual member-facing Care Plan screen (light theme, not the admin's
   dark theme), so this is an honest preview, not an approximation. ---- */
.cpbp-frame{
  background:#F7F1E2;
  border-radius:18px;
  overflow:hidden;
  border:6px solid #1a1a18;
  max-width:280px;
  margin:0 auto;
}
.cpbp-header{
  background:#F7F1E2;
  padding:20px 16px 14px;
  text-align:center;
  border-bottom:1px solid #DAD4C8;
}
.cpbp-icon{
  width:40px; height:40px; border-radius:50%;
  background:#D8F0E2; display:flex; align-items:center; justify-content:center;
  font-size:18px; margin:0 auto 8px;
}
.cpbp-eyebrow{ font-size:9.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#6B675F; margin:0 0 3px; }
.cpbp-title{ font-family:'Fraunces', Georgia, serif; font-size:15px; font-weight:700; color:#2A2A28; margin:0 0 4px; }
.cpbp-summary{ font-size:10.5px; color:#6B675F; line-height:1.4; margin:0; }
.cpbp-scroll{ padding:14px; max-height:360px; overflow-y:auto; }
.cpbp-note{
  background:#D8F0E2; border:1px solid #DAD4C8; border-radius:10px;
  padding:10px 12px; font-size:10px; line-height:1.5; color:#2A2A28; margin-bottom:14px;
}
.cpbp-category{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#1B7A54; margin:12px 0 6px; }
.cpbp-category:first-child{ margin-top:0; }
.cpbp-item{
  background:#FFFFFF; border:1px solid #DAD4C8; border-radius:9px;
  padding:9px 10px; margin-bottom:6px;
}
.cpbp-item-title{ font-size:10.5px; font-weight:600; color:#2A2A28; margin:0 0 2px; }
.cpbp-item-desc{ font-size:9.5px; color:#6B675F; line-height:1.4; margin:0; }
.cpbp-empty{ text-align:center; padding:20px 12px; font-size:10.5px; color:#6B675F; font-style:italic; }
.cpbp-caption{ text-align:center; font-size:10.5px; color:var(--text-muted); margin-top:10px; }
.checkin-detail{ color:var(--text); flex:1; }
.checkin-mood{ font-size:15px; }

/* ============= Attention rows (Overview) ============= */
.attention-row{
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px 0;
  border-bottom:1px dashed rgba(207,167,94,0.12);
}
.attention-row:last-child{ border-bottom:none; }
.attention-tag{
  flex-shrink:0;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  padding:6px 11px;
  border-radius:8px;
  text-align:center;
  white-space:nowrap;
}
.attention-tag.gold{
  background:rgba(207,167,94,0.12);
  color:var(--gold-pale);
  box-shadow:0 0 0 1px rgba(207,167,94,0.4), 0 0 14px rgba(207,167,94,0.28);
}
.attention-tag.amber{
  background:rgba(240,180,80,0.12);
  color:#F0C177;
  box-shadow:0 0 0 1px rgba(240,180,80,0.4), 0 0 14px rgba(240,180,80,0.24);
}
.attention-info{ flex:1; min-width:0; }
.attention-title{ font-size:13.5px; font-weight:600; color:var(--text); }
.attention-meta{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }

/* ============= Pricing ============= */
.price-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.price-card-title{
  font-family:'Fraunces', serif;
  font-size:18px;
  color:var(--gold-bright);
  margin-bottom:2px;
}
.price-card-sub{ font-size:12px; color:var(--text-muted); margin-bottom:18px; }
.price-field{ margin-bottom:14px; }
.price-field label{ display:block; font-size:11.5px; color:var(--text-muted); margin-bottom:6px; }
.price-input-wrap{
  display:flex;
  align-items:center;
  background:rgba(6,20,14,0.6);
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 12px;
}
.price-input-wrap span{ color:var(--text-muted); font-size:13px; }
.price-input-wrap input{
  flex:1;
  background:none;
  border:none;
  color:var(--text);
  font-size:14px;
  padding:11px 8px;
  font-family:'Inter', sans-serif;
}
.price-input-wrap input:focus{ outline:none; }
.save-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
}
.save-confirm{
  font-size:12px;
  color:var(--ok);
  opacity:0;
  transition:opacity 0.3s ease;
}
.save-confirm.show{ opacity:1; }

/* ============= Promo codes ============= */
.code-chip{
  font-family:'Inter', sans-serif;
  font-weight:700;
  letter-spacing:0.03em;
  background:rgba(207,167,94,0.1);
  border:1px solid var(--line);
  color:var(--gold-pale);
  padding:4px 10px;
  border-radius:7px;
  font-size:12.5px;
}

.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(6,20,14,0.7);
  z-index:40;
  /* The card's auto margins centre it. A dialog taller than the window (or
     the phone screen) starts at the top and scrolls, rather than being cut
     off above it, as centring the overflow would. */
  align-items:flex-start;
  justify-content:center;
  backdrop-filter:blur(3px);
  overflow-y:auto;
  padding:24px 16px;
}
.modal-overlay.show{ display:flex; }
#verifyModal{ z-index:45; }
/* "Send this?": over the dialog it came from (a ticket, a request), below
   the password sheet. Marked as going to members. */
#sendConfirmModal{ z-index:44; }
.send-confirm-badge{
  display:inline-block; margin-bottom:10px;
  font-size:10.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:#F0C177; background:rgba(240,180,80,0.12); border:1px solid rgba(240,180,80,0.3); border-radius:6px; padding:3px 8px;
}
.send-confirm-text{ text-align:left; margin-bottom:12px; }
.send-confirm-preview{
  max-height:160px; overflow-y:auto;
  font-size:13px; line-height:1.55; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere;
  background:rgba(6,20,14,0.6); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
.send-confirm-preview[hidden]{ display:none; }
.staff-root[data-role="raqi"] .role-admin-only{ display:none !important; }
.profile-field{ display:flex; gap:12px; padding:8px 0; border-bottom:1px dashed rgba(207,167,94,0.12); font-size:12.5px; }
.profile-field:last-child{ border-bottom:none; }
.profile-field-label{ color:var(--text-muted); width:120px; flex-shrink:0; }
.profile-field-value{ color:var(--text); flex:1; min-width:0; overflow-wrap:anywhere; }
.watch-badge{ display:inline-block; margin-left:6px; font-size:10px; font-weight:700; color:#F0C177; background:rgba(240,180,80,0.12); border-radius:6px; padding:2px 6px; vertical-align:middle; }
.pill-status-paused{ background:rgba(240,180,80,0.14); color:#F0C177; }
.pill-status-deleting{ background:rgba(240,152,156,0.14); color:#F0989C; }
.modal-card{
  width:100%;
  max-width:380px;
  margin:auto;
  background:var(--bg-emerald);
  border:1px solid var(--line-strong);
  border-radius:16px;
  padding:28px;
}
.modal-title{ font-size:17px; font-weight:600; color:var(--gold-bright); margin-bottom:18px; }
.modal-close-row{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* ============= Full ticket report modal ============= */
.report-modal-card{
  max-width:460px;
  max-height:calc(var(--staff-vh, 1vh) * 84);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* ============= Global search: a box under the top bar =============
   Opened by the search icon in the bar; the full width of the dashboard,
   on top of the page (the bar is above it), so nothing in the bar moves. */
.search-panel{
  position:absolute; left:0; right:0; top:100%;
  display:flex; flex-direction:column;
  max-height:calc(var(--staff-vh, 1vh) * 70);
  background:#0E2A20;
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 14px 30px rgba(0,0,0,0.45);
}
.search-panel[hidden]{ display:none; }
.search-input-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 18px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.search-input-row svg{ width:17px; height:17px; color:var(--text-muted); flex-shrink:0; }
.search-input-row input{
  flex:1;
  background:none;
  border:none;
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:14.5px;
}
.search-input-row input:focus{ outline:none; }
.search-input-row #searchClearBtn{
  display:flex; background:none; border:none; color:var(--text-muted); cursor:pointer; padding:4px; flex-shrink:0;
}
.search-input-row #searchClearBtn[hidden]{ display:none; }
.search-input-row #searchClearBtn svg{ width:15px; height:15px; }
.search-results{ overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:6px 8px 14px; min-height:0; }
:where(.staff-root.w-wide) .search-input-row{ padding:16px 28px; }
:where(.staff-root.w-wide) .search-results{ padding:6px 20px 14px; }
/* The hint under the box ("Start typing…", "No matches…"): a slim strip,
   8px above and below one 16px line, without the results' own padding. */
.search-results.has-hint{ padding:0 8px; }
.search-empty-hint{ font-size:12px; line-height:16px; color:var(--text-muted); padding:8px 12px; text-align:center; }
.search-result-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:11px 10px;
  border-radius:10px;
  cursor:pointer;
  /* A button that looks like the row it was. */
  background:none; border:none; color:inherit; font:inherit; text-align:left;
}
.search-result-item:hover, .search-result-item:focus-visible{ background:rgba(207,167,94,0.06); outline:none; }
.search-result-tag{
  flex-shrink:0;
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding:3px 7px;
  border-radius:6px;
  background:rgba(207,167,94,0.12);
  color:var(--gold-pale);
}
.search-result-text{ min-width:0; flex:1; }
.search-result-title{ display:block; font-size:13px; color:var(--text); font-weight:600; }
.search-result-sub{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-highlight{ animation:searchFlash 1.4s ease; }
@keyframes searchFlash{ 0%{ background:rgba(207,167,94,0.22); } 100%{ background:transparent; } }

/* ============= Reports / charts ============= */
.chart-card{ padding-bottom:20px; }
.chart-title{ font-size:13px; font-weight:600; color:var(--gold-pale); margin-bottom:18px; }
.chart-bars{ display:flex; align-items:flex-end; gap:8px; height:130px; }
.chart-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.chart-bar{ width:100%; max-width:30px; background:rgba(207,167,94,0.35); border-radius:5px 5px 0 0; transition:height 0.3s ease; }
.chart-bar.gold{ background:linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.chart-bar-value{ font-size:9.5px; color:var(--text-muted); margin-bottom:4px; }
.chart-bar-label{ font-size:10px; color:var(--text-muted); margin-top:7px; }
.tier-split-row{ margin-bottom:12px; }
.tier-split-bar{ height:10px; border-radius:6px; background:rgba(207,167,94,0.16); overflow:hidden; display:flex; }
.tier-split-fill.premium{ height:100%; background:rgba(255,255,255,0.35); }
.tier-split-legend{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--text-muted); }
.legend-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:middle; }
.legend-dot.premium{ background:rgba(255,255,255,0.5); }
.legend-dot.bespoke{ background:var(--gold); }

/* ============= Digital Majlis: globe + participants ============= */
.majlis-globe-wrap{ display:flex; justify-content:center; padding:10px 0; }
.majlis-globe{
  position:relative;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(207,167,94,0.28), rgba(18,58,44,0.6) 60%, rgba(6,20,14,0.9) 100%);
  border:1px solid var(--line-strong);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
}
.majlis-dot{
  position:absolute;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold-bright);
  box-shadow:0 0 6px 2px rgba(240,206,132,0.7);
  transform:translate(-50%, -50%);
  animation:majlisPulse 2.4s ease-in-out infinite;
}
@keyframes majlisPulse{ 0%,100%{ opacity:0.6; transform:translate(-50%,-50%) scale(1); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.4); } }

.majlis-participant-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 0;
  border-bottom:1px dashed rgba(207,167,94,0.12);
}
.majlis-participant-row:last-child{ border-bottom:none; }
.majlis-participant-name{ font-size:13px; font-weight:600; color:var(--text); }
.majlis-participant-loc{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.majlis-host-badge{
  display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:0.02em;
  color:var(--ok); background:rgba(127,184,138,0.14); border-radius:10px;
  padding:1px 7px; margin-left:6px; vertical-align:1px;
}
.majlis-mic-btn{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,0.03); color:var(--text-muted); display:flex; align-items:center;
  justify-content:center; cursor:pointer; font-size:13px;
}
.majlis-mic-btn.mic-on{ border:2px solid var(--ok); color:var(--ok); background:rgba(127,184,138,0.12); box-shadow:0 0 0 3px rgba(127,184,138,0.14); }
.majlis-schedule-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 0; border-bottom:1px dashed rgba(207,167,94,0.12);
}
.majlis-schedule-row:last-child{ border-bottom:none; }
.majlis-schedule-title{ font-size:13px; font-weight:600; color:var(--text); }
.majlis-schedule-meta{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.majlis-schedule-empty{ text-align:center; padding:18px 16px; font-size:12px; color:var(--text-muted); }

.majlis-leading-now{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:16px 0; margin-bottom:6px;
}
.majlis-leading-arrow{
  flex-shrink:0; width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,0.03); color:var(--gold-pale); font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.majlis-leading-arrow:hover{ border-color:var(--gold); }
.majlis-leading-current{ text-align:center; min-width:180px; }
.majlis-leading-label{ font-size:13px; font-weight:700; color:var(--gold-bright); letter-spacing:0.02em; }
.majlis-leading-arabic{ font-size:20px; color:var(--text); margin-top:4px; font-family:'Cormorant Garamond', serif; }
.majlis-leading-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 4px; border-bottom:1px dashed rgba(207,167,94,0.12); cursor:pointer;
}
.majlis-leading-option:last-child{ border-bottom:none; }
.majlis-leading-option-label{ font-size:13px; font-weight:600; color:var(--text); }
.majlis-leading-option-arabic{ font-size:13px; color:var(--text-muted); }
.majlis-leading-option.active .majlis-leading-option-label{ color:var(--gold-bright); }
.majlis-leading-option-check{ color:var(--ok); font-size:13px; flex-shrink:0; width:16px; text-align:center; }
.report-block{ margin-bottom:16px; }
.report-block:last-child{ margin-bottom:0; }
.report-label{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:5px;
}
.report-value{ font-size:13.5px; color:var(--text); line-height:1.55; }
.report-chip-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.report-chip{
  font-size:11.5px;
  background:rgba(207,167,94,0.1);
  border:1px solid var(--line);
  color:var(--gold-pale);
  padding:4px 10px;
  border-radius:14px;
}
.report-divider{ border-top:1px solid var(--line); margin:16px 0; }
.report-subtitle{ font-size:12px; font-weight:600; color:var(--gold-pale); margin-bottom:10px; }

/* The dashboard's own width, not the window's (staff.js sets w-wide, 700px
   and up): in the app on a computer it's drawn inside the phone frame.
   :where() keeps each rule's specificity what it was as a media query. */
:where(.staff-root.w-wide) .main{ padding:28px 32px calc(84px + env(safe-area-inset-bottom)); }
:where(.staff-root.w-wide) .stat-row{ grid-template-columns:repeat(4, 1fr); }
:where(.staff-root.w-wide) .price-grid{ grid-template-columns:1fr 1fr; }
:where(.staff-root.w-wide) .topbar{ padding:16px 28px; }
:where(.staff-root.w-wide) .card{ padding:22px; }
.gr-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  background: #0d2016; border: 1px solid var(--line-strong); color: var(--text);
  padding: 11px 18px; border-radius: 10px; font-size: 12.5px; font-family: 'Inter', sans-serif;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4); z-index: 500; opacity: 0; pointer-events: none;
  transition: all 0.25s ease; max-width: 320px; text-align: center;
}
.gr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============= Staff mode (stage 1): app-only controls, Accounts & roles ============= */
.staff-root:not([data-host="app"]) .app-only{ display:none !important; }
.staff-root[data-host="app"] .web-only{ display:none !important; }


.role-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(207,167,94,0.08);
}
.role-row:last-child{ border-bottom:none; }
.role-row-main{ min-width:0; }
.role-row-name{ font-size:14px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.role-row-sub{ font-size:12px; color:var(--text-muted); margin-top:2px; overflow-wrap:anywhere; }
.role-row-note{ font-size:11.5px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
.role-row .btn-ghost{ white-space:nowrap; flex-shrink:0; }
.role-empty{ font-size:12.5px; color:var(--text-muted); padding:4px 0; }

.role-now{ font-size:12.5px; color:var(--text-muted); margin:-4px 0 14px; }
.role-field{ margin-bottom:14px; }
.role-field-label{ font-size:11.5px; color:var(--text-muted); margin-bottom:6px; letter-spacing:0.01em; }
.role-choice{ display:flex; gap:8px; flex-wrap:wrap; }
.role-choice-opt{
  flex:1;
  min-width:120px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:13px;
  color:var(--text);
  cursor:pointer;
}
.role-choice-opt input{ accent-color:var(--gold); margin:0; }
.role-choice-opt:has(input:checked){ border-color:var(--gold); background:rgba(207,167,94,0.08); }
.role-choice-opt.current{ opacity:0.5; cursor:default; }
.role-choice-opt.current span::after{ content:' (now)'; color:var(--text-muted); }
.role-effect{ font-size:12px; color:var(--text-muted); line-height:1.55; margin:-6px 0 14px; min-height:0; }
.role-effect:empty{ display:none; }

/* ---------- Bespoke Accountability (migration 35) ----------
   The Care plan adherence page, a Bespoke member's adherence and My Journey
   on their profile (shared/my-journey.js draws the calendar in these
   colours), and what counts for a care plan item. Gentle: no red. */
#page-care-plan-adherence, #profileAdherence{
  --kqj-accent:var(--gold);
  --kqj-on-accent:#0B241B;
  --kqj-text:var(--text);
  --kqj-muted:var(--text-muted);
  --kqj-line:var(--line-strong);
  --kqj-faint:rgba(243,239,228,0.3);
  --kqj-card:rgba(6,20,14,0.45);
}
.pill-adh{ white-space:nowrap; }
.pill-adh-on_track{ background:rgba(127,184,138,0.14); color:var(--ok); }
.pill-adh-behind{ background:rgba(240,180,80,0.14); color:#F0C177; }
.pill-adh-not_started{ background:rgba(255,255,255,0.07); color:var(--text-muted); }
.pill-adh-just_started{ background:rgba(127,184,138,0.08); color:#B9D7BF; }
.pill-adh-partly{ background:rgba(127,184,138,0.11); color:#A6CDB0; }
.pill-adh-new_plan{ background:rgba(232,201,122,0.10); color:#E8D7A8; }
.pill-adh-not_measured{ background:rgba(255,255,255,0.05); color:rgba(243,239,228,0.45); }
.adh-row{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:none; border:none; border-bottom:1px solid var(--line);
  padding:12px 2px; color:var(--text); font:inherit; cursor:pointer;
}
.adh-row:last-child{ border-bottom:none; }
.adh-row:hover .adh-name, .adh-row:focus-visible .adh-name{ color:var(--gold-bright); }
.adh-row:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:8px; }
.adh-row-main{ flex:1; min-width:0; }
.adh-name{ font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.adh-sub{ font-size:12.5px; margin-top:3px; }
.adh-meta{ font-size:11.5px; color:var(--text-muted); margin-top:3px; line-height:1.45; }
.adh-row .pill{ flex:none; }
.adh-overall{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; }
.adh-note{ font-size:11.5px; color:var(--text-muted); margin:6px 0 12px; line-height:1.5; }
.adh-items{ display:grid; gap:8px; }
.adh-item{ border:1px solid var(--line); border-radius:12px; padding:10px 12px; min-width:0; }
.adh-item-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.adh-item-title{ font-size:13px; font-weight:600; overflow-wrap:anywhere; min-width:0; }
.adh-item-measured{ font-size:11.5px; color:var(--text-muted); margin-top:4px; line-height:1.5; }
.cpl-target{ font-size:11.5px; color:var(--text-muted); margin-top:4px; line-height:1.45; flex-basis:100%; }
.cpt-ayahs{ display:flex; align-items:center; gap:8px; }
.cpt-ayahs input{ flex:1; min-width:0; }
.cpt-ayahs span{ color:var(--text-muted); font-size:12.5px; }
#cptModal .field[hidden]{ display:none; }

/* The Care Plan Builder's Share With Them card (migration 41). */
.cpb-share-state{ font-size:12.5px; line-height:1.55; color:var(--text-muted); margin:0 0 10px; }
.cpb-share-hint{ font-size:11.5px; line-height:1.5; color:var(--text-muted); margin:6px 0 0; }
#cpbShareCard[hidden], #cpbShareForm[hidden]{ display:none; }

/* The Care Plan Builder's sections open and close (a long page). */
.cpb-section > summary.cpb-panel-title{
  list-style:none; cursor:pointer; margin:0; padding:2px 0; gap:10px; border-radius:6px;
}
.cpb-section > summary.cpb-panel-title::-webkit-details-marker{ display:none; }
.cpb-section > summary.cpb-panel-title::after{
  content:''; flex:none; width:7px; height:7px; margin-right:4px;
  border-right:1.5px solid var(--gold-pale); border-bottom:1.5px solid var(--gold-pale);
  transform:rotate(45deg); transition:transform 0.15s ease;
}
.cpb-section[open] > summary.cpb-panel-title{ margin-bottom:12px; }
.cpb-section[open] > summary.cpb-panel-title::after{ transform:rotate(-135deg); }
.cpb-section > summary.cpb-panel-title:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.cpb-section-name{ min-width:0; }
.cpb-unsaved{
  font-size:10.5px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--gold-bright);
  border:1px solid var(--line-strong); border-radius:20px; padding:1px 8px; margin-left:4px;
}
.cpb-unsaved[hidden]{ display:none; }

/* After it's shared: what Save Plan does, and the update log (migration
   43). */
.cpb-save-note{ font-size:12px; line-height:1.5; color:var(--gold-pale); margin:14px 0 0; }
.cpb-save-note[hidden], .cpb-updates[hidden]{ display:none; }
.cpb-updates{ margin:4px 0 12px; }
.cpb-updates-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--gold-pale); margin:0 0 8px; }
.cpb-update{ border:1px solid var(--line); border-radius:10px; padding:9px 12px; margin-bottom:8px; min-width:0; }
.cpb-update-head{ font-size:11px; color:var(--text-muted); line-height:1.45; }
.cpb-update-summary{ font-size:12.5px; color:var(--text); line-height:1.5; margin-top:3px; overflow-wrap:anywhere; }
.cpb-updates-more{ font-size:11.5px; padding:4px 10px; }