/* =========================================================================
   Yol Arkadaşın — mascot presentation and motion vocabulary
   =========================================================================

   Rules this file follows, from the site's own design system:
     - No gold-tinted surfaces. Gold is a line, a glyph or a text colour only.
     - #8B95AC (--bai-ink-300) is never body text; secondary text is ink-500.
     - Lifts use the independent `translate` property, never `transform`, so a
       reveal animation parked on `transform` cannot be cancelled by a hover.
     - Everything animates transform/opacity only; nothing animates a property
       that triggers layout.
     - Every figure carries width/height, so the mascot can never shift a page.

   Motion is gated three ways, any one of which stops it:
     [data-mc-motion="off"]   — the WordPress setting, or the visitor's toggle
     prefers-reduced-motion   — the operating system
     .is-paused               — offscreen, applied by the IntersectionObserver
   ========================================================================= */

:root {
  --mc-gold: #B98A2E;
  --mc-gold-light: #E7C77E;
  --mc-navy: #16233F;
  --mc-navy-deep: #0F1B33;
  --mc-line: rgba(255, 255, 255, .12);
  /* Motion speed multiplier, read by every animation and transition below.
     It MUST live on :root: the hero figure, the journey route, the notes and
     the flight path are all mounted into page content, outside .bai-mc-root,
     and an undeclared var() makes `calc(900ms * var(--mc-dur, 1))` invalid - which
     silently computes the whole animation to `none`. */
  --mc-dur: 1;
}

/* ---------------------------------------------------------------- no-JS
   The guide starts DISPLAY:NONE for everyone, and the no-JS fallback is turned
   back on by a <noscript> stylesheet printed next to the markup.

   This matters, and an earlier version got it wrong. If the fallback is visible
   by default, then the moment the script adds `.is-js` the element transitions
   from "visible static block" to "hidden fixed panel" - so it fades out over
   240ms in the corner of every single page load. That is a panel visibly
   popping up and closing itself on navigation.

   Going from `display:none` to `display:block` does not run a transition, so
   starting hidden removes the flash at the source rather than masking it. */
.bai-mc-root .bai-mc-guide { display: none; }
.bai-mc-root.is-js .bai-mc-guide__lede { display: none; }

/* ------------------------------------------------------------ the figure
   Two real poses stacked in one box; only one is opaque at a time. This is a
   pose change, not an articulated animation — see the state registry. */
.bai-mc-fig {
  position: relative;
  display: block;
  line-height: 0;
  will-change: transform;
}
.bai-mc-fig .bai-mc__pic { display: block; }
.bai-mc-fig .bai-mc__pic img { display: block; width: 100%; height: auto; }
.bai-mc-fig .bai-mc__pic + .bai-mc__pic {
  position: absolute;
  inset: 0;
}
.bai-mc-fig .is-wave { opacity: 0; transition: opacity calc(260ms * var(--mc-dur, 1)) ease; }
.bai-mc-fig .is-walk { opacity: 1; transition: opacity calc(260ms * var(--mc-dur, 1)) ease; }
.bai-mc-fig[data-pose="wave"] .is-wave { opacity: 1; }
.bai-mc-fig[data-pose="wave"] .is-walk { opacity: 0; }

/* ------------------------------------------------------------------ hero
   Measured, not assumed. At 1440 the hero's own content fills it: the text
   column runs to x765, the "Yolculuk haritası" card occupies x829-1249 down to
   y729, and the only clear space is the hero's 96px bottom padding and the
   gutter outside the 1200px container. A figure dropped at the hero's corner
   overlapped that card by 210x207px, so the placement follows the free space:

     >= 1480px  full figure in the right gutter, clear of the card's right edge
     1100-1480  small companion below the card, inside the bottom padding band
     < 1100px   not in the hero at all - the layout collapses and the inline
                opener in the page carries the guide instead

   Absolute positioning in every case, so mounting after load cannot move text. */
.bai-mc-hero {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}
.bai-mc-hero.is-in { opacity: 1; }
.bai-mc-hero .bai-mc-fig {
  position: relative;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .22)) drop-shadow(0 16px 26px rgba(5, 10, 22, .5));
}

/* Measured placement, not an assumed corner.
   .bai-hero IS the 1200px container, and .bai-v2 above it is `overflow: clip
   visible` - horizontal overflow is clipped, so the page gutter cannot be used
   at all. Vertical overflow IS allowed, and the hero's 96px bottom padding plus
   the next section's 64px top padding give a clear 188px band under the journey
   card. The figure is sized to stand in exactly that band:

     at 1440  card ends y729, band runs 729 -> 919 (next section's first content)
     at 1680  card ends y737, band runs 737 -> 927

   132px wide x 777/571 = 180px tall, bottom hanging 58px past the hero edge:
   top 733-741, bottom 913-921. Clear of the card above and the content below. */
@media (min-width: 1100px) {
  .bai-mc-hero {
    right: 16px;
    bottom: -58px;
    width: 128px;  /* 174px tall: the tallest that clears the card at every width */
  }
}

/* Navy bird on a navy page: without separation it disappears. A neutral,
   very low-alpha radial wash lifts it off the background - deliberately NOT
   gold, because gold-tinted surfaces are off-limits in this design system. */
.bai-mc-hero::before {
  content: "";
  position: absolute;
  inset: -12% -18% -6%;
  border-radius: 50%;
  background: radial-gradient(60% 55% at 50% 58%, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

/* Entrance: walk in from the right, settle, then change pose to the wave.
   The travel distance stays inside the figure's own box, so nothing it passes
   over can be obscured. */
/* Left to right. Both drawings face RIGHT, so an entrance travelling the other
   way has the bird walking backwards - which is exactly how the first version
   read. Direction of travel now agrees with where the character is looking. */
@keyframes baiMcWalkIn {
  from { transform: translate3d(-46%, 0, 0) scale(.97); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
@keyframes baiMcStep {
  0%, 100% { translate: 0 0; }
  25%      { translate: 0 -2.2%; }
  50%      { translate: 0 0; }
  75%      { translate: 0 -1.6%; }
}
@keyframes baiMcBreathe {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -1.1%; }
}
@keyframes baiMcHop {
  0%   { translate: 0 0; }
  35%  { translate: 0 -9%; }
  60%  { translate: 0 0; }
  75%  { translate: 0 -3%; }
  100% { translate: 0 0; }
}
.bai-mc-hero.is-walking .bai-mc-fig {
  animation:
    baiMcWalkIn calc(1100ms * var(--mc-dur, 1)) cubic-bezier(.22, .61, .36, 1) both,
    baiMcStep calc(380ms * var(--mc-dur, 1)) steps(1, end) 0s 3;
}
.bai-mc-hero.is-settled .bai-mc-fig {
  animation: baiMcBreathe calc(4200ms * var(--mc-dur, 1)) ease-in-out infinite;
}
.bai-mc-hero.is-celebrating .bai-mc-fig {
  animation: baiMcHop calc(720ms * var(--mc-dur, 1)) cubic-bezier(.3, .8, .4, 1) 1;
}
@media (max-width: 1099px) {
  .bai-mc-hero { display: none; }
}
/* 0.1.3: standing on the top edge of the hero's side panel, feet on its border. */
@media (min-width: 1100px) {
  .bai-mc-hero.is-perched { right: 28px; bottom: 100%; width: 104px; margin-bottom: -5px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .bai-mc-hero.is-perched { width: 86px; }   /* 1100: the panel sits higher; keeps the head clear of the header */
}

/* --------------------------------------------------------- chevron motif
   The brand's double forward arrow. One glyph, one animation, reused by the
   hero, the quest, the note and the flight path. */
.bai-mc-chevrons { width: 1.9em; height: 1.35em; color: var(--mc-gold); overflow: visible; }
.bai-mc-chevrons__a, .bai-mc-chevrons__b { opacity: .45; }
@keyframes baiMcChev {
  0%   { opacity: .35; transform: translateX(-12%); }
  40%  { opacity: 1; }
  100% { opacity: .45; transform: translateX(0); }
}
.is-pulsing .bai-mc-chevrons__a { animation: baiMcChev calc(620ms * var(--mc-dur, 1)) ease-out both; }
.is-pulsing .bai-mc-chevrons__b { animation: baiMcChev calc(620ms * var(--mc-dur, 1)) ease-out calc(90ms * var(--mc-dur, 1)) both; }

/* --------------------------------------------------------- guide launcher
   Bottom LEFT on desktop: bottom-right belongs to the WhatsApp launcher
   (z-index 9985) and the bottom edge on phones to the mobile action bar
   (9990). This sits below both on purpose. */
.bai-mc-root.is-js .bai-mc-launch {
  position: fixed;
  left: 22px;
  bottom: 24px;
  z-index: 9984;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--mc-line);
  border-radius: 999px;
  background: var(--mc-navy);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(5, 10, 22, .34);
  translate: 0 0;
  transition: translate 220ms cubic-bezier(.22, .61, .36, 1), box-shadow 220ms ease, opacity 220ms ease;
  /* Arrives rather than pops: the script appends it after load, so it fades up
     once from just below its resting position. */
  animation: baiMcLaunchIn calc(420ms * var(--mc-dur, 1)) cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes baiMcLaunchIn {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}
.bai-mc-launch__av {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mc-navy-deep);
  border: 1px solid var(--mc-line);
}
.bai-mc-launch__av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.bai-mc-launch:hover { translate: 0 -3px; box-shadow: 0 16px 32px rgba(5, 10, 22, .42); }
.bai-mc-launch:focus-visible { outline: 3px solid #4C8DFF; outline-offset: 3px; }
.bai-mc-launch[hidden] { display: none !important; }

@media (max-width: 700px) {
  .bai-mc-root.is-js .bai-mc-launch:active { translate: 0 1px; }
}

/* ------------------------------------------------------------ guide panel */
.bai-mc-root.is-js .bai-mc-guide {
  display: block;
  position: fixed;
  left: 22px;
  bottom: 84px;
  z-index: 9984;
  width: min(336px, calc(100vw - 44px));
  padding: 18px 18px 14px;
  border: 1px solid var(--mc-line);
  border-radius: 18px;
  background: var(--mc-navy);
  color: #fff;
  box-shadow: 0 22px 48px rgba(5, 10, 22, .46);
  opacity: 0;
  visibility: hidden;
  translate: 0 10px;
  transition: opacity 240ms ease, translate 240ms cubic-bezier(.22, .61, .36, 1), visibility 0s linear 240ms;
}
.bai-mc-root.is-js .bai-mc-guide.is-open {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity 240ms ease, translate 240ms cubic-bezier(.22, .61, .36, 1), visibility 0s;
}
.bai-mc-root.is-js .bai-mc-guide__t {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  padding-right: 28px;
}
.bai-mc-root.is-js .bai-mc-guide__list { list-style: none; margin: 0; padding: 0; }
.bai-mc-root.is-js .bai-mc-guide__list li { margin: 0; }
.bai-mc-root.is-js .bai-mc-guide__list a {
  display: block;
  padding: 10px 12px;
  border-radius: 11px;
  color: #E8ECF6;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
  translate: 0 0;
  transition: background-color 180ms ease, translate 180ms ease, color 180ms ease;
}
.bai-mc-root.is-js .bai-mc-guide__list a:hover,
.bai-mc-root.is-js .bai-mc-guide__list a:focus-visible {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  translate: 3px 0;
}
.bai-mc-root.is-js .bai-mc-guide__list a:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 1px; }
.bai-mc-root.is-js .bai-mc-guide__list li + li { border-top: 1px solid rgba(255, 255, 255, .07); }

/* The bird's acknowledgement when the panel opens: it looks toward the panel
   (a small lean) and the chest chevrons pulse once. */
.bai-mc-panel-bird {
  position: absolute;
  right: 12px;
  top: -46px;
  width: 64px;
  pointer-events: none;
}
.bai-mc-panel-bird .bai-mc-fig { rotate: 0deg; transition: rotate 320ms cubic-bezier(.22, .61, .36, 1); }
.is-open .bai-mc-panel-bird .bai-mc-fig { rotate: -5deg; }

.bai-mc-guide__x, .bai-mc-guide__pref {
  position: absolute;
  background: none;
  border: 0;
  color: #AFBAD0;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 6px;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
}
.bai-mc-guide__x { top: 12px; right: 10px; font-size: 18px; line-height: 1; }
.bai-mc-guide__x:hover, .bai-mc-guide__pref:hover { color: #fff; }
.bai-mc-guide__x:focus-visible, .bai-mc-guide__pref:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.bai-mc-guide__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.bai-mc-guide__pref { position: static; }

@media (max-width: 760px) {
  /* Phones: the panel is a sheet, and it is only ever opened from an inline
     button inside the page, never from a floating corner button. */
  .bai-mc-root.is-js .bai-mc-guide {
    left: 0; right: 0; bottom: 0;
    width: auto;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 9992;
  }
  .bai-mc-panel-bird { display: none; }
}

/* ------------------------------------------------------- inline launcher
   The in-page way into the guide. Used on phones, and anywhere an editor drops
   the shortcode. */
.bai-mc-inline { margin: 0; }
.bai-mc-inline figcaption { font-size: 14px; color: #4B5670; margin-top: 8px; }

/* ----------------------------------------------------- quest flight path
   Drawn above the journey finder's own progress bar, driven by its real state.
   The quest's markup and script are untouched; this only reads them. */
.bai-mc-route { position: relative; margin: 26px 0 10px; }
.bai-mc-route svg { display: block; width: 100%; height: 46px; overflow: visible; }
.bai-mc-route__base { stroke: rgba(255, 255, 255, .16); stroke-width: 2; fill: none; stroke-linecap: round; }
.bai-mc-route__done {
  stroke: var(--mc-gold-light);
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: var(--mc-len, 600);
  stroke-dashoffset: calc(var(--mc-len, 600) - var(--mc-len, 600) * var(--mc-p, 0));
  transition: stroke-dashoffset calc(620ms * var(--mc-dur, 1)) cubic-bezier(.22, .61, .36, 1);
}
.bai-mc-route__node { fill: var(--mc-navy-deep); stroke: rgba(255, 255, 255, .22); stroke-width: 2; }
.bai-mc-route__node.is-done { fill: var(--mc-gold); stroke: var(--mc-gold-light); }
.bai-mc-route__bird {
  position: absolute;
  /* The path sits at y30 of the 46px box; the figure's feet land on it. */
  top: -26px;
  left: 0;
  width: 40px;
  margin-left: -20px;
  translate: var(--mc-x, 0) 0;
  transition: translate calc(620ms * var(--mc-dur, 1)) cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.bai-mc-route__bird img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------- compass + route
   Study-abroad: a compass that settles once when the section is reached, and a
   curved route between two markers the page itself names. */
.bai-mc-compass { width: 72px; height: 72px; color: var(--mc-gold-light); }
.bai-mc-compass__needle { transform-origin: 50% 50%; transform: rotate(-38deg); }
@keyframes baiMcNeedle {
  0%   { transform: rotate(-150deg); }
  55%  { transform: rotate(-20deg); }
  78%  { transform: rotate(-46deg); }
  100% { transform: rotate(-38deg); }
}
.is-settling .bai-mc-compass__needle { animation: baiMcNeedle calc(1400ms * var(--mc-dur, 1)) cubic-bezier(.3, .8, .35, 1) both; }

@keyframes baiMcDraw { to { stroke-dashoffset: 0; } }
.bai-mc-arc {
  fill: none;
  stroke: var(--mc-gold-light);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: var(--mc-len, 400);
  stroke-dashoffset: var(--mc-len, 400);
}
.is-drawn .bai-mc-arc { animation: baiMcDraw calc(1000ms * var(--mc-dur, 1)) cubic-bezier(.4, .1, .2, 1) both; }

/* ----------------------------------------------------------- Kuşun Notu */
.bai-mc-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 28px 0;
  padding: 18px 20px;
  border: 1px solid var(--bai-line, #E4E8F0);
  border-left: 3px solid var(--mc-gold);
  border-radius: 14px;
  background: var(--bai-paper-2, #F7F8FB);
}
.bai-mc-note__av {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: #16233F;
}
.bai-mc-note__av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bai-mc-note__h {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 6px;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  color: #7A5A18;            /* gold TEXT on a light surface must be gold-ink */
  text-transform: uppercase;
}
.bai-mc-note__b > :first-child { margin-top: 0; }
.bai-mc-note__b > :last-child { margin-bottom: 0; }
.bai-mc-note__b { font-size: 15px; line-height: 1.6; color: #242F49; }

/* Dark sections invert the note. */
.bai-v2[data-accent] .bai-mc-note,
.bai-mc-note.is-dark {
  background: rgba(255, 255, 255, .04);
  border-color: var(--mc-line);
  border-left-color: var(--mc-gold);
}
.bai-v2[data-accent] .bai-mc-note__h, .bai-mc-note.is-dark .bai-mc-note__h { color: var(--mc-gold-light); }
.bai-v2[data-accent] .bai-mc-note__b, .bai-mc-note.is-dark .bai-mc-note__b { color: #E8ECF6; }

@keyframes baiMcNoteIn {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}
.bai-mc-note.is-revealing { animation: baiMcNoteIn calc(520ms * var(--mc-dur, 1)) cubic-bezier(.22, .61, .36, 1) both; }

/* ------------------------------------------------- step primitive
   ONE milestone list, used in three real places:
     - the editorial study timeline on English / exam pages ([bai_yol_haritasi])
     - the student Flight Path on the account overview
     - (horizontally, as .bai-mc-route) the journey finder
   `.is-tracked` is the Flight Path variant: only there does `is-done` mean
   anything, because only there is it backed by recorded lessons. */
.bai-mc-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.bai-mc-steps__step {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 10px 0 10px 2px;
  position: relative;
}
.bai-mc-steps__step + .bai-mc-steps__step::before {
  content: "";
  position: absolute;
  left: 17px; top: -10px; width: 2px; height: 20px;
  background: rgba(255, 255, 255, .14);
}
.bai-mc-steps__dot {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22);
  font-weight: 700; font-size: 14px;
  color: #AFBAD0;
}
.bai-mc-steps__txt strong { display: block; font-size: 15px; }
.bai-mc-steps__txt span { display: block; font-size: 14px; color: #8B95AC; }

/* On light surfaces the connector and dot need the light-side tokens. */
.bai-mc-plan:not(.is-dark) .bai-mc-steps__step + .bai-mc-steps__step::before { background: #E4E8F0; }
.bai-mc-plan:not(.is-dark) .bai-mc-steps__dot { border-color: #E4E8F0; color: #4B5670; }
.bai-mc-plan:not(.is-dark) .bai-mc-steps__txt span { color: #4B5670; }

/* Reached milestones, Flight Path only. */
.bai-mc-steps.is-tracked .bai-mc-steps__step.is-done + .bai-mc-steps__step::before { background: var(--mc-gold); }
.bai-mc-steps.is-tracked .bai-mc-steps__step.is-done .bai-mc-steps__dot {
  border-color: var(--mc-gold);
  background: var(--mc-gold);
  color: #1A1206;
}

@keyframes baiMcStepIn {
  from { opacity: 0; translate: -8px 0; }
  to   { opacity: 1; translate: 0 0; }
}
.is-revealing .bai-mc-steps__step {
  animation: baiMcStepIn calc(420ms * var(--mc-dur, 1)) ease-out both;
  animation-delay: calc(var(--mc-i, 0) * 90ms * var(--mc-dur, 1));
}

/* --------------------------------------------- editorial study timeline */
.bai-mc-plan {
  margin: 28px 0;
  padding: 20px 22px;
  border: 1px solid var(--bai-line, #E4E8F0);
  border-radius: 16px;
}
.bai-v2[data-accent] .bai-mc-plan, .bai-mc-plan.is-dark { border-color: var(--mc-line); }
.bai-mc-plan__head { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.bai-mc-plan__bird { flex: none; width: 64px; }
.bai-mc-plan__bird img { display: block; width: 100%; height: auto; }
.bai-mc-plan__t {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: 18px;
}
.bai-mc-plan__t .bai-mc-chev { display: inline-flex; }

/* --------------------------------------------------------- flight path */
.bai-mc-fp { margin: 24px 0; }
.bai-mc-fp__t { font-size: 20px; margin: 0 0 14px; }
.bai-mc-fp__note { font-size: 13px; color: #8B95AC; margin-top: 12px; }
.bai-mc-fp__empty { color: #AFBAD0; }
.bai-mc-fp__cta { margin-top: 14px; }

/* Celebration: a contained gold accent on a milestone that was genuinely
   reached for the first time. Never fires on a plain page refresh. */
@keyframes baiMcSpark {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--sx, 0), var(--sy, -22px)) scale(1); }
}
.bai-mc-spark {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--mc-gold-light);
  pointer-events: none;
  animation: baiMcSpark calc(900ms * var(--mc-dur, 1)) ease-out both;
  animation-delay: var(--sd, 0ms);
}

/* ------------------------------------------------ application checklist */
.bai-mc-cl {
  text-align: left;
  margin: 30px 0;
  padding: 20px 22px;
  border: 1px solid var(--mc-line);
  border-radius: 16px;
}
.bai-mc-cl__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
  margin-bottom: 14px;
}
.bai-mc-cl__t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.bai-mc-cl__count { margin: 0; font-size: 13px; color: #AFBAD0; }
.bai-mc-cl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bai-mc-cl__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: start;
  padding: 10px 2px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.bai-mc-cl__item:first-child { border-top: 0; }
.bai-mc-cl__box {
  /* A real checkbox, sized for a finger, never a styled div. */
  width: 22px; height: 22px;
  margin: 2px 0 0;
  accent-color: #B98A2E;
  cursor: pointer;
}
.bai-mc-cl__box:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.bai-mc-cl__label { cursor: pointer; }
.bai-mc-cl__label strong { display: block; font-size: 15px; font-weight: 600; }
.bai-mc-cl__label span { display: block; font-size: 14px; color: #AFBAD0; margin-top: 2px; }
/* Done is marked by the tick and by weight, not by colour alone, and the text
   is never struck through - a completed step still has to be readable. */
.bai-mc-cl__item.is-done .bai-mc-cl__label strong { color: #AFBAD0; font-weight: 500; }

.bai-mc-cl__date {
  grid-column: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 6px;
}
.bai-mc-cl__datelbl { font-size: 12px; color: #8B95AC; }
.bai-mc-cl__datein {
  padding: 5px 9px;
  border: 1px solid var(--mc-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  color: #E8ECF6;
  font-size: 13px;
  color-scheme: dark;
}
.bai-mc-cl__datein:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.bai-mc-cl__left { font-size: 12px; font-weight: 600; color: #AFBAD0; }
.bai-mc-cl__left.is-soon { color: var(--mc-gold-light); }
.bai-mc-cl__left.is-past { color: #E79A8E; }
.bai-mc-cl__foot { margin: 14px 0 0; }
.bai-mc-cl__reset {
  padding: 7px 14px;
  border: 1px solid var(--mc-line);
  border-radius: 999px;
  background: none;
  color: #AFBAD0;
  font-size: 13px;
  cursor: pointer;
}
.bai-mc-cl__reset:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.bai-mc-cl__reset:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.bai-mc-cl__note { margin: 12px 0 0; font-size: 13px; color: #8B95AC; max-width: 62ch; }

/* ----------------------------------------------------- mini activities */
.bai-mc-act {
  /* Section styling on some pages centres everything; practice content has to
     stay left-aligned to be readable. */
  text-align: left;
  margin: 30px 0;
  padding: 20px 22px;
  border: 1px solid var(--mc-line);
  border-radius: 16px;
}
.bai-mc-act__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bai-mc-act__bird {
  flex: none; width: 46px; height: 46px;
  border-radius: 50%; overflow: hidden; background: var(--mc-navy-deep);
}
.bai-mc-act__bird img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bai-mc-act__t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.bai-mc-act__q { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.bai-mc-act__q:focus { outline: none; }
.bai-mc-act__opts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.bai-mc-act__opt {
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid var(--mc-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: #E8ECF6;
  font-size: 15px;
  cursor: pointer;
  translate: 0 0;
  transition: background-color 180ms ease, border-color 180ms ease, translate 180ms ease;
}
.bai-mc-act__opt:hover:not(:disabled) { background: rgba(255, 255, 255, .08); translate: 2px 0; }
.bai-mc-act__opt:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.bai-mc-act__opt:disabled { cursor: default; }
/* Right and wrong are never colour alone: the marks carry the meaning. */
.bai-mc-act__opt.is-right { border-color: #14805E; background: rgba(20, 128, 94, .18); }
.bai-mc-act__opt.is-right::before { content: "✓ "; font-weight: 700; }
.bai-mc-act__opt.is-wrong { border-color: #A33A2E; background: rgba(163, 58, 46, .18); }
.bai-mc-act__opt.is-wrong::before { content: "✕ "; font-weight: 700; }
.bai-mc-act__fb:empty { display: none; }
.bai-mc-act__fb { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.bai-mc-act__rev { margin-top: 12px; }
.bai-mc-act__rev summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--mc-gold-light); }
.bai-mc-act__rev summary:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.bai-mc-act__a { margin: 10px 0 2px; font-size: 16px; font-weight: 600; }
.bai-mc-act__ex { margin: 6px 0 0; font-size: 14px; color: #AFBAD0; }
.bai-mc-act__more { margin: 14px 0 0; }
.bai-mc-act__next {
  padding: 8px 16px;
  border: 1px solid var(--mc-line);
  border-radius: 999px;
  background: none;
  color: #E8ECF6;
  font-size: 14px;
  cursor: pointer;
}
.bai-mc-act__next:hover { background: rgba(255, 255, 255, .07); }
.bai-mc-act__next:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.bai-mc-act__note { margin: 14px 0 0; font-size: 13px; color: #8B95AC; }
@media (max-width: 700px) { .bai-mc-act__opt:active:not(:disabled) { translate: 0 1px; } }

/* ------------------------------------------------------- FAQ navigator */
.bai-mc-faq {
  max-width: 1200px;
  margin: 8px auto 4px;
  padding: 0 clamp(16px, 4vw, 40px);
}
.bai-mc-faq__label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.bai-mc-faq__in {
  width: 100%;
  max-width: 420px;
  padding: 11px 14px;
  border: 1px solid var(--mc-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: 15px;
}
.bai-mc-faq__in::placeholder { color: #8B95AC; }
.bai-mc-faq__in:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.bai-mc-faq__count { margin: 8px 0 0; font-size: 13px; color: #AFBAD0; }
/* 0.1.3: inside the FAQ section's own heading (one FAQ group on the page). */
.bai-mc-faq.is-in-head { max-width: 26rem; margin: 24px 0 0; padding: 0; text-align: left; }
.bai-mc-faq.is-in-head .bai-mc-faq__in { max-width: none; }
.bai-section-head--center .bai-mc-faq.is-in-head { margin-inline: auto; text-align: center; }

/* --------------------------------------------------- country explorer */
.bai-mc-countries {
  position: relative;
  margin: 26px 0;
  padding: 20px 22px;
  border: 1px solid var(--mc-line);
  border-radius: 16px;
}
.bai-mc-countries__arc {
  position: absolute;
  top: 16px; right: 18px;
  opacity: .55;
  pointer-events: none;
}
.bai-mc-countries__arc .bai-mc-compass { width: 42px; height: 42px; }
/* Keep the heading and chips clear of the compass corner. */
@media (min-width: 701px) { .bai-mc-countries { padding-right: 78px; } }
.bai-mc-countries__t {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: 17px; font-weight: 700;
}
.bai-mc-countries__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.bai-mc-countries__chip {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--mc-line);
  border-radius: 999px;
  color: #E8ECF6;
  text-decoration: none;
  font-size: 14px;
  translate: 0 0;
  transition: background-color 180ms ease, border-color 180ms ease, translate 180ms ease;
}
.bai-mc-countries__chip:hover, .bai-mc-countries__chip:focus-visible {
  background: rgba(255, 255, 255, .07);
  border-color: var(--mc-gold);
  translate: 0 -2px;
}
.bai-mc-countries__chip:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 2px; }
.bai-mc-countries__chip.is-current { border-color: var(--mc-gold); color: var(--mc-gold-light); }
.bai-mc-countries__note { margin: 14px 0 0; font-size: 13px; color: #AFBAD0; max-width: 56ch; }
@media (max-width: 700px) {
  .bai-mc-countries__arc { display: none; }
  .bai-mc-countries__chip:active { translate: 0 1px; }
}

/* ----------------------------------------------- next-lesson countdown */
.bai-mc-countdown {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--mc-gold-light);
}

/* ------------------------------------------------------------------ 404 */
.bai-mc-404 {
  display: flex; gap: 20px; align-items: flex-start;
  margin: 24px 0 8px;
  padding: 20px 22px;
  border: 1px solid var(--mc-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
}
.bai-mc-404.is-compact { align-items: center; padding: 14px 18px; }
.bai-mc-404.is-compact .bai-mc-404__bird { width: 72px; }
.bai-mc-404.is-compact .bai-mc-404__lede { margin-bottom: 0; }
.bai-mc-404__bird { flex: none; width: 96px; }
.bai-mc-404__bird img { display: block; width: 100%; height: auto; }
.bai-mc-404__t { margin: 0 0 4px; font-size: 18px; }
.bai-mc-404__lede { margin: 0 0 12px; font-size: 15px; color: #AFBAD0; }
.bai-mc-404__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bai-mc-404__links a {
  display: block; padding: 8px 10px; border-radius: 10px;
  color: #E8ECF6; text-decoration: none; font-size: 14px;
  translate: 0 0;
  transition: background-color 180ms ease, translate 180ms ease;
}
.bai-mc-404__links a:hover, .bai-mc-404__links a:focus-visible {
  background: rgba(255, 255, 255, .07); translate: 3px 0;
}
@media (max-width: 600px) {
  .bai-mc-404 { flex-direction: column; align-items: center; text-align: center; }
  .bai-mc-404__links a { text-align: left; }
}

/* ------------------------------------------------------------ learning
   English / exam pages: one restrained reveal on the study strip. */
.bai-mc-strip { display: flex; gap: 16px; align-items: center; margin: 22px 0; }
.bai-mc-strip__fig { flex: none; width: 110px; }
.bai-mc-strip__txt { font-size: 15px; line-height: 1.55; }

/* ============================ motion off =================================
   Three gates, one result: nothing moves, nothing is lost. Every element that
   an animation would have revealed is left in its finished state. */
@media (prefers-reduced-motion: reduce) {
  :root, :root * { --mc-dur: 0.001 !important; }
}
[data-mc-motion="off"], [data-mc-motion="off"] * { --mc-dur: 0.001 !important; }

[data-mc-motion="off"] .bai-mc-hero .bai-mc-fig,
[data-mc-motion="off"] .is-revealing .bai-mc-steps__step,
[data-mc-motion="off"] .bai-mc-note.is-revealing,
[data-mc-motion="off"] .is-settling .bai-mc-compass__needle,
[data-mc-motion="off"] .is-drawn .bai-mc-arc,
[data-mc-motion="off"] .bai-mc-spark {
  animation: none !important;
}
[data-mc-motion="off"] .bai-mc-arc { stroke-dashoffset: 0 !important; }
[data-mc-motion="off"] .bai-mc-spark { display: none !important; }
[data-mc-motion="off"] .bai-mc-hero { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .bai-mc-hero .bai-mc-fig,
  .is-revealing .bai-mc-steps__step,
  .bai-mc-note.is-revealing,
  .is-settling .bai-mc-compass__needle,
  .bai-mc-spark { animation: none !important; }
  .bai-mc-arc { stroke-dashoffset: 0 !important; }
  .bai-mc-spark { display: none !important; }
  .bai-mc-hero { opacity: 1 !important; }
  .bai-mc-route__done, .bai-mc-route__bird { transition: none !important; }
}

/* Paused when scrolled out of view: an idle loop must not burn a phone's
   battery below the fold. .is-paused goes on every figure's host (hero, peek,
   corner, in-flow, walk-by strip), and play-state is not inherited, so each
   animated layer is named. !important because every loop is set with the
   `animation` shorthand in more specific rules (.bai-mc-hero.is-settled
   .bai-mc-fig and friends), and the shorthand resets play-state to running.
   This pauses the animation; it never touches the property being animated. */
.is-paused .bai-mc-fig,
.is-paused .bai-mc-moment,
.is-paused .bai-mc-rig,
.is-paused .bai-mc-rig__body,
.is-paused .bai-mc-rig__wing { animation-play-state: paused !important; }

/* Compass and arc wrappers used when a page has no dedicated mascot slot. */
.bai-mc-compass-wrap { display: flex; justify-content: center; margin: 8px 0 -8px; }
.bai-mc-route-arc { display: block; width: 100%; max-width: 420px; height: auto; color: #E7C77E; margin: 10px auto 0; }
.bai-mc-launch__hint { opacity: .55; margin-left: 2px; }

/* =================================================== mascot moments
   The same two real poses, placed and moved differently so the character
   appears around the site instead of only in the hero.

   What these are: new COMPOSITIONS and new MOVEMENT - peeking out from behind
   a panel, walking in from the margin, crossing a strip. What they are not:
   new gestures. A pointing wing, a head turn, a read or a two-winged cheer are
   drawings we do not have, and nothing here pretends otherwise. See
   docs/mascot-animation-asset-request.md.

   Every moment is decorative (aria-hidden, pointer-events:none), plays once on
   entering view, and stops entirely when motion is off. */

.bai-mc-moment {
  position: absolute;
  pointer-events: none;
  z-index: 3;
}
.bai-mc-moment .bai-mc-fig { filter: drop-shadow(0 14px 22px rgba(5, 10, 22, .45)); }
.bai-mc-moment img { display: block; width: 100%; height: auto; }

/* ---- peek: rises from behind a panel's top edge.
   The wrapper clips, so the body below the edge is genuinely hidden behind the
   panel rather than drawn on top of it. */
.bai-mc-moment--peek {
  overflow: hidden;
  width: var(--mc-w, 118px);
  height: var(--mc-h, 86px);
  top: calc(0px - var(--mc-h, 86px) + 2px);
  left: var(--mc-left, 32px);
}
.bai-mc-moment--peek .bai-mc-fig {
  position: absolute;
  left: 0;
  /* TOP-anchored, not bottom: the clip has to cut the bird off below the
     shoulders so the body reads as hidden behind the panel. Anchored to the
     bottom it showed the legs and shoes above the panel edge instead. */
  top: 0;
  width: 100%;
  translate: 0 100%;
}
.bai-mc-moment--peek.is-on .bai-mc-fig {
  animation: baiMcPeek calc(900ms * var(--mc-dur, 1)) cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes baiMcPeek {
  0%   { translate: 0 100%; }
  70%  { translate: 0 -6%; }
  100% { translate: 0 0; }
}

/* ---- corner: walks in from the margin, stops, turns to the reader. */
.bai-mc-moment--corner {
  width: var(--mc-w, 132px);
  bottom: var(--mc-bottom, 0px);
  opacity: 0;
}
.bai-mc-moment--corner.is-left  { left: var(--mc-side, 0px); }
.bai-mc-moment--corner.is-right { right: var(--mc-side, 0px); }
.bai-mc-moment--corner.is-on { opacity: 1; }
.bai-mc-moment--corner.is-on .bai-mc-fig {
  animation:
    baiMcCornerIn calc(1150ms * var(--mc-dur, 1)) cubic-bezier(.22, .61, .36, 1) both,
    baiMcStep calc(380ms * var(--mc-dur, 1)) steps(1, end) 0s 3;
}
.bai-mc-moment--corner.is-settled .bai-mc-fig {
  animation: baiMcBreathe calc(4200ms * var(--mc-dur, 1)) ease-in-out infinite;
}
@keyframes baiMcCornerIn {
  from { transform: translate3d(var(--mc-from, -55%), 0, 0) scale(.97); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}

/* ---- walk-by: crosses a strip once, then is gone. */
.bai-mc-strip-walk {
  position: relative;
  height: var(--mc-h, 120px);
  margin: 10px 0 -10px;
  overflow: hidden;
  pointer-events: none;
}
.bai-mc-strip-walk .bai-mc-moment--walkby {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--mc-w, 104px);
  opacity: 0;
}
.bai-mc-strip-walk.is-on .bai-mc-moment--walkby {
  animation: baiMcWalkBy calc(5200ms * var(--mc-dur, 1)) linear both;
}
.bai-mc-strip-walk.is-on .bai-mc-fig {
  animation: baiMcStep calc(400ms * var(--mc-dur, 1)) steps(1, end) 0s 13;
}
@keyframes baiMcWalkBy {
  0%   { transform: translateX(-120%); opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 20%)); opacity: 0; }
}

@media (max-width: 860px) {
  /* Phones get the peek only: a figure walking in from a margin needs a margin,
     and at this width there isn't one. */
  .bai-mc-moment--corner, .bai-mc-strip-walk { display: none; }
  .bai-mc-moment--peek { --mc-w: 88px; --mc-h: 64px; }
}

/* Motion off: the peek rests in place, the others simply do not appear. */
[data-mc-motion="off"] .bai-mc-moment--peek .bai-mc-fig { animation: none !important; translate: 0 0 !important; }
[data-mc-motion="off"] .bai-mc-moment--corner { opacity: 1 !important; }
[data-mc-motion="off"] .bai-mc-moment--corner .bai-mc-fig { animation: none !important; }
[data-mc-motion="off"] .bai-mc-strip-walk { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .bai-mc-moment--peek .bai-mc-fig { animation: none !important; translate: 0 0 !important; }
  .bai-mc-moment--corner { opacity: 1 !important; }
  .bai-mc-moment--corner .bai-mc-fig { animation: none !important; }
  .bai-mc-strip-walk { display: none !important; }
}


/* ===================================================== the wing rig
   Two layers cut from the waving render (tools/mascot-rig.py): the body, and
   the raised wing pivoting at the shoulder. The wing is the only part of this
   drawing that can rotate without tearing, because it sits over empty
   background rather than over the body.

   The rotation range is set per-rig by --mc-wave-deg and must not be raised by
   hand: past the angle the cut was made for, the sliver of wing left on the
   body layer stops being covered and a seam appears. */

.bai-mc-rig { position: relative; display: block; line-height: 0; }
.bai-mc-rig__body { display: block; width: 100%; height: auto; }
.bai-mc-rig__wing {
  position: absolute;
  height: auto;
  /* transform-origin and placement come from the manifest, inline. */
  will-change: transform;
}

/* The amplitude is a UNITLESS custom property multiplied by 1deg. An earlier
   version wrote `calc(-1 * var(--mc-wave-deg, 6deg))` with the var carrying the
   unit: the declaration parsed, the animation attached, and the computed angle
   stayed 0deg at every sample - it never interpolated. A plain number times a
   unit is the form that actually animates. */
@keyframes baiMcWave {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(calc(var(--mc-wave, 6) * -1deg)); }
  32%  { transform: rotate(calc(var(--mc-wave, 6) * 1deg)); }
  52%  { transform: rotate(calc(var(--mc-wave, 6) * -0.82deg)); }
  72%  { transform: rotate(calc(var(--mc-wave, 6) * 0.72deg)); }
  88%  { transform: rotate(calc(var(--mc-wave, 6) * -0.3deg)); }
  100% { transform: rotate(0deg); }
}
.bai-mc-rig.is-waving .bai-mc-rig__wing {
  animation: baiMcWave calc(1900ms * var(--mc-dur, 1)) cubic-bezier(.4, .05, .35, 1) 1;
}

/* The whole figure leans into the wave. Without it the wing reads as a limb
   rotating on a statue; with it the body is part of the gesture, which is what
   makes the movement look like a character rather than a transform.
   The lean lives on the container (transform) and the breathe on the body image
   (translate), so the two never overwrite each other. */
@keyframes baiMcLean {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(-1.4deg); }
  46%  { transform: rotate(1.5deg); }
  74%  { transform: rotate(-0.9deg); }
  100% { transform: rotate(0deg); }
}
.bai-mc-rig.is-waving {
  transform-origin: 52% 96%;
  animation: baiMcLean calc(1900ms * var(--mc-dur, 1)) cubic-bezier(.4, .05, .35, 1) 1;
}

/* A rigged figure still breathes, so the wave reads as part of a living pose
   rather than a lone rotating limb. */
.bai-mc-rig__body { transform-origin: 50% 100%; }
.is-settled .bai-mc-rig__body,
.bai-mc-moment--peek.is-on .bai-mc-rig__body {
  animation: baiMcBreathe calc(4200ms * var(--mc-dur, 1)) ease-in-out infinite;
}

/* Stopping the motion means stopping the ANIMATION. An earlier version also
   wrote `transform: none !important` here as belt and braces, and that one
   declaration flattened the wing to identity at all times - the wave attached,
   ran, and rendered as nothing. Never kill a property the animation needs to
   use; kill the animation. */
[data-mc-motion="off"] .bai-mc-rig.is-waving,
[data-mc-motion="off"] .bai-mc-rig.is-waving .bai-mc-rig__wing,
[data-mc-motion="off"] .bai-mc-rig__body { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .bai-mc-rig.is-waving,
  .bai-mc-rig.is-waving .bai-mc-rig__wing,
  .bai-mc-rig__body { animation: none !important; }
}


/* ============================================ the in-page opener
   On a phone this is the mascot: the hero figure is hidden below 1100px, the
   floating launcher below 760, and the walking moments below 861. It was a
   plain text link, which meant a phone visitor saw no character at all. */
.bai-mc-inline-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 7px 14px 7px 7px;
  border: 1px solid var(--mc-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: #E8ECF6;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  translate: 0 0;
  transition: background-color 200ms ease, translate 200ms ease, border-color 200ms ease;
}
.bai-mc-inline-open__av {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--mc-navy-deep);
  border: 1px solid var(--mc-line);
}
.bai-mc-inline-open__av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bai-mc-inline-open__hint { opacity: .5; }
.bai-mc-inline-open:hover { background: rgba(255, 255, 255, .09); border-color: var(--mc-gold); }
.bai-mc-inline-open:focus-visible { outline: 3px solid #4C8DFF; outline-offset: 3px; }
.bai-mc-inline-open:active { translate: 0 1px; }
.bai-mc-inline-open[hidden] { display: none !important; }

/* On a light section the chip needs the light-side tokens. */
body:not(.home) .entry-content .bai-mc-inline-open { color: #242F49; border-color: #E4E8F0; background: #F7F8FB; }


/* ------------------------------------------------- in-flow appearance
   Takes its own row, so it can never sit on top of anything. Used on phones,
   where no overlay position exists that is not already spoken for. */
.bai-mc-inflow {
  display: flex;
  justify-content: center;
  margin: 6px 0 -10px;
  pointer-events: none;
}
.bai-mc-inflow .bai-mc-fig {
  width: clamp(132px, 14vw, 180px);
  opacity: 0;
  translate: 0 14px;
  transition: opacity 520ms ease, translate 520ms cubic-bezier(.22, .61, .36, 1);
  filter: drop-shadow(0 14px 22px rgba(5, 10, 22, .45));
}
.bai-mc-inflow.is-on .bai-mc-fig { opacity: 1; translate: 0 0; }
.bai-mc-inflow img { display: block; width: 100%; height: auto; }
[data-mc-motion="off"] .bai-mc-inflow .bai-mc-fig { opacity: 1; translate: 0 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .bai-mc-inflow .bai-mc-fig { opacity: 1; translate: 0 0; transition: none; }
}