/* inter-cyrillic-ext-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/auth/assets/inter-cyrillic-ext-opsz-normal-CfYZpDVp.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/auth/assets/inter-cyrillic-opsz-normal-BFQXbQ-f.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/auth/assets/inter-greek-ext-opsz-normal-BmPQvyvo.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/auth/assets/inter-greek-opsz-normal-BM0NlUE_.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/auth/assets/inter-vietnamese-opsz-normal-Ci9T9ieq.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/auth/assets/inter-latin-ext-opsz-normal-DpK-iCPk.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/auth/assets/inter-latin-opsz-normal-BwkfbSeq.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/*
 * «Стекло» base styles (KS-070). Every number comes from ui/tokens (theme.ts, scale.ts) as CSS variables on
 * a .k-design element: colours, materials, spacing, heights, radii, type, depth. This file only wires them.
 */
.k-design {
  --font: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* 120–200 ms for state changes (lesson: motion audit 2026-11-09); --dur-3 only for windows and sheets coming in */
  --dur-press: 120ms;
  --dur-1: 140ms;
  --dur-2: 200ms;
  --dur-3: 240ms;
  --dur-out: 150ms;
  --ring: 0 0 0 var(--ring-size) color-mix(in srgb, var(--c-focus) 45%, transparent);
  --lg-angle: 210deg;
  --lg-x: 25%;
  --lg-y: 12%;

  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: var(--t-body);
  font-weight: var(--t-body-w);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-track);
  color: var(--c-text);
  background: var(--c-page);
  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
.k-design[data-theme='night'] {
  color-scheme: dark;
}

/* type roles: size, weight (heavier when small, +40…50 at night), tracking and leading from scale.ts */
.t-hero {
  font-size: var(--t-hero);
  font-weight: var(--t-hero-w);
  letter-spacing: var(--t-hero-track);
  line-height: var(--t-hero-lh);
}
.t-large {
  font-size: var(--t-large);
  font-weight: var(--t-large-w);
  letter-spacing: var(--t-large-track);
  line-height: var(--t-large-lh);
}
.t-title1 {
  font-size: var(--t-title1);
  font-weight: var(--t-title1-w);
  letter-spacing: var(--t-title1-track);
  line-height: var(--t-title1-lh);
}
.t-title2 {
  font-size: var(--t-title2);
  font-weight: var(--t-title2-w);
  letter-spacing: var(--t-title2-track);
  line-height: var(--t-title2-lh);
}
.t-title3 {
  font-size: var(--t-title3);
  font-weight: var(--t-title3-w);
  letter-spacing: var(--t-title3-track);
  line-height: var(--t-title3-lh);
}
.t-body {
  font-size: var(--t-body);
  font-weight: var(--t-body-w);
  letter-spacing: var(--t-body-track);
  line-height: var(--t-body-lh);
}
.t-callout {
  font-size: var(--t-callout);
  font-weight: var(--t-callout-w);
  letter-spacing: var(--t-callout-track);
  line-height: var(--t-callout-lh);
}
.t-footnote {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  letter-spacing: var(--t-footnote-track);
  line-height: var(--t-footnote-lh);
}
.t-caption {
  font-size: var(--t-caption);
  font-weight: var(--t-caption-w);
  letter-spacing: var(--t-caption-track);
  line-height: var(--t-caption-lh);
}

