/*
 * The slide player (layouts/player; E-05…E-11, D-26…D-28): a focused page without the rail.
 *   .player           the frame: top (Exit, title, status, progress segments), one section, bottom bar
 *   .player-steps     segmented progress bar — done sage with a check, current blue, upcoming neutral
 *   .player-section   eyebrow + title, the text shown with the section, then its media:
 *                     .player-outline (E-05), .player-video (E-06), .player-file (E-07),
 *                     .player-link + .player-upload (E-08 drop zone, E-09 uploaded file)
 *   .player-statement / .player-sign   E-10 "Sign to complete"
 *   .player-done      E-11 "Training complete"
 *   .player-banner    "Preview — nothing is saved"
 * Shared pieces come from components/ (buttons, chips, kv, signature pad, pdf preview, notices).
 */
@layer pages {
  .layout-player {
    display: flex;
    flex-direction: column;
  }

  .player {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-bg);
    color: var(--color-text);
  }

  /* Flash messages sit under the "view as" banner. */
  .layout-player .imp-banner ~ .flash-stack { top: calc(var(--banner-height) + 16px); }

  /* "Preview — nothing is saved" ------------------------------------------------------------ */
  .player-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 40px;
    background: var(--color-blue-soft);
    color: var(--color-blue-deep);
    font-size: 13.5px;
    line-height: 1.45;
  }
  .player-banner__icon { display: flex; flex: none; font-size: 17px; }
  .player-banner__title { font-weight: 700; }

  /* Top: Exit, title, status, segments --------------------------------------------------------- */
  .player__top {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 40px 0;
  }

  .player__bar {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .player__title {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player__status {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-neutral-700);
    font-size: 13px;
  }

  .player-steps {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .player-step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .player-step__bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-300);
  }
  .player-step.is-done .player-step__bar { background: var(--color-accent-2-600); }
  .player-step.is-current .player-step__bar { background: var(--color-blue); }

  .player-step__label {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--color-neutral-700);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    text-decoration: none;
  }
  .player-step__label .icon { font-size: 13px; }
  .player-step.is-current .player-step__label { color: var(--color-text); }
  a.player-step__label:hover { color: var(--color-text); text-decoration: underline; }

  .player-step__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Middle: one section ---------------------------------------------------------------------- */
  .player__main {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 40px 40px 32px;
  }

  .player__content {
    width: 100%;
    max-width: 960px;
    min-width: 0;
  }

  .player-section {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .player-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .player-head__title {
    margin: 0;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-wrap: balance;
  }

  /* S-08 error after a refused save (focused on render). */
  .player-error {
    max-width: 720px;
    border-radius: var(--radius-row);
  }

  .player-text {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 17px;
    line-height: 1.6;
    text-wrap: pretty;
  }
  .player-text p { margin: 0; }

  /* E-05 "What you'll do" */
  .player-outline {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  /* The heading is the 11px overline on the body's line (17px tall, E-05). */
  .player-outline .overline { line-height: 1.55; }
  .player-outline__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
  }
  .player-outline__item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
  }
  .player-outline__icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-bg);
    font-size: 17px;
  }

  /* E-06 video: a dark 440px stage; before the first play, the play button and a quiet time bar. */
  .player-video {
    position: relative;
    height: 440px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-card);
    background: var(--color-neutral-900);
  }
  .player-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .player-video__play {
    position: relative;
    z-index: 1;
    width: 84px;
    height: 84px;
    display: none;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 34px;
  }
  .player-video__play:hover { background: var(--color-neutral-100); }
  .player-video__play:focus-visible { outline-color: var(--color-bg); }
  .player-video__play .icon { transform: translateX(2px); }

  .player-video__scrub {
    position: absolute;
    right: 20px;
    bottom: 18px;
    left: 20px;
    z-index: 1;
    display: none;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
  }
  .player-video__track {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 35%);
  }
  .player-video.is-enhanced:not(.is-playing) .player-video__play { display: grid; }
  .player-video.is-enhanced:not(.is-playing) .player-video__scrub { display: flex; }

  .player-video__error {
    position: relative;
    z-index: 1;
    max-width: 420px;
    margin: 0;
    padding: 0 24px;
    color: var(--color-bg);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
  }
  .player-video.is-failed .player-video__media { visibility: hidden; }

  /* E-07 PDF: the shared preview card with the file name and Download above a 380px page. */
  .player-file { gap: 10px; }
  .player-file .pdf-preview__name { gap: 10px; }
  .player-file .pdf-preview__bar {
    padding: 0 8px;
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 700;
  }
  .player-file .pdf-preview__bar .btn { height: 38px; }
  .player-file .pdf-preview__well {
    height: clamp(380px, calc(100dvh - 520px), 760px);
    border-radius: 18px;
  }

  /* E-08 external link */
  .player-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 24px;
    background: var(--color-surface);
  }
  .player-link__icon {
    width: 48px;
    height: 48px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--radius-tile);
    background: var(--petal-ops-bg);
    color: var(--petal-ops-fg);
    font-size: 22px;
  }
  .player-link__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .player-link__name { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
  .player-link__meta { color: var(--color-neutral-700); font-size: 13px; overflow-wrap: anywhere; }

  /* E-08 / E-09 certificate */
  .player-upload {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .player-upload__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .player-upload__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.55;
  }
  .player-upload__note {
    margin: 0;
    color: var(--color-neutral-700);
    font-size: 12.5px;
    line-height: 1.45;
  }
  .player-upload__error {
    color: var(--color-err-text);
    font-size: 12.5px;
    font-weight: 700;
  }

  .player-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 34px;
    border: 2px dashed var(--color-neutral-500);
    border-radius: 24px;
    text-align: center;
    cursor: pointer;
  }
  .player-drop:hover,
  .player-drop.is-over {
    border-color: var(--color-blue);
    background: color-mix(in srgb, var(--color-blue) 6%, transparent);
  }
  .player-drop:focus-within { outline: 2px solid var(--color-blue); outline-offset: 2px; }
  .player-drop.is-invalid { border-color: var(--color-err); background: var(--color-err-soft); }
  .player-drop.is-off { cursor: default; }
  .player-drop.is-off:hover { border-color: var(--color-neutral-500); background: none; }
  .is-uploading .player-drop { pointer-events: none; }

  .player-drop__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    font-size: 22px;
  }
  .player-drop__title { font-size: 15px; font-weight: 700; }
  .player-drop__help {
    color: var(--color-neutral-700);
    font-size: 12.5px;
    line-height: 1.45;
  }
  /* The whole zone is the file input: a click anywhere opens the picker, a drop lands on it. */
  .player-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  .player-cert {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 20px;
    background: var(--color-surface);
  }
  .player-cert__icon {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--color-accent-2-100);
    color: var(--color-accent-2-800);
    font-size: 20px;
  }
  .player-cert__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .player-cert__name { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
  .player-cert__meta { color: var(--color-neutral-700); font-size: 12.5px; }
  .player-cert__actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 6px;
  }
  .player-cert__replace {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
  }
  .player-cert__pick { cursor: pointer; }
  .player-cert__pick:focus-within { outline: 2px solid var(--color-blue); outline-offset: 2px; }
  .is-uploading .player-cert__pick { pointer-events: none; opacity: 0.6; }

  /* E-10 Sign to complete */
  .player-statement {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .player-statement__text {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
  }

  .player-sign {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .player-sign .signature { gap: 8px; }
  .player-sign .signature__foot { padding-top: 0; }
  /* Preview: the pad as learners see it, turned off. */
  .player-sign__pad {
    height: 180px;
    display: grid;
    place-items: center;
    padding: 16px;
    border: 2px dashed var(--color-neutral-400);
    border-radius: var(--radius-row);
    background: var(--color-neutral-100);
    color: var(--color-neutral-700);
    font-size: 14px;
    text-align: center;
  }

  /* E-11 Training complete */
  .player-done {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-top: 40px;
  }
  .player-done__icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent-2-600);
    color: #fff;
    font-size: 34px;
  }
  .player-done__title {
    margin: 0;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
  }
  .player-done__text {
    max-width: 720px;
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    text-wrap: pretty;
  }
  .player-done__card {
    width: 520px;
    max-width: 100%;
    padding: 24px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  /* E-11: the certificate's file name reads as the other values (bold, text colour); it opens the file. */
  .player-done__card .kv__value a { color: var(--color-text); }
  .player-done__card .kv__value a:hover { color: var(--color-text); text-decoration: underline; }
  /* The drawn signature, right-aligned in its row. */
  .player-done__signature {
    width: auto;
    max-width: 220px;
    height: 44px;
    margin-left: auto;
    object-fit: contain;
    object-position: right center;
  }

  /* Bottom bar: Back, the reason Next is waiting, the primary button ---------------------- */
  .player__foot {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 40px 26px;
    border-top: 1.5px solid var(--color-divider);
    background: var(--color-bg);
  }
  .player__back .icon { transform: scaleX(-1); }
  .player__hint {
    flex: 1;
    min-width: 0;
    color: var(--color-neutral-700);
    font-size: 13px;
    text-align: right;
  }
  .player__form {
    display: flex;
    margin: 0;
  }

  /* Tablet and small laptops: less air around the frame. */
  @media (max-width: 1023px) {
    .player__top { padding: 18px 24px 0; }
    .player__main { padding: 32px 24px 28px; }
    .player__foot { padding: 16px 24px 22px; }
    .player-banner { padding: 10px 24px; }
  }

  /* Phones: bars without labels, the status under the title, a two-button bottom bar. */
  @media (max-width: 767px) {
    .player-banner { padding: 10px 18px; font-size: 13px; }

    .player__top { gap: 12px; padding: max(10px, env(safe-area-inset-top)) 18px 0; }
    .player__bar { flex-wrap: wrap; gap: 6px 12px; }
    .player__exit { min-height: 44px; }
    .player__title { flex: 1; }
    .player__status {
      flex-basis: 100%;
      margin-left: 0;
      font-size: 12.5px;
    }
    .player-steps { gap: 4px; }
    .player-step__label { display: none; }

    .player__main { padding: 22px 18px 24px; }
    .player-section { gap: 16px; }
    .player-head__title { font-size: 26px; line-height: 1.12; }
    .player-text { font-size: 15.5px; line-height: 1.55; }

    .player-outline { gap: 12px; padding: 18px; border-radius: 24px; }
    .player-outline__list { gap: 12px; }
    .player-outline__item { align-items: flex-start; font-size: 14.5px; line-height: 1.4; }
    .player-outline__item > :not(.player-outline__icon) { padding-top: 8px; }

    .player-video { height: 210px; border-radius: 20px; }
    .player-video__play { width: 64px; height: 64px; font-size: 26px; }
    .player-video__scrub { right: 14px; bottom: 12px; left: 14px; font-size: 12px; }

    /* The shared preview drops its card and bar on phones; here the bar carries Download. */
    .player-file {
      padding: 10px;
      background: var(--color-surface);
    }
    .player-file .pdf-preview__bar { display: flex; padding: 0 4px; }
    .player-file .pdf-preview__bar .btn { height: 44px; }
    .player-file .pdf-preview__well { height: 300px; }
    .player-file__open { height: 48px; }

    .player-link {
      flex-wrap: wrap;
      gap: 12px 14px;
      padding: 16px;
    }
    .player-link__open { flex: 1 1 100%; height: 48px; }

    .player-drop { padding: 24px 16px; }

    .player-cert { flex-wrap: wrap; }
    .player-cert__actions { flex: 1 1 100%; }
    .player-cert__actions > :is(a, .player-cert__replace, button) { flex: 1; }
    .player-cert__pick, .player-cert__actions .btn { width: 100%; min-height: 44px; }
    .player-cert__replace { flex-wrap: wrap; }

    .player-statement { gap: 12px; padding: 18px; border-radius: 24px; }
    .player-statement__text { font-size: 15.5px; line-height: 1.55; }

    .player-done { gap: 14px; padding-top: 12px; }
    .player-done__icon { width: 60px; height: 60px; font-size: 28px; }
    .player-done__title { font-size: 30px; }
    .player-done__text { font-size: 15.5px; line-height: 1.55; }
    .player-done__card { width: 100%; padding: 18px; border-radius: 24px; }
    .player-done__signature { max-width: 160px; }

    .player__foot {
      flex-wrap: wrap;
      gap: 8px 10px;
      padding: 12px 18px max(18px, env(safe-area-inset-bottom));
      box-shadow: var(--shadow-sheet);
    }
    .player__hint {
      order: -1;
      flex-basis: 100%;
      font-size: 12.5px;
      text-align: center;
    }
    .player__hint:empty { display: none; }
    .player__back { height: 52px; }
    .player__form,
    .player__foot > .player__next { flex: 1; }
    .player__next { width: 100%; height: 52px; }
  }
}