/* ShootCal Web — shared styles
   Brand: glassy sunset, sky-blue -> peach, soft calendar grid. */

:root {
  --sky:        #a9c6e6;
  --sky-deep:   #6f9fd0;
  --peach:      #f4c8a6;
  --coral:      #ec8a5c;
  --coral-deep: #e07440;
  --ink:        #2b3440;
  --ink-soft:   #4a5568;
  --line:       #e6e2dd;
  --card:       rgba(255, 255, 255, 0.72);
  --card-solid: #ffffff;
  --gold:       #fce3a8;
  --booked:     #f6b9a3;
  --radius:     18px;
  --shadow:     0 18px 50px rgba(70, 90, 120, 0.18);
  --shadow-sm:  0 6px 18px rgba(70, 90, 120, 0.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 8% 4%, var(--page-grad-sky), transparent 55%),
    radial-gradient(1100px 900px at 96% 100%, var(--page-grad-peach), transparent 55%),
    linear-gradient(135deg, var(--page-base-1) 0%, var(--page-base-2) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--coral-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.brand .name { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }
.brand .name span { color: var(--coral-deep); }
.muted { color: var(--ink-soft); }
.small { font-size: 0.85rem; }

/* ============ Coming-soon / login ============ */
.landing { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; }
.landing-card {
  width: 100%; max-width: 440px; background: var(--card);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 26px; box-shadow: var(--shadow);
  padding: 40px 36px 32px; text-align: center;
}
.landing-logo { width: 96px; height: 96px; border-radius: 24px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--coral-deep); background: rgba(236, 138, 92, 0.12);
  border: 1px solid rgba(236, 138, 92, 0.28); padding: 5px 12px; border-radius: 999px; margin-bottom: 18px;
}
.landing h1 { font-size: 1.9rem; line-height: 1.15; letter-spacing: -0.025em; margin: 6px 0 10px; }
.landing h1 b { color: var(--coral-deep); }
.landing p.sub { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.5; margin: 0 0 26px; }
.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  padding: 13px 20px; border-radius: 13px; border: 1px solid var(--line); background: #fff;
  color: var(--gbtn-text); font-size: 1rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.gbtn:hover { text-decoration: none; box-shadow: 0 10px 26px rgba(70, 90, 120, 0.2); transform: translateY(-1px); }
.gbtn:active { transform: translateY(0); }
.gbtn svg { width: 20px; height: 20px; }
.landing .fine { color: var(--ink-soft); font-size: 0.82rem; margin-top: 18px; line-height: 1.5; }
.landing .links { margin-top: 22px; font-size: 0.9rem; }
.landing .links a { margin: 0 10px; }
.alert {
  background: rgba(224, 116, 64, 0.1); border: 1px solid rgba(224, 116, 64, 0.3); color: var(--coral-deep);
  border-radius: 12px; padding: 10px 14px; font-size: 0.9rem; margin-bottom: 18px;
}
.learn-jump { display: inline-block; margin-top: 16px; font-size: 0.88rem; font-weight: 600; }

/* learn-more section under the hero */
.learn { max-width: 960px; margin: 0 auto; padding: 40px 24px 60px; text-align: center; }
.learn h2 { font-size: 1.7rem; letter-spacing: -0.025em; margin: 0 0 10px; }
.learn-sub { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; max-width: 640px; margin: 0 auto 36px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 36px; text-align: left; }
.feature {
  background: var(--card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.7); border-radius: 18px; padding: 22px 20px; box-shadow: var(--shadow-sm);
}
.feature .fi { margin-bottom: 13px; line-height: 0; }
.feature .fi svg { width: 30px; height: 30px; display: block; fill: var(--coral-deep); }
.feature h3 { margin: 0 0 7px; font-size: 1.05rem; letter-spacing: -0.01em; }
.feature p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.learn-actions { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.learn-cta {
  display: inline-block; background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff;
  padding: 13px 26px; border-radius: 13px; font-weight: 700; font-size: 1rem; box-shadow: 0 10px 26px rgba(224,116,64,0.3);
}
.learn-cta:hover { text-decoration: none; filter: brightness(1.04); }
.learn-link { font-weight: 600; }
.landing-footer { text-align: center; color: var(--ink-soft); font-size: 0.85rem; padding: 24px; }
.landing-footer span { font-weight: 700; }
.footer-community { margin: 0 auto 14px; max-width: 560px; }
.footer-logo { display: block; width: 140px; height: 140px; margin: 0 auto 18px; border-radius: 50%; }
.scan-backdrop { position: fixed; inset: 0; background: rgba(20,16,12,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.scan-modal { background: var(--card, #fff); border-radius: 16px; max-width: 540px; width: 100%; max-height: 82vh; display: flex; flex-direction: column; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); overflow-y: auto; }
/* Mobile: give the (tall) scan dialog near-full height + scrolling so the Start
   button is always reachable — it clipped before because nothing scrolled. */
@media (max-width: 640px) {
  .scan-backdrop { padding: 10px; }
  .scan-modal { max-height: 90vh; max-height: 90dvh; padding: 20px 18px; }
}
.scan-modal h3 { margin: 0 0 6px; }
.scan-list { overflow-y: auto; margin: 12px 0; border: 1px solid var(--line, rgba(0,0,0,0.1)); border-radius: 12px; }
.scan-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 0; }
.scan-count { color: var(--ink-soft); font-size: 0.82rem; }
.scan-sel { display: flex; gap: 4px; }
.scan-linkbtn { font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--coral-deep); background: none; border: 0; padding: 4px 7px; border-radius: 7px; cursor: pointer; }
.scan-linkbtn:hover { background: rgba(236,138,92,0.12); }
.scan-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line, rgba(0,0,0,0.07)); cursor: pointer; transition: background 0.12s; }
.scan-row:last-child { border-bottom: 0; }
.scan-row:hover { background: rgba(236,138,92,0.06); }
.scan-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--coral-deep); cursor: pointer; }
.scan-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.scan-name { font-weight: 600; line-height: 1.3; color: var(--ink); }
.scan-meta { color: var(--ink-soft); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Follow-ups add row (client detail) — bare inputs needed the app field look. */
.cm-fu-add { align-items: center; }
.cm-fu-add input { font-family: var(--font); font-size: 0.9rem; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: #fff; min-width: 0; }
.cm-fu-add input:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(236,138,92,0.18); }
.cm-fu-add input[type="date"] { -webkit-appearance: none; appearance: none; flex-shrink: 0; }

/* Reports drill-downs — tappable stats + the list dialog behind a number. */
.rpt-stat.rpt-click { cursor: pointer; transition: background 0.12s; }
.rpt-stat.rpt-click:hover { background: rgba(236,138,92,0.08); }
.rpt-list li.rpt-click, .rpt-bar-row.rpt-click { cursor: pointer; }
.rpt-list li.rpt-click:hover, .rpt-bar-row.rpt-click:hover { background: rgba(236,138,92,0.07); border-radius: 8px; }
.drill-list { margin-top: 0; }
.drill-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line, rgba(0,0,0,0.07)); }
.drill-row:last-child { border-bottom: 0; }
.drill-info { min-width: 0; flex: 1; }
.drill-name { font-weight: 600; line-height: 1.3; }
.drill-sub { color: var(--ink-soft); font-size: 0.82rem; }
.drill-badge { flex-shrink: 0; font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; }
.drill-badge.paid { background: var(--success-bg-3); color: var(--success-3); }
.drill-badge.pend { background: rgba(224,116,64,0.16); color: var(--coral-deep); }
.drill-count { color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; }
.drill-empty { padding: 22px; text-align: center; color: var(--ink-soft); }

/* First-run "scan for clients" nudge in the empty client list. */
.scan-onboard { background: linear-gradient(135deg, var(--tint-sky-onboard), var(--tint-peach-onboard)); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 4px 8px 14px; }
.scan-onboard-h { font-weight: 800; font-size: 1.02rem; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.scan-onboard-i { width: 1.05em; height: 1.05em; fill: var(--coral-deep); flex-shrink: 0; }
h3 .scan-onboard-i { width: 1em; height: 1em; }
.scan-onboard p { margin: 0 0 12px; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }
.scan-onboard-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Historical client events that aren't in the loaded calendar window: shown for
   reference, not clickable (no event in state to open). */
.day-row.cm-ev-static { cursor: default; }

/* Marketing: the "New" badge on the AI-import feature card. */
.feat-new { display: inline-block; font-size: 0.58em; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--coral-deep); border-radius: 6px; padding: 2px 7px; vertical-align: middle; margin-left: 6px; }

/* Scan: pre-scan explainer + progress + editable review rows. */
.scan-modal--wide { max-width: 640px; }
.scan-intro-block { margin: 14px 0 2px; }
.scan-intro-h { font-weight: 700; font-size: 0.82rem; color: var(--ink); margin-bottom: 6px; }
.scan-types { display: flex; flex-wrap: wrap; gap: 6px; }
.scan-type-chip { font-size: 0.8rem; background: rgba(169,198,230,0.28); color: var(--ink); border-radius: 999px; padding: 3px 10px; }
.scan-warn { font-size: 0.88rem; color: var(--coral-deep); background: rgba(224,116,64,0.1); border-radius: 10px; padding: 10px 12px; margin: 0; }
.scan-range { display: flex; gap: 18px; flex-wrap: wrap; }
.scan-range label { font-size: 0.88rem; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.scan-range select { font: inherit; font-size: 0.9rem; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.scan-safe { font-size: 0.85rem; color: var(--ink-soft); background: var(--success-bg-soft); border-radius: 10px; padding: 10px 12px; margin: 14px 0 2px; }
.scan-safe-i { width: 0.92em; height: 0.92em; fill: var(--success-icon); vertical-align: -1px; margin-right: 6px; }
.scan-progress { text-align: center; padding: 30px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scan-progress p { margin: 0; }
.scan-erow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.scan-erow:last-child { border-bottom: 0; }
.scan-erow .scan-cb { margin-top: 9px; width: 16px; height: 16px; accent-color: var(--coral-deep); flex-shrink: 0; cursor: pointer; }
.scan-ebody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.scan-eline { display: flex; gap: 6px; }
.scan-f { font: inherit; font-size: 0.88rem; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; min-width: 0; width: 100%; }
.scan-f-name { flex: 2; }
.scan-f-type { flex: 1.3; }
.scan-f-email, .scan-f-phone { flex: 1; }
/* Low-confidence email guessed from Other contacts: amber tint so the user double-checks. */
.scan-f-email--guess { border-color: var(--guess-border); background: var(--guess-bg); }
.scan-emailopt { display: flex; gap: 9px; align-items: flex-start; font-size: 0.9rem; cursor: pointer; }
.scan-emailopt input { margin-top: 3px; flex: none; }
.scan-f:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(236,138,92,0.18); }
.scan-emeta { color: var(--ink-soft); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Client organizer: one combined sort + type-filter control in the sidebar
   header (a button that opens a grouped popover). */
.cm-railhead { position: relative; padding: 8px 8px 6px; flex-shrink: 0; }
.cm-railhead:empty { display: none; }
.cm-filterbtn { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; font-size: 0.85rem; color: var(--ink); border: 1px solid var(--line); background: rgba(255,255,255,0.7); border-radius: 10px; padding: 8px 11px; cursor: pointer; text-align: left; }
.cm-filterbtn:hover { border-color: var(--coral); }
.cm-filterbtn .cm-fi { width: 0.95em; height: 0.95em; fill: var(--coral-deep); flex-shrink: 0; }
.cm-filterlbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }
.cm-filterlbl b { color: var(--ink); font-weight: 700; }
.cm-filterbtn .cm-fchev { width: 0.7em; height: 0.7em; fill: var(--ink-soft); flex-shrink: 0; }
.cm-fmenu { position: absolute; z-index: 30; top: calc(100% - 2px); left: 8px; right: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(20,30,50,0.16); padding: 6px; max-height: 360px; overflow-y: auto; }
.cm-fmenu[hidden] { display: none; }
.cm-fgroup + .cm-fgroup { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 4px; }
.cm-flabel { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); padding: 6px 10px 3px; }
.cm-fopt { display: flex; align-items: center; gap: 8px; width: 100%; font: inherit; font-size: 0.88rem; color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; text-align: left; }
.cm-fopt:hover { background: rgba(169,198,230,0.18); }
.cm-fopt.on { font-weight: 600; }
.cm-fopt .cm-fck { width: 14px; height: 14px; flex-shrink: 0; fill: var(--coral-deep); }
.smart-field { border-bottom: 1px solid var(--line, rgba(0,0,0,0.08)); padding-bottom: 14px; margin-bottom: 4px; }
.smart-row { display: flex; gap: 8px; align-items: stretch; }
.smart-row input { flex: 1; min-width: 0; }

/* Floating "Buy me a coffee" pill (replaces the unreliable BMC JS widget) */
.bmc-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff;
  font-size: 0.9rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 22px rgba(224, 116, 64, 0.42);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bmc-float svg { width: 18px; height: 18px; }
.bmc-float:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(224, 116, 64, 0.5); color: #fff; }
@media (max-width: 560px) { .bmc-float span { display: none; } .bmc-float { padding: 12px; } }
/* 3 columns desktop, 2 on tablet/iPad, 1 on phones */
@media (max-width: 920px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }
/* Forced two-up grid (e.g. the availability "add your own" pair) */
.features.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .features.grid-2 { grid-template-columns: 1fr; } }

/* ============ App shell ============ */
.app-body { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.app-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: relative;   /* anchor for the mobile nav-drop overlay */
  padding: 12px 20px; background: var(--card);
  /* No backdrop-filter on the header: it made .app-header a "backdrop root",
     which disables the child .nav-drop overlay's own blur. Nothing scrolls under
     the bar (.main is a separate scroll area), so the header never needed it. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.6); z-index: 30; flex-shrink: 0;
}
.app-header .right { display: flex; align-items: center; gap: 12px; }
.user-chip { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--ink-soft); max-width: 220px; overflow: hidden; }
.user-chip > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip img { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.user-chip .avatar-fallback {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--sky-deep), var(--coral));
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem;
}
.btn-ghost {
  border: 1px solid var(--line); background: rgba(255,255,255,0.6); color: var(--ink);
  padding: 7px 13px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.btn-ghost:hover { background: #fff; }

/* Small "buy me a coffee" link in the app header */
.coffee-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 10px;
  font-size: 0.85rem; font-weight: 700; text-decoration: none;
  color: var(--coral-deep); background: rgba(236,138,92,0.12);
  border: 1px solid rgba(236,138,92,0.28);
  transition: background 0.15s ease, color 0.15s ease;
}
.coffee-link svg { width: 16px; height: 16px; }
.coffee-link:hover { background: var(--coral-deep); color: #fff; }
@media (max-width: 700px) { .coffee-link span { display: none; } .coffee-link { padding: 7px 9px; } }

.tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.5); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
.tab { border: 0; background: transparent; padding: 7px 16px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; font-family: var(--font); }
.tab.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* Mobile menu wrapper: transparent to layout (desktop + menu-closed); becomes an
   absolutely-positioned overlay panel when the menu opens (see nav-open below). */
.nav-drop { display: contents; }

/* Hamburger toggle — hidden on desktop, revealed in the <=720px menu media query */
.nav-toggle {
  display: none; position: relative; flex-shrink: 0; width: 40px; height: 40px;
  align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,0.6);
  color: var(--ink); border-radius: 10px;
}
.nav-toggle:hover { background: #fff; }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .nav-dot {
  position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent, #c9742f); box-shadow: 0 0 0 2px var(--card);
}
.nav-dot[hidden] { display: none; }

.app-layout { flex: 1; display: flex; min-height: 0; position: relative; }

/* screens (calendar vs clients) fill the main area */
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.screen[hidden] { display: none; }

/* clients view */
.client-search { border: 1px solid var(--line); background: rgba(255,255,255,0.7); border-radius: 11px; padding: 11px 14px; font-size: 0.9rem; font-family: var(--font); min-width: 240px; color: var(--ink); }
.client-search:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(236,138,92,0.18); }

