/* ARAI Design Kit — the bundle a static page links (DESIGN.md §2.1).
   Each file wraps its rules in its own layer, so the order below is the only contract.
   Static generators inline these imports with `bundle.mjs` and serve the result under
   /_ds/<hash>/kit.css; a page that links this file directly gets the same cascade. */
@layer arai.tokens, arai.base, arai.kit, surface;

/* design/tokens.css */
/* ARAI Design Kit — tokens (DESIGN.md §2.5, §5–§8, §11).
   The only file in the repository with colour literals (§5.6, exceptions §16.2).
   Three layers live here: primitives (named by hue and step, private to this file),
   roles (what a colour is for) and structure (lines, type, space, motion). Surfaces
   use roles and structure only; the `primitive-private` check enforces it.
   Light only, by decision (§15): there is one palette on purpose. */

@layer arai.tokens {
  :root {
    color-scheme: light;

    /* ---------- primitives: private to this file ---------- */
    --a-paper-50: #FBF8F2;
    --a-paper-100: #F3EEE4;
    --a-paper-200: #ECE5D8;
    --a-paper-300: #E9E1D2;
    --a-paper-400: #DCD2C0;
    --a-paper-500: #CFC6B8;
    --a-paper-100-a16: #F3EEE429;
    --a-ink-400: #8A8176;
    --a-ink-500: #645C53;
    --a-ink-700: #3A3532;
    --a-ink-900: #1D1917;
    --a-ink-900-a8: #1D191714;
    --a-ink-900-a15: #1D191726;
    --a-ink-900-a55: #1D19178C;
    --a-ink-950: #171615;
    --a-orange-50: #FFFBF7;
    --a-orange-100: #FFE7D3;
    --a-orange-500: #FD5602;
    --a-orange-700: #B83D0B;
    --a-orange-800: #983208;
    --a-green-100: #E2EEDD;
    --a-green-700: #2F6B3A;
    --a-amber-100: #F6EACB;
    --a-amber-700: #8A5A00;
    --a-red-100: #F7DED9;
    --a-red-700: #B42318;
    --a-yellow-200: #FFE08A;
    /* the house mark's own source colours (§5.5, §9.1) */
    --a-house-ink: #323130;
    --a-house-paper: #FCF8F2;

    /* ---------- roles: paper and ink (§5.1) ---------- */
    --a-background: var(--a-paper-100);
    --a-surface: var(--a-paper-50);
    --a-surface-muted: var(--a-paper-200);
    --a-foreground: var(--a-ink-900);
    --a-foreground-secondary: var(--a-ink-700);
    --a-foreground-muted: var(--a-ink-500);
    --a-foreground-subtle: var(--a-ink-400);
    --a-border: var(--a-ink-900-a15);
    --a-border-subtle: var(--a-ink-900-a8);
    --a-border-control: var(--a-ink-900-a55);
    --a-border-strong: var(--a-ink-900);

    /* ---------- roles: one orange in two roles (§5.2) ---------- */
    --a-accent: var(--a-orange-700);
    --a-accent-hover: var(--a-orange-800);
    --a-accent-foreground: var(--a-orange-50);
    --a-accent-muted: var(--a-orange-100);
    --a-mark: var(--a-orange-500);

    /* ---------- roles: night, the one inverted band (§5.3) ---------- */
    --a-night: var(--a-ink-950);
    --a-night-foreground: var(--a-paper-100);
    --a-night-muted: var(--a-paper-500);
    --a-night-border: var(--a-paper-100-a16);

    /* ---------- roles: status (§5.4) ---------- */
    --a-success: var(--a-green-700);
    --a-success-muted: var(--a-green-100);
    --a-warning: var(--a-amber-700);
    --a-warning-muted: var(--a-amber-100);
    --a-danger: var(--a-red-700);
    --a-danger-muted: var(--a-red-100);
    --a-highlight: var(--a-yellow-200);

    /* ---------- roles: figures and brand (§5.5) ---------- */
    --a-figure-front: var(--a-paper-300);
    --a-figure-side: var(--a-paper-400);
    --a-brand-ink: var(--a-house-ink);
    --a-brand-paper: var(--a-house-paper);

    /* ---------- structure: type (§6) ---------- */
    --a-sans: "ARAI Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --a-mono: "ARAI Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --a-type-display-xl: 600 clamp(2.5rem, 1rem + 6.4vw, 6rem) / .98 var(--a-sans);
    --a-track-display-xl: -.035em;
    --a-type-display: 600 clamp(2rem, 1.15rem + 3.6vw, 3.75rem) / 1.05 var(--a-sans);
    --a-track-display: -.028em;
    --a-type-heading: 600 clamp(1.5rem, 1.15rem + 1.5vw, 2.0625rem) / 1.18 var(--a-sans);
    --a-track-heading: -.018em;
    --a-type-title: 600 clamp(1.25rem, 1.15rem + .45vw, 1.4375rem) / 1.3 var(--a-sans);
    --a-track-title: -.01em;
    --a-type-nav-lg: 500 1.25rem / 1.3 var(--a-sans);
    --a-type-lead: 400 clamp(1.0625rem, .95rem + .55vw, 1.3125rem) / 1.55 var(--a-sans);
    --a-type-prose-lg: 400 1.125rem / 1.72 var(--a-sans);
    --a-type-prose: 400 1.0625rem / 1.65 var(--a-sans);
    --a-type-body: 400 1rem / 1.6 var(--a-sans);
    --a-type-ui: 400 .9375rem / 1.4 var(--a-sans);
    --a-type-small: 400 .875rem / 1.5 var(--a-sans);
    --a-type-meta: 400 .8125rem / 1.5 var(--a-mono);
    --a-type-label: 400 .75rem / 1.3 var(--a-mono);
    --a-track-label: .06em;
    --a-type-button: 600 .9375rem / 1.2 var(--a-sans);
    --a-size-code: max(.875em, .8125rem);

    /* ---------- structure: lines, depth (§8) ---------- */
    --a-line-hair: 1px;
    --a-line-rule: 1.5px;
    --a-line-heavy: 3px;
    --a-line-cap: 5px;
    --a-hatch: repeating-linear-gradient(-60deg, currentColor 0 1px, transparent 1px 7px);
    --a-shadow-float: 0 18px 40px -16px rgb(59 42 23 / .35);
    /* the jump button's Liquid Glass, the one other floating depth (owner, 2026-11-05; DESIGN.md §8, §12.9) */
    --a-glass-fill: rgb(255 255 255 / .38);
    --a-glass-blur: blur(8px) saturate(1.5);
    --a-shadow-glass: inset 1px 1px 0 rgb(255 255 255 / .95), inset -1px -1px 0 rgb(255 255 255 / .55), inset 0 0 6px rgb(255 255 255 / .5), 0 3px 12px color-mix(in srgb, var(--a-foreground) 18%, transparent);
    --a-scrim: rgb(23 22 21 / .48);
    --a-radius: 0;
    --a-radius-round: 999px;

    /* ---------- structure: motion (§11) ---------- */
    --a-dur-1: 120ms;
    --a-dur-2: 200ms;
    --a-dur-3: 320ms;
    --a-dur-spin: 800ms;
    --a-dur-sweep: 1400ms;
    --a-dur-walk: 2970ms;
    --a-dur-word: 500ms;
    --a-dur-ink: 700ms;
    --a-dur-blink: 1000ms;
    --a-dur-fade: 2400ms;
    --a-ease: cubic-bezier(.2, 0, 0, 1);

    /* ---------- structure: layout (§7) ---------- */
    --a-w-narrow: 480px;
    --a-w-reading: 700px;
    --a-w-form: 768px;
    --a-w-app: 1024px;
    --a-w-wide: 1280px;
    --a-gutter: 16px;
    --a-gutter-app: 16px;
    --a-header-h: 64px;
    --a-section: 56px;
  }

  @media (width >= 768px) {
    :root { --a-gutter: 32px; --a-gutter-app: 24px; }
  }
  @media (width >= 1024px) {
    :root { --a-section: 96px; --a-type-prose-lg: 400 1.1875rem / 1.72 var(--a-sans); }
  }
  @media (width >= 1280px) {
    :root { --a-gutter: 48px; --a-header-h: 72px; }
  }
}

