/* © 2026 WiredType. Proprietary and confidential. Not licensed for copying or reuse. Terms: https://wiredtype.com/terms */
/* Learn step bar (js/learn-steps.js). The bar pins directly under the site header stack from shell.css
   (--wt-top-height + --wt-parent-height), so it never slides under the header or the Back link, and it takes its own
   space in the flow, so it never covers the lesson or the exercise below it. */

.ls-hidden { display: none !important; }
.ls-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ls-bar {
  --ls-pin: calc(var(--wt-top-height, 64px) + var(--wt-parent-height, 52px));
  position: sticky;
  top: var(--ls-pin);
  z-index: 9000;
  background: var(--bg-0, #1A1520);
  border-bottom: 1px solid var(--border-strong, rgba(255,255,255,0.12));
  color: var(--text, #F0EAE0);
}
.ls-bar.is-fixed { position: fixed; left: 0; right: 0; }
.ls-bar.is-open { z-index: 10010; }   /* above the chat button while the list is open; the phone menu (10020+) stays above */
.ls-bar--row .ls-bar__arrow { display: none; }
@media (max-width: 479px) { .ls-bar__lead { display: none; } }
.ls-list__heading { margin: 4px 10px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted, #978C83); }
.ls-active .exercise-section[id^="ex"] { padding-top: var(--space-xl, 32px); }
.ls-bar__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px max(16px, env(safe-area-inset-left));
  min-height: 56px;
  box-sizing: border-box;
}

/* Previous and next arrows: 44 px targets. */
.ls-bar__arrow {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-strong, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--text, #F0EAE0);
  cursor: pointer;
}
.ls-bar__arrow svg, .ls-bar__chevron svg, .ls-continue__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ls-bar__arrow:hover:not(:disabled) { border-color: var(--accent, #E07A6B); color: var(--accent, #E07A6B); }
.ls-bar__arrow:disabled { opacity: 0.35; cursor: default; }

/* The compact control: names the open step and opens the full list. */
.ls-bar__toggle {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--bg-card, rgba(255,255,255,0.04));
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.ls-bar__toggle:hover, .ls-bar.is-open .ls-bar__toggle { border-color: var(--border-hover, rgba(255,255,255,0.14)); }
.ls-bar__text { display: flex; flex-direction: column; min-width: 0; }
.ls-bar__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-text, #E07A6B);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ls-bar__title {
  font-family: var(--font-heading, inherit);
  font-size: 16px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ls-bar__chevron { flex: 0 0 auto; display: inline-flex; color: var(--text-secondary, #B8AFA5); transition: transform 0.2s ease; }
.ls-bar.is-open .ls-bar__chevron { transform: rotate(180deg); }

/* Position: one segment per step. */
.ls-bar__track { display: flex; gap: 3px; max-width: 1200px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left)) 6px; box-sizing: border-box; }
.ls-bar__seg { flex: 1 1 0; height: 3px; border-radius: 3px; background: var(--bg-3, #2A2330); }
.ls-bar__seg.is-done { background: rgba(var(--accent-rgb, 224,122,107), 0.45); }
.ls-bar__seg.is-current { background: var(--accent, #E07A6B); }

/* The full row of tabs on wide screens (exercises). */
.ls-bar__row { display: none; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; gap: 6px; }
.ls-bar--row .ls-bar__toggle { display: none; }
.ls-bar--row .ls-bar__row { display: flex; }
.ls-bar--row .ls-bar__track { display: none; }
.ls-bar__cell { flex: 1 1 0; min-width: 0; }
.ls-tab {
  width: 100%; min-height: 52px;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border: 0; border-radius: 10px;
  border-bottom: 3px solid transparent;
  background: transparent; color: var(--text-secondary, #B8AFA5);
  text-align: left; cursor: pointer;
}
.ls-tab:hover { background: var(--bg-card-hover, rgba(255,255,255,0.07)); color: var(--text, #F0EAE0); }
.ls-tab__num { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text-muted, #978C83); }
.ls-tab__text { display: flex; flex-direction: column; min-width: 0; }
.ls-tab__title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-tab__status { font-size: 12px; color: var(--text-muted, #978C83); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-tab.is-done .ls-tab__status { color: var(--accent-secondary-light, #7ABFB7); }
.ls-tab.is-current { color: var(--text, #F0EAE0); background: var(--bg-card, rgba(255,255,255,0.04)); border-bottom-color: var(--accent, #E07A6B); border-radius: 10px 10px 4px 4px; }
.ls-tab.is-current .ls-tab__num { color: var(--accent-text, #E07A6B); }

/* The list: opens under the bar and stays inside the viewport, above the bottom bar on phones. */
.ls-list {
  position: absolute;
  left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
  top: calc(100% + 6px);
  max-width: 560px;
  margin: 0 auto;
  max-height: calc(100dvh - var(--ls-pin) - 80px - var(--wt-bottom-inset, var(--wt-bottom-height, 0px)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--border-strong, rgba(255,255,255,0.12));
  background: var(--bg-1, #1E1924);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
@media (min-width: 1240px) { .ls-list { left: calc(50% - 600px + 16px); right: auto; width: 560px; margin: 0; } }
.ls-list[hidden] { display: none; }
.ls-list__items { list-style: none; margin: 0; padding: 0; }
.ls-item {
  width: 100%; min-height: 52px;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--text, #F0EAE0);
  text-align: left; cursor: pointer;
}
.ls-item:hover, .ls-item:focus-visible { background: var(--bg-card-hover, rgba(255,255,255,0.07)); }
.ls-item__num {
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, monospace); font-size: 12px;
  border: 1px solid var(--border-strong, rgba(255,255,255,0.12)); color: var(--text-secondary, #B8AFA5);
}
.ls-item__text { display: flex; flex-direction: column; min-width: 0; }
.ls-item__title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ls-item__status { font-size: 12px; color: var(--text-muted, #978C83); }
.ls-item.is-done .ls-item__num { background: rgba(var(--accent-secondary-rgb, 90,173,163), 0.18); border-color: transparent; color: var(--accent-secondary-light, #7ABFB7); }
.ls-item.is-current { background: rgba(var(--accent-rgb, 224,122,107), 0.12); }
.ls-item.is-current .ls-item__num { background: var(--accent, #E07A6B); border-color: transparent; color: #1A1520; }
.ls-item.is-current .ls-item__status { color: var(--accent-text, #E07A6B); }
.ls-item.is-locked { color: var(--text-muted, #978C83); }
.ls-list__foot {
  display: flex; align-items: center; min-height: 44px;
  margin-top: 6px; padding: 0 10px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
  font-size: 14px; color: var(--text-secondary, #B8AFA5);
  text-decoration: underline; text-underline-offset: 4px;
}

.ls-bar button:focus-visible, .ls-bar a:focus-visible, .ls-pager a:focus-visible, .ls-pager button:focus-visible,
.ls-continue:focus-visible, .ls-practice__card:focus-visible { outline: 2px solid var(--accent, #E07A6B); outline-offset: 2px; }
.ls-focus-target:focus { outline: none; }
.ls-focus-target:focus-visible { outline: 2px solid var(--accent, #E07A6B); outline-offset: 4px; border-radius: 4px; }

/* Headings reached by a link land below the pinned bar. */
.ls-active .lesson-content h2[id], .ls-active .exercise-section[id], .ls-active .lock-wall {
  scroll-margin-top: calc(var(--wt-top-height, 64px) + var(--wt-parent-height, 52px) + 80px);
}
/* The first lesson part does not need the rule above its heading when it opens a part. */
.ls-active .lesson-content > h2:not(.ls-hidden):first-of-type { margin-top: var(--space-xl, 32px); }

/* The pager at the end of a part or an exercise. */
.ls-pager { max-width: 720px; margin: 0 auto; padding: var(--space-xl, 32px) var(--space-lg, 24px) var(--space-3xl, 64px); }
.ls-pager--exercise { padding-left: 0; padding-right: 0; padding-bottom: 0; margin-top: var(--space-2xl, 48px); }
.ls-pager__pos { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted, #978C83); margin: 0 0 12px; text-align: center; }
.ls-pager__row { display: flex; gap: 12px; }
.ls-pager__link {
  flex: 1 1 0; min-width: 0; min-height: 64px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border-strong, rgba(255,255,255,0.12));
  background: var(--bg-card, rgba(255,255,255,0.04));
  color: var(--text, #F0EAE0);
  text-align: left; text-decoration: none; cursor: pointer;
  font: inherit;
}
.ls-pager__link--next { text-align: right; align-items: flex-end; margin-left: auto; border-color: rgba(var(--accent-rgb, 224,122,107), 0.55); }
.ls-pager__link:hover { border-color: var(--accent, #E07A6B); }
.ls-pager__dir { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted, #978C83); }
.ls-pager__link--next .ls-pager__dir { color: var(--accent-text, #E07A6B); }
.ls-pager__title { font-family: var(--font-heading, inherit); font-size: 16px; font-weight: 600; line-height: 1.3; }
.ls-pager__back { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 12px; font-size: 14px; color: var(--text-secondary, #B8AFA5); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 520px) {
  .ls-pager__row { flex-direction: column; }
  .ls-pager__link--next { order: -1; }
  .ls-bar__title { font-size: 15px; }
}

/* The exercises page hero: one summary line in place of the six-card grid. */
.ls-summary { max-width: 560px; margin: var(--space-lg, 24px) auto 0; text-align: center; color: var(--text-secondary, #B8AFA5); }
/* Without JavaScript the bar is a plain list of links to each exercise. */
.ls-static { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; max-width: 1200px; margin: 0 auto; padding: 8px 16px; }
.ls-static a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong, rgba(255,255,255,0.12)); color: inherit; text-decoration: none; }

/* The Learn hub: where to pick up, and the exercises. */
.ls-continue {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  max-width: 480px; box-sizing: border-box;
  margin: var(--space-lg, 24px) auto 0;
  text-align: left;
  padding: 20px 64px 20px 22px;
  border-radius: 18px;
  border: 1px solid rgba(var(--accent-rgb, 224,122,107), 0.5);
  background: linear-gradient(135deg, rgba(var(--accent-rgb, 224,122,107), 0.14), rgba(var(--accent-rgb, 224,122,107), 0.03));
  color: var(--text, #F0EAE0); text-decoration: none;
}
.ls-continue__eyebrow { font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text, #E07A6B); }
.ls-continue__title { font-family: var(--font-heading, inherit); font-size: 22px; font-weight: 600; line-height: 1.25; }
.ls-continue__desc { font-size: 14px; color: var(--text-secondary, #B8AFA5); }
.ls-continue__arrow { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent, #E07A6B); color: #1A1520; }
.ls-practice { margin-top: var(--space-2xl, 48px); }
.ls-practice__card { display: block; padding: 22px; border-radius: 18px; border: 1px solid var(--border-strong, rgba(255,255,255,0.12)); background: var(--bg-card, rgba(255,255,255,0.04)); color: var(--text, #F0EAE0); text-decoration: none; }
.ls-practice__card:hover { border-color: var(--accent, #E07A6B); }
.ls-practice__title { margin: 0 0 6px; font-size: 20px; }
.ls-practice__desc { margin: 0 0 12px; color: var(--text-secondary, #B8AFA5); font-size: 15px; }
.ls-practice__meta { font-size: 14px; font-weight: 600; color: var(--accent-text, #E07A6B); }

/* The hub sidebar sticks below the header stack, and only when it fits the screen. */
@media (min-width: 961px) {
  .learn-sidebar { top: calc(var(--wt-top-height, 64px) + var(--wt-parent-height, 52px) + 16px); }
}
@media (min-width: 961px) and (max-height: 920px) {
  .learn-sidebar { position: static; }
}

[data-theme="light"] .ls-list { box-shadow: 0 18px 40px rgba(26,21,32,0.18); }
[data-theme="light"] .ls-item.is-current .ls-item__num, [data-theme="light"] .ls-continue__arrow { color: #fff; }
@media (prefers-reduced-motion: reduce) { .ls-bar__chevron { transition: none; } }

/* The exercises hero was sized for the old fixed header; with the bar below it, the first exercise starts on the first screen. */
.ls-active .exercises-page { padding-top: 0; }
.ls-active .exercises-page > .exercise-section:first-child { padding-top: var(--space-xl, 32px) !important; padding-bottom: var(--space-xl, 32px); border-bottom: 0; }
.ls-active .exercises-page > .exercise-section:first-child .exercise-header { margin-bottom: 0; }
[data-theme="light"] .ls-bar { border-bottom-color: rgba(26,21,32,0.12); }
[data-theme="light"] .ls-bar__arrow, [data-theme="light"] .ls-pager__link { border-color: rgba(26,21,32,0.16); }
.lesson-card__premium-badge.is-owned { color: var(--accent-secondary-light, #7ABFB7); background: rgba(var(--accent-secondary-rgb, 90,173,163), 0.12); }
/* While the consent banner is up it sits above the phone bottom bar; the list ends above it. */
html.wt-consent-pending .ls-list { max-height: calc(100dvh - var(--ls-pin) - 96px - var(--wt-bottom-inset, var(--wt-bottom-height, 0px)) - var(--wt-consent-height, 0px)); }