/* Модуль «Приложения»: витрина, плитки программ портала, плагины, плашка
   Lines Disk, админка витрины. Перенесено из public/styles.css как было
   (24 сентября 2026); подключается только у включённого модуля.

   Порядок важен. Этот файл встаёт в страницу после styles.css, и правило
   отсюда перебивает правило оттуда при той же силе селектора. Поэтому:
   · сетка витрины `.softgrid` несёт свои ступени ширины здесь же, после
     основного правила, — в styles.css они стояли ниже основного и
     остались бы перебитыми;
   · `.softcard` и `.softcard__ver` здесь сразу с тем, что на них
     действовало на деле: радиус из общей шкалы формы и моноширинный кегль
     размерных надписей (styles.css, «Полночь. Лазурь»). Иначе отсюда
     вернулись бы значения, которые там давно перебиты. */


/* ── Наш софт: витрина программ бюро ─────────────────────────────────────── */

/* Плитки приложений портала — по три в ряд, крупнее карточек витрины и без
   кнопок: плитка сама и есть кнопка. Значок слева, имя и строка описания
   справа — как кнопка запуска, а не как карточка каталога. */
/* С 1 октября 2026 (разбор, С3) — ряды с подзаголовками: с 7 октября их
   три — «Программы бюро», «Офисные программы бюро», «Файлы Office · ONLYOFFICE». Колонки — от ширины, а не три навсегда: на 2560
   ряд из шести встаёт в одну строку, а не оставляет полэкрана пустоты.
   Колонки у обоих рядов одни, плитки под плитками. */
.appsec + .appsec { margin-top: var(--s-5); }
.appsec__head { display: flex; align-items: baseline; gap: var(--s-2) var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.appsec__head h2 { font-size: var(--t-lg); margin: 0; }
.appgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--s-4);
}
.apptile {
  display: flex; align-items: center; gap: var(--s-4); min-height: 112px; min-width: 0;
  padding: var(--s-5); text-align: left; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text); font: inherit; cursor: pointer; box-shadow: var(--shadow);
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
/* Наведение — только тенью: плитка не подпрыгивает (разбор 1 октября 2026,
   Н6; правило «Наведение и подсказки») */
.apptile:hover:where([data-hover="mouse"] *) {
  border-color: color-mix(in srgb, var(--soft-color, var(--accent)) 45%, var(--border));
  box-shadow: var(--shadow-md);
}
.apptile:active { box-shadow: var(--shadow-xs); }
/* Свои значки скруглены сами — подложки под ними нет никакой, иначе
   вокруг красного листа Шелеста стоит белая рамка, а у NOPS углы */
.apptile__icon {
  flex: none; width: 64px; height: 64px; border-radius: var(--radius); overflow: hidden;
  display: grid; place-items: center; color: var(--soft-color, var(--accent));
}
.apptile__icon img, .apptile__icon.is-mark svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.apptile__icon.is-letter, .apptile__icon.is-tint {
  background: color-mix(in srgb, var(--soft-color, var(--accent)) 14%, transparent);
}
.apptile__icon.is-letter { font-weight: 700; font-size: var(--t-2xl); line-height: 1; }
.apptile__icon.is-tint svg { width: 34px; height: 34px; }
.apptile__text { min-width: 0; }
/* Название одной строкой: «Презентация · ONLYOFFICE» переносилось, и ряд
   терял общую линию; обрезанное дочитывается подсказкой */
