/* styles/sections/approval-form.css
 * The Brief approval modal (Revisiting Decisions Q4dqQA and its M and W instances), drawn as a
 * static picture of the form inside .artifact-window: no inputs and no focusable fields. "What
 * needed to be decided", the two fields with their values, the rationale cropped under a fade, and
 * the sources row (marker 5, then key and document chip rows). The key sits over its chip when the
 * form is narrower than 480px (CRqcW draws it so at 342), by the form's own width. */
@layer sections {
  .approval-form {
    container: approval-form / inline-size;
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 0;
    padding: var(--space-32) var(--space-20) 36px;
    box-shadow: var(--shot-modal-shadow);
    font-size: 15px;
    line-height: 23px;
    color: var(--shot-text);
  }

  .approval-form p { margin: 0; }

  .approval-form__need {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-14) 18px;
    border-radius: 6px;
    background: var(--shot-callout);
  }

  .approval-form__need-label {
    font-size: 13px;
    line-height: round(1.2em, 1px);
    color: var(--app-ink-2);
  }

  .approval-form__field {
    display: grid;
    gap: var(--space-10);
  }

  .approval-form__label {
    font-weight: 600;
    line-height: round(1.2em, 1px);
    color: var(--app-ink);
  }

  .approval-form__input {
    padding: 13px var(--space-16);
    border-radius: 6px;
    outline: 1px solid var(--shot-field-edge);
    outline-offset: -1px;
  }

  .approval-form__input--area {
    display: grid;
    gap: var(--space-16);
    padding: var(--space-14) var(--space-16) var(--space-16);
    font-size: 14px;
    line-height: 22px;
  }

  .approval-form__sources {
    display: flex;
    align-items: baseline;
    gap: var(--space-12);
  }

  .approval-form__links {
    display: grid;
    flex: 1 1 0;
    gap: var(--space-8);
    min-width: 0;
    margin: 0;
    line-height: round(1.2em, 1px);
  }

  .approval-form__links > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .approval-form__links dd {
    max-width: 100%;
    margin: 0;
  }

  @container approval-form (min-width: 480px) {
    .approval-form__links > div {
      flex-direction: row;
      align-items: center;
      gap: var(--space-8);
    }

    .approval-form__links dd { flex: none; }
  }

  @media (min-width: 900px) {
    .approval-form { padding-inline: 36px; }
  }
}