/* ShootCal Web — shared styles
   Brand: glassy sunset, sky-blue -> peach, soft calendar grid. */
@import url("/assets/css/shootcal-ui.css?v=e3e2b86639");   /* canonical shared component shells (buttons, checkbox, …) */

:root {
  --sky:        #a9c6e6;
  --sky-deep:   #6f9fd0;
  --peach:      #f4c8a6;
  --coral:      #ec8a5c;
  --coral-deep: #bf5324;  /* WCAG-AA: 4.69:1 on white (was #e07440 @ 3.1:1). */
  --ink:        #2b3440;
  --ink-soft:   #4a5568;
  --line:       #e6e2dd;
  --card:       rgba(255, 255, 255, 0.72);
  --card-solid: #ffffff;
  --gold:       #fce3a8;
  --booked:     #f6b9a3;
  --radius:     18px;
  /* Spacing + radius scale for future use (additive — existing values are NOT
     migrated to these yet). */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --radius-sm: 11px; --radius-lg: 26px;
  --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; }

/* Button-styled links must read as solid buttons — never underline, in any
   state. The base a:hover underline above leaks onto these otherwise. Card-style
   links (.feature, .wave-card) get the same treatment so the whole tile stays clean. */
.gbtn, .appstore-btn, .appstore-mini, .mk-fb, .mk-demo-link, a.feature, .footer-cta,
.gbtn:hover, .appstore-btn:hover, .appstore-mini:hover, .mk-fb:hover, .mk-demo-link:hover, a.feature:hover,
.gbtn:focus, .appstore-btn:focus, .appstore-mini:focus, .mk-fb:focus, .mk-demo-link:focus, a.feature:focus { text-decoration: none; }

/* Keyboard accessibility: a single accent focus ring for every interactive
   element. :focus-visible only paints on keyboard focus, so mouse/touch users
   see nothing change. The CTA rule above strips text-decoration (not outline),
   so these still get the ring. Mirrors the remaining scan and switch rings at
   the global level. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:not(.sc-mui-native-input):focus-visible,
select:not(.sc-mui-native-input):focus-visible,
textarea:not(.sc-mui-native-input):focus-visible {
  outline: 2px solid var(--accent, var(--coral-deep));
  outline-offset: 2px;
}

.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; }
/* Canonical in-app buttons (.btn / .ct-btn) live in shootcal-ui.css, the
   shared component layer (@imported at the top). Marketing / landing CTAs
   use the glassy .gbtn family above. */

.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: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 36px; text-align: left; }
.features .feature { flex: 0 1 calc((100% - 36px) / 3); min-width: 0; }
/* Group heading inside the full feature list (homepage + walkthrough intros). */
.feat-group { text-align: left; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 44px 0 18px; color: var(--ink-soft); font-weight: 800; max-width: 1080px; }
.feat-group:first-of-type { margin-top: 6px; }
.feature {
  /* Shared card geometry (shootcal-ui.css tokens); border tint stays ours. */
  background: var(--card-solid);
  border: 1px solid rgba(230,226,221,0.65);
  border-radius: var(--sc-card-radius); padding: var(--sc-card-pad);
  box-shadow: var(--sc-card-shadow);
}
.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; }
/* Feature cards that link out to a detail page: keep the tile look, lift on hover,
   and let the inline "feat-link" read as the clickable cue (no underline on the card). */
a.feature { display: block; color: inherit; transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
a.feature h3 { color: var(--ink); }
a.feature:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(20,25,32,0.05), 0 14px 32px rgba(20,25,32,0.10); border-color: rgba(224,116,64,0.4); }
.feature .feat-link { color: var(--coral-deep); font-weight: 600; white-space: nowrap; }
a.feature:hover .feat-link { text-decoration: underline; }
.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; line-height: 2.1; }
.landing-footer span { font-weight: 700; }
/* Dot-separated footer links: inline-block + padding gives comfortable taps on
   mobile (the literal " · " separators stay between them). Direct children only,
   so the community-paragraph link above is untouched. */
.landing-footer > a { display: inline-block; padding: 4px 8px; }
.footer-community { margin: 0 auto 14px; max-width: 560px; }
.footer-logo { display: block; width: 140px; height: 140px; margin: 0 auto 18px; border-radius: 50%; }

/* First-run "scan for clients" nudge in the empty client list. */
/* 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; }

/* 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; }
/* 3 columns desktop, 2 on tablet/iPad, 1 on phones */
@media (max-width: 920px) { .features .feature { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 600px) { .features .feature { flex-basis: 100%; } }
/* Forced two-up grid (e.g. the availability "add your own" pair) */
.features.grid-2 .feature { flex-basis: calc((100% - 18px) / 2); }
@media (max-width: 600px) { .features.grid-2 .feature { flex-basis: 100%; } }

/* ============ App shell ============ */
/* The owner header, brand, menu button and phone menu (step 2) and the body,
   layout, sidebar, main and screens with their page-scroll, tablet calendar,
   short-viewport and installed-app safe-area rules (step 3) are utilities in
   public/app/index.html (Train 1 shell pass). #rproductNavigation and
   #rheaderActions keep id rules: their exact markup is pinned
   (check-react-product-navigation, check-mobile-header,
   check-react-header-actions). */
#rproductNavigation { min-width: 0; max-width: 100%; }
.workspace-sidebar-layout #rproductNavigation { height: 100%; }
#rheaderActions { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; }

/* Dedicated owner pages hide the header despite its flex layout. */
#appHeader[hidden] { display: none; }

/* Shared Motion policy, presentation only: the sidebar's selected marker and
   section tabs ease to their new state (the screen fade-in is the
   motion-safe:animate-screen-in utility on each .screen). Opacity and the
   marker only, so layout and calendar measurement are never offset. */
@media (prefers-reduced-motion: no-preference) {
  #workspaceSidebar .MuiListItemButton-root.Mui-selected::before { animation: sc-nav-mark .18s cubic-bezier(.22, 1, .36, 1) both; }
  [data-workspace-navigation] .MuiTab-root { transition: background-color .12s cubic-bezier(.22, 1, .36, 1), color .12s cubic-bezier(.22, 1, .36, 1); }
}
@keyframes sc-nav-mark { from { opacity: 0; transform: scaleY(.4); } }

/* #rcalRoot (utilities in index.html) is a column; alerts, toolbar and
   content follow DOM order and details use dialog portals. */
#calendarScreen > #rcalRoot > #content { min-width: 0; }

/* 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; min-height: 44px; box-sizing: border-box; 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); }

/* Clients & Booking and Payments contain document-style secondary pages. Let
   the browser page scroll them as one continuous surface instead of nesting a
   full-height .cm-pane scrollbar inside the fixed calendar shell. The class is
   applied only while one of those workspaces is active, so Calendar retains its
   deliberate viewport-sized grid and internal scroll behavior. */
.app-body.workspace-page-scroll .cm,
.app-body.workspace-page-scroll .cm-body {
  min-height: 0; overflow: visible;
}
.app-body.workspace-page-scroll .cm,
.app-body.workspace-page-scroll .cm-body { flex: 0 0 auto; }
.app-body.workspace-page-scroll .cm-body { align-items: flex-start; }
.app-body.workspace-page-scroll .cm-pane,
.app-body.workspace-page-scroll .cm-list { overflow: visible; }
.app-body.workspace-page-scroll .cm-pane { width: 100%; max-width: 100%; }
.app-body.workspace-page-scroll .cm-list { flex: 0 0 auto; }
.app-body.workspace-page-scroll .cm-rail { align-self: flex-start; }

/* Client Manager body is either a master-detail (Clients) or a full-width
   panel. React/MUI owns the responsive workspace navigation above it. */
/* One content width for every workspace tab (payments, clients, requests,
   booking, types, forms). The calendar keeps its own full-bleed shell. */
.cm { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; min-width: 0; width: 100%; max-width: 1272px; margin-left: auto; margin-right: auto; }
/* MUI action bar under the tabs (Clients tab only). Keeping its island host
   full-width prevents the React TextField from inheriting a legacy intrinsic
   flex width while the tabs remain fixed above it. */
.cm-actionbar { display: flex; align-items: center; gap: 10px; }
.cm-actionbar > #rclientsListActions { flex: 1 1 100%; min-width: 0; }
.cm-body { flex: 1; display: flex; gap: 16px; min-height: 0; min-width: 0; }
.cm.cm--full .cm-rail { display: none; }
/* (0,2,0) so it beats the kit's .inline-flex in rcal.css, which loads later;
   the list sits beside the detail here, and the phone rule below shows it. */
.cm .cm-back { display: none; }
.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; }
.rclients-root { display: flex; flex: 1; min-height: 0; min-width: 0; flex-direction: column; }
.cm-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.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; }
/* Matches the MUI islands' pane headings (Typography h5: 1.5rem/600, line
   1.334, in a 44px-min header row) so the instant skeleton -> island swap on
   tab switches doesn't reflow or shift the title in either axis.
   Editor/detail skeletons add .lg to match their islands' h4 (2.125rem). */
