/* AI Compute: the WhatsApp QR and the configuration form on the system and rack pages (Oct 8 2026).
   Linked after ai-compute.css by scripts/build_ai_compute.py; uses that sheet's tokens (--ac-*) and its form classes. */

/* WhatsApp QR, on how-ordering-works and vendor-info */
.ac-wa-qr{margin:0;display:inline-flex;flex-direction:column;align-items:center;gap:10px;padding:18px 18px 14px;background:#fff;border:1px solid var(--ac-line);border-radius:var(--ac-r)}
.ac-wa-qr a{display:block;line-height:0}
.ac-wa-svg{display:block;width:176px;height:176px}
.ac-wa-qr figcaption{font-size:14px;font-weight:600;color:var(--ac-ink-2)}

/* Configuration form, on every system and rack page. Since the second pass (Oct 8 2026) it is the page body under the lead: one block
   per group with a solid header bar, the specifications after it, and the sticky rail carries the live summary (cfg_rail). */
.ac-config{margin-top:30px}
.ac-config > h2{margin:0 0 6px}
.ac-config-lead{margin:0 0 18px;color:var(--ac-ink-2);font-size:16px}
.ac-config .ac-field{margin-bottom:6px}
.ac-config .ac-field label{font-weight:600}
.ac-cfg-group{display:block;margin:0 0 18px;background:#fff;border:2px solid var(--ac-dark);border-radius:var(--ac-r);overflow:hidden}
.ac-cfg-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding:13px 18px;background:var(--ac-dark);color:#fff}
.ac-cfg-head h3{margin:0;font-size:17px;color:#fff}
.ac-cfg-note{font-family:var(--ac-mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9cc0ff}
.ac-cfg-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 22px;padding:20px 18px 12px}
.ac-cfg-fields .ac-field.ac-wide{grid-column:1 / -1}
.ac-cfg-fields select[data-cfg-variant]{border-color:var(--ac-ink);font-weight:600}
details.ac-cfg-more > summary{cursor:pointer;list-style:none}
details.ac-cfg-more > summary::-webkit-details-marker{display:none}
details.ac-cfg-more > summary::after{content:"+";margin-left:auto;font-family:var(--ac-mono);font-weight:700;font-size:18px;line-height:1;color:#fff}
details.ac-cfg-more[open] > summary::after{content:"\2212"}
.ac-config .ac-form > .ac-btn{margin-top:4px}
.ac-cfg-specs{margin-top:34px}
.ac-cfg-specs > h2{margin-bottom:12px}

/* The rail: the price block, then the live summary (price line, quantity, submit button, payment sentence). On a wide screen the rail
   runs the height of the configurator and the summary sticks under the header while the page scrolls; its lines scroll inside it.
   The cart line's configuration and notes boxes are filled from the configurator by assets/ai-compute-configure.js, so the price
   block shows only its quantity and Add to cart. */
.ac-cfg-rail{display:flex;flex-direction:column;gap:14px}
.ac-cfg-rail .ac-add-config .ac-wide{display:none}
.ac-cfg-sum{background:#fff;border:2px solid var(--ac-ink);border-radius:var(--ac-r);overflow:hidden}
@media (min-width:901px){
  .ac-product-side.ac-cfg-rail{position:static;align-self:stretch}
  .ac-cfg-sum{position:sticky;top:114px;max-height:calc(100vh - 130px);display:flex;flex-direction:column}
  .ac-cfg-sum > *{flex-shrink:0}
  .ac-cfg-sum > .ac-cfg-lines{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
}
.ac-cfg-sum-head{padding:11px 16px;background:var(--ac-dark);color:#fff}
.ac-cfg-sum-head h2{margin:0;font-size:16px;color:#fff;text-transform:uppercase;letter-spacing:.06em;font-family:var(--ac-mono);font-weight:600}
.ac-cfg-empty{margin:0;padding:14px 16px;font-size:14px;color:var(--ac-ink-2)}
.ac-cfg-lines{margin:0;padding:4px 16px}
.ac-cfg-lines > div{padding:9px 0;border-bottom:1px solid var(--ac-line-2)}
.ac-cfg-lines > div:last-child{border-bottom:0}
.ac-cfg-lines dt{font-family:var(--ac-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-ink-3)}
.ac-cfg-lines dd{margin:2px 0 0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.ac-cfg-sum-foot{border-top:2px solid var(--ac-ink)}
.ac-cfg-price{display:flex;flex-direction:column;gap:2px;margin:0;padding:12px 16px 10px}
.ac-cfg-price span{font-family:var(--ac-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ac-ink-3)}
.ac-cfg-price b{font-family:var(--ac-display);font-size:22px;font-weight:800;letter-spacing:-.01em}
.ac-cfg-qty{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:10px 16px;background:var(--ac-bg);font-size:15px}
.ac-cfg-qty b{font-family:var(--ac-display);font-size:17px}
/* The ship window on a marked row (Ilya, Oct 8 2026): the Available badge and the window of the chosen builder, kept live by the page script */
.ac-cfg-ship{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:10px 16px;border-top:1px solid var(--ac-line-2)}
.ac-cfg-ship span{display:inline-block;padding:3px 9px;background:var(--ac-good);color:#fff;border-radius:4px;font-family:var(--ac-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ac-cfg-ship b{font-family:var(--ac-display);font-size:16px;color:var(--ac-good);text-align:right}
.ac-cfg-act{padding:14px 16px 14px}
.ac-cfg-act .ac-small{margin:10px 0 0}
.ac-cfg-act .ac-btn{display:block;width:100%;text-align:center}
.ac-cfg-act .ac-form-err{margin:0 0 10px;font-size:14px}
.ac-cfg-sent{margin:0;font-weight:600;color:var(--ac-good)}
.ac-cfg-sum [hidden],[data-cfg-submit][hidden],.ac-cfg-bar[hidden]{display:none !important}

/* Phone bar: the price and the submit button stay at the bottom of the screen while the rail sits under the configurator */
.ac-cfg-bar{display:none}
@media (max-width:900px){
  body.ac-page-cfg{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .ac-cfg-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:25;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--ac-dark);color:#fff;border-top:4px solid var(--ac-accent);transition:transform .2s ease}
  .ac-cfg-bar.ac-cfg-bar-off{transform:translateY(110%)}
  .ac-cfg-bar-price{flex:1 1 auto;min-width:0;margin:0;display:flex;flex-direction:column;line-height:1.2}
  .ac-cfg-bar-price small{font-family:var(--ac-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9cc0ff}
  .ac-cfg-bar-price b{font-family:var(--ac-display);font-size:16px;font-weight:800}
  .ac-cfg-bar-ship{font-size:12px;font-weight:600;color:#7fe0a6}
  .ac-cfg-bar .ac-btn{flex:0 0 auto;padding:10px 14px;font-size:14px;white-space:nowrap}
}
.ac-config .ac-config-done{padding:16px 18px;border-radius:6px;background:#eaf6ef;border:1px solid #b9dfc9;color:var(--ac-good);font-weight:600}
.ac-config .ac-config-done p{margin:0}
.ac-config .ac-config-done p + p{margin-top:6px;font-weight:500;color:var(--ac-ink-2)}
.ac-config .ac-turnstile:empty{display:none}
@media (max-width:640px){.ac-cfg-fields{grid-template-columns:minmax(0,1fr);padding:16px 14px 8px}.ac-cfg-head{padding:12px 14px}}

/* The header contact strip carries three links since the WhatsApp link joined; on a phone they share one line */
@media (max-width:420px){.ac-topbar{font-size:12px}.ac-topbar-row{gap:10px}}