/* Оболочка прототипа: всё снаружи рамки. Нейтральный тёмный стол, чтобы три мира
   читались на одном фоне. Ничего из этого файла не должно протекать внутрь .phone-screen. */

:root {
  color-scheme: dark;
  --sh-bg: #141416;
  --sh-bg-2: #1c1c1f;
  --sh-line: rgba(255, 255, 255, 0.10);
  --sh-fg: #e8e6e3;
  --sh-fg-2: #9d9a94;
  --sh-accent: #d9c8a0;
  --sh-radius: 10px;
  --phone-w: 390px;
  --phone-h: 844px;
  --phone-radius: 44px;
  --phone-bezel: 10px;
  --status-h: 47px;
  --home-h: 24px;
  --sh-font: "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--sh-bg);
  color: var(--sh-fg);
  font: 14px/1.45 var(--sh-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--sh-accent); color: #111; }
:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }

.proto { min-height: 100dvh; display: flex; flex-direction: column; }

/* ── Панель управления ── */
.proto-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--sh-line);
  background: var(--sh-bg-2);
  position: sticky; top: 0; z-index: 5;
}
.proto-brand { color: var(--sh-fg-2); letter-spacing: 0.01em; margin-right: auto; }
.proto-brand strong { color: var(--sh-fg); font-weight: 600; }

