/* ============================================================================
   DELTAQUANT · BUILD YOUR BAG (studio) · revision 2, light theme
   The configurator is the page: the bag (sticky) on the left, white control
   panel on the right, accent fills for every active option, one big accent
   button. Owner: studio. Reuses the design-system classes from site.css.
   ============================================================================ */

.studio-hero { padding-bottom: clamp(8px, 2vh, 24px); }
.studio-hero .wrap { display: grid; gap: 18px; }
.studio-hero .h-display { max-width: 12ch; }
.studio-hero .lede { margin: 6px 0 0; }
.studio-section { padding-top: clamp(16px, 3vh, 40px); }
.studio-next .label { margin: 0 0 10px; }
.studio-next p { margin: 0; }

.studio {
  --t-seg: 220ms; --t-xf: 600ms; --t-pulse: 600ms; /* control slide · variety crossfades · callout pulse; reduced motion shortens them below */
  --studio-warn: #8A5A12; /* amber that reads on white (5.9:1) */
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 42%, 500px); gap: clamp(24px, 3vw, 56px); align-items: start;
  color: var(--ink); color-scheme: light;
}
.studio--static { min-height: 60vh; }
.studio__panel--static { display: grid; gap: 18px; }

/* ------------------------------------------------------------ the bag (left, sticky while the controls scroll) */
.studio__visual { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 18px; }
.studio__bag {
  position: relative; overflow: hidden; border-radius: 24px; background: var(--bg-2); border: 1px solid var(--line-2);
  aspect-ratio: 4 / 3; max-height: calc(100svh - var(--nav-h) - 190px); min-height: 320px; width: 100%;
  view-transition-name: hero-bag;
}
.studio__film { position: absolute; inset: 0; }
.studio__bag .film-lcp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 400ms var(--ease); }
.studio__bag .film-lcp.is-hidden { opacity: 0; pointer-events: none; }
.studio__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  transition: opacity var(--t-xf) var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, transparent 11%, #000 34%, #000 66%, transparent 89%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 11%, #000 34%, #000 66%, transparent 89%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.studio__canvas.is-on { opacity: 1; }
.studio__bag-top, .studio__bag-foot { position: absolute; left: 18px; right: 18px; display: flex; pointer-events: none; }
.studio__bag-top { top: 18px; justify-content: flex-start; align-items: start; }
.studio__bag-foot { bottom: 18px; justify-content: flex-end; align-items: end; }
.studio__bag-top .badge { font-size: 12px; padding: .6em .9em; white-space: nowrap; box-shadow: 0 6px 18px rgba(11,18,32,.08); }
.studio__line-chip { max-width: 100%; min-width: 0; white-space: normal; text-align: right; line-height: 1.3; box-shadow: 0 6px 18px rgba(16,88,152,.18); }
.studio__xf { position: relative; display: inline-grid; }
.studio__xf > * { grid-area: 1 / 1; transition: opacity var(--t-xf) var(--ease); }
.studio__xf > [data-v]:not(.is-on) { opacity: 0; pointer-events: none; }
/* variety identifiers are written as specs.json spells them (indA, indB), even inside uppercase badges and controls; SI units (L, kg) keep their case too */
.studio .studio__id, .studio .readout__unit { text-transform: none; }
/* the amber / violet tints stay on the badges only; the badge text is deepened so it reads on its tint (indA 5.5:1, indB 4.9:1) */
.studio .badge--indA { color: #8A4A12; }
.studio .badge--indB { color: #3F42B0; }

/* readouts under the bag */
.studio__readouts { display: flex; flex-wrap: wrap; gap: 16px 20px; padding: 20px 24px; background: #fff; border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--shadow); }
.studio__readout { flex: 1 1 0; min-width: max-content; display: grid; gap: 8px; align-content: start; }
.studio__readout .label { margin: 0; }
.studio__readout .readout--lg .readout__value { font-size: clamp(24px, 2.2vw, 34px); font-weight: 500; letter-spacing: -.01em; line-height: 1; }
.studio__readout .readout--lg .readout__unit { font-size: 11px; }
.studio__readout-row { display: grid; gap: 8px; justify-items: start; }
.studio__confirm { font: 600 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--studio-warn); padding: .55em .7em; border: 1px dashed currentColor; border-radius: 999px; white-space: nowrap; opacity: 0; transition: opacity 240ms var(--ease); }
.studio__confirm.is-on { opacity: 1; }

/* ------------------------------------------------------------ controls (right) */
.studio__panel { --panel-gap: 26px; background: #fff; border: 1px solid var(--line-2); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(22px, 2.4vw, 36px); display: grid; gap: var(--panel-gap); align-content: start; min-width: 0; }
.studio__group { display: grid; gap: 12px; }
.studio__group + .studio__group, .studio__group + .studio__result { padding-top: 24px; border-top: 1px solid var(--line-2); }
.studio__group-head { margin: 0; font: 600 11px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.studio__hint { margin: 0; font: 400 13px/1.5 var(--font-body); color: var(--ink-2); min-height: 1.5em; }
.studio__hint--mono { font: 500 11px/1.5 var(--font-mono); letter-spacing: .06em; }
.studio__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.studio__row > .seg { flex: 1 1 220px; min-width: min-content; }
.studio__row .btn--sm { white-space: nowrap; margin-left: auto; }
.studio__row > .studio__callout { margin-left: auto; }

/* segmented controls: an accent thumb slides under the checked option */
.studio .seg { background: var(--bg-2); border-color: var(--line); position: relative; isolation: isolate; }
.studio .seg--grow { display: flex; }
.studio .seg--grow .seg__opt { flex: 1 1 auto; text-align: center; white-space: nowrap; padding-inline: .8em; }
.studio .seg__thumb { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 999px; background: var(--accent); opacity: 0; transition: transform var(--t-seg) var(--ease), width var(--t-seg) var(--ease), opacity var(--t-seg) var(--ease); z-index: 0; will-change: transform; box-shadow: 0 6px 16px rgba(16,88,152,.28); }
.studio .seg.has-thumb .seg__thumb { opacity: 1; }
.studio .seg__opt { position: relative; z-index: 1; color: var(--ink-2); transition: color var(--t-seg) var(--ease), background var(--t-seg) var(--ease), transform 180ms var(--ease); }
.studio .seg__opt:hover { color: var(--accent); }
.studio .seg__opt:active { transform: scale(.985); }
.studio .seg__opt[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
.studio .seg.has-thumb .seg__opt[aria-checked="true"] { background: transparent; }
.studio .seg__opt:focus-visible { outline-offset: -3px; outline-color: var(--ink); }

/* flange close-up beside the port control */
.studio__callout { display: grid; justify-items: center; gap: 6px; flex: 0 0 auto; }
.studio__callout-ring { position: relative; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--bg-2); box-shadow: 0 0 0 1.5px var(--line), 0 10px 24px rgba(11,18,32,.12); transition: transform var(--t-pulse) var(--ease-out), box-shadow var(--t-pulse) var(--ease); }
.studio__callout.is-ic .studio__callout-ring { box-shadow: 0 0 0 1.5px var(--accent), 0 10px 24px rgba(16,88,152,.2); }
.studio__callout-ring canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.studio__callout-ring.is-pulse { transform: scale(1.06); }
.studio__callout-label { font: 600 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* kit contents: a vertical radio list, accent when chosen */
.studio__kits { display: grid; gap: 6px; }
.kit-opt { display: grid; grid-template-columns: 16px 1fr; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff; text-align: left; font: 500 14px/1.3 var(--font-body); color: var(--ink-2); transition: background var(--t-seg) var(--ease), color var(--t-seg) var(--ease), border-color var(--t-seg) var(--ease), transform 180ms var(--ease); min-height: 46px; }
.kit-opt i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink-3); display: grid; place-items: center; transition: border-color var(--t-seg) var(--ease), background var(--t-seg) var(--ease); }
.kit-opt i::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--t-seg) var(--ease-out); }
.kit-opt:hover { color: var(--accent); border-color: var(--accent); }
.kit-opt:active { transform: scale(.99); }
.kit-opt[aria-checked="true"] { color: var(--accent); background: var(--accent-tint); border-color: var(--accent); font-weight: 600; }
.kit-opt[aria-checked="true"] i { background: var(--accent); border-color: var(--accent); }
.kit-opt[aria-checked="true"] i::after { transform: scale(1); }
.studio__group--kit { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: calc(-1 * var(--panel-gap)); transition: grid-template-rows 420ms var(--ease), opacity 320ms var(--ease), margin-top 420ms var(--ease); padding-top: 0 !important; border-top: 0 !important; }
.studio__group--kit.is-on { grid-template-rows: 1fr; opacity: 1; margin-top: 0; transition: grid-template-rows 480ms var(--ease), opacity 420ms var(--ease) 80ms, margin-top 480ms var(--ease); }
.studio__kit-inner { min-height: 0; overflow: hidden; display: grid; gap: 12px; padding: 6px; margin: -6px; }
.studio__group--kit.is-on .studio__kit-inner { padding-top: 30px; margin-top: -6px; border-top: 1px solid var(--line-2); }

/* fields */
.studio .field input { min-height: 46px; }
.studio .field--units { max-width: 220px; }
.studio .field--units input { font-family: var(--font-mono); letter-spacing: .04em; }
.studio__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.studio__preview-label { margin: 6px 0 0; }

/* overwrap label preview */
.studio__label {
  width: min(100%, 300px); justify-self: start;
  background: #FCFCFC; color: var(--ink); border: 1px solid var(--line); border-radius: 3px;
  padding: 12px 14px 12px; transform: rotate(-1deg); transform-origin: 0 100%;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 34px rgba(11,18,32,.12), 0 2px 6px rgba(11,18,32,.06);
  font: 400 10px/1.5 var(--font-mono); letter-spacing: .06em; display: grid; gap: 6px; position: relative;
}
.studio__label::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 9px); opacity: .5; }
.studio__label-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 6px; }
.studio__label-name { font-weight: 600; letter-spacing: .12em; font-size: 9px; text-transform: none; } /* the product name keeps its own case: its SI unit is mm, not MM */
.studio__label .badge { font-size: 9px; padding: .35em .55em; }
.studio__label-row { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: baseline; border-top: 1px solid var(--line-2); padding-top: 5px; }
.studio__label-row span:first-child { text-transform: uppercase; letter-spacing: .14em; font-size: 8.5px; color: var(--ink-2); }
.studio__label-row b { font-weight: 600; font-size: 12px; letter-spacing: .04em; overflow-wrap: anywhere; text-transform: none; }
.studio__label-row b.is-default { color: var(--ink-2); font-weight: 500; }
.studio__label-foot { font-size: 8.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2); border-top: 1px solid var(--line-2); padding-top: 5px; }

