/* Дизайн-система «Федеральной опеки» и «ПроПриютов» — единый источник токенов и общих элементов
   для всех макетов. Витрина — ds.html, решения и история — docs/08-дизайн-система.md.

   Брейкпоинты числами: переменные в @media не работают.
     max-width:1180px — узкий ноутбук: разделы шапки и меню кабинета уходят в кнопку
     max-width:1023px — планшет: сетки в две колонки
     max-width:767px  — телефон: одна колонка, шапка 64 px
     max-width:559px  — узкий телефон
   Проверочные ширины ТЗ 390 / 768 / 1024 / 1440 попадают на четыре разные раскладки. */

:root{
  /* ── цвет: поверхности ── */
  --field:#0B0E07;        /* тёмная плита: чёрный с зелёным подтоном */
  --field-2:#1B1F16;      /* заглушка снимка на тёмном */
  --paper:#F7F5F0;        /* фон светлой части; ТЗ задаёт #EFEFEF — ждёт согласия фонда */
  --paper-2:#EFECE5;      /* наведение на элемент цвета бумаги */
  --surface:#FFFFFF;      /* карточки, поля */
  --surface-2:#FBFAF8;    /* наведение на белую строку или карточку */
  --glass:rgba(247,245,240,.84);  /* шапка поверх страницы */
  --placeholder:#E2E4DF;  /* подложка снимка, пока он грузится или его нет */

  /* ── цвет: текст на светлом ── */
  --ink:#282828;          /* 13,5:1 на бумаге */
  --ink-2:#5B5851;        /* 6,5:1 — вторичный текст */
  --ink-3:#6E6B66;        /* 4,9:1 — подписи, предел для мелкого текста */
  --ink-4:#8C8881;        /* 3,2:1 — только границы полей, трек переключателя, крупные номера */

  /* ── цвет: действие ── */
  --solid:#1E1C19;        /* выбранное: фильтр, сегмент, сумма, флажок, активный пункт меню */
  --solid-hover:#38332B;
  --green:#234721;        /* фирменный зелёный фонда: главное действие и индикаторы; белое на нём 10,5:1 */
  --green-hover:#2E5A2B;
  --accent:#F76D31;       /* кольцо фокуса; на сайте фонда ещё знаки на --accent-soft. Текстом на бумаге 2,7:1 — не для текста */
  --accent-soft:#FDE6D6;  /* только сайт фонда: подложка выбранного пункта меню и знаков; текст на ней --ink, 12:1. Не рядом с --green */
  --err:#B3261E;          /* ошибка: рамка поля и значок, 6,5:1 на белом, 6:1 на бумаге; текст ошибки остаётся --ink */

  /* ── линии на светлом ── */
  --rule-soft:rgba(40,40,40,.08);   /* черта под шапкой */
  --rule:rgba(40,40,40,.14);        /* разделители */
  --rule-2:rgba(40,40,40,.22);      /* контур кружков и второстепенных кнопок */
  --rule-3:rgba(40,40,40,.32);      /* пунктиры, контурная кнопка */
  --rule-hover:rgba(40,40,40,.6);   /* наведение на контур */

  /* ── на тёмном и зелёном ── */
  --on-dark:#FFFFFF;
  --on-dark-1:rgba(255,255,255,.82);  /* текст: 7,7:1 на зелёном */
  --on-dark-2:rgba(255,255,255,.64);  /* подписи: 5,4:1 на зелёном — прозрачнее нельзя */
  --on-dark-rule:rgba(255,255,255,.2);
  --on-dark-line:rgba(255,255,255,.34);        /* контур кнопки: 3:1 на плите */
  --on-dark-line-hover:rgba(255,255,255,.7);
  --on-dark-hover:rgba(255,255,255,.88);       /* наведение на белую кнопку */

  /* ── типографика: одна гарнитура, вес 400. Кегль и трекинг идут парой, интерлиньяж — своя шкала ── */
  --font:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-xs:13px;                       --ls-xs:-.005em;  /* подписи, мета, подвал */
  --fs-s:14.5px;                      --ls-s:-.01em;    /* интерфейс: меню, сегменты, текст плиток */
  --fs-m:16px;                        --ls-m:-.01em;    /* основной текст, кнопки, поля */
  --fs-l:clamp(16px,1.25vw,18px);     --ls-l:-.01em;    /* лид, подзаголовок секции */
  --fs-xl:clamp(18px,1.45vw,21px);    --ls-xl:-.02em;   /* заголовок карточки */
  --fs-2xl:clamp(22px,2.2vw,32px);    --ls-2xl:-.025em; /* заголовок блока, диалога */
  --fs-3xl:clamp(28px,3.2vw,46px);    --ls-3xl:-.03em;  /* заголовок экрана, крупное число */
  --fs-4xl:clamp(30px,4.2vw,58px);    --ls-4xl:-.03em;  /* заголовок секции */
  --fs-5xl:clamp(38px,4.3vw,66px);    --ls-5xl:-.032em; /* первый экран на бумаге */
  --fs-6xl:clamp(38px,6.4vw,82px);    --ls-6xl:-.032em; /* первый экран на плите */
  --lh-display:1.04;  /* 3xl–6xl */
  --lh-title:1.1;     /* 2xl */
  --lh-snug:1.2;      /* xl, плашки, короткие заголовки в две строки */
  --lh-ui:1.4;        /* xs, s: подписи, строки интерфейса */
  --lh-text:1.5;      /* m, l: абзацы */

  /* ── радиусы: вложенный = внешний − 8 ── */
  --r-xs:4px;      /* кольцо фокуса, метки легенды */
  --r-s:12px;      /* снимок в карточке, поле, плашка на снимке */
  --r-m:20px;      /* карточка, панель, отдельный снимок */
  --r-l:28px;      /* плита, диалог */
  --r-pill:999px;  /* кнопки, чипы, поиск, сегменты, полоски */
  --r-round:50%;   /* аватар, кнопка-стрелка */

  /* ── высоты элементов управления ── */
  --h-s:36px;   /* чип, пункт внутри группы — только там, где касание добирается до 44 */
  --h-m:44px;   /* минимум касания по ТЗ: стрелки, бургер, малые кнопки, пункты сегмента */
  --h-l:52px;   /* кнопка, поле, выпадающий список, сегмент целиком */
  --h-xl:64px;  /* поле поиска */

  /* ── отступы: сетка 4 px, имя = число × 4 ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:28px; --s8:32px;
  --s10:40px; --s12:48px; --s16:64px;
  /* текучие — растут с окном */
  --gap-s:clamp(10px,1.2vw,16px);    /* между карточками сетки */
  --gap-m:clamp(16px,2.2vw,32px);    /* между колонками */
  --gap-l:clamp(28px,4.4vw,64px);    /* между крупными колонками */
  --card-pad:clamp(16px,1.8vw,24px); /* поле карточки */
  --plate-pad:clamp(24px,3.6vw,52px);/* поле крупной плиты: тур, панель «Приютам», шаг */
  --row:clamp(16px,2.4vh,24px);      /* поле строки списка по вертикали */
  --block:clamp(24px,3.6vh,40px);    /* между блоками внутри секции */
  --block-l:clamp(32px,5vh,56px);
  --sec:clamp(64px,10vh,124px);      /* ритм секций */
  --sec-tight:clamp(40px,6vh,64px);

  /* ── сетка страницы ── */
  --wrap:1420px;
  --pad:clamp(16px,4vw,56px);
  --axis:max(var(--pad), (100% - var(--wrap)) / 2);  /* общая ось текста полноширинных кадров */
  --inset:clamp(8px,1vw,12px);       /* отступ плиты первого экрана от краёв окна */
  --hdr:74px;
  --side:240px;                      /* боковое меню кабинета */

  /* ── тени: вглубь, без цвета ── */
  --sh-1:0 1px 3px rgba(11,14,7,.16);     /* плашка на снимке, активный сегмент */
  --sh-2:0 18px 44px rgba(11,14,7,.2);    /* всплывающее меню, панель на плите */
  --sh-3:0 30px 80px rgba(11,14,7,.3);    /* диалог */
  --scrim:rgba(11,14,7,.52);              /* подложка диалога */

  /* ── движение ── */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-1:.16s;  /* цвет текста */
  --dur-2:.24s;  /* фон, рамка, тень */
  --dur-3:.45s;  /* появление, смена экрана */
  --dur-4:.6s;   /* снимок при наведении */
}
@media (max-width:767px){:root{--hdr:64px}}

/* ── основа ── */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:400;
  font-size:var(--fs-m);line-height:var(--lh-text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}
/* скрытое не держит места: компоненты с display (.err, .errsum) иначе перебивают атрибут */
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* текст — классом шкалы, когда у элемента нет своей роли */
.t-xs{font-size:var(--fs-xs);line-height:var(--lh-ui);letter-spacing:var(--ls-xs)}
.t-s{font-size:var(--fs-s);line-height:var(--lh-ui);letter-spacing:var(--ls-s)}
.t-m{font-size:var(--fs-m);line-height:var(--lh-text);letter-spacing:var(--ls-m)}
.t-l{font-size:var(--fs-l);line-height:var(--lh-text);letter-spacing:var(--ls-l)}
.t-xl{font-size:var(--fs-xl);line-height:var(--lh-snug);letter-spacing:var(--ls-xl)}
.t-2xl{font-size:var(--fs-2xl);line-height:var(--lh-title);letter-spacing:var(--ls-2xl)}
.t-3xl{font-size:var(--fs-3xl);line-height:var(--lh-display);letter-spacing:var(--ls-3xl)}
.t-4xl{font-size:var(--fs-4xl);line-height:var(--lh-display);letter-spacing:var(--ls-4xl)}
.t-5xl{font-size:var(--fs-5xl);line-height:var(--lh-display);letter-spacing:var(--ls-5xl)}
.t-6xl{font-size:var(--fs-6xl);line-height:var(--lh-display);letter-spacing:var(--ls-6xl)}

/* ── раскладка ── */
.wrap{max-width:var(--wrap);margin:0 auto}
.sec{padding:var(--sec) var(--pad);background:var(--paper);color:var(--ink)}
.sec--tight{padding-top:var(--sec-tight);padding-bottom:var(--sec-tight)}
.card{background:var(--surface);border-radius:var(--r-m);padding:var(--card-pad)}

/* ── кнопки: два приоритета на светлом, два на тёмном. Главное действие — зелёное, чёрный остаётся выбору ──
   Состояния по ТЗ: обычное, наведение, фокус, нажатие, недоступна, выполняется (aria-busy) */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:var(--h-l);padding:0 var(--s7);border:0;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;
  font-size:var(--fs-m);line-height:1;letter-spacing:var(--ls-m);
  transition:background var(--dur-2) ease,border-color var(--dur-2) ease,transform var(--dur-1) ease}
.btn:active{transform:scale(.98)}
.btn--fill{background:var(--green);color:var(--on-dark)}
.btn--fill:hover{background:var(--green-hover)}
.btn--line{background:transparent;box-shadow:inset 0 0 0 1px var(--rule-3);color:var(--ink)}
.btn--line:hover{box-shadow:inset 0 0 0 1px var(--rule-hover)}
.btn--light{background:var(--on-dark);color:var(--solid)}
.btn--light:hover{background:var(--on-dark-hover)}
.btn--ondark{background:transparent;box-shadow:inset 0 0 0 1px var(--on-dark-line);color:var(--on-dark)}
.btn--ondark:hover{box-shadow:inset 0 0 0 1px var(--on-dark-line-hover)}
.btn--sm{height:var(--h-m);padding:0 var(--s5);font-size:var(--fs-s)}
.btn[disabled],.btn[aria-disabled="true"]:not([aria-busy="true"]){opacity:.38;pointer-events:none}
/* выполняется: подпись остаётся — ширина кнопки не прыгает, рядом крутится знак */
.btn[aria-busy="true"]{cursor:progress}
.btn[aria-busy="true"]::before{content:"";width:16px;height:16px;border-radius:var(--r-round);
  border:2px solid currentColor;border-right-color:transparent;animation:ds-spin .8s linear infinite}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* ссылка-переход и подчёркнутая ссылка */
.more{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--h-m);padding:0;border:0;background:none;
  cursor:pointer;white-space:nowrap;font-size:var(--fs-s);letter-spacing:var(--ls-s);color:var(--ink-2);
  transition:color var(--dur-1) ease}
.more:hover{color:var(--ink)}
.lnk{display:inline-flex;align-items:center;min-height:var(--h-m);padding:0;border:0;background:none;cursor:pointer;
  font-size:var(--fs-s);color:var(--ink);text-align:left;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rule-3)}
.lnk:hover{text-decoration-color:var(--ink)}

/* кнопка-стрелка: круг на карточке-входе */
.arr{display:flex;align-items:center;justify-content:center;width:var(--h-m);height:var(--h-m);flex:none;
  border-radius:var(--r-round);box-shadow:inset 0 0 0 1px var(--rule-2);color:var(--ink);
  transition:background var(--dur-2) ease,color var(--dur-2) ease,box-shadow var(--dur-2) ease}
.arr:hover,:hover > .arr{background:var(--solid);color:var(--on-dark);box-shadow:none}

/* чип — быстрый запрос под поиском. Видимая высота 36, касание добирает ::after до 44 */
.chip{position:relative;display:inline-flex;align-items:center;height:var(--h-s);padding:0 var(--s4);
  border-radius:var(--r-pill);background:var(--surface);font-size:var(--fs-xs);letter-spacing:var(--ls-xs);
  color:var(--ink-2);transition:color var(--dur-1) ease}
.chip::after{content:"";position:absolute;inset:calc((var(--h-s) - var(--h-m)) / 2) 0}
.chip:hover{color:var(--ink)}

/* плашка команды на снимке: пять делений — пять мест опекунов. Одной строкой в левом нижнем углу —
   морда обычно в центре и сверху кадра, угол внизу её не закрывает */
.gd{position:absolute;left:var(--s2);bottom:var(--s2);z-index:1;margin:0;pointer-events:none;
  display:flex;align-items:center;gap:var(--s2);max-width:calc(100% - 2 * var(--s2));padding:var(--s1) var(--s2);border-radius:var(--r-s);
  background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);
  font-size:var(--fs-xs);line-height:var(--lh-snug);letter-spacing:var(--ls-xs)}
.gd__bar{order:-1;display:flex;gap:2px;flex:none}
.gd__bar i{width:10px;height:4px;border-radius:var(--r-pill);background:var(--rule)}
.gd__bar .on{background:var(--green)}

/* статус — пиктограмма и текст одного цвета: цветом состояние не передаётся */
.st{display:flex;align-items:center;gap:var(--s2);margin:0;font-size:var(--fs-s);line-height:var(--lh-ui);color:var(--ink-2)}
.st svg{flex:none}

