/* Dashboard (Needs you now, fleet status, messages). Structural layout is inline; this holds hover and tones. */
.pui-dashboard-row {
    color: var(--foreground);
    text-decoration: none;
}

a:hover > .pui-dashboard-row,
a:focus-visible > .pui-dashboard-row {
    background: var(--accent);
}

.pui-dashboard-attn-count {
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 600 13px var(--mono, ui-monospace, monospace);
    flex: none;
}

.pui-dashboard-tone-info { background: var(--tone-info-bg); color: var(--tone-info-fg); }
.pui-dashboard-tone-success { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.pui-dashboard-tone-warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.pui-dashboard-tone-danger { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
.pui-dashboard-tone-neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }

/* Link rows fill the card; the anchor must be a block or the row shrinks to its text. */
.sc-vstack > .sc-link:has(> .pui-dashboard-row),
.sc-link:has(> .pui-dashboard-row) { display: block; width: 100%; }
.sc-link:has(> .pui-dashboard-row):hover { text-decoration: none; }
.pui-dashboard-action { color: var(--foreground); }
.pui-dashboard-row .pui-plain { font-family: var(--font-sans); }

/* Cards whose rows run edge to edge. */
.pui-card-flush { overflow: hidden; }
.pui-card-header-flush { padding-bottom: 12px; }

/* Card header link and the header metric links: the primary colour with a chevron. */
.sc-link.pui-header-link,
.sc-link.pui-metric-link { color: var(--primary); }
.sc-link.pui-header-link { font-size: 13px; }
.sc-link.pui-header-link:hover,
.sc-link.pui-metric-link:hover { text-decoration: underline; }
.pui-metric-label { display: inline; }
.pui-metric-label > * { display: inline; }
.pui-refresh-time { font-size: 12px; color: var(--muted-foreground); }

/* Today tiles. */
.pui-kpi { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.pui-kpi-row { align-items: flex-end; justify-content: space-between; }
.pui-kpi-caption { font-size: 12px; color: var(--muted-foreground); }
.pui-kpi-caption.pui-kpi-up { color: var(--tone-success-fg); }
.pui-kpi-caption.pui-kpi-down { color: var(--tone-danger-fg); }
.pui-kpi-solo { line-height: 28px; }

/* Message rows: a round initials chip, like the design's 32px avatar. */
.pui-initials-chip { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--secondary); color: var(--secondary-foreground); font-size: 12px; font-weight: 600; }
.sc-link.pui-mono { font-weight: 600; }
.pui-kpi-tile { justify-content: flex-start; }
.pui-card-footer-center { justify-content: center; border-top: 1px solid var(--border); }

/* Empty-state rows: a muted icon and one quiet line, like the design's .empty-s. */
.pui-empty-row { align-items: center; gap: 12px; padding: 20px; color: var(--muted-foreground); font-size: 13px; }
.pui-empty-row.pui-empty-row-ok > .cn-icon,
.pui-empty-row.pui-empty-row-ok > svg { color: var(--tone-success-fg); }
.sc-link.pui-empty-link { color: var(--primary); font-weight: 500; }

/* A run of text and inline emphasis inside one line. */
.pui-inline-run { display: block; }
.pui-inline-run > * { display: inline; }
.cn-card-description.pui-inline-run, .cn-card-description .pui-inline-run { font-size: 13px; }

/* Onboarding: the welcome card with its step cards in a grid. */
.pui-onboarding .cn-progress { height: 6px; background: var(--muted); }
.pui-onboarding-title { font-size: 17px; }
.pui-onboarding-badge { width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.pui-onboarding-ico { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--tone-info-bg); color: var(--tone-info-fg); }
.pui-onboarding-step { background: var(--card); }
a:hover > .pui-onboarding-step { background: var(--accent); }
.pui-empty-row .sc-hstack { display: block; }
.pui-empty-row .sc-hstack > * { display: inline; }