/* jarchi replay player (play.js): the class's page redrawn in step with its voice. Phone first: a thin title, the
   page as big as the screen allows on the stage's dark ground, the controls in the thumb zone. The stage is always
   dark (as in the class); the chrome follows the device's theme. */
.play {
  position: fixed; inset: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg); color: var(--ink);
}
.play-top {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--card); border-bottom: 1px solid var(--line);
}
.play-titles { min-width: 0; }
.play-titles h1 {
  margin: 0; font-size: var(--fs-md); font-weight: 700; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.play-sub { margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }

.play-stage {
  position: relative; min-height: 0; overflow: hidden;
  display: grid; place-items: center; padding: 12px;
  background: #1c1b19;
}
.play-page {
  position: relative; overflow: hidden;
  background: #ffffff; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 24px rgba(0, 0, 0, .35);
}
.play-page[hidden] { display: none; }
.play-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.play-empty { display: grid; justify-items: center; gap: 12px; max-width: 32ch; text-align: center; color: #dedad3; }
.play-empty[hidden] { display: none; }
.play-empty p { margin: 0; font-size: var(--fs); line-height: 1.8; }
.play-empty-mark {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #f1eee9;
}
.play-empty-mark .ic { width: 28px; height: 28px; }

.play-bar {
  display: grid; gap: 2px; justify-items: stretch;
  padding: 6px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line);
}
.play-bar > * { width: 100%; max-width: 720px; justify-self: center; }
.play-where {
  margin: 0; min-height: 1.6em; text-align: center;
  font-size: var(--fs-sm); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.play-seekrow { display: flex; align-items: center; gap: 10px; }
.play-time { min-width: 3.4em; text-align: center; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.play-seek { flex: 1; min-width: 0; height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.play-btns { display: flex; align-items: center; justify-content: center; gap: 14px; }
.play-main {
  display: grid; place-items: center; width: 60px; height: 60px; flex: none;
  border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); cursor: pointer;
  transition: background-color .12s, transform .12s;
}
.play-main:hover { background: var(--accent-strong); }
.play-main:active { transform: scale(.96); }
.play-main .ic { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.play[data-playing="0"] .play-main .ic { margin-left: 3px; } /* the triangle's weight, centred */
.play-btn {
  position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color .12s;
}
.play-btn:hover { background: var(--bg-sunken); }
.play-btn .ic { width: 30px; height: 30px; stroke-width: 1.8; }
.play-btn-n {
  position: absolute; inset: 0; display: grid; place-items: center; padding-top: 2px;
  font-size: 10px; font-weight: 700; line-height: 1; pointer-events: none;
}
.play-speed {
  min-width: 56px; height: 44px; padding: 0 10px; flex: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.play-speed:hover { background: var(--bg-sunken); }
.play-btn-spacer { width: 56px; flex: none; }
.play :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* A phone on its side: the page takes the height; the controls fold into one row beside the time. */
@media (orientation: landscape) and (max-height: 520px) {
  .play-top { padding-block: 6px; }
  .play-titles h1 { font-size: var(--fs); }
  .play-sub { display: none; }
  .play-stage { padding: 6px; }
  .play-bar { grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding-block: 4px; }
  .play-bar > * { max-width: none; }
  .play-where { grid-column: 1 / -1; min-height: 0; font-size: var(--fs-xs); }
  .play-btns { grid-row: 2; grid-column: 1; gap: 6px; }
  .play-seekrow { grid-row: 2; grid-column: 2; }
  .play-main { width: 48px; height: 48px; }
  .play-btn { width: 44px; height: 44px; }
  .play-btn-spacer { display: none; }
}

/* Before the player: loading, an old link, not ready yet. */
.play-msg {
  max-width: 420px; margin: 18vh auto 0; padding: 28px 24px;
  display: grid; justify-items: center; gap: 8px; text-align: center;
}
.play-msg h1 { margin: 4px 0 0; font-size: var(--fs-lg); }
.play-msg p { margin: 0; }
.play-msg-mark {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-strong);
}
.play-msg-mark .ic { width: 26px; height: 26px; }
.play-msg[data-kind="loading"] { box-shadow: none; background: none; }
.play-loading { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .play-main, .play-btn { transition: none; }
}

/* The class pages' recordings (classes.js): «پخش» opens the player. */
a.pg-play { text-decoration: none; }
.pg-rec-open { color: inherit; text-decoration: none; }
.pg-rec-open:hover b { text-decoration: underline; }
.class-recs h2 { margin: 0 0 6px; font-size: var(--fs-md); }
.class-recs-list { list-style: none; margin: 0 -8px; padding: 0; display: grid; gap: 2px; }
.class-rec {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 8px;
  border-radius: var(--r); color: inherit; text-decoration: none;
}
@media (hover: hover) { .class-rec:hover { background: var(--bg-sunken); } }
.class-rec-play {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
}
.class-rec-play svg { width: 18px; height: 18px; }
.class-rec-text { display: grid; min-width: 0; flex: 1; line-height: 1.5; }
.class-rec-text .hint { font-size: var(--fs-xs); margin: 0; }
.class-rec-len { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }