/* DRAFT v2a 10-26 (Tom: "is that the best we got"; gadget picked INK). Tokens only (site.css). Two beats: DONE (drawn check, heading, order line), then the review ASK as the hero. */
.war-reg__form:has(.war-form.is-registered) { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.war-form.is-registered { max-width: none; }
.war-confirm {
  display: grid; width: 100%; padding: var(--s4) 0; scroll-margin-top: calc(var(--s16) + var(--s6));
  grid-template-columns: 1fr auto; grid-template-areas: "done done" "ask robot"; column-gap: var(--s4); row-gap: var(--s8); align-items: end;
}
.war-confirm:focus, .war-confirm:focus-visible { outline: 0 !important; box-shadow: none !important; } /* status panel focused by script, not a control */
.war-confirm__done { grid-area: done; align-self: start; display: flex; gap: var(--s5); align-items: center; padding-bottom: var(--s8); border-bottom: 1px solid color-mix(in srgb, var(--on-dark) 20%, transparent); }
.war-confirm__check { width: 56px; height: 56px; flex: none; }
.war-confirm__disc { fill: var(--lime); }
.war-confirm__tick { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: war-tick 0.6s var(--ease) 0.15s both; }
@keyframes war-tick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.war-confirm__head { min-width: 0; }
.war-confirm__h { margin: 0 0 var(--s2); font-size: var(--fs-h2); line-height: 1.1; color: var(--on-dark); text-wrap: balance; }
.war-confirm__p { margin: 0; font-size: var(--fs-body); line-height: 1.5; max-width: 38rem; color: color-mix(in srgb, var(--on-dark) 80%, transparent); }
.war-confirm__ask { grid-area: ask; align-self: end; display: grid; gap: var(--s3); justify-items: start; }
.war-confirm__line { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; color: var(--on-dark); text-wrap: balance; }
.war-confirm__why { margin: 0; font-size: var(--fs-body); line-height: 1.5; max-width: 34rem; color: color-mix(in srgb, var(--on-dark) 80%, transparent); }
.war-confirm__cta { margin-top: var(--s2); min-height: 56px; padding-inline: var(--s10); }
.war-confirm__cta:focus-visible { outline: 3px solid var(--on-dark); outline-offset: 3px; }
.war-confirm__robot { grid-area: robot; align-self: end; justify-self: end; width: auto; height: 112px; }
/* very small phones (320 px): the button must not wrap, so the ask takes the full width and Gadget drops below, right-aligned */
@media (max-width: 23.75rem) {
  .war-confirm { grid-template-columns: 1fr; grid-template-areas: "done" "ask" "robot"; }
  .war-confirm__cta { white-space: nowrap; padding-inline: var(--s8); }
  .war-confirm__robot { height: 96px; margin-top: calc(var(--s6) * -1); }
}
@media (min-width: 48rem) {
  .war-confirm { grid-template-columns: 1fr auto; grid-template-areas: "done robot" "ask robot"; column-gap: var(--s12); padding: var(--s8) var(--s6); align-items: center; }
  .war-confirm__robot { height: 300px; align-self: center; }
}
@media (prefers-reduced-motion: reduce) { .war-confirm__tick { animation: none; } }