/* AI LABOR — стили лаборатории.
 * Палитра из стайлбука v1. Шрифт интерфейса Onest — предложение, ждёт подтверждения. */
:root {
  --orange: #FF6B0A;
  --amber: #E89A00;
  --graphite: #2A2D32;
  --cream: #F4F1EA;
  --wall: #F2F4F6;
  --grey: #6B7078;
  --oak: #DDBB8C;
  --paper: #FAF8F3;
  --line: #E1DED6;

  --font-ui: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'DejaVu Sans Mono', 'Liberation Mono', monospace;
  --mtop: 70px;
  --gx: clamp(24px, 3vw, 32px);               /* общий левый и правый отступ шапки и нижней ссылки */
  --gxl: max(var(--gx), env(safe-area-inset-left, 0px));
  --gxr: max(var(--gx), env(safe-area-inset-right, 0px));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--wall);
  color: var(--graphite);
  font-family: var(--font-ui);
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

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

button { font: inherit; color: inherit; }

/* ---------- сцена ---------- */
.stage {
  position: fixed; inset: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--wall);
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}

.wall {
  position: absolute; inset: 0;
  background: var(--wall) url('assets/wall-and-floor.webp') center bottom / cover no-repeat;
}

.world, .layer { position: absolute; inset: 0; pointer-events: none; }
.world { z-index: 1; }

/* В картотеке содержимое плавно уходит под верхнюю панель и нижнюю ссылку. */
.stage[data-state="index"] .world,
.stage[data-state="index"] .cases-layer {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--mtop) - 14px), #000 calc(var(--mtop) + 8px), #000 calc(100% - 78px), transparent calc(100% - 52px));
          mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--mtop) - 14px), #000 calc(var(--mtop) + 8px), #000 calc(100% - 78px), transparent calc(100% - 52px));
}

.cases-layer { z-index: 3; }

/* ---------- кейс ---------- */
.case {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  pointer-events: none;
  will-change: transform;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.case .rot { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }

/* Тень кейса: полупрозрачный размытый прямоугольник формы корпуса внутри узла кейса, под ним.
 * Размытие нарисовано через box-shadow, то есть растеризуется один раз; положение и поворот меняются только
 * через transform, поэтому при движении ничего не пересчитывается. Ядро залито тем же цветом, что и ореол
 * (box-shadow не рисуется внутри собственной рамки), а spread больше радиуса размытия, так что шва нет.
 * Смещение задаётся в мировых координатах (свет сверху-слева), а не в системе повёрнутого кейса.
 * Кейс сверху отбрасывает тень на тот, что под ним. Размеры даны для корпуса 300x225.
 * Один слой на кейс: каждый лишний слой заметно удорожает кадр при 30 кейсах. */
.cs {
  position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform;
  width: 276px; height: 201px; margin: -100.5px 0 0 -138px; border-radius: 11px;
  background: rgba(29, 21, 12, .50); box-shadow: 0 0 14px 12px rgba(29, 21, 12, .50);
}
.case svg {
  position: absolute; display: block; overflow: visible;
  left: calc(var(--offx) * -1); top: calc(var(--offy) * -1);
  pointer-events: none;
}
.case .hit {
  position: absolute; pointer-events: auto; cursor: grab;
  left: calc(var(--offx) * -1); top: calc(var(--offy) * -1);
  width: var(--boxw); height: var(--boxh);
  border-radius: 26px;
  touch-action: none;
}
.case:focus-visible .hit { outline: 3px solid var(--orange); outline-offset: 2px; }
.case.is-dragging .hit { cursor: grabbing; }
.stage:not([data-state="lab"]) .case .hit { cursor: pointer; }
.case.is-hidden, .shadow.is-hidden { visibility: hidden; }

.shadow {
  position: absolute; left: 0; top: 0;
  width: 300px; height: 58px; margin: -29px 0 0 -150px;
  background: radial-gradient(ellipse at center, rgba(30, 20, 10, .86) 0%, rgba(30, 20, 10, .46) 45%, rgba(30, 20, 10, 0) 74%);
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}

.dock-marker {
  position: absolute; left: 0; top: 0;
  border: 2px dashed var(--orange);
  border-radius: 999px;
  opacity: 0; transition: opacity .3s ease;
  will-change: transform;
}
.dock-marker.is-on { opacity: .95; }

/* ---------- заголовки картотеки ---------- */
.index-head {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-weight: 800; font-size: 14px; letter-spacing: .02em;
  color: var(--graphite);
  opacity: 0; transition: opacity .35s ease;
  white-space: nowrap;
}
.index-head::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(42, 45, 50, .16); min-width: 24px; }
.index-head .dot { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(42, 45, 50, .12); }
.stage[data-state="index"] .index-head { opacity: 1; transition-delay: .25s; }

