/* session-header.css — The one header structure, shared by every session
   screen: guided lessons, recall checks, mock tests and Doomscroll.
   Markup: session-header.html (rendered by session-header.js), or the feed's
   copy in index.html.

   Layout is a flex row, so the three parts sit on one line by construction. */

.session-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The way out. One grey cross, wherever a session can be left. */
.session-close {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  box-shadow: none;
}

.session-close:hover {
  color: var(--ink-2);
}

.session-close svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The track fills whatever room the close and the aside leave. */
.session-track {
  flex: 1;
  min-width: 0;
  height: 12px;
  border-radius: 20px;
  background: var(--line-2);
  overflow: hidden;
}

.session-track > span,
.session-track > i {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: #2bb9ee;
  box-shadow: inset 0 3px 0 #ffffff40;
  transition:
    width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.5s ease;
}

/* Held at the previous fill for one frame when a screen re-renders its header
   (progressSettler in lesson-ui.js), so the bar grows rather than jumps. */
.session-track > .is-settling {
  transition: none;
}

/* The final stretch goes gold by switching, not blending: blue and gold sit almost opposite, so every blend path (sRGB, oklab, oklch) passes through a muddy colour. The transition above crosses it in half a second. */
.session-track.is-charged > span,
.session-track.is-charged > i {
  background: #e9ac23;
}

.session-track.done > span,
.session-track.done > i {
  background: var(--green);
}

/* Whatever the screen keeps at the right: a streak, a countdown, a filter. */
.session-aside {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* Doomscroll has no end to measure, so the track gives its room to the
   infinity mark rather than drawing a bar that could never fill. */
.session-track.is-endless {
  display: grid;
  place-items: center;
  height: 30px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.session-track.is-endless > i {
  display: none;
}

.feed-infinity {
  display: none;
  width: 48px;
  height: 30px;
  fill: none;
  stroke: #9227f5;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The mark belongs to the header, not to the track. The track is a flex child
   sized by whatever the close button and the aside leave over, so centring the
   infinity inside it put it off-centre by half the aside plus half the row gap
   -- about 57px on a 375px phone, with the close hidden and the streak and
   filter showing. Centre it on the bar instead; `top` stays at its static
   position, so it keeps the row it already sat on. */
.session-track.is-endless .feed-infinity {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .session-track > span,
  .session-track > i {
    transition: none;
  }
}