/* ============================================================================
   stl-online.css — бесплатные инструменты формата (frontend/tools/konverter-3mf-v-stl.html,
   frontend/tools/prosmotr-stl-onlayn.html; логика — src/stl-online.js).
   Каркас страницы — шаблон статьи базы знаний (blog/article.css: .kb-read / .article),
   компоненты — ui-kit.css (.bs-dropzone .bs-btn .bs-seg .bs-stats .bs-note .bs-promo .bs-faq).
   Здесь только раскладка инструмента. Цвета — роли tokens.css, литералов нет.

   РАСКЛАДКА: одна колонка --read-max (840) — инструменту нужна ширина под просмотр; абзацы
   текста ниже держат свою меру (--st-measure ≈ 70 знаков), заголовки и блоки — на всю колонку.
   Шапка статьи (.article) → инструмент (вне .article: правила текста статьи — отступы абзацев,
   маркеры списков, подчёркивание ссылок — его не задевают) → предложение площадки и текст (.article).
   ============================================================================ */
.st-page{ --st-measure:680px; }
.st-page.kb-read{ --kb-col:var(--read-max); }
@media (min-width:1200px){
  .st-page.kb-read{ display:block; max-width:calc(var(--kb-col) + 2 * var(--kb-gutter)); }
}
.st-page .article :is(p, ul, ol){ max-width:var(--st-measure); }
.st-page .st-head .lead-p{ margin-bottom:0; }
.st-page .st-body{ margin-top:var(--sp-7); }
.st-page .st-body > .bs-promo:first-child{ margin-top:0; }

/* ── инструмент ─────────────────────────────────────────────────────────── */
.st-tool{ display:flex; flex-direction:column; gap:var(--sp-3); margin-top:var(--sp-6); }
.st-tool [hidden]{ display:none !important; }

/* зона загрузки: в инструменте она главная на экране — выше обычной зоны формы */
.st-drop{ min-height:232px; padding:var(--sp-8) var(--sp-4); }
.st-drop .bs-dropzone__icon{ width:var(--ctl-md); height:var(--ctl-md); }
.st-drop .bs-dropzone__title{ font-size:var(--fs-base); }
.st-coarse{ display:none; }
@media (pointer:coarse){ .st-fine{ display:none; } .st-coarse{ display:inline; } }
.st-busy{ flex-direction:column; gap:var(--sp-3); }
.st-busy__text{ font:600 var(--fs-sm)/var(--lh-tight) var(--font); color:var(--ink); }
.st-busy__bar{ width:min(280px, 80%); }
.st-busy__bar::after{ transition:width var(--dur-slow) var(--ease); }

/* обещание приватности: под зоной и под просмотром, одна строка */
.st-private{ display:flex; align-items:flex-start; gap:var(--sp-2); margin:0;
  font:500 var(--fs-sm)/var(--lh-normal) var(--font); color:var(--ink2); }
.st-private .bs-ico{ flex:none; margin-top:2px; color:var(--ok-text); }

/* ── результат ─────────────────────────────────────────────────────────── */
.st-result{ display:flex; flex-direction:column; gap:var(--sp-3); }
.st-result:not([hidden]){ animation:st-in var(--dur) var(--ease); }   /* модель «проявляется», а не выскакивает */
@keyframes st-in{ from{ opacity:0; } to{ opacity:1; } }
.st-file{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); min-width:0; }
.st-file__id{ display:flex; align-items:center; gap:var(--sp-2); min-width:0; flex:1 1 220px; }
.st-file__id .bs-ico{ flex:none; color:var(--ink2); }
.st-file__name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 var(--fs-sm)/var(--lh-tight) var(--font); color:var(--ink); }
.st-file__size{ flex:none; font:500 var(--fs-xs)/var(--lh-tight) var(--font); color:var(--text-muted); font-variant-numeric:tabular-nums; }
.st-file__acts{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* окно просмотра: светлый фон по токенам, сцена читает --st-* (src/stl-online-engine.js) */
.st-view{
  --st-bg:var(--bg2); --st-ground:var(--bg2); --st-model:var(--accent); --st-wire:var(--accent-strong);
  --st-grid:var(--line-field); --st-grid-strong:var(--border-strong);
  position:relative; height:clamp(260px, 66vw, 420px); overflow:hidden;
  background:var(--st-bg); border:var(--bw) solid var(--line); border-radius:var(--rad-lg);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.st-view.is-dragover{ border-color:var(--accent-strong); box-shadow:var(--focus-ring-soft); }
.st-view__canvas{ position:absolute; inset:0; touch-action:none; cursor:grab; }
.st-view__canvas:active{ cursor:grabbing; }
.st-view__canvas canvas{ display:block; width:100%; height:100%; }
.st-view__bar{ position:absolute; top:var(--sp-3); left:var(--sp-3); right:var(--sp-3);
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-2); pointer-events:none; }
.st-view__bar > *{ pointer-events:auto; }
.st-view__bar > :only-child{ margin-left:auto; }
.st-view .bs-seg, .st-view .bs-btn--secondary{ --bs-raise:var(--shadow-1); }
.st-view.is-off .st-view__bar{ display:none; }
.st-view__off{ display:flex; flex-direction:column; justify-content:center; gap:var(--sp-1); height:100%; margin:0;
  padding:var(--sp-6); text-align:center; font:400 var(--fs-sm)/var(--lh-normal) var(--font); color:var(--ink2); }
.st-view__off b{ color:var(--ink); }
.st-hint{ margin:0; font:400 var(--fs-xs)/var(--lh-normal) var(--font); color:var(--text-muted); }

/* сцена + боковая колонка: на ПК «Скачать STL» и цифры справа от модели — видны без прокрутки;
   на телефоне — столбиком: модель → действие → цифры */
.st-stage{ display:flex; flex-direction:column; gap:var(--sp-3); }
.st-side{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
@media (min-width:900px){
  .st-stage{ display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:var(--sp-4); align-items:start; }
  .st-side .bs-stats{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .st-side .st-acts{ flex-direction:column; align-items:stretch; }
}

/* главное действие + раскрытие «по одному объекту» */
.st-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); }
.st-acts [aria-expanded] .bs-ico:last-child{ transition:transform var(--dur) var(--ease); }
.st-acts [aria-expanded="true"] .bs-ico:last-child{ transform:rotate(180deg); }
.st-meta{ margin:0; font:400 var(--fs-xs)/var(--lh-normal) var(--font); color:var(--text-muted); font-variant-numeric:tabular-nums; }

.st-parts{ margin:0; padding:0; list-style:none; background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--rad-lg); }
.st-part{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); }
.st-part + .st-part{ border-top:var(--bw) solid var(--line); }
.st-part__text{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.st-part__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 var(--fs-sm)/var(--lh-tight) var(--font); color:var(--ink); }
.st-part__meta{ font:400 var(--fs-xs)/var(--lh-tight) var(--font); color:var(--text-muted); font-variant-numeric:tabular-nums; }
.st-part .bs-btn{ flex:none; }

.st-notes{ display:flex; flex-direction:column; gap:var(--sp-2); }
.st-note{ display:flex; align-items:flex-start; gap:var(--sp-2); margin:0; font:400 var(--fs-sm)/var(--lh-normal) var(--font); color:var(--ink2); }
.st-note .bs-ico{ flex:none; margin-top:2px; color:var(--accent-strong); }

@media (max-width:560px){
  .st-drop{ min-height:200px; padding:var(--sp-7) var(--sp-4); }
  .st-acts > .bs-btn--primary{ flex:1 1 100%; }
  .st-acts > .bs-btn--secondary{ flex:1 1 100%; }
}
/* тач: пункты сегмента «Модель / Каркас» — под палец (трек 44), на ПК остаётся плотный 32 */
@media (pointer:coarse){
  .st-view .bs-seg--sm button{ min-height:calc(var(--ctl-md) - 2 * var(--sp-1)); padding:0 var(--sp-4); font-size:var(--fs-sm); }
}
@media (prefers-reduced-motion:reduce){
  .st-view, .st-busy__bar::after, .st-acts [aria-expanded] .bs-ico:last-child{ transition:none; }
  .st-result:not([hidden]){ animation:none; }
}