/* GiC Card Vertical Rhythm v5
   Finalized mobile rhythm:
   - German/English text stays visually grouped with Listen/Speak
   - lower middle zone is reserved for expandable Grammar/Pronunciation/Language Kit
   - compact tabs sit immediately above rating controls
*/

.gic-study-back:not([hidden]){
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  height:100% !important;
  box-sizing:border-box !important;
}

/* Keep the answer block visually compact. */
.gic-study-german[data-gic-german]{
  margin-bottom:0 !important;
}

.gic-study-english-small{
  margin-top:8px !important;
  margin-bottom:0 !important;
}

/* Listen / Speak: close to the final text line, but with a clean breathing gap. */
.gic-study-back .gic-main-actions{
  flex:0 0 auto !important;
  margin-top:20px !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
}

/* Do not allow old rules to create a large gap above the audio controls. */
.gic-study-back .gic-main-actions + [data-gic-speech-panel]{
  margin-top:8px !important;
}

/* The lower blank zone is intentional: it is the expansion area for layers.
   Tabs stay compact and sit at the bottom of the revealed card. */
.gic-study-back .gic-layer-tabs{
  flex:0 0 68px !important;
  height:68px !important;
  min-height:68px !important;
  max-height:68px !important;

  margin-top:auto !important;
  margin-bottom:2px !important;

  padding:7px 9px !important;
  box-sizing:border-box !important;

  position:relative !important;
  top:auto !important;
  bottom:auto !important;

  overflow-y:hidden !important;
}

/* Extra tabs may still swipe horizontally. */
.gic-study-back .gic-layer-tabs.gic-layer-tabs-scroll{
  overflow-x:auto !important;
  overscroll-behavior-x:contain;
}

.gic-study-back .gic-layer-tabs > button{
  height:100% !important;
  min-height:0 !important;
}

/* Open layer:
   short content = content height
   long content = only the reserved zone, then internal scroll */
.gic-layer-drawer,
.gic-layer-drawer.is-open,
.gic-layer-drawer-inner{
  min-height:0 !important;
  height:auto !important;
  max-height:var(--gic-layer-fit-max, 220px) !important;
  overflow:hidden !important;
}

.gic-layer-panel:not([hidden]){
  display:block !important;
  min-height:0 !important;
  height:auto !important;
  max-height:calc(var(--gic-layer-fit-max, 220px) - 6px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.gic-layer-panel:not([hidden]) .gic-layer-head{
  position:sticky;
  top:0;
  z-index:4;
}

/* Remove inherited minimum heights that create empty white boxes. */
.gic-layer-panel .gic-layer-editorial,
.gic-layer-panel .gic-layer-items,
.gic-layer-panel .gic-layer-item{
  min-height:0 !important;
}

/* Mobile tuning. */
@media (max-width:640px){
  .gic-study-english-small{
    margin-top:7px !important;
  }

  .gic-study-back .gic-main-actions{
    margin-top:18px !important;
  }

  .gic-study-back .gic-layer-tabs{
    flex-basis:64px !important;
    height:64px !important;
    min-height:64px !important;
    max-height:64px !important;
    margin-bottom:0 !important;
    padding:6px 8px !important;
  }
}