/* ---------- верхняя панель ---------- */
.bar {
  position: absolute; z-index: 6; left: 0; right: 0; top: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: max(14px, env(safe-area-inset-top)) var(--gxr) 8px var(--gxl);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }

.logo {
  font-family: var(--font-mono); font-weight: 400; font-size: min(38px, 8.6vw); letter-spacing: -.01em; line-height: 1;
  color: var(--graphite); white-space: nowrap;
  padding: 6px 0;
}
.logo b { font-weight: 800; }
.logo .lg-o { color: var(--orange); font-weight: 800; }
.logo .lg-a { color: var(--amber); }

.controls { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; justify-content: flex-end; }

/* Режим «Структурируй»: маленький механический тумблер (вид строго спереди) и обычный текст рядом.
 * Состояние определяется положением рычажка, а не цветом: выключено, рычажок смотрит вниз; включено, вверх.
 * Переключение: рычажок проходит через точку (укорачивается до нуля) и вырастает в другую сторону. */
.mode-sw {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 4px 0 0;
  font-family: var(--font-mono); font-weight: 400; font-size: 15px; letter-spacing: 0; white-space: nowrap;
  color: #3d4147;
  transition: color .2s ease;
}
.mode-sw:hover { color: var(--graphite); }
.mode-sw .sw { flex: none; width: 30px; height: 30px; filter: drop-shadow(0 1px 1.6px rgba(48, 36, 24, .34)); transition: transform .12s ease; }
.mode-sw:active .sw { transform: translateY(.5px); }
.mode-sw .lever { transform-origin: 30px 30px; transition: transform .24s cubic-bezier(.34, 1.56, .64, 1); }
.mode-sw[aria-checked="true"] .lever { transform: scaleY(-1); }
.stage[data-state="selected"] .mode-sw { visibility: hidden; }

/* Язык: активный язык буквами, без плашки; по нажатию выпадают остальные. */
.lang { position: relative; }
.lang-btn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  min-height: 44px; min-width: 44px; padding: 0 4px;
  font-family: var(--font-mono); font-weight: 500; font-size: 17px; letter-spacing: .03em; color: var(--graphite);
  text-decoration: underline dotted 1.5px; text-underline-offset: 6px;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { text-decoration-style: solid; text-decoration-color: var(--orange); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 9;
  margin: 0; padding: 6px; list-style: none; min-width: 148px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(42, 45, 50, .18);
}
.lang-menu button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 42px; padding: 0 12px; border-radius: 10px;
  font-size: 15px; font-weight: 500; text-align: left; color: var(--graphite);
}
.lang-menu button:hover { background: rgba(42, 45, 50, .07); }
.lang-menu .code { font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--grey); min-width: 2ch; }

.mode-sw:focus-visible, .lang-btn:focus-visible, .lang-menu button:focus-visible,
.tilt-btn:focus-visible, .card-close:focus-visible, .btn:focus-visible, .foot a:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 2px;
}

.tilt-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px 0 12px;
  background: rgba(250, 248, 243, .92); border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--graphite);
}
.tilt-btn[hidden] { display: none; }
.tilt-btn[aria-pressed="true"] { background: var(--graphite); color: var(--cream); border-color: var(--graphite); }