/* design/base.css: faces only */
@font-face {
  font-family: "ARAI Sans";
  src: url("fonts/arai-sans-regular-rest.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01CD-01DC, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0304, U+0306-030C, U+0312, U+0315, U+031B, U+0323, U+0326-0328, U+037E, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+0462-0463, U+046A-046B, U+0472-0475, U+0494-0499, U+049C-04A1, U+04A4-04AD, U+04B2-04B9, U+04BC-04C2, U+04CF-04D7, U+04DC-04E7, U+04EE-04F9, U+0524-0525, U+0E3F, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A4, U+20A6, U+20A8-20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B9-20BA, U+20BD, U+20BF, U+2113, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2194-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2236, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+F6D7-F6D8, U+FB01-FB02, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "ARAI Sans";
  src: url("fonts/arai-sans-medium-rest.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01CD-01DC, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0304, U+0306-030C, U+0312, U+0315, U+031B, U+0323, U+0326-0328, U+037E, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+0462-0463, U+046A-046B, U+0472-0475, U+0494-0499, U+049C-04A1, U+04A4-04AD, U+04B2-04B9, U+04BC-04C2, U+04CF-04D7, U+04DC-04E7, U+04EE-04F9, U+0524-0525, U+0E3F, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A4, U+20A6, U+20A8-20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B9-20BA, U+20BD, U+20BF, U+2113, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2194-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2236, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+F6D7-F6D8, U+FB01-FB02, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "ARAI Sans";
  src: url("fonts/arai-sans-semibold-rest.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01CD-01DC, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0304, U+0306-030C, U+0312, U+0315, U+031B, U+0323, U+0326-0328, U+037E, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+0462-0463, U+046A-046B, U+0472-0475, U+0494-0499, U+049C-04A1, U+04A4-04AD, U+04B2-04B9, U+04BC-04C2, U+04CF-04D7, U+04DC-04E7, U+04EE-04F9, U+0524-0525, U+0E3F, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A4, U+20A6, U+20A8-20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B9-20BA, U+20BD, U+20BF, U+2113, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2194-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2236, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+F6D7-F6D8, U+FB01-FB02, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "ARAI Mono";
  src: url("fonts/arai-mono-regular-rest.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01CD-01DC, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0304, U+0306-030C, U+0312, U+0315, U+031B, U+0323, U+0326-0328, U+032D-032E, U+0331, U+03C0, U+0462-0463, U+046A-046B, U+0472-0475, U+0494-0499, U+049C-04A1, U+04A4-04AD, U+04B2-04B9, U+04BC-04C2, U+04CF-04D7, U+04DC-04E7, U+04EE-04F9, U+0524-0525, U+0E3F, U+1E0C-1E0D, U+1E12-1E13, U+1E24-1E25, U+1E36-1E37, U+1E3C-1E3D, U+1E40-1E47, U+1E4A-1E4B, U+1E62-1E63, U+1E6C-1E6D, U+1E70-1E71, U+1E80-1E85, U+1E92-1E93, U+1E9E, U+1EA0-1EF9, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A4, U+20A6, U+20A8-20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B9-20BA, U+20BD, U+20BF, U+2113, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2194-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2236, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+F6D7-F6D8, U+FB01-FB02, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "ARAI Mono";
  src: url("fonts/arai-mono-medium-rest.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01CD-01DC, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+02BB-02BC, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0300-0304, U+0306-030C, U+0312, U+0315, U+031B, U+0323, U+0326-0328, U+032D-032E, U+0331, U+03C0, U+0462-0463, U+046A-046B, U+0472-0475, U+0494-0499, U+049C-04A1, U+04A4-04AD, U+04B2-04B9, U+04BC-04C2, U+04CF-04D7, U+04DC-04E7, U+04EE-04F9, U+0524-0525, U+0E3F, U+1E0C-1E0D, U+1E12-1E13, U+1E24-1E25, U+1E36-1E37, U+1E3C-1E3D, U+1E40-1E47, U+1E4A-1E4B, U+1E62-1E63, U+1E6C-1E6D, U+1E70-1E71, U+1E80-1E85, U+1E92-1E93, U+1E9E, U+1EA0-1EF9, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A4, U+20A6, U+20A8-20AB, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B9-20BA, U+20BD, U+20BF, U+2113, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2194-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2236, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+F6D7-F6D8, U+FB01-FB02, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "ARAI Sans";
  src: url("fonts/arai-sans-regular-core.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0493, U+049A-049B, U+04A2-04A3, U+04AE-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9, U+2000-200D, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2028-2029, U+202F-2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+20B8, U+2116, U+2122, U+2190-2193, U+2212, U+2219, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: "ARAI Sans";
  src: url("fonts/arai-sans-medium-core.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0493, U+049A-049B, U+04A2-04A3, U+04AE-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9, U+2000-200D, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2028-2029, U+202F-2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+20B8, U+2116, U+2122, U+2190-2193, U+2212, U+2219, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: "ARAI Sans";
  src: url("fonts/arai-sans-semibold-core.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0493, U+049A-049B, U+04A2-04A3, U+04AE-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9, U+2000-200D, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2028-2029, U+202F-2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+20B8, U+2116, U+2122, U+2190-2193, U+2212, U+2219, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: "ARAI Mono";
  src: url("fonts/arai-mono-regular-core.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0493, U+049A-049B, U+04A2-04A3, U+04AE-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9, U+2000-200D, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2028-2029, U+202F-2030, U+2032-2033, U+2039-203A, U+203E, U+2044, U+205F, U+20AC, U+20B8, U+2116, U+2122, U+2190-2193, U+2212, U+2219, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: "ARAI Mono";
  src: url("fonts/arai-mono-medium-core.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0493, U+049A-049B, U+04A2-04A3, U+04AE-04B1, U+04BA-04BB, U+04D8-04D9, U+04E8-04E9, U+2000-200D, U+2010-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2028-2029, U+202F-2030, U+2032-2033, U+2039-203A, U+203E, U+2044, U+205F, U+20AC, U+20B8, U+2116, U+2122, U+2190-2193, U+2212, U+2219, U+2248, U+2260, U+2264-2265;
}
@property --a-fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --a-fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --a-welcome-fade { syntax: "<length>"; inherits: false; initial-value: 24px; }

/* design/kit/type.css */
/* Type scale (DESIGN.md §6.2) as classes; the values are tokens in tokens.css. */
@layer arai.kit {
  .a-t-display-xl { font: var(--a-type-display-xl); letter-spacing: var(--a-track-display-xl); }
  /* at 40 px a long word («проектировщика», 313 px) is wider than a 320 px phone's column:
     on a phone the hero hyphenates rather than overflow or be clipped (§6.3) */
  @media (width < 640px) { .a-t-display-xl { hyphens: auto; hyphenate-limit-chars: 6 3 3; } }
  .a-t-display { font: var(--a-type-display); letter-spacing: var(--a-track-display); }
  .a-t-heading { font: var(--a-type-heading); letter-spacing: var(--a-track-heading); }
  .a-t-title { font: var(--a-type-title); letter-spacing: var(--a-track-title); }
  .a-t-lead { font: var(--a-type-lead); color: var(--a-foreground-secondary); text-wrap: pretty; }
  .a-t-prose-lg { font: var(--a-type-prose-lg); }
  .a-t-prose { font: var(--a-type-prose); }
  .a-t-body { font: var(--a-type-body); }
  .a-t-ui { font: var(--a-type-ui); }
  .a-t-small { font: var(--a-type-small); }
  .a-t-meta { font: var(--a-type-meta); }
  .a-t-muted { color: var(--a-foreground-muted); }
  .a-t-num { font-variant-numeric: tabular-nums; }
  /* a designation or clause reference never breaks (§6.3) */
  .a-t-nowrap { white-space: nowrap; }

  /* 12 px is the label size and nothing else: mono, uppercase (§6.2) */
  .a-label { font: var(--a-type-label); text-transform: uppercase; letter-spacing: var(--a-track-label); color: var(--a-foreground-muted); }
  .a-label--accent { color: var(--a-accent); }
  /* the slash marker, the system's signature: current state and category labels only */
  .a-label--accent::before, .a-slash::before { content: "/ " / ""; }
}

/* design/kit/layout.css */
/* Containers, grids, section headings and the page header (DESIGN.md §7, §12.5, §13). */
@layer arai.kit {
  .a-wrap {
    max-width: var(--a-w-wide);
    margin-inline: auto;
    padding-left: max(var(--a-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--a-gutter), env(safe-area-inset-right, 0px));
  }
  .a-wrap--app { max-width: var(--a-w-app); padding-inline: var(--a-gutter-app); }
  .a-wrap--form { max-width: var(--a-w-form); padding-inline: var(--a-gutter-app); }
  .a-wrap--narrow { max-width: var(--a-w-narrow); padding-inline: var(--a-gutter); }

  /* ---------- hub (§7.4): a sticky left column beside the entries, from lg ---------- */
  .a-hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 56px; }
  @media (width >= 1024px) { .a-hub { grid-template-columns: 240px minmax(0, 1fr); } }
  .a-hub__side { display: none; }
  @media (width >= 1024px) {
    .a-hub__side { display: block; position: sticky; top: calc(var(--a-header-h) + 32px); align-self: start; padding-top: 56px; }
  }
  .a-hub__main { min-width: 0; }
  /* a filter column (§12.3): below lg it stays, above the entries, and its choices render as chips;
     from lg it is the sticky column and the same choices are a filter list */
  @media (width < 1024px) {
    .a-hub__side--filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 24px; }
    .a-hub__side--filters .a-filters { display: none; }
  }
  @media (width >= 1024px) {
    .a-hub__side--filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .a-hub__side--filters .a-chips:not(.a-chips--quick) { display: none; }
  }

  /* ---------- reading (§7.4): TOC | 700 px of text | air, from xl ---------- */
  .a-reading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 20px 40px; }
  .a-reading__toc { display: none; }
  .a-reading__body { min-width: 0; }
  @media (width >= 1280px) {
    .a-reading { grid-template-columns: 250px minmax(0, var(--a-w-reading)) minmax(0, 120px); justify-content: space-between; gap: 56px; padding-top: 56px; }
    .a-reading__toc { display: block; position: sticky; top: calc(var(--a-header-h) + 28px); align-self: start; max-height: calc(100vh - var(--a-header-h) - 56px); overflow: auto; scrollbar-width: thin; }
    .a-reading .a-toc-m { display: none; }
  }

  /* ---------- page header (§12.5) ---------- */
  .a-pagehead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 32px 0; }
  .a-pagehead__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; padding-bottom: 40px; overflow-wrap: break-word; }
  .a-pagehead__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
  .a-pagehead__fig { display: none; }
  /* A phone's first screen holds the hub's first entry and an article's opening lines (DESIGN.md §12.5). */
  @media (width < 640px) {
    .a-pagehead { padding-top: 24px; }
    .a-pagehead__text { gap: 12px; padding-bottom: 32px; }
  }
  @media (width >= 1024px) {
    .a-pagehead { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); padding-top: 56px; }
    /* a hub's display-xl hero: its longest word (≈ 6.6 em, «проектировщика») fits from 1024 px */
    .a-pagehead:has(> .a-pagehead__text > .a-t-display-xl) { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }
    /* the hero figure overlaps the hatch band under it (§8: local stacking) */
    .a-pagehead__fig { display: block; margin-bottom: -40px; position: relative; z-index: 1; }
  }
  /* the Product register: kicker, heading, one muted sentence, actions on the right; no figure */
  .a-pagehead--app { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; padding-block: 24px 16px; }
  .a-pagehead--app .a-pagehead__text { gap: 8px; padding-bottom: 0; }
  .a-pagehead--app .a-pagehead__text p { font: var(--a-type-small); color: var(--a-foreground-muted); }
  .a-pagehead__actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .a-pagehead--app > .a-tabs { grid-column: 1 / -1; }
  @media (width < 640px) { .a-pagehead--app { grid-template-columns: minmax(0, 1fr); } }

  /* ---------- sections (§8: the section rule) ---------- */
  /* one column that never grows past its container: a wide child scrolls or wraps inside it */
  .a-section { padding-block: var(--a-section) 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .a-section-h { position: relative; border-top: var(--a-line-hair) solid var(--a-border-strong); padding-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .a-section-h::before { content: ""; position: absolute; top: -2px; left: 0; width: 56px; height: var(--a-line-heavy); background: var(--a-mark); }
  .a-section-h p { max-width: 62ch; color: var(--a-foreground-secondary); }
  @media (width < 768px) { .a-section-h p { hyphens: auto; hyphenate-limit-chars: 6 3 3; } }

  /* ---------- focus (§13): the logo, then one narrow column with one action — errors, sign-in ---------- */
  .a-focus { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-height: 100dvh; padding-block: 32px 64px; }
  .a-focus > .a-wordmark { justify-self: start; margin-bottom: 40px; }
  @media (width >= 768px) { .a-focus { padding-top: 96px; } }

  /* ---------- hatch band (§9.2): after a site hero, before the footer ---------- */
  .a-hatch-band { height: 26px; color: var(--a-foreground); border-top: var(--a-line-hair) solid var(--a-border-strong); position: relative; }
  .a-hatch-band::after { content: ""; position: absolute; inset: 0; background: var(--a-hatch); opacity: .5; }
  .a-hatch-band--sm { height: 14px; }
  .a-hatch-band--sm::after { opacity: .35; }
  @media (width < 640px) { .a-hatch-band { height: 14px; } }
}

/* design/kit/button.css */
/* Actions: button, icon button, link, jump link, and the 44 px hit area (DESIGN.md §12.1, §14). */
@layer arai.kit {
  .a-btn {
    --_h: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--_h); padding: 10px 20px;
    border: var(--a-line-rule) solid var(--a-border-strong); border-radius: var(--a-radius);
    background: transparent; color: var(--a-foreground);
    /* a long label wraps to two lines, never truncates */
    font: var(--a-type-button); text-align: center; text-wrap: balance; text-decoration: none; cursor: pointer;
    transition: background-color var(--a-dur-1) var(--a-ease), color var(--a-dur-1) var(--a-ease), border-color var(--a-dur-1) var(--a-ease);
  }
  .a-btn svg { width: 20px; height: 20px; flex: none; }
  .a-btn--primary { background: var(--a-accent); border-color: var(--a-accent); color: var(--a-accent-foreground); }
  .a-btn--primary:is(:hover, :active, [aria-pressed="true"]) { background: var(--a-accent-hover); border-color: var(--a-accent-hover); }
  .a-btn--secondary:is(:hover, :active, [aria-pressed="true"]) { background: var(--a-foreground); color: var(--a-background); }
  .a-btn--ghost { border-color: transparent; }
  .a-btn--ghost:is(:hover, :active, [aria-pressed="true"]) { background: var(--a-surface-muted); }
  .a-btn--danger { border-color: var(--a-danger); color: var(--a-danger); }
  .a-btn--danger:is(:hover, :active) { background: var(--a-danger); color: var(--a-accent-foreground); }
  .a-btn--sm { --_h: 36px; padding: 6px 12px; font-size: .875rem; }
  .a-btn--sm svg { width: 16px; height: 16px; }
  .a-btn--lg { --_h: 54px; padding: 12px 24px; font-size: 1.0625rem; }
  /* a square never gives up width to its neighbours */
  .a-btn--icon { padding: 0; width: var(--_h); flex: none; }
  .a-btn:is([disabled], [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; }
  .a-btn[disabled] { pointer-events: none; }
  /* loading: the spinner replaces the icon, the width does not change */
  .a-btn[aria-busy="true"] { cursor: progress; }
  .a-btn[aria-busy="true"] > svg:not(.a-spin) { display: none; }
  .a-btn[aria-busy="true"] .a-spin { display: block; }
  .a-spin { display: none; flex: none; width: 16px; height: 16px; border: var(--a-line-rule) solid currentColor; border-right-color: transparent; border-radius: var(--a-radius-round); animation: a-spin var(--a-dur-spin) linear infinite; }
  .a-spin--on { display: block; }
  @keyframes a-spin { to { transform: rotate(360deg); } }

  /* on night (§5.3): primary fills with the mark and takes night text; the ring is the mark */
  .a-on-night .a-btn--primary, .a-night .a-btn--primary { background: var(--a-mark); border-color: var(--a-mark); color: var(--a-night); }
  :is(.a-on-night, .a-night) .a-btn--primary:hover { background: var(--a-night-foreground); border-color: var(--a-night-foreground); }
  :is(.a-on-night, .a-night) .a-btn--secondary { border-color: color-mix(in srgb, var(--a-night-foreground) 35%, transparent); color: var(--a-night-foreground); }
  :is(.a-on-night, .a-night) .a-btn--secondary:hover { background: var(--a-night-foreground); color: var(--a-night); }
  :is(.a-on-night, .a-night, .a-toast, .a-tip) :focus-visible { outline-color: var(--a-mark); }

  /* links: the underline, not the colour, says "link" (§5.6) */
  .a-link { text-decoration: underline; text-decoration-color: var(--a-mark); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color var(--a-dur-1) var(--a-ease); }
  .a-link:hover { color: var(--a-accent); }
  /* a text action: a button that reads as a link in a line of text, with no box, so when the
     line wraps it starts at the text's edge (§12.0, text rows); pair it with a-hit */
  button.a-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; }
  .a-jump { font: var(--a-type-meta); color: var(--a-accent); text-decoration: underline; text-decoration-color: var(--a-border); text-underline-offset: 4px; }
  .a-jump:hover { text-decoration-color: currentColor; }

  /* §14: a control under 44 px keeps its look and extends its hit area to 44 × 44 */
  :is(.a-btn--sm, .a-chip, .a-jump, .a-wordmark, .a-hit, .a-clause__num, .a-pagemark a) { position: relative; }
  :is(.a-btn--sm, .a-chip, .a-jump, .a-wordmark, .a-hit, .a-clause__num, .a-pagemark a)::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%;
  }

  @media (forced-colors: active) {
    .a-btn { border-color: ButtonText; }
    .a-btn--ghost { border-color: transparent; }
  }
}

/* design/kit/header.css */
/* Site and app headers, the two marks, the language switch, the phone menu and the
   reading-progress strip (DESIGN.md §9.1, §9.2, §12.4). */
@layer arai.kit {
  /* ---------- the marks: canonical drawings from design/brand/, scaled by height only ---------- */
  .a-wordmark { --_ink: var(--a-foreground); display: inline-flex; align-items: center; flex: none; text-decoration: none; }
  .a-wordmark svg { height: 26px; width: auto; display: block; overflow: visible; }
  .a-wordmark path { fill: none; stroke: var(--a-mark); stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; }
  .a-wordmark path.ink { stroke: var(--_ink); }
  .a-wordmark path.chimney { fill: var(--_ink); stroke: none; }
  .a-wordmark path.leaf { fill: var(--a-mark); stroke: none; }
  .a-wordmark--night { --_ink: var(--a-night-foreground); }
  .a-house { display: block; flex: none; }
  .a-house .accent { fill: var(--a-mark); }
  .a-house .ink { fill: var(--a-brand-ink); }
  .a-house .letters { fill: none; stroke: var(--a-brand-paper); stroke-linecap: round; }

  /* ---------- site header ---------- */
  .a-header {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
    background: color-mix(in srgb, var(--a-background) 92%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: var(--a-line-hair) solid var(--a-border);
  }
  .a-header__row { display: flex; align-items: center; gap: 20px; height: var(--a-header-h); }
  /* a strip of hatch ends along its own stroke (60°, 5 px over 9 px), so no stroke is cut into a dot */
  .a-header__hatch { flex: 1; height: 9px; min-width: 24px; color: var(--a-foreground); background: var(--a-hatch); opacity: .28; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
  .a-header__cta { flex: none; }
  .a-nav { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
  .a-nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
    text-decoration: none; font: 500 .9375rem/1.4 var(--a-sans);
    transition: color var(--a-dur-1) var(--a-ease);
  }
  .a-nav a:hover, .a-nav a[aria-current="page"] { color: var(--a-accent); }
  /* a flex item drops a trailing space, so the slash's gap is a margin */
  .a-nav a[aria-current="page"]::before { content: "/" / ""; margin-right: 6px; }

  /* ---------- language switch: a page in one language has none ---------- */
  .a-lang { display: inline-flex; align-items: center; border: var(--a-line-hair) solid var(--a-border); height: 36px; padding: 0 4px; font: 400 .8125rem/1 var(--a-mono); letter-spacing: .04em; }
  .a-lang a { padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; height: 100%; text-decoration: none; color: var(--a-foreground-muted); transition: color var(--a-dur-1) var(--a-ease); }
  .a-lang a:hover { color: var(--a-accent); }
  .a-lang a[aria-current="true"] { color: var(--a-foreground); font-weight: 500; }
  .a-lang i { font-style: normal; color: var(--a-border-control); }
  /* on touch the switch becomes a segmented control of 44 px cells */
  @media (pointer: coarse) {
    .a-lang { height: auto; padding: 0; }
    .a-lang a { height: 44px; min-width: 44px; padding: 0 8px; }
    .a-lang i { display: none; }
    .a-lang i + a { border-left: var(--a-line-hair) solid var(--a-border); }
  }

  /* ---------- language menu: the header's button that opens the kit's menu, as the agent's header menu does ---------- */
  .a-lang-menu { position: relative; flex: none; }
  .a-lang-menu > summary {
    list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 8px 0 10px; cursor: pointer;
    border: var(--a-line-hair) solid transparent; font: 500 .8125rem/1 var(--a-sans); letter-spacing: .02em; color: inherit;
    transition: background-color var(--a-dur-1) var(--a-ease), border-color var(--a-dur-1) var(--a-ease);
  }
  .a-lang-menu > summary::-webkit-details-marker { display: none; }
  /* a finger gets the 44 px target every component has (DESIGN.md §12) */
  @media (pointer: coarse) { .a-lang-menu > summary { min-height: 44px; } }
  /* tinted by its own ink, so it reads on paper and on a dark header alike */
  .a-lang-menu > summary:hover, .a-lang-menu[open] > summary { background: color-mix(in srgb, currentColor 9%, transparent); border-color: color-mix(in srgb, currentColor 22%, transparent); }
  .a-lang-menu__icon { width: 16px; height: 16px; flex: none; }
  .a-lang-menu > summary .a-caret { width: 14px; height: 14px; }
  .a-lang-menu[open] > summary .a-caret { rotate: 180deg; }
  /* the menu keeps paper's ink over a dark header too */
  .a-lang-menu .a-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; color: var(--a-foreground); }
  .a-lang-menu[data-align="start"] .a-menu { left: 0; right: auto; }
  .a-lang-menu .a-menu a { color: inherit; }
  .a-lang-menu .a-menu [aria-current="page"] { color: var(--a-accent); }
  /* the current language carries a tick, as in the agent, not the kit's slash */
  .a-lang-menu .a-menu [aria-current="page"]::before { content: none; }
  .a-lang-menu .a-menu [aria-current="page"] > span { display: inline-flex; color: var(--a-accent); }
  .a-lang-menu__tick { width: 16px; height: 16px; }

  /* ---------- phone menu: a boxed mono summary and a full-width panel ---------- */
  .a-menu-btn { display: none; }
  @media (width < 1024px) {
    .a-header:not(.a-header--app) :is(.a-nav, .a-lang, .a-lang-menu, .a-header__cta) { display: none; }
    .a-menu-btn { display: block; }
  }
  .a-menu-btn summary {
    list-style: none; display: inline-flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 16px; border: var(--a-line-hair) solid var(--a-border-strong);
    font: var(--a-type-label); letter-spacing: var(--a-track-label); text-transform: uppercase;
  }
  .a-menu-btn summary::-webkit-details-marker { display: none; }
  .a-burger { width: 16px; height: 10px; position: relative; }
  .a-burger::before, .a-burger::after { content: ""; position: absolute; left: 0; right: 0; height: var(--a-line-rule); background: currentColor; transition: transform var(--a-dur-2) var(--a-ease); }
  .a-burger::before { top: 1px; }
  .a-burger::after { top: 7px; }
  .a-menu-btn[open] .a-burger::before { transform: translateY(3px) rotate(45deg); }
  .a-menu-btn[open] .a-burger::after { transform: translateY(-3px) rotate(-45deg); }
  .a-menu-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    animation: a-drop var(--a-dur-2) var(--a-ease);
    background: var(--a-surface); border-bottom: var(--a-line-rule) solid var(--a-border-strong); box-shadow: var(--a-shadow-float);
    padding-block: 8px 20px;
  }
  /* the scrim hangs under the panel: the sticky header's backdrop-filter would trap a fixed one */
  .a-menu-panel::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: var(--a-scrim); animation: a-fade var(--a-dur-2) var(--a-ease); }
  @keyframes a-drop { from { opacity: 0; translate: 0 -6px; } }
  @keyframes a-fade { from { opacity: 0; } }
  .a-menu-panel ul { list-style: none; margin: 0; padding: 0; }
  .a-menu-panel li a { display: flex; align-items: center; min-height: 56px; font: var(--a-type-nav-lg); text-decoration: none; border-bottom: var(--a-line-hair) solid var(--a-border); }
  .a-menu-panel li a[aria-current="page"] { color: var(--a-accent); }
  .a-menu-panel li a[aria-current="page"]::before { content: "/" / ""; margin-right: 8px; }
  .a-menu-panel .a-btn { width: 100%; margin-top: 16px; }
  .a-menu-panel .a-lang { display: inline-flex; margin-top: 16px; }

  /* ---------- reading progress: 2 px of mark under the sticky header (§9.2) ---------- */
  .a-progress.a-progress--reading { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--a-header-h)); z-index: 10; height: 2px; background: none; pointer-events: none; }
  .a-progress.a-progress--reading > i { --_read: 0; inset: 0; width: auto; transform: scaleX(var(--_read)); transform-origin: 0 50%; }

  /* ---------- app header (§12.4): 56 px, 64 at md; keeps every control at any width ---------- */
  .a-header--app { position: relative; top: auto; background: var(--a-background); -webkit-backdrop-filter: none; backdrop-filter: none; container-type: inline-size; }
  .a-header--app .a-header__row { gap: 12px; height: 56px; padding-inline: 12px; }
  .a-header__brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
  .a-header--app .a-header__hatch { min-width: 0; }
  .a-header__sections-icon { display: none; }
  @container (width >= 768px) { .a-header--app .a-header__row { height: 64px; } }
  /* after the base rules on purpose: before them, the base gap won and a 320 px header squeezed «Разделы» */
  @container (width < 400px) {
    .a-header--app .a-header__row { gap: 8px; }
    .a-header__sections .a-caret { display: none; }
    .a-header__sections-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .a-header__sections-icon { display: block; }
    .a-header__sections { width: 36px; padding: 0; }
  }
  /* the strip is never drawn under 24 px: below a 340 px header it keeps its place but is not drawn */
  @container (width < 340px) { .a-header--app .a-header__hatch { visibility: hidden; } }
}

/* design/kit/footer.css */
/* Site footer (DESIGN.md §3.2, §12.4): never on a signed-in app page. */
@layer arai.kit {
  .a-footer { padding-block: 40px 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .a-footer__lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; max-width: 40ch; }
  .a-footer__lead p { font: var(--a-type-small); color: var(--a-foreground-secondary); }
  /* columns of at least 150 px: one column on a 320 px phone */
  .a-footer__cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .a-footer__cols h2 { margin-bottom: 12px; }
  .a-footer__cols ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
  .a-footer__cols a { display: flex; min-height: 36px; align-items: center; overflow-wrap: anywhere; text-decoration: none; font: var(--a-type-ui); transition: color var(--a-dur-1) var(--a-ease); }
  .a-footer__cols a:hover { color: var(--a-accent); }
  @media (pointer: coarse) { .a-footer__cols a { min-height: 44px; } }
  .a-footer__base { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; padding-top: 16px; border-top: var(--a-line-hair) solid var(--a-border); }
  .a-footer__base p { font: var(--a-type-meta); color: var(--a-foreground-muted); }
  .a-footer__note { max-width: 72ch; font: var(--a-type-meta); color: var(--a-foreground-muted); }
}

/* design/kit/navigation.css */
/* Crumbs, TOC, Tabs and the app sidebar (DESIGN.md §12.3, §12.4). */
@layer arai.kit {
  /* ---------- crumbs: the cut-corner chip is drawn by ::before, so the clip never cuts the hit area ---------- */
  .a-crumbs { display: flex; flex-wrap: wrap; gap: 16px 8px; list-style: none; padding: 0; margin: 0; font: 400 .8125rem/1 var(--a-mono); letter-spacing: .03em; }
  .a-crumbs :is(a, span) {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; height: 28px; padding: 0 16px 0 10px; text-decoration: none;
  }
  .a-crumbs :is(a, span)::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border);
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  }
  .a-crumbs a::after { content: ""; position: absolute; inset: -8px 0; }
  .a-crumbs a { color: var(--a-foreground-muted); transition: color var(--a-dur-1) var(--a-ease); }
  .a-crumbs a:hover { color: var(--a-accent); }
  .a-crumbs span[aria-current]::before { border-color: var(--a-border-strong); }
  /* on a phone the trail keeps only the way back; the h1 names the page */
  /* Below md the current item hides; a trail of home and the current page (a hub) would be left
     with home alone, which repeats the wordmark above it, so the whole trail hides (DESIGN.md §12.4). */
  @media (width < 768px) {
    .a-crumbs li:has(> [aria-current]) { display: none; }
    nav:has(> .a-crumbs > li:nth-child(2):last-child > [aria-current]) { display: none; }
  }

  /* ---------- TOC: a sticky column, or a disclosure above the text ---------- */
  .a-toc { border-top: var(--a-line-rule) solid var(--a-border-strong); padding-top: 12px; }
  .a-toc ol, .a-toc-m ol { list-style: none; padding: 0; margin: 0; }
  .a-toc ol { margin-top: 12px; }
  :is(.a-toc, .a-toc-m) a { display: grid; grid-template-columns: 28px 1fr; gap: 4px; padding: 8px 0; font: 400 .875rem/1.35 var(--a-sans); text-decoration: none; border-bottom: var(--a-line-hair) solid var(--a-border-subtle); transition: color var(--a-dur-1) var(--a-ease); }
  :is(.a-toc, .a-toc-m) a b { font: 400 .75rem/1.6 var(--a-mono); color: var(--a-foreground-muted); }
  :is(.a-toc, .a-toc-m) a:hover, :is(.a-toc, .a-toc-m) a[aria-current="true"] { color: var(--a-accent); }
  :is(.a-toc, .a-toc-m) a[aria-current="true"] span::before { content: "/ " / ""; }
  :is(.a-toc, .a-toc-m) a[aria-current="true"] b { color: var(--a-accent); }
  @media (pointer: coarse) { :is(.a-toc, .a-toc-m) a { padding-block: 12px; min-height: 44px; } }
  .a-toc-m { border-top: var(--a-line-rule) solid var(--a-border-strong); border-bottom: var(--a-line-hair) solid var(--a-border); }
  .a-toc-m summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 48px; }
  .a-toc-m summary::-webkit-details-marker { display: none; }
  .a-toc-m summary::after { content: "+" / ""; margin-left: auto; font: 400 1.25rem/1 var(--a-mono); }
  .a-toc-m[open] summary::after { content: "−" / ""; }
  .a-toc-m li:last-child a { border-bottom: 0; }

  /* ---------- tabs: area navigation (links, aria-current) or a view switch (buttons, aria-selected) ---------- */
  .a-tabs {
    display: flex; gap: 24px; border-bottom: var(--a-line-hair) solid var(--a-border); overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 32px;
    /* the mask reads only alpha, so its opaque stop is a literal (§16.2) */
    mask-image: linear-gradient(90deg, transparent, #000 var(--a-fade-start), #000 calc(100% - var(--a-fade-end)), transparent);
  }
  /* a scroll timeline is inactive while the row fits, so a row that fits never fades */
  @supports (animation-timeline: scroll()) { .a-tabs { animation: a-edge-fade linear both; animation-timeline: scroll(self inline); } }
  @keyframes a-edge-fade { from { --a-fade-start: 0px; --a-fade-end: 32px; } 10%, 90% { --a-fade-start: 32px; --a-fade-end: 32px; } to { --a-fade-start: 32px; --a-fade-end: 0px; } }
  .a-tabs :is(a, button) { display: inline-flex; align-items: center; justify-content: center; flex: none; background: none; border: 0; padding: 0; min-height: 44px; min-width: 44px; font: 500 .9375rem/1.4 var(--a-sans); color: var(--a-foreground-muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--a-dur-1) var(--a-ease); }
  .a-tabs :is(a, button):hover { color: var(--a-foreground); }
  .a-tabs :is(a[aria-current="page"], button[aria-selected="true"]) { color: var(--a-accent); border-bottom-color: var(--a-foreground); }
  .a-tabs :is(a[aria-current="page"], button[aria-selected="true"])::before { content: "/" / ""; margin-right: 6px; }
  .a-tabs sup { margin-left: 6px; font: var(--a-type-label); color: var(--a-foreground-muted); vertical-align: baseline; }

  /* ---------- sidebar (§12.4): 280 px, a 1 px right rule; inert when collapsed ---------- */
  .a-sidebar { width: 280px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; padding: 16px; background: var(--a-background); border-right: var(--a-line-hair) solid var(--a-border); }
  .a-sidebar[inert] { display: none; }
  .a-sidebar > .a-btn { width: 100%; }
  .a-sidebar__list { list-style: none; padding: 0; margin: 0; }
  .a-sidebar__list a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: center; min-height: 44px; padding: 8px 0; border-bottom: var(--a-line-hair) solid var(--a-border-subtle); text-decoration: none; font: 400 .875rem/1.35 var(--a-sans); transition: color var(--a-dur-1) var(--a-ease); }
  .a-sidebar__list a i { font: normal 400 .8125rem/1.3 var(--a-mono); color: var(--a-foreground-muted); }
  .a-sidebar__list a:hover, .a-sidebar__list a[aria-current="page"] { color: var(--a-accent); }
  .a-sidebar__list a[aria-current="page"] span::before { content: "/ " / ""; }
}

