/* ЭКС МР — стили демонстрации.
   Токены утверждены в спринте 0 (ТЗ, 8.2): акцент --teal-700 #1F6F8B.
   Шрифты Golos Text подключаются из fonts.css (base64, собирается tools/embed-fonts.ps1). */

:root {
  --navy-900: #0B1F3A;
  --navy-700: #14365E;
  --navy-500: #2A4E7A;
  --teal-700: #1F6F8B;
  --teal-500: #1F8A9E;
  --teal-300: #4FB0C2;
  --teal-100: #E3F4F6;
  --teal-line: #2BA3B8;
  --success-700: #2E7D4F;
  --success-100: #E5F3EA;
  --warning-700: #B7791F;
  --warning-text: #8A5A12;
  --warning-100: #FBF1DE;
  --danger-700: #B3261E;
  --danger-100: #FBE9E7;
  --orange-600: #D9822B;
  --gray-900: #13233A;
  --gray-600: #5B6B7F;
  --gray-400: #8A97A8;
  --gray-300: #C9D3DE;
  --gray-200: #DDE3EA;
  --gray-150: #E6EBF1;
  --gray-100: #EEF2F6;
  --gray-50: #F4F6F9;
  --white: #FFFFFF;

  --cat-kinesio: #1F6F8B;
  --cat-robot: #3D5A99;
  --cat-physio: #7A5BA6;
  --cat-speech: #2E8B7A;
  --cat-psy: #9A6B3F;
  --cat-ergo: #5E7D2E;
  --cat-care: #6B7A8F;
  --cat-balneo: #2F7FB5;
  --cat-edu: #8A6D1F;

  --font: "Golos Text", "PT Root UI", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;

  --r-card: 12px;
  --r-ctrl: 8px;
  --r-chip: 6px;
  --r-modal: 16px;

  --sh-1: 0 1px 2px rgba(11,31,58,0.06), 0 2px 8px rgba(11,31,58,0.04);
  --sh-2: 0 4px 12px rgba(11,31,58,0.10), 0 12px 32px rgba(11,31,58,0.08);
  --sh-3: 0 16px 48px rgba(11,31,58,0.18);

  --ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);

  --topbar-h: 56px;
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 72px;
  --footer-h: 28px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--gray-50);
  font-family: var(--font);
  color: var(--gray-900);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

button { font-family: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.icon { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }

/* ——— Холст 1600×900 и масштабирование (ТЗ, 11.4) ——— */
#viewport {
  position: fixed; inset: 0;
  background: var(--gray-50);
  overflow: hidden;
  transition: background-color 500ms var(--ease-in);
}
#viewport.is-dark { background: var(--navy-900); }
#stage {
  position: absolute; left: 0; top: 0;
  width: 1600px; height: 900px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--gray-50);
}
#stage.is-dark { background: var(--navy-900); }

