assets/console.css
/* holger console: the stylesheet of BOTH bundles (A28 M13: index.html, the open page, and
index-metered.html, the metered page, link it). Moved out of index.html so the two pages are
one page; trunk and the Build Thing's web-app step copy it content-hashed. */
/* ── Vetra design system (vetra.se) — dark-first, navy + electric blue ──
Ground/card/elevated surfaces, brand #3b82f6, Inter, white/slate text.
Single-theme by brand decision: the identity is dark. No font CDN —
the console must render identically inside an airgap. */
:root {
--bg: #0a0e1a;
--card: #111827;
--elevated: #1c2536;
--hover: #243044;
--brand: #3b82f6;
--brand-dim: #2563eb;
--brand-light: #60a5fa;
--brand-glow: rgba(59, 130, 246, 0.15);
--ink: #f1f5f9;
--sub: #94a3b8;
/* Dimmest text tone that still clears WCAG AA 4.5:1 on every surface
it lands on: 6.59:1 on --bg, 6.08 on --card, 5.71 on the th blend,
5.26 on --elevated. #64748b (the old value) failed all four. */
--muted: #8b98ad;
--good: #34d399;
--bad: #f87171;
--warn: #fbbf24;
/* One scale for spacing, type and corners (lane HOL-UI-FIX): every page draws with these. */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--text-xs: 0.72rem;
--text-sm: 0.85rem;
--text-md: 0.94rem;
--text-lg: 1.15rem;
--text-xl: 1.45rem;
--radius: 10px;
--radius-sm: 7px;
--page-width: 1240px;
color-scheme: dark;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 15px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
}
/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
position: sticky; top: 0; z-index: 10;
display: flex; align-items: center; gap: 22px;
padding: 12px 24px;
background: rgba(10, 14, 26, 0.85);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--elevated);
}
.brand {
display: flex; align-items: center; gap: 9px;
text-decoration: none; color: var(--ink);
}
.mark { width: auto; height: 42px; flex: none; }
.brand-product { font-weight: 700; letter-spacing: -0.01em; }
.brand-sub { color: var(--sub); font-weight: 400; margin-left: -4px; }
.nav { display: flex; gap: var(--space-1); }
.nav a {
color: var(--sub); text-decoration: none;
font-size: 0.92rem; font-weight: 500;
padding: 5px 12px; border-radius: 7px;
}
.nav a:hover { color: var(--ink); background: var(--elevated); }
.nav a[aria-current="page"] {
color: var(--brand-light);
background: var(--brand-glow);
}
.topsearch { margin-left: auto; }
.topsearch input[type="search"] { width: 220px; padding: 6px 12px; font-size: var(--text-sm); }
.authbox { display: flex; align-items: baseline; gap: 12px; font-size: 0.88rem; }
.authbox a { color: var(--sub); text-decoration: none; }
.authbox a:hover { color: var(--brand-light); }
.authbox, .authbox a, .ident { white-space: nowrap; }
.health { font-size: var(--text-xs); white-space: nowrap; }
.health .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
/* ── Content ────────────────────────────────────────────── */
main {
margin: 0 auto;
max-width: var(--page-width);
padding: var(--space-6) var(--space-5) 80px;
}
section { animation: fade-up 0.45s ease-out both; }
@keyframes fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
section { animation: none; }
}
h2 {
font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em;
margin: 0 0 var(--space-3);
}
h3 {
font-size: 0.78rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.09em;
color: var(--sub);
margin: 30px 0 10px;
}
.crumbs { margin: 0 0 6px; color: var(--muted); font-size: 0.88rem; }
.crumbs a { color: var(--sub); text-decoration: none; }
.crumbs a:hover { color: var(--brand-light); }
.crumbs strong { color: var(--ink); font-weight: 600; }
/* ── Tables as cards ────────────────────────────────────── */
table {
width: 100%;
border-collapse: separate; border-spacing: 0;
background: var(--card);
border: 1px solid var(--elevated);
border-radius: 10px;
overflow: hidden;
font-size: 0.92rem;
}
th {
text-align: left;
font-size: 0.7rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.09em;
color: var(--muted);
padding: 11px 16px;
border-bottom: 1px solid var(--elevated);
background: rgba(28, 37, 54, 0.45);
white-space: nowrap;
}
td { padding: 10px 16px; border-bottom: 1px solid var(--elevated); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--hover); }
td a { color: var(--brand-light); text-decoration: none; }
td a:hover { text-decoration: underline; text-underline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8rem; overflow-wrap: anywhere; }
.count { color: var(--muted); font-size: 0.85rem; }
.measurenote { max-width: 64ch; line-height: 1.6; }
/* ── States ─────────────────────────────────────────────── */
.pending { color: var(--muted); }
.ok { color: var(--good); }
.err { color: var(--bad); }
/* ── Controls ───────────────────────────────────────────── */
button {
padding: 7px 16px;
border: 1px solid var(--elevated);
border-radius: 8px;
background: var(--elevated);
color: var(--ink);
font: inherit; font-size: 0.9rem; font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
button:hover { background: var(--hover); border-color: var(--brand-dim); }
button:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover { background: var(--elevated); border-color: var(--elevated); }
.toolbar button, .attach button {
background: var(--brand-dim);
border-color: var(--brand-dim);
}
.toolbar button:hover, .attach button:hover {
background: var(--brand);
border-color: var(--brand);
}
.toolbar button:disabled, .attach button:disabled {
background: var(--elevated); border-color: var(--elevated);
}
.danger-big {
background: transparent !important;
border-color: var(--bad) !important;
color: var(--bad) !important;
}
.danger-big:hover { background: rgba(248, 113, 113, 0.1) !important; }
.danger-big:disabled {
border-color: var(--elevated) !important;
color: var(--muted) !important;
background: transparent !important;
}
input[type="text"], input[type="search"], input[type="password"], select {
padding: 7px 12px;
border: 1px solid var(--elevated);
border-radius: 8px;
background: var(--card);
color: var(--ink);
font: inherit; font-size: 0.9rem;
}
input::placeholder { color: var(--muted); }
input[type="file"] { font: inherit; font-size: 0.88rem; color: var(--sub); max-width: 320px; }
:is(a, button, input, select, summary):focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--brand-glow), 0 0 0 1.5px var(--brand);
border-radius: 8px;
}
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.toolbar input[type="search"], .toolbar input[type="password"] { flex: 1; max-width: 360px; }
.axes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 12px; margin-bottom: 14px;
}
.axis { display: flex; flex-direction: column; gap: 4px; }
.axis > span {
font-size: 0.7rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted);
}
.pager { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
/* ── Detail view ────────────────────────────────────────── */
.facts {
display: grid; grid-template-columns: max-content minmax(0, 1fr);
gap: 6px 20px;
margin: 0 0 16px;
background: var(--card);
border: 1px solid var(--elevated);
border-radius: 10px;
padding: 16px 20px;
font-size: 0.92rem;
}
.facts dt {
font-size: 0.7rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--muted);
padding-top: 0.25em;
}
.facts dd { margin: 0; overflow-wrap: anywhere; }
.doc {
background: var(--card);
border: 1px solid var(--elevated);
border-radius: 10px;
padding: 14px 16px;
overflow-x: auto; max-height: 320px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.8rem; line-height: 1.6;
color: var(--sub);
}
.attach {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 10px 0 4px;
}
.rowact { text-align: right; }
.rowact .danger {
padding: 3px 12px;
background: transparent;
border-color: var(--elevated);
color: var(--muted);
font-size: 0.8rem;
}
.rowact .danger:hover {
border-color: var(--bad); color: var(--bad);
background: rgba(248, 113, 113, 0.08);
}
/* ── Upload panel ───────────────────────────────────────── */
.upload {
margin-top: 30px;
background: var(--card);
border: 1px solid var(--elevated);
border-radius: 10px;
}
.upload summary {
padding: 12px 18px; cursor: pointer; user-select: none;
font-size: 0.9rem; font-weight: 500; color: var(--sub);
border-radius: 10px;
}
.upload summary:hover { color: var(--ink); }
.upload[open] summary { border-bottom: 1px solid var(--elevated); color: var(--ink); }
.upload-form { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.report { max-width: 440px; }
.report td:first-child { color: var(--sub); }
/* ── Feedback vocabulary ────────────────────────────────── */
.badge {
display: inline-block; padding: 2px 10px; border-radius: 99px;
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
border: 1px solid var(--elevated); margin-right: 6px;
}
.badge-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.badge-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.badge-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.badge-neutral { color: var(--sub); }
.banner {
padding: 10px 16px; border-radius: 8px; margin: 0 0 16px;
font-size: 0.92rem; border: 1px solid;
}
.banner-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent);
background: rgba(248, 113, 113, 0.07); }
.banner-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent);
background: rgba(251, 191, 36, 0.07); }
/* ── Dashboard ──────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px; margin: 0 0 8px; }
.card { background: var(--card); border: 1px solid var(--elevated);
border-radius: 10px; padding: 16px 18px; }
.card h3 { margin-top: 0; }
.minted { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--elevated); border-radius: 8px; }
.minted .mono { word-break: break-all; }
.cardline { margin: 8px 0 4px; font-weight: 600; }
.cardline a { color: var(--brand-light); text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.chip { display: inline-flex; align-items: center; gap: 2px;
padding: 2px 10px; border-radius: 99px; font-size: 0.78rem;
background: var(--elevated); color: var(--sub); }
.chip-x { border: none; background: none; color: var(--sub); cursor: pointer;
font-size: 0.72rem; padding: 0 2px; }
.chip-x:hover { color: var(--bad); }
.shortcuts { display: flex; flex-wrap: wrap; gap: 10px; }
.shortcut { padding: 8px 16px; border: 1px solid var(--elevated); border-radius: 8px;
background: var(--card); color: var(--brand-light);
text-decoration: none; font-size: 0.9rem; }
.shortcut:hover { border-color: var(--brand-dim); background: var(--hover); }
/* ── Security workflow ──────────────────────────────────── */
.tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 18px; }
.tile { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--sub); }
.tile:hover { border-color: var(--brand-dim); background: var(--hover); }
.tile-active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.tile-title { font-size: 0.85rem; }
.tile-count { font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 0 0 18px; }
.pane .facts dd, .pane .mono, td.mono, td.wrap { overflow-wrap: anywhere; word-break: break-word; }
.pane .scanner { border-top: 1px solid var(--elevated); padding-top: 8px; margin-top: 8px; }
.actions input[type="text"] { flex: 1; min-width: 160px; max-width: 360px; }
.board { margin: 0 0 18px; }
/* HOL-FLOW-SMART: holger's links lie over the image where holger says; the frame is the
image's own box, so a share of it is a share of the drawing. */
.board-frame { position: relative; display: inline-block; line-height: 0; }
.board-img { display: block; max-width: none; }
.board-hit { position: absolute; display: block; border-radius: 10px; }
.board-hit:hover, .board-hit:focus-visible { outline: 2px solid var(--brand); background: rgba(111, 211, 245, 0.08); }
/* F14b: the drawing's own frame scrolls; the wheel zooms the drawing in it, a drag pans it. */
.board-view { overflow: auto; max-height: 82vh; user-select: none; -webkit-user-select: none; }
.board-view:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.board-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.board-tools [data-zoom-level] { min-width: 3.5em; text-align: center; }
/* F14: the line under the drawing; a redraw that failed is said in the warning colour, no box. */
.board-fresh[data-fresh="stale"] { color: var(--warn); }
/* ── Confirm dialog ─────────────────────────────────────── */
.dialog-scrim { position: fixed; inset: 0; z-index: 50;
background: rgba(4, 6, 12, 0.7); backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center; padding: 20px; }
.dialog { background: var(--card); border: 1px solid var(--elevated);
border-radius: 12px; padding: 22px 24px; max-width: 480px; width: 100%; }
.dialog-title { margin: 0 0 12px; font-size: 1rem; color: var(--ink);
text-transform: none; letter-spacing: 0; }
.dialog-consequence { color: var(--warn); font-size: 0.9rem; line-height: 1.55;
margin: 14px 0 16px; }
.facts-plain { border: none; background: none; padding: 0; }
/* ── Misc structure ─────────────────────────────────────── */
.tablewrap { overflow-x: auto; }
.pathlist { margin: 8px 0; padding-left: 1.2em; line-height: 1.8; color: var(--sub); }
.metaline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.metaline .count { margin-left: auto; }
.rowactions a { color: var(--brand-light); text-decoration: none; font-size: 0.85rem; }
.quiet { background: transparent; border-color: var(--elevated); color: var(--sub); }
.quiet:hover { color: var(--ink); }
/* ── Failure model ──────────────────────────────────────── */
.failbox {
border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
background: rgba(248, 113, 113, 0.06);
border-radius: 8px; padding: 12px 16px; margin: 0 0 16px;
}
.fail-summary { margin: 0 0 6px; color: var(--bad); }
.fail-summary a { color: var(--brand-light); }
.fail-detail { margin: 0 0 8px; color: var(--sub); font-size: 0.8rem; }
/* ── Shell chips ────────────────────────────────────────── */
.envchip {
max-width: 160px;
font-family: ui-monospace, monospace; font-size: 0.72rem;
color: var(--muted); border: 1px solid var(--elevated);
border-radius: 6px; padding: 3px 8px; white-space: nowrap;
max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.domainchip {
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
color: var(--brand-light); border: 1px solid var(--brand-light);
border-radius: 6px; padding: 3px 8px; white-space: nowrap;
max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.ident { text-decoration: none; }
.copy {
padding: 2px 10px; font-size: 0.75rem;
background: transparent; border-color: var(--elevated); color: var(--sub);
}
.copy:hover { color: var(--brand-light); border-color: var(--brand-dim); }
.th-sort {
all: unset; cursor: pointer; font: inherit; color: inherit;
text-transform: inherit; letter-spacing: inherit;
}
.th-sort:hover { color: var(--ink); }
.th-sort:focus-visible { outline: none;
box-shadow: 0 0 0 3px var(--brand-glow), 0 0 0 1.5px var(--brand); }
/* ── Skeletons ──────────────────────────────────────────── */
/* Shape-of-what-arrives placeholders. The shimmer is decoration:
aria-hidden on the boxes, a live region carries the sentence. */
.skeleton-table td { padding: 10px 14px; }
.skeleton-bar {
display: block; height: 0.72rem; border-radius: 4px;
background: linear-gradient(90deg,
var(--elevated) 0%, color-mix(in srgb, var(--elevated) 55%, var(--sub)) 50%,
var(--elevated) 100%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Refreshing data stays on screen but reads as not-yet-current.
NOT via opacity: a group opacity composites the TEXT too and dropped
table headers to 2.58:1 and links to 2.92:1 — below AA, and below the
3:1 non-text floor, for the whole duration of a refresh. Staleness is
carried by chrome (a ribbon + a muted border) instead, so every glyph
keeps its checked contrast. aria-busy on the same container tells
assistive tech. */
.stale { position: relative; }
.stale > table { border-color: var(--brand-dim); }
.stale::before {
content: "refreshing…";
position: absolute; top: 8px; right: 12px; z-index: 1;
font-size: 0.72rem; color: var(--sub);
background: var(--elevated); border: 1px solid var(--brand-dim);
padding: 2px 9px; border-radius: 999px;
}
/* Motion is a preference, not a given. */
@media (prefers-reduced-motion: reduce) {
.skeleton-bar { animation: none; }
.stale { transition: none; }
* { scroll-behavior: auto !important; }
}
/* ── Type-to-confirm gate ───────────────────────────────── */
.phrase-gate { margin: 4px 0 14px; }
.phrase-gate code {
background: var(--elevated); padding: 1px 6px; border-radius: 4px;
color: var(--brand-light);
}
.phrase-gate input { width: 100%; }
/* ── A11y ───────────────────────────────────────────────── */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--brand-dim); color: #fff; padding: 8px 16px;
border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
/* ── Page layout (lane HOL-UI-FIX) ─────────────────────── */
.muted { color: var(--sub); margin: 0 0 var(--space-4); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin: 0 0 var(--space-5); }
.page-head h2 { margin-bottom: var(--space-1); }
.lede { margin: 0; color: var(--sub); font-size: var(--text-md); max-width: 75ch; }
/* Buttons that are links. */
.btn {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: 7px 16px; border-radius: var(--radius-sm);
border: 1px solid var(--elevated); background: var(--elevated);
color: var(--ink); text-decoration: none;
font-size: 0.9rem; font-weight: 500; white-space: nowrap;
}
.btn:hover { background: var(--hover); border-color: var(--brand-dim); }
.btn.primary { background: var(--brand-dim); border-color: var(--brand-dim); color: #fff; }
.btn.primary:hover { background: var(--brand); border-color: var(--brand); }
/* Tab strips: an entry's pages (.subnav, links) and a page's panes (.tabs, buttons). */
.subnav, .tabs {
display: flex; flex-wrap: wrap; gap: var(--space-1);
margin: 0 0 var(--space-5); padding: 0 0 var(--space-2);
border-bottom: 1px solid var(--elevated);
}
.subnav a, .tabs .tab {
padding: 6px 14px; border-radius: var(--radius-sm);
border: 1px solid transparent; background: transparent;
color: var(--sub); text-decoration: none;
font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
}
.subnav a:hover, .tabs .tab:hover { color: var(--ink); background: var(--elevated); border-color: transparent; }
.subnav a[aria-current="page"], .tabs .tab.active {
color: var(--brand-light); background: var(--brand-glow); border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
/* A folded block: long server lists a person opens when they want them. */
.foldbox { margin: 0 0 var(--space-4); background: var(--card); border: 1px solid var(--elevated); border-radius: var(--radius); }
.foldbox > summary { padding: var(--space-3) var(--space-4); cursor: pointer; color: var(--sub); font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-2); }
.foldbox[open] > summary { border-bottom: 1px solid var(--elevated); }
.foldbox > :not(summary) { margin: var(--space-3) var(--space-4); }
.foldbox table { border: 0; }
/* ── The Overview ───────────────────────────────────────── */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.ov-wide { grid-column: 1 / -1; }
.ov-card { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.card-head h3 { margin: 0; }
.card-more { font-size: var(--text-sm); color: var(--brand-light); text-decoration: none; white-space: nowrap; }
.card-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.ov-card p { margin: 0; }
.ov-card table { font-size: var(--text-sm); }
.all-clear { display: flex; align-items: center; gap: var(--space-2); color: var(--sub); }
.todo, .row-list, .queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.todo li, .row-list li {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2);
padding: var(--space-2) 0; border-top: 1px solid var(--elevated);
}
.todo li:first-child, .row-list li:first-child, .queue-list li:first-child { border-top: 0; }
.todo a, .row-list a, .queue-list a { color: var(--brand-light); text-decoration: none; font-weight: 500; }
.todo a:hover, .row-list a:hover, .queue-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.todo .count, .row-list .count { flex-basis: 100%; }
.queue-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; border-top: 1px solid var(--elevated); }
.queue-count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.estate-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); }
.estate-box { background: var(--elevated); border: 1px solid transparent; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); min-width: 0; }
.estate-box.this-box { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.estate-box-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.estate-box-name { font-size: var(--text-md); }
.estate-box-head .badge { margin: 0 0 0 auto; }
.estate-box-line { margin: var(--space-2) 0; font-weight: 500; }
.estate-box-why { margin: var(--space-2) 0 0; line-height: 1.45; }
.mini-facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px var(--space-3); margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.mini-facts dt { color: var(--muted); }
.mini-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mini-facts a { color: var(--brand-light); text-decoration: none; }
.meter { display: block; height: 6px; border-radius: 99px; background: var(--hover); overflow: hidden; margin: var(--space-1) 0; }
.meter-fill { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.disk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.disk-line { display: flex; justify-content: space-between; gap: var(--space-3); }
.big-number { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.big-number .count { font-size: var(--text-sm); font-weight: 400; margin-left: var(--space-1); }
/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 760px) {
.topbar { flex-wrap: wrap; gap: 10px 14px; padding: 10px 16px; }
.nav { order: 3; width: 100%; margin-right: 0; flex-wrap: wrap; }
.nav a { padding: 5px 10px; }
.topsearch { order: 4; width: 100%; margin-left: 0; }
.topsearch input[type="search"] { width: 100%; }
.envchip { display: none; }
.authbox { margin-left: auto; }
.health { display: none; }
main { padding: 20px 16px 60px; }
.ov-grid { grid-template-columns: minmax(0, 1fr); }
/* A wide table scrolls inside its frame on a phone instead of squeezing every cell to a letter. */
.tablewrap > table { min-width: 680px; }
.page-head .btn { width: 100%; justify-content: center; }
.facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.facts dt { padding-top: 10px; }
.metaline .count { margin-left: 0; width: 100%; }
.panes { grid-template-columns: minmax(0, 1fr); }
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.actions input[type="text"] { max-width: none; width: 100%; }
}
/* A name in a section title keeps its case (repository names are case-sensitive). */
h3 a { text-transform: none; letter-spacing: 0; font-size: var(--text-md); }
/* Long server words (hashes, evidence, paths) wrap instead of widening the page (HOL-UI-FIX). */
.pane, .pathlist li, .row-list li, .todo li, .facts dd, .count { overflow-wrap: anywhere; min-width: 0; }
.card h3 { overflow-wrap: anywhere; }
.badge { white-space: nowrap; }
.panes > * { min-width: 0; }