/* motion off (page switch) or asked by the OS: no animation at all */
.k-design[data-motion='off'] {
  --dur-press: 0ms;
  --dur-1: 0ms;
  --dur-2: 0ms;
  --dur-3: 0ms;
  --dur-out: 0ms;
}
.k-design[data-motion='off'] *,
.k-design[data-motion='off'] *::before,
.k-design[data-motion='off'] *::after {
  transition-duration: 0ms !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .k-design {
    --dur-press: 0ms;
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-out: 0ms;
  }
  .k-design *,
  .k-design *::before,
  .k-design *::after {
    transition-duration: 0ms !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

.k-design *,
.k-design *::before,
.k-design *::after {
  box-sizing: border-box;
}
/* keyboard focus is an outline: glass layers set box-shadow with !important and would erase a ring */
.k-design :focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.k-design ::selection {
  background: color-mix(in srgb, var(--c-accent) 30%, transparent);
}

/* ---------- frosted glass and the dense plate (fallbacks of the liquid glass) ---------- */
.glass-thin,
.glass,
.glass-thick,
.glass-island,
.glass-clear {
  color: var(--c-glass-text);
  box-shadow: var(--edge-hi), var(--edge-line);
}
.glass-thin,
.glass,
.glass-thick,
.glass-island,
.glass-clear {
  /* the same fine frost grain on every plate, evenly */
  background-image: var(--frost-grain);
  background-size: 6rem 6rem;
}
.glass-thin {
  background-color: var(--glass-thin);
  backdrop-filter: var(--glass-thin-filter);
  -webkit-backdrop-filter: var(--glass-thin-filter);
}
.glass,
.glass-clear {
  background-color: var(--glass-regular);
  backdrop-filter: var(--glass-regular-filter);
  -webkit-backdrop-filter: var(--glass-regular-filter);
}
.glass-thick {
  background-color: var(--glass-thick);
  backdrop-filter: var(--glass-thick-filter);
  -webkit-backdrop-filter: var(--glass-thick-filter);
  box-shadow: var(--edge-hi), var(--edge-line);
}
.glass-island {
  color: var(--island-ink);
  background-color: var(--glass-island);
  backdrop-filter: var(--glass-island-filter);
  -webkit-backdrop-filter: var(--glass-island-filter);
  box-shadow: var(--island-edge);
}

/* ---------- a panel attached to a screen edge (side menu, top strip, bottom sheet): no rim light and no
   outline on the edge side, only a hairline towards the content. The rim belongs to floating things. ---------- */
[data-edge]::before {
  display: none !important;
}
[data-edge] {
  box-shadow: none !important;
}
[data-edge='left'] {
  box-shadow: inset -0.5px 0 0 var(--c-separator) !important;
}
[data-edge='right'] {
  box-shadow: inset 0.5px 0 0 var(--c-separator) !important;
}
[data-edge='top'] {
  box-shadow: inset 0 -0.5px 0 var(--c-separator) !important;
}
[data-edge='bottom'] {
  box-shadow: inset 0 0.5px 0 var(--c-separator) !important;
}

/* ---------- text helpers ---------- */
.k-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv05' 1;
}
.k-mono {
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  font-size: 0.92em;
  letter-spacing: 0;
}
.k-secondary {
  color: var(--c-text-secondary);
}
.k-icon {
  width: 1em;
  height: 1em;
  flex: none;
  display: inline-block;
  vertical-align: -0.14em;
}
.k-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes k-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes k-rise {
  from {
    opacity: 0;
    transform: translateY(var(--sp-field));
  }
}
@keyframes k-spin {
  to {
    rotate: 360deg;
  }
}
@keyframes k-indeterminate {
  from {
    translate: -100% 0;
  }
  to {
    translate: 250% 0;
  }
}
@keyframes k-pop {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}

/* ---------- corners: continuous curvature, as Apple (author 2026-11-10: «как у Apple … по типу Tesla») ----------
   Where the browser has corner-shape, every rounded box draws a squircle; the backdrop blur, the fill and the rim
   follow the same shape (they clip to the border box). True pills (segmented groups, switches, the OSD mode
   capsule, --r-pill) and circles stay round — and so do the single-line controls, which are capsules now (buttons,
   chips, tabs: --r-btn-*, --r-chip; author 2026-11-09 «слишком квадратные»). Without corner-shape the radius is
   the plain circular arc.
   The box corner is superellipse(1.5), not the `squircle` keyword (superellipse(2)): at the same radius the keyword
   cuts the corner to about half of a circular arc, and 13–18 px plates read as square on a phone (KS-070 C). 1.5
   (exponent 2^1.5 ≈ 2.8) still has continuous curvature where the curve meets the edge, and reads like Apple's
   continuous corner of that radius. One token, --corner-box, for every rounded box. */
@supports (corner-shape: squircle) {
  .k-design {
    --corner-box: superellipse(1.5);
  }
  .k-design
    :where(
      .glass:not(.k-pocket__shell),
      .glass-thin,
      .glass-thick,
      .glass-island,
      .glass-clear,
      .glass-matte,
      .k-squircle,
      .k-surface,
      .k-toast,
      .k-toast__tile,
      .k-dialog,
      .k-menu,
      .k-field__box,
      .k-island__shell,
      .k-cluster__bar,
      .k-cluster__details,
      .sg-stage,
      .sg-card,
      .sg-group,
      .sg-panel,
      .sg-hero__stage,
      .sg-window,
      .st-frame,
      .st-panel,
      .st-set,
      .st-fn,
      .st-ctls,
      .st-radio__banner
    ) {
    corner-shape: var(--corner-box);
  }
  /* capsule controls stay round even when they are glass too (a matte chip, a liquid tab): a squircle would
     square a half-height radius off (author 2026-11-09 «слишком квадратные») */
  .k-design :is(.k-btn, .k-tag, .k-tabs__tab, .st-chip, .st-radio__banner, .v-badge, .b-badge, .d-event__label, .v-chip__fill, .k-cluster__bar, .k-island__shell, .sg-hero__clock, .sg-lens-caption, .k-field__box) {
    corner-shape: round;
  }
  /* the liquid rim and sheen are pseudo-elements: they take the same corner */
  .k-design [data-lg]::before,
  .k-design [data-lg]::after {
    corner-shape: inherit;
  }
}
/* Controls of the «Стекло» design code. Geometry, type and colour only from tokens (ui/tokens). */

.glass,
.glass-thick,
.glass-thin,
[data-lg] {
  --c-text: var(--c-glass-text);
  --c-text-secondary: var(--c-glass-secondary);
  --c-accent-on-page: var(--c-accent-text);
  --tint: color-mix(in srgb, var(--c-glass-text) 9%, transparent);
  --tint-strong: color-mix(in srgb, var(--c-glass-text) 16%, transparent);
}
.k-design {
  --tint: color-mix(in srgb, var(--c-text) 7%, transparent);
  --tint-strong: color-mix(in srgb, var(--c-text) 13%, transparent);
}

/* A solid surface for what floats over glass (menus, lists, notes, dialogs): never glass on glass. */
.k-surface {
  color: var(--c-text);
  background: var(--c-card);
  border-radius: var(--r-menu);
  box-shadow: var(--edge-hi), var(--edge-line), var(--sh-3);
}
.k-design[data-theme='night'] .k-surface {
  background: var(--c-surface);
  --c-text: var(--c-surface-text);
  --c-text-secondary: var(--c-surface-secondary);
}

.k-spinner {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  animation: k-spin 0.9s linear infinite;
}

/* ---------- button: a capsule (radius = height / 2); the icon side is a step tighter ---------- */
.k-btn {
  --bg: var(--tint);
  --fg: var(--c-text);
  --pad: var(--sp-btn-m);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-icon);
  height: var(--h-m);
  padding: 0 var(--pad);
  border: 0;
  border-radius: var(--r-btn-m);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: var(--t-callout);
  font-weight: var(--w-semibold);
  letter-spacing: var(--t-callout-track);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.k-btn:has(> .k-btn__icon, > .k-spinner):has(> .k-btn__label) {
  padding-left: calc(var(--pad) - var(--sp-hair));
}
.k-btn[data-size='s'] {
  --pad: var(--sp-btn-s);
  height: var(--h-s);
  border-radius: var(--r-btn-s);
  font-size: var(--t-footnote);
}
.k-btn[data-size='l'] {
  --pad: var(--sp-btn-l);
  height: var(--h-l);
  border-radius: var(--r-btn-l);
  font-size: var(--t-body);
}
.k-btn[data-icon-only] {
  width: var(--h-m);
  padding: 0;
}
.k-btn[data-icon-only][data-size='s'] {
  width: var(--h-s);
}
.k-btn[data-icon-only][data-size='l'] {
  width: var(--h-l);
}
.k-btn__icon {
  font-size: 1.25em;
}
/* the name of an icon-only button: on hover (after a pause), on keyboard focus, on a long press */
.k-tip {
  position: absolute;
  z-index: 40;
  bottom: calc(100% + var(--sp-icon));
  left: 50%;
  translate: -50% 0;
  padding: var(--sp-hair) var(--sp-field);
  border-radius: var(--r-item);
  background: var(--c-text);
  color: var(--c-card);
  font-size: var(--t-footnote);
  font-weight: var(--w-semibold);
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: var(--sh-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-1) var(--ease-out);
}
.k-btn:hover > .k-tip {
  opacity: 1;
  transition-delay: 400ms;
}
.k-btn:focus-visible > .k-tip,
.k-btn[data-held] > .k-tip {
  opacity: 1;
  transition-delay: 0ms;
}
.k-btn[data-variant='primary'] {
  --bg: var(--c-accent);
  --fg: var(--matte-accent-ink);
}
.k-btn[data-variant='quiet'] {
  --bg: transparent;
  --fg: var(--c-accent-on-page);
}
.k-btn[data-variant='danger'] {
  --bg: var(--c-alarm);
  --fg: var(--matte-danger-ink);
}
.k-btn:hover:not([aria-disabled]),
.k-btn[data-force='hover'] {
  --bg: var(--tint-strong);
}
.k-btn[data-variant='primary']:hover:not([aria-disabled]),
.k-btn[data-variant='primary'][data-force='hover'] {
  --bg: color-mix(in srgb, var(--c-accent), var(--c-black) 10%);
}
.k-btn[data-variant='quiet']:hover:not([aria-disabled]),
.k-btn[data-variant='quiet'][data-force='hover'] {
  --bg: var(--tint);
}
.k-btn[data-variant='danger']:hover:not([aria-disabled]),
.k-btn[data-variant='danger'][data-force='hover'] {
  --bg: var(--c-alarm);
  --fg: var(--c-alarm-ink);
}
.k-btn:active:not([aria-disabled]),
.k-btn[data-force='active'] {
  transform: scale(0.965);
}
.k-btn[data-variant='default']:active:not([aria-disabled]),
.k-btn[data-variant='default'][data-force='active'] {
  --bg: color-mix(in srgb, var(--c-text) 20%, transparent);
}
.k-btn[data-variant='primary']:active:not([aria-disabled]),
.k-btn[data-variant='primary'][data-force='active'] {
  --bg: color-mix(in srgb, var(--c-accent), var(--c-black) 20%);
}
.k-btn[data-force='focus'] {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.k-btn[aria-pressed='true'] {
  --bg: var(--c-text);
  --fg: var(--c-card);
}
.k-btn[aria-disabled='true'] {
  --bg: color-mix(in srgb, var(--c-text) 5%, transparent);
  --fg: var(--c-text-secondary);
  box-shadow: none;
  cursor: not-allowed;
}
.k-btn[data-loading] {
  cursor: progress;
}
/* the group is concentric: radius = small button radius + track inset */
.k-btn-group {
  display: inline-flex;
  gap: var(--sp-hair);
  padding: var(--sp-track);
  border-radius: var(--r-group);
  background: var(--tint);
}
.k-btn-group .k-btn {
  --bg: transparent;
  --pad: var(--sp-btn-s);
  height: calc(var(--h-m) - 2 * var(--sp-track));
  border-radius: var(--r-segment);
  font-size: var(--t-footnote);
}
.k-btn-group .k-btn[data-icon-only] {
  width: calc(var(--h-m) - 2 * var(--sp-track));
}
.k-btn-group .k-btn:hover:not([aria-disabled]) {
  --bg: var(--tint);
}
.k-btn-group .k-btn[aria-pressed='true'] {
  --bg: var(--c-card);
  --fg: var(--c-text);
}
.k-design[data-theme='night'] .k-btn-group .k-btn[aria-pressed='true'] {
  --bg: var(--c-thumb);
  --fg: var(--c-thumb-ink);
}

/* ---------- switch, checkbox, radio: the whole row is the target ---------- */
.k-switch,
.k-check,
.k-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-field);
  min-height: var(--h-m);
  padding: 0 var(--sp-hair);
  border-radius: var(--r-field);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.k-switch__input,
.k-check__input,
.k-radio__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.k-switch:has(input:focus-visible),
.k-check:has(input:focus-visible),
.k-radio:has(input:focus-visible),
.k-switch[data-force='focus'],
.k-check[data-force='focus'],
.k-radio[data-force='focus'] {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.k-switch[data-off],
.k-check[data-off],
.k-radio[data-off] {
  cursor: not-allowed;
  color: var(--c-text-secondary);
}

/* track radius = knob radius + inset (concentric) */
.k-switch__track {
  --sw-w: calc(var(--h-s) * 1.75);
  position: relative;
  flex: none;
  width: var(--sw-w);
  height: var(--h-s);
  border-radius: var(--r-switch);
  background: var(--tint-strong);
  transition: background-color var(--dur-2) var(--ease-out);
}
.k-switch__knob {
  position: absolute;
  top: var(--sp-track);
  left: var(--sp-track);
  width: calc(var(--h-s) - 2 * var(--sp-track));
  height: calc(var(--h-s) - 2 * var(--sp-track));
  border-radius: var(--r-knob);
  background: var(--c-knob);
  box-shadow: var(--sh-2);
  transition:
    translate var(--dur-1) var(--ease-out),
    width var(--dur-1) var(--ease-out);
}
.k-switch__input:checked ~ .k-switch__track {
  background: var(--c-accent);
}
.k-switch__input:checked ~ .k-switch__track .k-switch__knob {
  translate: calc(var(--sw-w) - var(--h-s)) 0;
}
.k-switch:hover:not([data-off]) .k-switch__track,
.k-switch[data-force='hover'] .k-switch__track {
  background: color-mix(in srgb, var(--c-text) 22%, transparent);
}
.k-switch:hover:not([data-off]) .k-switch__input:checked ~ .k-switch__track,
.k-switch[data-force='hover'] .k-switch__input:checked ~ .k-switch__track {
  background: color-mix(in srgb, var(--c-accent), var(--c-black) 10%);
}
.k-switch:active:not([data-off]) .k-switch__knob,
.k-switch[data-force='active'] .k-switch__knob {
  width: calc(var(--h-s) - 2 * var(--sp-track) + var(--sp-icon));
}
.k-switch:active:not([data-off]) .k-switch__input:checked ~ .k-switch__track .k-switch__knob,
.k-switch[data-force='active'] .k-switch__input:checked ~ .k-switch__track .k-switch__knob {
  translate: calc(var(--sw-w) - var(--h-s) - var(--sp-icon)) 0;
}
.k-switch[data-off] .k-switch__track {
  opacity: 0.45;
}
.k-switch__label {
  font-weight: var(--w-medium);
}
.k-switch__word {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  color: var(--c-text-secondary);
}
.k-switch--row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-control);
  width: 100%;
  min-height: var(--h-l);
  padding: var(--sp-icon) 0;
  border-radius: 0;
}
.k-switch__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-hair);
}
.k-switch__note {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  color: var(--c-text-secondary);
}

