/* ============================================================
   Clinic webapp prototype — local styles
   Layered on top of colors_and_type.css. Not a full system; just
   the patterns the prototype needs (app shells, sidebars, tables,
   schedule, calendar, mobile chrome, etc).
   ============================================================ */

/* Mobile viewport safety net.
   IMPORTANT: do NOT put `overflow-x: hidden` on the html element — iOS Safari
   uses html-level scroll gestures for pinch-zoom, and hiding overflow there
   disables zoom entirely. Apply the clip on body only.
   `-webkit-text-size-adjust: 100%` stops Safari resizing text on rotation. */
html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  height: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: var(--bone);
  font-size: 15px; /* tighter than marketing — this is product UI */
  line-height: 1.5;
  color: var(--fg-2);
}

/* ── theme overrides ─────────────────────────────────────────── */
[data-theme="dark"] {
  --scroll-thumb: #414A42;
  --scroll-thumb-hover: #56615A;
  --bone:        #191C1A;
  --bone-95:     rgba(25,28,26,0.92);
  --cream:       #20241F;
  --porcelain:   #242822;
  --line:        #363C35;
  --ink:         #EDF1EA;
  --charcoal:    #C9D1C6;
  --mushroom:    #8C968A;
  --fg-1:        #EDF1EA;
  --fg-2:        #C9D1C6;
  --fg-3:        #8C968A;
  --bg:          #191C1A;
  --bg-alt:      #20241F;
  --bg-card:     #242822;
  --blush-soft:  #2A332A;
}
[data-theme="dark"] body { background: var(--bone); color: var(--fg-2); }
[data-theme="dark"] .btn { background: var(--blush-deep); color: var(--ink); }
[data-theme="dark"] .btn:hover { background: var(--blush); }

/* Phone tab bar inverts in dark mode: --ink becomes light, so we need to flip the inner colors */
[data-theme="dark"] .phone-tab { background: #191C1A; border: 1px solid #363C35; }
[data-theme="dark"] .phone-tab button { color: rgba(237,241,234,0.55); }
[data-theme="dark"] .phone-tab button.active { background: #EDF1EA; color: #191C1A; }
[data-theme="dark"] .phone-tab button:not(.active):hover { color: #EDF1EA; }

/* ── Persona switcher (top floating bar) ─────────────────────── */
/* Centered via inset+margin instead of left:50% + transform:translateX(-50%);
   the transform trick triggers an iOS Safari bug that expands the layout
   viewport past device-width and forces the page to render too wide. */
.persona-bar {
  position: fixed; top: 12px;
  left: 0; right: 0; margin: 0 auto;
  width: fit-content; max-width: calc(100vw - 16px);
  z-index: 90;
  display: flex; gap: 4px;
  background: var(--bone-95);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-1);
  font-family: var(--font-body);
}
.persona-bar button {
  appearance: none; border: 0; background: transparent;
  font: 500 11px/1 var(--font-body);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.persona-bar button:hover { color: var(--fg-1); }
.persona-bar button.active { background: var(--ink); color: var(--bone); }
.persona-bar-div {
  width: 1px; align-self: stretch; margin: 4px 2px;
  background: var(--line);
}
.persona-bar .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; width: 32px; height: 32px;
  color: var(--fg-3);
}
.persona-bar .theme-toggle:hover { color: var(--fg-1); background: transparent; }
@media (max-width: 480px) {
  .persona-bar button { padding: 8px 12px; font-size: 10px; letter-spacing: 0.08em; }
  .persona-bar { padding: 3px; gap: 2px; }
  .persona-bar .theme-toggle { width: 30px; height: 30px; }
}

/* ── Photo placeholder tones ─────────────────────────────────── */
.ph {
  background-color: var(--blush-soft);
  background-image:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(201,154,138,0.5), transparent 70%);
}
.ph-skin    { background-color: #EACABF; background-image:
    radial-gradient(ellipse at 35% 30%, rgba(255,243,237,0.7), transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(201,154,138,0.6), transparent 70%); }
.ph-portrait{ background-color: #C99A8A; background-image:
    radial-gradient(ellipse at 40% 35%, rgba(234,202,191,0.7), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(61,58,56,0.4), transparent 70%); }
.ph-treat   { background-color: #EFE7E0; background-image:
    radial-gradient(ellipse at 30% 35%, rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(140,133,127,0.4), transparent 70%); }
.ph-clinical{ background-color: #F7F2EE; background-image:
    radial-gradient(ellipse at 50% 30%, rgba(234,202,191,0.4), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(61,58,56,0.3), transparent 70%); }
.ph-room    { background-color: #3D3A38; background-image:
    radial-gradient(ellipse at 40% 30%, rgba(234,202,191,0.5), transparent 65%),
    radial-gradient(ellipse at 80% 80%, rgba(0,0,0,0.4), transparent 70%); }

/* ── Generic UI primitives ───────────────────────────────────── */
.app-btn {
  appearance: none; border: 1px solid var(--line);
  background: var(--bg-card); color: var(--fg-1);
  font: 500 12px/1 var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.app-btn.primary { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.app-btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); }
@media (hover: hover) {
  .app-btn:hover { background: var(--cream); }
  .app-btn.primary:hover { background: var(--charcoal); }
  .app-btn.ghost:hover { background: var(--cream); color: var(--fg-1); }
}
.app-btn.small { padding: 7px 12px; font-size: 11px; }
.app-btn.icon-only { padding: 8px; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font: 500 10px/1 var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--cream); color: var(--fg-2);
  border-radius: var(--radius-pill);
}
.tag.ok { background: rgba(94,122,92,0.15); color: var(--success); }
.tag.warn { background: rgba(166,69,62,0.12); color: var(--alert); }
.tag.blush { background: var(--blush-soft); color: var(--charcoal); }
.tag.ghost { background: transparent; border: 1px solid var(--line); color: var(--fg-3); }

.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 12px/1 var(--font-body);
  letter-spacing: 0.04em;
  color: var(--ink);
  flex-shrink: 0;
  background: var(--blush-soft);
}
.avatar.lg { width: 64px; height: 64px; font-size: 18px; }
.avatar.sm { width: 28px; height: 28px; font-size: 10px; }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.kbd {
  display: inline-block; padding: 2px 6px;
  font: 500 11px/1 var(--font-mono);
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg-card);
  color: var(--fg-3);
}

.scroll-y { overflow-y: auto; }

/* ===========================================================
   CLINICIAN — desktop iPad-ish layout
   =========================================================== */
.clinician-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--bg);
  padding-top: 56px; /* under persona bar */
}

.cl-side {
  border-right: 1px solid var(--line);
  background: var(--bg-card);
  padding: 24px 16px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 56px; height: calc(100vh - 56px);
}
.cl-brand {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--fg-1);
  padding: 4px 12px 16px;
  display: flex; align-items: center; gap: 10px;
}
.cl-brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blush-deep); }
.cl-nav { display: flex; flex-direction: column; gap: 2px; }
.cl-nav button {
  appearance: none; border: 0; background: transparent;
  text-align: left;
  font: 500 13px/1 var(--font-body);
  letter-spacing: 0.01em;
  color: var(--fg-2);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
/* Scope :hover to actual hover-capable input devices so iOS Safari doesn't
   leave the cream background stuck on an active-tapped button after touch
   release (which made the previous-tapped tab look bigger / different). */
@media (hover: hover) {
  .cl-nav button:hover { background: var(--cream); color: var(--fg-1); }
}
/* Active state: a thin pink accent bar drawn as the button's own bottom border
   (rather than an absolute-positioned ::after, which detached from the button
   on iOS Safari sticky parents). All buttons have a transparent 2px bottom
   border so heights are identical between active and inactive. */
.cl-nav button {
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0; /* sharper bottom so the bar reads as an underline */
}
.cl-nav button.active {
  color: var(--fg-1);
  font-weight: 600;
  border-bottom-color: var(--blush-deep);
}
.cl-nav button.active svg { color: var(--fg-1); }

.cl-side-foot {
  margin-top: auto;
  padding: 12px;
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid var(--line);
}
.cl-side-foot .who { display: flex; flex-direction: column; gap: 2px; }
.cl-side-foot .who b { font-size: 13px; color: var(--fg-1); font-weight: 500; }
.cl-side-foot .who span { font-size: 11px; color: var(--fg-3); }

.cl-main { padding: 32px 40px 80px; max-width: 1280px; width: 100%; }

.cl-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 32px;
  flex-wrap: wrap;
}
.cl-head > div:first-child { min-width: 0; flex: 1 1 320px; }
.cl-head .eyebrow { color: var(--fg-3); font-size: 11px; }
.cl-head h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: 40px; line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1); margin: 6px 0 0;
  text-wrap: balance;
}
.cl-head .actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Today schedule (clinician home) */
.cl-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; }
@media (max-width: 1100px) { .cl-grid { grid-template-columns: 1fr; } }

.panel {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
}
.panel-head h3 {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.2; color: var(--fg-1);
}
.panel-head .meta { font-size: 11px; color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

.appt-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.appt-row .appt-meta { min-width: 0; }
.appt-row .appt-meta .who,
.appt-row .appt-meta .what {
  overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.appt-row .appt-meta .what { gap: 6px; }
.appt-row:hover { background: var(--cream); margin: 0 -12px; padding: 14px 12px; border-radius: var(--radius-md); border-bottom-color: transparent; }
.appt-row:last-child { border-bottom: 0; }
.appt-time {
  font: 500 16px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.appt-time small { display: block; font-size: 10px; color: var(--fg-3); margin-top: 4px; font-weight: 400; }
.appt-meta { display: flex; flex-direction: column; gap: 4px; }
.appt-meta .who { font: 500 14px/1.2 var(--font-body); color: var(--fg-1); }
.appt-meta .what { font: 400 12px/1.3 var(--font-body); color: var(--fg-3); display: flex; align-items: center; gap: 8px; }
.appt-meta .what span.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mushroom); display: inline-block; }
.appt-row.now {
  position: relative;
}
.appt-row.now::before {
  content: ""; position: absolute; left: -16px; top: 0; bottom: 0; width: 2px;
  background: var(--blush-deep);
}

/* Phone: buttons drop to a second row so the meta column gets its full width */
@media (max-width: 720px) {
  .appt-row {
    grid-template-columns: 56px minmax(0, 1fr);
    row-gap: 10px;
  }
  .appt-row > div:nth-child(3) {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* stat tiles */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.stat {
  padding: 16px; border: 1px solid var(--line);
  background: var(--bg-card); border-radius: var(--radius-md);
}
.stat .lbl { font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); }
.stat .val {
  font-family: var(--font-display); font-weight: 300; font-size: 32px;
  line-height: 1; color: var(--fg-1); margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.stat .delta { font-size: 11px; color: var(--success); margin-top: 6px; }
.stat .delta.down { color: var(--alert); }

/* Customer record */
.record-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center;
  padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 32px;
}
.record-head h2 { margin: 0 0 4px; font-size: 36px; }
.record-head .meta { display: flex; gap: 16px; font-size: 12px; color: var(--fg-3); flex-wrap: wrap; }
.record-head .meta span { display: inline-flex; gap: 6px; align-items: center; }

.record-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.record-tabs button {
  appearance: none; border: 0; background: transparent;
  font: 500 12px/1 var(--font-body);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--fg-3);
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.record-tabs button:hover { color: var(--fg-1); }
.record-tabs button.active { color: var(--fg-1); border-bottom-color: var(--ink); }

.kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; }
.kv .lbl { font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; }
.kv .val { font-size: 14px; color: var(--fg-1); }

/* Notes timeline */
.notes-timeline { position: relative; padding-left: 24px; }
.notes-timeline::before {
  content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px;
  width: 1px; background: var(--line);
}
.note-item { position: relative; padding-bottom: 28px; }
.note-item:last-child { padding-bottom: 0; }
.note-item::before {
  content: ""; position: absolute; left: -24px; top: 6px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg-card); border: 1.5px solid var(--blush-deep);
}
.note-item .when {
  font: 500 11px/1 var(--font-body); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px;
  display: flex; gap: 12px; align-items: center;
}
.note-item h4 { margin: 0 0 8px; font-size: 16px; color: var(--fg-1); font-weight: 500; }
.note-item .body { font-size: 14px; color: var(--fg-2); line-height: 1.55; max-width: 720px; }
.note-item .author { font-size: 11px; color: var(--fg-3); margin-top: 8px; }

