/* Callouts: a note set off from the page. */

/* A procedure's steps, with the pink rule. */
.proc { border-left: 3px solid var(--flag); padding: 2px 0 2px 11px; font-size: 13.5px; }
.proc p { margin: 4px 0; }

/* Amber: something to know or check. */
.staff .hb-note { background: var(--hold-wash); border-left: 3px solid var(--hold); border-radius: var(--r); padding: 10px 14px; font-size: 13.5px; }
.staff .hb-note p { margin: 6px 0 0; }
.staff .hb-note .eyebrow { color: var(--hold); }
.staff .bld-w { background: var(--hold-wash); color: var(--hold); border-radius: var(--r); padding: 8px 10px; }
.staff .banner-unsettled { background: var(--hold-wash); color: var(--hold); border-radius: var(--r); padding: 10px 14px; margin-bottom: var(--space-xl); font-size: var(--text-m); }
.staff .banner-unsettled b { display: block; }

/* Pink: questions the estimate can't answer yet. */
.staff .bld-q { background: var(--flag-wash); color: var(--flag-ink); border-radius: var(--r); padding: 8px 10px; }
.staff .bld-q ol, .staff .bld-w ul { margin: 4px 0 0; padding-left: 18px; font-size: var(--text-s); }

/* Grey: how a page works. */
.rp-note { background: var(--panel); border-radius: var(--r); padding: 8px 12px; margin: 0 0 14px; max-width: 90ch; }