/* dialog.css — L8. Generic native <dialog> (.dlg) + call-back form (.cb).
 * Values come from tokens.css only. Motion: transform/opacity, <= 240ms, token easings.
 * Open animation: @starting-style transition where supported (also animates the close),
 * keyframe fallback everywhere else. < 560px the dialog becomes a bottom sheet.
 */

/* ------------------------------------------------------------------ dialog shell */
html.has-dialog { overflow: hidden; }

.dlg {
  /* reset the UA dialog box: the panel inside is the visible surface */
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--c-ink);
  inline-size: 100%;
  max-inline-size: min(560px, 100vw - 32px);
  max-block-size: calc(100dvh - var(--s-32));
  margin: auto;
  overflow: visible;
  font-family: var(--font-sans);
  z-index: var(--z-dialog);
}
.dlg:not([open]) { display: none; }

.dlg::backdrop {
  background: rgba(233, 241, 247, .32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* keyframe fallback (every browser with <dialog>) */
.dlg[open] { animation: dlg-in var(--t-mid) var(--ease-out) both; }
.dlg[open]::backdrop { animation: dlg-fade var(--t-mid) var(--ease-out) both; }

@keyframes dlg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dlg-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* progressive: entry AND exit via @starting-style + discrete transitions */
@supports (transition-behavior: allow-discrete) {
  .dlg[open],
  .dlg[open]::backdrop { animation: none; }

  .dlg {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity var(--t-mid) var(--ease-out),
      transform var(--t-mid) var(--ease-out),
      overlay var(--t-mid) var(--ease-out) allow-discrete,
      display var(--t-mid) var(--ease-out) allow-discrete;
  }
  .dlg[open] { opacity: 1; transform: none; }

  .dlg::backdrop {
    opacity: 0;
    transition:
      opacity var(--t-mid) var(--ease-out),
      overlay var(--t-mid) var(--ease-out) allow-discrete,
      display var(--t-mid) var(--ease-out) allow-discrete;
  }
  .dlg[open]::backdrop { opacity: 1; }

  @starting-style {
    .dlg[open] { opacity: 0; transform: translateY(8px); }
    .dlg[open]::backdrop { opacity: 0; }
  }
}

.dlg__panel {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  max-block-size: calc(100dvh - var(--s-32));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-surface);
  border: var(--hairline);
  border-radius: var(--r-panel);
  padding: clamp(var(--s-24), 5vw, var(--s-32));
  box-shadow: var(--shadow-lift);
  margin: 0;
}

.dlg__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-16);
  margin-block-end: var(--s-24);
}
.dlg__head h2 {
  margin: 0;
  padding-block-start: var(--s-8);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
.dlg__head h2 .label {
  display: block;
  margin-block-end: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-label);
  color: var(--c-ink-2);
}

.dlg__close {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  padding: 0;
  border: var(--hairline-soft);
  border-radius: 50%;
  background: transparent;
  color: var(--c-ink);
  font: var(--fw-light) var(--fs-20)/1 var(--font-sans);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out);
}
.dlg__close:hover { border-color: var(--c-line); }
.dlg__close:active { transform: scale(.94); }
.dlg__close:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

/* mobile: bottom sheet */
@media (max-width: 559.98px) {
  .dlg {
    max-inline-size: 100%;
    margin-block-end: 0;
    margin-inline: 0;
    max-block-size: calc(100dvh - var(--s-24));
  }
  .dlg__panel {
    max-block-size: calc(100dvh - var(--s-24));
    border-block-end: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    padding-inline: max(var(--s-24), env(safe-area-inset-left), env(safe-area-inset-right));
    padding-block-end: calc(var(--s-24) + env(safe-area-inset-bottom, 0px));
  }
}

/* ------------------------------------------------------------------ call-back form */
.cb { container-type: inline-size; container-name: cb; }

.cb__fields {
  display: grid;
  gap: var(--s-16);
}

.cb__grid {
  display: grid;
  gap: var(--s-16);
  grid-template-columns: minmax(0, 1fr);
}
@container cb (min-width: 440px) {
  .cb__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cb__field {
  display: grid;
  gap: 6px;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cb__label,
.cb__field > legend {
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-label);
  color: var(--c-ink-2);
}
.cb__field > legend { margin-block-end: 6px; }
.cb__opt { color: var(--c-ink-2); opacity: .8; }
.cb__opt::before { content: " "; }

/* :has() enhancement: label follows the field's error state */
.cb__field:has([aria-invalid="true"]) > .cb__label { color: var(--c-danger); }

.cb__input {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 48px;
  margin: 0;
  padding-inline: 14px;
  border: var(--hairline-soft);
  border-radius: var(--r-ctl);
  background: var(--c-bg);
  color: var(--c-ink);
  font: var(--fw-regular) var(--fs-16)/var(--lh-snug) var(--font-sans); /* 16px: no iOS zoom */
  -webkit-appearance: none;
  appearance: none;
}
.cb__input::placeholder { color: var(--c-ink-2); opacity: .7; }
.cb__input:hover { border-color: rgba(233, 241, 247, .4); }
.cb__input:focus-visible,
.cb__input:focus {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-color: var(--c-line);
}
.cb__input[aria-invalid="true"] { border-color: var(--c-danger); }

textarea.cb__input {
  min-block-size: 112px;
  padding-block: 12px;
  line-height: var(--lh-body);
  resize: vertical;
}

select.cb__input {
  padding-inline-end: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23292929' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
select.cb__input:dir(rtl) { background-position: left 16px center; }

.cb__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--s-12);
  min-block-size: 0;
}
.cb__count {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}

