/* =========================================================
   GiC Stable Back v2
   Goal:
   - ONE stable back render (no small-font -> large-font jump)
   - short German = centered + readable
   - longer German = left aligned
   - same behavior on mobile + desktop
   - preserve neutral segmented learning rail
   - do not duplicate target sentence inside recorder
   ========================================================= */

/* Kill reveal/font transition flicker only inside learner study cards. */
html body [data-gic-study-card] [data-gic-back],
html body [data-gic-study-card] [data-gic-german],
html body [data-gic-study-card] .gic-v2-german,
html body [data-gic-study-card] .gic5-stage-main{
  transition:none!important;
  animation:none!important;
}

/* Remove runtime font animation / transforms that can look like a second back. */
html body [data-gic-study-card] [data-gic-back]{
  transform:none!important;
}

/* Universal German text hygiene. */
html body [data-gic-study-card] [data-gic-german],
html body [data-gic-study-card] .gic-v2-german,
html body [data-gic-study-card] .gic5-stage-main:not(.front){
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  letter-spacing:-.035em!important;
}

/* ---------- V2: use server-rendered length classes, so sizing is ready
   BEFORE the back is revealed. No JS font recalculation after reveal. ---------- */

/* very short */
html body [data-gic-study-card] .gic-v2-german.gic-v2-de-xl{
  text-align:center!important;
  white-space:nowrap!important;
  text-wrap:nowrap!important;
  line-height:1.06!important;
}

/* short */
html body [data-gic-study-card] .gic-v2-german.gic-v2-de-lg{
  text-align:center!important;
  white-space:nowrap!important;
  text-wrap:nowrap!important;
  line-height:1.07!important;
}

/* short-medium, still visually centered */
html body [data-gic-study-card] .gic-v2-german.gic-v2-de-md-single{
  text-align:center!important;
  white-space:normal!important;
  text-wrap:balance!important;
  line-height:1.09!important;
}

/* longer sentence */
html body [data-gic-study-card] .gic-v2-german.gic-v2-de-md,
html body [data-gic-study-card] .gic-v2-german.gic-v2-de-long{
  text-align:left!important;
  margin-left:0!important;
  margin-right:auto!important;
  white-space:normal!important;
  text-wrap:pretty!important;
  line-height:1.14!important;
}

/* Generic fallback for V5 / other current study templates.
   JS adds ONE class while the back is still hidden. */
html body [data-gic-study-card] .gic-stable-de-short{
  text-align:center!important;
  white-space:nowrap!important;
  text-wrap:nowrap!important;
  line-height:1.07!important;
}
html body [data-gic-study-card] .gic-stable-de-medium{
  text-align:center!important;
  white-space:normal!important;
  text-wrap:balance!important;
  line-height:1.10!important;
}
html body [data-gic-study-card] .gic-stable-de-long{
  text-align:left!important;
  margin-left:0!important;
  margin-right:auto!important;
  white-space:normal!important;
  text-wrap:pretty!important;
  line-height:1.15!important;
}

/* MOBILE fixed sizes — stable, no post-reveal recalculation */
@media(max-width:680px){
  html body [data-gic-study-card] .gic-v2-german.gic-v2-de-xl,
  html body [data-gic-study-card] .gic-stable-de-short{
    font-size:clamp(34px,9.4vw,43px)!important;
  }
  html body [data-gic-study-card] .gic-v2-german.gic-v2-de-lg{
    font-size:clamp(32px,8.8vw,40px)!important;
  }
  html body [data-gic-study-card] .gic-v2-german.gic-v2-de-md-single,
  html body [data-gic-study-card] .gic-stable-de-medium{
    font-size:clamp(29px,8vw,36px)!important;
  }
  html body [data-gic-study-card] .gic-v2-german.gic-v2-de-md{
    font-size:clamp(27px,7.3vw,33px)!important;
  }
  html body [data-gic-study-card] .gic-v2-german.gic-v2-de-long,
  html body [data-gic-study-card] .gic-stable-de-long{
    font-size:clamp(24px,6.5vw,30px)!important;
  }
}

/* DESKTOP fixed sizes */
@media(min-width:681px){
  html body [data-gic-study-card] .gic-v2-german.gic-v2-de-xl,
  html body [data-gic-study-card] .gic-stable-de-short{
    font-size:52px!important;
  }
  html body [data-gic-study-card] .gic-v2-german.gic-v2-de-lg{
    font-size:48px!important;
  }
  html body [data-gic-study-card] .gic-v2-german.gic-v2-de-md-single,
  html body [data-gic-study-card] .gic-stable-de-medium{
    font-size:42px!important;
  }
  html body [data-gic-study-card] .gic-v2-german.gic-v2-de-md{
    font-size:38px!important;
  }
  html body [data-gic-study-card] .gic-v2-german.gic-v2-de-long,
  html body [data-gic-study-card] .gic-stable-de-long{
    font-size:33px!important;
  }
}

/* English: short remains centered, long gets one stable left-aligned class. */
html body [data-gic-study-card] .gic-stable-en-short{
  text-align:center!important;
}
html body [data-gic-study-card] .gic-stable-en-long{
  text-align:left!important;
  margin-left:0!important;
  margin-right:auto!important;
  text-wrap:pretty!important;
}

/* Recorder: do not repeat the same German target a second time. */
html body [data-gic-study-card] [data-gic-speech-panel] .gic-voice-target,
html body [data-gic-study-card] [data-gic-speech-panel] [data-gic-voice-target],
html body [data-gic-study-card] .gic5-recorder .gic5-voice-target{
  display:none!important;
}

/* Neutral segmented learning rail on BOTH mobile + desktop. */
html body [data-gic-study-card] .gic-learning-layer-rail,
html body [data-gic-study-card] .gic-v2-tabs.gic-learning-layer-rail{
  background:#efe9db!important;
  border:1px solid #e3dbc8!important;
  border-radius:18px!important;
  box-shadow:0 8px 20px rgba(32,49,44,.08)!important;
  padding:5px!important;
}
html body [data-gic-study-card] .gic-learning-layer-rail button,
html body [data-gic-study-card] .gic-v2-tabs.gic-learning-layer-rail button{
  background:transparent!important;
  color:#75817d!important;
  border:0!important;
  box-shadow:none!important;
}
html body [data-gic-study-card] .gic-learning-layer-rail button.active{
  color:#123f39!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body [data-gic-study-card] .gic-learning-layer-rail [data-gic-layer-indicator],
html body [data-gic-study-card] .gic-v2-tab-indicator{
  background:#fffdf9!important;
  border:1px solid rgba(220,211,190,.76)!important;
  box-shadow:0 7px 18px rgba(30,43,39,.12)!important;
}

/* English badge row when badge data already exists. */
html body [data-gic-study-card] .gic-english-badge-row{
  display:flex!important;
  align-items:flex-start!important;
  gap:7px!important;
  margin-top:6px!important;
}
html body [data-gic-study-card] .gic-english-badge-row > small{
  display:block!important;
  margin:0!important;
  flex:1 1 auto!important;
  min-width:0!important;
}
html body [data-gic-study-card] .gic-english-badge{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:19px!important;
  padding:3px 6px!important;
  border-radius:999px!important;
  background:#f3eee2!important;
  color:#806a3c!important;
  border:1px solid #e4dac0!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}