/* =================================================================
   AI REVENUE ENGINE — DESIGN SYSTEM
   Shared tokens + components + style-guide shell.
   "Trusted Operator" direction.
   Extend tokens here FIRST; components reference tokens, never hex.
   ================================================================= */

/* ---- DESIGN TOKENS (single source of truth) ---- */
:root {
  /* Color: surfaces & ink */
  --ink-900: #14150f;   /* near-black, warm */
  --ink-700: #2b2c24;
  --ink-500: #54564a;   /* secondary text */
  --ink-300: #8d8f80;   /* muted / captions */
  --paper:   #f7f5ee;   /* warm off-white page */
  --paper-2: #efece1;   /* sunken surface */
  --card:    #ffffff;
  --line:    #e3dfd1;   /* hairline borders */
  --line-2:  #d2cdba;

  /* Color: brand */
  --signal-600: #1f6b3b; /* revenue / booked / "go" */
  --signal-500: #2f8c4f;
  --signal-400: #46a868;
  --signal-100: #e2f1e6;
  --amber-500:  #d98a1f;  /* urgency / missed leads */
  --amber-100:  #fbeccf;
  --alert-500:  #c0432e;  /* errors / lost revenue */
  --alert-100:  #f7ddd6;

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.75rem, 6vw, 4.75rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-cap: 0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* Spacing scale (8pt-ish) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* Radius & elevation */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20,21,15,.06), 0 1px 1px rgba(20,21,15,.04);
  --shadow-md: 0 6px 18px -6px rgba(20,21,15,.18);
  --shadow-lg: 0 24px 48px -16px rgba(20,21,15,.28);

  --maxw: 1120px;
  --sidenav-w: 264px;
  --transition: 180ms cubic-bezier(.2,.7,.3,1);
}

/* ---- RESET / BASE ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-900);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 100% 0%, rgba(70,168,104,.06), transparent 38%),
    radial-gradient(circle at 0% 100%, rgba(217,138,31,.05), transparent 40%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* =================================================================
   STYLE-GUIDE SHELL  (side nav + content area)
   ================================================================= */
.sg-shell { display: grid; grid-template-columns: var(--sidenav-w) 1fr; min-height: 100vh; }

.sg-nav {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  background: var(--ink-900);
  color: var(--paper);
  border-right: 1px solid rgba(255,255,255,.08);
  padding: var(--sp-5) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-5);
}
.sg-brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2); }
.sg-brand__mark {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  background: linear-gradient(160deg, #1d1e16, #0e0f0a);
  display: grid; place-items: center; color: var(--signal-400);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.sg-brand__name { font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.sg-brand__name small { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-300); text-transform: uppercase; font-weight: 500; margin-top: 2px; }

.sg-nav__group { display: flex; flex-direction: column; gap: 2px; }
.sg-nav__label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-300);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
}
.sg-nav__link {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; color: #cfd0c6;
  text-decoration: none; transition: background var(--transition), color var(--transition);
}
.sg-nav__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sg-nav__link.is-active { background: var(--signal-600); color: #fff; }
.sg-nav__link .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }
.sg-nav__placeholder {
  padding: 8px var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink-300); font-style: italic;
  border: 1px dashed rgba(255,255,255,.14); margin: var(--sp-1) 0;
}
.sg-nav__foot { margin-top: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--ink-300); padding: var(--sp-3); }

.sg-content { min-width: 0; }
.sg-main { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: var(--sp-7) var(--sp-6); }

/* mobile: nav collapses to a top bar via <details> */
.sg-mobilebar { display: none; }
@media (max-width: 880px) {
  .sg-shell { grid-template-columns: 1fr; }
  .sg-nav {
    /* pin the collapsed top bar (wordmark + MENU toggle) so navigation stays
       reachable after scrolling a long page; bg stays the existing ink token. */
    position: sticky; top: 0; z-index: 50;
    height: auto; overflow: visible;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
    border-right: 0; border-bottom: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow-md);
  }
  .sg-nav__group { display: none; } /* full nav lives in the mobile details menu */
  .sg-brand { flex: 1; }
  .sg-nav__foot { display: none; }
  .sg-mobilebar { display: block; width: 100%; }
  .sg-mobilebar summary {
    list-style: none; cursor: pointer; color: var(--paper);
    font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase;
    padding: var(--sp-2) var(--sp-3); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-sm);
    display: inline-flex; align-items: center; gap: var(--sp-2);
  }
  .sg-mobilebar summary::-webkit-details-marker { display: none; }
  .sg-mobilebar[open] summary { background: rgba(255,255,255,.06); }
  .sg-mobilebar .sg-nav__group { display: flex; margin-top: var(--sp-3); }
  /* open drawer scrolls independently if it's taller than the viewport, so the
     sticky bar above it is never clipped or pushed offscreen. */
  .sg-mobilebar[open] .sg-nav__group {
    max-height: calc(100vh - 124px); overflow-y: auto; overscroll-behavior: contain;
  }
  .sg-main { padding: var(--sp-6) var(--sp-5); }
}

/* =================================================================
   LAYOUT PRIMITIVES (documented in Foundations → Sections)
   ================================================================= */
.section { padding-block: var(--sp-8); }
.section:first-of-type { padding-top: var(--sp-4); }
.section + .section { border-top: 1px solid var(--line); }

.section__eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .14em;
  text-transform: uppercase; color: var(--signal-600);
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.section__eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--signal-500); display: inline-block; }
.section__title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: 600; max-width: 24ch; }
.section__lead { color: var(--ink-500); font-size: var(--fs-body-lg); max-width: 60ch; margin-top: var(--sp-3); }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }

.subhead { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-300); margin: var(--sp-7) 0 var(--sp-4); border-bottom: 1px dashed var(--line-2); padding-bottom: var(--sp-2); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.token-note { font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--ink-300); }
.stack-2 > * + * { margin-top: var(--sp-2); }
.muted { color: var(--ink-500); }

.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); }
.pill--green { background: var(--signal-100); color: var(--signal-600); }
.pill--amber { background: var(--amber-100); color: #8a5410; }

/* =================================================================
   SECTION BLOCKS (Foundations → Sections): hero / feature grid / banner
   ================================================================= */
.hero { position: relative; background: var(--ink-900); color: var(--paper); border-radius: var(--r-lg); padding: clamp(var(--sp-6), 6vw, var(--sp-9)); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 90% at 85% -10%, rgba(70,168,104,.30), transparent 60%), radial-gradient(50% 80% at 0% 120%, rgba(217,138,31,.18), transparent 55%); }
.hero > * { position: relative; z-index: 1; }
.hero__eyebrow { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .16em; text-transform: uppercase; color: var(--signal-400); }
.hero__title { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 600; letter-spacing: -.02em; margin-top: var(--sp-4); max-width: 16ch; }
.hero__title em { font-style: italic; color: var(--signal-400); }
.hero__lead { font-size: var(--fs-body-lg); color: #d7d6cb; max-width: 52ch; margin-top: var(--sp-5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--sp-7); margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.12); }
.hero__stat .n { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--paper); }
.hero__stat .l { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-300); }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 860px){ .feature-grid { grid-template-columns: 1fr; } }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.feature__icon { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: var(--sp-4); background: var(--signal-100); color: var(--signal-600); }
.feature__icon svg { width: 20px; height: 20px; }
.feature h3 { font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -.01em; }
.feature p { color: var(--ink-500); font-size: var(--fs-sm); margin-top: var(--sp-2); }

.banner { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-7); align-items: center; background: var(--signal-100); border: 1px solid #cbe3d0; border-radius: var(--r-lg); padding: clamp(var(--sp-5), 4vw, var(--sp-8)); }
@media (max-width: 760px){ .banner { grid-template-columns: 1fr; } }
.banner h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: 600; color: var(--signal-600); }
.banner p { color: var(--ink-700); margin-top: var(--sp-3); }
.banner__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* form layout grid (docs) */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-5); }
@media (max-width: 620px){ .form-grid { grid-template-columns: 1fr; } }

/* =================================================================
   COMPONENT: BUTTONS
   ================================================================= */
.btn {
  --btn-bg: var(--ink-900); --btn-fg: var(--paper); --btn-bd: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; line-height: 1; letter-spacing: .01em;
  padding: 13px 22px; border-radius: var(--r-pill); border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: 3px solid var(--signal-400); outline-offset: 2px; }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--primary { --btn-bg: var(--signal-600); --btn-fg: #fff; --btn-bd: var(--signal-600); }
.btn--primary:hover { --btn-bg: var(--signal-500); --btn-bd: var(--signal-500); }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--ink-900); --btn-bd: var(--line-2); }
.btn--secondary:hover { --btn-bd: var(--ink-900); background: var(--card); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-700); --btn-bd: transparent; box-shadow: none; }
.btn--ghost:hover { background: var(--paper-2); box-shadow: none; }
.btn--urgent { --btn-bg: var(--amber-500); --btn-fg: #2a1c03; --btn-bd: var(--amber-500); }
.btn--urgent:hover { filter: brightness(1.04); }
.btn--lg { padding: 16px 28px; font-size: var(--fs-body); }
.btn--sm { padding: 9px 15px; font-size: var(--fs-cap); }
.btn--block { width: 100%; }
.btn svg { width: 16px; height: 16px; }

/* loading spinner state */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; opacity: .9;
  animation: sg-spin .6s linear infinite;
}
.btn--primary.is-loading::after, .btn--urgent.is-loading::after { border-color: #fff; border-top-color: transparent; }
@keyframes sg-spin { to { transform: rotate(360deg); } }

/* =================================================================
   COMPONENT: TYPOGRAPHY SAMPLE CLASSES
   ================================================================= */
.type-display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 600; letter-spacing: -.02em; }
.type-h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-snug); font-weight: 600; letter-spacing: -.015em; }
.type-h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: 600; }
.type-h3 { font-family: var(--font-ui); font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 700; letter-spacing: -.01em; }
.type-lead { font-family: var(--font-ui); font-size: var(--fs-body-lg); color: var(--ink-500); }
.type-body { font-family: var(--font-ui); font-size: var(--fs-body); max-width: 62ch; }
.type-sm { font-size: var(--fs-sm); color: var(--ink-500); }
.type-cap { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-300); }
.type-data { font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 500; color: var(--ink-900); }
.type-spec { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); margin-top: var(--sp-2); }
.type-stack > * + * { margin-top: var(--sp-4); }
.fontcard { display: grid; gap: var(--sp-2); }
.fontcard .glyphs { font-size: 2.4rem; line-height: 1.1; }

/* =================================================================
   COMPONENT: FORM FIELDS  (introduced with the Login page)
   ================================================================= */
.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); display: flex; justify-content: space-between; align-items: baseline; }
.field__label a { font-size: var(--fs-cap); font-weight: 500; color: var(--signal-600); text-decoration: none; }
.field__label a:hover { text-decoration: underline; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .lead-icon { position: absolute; left: 14px; color: var(--ink-300); width: 18px; height: 18px; pointer-events: none; }
.input {
  width: 100%; font-family: var(--font-ui); font-size: var(--fs-body); color: var(--ink-900);
  background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  padding: 13px 14px 13px 42px; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input::placeholder { color: var(--ink-300); }
.input:hover { border-color: var(--ink-300); }
.input:focus { outline: none; border-color: var(--signal-500); box-shadow: 0 0 0 3px var(--signal-100); }
.input-wrap .trail-btn {
  position: absolute; right: 8px; background: none; border: 0; cursor: pointer; color: var(--ink-300);
  padding: 6px; border-radius: var(--r-sm); display: grid; place-items: center;
}
.input-wrap .trail-btn:hover { color: var(--ink-700); background: var(--paper-2); }
.input-wrap .trail-btn svg { width: 18px; height: 18px; }

/* error state */
.field.has-error .input { border-color: var(--alert-500); background: #fffaf9; }
.field.has-error .input:focus { box-shadow: 0 0 0 3px var(--alert-100); }
.field__error { display: none; align-items: center; gap: 6px; font-size: var(--fs-cap); color: var(--alert-500); font-weight: 500; }
.field.has-error .field__error { display: flex; }
.field__error svg { width: 14px; height: 14px; flex: none; }

/* form-level alert banner */
.form-alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--alert-100); border: 1px solid #eeb7ab; border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); color: #7d2718; font-size: var(--fs-sm); margin-bottom: var(--sp-5);
}
.form-alert svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--alert-500); }
.form-alert strong { font-weight: 700; }

/* checkbox row */
.check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-700); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--signal-600); cursor: pointer; }

/* helper text */
.field__help { font-size: var(--fs-cap); color: var(--ink-500); }

/* =================================================================
   PAGE: LOGIN  (split layout — brand panel + auth card)
   Lives inside the style-guide content area as a framed preview.
   ================================================================= */
.page-frame { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.page-frame__bar { display: flex; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-4); background: var(--paper-2); border-bottom: 1px solid var(--line); }
.page-frame__bar .dotrow { display: flex; gap: 6px; }
.page-frame__bar .dotrow span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.page-frame__bar .url { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); }

.auth { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 600px; background: var(--card); }
@media (max-width: 820px){ .auth { grid-template-columns: 1fr; min-height: 0; } }

/* left brand/value panel */
.auth__aside {
  position: relative; overflow: hidden; color: var(--paper);
  background: var(--ink-900);
  padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-7);
}
.auth__aside::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(70,168,104,.30), transparent 60%), radial-gradient(60% 50% at -10% 110%, rgba(217,138,31,.16), transparent 55%); }
.auth__aside > * { position: relative; z-index: 1; }
.auth__brand { display: flex; align-items: center; gap: var(--sp-3); font-weight: 700; }
.auth__brand .mark { width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,.06); display: grid; place-items: center; color: var(--signal-400); font-family: var(--font-display); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.auth__pitch h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.auth__pitch h2 em { font-style: italic; color: var(--signal-400); }
.auth__pitch p { color: #d2d3c8; margin-top: var(--sp-4); max-width: 38ch; }
.auth__proof { display: grid; gap: var(--sp-3); }
.auth__proof .stat { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: #e7e7dd; }
.auth__proof .stat i, .auth__proof .stat svg { width: 18px; height: 18px; color: var(--signal-400); flex: none; }

/* right form panel */
.auth__main { padding: clamp(var(--sp-6), 4vw, var(--sp-8)); display: flex; flex-direction: column; justify-content: center; }
.auth__form { width: 100%; max-width: 380px; margin-inline: auto; }
.auth__title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.015em; }
.auth__sub { color: var(--ink-500); margin-top: var(--sp-2); margin-bottom: var(--sp-6); }
.auth__divider { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink-300); font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-mono); margin: var(--sp-5) 0; }
.auth__divider::before, .auth__divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.auth__row { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-4) 0 var(--sp-5); }
.auth__foot { text-align: center; margin-top: var(--sp-6); color: var(--ink-500); font-size: var(--fs-sm); }
.auth__foot a { color: var(--signal-600); font-weight: 600; text-decoration: none; }
.auth__foot a:hover { text-decoration: underline; }
.auth__legal { text-align: center; margin-top: var(--sp-5); color: var(--ink-300); font-size: 11px; }

/* login state gallery */
.state-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
@media (max-width: 760px){ .state-grid { grid-template-columns: 1fr; } }
.state-card { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.state-card figcaption { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.state-card__body { padding: var(--sp-5); }
/* force the focus-ring look for the static "focused" demo */
.input.is-focus-demo { border-color: var(--signal-500); box-shadow: 0 0 0 3px var(--signal-100); }

/* native select styled as a control (chevron supplied by wrapper) */
.select-wrap { position: relative; display: flex; align-items: center; }
.select-wrap .lead-icon { position: absolute; left: 14px; color: var(--ink-300); width: 18px; height: 18px; pointer-events: none; }
.select-wrap .chevron { position: absolute; right: 14px; color: var(--ink-500); width: 18px; height: 18px; pointer-events: none; transition: transform var(--transition); }
.select {
  width: 100%; font-family: var(--font-ui); font-size: var(--fs-body); color: var(--ink-900);
  background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-md);
  padding: 13px 42px 13px 42px; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.select:hover { border-color: var(--ink-300); }
.select:focus { outline: none; border-color: var(--signal-500); box-shadow: 0 0 0 3px var(--signal-100); }
.select:focus + .chevron { transform: rotate(180deg); }
.select:disabled, .input:disabled { background: var(--paper-2); color: var(--ink-300); cursor: not-allowed; border-color: var(--line); }
.select[data-placeholder="true"] { color: var(--ink-300); }
.select-wrap.no-lead .select { padding-left: 14px; }

/* custom dropdown menu (to demonstrate the OPEN state statically) */
.menu {
  list-style: none; margin: var(--sp-2) 0 0; padding: var(--sp-2);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); max-width: 340px;
}
/* each row is its own padded pill; the container's --sp-2 padding gives the
   hover/selected highlight an even inset so it never touches the menu border. */
.menu li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 9px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); cursor: pointer;
}
.menu li + li { margin-top: 2px; }
.menu li:hover, .menu li.is-focused { background: var(--paper-2); }
.menu li.is-selected { background: var(--signal-100); color: var(--signal-600); font-weight: 600; }
.menu li.is-selected svg { width: 16px; height: 16px; color: var(--signal-600); }
.menu li.is-disabled { color: var(--ink-300); cursor: not-allowed; }
.menu li.is-disabled:hover { background: transparent; }

/* menu variant: rows with a LEADING icon (e.g. an actions menu).
   Reuses .menu / .menu li; rows left-align with the icon gutter. */
.menu--icons li { justify-content: flex-start; gap: var(--sp-3); }
.menu--icons li .mi { width: 17px; height: 17px; color: var(--ink-500); flex: none; }
.menu--icons li.is-selected .mi { color: var(--signal-600); }
.menu--icons li.is-disabled .mi { color: var(--ink-300); }
.menu--icons li .mi-trail { margin-left: auto; color: var(--ink-300); }   /* optional trailing hint/check */
.menu--icons li.is-selected .mi-trail { color: var(--signal-600); }
/* destructive / danger row (e.g. Delete) */
.menu li.is-danger { color: var(--alert-500); }
.menu li.is-danger .mi { color: var(--alert-500); }
.menu li.is-danger:hover { background: var(--alert-100); }
/* a divider between groups of menu items */
.menu .menu-sep { height: 1px; background: var(--line); margin: var(--sp-2) 4px; padding: 0; cursor: default; }
.menu .menu-sep:hover { background: var(--line); }

/* =================================================================
   FLOW STEPS (Forgot-password gallery): numbered step markers
   ================================================================= */
.flow-steps { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.flow-steps .step { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-500); }
.flow-steps .step .num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; background: var(--signal-100); color: var(--signal-600); flex: none; }
.flow-steps .arrow { color: var(--ink-300); width: 16px; height: 16px; }

/* a centered auth card variant (single-column auth, no aside) used by flow steps */
.authcard { max-width: 420px; margin-inline: auto; padding: clamp(var(--sp-6), 4vw, var(--sp-7)); background: var(--card); }
.authcard .auth__title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.015em; }
.authcard__icon { width: 56px; height: 56px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--signal-100); color: var(--signal-600); margin-bottom: var(--sp-5); }
.authcard__icon.is-amber { background: var(--amber-100); color: #8a5410; }
.authcard__icon svg { width: 26px; height: 26px; }
.authcard__back { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-5); color: var(--ink-500); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.authcard__back:hover { color: var(--ink-900); }
.authcard__back svg { width: 16px; height: 16px; }

/* password strength meter (reused control) */
.pw-meter { display: flex; gap: 4px; margin-top: var(--sp-2); }
.pw-meter span { height: 5px; flex: 1; border-radius: var(--r-pill); background: var(--line-2); }
.pw-meter[data-level="weak"] span:nth-child(1) { background: var(--alert-500); }
.pw-meter[data-level="ok"] span:nth-child(-n+2) { background: var(--amber-500); }
.pw-meter[data-level="strong"] span { background: var(--signal-500); }
.pw-hint { font-size: var(--fs-cap); color: var(--ink-500); margin-top: 6px; }
.pw-hint.is-weak { color: var(--alert-500); font-weight: 500; }

/* =================================================================
   EMAIL MOCKUPS  (DESIGN PREVIEW ONLY — not email-safe HTML)
   Rendered as a centered card on a muted backdrop.
   ================================================================= */
.email-stage { background: #e8e5da; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(var(--sp-5), 5vw, var(--sp-8)); }
.email { max-width: 600px; margin-inline: auto; background: var(--card); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.email__preheader { font-size: 11px; color: var(--ink-300); text-align: center; padding: var(--sp-2); }

/* header / logo lockup */
.email__header { background: var(--ink-900); color: var(--paper); padding: var(--sp-6) var(--sp-7); display: flex; align-items: center; gap: var(--sp-3); }
.email__header .mark { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.06); display: grid; place-items: center; color: var(--signal-400); font-family: var(--font-display); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); flex: none; }
.email__header .name { font-weight: 700; letter-spacing: -.01em; }
.email__header .name small { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-300); font-weight: 500; }

