/* =========================================================
   German in Context · Study Anki/Home V2
   Home-card visual language + Anki-style fixed study geometry.
   ========================================================= */

.gic-ah-wrap{
  --ah-gap:14px;


  --ah-card-h:clamp(545px,68dvh,690px);
  width:min(100%,740px);
  margin:0 auto;
}

.gic-ah-front,
.gic-ah-back{
  width:100%;
}

/* The card itself never changes height when notes open. */
.gic-ah-card{
  width:100%!important;
  height:var(--ah-card-h)!important;
  min-height:var(--ah-card-h)!important;
  max-height:var(--ah-card-h)!important;
  margin:0 auto!important;
  cursor:default!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
  box-sizing:border-box!important;
}
.gic-ah-card *{box-sizing:border-box}
.gic-ah-card [hidden]{display:none!important}

/* Home preview header stays visually intact. */
.gic-ah-card .sample-card-top{
  min-height:190px;
  padding-bottom:21px!important;
  flex:0 0 auto;
}
.gic-ah-card .premium-meta{
  text-align:right;
}
.gic-ah-progress{
  height:7px;
  margin:26px 0 0;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.14);
}
.gic-ah-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#51cdbd,#efd07f);
}

/* Fixed middle viewport: only this area scrolls when necessary. */
.gic-ah-content{
  min-height:0;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#b8c6c1 #edf2ef;
  padding:24px 22px 10px;
}
.gic-ah-content::-webkit-scrollbar{width:5px}
.gic-ah-content::-webkit-scrollbar-track{background:#edf2ef;border-radius:999px}
.gic-ah-content::-webkit-scrollbar-thumb{background:#b8c6c1;border-radius:999px}

/* Standard front */
.gic-ah-prompt{
  margin:0 0 14px!important;
}
.gic-ah-front-text{
  width:min(100%,610px);
  min-height:220px;
  margin:0 auto;
  padding:12px 12px;
  display:grid;
  place-items:center;
  text-align:center;
  color:#123f3a;
  font-family:Newsreader,Georgia,"Times New Roman",serif;
  font-size:clamp(2.1rem,7.2vw,3.15rem);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.025em;
  overflow-wrap:break-word;
  text-wrap:balance;
}

/* Standard back */
.gic-ah-answer{
  width:100%;
  max-width:620px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.gic-ah-answer .answer-label{
  margin-bottom:18px!important;
}
.gic-ah-german{
  width:100%;
  padding:0 12px;
  text-align:center;
  color:#0f514a;
  font-family:Newsreader,Georgia,"Times New Roman",serif;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
  overflow-wrap:break-word;
  hyphens:auto;
  text-wrap:balance;
}
.gic-ah-german.s{font-size:clamp(2.55rem,8.4vw,3.75rem)}
.gic-ah-german.m{font-size:clamp(2.05rem,6.9vw,3rem)}
.gic-ah-german.l{font-size:clamp(1.65rem,5.6vw,2.35rem)}
.gic-ah-german.xl{font-size:clamp(1.32rem,4.55vw,1.88rem);line-height:1.18}

.gic-ah-translation{
  width:min(94%,560px);
  margin:10px auto 0;
  text-align:center;
  color:#909a96;
  font-size:clamp(.93rem,3.4vw,1.10rem);
  line-height:1.4;
  font-style:italic;
}

/* Listen + Record: close enough to the sentence, safely above the rail. */
.gic-ah-audio-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:15px auto 6px;
}
.gic-ah-card .gic-ah-audio-row .sound-btn{
  width:62px!important;
  height:62px!important;
  min-width:62px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
}
.gic-ah-card .gic-ah-audio-row .sound-btn svg{
  width:29px!important;
  height:29px!important;
}
.gic-ah-record-btn{
  color:#8f6a20!important;
  border-color:#d8b76f!important;
  background:#fffaf0!important;
}

/* Recorder belongs to scrollable content, never overlaps rail. */
.gic-ah-recorder{
  width:min(100%,600px);
  margin:12px auto 4px;
  padding:14px;
  border:1px solid #dfe7e3;
  border-radius:17px;
  background:#f8faf9;
}
.gic-ah-recorder-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.gic-ah-recorder-head strong{
  display:block;color:#8b6d2b;font-size:.73rem;font-weight:950;letter-spacing:.12em;
}
.gic-ah-recorder-head small{
  display:block;margin-top:3px;color:#8d9894;font-size:.71rem;
}
.gic-ah-recorder-close{
  border:0;background:transparent;color:#76837f;font-size:1.2rem;
}
.gic-ah-voice-target{margin:10px 0;text-align:center}
.gic-ah-voice-target span{
  display:block;color:#a27b28;font-size:.66rem;font-weight:900;letter-spacing:.10em;
}
.gic-ah-voice-target strong{
  display:block;margin-top:4px;color:#154c47;font-size:1.06rem;line-height:1.32;
}
.gic-ah-voice-target small{
  display:block;margin-top:3px;color:#9aa39f;font-size:.76rem;
}
.gic-ah-record-status{color:#81908b;font-size:.74rem;margin:7px 0}
.gic-ah-record-button{
  width:100%;min-height:42px;border:0;border-radius:12px;
  background:linear-gradient(135deg,#126d63,#118579);color:#fff;font-weight:900;
}
.gic-ah-recording{margin-top:9px}
.gic-ah-record-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.gic-ah-record-actions button{
  min-height:35px;padding:0 10px;border:1px solid #dfe6e2;border-radius:10px;
  background:#fff;color:#315f59;font-weight:800;font-size:.71rem;
}

/* Rail is a dedicated fixed row at the very bottom of the card. */
.gic-ah-rail-wrap{
  flex:0 0 auto;
  padding:0 20px 16px;
  background:linear-gradient(180deg,rgba(255,253,249,0),#fffdf9 24%);
}
.gic-ah-card .gic-layer-tabs{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:600px!important;
  margin:0 auto!important;
  z-index:4!important;
}
.gic-ah-card .gic-layer-tabs button{
  min-width:0!important;
}
.gic-ah-card .gic-layer-tabs button span{
  white-space:nowrap!important;
  font-size:.74rem!important;
}

/* Notes do NOT live inside the fixed card.
   They expand below the fixed rail in normal page flow.
   Long content continues behind the fixed SRS dock; the learner scrolls the page upward. */
.gic-ah-notes{
  width:calc(100% - 28px);
  max-width:690px;
  margin:0 auto;
}
.gic-ah-notes .gic-layer-drawer{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  overflow:hidden!important;
  background:transparent!important;
  transition:max-height .32s ease,opacity .18s ease,margin-top .25s ease,margin-bottom .25s ease!important;
  z-index:3!important;
}
.gic-ah-notes .gic-layer-drawer.is-open{
  max-height:4000px!important;
  margin-top:10px!important;
  margin-bottom:120px!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.gic-ah-notes .gic-layer-drawer-inner{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:13px!important;
  transform:none!important;
  border:1px solid #e1e7e4!important;
  border-radius:18px!important;
  background:#fffdfa!important;
  box-shadow:0 10px 24px rgba(18,59,53,.08)!important;
  overflow:visible!important;
}
.gic-ah-notes .gic-drawer-handle{
  width:40px!important;height:4px!important;border-radius:999px!important;
  margin:0 auto 10px!important;background:#c8d5d0!important;
}
.gic-ah-notes .gic-layer-panel{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding:0!important;
  background:transparent!important;
  transform:none!important;
}
.gic-ah-notes .gic-layer-head{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  background:#fffdfa!important;
}

/* Back-side SRS dock is always visible and occupies the same viewport position
   as the front-side Reveal dock. */
.gic-rating-bar.gic-premium-rating.gic-ah-rating{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:10px!important;
  transform:translateX(-50%)!important;
  z-index:60!important;
  width:min(calc(100% - 20px),740px)!important;
  max-width:740px!important;
  margin:0!important;
}

/* Anki-style front action zone: separate from the card, above the rating area. */
.gic-ah-reveal-zone{
  position:fixed;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  z-index:60;
  width:min(calc(100% - 20px),740px);
  margin:0;
  padding:8px;
  border:1px solid #e1e7e4;
  border-radius:25px;
  background:rgba(255,253,249,.97);
  backdrop-filter:blur(10px);
  box-shadow:0 15px 30px rgba(18,58,52,.13);
}
.gic-ah-reveal{
  width:100%;
  min-height:62px;
  border:0;
  border-radius:18px;
  background:linear-gradient(135deg,#0f7469,#0b8b7d);
  color:#fff;
  font-size:1rem;
  font-weight:900;
  box-shadow:0 10px 24px rgba(15,116,105,.18);
}

/* Dialogue front */
.gic-ah-dialogue-front{
  width:100%;
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px 10px 20px;
}
.gic-ah-dialogue-topic{
  width:min(100%,560px);
  color:#124c47;
  font-family:Newsreader,Georgia,"Times New Roman",serif;
  font-size:clamp(1.9rem,6.7vw,2.7rem);
  line-height:1.06;
  font-weight:700;
  text-wrap:balance;
}
.gic-ah-dialogue-instruction{
  width:min(92%,500px);
  margin-top:13px;
  color:#7d8b87;
  font-size:.95rem;
  line-height:1.48;
}
.gic-ah-play-dialogue{
  min-height:45px;
  margin-top:20px;
  padding:0 17px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#126d63,#118579);
  color:#fff;
  font-weight:900;
  font-size:.85rem;
}
.gic-ah-dialogue-hint{
  margin-top:10px;
  color:#a0aaa6;
  font-size:.72rem;
}

/* Dialogue back: fixed rail + internally scrolling dialogue viewport. */
.gic-ah-dialogue-scroll{
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#b9c6c1 #edf2ef;
}
.gic-ah-dialogue-list{
  display:grid;
  gap:10px;
}
.gic-ah-turn{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:9px;
  align-items:start;
  padding:11px;
  border:1px solid rgba(19,76,68,.10);
  border-radius:16px;
  background:linear-gradient(180deg,#fffefa,#fbfcfa);
  box-shadow:0 5px 14px rgba(22,61,55,.035);
}
.gic-ah-turn[data-speaker="B"]{
  background:linear-gradient(180deg,#f4faf8,#f7fbf9);
}
.gic-ah-speaker{
  width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;
  background:#f5eddb;color:#a07824;
  font-size:.76rem;font-weight:950;
}
.gic-ah-turn[data-speaker="B"] .gic-ah-speaker{
  background:#e6f2ef;color:#116c62;
}
.gic-ah-turn-de{
  color:#0d514a;
  font-size:clamp(.98rem,4vw,1.26rem);
  line-height:1.32;
  font-weight:850;
  overflow-wrap:break-word;
}
.gic-ah-dialogue-list.long .gic-ah-turn-de{
  font-size:clamp(.90rem,3.6vw,1.12rem);
}
.gic-ah-turn-en{
  margin-top:4px;
  color:#8d9692;
  font-size:clamp(.75rem,2.9vw,.88rem);
  line-height:1.4;
  font-style:italic;
}
.gic-ah-turn-tools{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  margin-top:8px;
}
.gic-ah-turn .sound-btn{
  width:40px!important;height:40px!important;min-width:40px!important;
  border-radius:50%!important;
  display:grid!important;place-items:center!important;
}
.gic-ah-turn .sound-btn svg{
  width:20px!important;height:20px!important;
}
.gic-ah-turn-record{
  color:#9b7424!important;
  border-color:#ecdba8!important;
  background:#fffaf0!important;
}
.gic-ah-turn-record.is-recording{
  color:#fff!important;background:#b95459!important;border-color:#b95459!important;
}
.gic-ah-myvoice{
  height:40px;padding:0 10px;
  border:1px solid rgba(20,93,84,.12);
  border-radius:12px;background:#eef7f4;
  color:#176b62;font-size:.69rem;font-weight:850;
}
.gic-ah-turn-status{color:#9aa4a0;font-size:.64rem}

/* Rating row retains all review intervals. */
.gic-ah-rating button{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
}
.gic-ah-rating .gic-rating-preview{
  display:block!important;
  font-size:.72rem!important;
  line-height:1!important;
  font-weight:950!important;
  opacity:.82!important;
}

/* Hide removed Pronunciation Lab handoff. */
.gic-ah-wrap .gic-lab-cta,
.gic-ah-wrap .gic-lab-preview,
.gic-ah-wrap [data-gic-check-lab],
.gic-ah-wrap [data-gic-show-lab-preview]{
  display:none!important;
}

@media(max-width:560px){
  .gic-ah-wrap{
    --ah-card-h:clamp(510px,66dvh,620px);
  }
  .gic-ah-card .sample-card-top{
    min-height:176px;
  }
  .gic-ah-content{
    padding:20px 18px 8px;
  }
  .gic-ah-front-text{
    min-height:190px;
    font-size:clamp(1.95rem,7vw,2.85rem);
  }
  .gic-ah-card .gic-layer-tabs button span{
    font-size:.70rem!important;
  }
  .gic-ah-reveal{
    min-height:58px;
  }
}


/* GIC_V22_RAIL_CREAM_AUTOSCROLL_FIX
   Keep the study header untouched.
   Make the bottom learning rail warm cream so the white active pill is clearly visible. */
.gic-ah-card .gic-ah-rail-wrap{
  background:linear-gradient(180deg,rgba(255,253,249,0),#fffdf9 22%)!important;
}
.gic-ah-card .gic-layer-tabs{
  background:#efe6d7!important;
  border:1px solid #ddcfb7!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 16px rgba(45,63,57,.05)!important;
}
.gic-ah-card .gic-layer-indicator{
  background:#ffffff!important;
  border:1px solid rgba(255,255,255,.95)!important;
  box-shadow:0 7px 17px rgba(53,67,61,.12)!important;
}
.gic-ah-card .gic-layer-tabs button{
  color:#7f837f!important;
}
.gic-ah-card .gic-layer-tabs button.active,
.gic-ah-card .gic-layer-tabs button.is-active,
.gic-ah-card .gic-layer-tabs button[aria-selected="true"],
.gic-ah-card .gic-layer-tabs button[aria-pressed="true"]{
  color:#145f57!important;
}
.gic-ah-card .gic-layer-tabs button:disabled{
  color:#b7b3aa!important;
  opacity:.72!important;
}


/* GIC_V22_BACK_CONTENT_FINAL_FIX */
.gic-ah-front[hidden],
.gic-ah-back[hidden],
.gic-ah-rating[hidden]{display:none!important;}

.gic-ah-back:not([hidden]) .gic-ah-card{
  visibility:visible!important;
  opacity:1!important;
}

.gic-ah-back:not([hidden]) .premium-answer-zone{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  pointer-events:auto!important;
}

.gic-ah-back:not([hidden]) .main-answer-stack,
.gic-ah-back:not([hidden]) .gic-ah-answer,
.gic-ah-back:not([hidden]) .gic-ah-german,
.gic-ah-back:not([hidden]) .gic-ah-translation,
.gic-ah-back:not([hidden]) .gic-ah-audio-row,
.gic-ah-back:not([hidden]) .gic-ah-dialogue-scroll,
.gic-ah-back:not([hidden]) .gic-ah-dialogue-list{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

.gic-ah-back:not([hidden]) .main-answer-stack,
.gic-ah-back:not([hidden]) .gic-ah-answer{display:flex!important;flex-direction:column!important;}
.gic-ah-back:not([hidden]) .gic-ah-german,
.gic-ah-back:not([hidden]) .gic-ah-translation{display:block!important;}
.gic-ah-back:not([hidden]) .gic-ah-audio-row{display:flex!important;flex-direction:row!important;}
.gic-ah-back:not([hidden]) .gic-ah-dialogue-scroll{display:block!important;}
.gic-ah-back:not([hidden]) .gic-ah-dialogue-list{display:flex!important;flex-direction:column!important;}


/* GIC_V22_HEADER_RECORDER_LAYOUT_FIX */
.gic-ah-card .gic-ah-original-header{
  position:relative!important;
  flex:none!important;
  width:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
.gic-ah-card .gic-ah-original-header .gic-hero-top{
  align-items:center!important;
}
.gic-ah-hero-stats{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.gic-ah-card-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(239,208,126,.30);
  border-radius:999px;
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.07);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.04em;
  white-space:nowrap;
}

.gic-ah-card > .gic-ah-content{
  position:relative!important;
  z-index:1!important;
  min-height:0!important;
  height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  padding-bottom:30px!important;
  scroll-padding-top:14px;
  scroll-padding-bottom:34px;
  -webkit-overflow-scrolling:touch;
}
.gic-ah-card .premium-answer-zone{
  position:relative!important;
  inset:auto!important;
}
.gic-ah-card .gic-ah-recorder{
  position:relative!important;
  inset:auto!important;
  z-index:1!important;
  width:min(100%,600px)!important;
  max-width:600px!important;
  height:auto!important;
  max-height:none!important;
  margin:16px auto 26px!important;
  transform:none!important;
}
.gic-ah-card .gic-ah-rail-wrap{
  position:relative!important;
  z-index:8!important;
  isolation:isolate;
  flex:none!important;
}
.gic-ah-card .gic-ah-rail-wrap::before{
  content:"";
  position:absolute;
  inset:-10px 0 0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(255,253,249,0),#fffdf9 22%,#fffdf9 100%);
  pointer-events:none;
}

@media(max-width:560px){
  .gic-ah-card .gic-ah-original-header{
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .gic-ah-card-count{
    min-height:27px;
    padding:0 8px;
    font-size:.67rem;
  }
  .gic-ah-hero-stats{
    gap:7px;
  }
  .gic-ah-card > .gic-ah-content{
    padding-bottom:28px!important;
  }
}

/* GIC_V22_PAGE_SCROLL_INDICATOR_FIX
   When a learning panel is open, the page itself remains vertically scrollable
   and a slim visual scroll indicator appears on the right side. */

html.gic-layer-page-scroll-open,
html.gic-layer-page-scroll-open body{
  overflow-y:auto!important;
  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch;
}

/* Do not let the expanded learning drawer become a competing scroll container. */
html.gic-layer-page-scroll-open .gic-ah-notes,
html.gic-layer-page-scroll-open .gic-ah-notes .gic-layer-drawer,
html.gic-layer-page-scroll-open .gic-ah-notes .gic-layer-drawer-inner,
html.gic-layer-page-scroll-open .gic-ah-notes .gic-layer-panel{
  overflow:visible!important;
  max-height:none!important;
  overscroll-behavior:auto!important;
  touch-action:pan-y!important;
}

.gic-page-scroll-indicator{
  position:fixed;
  right:4px;
  top:15vh;
  bottom:116px;
  width:5px;
  z-index:90;
  border-radius:999px;
  background:rgba(17,72,66,.10);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
}
.gic-page-scroll-indicator.is-visible{
  opacity:1;
  visibility:visible;
}
.gic-page-scroll-indicator-thumb{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  min-height:34px;
  border-radius:999px;
  background:linear-gradient(180deg,#d7b35c,#0f7b70);
  box-shadow:0 2px 7px rgba(24,62,57,.18);
  transform:translateY(0);
  will-change:transform,height;
}

@media(max-width:560px){
  .gic-page-scroll-indicator{
    right:3px;
    width:4px;
    top:14vh;
    bottom:112px;
  }
}
/* Keep study card German text independent from old demo-card styles */
main.gic-final-study-page .gic-ah-card .gic-ah-german.demo-back {
  color:#202625 !important;
  font-family:Newsreader,Georgia,"Times New Roman",serif !important;
}


/* GIC-LAYER-RAIL-ACTIVE-V1-5
   Available-but-closed layers must not look disabled. Selected remains green via
   the existing .active rule; disabled_gray remains visibly muted. */
.gic-ah-card .gic-layer-tabs button[data-gic-layer-state="active"]:not(.active){
  color:#315f59!important;
  opacity:1!important;
  background:rgba(255,255,255,.62)!important;
  cursor:pointer!important;
  pointer-events:auto!important;
}
.gic-ah-card .gic-layer-tabs button[data-gic-layer-state="active"]:not(.active) svg{
  opacity:.9!important;
}
.gic-ah-card .gic-layer-tabs button[data-gic-layer-state="disabled_gray"],
.gic-ah-card .gic-layer-tabs button[data-gic-layer-state="disabled_gray"]:disabled{
  color:#b7b3aa!important;
  opacity:.55!important;
  background:rgba(255,255,255,.28)!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
}