/* Calculator and pre-order builder (loaded only on /flake-calculator/ and
   /pre-order/, after site.css, so it can use site.css tokens). */

/* Form controls are told apart from the panel only by their border, so it
   must reach 3:1 (WCAG 1.4.11). Uses the site.css --line-control token when it
   exists; the fallback is the same value: 3.7:1 on --panel and on --ink. */
.field input, .field select, .choice label { border-color: var(--line-control, rgba(198, 205, 216, 0.5)); }
.field input::placeholder { color: var(--muted); opacity: 1; }

/* Calculator ---------------------------------------------------------------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin: 1.6em 0; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc fieldset { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--panel); }
.calc legend { padding: 0 8px; font-family: var(--font-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label, .field .label { font-weight: 600; color: var(--text); }
.field .hint { font-size: 0.9rem; color: var(--muted); }
.field input, .field select { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-sm); border-width: 1px; border-style: solid; background: var(--ink); color: var(--text); font: inherit; }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--blue-glow, var(--link)); outline-offset: 1px; }
.dims { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dims > div { display: grid; gap: 4px; min-width: 0; }
.field .dims label { font-weight: 500; font-size: 0.95rem; color: var(--silver); }
.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-width: 1px; border-style: solid; border-radius: 999px; cursor: pointer; font-weight: 500; }
.choice input { accent-color: var(--blue); width: 18px; height: 18px; }

/* Running result next to the inputs on phones, where the full result card
   sits below the form. */
.calc-peek { display: none; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--blue); border-radius: var(--radius-sm); color: var(--text); }
.calc-peek strong { color: #fff; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .calc-peek { display: block; } }

.result { border: 1px solid var(--blue); border-radius: var(--radius); background: linear-gradient(180deg, rgba(30, 111, 232, 0.14), rgba(30, 111, 232, 0.04)); padding: 20px; min-width: 0; scroll-margin-top: 96px; }
.result .eyebrow { margin-bottom: 4px; }
.result .big { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 8vw, 4.6rem); line-height: 0.9; color: #fff; }
.result .big small { font-size: 0.4em; letter-spacing: 0.04em; }
.result dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 16px 0 0; }
.result dt { color: var(--muted); }
.result dd { margin: 0; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Pre-order builder ------------------------------------------------------- */
.order { list-style: none; padding: 0; margin: 1.2em 0; display: grid; gap: 10px; max-width: 720px; }
.order li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 84px; align-items: center; gap: 14px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.order li.is-target { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.order img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.order label { color: var(--text); font-weight: 600; line-height: 1.3; }
.order label .code { display: block; white-space: nowrap; font-weight: 500; }

.order-hint { max-width: 720px; margin: 1.2em 0 0; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius-sm); color: var(--text); }

.order-actions { display: grid; gap: 14px; justify-items: start; max-width: 720px; }
.order-total { justify-self: stretch; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; padding: 16px; border: 1px solid var(--blue); border-radius: var(--radius); color: var(--text); }
.order-count { font-variant-numeric: tabular-nums; }
.order-cost { white-space: nowrap; }
.order-total strong { color: #fff; font-family: var(--font-display); font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.order-freight { font-size: 0.92rem; color: var(--silver); }
.order-status { margin: 0; font-size: 0.95rem; color: var(--text); }
.order-status:empty { display: none; }

/* Phones: the total and the send button stay in view while the rows scroll. */
@media (max-width: 860px) {
  .order-actions {
    position: sticky; bottom: 0; z-index: 5;
    gap: 8px; justify-items: stretch; max-width: none;
    margin: 0 calc(-1 * var(--gutter));
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: var(--ink);
    border-top: 1px solid var(--line-2);
  }
  /* A row brought into view by Tab or by a link lands above the bar, not under it. */
  .order-actions .order-total { padding: 0; border: 0; border-radius: 0; gap: 0 12px; }
  .order-actions .order-total strong { font-size: 1.45rem; }
  .order-actions .btn { width: 100%; min-height: 48px; }
}


/* Checkout ------------------------------------------------------------------ */
.checkout { max-width: 820px; }
.co-section { margin: 1.4em 0 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); min-width: 0; }
.co-section legend { padding: 0 8px; font-family: var(--font-label); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.co-section .order { max-width: none; }
.order .line-total { text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.order li.has-boxes { border-color: var(--blue); }
.order .qty-btn { width: 40px; min-height: 44px; }
.order .qty-input { min-height: 44px; }
.order input { scroll-margin-bottom: 150px; }
@media (max-width: 560px) {
  .order li { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; }
  .order img { width: 48px; height: 30px; }
  .order .line-total { grid-column: 2 / -1; text-align: left; font-size: 0.92rem; }
  .order .line-total:empty { display: none; }
}
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.field-grid .wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } }
.field textarea { width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-control, rgba(198, 205, 216, 0.5)); background: var(--ink); color: var(--text); font: inherit; resize: vertical; }
.field textarea:focus-visible { outline: 3px solid var(--blue-glow, var(--link)); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: #ff8a80; box-shadow: inset 0 0 0 1px #ff8a80; }
.field-error { margin: 2px 0 0; color: #ffb4ab; font-weight: 600; font-size: 0.95rem; }
.error-summary { margin: 1.2em 0 0; padding: 14px 18px; border: 2px solid #ff8a80; border-radius: var(--radius-sm); background: var(--panel-2); }
.error-summary h2 { margin: 0 0 8px; font-size: 1.3rem; }
.error-summary ul { margin: 0; padding-left: 1.2em; }
.error-summary a { color: #ffb4ab; font-weight: 600; }
.checks { margin: 4px 0 16px; padding: 0; border: 0; display: grid; gap: 8px; }
.checks legend { padding: 0; margin-bottom: 6px; font-weight: 600; color: var(--text); }
.checks label { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); cursor: pointer; }
.checks input { width: 20px; height: 20px; accent-color: var(--blue); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.checkout .order-actions { margin-top: 1.4em; }
[data-submit][disabled] { opacity: 0.7; cursor: progress; }
.co-note { max-width: 720px; margin-top: 12px; }
.confirm { max-width: 820px; margin-top: 1.4em; }
.confirm h2:focus { outline: none; }
.confirm h2:focus-visible { outline: 3px solid var(--blue-glow, var(--link)); outline-offset: 4px; }
@media print {
  .announce, .site-head, .crumbs, .cta-band, .site-foot, .prose, #faq, .confirm .btn-row, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .confirm, .confirm * { color: #000 !important; background: #fff !important; border-color: #999 !important; }
}