/* =========================================================================
   THE BOSTON ARTISTRY — the two long forms only (round 6, 22 Sep 2026)
   Loaded after site.css and service.css by /party-inquiry/ and /custom-projects/.
   The form is the kit's .form card; this adds the step rail, the option cards,
   the agreement box and the summary list. Everything here is additive.
   ========================================================================= */
.iq{ max-width:none; gap:var(--s5); }
.iq__prog{ display:grid; gap:.5rem; }
.iq__count{ margin:0; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.iq__bar{ height:6px; border-radius:3px; background:var(--paper-2); overflow:hidden; }
.iq__bar i{ display:block; height:100%; width:var(--w,14%); background:var(--y); border-radius:3px;
            transition:width .45s cubic-bezier(.16,1,.3,1); }
.iq__step{ display:grid; gap:var(--s4); border:0; padding:0; margin:0; min-width:0; }
.iq__step[hidden]{ display:none; }
.iq__step h2{ margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.05;
              font-size:clamp(1.45rem,1rem + 1.4vw,2.1rem); outline:none; }
.iq__step h2 .scrap{ font-size:.62em; margin-right:.45rem; vertical-align:.12em; --tilt:-3deg; }
.iq__step > .lede{ margin:0; font-size:1rem; line-height:1.5; }
.iq__step h3{ margin:.4rem 0 0; font-size:1.02rem; font-weight:700; }
.iq__links{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:0; font-size:.92rem; }
.iq__links a{ color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--y);
              text-decoration-thickness:3px; text-underline-offset:4px; }
.iq__links a:hover{ text-decoration-color:var(--m); }

/* the option cards: a radio or a tick box, a bold name, one line under it */
.opts{ display:grid; gap:.6rem; }
.opts--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.opts > .err{ grid-column:1 / -1; }
.opt{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; padding:.85rem 1rem;
      border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--paper); cursor:pointer;
      transition:border-color var(--fast) linear, background var(--fast) linear; }
.opt input{ margin:.15rem 0 0; width:1.1rem; height:1.1rem; accent-color:var(--ink); flex:0 0 auto; }
.opt b{ display:block; font-weight:700; line-height:1.3; }
.opt small{ display:block; margin-top:.15rem; color:var(--ink-3); font-size:.84rem; line-height:1.4; }
.opt:hover{ border-color:var(--ink-3); }
.opt:has(input:checked){ border-color:var(--ink); background:var(--card); box-shadow:inset 0 0 0 1.5px var(--ink); }
.opt:has(input:focus-visible){ outline:3px solid var(--y); outline-offset:2px; }
.opts.is-bad .opt{ border-color:var(--m-txt); }

/* the agreement boxes (her two tick boxes) */
.agree{ display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start; padding:1rem 1.1rem;
        border-radius:var(--r-sm); background:var(--paper-2); cursor:pointer; }
.agree input{ margin:.2rem 0 0; width:1.15rem; height:1.15rem; accent-color:var(--ink); }
.agree b{ display:block; }
.agree small{ display:block; margin-top:.2rem; color:var(--ink-2); font-size:.88rem; line-height:1.45; }
.agree .err{ grid-column:2; }
.agree.is-bad{ box-shadow:inset 0 0 0 2px var(--m-txt); }

/* a plain block of rows inside a step */
.iq .field .hint{ margin-top:.05rem; }
.iq .form__row{ align-items:start; }
.iq .notice{ margin:0; padding:.85rem 1rem; border-left:4px solid var(--y); background:var(--paper-2);
             border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.9rem; line-height:1.5; color:var(--ink-2); }

/* back, next, send */
.iq__nav{ display:flex; gap:.75rem; margin-top:.25rem; margin-bottom:26px; }   /* 26px: the drips; two buttons = two halves, one keeps the row */
.iq__nav .btn{ flex:1 1 0; min-width:0; }
.iq__nav .btn[hidden]{ display:none; }
.iq__nav .btn--ghost{ min-height:60px; }

/* the summary, read before Send */
.iq__sum{ display:grid; gap:0; margin:0; padding:.25rem 1.1rem; border-radius:var(--r-md); background:var(--paper);
          border:1.5px solid var(--line); max-height:min(52vh,560px); overflow:auto; }
.iq__sum div{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr); gap:.6rem; padding:.55rem 0;
              font-size:.92rem; line-height:1.4; border-bottom:1px solid var(--line); }