/* design/kit/field.css */
/* Inputs: field, input, textarea, select, search with results, checkbox and radio (DESIGN.md §12.2). */
@layer arai.kit {
  .a-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; align-content: start; }
  .a-field > label, .a-field__label { font: 500 .875rem/1.5 var(--a-sans); }
  /* required: `*` after the label, explained once per form */
  .a-field__req { color: var(--a-danger); margin-left: 2px; }
  .a-field__help { font: var(--a-type-small); color: var(--a-foreground-muted); }
  .a-field__error { display: flex; gap: 8px; align-items: center; font: var(--a-type-small); color: var(--a-danger); }
  .a-field__error svg { width: 16px; height: 16px; flex: none; }
  .a-form-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

  .a-input, .a-textarea {
    width: 100%; min-height: 44px; padding: 0 16px; border-radius: var(--a-radius);
    background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border-control);
    font: var(--a-type-body); transition: border-color var(--a-dur-1) var(--a-ease);
  }
  .a-textarea { padding-block: 10px; resize: vertical; }
  :is(.a-input, .a-textarea)::placeholder { color: var(--a-foreground-muted); opacity: 1; }
  :is(.a-input, .a-textarea):is(:hover, :focus) { border-color: var(--a-border-strong); }
  /* validation styles `:user-invalid`, never `:invalid`, which fires before anyone has typed (§12.0) */
  :is(.a-input, .a-textarea):is([aria-invalid="true"], :user-invalid) { border-color: var(--a-danger); }
  :is(.a-input, .a-textarea, .a-select > select)[disabled] { opacity: .45; cursor: not-allowed; }
  :is(.a-input, .a-textarea)[readonly] { background: var(--a-surface-muted); border-color: var(--a-border); }

  /* the native select sits in a wrapper that carries Lucide chevron-down; the app's Base UI select draws the same */
  .a-select { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
  .a-select > select { appearance: none; padding-right: 44px; cursor: pointer; }
  .a-select > svg { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--a-foreground-muted); pointer-events: none; }

  /* ---------- search and its results ---------- */
  .a-search { position: relative; }
  .a-search > svg { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--a-foreground-muted); pointer-events: none; }
  .a-search .a-input { min-height: 48px; padding-left: 48px; border: var(--a-line-rule) solid var(--a-border-strong); }
  .a-results { list-style: none; margin: 0; padding: 0; background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border-strong); border-top: 0; box-shadow: var(--a-shadow-float); }
  .a-results [role="option"], .a-results a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 16px; text-decoration: none; border-top: var(--a-line-hair) solid var(--a-border-subtle); cursor: pointer; transition: background-color var(--a-dur-1) var(--a-ease); }
  .a-results li:first-child > :is([role="option"], a), .a-results li[role="option"]:first-child { border-top: 0; }
  .a-results :is([role="option"], a):hover, .a-results [aria-selected="true"] { background: var(--a-surface-muted); }
  .a-results .a-t-meta { color: var(--a-accent); }
  .a-results__title { font: var(--a-type-ui); }
  .a-results__foot { padding: 12px 16px; border-top: var(--a-line-hair) solid var(--a-border); font: var(--a-type-meta); color: var(--a-foreground-muted); }

  /* ---------- checkbox and radio: ink, not accent — accent is for actions (§12.2) ---------- */
  .a-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font: var(--a-type-ui); }
  .a-check input { appearance: none; width: 20px; height: 20px; margin: 0; border: var(--a-line-rule) solid var(--a-border-strong); background: var(--a-surface); display: grid; grid-template-columns: minmax(0, 1fr); place-content: center; flex: none; cursor: pointer; }
  .a-check input[type="radio"] { border-radius: var(--a-radius-round); }
  .a-check input:checked { background: var(--a-foreground); }
  .a-check input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--a-background); border-bottom: 2px solid var(--a-background); rotate: -45deg; translate: 0 -1px; }
  .a-check input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: var(--a-radius-round); background: var(--a-background); }
  /* indeterminate is a dash: the native property, styled by :indeterminate */
  .a-check input[type="checkbox"]:indeterminate { background: var(--a-foreground); }
  .a-check input[type="checkbox"]:indeterminate::after { content: ""; width: 10px; height: 2px; background: var(--a-background); }
  .a-check input:is([aria-invalid="true"], :user-invalid) { border-color: var(--a-danger); }
  .a-check:has(input[disabled]) { opacity: .45; cursor: not-allowed; }
  .a-check input[disabled] { cursor: not-allowed; }

  @media (forced-colors: active) {
    .a-check input:checked, .a-check input:indeterminate { background: Highlight; }
  }
}

/* design/kit/selection.css */
/* Chips, filter list and suggestions (DESIGN.md §12.3). */
@layer arai.kit {
  .a-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
  /* a short fixed set of quick searches sits in three columns on a phone, so its rows end evenly */
  @media (width < 640px) {
    .a-chips--quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .a-chips--quick .a-chip { width: 100%; justify-content: center; }
  }
  .a-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
    background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); border-radius: var(--a-radius);
    font: 500 .875rem/1 var(--a-sans); text-decoration: none; cursor: pointer;
    transition: border-color var(--a-dur-1) var(--a-ease), background-color var(--a-dur-1) var(--a-ease), color var(--a-dur-1) var(--a-ease);
  }
  .a-chip:hover { border-color: var(--a-border-strong); }
  .a-chip--code { font: 400 .8125rem/1 var(--a-mono); letter-spacing: .02em; }
  .a-chip sup { font: var(--a-type-label); color: var(--a-foreground-muted); vertical-align: baseline; }
  .a-chip[aria-pressed="true"] { background: var(--a-foreground); border-color: var(--a-foreground); color: var(--a-background); }
  .a-chip[aria-pressed="true"] sup { color: var(--a-night-muted); }
  /* a zero count is muted; disabled when choosing it would empty the list */
  .a-chip[data-count="0"] { color: var(--a-foreground-muted); }
  .a-chip:is([disabled], [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; }
  .a-chip[disabled] { pointer-events: none; }

  /* the desktop sidebar form of a chip group: 46 px rows, counts in mono */
  .a-filters { list-style: none; margin: 0; padding: 0; border-top: var(--a-line-rule) solid var(--a-border-strong); }
  .a-filters button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; background: none; border: 0; border-bottom: var(--a-line-hair) solid var(--a-border); padding: 0; font: 500 .9375rem/1.4 var(--a-sans); text-align: left; transition: color var(--a-dur-1) var(--a-ease); }
  .a-filters button b { font: var(--a-type-label); color: var(--a-foreground-muted); }
  .a-filters button:hover, .a-filters button[aria-pressed="true"] { color: var(--a-accent); }
  .a-filters button[aria-pressed="true"] span::before { content: "/ " / ""; }
  .a-filters button[data-count="0"] { color: var(--a-foreground-muted); }
  .a-filters button[disabled] { opacity: .45; cursor: not-allowed; }

  /* questions as rows `→ question`; pill-shaped question chips are retired. A row is a link, or a
     button where choosing it fills the composer instead of leaving the page (the agent's welcome). */
  .a-suggest { list-style: none; margin: 0; padding: 0; display: grid; }
  .a-suggest :is(a, button) { display: grid; grid-template-columns: 24px 1fr; gap: 8px; width: 100%; min-height: 44px; padding: 12px 0; background: none; border: 0; border-bottom: var(--a-line-hair) solid var(--a-border-subtle); text-align: left; text-decoration: none; }
  .a-suggest :is(a, button)::before { content: "→" / ""; font-family: var(--a-mono); color: var(--a-accent); }
  .a-suggest :is(a, button):hover > span:not(.a-suggest__hint) { text-decoration: underline; text-decoration-color: var(--a-mark); text-underline-offset: 3px; }
  /* an optional second line that says what the choice does */
  .a-suggest__hint { grid-column: 2; font: var(--a-type-small); color: var(--a-foreground-muted); }
}

