/* ============================================================
Quiet UI — component layer
Reference language: macOS system UI + the OpenAI Codex app.
Rules this file obeys, so you can keep obeying them:
· nothing is drawn that does not separate two things;
· hairlines instead of borders, surface changes instead of cards;
· shadows only on layers that float (menu, sheet, palette, toast);
· one accent, used for focus / links / active state only;
· colour lives in a marker, never in label text;
· four type sizes; hierarchy comes from weight and ink level.
Usage:
(or "dark")
Every value below is a token. If you need a new number, add a
token — do not hard-code it in a component.
============================================================ */
/* ── base ────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
/* An app shell owns its own scrolling. Remove this on a document page. */
body.app,
html:has(body.app) {
overflow: hidden;
}
body {
font-family: var(--font);
font-size: var(--fs-2);
font-weight: 450;
line-height: 1.45;
letter-spacing: -0.005em;
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
button,
input,
select,
textarea {
font: inherit;
letter-spacing: inherit;
color: inherit;
background: none;
border: 0;
}
button {
cursor: pointer;
}
svg {
display: block;
}
/* REQUIRED: components below are toggled with the hidden attribute. */
[hidden] {
display: none !important;
}
a {
color: var(--accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
::selection {
background: color-mix(in srgb, var(--accent) 24%, transparent);
}
/* The tab key must never land on a disabled control; opacity keeps the
shape, the ink goes quiet. One convention for every control. */
:disabled,
[aria-disabled='true'] {
opacity: var(--disabled);
pointer-events: none;
}
/* While the theme flips, nothing animates: colours snap, motion stays
for interactions only. Toggle .theme-snap on for ~1 frame. */
.theme-snap *,
.theme-snap *::before,
.theme-snap *::after {
transition: none !important;
animation: none !important;
}
input[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
* {
scrollbar-width: thin;
scrollbar-color: var(--fill-active) transparent;
}
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--fill-active);
border-radius: var(--r-pill);
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--hairline-strong);
background-clip: content-box;
}
/* ── text helpers ────────────────────────────────────────── */
.ic {
width: 16px;
height: 16px;
flex: none;
}
.num,
.mono {
font-variant-numeric: tabular-nums lining-nums;
}
.mono {
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0;
}
.title {
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: -0.018em;
}
.figure {
font-size: var(--fs-4);
font-weight: 500;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums lining-nums;
}
.label {
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-3);
}
.dim {
color: var(--fg-2);
}
.muted {
color: var(--fg-4);
}
.trunc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hint {
font-size: var(--fs-1);
color: var(--fg-4);
}
.hint[data-tone='ok'] {
color: var(--fg-2);
}
.kbd {
font-family: var(--font);
font-size: var(--fs-0);
font-weight: 500;
color: var(--fg-3);
background: var(--fill-quiet);
border-radius: var(--r-sm);
padding: 1px 5px;
letter-spacing: 0;
/* A keycap sits a hair proud of the surface. */
box-shadow: inset 0 0 0 1px var(--hairline), inset 0 -1px 0 var(--hairline);
}
/* ── window shell ────────────────────────────────────────── */
.window {
display: grid;
grid-template-columns: var(--w-sidebar) minmax(0, 1fr) 0px;
height: 100dvh;
transition: grid-template-columns var(--dur-slow) var(--ease);
}
.window[data-inspector='true'] {
grid-template-columns: var(--w-sidebar) minmax(0, 1fr) var(--w-inspector);
}
.window[data-sidebar='hidden'] {
grid-template-columns: 0px minmax(0, 1fr) 0px;
}
.window[data-sidebar='hidden'][data-inspector='true'] {
grid-template-columns: 0px minmax(0, 1fr) var(--w-inspector);
}
/* ── sidebar ─────────────────────────────────────────────── */
.sidebar {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
background: var(--bg-sidebar);
}
.sidebar-top {
padding: var(--s3) var(--s3) var(--s2);
}
.sidebar-scroll {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--s2) var(--s2) var(--s4);
}
.sidebar-foot {
padding: var(--s2);
}
.brand {
display: flex;
align-items: center;
gap: var(--s2);
padding: 0 var(--s1);
}
.mark {
width: 19px;
height: 19px;
color: var(--fg);
}
.brand-name {
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: -0.018em;
}
.nav {
list-style: none;
display: flex;
flex-direction: column;
gap: 1px;
}
.nav-group {
margin-top: var(--s5);
}
.nav-group-title {
display: flex;
align-items: center;
gap: var(--s1);
width: 100%;
padding: 0 var(--s2) var(--s1) 6px;
font-size: var(--fs-1);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--fg-3);
}
.chev {
width: 10px;
height: 10px;
transform: rotate(90deg);
transition: transform var(--dur) var(--ease);
color: var(--fg-4);
}
.nav-group-title[aria-expanded='false'] .chev {
transform: rotate(0deg);
}
.nav-group[data-collapsed='true'] .nav {
display: none;
}
.nav-item,
.foot-btn {
display: flex;
align-items: center;
gap: var(--s2);
width: 100%;
height: 28px;
padding: 0 var(--s2);
border-radius: var(--r-md);
color: var(--fg);
text-align: left;
}
.foot-btn {
color: var(--fg-2);
}
.nav-item .ic,
.foot-btn .ic {
color: var(--fg-2);
width: 15px;
height: 15px;
}
.nav-item:hover,
.foot-btn:hover {
background: var(--fill-hover);
}
.foot-btn:hover {
color: var(--fg);
}
.foot-btn .kbd {
margin-left: auto;
}
.nav-item[aria-current='true'] {
background: var(--fill-select);
font-weight: 600;
}
.nav-item[aria-current='true'] .ic {
color: var(--accent);
}
.nav-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nav-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-3);
font-variant-numeric: tabular-nums;
}
/* ── content pane, toolbar, status bar ───────────────────── */
.content {
display: flex;
flex-direction: column;
min-width: 0;
/* The pane is the field a list floats on — not white, so the list can be. */
background: var(--field);
border-left: 1px solid var(--hairline);
}
.toolbar {
display: flex;
align-items: center;
gap: var(--s4);
height: 52px;
flex: none;
padding: 0 var(--s4) 0 var(--s3);
/* The line appears only once content has scrolled under it. */
border-bottom: 1px solid transparent;
transition: border-color var(--dur) linear;
}
.toolbar[data-scrolled='true'] {
border-bottom-color: var(--hairline);
}
.tb-left {
display: flex;
align-items: baseline;
gap: var(--s2);
min-width: 0;
}
.tb-title {
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: -0.018em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tb-count {
font-size: var(--fs-2);
color: var(--fg-3);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.tb-right {
display: flex;
align-items: center;
gap: var(--s2);
margin-left: auto;
}
.scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding-bottom: var(--s6);
}
.statusbar {
display: flex;
align-items: center;
gap: var(--s3);
flex: none;
height: 28px;
padding: 0 var(--s5);
border-top: 1px solid var(--hairline);
font-size: var(--fs-1);
color: var(--fg-3);
font-variant-numeric: tabular-nums;
}
.statusbar .sep {
color: var(--fg-4);
}
.statusbar .right {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--s3);
}
/* ── buttons ─────────────────────────────────────────────── */
.primary-btn {
display: flex;
align-items: center;
gap: 5px;
height: 28px;
padding: 0 var(--s3) 0 var(--s2);
border-radius: var(--r-md);
background: var(--fg);
color: var(--bg);
font-weight: 600;
white-space: nowrap;
}
.primary-btn:hover {
background: color-mix(in srgb, var(--fg) 85%, var(--bg));
}
.primary-btn:active {
background: color-mix(in srgb, var(--fg) 72%, var(--bg));
}
.quiet-btn {
display: inline-flex;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 var(--s3);
border-radius: var(--r-md);
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-2);
background: var(--fill-quiet);
}
.quiet-btn svg {
width: 13px;
height: 13px;
color: var(--fg-3);
}
.quiet-btn:hover {
color: var(--fg);
background: var(--fill-active);
}
.quiet-btn:hover svg {
color: var(--fg-2);
}
.quiet-btn[data-danger='true']:hover,
.quiet-btn[data-danger='true']:hover svg {
color: var(--crit);
}
.tb-btn {
display: inline-flex;
min-width: 0;
white-space: nowrap;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 var(--s2);
border-radius: var(--r-md);
font-size: var(--fs-2);
font-weight: 450;
color: var(--fg-2);
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tb-btn .ic {
width: 14px;
height: 14px;
color: var(--fg-3);
}
.tb-btn .sel-chev {
width: 10px;
height: 10px;
color: var(--fg-3);
}
.tb-btn:hover {
background: var(--fill-hover);
color: var(--fg);
}
.tb-btn[data-on='true'] {
background: var(--fill-select);
color: var(--fg);
}
.tb-btn[data-on='true'] .ic {
color: var(--fg-2);
}
.icon-btn {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: var(--r-md);
color: var(--fg-2);
}
.icon-btn:hover {
background: var(--fill-hover);
color: var(--fg);
}
/* Lives inside a row; appears when the pointer arrives. */
.ghost-btn {
height: 22px;
padding: 0 var(--s2);
border-radius: var(--r-sm);
font-size: var(--fs-1);
font-weight: 600;
color: var(--fg-2);
background: var(--fill-quiet);
opacity: 0;
white-space: nowrap;
}
.row:hover .ghost-btn,
.row[aria-selected='true'] .ghost-btn {
opacity: 1;
}
.ghost-btn:hover {
background: var(--fill-active);
color: var(--fg);
}
/* Sheet footer button: same shape as primary, wider padding. */
.act-btn {
height: 28px;
padding: 0 var(--s5);
border-radius: var(--r-md);
font-weight: 600;
background: var(--fg);
color: var(--bg);
white-space: nowrap;
}
.act-btn:hover {
background: color-mix(in srgb, var(--fg) 85%, var(--bg));
}
.act-btn:active {
background: color-mix(in srgb, var(--fg) 72%, var(--bg));
}
.act-btn[data-role='cancel'] {
background: var(--fill-quiet);
color: var(--fg-2);
font-weight: 500;
}
.act-btn[data-role='cancel']:hover {
background: var(--fill-active);
color: var(--fg);
}
/* ── segmented control and search ────────────────────────── */
.segmented {
display: flex;
gap: 2px;
padding: 2px;
border-radius: var(--r-md);
background: var(--fill-quiet);
}
.seg {
height: 24px;
padding: 0 var(--s3);
border-radius: 5px;
font-size: var(--fs-2);
color: var(--fg-2);
white-space: nowrap;
}
.seg:hover {
color: var(--fg);
}
.seg.on {
background: var(--bg);
color: var(--fg);
font-weight: 600;
/* The raised thumb: hairline ring plus one hair of lift. */
box-shadow: 0 0 0 0.5px var(--hairline-strong), var(--shadow-lift);
}
[data-theme='dark'] .seg.on {
background: var(--fill-active);
box-shadow: none;
}
.search {
display: flex;
align-items: center;
gap: 6px;
width: 190px;
height: 28px;
padding: 0 var(--s2);
border-radius: var(--r-md);
background: var(--fill-quiet);
color: var(--fg-3);
transition: box-shadow var(--dur) var(--ease);
}
.search:focus-within {
box-shadow: 0 0 0 2px var(--accent-fill), inset 0 0 0 1px var(--accent);
}
.search input {
flex: 1;
min-width: 0;
color: var(--fg);
}
.search input::placeholder {
color: var(--fg-3);
}
.search input:focus {
outline: none;
}
/* ── fields ──────────────────────────────────────────────── */
.field {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.field > label {
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-2);
}
.opt {
color: var(--fg-4);
font-weight: 450;
}
.field input,
.field textarea {
width: 100%;
height: 30px;
padding: 0 var(--s3);
border-radius: var(--r-md);
background: var(--fill-quiet);
color: var(--fg);
transition:
background var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.field textarea {
height: auto;
font-size: var(--fs-2);
padding: 7px var(--s3);
resize: vertical;
line-height: 1.5;
font-family: var(--font);
}
.field input::placeholder,
.field textarea::placeholder {
color: var(--fg-4);
}
/* One focus recipe for everything you can type into:
inner accent line, soft outer glow. Same as .search. */
.field input:focus,
.field textarea:focus,
.select-wrap select:focus {
outline: none;
box-shadow: 0 0 0 2px var(--accent-fill), inset 0 0 0 1px var(--accent);
}
/* Invalid fields swap the ring colour and say why below. */
.field input[aria-invalid='true'],
.field textarea[aria-invalid='true'] {
box-shadow: inset 0 0 0 1px var(--crit);
}
.field input[aria-invalid='true']:focus,
.field textarea[aria-invalid='true']:focus {
box-shadow: 0 0 0 2px var(--crit-fill), inset 0 0 0 1px var(--crit);
}
.field-error {
font-size: var(--fs-1);
color: var(--crit);
}
.field input.mono {
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0;
}
.input-wrap {
position: relative;
display: flex;
align-items: center;
}
.row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s4);
}
.select-wrap {
position: relative;
display: flex;
align-items: center;
}
.select-wrap select {
appearance: none;
width: 100%;
height: 30px;
padding: 0 28px 0 var(--s3);
border-radius: var(--r-md);
background: var(--fill-quiet);
color: var(--fg);
cursor: pointer;
}
.select-wrap select {
transition: box-shadow var(--dur) var(--ease);
}
.select-wrap .sel-chev {
position: absolute;
right: 9px;
width: 14px;
height: 14px;
color: var(--fg-3);
pointer-events: none;
}
/* ── combo: a text field that remembers ──────────────────── */
.combo-wrap {
position: relative;
display: block;
}
.field input.combo {
padding-right: 26px;
}
.combo-chev {
position: absolute;
top: 0;
right: 0;
display: grid;
place-items: center;
width: 26px;
height: 30px;
color: var(--fg-4);
border-radius: 0 var(--r-md) var(--r-md) 0;
transition: color var(--dur) var(--ease);
}
.combo-chev:hover {
color: var(--fg-2);
}
.combo-chev .ic {
width: 14px;
height: 14px;
}
.combo-menu {
top: calc(100% + 5px);
right: 0;
min-width: 0;
max-height: 216px;
overflow: auto;
overscroll-behavior: contain;
}
.combo-menu .menu-item small {
font-family: var(--mono);
font-size: 0.7rem;
}
/* ── markers and pills ───────────────────────────────────── */
.dot {
width: 6px;
height: 6px;
border-radius: var(--r-pill);
flex: none;
background: var(--fg-4);
}
[data-tone='crit'] .dot {
background: var(--crit);
}
[data-tone='warn'] .dot {
background: var(--warn);
}
/* Healthy needs no colour — green on every row is wallpaper. */
[data-tone='ok'] .dot,
[data-tone='idle'] .dot {
background: var(--fg-4);
}
[data-tone='unset'] .dot {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--fg-4);
}
/* Use only where a state must read out of context: green is allowed here. */
[data-tone='live'] .dot {
background: var(--ok);
}
.pills {
display: flex;
flex-wrap: wrap;
gap: var(--s1);
}
.pill {
font-size: var(--fs-1);
padding: 1px 7px;
border-radius: var(--r-pill);
background: var(--fill-quiet);
color: var(--fg-2);
}
.status-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--fs-1);
font-weight: 500;
padding: 2px 8px 2px 6px;
border-radius: var(--r-pill);
color: var(--fg-2);
background: var(--fill-quiet);
}
.status-pill[data-tone='ok'] {
color: var(--fg-2);
background: transparent;
}
.status-pill[data-tone='ok'] .dot {
background: var(--ok);
}
.status-pill[data-tone='idle'] {
color: var(--fg-3);
}
.status-pill[data-tone='idle'] .dot {
background: var(--fg-4);
}
.status-pill[data-tone='crit'] {
color: var(--crit);
background: transparent;
}
.status-pill[data-tone='crit'] .dot {
background: var(--crit);
}
/* ── list ────────────────────────────────────────────────
One measure, centred, on the field. The change of surface is the
whole separation: no border, no shadow. Override --grid per list.
──────────────────────────────────────────────────────── */
.table-wrap {
--grid: 152px 148px minmax(96px, 0.42fr) 92px 132px minmax(200px, 1fr) 106px;
width: min(100% - 2 * var(--s6), var(--w-col));
margin: var(--s5) auto var(--s6);
padding: 0 var(--s2) var(--s2);
background: var(--bg);
border-radius: var(--r-xl);
}
.thead,
.row {
display: grid;
grid-template-columns: var(--grid);
align-items: center;
gap: var(--s4);
/* Text never touches the highlight: the row keeps its own inset. */
padding-inline: var(--s3);
}
.thead {
position: sticky;
top: 0;
z-index: 2;
height: 34px;
background: var(--bg);
border-bottom: 1px solid var(--hairline);
padding-bottom: 2px;
}
.th {
display: flex;
align-items: center;
gap: 3px;
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-3);
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.th:hover {
color: var(--fg);
}
.th.num {
justify-content: flex-end;
}
.th[data-on='true'] {
color: var(--fg);
font-weight: 600;
}
.sortic {
width: 10px;
height: 10px;
opacity: 0;
transition: transform var(--dur) var(--ease);
}
.th[data-on='true'] .sortic {
opacity: 1;
}
.th[data-dir='asc'] .sortic {
transform: rotate(180deg);
}
.group-head {
display: flex;
align-items: center;
gap: var(--s2);
height: 32px;
margin-top: var(--s4);
padding-inline: var(--s3);
font-size: var(--fs-1);
font-weight: 600;
color: var(--fg-2);
}
.group-head small {
font-size: var(--fs-1);
color: var(--fg-4);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
/* Square, full-bleed highlight. A rounded one fights the separators: the
line above a hovered row runs straight past its rounded top corners and
leaves two empty notches. Rows in a list are a continuous surface —
rounding belongs to the container, not to each band inside it. */
.row {
position: relative;
height: var(--h-row);
cursor: default;
text-align: left;
width: 100%;
color: var(--fg);
}
/* Separator drawn under the row rather than as a border, so it never
inherits the row's box or shifts the content by a pixel. */
.row::after {
content: '';
position: absolute;
inset: auto 0 0;
height: 1px;
background: var(--hairline);
}
.row:last-child::after {
display: none;
}
.row:hover {
background: var(--fill-hover);
}
.row[aria-selected='true'] {
background: var(--fill-select);
}
.row > * {
min-width: 0;
}
/* Cell ink levels: the value, then support, then metadata. */
.cell {
min-width: 0;
color: var(--fg);
}
.cell.support {
color: var(--fg-2);
}
.cell.meta {
color: var(--fg-3);
}
.row:hover .cell.meta,
.row[aria-selected='true'] .cell.meta {
color: var(--fg-2);
}
.cell.num {
text-align: right;
font-variant-numeric: tabular-nums lining-nums;
}
.cell.num small {
color: var(--fg-3);
font-size: var(--fs-1);
}
.cell-lead {
display: flex;
align-items: center;
gap: var(--s2);
min-width: 0;
}
.type-ic {
width: 14px;
height: 14px;
color: var(--fg-4);
}
.row:hover .type-ic,
.row[aria-selected='true'] .type-ic {
color: var(--fg-3);
}
/* A value you will want on the clipboard. */
.copy-cell {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
height: 22px;
padding: 0 5px;
margin-left: -5px;
border-radius: var(--r-sm);
color: var(--fg);
}
.copy-cell .mono {
overflow: hidden;
text-overflow: ellipsis;
}
.copy-cell:hover {
background: var(--fill-active);
}
.copy-cell .ic {
width: 11px;
height: 11px;
opacity: 0;
color: var(--fg-3);
}
.row:hover .copy-cell .ic {
opacity: 1;
}
/* marker gutter · fact · quiet gloss — the fact column scans straight
down whether or not a row carries a marker. */
.cell-mark {
display: grid;
grid-template-columns: 6px auto 1fr;
align-items: center;
gap: var(--s2);
font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap;
color: var(--fg);
}
.mark-value {
font-variant-numeric: tabular-nums lining-nums;
}
.mark-gloss {
font-size: var(--fs-1);
color: var(--fg-3);
}
.cell-mark[data-tone='crit'] .mark-gloss {
color: var(--fg-2);
}
.cell-mark[data-tone='idle'],
.cell-mark[data-tone='idle'] .mark-gloss {
color: var(--fg-3);
}
.cell-mark[data-tone='unset'] .mark-value {
color: var(--fg-4);
}
.cell-act {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2px;
}
.row-more {
width: 22px;
height: 22px;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
color: var(--fg-4);
opacity: 0;
}
.row:hover .row-more,
.row[aria-selected='true'] .row-more,
.row-more:focus-visible {
opacity: 1;
}
.row-more:hover {
background: var(--fill-quiet);
color: var(--fg-2);
}
.row-more .ic {
width: 15px;
height: 15px;
}
/* ── key and value (reading, not typing) ─────────────────── */
.kv {
display: grid;
grid-template-columns: 84px minmax(0, 1fr);
gap: var(--s3);
align-items: baseline;
padding: 3px 0;
}
.kv dt {
font-size: var(--fs-1);
color: var(--fg-3);
text-align: left;
}
.kv dd {
min-width: 0;
overflow-wrap: anywhere;
}
.kv-group {
margin-top: var(--s4);
padding-top: var(--s4);
border-top: 1px solid var(--hairline);
}
/* ── inspector ───────────────────────────────────────────── */
.inspector {
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--bg-inspector);
border-left: 1px solid var(--hairline);
}
.insp-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--s4) var(--s5) var(--s6);
}
.insp-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s2);
}
/* Secondary and destructive actions sit at the far end, plain text,
out of the way of the everyday ones. */
.insp-quiet {
display: flex;
gap: var(--s4);
margin-top: var(--s5);
padding-top: var(--s4);
border-top: 1px solid var(--hairline);
}
/* ── empty state ─────────────────────────────────────────── */
.empty {
padding: var(--s10) 0;
text-align: center;
}
.empty-t {
font-size: var(--fs-3);
font-weight: 600;
}
.empty-s {
color: var(--fg-3);
margin-top: 2px;
}
.empty-acts {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s3);
}
.empty-cta {
margin-top: var(--s5);
height: 28px;
padding: 0 var(--s5);
border-radius: var(--r-md);
font-size: var(--fs-2);
font-weight: 600;
background: var(--fg);
color: var(--bg);
}
.empty-cta:hover {
background: color-mix(in srgb, var(--fg) 85%, var(--bg));
}
/* ── floating layers: the only place a shadow is allowed ─── */
.menu-wrap {
position: relative;
display: flex;
min-width: 0;
}
.menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 60;
min-width: 232px;
max-height: min(60vh, 480px);
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--s1);
border-radius: var(--r-lg);
background: var(--bg);
box-shadow: var(--shadow-menu);
}
.menu-right {
left: auto;
right: 0;
}
.menu-item {
display: flex;
white-space: nowrap;
align-items: center;
gap: var(--s2);
width: 100%;
height: 30px;
padding: 0 var(--s2);
border-radius: var(--r-md);
font-size: var(--fs-2);
color: var(--fg);
text-align: left;
}
.menu-item .ic {
width: 15px;
height: 15px;
color: var(--fg-3);
flex: none;
}
.menu-item span {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.menu-item small {
flex: none;
margin-left: auto;
padding-left: var(--s4);
font-size: var(--fs-1);
color: var(--fg-4);
font-variant-numeric: tabular-nums;
}
.menu-item:hover {
background: var(--fill-hover);
}
.menu-item[data-on='true'] {
background: var(--fill-select);
font-weight: 500;
}
.menu-item[data-on='true'] .ic {
color: var(--fg);
}
.menu-item[data-danger='true'],
.menu-item[data-danger='true'] .ic {
color: var(--crit);
}
.menu-rule {
height: 1px;
margin: var(--s1) 0;
background: var(--hairline);
}
.menu-sect {
padding: var(--s3) var(--s3) var(--s1);
font-size: var(--fs-1);
font-weight: 600;
color: var(--fg-3);
}
/* Sheet: a form. Read in place, edit here. */
.sheet-scrim {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: start center;
padding: 8vh var(--s5) var(--s5);
background: var(--scrim);
overflow: auto;
animation: fade 140ms var(--ease);
}
.sheet {
width: 100%;
max-width: 480px;
background: var(--bg);
border-radius: var(--r-lg);
box-shadow: var(--shadow-pop);
animation: pop 200ms var(--ease);
overflow: hidden;
}
.sheet.wide {
max-width: 720px;
}
.sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--s4) var(--s4) var(--s3) var(--s6);
}
.sheet-title {
font-size: var(--fs-3);
font-weight: 600;
letter-spacing: -0.018em;
}
.sheet-body {
padding: 0 var(--s6) var(--s5);
display: flex;
flex-direction: column;
gap: var(--s4);
}
.sheet-rule {
height: 1px;
background: var(--hairline);
margin: var(--s2) 0;
}
.sheet-foot {
display: flex;
align-items: center;
gap: var(--s2);
padding: var(--s3) var(--s4);
background: var(--bg-sidebar);
}
.sheet-foot-note {
flex: 1 1 auto;
font-size: var(--fs-1);
color: var(--fg-4);
}
@media (max-width: 620px) {
.sheet-scrim {
padding: 0;
place-items: stretch;
overflow: hidden;
}
.sheet {
max-width: none;
border-radius: 0;
height: 100dvh;
display: flex;
flex-direction: column;
}
.sheet-body {
flex: 1;
overflow-y: auto;
}
}
/* Command palette: one field, one list, no chrome. */
.palette-scrim {
position: fixed;
inset: 0;
z-index: 70;
display: grid;
place-items: start center;
padding: 12vh var(--s5) var(--s5);
background: var(--scrim);
animation: fade 120ms var(--ease);
}
.palette {
width: 100%;
max-width: 520px;
padding: var(--s1);
border-radius: var(--r-lg);
background: var(--bg);
box-shadow: var(--shadow-pop);
transform-origin: top center;
animation: pop 160ms var(--ease);
}
.palette-input {
width: 100%;
height: 42px;
padding: 0 var(--s3);
font-size: var(--fs-3);
color: var(--fg);
border-bottom: 1px solid var(--hairline);
}
.palette-input::placeholder {
color: var(--fg-4);
}
.palette-input:focus {
outline: none;
}
.palette-list {
max-height: 320px;
overflow: auto;
overscroll-behavior: contain;
padding-top: var(--s1);
}
/* Toast: carries the reversal instead of asking twice. */
.toast {
display: inline-flex;
align-items: center;
gap: var(--s3);
position: fixed;
left: 50%;
bottom: var(--s6);
transform: translateX(-50%);
z-index: 80;
padding: 7px var(--s4);
border-radius: var(--r-pill);
background: var(--fg);
color: var(--bg);
font-size: var(--fs-2);
font-weight: 500;
box-shadow: var(--shadow-pop);
animation: toastin 180ms var(--ease);
}
.toast-undo {
font-size: var(--fs-2);
font-weight: 600;
color: var(--bg);
opacity: 0.62;
padding-left: var(--s3);
border-left: 1px solid color-mix(in srgb, var(--bg) 30%, transparent);
}
.toast-undo:hover {
opacity: 1;
}
@keyframes fade {
from {
opacity: 0;
}
}
@keyframes pop {
from {
opacity: 0;
transform: translateY(6px) scale(0.985);
}
}
@keyframes toastin {
from {
opacity: 0;
transform: translate(-50%, 8px);
}
}
/* ============================================================
NEW COMPONENTS — added in the research pass.
Same grammar: hairlines over borders, one accent, fills from
the ink ramp, shadows only on floating layers.
============================================================ */
/* ── checkbox and radio ──────────────────────────────────────
16px, hairline ring at rest, accent fill when on — the one
place the accent paints a surface, because "on" is an active
state. Glyph is drawn in --bg so it inverts with the theme. */
.check,
.radio {
appearance: none;
width: 16px;
height: 16px;
flex: none;
margin: 0;
cursor: pointer;
background: var(--bg);
box-shadow: inset 0 0 0 1px var(--hairline-loud);
transition:
background var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.check {
border-radius: var(--r-sm);
}
.radio {
border-radius: var(--r-pill);
}
.check:hover,
.radio:hover {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 40%, transparent);
}
.check:checked,
.check:indeterminate,
.radio:checked {
background: var(--accent);
box-shadow: none;
}
.check:checked {
/* Check glyph as a mask so it always matches --bg. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.4 6.8 11 12 5.4'/%3E%3C/svg%3E");
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
.check:indeterminate {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4.5 8h7'/%3E%3C/svg%3E");
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
.radio:checked {
box-shadow: inset 0 0 0 5px var(--accent);
background: #fff;
}
/* A control and its words: click either. */
.choice {
display: inline-flex;
align-items: center;
gap: var(--s2);
font-size: var(--fs-2);
color: var(--fg);
cursor: pointer;
user-select: none;
}
.choice small {
color: var(--fg-3);
font-size: var(--fs-1);
}
/* ── switch ──────────────────────────────────────────────────
Instant state, no confirm. Off is ink, on is accent (macOS). */
.switch {
appearance: none;
position: relative;
width: 34px;
height: 20px;
flex: none;
margin: 0;
cursor: pointer;
border-radius: var(--r-pill);
background: var(--fill-select);
box-shadow: inset 0 0 0 1px var(--hairline);
transition: background var(--dur) var(--ease);
}
.switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: var(--r-pill);
background: #fff;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), var(--shadow-lift);
transition: transform var(--dur) var(--ease);
}
.switch:checked {
background: var(--accent);
box-shadow: none;
}
.switch:checked::after {
transform: translateX(14px);
}
/* ── slider ──────────────────────────────────────────────── */
.slider {
appearance: none;
width: 100%;
height: 20px;
margin: 0;
background: none;
cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
height: 3px;
border-radius: var(--r-pill);
background: var(--fill-select);
}
.slider::-webkit-slider-thumb {
appearance: none;
width: 15px;
height: 15px;
margin-top: -6px;
border-radius: var(--r-pill);
background: #fff;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), var(--shadow-lift);
}
.slider::-moz-range-track {
height: 3px;
border-radius: var(--r-pill);
background: var(--fill-select);
}
.slider::-moz-range-progress {
height: 3px;
border-radius: var(--r-pill);
background: var(--accent);
}
.slider::-moz-range-thumb {
width: 15px;
height: 15px;
border: none;
border-radius: var(--r-pill);
background: #fff;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), var(--shadow-lift);
}
/* ── stepper: a number that nudges ───────────────────────── */
.stepper {
display: flex;
align-items: stretch;
width: fit-content;
border-radius: var(--r-md);
background: var(--fill-quiet);
}
.stepper input {
width: 56px;
height: 30px;
padding: 0 var(--s2);
text-align: center;
color: var(--fg);
font-variant-numeric: tabular-nums;
border-radius: var(--r-md) 0 0 var(--r-md);
appearance: textfield;
-moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.stepper input:focus {
outline: none;
box-shadow: 0 0 0 2px var(--accent-fill), inset 0 0 0 1px var(--accent);
}
.step-btn {
display: grid;
place-items: center;
width: 24px;
color: var(--fg-3);
border-left: 1px solid var(--hairline);
}
.step-btn:hover {
background: var(--fill-hover);
color: var(--fg);
}
.step-btn .ic {
width: 12px;
height: 12px;
}
/* ── tooltip: the answer to "what is this?" ──────────────────
Pure CSS on [data-tip]. Inverted, small, delayed 400ms in,
instant out. Shows on hover and on keyboard focus alike. */
[data-tip] {
position: relative;
}
[data-tip]::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 7px);
left: 50%;
translate: -50% 2px;
z-index: 90;
padding: 3px 8px;
border-radius: var(--r-sm);
background: var(--fg);
color: var(--bg);
font-size: var(--fs-0);
font-weight: 500;
letter-spacing: 0;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition:
opacity var(--dur-fast) var(--ease) 0ms,
translate var(--dur-fast) var(--ease) 0ms;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
opacity: 1;
translate: -50% 0;
transition-delay: 400ms, 400ms;
}
[data-tip][data-tip-side='bottom']::after {
bottom: auto;
top: calc(100% + 7px);
translate: -50% -2px;
}
[data-tip][data-tip-side='bottom']:hover::after,
[data-tip][data-tip-side='bottom']:focus-visible::after {
translate: -50% 0;
}
/* ── popover: a menu that holds content, not commands ────── */
.popover {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 60;
min-width: 240px;
max-width: 320px;
padding: var(--s4);
border-radius: var(--r-lg);
background: var(--bg);
box-shadow: var(--shadow-menu);
font-size: var(--fs-2);
color: var(--fg-2);
}
.popover-title {
font-size: var(--fs-2);
font-weight: 600;
color: var(--fg);
margin-bottom: var(--s1);
}
/* ── progress and spinner ────────────────────────────────────
Known length: bar. Unknown: spinner. Never both. */
.progress {
width: 100%;
height: 4px;
border-radius: var(--r-pill);
background: var(--fill-select);
overflow: hidden;
}
.progress > i {
display: block;
height: 100%;
border-radius: var(--r-pill);
background: var(--fg);
transition: width var(--dur-slow) var(--ease);
}
.progress[data-indeterminate] > i {
width: 40%;
animation: slide 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes slide {
from {
translate: -250% 0;
}
to {
translate: 350% 0;
}
}
.spinner {
width: 14px;
height: 14px;
flex: none;
border-radius: var(--r-pill);
border: 1.5px solid var(--fill-select);
border-top-color: var(--fg-3);
animation: spin 0.7s linear infinite;
}
@keyframes spin {
to {
rotate: 1turn;
}
}
/* ── skeleton: the shape of what is coming ───────────────── */
.skel {
border-radius: var(--r-sm);
background: var(--fill-hover);
animation: pulse 1.4s ease-in-out infinite;
}
.skel-text {
height: 12px;
}
.skel-circle {
border-radius: var(--r-pill);
}
@keyframes pulse {
50% {
opacity: 0.45;
}
}
/* ── banner: a message that stays until the cause is gone ───
Tone is carried by the dot, never by tinting the text. */
.banner {
display: flex;
align-items: baseline;
gap: var(--s3);
padding: var(--s3) var(--s4);
border-radius: var(--r-lg);
box-shadow: inset 0 0 0 1px var(--hairline);
font-size: var(--fs-2);
color: var(--fg-2);
}
.banner .dot {
translate: 0 -1px;
}
.banner b {
color: var(--fg);
font-weight: 600;
}
.banner-act {
margin-left: auto;
flex: none;
height: 22px;
padding: 0 var(--s2);
margin-block: -3px; /* the 22px hit area overhangs the text box, not the banner */
border-radius: var(--r-sm);
font-size: var(--fs-1);
font-weight: 600;
color: var(--fg);
white-space: nowrap;
transition: background var(--dur-fast) var(--ease);
}
.banner-act:hover {
background: var(--fill-hover);
}
.banner-act:active {
background: var(--fill-active);
}
.banner[data-tone='crit'] {
background: var(--crit-fill);
box-shadow: none;
}
.banner[data-tone='warn'] {
background: var(--warn-fill);
box-shadow: none;
}
.banner[data-tone='ok'] {
background: var(--ok-fill);
box-shadow: none;
}
/* ── alert: the confirm sheet, for the irreversible only ─── */
.alert {
width: 100%;
max-width: 300px;
padding: var(--s6) var(--s5) var(--s4);
text-align: center;
background: var(--bg);
border-radius: var(--r-lg);
box-shadow: var(--shadow-pop);
animation: pop 200ms var(--ease);
}
.alert-title {
font-size: var(--fs-2);
font-weight: 600;
margin-bottom: var(--s2);
}
.alert-msg {
font-size: var(--fs-1);
color: var(--fg-2);
line-height: 1.5;
margin-bottom: var(--s5);
}
.alert-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s2);
}
.alert-row .act-btn {
width: 100%;
justify-content: center;
text-align: center;
}
.alert-row .act-btn[data-role='danger'] {
background: var(--crit);
color: #fff;
}
.alert-row .act-btn[data-role='danger']:hover {
background: color-mix(in srgb, var(--crit) 85%, var(--bg));
}
/* ── tabs: sections of one thing, not navigation ─────────── */
.tabs {
display: flex;
gap: var(--s5);
box-shadow: inset 0 -1px 0 var(--hairline);
}
.tab {
position: relative;
height: 34px;
font-size: var(--fs-2);
font-weight: 500;
color: var(--fg-3);
white-space: nowrap;
}
.tab:hover {
color: var(--fg);
}
.tab[aria-selected='true'] {
color: var(--fg);
font-weight: 600;
}
.tab[aria-selected='true']::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
border-radius: 1px;
background: var(--fg);
}
.tab .count {
margin-left: var(--s1);
}
/* ── breadcrumbs: the path back out ──────────────────────── */
.crumbs {
display: flex;
align-items: center;
gap: var(--s2);
font-size: var(--fs-1);
white-space: nowrap;
}
.crumbs a {
color: var(--fg-3);
text-decoration: none;
}
.crumbs a:hover {
color: var(--fg);
text-decoration: none;
}
.crumbs .crumb-sep {
color: var(--fg-4);
user-select: none;
}
.crumbs [aria-current='page'] {
color: var(--fg);
font-weight: 500;
}
/* ── pagination: prev, next, and where you are ───────────── */
.pager {
display: flex;
align-items: center;
gap: var(--s2);
}
.pager-info {
font-size: var(--fs-1);
color: var(--fg-3);
font-variant-numeric: tabular-nums;
padding: 0 var(--s2);
}
/* ── disclosure: native details, quiet chevron ───────────── */
.disclosure {
border-top: 1px solid var(--hairline);
}
.disclosure:last-of-type {
border-bottom: 1px solid var(--hairline);
}
.disclosure > summary {
display: flex;
align-items: center;
gap: var(--s2);
height: 38px;
font-size: var(--fs-2);
font-weight: 500;
color: var(--fg);
cursor: pointer;
user-select: none;
list-style: none;
}
.disclosure > summary::-webkit-details-marker {
display: none;
}
.disclosure > summary .ic {
width: 13px;
height: 13px;
color: var(--fg-4);
transition: transform var(--dur) var(--ease);
}
.disclosure[open] > summary .ic {
transform: rotate(90deg);
}
.disclosure > summary small {
margin-left: auto;
font-size: var(--fs-1);
color: var(--fg-4);
}
.disclosure-body {
padding: 0 0 var(--s4) calc(13px + var(--s2));
font-size: var(--fs-2);
color: var(--fg-2);
line-height: 1.55;
}
/* ── card: a bounded surface, hairline not shadow ────────── */
.card {
padding: var(--s4) var(--s5);
border-radius: var(--r-lg);
background: var(--bg);
box-shadow: inset 0 0 0 1px var(--hairline);
}
a.card,
.card[data-interactive] {
display: block;
color: inherit;
text-decoration: none;
transition: box-shadow var(--dur-fast) var(--ease);
}
a.card:hover,
.card[data-interactive]:hover {
box-shadow: inset 0 0 0 1px var(--hairline-strong);
text-decoration: none;
}
.card-title {
font-size: var(--fs-2);
font-weight: 600;
color: var(--fg);
}
.card-sub {
font-size: var(--fs-1);
color: var(--fg-3);
margin-top: 2px;
}
/* ── dividers ────────────────────────────────────────────── */
.rule {
height: 1px;
border: none;
margin: var(--s4) 0;
background: var(--hairline);
}
.rule-label {
display: flex;
align-items: center;
gap: var(--s3);
margin: var(--s4) 0;
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-4);
white-space: nowrap;
}
.rule-label::before,
.rule-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--hairline);
}
/* ── avatar: initials, no colour lottery ─────────────────── */
.avatar {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
flex: none;
border-radius: var(--r-pill);
background: var(--fill-select);
color: var(--fg-2);
font-size: var(--fs-0);
font-weight: 600;
letter-spacing: 0;
user-select: none;
}
.avatar[data-size='lg'] {
width: 28px;
height: 28px;
}
.avatar[data-size='sm'] {
width: 20px;
height: 20px;
font-size: 9px;
}
.avatar[data-shape='square'] {
border-radius: var(--r-sm);
}
.avatar-stack {
display: inline-flex;
}
.avatar-stack .avatar {
box-shadow: 0 0 0 2px var(--bg);
}
.avatar-stack .avatar + .avatar {
margin-left: -6px;
}
/* ── counter: a number worn as a badge ───────────────────── */
.count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: var(--r-pill);
background: var(--fill-select);
color: var(--fg-2);
font-size: var(--fs-0);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ── tag input: pills in a field ─────────────────────────── */
.tag-field {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s1);
min-height: 30px;
padding: 3px var(--s2);
border-radius: var(--r-md);
background: var(--fill-quiet);
cursor: text;
transition: box-shadow var(--dur) var(--ease);
}
.tag-field:focus-within {
box-shadow: 0 0 0 2px var(--accent-fill), inset 0 0 0 1px var(--accent);
}
.tag-field input {
flex: 1;
min-width: 60px;
height: 22px;
color: var(--fg);
}
.tag-field input:focus {
outline: none;
}
.tag {
display: inline-flex;
align-items: center;
gap: 3px;
height: 22px;
padding: 0 3px 0 var(--s2);
border-radius: var(--r-sm);
background: var(--fill-select);
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg);
white-space: nowrap;
}
.tag-x {
display: grid;
place-items: center;
width: 16px;
height: 16px;
border-radius: var(--r-sm);
color: var(--fg-4);
}
.tag-x:hover {
color: var(--fg);
background: var(--fill-active);
}
.tag-x .ic {
width: 10px;
height: 10px;
}
/* ── file drop ───────────────────────────────────────────── */
.drop {
display: grid;
place-items: center;
gap: var(--s1);
padding: var(--s6) var(--s4);
border-radius: var(--r-lg);
background: var(--fill-quiet);
/* The one dashed line in the kit: the affordance is the point. */
background-image: none;
outline: 1.5px dashed var(--hairline-loud);
outline-offset: -6px;
text-align: center;
font-size: var(--fs-1);
color: var(--fg-3);
cursor: pointer;
transition:
background var(--dur-fast) var(--ease),
outline-color var(--dur-fast) var(--ease);
}
.drop b {
font-size: var(--fs-2);
font-weight: 500;
color: var(--fg-2);
}
.drop:hover,
.drop[data-over='true'] {
background: var(--fill-hover);
outline-color: var(--accent);
}
.drop:hover b,
.drop[data-over='true'] b {
color: var(--fg);
}
/* ── code block ──────────────────────────────────────────── */
code.inline {
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0;
padding: 1px 5px;
border-radius: var(--r-sm);
background: var(--fill-quiet);
color: var(--fg);
}
.codeblock {
position: relative;
border-radius: var(--r-lg);
background: var(--field);
box-shadow: inset 0 0 0 1px var(--hairline);
}
.codeblock pre {
margin: 0;
padding: var(--s4);
overflow-x: auto;
font-family: var(--mono);
font-size: 0.75rem;
line-height: 1.6;
letter-spacing: 0;
color: var(--fg);
}
.codeblock .code-copy {
position: absolute;
top: var(--s2);
right: var(--s2);
opacity: 0;
}
.codeblock:hover .code-copy,
.codeblock .code-copy:focus-visible {
opacity: 1;
}
/* ── inline links inside prose ───────────────────────────── */
.prose a {
color: var(--fg);
text-decoration: underline;
text-decoration-color: var(--fg-4);
text-underline-offset: 2px;
transition: text-decoration-color var(--dur-fast) var(--ease);
}
.prose a:hover {
text-decoration-color: var(--fg);
}
/* ── skip link: invisible until it matters ───────────────── */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.skip-link {
position: fixed;
top: var(--s2);
left: var(--s2);
z-index: 100;
height: 28px;
display: flex;
align-items: center;
padding: 0 var(--s3);
border-radius: var(--r-md);
background: var(--fg);
color: var(--bg);
font-size: var(--fs-1);
font-weight: 600;
translate: 0 calc(-100% - var(--s4));
transition: translate var(--dur-fast) var(--ease);
}
.skip-link:focus-visible {
translate: 0 0;
}
/* ── drawer: an inspector that floats ────────────────────── */
.drawer-scrim {
position: fixed;
inset: 0;
z-index: 60;
background: var(--scrim);
animation: fade 140ms var(--ease);
}
.drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 61;
width: min(360px, 90vw);
display: flex;
flex-direction: column;
background: var(--bg);
box-shadow: var(--shadow-pop);
animation: drawerin var(--dur-slow) var(--ease);
}
@keyframes drawerin {
from {
translate: 24px 0;
opacity: 0;
}
}
/* ── tree: hierarchy without lines everywhere ────────────── */
.tree {
font-size: var(--fs-2);
}
.tree-item {
display: flex;
align-items: center;
gap: var(--s2);
height: 28px;
padding: 0 var(--s2);
border-radius: var(--r-md);
color: var(--fg-2);
cursor: pointer;
white-space: nowrap;
}
.tree-item:hover {
background: var(--fill-hover);
color: var(--fg);
}
.tree-item[aria-selected='true'] {
background: var(--fill-select);
color: var(--fg);
font-weight: 500;
}
.tree-item .ic {
width: 14px;
height: 14px;
color: var(--fg-3);
flex: none;
}
.tree-item .tw {
width: 13px;
height: 13px;
color: var(--fg-4);
flex: none;
transition: transform var(--dur) var(--ease);
}
.tree-item[aria-expanded='true'] .tw {
transform: rotate(90deg);
}
.tree-group {
padding-left: var(--s5);
position: relative;
}
.tree-group::before {
content: '';
position: absolute;
left: calc(var(--s2) + 6px);
top: 2px;
bottom: 2px;
width: 1px;
background: var(--hairline);
}
/* ── network: nodes, links, circuits ─────────────────────────
A connection is a story told left to right: the client, some
hops, the internet. Nodes are quiet tiles; the line between
them carries the state. Line vocabulary — solid: a direct
link; dashed: relayed; moving dashes: live traffic; colour
stays in the dots (rule 4). One row is one path; a topology
with no reading order gets a map (.net-map), not a row. */
.net {
display: flex;
align-items: flex-start;
width: 100%;
}
.net-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
flex: none;
min-width: 76px;
padding-inline: var(--s1);
text-align: center;
}
.net-tile {
position: relative;
display: grid;
place-items: center;
width: 32px;
height: 32px;
margin-bottom: 4px;
border-radius: var(--r-md);
background: var(--bg);
box-shadow: inset 0 0 0 1px var(--hairline-strong);
color: var(--fg-2);
}
.net-tile .ic {
width: 16px;
height: 16px;
}
/* The status dot sits on the tile's shoulder, ringed in tile
colour so it stays legible over anything behind it. */
.net-tile .dot {
position: absolute;
top: -2px;
right: -2px;
box-shadow: 0 0 0 2px var(--bg);
}
.net-node b {
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg);
white-space: nowrap;
}
.net-node small {
font-size: var(--fs-0);
color: var(--fg-3);
white-space: nowrap;
}
/* This device: a stronger ring, not a colour. */
.net-node.self .net-tile {
box-shadow: inset 0 0 0 1.5px var(--hairline-loud);
}
/* Offline: the shape stays, the ink drops — the disabled rule. */
.net-node.off .net-tile,
.net-node.off b {
opacity: var(--disabled);
}
.net-link {
flex: 1 1 0;
min-width: 36px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding-top: 14.5px; /* the line meets the 32px tile at its waist */
}
/* Every link keeps the same 3px band so the waist never moves: a direct
link draws one hairline inside it, everything else draws round dots. */
.net-link::before {
content: '';
width: 100%;
height: 3px;
background: linear-gradient(var(--hairline-loud), var(--hairline-loud)) 0 50% / 100% 1px repeat-x;
}
.net-link b {
font-size: var(--fs-0);
font-weight: 500;
color: var(--fg-3);
white-space: nowrap;
}
.net-link i {
font-style: normal;
font-family: var(--mono);
font-size: var(--fs-0);
font-variant-numeric: tabular-nums lining-nums;
color: var(--fg-4);
white-space: nowrap;
}
.net-link[data-line='relay']::before {
background: radial-gradient(circle at 50% 50%, var(--fg-4) 1px, transparent 1.3px) 0 50% / 7px 3px repeat-x;
}
.net-link[data-line='flow']::before {
background: radial-gradient(circle at 50% 50%, var(--fg-2) 1px, transparent 1.3px) 0 50% / 7px 3px repeat-x;
animation: net-flow 0.7s linear infinite;
}
/* Dead link: the faintest line in the kit — the row itself is the
fact that a route should exist. */
.net-link[data-line='down']::before {
background: radial-gradient(circle at 50% 50%, var(--hairline-loud) 1px, transparent 1.3px) 0 50% / 10px 3px repeat-x;
}
@keyframes net-flow {
to {
background-position: 7px 50%;
}
}
/* ── circuit: a chain that is the point, stacked ─────────────
Tor-style: role, name, place. The rail reuses the kit's 6px
dot; tones follow the same data-tone vocabulary as rows. */
.circuit {
display: flex;
flex-direction: column;
}
.hop {
position: relative;
display: grid;
grid-template-columns: 14px 72px minmax(0, 1fr) auto;
column-gap: var(--s3);
align-items: center;
min-height: 28px;
}
.hop .dot {
justify-self: center;
}
.hop:not(:last-child)::after {
content: '';
position: absolute;
left: 6.5px;
top: calc(50% + 6px);
height: calc(100% - 12px);
width: 1px;
background: var(--hairline-strong);
}
.hop b {
font-size: var(--fs-1);
font-weight: 500;
color: var(--fg-3);
}
.hop .hop-name {
font-size: var(--fs-1);
font-family: var(--mono);
letter-spacing: 0;
color: var(--fg);
}
.hop small {
font-size: var(--fs-1);
color: var(--fg-3);
justify-self: end;
}
/* ── net-map: a mesh drawn as a map ──────────────────────────
Peers are ink dots, links are hairlines, live traffic moves.
Same line vocabulary as .net-link, same data-line names. */
.net-map {
display: block;
width: 100%;
max-width: 520px; /* 1:1 with the viewBox — the type must not scale */
height: auto;
margin-inline: auto;
}
.net-map .edge {
stroke: var(--hairline-loud);
stroke-width: 1;
}
/* Same trade as .net-link: dots, not dashes. Zero-length dashes with a
round cap are circles, so one rule covers relay and live traffic. */
.net-map .edge[data-line='relay'] {
stroke: var(--fg-4);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 0 7;
}
.net-map .edge[data-line='flow'] {
stroke: var(--fg-2);
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 0 7;
animation: net-flow-map 0.7s linear infinite;
}
.net-map .peer circle {
fill: var(--fg-2);
}
.net-map .peer.off circle {
fill: none;
stroke: var(--fg-4);
stroke-width: 1.5;
}
.net-map .peer text {
fill: var(--fg-2);
font-family: var(--font);
font-size: 11px;
font-weight: 500;
}
.net-map .peer .sub {
fill: var(--fg-4);
font-weight: 400;
}
@keyframes net-flow-map {
to {
stroke-dashoffset: -7;
}
}
@media (prefers-reduced-motion: reduce) {
.net-link[data-line='flow']::before,
.net-map .edge[data-line='flow'] {
animation: none;
}
}
/* ── responsive: the shell folds, the measure holds ──────── */
@media (max-width: 900px) {
.window,
.window[data-inspector='true'] {
grid-template-columns: 0px minmax(0, 1fr) 0px;
}
.table-wrap {
width: 100%;
margin: 0;
border-radius: 0;
padding-inline: 0;
}
.thead {
display: none;
}
/* Below the fold a row becomes two lines, not a squeezed grid. */
.row {
grid-template-columns: minmax(0, 1fr) auto;
height: auto;
padding: var(--s2) var(--s4);
row-gap: 2px;
gap: var(--s3);
}
}
/* Small screens: the toolbar keeps the search field and the one primary
action. Optional switches step aside instead of overflowing. */
@media (max-width: 520px) {
.toolbar {
min-width: 0;
}
.toolbar > .segmented {
display: none;
}
.search {
min-width: 0;
flex: 1;
}
.net-node {
min-width: 56px;
}
}