/* Location autocomplete dropdown (wraps a text input) */
.places-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.places-wrap > input, .places-wrap > .client-search { width: 100%; min-width: 0; box-sizing: border-box; }
.places-dd { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; background: var(--card-solid); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); max-height: 240px; overflow-y: auto; display: none; }
.places-dd.open { display: block; }
.places-dd .pl-item { padding: 9px 13px; font-size: 0.9rem; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.places-dd .pl-item:hover, .places-dd .pl-item.active { background: rgba(236,138,92,0.12); }
#clientsContent { flex: 1; min-height: 0; display: flex; overflow: hidden; }

/* Client Manager: top tab bar (Clients/Booking/Session Types) + a body that is
   either a master-detail (Clients) or a full-width panel (Booking/Types). */
.cm { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; min-width: 0; }
.cm-tabs { display: flex; gap: 4px; background: rgba(0,0,0,0.05); border-radius: 12px; padding: 4px; align-self: center; }
.cm-tab { font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--ink-soft); background: none; border: 0; border-radius: 9px; padding: 8px 18px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.cm-tab:hover { color: var(--ink); }
.cm-tab.sel { background: var(--card-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
/* Action bar under the tabs: New Client + Search (Clients tab only). Lives here
   instead of the toolbar so the tabs stay put when switching tabs. */
.cm-actionbar { display: flex; align-items: center; gap: 10px; }
.cm-actionbar .client-search { flex: 1; min-width: 0; }
/* Mobile: the wide "Scan calendar for clients" starved the search box. Scanning
   is a one-time setup action, so drop it to its own full-width row below New
   Client + Search — which then fill the top row and the search is usable. */
@media (max-width: 640px) {
  .cm-actionbar { flex-wrap: wrap; }
  .cm-actionbar #cmScanBtn { order: 3; flex: 1 0 100%; font-size: 0.85rem; }
}
/* Reports tab */
.rpt-stats { display: flex; flex-wrap: wrap; gap: 12px; }
.rpt-stat { flex: 1; min-width: 130px; background: rgba(0,0,0,0.03); border-radius: 12px; padding: 14px 16px; text-align: center; }
.rpt-num { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.rpt-lbl { font-size: 0.8rem; color: var(--ink-soft); margin-top: 2px; }
.rpt-list { list-style: none; margin: 0; padding: 0; }
.rpt-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rpt-list li:last-child { border-bottom: 0; }
.rpt-row-name { font-weight: 600; }
.rpt-price { color: var(--ink-soft); font-weight: 400; font-size: 0.85rem; margin-left: 6px; }
.rpt-row-val { font-weight: 700; }
.rpt-bars { display: flex; flex-direction: column; gap: 6px; }
.rpt-bar-row { display: flex; align-items: center; gap: 10px; }
.rpt-bar-lbl { width: 36px; font-size: 0.8rem; color: var(--ink-soft); }
.rpt-bar-track { flex: 1; height: 10px; background: rgba(0,0,0,0.06); border-radius: 6px; overflow: hidden; }
.rpt-bar-fill { display: block; height: 100%; background: var(--coral); border-radius: 6px; }
.rpt-bar-val { width: 26px; text-align: right; font-size: 0.85rem; font-weight: 600; }
.cm-body { flex: 1; display: flex; gap: 16px; min-height: 0; min-width: 0; }
.cm.cm--full .cm-rail { display: none; }
.cm-back { display: none; font: inherit; font-weight: 600; font-size: 0.95rem; align-items: center; gap: 4px; background: none; border: 0; color: var(--coral-deep); padding: 4px 0 10px; cursor: pointer; }
.cm-rail { width: 340px; max-width: 48%; flex-shrink: 0; min-width: 0; display: flex; flex-direction: column; min-height: 0;
  background: var(--card-solid); border: 1px solid rgba(255,255,255,0.8); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 12px; }
.cm-nav { display: flex; flex-direction: column; gap: 2px; }
.cm-navitem { display: flex; align-items: center; gap: 10px; font: inherit; font-weight: 600; font-size: 0.95rem;
  color: var(--ink); background: none; border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: left; width: 100%; }
.cm-navitem:hover { background: rgba(0,0,0,0.04); }
.cm-navitem.sel { background: linear-gradient(135deg, var(--tint-sky-hi), var(--tint-peach-hi)); }
.cm-ic { font-size: 1.05rem; width: 22px; text-align: center; flex-shrink: 0; color: var(--coral-deep); }
.cm-list-h { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); padding: 14px 12px 6px; }
.cm-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cm-empty { color: var(--ink-soft); font-size: 0.86rem; padding: 10px 12px; line-height: 1.4; }
.cm-client { display: flex; align-items: center; gap: 11px; font: inherit; background: none; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer; text-align: left; width: 100%; }
.cm-client:hover { background: rgba(0,0,0,0.04); }
.cm-client.sel { background: linear-gradient(135deg, var(--tint-sky-hi), var(--tint-peach-hi)); }
.cm-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--sky-deep), var(--coral)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; }
.cm-cbody { min-width: 0; display: flex; flex-direction: column; }
.cm-cname { font-weight: 700; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-csub { color: var(--ink-soft); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-cbook { font-size: 0.76rem; opacity: 0.82; }   /* booking line sits a touch lighter under the email */
.cm-pane { flex: 1; min-width: 0; overflow-y: auto; padding: 2px 16px 18px; }
.cm-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cm-pane-head h2 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.cm-pane-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cm-pane-empty { color: var(--ink-soft); padding: 60px 20px; text-align: center; }
.tb-btn.muted.danger { color: #c0392b; }
.tb-btn.muted.danger:hover { background: rgba(213,0,0,0.06); }
@media (max-width: 720px) {
  #clientsContent { overflow-y: auto; }
  .cm-tabs { width: 100%; }
  .cm-tab { flex: 1; text-align: center; padding: 9px 8px; }
  .cm-body { flex-direction: column; }
  .cm-rail { width: auto; max-width: none; }   /* full width on mobile (base rule caps at 48%) */
  .cm-list { max-height: none; gap: 8px; }      /* breathing room between client rows */
  .cm-client { padding: 11px 12px; }            /* taller touch targets */
  /* Clients tab, no client open: show the list, hide the empty pane. */
  .cm.cm--list .cm-pane { display: none; }
  /* Clients tab, a client open: hide the list, show the detail + back button. */
  .cm.cm--detail .cm-rail { display: none; }
  .cm.cm--detail .cm-back { display: inline-flex; }
}

/* Mid widths: the full single-row header (brand + Beta + 5 tabs + account
   actions) only fits above ~1280px. Between the hamburger breakpoint and there,
   drop the tabs to their own centered second row so nothing scrolls off the
   right edge. Width-based; brand+Beta stay left, account actions stay right. */
@media (min-width: 721px) and (max-width: 1280px) {
  .app-header { flex-wrap: wrap; row-gap: 8px; }
  .app-header .beta-badge { margin-right: auto; }      /* push account actions to the right */
  .app-header .tabs { order: 3; flex-basis: 100%; justify-content: center; }
}

/* Mobile header: the full tab row + account actions don't fit, so collapse them
   behind a hamburger. Collapsed bar = brand + Beta + hamburger; tapping the
   hamburger drops a full-width stacked menu (nav, then account actions). */
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .app-header { flex-wrap: wrap; row-gap: 0; gap: 10px; }
  .app-header .brand { flex: 1 1 auto; min-width: 0; }   /* push hamburger to the right */
  .beta-badge { order: 1; }
  .nav-toggle { order: 2; }

  /* Nav + account actions are hidden until the menu opens. */
  .app-header .tabs,
  .app-header .right { display: none; }
  .app-header.nav-open .tabs,
  .app-header.nav-open .right { width: 100%; }

  /* The menu drops as a translucent overlay panel OVER the content instead of
     pushing the calendar down. .nav-drop becomes an absolute glassy dropdown,
     and the keyframe plays as it appears (subtle slide + fade). */
  @keyframes navReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

  .app-header.nav-open .nav-drop {
    display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    padding: 8px 16px 16px;
    background: var(--card);
    backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 36px rgba(0,0,0,0.22);
    max-height: 80vh; overflow-y: auto;
    animation: navReveal .2s ease both;
  }

  .app-header.nav-open .tabs {
    display: flex; flex-direction: column; gap: 2px; padding: 2px 0 0;
    background: transparent; border: 0;
  }
  .app-header.nav-open .tab {
    width: 100%; text-align: left; padding: 12px 14px; font-size: 1rem; border-radius: 10px;
  }
  .app-header.nav-open .tab.active { background: var(--surface-2); box-shadow: none; }

  /* Account actions: two compact rows of two (Coffee | Report a bug / Leave a
     review | Sign out), with the user chip spanning the top row. */
  .app-header.nav-open .right {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  }
  .app-header.nav-open .right .user-chip { grid-column: 1 / -1; order: -1; max-width: none; padding: 2px 2px 4px; }
  .app-header.nav-open .right .user-chip > span:last-child { display: inline; }
  .app-header.nav-open .right .coffee-link,
  .app-header.nav-open .right .btn-ghost {
    display: flex; align-items: center; justify-content: center;
    width: 100%; white-space: nowrap; font-size: .9rem;
  }
  .app-header.nav-open .right .coffee-link span { display: inline; }   /* show label in the menu */
}

/* ---- toolbar buttons + calendars popover ---- */
.tb-btn {
  border: 1px solid var(--line); background: rgba(255,255,255,0.7); color: var(--ink);
  height: 38px; padding: 0 14px; border-radius: 11px; font-family: var(--font);
  font-size: 0.9rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.tb-btn:hover { background: #fff; }
.tb-btn.primary { background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(224,116,64,0.28); }
.tb-btn.primary:hover { filter: brightness(1.04); }
.tb-btn.muted { background: transparent; color: var(--ink-soft); }
.tb-btn.muted:hover { background: rgba(0,0,0,0.04); color: var(--ink); }
.tb-btn .plus { font-size: 1.1rem; line-height: 1; }
.tb-btn .caret { font-size: 0.7rem; opacity: 0.7; }
.cal-menu-wrap { position: relative; }
.cal-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 230px;
  background: var(--card-solid); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 8px;
}
.cal-pop[hidden] { display: none; }
.cal-pop-head { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); padding: 4px 8px 6px; }
.cal-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; cursor: pointer; font-size: 0.9rem; }
.cal-row:hover { background: rgba(169,198,230,0.12); }
.cal-row .swatch { width: 15px; height: 15px; border-radius: 5px; flex-shrink: 0; border: 1.5px solid var(--c, var(--swatch-default)); background: var(--c, var(--swatch-default)); position: relative; }
.cal-row.off .swatch { background: transparent; }
.cal-row.off .name { color: var(--ink-soft); }
.cal-row .swatch.check::after { content: ""; position: absolute; inset: 0; background: center / 11px 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); }
.cal-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* day view inside the right drawer */
.day-list { display: flex; flex-direction: column; gap: 8px; padding: 6px 22px 18px; }
.day-row { position: relative; display: flex; gap: 10px; padding: 10px 12px 10px 17px; border-radius: 11px; background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 0.06s ease; }
.day-row::before { content: ""; position: absolute; left: 7px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--c, var(--coral)); }
.day-row > div { flex: 1; min-width: 0; }  /* let the location ellipsis kick in instead of overflowing the panel */
.day-row:hover { transform: translateX(2px); }
.day-row .dr-time { font-size: 0.72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-row .dr-title { font-size: 0.9rem; font-weight: 600; line-height: 1.25; }
.day-row .dr-loc { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 0.78rem; color: var(--ink-soft); }
.day-row .dr-loc svg { width: 11px; height: 11px; flex: 0 0 auto; opacity: 0.7; }
.day-row .dr-loc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Calendar view toggle (Month / Agenda) */
.view-seg { display: inline-flex; gap: 3px; background: rgba(0,0,0,0.05); border-radius: 10px; padding: 3px; }
.view-seg .vseg { font: inherit; font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); background: none; border: 0; border-radius: 8px; padding: 6px 13px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.view-seg .vseg.active { background: var(--card-solid); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.view-seg .vseg:hover:not(.active) { color: var(--ink); }

/* Month-by-month agenda (Android/web-friendly alternative to the native scroll) */
.agenda { max-width: 760px; width: 100%; box-sizing: border-box; margin: 0 auto; display: flex; flex-direction: column; }
.ag-day { display: flex; gap: 14px; min-width: 0; padding: 8px 6px; border-top: 1px solid var(--line); }
.ag-day:first-child { border-top: 0; }
.ag-day.sel { background: rgba(236,138,92,0.07); border-radius: 12px; }
.ag-date { flex: 0 0 50px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; cursor: pointer; padding: 4px 0; border-radius: 10px; font: inherit; color: var(--ink-soft); }
.ag-date:hover { background: rgba(0,0,0,0.04); }
.ag-dow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.ag-dnum { font-size: 1.3rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.ag-day.today .ag-dnum { color: #fff; background: var(--coral); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ag-day.today .ag-dow { color: var(--coral-deep); }
.ag-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ag-evt { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; text-align: left; background: var(--card-solid); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 8px 17px; cursor: pointer; font: inherit; width: 100%; box-sizing: border-box; }
.ag-evt::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--c, var(--coral)); }
.ag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-loc { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 0.78rem; color: var(--ink-soft); }
.ag-loc svg { width: 11px; height: 11px; flex: 0 0 auto; opacity: 0.7; }
.ag-loc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ag-evt:hover { border-color: var(--coral); }
.ag-evt.sel { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(236,138,92,0.2); }
.ag-time { flex: 0 0 auto; font-size: 0.8rem; font-weight: 600; line-height: 1.45; color: var(--ink-soft); min-width: 62px; font-variant-numeric: tabular-nums; }
.ag-name { min-width: 0; max-width: 100%; font-size: 0.94rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-empty { text-align: center; color: var(--ink-soft); padding: 48px 16px; font-size: 0.95rem; line-height: 1.7; }
.day-empty { padding: 24px 22px; text-align: center; color: var(--ink-soft); font-size: 0.92rem; }
.day-newbtn { margin: 4px 22px 22px; }

/* ---- main ---- */
.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 18px 22px; overflow: hidden; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .month-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; }
/* Indent the calendar month header a touch on web — reads better than flush. */
@media (min-width: 721px) { #monthTitle { margin-left: 20px; } }
.toolbar .month-title .yr { color: var(--coral-deep); font-weight: 700; }
.nav-group { display: inline-flex; gap: 8px; align-items: center; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.7); cursor: pointer; font-size: 1.1rem; color: var(--ink);
  display: grid; place-items: center;
}
.icon-btn:hover { background: #fff; }
.today-btn { padding: 0 14px; width: auto; font-weight: 600; font-size: 0.9rem; }
/* overflow:visible (not hidden) so the grid card's shadow can flow out into
   .main's padding instead of being hard-clipped at the card edge (which looked
   like darkening outside the corners). The grid card has its own overflow:auto,
   so this doesn't change scroll containment. */
#content { flex: 1; min-height: 0; display: flex; overflow: visible; }
/* Agenda view: #content scrolls the tall list itself (the month grid keeps its own
   .grid-card scroll, so the default is overflow:hidden + display:flex). */
#content.cscroll { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---- month grid (fills available space; rows flex, scrolls only if too short) ---- */
.grid-card {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--card-solid); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(70, 90, 120, 0.05), 0 4px 12px rgba(70, 90, 120, 0.09);
  overflow: auto; border: 1px solid rgba(255,255,255,0.8);
}
.weekday-row { flex-shrink: 0; display: grid; grid-template-columns: repeat(7, 1fr); background: linear-gradient(135deg, var(--tint-sky-mid), var(--tint-peach-mid)); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; }
.weekday-row div { padding: 9px 8px; text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.month-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, minmax(86px, 1fr)); }
.cell {
  position: relative;
  min-width: 0; min-height: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 5px 6px; cursor: pointer; overflow: hidden; transition: background 0.12s ease;
}
.cell-sun { position: absolute; top: 6px; right: 7px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 0.6rem; color: var(--ink-soft); opacity: 0.82; pointer-events: none; line-height: 1.15; }
.cell-sun span { display: inline-flex; align-items: center; gap: 3px; }
.cell-sun .svgi { width: 1.2em; height: 1.2em; }
/* Warm tints: sunrise amber, sunset coral (cells + the sidebar sun row). */
.cell-sun span[title="Sunrise"] .svgi, .sun-tide .st-row .st-sun:first-child .svgi { color: #e8973a; }
.cell-sun span[title="Sunset"] .svgi, .sun-tide .st-row .st-sun:last-child .svgi { color: #e07440; }
/* Stroke icons (sunrise/sunset): outlined, not filled. */
.svgi-stroke { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .cell-sun { display: none; } }

/* Hover footer (Mac-style): sun (and tides when the cell has room) tuck at the
   bottom of each in-month cell and fade in on hover, so the grid stays clean. */
.cell-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 7px 5px;
  font-size: 0.6rem; line-height: 1.2; color: var(--ink-soft);
  /* No opaque scrim: the cell's hover tint reads through behind the sun/tide
     indicators so the whole cell highlights uniformly on hover. */
  background: transparent;
  opacity: 0; transform: translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}
.cell:hover .cell-foot { opacity: 1; transform: none; }
.cell-foot .cf-sun { display: flex; gap: 9px; }
.cell-foot .cf-sun span { display: inline-flex; align-items: center; gap: 3px; }
.cell-foot .cf-sun .svgi { width: 1.1em; height: 1.1em; }
.cell-foot .cf-sun span[title="Sunrise"] .svgi { color: #e8973a; }
.cell-foot .cf-sun span[title="Sunset"] .svgi { color: #e07440; }
.cell-foot .cf-tides { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.cell-foot .cf-tide { white-space: nowrap; opacity: 0.85; }
.cell-foot .cf-tide b { color: var(--sky-deep); font-weight: 700; }
@media (max-width: 600px) { .cell-foot { display: none; } }
.cell:nth-child(7n) { border-right: 0; }
.cell:hover { background: rgba(169, 198, 230, 0.08); }
.cell.other { background: var(--cell-other-bg, rgba(245, 245, 247, 0.5)); }
.cell.other .daynum { color: var(--text-faint); }
.cell.sel { background: rgba(236,138,92,0.07); box-shadow: inset 0 0 0 2px rgba(236,138,92,0.4); }
.cell .daynum { flex-shrink: 0; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.cell.today .daynum { background: var(--coral); color: #fff; }
.cell-evts { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* App-/Google-style chip: a left color stripe + a time line then a title line, on
   NO background. All-day events keep a filled bar (no time). */
.evt {
  flex-shrink: 0; position: relative; margin-top: 3px;
  padding: 0 4px 1px 9px; border-radius: 4px;
  background: transparent; color: var(--text-on-cell); overflow: hidden;
}
.evt::before {
  content: ""; position: absolute; left: 3px; top: 2px; bottom: 2px;
  width: 3px; border-radius: 2px; background: var(--c, var(--coral));
}
.evt.allday { background: var(--c, var(--coral)); padding-left: 7px; }
.evt.allday::before { display: none; }
.evt.allday .evt-title { color: #fff; }
.evt-time { display: block; font-size: 0.64rem; line-height: 1.2; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt-title { display: block; font-size: 0.72rem; line-height: 1.2; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more { flex-shrink: 0; font-size: 0.7rem; font-weight: 600; color: var(--coral-deep); margin-top: 3px; padding: 1px 6px; cursor: pointer; border-radius: 6px; align-self: flex-start; }
.more:hover { background: rgba(236,138,92,0.14); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--coral)); margin-right: 8px; vertical-align: middle; }

/* ---- detail drawer ---- */
.detail {
  width: 0; flex-shrink: 0; overflow: hidden; background: var(--card-solid);
  border-left: 1px solid var(--line); transition: width 0.22s ease; box-shadow: -8px 0 30px rgba(70,90,120,0.08);
}
.detail.open { width: 380px; }
.detail-inner { width: 380px; height: 100%; overflow-y: auto; padding: 0; }
/* The session create/edit form lives in this same panel; it reuses the modal-*
   form styles and just needs a positioning context for its close button. */
.detail-inner .eform { position: relative; }
/* Give the form a touch more width than the read-only view on desktop (mobile
   stays full-screen via the <=1200px overlay rule). */
@media (min-width: 1201px) {
  .detail.open.eform-open { width: 424px; }
  .detail.open.eform-open .detail-inner { width: 424px; }
}
.detail-hero { padding: 62px 22px 16px; background: linear-gradient(135deg, var(--tint-sky-hero), var(--tint-peach-hero)); position: relative; }
.detail-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255,255,255,0.7); cursor: pointer; font-size: 1rem; }
.detail-close:hover { background: #fff; }
/* Mac-style back-chevron bubble (drawer/popover) */
.detail-back {
  position: absolute; top: 14px; left: 16px; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.9); background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: background 0.15s ease, transform 0.06s ease; z-index: 2;
}
.detail-back:hover { background: #fff; box-shadow: 0 8px 20px rgba(70,90,120,0.18); }
.detail-back:active { transform: scale(0.93); }
.detail-back svg { width: 22px; height: 22px; display: block; }
.detail-kind { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 8px; }
.detail-kind .dot { margin: 0; }
.detail-title { font-size: 1.3rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.detail-when { margin-top: 6px; color: var(--ink-soft); font-size: 0.92rem; }
.detail-rows { padding: 8px 22px 22px; }
/* Inline FontAwesome icons from the icon() helper (and static SVGs): size to the
   surrounding text and tint with currentColor, so each call site's font-size +
   color drives the icon. */
.svgi { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; display: inline-block; flex-shrink: 0; }

/* Help & support card (Settings). */
.help-list { list-style: none; margin: 6px 0 0; padding: 0; }
.help-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 0.92rem; line-height: 1.45; border-top: 1px solid var(--line); }
.help-list li:first-child { border-top: 0; }
.help-list li .svgi { color: var(--accent, #ec8a5c); margin-top: 0.18em; }
.help-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.help-actions .tb-btn { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }

.drow { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.drow:last-child { border-bottom: 0; }
.drow .ic { width: 18px; flex-shrink: 0; text-align: center; color: var(--coral-deep); }
.drow .dl { font-size: 0.72rem; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.drow .dv { font-size: 0.95rem; margin-top: 2px; word-break: break-word; }
.drow .dv .copy { margin-left: 6px; cursor: pointer; opacity: 0.5; font-size: 0.8rem; border: 0; background: none; padding: 2px; color: inherit; font-family: inherit; line-height: 1; }
.drow .dv .copy:hover { opacity: 1; }
.drow .dv .copy:focus-visible { opacity: 1; outline: 2px solid var(--accent, #c9742f); outline-offset: 2px; border-radius: 4px; }
.badge-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.badge-status.confirmed { background: var(--success-bg); color: var(--success); }
.badge-status.tentative { background: var(--gold-bg); color: var(--gold-text); }
.badge-status.cancelled { background: rgba(213,0,0,0.1); color: var(--danger-2); text-decoration: line-through; }
.detail-map { width: 100%; height: 170px; border: 0; display: block; }
.detail-map-wrap { margin: 14px 22px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); background: linear-gradient(135deg, var(--tint-sky-map), var(--tint-peach-map)); min-height: 170px; }
.detail-actions { padding: 4px 22px 24px; display: flex; gap: 10px; }
.detail-actions a, .detail-actions button {
  flex: 1; text-align: center; padding: 10px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.7); color: var(--ink); font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.detail-actions a.primary, .detail-actions button.primary { background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff; border-color: transparent; }
.detail-actions a:hover { text-decoration: none; filter: brightness(1.03); }
.detail-actions.wrap { flex-wrap: wrap; padding-bottom: 8px; }
.detail-actions.wrap button { flex: 1 1 45%; }
.detail-actions button:hover { background: #fff; }
.detail-actions button.danger { color: #c0392b; border-color: rgba(213,0,0,0.3); }
.detail-actions button.danger:hover { background: rgba(213,0,0,0.06); }

/* ---- new session modal ---- */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(40,52,64,0.4); z-index: 50; backdrop-filter: blur(2px); }
.modal-backdrop.show { display: block; }
.modal { display: none; position: fixed; inset: 0; z-index: 55; align-items: center; justify-content: center; padding: 20px; }
.modal.show { display: flex; }
.modal-card {
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  background: var(--card-solid); border-radius: 20px; box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.8);
}
/* The session-type editor is content-rich (timing sliders, slot preview, client
   details, and soon a reply template), so give it noticeably more room. */
.modal-card.wide { max-width: 700px; }
.modal-head { padding: 20px 24px 4px; display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.modal-body { padding: 12px 24px 4px; display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
/* Field header row: the field label on the left, an inline "show on booking
   page" toggle on the right (per-field visibility — price, prep notes, location). */
/* App-native toggle switch. Built from a real checkbox (appearance:none + a
   sliding ::after thumb) so existing `.checked` reads keep working. Applied to
   the per-field "show on booking page" rows and every booking checkbox. */
input[type="checkbox"].switch,
.bk-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0; cursor: pointer;
  width: 42px; height: 24px; border-radius: 999px; background: #d2d6dd; position: relative;
  transition: background 0.15s ease; vertical-align: middle;
}
input[type="checkbox"].switch::after,
.bk-check input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: transform 0.15s ease;
}
input[type="checkbox"].switch:checked,
.bk-check input[type="checkbox"]:checked { background: var(--coral); }
input[type="checkbox"].switch:checked::after,
.bk-check input[type="checkbox"]:checked::after { transform: translateX(18px); }
input[type="checkbox"].switch:focus-visible,
.bk-check input[type="checkbox"]:focus-visible { outline: 2px solid rgba(236,138,92,0.5); outline-offset: 2px; }

/* Per-field visibility row: caption left, switch right, beneath the field. */
.vis-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 9px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
/* Section divider inside the session-type editor. Deliberately distinct from a
   field label (which is 0.74rem/700/ink-soft): darker, heavier, wider tracking,
   a rule above, and real breathing room so it reads as a SECTION, not a field. */
.modal-subhead { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink); margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
/* A field whose label row carries its on/off switch; the input dims when off. */
.tfield-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tfield-head label { margin: 0; }
.tfield-switch { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin: 0; cursor: pointer; }
.tfield-switch > span { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.tfield.off > input, .tfield.off > textarea { opacity: 0.5; }
/* Larger, prominent section header (the per-type availability calendar block). */
.te-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.te-section-head h3 { margin: 0; font-size: 1.12rem; letter-spacing: -0.01em; }
.te-section-head .tb-btn { height: 32px; padding: 0 12px; font-size: 0.82rem; }
.field textarea.te-reply { min-height: 200px; }

/* Bold / Link / Preview toolbar for booking-reply textareas */
.fmt-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.fmt-btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
  font: inherit; font-size: 0.82rem; line-height: 1; color: var(--ink); cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.fmt-btn:hover { background: #faf8f5; }
.fmt-btn.on { background: var(--accent, #c9742f); border-color: var(--accent, #c9742f); color: #fff; }
.fmt-btn .svgi { width: 13px; height: 13px; fill: currentColor; }
.fmt-hint { font-size: 0.78rem; color: var(--text-muted-warm); margin-left: 2px; }
.fmt-preview { margin: 8px 0 2px; padding: 11px 14px; border: 1px dashed var(--line);
  border-radius: 11px; background: #fcfbf9; font-size: 0.95rem; line-height: 1.5; color: var(--ink); }
.fmt-preview a { color: var(--accent, #c9742f); }

/* Tasks view (Google Tasks "ShootCal" list) */
.task-add { display: flex; gap: 8px; align-items: center; margin: 12px 0 16px; flex-wrap: wrap; }
.task-add #taskInput { flex: 1; min-width: 160px; }
.task-add .task-due { max-width: 160px; }
.task-list { display: flex; flex-direction: column; gap: 6px; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--card-solid); border: 1px solid var(--line); border-radius: 11px; }
.task-row.done { opacity: 0.6; }
.task-row.done .task-title { text-decoration: line-through; }
.task-check { width: 22px; height: 22px; flex: none; border: 1.5px solid var(--line);
  border-radius: 50%; background: #fff; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; }
.task-row.done .task-check { background: var(--text-muted-warm); border-color: var(--text-muted-warm); }
.task-check .svgi { width: 12px; height: 12px; fill: #fff; }
.task-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.task-title { color: var(--ink); }
.task-notes { font-size: 0.82rem; color: var(--text-muted-warm); }
.task-due-pill { font-size: 0.78rem; color: var(--accent, #c9742f); white-space: nowrap; }
.task-del { flex: none; background: none; border: none; cursor: pointer; color: var(--task-del, #b9b2a9); padding: 4px; }
.task-del:hover { color: var(--danger-4); }
.task-del .svgi { width: 13px; height: 13px; fill: currentColor; }

/* iOS Safari zooms the page when a focused input/textarea/select has a
   font-size < 16px. Force every text-entry control to 16px on phones to stop
   the zoom-on-tap. !important so class-styled fields (.client-search, .field
   input, incl. higher-specificity ones like .av-copy .client-search) are
   all covered. */
@media (max-width: 720px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Stop iOS double-tap-to-zoom firing on quick taps of interactive controls
   (e.g. the calendar < / > nav buttons on iPad). Keeps pinch-zoom intact. */
button, [role="button"], .tb-btn, .icon-btn, .vseg, .tab, .fmt-btn { touch-action: manipulation; }

/* Reviews / testimonials (marketing landing) */
.reviews .review-list { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin: 0 auto 30px; }
.review-card { margin: 0; background: var(--card-solid, #fff); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; }
.review-card.featured { border-color: var(--accent, #c9742f); box-shadow: 0 8px 24px rgba(224,116,64,0.12); }
.review-card blockquote { margin: 0 0 14px; font-size: 1.1rem; line-height: 1.55; color: var(--ink); }
.review-card figcaption { font-weight: 700; color: var(--ink); }
.review-card figcaption span { display: block; font-weight: 500; color: var(--ink-soft, #9a948c); font-size: 0.9rem; }
.review-cta { max-width: 640px; margin: 0 auto; text-align: center; }
.review-cta h3 { margin: 0 0 4px; }
.review-cta > p { color: var(--ink-soft, #9a948c); margin: 0 0 18px; }
.review-form { text-align: left; display: flex; flex-direction: column; gap: 12px; }
.review-form .rf-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.review-form .rf-row > input { flex: 1; min-width: 200px; }
.review-form input, .review-form textarea { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit; color: var(--ink); background: #fff; width: 100%; }
.review-form textarea { resize: vertical; }
.review-form .rf-row .gbtn { white-space: nowrap; flex: 0 0 auto; width: auto; }
.rf-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.rf-msg { margin: 2px 0 0; font-size: 0.92rem; min-height: 1.2em; }
.rf-msg.ok { color: var(--success-4); }
.rf-msg.err { color: #c0392b; }

.field input, .field select, .field textarea {
  font-family: var(--font); font-size: 0.95rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; background: #fff; width: 100%;
  /* iOS native date/time inputs ignore width:100% and use an intrinsic width
     that overflows a narrow panel — pin them so they can't push past it. */
  min-width: 0; max-width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus,
.client-search:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(236,138,92,0.18); }
/* Custom select chevron — bigger and with real right padding (native select
   arrows are tiny and crowd the edge). appearance:none keeps the native popup. */
.field select, select.client-search {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a8694' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  padding-right: 42px;
}
.field textarea { resize: vertical; min-height: 60px; }
/* iOS Safari sizes date/time inputs to an intrinsic content width that overflows
   a narrow panel — and `overflow-x:hidden` + `overflow-y:auto` together do NOT
   clip it on iOS (reverts to scrollable), so the whole form panned sideways.
   `appearance:none` makes them honor width:100% while keeping the native picker. */
.field input[type="date"], .field input[type="time"] {
  -webkit-appearance: none; appearance: none; width: 100%; max-width: 100%; min-width: 0;
}
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.field-check { flex-direction: row; align-items: center; gap: 9px; }
.field-check input { width: auto; }
.field-check label { text-transform: none; letter-spacing: 0; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.title-preview { font-size: 0.82rem; color: var(--ink-soft); }
.title-preview b { color: var(--coral-deep); }
.modal-err { display: none; background: rgba(213,0,0,0.08); color: #c0392b; border: 1px solid rgba(213,0,0,0.25); border-radius: 10px; padding: 9px 12px; font-size: 0.86rem; }
.modal-err.show { display: block; }
.modal-actions { padding: 16px 24px 22px; display: flex; gap: 10px; }
.modal-actions button { flex: 1; padding: 11px; border-radius: 12px; font-weight: 700; font-size: 0.92rem; cursor: pointer; border: 1px solid var(--line); }
.modal-actions .cancel { background: rgba(255,255,255,0.7); color: var(--ink); }
.modal-actions .submit { background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff; border-color: transparent; }
.modal-actions .submit:disabled { opacity: 0.6; cursor: default; }

.sun-hint { font-size: 0.82rem; color: var(--coral-deep); margin: -4px 0 2px; min-height: 1em; }

/* slot picker (create flow) */
.slot-picker[hidden] { display: none; }
.slot-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 7px; }
.slot-label .slot-sub { font-weight: 500; opacity: 0.8; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.slot-chip { font-family: var(--font); font-size: 0.82rem; font-weight: 600; color: var(--ink); background: rgba(255,255,255,0.7); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.slot-chip:hover { border-color: var(--coral); }
.slot-chip.sel { background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(224,116,64,0.3); }
.slot-chip.prime .slot-tag { color: var(--pill-gold-text); background: var(--gold); }
.slot-chip.sel .slot-tag { color: #fff; background: rgba(255,255,255,0.25); }
.slot-chip.booked { color: var(--ink-soft); background: rgba(0,0,0,0.04); cursor: not-allowed; text-decoration: line-through; opacity: 0.7; }
.slot-tag { font-size: 0.66rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; background: rgba(0,0,0,0.06); }

/* ---- settings ---- */
#settingsContent, #adminContent, #requestsContent { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 16px 18px; }
.settings-wrap, .admin-wrap { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; padding-bottom: 28px; }
/* Center the Settings/Admin column (cards + the toolbar title) in the viewport
   instead of pinning it to the left on wide screens. */
#settingsScreen .toolbar, #adminScreen .toolbar { width: 100%; max-width: 860px; margin-inline: auto; }
.set-card { background: var(--card-solid); border: 1px solid rgba(255,255,255,0.8); border-radius: 16px; box-shadow: 0 1px 2px rgba(70, 90, 120, 0.05), 0 4px 12px rgba(70, 90, 120, 0.09); padding: 26px 28px; }
.set-card h3 { margin: 0 0 4px; font-size: 1.1rem; }
.set-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.set-desc { margin: 0 0 18px; color: var(--ink-soft); font-size: 0.9rem; }
.set-current { font-size: 0.95rem; margin-bottom: 12px; }
.set-loc-row { display: flex; gap: 10px; }
.set-loc-row .client-search { flex: 1; min-width: 0; }
.set-geo { margin-top: 12px; font-size: 0.92rem; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.set-geo:empty { display: none; }
.set-types { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; }
.set-row-name { font-weight: 600; }
.set-row-sub { font-size: 0.84rem; color: var(--ink-soft); margin-top: 2px; }
.set-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 720px) {
  /* Session Types rows: let the actions (reorder arrows + Edit/Delete) wrap to
     their own full-width line so the type name isn't squeezed. */
  .set-row { flex-wrap: wrap; }
  .set-row-actions { width: 100%; justify-content: flex-end; }
  /* Tighten scroll-container insets on phones — the desktop padding (added for
     the card shadow) read as a large left/right margin on mobile. */
  #settingsContent, #adminContent, #requestsContent, .cm-pane { padding-left: 4px; padding-right: 4px; }
}
.set-reset { background: none; border: 0; color: var(--ink-soft); font-size: 0.85rem; cursor: pointer; text-decoration: underline; padding: 0; }

/* ---- website availability feed ---- */
.loading-sm { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 0.9rem; padding: 6px 0; }
.av-on { font-size: 0.72rem; font-weight: 700; color: var(--success-2); background: var(--success-bg-2); border-radius: 999px; padding: 2px 9px; vertical-align: middle; margin-left: 6px; }
.av-field { margin-top: 18px; }
.av-field > label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
/* In settings/booking fields the inputs fill their cell — the base .client-search
   min-width (meant for the standalone Clients search) otherwise overflows the
   flex columns and the rows visually overlap. */
.av-field .client-search, .bk-rules .client-search { width: 100%; min-width: 0; }
.av-copy { display: flex; gap: 10px; align-items: flex-start; }
.av-copy .client-search { flex: 1; min-width: 0; font-size: 0.85rem; }
.av-copy .tb-btn { flex-shrink: 0; }
.av-embed { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: none; overflow: hidden; line-height: 1.4; }
.av-preview { display: inline-block; margin-top: 8px; font-size: 0.85rem; color: var(--accent, #c9742f); text-decoration: none; }
.av-preview:hover { text-decoration: underline; }
.av-meta { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.83rem; color: var(--ink-soft); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.av-refresh { background: none; border: 0; color: var(--ink-soft); font-size: 0.83rem; cursor: pointer; text-decoration: underline; padding: 0; }
.av-warn { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); border-radius: 10px; padding: 9px 12px; font-size: 0.85rem; margin-bottom: 12px; }
/* Unified booking-calendar card: the "client requests" sub-section, the share
   block, and the live preview are each separated by a divider for breathing room. */
.bc-sub { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.bc-sub > .bk-check { font-size: 0.95rem; }
#bcCfg { margin-top: 4px; }
#bcCfg[hidden] { display: none; }
#bcCfg #bkSave { margin-top: 22px; }
/* Share block (embed code + direct link) — its own dividered section. */
.bc-share { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.bc-share-h { margin: 0 0 2px; font-size: 0.98rem; }
.bc-preview-field { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
/* Booking tab: each major section is now its own card. Reset the old in-card
   separator (dark top border + 22px top padding) to clean card spacing so they
   read as separate cards, not one long form. */
/* Give EVERY booking card the same gap (the Blackout/Mini cards are plain
   .set-card with no margin, so they butted against the card above and looked
   unpadded). .set-card already supplies the inner padding. */
#bookingCard > .set-card { margin-top: 14px; }
#bookingCard > .set-card:first-child { margin-top: 0; }
/* The bc-sub/share/preview wrappers also carry the old in-card separator (dark
   top border + 22px top padding) — reset it so they match the clean cards. */
#bookingCard .bc-sub, #bookingCard .bc-share, #bookingCard .bc-preview-field {
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.8);
}
.bc-preview { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card-solid); }
.bc-preview iframe { width: 100%; height: 560px; border: 0; display: block; }
/* client booking config */
.bk-rules { display: flex; gap: 14px; }
.bk-rules .av-field { flex: 1; min-width: 0; }
.bk-note { font-size: 0.82rem; color: var(--ink-soft); }
.slot-chip.wd { padding: 6px 11px; }
@media (max-width: 560px) { .bk-rules { flex-direction: column; gap: 0; } }
.bk-check-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.bk-check-row + .bk-check-row { margin-top: 0; }
/* Full-width toggle row: label on the left, switch on the right. row-reverse
   keeps the existing markup (input then span) while flipping the visual order. */
.bk-check { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; width: 100%; font-size: 0.92rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.bk-check span { flex: 1; }
/* booking-config sections + per-section save buttons */
.bk-sec-h { margin: 24px 0 6px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 1rem; font-weight: 700; }
.bk-sec-h:first-of-type { padding-top: 0; border-top: 0; margin-top: 8px; }
.bk-save { margin-top: 14px; }
/* booking-link (slug) field */
.bk-link-row { display: flex; align-items: center; }
.bk-link-pre { font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; padding-right: 4px; }
.bk-link-row .client-search { flex: 1; min-width: 0; }

/* booking-mode segmented toggle */
.seg-row { display: flex; gap: 8px; }
.seg-btn { flex: 1; font: inherit; font-weight: 600; font-size: 0.88rem; border: 1px solid var(--line); background: var(--card-solid); color: var(--ink-soft); border-radius: 10px; padding: 10px; cursor: pointer; }
.seg-btn.sel { background: var(--ink); color: #fff; border-color: transparent; }
/* blackout date chips */
.bk-bo-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bk-bo-item { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; background: rgba(0,0,0,0.05); border-radius: 999px; padding: 5px 6px 5px 12px; }
.bk-bo-item button { border: 0; background: rgba(0,0,0,0.12); color: var(--ink); border-radius: 999px; width: 20px; height: 20px; line-height: 1; cursor: pointer; font-size: 0.7rem; }
.bk-bo-item button:hover { background: rgba(0,0,0,0.22); }

/* ---- beta badge + bug report ---- */
.beta-badge { display: inline-flex; align-items: center; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent, #c9742f); background: rgba(201,116,47,0.13); border: 1px solid rgba(201,116,47,0.3); border-radius: 999px; padding: 2px 8px; margin-left: 8px; align-self: center; }
.bug-modal { position: fixed; z-index: 1001; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 460px); background: var(--card-solid, #fff); border-radius: 18px; box-shadow: 0 24px 60px rgba(40,55,80,0.28); padding: 22px 22px 18px; }
.bug-modal h3 { margin: 0 0 6px; font-size: 1.15rem; }
.bug-sub { margin: 0 0 14px; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.45; }
.bug-modal textarea { width: 100%; min-height: 110px; resize: vertical; font: inherit; border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; color: var(--ink); }
.bug-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.beta-tag { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255,255,255,0.22); border-radius: 999px; padding: 2px 6px; margin-left: 7px; vertical-align: middle; }
.beta-note { display: inline-block; opacity: 0.85; }

/* ---- settings sub-tabs ---- */
.set-tabs { display: flex; gap: 6px; max-width: 860px; margin: 0 auto 6px; flex-wrap: wrap; }
.set-tab { font: inherit; font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); background: none; border: 0; border-radius: 10px; padding: 9px 16px; cursor: pointer; }
.set-tab:hover { background: rgba(0,0,0,0.04); }
.set-tab.active { background: var(--card-solid); color: var(--ink); box-shadow: var(--shadow-sm); }
.set-section[hidden] { display: none; }

/* ---- native range sliders (themed) ---- */
.ctl-slider { margin-top: 16px; }
.ctl-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ctl-head label { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.ctl-val { font-size: 0.85rem; font-weight: 700; color: var(--accent, #c9742f); font-variant-numeric: tabular-nums; }
input[type=range].ctl { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--line); outline: none; margin: 6px 0; }
input[type=range].ctl::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--accent, #c9742f); box-shadow: 0 1px 3px rgba(0,0,0,0.25); cursor: pointer; }
input[type=range].ctl::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--accent, #c9742f); box-shadow: 0 1px 3px rgba(0,0,0,0.25); cursor: pointer; }
input[type=range].ctl:focus-visible { box-shadow: 0 0 0 3px rgba(201,116,47,0.25); }

/* ---- type-editor live preview ---- */
.te-help { font-size: 0.82rem; color: var(--ink-soft); margin: 6px 0 0; line-height: 1.4; }
.te-preview { margin-top: 16px; padding: 12px 14px; background: rgba(0,0,0,0.03); border-radius: 12px; }
.te-sentence { margin: 0; font-size: 0.9rem; color: var(--ink); line-height: 1.4; }
.te-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.te-chip { font-size: 0.8rem; font-weight: 600; background: var(--card-solid); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; }
.te-chip.prime { border-color: var(--accent, #c9742f); color: var(--accent, #c9742f); }
.te-more { font-size: 0.8rem; color: var(--ink-soft); align-self: center; }

/* ---- booking requests inbox ---- */
.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--accent, #c9742f); color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 1; vertical-align: middle; }
/* The badge sets display:inline-flex, which would otherwise override the
   [hidden] attribute — so the empty dot lingered with no count. Honor hidden,
   AND hide whenever empty so a stale/cached state can never show a bare dot. */
.tab-badge[hidden], .tab-badge:empty { display: none; }
.req-group-h { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin: 4px 2px -4px; }
.req-card { display: flex; flex-direction: column; gap: 4px; position: relative; }
.req-card.has-undo .req-type { padding-right: 36px; }
.req-undo-ic { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 0; border: 1px solid var(--line, rgba(0,0,0,0.12)); border-radius: 8px; background: var(--card, #fff); color: var(--ink-soft); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.req-undo-ic:hover { background: rgba(0,0,0,0.05); color: var(--ink); }
.req-card.pending::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent, #c9742f); }
.req-type { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.req-when { color: var(--ink-soft); font-size: 0.92rem; }
.req-client { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.req-name { font-weight: 600; }
.req-contact { font-size: 0.9rem; color: var(--ink-soft); }
.req-contact a { color: var(--accent, #c9742f); text-decoration: none; }
.req-contact a:hover { text-decoration: underline; }
.req-notes { margin-top: 8px; padding: 9px 12px; background: rgba(0,0,0,0.03); border-radius: 10px; font-size: 0.9rem; color: var(--ink-soft); white-space: pre-wrap; }
.req-actions { display: flex; gap: 10px; margin-top: 14px; }
.req-actions .tb-btn { flex: 1; padding-top: 12px; padding-bottom: 12px; }
.req-status { font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.req-status.ok { color: var(--success-2); background: var(--success-bg-2); }
.req-status.muted { color: var(--ink-soft); background: rgba(0,0,0,0.06); }
.req-status.replied { color: var(--replied-text); background: var(--replied-bg); }
@media (max-width: 480px) { .req-actions { flex-direction: column; } }
/* Batch-decline selection mode */
.req-group-h { display: flex; align-items: center; justify-content: space-between; }
.req-sel-link { font-size: 0.9rem; font-weight: 700; color: var(--coral); background: rgba(236,138,92,0.12); border: 1px solid rgba(236,138,92,0.35); border-radius: 9px; cursor: pointer; padding: 6px 14px; text-transform: none; letter-spacing: 0; }
.req-sel-link:hover { background: rgba(236,138,92,0.2); }
.req-selbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: var(--card-solid); border: 1px solid var(--line); border-radius: 11px; margin: 2px 0 6px; }
.req-selall { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.req-selall input, .req-check { width: 18px; height: 18px; accent-color: var(--coral); cursor: pointer; flex-shrink: 0; }
.req-selcount { font-size: 0.85rem; color: var(--ink-soft); }
.req-selsp { flex: 1 1 auto; }
.req-body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.req-card.req-selecting { flex-direction: row; align-items: flex-start; gap: 12px; }
.req-card.req-selecting .req-check { margin-top: 3px; }
@media (max-width: 480px) { .req-selbar .tb-btn { flex: 1 1 auto; } }

/* ---- access gate ---- */
.gate {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1000px 700px at 10% 0%, var(--gate-grad-sky), transparent 55%),
    radial-gradient(1000px 800px at 95% 100%, var(--gate-grad-peach), transparent 55%),
    linear-gradient(135deg, var(--page-base-1), var(--page-base-2));
}
.gate[hidden] { display: none; }
.gate-card {
  width: 100%; max-width: 420px; text-align: center; background: var(--card-solid);
  border: 1px solid rgba(255,255,255,0.8); border-radius: 24px; box-shadow: var(--shadow); padding: 36px 32px 28px;
}
.gate-logo { width: 84px; height: 84px; border-radius: 21px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.gate-card h1 { font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 8px; }
.gate-sub { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; margin: 0 0 20px; }
.gate-input {
  width: 100%; text-align: center; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; font-family: var(--font); color: var(--ink);
  border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px; margin-bottom: 12px;
}
.gate-input:focus { outline: 2px solid rgba(236,138,92,0.4); border-color: var(--coral); }
.gate-btn {
  width: 100%; padding: 13px; border-radius: 13px; border: 0; cursor: pointer; font-weight: 700; font-size: 1rem;
  background: linear-gradient(135deg, var(--coral), var(--coral-deep)); color: #fff; box-shadow: 0 10px 26px rgba(224,116,64,0.3);
}
.gate-btn:hover { filter: brightness(1.04); }
.gate-btn:disabled { opacity: 0.6; cursor: default; }
.gate-help { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.5; margin: 18px 0 10px; }
.gate-signout { font-size: 0.85rem; }

/* ---- states ---- */
.empty { text-align: center; color: var(--ink-soft); padding: 60px 20px; font-size: 0.95rem; }
/* Loading fills its area and centers the spinner both axes, so it sits dead
   center instead of shrink-to-fit at the top-left of the flex content area. */
.loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; text-align: center; color: var(--ink-soft); padding: 20px; font-size: 0.95rem; }
.spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(236,138,92,0.25); border-top-color: var(--coral); animation: spin 0.8s linear infinite; margin: 0 auto 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .spinner { animation: none; } .detail { transition: none; } }

/* ---- responsive ---- */
/* Below ~1200px the side-by-side grid + 380px drawer gets too cramped (7
   columns need ~840px), so the detail/day drawer becomes a full-screen overlay
   and the grid keeps the full width. */
@media (max-width: 1200px) {
  /* Full-screen overlay: drop the right-drawer edge shadow (it glows off the
     screen edge here). Horizontal overflow is prevented at the source — the
     date/time inputs get appearance:none so they honor width (see .field). */
  .detail.open { position: fixed; inset: 0; width: 100%; z-index: 45; box-shadow: none; }
  .detail-inner { width: 100%; }
  .month-grid { grid-template-rows: repeat(6, minmax(62px, 1fr)); }
  .cal-pop { right: auto; left: 0; }
}
@media (max-width: 560px) {
  /* header layout (collapse-to-hamburger) is owned by the <=720px block below */
  .app-header { padding: 10px 14px; }
  .brand img { width: 34px; height: 34px; }
  .brand .name { font-size: 1.05rem; }
  .btn-ghost { padding: 7px 10px; }

  /* Tight chrome on phones so the calendar gets the most vertical room. */
  .app-header { padding: 8px 12px; }
  .main { padding: 6px 6px 8px; }
  /* The grid card's big 0 18px 50px shadow needs ~50px to fade, but .main is
     overflow:hidden with little padding here, so it hard-clipped into a weird
     edge at the bottom corners. Use a tiny shadow that fits the padding. */
  .grid-card { box-shadow: 0 1px 5px rgba(70,90,120,0.10); border-radius: 14px; }
  .weekday-row div { padding: 6px 6px; }
  .toolbar { gap: 6px; margin-bottom: 8px; }
  .toolbar .month-title { font-size: 1.25rem; width: 100%; }
  .nav-group { flex-wrap: wrap; gap: 8px; width: 100%; align-items: center; }
  .tb-btn, .icon-btn, .today-btn { height: 42px; }
  /* Center the < Today > group between Calendars (left) and the + button (right):
     #prevBtn and the + both take margin-left:auto, splitting the free space. */
  .nav-group > #prevBtn { margin-left: auto; }

  /* New Session collapses to a round "+" (like the Mac toolbar), pushed to the
     end of the row instead of a full-width coral bar. */
  .nav-group > .tb-btn.primary {
    order: 5; margin-left: auto; flex: 0 0 auto;
    width: 42px; padding: 0; gap: 0; border-radius: 999px;
    font-size: 0; justify-content: center;        /* collapses the " New Session" label */
  }
  .nav-group > .tb-btn.primary .plus { font-size: 1.6rem; }

  /* Month/Agenda toggle gets its own full-width row so the nav buttons below
     (Calendars, prev/Today/next, +) don't wrap unpredictably on a phone. */
  .nav-group > .view-seg { order: -1; width: 100%; }
  .nav-group > .view-seg .vseg { flex: 1; text-align: center; }

  /* bigger prev/next chevrons; smaller Today between them */
  .icon-btn:not(.today-btn) { width: 46px; font-size: 1.5rem; }
  .today-btn { flex: 0 0 auto; width: auto; padding: 0 12px; font-size: 0.82rem; }

  /* compact month grid: events become colored dots; tap a day for the list */
  .cell { padding: 4px 4px; }
  .cell .daynum { width: 22px; height: 22px; font-size: 0.78rem; }
  .cell-evts { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; align-content: flex-start; }
  .evt { width: 7px; height: 7px; min-width: 7px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: var(--c, var(--coral)); color: transparent; font-size: 0; overflow: hidden; }
  .evt.allday { border-radius: 2px; }
  .evt .t { display: none; }
  .more { display: none; }

  /* one-column cards / single-column settings */
  .clients-grid { grid-template-columns: 1fr; }
  .field-row { flex-direction: column; gap: 14px; }
}

/* ============================================================================
   Marketing landing page (index.html)
   ========================================================================== */
.marketing { }

/* Accessibility: skip-to-content link, visually hidden until keyboard-focused */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none; }
.skip-link:focus { left: 0; }

/* nav */
.mk-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 20px 24px; }
.mk-nav-links { display: flex; align-items: center; gap: 22px; font-weight: 600; font-size: 0.92rem; }
.mk-nav-links a { color: var(--ink-soft); }
.mk-nav-links a:hover { color: var(--ink); text-decoration: none; }
.appstore-mini { background: var(--ink); color: #fff !important; padding: 8px 15px; border-radius: 10px; }
.appstore-mini:hover { filter: brightness(1.1); }
.mk-nav-links .nav-sep { width: 1px; height: 18px; background: var(--nav-sep); flex: 0 0 auto; }

/* Hamburger button — hidden above mobile breakpoint */
.mk-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; padding: 6px; cursor: pointer; margin-left: 8px; }
.mk-hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.15s ease; }

/* iPad: two rows — logo + Get the app on row 1, nav links on row 2 */
@media (max-width: 1024px) {
  .mk-nav { flex-wrap: wrap; padding: 14px 24px 0; }
  .mk-nav .brand { order: 1; flex: 1 1 auto; }
  .mk-nav > .appstore-mini { order: 2; }
  .mk-nav-links { order: 3; width: 100%; justify-content: center; padding: 12px 0 14px; border-top: 1px solid rgba(120,110,100,0.14); gap: 18px; font-size: 0.9rem; }
  .mk-nav-links .nav-sep { display: none; }
}

/* Mobile: hamburger dropdown */
@media (max-width: 640px) {
  .mk-nav { padding: 12px 20px 0; }
  .mk-nav .brand { order: 1; flex: 1 1 auto; }
  .mk-nav > .appstore-mini { order: 2; font-size: 0.8rem; padding: 7px 11px; }
  .mk-hamburger { display: flex; order: 3; }
  .mk-nav-links { display: none; order: 4; flex-direction: column; align-items: stretch; padding: 8px 0 16px; gap: 0; font-size: 0.95rem; }
  .mk-nav-links a { padding: 11px 0; border-bottom: 1px solid rgba(120,110,100,0.08); }
  .mk-nav-links .nav-sep { display: none; }
  .mk-nav.mk-nav-open .mk-nav-links { display: flex; }
  .mk-nav.mk-nav-open .mk-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mk-nav.mk-nav-open .mk-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .mk-nav.mk-nav-open .mk-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* hero */
.hero { max-width: 1080px; margin: 0 auto; padding: 30px 24px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hero-text h1 { font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.03em; margin: 14px 0 8px; }
.hero-text h1 b { color: var(--coral-deep); }
.hero-text .hero-tag { font-size: 1.45rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 16px; }
.hero-text .sub { font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 26px; max-width: 32em; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-cta.center { justify-content: center; }
/* In the marketing CTAs the Google button sits beside the App Store button,
   so override the full-width login-button default. */
.hero-cta .gbtn { width: auto; padding: 13px 22px; }
.hero-text .fine { color: var(--ink-soft); font-size: 0.85rem; margin-top: 16px; }

/* App Store button */
.appstore-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 11px 20px 11px 16px; border-radius: 13px; font-weight: 600; box-shadow: var(--shadow-sm); transition: transform 0.06s ease, box-shadow 0.15s ease; }
.appstore-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(70,90,120,0.25); }
.appstore-btn .apple { width: 26px; height: 26px; flex-shrink: 0; }
.appstore-btn span { display: flex; flex-direction: column; line-height: 1.05; font-size: 1.15rem; letter-spacing: -0.01em; }
.appstore-btn span small { font-size: 0.62rem; font-weight: 500; opacity: 0.85; letter-spacing: 0.02em; }

/* hero: real app screenshot */
.hero-shot { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,0.8); }

/* browser-frame mockup */
.mock-browser { background: var(--card-solid); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; border: 1px solid rgba(255,255,255,0.8); }
.mock-browser.wide { width: 100%; }
.mb-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #f3f1ee; border-bottom: 1px solid var(--line); }
.mb-dot { width: 10px; height: 10px; border-radius: 50%; background: #d9d4ce; }
.mb-dot:nth-child(1){ background:#f0a8a0; } .mb-dot:nth-child(2){ background:#f6d59a; } .mb-dot:nth-child(3){ background:#a8d6ad; }
.mb-url { margin-left: 10px; font-size: 0.74rem; color: var(--ink-soft); background: #fff; border-radius: 7px; padding: 4px 12px; flex: 1; max-width: 280px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mb-body { padding: 18px; }

/* CSS calendar mock */
.mk-cal-head { font-size: 1.05rem; color: var(--ink-soft); margin-bottom: 12px; }
.mk-cal-head b { color: var(--ink); font-weight: 800; font-size: 1.2rem; }
.mk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mk-grid .dow { text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--ink-soft); padding-bottom: 4px; }
.mk-grid .cell { position: relative; min-height: 46px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 5px; font-size: 0.72rem; color: var(--ink); font-style: normal; background: #fff; }
.mk-grid.compact .cell { min-height: 34px; }
.mk-grid .cell.out { color: #c4c0ba; background: transparent; border-color: transparent; }
.mk-grid .cell.today { outline: 2px solid var(--coral); outline-offset: -1px; }
.mk-grid .pill { display: block; margin-top: 3px; font-size: 0.6rem; font-weight: 700; padding: 2px 4px; border-radius: 5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill.gold { background: var(--gold); color: var(--pill-gold-text); }
.pill.coral { background: rgba(236,138,92,0.22); color: var(--coral-deep); }
.pill.sky { background: rgba(111,159,208,0.22); color: var(--sky-deep); }
.pill.booked { background: var(--booked); color: var(--cal-booked-text); }
/* availability variant */
.mk-grid.avail .cell { display: flex; align-items: center; justify-content: center; min-height: 38px; font-weight: 600; }
.mk-grid.avail .cell.free { background: var(--cal-open-bg); border-color: var(--cal-open-border); color: var(--sky-deep); }
.mk-grid.avail .cell.booked-day { background: var(--booked); border-color: transparent; color: var(--cal-booked-text); }
.avail-key { display: flex; gap: 18px; justify-content: center; margin-top: 14px; font-size: 0.78rem; color: var(--ink-soft); }
.avail-key i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }
.avail-key i.free { background: var(--cal-open-border); } .avail-key i.booked { background: var(--booked); }

/* sections */
.mk-section { max-width: 1080px; margin: 0 auto; padding: 50px 24px; text-align: center; }
/* Tighter page gutter on phones so content uses more of the narrow screen. */
@media (max-width: 600px) { .mk-section { padding-left: 14px; padding-right: 14px; } }
.mk-section h2 { font-size: 1.9rem; letter-spacing: -0.025em; margin: 0 0 12px; }
.mk-lede { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; max-width: 620px; margin: 0 auto 36px; }
.mk-more { color: var(--ink-soft); font-size: 0.95rem; margin-top: 28px; }

/* screenshot gallery (real app shots) */
.shot-gallery { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
/* Landscape Mac/web shots get the full column width (.wide); the portrait
   iPhone/iPad shots sit in a narrower centered 2-up row beneath them. */
.shot-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; max-width: 760px; margin: 0 auto; width: 100%; }
.shot-card { margin: 0; background: var(--card-solid); border: 1px solid rgba(255,255,255,0.8); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 12px; }
.shot-card img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line); }
.shot-card figcaption { font-size: 0.88rem; color: var(--ink-soft); text-align: center; margin-top: 11px; line-height: 1.4; }
.shot-card.phone img { max-width: 300px; margin: 0 auto; }
.shot-card.tablet img { max-width: 380px; margin: 0 auto; }
@media (max-width: 760px) { .shot-pair { grid-template-columns: 1fr; } .shot-card.phone img { max-width: 280px; } }

/* native apps section (Mac + iPhone shots) */
.native-shots { display: flex; gap: 32px; justify-content: center; align-items: flex-end; flex-wrap: wrap; max-width: 1060px; margin: 0 auto 30px; }
.native-mac, .native-phone { margin: 0; }
.native-mac { flex: 0 1 680px; min-width: 280px; }
.native-mac img { width: 100%; height: auto; display: block; border-radius: 14px; filter: drop-shadow(0 18px 44px rgba(70,90,120,0.22)); }
.native-phone { flex: 0 1 220px; min-width: 150px; }
.native-phone img { width: 100%; height: auto; display: block; border-radius: 26px; filter: drop-shadow(0 14px 34px rgba(70,90,120,0.22)); }
.native-mac figcaption, .native-phone figcaption { text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-top: 14px; }

/* screenshots row (legacy CSS mockups — kept for reference) */
.shot-row { display: flex; gap: 32px; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
.shot-row .mock-browser.wide { flex: 1; min-width: 320px; max-width: 560px; }

/* phone mockup */
.mock-phone { width: 270px; background: var(--phone-bezel); border-radius: 36px; padding: 12px; box-shadow: var(--shadow); position: relative; flex-shrink: 0; }
.mp-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; background: var(--phone-bezel); border-radius: 0 0 14px 14px; z-index: 2; }
.mp-screen { background: linear-gradient(160deg, var(--page-base-1), var(--page-base-2)); border-radius: 26px; padding: 38px 14px 18px; text-align: left; min-height: 440px; }
.mp-top { font-weight: 800; font-size: 1rem; margin-bottom: 12px; color: var(--ink); }
.mp-card { position: relative; background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm); padding: 13px 14px 14px 18px; margin-bottom: 12px; }
.mp-card.sm { padding: 11px 14px 11px 18px; }
.mp-acc { position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; border-radius: 5px; }
.mp-acc.gold { background: var(--coral); } .mp-acc.coral { background: var(--sky-deep); }
.mp-when { font-size: 0.74rem; color: var(--ink-soft); font-weight: 600; }
.mp-title { font-size: 1rem; font-weight: 700; margin-top: 2px; }
.mp-sub { font-size: 0.84rem; color: var(--ink-soft); }
.mp-meta { font-size: 0.78rem; color: var(--ink-soft); margin-top: 8px; }
.mp-row { margin-top: 10px; }
.mp-tag { font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.mp-tag.paid { background: var(--success-bg); color: var(--success); }
.mp-mini { font-size: 0.72rem; color: var(--ink-soft); background: rgba(255,255,255,0.6); border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; text-align: center; }

/* story */
.story { max-width: 720px; margin: 0 auto; padding: 30px 24px 50px; text-align: center; }
.story h2 { font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 16px; }
.story p { font-size: 1.1rem; line-height: 1.6; color: var(--ink); font-style: italic; }
.story-by { font-style: normal !important; color: var(--ink-soft); font-size: 0.95rem !important; font-weight: 600; margin-top: 8px; }

/* final cta */
.final-cta { text-align: center; padding: 56px 24px 64px; background: rgba(255,255,255,0.45); border-top: 1px solid rgba(255,255,255,0.7); }
.fc-logo { display: block; width: 140px; height: 140px; margin: 0 auto 16px; }
.final-cta h2 { font-size: 1.8rem; letter-spacing: -0.025em; margin: 0 0 8px; }
.final-cta > p { color: var(--ink-soft); margin: 0 0 24px; }
.final-cta .fine { color: var(--ink-soft); font-size: 0.85rem; margin-top: 16px; }

/* responsive */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 10px; text-align: center; }
  .hero-text .sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-text h1 { font-size: 2.2rem; }
  .hero-art { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .hero-text h1 { font-size: 1.9rem; }
  .shot-row { gap: 24px; }
}

/* ---- admin: access requests ---- */
.tb-btn.danger { color: var(--danger-3); border-color: var(--danger-3-border, rgba(179,38,30,0.35)); }
.tb-btn.danger:hover { background: rgba(179,38,30,0.08); }
.admin-count { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); background: rgba(0,0,0,0.05); border-radius: 999px; padding: 1px 9px; margin-left: 6px; vertical-align: middle; }
.admin-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.admin-row { display: flex; align-items: center; gap: 13px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.admin-row-main { flex: 1; min-width: 0; }
.admin-row-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-row-sub { font-size: 0.83rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.admin-row-actions { flex-shrink: 0; }
.admin-badge { font-size: 0.72rem; font-weight: 700; color: var(--sky-deep); background: var(--admin-badge-bg); border-radius: 999px; padding: 3px 11px; }
.admin-empty { color: var(--ink-soft); font-size: 0.9rem; padding: 6px 2px; }

/* ---- demo mode ---- */
.demo-banner { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 9px 16px; background: linear-gradient(135deg, rgba(236,138,92,0.14), rgba(244,200,166,0.20)); border-bottom: 1px solid rgba(236,138,92,0.28); font-size: 0.88rem; color: var(--ink); }
.demo-banner[hidden] { display: none; }
.demo-signin { font-weight: 700; color: var(--coral-deep); white-space: nowrap; }
.demo-note { font-size: 0.85rem; color: var(--ink-soft); }
@media (max-width: 560px) { .demo-banner { font-size: 0.8rem; padding: 8px 12px; gap: 8px; } }

/* "Try the demo" link on the marketing page */
.demo-cta { margin-top: 16px; font-size: 0.95rem; }

/* ---- Live availability embed ---- */
.embed-wrap { max-width: 1200px; margin: 0 auto; background: var(--card-solid); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 12px; }
.embed-section { max-width: 1240px; }
.embed-wrap iframe { width: 100%; height: 640px; border: 0; border-radius: 10px; display: block; }
@media (max-width: 560px) {
  /* Full-bleed on phones: drop the page gutter + card chrome so the calendar
     uses the whole width (cells are tight on mobile and any side padding makes
     them overflow). */
  .embed-section { padding-left: 0; padding-right: 0; }
  .embed-wrap { max-width: none; margin: 0; padding: 0; border-left: 0; border-right: 0; border-radius: 0; }
  .embed-wrap iframe { height: 560px; border-radius: 0; }
}
/* Safety net for short viewports: if the calendar can't fit, let the PAGE scroll
   instead of clipping the bottom rows. Engages below 640px tall so scroll-
   capability is on BEFORE the rows hit their 62px floor and start falling off
   the container (the locked layout can't shrink rows past ~62px, so it clips
   around 545px tall). Harmless above the clip point — it only actually scrolls
   when content overflows. Vertical overflow only; no header/width/flex changes,
   so normal windows are unaffected and the row floor matches the locked layout. */
@media (max-height: 640px) {
  .app-body { height: auto; min-height: 100dvh; overflow: visible; }
  .main, .screen, #content, .grid-card { overflow: visible; }
  .month-grid { grid-template-rows: repeat(6, minmax(62px, 1fr)); }
}
.feature code { background: rgba(0,0,0,0.05); border-radius: 5px; padding: 1px 5px; font-size: 0.85em; }

/* ---- Client Manager spotlight (full-width feature) ---- */
.spotlight { max-width: 1000px; margin: 0 auto; padding: 50px 24px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
.spotlight .sp-text { text-align: left; }
.spotlight h2 { font-size: 1.9rem; letter-spacing: -0.025em; margin: 0 0 14px; }
.spotlight p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.62; margin: 0; }
.spotlight .sp-art { margin: 0; }
.spotlight .sp-art img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
@media (max-width: 820px) { .spotlight { grid-template-columns: 1fr; gap: 22px; padding: 36px 24px; } }

/* ---- About / story (the photographer's own words) ---- */
.about { max-width: 720px; margin: 0 auto; padding: 10px 24px 40px; }
.about h2 { font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 16px; text-align: center; }
.about p { font-size: 1.05rem; line-height: 1.7; color: var(--ink); margin: 0 0 14px; }
.about .by { text-align: center; color: var(--ink-soft); font-size: 0.95rem; font-weight: 600; margin-top: 4px; }
.about .story-card { background: var(--card-solid); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 28px 32px; text-align: left; }
.about .story-card p:last-of-type { margin-bottom: 0; }
.about .story-card .by { text-align: right; margin-top: 18px; }
.about .story-card h2 { text-align: left; margin: 0 0 16px; }
@media (max-width: 560px) { .about .story-card { padding: 22px 20px; } }

/* ---- FAQ (standard accordion) ---- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 4px; }
.faq summary { font-weight: 700; font-size: 1.02rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: left; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--coral-deep); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; margin: 11px 2px 2px; text-align: left; }

.demo-cta a { font-weight: 600; }

/* Long-form document pages (privacy, terms, guide, support) */
.doc { max-width: 760px; margin: 0 auto; padding: 30px 24px 54px; }
.doc .crumbs { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 10px; }
.doc .crumbs a { color: var(--ink-soft); font-weight: 600; }
.doc h1 { font-size: 2rem; letter-spacing: -0.03em; margin: 0 0 6px; }
.doc .updated { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 26px; }
.doc .lede { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 22px; }
.doc h2 { font-size: 1.25rem; letter-spacing: -0.02em; margin: 30px 0 10px; }
.doc h3 { font-size: 1.02rem; margin: 18px 0 6px; }
.doc p { color: var(--ink); line-height: 1.65; margin: 0 0 12px; }
.doc ul { margin: 0 0 14px; padding-left: 1.2em; }
.doc li { color: var(--ink); line-height: 1.6; margin-bottom: 8px; }
.doc code, .doc kbd { background: rgba(0,0,0,0.06); border-radius: 5px; padding: 1px 6px; font-size: 0.88em; font-family: var(--font); }
.doc .card-note { background: var(--card-solid); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 20px 22px; margin: 6px 0 20px; }

/* Demo day-view sun & tide summary */
.sun-tide { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; margin: 14px 0; background: linear-gradient(135deg, rgba(244,200,166,0.20), rgba(169,198,230,0.18)); border: 1px solid rgba(236,138,92,0.25); border-radius: 12px; font-size: 0.86rem; color: var(--ink); }
.sun-tide .st-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.sun-tide .st-sun { font-weight: 600; }
.sun-tide .st-lbl { font-weight: 700; color: var(--ink-soft); }
.sun-tide .st-tide { color: var(--ink-soft); }

/* Lightbox (click a screenshot to view full size) */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(20,24,30,0.9); cursor: zoom-out; opacity: 0; transition: opacity 0.15s ease; }
.lightbox.open { display: flex; opacity: 1; }
.lightbox img { max-width: 95vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,0.55); }
.lightbox .lb-close { position: absolute; top: 16px; right: 22px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.lightbox .lb-close:hover { background: rgba(255,255,255,0.25); }
img.zoomable { cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

/* "Buy me a coffee" donation button */
.bmc-btn { display: inline-flex; align-items: center; gap: 8px; background: #ffdd00; color: #0d0c22; font-weight: 700; font-size: 0.95rem; padding: 11px 20px; border-radius: 12px; box-shadow: var(--shadow-sm); margin-top: 4px; }
.bmc-btn:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.03); box-shadow: 0 10px 26px rgba(70,90,120,0.2); }

/* ============ Button polish — consistent, subtle hover + press ============ */
.btn-ghost, .tb-btn, .icon-btn, .nav-toggle, .coffee-link, .seg-btn,
.detail-close, .slot-chip, .tab {
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease,
              border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
/* ghost / outline buttons: brighten + a 1px lift */
.btn-ghost:hover, .tb-btn:not(.primary):hover, .icon-btn:hover,
.nav-toggle:hover, .detail-close:hover {
  background: #fff; box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.btn-ghost:active, .tb-btn:active, .icon-btn:active,
.nav-toggle:active, .detail-close:active { transform: translateY(0); box-shadow: none; }
/* primary keeps its coral glow, just lifts + brightens */
.tb-btn.primary:hover { filter: brightness(1.05); transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(224,116,64,0.34); }
.tb-btn.primary:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(224,116,64,0.26); }
/* tabs were inert on hover — soft highlight for inactive ones */
.tab:hover:not(.active) { background: rgba(255,255,255,0.55); color: var(--ink); }
/* coffee is an <a>: never underline; give it the same lift */
.coffee-link { text-decoration: none; }
.coffee-link:hover { text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(224,116,64,0.30); }
.coffee-link:active { transform: translateY(0); box-shadow: none; }
/* segmented control + slot chips */
.seg-btn:hover { border-color: var(--coral); }
.slot-chip:hover:not(.sel):not(.booked) { border-color: var(--coral);
  transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* Phones: trim the form's side gutters so fields get more width. */
@media (max-width: 560px) {
  .modal-head, .modal-body, .modal-actions { padding-left: 8px; padding-right: 8px; }
  .detail-hero, .detail-rows, .detail-actions, .day-list { padding-left: 12px; padding-right: 12px; }
  .set-card { padding-left: 14px; padding-right: 14px; }

  /* Editors become a FULL-SCREEN sheet on phones: the card fills the viewport (no
     background gutter to scroll), only the body scrolls — with overscroll-behavior:
     contain so a scroll never chains to the page behind it — and the head stays
     pinned. This fixes the iOS bug where scrolling the dialog scrolled the page. */
  .modal { padding: 0; align-items: stretch; }
  .modal-card, .modal-card.wide {
    max-width: none; width: 100%; height: 100vh; height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: 0; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .modal-card .modal-head { flex: 0 0 auto; padding-top: max(18px, env(safe-area-inset-top)); }
  .modal-card .modal-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .modal-card .modal-actions { flex: 0 0 auto; padding-bottom: max(12px, env(safe-area-inset-bottom)); }

  /* The New/Edit Event form lives in the right-hand DRAWER (.detail > .detail-inner
     > .eform), not a .modal-card, so the rules above miss the MOST-used editor.
     Give it the same pinned-head / body-only-scroll / contained-scroll treatment so
     it doesn't chain-scroll the page on iOS and its Save button clears the home bar. */
  .detail.eform-open .detail-inner { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .detail.eform-open .eform { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  .detail.eform-open .eform .modal-head { flex: 0 0 auto; padding-top: max(14px, env(safe-area-inset-top)); }
  .detail.eform-open .eform .modal-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .detail.eform-open .eform .modal-actions { flex: 0 0 auto; padding-bottom: max(12px, env(safe-area-inset-bottom)); }

  /* Lock the page behind the open editor (modal OR event drawer) so it can't scroll. */
  body:has(#createModal.show), body:has(#detail.eform-open) { overflow: hidden; }
}


/* =====================================================================
   ShootCal — semantic theme variables (MERGE into the existing :root)
   ---------------------------------------------------------------------
   LIGHT values below are the EXACT colors currently hardcoded in
   style.css (or imperceptibly-close consolidations of near-duplicates).
   Adding these changes NOTHING in light mode — the substitutions swap a
   literal for its identical var(). The dark theme then overrides ONLY
   these variables (see dark-block.css).

   Existing vars reused as-is (do NOT redefine here): --sky, --sky-deep,
   --peach, --coral, --coral-deep, --ink, --ink-soft, --line, --card,
   --card-solid, --gold, --booked, --radius, --shadow, --shadow-sm.
   ===================================================================== */
:root {
  /* ---- Accent alias (many rules already use var(--accent,#c9742f)) ---- */
  --accent:            #c9742f;            /* = coral-deep-ish bronze, the fallback used everywhere */
  --on-accent:         #fff;               /* text/icon on coral / dark-fill buttons */

  /* ---- Page background layers (body + .gate) ---- */
  --page-grad-sky:     rgba(169, 198, 230, 0.55); /* body radial 1 */
  --page-grad-peach:   rgba(244, 200, 166, 0.6);  /* body radial 2 */
  --page-base-1:       #eef4fb;            /* linear start (light sky) */
  --page-base-2:       #fdf3ec;            /* linear end   (light peach) */
  --gate-grad-sky:     rgba(169,198,230,0.6);
  --gate-grad-peach:   rgba(244,200,166,0.65);

  /* ---- Surfaces ---- */
  --surface:           #fff;               /* opaque card / menu / input / button-hover surface */
  --surface-2:         rgba(255,255,255,0.7); /* translucent "glass" control surface */
  --surface-3:         rgba(255,255,255,0.6); /* lighter glass (ghost btn, header border tint) */
  --surface-faint:     rgba(0,0,0,0.03);   /* very subtle inset panel (rpt-stat, te-preview) */
  --surface-inset:     rgba(0,0,0,0.05);   /* inset tab/track bg (cm-tabs, view-seg, admin-count) */
  --switch-thumb:      #fff;               /* toggle/slider knob — stays light on dark */

  /* ---- Borders / separators ---- */
  --border-glass:      rgba(255,255,255,0.7); /* bright translucent card border */
  --border-glass-strong: rgba(255,255,255,0.8); /* brighter card/modal border */
  --hairline:          rgba(0,0,0,0.07);   /* faint fallback hairline */
  --nav-sep:           rgba(120,110,100,0.28); /* marketing nav separators */

  /* ---- Text ---- */
  --text-on-cell:      #333;               /* event chip title on grid */
  --text-faint:        #c2c7cf;            /* out-of-month day number */
  --text-muted-warm:   #9a948c;            /* warm muted (fmt-hint, task notes) */
  --swatch-default:    #888;               /* calendar swatch fallback */

  /* ---- Overlays / hovers ---- */
  --overlay-sky:       rgba(169, 198, 230, 0.08); /* calendar cell hover */
  --overlay-sky-row:   rgba(169,198,230,0.12);    /* cal-row hover */
  --overlay-dark:      rgba(0,0,0,0.04);   /* subtle dark hover */
  --overlay-coral:     rgba(236,138,92,0.12); /* light coral hover/accent fill */
  --overlay-coral-soft: rgba(236,138,92,0.07); /* lighter coral selection tint */
  --scrim:             rgba(40,52,64,0.4);   /* modal backdrop */
  --scrim-deep:        rgba(20,16,12,0.45);  /* scan backdrop */
  --scrim-photo:       rgba(20,24,30,0.9);   /* lightbox backdrop */

  /* ---- Brand gradient stops (sky -> peach tints used in heroes/headers) ---- */
  --tint-sky-hi:       rgba(169,198,230,0.28); /* selected nav/client */
  --tint-peach-hi:     rgba(244,200,166,0.3);
  --tint-sky-mid:      rgba(169,198,230,0.18); /* weekday row */
  --tint-peach-mid:    rgba(244,200,166,0.18);
  --tint-sky-hero:     rgba(169,198,230,0.2);  /* detail hero */
  --tint-peach-hero:   rgba(244,200,166,0.22);
  --tint-sky-map:      rgba(169,198,230,0.25);  /* map wrap */
  --tint-peach-map:    rgba(244,200,166,0.25);
  --tint-sky-onboard:  rgba(169,198,230,0.22);
  --tint-peach-onboard: rgba(244,200,166,0.26);

  /* ---- Calendar / availability semantics (must read on charcoal in dark) ---- */
  --cal-open-bg:       rgba(111,159,208,0.10); /* free/open slot fill */
  --cal-open-border:   rgba(111,159,208,0.25); /* free/open slot border + legend */
  --cal-booked-text:   #9a3c24;                /* booked rust text */
  --pill-gold-text:    #8a6a14;                /* gold pill / prime slot tag text */

  /* ---- Status: success / warning / danger ---- */
  --success:           #0b8043;            /* confirmed / paid text */
  --success-2:         #1c7a43;            /* av-on / req ok text */
  --success-3:         #2c8a5b;            /* drill paid text */
  --success-4:         #2e7d4f;            /* rf-msg ok text */
  --success-icon:      #2f9e63;            /* safe scan icon */
  --success-bg:        rgba(11,128,67,0.12);   /* confirmed/paid bg */
  --success-bg-2:      rgba(40,170,90,0.14);   /* av-on / req ok bg */
  --success-bg-3:      rgba(52,168,109,0.16);  /* drill paid bg */
  --success-bg-soft:   rgba(52,168,109,0.09);  /* scan-safe bg */

  --gold-text:         #9a7a00;            /* tentative status text */
  --gold-bg:           rgba(246,191,38,0.18);  /* tentative status bg */

  --danger:            #c0392b;            /* danger button / err text */
  --danger-2:          #d50000;            /* cancelled text */
  --danger-3:          #b3261e;            /* admin danger text */
  --danger-4:          #d9534f;            /* task delete hover */
  --danger-bg:         rgba(213,0,0,0.06);     /* danger hover bg */
  --danger-bg-2:       rgba(213,0,0,0.08);     /* modal-err bg */
  --danger-border:     rgba(213,0,0,0.3);      /* danger border */
  --danger-border-2:   rgba(213,0,0,0.25);     /* modal-err border */

  --warn-text:         #9a5a14;            /* availability warn text */
  --warn-bg:           rgba(220,140,40,0.12);  /* availability warn bg */
  --warn-border:       rgba(220,140,40,0.3);   /* availability warn border */
  --guess-border:      #e0a23a;            /* guessed-email amber border */
  --guess-bg:          #fff8ec;            /* guessed-email cream bg */

  /* ---- Misc ---- */
  --replied-text:      #2563a8;            /* req replied status text */
  --replied-bg:        rgba(37,99,168,0.13);   /* req replied status bg */
  --admin-badge-bg:    rgba(111,159,208,0.16); /* admin badge bg (sky) */
  --shadow-strong:     rgba(0,0,0,0.25);   /* modal / thumb drop shadow */
  --phone-bezel:       #1f2630;            /* marketing phone mockup bezel */
  --gbtn-text:         #3c4043;            /* Google sign-in button label */
}


/* =====================================================================
   ShootCal — DARK THEME overrides
   ---------------------------------------------------------------------
   macOS-style dark app (Calendar / Notes in dark mode): deep charcoal
   page, ~#2a2a2c elevated surfaces, hairline borders doing the
   separation, muted-but-recognizable coral + sky accents, desaturated
   calendar semantics that still read on charcoal.

   Dual-selector pattern so BOTH auto (OS) and explicit toggle work:
     - prefers-color-scheme: dark, UNLESS the user forced light
     - [data-theme="dark"] always wins
   The inline <head> script (see mechanism.md) sets the CONCRETE value
   on <html data-theme>, so [data-theme="dark"] is the live driver and
   the @media query is the no-JS / pre-hydration fallback.

   Almost everything is a variable override. The handful of component
   rules at the bottom are gradients / images that a single var can't
   express.
   ===================================================================== */

/* ---------- A. VARIABLE OVERRIDES ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* base brand — nudge brightness for charcoal legibility */
    --sky:        #8fb6e0;
    --sky-deep:   #7faae0;
    --peach:      #e8b48a;
    --coral:      #f0935f;   /* a touch brighter so it pops on charcoal */
    --coral-deep: #ef7d4a;

    /* text */
    --ink:        #ececee;
    --ink-soft:   #a2a2a8;

    /* core surfaces / lines (existing vars) */
    --line:       rgba(255,255,255,0.10);
    --card:       rgba(44,44,46,0.72);   /* glassy elevated, matches --surface tone */
    --card-solid: #2a2a2c;
    --gold:       #5a4a1e;   /* muted gold fill */
    --booked:     #6e3a2e;   /* desaturated rust fill */

    /* shadows — softer + darker; lean on borders like macOS */
    --shadow:     0 18px 50px rgba(0,0,0,0.45);
    --shadow-sm:  0 6px 18px rgba(0,0,0,0.4);
    --shadow-strong: rgba(0,0,0,0.55);

    /* accent alias + on-accent (text on coral stays #fff) */
    --accent:     #ef8a52;
    --on-accent:  #fff;

    /* page background — deep charcoal, faint warm-to-cool drift (muted) */
    --page-grad-sky:   rgba(60,72,92,0.30);
    --page-grad-peach: rgba(92,74,60,0.30);
    --page-base-1:     #1c1c1e;
    --page-base-2:     #232026;
    --gate-grad-sky:   rgba(60,72,92,0.35);
    --gate-grad-peach: rgba(92,74,60,0.35);

    /* surfaces */
    --surface:        #2a2a2c;   /* opaque elevated (was #fff) */
    --surface-2:      rgba(255,255,255,0.06); /* glass control (was translucent white) */
    --surface-3:      rgba(255,255,255,0.05);
    --surface-faint:  rgba(255,255,255,0.035);
    --surface-inset:  rgba(0,0,0,0.25);
    --switch-thumb:   #ececee;   /* knob: bright but not pure white */

    /* borders */
    --border-glass:        rgba(255,255,255,0.10);
    --border-glass-strong: rgba(255,255,255,0.16);
    --hairline:            rgba(255,255,255,0.10);
    --nav-sep:            rgba(255,255,255,0.14);

    /* text shades */
    --text-on-cell:    #d6d6da;
    --text-faint:      #6e6e74;
    --text-muted-warm: #9a948c;  /* already neutral; reads fine on charcoal */
    --swatch-default:  #6e6e74;
    --gbtn-text:       #ececee;

    /* overlays / hovers */
    --overlay-sky:        rgba(143,182,224,0.10);
    --overlay-sky-row:    rgba(143,182,224,0.14);
    --overlay-dark:       rgba(255,255,255,0.06);
    --overlay-coral:      rgba(240,147,95,0.16);
    --overlay-coral-soft: rgba(240,147,95,0.12);
    --scrim:        rgba(0,0,0,0.6);
    --scrim-deep:   rgba(0,0,0,0.66);
    --scrim-photo:  rgba(0,0,0,0.92);
    --cell-other-bg: rgba(255,255,255,0.02);

    /* brand tint gradients (heroes / headers) — dim + slightly cooler */
    --tint-sky-hi:        rgba(143,182,224,0.16);
    --tint-peach-hi:      rgba(232,180,138,0.14);
    --tint-sky-mid:       rgba(143,182,224,0.10);
    --tint-peach-mid:     rgba(232,180,138,0.08);
    --tint-sky-hero:      rgba(143,182,224,0.12);
    --tint-peach-hero:    rgba(232,180,138,0.10);
    --tint-sky-map:       rgba(143,182,224,0.14);
    --tint-peach-map:     rgba(232,180,138,0.12);
    --tint-sky-onboard:   rgba(143,182,224,0.14);
    --tint-peach-onboard: rgba(232,180,138,0.12);

    /* calendar / availability semantics — desaturated, charcoal-legible */
    --cal-open-bg:      rgba(127,170,224,0.14);
    --cal-open-border:  rgba(127,170,224,0.34);
    --cal-booked-text:  #e6a18c;   /* lightened rust for dark */
    --pill-gold-text:   #e0c071;   /* lightened gold text */

    /* status — desaturated text, low-alpha fills (alpha works on dark) */
    --success:        #4cc38a;
    --success-2:      #4cc38a;
    --success-3:      #4cc38a;
    --success-4:      #4cc38a;
    --success-icon:   #4cc38a;
    --success-bg:     rgba(52,199,138,0.16);
    --success-bg-2:   rgba(52,199,138,0.16);
    --success-bg-3:   rgba(52,199,138,0.18);
    --success-bg-soft: rgba(52,199,138,0.10);

    --gold-text:      #e0c071;
    --gold-bg:        rgba(224,192,113,0.16);

    --danger:         #ff6b5e;
    --danger-2:       #ff6b5e;
    --danger-3:       #ff6b5e;
    --danger-4:       #ff6b5e;
    --danger-bg:      rgba(255,107,94,0.12);
    --danger-bg-2:    rgba(255,107,94,0.09);  /* lowered from .12 so .modal-err text (#ff6b5e) clears AA 4.5:1 against its own fill on the modal surface */
    --danger-border:  rgba(255,107,94,0.34);
    --danger-border-2: rgba(255,107,94,0.30);
    --danger-3-border: rgba(255,107,94,0.34);

    --warn-text:      #e6a35a;
    --warn-bg:        rgba(220,140,40,0.16);
    --warn-border:    rgba(220,140,40,0.36);
    --guess-border:   #c79a3a;
    --guess-bg:       rgba(199,154,58,0.14);

    --replied-text:   #6fa8e6;
    --replied-bg:     rgba(111,168,230,0.16);
    --admin-badge-bg: rgba(127,170,224,0.18);

    --task-del:       #8a847c;
    --phone-bezel:    #0d0d0f;
  }
}

:root[data-theme="dark"] {
  --sky:        #8fb6e0;
  --sky-deep:   #7faae0;
  --peach:      #e8b48a;
  --coral:      #f0935f;
  --coral-deep: #ef7d4a;

  --ink:        #ececee;
  --ink-soft:   #a2a2a8;

  --line:       rgba(255,255,255,0.10);
  --card:       rgba(44,44,46,0.72);
  --card-solid: #2a2a2c;
  --gold:       #5a4a1e;
  --booked:     #6e3a2e;

  --shadow:     0 18px 50px rgba(0,0,0,0.45);
  --shadow-sm:  0 6px 18px rgba(0,0,0,0.4);
  --shadow-strong: rgba(0,0,0,0.55);

  --accent:     #ef8a52;
  --on-accent:  #fff;

  --page-grad-sky:   rgba(60,72,92,0.30);
  --page-grad-peach: rgba(92,74,60,0.30);
  --page-base-1:     #1c1c1e;
  --page-base-2:     #232026;
  --gate-grad-sky:   rgba(60,72,92,0.35);
  --gate-grad-peach: rgba(92,74,60,0.35);

  --surface:        #2a2a2c;
  --surface-2:      rgba(255,255,255,0.06);
  --surface-3:      rgba(255,255,255,0.05);
  --surface-faint:  rgba(255,255,255,0.035);
  --surface-inset:  rgba(0,0,0,0.25);
  --switch-thumb:   #ececee;

  --border-glass:        rgba(255,255,255,0.10);
  --border-glass-strong: rgba(255,255,255,0.16);
  --hairline:            rgba(255,255,255,0.10);
  --nav-sep:            rgba(255,255,255,0.14);

  --text-on-cell:    #d6d6da;
  --text-faint:      #6e6e74;
  --text-muted-warm: #9a948c;
  --swatch-default:  #6e6e74;
  --gbtn-text:       #ececee;

  --overlay-sky:        rgba(143,182,224,0.10);
  --overlay-sky-row:    rgba(143,182,224,0.14);
  --overlay-dark:       rgba(255,255,255,0.06);
  --overlay-coral:      rgba(240,147,95,0.16);
  --overlay-coral-soft: rgba(240,147,95,0.12);
  --scrim:        rgba(0,0,0,0.6);
  --scrim-deep:   rgba(0,0,0,0.66);
  --scrim-photo:  rgba(0,0,0,0.92);
  --cell-other-bg: rgba(255,255,255,0.02);

  --tint-sky-hi:        rgba(143,182,224,0.16);
  --tint-peach-hi:      rgba(232,180,138,0.14);
  --tint-sky-mid:       rgba(143,182,224,0.10);
  --tint-peach-mid:     rgba(232,180,138,0.08);
  --tint-sky-hero:      rgba(143,182,224,0.12);
  --tint-peach-hero:    rgba(232,180,138,0.10);
  --tint-sky-map:       rgba(143,182,224,0.14);
  --tint-peach-map:     rgba(232,180,138,0.12);
  --tint-sky-onboard:   rgba(143,182,224,0.14);
  --tint-peach-onboard: rgba(232,180,138,0.12);

  --cal-open-bg:      rgba(127,170,224,0.14);
  --cal-open-border:  rgba(127,170,224,0.34);
  --cal-booked-text:  #e6a18c;
  --pill-gold-text:   #e0c071;

  --success:        #4cc38a;
  --success-2:      #4cc38a;
  --success-3:      #4cc38a;
  --success-4:      #4cc38a;
  --success-icon:   #4cc38a;
  --success-bg:     rgba(52,199,138,0.16);
  --success-bg-2:   rgba(52,199,138,0.16);
  --success-bg-3:   rgba(52,199,138,0.18);
  --success-bg-soft: rgba(52,199,138,0.10);

  --gold-text:      #e0c071;
  --gold-bg:        rgba(224,192,113,0.16);

  --danger:         #ff6b5e;
  --danger-2:       #ff6b5e;
  --danger-3:       #ff6b5e;
  --danger-4:       #ff6b5e;
  --danger-bg:      rgba(255,107,94,0.12);
  --danger-bg-2:    rgba(255,107,94,0.09);  /* lowered from .12 so .modal-err text (#ff6b5e) clears AA 4.5:1 against its own fill on the modal surface */
  --danger-border:  rgba(255,107,94,0.34);
  --danger-border-2: rgba(255,107,94,0.30);
  --danger-3-border: rgba(255,107,94,0.34);

  --warn-text:      #e6a35a;
  --warn-bg:        rgba(220,140,40,0.16);
  --warn-border:    rgba(220,140,40,0.36);
  --guess-border:   #c79a3a;
  --guess-bg:       rgba(199,154,58,0.14);

  --replied-text:   #6fa8e6;
  --replied-bg:     rgba(111,168,230,0.16);
  --admin-badge-bg: rgba(127,170,224,0.18);

  --task-del:       #8a847c;
  --phone-bezel:    #0d0d0f;
}

/* ---------- B. COMPONENT-LEVEL DARK RULES ----------
   Cases a single variable swap can't reach: hardcoded #fff surfaces /
   translucent-white fills that were NOT variable-ized (left literal in
   the substitution pass to avoid churn), plus the few literal gradients
   on marketing surfaces. All use the same dual-selector pattern.
   ------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;   /* native form controls, scrollbars, date pickers go dark */
  }
}
:root[data-theme="dark"] { color-scheme: dark; }

/* The dark rules below are duplicated under both gating selectors via the
   :where() group so each component rule is written once. NOTE: if your
   build can't guarantee :where() support, expand these into the two
   explicit selectors like the variable blocks above. */

:where(:root[data-theme="dark"], :root:not([data-theme="light"])) {
}

/* --- Opaque #fff surfaces that stayed literal -> charcoal elevated --- */
:root[data-theme="dark"] .gbtn,
:root[data-theme="dark"] .scan-range select,
:root[data-theme="dark"] .scan-f,
:root[data-theme="dark"] .cm-fmenu,
:root[data-theme="dark"] .day-row,
:root[data-theme="dark"] .fmt-btn,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .review-form input,
:root[data-theme="dark"] .review-form textarea,
:root[data-theme="dark"] .cm-fu-add input,
:root[data-theme="dark"] .bug-modal textarea,
:root[data-theme="dark"] .mp-card,
:root[data-theme="dark"] .mb-url,
:root[data-theme="dark"] .mk-grid .cell,
:root[data-theme="dark"] .task-check {
  background: var(--surface);
}

/* App Store-style pills (nav "Open web app", hero "Download on the App Store")
   and the selected segment use `background: var(--ink)`, which flips to a near-
   white in dark mode while the text stayed `#fff` -> white-on-white. The bg is
   already light, so just flip the TEXT dark; they read as light "white badge"
   pills (the Apple convention on dark). The Apple glyph uses currentColor, so it
   darkens too. (2026-06-26) */
:root[data-theme="dark"] .appstore-mini,
:root[data-theme="dark"] .appstore-btn,
:root[data-theme="dark"] .seg-btn.sel {
  color: #1c1c1e !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gbtn,
  :root:not([data-theme="light"]) .scan-range select,
  :root:not([data-theme="light"]) .scan-f,
  :root:not([data-theme="light"]) .cm-fmenu,
  :root:not([data-theme="light"]) .day-row,
  :root:not([data-theme="light"]) .fmt-btn,
  :root:not([data-theme="light"]) .field input,
  :root:not([data-theme="light"]) .field select,
  :root:not([data-theme="light"]) .field textarea,
  :root:not([data-theme="light"]) .review-form input,
  :root:not([data-theme="light"]) .review-form textarea,
  :root:not([data-theme="light"]) .cm-fu-add input,
  :root:not([data-theme="light"]) .bug-modal textarea,
  :root:not([data-theme="light"]) .mp-card,
  :root:not([data-theme="light"]) .mb-url,
  :root:not([data-theme="light"]) .mk-grid .cell,
  :root:not([data-theme="light"]) .task-check {
    background: var(--surface);
  }
}

/* --- #fff button-HOVER surfaces -> a lighter elevated step --- */
:root[data-theme="dark"] .btn-ghost:hover,
:root[data-theme="dark"] .nav-toggle:hover,
:root[data-theme="dark"] .tb-btn:hover,
:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] .detail-close:hover,
:root[data-theme="dark"] .detail-back:hover,
:root[data-theme="dark"] .detail-actions button:hover,
:root[data-theme="dark"] .btn-ghost:hover,
:root[data-theme="dark"] .tb-btn:not(.primary):hover {
  background: #3a3a3c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-ghost:hover,
  :root:not([data-theme="light"]) .nav-toggle:hover,
  :root:not([data-theme="light"]) .tb-btn:hover,
  :root:not([data-theme="light"]) .icon-btn:hover,
  :root:not([data-theme="light"]) .detail-close:hover,
  :root:not([data-theme="light"]) .detail-back:hover,
  :root:not([data-theme="light"]) .detail-actions button:hover,
  :root:not([data-theme="light"]) .tb-btn:not(.primary):hover {
    background: #3a3a3c;
  }
}

/* Resting hamburger toggle: its base bg is a light rgba-white that wasn't
   overridden, so it read white over the translucent header in dark mode. */
:root[data-theme="dark"] .nav-toggle { background: var(--surface-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-toggle { background: var(--surface-3); }
}

/* More resting light surfaces that lacked a dark override — the white-in-dark
   bug class (day-detail back button + action/close buttons, modal cancel, slot
   chips, the active tab). The head script sets a concrete data-theme before
   paint, so the forced-dark selector alone covers auto-dark too. `:not(.primary)`
   / `:not(.sel)` protect the coral accent + selected states from being flattened. */
:root[data-theme="dark"] .detail-back { background: var(--surface-3); border-color: var(--line); }
:root[data-theme="dark"] .detail-actions a:not(.primary),
:root[data-theme="dark"] .detail-actions button:not(.primary),
:root[data-theme="dark"] .detail-close,
:root[data-theme="dark"] .modal-actions .cancel,
:root[data-theme="dark"] .slot-chip:not(.sel) {
  background: var(--surface-3);
}
:root[data-theme="dark"] .tab.active { background: var(--surface-2); box-shadow: none; }

/* --- toggle / slider knob: bright knob on dark track --- */
:root[data-theme="dark"] input[type="checkbox"].switch::after,
:root[data-theme="dark"] .bk-check input[type="checkbox"]::after,
:root[data-theme="dark"] input[type=range].ctl::-webkit-slider-thumb,
:root[data-theme="dark"] input[type=range].ctl::-moz-range-thumb,
:root[data-theme="dark"] input[type="checkbox"].switch {
  /* off-state track was #d2d6dd; bring it to a dark control track */
}
:root[data-theme="dark"] input[type="checkbox"].switch,
:root[data-theme="dark"] .bk-check input[type="checkbox"] { background: #48484a; }
:root[data-theme="dark"] input[type="checkbox"].switch::after,
:root[data-theme="dark"] .bk-check input[type="checkbox"]::after,
:root[data-theme="dark"] input[type=range].ctl::-webkit-slider-thumb,
:root[data-theme="dark"] input[type=range].ctl::-moz-range-thumb { background: var(--switch-thumb); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type="checkbox"].switch,
  :root:not([data-theme="light"]) .bk-check input[type="checkbox"] { background: #48484a; }
  :root:not([data-theme="light"]) input[type="checkbox"].switch::after,
  :root:not([data-theme="light"]) .bk-check input[type="checkbox"]::after,
  :root:not([data-theme="light"]) input[type=range].ctl::-webkit-slider-thumb,
  :root:not([data-theme="light"]) input[type=range].ctl::-moz-range-thumb { background: var(--switch-thumb); }
}

/* --- translucent-white control surfaces (.surface-2/.surface-3 weren't
       applied to every literal). Catch the remaining literal ones. --- */
:root[data-theme="dark"] .tabs,
:root[data-theme="dark"] .app-header.nav-open .tab.active,
:root[data-theme="dark"] .tab:hover:not(.active),
:root[data-theme="dark"] .mp-mini,
:root[data-theme="dark"] .final-cta { background: rgba(255,255,255,0.05); }
:root[data-theme="dark"] .beta-tag,
:root[data-theme="dark"] .slot-chip.sel .slot-tag { background: rgba(255,255,255,0.18); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tabs,
  :root:not([data-theme="light"]) .app-header.nav-open .tab.active,
  :root:not([data-theme="light"]) .tab:hover:not(.active),
  :root:not([data-theme="light"]) .mp-mini,
  :root:not([data-theme="light"]) .final-cta { background: rgba(255,255,255,0.05); }
  :root:not([data-theme="light"]) .beta-tag,
  :root:not([data-theme="light"]) .slot-chip.sel .slot-tag { background: rgba(255,255,255,0.18); }
}

/* --- marketing browser-frame chrome (warm beige -> dark bar) --- */
:root[data-theme="dark"] .mb-bar { background: #3a3a3c; }
:root[data-theme="dark"] .final-cta { border-top-color: var(--border-glass); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mb-bar { background: #3a3a3c; }
  :root:not([data-theme="light"]) .final-cta { border-top-color: var(--border-glass); }
}

/* --- format-button warm hover/preview (cream -> dark) --- */
:root[data-theme="dark"] .fmt-btn:hover { background: #3a3a3c; }
:root[data-theme="dark"] .fmt-preview { background: rgba(255,255,255,0.04); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fmt-btn:hover { background: #3a3a3c; }
  :root:not([data-theme="light"]) .fmt-preview { background: rgba(255,255,255,0.04); }
}

/* --- select-chevron data-URI stroke (#7a8694) is fine on dark; bump it
       a touch for contrast on charcoal inputs. --- */
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] select.client-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a2a2a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  /* The dark `background: var(--surface)` shorthand above reset bg-repeat to
     repeat, which tiled the chevron — re-assert no-repeat + position. */
  background-repeat: no-repeat; background-position: right 15px center;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field select,
  :root:not([data-theme="light"]) select.client-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a2a2a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center;
  }
}

/* =====================================================================
   C. GAP-CLOSING COMPONENT RULES (added by the fix pass)
   ---------------------------------------------------------------------
   Several variable families are dark-overridden above but the literals
   they target were NOT swapped by substitutions.json (ambiguous values
   like rgba(255,255,255,0.7) are unsafe to globally substitute). These
   rules reach the specific resting/hover/scrim surfaces and route them
   to the already-dark vars. ALL dark-only (dual selector), so light is
   byte-identical. Each block lists the style.css line(s) it targets.
   ===================================================================== */

/* --- C1. Resting control SURFACES (literal translucent-white bg).
       ONLY the bg is routed here. Borders already darken via
       `border: 1px solid var(--line)` (--line is dark-overridden), so no
       border rule is needed — and adding one would risk clobbering the
       transparent/custom borders on .primary/.sel/.danger variants.
       Resting targets:
         .client-search(296) .tb-btn(428) .slot-chip(853) .cm-filterbtn(196)
         .icon-btn(509) .modal-actions .cancel(842)  -> --surface-2
         .btn-ghost(252, the lighter 0.6 glass)       -> --surface-3
       SPECIFICITY GUARD: `:root[data-theme="dark"] .tb-btn` outscores the
       single-class modifiers, so the variants that set their OWN bg must
       be excluded or they'd be flooded with --surface-2:
         .tb-btn.primary(433 gradient) .tb-btn.muted(435 transparent)
         .slot-chip.sel(855 gradient)  .slot-chip.booked(858 own dark bg)
       (.tb-btn.danger / .slot-chip.prime/.wd set no bg -> fine to inherit.)
       NOTE: .seg-btn(959) already uses var(--card-solid)+var(--line) and is
       fully covered by the variable overrides — intentionally NOT listed. --- */
:root[data-theme="dark"] .client-search,
:root[data-theme="dark"] .tb-btn:not(.primary):not(.muted),
:root[data-theme="dark"] .slot-chip:not(.sel):not(.booked),
:root[data-theme="dark"] .cm-filterbtn,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .modal-actions .cancel { background: var(--surface-2); }
:root[data-theme="dark"] .btn-ghost { background: var(--surface-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .client-search,
  :root:not([data-theme="light"]) .tb-btn:not(.primary):not(.muted),
  :root:not([data-theme="light"]) .slot-chip:not(.sel):not(.booked),
  :root:not([data-theme="light"]) .cm-filterbtn,
  :root:not([data-theme="light"]) .icon-btn,
  :root:not([data-theme="light"]) .modal-actions .cancel { background: var(--surface-2); }
  :root:not([data-theme="light"]) .btn-ghost { background: var(--surface-3); }
}

/* --- C2. Inset panels / tracks (literal rgba(0,0,0,0.03)/0.05).
       FAINT (0.03): .rpt-stat(321) .te-preview(996) .req-notes(1022)
       -> --surface-faint.
       INSET (0.05): .cm-tabs(311) .view-seg(468) .bk-bo-item(963)
       .admin-count(1325) .feature code(1369) -> --surface-inset. --- */
:root[data-theme="dark"] .rpt-stat,
:root[data-theme="dark"] .te-preview,
:root[data-theme="dark"] .req-notes { background: var(--surface-faint); }
:root[data-theme="dark"] .cm-tabs,
:root[data-theme="dark"] .view-seg,
:root[data-theme="dark"] .bk-bo-item,
:root[data-theme="dark"] .admin-count,
:root[data-theme="dark"] .feature code { background: var(--surface-inset); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rpt-stat,
  :root:not([data-theme="light"]) .te-preview,
  :root:not([data-theme="light"]) .req-notes { background: var(--surface-faint); }
  :root:not([data-theme="light"]) .cm-tabs,
  :root:not([data-theme="light"]) .view-seg,
  :root:not([data-theme="light"]) .bk-bo-item,
  :root:not([data-theme="light"]) .admin-count,
  :root:not([data-theme="light"]) .feature code { background: var(--surface-inset); }
}

/* --- C3. Hovers / selection tints / hairlines (need to show on charcoal).
       --overlay-dark (rgba(0,0,0,0.04) -> rgba(255,255,255,0.06) in dark):
         .cm-navitem:hover(344) .cm-client:hover(351) .tb-btn.muted:hover(436)
         .ag-date:hover(479) .set-tab:hover(980)
       --overlay-sky:    .cell:hover(573)
       --overlay-sky-row:.cal-row:hover(448)
       --overlay-coral-soft (selection): .rpt-list li.rpt-click:hover &
         .rpt-bar-row.rpt-click:hover(135) .ag-day.sel(477) .cell.sel(576)
       --overlay-coral (coral hover fill): .scan-linkbtn:hover(115)
         .btn-ghost?/cm? (262) .places-dd .pl-item:hover/.active(305)
       NOTE: --hairline literals in style.css are written
       `var(--line, rgba(0,0,0,0.07))` (116,137), so they already resolve
       to the dark --line; no extra rule needed for those. --- */
:root[data-theme="dark"] .cm-navitem:hover,
:root[data-theme="dark"] .cm-client:hover,
:root[data-theme="dark"] .tb-btn.muted:hover,
:root[data-theme="dark"] .ag-date:hover,
:root[data-theme="dark"] .set-tab:hover,
:root[data-theme="dark"] .slot-chip.booked { background: var(--overlay-dark); }
:root[data-theme="dark"] .cell:hover { background: var(--overlay-sky); }
:root[data-theme="dark"] .cal-row:hover { background: var(--overlay-sky-row); }
:root[data-theme="dark"] .rpt-list li.rpt-click:hover,
:root[data-theme="dark"] .rpt-bar-row.rpt-click:hover,
:root[data-theme="dark"] .ag-day.sel,
:root[data-theme="dark"] .cell.sel { background: var(--overlay-coral-soft); }
:root[data-theme="dark"] .scan-linkbtn:hover,
:root[data-theme="dark"] .places-dd .pl-item:hover,
:root[data-theme="dark"] .places-dd .pl-item.active { background: var(--overlay-coral); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm-navitem:hover,
  :root:not([data-theme="light"]) .cm-client:hover,
  :root:not([data-theme="light"]) .tb-btn.muted:hover,
  :root:not([data-theme="light"]) .ag-date:hover,
  :root:not([data-theme="light"]) .set-tab:hover,
  :root:not([data-theme="light"]) .slot-chip.booked { background: var(--overlay-dark); }
  :root:not([data-theme="light"]) .cell:hover { background: var(--overlay-sky); }
  :root:not([data-theme="light"]) .cal-row:hover { background: var(--overlay-sky-row); }
  :root:not([data-theme="light"]) .rpt-list li.rpt-click:hover,
  :root:not([data-theme="light"]) .rpt-bar-row.rpt-click:hover,
  :root:not([data-theme="light"]) .ag-day.sel,
  :root:not([data-theme="light"]) .cell.sel { background: var(--overlay-coral-soft); }
  :root:not([data-theme="light"]) .scan-linkbtn:hover,
  :root:not([data-theme="light"]) .places-dd .pl-item:hover,
  :root:not([data-theme="light"]) .places-dd .pl-item.active { background: var(--overlay-coral); }
}

/* --- C4. Modal / scan / lightbox SCRIMS (literal cool/warm scrims that
       are too light to darken the charcoal page behind a modal).
       .modal-backdrop(678 rgba(40,52,64,0.4)) -> --scrim
       .scan-backdrop(107 rgba(20,16,12,0.45)) -> --scrim-deep
       .lightbox(1425 rgba(20,24,30,0.9))      -> --scrim-photo --- */
:root[data-theme="dark"] .modal-backdrop { background: var(--scrim); }
:root[data-theme="dark"] .scan-backdrop { background: var(--scrim-deep); }
:root[data-theme="dark"] .lightbox { background: var(--scrim-photo); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modal-backdrop { background: var(--scrim); }
  :root:not([data-theme="light"]) .scan-backdrop { background: var(--scrim-deep); }
  :root:not([data-theme="light"]) .lightbox { background: var(--scrim-photo); }
}

/* --- C5. Danger family (#c0392b text x4 + the modal-err / detail-danger
       bgs & borders). #c0392b is 4.6:1 on light but only ~3.0:1 on the
       charcoal page; route to --danger (#ff6b5e, 5.96:1 on #1c1c1e).
       .tb-btn.muted.danger(363 color)
       .detail-actions button.danger(674 color + border rgba(213,0,0,0.3))
       .rf-msg.err(804 color)
       .modal-err(838 color + bg rgba(213,0,0,0.08) + border rgba(213,0,0,0.25))
       .badge-status.cancelled(661 bg — light literal kept by sub #17). --- */
:root[data-theme="dark"] .tb-btn.muted.danger,
:root[data-theme="dark"] .rf-msg.err,
:root[data-theme="dark"] .modal-err { color: var(--danger); }
:root[data-theme="dark"] .detail-actions button.danger {
  color: var(--danger); border-color: var(--danger-border);
}
:root[data-theme="dark"] .modal-err {
  background: var(--danger-bg-2); border-color: var(--danger-border-2);
}
:root[data-theme="dark"] .badge-status.cancelled { background: var(--danger-bg-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tb-btn.muted.danger,
  :root:not([data-theme="light"]) .rf-msg.err,
  :root:not([data-theme="light"]) .modal-err { color: var(--danger); }
  :root:not([data-theme="light"]) .detail-actions button.danger {
    color: var(--danger); border-color: var(--danger-border);
  }
  :root:not([data-theme="light"]) .modal-err {
    background: var(--danger-bg-2); border-color: var(--danger-border-2);
  }
  :root:not([data-theme="light"]) .badge-status.cancelled { background: var(--danger-bg-2); }
}

/* --- BMC button keeps its branded yellow (#ffdd00 / #0d0c22 text) in
       BOTH themes — intentionally NOT overridden (brand asset). --- */


/* =====================================================================
   ShootCal — DARK THEME image / asset filters
   ---------------------------------------------------------------------
   For elements where recoloring via CSS variables is impractical:
   raster screenshots, the colorful app icon, and embedded iframes.
   Same dual dark-selector pattern (auto + explicit). Each rule is
   annotated with WHY it needs a filter rather than a variable.
   Keep this conservative — over-filtering looks worse than leaving
   an asset bright. Only the genuinely-jarring cases are here.
   ===================================================================== */

/* --- Marketing screenshots: shot on a LIGHT app, so on a dark page the
       white frames glare. Dim + a hair less contrast so they sit on the
       charcoal instead of punching a hole in it. Borders/cards around
       them already darken via --border-glass / --card-solid. --- */
:root[data-theme="dark"] .hero-shot,
:root[data-theme="dark"] .shot-card img,
:root[data-theme="dark"] .spotlight .sp-art img,
:root[data-theme="dark"] .native-mac img,
:root[data-theme="dark"] .native-phone img,
:root[data-theme="dark"] .mock-browser img {
  filter: brightness(0.92) contrast(0.98);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-shot,
  :root:not([data-theme="light"]) .shot-card img,
  :root:not([data-theme="light"]) .spotlight .sp-art img,
  :root:not([data-theme="light"]) .native-mac img,
  :root:not([data-theme="light"]) .native-phone img,
  :root:not([data-theme="light"]) .mock-browser img {
    filter: brightness(0.92) contrast(0.98);
  }
}
/* NOTE: .native-mac img / .native-phone img already carry a drop-shadow()
   filter in style.css. The dark override above REPLACES that filter, so the
   screenshot drop-shadow is intentionally dropped in dark (the charcoal page
   makes the soft cool shadow invisible anyway). If you want to keep it,
   chain both: filter: drop-shadow(0 18px 44px rgba(0,0,0,0.5)) brightness(.92); */

/* --- App icon / logos: the brand aperture+calendar icon is a colored,
       glassy asset designed to sit on a light card. On dark it reads fine
       as-is (it has its own depth), so DON'T invert or hue-rotate — that
       would wreck the brand color. Left untouched on purpose.
       If a specific mono/line logo ever looks too dark, add it here with
       a brightness bump, e.g.:
   :root[data-theme="dark"] .logo-mono { filter: brightness(1.6); }
   --- */

/* --- Embedded availability iframe (booking calendar): it is the SAME web
       app and will pick up the theme itself once this CSS ships there, so
       NO filter — filtering an iframe that already themes itself would
       double-darken it. Listed here only to document the deliberate skip. --- */
/* (no rule) .embed-wrap iframe, .bc-preview iframe — self-theming */

/* --- Google "G" SVG inside .gbtn: it's a multi-color brand mark; per
       Google brand rules it must stay full-color on any background. The
       button surface goes dark (see dark-block.css) which gives enough
       contrast. No filter. --- */


/* ---- Dark overrides for the /compare/ page's inline-styled table ---- */
:root[data-theme="dark"] table.cmp { background: var(--card-solid); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] table.cmp th, :root[data-theme="dark"] table.cmp td { border-bottom-color: var(--line); }
:root[data-theme="dark"] table.cmp thead th { background: rgba(255,255,255,0.05); }
:root[data-theme="dark"] table.cmp th.sc, :root[data-theme="dark"] table.cmp td.sc { background: rgba(224,116,64,0.12); }
:root[data-theme="dark"] table.cmp tbody th { color: var(--ink); }
:root[data-theme="dark"] table.cmp .yes { color: var(--success); }
:root[data-theme="dark"] table.cmp .no { color: var(--text-faint); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) table.cmp { background: var(--card-solid); box-shadow: var(--shadow-sm); }
  :root:not([data-theme="light"]) table.cmp th, :root:not([data-theme="light"]) table.cmp td { border-bottom-color: var(--line); }
  :root:not([data-theme="light"]) table.cmp thead th { background: rgba(255,255,255,0.05); }
  :root:not([data-theme="light"]) table.cmp th.sc, :root:not([data-theme="light"]) table.cmp td.sc { background: rgba(224,116,64,0.12); }
  :root:not([data-theme="light"]) table.cmp tbody th { color: var(--ink); }
  :root:not([data-theme="light"]) table.cmp .yes { color: var(--success); }
  :root:not([data-theme="light"]) table.cmp .no { color: var(--text-faint); }
}

/* Settings logo upload */
.logo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.logo-prev { width: 170px; height: 84px; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); overflow: hidden; flex-shrink: 0; }
.logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-empty { font-size: .8rem; color: var(--ink-soft); }
.logo-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-msg { font-size: .82rem; color: var(--ink-soft); }
.logo-pick { display: inline-flex; align-items: center; }