/* Container */
.cec-tr{ position:relative; width:100%; }

/* Tabs bar (inline, inside the section) */
.cec-tr-nav{
  position:relative;
  display:flex; gap:2rem; justify-content:center; align-items:flex-end;
  padding:0.5rem 1rem;
  margin:0 0 1rem 0;
  color:inherit; /* <-- uses the surrounding text color (so it's visible) */
}

/* baseline under the whole tab row */
.cec-tr-nav::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:currentColor; opacity:.2; border-radius:2px;
  pointer-events:none;
}

/* Tab buttons with animated underline */
.cec-tr-tab{
  position:relative;
  background:transparent; border:none; color:inherit;
  font-weight:600; opacity:.75;
  padding:.25rem .25rem .5rem;
  cursor:pointer;
}
.cec-tr-tab:hover{ opacity:1; }
.cec-tr-tab:focus{ outline:2px solid currentColor; outline-offset:2px; }
.cec-tr-tab::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:3px; background:currentColor;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .25s ease;
  border-radius:2px;
}
.cec-tr-tab.is-active{ opacity:1; }
.cec-tr-tab.is-active::after{ transform:scaleX(1); }

/* Panels */
.cec-tr-panels{ position:relative; }
.cec-tr-panel{ display:block; }
.cec-tr-panel[hidden]{ display:none !important; }