/* body content region */
.email__body { padding: clamp(var(--sp-6), 5vw, var(--sp-8)) clamp(var(--sp-5), 5vw, var(--sp-7)); }
.email__icon { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; background: var(--signal-100); color: var(--signal-600); margin-bottom: var(--sp-5); }
.email__icon.is-amber { background: var(--amber-100); color: #8a5410; }
.email__icon svg { width: 28px; height: 28px; }
.email__h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.email__p { color: var(--ink-700); font-size: var(--fs-body-lg); margin-top: var(--sp-4); max-width: 52ch; }
.email__p.sm { font-size: var(--fs-body); color: var(--ink-500); }
.email__cta { margin: var(--sp-6) 0; }
.email__fallback { font-size: var(--fs-sm); color: var(--ink-500); border-top: 1px solid var(--line); padding-top: var(--sp-5); margin-top: var(--sp-6); word-break: break-all; }
.email__fallback a { color: var(--signal-600); }
.email__note { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--paper-2); border-radius: var(--r-md); padding: var(--sp-4); margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--ink-700); }
.email__note svg { width: 18px; height: 18px; color: var(--ink-500); flex: none; margin-top: 2px; }

/* footer */
.email__footer { background: var(--paper-2); border-top: 1px solid var(--line); padding: var(--sp-6) var(--sp-7); text-align: center; }
.email__footer .biz { font-weight: 600; color: var(--ink-700); }
.email__footer .meta { font-size: var(--fs-cap); color: var(--ink-300); margin-top: var(--sp-2); line-height: 1.7; }
.email__footer a { color: var(--ink-500); }

/* slot labels when documenting the base template */
.slot { position: relative; outline: 1.5px dashed var(--line-2); outline-offset: 4px; border-radius: var(--r-sm); }
.slot::before { content: attr(data-slot); position: absolute; top: -10px; left: 0; transform: translateY(-100%); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--signal-600); background: var(--card); padding: 2px 6px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.slot + .slot { margin-top: var(--sp-7); }

/* =================================================================
   FOUNDATION: CALENDAR
   ================================================================= */
.cal { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); max-width: 380px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.cal__title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.cal__nav { display: flex; gap: var(--sp-1); }
.cal__nav button { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink-700); cursor: pointer; display: grid; place-items: center; transition: background var(--transition), border-color var(--transition); }
.cal__nav button:hover { background: var(--paper-2); border-color: var(--line-2); }
.cal__nav button svg { width: 18px; height: 18px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-300); text-align: center; padding-bottom: var(--sp-2); }
.cal__day { position: relative; aspect-ratio: 1; border: 0; background: transparent; border-radius: var(--r-sm); cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink-900); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: background var(--transition); }
.cal__day:hover { background: var(--paper-2); }
.cal__day.is-muted { color: var(--ink-300); }            /* prev/next month */
.cal__day.is-past { color: var(--ink-300); cursor: not-allowed; }
.cal__day.is-past:hover { background: transparent; }
.cal__day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--signal-400); }
.cal__day.is-selected { background: var(--signal-600); color: #fff; font-weight: 700; }
.cal__day.is-selected .cal__dot { background: #fff; }
/* range selection */
.cal__day.in-range { background: var(--signal-100); border-radius: 0; }
.cal__day.range-start { background: var(--signal-600); color: #fff; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.cal__day.range-end { background: var(--signal-600); color: #fff; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
/* appointment indicators */
.cal__dots { display: flex; gap: 2px; position: absolute; bottom: 6px; }
.cal__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--signal-500); }
.cal__count { font-family: var(--font-mono); font-size: 9px; color: var(--signal-600); font-weight: 600; }
.cal__empty { text-align: center; color: var(--ink-300); font-size: var(--fs-sm); padding: var(--sp-5) 0; }

/* compact date-picker popover tied to an input */
.datepick { max-width: 320px; }
.datepick .cal { box-shadow: var(--shadow-lg); margin-top: var(--sp-2); }

/* agenda / day list */
.agenda { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; max-width: 420px; }
.agenda__head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; }
.agenda__row { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.agenda__row:last-child { border-bottom: 0; }
.agenda__time { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-500); }
.agenda__appt { border-left: 3px solid var(--signal-500); padding-left: var(--sp-3); }
.agenda__appt .who { font-weight: 600; font-size: var(--fs-sm); }
.agenda__appt .what { font-size: var(--fs-cap); color: var(--ink-500); }
.agenda__free { color: var(--ink-300); font-size: var(--fs-sm); font-style: italic; align-self: center; }

/* =================================================================
   FOUNDATION: METRIC CARDS
   ================================================================= */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 900px){ .metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .metric-grid { grid-template-columns: 1fr; } }
.metric { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.metric:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.metric__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.metric__label { font-size: var(--fs-sm); color: var(--ink-500); font-weight: 500; }
.metric__icon { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--paper-2); color: var(--ink-500); flex: none; }
.metric__icon svg { width: 18px; height: 18px; }
.metric__value { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; letter-spacing: -.02em; margin-top: var(--sp-3); line-height: 1; }
.metric__trend { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 600; margin-top: var(--sp-3); }
.metric__trend svg { width: 15px; height: 15px; }
.metric__trend.up { color: var(--signal-600); }
.metric__trend.down { color: var(--alert-500); }
.metric__trend .ctx { color: var(--ink-300); font-weight: 400; }
/* amber accent for the "missed/recovered" metric */
.metric.is-recovery .metric__icon { background: var(--amber-100); color: #8a5410; }
/* sparkline */
.metric__spark { margin-top: var(--sp-4); display: block; width: 100%; height: 36px; }
/* skeleton loading */
.metric.is-loading .sk { background: linear-gradient(90deg, var(--paper-2) 25%, #e8e4d8 37%, var(--paper-2) 63%); background-size: 400% 100%; animation: sk-shimmer 1.2s ease infinite; border-radius: var(--r-sm); display: block; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk-line { height: 12px; }
.sk-value { height: 30px; width: 60%; margin-top: var(--sp-4); }
.sk-trend { height: 12px; width: 40%; margin-top: var(--sp-4); }
/* empty / no data */
.metric.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink-300); min-height: 150px; }
.metric.is-empty svg { width: 24px; height: 24px; margin-bottom: var(--sp-2); }

/* =================================================================
   FOUNDATION: TABLES
   ================================================================= */
.table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.table-scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl thead th { text-align: left; font-size: var(--fs-cap); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--paper-2); white-space: nowrap; }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable .sort { display: inline-flex; align-items: center; gap: 4px; }
.tbl th.sortable svg { width: 14px; height: 14px; opacity: .5; }
.tbl th.sortable.is-sorted svg { opacity: 1; color: var(--signal-600); }
.tbl tbody td { padding: var(--sp-4); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--paper); }
.tbl .who { font-weight: 600; color: var(--ink-900); }
.tbl .sub { color: var(--ink-500); font-size: var(--fs-cap); }
.tbl .mono { font-family: var(--font-mono); color: var(--ink-700); }

/* status badges (reuse semantic colors) */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-cap); font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--booked { background: var(--signal-100); color: var(--signal-600); }
.badge--pending { background: var(--amber-100); color: #8a5410; }
.badge--noshow { background: var(--alert-100); color: var(--alert-500); }

/* row actions: full buttons on desktop, icon-only 44px on mobile */
.row-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.icon-btn { width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink-500); cursor: pointer; display: grid; place-items: center; transition: background var(--transition), color var(--transition), border-color var(--transition); }
.icon-btn:hover { background: var(--paper-2); color: var(--ink-900); border-color: var(--line-2); }
.icon-btn svg { width: 17px; height: 17px; }

/* pagination */
.tbl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); flex-wrap: wrap; }
.tbl-foot .count { font-size: var(--fs-cap); color: var(--ink-500); font-family: var(--font-mono); }
.pager { display: flex; gap: var(--sp-1); }
.pager button { min-width: 34px; height: 34px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink-700); cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-sm); display: grid; place-items: center; }
.pager button:hover:not(:disabled) { background: var(--paper-2); }
.pager button.is-current { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pager button svg { width: 16px; height: 16px; }

/* table empty + skeleton */
.tbl-empty { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--ink-500); }
.tbl-empty .ic { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--paper-2); display: grid; place-items: center; margin: 0 auto var(--sp-4); color: var(--ink-300); }
.tbl-empty .ic svg { width: 24px; height: 24px; }
.tbl-empty h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink-900); }
.tbl-empty p { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.sk-row td { padding: var(--sp-4); }
.sk-cell { height: 14px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--paper-2) 25%, #e8e4d8 37%, var(--paper-2) 63%); background-size: 400% 100%; animation: sk-shimmer 1.2s ease infinite; }

/* MOBILE: stack table rows into cards at phone width (chosen over scroll
   for appointments/leads — each row becomes a labelled card) */
@media (max-width: 600px) {
  /* display:block (not table) so the element shrinks to the container instead of
     keeping its table-layout natural width and overflowing the phone viewport. */
  .tbl.tbl--stack { min-width: 0; width: 100%; display: block; }
  /* a stacked table no longer needs the horizontal scroller around it; let the
     cards flow to the container width instead of keeping the table's natural width. */
  .table-scroll:has(.tbl--stack) { overflow-x: visible; }
  .tbl.tbl--stack thead { display: none; }
  .tbl.tbl--stack tbody, .tbl.tbl--stack td { display: block; width: 100%; }
  /* the row is a block card; auto width + margins keep it inside the container
     (width:100% + margins would overflow by the margin amount). */
  .tbl.tbl--stack tr { display: block; width: auto; border: 1px solid var(--line); border-radius: var(--r-md); margin: var(--sp-3); padding: var(--sp-2); }
  .tbl.tbl--stack td { border: 0; padding: var(--sp-2) var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-width: 0; }
  .tbl.tbl--stack td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-300); flex: none; }
  /* value side may shrink/wrap so a long mono value can't push the row past the card */
  .tbl.tbl--stack td > * { min-width: 0; overflow-wrap: anywhere; text-align: right; }
  .tbl.tbl--stack td.cell-actions { justify-content: flex-end; }
  .tbl.tbl--stack td.cell-actions::before { display: none; }
  .row-actions .icon-btn { width: 44px; height: 44px; }  /* 44px tap targets on mobile */
}

/* =================================================================
   FOUNDATION: SEARCH INPUTS
   Reuses .input sizing; adds leading search icon + trailing clear/spinner.
   ================================================================= */
.search { position: relative; display: flex; align-items: center; max-width: 420px; }
.search .lead-icon { position: absolute; left: 14px; color: var(--ink-300); width: 18px; height: 18px; pointer-events: none; }
.search .input { padding-left: 42px; padding-right: 42px; }
.search .clear-btn { position: absolute; right: 8px; background: none; border: 0; cursor: pointer; color: var(--ink-300); padding: 6px; border-radius: var(--r-sm); display: grid; place-items: center; }
.search .clear-btn:hover { color: var(--ink-700); background: var(--paper-2); }
.search .clear-btn svg { width: 16px; height: 16px; }
/* hide clear button until the field has a value (JS toggles .has-value) */
.search:not(.has-value) .clear-btn { display: none; }
/* trailing spinner while searching */
.search .search-spinner { position: absolute; right: 14px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--signal-500); animation: sg-spin .6s linear infinite; }
.search.is-loading .clear-btn { display: none; }

/* typeahead suggestions */
.typeahead { position: relative; max-width: 420px; }
.typeahead .menu { position: absolute; left: 0; right: 0; max-width: none; z-index: 20; }
.typeahead .menu li { justify-content: flex-start; }
.typeahead .menu .ta-icon { width: 16px; height: 16px; color: var(--ink-300); flex: none; }
.typeahead .menu .ta-sub { color: var(--ink-300); font-size: var(--fs-cap); margin-left: auto; }
.typeahead .menu .ta-empty { color: var(--ink-300); font-style: italic; cursor: default; }
.typeahead .menu .ta-empty:hover { background: transparent; }

/* search composed into a table header / toolbar */
.tbl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tbl-toolbar .search { flex: 1; min-width: 200px; max-width: 360px; }
.tbl-toolbar .toolbar-actions { display: flex; gap: var(--sp-2); }

/* =================================================================
   FOUNDATION: SCHEDULING CALENDAR (large month / week / day)
   ================================================================= */
.sched { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }

/* header bar */
.sched__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sched__left { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sched__period { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; min-width: 9ch; }
.sched__navbtns { display: flex; gap: var(--sp-1); }
.sched__navbtns button { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink-700); cursor: pointer; display: grid; place-items: center; }
.sched__navbtns button:hover { background: var(--paper-2); }
.sched__navbtns button svg { width: 18px; height: 18px; }

/* segmented view toggle (also reused for generic segmented groups) */
.segmented { display: inline-flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.segmented button { border: 0; background: transparent; cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-500); padding: 7px 16px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px; transition: background var(--transition), color var(--transition), box-shadow var(--transition); }
.segmented button svg { width: 15px; height: 15px; }
.segmented button:hover { color: var(--ink-900); }
.segmented button[aria-pressed="true"], .segmented button.is-active { background: var(--card); color: var(--ink-900); box-shadow: var(--shadow-sm); }
.segmented button:disabled { opacity: .45; cursor: not-allowed; }

/* view panes */
.sched__view { display: none; }
.sched__view.is-active { display: block; }

/* appointment chip (uses semantic status colors, ties to Tables badges) */
.appt-chip { display: flex; align-items: center; gap: 5px; font-size: var(--fs-cap); font-weight: 600; padding: 3px 7px; border-radius: var(--r-sm); border-left: 3px solid; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt-chip .t { font-family: var(--font-mono); font-weight: 500; opacity: .85; }
.appt-chip--booked { background: var(--signal-100); color: var(--signal-600); border-color: var(--signal-500); }
.appt-chip--pending { background: var(--amber-100); color: #8a5410; border-color: var(--amber-500); }
.appt-chip--noshow { background: var(--alert-100); color: var(--alert-500); border-color: var(--alert-500); }

/* ---- MONTH (large) ---- */
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.month-dow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-300); text-align: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.month-cell { min-height: 116px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.month-cell:nth-child(7n) { border-right: 0; }
.month-cell.is-muted { background: var(--paper); }
.month-cell.is-muted .month-cell__num { color: var(--ink-300); }
.month-cell__num { font-size: var(--fs-sm); font-weight: 600; align-self: flex-start; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.month-cell.is-today .month-cell__num { background: var(--signal-600); color: #fff; }
.month-cell.is-selected { box-shadow: inset 0 0 0 2px var(--signal-400); }
.month-cell__more { font-size: var(--fs-cap); color: var(--ink-500); font-weight: 600; padding-left: 4px; cursor: pointer; }
.month-cell__more:hover { color: var(--signal-600); }

/* ---- WEEK / DAY shared time grid ---- */
.timegrid { display: grid; max-height: 560px; overflow-y: auto; position: relative; }
.timegrid--week { grid-template-columns: 56px repeat(7, 1fr); }
.timegrid--day { grid-template-columns: 56px 1fr; }
.timegrid__corner { position: sticky; top: 0; z-index: 3; background: var(--card); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.timegrid__colhead { position: sticky; top: 0; z-index: 3; background: var(--card); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; padding: var(--sp-2) 0; }
.timegrid__colhead:last-child { border-right: 0; }
.timegrid__colhead .dow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-300); }
.timegrid__colhead .dnum { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.timegrid__colhead.is-today .dnum { color: #fff; background: var(--signal-600); width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; margin-top: 2px; }
/* the body is a sub-grid of hour rows; we lay columns as flex tracks */
.timegrid__axis { border-right: 1px solid var(--line); }
.timegrid__axis .hr { height: 52px; position: relative; font-family: var(--font-mono); font-size: 10px; color: var(--ink-300); padding-right: 6px; text-align: right; }
.timegrid__axis .hr span { position: relative; top: -6px; }
.timegrid__col { border-right: 1px solid var(--line); position: relative; }
.timegrid__col:last-child { border-right: 0; }
.timegrid__col.is-today { background: rgba(70,168,104,.05); }
.timegrid__col .hr { height: 52px; border-bottom: 1px solid var(--line); }
/* positioned appointment block */
.appt-block { position: absolute; left: 4px; right: 4px; border-radius: var(--r-sm); border-left: 3px solid; padding: 5px 7px; font-size: var(--fs-cap); overflow: hidden; box-shadow: var(--shadow-sm); }
.appt-block .who { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt-block .meta { opacity: .85; font-family: var(--font-mono); font-size: 10px; }
.appt-block--booked { background: var(--signal-100); color: var(--signal-600); border-color: var(--signal-500); }
.appt-block--pending { background: var(--amber-100); color: #8a5410; border-color: var(--amber-500); }
.appt-block--noshow { background: var(--alert-100); color: var(--alert-500); border-color: var(--alert-500); }
/* side-by-side overlap: width halved */
.appt-block.col-1of2 { right: 50%; }
.appt-block.col-2of2 { left: 50%; }
/* current-time indicator */
.now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--alert-500); z-index: 4; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--alert-500); }

/* ---- DAY view block (more detail) ---- */
.timegrid--day .appt-block { padding: 7px 10px; font-size: var(--fs-sm); }
.timegrid--day .appt-block .badge { margin-top: 4px; }

/* empty / skeleton inside scheduler */
.sched__empty { text-align: center; padding: var(--sp-9) var(--sp-5); color: var(--ink-500); }
.sched__empty .ic { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--paper-2); display: grid; place-items: center; margin: 0 auto var(--sp-4); color: var(--ink-300); }
.sched__empty .ic svg { width: 26px; height: 26px; }
.sched__empty h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink-900); }
.sched-sk { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.sched-sk .bar { height: 44px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--paper-2) 25%, #e8e4d8 37%, var(--paper-2) 63%); background-size: 400% 100%; animation: sk-shimmer 1.2s ease infinite; }

/* ---- MOBILE (~390px): Day view is the most usable; Week scrolls ---- */
@media (max-width: 760px) {
  .month-cell { min-height: 72px; }
  /* month chips shrink to dots on phones */
  .month-cell .appt-chip { padding: 0; border: 0; width: 7px; height: 7px; border-radius: 50%; overflow: hidden; text-indent: -999px; display: inline-block; }
  .month-cell .appt-chip--booked { background: var(--signal-500); }
  .month-cell .appt-chip--pending { background: var(--amber-500); }
  .month-cell .appt-chip--noshow { background: var(--alert-500); }
  .month-cell__chips { display: flex; gap: 3px; flex-wrap: wrap; padding-left: 4px; }
  .month-cell__more { font-size: 10px; }
  /* week view scrolls horizontally with min column width */
  .timegrid--week { overflow-x: auto; }
  .timegrid--week .timegrid__colhead, .timegrid--week .timegrid__col { min-width: 92px; }
  .segmented button { padding: 7px 11px; }
  .segmented button .seg-label { display: none; }  /* icon-only toggle on phones */
}

/* =================================================================
   FOUNDATION: BUTTONS & ACTIONS
   ================================================================= */
/* --- Button group (joined buttons, shared borders) --- */
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1.5px; box-shadow: none; }
.btn-group .btn:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.btn-group .btn:hover { transform: none; z-index: 1; }

/* --- Split button (primary action + dropdown caret) --- */
.split { display: inline-flex; position: relative; }
.split .btn { box-shadow: none; }
.split .split-main { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.split .split-caret { border-radius: 0 var(--r-pill) var(--r-pill) 0; padding-left: 12px; padding-right: 12px; margin-left: -1.5px; border-left-color: rgba(255,255,255,.25); }
.split .split-caret:hover { transform: none; }
.split .menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px; z-index: 20; }

/* --- Action row (card header / toolbar cluster) --- */
.action-row { display: flex; align-items: center; gap: var(--sp-2); }
.action-row .btn { box-shadow: none; }
/* labels shown on desktop; the full button collapses to icon-only on mobile */
.action-row .btn .btn-label { display: inline; }
@media (max-width: 760px) {
  .action-row .btn { padding: 0; width: 44px; height: 44px; border-radius: 50%; }
  .action-row .btn .btn-label { display: none; }
  .action-row .btn svg { width: 18px; height: 18px; }
  .action-row .btn--primary { width: 44px; }
}

/* --- Pills / Badges / Tags --- */
/* status pills reuse .badge (defined in Tables) for consistency */
.badge--active { background: var(--signal-100); color: var(--signal-600); }
.badge--neutral { background: var(--paper-2); color: var(--ink-500); }
.badge--neutral::before { background: var(--ink-300); }
/* long-form annotation badge (style-guide doc captions): allow it to wrap so it
   never runs off a narrow viewport. Status pills keep their default nowrap. */
.badge--wrap { white-space: normal; text-align: left; align-items: flex-start; }
.badge--wrap::before { margin-top: 6px; flex: none; }

/* removable filter / choice pill */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 500; padding: 5px 6px 5px 12px; border-radius: var(--r-pill); background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-700); }
.tag.is-selected { background: var(--signal-100); border-color: #bcdcc4; color: var(--signal-600); }
.tag.is-disabled { opacity: .5; pointer-events: none; }
.tag .tag-x { width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: currentColor; cursor: pointer; display: grid; place-items: center; opacity: .6; transition: opacity var(--transition), background var(--transition); }
.tag .tag-x:hover { opacity: 1; background: rgba(0,0,0,.07); }
.tag .tag-x svg { width: 13px; height: 13px; }
/* choice pill (toggle, no x) */
.chip-choice { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; padding: 7px 14px; border-radius: var(--r-pill); background: var(--card); border: 1.5px solid var(--line-2); color: var(--ink-700); cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition); }
.chip-choice:hover { border-color: var(--ink-300); }
.chip-choice.is-selected { background: var(--signal-600); border-color: var(--signal-600); color: #fff; }
.chip-choice:disabled { opacity: .45; cursor: not-allowed; }
/* count / notification pill */
.count-pill { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--alert-500); color: #fff; font-size: 11px; font-weight: 700; font-family: var(--font-mono); }
.count-pill--neutral { background: var(--ink-700); }
.count-pill--green { background: var(--signal-600); }

/* --- Icon buttons (standalone) --- */
/* base .icon-btn already defined in Tables; add sizes, variants, states here */
.icon-btn--sm { width: 32px; height: 32px; }
.icon-btn--sm svg { width: 15px; height: 15px; }
.icon-btn--md { width: 44px; height: 44px; }       /* 44px tap target */
.icon-btn--lg { width: 52px; height: 52px; }
.icon-btn--lg svg { width: 20px; height: 20px; }
.icon-btn--ghost { border-color: transparent; background: transparent; }
.icon-btn--ghost:hover { background: var(--paper-2); border-color: transparent; }
.icon-btn--subtle { border-color: transparent; background: var(--paper-2); }
.icon-btn--danger { color: var(--alert-500); border-color: var(--line); }
.icon-btn--danger:hover { background: var(--alert-100); border-color: #eeb7ab; color: var(--alert-500); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn:disabled:hover { background: var(--card); color: var(--ink-500); }
.icon-btn.is-loading { color: transparent; pointer-events: none; position: relative; }
.icon-btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--signal-500); animation: sg-spin .6s linear infinite; }

