/* Страничные правила поверх components.css: оттенки разделов и цвета людей классами (CSP
   запрещает атрибут style), дерево папок «Личного», формы разбора и правки, две версии при
   конфликте. Значения — только токены из tokens.css; новых цветов здесь нет. */

@layer components {
  /* ======== Оттенок раздела и цвет человека — классом вместо style="--hue: …" ======== */
  .hue-shop { --hue: var(--hue-shop); }
  .hue-home { --hue: var(--hue-home); }
  .hue-kitchen { --hue: var(--hue-kitchen); }
  .hue-cinema { --hue: var(--hue-cinema); }
  .hue-calendar { --hue: var(--hue-calendar); }
  .hue-private { --hue: var(--hue-private); }
  .hue-inbox { --hue: var(--hue-inbox); }
  .dot.person-1 { --c: var(--person-1); }
  .dot.person-2 { --c: var(--person-2); }
  .dot.person-3 { --c: var(--person-3); }
  .dot.person-4 { --c: var(--person-4); }
  .dot.person-5 { --c: var(--person-5); }
  .dot.person-6 { --c: var(--person-6); }

  /* ======== Оболочка ======== */
  .sprite { display: none; }
  /* Имя в шапке ведёт в настройки; на телефоне остаётся — другого входа туда нет */
  .topbar-end .who { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-2); border-radius: 8px;
    white-space: nowrap; text-decoration: none; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
  .topbar-end .who:hover { color: var(--ink); background: var(--hover); }
  .topbar-end .who[aria-current="page"] { color: var(--ink); }
  .block-h .h-block a { text-decoration: none; }
  .block-h .h-block .count { color: var(--ink-2); font-weight: 600; margin-inline-start: var(--sp-2); }
  .row-title.untitled { color: var(--ink-2); font-weight: 500; }
  .row-end form { display: contents; }
  .row-meta .pill .dot { margin-inline-end: 1px; }
  /* «Переместить в…» в строке: на телефоне остаётся одна иконка, цель касания 44 px */
  @media (max-width: 699px) {
    .row .btn-move span { display: none; }
    .row .btn-move { width: var(--tap); height: var(--tap); min-height: 0; padding: 0; border-radius: 50%; }
  }
  .quick-block { margin-block-start: var(--sp-6); }
  .quick-hint a { color: var(--ink); }
  .invalid-hint { color: var(--danger); font-weight: 500; margin-block-end: var(--sp-3); }

  /* ======== Лист карточки ======== */
  .sheet-head { margin-block-end: var(--sp-2); }
  .sheet-head .actions .btn { margin-inline-end: 0; }
  .sheet-actions { margin-block-start: var(--sp-5); }
  .sheet-actions form { display: contents; }
  .h-group-next { margin-block-start: var(--sp-4); }
  .stale { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-field); background: var(--control); margin-block-end: var(--sp-4); }
  .history li .dot { margin-inline: 2px; }

  /* ======== Формы правки и создания ======== */
  .edit-form { max-inline-size: var(--col); }
  .editor-bar { gap: var(--sp-1); margin-block: 2px 4px; }
  .editor-bar .btn { min-height: 32px; padding: 4px 10px; }
  .props-form { display: grid; gap: var(--sp-4); }
  @media (min-width: 700px) { .props-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .field-check { grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: var(--tap); gap: var(--sp-2); cursor: pointer; }
  .field-check .check { width: 32px; height: 32px; }
  .field-check .check-mark { width: 20px; height: 20px; }
  details.fold > summary.btn { display: inline-flex; width: auto; }
  .new-card { margin-block-start: var(--sp-5); }
  .new-card > .form { margin-block-start: var(--sp-3); }

  /* ======== Личное: дерево папок слева на компьютере, над списком на телефоне ======== */
  .me { display: grid; gap: var(--sp-5); align-items: start; }
  @media (min-width: 700px) { .me { grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-6); } }
  .tree ul { list-style: none; margin: 0; padding: 0; }
  .tree a { display: flex; align-items: center; min-height: var(--tap); padding: 6px var(--sp-3); border-radius: 8px;
    text-decoration: none; font-weight: 500; color: var(--ink-2); }
  .tree a:hover { background: var(--hover); color: var(--ink); }
  .tree a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--control); }
  .tree .d1 a { padding-inline-start: calc(var(--sp-3) + 14px); }
  .tree .d2 a { padding-inline-start: calc(var(--sp-3) + 28px); }
  .tree .d3 a { padding-inline-start: calc(var(--sp-3) + 42px); }
  .tree .d4 a { padding-inline-start: calc(var(--sp-3) + 56px); }
  .tree-add { margin-block-start: var(--sp-3); }
  .tree-add .quick { margin-block-start: var(--sp-2); }
  .tree-add .hint { margin-block-start: 6px; }
  .me-main .block-h .h-block { flex-wrap: wrap; }
  .crumb-part { text-decoration: none; color: var(--ink-2); font-weight: 600; }
  .crumb-part:hover { color: var(--accent); }
  @media (max-width: 699px) {
    .tree ul { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
    .tree a { min-height: 36px; padding: 4px var(--sp-3); background: var(--control); border-radius: var(--r-pill); font-size: var(--fs-meta); }
    .tree .d1 a, .tree .d2 a, .tree .d3 a, .tree .d4 a { padding-inline-start: var(--sp-3); }
    .tree a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  }

  /* ======== Перенос: строки-переключатели ======== */
  .choose { margin-block-start: var(--sp-4); }
  .choose-next { margin-block-start: var(--sp-6); }
  .choose .h-group { padding-block-end: var(--sp-2); border-block-end: 1px solid var(--line); }
  .choose .group-label { border: 0; padding-block: var(--sp-3) 0; }
  .choose .row::before { display: none; }
  .choose .row { padding-inline-start: var(--sp-1); }
  .choose .actions { margin-block-start: var(--sp-4); }
  .choose .check input:disabled + .check-mark { opacity: 0.45; }

  /* ======== Конфликт версий: обе рядом ======== */
  .lead { margin-block-start: var(--sp-2); }
  .versions { display: grid; gap: var(--sp-4); margin-block-start: var(--sp-5); }
  @media (min-width: 700px) { .versions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .version .h-group { display: flex; align-items: center; gap: var(--sp-2); }
  .version .row-title { display: block; margin-block-start: var(--sp-2); }
  .version pre { margin: var(--sp-2) 0 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-field); background: var(--control);
    font: inherit; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 60dvh; overflow: auto; }
  .sheet > .actions { margin-block-start: var(--sp-5); }
  .sheet > .actions form { display: contents; }

  /* ======== Тост с формой «Вернуть» ======== */
  .toast form { display: contents; }

  /* ======== Заглушка раздела ======== */
  .soon { padding-block-start: var(--sp-8); }

  /* ======== «Сегодня» → «Было или нет?» ======== */
  .today-review .review-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-1); }
  .today-review .review-actions form { display: contents; }
}