/* ——— Каркас экрана ——— */
.topbar {
  position: absolute; left: 0; top: 0; width: 1600px; height: var(--topbar-h);
  background: var(--navy-900); color: var(--white);
  display: flex; align-items: center; gap: 16px; padding: 0 24px; z-index: 20;
}
.topbar__brand { display: flex; align-items: center; gap: 12px; }
.topbar__logo { width: 28px; height: 28px; color: var(--teal-line); }
.topbar__name { font-size: 16px; font-weight: 700; }
.topbar__sep { width: 1px; height: 24px; background: rgba(255,255,255,0.2); }
.topbar__sub { font-size: 13px; color: #AFC3D6; }
.topbar__spacer { flex: 1; }
.topbar__patient {
  display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-radius: var(--r-ctrl);
  background: rgba(255,255,255,0.06);
}
.topbar__patient-name { font-size: 14px; font-weight: 600; }
.topbar__chip { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: var(--r-chip); background: rgba(43,163,184,0.2); color: #9FD3DD; }
.topbar__day { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #C9D6E3; }
.topbar__day button { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: #C9D6E3; display: flex; align-items: center; justify-content: center; }
.topbar__day button:hover { background: rgba(255,255,255,0.1); }
.topbar__date { font-size: 13px; color: #C9D6E3; }
.topbar__btn { position: relative; width: 36px; height: 36px; border: 0; border-radius: var(--r-ctrl); background: transparent; color: var(--white); display: flex; align-items: center; justify-content: center; }
.topbar__btn:hover { background: rgba(255,255,255,0.08); }
.topbar__badge { position: absolute; right: 2px; top: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger-700); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.topbar__role { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; border: 0; border-radius: var(--r-ctrl); background: transparent; color: var(--white); font-size: 13px; }
.topbar__role:hover { background: rgba(255,255,255,0.08); }

.role-menu {
  position: absolute; right: 24px; top: 52px; width: 300px; z-index: 40;
  background: var(--white); border-radius: var(--r-card); box-shadow: var(--sh-2); padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.role-menu button { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-ctrl); background: transparent; color: var(--gray-900); font-size: 14px; text-align: left; }
.role-menu button:hover { background: var(--gray-50); }
.role-menu button.is-active { background: var(--teal-100); font-weight: 600; }

.sidebar {
  position: absolute; left: 0; top: var(--topbar-h); width: var(--sidebar-w); height: calc(900px - var(--topbar-h) - var(--footer-h));
  background: var(--white); border-right: 1px solid var(--gray-200);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; z-index: 10;
  transition: width 250ms var(--ease-in);
}
.sidebar__item {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-ctrl);
  background: transparent; color: var(--gray-900); font-size: 14px; text-align: left; white-space: nowrap; overflow: hidden;
}
.sidebar__item:hover { background: var(--gray-50); }
.sidebar__item.is-active { background: var(--teal-100); color: var(--navy-900); font-weight: 600; box-shadow: inset 3px 0 0 var(--teal-700); }
.sidebar__item .icon { color: var(--gray-600); }
.sidebar__item.is-active .icon { color: var(--teal-700); }
.sidebar__sep { height: 1px; background: var(--gray-100); margin: 8px 4px; flex: none; }
.sidebar__spacer { flex: 1; }
.sidebar__collapse { color: var(--gray-600); }
.is-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
.is-collapsed .sidebar__label { display: none; }

.content {
  position: absolute; left: var(--sidebar-w); top: var(--topbar-h);
  width: calc(1600px - var(--sidebar-w)); height: calc(900px - var(--topbar-h) - var(--footer-h));
  padding: 24px; overflow: hidden;
  transition: left 250ms var(--ease-in), width 250ms var(--ease-in);
}
.is-collapsed .content { left: var(--sidebar-w-collapsed); width: calc(1600px - var(--sidebar-w-collapsed)); }
.no-sidebar .sidebar { display: none; }
.no-sidebar .content { left: 0; width: 1600px; }
.no-chrome .topbar, .no-chrome .sidebar, .no-chrome .footer { display: none; }
.no-chrome .content { left: 0; top: 0; width: 1600px; height: 900px; padding: 0; }
.no-chrome .screen { display: block; height: 900px; overflow: hidden; }

.screen { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 16px; }
.screen.is-entering { animation: eksScreenIn 250ms var(--ease-in) both; }
.screen.is-leaving { animation: eksScreenOut 200ms var(--ease-out) both; }
@keyframes eksScreenIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes eksScreenOut { from { opacity: 1; } to { opacity: 0; } }

.screen-head { display: flex; align-items: flex-end; gap: 16px; flex: none; }
.screen-head__crumbs { font-size: 12px; color: var(--gray-600); margin-bottom: 4px; }
.screen-head__title { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 600; color: var(--navy-900); }
.screen-head__spacer { flex: 1; }

.footer {
  position: absolute; left: 0; bottom: 0; width: 1600px; height: var(--footer-h);
  padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--gray-400); background: var(--white); border-top: 1px solid var(--gray-200); z-index: 10;
}

/* ——— Шапка пациента и вкладки ——— */
.patient-strip {
  height: 76px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-card); box-shadow: var(--sh-1);
}
.patient-strip__name { font-size: 20px; font-weight: 600; color: var(--navy-900); }
.patient-strip__meta { font-size: 13px; color: var(--gray-600); margin-top: 4px; }
.patient-strip__meta b { color: var(--gray-900); font-weight: 500; }
.patient-strip__chips { display: flex; gap: 8px; margin-left: auto; }

.tabs { height: 40px; flex: none; display: flex; gap: 4px; border-bottom: 1px solid var(--gray-200); }
.tabs__item { height: 40px; padding: 0 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--gray-600); font-size: 14px; }
.tabs__item:hover { color: var(--navy-900); }
.tabs__item.is-active { color: var(--navy-900); font-weight: 600; border-bottom-color: var(--teal-700); }

/* ——— Аватары ——— */
.avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--navy-700); flex: none; }

/* ——— Карточки, кнопки, чипы ——— */
.card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-card); box-shadow: var(--sh-1); padding: 20px; }
.card__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--navy-900); }
.card__sub { font-size: 13px; color: var(--gray-600); }