.cb__err {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
  color: var(--c-danger);
}
.cb__err:empty { display: none; }

/* time-slot chips (radios) */
.cb__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
}
.cb__chip {
  position: relative;
  display: inline-flex;
}
.cb__chip input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cb__chip span {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
  padding-inline: var(--s-16);
  border: var(--hairline-soft);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: var(--fs-14);
  line-height: 1;
  transition: transform var(--t-fast) var(--ease-out);
}
.cb__chip:hover span { border-color: rgba(233, 241, 247, .4); }
.cb__chip input:active + span { transform: scale(.97); }
.cb__chip input:checked + span {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-on-ink);
}
.cb__chip input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 3px; }

/* consent checkbox */
.cb__check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s-12);
  min-block-size: var(--tap);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
  cursor: pointer;
}
.cb__check input {
  inline-size: 20px;
  block-size: 20px;
  margin: 2px 0 0;
  accent-color: var(--c-ink);
  cursor: pointer;
}
.cb__check input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.cb__check input[aria-invalid="true"] { outline: 1px solid var(--c-danger); outline-offset: 2px; }
.cb__check a {
  color: var(--c-accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cb__check a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: 2px; }

/* honeypot + screen-reader-only text */
.cb__hp,
.cb__sr {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* footer: submit + note */
.cb__foot {
  display: grid;
  gap: var(--s-12);
  padding-block-start: var(--s-8);
}
.cb__submit {
  /* .pill / .pill--primary come from panel.css (already used on <button> in the band) */
  cursor: pointer;
  inline-size: 100%;
  justify-content: space-between;
}
@container cb (min-width: 440px) {
  .cb__submit { inline-size: auto; justify-self: start; }
}
.cb__submit[aria-busy="true"] { opacity: .6; cursor: progress; }
.cb__submit:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.cb__note {
  margin: 0;
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
}

/* status line */
.cb__status {
  margin: var(--s-16) 0 0;
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
  color: var(--c-ink-2);
}
.cb__status:empty { display: none; }
.cb__status[data-kind="success"] { color: var(--c-success); }
.cb__status[data-kind="error"] { color: var(--c-danger); }

/* network fallback (mailto) */
.cb__fallback {
  display: grid;
  gap: var(--s-12);
  padding: var(--s-16);
  border: var(--hairline-soft);
  border-radius: var(--r-ctl);
  background: var(--c-bg);
}
.cb__fallback[hidden] { display: none; }
.cb__fallback p { margin: 0; font-size: var(--fs-14); line-height: var(--lh-body); }

/* thank-you state */
.cb__done {
  display: grid;
  gap: var(--s-12);
  animation: cb-done var(--t-mid) var(--ease-out) both;
}
.cb__done .label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-label);
  color: var(--c-success);
}
.cb__done h3 {
  margin: 0;
  font-size: var(--fs-28);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
}
.cb__done h3:focus { outline: none; }
.cb__done h3:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.cb__done p { margin: 0; color: var(--c-ink-2); line-height: var(--lh-body); }
.cb__done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  padding-block-start: var(--s-8);
}

@keyframes cb-done {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dlg[open],
  .dlg[open]::backdrop,
  .cb__done { animation: none; }
  .dlg,
  .dlg::backdrop,
  .dlg__close,
  .cb__chip span { transition: none; }
}

/* [orchestrator merge] L6 NFC dialog body */
.nfc{display:grid;gap:var(--s-16)}
.nfc__intro,.nfc__note{margin:0;max-inline-size:60ch}
.nfc__note{color:var(--c-ink-2);font-size:var(--fs-14)}
.nfc__status{margin:0;min-block-size:1.5em;font-family:var(--font-mono);font-size:var(--fs-12)}
.nfc__status[data-kind="success"]{color:var(--c-ink)}
.nfc__status[data-kind="error"]{color:var(--c-danger)}
.pill[aria-busy="true"]{opacity:.6;cursor:progress}