/* The demo's pager: each chapter one screen of the app, drawn at one scale in one frame, its caption under it. Colours,
   type, buttons, statuses and mocks come from style.css. Declared after style.css's layers, so it wins over them. */
@layer demo {
  .player {
    container: player / inline-size;
    display: grid;
    gap: 1.25em;
    inline-size: 100%;
    max-inline-size: 54rem;
    margin-inline: auto;

    /* The picture sits close under the title, as the home's stage does, not a whole canvas gap below it. */
    .canvas > & {
      margin-block-start: calc(1.5rem - clamp(3rem, 7vw, 6rem));
    }

    [hidden] {
      display: none;
    }
  }

  /* Without the script every chapter shows, its screen over its caption. */
  .player__stage {
    display: grid;
    gap: 3em;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .player__chapter {
    display: grid;
    gap: 1.25em;
    min-inline-size: 0;
  }

  /* One picture, 960 units by 600, as the home's stage is one picture: it scales whole and never reflows. Its height
     comes from the player's width, not from aspect-ratio: with a screen taller than the frame, aspect-ratio hangs
     Chromium's layout. */
  .player__frame {
    container-type: inline-size;
    block-size: calc(100cqi * 5 / 8);
    overflow: clip;
    border-radius: 0.5em;
    background-color: var(--color-canvas);
    box-shadow: var(--shadow);
  }

  .player__screen {
    --px: calc(100cqi / 960);

    display: grid;
    grid-template-columns: var(--columns, minmax(0, 1fr));
    block-size: 100%;
    font-size: calc(var(--px) * 16);

    .mock {
      --mock-size: calc(var(--px) * var(--mock-units, 16));
      --shadow-card: none;

      min-block-size: 100%;
      border-radius: 0;
      box-shadow: none;
    }

    /* Rows lie on the screen, not on a card of their own: one frame, never a box in a box. */
    .rows {
      --rows-bg: transparent;
      --rows-border-size: 0;
      --rows-shadow: none;
    }
  }

  /* A split screen's panes meet on a hairline, flush, with no frame of their own. */
  .player__part {
    min-inline-size: 0;
    overflow: clip;

    & + & {
      box-shadow: calc(var(--px) * -1) 0 0 var(--hairline);
    }
  }

  .player__caption {
    max-inline-size: 36em;
  }

  /* With the script one chapter shows. Every caption keeps its place in one cell, so the tallest sets its height and the
     pager under it never moves. */
  .player--live {
    .player__stage {
      grid-template: auto auto / minmax(0, 1fr);
      gap: 1.25em 0;
    }

    .player__chapter {
      display: contents;
    }

    .player__frame {
      grid-area: 1 / 1;
    }

    .player__caption {
      grid-area: 2 / 1;
    }

    .player__chapter:not(.player__chapter--current) {
      .player__frame {
        display: none;
      }

      .player__caption {
        visibility: hidden;
      }
    }
  }

  .player__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5em;

    .btn--circle {
      --btn-size: 2.5em;

      font-size: var(--size-small);

      svg {
        inline-size: 1.1em;
        block-size: 1.1em;
      }
    }
  }

  .player__pages {
    display: flex;
    gap: 0.15em;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .player__page {
    display: grid;
    place-items: center;
    inline-size: 2.25em;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-ink-dark);
    font-size: var(--size-small);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-ink-lightest);
        color: var(--color-ink);
      }
    }

    &[aria-current] {
      background-color: var(--color-ink);
      color: var(--color-ink-inverted);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: 2px;
    }
  }

  /* Ten numbers and two arrows outgrow a phone: the numbers take their own row under the arrows' row. */
  @media (width < 30rem) {
    .player__pager {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;

      > :first-child { grid-area: 1 / 1; }
      > :last-child { grid-area: 1 / 3; }
    }

    .player__pages {
      grid-area: 2 / 1 / 3 / -1;
      justify-content: space-between;
    }

    .player__page {
      inline-size: 2em;
    }
  }

  /* A conversation with an assistant: the person's words on the right, the assistant's on the left, and a quiet line
     where it used Auditans. Plain grounds only, in the page's type. */
  .chat__lines {
    display: grid;
    gap: 0.8em;
    margin: 0;
    padding: 1.1em;
    list-style: none;
  }

  .chat__ask,
  .chat__reply,
  .chat__message {
    padding: 0.6em 0.9em;
    border-radius: 1em;
  }

  .chat__ask {
    justify-self: end;
    max-inline-size: 85%;
    border-end-end-radius: 0.25em;
    background-color: color-mix(in oklch, var(--color-ink) 8%, var(--color-canvas));
    font-weight: 600;
  }

  li:has(> .chat__ask) {
    display: grid;
  }

  .chat__note {
    color: var(--color-ink-dark);
    font-size: 0.85em;
  }

  .chat__reply,
  .chat__message {
    max-inline-size: 92%;
    border-end-start-radius: 0.25em;
    background-color: var(--color-ink-lightest);

    p + p {
      margin-block-start: 0.45em;
    }
  }

  .chat__author {
    font-weight: 700;
  }

  /* A message in Auditans's thread, as messages.css draws its head: the author's initials, name and time. */
  .chat__message .chat__author {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-block-end: 0.3em;
  }

  .message__timestamp {
    color: var(--color-ink-dark);
    font-size: 0.85em;
    font-weight: 400;
  }

  .chat__thread {
    padding: 1.1em 1.1em 0;
    font-weight: 800;
  }

  .chat__composer {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0 1.1em 1.1em;

    .mock__input {
      flex: 1;
      min-inline-size: 0;
    }
  }

  /* A placement's switch is drawn disabled, so nothing on the page takes it, and dressed as the live one. */
  .player .switch__input:disabled + .switch__btn {
    opacity: 1;
  }

  .transcript {
    max-inline-size: var(--prose-width);
    margin-block-start: 2rem;
    margin-inline: auto;
  }

  .transcript__title {
    font-size: var(--size-subheading);
  }

  .transcript__chapters {
    display: grid;
    gap: 1.25em;
    margin-block-start: 1em;
    padding: 0;
    list-style: none;

    h3 {
      margin-block-end: 0.3em;
      font-size: 1em;
    }

    p + p {
      margin-block-start: 0.4em;
    }
  }

  /* Without the script the chapters carry every caption already. */
  .player:not(.player--live) .transcript {
    display: none;
  }
}