.cm-pane-head { min-height: 44px; }
.cm-pane-head h2 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.006em; line-height: 1.334; }
.cm-pane-head.lg h2 { font-size: 2.125rem; letter-spacing: -0.01em; }
.cm-pane-empty { color: var(--ink-soft); padding: 60px 20px; text-align: center; }
#cmRequestsContent { min-height: 0; }
@media (max-width: 720px) {
  .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 */
  /* 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 + 6 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. */
/* (1051-1280px two-row block removed: the base header is a stacked layout above the shared 720px mobile breakpoint.) */

/* Mobile header (<=720px): the bar, the hamburger and the phone menu drop are
   utilities in public/app/index.html (shell pass step 2). The 58px bar text
   below never paints (the shared .sc-owner-header rule keeps the 64px bar) and
   stays only for check-mobile-header's needle; #rproductNavigation and
   #rheaderActions keep their id rules; navReveal still serves .mk-nav. */
@media (max-width: 720px) {
  .app-header { height: 58px; min-height: 58px; padding: 0 10px; flex-wrap: nowrap; justify-content: flex-start; overflow: visible; }
  .toolbar { padding-inline: 10px; }
  @keyframes navReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
  .app-header.nav-open #rproductNavigation { width: 100%; }
  .app-header.nav-open #rheaderActions { width: 100%; display: flex; justify-content: center; }
}

/* ---- 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: var(--sc-radius); 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; }
/* Primary fill/hover/active come from the shared --sc-action-primary-* tokens
   near the end of this file. Keep the sunset treatment centralized there so
   hover and active states cannot drift to another hue. */
.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.icon-only { width: 38px; padding: 0; justify-content: center; flex-shrink: 0; }
.tb-btn.icon-only .svgi { width: 0.95em; height: 0.95em; }
.nav-group [data-calendar-toolbar-action="new"] .plus { font-size: 1.1rem; line-height: 1; }
.nav-group [data-calendar-toolbar-action="calendars"] .caret { font-size: 0.7rem; opacity: 0.7; }
.nav-group [data-calendar-toolbar-action="calendars"] .cal-ico { display: none; width: 18px; height: 18px; }  /* icon only appears in the mobile toolbar (see <=1050px) */

/* 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: var(--sc-seg-track); border-radius: 10px; padding: 3px; }
.view-seg .MuiTabs-indicator { display: none; }
.view-seg .vseg { font: inherit; font-weight: 600; font-size: 0.85rem; color: var(--sc-seg-ink); 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(--sc-seg-pill-bg); color: var(--sc-seg-pill-ink); box-shadow: var(--sc-seg-pill-shadow); }
.view-seg .vseg:hover:not(.active) { color: var(--sc-seg-pill-ink); }

/* Calendar search (find an event by client name / title from loaded events) */
.cal-search-wrap { position: relative; display: inline-flex; align-items: center; }

/* Month-by-month agenda (Android/web-friendly alternative to the native scroll) */
.agenda { max-width: 1240px; width: 100%; box-sizing: border-box; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.ag-day { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ag-day.sel .ag-date { color: var(--coral-deep); }
.ag-date { align-self: flex-start; background: none; border: 0; cursor: pointer; padding: 3px 10px 3px 14px; margin-left: 0; border-radius: 7px; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); }
.ag-date:hover { background: rgba(0,0,0,0.04); }
.ag-day.today .ag-date { color: var(--coral-deep); }
.ag-list { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ag-evt { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; background: var(--card-solid); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 10px 18px; cursor: pointer; font: inherit; width: 100%; box-sizing: border-box; }
.ag-evt::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--c, var(--coral)); }
.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-name { min-width: 0; max-width: 100%; font-size: 0.95rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; min-width: 0; }
.ag-time { font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* size: text-footnote in Agenda.jsx (15 px floor on iPad) */
.ag-loc { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--ink-soft); }
.ag-loc svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: 0.7; }
.ag-loc > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.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 ---- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
/* These are real <h1> page headings (one per workspace, and only one workspace
   is visible at a time). The class owns the look, so drop the UA defaults. */
.toolbar .month-title { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
/* 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; }
/* 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); }
/* The in-month day number is a real <button> (the cell itself cannot be one —
   it holds the event chips, which are buttons). Reset the UA button styling so
   it renders identically to the plain <div> used for out-of-month days. */
.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%;
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0;
  background: none; font-family: inherit; line-height: 1; text-align: center; cursor: pointer; }
/* Focus lands on the number, but the whole cell is the target it opens, so
   show the ring on the cell — the same affordance the cell had as a button.
   The ring on the number itself is the fallback, so a browser without :has()
   still shows focus rather than nothing. */
.cell > .daynum:focus-visible { outline: 2px solid var(--sc-action-focus, rgba(236,138,92,0.75)); outline-offset: 2px; }
@supports selector(:has(*)) {
  .cell:has(> .daynum:focus-visible) { box-shadow: inset 0 0 0 2px var(--sc-action-focus, rgba(236,138,92,0.75)); }
  .cell > .daynum:focus-visible { outline: none; }
}
/* Today's number must be readable (13px/600): light = white on --coral-deep
   (4.69:1); dark = dark ink on the bright coral (7.3:1). Plain --coral + white
   was 2.5:1 / 2.3:1. */
