`, a bare ``, a row of radios
with no row. A class inventory (`tools/class_inventory.mjs`) lists them; each rule
below is written against the markup that emits it. */
/* A heading that introduces a panel rather than a page. Sits between `.page-heading`
(page) and `.panel-head` (inside a panel). */
.panel-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px 16px;
flex-wrap: wrap;
margin-block: 28px 16px;
padding-block-start: 16px;
border-block-start: 1px solid var(--line);
}
.panel-heading h3 {
font-family: var(--font-mono);
font-size: var(--fs-12);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
}
.panel-heading p {
margin-block-start: 8px;
max-width: var(--measure-narrow);
font-size: var(--fs-14);
line-height: 1.6;
color: var(--text-muted);
}
/* A sub-heading inside a panel: same register as `.panel-head`, one step quieter. */
.panel-subhead {
margin-block: 24px 12px;
}
.panel-subhead h3 {
font-family: var(--font-mono);
font-size: var(--fs-12);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
}
/* Stat rows in the cabinets reuse the shared `.stat`; only the grid differs. */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0;
margin-block: 16px;
border-block: 1px solid var(--line);
}
/* A scrolling frame around a table. The table keeps its own minimum width, so the
frame is what scrolls instead of the page. */
.table-wrap {
overflow-x: auto;
max-width: 100%;
}
/* A row of radio choices as one control row rather than a vertical list. */
.radio-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.radio-row label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: 0;
font-family: var(--font-mono);
font-size: var(--fs-12);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.radio-row label:hover {
border-color: var(--line-strong);
color: var(--text);
}
.radio-row input:checked + span,
.radio-row label:has(input:checked) {
border-color: var(--accent-line);
color: var(--text);
background: var(--accent-soft);
}
/* The overview's own arrangement: readings first, then the panels they summarise. */
.overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
/* По карточному языку системы (16px), не отдельным 28px: единственный
выбивающийся зазор читался как ошибка сетки. */
gap: 0 16px;
align-items: start;
}
/* Provider import: a group of rows with its own head. */
.import-groups {
display: grid;
gap: 0;
}
.group-card {
display: grid;
gap: 12px;
}
.group-select {
display: grid;
gap: 8px;
}
.group-select > span,
.group-select > label {
font-family: var(--font-mono);
font-size: var(--fs-12);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-faint);
}
/* The chips that name the channels a provider feeds. */
.channel-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* A rejected import attempt, kept apart from the form that produced it. */
.reject-block {
padding: 12px 16px;
border: 1px solid var(--danger-line);
border-radius: var(--radius);
background: var(--danger-soft);
font-size: var(--fs-14);
line-height: 1.6;
color: var(--text);
}
/* A raw payload. Monospace, scrollable, and never wider than its panel. */
.code-block {
margin: 0;
padding: 12px 16px;
border: 1px solid var(--line);
background: var(--surface-2);
font-family: var(--font-mono);
font-size: var(--fs-12);
line-height: 1.6;
color: var(--text-muted);
overflow-x: auto;
white-space: pre;
}
/* The label half of a stat pair, when the pair is not the shared `.stat`. */
.stat-label {
font-family: var(--font-mono);
font-size: var(--fs-12);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-faint);
}
/* Actions waiting on the operator, listed under the control that started them. */
.pending-actions {
display: grid;
gap: 8px;
margin-block-start: 12px;
}
/* A filter row that is a grid rather than a flex row: the cabinet's ledger. */
.ledger-filter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
align-items: end;
}
/* Numbers beside a meter, aligned in a column. */
.meter-numbers {
display: flex;
gap: 12px;
justify-content: space-between;
font-family: var(--font-mono);
font-size: var(--fs-12);
font-variant-numeric: tabular-nums;
color: var(--text-faint);
}
/* A model's price row in the client cabinet: what we charge, what it costs us. */
.price-in,
.price-out {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.price-out {
color: var(--text-faint);
}
/* The candidate rows inside a decision trace. */
.trace-candidates {
display: grid;
gap: 0;
}
.trace-candidate {
display: grid;
gap: 8px;
padding: 12px 0;
border-block-end: 1px solid var(--line);
}
.trace-candidate-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.trace-candidate-metrics {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.candidate-rank {
font-family: var(--font-mono);
font-size: var(--fs-12);
color: var(--text-faint);
}
/* A row in the key-tier picker. */
.key-tier-row {
display: flex;
align-items: center;
gap: 12px;
}
.key-tiers-picker {
display: grid;
gap: 8px;
}
/* A picker that resolves one entity from a list. */
.token-picker {
display: grid;
gap: 8px;
}
/* An inline error box under a field, distinct from `.form-error`'s reserved line. */
.field-error-box {
padding: 12px 12px;
border: 1px solid var(--danger-line);
border-radius: var(--radius);
background: var(--danger-soft);
font-size: var(--fs-14);
line-height: 1.5;
color: var(--text);
}
/* The foot of a picker card: the action row under the options. */
.option-foot {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-block-start: 12px;
}
/* The model table inside a client panel. */
.model-data-table {
width: 100%;
}
/* A row the operator can act on. */
.selectable {
cursor: pointer;
}
/* Dense is a modifier, not a second table. */
.tight {
padding-block: 8px;
}
/* A larger body line, used for one sentence under a heading. */
.text-lg {
font-size: var(--text-body);
line-height: var(--text-body-leading);
}
/* Storefront sections that carry their own heading arrangement. */
.trust-section,
.catalogue-proof {
padding-block-start: clamp(20px, 2.4vw, 32px);
}
/* The brand wordmark block in the shell header. */
/* A name line inside a decision card. */
.cpc-name {
font-family: var(--font-mono);
font-size: var(--fs-12);
color: var(--text-muted);
}
/* A per-channel note in the panel: quieter than a panel body. */
.bch-info {
font-size: var(--fs-12);
line-height: 1.55;
color: var(--text-faint);
}
/* No pixel pre-state for the brand mark survives here: it existed to hold the WebGL render's
place while it booted, and both the render and the in-page SVG were removed — the mark is the
tab icon now (`ui/brand.mjs` is gone; see the brand lockup comment above). */
/* 8. Responsive ========================================================= */
.mobile-only {
display: none;
}
@media (max-width: 1180px) {
.grid-2 {
grid-template-columns: minmax(0, 1fr);
}
.route-row {
grid-template-columns: 9px minmax(120px, 1fr) 90px 78px 16px;
}
.route-row > :nth-child(5) {
display: none;
}
}
@media (max-width: 960px) {
.login-shell {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
}
/* Identity stays: wordmark and the compact figure. The manifesto goes — it is
what made this column too tall, not the brand itself.
The block is sized to its contents and the panel takes the rest: a fixed art box
plus a centred form left a screen-high gap between the two. */
.login-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 24px 24px 12px;
border-inline-end: none;
border-block-end: 1px solid var(--line);
overflow: visible;
}
/* The manifesto goes — it is what made this column too tall — but the page's `h1`
lives inside it, and `display: none` takes a heading out of the accessibility tree
as well as off the screen. Measured 16 October 2026: below this breakpoint every
login document had no `h1` at all (`#app` is hidden and `#login` began at `h2`),
which is a missing page title rather than a quieter one (1.3.1, 2.4.6).
The block is therefore clipped instead of removed: nothing of it is painted, and
the outline the document declares stays true. The pattern is the one `.sr-only`
already uses, and no interactive element lives here, so nothing focusable is left
invisible. */
.login-copy {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
/* `:has(.mascot)` повторяет специфичность десктопного clamp-преска (0,2,0) и стоит
позже: иначе фигура держала 300px минимума и на 320px уезжала за край (замерено). */
.login-orbit,
.login-orbit:has(.mascot) {
position: relative;
inset: auto;
/* A full-width band rather than a small square: the artwork is a portrait, and a
210px box showed a fragment of it above a screen of empty space. */
width: 100%;
aspect-ratio: 16 / 10;
transform: none;
opacity: 1;
order: -1;
}
.login-orbit:has(.mascot) {
mask-image: linear-gradient(180deg, black 62%, transparent 100%);
}
.login-panel {
padding: 24px 24px;
align-content: start;
}
.app-shell {
grid-template-columns: minmax(0, 1fr);
}
.mobile-only {
display: inline-grid;
}
.sidebar {
position: fixed;
top: 0;
inset-inline-start: 0;
width: var(--sidebar-w);
transform: translateX(-100%);
transition: transform var(--dur-base) var(--ease);
}
/* Выехавшее меню - слой над страницей, а не новая страница: под ним видно, что таблица
осталась на месте. Материал вместо кроющей плашки говорит это без слов и делает
возврат ожидаемым (`docs/design-system.md` §10.5). Тень остаётся: размытие сообщает
«сквозь», тень - «выше». */
.sidebar.open {
transform: none;
background: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: blur(20px);
box-shadow: var(--shadow-lg);
}
/* The nav items are the primary targets of the whole panel on a phone — every section is
reached through one — and 38px is below the 44px platform floor. Widened rather than
re-spaced: the gap between them stays, so a mis-tap lands on a neighbour rather than on
nothing. */
.nav-item {
height: 46px;
font-size: var(--fs-14);
}
.nav-item svg {
width: 19px;
height: 19px;
}
.content {
padding: 20px 16px 40px;
}
.topbar {
padding-inline: var(--shell-gutter);
}
.last-sync {
display: none;
}
}
@media (max-width: 700px) {
/* The crumb shares the bar with four controls and shrank to «O…» at 390px, while the
page title directly under the bar says the same thing. Hidden rather than ellipsized:
a one-letter address is not an address. */
.topbar > .breadcrumbs { display: none; }
/* Readings pair up on a phone. One per row made the overview seven screens of figures
before the first panel, which is the opposite of scannable; two per row keeps the
numbers comparable and the section short. */
.stats,
.stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stat {
border-inline-start: 1px solid var(--line);
}
.stat:nth-child(odd) {
border-inline-start: 0;
}
/* A summary reading is not a third peer when the row holds two: it takes the full
width instead of leaving an empty half-cell. Overview's own wide card is marked
separately and keeps its place. */
.stats > .stat-summary {
grid-column: 1 / -1;
}
.stat-value {
font-size: var(--fs-22);
}
/* The pinned count and its reset button are one instruction, so they own a full
row with the action at its end instead of wrapping into the bulk-button cloud. */
.model-picker-bar [data-picker-pinned] {
display: flex;
flex: 1 1 100%;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.overview-grid {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
/* On phones the figure is identity, not a second hero, but it is still a portrait:
a 112px square showed a fragment of the drawing and left the rest of the screen
empty, so it is a full-width band that fades into the form below it. */
.login-brand {
gap: 12px;
padding: 16px 20px 12px;
}
.login-orbit {
width: 100%;
aspect-ratio: 16 / 9;
}
.login-orbit:has(.mascot) {
mask-image: linear-gradient(180deg, black 58%, transparent 100%);
}
.login-panel {
padding: 24px 20px 32px;
}
.topbar {
display: grid;
/* 44px, not 38px: the menu button is a 44px target and a 38px column made it bleed
6px into the gap, so the burger sat closer to the address than the gutter it was
meant to start from. The three slots are the same on all three cabinets — menu,
address, actions — and the address is the only one whose content varies per screen,
so `minmax(0, 1fr)` lets it shrink while the others stay at their own size. */
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
height: var(--topbar-h);
padding-inline: var(--shell-gutter);
gap: 8px;
}
/* Placed by name rather than by document order: the client cabinet inserts the
notification chip and panel into its actions group at runtime. */
.topbar > .breadcrumbs { grid-column: 2; min-width: 0; overflow: hidden; }
.topbar > .top-actions { grid-column: 3; justify-self: end; min-width: 0; gap: 8px; }
.breadcrumbs {
min-width: 0;
flex-wrap: nowrap;
overflow: hidden;
white-space: nowrap;
}
/* The trail is one line in a 95px bar at 390px. Every crumb may shrink, and every one of
them says so with an ellipsis: the previous rule pinned them all at `flex: 0 0 auto`, so
the trail ran past the bar and the nav's `overflow: hidden` cut it mid-glyph, with no
sign that anything was missing. The separator stays fixed — it is one character and
there is no shorter form of it. */
.breadcrumbs > * {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* The brand crumb and its separator leave at this width, where the sidebar is already
off-canvas and the trail is 104px. Measured 16 October 2026 at 390px: the address —
the only thing a breadcrumb exists to say — was the smallest crumb, «Расписание
проверок» getting 49px of the 153px it needs, while «POSTCORPORATE» held 37px and
the «/» was squeezed to a 2px sliver that cannot render a glyph at all. The brand is
not lost: the sidebar head carries the full lockup, reachable through the menu
button, and the cabinet footer repeats it (docs/design-system.md §1: chrome that
repeats what is already on screen is removed, not styled). */
.breadcrumbs > span {
display: none;
}
.top-actions { min-width: 0; flex-wrap: nowrap; gap: 8px; }
/* Narrow topbar controls keep the shared 44×44 touch target. The previous 40px rule
bought no horizontal space — width was already 44px elsewhere — and made theme and
refresh controls shorter than the menu, locale switch and console trigger. */
.top-actions .icon-btn { width: 44px; height: 44px; }
/* The reveal button keeps its 44×44 at every width. The icons inside keep their own size. */
.health { min-width: 0; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content { padding: 16px 12px 28px; }
.login-form h2 {
font-size: var(--fs-22);
}
.login-form > .muted {
margin-bottom: 20px;
}
.metric-row,
.metric-row.wide,
.metric-row.wide.keys,
.metric-row.wide.prices,
.metric-row.wide.trail {
grid-template-columns: minmax(0, 1fr);
}
.key-metrics,
.price-history {
margin-inline-start: 8px;
}
.page-heading {
flex-direction: column;
align-items: stretch;
}
.page-heading > div:first-child,
.page-heading > :first-child:not(.heading-actions) {
flex: 0 1 auto;
min-width: 0;
}
/* `flex: 1` alone divided the row between the buttons and truncated the longer label
("Добавить провайдера" lost its end). Wrapping first, then filling, gives each button
the width its own text needs. */
.heading-actions {
flex-wrap: wrap;
}
.heading-actions .btn {
flex: 1 1 auto;
justify-content: center;
}
/* The filter row is a column: a select with a 150px floor beside a search field cannot
share 390px, and the result count belongs under them rather than squeezed between. */
.toolbar {
flex-direction: column;
align-items: stretch;
}
/* `flex: 1 1 260px` sizes the main axis, and the main axis is now vertical — the search
box grew to 260px tall. Both the basis and the max-width have to be released here, or
the field is a tall empty panel with an icon floating in the middle of it. */
.search-box {
flex: 0 0 auto;
max-width: none;
}
.toolbar select,
.toolbar input:not(.search-box input) {
width: 100%;
min-width: 0;
}
.toolbar .spacer {
display: none;
}
.result-count {
align-self: flex-end;
}
.form-grid {
grid-template-columns: minmax(0, 1fr);
}
.pagination {
flex-wrap: wrap;
}
/* The label goes, the dot stays. `.health span` hid both, and the pill collapsed to an
18×12px empty capsule in the top bar: the one element whose entire job is to say
whether the relay is up became a decoration that says nothing. `:not(.dot)` is what
makes this a truncation rather than a deletion. */
.health span:not(.dot) {
display: none;
}
.health {
gap: 0;
padding: 0;
/* Sized and shaped like the icon buttons beside it, not like its vanished text: three
controls in a row read as a row. It carries the same 44px as they do, because it is the
same kind of thing to a finger. */
width: 44px;
height: 44px;
/* The reserved label width goes with the label: 148px of empty capsule would push the
two buttons beside it off a phone. */
min-width: 0;
border-radius: var(--radius-sm);
justify-content: center;
}
/* `.last-sync` is already `display: none` at the wider breakpoint, so it reserves nothing
here and needs no override. */
/* Dialogs, drawers and forms on a phone.
Two things change and both are about the hand rather than the width: controls grow to
a touch target, and the submit row stops scrolling away. */
.modal-backdrop {
padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
.modal {
/* Matches the backdrop's own padding. The desktop value subtracts 48px, which left a
gap this layout does not have and cost two lines of a crowded form. */
max-height: calc(100dvh - 24px);
}
/* The actions row is pinned to the foot of the scrolling form. A token form is ~800px
tall in a 849px window: with the row in the flow, "Сохранить" sits below the fold and
the dialog looks like it has no way to confirm. */
.modal > form .form-actions {
position: sticky;
bottom: -20px;
/* Cancels the form's own bottom padding so the bar reaches the dialog's edge instead
of floating above a strip of background. */
margin: 8px -20px -20px;
padding: 16px 20px;
background: var(--surface);
}
/* Full width and stacked. Two 38px buttons side by side put the destructive and the
confirming action within a thumb's width of each other. */
.form-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.drawer {
width: 100%;
}
/* Touch targets. 38px controls and 30px icon buttons are comfortable with a cursor and
not with a finger; 44px is the platform floor on both iOS and Android. Set here rather
than globally: on a desktop the taller control would just be loose. */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
select,
.btn {
height: 44px;
}
/* iOS zooms a focused field whose computed size is under 16px. The rest of the
type scale stays; only the control the keyboard opens is lifted. */
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"]),
select,
textarea,
textarea.sans {
font-size: var(--fs-16);
}
/* The `.sm` variants matter more than the base ones, not less: they are what the drawer
uses for "+ Ключ", "Каталог моделей" and every row action, so they are the buttons a
thumb actually hunts for. 40px is half a finger; the base rule's 44px holds here too. */
/* Two rules used to live here, shrinking `.icon-btn` to 42px and `.icon-btn.sm` to 40px on a
phone. That is backwards — the smaller the screen, the more the finger needs — so both are
gone and the base 44px applies everywhere. */
/* Tooltips are hover-only, so on a touch screen they never appear — and worse, a tap
leaves :hover stuck on the button, printing a label over whatever the tap opened. The
base rule now hides with `display: none`, so the reveal is what has to be cancelled. */
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:not(.icon-btn):hover::before,
[data-tooltip]:not(.icon-btn):focus-visible::before {
display: none;
}
.pin-row {
grid-template-columns: minmax(0, 1fr) 44px;
}
.pin-row input:first-child {
grid-column: 1 / -1;
}
}
/* At 320px a cabinet topbar cannot seat its controls on the 16px gutter. Measured on
`/supply`, whose actions group is the widest of the three cabinets: menu button 44 + the
address + the language switch 91 + the theme toggle 44 + refresh 44 + the console trigger
44 = 307px of content inside 288px, so the row pushed 3px past the viewport and collapsed
the right gutter from 16px to 0 — a horizontal scrollbar on the narrowest phone.
What gives is the two gaps around the actions group, not a control and not the row's own
rhythm: the topbar's `column-gap` and the group's own `gap`, both 8px to 4px. That is still
on the 4px spacing grid, and together they buy 16px — enough to bring the right gutter back
to its full 16px, which either one alone did not (9px and 5px respectively).
The controls themselves stay 44px wide: the canon does not soften a tap target on a narrow
screen (docs/design-system.md §8), and the client cabinet solves its own 320px case by
moving the theme toggle to Settings, which the supplier cabinet has nowhere to move it to.
Measured after: 0px of overflow and a 16px gutter at 320, 324, 330 and 339px, with the
former 8px restored from 341px up. */
@media (max-width: 340px) {
/* Two gaps, measured. The topbar is a grid of three columns — the menu button, the address
(0px at this width, the breadcrumb is hidden) and the actions group — so its own
`column-gap` is what sits between the menu button and the actions. The actions group
holds four controls, so its `gap` is what sits between the switch, the toggle, refresh
and the console trigger.
Reducing only the actions' gap cleared the overflow but left the right gutter at 9px,
because the row's two 8px column gaps still ate 16px; reducing only the topbar's gap left
it at 5px. Both at 4px gives 16 + 44 + 4 + 4 + 235 = 303 of 320, which restores the
full 16px gutter and leaves the row 17px of slack.
`>` and both class names on the second rule, to outweigh `.topbar > .top-actions`
(line 5964), which declares 8px at a higher specificity than a bare `.top-actions`. */
.topbar {
column-gap: 4px;
}
.topbar > .top-actions {
gap: 4px;
}
}
/* Tables become cards.
The threshold is the tables' own width, not a device: `table.data` sets `min-width: 820px`
and the widest section (tokens) measures 1046px, so a viewport that cannot seat ~1060px of
content shows a horizontal scrollbar over the primary content of the page. At 768px that
hid 316px — three of the eight columns — and nothing is read by scrolling sideways to find
a column and back to find the row.
This lived inside the 700px block, which is how the tablet width kept the scrollbar: the
layout it needed was written but gated on a narrower screen than the problem.
`display: block` on the table parts is what allows it. The row becomes the card, the cell
becomes a label/value pair, and the header row is dropped because each cell now carries its
own label in `data-label` (`labelTableCells` in app.js and portal.js). Without those labels
this layout is a column of unexplained values, so the two halves are a pair — do not remove
one.
1080 stays a literal because a media query cannot read var(); the source of truth
for the number is --table-card-breakpoint in :root, and the design-system check
asserts this literal and the token agree. The two must move together. */
@media (max-width: 1080px) {
/* Карточный режим отменяет прокрутку, а вместе с ней и всё, что о ней сообщало:
кроющие полосы и тени по краям висели бы вертикальными лентами вдоль столбца
карточек. Зебра и кромка первой ячейки гаснут по той же причине - они разделяли
строки таблицы, а здесь строки уже разделены рамкой карточки, и полоса внутри
карточки читалась бы как её часть. */
.table-scroll {
overflow-x: visible;
background: none;
}
/* `:not(:hover)` обязателен: правило стоит в файле ниже общего `tr:hover td`, и без
исключения чётная карточка перестала бы отвечать на курсор - при той же
специфичности побеждает последнее объявление. */
table.data tbody tr:nth-child(even):not(:hover) td {
background: transparent;
}
/* Только тень: `background: transparent` здесь погасил бы и подсветку наведения на
первой ячейке, и карточка отвечала бы на курсор всеми полями, кроме первого. */
table.data tbody tr.interactive:hover td:first-child {
box-shadow: none;
}
table.data,
table.data tbody,
table.data tr,
table.data td {
display: block;
min-width: 0;
width: auto;
}
table.data thead {
display: none;
}
/* Each row is a bordered card rather than a strip separated by a rule. Rules alone left
the values of one record and the title of the next reading as one block, which is the
opposite of what a card layout is for: the border says where a record ends. */
table.data tbody tr {
display: block;
margin-bottom: 12px;
padding: 12px 16px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
}
table.data tbody tr:last-child {
margin-bottom: 0;
}
/* The panel itself stops drawing a frame: it would be a border around a column of
borders. The pager keeps its own top rule, so it still reads as attached. */
.table-panel {
border: 0;
background: transparent;
}
/* Label above value, not beside it.
A two-column cell was tried and it is wrong here: an 8.5rem label column takes a third
of a 390px screen, and every value — a badge, a meter, a `p1 p2 p3 p4` list — was left
wrapping inside the remainder. The vertical form gives the value the whole width, which
is what a phone has to spend. */
table.data td {
display: block;
padding: 8px 0;
border-bottom: 0;
}
table.data td::before {
content: attr(data-label);
display: block;
margin-bottom: 3px;
font-family: var(--font-mono);
font-size: var(--fs-12);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
}
/* The first cell is the record's identity, so it reads as the card's title rather than
as one more labelled field. */
table.data tbody tr > td:first-child {
display: block;
margin-bottom: 8px;
padding-top: 0;
}
table.data tbody tr > td:first-child::before {
content: none;
}
/* The actions cell spans the card's foot, where a thumb reaches it. Selected by the
absence of `data-label` rather than by `:last-child`: the panel's last column is a row
of buttons, but the portal's is "Остаток после" — real data whose label
`:last-child::before { content: none }` silently deleted. `labelTableCells` only stamps
cells whose header has text, so no label means no header, which means not a field. */
table.data tbody tr > td:not([data-label]) {
display: block;
margin-top: 8px;
padding-bottom: 0;
}
table.data tbody tr > td:not([data-label])::before {
content: none;
}
.row-actions {
justify-content: flex-start;
}
/* An empty state spans the card and keeps its centred layout: it is one message, not a
record with fields. */
table.data td.empty-cell {
display: block;
padding: 0;
}
table.data td.empty-cell::before {
content: none;
}
/* Hover on a card is meaningless on a touch screen, and the row is the card here, so
the tint would flood it. */
table.data tbody tr:hover td {
background: transparent;
}
/* The subtitle truncated to one line inside a column; in a card it has the width to
wrap, and an address or model id is worth reading in full. */
.cell-sub {
max-width: none;
overflow: visible;
white-space: normal;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition-duration: 0.01ms !important;
}
/* Reduced motion removes decorative movement while preserving static state cues. */
.btn[data-loading]::after,
.skeleton {
animation: none !important;
}
.skeleton::after {
display: none;
}
}
/* The brand figure: a sprite drawn by `ui/mascot.mjs` into a canvas, with its screen laid
over it as markup. Two elements because they are two things — the case is a drawing, the
screen is text — and the text has to be real text, set in the interface's own mono face.
The host carries no size of its own. It takes the box its parent gives it — the storefront
hero's right column, the login's `.login-orbit` — and the canvas fills that box. The one
thing that must not happen is the canvas feeding its own size back into the host, which is
why the canvas is `position: absolute`: as a static block it would stretch its parent, the
parent would give it a bigger box, and the figure would grow on every frame. Measured at
that state: a login canvas 300px wide reported its host at 33 million pixels tall.
The glass is positioned as a percentage of the frame, not of the host. The frame is exactly
the figure's box in whole sprite pixels, so the host is usually a few pixels larger, and a
percentage of the host would put the text off its screen by that much. */
.mascot {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.mascot-frame {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
}
.mascot > canvas {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.mascot-screen {
position: absolute;
inset-inline-start: var(--mascot-screen-x, 20.8333%);
inset-block-start: var(--mascot-screen-y, 12.5%);
width: var(--mascot-screen-w, 58.3333%);
height: var(--mascot-screen-h, 33.3333%);
display: flex;
flex-direction: column;
/* The lines are spread over the glass rather than stacked at its top. A terminal fills from
the top and that is what this did first; measured on 25 September 2026, four lines in a
24×14 glass left the bottom two-fifths empty and the screen read as half-blank rather than
as a display with something on it. The inset keeps the first and last characters off the
bezel. */
justify-content: space-evenly;
padding: 0.4em 0.6em;
overflow: hidden;
/* No background: the sprite already fills the glass, and a colour repeated here would be a
second place the palette is decided. The type is light in both themes, because this is a
screen and not a surface — one that inverted with the page would read as a hole in the
layout rather than as something switched on. */
font-family: var(--font-mono);
font-size: var(--mascot-char, 8px);
line-height: 1.35;
/* The screen's ink is the sprite's own lit-row value, handed over by the renderer. It is
light in both themes on purpose, and it must not be `--accent`: that token is ink on
paper, so in the light theme it would set dark type on a dark glass. */
color: var(--mascot-ink, #eef1f5);
white-space: nowrap;
}
/* The reveal. Each line carries `--typed`, its visible character count, and the clip is one
character wide — which is what makes this work in any language and at any size, where a
`steps()` reveal would need the character count written into the stylesheet.
/* The text is in the markup from the start and the clip is what hides it, so a reader with
scripting blocked, a crawler, and a screen reader all get the whole exchange. */
.mascot-row { display: block; }
.mascot-screen [data-mascot-line] {
clip-path: inset(0 calc(100% - var(--typed, 100) * 1ch) 0 0);
}
/* The caret is a drawn block rather than a typed character: it must not be selectable, and
it must not be read out. It appears only once the exchange is complete — before that the
line's own clip is the only cursor the eye needs — and then it blinks, which is a state
indicator and the only reason a blink is allowed here at all. Under reduced motion the
blanket rule above freezes it lit, which is the calm variant: a prompt, not a pulse. */
.mascot-screen .caret {
display: none;
width: 1ch;
height: 1em;
vertical-align: text-bottom;
background: currentColor;
}
.mascot-screen.is-complete .caret {
display: inline-block;
animation: mascot-caret 1.1s steps(1) infinite;
}
@keyframes mascot-caret {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}
/* The particle field. A procedural grain, drawn into a 2D canvas by
`ui/particle-field.mjs`, used behind an empty state and never behind data: under a table
it would compete with the figures an operator is reading, and those figures are the
reason the panel exists. `currentColor` is what the marks are painted with, so the field
takes the surrounding text colour in both themes without a token of its own. */
.particle-field {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
color: var(--text-faint);
opacity: .8;
pointer-events: none;
z-index: 0;
}
/* The empty state becomes the field's frame. It is positioned so the canvas has a box to
fill, and its own content is lifted above the grain. */
.empty.with-field {
position: relative;
overflow: hidden;
}
.empty.with-field > * {
position: relative;
z-index: 1;
}
/* A log entry that arrived since the previous render. The table is replaced whole on every
refresh, so a new row lands in the same weight and colour as the row above it and an
operator watching a busy relay cannot tell which line is new. 120ms and four pixels is
the "barely noticeable" the frequency table allows for a list that grows on every
request; the rule marks the row and the slide is what makes it noticed. Under reduced
motion the blanket collapse stops the slide and the rule stays. */
@keyframes row-arrived {
from { transform: translateY(-4px); opacity: 0; }
to { transform: none; opacity: 1; }
}
.row-arrived {
animation: row-arrived 120ms var(--ease) both;
box-shadow: inset 2px 0 var(--accent);
}
@media (prefers-reduced-motion: reduce) {
.row-arrived {
animation: none;
box-shadow: inset 2px 0 var(--accent);
}
}
/* A value that changed since the previous render. The rule is the state and the fade is what
makes it noticed: a figure that went from 412 to 419 sits in the same type in the same
place, and an operator who looked away reads the old one. Nothing moves and no colour of
the text changes — a left rule appears and fades over 900ms, which is the "barely
noticeable" the frequency table allows for a section switch. Under reduced motion the
blanket collapse at the end of this stylesheet stops the fade and the rule stays, so the
signal survives as a still mark. */
@keyframes value-changed {
0% { box-shadow: inset 2px 0 var(--accent); }
100% { box-shadow: inset 2px 0 transparent; }
}
.value-changed {
animation: value-changed 900ms var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
.value-changed {
animation: none;
box-shadow: inset 2px 0 var(--accent);
}
}
/* The in-flight spinner keeps turning under reduced motion, and this block has to sit AFTER
the blanket `animation: none !important` above: `!important` beats a later declaration of
the same specificity only when the later one is also `!important`, so a rule placed before
it is simply overridden. `AGENTS.md` is explicit about the intent — reduced motion means a
gentler equivalent, not lost feedback, and a frozen ring is an inert ring that says
nothing about whether the request is still running. The speed is the gentler part: the
calm token is 0.9s against 0.6s. */
@media (prefers-reduced-motion: reduce) {
.btn[data-loading]::after,
button[data-loading] svg,
.is-loading > svg[data-icon-state="retry"] {
animation: spin var(--dur-spin-calm) linear infinite !important;
}
}
/* An opacity pulse instead of a travelling highlight: it reports the same
pending state without motion across the viewport. */
@keyframes skeleton-pulse {
50% {
opacity: 0.55;
}
}
/* And here is where that pulse is actually applied, which it was not.
The keyframes and the calm loop token were written on 25 September 2026 and left unwired.
`AGENTS.md` states that under reduced motion "the skeleton drops its travelling band and pulses
its own opacity instead (`skeleton-pulse`, with `.skeleton::after` hidden rather than frozen)".
The stylesheet did the first half only: the band was hidden and the block sat perfectly still.
Measured on 26 September 2026 with `prefers-reduced-motion: reduce` forced — a loading screen was
a set of motionless grey rectangles, which is the exact failure `docs/design-system.md` names:
"a frozen skeleton is an inert grey block, and it says nothing".
The declaration has to sit after the blanket `animation: none !important`, for the reason the
spinner above explains: `!important` on a later rule of equal specificity wins, and a rule placed
before the blanket one is simply overridden. */
@media (prefers-reduced-motion: reduce) {
.skeleton {
animation: skeleton-pulse var(--loop-skeleton-calm) ease-in-out infinite !important;
}
}
@media (prefers-reduced-transparency: reduce) {
/* Translucency is decoration here; legibility is not. The pair of scrim
tokens goes solid and the blur is dropped rather than thinned. */
/* Верхняя полоса и выехавшее меню - тоже материал, и они держат текст: адрес раздела и
четырнадцать названий. Размытие снимается, фон становится кроющим - иначе под
названием раздела просвечивает таблица, ровно то, от чего человек включил настройку. */
.modal-backdrop,
.topbar,
.sidebar {
backdrop-filter: none;
}
.topbar {
background: var(--bg);
}
.sidebar {
background: var(--surface);
}
}
/* Объяснительная страница: проза в одну колонку, ширина по чтению, а не по вьюпорту —
строка в 180 символов это строка, которую никто не читает.
Живёт в общем файле, потому что таких страниц теперь две и они про одно: кабинет
поставщика объясняет, что делает модерация, панель — чем ключ отличается от прокси и
провайдера. Вторая копия правил набора в supply.css была бы местом, где два объяснения
начинают выглядеть по-разному. */
.rules-copy {
max-width: 68ch;
display: flex;
flex-direction: column;
gap: 16px;
font-size: var(--fs-14);
line-height: 1.6;
}
.rules-copy h3 {
margin: 8px 0 0;
font-size: var(--fs-16);
}
.rules-copy ul {
margin: 0;
padding-inline-start: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.rules-copy code {
font-family: var(--font-mono);
font-size: var(--fs-14);
}
/* Две пятитактные метки у имени модели. Композит, которого нет в панели: там полоса —
заливка расхода, здесь дискретный сигнал. Высоты растут по порядку соседа, поэтому
отсутствующее измерение не сплющивает непрочитанные такты в плоскую линию.
В общем файле, потому что таких каталогов теперь два: витрина и кабинет. Вторая копия
правил — то место, где один экран начинает показывать другую скорость той же модели, а
`public.css` кабинету не отдаётся вовсе (`ownedBy` в web/embed.go). */
.model-cell {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
min-width: 0;
max-width: 100%;
}
.model-cell .cell-mono {
min-width: 0;
overflow-wrap: anywhere;
}
/* Имя модели — прямой потомок `.model-cell`, тогда как цены и апстрим-имена лежат внутри
ячеек и строк предложений. Поэтому иерархия строки держится на одном селекторе: имя
набирается основным цветом и 600, цена остаётся обычной насыщенности. До этого всё в
строке было одной насыщенности, и глаз не находил, что здесь выбирают. */
.model-cell > .cell-mono {
color: var(--text);
font-weight: 600;
}
/* The two bar meters beside a model name are one focusable target, not two. It carries the
combined label for both meters, and it is 44px tall and at least 44px wide (2.5.5) — the
bars inside stay 23×14, with the padding supplying the rest of the box. `box-sizing:
content-box` keeps the padding out of the bars' own height, and the negative margin stops
the target from inflating the row it sits in. */
.model-signals {
display: inline-flex;
align-items: flex-end;
gap: 8px;
flex: none;
position: relative;
height: 14px;
padding: 15px 12px; /* grid-exempt: 14 + 15×2 = 44px target (2.5.5) */
margin: -15px -12px; /* grid-exempt: cancels the padding above */
box-sizing: content-box;
}
/* The bars inside the target are decoration: the wrapper carries their meaning. They keep
their own tooltip rule out of the way by not having one. */
.signal {
position: relative;
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 14px;
}
/* The generic tooltip centres itself above its host. This host is a 47px box at the start of
the first cell: a centred box hangs out of the panel, and `border-collapse` on the table
clips anything that leaves the cell — «Скорость ещё не измерена» arrived as a sliced strip.
It is anchored past the end of the marks, inside the row, and dropped below them on narrow
screens where the cards take the first cell's padding away. */
.model-signals[data-tooltip]::after {
bottom: auto;
top: 50%;
inset-inline-start: 100%;
margin-inline-start: 8px;
transform: translateY(-50%);
}
.model-signals:hover,
.model-signals:focus-visible,
.model-signals[data-open] {
z-index: 2;
}
.model-signals[data-open]::after {
display: block;
}
@media (max-width: 1080px) {
.model-signals[data-tooltip]::after {
top: calc(100% + 8px);
transform: none;
}
}
.signal-tick {
display: block;
width: 3px;
border-radius: var(--radius-pill);
background: var(--text);
opacity: 0.22;
}
.signal-tick:nth-child(1) { height: 6px; }
.signal-tick:nth-child(2) { height: 8px; }
.signal-tick:nth-child(3) { height: 10px; }
.signal-tick:nth-child(4) { height: 12px; }
.signal-tick:nth-child(5) { height: 14px; }
.signal-tick[data-on] {
opacity: 1;
background: var(--text-muted);
}
.signal[data-kind="speed"] .signal-tick[data-on] {
background: var(--text);
}
@media (prefers-contrast: more) {
/* Faint text and hairline borders are the first things to fail here, so the
muted tiers collapse toward the primary text colour and every edge becomes
a defined line. */
.btn,
.icon-btn,
input,
select,
textarea {
border-color: var(--line-strong);
}
}
/* Windows High Contrast (и любой режим принудительных цветов) затирает наши фоны и
границы, оставляя системную палитру. Тогда всё, что различалось заливкой, сливается:
ступени, полосы, точки состояния. Здесь мы не спорим с системой, а возвращаем
различие через границы системными ключевыми словами — так элемент остаётся читаемым
и в чёрно-белом режиме. Кольцо фокуса тоже отдаётся системе: `Highlight` — это её
собственный цвет выделения, и он гарантированно виден на её фоне. */
@media (forced-colors: active) {
.btn,
.icon-btn,
.field input,
.field select,
.field textarea,
.console-box,
.catalogue-bar,
.lab-chip {
border: 1px solid CanvasText;
}
:focus-visible,
cap-widget:focus-within,
.console-box:focus-within {
outline: 2px solid Highlight;
outline-offset: 2px;
}
/* Полоса, точка и ступень несут смысл заливкой — под принудительными цветами
заливка исчезает, поэтому смысл переезжает на границу. */
.signal-tick,
.status-dot,
.meter > *,
.bar > * {
border: 1px solid CanvasText;
}
}
/* ==========================================================================
Telegram support
==========================================================================
The cabinet has no support section: support is a conversation with a person, and
the entrance lives in the corner of every screen instead. The handle is read from
`/api/public/legal`; a deployment without one renders nothing. Sits below toasts
(90) so a notification is never covered, and lifts above the cookie notice while
that notice is open. */
.telegram-widget {
position: fixed;
inset-block-end: max(20px, env(safe-area-inset-bottom, 0px));
inset-inline-end: max(16px, env(safe-area-inset-right, 0px));
z-index: 80;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
background: var(--surface-3);
color: var(--text);
font-size: var(--fs-14);
font-weight: 600;
text-decoration: none;
box-shadow: var(--shadow-md);
transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.telegram-widget:hover {
border-color: var(--accent);
background: var(--surface-2);
}
.telegram-widget:active {
transform: scale(0.975);
transition-duration: var(--dur-instant);
}
.telegram-widget svg {
width: 18px;
height: 18px;
color: var(--accent-text);
}
/* The cookie notice is a dialog over the bottom of the page. The contact button waits
until it is answered instead of competing with it for the same corner. */
body.has-cookie-notice .telegram-widget {
display: none;
}
@media (max-width: 520px) {
.telegram-widget {
width: 48px;
height: 48px;
justify-content: center;
padding: 0;
}
.telegram-widget span {
display: none;
}
}