/* =================================================================
   PAGES: ACCOUNT / SETTINGS (sub-nav layout)
   ================================================================= */
.settings { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 820px){ .settings { grid-template-columns: 1fr; gap: var(--sp-5); } }
.settings__nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--sp-5); }
@media (max-width: 820px){ .settings__nav { position: static; flex-direction: row; overflow-x: auto; border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); gap: var(--sp-2); } }
.settings__tab { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-500); text-decoration: none; white-space: nowrap; transition: background var(--transition), color var(--transition); }
.settings__tab svg { width: 17px; height: 17px; }
.settings__tab:hover { background: var(--paper-2); color: var(--ink-900); }
.settings__tab.is-active { background: var(--signal-100); color: var(--signal-600); }
.settings__body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }

/* settings card block */
.set-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.set-card__head { padding: var(--sp-5); border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.set-card__head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.set-card__head p { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 4px; }
.set-card__body { padding: var(--sp-5); }
.set-card__foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.set-card--danger { border-color: #eeb7ab; }
.set-card--danger .set-card__head { background: var(--alert-100); }
.set-card--danger .set-card__head h3 { color: var(--alert-500); }

/* two-column field grid inside settings */
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
@media (max-width: 560px){ .set-grid { grid-template-columns: 1fr; } }
.set-grid .field.col-span { grid-column: 1 / -1; }

/* avatar uploader */
.avatar-row { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--signal-600); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; flex: none; position: relative; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* dirty indicator + saved toast */
.dirty-hint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-cap); color: var(--amber-500); font-weight: 600; }
.dirty-hint svg { width: 14px; height: 14px; }
.inline-saved { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--signal-600); font-weight: 600; }
.inline-saved svg { width: 16px; height: 16px; }
.toast { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--ink-900); color: #fff; padding: 12px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); font-size: var(--fs-sm); font-weight: 500; }
.toast svg { width: 18px; height: 18px; color: var(--signal-400); }
.toast-demo { display: flex; }

/* --- Subscription / billing --- */
.plan-current { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.plan-current .price { font-family: var(--font-display); font-size: 2rem; font-weight: 600; }
.plan-current .price small { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink-500); font-weight: 500; }
.plan-meta { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-3); }
.plan-meta .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-300); }
.plan-meta .v { font-weight: 600; font-size: var(--fs-sm); }

.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 820px){ .plan-grid { grid-template-columns: 1fr; } }
.plan { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--card); display: flex; flex-direction: column; gap: var(--sp-3); }
.plan.is-current { border-color: var(--signal-500); box-shadow: 0 0 0 1px var(--signal-500); }
.plan__name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.plan__price { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; }
.plan__price small { font-family: var(--font-ui); font-size: var(--fs-cap); color: var(--ink-500); font-weight: 500; }
.plan__feats { list-style: none; padding: 0; margin: var(--sp-2) 0; display: grid; gap: var(--sp-2); }
.plan__feats li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--ink-700); }
.plan__feats li svg { width: 16px; height: 16px; color: var(--signal-500); flex: none; margin-top: 2px; }
.plan__cta { margin-top: auto; }

/* payment method block */
.pay-method { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.pay-method .card-ic { width: 48px; height: 34px; border-radius: var(--r-sm); background: var(--ink-900); color: #fff; display: grid; place-items: center; flex: none; }
.pay-method .card-ic svg { width: 22px; height: 22px; }
.pay-method .digits { font-family: var(--font-mono); font-weight: 500; }
.pay-method .exp { font-size: var(--fs-cap); color: var(--ink-500); }

/* =================================================================
   PAGE: ONBOARDING WIZARD
   ================================================================= */
.wiz { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; max-width: 720px; }
/* stepper */
.wiz__steps { display: flex; align-items: center; gap: 0; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); background: var(--paper); overflow-x: auto; }
.wiz__step { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.wiz__step .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; background: var(--card); border: 1.5px solid var(--line-2); color: var(--ink-500); }
.wiz__step .lbl { font-size: var(--fs-cap); font-weight: 600; color: var(--ink-500); white-space: nowrap; }
.wiz__step.is-done .num { background: var(--signal-600); border-color: var(--signal-600); color: #fff; }
.wiz__step.is-current .num { border-color: var(--signal-600); color: var(--signal-600); }
.wiz__step.is-current .lbl { color: var(--ink-900); }
.wiz__step .num svg { width: 14px; height: 14px; }
.wiz__joiner { width: 24px; height: 1.5px; background: var(--line-2); flex: none; margin: 0 6px; }
.wiz__joiner.is-done { background: var(--signal-500); }
@media (max-width: 620px){
  .wiz__step .lbl { display: none; }
  .wiz__step.is-current .lbl { display: inline; }   /* show only current label on phone */
  .wiz__joiner { width: 14px; margin: 0 3px; }
}
/* progress bar alt */
.wiz__progress { height: 4px; background: var(--paper-2); }
.wiz__progress .bar { height: 100%; background: var(--signal-500); transition: width var(--transition); }

.wiz__body { padding: clamp(var(--sp-5), 4vw, var(--sp-7)); }
.wiz__eyebrow { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-600); }
.wiz__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.01em; margin-top: 6px; }
.wiz__sub { color: var(--ink-500); margin-top: var(--sp-2); margin-bottom: var(--sp-5); max-width: 52ch; }
.wiz__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); background: var(--paper); flex-wrap: wrap; }
.wiz__foot .right { display: flex; gap: var(--sp-3); margin-left: auto; }

/* selectable cards (calendar provider / channels) */
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 560px){ .choice-grid { grid-template-columns: 1fr; } }
.choice-card { position: relative; border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-4); background: var(--card); cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color var(--transition), box-shadow var(--transition); text-align: left; }
.choice-card:hover { border-color: var(--ink-300); }
.choice-card.is-selected { border-color: var(--signal-600); box-shadow: 0 0 0 2px var(--signal-100); }
.choice-card .ic { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--paper-2); color: var(--ink-700); }
.choice-card .ic svg { width: 20px; height: 20px; }
.choice-card .nm { font-weight: 700; font-size: var(--fs-sm); }
.choice-card .ds { font-size: var(--fs-cap); color: var(--ink-500); }
.choice-card .tick { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--signal-600); color: #fff; display: none; place-items: center; }
.choice-card.is-selected .tick { display: grid; }
.choice-card .tick svg { width: 13px; height: 13px; }
.choice-card .conn { font-size: var(--fs-cap); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.choice-card .conn.ok { color: var(--signal-600); }

/* business hours grid */
.hours { display: grid; gap: var(--sp-2); }
.hours__row { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: var(--sp-3); }
@media (max-width: 520px){ .hours__row { grid-template-columns: 1fr; gap: 6px; } }
.hours__day { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-size: var(--fs-sm); }
.hours__times { display: flex; align-items: center; gap: var(--sp-2); }
.hours__times .input, .hours__times .select { padding-top: 9px; padding-bottom: 9px; }
.hours__times .to { color: var(--ink-300); font-size: var(--fs-cap); }
.hours__row.is-off .hours__times { opacity: .45; pointer-events: none; }
.hours__closed { color: var(--ink-300); font-size: var(--fs-sm); font-style: italic; }

/* =================================================================
   FOUNDATION: NAVIGATION (product app chrome — NOT the SG shell)
   Shown inside fixed-width "device" frames so all 3 viewports are
   comparable regardless of the actual browser width.
   ================================================================= */
.device { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-md); overflow: hidden; }
.device__label { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.device__label .w { color: var(--ink-300); }
.device__screen { background: var(--paper); }
.device__content { padding: var(--sp-5); color: var(--ink-300); font-size: var(--fs-sm); min-height: 120px; }

/* ---- shared app-nav atoms ---- */
.appnav__brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; letter-spacing: -.01em; flex: none; }
.appnav__brand .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--ink-900); color: var(--signal-400); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .95rem; flex: none; }
.appnav__bell { position: relative; }
.appnav__bell .count-pill { position: absolute; top: -6px; right: -6px; }

/* ---- DESKTOP: top app bar ---- */
.appbar { display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-5); height: 60px; background: var(--card); border-bottom: 1px solid var(--line); }
.appbar__nav { display: flex; align-items: center; gap: 2px; }
.appbar__link { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-500); text-decoration: none; transition: background var(--transition), color var(--transition); }
.appbar__link svg { width: 17px; height: 17px; }
.appbar__link:hover { background: var(--paper-2); color: var(--ink-900); }
.appbar__link.is-active { background: var(--signal-100); color: var(--signal-600); }
.appbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.appbar__search { width: 240px; }
.appbar__user { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 6px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); cursor: pointer; }
.appbar__user .avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: var(--signal-600); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 12px; font-family: var(--font-display); }
.appbar__user .nm { font-size: var(--fs-sm); font-weight: 600; }
.appbar__user svg { width: 15px; height: 15px; color: var(--ink-500); }
.appbar .icon-btn { position: relative; }

/* a user-menu dropdown anchored under the user button (reuses .menu--icons) */
.appbar__usermenu { position: relative; }
.appbar__usermenu .menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; z-index: 30; }

/* ---- IPAD / TABLET: condensed top bar + overflow "More" ---- */
.appbar--tablet .appbar__link .lbl { display: none; }     /* icons only for primary items */
.appbar--tablet .appbar__link { padding: 0; width: 44px; justify-content: center; }
.appbar--tablet .appbar__search { width: 44px; }           /* search collapses to an icon button */

/* ---- MOBILE: compact top bar + bottom tab bar + drawer ---- */
.appbar--mobile { height: 56px; padding: 0 var(--sp-4); gap: var(--sp-3); }
.appbar--mobile .appbar__nav, .appbar--mobile .appbar__search, .appbar--mobile .appbar__user .nm { display: none; }
.appbar--mobile .appbar__right { gap: var(--sp-1); }

/* bottom tab bar */
.tabbar { display: flex; background: var(--card); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
.tabbar__tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border: 0; background: transparent; color: var(--ink-500); text-decoration: none; cursor: pointer; border-radius: var(--r-sm); padding: 4px 0; position: relative; }
.tabbar__tab svg { width: 22px; height: 22px; }
.tabbar__tab .lbl { font-size: 10px; font-weight: 600; letter-spacing: .01em; }
.tabbar__tab.is-active { color: var(--signal-600); }
.tabbar__tab .count-pill { position: absolute; top: 2px; left: 50%; margin-left: 4px; transform: scale(.85); }

/* slide-in drawer (alternative / secondary nav on mobile) */
.drawer-demo { position: relative; height: 420px; overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.drawer-scrim { position: absolute; inset: 0; background: rgba(20,21,15,.45); }
.drawer { position: absolute; top: 0; bottom: 0; left: 0; width: 80%; max-width: 280px; background: var(--card); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; padding: var(--sp-4); gap: var(--sp-2); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-2); }
.drawer__link { display: flex; align-items: center; gap: var(--sp-3); padding: 12px var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-body); font-weight: 600; color: var(--ink-700); text-decoration: none; min-height: 44px; }
.drawer__link svg { width: 20px; height: 20px; color: var(--ink-500); }
.drawer__link.is-active { background: var(--signal-100); color: var(--signal-600); }
.drawer__link.is-active svg { color: var(--signal-600); }
.drawer__link:hover { background: var(--paper-2); }

/* side-by-side compare layout for the three frames */
.nav-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.nav-compare > * { min-width: 0; }
@media (min-width: 1100px){ .nav-compare.cols { grid-template-columns: 1fr; } }

/* =================================================================
   FEATURE: QR / BOOKING-LINK SHARE  (mock QR — design only)
   ================================================================= */
/* booking link + copy affordance */
.bookinglink { display: flex; align-items: center; gap: var(--sp-2); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px 6px 6px var(--sp-4); max-width: 460px; }
.bookinglink .url { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-900); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.bookinglink .url b { color: var(--signal-600); }

/* the mock QR graphic (a static QR-looking SVG sits inside) */
.qr { display: inline-grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; position: relative; }
.qr svg { display: block; }
.qr__mocktag { position: absolute; bottom: 4px; right: 4px; font-family: var(--font-mono); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-300); background: rgba(255,255,255,.85); padding: 1px 4px; border-radius: 3px; }
.qr--sm svg { width: 72px; height: 72px; }
.qr--md svg { width: 132px; height: 132px; }
.qr--lg svg { width: 188px; height: 188px; }

/* preset selector (reuses choice-card look; here as a tab-ish row) */
.preset-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 720px){ .preset-tabs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px){ .preset-tabs { grid-template-columns: 1fr; } }
.preset-tab { position: relative; border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-4); background: var(--card); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; transition: border-color var(--transition), box-shadow var(--transition); }
.preset-tab:hover { border-color: var(--ink-300); }
.preset-tab.is-selected { border-color: var(--signal-600); box-shadow: 0 0 0 2px var(--signal-100); }
.preset-tab .ic { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--paper-2); color: var(--ink-700); }
.preset-tab .ic svg { width: 18px; height: 18px; }
.preset-tab.is-selected .ic { background: var(--signal-100); color: var(--signal-600); }
.preset-tab .nm { font-weight: 700; font-size: var(--fs-sm); }
.preset-tab .ds { font-size: var(--fs-cap); color: var(--ink-500); }
.preset-tab .tick { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--signal-600); color: #fff; display: none; place-items: center; }
.preset-tab.is-selected .tick { display: grid; }
.preset-tab .tick svg { width: 13px; height: 13px; }

/* preview stage (muted backdrop, like the email stage) */
.preview-stage { background: #e8e5da; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(var(--sp-5), 4vw, var(--sp-7)); display: grid; place-items: center; }
.preview-actions { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-4); flex-wrap: wrap; }

/* --- preset mock artworks --- */
/* vehicle decal / magnet (large landscape) */
.mock-decal { width: 100%; max-width: 460px; background: var(--ink-900); color: var(--paper); border-radius: var(--r-md); padding: var(--sp-6); display: flex; align-items: center; gap: var(--sp-5); box-shadow: var(--shadow-lg); }
.mock-decal .copy h4 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.mock-decal .copy h4 em { font-style: italic; color: var(--signal-400); }
.mock-decal .copy p { color: #d2d3c8; font-size: var(--fs-sm); margin-top: 6px; }
.mock-decal .copy .biz { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-300); margin-top: var(--sp-3); }

/* business card */
.mock-card { width: 340px; max-width: 100%; aspect-ratio: 1.75 / 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); box-shadow: var(--shadow-md); }
.mock-card .biz { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.mock-card .who { font-size: var(--fs-sm); color: var(--ink-500); margin-top: 2px; }
.mock-card .lnk { font-family: var(--font-mono); font-size: 11px; color: var(--signal-600); margin-top: var(--sp-3); }
.mock-card .cta { font-size: var(--fs-cap); color: var(--ink-500); margin-top: 4px; }

/* flyer / yard sign / poster (portrait) */
.mock-flyer { width: 300px; max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-5); text-align: center; box-shadow: var(--shadow-lg); }
.mock-flyer .kicker { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-600); }
.mock-flyer h3 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; line-height: 1.1; margin: var(--sp-2) 0 var(--sp-4); }
.mock-flyer h3 em { font-style: italic; color: var(--signal-600); }
.mock-flyer .scan { font-weight: 700; margin-top: var(--sp-4); display: inline-flex; align-items: center; gap: 6px; }
.mock-flyer .scan svg { width: 16px; height: 16px; color: var(--signal-600); }
.mock-flyer .biz { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-300); margin-top: var(--sp-4); }

/* plain QR + link (digital) */
.mock-plain { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6); text-align: center; box-shadow: var(--shadow-md); display: grid; gap: var(--sp-4); justify-items: center; }

