/* ============================================================
   shared/testimonial-modal.css — dialog chrome for
   shared/testimonial-modal.js. The contents (title/intro/form) are
   shared/testimonial-share.js's renderForm() output, styled by
   shared/form.css — this file owns only the panel/scrim/close button,
   the same shape as shared/book-modal.css.

   Motion gated on body.reduced only (non-negotiable #5) — never
   @media(prefers-reduced-motion:reduce).
   ============================================================ */
.testimonial-modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--exhale), visibility 0s linear .35s;
}
.testimonial-modal[data-open="true"]{
  opacity:1; visibility:visible;
  transition:opacity .35s var(--exhale), visibility 0s linear 0s;
}
.testimonial-modal__scrim{
  position:absolute; inset:0;
  background:color-mix(in srgb, var(--page-bg2, var(--ground-2, var(--page-bg, var(--ground)))) 70%, black 15%);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

.testimonial-modal__panel{
  position:relative; z-index:1;
  width:100%; max-width:520px;
  max-height:min(88vh, 780px);
  overflow-y:auto;
  background:var(--page-bg, var(--ground));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.45);
  padding:clamp(28px,4vw,40px);
  transform:translateY(10px) scale(.98);
  transition:transform .4s var(--exhale);
}
.testimonial-modal[data-open="true"] .testimonial-modal__panel{ transform:translateY(0) scale(1); }

.testimonial-modal__close{
  all:unset; cursor:pointer;
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-faint); font-family:var(--mono); font-size:20px; line-height:1;
  transition:background .25s, color .25s;
}
.testimonial-modal__close:hover{ background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink); }
.testimonial-modal__close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.testimonial-modal__body .testimonial-form__title{ font-size:clamp(22px,3vw,28px); margin-top:8px; }

body.reduced .testimonial-modal,
body.reduced .testimonial-modal__panel{ transition:none !important; }

@media (max-width:640px){
  .testimonial-modal{ padding:0; align-items:flex-end; }
  .testimonial-modal__panel{
    max-width:none; width:100%; max-height:90vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    border-bottom:none;
    padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  }
  .testimonial-modal[data-open="true"] .testimonial-modal__panel{ transform:translateY(0); }
  .testimonial-modal:not([data-open="true"]) .testimonial-modal__panel{ transform:translateY(24px); }
}