/* ==========================================================================
   TS LAB interactive components
   Loaded after style.css, only on pages that also load assets/interactive.js.
   Tokens, borders and shadows come from style.css. Nothing here is required
   for the page to be readable: every component renders its default state in
   HTML and this file only dresses it.
   ========================================================================== */

/* 1. Progressive enhancement ------------------------------------------------
   assets/interactive.js sets .has-ix on <html>. Controls that do nothing
   without JavaScript stay hidden until it runs. */
.ix-only{display:none}
.has-ix .ix-toggle{display:flex}
.has-ix .ix-only{display:block}

.ix-note{font-size:13px;line-height:1.45;color:var(--gray);margin:var(--s-2) 0 0}
.section--blue .ix-note,.section--dark .ix-note{color:inherit}
.ix-legendline{font-size:12px;letter-spacing:.02em;color:var(--gray);margin:var(--s-1) 0 0}
.section--blue .ix-legendline{color:var(--dark)}

/* compact sample markers: inside a control or a chart label the dotted rule
   carries the meaning, the word would not fit */
.ix-compact .dummy::after{content:none}
.ix-compact .dummy{border-bottom:2px dotted var(--blue);cursor:help}
.ix-offer .dummy::after,.ix-tl .dummy::after{content:none}
.ix-offer .dummy,.ix-tl .dummy{border-bottom:2px dotted var(--blue-btn)}

/* 2. Segmented toggle ------------------------------------------------------- */
.ix-toggle{display:none;flex-wrap:wrap;border:var(--border);background:var(--white);width:-moz-fit-content;width:fit-content;max-width:100%}
.ix-toggle__btn{
  appearance:none;-webkit-appearance:none;
  background:var(--white);color:var(--dark);border:0;border-right:2px solid var(--dark);
  font-family:var(--font-b);font-weight:600;font-size:14px;line-height:1.2;
  min-height:44px;padding:10px 14px;cursor:pointer;
}
.ix-toggle__btn:last-child{border-right:0}
.ix-toggle__btn[aria-pressed="true"]{background:var(--blue);color:var(--dark)}
.ix-toggle__btn:hover{background:var(--light)}
.ix-toggle__btn[aria-pressed="true"]:hover{background:var(--blue)}
.ix-toggle__cap{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.ix-toggle__btn[aria-pressed="true"] .ix-toggle__cap{color:var(--dark)}

/* 3. Hero offer card -------------------------------------------------------- */
.hero__row--offer{align-items:flex-start;gap:var(--s-4)}
.hero__row--offer .hero__inner{flex:1 1 520px;max-width:100%}
.ix-offer{
  flex:1 1 360px;max-width:420px;width:100%;
  background:var(--white);color:var(--dark);
  border:var(--border);box-shadow:var(--shadow);
  padding:var(--s-3);margin-top:var(--s-4);
}
@media(min-width:900px){.ix-offer{margin-top:0}}
.ix-offer__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-2);border-bottom:2px solid var(--dark);padding-bottom:var(--s-2);margin-bottom:var(--s-2)}
.ix-offer__title{font-family:var(--font-h);font-weight:700;font-size:18px;line-height:1.15;margin:0}
.ix-offer__ref{display:block;font-family:var(--font-b);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-top:4px}
.ix-stamp{
  margin:0;flex:0 0 auto;max-width:112px;text-align:center;
  border:2px solid var(--blue-btn);color:var(--blue-btn);
  font-family:var(--font-b);font-weight:600;font-size:10px;line-height:1.15;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 7px;transform:rotate(-4deg);
}
.ix-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);padding:8px 0;border-bottom:1px solid var(--light);font-size:14px}
.ix-row__k{color:var(--gray);font-weight:500;flex:0 1 auto}
.ix-row__v{font-weight:600;text-align:right;flex:1 1 auto}
.ix-row--price{border-bottom:0;padding-top:var(--s-2)}
.ix-price{font-family:var(--font-h);font-weight:700;font-size:30px;line-height:1;display:inline-block}
.ix-price__unit{font-family:var(--font-b);font-weight:500;font-size:12px;color:var(--gray);display:block;margin-top:4px}
.ix-offer .doc-list{margin:0}
.ix-offer .doc-list li{padding:6px 0 6px 28px;font-size:13.5px;border-bottom:0}
.ix-offer .doc-list li::before{top:13px;width:14px;height:7px}
.ix-offer__sub{font-family:var(--font-b);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);margin:var(--s-2) 0 2px}
.ix-offer__foot{border-top:2px solid var(--dark);margin:var(--s-2) 0 0;padding-top:var(--s-2);font-size:13px;line-height:1.45;color:var(--gray)}