/* Notes accordion */
.notes-accordion .note-acc {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  margin-bottom: 8px; background: var(--bg-card); overflow: hidden;
}
.note-acc summary {
  list-style: none; cursor: pointer;
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.note-acc summary::-webkit-details-marker { display: none; }
.note-acc summary .left { display: flex; flex-direction: column; gap: 4px; }
.note-acc summary h4 { margin: 0; font-size: 15px; font-weight: 500; color: var(--fg-1); }
.note-acc summary .when { font-size: 11px; color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.note-acc[open] summary { background: var(--cream); }
.note-acc .acc-body {
  padding: 0 20px 20px; font-size: 14px; color: var(--fg-2); line-height: 1.55;
  border-top: 1px solid var(--line);
}
.note-acc .acc-body .author { font-size: 11px; color: var(--fg-3); margin-top: 16px; }

/* Photo grid */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1200px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
.photo-card {
  aspect-ratio: 3/4;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--line);
}
.photo-card .label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, transparent, rgba(26,26,26,0.65));
  color: var(--bone);
  font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: end; gap: 8px;
}
.photo-card .label .when { opacity: 0.75; font-size: 10px; }

/* Comparison view */
.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 16px;
}
.compare .col { display: flex; flex-direction: column; gap: 8px; }
.compare .col .ph { aspect-ratio: 3/4; border-radius: var(--radius-md); }
.compare .col .lbl { font-size: 11px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); display: flex; justify-content: space-between; }

/* Capture screen */
.capture-stage {
  background: #1A1A1A; border-radius: var(--radius-md);
  aspect-ratio: 4/3; display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.capture-stage .frame-overlay {
  position: absolute; inset: 8%;
  border: 1px dashed rgba(255,255,255,0.35);
  border-radius: 4px;
}
.capture-stage .pose-guide {
  position: absolute; inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  border-top-color: rgba(234,202,191,0.6);
  border-bottom-color: rgba(234,202,191,0.6);
}
.capture-stage .feed {
  position: absolute; inset: 0;
  background: var(--blush-soft);
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(255,243,237,0.8), transparent 50%),
    radial-gradient(ellipse at 30% 90%, rgba(61,58,56,0.7), transparent 70%),
    radial-gradient(ellipse at 80% 80%, rgba(201,154,138,0.5), transparent 65%);
}
.capture-stage .badge {
  position: absolute; top: 14px; left: 14px;
  padding: 6px 10px; border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.45); color: white;
  font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
  backdrop-filter: blur(8px);
}
.capture-stage .badge .live { width: 6px; height: 6px; border-radius: 50%; background: #ED5D49; }
.capture-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 20px;
}
.shutter {
  width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid var(--ink); background: var(--bone); cursor: pointer;
  display: grid; place-items: center;
  transition: transform var(--dur-fast);
}
.shutter:hover { transform: scale(1.04); }
.shutter::after { content: ""; width: 50px; height: 50px; border-radius: 50%; background: var(--ink); }

/* Capture pose ribbon */
.pose-ribbon {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px 0;
}
.pose-chip {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--bg-card);
  font: 500 11px/1 var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-2); cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: all var(--dur-fast);
}
.pose-chip:hover { color: var(--fg-1); }
.pose-chip.captured { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.pose-chip.active { border-color: var(--blush-deep); color: var(--fg-1); }
.pose-chip .step-num {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; background: var(--cream); color: var(--fg-2);
}
.pose-chip.captured .step-num { background: var(--blush); color: var(--ink); }

/* Task 3: Camera video + fallback */
.feed-video {
  width: 100%; height: 100%; object-fit: cover;
  background: #000;
}
/* Mirror selfie-style only when the front camera is active. The captured
   canvas frame is never mirrored (drawImage reads pixel data un-transformed). */
.feed-video.mirrored { transform: scaleX(-1); }
.capture-row-controls {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 8px;
}
.cam-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--fg-3); text-align: center; padding: 24px;
}
.cam-fallback-title { font-size: 14px; color: var(--fg-2); font-weight: 500; }
.cam-fallback-sub   { font-size: 11px; color: var(--fg-3); }

/* Task 5: Appointment context strip */
.capture-context {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 4px 10px;
  background: var(--cream); border-radius: 12px;
  font-size: 11px; color: var(--fg-2); letter-spacing: 0.02em;
}
.capture-context svg { color: var(--blush-deep); }

/* Task 6: Face / Body mode pill */
.mode-pill {
  display: inline-flex; padding: 3px;
  background: var(--cream); border-radius: 999px;
  gap: 2px;
}
.mode-pill .mode-opt {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  font: 500 12px/1 var(--font-body); color: var(--fg-3);
  padding: 8px 18px; border-radius: 999px;
  letter-spacing: 0.02em;
}
.mode-pill .mode-opt.active {
  background: var(--bone); color: var(--fg-1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Task 7: Alignment overlay toggle + ghost */
.capture-overlay-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 8px; font-size: 12px; color: var(--fg-2);
  cursor: pointer; user-select: none;
}
.capture-overlay-toggle input { accent-color: var(--blush-deep); }
.capture-ghost {
  position: absolute; inset: 0;
  opacity: 0.25;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}

/* Task 8: Lighting / exposure indicator */
/* (.capture-exposure removed — see Q44 note. The cosmetic indicator was
   misleading because real exposure detection isn't implemented.) */

/* Walk-in / quick book modal */
.modal-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(26,26,26,0.5); backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.modal {
  background: var(--bg-card); border-radius: var(--radius-lg);
  width: min(640px, 92vw); max-height: 88vh; overflow-y: auto;
  padding: 32px;
  box-shadow: var(--shadow-3);
}
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; gap: 16px;
}
.modal-head h2 { margin: 0; font-size: 28px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); }

/* ===========================================================
   CUSTOMER — mobile / phone-shaped layout
   =========================================================== */
.customer-shell {
  min-height: 100vh; padding-top: 56px;
  background: var(--cream);
  display: grid; place-items: start center;
}
.phone {
  width: min(420px, 95vw);
  margin: 32px auto 80px;
  background: var(--bg-card);
  border-radius: 36px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  min-height: 820px;
  position: relative;
}
.phone-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px 6px; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.phone-status .right { display: inline-flex; gap: 6px; align-items: center; }
.phone-body { padding: 8px 24px 88px; }

.phone-tab {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: var(--ink);
  border-radius: var(--radius-pill);
  padding: 8px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  box-shadow: var(--shadow-2);
}
.phone-tab button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: rgba(247,242,238,0.55);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px;
  border-radius: var(--radius-pill);
  font: 500 9px/1 var(--font-body); letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.phone-tab button.active { background: var(--bone); color: var(--ink); }
.phone-tab button:not(.active):hover { color: var(--bone); }

/* Customer home / hero */
.cust-hero {
  margin: 4px -24px 24px;
  padding: 32px 24px 28px;
  background: var(--blush-soft);
  position: relative; overflow: hidden;
}
.cust-hero .greet {
  font-family: var(--font-body); font-size: 11px; letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--charcoal);
}
.cust-hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: 32px; line-height: 1.05; color: var(--ink);
  margin: 8px 0 16px; letter-spacing: var(--tracking-tight);
}
.cust-hero .next-card {
  background: var(--bone); border-radius: var(--radius-md);
  padding: 16px; display: flex; gap: 12px; align-items: center;
  border: 1px solid rgba(0,0,0,0.04);
}
.cust-hero .next-card .when {
  font: 500 11px/1 var(--font-body); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3);
}
.cust-hero .next-card .what { font-size: 15px; color: var(--ink); margin-top: 4px; font-weight: 500; }
.cust-hero .next-card .who { font-size: 12px; color: var(--fg-3); margin-top: 2px; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 24px 0 12px;
}
.section-head h3 {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; color: var(--fg-1);
}
.section-head a, .section-head button {
  appearance: none; background: none; border: 0;
  font: 500 10px/1 var(--font-body); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--fg-3); cursor: pointer;
}

.tile-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.tile {
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--line);
  cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-base);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tile .ph { height: 96px; }
.tile .pad { padding: 12px 14px 14px; }
.tile .pad h4 { margin: 0; font: 500 13px/1.25 var(--font-body); color: var(--fg-1); }
.tile .pad .meta { font-size: 11px; color: var(--fg-3); margin-top: 4px; display: flex; justify-content: space-between; }

.treat-row {
  display: flex; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.treat-row:last-child { border-bottom: 0; }
.treat-row .ph { width: 56px; height: 56px; border-radius: var(--radius-md); flex-shrink: 0; }
.treat-row .info { flex: 1; min-width: 0; }
.treat-row .info h4 { margin: 0; font-size: 14px; font-weight: 500; color: var(--fg-1); }
.treat-row .info p { margin: 4px 0 0; font-size: 12px; color: var(--fg-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.treat-row .price { font-size: 14px; color: var(--fg-1); font-weight: 500; flex-shrink: 0; align-self: center; font-variant-numeric: tabular-nums; }

/* Treatment detail / booking flow */
.treat-detail .cover { margin: -8px -24px 0; height: 240px; }
.treat-detail .pricing-row {
  display: flex; gap: 16px; align-items: baseline;
  margin-top: 16px;
}
.treat-detail .price-big {
  font-family: var(--font-display); font-weight: 300; font-size: 36px; line-height: 1;
  color: var(--fg-1); font-variant-numeric: tabular-nums;
}

/* Booking step UI */
.step-bar { display: flex; gap: 6px; margin: 8px 0 20px; }
.step-bar .step {
  flex: 1; height: 3px; background: var(--line); border-radius: 2px;
  transition: background var(--dur-base);
}
.step-bar .step.done { background: var(--blush-deep); }
.step-bar .step.active { background: var(--ink); }

.option-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg-card); cursor: pointer;
  margin-bottom: 8px;
  transition: all var(--dur-fast);
}
.option-card:hover { background: var(--cream); }
.option-card.selected { border-color: var(--ink); background: var(--bg-card); box-shadow: 0 0 0 2px var(--ink) inset; }
.option-card .leading { width: 40px; height: 40px; border-radius: 50%; background: var(--blush-soft); display: grid; place-items: center; font-size: 12px; color: var(--ink); font-weight: 500; flex-shrink: 0; }
.option-card .body { flex: 1; min-width: 0; }
.option-card .body h4 { margin: 0; font-size: 14px; color: var(--fg-1); font-weight: 500; }
.option-card .body p { margin: 2px 0 0; font-size: 12px; color: var(--fg-3); }
.option-card .trail { font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; }

.cal-mini {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin: 8px 0 16px;
}
.cal-mini .day-h {
  text-align: center; font-size: 10px; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--fg-3); padding: 4px 0;
}
.cal-mini .day {
  appearance: none; border: 0; background: transparent;
  aspect-ratio: 1; border-radius: 50%;
  font: 500 13px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1); cursor: pointer;
  display: grid; place-items: center;
  position: relative;
  transition: background var(--dur-fast);
}
.cal-mini .day:hover { background: var(--cream); }
.cal-mini .day.muted { color: var(--fg-3); opacity: 0.5; }
.cal-mini .day.selected { background: var(--ink); color: var(--bone); }
.cal-mini .day.has-slots::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--blush-deep);
}
.cal-mini .day.selected.has-slots::after { background: var(--blush); }
.cal-mini .day.disabled { color: var(--fg-3); opacity: 0.3; cursor: default; }

