/* ============================================================
   Fabric editorial layer — OPT-IN.

   Generic editorial parts on top of design-system.css: page hero, stat strip,
   health dot, section heads, hairline lists, plain tables, the larger
   sentence-case sidebar/table labels, and Lucide-glyph alignment in the
   sidebar icon slot. A host links this file AFTER design-system.css to adopt
   them. The Console does not link it, so none of these rules reach Console
   rendering. Colour flows through tokens.css semantic aliases only.
   ============================================================ */

/* larger sentence-case labels */
.nav-label { font-size: 12.5px; letter-spacing: 0; color: var(--text-secondary); font-weight: 500; }
table.list th { font-size: 12.5px; letter-spacing: 0; color: var(--text-secondary); font-weight: 500; }
table.list th.r, table.list td.r { text-align: right; }
table.list td.num { font-variant-numeric: tabular-nums; }

/* a Lucide <Icon> in the sidebar icon slot (FabricNavItem.IconName) */
.nav-item .n-icon.n-icon-svg { display: inline-flex; justify-content: center; }

/* ============ PAGE HERO ============
   The editorial page headline: a large thin-tracked title and one sentence-case
   summary line carrying the key facts inline. */
.page-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-hero-titles { min-width: 0; }
.page-hero h1 { margin: 0; font-size: 42px; font-weight: 560; letter-spacing: -.03em; line-height: 1.08; color: var(--text-primary); }
.page-hero-sub { margin: 9px 0 0; font-size: 15px; color: var(--text-secondary); }
.page-hero-sub b { color: var(--text-body); font-weight: 520; }
.page-hero-sub .sep { color: var(--text-faint); margin: 0 6px; }
.page-hero-aside { display: flex; align-items: center; gap: 10px; flex: none; }

/* ============ STAT STRIP ============
   Hairline-ruled figures, never floating cards. Max four cells. */
.stat-strip {
    display: grid; grid-template-columns: repeat(var(--strip-cols, 4), 1fr);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    margin: 30px 0 46px;
}
.strip-cell { padding: 24px 26px 22px; border-right: 1px solid var(--border); min-width: 0; }
.strip-cell:first-child { padding-left: 0; }
.strip-cell:last-child { border-right: none; }
.strip-cell .k { font-size: 13px; color: var(--text-secondary); }
.strip-cell .v {
    margin-top: 9px; font-size: 31px; font-weight: 530; letter-spacing: -.025em; line-height: 1.1;
    color: var(--text-primary); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 10px;
}
.strip-cell .v small { font-size: 17px; font-weight: 450; color: var(--text-secondary); letter-spacing: 0; }
.strip-cell .d { margin-top: 5px; font-size: 13px; color: var(--text-secondary); }
.strip-cell .d.warn { color: var(--status-warn-ink); }
.strip-cell .d.bad { color: var(--status-error-ink); }

/* one status dot doing the "healthy" work */
.health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--status-ok); flex: none; }
.health-dot.warn { background: var(--status-warn); }
.health-dot.bad { background: var(--status-error); }
.health-dot.off { background: var(--text-faint); }

/* ============ SECTIONS + HAIRLINE LISTS ============ */
.section-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; }
.section-head h2 { margin: 0; font-size: 17px; font-weight: 590; letter-spacing: -.012em; color: var(--text-primary); }
.section-head .note { font-size: 13px; color: var(--text-secondary); }
.section-head .more { margin-left: auto; font-size: 13px; }

.section-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; margin-bottom: 46px; }

.line-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.line-list li {
    display: flex; align-items: flex-start; gap: 12px; padding: 13px 0;
    border-bottom: 1px solid var(--border-soft); font-size: 13.5px; color: var(--text-body);
}
.line-list .li-icon { display: inline-flex; flex: none; margin-top: 2px; color: var(--text-secondary); }
.line-list .li-icon.warn { color: var(--status-warn-ink); }
.line-list .li-icon.bad { color: var(--status-error-ink); }
.line-list .li-icon.ok { color: var(--status-ok-ink); }
.line-list .li-text { min-width: 0; flex: 1; }
.line-list .li-when { margin-left: auto; flex: none; font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.line-list .li-empty { color: var(--text-secondary); }

/* a list table set on the page, not in a box */
.table-plain { border-top: 1px solid var(--border); }
.table-plain table.list td:first-child, .table-plain table.list th:first-child { padding-left: 0; }
.table-plain table.list tbody tr.row-link:hover { background: var(--surface-hover); }

@media (max-width: 940px) {
    .stat-strip { --strip-cols: 2; }
    .strip-cell:nth-child(2) { border-right: none; }
    .section-cols { grid-template-columns: 1fr; }
    .page-hero h1 { font-size: 34px; }
}