/* заглушка снимка: фото нет — подложка и знак, чужое животное не подставляется */
.noimg{display:flex;align-items:center;justify-content:center;background:var(--placeholder);color:var(--ink-3)}

/* ── диалог: модальный <dialog>, крестик 44 в углу. Читалка .rd — снимок сверху во всю ширину ── */
.dlg{border:0;padding:0;margin:auto;width:min(560px,calc(100% - 32px));max-height:calc(100svh - 32px);
  border-radius:var(--r-l);background:var(--surface);color:var(--ink);box-shadow:var(--sh-3);overflow:auto}
.dlg--wide{width:min(760px,calc(100% - 32px))}
.dlg::backdrop{background:var(--scrim)}
.dlg[open]{animation:ds-pop var(--dur-2) var(--ease) both}
@keyframes ds-pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.dlg__in{position:relative;padding:var(--gap-m)}
.dlg__x{position:absolute;right:var(--s3);top:var(--s3);z-index:2;display:flex;align-items:center;justify-content:center;
  width:var(--h-m);height:var(--h-m);border-radius:var(--r-round);border:0;background:var(--on-dark-hover);cursor:pointer;
  box-shadow:0 0 0 1px var(--rule)}
.dlg__t{margin:0;padding-right:var(--s12);font-weight:400;font-size:var(--fs-2xl);line-height:var(--lh-title);letter-spacing:var(--ls-2xl)}
.dlg__p{margin:var(--s4) 0 0;font-size:var(--fs-m);line-height:var(--lh-text);color:var(--ink-2)}
.dlg__p b{font-weight:400;color:var(--ink)}
.dlg__acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.rd figure{margin:0;aspect-ratio:9/5;background:var(--placeholder)}
.rd figure img{width:100%;height:100%;object-fit:cover}
.rd .dlg__t{margin-top:var(--s2)}
.rd .body p{margin:var(--s4) 0 0;font-size:var(--fs-m);line-height:var(--lh-text)}
.rd .dlg__acts{align-items:center;gap:var(--s3) var(--s6)}

/* места команды: пять ячеек — пять опекунов. Занятое — серая плашка с именем, ваше — --solid, свободное — пунктир.
   На карточке животного в занятой ячейке имя опекуна или «Опекун», если он не дал показывать имя; свободные — пустые.
   Миниатюра в «Как устроена опека» на FO-01 масштабирует их в единицах --u поверх этих правил */
.slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s1)}
.slots i{display:flex;align-items:center;justify-content:center;height:var(--h-m);border-radius:var(--r-s);
  font-style:normal;font-size:var(--fs-xs);letter-spacing:var(--ls-xs);text-align:center;line-height:var(--lh-title)}
.slot--on{background:var(--paper-2);color:var(--ink)}
.slot--me{background:var(--solid);color:var(--on-dark)}
.slot--free{border:1.5px dashed var(--rule-3);color:var(--ink-3)}
/* имя длиннее ячейки — с многоточием; полный список команды для чтения с экрана лежит рядом скрытой строкой */
.slots i > span{max-width:100%;padding:0 var(--s1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* плитка каталога: снимок 3:2 с плашкой .gd, кличка, приют. Ссылка в заголовке растянута на всю плитку */
.tile{position:relative;display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r-m);padding:var(--s2) var(--s2) var(--s3);
  transition:background var(--dur-2) ease}
.tile:hover{background:var(--surface-2)}
.tile figure{position:relative;margin:0 0 var(--s3);aspect-ratio:3/2;border-radius:var(--r-s);overflow:hidden;background:var(--placeholder)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile h3{margin:0;padding:0 var(--s1);font-weight:400;font-size:var(--fs-l);letter-spacing:var(--ls-l)}
.tile h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-m)}
.tile__where{margin:var(--s1) 0 0;padding:0 var(--s1);font-size:var(--fs-s);line-height:var(--lh-ui);color:var(--ink-2)}
/* крупная подпись — плитка в две колонки, как «Мои подопечные» в кабинете */
.tile--l h3{font-size:var(--fs-xl);line-height:var(--lh-snug);letter-spacing:var(--ls-xl)}

/* ── шапка: липкая, на бумаге с первого экрана. Черта снизу (.hdr--line) появляется,
   когда под шапку уехала страница. Полоса во всю ширину, содержимое — по сетке 1420 ── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;padding:0 var(--pad);height:var(--hdr);
  background:var(--glass);backdrop-filter:blur(14px);transition:box-shadow var(--dur-2) ease}
.hdr--line{box-shadow:0 1px 0 var(--rule-soft)}
.hdr__in{display:flex;align-items:center;gap:var(--gap-m);height:100%;max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:center;gap:var(--s3);flex:none}
.brand img{height:26px;width:auto}
.brand span{font-size:var(--fs-s);letter-spacing:var(--ls-s);color:var(--ink-3)}
/* разделы платформы — капсулой по центру окна */
.nav{position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;height:var(--h-m);padding:0 var(--s1);
  border:1px solid var(--rule);border-radius:var(--r-pill);background:transparent;backdrop-filter:blur(10px)}
.nav a{display:inline-flex;align-items:center;height:var(--h-s);padding:0 var(--gap-s);
  font-size:var(--fs-s);letter-spacing:var(--ls-s);color:var(--ink-3);transition:color var(--dur-1) ease}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.side{margin-left:auto;display:flex;align-items:center;gap:var(--s3);flex:none}
/* соседний продукт: мельче и тусклее разделов, отбит чертой и знаком внешней ссылки */
.cross{display:inline-flex;align-items:center;gap:var(--s1);
  font-size:var(--fs-xs);letter-spacing:var(--ls-xs);color:var(--ink-3);transition:color var(--dur-1) ease}
.cross:hover{color:var(--ink)}
.sep{width:1px;height:18px;background:var(--rule);flex:none}
/* .enter только внутри шапки: кабинет и маршрут зовут так анимацию смены экрана */
.hdr .enter{font-size:var(--fs-s);letter-spacing:var(--ls-s);color:var(--ink);opacity:.86;transition:opacity var(--dur-1) ease}
.hdr .enter:hover{opacity:1}
.mob{display:none;width:var(--h-m);height:var(--h-m);flex:none;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--rule);background:transparent;backdrop-filter:blur(10px);
  color:var(--ink);align-items:center;justify-content:center}

/* ── подвал ── */
.foot{background:var(--surface);padding:var(--sec-tight) var(--pad) var(--block)}
.foot__in{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--plate-pad)}
.foot__brand img{height:26px;width:auto}
.foot__name{margin:var(--s4) 0 0;font-size:var(--fs-l);letter-spacing:var(--ls-l)}
.foot__of{margin:var(--s1) 0 0;font-size:var(--fs-s);color:var(--ink-2)}
.foot__contacts{margin:var(--card-pad) 0 0;display:flex;flex-direction:column;gap:var(--s2)}
.foot__contacts a{font-size:var(--fs-m);letter-spacing:var(--ls-m);transition:color var(--dur-1) ease}
.foot__contacts a:hover{color:var(--ink-2)}
.foot h4{margin:0 0 var(--s4);font-weight:400;font-size:var(--fs-s);color:var(--ink-3)}
.foot ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.foot ul a{font-size:var(--fs-s);color:var(--ink);transition:color var(--dur-1) ease}
.foot ul a:hover{color:var(--ink-2)}
.foot__cross{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s6);
  height:var(--h-m);padding:0 var(--s4);border-radius:var(--r-pill);border:1px solid var(--rule-2);
  font-size:var(--fs-s);color:var(--ink-2);transition:border-color var(--dur-1) ease,color var(--dur-1) ease}