.cell.today .daynum { background: var(--today-num-bg, var(--coral-deep)); color: var(--today-num-ink, #fff); }
.cell-evts { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Multi-event days omit their optional location line in the React projection.
   Keep each remaining time/title chip indivisible so a constrained row never
   slices through a glyph while preserving the pinned "+N more" signal. */
.cell-evts .evt {
  flex-shrink: 0; min-height: 0;
  display: flex; flex-direction: column;
  margin-top: 2px; padding-bottom: 0;
}
.cell-evts .evt > .evt-time,
.cell-evts .evt > .evt-title { flex: 0 0 auto; }
.cell-evts .evt > .evt-loc { flex: 0 0 auto; overflow: hidden; }
.cell-evts .more { flex-shrink: 0; margin-top: 2px; }
/* 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; }
/* --c-ink / --c-ink-soft are chosen from the calendar colour's luminance by
   chipInk() in CalendarApp.jsx. The #fff fallback keeps pre-island markup and
   the dark half of the palette rendering exactly as before. */
.evt.allday .evt-title { color: var(--c-ink, #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; }
/* --coral-deep is 4.50:1 on the in-month cell and 4.49:1 on `.cell.other`, i.e.
   right on the AA line for 11px text. One step darker clears it everywhere. */
.more { flex-shrink: 0; font-size: 0.7rem; font-weight: 600; color: #a8461c; margin-top: 3px; padding: 1px 6px; cursor: pointer; border-radius: 6px; align-self: flex-start; }
/* Drag-to-reschedule (desktop month grid). Movable chips (writable calendars)
   show a grab cursor; SortableJS marks the drop placeholder + the lifted chip. */
.evt-loc { display: block; font-size: 0.62rem; line-height: 1.2; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt.allday .evt-loc { color: var(--c-ink-soft, rgba(255, 255, 255, 0.85)); }
.evt--movable { cursor: grab; }
.evt--movable:active { cursor: grabbing; }
/* In drag mode, each day's event strip fills the whole cell body so a chip can be
   dropped anywhere in the cell, not just on the tiny content strip. Desktop-only:
   the class is added by initCalendarDrag(), which never runs on mobile/demo, so the
   mobile dots layout is untouched. Chips stay top-aligned; only the drop zone grows. */
.month-grid.cal-dragmode .cell-evts { flex: 1 1 auto; }
.evt-ghost { opacity: 0.35; }
.evt-chosen { opacity: 0.4; }
.evt-fallback { background: var(--card-solid); box-shadow: 0 8px 22px rgba(20, 25, 32, 0.28); opacity: 0.97; border-radius: 4px; }
/* Transient error toast (e.g. a failed drag-move). */
.cal-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 1000; background: var(--ink, #1f2430); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 0.86rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; max-width: 90vw; }
.cal-toast.show { opacity: 1; transform: translate(-50%, 0); }
.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: 404px; }
.detail-inner { width: 404px; height: 100%; overflow-y: auto; padding: 0; }
.detail-hero { padding: 14px 22px 16px; background: linear-gradient(135deg, var(--tint-sky-hero), var(--tint-peach-hero)); position: relative; }
.detail-hero-navigation { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.detail-kind { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.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(--ink-soft); }
.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; }
.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; }
.badge-status.awaiting { background: rgba(120,130,145,0.16); color: var(--ink-soft); }
.badge-status.declined { background: rgba(213,0,0,0.1); color: var(--danger-2); }
.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; }
/* ---- legacy feedback backdrop ---- */
.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; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* iOS Safari zooms the page when a focused input/textarea/select has a
   font-size < 16px. Force every non-MUI text-entry control to 16px on phones
   while leaving stock MUI inputs under the shared theme. */
@media (max-width: 720px) {
  input:not(.sc-mui-native-input), textarea:not(.sc-mui-native-input),
  select:not(.sc-mui-native-input) { 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, .vseg { 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; }

.client-search:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(236,138,92,0.18); }
.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; }

/* ---- settings ---- */
#settingsContent, #adminContent, #requestsContent { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 16px 18px; }
/* Keep the transparent tabs outside the scrolling page so content never passes behind them. */
/* No side inset: the Settings page lines up with Clients, Payments and Galleries. */
#settingsContent { padding-top: 0; padding-inline: 0; display: flex; overflow: hidden; }
#settingsContent > .settings-wrap { flex: 1; min-height: 0; padding-bottom: 0; }
#rsettingsNavigation { position: relative; z-index: 2; min-width: 0; flex-shrink: 0; }
#rsettingsNavigation:empty { display: none; }
html[data-sc-owner] #settingsContent .sc-subpage-surface {
  flex: 1; min-height: 0; overflow-y: auto; border: 0;
  box-shadow: 0 2px 6px rgb(83 54 35 / 10%);
}
#settingsContent .settings-section-page > div { flex-shrink: 0; }
#settingsContent [data-settings-page] { display: flex; flex-direction: column; gap: 22px; }
#settingsContent [data-settings-page][hidden] { display: none; }
html[data-sc-owner][data-sc-color-scheme="dark"] #settingsContent .sc-subpage-surface {
  box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}
html[data-sc-owner] #rsettingsNavigation [data-workspace-navigation-style="attached"]::before { display: none; }
html[data-sc-owner] #rsettingsNavigation .MuiTab-root.Mui-selected {
  border-color: transparent;
  box-shadow: 0 0 6px rgb(0 0 0 / 10%);
  clip-path: inset(-8px -8px 0 -8px);
}
.settings-wrap { width: 100%; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; padding-bottom: 28px; }
/* Match Settings to the other authenticated workspaces while retaining a
   readable centered maximum width on very large displays. */
#settingsScreen .toolbar:not(.workspace-titlebar) { width: 100%; max-width: 1240px; margin-inline: auto; }
.set-card { background: var(--sc-card-bg); border: 1px solid rgba(255,255,255,0.8); border-radius: var(--sc-card-radius); box-shadow: var(--sc-card-shadow); padding: var(--sc-card-pad); }
.set-card h3 { margin: 0 0 10px; font-size: 1.1rem; }
.set-desc { margin: 0 0 18px; color: var(--ink-soft); font-size: 0.9rem; }
@media (max-width: 720px) {
  /* Standardize the mobile content gutter to 13px on the scroll containers so
     card edges sit a consistent ~13px from the screen edge (was 4px — cards
     nearly touched the edge). */
  /* Settings is an attached page card like Clients and Payments: no gutter. */
  #adminContent, #requestsContent, .cm-pane { padding-left: 13px; padding-right: 13px; }
}
/* ---- booking requests inbox ---- */
@media (min-width: 1180px) {
  .settings-wrap.req-wrap { max-width: 1240px; }
}

/* ---- access gate ----
   The gate screens (#gateScreen, #setpwScreen, #nameScreen,
   #connectGoogleScreen) and the boot error (#bootErr) are utilities from
   app-controller/src/ui-classes.js gateScreen/gateCard/gateLink, written
   literally in public/app/index.html, with their owner-dark canvas, link
   colour and safe-area padding (Train 1 shell pass, step 7). */

/* ---- App sign-in (signed-out /app/) ----
   The sign-in screen, its card and the boot loader, with their owner-dark,
   forced-colours and safe-area rules, are utilities in public/app/index.html
   (#signinScreen, .signin-card, .signin-loading), and the sign-in hides are
   on its <html> element (Train 1 shell pass, step 6). */


/* ---- 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; }
/* The .spinner ring and its turn are utilities (ui-classes.js spinner, the
   kit spin animation in react/src/ui/kit/foundation.css; shell pass step 7). */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .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 honor their available width. */
  .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)); }
}
.calendar-preview-month { display: none; }

/* Toolbar reflow: the single desktop toolbar row (month title + Calendars +
   prev/Today/next + view toggle + search + New) only fits above ~720px. This is
   also where the header collapses to a hamburger, so stack the toolbar to match.
   Below this it stacks into full-width rows (was 560px, which left a cramped
   single row persisting 561-720px). Phone-only chrome (compact dot grid, tight
   page gutters) stays in the 560px block below. */
@media (max-width: 1050px) {
  .toolbar { gap: 12px; margin-bottom: 12px; }
  /* Header is a hamburger here. Scroll the calendar like a website with natural
     row heights instead of cramming 6 rows into the viewport, and trim the side
     margin so the grid gets more width. Titles stay until they hit dots at 650px. */
  .month-grid { flex: none; grid-template-rows: repeat(6, minmax(108px, auto)); }
  .toolbar .month-title { font-size: 1.25rem; width: 100%; }
  .nav-group { flex-wrap: wrap; gap: 10px; width: 100%; align-items: center; }
  /* Mobile tap targets: WCAG/Apple HIG min 44px (was 42px). */
  .tb-btn { min-height: 44px; }
  /* Center the < Today > group between Calendars (left) and the + button (right). */
  .nav-group > [data-month-navigation="previous"] { margin-left: auto; }

  /* New Event collapses to a round "+" that sits inline at the end of the
     nav row (after the > chevron) instead of wrapping onto its own row. */
  .nav-group > [data-calendar-toolbar-action="new"] {
    order: 6; flex: 0 0 auto;
    width: 44px; padding: 0; gap: 0; border-radius: 999px;
    font-size: 0; justify-content: center;        /* collapses the " New Event" label */
  }
  .nav-group > [data-calendar-toolbar-action="new"] .plus { font-size: 1.6rem; }
  /* Calendars collapses to an icon-only button (frees the room the + needs). */
  .nav-group [data-calendar-toolbar-action="calendars"] { width: 44px; padding: 0; justify-content: center; gap: 0; }
  .nav-group [data-calendar-toolbar-action="calendars"] .cal-label,
  .nav-group [data-calendar-toolbar-action="calendars"] .caret { display: none; }
  .nav-group [data-calendar-toolbar-action="calendars"] .cal-ico { display: block; }

  /* Keep the view picker compact at tablet widths. The former full-width
     track made three short labels span the entire calendar and consumed a
     row that the other controls can use. */
  .nav-group > .view-seg { order: -1; width: max-content; flex: 0 0 auto; }
  .nav-group > .view-seg .vseg { flex: 0 0 auto; text-align: center; }
  /* Calendar search also gets its own full-width row, under the view toggle. */
  .nav-group > .cal-search-wrap { order: -1; width: 100%; }
  .nav-group > .cal-search-wrap .cal-search-field { width: 100%; min-width: 0; }
  .cal-search-results { width: 100%; }

  /* bigger prev/next chevrons; smaller Today between them */
  .nav-group > [data-month-navigation] { flex: 0 0 auto; }

}

