/* GiC Card Tabs Layout Fix v8 */

/*
   Why v7 could collapse on some card types (e.g. Interaction):
   the tabs are absolutely positioned, but their real offsetParent can be a
   narrow positioned wrapper instead of .gic-study-back. JS v8 measures the
   real card and writes the final x/y/width inline. These rules then control
   only appearance and the three equal columns.
*/

.gic-study-back:not([hidden]){
  position:relative !important;
  box-sizing:border-box !important;
  padding-bottom:82px !important;
}

/* Collapse the content drawer only when no layer is open. */
.gic-study-back .gic-layer-drawer,
.gic-study-back .gic-layer-drawer-inner{
  min-height:0 !important;
}

.gic-study-back:not(.gic-has-open-layer) .gic-layer-drawer,
.gic-study-back:not(.gic-has-open-layer) .gic-layer-drawer-inner{
  display:none !important;
  height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

.gic-study-back.gic-has-open-layer .gic-layer-drawer,
.gic-study-back.gic-has-open-layer .gic-layer-drawer-inner{
  display:block !important;
  height:auto !important;
  max-height:var(--gic-pro-layer-max, 230px) !important;
  overflow:hidden !important;
}

.gic-study-back.gic-has-open-layer [data-gic-layer-panel]:not([hidden]),
.gic-study-back.gic-has-open-layer .gic-layer-panel:not([hidden]){
  display:block !important;
  height:auto !important;
  max-height:calc(var(--gic-pro-layer-max, 230px) - 2px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* Full-width 3-part tab bar. JS supplies final left/top/width with inline !important. */
.gic-study-back .gic-layer-tabs,
.gic-study-back [data-gic-layer-tabs],
[data-gic-study-card] .gic-layer-tabs,
[data-gic-study-card] [data-gic-layer-tabs],
.gic-study-card .gic-layer-tabs,
.gic-study-card [data-gic-layer-tabs]{
  position:absolute !important;
  right:auto !important;
  bottom:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:6px !important;
  box-sizing:border-box !important;
  min-height:56px !important;
  height:56px !important;
  max-height:56px !important;

  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  align-items:stretch !important;
  gap:4px !important;

  border-radius:19px !important;
  background:#f6f2e9 !important;
  border:1px solid rgba(18,34,31,.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 6px 16px rgba(19,54,48,.06) !important;

  overflow:hidden !important;
  transform:none !important;
  z-index:8 !important;
}

.gic-layer-tabs > *,
[data-gic-layer-tabs] > *{
  min-width:0 !important;
  max-width:100% !important;
  width:100% !important;
}

.gic-layer-tabs > button,
[data-gic-layer-tabs] > button{
  min-width:0 !important;
  width:100% !important;
  min-height:44px !important;
  height:44px !important;
  max-height:44px !important;
  margin:0 !important;
  padding:0 6px !important;
  border-radius:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  font-size:13px !important;
  line-height:1.1 !important;
}

.gic-layer-tabs > button > span,
[data-gic-layer-tabs] > button > span{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.gic-layer-tabs > button.active,
[data-gic-layer-tabs] > button.active{
  background:#ffffff !important;
  color:#2f5d56 !important;
  box-shadow:
    0 3px 10px rgba(25,63,58,.09),
    inset 0 0 0 1px rgba(26,74,65,.06) !important;
}

.gic-layer-tabs > button:disabled,
[data-gic-layer-tabs] > button:disabled{
  opacity:.42 !important;
}

.gic-layer-tabs svg,
[data-gic-layer-tabs] svg{
  width:17px !important;
  height:17px !important;
  flex:0 0 17px !important;
}

/* Review interval mini-labels */
[data-gic-rating-bar]{
  z-index:20 !important;
}

[data-gic-rating-bar] [data-gic-rating]{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  gap:3px !important;
}

[data-gic-rating-bar] [data-gic-rating] strong{
  line-height:1.05 !important;
}

.gic-rating-preview{
  display:block !important;
  margin:0 !important;
  line-height:1 !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
  opacity:.76 !important;
}

[data-gic-rating="again"] .gic-rating-preview{ color:#a44b59 !important; }
[data-gic-rating="hard"] .gic-rating-preview{ color:#8b6a25 !important; }
[data-gic-rating="good"] .gic-rating-preview{ color:#27715d !important; }
[data-gic-rating="easy"] .gic-rating-preview{ color:#ebfbf6 !important; opacity:.92 !important; }

@media (max-width:640px){
  .gic-study-back:not([hidden]){
    padding-bottom:80px !important;
  }

  .gic-study-back .gic-layer-tabs,
  .gic-study-back [data-gic-layer-tabs],
  [data-gic-study-card] .gic-layer-tabs,
  [data-gic-study-card] [data-gic-layer-tabs],
  .gic-study-card .gic-layer-tabs,
  .gic-study-card [data-gic-layer-tabs]{
    min-height:56px !important;
    height:56px !important;
    max-height:56px !important;
    border-radius:19px !important;
  }

  .gic-layer-tabs > button,
  [data-gic-layer-tabs] > button{
    min-height:44px !important;
    height:44px !important;
    max-height:44px !important;
    padding:0 4px !important;
    gap:4px !important;
    font-size:12px !important;
  }

  .gic-layer-tabs svg,
  [data-gic-layer-tabs] svg{
    width:16px !important;
    height:16px !important;
    flex-basis:16px !important;
  }

  [data-gic-rating-bar] [data-gic-rating]{
    gap:2px !important;
  }

  .gic-rating-preview{
    font-size:9px !important;
  }
}