/* =========================================================
   GiC · FINAL Learning Rail
   White rail + green moving pill (matches the A1+ plan switcher)

   NOTE: many older experiment stylesheets on this project touch the
   same [data-gic-layer-tabs] component. Rather than hunt every one
   of them down, every selector below repeats the same attribute
   selector several times (a standard CSS trick) to push its
   specificity above anything a normal single-class/attribute rule
   can produce, so this file wins the cascade regardless of load
   order or of new experiment files added later.
   ========================================================= */

/* Rail background: clean white */
html body [data-gic-layer-tabs][data-gic-layer-tabs][data-gic-layer-tabs]{
  position:relative!important;
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  gap:4px!important;
  padding:6px!important;

  background:#ffffff!important;
  border:1px solid #e3e8e6!important;
  border-radius:24px!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 20px rgba(30,65,59,.08)!important;

  overflow:hidden!important;
}

/* Moving pill: GREEN, rounded, clean */
html body [data-gic-layer-indicator][data-gic-layer-indicator][data-gic-layer-indicator]{
  position:absolute!important;
  top:6px!important;
  bottom:6px!important;
  height:auto!important;

  display:block!important;
  visibility:visible!important;
  opacity:1!important;

  background:linear-gradient(135deg,#1f8f7c,#0e3a35)!important;
  border:1px solid rgba(14,58,53,.9)!important;
  border-radius:18px!important;

  box-shadow:
    0 7px 18px rgba(14,58,53,.28),
    inset 0 1px 0 rgba(255,255,255,.16)!important;

  transition:
    left .24s cubic-bezier(.2,.72,.25,1),
    width .24s cubic-bezier(.2,.72,.25,1),
    transform .24s cubic-bezier(.2,.72,.25,1)!important;

  pointer-events:none!important;
  z-index:1!important;
}

/* All tabs */
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer]{
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
  border:0!important;
  border-radius:17px!important;

  background:transparent!important;
  color:#6f8a84!important;

  box-shadow:none!important;
  opacity:1!important;

  transition:color .18s ease,opacity .18s ease!important;
}

/* Active/current/default-content tab: white text on the green pill */
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer].gic-pricing-pill-active,
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer].gic-prime-content,
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer].gic-active-pill,
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer].active,
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer].is-active,
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer][aria-selected="true"],
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer][aria-pressed="true"]{
  background:transparent!important;
  color:#ffffff!important;
  font-weight:900!important;
}

/* Active icon */
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer].gic-pricing-pill-active svg,
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer].gic-prime-content svg,
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer].gic-active-pill svg,
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer].active svg,
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer].is-active svg,
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer][aria-selected="true"] svg,
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer][aria-pressed="true"] svg{
  color:#ffffff!important;
}

/* Tabs with no content: visible but clearly inactive */
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer]:disabled,
html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer][aria-disabled="true"]{
  color:#c3ccc8!important;
  opacity:.68!important;
  background:transparent!important;
}

/* Explicitly force the pill to the green paint everywhere */
html body [data-gic-layer-tabs][data-gic-layer-tabs] .gic-layer-indicator,
html body [data-gic-layer-tabs][data-gic-layer-tabs] [data-gic-layer-indicator][data-gic-layer-indicator]{
  background:linear-gradient(135deg,#1f8f7c,#0e3a35)!important;
  border-color:rgba(14,58,53,.9)!important;
}

/* Make the rail/pill feel a touch more refined on mobile */
@media(max-width:560px){
  html body [data-gic-layer-tabs][data-gic-layer-tabs][data-gic-layer-tabs]{
    padding:5px!important;
    border-radius:22px!important;
  }

  html body [data-gic-layer-indicator][data-gic-layer-indicator][data-gic-layer-indicator]{
    top:5px!important;
    bottom:5px!important;
    border-radius:17px!important;
  }

  html body [data-gic-layer-tabs][data-gic-layer-tabs] button[data-gic-layer][data-gic-layer]{
    border-radius:16px!important;
  }
}