/* Keep the configurable word steps on one row even under viewport-fit rules. */
html:root .learning-main-canvas .learning-footer-controls:has([data-word-step-strip]) {
  flex-flow:row nowrap!important;min-width:0!important;gap:6px!important;
}
html:root .learning-main-canvas .learning-footer-controls:has([data-word-step-strip]) > :first-child,
html:root .learning-main-canvas .learning-footer-controls:has([data-word-step-strip]) > :last-child {
  min-width:0!important;flex:1 1 0!important;
}
html:root .learning-main-canvas .learning-footer-controls:has([data-word-step-strip]) > :is(:first-child,:last-child) > div:empty {display:none!important;}
html:root .learning-main-canvas .learning-footer-controls > :has(> [data-word-step-strip]) {
  min-width:0!important;max-width:100%!important;flex:0 1 auto!important;
}
html:root .learning-main-canvas .learning-footer-controls [data-word-step-strip] {
  display:flex!important;flex-flow:row nowrap!important;white-space:nowrap!important;
  overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;
  min-width:0!important;padding:3px 3px 5px!important;gap:3px!important;
  scroll-padding-inline:3px;scrollbar-width:none;
}
html:root .learning-main-canvas .learning-footer-controls [data-word-step-strip]>button {
  flex:0 0 auto!important;white-space:nowrap!important;
  background-color:var(--color-bottom-dock-bg,rgba(12,23,49,.6))!important;
  background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.05))!important;
  box-shadow:0 2px 0 rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.06)!important;
  transition:background-color .15s,box-shadow .12s,transform .12s!important;
}
html:root .learning-main-canvas .learning-footer-controls [data-word-step-strip]>button[aria-current="step"] {
  background-color:var(--color-bottom-tab-active-bg,var(--color-accent-primary,#06b6d4))!important;
  box-shadow:0 1px 0 rgba(0,0,0,.18),inset 0 1px 2px rgba(0,0,0,.1)!important;
}
html:root .learning-main-canvas .learning-footer-controls [data-word-step-strip]>button:active {
  transform:translateY(1px)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.2)!important;
}
@media(prefers-reduced-motion:reduce){html:root .learning-main-canvas .learning-footer-controls [data-word-step-strip]>button{transition:none!important;}}

/* Size from available learning-area width and actual enabled step count. */
html:root .learning-main-canvas .learning-footer-controls:has([data-word-step-strip]) {container-type:inline-size;container-name:wordsteps;}
html:root .learning-main-canvas .learning-footer-controls [data-word-step-strip] {--word-strip-count:6;--word-strip-gaps:23px;}
html:root .learning-main-canvas .learning-footer-controls [data-word-step-strip]:has(>button:nth-child(1)):not(:has(>button:nth-child(2))) {--word-strip-count:1;--word-strip-gaps:8px;}
html:root .learning-main-canvas .learning-footer-controls [data-word-step-strip]:has(>button:nth-child(2)):not(:has(>button:nth-child(3))) {--word-strip-count:2;--word-strip-gaps:11px;}
html:root .learning-main-canvas .learning-footer-controls [data-word-step-strip]:has(>button:nth-child(3)):not(:has(>button:nth-child(4))) {--word-strip-count:3;--word-strip-gaps:14px;}
html:root .learning-main-canvas .learning-footer-controls [data-word-step-strip]:has(>button:nth-child(4)):not(:has(>button:nth-child(5))) {--word-strip-count:4;--word-strip-gaps:17px;}
html:root .learning-main-canvas .learning-footer-controls [data-word-step-strip]:has(>button:nth-child(5)):not(:has(>button:nth-child(6))) {--word-strip-count:5;--word-strip-gaps:20px;}
html:root .learning-main-canvas .learning-footer-controls [data-word-step-strip]>button {
 font-size:clamp(11px,calc(((100cqw - var(--word-strip-gaps)) / var(--word-strip-count) - 12px) / 4),14px)!important;
 padding-inline:clamp(6px,calc(((100cqw - var(--word-strip-gaps)) / var(--word-strip-count) - 56px) / 2),12px)!important;
}