.foot__cross:hover{border-color:var(--rule-hover);color:var(--ink)}
.foot__end{max-width:var(--wrap);margin:var(--sec-tight) auto 0;padding-top:var(--s5);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);font-size:var(--fs-xs);color:var(--ink-3)}

@media (max-width:1180px){
  .nav,.cross,.sep{display:none}
  .mob--menu{display:inline-flex}
}
@media (max-width:1023px){
  .foot__in{grid-template-columns:1fr 1fr;gap:var(--s8)}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:767px){
  .hdr__in{gap:var(--s3)}
  .brand span,.hdr .enter{display:none}
  .mob--user{display:inline-flex}
  /* касание от 44 px — рамка ТЗ */
  .brand{min-height:var(--h-m)}
  .foot ul a,.foot__contacts a{display:inline-flex;align-items:center;min-height:var(--h-m)}
  .foot ul,.foot__contacts{gap:0}
}
@media (max-width:559px){
  .foot__in{grid-template-columns:1fr}
}

/* ── поля ── */
.fld label{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin:0 0 var(--s2);
  font-size:var(--fs-s);letter-spacing:var(--ls-s)}
.fld label small{font-size:var(--fs-xs);color:var(--ink-3)}
/* кнопка-подпись файла внутри поля: без этого её сбивают выравнивание и отступ подписи поля */
.fld label.btn{align-items:center;justify-content:center;gap:var(--s2);margin:0}
/* граница поля 3,5:1 к белому — ТЗ требует 3:1 для границ элементов управления */
.inp{width:100%;height:var(--h-l);padding:0 var(--s4);border:1px solid var(--ink-4);border-radius:var(--r-s);
  background:var(--surface);font:400 var(--fs-m)/1 var(--font);letter-spacing:var(--ls-m);color:var(--ink);
  transition:border-color var(--dur-1) ease,box-shadow var(--dur-1) ease}
.inp::placeholder{color:var(--ink-4)}
.inp:hover{border-color:var(--ink-2)}
.inp:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.inp:disabled{background:var(--paper);border-color:var(--rule-2);color:var(--ink-3);cursor:default}
.hint{margin:var(--s2) 0 0;font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--ink-3)}
/* ошибка — красной рамкой 2 px, красной пиктограммой и словами. Текст --ink: цвет не единственный признак.
   В фокусе к красной рамке добавляется кольцо фокуса поля */
.fld.is-err .inp{border:2px solid var(--err);padding-left:calc(var(--s4) - 1px)}
.err{display:flex;align-items:flex-start;gap:var(--s2);margin:var(--s2) 0 0;font-size:var(--fs-s);line-height:var(--lh-ui);color:var(--ink)}
.err svg{flex:none;margin-top:1px;color:var(--err)}

/* многострочное поле и список внутри формы — та же рамка, что у .inp */
textarea.inp{height:auto;min-height:calc(var(--h-l) * 2);padding:var(--s3) var(--s4);line-height:var(--lh-text);resize:vertical}
select.inp{appearance:none;-webkit-appearance:none;padding-right:var(--s10);cursor:pointer;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23282828' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right var(--s4) center}
.fld.is-err select.inp{padding-right:calc(var(--s10) - 1px)}
.fld.is-err textarea.inp{padding-top:calc(var(--s3) - 1px)}

/* флажок: согласия и необязательные отметки. Квадрат в строке касания 44; отмечен — галкой на --solid.
   Ошибка — красной рамкой 2 px и текстом .err ниже, как у поля */
.cb{display:flex;align-items:flex-start;gap:var(--s3);min-height:var(--h-m);padding:var(--s3) 0;cursor:pointer;
  font-size:var(--fs-s);line-height:var(--lh-ui);letter-spacing:var(--ls-s);color:var(--ink)}
.cb input{appearance:none;-webkit-appearance:none;flex:none;width:var(--s5);height:var(--s5);margin:0;cursor:pointer;
  border:1px solid var(--ink-4);border-radius:var(--r-xs);background:var(--surface) no-repeat center;
  transition:background-color var(--dur-1) ease,border-color var(--dur-1) ease}
.cb input:hover{border-color:var(--ink-2)}
.cb input:checked{border-color:var(--solid);background-color:var(--solid);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1.5 5.2l3 3 6-6.4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cb input:disabled{opacity:.38;cursor:default}
.cb a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-3)}
.cb a:hover{text-decoration-color:var(--ink)}
.cb.is-err input{border:2px solid var(--err)}
.cb + .err{margin:0 0 var(--s2) calc(var(--s5) + var(--s3))}

/* выбор из нескольких: пилюли 52 с переносом — суммы опеки и разовой помощи. Радиокнопка скрыта,
   фокус и выбор видны на подписи; выбранная — --solid, как активный сегмент */
.pick{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;border:0;min-width:0}
.pick input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.pick label{display:inline-flex;align-items:center;height:var(--h-l);padding:0 var(--s5);border-radius:var(--r-pill);cursor:pointer;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule-2);white-space:nowrap;
  font-size:var(--fs-m);letter-spacing:var(--ls-m);color:var(--ink);
  transition:background var(--dur-2) ease,box-shadow var(--dur-1) ease,color var(--dur-1) ease}
.pick label:hover{box-shadow:inset 0 0 0 1px var(--rule-hover)}
.pick input:focus-visible + label{outline:2px solid var(--accent);outline-offset:3px}
.pick input:checked + label{background:var(--solid);color:var(--on-dark);box-shadow:none}
.pick input:disabled + label{opacity:.38;cursor:default}

/* сводка ошибок над длинной формой, по образцу GOV.UK: одна строка текста без рамки — число полей
   и ссылки к каждому по названию поля. Получает фокус при отправке. В короткой форме сводки нет, только текст у поля */
.errsum{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);margin-top:var(--s4);
  font-size:var(--fs-s);line-height:var(--lh-ui);letter-spacing:var(--ls-s);color:var(--ink)}
.errsum:focus{outline:none}
.errsum h3{display:flex;align-items:center;gap:var(--s2);margin:0;font-weight:400;font-size:inherit;letter-spacing:inherit}
.errsum h3 svg{flex:none;color:var(--err)}
.errsum ul{display:contents;list-style:none}
.errsum li:not(:last-child)::after{content:","}
/* обязательное поле — звёздочка после подписи; для чтения с экрана — aria-required у самого поля */
.req{margin-left:2px;color:var(--ink-3)}