/* compact share block reused at end of onboarding */
.share-compact { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.share-compact .qr { flex: none; }
.share-compact .body { flex: 1; min-width: 220px; }

/* email mini progress indicator (reminder emails) — reuses stepper feel */
.email-progress { display: flex; align-items: center; gap: var(--sp-2); background: var(--paper-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; }
.email-progress .dots { display: flex; gap: 5px; flex: 1; }
.email-progress .dots span { height: 6px; flex: 1; border-radius: var(--r-pill); background: var(--line-2); }
.email-progress .dots span.done { background: var(--signal-500); }
.email-progress .lbl { font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 600; color: var(--ink-700); white-space: nowrap; }

/* =================================================================
   FEATURE: TEAM / MULTI-USER
   ================================================================= */
/* avatar (shared) — sizes + color-from-initials via inline style or default */
.avatar-pic { border-radius: 50%; background: var(--signal-600); color: #fff; display: inline-grid; place-items: center; font-family: var(--font-display); font-weight: 600; flex: none; overflow: hidden; }
.avatar-pic img { width: 100%; height: 100%; object-fit: cover; }
.avatar-pic--xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-pic--sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-pic--md { width: 40px; height: 40px; font-size: 14px; }
.avatar-pic--lg { width: 56px; height: 56px; font-size: 1.3rem; }
/* color variants so teammates are distinguishable */
.avatar-pic.c2 { background: #2f6f8f; } .avatar-pic.c3 { background: #8a5410; }
.avatar-pic.c4 { background: #6b4f9e; } .avatar-pic.c5 { background: #9e3b53; }
.avatar-pic.is-empty { background: var(--paper-2); color: var(--ink-300); box-shadow: inset 0 0 0 1.5px var(--line-2); }

/* avatar stack (overlapping) */
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar-pic { box-shadow: 0 0 0 2px var(--card); }
.avatar-stack .avatar-pic + .avatar-pic, .avatar-stack .avatar-more { margin-left: -8px; }
.avatar-more { width: 32px; height: 32px; border-radius: 50%; background: var(--paper-2); color: var(--ink-500); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; font-family: var(--font-mono); box-shadow: 0 0 0 2px var(--card); flex: none; }

/* role pills (reuse badge look; role-specific colors) */
.badge--owner { background: var(--signal-100); color: var(--signal-600); }
.badge--admin { background: #e2edf2; color: #2f6f8f; }
.badge--admin::before { background: #2f6f8f; }
.badge--member { background: var(--paper-2); color: var(--ink-500); }
.badge--member::before { background: var(--ink-300); }
.badge--invited { background: var(--amber-100); color: #8a5410; }
.badge--invited::before { background: var(--amber-500); }

/* member roster row (within a set-card / table) */
.member { display: flex; align-items: center; gap: var(--sp-3); }
.member__name { font-weight: 600; font-size: var(--fs-sm); }
.member__email { color: var(--ink-500); font-size: var(--fs-cap); }
.member__meta { color: var(--ink-300); font-size: var(--fs-cap); }

/* assignee picker (uses .menu / .menu--icons; avatar instead of icon) */
.assignee-trigger { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-pill); padding: 3px 10px 3px 4px; cursor: pointer; font-size: var(--fs-cap); font-weight: 600; color: var(--ink-700); }
.assignee-trigger:hover { border-color: var(--line-2); background: var(--paper-2); }
.assignee-trigger.is-unassigned { color: var(--ink-300); }
.assignee-trigger svg { width: 14px; height: 14px; color: var(--ink-300); }
.menu--assignee li { gap: var(--sp-2); }
.menu--assignee li .avatar-pic { margin-right: 2px; }

/* modal (invite teammate) — shown statically inside a framed preview */
.modal-stage { background: rgba(20,21,15,.35); border-radius: var(--r-lg); padding: clamp(var(--sp-5), 5vw, var(--sp-8)); display: grid; place-items: center; }
.modal { width: 100%; max-width: 460px; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.modal__head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.modal__head p { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 4px; }
.modal__body { padding: 0 var(--sp-5) var(--sp-5); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); background: var(--paper); }

/* pending-invite chips list */
.invite-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }
.invite-row { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); min-width: 0; }
.invite-row .em { font-family: var(--font-mono); font-size: var(--fs-sm); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* role description list inside invite */
.role-help { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.role-help li { display: flex; gap: var(--sp-2); font-size: var(--fs-cap); color: var(--ink-500); }
.role-help li strong { color: var(--ink-700); }

/* =================================================================
   THE APP SHELL  (authenticated layout every logged-in page reuses)
   = Navigation foundation (top app bar + bottom tab bar) + content region
   ================================================================= */
/* .app is a CONTAINER so its inner layout reflows by the app's OWN width, not the
   viewport. This makes the framed mobile preview (a 390px .appframe inside a wide
   SG page) reflow exactly like a real phone, and keeps real pages correct too. */
.app { display: flex; flex-direction: column; min-height: 100%; background: var(--paper); container-type: inline-size; container-name: app; }
.app__bar { position: sticky; top: 0; z-index: 40; }   /* the .appbar goes here */
.app__body { flex: 1; }
/* content region: consistent page padding + max width */
.app__content { width: 100%; max-width: 1160px; margin-inline: auto; padding: var(--sp-6) var(--sp-6) var(--sp-8); }
@container app (max-width: 760px) { .app__content { padding: var(--sp-5) var(--sp-4) calc(var(--sp-8) + 72px); } } /* room for bottom tab bar */

/* page header pattern (title + subtitle + right-aligned action row) */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.page-head__title { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; }
.page-head__sub { color: var(--ink-500); margin-top: 6px; font-size: var(--fs-body); }
.page-head__actions { display: flex; gap: var(--sp-2); align-items: center; margin-left: auto; flex-wrap: wrap; }
/* on narrow app width: title smaller, actions drop below full-width */
@container app (max-width: 560px) {
  .page-head__title { font-size: 1.6rem; }
  .page-head__actions { margin-left: 0; width: 100%; }
  .page-head__actions .btn { flex: 1; }
}

/* responsive content grid inner pages drop into (container-query driven) */
/* tracks use minmax(0,1fr) and children get min-width:0 so a wide child
   (big display number, long label) can't blow the track past the container
   and clip inside the fixed-width mobile app frame. */
.app-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5); }
.app-grid > * { min-width: 0; }
@container app (max-width: 900px){ .app-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container app (max-width: 560px){ .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } }
@container app (max-width: 380px){ .app-grid { grid-template-columns: minmax(0, 1fr); } }
/* span helpers */
.col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; } .col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; }
@container app (max-width: 900px){ .col-8,.col-6,.col-4,.col-3,.col-12 { grid-column: span 6; } }
/* at 560px: KPI cards go 2-up (col-3), wide widgets full row */
@container app (max-width: 560px){ .col-3 { grid-column: span 1; } .col-8,.col-6,.col-4,.col-12 { grid-column: 1 / -1; } }
@container app (max-width: 380px){ .col-3,.col-8,.col-6,.col-4,.col-12 { grid-column: 1 / -1; } }

/* the shell preview frame inside the SG (so it reads as the app, not the SG page) */
.appframe { border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--paper); }
.appframe .appbar { border-radius: 0; }
/* mobile bottom tab bar pinned to the frame bottom in mobile preview */
.appframe--mobile { max-width: 390px; margin-inline: auto; display: flex; flex-direction: column; min-height: 620px; }
.appframe--mobile .app__content { flex: 1; padding-bottom: var(--sp-6); }
.appframe--mobile .tabbar { border-radius: 0; }

/* =================================================================
   DASHBOARD HOME widgets
   ================================================================= */
.dash-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.dash-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.dash-card__head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.dash-card__head .link { font-size: var(--fs-sm); font-weight: 600; color: var(--signal-600); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.dash-card__head .link svg { width: 15px; height: 15px; }
.dash-card__body { padding: var(--sp-4) var(--sp-5); }
.dash-card__body--flush { padding: 0; }

/* gap-detection callout */
.gap-callout { background: var(--amber-100); border: 1px solid #e8c98a; border-radius: var(--r-lg); padding: var(--sp-5); display: flex; gap: var(--sp-4); align-items: center; }
.gap-callout .ic { width: 44px; height: 44px; border-radius: var(--r-md); background: #fff; color: var(--amber-500); display: grid; place-items: center; flex: none; }
.gap-callout .ic svg { width: 22px; height: 22px; }
.gap-callout h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #7a4d08; }
.gap-callout p { font-size: var(--fs-sm); color: #8a5410; margin-top: 2px; }
.gap-callout .btn { margin-left: auto; flex: none; }
/* on narrow app width: stack — icon+text column full width, button below full-width */
@container app (max-width: 560px){
  .gap-callout { flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3); }
  .gap-callout > div { flex: 1 1 100%; }
  .gap-callout .btn { margin-left: 0; width: 100%; }
}

/* SEO upsell card */
.seo-card { background: var(--ink-900); color: var(--paper); border-radius: var(--r-lg); padding: var(--sp-6); position: relative; overflow: hidden; }
.seo-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 100% 0%, rgba(70,168,104,.28), transparent 60%); pointer-events: none; }
.seo-card > * { position: relative; z-index: 1; }
.seo-card .kicker { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-400); }
.seo-card h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin-top: 6px; line-height: 1.15; }
.seo-card p { color: #d2d3c8; font-size: var(--fs-sm); margin-top: var(--sp-2); }
.seo-card .btn { margin-top: var(--sp-4); }

/* lead list row */
.lead-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); }
.lead-row:last-child { border-bottom: 0; }
.lead-row .chan { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink-500); display: grid; place-items: center; flex: none; }
.lead-row .chan svg { width: 17px; height: 17px; }
.lead-row .who { font-weight: 600; font-size: var(--fs-sm); }
.lead-row .what { color: var(--ink-500); font-size: var(--fs-cap); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-row .meta { margin-left: auto; text-align: right; flex: none; }
.lead-row .time { font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--ink-300); }
.lead-row .mid { min-width: 0; flex: 1; }

/* dashboard empty / first-run hero */
.firstrun { text-align: center; padding: var(--sp-8) var(--sp-5); }
.firstrun .ic { width: 60px; height: 60px; border-radius: var(--r-md); background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; margin: 0 auto var(--sp-4); }
.firstrun .ic svg { width: 28px; height: 28px; }
.firstrun h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); }
.firstrun p { color: var(--ink-500); max-width: 46ch; margin: var(--sp-2) auto var(--sp-5); }
.firstrun .share-compact { justify-content: center; }

/* =================================================================
   FOUNDATION: FEEDBACK & OVERLAYS — toasts + modals
   Semantic colors/icons shared with the rest of the system:
   success=green/check-circle-2 · warning=amber/alert-triangle ·
   danger=red/alert-circle (or trash-2) · info=neutral/info
   ================================================================= */

/* ---- TOASTS ---- */
/* live region: top-right on desktop, top-center on phones; never blocks UI */
.toast-region { position: fixed; top: var(--sp-5); right: var(--sp-5); z-index: 90; display: flex; flex-direction: column; gap: var(--sp-3); width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast-region > * { pointer-events: auto; }
@media (max-width: 560px){ .toast-region { top: var(--sp-4); left: 50%; right: auto; transform: translateX(-50%); width: calc(100vw - 24px); } }
/* in-doc demo region (static, not fixed) so toasts are reviewable inline */
.toast-region--inline { position: static; transform: none; width: 100%; max-width: 380px; }

.toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--ink-500);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--sp-3) var(--sp-4);
  color: var(--ink-900); font-size: var(--fs-sm);
}
.toast__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.toast__icon svg { width: 20px; height: 20px; }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-weight: 700; }
.toast__msg { color: var(--ink-500); margin-top: 1px; }
.toast__action { background: none; border: 0; padding: 0; margin-top: 6px; font: inherit; font-weight: 700; color: var(--signal-600); cursor: pointer; }
.toast__action:hover { text-decoration: underline; }
.toast__close { flex: none; background: none; border: 0; cursor: pointer; color: var(--ink-300); padding: 2px; border-radius: var(--r-sm); display: grid; place-items: center; }
.toast__close:hover { color: var(--ink-700); background: var(--paper-2); }
.toast__close svg { width: 16px; height: 16px; }
/* intent variants */
.toast--success { border-left-color: var(--signal-500); } .toast--success .toast__icon { color: var(--signal-600); }
.toast--error   { border-left-color: var(--alert-500); }  .toast--error .toast__icon { color: var(--alert-500); } .toast--error .toast__action { color: var(--alert-500); }
.toast--warning { border-left-color: var(--amber-500); }  .toast--warning .toast__icon { color: #8a5410; }      .toast--warning .toast__action { color: #8a5410; }
.toast--info    { border-left-color: #2f6f8f; }           .toast--info .toast__icon { color: #2f6f8f; }         .toast--info .toast__action { color: #2f6f8f; }
/* entrance animation (used by JS-spawned toasts) */
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.toast.is-in { animation: toast-in 220ms cubic-bezier(.2,.7,.3,1); }

/* ---- MODAL variants (base .modal lives in the Team section) ---- */
/* accent icon at top of modal body */
.modal__icon { width: 48px; height: 48px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: var(--sp-4); }
.modal__icon svg { width: 24px; height: 24px; }
.modal__icon--success { background: var(--signal-100); color: var(--signal-600); }
.modal__icon--warning { background: var(--amber-100); color: #8a5410; }
.modal__icon--danger  { background: var(--alert-100); color: var(--alert-500); }
.modal__icon--info    { background: #e2edf2; color: #2f6f8f; }
.modal--centered .modal__head { flex-direction: column; align-items: center; text-align: center; padding-bottom: 0; }
.modal--centered .modal__body { text-align: center; }
/* a top-right close even on centered modals */
.modal__x { position: absolute; top: 12px; right: 12px; }
.modal { position: relative; }
/* destructive primary button shorthand */
.btn--danger { --btn-bg: var(--alert-500); --btn-fg: #fff; --btn-bd: var(--alert-500); }
.btn--danger:hover { filter: brightness(1.05); }
/* type-to-confirm field spacing */
.confirm-type { margin-top: var(--sp-4); text-align: left; }
.confirm-type .field__help code { background: var(--paper-2); padding: 1px 5px; border-radius: 4px; }

/* =================================================================
   PUBLIC BOOKING FLOW (customer-facing) — NO app shell / side nav.
   Standalone branded booking card. Shown in device frames in the SG.
   ================================================================= */
.bookpage { background: var(--paper); border-radius: var(--r-lg); min-height: 520px; padding: clamp(var(--sp-4), 4vw, var(--sp-7)); display: grid; place-items: center; }
/* compact preview stage: drops the tall min-height for small embedded cards
   (nudges, opt-in states) so they aren't lost in dead space */
.bookpage--compact { min-height: 0; }
.bookcard { width: 100%; max-width: 920px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.bookcard--narrow { max-width: 480px; }

/* business brand header (shared) */
.book-brand { display: flex; align-items: center; gap: var(--sp-3); }
.book-brand .logo { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--ink-900); color: var(--signal-400); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.book-brand .bn { font-weight: 700; letter-spacing: -.01em; }
.book-brand .bn small { display: block; color: var(--ink-500); font-weight: 500; font-size: var(--fs-cap); }

/* STEP 1 — intro / service pick (single column card) */
.book-intro { padding: clamp(var(--sp-5), 4vw, var(--sp-7)); max-width: 560px; margin-inline: auto; }
.book-intro__welcome { color: var(--ink-500); margin: var(--sp-4) 0 var(--sp-5); }
.svc-list { display: grid; gap: var(--sp-2); }
.svc-row { display: flex; align-items: center; gap: var(--sp-4); width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-4); cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); color: inherit; text-decoration: none; }
.svc-row:hover { border-color: var(--signal-500); box-shadow: 0 0 0 2px var(--signal-100); transform: translateY(-1px); }
.svc-row .ic { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; flex: none; }
.svc-row .ic svg { width: 20px; height: 20px; }
.svc-row .nm { font-weight: 700; }
.svc-row .meta { color: var(--ink-500); font-size: var(--fs-cap); margin-top: 2px; display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.svc-row .meta span { display: inline-flex; align-items: center; gap: 4px; }
.svc-row .meta svg { width: 13px; height: 13px; }
.svc-row .chev { margin-left: auto; color: var(--ink-300); flex: none; }
.svc-row .chev svg { width: 20px; height: 20px; }

/* STEP 2-5 — two-pane scheduler layout */
.book-two { display: grid; grid-template-columns: 300px 1fr; min-height: 480px; }
@media (max-width: 720px){ .book-two { grid-template-columns: 1fr; } }
.book-rail { padding: clamp(var(--sp-5), 3vw, var(--sp-6)); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 720px){ .book-rail { border-right: 0; border-bottom: 1px solid var(--line); } }
.book-rail__back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--ink-500); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.book-rail__back:hover { color: var(--ink-900); }
.book-rail__back svg { width: 16px; height: 16px; }
.book-rail__svc { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.book-rail__line { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-500); font-size: var(--fs-sm); }
.book-rail__line svg { width: 16px; height: 16px; color: var(--ink-300); flex: none; }
.book-rail__price { font-weight: 700; color: var(--ink-900); }
.book-rail__staff { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-700); }
.book-rail__divider { height: 1px; background: var(--line); }

.book-main { padding: clamp(var(--sp-5), 3vw, var(--sp-6)); }
.book-main__h { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin-bottom: var(--sp-4); }

/* time-zone selector */
.tz { margin-top: var(--sp-5); }
.tz .select-wrap { max-width: 280px; }

/* time-slot list */
.slots { display: grid; gap: var(--sp-2); max-height: 360px; overflow-y: auto; padding-right: 4px; }
.slot-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: 13px; border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--card); color: var(--ink-900); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: border-color var(--transition), background var(--transition); min-height: 48px; }
.slot-btn:hover { border-color: var(--signal-500); color: var(--signal-600); }
/* selected slot splits into [time][Next] (Calendly behavior) */
.slot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.slot-pair .slot-btn.is-selected { background: var(--ink-700); color: #fff; border-color: var(--ink-700); cursor: default; }
.slot-pair .slot-next { background: var(--signal-600); color: #fff; border-color: var(--signal-600); }
.slot-pair .slot-next:hover { background: var(--signal-500); border-color: var(--signal-500); color: #fff; }
.slots__date { font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--sp-3); }

/* booking summary (left rail on details/confirm) */
.book-summary { display: grid; gap: var(--sp-3); }
.book-summary .row-item { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); }
.book-summary .row-item svg { width: 17px; height: 17px; color: var(--signal-600); flex: none; margin-top: 1px; }
.book-summary .row-item .k { color: var(--ink-500); font-size: var(--fs-cap); }
.book-summary .row-item .v { font-weight: 600; }

/* STEP 6 — confirmation */
.book-confirm { padding: clamp(var(--sp-6), 4vw, var(--sp-8)); max-width: 560px; margin-inline: auto; text-align: center; }
.book-confirm__check { width: 64px; height: 64px; border-radius: 50%; background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; margin: 0 auto var(--sp-5); }
.book-confirm__check svg { width: 34px; height: 34px; }
.book-confirm h2 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; }
.book-confirm__sub { color: var(--ink-500); margin-top: var(--sp-2); }
.book-confirm__card { text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); margin: var(--sp-6) 0; display: grid; gap: var(--sp-3); }
.book-confirm__id { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .06em; color: var(--ink-500); background: var(--paper-2); padding: 6px 10px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 6px; }
.book-confirm__cal { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-2); }
.book-confirm__note { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-500); font-size: var(--fs-sm); margin-top: var(--sp-4); }
.book-confirm__note svg { width: 16px; height: 16px; color: var(--signal-600); }

/* =================================================================
   MOBILE PREVIEW SAFETY — keep wide demo/mockup frames from breaking
   the style-guide page layout at narrow widths.
   ================================================================= */
.sg-main { overflow-x: hidden; }   /* page never scrolls horizontally */
/* intentionally-wide device mockups (e.g. the desktop nav demo) scroll inside
   their own frame instead of pushing the page wider */
@media (max-width: 760px) {
  /* the desktop/tablet device frames are intentionally wide; the SCREEN scrolls
     horizontally so the wide content is reachable without pushing the page wider
     (the .nav-compare grid track is constrained with minmax(0,1fr)). */
  .device__screen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .device__screen > .appbar { min-width: 640px; }   /* desktop bar keeps its shape, scrolls */
  .device__content { min-width: 0; }
  /* preview stages shrink padding so framed cards fit the phone */
  .email-stage, .modal-stage, .preview-stage, .bookpage, .appframe { padding-left: var(--sp-3); padding-right: var(--sp-3); }
}
/* booking two-pane: ensure it collapses by the app/preview width too (belt + braces) */
@media (max-width: 720px){ .book-two { grid-template-columns: 1fr; } .book-main > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } }
/* settings/plan rows wrap rather than overflow */
@media (max-width: 560px){ .plan-current { flex-direction: column; align-items: flex-start; } .pay-method { flex-wrap: wrap; } .pay-method .btn { margin-left: 0 !important; width: 100%; } }
/* booking confirm calendar buttons + decal mock fit phone */
@media (max-width: 480px){ .mock-decal { flex-direction: column; text-align: center; } .mock-decal .qr { margin-inline: auto; } }

/* =================================================================
   PAGE: SERVICES (AI-driven configuration)
   ================================================================= */
/* service list as editable cards */
.svc-card { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.svc-card .grip { color: var(--ink-300); cursor: grab; flex: none; margin-top: 2px; }
.svc-card .grip svg { width: 18px; height: 18px; }
.svc-card .ic { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; flex: none; }
.svc-card .ic svg { width: 20px; height: 20px; }
.svc-card .body { flex: 1; min-width: 0; }
.svc-card .nm { font-weight: 700; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.svc-card .ds { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 2px; }
.svc-card .meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-2); font-size: var(--fs-cap); color: var(--ink-500); }
.svc-card .meta span { display: inline-flex; align-items: center; gap: 5px; }
.svc-card .meta svg { width: 13px; height: 13px; }
.svc-card .price { font-weight: 700; color: var(--ink-900); }
.svc-card .actions { display: flex; gap: 6px; flex: none; }
@media (max-width: 560px){ .svc-card { flex-wrap: wrap; } .svc-card .actions { width: 100%; justify-content: flex-end; } }

/* AI panel */
.ai-panel { border: 1px solid #cbe3d0; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(180deg, var(--signal-100), var(--card) 120px); box-shadow: var(--shadow-sm); }
.ai-panel__head { padding: var(--sp-5); display: flex; align-items: flex-start; gap: var(--sp-3); border-bottom: 1px solid #d7e8db; }
.ai-badge { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--signal-600); color: #fff; flex: none; box-shadow: 0 4px 12px -4px rgba(31,107,59,.5); }
.ai-badge svg { width: 22px; height: 22px; }
.ai-panel__head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.ai-panel__head .area { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); color: var(--signal-600); font-weight: 600; margin-top: 2px; }
.ai-panel__head .area svg { width: 14px; height: 14px; }
.ai-panel__head .why { color: var(--ink-500); font-size: var(--fs-sm); margin-top: var(--sp-2); max-width: 60ch; }
.ai-panel__head .regen { margin-left: auto; flex: none; }
@media (max-width: 560px){ .ai-panel__head { flex-wrap: wrap; } .ai-panel__head .regen { margin-left: 0; width: 100%; } }

/* refine prompt row */
.ai-refine { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) 0; flex-wrap: wrap; }
.ai-refine .search, .ai-refine .input-wrap { flex: 1; min-width: 220px; }