.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot {
  appearance: none;
  padding: 12px 6px; border: 1px solid var(--line);
  background: var(--bg-card); border-radius: var(--radius-md);
  font: 500 13px/1 var(--font-body); font-variant-numeric: tabular-nums;
  color: var(--fg-1); cursor: pointer;
  transition: all var(--dur-fast);
}
.slot:hover { background: var(--cream); }
.slot.selected { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* Stripe-ish checkout */
.stripe-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.stripe-row {
  display: flex; gap: 8px;
}
.stripe-input {
  flex: 1; padding: 14px 12px;
  border: 1px solid var(--line);
  background: var(--bone); border-radius: var(--radius-sm);
  font: 400 16px/1 var(--font-body); color: var(--fg-1);  /* 16px to stop iOS auto-zoom on focus */
  font-variant-numeric: tabular-nums;
}
.stripe-input::placeholder { color: var(--fg-3); }
.stripe-summary {
  background: var(--cream); border-radius: var(--radius-md);
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
}
.stripe-summary .line { display: flex; justify-content: space-between; font-size: 13px; }
.stripe-summary .line.tot { font-weight: 600; font-size: 16px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--fg-1); }

/* Stripe-grade checkout (CustPay) ───────────────────────────── */
.stripe-express {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; border-radius: 8px;
  font: 600 15px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em; padding: 0 16px;
  border: 1px solid #000;
  background: #000; color: #fff;
  transition: opacity var(--dur-fast);
}
.stripe-express:hover { opacity: 0.85; }
.stripe-express:active { transform: scale(0.99); }
[data-theme="dark"] .stripe-express { background: #fff; color: #000; border-color: #fff; }

.stripe-or {
  text-align: center;
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #6B7280;
  margin: 16px 0 12px;
  position: relative;
}
.stripe-or::before, .stripe-or::after {
  content: ""; position: absolute; top: 50%; width: calc(50% - 80px);
  height: 1px; background: #E5E7EB;
}
.stripe-or::before { left: 0; }
.stripe-or::after { right: 0; }
[data-theme="dark"] .stripe-or { color: #9CA3AF; }
[data-theme="dark"] .stripe-or::before, [data-theme="dark"] .stripe-or::after { background: #2A2622; }

.stripe-field-group { margin-bottom: 12px; }
.stripe-flabel {
  display: block; font: 500 13px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  color: #30313D; margin-bottom: 6px; letter-spacing: -0.01em;
}
[data-theme="dark"] .stripe-flabel { color: #E4E4E7; }

.stripe-field-stack {
  border: 1px solid #E0E6EB;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(48,49,61,0.05);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.stripe-field-stack:focus-within {
  border-color: #635BFF;
  box-shadow: 0 0 0 3px rgba(99,91,255,0.15);
}
[data-theme="dark"] .stripe-field-stack {
  background: #1F1B17; border-color: #363C35;
}

.stripe-fwrap {
  position: relative; display: flex;
  border-bottom: 1px solid #E0E6EB;
}
[data-theme="dark"] .stripe-fwrap { border-bottom-color: #363C35; }

.stripe-finput {
  flex: 1; appearance: none; border: 0; background: transparent;
  padding: 12px 14px; font: 400 16px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #30313D; outline: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.stripe-finput::placeholder { color: #6B7280; }
[data-theme="dark"] .stripe-finput { color: #EDF1EA; }
[data-theme="dark"] .stripe-finput::placeholder { color: #807871; }

.stripe-field-stack .stripe-bot-l { border-right: 1px solid #E0E6EB; }
[data-theme="dark"] .stripe-field-stack .stripe-bot-l { border-right-color: #363C35; }

.stripe-brands {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 4px; pointer-events: none;
}

.stripe-spinner {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: #635BFF;
  animation: stripe-spin 0.8s linear infinite;
}
@keyframes stripe-spin { to { transform: rotate(360deg); } }

/* Confirmation */
.confirm-mark {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--blush-soft);
  margin: 24px auto 16px;
  display: grid; place-items: center;
  color: var(--blush-deep);
}

/* Account */
.list-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.list-row:last-child { border-bottom: 0; }
.list-row .icon { width: 36px; height: 36px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; flex-shrink: 0; color: var(--fg-2); }
.list-row .body { flex: 1; }
.list-row .body h4 { margin: 0; font-size: 14px; font-weight: 500; color: var(--fg-1); }
.list-row .body p { margin: 2px 0 0; font-size: 12px; color: var(--fg-3); }
.list-row .chev { color: var(--fg-3); }

/* ===========================================================
   OWNER — desktop dashboard
   =========================================================== */
.owner-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--bg);
  padding-top: 56px;
}

.owner-shell.compact .panel { padding: 16px; }
.owner-shell.compact .stat-row { gap: 8px; }
.owner-shell.compact .stat { padding: 12px; }
.owner-shell.compact .stat .val { font-size: 24px; }
.owner-shell.compact .cl-main { padding: 20px 28px 60px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.kpi {
  padding: 20px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.kpi .lbl { font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); }
.kpi .val {
  font-family: var(--font-display); font-weight: 300; font-size: 38px;
  line-height: 1; color: var(--fg-1); margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.kpi .delta {
  font-size: 11px; margin-top: 8px; display: inline-flex; gap: 6px; align-items: center;
}
.kpi .delta.up { color: var(--success); }
.kpi .delta.down { color: var(--alert); }

/* Sparkline */
.spark { width: 100%; height: 32px; margin-top: 12px; display: block; }

/* Big revenue chart */
.bar-chart {
  display: flex; align-items: flex-end; gap: 12px; height: 220px;
  padding: 16px 0 4px;
  border-bottom: 1px solid var(--line);
}
.bar-chart .bar {
  flex: 1; height: 100%; display: flex; flex-direction: column-reverse; gap: 4px;
  position: relative; justify-content: flex-start;
}
.bar-chart .bar .b1, .bar-chart .bar .b2 {
  display: block; border-radius: 2px;
  transition: height var(--dur-base) var(--ease-out);
}
.bar-chart .bar .b1 { background: var(--ink); }
.bar-chart .bar .b2 { background: var(--blush); }
.bar-chart .bar .lbl { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: 10px; color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

.legend { display: flex; gap: 16px; margin-top: 28px; font-size: 11px; color: var(--fg-3); }
.legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* Utilisation grid (heat) */
.util-grid {
  display: grid; grid-template-columns: 80px repeat(8, 1fr); gap: 4px;
}
.util-grid .h, .util-grid .row-lbl {
  font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3);
  padding: 6px 4px;
}
.util-grid .h { text-align: center; }
.util-grid .row-lbl { display: flex; align-items: center; }
.util-grid .cell {
  aspect-ratio: 1.6/1;
  border-radius: 3px;
  background: var(--cream);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 10px; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Month grid (owner calendar → Month) */
.month-grid-wrap { display: flex; flex-direction: column; gap: 6px; }
.month-headers {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  padding: 0 2px;
}
.month-header {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
  padding: 6px 0;
}
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(72px, 1fr);
  gap: 4px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.month-cell {
  appearance: none; cursor: pointer;
  background: var(--bg-card);
  border: 0;
  padding: 8px 8px 6px;
  text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  min-height: 0;
  transition: background var(--dur-fast);
  font-family: var(--font-body);
}
@media (hover: hover) {
  .month-cell:hover { background: var(--cream); }
}
.month-cell.out { background: var(--bg); cursor: default; }
.month-cell.out .mc-num { color: var(--fg-3); opacity: 0.45; }
.month-cell.past { opacity: 0.7; }
.month-cell.today {
  background: var(--blush-soft);
}
.month-cell.today .mc-num {
  background: var(--ink); color: var(--bone);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.month-cell .mc-num {
  font: 500 13px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.month-cell .mc-count {
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.04em;
  color: var(--fg-3);
  margin-top: auto;
}
.month-cell .mc-dots {
  display: flex; gap: 3px; align-items: center;
}
.month-cell .mc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blush-deep);
  flex-shrink: 0;
}
.month-cell .mc-dot.warn { background: var(--alert); }
.month-cell .mc-more {
  font-size: 9px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .month-grid { grid-auto-rows: minmax(56px, 1fr); }
  .month-cell { padding: 4px 4px; gap: 2px; }
  .month-cell .mc-num { font-size: 11px; }
  .month-cell .mc-count { font-size: 9px; letter-spacing: 0; }
  .month-cell .mc-dot { width: 4px; height: 4px; }
  .month-cell.today .mc-num { width: 18px; height: 18px; font-size: 10px; }
  .month-header { font-size: 9px; padding: 4px 0; }
}

/* Calendar week (owner) */
.cal-week {
  display: grid; grid-template-columns: 60px repeat(6, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-md); overflow: hidden;
}
.cal-week .col-head, .cal-week .col-cell, .cal-week .row-time {
  background: var(--bg-card);
  padding: 6px 8px; min-height: 38px; font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2); position: relative;
}
.cal-week .col-head {
  font: 500 11px/1.2 var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-3); padding: 12px 8px; text-align: center;
}
.cal-week .row-time { color: var(--fg-3); font-weight: 500; padding-top: 8px; }
.cal-week .col-cell { min-height: 50px; }
.cal-block {
  position: absolute; left: 4px; right: 4px; top: 4px;
  border-radius: 4px;
  padding: 4px 6px;
  font: 500 10px/1.25 var(--font-body);
  letter-spacing: 0.01em;
  background: var(--blush-soft); color: var(--ink);
  border-left: 2px solid var(--blush-deep);
  overflow: hidden;
}
.cal-block.ink { background: rgba(26,26,26,0.06); border-left-color: var(--ink); }
.cal-block.warn { background: rgba(166,69,62,0.1); border-left-color: var(--alert); color: var(--alert); }
.cal-block.ghost { background: rgba(140,133,127,0.1); border-left-color: var(--mushroom); color: var(--fg-3); }
.cal-block .who { font-weight: 500; }
.cal-block .what { font-weight: 400; opacity: 0.75; font-size: 10px; }

/* Customer table */
/* Wrap tables in this on mobile so they scroll horizontally inside their
   container instead of forcing the whole page wider than the viewport. */
.tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
  text-align: left; font: 500 10px/1 var(--font-body);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.tbl tbody td { padding: 14px 12px; border-bottom: 1px solid var(--line); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.tbl tbody tr:hover td { background: var(--cream); cursor: pointer; }

.cell-cust { display: flex; align-items: center; gap: 10px; }
.cell-cust b { font-weight: 500; }

/* Compact mode tweaks */
.owner-shell.compact .kpi-grid { gap: 8px; }
.owner-shell.compact .kpi { padding: 14px; }
.owner-shell.compact .kpi .val { font-size: 28px; }
.owner-shell.compact .tbl tbody td { padding: 8px 12px; }
.owner-shell.compact .cl-head h1 { font-size: 32px; }
.owner-shell.compact .cl-head { margin-bottom: 20px; }

/* Misc */
.empty {
  text-align: center; padding: 48px 24px;
  color: var(--fg-3); font-size: 13px;
}
.empty svg { color: var(--mushroom); margin-bottom: 12px; }

/* ============================================================
   Diary calendar view — clinician + owner today (§1)
   Per-clinician columns, hour rows, drag-drop blocks
   ============================================================ */
.diary-wrap { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.diary-grid {
  display: grid;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.diary-corner { background: var(--bg-card); border-bottom: 1px solid var(--line); }
.diary-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--bg-card);
}
.diary-head .who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.diary-head .who b { font: 500 13px/1 var(--font-body); color: var(--fg-1); }
.diary-head .who span { font: 400 10px/1 var(--font-body); letter-spacing: 0.05em; color: var(--fg-3); text-transform: uppercase; }

.diary-times { position: relative; border-right: 1px solid var(--line); }
.diary-hour {
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 4px 8px 0 0;
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.06em;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line);
}

.diary-col {
  position: relative;
  border-left: 1px solid var(--line);
  background: var(--bg-card);
  user-select: none;
}
.diary-row-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); pointer-events: none; }
.diary-row-half { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(140,133,127,0.18); pointer-events: none; }
.diary-shade {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(135deg,
    rgba(140,133,127,0.04) 0, rgba(140,133,127,0.04) 8px,
    rgba(140,133,127,0.10) 8px, rgba(140,133,127,0.10) 16px);
  pointer-events: none;
}
.diary-leave {
  position: absolute; left: 0; right: 0;
  background: rgba(94,122,92,0.08);
  border-left: 2px solid var(--success);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--fg-2);
  font: 500 13px/1.3 var(--font-body);
}
.diary-leave svg { color: var(--success); }
.diary-leave .meta { font-size: 11px; color: var(--fg-3); font-weight: 400; }

.diary-block {
  position: absolute; left: 4px; right: 4px;
  background: var(--blush-soft);
  border-left: 3px solid var(--blush-deep);
  border-radius: 4px;
  padding: 4px 8px;                          /* tighter so all 3 rows fit in a 45–60 min block */
  cursor: grab;
  overflow: hidden;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
  display: flex; flex-direction: column;     /* honour vertical gaps without margin collapse */
  gap: 1px;
  touch-action: none;                        /* let pointer drag fire on touch instead of scrolling */
  user-select: none; -webkit-user-select: none;
}
.diary-block:hover { box-shadow: var(--shadow-2); }
.diary-block:active { cursor: grabbing; }
.diary-block.dragging { z-index: 10; box-shadow: var(--shadow-3); opacity: 0.92; }
.diary-block.pending { background: rgba(166,69,62,0.08); border-left-color: var(--alert); }
.diary-block .db-time {
  font: 500 10px/1.1 var(--font-body); color: var(--fg-1);
  display: inline-flex; gap: 6px; align-items: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.diary-block .db-time span { color: var(--fg-3); }
.diary-block .db-who {
  font: 500 11px/1.15 var(--font-body); color: var(--fg-1);
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.diary-block .db-who .db-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.diary-block .db-who .db-dot.warn { background: var(--alert); }
.diary-block .db-who .db-dot.blush { background: var(--blush-deep); }
.diary-block .db-what {
  font: 400 10px/1.2 var(--font-body); color: var(--fg-2); opacity: 0.9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.diary-block .db-note { color: var(--fg-3); }

/* Hover preview card next to a diary block */
.diary-hover {
  position: fixed;
  z-index: 80;
  width: 300px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  padding: 12px 14px;
  pointer-events: none;
  font: 400 13px/1.45 var(--font-body);
}
.diary-hover .dh-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px;
}
.diary-hover .dh-head b { font: 500 14px/1.2 var(--font-body); color: var(--fg-1); display: block; }
.diary-hover .dh-head span { font-size: 11px; color: var(--fg-3); }
.diary-hover .dh-alert {
  background: var(--blush-soft); border-radius: 4px;
  padding: 8px 10px; margin-bottom: 10px;
  font-size: 12px; color: var(--ink);
  display: flex; gap: 6px; align-items: center;
}
.diary-hover .dh-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.diary-hover .dh-note .dh-note-when { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.diary-hover .dh-note .dh-note-title { font-weight: 500; color: var(--fg-1); margin-top: 2px; }
.diary-hover .dh-note .dh-note-body { font-size: 12px; color: var(--fg-2); margin-top: 4px; }
.diary-hover .dh-empty { color: var(--fg-3); font-size: 12px; font-style: italic; }
.diary-hover .dh-foot { margin-top: 10px; font-size: 11px; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; }

/* Diary controls (view toggle) */
.view-toggle { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.view-toggle button {
  appearance: none; border: 0; background: var(--bg-card);
  font: 500 11px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px; cursor: pointer; color: var(--fg-2);
  display: inline-flex; gap: 6px; align-items: center;
}
.view-toggle button.active { background: var(--ink); color: var(--bone); }
.view-toggle button + button { border-left: 1px solid var(--line); }

/* ============================================================
   Amend / move modals (§1.3, §1.4, §11)
   ============================================================ */
.amend-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--cream); border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.amend-row .who, .amend-row > div { display: flex; flex-direction: column; gap: 2px; }

.amend-toggle {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  margin-top: 8px; cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.amend-toggle:hover { background: var(--cream); }
.amend-toggle input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; }
.amend-toggle div b { font: 500 13px/1.3 var(--font-body); color: var(--fg-1); display: block; }
.amend-toggle div span { font-size: 12px; color: var(--fg-3); margin-top: 2px; display: block; }

.amend-alert {
  display: flex; align-items: center; gap: 8px;
  background: var(--blush-soft);
  padding: 10px 12px; border-radius: var(--radius-md);
  font-size: 12px; color: var(--ink);
  margin-bottom: 12px;
}

.move-compare {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: center;
  margin: 12px 0 16px;
}
.move-side {
  background: var(--cream); padding: 16px;
  border-radius: var(--radius-md); text-align: center;
}
.move-side.new { background: var(--blush-soft); }
.move-side .lbl { font: 500 10px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.move-side .big {
  font-family: var(--font-display); font-weight: 300;
  font-size: 32px; line-height: 1;
  color: var(--fg-1); margin: 8px 0 4px;
  font-variant-numeric: tabular-nums;
}
.move-side .sub { font-size: 11px; color: var(--fg-3); }
.move-compare > svg { color: var(--fg-3); }

/* ============================================================
   Cash-up modal (§9)
   ============================================================ */
.cashup-tot {
  font-family: var(--font-display); font-weight: 300; font-size: 22px;
  color: var(--fg-1); font-variant-numeric: tabular-nums;
}
.cashup-summary {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 12px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.cashup-summary .line {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.cashup-summary .line.muted { color: var(--fg-3); font-size: 12px; }
.cashup-summary .line.tot {
  border-top: 1px solid var(--line); padding-top: 8px;
  font-weight: 600; font-size: 15px;
}
.cashup-summary .line.tot.warn { color: var(--alert); }
.cashup-summary .line.tot.change { color: var(--success); }

/* ============================================================
   Medical form viewer (§4)
   ============================================================ */
.form-answers {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; max-height: 380px; overflow-y: auto;
}
.form-qa {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.form-qa:last-child { border-bottom: 0; }
.form-qa:nth-child(odd) { background: rgba(234, 202, 191, 0.06); }
.form-qa .q { font-size: 12px; color: var(--fg-3); line-height: 1.4; }
.form-qa .a { font-size: 13px; color: var(--fg-1); font-weight: 500; line-height: 1.4; }

.form-sig {
  margin-top: 16px;
  padding: 16px; background: var(--cream); border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 16px;
}
.form-sig .sig-mark {
  width: 140px; height: 50px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 10px;
}
.form-sig .sig-meta .sig-name {
  font-family: var(--font-display); font-weight: 400; font-size: 18px;
  color: var(--fg-1);
}
.form-sig .sig-meta .sig-when { font-size: 11px; color: var(--fg-3); margin-top: 2px; letter-spacing: 0.04em; }

/* ============================================================
   Bulk upload (§6)
   ============================================================ */
.drop-zone {
  margin-top: 12px;
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--cream);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.drop-zone.active { border-color: var(--blush-deep); background: var(--blush-soft); }
.drop-zone svg { color: var(--mushroom); }
.drop-zone .dz-title { font: 500 14px/1.2 var(--font-body); color: var(--fg-1); }
.drop-zone .dz-sub { font-size: 11px; color: var(--fg-3); letter-spacing: 0.06em; }
.drop-zone .dz-meta { font-size: 11px; color: var(--fg-3); margin-top: 6px; }

.upload-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  max-height: 280px; overflow-y: auto;
  padding: 4px 2px;
}
.upload-thumb {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 3/4;
  background: var(--cream);
  display: flex; flex-direction: column;
}
.upload-thumb img { flex: 1; object-fit: cover; min-height: 0; width: 100%; }
.upload-thumb select {
  appearance: none;
  border: 0; border-top: 1px solid var(--line);
  background: var(--bg-card); color: var(--fg-1);
  font: 500 10px/1 var(--font-body); letter-spacing: 0.04em;
  padding: 5px 8px; outline: none;
  width: 100%;
}
.upload-thumb .upload-remove {
  position: absolute; top: 4px; right: 4px;
  appearance: none; border: 0; cursor: pointer;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(26,26,26,0.65); color: #fff;
  display: grid; place-items: center;
}

/* ============================================================
   Pending bookings (§2 + §12)
   ============================================================ */
.pending-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1.6fr auto;
  gap: 16px; align-items: center;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
}
.pending-row:hover { background: var(--cream); }
.pending-row .pr-when { display: flex; align-items: center; gap: 10px; }
.pending-row .pr-when b { font: 500 14px/1.2 var(--font-body); color: var(--fg-1); display: block; }
.pending-row .pr-when span { font-size: 11px; color: var(--fg-3); display: block; margin-top: 2px; }
.pending-row .pr-meta .pr-treat { font: 500 13px/1.3 var(--font-body); color: var(--fg-1); }
.pending-row .pr-meta .pr-with { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.pending-row .pr-form {
  display: flex; flex-direction: column; gap: 4px;
}
.pending-row .pr-form .app-btn { width: fit-content; padding: 4px 8px; }
.pending-row .pr-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 1100px) {
  .pending-row { grid-template-columns: 1fr 1fr; row-gap: 8px; padding: 14px 20px; }
  .pending-row .pr-actions { grid-column: 1/-1; justify-content: flex-start; }
}

/* Waitlist */
.waitlist-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.waitlist-row:last-of-type { border-bottom: 0; }
.waitlist-row .wl-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.waitlist-row .wl-body b { font: 500 13px/1.2 var(--font-body); color: var(--fg-1); }
.waitlist-row .wl-body span { font-size: 12px; color: var(--fg-3); }
.waitlist-row .wl-meta { font-size: 11px; color: var(--fg-3); }

/* ============================================================
   Customer list — alphabetical w/ phone+email under name (§3)
   ============================================================ */
.cust-list-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 16px; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.cust-list-row:hover { background: var(--cream); }
.cust-list-row .cl-body b { font: 500 14px/1.2 var(--font-body); color: var(--fg-1); display: block; }
.cust-list-row .cl-body .cl-contact {
  display: flex; gap: 14px; margin-top: 4px;
  font-size: 12px; color: var(--fg-3);
  flex-wrap: wrap;
}
.cust-list-row .cl-body .cl-contact span { display: inline-flex; gap: 4px; align-items: center; }
.cust-list-row .cl-flag { display: flex; gap: 6px; }
.cust-list-row .cl-warn { color: var(--alert); }
.cust-list-row .cl-warn svg { color: var(--alert); }
.cust-list-row .cl-meta { font-size: 12px; color: var(--fg-3); white-space: nowrap; }

.cust-letter-head {
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 16px 16px 6px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  /* sticky removed — was overlapping the first row beneath it (Lucy Bennett
     looked faded). Letter heads are short, no need for sticky. */
}

.cust-search-bar {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.cust-search-bar input {
  flex: 1; border: 0; background: transparent;
  outline: none; font: inherit; color: var(--fg-1);
  font-size: 16px;                                       /* 16px to stop iOS auto-zoom */
}
.cust-search-bar svg { color: var(--fg-3); }
.cust-filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cust-filter-row button {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-card); color: var(--fg-2);
  font: 500 11px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--radius-pill);
  transition: all var(--dur-fast);
}
.cust-filter-row button:hover { color: var(--fg-1); }
.cust-filter-row button.active { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* Customer typeahead inside booking modal */
.cust-typeahead {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 4px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  max-height: 280px; overflow-y: auto;
  z-index: 50;
}
.cust-ta-row {
  appearance: none; border: 0; background: transparent;
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px;
  cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast);
}
.cust-ta-row:last-child { border-bottom: 0; }
.cust-ta-row:hover { background: var(--cream); }
.cust-ta-row .cust-ta-body { flex: 1; min-width: 0; }
.cust-ta-row .cust-ta-body b { display: block; font: 500 13px/1.2 var(--font-body); color: var(--fg-1); }
.cust-ta-row .cust-ta-body span { display: block; font-size: 11px; color: var(--fg-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-ta-empty {
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--fg-3);
  flex-wrap: wrap;
}
.cust-ta-empty span { flex: 1; min-width: 0; }

/* ============================================================
   Communications (§7) — SendMessageModal + CommHistory
   ============================================================ */
.comm-channel {
  display: inline-flex; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 2px; background: var(--cream);
  margin-bottom: 4px;
}
.comm-channel button {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  font: 500 12px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3); padding: 8px 16px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.comm-channel button.active { background: var(--ink); color: var(--bone); }

.comm-foot {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg-3);
  margin-top: -4px; margin-bottom: 4px;
}

/* Dictation mode in NewNoteModal — record from inside the app, structured by AI */
.dictate-mode-pill {
  display: inline-flex; padding: 3px;
  background: var(--cream); border-radius: 999px;
  gap: 2px;
  margin-bottom: 18px;
}
.dictate-mode-pill button {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  font: 500 12px/1 var(--font-body); color: var(--fg-3);
  padding: 8px 16px; border-radius: 999px;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 6px;
}
.dictate-mode-pill button.active {
  background: var(--bone); color: var(--fg-1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.dictate-stage {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 16px 16px;
  gap: 14px;
}
.dictate-orb {
  appearance: none; cursor: pointer; border: 0;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--blush-deep); color: white;
  display: grid; place-items: center;
  font-size: 36px; line-height: 1;
  box-shadow: 0 4px 16px rgba(195,114,98,0.35);
  transition: transform var(--dur-fast);
}
.dictate-orb:hover { transform: scale(1.04); }
.dictate-orb.recording {
  background: #C0392B;
  animation: dictate-pulse 1.4s ease-in-out infinite;
}
.dictate-orb.processing {
  background: var(--cream); color: var(--blush-deep);
  cursor: default; animation: dictate-spin 1.4s linear infinite;
}
.dictate-orb.error {
  background: rgba(166,69,62,0.12); color: var(--alert);
  cursor: default; box-shadow: none;
}
.dictate-orb-glyph { font-size: 30px; line-height: 1; }
@keyframes dictate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.45); }
  50%      { box-shadow: 0 0 0 18px rgba(192,57,43,0); }
}
@keyframes dictate-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.dictate-timer {
  font: 500 22px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1); letter-spacing: 0.04em;
}
.dictate-bars {
  display: inline-flex; align-items: flex-end; gap: 3px;
  height: 22px;
}
.dictate-bar {
  display: inline-block;
  width: 3px; background: var(--blush-deep);
  border-radius: 2px;
  animation: dictate-wave 1s ease-in-out infinite;
}
@keyframes dictate-wave {
  0%, 100% { height: 6px; }
  50%      { height: 22px; }
}
.dictate-hint {
  font-size: 13px; color: var(--fg-1); text-align: center;
  font-weight: 500; max-width: 320px; line-height: 1.45;
}
.dictate-tip {
  font-size: 12px; color: var(--fg-3); text-align: center;
  max-width: 360px; line-height: 1.55;
}
.dictate-foot {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: 16px; padding: 10px 12px;
  background: var(--cream); border-radius: 4px;
  font-size: 11px; color: var(--fg-3); line-height: 1.45;
  max-width: 440px;
}

/* Signature pad — on-screen signing for medical forms (Q11) */
.signature-pad {
  margin-top: 16px; padding: 14px;
  background: var(--cream); border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.signature-pad canvas {
  width: 100%; height: 160px;
  background: var(--bg-card); border-radius: var(--radius-sm);
  border: 1px dashed var(--line);
  display: block;
  touch-action: none; /* stop iOS scrolling while signing */
  cursor: crosshair;
}
.signature-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.signature-hint { font-size: 11px; color: var(--fg-3); }
.signature-actions { display: flex; gap: 6px; }

/* Trello-style tasks board (Q31) */
.tasks-board {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 10px; margin-top: 12px;
}
@media (max-width: 1100px) { .tasks-board { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .tasks-board { grid-template-columns: 1fr; } }
.tasks-col {
  background: var(--cream); border-radius: var(--radius-md);
  padding: 10px; min-height: 200px;
  display: flex; flex-direction: column; gap: 8px;
  border: 2px solid transparent;
  transition: border-color var(--dur-fast);
}
.tasks-col.drag-over { border-color: var(--blush-deep); background: var(--blush-soft); }
.tasks-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 8px; border-bottom: 1px solid var(--line);
}
.tasks-col-name { display: flex; flex-direction: column; min-width: 0; }
.tasks-col-name b { font-size: 13px; color: var(--fg-1); }
.tasks-col-name span { font-size: 10px; color: var(--fg-3); letter-spacing: 0.04em; text-transform: uppercase; }
.tasks-col-body { display: flex; flex-direction: column; gap: 6px; }
.tasks-col-empty {
  font-size: 11px; color: var(--fg-3); font-style: italic;
  padding: 14px 8px; text-align: center;
}
.tasks-card {
  background: var(--bg-card); border-radius: var(--radius-sm);
  padding: 10px 12px; border: 1px solid var(--line);
  cursor: grab; transition: box-shadow var(--dur-fast), opacity var(--dur-fast);
  display: flex; flex-direction: column; gap: 6px;
}
.tasks-card:active { cursor: grabbing; }
.tasks-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.tasks-card.done { opacity: 0.55; }
.tasks-card.done .tasks-card-title { text-decoration: line-through; color: var(--fg-3); }
.tasks-card.high { border-left: 3px solid var(--alert); }
.tasks-card-head {
  display: flex; align-items: flex-start; gap: 6px;
}
.task-check.sm {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
}
.tasks-card-title {
  font-size: 12px; color: var(--fg-1); flex: 1; line-height: 1.35;
}
.tasks-card-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; color: var(--fg-3);
  padding-left: 22px;
}
.tasks-card-link {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 11px/1 var(--font-body);
  color: var(--blush-deep); padding: 0 0 0 22px;
  text-align: left;
}
.tasks-card-link:hover { text-decoration: underline; }

/* Enquiries inbox + Lead detail (Tier 2) */
.enq-filter-row {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.enq-filter {
  appearance: none; cursor: pointer; border: 1px solid var(--line);
  background: transparent; color: var(--fg-2);
  padding: 8px 14px; border-radius: var(--radius-md);
  font: 500 12px/1 var(--font-body); letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 8px;
}
.enq-filter.active { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.enq-filter-count {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: var(--cream); color: var(--fg-2);
}
.enq-filter.active .enq-filter-count { background: var(--blush-deep); color: white; }

.enq-row {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  width: 100%; text-align: left;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 16px 22px; border-bottom: 1px solid var(--line);
  color: inherit; font: inherit;
}
.enq-row:last-child { border-bottom: 0; }
@media (hover: hover) {
  .enq-row:hover { background: var(--cream); }
}
.enq-row-left { display: flex; align-items: center; }
.enq-row-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.enq-row-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.enq-row-head b { font-size: 14px; color: var(--fg-1); font-weight: 500; }
.enq-row-meta { font-size: 11px; color: var(--fg-3); letter-spacing: 0.04em; }
.enq-row-concern { font-size: 13px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enq-row-bottom { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--fg-3); flex-wrap: wrap; }
.enq-row-when { white-space: nowrap; }
.enq-row-assigned { white-space: nowrap; }

/* Advice 8-touch timeline (inside Lead detail panel) */
.advice-timeline {
  display: flex; flex-direction: column; gap: 0;
  padding: 8px 0 4px;
}
.advice-step {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 10px; padding: 8px 0;
  position: relative;
}
.advice-step::before {
  content: ''; position: absolute;
  left: 13px; top: 24px; bottom: -8px;
  width: 2px; background: var(--line);
}
.advice-step:last-child::before { display: none; }
.advice-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bone); border: 2px solid var(--line);
  align-self: center; justify-self: center;
  margin-top: 2px; z-index: 1;
}
.advice-step.sent .advice-dot   { background: var(--blush-soft); border-color: var(--blush-deep); }
.advice-step.opened .advice-dot { background: var(--blush-deep); border-color: var(--blush-deep); }
.advice-body { display: flex; flex-direction: column; gap: 2px; }
.advice-day  { font-size: 13px; color: var(--fg-1); font-weight: 500; }
.advice-status { font-size: 11px; color: var(--fg-3); }
.advice-when { font-size: 11px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.advice-step.pending .advice-day { color: var(--fg-3); }
.advice-foot {
  display: flex; gap: 8px; margin-top: 10px;
  padding-top: 12px; border-top: 1px solid var(--line);
}

/* Activity history list inside Lead detail */
.history-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.history-item {
  display: grid; grid-template-columns: 120px 100px 1fr;
  gap: 10px; align-items: start;
  font-size: 12px; color: var(--fg-2);
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.history-item:last-child { border-bottom: 0; }
.history-when { font-variant-numeric: tabular-nums; color: var(--fg-3); white-space: nowrap; }
.history-kind { white-space: nowrap; }
.history-note { color: var(--fg-1); line-height: 1.5; }
@media (max-width: 720px) {
  .history-item { grid-template-columns: 1fr; gap: 2px; }
}

/* Notes — edit-window UI (Q14) */
.note-edit-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
}
.note-edit-history {
  margin-top: 10px; font-size: 11px; color: var(--fg-3);
}
.note-edit-history summary {
  cursor: pointer; padding: 4px 0;
  list-style: none;
}
.note-edit-history summary::-webkit-details-marker { display: none; }
.note-edit-history summary::before {
  content: '▸'; display: inline-block;
  margin-right: 6px; transition: transform var(--dur-fast);
}
.note-edit-history[open] summary::before { transform: rotate(90deg); }
.note-edit-history ul {
  list-style: none; padding: 6px 0 0 14px; margin: 0;
  border-left: 2px solid var(--line);
}
.note-edit-history li { padding: 3px 0; }
.note-edit-history .when { color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* From-name toggle (Team / clinician) inside SendMessageModal */
.from-toggle {
  display: inline-flex; padding: 3px;
  background: var(--cream); border-radius: var(--radius-md);
  gap: 2px; flex-wrap: wrap;
}
.from-toggle button {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  font: 500 12px/1 var(--font-body); color: var(--fg-3);
  padding: 8px 14px; border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}
.from-toggle button.active {
  background: var(--bone); color: var(--fg-1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Attach form templates panel inside SendMessageModal */
.form-attach {
  margin-top: -4px; margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--cream); border-radius: var(--radius-md);
  border: 1px solid var(--line);
}
.form-attach-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 8px;
}
.form-attach-list { display: flex; flex-direction: column; gap: 4px; }
.form-attach-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--fg-1); cursor: pointer; user-select: none;
  padding: 4px 0;
}
.form-attach-item input { accent-color: var(--blush-deep); }
.form-attach-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; border-radius: 999px;
  background: var(--bone); border: 1px solid var(--line);
  font-size: 11px; color: var(--fg-1);
}
.attach-chip svg { color: var(--blush-deep); }
.attach-chip button {
  appearance: none; cursor: pointer; border: 0; background: transparent;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--fg-3);
}
.attach-chip button:hover { background: var(--cream); color: var(--fg-1); }

/* Owner settings modal — sidebar + content layout
   ============================================================ */
.settings-modal { overflow: hidden; }
.settings-head {
  padding: 24px 32px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: flex-start;
}
.settings-grid {
  display: grid; grid-template-columns: 180px 1fr; min-height: 420px;
}
.settings-sidebar {
  padding: 16px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.settings-tab {
  appearance: none; border: 0; cursor: pointer;
  text-align: left; padding: 10px 12px; border-radius: var(--radius-md);
  font: 500 13px/1 var(--font-body);
  background: transparent; color: var(--fg-2);
  white-space: nowrap;
}
.settings-tab.active { background: var(--ink); color: var(--bone); }
.settings-content { padding: 32px; overflow-y: auto; max-height: 540px; }
.settings-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-foot {
  padding: 16px 32px; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 8px;
}

/* Phone: stack the sidebar above the content as a horizontally-scrolling
   tab strip; pull padding in so form fields actually fit. */
@media (max-width: 720px) {
  .settings-head { padding: 18px 18px; }
  .settings-head h2 { font-size: 22px !important; }
  .settings-grid { grid-template-columns: 1fr; min-height: 0; }
  .settings-sidebar {
    flex-direction: row; gap: 4px;
    padding: 10px 12px;
    border-right: 0; border-bottom: 1px solid var(--line);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .settings-sidebar::-webkit-scrollbar { display: none; }
  .settings-tab { flex: 0 0 auto; padding: 8px 12px; font-size: 12px; }
  .settings-content { padding: 18px; max-height: 60vh; }
  .settings-row-2 { grid-template-columns: 1fr; }
  .settings-foot { padding: 14px 18px; }
}

.comm-thread { display: flex; flex-direction: column; gap: 16px; }
.comm-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--cream); border-radius: var(--radius-md);
}
.comm-head .meta { font-size: 11px; color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; }
.comm-head .contacts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--fg-1); }
.comm-head .contacts span { display: inline-flex; align-items: center; gap: 6px; }
.comm-head .comm-actions { display: flex; gap: 6px; flex-shrink: 0; }

.comm-list { display: flex; flex-direction: column; gap: 12px; }
.comm-msg {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 16px;
  background: var(--bg-card);
}
.comm-msg.in {
  background: var(--blush-soft);
  border-color: transparent;
  margin-right: 32px;
}
.comm-msg.out { margin-left: 32px; }
.comm-msg .comm-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  font-size: 11px; color: var(--fg-3);
  flex-wrap: wrap;
}
.comm-msg .comm-meta .comm-who { font-weight: 600; color: var(--fg-1); font-size: 12px; }
.comm-msg .comm-meta .comm-channel-tag {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--bg); border-radius: 999px; padding: 2px 8px; color: var(--fg-2);
}
.comm-msg .comm-meta .comm-when { margin-left: auto; }
.comm-msg .comm-subj { font-weight: 500; color: var(--fg-1); margin-bottom: 6px; }
.comm-msg .comm-body { font-size: 13px; color: var(--fg-2); white-space: pre-wrap; line-height: 1.5; }
.comm-msg .comm-reply-row { margin-top: 10px; display: flex; gap: 6px; }