.apptile__name { font-weight: 600; font-size: var(--t-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apptile__desc { font-size: var(--t-sm); color: var(--text-dim); line-height: 1.35; margin-top: var(--s-05); }
/* Телефон — плитка строкой в полпальца: значок меньше, поля уже */
@media (max-width: 560px) {
  .apptile { min-height: 52px; padding: var(--s-2) var(--s-3); gap: var(--s-3); }
  .apptile__icon { width: 36px; height: 36px; border-radius: var(--radius-sm); }
  .apptile__icon.is-letter { font-size: var(--t-lg); }
  .apptile__icon.is-tint svg { width: 22px; height: 22px; }
  .apptile__name { font-size: var(--t-base); }
  .apptile__desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0; }
  .appgrid { gap: var(--s-2); }
}

/* Плашка «скачайте диск» — одной строкой во всю ширину под плитками */
.diskbanner {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6);
  border: none; border-radius: var(--radius-lg); box-shadow: var(--sh-1);
  background: color-mix(in srgb, var(--accent) 7%, var(--solid));
}
.diskbanner__icon { flex: none; width: 48px; height: 48px; }
.diskbanner__text { flex: 1 1 260px; min-width: 0; }
.diskbanner__title { font-weight: 600; font-size: var(--t-md); }

/* ── Плагины: раздел на «Приложениях» и страница плагина ────────────────
   Карточка крупнее плитки приложения: плагинов мало, и каждый — отдельная
   программа со своей страницей, а не кнопка запуска. Значок большой, как
   на странице загрузки, чтобы узнавался; справа «Подробнее» — видно, что
   карточка ведёт дальше, а не скачивает сразу. */
/* С 28 сентября 2026 плагины — своя страница «Ресурсов» (`.pluginsec--page`):
   заголовок у страницы, сетка идёт сразу под ним */
.pluginsec { margin-bottom: var(--s-6); }
.pluginsec--page .plugingrid { margin-top: 0; }
.pluginsec .hblock__head h2 { font-size: var(--t-lg); }
.plugingrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
  gap: var(--s-4); margin-top: var(--s-3);
}
/* Меньше трёх плагинов — карточка строкой во всю ширину (разбор 1 октября
   2026, С4): одна карточка в полстроки оставляла справа пустоту */
.plugingrid--rows { grid-template-columns: minmax(0, 1fr); }
/* Карточка — не ссылка целиком: на ней кнопка «Скачать установщик», а
   ссылка в ссылке не живёт. Ведёт на страницу плагина имя, растянутое
   на всю карточку (::after); кнопка стоит поверх него */
.plugincard {
  position: relative;
  display: flex; align-items: center; gap: var(--s-5); min-height: 128px;
  padding: var(--s-5); text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: border-color var(--fast), box-shadow var(--fast);
}
/* Наведение — только тенью, без подскока (разбор 1 октября 2026, Н6) */
.plugincard:hover:where([data-hover="mouse"] *) {
  border-color: color-mix(in srgb, var(--plugin-color, var(--accent)) 50%, var(--border));
  box-shadow: var(--shadow-md);
}
.plugincard:has(.plugincard__link:active) { box-shadow: var(--shadow-xs); }
.plugincard__link { color: inherit; text-decoration: none; }
.plugincard__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.plugincard__link:focus-visible { outline: none; }
.plugincard:has(.plugincard__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Значок скруглён сам — подложки нет, как у плиток приложений */
.plugincard__icon { flex: none; width: 72px; height: 72px; display: block; }
.plugincard__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.plugincard__name { font-weight: 600; font-size: var(--t-lg); line-height: 1.25; }
/* «(LMRT)» и «бета» переносятся только вместе */
.plugincard__nb { white-space: nowrap; }
.plugincard__desc { font-size: var(--t-sm); color: var(--text-dim); line-height: 1.35; }
.plugincard__meta { font-size: var(--t-xs); color: var(--text-faint); }
.plugincard__acts { flex: none; display: flex; align-items: center; gap: var(--s-4); }
.plugincard__dl { position: relative; z-index: 1; }
.plugincard__go {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-sm); font-weight: 500; color: color-mix(in oklab, var(--plugin-color, var(--accent-fg)) 75%, var(--text));
}
/* Знак «шеврон» смотрит влево — для «дальше» разворачиваем */
.plugincard__go svg { transform: rotate(180deg); }
[data-scheme='dark'] .plugincard__go { color: color-mix(in srgb, var(--plugin-color, var(--accent)) 55%, var(--text)); }
@media (max-width: 560px) {
  .plugincard { gap: var(--s-4); padding: var(--s-4); align-items: flex-start; flex-wrap: wrap; }
  .plugincard__icon { width: 56px; height: 56px; }
  .plugincard__text { flex-basis: calc(100% - 56px - var(--s-4)); }
  /* Кнопка — во всю ширину под текстом; «Подробнее» — лишнее: вся
     карточка и так ведёт на страницу плагина */
  .plugincard__acts { flex: 1 1 100%; }
  .plugincard__dl { flex: 1 1 auto; justify-content: center; }
  .plugincard__go { display: none; }
}