/* suggestion grid */
.ai-suggest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); padding: var(--sp-5); }
@media (max-width: 640px){ .ai-suggest-grid { grid-template-columns: 1fr; } }
.ai-sug { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); position: relative; }
.ai-sug .nm { font-weight: 700; }
.ai-sug .ds { color: var(--ink-500); font-size: var(--fs-sm); }
.ai-sug .meta { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-cap); color: var(--ink-500); }
.ai-sug .meta span { display: inline-flex; align-items: center; gap: 5px; }
.ai-sug .meta svg { width: 13px; height: 13px; }
.ai-sug .pricebox { background: var(--signal-100); border-radius: var(--r-sm); padding: 8px 10px; font-size: var(--fs-sm); }
.ai-sug .pricebox .rng { font-weight: 700; color: var(--signal-600); font-family: var(--font-mono); }
.ai-sug .pricebox .basis { color: var(--ink-500); font-size: var(--fs-cap); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.ai-sug .pricebox .basis svg { width: 12px; height: 12px; }
.ai-sug .sug-actions { display: flex; gap: var(--sp-2); margin-top: auto; }

/* AI loading shimmer cards */
.ai-sug.is-loading { gap: var(--sp-3); }
.ai-sug.is-loading .sk { background: linear-gradient(90deg, var(--paper-2) 25%, #e8e4d8 37%, var(--paper-2) 63%); background-size: 400% 100%; animation: sk-shimmer 1.2s ease infinite; border-radius: var(--r-sm); display:block; }
.ai-thinking { display: inline-flex; align-items: center; gap: 8px; color: var(--signal-600); font-weight: 600; font-size: var(--fs-sm); }
.ai-thinking .dots-anim { display: inline-flex; gap: 3px; }
.ai-thinking .dots-anim i { width: 5px; height: 5px; border-radius: 50%; background: var(--signal-500); animation: ai-bounce 1s infinite; }
.ai-thinking .dots-anim i:nth-child(2){ animation-delay:.15s; } .ai-thinking .dots-anim i:nth-child(3){ animation-delay:.3s; }
@keyframes ai-bounce { 0%,80%,100%{ transform: translateY(0); opacity:.5 } 40%{ transform: translateY(-4px); opacity:1 } }

/* AI pricing hint inside the edit modal */
.ai-hint { display: flex; align-items: flex-start; gap: 8px; background: var(--signal-100); border: 1px solid #cbe3d0; border-radius: var(--r-sm); padding: 10px 12px; font-size: var(--fs-cap); color: var(--ink-700); margin-top: 6px; }
.ai-hint svg { width: 15px; height: 15px; color: var(--signal-600); flex: none; margin-top: 1px; }
.ai-hint b { color: var(--signal-600); font-family: var(--font-mono); }
.ai-hint .apply { background: none; border: 0; color: var(--signal-600); font-weight: 700; cursor: pointer; padding: 0; margin-left: 4px; }
.ai-hint .apply:hover { text-decoration: underline; }

/* =================================================================
   PAGE: BUSINESS PROFILE (the business's public identity)
   ================================================================= */
/* logo uploader (square, larger than avatar) */
.logo-up { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.logo-up__box { width: 88px; height: 88px; border-radius: var(--r-md); flex: none; display: grid; place-items: center; overflow: hidden; background: var(--ink-900); color: var(--signal-400); font-family: var(--font-display); font-weight: 700; font-size: 2rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.logo-up__box.is-empty { background: var(--paper-2); color: var(--ink-300); box-shadow: inset 0 0 0 1.5px dashed var(--line-2); border: 1.5px dashed var(--line-2); }
.logo-up__box.is-empty svg { width: 28px; height: 28px; }

/* cover photo strip */
.cover-up { height: 120px; border-radius: var(--r-md); background: linear-gradient(120deg, var(--ink-900), #243024); position: relative; overflow: hidden; display: grid; place-items: center; color: #d2d3c8; }
.cover-up.is-empty { background: var(--paper-2); color: var(--ink-300); border: 1.5px dashed var(--line-2); }
.cover-up .cover-actions { position: absolute; right: var(--sp-3); bottom: var(--sp-3); display: flex; gap: 6px; }

/* read-only services summary (links to Services page) */
.svc-summary { display: grid; gap: var(--sp-2); }
.svc-summary__row { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.svc-summary__row:last-child { border-bottom: 0; }
.svc-summary__row .nm { font-weight: 600; font-size: var(--fs-sm); }
.svc-summary__row .price { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-700); font-weight: 500; }
.svc-summary__row .ic { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; flex: none; }
.svc-summary__row .ic svg { width: 16px; height: 16px; }

/* =================================================================
   ACCEPTED PAYMENT METHODS (informational only — NOT a payment processor)
   ================================================================= */
/* owner config: selectable method chips */
.pay-methods { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pay-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink-700); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition); }
.pay-chip svg { width: 17px; height: 17px; color: var(--ink-500); }
.pay-chip:hover { border-color: var(--ink-300); }
.pay-chip.is-selected { background: var(--signal-100); border-color: var(--signal-500); color: var(--signal-600); }
.pay-chip.is-selected svg { color: var(--signal-600); }
.pay-chip .tick { width: 16px; height: 16px; display: none; }
.pay-chip.is-selected .tick { display: inline-block; }
.pay-chip.is-disabled { opacity: .5; pointer-events: none; }

/* customer-facing accepted methods (read-only list) */
.pay-accepted { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.pay-accepted__h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-300); display: flex; align-items: center; gap: 6px; }
.pay-accepted__h svg { width: 13px; height: 13px; }
.pay-accepted__list { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: 8px; }
.pay-accepted__list .m { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700); }
.pay-accepted__list .m svg { width: 15px; height: 15px; color: var(--signal-600); }
.pay-accepted__note { font-size: var(--fs-cap); color: var(--ink-500); margin-top: 8px; display: flex; align-items: flex-start; gap: 6px; }
.pay-accepted__note svg { width: 14px; height: 14px; color: var(--signal-600); flex: none; margin-top: 1px; }
.pay-accepted__free { font-size: var(--fs-cap); color: var(--signal-600); font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.pay-accepted__free svg { width: 14px; height: 14px; }

/* =================================================================
   CUSTOMER APP DOWNLOAD + PUSH (customer-facing, outside app shell)
   ================================================================= */
/* app-store badges (approximate the standard treatment, no trademark art).
   Single source of truth — identical size/padding/icon everywhere it's used
   (both nudge cards + app landing). Equal min-width so the App Store /
   Google Play pair align as a clean set. */
.store-badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--ink-900); color: #fff; border: 1px solid var(--ink-900); border-radius: 10px; padding: 9px 16px; min-height: 52px; min-width: 168px; text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); }
.store-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.store-badge svg { width: 26px; height: 26px; flex: none; }
.store-badge .lines { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge .lines small { font-size: 10px; opacity: .8; letter-spacing: .02em; }
.store-badge .lines b { font-size: 1.05rem; font-weight: 600; font-family: var(--font-display); letter-spacing: -.01em; }

/* app nudge module (on booking confirmation).
   Width is fixed so the first-time + recurring variants render as a
   coherent pair (one no longer collapses narrow + floats while the other
   spans full width). Left-aligned inside the centering .bookpage. */
.app-nudge { width: 100%; max-width: 560px; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); padding: var(--sp-5); text-align: left; margin-top: var(--sp-6); box-shadow: var(--shadow-sm); }
.app-nudge--recurring { background: linear-gradient(180deg, var(--signal-100), var(--card) 90px); border-color: #cbe3d0; }
.app-nudge__head { display: flex; align-items: center; gap: var(--sp-3); }
.app-nudge__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--ink-900); color: var(--signal-400); display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.app-nudge__icon svg { width: 24px; height: 24px; }
.app-nudge__head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.app-nudge__head .earned { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-cap); font-weight: 700; color: var(--signal-600); }
.app-nudge__head .earned svg { width: 13px; height: 13px; }
.app-nudge__props { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: 8px; }
.app-nudge__props li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-700); }
.app-nudge__props li svg { width: 16px; height: 16px; color: var(--signal-600); flex: none; }
.app-nudge__cta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.app-nudge__qr { flex: none; }
/* subtle text/ghost dismiss ("Maybe later" / "Not now").
   Reads as a deliberate secondary action — muted, clear hover, >=44px
   hit area. Shared by both nudge cards and the opt-in "Not now". */
.app-nudge__dismiss {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: var(--sp-4); padding: 11px var(--sp-4); min-height: 44px;
  background: none; border: 0; border-radius: var(--r-pill);
  color: var(--ink-500); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .01em; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.app-nudge__dismiss:hover { background: var(--paper-2); color: var(--ink-900); }
.app-nudge__dismiss:focus-visible { outline: 3px solid var(--signal-400); outline-offset: 2px; }
/* inside a nudge card: hairline divider + room so the CTA reads as finished */
.app-nudge .app-nudge__dismiss { margin-left: calc(var(--sp-4) * -1); }

/* notification opt-in card */
.optin { max-width: 420px; margin-inline: auto; text-align: center; padding: clamp(var(--sp-6),5vw,var(--sp-7)); }
.optin__bell { width: 64px; height: 64px; border-radius: 50%; background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; margin: 0 auto var(--sp-5); }
.optin__bell svg { width: 32px; height: 32px; }
.optin__bell.is-declined { background: var(--paper-2); color: var(--ink-300); }
.optin h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); }
.optin__sub { color: var(--ink-500); margin-top: var(--sp-2); margin-bottom: var(--sp-5); }
.optin__list { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: grid; gap: var(--sp-3); text-align: left; }
.optin__list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); }
.optin__list li .ic { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; flex: none; }
.optin__list li .ic svg { width: 17px; height: 17px; }
.optin__list li .t { font-weight: 600; }
.optin__list li .d { color: var(--ink-500); font-size: var(--fs-cap); }
/* opt-in primary + "Not now" stack, centered */
.optin__actions { display: flex; flex-direction: column; align-items: stretch; }
.optin__actions .app-nudge__dismiss { align-self: center; margin-top: var(--sp-2); }
/* enabled vs declined pair: 2-up on desktop, stacks on phones */
.optin-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
@media (max-width: 700px){ .optin-pair { grid-template-columns: 1fr; } }

/* native permission prompt mock */
.os-prompt { max-width: 300px; margin-inline: auto; background: #f2f2f5; border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; text-align: center; font-family: -apple-system, var(--font-ui); }
.os-prompt__body { padding: var(--sp-5) var(--sp-4); }
.os-prompt__ic { width: 52px; height: 52px; border-radius: 12px; background: var(--ink-900); color: var(--signal-400); display: grid; place-items: center; margin: 0 auto var(--sp-3); }
.os-prompt__ic svg { width: 26px; height: 26px; }
.os-prompt h4 { font-size: var(--fs-sm); font-weight: 700; color: #111; }
.os-prompt p { font-size: var(--fs-cap); color: #444; margin-top: 4px; }
.os-prompt__btns { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #d3d3d8; }
.os-prompt__btns button { background: none; border: 0; padding: 12px; font-size: var(--fs-sm); color: #0a84ff; cursor: pointer; }
.os-prompt__btns button:first-child { border-right: 1px solid #d3d3d8; }
.os-prompt__btns button.bold { font-weight: 700; }

/* push-stage backdrop (neutral wall behind native-style notifications) */
.modal-stage--push { background: #cfd3cb; }

/* push notification cards (native-style) */
.push-gallery { display: grid; gap: var(--sp-3); max-width: 420px; }
.push { display: flex; gap: var(--sp-3); background: rgba(245,245,247,.96); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-sm); }
.push__app { width: 38px; height: 38px; border-radius: 9px; background: var(--ink-900); color: var(--signal-400); display: grid; place-items: center; flex: none; font-family: var(--font-display); font-weight: 700; }
.push__app svg { width: 20px; height: 20px; }
.push__body { flex: 1; min-width: 0; }
.push__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.push__app-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
.push__time { font-size: 11px; color: var(--ink-300); flex: none; }
.push__title { font-weight: 700; font-size: var(--fs-sm); margin-top: 2px; }
.push__msg { font-size: var(--fs-sm); color: var(--ink-700); margin-top: 1px; }

/* app landing hero */
.applanding { background: var(--ink-900); color: var(--paper); border-radius: var(--r-lg); padding: clamp(var(--sp-6),5vw,var(--sp-8)); position: relative; overflow: hidden; }
.applanding::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(70,168,104,.28), transparent 60%); pointer-events: none; }
.applanding > * { position: relative; z-index: 1; }
.applanding h2 { font-family: var(--font-display); font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; max-width: 16ch; }
.applanding h2 em { font-style: italic; color: var(--signal-400); }
.applanding p { color: #d2d3c8; margin-top: var(--sp-4); max-width: 46ch; }
.applanding__cta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }
.applanding .store-badge { background: #fff; color: var(--ink-900); border-color: #fff; }
.applanding .store-badge .lines small { opacity: .65; }
.app-shots { display: flex; gap: var(--sp-3); margin-top: var(--sp-7); }
.app-shot { flex: 1; aspect-ratio: 9/16; max-width: 130px; border-radius: 18px; background: linear-gradient(160deg, #243024, #14150f); border: 4px solid #2b2c24; display: grid; place-items: center; color: var(--ink-300); }
.app-shot svg { width: 28px; height: 28px; }
@media (max-width:560px){ .app-shots .app-shot:nth-child(3){ display:none; } }

/* =================================================================
   BUSINESS APP  (native mobile app for the OWNER / STAFF)
   The phone companion to the web Dashboard. Screens render inside a
   realistic .phone frame; the app chrome reuses .app / .appbar--mobile
   / .tabbar (container-queried so they reflow like a real phone).
   Owner/Admin see full set; Member (staff) sees a reduced set.
   ================================================================= */

/* gallery: lay the phone frames out in a responsive wall */
.phone-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 360px)); gap: var(--sp-7) var(--sp-6); justify-content: start; align-items: start; }
@media (max-width: 760px){ .phone-wall { grid-template-columns: 1fr; justify-content: stretch; } }

/* a single documented screen: caption + phone */
.screen { display: grid; gap: var(--sp-3); }
.screen__cap { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); display: flex; align-items: center; gap: var(--sp-2); }
.screen__cap .n { color: var(--signal-600); font-weight: 600; }
.screen__cap .role { margin-left: auto; font-size: 10px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-500); letter-spacing: .04em; }
.screen__cap .role.is-staff { background: #e2edf2; color: #2f6f8f; }
.screen__note { font-size: var(--fs-cap); color: var(--ink-500); max-width: 46ch; }

/* ---- the phone device frame (~390px logical width) ---- */
.phone { width: 360px; max-width: 100%; margin-inline: auto; border-radius: 40px; background: #0c0d09; padding: 10px; box-shadow: var(--shadow-lg), inset 0 0 0 2px #2b2c24; position: relative; }
.phone__screen { border-radius: 30px; overflow: hidden; background: var(--paper); position: relative; container-type: inline-size; container-name: app; display: flex; flex-direction: column; height: 720px; }
/* the .app inside fills the screen and scrolls its own content */
.phone__screen > .app { flex: 1; min-height: 0; }
.phone .app { min-height: 0; height: 100%; }
.phone .app__body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* iOS-style status bar */
.phone__status { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px 6px; background: var(--card); font-family: var(--font-ui); flex: none; }
.phone__status .clock { font-weight: 700; font-size: var(--fs-cap); letter-spacing: .02em; }
.phone__status .ind { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-700); }
.phone__status .ind svg { width: 15px; height: 15px; }
/* the dynamic-island / notch */
.phone__notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 92px; height: 22px; background: #0c0d09; border-radius: var(--r-pill); z-index: 50; }
/* full-bleed screens (auth/splash) that don't use the app shell */
.phone__screen--bleed { background: var(--ink-900); }

/* ---- generic mobile app top bar (when not the shell appbar) ---- */
.appscreen-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--card); border-bottom: 1px solid var(--line); min-height: 56px; flex: none; position: sticky; top: 0; z-index: 30; }
.appscreen-bar .back { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-700); display: grid; place-items: center; cursor: pointer; flex: none; }
.appscreen-bar .back:hover { background: var(--paper-2); }
.appscreen-bar .back svg { width: 22px; height: 22px; }
.appscreen-bar .ttl { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appscreen-bar .ttl small { display: block; font-family: var(--font-ui); font-weight: 500; font-size: var(--fs-cap); color: var(--ink-500); }
.appscreen-bar .right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); flex: none; }

/* generic scrollable body inside an app screen */
.appscreen-body { padding: var(--sp-4); display: grid; gap: var(--sp-4); }
.appscreen-body--flush { padding: 0; }
/* a section label inside an app screen */
.app-sec-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-300); padding: 0 2px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.app-sec-label a { color: var(--signal-600); text-decoration: none; font-weight: 600; }

/* ---- AUTH / SPLASH ---- */
.splash { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-8) var(--sp-6) var(--sp-7); color: var(--paper); position: relative; overflow: hidden; }
.splash::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 50% at 80% 0%, rgba(70,168,104,.32), transparent 60%), radial-gradient(60% 50% at 0% 110%, rgba(217,138,31,.16), transparent 55%); }
.splash > * { position: relative; z-index: 1; }
.splash__mark { width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); display: grid; place-items: center; color: var(--signal-400); font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; }
.splash__title { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin-top: var(--sp-5); }
.splash__title em { font-style: italic; color: var(--signal-400); }
.splash__sub { color: #d2d3c8; margin-top: var(--sp-3); }
.splash__form { display: grid; gap: var(--sp-3); }
.splash .field__label { color: #d2d3c8; }
.splash .input { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: #fff; }
.splash .input::placeholder { color: rgba(255,255,255,.4); }
.splash .input-wrap .lead-icon { color: rgba(255,255,255,.5); }
.splash__legal { text-align: center; color: rgba(255,255,255,.45); font-size: 11px; margin-top: var(--sp-4); }
/* biometric quick-login hint */
.biolock { display: flex; align-items: center; gap: var(--sp-3); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); color: #e7e7dd; }
.biolock .ic { width: 40px; height: 40px; border-radius: var(--r-md); background: rgba(70,168,104,.18); color: var(--signal-400); display: grid; place-items: center; flex: none; }
.biolock .ic svg { width: 22px; height: 22px; }
.biolock > span:not(.ic):not(.go) { display: flex; flex-direction: column; min-width: 0; }
.biolock .t { font-weight: 600; font-size: var(--fs-sm); }
.biolock .d { font-size: var(--fs-cap); color: #b9bab0; }
.biolock .go { margin-left: auto; color: var(--signal-400); flex: none; }

/* ---- list rows (leads / customers / notifications) reuse .lead-row look ---- */
/* a tappable list row with avatar/icon + 2 lines + trailing meta + chevron */
.applist { display: flex; flex-direction: column; }
.approw { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--card); text-decoration: none; color: inherit; min-height: 64px; cursor: pointer; transition: background var(--transition); }
.approw:last-child { border-bottom: 0; }
.approw:hover { background: var(--paper); }
.approw.is-unread { background: var(--signal-100); }
.approw.is-unread:hover { background: #d8ebdd; }
.approw__lead { flex: none; position: relative; }
.approw__chan { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink-500); display: grid; place-items: center; }
.approw__chan svg { width: 19px; height: 19px; }
.approw__chan.is-sms { background: #e2edf2; color: #2f6f8f; }
.approw__chan.is-dm { background: #efe7f7; color: #6b4f9e; }
.approw__chan.is-web { background: var(--signal-100); color: var(--signal-600); }
.approw__chan.is-phone { background: var(--amber-100); color: #8a5410; }
.approw__mid { flex: 1; min-width: 0; }
.approw__top { display: flex; align-items: baseline; gap: var(--sp-2); }
.approw__who { font-weight: 700; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approw__time { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); flex: none; }
.approw__what { color: var(--ink-500); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.approw__sub { color: var(--ink-300); font-size: var(--fs-cap); margin-top: 2px; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.approw__sub svg { width: 12px; height: 12px; }
.approw__trail { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.approw__chev { color: var(--ink-300); flex: none; }
.approw__chev svg { width: 18px; height: 18px; }
/* unread dot for notifications */
.approw__dot { position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--signal-500); box-shadow: 0 0 0 2px var(--card); }
/* notification icon tile colors by type */
.approw__chan.is-booking { background: var(--signal-100); color: var(--signal-600); }
.approw__chan.is-assigned { background: #e2edf2; color: #2f6f8f; }
.approw__chan.is-cancel { background: var(--alert-100); color: var(--alert-500); }
.approw__chan.is-gap { background: var(--amber-100); color: #8a5410; }
.approw__chan.is-digest { background: var(--paper-2); color: var(--ink-700); }

/* a date / group divider in a list */
.app-divider { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-300); padding: var(--sp-3) var(--sp-4) var(--sp-1); background: var(--paper); position: sticky; top: 0; z-index: 5; }

/* ---- mobile agenda / schedule ---- */
/* day-strip selector (horizontal scrollable days) */
.daystrip { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-3) var(--sp-4); background: var(--card); border-bottom: 1px solid var(--line); flex: none; -webkit-overflow-scrolling: touch; }
.daystrip__day { flex: none; width: 48px; min-height: 60px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--ink-700); transition: border-color var(--transition), background var(--transition); }
.daystrip__day .dow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-300); }
.daystrip__day .dnum { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.daystrip__day .dots { display: flex; gap: 2px; height: 5px; }
.daystrip__day .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--signal-500); display: inline-block; }
.daystrip__day:hover { border-color: var(--line-2); }
.daystrip__day.is-selected { background: var(--signal-600); border-color: var(--signal-600); color: #fff; }
.daystrip__day.is-selected .dow { color: rgba(255,255,255,.8); }
.daystrip__day.is-selected .dots i { background: #fff; }

/* mobile agenda rows (reuse .agenda look but full width, taller) */
.m-agenda { background: var(--card); }
.m-agenda__row { display: grid; grid-template-columns: 58px 1fr; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); align-items: stretch; }
.m-agenda__row:last-child { border-bottom: 0; }
.m-agenda__time { font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--ink-500); padding-top: 2px; }
.m-agenda__time .dur { color: var(--ink-300); font-size: 10px; display: block; margin-top: 2px; }
.m-appt { border-left: 3px solid var(--signal-500); border-radius: var(--r-sm); background: var(--signal-100); padding: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; text-decoration: none; color: inherit; }
.m-appt, .m-appt * { text-decoration: none; }
.m-appt--pending { border-color: var(--amber-500); background: var(--amber-100); }
.m-appt--noshow { border-color: var(--alert-500); background: var(--alert-100); }
.m-appt--free { border-color: var(--line-2); background: var(--paper-2); border-left-style: dashed; }
.m-appt .body { flex: 1; min-width: 0; }
.m-appt .who { font-weight: 700; font-size: var(--fs-sm); color: var(--ink-900); }
.m-appt .what { font-size: var(--fs-cap); color: var(--ink-700); margin-top: 1px; }
.m-appt .free-t { color: var(--ink-500); font-style: italic; font-size: var(--fs-sm); }
.m-appt .chev { color: var(--ink-300); flex: none; }
.m-appt .chev svg { width: 18px; height: 18px; }

/* ---- appointment detail screen ---- */
.detail-hero { padding: var(--sp-5) var(--sp-4); background: var(--card); border-bottom: 1px solid var(--line); }
.detail-hero .when { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.detail-hero .svc { color: var(--ink-500); margin-top: 2px; }
.detail-hero .badges { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
/* info list (key/value rows with leading icon) */
.detail-list { display: grid; gap: 2px; }
.detail-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--card); border-bottom: 1px solid var(--line); }
.detail-item:last-child { border-bottom: 0; }
.detail-item .di-ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink-500); display: grid; place-items: center; flex: none; }
.detail-item .di-ic svg { width: 17px; height: 17px; }
.detail-item .di-body { flex: 1; min-width: 0; }
.detail-item .k { font-size: var(--fs-cap); color: var(--ink-300); font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.detail-item .v { font-weight: 600; font-size: var(--fs-sm); margin-top: 1px; }
.detail-item .v.note { font-weight: 400; color: var(--ink-700); }
.detail-item .di-trail { margin-left: auto; flex: none; align-self: center; }
/* quick-action grid on detail (call / text / directions / reschedule…) */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); padding: var(--sp-4); background: var(--card); border-bottom: 1px solid var(--line); }
.quick-act { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-3) 4px; border: 0; background: transparent; border-radius: var(--r-md); cursor: pointer; color: var(--ink-700); text-decoration: none; min-height: 44px; transition: background var(--transition); }
.quick-act:hover { background: var(--paper-2); }
.quick-act .qa-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; }
.quick-act .qa-ic svg { width: 20px; height: 20px; }
.quick-act .lbl { font-size: 11px; font-weight: 600; }
.quick-act.is-danger .qa-ic { background: var(--alert-100); color: var(--alert-500); }
.quick-act.is-neutral .qa-ic { background: var(--paper-2); color: var(--ink-700); }

