/* What the console draws that the kit does not: lists, key/value rows, status dots, the health wall.
   Tokens only (castomo-dashkit rule 4: no colour literal outside 00-tokens.css), logical properties
   only, so dir="rtl" mirrors by itself. A screen is a run of blocks appended straight into #view. */

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }
.num { text-align: end; font-variant-numeric: tabular-nums; }

/* The kit leaves #view as plain block flow, so the blocks of a screen touched. One rule gives every
   screen the kit's own gap; the page head keeps its larger bottom margin (margins collapse to the bigger). */
#view > * + * { margin-block-start: var(--gap); }

.table-wrap { overflow-x: auto; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block-end: .75rem; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.list > li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.list-main { display: grid; gap: .1rem; min-inline-size: 0; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }

/* Two or three tiles side by side, collapsing to one: the kit's stat cards in a grid that never leaves a hole. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--gap); }

/* The health wall: one band per project, a tile per service. */
.wall { display: grid; gap: var(--gap); }
.wall-band { display: grid; gap: var(--s2, .5rem); }
.wall-band > h2 { margin: 0; }
.wall-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s2, .5rem); }
.svc-tile { display: grid; gap: .15rem; align-content: start; padding: var(--s2, .5rem) var(--s3, .75rem); border: 1px solid var(--line, currentColor); border-radius: var(--radius, .5rem); text-decoration: none; color: inherit; }
.svc-tile[data-state="down"] { border-color: var(--bad, currentColor); }
.svc-tile[data-state="slow"] { border-color: var(--warn, currentColor); }
.svc-tile b { display: flex; align-items: center; gap: .4rem; overflow-wrap: anywhere; }
.dot { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: var(--muted, currentColor); flex: none; }
.dot[data-state="up"] { background: var(--ok, currentColor); }
.dot[data-state="slow"] { background: var(--warn, currentColor); }
.dot[data-state="down"] { background: var(--bad, currentColor); }

/* A key/value block inside a card (a service's facts, a user's profile). */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.kv dt { color: var(--muted, inherit); }
.kv dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }

/* Raw JSON or a long text a service sent: wraps, scrolls, never stretches the page. */
.pre { margin: 0; padding: var(--s3, .75rem); max-block-size: 24rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--radius, .5rem); background: var(--surface-2, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }