/* ==========================================================================
   «Гекс» — design system of the НШ ЦПМ cabinet.

   Cascade layers (order is declared in index.html):
     legacy  — app.css, historical component styles (lowest priority)
     tokens  — design tokens; also remaps the legacy variable names
     system  — global look & feel of shared components and app chrome

   Rules of thumb:
   - Colors, radii, shadows, type sizes come from tokens below. No raw hex in components.
   - Light/dark is driven by html[data-theme] (set before first paint in index.html).
   - Section hues: put the section class (mail, kids, …) on an icon chip; it sets --hue.
   ========================================================================== */

@property --fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --header-line {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --arc-start {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --arc-end {
  syntax: "<angle>";
  inherits: false;
  initial-value: 140deg;
}

@layer tokens {
  /* Declared on body as well: app.css redefines --bg, --line, … on body. */
  :root,
  body {
    color-scheme: light;

    /* —— Type —— */
    --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-2xs: 0.6875rem;  /* 11 */
    --fs-xs: 0.75rem;     /* 12 */
    --fs-sm: 0.8125rem;   /* 13 */
    --fs-md: 0.875rem;    /* 14 */
    --fs-base: 0.9375rem; /* 15 */
    --fs-lg: 1.0625rem;   /* 17 */
    --fs-xl: 1.25rem;     /* 20 */
    --fs-2xl: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
    --fw-regular: 500;
    --fw-medium: 600;
    --fw-bold: 700;
    --fw-heavy: 800;
    --lh-tight: 1.2;
    --lh-body: 1.45;

    /* —— Space & shape —— */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-full: 999px;
    --control-h: 40px;
    --field-h: 44px;
    --header-h: 56px;
    --tabbar-h: 60px;

    /* —— Motion —— */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;

    /* —— Palette: light —— */
    --bg: oklch(97.4% 0.006 266);
    --bg-glow: oklch(93% 0.035 272 / 0.55);
    --surface: oklch(100% 0 0);
    --surface-2: oklch(96.6% 0.007 266);
    --surface-3: oklch(93.6% 0.01 266);
    --line: oklch(91.5% 0.01 266);
    --line-strong: oklch(85% 0.014 266);
    --field-border: oklch(80% 0.018 266);
    --text: oklch(24% 0.035 268);
    --text-2: oklch(40% 0.03 266);
    --hint: oklch(51% 0.025 266);

    --primary: oklch(50% 0.2 272);
    --primary-hover: oklch(45% 0.2 272);
    --primary-soft: oklch(95.2% 0.03 272);
    --primary-soft-2: oklch(90.5% 0.055 272);
    --primary-text: oklch(46% 0.19 272);
    --on-primary: oklch(100% 0 0);

    --coral: oklch(80% 0.1 35);
    --coral-soft: oklch(95.5% 0.03 38);
    --coral-text: oklch(54% 0.16 32);

    --success: oklch(54% 0.13 155);
    --success-soft: oklch(95.5% 0.04 155);
    --success-text: oklch(46% 0.12 155);
    --warning: oklch(68% 0.15 70);
    --warning-soft: oklch(96% 0.05 85);
    --warning-text: oklch(50% 0.12 60);
    --danger: oklch(56% 0.2 25);
    --danger-soft: oklch(96% 0.025 25);
    --danger-text: oklch(50% 0.19 25);

    /* Section icon chips: oklch(L C var(--hue)) */
    --ico-bg-l: 94.5%;
    --ico-bg-c: 0.04;
    --ico-fg-l: 50%;
    --ico-fg-c: 0.16;
    /* Solid section colors (legacy --mail, --kids, …) */
    --sec-l: 55%;
    --sec-c: 0.16;

    --shadow-1: 0 1px 2px oklch(25% 0.03 268 / 0.05), 0 1px 1px oklch(25% 0.03 268 / 0.03);
    --shadow-2: 0 1px 2px oklch(25% 0.03 268 / 0.05), 0 6px 18px -6px oklch(25% 0.03 268 / 0.14);
    --shadow-3: 0 2px 6px oklch(25% 0.03 268 / 0.06), 0 18px 48px -12px oklch(25% 0.03 268 / 0.28);
    --overlay: oklch(20% 0.03 268 / 0.42);
    --focus-ring: oklch(55% 0.2 272);
    --hover-filter: brightness(0.95);
  }

  :root[data-theme="dark"],
  :root[data-theme="dark"] body {
    color-scheme: dark;

    --bg: oklch(17.5% 0.02 268);
    --bg-glow: oklch(30% 0.08 274 / 0.35);
    --surface: oklch(21% 0.022 268);
    --surface-2: oklch(24% 0.024 268);
    --surface-3: oklch(28% 0.026 268);
    --line: oklch(28.5% 0.024 268);
    --line-strong: oklch(35% 0.026 268);
    --field-border: oklch(42% 0.03 268);
    --text: oklch(95% 0.008 266);
    --text-2: oklch(84% 0.015 266);
    --hint: oklch(71% 0.02 266);

    --primary: oklch(57% 0.19 274);
    --primary-hover: oklch(62% 0.18 274);
    --primary-soft: oklch(29% 0.065 274);
    --primary-soft-2: oklch(35% 0.09 274);
    --primary-text: oklch(80% 0.11 274);
    --on-primary: oklch(100% 0 0);

    --coral: oklch(78% 0.11 35);
    --coral-soft: oklch(28% 0.045 35);
    --coral-text: oklch(80% 0.11 35);

    --success: oklch(58% 0.13 155);
    --success-soft: oklch(29% 0.05 155);
    --success-text: oklch(80% 0.13 155);
    --warning: oklch(70% 0.14 70);
    --warning-soft: oklch(30% 0.05 70);
    --warning-text: oklch(84% 0.12 80);
    --danger: oklch(60% 0.19 25);
    --danger-soft: oklch(30% 0.06 25);
    --danger-text: oklch(76% 0.14 22);

    --ico-bg-l: 30%;
    --ico-bg-c: 0.055;
    --ico-fg-l: 82%;
    --ico-fg-c: 0.11;
    --sec-l: 64%;
    --sec-c: 0.15;

    --shadow-1: 0 1px 2px oklch(5% 0.02 268 / 0.4);
    --shadow-2: 0 1px 2px oklch(5% 0.02 268 / 0.4), 0 8px 22px -8px oklch(5% 0.02 268 / 0.6);
    --shadow-3: 0 2px 8px oklch(5% 0.02 268 / 0.45), 0 22px 56px -12px oklch(5% 0.02 268 / 0.75);
    --overlay: oklch(8% 0.02 268 / 0.6);
    --focus-ring: oklch(78% 0.13 274);
    --hover-filter: brightness(1.12);
  }

  /* Legacy variable names used across app.css. */
  :root,
  body {
    --brand: var(--primary);
    --brand-deep: var(--primary-text);
    --brand-soft: var(--primary-soft);
    --ink: var(--text);
    --muted: var(--hint);
    --warn: var(--warning-text);
    --ok: var(--success);
    --link: var(--primary-text);
    --button: var(--primary);
    --button-text: var(--on-primary);
    --sec: var(--surface);
    --control-bg: var(--surface);
    --control-border: var(--field-border);
    --radius: var(--r-lg);
    --shadow: var(--shadow-2);
    --caret: var(--primary);

    --mail: oklch(var(--sec-l) var(--sec-c) 255);
    --kids: oklch(var(--sec-l) var(--sec-c) 190);
    --hot: var(--danger);
    --today: oklch(var(--sec-l) var(--sec-c) 290);
    --sched: oklch(var(--sec-l) var(--sec-c) 55);
    --cal: oklch(var(--sec-l) var(--sec-c) 150);
    --assess: oklch(var(--sec-l) var(--sec-c) 350);
    --tasks: oklch(var(--sec-l) var(--sec-c) 175);
    --tools: oklch(var(--sec-l) 0.04 266);
    --settings: oklch(var(--sec-l) 0.03 266);
  }
}

@layer system {
  /* —— Base —— */
  html {
    background: var(--bg);
    color: var(--text);
    accent-color: var(--primary);
    caret-color: var(--primary);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  html,
  body,
  body.web-browser,
  :root[data-theme="light"] body.web-browser {
    background:
      radial-gradient(90rem 28rem at 50% -14rem, var(--bg-glow), transparent 70%) no-repeat,
      var(--bg);
    color: var(--text);
  }
  body {
    font-family: var(--font-sans);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
  }
  :root {
    scrollbar-color: var(--line-strong) transparent;
  }
  ::selection {
    background: color-mix(in oklab, var(--primary) 28%, transparent);
  }
  ::placeholder {
    color: var(--hint);
    opacity: 0.85;
  }
  :where(h1, h2, h3, h4) {
    text-wrap: balance;
  }
  :where(button, [role="button"], summary, a.btn, a.btn-primary) {
    cursor: pointer;
    touch-action: manipulation;
  }
  :where(a:any-link, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }
  :where(main):focus {
    outline: none;
  }
  .muted {
    color: var(--hint);
  }

  .skip-link {
    position: fixed;
    top: calc(var(--sp-2) + var(--pad-top, 0px));
    left: var(--sp-2);
    z-index: 200;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-md);
    background: var(--primary);
    color: var(--on-primary);
    font-weight: var(--fw-bold);
    text-decoration: none;
    translate: 0 -200%;
  }
  .skip-link:focus-visible {
    translate: none;
  }

  /* —— App header —— */
  .top {
    align-items: center;
    gap: var(--sp-1);
    min-height: calc(var(--header-h) + var(--pad-top));
    padding: calc(var(--sp-2) + var(--pad-top)) var(--sp-4) var(--sp-2);
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(18px);
    backdrop-filter: saturate(1.5) blur(18px);
    border-bottom: 1px solid var(--line);
  }
  @supports (animation-timeline: scroll()) {
    /* The hairline appears only once content scrolls under the header. */
    .top {
      border-bottom-color: var(--header-line);
      animation: header-stuck linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 24px;
    }
    @keyframes header-stuck {
      to { --header-line: var(--line); }
    }
  }
  .top-text {
    padding-inline: var(--sp-1);
  }
  .top-title {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: var(--fw-heavy);
    letter-spacing: -0.02em;
    line-height: var(--lh-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .top-sub {
    margin-top: 1px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .top-sub:empty {
    display: none;
  }
  .top-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-inline-start: auto;
    flex: 0 0 auto;
  }
  .icon-btn,
  .nav-drawer-close {
    display: grid;
    place-items: center;
    width: var(--control-h);
    height: var(--control-h);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-2);
    font-size: var(--fs-lg);
    transition: background-color var(--dur-1) ease, color var(--dur-1) ease, scale var(--dur-1) ease;
  }
  .icon-btn svg {
    width: 20px;
    height: 20px;
  }
  .icon-btn:active,
  .nav-drawer-close:active {
    scale: 0.94;
  }
  .top-help-btn.btn {
    min-height: 36px;
    height: 36px;
    padding: 0 var(--sp-3);
    font-size: var(--fs-sm);
    border-radius: var(--r-md);
  }
  @media (max-width: 420px) {
    .top {
      padding-inline: var(--sp-2);
    }
    .top-help-btn.btn {
      padding: 0 var(--sp-2);
    }
  }

  main {
    padding-top: var(--sp-4);
  }

  /* —— Navigation drawer / sidebar —— */
  body {
    --nav-drawer-w: 272px;
  }
  .nav-drawer {
    background: var(--surface);
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    transition: transform var(--dur-3) var(--ease-out);
  }
  .nav-drawer-head {
    align-items: center;
    padding: var(--sp-4) var(--sp-3) var(--sp-3) var(--sp-4);
    border-bottom: 0;
  }
  .nav-drawer-logo {
    width: 38px;
    height: 38px;
  }
  .nav-drawer-kicker {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    color: var(--hint);
  }
  .nav-drawer-title {
    margin-top: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-heavy);
  }
  .nav-drawer-close {
    font-size: 1.5rem;
    padding-bottom: 3px;
  }
  .nav-drawer-list {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
    gap: 2px;
    padding: var(--sp-1) var(--sp-3) var(--sp-5);
  }
  .nav-item {
    gap: var(--sp-3);
    min-height: 42px;
    padding: 5px var(--sp-2);
    border-radius: var(--r-md);
    color: var(--text-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
  }
  .nav-item.on {
    background: var(--primary-soft);
    color: var(--primary-text);
    font-weight: var(--fw-bold);
  }
  .nav-item-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  .nav-item-ico svg {
    width: 16px;
    height: 16px;
  }
  .nav-drawer-backdrop {
    background: var(--overlay);
  }
  @media (min-width: 960px) {
    .nav-drawer {
      box-shadow: none;
    }
    body.nav-drawer-open.chat-drawer-open .app-shell {
      width: calc(100% - var(--nav-drawer-w) - var(--chat-drawer-w, 380px));
      margin-left: var(--nav-drawer-w);
    }
  }

  /* —— Section icon chips —— */
  :where(.tile-ico, .nav-item-ico, .ask-ico) {
    --hue: 272;
    background: oklch(var(--ico-bg-l) var(--ico-bg-c) var(--hue));
    color: oklch(var(--ico-fg-l) var(--ico-fg-c) var(--hue));
    box-shadow: none;
  }
  :is(.tile-ico, .nav-item-ico):is(.mail) { --hue: 255; }
  :is(.tile-ico, .nav-item-ico):is(.kids) { --hue: 190; }
  :is(.tile-ico, .nav-item-ico):is(.assessment) { --hue: 350; }
  :is(.tile-ico, .nav-item-ico):is(.upbringing) { --hue: 305; }
  :is(.tile-ico, .nav-item-ico):is(.diary) { --hue: 235; }
  :is(.tile-ico, .nav-item-ico):is(.programs) { --hue: 175; }
  :is(.tile-ico, .nav-item-ico):is(.parents) { --hue: 135; }
  :is(.tile-ico, .nav-item-ico):is(.crm) { --hue: 280; }
  :is(.tile-ico, .nav-item-ico):is(.incidents) { --hue: 50; }
  :is(.tile-ico, .nav-item-ico):is(.analytics) { --hue: 315; }
  :is(.tile-ico, .nav-item-ico):is(.docs) { --hue: 210; }
  :is(.tile-ico, .nav-item-ico):is(.hot) { --hue: 25; }
  :is(.tile-ico, .nav-item-ico):is(.tasks) { --hue: 165; }
  :is(.tile-ico, .nav-item-ico):is(.today) { --hue: 290; }
  :is(.tile-ico, .nav-item-ico):is(.sched) { --hue: 65; }
  :is(.tile-ico, .nav-item-ico):is(.cal) { --hue: 150; }
  :is(.tile-ico, .nav-item-ico):is(.menu) { --hue: 40; }
  :is(.tile-ico, .nav-item-ico):is(.rlhf) { --hue: 100; }
  :is(.tile-ico, .nav-item-ico):is(.chat, .home) { --hue: 272; }
  :is(.tile-ico, .nav-item-ico):is(.settings, .info) {
    --hue: 266;
    --ico-bg-c: 0.012;
    --ico-fg-c: 0.03;
  }

  /* —— Mobile tab bar —— */
  .tabbar {
    display: none;
  }
  @media (max-width: 959px) {
    .tabbar:not([hidden]) {
      position: fixed;
      inset-inline: 0;
      bottom: 0;
      z-index: 40;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: var(--sp-1);
      padding: 6px max(var(--sp-2), var(--pad-left)) calc(6px + var(--pad-bottom)) max(var(--sp-2), var(--pad-right));
      background: color-mix(in oklab, var(--surface) 86%, transparent);
      -webkit-backdrop-filter: saturate(1.5) blur(18px);
      backdrop-filter: saturate(1.5) blur(18px);
      border-top: 1px solid var(--line);
    }
    body:is(.login-screen, .chat-open, .reply-open) .tabbar,
    body[data-screen="chat"] .tabbar {
      display: none;
    }
    body:has(> .tabbar:not([hidden])):not(.chat-open, .reply-open, .login-screen) main {
      padding-bottom: calc(var(--tabbar-h) + var(--pad-bottom) + var(--sp-6));
    }
    .nav-fab,
    body:has(> .tabbar:not([hidden])) .nav-toggle {
      display: none;
    }
  }
  .tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 48px;
    padding: 2px 0;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    color: var(--hint);
    font: inherit;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    line-height: 1.15;
  }
  .tabbar-ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 28px;
    border-radius: var(--r-full);
    transition: background-color var(--dur-2) var(--ease-out);
  }
  .tabbar-ico svg {
    width: 20px;
    height: 20px;
  }
  .tabbar-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tabbar-item.on {
    color: var(--primary-text);
  }
  .tabbar-item.on .tabbar-ico {
    background: var(--primary-soft-2);
  }

  /* —— Home —— */
  .hero {
    color: var(--text);
    background:
      radial-gradient(18rem 12rem at 100% 0%, color-mix(in oklab, var(--coral) 40%, transparent), transparent 70%),
      linear-gradient(120deg, var(--primary-soft), var(--coral-soft));
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: var(--sp-5);
    box-shadow: var(--shadow-1);
    isolation: isolate;
  }
  .hero:has(.hero-logo) {
    padding-inline-end: 104px;
  }
  @media (min-width: 720px) {
    .hero:has(.hero-logo) {
      padding-inline-end: 132px;
    }
  }
  .hero::after {
    display: none;
  }
  .hero-logo {
    filter: drop-shadow(0 10px 18px oklch(45% 0.12 30 / 0.28));
    rotate: -6deg;
  }
  .hero-kicker {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
    opacity: 1;
  }
  .hero-kicker::first-letter {
    text-transform: uppercase;
  }
  @media (min-width: 1101px) {
    .home-desk-top {
      display: flex;
      align-items: stretch;
      gap: var(--sp-4);
    }
    .home-desk-top > .hero {
      flex: 1 1 0;
      min-width: 0;
      margin-bottom: 0;
    }
    .home-desk-top > .ask-bar-desk {
      flex: 0 0 clamp(240px, 28vw, 300px);
      align-self: stretch;
      min-height: 0;
      height: auto;
    }
  }
  .home-desk-top .hero {
    display: block;
    height: auto;
    min-height: 0;
    padding-block: var(--sp-5);
  }
  .home-desk-top .hero-title {
    font-size: clamp(var(--fs-xl), 1rem + 1.1vw, var(--fs-2xl));
  }
  .hero-title {
    text-wrap: balance;
    overflow-wrap: anywhere;
    margin: var(--sp-1) 0 2px;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-heavy);
    letter-spacing: -0.025em;
    line-height: var(--lh-tight);
  }
  .hero-sub {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--text-2);
    opacity: 1;
  }
  .stat-pill {
    background: color-mix(in oklab, var(--surface) 70%, transparent);
    border-color: var(--line);
  }

  .ask-bar {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--hint);
    border-radius: var(--r-lg);
    font-weight: var(--fw-medium);
    box-shadow: var(--shadow-1);
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-2) ease;
  }
  .ask-ico,
  body.web-browser .ask-ico,
  :root[data-theme="light"] body.web-browser .ask-ico {
    border-radius: var(--r-md);
  }
  .ask-bar-desk {
    border-radius: var(--r-xl);
    min-height: 64px;
    height: auto;
    padding: var(--sp-3) var(--sp-4);
  }
  .ask-bar-desk .ask-text {
    overflow-wrap: anywhere;
  }

  .section-head {
    align-items: center;
  }
  .section-head h2 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-heavy);
    letter-spacing: -0.015em;
  }
  .section-head .linkish,
  .linkish {
    color: var(--primary-text);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
  }
  .section > h2 {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-heavy);
    letter-spacing: 0.07em;
    color: var(--hint);
  }

  .menu-grid {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .menu-grid-desk {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tile,
  .menu-grid-desk .tile {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: 0;
    min-height: 92px;
    max-width: 100%;
    padding: var(--sp-3) var(--sp-1) var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    text-align: center;
    overflow: hidden;
    transition:
      border-color var(--dur-1) ease,
      box-shadow var(--dur-2) ease,
      translate var(--dur-2) var(--ease-out),
      scale var(--dur-1) ease;
  }
  .tile:active,
  .menu-grid-desk .tile:active {
    transform: none;
    scale: 0.97;
  }
  .tile-ico,
  .menu-grid-desk .tile-ico {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
  }
  .tile-ico svg,
  .menu-grid-desk .tile-ico svg {
    width: 20px;
    height: 20px;
  }
  .tile-label,
  .menu-grid-desk .tile-label {
    min-width: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  @media (min-width: 560px) {
    .menu-grid {
      grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    }
    .tile,
    .menu-grid-desk .tile {
      flex-direction: row;
      justify-content: flex-start;
      gap: var(--sp-3);
      min-height: 56px;
      padding: var(--sp-2) var(--sp-3);
      text-align: start;
    }
    .tile-ico,
    .menu-grid-desk .tile-ico {
      width: 36px;
      height: 36px;
    }
    .tile-label,
    .menu-grid-desk .tile-label {
      font-size: var(--fs-md);
    }
  }
  .tile-badge {
    background: var(--danger);
    font-size: var(--fs-2xs);
  }

  .home-panel,
  body.web-browser .home-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-1);
  }
  .home-menu-panel {
    container-type: inline-size;
    container-name: home-menu;
  }
  .home-menu-panel .tile {
    background: var(--surface-2);
    border-color: transparent;
    box-shadow: none;
  }
  @container home-menu (min-width: 520px) {
    .menu-grid-desk {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @container home-menu (min-width: 680px) {
    .menu-grid-desk {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @container home-menu (min-width: 900px) {
    .menu-grid-desk {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (max-width: 719px) {
    .home-menu-panel,
    body.web-browser .home-menu-panel {
      background: none;
      border: 0;
      padding: 0;
      box-shadow: none;
    }
    .home-menu-panel .tile {
      background: var(--surface);
      border-color: var(--line);
      box-shadow: var(--shadow-1);
    }
    .home-desk-body {
      gap: var(--sp-6);
    }
  }
  .home-kpi {
    padding: var(--sp-1) var(--sp-3);
    border: 0;
    background: var(--surface-3);
    color: var(--text-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
  }
  .home-today-lab {
    font-size: var(--fs-2xs);
    letter-spacing: 0.07em;
    color: var(--hint);
  }
  .home-today-panel .card,
  .home-today-panel .hot-card {
    box-shadow: none;
  }

  /* —— Surfaces ——
     .card / .btn / .chip / fields take their skin from tokens via app.css;
     here only what app.css never set (elevation, motion, states), so that
     contextual variants (.kids-card, .att-btn, …) keep working. */
  :is(.card:not(.home-panel), .feed-item, .folder-card, .hot-card) {
    box-shadow: var(--shadow-1);
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-2) ease;
  }
  .error {
    color: var(--danger-text);
    background: var(--danger-soft);
  }

  /* —— Buttons —— */
  :is(.btn, .btn-primary) {
    transition: filter var(--dur-1) ease, scale var(--dur-1) ease, background-color var(--dur-1) ease;
  }
  :is(.btn, .btn-primary):active:not(:disabled) {
    scale: 0.98;
  }
  :is(.btn, .btn-primary):disabled {
    cursor: not-allowed;
  }
  body.web-browser :is(.chip.on, .btn-primary, .access-lv.on) {
    color: var(--on-primary);
  }

  /* —— Chips & pills —— */
  .chip {
    border-color: var(--line-strong);
    transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
  }
  .chip.on {
    border-color: var(--primary);
  }
  .chip.chip-enrolled:not(.on) {
    border-color: color-mix(in oklab, var(--success) 45%, var(--line));
    background: var(--success-soft);
    color: var(--success-text);
  }
  .chip.chip-enrolled.on {
    border-color: var(--success);
  }
  .chip.assess-attend-chip:not(.on) {
    border-color: color-mix(in oklab, var(--warning) 50%, var(--line));
    background: var(--warning-soft);
    color: var(--warning-text);
  }
  .chip.assess-attend-chip.on {
    background: var(--warning);
    border-color: var(--warning);
    color: oklch(22% 0.05 60);
  }
  @media (max-width: 719px) {
    .chips:not(.mail-rcpt-chips, .settings-bind-chips, .upbr-export-classes, .upbr-export-ranges) {
      flex-wrap: nowrap;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      padding-bottom: 2px;
    }
    .chips:not(.mail-rcpt-chips, .settings-bind-chips, .upbr-export-classes, .upbr-export-ranges)::-webkit-scrollbar {
      display: none;
    }
    .chips > * {
      flex: 0 0 auto;
    }
    @supports (animation-timeline: scroll()) {
      /* Edge fades hint that the row scrolls; inactive when it doesn't overflow. */
      .chips:not(.mail-rcpt-chips, .settings-bind-chips, .upbr-export-classes, .upbr-export-ranges) {
        mask-image: linear-gradient(
          to right,
          transparent,
          #000 var(--fade-start),
          #000 calc(100% - var(--fade-end)),
          transparent
        );
        animation: chips-fade linear both;
        animation-timeline: scroll(self inline);
      }
      @keyframes chips-fade {
        0% { --fade-start: 0px; --fade-end: 28px; }
        10% { --fade-start: 28px; }
        90% { --fade-end: 28px; }
        100% { --fade-start: 28px; --fade-end: 0px; }
      }
    }
  }

  .class-pill:not(.muted-pill) {
    background: var(--primary-soft);
    color: var(--primary-text);
    border-color: transparent;
  }
  .status-pill {
    border-color: transparent;
    background: var(--surface-3);
    color: var(--text-2);
    font-weight: var(--fw-bold);
  }
  .status-pill.status-enrolled {
    background: var(--success-soft);
    border-color: transparent;
    color: var(--success-text);
  }
  .status-pill.status-pending {
    background: var(--warning-soft);
    border-color: transparent;
    color: var(--warning-text);
  }
  .status-pill.status-out {
    background: var(--danger-soft);
    border-color: transparent;
    color: var(--danger-text);
  }
  body.web-browser .feed-tag,
  :root[data-theme="light"] body.web-browser .feed-tag {
    color: var(--primary-text);
  }
  .feed-tag.hot,
  body.web-browser .feed-tag.hot {
    color: var(--danger-text);
  }
  .feed-tag.mail,
  body.web-browser .feed-tag.mail {
    color: oklch(var(--ico-fg-l) var(--ico-fg-c) 255);
  }
  .feed-tag.cal,
  body.web-browser .feed-tag.cal {
    color: var(--success-text);
  }
  .feed-tag.chat,
  body.web-browser .feed-tag.chat {
    color: var(--text-2);
  }
  .feed-tag.db,
  body.web-browser .feed-tag.db {
    color: oklch(var(--ico-fg-l) var(--ico-fg-c) 290);
  }
  .prio-high {
    color: var(--danger-text);
  }
  .prio-medium {
    color: var(--warning-text);
  }

  /* —— Fields —— */
  :where(.search, .child-field-control, .assess-form-input) {
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
  }
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), textarea):focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
  }
  .ns-select-menu {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-3);
  }
  .ns-select-opt {
    border-radius: var(--r-sm);
    font-weight: var(--fw-medium);
  }
  .ns-select-opt.is-active {
    background: var(--surface-3);
  }
  .ns-select-opt.is-selected {
    background: var(--primary-soft);
    color: var(--primary-text);
    font-weight: var(--fw-bold);
  }

  /* —— Overlays —— */
  .text-prompt-overlay,
  .chat-drawer-backdrop {
    background: var(--overlay);
  }
  :where(.text-prompt-card, .assess-picker, .assess-help) {
    border-radius: var(--r-xl);
  }

  /* —— Login —— */
  .login-wrap {
    padding-top: var(--sp-4);
  }
  .login-card {
    padding: var(--sp-5);
  }
  .login-tg-btn {
    width: 100%;
    min-height: var(--field-h);
  }
  .login-msg {
    background: var(--danger-soft);
    color: var(--danger-text);
  }

  /* —— Hover (pointer devices only) —— */
  @media (hover: hover) and (pointer: fine) {
    .icon-btn:hover,
    .nav-drawer-close:hover {
      background: var(--surface-3);
      color: var(--text);
    }
    .nav-item:hover:not(.on) {
      background: var(--surface-2);
      color: var(--text);
    }
    :is(.btn, .btn-primary):hover:not(:disabled) {
      filter: var(--hover-filter);
    }
    .chip:not(.on):hover {
      border-color: var(--field-border);
    }
    .tile:hover,
    .menu-grid-desk .tile:hover {
      transform: none;
      translate: 0 -2px;
      background: var(--surface);
      border-color: color-mix(in oklab, var(--primary) 30%, var(--line));
      box-shadow: var(--shadow-2);
    }
    :is(.feed-item, .folder-card, .hot-card, .card.clickable, .kids-card):hover {
      border-color: var(--line-strong);
      box-shadow: var(--shadow-2);
    }
    .ask-bar:hover {
      border-color: color-mix(in oklab, var(--primary) 35%, var(--line));
      box-shadow: var(--shadow-2);
    }
    :where(.search, .child-field-control, .ns-select-btn):hover:not(:focus-visible, :disabled) {
      border-color: var(--hint);
    }
  }

  /* —— Motion —— */
  @media (prefers-reduced-motion: no-preference) {
    body.view-entering #view > * {
      animation: view-enter var(--dur-3) var(--ease-out) both;
    }
    body.view-entering #view > :nth-child(2) { animation-delay: 30ms; }
    body.view-entering #view > :nth-child(3) { animation-delay: 60ms; }
    body.view-entering #view > :nth-child(n + 4) { animation-delay: 90ms; }
  }
  @keyframes view-enter {
    from {
      opacity: 0;
      translate: 0 6px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-drawer,
    .nav-drawer-backdrop {
      transition-duration: 1ms;
    }
    :is(.content-busy-pulse, .home-today-pulse) {
      animation-duration: 3s;
    }
    .tile:hover,
    .menu-grid-desk .tile:hover {
      translate: none;
    }
  }

  /* —— People: avatars, cards, profile —— */
  .person-avatar {
    --hue: 272;
    --size: 44px;
    flex: none;
    inline-size: var(--size);
    block-size: var(--size);
    border-radius: var(--r-full);
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    background: oklch(var(--ico-bg-l) var(--ico-bg-c) var(--hue));
    color: oklch(var(--ico-fg-l) var(--ico-fg-c) var(--hue));
    font-size: calc(var(--size) * 0.38);
    font-weight: 650;
    letter-spacing: 0.02em;
    line-height: 1;
    user-select: none;
  }
  .person-avatar.sm { --size: 32px; }
  .person-avatar.md { --size: 48px; }
  .person-avatar.lg { --size: 64px; }
  .person-avatar.xl { --size: 96px; }
  .person-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .person-hero {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-block-end: var(--sp-4);
  }
  .person-hero-text {
    flex: 1 1 200px;
    min-inline-size: 0;
    display: grid;
    gap: var(--sp-1);
  }
  .person-hero-name {
    font-size: var(--fs-lg);
    font-weight: 650;
    color: var(--text);
    overflow-wrap: anywhere;
  }
  .person-hero-pos {
    font-size: var(--fs-sm);
    color: var(--text-2);
  }
  .person-hero-pos:empty { display: none; }
  .person-hero-edit { min-block-size: 40px; }

  .users-search {
    inline-size: 100%;
    min-block-size: 40px;
    margin-block-end: var(--sp-3);
  }
  .person-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--sp-3);
  }
  .person-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
  }
  .person-card[hidden] { display: none; }
  .person-card-main {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    padding-inline-end: calc(var(--sp-3) + 40px);
    background: none;
    border: 0;
    border-radius: inherit;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  .person-card-text {
    min-inline-size: 0;
    display: grid;
    gap: 2px;
  }
  .person-card-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
  }
  .person-card-pos {
    font-size: var(--fs-sm);
    color: var(--text-2);
  }
  .person-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    margin-block-start: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--hint);
  }
  .person-card-contacts {
    font-size: var(--fs-xs);
    color: var(--hint);
    overflow-wrap: anywhere;
  }
  .person-card-del {
    position: absolute;
    inset-block-start: var(--sp-2);
    inset-inline-end: var(--sp-2);
    min-inline-size: 40px;
    min-block-size: 40px;
  }
  .person-role {
    padding: 2px var(--sp-2);
    border-radius: var(--r-full);
    background: var(--primary-soft);
    color: var(--primary-text);
    font-weight: 600;
  }
  .person-status {
    padding: 2px var(--sp-2);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
  }
  .person-status.info { background: var(--primary-soft); color: var(--primary-text); }
  .person-status.warning { background: var(--warning-soft); color: var(--warning-text); }
  .person-status.danger { background: var(--danger-soft); color: var(--danger-text); }

  .profile-tabs {
    display: flex;
    gap: var(--sp-1);
    padding: var(--sp-1);
    margin-block-end: var(--sp-4);
    background: var(--surface-2);
    border-radius: var(--r-md);
  }
  .profile-tab {
    flex: 1;
    min-block-size: 40px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--text-2);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
  }
  .profile-tab.on {
    background: var(--surface);
    color: var(--primary-text);
    box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-strong);
  }

  .profile-read-group { margin-block-end: var(--sp-3); }
  .profile-read dd { overflow-wrap: anywhere; white-space: pre-line; }
  .profile-tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
  }

  .profile-form {
    display: grid;
    gap: var(--sp-3);
  }
  .profile-form .person-hero { margin-block-end: 0; }
  .profile-group {
    container-type: inline-size;
    min-inline-size: 0;
    margin: 0;
  }
  .profile-group > legend {
    float: left;
    inline-size: 100%;
    padding: 0;
    margin-block-end: var(--sp-3);
  }
  .profile-grid {
    clear: both;
    display: grid;
    gap: var(--sp-3);
  }
  @container (min-width: 520px) {
    .profile-grid { grid-template-columns: 1fr 1fr; }
    .profile-field.wide { grid-column: 1 / -1; }
  }
  .profile-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-inline-size: 0;
  }
  .profile-field > :is(.child-field-control:not(.ns-native), .ns-select-btn) { margin-block-start: auto; }
  .profile-field > :is(.child-field-control, .ns-select-btn) { flex: none; }
  .profile-field > :is(input.child-field-control, .ns-select-btn) {
    block-size: 48px;
    box-sizing: border-box;
  }
  .profile-field .child-field-control:disabled {
    background: var(--surface-2);
    color: var(--text-2);
  }
  .profile-hint {
    font-size: var(--fs-xs);
    color: var(--hint);
  }
  .profile-lock {
    font-weight: 400;
    color: var(--hint);
  }
  .profile-error {
    display: none;
    font-size: var(--fs-xs);
    color: var(--danger-text);
  }
  .profile-field .child-field-control:user-invalid {
    border-color: var(--danger);
  }
  .profile-field:has(.child-field-control:user-invalid) .profile-error { display: block; }
  .profile-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-block-start: var(--sp-2);
  }
  .profile-avatar-actions .btn { min-block-size: 40px; }
  .profile-avatar-actions [hidden] { display: none; }
  .profile-avatar-actions .btn.danger { color: var(--danger-text); }
  .profile-actions {
    position: sticky;
    inset-block-end: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-block: var(--sp-3);
    background: linear-gradient(to top, var(--bg, var(--surface-2)) 70%, transparent);
  }
  .profile-actions .btn-primary { flex: 1 1 200px; min-block-size: 44px; }
  .profile-actions .btn { min-block-size: 44px; }
  .settings-flash.err { color: var(--danger-text); }

  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (hover: hover) and (pointer: fine) {
    .person-card:hover {
      border-color: var(--line-strong);
      box-shadow: var(--shadow-2);
    }
    .profile-tab:not(.on):hover { color: var(--text); }
  }
  @media (prefers-reduced-motion: reduce) {
    :is(.person-card, .profile-tab) { transition: none; }
  }

  /* —— Child card: assessment KPIs —— */
  .child-assess-kpi {
    container-type: inline-size;
  }
  .child-assess-kpis:has(.is-word) {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
  }
  .child-assess-kpi-val {
    overflow-wrap: anywhere;
  }
  .child-assess-kpi-val.is-word {
    font-size: clamp(var(--fs-sm), 14cqi, var(--fs-lg));
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    line-height: 1.25;
  }

  /* —— Screen transitions (View Transitions API; JS sets :root[data-nav-dir]) —— */
  #view {
    view-transition-name: view;
  }
  .tabbar:not([hidden]) {
    view-transition-name: tabbar;
  }
  @media (min-width: 960px) {
    .nav-drawer {
      view-transition-name: sidebar;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(*) {
      animation-duration: var(--dur-3);
      animation-timing-function: var(--ease-out);
    }
    ::view-transition-old(view) {
      animation: vt-fade-out 120ms ease-in both;
    }
    ::view-transition-new(view) {
      animation: vt-fade-up var(--dur-3) var(--ease-out) both;
    }
    :root[data-nav-dir="forward"]::view-transition-old(view) {
      animation-name: vt-out-start;
    }
    :root[data-nav-dir="forward"]::view-transition-new(view) {
      animation-name: vt-in-end;
    }
    :root[data-nav-dir="back"]::view-transition-old(view) {
      animation-name: vt-out-end;
    }
    :root[data-nav-dir="back"]::view-transition-new(view) {
      animation-name: vt-in-start;
    }
  }
  @keyframes vt-fade-out {
    to { opacity: 0; }
  }
  @keyframes vt-fade-up {
    from { opacity: 0; translate: 0 6px; }
  }
  @keyframes vt-in-end {
    from { opacity: 0; translate: 28px 0; }
  }
  @keyframes vt-in-start {
    from { opacity: 0; translate: -28px 0; }
  }
  @keyframes vt-out-start {
    to { opacity: 0; translate: -14px 0; }
  }
  @keyframes vt-out-end {
    to { opacity: 0; translate: 14px 0; }
  }

  /* —— Mobile drawer: swipe-to-close via scroll snap ([sheet][spacer], scrollLeft 0 = open) —— */
  @media (max-width: 959px) {
    .nav-drawer-root {
      inset: 0;
      width: auto;
      display: grid;
      grid-template-columns: min(var(--nav-drawer-w), 86vw) 100%;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      scroll-timeline: --nav-drawer x;
      pointer-events: auto;
    }
    .nav-drawer-root::-webkit-scrollbar {
      display: none;
    }
    .nav-drawer-root::after {
      content: "";
      scroll-snap-align: end;
    }
    .nav-drawer,
    .nav-drawer-root.open .nav-drawer {
      position: relative;
      inset: auto;
      width: auto;
      min-height: 0;
      transform: none;
      transition: none;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      overscroll-behavior: contain;
      outline: none;
    }
    .nav-drawer-backdrop,
    .nav-drawer-root.open .nav-drawer-backdrop {
      position: fixed;
      inset: 0;
      z-index: -1;
      opacity: 0;
      transition: none;
      pointer-events: none;
    }
    @supports (animation-timeline: scroll()) {
      .nav-drawer-backdrop {
        animation: drawer-backdrop linear both;
        animation-timeline: --nav-drawer;
      }
    }
  }
  @keyframes drawer-backdrop {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  /* —— Modal overlays: top-layer <dialog> skin + enter/exit motion —— */
  dialog:is(.text-prompt-overlay, .att-preview-overlay) {
    box-sizing: border-box;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    color: inherit;
    overflow: auto;
    overscroll-behavior: contain;
  }
  dialog:is(.text-prompt-overlay, .att-preview-overlay):not([open]) {
    display: none;
  }
  dialog:is(.text-prompt-overlay, .att-preview-overlay)::backdrop {
    background: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    :is(.text-prompt-overlay, .att-preview-overlay, .assess-picker, .assess-help) {
      transition: opacity var(--dur-2) var(--ease-out);
    }
    :is(.text-prompt-card, .att-preview-panel, .assess-picker-card, .assess-help-card) {
      transition: translate var(--dur-3) var(--ease-out), scale var(--dur-3) var(--ease-out);
    }
    :is(.text-prompt-overlay, .att-preview-overlay)[data-closing] {
      opacity: 0;
      transition-duration: 160ms;
      transition-timing-function: ease-in;
    }
    [data-closing] > :is(.text-prompt-card, .att-preview-panel) {
      translate: 0 12px;
      transition-duration: 160ms;
      transition-timing-function: ease-in;
    }
  }
  @starting-style {
    :is(.text-prompt-overlay, .att-preview-overlay, .assess-picker, .assess-help) {
      opacity: 0;
    }
    :is(.text-prompt-card, .assess-picker-card, .assess-help-card) {
      translate: 0 24px;
    }
    .att-preview-panel {
      scale: 0.96;
    }
  }
  @media (min-width: 720px) {
    @starting-style {
      :is(.text-prompt-card, .assess-picker-card, .assess-help-card) {
        translate: 0 8px;
        scale: 0.98;
      }
    }
  }

  /* —— Toasts —— */
  .toast {
    position: fixed;
    inset: auto auto calc(var(--pad-bottom, 0px) + var(--sp-5)) 50%;
    translate: -50% 0;
    z-index: 120;
    margin: 0;
    box-sizing: border-box;
    width: max-content;
    max-width: min(30rem, calc(100vw - 2 * var(--sp-4)));
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-3);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.35;
    overflow: visible;
    transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
  }
  .toast[popover]:not(:popover-open) {
    display: none;
  }
  .toast[data-closing] {
    opacity: 0;
    translate: -50% 8px;
    transition-timing-function: ease-in;
  }
  @starting-style {
    .toast {
      opacity: 0;
      translate: -50% 12px;
    }
  }
  @media (max-width: 959px) {
    body:has(> .tabbar:not([hidden])):not(.chat-open, .reply-open, .login-screen) .toast {
      bottom: calc(var(--tabbar-h) + var(--pad-bottom, 0px) + var(--sp-3));
    }
  }
  .toast-ico {
    flex: none;
    inline-size: 22px;
    block-size: 22px;
    border-radius: var(--r-full);
    display: grid;
    place-items: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-heavy);
  }
  .toast-ok .toast-ico {
    background: var(--success-soft);
    color: var(--success-text);
  }
  .toast-err .toast-ico {
    background: var(--danger-soft);
    color: var(--danger-text);
  }
  .toast-info .toast-ico {
    background: var(--primary-soft);
    color: var(--primary-text);
  }
  .toast-text {
    min-width: 0;
    padding-block: var(--sp-2);
    overflow-wrap: anywhere;
  }
  .toast-close {
    flex: none;
    inline-size: 36px;
    block-size: 36px;
    border: 0;
    border-radius: var(--r-full);
    background: none;
    color: var(--hint);
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }

  /* —— Loading spinner (<progress> indeterminate) —— */
  progress.loading-spinner {
    --size: 28px;
    --thickness: 3px;
    --arc-start: 0deg;
    --arc-end: 140deg;
    flex: none;
    inline-size: var(--size);
    block-size: var(--size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    color: var(--primary);
    background: conic-gradient(
        from calc(90deg + var(--arc-start)),
        var(--primary) calc(var(--arc-end) - var(--arc-start)),
        transparent 0
      )
      color-mix(in oklab, var(--primary) 16%, transparent);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 0.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 0.5px));
    animation: spinner-rotate 0.9s linear infinite, spinner-dash 2.4s ease-in-out infinite;
  }
  progress.loading-spinner::-webkit-progress-bar,
  progress.loading-spinner::-webkit-progress-value {
    display: none;
    background: none;
  }
  progress.loading-spinner::-moz-progress-bar {
    background: none;
  }
  @keyframes spinner-rotate {
    to { rotate: 1turn; }
  }
  @keyframes spinner-dash {
    0% { --arc-start: 0deg; --arc-end: 12deg; }
    50% { --arc-start: 90deg; --arc-end: 330deg; }
    100% { --arc-start: 360deg; --arc-end: 372deg; }
  }
  .spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
  }
  .spinner progress.loading-spinner {
    --size: 32px;
  }
  :is(.content-busy, .home-today-loading) progress.loading-spinner {
    --size: 20px;
    --thickness: 2.5px;
  }
  @media (prefers-reduced-motion: reduce) {
    progress.loading-spinner {
      animation: spinner-rotate 2.4s linear infinite;
    }
    .toast,
    :is(.text-prompt-overlay, .att-preview-overlay, .text-prompt-card, .att-preview-panel) {
      transition: none;
    }
  }

  /* —— Chat: rating a bot reply —— */
  .bubble-fb {
    margin-top: var(--sp-2);
    display: grid;
    gap: var(--sp-2);
    -webkit-user-select: none;
    user-select: none;
  }
  .bubble-fb-votes {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
  }
  .bubble-fb-btn {
    min-width: var(--control-h);
    min-height: var(--control-h);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: transparent;
    font-size: var(--fs-base);
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--dur-1) ease, background-color var(--dur-1) ease, scale var(--dur-1) var(--ease-out);
  }
  .bubble-fb-btn.on {
    opacity: 1;
    background: var(--primary-soft);
    border-color: var(--primary-soft-2);
  }
  .bubble-fb-btn:active {
    scale: 0.92;
  }
  .bubble-fb-note {
    font-size: var(--fs-xs);
    color: var(--text-2);
  }
  .bubble-fb-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
  }
  .bubble-fb-reason {
    min-height: var(--control-h);
    padding-inline: var(--sp-3);
    font-size: var(--fs-sm);
  }
  .bubble-fb-hint {
    font-size: var(--fs-xs);
    color: var(--hint);
  }
  @media (hover: hover) and (pointer: fine) {
    .bubble-fb-btn:hover {
      opacity: 1;
      background: var(--surface-3);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .bubble-fb-btn {
      transition: none;
    }
  }

  /* —— «Оценка ответов» (RLHF pairs) —— */
  .rlhf-screen {
    display: grid;
    gap: var(--sp-3);
    max-width: 1400px;
    margin-inline: auto;
  }
  .rlhf-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
  }
  .rlhf-stats {
    font-size: var(--fs-sm);
    color: var(--text-2);
  }
  .rlhf-prompt {
    display: grid;
    gap: var(--sp-2);
  }
  .rlhf-prompt-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
  }
  .rlhf-pair-id {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--hint);
  }
  .rlhf-prompt-text {
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
    white-space: pre-wrap;
  }
  .rlhf-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-2);
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--text-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
  }
  .rlhf-badge.warn {
    background: var(--warning-soft);
    color: var(--warning-text);
  }
  .rlhf-badge.danger {
    background: var(--danger-soft);
    color: var(--danger-text);
  }
  .rlhf-complaint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-2);
  }
  .rlhf-complaint-text {
    flex-basis: 100%;
    color: var(--text);
  }
  .rlhf-history {
    font-size: var(--fs-sm);
    color: var(--text-2);
  }
  .rlhf-history-msg {
    margin-top: var(--sp-1);
    white-space: pre-wrap;
  }
  .rlhf-cols {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    align-items: start;
  }
  .rlhf-side,
  .rlhf-edited,
  .rlhf-followup {
    display: grid;
    gap: var(--sp-2);
    min-width: 0;
  }
  .rlhf-side-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }
  .rlhf-side-label {
    font-size: var(--fs-lg);
    font-weight: var(--fw-heavy);
    color: var(--primary-text);
  }
  .rlhf-side-meta {
    font-size: var(--fs-xs);
    color: var(--hint);
  }
  .rlhf-side-head .btn {
    margin-left: auto;
  }
  .rlhf-side-head .btn + .btn {
    margin-left: 0;
  }
  .rlhf-reply {
    line-height: var(--lh-body);
    overflow-wrap: anywhere;
  }
  .rlhf-edited {
    border-color: var(--primary-soft-2);
    background: var(--primary-soft);
  }
  .rlhf-steps > summary,
  .rlhf-step-result > summary,
  .rlhf-history > summary,
  .rlhf-followup summary {
    min-height: var(--control-h);
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-2);
  }
  .rlhf-rag-fact {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-2);
    border-radius: var(--r-xs);
    background: var(--surface-2);
    font-size: var(--fs-sm);
  }
  .rlhf-rag-fact + .rlhf-rag-fact {
    margin-top: var(--sp-2);
  }
  .rlhf-rag-q {
    font-weight: var(--fw-medium);
  }
  .rlhf-rag-a {
    color: var(--text-2);
    white-space: pre-wrap;
  }
  .rlhf-steps-empty {
    font-size: var(--fs-sm);
    color: var(--hint);
  }
  .rlhf-step-list {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding-left: var(--sp-5);
  }
  .rlhf-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
  }
  .rlhf-pre {
    margin: var(--sp-1) 0 0;
    padding: var(--sp-2);
    max-height: 260px;
    overflow: auto;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    font-size: var(--fs-xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .rlhf-verdict {
    display: grid;
    gap: var(--sp-3);
  }
  .rlhf-choices {
    display: grid;
    gap: var(--sp-2);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .rlhf-choice {
    min-height: var(--field-h);
  }
  .rlhf-choice kbd {
    margin-left: var(--sp-1);
    padding: 0 var(--sp-1);
    border-radius: var(--r-xs);
    border: 1px solid currentColor;
    font: inherit;
    font-size: var(--fs-2xs);
    opacity: 0.7;
  }
  .rlhf-tags {
    flex-wrap: wrap;
  }
  .rlhf-tags .chip {
    min-height: var(--control-h);
  }
  .rlhf-comment {
    width: 100%;
    resize: vertical;
  }
  .rlhf-secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
  }
  .rlhf-keys-hint {
    font-size: var(--fs-xs);
    color: var(--hint);
  }
  @media (pointer: coarse) {
    .rlhf-choice kbd,
    .rlhf-secondary kbd,
    .rlhf-keys-hint {
      display: none;
    }
  }
  /* —— Upcoming birthdays plaque (home) —— */
  .home-desk-hero-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
  }
  .home-desk-hero-col .hero {
    flex: none;
  }
  .home-bday-panel {
    margin: 0;
    overflow: hidden;
  }
  .home-desk > .home-bday-panel {
    margin: 0;
  }
  .home-bday {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    border: 1px solid color-mix(in srgb, var(--coral) 28%, var(--line));
    background:
      linear-gradient(
        135deg,
        color-mix(in srgb, var(--coral-soft) 70%, transparent),
        color-mix(in srgb, var(--surface) 88%, transparent)
      );
  }
  .home-bday-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    min-width: 0;
  }
  .home-bday-title {
    margin: 0;
    min-width: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold, 750);
    color: var(--coral-text, var(--text));
    letter-spacing: 0.01em;
  }
  .home-bday-meta {
    flex: none;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--hint);
    white-space: nowrap;
  }
  .home-bday-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .home-bday-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--sp-2);
    row-gap: 2px;
    min-width: 0;
    min-height: 32px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--r-sm);
  }
  .home-bday-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  @media (hover: hover) and (pointer: fine) {
    .home-bday-item:hover .home-bday-name {
      color: var(--coral-text, var(--primary-text));
    }
  }
  .home-bday-when {
    font-size: var(--fs-2xs);
    font-weight: 800;
    color: var(--coral-text, var(--text));
    text-transform: lowercase;
    white-space: nowrap;
  }
  .home-bday-item.is-today .home-bday-when,
  .home-bday-item.is-tomorrow .home-bday-when {
    color: var(--coral);
  }
  .home-bday-name {
    min-width: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .home-bday-side {
    grid-column: 2;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--hint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .home-bday-empty {
    font-size: var(--fs-xs);
    color: var(--hint);
  }

  /* Home «За сегодня»: keep title clear of badges */
  .home-today-panel .hot-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }
  .home-today-panel .hot-card-top {
    margin-bottom: 0;
  }
  .home-today-panel .hot-card-title {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .home-today-panel .hot-card-meta {
    margin-top: 0;
  }
  .home-today-panel .home-kpi-row {
    gap: var(--sp-2);
  }

  /* —— Forced colors (Windows high contrast) —— */
  @media (forced-colors: active) {
    :is(.card, .tile, .chip, .btn, .btn-primary, .hero, .ask-bar, .home-panel, .tabbar, .home-bday) {
      border: 1px solid CanvasText;
    }
    :is(.chip.on, .nav-item.on, .tabbar-item.on) {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
  }
}