.k-check__box {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--th-check);
  height: var(--th-check);
  border-radius: var(--r-check);
  background: var(--c-card);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-text) 35%, transparent);
  color: var(--c-accent-ink);
  transition:
    background-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.k-check__box .k-icon {
  stroke-width: 3;
}
.k-check__input:checked ~ .k-check__box,
.k-check__input:indeterminate ~ .k-check__box {
  background: var(--c-accent);
  box-shadow: none;
}
.k-check__dash {
  width: 60%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.k-check:hover:not([data-off]) .k-check__box,
.k-check[data-force='hover'] .k-check__box {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-text) 60%, transparent);
}
.k-check:active:not([data-off]) .k-check__box,
.k-check[data-force='active'] .k-check__box {
  transform: scale(0.92);
}
.k-check[data-off] .k-check__box {
  opacity: 0.45;
}
.k-check__input[aria-invalid] ~ .k-check__box {
  box-shadow: inset 0 0 0 2px var(--c-alarm-text);
}
.k-check-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-hair);
}

.k-radios {
  display: flex;
  flex-direction: column;
  gap: var(--sp-hair);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.k-radios .k-field__label {
  margin-bottom: var(--sp-hair);
  padding: 0;
}
.k-radio__dot {
  position: relative;
  flex: none;
  width: var(--th-check);
  height: var(--th-check);
  border-radius: 50%;
  background: var(--c-card);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-text) 35%, transparent);
  transition:
    background-color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.k-radio__dot::after {
  content: '';
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--c-knob);
  scale: 0.6;
  opacity: 0;
  transition:
    scale var(--dur-1) var(--ease-out),
    opacity var(--dur-1) var(--ease-out);
}
.k-radio__input:checked ~ .k-radio__dot {
  background: var(--c-accent);
  box-shadow: none;
}
.k-radio__input:checked ~ .k-radio__dot::after {
  scale: 1;
  opacity: 1;
}
.k-radio:hover:not([data-off]) .k-radio__dot,
.k-radio[data-force='hover'] .k-radio__dot {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-text) 60%, transparent);
}
.k-radio:active:not([data-off]) .k-radio__dot,
.k-radio[data-force='active'] .k-radio__dot {
  transform: scale(0.92);
}
.k-radio[data-off] .k-radio__dot {
  opacity: 0.45;
}
.k-radio__text {
  display: flex;
  flex-direction: column;
  line-height: var(--t-callout-lh);
}
.k-radio__hint {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  color: var(--c-text-secondary);
}

/* ---------- fields: radius --r-field, so a field in a panel is concentric with it ---------- */
.k-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-icon);
  width: var(--field-w, 100%);
  min-width: 0;
}
.k-field__label {
  font-size: var(--t-footnote);
  font-weight: var(--w-semibold);
  color: var(--c-text-secondary);
}
.k-field__box {
  display: flex;
  align-items: center;
  gap: var(--sp-icon);
  height: var(--h-m);
  padding: 0 var(--sp-field);
  border: 0;
  border-radius: var(--r-btn-m);
  background: var(--tint);
  color: var(--c-text);
  transition:
    background-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.k-field__box:hover:not([data-off]),
.k-field__box[data-force='hover'] {
  background: var(--tint-strong);
}
.k-field__box:focus-within,
.k-field__box:focus-visible,
.k-field__box[data-force='focus'] {
  background: var(--c-card);
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.k-field__box[data-error] {
  box-shadow: 0 0 0 var(--ring-size) color-mix(in srgb, var(--c-alarm) 28%, transparent), inset 0 0 0 1px var(--c-alarm-text);
}
.k-field__box[data-off] {
  color: var(--c-text-secondary);
  background: color-mix(in srgb, var(--c-text) 4%, transparent);
  cursor: not-allowed;
}
.k-field__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
}
.k-field__input::placeholder {
  color: var(--c-text-secondary);
}
.k-field__unit {
  color: var(--c-text-secondary);
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  white-space: nowrap;
}
.k-field__box .k-spinner {
  color: var(--c-text-secondary);
}
.k-field__msg {
  display: flex;
  align-items: center;
  gap: var(--sp-hair);
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  color: var(--c-text-secondary);
  --icon-ink: var(--c-white);
}
.k-field__msg[data-tone='error'] {
  color: var(--c-alarm-text);
}

/* ---------- select (a pop-up button) and menu: item radius + inset = list radius ---------- */
.k-select__button {
  justify-content: space-between;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.k-select__button[data-off] {
  cursor: not-allowed;
}
.k-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-select__chev {
  font-size: 1.05em;
  color: var(--c-text-secondary);
}
.k-select__list,
.k-menu__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--sp-icon));
  left: 0;
  margin: 0;
  padding: var(--sp-menu);
  list-style: none;
  outline: none;
  border-radius: var(--r-menu);
  animation: k-pop var(--dur-2) var(--ease-out);
  transform-origin: top left;
}
.k-select__list {
  right: 0;
  max-height: 18em;
  overflow: auto;
}
.k-select:has(.k-field__msg) .k-select__list {
  top: calc(100% - var(--sp-group));
}
.k-select__option {
  display: grid;
  grid-template-columns: 1.3em 1fr;
  align-items: center;
  gap: var(--sp-hair);
  padding: var(--sp-icon) var(--sp-field);
  border-radius: var(--r-item);
  cursor: pointer;
}
.k-select__option[data-active] {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
.k-select__option[data-active] .k-select__hint,
.k-select__option[data-active] .k-select__tick {
  color: inherit;
}
.k-select__option[aria-selected='true'] {
  font-weight: var(--w-semibold);
}
.k-select__option[aria-disabled] {
  color: var(--c-text-secondary);
  cursor: not-allowed;
}
.k-select__tick {
  display: flex;
  color: var(--c-accent-on-page);
}
.k-select__hint {
  display: block;
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  color: var(--c-text-secondary);
}

/* ---------- tabs: «line» are pills in a row, «block» is the segmented control (concentric) ---------- */
.k-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-hair);
}
.k-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-icon);
  height: var(--h-s);
  padding: 0 var(--sp-btn-s);
  border: 0;
  border-radius: var(--r-btn-s);
  background: transparent;
  color: var(--c-text-secondary);
  font: inherit;
  font-size: var(--t-callout);
  font-weight: var(--w-semibold);
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}
.k-tabs__tab:hover:not([aria-disabled]) {
  color: var(--c-text);
  background: var(--tint);
}
.k-tabs__tab[aria-selected='true'] {
  color: var(--c-text);
  background: var(--tint-strong);
}
.k-tabs__tab[aria-disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.k-tabs__badge {
  min-width: var(--th-bubble);
  padding: 0 var(--sp-hair);
  border-radius: var(--r-xs);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size: var(--t-caption);
  text-align: center;
}
.k-tabs__panel {
  animation: k-fade-in var(--dur-press) var(--ease-out);
  padding: var(--sp-field) 0 0;
  outline: none;
}
.k-tabs[data-kind='block'] .k-tabs__list {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: var(--sp-hair);
  padding: var(--sp-track);
  border-radius: var(--r-group);
  background: var(--tint);
}
.k-tabs[data-kind='block'] .k-tabs__tab {
  height: calc(var(--h-m) - 2 * var(--sp-track));
  border-radius: var(--r-segment);
  font-size: var(--t-footnote);
  color: var(--c-text);
}
.k-tabs[data-kind='block'] .k-tabs__tab:hover:not([aria-selected='true']) {
  background: transparent;
  color: var(--c-text-secondary);
}
.k-tabs[data-kind='block'] .k-tabs__tab[aria-selected='true'] {
  /* a glass drop: no shadow */
  background: var(--c-card);
}
.k-design[data-theme='night'] .k-tabs[data-kind='block'] .k-tabs__tab[aria-selected='true'] {
  background: var(--c-thumb);
}

/* ---------- info button ---------- */
.k-info {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.k-info__btn {
  display: grid;
  place-items: center;
  width: var(--h-xs);
  height: var(--h-xs);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-accent-on-page);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out);
}
.k-info__btn .k-icon {
  font-size: 1.2em;
}
.k-info__btn:hover,
.k-info__btn[aria-expanded='true'] {
  background: var(--tint);
}
.k-info__note {
  position: absolute;
  z-index: 25;
  top: calc(100% + var(--sp-icon));
  left: calc(-1 * var(--sp-icon));
  display: flex;
  flex-direction: column;
  gap: var(--sp-hair);
  width: min(24em, 70vw);
  padding: var(--sp-field) var(--sp-control);
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  line-height: var(--t-footnote-lh);
  animation: k-pop var(--dur-2) var(--ease-out);
  transform-origin: top left;
}
.k-info__note strong {
  font-size: var(--t-callout);
  font-weight: var(--w-semibold);
}
.k-info__note[hidden] {
  display: none;
}

