/* Страничные правила поверх 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-diary { --hue: var(--hue-diary); }
  .hue-quiz { --hue: var(--hue-quiz); }
  .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); }
  @media (hover: hover) { .topbar-end .who:hover { color: var(--ink); background: var(--hover); } }
  .topbar-end .who[aria-current="page"] { color: var(--ink); }
  /* Значки шапки (идея, «?», поиск) — одной группой без зазора; на большом экране мышь, цель
     касания там не нужна — 36 px, чтобы вся навигация помещалась на 1280 */
  .topbar-end .btn-icon + .btn-icon { margin-inline-start: calc(-1 * var(--sp-3)); }
  @media (min-width: 700px) and (hover: hover) and (pointer: fine) { .topbar-end .btn-icon { width: 36px; height: 36px; } }
  .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%; }
  }
  /* «Для тебя» на «Сегодня»: строка = готовая фраза партнёра, под ней ссылка на карточку */
  .foryou .slips { display: grid; gap: var(--sp-2); }
  .foryou-slip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
  .foryou-text { display: flex; align-items: baseline; gap: var(--sp-2); flex: 1 1 240px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
  .foryou-text .sdot { align-self: center; flex: none; }
  .foryou-actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
  .foryou-actions form, .foryou .block-h form { display: contents; }
  .foryou .block-h .btn { margin-inline-end: -14px; }
  .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; }
  /* Лист по частям (спека 031): строка о главном — касание открывает правку её части; главное
     действие сразу под ней; часть — заголовок группы с тихой «Изменить», без рамки */
  a.sheet-line { color: var(--ink-2); min-height: var(--tap); text-decoration: underline;
    text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; }
  a.sheet-line b { color: var(--ink); }
  @media (hover: hover) { a.sheet-line:hover { color: var(--ink); } }
  .sheet-main { margin-block-start: var(--sp-4); }
  .sheet-title:has(.sheet-thumb) { display: flex; align-items: center; gap: var(--sp-3); }
  .sheet-thumb { flex: none; width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-field); }
  .sheet-part .h-group a { font-weight: 500; color: var(--ink-2); text-decoration: none; position: relative; }
  .sheet-part .h-group a::after { content: ""; position: absolute; inset: -12px -8px; }
  @media (hover: hover) { .sheet-part .h-group a:hover { color: var(--accent); } }
  .sheet-part .sheet-body { margin-block-start: var(--sp-3); padding-block-start: 0; border: 0; }
  .part-sub { margin-block-start: var(--sp-4); font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
  .part-rows { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
  .part-rows > div { display: grid; grid-template-columns: minmax(7rem, 30%) minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; }
  .part-rows > .part-row-solo { grid-template-columns: minmax(0, 1fr); }
  .part-rows dt { color: var(--ink-2); font-size: var(--fs-small); }
  .part-rows dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
  .part-empty { margin-block-start: var(--sp-3); }
  /* Текст на листе правится на месте (спека 037): тихий карандаш куска (знак 18 px, цель касания
     44 px полем ::after), «✎ Написать» у пустого текста, поле с кнопками на месте куска */
  .chunk-pen { position: relative; display: inline-flex; color: var(--ink-2); }
  .chunk-pen .ic { width: 18px; height: 18px; }
  .chunk-pen::after { content: ""; position: absolute; inset: -13px; }
  @media (hover: hover) { .chunk-pen:hover { color: var(--accent); } }
  .sheet-part:has(.chunk-editing, .chunk-empty) > .h-group .chunk-pen { visibility: hidden; }
  .sheet-text.has-pen { position: relative; padding-inline-end: 32px; }
  .sheet-text.has-pen > .chunk-pen { position: absolute; inset-inline-end: 0; inset-block-start: calc(var(--sp-3) + 3px); }
  .sheet-text > .part-sub { display: flex; justify-content: space-between; align-items: center; }
  .chunk-empty { margin-block-start: var(--sp-2); }
  .chunk-write { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--tap); }
  .chunk-write .ic { width: 16px; height: 16px; }
  .sheet-part .chunk-write { color: var(--ink-2); text-decoration: none; }
  @media (hover: hover) { .sheet-part .chunk-write:hover { color: var(--accent); } }
  .chunk-form { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-3); }
  .chunk-form .editor-bar { margin: 0; }
  .chunk-area { max-block-size: 45dvh; overflow: auto; }  /* на телефоне кнопки под полем видны над клавиатурой */
  body:has(.chunk-editing, .part-editing) .fab { display: none; }  /* пока правят, «+» не лежит у «Сохранить» */
  /* Части правятся на месте (спека 040): пилюля-кнопка с пунктиром «можно поменять» (цель касания
     44 px полем ::after), окошко поля под ней, форма части на месте, «Сохранено · Вернуть» */
  a.pill-edit { position: relative; color: inherit; text-decoration: underline dotted var(--ink-3);
    text-decoration-thickness: 1px; text-underline-offset: 4px; }
  a.pill-edit::after { content: ""; position: absolute; inset: -12px -4px; }
  @media (hover: hover) { a.pill-edit:hover { color: var(--accent); } }
  a.sheet-line, .sheet-line .line-edit { text-decoration: none; }
  .sheet-line .line-edit { position: relative; color: var(--ink-2); }
  .sheet-line .line-edit::after { content: ""; position: absolute; inset: -12px -6px; }
  .inline-pop { position: fixed; inset: auto; margin: 0; max-inline-size: min(26rem, calc(100vw - 16px));
    padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-field);
    background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lift); }
  .inline-pop .field { margin: 0; }
  .inline-form { display: grid; gap: var(--sp-3); }
  .sheet-line.inline-part { display: block; }
  .part-editing .inline-form { margin-block-start: var(--sp-3); }
  /* как «Сохранить» экрана части: прилипает к низу, на телефоне — над нижней панелью */
  .part-editing .inline-actions { position: sticky; inset-block-end: 0; z-index: 1; margin: 0;
    padding-block: var(--sp-3); background: var(--paper); border-block-start: 1px solid var(--line); }
  @media (max-width: 699px) { .part-editing .inline-actions { inset-block-end: calc(var(--bar-h) + var(--safe-b)); } }
  .inline-saved { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink-2); font-size: var(--fs-meta); }
  .link-btn { border: 0; padding: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; min-block-size: 32px; }
  .inline-merged { margin-block-start: var(--sp-2); }
  .inline-merged .dot { margin-inline: 0 4px; }
  .inline-versions { margin: 0 0 var(--sp-2); }
  .chunk-error { color: var(--danger); font-weight: 500; }
  .chunk-conflict > .hint { margin-block-start: var(--sp-3); }
  .chunk-versions { margin-block-start: var(--sp-3); }
  .chunk-versions .label { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
  .chunk-versions .label .dot { margin-inline: 2px 4px; }
  .chunk-holder { position: fixed; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; opacity: 0;
    border: 0; padding: 0; font-size: 16px; pointer-events: none; }
  .sheet-foot { margin-block-start: var(--sp-6); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--line); }
  .sheet-foot form { display: contents; }

  /* ======== Формы правки и создания ======== */
  .edit-form { max-inline-size: var(--col); }
  .editor-bar { gap: var(--sp-1); margin-block: 2px 4px; }
  .editor-bar .btn { padding: 4px 10px; }
  .props-form { display: grid; gap: var(--sp-4); }
  .edit-props { margin-block-end: 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; }
  /* Правка по частям: часть — fieldset с заголовком группы, «Ещё» свёрнуто, выбор до пяти
     вариантов и люди — чипы; «Сохранить» и «Отмена» держатся у низа экрана */
  .edit-what { margin-block: var(--sp-1) var(--sp-4); }
  .edit-part { display: grid; gap: var(--sp-4); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  .edit-part > legend.h-group { float: left; width: 100%; padding-block-end: var(--sp-2); border-block-end: 1px solid var(--line); }
  .edit-part > legend.h-group + * { clear: both; }
  .edit-form fieldset.field, .inline-form fieldset.field { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  .edit-more > summary { font-weight: 600; color: var(--ink-2); border-block-end: 1px solid var(--line); }
  .edit-more > .form { margin-block-start: var(--sp-3); }
  .choose-chips .chip { min-height: var(--tap); padding-inline: 14px; cursor: pointer; }  /* состояния выбора — общие, components.css */
  .day-field .chips { margin-block-end: var(--sp-2); }
  .day-field .input { max-inline-size: 12rem; }
  .edit-submit { position: sticky; inset-block-end: 0; z-index: 1; margin-inline: calc(var(--gutter) * -1);
    padding: var(--sp-3) var(--gutter); background: var(--paper); border-block-start: 1px solid var(--line); }
  @media (max-width: 699px) { .edit-submit { inset-block-end: calc(var(--bar-h) + var(--safe-b)); } }
  .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); }
  @media (hover: hover) { .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; }
  @media (hover: hover) { .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: var(--tap); 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; }
  /* выбранное место — не «сделано»: название не зачёркивается */
  .choose .row:has(> .check input:checked) .row-title { background-size: 0 1.5px; color: var(--ink); }
  /* «Разобрать как»: чипы дня у «Дела» и дата у «События» видны у выбранной цели */
  .choose .choose-more { display: none; margin-block: var(--sp-2) var(--sp-1); }
  .choose .row:has(> .check input:checked) .choose-more { display: flex; }
  .choose .chip { min-height: 36px; padding-inline: 14px; }
  .choose .choose-date { align-items: center; gap: var(--sp-3); }
  .choose .choose-date .input { max-inline-size: 12rem; }

  /* ======== Конфликт версий: обе рядом ======== */
  .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; }
}