/* ═════════ base ═════════ */
/* ═══════════════════════════════════════════════════════════
   HeyRemind — основа: слои, токены, сброс, типографика, кнопки и поля.
   Порядок слоёв задаётся здесь один раз, остальные файлы только добавляют правила.
   ═══════════════════════════════════════════════════════════ */
@layer reset, tokens, base, layout, components, overlays, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
  :where(ul, ol) { padding: 0; list-style: none; }
  :where(button, input, textarea, select) { font: inherit; color: inherit; }
  :where(button) { cursor: pointer; }
  :where(dialog) { border: 0; padding: 0; background: none; color: inherit; max-width: none; max-height: none; }
  [hidden] { display: none !important; }
}

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

    /* Бумага и чернила */
    --paper: #f6f6f3;
    --surface: #fff;
    --ink: #1f2125;
    --ink-2: #5a5d65;
    --ink-3: #8d9097;
    --ink-4: #b9bbc0;
    --line: #e7e6e0;
    --line-2: #efeee9;
    --hover: #fafaf8;

    /* Акцент и статусы. Цвет несёт смысл: срочность. */
    --accent: #6573c9;
    --accent-soft: #eceefa;
    --ok: #4b8f6c;   --ok-bg: #e6f1ea;
    --warn: #b27a1c; --warn-bg: #f7eedb;
    --crit: #b94e4e; --crit-bg: #f6e5e3;
    --wait: #5c6cc0; --wait-bg: #eceefa;
    --tone-warn: #d19a3a;
    --tone-ok: #5fa684;

    /* Шрифты */
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Форма и движение */
    --radius-sm: 8px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 18px;
    --shadow: 0 1px 0 rgb(31 33 37 / .03), 0 12px 28px -18px rgb(31 33 37 / .18);
    --shadow-pop: 0 30px 80px -20px rgb(31 33 37 / .35);
    --ease: cubic-bezier(.2, .8, .2, 1);
  }
}

@layer base {
  body {
    margin: 0;
    min-height: 100dvh;
    background: var(--paper);
    color: var(--ink);
    font: 400 14px/1.5 var(--sans);
    font-feature-settings: "tnum" 1, "cv11" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* Тихая клетка, которая гаснет книзу и у сайдбара */
    &::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(900px 420px at 70% -8%, rgb(101 115 201 / .07), transparent 70%),
        linear-gradient(rgb(31 33 37 / .05) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgb(31 33 37 / .05) 1px, transparent 1px) 0 0 / 40px 40px;
      mask-image:
        linear-gradient(180deg, #000 0, rgb(0 0 0 / .55) 320px, transparent 640px),
        linear-gradient(90deg, transparent 0, transparent 232px, #000 420px);
      mask-composite: intersect;
    }
  }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  ::selection { background: var(--accent-soft); }
  :where(h1, h2, h3) { text-wrap: balance; }

  .mono { font-family: var(--mono); letter-spacing: -.01em; }

  .ic {
    inline-size: 16px;
    block-size: 16px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  kbd {
    display: inline-flex;
    align-items: center;
    padding: 4px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink-3);
    font: 500 11px/1 var(--mono);
  }

  /* ── Кнопки ── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    block-size: 38px;
    padding-inline: 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .12s var(--ease), box-shadow .15s;

    &:active { transform: scale(.98); }
    &:disabled { opacity: .55; pointer-events: none; }
  }
  .btn-primary {
    background: var(--ink);
    color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 2px rgb(31 33 37 / .2);
    &:hover { background: #34373e; }
  }
  .btn-ghost {
    background: var(--surface);
    border-color: var(--line);
    &:hover { border-color: var(--ink-4); background: var(--hover); }
  }
  .btn-danger {
    background: var(--crit);
    color: #fff;
    &:hover { background: #a74444; }
  }
  .btn-sm { block-size: 32px; padding-inline: 12px; font-size: 13px; border-radius: var(--radius-sm); }

  .icon-btn {
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-3);
    transition: background .15s, color .15s;

    &:hover { background: rgb(31 33 37 / .06); color: var(--ink); }
    &.is-danger:hover { background: var(--crit-bg); color: var(--crit); }
    &:disabled { opacity: .35; pointer-events: none; }
  }

  /* ── Поля ── */
  .field {
    display: flex;
    flex-direction: column;
    gap: 7px;

    & > span { font-size: 13px; font-weight: 500; color: var(--ink-2); }

    & :is(input, textarea) {
      inline-size: 100%;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      transition: border-color .15s, box-shadow .15s;

      &::placeholder { color: var(--ink-4); }
      &:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(101 115 201 / .16); }
    }
    & textarea { resize: none; field-sizing: content; min-block-size: 4.2em; max-block-size: 10em; }
  }

  .form-error { color: var(--crit); font-size: 13px; }
}