.btn { height: 44px; padding: 0 20px; border-radius: var(--r-ctrl); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color 150ms, transform 100ms; }
.btn:active { transform: scale(0.98); }
.btn--primary { border: 0; background: var(--teal-700); color: var(--white); }
.btn--primary:hover { background: var(--teal-500); }
.btn--secondary { border: 1px solid var(--teal-700); background: var(--white); color: var(--teal-700); }
.btn--secondary:hover { background: var(--teal-100); }
.btn--text { border: 0; background: transparent; color: var(--gray-600); font-weight: 400; }
.btn--text:hover { text-decoration: underline; }
.btn--lg { height: 52px; font-size: 15px; }
.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 10px; border-radius: var(--r-chip); background: var(--gray-50); color: var(--gray-600); white-space: nowrap; }
.chip--teal { background: var(--teal-100); color: var(--navy-700); font-weight: 600; }
.chip--success { background: var(--success-100); color: #1D5A37; font-weight: 600; }
.chip--warning { background: var(--warning-100); color: var(--warning-text); font-weight: 600; }
.chip--danger { background: var(--danger-100); color: var(--danger-700); font-weight: 600; }

/* ——— Каркасные зоны спринта 1 (заменяются экранами в спринтах 2–4) ——— */
.zones { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 24px; }
.zone {
  border: 1.5px dashed var(--gray-300); border-radius: var(--r-card); background: rgba(255,255,255,0.6);
  padding: 16px; display: flex; flex-direction: column; gap: 6px; min-height: 0;
}
.zone__name { font-size: 14px; font-weight: 600; color: var(--navy-700); }
.zone__note { font-size: 12px; color: var(--gray-600); line-height: 1.45; }
.zone__ref { margin-top: auto; font-size: 11px; color: var(--gray-400); }

/* ——— Диалог ——— */
.dialog-backdrop { position: absolute; inset: 0; background: rgba(11,31,58,0.45); z-index: 60; display: flex; align-items: center; justify-content: center; animation: eksFade 300ms ease both; }
.dialog { width: 480px; background: var(--white); border-radius: var(--r-modal); box-shadow: var(--sh-3); padding: 28px; display: flex; flex-direction: column; gap: 20px; animation: eksPop 350ms var(--ease-in) both; }
.dialog__title { margin: 0; font-size: 20px; font-weight: 600; color: var(--navy-900); }
.dialog__text { font-size: 14px; line-height: 1.5; color: var(--gray-900); }
.dialog__actions { display: flex; gap: 12px; justify-content: flex-end; }
@keyframes eksFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eksPop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* ——— S00 Заставка ——— */
.s00 { position: relative; width: 1600px; height: 900px; overflow: hidden; background: var(--navy-900); color: var(--white); }
.s00__lines { position: absolute; left: 0; top: 0; animation: eksDrift 20s ease-in-out infinite; }
@keyframes eksDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-60px); } }
.s00__center { position: absolute; left: 320px; top: 140px; width: 960px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.s00__over { font-size: 15px; font-weight: 500; letter-spacing: 0.08em; color: #8FC9D6; }
.s00__logo { width: 64px; height: 64px; margin-top: 36px; color: var(--teal-line); }
.s00__title { margin: 28px 0 0; font-size: 48px; line-height: 1.15; font-weight: 700; }
.s00__subtitle { margin: 20px 0 0; max-width: 760px; font-size: 20px; line-height: 1.45; color: #C9D6E3; }
.s00__theses { margin-top: 48px; width: 960px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.s00__thesis { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.16); font-size: 16px; line-height: 1.4; color: #E6EDF4; }
.s00__thesis .icon { width: 28px; height: 28px; color: #8FC9D6; }
.s00__modes { margin-top: 48px; display: flex; gap: 24px; }
.s00__mode { width: 300px; height: 112px; padding: 20px 24px; border-radius: var(--r-card); border: 1px solid rgba(255,255,255,0.3); background: transparent; color: var(--white); text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 6px; transition: background-color 150ms; }
.s00__mode:hover { background: rgba(255,255,255,0.08); }
.s00__mode.is-primary { border: 2px solid var(--teal-line); background: var(--teal-700); }
.s00__mode.is-primary:hover { background: var(--teal-500); }
.s00__mode.is-remembered { box-shadow: 0 0 0 2px var(--teal-line); }
.s00__mode-title { font-size: 18px; font-weight: 600; }
.s00__mode-sub { font-size: 13px; color: #AFC3D6; }
.s00__mode.is-primary .s00__mode-sub { color: #D6EEF2; }
.s00__version { margin-top: 24px; display: flex; padding: 4px; border-radius: var(--r-ctrl); background: rgba(255,255,255,0.08); }
.s00__version button { height: 32px; padding: 0 16px; border: 0; border-radius: 6px; background: transparent; color: #AFC3D6; font-size: 13px; }
.s00__version button.is-active { background: rgba(255,255,255,0.16); color: var(--white); font-weight: 600; }
.s00__foot { position: absolute; left: 0; right: 0; bottom: 32px; text-align: center; font-size: 13px; color: #8EA2B8; }
.s00__keys { position: absolute; right: 32px; bottom: 32px; font-size: 12px; color: #8EA2B8; }
.rise { animation: eksRise 600ms var(--ease-in) both; }
@keyframes eksRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ——— Уменьшение движения ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ——— Печать (ТЗ, 11.10) ——— */
@page { size: A4 landscape; margin: 12mm; }
@media print {
  html, body { overflow: visible; background: var(--white); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; animation: none !important; transition: none !important; }
  .topbar, .sidebar, .footer, .presenter, .progress { display: none !important; }
  #viewport { position: static; }
  #stage { position: static; transform: none !important; }
  .content { position: static; width: auto; height: auto; padding: 0; }
}