/* выпадающий список */
.sel select{appearance:none;-webkit-appearance:none;height:var(--h-l);padding:0 var(--s10) 0 var(--s5);border:0;
  border-radius:var(--r-pill);cursor:pointer;color:var(--ink);font:400 var(--fs-s)/1 var(--font);letter-spacing:var(--ls-s);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23282828' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right var(--s5) center}

/* сегмент: пункты 44 внутри капсулы 52 */
.seg{display:inline-flex;height:var(--h-l);padding:var(--s1);border-radius:var(--r-pill);background:var(--surface)}
.seg button,.seg a{display:inline-flex;align-items:center;height:var(--h-m);padding:0 var(--s4);border:0;
  border-radius:var(--r-pill);background:none;cursor:pointer;white-space:nowrap;
  font-size:var(--fs-s);letter-spacing:var(--ls-s);color:var(--ink-2);transition:color var(--dur-1) ease}
.seg button:hover,.seg a:hover{color:var(--ink)}
.seg [aria-pressed="true"],.seg [aria-current="page"]{background:var(--solid);color:var(--on-dark)}
/* наведение на выбранный пункт не возвращает тёмный текст: hover выше сильнее на элемент */
.seg [aria-pressed="true"]:hover,.seg [aria-current="page"]:hover{color:var(--on-dark)}

/* переключатель: выключенный трек 3,5:1 к белому — граница читается */
.sw{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:var(--h-l);height:var(--s8);margin:0;
  border-radius:var(--r-pill);background:var(--ink-4);cursor:pointer;transition:background var(--dur-2) ease}
.sw::after{content:"";position:absolute;left:var(--s1);top:var(--s1);width:var(--s6);height:var(--s6);border-radius:var(--r-round);
  background:var(--on-dark);box-shadow:var(--sh-1);transition:transform var(--dur-2) var(--ease)}
.sw:checked{background:var(--green)}
.sw:checked::after{transform:translateX(var(--s5))}
.sw:disabled{opacity:.38;cursor:default}
/* строка переключателя: название и пояснение слева, .sw справа; нажимается вся строка */
.swrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--rule);cursor:pointer}
.swrow b{display:block;font-weight:400;font-size:var(--fs-m);line-height:var(--lh-snug);letter-spacing:var(--ls-m)}
.swrow small{display:block;margin-top:var(--s1);max-width:52ch;font-size:var(--fs-xs);line-height:var(--lh-text);color:var(--ink-2)}
.swrow:has(.sw:disabled){cursor:default}

/* ── формы и списки кабинета: кабинет приюта FO-19…23, дальше PRO-15…17 и админка. Правила — docs/08, «Формы и списки» ── */

/* статус крупнее: карточка «Статус и действия», состояние над результатом */
.st--lg{font-size:var(--fs-m);color:var(--ink)}
/* действие словами, которое сейчас недоступно: «Раньше» у первого снимка */
.lnk:disabled,.lnk[aria-disabled="true"]{opacity:.38;cursor:default;text-decoration-color:transparent}
/* поиск над списком — то же поле, капсулой в ряд с .sel */
.inp--pill{border-radius:var(--r-pill);padding:0 var(--s5)}
/* поле даты: календарь системы, ширина под дату */
.inp--date{max-width:240px}
.inp--date::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}

/* группа формы: заголовок, короткое пояснение, поля друг под другом. Отдельно — белая карточка (профиль);
   внутри редактора .ed__main — раздел общей поверхности, отбитый линией */
.fgs{background:var(--surface);border-radius:var(--r-m);padding:var(--card-pad);scroll-margin-top:calc(var(--hdr) + var(--s5))}
.fgs__t{margin:0;font-weight:400;font-size:var(--fs-xl);line-height:var(--lh-snug);letter-spacing:var(--ls-xl)}
.fgs__p{margin:var(--s1) 0 0;max-width:62ch;font-size:var(--fs-s);line-height:var(--lh-text);color:var(--ink-2)}
.fgs__b{display:flex;flex-direction:column;gap:var(--s5);margin-top:var(--s5)}
/* группа выбора из .pick: подпись — как у поля; ошибка — красной рамкой 2 px у пилюль и текстом .err ниже */
.fs{margin:0;padding:0;border:0;min-width:0}
.fs legend{padding:0;margin:0 0 var(--s2);font-size:var(--fs-s);letter-spacing:var(--ls-s)}
.fs.is-err .pick label{box-shadow:inset 0 0 0 2px var(--err)}

/* строка поля: подпись слева, ввод справа, подсказка и ошибка под вводом — короткие параметры, как в настройках.
   Модификатор к .fld и .fs: снять его — поле вернётся к подписи сверху. Длинный текст в строку не кладут.
   Подпись встаёт над полем на телефоне и в редакторе уже 500 px (контейнерный запрос ниже, у .ed__main) */
.frow,.ro{--frow-l:calc(var(--s16) * 2)}
.fld.frow{display:grid;grid-template-columns:var(--frow-l) minmax(0,1fr);column-gap:var(--s4);align-items:start}
.fld.frow > *{grid-column:2}
.fld.frow > label,.fld.frow > .flab{grid-column:1;grid-row:1;margin:0;padding-top:calc((var(--h-l) - 1.5em) / 2)}
/* у группы выбора подпись — плавающая legend: так она встаёт в колонку подписи и остаётся подписью группы */
.fs.frow::after{content:"";display:block;clear:both}
.fs.frow > legend{float:left;width:var(--frow-l);margin:0;padding-top:calc((var(--h-l) - 1.5em) / 2)}
.fs.frow > :not(legend){margin-left:calc(var(--frow-l) + var(--s4))}

/* список радиокнопок с пояснением — варианты, которые пилюлей не уместить: кому видна запись.
   Кружок 20 в строке касания 44, подпись и строка пояснения под ней. Ошибка — красная рамка кружков и .err ниже */
.radl__it{display:grid;grid-template-columns:var(--s5) minmax(0,1fr);gap:var(--s3);align-items:start;min-height:var(--h-m);padding:var(--s3) 0;cursor:pointer}
.radl__it input{appearance:none;-webkit-appearance:none;width:var(--s5);height:var(--s5);margin:0;border:1px solid var(--ink-4);border-radius:var(--r-round);
  background:var(--surface);cursor:pointer;transition:border-color var(--dur-1) ease,box-shadow var(--dur-1) ease}
.radl__it input:hover{border-color:var(--ink-2)}
.radl__it input:checked{border-color:var(--solid);background:var(--solid);box-shadow:inset 0 0 0 4px var(--surface)}
.radl__it b{display:block;font-weight:400;font-size:var(--fs-m);line-height:var(--lh-snug);letter-spacing:var(--ls-m)}
.radl__it small{display:block;margin-top:2px;font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--ink-3)}
.radl.is-err .radl__it input{border:2px solid var(--err)}

/* замечание фонда и пометка «правка на проверке»: бумага, пиктограмма и слова — в карточке статуса, строке списка, над формой */
.rmk{padding:var(--s3) var(--s4);border-radius:var(--r-s);background:var(--paper);font-size:var(--fs-s);line-height:var(--lh-text);color:var(--ink)}
.rmk__h{display:flex;align-items:flex-start;gap:var(--s2);margin:0}
.rmk__h svg{flex:none;margin-top:calc((1.5em - 16px) / 2)}
.rmk__t{margin:var(--s1) 0 0;color:var(--ink-2)}
/* в строке списка — одной строкой с обрезкой; «Показать полностью» раскрывает на месте, касание добирается до 44 */
.rmk--line .rmk__h > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmk--line.is-open .rmk__h > span{white-space:normal}
.rmk--line .lnk{position:relative;flex:none;min-height:0}
.rmk--line .lnk::after{content:"";position:absolute;inset:calc((100% - var(--h-m)) / 2) 0}
/* пары «название — значение» в узкой карточке: решения фонда, условия */
.kvl{margin:0;padding:0}
.kvl > div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s4);padding:var(--s2) 0;border-top:1px solid var(--rule);
  font-size:var(--fs-s);line-height:var(--lh-ui)}
.kvl dt{color:var(--ink-3)}
.kvl dd{margin:0}