/* ═════════ layout ═════════ */
/* Каркас страницы: сайдбар, основная область, шапка. */
@layer layout {
  .app {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    min-block-size: 100dvh;
  }

  /* ── Сайдбар ── */
  .rail {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 28px;
    block-size: 100dvh;
    padding: 26px 16px;
    border-inline-end: 1px solid var(--line);
    background: rgb(246 246 243 / .86);
    backdrop-filter: blur(16px) saturate(1.1);
    box-shadow: 18px 0 40px -30px rgb(31 33 37 / .18);

    /* размытая кромка: контент плавно уходит под сайдбар */
    &::after {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: 100%;
      inline-size: 16px;
      pointer-events: none;
      background: linear-gradient(90deg, rgb(246 246 243 / .55), transparent);
      backdrop-filter: blur(5px);
      mask-image: linear-gradient(90deg, #000, transparent);
    }
  }

  .brand { display: flex; align-items: center; gap: 11px; padding-inline: 8px; }
  .brand-mark {
    display: grid;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 9px;
    background: var(--ink);
    color: #fff;

    & svg { inline-size: 20px; block-size: 20px; }
    & path { transform-origin: 12px 12px; animation: hand 8s linear infinite; }
  }
  .brand-name { font: 600 20px/1 var(--serif); letter-spacing: -.02em; }

  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--ink-2);
    text-align: start;
    font-weight: 500;
    transition: background .15s, color .15s;

    & span { flex: 1; }
    & .ic { color: var(--ink-3); transition: color .15s; }
    & em { font: 500 12px var(--mono); font-style: normal; color: var(--ink-3); }

    &:hover { background: rgb(31 33 37 / .045); color: var(--ink); }
    &.is-active {
      background: var(--surface);
      color: var(--ink);
      box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(31 33 37 / .05);
      & .ic { color: var(--ink); }
    }
    &.nav-done:is(:hover, .is-active) .ic { color: var(--ok); }
  }
  .nav-sep { block-size: 1px; margin: 8px 6px; background: var(--line); }

  .rail-tools { margin-block-start: auto; }
  .quiet-chip, .tool {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12.5px;
    text-align: start;
    white-space: nowrap;
    transition: border-color .15s, color .15s;

    & .ic { color: var(--accent); }
    &:hover { border-color: var(--ink-4); color: var(--ink); }
    &.is-off { color: var(--ink-3); & .ic { color: var(--ink-4); } }
  }
  .bell-dot { position: absolute; inset: 7px 7px auto auto; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--crit); }
  .rail-tools { display: flex; gap: 8px; }
  .tool {
    justify-content: center; inline-size: 46px; block-size: 46px; padding: 0; border-radius: 13px;
    color: var(--ink-2); text-decoration: none;
    & .ic { inline-size: 20px; block-size: 20px; color: currentColor; }
    &:hover { color: var(--ink); box-shadow: 0 4px 14px -8px rgb(31 33 37 / .25); }
    &[hidden] { display: none; }
    &.is-on { color: var(--ok); }
    & .tool-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    & .bell-dot { inset: 9px 9px auto auto; box-shadow: 0 0 0 2px var(--surface); }
  }

  /* ── Основная область: контейнер для адаптивных блоков ── */
  .main {
    container: main / inline-size;
    inline-size: 100%;
    max-inline-size: 1280px;
    min-inline-size: 0;
    padding-inline: clamp(20px, 3.4vw, 48px);
    padding-block-end: 72px;
  }

  .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 30px 22px;

    & h1 { font: 500 34px/1.1 var(--serif); letter-spacing: -.025em; }
  }
  .top-actions { display: flex; align-items: center; gap: 10px; }
  .top-title { display: flex; align-items: center; gap: 14px; min-inline-size: 0; }
  .tab-share {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid transparent; border-radius: 99px;
    background: none; color: var(--ink-3); font-size: 13px; font-weight: 500; transition: color .15s, border-color .15s, background .15s;
    &:hover { border-color: var(--line); background: var(--surface); color: var(--ink); }
    &[hidden] { display: none; }
    &.is-shared { padding: 4px; }                              /* один кружок — ровный круг, а не овал */
    &.is-shared:has(em) { padding-inline-end: 10px; }
    & .stack { display: inline-flex; & .avatar-s { inline-size: 24px; block-size: 24px; font-size: 11px; box-shadow: 0 0 0 2px var(--paper); } & .avatar-s + .avatar-s { margin-inline-start: -7px; } }
    & em { color: var(--ink-3); font-size: 12px; font-style: normal; }
  }
  /* ── Плавающая панель: поиск и «Добавить», когда шапка уехала вверх ──
     Живёт в свободном поле справа от колонки со списком (на узких экранах прижимается к краю окна). */
  .dock {
    position: fixed;
    inset-block-start: 22px;
    inset-inline-start: min(calc(232px + 1280px + 14px), calc(100vw - 76px));
    z-index: 7;
    display: flex;
    flex-direction: column;
    gap: 10px;
    visibility: hidden;
    opacity: 0;
    translate: 0 -12px;
    pointer-events: none;
    transition: opacity .28s var(--ease), translate .28s var(--ease), visibility 0s .28s;

    & .dock-btn {
      display: grid; place-items: center;
      inline-size: 44px; block-size: 44px;
      border: 1px solid var(--line); border-radius: 50%;
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      backdrop-filter: blur(12px) saturate(1.1);
      color: var(--ink-2);
      box-shadow: 0 6px 18px -8px rgb(31 33 37 / .35);
      cursor: pointer;
      transition: color .15s, border-color .15s, background .15s, box-shadow .2s, scale .2s var(--ease);
      & .ic { inline-size: 19px; block-size: 19px; }
      &:hover { color: var(--ink); border-color: var(--ink-4); box-shadow: 0 10px 22px -8px rgb(31 33 37 / .4); scale: 1.06; }
      &:active { scale: .96; }
      &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    }
    & .dock-add { border-color: var(--ink); background: var(--ink); color: var(--surface); &:hover { color: var(--surface); border-color: var(--ink); background: #2c2f35; } }
    /* кнопки «вылетают» по очереди */
    & .dock-btn { opacity: 0; translate: 0 -8px; }
  }
  body.is-docked .dock {
    visibility: visible; opacity: 1; translate: 0 0; pointer-events: auto;
    transition: opacity .28s var(--ease), translate .28s var(--ease), visibility 0s;
    & .dock-btn { opacity: 1; translate: 0 0; transition: color .15s, border-color .15s, background .15s, box-shadow .2s, scale .2s var(--ease), opacity .3s var(--ease), translate .35s var(--ease); }
    & .dock-btn:nth-child(2) { transition-delay: 0s, 0s, 0s, 0s, 0s, .07s, .07s; }
  }
  .demo-chip { padding: 5px 10px; border-radius: 99px; background: var(--warn-bg); color: var(--warn); font: 500 12px var(--mono); }

  .search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-inline-size: 250px;
    block-size: 38px;
    padding-inline: 12px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-3);
    text-align: start;
    transition: border-color .15s, color .15s;

    & span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    &:hover { border-color: var(--ink-4); color: var(--ink-2); }
  }

  /* ── Узкие экраны: сайдбар превращается в верхнюю полосу ── */
  @media (max-width: 860px) {
    body::before {
      mask-image: linear-gradient(180deg, #000 0, rgb(0 0 0 / .55) 320px, transparent 640px);
      mask-composite: add;
    }
    .app { display: block; }
    .rail {
      position: static;
      flex-direction: row;
      align-items: center;
      gap: 14px;
      block-size: auto;
      padding: 12px 14px;
      overflow-x: auto;
      border-inline-end: 0;
      border-block-end: 1px solid var(--line);
      box-shadow: none;
      &::after { display: none; }
    }
    .brand-name, .quiet-chip, .rail > .rail-tools { display: none; }   /* значки аккаунта переезжают в шапку (см. placeTools в app.js) */
    .top-actions .rail-tools { display: flex; gap: 10px; margin: 0; }
    .top-actions .tool { flex: none; justify-content: center; inline-size: 38px; block-size: 38px; padding: 0; & .tool-label { display: none; } & .bell-dot { inset: 7px 7px auto auto; translate: none; } }
    .nav { flex-direction: row; }
    .nav-item { white-space: nowrap; & span { flex: none; } }
    .nav-sep { inline-size: 1px; block-size: 22px; margin: 0 4px; flex: none; }
    .top { padding-block-start: 22px; & h1 { font-size: 30px; } }
    .top-actions { inline-size: 100%; }
    .search { flex: 1; min-inline-size: 0; & kbd { display: none; } }
  }
}