/* ---------- подпись внизу ---------- */
/* Тихая брендовая строка без плашки. Не переводится. Ссылка только на «Smart Areng» и в покое ничем не отличается от текста. */
.foot {
  position: absolute; z-index: 6; left: var(--gxl); bottom: max(18px, env(safe-area-inset-bottom, 0px));
  margin: 0; pointer-events: none;
  font-family: var(--font-mono); font-weight: 400; font-size: 15px; line-height: 1.4; letter-spacing: 0;
  color: #1f2226;
}
.foot a {
  pointer-events: auto; color: inherit; text-decoration: underline transparent; text-underline-offset: 3px;
  padding: 8px 1px; margin: -8px -1px;                /* увеличенная область нажатия, раскладку не меняет */
  transition: color .2s ease, text-decoration-color .2s ease;
}
.foot a:hover { color: #1f2226; text-decoration-color: currentColor; }

/* ---------- карточка проекта ---------- */
.card {
  position: absolute; z-index: 2; left: 0; top: 0;
  display: grid; grid-template-columns: var(--slot-w, 300px) minmax(0, 1fr); column-gap: 28px; align-items: center;
  padding: 28px 28px 28px 24px;
  background: var(--paper);
  border: 1px solid #E8E5DE; border-radius: 28px;
  box-shadow: 0 22px 60px rgba(42, 45, 50, .16), 0 2px 8px rgba(42, 45, 50, .06);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
  outline: none;
  touch-action: pan-y;
}
.card.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s ease; }

.card-slot { width: var(--slot-w, 300px); height: var(--slot-h, 255px); }

.card-body {
  min-width: 0; max-height: var(--body-max, none); overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding-right: 44px;
  transition: opacity .2s ease;
}
.card-body.is-swapping { opacity: 0; }

.card-cat { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.card-cat .dot { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(42, 45, 50, .12); }
.card-lead { margin: 0; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--graphite); font-weight: 500; }
.card-full { margin: 0; font-size: 16px; line-height: 1.6; color: #444850; }
.card-lead.is-muted, .card-full.is-muted { color: var(--grey); font-weight: 400; }
.card-full:empty, .card-cat:empty { display: none; }
.card-actions { margin-top: 6px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 16px; text-decoration: none; text-align: center;
}
a.btn { background: var(--orange); color: var(--graphite); transition: filter .2s ease; }
a.btn:hover { filter: brightness(1.06); }
.btn.is-disabled { background: transparent; border: 1.5px dashed #B8B5AD; color: var(--grey); font-weight: 500; font-size: 15px; cursor: default; }

.card-close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; z-index: 2;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%; background: rgba(42, 45, 50, .06); color: var(--graphite);
}
.card-close:hover { background: rgba(42, 45, 50, .12); }

/* Узкий экран: вертикальная композиция. */
.card.is-narrow {
  grid-template-columns: minmax(0, 1fr); row-gap: 8px; justify-items: center; align-items: start;
  padding: 20px 20px 22px;
}
.card.is-narrow .card-body { padding-right: 0; width: 100%; }
.card.is-narrow .card-lead { font-size: 18px; }

/* ---------- подсказка и сообщения ---------- */
.tip {
  position: absolute; z-index: 8; left: 0; top: 0; pointer-events: none;
  background: var(--graphite); color: var(--cream);
  padding: 7px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(42, 45, 50, .25);
}
.tip[hidden], .toast[hidden] { display: none; }
.tip b { font-family: var(--font-mono); font-weight: 500; }
.tip span { opacity: .72; margin-left: 8px; }

.toast {
  position: absolute; z-index: 8; left: 50%; bottom: 64px; transform: translateX(-50%);
  background: var(--graphite); color: var(--cream); padding: 10px 16px; border-radius: 12px; font-size: 14px;
}

@media (max-width: 640px) {
  /* Телефон: логотип занимает первую строку, во второй кнопка режима, наклон (если доступен) и язык. */
  .bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 2px 10px; }
  .controls { display: contents; }
  .logo { grid-column: 1 / -1; grid-row: 1; }
  .mode-sw { grid-column: 1; grid-row: 2; justify-self: start; }
  .tilt-btn { grid-column: 2; grid-row: 2; }
  .lang { grid-column: 3; grid-row: 2; justify-self: end; }
}
@media (max-width: 400px) {
  .tilt-btn { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .tilt-btn span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card.is-open, .card-body, .index-head, .dock-marker { transition-duration: .01s; transition-delay: 0s; }
}