/* a sticky bottom action bar inside a screen (primary CTA on detail) */
.screen-foot { margin-top: auto; display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); flex: none; }
.screen-foot .btn { flex: 1; }

/* ---- customer profile ---- */
.cust-head { padding: var(--sp-6) var(--sp-4) var(--sp-5); background: var(--card); border-bottom: 1px solid var(--line); text-align: center; }
.cust-head .avatar-pic { margin: 0 auto var(--sp-3); }
.cust-head .nm { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.cust-head .sub { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 2px; }
.cust-head .tags { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); flex-wrap: wrap; }
/* lifetime-value mini metric row */
.cust-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); background: var(--card); }
.cust-stats .st { padding: var(--sp-4) var(--sp-2); text-align: center; border-right: 1px solid var(--line); }
.cust-stats .st:last-child { border-right: 0; }
.cust-stats .st .v { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.cust-stats .st .k { font-size: 10px; font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-300); margin-top: 2px; }

/* ---- mobile settings list ---- */
.set-list { background: var(--card); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.set-list__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--card); text-decoration: none; color: inherit; min-height: 52px; cursor: pointer; }
.set-list__row:last-child { border-bottom: 0; }
.set-list__row:hover { background: var(--paper); }
.set-list__row .sl-ic { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink-700); display: grid; place-items: center; flex: none; }
.set-list__row .sl-ic svg { width: 18px; height: 18px; }
.set-list__row .sl-t { font-weight: 600; font-size: var(--fs-sm); }
.set-list__row .sl-d { font-size: var(--fs-cap); color: var(--ink-500); }
.set-list__row .sl-trail { margin-left: auto; color: var(--ink-300); display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.set-list__row .sl-trail .val { font-size: var(--fs-cap); color: var(--ink-500); font-weight: 600; }
.set-list__row .sl-trail svg { width: 18px; height: 18px; }
.set-list__row.is-danger .sl-ic { background: var(--alert-100); color: var(--alert-500); }
.set-list__row.is-danger .sl-t { color: var(--alert-500); }

/* iOS-style toggle switch (notification prefs / availability) */
.toggle { position: relative; width: 46px; height: 28px; flex: none; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle .track { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--line-2); transition: background var(--transition); }
.toggle .thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--transition); }
.toggle input:checked ~ .track { background: var(--signal-500); }
.toggle input:checked ~ .thumb { transform: translateX(18px); }
.toggle input:focus-visible ~ .track { outline: 3px solid var(--signal-400); outline-offset: 2px; }

/* availability quick-toggle banner (I'm available / away) */
.avail-banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--signal-100); border: 1px solid #cbe3d0; }
.avail-banner.is-away { background: var(--paper-2); border-color: var(--line-2); }
.avail-banner .ic { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--signal-600); display: grid; place-items: center; flex: none; }
.avail-banner.is-away .ic { color: var(--ink-300); }
.avail-banner .ic svg { width: 22px; height: 22px; }
.avail-banner .t { font-weight: 700; font-size: var(--fs-sm); color: var(--signal-600); }
.avail-banner.is-away .t { color: var(--ink-500); }
.avail-banner .d { font-size: var(--fs-cap); color: var(--ink-500); }
.avail-banner .toggle { margin-left: auto; }

/* a labeled card block inside an app screen (reuses dash-card feel, full width) */
.appcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.appcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.appcard__head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.appcard__head .link { font-size: var(--fs-cap); font-weight: 600; color: var(--signal-600); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.appcard__head .link svg { width: 14px; height: 14px; }

/* urgent / "needs you" stack on home */
.urgent-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.urgent-row:last-child { border-bottom: 0; }
.urgent-row .u-ic { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.urgent-row .u-ic.is-lead { background: var(--signal-100); color: var(--signal-600); }
.urgent-row .u-ic.is-gap { background: var(--amber-100); color: #8a5410; }
.urgent-row .u-ic svg { width: 18px; height: 18px; }
.urgent-row .u-body { flex: 1; min-width: 0; }
.urgent-row .u-t { font-weight: 600; font-size: var(--fs-sm); }
.urgent-row .u-d { font-size: var(--fs-cap); color: var(--ink-500); }
.urgent-row .btn { flex: none; }

/* floating action button (quick add) */
.fab { position: absolute; right: var(--sp-4); bottom: calc(64px + var(--sp-4)); width: 56px; height: 56px; border-radius: 50%; background: var(--signal-600); color: #fff; border: 0; box-shadow: var(--shadow-lg); display: grid; place-items: center; cursor: pointer; z-index: 35; transition: transform var(--transition), background var(--transition); }
.fab:hover { transform: translateY(-2px); background: var(--signal-500); }
.fab svg { width: 26px; height: 26px; }

/* a bottom-sheet (quick add / actions) shown statically over a screen */
.sheet-screen { position: relative; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(20,21,15,.45); z-index: 40; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--card); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-lg); padding: var(--sp-3) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); }
.sheet__grip { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--line-2); margin: 4px auto var(--sp-3); }
.sheet__title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin-bottom: var(--sp-3); }
.sheet__opt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); cursor: pointer; text-decoration: none; color: inherit; min-height: 52px; }
.sheet__opt:hover { background: var(--paper-2); }
.sheet__opt .so-ic { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; flex: none; }
.sheet__opt .so-ic svg { width: 20px; height: 20px; }
.sheet__opt > span:not(.so-ic) { display: flex; flex-direction: column; min-width: 0; }
.sheet__opt .so-t { font-weight: 600; font-size: var(--fs-sm); }
.sheet__opt .so-d { font-size: var(--fs-cap); color: var(--ink-500); }

/* AI-handled chip (shows what the responder did, ties to PRD) */
.ai-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: var(--r-pill); background: var(--signal-100); color: var(--signal-600); }
.ai-tag svg { width: 12px; height: 12px; }

/* empty state inside a phone screen */
.app-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-7) var(--sp-5); gap: var(--sp-3); }
.app-empty .ic { width: 64px; height: 64px; border-radius: var(--r-lg); background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; }
.app-empty .ic svg { width: 30px; height: 30px; }
.app-empty h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.app-empty p { color: var(--ink-500); font-size: var(--fs-sm); max-width: 32ch; }

/* small message-thread preview (AI conversation on lead detail) */
.thread { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.bubble { max-width: 82%; padding: 10px 13px; border-radius: 16px; font-size: var(--fs-sm); line-height: 1.45; }
.bubble--in { background: var(--paper-2); color: var(--ink-900); border-bottom-left-radius: 5px; justify-self: start; }
.bubble--ai { background: var(--signal-600); color: #fff; border-bottom-right-radius: 5px; justify-self: end; }
.bubble__who { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-bottom: 3px; display: flex; align-items: center; gap: 4px; }
.bubble__who svg { width: 11px; height: 11px; }

/* =================================================================
   CUSTOMER SMS OPT-IN  (public booking flow — enablement stub)
   Consent block styled like .pay-accepted; interactive opted-in /
   not-opted states. STUB ONLY — no Twilio wiring.
   ================================================================= */
.sms-optin { border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--card); padding: var(--sp-3) var(--sp-4); transition: border-color var(--transition), background var(--transition); }
.sms-optin.is-on { border-color: var(--signal-500); background: var(--signal-100); }
.sms-optin__row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.sms-optin__ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--paper-2); color: var(--ink-500); display: grid; place-items: center; flex: none; transition: background var(--transition), color var(--transition); }
.sms-optin.is-on .sms-optin__ic { background: #fff; color: var(--signal-600); }
.sms-optin__ic svg { width: 18px; height: 18px; }
.sms-optin__main { flex: 1; min-width: 0; }
.sms-optin__t { font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sms-optin__d { font-size: var(--fs-cap); color: var(--ink-500); margin-top: 2px; }
.sms-optin .toggle { margin-top: 2px; }
/* legal/consent microcopy (msg & data rates, STOP) */
.sms-optin__fine { font-size: 11px; line-height: 1.5; color: var(--ink-300); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line-2); }
.sms-optin__fine a { color: var(--ink-500); text-decoration: underline; }
/* confirmation echo ("we'll text you") shown when enabled */
.sms-confirmed { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-cap); font-weight: 600; color: var(--signal-600); margin-top: var(--sp-2); }
.sms-confirmed svg { width: 14px; height: 14px; flex: none; }

/* =================================================================
   CONVERSATION / INBOX  (customer <-> business; AI responder + owner)
   Extends the .thread / .bubble preview into a full messaging screen.
   ================================================================= */
/* two-pane inbox shell: conversation list + open thread */
.inbox { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 860px){ .inbox { grid-template-columns: 1fr; } }

/* conversation list (left) */
.convo-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.convo-list__head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.convo-list__head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.convo-item { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; cursor: pointer; transition: background var(--transition); }
.convo-item:last-child { border-bottom: 0; }
.convo-item:hover { background: var(--paper); }
.convo-item.is-active { background: var(--signal-100); }
.convo-item.is-unread .convo-item__name { font-weight: 700; }
.convo-item__lead { position: relative; flex: none; }
.convo-item__dot { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--signal-500); box-shadow: 0 0 0 2px var(--card); }
.convo-item__mid { flex: 1; min-width: 0; }
.convo-item__top { display: flex; align-items: baseline; gap: var(--sp-2); }
.convo-item__name { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-item__time { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-300); flex: none; }
.convo-item__prev { font-size: var(--fs-cap); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.convo-item__tags { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* channel pill (SMS / web / DM / phone / email) — semantic chips */
.chan-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink-500); }
.chan-pill svg { width: 12px; height: 12px; }
.chan-pill--sms   { background: var(--signal-100); color: var(--signal-600); }
.chan-pill--web   { background: #e6eef5; color: #2f6f8f; }
.chan-pill--dm    { background: #efe7f7; color: #6b4f9e; }
.chan-pill--phone { background: var(--amber-100); color: #8a5410; }
.chan-pill--email { background: var(--paper-2); color: var(--ink-700); }

/* open conversation (right) */
.convo { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; min-height: 520px; }
.convo__head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.convo__who { min-width: 0; }
.convo__name { font-weight: 700; font-size: var(--fs-body); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.convo__sub { font-size: var(--fs-cap); color: var(--ink-500); margin-top: 2px; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.convo__head-actions { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* who is answering — AI vs human status strip under the header */
.convo-status { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-5); font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }
.convo-status--ai    { background: var(--signal-100); color: var(--signal-600); }
.convo-status--human { background: var(--paper-2); color: var(--ink-700); }
.convo-status__ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.convo-status--ai .convo-status__ic { background: var(--signal-600); color: #fff; }
.convo-status--human .convo-status__ic { background: var(--ink-900); color: var(--paper); }
.convo-status__ic svg { width: 15px; height: 15px; }
.convo-status__t { font-weight: 600; }
.convo-status .spacer { margin-left: auto; }

/* message stream — reuses .bubble; adds owner (human, dark) + system rows */
.convo__stream { flex: 1; padding: var(--sp-5); display: grid; gap: var(--sp-2); align-content: start; background: var(--paper); }
.convo__stream .bubble { max-width: 76%; }
.bubble--owner { background: var(--ink-900); color: var(--paper); border-bottom-right-radius: 5px; justify-self: end; }
.bubble__time { font-size: 10px; font-family: var(--font-mono); opacity: .6; margin-top: 4px; }
/* a stacked bubble + its meta line */
.msg { display: grid; gap: 2px; }
.msg--out { justify-items: end; }
.msg--in  { justify-items: start; }
.msg__meta { font-size: 10px; font-family: var(--font-mono); color: var(--ink-300); display: flex; align-items: center; gap: 5px; padding: 0 4px; }
.msg__meta svg { width: 11px; height: 11px; }
/* day / system divider + handoff banner */
.convo-sep { text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-300); margin: var(--sp-2) 0; position: relative; }
.convo-event { justify-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-cap); font-weight: 600; color: var(--ink-500); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; margin: var(--sp-1) 0; }
.convo-event svg { width: 13px; height: 13px; color: var(--signal-600); }
.convo-event--ai svg { color: var(--signal-600); }
.convo-event--human svg { color: var(--ink-700); }

/* composer (reply box) + quick replies */
.convo__compose { border-top: 1px solid var(--line); padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--card); }
.quick-replies { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.quick-reply { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-cap); font-weight: 600; color: var(--ink-700); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer; transition: background var(--transition), border-color var(--transition); }
.quick-reply:hover { background: var(--signal-100); border-color: #cbe3d0; color: var(--signal-600); }
.quick-reply svg { width: 13px; height: 13px; }
.composer { display: flex; align-items: flex-end; gap: var(--sp-2); }
.composer__field { flex: 1; min-width: 0; }
.composer textarea.input { resize: none; padding-left: 14px; min-height: 46px; }
.composer__send { flex: none; }
/* when the AI is handling, the composer is dimmed behind a take-over hint */
.composer.is-ai { opacity: .6; pointer-events: none; }
.compose-ai-note { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-cap); color: var(--ink-500); padding: var(--sp-2) 0; }
.compose-ai-note svg { width: 14px; height: 14px; color: var(--signal-600); flex: none; }
.compose-ai-note .btn { margin-left: auto; }

/* =================================================================
   OWNER CHANNEL SETTINGS  (Settings → Channels tab)
   Reuses .set-card / .choice-card / .toggle; adds channel rows +
   per-channel owner-notification matrix.
   ================================================================= */
.channel-row { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.channel-row:last-child { border-bottom: 0; }
.channel-row__ic { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; background: var(--paper-2); color: var(--ink-500); }
.channel-row__ic svg { width: 22px; height: 22px; }
.channel-row.is-on .channel-row__ic { background: var(--signal-100); color: var(--signal-600); }
.channel-row__main { flex: 1; min-width: 0; }
.channel-row__t { font-weight: 700; font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.channel-row__d { font-size: var(--fs-cap); color: var(--ink-500); margin-top: 2px; }
.channel-row__end { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
@media (max-width: 560px){ .channel-row { flex-wrap: wrap; } .channel-row__main { flex-basis: calc(100% - 60px); } .channel-row__end { width: 100%; justify-content: flex-end; } }
/* connection status chip */
.conn-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-cap); font-weight: 600; }
.conn-chip svg { width: 13px; height: 13px; }
.conn-chip--ok { color: var(--signal-600); }
.conn-chip--off { color: var(--ink-300); }

/* AI auto-reply config row inside a set-card */
.set-row { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.set-row:first-child { padding-top: 0; }
.set-row:last-child { border-bottom: 0; padding-bottom: 0; }
.set-row__main { flex: 1; min-width: 0; }
.set-row__t { font-weight: 600; font-size: var(--fs-sm); }
.set-row__d { font-size: var(--fs-cap); color: var(--ink-500); margin-top: 2px; max-width: 60ch; }
.set-row__end { flex: none; }
/* on phones the control drops below the label so the text isn't squeezed */
@media (max-width: 560px){
  .set-row { flex-wrap: wrap; }
  .set-row__main { flex-basis: 100%; }
  .set-row__end { width: 100%; }
  .set-row__end .select-wrap { width: 100%; min-width: 0 !important; }
}

/* per-channel owner-notification matrix (how the OWNER gets alerted) */
.notify-matrix { width: 100%; border-collapse: collapse; }
.notify-matrix th, .notify-matrix td { padding: var(--sp-3) var(--sp-2); text-align: center; }
.notify-matrix thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); border-bottom: 1px solid var(--line); }
.notify-matrix tbody th { text-align: left; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-700); white-space: nowrap; }
.notify-matrix tbody td { border-bottom: 1px solid var(--line); }
.notify-matrix tbody tr:last-child td, .notify-matrix tbody tr:last-child th { border-bottom: 0; }
.notify-matrix .check { display: inline-flex; justify-content: center; }
/* on phones, keep all 3 channel columns visible (no hidden horizontal scroll):
   let the event label wrap and tighten the checkbox columns so it fits ~340px. */
@media (max-width: 560px){
  .notify-matrix th, .notify-matrix td { padding: var(--sp-3) 2px; }
  .notify-matrix thead th { font-size: 9px; letter-spacing: .02em; }
  .notify-matrix thead th svg { display: none; }
  .notify-matrix tbody th { white-space: normal; padding-left: 0; padding-right: var(--sp-3); }
  .notify-matrix tbody td { width: 44px; }
}

/* =================================================================
   SHOWCASE & REVIEWS  (appended — Work Gallery + Reviews suite)
   Shared foundation components: before/after slider, work grid +
   lightbox, star rating, review card, rating summary, source badges,
   connect-source card. Used by the public Showcase mini-site, the
   owner-side Work Gallery + Reviews settings, and the review email.
   ================================================================= */

/* ---- STAR RATING (fractional, accessible) ----
   .stars holds a track of 5 grey stars with a green overlay clipped to
   the percentage via --pct. aria-label carries the spoken value. */
.stars { position: relative; display: inline-flex; line-height: 0; color: var(--line-2); white-space: nowrap; }
.stars__base, .stars__fill { display: inline-flex; }
.stars__fill { position: absolute; inset: 0; overflow: hidden; width: calc(var(--pct, 100) * 1%); color: var(--amber-500); }
.stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.stars--lg svg { width: 22px; height: 22px; }
.stars--sm svg { width: 13px; height: 13px; }

/* ---- RATING SUMMARY (big number + stars + count + per-source) ---- */
.rating-summary { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.rating-summary__big { display: flex; flex-direction: column; gap: 4px; }
.rating-summary__score { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 6vw, 3.2rem); line-height: 1; color: var(--ink-900); }
.rating-summary__count { font-size: var(--fs-sm); color: var(--ink-500); }
.rating-summary__sources { display: flex; flex-direction: column; gap: var(--sp-2); }
.rating-source { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.rating-source__lbl { display: inline-flex; align-items: center; gap: 6px; min-width: 92px; font-weight: 600; }
.rating-source__lbl svg { width: 15px; height: 15px; }
.rating-source__val { color: var(--ink-500); font-family: var(--font-mono); font-size: var(--fs-cap); }

/* ---- SOURCE BADGES (extend .badge) ---- */
.badge--google { background: #e8eef9; color: #1a4fb4; }
.badge--yelp   { background: #fbe3e0; color: #b32318; }
.badge svg { width: 12px; height: 12px; }

/* ---- REVIEW CARD ---- */
.review-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-3); }
.review-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.review-card__who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.review-card__av { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--paper-2); color: var(--ink-700); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1rem; overflow: hidden; }
.review-card__av img { width: 100%; height: 100%; object-fit: cover; }
.review-card__name { font-weight: 700; font-size: var(--fs-sm); }
.review-card__meta { font-size: var(--fs-cap); color: var(--ink-300); }
.review-card__body { color: var(--ink-700); font-size: var(--fs-sm); line-height: 1.55; }
.review-card__foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.review-card__attr { font-size: 11px; color: var(--ink-300); font-family: var(--font-mono); }
.reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
@media (max-width: 720px){ .reviews-grid { grid-template-columns: 1fr; } }

/* ---- BEFORE / AFTER SLIDER ----
   Two layered images; the "before" layer is clipped by --pos (%). A
   draggable handle (range input, full-height, ≥44px hit area) sets --pos.
   Single-image mode (.ba-slider--single) hides the second layer + handle. */
.ba-slider { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-md); user-select: none; touch-action: pan-y; --pos: 50; }
.ba-slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-slider__after { /* base layer (full) */ }
.ba-slider__before { clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0); }
.ba-slider__tag { position: absolute; top: var(--sp-3); padding: 4px 10px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #fff; background: rgba(20,21,15,.62); backdrop-filter: blur(2px); z-index: 2; pointer-events: none; }
.ba-slider__tag--before { left: var(--sp-3); }
.ba-slider__tag--after { right: var(--sp-3); }
.ba-slider__line { position: absolute; top: 0; bottom: 0; left: calc(var(--pos) * 1%); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(20,21,15,.15); transform: translateX(-1px); z-index: 3; pointer-events: none; }
.ba-slider__knob { position: absolute; top: 50%; left: calc(var(--pos) * 1%); width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--ink-700); z-index: 3; pointer-events: none; }
.ba-slider__knob svg { width: 20px; height: 20px; }
.ba-slider__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
.ba-slider__range:focus-visible { outline: 3px solid var(--signal-400); outline-offset: -3px; opacity: 1; }
.ba-slider--single .ba-slider__before, .ba-slider--single .ba-slider__line, .ba-slider--single .ba-slider__knob, .ba-slider--single .ba-slider__range, .ba-slider--single .ba-slider__tag--before { display: none; }
.ba-caption { font-size: var(--fs-sm); color: var(--ink-500); margin-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- WORK GRID + LIGHTBOX ----
   Responsive tile grid (4→2→1). Tiles show the finished/after image with
   a service tag + a before/after marker; click opens the lightbox. */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 880px){ .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .work-grid { grid-template-columns: 1fr; } }
