/* session-header.css — The one header structure, shared by every session
   screen: guided lessons, recall checks, mock tests, Doomscroll and Fix it.
   Markup comes from session-header.js, or from the feed's copy in app.html.

   Layout is a flex row, so the three parts sit on one line by construction.
   The feed used to place its track and countdown with hand-written offsets off
   the header's edges, which is why a screen without a countdown lost the row. */

.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: 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;
}

/* The final stretch: the bar goes gold. It switches rather than blending,
   because every path between blue and gold runs through washed-out colour and a
   blend would sit in it. The transition above crosses that 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;
  }
}