/* ---------- dialog: radius = button radius + inset ---------- */
.k-dialog {
  width: min(30em, 92vw);
  padding: var(--sp-dialog);
  border: 0;
  border-radius: var(--r-dialog);
  font-family: var(--font);
  font-size: var(--t-callout);
}
.k-dialog::backdrop {
  background: var(--c-scrim-dialog);
  backdrop-filter: blur(var(--blur-dialog));
}
.k-dialog[open] {
  animation: k-dialog-in var(--dur-2) var(--ease-out);
}
@keyframes k-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}
.k-dialog--inline {
  position: static;
  display: block;
}
.k-dialog__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-icon);
  padding: var(--sp-hair) var(--sp-hair) 0;
  margin-bottom: var(--sp-icon);
  --icon-ink: var(--c-white);
}
.k-dialog__icon {
  font-size: 2.2em;
  color: var(--c-accent);
}
.k-dialog__head[data-danger] .k-dialog__icon {
  color: var(--c-warn);
  --icon-ink: var(--c-ink-dark);
}
.k-dialog__title {
  margin: 0;
  font-size: var(--t-title3);
  font-weight: var(--w-bold);
  letter-spacing: var(--t-title3-track);
  line-height: var(--t-title3-lh);
}
.k-dialog__text {
  padding: 0 var(--sp-hair);
  color: var(--c-text-secondary);
  line-height: var(--t-callout-lh);
}
.k-dialog__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-item);
  margin-top: var(--sp-group);
}
.k-dialog__actions .k-btn {
  width: 100%;
}

/* ---------- menu ---------- */
.k-menu {
  position: relative;
  display: inline-flex;
}
.k-menu__list {
  min-width: 16em;
}
.k-menu__group[data-section] {
  margin-top: var(--sp-hair);
  padding-top: var(--sp-hair);
  border-top: 0.5px solid var(--c-separator);
}
.k-menu__item {
  display: grid;
  grid-template-columns: 1.2em 1fr auto;
  align-items: center;
  gap: var(--sp-icon);
  width: 100%;
  padding: var(--sp-icon) var(--sp-field);
  border: 0;
  border-radius: var(--r-item);
  background: transparent;
  color: var(--c-text);
  font: inherit;
  font-size: var(--t-callout);
  text-align: left;
  cursor: pointer;
}
.k-menu__item:focus-visible {
  outline-offset: -2px;
}
.k-menu__item[data-active] {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}
.k-menu__item[data-danger] {
  color: var(--c-alarm-text);
}
.k-menu__item[data-danger][data-active] {
  background: var(--c-alarm);
  color: var(--c-alarm-ink);
}
.k-menu__item[aria-disabled] {
  color: var(--c-text-secondary);
  cursor: not-allowed;
}
.k-menu__label {
  display: flex;
  flex-direction: column;
}
.k-menu__why {
  font-size: var(--t-caption);
  font-weight: var(--t-caption-w);
}
.k-menu__hint,
.k-menu__icon {
  color: var(--c-text-secondary);
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
}
.k-menu__item[data-active] .k-menu__hint,
.k-menu__item[data-active] .k-menu__icon {
  color: inherit;
}
.k-menu__icon {
  font-size: 1.1em;
}

/* ---------- slider: the knob is a lens over the track in liquid glass ---------- */
.k-slider {
  --knob: var(--h-xs);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-hair);
  min-width: 0;
}
.k-slider__head {
  display: flex;
  align-items: center;
  gap: var(--sp-hair);
  margin-bottom: calc(var(--th-bubble) + var(--sp-icon));
}
.k-slider__rail {
  position: relative;
  height: var(--h-s);
}
.k-slider__track {
  position: absolute;
  top: 50%;
  left: calc(var(--knob) / 2);
  right: calc(var(--knob) / 2);
  height: var(--th-track);
  translate: 0 -50%;
  overflow: hidden;
  border-radius: calc(var(--th-track) / 2);
  background: var(--tint-strong);
}
.k-slider__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 100%);
  border-radius: inherit;
  background: var(--c-accent);
}
.k-slider__warn {
  position: absolute;
  inset: 0 0 0 calc(var(--warn) * 100%);
  background: color-mix(in srgb, var(--c-warn) 55%, transparent);
}
.k-slider__knob {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * (100% - var(--knob)));
  width: var(--knob);
  height: var(--knob);
  translate: 0 -50%;
  /* pass 2: the lens knob, ≥ 0.3 of its size */
  border-radius: var(--r-s);
  background: var(--c-knob);
  box-shadow: var(--sh-2);
  pointer-events: none;
  transition:
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out);
}
.k-slider__bubble {
  position: absolute;
  bottom: calc(100% + var(--sp-hair));
  left: calc(var(--knob) / 2 + var(--p) * (100% - var(--knob)));
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  height: var(--th-bubble);
  padding: 0 var(--sp-icon);
  border-radius: calc(var(--th-bubble) / 2);
  background: var(--c-text);
  color: var(--c-card);
  font-size: var(--t-footnote);
  font-weight: var(--w-semibold);
  white-space: nowrap;
  pointer-events: none;
}
.k-slider[data-over] .k-slider__bubble {
  background: var(--c-warn);
  color: var(--c-warn-ink);
}
.k-slider__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.k-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--knob);
  height: var(--h-s);
}
.k-slider__input::-moz-range-thumb {
  width: var(--knob);
  height: var(--h-s);
  border: 0;
}
.k-slider:hover:not([data-off]) .k-slider__knob,
.k-slider[data-force='hover'] .k-slider__knob {
  transform: scale(1.1);
}
.k-slider:active:not([data-off]) .k-slider__knob,
.k-slider[data-force='active'] .k-slider__knob {
  transform: scale(1.35);
  box-shadow: var(--sh-3);
}
.k-slider:has(.k-slider__input:focus-visible) .k-slider__knob,
.k-slider[data-force='focus'] .k-slider__knob {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
.k-slider[data-off] {
  color: var(--c-text-secondary);
}
.k-slider[data-off] .k-slider__input {
  cursor: not-allowed;
}
.k-slider[data-off] .k-slider__fill {
  background: var(--c-text-secondary);
  opacity: 0.6;
}
.k-slider[data-off] .k-slider__knob {
  opacity: 0.7;
}
.k-slider[data-off] .k-slider__bubble {
  background: var(--tint-strong);
  color: var(--c-text-secondary);
}
.k-slider__ticks {
  position: relative;
  height: var(--h-xs);
  margin: 0 calc(var(--knob) / 2);
  font-size: var(--t-caption);
  font-weight: var(--t-caption-w);
  color: var(--c-text-secondary);
}
.k-slider__ticks span {
  position: absolute;
  top: var(--sp-icon);
  translate: -50% 0;
  white-space: nowrap;
}
.k-slider__ticks span::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--sp-hair));
  left: 50%;
  width: var(--th-tick);
  height: var(--th-tick);
  translate: -50% 0;
  border-radius: 50%;
  background: currentColor;
}

