/* ============================================================
   Walter — pop-up form frame, round 3
   The round-2 frame read as a generic modal: an outlined card with a
   crown rule, a tracked chip kicker, boxed fields and outlined chips.
   None of that is Walter. This sheet re-cuts the frame to the site's own
   vocabulary — solid colour planes in the band rhythm (brown → white →
   stone), Aviano 500 display, dotted rules as the only line treatment,
   the footer form's field recipe, and the one uppercase on the site
   reserved for the submit.
   Loaded after site-system.css.
   ============================================================ */

/* ---- the frame is three planes, not a card ---- */
.ap-card { border-top: 0; background: var(--white); box-shadow: none; border-radius: 0; }

/* plane 1 — brown, carries the identity and the ask */
.ap-head { background: var(--primary); border-bottom: 0; padding: 4.8rem 4.8rem 4rem; }
.ap-head .ap-kicker { display: block; background: transparent; padding: 0; margin: 0 0 1.6rem; font-family: "acumin-variable", Arial, sans-serif; font-stretch: 67.5%; font-variation-settings: "wght" 400, "wdth" 67.5; font-size: 2rem; letter-spacing: 0; text-transform: none; color: var(--primary-light); }
.ap-head h2 { font-family: "aviano-didone", Georgia, serif; font-weight: 500; font-variation-settings: normal; text-transform: lowercase; font-size: clamp(3.2rem, 3vw, 4rem); line-height: 1.1; letter-spacing: 0; color: var(--accent); margin: 0 0 2rem; }
.ap-head p { font-size: 2.2rem; line-height: 1.5; color: rgba(252,242,232,.9); max-width: 56ch; }
.ap-close { color: var(--primary-ultra-light); font-size: 3.4rem; top: 1.6rem; right: 1.6rem; }
.ap-close:hover { background: rgba(252,242,232,.12); color: var(--accent); }

/* plane 2 — white, the fields */
.ap-body { background: var(--white); }
.ap-col { padding: 4rem 4.8rem; }
.ap-col + .ap-col { border-left: 1px dotted var(--primary); }
.ap-col h3 { font-family: "aviano-didone", Georgia, serif; font-weight: 500; font-variation-settings: normal; text-transform: lowercase; font-size: 2.4rem; letter-spacing: 0; color: var(--base); margin: 0 0 2rem; }

/* fields on the site's own footer recipe: no box, dotted rule, full-strength ink */
.ap-field { margin-bottom: 2.8rem; }
.ap-field label, .ap-fieldset legend { font-size: 1.8rem; color: rgba(78,42,10,.85); margin-bottom: .6rem; }
.ap-field input, .ap-field textarea, .ap-field select {
  background: transparent; border: 0; border-bottom: 2px dotted rgba(78,42,10,.5); border-radius: 0;
  padding: 1rem 0; font-size: 2.2rem; color: var(--primary);
}
.ap-field textarea { background: rgba(203,200,196,.35); padding: 1.4rem 1.6rem; border-bottom-color: var(--primary); min-height: 8.4rem; }
.ap-field input:focus-visible, .ap-field textarea:focus-visible { outline: 0; border-bottom-color: var(--primary); border-bottom-style: solid; }
.ap-field input::placeholder, .ap-field textarea::placeholder { color: rgba(78,42,10,.85); opacity: 1; }