@media (max-width: 720px) {
  .comm-msg.in, .comm-msg.out { margin-left: 0; margin-right: 0; }
}

/* Tab badge (e.g. unread count on Messages tab) */
.tab-badge {
  margin-left: 6px;
  background: var(--blush-deep); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 999px;
  letter-spacing: 0;
}

/* ============================================================
   Tasks / daily running list (§14)
   ============================================================ */
.tasks-panel { padding: 20px 24px; }
/* Allow the Tasks panel-head to wrap so the controls don't squish the title */
.tasks-panel .panel-head { flex-wrap: wrap; gap: 8px; row-gap: 12px; }
.tasks-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.seg-toggle {
  display: inline-flex; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; background: var(--bg-card);
}
.seg-toggle button {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  font: 500 11px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-2); padding: 7px 12px;
}
.seg-toggle button.active { background: var(--ink); color: var(--bone); }
.seg-toggle button + button { border-left: 1px solid var(--line); }

.task-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  transition: opacity var(--dur-fast);
}
.task-row:last-child { border-bottom: 0; }
.task-row.done { opacity: 0.5; }
.task-row.done .task-title span { text-decoration: line-through; color: var(--fg-3); }

.task-check {
  appearance: none; cursor: pointer;
  width: 20px; height: 20px; flex-shrink: 0;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: var(--bg-card); color: transparent;
  display: grid; place-items: center;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  margin-top: 2px;
}
.task-check:hover { border-color: var(--blush-deep); }
.task-check.on { background: var(--success); border-color: var(--success); color: #fff; }

.task-body { flex: 1; min-width: 0; }
.task-title {
  display: flex; align-items: center; gap: 8px;
  font: 500 14px/1.3 var(--font-body); color: var(--fg-1);
}
.task-title svg { color: var(--fg-3); flex-shrink: 0; }
.task-title > span { flex: 1; min-width: 0; }
.task-title .tag { flex-shrink: 0; font-size: 9px; }

.task-meta {
  display: flex; align-items: center; gap: 12px;
  margin-top: 4px;
  font-size: 11px; color: var(--fg-3);
  flex-wrap: wrap;
}
.task-meta > * { display: inline-flex; align-items: center; gap: 4px; }
.task-meta .task-due-overdue { color: var(--alert); font-weight: 500; }
.task-meta .task-link {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--blush-deep); padding: 0;
  font-size: 11px; font-family: inherit;
}
.task-meta .task-link:hover { text-decoration: underline; }
.task-meta .task-owner { color: var(--fg-2); }

