/* The Child page (Step 10d), inside the iPhone screen: a podcast episode's page in the
   Global Player app, its 16:9 hero in the artwork's colour (DESIGN.md, "Child page").
   Ported from the page half of the Child page fork's EpisodePage.css and the reset in its
   index.css, reflowed from its 375 × 812 phone to the 402 × 874 screen, with the class
   names prefixed episode-, every colour in OKLCH and nothing marked important.

   The rows stack from the top and add up to 874 (the fork's 812 had a 44 pt status bar
   and 588 to scroll):
   62 status bar + 44 nav bar + 632 scrolling + 50 mini-player + 86 tab bar

   Colours: the hero is --player-bg, which colour.js sets on .episode-screen from the
   artwork. No text sits on it, so the rest of the page is fixed. The overlay over it is
   on with the Gradient setting (B), and Strength scales its black (--gradient-strength,
   set on the stage by main.js, 10g).

   The Child page is one of the stage's surfaces, so every rule here is nested in
   [data-surface="child-page"], the stage's attribute while it shows the Child page
   (main.js). The screen's geometry is in app.css, with the Playbar's and the IBB's. */

[data-surface="child-page"] {

/* The fork's reset, which was global, kept to the Child page's screen. :where() keeps it
   below every rule here */
:where(.episode-screen *) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The fork's button reset. As a :where(), the buttons' own rules below win without
   being marked important */
:where(.episode-page button) {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

/* --- The screen --------------------------------------------------------------- */

.episode-screen {
  /* The fork's colours, each the same sRGB colour in OKLCH (DESIGN.md, "Child page") */
  --episode-blue: oklch(0.553 0.23 260.9); /* the top bar, Play and the show */
  --episode-bg: oklch(0.953 0.015 273.8); /* the page under the hero */
  --episode-text: oklch(0.289 0.032 274);
  --episode-muted: oklch(0.495 0.024 273.7); /* the meta row and the description */
  --episode-accent: oklch(0.575 0.225 259.2); /* the mini-player's buttons and bar, the selected tab */
  --episode-tab: oklch(0.534 0.045 270.9); /* the other tabs and the home indicator */

  /* The 2 pt under the bezel's edge, round the page: the top bar's blue above the
     middle, the tab bar's white below it */
  background: linear-gradient(var(--episode-blue) 50%, oklch(1 0 0) 50%);
  -webkit-font-smoothing: antialiased;
}

/* The exact 402 × 874 frame, 2 pt in from the screen's edges */
.episode-page {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 402px;
  height: 874px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--episode-bg);
  color: var(--episode-text);
  font: 16px -apple-system, BlinkMacSystemFont, "SF Pro", "Open Sans", sans-serif; /* the fork's page font */
}

/* --- The top bar -------------------------------------------------------------- */

.episode-top-bar {
  flex-shrink: 0;
  background: var(--episode-blue);
  color: oklch(1 0 0);
}

/* The iPhone 18 Pro's 62 pt status bar: the time and the levels each centred in the
   100 pt either side of a 154 pt gap for the Dynamic Island (94 pt wide in the bezel),
   level with its middle, 32 pt down. The fork's was 44 pt, with them at its edges */
.episode-status-bar {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 154px;
  padding: 21px 24px 19px;
}

.episode-status-time {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  text-align: center;
}

.episode-status-icons {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.episode-status-cellular { --icon: url("../assets/episode/status-cellular.svg"); width: 18px; height: 12px; }
.episode-status-wifi { --icon: url("../assets/episode/status-wifi.svg"); width: 16px; height: 12px; }
.episode-status-battery { --icon: url("../assets/episode/status-battery.svg"); width: 27px; height: 13px; }

/* Back and the gear only press (episode-page.js) */
.episode-nav-bar {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 16px;
}

.episode-nav-icon {
  display: flex;
  flex-shrink: 0;
}

.episode-nav-title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- The page under the top bar, which scrolls ---------------------------------- */

.episode-scroll {
  flex: 1;
  overflow-y: auto;
}

/* The 16:9 hero, three layers: the artwork's colour, the overlay and the 1:1 cover, the
   hero's full height */
.episode-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.episode-hero-colour,
.episode-hero-gradient {
  position: absolute;
  inset: 0;
}

/* The colour fades over the Playbar's 500 ms; the fork's took 150 */
.episode-hero-colour {
  background-color: var(--player-bg);
  transition: background-color 500ms ease;
}

/* The overlay (Figma "Background", 485:28747 in "Kev playground"): black at 15% at the
   top to 80% at the bottom, on with the Gradient setting (B), on by default (surfaces.js).
   Strength scales both, up to opaque: 100% is Figma's. Every stop is black, so only the
   alpha changes: it looks the same interpolated in Oklab as in sRGB. It fades with the
   colour; the fork's switched at once */
.episode-hero-gradient {
  background: linear-gradient(180deg,
    oklch(0 0 0 / min(1, 0.15 * var(--gradient-strength))) 0%,
    oklch(0 0 0 / min(1, 0.8 * var(--gradient-strength))) 100%);
  opacity: 0;
  transition: opacity 500ms ease;
}

.episode-screen.has-gradient .episode-hero-gradient { opacity: 1; }

.episode-hero-cover {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.episode-body {
  padding: 16px 16px 24px;
}

.episode-heading {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* The title and the show stack together (Figma gap 8 pt), so the show always sits
   right under the title, whatever the play button's height */
.episode-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.episode-title {
  margin-top: 1px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
}

.episode-play {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  margin-right: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--episode-blue);
  color: oklch(1 0 0);
  transition: transform 0.15s;
}

.episode-play:active { transform: scale(0.94); }

.episode-play:disabled {
  opacity: 0.5;
  cursor: default;
}

/* A link in the fork; a button here, so pressing it doesn't change the address */
.episode-show {
  align-self: flex-start;
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  color: var(--episode-blue);
  text-align: start;
}

/* Download, Share, then the date, the explicit badge and the duration */
.episode-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  color: var(--episode-muted);
}

.episode-meta-icon { display: flex; }

/* Figma's share icon is 24 × 30 with the glyph in its middle. It takes up 24 pt, as the
   fork's drawn one did, so the row stays 24 pt tall */
.episode-share-icon { margin: -3px 0; }

.episode-meta-text {
  display: flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.2px;
}

.episode-meta-dot { margin: 0 6px; }

.episode-explicit { display: block; }

/* The description, from the API: clamped to 3 lines, with More */
.episode-description {
  position: relative;
  margin-top: 24px;
  font-size: 13px;
  line-height: 16px;
  color: var(--episode-muted);
}

.episode-description-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.episode-description.is-expanded .episode-description-text { display: block; }

.episode-description-more {
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 24px;
  background: linear-gradient(90deg, transparent, var(--episode-bg) 22px);
  color: var(--episode-blue);
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
}

/* --- The bottom nav: the mini-player and the tab bar (Figma 8919:89551) ---------- */

.episode-bottom-nav {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Figma gives the mini-player a 50 pt slot; its 55 pt of content (the border, the 48 pt
   row and the 6 pt bar) runs under the tab bar, so 1 pt of the bar shows */
.episode-mini-player {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 50px;
  overflow: hidden;
  background: oklch(1 0 0);
  border-top: 1px solid oklch(0.895 0.001 286.4);
}

.episode-mini-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 48px;
}

.episode-mini-information {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  overflow: hidden;
}

.episode-mini-cover {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}

.episode-mini-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
}

.episode-mini-title {
  font-weight: 700;
  color: oklch(0.3 0.03 273.6);
}

.episode-mini-meta {
  display: flex;
  gap: 4px;
  color: oklch(0.391 0.04 273.1);
}

.episode-mini-show {
  overflow: hidden;
  text-overflow: ellipsis;
}

.episode-mini-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.episode-mini-fade {
  width: 16px;
  height: 100%;
  background: linear-gradient(to left, oklch(1 0 0), oklch(1 0 0 / 0));
}

/* Next and Play */
.episode-mini-button {
  width: 44px;
  min-width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(1 0 0);
  color: var(--episode-accent);
}

.episode-mini-icon { display: block; }

.episode-mini-progress {
  flex-shrink: 0;
  position: relative;
  height: 6px;
}

.episode-mini-progress-track {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 6px;
}

/* --progress: the position, 0–1 (episode-page.js) */
.episode-mini-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--progress, 0) * 100%);
  height: 6px;
  border-radius: 3px;
  background: var(--episode-accent);
  transition: width 0.25s linear;
}

