/* ───────────────────────────────────────────────────────────────
   Lead-capture flow (Diagnose / Let's talk panel).
   Shared by index.html and privacy.html — extracted from index.html.
   Relies on each page's :root design tokens (--color-*, --font-*, --sp-*).
   ─────────────────────────────────────────────────────────────── */

    /* ════════════════════════════════════════════════════════════
       DIAGNOSE — Lead-capture panel (4-step + booking confirmation)
       Desktop: slides in from the right.  Mobile: bottom sheet.
       ════════════════════════════════════════════════════════════ */
    :root {
      --diag-green-surface: #e5f8eb;
      --diag-green-border:  rgba(36, 195, 85, 0.25);
      --diag-green-dot:     #24c355;
      --diag-text-tertiary: #a1a1a1;   /* neutrals/500  — dark-card body  */
      --diag-text-invert-2: #e5e5e5;   /* secondary-invert — dark-card title */
      --diag-ease:          cubic-bezier(0.32, 0.72, 0, 1); /* premium sheet easing */
    }

    /* ── Overlay / backdrop ─────────────────────────────────────── */
    .diag-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      justify-content: flex-end;     /* desktop: panel hugs the right */
      align-items: stretch;
      background: rgba(23, 23, 23, 0.4);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.45s ease, visibility 0s linear 0.55s;
    }
    .diag-overlay.is-open {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.45s ease, visibility 0s;
    }

    /* ── Panel shell ────────────────────────────────────────────── */
    .diag-panel {
      --diag-px: 24px;
      position: relative;
      display: flex;
      flex-direction: column;
      width: min(610px, 100%);
      height: 100%;
      background: var(--color-surface-primary);
      border-top-left-radius: 16px;
      overflow: hidden;
      transform: translateX(100%);
      transition: transform 0.55s var(--diag-ease);
      will-change: transform;
    }
    .diag-overlay.is-open .diag-panel { transform: translateX(0); }

    /* ── Header (fixed top) ─────────────────────────────────────── */
    .diag-header {
      flex: 0 0 auto;
      padding: var(--sp-250) var(--diag-px);
      background: var(--color-surface-primary);
      border-bottom: 1px solid var(--color-border-tertiary);
      z-index: 3;
    }
    /* Relative track: back pinned left, close pinned right, id group
       absolutely positioned so it can slide left ↔ centre. */
    .diag-header-inner { position: relative; height: 32px; }
    .diag-iconbtn {
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      background: var(--color-surface-secondary);
      border: 1px solid var(--color-border-tertiary);
      border-radius: 8px;
      color: var(--color-text-primary);
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .diag-iconbtn:hover { background: var(--color-surface-tertiary); }
    .diag-iconbtn svg { width: 19px; height: 19px; display: block; }
    .diag-close { position: absolute; top: 0; right: 0; }
    /* Back button — slides + fades in on steps 2-4 */
    .diag-back {
      position: absolute; top: 0; left: 0;
      opacity: 0;
      transform: translateX(-6px);
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.55s var(--diag-ease);
    }
    .diag-panel[data-back="true"] .diag-back {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
    /* Identity group (avatar/check + title) — left by default, centred on 2-4 */
    .diag-id {
      position: absolute; top: 0; left: 0;
      display: flex; align-items: center; gap: var(--sp-200);
      max-width: 100%;
      transition: left 0.55s var(--diag-ease), transform 0.55s var(--diag-ease);
    }
    .diag-panel[data-header="center"] .diag-id {
      left: 50%;
      transform: translateX(-50%);
    }
    .diag-badge { position: relative; flex: 0 0 auto; width: 32px; height: 32px; }
    .diag-avatar {
      position: absolute; inset: 0;
      width: 32px; height: 32px;
      border-radius: 8px;
      object-fit: cover;
      display: block;
      transition: opacity 0.3s ease;
    }
    /* Header check badge — crossfades in on the confirmation screen */
    .diag-check-badge {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--color-surface-invert);
      border-radius: 8px;
      color: #fff;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .diag-check-badge svg { width: 18px; height: 18px; display: block; }
    .diag-panel[data-screen="confirm"] .diag-avatar     { opacity: 0; }
    .diag-panel[data-screen="confirm"] .diag-check-badge { opacity: 1; }
    .diag-title {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 20px;
      line-height: 28px;
      color: var(--color-text-primary);
      white-space: nowrap;
    }

    /* ── Scroll region (body) ───────────────────────────────────── */
    .diag-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 var(--diag-px);
      background: var(--color-surface-primary);
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    .diag-col {
      width: 100%;
      max-width: 562px;
      margin: 0 auto;
      min-height: 100%;
      border-left: 1px solid var(--color-border-tertiary);
      border-right: 1px solid var(--color-border-tertiary);
    }

    /* ── Progress bar ───────────────────────────────────────────── */
    .diag-progress {
      height: 4px;
      width: 100%;
      background: var(--color-border-tertiary);
      overflow: hidden;
    }
    .diag-progress-fill {
      height: 100%;
      width: 0;
      background: var(--color-surface-invert);
      transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .diag-panel[data-screen="confirm"] .diag-progress { display: none; }

    /* ── Step container + enter animation ───────────────────────── */
    .diag-content { padding: var(--sp-500) var(--diag-px); }
    .diag-step { display: none; }
    .diag-step:focus { outline: none; }
    /* Honeypot — off-screen (not display:none, so bots still see/fill it),
       removed from tab + a11y trees. A filled value flags a bot server-side. */
    .diag-hp {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
    /* Neutral focus ring — replaces the UA default on interactive controls */
    .diag-pill:focus-visible,
    .diag-concern:focus-visible,
    .diag-btn:focus-visible,
    .diag-iconbtn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--color-surface-primary), 0 0 0 4px var(--color-text-primary);
    }
    .diag-step.is-active { display: flex; flex-direction: column; gap: var(--sp-500); }
    .diag-step.is-active.is-entering {
      animation: diag-step-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes diag-step-in {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Step heading block ─────────────────────────────────────── */
    .diag-head-block { display: flex; flex-direction: column; gap: var(--sp-150); }
    .diag-h {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 36px;
      line-height: 44px;
      letter-spacing: -0.01em;
      color: var(--color-text-primary);
    }
    .diag-sub {
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      color: var(--color-text-secondary);
    }
    .diag-eyebrow {
      font-family: var(--font-heading);
      font-weight: 500;
      font-size: 14px;
      line-height: 24px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-text-secondary);
    }

    /* ── Text inputs (step 1) ───────────────────────────────────── */
    .diag-fields { display: flex; flex-direction: column; gap: var(--sp-150); }
    /* The 2px wrapper IS the focus/error ring (fills on focus-within / error) */
    .diag-field {
      padding: 2px;
      border-radius: 10px;
      background: transparent;
      transition: background 0.15s ease;
    }
    .diag-input {
      width: 100%;
      height: 48px;
      padding: 12px;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: var(--color-text-primary);
      background: var(--color-surface-secondary);
      border: 1px solid var(--color-border-secondary);   /* default #ebebeb */
      border-radius: 8px;
      transition: border-color 0.15s ease;
    }
    /* Default placeholder is dark (#171717) per the component spec */
    .diag-input::placeholder { color: var(--color-text-primary); opacity: 1; }
    /* Hover — border darkens, placeholder lightens to #4d4d4d */
    .diag-input:hover { border-color: #c9c9c9; }
    .diag-input:hover::placeholder { color: var(--color-text-secondary); }
    /* Focus / active — #d6d6d6 gutter ring + #171717 (border-primary) border */
    .diag-field:focus-within { background: #d6d6d6; }
    .diag-input:focus {
      outline: none;
      border-color: var(--color-text-primary);
    }
    .diag-input:focus::placeholder { color: var(--color-text-primary); }
    /* Error — red gutter tint + red border, with message below */
    .diag-field.is-error { background: rgba(203, 42, 47, 0.12); }
    .diag-field.is-error .diag-input { border-color: #cb2a2f; }
    .diag-field-group { display: flex; flex-direction: column; gap: 6px; }
    .diag-field-error {
      display: none;
      padding: 0 12px;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: #cb2a2f;
    }
    .diag-field.is-error + .diag-field-error { display: block; }

    /* ── Select pill groups (steps 2 & 4 times) ─────────────────── */
    .diag-groups { display: flex; flex-direction: column; gap: var(--sp-300, 24px); }
    .diag-group  { display: flex; flex-direction: column; gap: var(--sp-150); }
    .diag-pillgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .diag-pillgrid--full > .diag-pill:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .diag-pill {
      width: 100%;
      height: 48px;
      padding: 12px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      text-align: center;
      color: var(--color-text-primary);
      background: var(--color-surface-secondary);
      border: 1px solid var(--color-border-secondary);
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.1s ease;
    }
    .diag-pill:hover { border-color: var(--color-border-tertiary); background: var(--color-surface-tertiary); }
    .diag-pill:active { transform: scale(0.985); }
    .diag-pill.is-selected {
      background: var(--color-surface-invert);
      border-color: var(--color-surface-invert);
      color: var(--color-text-invert);
    }
    .diag-pill.is-selected:hover { background: #2e2e2e; }

    /* ── Concern rows (step 3) ──────────────────────────────────── */
    .diag-concerns { display: flex; flex-direction: column; gap: 8px; }
    .diag-concern {
      display: flex; align-items: center; gap: 10px;
      width: 100%;
      padding: 8px;
      text-align: left;
      background: var(--color-surface-secondary);
      border: 1px solid var(--color-border-secondary);
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease;
    }
    /* Hover: keep the white surface, only darken the border to #8d8d8d
       (the f2f2f2 fill belongs to the selected/active state, not hover). */
    .diag-concern:hover { border-color: #8d8d8d; }
    .diag-concern-ico {
      flex: 0 0 auto;
      width: 48px; height: 48px;
      display: flex; align-items: center; justify-content: center;
      background: var(--color-surface-tertiary);
      border-radius: 4px;
      color: var(--color-text-primary);
      transition: background 0.18s ease, color 0.18s ease;
    }
    .diag-concern-ico svg { width: 20px; height: 20px; display: block; }
    .diag-concern-tx { display: flex; flex-direction: column; min-width: 0; }
    .diag-concern-tt {
      font-family: var(--font-body); font-weight: 500;
      font-size: 16px; line-height: 24px; color: var(--color-text-primary);
    }
    .diag-concern-ds {
      font-family: var(--font-body); font-weight: 400;
      font-size: 14px; line-height: 20px; color: var(--color-text-secondary);
    }
    .diag-concern.is-selected {
      background: var(--color-surface-tertiary);
      border-color: var(--color-border-primary, #171717);
    }
    .diag-concern.is-selected .diag-concern-ico {
      background: var(--color-surface-invert);
      color: var(--color-text-invert);
    }

    /* ── Step 4 — Cal banner / embed / timezone ─────────────────── */
    .diag-banner {
      display: flex; align-items: center; gap: var(--sp-250);
      padding: 12px 24px;
      background: var(--diag-green-surface);
      border: 1px solid var(--diag-green-border);
      border-radius: 8px;
    }
    .diag-banner-dot {
      position: relative;
      flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
      background: var(--diag-green-dot);
    }
    /* Same expanding "ping" ring as the site's availability dot */
    .diag-banner-dot::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: var(--diag-green-dot);
      animation: status-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
    .diag-banner-tx { font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-text-primary); }
    .diag-banner-tx strong { font-weight: 500; }
    .diag-banner-tx span { display: block; font-weight: 400; }
    .diag-calbox {
      padding: 2px; border-radius: 10px;
    }
    .diag-calbox-inner {
      min-height: 355px;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 2px;
      padding: 12px;
      text-align: center;
      background: var(--color-surface-secondary);
      border: 1px solid var(--color-border-secondary);
      border-radius: 8px;
    }
    .diag-calbox-inner .t1 { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--color-text-primary); }
    .diag-calbox-inner .t2 { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
    .diag-tz { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }

    /* ── Step 4 — month date picker ─────────────────────────────── */
    .diag-calbox-inner.diag-cal {
      justify-content: flex-start;
      align-items: stretch;
      text-align: left;
      gap: 14px;
      padding: 16px;
    }
    .diag-cal-loading, .diag-cal-error, .diag-times-hint {
      font-family: var(--font-body); font-weight: 400;
      font-size: 14px; line-height: 20px; color: var(--color-text-secondary);
    }
    .diag-cal-error { color: #cb2a2f; }
    .diag-cal-head { display: flex; align-items: center; justify-content: space-between; }
    .diag-cal-month {
      font-family: var(--font-heading); font-weight: 500;
      font-size: 16px; line-height: 24px; color: var(--color-text-primary);
    }
    .diag-cal-nav { display: flex; gap: 8px; }
    .diag-cal-navbtn {
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      background: var(--color-surface-secondary);
      border: 1px solid var(--color-border-tertiary);
      border-radius: 8px; color: var(--color-text-primary); cursor: pointer;
      transition: background 0.15s ease, opacity 0.15s ease;
    }
    .diag-cal-navbtn:hover:not(:disabled) { background: var(--color-surface-tertiary); }
    .diag-cal-navbtn:disabled { opacity: 0.3; cursor: default; }
    .diag-cal-navbtn svg { width: 16px; height: 16px; display: block; }
    .diag-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .diag-cal-wd {
      text-align: center; font-family: var(--font-body);
      font-size: 12px; line-height: 20px; color: var(--color-text-secondary);
    }
    .diag-cal-day {
      aspect-ratio: 1 / 1;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-body); font-size: 14px;
      color: var(--color-text-primary);
      background: transparent;
      border: 1px solid transparent; border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .diag-cal-day.is-empty { visibility: hidden; cursor: default; }
    .diag-cal-day.is-disabled { color: #cdcdcd; cursor: default; }
    .diag-cal-day.is-available:hover { border-color: #8d8d8d; }
    .diag-cal-day.is-selected {
      background: var(--color-surface-invert);
      border-color: var(--color-surface-invert);
      color: var(--color-text-invert);
    }
    #diagDayLabel:not(:empty)::before { content: " — "; }
    .diag-booking-error {
      display: none;
      margin-bottom: 12px;
      font-family: var(--font-body); font-weight: 400;
      font-size: 14px; line-height: 20px; color: #cb2a2f; text-align: center;
    }
    .diag-booking-error.is-shown { display: block; }

    /* ── Confirmation screen ────────────────────────────────────── */
    .diag-confirm.is-active { display: flex; flex-direction: column; gap: var(--sp-500); }
    .diag-confirm-photo {
      width: 120px; height: 120px; border-radius: 16px;
      object-fit: cover; display: block;
    }
    .diag-confirm-head { display: flex; flex-direction: column; gap: var(--sp-150); }
    /* stacked info card */
    .diag-infocard { display: flex; flex-direction: column; }
    .diag-inforow {
      display: flex; align-items: center; gap: 12px;
      padding: 12px;
      background: var(--color-surface-secondary);
      border: 1px solid var(--color-border-secondary);
      border-top-width: 0;
    }
    .diag-inforow:first-child { border-top-width: 1px; border-radius: 8px 8px 0 0; }
    .diag-inforow:last-child  { border-radius: 0 0 8px 8px; }
    .diag-inforow-ico {
      flex: 0 0 auto; width: 48px; height: 48px;
      display: flex; align-items: center; justify-content: center;
      background: var(--color-surface-tertiary);
      border-radius: 8px;
      color: var(--color-text-primary);
    }
    .diag-inforow-ico svg { width: 20px; height: 20px; display: block; }
    .diag-inforow-tx { display: flex; flex-direction: column; min-width: 0; }
    .diag-inforow-lb { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); }
    .diag-inforow-vl { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--color-text-primary); }
    /* dark "what happens next" card */
    .diag-darkcard { display: flex; flex-direction: column; }
    .diag-darkrow {
      padding: 20px 24px;
      background: var(--color-surface-invert);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-top-width: 0;
    }
    .diag-darkrow:first-child { border-top-width: 1px; border-radius: 8px 8px 0 0; }
    .diag-darkrow:last-child  { border-radius: 0 0 8px 8px; }
    .diag-darkrow--head { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--color-text-invert); }
    .diag-darkrow-tt { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 24px; color: var(--diag-text-invert-2); margin-bottom: 8px; }
    .diag-darkrow-ds { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--diag-text-tertiary); }

    /* ── Footer (fixed bottom) ──────────────────────────────────── */
    .diag-footer {
      flex: 0 0 auto;
      padding: 0 var(--diag-px);
      background: var(--color-surface-primary);
    }
    .diag-foot-col {
      max-width: 562px; margin: 0 auto;
      padding: var(--sp-250) var(--diag-px);
      border-top: 1px solid var(--color-border-tertiary);
      border-left: 1px solid var(--color-border-tertiary);
      border-right: 1px solid var(--color-border-tertiary);
    }
    /* primary action button — shares the site's text-reveal pattern */
    .diag-btn {
      position: relative;
      width: 100%;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: var(--color-surface-invert);
      cursor: pointer;
      transition: background 0.3s ease, opacity 0.3s ease;
    }
    .diag-btn .btn-label-wrap { height: 24px; overflow: hidden; display: flex; }
    .diag-btn .btn-label-stack {
      display: flex; flex-direction: column;
      transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    }
    .diag-btn .btn-label-stack span {
      font-family: var(--font-heading); font-weight: 500;
      font-size: 20px; line-height: 24px; white-space: nowrap;
      color: var(--color-text-invert);
    }
    .diag-btn:hover { background: #2e2e2e; }
    .diag-btn:hover .btn-label-stack { transform: translateY(-24px); }
    /* secondary (Add to calendar) variant */
    .diag-btn--ghost {
      background: var(--color-surface-secondary);
      border-color: var(--color-border-tertiary);
    }
    .diag-btn--ghost:hover { background: var(--color-surface-tertiary); }
    .diag-btn--ghost .btn-label-stack span { color: var(--color-text-primary); }
    /* disabled state — matches the 20% opacity in the design */
    .diag-btn.is-disabled { opacity: 0.2; pointer-events: none; }
    .diag-btn.is-disabled:hover { background: var(--color-surface-invert); }

    /* ── Mobile — bottom sheet ──────────────────────────────────── */
    @media (max-width: 767px) {
      .diag-overlay { justify-content: stretch; align-items: flex-end; }
      .diag-panel {
        --diag-px: 16px;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 10px);    /* fallback: old Android Chrome / WebViews lack dvh */
        max-height: calc(100dvh - 10px);   /* modern: tracks the dynamic viewport (URL bar / keyboard) */
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        transform: translateY(100%);
        transition: transform 0.55s var(--diag-ease), height 0.45s var(--diag-ease);
      }
      .diag-overlay.is-open .diag-panel { transform: translateY(0); }
      .diag-header { padding: var(--sp-200) var(--diag-px); }
      .diag-id { gap: var(--sp-150); }
      .diag-title { font-size: 16px; line-height: 24px; }
      .diag-content { padding: var(--sp-300, 24px) var(--diag-px); }
      .diag-step.is-active { gap: var(--sp-300, 24px); }
      .diag-head-block { gap: var(--sp-100); }
      .diag-h { font-size: 28px; line-height: 36px; }
      .diag-sub { font-size: 14px; }
      .diag-fields { gap: var(--sp-100); }
      .diag-field { padding: 0; }
      .diag-foot-col { padding: var(--sp-200) var(--diag-px); }
      .diag-btn { padding: 12px; }
      .diag-btn .btn-label-stack span { font-size: 16px; }
      .diag-calbox-inner { min-height: 300px; }
    }

    /* ── Reduced motion ─────────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      .diag-panel { transition: opacity 0.2s ease; transform: none; opacity: 0; }
      .diag-overlay.is-open .diag-panel { opacity: 1; transform: none; }
      .diag-progress-fill { transition: none; }
      .diag-step.is-active.is-entering { animation: none; }
      .diag-btn .btn-label-stack { transition: none; }
      .diag-btn:hover .btn-label-stack { transform: none; }
      .diag-banner-dot::before { animation: none; }
    }