/* The admin console's few additions to the mockups' components (docs/mockups/components.css), for what the
   mockups did with inline styles: the page CSP allows no inline style. */
.brand-title { font-weight: var(--weight-semibold); font-size: 14px; line-height: 1.2; }
.page.narrow { max-width: 480px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.gap-below { margin-bottom: 16px; }
.gap-above { margin-top: 16px; }
.ok-text { color: var(--color-ok); }
.danger-text { color: var(--color-danger); }
.row-link { color: inherit; text-decoration: none; display: block; }
.row-link:hover .medium { text-decoration: underline; }
.scrim[hidden], [data-error][hidden] { display: none; }
.progress > span.w-0 { width: 0; }
.progress > span.w-20 { width: 20%; }
.progress > span.w-40 { width: 40%; }
.progress > span.w-60 { width: 60%; }
.progress > span.w-80 { width: 80%; }
.progress > span.w-100 { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
/* The dashboard (approved canvas, 2026-11-02). */
.warn-text { color: var(--color-warn, #b45309); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.toolbar .find { max-width: 220px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 700px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.bars { display: block; width: 100%; height: 96px; fill: var(--color-accent); }
tr[hidden] { display: none; }
.page-head > .btn { flex-shrink: 0; white-space: nowrap; }