/* design/kit/content.css */
/* Content: prose, table, citation, clause, page marker, source gap, callout, card, entry, stamp, figure, badge (DESIGN.md §12.5). */
@layer arai.kit {
  /* ---------- prose ---------- */
  .a-prose { max-width: var(--a-w-reading); font: var(--a-type-prose); overflow-wrap: break-word; }
  .a-prose--lg { font: var(--a-type-prose-lg); }
  .a-prose > * + * { margin-top: 1.05em; }
  .a-prose > :is(h2, h3):first-child { margin-top: 0; }
  .a-prose h2 { position: relative; margin-top: 2.3em; padding-top: 12px; border-top: var(--a-line-hair) solid var(--a-border-strong); font: var(--a-type-heading); letter-spacing: var(--a-track-heading); }
  .a-prose h2::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: var(--a-line-heavy); background: var(--a-mark); }
  .a-prose h3 { margin-top: 1.8em; font: var(--a-type-title); letter-spacing: var(--a-track-title); }
  .a-prose :is(h2, h3) + * { margin-top: .6em; }
  .a-prose a:not([class]) { text-decoration: underline; text-decoration-color: var(--a-mark); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color var(--a-dur-1) var(--a-ease); }
  .a-prose a:not([class]):hover { color: var(--a-accent); }
  .a-prose :is(ul, ol) { padding-left: 1.4em; }
  .a-prose ul { list-style: none; }
  .a-prose ul > li { position: relative; }
  /* the bullet is a 10 × 1.5 px mark dash */
  .a-prose ul > li::before { content: ""; position: absolute; left: -1.1em; top: .8em; width: 10px; height: var(--a-line-rule); background: var(--a-mark); }
  /* The host's reset (Tailwind preflight in the app) strips list markers; the numbers
     of a numbered list are content — «ответьте на пункт 2» — so the kit restores them. */
  .a-prose ol { list-style: decimal; }
  .a-prose ol > li::marker { font: 400 .82em var(--a-mono); color: var(--a-accent); }
  .a-prose li + li { margin-top: .45em; }
  .a-prose :is(b, strong) { font-weight: 600; }
  .a-prose blockquote { padding: .2em 0 .2em 1.1em; border-left: var(--a-line-heavy) solid var(--a-mark); color: var(--a-foreground-secondary); }
  .a-prose code { padding: .1em .35em; background: var(--a-surface-muted); }
  @media (width < 768px) { :is(.a-prose p, .a-prose li) { hyphens: auto; hyphenate-limit-chars: 6 3 3; } }

  /* ---------- table: rules above and below, no side borders ---------- */
  /* a table that does not fit scrolls in its wrapper, bleeds to the edge of what holds it and fades
     at the edge that still hides columns, like Tabs; 8 px keep a scrollbar off the bottom rule */
  .a-tbl {
    --_bleed: var(--a-gutter);
    overflow-x: auto; min-width: 0; scrollbar-width: thin;
    margin-inline: calc(var(--_bleed) * -1); padding: 0 var(--_bleed) 8px; scroll-padding-inline: 32px;
    mask-image: linear-gradient(90deg, transparent, #000 var(--a-fade-start), #000 calc(100% - var(--a-fade-end)), transparent);
  }
  .a-tbl--inset { --_bleed: 16px; }
  @supports (animation-timeline: scroll()) { .a-tbl { animation: a-edge-fade linear both; animation-timeline: scroll(self inline); } }
  .a-table { width: 100%; border-collapse: collapse; border-top: var(--a-line-rule) solid var(--a-border-strong); border-bottom: var(--a-line-rule) solid var(--a-border-strong); font: var(--a-type-ui); line-height: 1.5; font-variant-numeric: tabular-nums; }
  .a-table caption { text-align: left; padding-bottom: 8px; font: var(--a-type-label); letter-spacing: var(--a-track-label); text-transform: uppercase; color: var(--a-foreground-muted); }
  .a-table th { text-align: left; vertical-align: bottom; font: var(--a-type-label); letter-spacing: var(--a-track-label); text-transform: uppercase; color: var(--a-foreground-muted); padding: 12px 16px 12px 0; border-bottom: var(--a-line-hair) solid var(--a-border-strong); white-space: nowrap; }
  .a-table th[aria-sort] { color: var(--a-foreground); }
  .a-table th[aria-sort="ascending"]::after { content: " ↑" / ""; color: var(--a-accent); }
  .a-table th[aria-sort="descending"]::after { content: " ↓" / ""; color: var(--a-accent); }
  .a-table td { padding: 12px 16px 12px 0; border-bottom: var(--a-line-hair) solid var(--a-border); vertical-align: top; }
  .a-table tbody tr:last-child td { border-bottom: 0; }
  .a-table tbody tr { transition: background-color var(--a-dur-1) var(--a-ease); }
  .a-table--rows tbody tr:hover { background: var(--a-surface-muted); }
  .a-table tbody tr[aria-selected="true"] { background: var(--a-accent-muted); }
  .a-table .num { text-align: right; }
  .a-table :is(td, th):last-child { padding-right: 0; }
  /* the calculation sheet's position column (GOST 2.105) */
  .a-table .pos { font: var(--a-type-meta); color: var(--a-foreground-muted); width: 3.5em; }
  .a-table tfoot td { font-weight: 600; border-top: var(--a-line-hair) solid var(--a-border-strong); }
  .a-table--dense { font: var(--a-type-small); }
  .a-table--dense :is(td, th) { padding-block: 8px; }
  /* the spec sheet: key → value, no header */
  .a-table--spec th { width: 40%; vertical-align: top; text-transform: none; letter-spacing: 0; font: var(--a-type-meta); white-space: normal; border-bottom: var(--a-line-hair) solid var(--a-border); }
  .a-table--spec tbody tr:last-child th { border-bottom: 0; }
  /* a rendered two-column table (an answer's Markdown) has no row headers: its first cell is the key */
  .a-table--spec tbody td:first-child { width: 40%; font: var(--a-type-meta); color: var(--a-foreground-muted); }
  .a-table--spec :is(td, th):last-child { text-align: right; }
  @media (width < 640px) {
    .a-table--stack, .a-table--stack tbody, .a-table--stack tr, .a-table--stack td { display: block; }
    .a-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .a-table--stack tr { padding-block: 12px; border-bottom: var(--a-line-hair) solid var(--a-border); }
    .a-table--stack tbody tr:last-child { border-bottom: 0; }
    .a-table--stack td { padding: 0; border: 0; }
    .a-table--stack td:first-child { font-weight: 500; margin-bottom: 4px; }
    /* the label floats in the cell's own padding: a long label wraps inside its 80 px column */
    .a-table--stack td + td { display: flow-root; padding-left: 96px; }
    .a-table--stack td + td::before { content: attr(data-label); float: left; width: 80px; margin-left: -96px; padding-top: .25em; font: var(--a-type-label); letter-spacing: var(--a-track-label); text-transform: uppercase; color: var(--a-foreground-muted); overflow-wrap: anywhere; }
  }

  /* ---------- citation: published links to the reader page; unpublished is the designation alone ---------- */
  .a-cite-inline { font-family: var(--a-mono); font-size: var(--a-size-code); color: var(--a-accent); text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; }
  span.a-cite-inline { color: var(--a-foreground-secondary); text-decoration: none; }
  .a-cite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 20px; background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); border-left: var(--a-line-heavy) solid var(--a-mark); }
  .a-cite__ref { font: var(--a-type-meta); color: var(--a-foreground-muted); }
  .a-cite__ref b { font-weight: 500; color: var(--a-foreground); white-space: nowrap; }
  .a-cite q { font: var(--a-type-prose); quotes: "«" "»"; }

  /* ---------- clause: a numbered clause of a normative document (§12.5) ---------- */
  /* the number column holds four levels of numbering («5.1.12.3») at the meta size */
  .a-clause { --_num: 5.5rem; position: relative; display: grid; grid-template-columns: var(--_num) minmax(0, 1fr); column-gap: 8px; max-width: var(--a-w-reading); margin: 0 -8px; padding: 8px; border-left: var(--a-line-rule) solid transparent; transition: background-color var(--a-dur-2) var(--a-ease), border-color var(--a-dur-2) var(--a-ease); }
  .a-clause:hover { border-left-color: var(--a-border); }
  .a-clause__num { grid-row: 1 / span 2; padding-top: .3em; font: var(--a-type-meta); color: var(--a-accent); text-decoration: none; overflow-wrap: anywhere; }
  .a-clause__num:hover { text-decoration: underline; }
  .a-clause__title { grid-column: 2; font-weight: 600; }
  .a-clause__body { grid-column: 2; min-width: 0; }
  .a-clause__body > :first-child { margin-top: 0; }
  @media (width < 640px) { .a-clause { display: block; } .a-clause__num { display: inline-block; margin-bottom: 4px; } .a-clause__title { display: inline; } }
  /* the clause a link or a search lands on: the wash and the accent edge, fading to rest */
  .a-clause:target, .a-clause[data-state="landed"] { animation: a-clause-land var(--a-dur-fade) var(--a-ease); }
  @keyframes a-clause-land { from { background-color: var(--a-accent-muted); border-color: var(--a-accent); } }
  /* reduced motion: base.css stops the fade, so the wash stays, unfaded */
  @media (prefers-reduced-motion: reduce) { .a-clause:target, .a-clause[data-state="landed"] { background-color: var(--a-accent-muted); border-left-color: var(--a-accent); } }

  /* ---------- the source line (§8): where a page of the printed source begins, what it keeps ---------- */
  .a-pagemark { display: flex; align-items: center; gap: 12px; margin: 8px 0; font: var(--a-type-label); color: var(--a-foreground-muted); }
  .a-pagemark::before { content: ""; flex: 1; border-top: var(--a-line-hair) dashed var(--a-border); }
  .a-pagemark--inline { display: inline-block; margin: 0 .35em; vertical-align: baseline; }
  .a-pagemark--inline::before { content: none; }
  .a-pagemark a { padding: 2px 6px; text-decoration: none; transition: color var(--a-dur-1) var(--a-ease); }
  .a-pagemark a:hover { color: var(--a-accent); }
  .a-source-gap { display: inline-block; padding: 6px 12px; border: var(--a-line-hair) dashed var(--a-border-control); font: var(--a-type-meta); color: var(--a-foreground-muted); }

  /* ---------- callout: a left rule in the tone, never a full-colour fill ---------- */
  .a-callout { --_tone: var(--a-foreground); display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 16px; background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); border-left: var(--a-line-heavy) solid var(--_tone); font: var(--a-type-small); }
  .a-callout > svg { width: 20px; height: 20px; color: var(--_tone); }
  .a-callout b, .a-callout__title { display: block; font: 600 .9375rem/1.4 var(--a-sans); margin-bottom: 4px; }
  .a-callout .a-btn { margin-top: 12px; }
  .a-callout--warning { --_tone: var(--a-warning); }
  .a-callout--danger { --_tone: var(--a-danger); }
  .a-callout--success { --_tone: var(--a-success); }
  /* the banner: a full-width strip under the app header, or above the composer */
  .a-callout--banner { border-width: 0 0 var(--a-line-hair); border-left: var(--a-line-heavy) solid var(--_tone); padding-block: 12px; align-items: center; }

  /* ---------- card: only for real containment ---------- */
  .a-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; padding: 20px; background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); transition: border-color var(--a-dur-1) var(--a-ease); }
  .a-card--sm { padding: 16px; }
  .a-card--lg { padding: 24px; }
  .a-card__head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
  .a-card--link { position: relative; }
  .a-card--link:hover { border-color: var(--a-border-strong); }
  .a-card--link .a-card__title { text-decoration: none; }
  .a-card--link .a-card__title::after { content: ""; position: absolute; inset: 0; }
  .a-card--link:hover .a-card__title { text-decoration: underline; text-decoration-color: var(--a-mark); text-decoration-thickness: 2px; text-underline-offset: 4px; }

  /* ---------- entry: the list row; the whole row is the link ---------- */
  .a-entries { list-style: none; padding: 0; margin: 0; border-top: var(--a-line-rule) solid var(--a-border-strong); container-type: inline-size; }
  .a-entry { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "idx" "body"; gap: 8px 24px; padding: 24px 0; border-bottom: var(--a-line-hair) solid var(--a-border); }
  a.a-entry__title::after { content: ""; position: absolute; inset: 0; }
  /* the ring moves to the row it covers */
  a.a-entry__title:focus-visible { outline: none; }
  a.a-entry__title:focus-visible::after { outline: 2px solid var(--a-accent); outline-offset: 3px; }
  .a-entry__idx { grid-area: idx; font: var(--a-type-label); text-transform: uppercase; letter-spacing: var(--a-track-label); color: var(--a-foreground-muted); }
  .a-entry__body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; overflow-wrap: break-word; }
  .a-entry__title { font: var(--a-type-title); letter-spacing: var(--a-track-title); text-decoration: none; text-wrap: balance; }
  .a-entry:hover .a-entry__title { text-decoration: underline; text-decoration-color: var(--a-mark); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .a-entry__code { font: var(--a-type-meta); color: var(--a-accent); white-space: nowrap; }
  .a-entry__excerpt { color: var(--a-foreground-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .a-entry__meta { font: var(--a-type-meta); color: var(--a-foreground-muted); }
  /* controls of the row (save, hide) stand above the title's link that covers it */
  .a-entry__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
  .a-entry__fig { grid-area: fig; display: none; }
  /* text rows show everything */
  .a-entry--text .a-entry__excerpt { display: block; overflow: visible; }
  @media (width < 768px) { .a-entry__excerpt { hyphens: auto; hyphenate-limit-chars: 6 3 3; } }
  /* the list's own width decides, not the viewport: a viewport rule squeezes the title inside the hub */
  @container (width >= 480px) {
    .a-entry { grid-template-columns: minmax(0, 1fr) 168px; grid-template-areas: "idx fig" "body fig"; align-items: start; }
    .a-entry--text { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "idx body"; }
    .a-entry__excerpt { -webkit-line-clamp: 3; }
    .a-entry__fig { display: block; border: var(--a-line-hair) solid var(--a-border); background: var(--a-surface); aspect-ratio: 16 / 10; max-width: 100%; transition: border-color var(--a-dur-1) var(--a-ease); }
    .a-entry:hover .a-entry__fig { border-color: var(--a-border-strong); }
  }
  @container (width >= 720px) {
    .a-entry { grid-template-columns: 120px minmax(0, 1fr) 210px; grid-template-areas: "idx body fig"; gap: 8px 32px; }
    .a-entry--text { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "idx body"; }
  }

  /* ---------- stamp: a title block for a file or a document ---------- */
  .a-stamp { background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); border-top: var(--a-line-rule) solid var(--a-border-strong); padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
  .a-stamp__head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; min-width: 0; }
  .a-stamp__head strong { display: inline-flex; gap: 8px; align-items: center; min-width: 0; font-weight: 600; }
  .a-stamp__head svg { width: 20px; height: 20px; flex: none; }
  /* a long name is cut in the middle, the extension kept: the renderer splits it into two spans */
  .a-stamp__name { display: inline-flex; min-width: 0; white-space: nowrap; }
  .a-stamp__name > :first-child { overflow: hidden; text-overflow: ellipsis; }
  .a-stamp__name > :last-child { flex: none; }
  .a-stamp dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font: var(--a-type-meta); }
  .a-stamp dt { color: var(--a-foreground-muted); }
  .a-stamp .a-progress { margin-inline: -20px; margin-bottom: -16px; }

  /* ---------- figure ---------- */
  .a-figure { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .a-figure__frame { background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); aspect-ratio: 16 / 10; max-width: 100%; padding: 4% 6%; }
  .a-figure figcaption { font: var(--a-type-meta); color: var(--a-foreground-muted); }

  /* ---------- badge: mono label in a 22 px box ---------- */
  .a-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: var(--a-line-hair) solid var(--a-border-control); font: 400 .75rem/1 var(--a-mono); letter-spacing: var(--a-track-label); text-transform: uppercase; color: var(--a-foreground-muted); background: transparent; white-space: nowrap; }
  .a-badge--accent { border-color: var(--a-accent); color: var(--a-accent); background: var(--a-accent-muted); }
  .a-badge--success { border-color: var(--a-success); color: var(--a-success); background: var(--a-success-muted); }
  .a-badge--warning { border-color: var(--a-warning); color: var(--a-warning); background: var(--a-warning-muted); }
  .a-badge--danger { border-color: var(--a-danger); color: var(--a-danger); background: var(--a-danger-muted); }
}

/* design/kit/figure.css */
/* The seeded isometric drawing from figures/isometric.mjs (DESIGN.md §9.2): ink lines on paper,
   one block picked out in the mark. Classes are the generator's own. */
@layer arai.kit {
  .dwg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--a-mono); }
  .dwg .d-plate { fill: var(--a-surface); stroke: var(--a-foreground); stroke-width: 1.2; }
  .dwg .d-cut { fill: var(--a-surface-muted); stroke: var(--a-foreground); stroke-width: 1; }
  .dwg .d-axis { stroke: var(--a-foreground); stroke-width: .8; stroke-dasharray: 14 4 2 4; opacity: .55; }
  .dwg .d-bub { fill: var(--a-background); stroke: var(--a-foreground); stroke-width: 1; }
  .dwg .d-t { font-size: 10px; fill: var(--a-foreground); text-anchor: middle; }
  .dwg .d-b polygon { stroke: var(--a-foreground); stroke-width: 1.3; stroke-linejoin: round; }
  .dwg .d-top { fill: var(--a-surface); }
  .dwg .d-front { fill: var(--a-figure-front); }
  .dwg .d-side { fill: var(--a-figure-side); }
  .dwg .d-fl { fill: none; stroke: var(--a-foreground); stroke-width: .7; opacity: .55; }
  .dwg .d-ml { stroke: var(--a-foreground); stroke-width: .5; opacity: .3; }
  .dwg .d-acc .d-top { fill: var(--a-accent-muted); stroke: var(--a-mark); stroke-width: 2; }
  .dwg .d-acc :is(.d-front, .d-side) { stroke: var(--a-mark); }
  .dwg .d-lead { fill: none; stroke: var(--a-mark); stroke-width: 1.2; }
  .dwg .d-dot { fill: var(--a-mark); }
  /* a tag is text, and the mark is never text on light (§5.2) */
  .dwg .d-ta { font-size: 12px; fill: var(--a-accent); text-anchor: start; }
  .dwg .d-dim { stroke: var(--a-foreground); stroke-width: 1; }
  .dwg .d-dt { font-size: 11px; }
  .dwg .d-n circle { fill: none; stroke: var(--a-foreground); stroke-width: 1; }
  .dwg .d-n path { fill: var(--a-foreground); }
  /* a thumbnail drops the annotations and thickens the lines */
  .dwg--card :is(.d-t, .d-bub, .d-n, .d-lead, .d-ta, .d-dt) { display: none; }
  .dwg--card .d-b polygon { stroke-width: 2.2; }
  .dwg--card .d-plate { stroke-width: 2; }
  .dwg--card .d-dim { stroke-width: 1.6; }
  .a-entry__fig .dwg, .a-figure__frame .dwg { height: 100%; }
}

/* design/kit/feedback.css */
/* Feedback: progress, skeleton, empty state, toast (DESIGN.md §12.6). */
@layer arai.kit {
  .a-progress { height: 2px; background: var(--a-border-subtle); position: relative; overflow: hidden; }
  .a-progress > i { position: absolute; inset: 0 auto 0 0; width: var(--_value, 0%); background: var(--a-mark); }
  /* waiting to retry by itself: the figure holds, in grey (an upload with no connection, §12.9) */
  .a-progress--paused > i { background: var(--a-foreground-subtle); }
  .a-progress--indet > i { width: 30%; animation: a-indet var(--a-dur-sweep) var(--a-ease) infinite; }
  /* translate is relative to the bar itself: 100% / 30% ≈ 334% crosses the whole track */
  @keyframes a-indet { from { transform: translateX(-100%); } to { transform: translateX(334%); } }
  @media (forced-colors: active) { .a-progress > i { background: Highlight; } }

  /* the hatched fill in the shape of the content (§9.2) */
  .a-skeleton { position: relative; display: block; min-height: 1.2em; background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border-subtle); color: var(--a-foreground); }
  .a-skeleton::after { content: ""; position: absolute; inset: 0; background: var(--a-hatch); opacity: .06; }

  /* a label, a title, one sentence, one action; optionally a seeded figure */
  .a-empty { display: grid; justify-items: start; gap: 12px; padding: 32px 24px; background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); }
  .a-empty__fig { width: 168px; max-width: 100%; aspect-ratio: 16 / 10; margin-bottom: 8px; }
  .a-empty p { max-width: 46ch; color: var(--a-foreground-secondary); }
  .a-empty .a-btn { margin-top: 8px; }

  /* only to confirm something the person just did; never the only report of an error */
  .a-toast { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; max-width: 100%; padding: 0 4px 0 16px; background: var(--a-night); color: var(--a-night-foreground); font: var(--a-type-small); box-shadow: var(--a-shadow-float); animation: a-fade var(--a-dur-2) var(--a-ease); }
  .a-toast > svg { width: 20px; height: 20px; flex: none; color: var(--a-mark); }
  .a-toast .a-btn { color: var(--a-night-foreground); }
  .a-toast > .a-btn:last-child { border-left: var(--a-line-hair) solid var(--a-night-border); }
  .a-toast .a-btn:hover { background: color-mix(in srgb, var(--a-night-foreground) 12%, transparent); }
  .a-toast-region { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 40; display: grid; gap: 8px; width: max-content; max-width: calc(100% - 32px); }
}