/* Tablet calendar rows deliberately use natural heights. Let that taller grid
   participate in document flow so its last row and the main bottom gutter are
   reachable instead of being clipped by the desktop viewport shell. Phones
   retain their compact viewport grid; desktop retains the fixed workspace.
   The body, layout and main parts are utilities in public/app/index.html. */
@media (min-width: 651px) and (max-width: 1050px) {
  body.app-body:has(#calendarScreen:not([hidden])) #content {
    flex: 0 0 auto; min-height: 0; overflow: visible;
  }
}

@media (max-width: 650px) {
  /* header layout (collapse-to-hamburger) is owned by the <=1050px block above */
  /* Event titles aren't practical below ~650px -> compact dots (rules below),
     shorter rows, near-zero side margin for the most width. */
  .toolbar .nav-group {
    display: grid;
    grid-template-columns: 44px 46px auto 46px 44px;
    justify-content: center;
    align-items: center;
  }
  .nav-group > .view-seg { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin: 0; }
  .nav-group > .view-seg .vseg { min-height: 44px; }
  .nav-group > [data-calendar-toolbar-action="calendars"] { grid-column: 1; grid-row: 2; }
  .nav-group > [data-month-navigation="previous"] { grid-column: 2; grid-row: 2; }
  .nav-group > [data-month-navigation="today"] { grid-column: 3; grid-row: 2; }
  .nav-group > [data-month-navigation="next"] { grid-column: 4; grid-row: 2; }
  .nav-group > [data-calendar-toolbar-action="new"] { grid-column: 5; grid-row: 2; }
  .nav-group > .cal-search-wrap { grid-column: 1 / -1; grid-row: 3; }
  /* Scheduler supplies date navigation itself. Reuse the vacant navigation
     row for a wider search and the two actions instead of leaving three
     empty grid columns. Its compact header hides the month, so retain that
     orientation in ShootCal's page heading. */
  .toolbar[data-scheduler-preview] .nav-group {
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    gap: 8px;
    padding-inline: 12px;
  }
  .toolbar[data-scheduler-preview] .cal-search-wrap { grid-column: 1; grid-row: 2; min-width: 0; }
  .toolbar[data-scheduler-preview] [data-calendar-toolbar-action="calendars"] { grid-column: 2; }
  .toolbar[data-scheduler-preview] [data-calendar-toolbar-action="new"] { grid-column: 3; }
  .toolbar[data-scheduler-preview] .calendar-preview-label { display: none; }
  .toolbar[data-scheduler-preview] .calendar-preview-month { display: inline; }
  /* The tablet rule above opts into natural-height rows with flex:none. Phones
     retain a viewport calendar, so let its six weeks share the available card
     height instead of leaving a blank strip after the last row. The 72px floor
     still makes short screens scroll rather than crushing tap targets. */
  .month-grid { flex: 1 1 auto; grid-template-rows: repeat(6, minmax(72px, 1fr)); }

  /* 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; }

  /* 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; }
  /* The phone layout renders each event as a 7px dot. `.evt-loc` was left
     displayed (at font-size 0 / transparent, so invisible), which meant the
     dot's accessible name came from the LOCATION instead of the event title —
     VoiceOver read "Ocean Isle Beach, NC, button" for a session. Hiding it
     alongside the other two lets the chip's title attribute name the control. */
  .evt .evt-time, .evt .evt-title, .evt .evt-loc { display: none; }
  .more { display: none; }

  /* iOS-style SPLIT (auto on the mobile MONTH view): a compact dot grid pinned on top
     + the viewed month's agenda scrolling below, filling the tall phone screen. The dot
     cells / hidden "+N more" above are reused verbatim. JS toggles #content.split. */
  #content.split { display: flex; flex-direction: column; overflow: hidden; height: 100%; min-height: 0; }
  #content.split .grid-card { flex: 0 0 auto; max-height: 46vh; overflow: hidden; box-shadow: none; margin: 0; }
  #content.split .month-grid { flex: none; grid-template-rows: repeat(6, minmax(38px, auto)); }
  #content.split .split-agenda { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; margin-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  #content.split .split-agenda .agenda { max-width: none; margin: 0; }

  /* one-column cards / single-column settings */
  .clients-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   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; }
/* Primary header CTA — colorful brand gradient (ShootCal blue → peach), white
   text, legible in light + dark. The gradient is fixed brand color so it pops
   the same in both themes. */
.appstore-mini {
  background: linear-gradient(135deg, #4E92D6 0%, #E8944A 100%);
  color: #fff !important; padding: 8px 16px; border-radius: 10px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(78,146,214,0.28);
  transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.appstore-mini:hover { filter: brightness(1.05) saturate(1.08); box-shadow: 0 7px 20px rgba(232,148,74,0.38); transform: translateY(-1px); }
.appstore-mini:active { transform: translateY(0); }
.mk-nav-links .nav-sep { width: 1px; height: 18px; background: var(--nav-sep); flex: 0 0 auto; }

/* Facebook community icon — replaces the old "Community" text link */
.mk-fb { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.mk-fb svg { width: 20px; height: 20px; display: block; }
.mk-fb:hover { color: var(--ink); }

/* Primary app CTA stack: "Open web app" with a subtle "View demo" under it */
.mk-nav-cta { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mk-demo-link { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.mk-demo-link:hover { color: var(--ink); text-decoration: none; }
.mk-demo-menu { display: none; }   /* shown only inside the mobile hamburger menu (see 640px) */

/* 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 + app CTA 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 > .mk-nav-cta { 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; position: relative; margin: 0 auto 16px; }   /* anchor the dropover panel + breathing room below the bar before content */
  .mk-nav .brand { order: 1; flex: 1 1 auto; }
  .mk-nav > .mk-nav-cta { order: 2; }
  .mk-nav > .mk-nav-cta .appstore-mini { font-size: 0.8rem; padding: 7px 11px; }
  .mk-nav > .mk-nav-cta .mk-demo-link { display: none; }   /* moved into the hamburger menu below */
  .mk-nav-links .mk-demo-menu { display: block; }
  .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 a.mk-fb { justify-content: flex-start; gap: 8px; }
  .mk-nav-links a.mk-fb::after { content: "Facebook group"; font-size: 0.95rem; }
  .mk-nav-links .nav-sep { display: none; }
  /* When open, the bar takes the panel's glass TINT so bar + dropdown read as one menu surface.
     NOTE: no backdrop-filter here on purpose. The panel is a child of the bar, and a
     backdrop-filter on the bar makes it a "backdrop root" — which leaves the panel's own
     blur nothing to sample, killing the frosted glass. The bar sits at the top of the page
     with nothing meaningful behind it, so it only needs the matching translucent tint. */
  .mk-nav.mk-nav-open {
    background: var(--card);
  }
  .mk-nav.mk-nav-open .mk-nav-links {
    display: flex;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    margin: 0; padding: 8px 20px 16px;
    background: var(--card);
    backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%);
    border-top: 0;   /* the tablet-breakpoint border-top leaks here and made a seam under the bar */
    border-bottom: 1px solid var(--line); border-radius: 0 0 16px 16px;
    box-shadow: 0 18px 36px rgba(0,0,0,0.22);
    max-height: 80vh; overflow-y: auto;
    animation: navReveal .2s ease both;   /* same glassy dropover as the app menu */
  }
  .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: 0 2px 6px rgba(20,25,32,0.06), 0 24px 48px rgba(20,25,32,0.14); 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: 64px 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; }
/* Centered lead screenshot for a text section (e.g. Studio management) so it isn't a wall of feature boxes. */
.mk-shot { max-width: 920px; margin: 0 auto 40px; }
.mk-shot img { display: block; width: 100%; height: auto; }
/* Composite (layered app windows on transparent bg): no card frame — the
   image carries its own shadows and rounded windows. Wider cap for detail. */
.mk-shot-wide { max-width: 1040px; }
.composite-shot { display: block; width: 100%; height: auto; }
.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: 0 1px 2px rgba(20,25,32,0.04), 0 8px 22px rgba(20,25,32,0.07); 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); }

/* The demo banner (#demoBanner) and the optional Google connection banner
   (#googleConnectBanner) are styled by utilities in public/app/index.html. */
.google-required-card { align-self: flex-start; width: calc(100% - 48px); max-width: 620px; margin: 42px auto; padding: 26px; box-sizing: border-box; text-align: center; }
.google-required-card h2 { margin: 0 0 8px; }
.google-required-card .set-desc { margin: 0 auto 16px; max-width: 520px; }
@media (max-width: 680px) {
  .google-required-card { width: calc(100% - 24px); margin: 20px 12px; padding: 20px 16px; }
}

/* "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) {
  #content, .grid-card { overflow: visible; }
  .month-grid { grid-template-rows: repeat(6, minmax(62px, 1fr)); }
}

/* Agenda is a bounded current-month list with its own reachable scroll root.
   This explicit contract comes after the tablet and short-height natural-flow
   rules so those month-grid safeguards cannot accidentally disable Agenda. */
#calendarScreen #content[data-calendar-scroll-root="agenda"] {
  display: block;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 651px) and (max-width: 1050px) {
  body.app-body:has(#calendarScreen:not([hidden])) #content[data-calendar-scroll-root="agenda"] {
    flex: 0 0 auto;
    height: calc(100dvh - 190px);
    min-height: 240px;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
@media (max-height: 640px) {
  #calendarScreen #content[data-calendar-scroll-root="agenda"] {
    overflow-x: hidden;
    overflow-y: auto;
  }
}
.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: 0 2px 6px rgba(20,25,32,0.06), 0 22px 44px rgba(20,25,32,0.12); }
/* Featured spotlight (booking page): a full-width soft white band that makes the
   screenshot the visual centerpiece; the grid moves onto .sp-inner so the band
   can run edge to edge while content stays page-width. */