/* an example drawn open takes its place in the flow: it never lies over what follows */
.k-select__list[data-static],
.k-menu__list[data-static],
.k-info__note[data-static] {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  margin-top: var(--sp-icon);
  animation: none;
}
.k-info:has(> .k-info__note[data-static]) {
  flex-direction: column;
  align-items: flex-start;
}

/* a phone (≤ 420 px): a long group (the hold-machine states: six segments) ran 180 px past a 375 px window. It
   keeps its one-line capsule and scrolls inside it instead; the scroll bar is hidden, the capsule clips. */
@media (max-width: 420px) {
  .k-btn-group {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .k-btn-group .k-btn {
    flex: none;
  }
}
/*
 * Matte tinted glass (KS-070, author 2026-11-10: «другим цветам заливки элементов тоже надо добавить стекло, но
 * только матовое»). The colour shows through a frosted surface: a real backdrop blur, the tint as a translucent
 * layer, a soft light at the top and a little depth at the bottom, a fine grain, our thin rim. Text keeps its
 * ink (--matte-ink): the contrast tests check every tint at the element's middle over white and black.
 *
 * Contract (designer B uses it too): class `glass-matte`, the colour in `--matte-tint` (a token), optional
 * `--matte-strength` 0…1 (default 1). Alerts set `--matte-pct: var(--matte-alert-alpha); --matte-weight: var(--w-bold)`: the strongest fill, never faint. `data-matte="accent|danger|warn|ready|
 * armed|alert|critical"` picks a tint and its ink. Our own controls below get the same material by selector.
 * Reduced transparency and the «Плашка» level fall back to the solid tint.
 */
.glass-matte[data-matte='accent'] { --matte-tint: var(--matte-accent); --matte-ink: var(--matte-accent-ink); }
.glass-matte[data-matte='danger'] { --matte-tint: var(--matte-danger); --matte-ink: var(--matte-danger-ink); }
.glass-matte[data-matte='warn'] { --matte-tint: var(--matte-warn); --matte-ink: var(--matte-warn-ink); }
.glass-matte[data-matte='ready'] { --matte-tint: var(--matte-ready); --matte-ink: var(--matte-ready-ink); }
.glass-matte[data-matte='armed'] { --matte-tint: var(--matte-armed); --matte-ink: var(--matte-armed-ink); }
.glass-matte[data-matte='alert'] { --matte-tint: var(--matte-alert); --matte-ink: var(--matte-alert-ink); --matte-pct: var(--matte-alert-alpha); --matte-weight: var(--w-bold); }
.glass-matte[data-matte='critical'] { --matte-tint: var(--matte-critical); --matte-ink: var(--matte-critical-ink); --matte-pct: var(--matte-alert-alpha); --matte-weight: var(--w-bold); }

/* our controls with a coloured fill: the same material, by selector */
.k-btn[data-variant='primary'] { --matte-tint: var(--matte-accent); --matte-ink: var(--matte-accent-ink); }
.k-btn[data-variant='danger'] { --matte-tint: var(--matte-danger); --matte-ink: var(--matte-danger-ink); }
.k-switch__input:checked ~ .k-switch__track { --matte-tint: var(--matte-accent); }
.k-tag[data-level='warn'] { --matte-tint: var(--matte-warn); --matte-ink: var(--matte-warn-ink); }
.k-tag[data-level='alarm'] { --matte-tint: var(--matte-alert); --matte-ink: var(--matte-alert-ink); --matte-pct: var(--matte-alert-alpha); --matte-weight: var(--w-bold); }
.k-tag[data-level='critical'] { --matte-tint: var(--matte-critical); --matte-ink: var(--matte-critical-ink); --matte-pct: var(--matte-alert-alpha); --matte-weight: var(--w-bold); }
.k-island__solid { --matte-tint: var(--plate); --matte-pct: var(--matte-alert-alpha); --matte-weight: var(--w-bold); }
.k-toast__tile[data-level='advice'] { --matte-tint: var(--matte-accent); }
.k-toast__tile[data-level='warn'] { --matte-tint: var(--matte-warn); }
.k-toast__tile:is([data-level='alarm'], [data-level='critical']) { --matte-tint: var(--matte-alert); --matte-pct: var(--matte-alert-alpha); --matte-weight: var(--w-bold); }
.k-vsw[data-dir='down'] { --matte-tint: var(--matte-accent); }
.k-vsw[data-stops='3'][data-dir='mid'] { --matte-tint: var(--matte-accent); --matte-strength: 0.55; }
.k-vsw[data-armed] { --matte-tint: var(--matte-armed); --matte-strength: 1; }
.k-vbtn[data-on] { --matte-tint: var(--matte-accent); }

:is(
    .glass-matte,
    .k-btn:is([data-variant='primary'], [data-variant='danger']):not([aria-disabled='true']),
    .k-switch__input:checked ~ .k-switch__track,
    .k-tag:is([data-level='warn'], [data-level='alarm'], [data-level='critical']),
    .k-island__solid,
    .k-toast__tile:is([data-level='advice'], [data-level='warn'], [data-level='alarm'], [data-level='critical']),
    .k-vsw:is([data-dir='down'], [data-dir='mid'], [data-armed]),
    .k-vbtn[data-on]
  ) {
  --_t: var(--matte-tint, var(--matte-accent));
  color: var(--matte-ink, inherit);
  background-color: color-mix(in srgb, var(--_t) var(--matte-pct, calc(var(--matte-alpha) * var(--matte-strength, 1))), transparent);
  font-weight: var(--matte-weight, inherit);
  /* an even fill: no top-to-bottom gradient, no inner shade — only the fine grain */
  background-image: var(--matte-grain);
  background-size: 6rem 6rem;
  backdrop-filter: blur(var(--matte-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--matte-blur)) saturate(150%);
  /* depth only from the rim and the blur: no drop shadow, no glow (lesson 33) */
  box-shadow:
    inset 0 1px 0 var(--matte-rim-hi),
    inset 0 0 0 1px var(--matte-rim) !important;
}

/* reduced transparency and the «Плашка» level: the solid tint */
@media (prefers-reduced-transparency: reduce) {
  :is(.glass-matte, .k-btn:is([data-variant='primary'], [data-variant='danger']):not([aria-disabled='true']), .k-switch__input:checked ~ .k-switch__track, .k-tag:is([data-level='warn'], [data-level='alarm'], [data-level='critical']), .k-island__solid, .k-toast__tile:is([data-level='advice'], [data-level='warn'], [data-level='alarm'], [data-level='critical']), .k-vsw:is([data-dir='down'], [data-dir='mid'], [data-armed]), .k-vbtn[data-on]) {
    background: var(--_t);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.k-design[data-glass='plate']
  :is(.glass-matte, .k-btn:is([data-variant='primary'], [data-variant='danger']):not([aria-disabled='true']), .k-switch__input:checked ~ .k-switch__track, .k-tag:is([data-level='warn'], [data-level='alarm'], [data-level='critical']), .k-island__solid, .k-toast__tile:is([data-level='advice'], [data-level='warn'], [data-level='alarm'], [data-level='critical']), .k-vsw:is([data-dir='down'], [data-dir='mid'], [data-armed]), .k-vbtn[data-on]) {
  background: var(--_t);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* option (b) (author 2026-11-09: «Да, вариант (b)»): accent-filled controls are DENSE accent glass — the theme
   accent at 98 % (reads as our blue, ΔE2000 ≤ 3), white ink, the frost grain, a 1 px light rim (a hairline on 2×
   screens) and a short light along part of the top edge that fades out. No pale band, no inner shade, no shadow.
   Placed last: the :is() has the weight of the base rule above, so it wins by order. */
.k-design {
  --matte-hair: 1px;
}
@media (min-resolution: 2dppx) {
  .k-design {
    --matte-hair: 0.5px;
  }
}
:is(
    .glass-matte[data-matte='accent'],
    .k-btn[data-variant='primary']:not([aria-disabled='true']),
    .k-switch__input:checked ~ .k-switch__track,
    .k-toast__tile[data-level='advice'],
    .k-vsw[data-dir='down']:not([data-armed]),
    .k-vbtn[data-on]
  ) {
  --matte-tint: var(--matte-dense);
  --matte-ink: var(--matte-dense-ink);
  --matte-pct: var(--matte-dense-alpha);
  --fg: var(--matte-dense-ink);
  background-image:
    var(--matte-grain),
    linear-gradient(to right, transparent 8%, var(--matte-dense-glint) 30%, var(--matte-dense-glint-soft) 62%, transparent 85%) !important;
  background-size: 6rem 6rem, 100% 1px !important;
  background-repeat: repeat, no-repeat !important;
  background-position: 0 0, 0 0 !important;
  box-shadow: inset 0 0 0 var(--matte-hair) var(--matte-dense-rim) !important;
}
/*
 * The star sign-in screens (KS-089p): «Вход», «Новый пароль», «Учётные записи», in the design code «Стекло».
 * Every number is a token (ui/tokens/scale.ts, theme.ts) — no colour literal, no radius outside the scale.
 * Glass: frosted only (real backdrop blur + an even matte fill + the fine grain + a 1 px light rim), no shadow,
 * no inner shade, no vignette. Corners: continuous (squircle) for boxes, capsules for one-line controls,
 * concentric where a shape sits tight in another. Selection inside a group is a fill, never an outline.
 */

/* ---------- the stage ---------- */
.ka-root {
  min-height: 100dvh;
}
/* the matte rule (ui/liquid/matte.css) sets font-weight: var(--matte-weight, inherit) on filled buttons, which
   drops their label to the body weight; here every button label stays semibold (note for designer A) */
.ka-root .k-btn {
  --matte-weight: var(--w-semibold);
}
.ka-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.ka-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ka-backdrop .sg-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* a soft light of our blue behind the content: the backdrop the glass blurs (not a shade on the glass) */
.ka-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 34% at 50% 48%, color-mix(in srgb, var(--c-accent) 20%, transparent), transparent 72%);
}
.ka-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--sp-block) var(--sp-safe);
}
.ka-stage[data-layout='sheet'] .ka-main {
  padding: var(--sp-group);
}

/* ---------- brand ---------- */
.ka-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-field);
  text-align: center;
}
.ka-brand__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--h-xl) * 1.25);
  height: calc(var(--h-xl) * 1.25);
  border-radius: var(--r-panel);
  color: var(--c-accent-on-page);
  font-size: var(--t-large);
}
.ka-brand__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-hair);
}
.ka-brand__name {
  font-size: var(--t-title1);
  font-weight: var(--t-title1-w);
  letter-spacing: var(--t-title1-track);
  line-height: var(--t-title1-lh);
  color: var(--c-text);
}
.ka-brand__sub {
  font-size: var(--t-callout);
  font-weight: var(--t-callout-w);
  line-height: var(--t-callout-lh);
  color: var(--c-text-secondary);
}
.ka-brand[data-size='s'] {
  flex-direction: row;
  text-align: left;
}
.ka-brand[data-size='s'] .ka-brand__tile {
  width: var(--h-m);
  height: var(--h-m);
  border-radius: var(--r-m);
  font-size: var(--t-title3);
  color: var(--c-accent-text);
  background: color-mix(in srgb, var(--c-accent) 14%, transparent);
  box-shadow: var(--edge-hi), var(--edge-line);
}
.ka-brand[data-size='s'] .ka-brand__text {
  gap: 0;
}
.ka-brand[data-size='s'] .ka-brand__name {
  font-size: var(--t-callout);
  font-weight: var(--w-semibold);
  letter-spacing: var(--t-callout-track);
  line-height: var(--t-callout-lh);
}
.ka-brand[data-size='s'] .ka-brand__sub {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  line-height: var(--t-footnote-lh);
}

/* ---------- sign-in: the brand on the backdrop, the form on glass ---------- */
.ka-login {
  width: min(100%, 26rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-group);
}
.ka-login__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-control);
}
.ka-station {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-icon);
  min-height: var(--h-xs);
  padding: 0 var(--sp-tag-x);
  border-radius: var(--r-chip);
  background: var(--tint);
  font-size: var(--t-footnote);
  font-weight: var(--w-semibold);
  color: var(--c-text-secondary);
}
.ka-station__dot {
  width: var(--th-dot);
  height: var(--th-dot);
  border-radius: 50%;
  background: var(--c-ready);
}
.ka-station[data-state='down'] .ka-station__dot {
  background: var(--c-warn);
}
.ka-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-group);
  padding: var(--sp-group);
  border-radius: var(--r-dialog);
  animation: k-rise var(--dur-3) var(--ease-out);
}
.ka-card__foot {
  margin: 0;
  text-align: center;
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  line-height: var(--t-footnote-lh);
  color: var(--c-text-secondary);
}
.ka-site {
  margin: 0;
  text-align: center;
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  color: var(--c-text-secondary);
}
.ka-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-control);
}
.ka-submit {
  width: 100%;
}
.ka-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-title);
}
.ka-title {
  margin: 0;
  font-size: var(--t-title2);
  font-weight: var(--t-title2-w);
  letter-spacing: var(--t-title2-track);
  line-height: var(--t-title2-lh);
}
.ka-lead {
  margin: 0;
  font-size: var(--t-callout);
  font-weight: var(--t-callout-w);
  line-height: var(--t-callout-lh);
  color: var(--c-text-secondary);
}
.ka-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-item);
}
.ka-actions .k-btn {
  width: 100%;
}

/* ---------- fields: a symbol in front, the eye at the end (concentric in the capsule) ---------- */
.ka-field__lead {
  font-size: 1.15em;
  color: var(--c-text-secondary);
}
/* an error is a crisp 1 px line, not the primitive's soft 3 px ring (no glow on glass) */
.ka-field .k-field__box[data-error] {
  box-shadow: inset 0 0 0 1px var(--c-alarm-text);
}
.ka-field .k-field__box[data-trailing] {
  padding-right: var(--sp-track);
}
.ka-reveal {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--h-m) - 2 * var(--sp-track));
  height: calc(var(--h-m) - 2 * var(--sp-track));
  padding: 0;
  border: 0;
  border-radius: calc(var(--r-btn-m) - var(--sp-track));
  background: transparent;
  color: var(--c-text-secondary);
  font: inherit;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}
.ka-reveal .k-icon {
  font-size: 1.2em;
}
/*
 * Browser autofill (KS-089f, the author's screenshot): Chrome paints its own square, lighter-blue background on an
 * autofilled <input> with !important, which the page cannot override — the pill looked like three pieces (the
 * lead symbol, a blue block, the eye). The input stays transparent, so the pill's own matte fill shows through,
 * the same with and without autofill, day and night:
 *   - the browser's background is clipped to the glyphs (background-clip: text) and the glyphs are painted in our
 *     text colour on top (-webkit-text-fill-color) — nothing of it is left outside the letters;
 *   - and it never arrives: its change of background and colour is put off by a transition of ~7 days.
 */
.ka-root .k-field__input:is(:-webkit-autofill, :autofill),
.ka-root .k-field__input:is(:-webkit-autofill, :autofill):hover,
.ka-root .k-field__input:is(:-webkit-autofill, :autofill):focus {
  -webkit-text-fill-color: var(--c-text);
  caret-color: var(--c-text);
  background-clip: text;
  -webkit-background-clip: text;
  transition:
    background-color 600000s 0s,
    color 600000s 0s;
}
.ka-reveal:hover {
  background: var(--tint);
  color: var(--c-text);
}
.ka-reveal[aria-pressed='true'] {
  color: var(--c-accent-text);
}
/*
 * One ring per field (KS-089f): the pill rings itself on :focus-within (controls.css). The design code's
 * `.k-design :focus-visible` outline outranks the primitive's `outline: none` on the input, and a text input is
 * always :focus-visible, so the input drew a second ring of its own — the pill split into three pieces again.
 * The eye's keyboard ring stays, drawn inside the pill (note for designer A: the same happens on every k-field).
 */
.ka-root .k-field__input:focus-visible {
  outline: none;
}
.ka-root .ka-reveal:focus-visible {
  outline-offset: calc(-1 * var(--sp-hair));
}

/* ---------- «Запомнить меня» with its meaning ---------- */
.ka-remember {
  align-self: flex-start;
}
.ka-remember__text {
  display: flex;
  flex-direction: column;
  line-height: var(--t-footnote-lh);
}
.ka-remember__text > span:first-child {
  font-size: var(--t-callout);
  font-weight: var(--w-medium);
}
.ka-remember__note {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  color: var(--c-text-secondary);
}

