/* kit v1.9.0 — generated by sync-kit; edit kit/ and re-sync */
/* kit/ui/modal — overlay dialog on a <details> shell, with the WhatsApp composer as its
 * first-class use.
 *
 * NEW WORK (kit 1.4.0), not an extraction — kit.json's `planned` block records why: the
 * theme's details-modal.js is the <details> open/close shell only, its focus trap lives in
 * Dawn's global.js, and it assumes markup without null-checking it. The PATTERN — a summary
 * as the trigger, so the disclosure works with no script — is what was worth keeping, and
 * both proven page modals (XERF's price table and assessment panel) informed the styling.
 *
 * WHEN A PAGE USES THIS (operator rule, 2026-08-23): every LP ships at least one — the
 * WhatsApp message composer (the recipe in docs/modal.md, proven on XERF). Others as needed:
 * price tables, form panels.
 *
 * ARM A IS INLINE, NOT OVERLAY — this is the load-bearing decision. With no JS, opening the
 * <details> reveals the content in normal document flow: readable, tabbable, closable by the
 * same summary click, no focus trap needed because nothing is trapped. A CSS-only overlay
 * would be a trap without an escape (the close button needs script, and a fixed layer can
 * bury its own summary). modal.js upgrades the element to a true overlay dialog — backdrop,
 * focus trap, Esc, scroll lock — by setting .lp-modal--on, which is the ONLY thing every
 * overlay rule below is scoped under.
 */

lp-modal {
  display: block;
}

.lp-modal__trigger {
  cursor: pointer;
  list-style: none; /* the trigger is styled by the page (usually as a button); no UA marker */
}

.lp-modal__trigger::-webkit-details-marker {
  display: none;
}

.lp-modal__trigger:focus-visible {
  outline: 2px solid var(--btn-outline-border);
  outline-offset: 4px;
}

/* ---- arm A: inline disclosure ------------------------------------------------ */

.lp-modal__layer {
  margin-top: var(--space-s);
}

.lp-modal__dialog {
  max-width: var(--modal-w, 440px);
  padding: var(--space-l);
  color: var(--text-c);
  background: var(--bg);
  border: 1px solid var(--border);
}

.lp-modal__dialog > :first-child { margin-top: 0; }

/* The close button is script's affordance — authored `hidden`, revealed by modal.js. Inline,
 * the summary already closes the disclosure and a second "×" would be a lie. */
.lp-modal__close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--primary);
  background: var(--bg);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.lp-modal__close:focus-visible {
  outline: 2px solid var(--btn-outline-border);
  outline-offset: 3px;
}

/* `display: grid` above beats the UA's [hidden] → display:none, so the authored-hidden close
 * button would show in the no-JS arm — where the summary is the only honest close. Re-assert.
 * (Same guard exists on .lp-wa-chat__close in widgets/whatsapp.) */
.lp-modal__close[hidden] {
  display: none;
}

/* ---- upgraded: overlay dialog (every rule scoped under --on) ------------------ */

.lp-modal--on .lp-modal__layer {
  position: fixed;
  z-index: 1000; /* above .lp-wa (998) — the composer opens FROM the WhatsApp button */
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--space-m);
  background: color-mix(in srgb, var(--text-c) 52%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.lp-modal--on .lp-modal__shell[open] .lp-modal__layer {
  opacity: 1;
}

.lp-modal--on .lp-modal__dialog {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 0;
  box-shadow: 0 26px 80px color-mix(in srgb, var(--text-c) 24%, transparent);
  transform: translateY(18px) scale(0.98);
  transition: transform var(--dur) var(--ease);
}

.lp-modal--on .lp-modal__shell[open] .lp-modal__dialog {
  transform: translateY(0) scale(1);
}

/* Bottom sheet on small screens — the XERF pattern: a centred card on a phone wastes the
 * thumb zone the dialog exists to serve. */
@media (max-width: 700px) {
  .lp-modal--on .lp-modal__layer {
    place-items: end stretch;
    padding: 0;
  }

  .lp-modal--on .lp-modal__dialog {
    max-width: none;
    max-height: 88vh;
    transform: translateY(100%);
  }

  .lp-modal--on .lp-modal__shell[open] .lp-modal__dialog {
    transform: translateY(0);
  }
}

/* ---- chat variant: the composer anchor (XERF's .whatsapp-chat placement) --------------- */
/* .lp-modal--chat anchors the dialog bottom-right, above where the floating .lp-wa button
 * sits, instead of centring it — the composer opens FROM the button, so it appears AT the
 * button, at every width (no bottom sheet: XERF keeps the panel anchored on mobile too,
 * which is why this block comes after the 700px rules and re-asserts placement). The frame
 * moves from --border to --border-strong: an anchored panel has no centring to separate it
 * from the page, only its edge. */

.lp-modal--chat .lp-modal__dialog {
  width: min(380px, calc(100vw - 24px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--text-c) 24%, transparent);
}

/* Arm A for --chat is fixed-anchored, NOT inline — the one variant where a CSS-only overlay
 * is safe, because its trigger is the floating button itself: always visible beside the
 * panel, never buried by it, and the same tap closes the native disclosure. (The generic
 * variant cannot do this; its trigger sits in flow and a fixed layer could cover it.) No
 * backdrop and no scroll lock in this arm — those need script and the page stays usable
 * without them. :not(--on) keeps this rule out of the upgraded path, where the full-screen
 * layer below takes over at equal-or-lower specificity. */
.lp-modal--chat:not(.lp-modal--on) .lp-modal__shell[open] .lp-modal__layer {
  position: fixed;
  z-index: 999;
  right: 12px;
  bottom: calc(var(--wa-bottom, 20px) + var(--wa-size, 66px) + 14px);
  margin: 0;
}

.lp-modal--on.lp-modal--chat .lp-modal__layer {
  place-items: end;
  padding: 0 12px calc(var(--wa-bottom, 20px) + var(--wa-size, 66px) + 14px) 12px;
}

.lp-modal--on.lp-modal--chat .lp-modal__dialog {
  max-height: calc(100vh - 120px);
  transform: translateY(14px) scale(0.985);
  transform-origin: right bottom;
}

.lp-modal--on.lp-modal--chat .lp-modal__shell[open] .lp-modal__dialog {
  transform: translateY(0) scale(1);
}

/* Scroll lock while an upgraded modal is open. Class goes on <html>, set by modal.js. */
html.lp-modal-lock {
  overflow: hidden;
}