.spotlight.featured { display: block; max-width: none; padding: 0; margin: 26px 0; background: rgba(255,255,255,0.55); border-top: 1px solid rgba(255,255,255,0.75); border-bottom: 1px solid rgba(255,255,255,0.75); }
.spotlight.featured .sp-inner { max-width: 1020px; margin: 0 auto; padding: 64px 24px; display: grid; grid-template-columns: 1fr 1.08fr; gap: 24px 52px; align-items: center; }
.spotlight.featured .feat-group { grid-column: 1 / -1; margin: 0; }
/* Reversed featured spotlight: image on the LEFT, text on the right, so stacked
   bands alternate sides instead of all reading text-left/image-right. DOM order
   stays text-then-art (so mobile keeps text-above-image); desktop flips via
   explicit grid placement. */
.spotlight.featured.reverse .sp-inner { grid-template-columns: 1.08fr 1fr; }
.spotlight.featured.reverse .sp-text { grid-column: 2; grid-row: 2; }
.spotlight.featured.reverse .sp-art  { grid-column: 1; grid-row: 2; }
@media (max-width: 820px) {
  .spotlight { grid-template-columns: 1fr; gap: 22px; padding: 36px 24px; }
  .spotlight.featured .sp-inner,
  .spotlight.featured.reverse .sp-inner { grid-template-columns: 1fr; gap: 26px; padding: 44px 20px; }
  /* Undo the desktop image-left placement so the reversed band flows in source
     order (text, then image) in the single mobile column, like the others. */
  .spotlight.featured.reverse .sp-text,
  .spotlight.featured.reverse .sp-art { grid-column: auto; grid-row: auto; }
  /* Phones: rein the big screenshot shadows in so they never clip at the viewport edge. */
  .spotlight .sp-art img, .hero-shot { box-shadow: 0 1px 3px rgba(20,25,32,0.05), 0 8px 20px rgba(20,25,32,0.08); }
}

/* ---- Wave integration (deposits sync automatically) ---- */
.wave-panel {
  max-width: 940px; margin: 8px auto 0; background: var(--card-solid);
  border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm);
  padding: 34px 36px; text-align: left;
}
.wave-flow { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
.wave-step {
  display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; flex: 1 1 220px; min-width: 0;
}
.wave-step .fi { line-height: 0; flex-shrink: 0; }
.wave-step .fi svg { width: 26px; height: 26px; display: block; fill: var(--coral-deep); }
.wave-step b { display: block; font-size: 0.98rem; color: var(--ink); letter-spacing: -0.01em; }
.wave-step span { display: block; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }
.wave-arrow { flex: 0 0 auto; line-height: 0; }
.wave-arrow svg { width: 22px; height: 22px; display: block; fill: var(--coral-deep); opacity: 0.55; }
.wave-detail { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; margin: 22px 0 0; text-align: center; max-width: 680px; margin-left: auto; margin-right: auto; }
.wave-detail b { color: var(--ink); font-weight: 700; }
.wave-connect { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 26px; }
.wave-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.wave-card .wave-tag {
  display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--coral-deep); background: rgba(236, 138, 92, 0.12); border: 1px solid rgba(236, 138, 92, 0.28);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
.wave-card h3 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); }
.wave-card p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.wave-anybody { margin: 22px 0 0; text-align: center; font-size: 0.95rem; color: var(--ink); font-weight: 600; }
@media (max-width: 600px) {
  .wave-panel { padding: 26px 20px; border-radius: 18px; }
  .wave-connect { grid-template-columns: 1fr; }
  .wave-arrow { transform: rotate(90deg); }
  .wave-step { flex-basis: 100%; }
}

/* ---- About / story (the photographer's own words) ---- */
.about { max-width: 720px; margin: 0 auto; padding: 10px 24px 40px; }
.about.story-teaser .story-card,
.about.story-teaser .story-card h2,
.about.story-teaser .story-card .by { text-align: center; }   /* homepage story teaser: center the card to match the surrounding sections (the /about/ full-story card keeps its left alignment) */
.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: 0 1px 2px rgba(20,25,32,0.04), 0 6px 18px rgba(20,25,32,0.06); 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 22px; 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; } }

