/* MovieClipper UI kit · components/shell.css
   ----------------------------------------------------------------------------
   Каркас поверхностей: базовая типографика документа, ширины экранов,
   шапка контента, герой, панель действий, подвал. Это единственный модуль,
   привязанный к ширине: остальные компоненты внутри своей сетки.

   Ширины поверхностей (требование продукта, не украшение):
     .page            1180px — Control Room, Источники (плотные данные)
     .page--narrow     920px — Настройки (формы, чтение)
     .page--mini       520px — Mini App (мобильный клиент)
*/

@import url("motion.css");

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family);
  font-size: var(--type-base);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

img { max-width: 100%; }

/* Утилита приглушённого текста: класс уже использовался в разметке (Студия),
   но не был определён — теперь это единая точка правды. */
.muted { color: var(--muted); }

/* ---- Ширина поверхности ---------------------------------------------------- */

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
}

.page--narrow { max-width: 920px; }

.page--mini {
  max-width: 520px;
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 520px) {
  .page,
  .page--narrow,
  .page--mini { padding: var(--sp-3) var(--sp-3) var(--sp-5); }
}

/* ---- Шапка контента -------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.page-head h1 {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
  margin: var(--sp-1) 0 0;
}

.page-head .lede {
  color: var(--muted);
  font-size: var(--type-sm);
  max-width: 62ch;
  margin: var(--sp-2) 0 0;
}

.page-head-acts {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

@media (max-width: 520px) {
  .page-head-acts { width: 100%; }
  .page-head-acts .btn { width: 100%; }
}

/* ---- Герой (Control Room) --------------------------------------------------- */

.hero { display: flex; flex-direction: column; }

.hero .display-title {
  font-family: var(--font-display);
  font-size: clamp(var(--type-2xl), 5.2vw, var(--type-3xl));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: var(--sp-2) 0 var(--sp-3);
}

.hero .display-sub {
  color: var(--muted);
  font-size: var(--type-md);
  max-width: 58ch;
  margin: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

@media (max-width: 520px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* ---- Панель действий над данными ------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-4) 0 var(--sp-3);
}

.toolbar .searchbar { flex: 1 1 280px; max-width: 460px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-5) 0 var(--sp-3);
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: var(--sp-1) 0 0;
}

.section-head .more {
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--sp-1);
  font-family: var(--font-family);
  font-size: var(--type-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition), transform 120ms ease;
}

