/*
 * M6 Admin documents CMS: A-06 list (+ S-10), A-08 detail and Acknowledgments tab, A-09 version
 * history, A-10 publish confirmation, the archive dialog. The A-07 form is in admin-document-form.css.
 */
@layer pages {
  /* A-06 / S-10 head: 46px title + 50px Add Document over the list (A-06), 40px + 44px when the
     filters match nothing (S-10). */
  .docs-index-head .page-head__title { line-height: 1.08; }
  .docs-index-head--rows .page-head__title { font-size: 46px; line-height: 1.05; }
  .docs-index-head--rows .docs-index-head__add { height: 50px; }

  /* A-06 list ------------------------------------------------------------------------------------ */
  .docs-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* A-06 / A-08 Acknowledgments: the table and its pager (outside the role="table"), 6px apart. */
  .docs-table {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .list--documents {
    --list-cols: minmax(0, 1fr) 170px 64px 108px 140px 100px 100px 104px 36px;
  }

  .docs-row { min-height: 58px; }
  .docs-row__title { min-width: 0; font-weight: 700; }
  .docs-row__link { color: var(--color-text); text-decoration: none; }
  .docs-row__link:hover { color: var(--color-text); text-decoration: underline; }
  /* The title link covers the whole row; the menu sits above it. */
  .docs-row__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .docs-row__link:focus-visible { outline: none; }
  .docs-row__link:focus-visible::after { box-shadow: var(--ring); }
  .docs-row:has(.docs-row__link:hover) { box-shadow: 0 0 0 2px var(--color-divider); }

  .docs-row__version {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    white-space: nowrap;
  }
  .docs-row__draft {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    border: 1px dashed var(--color-neutral-600);
    border-radius: var(--radius-pill);
    color: var(--color-neutral-800);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 16px;
  }
  .docs-row__draft .icon { font-size: 10px; }

  .docs-row__menu {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
  }
  .docs-row__more {
    width: 32px;
    height: 32px;
  }
  /* Each menu cell is its own layer above the stretched link, so the row with the open menu is lifted
     over the rows after it. */
  .docs-row:has(.menu__panel:not([hidden])) { z-index: 2; }
  .docs-row.list-row--archived .docs-row__link { color: inherit; }

  /* A-08 / A-09 head and tabs ------------------------------------------------------------------- */
  .docs-head__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .docs-head .page-head__meta {
    align-items: center;
    gap: 14px;
    color: var(--color-neutral-800);
    font-size: 13.5px;
  }
  .docs-head .page-head__title { line-height: 1.08; }

  .docs-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1.5px solid var(--color-divider);
  }
  .docs-tabs__tab {
    margin-bottom: -1.5px;
    white-space: nowrap;
    padding: 10px 16px 7px;
    border-bottom: 3px solid transparent;
    color: var(--color-neutral-700);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  .docs-tabs__tab:hover { color: var(--color-text); }
  .docs-tabs__tab.is-active {
    border-bottom-color: var(--color-blue);
    color: var(--color-blue);
  }

  .docs-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
  }
  .docs-split__main,
  .docs-split__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  /* A-08 file preview ----------------------------------------------------------------------------- */
  .docs-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .docs-preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    padding: 4px 8px;
    color: var(--color-neutral-700);
    font-size: 13px;
  }
  .docs-preview__bar .btn { height: 32px; }
  .docs-preview__name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--color-text);
    font-weight: 700;
  }
  .docs-preview__name .icon { font-size: 16px; }
  .docs-preview__name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .docs-preview__video {
    display: block;
    width: 100%;
    height: 520px;
    border: 0;
    border-radius: var(--radius-row);
    background: var(--color-text);
  }
  /* PDFs use the shared components/pdf_preview card (same bar), with A-08's 520px frame. */
  .docs-pdf .pdf-preview__well { height: 520px; }
  .docs-preview__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 260px;
    padding: 32px;
    border-radius: var(--radius-row);
    background: var(--color-bg);
    text-align: center;
  }
  .docs-preview__empty-title { max-width: 420px; font-size: 15px; font-weight: 700; }
  .docs-preview__empty-meta { color: var(--color-neutral-700); font-size: 13px; }

  /* A-08 acknowledgments card ------------------------------------------------------------------- */
  .docs-ack__count {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .docs-ack__num {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.55;
  }
  .docs-ack__of { font-size: 15px; font-weight: 700; }
  .docs-ack__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .docs-ack__due { color: var(--color-neutral-800); font-size: 13.5px; }
  .card > .docs-ack__view { align-self: flex-start; height: 40px; }

  /* A-08 Acknowledgments tab ---------------------------------------------------------------------- */
  .docs-acks-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .list--doc-acks {
    --list-cols: minmax(0, 1.6fr) minmax(0, 1fr) 128px 108px 108px 172px 20px;
  }
  .docs-ackrow__person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .docs-ackrow__person .list-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .docs-ackrow__when { display: none; }
  .docs-ackrow__chev { display: flex; justify-content: flex-end; color: var(--color-neutral-700); font-size: 15px; }

  /* A-09 version history ------------------------------------------------------------------------- */
  /* The design's six columns need a 696px table (1440px windows; 832–1023 in one column).
     The table is a size container, so its own width decides what drops out: first "Published by",
     then the dates move under the version (the phone pattern). The side panel shows all of them. */
  .list--versions {
    --list-cols: 90px 130px 130px 120px minmax(0, 1fr) 76px;
    container: doc-versions / inline-size;
  }
  .docs-vrow { min-height: 58px; }
  .docs-vrow--active { background: var(--color-accent-2-100); }
  .docs-vrow--archived {
    padding: 6.5px 18.5px;
    border: 1.5px dashed var(--color-neutral-400);
    background: transparent;
    color: var(--color-neutral-800);
  }
  .docs-vrow--draft {
    padding: 6.5px 18.5px;
    border: 1.5px dashed var(--color-neutral-600);
  }
  /* The selected row is a solid surface row with the blue ring and the normal text color,
     whatever its status (A-09). */
  .docs-vrow--archived.is-selected,
  .docs-vrow--draft.is-selected {
    border-color: transparent;
    background: var(--color-surface);
    color: var(--color-text);
  }
  .docs-vrow__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .docs-vrow__meta { display: none; }
  .docs-vrow__label {
    color: var(--color-text);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }
  .docs-vrow__label::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .docs-vrow__label:hover { color: var(--color-text); }
  .docs-vrow__label:focus-visible { outline: none; }
  .docs-vrow__label:focus-visible::after { box-shadow: var(--ring); }
  .docs-vrow:not(.is-selected):has(.docs-vrow__label:hover) { box-shadow: 0 0 0 2px var(--color-divider); }
  .docs-vrow__actions {
    position: relative;
    z-index: 1;
  }
  .docs-vrow__actions .icon-btn {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  /* Narrower tables (see .list--versions). */
  @container doc-versions (max-width: 695px) {
    .list--versions > :is(.list-header, .docs-vrow) { --list-cols: 90px minmax(0, 130px) minmax(0, 130px) 120px 76px; }
    .list--versions > :is(.list-header, .docs-vrow) > :nth-child(5) { display: none; }
  }
  @container doc-versions (max-width: 559px) {
    .list--versions > :is(.list-header, .docs-vrow) { --list-cols: minmax(0, 1fr) 120px 76px; }
    .list--versions > :is(.list-header, .docs-vrow) > :is(:nth-child(2), :nth-child(3)) { display: none; }
    .docs-vrow__meta { display: block; }
  }

  .docs-vpanel__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .docs-vpanel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .docs-vpanel__actions .btn { height: 40px; }

  /* Impact lists (A-10, archive dialog) ------------------------------------------------------------ */
  .docs-impact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .docs-impact__item {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-hairline);
  }
  .docs-impact__icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface);
    font-size: 17px;
  }
  .docs-impact__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .docs-impact__title { font-size: 14.5px; font-weight: 700; line-height: 1.55; }
  .docs-impact__meta {
    color: var(--color-neutral-700);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  /* A-10 publish confirmation -------------------------------------------------------------------- */
  .docs-publish { width: 600px; }
  .docs-publish__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .docs-publish__warn {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border-radius: 24px;
    background: var(--color-warn-soft);
    box-shadow: inset 0 0 0 2px var(--color-warn);
    color: var(--color-warn-text);
  }
  .docs-publish__warn.is-invalid { box-shadow: inset 0 0 0 2px var(--color-err); }
  .docs-publish__warn-head {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .docs-publish__warn-head .icon { font-size: 20px; }
  .docs-publish__warn-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
  .docs-publish__warn-body { font-size: 13.5px; line-height: 1.5; }
  .docs-publish__warn-body strong { display: block; margin-top: 6px; }
  .docs-publish__check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
  }
  /* The design's 20px checkSq: an outlined rounded square with a blue tick (not the native box). */
  .docs-publish__check input {
    appearance: none;
    width: 17px;
    height: 17px;
    flex: none;
    display: grid;
    place-items: center;
    margin: 1.5px;
    border: 2.25px solid var(--color-neutral-700);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
  }
  .docs-publish__check input::after {
    content: "";
    width: 6.5px;
    height: 3.5px;
    margin-top: -1.5px;
    border-bottom: 2.25px solid var(--color-blue);
    border-left: 2.25px solid var(--color-blue);
    border-radius: 0 0 0 1px;
    transform: rotate(-45deg);
    opacity: 0;
  }
  .docs-publish__check input:checked { border-color: var(--color-blue); }
  .docs-publish__check input:checked::after { opacity: 1; }
  .docs-publish__check input:focus-visible { outline: none; box-shadow: var(--ring); }
  .docs-publish__warn.is-invalid .docs-publish__check input:not(:checked) { border-color: var(--color-err); }

  /* Laptop / tablet / phone --------------------------------------------------------------------- */
  /* A-06: the nine columns take 974px before the title, which gets the design's 126px only at
     1440. Narrower, the dates go first (both are on the detail page): Updated below 1440px, then
     Effective below 1340px, so the title keeps 114px or more and nothing scrolls sideways. */
  @media (max-width: 1439px) {
    .list--documents { --list-cols: minmax(0, 1fr) 170px 64px 108px 140px 100px 104px 36px; }
    .list--documents .list-header > :nth-child(7),
    .docs-row > :nth-child(7) { display: none; }
  }

  @media (max-width: 1339px) {
    .list--documents { --list-cols: minmax(0, 1fr) 170px 64px 108px 140px 104px 36px; }
    .list--documents .list-header > :nth-child(6),
    .docs-row > :nth-child(6) { display: none; }
  }

  /* Below 1200px the main column is narrower still: Title, Category, Version and Status stay;
     Site scope, dates and Acknowledgment are on the detail page. */
  @media (max-width: 1199px) {
    .docs-split { grid-template-columns: minmax(0, 1fr) 320px; }
    .list--documents { --list-cols: minmax(0, 1fr) 160px 64px 104px 36px; } /* 160: the "Licensing & Compliance" petal */
    .list--documents .list-header > :nth-child(n+5):not(:last-child),
    .docs-row > :nth-child(n+5):not(:last-child) { display: none; }
  }

  @media (max-width: 1023px) {
    .docs-split { grid-template-columns: minmax(0, 1fr); }
  }

  @media (max-width: 767px) {
    /* Rows wrap: title + menu, then category, version, status, Site scope and the Required chip. */
    .docs-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
    }
    .docs-row > :nth-child(n+5):not(:last-child) { display: none; }
    .docs-row > .list-row__cell:nth-child(5),
    .docs-row > .list-row__cell:nth-child(8) { display: flex; }
    .docs-row > .list-row__cell:has(> .list-row__muted) { display: none; }
    .docs-row > * { order: 2; }
    .docs-row > .docs-row__title { order: 0; flex: 1 1 calc(100% - 58px); }
    .docs-row > .docs-row__menu { order: 1; margin-left: auto; flex: none; }
    .docs-row__version { flex-direction: row; align-items: center; }

    /* Hit targets of at least 44px (README Mobile). */
    .docs-row__more,
    .docs-vrow__actions .icon-btn { width: 44px; height: 44px; }

    .docs-tabs { overflow-x: auto; scrollbar-width: none; }
    .docs-tabs__tab {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }
    .docs-preview__video { height: 280px; }
    /* Admins keep the file card and its Download on phones. */
    .docs-pdf.pdf-preview { padding: 14px; background: var(--color-surface); }
    .docs-pdf .pdf-preview__bar { display: flex; }
    .docs-pdf .pdf-preview__well { height: 280px; }

    /* A-09: version + dates line | status | actions. */
    .list--versions { --list-cols-mobile: minmax(0, 1fr) auto auto; }
    .docs-vrow > :nth-child(2), .docs-vrow > :nth-child(3), .docs-vrow > :nth-child(5) { display: none; }
    .docs-vrow__meta { display: block; }

    /* Acknowledgments: Director + date line | status | chevron. */
    .list--doc-acks { --list-cols-mobile: minmax(0, 1fr) auto auto; }
    .docs-ackrow > :nth-child(n+4):not(:last-child), .docs-ackrow > :nth-child(2) { display: none; }
    .docs-ackrow__email { display: none; }
    .docs-ackrow__person .docs-ackrow__when { display: block; white-space: normal; }

    .docs-publish { width: 100vw; }
  }
}