/* design/kit/overlay.css */
/* Overlays: menu, tooltip, dialog and its scrim (DESIGN.md §12.7). */
@layer arai.kit {
  /* ---------- menu, popover: 44 px rows; danger last, after a separator ---------- */
  .a-menu { list-style: none; margin: 0; padding: 4px 0; min-width: 232px; background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border-strong); box-shadow: var(--a-shadow-float); z-index: 40; }
  .a-menu :is(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 16px; background: none; border: 0; text-align: left; text-decoration: none; font: 500 .9375rem/1.4 var(--a-sans); transition: background-color var(--a-dur-1) var(--a-ease); }
  .a-menu :is(a, button) > svg { width: 16px; height: 16px; flex: none; }
  .a-menu :is(a, button):hover, .a-menu [data-highlighted] { background: var(--a-surface-muted); }
  .a-menu [aria-current="page"] { color: var(--a-accent); }
  .a-menu [aria-current="page"]::before { content: "/" / ""; margin-right: -4px; }
  .a-menu :is(a, button) > span { margin-left: auto; font: var(--a-type-label); color: var(--a-foreground-muted); }
  .a-menu :is([aria-disabled="true"], [disabled]) { opacity: .45; cursor: not-allowed; }
  .a-menu :is([aria-disabled="true"], [disabled]):hover { background: none; }
  .a-menu__danger { color: var(--a-danger); }
  .a-menu__empty { padding: 12px 16px; font: var(--a-type-small); color: var(--a-foreground-muted); }
  .a-menu hr { margin: 4px 0; border: 0; border-top: var(--a-line-hair) solid var(--a-border); }
  .a-caret { width: 16px; height: 16px; flex: none; transition: rotate var(--a-dur-2) var(--a-ease); }
  [aria-expanded="true"] > .a-caret, [open] > summary > .a-caret { rotate: 180deg; }

  /* ---------- tooltip: night, paper small text ---------- */
  .a-tip { display: inline-block; max-width: 280px; padding: 6px 10px; background: var(--a-night); color: var(--a-night-foreground); font: var(--a-type-small); z-index: 60; }
  .a-tip .a-link:hover { color: var(--a-mark); }

  /* ---------- dialog: a bottom sheet below sm ---------- */
  .a-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; background: var(--a-surface); color: var(--a-foreground); border: var(--a-line-rule) solid var(--a-border-strong); border-radius: var(--a-radius); box-shadow: var(--a-shadow-float); z-index: 50; }
  .a-dialog--wide { width: min(640px, calc(100% - 32px)); }
  /* the image viewer: a picture at the size of the window, zoomable; its bar on top, the stage takes the rest */
  .a-dialog--image { display: flex; flex-direction: column; width: min(1200px, calc(100% - 32px)); height: calc(100dvh - 32px); max-height: none; overflow: hidden; }
  .a-image-viewer__bar { display: flex; align-items: center; gap: 8px; flex: none; min-height: 52px; padding: 4px 4px 4px 16px; border-bottom: var(--a-line-hair) solid var(--a-border); }
  .a-image-viewer__title { flex: 1; min-width: 0; font: var(--a-type-ui); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .a-image-viewer__tools { display: flex; align-items: center; gap: 2px; flex: none; }
  /* the zoom surface takes every touch, or a pinch would zoom the page; no callout on a long press */
  .a-image-viewer__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--a-surface-muted); touch-action: none; -webkit-touch-callout: none; user-select: none; cursor: grab; }
  .a-image-viewer__stage:active { cursor: grabbing; }
  .a-dialog::backdrop { background: var(--a-scrim); }
  .a-dialog[open] { animation: a-fade var(--a-dur-2) var(--a-ease); }
  .a-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 8px 0 20px; }
  .a-dialog__head :is(h2, h3, h4) { font: var(--a-type-title); letter-spacing: var(--a-track-title); }
  .a-dialog__body { padding: 8px 20px 0; color: var(--a-foreground-secondary); font: var(--a-type-ui); }
  .a-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 20px; }
  @keyframes a-rise { from { opacity: 0; translate: 0 24px; } }
  .a-scrim { position: fixed; inset: 0; background: var(--a-scrim); z-index: 40; animation: a-fade var(--a-dur-2) var(--a-ease); }
  @media (width < 640px) {
    .a-dialog, .a-dialog--wide { width: 100%; max-width: 100%; margin: auto 0 0; border-width: var(--a-line-rule) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    /* the image viewer is not a sheet: it takes the whole screen, inside the safe area */
    .a-dialog.a-dialog--image { width: 100%; max-width: 100%; height: 100dvh; margin: 0; border-width: 0; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
    .a-dialog.a-dialog--image[open] { animation: a-fade var(--a-dur-2) var(--a-ease); }
    /* the sheet slides up over --a-dur-3 (§11) */
    .a-dialog[open] { animation: a-rise var(--a-dur-3) var(--a-ease); }
    .a-dialog__foot { flex-direction: column-reverse; }
    .a-dialog__foot .a-btn { width: 100%; }
  }
}

/* design/kit/site.css */
/* Site-specific: the ask block, the night band and the contact dock (DESIGN.md §12.5, §12.8). */
@layer arai.kit {
  /* the static twin of the composer: the person meets the agent's input before the agent */
  .a-ask { background: var(--a-surface); border: var(--a-line-rule) solid var(--a-border-strong); border-top-width: var(--a-line-cap); padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; container-type: inline-size; }
  .a-ask > :is(h2, h3) { font: var(--a-type-title); letter-spacing: var(--a-track-title); max-width: 24em; }
  .a-ask__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: start; }
  .a-ask__form textarea { width: 100%; min-height: 54px; padding: 14px 16px; border: var(--a-line-rule) solid var(--a-border-strong); border-radius: var(--a-radius); background: var(--a-surface); font: var(--a-type-body); line-height: 1.5; resize: vertical; }
  .a-ask__form textarea::placeholder { color: var(--a-foreground-muted); opacity: 1; }
  /* «Спросить ARAI» stands beside the field from 480 px of the block's own width, under it below that */
  @container (width >= 480px) { .a-ask__form { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }

  /* the closing call to action of a site page: at most one per page, never in the Product register */
  .a-night { background: var(--a-night); color: var(--a-night-foreground); position: relative; isolation: isolate; overflow: hidden; }
  .a-night::after { content: ""; position: absolute; inset: 0 0 0 60%; color: var(--a-night-foreground); background: var(--a-hatch); opacity: .09; pointer-events: none; }
  .a-night__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 64px 80px; justify-items: start; }
  @media (width >= 1024px) { .a-night__in { padding-block: 96px; } }
  .a-night__kick { font: var(--a-type-label); letter-spacing: var(--a-track-label); text-transform: uppercase; color: var(--a-mark); }
  .a-night__kick::before { content: "/ " / ""; }
  .a-night h2 { max-width: min(14em, 100%); font: var(--a-type-display); letter-spacing: var(--a-track-display); }
  .a-night p { max-width: 56ch; color: var(--a-night-muted); }
  .a-night .a-btn { margin-top: 8px; }

  /* ---------- contact dock: a quiet icon square bottom-right; its name unfolds beside it, Telegram and WhatsApp above it ---------- */
  .a-contact { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; flex-direction: column-reverse; align-items: flex-end; }
  .a-contact--inline { position: static; align-items: flex-start; }
  /* the footer's base line (copyright, language switch) ends above the dock, never under it */
  .a-footer:has(~ .a-contact:not(.a-contact--inline)) { padding-bottom: 96px; }
  .a-contact__btn {
    position: relative; isolation: isolate; list-style: none; display: grid; place-items: center; width: 48px; height: 48px; cursor: pointer;
    background: var(--a-surface); color: var(--a-foreground); border: var(--a-line-rule) solid var(--a-border-strong); box-shadow: var(--a-shadow-float);
    font: 500 .9375rem/1 var(--a-sans);
    transition: background-color var(--a-dur-1) var(--a-ease), color var(--a-dur-1) var(--a-ease);
  }
  .a-contact__btn::-webkit-details-marker { display: none; }
  .a-contact__shut, .a-contact[open] .a-contact__open { display: none; }
  .a-contact[open] .a-contact__shut { display: block; }
  .a-contact[open] > .a-contact__btn { background: var(--a-night); color: var(--a-night-foreground); border-color: var(--a-night); }
  /* the name: one box over the square's border box that reaches left of it, under the icon. Hidden,
     it stays in the accessibility tree (the summary's name) and takes no clicks; it unfolds by
     opacity and its text slides in, since width never animates (§11) */
  .a-contact__label {
    position: absolute; z-index: -1; inset-block: calc(-1 * var(--a-line-rule)); right: calc(-1 * var(--a-line-rule));
    display: flex; align-items: center; padding: 0 48px 0 16px; white-space: nowrap; pointer-events: none;
    background: var(--a-surface); border: var(--a-line-rule) solid var(--a-border-strong); box-shadow: var(--a-shadow-float);
    opacity: 0; transition: opacity var(--a-dur-2) var(--a-ease);
  }
  .a-contact__label > span { translate: 8px 0; transition: translate var(--a-dur-2) var(--a-ease); }
  /* only a pointer that hovers unfolds it. Keyboard focus keeps the square and its own ring, as
     every control's (a ring drawn on the name instead is lost in forced colours, §14), so a
     focused square does not unfold under the pointer either: its ring would cross the name */
  @media (hover: hover) {
    .a-contact:not([open]) > .a-contact__btn:hover:not(:focus-visible) { box-shadow: none; }
    .a-contact:not([open]) > .a-contact__btn:hover:not(:focus-visible) > .a-contact__label { opacity: 1; pointer-events: auto; }
    .a-contact:not([open]) > .a-contact__btn:hover:not(:focus-visible) > .a-contact__label > span { translate: 0; }
  }
  .a-contact__panel { width: 296px; max-width: calc(100vw - 32px); margin-bottom: 8px; animation: a-lift var(--a-dur-2) var(--a-ease); }
  .a-contact--inline .a-contact__panel { animation: none; }
  .a-contact__title { padding: 8px 16px 6px; font: var(--a-type-label); letter-spacing: var(--a-track-label); text-transform: uppercase; color: var(--a-foreground-muted); }
  @keyframes a-lift { from { opacity: 0; translate: 0 6px; } }
  /* the phone menu's scrim sits in the header's layer, below the dock: the dock steps aside while it is open */
  body:has(.a-menu-btn[open]) .a-contact { visibility: hidden; }
  /* the landing links the kit without base.css (§2.4), so the dock carries its own reduced-motion rule */
  @media (prefers-reduced-motion: reduce) { .a-contact__panel { animation: none; } .a-contact__btn, .a-contact__label, .a-contact__label > span { transition: none; } }
  @media print { .a-contact { display: none; } }
}

/* design/kit/agent.css */
/* Agent-specific: composer, messages, attach chip, work log and its working indicator,
   assistant identity, avatar, welcome (DESIGN.md §12.9). */