.iq__sum div:last-child{ border-bottom:0; }
.iq__sum dt{ color:var(--ink-3); font-weight:600; }
.iq__sum dd{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.iq .form__ok{ text-align:left; padding:1.2rem 1.3rem; line-height:1.5; }
.iq .form__ok b{ display:block; font-size:1.1rem; margin-bottom:.3rem; }

/* v2 (her newer pages, 23 Sep 2026) ---------------------------------------------------------- */
.iq [hidden], .iq__dlg [hidden]{ display:none !important; }   /* .field / .notice set display; a block that does not apply must go */
.iq .hint:empty{ display:none; }
.opt input, .agree input{ min-height:0; }   /* the kit's 52px touch height is for text boxes; a tick box that tall sits off its first line */

/* her hero chips (top of the form section) and her one line under the form */
.iq__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 var(--s5); padding:0; list-style:none; }
.iq__tags li{ padding:.32rem .8rem; border-radius:999px; border:1.5px solid var(--line); background:var(--card);
              font-size:.8rem; font-weight:700; letter-spacing:.02em; color:var(--ink-2); }
.iq__foot{ margin:var(--s5) 0 0; font-size:.82rem; line-height:1.5; color:var(--ink-3); text-align:center; }

/* the kicker over a project step ("Sneaker details") */
.iq__kick{ margin:0 0 calc(.3rem - var(--s4)); font-size:.74rem; font-weight:700; letter-spacing:.12em;
           text-transform:uppercase; color:var(--ink-3); }

/* the five party lengths over the option cards */
.iq__guide{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0; padding:0; list-style:none; }
.iq__guide li{ padding:.42rem .75rem; border-radius:var(--r-sm); background:var(--paper-2); font-size:.84rem; line-height:1.3; color:var(--ink-2); }
.iq__guide b{ color:var(--ink); margin-right:.2rem; }

/* her notice colours, in our palette: pink = heads-up, mint = good news, info = how it works, danger = over the limit */
.iq .notice strong{ color:var(--ink); }
.iq .notice--pink{ border-left-color:var(--m); }
.iq .notice--mint{ border-left-color:var(--blue); }
.iq .notice--info{ border-left-color:var(--c); }
.iq .notice--danger{ border-left-color:var(--m-txt); color:var(--ink); }
.iq__cap, .iq__grp{ display:grid; gap:.6rem; }
.iq__policy{ margin:0; font-size:.88rem; line-height:1.5; color:var(--ink-2); }

/* her (i) button on a party card, and the dialog it opens */
.opt:has(.opt__i){ grid-template-columns:auto 1fr auto; }
.opt__i{ display:grid; place-items:center; width:1.75rem; height:1.75rem; padding:0; border-radius:50%;
         border:1.5px solid var(--ink-3); background:var(--card); color:var(--ink); cursor:pointer;
         font:italic 700 .9rem/1 var(--display); transition:background var(--fast) linear, border-color var(--fast) linear; }
.opt__i:hover{ background:var(--y); border-color:var(--ink); }
.opt__i:focus-visible{ outline:3px solid var(--y); outline-offset:2px; }
.iq__dlg{ width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:0; border:0;
          border-radius:var(--r-md); background:var(--card); color:var(--ink); box-shadow:var(--sh-3); }
.iq__dlg::backdrop{ background:rgba(20,20,24,.45); }
.iq__dlg-in{ position:relative; display:grid; gap:.75rem; padding:1.5rem 1.4rem 1.35rem; }
.iq__dlg h3{ margin:0 2.4rem 0 0; font-family:var(--display); font-weight:800; font-size:1.45rem; letter-spacing:-.02em; line-height:1.1; }
.iq__dlg-body p{ margin:0 0 .6rem; font-size:.95rem; line-height:1.5; }
.iq__dlg-body p:last-child{ margin-bottom:0; }
.iq__dlg-x{ position:absolute; top:.7rem; right:.7rem; width:2.3rem; height:2.3rem; border:0; border-radius:50%;
            background:var(--paper-2); color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer; }
.iq__dlg-x:hover{ background:var(--y); }

@media (max-width:640px){
  .opts--2{ grid-template-columns:1fr; }
  .iq .form__row{ grid-template-columns:1fr; }
  .iq__sum div{ grid-template-columns:1fr; gap:.15rem; }
}