/* tabs.css — the site's one tab style.

   Underline tab bar, ported from the YAROOMS partner page (/partners/yarooms)
   which is where the look was settled. Two shapes share it:

     • panel tabs   <div class="etabs" role="tablist"> of <button class="etab"
                    data-panel="…">, swapping .etab-panel siblings
     • scroll-spy   <nav class="etabs"> of <a class="etab"> that jump to
                    sections, with the page's own spy code moving .active

   tabs.js stamps the sliding indicator into every .etabs and keeps it under
   the active tab. Spacing (the padding around the bar) is deliberately left
   to the page — the component owns the look, not the layout.
*/

.etabs{
  display:flex;gap:30px;flex-wrap:wrap;position:relative;
  border-bottom:1px solid var(--line);
}
.etab{
  appearance:none;cursor:pointer;font:inherit;flex-shrink:0;position:relative;
  padding:0 0 14px;border:0;border-radius:0;background:none;
  color:var(--muted);font-size:14px;font-weight:500;
  white-space:nowrap;text-decoration:none;transition:color .2s ease;
}
/* Bolding the active label would reflow the row and nudge every label to
   its right. The hidden ::before holds the bold width open at all times, so
   switching tabs moves the indicator and nothing else. Its text comes from
   data-label, stamped by tabs.js. */
.etab::before{
  content:attr(data-label);display:block;height:0;overflow:hidden;
  visibility:hidden;pointer-events:none;font-weight:600;
}
.etab:hover{color:var(--ink)}
/* .active as well as .is-active: scroll-spy bars set .active, and both
   flavours should light up the same way. */
.etab.is-active,.etab.active{color:var(--ink);font-weight:600}
.etab:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}

/* Deep Authority indicator. Positioned by tabs.js from the active tab's
   offsetLeft/offsetWidth, and eased between the two. */
.etab-slider{
  position:absolute;bottom:-1px;left:var(--x,0);width:var(--w,0);
  height:3px;border-radius:2px;background:var(--ink);pointer-events:none;
  transition:left .32s cubic-bezier(.16,1,.3,1),
             width .32s cubic-bezier(.16,1,.3,1);
}

/* Only one panel is in the DOM flow at a time, so page height never
   reflects the total content behind all the tabs. */
.etab-panel{display:none}
.etab-panel.is-active{display:block;animation:etabIn .35s ease}
@keyframes etabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:760px){
  /* Labels will not all sit on one row at phone widths, so the bar becomes
     a single swipeable strip. No inset padding here: .etab-slider is
     positioned from the padding box while offsetLeft is measured from the
     border box, so an inset would put the indicator out of true. The mask
     fades the right edge, where labels scroll away. */
  .etabs{
    gap:22px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 24px),transparent 100%);
  }
  .etabs::-webkit-scrollbar{display:none}
  .etab{flex:0 0 auto}
}

@media(prefers-reduced-motion:reduce){
  .etab-panel.is-active{animation:none}
  .etab-slider{transition:none}
}