/* сетка фото: миниатюры 1:1 по 4 в ряд (до 559 — по 3), у первой метка «Обложка». Нажатие выбирает снимок, под сеткой его редактор:
   описание для незрячих, обложка и порядок словами, имя и размер файла. Загрузка — полоса на миниатюре; ошибка — красная рамка
   только у своей миниатюры и текст в редакторе. Лимиты — строкой до добавления. .phg--ro — без выбора и действий */
.phg__n{margin:0;font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--ink-3)}
.phg__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin:var(--s3) 0 0;padding:0;list-style:none}
.phg__it{position:relative;margin:0}
.phg__pic{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:var(--r-s);
  overflow:hidden;background:var(--placeholder);color:var(--ink-3);cursor:pointer}
.phg__pic img{width:100%;height:100%;object-fit:cover}
.phg__pic::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.phg__pic[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--solid)}
.phg__it.is-err .phg__pic::after{box-shadow:inset 0 0 0 2px var(--err)}
.phg--ro .phg__pic{cursor:default}
.phg__cov{position:absolute;left:var(--s1);bottom:var(--s1);z-index:1;padding:2px var(--s2);border-radius:var(--r-xs);background:var(--surface);
  font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--ink);pointer-events:none}
.phg__it .pbar{position:absolute;left:var(--s2);right:var(--s2);bottom:var(--s2);margin:0;background:var(--surface)}
.phg__add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);aspect-ratio:1;padding:var(--s2);border-radius:var(--r-s);
  border:1.5px dashed var(--rule-3);cursor:pointer;text-align:center;font-size:var(--fs-s);line-height:var(--lh-ui);color:var(--ink-2);
  transition:border-color var(--dur-1) ease,color var(--dur-1) ease}
.phg__add:hover{border-color:var(--rule-hover);color:var(--ink)}
.phg__add:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.phg__add[aria-disabled="true"]{opacity:.38;cursor:default;pointer-events:none}
.phg.is-err .phg__add{border:2px solid var(--err)}
.phg__ed{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule)}
.phg__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 var(--s3);margin:0 0 var(--s3);font-size:var(--fs-s);line-height:var(--lh-ui)}
.phg__h small{font-size:var(--fs-xs);color:var(--ink-3)}
.phg__ed > .err{margin:0}
.phg__acts{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin-top:var(--s1)}
.pbar{height:var(--s1);margin:var(--s1) 0 var(--s2);border-radius:var(--r-pill);background:var(--rule);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:inherit;background:var(--green)}

/* липкая панель действий формы: белая плашка с тенью у низа окна, пока форма на экране; в конце формы встаёт на место.
   На телефоне — во всю ширину; пока открыта клавиатура, уходит в поток и поле не закрывает (07:308) */
.actbar{position:sticky;bottom:var(--s3);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s3);
  padding:var(--s3);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--sh-2)}
.actbar__st{margin:0 0 0 auto;padding-right:var(--s2);font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--ink-3)}

/* каркас формы — единый редактор: одна белая поверхность с разделами через линию (колонка полей 640), справа липкая служебная
   панель — переходы по разделам, статус, короткая сводка, дата выхода, отметка сохранения, кнопки. Без вложенных карточек и справок.
   До 1023 панель встаёт над формой, а кнопки уходят в .actbar. Только на широком — .ed__wide, только на узком — .ed__narrow */
.ed{display:grid;grid-template-columns:minmax(0,calc(640px + 2 * var(--s8))) clamp(280px,24vw,320px);gap:var(--gap-l);align-items:start}
.ed__main{min-width:0;display:flex;flex-direction:column;gap:var(--s6);padding:var(--s8);border-radius:var(--r-m);background:var(--surface)}
/* контейнер — только от 768: он становится опорой для position:fixed, а на телефоне выбор из списка открывается листом от края окна */
@media (min-width:768px){ .ed__main{container-type:inline-size} }
/* строке поля нужно 128 под подпись и ~350 под ввод: уже — подпись над полем, как на телефоне */
@container (max-width:499px){
  .fld.frow{display:block}
  .fld.frow > label,.fld.frow > .flab{padding-top:0;margin:0 0 var(--s2)}
  .fs.frow > legend{float:none;width:auto;padding-top:0;margin:0 0 var(--s2)}
  .fs.frow > :not(legend){margin-left:0}
  .ro > div{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
}
.ed__main > .errsum{margin:0}
.ed__main .fgs{padding:0;border-radius:0;background:none}
.ed__main .fgs + .fgs{padding-top:var(--s6);border-top:1px solid var(--rule)}
/* панель выше окна прокручивается сама: иначе кнопки внизу недостижимы, пока она липнет */
.ed__side{position:sticky;top:calc(var(--hdr) + var(--s6));max-height:calc(100svh - var(--hdr) - 2 * var(--s6));overflow:auto;
  padding:var(--card-pad);border-radius:var(--r-m);background:var(--surface)}
.ed__toc{display:flex;flex-direction:column;margin:0 0 var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
.ed__toc a{position:relative;display:flex;align-items:center;gap:var(--s2);min-height:var(--h-s);margin:0 calc(-1 * var(--s3));padding:0 var(--s3);border-radius:var(--r-pill);
  font-size:var(--fs-s);letter-spacing:var(--ls-s);color:var(--ink-2);transition:color var(--dur-1) ease,background var(--dur-2) ease}
.ed__toc a:hover{background:var(--paper);color:var(--ink)}
.ed__toc a::after{content:"";position:absolute;inset:calc((var(--h-s) - var(--h-m)) / 2) 0}
.ed__toc svg{flex:none}
/* сбой сохранения: строка у кнопок и в нижней панели — пиктограмма и «Повторить». Поля не помечаются, введённое на месте */
.ed__fail{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);color:var(--ink)}
.ed__fail svg{flex:none;color:var(--err)}
.ed__side > .rmk{margin-top:var(--s4)}
.ed__when{margin:var(--s1) 0 0;font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--ink-3)}
.ed__part{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule)}
.ed__h{margin:0 0 var(--s1);font-weight:400;font-size:var(--fs-s);line-height:var(--lh-ui);letter-spacing:var(--ls-s)}
.ed__part .kvl > div:first-child{border-top:0}
.ed__acts{display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);margin-top:var(--s5)}
.ed__acts .more{align-self:center}
@media (min-width:1024px){ .ed__narrow{display:none} }
@media (max-width:1023px){
  .ed{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .ed__side{position:static;order:-1;max-height:none;overflow:visible}
  .ed__wide,.ed__toc{display:none}
}

/* просмотр без правки: на модерации, запланировано, в архиве. Пары строками, как .frow, значения --ink; длинный текст —
   абзацами, фото — сеткой без действий. Бледных полей и недоступных кнопок нет */
.ro{margin:0}
.ro > div{display:grid;grid-template-columns:var(--frow-l) minmax(0,1fr);gap:var(--s1) var(--s4);align-items:baseline;padding:var(--s3) 0;border-top:1px solid var(--rule)}
.ro > div:first-child{border-top:0;padding-top:0}
.ro dt{font-size:var(--fs-s);line-height:var(--lh-text);color:var(--ink-2)}
.ro dd{margin:0;font-size:var(--fs-m);line-height:var(--lh-text);color:var(--ink)}
.ro__x p{margin:0 0 var(--s3);max-width:66ch;font-size:var(--fs-m);line-height:var(--lh-text)}
.ro__x p:last-child{margin-bottom:0}

/* выбор из своего списка с поиском — животное в обновлении: кнопка с миниатюрой и кличкой открывает поиск и строки
   «миниатюра, кличка». Стрелки ходят по списку, Enter выбирает, Esc закрывает. До 767 список — лист снизу поверх подложки */
.pick-a{position:relative}
.pick-a__btn{display:flex;align-items:center;gap:var(--s3);padding:0 var(--s10) 0 var(--s2);text-align:left;cursor:pointer;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23282828' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right var(--s4) center}
.fld.is-err .pick-a__btn{padding-left:calc(var(--s2) - 1px)}
.pick-a__btn > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-a__ph{color:var(--ink-3)}
.pick-a__pic{display:flex;align-items:center;justify-content:center;flex:none;width:var(--h-s);height:var(--h-s);border-radius:var(--r-xs);overflow:hidden;
  background:var(--placeholder);color:var(--ink-3)}
.pick-a__pic img{width:100%;height:100%;object-fit:cover}
.pick-a__pop{position:absolute;left:0;right:0;top:calc(100% + var(--s1));z-index:30;padding:var(--s2);border-radius:var(--r-m);
  background:var(--surface);box-shadow:var(--sh-2),0 0 0 1px var(--rule)}
.pick-a__pop .tools__q{max-width:none}
.pick-a__list{max-height:288px;margin:var(--s2) 0 0;padding:0;list-style:none;overflow:auto}
.pick-a__it{display:flex;align-items:center;gap:var(--s3);min-height:var(--h-l);padding:var(--s1) var(--s2);border-radius:var(--r-s);cursor:pointer;
  font-size:var(--fs-m);line-height:var(--lh-snug);letter-spacing:var(--ls-m)}
.pick-a__it:hover,.pick-a__it.is-act{background:var(--paper)}
.pick-a__it[aria-selected="true"]{background:var(--paper-2)}
.pick-a__chk{flex:none;width:var(--s5);height:var(--s5);margin-left:auto;border:1px solid var(--ink-4);border-radius:var(--r-xs);background:var(--surface) no-repeat center}
.pick-a__it[aria-selected="true"] .pick-a__chk{border-color:var(--solid);background-color:var(--solid);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1.5 5.2l3 3 6-6.4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pick-a__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--rule);
  font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--ink-3)}
.pick-a__no{margin:0;padding:var(--s3) var(--s2);font-size:var(--fs-s);line-height:var(--lh-ui);color:var(--ink-3)}

/* переключатель организации в верху меню кабинета, когда организаций больше одной: название, город, стрелка.
   В списке — название, город и статус допуска словом с пиктограммой */
.orgsw{position:relative;margin:0 0 var(--s4)}
.orgsw__btn{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:var(--h-l);padding:var(--s2) var(--s3);border:0;border-radius:var(--r-m);
  background:none;box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer;text-align:left;transition:box-shadow var(--dur-2) ease}
.orgsw__btn:hover,.orgsw__btn[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--rule-hover)}
.orgsw__btn > span{flex:1;min-width:0}
.orgsw__btn svg{flex:none;transition:transform var(--dur-2) var(--ease)}
.orgsw__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.orgsw b{display:block;font-weight:400;font-size:var(--fs-m);line-height:var(--lh-snug);letter-spacing:var(--ls-m)}
.orgsw small{display:block;font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--ink-3)}
.orgsw__pop{position:absolute;left:0;right:0;top:calc(100% + var(--s1));z-index:30;margin:0;padding:var(--s1);list-style:none;border-radius:var(--r-m);
  background:var(--surface);box-shadow:var(--sh-2),0 0 0 1px var(--rule)}
.orgsw__it{display:block;min-height:var(--h-m);padding:var(--s2) var(--s3);border-radius:var(--r-s)}
.orgsw__it:hover{background:var(--paper)}
.orgsw__it[aria-current="true"]{background:var(--paper-2)}
.orgsw__it .st{margin-top:var(--s1);font-size:var(--fs-xs)}

/* полоса предпросмотра: во всю ширину окна над публичным шаблоном — режим и версия словами, возврат к редактированию.
   Не выше малой кнопки; меню и шапка кабинета на этой странице скрыты, действия шаблона не работают */
.pvstrip{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--s5);
  min-height:var(--h-m);padding:0 var(--pad);background:var(--solid);color:var(--on-dark);
  font-size:var(--fs-s);line-height:var(--lh-ui);letter-spacing:var(--ls-s)}
.pvstrip p{display:flex;align-items:center;gap:var(--s2);margin:0;padding:var(--s2) 0}
.pvstrip p svg{flex:none}
.pvstrip a{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--h-m);color:var(--on-dark);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--on-dark-line)}
.pvstrip a:hover{text-decoration-color:var(--on-dark)}

/* меню «Ещё» у строки списка: редкие действия и удаление. Открывается нажатием, не наведением; Esc и нажатие вне закрывают,
   фокус возвращается на кнопку. Пункты от 44, «Удалить» последним */
.mnu{position:relative;display:inline-flex}
.mnu__btn{display:inline-flex;align-items:center;gap:var(--s1);height:var(--h-m);padding:0 var(--s3);border:0;border-radius:var(--r-pill);background:none;cursor:pointer;
  white-space:nowrap;font-size:var(--fs-s);letter-spacing:var(--ls-s);color:var(--ink-2);transition:background var(--dur-2) ease,color var(--dur-1) ease}
.mnu__btn:hover,.mnu__btn[aria-expanded="true"]{background:var(--paper);color:var(--ink)}
.mnu__btn svg{transition:transform var(--dur-2) var(--ease)}
.mnu__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mnu__pop{position:absolute;right:0;top:calc(100% + var(--s1));z-index:30;min-width:240px;margin:0;padding:var(--s1);list-style:none;border-radius:var(--r-m);
  background:var(--surface);box-shadow:var(--sh-2),0 0 0 1px var(--rule);text-align:left}
.mnu__it{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:var(--h-m);padding:0 var(--s3);border:0;border-radius:var(--r-s);background:none;cursor:pointer;
  white-space:nowrap;font:inherit;font-size:var(--fs-s);letter-spacing:var(--ls-s);color:var(--ink);text-align:left}
.mnu__it:hover{background:var(--paper)}
.mnu__sep{height:1px;margin:var(--s1) 0;background:var(--rule)}

/* рабочий список: таблица в белой .card, у каждой записи свой <tbody>. Строка — снимок 48 и название, статус словом
   и пиктограммой, поля, действия словами. Замечание фонда — строкой .wl__n под своей, на всю ширину.
   До 1023 запись становится карточкой: подписи полей берутся из data-l */
.wl{width:100%;border-collapse:collapse}
.wl th{padding:var(--s3);font-weight:400;font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--ink-3);text-align:left;white-space:nowrap}
.wl td{padding:var(--s3);border-top:1px solid var(--rule);font-size:var(--fs-s);line-height:var(--lh-ui);vertical-align:middle}
.wl th:first-child,.wl td:first-child{padding-left:0}
.wl th:last-child,.wl td:last-child{padding-right:0}
.wl__o{display:flex;align-items:center;gap:var(--s3);min-width:220px}
.wl__pic{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:var(--r-s);overflow:hidden;
  background:var(--placeholder);color:var(--ink-3)}