@keyframes ix-swap{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.ix-swap{animation:ix-swap .22s ease both}

/* 4. Capsule fit check ------------------------------------------------------ */
.ix-fit{background:var(--white);color:var(--dark);border:var(--border);box-shadow:var(--shadow);padding:var(--s-3)}
.ix-fit h3,.ix-fit h4{color:var(--dark)}
.ix-fit__legend{font-family:var(--font-b);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);padding:0;margin:0 0 var(--s-1)}
.ix-fit fieldset{border:0;padding:0;margin:0 0 var(--s-3);min-width:0}
.ix-ing{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--light);position:relative}
.ix-ing__remove{position:absolute;top:8px;right:0;width:32px;height:32px;border:2px solid var(--dark);background:var(--white);color:var(--dark);font:700 18px/1 var(--font-h);cursor:pointer;display:none}
.has-ix .ix-ing__remove{display:inline-flex;align-items:center;justify-content:center}
.ix-ing__remove:hover{background:var(--dark);color:var(--white)}
.ix-ing__remove:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.ix-ing__name{grid-column:1 / -1}
@media(min-width:720px){
  .ix-ing{grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr)) 36px;align-items:end}
  .ix-ing__remove{position:static;align-self:end;margin-bottom:6px}
  .ix-ing__name{grid-column:auto}
}
.ix-field label{display:block;font-family:var(--font-b);font-weight:600;font-size:12px;line-height:1.3;margin-bottom:4px;color:var(--gray)}
.ix-field input,.ix-field select{
  width:100%;min-height:44px;padding:8px 10px;
  font-family:var(--font-b);font-size:15px;color:var(--dark);background:var(--white);
  border:var(--border);border-radius:0;
}
.ix-field input:focus,.ix-field select:focus{outline:3px solid var(--blue);outline-offset:0}
.ix-fit .btn{margin:var(--s-2) 0 var(--s-3)}
.ix-fit fieldset.u-mt-3{margin-top:var(--s-3)}
.ix-fit__opts{display:grid;grid-template-columns:1fr;gap:var(--s-2);margin-top:var(--s-3)}
@media(min-width:720px){.ix-fit__opts{grid-template-columns:repeat(3,minmax(0,1fr))}}

.ix-out{display:grid;grid-template-columns:1fr;gap:var(--s-2);margin-top:var(--s-3)}
@media(min-width:620px){.ix-out{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ix-out{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ix-out__tile{border-left:4px solid var(--dark);padding-left:var(--s-2)}
.ix-out__num{font-family:var(--font-h);font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.05;display:block}
.ix-out__label{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);display:block;margin-top:6px}
.ix-verdict{border-left:4px solid var(--blue);background:var(--light);padding:var(--s-2) var(--s-3);margin-top:var(--s-3)}
.ix-verdict p{margin:0}
.ix-verdict p + p{margin-top:6px}

.ix-bars{margin-top:var(--s-3)}
.ix-bar{margin:0 0 12px}
.ix-bar__label{display:flex;justify-content:space-between;gap:var(--s-2);font-size:13px;font-weight:500;margin-bottom:4px}
.ix-bar__track{position:relative;height:24px;border:2px solid var(--dark);background:var(--white);overflow:hidden}
.ix-bar__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--blue);transition:width .25s ease}
.ix-bar__fill--fit{background:var(--blue)}
.ix-bar__fill--low{background:var(--light)}
.ix-bar__fill--over{background:var(--dark)}
.ix-bar__mark{position:absolute;top:0;bottom:0;left:85%;width:0;border-left:2px dashed var(--dark)}
.ix-bar__v{font-variant-numeric:tabular-nums}
.ix-bar--sel .ix-bar__track{box-shadow:3px 3px 0 var(--dark)}

/* 5. Price split chart ------------------------------------------------------ */
.ix-chart{border:var(--border);box-shadow:var(--shadow);background:var(--white);padding:var(--s-3)}
.ix-chart__svg{display:block;width:100%;height:auto}
.ix-chart__total{margin-top:var(--s-3)}
.ix-chart__totalnum{font-family:var(--font-h);font-weight:700;font-size:clamp(26px,4vw,38px);line-height:1}
.ix-chart__totallabel{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--gray)}
.ix-legend{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:620px){.ix-legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ix-legend{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ix-legend li{display:flex;align-items:center;gap:10px;font-size:14px;border-bottom:1px solid var(--light);padding-bottom:6px}
.ix-legend svg{flex:0 0 auto;display:block}
.ix-legend__v{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}

/* 6. Reorder timeline ------------------------------------------------------- */
.ix-tl-wrap{border:var(--border);box-shadow:var(--shadow);background:var(--white);color:var(--dark);padding:var(--s-3)}
.ix-tl-row{margin-bottom:var(--s-3)}
.ix-tl-row h4{margin:0 0 6px;font-size:17px}
.ix-tl{position:relative;height:42px;border:2px solid var(--dark);background:var(--white);overflow:hidden}
.ix-tl__seg{
  position:absolute;top:0;bottom:0;border-right:2px solid var(--dark);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--font-b);font-weight:600;font-size:11px;line-height:1.1;text-align:center;
  padding:0 2px;white-space:nowrap;transition:left .25s ease,width .25s ease;
}
.ix-tl__seg--a{background:var(--light)}
.ix-tl__seg--b{background:var(--blue);color:var(--dark)}
.ix-tl__seg--c{background:var(--dark);color:var(--white)}
.ix-tl__seg--rest{background:var(--white)}
.ix-tl__seg--tiny{font-size:0}
.ix-tl__out{position:absolute;top:0;bottom:0;width:5px;margin-left:-2px;background:var(--white);border-left:2px solid var(--dark);border-right:2px solid var(--dark);z-index:3;transition:left .25s ease}
.ix-tl__gapbar{position:relative;height:22px;margin-top:4px}
.ix-tl__gap{
  position:absolute;top:0;bottom:0;background:var(--dark);color:var(--white);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--font-b);font-weight:600;font-size:11px;white-space:nowrap;padding:0 4px;
  transition:left .25s ease,width .25s ease;
}
.ix-tl__gap--none{background:var(--white);color:var(--dark);border:2px solid var(--dark)}
.ix-axis{position:relative;height:20px;margin-top:6px;border-top:2px solid var(--dark)}
.ix-axis span{position:absolute;top:3px;transform:translateX(-50%);font-size:11px;color:var(--gray);white-space:nowrap}
.ix-axis span:first-child{transform:none}
.ix-axis span:last-child{transform:translateX(-100%)}
.ix-slider{margin-top:var(--s-3)}
.ix-slider label{display:block;font-family:var(--font-b);font-weight:600;font-size:14px;margin-bottom:6px}
.ix-slider input[type="range"]{width:100%;max-width:460px;accent-color:var(--blue-btn);min-height:44px}
.ix-key{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);font-size:13px}
.ix-key li{display:flex;align-items:center;gap:8px}
.ix-key i{width:18px;height:14px;display:block;border:2px solid var(--dark);flex:0 0 auto}
.ix-key i.k-a{background:var(--light)}
.ix-key i.k-b{background:var(--blue)}
.ix-key i.k-c{background:var(--dark)}
.ix-key i.k-w{background:var(--white)}
.ix-key i.k-out{width:0;height:16px;border:0;border-left:3px solid var(--dark)}

