/*
 * Tafrah web preview — screen styles.
 *
 * One block per screen, in the order of the Figma sections: Home, Discover,
 * Search, Channel (podcast), Episode, Library, Profile, then the Tafrah-only
 * screens the kit has no frame for (clips, reviews, stats, requests).
 */

@layer pages {
  /* ---------------------- blue header: home / discover ------------------ */
  .hero-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    color: var(--hero-text);
  }

  .hero-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .greeting {
    font-size: var(--fs-24);
  }

  .hero-header .inline-status {
    background: var(--hero-fill);
    color: var(--hero-text-soft);
  }

  .hero-header .notice {
    background: var(--hero-fill);
    color: var(--hero-text);
  }

  .hero-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .hero-block__title {
    color: var(--hero-text-soft);
    font-size: var(--fs-14);
    font-weight: 500;
  }

  .hero-block__title--strong {
    color: var(--hero-text);
    font-size: var(--fs-16);
    font-weight: 700;
  }

  .continue-row,
  .highlight-row {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .continue-row::-webkit-scrollbar,
  .highlight-row::-webkit-scrollbar {
    display: none;
  }

  .continue-card {
    display: grid;
    width: 13rem;
    flex: 0 0 auto;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--hero-fill);
    color: inherit;
    padding: var(--space-2);
    text-align: start;
  }

  .continue-card .cover-frame {
    width: 3.5rem;
    border-radius: var(--radius-sm);
  }

  .continue-card__body {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
  }

  .continue-card small {
    overflow: hidden;
    color: var(--hero-text-muted);
    font-size: var(--fs-12);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .continue-card strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--fs-14);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .continue-card .progress-track {
    background: var(--hero-line);
  }

  .continue-card .progress-track span {
    background: var(--hero-text);
  }

  /* Named artwork makes the highlight strip useful beyond the cover itself. */
  .highlight-tile {
    display: grid;
    width: 4.5rem;
    flex: 0 0 auto;
    gap: var(--space-2);
    background: transparent;
    color: var(--hero-text-soft);
    padding: 0;
    scroll-snap-align: start;
  }

  .highlight-tile .cover-frame {
    width: 100%;
    border: 1px solid var(--hero-line);
    border-radius: var(--radius-md);
  }

  .highlight-tile > span {
    overflow: hidden;
    font-size: 0.65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-welcome p {
    margin-block-start: var(--space-1);
    color: var(--hero-text-soft);
    font-size: var(--fs-12);
  }

  .home-page .greeting {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
  }

  .home-page .inline-status {
    font-size: 0.65rem;
  }

  .featured-listen {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
    padding-block: var(--space-3);
  }

  .featured-listen__art {
    background: transparent;
    padding: 0;
  }

  .featured-listen__art .cover-frame {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px #07152c40;
  }

  .featured-listen__copy {
    display: grid;
    min-width: 0;
    gap: var(--space-3);
    justify-items: start;
  }

  .featured-listen__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--hero-text-soft);
    font-size: 0.65rem;
  }

  .featured-listen__eyebrow svg {
    width: 1rem;
    height: 1rem;
    color: var(--coral);
  }

  .featured-listen h2 {
    max-width: 24ch;
    font-size: clamp(1.1rem, 2.7vw, 2.4rem);
    line-height: 1.55;
    text-wrap: balance;
  }

  .featured-listen__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem var(--space-2);
    color: var(--hero-text-soft);
    font-size: 0.65rem;
  }

  .featured-listen__meta span + span::before {
    margin-inline-end: var(--space-2);
    color: var(--hero-text-muted);
    content: '·';
  }

  .featured-listen__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-1);
  }

  .featured-listen__actions .primary-button {
    min-height: 2.75rem;
    background: var(--hero-text);
    color: var(--blue-700);
    font-size: var(--fs-12);
  }

  .featured-listen__actions .primary-button svg {
    fill: currentColor;
  }

  .featured-listen__actions .quiet-button {
    min-height: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--hero-text-soft);
    font-size: var(--fs-12);
  }

  .home-page .highlight-row {
    gap: var(--space-4);
    scroll-snap-type: inline proximity;
    padding-block-end: var(--space-2);
  }

  .home-page .hero-block .section-heading > a {
    color: var(--hero-text-soft);
    font-size: var(--fs-12);
  }

  .home-page .sheet {
    gap: clamp(2rem, 4vw, 3.25rem);
  }

  @media (min-width: 40rem) {
    .featured-listen {
      grid-template-columns: clamp(10rem, 20vw, 15rem) minmax(0, 1fr);
      align-items: center;
      gap: clamp(1.5rem, 4vw, 3.5rem);
      padding-block: var(--space-4);
    }

    .featured-listen__copy {
      gap: var(--space-4);
    }

    .featured-listen__eyebrow,
    .featured-listen__meta {
      font-size: var(--fs-12);
    }

    .featured-listen__actions .primary-button,
    .featured-listen__actions .quiet-button {
      font-size: var(--fs-14);
    }

    .highlight-tile {
      width: 5rem;
    }

    .highlight-tile > span {
      font-size: var(--fs-12);
    }
  }

  /* The search field on the blue header (Discover links to it, Search owns it). */
  .hero-search,
  .hero-header .search-input {
    background: var(--hero-fill);
    color: var(--hero-text);
  }

  .hero-search {
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--hero-text-soft);
    padding-inline: var(--space-4);
  }

  .hero-header .search-input::placeholder {
    color: var(--hero-text-muted);
  }

  .hero-header .search-box__field > svg {
    color: var(--hero-text-soft);
  }

  /* ------------------------------ categories ---------------------------- */
  .category-cloud {
    display: grid;
    grid-auto-columns: 8.125rem;
    grid-auto-flow: column;
    gap: var(--space-4);
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .category-cloud::-webkit-scrollbar {
    display: none;
  }

  .category-tile {
    display: grid;
    gap: var(--space-2);
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: start;
  }

  .category-tile__art {
    position: relative;
    display: grid;
    overflow: hidden;
    aspect-ratio: 1;
    align-content: end;
    border-radius: var(--radius-md);
    background: linear-gradient(
      150deg,
      oklch(56% 0.14 var(--category-hue)),
      oklch(30% 0.1 var(--category-hue))
    );
    color: #ffffff;
    padding: var(--space-3);
    font-family: var(--font-latin);
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .category-tile__art::before {
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    inset-block-start: -22%;
    inset-inline-end: -22%;
    border: 0.75rem solid #ffffff2e;
    border-radius: 50%;
    content: '';
  }

  .category-tile strong {
    overflow: hidden;
    font-size: var(--fs-16);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .category-tile[aria-pressed='true'] .category-tile__art {
    outline: 2px solid var(--hero-text);
    outline-offset: 2px;
  }

  /* ------------------- discover: releases and rankings ------------------ */
  .release-card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
  }

  .release-card__art {
    position: relative;
  }

  .release-card__art .episode-cover {
    display: block;
    width: 100%;
  }

  .release-card__art .play-disc {
    position: absolute;
    z-index: 4;
    inset-block-end: var(--space-4);
    inset-inline-start: var(--space-4);
  }

  .release-card__body {
    display: grid;
    gap: var(--space-1);
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: start;
  }

  .release-card h3 {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--fs-18);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .release-card p {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted-strong);
    line-height: 1.7;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .rank-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .rank-row {
    display: grid;
    grid-template-columns: 1.75rem 4rem minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: start;
  }

  .rank-row .cover-frame {
    width: 4rem;
    border-radius: var(--radius-sm);
  }

  /* An eight-point seal standing in for Figma's rank star. */
  .rank-badge {
    position: relative;
    isolation: isolate;
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    align-self: center;
    border-radius: 0.3rem;
    background: var(--neutral-40);
    color: var(--text);
    font-family: var(--font-latin);
    font-size: var(--fs-12);
    font-weight: 700;
  }

  .rank-badge::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    content: '';
    transform: rotate(45deg);
  }

  .rank-badge.is-top {
    background: var(--warning);
    color: var(--neutral-10);
  }

  .rank-row__body {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
  }

  .rank-row h3 {
    overflow: hidden;
    font-size: var(--fs-18);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rank-row p {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted-strong);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .stat-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    color: var(--muted-strong);
    font-size: var(--fs-12);
    font-weight: 500;
  }

  .stat-line span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .stat-line svg {
    width: 1rem;
    height: 1rem;
  }

  /* -------------------------------- search ------------------------------ */
  .search-panel {
    position: relative;
    z-index: 10;
    display: grid;
    gap: var(--space-3);
  }

  .search-box {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
  }

  .search-box__field {
    position: relative;
  }

  .search-box__field > svg {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    inset-block-start: 50%;
    inset-inline-start: 1rem;
    color: var(--muted);
    pointer-events: none;
    transform: translateY(-50%);
  }

  .search-input {
    padding-inline: 3rem 1rem;
  }

  .search-box--inline {
    margin-block: var(--space-4);
  }

  .suggestions {
    position: absolute;
    z-index: 20;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    color: var(--text);
  }

  .suggestions button {
    display: flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-block-end: 1px solid var(--border);
    background: transparent;
    color: var(--text-soft);
    padding: var(--space-3) var(--space-4);
    text-align: start;
  }

  .suggestions button:last-child {
    border-block-end: 0;
  }

  .suggestions small {
    color: var(--muted);
  }

  .results-count {
    font-size: var(--fs-16);
    text-align: center;
  }

  .search-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--space-4);
  }

  .person-card {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    background: transparent;
    color: var(--text);
    padding: var(--space-2);
    text-align: center;
  }

  .person-card strong {
    font-size: var(--fs-14);
  }

  .person-card small {
    color: var(--muted);
    font-size: var(--fs-12);
  }

  /* ----------------- channel (podcast) and episode detail --------------- */
  .detail-page {
    gap: var(--space-6);
  }

  /* Figma's screen bar: back at the start, actions at the end. */
  .detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-inline: calc(var(--space-2) * -1);
  }

  .back-button {
    justify-self: start;
    color: var(--text);
  }

  .back-button svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .podcast-detail-hero,
  .episode-detail-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-4);
  }

  .podcast-detail-hero > .cover-frame,
  .episode-detail-hero > .cover-frame {
    width: min(12.5rem, 62%);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-lg);
  }

  .detail-copy {
    display: grid;
    width: 100%;
    justify-items: center;
    gap: var(--space-3);
    text-align: center;
  }

  .detail-copy .eyebrow {
    min-height: 0;
    padding: 0;
    font-size: var(--fs-12);
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .detail-copy h1 {
    font-size: var(--fs-24);
  }

  .detail-copy .meta-line,
  .detail-copy .stat-line {
    justify-content: center;
  }

  .detail-copy__description {
    display: -webkit-box;
    max-width: 65ch;
    overflow: hidden;
    color: var(--muted-strong);
    line-height: 1.7;
    text-align: start;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }

  .detail-actions .icon-button {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .detail-actions .secondary-button[data-active='true'] {
    color: var(--primary-hover);
  }

  /* Figma separates the header from "All episodes" with a hairline. */
  .detail-page > .section,
  .detail-page > .tab-bar + .section {
    border-block-start: 1px solid var(--surface);
    padding-block-start: var(--space-6);
  }

  .detail-page > .tab-bar + .section {
    border-block-start: 0;
    padding-block-start: 0;
  }

  .notes {
    max-width: 72ch;
    color: var(--text-soft);
    line-height: 1.8;
    white-space: pre-line;
  }

  /* Figma "Timestamp" list: a marker, a title, the time in blue. */
  .timestamp-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .timestamp-row {
    display: grid;
    width: 100%;
    grid-template-columns: 0.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    border-block-end: 1px solid var(--surface);
    background: transparent;
    color: var(--text-soft);
    padding-block: var(--space-3);
    font-size: var(--fs-16);
    text-align: start;
  }

  .timestamp-row::before {
    width: 0.25rem;
    height: 0.9rem;
    border-radius: 2px;
    background: var(--marker, var(--surface-raised));
    content: '';
  }

  .timestamp-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .timestamp-row time {
    color: var(--primary-hover);
    font-family: var(--font-latin);
    font-size: var(--fs-12);
    font-weight: 500;
  }

  /* ------------------------------ comments ------------------------------ */
  .comment-form {
    display: grid;
    gap: var(--space-3);
  }

  .comment-list {
    display: grid;
    gap: var(--space-6);
  }

  .comment {
    display: grid;
    gap: var(--space-2);
  }

  .comment header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .comment-body {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.8;
  }

  .comment-body--deleted {
    color: var(--muted);
    font-style: italic;
  }

  .comment .row-actions .text-button {
    min-height: 2rem;
    color: var(--muted-strong);
  }

  .comment .row-actions .text-button.is-on {
    color: var(--primary-hover);
  }

  .comment .row-actions .text-button.is-danger {
    color: var(--danger);
  }

  .comment-stamp {
    font-family: var(--font-latin);
  }

  .comment-replies {
    display: grid;
    gap: var(--space-4);
    padding-inline-start: var(--space-8);
  }

  /* ----------------------------- transcript ----------------------------- */
  .transcript {
    display: grid;
    max-height: 34rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .transcript-cue {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    border-block-end: 1px solid var(--surface);
    padding-block: var(--space-3);
  }

  .transcript-cue p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.9;
  }

  .transcript-cue__time {
    min-height: 0;
    font-family: var(--font-latin);
    font-size: var(--fs-12);
  }

  /* ------------------------------- library ------------------------------ */
  .library-tabs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .library-tabs::-webkit-scrollbar {
    display: none;
  }

  .library-tabs button {
    flex: 0 0 auto;
    min-height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-soft);
    padding: 0.4rem 1rem;
    font-weight: 500;
  }

  .library-tabs button[aria-selected='true'] {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
  }

  .playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-4);
  }

  .playlist-card {
    display: grid;
    min-height: 8rem;
    align-content: end;
    gap: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    padding: var(--space-4);
    text-align: start;
  }

  .playlist-card h3 {
    font-size: var(--fs-18);
  }

  .playlist-card p {
    color: var(--muted);
    font-size: var(--fs-12);
  }

  .follow-cell {
    display: grid;
    align-content: start;
    gap: var(--space-2);
  }

  .highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-4);
  }

  .highlight-card {
    display: grid;
    gap: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: var(--space-4);
  }

  .highlight-card blockquote {
    margin: 0;
    font-size: var(--fs-16);
    line-height: 1.9;
  }

  .highlight-card footer {
    display: grid;
    gap: var(--space-2);
  }

  /* -------------------------------- clips ------------------------------- */
  .clip-feed {
    display: grid;
    gap: var(--space-4);
  }

  .clip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-4);
  }

  .clip-card {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: inherit;
    padding: var(--space-4);
    text-align: start;
  }

  .clip-card--feed {
    cursor: default;
  }

  .clip-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .clip-card__body {
    display: grid;
    gap: var(--space-3);
    background: none;
    color: inherit;
    padding: 0;
    text-align: start;
  }

  .clip-card__status {
    width: fit-content;
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--muted-strong);
    padding: 0.1rem 0.6rem;
    font-size: var(--fs-12);
  }

  .clip-card__status.is-ready {
    color: var(--success);
  }

  .clip-card__status.is-processing {
    color: var(--warning);
  }

  .clip-card__status.is-failed {
    color: var(--danger);
  }

  .clip-caption {
    margin: 0;
    font-size: var(--fs-16);
    font-weight: 700;
    line-height: 1.7;
  }

  .clip-caption--muted {
    color: var(--muted);
    font-weight: 400;
  }

  .clip-attribution {
    color: var(--muted);
    font-size: var(--fs-12);
  }

  .waveform {
    display: flex;
    height: 2.75rem;
    align-items: center;
    gap: 2px;
  }

  .waveform i {
    width: 3px;
    height: max(12%, calc(var(--bar) * 1%));
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--primary);
  }

  .clip-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: var(--space-6);
  }

  .clip-wave {
    display: block;
    width: 100%;
    min-width: 0;
    height: 2.75rem;
    color: var(--primary);
  }

  .clip-hero .detail-actions > button {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* ---------------------------- notifications --------------------------- */
  .notification-list {
    display: grid;
  }

  .notification {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    border-block-end: 1px solid var(--surface);
    padding-block: var(--space-3);
  }

  .notification__icon {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted-strong);
  }

  .notification.is-unread .notification__icon {
    background: var(--surface-soft);
    color: var(--primary-hover);
  }

  .notification__body {
    display: grid;
    gap: 0.1rem;
    background: none;
    color: inherit;
    padding: 0;
    text-align: start;
  }

  .notification__body strong {
    font-size: var(--fs-14);
  }

  .notification__body small {
    color: var(--muted);
    font-size: var(--fs-12);
  }

  .notification__body p {
    margin: 0;
    color: var(--muted-strong);
    font-size: var(--fs-12);
  }

  /* ------------------------------- reviews ------------------------------ */
  .review-form {
    display: grid;
    gap: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: var(--space-4);
  }

  .review-form .field input,
  .review-form .field textarea {
    background: var(--bg);
  }

  .review-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .review-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .review-card--mine {
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: var(--space-4);
  }

  .review-card header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .review-card h3 {
    font-size: var(--fs-16);
  }

  .review-card p {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-soft);
    line-height: 1.8;
  }

  /* ------------------------------- profile ------------------------------ */
  .profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .profile-card,
  .diagnostics-panel {
    display: grid;
    gap: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: var(--space-4);
  }

  .profile-card .field input,
  .profile-card .field textarea,
  .profile-card .field select,
  .diagnostics-panel .field input {
    background: var(--bg);
  }

  .profile-identity {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .profile-identity .person-avatar {
    width: 4.5rem;
    height: 4.5rem;
  }

  .profile-identity h2 {
    font-size: var(--fs-20);
  }

  .profile-identity p {
    color: var(--muted);
    font-size: var(--fs-12);
  }

  .diagnostics-panel h2 {
    font-size: var(--fs-18);
  }

  .health-list {
    display: grid;
  }

  .health-row {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border-block-end: 1px solid var(--border);
    color: var(--text-soft);
  }

  .health-row:last-child {
    border-block-end: 0;
  }

  .health-row strong {
    font-family: var(--font-latin);
    font-size: var(--fs-12);
  }

  .mode-options {
    display: grid;
    gap: var(--space-2);
  }

  .mode-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 4rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--text);
    padding: var(--space-3) var(--space-4);
    text-align: start;
  }

  .mode-option[aria-pressed='true'] {
    border-color: var(--primary);
  }

  .mode-option p {
    color: var(--muted);
    font-size: var(--fs-12);
  }

  .mode-check {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    color: transparent;
  }

  .mode-check svg {
    width: 0.9rem;
    height: 0.9rem;
  }

  .mode-option[aria-pressed='true'] .mode-check {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
  }

  .stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--space-3);
  }

  .stat-tile {
    display: grid;
    gap: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--bg);
    padding: var(--space-4);
  }

  .stat-tile strong {
    font-family: var(--font-latin);
    font-size: var(--fs-24);
    line-height: 1.2;
  }

  .stat-tile span {
    color: var(--muted);
    font-size: var(--fs-12);
  }

  .heatmap {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 0.85rem);
    gap: 3px;
    overflow-x: auto;
    padding-block: var(--space-2);
  }

  .heatmap__cell {
    width: 0.85rem;
    border-radius: 3px;
    background: var(--surface-raised);
  }

  .heatmap__cell[data-level='1'] {
    background: var(--blue-700);
  }

  .heatmap__cell[data-level='2'] {
    background: var(--blue-600);
  }

  .heatmap__cell[data-level='3'] {
    background: var(--blue-500);
  }

  .heatmap__cell[data-level='4'] {
    background: var(--blue-300);
  }

  .preference-table {
    width: 100%;
    border-collapse: collapse;
  }

  .browser-push-controls {
    display: grid;
    gap: var(--space-3);
    padding-block: var(--space-3) var(--space-5);
    margin-block-end: var(--space-3);
    border-block-end: 1px solid var(--border);
  }

  .browser-push-controls h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-16);
  }

  .transcript-request {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    max-inline-size: 40rem;
    margin-inline: auto;
    text-align: center;
  }

  .transcript-request p {
    margin: 0;
  }
  .transcript-request__error {
    color: var(--danger);
  }

  .browser-push-controls p {
    margin: 0;
    max-width: 65ch;
    line-height: 1.8;
  }

  .browser-push-controls [data-push-description] {
    color: var(--muted);
  }

  .preference-table th,
  .preference-table td {
    border-block-end: 1px solid var(--border);
    padding: var(--space-3) var(--space-2);
    text-align: start;
  }

  .preference-table th {
    color: var(--muted);
    font-size: var(--fs-12);
    font-weight: 500;
  }

  .preference-table td:not(:first-child),
  .preference-table th:not(:first-child) {
    width: 5rem;
    text-align: center;
  }

  .request-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .request-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg);
    padding: var(--space-3) var(--space-4);
  }

  /* -------------------------- people and playlists ---------------------- */
  .person-hero,
  .playlist-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
  }

  .person-hero .detail-copy,
  .playlist-hero .detail-copy {
    flex: 1 1 16rem;
    justify-items: start;
    text-align: start;
  }

  .person-hero .detail-actions,
  .playlist-hero .detail-actions,
  .person-hero .meta-line,
  .playlist-hero .meta-line {
    justify-content: flex-start;
  }

  .appearance-group {
    display: grid;
    gap: var(--space-4);
  }

  .appearance-group__header .text-button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text);
    font-size: var(--fs-16);
    font-weight: 700;
  }

  .appearance-group__header small {
    display: block;
    color: var(--muted);
    font-size: var(--fs-12);
    font-weight: 400;
  }

  /* ------------------ the sample catalogue card (Figma promo) ----------- */
  .sample-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: var(--space-6) var(--space-4);
    text-align: center;
  }

  .sample-showcase__covers {
    display: grid;
    width: min(100%, 22rem);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .sample-showcase__item {
    display: grid;
    gap: var(--space-1);
    background: none;
    color: inherit;
    padding: 0;
  }

  .sample-showcase__item strong {
    overflow: hidden;
    color: var(--muted-strong);
    font-size: var(--fs-12);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sample-showcase__intro {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
  }

  .sample-showcase__intro h2 {
    font-size: var(--fs-20);
  }

  .sample-showcase__intro p {
    max-width: 38ch;
    color: var(--muted-strong);
  }

  .sample-showcase__intro .primary-button {
    margin-block-start: var(--space-3);
  }
}

@layer responsive {
  @media (max-width: 39.99rem) {
    .transcript-cue {
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .transcript-cue__time {
      grid-column: 1 / -1;
      justify-self: start;
    }

    .inline-form .field {
      flex: 1 1 100%;
    }

    .notification > .icon-button {
      grid-column: 3;
    }
  }

  @media (min-width: 40rem) {
    .category-cloud {
      grid-auto-columns: 9.5rem;
      gap: var(--space-6);
    }

    .continue-card {
      width: 16rem;
    }

    .highlight-tile {
      width: 5rem;
    }

    .profile-card,
    .diagnostics-panel {
      padding: var(--space-6);
    }
  }

  /* From tablet up the centred Figma header becomes cover-beside-copy. */
  @media (min-width: 52rem) {
    .podcast-detail-hero,
    .episode-detail-hero {
      grid-template-columns: 15rem minmax(0, 1fr);
      align-items: center;
      justify-items: start;
      gap: var(--space-8);
    }

    .podcast-detail-hero > .cover-frame,
    .episode-detail-hero > .cover-frame {
      width: 100%;
    }

    .detail-copy {
      justify-items: start;
      text-align: start;
    }

    .detail-copy h1 {
      font-size: 2rem;
    }

    .detail-copy .meta-line,
    .detail-copy .stat-line,
    .detail-actions {
      justify-content: flex-start;
    }

    .profile-grid {
      grid-template-columns: minmax(16rem, 0.75fr) minmax(20rem, 1.25fr);
      align-items: start;
    }

    .sample-showcase {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
      padding: var(--space-8);
      text-align: start;
    }

    .sample-showcase__intro {
      justify-items: start;
    }

    .rank-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--space-12);
    }
  }

  @media (min-width: 68rem) {
    .greeting {
      font-size: 2rem;
    }

    .hero-search {
      display: none;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .playlist-card:hover,
    .clip-card:hover {
      background: var(--surface-hover);
    }

    .clip-card--feed:hover {
      background: var(--surface);
    }

    .suggestions button:hover {
      background: var(--surface-hover);
    }

    .timestamp-row:hover {
      color: var(--text);
    }

    .continue-card:hover,
    .hero-search:hover {
      background: var(--hero-line);
    }
  }
}