/* Компоненты разделов «Главная», «Обсуждения», «Обучение», «Публикации».
   Только токены styles.css (дизайн-система «Графит», см. context/frontend-design.md):
   без скруглений, без стекла и свечений, один синий акцент. */

/* --- Текст публикаций, материалов, позиции Союза, сообщений (как .prose в К1) --- */
.app-prose { color: var(--p-ink); font-size: clamp(16px, 1.2vw, 17px); line-height: 1.75; overflow-wrap: anywhere; }
.app-prose > * + * { margin-top: 1.1em; }
.app-prose h1, .app-prose h2, .app-prose h3, .app-prose h4 { color: var(--ink); line-height: 1.3; margin-top: 2em; }
.app-prose h1, .app-prose h2 { font-size: clamp(21px, 2vw, 25px); font-weight: 400; }
.app-prose h3 { font-size: 18.5px; font-weight: 500; }
.app-prose h4 { font-size: 16px; font-weight: 500; }
.app-prose h1 + *, .app-prose h2 + *, .app-prose h3 + *, .app-prose h4 + * { margin-top: .7em; }
.app-prose a { color: var(--link); text-decoration: underline 1px; text-underline-offset: 3px; }
.app-prose a:hover { color: var(--link-h); }
.app-prose ul, .app-prose ol { padding-left: 1.4em; }
.app-prose ul { list-style: disc; }
.app-prose ol { list-style: decimal; }
.app-prose li + li { margin-top: .4em; }
.app-prose li::marker { color: var(--ink-2); }
.app-prose blockquote { background: var(--bg-2); color: var(--ink); padding: 16px 20px; font-weight: 300; }
.app-prose strong { color: var(--ink); font-weight: 600; }
.app-prose code { font-family: var(--mono); background: var(--bg-2); padding: .1em .35em; font-size: .88em; }
.app-prose img { max-width: 100%; height: auto; margin-block: 1.4em; }
.app-prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2em; }
.app-prose table { border-collapse: collapse; width: 100%; font-size: .9em; line-height: 1.55; border-top: 1px solid var(--ink); }
.app-prose th { text-align: left; vertical-align: bottom; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line-strong);
                color: var(--ink-2); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.app-prose td { vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
.app-prose.compact { font-size: 15px; line-height: 1.6; }
.app-prose.compact > * + * { margin-top: .6em; }

/* --- Метки: вид обсуждения, тип публикации, статусы (квадратные, рамка 1px) --- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line);
        color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.pill-draft { border-color: var(--link); color: var(--link); }
.pill-act   { color: var(--p-ink); }
.pill-topic { }
.pill-warn  { border-color: var(--st-soon); color: var(--st-soon); }
.pill-ok    { border-color: var(--st-ok); color: var(--st-ok); }
.pill-muted { color: var(--ink-2); }

/* --- Главная: входы в разделы и карточки публикаций (по .entry и .card К1) --- */
.entries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.entry { display: grid; align-content: start; gap: 10px; padding: 22px 22px 24px; }
.entry-t { display: flex; justify-content: space-between; gap: 12px; font-size: 17.5px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.entry-t .arr { color: var(--ink-2); font-weight: 300; }
.entry:hover .arr { color: var(--link); transform: translateX(3px); }
.entry-s { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px 24px 22px; }
.card-cover { display: block; height: 170px; margin: -24px -24px 6px; background: var(--bg-2) center / cover no-repeat; }
.card-t { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.card:hover .card-t { color: var(--link-h); }
.card-s { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.card-f { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: auto; padding-top: 14px;
          border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }

/* Главная публикация — широкая плоскость, с обложкой делится пополам */
.lead-card { display: grid; min-width: 0; }
.lead-card.has-cover { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lead-cover { display: block; min-height: 240px; background: var(--bg-2) center / cover no-repeat; }
.lead-in { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); }
.lead-t { color: var(--ink); font-size: clamp(21px, 2.2vw, 28px); font-weight: 400; line-height: 1.25; }
.lead-card:hover .lead-t { color: var(--link-h); }
@media (max-width: 760px) { .lead-card.has-cover { grid-template-columns: minmax(0, 1fr); } }

/* Люди (авторы, эксперты) — как «Почему мы» в К1: линия сверху, без коробок */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 28px; }
.person { display: flex; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); min-width: 0; }
.avatar.person-ava { width: 56px; height: 56px; font-size: 15px; }
.person-n { color: var(--ink); font-size: 16.5px; font-weight: 500; line-height: 1.3; }
.person-o { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; margin-top: 3px; }
.person-c { margin-top: 8px; color: var(--ink-2); }
@media (max-width: 1080px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .people { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* Материал: путь, заголовок, текст 70 знаков и колонка сведений справа (как страница материала К1) */
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; color: var(--ink-2); font-size: 13.5px; }
.crumbs a { color: var(--ink-2); transition: color .2s; }
.crumbs a:hover { color: var(--ink); }
.crumbs span:last-child { color: var(--ink); }
.article-t { max-width: 26ch; line-height: 1.12; color: var(--ink); }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(32px, 5vw, 72px); align-items: start;
                margin-top: clamp(24px, 3vw, 40px); }
.article-body { max-width: 70ch; }
.article-cover { display: block; width: 100%; margin-bottom: 28px; }
.brief { margin-bottom: 32px; padding: 20px 24px; max-width: 70ch; }
.brief p { margin-top: 8px; color: var(--ink); font-size: 17px; line-height: 1.6; }
.article-aside { position: sticky; top: calc(var(--head-h) + var(--safe-top) + 24px); display: grid; gap: 18px;
                 color: var(--ink); font-size: 14.5px; }
.aside-l { margin-bottom: 2px; color: var(--ink-2); font-size: 12.5px; }
.aside-acts { display: grid; gap: 6px; line-height: 1.45; }
.aside-btns { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.sheet-btn i { width: 11px; height: 11px; border: 1px solid currentColor; background: linear-gradient(135deg, currentColor 50%, transparent 50%); }
@media (max-width: 1080px) {
    .article-grid { grid-template-columns: minmax(0, 1fr); }
    .article-aside { position: static; order: -1; display: flex; flex-wrap: wrap; gap: 14px 32px; padding-bottom: 20px;
                     border-bottom: 1px solid var(--line); }
    .aside-btns { padding-top: 0; border-top: 0; flex-basis: 100%; }
}
@media (max-width: 1080px) {
    .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .entries { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .entry { gap: 6px; padding: 16px 18px; }
    .entry-s { display: none; }
}

/* --- Главная: симметричная композиция (вариант 2026-10-14) ---
   Ось — по центру: вступление и кнопки центрированы, разделы — четыре равные плоскости,
   свежие НПА — реестр на всю ширину, ниже три равные колонки одной высоты, у каждой
   нижняя линия на одном уровне — пустая колонка не «проваливается». */
.hero { text-align: center; }
/* Заголовок — две ровные строки на десктопе (balance уже в .caps), абзац — ровные строки по оси */
.hero-title { margin-inline: auto; font-size: clamp(28px, 3.2vw, 46px); }
.hero-lead { max-width: 64ch; margin-inline: auto; text-wrap: balance; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-entries { margin-top: clamp(40px, 5vw, 64px); text-align: left; }
/* Цифры раздела — кикером под описанием, прижаты к низу плоскости: строки на одном уровне */
@media (min-width: 761px) { .hero-entries .entry { grid-template-rows: auto 1fr auto; } } /* ≤760 описания скрыты */
.entry-k { margin-top: 4px; }

.reg-head { padding-block: 0 12px; font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
            color: var(--ink-2); border-bottom-color: var(--line-strong); }
.reg-head span:last-child { text-align: right; }
.reg.rows { border-top: 0; }
.reg-d { display: grid; gap: 2px; color: var(--ink); font-size: 14px; line-height: 1.45; }
.reg-ev { color: var(--ink-2); font-size: 12.5px; }
/* Реквизиты под сутью акта: «Приказ · № 321 · от 22.08.2026» */
.reg-k { display: block; margin-top: 5px; }

/* Тень букв: весь текст главной — лёгкая, капс-заголовки — глубже. Кнопкам не нужна: при
   наведении они заливаются, и тёмная тень под тёмным текстом на светлом смотрится грязью. */
.depth { text-shadow: var(--depth-text); }
.depth .caps { text-shadow: var(--depth-title); }
.depth .btn-line { text-shadow: none; }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.col { display: flex; flex-direction: column; min-width: 0; }
.col-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
            padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
.col-list { flex: 1; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.col-item { display: grid; align-content: start; gap: 6px; padding: 18px 4px; transition: background-color .2s; }
.col-item + .col-item { border-top: 1px solid var(--line); }
a.col-item:hover { background: var(--hover-row); }
.col-t { color: var(--ink); line-height: 1.45; }
a.col-item:hover .col-t { color: var(--link-h); }
.col-s { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.col-empty { display: grid; justify-items: start; padding: 18px 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.col-list .skeleton { margin-top: 18px; }
@media (max-width: 900px) {
    .trio { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
}
@media (max-width: 760px) {
    .reg-head { display: none; }
}

/* Рабочий стол вошедшего (main.home--user, 2026-10-14): весь, с подвалом, — в развёрнутом окне
   FHD. Приветствие мелким кеглем сразу под шапкой, три свежих НПА, колонки ниже — плотнее,
   названия в две строки. Гостевая витрина не меняется. */
.home--user.page-top { padding-top: calc(var(--head-h) + var(--safe-top) + 18px); padding-bottom: 16px; }
.greet { display: grid; justify-items: center; gap: 4px; }
.greet-t { font-size: clamp(24px, 2.2vw, 30px); }
.greet-s { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
/* Часы — ярче даты; ширина цифр одинаковая (.num), поэтому строка по оси не дёргается */
.greet-clock { color: var(--ink); }
.home--user .section { padding-block: 22px 0; }
.home--user .title-2 { font-size: clamp(19px, 1.6vw, 22px); }
.home--user .sec-head { align-items: baseline; margin-bottom: 12px; }
.home--user .sec-head > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.home--user .sec-head p { margin-top: 0; }
.home--user .reg-head { padding-bottom: 8px; }
.home--user .reg .row { padding-block: 9px; }
/* Суть акта — в одну строку, реквизиты под ней: строка не выше прежней (две строки названия),
   иначе с кикером из этапа 2026-10-15 рабочий стол перерастал окно на ~60 px */
.home--user .reg .row-t .clamp-2 { -webkit-line-clamp: 1; }
.home--user .reg-k { margin-top: 3px; }
.home--user .row-t, .home--user .col-t { font-size: 15px; line-height: 1.4; }
.home--user .col-head { align-items: baseline; padding-bottom: 10px; }
.home--user .col-item { gap: 3px; padding-block: 9px; }
.home--user .col-t.clamp-3 { -webkit-line-clamp: 2; }
.home--user .col-s { font-size: 13px; }
.home--user .col-s.clamp-2 { -webkit-line-clamp: 1; }
.home--user .col-empty { padding-block: 12px; font-size: 14.5px; }
.home--user .col-empty .more { margin-top: 8px; }
.home--user .col-list .skeleton { margin-top: 9px; }
@media (max-width: 900px) {
    .home--user .trio { gap: 28px; }
}
/* Блоки рабочего стола — плоскости, как входы в разделы гостевой главной: реестр и колонки
   отделены друг от друга, а заголовки — плотнее обычного .caps и с синей чертой, чтобы не
   сливаться с записями (2026-10-15). Отступы секций и записей ужаты — стол влезает в окно FHD. */
.home--user .blk, .home--user .col { padding: 10px 18px 6px; background: var(--plane-face), var(--plane); box-shadow: var(--shadow); }
.home--user .section { padding-block: 16px 0; }
.home--user .section + .section { padding-top: 18px; }
.home--user .sec-head h2, .home--user .col-head h2 { display: flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: .06em; }
.home--user .sec-head h2::before, .home--user .col-head h2::before { content: ''; flex: none; width: 3px; height: .78em; background: var(--link); }
.home--user .reg .row:last-child, .home--user .col-list { border-bottom: 0; }
.home--user .reg .row { padding-block: 8px; }
.home--user .col-item { padding-block: 6px; }

/* --- Обсуждение: сообщения --- */
.msg { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.msg.own .who::after { content: ' · вы'; color: var(--ink-2); font-weight: 400; }
.msg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; font-size: 13.5px; }
.msg-head .who { color: var(--ink); font-weight: 500; }
.msg-head .when { color: var(--ink-2); }
.msg-quote { border-left: 1px solid var(--line-strong); padding: 2px 0 2px 12px; margin-bottom: 8px;
             font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.msg-quote b { color: var(--p-ink); font-weight: 500; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.msg-actions button:hover { color: var(--link); }
.msg-flash { animation: msgFlash 1.6s ease; }
@keyframes msgFlash { 0%, 40% { background: var(--blue-soft); } 100% { background: transparent; } }

.avatar { width: 32px; height: 32px; flex-shrink: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
          background: var(--line); color: var(--ink); font-size: 12px; font-weight: 500; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.expert-tag { font-size: 11px; padding: 1px 7px; border: 1px solid var(--link); color: var(--link); }

/* Замечание к пункту — структурная карточка */
.proposal { border-left: 2px solid var(--link); padding-left: 16px; }
.proposal dl { display: grid; gap: 8px; }
.proposal dt { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.proposal dd { color: var(--p-ink); font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.vote-btn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line);
            color: var(--ink-2); font-size: 12.5px; transition: border-color .2s, color .2s; }
.vote-btn:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
.vote-btn.on { border-color: var(--link); color: var(--link); }
.vote-btn:disabled { opacity: .55; cursor: default; }

/* Позиция Союза */
.position { padding: 20px 22px; background: var(--plane-face), var(--plane); box-shadow: var(--shadow); border-left: 2px solid var(--link); }

/* Переключатель-сегменты: строка текстовых вкладок с линией под активной */
.seg { display: inline-flex; gap: 22px; border-bottom: 1px solid var(--line); }
.seg button { position: relative; padding: 6px 0 10px; font-size: 14px; color: var(--ink-2); transition: color .2s; }
.seg button:hover { color: var(--ink); }
.seg button.on { color: var(--ink); }
.seg button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--link); }

/* Пустые состояния и загрузка */
.empty { padding: 20px 0; color: var(--ink-2); font-size: 15px; }
.skeleton { background: var(--bg-2); }

/* --- Обучение: тренажёр --- */
.choice { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); text-align: left; transition: border-color .2s; }
.choice:hover { border-color: var(--link); }
.choice-t { color: var(--ink); font-weight: 500; }
.choice-s { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.progress { height: 2px; background: var(--line); }
.progress > div { height: 100%; background: var(--link); transition: width .3s var(--ease); }
.quiz-q { margin-bottom: 20px; color: var(--ink); font-size: clamp(16.5px, 1.6vw, 18.5px); font-weight: 500; line-height: 1.45; }
.opt { width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); text-align: left;
       color: var(--p-ink); font-size: 15px; line-height: 1.45; transition: border-color .2s, color .2s; }
.opt:hover { border-color: var(--line-strong); color: var(--ink); }
.opt-k { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
         border: 1px solid currentColor; font-size: 12px; }
.opt.is-picked { border-color: var(--link); color: var(--ink); }
.opt.is-picked .opt-k { color: var(--link); }
.opt.is-right { border-color: var(--st-ok); color: var(--ink); }
.opt.is-right .opt-k { color: var(--st-ok); }
.opt.is-wrong { border-color: var(--err-line); color: var(--ink); }
.opt.is-wrong .opt-k { color: var(--err); }
.opt.is-dim { color: var(--ink-2); }
.verdict { padding: 14px 18px; background: var(--bg-2); border-left: 2px solid var(--st-ok); }
.verdict.bad { border-left-color: var(--err-line); }
.verdict-t { color: var(--st-ok); font-weight: 500; }
.verdict.bad .verdict-t { color: var(--err); }
.score { color: var(--ink); font-size: clamp(48px, 7vw, 72px); font-weight: 300; line-height: 1; }
.score.good { color: var(--st-ok); }

/* --- Обсуждения --- */
.act-ref { padding: 16px 20px; background: var(--bg-2); border-left: 2px solid var(--link); }
.sum-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; border-top: 1px solid var(--ink); }
.sum-table th { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-strong); text-align: left; vertical-align: bottom;
                color: var(--ink-2); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.sum-table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--p-ink); }
.sum-table tbody tr:hover td { background: var(--hover-row); }
.pick-row { display: block; width: 100%; padding: 10px 4px; text-align: left; color: var(--p-ink); transition: background-color .2s, color .2s; }
.pick-row:hover { background: var(--hover-row); color: var(--ink); }

/* --- Профиль: слева аватар и имя, справа поля --- */
.profile { display: grid; grid-template-columns: 220px minmax(0, 560px); gap: clamp(32px, 6vw, 88px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.profile-main { display: grid; gap: 28px; }
.profile-ava { position: relative; width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; overflow: hidden;
               background: var(--line); color: var(--ink); font-size: 30px; font-weight: 300; cursor: pointer; }
.profile-ava img { width: 100%; height: 100%; object-fit: cover; }
.profile-ava-h { position: absolute; inset: auto 0 0 0; padding: 6px 4px; background: var(--scrim); color: #fff; font-size: 11.5px;
                 opacity: 0; transition: opacity .2s; }
.profile-ava:hover .profile-ava-h, .profile-ava:focus-visible .profile-ava-h { opacity: 1; }
@media (max-width: 760px) { .profile { grid-template-columns: minmax(0, 1fr); } }

/* --- Юридические документы --- */
.crumbs-back { display: inline-block; color: var(--ink-2); font-size: 13.5px; transition: color .2s; }
.crumbs-back:hover { color: var(--ink); }
.legal-text { max-width: 70ch; }