/* ═════════ components ═════════ */
/* Содержимое страницы: сводка, горизонт, список записей. */
@layer components {

  /* Цвет статуса передаётся через data-tone → --tone */
  [data-tone] { --tone: var(--ink-3); }
  [data-tone="crit"] { --tone: var(--crit); }
  [data-tone="warn"] { --tone: var(--tone-warn); }
  [data-tone="ok"]   { --tone: var(--tone-ok); }
  [data-tone="wait"] { --tone: var(--wait); }
  [data-tone="done"] { --tone: var(--ok); }

  /* ── Сводка ── */
  .vitals {
    display: grid;
    grid-template-columns: 1fr 1fr 2.2fr 1fr;
    margin-block-end: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background:
      linear-gradient(rgb(31 33 37 / .035) 1px, transparent 1px) -1px -1px / 28px 28px,
      linear-gradient(90deg, rgb(31 33 37 / .035) 1px, transparent 1px) -1px -1px / 28px 28px,
      var(--surface);
    box-shadow: var(--shadow);
  }
  .vital {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-inline-size: 0;
    padding: 22px 26px 24px;

    & + .vital { border-inline-start: 1px solid var(--line); }
  }
  .vital-label { font-size: 13px; color: var(--ink-3); }
  .vital-num { font: 500 44px/1 var(--serif); letter-spacing: -.03em; white-space: nowrap; &.is-crit { color: var(--crit); } }
  .vital-text {
    margin-block: -10px;
    overflow: hidden;
    font: 500 18px/44px var(--mono);
    letter-spacing: -.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vital-sub { font-size: 13px; color: var(--ink-3); }
  .vitals-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-inline-size: 640px; margin-block-end: 28px; }

  /* ── Горизонт ── */
  .horizon {
    margin-block-end: 36px;
    padding: 20px 24px 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
  .hz-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    margin-block-end: 8px;

    & h2 { font: 500 20px/1.2 var(--serif); letter-spacing: -.02em; }
  }
  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    font-size: 12.5px;
    color: var(--ink-3);

    & li { display: flex; align-items: center; gap: 7px; }
    & i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--tone); }
  }

  .hz-scroll { padding-block-start: 6px; }
  .hz-inner { position: relative; touch-action: pan-y; }
  .hz-field { position: relative; z-index: 1; }     /* точки и кружки — над линией и штрихами оси, а не под ними */
  .horizon.is-zoomed .hz-inner { cursor: grab; }
  .horizon.is-panning .hz-inner { cursor: grabbing; user-select: none; }

  /* Нижняя строка: подсказка про масштаб и кнопки */
  .hz-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 8px; }
  .hz-hint { color: var(--ink-3); font-size: 12px; opacity: .8; }
  .hz-tools { display: flex; align-items: center; gap: 4px; }
  .hz-tool {
    display: grid; place-items: center; min-inline-size: 28px; block-size: 28px; padding-inline: 8px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-3);
    font: 500 15px/1 var(--sans); cursor: pointer; transition: color .15s, border-color .15s, background .15s;
    &:hover { color: var(--ink); border-color: var(--ink-4); }
    &[hidden] { display: none; }
  }
  .hz-reset { font-size: 12px; }

  .hz-zone {
    position: absolute;
    inset-block: 0;
    border-inline: 1px dashed rgb(101 115 201 / .4);
    background: repeating-linear-gradient(135deg, rgb(101 115 201 / .09) 0 1px, transparent 1px 7px);
  }
  .hz-over {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background: linear-gradient(90deg, rgb(185 78 78 / .09), transparent);
  }
  .hz-now {
    position: absolute;
    inset-block: 0 -1px;
    inline-size: 2px;
    background: var(--ink);

    &::after {
      content: "";
      position: absolute;
      inset-block-end: -4px;
      inset-inline-start: -4px;
      inline-size: 10px;
      block-size: 10px;
      border-radius: 50%;
      background: var(--ink);
      animation: pulse-now 2.6s ease-out infinite;
    }
  }
  /* Луч «выхода» живёт в обрезающем слое, поэтому не создаёт горизонтальную прокрутку */
  .hz-sweep-clip { position: absolute; inset: -8px 0 -1px; overflow: hidden; pointer-events: none; }
  .hz-sweep {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 70px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgb(101 115 201 / .14) 85%, rgb(101 115 201 / .55));
  }

  .hz-axis { position: relative; block-size: 36px; border-block-start: 1px solid var(--line); }
  .hz-tick {
    position: absolute;
    inset-block-start: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transform: translateX(-50%);
    font: 400 11.5px var(--mono);
    color: var(--ink-3);
    white-space: nowrap;

    &::before { content: ""; inline-size: 1px; block-size: 6px; background: var(--ink-4); }
    &.is-first { transform: none; align-items: flex-start; }
    &.is-last { transform: translateX(-100%); align-items: flex-end; &::before { align-self: flex-end; } }
    &.is-key { color: var(--accent); }
  }

  .mk {
    position: absolute;
    inset-block-end: 0;
    inline-size: 0;
    padding: 0;
    border: 0;
    background: none;

    & .mk-stem { position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 1px; block-size: var(--h); background: var(--tone); opacity: .35; }
    & .mk-dot {
      position: absolute;
      inset-block-end: -5px;
      inset-inline-start: -5px;
      inline-size: 11px;
      block-size: 11px;
      border: 2px solid var(--surface);
      border-radius: 50%;
      background: var(--tone);
      box-shadow: 0 0 0 1px var(--tone);
      transition: transform .15s var(--ease);
    }
    & .mk-tag {
      position: absolute;
      inset-block-end: var(--h);
      inset-inline-start: -1px;
      display: flex;
      align-items: center;
      gap: 6px;
      max-inline-size: 200px;
      padding: 4px 9px 4px 8px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--surface);
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
      box-shadow: 0 2px 6px -2px rgb(31 33 37 / .12);
      transition: border-color .15s, transform .15s var(--ease);

      &::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--tone); flex: none; }
      & .ic { display: none; }
      & b { overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
    }
    &.is-flip .mk-tag { inset-inline: auto -1px; }
    /* Точка без подписи и кластер (несколько записей рядом) */
    &.is-dot .mk-dot { inline-size: 9px; block-size: 9px; inset-block-end: -4px; inset-inline-start: -4px; border-width: 1.5px; }
    &.is-cluster .mk-dot {
      display: grid; place-items: center;
      inline-size: 22px; block-size: 22px; inset-block-end: -11px; inset-inline-start: -11px;
      border: 2px solid var(--surface);
      background: color-mix(in srgb, var(--tone) 16%, var(--surface));
      box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tone) 70%, var(--surface)), 0 3px 8px -4px rgb(31 33 37 / .3);
      color: color-mix(in srgb, var(--tone) 62%, var(--ink)); font: 600 11px/1 var(--mono);
    }
    &.is-dot:is(:hover, :focus-visible) .mk-dot { transform: scale(1.5); }
    &.is-cluster:is(:hover, :focus-visible) .mk-dot { transform: scale(1.12); }
    &:focus-visible { outline: none; }
    &:is(:hover, :focus-visible) {
      & .mk-dot { transform: scale(1.3); }
      & .mk-tag { border-color: var(--tone); transform: translateY(-1px); }
    }
  }

  /* ── Список ── */
  .group + .group { margin-block-start: 26px; }
  .group-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 4px 10px;

    &::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--tone); }
    & h3 { font-size: 13px; font-weight: 600; color: var(--ink-2); }
    & span { font: 500 12px var(--mono); color: var(--ink-3); }
  }

  .rows {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 212px 210px 260px;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    transition: background .15s;

    & + .row { border-block-start: 1px solid var(--line-2); }
    &:hover { background: var(--hover); }
  }
  .row-ico {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink-2);
  }
  .row-main { min-inline-size: 0; }
  .row-title { overflow: hidden; font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; &.mono { font-size: 14px; font-weight: 500; } }
  .row-meta { margin-block-start: 1px; overflow: hidden; font-size: 12.5px; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
  .row-state { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; min-inline-size: 0; }
  .share-hint { display: none; }                     /* в узких раскладках кружков нет — тогда та же подпись текстом */
  .share-chip {
    display: inline-flex; align-items: center; gap: 6px; max-inline-size: 100%; padding: 2px 8px 2px 3px; border: 1px solid var(--line-2);
    border-radius: 99px; background: var(--paper); color: var(--ink-3); font-size: 12px;
    &:not(:has(em)) { padding: 2px; }                       /* только кружки — без «овала» */
    & em { overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
    & .avatar-s { inline-size: 20px; block-size: 20px; font-size: 10.5px; }
    & .stack { display: inline-flex; & .avatar-s { box-shadow: 0 0 0 2px var(--paper); } & .avatar-s + .avatar-s { margin-inline-start: -6px; } }
  }
  .amount { font: 500 13.5px var(--mono); letter-spacing: -.02em; }

  button.pill { border: 0; cursor: pointer; transition: filter .15s; &:hover:not(:disabled) { filter: brightness(.96); } &:disabled { cursor: default; opacity: .55; } }
  .rs-state { min-inline-size: 0; }
  .pill[data-tone="crit"] { background: var(--crit-bg); & .ic { inline-size: 13px; block-size: 13px; } }
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--wait-bg);
    color: var(--tone);
    font: 500 12px var(--mono);
  }
  .scan {
    position: relative;
    inline-size: 12px;
    block-size: 12px;
    overflow: hidden;
    border: 1.5px solid currentColor;
    border-radius: 50%;

    &::after { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, currentColor, transparent 40%); animation: spin 1.1s linear infinite; }
  }

  .row-due { display: flex; flex-direction: column; gap: 7px; min-inline-size: 0; }
  .due-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .due-main { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--tone); &.mono { font-weight: 500; } &.is-dim { color: var(--ink-4); } }
  .due-sub { font: 400 12px var(--mono); color: var(--ink-3); }
  .bar {
    block-size: 3px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--line-2);

    &::before { content: ""; display: block; block-size: 100%; inline-size: var(--p); border-radius: 3px; background: var(--tone); opacity: .75; animation: grow .7s var(--ease) both; }
  }

  .row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
  .row-tools { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
  .row:is(:hover, :focus-within) .row-tools { opacity: 1; }

  /* Выполненные записи */
  .row.is-done {
    & .row-ico { border-color: transparent; background: var(--ok-bg); color: var(--ok); }
    & .row-title {
      inline-size: fit-content;
      max-inline-size: 100%;
      color: var(--ink-3);
      background: linear-gradient(currentColor, currentColor) no-repeat 0 56% / 100% 1.5px;
      opacity: .9;
    }
    & :is(.row-meta, .amount) { color: var(--ink-3); }
    & .due-sub { font-family: var(--sans); font-size: 12.5px; }
  }

  .empty {
    padding: 64px 20px;
    border: 1px dashed var(--ink-4);
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-align: center;

    & > .ic { inline-size: 26px; block-size: 26px; margin-block-end: 10px; color: var(--ink-3); }
    & h3 { font: 500 22px/1.2 var(--serif); letter-spacing: -.02em; }
    & p { margin-block-start: 6px; color: var(--ink-3); }
    & .btn { margin-block-start: 18px; }
  }
  .skeleton {
    block-size: 66px;
    margin-block-end: 10px;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background: linear-gradient(90deg, #fff 25%, #f1f0ec 50%, #fff 75%) 0 0 / 200% 100%;
    animation: shimmer 1.4s linear infinite;
  }

  /* ── Адаптивность по ширине контейнера ── */
  @container main (width < 1000px) {
    .vitals { grid-template-columns: 1fr 1fr; }
    .vital:nth-child(n + 3) { grid-column: 1 / -1; border-inline-start: 0; border-block-start: 1px solid var(--line); }
    .row { grid-template-columns: 38px minmax(0, 1fr) 200px 260px; }
    .row-state { display: none; }
    .share-hint { display: inline; }
  }
  @container main (width < 700px) {
    .vital { padding: 18px; }
    .vital-num { font-size: 36px; }
    .horizon { padding: 18px 16px 12px; }
    .row { grid-template-columns: 38px minmax(0, 1fr); gap: 12px 14px; padding: 14px; }
    .row-due, .row-actions { grid-column: 1 / -1; }
    .row-actions { justify-content: flex-start; & .btn { flex: 1; } }
    .row-tools { opacity: 1; order: 3; }
  }
}

/* ═════════ login ═════════ */
@layer components {
  body.login { display: grid; place-items: center; padding: 24px; }
  .login-card {
    inline-size: min(380px, 100%);
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow);

    & h1 { margin-block-end: 22px; font: 500 30px/1.1 var(--serif); letter-spacing: -.02em; }
    & form { display: grid; gap: 16px; }
    & .btn { inline-size: 100%; }
  }
}

/* ═════════ pages ═════════ */
/* Аккаунт и админка: панель слева (кто вошёл, разделы, выход), справа карточки со списками. */
@layer components {
  body.page::before { display: none; }

  .adm { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-block-size: 100dvh; }

  /* ── Боковая панель ── */
  .adm-side {
    position: sticky; inset-block-start: 0; block-size: 100dvh;
    display: flex; flex-direction: column; gap: 18px;
    padding: 22px 14px 18px;
    border-inline-end: 1px solid var(--line);
    background: #fbfbf9;
  }
  .adm-back {
    display: inline-flex; align-items: center; gap: 6px; align-self: start;
    padding: 4px 8px 4px 4px; border-radius: 6px;
    color: var(--ink-3); font-size: 13px; text-decoration: none;
    &:hover { color: var(--ink); background: rgb(31 33 37 / .045); }
  }
  .adm-me {
    display: flex; align-items: center; gap: 11px;
    padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    box-shadow: 0 1px 2px rgb(31 33 37 / .04);
  }
  .adm-me-text { display: grid; min-inline-size: 0;
    & b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    & small { color: var(--ink-3); font-size: 12px; }
  }
  .adm-nav { display: flex; flex-direction: column; gap: 2px;
    & a {
      display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
      color: var(--ink-2); font-weight: 500; text-decoration: none; transition: background .15s, color .15s;
      & .ic { color: var(--ink-3); }
      &:hover { background: rgb(31 33 37 / .045); color: var(--ink); }
      &[aria-current="page"] { background: rgb(31 33 37 / .065); color: var(--ink); & .ic { color: var(--ink); } }
    }
  }
  .adm-count { margin-inline-start: auto; padding: 1px 7px; border-radius: 99px; background: var(--crit); color: #fff; font: 600 11px/1.5 var(--sans); font-style: normal; }
  .adm-logout { margin-block-start: auto;
    & button {
      display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 8px 10px;
      border: 0; border-radius: 8px; background: none; color: var(--ink-3); font-weight: 500; text-align: start;
      &:hover { background: var(--crit-bg); color: var(--crit); }
    }
  }

  /* ── Содержимое ── */
  .adm-main { display: grid; align-content: start; gap: 18px; inline-size: 100%; max-inline-size: 920px; padding: 44px clamp(20px, 4vw, 56px) 80px; }
  .adm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-block-end: 6px;
    & h1 { font: 500 32px/1.1 var(--serif); letter-spacing: -.025em; }
    & p { margin-block-start: 6px; color: var(--ink-3); }
  }
  .adm-flash {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid; border-radius: 10px; font-weight: 500;
    &.is-ok { border-color: rgb(75 143 108 / .25); background: var(--ok-bg); color: var(--ok); }
    &.is-error { border-color: rgb(185 78 78 / .25); background: var(--crit-bg); color: var(--crit); }
  }

  .card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 2px rgb(31 33 37 / .04), 0 12px 32px -24px rgb(31 33 37 / .2); }
  .card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-block-end: 1px solid var(--line-2);
    & h2 { font-size: 15px; font-weight: 600; }
    & p { margin-block-start: 2px; color: var(--ink-3); font-size: 13px; }
  }
  .card-body { padding: 16px 20px; }
  .card-hero { display: flex; align-items: center; gap: 16px; padding: 22px 20px;
    & h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
    & p { color: var(--ink-3); }
  }

  .srows { margin: 0; }
  .srow { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: center; padding: 13px 20px; border-block-start: 1px solid var(--line-2);
    & dt { color: var(--ink-3); }
    & dd { margin: 0; }
    & .hint { margin-inline-start: 10px; color: var(--ink-4); font-size: 12.5px; }
  }

  .avatar {
    display: grid; place-items: center; flex: none; inline-size: 36px; block-size: 36px; border-radius: 50%;
    background: hsl(var(--h, 230) 45% 92%); color: hsl(var(--h, 230) 35% 36%); font: 600 14px/1 var(--sans);
  }
  .avatar-lg { inline-size: 56px; block-size: 56px; font-size: 22px; }

  .badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px;
    background: #f1f1ed; color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap;
    & .ic { inline-size: 13px; block-size: 13px; }
    & .dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
    &.is-ok { background: var(--ok-bg); color: var(--ok); }
    &.is-warn { background: var(--warn-bg); color: var(--warn); }
    &.is-off { background: var(--crit-bg); color: var(--crit); }
    &.is-accent { background: var(--accent-soft); color: var(--accent); }
  }
  .you { padding: 1px 6px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink-3); font-size: 11px; font-weight: 500; }
  .muted { color: var(--ink-3); }
  .split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
  .inline-form { display: contents; }
  .code-chip { padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font: 500 13px var(--mono); }
  .steps { display: grid; gap: 10px; margin-block-end: 12px; counter-reset: step;
    & li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; counter-increment: step;
      &::before { content: counter(step); display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); font: 600 12px var(--sans); }
    }
  }
  .form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .form-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

  /* ── Списки (пользователи, приглашения, заявки) ── */
  .list { display: grid; }
  .card-head + .list, .card-body + .list { border-block-start: 1px solid var(--line-2); }
  .lrow {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 14px;
    padding: 13px 20px; border-block-start: 1px solid var(--line-2); transition: background .15s;
    &:first-child { border-block-start: 0; }
    &:hover { background: var(--hover); }
    &.is-muted { & .avatar, & .lrow-main { opacity: .55; } }
  }
  .lrow-main { display: grid; min-inline-size: 0;
    & b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    & small { overflow: hidden; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
  }
  .lrow-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .lrow-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-inline-size: 32px; }
  .lrow-extra { grid-column: 2 / -1; }
  .lrow-actions:not(:has(*)) { display: none; }
  .lrow-invite { grid-template-columns: auto minmax(0, 1fr) minmax(0, 340px) auto; }
  .lrow-ic { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--paper); color: var(--ink-3); }

  .inline-create { display: flex; gap: 10px; }
  .input {
    flex: 1; min-inline-size: 0; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
    &::placeholder { color: var(--ink-4); }
    &:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(101 115 201 / .16); }
  }
  .copy-field { display: flex; align-items: center; gap: 6px; min-inline-size: 0;
    & input { flex: 1; min-inline-size: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink-2); font: 400 12.5px var(--mono); }
  }
  .adm-nav-sep { margin: 14px 10px 4px; color: var(--ink-4); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .btn-quiet-danger:hover { border-color: rgb(185 78 78 / .35); background: var(--crit-bg); color: var(--crit); }
  .ic-xs { inline-size: 12px; block-size: 12px; vertical-align: -1px; }
  .empty p { max-inline-size: 360px; text-align: center; }
  .invite-card { display: grid; justify-items: center; gap: 12px; text-align: center;
    & h1 { margin: 4px 0 0; }
    & .btn { inline-size: auto; }
  }
  .invite-actions { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block-start: 8px; }
  .invite-ic { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 50%; background: var(--paper); color: var(--ink-3);
    & .ic { inline-size: 24px; block-size: 24px; } }
  .icon-btn.is-done { color: var(--ok); background: var(--ok-bg); }
  .empty { display: grid; justify-items: center; gap: 10px; padding: 56px 20px; color: var(--ink-3);
    & .ic { inline-size: 28px; block-size: 28px; color: var(--ink-4); }
    & b { font-weight: 500; }
  }

  /* ── Узкие экраны: панель становится шапкой ── */
  @media (max-width: 760px) {
    .adm { grid-template-columns: minmax(0, 1fr); }
    .adm-side {
      position: sticky; z-index: 5; block-size: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;
      padding: max(10px, env(safe-area-inset-top)) 16px 0; border-inline-end: 0; border-block-end: 1px solid var(--line);
      background: color-mix(in srgb, #fbfbf9 92%, transparent); backdrop-filter: blur(12px);
    }
    .adm-back span { display: none; }
    .adm-me { flex: 1; min-inline-size: 0; padding: 0; border: 0; background: none; box-shadow: none; & .avatar { inline-size: 30px; block-size: 30px; font-size: 13px; } }
    .adm-nav-sep { display: none; }
    .adm-logout { order: 2; margin: 0; & button { padding: 8px; } & span { display: none; } }
    .adm-nav { order: 3; flex-basis: 100%; flex-direction: row; gap: 2px; overflow-x: auto; margin-inline: -6px; scrollbar-width: none;
      & a { flex: none; gap: 6px; padding: 10px 8px; border-radius: 0; border-block-end: 2px solid transparent;
        & .ic { display: none; }
        &[aria-current="page"] { background: none; border-color: var(--ink); } &:hover { background: none; } }
    }
    .adm-main { padding: 22px 16px 64px; gap: 14px; }
    .adm-head h1 { font-size: 28px; }
    .srow { grid-template-columns: minmax(0, 1fr); gap: 2px; & .hint { display: block; margin: 0; } }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .lrow, .lrow-invite { grid-template-columns: auto minmax(0, 1fr); padding-inline: 16px; }
    .lrow > :not(.avatar, .lrow-ic) { grid-column: 2; }
    .lrow > :is(.avatar, .lrow-ic) { grid-row: 1; align-self: start; }
    .lrow-tags, .lrow-actions { justify-content: flex-start; }
    .inline-create { flex-wrap: wrap; & .input { flex-basis: 100%; } }
    .card-head, .card-body, .card-hero { padding-inline: 16px; }
    .srow { padding-inline: 16px; }
  }
}

/* ═════════ overlays ═════════ */
/* Слои поверх страницы: панель создания, поиск, диалоги, календарь, подсказки, уведомления. */
@layer overlays {

  /* ── Панель «Новая запись» (<dialog>, выезжает справа) ── */
  .drawer {
    position: fixed;
    inset: 0 0 0 auto;
    inline-size: min(440px, 100vw);
    block-size: 100dvh;
    margin: 0;
    background: var(--surface);
    border-inline-start: 1px solid var(--line);
    box-shadow: -24px 0 60px -20px rgb(31 33 37 / .2);
    overflow: visible;
    translate: 104% 0;
    transition: translate .38s var(--ease), overlay .38s allow-discrete, display .38s allow-discrete;

    &[open] { translate: 0 0; @starting-style { translate: 104% 0; } }

    &::backdrop {
      background: rgb(31 33 37 / .28);
      backdrop-filter: blur(2px);
      opacity: 0;
      transition: opacity .3s, overlay .38s allow-discrete, display .38s allow-discrete;
    }
    &[open]::backdrop { opacity: 1; @starting-style { opacity: 0; } }
  }
  .drawer-panel { display: flex; flex-direction: column; block-size: 100%; }
  .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 14px;

    & h2 { font: 500 24px/1.2 var(--serif); letter-spacing: -.02em; }
  }
  .drawer-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    padding: 6px 24px 0;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }
  .drawer-foot {
    position: sticky;
    inset-block-end: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-block-start: auto;
    padding-block: 14px 22px;
    background: linear-gradient(0deg, var(--surface) 78%, transparent);
  }

  .seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--paper);

    & button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      block-size: 34px;
      border: 0;
      border-radius: var(--radius-sm);
      background: none;
      color: var(--ink-3);
      font-weight: 500;
      transition: background .15s, color .15s;

      &:hover { color: var(--ink); }
      &.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(31 33 37 / .06); }
    }
  }
  .field input.mono { font-size: 14px; }

  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    & button {
      padding: 5px 11px;
      border: 1px solid var(--line);
      border-radius: 99px;
      background: var(--surface);
      color: var(--ink-2);
      font-size: 12.5px;
      transition: all .15s;

      &:hover { border-color: var(--ink-4); color: var(--ink); }
      &.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
    }
  }

  .picker-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-4);
    text-align: start;
    transition: border-color .15s, box-shadow .15s;

    & .ic { color: var(--ink-3); }
    &.has-value { color: var(--ink); }
    &:hover { border-color: var(--ink-4); }
    &[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(101 115 201 / .16); }
  }

  /* Предпросмотр сообщения Telegram */
  .preview {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background:
      linear-gradient(rgb(31 33 37 / .04) 1px, transparent 1px) 0 0 / 20px 20px,
      linear-gradient(90deg, rgb(31 33 37 / .04) 1px, transparent 1px) 0 0 / 20px 20px,
      var(--paper);
  }
  .bubble {
    position: relative;
    padding: 10px 14px 22px;
    border: 1px solid var(--line);
    border-radius: 4px 14px 14px 14px;
    background: var(--surface);
    box-shadow: 0 6px 16px -10px rgb(31 33 37 / .2);
    font-size: 13.5px;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;

    & b { font-weight: 600; }
    & code { padding: 0 5px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--paper); font: 400 12.5px var(--mono); }
    & .muted { color: var(--ink-4); }
    & time { position: absolute; inset: auto 12px 5px auto; font: 400 11px var(--mono); color: var(--ink-3); }
  }

  /* ── Выбор даты и времени (Popover API) ── */
  .picker {
    inset: auto;
    margin: 0;
    inline-size: 312px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 24px 60px -16px rgb(31 33 37 / .3), 0 2px 6px rgb(31 33 37 / .06);
    transform-origin: top left;
    transition: opacity .18s, translate .18s var(--ease), overlay .18s allow-discrete, display .18s allow-discrete;

    &:not(:popover-open) { opacity: 0; translate: 0 -4px; }
    &:popover-open { opacity: 1; translate: 0 0; @starting-style { opacity: 0; translate: 0 -4px; } }
  }
  .picker-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px; }
  .picker-title { font: 500 18px var(--serif); letter-spacing: -.01em; }
  .picker-nav { display: flex; gap: 2px; }
  .picker-week, .picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
  .picker-week span { padding-block: 4px 6px; font-size: 11.5px; color: var(--ink-3); text-align: center; }
  .picker-grid { gap: 2px; }
  .picker-day {
    position: relative;
    block-size: 36px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    font: 500 13.5px var(--sans);
    transition: background .12s, color .12s;

    &:hover:not(:disabled, .is-selected) { background: var(--paper); }
    &.is-out { color: var(--ink-4); }
    &:disabled { color: var(--ink-4); opacity: .45; cursor: default; }
    &.is-today::after { content: ""; position: absolute; inset: auto 50% 5px auto; inline-size: 4px; block-size: 4px; margin-inline-end: -2px; border-radius: 50%; background: var(--accent); }
    &.is-selected { background: var(--ink); color: #fff; box-shadow: 0 4px 10px -3px rgb(31 33 37 / .4); &::after { background: #fff; } }
  }
  .picker-time { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--line-2); }
  .picker-quick {
    display: flex;
    gap: 4px;

    & button {
      padding: 5px 7px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--ink-2);
      font: 400 11.5px var(--mono);
      transition: all .12s;

      &:hover { border-color: var(--ink-4); color: var(--ink); }
      &.is-on { border-color: var(--ink); background: var(--ink); color: #fff; }
    }
  }
  .picker-foot { display: flex; justify-content: space-between; margin-block-start: 12px; }

  /* Пара полей «часы : минуты» (календарь и тихие часы) */
  .clock {
    display: flex;
    align-items: center;
    gap: 4px;
    inline-size: fit-content;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);

    & b { font-family: var(--mono); color: var(--ink-3); }
    & input {
      inline-size: 40px;
      block-size: 30px;
      padding: 0;
      border: 0;
      border-radius: 7px;
      background: transparent;
      font: 500 14px var(--mono);
      text-align: center;

      &:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 1px var(--accent); }
      &:disabled { color: var(--ink-4); }
    }
  }

  /* ── Поиск и быстрые действия ── */
  .palette {
    margin: 15dvh auto 0;
    inline-size: min(580px, calc(100vw - 32px));
    background: transparent;
    overflow: visible;

    &::backdrop { background: rgb(31 33 37 / .3); backdrop-filter: blur(3px); }
    &[open] .palette-box { animation: fade-in .16s ease-out both; }     /* без сдвига: содержимое списка не должно «ехать» */
    &.from-origin[open] .palette-box { animation: none; }
  }
  .palette-box { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop); }
  .palette-input {
    display: flex;
    align-items: center;
    gap: 12px;
    block-size: 54px;
    padding-inline: 18px;
    border-block-end: 1px solid var(--line-2);
    color: var(--ink-3);

    & input { flex: 1; border: 0; outline: 0; background: none; font-size: 15.5px; color: var(--ink); &::placeholder { color: var(--ink-4); } }
  }
  .palette-list {
    max-block-size: 340px;
    padding: 8px;
    overflow-y: auto;

    & li[role="option"] {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 9px 11px;
      border-radius: 9px;
      color: var(--ink-3);
      cursor: pointer;

      & div { flex: 1; min-inline-size: 0; }
      & b { display: block; overflow: hidden; color: var(--ink); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
      & small { font-size: 12px; color: var(--ink-3); }
      &.is-selected { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
    }
  }
  .palette-heading { padding: 10px 11px 4px; font-size: 12px; color: var(--ink-3); }

  /* ── Диалоги ── */
  .dlg {
    inline-size: min(400px, calc(100vw - 32px));
    margin: auto;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-pop);

    &::backdrop { background: rgb(31 33 37 / .3); backdrop-filter: blur(3px); }
    &[open] { animation: drop .22s var(--ease); }
    & h3 { margin-block-end: 14px; font: 500 22px/1.2 var(--serif); letter-spacing: -.02em; }
  }
  #dlgEdit { inline-size: min(440px, calc(100vw - 32px)); }
  .dlg .field + .field { margin-block-start: 14px; }
  .dlg-text { color: var(--ink-2); overflow-wrap: anywhere; & b { color: var(--ink); font-weight: 600; } }
  .dlg-foot { display: flex; justify-content: flex-end; gap: 10px; margin-block-start: 22px; }
  .dlg-foot .btn-remove {
    display: grid; place-items: center; margin-inline-end: auto; inline-size: 38px; block-size: 38px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: var(--ink-3); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
    &:hover, &:focus-visible { border-color: transparent; background: var(--crit-bg); color: var(--crit); outline: none; }
    &[hidden] { display: none; }
  }
  .dlg-note { margin-block-start: 16px; font: 400 12px var(--mono); color: var(--ink-3); }

  /* ── Доступ к записи (окно «Изменить») ── */
  .share { margin-block-start: 18px; padding-block-start: 16px; border-block-start: 1px solid var(--line-2); }
  .share-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 8px;
    & span { font-size: 13px; font-weight: 500; color: var(--ink-2); }
    & em { overflow: hidden; color: var(--ink-3); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
  }
  .share-list { display: grid; gap: 2px; max-block-size: 210px; overflow-y: auto;
    & li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; &:hover { background: var(--hover); } }
    & b { flex: 1; min-inline-size: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
    & select {
      padding: 5px 26px 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface) no-repeat right 8px center / 10px
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238d9097' stroke-width='1.5'/%3E%3C/svg%3E");
      appearance: none; color: var(--ink-2); font-size: 13px; cursor: pointer;
      &:focus { outline: none; border-color: var(--accent); }
      &:disabled { opacity: .5; }
    }
  }
  .avatar-s { display: grid; place-items: center; flex: none; inline-size: 26px; block-size: 26px; aspect-ratio: 1; border-radius: 50%;
    background: hsl(var(--h, 230) 45% 92%); color: hsl(var(--h, 230) 35% 36%); font: 600 12px/1 var(--sans); }
  .dlg-wide { inline-size: min(520px, calc(100vw - 32px)); }
  .tab-list { max-block-size: 360px; margin-block-start: 6px;
    & li { gap: 12px; padding: 8px 4px; }
    & .who { display: grid; flex: 1; min-inline-size: 0;
      & b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
      & small { color: var(--ink-3); font-size: 12px; }
    }
    & .mine { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; cursor: pointer;
      & input { inline-size: 15px; block-size: 15px; margin: 0; accent-color: var(--ink); }
    }
  }
  .share-empty { padding: 10px 4px !important; color: var(--ink-3); font-size: 13px;
    & a { color: var(--accent); font-weight: 500; text-decoration: none; &:hover { text-decoration: underline; } } }
  .share-owner { margin-block-start: 16px; padding: 10px 12px; border-radius: 10px; background: var(--paper); color: var(--ink-2); font-size: 13px; &[hidden] { display: none; } }

  .switch {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    cursor: pointer;

    & input { position: absolute; opacity: 0; pointer-events: none; }
    & i {
      position: relative;
      flex: none;
      inline-size: 38px;
      block-size: 22px;
      border-radius: 99px;
      background: var(--ink-4);
      transition: background .2s;

      &::after {
        content: "";
        position: absolute;
        inset: 3px auto auto 3px;
        inline-size: 16px;
        block-size: 16px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgb(31 33 37 / .3);
        transition: translate .2s var(--ease);
      }
    }
    & input:checked + i { background: var(--ink); &::after { translate: 16px 0; } }
    & input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
  }
  .q-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-block-start: 18px; transition: opacity .2s; &.is-off { opacity: .4; pointer-events: none; } }

  /* ── Подсказка у точки горизонта ── */
  .tip {
    position: fixed;
    z-index: 60;
    max-inline-size: 260px;
    padding: 8px 12px;
    border-radius: 9px;
    background: var(--ink);
    box-shadow: 0 12px 28px rgb(31 33 37 / .3);
    color: #c9cbd0;
    font-size: 12.5px;
    pointer-events: none;

    & b { display: block; margin-block-end: 1px; color: #fff; font-weight: 500; }
    & .tip-line { display: block; margin-block-start: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & .tip-more { color: #8d9097; }
    & .tip-hint { display: block; margin-block-start: 7px; padding-block-start: 6px; border-block-start: 1px solid rgb(255 255 255 / .12); color: #8d9097; font-size: 11.5px; }
  }

  /* Список записей кластера (клик по кружку с числом) */
  .hz-pop {
    position: fixed; z-index: 61; inline-size: 270px; overflow: hidden; padding: 6px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-pop);
    animation: drop .18s var(--ease) both;

    &.is-all { overflow-y: auto; max-block-size: 300px; scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; }
    & .hz-pop-head { padding: 6px 8px 4px; color: var(--ink-3); font-size: 12px; }
    & .hz-pop-more {
      display: block; inline-size: 100%; margin-block-start: 2px; padding: 8px; border: 0; border-block-start: 1px solid var(--line-2); border-radius: 0 0 8px 8px;
      background: none; color: var(--ink-3); font-size: 12.5px; font-weight: 500; cursor: pointer;
      &:hover, &:focus-visible { color: var(--ink); background: var(--hover); outline: none; }
    }
    & .hz-pop-item {
      display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 7px 8px; border: 0; border-radius: 8px;
      background: none; text-align: start; cursor: pointer;
      & i { flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--tone); }
      & span { display: grid; min-inline-size: 0; }
      & b { overflow: hidden; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
      & small { color: var(--ink-3); font-size: 11.5px; }
      &:hover, &:focus-visible { background: var(--hover); outline: none; }
    }
  }

  /* ── Уведомления ── */
  .toasts {
    position: fixed;
    inset: auto auto 24px 50%;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    translate: -50% 0;
    pointer-events: none;
  }
  .toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 11px;
    background: var(--ink);
    box-shadow: 0 16px 36px -10px rgb(31 33 37 / .5);
    color: #fff;
    font-weight: 500;
    animation: toast-in .3s var(--ease) both;

    & .ic { color: #7fd1a6; }
    &.is-error .ic { color: #f19a94; }
    &.is-leaving { animation: toast-out .25s ease forwards; }
    &.has-action { padding-inline-end: 8px; pointer-events: auto; }
  }
  .toast-action {
    margin-inline-start: 8px;
    padding: 5px 11px;
    border: 0;
    border-radius: var(--radius-sm);
    background: rgb(255 255 255 / .14);
    color: #fff;
    font-weight: 500;
    transition: background .15s;

    &:hover { background: rgb(255 255 255 / .24); }
  }
}

/* ═════════ motion ═════════ */
/* Анимации. Все отключаются при prefers-reduced-motion. */
/* ═════════ mobile ═════════ */
/* Телефон: минимум шума. Сводка одной строкой, компактные строки, «+» под большим пальцем, шторка снизу. */
@layer overlays {
  .summary, .fab { display: none; }
  @media (max-width: 700px) { .dock { display: none; } }


  @media (max-width: 700px) {
    html { -webkit-text-size-adjust: 100%; }
    /* 16px и больше — иначе iOS увеличивает страницу при фокусе */
    :where(input, textarea, select) { font-size: 16px !important; }

    .rail {
      position: sticky;
      inset-block-start: 0;
      z-index: 5;
      background: color-mix(in srgb, var(--paper) 90%, transparent);
      backdrop-filter: blur(12px);
      padding-block-start: max(10px, env(safe-area-inset-top));
    }
    /* Вкладки помещаются в ширину экрана, без горизонтальной прокрутки */
    .rail { gap: 0; padding-inline: 8px; overflow: visible; }
    .brand { display: none; }
    .nav { flex: 1; inline-size: 100%; gap: 0; }
    .nav-item { flex: 1 1 auto; justify-content: center; gap: 5px; padding-inline: 6px; & .ic { display: none; } & em { font-size: 12px; } }
    .nav-item.nav-done { flex: 0 0 auto; & .ic { display: block; } & span, & em { display: none; } }
    .nav-sep { display: none; }
    .main { padding-inline: 16px; padding-block-end: calc(96px + env(safe-area-inset-bottom)); }
    .top { flex-wrap: nowrap; padding-block: 18px 10px; & h1 { font-size: 28px; } }
    .top-actions { inline-size: auto; & .btn-primary { display: none; } }
    .search { min-inline-size: 0; inline-size: 38px; padding: 0; justify-content: center; & span { display: none; } }

    .vitals, .horizon, .demo-chip { display: none; }
    .summary {
      display: block;
      margin-block-end: 18px;
      color: var(--ink-3);
      font-size: 14px;
      & b { color: var(--ink); font-weight: 600; &.is-crit { color: var(--crit); } }
      & span { display: block; margin-block-start: 3px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
      &[hidden] { display: none; }
    }

    /* Строки: значок · название · срок. Действия — по тапу */
    .row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 0 12px; padding: 12px 14px; }
    .row-ico { inline-size: 34px; block-size: 34px; }
    .row-state, .bar, .due-sub { display: none; }
    .share-hint { display: inline; }
    .row-due, .row-actions { grid-column: auto; }
    .row-due { align-items: flex-end; }
    .due-main { font-size: 13.5px; white-space: nowrap; }
    .row-actions {
      display: none;
      grid-column: 1 / -1;
      gap: 8px;
      margin-block-start: 10px;
      padding-block-start: 10px;
      border-block-start: 1px solid var(--line-2);
      & .btn { flex: 1; block-size: 40px; }
      & .icon-btn { inline-size: 40px; block-size: 40px; }
    }
    .row-tools { order: 0; opacity: 1; }
    .row.is-open .row-actions { display: flex; }
    .row.is-open { background: var(--hover); }
    .row.is-done .row-due { display: none; }

    .fab {
      position: fixed;
      inset-inline-end: 18px;
      inset-block-end: calc(18px + env(safe-area-inset-bottom));
      z-index: 6;
      display: grid;
      place-items: center;
      inline-size: 56px;
      block-size: 56px;
      border: 0;
      border-radius: 50%;
      background: var(--ink);
      color: var(--surface);
      box-shadow: 0 8px 24px -6px rgb(31 33 37 / .45);
      & .ic { inline-size: 24px; block-size: 24px; }
      &:active { scale: .94; }
    }

    /* Шторка снизу вместо панели справа */
    .drawer {
      inset: auto 0 0 0;
      inline-size: 100%;
      block-size: auto;
      max-block-size: 92dvh;
      border-inline-start: 0;
      border-start-start-radius: 20px;
      border-start-end-radius: 20px;
      box-shadow: 0 -20px 50px -20px rgb(31 33 37 / .3);
      translate: 0 104%;
      &[open] { translate: 0 0; @starting-style { translate: 0 104%; } }
    }
    .drawer-panel { block-size: auto; max-block-size: 92dvh; }
    .drawer-head { padding: 18px 18px 8px; }
    .drawer-body { padding: 4px 18px 0; gap: 16px; }
    .drawer-foot { padding-block: 12px max(16px, env(safe-area-inset-bottom)); & .btn { flex: 1; block-size: 44px; } }
    .preview { display: none; }
    #dlgEdit { inline-size: calc(100vw - 24px); }
  }
}

@layer motion {

  @keyframes hand       { to { rotate: 360deg; } }
  @keyframes spin       { to { rotate: 360deg; } }
  @keyframes shimmer    { to { background-position: -200% 0; } }
  @keyframes grow       { from { inline-size: 0; } }
  @keyframes fade-in    { from { opacity: 0; } }
  @keyframes drop       { from { opacity: 0; translate: 0 -8px; scale: .985; } }
  @keyframes toast-in   { from { opacity: 0; translate: 0 10px; } }
  @keyframes toast-out  { to { opacity: 0; translate: 0 8px; } }
  @keyframes pulse-now  { 0% { box-shadow: 0 0 0 0 rgb(31 33 37 / .3); } 80%, 100% { box-shadow: 0 0 0 11px rgb(31 33 37 / 0); } }

  /* ── «Выход» горизонта при первом показе ── */
  @keyframes sweep { 0% { translate: -70px 0; opacity: 1; } 95% { opacity: 1; } 100% { translate: var(--travel) 0; opacity: 0; } }
  @keyframes mk-in { from { opacity: 0; translate: 0 8px; } }
  .horizon.is-intro {
    & .hz-sweep { animation: sweep 1.7s cubic-bezier(.5, .1, .3, 1) .15s both; }
    & .mk { animation: mk-in .5s var(--ease) both; animation-delay: calc(var(--x) * 1.55s + .2s); }
  }

  /* ── Подсветка записи (после создания, возврата, клика по точке) ── */
  @keyframes flash { 0%, 30% { background: var(--accent-soft); } 100% { background: transparent; } }
  .row.is-flash { animation: flash 1.4s var(--ease); }

  /* ── Выполнение: галочка, зачёркивание, значок летит в «Выполнено» ── */
  @keyframes chk-in { from { opacity: 0; scale: .55; } }
  @keyframes draw   { to { stroke-dashoffset: 0; } }
  @keyframes tint   { from { background: transparent; } 30%, to { background: var(--ok-bg); } }
  @keyframes strike   { to { background-size: 100% 1.5px; } }
  @keyframes unstrike { to { background-size: 0 1.5px; } }
  @keyframes ring   { from { scale: .6; opacity: .8; } to { scale: 2; opacity: 0; } }
  @keyframes spark  { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-14px); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-30px); } }
  @keyframes bump {
    0%, 100% { scale: 1; }
    30% { scale: 1.05; box-shadow: 0 0 0 1px var(--ok), 0 0 0 7px rgb(75 143 108 / .16); }
  }

  .chk {
    position: absolute;
    inset: -1px;
    display: grid;
    place-items: center;
    border-radius: var(--radius);
    background: var(--ok);
    animation: chk-in .3s var(--ease) both;

    & svg { inline-size: 22px; block-size: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    & path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: draw .34s .12s var(--ease) forwards; }
  }

  .row.is-completing {
    pointer-events: none;
    animation: tint .9s var(--ease) forwards;

    & .row-title {
      inline-size: fit-content;
      max-inline-size: 100%;
      color: var(--ink-3);
      background: linear-gradient(currentColor, currentColor) no-repeat 0 56% / 0 1.5px;
      animation: strike .36s .12s var(--ease) forwards;
    }
    & :is(.row-due, .row-actions) { opacity: .3; transition: opacity .3s; }
  }

  /* Возврат: галочка гаснет, зачёркивание убирается, значок летит в нужный раздел */
  .row.is-restoring {
    pointer-events: none;
    animation: flash 1s var(--ease);

    & .row-ico { background: var(--paper); border-color: var(--line); color: var(--ink-3); transition: background .3s, color .3s, border-color .3s; }
    & .row-ico .ic { opacity: 0; scale: .4; transition: opacity .25s, scale .25s; }
    & .row-title { color: var(--ink); animation: unstrike .36s .1s var(--ease) forwards; transition: color .3s; }
    & :is(.row-due, .row-actions) { opacity: .3; transition: opacity .3s; }
  }

  .burst {
    position: absolute;
    inset: 50% auto auto 50%;
    pointer-events: none;

    &::before { content: ""; position: absolute; inset: -18px auto auto -18px; inline-size: 36px; block-size: 36px; border: 1.5px solid var(--ok); border-radius: 50%; animation: ring .6s .08s var(--ease) both; }
    & i { position: absolute; inline-size: 4px; block-size: 4px; margin: -2px; border-radius: 50%; background: var(--ok); opacity: 0; animation: spark .6s .1s var(--ease) forwards; }
  }
  .row.is-restoring .burst { &::before { border-color: var(--ink-3); } & i { background: var(--ink-3); } }

  .fly {
    position: fixed;
    z-index: 90;
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--radius);
    color: #fff;
    pointer-events: none;

    & .ic { inline-size: 20px; block-size: 20px; stroke-width: 2.4; }
    &.is-done { background: var(--ok); box-shadow: 0 12px 26px -6px rgb(75 143 108 / .65); }
    &.is-restore { background: var(--ink); box-shadow: 0 12px 26px -6px rgb(31 33 37 / .5); }
  }

  .nav-item.is-bump {
    animation: bump .8s var(--ease);
    & :is(.ic, em) { color: var(--ok); }
  }

  /* Плавная смена раздела (View Transitions) */
  ::view-transition-group(root) { animation-duration: .16s; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
    .hz-now::after, .brand-mark path { animation: none !important; }
  }
}