@media (max-width: 720px) {
  .tasks-panel { padding: 16px; }
  .tasks-controls { width: 100%; flex-wrap: wrap; }
  /* Let the seg-toggle keep its natural width so "All clinic" doesn't get
     squeezed below its text width. The action buttons wrap to the next row
     if they don't fit alongside. */
}

/* ============================================================
   Notification bell + panel (§11)
   ============================================================ */
.cl-toolbar {
  position: absolute; top: 16px; right: 16px;
  z-index: 10;
  display: flex; gap: 8px; align-items: center;
}
.cl-main { position: relative; }

.notif-bell {
  appearance: none; cursor: pointer;
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--bg-card); color: var(--fg-1);
  display: grid; place-items: center;
  transition: background var(--dur-fast);
}
.notif-bell:hover { background: var(--cream); }
.notif-bell .notif-dot {
  position: absolute; top: -2px; right: -2px;
  background: var(--alert); color: #fff;
  font: 600 9px/1 var(--font-body);
  border-radius: 999px; padding: 3px 5px;
  border: 1.5px solid var(--bg);
  min-width: 16px; text-align: center;
}

.notif-panel {
  position: fixed; top: 60px; right: 16px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 80px); overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 0;
  font-family: var(--font-body);
}
.notif-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg-card); z-index: 1;
}
.notif-head h2 { margin: 4px 0 0; font-size: 22px; }

