/* =========================================================
   GiC · Pricing-style Learning Rail + Scroll UX
   Final override; loaded last.
   ========================================================= */

/* ---- Pricing-like rail ---- */
[data-gic-layer-tabs]{
  position:relative!important;
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  gap:4px!important;
  padding:6px!important;
  border:1px solid #ded7ca!important;
  border-radius:22px!important;
  background:rgba(250,248,243,.96)!important;
  box-shadow:
    0 10px 24px rgba(21,68,62,.08),
    inset 0 1px 0 rgba(255,255,255,.85)!important;
}

/* The moving pill, like Pricing tabs: dark GiC green. */
[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;
  border:1px solid rgba(11,82,75,.22)!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,#0f776d 0%,#0b5d55 100%)!important;
  box-shadow:
    0 8px 18px rgba(11,83,76,.20),
    inset 0 1px 0 rgba(255,255,255,.14)!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;
}

[data-gic-layer-tabs] button[data-gic-layer]{
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
  border:0!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.42)!important;
  color:#7f8c88!important;
  box-shadow:none!important;
  transition:color .18s ease,opacity .18s ease!important;
}

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

[data-gic-layer-tabs] button[data-gic-layer].gic-pricing-pill-active svg,
[data-gic-layer-tabs] button[data-gic-layer].gic-prime-content svg,
[data-gic-layer-tabs] button[data-gic-layer].active svg,
[data-gic-layer-tabs] button[data-gic-layer].is-active svg,
[data-gic-layer-tabs] button[data-gic-layer][aria-selected="true"] svg,
[data-gic-layer-tabs] button[data-gic-layer][aria-pressed="true"] svg{
  color:#fff!important;
}

/* No-content tabs: still visible, but clearly deactivated. */
[data-gic-layer-tabs] button[data-gic-layer]:disabled,
[data-gic-layer-tabs] button[data-gic-layer][aria-disabled="true"]{
  background:rgba(255,255,255,.22)!important;
  color:#b8bfbc!important;
  opacity:.62!important;
}

/* ---- Easier page scrolling ---- */
/* The previous internal scrollers used "contain", which can make mobile swipes
   feel stuck at the top/bottom. Allow scroll chaining back to the page. */
html.gic-study-scroll-ux,
html.gic-study-scroll-ux body{
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch;
}

html.gic-study-scroll-ux .gic-ah-content,
html.gic-study-scroll-ux [data-gic-speech-panel],
html.gic-study-scroll-ux [data-gic-layer-drawer],
html.gic-study-scroll-ux [data-gic-layer-drawer] *,
html.gic-study-scroll-ux .gic-ah-notes,
html.gic-study-scroll-ux .gic-layer-panel{
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch;
}

/* Let an inner card scroller hand the gesture to the page at its boundary. */
html.gic-study-scroll-ux .gic-ah-content{
  overscroll-behavior: auto!important;
}

/* ---- Slightly thicker custom page-scroll indicator ---- */
.gic-page-scroll-indicator{
  right:4px!important;
  width:8px!important;
  background:rgba(13,91,82,.16)!important;
  border-radius:999px!important;
}
.gic-page-scroll-indicator-thumb{
  width:100%!important;
  min-height:40px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#147d72,#0a5c54)!important;
  box-shadow:0 2px 8px rgba(13,75,68,.22)!important;
}

@media(max-width:560px){
  .gic-page-scroll-indicator{
    right:3px!important;
    width:7px!important;
  }
  .gic-page-scroll-indicator-thumb{
    min-height:38px!important;
  }
}