.proto-variants { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--sh-line); border-radius: 999px; background: var(--sh-bg); }
.proto-variant {
  display: inline-flex; align-items: baseline; gap: 6px;
  min-height: 36px; padding: 6px 14px;
  border: 0; border-radius: 999px; background: transparent; color: var(--sh-fg-2);
  font: inherit; cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.proto-variant b { font-weight: 700; color: var(--sh-fg); }
.proto-variant span { font-size: 12px; }
.proto-variant:hover { background: rgba(255, 255, 255, 0.05); color: var(--sh-fg); }
.proto-variant.is-active { background: var(--sh-accent); color: #1a1710; }
.proto-variant.is-active b { color: #1a1710; }

.proto-select { display: inline-flex; align-items: center; gap: 8px; color: var(--sh-fg-2); font-size: 12px; }
.proto-select select {
  min-height: 36px; padding: 6px 30px 6px 10px;
  border: 1px solid var(--sh-line); border-radius: var(--sh-radius); background: var(--sh-bg); color: var(--sh-fg);
  font: inherit; font-size: 13px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239d9a94' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.proto-select select:disabled { opacity: 0.45; cursor: default; }

.proto-compare {
  display: none; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--sh-line); border-radius: var(--sh-radius); background: var(--sh-bg); color: var(--sh-fg);
  font: inherit; cursor: pointer; transition: background-color 160ms ease-out;
}
.proto-compare:hover { background: rgba(255, 255, 255, 0.06); }
.proto-compare.is-active { background: var(--sh-accent); color: #1a1710; border-color: transparent; }
@media (min-width: 1200px) { .proto-compare { display: inline-block; } }

.proto-hint {
  margin: 0; padding: 10px 20px;
  color: var(--sh-fg-2); font-size: 13px;
  border-bottom: 1px solid var(--sh-line);
  background: rgba(217, 200, 160, 0.06);
}

/* ── Сцена с рамками ── */
.proto-stage {
  flex: 1; display: flex; justify-content: center; align-items: flex-start; gap: 32px;
  padding: 28px 20px 40px; overflow-x: auto;
}
.phone-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; }
.phone-caption { color: var(--sh-fg-2); font-size: 12px; letter-spacing: 0.02em; }
.phone-fallback { color: var(--sh-accent); }

.phone {
  position: relative; width: var(--phone-w); height: var(--phone-h);
  border-radius: var(--phone-radius);
  box-shadow:
    0 0 0 var(--phone-bezel) #0b0b0c,
    0 0 0 calc(var(--phone-bezel) + 1px) rgba(255, 255, 255, 0.12),
    0 30px 60px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  background: #000; color: #fff;
}
.phone-status {
  flex: 0 0 var(--status-h); display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 28px 8px 32px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.phone-icons { display: inline-flex; align-items: center; gap: 6px; }
.phone-screen {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  transition: opacity 160ms ease-out;
}
.phone-screen.is-leaving { opacity: 0; }
.phone-screen.is-entering { opacity: 0; transition: none; }
.screen-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
/* Toast внутри рамки (shell-owned, нейтральный): «Link kopiert» */
.phone-toast {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px;
  background: rgba(20, 20, 22, 0.92); color: #fff; font-size: 14px; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6); z-index: 5;
  animation: phone-toast-in 160ms ease-out;
}
@keyframes phone-toast-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.phone-home { flex: 0 0 var(--home-h); display: flex; align-items: center; justify-content: center; }
.phone-home span { width: 134px; height: 5px; border-radius: 3px; background: currentColor; opacity: 0.85; }

.proto-note { display: flex; flex-direction: column; gap: 4px; width: var(--phone-w); color: var(--sh-fg-2); font-size: 12px; }
.proto-note textarea {
  width: 100%; padding: 8px 10px; resize: vertical; min-height: 44px;
  border: 1px solid var(--sh-line); border-radius: var(--sh-radius); background: var(--sh-bg-2); color: var(--sh-fg);
  font: inherit; font-size: 13px; caret-color: var(--sh-accent);
}
.proto-note textarea::placeholder { color: var(--sh-fg-2); opacity: 0.7; }

/* Режим сравнения: три рамки в ряд */
.proto-stage[data-mode="compare"] { justify-content: center; }

/* ── На телефоне рамка не рисуется: экран во весь viewport ── */
@media (max-width: 430px) {
  :root { --phone-radius: 0; --phone-bezel: 0; --status-h: env(safe-area-inset-top, 0px); --home-h: env(safe-area-inset-bottom, 0px); }
  .proto-bar { padding: 8px 10px; gap: 8px; }
  .proto-brand, .proto-select span, .proto-hint, .phone-caption, .proto-note, .proto-compare { display: none; }
  .proto-variant { padding: 6px 10px; }
  .proto-variant span { display: none; }
  /* Экран занимает весь остаток viewport под панелью, какой бы высоты она ни была */
  .proto { height: 100dvh; }
  .proto-bar { position: static; }
  .proto-stage { flex: 1; min-height: 0; flex-direction: column; align-items: stretch; padding: 0; gap: 0; overflow: hidden; }
  .phone-slot { flex: 1; min-height: 0; width: 100%; gap: 0; align-items: stretch; }
  .phone { flex: 1; min-height: 0; width: 100%; height: auto; box-shadow: none; }
  /* Стенд сравнения: нарисованный статус-бар «9:41» и полоса home — бутафория рамки,
     на телефоне она лишняя. */
  .proto[data-chrome="on"] .phone-status,
  .proto[data-chrome="on"] .phone-home { display: none; }
  /* Нижнюю safe-area на телефоне резервирует не рамка, а навигация мира (ADR 0040): пока распорка
     занимала свои 34 px, плавающая пилюля стояла ПОВЕРХ них и висела в 46 px от края экрана.
     Верхняя распорка остаётся — заголовки под часы iOS уезжать не должны. */
  .proto[data-chrome="off"] .phone-home { flex-basis: 0; }
}

/* ── Боевой адрес: приложение без стенда ──
   Панели A/B/C, выбора состояния и заметок здесь нет вовсе (shell.showsPrototypeUi) — их
   не рисует разметка. `.phone-status` остаётся пустой распоркой ровно в высоту верхней safe-area
   и настраивается сама: там, где контент заезжает под системную строку, `env(safe-area-inset-top)`
   даёт свои пиксели, а под непрозрачным статус-баром (ADR 0043 — наш случай на iPhone) он нулевой,
   и распорка схлопывается. Держать её всё равно нужно: айпад, ландшафт и чужой браузер решают иначе. Снизу — наоборот: распорки на телефоне нет (см. медиа выше), нижнюю
   safe-area держит навигация мира, иначе плавающая пилюля висит поверх распорки (ADR 0040).
   На широком экране распорки берут прежние 47/24 px рамки — там safe-area нулевая. */
.proto[data-chrome="off"] .phone-status { padding: 0; }
.proto[data-chrome="off"] .phone-home span { display: none; }

@media (prefers-reduced-motion: reduce) {
  .phone-screen, .proto-variant, .proto-compare { transition: none !important; }
  .phone-toast { animation: none; }
}