/* ============================================================
ZeroRoute — Design System
Hand-rolled CSS, no external dependencies.
============================================================ */
/* ── Custom properties (light theme) ── */
:root {
/* Tells the engine which palette native widgets (select popups, scrollbars,
autofill, date pickers) should use. Without it they render light-on-light
inside the dark theme. */
color-scheme: light;
/* Accent.
--accent is text/link/icon blue: it must clear 4.5:1 against the page.
--accent-solid is the fill behind white button text, and must clear 4.5:1
the other way round. In light they can be the same colour; in dark they
cannot, which is why they are two tokens. */
--accent: #3563f0;
--accent-hover: #2f5ae0;
--accent-subtle: #eef1ff;
/* Text drawn on --accent-subtle (avatars, role badges, KPI icons) needs its
own step: the link blue is too light against a tinted chip. */
--accent-on-subtle: #2b55d6;
--accent-solid: var(--accent);
--accent-solid-hover: var(--accent-hover);
--on-accent: #ffffff;
--focus-ring: rgba(53, 99, 240, .18);
--scrim: rgba(0, 0, 0, .45);
/* Traffic direction — one pair for every chart, cell and legend */
--traffic-down: #1a66c2;
--traffic-up: #0f7a3d;
/* Destructive */
--danger-fg: #b91c1c;
--danger-border: #fca5a5;
--danger-bg: #fef2f2;
/* Feedback banners (flash, alert, verification nudge) */
--success-fg: #166534;
--success-border: #86efac;
--success-bg: #f0fdf4;
--warning-fg: #92400e;
--warning-border: #fcd34d;
--warning-bg: #fffbeb;
/* Admin role badge — the one purple in the system */
--role-admin-fg: #6d28d9;
--role-admin-bg: #ede9fe;
/* Status */
--status-alive-bg: #d1fae5;
--status-alive-fg: #065f46;
--status-pending-bg: #fef3c7;
--status-pending-fg: #92400e;
--status-dead-bg: #fee2e2;
--status-dead-fg: #991b1b;
--status-disabled-bg:#f3f4f6;
--status-disabled-fg:#565e6b;
/* Grays */
--bg: #f8f9fb;
--surface: #ffffff;
--surface-2: #f3f4f6;
--input-bg: #ffffff;
--border: #e5e7eb;
--border-focus: var(--accent);
/* Three text weights, all of them readable: --text-3 is the quietest tone we
ship, not an invisible one, so it still clears 4.5:1 on --surface and --bg. */
--text: #111827;
--text-2: #4b5563;
--text-3: #6b7280;
/* Sidebar (light) */
--sidebar-bg: #f5f7fa;
--sidebar-fg: #525b68;
--sidebar-fg-active: #111827;
--sidebar-active-bg: rgba(61,107,255,0.10);
--sidebar-border: #e5e7eb;
--sidebar-hover-bg: rgba(17,24,39,0.04);
--sidebar-w: 220px;
/* Typography */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", "Fira Code", Consolas, monospace;
/* Radii */
--r-sm: 6px;
--r: 10px;
--r-lg: 14px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
--shadow: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
--shadow-lg: 0 8px 24px rgba(0,0,0,.10);
/* Semantic accent colors (status, callouts) */
--ok: #10B981;
--warn: #F59E0B;
--danger: #EF4444;
/* Font size scale */
--fs-xs: 12px;
--fs-sm: 13px;
--fw-medium: 500;
}
/* ── Dark theme (system preference) ──
PAIRED BLOCK: every token here must also exist in the [data-theme="dark"]
block near the bottom of this file, which serves the same palette when the
user picks dark explicitly on a light OS. Edit them together. */
@media (prefers-color-scheme: dark) {
[data-theme="system"] {
color-scheme: dark;
--accent: #5b87ff;
--accent-hover: #7099ff;
--accent-subtle: #1e2d5a;
--accent-on-subtle: #8db0ff;
--accent-solid: #3563f0;
--accent-solid-hover: #4571f5;
--on-accent: #ffffff;
--focus-ring: rgba(91, 135, 255, .28);
--scrim: rgba(0, 0, 0, .6);
--traffic-down: #6aa6f5;
--traffic-up: #3fb950;
--danger-fg: #f87171;
--danger-border: #7f1d1d;
--danger-bg: #450a0a;
--success-fg: #86efac;
--success-border: #166534;
--success-bg: #052e16;
--warning-fg: #fde68a;
--warning-border: #a16207;
--warning-bg: #3a2e08;
--role-admin-fg: #c4b5fd;
--role-admin-bg: #2e1065;
--status-alive-bg: #064e3b;
--status-alive-fg: #6ee7b7;
--status-pending-bg: #451a03;
--status-pending-fg: #fbbf24;
--status-dead-bg: #450a0a;
--status-dead-fg: #fca5a5;
--status-disabled-bg:#1f2937;
--status-disabled-fg:#9ca3af;
--bg: #0d1117;
--surface: #161b22;
--surface-2: #21262d;
--input-bg: #0d1117;
--border: #30363d;
--text: #e6edf3;
--text-2: #8b949e;
--text-3: #7d8590;
--ok: #34D399;
--warn: #FBBF24;
--danger: #F87171;
--sidebar-bg: #090d13;
--sidebar-fg: #7d8590;
--sidebar-fg-active: #e6edf3;
--sidebar-active-bg: rgba(255,255,255,0.06);
--sidebar-border: #21262d;
--sidebar-hover-bg: rgba(255,255,255,0.04);
--shadow-sm: 0 1px 3px rgba(0,0,0,.3);
--shadow: 0 4px 12px rgba(0,0,0,.35);
--shadow-lg: 0 8px 24px rgba(0,0,0,.45);
}
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
/* 93.75% of the reader's own base size — 15px on a default browser, but it
still grows when someone has set a larger default. */
html { font-size: 93.75%; }
body {
margin: 0;
font-family: var(--font-sans);
background: var(--bg);
color: var(--text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 600; line-height: 1.25; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 1rem; }
p { margin: 0 0 .75em; }
code, pre { font-family: var(--font-mono); font-size: .875rem; }
pre {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: .75rem 1rem;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-all;
line-height: 1.6;
}
small { font-size: .8125rem; color: var(--text-2); }
dl { margin: 0 0 1.5rem; }
dt { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin-top: .75rem; }
dd { margin: .2rem 0 0; }
/* ── Layout shell ── */
.app-shell {
display: flex;
min-height: 100vh;
}
/* ── Sidebar ── */
.sidebar {
width: var(--sidebar-w);
background: var(--sidebar-bg);
display: flex;
flex-direction: column;
flex-shrink: 0;
position: fixed;
top: 0; left: 0; bottom: 0;
z-index: 100;
overflow-y: auto;
border-right: 1px solid var(--sidebar-border);
}
.sidebar-brand {
display: flex;
align-items: center;
gap: .6rem;
padding: 1.25rem 1.25rem 1rem;
color: var(--sidebar-fg-active);
font-weight: 700;
/* Deliberately off the --fs-* ramp: the nav sits at 13px, and a 16px brand
read as just another row. The logo is the one place that outranks it. */
font-size: 22px;
letter-spacing: -.02em;
text-decoration: none;
border-bottom: 1px solid var(--sidebar-border);
margin-bottom: .5rem;
}
.sidebar-brand:hover { text-decoration: none; color: var(--sidebar-fg-active); }
.sidebar-brand-icon {
width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.sidebar-brand-icon svg { display: block; width: 34px; height: 34px; }
/* Brand lockup: "zero" carries the weight, "route" recedes. Used anywhere the
name appears as a logo — never inside running prose. */
.wordmark { font-weight: 650; letter-spacing: -.02em; }
.wordmark > span { font-weight: 350; color: var(--text-2); }
.sidebar-nav { flex: 1; padding: 0 .25rem; }
.sidebar-section { margin: 16px 0; }
.sidebar-section__label {
padding: 0 16px 8px;
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-3);
}
.sidebar-link {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
color: var(--sidebar-fg);
text-decoration: none;
font-size: var(--fs-sm);
border-radius: var(--r-sm);
margin: 0 8px;
transition: background .12s, color .12s;
}
.sidebar-link:hover {
color: var(--sidebar-fg-active);
background: var(--sidebar-hover-bg);
text-decoration: none;
}
.sidebar-link.is-active {
color: var(--sidebar-fg-active);
background: var(--sidebar-active-bg);
font-weight: var(--fw-medium);
}
.sidebar-link svg { flex-shrink: 0; }
/* The unread count on the Messages link: pushed to the far edge of the row,
past the label, rather than sitting beside it like every other chip. */
.chip--count { margin-left: auto; }
.sidebar-footer {
padding: .875rem 1.25rem;
border-top: 1px solid var(--sidebar-border);
font-size: .8125rem;
}
.sidebar-email {
color: var(--sidebar-fg);
margin-bottom: .5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Account switcher (sidebar footer) ── */
.account-list { margin-bottom: .5rem; }
.account-row-form { margin: 0; }
.account-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
width: 100%;
padding: .3rem .4rem;
margin: 0 -.4rem .125rem;
border: 0;
border-radius: 6px;
background: none;
color: var(--sidebar-fg);
font: inherit;
text-align: left;
}
.account-row.is-active { color: var(--sidebar-fg-active); }
button.account-row { cursor: pointer; }
button.account-row:hover { background: var(--sidebar-active-bg); color: var(--sidebar-fg-active); }
.account-email {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.account-role {
flex: none;
font-size: .6875rem;
padding: .1rem .45rem;
border-radius: 999px;
border: 1px solid var(--sidebar-border);
color: var(--sidebar-fg);
text-transform: lowercase;
}
.account-role--owner { border-color: var(--accent-solid); color: var(--accent-solid); }
.account-role--superuser { border-color: color-mix(in srgb, var(--accent-solid) 60%, var(--sidebar-border)); }
.account-add {
display: inline-block;
margin-top: .25rem;
color: var(--sidebar-fg);
text-decoration: none;
font-size: .75rem;
opacity: .8;
}
.account-add:hover { color: var(--sidebar-fg-active); opacity: 1; }
/* ── Main content area ── */
.main-area {
flex: 1;
margin-left: var(--sidebar-w);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-area.no-sidebar { margin-left: 0; }
.page-content {
flex: 1;
width: 100%;
padding: 2rem 2.5rem;
max-width: 1160px;
/* Centred, so a wide monitor doesn't leave the panel hugging the left edge */
margin-inline: auto;
}
/* ── Flash / Alert ── */
.flash, .alert-success {
display: flex;
align-items: flex-start;
gap: .75rem;
background: var(--success-bg);
border: 1px solid var(--success-border);
border-radius: var(--r);
padding: .875rem 1rem;
margin-bottom: 1.5rem;
color: var(--success-fg);
font-size: .875rem;
}
.alert-error {
display: flex;
align-items: flex-start;
gap: .75rem;
background: var(--danger-bg);
border: 1px solid var(--danger-border);
border-radius: var(--r);
padding: .875rem 1rem;
margin-bottom: 1.5rem;
color: var(--danger-fg);
font-size: .875rem;
}
/* An unenrolled node's install command. Not an error and not a success —
something is waiting on the person, which is what the warning palette says. */
.alert-warn {
background: var(--warning-bg);
border: 1px solid var(--warning-border);
color: var(--warning-fg);
border-radius: var(--r);
padding: .875rem 1rem;
margin-top: 1rem;
font-size: .875rem;
}
.alert-warn .callout-code { margin: .625rem 0; }
/* ── Email-verification banner ── */
.email-verify-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
flex-wrap: wrap;
background: var(--warning-bg);
border: 1px solid var(--warning-border);
border-radius: var(--r);
padding: .75rem 1rem;
margin-bottom: 1.5rem;
color: var(--warning-fg);
font-size: .875rem;
}
.email-verify-banner__form { margin: 0; }
/* ── Card ── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.card:hover { box-shadow: var(--shadow); }
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
/* A long heading and an action cluster share this row. Without wrap the
cluster is pushed past the card's edge — where .main-area's clip eats it
silently, so the only button on the card simply is not there. */
flex-wrap: wrap;
gap: .75rem;
margin-bottom: 1rem;
}
/* ── Page header ── */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.75rem;
flex-wrap: wrap;
gap: .75rem;
}
.page-subtitle {
color: var(--text-2);
font-size: .875rem;
margin: .25rem 0 0;
}
/* ── Detail-page primitives ──
The small building blocks the detail pages need; figures use the KPI strip. */
/* Small uppercase caption above a value (provider, region, CPU, …) */
.eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-2);
}
/* Label / value / footnote stack, laid out in an auto-fitting grid */
.meta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: .75rem;
}
.meta-value { font-weight: 500; margin-top: 2px; }
.meta-note { font-size: 12px; color: var(--text-2); margin-top: 2px; }
/* ── Tables ── */
.table-wrap {
overflow-x: auto;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table thead th {
text-align: left;
font-size: .6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
/* --text-2, not --text-3. The quietest tone clears 4.5:1 on --surface and on
--bg, which is what its own comment in 00-tokens.css claims — but a header
sits on --surface-2, and there it lands at 4.4:1 light and 4.1:1 dark. At
11px uppercase there is no large-text exemption to fall back on. One step
up passes both (6.9:1 and 5.0:1) and is still two steps quieter than the
rows it labels. */
color: var(--text-2);
background: var(--surface-2);
padding: .7rem 1rem;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.data-table tbody tr {
border-bottom: 1px solid var(--border);
transition: background .1s;
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table td {
padding: .75rem 1rem;
font-size: .875rem;
vertical-align: middle;
}
.data-table td.mono {
font-family: var(--font-mono);
font-size: .8125rem;
font-variant-numeric: tabular-nums;
}
.data-table .empty-row td {
text-align: center;
color: var(--text-2);
padding: 2rem;
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
gap: .375rem;
padding: .5rem 1rem;
border-radius: var(--r-sm);
font-size: .875rem;
font-weight: 500;
font-family: inherit;
cursor: pointer;
border: 1.5px solid transparent;
line-height: 1.4;
transition: background .12s, box-shadow .12s, border-color .12s, color .12s;
text-decoration: none;
white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Primary */
.btn-primary, button.btn-primary, input[type=submit].btn-primary {
background: var(--accent-solid);
color: var(--on-accent);
border-color: var(--accent-solid);
}
.btn-primary:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); color: var(--on-accent); }
/* Secondary / outline */
.btn-secondary {
background: transparent;
color: var(--text);
border-color: var(--border);
}
.btn-secondary:hover { background: var(--surface-2); color: var(--text); }
/* Destructive — one token trio, so the theme blocks need not restate it */
.btn-danger {
background: transparent;
color: var(--danger-fg);
border-color: var(--danger-border);
}
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger-fg); color: var(--danger-fg); }
/* Small */
.btn-sm { padding: .3125rem .75rem; font-size: .8125rem; }
/* Logout button in sidebar footer */
.btn-logout {
display: inline-flex;
align-items: center;
gap: .375rem;
padding: .375rem .75rem;
border-radius: var(--r-sm);
font-size: .8125rem;
font-weight: 500;
font-family: inherit;
cursor: pointer;
background: var(--sidebar-hover-bg);
color: var(--sidebar-fg);
border: 1px solid var(--sidebar-border);
transition: background .12s, color .12s;
width: 100%;
justify-content: center;
}
.btn-logout:hover { background: var(--sidebar-active-bg); color: var(--sidebar-fg-active); }
/* ── Forms ── */
/* Every control in the panel gets the panel's look, whether or not the markup
remembered a class. Element selectors keep this at specificity (0,0,1), so any
class rule below still wins; the widget types opt out on the next rule. */
input, select, textarea {
padding: 8px 12px;
font-size: 14px;
font-family: inherit;
color: var(--text);
background: var(--input-bg);
border: 1px solid var(--border);
border-radius: var(--r-sm);
transition: border-color .12s, box-shadow .12s;
outline: none;
line-height: 1.5;
max-width: 100%;
}
input[type=checkbox], input[type=radio], input[type=range],
input[type=color], input[type=file] { all: revert; accent-color: var(--accent); }
input:focus, select:focus, textarea:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 3px var(--focus-ring);
}
::placeholder { color: var(--text-3); opacity: 1; }
select { cursor: pointer; }
/* Label above a control; the pairing every form in the panel uses */
.field-label {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-2);
margin-bottom: .375rem;
}
/* A row of controls that sit side by side and wrap on narrow screens */
.form-inline {
display: flex;
gap: .75rem;
flex-wrap: wrap;
align-items: flex-end;
margin: 0;
}
.form-inline__note {
flex-basis: 100%;
font-size: 12px;
color: var(--text-2);
margin: 0;
}
.input-w-sm { width: 6rem; }
.input-w-md { width: 9rem; }
.input-w-lg { width: 18rem; }
.form-actions {
display: flex;
align-items: center;
gap: .75rem;
margin-top: 1.5rem;
}
/* ── Monospace cells ── */
.mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* ── Profile info block ── */
/* ── Device / traffic chart ── */
.traffic-chart-wrap {
margin: 1rem 0 1.5rem;
}
.traffic-legend {
font-size: .75rem;
color: var(--text-2);
margin-top: .375rem;
}
.traffic-summary { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Base chart box, shared with the SVGs the traffic popup builds in JS */
.traffic-chart { width: 100%; height: auto; display: block; }
/* Server-rendered day-bar charts: the SVG box and its two directions.
Kept as classes rather than fill="…" attributes so the bars follow the theme
and there is exactly one place where download-blue and upload-green live. */
.daybar-chart {
width: 100%;
max-width: 560px;
height: 80px;
display: block;
overflow: visible;
}
.daybar--down { fill: var(--traffic-down); }
.daybar--up { fill: var(--traffic-up); }
.daybar-axis { fill: currentColor; opacity: .55; }
.text-down { color: var(--traffic-down); }
.text-up { color: var(--traffic-up); }
.muted { color: var(--text-3); }
/* ── Login page ── */
/* ── Forbidden page ── */
.forbidden-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
padding: 3rem 2.5rem;
max-width: 460px;
text-align: center;
}
/* ── Section divider ── */
.section-title {
font-size: .8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-2);
margin: 1.75rem 0 .875rem;
padding-bottom: .5rem;
border-bottom: 1px solid var(--border);
}
/* ── Utilities ── */
.text-muted { color: var(--text-2); }
.text-sm { font-size: .8125rem; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
/* ── Inline rename form on /me ── */
/* ── Page layout (v3 — Phase B) ── */
/* .page is a transparent wrapper: the content column (width + padding) is owned
by .page-content in the shell, so every page — with or without this wrapper —
lines up with the ones that don't have it (admin overview, detail pages). */
.page { max-width: none; padding: 0; }
.page-header { margin-bottom: 28px; }
.page-header h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--text); }
.page-subtitle { font-size: 15px; color: var(--text-2); margin: 0; }
/* ── Card v3 overrides (no-padding variant + proper card-header) ── */
/* .card--flush: card with no outer padding; children own their spacing.
Use for cards containing device lists, tables, etc. */
.card--flush { padding: 0; overflow: hidden; }
/* Upgrade card-header for v3: adds internal padding + bottom border separator */
.card--flush .card-header,
.card-header--v3 {
padding: 14px 20px;
border-bottom: 1px solid var(--border);
margin-bottom: 0;
}
/* Every card header, not just the flush ones. DESIGN.md's One Title Rule gives
a card the 16px Headline; keyed to .card--flush alone, a padded card's
would fall through to the global 22px — near-Display headings under one
Display heading. */
.card-header h2 { font-size: 16px; font-weight: 600; margin: 0; color: var(--text); }
/* ── KPI strip (v4 — airy individual cards, no enclosing box) ── */
.kpi-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
margin-bottom: 32px;
}
.kpi-card {
padding: 20px 24px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
/* Values sit on one line across the strip even when a label wraps to two */
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
}
.kpi-card:hover { box-shadow: var(--shadow); }
.kpi-label { font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 10px; }
.kpi-value { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kpi-card__top .kpi-label { margin-bottom: 0; }
.kpi-icon {
width: 30px; height: 30px;
border-radius: 10px;
background: var(--accent-subtle);
color: var(--accent-on-subtle);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.kpi-icon svg { width: 16px; height: 16px; display: block; }
.kpi-icon--ok { background: var(--status-alive-bg); color: var(--status-alive-fg); }
.kpi-icon--warn { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.kpi-icon--danger { background: var(--status-dead-bg); color: var(--status-dead-fg); }
.kpi-icon--muted { background: var(--surface-2); color: var(--text-3); }
.kpi-icon--down { background: var(--accent-subtle); color: var(--traffic-down); }
/* The upload glyph takes the status-green foreground rather than the chart
green: on the tinted chip the chart tone drops under 4.5:1. */
.kpi-icon--up { background: var(--status-alive-bg); color: var(--status-alive-fg); }
/* Traffic KPIs carry the direction colour on the number itself, the same blue
and green the charts and cells use. */
.kpi-value--down { color: var(--traffic-down); }
.kpi-value--up { color: var(--traffic-up); }
/* A KPI whose value is a state, not a number (device status) */
.kpi-value--chip { line-height: 1; }
.sparkline-svg { display: block; overflow: hidden; }
/* KPI card that's clickable for popup */
.kpi-card--link {
text-decoration: none;
color: inherit;
cursor: pointer;
display: block;
transition: background 0.12s, box-shadow 0.12s;
}
.kpi-card--link:hover {
background: var(--surface-2);
box-shadow: 0 0 0 1px var(--accent) inset;
}
/* traffic color accents reusable */
.traffic-up { color: var(--traffic-up); }
.traffic-down { color: var(--traffic-down); }
/* ── Dashboard traffic chart (v2 — themed server-side area chart) ── */
.chart-card { padding: 20px 24px; margin-bottom: 24px; }
.chart-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.chart-card__head h2 { font-size: 16px; font-weight: 600; margin: 0; color: var(--text); }
.chart-legend { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-2); }
.chart-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.chart-dot { width: 10px; height: 10px; border-radius: 4px; display: inline-block; }
.chart-dot--down { background: var(--traffic-down); }
.chart-dot--up { background: var(--traffic-up); }
.chart-legend__range { color: var(--text-3); }
.traffic-chart-v2 { width: 100%; height: auto; display: block; margin-top: 4px; }
/* inline traffic sparkline inside table rows (servers list) */
.traffic-link--spark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex-wrap: wrap; }
.traffic-link--spark:hover .traffic-nums { text-decoration: underline; }
.row-spark { display: inline-flex; align-items: flex-end; line-height: 0; opacity: 0.95; }
.traffic-nums { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The window is the headline; the lifetime figure sits under it so a quiet
week reads as quiet rather than as a node that has never carried anything. */
.traffic-figures { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.traffic-lifetime {
font-size: 12px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Host-load cell: three labelled percentages, clickable into the history. */
.node-load-link {
display: inline-flex; flex-wrap: wrap; gap: .1rem .6rem;
text-decoration: none; color: inherit;
border-bottom: 1px dashed transparent;
cursor: pointer;
}
.node-load-link:hover { border-bottom-color: var(--accent); text-decoration: none; }
.node-stat { white-space: nowrap; font-variant-numeric: tabular-nums; }
.node-stat__key {
font-size: 12px;
letter-spacing: .05em;
color: var(--text-3);
}
/* ── Geo map (/map fleet view) ── */
.geo-card { padding: 20px 24px; margin-bottom: 24px; }
.geo-map { width: 100%; height: auto; display: block; border-radius: 10px; overflow: hidden; }
.geo-ocean { fill: var(--surface-2); }
.geo-land { color: var(--text-3); opacity: 0.40; }
.geo-pin__halo { opacity: 0.22; }
.geo-pin__dot { stroke: var(--surface); stroke-width: 2; }
.geo-pin--alive .geo-pin__halo, .geo-pin--alive .geo-pin__dot { fill: var(--ok); }
.geo-pin--pending .geo-pin__halo, .geo-pin--pending .geo-pin__dot { fill: var(--warn); }
.geo-pin--dead .geo-pin__halo, .geo-pin--dead .geo-pin__dot { fill: var(--danger); }
.geo-pin__label { font-size: 17px; font-weight: 600; fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
/* btn-icon variant: danger (delete) — visible trash icon */
.btn-icon--danger { color: var(--text-3); }
.btn-icon--danger:hover { background: var(--status-dead-bg); color: var(--danger); }
.btn-icon svg { display: block; }
/* ── Outline-sm button (card header "Add device") ── */
.btn-outline-sm {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 14px;
font-size: 13px; font-weight: 500;
color: var(--text); background: transparent;
border: 1px solid var(--border);
border-radius: var(--r-sm);
text-decoration: none;
transition: background .12s, border-color .12s;
}
.btn-outline-sm:hover { background: var(--surface-2); border-color: var(--text-3); text-decoration: none; }
/* ── Mobile top bar (lives inside .main-area; hidden on desktop) ── */
.mobile-bar {
display: none;
align-items: center;
gap: .75rem;
height: 52px;
padding: 0 .875rem;
background: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 30;
}
.mobile-menu-btn {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--text); border: 1px solid var(--border);
border-radius: 10px; cursor: pointer; padding: 0;
}
.mobile-menu-btn:hover { background: var(--surface-2); }
.mobile-brand { font-size: 18px; letter-spacing: -.02em; }
.sidebar-backdrop {
display: none;
position: fixed; inset: 0;
background: var(--scrim);
z-index: 40;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.app-shell { display: block; } /* don't fight the sidebar in flex flow */
.mobile-bar { display: flex; }
.sidebar {
position: fixed;
top: 0; bottom: 0; left: 0;
width: min(260px, 80vw);
transform: translateX(-100%);
transition: transform 180ms ease;
z-index: 60;
box-shadow: var(--shadow-lg);
}
.main-area {
margin-left: 0;
width: 100%;
min-width: 0;
/* clip, not hidden: `overflow-x: hidden` computes overflow-y to `auto` and
turns this box into a scroll container, which is what .mobile-bar's
`position: sticky` then sticks to. That container never scrolls (the
page does), so the hamburger scrolled away on every page. `clip` cuts
stray wide content without creating a scrollport. */
overflow-x: clip;
}
.page-content { padding: 1rem .875rem; min-width: 0; }
body.sidebar-open { overflow: hidden; }
body.sidebar-open .sidebar { transform: translateX(0); }
body.sidebar-open .sidebar-backdrop { display: block; }
/* NOTE: the same rules are repeated under `.is-embed` at the end of this
file, without the breakpoint. Change one, change the other. */
/* Tighter cards / typography */
.card { padding: 1rem; }
.page-content h1 { font-size: 22px; }
.page-content h2 { font-size: 18px; }
/* Tables: horizontal scroll inside .table-wrap so layout doesn't blow up */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.data-table { min-width: 540px; }
/* The identity column stays put while the rest scrolls — otherwise you swipe
to "last seen" and can no longer tell whose device you are looking at. */
.data-table thead th:first-child,
.data-table tbody td:first-child {
position: sticky;
left: 0;
z-index: 1;
box-shadow: 1px 0 0 var(--border);
}
.data-table tbody td:first-child { background: var(--surface); }
.data-table thead th:first-child { background: var(--surface-2); }
/* The pinned column is a landmark, not the content. Unbounded it took ~62%
of a 390px screen (a node name wrapping to three lines beside two chips),
leaving a slit for the columns you swiped over to read. The floor matters
as much as the ceiling: below ~140px a name breaks mid-word and stops
being recognisable, which is the one thing the pin exists to prevent. */
.data-table thead th:first-child,
.data-table tbody td:first-child { min-width: 140px; max-width: 46vw; }
/* Emails and hostnames have no break opportunities at all, so they get
`anywhere`. Names are read, not parsed: `break-word` lets them wrap between
words and only splits a word that genuinely cannot fit. */
.cell-user__email { overflow-wrap: anywhere; }
.cell-user__name,
.cell-ident__name,
.cell-server-name { overflow-wrap: break-word; }
/* .data-table--plain draws no header bed; without this the sticky rule above
would give its first header cell one anyway — a single grey box in a
borderless table's top-left corner. */
.data-table--plain thead th:first-child { background: var(--surface); }
/* Chips belong under the name here, not beside it — side by side they take
the width the name needs. */
.cell-server-name { flex-wrap: wrap; }
/* The v3 action row is the same shape as .form-actions and needs the same
mobile rule; without it "Save" and "Delete" share one 390px line. */
.form-actions-v3 { flex-direction: column; align-items: stretch; }
.form-actions-v3 .btn-primary-v3,
.form-actions-v3 .btn-danger-outline { width: 100%; justify-content: center; }
/* A card heading and its actions stop sharing a line: at 390px "Pending
invitations (3)" plus a button wraps into two ragged halves. */
.card-header { flex-direction: column; align-items: stretch; }
.card-header__actions { justify-content: flex-start; }
/* Form / action groups stack vertically on mobile */
.form-actions {
flex-direction: column; align-items: stretch;
}
.form-actions .btn { width: 100%; }
/* Inline forms stack: an 18rem field plus a button does not fit 362px, and a
row that cannot wrap pushes its submit button off the screen entirely. */
.form-inline { flex-direction: column; align-items: stretch; }
.form-inline > div,
.form-inline input,
.form-inline select,
.form-inline button { width: 100%; }
.input-w-sm, .input-w-md, .input-w-lg { width: 100%; }
/* A borderless list table has no wide columns to protect */
.data-table--plain { min-width: 0; }
/* Long machine strings break instead of overflowing. `break-all` only for
the block forms, which really do carry pubkeys and install commands with
no break opportunity in them; an inline .mono cell is as often a hostname
("thinkpad-x1") or a model name, and break-all would chop those mid-word
even when the column has room to wrap at the hyphen. */
.mono { overflow-wrap: anywhere; }
code, pre { word-break: break-all; overflow-wrap: anywhere; }
/* Hero / cards on a narrow viewport */
.traffic-chart-wrap svg { max-width: 100% !important; }
/* ── v3 mobile overrides ── */
/* .page stays transparent here too — .page-content owns the mobile gutter. */
.page-header h1 { font-size: 22px; }
/* Two up, not one. auto-fit with a 180px floor gives a single column at
390px, and four KPI tiles at 20px/24px padding then cost a whole screen
before the page's actual content starts. The strip is a bare grid on the
page ground, so it takes no padding of its own — .page-content owns the
gutter. */
.kpi-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 0;
margin-bottom: 20px;
}
.kpi-card { padding: 12px 14px; }
.kpi-value { font-size: 22px; }
.data-table { font-size: 13px; }
.data-table thead th,
.data-table tbody td { padding: 10px 12px; }
.card-header { padding: 12px 16px; }
.card-header__actions { gap: 4px; }
.platform-grid { grid-template-columns: 1fr !important; }
/* The device list is a table and inherits the table rules above. */
}
/* ── Theme switcher ── */
.theme-switcher {
display: flex;
gap: 4px;
margin-top: 12px;
padding: 4px;
background: var(--sidebar-hover-bg);
border: 1px solid var(--sidebar-border);
border-radius: var(--r-sm);
}
.theme-switcher__btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
background: transparent;
border: none;
border-radius: 4px;
color: var(--sidebar-fg);
cursor: pointer;
}
.theme-switcher__btn:hover {
color: var(--sidebar-fg-active);
}
/* The language picker reuses the theme switcher's segmented shape — same place
in the footer, same job, so the same control — but its segments carry a word
rather than a 16px icon. */
.theme-switcher__btn--text {
padding: 5px 6px;
font-size: 12px;
font-weight: 600;
font-family: inherit;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.theme-switcher__btn.is-active {
background: var(--sidebar-active-bg);
color: var(--sidebar-fg-active);
}
/* ============================================================
Theme: explicit dark override
Activates when regardless of OS setting.
============================================================ */
[data-theme="dark"] {
color-scheme: dark;
--scrim: rgba(0, 0, 0, .6);
--accent: #5b87ff;
--accent-hover: #7099ff;
--accent-subtle: #1e2d5a;
--accent-on-subtle: #8db0ff;
--accent-solid: #3563f0;
--accent-solid-hover: #4571f5;
--on-accent: #ffffff;
--focus-ring: rgba(91, 135, 255, .28);
--traffic-down: #6aa6f5;
--traffic-up: #3fb950;
--danger-fg: #f87171;
--danger-border: #7f1d1d;
--danger-bg: #450a0a;
--success-fg: #86efac;
--success-border: #166534;
--success-bg: #052e16;
--warning-fg: #fde68a;
--warning-border: #a16207;
--warning-bg: #3a2e08;
--role-admin-fg: #c4b5fd;
--role-admin-bg: #2e1065;
--bg: #0d1117;
--surface: #161b22;
--surface-2: #21262d;
--input-bg: #0d1117;
--border: #30363d;
--text: #e6edf3;
--text-2: #8b949e;
--text-3: #7d8590;
--status-alive-bg: #064e3b;
--status-alive-fg: #6ee7b7;
--status-pending-bg: #451a03;
--status-pending-fg: #fbbf24;
--status-dead-bg: #450a0a;
--status-dead-fg: #fca5a5;
--status-disabled-bg:#1f2937;
--status-disabled-fg:#9ca3af;
--ok: #34D399;
--warn: #FBBF24;
--danger: #F87171;
--sidebar-bg: #090d13;
--sidebar-fg: #7d8590;
--sidebar-fg-active: #e6edf3;
--sidebar-active-bg: rgba(255,255,255,0.06);
--sidebar-border: #21262d;
--sidebar-hover-bg: rgba(255,255,255,0.04);
--shadow-sm: 0 1px 3px rgba(0,0,0,.3);
--shadow: 0 4px 12px rgba(0,0,0,.35);
--shadow-lg: 0 8px 24px rgba(0,0,0,.45);
}
/* ── Clickable traffic cells (open popup on click) ───────────────────── */
.traffic-link {
display: inline-flex;
align-items: center;
gap: .25rem;
text-decoration: none;
border-bottom: 1px dashed transparent;
cursor: pointer;
font-family: var(--font-mono);
}
.traffic-link:hover {
text-decoration: none;
border-bottom-color: var(--accent);
}
/* ── Traffic popup (universal admin chart modal) ──────────────────────── */
.traffic-popup {
position: fixed; inset: 0;
display: none;
z-index: 1000;
}
body.traffic-popup-open .traffic-popup { display: block; }
.traffic-popup-backdrop {
position: absolute; inset: 0;
background: var(--scrim);
backdrop-filter: blur(2px);
cursor: pointer;
}
.traffic-popup-panel {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: min(720px, calc(100% - 2rem));
max-height: calc(100vh - 2rem);
overflow: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
box-shadow: var(--shadow-lg);
padding: 1.25rem 1.5rem;
}
.traffic-popup-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.traffic-popup-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.traffic-popup-totals {
font-size: 14px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
text-align: right;
line-height: 1.5;
}
.btn-group {
display: inline-flex;
gap: 0;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border);
}
.btn-group .btn {
border: none;
border-radius: 0;
background: transparent;
}
.btn-group .btn + .btn { border-left: 1px solid var(--border); }
.btn-group .btn.is-active {
background: var(--accent-subtle);
color: var(--accent-on-subtle);
font-weight: 600;
}
.traffic-popup-body { min-height: 160px; }
[data-theme="dark"] .traffic-popup-panel { background: var(--surface-2, var(--surface)); }
/* Legend row */
.map-legend {
display: flex;
gap: 16px;
margin-top: 16px;
flex-wrap: wrap;
align-items: center;
}
.legend-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-2);
}
.legend-chip--alive { color: var(--status-alive-fg); }
.legend-chip--pending { color: var(--status-pending-fg); }
.legend-chip--dead { color: var(--status-dead-fg); }
/* ─── Auth screens (login, forbidden) ─── */
.auth-shell {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: var(--surface);
}
.auth-card {
width: 100%; max-width: 420px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r);
box-shadow: var(--shadow);
padding: 32px;
}
.auth-brand {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
}
.auth-brand svg { display: block; width: 48px; height: 48px; }
.auth-title {
font-size: 24px; font-weight: 700;
text-align: center; margin: 0 0 4px;
color: var(--text);
}
.auth-subtitle {
font-size: 13px; color: var(--text-2);
text-align: center; margin: 0 0 24px;
}
.auth-error {
padding: 12px 16px;
background: var(--status-dead-bg);
color: var(--status-dead-fg);
border-radius: var(--r-sm);
font-size: 14px;
margin-bottom: 16px;
}
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--text); }
/* Look and focus ring come from the base input rule; only layout lives here. */
.form-field input,
.form-field select,
.form-field textarea { display: block; width: 100%; }
.btn-primary-block {
display: block;
width: 100%;
padding: 10px 16px;
background: var(--accent-solid); color: var(--on-accent);
border: none; border-radius: var(--r-sm);
font-size: 14px; font-weight: 600;
font-family: inherit;
cursor: pointer;
text-align: center;
transition: background 0.12s;
}
.btn-primary-block:hover { background: var(--accent-solid-hover); text-decoration: none; }
.auth-footer {
font-size: 13px; color: var(--text-2);
text-align: center; margin: 24px 0 0;
}
.auth-footer a { color: var(--accent); text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
/* ─── Settings rows (Account, etc.) ─── */
.settings { padding: 0; }
.setting-row {
display: flex; align-items: center; gap: 16px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-row__main { flex: 1; min-width: 0; }
.setting-row__label { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
/* An email is one unbroken token and this is where the panel prints it: with
no wrap rule it would push the row's button out of the card, where the mobile
clip removes it without a trace. */
.setting-row__value { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.setting-row__desc { font-size: 13px; color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; }
.setting-row__action { flex-shrink: 0; }
/* An expandable row stacks: the summary keeps the row layout, and the form it
reveals spans the full width instead of being squeezed into the action
column — labelled fields need the room to stay readable. */
.setting-row--expandable { display: block; }
.setting-row__head {
display: flex; align-items: center; gap: 16px;
cursor: pointer;
list-style: none;
}
.setting-row__head::-webkit-details-marker { display: none; }
.setting-row--expandable details[open] > .setting-row__head {
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.setting-row__head .setting-row__main { display: block; }
.setting-row__head .setting-row__label,
.setting-row__head .setting-row__value,
.setting-row__head .setting-row__desc { display: block; }
/* The summary's affordance must not be squeezed by the value beside it. */
.setting-row__head > .btn-outline-sm { flex-shrink: 0; }
.setting-row__head .setting-row__value .chip { margin-left: 6px; vertical-align: middle; }
/* Pending email change: shown under the row, outside the disclosure, so it
stays visible whether or not the change form is open. */
.pending-change {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
margin-top: 12px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-2);
}
.pending-change__text { font-size: 13px; color: var(--text-2); }
.pending-change__form { margin: 0; }
/* ─── Status chips ─── */
.chip {
display: inline-block;
padding: 2px 10px;
border-radius: 99px;
font-size: 12px;
font-weight: 600;
line-height: 18px;
}
/* Role chips: staff roles wear the accent-family badge, the two client roles
stay neutral so a page of members reads calm. */
.chip--owner { background: var(--role-admin-bg); color: var(--role-admin-fg); }
.chip--superuser { background: var(--role-admin-bg); color: var(--role-admin-fg); }
.chip--powered { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.chip--member { background: var(--status-disabled-bg); color: var(--status-disabled-fg); }
/* ─── Buttons (small variants) ─── */
.btn-primary-sm {
padding: 6px 12px;
background: var(--accent-solid); color: var(--on-accent);
border: none; border-radius: 6px;
font-size: 13px; font-weight: 500;
font-family: inherit;
cursor: pointer;
}
/* --accent-hover is the LINK blue's hover step; a filled button needs the
solid one, or white text on it falls to ~2.7:1 in the dark theme. */
.btn-primary-sm:hover { background: var(--accent-solid-hover); }
/* .btn-outline-sm is declared once, up at the card-header group. A second
declaration here would win on source order and cost the button its
inline-flex/gap (an icon beside a label on the baseline) and its hover
(--surface, the card's own colour, i.e. no hover at all). */
/* ─── Inline edit (details/summary) ─── */
.inline-edit summary { list-style: none; cursor: pointer; }
.inline-edit summary::-webkit-details-marker { display: none; }
/* Stacked disclosures need air between them. Four in a row, each with a
button-styled summary, touched edge to edge and read as one segmented
control rather than as four separate things to open. */
.inline-edit + .inline-edit { margin-top: 8px; }
.inline-edit-form {
display: flex; gap: 8px; align-items: center;
margin-top: 8px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
/* Panel variant: a real labelled form, one field per line, capped at a readable
measure rather than stretched across the card. The rule that separates it from
the row lives on the summary instead, so it spans the whole row rather than
stopping at the form's measure. */
.inline-edit-form--panel {
display: block;
max-width: 420px;
margin-top: 0;
padding-top: 0;
border-top: none;
}
.inline-edit-form--panel .form-field + .form-field { margin-top: 12px; }
.inline-edit-form--panel input {
width: 100%;
padding: 8px 12px;
font-size: 14px;
}
.inline-edit-form__hint {
margin: 8px 0 0;
font-size: 13px;
color: var(--text-2);
line-height: 1.5;
}
.inline-edit-form__actions { margin-top: 16px; }
/* Способ подключения: две карточки-варианта. Подпись под каждым названием
обязательна — выбор между "свой адрес" и "за роутером" человек делает по
описанию своей машины, а не по термину. */
/* Путь из двух звеньев: вход (релей) → выход (сама нода). Стрелка обязательна —
без неё два флага подряд читаются как одно место, записанное дважды. */
/* Text flow, not flex. A wrapping flex line breaks BETWEEN its items, so in a
column too narrow for both legs the arrow would begin the next line and read as
a bullet in front of the exit country — the exact "two places listed twice" the
arrow is here to prevent. As text it cannot: the markup leaves no whitespace
between a leg and the arrow that follows it, so the only break opportunity is
AFTER the arrow, and a wrapped path ends its first line with "→". */
.path { display: block; }
.path__leg { display: inline; }
.path .country__flag { margin-right: 4px; } /* the space a flex gap would give */
.path .path__arrow { margin-left: 4px; } /* the space after it is the other half */
.path__arrow { color: var(--text-2); }
/* The access chips live with the other name-cell chips — see "Chips for server
metadata" below, where both axes are defined together. */
.access-kind { border: 0; padding: 0; margin: 0; }
.access-kind legend {
padding: 0;
font-size: 13px;
font-weight: 600;
color: var(--text-2);
}
.access-kind__option {
display: grid;
grid-template-columns: auto 1fr;
gap: 2px 10px;
align-items: start;
margin-top: 10px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
}
.access-kind__option:has(input:checked) {
border-color: var(--accent);
background: var(--surface-2);
}
.access-kind__option input { flex: none; margin-top: 3px; }
.access-kind__title { font-size: 14px; font-weight: 600; }
.access-kind__hint {
grid-column: 2;
font-size: 13px;
color: var(--text-2);
line-height: 1.5;
}
.inline-edit-form input {
flex: 1;
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 13px;
background: var(--bg);
color: var(--text);
font-family: inherit;
}
/* ─── Dark theme overrides ─── */
[data-theme="dark"] .form-field input { background: var(--surface-2); }
/* ─── Downloads page ─── */
.platform-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 20px;
background: var(--surface);
border-radius: var(--r);
}
.platform-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.platform-card--disabled { opacity: 0.6; }
.platform-icon {
width: 32px; height: 32px;
color: var(--text);
margin-bottom: 4px;
}
.platform-icon-svg {
width: 32px; height: 32px;
}
.platform-name { font-size: 16px; font-weight: 600; color: var(--text); }
.platform-name__version {
font-size: 12px; color: var(--text-2);
font-weight: 400;
margin-left: 8px;
}
.platform-desc {
font-size: 13px;
color: var(--text-2);
margin: 4px 0 12px;
flex: 1;
}
/* Wraps rather than squeezes: the macOS tile carries a button per
architecture, and a narrow tile puts the second under the first. */
.platform-action { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.badge-disabled {
display: inline-block;
padding: 8px 16px;
background: var(--surface-2); color: var(--text-3);
border-radius: 6px;
font-size: 14px;
}
.downloads-cta {
text-align: center;
margin: 24px 0;
color: var(--text-2);
font-size: 14px;
}
.downloads-cta a { color: var(--accent); text-decoration: none; }
.downloads-cta a:hover { text-decoration: underline; }
/* ─── Users list — data table v3 extensions ─── */
.data-table__actions { text-align: right; white-space: nowrap; }
.data-table__actions a,
.data-table__actions button { margin-left: 4px; vertical-align: middle; }
/* The action cluster is usually a link beside a one-button