/* ---------- notes: tone + symbol + words; tinted, never a red plate for a typo ---------- */
.ka-note {
  --_bg: var(--tint);
  --_ink: var(--c-text);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-field);
  padding: var(--sp-field) var(--sp-control);
  border-radius: var(--r-panel);
  background: var(--_bg);
  color: var(--c-text);
}
.ka-note[data-tone='error'] {
  --_bg: color-mix(in srgb, var(--c-alarm) 12%, transparent);
  --_ink: var(--c-alarm-text);
}
.ka-note[data-tone='warn'] {
  --_bg: color-mix(in srgb, var(--c-warn) 18%, transparent);
  --_ink: var(--c-warn-text);
}
.ka-note[data-tone='info'] {
  --_bg: color-mix(in srgb, var(--c-accent) 10%, transparent);
  --_ink: var(--c-accent-text);
}
.ka-note[data-tone='ok'] {
  --_bg: color-mix(in srgb, var(--c-ready) 14%, transparent);
  --_ink: var(--c-ready-text);
}
.ka-note__icon {
  display: grid;
  place-items: center;
  flex: none;
  height: calc(var(--t-callout) * 1.35);
  color: var(--_ink);
  font-size: 1.2em;
  --icon-ink: var(--c-page);
}
.ka-note__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-hair);
  min-width: 0;
}
.ka-note__title {
  font-size: var(--t-callout);
  font-weight: var(--w-semibold);
  line-height: var(--t-callout-lh);
  color: var(--_ink);
}
.ka-note__text {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  line-height: var(--t-footnote-lh);
}
.ka-note__action {
  margin-top: var(--sp-hair);
}

/* ---------- strength and rules ---------- */
.ka-newpw {
  display: flex;
  flex-direction: column;
  gap: var(--sp-icon);
}
.ka-meter {
  display: flex;
  align-items: center;
  gap: var(--sp-field);
}
.ka-meter__bar {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-hair);
}
.ka-meter__seg {
  height: var(--th-track);
  border-radius: var(--r-pill);
  background: var(--tint-strong);
  transition: background-color var(--dur-1) var(--ease-out);
}
.ka-meter[data-level='weak'] .ka-meter__seg[data-on] {
  background: var(--c-warn);
}
.ka-meter[data-level='fair'] .ka-meter__seg[data-on] {
  background: var(--c-accent);
}
.ka-meter[data-level='strong'] .ka-meter__seg[data-on] {
  background: var(--c-ready);
}
.ka-meter__text {
  min-width: 8.5em;
  text-align: right;
  font-size: var(--t-footnote);
  font-weight: var(--w-semibold);
  color: var(--c-text-secondary);
}
.ka-meter[data-level='weak'] .ka-meter__text {
  color: var(--c-warn-text);
}
.ka-meter[data-level='strong'] .ka-meter__text {
  color: var(--c-ready-text);
}
.ka-rules {
  margin: 0;
  padding: var(--sp-field) var(--sp-control);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-hair);
  border-radius: var(--r-panel);
  background: var(--tint);
}
.ka-rules__item {
  display: flex;
  align-items: center;
  gap: var(--sp-icon);
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  line-height: var(--t-footnote-lh);
  color: var(--c-text-secondary);
}
.ka-rules__item .k-icon {
  font-size: 1.1em;
}
.ka-rules__item[data-state='ok'] {
  color: var(--c-ready-text);
}
.ka-rules__item[data-state='fail'] {
  color: var(--c-alarm-text);
}
.ka-rules__dot {
  display: grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  flex: none;
}
.ka-rules__dot::after {
  content: '';
  width: 0.35em;
  height: 0.35em;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- done ---------- */
.ka-done {
  align-items: center;
  text-align: center;
}
.ka-done__mark {
  display: grid;
  place-items: center;
  width: calc(var(--h-xl) * 1.25);
  height: calc(var(--h-xl) * 1.25);
  border-radius: 50%;
  font-size: var(--t-large);
  color: var(--c-ready-text);
  background: color-mix(in srgb, var(--c-ready) 16%, transparent);
}

/* ---------- people: avatar, role chip, status ---------- */
.ka-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--h-m);
  height: var(--h-m);
  border-radius: 50%;
  background: var(--tint-strong);
  color: var(--c-text);
  font-size: var(--t-callout);
  font-weight: var(--w-semibold);
}
.ka-avatar[data-size='l'] {
  width: var(--h-xl);
  height: var(--h-xl);
  font-size: var(--t-title2);
}
.ka-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-hair);
  min-height: var(--h-xs);
  padding: 0 var(--sp-tag-x) 0 calc(var(--sp-tag-x) - var(--sp-hair));
  border-radius: var(--r-chip);
  background: var(--tint);
  color: var(--c-text);
  font-size: var(--t-footnote);
  font-weight: var(--w-semibold);
  white-space: nowrap;
}
.ka-chip .k-icon {
  font-size: 1.15em;
}
.ka-chip[data-role='pilot'] {
  background: var(--tint-strong);
}
.ka-chip[data-role='admin'] {
  background: color-mix(in srgb, var(--c-accent) 14%, transparent);
  color: var(--c-accent-text);
}
.ka-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-icon);
  font-size: var(--t-footnote);
  font-weight: var(--w-semibold);
  white-space: nowrap;
}
.ka-status__dot {
  width: var(--th-dot);
  height: var(--th-dot);
  flex: none;
  border-radius: 50%;
  background: var(--c-ready);
}
.ka-status[data-status='flying'] .ka-status__dot {
  background: var(--c-armed);
}
.ka-status[data-status='must_change'] .ka-status__dot {
  background: var(--c-accent);
}
.ka-status[data-status='locked'] {
  color: var(--c-warn-text);
}
.ka-status[data-status='locked'] .ka-status__dot {
  background: var(--c-warn);
}
.ka-status[data-status='disabled'] {
  color: var(--c-text-secondary);
}
.ka-status[data-status='disabled'] .ka-status__dot {
  background: var(--c-dot-idle);
}

/* ---------- the admin's sheet ---------- */
.ka-shell {
  width: min(100%, 76rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-group);
  padding: var(--sp-group);
  border-radius: var(--r-dialog);
  animation: k-rise var(--dur-3) var(--ease-out);
}
.ka-shell__head,
.ka-shell__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-control);
}
.ka-me {
  display: flex;
  align-items: center;
  gap: var(--sp-field);
}
.ka-me__text {
  display: flex;
  flex-direction: column;
  margin-right: var(--sp-icon);
}
.ka-me__name {
  font-size: var(--t-callout);
  font-weight: var(--w-semibold);
  line-height: var(--t-callout-lh);
}
.ka-me__role {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  line-height: var(--t-footnote-lh);
  color: var(--c-text-secondary);
}
.ka-shell__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  gap: var(--sp-group);
  align-items: start;
}
.ka-shell__body[data-single] {
  grid-template-columns: minmax(0, 1fr);
}

/* inset-grouped list: the selected row is a fill inside the group; rows are concentric with it */
.ka-group,
.ka-journal {
  margin: 0;
  padding: var(--sp-track);
  list-style: none;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-panel);
  background: var(--tint);
}
.ka-row,
.ka-journal__row {
  position: relative;
}
.ka-row + .ka-row::before,
.ka-journal__row + .ka-journal__row::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(var(--sp-field) + var(--h-m) + var(--sp-control));
  right: var(--sp-field);
  height: 1px;
  background: var(--c-separator);
  opacity: 0.7;
}
.ka-journal__row + .ka-journal__row::before {
  left: var(--sp-field);
}
.ka-row[data-selected]::before,
.ka-row[data-selected] + .ka-row::before {
  opacity: 0;
}
.ka-row__hit {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 7.5em 11em 9.5em;
  align-items: center;
  gap: var(--sp-control);
  padding: var(--sp-field);
  border: 0;
  border-radius: calc(var(--r-panel) - var(--sp-track));
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out);
}
.ka-row__hit:hover {
  background: var(--tint);
}
.ka-row[data-selected] .ka-row__hit {
  background: var(--c-card);
}
.k-design[data-theme='night'] .ka-row[data-selected] .ka-row__hit {
  background: var(--c-fill-strong);
}
.ka-row__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ka-row__login {
  font-size: var(--t-callout);
  font-weight: var(--w-semibold);
  line-height: var(--t-callout-lh);
}
.ka-row__note,
.ka-row__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  line-height: var(--t-footnote-lh);
  color: var(--c-text-secondary);
}
.ka-row__meta {
  display: none;
}
.ka-row__last {
  text-align: right;
  white-space: nowrap;
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  color: var(--c-text-secondary);
}
.ka-row__chev {
  display: none;
  rotate: -90deg;
  color: var(--c-text-secondary);
}
.ka-row[data-off] .ka-row__login,
.ka-row[data-off] .ka-avatar {
  color: var(--c-text-secondary);
}

