/* individual data item (episode) */
@layer components.main {
	/* main.single */
  .main {
    & h1,
    h2 {
      color: var(--primary-800);
      padding-block-end: 0.5rem;
    }
    & h1 a,
    h2 a {
      text-decoration: none;
      color: var(--primary-800);
      text-wrap: balance;
      text-wrap: pretty;
      display: inline-block;
    }
    & h1 a:hover,
    h2 a:hover {
      text-decoration: none;
      color: var(--secondary-700);
    }
    .prefix {
      color: var(--brand-muted);
      text-transform: uppercase;
      font-weight: 400;
      font-size: 0.9rem;
      font-size: var(--step-0);
      display: block;
      letter-spacing: 1.5px;
    }
    .roud {
    }
	/* main.single */
    & .thumb {
      min-width: 120px;
      width: min(20vw, 200px);
      display: grid;
      max-height: auto;
      object-fit: cover;
      aspect-ratio: 1;

      float: left;
      float: right;
      margin: -0.25rem 0.5rem 0rem -0.5rem;
      margin: -0.25rem 0rem 0.5rem 0.25rem;
      padding: 0.5rem;
      shape-outside: circle(50%);
      border-radius: 50%;
      transition: width 0.3 ease-in-out;
    }

    & .buttons {
      width: max-content;
      gap: 1.5rem;
      gap: var(--space-s-l);
      row-gap: 0.5rem;
      row-gap: calc(var(--space-s-l) / 3);
      padding: 0;
    }

    &:has(> footer:last-child) {
      & {
        padding-bottom: 0;
      }
      & > footer:last-child {
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
        background: var(--primary-50);
        width: calc(100% + 3rem);
        width: calc(100% + (2 * var(--space-s-l)));
        margin-inline: -1.5rem;
        margin-inline: calc(-1 * var(--space-s-l));
        padding: 0;
      }

      & > footer .buttons {
        margin-block-start: var(--space-s-l);
        padding-block: 0.75rem;
        padding-block: calc(var(--space-s-l) / 2);
        padding-block: calc(var(--space-s-l) / 1.25);

        width: 100%;
        padding-inline: inherit;

        padding-inline: 1.5rem;
        padding-inline: var(--space-s-l);

        border-top: solid 1px var(--surface-muted);

        background: var(--primary-min);

        [aria-controls] {
          min-width: 5.5rem;
          text-align: center;
          &:after {
            display: inline-block;
            margin-inline-start: 0.25rem;
            transform: scaley(0.6) scalex(1);
            opacity: 0.85;
          }
        }
        [aria-expanded="true"] {
          &:after {
            content: "▲";
          }
        }
        [aria-expanded="false"] {
          &:after {
            content: "▼";
          }
        }
      }

      & > footer .buttons:has([aria-controls$="listen"][aria-expanded="true"]) {
        --sahdow-color: var(--secondary-muted);
        box-shadow: var(--inner-shadow-4);
        background: var(--secondary-min);
        border-bottom: solid 1px var(--surface-muted);
      }
      &
        > footer
        .buttons:has([aria-controls$="transcript"][aria-expanded="true"]) {
        --sahdow-color: var(--primary-muted);
        background: var(--primary-min);
        box-shadow: var(--inner-shadow-4);
        border-bottom: solid 1px var(--surface-muted);
      }

      & .output {
        & > * {
          background-color: var(--primary-min);
          padding: var(--space-s-l);
          color: var(--text-base);
        }
        [id$="-transcript"] {
          max-height: 50dvh;
          overflow: auto;
          margin: 0;
          padding: var(--space-s-l);
          font-size: var(--step--1);
          line-height: 1.75;
        }
        [id$="-listen"] {
          background-color: var(--surface-base);
          color: var(--secondary-max);
        }
      }
    }

    & .hidden {
      display: none;
    }
  }
}