.notif-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.notif-row:hover { background: var(--cream); }
.notif-row:last-of-type { border-bottom: 0; }
.notif-row .notif-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.notif-row .notif-body { flex: 1; min-width: 0; }
.notif-row .notif-title { font: 500 13px/1.3 var(--font-body); color: var(--fg-1); }
.notif-row .notif-text { font-size: 12px; color: var(--fg-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-row .notif-when { font-size: 11px; color: var(--fg-3); margin-top: 4px; }
.notif-row > svg { color: var(--fg-3); margin-top: 8px; flex-shrink: 0; }

.notif-foot {
  padding: 12px 20px;
  background: var(--cream);
  border-top: 1px solid var(--line);
  text-align: center;
}

@media (max-width: 720px) {
  .cl-toolbar { top: 10px; right: 12px; }
  .notif-bell { width: 32px; height: 32px; }
  .notif-panel { top: 50px; right: 8px; left: 8px; width: auto; max-width: none; }
}

/* ============================================================
   Upcoming treatments + record prelude (§5.2b)
   ============================================================ */
.record-prelude {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 16px;
  align-items: start;
}
@media (max-width: 900px) { .record-prelude { grid-template-columns: 1fr; } }

.upcoming-treatments {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.upcoming-treatments .ut-head {
  display: flex; align-items: center; gap: 6px;
  font: 500 10px/1 var(--font-body);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.upcoming-treatments .ut-list { display: flex; flex-direction: column; gap: 6px; }
.ut-row {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px;
  align-items: center;
  padding: 6px 8px; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast);
  font-size: 12px;
}
.ut-row:hover { background: var(--cream); }
.ut-row .ut-when {
  font: 500 11px/1 var(--font-body);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ut-row .ut-when small { display: block; font-size: 10px; color: var(--fg-3); margin-top: 2px; font-weight: 400; }
.ut-row .ut-treat { color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-row .ut-with { color: var(--fg-3); font-size: 11px; }
.ut-row .ut-note { color: var(--blush-deep); }

/* ============================================================
   Check-in timeline label (§1.6b)
   ============================================================ */
.checkin-timeline {
  font: 500 10px/1 var(--font-mono);
  color: var(--fg-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ============================================================
   Forms-required gate (§4)
   ============================================================ */
.forms-gate {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  width: 100%;
  flex-wrap: wrap;
}
.forms-gate.ok {
  background: rgba(94,122,92,0.1);
  color: var(--success);
  font-weight: 500;
}
.forms-gate.warn {
  background: rgba(166,69,62,0.08);
  color: var(--ink);
  border: 1px solid rgba(166,69,62,0.18);
}
.forms-gate.warn svg { color: var(--alert); }
.forms-gate.warn .fg-body { flex: 1; min-width: 200px; }
.forms-gate.warn .fg-body b { color: var(--alert); }

/* ============================================================
   Workflows editor (§7.5)
   ============================================================ */
.workflow-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  background: var(--bg-card);
}

/* ============================================================
   Check-in flow (§1.6) — inline status + advance button
   ============================================================ */
.checkin-cluster {
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap; justify-content: flex-end;
}
.appt-row.done { opacity: 0.55; }
.appt-row.done .appt-time, .appt-row.done .appt-meta .who { text-decoration: line-through; }

/* Misc */
.empty {
  text-align: center; padding: 48px 24px;
  color: var(--fg-3); font-size: 13px;
}
.empty svg { color: var(--mushroom); margin-bottom: 12px; }

/* Generic 2-column responsive helper for record / capture screens */
.cl-2col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .cl-2col { grid-template-columns: 1fr; gap: 16px; } }

/* Mobile diary clinician picker (§10) */
.diary-clin-picker {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
  scrollbar-width: none;
}
.diary-clin-picker::-webkit-scrollbar { display: none; }
.diary-clin-chip {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line); background: var(--bg-card);
  border-radius: 999px;
  font: 500 12px/1 var(--font-body);
  color: var(--fg-2);
  flex-shrink: 0;
  position: relative;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.diary-clin-chip:hover { color: var(--fg-1); }
.diary-clin-chip.active { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.diary-clin-chip.active .avatar { color: var(--ink); }
.diary-clin-chip.off { opacity: 0.55; }
.diary-clin-chip .off-dot {
  position: absolute; top: 4px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--alert);
}

/* ============================================================
   Responsive — clinician / owner / record / today on phone
   ============================================================ */
@media (max-width: 900px) {
  .clinician-shell, .owner-shell { grid-template-columns: 1fr; }
  .cl-side {
    position: sticky; top: 56px; z-index: 50;
    height: auto;
    flex-direction: row; gap: 4px;
    padding: 8px 12px;
    overflow-x: auto;
    background: var(--bone-95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    scrollbar-width: none;
  }
  .cl-side::-webkit-scrollbar { display: none; }
  .cl-side .cl-brand, .cl-side-foot { display: none; }
  .cl-nav {
    flex-direction: row; gap: 4px;
    width: 100%;
    justify-content: space-around;
  }
  /* Icon-only tab bar — labels hide on phone (saves room for the 5 items) */
  .cl-nav button {
    flex-direction: column; gap: 4px;
    padding: 8px 4px 4px;       /* tight bottom so the active dot sits right under the label */
    font-size: 9px;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--fg-3);
    flex: 1 1 0; min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    /* Bottom-anchor content so the active border-bottom sits flush against the
       label even if the flex container stretches the button taller. */
    justify-content: flex-end;
  }
  /* Stop the row stretching buttons taller than their content as well */
  .cl-nav { align-items: flex-start; }
  /* Active indicator is now the button's own border-bottom — no ::after needed. */

  .cl-main {
    padding: 20px 18px 60px;
    overflow-x: clip; min-width: 0; max-width: 100%;
  }
  .stat-row, .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .cl-grid { grid-template-columns: 1fr !important; }
  /* Native iOS <select> doesn't shrink under flex; force it to its own row at
     full width across the wider mobile range, not just below 720px. */
  .cl-head .actions select.app-btn { flex: 1 1 100%; min-width: 0; width: 100%; }
  .record-head { grid-template-columns: auto 1fr; row-gap: 12px; }
  .record-head > div:last-child { grid-column: 1/-1; flex-wrap: wrap; }
  .kv-grid { grid-template-columns: 1fr; }
  .form-qa { grid-template-columns: 1fr; gap: 4px; }
  .form-sig { flex-direction: column; align-items: stretch; }
  .form-sig .sig-mark { width: 100%; }
  .move-compare { grid-template-columns: 1fr; }
  .move-compare > svg { transform: rotate(90deg); justify-self: center; }
  .modal { padding: 20px 18px; }

  /* Owner sidebar section labels are noise on a thin tab bar */
  .owner-shell .cl-side > div[style*="text-transform: uppercase"] { display: none; }

  /* Owner mobile nav: flat 8-button bar (rendered conditionally in OwnerShell
     based on useMediaQuery, since display:contents on nested flex is unreliable
     in iOS Safari). Labels hidden, icons distributed evenly across the row. */
  .owner-shell .cl-side { gap: 2px; padding: 6px 8px; }
  .owner-shell .cl-nav button {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 4px;
    flex-direction: row;
    justify-content: center;
  }
  .owner-shell .nav-label { display: none; }
}

@media (max-width: 720px) {
  /* Header actions wrap onto their own row, view-toggle drops into the actions area neatly */
  .cl-head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 20px; }
  /* override the desktop flex: 1 1 320px on first child — that creates a 320px-tall dead zone in column mode */
  .cl-head > div:first-child { flex: 0 0 auto; }
  .cl-head .actions { width: 100%; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
  .cl-head .actions .app-btn { flex: 1 1 auto; justify-content: center; }
  .cl-head .actions .view-toggle { width: 100%; }
  .cl-head .actions .view-toggle button { flex: 1; }
  .cl-head h1 { font-size: 26px; margin-top: 4px; }
  .cl-head .eyebrow { font-size: 10px; }

  /* iOS Safari's native <select> doesn't shrink under flex layout — it insists
     on its content's natural width, pushing siblings off-screen. Force selects
     in the actions row to take their own row at full width. */
  .cl-head .actions select.app-btn { flex: 1 1 100%; min-width: 0; width: 100%; }

  /* KPI grid down to 2 cols, smaller numbers */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: 14px; }
  .kpi .val { font-size: 28px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat .val { font-size: 24px; }

  /* Customer list row tightens */
  .cust-list-row { grid-template-columns: auto 1fr auto; row-gap: 6px; padding: 12px 14px; }
  .cust-list-row .cl-flag { grid-column: 2/4; flex-wrap: wrap; }
  .cust-list-row .cl-meta { grid-column: 2/4; }
  .cust-list-row .cl-warn,
  .cust-list-row > svg:last-child { display: none; }
  .cust-letter-head { top: 0; }

  /* Pending bookings already tightened, just tighten padding */
  .pending-row { padding: 14px 14px; }
  .panel-head { padding: 16px 16px 0; }

  /* Record tabs — fit all 6 (About / Notes / Photos / Visits / Messages /
     Forms) in one row on phone widths down to 375px by tightening padding,
     dropping letter-spacing, and shrinking the font slightly. */
  .record-tabs { gap: 0; flex-wrap: nowrap; }
  .record-tabs button {
    flex: 1 1 0; min-width: 0;
    padding: 10px 2px;
    font-size: 10px; letter-spacing: 0.02em;
    text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Diary grid: smaller hour rows on phone for more density */
  .diary-block .db-time { font-size: 10px; }
  .diary-block .db-who { font-size: 11px; }
  .diary-block .db-what { font-size: 10px; }
  .diary-times { font-size: 9px; }

  /* Hover preview — disable on phone (no hover) */
  .diary-hover { display: none; }

  /* Cash-up summary tighter */
  .cashup-summary { padding: 12px; }

  /* Tables: tighten cells, allow nowrap so columns don't squish to unreadable.
     Natural content width — wrapped in .tbl-scroll so overflow scrolls
     horizontally inside its panel without pushing the page wider. */
  .tbl { font-size: 12px; }
  .tbl thead th, .tbl tbody td { padding: 10px 8px; white-space: nowrap; }

  /* Bar chart on revenue: smaller gap so 22 bars fit visibly */
  .bar-chart { gap: 4px; }

  /* Owner sidebar collapses neatly: hide the section labels  */
  .owner-shell .cl-side > div[style*="text-transform: uppercase"] { display: none; }
}

@media (max-width: 480px) {
  .cl-main { padding: 18px 14px 80px; }
  .modal { width: min(94vw, 520px); padding: 18px 16px; }
  .modal-head h2 { font-size: 22px; }
  .cl-head h1 { font-size: 24px; }
  /* Form Q/A keeps stacked */
  .pending-row { grid-template-columns: 1fr; padding: 12px; }
  .pending-row .pr-actions { justify-content: stretch; }
  .pending-row .pr-actions .app-btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Photo card runtime images (Task 9) ─────────────────────── */
.photo-card { position: relative; overflow: hidden; }
.photo-card-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.photo-card-fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--fg-3); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.compare-img {
  display: block; width: 100%; aspect-ratio: 4/3;
  object-fit: cover; border-radius: 4px;
}

/* ── ComparePhotosModal slider (Task 10) ─────────────────────── */
.compare-slider {
  position: relative;
  width: 100%; aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  touch-action: none;
  cursor: ew-resize;
  user-select: none;
}
.compare-slider .layer-old,
.compare-slider .layer-new {
  position: absolute; inset: 0;
}
.compare-img-fill { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare-handle {
  position: absolute; top: 0; bottom: 0;
  width: 2px; background: var(--bone);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  transform: translateX(-50%);
  pointer-events: none;
}
.compare-handle::before {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bone); box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.compare-label {
  position: absolute; padding: 4px 10px;
  background: rgba(255,255,255,0.85);
  font-size: 11px; color: var(--fg-1); border-radius: 12px;
  letter-spacing: 0.04em; pointer-events: none;
}
.compare-label.tl { top: 12px; left: 12px; }
.compare-label.tr { top: 12px; right: 12px; }

/* ── PhotoAnnotateModal pins (Task 11) ───────────────────────── */
.annotate-stage {
  position: relative; width: 100%;
  aspect-ratio: 4/3; border-radius: var(--radius-md);
  overflow: hidden; background: #000;
  cursor: crosshair;
}
.annotate-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blush-deep); color: white;
  border: 2px solid var(--bone);
  font: 600 12px/1 var(--font-body);
  display: grid; place-items: center;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.photo-pin.selected { box-shadow: 0 0 0 3px var(--blush-soft); }

/* ── PhoneHandoffModal QR mock (Task 12) ─────────────────────── */
.qr-mock {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  width: 240px; aspect-ratio: 1/1;
  padding: 12px; background: var(--bone);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  gap: 2px;
}
.qr-mock > div { background: transparent; }
.qr-mock > .on { background: var(--ink); border-radius: 1px; }

/* ── Photo pin-count badge (Task 13) ─────────────────────────── */
.photo-pin-count {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--blush-deep); color: white;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
}

/* ============================================================
   Marketing + Finance · 17 May 2026 nav restructure
   ============================================================ */

/* Sub-tabs strip — sits below the cl-head, used by both Marketing
   and Finance to switch between sub-screens without leaving the tab. */
.sub-tabs {
  display: flex; gap: 4px; flex-wrap: nowrap;
  overflow-x: auto; overscroll-behavior-x: contain;
  touch-action: pan-x; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  align-items: flex-end;
}
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tabs .sub-tab { white-space: nowrap; flex-shrink: 0; }
.sub-tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 10px 14px;
  font: 500 13px/1 var(--font-body);
  color: var(--fg-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: 0.02em;
}
@media (hover: hover) {
  .sub-tab:hover { color: var(--fg-1); }
}
.sub-tab.active {
  color: var(--ink);
  border-bottom-color: var(--blush-deep);
  font-weight: 600;
}
.sub-tab-count {
  background: var(--cream);
  color: var(--fg-2);
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
}
.sub-tab.active .sub-tab-count {
  background: var(--blush-soft);
}
.sub-tab-divider {
  display: inline-block; width: 1px; height: 18px;
  background: var(--line); margin: 0 6px 6px;
}
.sub-tab-body { /* room for content */ }

/* ── Business identification ──────────────────────────────── */
.biz-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}

/* ── Finance PIN gate ─────────────────────────────────────── */
.finance-pin-gate {
  display: grid; place-items: center;
  padding: 60px 16px;
}
.finance-pin-card {
  background: var(--bone);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 36px 32px;
  max-width: 380px; width: 100%;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.04);
}
.finance-pin-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--blush-soft);
  color: var(--blush-deep);
  display: grid; place-items: center;
  margin: 0 auto 16px;
}
.finance-pin-card h2 {
  margin: 0 0 8px;
  font: 300 24px/1.2 var(--font-display);
  color: var(--ink);
}
.finance-pin-card p {
  font-size: 13px; color: var(--fg-3); margin: 0 0 20px;
}
.finance-pin-dots {
  display: flex; justify-content: center; gap: 12px; margin-bottom: 8px;
}
.finance-pin-dots .dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--line);
  transition: background 120ms ease, border-color 120ms ease;
}
.finance-pin-dots .dot.filled {
  background: var(--ink); border-color: var(--ink);
}
.finance-pin-dots .dot.err {
  border-color: var(--alert);
}
.finance-pin-error {
  color: var(--alert);
  font-size: 12px; margin-top: 10px;
}
.finance-pin-hint {
  margin-top: 16px;
  font-size: 11px; color: var(--fg-3);
}
.finance-pin-hint code {
  background: var(--cream); padding: 2px 6px; border-radius: 4px;
  font-family: ui-monospace, Consolas, monospace;
}

/* ── Finance blur-on-blur ─────────────────────────────────── */
.finance-shell { position: relative; }
.finance-obscure-banner {
  display: flex; align-items: center; gap: 10px;
  background: var(--cream);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 10px 14px; margin-bottom: 16px;
  font-size: 12px; color: var(--fg-2);
}
.finance-body.blur-figures .kpi .val,
.finance-body.blur-figures .kpi .delta,
.finance-body.blur-figures table td,
.finance-body.blur-figures table th,
.finance-body.blur-figures .weekly-input,
.finance-body.blur-figures .weekly-row-total,
.finance-body.blur-figures .vat-meter-fill,
.finance-body.blur-figures .trend-sparkbar,
.finance-body.blur-figures .bar-chart {
  filter: blur(8px);
  transition: filter 200ms ease;
  user-select: none;
}

/* ── Weekly input table ───────────────────────────────────── */
.weekly-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; gap: 16px; flex-wrap: wrap;
}
.weekly-head > div:first-child {
  display: flex; align-items: center; gap: 12px;
}
.weekly-week {
  text-align: center; min-width: 240px;
}
.weekly-week-num {
  font: 400 18px/1.2 var(--font-display);
  color: var(--ink);
}
.weekly-week-status {
  margin-top: 4px;
}

.weekly-table-wrap {
  background: var(--bone);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow-x: auto;
}
.weekly-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.weekly-table th, .weekly-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: middle;
}
.weekly-table thead th {
  background: var(--cream);
  font-weight: 500; font-size: 11px;
  letter-spacing: 0.04em; color: var(--fg-3);
  padding: 8px;
  text-transform: uppercase;
}
.weekly-biz-head {
  border-top: 3px solid;
  padding-top: 6px;
}
.weekly-biz-short {
  font-size: 13px; font-weight: 600; color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
.weekly-biz-term {
  font-size: 10px; color: var(--fg-3); margin-top: 2px;
  text-transform: none; letter-spacing: 0;
}
.weekly-total-head { text-align: right; }
.weekly-line-label { font-weight: 500; color: var(--fg-1); }
.weekly-line-hint  { font-size: 11px; color: var(--fg-3); margin-top: 2px; }

.weekly-input-wrap {
  position: relative; display: flex; align-items: center;
}
.weekly-input-prefix {
  position: absolute; left: 8px;
  color: var(--fg-3); font-size: 12px;
  pointer-events: none;
}
.weekly-input {
  width: 100%; max-width: 140px;
  padding: 8px 10px 8px 22px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bone); color: var(--ink);
  font: 500 16px/1.2 var(--font-body);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.weekly-input:focus {
  outline: none; border-color: var(--blush-deep);
  box-shadow: 0 0 0 3px var(--blush-soft);
}
.weekly-input:disabled {
  background: var(--cream); color: var(--fg-2);
}
.weekly-input-badge {
  position: absolute; right: 6px; top: -6px;
  background: var(--blush-deep); color: white;
  font-size: 9px; font-weight: 600;
  padding: 2px 6px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.revenue-row td { background: rgba(234,202,191,0.06); }
.expense-row td { background: rgba(140,133,127,0.04); }
.weekly-row-total {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1); font-weight: 600;
}
.weekly-totals-row td {
  background: var(--cream);
  border-top: 2px solid var(--line);
}
.weekly-totals-row.profit-row td {
  border-top: 2px solid var(--ink);
  font-size: 14px;
}

/* ── VAT meter ────────────────────────────────────────────── */
.vat-meter {
  position: relative;
  height: 18px;
  background: var(--cream);
  border-radius: 9px;
  overflow: hidden;
  margin-top: 16px;
}
.vat-meter-fill {
  height: 100%;
  background: var(--blush-deep);
  border-radius: 9px;
  transition: width 400ms ease;
}
.vat-meter-marker {
  position: absolute; top: -4px; bottom: -4px;
  width: 2px; background: var(--ink);
  transform: translateX(-50%);
}

/* ── Trend sparkbar (per-business trend rows) ─────────────── */
.trend-sparkbar {
  display: flex; align-items: flex-end; gap: 3px;
  height: 48px;
  padding: 4px 0;
}
.trend-sparkbar-cell {
  flex: 1 1 0;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
  transition: opacity 120ms ease;
}
.trend-sparkbar-cell:hover { opacity: 1; }

/* ── Auto-calc toggle pill (Pay rates) ────────────────────── */
.auto-toggle {
  display: inline-block;
  position: relative;
  width: 36px; height: 20px;
  cursor: pointer;
}
.auto-toggle input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.auto-toggle-pill {
  position: absolute; inset: 0;
  background: var(--line); border-radius: 999px;
  transition: background 160ms ease;
}
.auto-toggle-pill::after {
  content: ''; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: white; top: 3px; left: 3px;
  transition: transform 160ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.auto-toggle input:checked + .auto-toggle-pill {
  background: var(--success);
}
.auto-toggle input:checked + .auto-toggle-pill::after {
  transform: translateX(16px);
}

/* ── Reusable settings checkbox row ───────────────────────── */
.settings-checkbox {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  cursor: pointer;
}
.settings-checkbox input { margin-top: 3px; flex-shrink: 0; }
.settings-checkbox-title {
  font-size: 14px; font-weight: 500; color: var(--fg-1);
}
.settings-checkbox-sub {
  font-size: 12px; color: var(--fg-3); margin-top: 2px; line-height: 1.45;
}

/* ── Mobile tweaks ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .sub-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .sub-tab { white-space: nowrap; }
  .weekly-head { flex-direction: column; align-items: stretch; }
  .weekly-week { min-width: 0; flex: 1; }
  .weekly-input { font-size: 16px; max-width: 100px; }
  .finance-pin-gate { padding: 32px 12px; }
}

/* ── Demo notes ──────────────────────────────────────────────
   Deliberately OFF-PALETTE (blue, dashed) so it is obvious these are
   annotations for the demo, not part of the finished product. */
.demo-note { position: relative; display: inline-block; vertical-align: middle; }
.demo-note-btn {
  appearance: none; cursor: pointer;
  width: 19px; height: 19px; margin-left: 8px;
  border-radius: 50%; border: 1.5px dashed #4A78B5;
  background: rgba(74, 120, 181, 0.08); color: #4A78B5;
  font: 600 11px/1 var(--font-body); font-style: italic;
  display: inline-grid; place-items: center; vertical-align: middle;
}
.demo-note-btn:hover { background: rgba(74, 120, 181, 0.18); }
.demo-note-pop {
  position: absolute; top: 26px; left: -12px; z-index: 80;
  width: 300px; max-width: 74vw;
  background: #F2F7FD; border: 1.5px dashed #4A78B5; border-radius: 8px;
  padding: 12px 14px 10px;
  font-size: 12.5px; font-weight: 400; line-height: 1.55; color: #2C4A73;
  text-transform: none; letter-spacing: 0; white-space: normal; text-align: left;
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.16);
  display: block;
}
.demo-note-pop.right { left: auto; right: -12px; }
.demo-note-pop b { display: block; margin-bottom: 4px; color: #24405F; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.demo-note-pop .demo-note-close {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: block; margin: 8px 0 0; padding: 0;
  color: #4A78B5; font-size: 11px; text-decoration: underline;
}
[data-theme="dark"] .demo-note-pop { background: #16202E; color: #A9C3E2; border-color: #5C88C4; }
[data-theme="dark"] .demo-note-pop b { color: #CBDDF2; }

/* Master demo-note toggle: notes hidden unless the root says on.
   visibility (not display) so the space stays reserved and toggling
   never reflows the surrounding layout. */
html:not([data-demo-notes="on"]) .demo-note { visibility: hidden; }

/* Soft pulse when the notes appear (master toggle on / first load) */
@keyframes demoNotePulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 120, 181, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(74, 120, 181, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 120, 181, 0); }
}
html[data-demo-notes="on"] .demo-note-btn { animation: demoNotePulse 1.5s ease-out 3; }
@media (prefers-reduced-motion: reduce) {
  html[data-demo-notes="on"] .demo-note-btn { animation: none; }
}
.demo-note-master {
  border: 1.5px dashed #4A78B5 !important;
  color: #4A78B5 !important;
  background: rgba(74, 120, 181, 0.08) !important;
  font-style: italic; font-weight: 600; font-size: 13px;
}
.demo-note-master.off { opacity: 0.5; }
.demo-note-master:hover { background: rgba(74, 120, 181, 0.18) !important; }

/* On narrow screens the note popovers become a fixed, centred card so they
   can never run off the edge of the viewport. */
@media (max-width: 640px) {
  .demo-note-pop, .demo-note-pop.right {
    position: fixed; left: 14px; right: 14px; top: 30%;
    width: auto; max-width: none;
  }
}

/* Disabled buttons must LOOK disabled (e.g. Approve before forms complete) */
.app-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Slim, theme-aware scrollbars (modals, tables, any overflow pane) ── */
html { --scroll-thumb: #C7D1C2; --scroll-thumb-hover: #A8B8A2; }
html { scrollbar-color: var(--scroll-thumb) transparent; scrollbar-width: thin; }
* { scrollbar-color: var(--scroll-thumb) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }

/* Week-view chips: stacked, never overlapping */
.cal-chip {
  display: block; margin: 2px 4px 0; padding: 1px 6px;
  font-size: 10px; line-height: 1.5; border-radius: 4px;
  background: var(--blush-soft); border-left: 2px solid var(--blush-deep);
  color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-chip b { font-weight: 600; color: var(--fg-1); }
.cal-chip.ink   { background: var(--ink); border-left-color: var(--ink); color: var(--bone); }
.cal-chip.ink b { color: var(--bone); }
.cal-chip.ghost { background: transparent; border-left-color: var(--line); color: var(--fg-3); }
.cal-chip.ghost b { color: var(--fg-3); font-weight: 500; }
.cal-chip.warn  { background: rgba(166, 69, 62, 0.16);  border-left-color: var(--alert); }
[data-theme="dark"] .cal-chip.ink { background: var(--blush-deep); border-left-color: var(--blush-deep); color: #10140F; }
[data-theme="dark"] .cal-chip.ink b { color: #10140F; }
.cal-more { font-size: 9px; color: var(--fg-3); padding: 1px 8px; }

/* Master demo-note toggle in the toolbar: plain bell-style button, dimmed when notes are hidden */
.notif-bell.toggle-off { opacity: 0.45; }

/* One-line layout for blocks too short to hold the full three-row stack */
.diary-block .db-compact {
  font-size: 10.5px; line-height: 1.4; color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.diary-block .db-compact b { color: var(--fg-1); font-weight: 600; }

/* Calendar grids keep a readable minimum width and scroll sideways on phones */
.cal-week { min-width: 680px; }
.month-grid-wrap { min-width: 540px; }

/* Charts squeeze cleanly on phones */
@media (max-width: 640px) {
  .bar-chart { gap: 3px; }
  .bar-chart .bar .lbl { display: none; }
}
.weekly-table-wrap { overflow-x: auto; }

/* Tab strips: single row, sideways swipe on phones, no page wobble */
.record-tabs, .reports-tabs, .settings-tabs-row, .fin-tabs {
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  touch-action: pan-x; scrollbar-width: none;
}
.record-tabs::-webkit-scrollbar, .fin-tabs::-webkit-scrollbar { display: none; }
.record-tabs button, .fin-tabs button { white-space: nowrap; flex-shrink: 0; }