/* "Approve the list with the client" (web/approval.js) and the documents of the wizard (web/onboarding.js). Uses the tokens of app.css. */
.ap .ap-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .ap .ap-grid { grid-template-columns: repeat(3, 1fr); } }
.ap .ap-grid > div { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: var(--r-group); background: var(--surface-2, var(--sunk)); }
.ap .ap-grid span { color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.ap .ap-row { align-items: center; }
.ap .ap-row .btn { flex: none; }
.ap .big { font-size: 34px; font-weight: 700; }
.ap .big small { font-size: 16px; font-weight: 500; color: var(--ink-3); margin-left: 8px; }
.ob-docs { list-style: none; margin: 6px 0; padding: 0; font-size: 13.5px; color: var(--ink-2); }
.ob-docs li.bad { color: var(--brick); }
.ob-docbox { margin-bottom: 8px; }

/* Approval: the four numbers and one bar (approved, waiting for the client, not suitable) instead of "51 of 30" */
.ap-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 12px; }
.ap-tile { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.ap-tile b { display: block; font: 700 28px/1.1 var(--display); letter-spacing: -.02em; }
.ap-tile span { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.ap-tile.t-go b { color: var(--moss); } .ap-tile.t-wait b { color: var(--amber-ink); } .ap-tile.t-no b { color: var(--brick); } .ap-tile.t-tg b { color: var(--cobalt-ink); }
.ap-seg { display: flex; gap: 3px; height: 8px; margin: 0 0 12px; }
.ap-seg i { display: block; min-width: 0; border-radius: 4px; }
.ap-seg .s-go { background: var(--moss); } .ap-seg .s-wait { background: var(--gold); } .ap-seg .s-no { background: var(--brick); }
.ap-grid > div { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }