/* ════════════════════════════════════════════════════════════════════════
   Stevie & Lulu — UI theme variations (v1.2.0, 2026-09-20)
   ════════════════════════════════════════════════════════════════════════
   Greg (2026-09-20): keep every UI style we try and be able to switch among
   them. This sheet holds the variations; the engine's inline CSS is written
   against tokens (--ink, --blue, --font-display …) declared on .sl-root, so a
   theme is mostly a token override plus a few structural rules.

   Themes:
     echo     — the current look, echoing the WordPress site. No attribute
                needed: the engine's own .sl-root tokens ARE this theme, and
                shared/brand.css stays the canonical palette for it.
     atelier  — warm ivory paper, ink-filled pill buttons, soft-shadowed
                rounded cards. Boutique / hotel-spa feel. Type tuned for
                Mustard (wide face, no italic) and compact on phones.
     atelier-loose — the first cut of atelier (Fraunces-era sizes, synthetic
                italics, roomier). Preserved for comparison.
     gallery  — ink nav bar, stark white, square corners, hairline grid,
                left-aligned hero. Architectural / gallery feel.

   How to switch (engine/stevie-lulu.html reads it):
     • URL:  booking.stevieandlulu.com/?theme=atelier   (persists in
       localStorage 'sl_theme' for that browser; ?theme=echo resets)
     • Default for everyone: SL_THEME_DEFAULT in the engine.
   Adding a theme: add a [data-sl-theme="name"] block here and the name to
   SL_THEMES in the engine. Never delete a theme — retire it in a comment.
   Rules that still apply in every theme: no paw prints (BRAND-NOTES.md).
   ──────────────────────────────────────────────────────────────────────── */

/* ── atelier-loose — the FIRST cut of Atelier (2026-09-20 am), preserved ──
   Designed before Mustard was rendering in the preview, so its hero sizes
   were tuned for Fraunces (a narrower face) and it used synthesized italics
   (Mustard has no italic). Kept switchable for comparison; `atelier` below
   is the Mustard-tuned, phone-compact successor. ─────────────────────────── */
