/*!
* Platform — the panel's UI kit
*
* Tokens, primitives and layout that any product on this platform can use: an
* uptime monitor, a mailing tool, whatever comes next. Nothing here may name
* what one of them is about; the product stylesheet that loads after this one
* does that.
*
* Every class carries the `ui-` prefix. The panel shares a document with
* embedded widgets and third-party plugin markup, and `.card` and `.btn` are
* the names everybody picks. State hooks (`is-*`) keep their bare names: they
* are written by the scripts and read as state, not as ownership.
*
* Single file, no build step. Tokens first, then layout, then components.
* Light and dark are both first-class: the panel follows the OS unless the
* operator forces a theme with the toggle (data-theme on ).
*/
/* ===================================================================== *
* Tokens
* ===================================================================== */
:root {
--bg: #f6f7f9;
--surface: #ffffff;
--surface-2: #fbfbfd;
--surface-3: #f0f2f5;
--border: #e3e6eb;
--border-strong: #cbd1da;
--text: #16181d;
--text-muted: #5c6472;
--text-faint: #8a92a1;
--primary: #2f5bff;
--primary-hover: #2449d6;
--primary-soft: #eaefff;
--primary-text: #ffffff;
--success: #12855a;
--success-soft: #e3f5ec;
--warning: #b0700d;
--warning-soft: #fdf3e0;
--danger: #c02b3a;
--danger-soft: #fdeced;
--info: #1f6fb0;
--info-soft: #e7f2fb;
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 18px;
--shadow-sm: 0 1px 2px rgba(16, 20, 30, .06);
--shadow: 0 1px 3px rgba(16, 20, 30, .07), 0 8px 24px -10px rgba(16, 20, 30, .18);
--shadow-lg: 0 2px 6px rgba(16, 20, 30, .08), 0 24px 48px -16px rgba(16, 20, 30, .28);
/*
* The spacing scale, in fours. A screen asking for 6 or 14 is telling
* you the component under it is missing a rule; it is not the scale
* being too coarse.
*/
--ui-space-1: 4px;
--ui-space-2: 8px;
--ui-space-3: 12px;
--ui-space-4: 16px;
--ui-space-5: 24px;
--sidebar-width: 264px;
--ease: cubic-bezier(.22, .8, .34, 1);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"], :root:not([data-theme]) {
--bg: #101216;
--surface: #171a21;
--surface-2: #1b1f27;
--surface-3: #232833;
--border: #272c36;
--border-strong: #39404d;
--text: #eef0f4;
--text-muted: #a7b0be;
--text-faint: #79828f;
--primary: #6f8cff;
--primary-hover: #8aa1ff;
--primary-soft: #1e2436;
--primary-text: #0c0f16;
--success: #3ecf8e;
--success-soft: #14261f;
--warning: #e0a944;
--warning-soft: #2a2114;
--danger: #f2707c;
--danger-soft: #2c1719;
--info: #63b3ed;
--info-soft: #142330;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
--shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 10px 28px -12px rgba(0, 0, 0, .7);
--shadow-lg: 0 2px 8px rgba(0, 0, 0, .55), 0 28px 56px -20px rgba(0, 0, 0, .8);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #101216;
--surface: #171a21;
--surface-2: #1b1f27;
--surface-3: #232833;
--border: #272c36;
--border-strong: #39404d;
--text: #eef0f4;
--text-muted: #a7b0be;
--text-faint: #79828f;
--primary: #6f8cff;
--primary-hover: #8aa1ff;
--primary-soft: #1e2436;
--primary-text: #0c0f16;
--success: #3ecf8e;
--success-soft: #14261f;
--warning: #e0a944;
--warning-soft: #2a2114;
--danger: #f2707c;
--danger-soft: #2c1719;
--info: #63b3ed;
--info-soft: #142330;
color-scheme: dark;
}
/* ===================================================================== *
* Base
* ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font);
font-size: 15px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, p, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
code, pre, .ui-mono { font-family: var(--mono); font-size: .88em; }
.ui-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.ui-sr-only {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ui-skip-link {
position: absolute; left: -9999px; top: 8px; z-index: 100;
padding: 10px 16px; background: var(--primary); color: var(--primary-text);
border-radius: var(--radius-sm);
}
.ui-skip-link:focus { left: 8px; }
/* ===================================================================== *
* App shell
* ===================================================================== */
.ui-app { display: flex; min-height: 100vh; }
.ui-sidebar {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
width: var(--sidebar-width);
display: flex;
flex-direction: column;
background: var(--surface);
border-inline-end: 1px solid var(--border);
z-index: 40;
transition: transform .26s var(--ease);
}
.ui-sidebar__brand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 18px 18px 14px;
}
.ui-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; }
.ui-brand:hover { text-decoration: none; }
.ui-brand__mark { display: inline-flex; width: 30px; height: 30px; color: var(--primary); }
.ui-brand__mark svg { width: 100%; height: 100%; }
.ui-brand__text { font-size: 16px; letter-spacing: -.01em; }
.ui-sidebar__close { display: none; font-size: 24px; line-height: 1; color: var(--text-faint); padding: 4px 8px; }
.ui-sidebar__nav {
flex: 1 1 auto;
overflow-y: auto;
padding: 4px 12px 20px;
display: flex;
flex-direction: column;
gap: 2px;
}
.ui-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 14px;
font-weight: 500;
transition: background-color .15s var(--ease), color .15s var(--ease);
}
.ui-nav-item:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.ui-nav-item.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.ui-nav-item.is-active .ui-icon { color: var(--primary); }
.ui-nav-item--sub { padding-inline-start: 14px; font-size: 13.5px; }
/* A collapsed group in the menu: shut to begin with, open when the current
page is one of its own. */
.ui-nav-details { display: flex; flex-direction: column; gap: 2px; }
.ui-nav-details > summary { cursor: pointer; list-style: none; }
.ui-nav-details > summary::-webkit-details-marker { display: none; }
.ui-nav-details > summary::after {
content: '';
margin-inline-start: auto;
width: 6px; height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
opacity: .55;
}
.ui-nav-details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ui-nav-group { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.ui-nav-group__label {
padding: 0 12px 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-faint);
}
/*
* A suite's name over its own sections, inside the open site's menu.
*
* Quieter than a top-level group label and separated from what came before:
* with several suites switched on the menu is a stack of products, and the
* thing a reader needs is the line where one ends and the next begins.
*/
.ui-nav-group__label--nested {
margin-top: var(--ui-space-3);
padding-inline-start: 0;
font-size: 10.5px;
color: var(--text-faint);
}
.ui-nav-group__label--nested:first-child { margin-top: 0; }
/* A group label with one control beside it — "add" next to the list it adds
to, rather than a row of its own at the bottom nobody scrolls to. */
.ui-nav-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-2); }
.ui-nav-group__head .ui-nav-group__label { flex: 1 1 auto; min-width: 0; }
.ui-nav-group__action {
flex: 0 0 auto;
display: inline-flex;
padding: var(--ui-space-1);
margin-bottom: var(--ui-space-1);
border-radius: var(--radius-sm);
color: var(--text-faint);
}
.ui-nav-group__action:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
/*
* A name in the menu is whatever its owner called it, and some of them are
* long. Truncating is the only honest option in a fixed-width rail: wrapping
* makes one entry three rows tall and pushes the rest off the fold.
*/
.ui-nav-item__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*
* The row you are inside, as opposed to the page you are on. Both are in the
* menu at once — the site, and the screen within it — and giving them the same
* treatment says they are the same kind of thing.
*/
.ui-nav-item--current { color: var(--text); font-weight: 650; }
.ui-nav-item--muted { color: var(--text-faint); font-size: 13px; }
/* The open site's own screens, indented under it so the menu has the shape
the URL does. */
.ui-nav-nested {
display: flex;
flex-direction: column;
gap: 2px;
margin: 2px 0 var(--ui-space-2);
padding-inline-start: var(--ui-space-3);
border-inline-start: 1px solid var(--border);
margin-inline-start: var(--ui-space-4);
}
/* Nested entries directly under a group heading, without the indent rail. */
.ui-nav-nested--flush { margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; }
/* A group heading that collapses its group. The label keeps its look; the
chevron says it moves. */
.ui-nav-group__toggle {
display: flex;
align-items: center;
width: 100%;
padding: 0;
text-align: start;
color: var(--text-faint);
cursor: pointer;
}
.ui-nav-group__toggle .ui-nav-group__label { flex: 1 1 auto; }
.ui-nav-group__toggle::after {
content: '';
width: 6px; height: 6px;
margin: 0 12px 6px 0;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
opacity: .55;
}
.ui-nav-group__toggle[aria-expanded="false"]::after { transform: rotate(-45deg); }
.ui-nav-group__toggle:hover { color: var(--text); }
.ui-nav-group__panel { display: flex; flex-direction: column; gap: 2px; }
.ui-nav-group__panel[hidden], .ui-nav-nested[hidden] { display: none; }
/* An entry that leaves the current area for another one. */
.ui-nav-item--switch { border: 1px dashed var(--border-strong); color: var(--text); }
/* Account and site context, at the top of the rail. */
.ui-sidebar__context { display: flex; flex-direction: column; gap: var(--ui-space-3); margin-top: var(--ui-space-1); }
/* ===================================================================== *
* Switcher — one current item, the others in a searchable popover
* ===================================================================== */
.ui-switcher { position: relative; }
.ui-switcher__trigger {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--text);
}
.ui-switcher__trigger:hover { border-color: var(--border-strong); text-decoration: none; }
.ui-switcher__trigger[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.ui-switcher__trigger > .ui-icon { flex: 0 0 auto; color: var(--text-faint); margin-inline-start: auto; }
.ui-switcher__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; text-align: start; }
.ui-switcher__name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-switcher__name--placeholder { color: var(--text-muted); font-weight: 500; }
.ui-switcher__meta { font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-switcher__panel {
position: absolute;
inset-inline: 0;
top: calc(100% + var(--ui-space-1));
z-index: 50;
display: flex;
flex-direction: column;
max-height: min(420px, 70vh);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.ui-switcher__panel[hidden] { display: none; }
.ui-switcher__search {
display: flex;
align-items: center;
gap: var(--ui-space-2);
padding: var(--ui-space-2) var(--ui-space-3);
border-bottom: 1px solid var(--border);
color: var(--text-faint);
}
.ui-switcher__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.ui-switcher__list { list-style: none; margin: 0; padding: var(--ui-space-1); overflow-y: auto; }
.ui-switcher__list li[hidden] { display: none; }
.ui-switcher__option {
display: flex;
align-items: center;
gap: var(--ui-space-2);
width: 100%;
padding: 7px 8px;
border-radius: 6px;
color: var(--text);
font-size: 13.5px;
text-align: start;
cursor: pointer;
}
.ui-switcher__option:hover, .ui-switcher__option:focus-visible { background: var(--surface-3); text-decoration: none; outline: none; }
.ui-switcher__option.is-active { background: var(--primary-soft); }
.ui-switcher__check { display: inline-flex; width: 16px; flex: 0 0 16px; color: var(--primary); }
.ui-switcher__empty { padding: var(--ui-space-3); font-size: 13px; color: var(--text-faint); }
.ui-switcher__empty[hidden] { display: none; }
.ui-switcher__footer { display: flex; flex-direction: column; padding: var(--ui-space-1); border-top: 1px solid var(--border); }
.ui-switcher__footer .ui-switcher__option { color: var(--text-muted); }
/* ===================================================================== *
* Breadcrumbs
* ===================================================================== */
.ui-breadcrumbs { min-width: 0; }
.ui-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-1); margin: 0 0 2px; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-faint); }
.ui-breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--ui-space-1); min-width: 0; }
.ui-breadcrumbs__item + .ui-breadcrumbs__item::before { content: '/'; opacity: .6; }
.ui-breadcrumbs__item a { color: var(--text-muted); }
.ui-breadcrumbs__item [aria-current] { color: var(--text-muted); }
.ui-brand__sub { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-faint); }
.ui-sidebar__footer {
flex: 0 0 auto;
padding: 12px;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 8px;
}
.ui-user-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-sm);
color: var(--text);
}
.ui-user-chip:hover { background: var(--surface-3); text-decoration: none; }
/*
* A name reduced to its first letter, for rows that are told apart by which
* one they are rather than by what kind of thing they are: people, sites,
* accounts. One rule, because two of these drift into two different circles.
*/
.ui-avatar, .ui-user-chip__avatar {
flex: 0 0 auto;
display: grid; place-items: center;
width: 32px; height: 32px; border-radius: 50%;
background: var(--primary); color: var(--primary-text);
font-weight: 700; font-size: 14px;
}
/*
* Beside a label rather than instead of one: a square reads as a mark, a
* circle reads as a person, and a list of sites is not a list of people.
*/
.ui-avatar--sm {
width: 22px; height: 22px;
border-radius: 6px;
font-size: 11px; font-weight: 650;
background: var(--surface-3); color: var(--text-muted);
}
.ui-nav-item.is-active .ui-avatar--sm,
.ui-nav-item--current .ui-avatar--sm { background: var(--primary); color: var(--primary-text); }
.ui-user-chip__meta { display: flex; flex-direction: column; min-width: 0; }
.ui-user-chip__name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-user-chip__role { font-size: 11.5px; color: var(--text-faint); text-transform: capitalize; }
.ui-sidebar-scrim {
position: fixed; inset: 0; z-index: 35;
background: rgba(10, 12, 18, .5);
backdrop-filter: blur(2px);
}
.ui-shell {
flex: 1 1 auto;
min-width: 0;
margin-inline-start: var(--sidebar-width);
display: flex;
flex-direction: column;
}
.ui-topbar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: 16px;
padding: 16px 28px;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.ui-topbar__menu { display: none; padding: 6px; border-radius: var(--radius-sm); color: var(--text-muted); }
.ui-topbar__title { flex: 1 1 auto; min-width: 0; }
.ui-topbar__title h1 { font-size: 20px; font-weight: 680; letter-spacing: -.015em; }
.ui-topbar__title p { font-size: 13px; color: var(--text-muted); }
.ui-topbar__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
/*
* Fills the shell. The readable-width cap applies only to prose-heavy
* screens that opt in with .ui-main--narrow: tables, long registers and
* anything with a live preview want every pixel the viewport can give them.
*/
.ui-main {
flex: 1 1 auto;
width: 100%;
padding: 24px clamp(16px, 2vw, 32px) 48px;
display: flex;
flex-direction: column;
gap: 22px;
}
/*
* A heading a screen carries itself, when what it says depends on the row
* being shown and the topbar only knows the route.
*/
.ui-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ui-space-4);
flex-wrap: wrap;
}
.ui-page-head__title { font-size: 20px; font-weight: 680; letter-spacing: -.015em; }
.ui-page-head__text { font-size: 13px; color: var(--text-muted); max-width: 68ch; }
.ui-main--narrow {
max-width: 1120px;
margin-inline: auto;
}
.ui-footer {
padding: 18px 28px 28px;
font-size: 12.5px;
color: var(--text-faint);
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* ===================================================================== *
* Buttons
* ===================================================================== */
.ui-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
padding: 8px 16px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.ui-btn:hover { text-decoration: none; }
.ui-btn:disabled, .ui-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ui-btn--primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
.ui-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.ui-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.ui-btn--secondary:hover { background: var(--surface-3); }
.ui-btn--ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.ui-btn--ghost:hover { color: var(--text); border-color: var(--border-strong); }
.ui-btn--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.ui-btn--danger:hover { background: var(--danger); color: #fff; }
.ui-btn--sm { min-height: 32px; padding: 5px 12px; font-size: 12.5px; }
.ui-btn--lg { min-height: 46px; padding: 12px 22px; font-size: 15px; }
.ui-btn--block { width: 100%; }
.ui-btn--icon { padding: 8px; min-width: 38px; }
.ui-btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* ===================================================================== *
* Cards, sections
* ===================================================================== */
.ui-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.ui-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.ui-card__title { font-size: 15px; font-weight: 650; letter-spacing: -.005em; }
.ui-card__subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.ui-card__body { padding: 20px; }
.ui-card__body--flush { padding: 0; }
/* A row inside a flush body: the padding the body gave up, per item. */
.ui-row { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.ui-row:last-child { border-bottom: 0; }
/* A card that sits inside another one: recessed, and padded on its own. */
.ui-card--inset { padding: var(--ui-space-4); background: var(--surface-2); }
.ui-card__footer {
padding: 14px 20px;
border-top: 1px solid var(--border);
background: var(--surface-2);
border-radius: 0 0 var(--radius) var(--radius);
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.ui-grid { display: grid; gap: 18px; }
.ui-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ui-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ui-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ui-grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }
.ui-stack { display: flex; flex-direction: column; gap: 14px; }
.ui-stack--sm { gap: 8px; }
.ui-stack--lg { gap: 24px; }
.ui-section-title {
font-size: 12px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-faint);
}
/*
* A label and the control that governs the band under it. The point is the
* scope: a control inside a card's header belongs to that card, and one put
* here says it belongs to everything below — which is the difference between
* a filter and a lie about what a filter does.
*/
.ui-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--ui-space-4);
flex-wrap: wrap;
}
.ui-section-head__text { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
/* ===================================================================== *
* Stats
* ===================================================================== */
.ui-stat {
padding: 18px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.ui-stat__label { font-size: 12.5px; color: var(--text-muted); font-weight: 550; }
.ui-stat__value { font-size: 27px; font-weight: 690; letter-spacing: -.02em; margin-top: 4px; line-height: 1.15; }
.ui-stat__meta { font-size: 12.5px; color: var(--text-faint); margin-top: 4px; }
/* Three or four to a row rather than one: the number has less room. */
.ui-stat__value--sm { font-size: 20px; }
/*
* A card in the stats row whose body is buttons. It is not a value, and
* styling it as one left the buttons sitting on a number's line-height.
*/
.ui-stat__actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-top: var(--ui-space-2); }
.ui-stat__meta strong { color: var(--text-muted); }
.ui-meter {
height: 6px;
border-radius: 999px;
background: var(--surface-3);
overflow: hidden;
margin-top: 10px;
display: flex;
}
/*
* Each part's share arrives from the data, so the markup carries it as a
* custom property and the width stays a rule in here. The scripts set the
* same property when a bar fills as work proceeds.
*/
.ui-meter__part { height: 100%; width: var(--ui-part, 0); }
.ui-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.ui-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.ui-legend__dot { width: 8px; height: 8px; border-radius: 2px; }
/* ===================================================================== *
* Chart (inline SVG, no library)
* ===================================================================== */
.ui-chart { width: 100%; height: auto; display: block; overflow: visible; }
.ui-chart__grid { stroke: var(--border); stroke-width: 1; }
.ui-chart__axis { fill: var(--text-faint); font-size: 10px; }
/* ===================================================================== *
* Tables
* ===================================================================== */
.ui-table-wrap { overflow-x: auto; }
/*
* File names, one per line, in the face they are written in. Long paths
* wrap at the separator rather than running the card wide.
*/
.ui-file-list {
display: flex;
flex-direction: column;
gap: var(--ui-space-1);
font-family: var(--mono);
font-size: 12.5px;
color: var(--text-muted);
word-break: break-all;
}
.ui-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ui-table th, .ui-table td { padding: 11px 16px; text-align: start; vertical-align: middle; }
.ui-table thead th {
position: sticky; top: 0;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--text-faint);
white-space: nowrap;
}
.ui-table tbody tr { border-bottom: 1px solid var(--border); }
.ui-table tbody tr:last-child { border-bottom: 0; }
.ui-table tbody tr:hover { background: var(--surface-2); }
.ui-table td.is-numeric, .ui-table th.is-numeric { text-align: end; font-variant-numeric: tabular-nums; }
.ui-table .ui-cell-muted { color: var(--text-muted); }
.ui-table .ui-cell-nowrap { white-space: nowrap; }
.ui-empty {
padding: 44px 24px;
text-align: center;
color: var(--text-muted);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.ui-empty .ui-icon { width: 32px; height: 32px; color: var(--text-faint); }
.ui-empty h3 { font-size: 15px; color: var(--text); font-weight: 650; }
.ui-empty p { font-size: 13.5px; max-width: 44ch; }
/* ===================================================================== *
* Badges, pills
* ===================================================================== */
.ui-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 650;
white-space: nowrap;
background: var(--surface-3);
color: var(--text-muted);
}
.ui-badge--success { background: var(--success-soft); color: var(--success); }
.ui-badge--warning { background: var(--warning-soft); color: var(--warning); }
.ui-badge--danger { background: var(--danger-soft); color: var(--danger); }
.ui-badge--info { background: var(--info-soft); color: var(--info); }
.ui-badge--primary { background: var(--primary-soft); color: var(--primary); }
.ui-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12px;
color: var(--text-muted);
background: var(--surface);
}
/*
* A chip whose number has met its ceiling.
*
* Coloured rather than merely bold: the reader is running an eye down a row
* of chips for the one that is about to stop them, and weight alone does
* not survive being read that quickly.
*/
.ui-chip--warning {
border-color: var(--warning);
background: var(--warning-soft);
color: var(--warning);
}
.ui-key--lg { font-size: 14px; }
.ui-key {
font-family: var(--mono);
font-size: 12.5px;
background: var(--surface-3);
padding: 3px 8px;
border-radius: 6px;
word-break: break-all;
}
/* ===================================================================== *
* Alerts
* ===================================================================== */
.ui-flash-stack { display: flex; flex-direction: column; gap: 10px; }
.ui-alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 16px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
font-size: 13.5px;
}
.ui-alert p { flex: 1 1 auto; min-width: 0; }
.ui-alert__icon { display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.ui-alert__close { flex: 0 0 auto; font-size: 20px; line-height: 1; opacity: .6; padding: 0 4px; }
.ui-alert__close:hover { opacity: 1; }
.ui-alert--success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.ui-alert--error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.ui-alert--warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.ui-alert--info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
/* ===================================================================== *
* Forms
* ===================================================================== */
.ui-field { display: flex; flex-direction: column; gap: 6px; }
.ui-field__label { font-size: 13px; font-weight: 600; }
.ui-field__hint { font-size: 12.5px; color: var(--text-muted); }
.ui-field__error { font-size: 12.5px; color: var(--danger); font-weight: 550; }
.ui-input, .ui-select, .ui-textarea {
width: 100%;
padding: 9px 12px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
font-size: 14px;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--text-faint); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.ui-input[aria-invalid="true"], .ui-select[aria-invalid="true"] { border-color: var(--danger); }
.ui-textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.ui-input--mono { font-family: var(--mono); font-size: 13px; }
.ui-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a92a1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
padding-inline-end: 34px;
}
/* File fields.
*
* The browser draws the button of an ``, and .ui-input does
* not reach it: Chrome's system grey sat there next to fields that follow the
* rest of the interface. ::file-selector-button makes it styleable; the field
* itself gives up its vertical padding, because the button already carries
* that, and keeping both doubles the height. */
.ui-input[type="file"] {
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
font-size: 13px;
color: var(--text-muted);
cursor: pointer;
}
.ui-input[type="file"]::file-selector-button {
appearance: none;
-webkit-appearance: none;
margin-inline-end: 12px;
padding: 9px 14px;
border: 0;
border-inline-end: 1px solid var(--border-strong);
background: var(--surface-2);
color: var(--text);
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background .15s var(--ease), color .15s var(--ease);
}
.ui-input[type="file"]:hover::file-selector-button {
background: var(--primary);
color: #fff;
border-inline-end-color: var(--primary);
}
/* The button takes keyboard focus before the field does: without this, tabbing
* through a form gives no sign of where you have arrived. */
.ui-input[type="file"]:focus-within {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}
.ui-input[type="file"]:disabled {
cursor: not-allowed;
opacity: .6;
}
.ui-form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ui-form-grid--full > .ui-field--wide { grid-column: 1 / -1; }
.ui-fieldset {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ui-fieldset > legend {
padding: 0 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text-faint);
}
/* switch */
.ui-switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.ui-switch__input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-switch__track {
position: relative;
flex: 0 0 auto;
width: 40px; height: 23px;
margin-top: 1px;
border-radius: 999px;
background: var(--border-strong);
transition: background-color .18s var(--ease);
}
.ui-switch__thumb {
position: absolute; top: 3px; left: 3px;
width: 17px; height: 17px; border-radius: 50%;
background: #fff; box-shadow: var(--shadow-sm);
transition: transform .18s var(--ease);
}
.ui-switch__input:checked + .ui-switch__track { background: var(--primary); }
.ui-switch__input:checked + .ui-switch__track .ui-switch__thumb { transform: translateX(17px); }
.ui-switch__input:focus-visible + .ui-switch__track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.ui-switch__text { display: flex; flex-direction: column; gap: 2px; }
.ui-switch__label { font-size: 13.5px; font-weight: 550; }
.ui-switch__hint { font-size: 12.5px; color: var(--text-muted); }
/* checkbox list */
.ui-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.ui-check input[type="checkbox"], .ui-check input[type="radio"] { width: 16px; height: 16px; accent-color: var(--primary); }
.ui-check-list { display: flex; flex-wrap: wrap; gap: 10px 18px; }
/* segmented control */
.ui-segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: var(--radius-sm); }
.ui-segmented label { position: relative; }
.ui-segmented input { position: absolute; opacity: 0; }
.ui-segmented span {
display: block;
padding: 6px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: background-color .15s var(--ease), color .15s var(--ease);
}
.ui-segmented input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.ui-segmented input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }
.ui-segmented__link {
display: block;
padding: 6px 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
}
.ui-segmented__link:hover { color: var(--text); text-decoration: none; }
.ui-segmented__link.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
/* filter bar */
.ui-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-end;
padding: 16px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.ui-filters .ui-field { flex: 1 1 150px; min-width: 0; }
.ui-filters .ui-field--grow { flex: 2 1 240px; }
/* ===================================================================== *
* Tabs
* ===================================================================== */
.ui-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
overflow-x: auto;
}
.ui-tab {
padding: 9px 14px;
font-size: 13.5px;
font-weight: 600;
color: var(--text-muted);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
white-space: nowrap;
}
.ui-tab:hover { color: var(--text); text-decoration: none; }
.ui-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
/* ===================================================================== *
* Accordion / disclosure
* ===================================================================== */
.ui-disclosure { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.ui-disclosure + .ui-disclosure { margin-top: 8px; }
.ui-disclosure__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.ui-disclosure__summary::-webkit-details-marker { display: none; }
.ui-disclosure__summary:hover { background: var(--surface-2); }
.ui-disclosure[open] .ui-disclosure__summary { border-bottom: 1px solid var(--border); }
.ui-disclosure__body { padding: 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: 14px; }
/*
* A disclosure with no chrome: it ends a table row as a menu, and a
* bordered panel there reads as a second table.
*/
.ui-disclosure--bare { border: 0; background: none; overflow: visible; }
.ui-disclosure--bare .ui-disclosure__summary { padding: 4px 8px; justify-content: flex-end; }
.ui-disclosure--bare .ui-disclosure__body { text-align: start; }
.ui-disclosure__chevron { transition: transform .2s var(--ease); color: var(--text-faint); }
.ui-disclosure[open] /*
* A disclosure with no chrome: it ends a table row as a menu, and a
* bordered panel there reads as a second table.
*/
.ui-disclosure--bare { border: 0; background: none; overflow: visible; }
.ui-disclosure--bare .ui-disclosure__summary { padding: 4px 8px; justify-content: flex-end; }
.ui-disclosure--bare .ui-disclosure__body { text-align: start; }
.ui-disclosure__chevron { transform: rotate(180deg); }
/* ===================================================================== *
* Code blocks
* ===================================================================== */
.ui-code-block {
position: relative;
background: #12141a;
color: #e6e9ef;
border-radius: var(--radius-sm);
padding: 16px 18px;
overflow-x: auto;
font-family: var(--mono);
font-size: 12.5px;
line-height: 1.7;
tab-size: 2;
}
.ui-code-block code { white-space: pre; }
.ui-code-copy {
position: absolute;
top: 8px;
inset-inline-end: 8px;
padding: 5px 10px;
font-size: 11.5px;
font-weight: 600;
color: #b9c0cc;
background: rgba(255, 255, 255, .08);
border-radius: 6px;
}
.ui-code-copy:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.ui-code-copy.is-done { background: var(--success); color: #fff; }
/* ===================================================================== *
* Timeline (audit, revisions)
* ===================================================================== */
.ui-timeline { display: flex; flex-direction: column; }
.ui-timeline__item {
position: relative;
padding: 0 0 18px 26px;
border-inline-start: 2px solid var(--border);
margin-inline-start: 6px;
}
.ui-timeline__item:last-child { border-color: transparent; padding-bottom: 0; }
.ui-timeline__dot {
position: absolute;
inset-inline-start: -7px;
top: 3px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--surface);
border: 2px solid var(--border-strong);
}
.ui-timeline__dot--primary { border-color: var(--primary); background: var(--primary); }
.ui-timeline__dot--success { border-color: var(--success); background: var(--success); }
.ui-timeline__dot--danger { border-color: var(--danger); background: var(--danger); }
.ui-timeline__title { font-size: 13.5px; font-weight: 600; }
.ui-timeline__meta { font-size: 12.5px; color: var(--text-faint); }
.ui-timeline__body { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
/* ===================================================================== *
* Auth
* ===================================================================== */
.ui-auth {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
min-height: 100vh;
}
.ui-auth__panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 40px 24px;
}
.ui-auth__card {
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
gap: 20px;
}
.ui-auth__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.ui-auth__brand .ui-brand__mark { width: 32px; height: 32px; color: var(--primary); }
.ui-auth__title { font-size: 22px; font-weight: 680; letter-spacing: -.02em; }
.ui-auth__note { font-size: 12.5px; color: var(--text-faint); }
.ui-auth__aside {
background: linear-gradient(160deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 62%, #101a3a) 100%);
color: #fff;
display: grid;
place-items: center;
padding: 48px;
}
.ui-auth__aside-inner { max-width: 30rem; }
.ui-auth__aside h2 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-bottom: 22px; }
.ui-auth__aside ul { display: flex; flex-direction: column; gap: 12px; }
.ui-auth__aside li {
position: relative;
padding-inline-start: 26px;
font-size: 15px;
opacity: .92;
}
.ui-auth__aside li::before {
content: "";
position: absolute;
inset-inline-start: 0; top: 9px;
width: 8px; height: 8px;
border-radius: 2px;
background: rgba(255, 255, 255, .8);
}
/* ===================================================================== *
* Utilities
* ===================================================================== */
/* Colour and weight */
.ui-muted { color: var(--text-muted); }
.ui-faint { color: var(--text-faint); }
.ui-danger { color: var(--danger); }
.ui-dim { opacity: .55; }
.ui-small { font-size: 12.5px; }
.ui-strong { font-weight: 650; }
.ui-normal { font-weight: 400; }
/* Flow */
.ui-nowrap { white-space: nowrap; }
.ui-pre-wrap { white-space: pre-wrap; }
.ui-text-end { text-align: end; }
.ui-inline { display: inline; }
.ui-block { display: block; }
.ui-hidden { display: none !important; }
.ui-clickable { cursor: pointer; }
.ui-list-disc { list-style: disc; padding-inline-start: 20px; }
/* A link that gives its whole card to the pointer without looking like one. */
.ui-link-plain, .ui-link-plain:hover { color: inherit; text-decoration: none; }
/* Rows and columns */
.ui-flex { display: flex; gap: 10px; align-items: center; }
.ui-flex--between { justify-content: space-between; }
.ui-flex--right { justify-content: flex-end; }
.ui-flex--wrap { flex-wrap: wrap; }
.ui-flex--top { align-items: flex-start; }
.ui-flex--bottom { align-items: flex-end; }
.ui-grow { flex: 1 1 auto; min-width: 0; }
.ui-min-0 { min-width: 0; }
/* A span that has to sit on its own line — a domain under the name it belongs
to, inside a cell where a would be the wrong element. */
.ui-block { display: block; }
/* Spacing, on the scale and nowhere else */
.ui-m-0 { margin: 0; }
.ui-mt-0 { margin-top: 0; }
.ui-mt-xs { margin-top: var(--ui-space-1); }
.ui-mt-sm { margin-top: var(--ui-space-2); }
.ui-mt-md { margin-top: var(--ui-space-3); }
.ui-mt-lg { margin-top: var(--ui-space-4); }
.ui-mt-xl { margin-top: var(--ui-space-5); }
.ui-mb-0 { margin-bottom: 0; }
.ui-mb-xs { margin-bottom: var(--ui-space-1); }
.ui-mb-sm { margin-bottom: var(--ui-space-2); }
.ui-mb-md { margin-bottom: var(--ui-space-3); }
.ui-mb-lg { margin-bottom: var(--ui-space-4); }
.ui-mb-xl { margin-bottom: var(--ui-space-5); }
.ui-gap-xs { gap: var(--ui-space-1); }
.ui-gap-sm { gap: var(--ui-space-2); }
.ui-gap-md { gap: var(--ui-space-3); }
.ui-gap-lg { gap: var(--ui-space-4); }
.ui-gap-xl { gap: var(--ui-space-5); }
/*
* Measures the markup carries as a value.
*
* A column's share of its table, or the width a cell may not exceed, belongs
* to that one screen — but the rule that applies it belongs here. The template
* sets `--ui-col` or `--ui-max`; it never sets `width`.
*/
.ui-col { width: var(--ui-col); }
.ui-col--fit { width: 1%; white-space: nowrap; }
.ui-cap { max-width: var(--ui-max); }
.ui-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: var(--ui-max, none);
}
.ui-scroll-y { max-height: var(--ui-max-h, 320px); overflow-y: auto; }
/* ===================================================================== *
* Responsive
* ===================================================================== */
@media (max-width: 1240px) {
.ui-grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
.ui-auth { grid-template-columns: minmax(0, 1fr); }
.ui-auth__aside { display: none; }
}
@media (max-width: 860px) {
.ui-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
.ui-sidebar.is-open { transform: none; }
.ui-sidebar__close { display: block; }
.ui-shell { margin-inline-start: 0; }
.ui-topbar__menu { display: inline-flex; }
.ui-topbar, .ui-main, .ui-footer { padding-inline: 16px; }
.ui-main { padding-top: 18px; gap: 16px; }
.ui-table th, .ui-table td { padding: 10px 12px; }
}
@media print {
.ui-sidebar, .ui-topbar__menu, .ui-topbar__actions, .ui-footer, .ui-btn { display: none !important; }
.ui-shell { margin: 0; }
.ui-card { break-inside: avoid; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* Marks a draft that differs from what is live. The distance between "saved"
and "published" has to be visible without being read. */
.ui-text-warning { color: var(--warning); }
.ui-text-danger { color: var(--danger); }
/* --- Translating -----------------------------------------------------------
The share shown on a tab, and the reference text beside a field, are how a
screen stops asking whoever is translating to hold the count of untranslated
fields in their head and to move between two tabs for every one of them. */
.ui-tab__badge {
display: inline-block;
margin-left: 6px;
padding: 0 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
line-height: 18px;
}
.ui-tab__badge.is-done { background: var(--success-soft); color: var(--success); }
.ui-tab__badge.is-partial { background: var(--warning-soft); color: var(--warning); }
.ui-lang-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin: 14px 0 4px;
padding: 10px 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.ui-lang-bar__state { margin: 0; font-size: 14px; }
.ui-lang-bar__ref { display: flex; align-items: center; gap: 8px; margin: 0; }
.ui-lang-bar__actions { margin-left: auto; }
.ui-select--sm { padding: 4px 26px 4px 8px; font-size: 13px; }
/* The pager, the same under every list. */
.ui-pager {
padding: 12px 20px;
border-top: 1px solid var(--border);
}
/* The sentence in the reference language, above the field that translates it. */
.ui-field__source {
margin: 0 0 6px;
padding: 7px 10px;
background: var(--surface-2);
border-left: 3px solid var(--border-strong, var(--border));
border-radius: 0 6px 6px 0;
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.ui-field__source-tag {
display: inline-block;
margin-right: 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--faint);
}
/* --------------------------------------------------------------------------
Tabs inside a form, and sliders paired with a number
Without JavaScript the bar stays hidden and every panel stays visible, one
under the next with its own heading: the form still works and still saves.
With JavaScript the bar appears and the panel headings go, because from
then on the tab carries the word.
-------------------------------------------------------------------------- */
.ui-devtabs__bar {
display: flex;
gap: 4px;
padding: 4px;
margin-bottom: 16px;
background: var(--surface-2, #f4f5f7);
border-radius: 10px;
}
.ui-devtabs__tab {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
padding: 8px 12px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--text-muted, #5c6472);
font: inherit;
font-size: 13.5px;
cursor: pointer;
}
.ui-devtabs__tab svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.ui-devtabs__tab:hover {
color: var(--text, #16181d);
}
.ui-devtabs__tab.is-active {
background: var(--surface, #fff);
border-color: var(--border, #e3e6eb);
color: var(--text, #16181d);
font-weight: 600;
box-shadow: 0 1px 2px rgba(16, 20, 30, .06);
}
.ui-devtabs__tab:focus-visible {
outline: 3px solid var(--primary, #2f5bff);
outline-offset: 2px;
}
/* With the tabs on, the panel's heading is one too many: the same word would
appear twice, once on the tab and once under it. */
.ui-devtabs.is-tabbed .ui-devtabs__legend {
display: none;
}
.ui-devtabs__panel + .ui-devtabs__panel {
margin-top: 20px;
}
.ui-devtabs.is-tabbed .ui-devtabs__panel + .ui-devtabs__panel {
margin-top: 0;
}
/* The number is the real control; the slider is a convenience for finding a
value by looking instead of counting. So the number never shrinks below a
readable width, and the slider takes whatever is left. */
.ui-rangepair {
display: flex;
align-items: center;
gap: 12px;
}
.ui-rangepair input[type="range"] {
flex: 1;
min-width: 0;
accent-color: var(--primary, #2f5bff);
}
.ui-rangepair__num {
display: flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
.ui-rangepair__num .ui-input {
width: 82px;
text-align: right;
}
.ui-rangepair__unit {
color: var(--text-muted, #5c6472);
font-size: 13px;
}