/* config checks: health dots on the app strip and env buttons, the list on top of a config,
 * the tick-to-go-on callouts of the review modal */
.apps button .health-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.apps button .health-dot.err { background: var(--red); box-shadow: 0 0 0 2px var(--red-soft); }
.apps button .health-dot.warn { background: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.seg .cnt.health.err { background: var(--red-soft); color: var(--red); }
.seg .cnt.health.warn { background: var(--amber-soft); color: var(--amber); }

details.health-list { border: 1px solid; border-radius: 6px; padding: 7px 12px; font-size: 12.5px; }
details.health-list.err { background: var(--red-soft); border-color: #f3b4b4; color: #8f2626; }
details.health-list.warn { background: var(--amber-soft); border-color: #f1d9a6; color: #7a4d06; }
details.health-list > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-weight: 700; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
details.health-list > summary::-webkit-details-marker { display: none; }
details.health-list > summary svg { width: 12px; height: 12px; flex: none; transition: transform .15s; }
details.health-list[open] > summary svg { transform: rotate(90deg); }
details.health-list ul { margin: 6px 0 2px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
details.health-list li { display: flex; gap: 7px; overflow-wrap: anywhere; }
details.health-list li::before { content: ""; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; flex: none; }
details.health-list li.err::before { background: var(--red); }
details.health-list li.warn::before { background: var(--amber); }

.callout.confirm { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.callout.confirm input { margin-top: 3px; flex: none; accent-color: var(--red); }
.callout.confirm.ok { background: #fff; border-style: dashed; }

.v-bad { color: var(--red); font-weight: 700; }
.savebar .warn.full { color: #ff9a9a; font-weight: 700; }

/* where a check fires: next to a card title, a table row, a banner / plan / cohort, a list item */
.issue-dot { display: inline-block; width: 8px; height: 8px; margin: 0 6px; border-radius: 50%; vertical-align: middle; flex: none; cursor: help; font-style: normal; }
.issue-dot.err { background: var(--red); box-shadow: 0 0 0 2px var(--red-soft); }
.issue-dot.warn { background: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
.issue-note { display: flex; gap: 7px; margin-bottom: 6px; font-size: 12px; overflow-wrap: anywhere; }
.issue-note::before { content: ""; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; flex: none; }
.issue-note.err { color: #8f2626; }
.issue-note.err::before { background: var(--red); }
.issue-note.warn { color: #7a4d06; }
.issue-note.warn::before { background: var(--amber); }