@layer arai.kit {
  /* ---------- composer: one container, two layouts; the caret survives the reflow ---------- */
  .a-composer {
    position: relative; z-index: 20;
    background: var(--a-surface); border: var(--a-line-rule) solid var(--a-border-strong); padding: 6px;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "attach text mic send";
    align-items: end; gap: 4px;
  }
  /* Expanded layouts give the field its full width and put controls below it. */
  .a-composer[data-filled="true"] { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "text text text text" "attach . mic send"; }
  .a-composer__attach { grid-area: attach; }
  .a-composer__mic { grid-area: mic; }
  .a-composer__send { grid-area: send; }
  .a-composer__voice-done { grid-column: mic-start / send-end; grid-row: 1; display: flex; align-items: center; gap: 4px; justify-content: end; }
  .a-composer[data-filled="true"] .a-composer__voice-done { grid-row: 2; }
  .a-composer__voice-done-button { position: relative; min-width: 92px; white-space: nowrap; }
  .a-composer__voice-done-content { display: inline-flex; align-items: center; gap: 8px; }
  .a-composer__voice-done-button[aria-busy="true"] .a-composer__voice-done-content { visibility: hidden; }
  .a-composer__voice-done-button[aria-busy="true"] .a-spin { position: absolute; }
  .a-composer__chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 4px 6px; }
  /* the field has no frame of its own, so the ring is drawn on the container (§14) */
  .a-composer:focus-within { outline: 2px solid var(--a-accent); outline-offset: 3px; }
  .a-composer__field { grid-area: text; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .a-composer textarea { width: 100%; min-width: 0; border: 0; background: transparent; resize: none; padding: 10px 4px; font: var(--a-type-body); line-height: 1.5; height: 44px; max-height: min(14rem, 38dvh); overflow-y: auto; outline: none; }
  /* the field grows with its text up to max-height; without field-sizing the renderer sizes it */
  @supports (field-sizing: content) { .a-composer textarea { field-sizing: content; height: auto; min-height: 44px; } }
  /* The prompt is drawn, not a native placeholder: text-overflow does not apply to ::placeholder
     (it computes to clip), so a native prompt would cut a letter in half on a narrow phone. */
  .a-composer textarea::placeholder { color: transparent; }
  .a-composer__prompt { position: absolute; inset: 10px 4px auto; pointer-events: none; font: var(--a-type-body); line-height: 1.5; color: var(--a-foreground-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .a-composer__prompt--short { display: none; }
  /* hidden, still laid out, so it can be measured */
  .a-composer textarea:not(:placeholder-shown) ~ .a-composer__prompt { visibility: hidden; }
  /* the composer measures which prompt fits; a breakpoint cannot be right in three languages at once */
  .a-composer[data-prompt="short"] .a-composer__prompt--long { display: none; }
  .a-composer[data-prompt="short"] .a-composer__prompt--short { display: block; }
  .a-composer__field[data-ghost="true"] textarea { grid-area: 1 / 1; }
  .a-composer__ghost { grid-area: 1 / 1; position: relative; min-width: 0; max-height: min(14rem, 38dvh); overflow-y: auto; padding: 10px 4px; font: var(--a-type-body); line-height: 1.5; color: var(--a-foreground-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
  .a-composer__ghost-text { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; white-space: inherit; overflow-wrap: inherit; cursor: text; }
  .a-composer__ghost-actions { display: inline-block; white-space: nowrap; }
  .a-composer__ghost-accept { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin-left: 8px; padding: 0 8px; vertical-align: 1px; border: var(--a-line-hair) solid var(--a-accent); background: transparent; color: var(--a-accent); font: 500 .8125rem/1 var(--a-mono); cursor: pointer; }
  .a-composer__ghost-accept:hover, .a-composer__ghost-accept:active { background: var(--a-accent-muted); }
  .a-composer__ghost-hide { display: inline-grid; place-items: center; width: 28px; height: 24px; margin-left: 2px; padding: 0; vertical-align: -6px; border: 0; background: none; color: var(--a-foreground-muted); cursor: pointer; }
  .a-composer__ghost-hide:hover { color: var(--a-foreground); }
  .a-composer__ghost-hide svg { width: 16px; height: 16px; }
  @media (pointer: coarse) {
    .a-composer__ghost-accept, .a-composer__ghost-hide { width: 44px; height: 44px; padding: 0; justify-content: center; vertical-align: middle; }
    .a-composer__ghost-accept { font: 500 1.25rem/1 var(--a-mono); margin-left: 6px; }
    .a-composer__ghost-key { display: none; }
  }
  .a-composer[aria-disabled="true"] { background: var(--a-surface-muted); border-color: var(--a-border); }
  .a-composer[aria-disabled="true"] :is(textarea, .a-btn) { cursor: not-allowed; }
  /* inside a task form the composer is the note field, not a card of its own */
  .a-composer[data-framed="false"] { border: 0; padding: 0; }
  .a-composer__error { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 6px 4px; font: var(--a-type-small); color: var(--a-danger); }

  /* ---------- messages ---------- */
  .a-msg { justify-self: end; max-width: 85%; background: var(--a-surface-muted); border: var(--a-line-hair) solid var(--a-border); padding: 12px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .a-answer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: var(--a-w-reading); }
  .a-answer > p { font: var(--a-type-prose); }
  @media (width < 768px) { .a-answer > p { hyphens: auto; hyphenate-limit-chars: 6 3 3; } }
  /* the house mark (COMPACT, 24 px) beside a mono «ARAI · 14:33»; never a sparkle or a robot */
  .a-agent-id { display: flex; gap: 8px; align-items: center; font: var(--a-type-meta); color: var(--a-foreground-muted); }
  .a-avatar { width: 32px; height: 32px; border-radius: var(--a-radius-round); background: var(--a-foreground); color: var(--a-background); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; font: 500 .75rem/1 var(--a-mono); flex: none; }

  /* ---------- streaming answer (§18): each word fades in as it mounts, and the newest two stay a step
     lighter and dry to ink as the next words arrive; code and formulas are not split ---------- */
  .a-word { animation: a-fade var(--a-dur-word) var(--a-ease) both; transition: color var(--a-dur-ink) var(--a-ease); }
  .a-word--fresh { color: var(--a-foreground-muted); }
  /* The caret sits on the last line of the text as ::after of the last block: a sibling node would
     drop to a line of its own after a paragraph. A 2 px mark bar (graphics only, §5.2), 1 Hz. */
  .a-streaming > :last-child::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-inline-start: .125rem; margin-bottom: -.125em; background: var(--a-mark); animation: a-blink var(--a-dur-blink) step-end infinite; }
  /* a drawn text caret elsewhere: the sign-in code cell */
  .a-blink { animation: a-blink var(--a-dur-blink) step-end infinite; }
  @keyframes a-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

  /* ---------- attach chip: on the surface opposite to what holds it ---------- */
  /* Three columns: the icon (or picture), the text, the remove control. The text column holds the name and
     the meta; they share one line while it fits, and a long meta (a refusal reason is a sentence) wraps
     inside the column while the control keeps the top right (2026-10-25). A chip without a control has no
     third column, so no trailing gap. */
  .a-attach { position: relative; display: inline-grid; grid-template: auto / auto minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; align-items: start; column-gap: 8px; min-height: 36px; padding: 6px 10px; background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); font: var(--a-type-small); justify-self: start; max-width: 100%; }
  .a-composer .a-attach { background: var(--a-surface-muted); }
  .a-attach > svg { width: 16px; height: 16px; margin-block: 4px; }
  /* a picked image shows itself in place of the icon */
  .a-attach__thumb { width: 32px; height: 32px; margin: -4px 0; object-fit: cover; background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); }
  /* the first line is 24 px, the height the icon, the picture and the control take in the row */
  .a-attach__text { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; column-gap: 8px; min-width: 0; min-height: 24px; }
  /* a 36 px icon button sits on the first line: its own padding reaches into the chip's */
  .a-attach > button { margin-block: -6px; }
  .a-attach__name { display: inline-flex; min-width: 0; max-width: 100%; white-space: nowrap; }
  .a-attach__name > :first-child { overflow: hidden; text-overflow: ellipsis; }
  .a-attach__name > :last-child { flex: none; }
  /* wraps only when it alone is wider than the text column: a nowrap one widened a 390 px page past the
     viewport (2026-10-21) */
  .a-attach__meta { min-width: 0; font: var(--a-type-meta); color: var(--a-foreground-muted); }
  .a-attach .a-progress { position: absolute; left: 0; right: 0; bottom: 0; }
  .a-attach[aria-invalid="true"] { border-color: var(--a-danger); }
  .a-attach[aria-invalid="true"] .a-attach__meta { color: var(--a-danger); }

  /* ---------- images in a sent message: thumbnails that open the original ---------- */
  .a-msg__images { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .a-msg-image { display: block; position: relative; min-width: 96px; min-height: 96px; max-width: 100%; padding: 0; overflow: hidden; background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); cursor: zoom-in; }
  /* the picture, or the space it will take when its size is known (an inline aspect-ratio): the tile does not move when it arrives */
  .a-msg-image img, .a-msg-image__space { display: block; width: auto; max-width: 100%; height: 160px; object-fit: contain; }
  .a-msg__images:has(> :nth-child(2)) :is(.a-msg-image img, .a-msg-image__space) { height: 112px; }
  .a-msg-image[aria-busy="true"] { width: 160px; background: var(--a-surface-muted); cursor: progress; }
  .a-msg-image[aria-busy="true"]:has(> .a-msg-image__space) { width: auto; }
  .a-msg-image[aria-disabled="true"] { display: grid; place-content: center; width: 160px; padding: 8px 12px; font: var(--a-type-meta); color: var(--a-foreground-muted); cursor: default; }
  /* the picture on the viewer's stage, fitted by the viewer; the max bounds hold it before its size is known */
  .a-image-view { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

  /* ---------- dropping files anywhere on the chat ---------- */
  .a-dropzone { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: var(--a-scrim); pointer-events: none; animation: a-fade var(--a-dur-1) var(--a-ease); }
  .a-dropzone__panel { display: grid; gap: 4px; max-width: 480px; padding: 24px 32px; text-align: center; background: var(--a-surface); border: var(--a-line-rule) dashed var(--a-accent); }
  .a-dropzone__panel strong { font: var(--a-type-title); letter-spacing: var(--a-track-title); }
  .a-dropzone__panel span { font: var(--a-type-small); color: var(--a-foreground-muted); }

  /* ---------- work log («Ход работы») ---------- */
  .a-worklog { border: var(--a-line-hair) solid var(--a-border); container-type: inline-size; max-width: var(--a-w-reading); }
  .a-worklog summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "label step meta"; gap: 4px 12px; align-items: center; min-height: 44px; padding: 0 16px; }
  .a-worklog summary::-webkit-details-marker { display: none; }
  .a-worklog__label { grid-area: label; display: inline-flex; align-items: center; gap: 8px; }
  .a-worklog__step { grid-area: step; min-width: 0; font: var(--a-type-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .a-worklog__meta { grid-area: meta; font: 400 .8125rem/1 var(--a-mono); color: var(--a-foreground-muted); font-variant-numeric: tabular-nums; }
  /* a log whose summary can be only its label (an ended Task's, unread) ends it with the kit's caret */
  .a-worklog summary:has(> .a-caret) { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "label step meta caret"; }
  .a-worklog summary > .a-caret { grid-area: caret; }
  /* below 440 px of its own width the label and the count share the first row and the step takes the second, whole */
  @container (width < 440px) {
    .a-worklog summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label meta" "step step"; padding-block: 12px; }
    .a-worklog__step { white-space: normal; }
  }
  /* the Task's count carries its plan («План: 3 из 5 · 14 шагов», longer in Kazakh), too long to share a row
     with the label in a narrow column: below 600 px the label and the caret share the first row, and the
     step and the count each take a row of their own, whole; an absent one leaves no row */
  @container (width < 600px) {
    .a-worklog summary:has(> .a-caret) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label caret"; padding-block: 12px; }
    .a-worklog summary:has(> .a-caret) > :is(.a-worklog__step, .a-worklog__meta) { grid-area: auto / 1 / auto / -1; white-space: normal; }
    .a-worklog summary:has(> .a-caret) > .a-worklog__meta { line-height: 1.4; }
  }
  .a-worklog ol { margin: 0; padding: 4px 16px 12px 40px; font: var(--a-type-small); color: var(--a-foreground-secondary); display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* process is quiet: the accent in the thread means "waits for you" (DESIGN.md §18, 2026-10-29) */
  .a-worklog ol li::marker { font-family: var(--a-mono); color: var(--a-foreground-muted); }
  .a-worklog[data-state="failed"] { border-left: var(--a-line-heavy) solid var(--a-danger); }
  .a-worklog[data-state="failed"] .a-worklog__step { color: var(--a-danger); }
  .a-worklog[data-state="cancelled"] .a-worklog__step { color: var(--a-foreground-muted); }
  /* ---------- Task outputs: the files a Task delivered, each a small stamp in the conversation ---------- */
  .a-outputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: var(--a-w-reading); container-type: inline-size; margin: 0; padding: 0; list-style: none; }
  .a-output { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "type name action" "type meta action"; gap: 2px 16px; align-items: center; min-width: 0; padding: 12px 16px; background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); border-top: var(--a-line-rule) solid var(--a-border-strong); }
  /* the type tile is a sheet with its format in mono; the main deliverable's sheet carries the mark */
  .a-output__type { grid-area: type; display: grid; place-items: center; width: 40px; height: 48px; border: var(--a-line-hair) solid var(--a-border-strong); background: var(--a-background); font: var(--a-type-label); letter-spacing: var(--a-track-label); text-transform: uppercase; color: var(--a-foreground); }
  .a-output--primary .a-output__type { border-top: var(--a-line-heavy) solid var(--a-mark); }
  .a-output__name { grid-area: name; min-width: 0; font: var(--a-type-ui); font-weight: 600; overflow-wrap: anywhere; }
  .a-output__meta { grid-area: meta; font: var(--a-type-meta); color: var(--a-foreground-muted); }
  .a-output__action { grid-area: action; }
  /* a PDF or PNG output shows its first page above the stamp; it opens the larger page */
  .a-output--previewed { grid-template-areas: "preview preview preview" "type name action" "type meta action"; }
  .a-output__preview { grid-area: preview; justify-self: start; margin-bottom: 10px; }
  /* below 400 px of its own width the action drops under the name and takes the whole row */
  @container (width < 400px) {
    .a-output { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "type name" "type meta" "action action"; gap: 2px 12px; }
    .a-output__action { margin-top: 10px; justify-self: stretch; }
    .a-output--previewed { grid-template-areas: "preview preview" "type name" "type meta" "action action"; }
  }

  /* the working indicator: loading-state's 3×3 grid; three lit cells walk one cell per 330 ms step */
  .a-working { display: grid; grid-template-columns: repeat(3, 6px); gap: 2px; flex: none; }
  .a-working i { width: 6px; height: 6px; background: var(--a-mark); opacity: .15; animation: a-walk var(--a-dur-walk) linear infinite; }
  .a-working[data-active="false"] i { animation: none; }
  .a-working i:nth-child(2) { animation-delay: calc(var(--a-dur-walk) * -2 / 9); }
  .a-working i:nth-child(3) { animation-delay: calc(var(--a-dur-walk) * -4 / 9); }
  .a-working i:nth-child(4) { animation-delay: calc(var(--a-dur-walk) * -6 / 9); }
  .a-working i:nth-child(5) { animation-delay: calc(var(--a-dur-walk) * -8 / 9); }
  .a-working i:nth-child(6) { animation-delay: calc(var(--a-dur-walk) * -1 / 9); }
  .a-working i:nth-child(7) { animation-delay: calc(var(--a-dur-walk) * -3 / 9); }
  .a-working i:nth-child(8) { animation-delay: calc(var(--a-dur-walk) * -5 / 9); }
  .a-working i:nth-child(9) { animation-delay: calc(var(--a-dur-walk) * -7 / 9); }
  @keyframes a-walk { 0%, 31% { opacity: .9; } 36%, 97% { opacity: .15; } 100% { opacity: .9; } }

  /* ---------- waiting header: a message the designer can answer now ---------- */
  /* a 3 px accent rule and an accent-muted band with a mono label in accent (4.75 : 1 on
     orange-100); it sits above the identity row and goes, without motion, once answered */
  .a-waiting { border-top: var(--a-line-heavy) solid var(--a-accent); background: var(--a-accent-muted); padding: 6px 12px; }
  .a-waiting .a-label { color: var(--a-accent); }

  /* ---------- jump button: says where it leads (DESIGN.md §12.9) ---------- */
  /* «К вопросу» in accent; «Новый ответ» and the bare arrow keep the secondary button */
  .a-btn[data-jump="question"]:not(:hover, :active) { color: var(--a-accent); border-color: var(--a-accent); }
  /* Liquid Glass (owner, 2026-11-05: «давай попробуем glass, как в новом iOS», variant 4):
     a capsule of frosted paper with a light rim, 32 px tall, two thirds of a 44 px button
     («высоту раза в полтора поменьше»); the hit area stays 44 px (§14). In Chromium the
     lens filter set inline by liquid-glass.tsx bends the text at the rim; elsewhere this
     frost is the whole effect. A deliberate exception to square corners and no shadows. */
  .a-btn[data-jump] {
    --_h: 32px; position: relative; padding: 4px 14px; font-size: .875rem;
    border: 1px solid color-mix(in srgb, var(--a-foreground) 22%, transparent);
    border-radius: var(--a-radius-round);
    -webkit-backdrop-filter: var(--a-glass-blur); backdrop-filter: var(--a-glass-blur);
    box-shadow: var(--a-shadow-glass);
  }
  .a-btn[data-jump]:not(:hover, :active) { background: var(--a-glass-fill); }
  .a-btn[data-jump] svg { width: 16px; height: 16px; }
  .a-btn[data-jump="latest"] { width: var(--_h); padding: 0; }
  .a-btn[data-jump]::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%;
  }
  /* glass is decoration: whoever asks for less transparency gets solid paper */
  @media (prefers-reduced-transparency: reduce) {
    .a-btn[data-jump] { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .a-btn[data-jump]:not(:hover, :active) { background: var(--a-background); }
  }

  /* ---------- Task strip: pending work above the composer, two lines at most ---------- */
  .a-task-strip-shell { border-top: var(--a-line-hair) solid var(--a-border); background: var(--a-surface); }
  .a-task-strip { position: relative; }
  /* while a question waits the shell takes the waiting header's band; stopping, queued and
     working stay plain */
  .a-task-strip-shell:has(.a-task-strip[data-state="waiting"]) { border-top: 2px solid var(--a-accent); background: var(--a-accent-muted); }
  .a-task-strip strong { color: var(--a-accent); }
  .a-task-strip__summary { font: inherit; cursor: pointer; }
  .a-task-strip__line { font: var(--a-type-small); }
  .a-task-strip__line + .a-task-strip__line { color: var(--a-foreground-muted); }
  .a-task-strip__usual { color: var(--a-foreground-muted); }
  .a-task-strip__plan { position: absolute; bottom: 100%; width: 100%; z-index: 1; padding: var(--a-gutter-app); background: var(--a-surface); border: var(--a-line-hair) solid var(--a-border); font: var(--a-type-small); }
  .a-task-strip__plan [aria-current="step"] { color: var(--a-foreground); }

  /* ---------- chat list: a chat's Task mark beside its title ---------- */
  .a-thread-rename { font: var(--a-type-body); }
  .a-thread-activity { font: var(--a-type-meta); color: var(--a-foreground-muted); }
  .a-thread-activity[data-state="waiting"] { color: var(--a-accent); }
  .a-thread-activity[data-state="failed"] { color: var(--a-danger); }
  .a-thread-meta { font: var(--a-type-meta); color: var(--a-foreground-muted); }
  .a-thread-heading { font: var(--a-type-meta); color: var(--a-foreground-muted); margin: 0; }
  /* S8-04: the one pulsing dot of a chat that waits for the designer. */
  .a-thread-dot { width: 8px; height: 8px; border-radius: var(--a-radius-round); background: var(--a-accent); align-self: center; }
  @keyframes a-thread-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
  .a-thread-dot[data-pulse] { animation: a-thread-pulse var(--a-dur-fade) linear infinite; }
  /* The chat list button's count of waiting chats, shown while the list is closed. */
  .a-sidebar-toggle { position: relative; }
  .a-waiting-count { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--a-accent); color: var(--a-accent-foreground); font: 500 .6875rem/16px var(--a-mono); text-align: center; }

  /* ---------- welcome: the drawn wordmark, a display question, suggestions ---------- */
  .a-welcome { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: start; max-width: var(--a-w-reading); }
  .a-welcome .a-wordmark svg { height: 48px; }
  /* the introduction — wordmark, question, the sentence under it — is centred over the
     full-width composer (owner, 2026-10-17); what follows the composer stays left-set rows */
  .a-welcome__intro { display: grid; gap: 16px; justify-self: stretch; justify-items: center; text-align: center; }
  .a-welcome h1 { font: var(--a-type-display); letter-spacing: var(--a-track-display); }

  /* ---------- task form: the welcome grown into one sheet for the chosen task ---------- */
  /* the sheet keeps the composer's 1.5 px ink frame; sections split on hairlines */
  .a-task-form { background: var(--a-surface); border: var(--a-line-rule) solid var(--a-border-strong); display: grid; }
  .a-task-form:focus-within { outline: 2px solid var(--a-accent); outline-offset: 3px; }
  .a-task-form__head { display: grid; gap: 8px; }
  .a-task-form__back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; background: none; border: 0; font: var(--a-type-small); color: var(--a-foreground-secondary); cursor: pointer; }
  .a-task-form__back:hover { color: var(--a-foreground); }
  .a-task-form__title { margin: 0; font: var(--a-type-heading); letter-spacing: var(--a-track-heading); }
  .a-task-form__promise { margin: 0; font: var(--a-type-lead); color: var(--a-foreground-secondary); }
  .a-task-form__section { display: grid; gap: 12px; padding: 16px; border-bottom: var(--a-line-hair) solid var(--a-border); }
  .a-task-form__section:last-of-type { border-bottom: 0; }
  .a-task-form__section-title, .a-task-form__decision legend, .a-task-form__field-label { margin: 0; padding: 0; font: 500 .875rem/1.4 var(--a-sans); }
  .a-task-form__opt { font-weight: 400; color: var(--a-foreground-muted); }

  /* «Понадобится»: a need's marker is the designer's statement — hollow, or a filled
     square once a file is marked for it; never a check and never green (spec §3.4) */
  .a-task-form__needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .a-task-form__need { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; font: var(--a-type-small); }
  .a-task-form__need::before { content: ""; width: 14px; height: 14px; margin-top: 3px; box-sizing: border-box; border: var(--a-line-rule) solid var(--a-border-strong); }
  .a-task-form__need[data-marked]::before { background: var(--a-foreground); border-color: var(--a-foreground); }
  .a-task-form__need-label { font-weight: 500; }
  .a-task-form__need-hint { color: var(--a-foreground-muted); }
  .a-task-form__need-by { color: var(--a-foreground-secondary); font: var(--a-type-meta); }
  .a-task-form__needs-note { font: var(--a-type-small); color: var(--a-foreground-muted); margin: 0; }

  /* the drop area: dashed until files land, then a compact row of actions */
  .a-task-form__drop { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 20px 16px; border: var(--a-line-rule) dashed var(--a-border-control); background: var(--a-background); }
  .a-task-form__drop[data-over="true"] { border-color: var(--a-accent); background: var(--a-accent-muted); }
  .a-task-form__drop-lead { display: inline-flex; align-items: center; gap: 8px; font: 500 .9375rem/1.4 var(--a-sans); }
  .a-task-form__drop-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .a-task-form__drop-accept { font: var(--a-type-meta); color: var(--a-foreground-muted); }
  .a-task-form__drop--compact { padding: 10px 12px; grid-auto-flow: column; justify-content: start; justify-items: start; text-align: left; align-items: center; }
  .a-task-form__guest { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 20px 16px; border: var(--a-line-rule) solid var(--a-border); background: var(--a-background); }
  @media (pointer: coarse) { .a-task-form__drop-drag { display: none; } }

  /* the files: attach chips, and per file the roles its needs play in it */
  .a-task-form__files { display: grid; gap: 8px; }
  .a-task-form__file { display: grid; gap: 6px; }
  .a-task-form__file .a-attach { justify-self: stretch; background: var(--a-surface-muted); }
  .a-task-form__file .a-attach__text { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; min-width: 0; }
  .a-task-form__file .a-attach__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .a-task-form__roles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 2px; font: var(--a-type-small); color: var(--a-foreground-secondary); }
  .a-task-form__roles .a-chip { min-height: 32px; padding: 0 10px; font-size: .8125rem; }
  .a-task-form__roles-guess { font: var(--a-type-meta); color: var(--a-foreground-muted); }
  .a-task-form__filenote { grid-column: 1 / -1; font: var(--a-type-small); color: var(--a-foreground-secondary); }

  /* decisions: a fieldset with a legend, chips inside; optional is said in words */
  .a-task-form__decisions { display: grid; gap: 16px; }
  .a-task-form__decision { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
  .a-task-form__help { font: var(--a-type-small); color: var(--a-foreground-muted); margin: 0; }
  .a-task-form__decision .a-chip { min-height: 40px; }
  .a-task-form__fields { display: flex; flex-wrap: wrap; gap: 12px 16px; }
  .a-task-form__field { display: grid; gap: 6px; min-width: 140px; flex: 1 1 160px; max-width: 260px; }
  .a-task-form__field .a-input { font-family: var(--a-mono); }
  .a-task-form__error { font: var(--a-type-small); color: var(--a-danger); margin: 0; }

  /* the note: the composer's own field inside the sheet */
  .a-task-form__note { display: grid; padding: 4px 10px 0; }
  .a-task-form .a-task-form__note textarea { width: 100%; box-sizing: border-box; min-height: 64px; border: 0; background: transparent; resize: vertical; padding: 10px 4px; font: var(--a-type-body); line-height: 1.5; outline: none; }
  .a-task-form .a-task-form__note textarea::placeholder { color: var(--a-foreground-muted); }

  /* under the sheet: what happens after the press, then the way to a sibling task */
  .a-task-form__after { display: grid; gap: 8px; font: var(--a-type-small); color: var(--a-foreground-secondary); }
  .a-task-form__after p { margin: 0; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
  .a-task-form__after svg { margin-top: 2px; color: var(--a-foreground-muted); }
  .a-task-form__related { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; font: var(--a-type-small); color: var(--a-foreground-muted); }
  .a-task-form__related .a-link { font: var(--a-type-small); }

  /* the action row: paperclip, country, the result-named primary; on a phone it sticks
     to the bottom, and while the on-screen keyboard is open ([data-keyboard]) it does not */
  .a-task-form__bar { display: flex; align-items: center; gap: 4px; padding: 6px; border-top: var(--a-line-hair) solid var(--a-border); background: var(--a-surface); }
  .a-task-form__bar .a-btn--primary { gap: 8px; }
  @media (max-width: 599px) {
    .a-task-form__bar { position: sticky; bottom: 0; z-index: 20; flex-wrap: wrap; background: var(--a-background); }
    .a-task-form__bar .a-btn--primary { flex: 1 0 100%; order: 3; justify-content: center; min-height: 48px; }
  }
  .a-task-form[data-keyboard] .a-task-form__bar { position: static; }

  /* the real composer is the action row's home: on a phone its box — a direct
     child of the sheet, so it has the sheet's height to travel — sticks to the
     bottom so attach, country and send stay reachable; while the on-screen
     keyboard is open it scrolls with the page and never covers the field being
     typed in */
  @media (max-width: 599px) {
    .a-task-form__composer { position: sticky; bottom: 0; z-index: 20; background: var(--a-surface); border-top: var(--a-line-hair) solid var(--a-border); }
    /* the result-named button takes a row of its own, full width, so a long
       label («Obtenir 2 dossiers de plans») never squeezes the country beside
       it into a column (AI UI review 2026-11-08) */
    .a-task-form__composer .a-composer[data-filled="true"] .a-composer__send { grid-column: 1 / -1; grid-row: 3; justify-content: center; min-height: 48px; }
  }
  .a-task-form[data-keyboard] .a-task-form__composer { position: static; }

  @media (pointer: coarse) {
    .a-task-form__roles .a-chip, .a-task-form__decision .a-chip { min-height: 44px; }
  }
  /* A task sheet omits the inner composer's frame in ordinary colours. Restore
     its boundary when system colours remove the surface contrast; the base
     rule deliberately leaves composer descendants to that shared frame. */
  @media (forced-colors: active) {
    .a-composer[data-framed="false"], .a-task-form .a-task-form__note textarea { outline: 1px solid ButtonBorder; outline-offset: -1px; }
    .a-composer:focus-within, .a-task-form:focus-within, .a-task-form .a-task-form__note textarea:focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
  }
}

@layer components {
  .a-welcome-gallery { position: relative; display: grid; gap: 12px; width: 100%; min-width: 0; }
  .a-welcome-gallery__header { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .a-welcome-gallery__header .a-tabs { min-width: 0; flex: 1; }
  .a-welcome-gallery__catalog { flex: none; white-space: nowrap; }
  .a-welcome-gallery__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .a-welcome-card { display: grid; align-content: start; min-width: 0; padding: 0; text-align: left; background: var(--a-surface); color: var(--a-foreground); border: var(--a-line-hair) solid var(--a-border); cursor: pointer; }
  .a-welcome-card:hover, .a-welcome-card[aria-pressed="true"] { border-color: var(--a-accent); background: var(--a-surface-muted); }
  .a-welcome-card:focus-visible { outline: var(--a-line-rule) solid var(--a-accent); outline-offset: 2px; }
  .a-welcome-card__band { display: grid; place-items: center; width: 100%; background: var(--a-surface-muted); border-bottom: var(--a-line-hair) solid var(--a-border); }
  .a-welcome-card__figure { display: block; width: 100%; height: 72px; color: var(--a-foreground); }
  .a-welcome-card__accent { color: var(--a-accent); }
  .a-welcome-card__accent text { fill: currentColor; stroke: none; font: var(--a-type-label); }
  .a-welcome-card__text { display: grid; gap: 4px; min-width: 0; padding: 8px 12px; }
  .a-welcome-card__title { font: var(--a-type-ui); font-weight: 600; overflow-wrap: anywhere; }
  .a-welcome-card__description { font: var(--a-type-label); color: var(--a-foreground-secondary); overflow-wrap: anywhere; }
  .a-welcome-gallery__short { display: none; }
  /* When the window runs short (welcome-fit.ts): a lower picture band first, then the grid shows
     whole rows only with a strip of the next row faded under them, and scrolls by whole rows. */
  .a-welcome-gallery__cards[data-fit="compact"] .a-welcome-card__figure { height: 48px; }
  .a-welcome-gallery__cards[data-scrolls] { overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; }
  .a-welcome-gallery__cards[data-scrolls] > .a-welcome-card { scroll-snap-align: start; }
  .a-welcome-gallery__cards[data-more="below"] { mask-image: linear-gradient(to bottom, var(--a-foreground) calc(100% - var(--a-welcome-fade)), transparent); }
  .a-welcome-gallery__cards[data-more="above"] { mask-image: linear-gradient(to top, var(--a-foreground) calc(100% - 24px), transparent); }
  .a-welcome-gallery__cards[data-more="both"] { mask-image: linear-gradient(to bottom, transparent, var(--a-foreground) 24px, var(--a-foreground) calc(100% - var(--a-welcome-fade)), transparent); }
  /* «Ещё N ↓» over the lower fade: the chat's glass jump capsule (.a-btn[data-jump]), centred
     on the grid's bottom edge, so a scroll is noticed with no scrollbar (owner, 2026-11-07) */
  .a-welcome-gallery__more { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; }
  .a-welcome-gallery__more[hidden] { display: none; }
  @media (max-width: 600px) { .a-welcome-gallery__header { flex-wrap: wrap; } .a-welcome-gallery__header .a-tabs { flex-basis: 100%; gap: 8px; overflow: visible; mask-image: none; } .a-welcome-gallery__header .a-tabs button { flex: 1 1 auto; font: var(--a-type-small); white-space: nowrap; } .a-welcome-gallery__long { display: none; } .a-welcome-gallery__short { display: inline; } .a-welcome-gallery__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-welcome-card__text { padding: 8px; } }
}

/* design/kit/utility.css */
/* Utilities every page needs: the skip link and visually hidden text (DESIGN.md §14). */
@layer arai.kit {
  .a-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .a-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 12px 16px; background: var(--a-foreground); color: var(--a-background); text-decoration: none; }
  .a-skip:focus { top: 10px; }
}