/* The tabs only press */
.episode-tab-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  height: 86px;
  padding: 8px 0;
  background: oklch(1 0 0);
  border-top: 1px solid oklch(0.683 0 0);
}

.episode-tabs {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 0 16px;
}

.episode-tab {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 32px;
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  white-space: nowrap;
  color: var(--episode-tab);
}

.episode-tab.is-active { color: var(--episode-accent); }

.episode-tab-icon {
  display: block;
  flex-shrink: 0;
}

.episode-win-icon {
  position: relative;
  width: 24px;
  height: 24px;
}

/* Figma's insets for the two layers: the hexagon 0 5.42%, the stroke 27.08% 23.75% */
.episode-win-hexagon,
.episode-win-stroke {
  position: absolute;
  display: block;
}

.episode-win-hexagon {
  top: 0;
  left: 1.3px;
}

.episode-win-stroke {
  top: 6.5px;
  left: 5.7px;
}

.episode-home-indicator {
  flex-shrink: 0;
  width: 135px;
  height: 5px;
  border-radius: 4px;
  background: var(--episode-tab);
}

/* --- Icons ---------------------------------------------------------------------- */

/* The icons the fork drew (the status bar's and Pause): a mask filled with the text
   colour, white in the top bar and in Play, blue in the mini-player. The rest are Figma's
   SVGs, as <img> */
.episode-mask {
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  mask: var(--icon) center / contain no-repeat;
}

.episode-pause-icon { --icon: url("../assets/episode/pause.svg"); }
.episode-play .episode-pause-icon { width: 28px; height: 28px; }
.episode-mini-button .episode-pause-icon { width: 24px; height: 24px; }

/* Each play button shows what pressing it does: Play while paused, Pause while playing */
.is-playing > .episode-play-icon,
:not(.is-playing) > .episode-pause-icon { display: none; }

} /* [data-surface="child-page"] */