.work-tile { position: relative; display: block; border: 0; padding: 0; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; cursor: pointer; background: var(--paper-2); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.work-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.work-tile:focus-visible { outline: 3px solid var(--signal-400); outline-offset: 2px; }
.work-tile img { width: 100%; height: 100%; object-fit: cover; }
.work-tile__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-3); background: linear-gradient(to top, rgba(20,21,15,.55), transparent 55%); }
.work-tile__top { display: flex; justify-content: space-between; gap: var(--sp-2); }
.work-tile__ba { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; background: rgba(255,255,255,.92); color: var(--ink-900); }
.work-tile__ba svg { width: 11px; height: 11px; }
.work-tile__svc { color: #fff; font-weight: 700; font-size: var(--fs-sm); text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.work-tile__zoom { align-self: flex-end; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink-900); display: grid; place-items: center; }
.work-tile__zoom svg { width: 15px; height: 15px; }

/* Lightbox: reuses the modal scrim aesthetic; shown inline-stage in the SG */
.lightbox { position: relative; width: 100%; max-width: 680px; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.lightbox__media { background: #14150f; }
.lightbox__body { padding: var(--sp-5); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.lightbox__svc { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.lightbox__cap { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 2px; }
.lightbox__nav { display: flex; gap: var(--sp-2); }
.lightbox__x { position: absolute; top: 12px; right: 12px; z-index: 5; background: rgba(255,255,255,.92); }

/* ---- CONNECT-SOURCE CARD (Google / Yelp; connect / connected / error) ----
   Mirrors the onboarding calendar-connect pattern. */
.connect-card { display: flex; align-items: center; gap: var(--sp-4); border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); background: var(--card); }
.connect-card.is-connected { border-color: var(--signal-400); box-shadow: 0 0 0 2px var(--signal-100); }
.connect-card.is-error { border-color: #eeb7ab; box-shadow: 0 0 0 2px var(--alert-100); }
.connect-card__mark { width: 44px; height: 44px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; }
.connect-card__mark--google { background: #e8eef9; color: #1a4fb4; }
.connect-card__mark--yelp { background: #fbe3e0; color: #b32318; }
.connect-card__mark svg { width: 22px; height: 22px; }
.connect-card__main { flex: 1; min-width: 0; }
.connect-card__name { font-weight: 700; font-size: var(--fs-sm); }
.connect-card__status { font-size: var(--fs-cap); color: var(--ink-500); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.connect-card__status svg { width: 13px; height: 13px; }
.connect-card__status--ok { color: var(--signal-600); }
.connect-card__status--err { color: var(--alert-500); }
.connect-card__end { flex: none; }

/* ---- SHOWCASE (public mini-site) page chrome ----
   Standalone like booking.html: a centered branded sheet, NOT the app shell. */
.showcase { max-width: 860px; margin: 0 auto; }
.showcase__hero { position: relative; background: var(--ink-900); color: var(--paper); border-radius: var(--r-lg); padding: clamp(var(--sp-5), 5vw, var(--sp-7)); overflow: hidden; box-shadow: var(--shadow-lg); }
.showcase__hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% -10%, rgba(70,168,104,.22), transparent 45%); pointer-events: none; }
.showcase__hero > * { position: relative; z-index: 1; }
.showcase__brand { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.showcase__logo { width: 64px; height: 64px; border-radius: var(--r-md); flex: none; background: var(--signal-600); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); overflow: hidden; }
.showcase__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.05; }
.showcase__tag { color: #cfd0c6; font-size: var(--fs-sm); margin-top: 4px; }
.showcase__herorate { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); color: var(--paper); flex-wrap: wrap; }
.showcase__herorate .stars { color: rgba(255,255,255,.25); }
.showcase__herorate b { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.showcase__herorate span { color: #cfd0c6; font-size: var(--fs-sm); }
.showcase__hero .btn { margin-top: var(--sp-5); }
.showcase-sec { margin-top: var(--sp-7); }
.showcase-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.showcase-sec__head h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); }
.showcase-sec__head .lnk { font-size: var(--fs-sm); color: var(--signal-600); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.showcase-sec__head .lnk svg { width: 14px; height: 14px; }
.showcase-svcs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (max-width: 600px){ .showcase-svcs { grid-template-columns: 1fr; } }
.showcase-svc { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.showcase-svc__nm { font-weight: 600; font-size: var(--fs-sm); }
.showcase-svc__pr { font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--signal-600); white-space: nowrap; }
.showcase-nap { display: grid; gap: var(--sp-3); }
.showcase-nap__row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-700); }
.showcase-nap__row svg { width: 17px; height: 17px; color: var(--signal-600); flex: none; }
.showcase-cta { background: var(--signal-100); border: 1px solid var(--signal-400); border-radius: var(--r-lg); padding: var(--sp-6); text-align: center; margin-top: var(--sp-7); }
.showcase-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); }
.showcase-cta p { color: var(--ink-500); font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-4); }

/* ---- WORK GALLERY (owner mgmt) bits ---- */
.gal-toggle-row { display: flex; align-items: center; gap: var(--sp-4); }
.gal-toggle-row__main { flex: 1; min-width: 0; }
.draft-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-3); }
.draft-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); }
.draft-thumb img { width: 100%; height: 100%; object-fit: cover; }
.draft-thumb__pick { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; color: var(--ink-500); }
.draft-thumb.is-picked .draft-thumb__pick { background: var(--signal-600); color: #fff; }
.draft-thumb__pick svg { width: 13px; height: 13px; }
.gal-item { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.gal-item__thumbs { display: flex; gap: 4px; flex: none; }
.gal-item__thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); background: var(--paper-2); }
.gal-item__main { flex: 1; min-width: 0; }
.gal-item__cap { font-weight: 600; font-size: var(--fs-sm); }
.gal-item__sub { font-size: var(--fs-cap); color: var(--ink-500); margin-top: 2px; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.gal-item__handle { color: var(--ink-300); cursor: grab; flex: none; }
.gal-item__handle svg { width: 18px; height: 18px; }
@media (max-width: 560px){
  .gal-item { flex-wrap: wrap; }
  .gal-item__main { flex-basis: 100%; order: 3; }
}

/* ---- REVIEWS (owner mgmt) request-generation flow visual ---- */
.sentiment-flow { display: flex; align-items: stretch; gap: var(--sp-3); flex-wrap: wrap; }
.sentiment-step { flex: 1; min-width: 180px; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); background: var(--card); }
.sentiment-step__n { width: 24px; height: 24px; border-radius: 50%; background: var(--ink-900); color: var(--paper); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 600; margin-bottom: var(--sp-3); }
.sentiment-step__t { font-weight: 700; font-size: var(--fs-sm); }
.sentiment-step__d { font-size: var(--fs-cap); color: var(--ink-500); margin-top: 4px; line-height: 1.5; }
.sentiment-step--happy { border-color: var(--signal-400); background: var(--signal-100); }
.sentiment-step--happy .sentiment-step__n { background: var(--signal-600); }
.sentiment-step--low { border-color: var(--amber-500); background: var(--amber-100); }
.sentiment-step--low .sentiment-step__n { background: var(--amber-500); color: #2a1c03; }
.sentiment-branch { display: flex; align-items: center; color: var(--ink-300); font-size: 11px; font-family: var(--font-mono); }
.sentiment-branch svg { width: 18px; height: 18px; }
@media (max-width: 720px){ .sentiment-branch { transform: rotate(90deg); align-self: center; } }

/* =================================================================
   BUSINESS APP — JOB-PHOTO CAPTURE (appended)
   The servicer (Owner OR Member/field staff) captures before/after job
   photos on their phone; the set feeds the owner-side Work Gallery DRAFT
   tray (.draft-tray on settings-gallery.html) → curated → public Showcase.
   Mobile-only; rendered in .phone frames. Reuses .ba-slider, .draft-thumb,
   .sheet, .screen-foot, .appscreen-bar, toggles, badges, buttons.
   ================================================================= */

/* native camera viewfinder mock (full-bleed dark capture surface) */
.cam { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: #0c0d09; color: #fff; }
.cam__view { position: relative; flex: 1; min-height: 0; overflow: hidden; background:
  radial-gradient(120% 80% at 50% 0%, #2b3326, #14150f 70%); display: grid; place-items: center; }
/* faux framing corners on the viewfinder */
.cam__frame { position: absolute; inset: var(--sp-5); border-radius: var(--r-md); pointer-events: none; }
.cam__frame::before, .cam__frame::after { content: ""; position: absolute; width: 28px; height: 28px; border: 2px solid rgba(255,255,255,.5); }
.cam__frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: var(--r-sm) 0 0 0; }
.cam__frame::after { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 var(--r-sm) 0; }
/* which-slot pill at the top of the viewfinder (Before / After / Photo) */
.cam__slotpill { position: absolute; top: var(--sp-4); left: 50%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; background: rgba(20,21,15,.6); backdrop-filter: blur(4px); color: #fff; padding: 6px 14px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.cam__slotpill svg { width: 13px; height: 13px; }
.cam__slotpill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--alert-500); }
.cam__hint { position: absolute; bottom: var(--sp-4); left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-size: var(--fs-cap); padding: 0 var(--sp-5); z-index: 3; }
.cam__ghost { color: rgba(255,255,255,.4); display: grid; place-items: center; gap: var(--sp-2); text-align: center; }
.cam__ghost svg { width: 54px; height: 54px; }
.cam__ghost .t { font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,.6); }
/* a faux captured frame fills the viewfinder when a shot is taken */
.cam__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* capture control bar (big thumb-friendly targets) */
.cam__controls { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-6) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); background: #0c0d09; flex: none; }
.cam__side { width: 52px; height: 52px; border-radius: var(--r-md); border: 0; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.cam__side:hover { background: rgba(255,255,255,.16); }
.cam__side svg { width: 24px; height: 24px; }
.cam__side .lbl { display: none; }
/* the shutter — 72px, well over 44px */
.cam__shutter { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,.15); cursor: pointer; flex: none; display: grid; place-items: center; transition: transform var(--transition), background var(--transition); }
.cam__shutter::after { content: ""; width: 56px; height: 56px; border-radius: 50%; background: #fff; transition: transform var(--transition); }
.cam__shutter:hover::after { transform: scale(.92); }
.cam__shutter:active::after { transform: scale(.8); }

/* slot strip: Before / After (or single) chips above the controls */
.slot-strip { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: #14150f; border-top: 1px solid rgba(255,255,255,.08); flex: none; }
.slot-tile { flex: 1; border-radius: var(--r-md); overflow: hidden; position: relative; aspect-ratio: 1 / 1; background: rgba(255,255,255,.06); border: 1.5px dashed rgba(255,255,255,.18); display: grid; place-items: center; color: rgba(255,255,255,.5); cursor: pointer; }
.slot-tile.is-active { border-style: solid; border-color: var(--signal-400); box-shadow: 0 0 0 2px rgba(70,168,104,.3); }
.slot-tile.is-filled { border-style: solid; border-color: rgba(255,255,255,.18); }
.slot-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot-tile__lbl { position: absolute; top: 6px; left: 6px; z-index: 2; font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; background: rgba(20,21,15,.65); color: #fff; padding: 2px 7px; border-radius: var(--r-pill); }
.slot-tile__empty { display: grid; place-items: center; gap: 4px; }
.slot-tile__empty svg { width: 22px; height: 22px; }
.slot-tile__empty span { font-size: 10px; font-weight: 600; }
/* retake affordance over a filled tile */
.slot-tile__retake { position: absolute; bottom: 6px; right: 6px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(20,21,15,.7); color: #fff; display: grid; place-items: center; cursor: pointer; }
.slot-tile__retake svg { width: 15px; height: 15px; }
.slot-tile__done { position: absolute; top: 6px; right: 6px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; background: var(--signal-500); color: #fff; display: grid; place-items: center; }
.slot-tile__done svg { width: 12px; height: 12px; }

/* capture-mode segmented (Before/After vs Single) — light, sits in the bar */
.cap-mode { display: inline-flex; background: rgba(255,255,255,.08); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.cap-mode button { border: 0; background: transparent; color: rgba(255,255,255,.7); cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-cap); font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); }
.cap-mode button.is-active { background: #fff; color: var(--ink-900); }

/* read-only "this attaches to" context block (service + customer) */
.attach-ctx { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.attach-ctx .ic { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; flex: none; }
.attach-ctx .ic svg { width: 18px; height: 18px; }
.attach-ctx .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-300); }
.attach-ctx .v { font-weight: 700; font-size: var(--fs-sm); }
.attach-ctx .sub { font-size: var(--fs-cap); color: var(--ink-500); }
.attach-ctx .lock { margin-left: auto; color: var(--ink-300); flex: none; }
.attach-ctx .lock svg { width: 15px; height: 15px; }

/* destination note (where these photos go + who reviews) */
.dest-note { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--signal-100); border: 1px solid #cbe3d0; font-size: var(--fs-cap); color: var(--ink-700); }
.dest-note svg { width: 16px; height: 16px; color: var(--signal-600); flex: none; margin-top: 1px; }
.dest-note.is-staff { background: #e2edf2; border-color: #bcd4e0; }
.dest-note.is-staff svg { color: #2f6f8f; }

/* breadcrumb: job photo -> gallery -> public showcase */
.flow-breadcrumb { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.flow-breadcrumb__step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 70px; text-align: center; }
.flow-breadcrumb__ic { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink-500); display: grid; place-items: center; }
.flow-breadcrumb__ic svg { width: 19px; height: 19px; }
.flow-breadcrumb__step.is-now .flow-breadcrumb__ic { background: var(--signal-600); color: #fff; }
.flow-breadcrumb__step.is-pub .flow-breadcrumb__ic { background: var(--ink-900); color: var(--signal-400); }
.flow-breadcrumb__lbl { font-size: 10px; font-weight: 600; color: var(--ink-500); line-height: 1.2; }
.flow-breadcrumb__arr { color: var(--ink-300); flex: none; }
.flow-breadcrumb__arr svg { width: 16px; height: 16px; }

/* submitted confirmation hero (reuses app-empty feel, signal accent) */
.cap-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-6) var(--sp-5); gap: var(--sp-3); }
.cap-done__check { width: 72px; height: 72px; border-radius: 50%; background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; }
.cap-done__check svg { width: 36px; height: 36px; }
.cap-done h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; }
.cap-done p { color: var(--ink-500); font-size: var(--fs-sm); max-width: 34ch; }
/* mini before/after preview thumb pair on the confirmation */
.cap-done__pair { display: flex; gap: var(--sp-2); }
.cap-done__pair img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); background: var(--paper-2); }

/* =================================================================
   ENHANCED DATA TABLE (appended)
   Extends the base Tables foundation (.table-wrap / .tbl / .badge /
   .row-actions / .pager / .tbl-empty / .sk-row). Adds: saved-view tabs,
   a filter/search/density/columns control bar, removable filter chips,
   bulk select + a bulk-action bar, and a checkbox column.
   ================================================================= */

/* saved-view tabs (sit on top of the table card) */
.dt-views { display: flex; align-items: center; gap: 2px; padding: var(--sp-2) var(--sp-3) 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.dt-view { border: 0; background: transparent; cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-500); padding: 10px var(--sp-4); border-radius: var(--r-sm) var(--r-sm) 0 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--transition), border-color var(--transition); }
.dt-view:hover { color: var(--ink-900); }
.dt-view.is-active { color: var(--signal-600); border-bottom-color: var(--signal-600); }
.dt-view .dt-view__count { font-family: var(--font-mono); font-size: 10px; color: var(--ink-300); background: var(--paper-2); border-radius: var(--r-pill); padding: 1px 7px; }
.dt-view.is-active .dt-view__count { color: var(--signal-600); background: var(--signal-100); }
.dt-views .dt-view--add { color: var(--ink-300); margin-left: auto; }

/* control bar (search + filters + density + columns) */
.dt-controls { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dt-controls .search { flex: 1; min-width: 180px; max-width: 320px; }
.dt-controls__right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex-wrap: wrap; }

/* a filter button that opens a .menu (shown open inline in the SG) */
.dt-filter { position: relative; }
.dt-filterbtn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--card); color: var(--ink-700); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.dt-filterbtn:hover { border-color: var(--ink-300); background: var(--paper); }
.dt-filterbtn svg { width: 16px; height: 16px; }
.dt-filterbtn .dt-filterbtn__n { font-family: var(--font-mono); font-size: 10px; color: #fff; background: var(--signal-600); border-radius: var(--r-pill); padding: 1px 7px; }
.dt-filter .menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; }

/* active filter chips row (reuses .tag) */
.dt-chips { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--paper); }
.dt-chips__lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-300); }
.dt-chips__clear { border: 0; background: transparent; color: var(--signal-600); font-weight: 600; font-size: var(--fs-cap); cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm); }
.dt-chips__clear:hover { background: var(--signal-100); }

/* checkbox cell + native checkbox styling to brand green */
.dt-check { width: 1%; white-space: nowrap; }
.dt-check input[type=checkbox], .dt-checkall input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--signal-600); cursor: pointer; margin: 0; vertical-align: middle; }
.tbl tbody tr.is-selected { background: var(--signal-100); }
.tbl tbody tr.is-selected:hover { background: #d8ead8; }
.tbl tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--signal-600); }

/* bulk-action bar (replaces the controls when ≥1 row selected) */
.dt-bulkbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--ink-900); color: var(--paper); flex-wrap: wrap; }
.dt-bulkbar__count { font-weight: 700; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 7px; }
.dt-bulkbar__count .n { font-family: var(--font-mono); background: var(--signal-500); color: #fff; border-radius: var(--r-pill); padding: 1px 9px; }
.dt-bulkbar__actions { display: flex; gap: var(--sp-2); margin-left: auto; flex-wrap: wrap; }
.dt-bulk-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--paper); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); cursor: pointer; transition: background var(--transition); }
.dt-bulk-btn:hover { background: rgba(255,255,255,.14); }
.dt-bulk-btn svg { width: 15px; height: 15px; }
.dt-bulk-btn--danger { color: #ffd9d0; border-color: rgba(255,150,130,.4); }
.dt-bulk-btn--danger:hover { background: rgba(192,67,46,.35); }
.dt-bulkbar__x { margin-left: var(--sp-2); background: transparent; border: 0; color: var(--paper); opacity: .7; cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); }
.dt-bulkbar__x:hover { opacity: 1; background: rgba(255,255,255,.1); }

/* density: compact mode shrinks row padding */
.tbl.is-compact tbody td { padding: var(--sp-2) var(--sp-4); }
.tbl.is-compact thead th { padding: var(--sp-2) var(--sp-4); }

/* column show/hide: utility to hide a column by data-col (toggled in the demo) */
.tbl [data-col].is-hidden { display: none; }

/* mobile: the enhanced table reuses .tbl--stack; the checkbox + bulk bar adapt */
@media (max-width: 600px) {
  .dt-controls .search { max-width: none; }
  .dt-controls__right { margin-left: 0; width: 100%; }
  .dt-controls__right .dt-filterbtn, .dt-controls__right .segmented { flex: 1; justify-content: center; }
  .dt-bulkbar { position: sticky; bottom: 0; z-index: 5; }
  .dt-bulkbar__actions { width: 100%; }
  .dt-bulkbar__actions .dt-bulk-btn { flex: 1; justify-content: center; }
  /* in stacked card mode, the checkbox cell rides at the top-right of the card */
  .tbl.tbl--stack td.dt-check { position: absolute; top: 10px; right: 10px; width: auto; padding: 0; }
  .tbl.tbl--stack tr { position: relative; padding-top: var(--sp-4); }
  .tbl.tbl--stack td.dt-check::before { display: none; }
  .tbl.tbl--stack tr.is-selected td:first-child { box-shadow: none; }
  .tbl.tbl--stack tr.is-selected { border-color: var(--signal-600); box-shadow: 0 0 0 1px var(--signal-600); }
}

