/* Load last. Player chrome only; progress fill and viewport offsets stay JS-owned. */
.learn-player .learn-progress {
  position:relative;
  box-sizing:content-box;
  min-width:0;
  height:4px;
  column-gap:min(2px,calc(25% / var(--segments,1)));
  padding-bottom:12px;
  overflow:visible;
}

.learn-player .learn-progress .learn-progress-segment {
  position:relative;
  min-width:0;
  overflow:visible;
}

.learn-player .learn-progress-segment.is-current-step::before {
  content:"";
  position:absolute;
  top:7px;
  left:50%;
  width:0;
  height:0;
  margin:0;
  border-style:solid;
  border-width:0 3px 4px;
  border-color:transparent transparent var(--primary);
  transform:translateX(-50%);
  pointer-events:none;
}

.learn-player > .learn-footer,
.learn-player.learn-review > .learn-footer {
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
  grid-template-columns:auto minmax(0,1fr) minmax(0,2fr);
  gap:12px 20px;
  padding:20px 24px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  box-shadow:var(--shadow-soft);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.learn-player > .learn-footer > .btn:first-child {
  min-width:44px;
  min-height:44px;
  max-width:100%;
}

.learn-player > .learn-footer > small {
  min-width:0;
  overflow-wrap:anywhere;
}

.learn-player .learn-footer-actions {
  display:flex;
  min-width:0;
  max-width:100%;
  justify-content:flex-end;
  justify-self:stretch;
  flex-wrap:wrap;
  gap:8px;
}

.learn-player .learn-footer-actions .btn {
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  min-height:44px;
  padding:10px 16px;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.4;
}

.learn-player .learn-footer .btn svg {
  flex-shrink:0;
}

.learn-player .learn-footer .btn:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px;
}

/* Shared-media results keep their existing two-column/status-row contract. */
.learn-player > .learn-footer.learn-shared-results {
  grid-template-columns:auto minmax(0,1fr);
}

html.learning-mode .scroll-top-button {
  bottom:calc(var(--scroll-top-keyboard-offset,0px) + var(--learn-footer-height,80px) + 12px);
}
html.learning-mode .support-launcher {
  bottom:calc(var(--learn-footer-height,80px) + 12px) !important;
}

@media (max-width:1000px) {
  .learn-player > .learn-footer,
  .learn-player.learn-review > .learn-footer {
    grid-template-columns:auto minmax(0,1fr);
  }
  .learn-player > .learn-footer > small { display:none; }
}

@media (max-width:700px), (max-height:500px) and (pointer:coarse) {
  html.learning-mode .learn-player { animation:none; }

  html.learning-mode .learn-player > .learn-footer {
    position:fixed;
    inset-inline:0;
    bottom:var(--learn-keyboard-offset,0px);
    z-index:40;
    width:auto;
    max-width:none;
    margin:0;
    grid-template-columns:44px minmax(0,1fr);
    gap:8px;
    padding:12px max(12px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    border-radius:20px 20px 0 0;
    touch-action:manipulation;
  }

  html.learning-mode .learn-player > .learn-footer > .btn:first-child {
    width:44px;
    min-width:44px;
    min-height:44px;
    padding:10px;
    font-size:0;
  }

  html.learning-mode .learn-player .learn-footer-actions { width:100%; }
  html.learning-mode .learn-player .learn-footer-actions .btn {
    flex:1 1 96px;
    min-width:0;
    padding:9px 10px;
    font-size:13px;
  }

  /* The support FAB has no keyboard-offset binding; hide it while editing. */
  html.learning-mode:has(.learn-stage :is(input,textarea,select,[contenteditable=true]):focus) .support-launcher {
    visibility:hidden;
    pointer-events:none;
  }
}