/* approvals.css - styles of the approval views (the register, one approval with its certificate) and of the approval
   block that the feature, change request and release views show. Own classes only, all prefixed ap-. Tokens only, so
   the report view (paper tokens) and print turn out right. Controls sit in .no-rep containers, which the shell hides
   in report view and print. Shared classes (.card .pill .tbl .sec .btn .note-box .avatar .qitem ...) belong to the shell. */

.ap-view { min-width: 0; }
:where(.ap-view) > * + * { margin-top: 24px; }
.ap-stack { min-width: 0; }
.ap-stack > * + * { margin-top: 24px; }
:where(.ap-view, .ap-block, .ap-cert) :where(p, dl, dd, ul, ol, h4) { margin: 0; }
:where(.ap-view, .ap-block, .ap-cert) :where(ul, ol) { padding: 0; list-style: none; }

/* text pieces */
.ap-lead { font-size: 14px; line-height: 22px; white-space: pre-line; overflow-wrap: anywhere; }
.ap-none { font-size: 13px; line-height: 18px; color: var(--muted); }
.ap-sub { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.ap-id { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.ap-warn { color: var(--warn); font-weight: 500; }
.ap-crit { color: var(--crit); font-weight: 500; }
.ap-sh { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; }
.ap-sh + * { margin-top: 8px; }
.ap-after { margin-top: 12px; }
.ap-actor { overflow-wrap: anywhere; }
.ap-subj { display: block; }
.ap-subj + .ap-subj { margin-top: 4px; }
.ap-line { display: inline-flex; align-items: center; gap: 6px; }
.ap-sha { font-family: var(--font-mono); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; word-break: break-all; }

/* head: lead text and facts */
.ap-top > * + * { margin-top: 16px; }
.ap-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.ap-facts > div { min-width: 0; break-inside: avoid; }
.ap-facts dt { font-size: 12px; line-height: 16px; color: var(--muted); }
.ap-facts dd { margin-top: 2px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }

/* the status box */
.ap-state, .ap-final { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); break-inside: avoid; }
.ap-state > * + *, .ap-final > * + * { margin-top: 8px; }
.ap-state-h { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 600; }
.ap-state-t { font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.ap-tone-neutral { background: var(--surface-2); }
.ap-tone-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.ap-tone-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.ap-tone-accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ap-tone-crit { background: var(--crit-soft); border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); }
.ap-quote-box { display: grid; gap: 2px; }
.ap-quote-l { font-size: 12px; line-height: 16px; color: var(--muted); }
.ap-quote { padding-left: 12px; border-left: 2px solid var(--line); font-size: 14px; line-height: 22px; white-space: pre-line; overflow-wrap: anywhere; }

/* files */
.ap-files { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.ap-file { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 14px; break-inside: avoid; }
.ap-file + .ap-file { border-top: 1px solid var(--line); }
.ap-file-link { min-width: 0; font-weight: 500; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.ap-file-name { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.ap-file-size { font-size: 12px; line-height: 16px; color: var(--muted); }

/* the approvers row */
.ap-prog { margin-bottom: 8px; font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ap-people { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.ap-person { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 12px 14px; break-inside: avoid; }
.ap-person + .ap-person { border-top: 1px solid var(--line); }
.ap-av-gap { width: 28px; height: 28px; }
.ap-person-main { display: block; min-width: 0; }
.ap-person-name { display: block; font-weight: 500; overflow-wrap: anywhere; }
.ap-note { display: block; margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--line); font-size: 13px; line-height: 20px; white-space: pre-line; overflow-wrap: anywhere; }
.ap-person-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.ap-when { font-size: 12px; line-height: 16px; color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.ap-rule { margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--muted); }
.ap-lock { margin-top: 12px; }

/* earlier revisions */
.ap-rev { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); break-inside: avoid; }
.ap-rev + .ap-rev { margin-top: 8px; }
.ap-rev > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; cursor: pointer; }
.ap-rev > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-rev-t { font-weight: 500; }
.ap-rev-b { padding: 0 14px 12px; }
.ap-rep-only { display: none; }
.rv .ap-rep-only { display: block; }
.rv .ap-hist-scr { display: none; }

/* the response form */
.ap-form { display: grid; gap: 16px; max-width: 100%; }
.ap-field { min-width: 0; }
.ap-label { display: block; margin: 0 0 4px; font-size: 13px; line-height: 18px; font-weight: 500; }
.ap-req { margin-left: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.ap-hint { margin: 0 0 6px; font-size: 12px; line-height: 16px; color: var(--muted); }
.ap-input {
  display: block; width: 100%; max-width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--fg); font: inherit; font-size: 14px; line-height: 20px; transition: border-color .12s;
}
.ap-area { min-height: 84px; resize: vertical; }
.ap-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ap-input[aria-invalid="true"] { border-color: var(--crit); box-shadow: 0 0 0 1px var(--crit); }
.ap-err { margin: 6px 0 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--crit); }
.ap-choices { display: grid; gap: 8px; }
.ap-choice {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; transition: border-color .12s, background-color .12s;
}
.ap-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ap-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-radio { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.ap-choice-t { min-width: 0; overflow-wrap: anywhere; }
.ap-choice-l { display: block; font-weight: 500; }
.ap-choice-s { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--muted); }
.ap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ap-status, .ap-fail { min-width: 0; font-size: 13px; line-height: 18px; font-weight: 500; overflow-wrap: anywhere; }
.ap-status { color: var(--ok); }
.ap-fail { color: var(--crit); }
.ap-status:empty, .ap-fail:empty { display: none; }
.ap-actions .btn:disabled { opacity: .6; cursor: not-allowed; }
.ap-actions .btn:disabled:hover { background: var(--accent); }
.ap-sent { padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line)); border-radius: var(--r-sm); background: var(--ok-soft); color: var(--ok); font-size: 13px; line-height: 18px; font-weight: 500; }

/* the register: filters, and the two tables (live for the screen, full for report view and print) */
.ap-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.ap-filter label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; line-height: 18px; color: var(--muted); }
.ap-filter .ap-sub { margin-top: 0; }
.ap-select { height: 34px; max-width: 100%; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); font: inherit; font-size: 13px; line-height: 18px; cursor: pointer; }
.ap-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ap-all { display: none; }
.ap-view > .ap-filter + .ap-live, .ap-view > .ap-live + .ap-all { margin-top: 0; }
.sheet.rv .ap-filter, .sheet.rv .ap-live { display: none; }
.sheet.rv .ap-all { display: block; }

/* report view: the certificate is the sheet; the screen parts step aside */
.ap-cert { display: none; min-width: 0; }
.rv .ap-cert { display: block; margin-top: 0; }
.rv .ap-scr { display: none; }
.ap-cert .ap-lead { margin-bottom: 12px; }

@media (max-width: 559px) {
  .ap-facts { gap: 12px 24px; }
  .ap-input { font-size: 16px; }
  .ap-person { grid-template-columns: 28px minmax(0, 1fr); }
  .ap-person-end { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .ap-when { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-input, .ap-choice { transition: none; }
}
@media print {
  .ap-filter, .ap-live { display: none; }
  .ap-all { display: block; }
  .ap-select { display: none; }
  .ap-scr { display: none; }
  .ap-cert { display: block; margin-top: 0; }
  .ap-rep-only { display: block; }
  .ap-hist-scr { display: none; }
}