/* result: the code in the accent, the spec card, the one big button */
.studio__result { display: grid; gap: 14px; }
#studio-spec-title { margin-top: 12px; }
.studio__code, #studio-code { margin: 0; font: 500 clamp(17px, 1.3vw, 21px)/1.45 var(--font-mono); letter-spacing: .02em; color: var(--accent); text-transform: none; overflow-wrap: anywhere; }
.studio .spec-table { font-size: 14px; }
.studio .spec-table th, .studio .spec-table td { padding: .7em 0; }
.studio .spec-table th { width: 40%; }
.studio .spec-table td { color: var(--ink); }
.studio .spec-table td .readout { font-size: 14px; }
.studio .spec-table td .readout__unit { text-transform: none; letter-spacing: .06em; font-size: .85em; }
.studio .spec-table td small { display: block; font: 400 11px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--ink-2); margin-top: 2px; }
.studio .spec-table tr[data-key="max_load"] small { color: var(--studio-warn); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
.studio__request { width: 100%; min-height: 62px; font-size: 14px; line-height: 1.25; text-align: center; margin-top: 10px; box-shadow: 0 14px 34px rgba(16,88,152,.28); }
.studio__request:hover { box-shadow: 0 18px 40px rgba(16,88,152,.34); }
.studio__after { margin: 0; font: 500 11px/1.5 var(--font-mono); letter-spacing: .08em; color: var(--ink-2); text-align: center; }

/* ------------------------------------------------------------ stacked (under 900 px): the bag on top, the controls below */
@media (max-width: 899px) {
  .studio { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .studio__visual { position: static; gap: 14px; }
  .studio__bag { aspect-ratio: 16 / 9; max-height: 62svh; min-height: 0; border-radius: 20px; }
  .studio__canvas { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%); }
  .studio__bag-top, .studio__bag-foot { left: 14px; right: 14px; }
  .studio__bag-top { top: 14px; }
  .studio__bag-foot { bottom: 14px; }
  .studio__readouts { padding: 16px 18px; gap: 14px 16px; }
  .studio__readout .readout--lg .readout__value { font-size: 26px; }
  .studio__panel { border-radius: 20px; }
  .studio__fields { grid-template-columns: 1fr; }
  .studio__row > .seg { flex-basis: 100%; }
}
@media (max-width: 599px) {
  .studio__line-chip { display: none; } /* the kit list below names it; the bag keeps one badge */
}
@media (max-width: 479px) {
  .studio .seg--grow .seg__opt { font-size: 11px; letter-spacing: .08em; padding-inline: .5em; }
  .studio__request { font-size: 13px; }
}

/* ------------------------------------------------------------ motion preferences
   Opacity only: the thumb, the kit list and the callout snap, crossfades shorten to 240 ms.
   Honoured both through the OS setting and through the engine's reduced-motion path
   (?nomotion=1 sets html.reduced-motion). The two blocks must stay identical. */
@media (prefers-reduced-motion: reduce) {
  .studio { --t-seg: 1ms; --t-xf: 240ms; --t-pulse: 1ms; }
  .studio .seg__opt, .kit-opt { transition-duration: 1ms; }
  .studio__group--kit, .studio__group--kit.is-on { transition: opacity 240ms var(--ease); }
  .studio__request, .studio__request:hover { transform: none; }
}
html.reduced-motion .studio { --t-seg: 1ms; --t-xf: 240ms; --t-pulse: 1ms; }
html.reduced-motion .studio .seg__opt, html.reduced-motion .kit-opt { transition-duration: 1ms; }
html.reduced-motion .studio__group--kit, html.reduced-motion .studio__group--kit.is-on { transition: opacity 240ms var(--ease); }
html.reduced-motion .studio__request, html.reduced-motion .studio__request:hover { transform: none; }