/* the selected account */
.ka-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-group);
  padding: var(--sp-panel);
  border-radius: var(--r-panel);
  background: var(--tint);
}
.ka-detail__who {
  display: flex;
  align-items: center;
  gap: var(--sp-control);
}
.ka-detail__who > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ka-detail__login {
  font-size: var(--t-title3);
  font-weight: var(--t-title3-w);
  letter-spacing: var(--t-title3-track);
  line-height: var(--t-title3-lh);
}
.ka-detail__note,
.ka-detail__hint {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  line-height: var(--t-footnote-lh);
  color: var(--c-text-secondary);
}
.ka-detail__block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-icon);
}
.ka-roles {
  display: flex;
}
.ka-roles .k-btn {
  flex: 1;
  padding: 0 var(--sp-field);
}
.ka-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ka-facts > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-control);
  padding: var(--sp-icon) 0;
  box-shadow: inset 0 -0.5px 0 var(--c-separator);
}
.ka-facts > div:last-child {
  box-shadow: none;
}
.ka-facts dt {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  color: var(--c-text-secondary);
}
.ka-facts dd {
  margin: 0;
  font-size: var(--t-footnote);
  font-weight: var(--w-semibold);
}
.ka-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-item);
}
.k-btn.ka-danger-quiet:not([aria-disabled='true']) {
  --fg: var(--c-alarm-text);
}

/* the journal */
.ka-journal__row {
  display: grid;
  grid-template-columns: 5.5em auto minmax(0, 1fr) 8em;
  align-items: center;
  gap: var(--sp-control);
  padding: var(--sp-field);
}
.ka-journal__time,
.ka-journal__user {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  color: var(--c-text-secondary);
}
.ka-journal__user {
  text-align: right;
  font-weight: var(--w-semibold);
  color: var(--c-text);
}
.ka-journal__dot {
  width: var(--th-dot);
  height: var(--th-dot);
  border-radius: 50%;
  background: var(--c-dot-idle);
}
.ka-journal__row[data-tone='warn'] .ka-journal__dot {
  background: var(--c-warn);
}
.ka-journal__row[data-tone='error'] .ka-journal__dot {
  background: var(--c-alarm);
}
.ka-journal__row[data-tone='admin'] .ka-journal__dot {
  background: var(--c-accent);
}
.ka-journal__what {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--sp-icon);
  min-width: 0;
}
.ka-journal__what strong {
  font-size: var(--t-callout);
  font-weight: var(--w-semibold);
}
.ka-journal__what span {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  color: var(--c-text-secondary);
}

/* ---------- dialog: frosted glass over the dimmed, blurred page ---------- */
.ka-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--sp-safe);
  overflow: auto;
  background: var(--c-scrim-dialog);
  backdrop-filter: blur(var(--blur-dialog));
  -webkit-backdrop-filter: blur(var(--blur-dialog));
}
.ka-dialog {
  width: min(100%, 27rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-control);
  padding: var(--sp-group);
  border-radius: var(--r-dialog);
  animation: k-pop var(--dur-2) var(--ease-out);
}
.ka-dialog__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-field);
}
.ka-tile {
  display: grid;
  place-items: center;
  width: var(--h-l);
  height: var(--h-l);
  border-radius: var(--r-l);
  font-size: var(--t-title3);
  color: var(--c-accent-text);
  background: color-mix(in srgb, var(--c-accent) 14%, transparent);
}
.ka-tile[data-tone='ready'] {
  color: var(--c-ready-text);
  background: color-mix(in srgb, var(--c-ready) 16%, transparent);
}
/* a destructive question (delete): the alarm red, as the quiet «Удалить» it came from */
.ka-tile[data-tone='danger'] {
  color: var(--c-alarm-text);
  background: color-mix(in srgb, var(--c-alarm) 14%, transparent);
}
.ka-dialog__title {
  margin: 0;
  font-size: var(--t-title2);
  font-weight: var(--t-title2-w);
  letter-spacing: var(--t-title2-track);
  line-height: var(--t-title2-lh);
}
.ka-dialog__text {
  margin: 0;
  font-size: var(--t-callout);
  font-weight: var(--t-callout-w);
  line-height: var(--t-callout-lh);
  color: var(--c-text-secondary);
}
.ka-dialog__text strong {
  color: var(--c-text);
  font-weight: var(--w-semibold);
}
.ka-dialog__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--sp-item);
  margin-top: var(--sp-hair);
}
.ka-dialog__actions .k-btn {
  width: 100%;
}
.ka-secret-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-icon);
}
/* the generated password, once: big, in groups, easy to read aloud; selected whole on a click */
.ka-secret {
  display: grid;
  place-items: center;
  height: var(--h-xl);
  padding: 0 var(--sp-control);
  border-radius: var(--r-xl);
  background: var(--tint);
  color: var(--c-text);
  font-size: var(--t-title3);
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  user-select: all;
  white-space: nowrap;
}

/* ---------- the icon sheet (design lesson 11): every symbol at 16, 24 and 32 px ---------- */
.ka-icons {
  width: min(100%, 60rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-control);
  padding: var(--sp-group);
  border-radius: var(--r-dialog);
}
.ka-icons__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--sp-item);
}
.ka-icons__cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-icon);
  padding: var(--sp-field);
  border-radius: var(--r-panel);
}
.ka-icons__cell[data-own] {
  background: var(--tint);
}
.ka-icons__row {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-control);
}
.ka-icons__s {
  width: 16px;
  height: 16px;
}
.ka-icons__m {
  width: 24px;
  height: 24px;
}
.ka-icons__l {
  width: 32px;
  height: 32px;
}
.ka-icons__name {
  font-size: var(--t-footnote);
  font-weight: var(--t-footnote-w);
  color: var(--c-text-secondary);
}

/* ---------- corners: boxes are squircles, capsules and circles stay round ---------- */
@supports (corner-shape: squircle) {
  .k-design :where(.ka-note, .ka-rules, .ka-group, .ka-journal, .ka-detail, .ka-row__hit, .ka-tile, .ka-brand__tile, .ka-icons__cell) {
    corner-shape: squircle;
  }
}

/* the account opened over the page: only where there is no side panel */
.ka-detail-sheet {
  display: none;
}

/* ---------- narrow windows: rebuild, never overlap (lesson 25) ---------- */
@media (max-width: 1100px) {
  .ka-detail-sheet {
    display: grid;
  }
  /* the sheet is the panel: no tinted panel inside the glass */
  .ka-detail-sheet .ka-detail {
    display: flex;
    padding: 0;
    background: none;
  }
  .ka-shell__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .ka-detail {
    display: none;
  }
  /* no side panel: a row opens its account, nothing stays selected */
  .k-design[data-theme] .ka-row[data-selected] .ka-row__hit {
    background: transparent;
  }
  .ka-row[data-selected]::before,
  .ka-row[data-selected] + .ka-row::before {
    opacity: 0.7;
  }
}
@media (max-width: 760px) {
  .ka-stage[data-layout='sheet'] .ka-main {
    padding: var(--sp-safe) var(--sp-item);
    place-items: start center;
  }
  .ka-shell {
    gap: var(--sp-control);
    padding: var(--sp-control);
  }
  .ka-me__text,
  .ka-me .k-btn[data-icon-only] {
    display: none;
  }
  .ka-shell .k-btn.ka-collapse {
    width: var(--h-m);
    padding: 0;
  }
  .ka-shell .k-btn.ka-collapse .k-btn__label {
    display: none;
  }
  .ka-row__hit {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .ka-row__role,
  .ka-row__status,
  .ka-row__last,
  .ka-row__note {
    display: none;
  }
  .ka-row__meta,
  .ka-row__chev {
    display: block;
  }
  .ka-row__meta .ka-status {
    font-weight: var(--t-footnote-w);
  }
  .ka-journal__row {
    grid-template-columns: 4.5em minmax(0, 1fr);
  }
  .ka-journal__dot,
  .ka-journal__user {
    display: none;
  }
}
@media (max-width: 480px) {
  .ka-card {
    padding: var(--sp-panel);
  }
  .ka-secret {
    font-size: var(--t-callout);
  }
}