/* Страница плагина: читается сверху вниз, ширина строки — как у статьи */
.pluginpage { max-width: 960px; }
.pluginpage__back {
  display: inline-flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-4);
  font-size: var(--t-sm); color: var(--text-dim); text-decoration: none;
}
.pluginpage__back:hover:where([data-hover="mouse"] *) { color: var(--text); }
.pluginhero {
  display: flex; align-items: flex-start; gap: var(--s-5);
  padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--plugin-color, var(--accent)) 7%, var(--surface));
}
.pluginhero__icon { flex: none; width: 112px; height: 112px; display: block; }
.pluginhero__text { min-width: 0; }
.pluginhero__text h1 { margin: 0; font-size: var(--t-xl); line-height: 1.25; }
.pluginpage__meta { font-size: var(--t-sm); color: var(--text-dim); margin-top: var(--s-1); }
.pluginhero__lead { margin: var(--s-3) 0 0; line-height: 1.5; max-width: 62ch; }
.pluginhero__acts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.pluginhero__plat { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); color: var(--text-dim); }
.pluginpage__h { margin: var(--s-6) 0 var(--s-3); }
/* Бета: предупреждение стоит под шапкой, до «Что умеет», — его должны
   прочитать до кнопки «Скачать», а не найти потом внизу страницы. */
.pluginbeta {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--radius-lg); background: var(--warn-soft);
  line-height: 1.5;
}
.pluginbeta b { color: var(--warn-fg); }
.pluginbadge {
  display: inline-block; margin-left: var(--s-2); padding: 1px var(--s-2);
  border-radius: var(--radius-full); vertical-align: 2px;
  background: var(--warn-soft); color: var(--warn-fg);
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}

.pluginfeat {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  gap: var(--s-4);
}
.pluginfeat__sec {
  padding: var(--s-4) var(--s-5); border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface);
}
.pluginfeat__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.pluginfeat__head h3 { margin: 0; font-size: var(--t-md); }
.pluginfeat__icon { flex: none; display: inline-flex; }
.pluginfeat__icon img { display: block; width: 24px; height: 24px; }
/* Значки ленты Revit — в двух вариантах, как в самом Revit: светлый и тёмный */
.pluginfeat__icon .is-dark { display: none; }
[data-scheme='dark'] .pluginfeat__icon .is-light { display: none; }
[data-scheme='dark'] .pluginfeat__icon .is-dark { display: block; }
.pluginfeat__list, .plugininst__notes { margin: 0; }
.pluginfeat__list dt, .plugininst__notes dt { font-weight: 600; font-size: var(--t-sm); }
.pluginfeat__list dd, .plugininst__notes dd {
  margin: var(--s-05) 0 var(--s-3); font-size: var(--t-sm); color: var(--text-dim); line-height: 1.45;
}
.pluginfeat__list dd:last-child, .plugininst__notes dd:last-child { margin-bottom: 0; }

.plugininst { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.plugininst__steps { margin: 0; padding-left: var(--s-5); line-height: 1.5; }
.plugininst__steps li + li { margin-top: var(--s-2); }
.plugininst__notes {
  padding: var(--s-4) var(--s-5); border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface);
}
.pluginreq { margin: 0; padding-left: var(--s-5); line-height: 1.6; }
.pluginnews { display: grid; gap: var(--s-3); }
.pluginnews__ver { font-weight: 600; }
.pluginnews ul { margin: var(--s-1) 0 0; padding-left: var(--s-5); color: var(--text-dim); }
@media (max-width: 720px) {
  .plugininst { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pluginhero { flex-direction: column; gap: var(--s-4); padding: var(--s-4); }
  .pluginhero__icon { width: 72px; height: 72px; }
  .pluginhero__acts .btn { flex: 1 1 100%; justify-content: center; }
  .pluginfeat__sec, .plugininst__notes { padding: var(--s-4); }
}

/* Для каких систем есть программа — значками справа от кнопок. Словами
   («Браузер», «Windows», «macOS») этот ряд выходил длиннее самих кнопок
   и читался раньше их, хотя отвечает на второй вопрос, а не на первый. */
.softplats { display: inline-flex; gap: var(--s-2); align-items: center; margin-left: auto; }
.softplat {
  display: inline-flex; align-items: center; color: var(--text-faint);
  transition: color var(--fast);
}
/* «Новое» — метка, которую ставят руками */
.softcard__new {
  margin-left: var(--s-2); font-size: var(--t-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ok-fg); background: var(--ok-soft);
  border-radius: var(--radius-sm); padding: 1px var(--s-2);
  vertical-align: .1em;
}

/* Шапка программы в админке «Приложения»: значок, имя, когда проверено,
   стрелки порядка. Имя и отметка ужимаются, стрелки — нет: на телефоне
   «Яндекс.Диск» с «ещё не проверялось» выталкивали «↓» за край экрана. */
.admsoft__head { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
.admsoft__name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.admsoft__head > .note { min-width: 0; }
.admsoft__head > .btn { flex: none; }

.softcheck {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--text-dim); cursor: pointer;
}
/* Значок программы — у строки витрины и у карточки в админке */
.softcard__icon {
  flex: none; border-radius: var(--radius); overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--soft-color, var(--accent)) 12%, transparent);
}
/* contain, а не cover: у скачанных значков поля по краям разные, и обрезка
   съедала бы у одних рамку, у других — часть знака */
.softcard__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Светлая подложка под значком в тёмной теме. Логотипы у своих программ
   тёмные и без фона: в «Ночи» на их месте оставались пустые квадраты.
   Подложка светлая всегда — так знак выглядит одинаково в обеих темах. */
[data-scheme='dark'] .softcard__icon:not(.is-letter):not(.is-mark) {
  background: #f3f5f8;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.softcard__icon.is-letter {
  color: var(--soft-color, var(--accent));
  font-weight: 700; font-size: var(--t-xl); line-height: 1;
}
/* Знак программы рисует свою подложку сам — общая плашка под ним лишняя */
.softcard__icon.is-mark { background: none; }
.softcard__icon.is-mark svg { width: 100%; height: 100%; display: block; }
/* Кегль и цифры — как у размерных надписей (styles.css, «Числа —
   размерные надписи»): там они перебивали `--t-2xs`, стоявший здесь */
.softcard__ver {
  margin-left: var(--s-2); font-family: var(--mono); font-size: var(--t-mono);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  color: var(--text-faint); white-space: nowrap; font-weight: 400;
}

/* ── Витрина «На компьютер» строками (разбор 1 октября 2026, С1) ─────────
   22 программы карточками по 130 точек занимали три экрана. Теперь группа —
   заголовок и лист строк по 48 точек: значок, имя с версией, что делает
   одной строкой, платформы словами, действие справа. Группы встают
   колонками по ширине: на 2560 их три, на 1440 — одна; колонка читается
   сверху вниз, группа не рвётся между колонками. */
