/* ==========================================================================
   GRIST · demo forms (Functions enquiry, Visit booking)
   Shared by functions.html and visit.html. Colours come from variables so the
   same form sits on a bone panel (Functions) or a stout panel (Visit).
   Every form has a honeypot (.hp) and an on-page confirmation. Nothing is sent.
   ========================================================================== */
.dform{ --f-fg:var(--ink); --f-muted:rgba(27,20,17,.74); --f-line:rgba(27,20,17,.42); --f-field:rgba(255,255,255,.55); --f-err:var(--brick); --f-focus:var(--ink); color-scheme:light; position:relative; }
.dform--dark{ --f-fg:var(--bone); --f-muted:var(--bone-72); --f-line:rgba(251,241,222,.4); --f-field:rgba(251,241,222,.06); --f-err:var(--tap); --f-focus:var(--straw); color-scheme:dark; }
.dgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.field{ display:grid; gap:7px; align-content:start; min-width:0; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:15px; font-weight:500; color:var(--f-fg); }
.field label .opt{ font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--f-muted); margin-left:6px; }
.field input, .field select, .field textarea{ width:100%; min-height:52px; padding:0 14px; border:1.5px solid var(--f-line); border-radius:10px; background:var(--f-field); color:var(--f-fg);
  font:400 17px/1.3 var(--sans); transition:border-color var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover); }
.field textarea{ padding:12px 14px; min-height:112px; resize:vertical; line-height:1.45; }
.field select{ -webkit-appearance:none; appearance:none; padding-right:42px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
.dform--dark .field select option{ background:var(--stout); color:var(--bone); }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--f-fg); }
/* visible focus: a 2px ring outside the field on top of the border change */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:2px solid var(--f-focus); outline-offset:2px; border-color:var(--f-fg); }
.field [aria-invalid="true"]{ border-color:var(--f-err); border-width:2px; }
.f-hint{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--f-muted); }
.f-err{ display:none; font-size:14px; line-height:1.35; font-weight:500; color:var(--f-err); }
.f-err.is-on{ display:flex; gap:8px; align-items:flex-start; }
.f-err.is-on::before{ content:"!"; flex:none; display:grid; place-items:center; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--f-err); color:var(--bone); font:500 12px/1 var(--sans); }
.dform--dark .f-err.is-on::before{ color:var(--ink); }
.f-err a{ color:inherit; }
/* honeypot: off screen, out of the tab order, hidden from assistive tech */
.hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.dform-status{ display:none; margin-bottom:18px; padding:12px 16px; border-radius:10px; font-size:15px; font-weight:500; background:var(--f-err); color:var(--bone); }
.dform--dark .dform-status{ color:var(--ink); }
.dform-status.is-on{ display:block; }
.dform-foot{ display:flex; align-items:center; gap:14px 24px; flex-wrap:wrap; margin-top:26px; }
.demo-note{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--f-muted, rgba(27,20,17,.74)); }
.dform .btn:focus-visible, .dform-done .btn:focus-visible{ outline:2px solid var(--f-focus); outline-offset:3px; }

/* confirmation state */
.dform-done{ display:grid; gap:16px; justify-items:start; align-content:start; }
.dform-done-h{ font-size:clamp(52px, 5.4vw, 88px); line-height:.86; outline:none; }
.dform-done-line{ font-size:19px; line-height:1.45; max-width:36ch; }
.dform-done-sum{ display:flex; flex-wrap:wrap; gap:8px; }
.dform-done-sum li{ display:inline-flex; align-items:center; min-height:32px; padding:0 14px; border-radius:var(--r-pill); box-shadow:inset 0 0 0 1.5px currentColor; font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; }
.js .dform-done:not([hidden]){ animation:done-in 700ms var(--ease-enter) both; }
@keyframes done-in{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

@media (max-width:640px){
  .dgrid{ grid-template-columns:1fr; gap:16px; }
  .dform-foot .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce){ .js .dform-done:not([hidden]){ animation:none; } }