/**
 * NCDE Language Glass Capsule v2.0
 * Presentation-only refinement for the existing Chapter I language popover.
 * Full header: centered below the header shell.
 * Story engaged: moves to the former hamburger zone and aligns vertically with the compact logo.
 */
body.ncde-storytelling-page .ncde-language-popover{
  --ncde-lang-capsule-width:96px;
  --ncde-lang-capsule-height:42px;
  position:fixed;
  z-index:9250;
  top:calc(var(--ncde-story-header-top, 14px) + var(--ncde-story-header-height, 86px) + 20px);
  left:50%;
  width:var(--ncde-lang-capsule-width);
  display:flex;
  flex-direction:column;
  align-items:center;
  transform:translateX(-50%);
  pointer-events:auto;
  transition:
    left .72s cubic-bezier(.22,1,.36,1),
    top .72s cubic-bezier(.22,1,.36,1),
    opacity .25s ease,
    visibility .25s ease;
}

body.ncde-storytelling-page .ncde-language-popover__trigger{
  width:var(--ncde-lang-capsule-width);
  height:var(--ncde-lang-capsule-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 15px;
  border:1px solid rgba(219,183,91,.30);
  border-radius:999px;
  color:#ead48d;
  background:linear-gradient(135deg,rgba(7,57,43,.76),rgba(3,43,32,.70));
  box-shadow:
    0 12px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 24px rgba(207,166,69,.07);
  -webkit-backdrop-filter:blur(20px) saturate(1.08);
  backdrop-filter:blur(20px) saturate(1.08);
  cursor:pointer;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}
body.ncde-storytelling-page .ncde-language-popover__trigger svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}
body.ncde-storytelling-page .ncde-language-popover__trigger span{
  min-width:18px;
  font:700 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.10em;
  text-align:center;
}
body.ncde-storytelling-page .ncde-language-popover__trigger::after{
  content:"";
  width:5px;
  height:5px;
  margin-top:-3px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg);
  opacity:.72;
}
body.ncde-storytelling-page .ncde-language-popover__trigger:hover,
body.ncde-storytelling-page .ncde-language-popover__trigger:focus-visible,
body.ncde-storytelling-page .ncde-language-popover.is-open .ncde-language-popover__trigger{
  transform:translateY(-1px);
  border-color:rgba(232,201,116,.58);
  background:linear-gradient(135deg,rgba(8,66,49,.88),rgba(4,48,36,.84));
  box-shadow:
    0 15px 34px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 22px rgba(217,182,87,.10);
  outline:none;
}

body.ncde-storytelling-page .ncde-language-popover__menu{
  width:206px;
  margin-top:10px;
  padding:7px;
  align-self:center;
  border:1px solid rgba(217,185,110,.28);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(7,60,46,.96),rgba(3,35,28,.98));
  box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(20px) saturate(1.08);
  backdrop-filter:blur(20px) saturate(1.08);
  transform-origin:top center;
}
body.ncde-storytelling-page .ncde-language-popover__menu[hidden]{display:none!important}
body.ncde-storytelling-page .ncde-language-popover.is-opening .ncde-language-popover__menu{
  animation:ncde-language-menu-in .20s cubic-bezier(.22,1,.36,1) both;
}
body.ncde-storytelling-page .ncde-language-popover__menu button{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 13px;
  border:0;
  border-radius:12px;
  color:rgba(255,255,255,.76);
  background:transparent;
  font:600 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  text-align:left;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
body.ncde-storytelling-page .ncde-language-popover__menu button small{
  color:rgba(232,201,116,.56);
  font:800 10px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.12em;
}
body.ncde-storytelling-page .ncde-language-popover__menu button:hover,
body.ncde-storytelling-page .ncde-language-popover__menu button:focus-visible{
  color:#fff8df;
  background:rgba(255,255,255,.07);
  outline:none;
}
body.ncde-storytelling-page .ncde-language-popover__menu button[aria-checked="true"]{
  color:#f0d88e;
  background:rgba(217,182,87,.10);
}
body.ncde-storytelling-page .ncde-language-popover__menu button[aria-checked="true"]::before{
  content:"";
  width:5px;
  height:5px;
  flex:0 0 auto;
  border-radius:50%;
  background:#d8b65b;
  box-shadow:0 0 10px rgba(216,182,91,.60);
}
body.ncde-storytelling-page .ncde-language-popover__menu button[aria-checked="true"] span{margin-right:auto}

/* The compact header has no hamburger. The capsule takes its former right-side zone. */
body.ncde-storytelling-page[data-story-header-state="compact"] .ncde-language-popover{
  /* 72px compact container and 42px capsule: exact shared vertical center. */
  top:calc(var(--ncde-story-header-top, 14px) + 15px);
  left:calc(100% - var(--ncde-story-header-inline, 34px) - (var(--ncde-lang-capsule-width) / 2));
}
body.ncde-storytelling-page[data-story-header-state="compact"] .ncde-language-popover__menu{
  align-self:flex-end;
  transform-origin:top right;
}

@keyframes ncde-language-menu-in{
  from{opacity:0;transform:translateY(-5px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:680px){
  body.ncde-storytelling-page .ncde-language-popover{
    --ncde-lang-capsule-width:92px;
    --ncde-lang-capsule-height:40px;
    top:calc(var(--ncde-story-header-top, 12px) + var(--ncde-story-header-height, 72px) + 16px);
  }
  body.ncde-storytelling-page .ncde-language-popover__trigger{
    padding-inline:14px;
  }
  body.ncde-storytelling-page .ncde-language-popover__menu{width:196px}
  body.ncde-storytelling-page[data-story-header-state="compact"] .ncde-language-popover{
    /* 62px compact container and 40px capsule: exact shared vertical center. */
    top:calc(var(--ncde-story-header-top, 12px) + 11px);
    left:calc(100% - var(--ncde-story-header-inline, 12px) - (var(--ncde-lang-capsule-width) / 2));
  }
}

@media(prefers-reduced-motion:reduce){
  body.ncde-storytelling-page .ncde-language-popover,
  body.ncde-storytelling-page .ncde-language-popover__trigger{transition:none}
  body.ncde-storytelling-page .ncde-language-popover.is-opening .ncde-language-popover__menu{animation:none}
}