.softcols { column-width: 620px; column-gap: var(--s-5); margin-top: var(--s-4); }
.softgroup { break-inside: avoid; padding-bottom: var(--s-5); }
.softgroup__head { display: flex; align-items: baseline; gap: var(--s-1) var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2); }
.softgroup__head h2 { font-size: var(--t-lg); margin: 0; }
.softlist {
  display: flex; flex-direction: column;
  background: var(--solid); border-radius: var(--radius-lg); box-shadow: var(--sh-1);
  overflow: hidden;
}
.softrow {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--s-3);
  min-height: 48px; padding: var(--s-1) var(--s-4);
  transition: background var(--fast);
}
.softrow + .softrow { border-top: 1px solid var(--line); }
.softrow:hover:where([data-hover="mouse"] *) { background: var(--hover); }
.softrow.is-hidden > :not(.softrow__acts) { opacity: .5; }
.softrow .softcard__icon { border-radius: var(--radius-sm); }
.softrow .softcard__icon.is-letter { font-size: var(--t-md); }
.softrow__main { min-width: 0; }
.softrow__name { line-height: 1.3; display: flex; align-items: baseline; gap: var(--s-2); min-width: 0; white-space: nowrap; }
.softrow__title { font-weight: 600; font-size: var(--t-base); overflow: hidden; text-overflow: ellipsis; }
.softrow__name .softcard__ver, .softrow__name .softcard__new { margin-left: 0; }
.softrow__hid { font-size: var(--t-xs); color: var(--text-faint); }
.softrow__desc {
  font-size: var(--t-sm); color: var(--text-dim); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.softrow__plat { font-size: var(--t-xs); color: var(--text-faint); white-space: nowrap; }
.softrow__acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); }
/* Лицензия — тихой меткой на месте кнопки: не действие, а условие */
.softrow__lic { font-size: var(--t-xs); color: var(--text-faint); white-space: nowrap; }
/* Телефон: одна кнопка справа, за край не вылезает */
@media (max-width: 560px) {
  .softcols { margin-top: var(--s-3); }
  .softrow { grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: var(--s-2); padding: var(--s-1) var(--s-3); }
  /* Платформы на телефоне не нужны: ставят не с него */
  .softrow__plat { display: none; }
  /* Одна кнопка: на телефоне ставить нечего, открыть в браузере — можно */
  .softrow__open + .softrow__dl { display: none; }
  .softrow__lic:not(:only-child) { display: none; }
  .softrow__lic { white-space: normal; text-align: right; max-width: 11ch; line-height: 1.3; }
}

/* Кнопки шапки — на средней линии названия, пояснение под обоими
   (разбор 1 октября 2026, Н9) */
.softhead__t { flex: 1 1 auto; }
.softhead__row { display: flex; align-items: center; gap: var(--s-2) var(--s-3); flex-wrap: wrap; min-width: 0; }
.softhead__row > .spacer { flex: 1; }

/* Карточки — сплошными, без рамки (сверка облика, 27 сентября 2026) */
.apptile, .plugincard { border-color: transparent; background: var(--solid); box-shadow: var(--sh-1); }
.apptile:hover:where([data-hover="mouse"] *), .plugincard:hover:where([data-hover="mouse"] *) { border-color: transparent; box-shadow: var(--sh-2); }

/* Гармошка отвечает на наведение: стрелка темнеет, как у прочих
   раскрывашек (сверка экранов, 28 сентября 2026) */
.softfold__sum:hover:where([data-hover="mouse"] *) .softfold__chev { color: var(--ink); }

/* «Скачать лаунчер» — яркой кнопкой над страницами колонки «Софта»
   (владелец, 7 октября 2026: нужен всем, а искали долго). Акцент портала,
   во всю ширину колонки, в две строки: что делает и для какой системы. */
.side__launcher {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--s-3);
  margin: 0 var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); min-height: 56px; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-md); text-align: left; white-space: normal;
}
.side__launcher .ic { flex: none; }
.side__launcher-t { display: flex; flex-direction: column; gap: var(--s-05); min-width: 0; }
.side__launcher-t b { font-size: var(--t-md); font-weight: 600; }
.side__launcher-t small { font-size: var(--t-xs); opacity: .85; }