/*
 * M6 A-07 Create / edit document (+ Edit Details, version drafts) and the S-11 form errors: four
 * numbered section cards on the left, the sticky "Before publishing" card (380px) on the right.
 */
@layer pages {
  .doc-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .doc-form__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
  }

  .doc-form__sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  .doc-form__section { gap: 20px; }

  .doc-form__head {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .doc-form__kind { margin-left: auto; }

  .doc-form__upload {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .doc-form__upload > .field__error { margin-top: -14px; }

  /* "Manage subcategories" under the Subcategory dropdown (A-25 shows it at the end of the list). */
  .doc-form__manage {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    min-height: 0;
    color: var(--color-blue-deep);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .doc-form__manage .icon { font-size: 16px; }
  .doc-form__manage:hover { text-decoration: underline; }
  .doc-form select[aria-busy="true"] { opacity: 0.6; }

  /* Policies: "Who it is for" under the Site scope. */
  .doc-form__audience {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .doc-form__audience[hidden] { display: none; }

  /* Effective date: the design's "Oct 15, 2026" / "Choose a date" drawn over the native date text
     (inside the border, after the calendar icon); the native control shows while it has focus. */
  .doc-form__date-value {
    position: absolute;
    inset: 3px 12px 3px 34px;
    display: flex;
    align-items: center;
    padding-left: 11.5px;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    font-size: 14.5px;
    line-height: 1.5;
    pointer-events: none;
  }
  .doc-form__date-value.is-empty { color: var(--color-neutral-700); }
  .doc-form__date .input:focus + .doc-form__date-value { display: none; }
  .doc-form__date .input { cursor: pointer; }

  /* Short description and the acknowledgment statement: the design's 84px boxes with no resize
     grip; they grow with their text (as A-12's statement and description do). */
  .doc-form textarea.input {
    min-height: 84px;
    resize: none;
    field-sizing: content;
  }

  .doc-form__impact { align-items: flex-start; }
  .doc-form__impact-live { display: block; margin-top: 4px; font-weight: 700; }
  .doc-form__ack-impact { margin-top: -6px; font-weight: 700; color: var(--color-warn-text); }

  /* Right column ---------------------------------------------------------------------------------- */
  .doc-form__side {
    position: sticky;
    top: 16px;
  }
  .doc-form__summary .btn--block { height: 50px; }
  .doc-form__side-note {
    color: var(--color-neutral-700);
    font-size: 13px;
    line-height: 1.5;
  }
  .doc-form__side-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .doc-checklist__done,
  .doc-checklist__todo {
    display: none;
    flex: none;
    width: 16px;
    height: 16px;
    place-items: center;
  }
  .doc-checklist__todo::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-neutral-500);
    border-radius: 50%;
  }
  .checklist__item:not(.is-done) .doc-checklist__todo { display: grid; }
  .checklist__item.is-done .doc-checklist__done { display: grid; }

  @media (max-width: 1199px) {
    .doc-form__layout { grid-template-columns: minmax(0, 1fr) 320px; }
  }

  @media (max-width: 1023px) {
    .doc-form__layout { grid-template-columns: minmax(0, 1fr); }
    .doc-form__side { position: static; }
  }

  /* Phones: the actions live in the bottom sheet (_form_sheet), not under the lede or in the side card. */
  .doc-sheet > .btn--primary { flex: 1; }

  @media (max-width: 767px) {
    .doc-form__head { flex-wrap: wrap; }
    .doc-form__kind { margin-left: 0; }
    .doc-form__manage { min-height: 44px; }
    .page-head:has(~ .doc-form) .page-head__actions,
    .doc-form__side-submit { display: none; }
  }
}