.section-head .more:hover {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.section-head .more:active { transform: translateY(1px); }

/* ---- Утилиты раскладки ------------------------------------------------------ */

.stack { display: grid; gap: var(--sp-3); }
.stack--tight { gap: var(--sp-2); }
.stack--loose { gap: var(--sp-4); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

@media (max-width: 720px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: var(--sp-4) 0;
}

/* Монospace-подпись контракта: какие эндпоинты обслуживают блок. */
.endpoint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  word-break: break-word;
}

.endpoint-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.endpoint-list li {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* ---- Подвал ---------------------------------------------------------------- */

.page-foot {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--type-xs);
}

.page-foot code {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: color-mix(in srgb, var(--muted) 80%, var(--text));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Personal studio shell, shared across all product pages. */
:root { --nav-width:192px; }
body[data-app="movieclipper"] .surface-bar {display:none;}
.app-nav {position:fixed; inset:0 auto 0 0; width:var(--nav-width); padding:28px 16px 20px; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:20;}
.app-nav-brand {font:800 20px var(--font-display); color:var(--text); text-decoration:none; padding:0 8px; letter-spacing:-.6px;}
.app-nav-caption {font-size:12px; color:var(--muted); padding:4px 8px 36px;}
.app-nav-links {display:grid; gap:8px;}
.app-nav a[aria-current="page"] {background:var(--accent-soft); color:var(--accent);}
.app-nav-links a {display:flex; align-items:center; gap:12px; color:var(--muted); text-decoration:none; padding:12px; border-radius:8px; font-size:14px; font-weight:600; min-height:48px;}
.nav-symbol {width:22px; text-align:center; font-size:18px; font-weight:500;}
.app-nav-secondary {display:grid; gap:4px; margin-top:auto; padding-top:36px;}
.app-nav-secondary a {color:var(--muted); text-decoration:none; font-size:13px; padding:10px 12px; border-radius:8px; min-height:44px;}
.app-nav-note {font-size:11px; color:var(--muted); padding:8px;}
body[data-app="movieclipper"] .kit-header {margin-left:var(--nav-width); padding:16px 28px; min-height:68px; background:var(--bg); border-bottom:1px solid var(--line);}
body[data-app="movieclipper"] .kit-brand-name {display:none;}
body[data-app="movieclipper"] .kit-brand-sub {font-size:14px; color:var(--muted);}
body[data-app="movieclipper"] .kit-brand img {display:none;}
body[data-app="movieclipper"] .page {margin-left:var(--nav-width); max-width:none; padding:28px 32px 48px;}
body[data-app="movieclipper"] .page--narrow {max-width:1200px;}
body[data-app="movieclipper"] .page-head h1 {font-size:28px; font-weight:700;}
body[data-app="movieclipper"] .page-head {margin-bottom:24px;}
body[data-app="movieclipper"] .card {border-radius:12px;}
body[data-app="movieclipper"] .input, body[data-app="movieclipper"] .select {border-radius:8px; background:var(--bg); min-height:44px; font-size:14px;}
body[data-app="movieclipper"] .btn {border-radius:8px; min-height:44px;}
body[data-app="movieclipper"] .btn-primary {box-shadow:none;}
body[data-app="movieclipper"] .overline, body[data-app="movieclipper"] .page-foot {display:none;}
.mobile-settings {display:none; color:var(--muted); font-size:12px;}
[hidden] {display:none !important;}
@media(max-width:1100px) { :root {--nav-width:164px;} body[data-app="movieclipper"] .page {padding:24px;} .app-nav {padding:24px 10px;} .app-nav-brand {font-size:18px;} }
@media(max-width:900px) { :root {--nav-width:0px;} .app-nav {inset:auto 0 0; width:100%; height:calc(68px + env(safe-area-inset-bottom,0px)); padding:4px 12px env(safe-area-inset-bottom,0px); border-right:0; border-top:1px solid var(--line);} .app-nav-brand,.app-nav-caption,.app-nav-secondary,.app-nav-note {display:none;} .app-nav-links {display:flex; justify-content:space-around;} .app-nav-links a {flex:1; flex-direction:column; gap:0; padding:6px 4px; font-size:11px; min-height:58px;} .nav-symbol {font-size:20px;} body[data-app="movieclipper"] .page {margin-left:0; padding:24px 20px calc(100px + env(safe-area-inset-bottom,0px));} body[data-app="movieclipper"] .kit-header {margin-left:0; padding:12px 20px;} .mobile-settings {display:inline-flex; align-items:center; min-height:44px;} body[data-app="movieclipper"] .kit-brand-name {display:inline;} body[data-app="movieclipper"] .kit-brand-sub {display:none;} }
@media(max-width:520px) {body[data-app="movieclipper"] .page {padding:20px 16px 100px;} body[data-app="movieclipper"] .kit-header {padding:12px 16px; gap:8px;} body[data-app="movieclipper"] .kit-header .right {gap:8px;} body[data-app="movieclipper"] .kit-header .btn {font-size:11px; padding:6px;} body[data-app="movieclipper"] .page-head h1 {font-size:26px;} body[data-app="movieclipper"] .input, body[data-app="movieclipper"] .select {font-size:16px;} }
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none !important; transition:none !important; scroll-behavior:auto !important;}}

/* Personal appearance reaches every surface, including the video workspace. */
body[data-app="movieclipper"] .page {padding-top:var(--sp-5);}
body[data-app="movieclipper"] :is(.clip-player,.file-drop) {border-radius:var(--radius-lg);}
body[data-app="movieclipper"] :is(.clip-tile,.st-job,.source-tabs) {border-radius:var(--radius-md);}
body[data-app="movieclipper"] :is(.source-tabs button,.app-nav-links a) {border-radius:var(--radius-sm);}
body[data-app="movieclipper"] .studio-workspace {gap:var(--sp-5);}
body[data-app="movieclipper"] #studio-new {padding:var(--sp-5);}
body[data-app="movieclipper"] :is(.btn,.icon-btn,.input,.select) {min-height:44px;}
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after {animation:none !important; transition:none !important; scroll-behavior:auto !important;}
html[data-motion="reduce"] :is(.btn,.icon-btn,.source-tabs button):active {transform:none !important;}