.sl-root[data-sl-theme="atelier-loose"] {
  --ink: #1b1813;
  --white: #f8f4ec;            /* ivory paper — the page itself */
  --card: #ffffff;
  --blue: #cbe9ff;             /* brand sky blue kept for selected states */
  --blue-hover: #b9dbf5;
  --blue-soft: #f1ede4;        /* warm tint replaces the cool soft blue */
  --muted: #7d766b;
  --border: #e6dfd2;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(27,24,19,0.04), 0 10px 30px -18px rgba(27,24,19,0.25);
  background: var(--white);
}
.sl-root[data-sl-theme="atelier-loose"] .sl-nav { border-bottom: none; padding: 26px 40px; }
.sl-root[data-sl-theme="atelier-loose"] .sl-nav-cta { background: var(--ink); color: var(--white); }
.sl-root[data-sl-theme="atelier-loose"] .sl-nav-cta:hover { background: #33302a; }
.sl-root[data-sl-theme="atelier-loose"] .sl-hero { padding: 64px 40px 40px; }
.sl-root[data-sl-theme="atelier-loose"] .sl-eyebrow { color: var(--muted); }
.sl-root[data-sl-theme="atelier-loose"] .sl-hero-title { font-weight: 400; font-size: clamp(40px, 5.2vw, 64px); letter-spacing: -1.5px; }
.sl-root[data-sl-theme="atelier-loose"] .sl-hero-title em,
.sl-root[data-sl-theme="atelier-loose"] .sl-section-title em { font-style: italic; }
.sl-root[data-sl-theme="atelier-loose"] .sl-hero-sub { color: var(--muted); font-size: 15px; }
.sl-root[data-sl-theme="atelier-loose"] .sl-steps { border-bottom: none; }
.sl-root[data-sl-theme="atelier-loose"] .sl-step-num { background: transparent; border-color: var(--border); }
.sl-root[data-sl-theme="atelier-loose"] .sl-step.active .sl-step-num { background: var(--ink); border-color: var(--ink); }
.sl-root[data-sl-theme="atelier-loose"] .sl-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px 44px; max-width: 760px; }
.sl-root[data-sl-theme="atelier-loose"] .sl-welcome { border-left: none; border-radius: 10px; background: var(--blue-soft); }
.sl-root[data-sl-theme="atelier-loose"] .sl-input,
.sl-root[data-sl-theme="atelier-loose"] .sl-select { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #fff; }
.sl-root[data-sl-theme="atelier-loose"] .sl-input:focus,
.sl-root[data-sl-theme="atelier-loose"] .sl-select:focus { border-color: var(--ink); border-bottom-width: 1px; }
.sl-root[data-sl-theme="atelier-loose"] .sl-select { background-position: right 12px center; padding-right: 32px; }
.sl-root[data-sl-theme="atelier-loose"] .sl-dog-card,
.sl-root[data-sl-theme="atelier-loose"] .sl-service,
.sl-root[data-sl-theme="atelier-loose"] .sl-day-card,
.sl-root[data-sl-theme="atelier-loose"] .sl-slot,
.sl-root[data-sl-theme="atelier-loose"] .sl-toggle,
.sl-root[data-sl-theme="atelier-loose"] .sl-selected-slot,
.sl-root[data-sl-theme="atelier-loose"] .sl-coat-note,
.sl-root[data-sl-theme="atelier-loose"] .sl-offer-success { border-radius: 10px; }
.sl-root[data-sl-theme="atelier-loose"] .sl-add-dog { border-radius: 10px; border-color: var(--border); }
.sl-root[data-sl-theme="atelier-loose"] .sl-coat-note { background: var(--blue-soft); border-left-color: var(--ink); }
.sl-root[data-sl-theme="atelier-loose"] .sl-selection { border: none; background: var(--blue-soft); border-radius: 10px; }
/* Buttons: ink pills with paper type — the brand's clip-path notch is an
   "echo" signature, so it is switched off here. */
.sl-root[data-sl-theme="atelier-loose"] .sl-btn-primary .sl-btn-label { clip-path: none; background: var(--ink); color: var(--white); border-radius: 999px; padding: 18px 44px; }
.sl-root[data-sl-theme="atelier-loose"] .sl-btn-primary:hover:not(.sl-btn-disabled) .sl-btn-label { background: #33302a; }
.sl-root[data-sl-theme="atelier-loose"] .sl-btn-ghost .sl-btn-label,
.sl-root[data-sl-theme="atelier-loose"] .sl-hero-cta-ghost { border-radius: 999px; border-color: var(--border); }
.sl-root[data-sl-theme="atelier-loose"] .sl-slot-selected { background: var(--ink); border-color: var(--ink); color: var(--white); }
.sl-root[data-sl-theme="atelier-loose"] .sl-slot-booked { background: #e9e3d8; border-color: #e9e3d8; color: var(--muted); }

/* ── gallery ───────────────────────────────────────────────────────────── */
.sl-root[data-sl-theme="gallery"] {
  --ink: #0a0a0a;
  --white: #ffffff;
  --blue: #cbe9ff;
  --blue-hover: #b9dbf5;
  --blue-soft: #f3f9ff;
  --muted: #6f6f6f;
  --border: #d9d9d9;
}
.sl-root[data-sl-theme="gallery"] .sl-nav { background: var(--ink); border-bottom: none; padding: 18px 40px; }
.sl-root[data-sl-theme="gallery"] .sl-nav-link { color: var(--white); font-size: 12px; letter-spacing: 2.5px; }
.sl-root[data-sl-theme="gallery"] .sl-nav-link.active { text-decoration-color: var(--blue); text-decoration-thickness: 2px; }
.sl-root[data-sl-theme="gallery"] .sl-nav-logo-img { filter: invert(1); }
.sl-root[data-sl-theme="gallery"] .sl-nav-logo { color: var(--white); }
.sl-root[data-sl-theme="gallery"] .sl-nav-cta { border-radius: 0; background: var(--blue); }
.sl-root[data-sl-theme="gallery"] .sl-hero { text-align: left; max-width: 960px; margin: 0 auto; padding: 72px 40px 24px; border-bottom: 1px solid var(--ink); }
.sl-root[data-sl-theme="gallery"] .sl-eyebrow { margin-bottom: 20px; }
.sl-root[data-sl-theme="gallery"] .sl-eyebrow::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--ink); vertical-align: middle; margin-right: 12px; }
.sl-root[data-sl-theme="gallery"] .sl-hero-title { font-size: clamp(44px, 6vw, 76px); letter-spacing: -3px; line-height: 0.98; }
.sl-root[data-sl-theme="gallery"] .sl-hero-sub { margin: 24px 0 0; max-width: 520px; }
.sl-root[data-sl-theme="gallery"] .sl-hero-ctas { text-align: left; }
.sl-root[data-sl-theme="gallery"] .sl-steps { justify-content: flex-start; gap: 0; border-bottom: 1px solid var(--ink); padding-bottom: 0; margin-bottom: 40px; }
.sl-root[data-sl-theme="gallery"] .sl-step { flex-direction: row; gap: 10px; padding: 14px 24px 14px 0; margin-right: 24px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sl-root[data-sl-theme="gallery"] .sl-step.active { border-bottom-color: var(--ink); }
.sl-root[data-sl-theme="gallery"] .sl-step-num { width: 22px; height: 22px; font-size: 12px; font-family: var(--font-body); font-weight: 600; border-radius: 0; }
.sl-root[data-sl-theme="gallery"] .sl-section-eyebrow,
.sl-root[data-sl-theme="gallery"] .sl-section-title,
.sl-root[data-sl-theme="gallery"] .sl-section-sub { text-align: left; margin-left: 0; }
.sl-root[data-sl-theme="gallery"] .sl-card { max-width: none; }
.sl-root[data-sl-theme="gallery"] .sl-welcome { border-left-width: 4px; border-left-color: var(--ink); background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sl-root[data-sl-theme="gallery"] .sl-divider { border-bottom-color: var(--ink); }
.sl-root[data-sl-theme="gallery"] .sl-dog-card { border-color: var(--ink); margin-bottom: -1px; }
.sl-root[data-sl-theme="gallery"] .sl-dog-card:hover { border-color: var(--ink); background: var(--blue-soft); }
.sl-root[data-sl-theme="gallery"] .sl-add-dog { border: 1px solid var(--ink); border-style: solid; margin-top: 12px; }
.sl-root[data-sl-theme="gallery"] .sl-service,
.sl-root[data-sl-theme="gallery"] .sl-day-card,
.sl-root[data-sl-theme="gallery"] .sl-slot { border-color: var(--ink); }
.sl-root[data-sl-theme="gallery"] .sl-slot:hover:not(.sl-slot-unavail):not(.sl-slot-booked):not(.sl-slot-selected) { background: var(--blue-soft); }
.sl-root[data-sl-theme="gallery"] .sl-slot-unavail { border-color: var(--border); }
.sl-root[data-sl-theme="gallery"] .sl-toggle,
.sl-root[data-sl-theme="gallery"] .sl-selected-slot,
.sl-root[data-sl-theme="gallery"] .sl-coat-note { border-radius: 0; background: var(--white); border: 1px solid var(--ink); }
.sl-root[data-sl-theme="gallery"] .sl-coat-note { border-left-width: 4px; }
.sl-root[data-sl-theme="gallery"] .sl-selection { border-color: var(--ink); text-align: left; }
.sl-root[data-sl-theme="gallery"] .sl-btn-row { justify-content: flex-start; }
.sl-root[data-sl-theme="gallery"] .sl-btn-primary .sl-btn-label { clip-path: none; background: var(--ink); color: var(--white); border-radius: 0; padding: 18px 44px; }
.sl-root[data-sl-theme="gallery"] .sl-btn-primary:hover:not(.sl-btn-disabled) .sl-btn-label { background: var(--blue); color: var(--ink); }
.sl-root[data-sl-theme="gallery"] .sl-btn-ghost .sl-btn-label,
.sl-root[data-sl-theme="gallery"] .sl-hero-cta-ghost { border-radius: 0; }

/* ── atelier (Mustard-tuned, phone-compact) — 2026-09-20 pm ───────────────
   Same palette and shapes as atelier-loose. Differences:
   • Mustard is ~15% wider than Fraunces and has no italic, so heading sizes
     come down a step and <em> is rendered as weight/colour, never a slant.
   • Everything under 720px is tightened: hero, steps, card and inner-card
     padding, slot grid, and a two-up button row — the phone page runs ~25%
     shorter than atelier-loose and about level with echo. ────────────────── */
.sl-root[data-sl-theme="atelier"] {
  --ink: #1b1813;
  --white: #f8f4ec;
  --card: #ffffff;
  --blue: #cbe9ff;
  --blue-hover: #b9dbf5;
  --blue-soft: #f1ede4;
  --muted: #7d766b;
  --border: #e6dfd2;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(27,24,19,0.04), 0 10px 30px -18px rgba(27,24,19,0.25);
  background: var(--white);
}
.sl-root[data-sl-theme="atelier"] .sl-nav { border-bottom: none; padding: 22px 40px; }
.sl-root[data-sl-theme="atelier"] .sl-nav-cta { background: var(--ink); color: var(--white); }
.sl-root[data-sl-theme="atelier"] .sl-nav-cta:hover { background: #33302a; }
.sl-root[data-sl-theme="atelier"] .sl-hero { padding: 48px 40px 28px; }
.sl-root[data-sl-theme="atelier"] .sl-eyebrow { color: var(--muted); margin-bottom: 20px; }
/* Mustard: keep the WP site's weight (500) but a step smaller than echo,
   and tracking closer to 0 — Mustard's counters are already open. */
.sl-root[data-sl-theme="atelier"] .sl-hero-title { font-weight: 500; font-size: clamp(32px, 4vw, 50px); letter-spacing: -1px; line-height: 1.02; }
.sl-root[data-sl-theme="atelier"] .sl-section-title { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.5px; }
/* No italic in Mustard — an <em> becomes the muted tone instead of a slant. */
.sl-root[data-sl-theme="atelier"] .sl-hero-title em,
.sl-root[data-sl-theme="atelier"] .sl-section-title em { font-style: normal; color: var(--muted); }
.sl-root[data-sl-theme="atelier"] .sl-hero-sub { color: var(--muted); font-size: 14px; margin-top: 18px; }
.sl-root[data-sl-theme="atelier"] .sl-steps { border-bottom: none; margin-bottom: 32px; padding-bottom: 16px; }
.sl-root[data-sl-theme="atelier"] .sl-step-num { background: transparent; border-color: var(--border); font-family: var(--font-body); font-weight: 600; font-size: 13px; }
.sl-root[data-sl-theme="atelier"] .sl-step.active .sl-step-num { background: var(--ink); border-color: var(--ink); }
.sl-root[data-sl-theme="atelier"] .sl-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 40px; max-width: 760px; }
.sl-root[data-sl-theme="atelier"] .sl-section-sub { margin: 12px auto 28px; }
.sl-root[data-sl-theme="atelier"] .sl-welcome { border-left: none; border-radius: 10px; background: var(--blue-soft); padding: 14px 18px; }
.sl-root[data-sl-theme="atelier"] .sl-input,
.sl-root[data-sl-theme="atelier"] .sl-select { border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; background: #fff; }
.sl-root[data-sl-theme="atelier"] .sl-input:focus,
.sl-root[data-sl-theme="atelier"] .sl-select:focus { border-color: var(--ink); border-bottom-width: 1px; }
.sl-root[data-sl-theme="atelier"] .sl-select { background-position: right 12px center; padding-right: 32px; }
.sl-root[data-sl-theme="atelier"] .sl-divider { margin: 28px 0 16px; }
.sl-root[data-sl-theme="atelier"] .sl-dog-card,
.sl-root[data-sl-theme="atelier"] .sl-service,
.sl-root[data-sl-theme="atelier"] .sl-day-card,
.sl-root[data-sl-theme="atelier"] .sl-slot,
.sl-root[data-sl-theme="atelier"] .sl-toggle,
.sl-root[data-sl-theme="atelier"] .sl-selected-slot,
.sl-root[data-sl-theme="atelier"] .sl-coat-note,
.sl-root[data-sl-theme="atelier"] .sl-offer-success { border-radius: 10px; }
.sl-root[data-sl-theme="atelier"] .sl-dog-card { padding: 18px 20px 16px; }
.sl-root[data-sl-theme="atelier"] .sl-add-dog { border-radius: 10px; border-color: var(--border); padding: 12px; }
.sl-root[data-sl-theme="atelier"] .sl-service-name { font-size: 17px; letter-spacing: -0.2px; }
.sl-root[data-sl-theme="atelier"] .sl-coat-note { background: var(--blue-soft); border-left-color: var(--ink); }
.sl-root[data-sl-theme="atelier"] .sl-selection { border: none; background: var(--blue-soft); border-radius: 10px; margin-bottom: 20px; }
.sl-root[data-sl-theme="atelier"] .sl-week-label { font-size: 20px; letter-spacing: -0.3px; }
.sl-root[data-sl-theme="atelier"] .sl-btn-row { margin-top: 28px; }
.sl-root[data-sl-theme="atelier"] .sl-btn-primary .sl-btn-label { clip-path: none; background: var(--ink); color: var(--white); border-radius: 999px; padding: 16px 40px; }
.sl-root[data-sl-theme="atelier"] .sl-btn-primary:hover:not(.sl-btn-disabled) .sl-btn-label { background: #33302a; }
.sl-root[data-sl-theme="atelier"] .sl-btn-ghost .sl-btn-label { padding: 15px 38px; }
.sl-root[data-sl-theme="atelier"] .sl-btn-ghost .sl-btn-label,
.sl-root[data-sl-theme="atelier"] .sl-hero-cta-ghost { border-radius: 999px; border-color: var(--border); }
.sl-root[data-sl-theme="atelier"] .sl-slot-selected { background: var(--ink); border-color: var(--ink); color: var(--white); }
.sl-root[data-sl-theme="atelier"] .sl-slot-booked { background: #e9e3d8; border-color: #e9e3d8; color: var(--muted); }

/* Phone: the density pass. */
@media (max-width: 720px) {
  .sl-root[data-sl-theme="atelier"] .sl-nav { padding: 14px 16px; }
  .sl-root[data-sl-theme="atelier"] .sl-hero { padding: 20px 16px 8px; text-align: left; }
  .sl-root[data-sl-theme="atelier"] .sl-eyebrow { font-size: 10px; letter-spacing: 2.5px; margin-bottom: 10px; }
  .sl-root[data-sl-theme="atelier"] .sl-hero-title { font-size: 30px; }
  .sl-root[data-sl-theme="atelier"] .sl-hero-sub { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
  .sl-root[data-sl-theme="atelier"] .sl-container { padding: 12px 12px 48px; }
  /* Steps become one compact inline row with the labels only on the active step. */
  .sl-root[data-sl-theme="atelier"] .sl-steps { justify-content: flex-start; gap: 6px; margin: 0 4px 12px; padding-bottom: 0; }
  .sl-root[data-sl-theme="atelier"] .sl-step { flex-direction: row; gap: 8px; opacity: 1; }
  .sl-root[data-sl-theme="atelier"] .sl-step-num { width: 24px; height: 24px; font-size: 11px; }
  .sl-root[data-sl-theme="atelier"] .sl-step:not(.active) .sl-step-label { display: none; }
  .sl-root[data-sl-theme="atelier"] .sl-step:not(.active) .sl-step-num { opacity: 0.45; }
  .sl-root[data-sl-theme="atelier"] .sl-step.active::after { content: ''; flex: 0 0 8px; }
  .sl-root[data-sl-theme="atelier"] .sl-card { padding: 20px 16px 24px; border-radius: 12px; }
  .sl-root[data-sl-theme="atelier"] .sl-section-eyebrow { display: none; }
  .sl-root[data-sl-theme="atelier"] .sl-section-title { text-align: left; font-size: 22px; }
  .sl-root[data-sl-theme="atelier"] .sl-section-sub { text-align: left; margin: 6px 0 16px; font-size: 13px; }
  .sl-root[data-sl-theme="atelier"] .sl-welcome { padding: 12px 14px; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
  .sl-root[data-sl-theme="atelier"] .sl-welcome-text { font-size: 13px; }
  .sl-root[data-sl-theme="atelier"] .sl-divider { margin: 20px 0 10px; padding-bottom: 8px; }
  .sl-root[data-sl-theme="atelier"] .sl-dog-card { padding: 14px 14px 12px; margin-bottom: 8px; }
  .sl-root[data-sl-theme="atelier"] .sl-dog-card-head { margin-bottom: 10px; }
  .sl-root[data-sl-theme="atelier"] .sl-form-grid { gap: 12px; }
  .sl-root[data-sl-theme="atelier"] .sl-field { gap: 6px; }
  .sl-root[data-sl-theme="atelier"] .sl-input,
  .sl-root[data-sl-theme="atelier"] .sl-select { padding: 10px 12px; font-size: 15px; }
  .sl-root[data-sl-theme="atelier"] .sl-add-dog { padding: 11px; margin-top: 4px; }
  .sl-root[data-sl-theme="atelier"] .sl-service { padding: 12px 14px; }
  .sl-root[data-sl-theme="atelier"] .sl-service-name { font-size: 16px; }
  .sl-root[data-sl-theme="atelier"] .sl-toggle { padding: 12px 14px; margin-top: 8px; }
  .sl-root[data-sl-theme="atelier"] .sl-coat-note { padding: 10px 12px; margin: 6px 0 10px; font-size: 12.5px; }
  .sl-root[data-sl-theme="atelier"] .sl-selection { padding: 10px 14px; margin-bottom: 12px; text-align: left; }
  /* Time slots: day label on its own line, then a 3-up grid of slots. */
  .sl-root[data-sl-theme="atelier"] .sl-week-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .sl-root[data-sl-theme="atelier"] .sl-week-label { grid-column: 1 / -1; margin: 6px 0 0; font-size: 18px; }
  .sl-root[data-sl-theme="atelier"] .sl-slot { padding: 11px 4px; }
  /* Two-up button row instead of stacked pills. */
  .sl-root[data-sl-theme="atelier"] .sl-btn-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 20px; }
  .sl-root[data-sl-theme="atelier"] .sl-btn { width: 100%; }
  .sl-root[data-sl-theme="atelier"] .sl-btn-label { display: block; width: 100%; padding: 14px 12px !important; text-align: center; }
  .sl-root[data-sl-theme="atelier"] .sl-manage-link-row { margin-top: 16px; }
}