/* =========================================================================
   Changelog
   0.7.0  2026-09-25  Initial ship. Everything below this block is verbatim
                      from docs/delivery-checker-build-handoff.md section
                      14.9. Do not edit here; change the handoff first.
   ========================================================================= */

/* =========================================================================
   Afishionado delivery-area checker: trigger and modal
   Ship as afz-delivery-modal.css. Load AFTER afz-delivery-checker.css
   (uses its --afz-dc-font). The card inside the modal is the existing
   .afz-dc--card, unchanged.

   Same rules as the checker: self-contained, no theme variables, no
   !important, every class afz-dc-, every element declares its own
   foreground and background. Colour declarations sit at (0,2,0) so a
   theme rule such as ".banner button" or ".band p" cannot repaint them.
   ========================================================================= */

:root{
  /* Solid colours reuse the checker's palette (afz-delivery-checker.css
     :root). The one addition is blue-50, the design system's lightest
     tint of the brand light blue. */
  --afz-dc-blue-50:#E6F5F8;

  /* Modal */
  --afz-dc-m-panel-bg:var(--afz-dc-paper);
  --afz-dc-m-panel-fg:var(--afz-dc-ink);
  --afz-dc-m-scrim:rgba(0,60,80,.40);   /* design-system modal overlay */
  --afz-dc-m-scrim-0:rgba(0,60,80,0);
  --afz-dc-m-shadow:0 22px 40px -20px rgba(0,60,80,.28),0 6px 12px rgba(27,31,34,.06); /* design-system --shadow-lg */
  --afz-dc-m-close-bg:var(--afz-dc-paper);
  --afz-dc-m-close-fg:var(--afz-dc-ink-2);
  --afz-dc-m-close-bg-hover:var(--afz-dc-paper-2);
  --afz-dc-m-close-fg-hover:var(--afz-dc-ink);
  --afz-dc-m-focus:var(--afz-dc-blue-dark);

  /* Trigger on a dark band (teal or navy) */
  --afz-dc-t-dark-bg:transparent;              /* declared, never inherited; the outline carries it */
  --afz-dc-t-dark-fg:var(--afz-dc-paper);
  --afz-dc-t-dark-edge:rgba(251,248,243,.70); /* paper at 70%, on-dark "muted" step */
  --afz-dc-t-dark-bg-hover:var(--afz-dc-paper);
  --afz-dc-t-dark-fg-hover:var(--afz-dc-navy);
  --afz-dc-t-dark-focus:var(--afz-dc-action-soft);

  /* Trigger on a light ground (paper or white) */
  --afz-dc-t-light-bg:var(--afz-dc-white);
  --afz-dc-t-light-fg:var(--afz-dc-blue-dark);
  --afz-dc-t-light-edge:rgba(0,106,128,.38);  /* same as checker --afz-dc-toggle-edge */
  --afz-dc-t-light-bg-hover:var(--afz-dc-blue-50);
  --afz-dc-t-light-edge-hover:var(--afz-dc-blue-dark);
  --afz-dc-t-light-focus:var(--afz-dc-blue-dark);

  /* Shape and motion */
  --afz-dc-m-w:520px;
  --afz-dc-m-r:14px;
  --afz-dc-m-pad:32px;
  --afz-dc-m-top:clamp(24px,12vh,120px);
  --afz-dc-m-gap:24px;
  --afz-dc-m-in:220ms;
  --afz-dc-m-out:140ms;
  --afz-dc-m-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- trigger ------------------------------------------------------------ */
.afz-dc-trigger{
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px 0 15px; margin:0;
  border:1px solid transparent; border-radius:999px;
  font-family:var(--afz-dc-font); font-size:15px; font-weight:500;
  line-height:1; letter-spacing:.01em; text-decoration:none;
  white-space:nowrap; cursor:pointer;
  transition:background-color var(--afz-dc-m-out) var(--afz-dc-m-ease),
             border-color var(--afz-dc-m-out) var(--afz-dc-m-ease),
             color var(--afz-dc-m-out) var(--afz-dc-m-ease),
             transform var(--afz-dc-m-out) var(--afz-dc-m-ease);
}
.afz-dc-trigger svg{flex:0 0 auto; width:18px; height:18px;}
.afz-dc-trigger span{color:inherit; background-color:transparent;}
.afz-dc-trigger:active{transform:scale(.98);}

.afz-dc-trigger.afz-dc-trigger--on-dark{
  background-color:var(--afz-dc-t-dark-bg); color:var(--afz-dc-t-dark-fg);
  border-color:var(--afz-dc-t-dark-edge);
}
.afz-dc-trigger.afz-dc-trigger--on-dark svg{color:var(--afz-dc-t-dark-fg);}
.afz-dc-trigger.afz-dc-trigger--on-dark:hover{
  background-color:var(--afz-dc-t-dark-bg-hover); color:var(--afz-dc-t-dark-fg-hover);
  border-color:var(--afz-dc-t-dark-bg-hover);
}
.afz-dc-trigger.afz-dc-trigger--on-dark:hover svg{color:var(--afz-dc-t-dark-fg-hover);}
.afz-dc-trigger.afz-dc-trigger--on-dark:focus-visible{
  outline:2px solid var(--afz-dc-t-dark-focus); outline-offset:2px;
}

.afz-dc-trigger.afz-dc-trigger--on-light{
  background-color:var(--afz-dc-t-light-bg); color:var(--afz-dc-t-light-fg);
  border-color:var(--afz-dc-t-light-edge);
}
.afz-dc-trigger.afz-dc-trigger--on-light svg{color:var(--afz-dc-t-light-fg);}
.afz-dc-trigger.afz-dc-trigger--on-light:hover{
  background-color:var(--afz-dc-t-light-bg-hover); color:var(--afz-dc-t-light-fg);
  border-color:var(--afz-dc-t-light-edge-hover);
}
.afz-dc-trigger.afz-dc-trigger--on-light:focus-visible{
  outline:2px solid var(--afz-dc-t-light-focus); outline-offset:2px;
}

/* ---- dialog panel ------------------------------------------------------- */
/* Top-anchored, not centred: the answer drawer grows the panel downward
   only, so the heading and close button never move. Positioning lives on
   the base rule (not [open]) so it holds during the exit transition. */
.afz-dc-modal{
  box-sizing:border-box;
  position:fixed; inset:0 0 auto 0;
  width:min(var(--afz-dc-m-w), calc(100% - 24px)); max-width:none;
  max-height:calc(var(--afz-dc-m-vh,100dvh) - var(--afz-dc-m-top) - var(--afz-dc-m-gap));
  margin:calc(var(--afz-dc-m-vtop,0px) + var(--afz-dc-m-top)) auto 0;
  padding:0; border:0; border-radius:var(--afz-dc-m-r); overflow:hidden;
  background-color:var(--afz-dc-m-panel-bg); color:var(--afz-dc-m-panel-fg);
  box-shadow:var(--afz-dc-m-shadow);
  font-family:var(--afz-dc-font); font-size:16px; line-height:1.5; text-align:left;
  opacity:0; transform:translateY(4px);
  transition:opacity var(--afz-dc-m-out) var(--afz-dc-m-ease),
             transform var(--afz-dc-m-out) var(--afz-dc-m-ease),
             overlay var(--afz-dc-m-out) allow-discrete,
             display var(--afz-dc-m-out) allow-discrete;
}
.afz-dc-modal[open]{
  display:flex; flex-direction:column;
  opacity:1; transform:none; transition-duration:var(--afz-dc-m-in);
}
@starting-style{
  .afz-dc-modal[open]{opacity:0; transform:translateY(8px);}
}

/* Fallback values cover browsers where ::backdrop does not inherit
   custom properties from the dialog. */
.afz-dc-modal::backdrop{
  background-color:var(--afz-dc-m-scrim-0, rgba(0,60,80,0));
  transition:background-color var(--afz-dc-m-out, 140ms) ease-out,
             overlay var(--afz-dc-m-out, 140ms) allow-discrete,
             display var(--afz-dc-m-out, 140ms) allow-discrete;
}
.afz-dc-modal[open]::backdrop{
  background-color:var(--afz-dc-m-scrim, rgba(0,60,80,.40));
  transition-duration:var(--afz-dc-m-in, 220ms);
}
@starting-style{
  .afz-dc-modal[open]::backdrop{background-color:var(--afz-dc-m-scrim-0, rgba(0,60,80,0));}
}

/* Page behind does not scroll while the dialog is open. */
html:has(.afz-dc-modal[open]){overflow:hidden;}

/* The sticky bar (checker layout 4) is a second copy of the same form.
   The top layer would cover it with the backdrop, leaving a dimmed,
   inert duplicate field under the panel. Remove it while a dialog is
   open; it is fixed-position, so nothing reflows. */
html:has(.afz-dc-modal[open]) .afz-dc--sticky{display:none;}

/* ---- scrolling body ----------------------------------------------------- */
/* Only this scrolls. The close button sits outside it, so it stays on
   screen however tall the answer gets. */
.afz-dc-modal .afz-dc-modal-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--afz-dc-m-pad);
  background-color:var(--afz-dc-m-panel-bg); color:var(--afz-dc-m-panel-fg);
}

