/*
 * File preview (D-07, D-10, A-08, A-20, M-02): surface card (radius 28px, padding 14px) with a
 * file-name row and "Page 1 of 6" (or an action such as A-08's Download), above a 600px rounded,
 * striped well showing the inline file. Phones: 250px well, no card or bar.
 * A Word, Excel, PowerPoint or CSV file shows its PDF preview with its type after the name
 * (.pdf-preview__type); while that PDF is made the well holds the loader and Download
 * (.pdf-preview__well--waiting). An image fills the well on a plain background, whole
 * (.pdf-preview__well--image).
 */
@layer components {
  .pdf-preview {
    --pdf-preview-stripes: repeating-linear-gradient(135deg, var(--color-neutral-100) 0 12px, var(--color-neutral-200) 12px 24px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }

  .pdf-preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 8px;
    color: var(--color-neutral-700);
    font-size: 13px;
  }

  .pdf-preview__name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--color-text);
    font-weight: 700;
  }
  .pdf-preview__name .icon { font-size: 16px; }
  .pdf-preview__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pdf-preview__name .pdf-preview__type {
    flex: none;
    overflow: visible;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-neutral-800);
    font-size: 11.5px;
    font-weight: 700;
  }

  .pdf-preview__pages { white-space: nowrap; }
  .pdf-preview__bar .btn { height: 32px; }

  /* The well (600px) clips the frame. Chrome's PDF viewer surrounds the page with its dark
     background (3px above and 5px each side at 100%, a little more when the page is zoomed to a wide
     frame); the frame is larger than the well, which clips that edge (and a few px of the page's
     white margin), so the page meets the rounded corners directly.
     While the viewer loads (.is-loading, pdf-preview controller) the stripes cover the frame, so its
     dark background never shows as a black box. The frame itself stays visible underneath: the
     browser keeps painting it. */
  .pdf-preview__well {
    position: relative;
    height: 600px;
    overflow: hidden;
    border-radius: var(--radius-row);
    background: var(--pdf-preview-stripes);
  }
  .pdf-preview__well::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pdf-preview-stripes);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .pdf-preview__well.is-loading::after { opacity: 1; }

  .pdf-preview__frame {
    display: block;
    width: calc(100% + 16px);
    max-width: none;
    height: calc(100% + 5px);
    margin: -5px -8px 0;
    border: 0;
  }
  /* Classic scrollbars (Windows, Linux; .has-scrollbars from the controller): the viewer puts its
     scrollbar at the frame's right edge, after the page's dark margin. The frame ends at the well's
     edge so the scrollbar stays whole; the margin shows as a thin dark line before it. */
  .pdf-preview__well.has-scrollbars .pdf-preview__frame {
    width: calc(100% + 8px);
    margin-right: 0;
  }

  /* "Preparing preview…": the loader and Download on a card in the striped well. */
  .pdf-preview__well--waiting {
    display: grid;
    place-items: center;
    padding: 16px;
  }
  .pdf-preview__waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    padding: 18px 22px;
    border-radius: var(--radius-row);
    background: var(--color-bg);
    text-align: center;
  }
  .pdf-preview__waiting.is-stalled .loader__flower { animation: none; }

  /* An image, whole and centered, as large as the well allows; it links to the full image. */
  .pdf-preview__well--image {
    padding: 12px;
    background: var(--color-neutral-100);
  }
  .pdf-preview__picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-row);
  }
  .pdf-preview__image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  .pdf-preview__placeholder {
    display: grid;
    place-items: center;
  }
  .pdf-preview__placeholder span {
    max-width: calc(100% - 32px);
    text-align: center;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-neutral-700);
    font: 600 12px var(--font-mono);
  }

  @media (prefers-reduced-motion: reduce) {
    .pdf-preview__well::after { transition: none; }
  }

  @media (max-width: 767px) {
    .pdf-preview { padding: 0; background: none; }
    .pdf-preview__bar { display: none; }
    .pdf-preview__well { height: 250px; }
  }
}