is the hit target; keyboard-activatable via real anchor semantics. */
/* widen the hit/wash area by 8px each side WITHOUT shifting inner content (the
* negative margin cancels the added padding), so the rail dot stays aligned with
* any non-link rows in the same feed. */
.feed__row--link { cursor: pointer; color: inherit; border-radius: var(--r-sm);
margin-left: -8px; margin-right: -8px; padding-left: 10px; padding-right: 10px;
transition: background var(--t-fast) var(--ease); }
.feed__row--link:hover { background: var(--surface-2); }
.feed__row--link:hover .feed__msg { color: var(--ink); }
.feed__row--link:active { background: var(--surface-3); }
.feed__row--link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* the "→" affordance: reserved space, hidden until hover/focus, slides in (no reflow) */
.feed__go { align-self: center; flex: none; margin-left: 4px; color: var(--accent-text); font-weight: 700;
opacity: 0; transform: translateX(-3px);
transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out); }
.feed__row--link:hover .feed__go,
.feed__row--link:focus-visible .feed__go { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .feed__go { transition: none; } }
.sev-info .feed__dot { background: var(--info); }
.sev-warning .feed__dot { background: var(--warn); }
.sev-error .feed__dot { background: var(--danger); }
.sev-critical .feed__dot { background: var(--danger); box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--danger-soft); }
/* ===========================================================================
* 11. LAYOUT GRIDS
* ========================================================================= */
.grid-2 { display: grid; gap: 18px; grid-template-columns: 1.7fr 1fr; align-items: start; }
.grid-detail { display: grid; gap: 18px; grid-template-columns: 1.55fr 1fr; align-items: start; }
/* CSS-7: on 1041–1200px the telemetry column was cramped next to a near-empty
* events column. Collapse the detail grid to a single column already at 1200px so
* telemetry gets full width instead of fighting for it. */
@media (max-width: 1200px) { .grid-detail { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
/* ===========================================================================
* 12. PRINTER DETAIL — header + tabs
* ========================================================================= */
/* CSS-8: row-gap gives the command pad vertical breathing room once it wraps below
* the name/switcher (the `gap` shorthand also seeds column-gap at 16px). */
.pdhead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pdhead__main { flex: 1 1 240px; min-width: 240px; }
.pdhead__title { font-size: var(--fs-500); font-weight: 700; letter-spacing: -0.022em; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.pdhead__sub { color: var(--muted); font-size: var(--fs-75); margin-top: 6px; display: flex; gap: 13px; flex-wrap: wrap; }
.pdhead__sub span { display: inline-flex; align-items: center; gap: 5px; }
.pdhead__sub svg { width: 13px; height: 13px; color: var(--faint); }
.pdhead__nav { flex: none; align-self: flex-start; }
/* the command pad (Задача 1): primary + contextual print controls live opposite the
* name. align right of the header, wrap on narrow widths so no button gets clipped. */
.pdhead__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; align-self: flex-start; }
/* CSS-8: drop the pad below the name/switcher already at 900px — on 700–900px the
* print controls used to collide with the prev/next select. The pad stretches its
* buttons full-row so the primary "Загрузить и печать" stays the obvious target. */
@media (max-width: 900px) {
.pdhead__nav, .pdhead__actions { flex: 1 1 100%; justify-content: stretch; }
.pdhead__actions .btn { flex: 1 1 auto; }
}
@media (max-width: 680px) {
.pdswitch, .pdswitch__sel, .pdswitch .select-wrap { width: 100%; }
}
/* prev / next quick-switch between printers (fewer round-trips to the list) */
.pdswitch { display: inline-flex; align-items: center; gap: 6px; }
.pdswitch__sel { min-width: 150px; }
.pdswitch__sel .select { padding: 7px 34px 7px 12px; font-size: var(--fs-100); font-weight: 600; }
.iconbtn--sm { width: 32px; height: 32px; border-radius: var(--r-xs); }
/* CSS chevrons so the switcher matches the icon vocabulary without new SVGs */
.chev { width: 8px; height: 8px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); display: block; }
.chev--r { transform: rotate(45deg); margin-left: -2px; }
.chev--l { transform: rotate(-135deg); margin-right: -2px; }
.tabs {
display: flex; gap: 2px; padding: 4px; margin-bottom: 18px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-md);
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tab {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
padding: 7px 12px; border-radius: var(--r-xs); border: none; background: transparent;
font-size: var(--fs-100); font-weight: 550; color: var(--muted); cursor: pointer;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tab svg { width: 15px; height: 15px; opacity: .9; }
.tab:hover { background: var(--surface-2); color: var(--ink-2); }
.tab.is-active { background: var(--accent-soft); color: var(--accent-text); }
.tab.is-active svg { color: var(--accent); }
.tab__count { font-size: var(--fs-50); font-weight: 700; padding: 0 5px; border-radius: 999px; background: var(--surface-3); color: var(--muted); }
.tab.is-active .tab__count { background: var(--surface); color: var(--accent-text); }
/* telemetry grid */
/* CSS-12: 6 telemetry cells laid out with auto-fill produced ragged 4+2 / 3+3
* tails depending on width. Pin to a clean 3-up (6 -> 3+3), dropping to 2-up on
* the narrowest screens, so the grid never leaves an orphan cell. */
.tele { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) { .tele { grid-template-columns: repeat(2, 1fr); } }
.tele__cell { padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.tele__k { font-size: var(--fs-75); color: var(--muted); font-weight: 550; display: inline-flex; align-items: center; gap: 5px; }
.tele__k svg { width: 13px; height: 13px; color: var(--faint); }
.tele__v { font-size: var(--fs-400); font-weight: 680; letter-spacing: -0.02em; margin-top: 6px; color: var(--ink); }
.tele__v small { font-size: var(--fs-75); font-weight: 550; color: var(--muted); }
.tele__sub { font-size: var(--fs-75); color: var(--muted); margin-top: 2px; line-height: 1.4; }
.tmeter { margin-top: 8px; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.tmeter > span { display: block; height: 100%; background: var(--warn); border-radius: 999px; }
.tmeter.is-hot > span { background: var(--danger); }
/* donut progress (solid accent ring) */
.donut { --p: 0; --c: var(--accent); width: 124px; height: 124px; border-radius: 50%; flex: none;
background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0);
display: grid; place-items: center; position: relative; }
.donut.is-idle { --c: var(--faint); }
.donut::before { content:""; position:absolute; inset:11px; border-radius:50%; background:var(--surface); }
.donut__in { position: relative; text-align: center; }
.donut__pct { font-size: var(--fs-500); font-weight: var(--fw-display); letter-spacing: -0.025em; }
.donut__lbl { font-size: var(--fs-50); color: var(--muted); font-weight: 600; }
.overview-hero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.overview-hero__facts { flex: 1; min-width: 220px; display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.fact { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.fact__k { font-size: var(--fs-75); color: var(--muted); font-weight: 550; }
.fact__v { font-size: var(--fs-200); font-weight: var(--fw-strong); margin-top: 2px; letter-spacing: -0.01em; }
/* ===========================================================================
* 13. CAMERA wrap + snapshot strip
* ========================================================================= */
.camera-wrap { display: grid; gap: 14px; grid-template-columns: 1.5fr 1fr; align-items: start; }
.snapshot-shelf { display: flex; flex-direction: column; gap: 9px; }
.snapshot-thumb { border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: #000; }
.snapshot-thumb img { display: block; width: 100%; }
.snapshot-empty { padding: 24px 14px; text-align: center; color: var(--muted); font-size: var(--fs-75); border: 1px dashed var(--line); border-radius: var(--r-md); }
/* camera canvas crossfades in over its skeleton */
.cam-reveal { animation: cam-reveal var(--t-slow) var(--ease-out) both; }
@keyframes cam-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cam-reveal { animation: none; } }
/* ===========================================================================
* 14. TABLES (jobs, users, events)
* ========================================================================= */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-100); }
.tbl th {
text-align: left; font-size: var(--fs-75); font-weight: var(--fw-semi);
color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
letter-spacing: 0; text-transform: none; /* sentence case, not uppercase */
}
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background var(--t-fast) var(--ease); }
.tbl tbody tr:hover { background: var(--surface-2); }
/* tactility on an expandable row: the "Детали" disclosure button nudges + scales a
* touch on row hover (the same live micro-move proven on .swatch-pick:hover), so the
* row reads as openable, not just tinted. transform-only; reduced-motion drops it. */
.tbl tbody tr .tbl__actions .btn--ghost { transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out); }
.tbl tbody tr:hover .tbl__actions .btn--ghost svg { transform: scale(1.08); transition: transform var(--t-fast) var(--ease-out); }
/* C-8: a long file name must truncate, not blow out the column and shove the rest
* of the row. The flex name wrapper gets min-width:0 so its child can shrink; the
* file name itself ellipsises (app.js sets title= with the full name for tooltip). */
.tbl__name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tbl__name > div { min-width: 0; }
.tbl__thumb { width: 38px; height: 38px; border-radius: var(--r-xs); object-fit: cover; border: 1px solid var(--line); flex: none; background: var(--surface-3); }
.tbl__fname { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tbl__sub { font-size: var(--fs-75); color: var(--muted); }
.tbl__actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.tbl-scroll { overflow-x: auto; }
/* job detail expander */
.jobdetail { background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--line); padding: 15px; margin-top: 4px; }
.jobdetail__grid { display: flex; gap: 15px; flex-wrap: wrap; align-items: stretch; }
.jobdetail__thumb { width: 92px; height: 92px; border-radius: var(--r-sm); border: 1px solid var(--line); object-fit: cover; flex: none; background: var(--surface-3); }
.jobdetail__info { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.preview-soon {
flex: 1; min-width: 180px; min-height: 92px; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px; text-align: center;
border: 1px dashed var(--line); border-radius: var(--r-sm); color: var(--muted);
background: repeating-linear-gradient(45deg, var(--surface-2) 0 10px, var(--surface) 10px 20px);
font-size: var(--fs-75);
}
.preview-soon svg { width: 20px; height: 20px; color: var(--faint); }
/* ===========================================================================
* 15. AMS slots + inline "load a spool" form (REQUESTED DELTA 1)
* ========================================================================= */
/* slot-centric AMS (Bambu Studio / Handy school): all four bays always shown,
* compact loaded chip vs dashed empty placeholder, one inline editor at a time. */
.ams-unit-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
/* CSS-10: tighten the external-spool header's vertical offset so a single card under
* a wide heading no longer reads as a half-empty section. */
.ams-unit-h--ext { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ams-unit-h__t { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-200); font-weight: 680; letter-spacing: -0.01em; color: var(--ink); }
.ams-unit-h__t svg { width: 16px; height: 16px; color: var(--faint); }
.ams-unit-h__meta { font-size: var(--fs-75); color: var(--muted); font-variant-numeric: tabular-nums; }
.ams-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* the external bay is a single spool — keep it from stretching full-width */
.ams-grid--ext { grid-template-columns: repeat(auto-fit, minmax(190px, 220px)); }
.ams-slot { border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px; background: var(--surface); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.6), var(--shadow-xs); transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); display: flex; flex-direction: column; }
/* CSS-9: the inline editor spans the row, but its inner form is capped at 720px so
* the fields don't stretch to an unreadable width and the slot keeps its place. */
.ams-slot.is-editing { border-color: var(--accent-line); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.6), var(--shadow-md); grid-column: 1 / -1; }
.ams-slot.is-editing .spool-form { max-width: 720px; }
.ams-slot__top { display: flex; align-items: center; gap: 11px; }
.ams-swatch { width: 30px; height: 30px; border-radius: var(--r-sm); flex: none; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.ams-slot__idx { font-size: var(--fs-75); color: var(--muted); font-weight: 550; }
.ams-slot__mat { font-weight: 680; font-size: var(--fs-200); letter-spacing: -0.01em; }
.ams-slot__brand { font-size: var(--fs-75); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ams-slot__grams { margin-top: 11px; font-size: var(--fs-75); color: var(--muted); }
.ams-slot__grams .mono { color: var(--ink-2); }
.ams-meter { margin-top: 6px; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; }
.ams-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
/* loaded-bay actions: quiet ghost buttons in a row under the meter */
.ams-slot__act { display: flex; gap: 7px; margin-top: 12px; }
.ams-slot__act .btn { flex: 1; }
.ams-slot__clear { color: var(--muted); }
.ams-slot__clear:hover { color: var(--danger); border-color: var(--danger-line); }
/* EMPTY bay — dashed, recessed, muted; same cell footprint as a loaded bay */
.ams-slot.is-empty { border-style: dashed; border-color: var(--line-strong); background: var(--surface-2); box-shadow: none; }
.ams-slot.is-empty:hover { border-color: var(--accent-line); }
.ams-slot__empty-top { display: flex; align-items: center; gap: 11px; }
.ams-swatch--empty { background:
repeating-linear-gradient(45deg, var(--surface) 0 5px, var(--surface-2) 5px 10px);
box-shadow: 0 0 0 1px var(--line-strong); border-color: var(--surface-2); }
.ams-slot__mat--empty { color: var(--faint); font-weight: 600; }
.ams-slot.is-empty .ams-slot__act { margin-top: auto; padding-top: 14px; }
/* per-slot spool-entry form (inline, obvious) */
.spool-form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 11px; }
.spool-form__lead { display: flex; align-items: center; gap: 7px; font-size: var(--fs-75); font-weight: 600; color: var(--accent-text); }
.spool-form__lead svg { width: 14px; height: 14px; }
.spool-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.spool-grid .field--full { grid-column: 1 / -1; }
/* material swatch picker */
.swatch-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.swatch-pick { width: 26px; height: 26px; border-radius: var(--r-xs); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease); }
.swatch-pick:hover { transform: scale(1.08); }
.swatch-pick.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.swatch-native { width: 36px; height: 30px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); cursor: pointer; }
.swatch-native::-webkit-color-swatch-wrapper { padding: 0; }
.swatch-native::-webkit-color-swatch { border: none; border-radius: 4px; }
.swatch-native::-moz-color-swatch { border: none; border-radius: 4px; }
.swatch-native:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spool-temps { display: flex; gap: 10px; }
.spool-temps .field { flex: 1; }
.spool-form__act { margin-top: 4px; gap: 8px; }
/* ===========================================================================
* 16. ERRORS panel
* ========================================================================= */
.errcard { border: 1px solid var(--danger-line); border-radius: var(--r-md); overflow: hidden; }
.errcard__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--danger-soft); }
.errcard__ic { width: 38px; height: 38px; border-radius: var(--r-sm); flex:none; display: grid; place-items: center; background: var(--surface); color: var(--danger); border: 1px solid var(--danger-line); }
.errcard__body { padding: 16px; }
.errcard__code { font-size: var(--fs-75); color: var(--muted); }
.errcard__title { font-weight: 680; font-size: var(--fs-300); }
.errcard__desc { color: var(--ink-2); font-size: var(--fs-100); margin: 8px 0 14px; }
.hms-list { display: flex; flex-direction: column; gap: 8px; }
.hms-item { display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.hms-item__ic { color: var(--faint); flex: none; margin-top: 1px; }
.hms-item__ic svg { width: 15px; height: 15px; }
/* C-3: raw-status block as a LIGHT code surface. Replaces the dark #0f172a
* (a direct violation of the light-only theme) with a recessed neutral panel on
* tokens — terminal feel via --surface-3 + mono, never a dark slab. */
.codeblock {
background: var(--surface-3);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--r-md);
font-family: var(--font-mono);
font-size: var(--fs-75);
line-height: 1.5;
padding: 12px 14px;
margin: 0;
overflow: auto;
white-space: pre;
-webkit-overflow-scrolling: touch;
}
/* HMS as a collapsed fold (Задача 3): info-only, sits at the bottom of tabControl,
* closed by default so diagnostic codes never crowd the actionable top of the tab.
* The summary is a quiet card header; the body uses the same hms-list as before. */
.hms-fold { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.6), var(--shadow-xs); overflow: hidden; }
.hms-fold__sum {
display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
padding: 13px 16px; font-size: var(--fs-200); font-weight: 650; letter-spacing: -0.01em; color: var(--ink-2);
transition: background var(--t-fast) var(--ease);
}
.hms-fold__sum::-webkit-details-marker { display: none; }
.hms-fold__sum:hover { background: var(--surface-2); }
.hms-fold__sum svg { width: 16px; height: 16px; color: var(--muted); }
.hms-fold__lbl { color: var(--ink); }
/* a CSS chevron that rotates on open — matches the .select-wrap chevron vocabulary */
.hms-fold__chev { width: 7px; height: 7px; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease-out); }
.hms-fold[open] .hms-fold__chev { transform: rotate(45deg); }
.hms-fold[open] .hms-fold__sum { border-bottom: 1px solid var(--line-soft); }
.hms-fold__body { padding: 14px 16px; animation: adv-open var(--t-base) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
.hms-fold__chev { transition: none; }
.hms-fold__body { animation: none; }
}
/* ===========================================================================
* 17. FORMS — custom controls (no default browser look)
* ========================================================================= */
.form-grid { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field--full { grid-column: 1 / -1; }
/* CSS-17: the small "label" tier (field labels, table headers, filter labels) shares
* one semibold token so identical-by-role labels match by token, not by chance. */
.field__label { font-size: var(--fs-75); font-weight: var(--fw-semi); color: var(--ink-2); transition: color var(--t-fast) var(--ease); }
/* CSS-14: tighten small meta to a single deliberate step (1.4) instead of inheriting
* the body's airy 1.5, which read as loose at 11–12px. */
.field__hint { font-size: var(--fs-75); color: var(--muted); line-height: 1.4; }
/* a quiet "you are here" — the label sharpens to accent ink while its input is
* focused (the expensive-form micro-signal; reduced-motion drops the transition). */
.field:focus-within .field__label { color: var(--accent-text); }
.input, .select, .textarea {
font: inherit; font-size: var(--fs-100); color: var(--ink);
padding: 9px 12px; border-radius: var(--r-sm);
border: 1px solid var(--line); background: var(--surface);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
width: 100%;
}
.input::placeholder, .textarea::placeholder { color: var(--muted-strong); opacity: 1; } /* >=4.5:1 */
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-strong); }
.input:focus, .select:focus, .textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.input:disabled, .select:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px oklch(0.55 0.20 27 / 0.18); }
.textarea { resize: vertical; min-height: 84px; }
.select-wrap { position: relative; }
.select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 36px; cursor: pointer; }
.select-wrap::after {
content: ""; position: absolute; right: 13px; top: 50%; width: 8px; height: 8px;
border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
/* custom checkbox */
.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--fs-100); user-select: none; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box { width: 19px; height: 19px; border-radius: var(--r-xs); border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; flex: none; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.check__box svg { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px var(--accent-ring); }
.check:hover .check__box { border-color: var(--accent); }
/* toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { width: 42px; height: 24px; border-radius: 999px; background: var(--line-strong); flex: none; position: relative; transition: background var(--t-base) var(--ease); }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t-base) var(--ease-out); }
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--accent-ring); }
/* segmented control */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); flex-wrap: wrap; }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; opacity: 0; }
.seg__opt span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-xs); font-size: var(--fs-75); font-weight: 550; color: var(--muted); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.seg__opt input:checked + span { background: var(--surface); color: var(--accent-text); box-shadow: var(--shadow-sm); }
.seg__opt:hover span { color: var(--ink-2); }
.seg__opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }
/* notif settings row */
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.setrow:last-child { border-bottom: none; }
.setrow__main { display: flex; align-items: center; gap: 12px; }
.setrow__ic { width: 36px; height: 36px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.setrow__ic svg { width: 17px; height: 17px; }
.setrow__title { font-weight: 600; font-size: var(--fs-100); }
.setrow__sub { font-size: var(--fs-75); color: var(--muted); margin-top: 1px; }
/* ===========================================================================
* 18. LOGIN — solid accent panel (no gradient blobs)
* ========================================================================= */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 0.95fr; }
.login__aside {
position: relative; overflow: hidden; color: #fff; padding: 52px 48px;
display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
background: var(--accent-active);
}
/* a single restrained dot-grid texture, masked — not a gradient blob */
.login__aside::after {
content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
background-image: radial-gradient(oklch(1 0 0 / 0.16) 1px, transparent 1.4px);
background-size: 22px 22px;
mask-image: radial-gradient(120% 100% at 30% 20%, #000 35%, transparent 80%);
-webkit-mask-image: radial-gradient(120% 100% at 30% 20%, #000 35%, transparent 80%);
}
.login__brand { display: inline-flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
.login__brand .brand__mark { background: oklch(1 0 0 / 0.16); border-color: oklch(1 0 0 / 0.22); box-shadow: 0 0 0 1px oklch(1 0 0 / 0.12); }
.login__brand-name { font-size: var(--fs-300); font-weight: var(--fw-bold); }
/* C-11: brand emphasis on the dark login panel via a token (--accent-on-dark),
* replacing the hardcoded #c7d2fe so login matches the rest of the accent system. */
.login__brand-name b { color: var(--accent-on-dark); }
.login__pitch { position: relative; z-index: 1; max-width: 32ch; }
.login__pitch h1 { font-size: var(--fs-700); font-weight: 720; letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 14px; }
.login__pitch p { font-size: var(--fs-300); color: oklch(1 0 0 / 0.86); line-height: 1.6; }
.login__chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.login__chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: oklch(1 0 0 / 0.13); border: 1px solid oklch(1 0 0 / 0.20); font-size: var(--fs-75); font-weight: 500; }
.login__chip svg { width: 14px; height: 14px; }
.login__panel { display: grid; place-items: center; padding: 40px 28px; background: var(--bg); }
.login__card { width: min(408px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px 30px; box-shadow: var(--shadow-lg); }
.login__title { font-size: var(--fs-600); font-weight: 720; letter-spacing: -0.02em; }
.login__lead { color: var(--muted); font-size: var(--fs-100); margin: 5px 0 24px; }
.login__form { display: flex; flex-direction: column; gap: 15px; }
.login__divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 15px; color: var(--muted); font-size: var(--fs-75); }
.login__divider::before, .login__divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.quick-roles { display: grid; gap: 9px; grid-template-columns: repeat(3, 1fr); }
.quick-role {
display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 8px;
border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
cursor: pointer; text-align: center;
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.quick-role:hover { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: var(--shadow-sm); }
.quick-role:active { background: var(--accent-soft-2); }
.quick-role__ic { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.quick-role__ic svg { width: 17px; height: 17px; }
.quick-role__label { font-size: var(--fs-75); font-weight: 650; }
.quick-role__role { font-size: var(--fs-50); color: var(--muted); }
.login__hint { margin-top: 16px; text-align: center; font-size: var(--fs-75); color: var(--muted); }
.input-ic { position: relative; }
/* icon() оборачивает SVG в , поэтому целимся в обёртку-span, а не в > svg */
.input-ic > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; color: var(--muted); pointer-events: none; }
.input-ic > span svg { width: 16px; height: 16px; }
.input-ic .input { padding-left: 38px; }
/* ===========================================================================
* 19. EMPTY STATES (teach the interface) + skeletons
* ========================================================================= */
.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty__ic { width: 50px; height: 50px; border-radius: var(--r-lg); margin: 0 auto 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.empty__ic svg { width: 24px; height: 24px; }
.empty__title { font-size: var(--fs-300); font-weight: 680; color: var(--ink); }
.empty__sub { font-size: var(--fs-100); margin: 6px auto 0; max-width: 42ch; line-height: 1.55; }
.empty__cta { margin-top: 16px; display: inline-flex; gap: 8px; }
.guard { max-width: 460px; margin: 56px auto; }
.guard .empty__ic { background: var(--danger-soft); color: var(--danger); }
/* skeleton loaders (shimmer, reduced-motion safe) */
.skel { position: relative; overflow: hidden; background: var(--surface-3); border-radius: var(--r-xs); }
.skel::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.6), transparent);
transform: translateX(-100%);
animation: shimmer 1.25s infinite var(--ease);
}
.skel-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; background: var(--surface); }
.skel-line { height: 11px; border-radius: 999px; }
.skel-line + .skel-line { margin-top: 9px; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.discover-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.discover-item__name { font-weight: 600; font-size: var(--fs-100); }
.discover-item__meta { font-size: var(--fs-75); color: var(--muted); }
.filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filter-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.filter-label { font-size: var(--fs-75); font-weight: var(--fw-semi); color: var(--muted); margin-right: 2px; text-transform: none; letter-spacing: 0; }
.filter-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: var(--fs-75); font-weight: 540;
cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out);
}
/* echo the .swatch-pick:hover micro-scale so chips feel selectable, not flat */
.filter-chip:hover { border-color: var(--line-strong); background: var(--surface-2); transform: scale(1.04); }
.filter-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* C-10: AMS-mapping chips join the system instead of ad-hoc inline styling. A
* swatch variant carries a 16px material chip (the recessed --ams-swatch material:
* white inset bezel + 1px line ring); colour is supplied via --sw on the element.
* Active state reuses .is-active (accent fill), and the swatch keeps a readable ring
* when selected. role=checkbox/aria-checked stays in the markup. */
.filter-chip--swatch::before {
content: ""; width: 16px; height: 16px; border-radius: 5px; flex: none;
background: var(--sw, var(--line-strong));
border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line);
}
.filter-chip--swatch.is-active::before { border-color: oklch(1 0 0 / 0.75); box-shadow: 0 0 0 1px oklch(1 0 0 / 0.45); }
.filter-chip--swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* printer filter as a