/* ============ Button polish — consistent, subtle hover + press ============ */
.tb-btn {
  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 */
.tb-btn:not(.primary):hover {
  background: #fff; box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.tb-btn:active { transform: translateY(0); box-shadow: none; }

/* Phones: standardize the detail drawer content gutter to ~13px.
   .set-card padding is card-internal (it sits inside the now 13px-gutter
   #settingsContent), so it stays 14px. */
@media (max-width: 560px) {
  .detail-hero, .detail-rows, .day-list { padding-left: 13px; padding-right: 13px; }
  .sun-tide { margin-left: 13px; margin-right: 13px; }
  .set-card { padding-left: 14px; padding-right: 14px; }
}


/* =====================================================================
   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 */
  /* Out-of-month day number. Was #c2c7cf = 1.63:1 on the cell, an AA failure on
     text that still tells you the date. #667181 is 4.74:1; the grey `.cell.other`
     background keeps carrying the "different month" cue. Same reasoning as the
     today-number fix below. */
  --text-faint:        #667181;            /* out-of-month day number */
  --text-muted-warm:   #79726a;            /* warm muted (fmt-hint, task notes) — 4.7:1 on white (AA; was #9a948c @ 3.0:1) */
  --today-num-bg:      var(--coral-deep);  /* today's daynum badge — white ink is 4.69:1 on it */
  --today-num-ink:     #fff;
  --swatch-default:    #888;               /* calendar swatch fallback */

  /* ---- Overlays / hovers ---- */
  --overlay-sky:       rgba(169, 198, 230, 0.08); /* calendar cell 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);

  /* ---- 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 */
  --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 */
}



/* ============ Features walkthrough (/features/) ============ */
/* Hero */
.wt-hero { max-width: 1000px; margin: 0 auto; padding: 30px 24px 10px; text-align: center; }
.wt-hero h1 { font-size: 2.4rem; line-height: 1.12; letter-spacing: -0.03em; margin: 10px 0 10px; }
.wt-hero p.sub { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.55; max-width: 680px; margin: 0 auto; }
.wt-hero .wt-frame { margin: 28px auto 0; max-width: 920px; }

/* A consistent frame for every screenshot: rounded corners, hairline border,
   soft shadow, on a faint tinted card. */
/* Floating-window look (Ryan, 2026-07-18): no white card wrapper — each
   screenshot floats with just rounded corners + a soft drop shadow. */
.wt-frame { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.wt-frame img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 2px 8px rgba(30,34,44,0.07), 0 22px 48px rgba(30,34,44,0.14); }

/* Alternating rows: image one side, copy the other. Default = image left. */
.wt-row { max-width: 1080px; margin: 0 auto; padding: 38px 24px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
.wt-row.reverse .wt-media { order: 2; }
.wt-row.reverse .wt-copy { order: 1; }
.wt-copy { text-align: left; }
.wt-copy h2 { font-size: 1.7rem; letter-spacing: -0.025em; margin: 0 0 12px; }
.wt-copy p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.62; margin: 0; }
.wt-media { margin: 0; }

/* A pair of screenshots in one media slot (macOS wide + iPhone tall together). */
.wt-pair { display: flex; gap: 16px; align-items: flex-end; }
.wt-pair .wt-frame.wide { flex: 1 1 auto; min-width: 0; }
.wt-pair .wt-frame.phone { flex: 0 0 30%; max-width: 150px; }
/* Portrait phone screenshot: narrower, phone-style column. */
.wt-frame.phone { max-width: 240px; }
.wt-frame.phone img { border-radius: 18px; }
.wt-media.phone-center { display: flex; justify-content: center; }

/* Tall/portrait screenshots (e.g. the availability calendar): keep them in a
   narrower, centered column so they don't tower over the surrounding rows. */
.wt-media.tall { display: flex; justify-content: center; }
.wt-media.tall .wt-frame { max-width: 380px; }

@media (max-width: 820px) {
  .wt-hero h1 { font-size: 2rem; }
  .wt-row { grid-template-columns: 1fr; gap: 22px; padding: 30px 22px; }
  /* On mobile, always show the image first then the copy, regardless of order. */
  .wt-row .wt-media { order: 1 !important; }
  .wt-row .wt-copy { order: 2 !important; }
  .wt-copy { text-align: center; }
  .wt-copy h2 { font-size: 1.5rem; }
  .wt-pair { justify-content: center; }
  .wt-frame.phone { margin: 0 auto; }
}


/* ===== Installed web-app feel (PWA) ===== */
@media (display-mode: standalone) {
  html, body { overscroll-behavior: none; }            /* no rubber-band / pull-to-refresh */
  /* The safe-area padding on .app-body is a utility in public/app/index.html. */
}
button, a, .vseg, .tb-btn, .cell, .evt,
.cm-client, .ag-evt, [role="button"] {                 /* instant taps, no 300ms delay / zoom / gray flash */
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
button:active, .vseg:active, .tb-btn:active,
.ag-evt:active, [role="button"]:active { opacity: 0.6; }
.toolbar, .nav-group, .weekday-row, .view-seg,
.tb-btn, .vseg, .cell .daynum {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.grid-card, #content, .detail { -webkit-overflow-scrolling: touch; }


/* Request-card "More…" fold: the extras span must not become a single flex
   item (its buttons need the row's own gap), and display:contents would
   otherwise defeat the hidden attribute. */
.req-more-wrap { position: relative; display: flex; flex: 1; }
.req-more-wrap > .tb-btn { flex: 1; }
.req-more { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 220px;
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(20,30,50,0.16); padding: 6px; }
.req-more[hidden] { display: none; }
.req-more-opt { display: block; width: 100%; font: inherit; font-size: 0.88rem; color: var(--ink);
  background: none; border: 0; border-radius: 8px; padding: 9px 12px; cursor: pointer; text-align: left; }
.req-more-opt:hover { background: rgba(169,198,230,0.18); }

/* Client-detail "Galleries" cross-promo card: ghosted when no linked galleries account. */

/* =====================================================================
   LIQUID GLASS FINISH — shared design language with ShootCal Galleries.
   The calendar keeps its gradient identity while controls get the iOS-glass
   treatment: backdrop blur/vibrancy, a hairline border, and an inset top
   "specular" highlight so edges catch light.
   ===================================================================== */
.tb-btn, .client-search {
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.ct-form {
  --card-solid:#fff; --line:#d0d5dd; --ink:#1d2939; --ink-soft:#667085;
  --surface-2:#f8fafc; --accent:#1976d2; --shadow-sm:0 1px 3px rgba(16,24,40,.10);
  --sc-ink:#1d2939; --sc-ink-soft:#667085; --sc-line:#d0d5dd; --sc-surface:#fff;
  --sc-surface-2:#f8fafc; --sc-field-bg:#fff; --sc-field-border:#d0d5dd;
  --sc-accent:#1976d2; --sc-accent-glow:rgba(25,118,210,.22);
  --sc-focus:rgba(25,118,210,.5); --sc-field-ring:rgba(25,118,210,.16);
}
.ct-actions { margin-top:4px; }
/* ==========================================================================
   Unified liquid-glass button system (2026-07-12)
   One theme-aware token set + a shared "glass skin" so buttons across the app
   read as ONE system instead of every surface hand-rolling bg/border/gap.
   Appended last so the effect props (blur, sheen, radius, gap) win at equal
   specificity; background stays owned by each family's existing light rules.
   The remaining contract fallback buttons use the SAME tokens.
   ========================================================================== */
:root {
  --gbtn-radius: 10px;
  --gbtn-gap: 0.45em;
  --gbtn-bg: rgba(255,255,255,0.55);
  --gbtn-bg-hover: rgba(255,255,255,0.86);
  --gbtn-border: rgba(120,128,145,0.24);
  --gbtn-blur: saturate(160%) blur(14px);
  --gbtn-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(70,90,120,0.06), 0 4px 14px rgba(70,90,120,0.08);

  /* Map the shared-UI (--sc-*) tokens onto ShootCal's palette. See
     shootcal-ui.css for the component shells. */
  --sc-accent:        var(--accent);
  --sc-on-accent:     #fff;
  --sc-ink:           var(--ink);
  --sc-ink-soft:      var(--ink-soft);
  --sc-line:          var(--line);
  --sc-surface:       var(--card-solid);
  --sc-surface-2:     var(--surface-2);
  --sc-radius:        var(--gbtn-radius, 10px);
  --sc-radius-lg:     12px;
  --sc-btn2-bg:       var(--gbtn-bg);
  --sc-btn2-border:   var(--gbtn-border);
  --sc-btn2-bg-hover: var(--gbtn-bg-hover);
  --sc-btn2-blur:     var(--gbtn-blur);
  --sc-btn2-shadow:   var(--gbtn-shadow);
  --sc-accent-glow:   rgba(230,116,64,.30);
  --sc-focus:         rgba(236,138,92,.5);
  --sc-field-ring:    rgba(236,138,92,.22);
}
/* Frosted-glass effect on the secondary/ghost families that already carry a
   theme-correct translucent bg — add blur + sheen shadow + shared radius. */
.tb-btn {
  -webkit-backdrop-filter: var(--gbtn-blur);
  backdrop-filter: var(--gbtn-blur);
  box-shadow: var(--gbtn-shadow);
  border-radius: var(--gbtn-radius);
}
/* The hidden attribute must still hide these buttons — their inline-flex display
   (above / in each base rule) otherwise beats the plain [hidden]{display:none}
   reset (equal specificity, later in the cascade). Attribute selector = 0,2,0,
   so it wins without !important (which would break the account-menu override). */
.tb-btn[hidden], .ct-btn[hidden], .ct-mini[hidden] { display: none; }

/* ==========================================================================
   LIGHT-FIRST PRODUCT SYSTEM
   ShootCal and Galleries share a restrained light app language: cool-white
   glass, quiet borders, graphite actions, and a sky-blue focus/navigation cue.
   Sunset remains a small brand accent. Every browser platform uses this light system,
   independent of the device color preference.
   ========================================================================== */
:root {
  --ink: #242a32;
  --ink-soft: #626c78;
  --line: #dde2e8;
  --card: rgba(255,255,255,.76);
  --card-solid: #fff;
  --accent: #bf5324;
  --page-grad-sky: rgba(160,190,222,.18);
  --page-grad-peach: rgba(238,190,157,.11);
  --page-base-1: #f1f4f7;
  --page-base-2: #f8f7f5;
  --surface-2: rgba(255,255,255,.68);
  --surface-3: rgba(255,255,255,.56);
  --border-glass: rgba(255,255,255,.72);
  --border-glass-strong: rgba(255,255,255,.88);
  --tint-sky-hi: rgba(134,158,184,.13);
  --tint-peach-hi: rgba(214,190,173,.07);
  --tint-sky-mid: rgba(134,158,184,.09);
  --tint-peach-mid: rgba(214,190,173,.05);
  --overlay-coral: rgba(236,138,92,.13);
  --overlay-coral-soft: rgba(236,138,92,.075);
  --shadow: 0 18px 50px rgba(42,50,62,.14);
  --shadow-sm: 0 6px 18px rgba(42,50,62,.09);
  --gbtn-bg: rgba(255,255,255,.58);
  --gbtn-bg-hover: rgba(255,255,255,.88);
  --gbtn-border: rgba(98,108,120,.22);
  --gbtn-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 1px 2px rgba(42,50,62,.05), 0 5px 16px rgba(42,50,62,.07);
  --sc-accent: var(--accent);
  --sc-accent-glow: rgba(191,83,36,.20);
  --sc-focus: #426f9e;
  --sc-action-primary-bg: linear-gradient(180deg, #2d2d30, #1c1c1e);
  --sc-action-primary-bg-hover: linear-gradient(180deg, #252527, #111113);
  --sc-action-primary-bg-active: linear-gradient(180deg, #1c1c1e, #09090a);
  --sc-action-primary-border: rgba(0,0,0,.72);
  --sc-action-primary-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 4px rgba(20,20,22,.10), 0 7px 18px rgba(20,20,22,.16);
  --sc-action-primary-shadow-hover: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 6px rgba(20,20,22,.12), 0 10px 24px rgba(20,20,22,.19);
  --sc-action-secondary-bg: rgba(248,249,250,.78);
  --sc-action-secondary-bg-hover: rgba(255,255,255,.97);
  --sc-action-secondary-bg-active: rgba(232,234,237,.92);
  --sc-action-secondary-fallback: #f3f4f5;
  --sc-action-secondary-text: #34363a;
  --sc-action-secondary-border: rgba(52,54,58,.30);
  --sc-action-secondary-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 1px 2px rgba(30,31,34,.05), 0 5px 15px rgba(30,31,34,.08);
  --sc-action-focus: #426f9e;
  --sc-field-ring: rgba(66,111,158,.18);
  --sc-menu-bg: rgba(255,255,255,.78);
  --sc-menu-border: rgba(255,255,255,.82);
}

.client-search,
.tb-btn,
.tb-btn {
  border-color: rgba(98,108,120,.20);
}

.grid-card,
.set-card,
.cm-rail {
  border-color: rgba(111,121,133,.18);
  box-shadow: 0 1px 2px rgba(42,50,62,.04), 0 8px 24px rgba(42,50,62,.07);
}
.weekday-row {
  background: linear-gradient(180deg, rgba(243,246,249,.96), rgba(236,240,244,.82));
}
.toolbar .month-title .yr { color: var(--ink-soft); }

/* Authenticated actions intentionally reuse the canonical shared tokens. The
   app body fence keeps marketing/native-link surfaces out; semantic danger and
   the two calendar-create controls receive their own treatments below. */
.app-body :is(.tb-btn, .btn, .ct-btn, .gate-btn) {
  min-height: 44px;
}
.app-body :where(.tb-btn.primary, .btn.primary, .ct-btn.p, .gate-btn) {
  background: var(--sc-action-primary-bg);
  color: var(--sc-action-primary-text);
  border-color: var(--sc-action-primary-border);
  box-shadow: var(--sc-action-primary-shadow);
  opacity: 1;
}
.app-body :where(.tb-btn.primary, .btn.primary, .ct-btn.p, .gate-btn):not(:disabled):hover {
  background: var(--sc-action-primary-bg-hover);
  filter: none;
  transform: translateY(-1px);
  box-shadow: var(--sc-action-primary-shadow-hover);
}
.app-body :where(.tb-btn.primary, .btn.primary, .ct-btn.p, .gate-btn):not(:disabled):active {
  background: var(--sc-action-primary-bg-active);
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 1px 3px rgba(42,50,62,.14);
  opacity: 1;
}
.app-body :where(.tb-btn:not(.primary):not(.danger), .ct-btn.s) {
  background: var(--sc-action-secondary-bg);
  color: var(--sc-action-secondary-text);
  border-color: var(--sc-action-secondary-border);
  -webkit-backdrop-filter: var(--sc-action-blur);
  backdrop-filter: var(--sc-action-blur);
  box-shadow: var(--sc-action-secondary-shadow);
  opacity: 1;
}
.app-body :where(.tb-btn:not(.primary):not(.danger), .ct-btn.s):not(:disabled):hover {
  background: var(--sc-action-secondary-bg-hover);
  border-color: rgba(73,86,100,.36);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(42,50,62,.07), 0 8px 20px rgba(42,50,62,.10);
}
.app-body :where(.tb-btn:not(.primary):not(.danger), .ct-btn.s):not(:disabled):active {
  background: var(--sc-action-secondary-bg-active);
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 1px 3px rgba(42,50,62,.08);
  opacity: 1;
}
.app-body :where(.tb-btn.danger, .ct-btn.d) {
  background: var(--sc-action-danger-bg);
  color: var(--sc-action-danger-text);
  border-color: var(--sc-action-danger-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 7px rgba(117,34,30,.08);
  opacity: 1;
}
.app-body :where(.tb-btn.danger, .ct-btn.d):not(:disabled):hover,
.app-body :where(.tb-btn.danger, .ct-btn.d):focus-visible {
  background: var(--sc-action-danger-bg-hover);
  color: var(--sc-action-danger-text);
  border-color: rgba(135,39,34,.58);
}
.app-body :is(.tb-btn, .btn, .ct-btn, .gate-btn):focus-visible {
  outline: 3px solid var(--sc-action-focus);
  outline-offset: 2px;
}
.app-body :is(.tb-btn, .btn, .ct-btn, .gate-btn):is(:disabled, [aria-disabled="true"]) {
  color: var(--sc-action-disabled-text);
  background: var(--sc-action-disabled-bg);
  border-color: var(--sc-action-disabled-border);
  box-shadow: none;
  filter: none;
  transform: none;
  cursor: not-allowed;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.app-body :is(.tb-btn, .btn, .ct-btn, .gate-btn):is(.is-loading, [aria-busy="true"]) {
  cursor: progress;
  opacity: .78;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-body :where(.tb-btn:not(.primary):not(.danger), .ct-btn.s) {
    background: var(--sc-action-secondary-fallback);
  }
}

/* Primary actions—including the two calendar-create controls—use the shared
   sunset tokens. Secondary actions keep the quieter sky-blue glass treatment;
   product-specific controls must not introduce one-off hues. */

/* One select treatment for every ordinary authenticated form. Product-specific
   composite controls can opt out with .sc-native-select. Keep this last in the
   cascade so page-level field backgrounds cannot erase the shared SVG. */
body.app-body select:not([multiple]):not([size]):not(.sc-native-select):not(.sc-mui-native-input) {
  -webkit-appearance: none;
  appearance: none;
  background-image: var(--sc-select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--sc-select-chevron-inset) center;
  background-size: var(--sc-select-chevron-size);
  padding-inline-end: var(--sc-select-padding-end);
}

@media (forced-colors: active) {
  body.app-body select:not([multiple]):not([size]):not(.sc-native-select):not(.sc-mui-native-input) {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
    padding-inline-end: 12px;
  }
}


/* Owner appearance: the shared document controller resolves Light/Dark/System.
   Only owner entry points set data-sc-owner; public galleries, photographs,
   authored website previews, and document iframe contents keep their own paint.
   Fallbacks match the MUI dark palette so startup/recovery is readable before
   React mounts. Light values above and system forced colors remain unchanged. */
@media (forced-colors: none) {
  html[data-sc-owner][data-sc-color-scheme="dark"] {
    color-scheme: dark;
    --sky: #90b4dd;
    --sky-deep: #90b4dd;
    --peach: #e49a6c;
    --coral: #e49a6c;
    --coral-deep: #f0ae83;
    --accent: #f0ae83;
    --on-accent: #10141b;
    --ink: var(--scmui-palette-text-primary, #e7eaf0);
    --ink-soft: var(--scmui-palette-text-secondary, #aeb8c7);
    --line: var(--scmui-palette-divider, #343d4b);
    --card: rgba(24,30,39,.96);
    --card-solid: var(--scmui-palette-background-paper, #181e27);
    --surface: var(--card-solid);
    --surface-2: #202833;
    --surface-3: #242e3b;
    --surface-faint: rgba(231,234,240,.035);
    --surface-inset: rgba(231,234,240,.065);
    --page-grad-sky: rgba(144,180,221,.035);
    --page-grad-peach: rgba(228,154,108,.025);
    --page-base-1: #10141b;
    --page-base-2: #10141b;
    --gate-grad-sky: rgba(144,180,221,.035);
    --gate-grad-peach: rgba(228,154,108,.025);
    --border-glass: rgba(231,234,240,.10);
    --border-glass-strong: rgba(231,234,240,.16);
    --hairline: rgba(231,234,240,.10);
    --nav-sep: var(--line);
    --shadow: 0 12px 36px rgba(0,0,0,.24);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.18);
    --text-on-cell: var(--ink);
    --text-faint: var(--ink-soft);
    --text-muted-warm: var(--ink-soft);
    --cell-other-bg: #151b23;
    --today-num-bg: #f0ae83;
    --today-num-ink: #10141b;
    --overlay-sky: rgba(144,180,221,.08);
    --overlay-dark: rgba(231,234,240,.06);
    --overlay-coral: rgba(228,154,108,.12);
    --overlay-coral-soft: rgba(228,154,108,.075);
    --scrim: rgba(0,0,0,.55);
    --scrim-deep: rgba(0,0,0,.65);
    --tint-sky-hi: rgba(144,180,221,.10);
    --tint-peach-hi: rgba(228,154,108,.06);
    --tint-sky-mid: rgba(144,180,221,.06);
    --tint-peach-mid: rgba(228,154,108,.035);
    --tint-sky-hero: rgba(144,180,221,.065);
    --tint-peach-hero: rgba(228,154,108,.04);
    --tint-sky-map: rgba(144,180,221,.08);
    --tint-peach-map: rgba(228,154,108,.05);
    --cal-open-bg: rgba(144,180,221,.10);
    --cal-open-border: rgba(144,180,221,.28);
    --cal-booked-text: #f0ae83;
    --pill-gold-text: #e6ca83;
    --gold: #403923;
    --booked: #49302c;
    --success: #81c995;
    --success-2: #81c995;
    --success-3: #81c995;
    --success-4: #81c995;
    --success-icon: #81c995;
    --success-bg: rgba(129,201,149,.12);
    --success-bg-2: rgba(129,201,149,.14);
    --success-bg-3: rgba(129,201,149,.16);
    --success-bg-soft: rgba(129,201,149,.08);
    --gold-text: #e6ca83;
    --gold-bg: rgba(230,202,131,.12);
    --danger: #f28b82;
    --danger-2: #f28b82;
    --danger-3: #f28b82;
    --danger-4: #f28b82;
    --danger-bg: rgba(242,139,130,.08);
    --danger-bg-2: rgba(242,139,130,.10);
    --danger-border: rgba(242,139,130,.36);
    --danger-border-2: rgba(242,139,130,.28);
    --warn-text: #f0a476;
    --warn-bg: rgba(240,164,118,.12);
    --warn-border: rgba(240,164,118,.32);
    --guess-border: #f0a476;
    --guess-bg: #33261f;
    --replied-text: #90b4dd;
    --replied-bg: rgba(144,180,221,.12);
    --gbtn-bg: var(--surface-2);
    --gbtn-bg-hover: #283241;
    --gbtn-border: var(--line);
    --gbtn-shadow: none;
    --sc-on-accent: var(--on-accent);
    --sc-focus: #90b4dd;
    --sc-accent-glow: rgba(228,154,108,.16);
    --sc-glass-hi: inset 0 1px 0 rgba(231,234,240,.06);
    --sc-action-primary-bg: #e7eaf0;
    --sc-action-primary-bg-hover: #ffffff;
    --sc-action-primary-bg-active: #c3cad6;
    --sc-action-primary-text: #10141b;
    --sc-action-primary-border: #c3cad6;
    --sc-action-primary-shadow: none;
    --sc-action-primary-shadow-hover: none;
    --sc-action-secondary-bg: #202833;
    --sc-action-secondary-bg-hover: #283241;
    --sc-action-secondary-bg-active: #303b4b;
    --sc-action-secondary-fallback: #202833;
    --sc-action-secondary-text: var(--ink);
    --sc-action-secondary-border: var(--line);
    --sc-action-secondary-shadow: none;
    --sc-action-focus: #90b4dd;
    --sc-action-danger-bg: rgba(242,139,130,.10);
    --sc-action-danger-bg-hover: rgba(242,139,130,.16);
    --sc-action-danger-text: #f28b82;
    --sc-action-danger-border: rgba(242,139,130,.38);
    --sc-action-danger-strong-bg: #f28b82;
    --sc-action-danger-strong-bg-hover: #ffaaa2;
    --sc-action-disabled-bg: #252d39;
    --sc-action-disabled-text: #7a8494;
    --sc-action-disabled-border: var(--line);
    --sc-field-ring: rgba(144,180,221,.22);
    --sc-menu-bg: #202833;
    --sc-menu-border: var(--line);
    --sc-seg-track: rgba(231,234,240,.06);
    --sc-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aeb8c7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9.5 5 5 5-5'/%3E%3C/svg%3E");
  }

  html[data-sc-owner][data-sc-color-scheme="dark"] .day-row {
    background: var(--card-solid);
    border-color: var(--line);
    box-shadow: var(--shadow-sm);
  }
  html[data-sc-owner][data-sc-color-scheme="dark"] .modal-err {
    color: var(--danger); background: var(--danger-bg-2); border-color: var(--danger-border-2);
  }
  html[data-sc-owner][data-sc-color-scheme="dark"] .weekday-row { background: var(--surface-2); }
  html[data-sc-owner][data-sc-color-scheme="dark"] :is(.grid-card, .set-card, .cm-rail) {
    border-color: var(--line); box-shadow: var(--shadow-sm);
  }
  html[data-sc-owner][data-sc-color-scheme="dark"] .cell:hover { background: var(--overlay-sky); }
  html[data-sc-owner][data-sc-color-scheme="dark"] .cell.sel {
    background: var(--overlay-coral-soft); box-shadow: inset 0 0 0 2px rgba(228,154,108,.5);
  }
  html[data-sc-owner][data-sc-color-scheme="dark"] .more { color: var(--coral-deep); }
  html[data-sc-owner][data-sc-color-scheme="dark"] .ag-date:hover { background: var(--overlay-dark); }
  html[data-sc-owner][data-sc-color-scheme="dark"] .cal-toast { color: #10141b; }
  html[data-sc-owner][data-sc-color-scheme="dark"] :is(.tb-btn:not(.primary):not(.danger), .ct-btn.s):not(:disabled):is(:hover, :active) {
    background: var(--sc-action-secondary-bg-hover); color: var(--sc-action-secondary-text);
    border-color: var(--line); box-shadow: none;
  }
  html[data-sc-owner][data-sc-color-scheme="dark"] :is(.tb-btn.danger, .ct-btn.d):not(:disabled) {
    border-color: var(--sc-action-danger-border); box-shadow: none;
  }
  html[data-sc-owner][data-sc-color-scheme="dark"] :is(.sc-action--danger.sc-action--strong, .btn.primary.danger, .ct-btn.p.d) {
    color: #10141b;
  }
}

/* Joined subpage surfaces retain each workspace's existing scroll owner. */
.payments-workspace { gap: 0; }
.payments-workspace .cm-pane { padding: 0; }
.settings-wrap { gap: 0; }
.settings-section-page { display: flex; flex-direction: column; gap: 22px; }
#calendarScreen #content[data-calendar-page] { width: 100%; padding: clamp(12px, 1.5vw, 20px); }
#calendarScreen #content[data-calendar-page="month"] { padding: 0; }
#calendarScreen #content[data-calendar-page="month"] .grid-card {
  border: 0; border-radius: 11px; box-shadow: none;
}
#calendarScreen #content[data-calendar-page="month"] .weekday-row { background: var(--sc-nav-surface); }
#calendarScreen #content[data-calendar-page] .agenda { max-width: none; margin: 0; }

#clientsContent.sc-subpage-surface { width: 100%; max-width: 1272px; margin: 0 auto; }
#clientsContent .cm-pane { padding: 0; }
#clientsContent .cm-rail { box-shadow: none; border: 1px solid var(--sc-nav-line); background: transparent; border-radius: 10px; }
#rclientsWorkspaceNav:empty { display: none; }