/* 7. Stepper (process.html) -------------------------------------------------- */
.has-ix .steps[data-ix-stepper]{grid-template-columns:1fr;gap:0}
.has-ix .steps[data-ix-stepper] .steps__item{padding:0}
.has-ix .steps[data-ix-stepper] .steps__item:last-child{border-bottom:2px solid var(--dark)}
.ix-step__btn{
  display:flex;align-items:center;gap:var(--s-2);width:100%;
  background:none;border:0;padding:var(--s-3) 0;margin:0;cursor:pointer;text-align:left;
  font-family:var(--font-h);font-weight:700;color:inherit;font-size:inherit;line-height:1.15;
}
.ix-step__btn::after{content:"+";margin-left:auto;flex:0 0 auto;font-family:var(--font-h);font-weight:700;font-size:26px;line-height:1;color:var(--blue-btn)}
.ix-step__btn[aria-expanded="true"]::after{content:"\2013"}
.section--blue .ix-step__btn::after{color:var(--dark)}
.ix-step__btn .steps__num{margin:0;flex:0 0 auto;font-size:clamp(26px,3.4vw,38px)}
.ix-step__panel{padding:0 0 var(--s-3);max-width:760px}
.ix-step__panel > *:last-child{margin-bottom:0}
.ix-step__panel[hidden]{display:none}

/* 8. Certificate popover ----------------------------------------------------- */
.has-ix .cert-badge{position:relative;z-index:1}
.has-ix .cert-badge:hover,.has-ix .cert-badge:focus,.has-ix .cert-badge:focus-within{z-index:30}
.has-ix .ix-pop{z-index:31;
  position:absolute;left:-2px;right:-2px;top:calc(100% - 2px);z-index:20;
  background:var(--white);color:var(--dark);border:var(--border);box-shadow:var(--shadow);
  padding:var(--s-2) var(--s-3);
  visibility:hidden;opacity:0;transition:opacity .12s ease;
}
.has-ix .cert-badge:hover .ix-pop,
.has-ix .cert-badge:focus .ix-pop,
.has-ix .cert-badge:focus-visible .ix-pop,
.has-ix .cert-badge:focus-within .ix-pop{visibility:visible;opacity:1}
.has-ix .ix-pop .cert-badge__meta{display:block;margin-bottom:4px}
.has-ix .ix-pop .cert-badge__meta:last-child{margin-bottom:0}
.ix-pop__hint{
  display:inline-block;margin-top:var(--s-2);
  font-family:var(--font-b);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-btn);
}
@media(hover:none){
  .has-ix .ix-pop{position:static;visibility:visible;opacity:1;box-shadow:none;border:0;padding:0;margin-top:var(--s-2)}
  .ix-pop__hint{display:none}
}

/* narrow screens: the bars stay graphics, the legend and the sentence carry the words */
@media(max-width:760px){
  .ix-tl__seg,.ix-tl__gap{font-size:0}
}


/* 9. Reduced motion ---------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .ix-swap{animation:none}
  .ix-bar__fill,.ix-tl__seg,.ix-tl__gap,.ix-tl__out,.has-ix .ix-pop{transition:none}
}

/* 10. Print ------------------------------------------------------------------ */
@media print{
  .ix-toggle,.ix-slider,.ix-pop__hint{display:none !important}
  .ix-offer,.ix-fit,.ix-chart,.ix-tl-wrap{box-shadow:none;border:1pt solid #000;break-inside:avoid}
  .ix-step__panel[hidden]{display:block !important}
  .has-ix .ix-pop{position:static;visibility:visible;opacity:1;border:0;box-shadow:none;padding:0}
}