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

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


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

/* Плитки приложений портала — по три в ряд, крупнее карточек витрины и без
   кнопок: плитка сама и есть кнопка. Значок слева, имя и строка описания
   справа — как кнопка запуска, а не как карточка каталога. */
.appgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4); margin-bottom: var(--s-5);
}
@media (max-width: 900px) { .appgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .appgrid { grid-template-columns: 1fr; } }
.apptile {
  display: flex; align-items: center; gap: var(--s-4); min-height: 112px;
  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), transform var(--fast), background var(--fast);
}
.apptile:hover {
  border-color: color-mix(in srgb, var(--soft-color, var(--accent)) 45%, var(--border));
  box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.apptile:active { transform: translateY(0); 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; }
.apptile__name { font-weight: 600; font-size: var(--t-lg); }
.apptile__desc { font-size: var(--t-sm); color: var(--text-dim); line-height: 1.35; margin-top: var(--s-05); }

/* Плашка «скачайте диск» — одной строкой во всю ширину под плитками */
.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: 1px solid var(--border); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.diskbanner__icon {
  flex: none; width: 48px; height: 48px; border-radius: var(--radius-full);
  display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.diskbanner__text { flex: 1 1 260px; min-width: 0; }
.diskbanner__title { font-weight: 600; font-size: var(--t-md); }

/* Гармошка со скачиваемым и чужими сервисами: закрыта, пока не спросили */
.softfold { border-top: 1px solid var(--border); padding-top: var(--s-4); }
.softfold__sum {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  list-style: none; cursor: pointer; user-select: none;
}
.softfold__sum::-webkit-details-marker { display: none; }
.softfold__sum h2 { margin: 0; }
.softfold__chev { display: inline-flex; color: var(--text-faint); transform: rotate(-90deg); transition: transform var(--fast); }
.softfold[open] .softfold__chev { transform: rotate(90deg); }

/* ── Плагины: раздел на «Приложениях» и страница плагина ────────────────
   Карточка крупнее плитки приложения: плагинов мало, и каждый — отдельная
   программа со своей страницей, а не кнопка запуска. Значок большой, как
   на странице загрузки, чтобы узнавался; справа «Подробнее» — видно, что
   карточка ведёт дальше, а не скачивает сразу. */
/* Раздел — ровня гармошке «Программы на компьютер» ниже: та же черта сверху
   и тот же кегль заголовка, а не мелкий заголовок блока */
.pluginsec { border-top: 1px solid var(--border); padding-top: var(--s-4); margin-bottom: var(--s-6); }
.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);
}
.plugincard {
  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), transform var(--fast);
}
.plugincard:hover {
  border-color: color-mix(in srgb, var(--plugin-color, var(--accent)) 50%, var(--border));
  box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.plugincard:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
/* Значок скруглён сам — подложки нет, как у плиток приложений */
.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; }
.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__go {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: var(--t-sm); font-weight: 500; color: var(--plugin-color, var(--accent));
}
/* Знак «шеврон» смотрит влево — для «дальше» разворачиваем */
.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; }
  .plugincard__icon { width: 56px; height: 56px; }
  /* На телефоне «Подробнее» — лишняя колонка: вся карточка и так кнопка */
  .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 { 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); }
.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);
  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); }
}

.softgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-3);
  align-items: stretch;
}
/* Для каких систем есть программа — значками справа от кнопок. Словами
   («Браузер», «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:hover .softplat { color: var(--text-dim); }
/* «Новое» — метка, которую ставят руками */
.softcard__new {
  margin-left: var(--s-2); font-size: var(--t-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ok); background: var(--ok-soft);
  border-radius: var(--radius-sm); padding: 1px var(--s-2);
  vertical-align: .1em;
}
/* Лицензия — строкой под кнопками: это не действие, а условие, при котором
   действие имеет смысл. Раньше строка стояла вместо кнопки «Скачать»,
   и бесплатную сборку было не достать. */
.softcard__lic {
  font-size: var(--t-xs); color: var(--text-faint);
  margin-top: var(--s-2); line-height: 1.4;
}

/* Шапка программы в админке «Приложения»: значок, имя, когда проверено,
   стрелки порядка. Имя и отметка ужимаются, стрелки — нет: на телефоне
   «Яндекс.Диск» с «ещё не проверялось» выталкивали «↓» за край экрана. */
.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 {
  background: var(--surface); border: 1px solid var(--border);
  /* Радиус — общей шкалы формы (styles.css, «Одна шкала формы»): там он
     перебивал `--radius-lg`, стоявший здесь, и на деле был таким */
  border-radius: var(--radius); padding: var(--s-4) var(--s-4) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-3);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
  /* Описания у программ разной длины, и низ ряда был рваным: карточки тянутся
     на высоту ряда, кнопки прижимаются к низу */
  height: 100%;
}
.softcard__acts { margin-top: auto; }
.softcard:hover {
  border-color: var(--soft-color, var(--border-strong));
  box-shadow: var(--shadow-md); border-color: var(--border-strong);
}
.softcard.is-hidden { opacity: .5; }
/* Значок держится верха: описания у программ разной длины, и значок,
   выровненный по центру, гулял по карточке вверх-вниз от соседа к соседу */
.softcard__head { display: flex; gap: var(--s-3); align-items: flex-start; }
.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; }
.softcard__name { font-weight: 600; font-size: var(--t-md); }
.softcard__desc {
  font-size: var(--t-sm); color: var(--text-dim); margin-top: var(--s-05); line-height: 1.35;
}
.softcard__acts { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.softcard__acts .spacer { flex: 1 1 auto; }
/* Кегль и цифры — как у размерных надписей (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;
}

/* Ступени ширины сетки витрины — после основного правила (см. шапку) */
@media (max-width: 1100px) {
  .softgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 760px) {
  .softgrid { grid-template-columns: 1fr; }
}