.wl__pic img{width:100%;height:100%;object-fit:cover}
.wl__nm b{display:block;font-weight:400;font-size:var(--fs-m);line-height:var(--lh-snug);letter-spacing:var(--ls-m)}
.wl__nm span{display:block;margin-top:2px;font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--ink-3)}
.wl__st{display:flex;flex-direction:column;gap:var(--s1)}
.wl__acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 var(--s2);max-width:260px;margin-left:auto}
.wl__d{white-space:nowrap}
/* «Найдено N из M» над таблицей, когда задан поиск или фильтр: общее число остаётся в заголовке */
.wl__found{margin:var(--s4) 0 var(--s2);font-size:var(--fs-s);line-height:var(--lh-ui);color:var(--ink-2)}
.wl__acts .lnk{gap:var(--s1);white-space:nowrap}
.wl tr.wl__n td{padding-top:0;border-top:0}
.wl__n .rmk{margin-left:calc(48px + var(--s3))}
.wl__more{display:flex;justify-content:center;margin-top:var(--s4)}
/* действия — узкой колонкой по содержимому: ширина уходит названию и статусу */
@media (min-width:1024px){ .wl th:last-child,.wl tr:not(.wl__n) > td:last-child{width:1%} .wl__acts{flex-wrap:nowrap} }
/* замечание одной строкой: без этого строка без переносов задаёт ширину всей таблицы. Ширина — за вычетом сдвига под снимок,
   иначе замечание вылезает за карточку на 48 + s3 */
.wl__n .rmk--line{width:0;min-width:calc(100% - 48px - var(--s3))}
@media (max-width:1023px){
  .wl thead{display:none}
  .wl,.wl tbody,.wl tr,.wl td{display:block;width:100%}
  .wl tbody{padding:var(--s4) 0;border-top:1px solid var(--rule)}
  .wl tbody:first-of-type{border-top:0}
  .wl td{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding:var(--s1) 0;border:0;text-align:right}
  .wl td[data-l]::before{content:attr(data-l);font-size:var(--fs-xs);line-height:var(--lh-ui);color:var(--ink-3);text-align:left}
  .wl td:first-child{justify-content:flex-start;padding-bottom:var(--s3);text-align:left}
  .wl td:last-child{padding-top:var(--s2)}
  .wl tr.wl__n td{padding:var(--s2) 0 0}
  .wl__st{align-items:flex-end}
  .wl__acts{justify-content:flex-start;max-width:none;margin-left:0}
  .wl__acts .mnu__pop{left:0;right:auto}
  .wl__n .rmk{margin-left:0;text-align:left}
  .wl__n .rmk--line{min-width:100%}
}

/* над списком: поиск капсулой, фильтры .sel, «Сбросить». С порядком — две группы .tools__g: поиск и порядок, фильтры и сброс.
   До 767 поиск во всю ширину, фильтры по два в ряд */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.tools__g{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);min-width:0}
.tools__g:first-child{flex:0 1 auto}
.tools__q{position:relative;flex:1 1 260px;max-width:360px}
.tools__q svg{position:absolute;left:var(--s5);top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.tools__q .inp{padding-left:var(--s12)}
.tools__reset{height:var(--h-l);padding:0 var(--s2);border:0;background:none;cursor:pointer;font-size:var(--fs-s);color:var(--ink-2);
  transition:color var(--dur-1) ease}
.tools__reset:hover{color:var(--ink)}
@media (max-width:767px){
  .tools,.tools__g{gap:var(--s2)}
  .tools__g{flex:1 1 100%}
  .tools__q{flex-basis:100%;max-width:none}
  .tools .sel{flex:1 1 40%}
  .tools .sel select{width:100%}
}

/* пустой список, ничего не найдено, нет прав: компактный блок — что случилось, следующий шаг и одно действие */
.nodata{display:grid;grid-template-columns:var(--h-m) minmax(0,1fr);gap:0 var(--s4);align-items:start;max-width:600px;
  padding:var(--s6);border-radius:var(--r-m);background:var(--surface)}
.nodata > *{grid-column:2}
.nodata__i{grid-column:1;grid-row:1 / span 3;display:flex;align-items:center;justify-content:center;width:var(--h-m);height:var(--h-m);border-radius:var(--r-round);
  background:var(--paper);color:var(--ink-2)}
.nodata__t{margin:0;padding-top:calc((var(--h-m) - 1.2em) / 2);font-weight:400;font-size:var(--fs-xl);line-height:var(--lh-snug);letter-spacing:var(--ls-xl)}
.nodata__p{margin:var(--s1) 0 0;max-width:52ch;font-size:var(--fs-s);line-height:var(--lh-text);color:var(--ink-2)}
.nodata .btn{justify-self:start;margin-top:var(--s4)}
/* ошибка загрузки — не пустой список: строка-предупреждение с повтором внутри карточки списка */
.nodata--err{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);max-width:none;padding:0;border-radius:0;background:none}
.nodata--err p{display:flex;align-items:flex-start;gap:var(--s2);flex:1 1 280px;margin:0;font-size:var(--fs-m);line-height:var(--lh-text)}
.nodata--err svg{flex:none;margin-top:calc((1.5em - 16px) / 2);color:var(--err)}
.nodata--err .btn{margin:0}
/* скелет списка: строки той же высоты, что настоящие, без текста. Мерцает медленно; при сниженном движении стоит */
.skel{margin:0;padding:0;list-style:none}
.skel li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s2) var(--s3);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--rule)}
.skel li:first-child{border-top:0}
.skel i{display:block;height:var(--s3);border-radius:var(--r-pill);background:var(--placeholder);
  animation:ds-pulse calc(var(--dur-4) * 2) ease-in-out infinite alternate}
.skel i:first-child{grid-row:span 2;height:48px;border-radius:var(--r-s)}
.skel i + i{width:min(240px,60%)}
.skel i + i + i{width:min(160px,40%);height:var(--s2)}
@keyframes ds-pulse{from{opacity:1}to{opacity:.45}}

@media (max-width:559px){
  .phg__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  .actbar{bottom:0;margin:var(--s3) calc(-1 * var(--pad)) 0;padding:var(--s3) var(--pad) calc(var(--s3) + env(safe-area-inset-bottom));border-radius:0}
  .actbar .btn--fill{flex:1 1 100%}
  .actbar .btn--line{flex:1}
  .actbar__st{display:none}
  .actbar .ed__fail{display:flex;order:-1;flex-basis:100%;margin:0;padding:0}
  body:has(.inp:focus) .actbar{position:static}
  /* поверхность редактора уже, панель внизу — во всю ширину окна и садится на её нижний край */
  .ed__main{padding:var(--s5) var(--s4)}
  .ed__main > .actbar{margin:0 calc(-1 * (var(--pad) + var(--s4))) calc(-1 * var(--s5))}
  .fld.frow{display:block}
  .fld.frow > label,.fld.frow > .flab{padding-top:0;margin:0 0 var(--s2)}
  .fs.frow > legend{float:none;width:auto;padding-top:0;margin:0 0 var(--s2)}
  .fs.frow > :not(legend){margin-left:0}
  .ro > div{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .pick-a.is-open::before{content:"";position:fixed;inset:0;z-index:69;background:var(--scrim)}
  .pick-a__pop{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:70;display:flex;flex-direction:column;max-height:80svh;
    padding:var(--s4) var(--pad) calc(var(--s4) + env(safe-area-inset-bottom));border-radius:var(--r-m) var(--r-m) 0 0}
  .pick-a__list{max-height:none;flex:1}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}