/* Quote builder: "Email me this quote" inside the dark total card.
   The send block is preview-only (data-preview-only) until the owner approves it. */

/* The numbers are not a live region (the total tweens frame by frame): #qb-status announces the settled total once. */
.qb-live { display: flex; flex-direction: column; gap: 16px; }

/* Print and Clear (plus the mailto link on live) share the row equally, however many show. */
.qb-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

.qs { display: flex; flex-direction: column; gap: 10px; }
.qs [hidden] { display: none !important; } /* the flex/grid rules below would otherwise override [hidden] */
.qs-open, .qs-submit { width: 100%; background: var(--teal); color: var(--on-teal); border: 1px solid var(--teal); border-radius: 8px; padding: 12px 16px; font-size: 15px; font-weight: 600; transition: background .15s, border-color .15s, color .15s; }
/* aria-disabled rather than disabled: the buttons keep focus, and their description says why they can't be used. */
.qs-open:hover:not([aria-disabled="true"]), .qs-submit:hover:not([aria-disabled="true"]) { background: var(--teal-hover); border-color: var(--teal-hover); }
.qs-open[aria-expanded="true"] { background: transparent; color: #fff; border-color: rgba(255,255,255,.22); font-weight: 500; }
.qs-open[aria-expanded="true"]:hover { background: transparent; border-color: #fff; }
.qs-open[aria-disabled="true"], .qs-submit[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.qs-form[aria-busy="true"] .qs-submit { opacity: .75; cursor: progress; }

/* Open, the form makes the total card too tall to stay pinned on laptop-height screens (site.css makes
   .qb-side sticky above 900px): the fields and the button would sit below the fold until the end of the
   module list. So while the form or the confirmation shows, the card scrolls with the page. */
.qb-side:has(.qs-form:not([hidden]), .qs-done:not([hidden])) { position: static; }
.qs-hint { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.7); }

.qs-form { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); color-scheme: dark; }
.qs-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.85); }
.qs-form label small { margin-left: 2px; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.6); }
.qs-form input { width: 100%; min-width: 0; padding: 10px 12px; font-size: 16px; font-weight: 400; /* 16px keeps iOS from zooming in */ color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; }
.qs-form input:hover { border-color: rgba(255,255,255,.4); }
.qs-form input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.qs-form input[aria-invalid="true"] { border-color: #ffb3a0; }
.qs-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.qs-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qs-error { margin: 0; font-size: 14px; line-height: 1.5; color: #ffb3a0; }
.qs-note { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.6); }

.qs-done { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; background: rgba(47,211,181,.14); border: 1px solid rgba(47,211,181,.4); border-radius: 8px; }
.qs-done p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--teal-light); overflow-wrap: anywhere; }
.qs-again { background: none; border: 0; padding: 0; color: #fff; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.qs-again:hover { color: var(--teal-light); }

/* Reveal. Skipped in calm mode (reduced motion or animations switched off). */
html:not(.calm) .qs-form.qs-in, html:not(.calm) .qs-done:not([hidden]) { animation: qs-in .22s ease-out both; }
@keyframes qs-in { from { opacity: 0; transform: translateY(-6px); } }

@media print { .qs { display: none !important; } }