/* «Очаг» — стили компонентов поверх tokens.css (слой components). В приложении подключается после
   tokens.css; разметка и правила — в docs/design/components.md, здесь только внешний вид.
   Цвет раздела приходит через --hue (корешок, точка, метка), цвета людей — через --me / --you.
   Цели касания: кнопки и чипы расширяют область нажатия невидимым ::after до 44 px. */

@layer components {
  /* ======== Оболочка: тулбар сверху на компьютере, снизу на телефоне ======== */
  .page { max-inline-size: var(--page); margin-inline: auto;
    padding: var(--sp-5) var(--gutter) calc(var(--sp-7) + var(--bar-h) + var(--safe-b)); }
  .topbar { position: sticky; top: 0; z-index: var(--z-bar); background: var(--paper); border-block-end: 1px solid var(--line); }
  .topbar-in { max-inline-size: calc(var(--page) + 120px); margin-inline: auto; padding: 0 var(--gutter); min-height: var(--bar-h);
    display: flex; align-items: center; gap: var(--sp-4); }
  .logo { font-weight: 800; font-size: 21px; letter-spacing: -0.03em; text-decoration: none; flex: none; }
  .logo:hover { color: var(--ink); }
  .nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav a { text-decoration: none; padding: 8px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
  .nav a:hover { color: var(--ink); background: var(--hover); }
  .nav a[aria-current="page"] { color: var(--ink); background: none; box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
  .topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-3); flex: none; }

  .tabbar { position: fixed; inset: auto 0 0 0; z-index: var(--z-bar); display: none;
    background: var(--paper); border-block-start: 1px solid var(--line); padding-block-end: var(--safe-b); }
  .tabbar-in { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-height: var(--bar-h); }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 3px; text-decoration: none;
    font-size: 11.5px; font-weight: 600; color: var(--ink-2); padding: 6px 2px 5px; white-space: nowrap; }
  .tabbar a .ic { width: 24px; height: 24px; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  @media (max-width: 699px) {
    .tabbar { display: block; }
    .topbar .nav { display: none; }
  }
  @media (min-width: 700px) { .page { padding-block-end: var(--sp-8); } }

  /* ======== Иконки (Lucide, инлайн-SVG из спрайта) ======== */
  .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .ic.inline { vertical-align: -0.22em; }

  /* ======== Текстовые роли ======== */
  .display { font-size: var(--fs-display); line-height: 1.12; font-weight: 800; letter-spacing: var(--ls-tight); }
  .title { font-size: var(--fs-title); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
  .h-card { font-size: var(--fs-card); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
  .h-block { font-size: var(--fs-block); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
  .h-group { font-size: var(--fs-group); line-height: 1.4; font-weight: 600; color: var(--ink-2); }
  .meta { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--ink-2); }
  .quiet { color: var(--ink-2); }
  .stamp { font-size: var(--fs-stamp); line-height: 1; font-weight: 700; letter-spacing: var(--ls-stamp);
    text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* ======== Точки людей, точка раздела, выбор цвета ======== */
  .dot { display: inline-block; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--c, var(--ink-3)); flex: none; }
  .dot.me { --c: var(--me); }
  .dot.you { --c: var(--you); }
  .dots { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
  .sdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--hue, var(--ink-3)); flex: none; }
  .swatches { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  .swatch { width: 32px; height: 32px; border-radius: 50%; background: var(--c); position: relative;
    box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px transparent; transition: box-shadow var(--t-base) var(--ease); }
  .swatch::after { content: ""; position: absolute; inset: -6px; }
  .swatch:hover { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--line-strong); }
  .swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--c); }

  /* ======== «Карандашная» галочка ======== */
  .check { position: relative; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); flex: none; cursor: pointer; }
  .check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .check-mark { width: var(--check); height: var(--check); border-radius: 50%; display: grid; place-items: center;
    box-shadow: inset 0 0 0 1.5px var(--ink-3); transition: box-shadow var(--t-base) var(--ease); }
  .check-mark svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset var(--t-slow) var(--ease); }
  .check:hover .check-mark { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
  .check input:checked + .check-mark { box-shadow: inset 0 0 0 1.5px var(--accent); }
  .check input:checked + .check-mark svg { stroke-dashoffset: 0; }
  .check input:focus-visible + .check-mark { outline: 2px solid var(--accent); outline-offset: 3px; }
  .check input:disabled + .check-mark { opacity: 0.45; }
  .check.small { width: 32px; height: 32px; }
  .check.small .check-mark { width: 20px; height: 20px; }

  /* ======== Строка карточки ======== */
  .list { list-style: none; margin: 0; padding: 0; }
  .row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-2);
    min-height: var(--tap); padding: 5px var(--sp-1) 5px calc(var(--spine) + 3px); border-block-end: 1px solid var(--line);
    transition: background-color var(--t-fast); }
  .row::before { content: ""; position: absolute; inset-block: 7px; inset-inline-start: 0; width: var(--spine); border-radius: 2px; background: var(--hue, transparent); }
  .list.plain .row::before, .row.plain::before { display: none; }
  .list.plain .row { padding-inline-start: var(--sp-1); }
  .row.nolead { grid-template-columns: minmax(0, 1fr) auto; padding-inline-start: calc(var(--spine) + var(--sp-3)); }
  .row:hover { background: var(--hover); }
  .row-lead { padding-inline: var(--sp-2) 0; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
  .row-main { min-width: 0; padding-block: 3px; }
  .row-title { display: inline; font-weight: 600; color: var(--ink); text-decoration: none;
    background: linear-gradient(var(--ink-2), var(--ink-2)) no-repeat 0 56% / 0 1.5px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    transition: background-size var(--t-slow) var(--ease), color var(--t-slow); }
  a.row-title:hover { color: var(--accent); }
  .row-meta { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--ink-2); margin-top: 1px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); }
  /* Разделитель «·» принадлежит следующему элементу: при переносе уходит вместе с ним, а не висит в конце строки */
  .row-meta > * + *::before, .slip .meta > * + *::before { content: "·"; margin-inline-end: var(--sp-2); color: var(--ink-3); }
  .row-end { display: inline-flex; align-items: center; gap: var(--sp-2); padding-inline-end: var(--sp-2); }
  .row:has(> .check input:checked) .row-title, .row.done .row-title { background-size: 100% 1.5px; color: var(--ink-2); }
  .row:has(> .check input:checked)::before, .row.done::before { opacity: 0.45; }
  .shop .row { min-height: var(--row-shop); }

  /* Группы списка покупок и «Куплено» */
  .group { margin-block-start: var(--sp-4); }
  .group-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
    padding: 0 var(--sp-2) var(--sp-1) calc(var(--spine) + 3px); border-block-end: 1px solid var(--line); }
  .bought { margin-block-start: var(--sp-5); }
  .bought > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-2);
    min-height: var(--tap); padding: var(--sp-2) var(--sp-2) var(--sp-2) calc(var(--spine) + 3px); font-size: var(--fs-group); font-weight: 600; color: var(--ink-2); }
  .bought > summary::-webkit-details-marker { display: none; }
  .bought > summary .ic { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease); }
  .bought[open] > summary .ic { transform: rotate(180deg); }

  /* ======== Листок ======== */
  .slip { display: block; min-width: 0; background: var(--paper-2); border-radius: var(--r-slip); padding: var(--sp-3) var(--sp-4);
    color: inherit; text-decoration: none; transition: background-color var(--t-fast), box-shadow var(--t-base); }
  a.slip:hover, .slip.hoverable:hover { background: var(--control); }
  .slip.lifted { box-shadow: var(--shadow-lift); }
  .slip-title { display: flex; align-items: baseline; gap: var(--sp-2); font-weight: 600; }
  .slip-title .sdot { align-self: center; }
  .slip .meta { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); }
  .shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-2); }
  .shelf-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .count-slip { display: grid; gap: 2px; padding: var(--sp-3); }
  .count-slip .k { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); min-width: 0; }
  .count-slip .k span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .count-slip .v { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .count-slip .v small { font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0; color: var(--ink-2); margin-inline-start: 4px; }

  /* Доска (R2): колонки «вырезаны» в бумаге, листки на них — бумага */
  .board { display: flex; gap: var(--sp-3); overflow-x: auto; padding-block-end: var(--sp-2); scroll-snap-type: x proximity; scrollbar-width: thin; }
  .board-col { flex: 0 0 min(78vw, 272px); scroll-snap-align: start; background: var(--control); border-radius: var(--r-sheet);
    padding: var(--sp-3); display: grid; gap: var(--sp-2); align-content: start; }
  .board-col > .h-group { display: flex; justify-content: space-between; padding: 2px var(--sp-1) 4px; }
  .board .slip { background: var(--paper); }

  /* ======== Открытая карточка — лист ======== */
  .sheet { max-inline-size: var(--col); }
  .crumb { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-meta); font-weight: 600; color: var(--hue, var(--ink-2)); text-decoration: none; }
  .sheet-title { margin-block-start: var(--sp-2); }
  .props { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin-block-start: var(--sp-2);
    font-size: var(--fs-meta); font-weight: 500; color: var(--ink-2); }
  .pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .pill .ic { width: 15px; height: 15px; }
  .pill b { font-weight: 600; color: var(--ink); }
  .sheet-body { margin-block-start: var(--sp-5); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--line); }
  .sheet-section { margin-block-start: var(--sp-6); }
  .sheet-section > .h-group { padding-block-end: var(--sp-2); border-block-end: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }

  /* Проза Markdown */
  .prose { font-size: var(--fs-body); line-height: var(--lh-prose); max-inline-size: var(--col); }
  .prose > :first-child { margin-block-start: 0; }
  .prose p, .prose ul, .prose ol, .prose blockquote, .prose table { margin: 0 0 1em; }
  .prose h2 { font-size: 1.1em; margin: 1.6em 0 0.5em; }
  .prose h3 { font-size: 1em; margin: 1.4em 0 0.4em; }
  .prose ul, .prose ol { padding-inline-start: 1.3em; }
  .prose li + li { margin-block-start: 0.3em; }
  .prose a { text-decoration-color: var(--line-strong); }
  .prose a.wiki { text-decoration-style: dotted; text-decoration-color: var(--ink-3); }
  .prose blockquote { padding-inline-start: 1em; border-inline-start: 3px solid var(--line-strong); color: var(--ink-2); }
  .prose code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--control); padding: 0.1em 0.35em; border-radius: 4px; }
  .prose img { display: block; border-radius: var(--r-slip); }
  .prose del { color: var(--ink-2); }
  .prose table { border-collapse: collapse; width: 100%; font-size: 0.95em; font-variant-numeric: tabular-nums; }
  .prose th, .prose td { text-align: start; padding: 0.4em 0.8em 0.4em 0; border-block-end: 1px solid var(--line); vertical-align: top; }
  .prose th { font-size: 0.85em; font-weight: 600; color: var(--ink-2); }
  /* Чеклист: вся строка — цель касания, круг 20 px */
  .prose ul.tasks { list-style: none; padding-inline-start: 0; }
  .prose .task { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: 28px; cursor: pointer; }
  .prose .task .check { width: 28px; height: 28px; margin-inline-start: -4px; }
  .prose .task .check-mark { width: 20px; height: 20px; }
  .prose .task:has(input:checked) > span { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1.5px; }

  /* Связи, комментарии, история */
  .links .row { min-height: 40px; }
  .comment { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-2); row-gap: 2px; padding: var(--sp-3) 0; border-block-end: 1px solid var(--line); }
  .comment .dot { margin-block-start: 7px; }
  .comment-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
  .comment-h .stamp { font-weight: 600; }
  .comment-b { grid-column: 2; font-size: var(--fs-small); line-height: 1.5; }
  .history ul { list-style: none; margin: 0; padding: 0; }
  .history li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--sp-2); align-items: center; padding: 5px 0; font-size: var(--fs-meta); color: var(--ink-2); }
  .history li .stamp { font-weight: 600; }
  details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--tap); }
  details.fold > summary::-webkit-details-marker { display: none; }
  details.fold > summary .ic { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease); }
  details.fold[open] > summary .ic { transform: rotate(180deg); }

  /* ======== Кнопки ======== */
  .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px;
    border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); background: none; border: 0; cursor: pointer;
    text-decoration: none; white-space: nowrap; transition: color var(--t-fast), background-color var(--t-fast); }
  .btn::after { content: ""; position: absolute; inset: -4px 0; }       /* цель касания до 44 px */
  .btn:hover { color: var(--ink); background: var(--hover); }
  .btn:active { background: var(--control); }
  .btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
  .btn:disabled, .btn[aria-disabled="true"] { color: var(--ink-3); background: none; cursor: default; }
  .btn-accent { color: var(--accent); }
  .btn-accent:hover { color: var(--accent); background: var(--accent-soft); }
  .btn-danger { color: var(--danger); }
  .btn-danger:hover { color: var(--danger); background: var(--hover); }
  .btn-primary { min-height: var(--tap); padding: 8px 20px; font-size: var(--fs-body); background: var(--accent); color: var(--on-accent); }
  .btn-primary:hover { background: color-mix(in oklab, var(--accent) 86%, var(--ink)); color: var(--on-accent); }
  .btn-primary:active { background: color-mix(in oklab, var(--accent) 76%, var(--ink)); }
  .btn-primary:disabled { background: var(--control); color: var(--ink-3); }
  .btn-icon { width: var(--tap); height: var(--tap); min-height: 0; padding: 0; border-radius: 50%; }
  .btn-icon.fill { background: var(--accent); color: var(--on-accent); }
  .btn-icon.fill:hover { background: color-mix(in oklab, var(--accent) 86%, var(--ink)); color: var(--on-accent); }
  .btn .ic { width: 18px; height: 18px; }
  .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .actions.end { justify-content: flex-end; }

  /* «♥ Спасибо» и сердца фильма */
  .thanks[aria-pressed="true"] { color: var(--accent); background: none; }
  .thanks[aria-pressed="true"] .ic { fill: currentColor; }
  .hearts { display: inline-flex; gap: 3px; align-items: center; }
  .hearts .ic { width: 18px; height: 18px; color: var(--ink-3); }
  .hearts .ic.me { color: var(--me); fill: currentColor; }
  .hearts .ic.you { color: var(--you); fill: currentColor; }

  /* ======== Чипы и пилюли ======== */
  .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .chip { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 11px; border-radius: var(--r-pill);
    background: var(--control); color: var(--ink-2); font-size: var(--fs-meta); font-weight: 500; text-decoration: none; border: 0; cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast); }
  .chip::after { content: ""; position: absolute; inset: -7px 0; }
  .chip:hover { color: var(--ink); }
  .chip[aria-pressed="true"], .chip.on { background: var(--accent-soft); color: var(--accent); }
  .chip .x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-end: -5px; border-radius: 50%; }
  .chip .x .ic { width: 12px; height: 12px; }

  /* ======== Формы ======== */
  .field { display: grid; gap: 6px; }
  .field > .label { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
  .input, .textarea, .select { width: 100%; min-height: var(--tap); padding: 10px 14px; border: 0; border-radius: var(--r-field);
    background: var(--control); color: var(--ink); font-size: max(16px, 1em); line-height: 1.4; transition: background-color var(--t-fast), box-shadow var(--t-fast); }
  .input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; background: var(--paper); }
  .textarea { min-height: 7lh; line-height: 1.55; resize: vertical; }
  .select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23706760' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center; }
  .hint { font-size: var(--fs-meta); color: var(--ink-2); }
  .field.invalid .input, .field.invalid .textarea { box-shadow: inset 0 0 0 1.5px var(--danger); }
  .field.invalid .hint { color: var(--danger); font-weight: 500; }
  .form { display: grid; gap: var(--sp-4); max-inline-size: var(--sheet-w); }
  .form .actions { margin-block-start: var(--sp-1); }

  /* Строка быстрого ввода */
  .quick { display: flex; align-items: center; gap: var(--sp-2); }
  .quick .input { flex: 1; min-width: 0; border-radius: var(--r-pill); padding-inline: 18px; }
  .quick-hint { margin-block-start: 6px; }

  /* ======== Пустое состояние ======== */
  .empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--ink-2); display: grid; justify-items: center; gap: var(--sp-3); }
  .empty p { font-size: var(--fs-body); }

  /* ======== Записка — единственный стикер ======== */
  .note { background: var(--note); border-radius: var(--r-slip); padding: var(--sp-4) var(--sp-4) var(--sp-2); max-inline-size: 36rem; }
  .note-h { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
  .note p { margin: var(--sp-2) 0 var(--sp-1); line-height: 1.5; }
  .note .actions { justify-content: flex-end; margin-inline-end: calc(-1 * var(--sp-2)); }

  /* ======== Баланс недели: две полосы без цифр ======== */
  .balance { display: grid; gap: var(--sp-2); }
  .balance-bar { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; }
  .balance-bar i { display: block; flex: var(--a, 1); background: var(--me); border-radius: 3px; }
  .balance-bar i + i { flex: var(--b, 1); background: var(--you); }
  .balance-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
  .balance-legend span { display: inline-flex; align-items: center; gap: 6px; }

  /* ======== Тост с «Отменить» ======== */
  .toast { position: fixed; inset-inline: var(--gutter); inset-block-end: calc(var(--bar-h) + var(--safe-b) + var(--sp-3)); z-index: var(--z-toast);
    margin-inline: auto; max-inline-size: 28rem; display: flex; align-items: center; gap: var(--sp-3);
    padding: 8px 8px 8px var(--sp-4); border-radius: var(--r-slip); background: var(--ink); color: var(--paper); box-shadow: var(--shadow-lift); font-weight: 500; }
  .toast span { flex: 1; min-width: 0; }
  .toast .btn { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
  .toast .btn:hover { background: none; color: inherit; text-decoration-thickness: 2px; }
  .toast.static { position: static; }
  @media (min-width: 700px) { .toast { inset-block-end: var(--sp-5); } }

  /* ======== Шит снизу (телефон) / диалог (компьютер) ======== */
  .dlg { border: 0; padding: 0; background: var(--paper); color: var(--ink); border-radius: var(--r-sheet); box-shadow: var(--shadow-lift);
    width: min(var(--sheet-w), calc(100% - 2 * var(--gutter))); }
  .dlg::backdrop { background: rgba(43, 39, 36, 0.35); }
  .dlg-in { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
  .dlg-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-block-end: var(--sp-4); }
  .dlg .grab { display: none; width: 36px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: var(--sp-2) auto 0; }
  .dlg .list .row { padding-inline-start: var(--sp-1); }
  .dlg .list .row::before { display: none; }
  .dlg[open] { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), overlay var(--t-slow) allow-discrete, display var(--t-slow) allow-discrete; }
  @starting-style { .dlg[open] { opacity: 0; transform: translateY(12px); } }
  .dlg.static { position: static; display: block; width: 100%; max-inline-size: var(--sheet-w); margin: 0; }
  @media (max-width: 699px) {
    .dlg:not(.static) { margin: 0; inset: auto 0 0 0; width: 100%; max-inline-size: none; border-radius: var(--r-sheet) var(--r-sheet) 0 0;
      max-block-size: 90dvh; padding-block-end: var(--safe-b); }
    .dlg .grab { display: block; }
  }

  /* ======== Календарь (R2): полоска недели и ячейки месяца ======== */
  .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
  .day { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: var(--tap); padding: 6px 0 4px; border-radius: 8px; color: inherit; text-decoration: none; }
  .day:hover { background: var(--hover); }
  .day .wd { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
  .day .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 600; font-variant-numeric: tabular-nums; }
  .day.off .n { color: var(--ink-2); }
  .day.today .n { background: var(--accent); color: var(--on-accent); }
  .marks { display: flex; gap: 3px; height: 6px; align-items: center; }
  .marks i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--hue, var(--ink-3)); }
  .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-block-start: 1px solid var(--line); }
  .cell { min-width: 0; min-height: 76px; padding: 6px 5px; border-block-end: 1px solid var(--line); border-inline-end: 1px solid var(--line); display: grid; align-content: start; gap: 3px; }
  .cell:nth-child(7n) { border-inline-end: 0; }
  .cell .n { font-size: var(--fs-meta); font-weight: 600; font-variant-numeric: tabular-nums; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
  .cell.off .n { color: var(--ink-3); }
  .cell.today .n { background: var(--accent); color: var(--on-accent); }
  .cell .ev { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--ink-2); }
  .cell .ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cell .ev .sdot { width: 6px; height: 6px; }
  /* На телефоне ячейка месяца слишком узка для слов: остаются число и точки разделов */
  @media (max-width: 699px) {
    .cell { display: block; min-height: 56px; }
    .cell .ev { display: inline-flex; margin: 4px 4px 0 2px; }
    .cell .ev span { display: none; }
  }

  /* ======== Экран «Сегодня» ======== */
  .today-h { display: grid; gap: 4px; }
  .today-h .greet { font-weight: 500; color: var(--ink-2); }
  .block { margin-block-start: var(--sp-6); }
  .block-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-block-end: var(--sp-3); }
  .block-h .h-block { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .block-h > .btn, .block-h > .actions > .btn:last-child { margin-inline-end: -14px; }   /* текст и иконка — по краю колонки */
  .pick { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-4); }
  .pick .actions { margin-block-start: var(--sp-2); }

  /* ======== Печать: список покупок на бумаге ======== */
  @media print {
    .topbar, .tabbar, .quick, .toast, .btn, .check, .row::before { display: none !important; }
    body { background: #fff; color: #000; font-size: 12pt; }
    .row { break-inside: avoid; border-block-end-color: #ccc; grid-template-columns: minmax(0, 1fr) auto; }
    .row-title { background: none; }
  }
}