/* ---- close -------------------------------------------------------------- */
.afz-dc-modal .afz-dc-modal-closer{
  position:absolute; top:12px; right:12px; z-index:1; margin:0; padding:0;
  background-color:transparent; color:var(--afz-dc-m-close-fg);
}
.afz-dc-modal .afz-dc-modal-close{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin:0; padding:0;
  border:0; border-radius:50%; cursor:pointer;
  background-color:var(--afz-dc-m-close-bg); color:var(--afz-dc-m-close-fg);
  transition:background-color var(--afz-dc-m-out) var(--afz-dc-m-ease),
             color var(--afz-dc-m-out) var(--afz-dc-m-ease);
}
.afz-dc-modal .afz-dc-modal-close:hover{
  background-color:var(--afz-dc-m-close-bg-hover); color:var(--afz-dc-m-close-fg-hover);
}
.afz-dc-modal .afz-dc-modal-close:focus-visible{
  outline:2px solid var(--afz-dc-m-focus); outline-offset:2px;
}
.afz-dc-modal .afz-dc-modal-close svg{width:20px; height:20px; color:inherit;}

/* ---- the existing card, placed in the modal ----------------------------- */
/* The card's eyebrow and heading are the modal header. Its top hairline
   separates it from page content above; inside a panel it would be a stray
   line, so it is dropped here only. Right padding keeps the heading clear
   of the close button. */
.afz-dc-modal .afz-dc--card{max-width:none;}
.afz-dc-modal .afz-dc--card .afz-dc-head{padding-top:0; padding-right:40px; border-top:0;}

/* ---- phones ------------------------------------------------------------- */
/* Still top-anchored. With the keyboard up the visible area is ~340px;
   the empty card needs ~290px, so the input and button stay in view. */
@media (max-width:480px){
  .afz-dc-modal{--afz-dc-m-top:12px; --afz-dc-m-gap:12px; --afz-dc-m-pad:24px 20px 20px;}
  .afz-dc-modal .afz-dc-modal-closer{top:8px; right:8px;}
}

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .afz-dc-modal,.afz-dc-modal::backdrop,
  .afz-dc-trigger,.afz-dc-modal .afz-dc-modal-close{transition:none;}
  .afz-dc-modal{transform:none;}
  .afz-dc-trigger:active{transform:none;}
}