/* =================================================================
   FINISH SETUP — checklist page + slim dashboard banner (appended)
   ================================================================= */

/* --- progress bar (reused on the checklist header + the slim banner) --- */
.progress { height: 8px; border-radius: var(--r-pill); background: var(--paper-2); overflow: hidden; }
.progress__fill { height: 100%; border-radius: var(--r-pill); background: var(--signal-500); transition: width var(--transition); }
.progress--onlight { background: rgba(255,255,255,.18); }
.progress--onlight .progress__fill { background: var(--signal-400); }

/* --- checklist page header (score ring-ish summary) --- */
.setup-head { display: flex; align-items: center; gap: var(--sp-5); background: var(--ink-900); color: var(--paper); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-lg); flex-wrap: wrap; }
.setup-head__pct { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1; }
.setup-head__main { flex: 1; min-width: 220px; }
.setup-head__main h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); }
.setup-head__main p { color: #cfd0c6; font-size: var(--fs-sm); margin-top: 4px; }
.setup-head .progress { margin-top: var(--sp-4); }

/* --- a checklist section (group) --- */
.setup-group { margin-top: var(--sp-6); }
.setup-group__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.setup-group__head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.setup-group__head .meta { font-family: var(--font-mono); font-size: var(--fs-cap); color: var(--ink-300); margin-left: auto; }
.setup-list { display: grid; gap: var(--sp-3); }

/* --- a checklist item row --- */
.setup-item { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); transition: border-color var(--transition), box-shadow var(--transition); }
.setup-item:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.setup-item__mark { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2px solid var(--line-2); color: transparent; }
.setup-item__mark svg { width: 16px; height: 16px; }
.setup-item__main { flex: 1; min-width: 0; }
.setup-item__t { font-weight: 700; font-size: var(--fs-sm); }
.setup-item__d { font-size: var(--fs-cap); color: var(--ink-500); margin-top: 2px; max-width: 60ch; }
.setup-item__end { flex: none; }
/* done state */
.setup-item.is-done { background: var(--paper); border-color: var(--line); }
.setup-item.is-done .setup-item__mark { background: var(--signal-600); border-color: var(--signal-600); color: #fff; }
.setup-item.is-done .setup-item__t { color: var(--ink-500); }
/* required / non-optional flag */
.setup-item__req { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--amber-500); }
@media (max-width: 560px) {
  .setup-item { flex-wrap: wrap; }
  .setup-item__end { flex-basis: 100%; }
  .setup-item__end .btn { width: 100%; }
}

/* completed celebration card */
.setup-done { text-align: center; background: var(--signal-100); border: 1px solid var(--signal-400); border-radius: var(--r-lg); padding: var(--sp-7) var(--sp-5); }
.setup-done .ic { width: 56px; height: 56px; border-radius: 50%; background: var(--signal-600); color: #fff; display: grid; place-items: center; margin: 0 auto var(--sp-4); }
.setup-done .ic svg { width: 28px; height: 28px; }
.setup-done h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); }
.setup-done p { color: var(--ink-500); font-size: var(--fs-sm); margin: var(--sp-2) auto var(--sp-4); max-width: 46ch; }

/* --- slim dashboard setup banner (replaces the big first-run block) --- */
.setup-banner { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--signal-400); background: var(--signal-100); border-radius: var(--r-md); }
.setup-banner__ic { width: 38px; height: 38px; border-radius: var(--r-sm); flex: none; background: var(--signal-600); color: #fff; display: grid; place-items: center; }
.setup-banner__ic svg { width: 20px; height: 20px; }
.setup-banner__main { flex: 1; min-width: 0; }
.setup-banner__t { font-weight: 700; font-size: var(--fs-sm); }
.setup-banner .progress { margin-top: 7px; max-width: 320px; }
.setup-banner__end { flex: none; }
@media (max-width: 560px) {
  .setup-banner { flex-wrap: wrap; }
  .setup-banner .progress { max-width: none; }
  .setup-banner__end { flex-basis: 100%; }
  .setup-banner__end .btn { width: 100%; }
}

/* =================================================================
   SOCIAL AUTH (appended) — "Continue with Google" + future providers
   A neutral/bordered full-width button (white, Google convention),
   distinct from the primary CTA, ≥44px, with hover/focus/disabled/
   loading. Built provider-agnostic: .btn--social is the base; per-
   provider modifiers only set the logo gutter. Logos are inline SVG
   (brand-correct) — Lucide has no brand glyphs, so never use it here.
   ================================================================= */
.btn--social {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  width: 100%; min-height: 48px; padding: 12px 18px;
  border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--card); color: var(--ink-900);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-body);
  cursor: pointer; position: relative;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn--social:hover { background: var(--paper); border-color: var(--ink-300); }
.btn--social:focus-visible { outline: 3px solid var(--signal-400); outline-offset: 2px; }
.btn--social:disabled, .btn--social.is-disabled { opacity: .55; cursor: not-allowed; }
.btn--social:disabled:hover { background: var(--card); border-color: var(--line-2); }
.btn--social .social-logo { width: 20px; height: 20px; flex: none; display: block; }
/* loading: swap the logo for a spinner and dim the label */
.btn--social.is-loading { color: var(--ink-300); pointer-events: none; }
.btn--social.is-loading .social-logo { visibility: hidden; }
.btn--social.is-loading::before {
  content: ""; position: absolute; left: 18px; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--signal-500);
  animation: sg-spin .6s linear infinite;
}

/* "or" divider between SSO and the email form */
.or-divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--ink-300); }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.or-divider span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* terms/privacy microcopy under the auth/SSO area */
.auth-legal { font-size: var(--fs-cap); color: var(--ink-300); text-align: center; margin-top: var(--sp-4); line-height: 1.5; }
.auth-legal a { color: var(--ink-500); text-decoration: underline; }

/* =================================================================
   CUSTOMER APP — RECURRING CUSTOMER (pages/customer-app.html)
   Customer-facing recurring experience: 1-tap rebook, standing
   appointments, my appointments + history, loyalty/recognition.
   App-primary (reuses .phone frame + .tabbar) + a lighter web
   "welcome back" variant (reuses booking .bookcard). Appended so it
   never disturbs shared rules above.
   ================================================================= */

/* in-page table of contents for the four experiences */
.reco-toc { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.reco-toc a { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 8px 14px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--card); color: var(--ink-700); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; transition: border-color var(--transition), background var(--transition); }
.reco-toc a:hover { border-color: var(--signal-500); background: var(--signal-100); }
.reco-toc a .n { width: 20px; height: 20px; border-radius: 50%; background: var(--signal-600); color: #fff; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }

/* generic content pad inside a customer phone screen (mirrors .app__content but mobile-tuned, clears tab bar) */
.cust-content { padding: var(--sp-4) var(--sp-4) calc(var(--sp-6) + 8px); display: grid; gap: var(--sp-3); align-content: start; }

/* personalized greeting row */
.cust-hello { display: flex; align-items: center; gap: var(--sp-3); }
.cust-hello__h { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.1; letter-spacing: -.01em; }
.cust-hello__sub { margin-top: 3px; font-size: var(--fs-cap); color: var(--ink-500); display: inline-flex; align-items: center; gap: 5px; }

/* THE hero — "book your usual" card */
.usual-card { background: var(--card); border: 1.5px solid var(--signal-500); border-radius: var(--r-lg); box-shadow: 0 0 0 3px var(--signal-100), var(--shadow-sm); padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.usual-card__top { display: flex; align-items: center; gap: var(--sp-3); }
.usual-card__ic { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--signal-600); color: #fff; display: grid; place-items: center; flex: none; }
.usual-card__ic svg { width: 22px; height: 22px; }
.usual-card__svc .nm { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.usual-card__svc .meta { color: var(--ink-500); font-size: var(--fs-cap); margin-top: 2px; display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.usual-card__svc .meta span { display: inline-flex; align-items: center; gap: 4px; }
.usual-card__svc .meta svg { width: 13px; height: 13px; }
.usual-card__rows { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: var(--paper-2); border-radius: var(--r-md); }
.usual-card__row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-700); }
.usual-card__row svg { width: 16px; height: 16px; color: var(--signal-600); flex: none; }
.usual-card__row strong { font-weight: 700; }
.usual-card--web { border-radius: var(--r-md); margin-top: var(--sp-4); }

/* "book something else" secondary path */
.cust-other { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); text-decoration: none; color: inherit; transition: border-color var(--transition); }
.cust-other:hover { border-color: var(--signal-500); }
.cust-other .ic { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink-700); display: grid; place-items: center; flex: none; }
.cust-other .ic svg { width: 18px; height: 18px; }
.cust-other .nm { font-weight: 700; font-size: var(--fs-sm); }
.cust-other .d { color: var(--ink-500); font-size: var(--fs-cap); margin-top: 1px; }
.cust-other .chev { margin-left: auto; color: var(--ink-300); flex: none; }
.cust-other--web { margin-top: var(--sp-3); }

/* confirm-your-usual recap strip */
.usual-recap { background: var(--paper-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-2); }
.usual-same { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--signal-500); border-radius: var(--r-md); background: var(--signal-100); cursor: pointer; color: inherit; min-height: 56px; }
.usual-same .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--signal-600); color: #fff; display: grid; place-items: center; flex: none; }
.usual-same .ic svg { width: 19px; height: 19px; }
.usual-same .tx .t { font-weight: 700; font-size: var(--fs-sm); }
.usual-same .tx .d { color: var(--ink-600, var(--ink-500)); font-size: var(--fs-cap); margin-top: 1px; }
.usual-same .chev { margin-left: auto; color: var(--signal-600); flex: none; }
.slots--app { grid-template-columns: 1fr 1fr; max-height: none; }

/* compact confirmation block inside a phone */
.cust-confirm { text-align: center; padding: var(--sp-4) 0 0; }
.cust-confirm__check { width: 60px; height: 60px; border-radius: 50%; background: var(--signal-100); color: var(--signal-600); display: grid; place-items: center; margin: 0 auto var(--sp-3); }
.cust-confirm__check svg { width: 32px; height: 32px; }
.cust-confirm h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; }
.cust-confirm__sub { color: var(--ink-500); font-size: var(--fs-sm); margin-top: 4px; }

/* "make this recurring?" inline upsell */
.make-recurring { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--signal-500); border-radius: var(--r-md); background: var(--signal-100); }
.make-recurring svg { width: 16px; height: 16px; color: var(--signal-600); vertical-align: -3px; margin-right: 4px; }
.make-recurring p { font-size: var(--fs-cap); color: var(--ink-700); margin-top: 2px; }
.make-recurring .btn { margin-left: auto; flex: none; }

/* standing-appointment setup: frequency grid + day pills */
.freq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.freq-opt { padding: 13px; border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--card); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-700); cursor: pointer; transition: border-color var(--transition), background var(--transition); min-height: 48px; }
.freq-opt:hover { border-color: var(--signal-500); }
.freq-opt.is-selected { border-color: var(--signal-600); background: var(--signal-600); color: #fff; }
.dow-row { display: flex; gap: 5px; }
.dow-pill { flex: 1 1 0; min-width: 0; height: 46px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); background: var(--card); font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 600; color: var(--ink-700); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.dow-pill:hover { border-color: var(--signal-500); }
.dow-pill.is-selected { border-color: var(--signal-600); background: var(--signal-600); color: #fff; }
.recur-preview { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--signal-100); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--ink-700); margin-top: var(--sp-3); }
.recur-preview svg { width: 18px; height: 18px; color: var(--signal-600); flex: none; margin-top: 1px; }

/* occurrence list (next visits) */
.occ-list { display: grid; gap: var(--sp-2); }
.occ-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.occ-row__date { width: 44px; flex: none; text-align: center; display: grid; gap: 0; background: var(--paper-2); border-radius: var(--r-sm); padding: 5px 0; }
.occ-row__date b { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1; }
.occ-row__date small { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.occ-row__main { min-width: 0; flex: 1; }
.occ-row__main .t { font-weight: 700; font-size: var(--fs-sm); }
.occ-row__main .d { color: var(--ink-500); font-size: var(--fs-cap); margin-top: 1px; }
.occ-row__acts { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
.occ-row.is-skipped { opacity: .62; }
.occ-row.is-skipped .occ-row__date { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }

/* series banner + footer (manage view) */
.series-banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--signal-100); border: 1px solid var(--signal-500); }
.series-banner .ic { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--signal-600); color: #fff; display: grid; place-items: center; flex: none; }
.series-banner .ic svg { width: 20px; height: 20px; }
.series-banner .t { font-weight: 700; font-size: var(--fs-sm); }
.series-banner .d { color: var(--ink-600, var(--ink-500)); font-size: var(--fs-cap); margin-top: 1px; }
.series-banner .badge { margin-left: auto; flex: none; }
.series-banner.is-paused { background: var(--amber-100); border-color: var(--amber-500); }
.series-banner.is-paused .ic { background: #8a5410; }
.series-foot { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.btn--ghost.btn--danger { --btn-bg: transparent; --btn-fg: var(--alert-500); --btn-bd: transparent; box-shadow: none; }
.btn--ghost.btn--danger:hover { background: var(--alert-100); }

/* destructive-confirm icon inside the cancel-series sheet */
.conf-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.conf-ic svg { width: 17px; height: 17px; }
.conf-ic--danger { background: var(--alert-100); color: var(--alert-500); }

/* my-appointments: upcoming card */
.appt-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.appt-card__when { display: flex; align-items: center; gap: var(--sp-3); }
.appt-card__when .d { width: 46px; flex: none; text-align: center; display: grid; background: var(--signal-100); border-radius: var(--r-sm); padding: 6px 0; }
.appt-card__when .d b { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1; color: var(--signal-600); }
.appt-card__when .d small { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--signal-600); }
.appt-card__when .t { font-weight: 700; }
.appt-card__when .s { color: var(--ink-500); font-size: var(--fs-cap); margin-top: 1px; }
.appt-card__when .badge { margin-left: auto; flex: none; }
.appt-card__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-cap); color: var(--ink-500); }
.appt-card__meta .dotsep { color: var(--ink-300); }
.appt-card__acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.appt-card__acts .btn { flex: 1; min-width: 0; }

/* history list */
.hist-list { display: grid; gap: var(--sp-2); }
.hist-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.hist-row__ic { width: 38px; height: 38px; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink-700); display: grid; place-items: center; flex: none; }
.hist-row__ic svg { width: 18px; height: 18px; }
.hist-row__main { min-width: 0; flex: 1; }
.hist-row__main .t { font-weight: 700; font-size: var(--fs-sm); }
.hist-row__main .d { color: var(--ink-500); font-size: var(--fs-cap); margin-top: 1px; }
.hist-row__end { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* loyalty / recognition */
.loyal-hero { text-align: center; display: grid; justify-items: center; gap: 6px; padding: var(--sp-3) 0 var(--sp-2); }
.loyal-hero h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; }
.loyal-hero__since { color: var(--ink-500); font-size: var(--fs-cap); }
.regular-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-cap); font-weight: 700; padding: 5px 12px; border-radius: var(--r-pill); background: var(--signal-100); color: var(--signal-600); }
.regular-badge svg { width: 14px; height: 14px; }
.loyal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.loyal-stat { text-align: center; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.loyal-stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--signal-600); line-height: 1; }
.loyal-stat small { display: block; margin-top: 4px; font-size: var(--fs-cap); color: var(--ink-500); }
.milestone { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--amber-500); border-radius: var(--r-md); background: var(--amber-100); }
.milestone .ic { width: 40px; height: 40px; border-radius: 50%; background: #8a5410; color: #fff; display: grid; place-items: center; flex: none; }
.milestone .ic svg { width: 20px; height: 20px; }
.milestone .t { font-weight: 700; font-size: var(--fs-sm); }
.milestone .d { color: var(--ink-700); font-size: var(--fs-cap); margin-top: 1px; }
.milestone.is-done { border-color: var(--signal-500); background: var(--signal-100); }
.milestone.is-done .ic { background: var(--signal-600); }
.milestone.is-done .d { color: var(--ink-500); }
.saved-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--card); }
.saved-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.saved-row:last-child { border-bottom: 0; }
.saved-row .ic { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--paper-2); color: var(--signal-600); display: grid; place-items: center; flex: none; }
.saved-row .ic svg { width: 17px; height: 17px; }
.saved-row .k { font-size: var(--fs-cap); color: var(--ink-500); }
.saved-row .v { font-weight: 600; font-size: var(--fs-sm); }
.saved-row .chev { margin-left: auto; color: var(--ink-300); flex: none; }

/* milestone perk card (tasteful, owner-set) */
.perk-card { text-align: center; display: grid; justify-items: center; gap: 6px; padding: var(--sp-5) var(--sp-4); border: 1.5px solid var(--signal-500); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--signal-100), var(--card)); }
.perk-card__ic { width: 56px; height: 56px; border-radius: 50%; background: var(--signal-600); color: #fff; display: grid; place-items: center; }
.perk-card__ic svg { width: 28px; height: 28px; }
.perk-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
.perk-card p { color: var(--ink-700); font-size: var(--fs-sm); max-width: 32ch; }
.perk-card__code { font-family: var(--font-mono); font-weight: 600; letter-spacing: .1em; font-size: var(--fs-sm); padding: 8px 16px; border: 1.5px dashed var(--signal-500); border-radius: var(--r-sm); background: var(--card); color: var(--signal-600); margin-top: 2px; }

/* web "welcome back" header (lighter, inside the booking card) */
.web-welcome { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-1); padding: var(--sp-3) var(--sp-4); background: var(--signal-100); border-radius: var(--r-md); }
.web-welcome__h { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.1; }
.web-welcome__sub { margin-top: 3px; font-size: var(--fs-sm); color: var(--ink-700); display: inline-flex; align-items: center; gap: 5px; }
.web-welcome__cta { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.web-welcome__cta .btn { flex: 1; min-width: 180px; }

@media (max-width: 480px) {
  .web-welcome__cta .btn { flex: 1 1 100%; min-width: 0; white-space: normal; line-height: 1.2; }
  .appt-card__acts .btn { flex: 1 1 100%; min-width: 0; white-space: normal; line-height: 1.2; }
}
/* same reflow when the card sits inside a narrow framed phone preview (the
   .phone__screen / .app container is ~390px even though the viewport is wide,
   so the viewport media query above can't catch it). Container-query driven. */
@container app (max-width: 480px) {
  .web-welcome__cta .btn { flex: 1 1 100%; min-width: 0; white-space: normal; line-height: 1.2; }
  .appt-card__acts .btn { flex: 1 1 100%; min-width: 0; white-space: normal; line-height: 1.2; }
}

/* =================================================================
   EMAIL PREFERENCE CENTER + UNSUBSCRIBE (appended)
   The public page email footers point at ("Manage preferences" /
   "Unsubscribe"). Outside the app shell (recipients may be logged out).
   Reuses .set-card, .toggle, buttons, the toast. Booking/transactional
   emails are non-optional by design (CAN-SPAM compliant).
   ================================================================= */
.pref { max-width: 640px; margin: 0 auto; }
.pref__head { background: var(--ink-900); color: var(--paper); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-lg); }
.pref__head h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); }
.pref__head p { color: #cfd0c6; font-size: var(--fs-sm); margin-top: 6px; }
.pref__who { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-cap); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-pill); padding: 5px 12px; }
.pref__who svg { width: 14px; height: 14px; }

/* a preference row inside a .set-card */
.pref-row { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.pref-row:first-child { padding-top: 0; }
.pref-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pref-row__main { flex: 1; min-width: 0; }
.pref-row__t { font-weight: 600; font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pref-row__d { font-size: var(--fs-cap); color: var(--ink-500); margin-top: 3px; max-width: 56ch; }
.pref-row__end { flex: none; padding-top: 2px; }
/* "always on" lock chip for non-optional (transactional) emails */
.pref-locked { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--signal-600); background: var(--signal-100); border-radius: var(--r-pill); padding: 4px 10px; white-space: nowrap; }
.pref-locked svg { width: 12px; height: 12px; }

/* unsubscribe / one-click confirmation card */
.pref-confirm { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-7) var(--sp-5); }
.pref-confirm .ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--sp-4); }
.pref-confirm .ic--ok { background: var(--signal-100); color: var(--signal-600); }
.pref-confirm .ic--amber { background: var(--amber-100); color: #8a5410; }
.pref-confirm .ic svg { width: 28px; height: 28px; }
.pref-confirm h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); }
.pref-confirm p { color: var(--ink-500); font-size: var(--fs-sm); margin: var(--sp-2) auto var(--sp-4); max-width: 46ch; }
.pref-confirm__note { display: flex; align-items: flex-start; gap: 10px; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4); margin-top: var(--sp-5); font-size: var(--fs-cap); color: var(--ink-500); }
.pref-confirm__note svg { width: 16px; height: 16px; color: var(--signal-600); flex: none; margin-top: 1px; }