/* choices are stone planes, never outlined boxes */
.ap-chip, .ap-date, .ap-time { background: var(--secondary); border: 0; border-radius: 0; color: var(--primary); }
.ap-chip:hover, .ap-date:hover, .ap-time:hover { background: var(--secondary-hover, #bdb9b4); border: 0; }
.ap-chip[aria-pressed="true"], .ap-date[aria-pressed="true"], .ap-time[aria-pressed="true"] { background: var(--primary); color: var(--accent); border: 0; }
.ap-date .dom { color: inherit; }
.ap-chips { gap: 1rem; }
.ap-dates, .ap-times { gap: 1rem; }
.ap-hint { font-size: 1.8rem; color: rgba(78,42,10,.8); border-top: 1px dotted rgba(78,42,10,.45); padding-top: 2rem; }

/* plane 3 — stone, and the one uppercase on the site */
.ap-foot { background: var(--secondary); border-top: 0; padding: 3.2rem 4.8rem; }
.ap-summary { font-size: 2rem; color: var(--base); }
.ap-btn { background: var(--primary); color: var(--accent); border-radius: 0; padding: 1.6rem 4.4rem; font-variation-settings: "wght" 400, "wdth" 67.5; text-transform: uppercase; letter-spacing: .16em; font-size: 1.8rem; min-width: 24rem; }
.ap-btn:hover { background: var(--primary-hover); color: var(--accent); opacity: 1; }
.ap-btn[disabled] { opacity: .4; }
.ap-legal { color: rgba(78,42,10,.8); }

/* confirmation reads as the same three planes */
.ap-done { background: var(--white); padding: 5.6rem 4.8rem; }
.ap-done h2 { font-family: "aviano-didone", Georgia, serif; font-weight: 500; font-variation-settings: normal; text-transform: lowercase; font-size: 3.6rem; letter-spacing: 0; color: var(--base); }
.ap-done .ap-recap { background: var(--secondary); border-radius: 0; }

@media (max-width: 900px) {
  .ap-head { padding: 3.2rem var(--space-m) 2.8rem; }
  .ap-head h2 { font-size: 2.8rem; }
  .ap-col { padding: 3.2rem var(--space-m); }
  .ap-foot { padding: 2.4rem var(--space-m); }
  .ap-btn { min-width: 0; width: 100%; text-align: center; }
  .ap-done { padding: 3.2rem var(--space-m); }
}

/* two-column card: both columns are full-height planes, so neither ends in a
   pool of white. The question set balances the details column. */
.ap-body { align-items: stretch; }
.ap-col { display: flex; flex-direction: column; }
.ap-col > form { display: flex; flex-direction: column; flex: 1; }
.ap-col > form > .ap-field:last-child { flex: 1; display: flex; flex-direction: column; }
.ap-col > form > .ap-field:last-child textarea { flex: 1; }
.ap-hint { margin: 2.4rem 0 0; }
.ap-fieldset { margin-bottom: 0; }
.ap-fieldset legend { margin-bottom: 1.2rem; }


/* ============================================================
   Round 4 — softened, for conversion
   Keith: the frame read rigid. The bones stay (three planes, Aviano
   display, dotted rules, one uppercase) but the edges soften on the same
   terms the calculator skin already sanctions: a 3px radius, one modest
   elevation, and calm motion under .2s. Nothing here adds a colour, a
   cool grey or a second uppercase.
   ============================================================ */

/* the card lifts off the scrim instead of sitting flat on it */
.ap-modal { backdrop-filter: blur(2px); }
.ap-card { border-radius: 3px; overflow: hidden; box-shadow: 0 2px 4px rgba(72,43,17,.14), 0 24px 64px rgba(72,43,17,.28); animation: ap-rise .2s ease-out both; }
@keyframes ap-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ap-card { animation: none; } }

/* fields: a warm plane you can see and hit, not a bare rule */
.ap-field input, .ap-field textarea, .ap-field select {
  background: rgba(203,200,196,.30); border-radius: 3px 3px 0 0;
  padding: 1.6rem 1.6rem 1.4rem; min-height: 6rem;
  transition: background .18s ease, border-color .18s ease;
}
.ap-field input:hover, .ap-field textarea:hover { background: rgba(203,200,196,.44); }
.ap-field input:focus-visible, .ap-field textarea:focus-visible, .ap-field select:focus-visible {
  outline: 0; background: var(--white); border-bottom-style: solid; border-bottom-color: var(--primary);
  box-shadow: 0 1px 0 0 var(--primary);
}
.ap-field label, .ap-fieldset legend { margin-bottom: .8rem; }

/* choices: same plane, softer corners, one calm lift */
.ap-chip, .ap-date, .ap-time { border-radius: 3px; transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.ap-chip:hover, .ap-date:hover, .ap-time:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(72,43,17,.14); }
.ap-chip[aria-pressed="true"], .ap-date[aria-pressed="true"], .ap-time[aria-pressed="true"] { box-shadow: 0 2px 10px rgba(72,43,17,.24); }
.ap-chip:active, .ap-date:active, .ap-time:active { transform: none; }

/* the action carries the weight: wide, lifted, and the only uppercase */
.ap-btn { border-radius: 3px; padding: 1.8rem 4.8rem; letter-spacing: .14em; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; box-shadow: 0 2px 10px rgba(72,43,17,.22); }
.ap-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(72,43,17,.28); }
.ap-btn:active { transform: none; }
.ap-btn[disabled] { box-shadow: none; transform: none; }
.ap-card--slim .ap-foot { flex-direction: column; align-items: stretch; }
.ap-card--slim .ap-actions { width: 100%; }
.ap-card--slim .ap-btn { width: 100%; text-align: center; }

/* the head breathes rather than shouts */
.ap-head { padding-bottom: 3.4rem; }
.ap-head h2 { font-size: clamp(3rem, 2.6vw, 3.6rem); }
.ap-head p { font-size: 2.1rem; }

/* the confirmation state arrives the same calm way */
.ap-done { animation: ap-rise .2s ease-out both; }
.ap-done .ap-recap { border-radius: 3px; }