/* Экраны S13–S17 (спринт 4). Только токены styles.css; префиксы .s13- … .s17-.
   Общий приём: анимации входа — CSS с задержками; класс .is-static на корне экрана
   мгновенно доводит их до финального состояния (пропуск анимаций, печать). */

.s13.is-static *, .s14.is-static *, .s15.is-static *, .s16.is-static *, .s17.is-static * {
  animation-delay: 0s !important; animation-duration: 1ms !important;
}

@keyframes scRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes scFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scPop { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes scGrowY { from { transform: scaleY(0); } to { transform: none; } }
@keyframes scGrowX { from { transform: scaleX(0); } to { transform: none; } }
@keyframes scDash { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* =====================================================================
   S13. Домашний этап
   ===================================================================== */
.s13 { gap: 16px; }
.s13-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); gap: 24px; }
.s13-col-anim { animation: scRise 500ms var(--ease-in) both; }
.s13-doctor { animation-delay: 100ms; }
.s13-outcome { animation-delay: 200ms; }

/* — Панель врача — */
.s13-doctor { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.s13-doctor__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.s13-doctor__head .card__sub { margin-top: 4px; }
.s13-doctor__spacer { flex: 1; }
.s13-big { padding: 16px; border-radius: var(--r-ctrl); background: var(--gray-50); }
.s13-big__label { font-size: 13px; color: var(--gray-600); }
.s13-big__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 6px; }
.s13-big__value { display: flex; align-items: baseline; gap: 4px; }
.s13-big__num { font-size: 48px; line-height: 1; font-weight: 700; color: var(--navy-900); }
.s13-big__unit { font-size: 20px; font-weight: 600; color: var(--gray-600); }
.s13-days { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.s13-days__bar { width: 9px; border-radius: 3px 3px 0 0; background: var(--teal-700); transform-origin: bottom; animation: scGrowY 500ms var(--ease-in) both; }
.s13-days__bar.is-low { background: var(--teal-300); }
.s13-mids { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s13-mid { padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: var(--r-ctrl); }
.s13-mid__label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-600); line-height: 1.3; min-height: 32px; }
.s13-mid__label .icon { color: var(--teal-700); }
.s13-mid__value { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.s13-mid__num { font-size: 32px; line-height: 1; font-weight: 600; color: var(--navy-900); }
.s13-mid__unit { font-size: 12px; color: var(--gray-600); }
.s13-events__title { font-size: 13px; font-weight: 600; color: var(--navy-700); margin-bottom: 8px; }
.s13-events__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.s13-event { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; font-size: 14px; }
.s13-event__icon { width: 28px; height: 28px; border-radius: 50%; background: var(--teal-100); color: var(--teal-700); display: flex; align-items: center; justify-content: center; }
.s13-event__when { font-size: 13px; color: var(--gray-600); }
.s13-dfeed-box:empty { display: none; }
.s13-dfeed { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-ctrl); background: var(--teal-100); color: var(--navy-900); font-size: 13px; line-height: 1.45; animation: scRise 400ms var(--ease-in) both; }
.s13-dfeed__icon { color: var(--teal-700); flex: none; margin-top: 1px; }
.s13-adjust { width: 100%; }
.s13-adjust-result { display: none; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--success-700); padding: 10px 12px; border-radius: var(--r-ctrl); background: var(--success-100); }
.s13-adjust-result.is-shown { display: flex; animation: scRise 300ms var(--ease-in) both; }

/* — Телефон 360×740 — */
.s13-phone-slot { position: relative; min-height: 0; display: flex; justify-content: center; overflow: hidden; }
.s13-phone {
  --s13-scale: 1;
  position: absolute; top: 0; left: 0; width: 360px; height: 740px;
  border: 10px solid var(--navy-900); border-radius: 44px; background: var(--white);
  box-shadow: var(--sh-2); overflow: hidden;
  transform-origin: 50% 0; transform: scale(var(--s13-scale));
  animation: s13PhoneUp 500ms var(--ease-in) both;
}
@keyframes s13PhoneUp { from { opacity: 0; transform: translateY(40px) scale(var(--s13-scale)); } to { opacity: 1; transform: scale(var(--s13-scale)); } }
.s13-phone__notch { position: absolute; top: 0; left: 50%; width: 120px; height: 24px; margin-left: -60px; border-radius: 0 0 14px 14px; background: var(--navy-900); z-index: 2; }
.s13-phone__screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.s13-pview { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 34px 16px 0; gap: 10px; animation: scFade 250ms ease both; }
.s13-phead__hello { font-size: 17px; font-weight: 700; color: var(--navy-900); line-height: 1.3; }
.s13-phead__date { font-size: 13px; color: var(--gray-600); margin-top: 2px; }
.s13-ringrow { display: flex; align-items: center; gap: 16px; }
.s13-ring { position: relative; width: 140px; height: 140px; flex: none; }
.s13-ring__svg { display: block; }
.s13-ring__track { fill: none; stroke: var(--gray-150); stroke-width: 12; }
.s13-ring__arc { fill: none; stroke: var(--success-700); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 600ms var(--ease-in); }
.s13-ring__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: var(--navy-900); }
.s13-ringrow__label { font-size: 15px; font-weight: 600; color: var(--navy-900); }
.s13-ringrow__hint { font-size: 13px; color: var(--gray-600); margin-top: 4px; line-height: 1.4; }
.s13-plan__title { font-size: 15px; font-weight: 600; color: var(--navy-900); margin-bottom: 8px; }
.s13-plan__list { display: flex; flex-direction: column; gap: 6px; }
.s13-pop { animation: scRise 400ms var(--ease-in) both; }
.s13-card {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 10px;
  border: 1px solid var(--gray-200); border-radius: var(--r-card); background: var(--white); text-align: left; color: var(--gray-900);
  transition: background-color 200ms, border-color 200ms;
}
.s13-card:hover { border-color: var(--teal-300); }
.s13-card__status { position: relative; width: 36px; height: 36px; flex: none; }
.s13-card__pending, .s13-card__check { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: opacity 200ms, transform 250ms var(--ease-in); }
.s13-card__pending { background: var(--teal-100); color: var(--teal-700); }
.s13-card__check { color: var(--success-700); opacity: 0; transform: scale(0.6); }
.s13-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.s13-card__title { font-size: 15px; font-weight: 600; line-height: 1.25; }
.s13-card__meta { font-size: 13px; color: var(--gray-600); }
.s13-card__start { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: var(--r-ctrl); background: var(--teal-700); color: var(--white); font-size: 13px; font-weight: 600; flex: none; }
.s13-card__done-label { display: none; font-size: 12px; font-weight: 600; color: var(--success-700); flex: none; }
.s13-card.is-done { background: var(--success-100); border-color: transparent; }
.s13-card.is-done .s13-card__pending { opacity: 0; transform: scale(0.6); }
.s13-card.is-done .s13-card__check { opacity: 1; transform: none; }
.s13-card.is-done .s13-card__title { color: var(--gray-600); }
.s13-card.is-done .s13-card__meta { color: var(--gray-400); text-decoration: line-through; }
.s13-card.is-done .s13-card__start { display: none; }
.s13-card.is-done .s13-card__done-label { display: block; }
.s13-steps { display: flex; align-items: center; gap: 8px; }
.s13-steps__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--gray-150); overflow: hidden; }
.s13-steps__fill { display: block; height: 100%; background: var(--teal-700); transform-origin: left; transition: transform 900ms var(--ease-in); }
.s13-card.is-done .s13-steps__fill { background: var(--success-700); }
.s13-steps__value { font-size: 12px; color: var(--gray-600); white-space: nowrap; }
.s13-feel-btn {
  height: 48px; margin-top: auto; border: 0; border-radius: var(--r-card); background: var(--teal-700); color: var(--white);
  font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; flex: none;
}
.s13-feel-btn:hover { background: var(--teal-500); }
.s13-pnav { margin: 0 -16px; height: 60px; flex: none; border-top: 1px solid var(--gray-200); display: grid; grid-template-columns: repeat(4, 1fr); background: var(--white); }
.s13-pnav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--gray-400); }
.s13-pnav__item.is-active { color: var(--teal-700); font-weight: 600; }

/* Обратная связь */
.s13-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 8px 0 0; border: 0; background: transparent; color: var(--teal-700); font-size: 15px; font-weight: 600; }
.s13-fb__title { font-size: 22px; font-weight: 700; color: var(--navy-900); line-height: 1.25; }
.s13-fb__sub { font-size: 14px; color: var(--gray-600); margin-top: -4px; }
.s13-scores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.s13-score { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0; color: var(--gray-900); }
.s13-score__num { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--gray-300); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; transition: background-color 150ms, border-color 150ms, color 150ms; }
.s13-score__word { font-size: 12px; color: var(--gray-600); min-height: 16px; }
.s13-score:hover .s13-score__num { border-color: var(--teal-500); }
.s13-score.is-active .s13-score__num { background: var(--teal-700); border-color: var(--teal-700); color: var(--white); }
.s13-fb__label { font-size: 15px; font-weight: 600; color: var(--navy-900); margin-top: 12px; }
.s13-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s13-chip { height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-900); font-size: 15px; }
.s13-chip.is-active { background: var(--teal-100); border-color: var(--teal-700); color: var(--navy-900); font-weight: 600; }
.s13-fb__spacer { flex: 1; }
.s13-send { height: 52px; border: 0; border-radius: var(--r-card); background: var(--teal-700); color: var(--white); font-size: 16px; font-weight: 600; flex: none; }
.s13-send:disabled { background: var(--gray-300); cursor: default; }
.s13-thanks { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 0 24px; animation: scPop 400ms var(--ease-in) both; }
.s13-thanks__icon { color: var(--success-700); }
.s13-thanks__text { font-size: 20px; font-weight: 600; color: var(--navy-900); line-height: 1.35; }

/* — Контроль результата — */
.s13-outcome { display: flex; flex-direction: column; min-height: 0; }
.s13-outcome .card__sub { margin-top: 4px; }
.s13-tl { position: relative; list-style: none; margin: 20px 0 0; padding: 0 0 0 36px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.s13-tl__line { position: absolute; left: 11px; top: 10px; bottom: 34px; width: 2px; background: var(--gray-150); }
.s13-tl__fill { position: absolute; inset: 0; background: var(--teal-700); transform-origin: top; animation: scGrowY 1200ms var(--ease-move) both; }
.s13-tl__item { position: relative; }
.s13-tl__dot {
  position: absolute; left: -32px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal-700); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--teal-700);
  animation: s13Dot 300ms var(--ease-in) both;
}
.s13-tl__item.is-work .s13-tl__dot { background: var(--success-700); box-shadow: 0 0 0 2px var(--success-700); }
@keyframes s13Dot { from { background: var(--gray-300); box-shadow: 0 0 0 2px var(--gray-300); transform: scale(0.7); } }
.s13-tl__content { animation: scFade 400ms ease both; }
.s13-tl__head { display: flex; align-items: baseline; gap: 8px; }
.s13-tl__label { font-size: 15px; font-weight: 600; color: var(--navy-900); }
.s13-tl__date { font-size: 13px; color: var(--gray-600); }
.s13-tl__text { font-size: 13px; color: var(--gray-900); margin-top: 2px; line-height: 1.4; }
.s13-metrics { display: grid; grid-template-columns: repeat(5, auto); justify-content: start; gap: 4px 14px; margin-top: 6px; }
.s13-metric__value { font-size: 22px; font-weight: 700; color: var(--navy-900); line-height: 1.1; }
.s13-metric__name { font-size: 11px; color: var(--gray-600); }
.s13-work {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 14px 16px; border-radius: var(--r-card);
  background: var(--success-100); color: #1D5A37; animation: scPop 500ms var(--ease-in) both;
}
.s13-work__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--success-700); color: var(--white); display: flex; align-items: center; justify-content: center; flex: none; }
.s13-work__title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.s13-work__sub { font-size: 12px; margin-top: 2px; }

/* =====================================================================
   S14. Аналитика отделения
   ===================================================================== */
.s14 { gap: 16px; }
.s14-seg, .s15-seg { display: flex; padding: 3px; border-radius: var(--r-ctrl); background: var(--white); border: 1px solid var(--gray-200); }
.s14-seg__btn, .s15-seg__btn { height: 36px; padding: 0 16px; border: 0; border-radius: 6px; background: transparent; color: var(--gray-600); font-size: 14px; }
.s14-seg__btn:hover, .s15-seg__btn:hover { color: var(--navy-900); }
.s14-seg__btn.is-active, .s15-seg__btn.is-active { background: var(--teal-700); color: var(--white); font-weight: 600; }
.s14-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 24px; }
.s14-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; height: 140px; flex: none; }
.s14-kpi {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; text-align: left; font: inherit; color: inherit;
  animation: scRise 500ms var(--ease-in) both; transition: border-color 150ms, box-shadow 150ms;
}
.s14-kpi:nth-child(2) { animation-delay: 60ms; } .s14-kpi:nth-child(3) { animation-delay: 120ms; } .s14-kpi:nth-child(4) { animation-delay: 180ms; }
.s14-kpi:hover { border-color: var(--teal-300); box-shadow: var(--sh-2); }
.s14-kpi__label { font-size: 13px; color: var(--gray-600); line-height: 1.3; min-height: 34px; }
.s14-kpi__values { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.s14-kpi__before { font-size: 20px; color: var(--gray-400); }
.s14-kpi__arrow { font-size: 18px; color: var(--gray-400); }
.s14-kpi__after { font-size: 40px; line-height: 1.1; font-weight: 600; color: var(--navy-900); }
.s14-kpi__foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; }
.s14-kpi__hint { font-size: 11px; color: var(--gray-400); }
.s14-middle { flex: 1; min-height: 0; display: grid; grid-template-columns: 7fr 5fr; gap: 24px; }
.s14-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.s14-equip, .s14-quality { min-height: 0; overflow: hidden; animation: scRise 500ms var(--ease-in) 150ms both; }
.s14-equip .ch-bars { max-width: 100%; gap: 2px; }
.s14-equip .ch-bars > .ch-legend { margin-bottom: 4px; }
.s14-equip .ch-bars__row { padding: 3px 8px; }
.s14-equip .ch-bars__label { font-size: 12px; line-height: 1.25; white-space: nowrap; }
.s14-equip .ch-bars__label > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.s14-equip .ch-card-head, .s14-equip .s14-card-head { margin-bottom: 8px; }
.s14-equip .ch-bars__row.is-hl { background: var(--teal-100); border-radius: var(--r-ctrl); }
.s14-quality { animation-delay: 220ms; display: flex; flex-direction: column; }
.s14-q { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; flex: 1; justify-content: space-between; }
.s14-q__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--gray-100); }
.s14-q__row:last-child { border-bottom: 0; }
.s14-q__label { font-size: 13px; color: var(--gray-900); line-height: 1.3; }
.s14-q__note { font-size: 12px; color: var(--gray-600); margin-top: 2px; }
.s14-q__value { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.s14-q__before { font-size: 14px; color: var(--gray-400); }
.s14-q__after { font-size: 22px; font-weight: 600; color: var(--navy-900); }
.s14-rise { animation: scRise 400ms var(--ease-in) both; }
.s14-profiles { height: 180px; flex: none; padding: 16px 20px; animation: scRise 500ms var(--ease-in) 300ms both; }
.s14-profiles .s14-card-head { margin-bottom: 10px; }
.s14-prof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.s14-prof__item { padding: 12px 16px; border-radius: var(--r-ctrl); background: var(--gray-50); }
.s14-prof__name { font-size: 14px; font-weight: 600; color: var(--navy-700); }
.s14-prof__metrics { display: flex; gap: 24px; margin-top: 6px; }
.s14-prof__value { font-size: 32px; line-height: 1.05; font-weight: 600; color: var(--navy-900); }
.s14-prof__value--sec { color: var(--teal-700); }
.s14-prof__unit { font-size: 18px; color: var(--gray-600); font-weight: 500; }
.s14-prof__label { font-size: 12px; color: var(--gray-600); margin-top: 2px; }
.s14-prof__bar { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--gray-150); overflow: hidden; }
.s14-prof__bar span { display: block; height: 100%; background: var(--teal-700); transform-origin: left; }
.s14-modal { width: 984px; background: var(--white); border-radius: var(--r-modal); box-shadow: var(--sh-3); padding: 28px 32px; display: flex; flex-direction: column; gap: 16px; animation: eksPop 350ms var(--ease-in) both; }
.s14-modal__head { display: flex; align-items: center; justify-content: space-between; }
.s14-modal__close { width: 40px; height: 40px; border: 0; border-radius: var(--r-ctrl); background: transparent; color: var(--gray-600); display: flex; align-items: center; justify-content: center; }
.s14-modal__close:hover { background: var(--gray-50); }
.s14-modal__values { display: flex; align-items: baseline; gap: 10px; }
.s14-modal__after { font-size: 40px; font-weight: 600; color: var(--navy-900); }
.s14-modal__period { margin-left: 12px; font-size: 13px; color: var(--gray-600); }

/* =====================================================================
   S15. Сводный дашборд
   ===================================================================== */
.s15 { gap: 16px; }
.s15-model { flex: none; }
.s15-iconbtn { width: 44px; height: 44px; border-radius: var(--r-ctrl); border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-900); display: flex; align-items: center; justify-content: center; }
.s15-iconbtn:hover { background: var(--teal-100); color: var(--teal-700); border-color: var(--teal-700); }
.s15-printyear { display: none; }
.s15-head { align-items: center; }
.s15-head > div:first-child { flex: none; }
.s15-head .screen-head__title { font-size: 24px; white-space: nowrap; }
.s15-top { display: grid; grid-template-columns: 872px minmax(0, 1fr); gap: 24px; height: 428px; flex: none; }
.s15-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.s15-map { position: relative; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; min-height: 0; animation: scFade 400ms ease both; }
.s15-map__count { font-size: 13px; color: var(--gray-600); }
.s15-map__stage { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; }
.s15-map .ch-hex { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.s15-map .ch-hex__cell.is-region { cursor: pointer; }
.s15-hcard { width: 280px; min-height: 160px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.s15-hcard__name { font-size: 15px; font-weight: 600; color: var(--navy-900); }
.s15-hcard__rows { display: flex; flex-direction: column; gap: 4px; }
.s15-hcard__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--gray-600); }
.s15-hcard__row b { color: var(--gray-900); font-weight: 600; white-space: nowrap; }
.s15-hcard__off { font-size: 13px; color: var(--gray-600); }
.s15-map .ch-tip--card { padding: 14px 16px; width: 280px; max-width: none; }
.s15-accent {
  position: absolute; left: 50%; top: 4px; width: 420px; margin-left: -230px; padding: 12px 16px; border-radius: var(--r-card);
  background: var(--navy-900); color: var(--white); box-shadow: var(--sh-2);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 400ms var(--ease-in) 1300ms, transform 400ms var(--ease-in) 1300ms;
}
.s15-accent.is-shown { opacity: 1; transform: none; }
.s15-accent.is-instant { transition: none; }
.s15-accent__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.s15-accent__sub { font-size: 13px; line-height: 1.4; color: #9FD3DD; margin-top: 4px; }
.s15-kpis { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.s15-rise { animation: scRise 500ms var(--ease-in) both; }
.s15-kpi { flex: 1; min-height: 0; display: flex; align-items: center; gap: 14px; padding: 10px 18px; }
.s15-kpi__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--teal-100); color: var(--navy-700); display: flex; align-items: center; justify-content: center; flex: none; }
.s15-kpi__body { flex: 1; min-width: 0; }
.s15-kpi__label { font-size: 12px; color: var(--gray-600); line-height: 1.3; }
.s15-kpi__line { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; white-space: nowrap; }
.s15-kpi__before { font-size: 18px; color: var(--gray-400); }
.s15-kpi__value { font-size: 32px; line-height: 1.05; font-weight: 700; color: var(--navy-900); }
.s15-kpi__unit { font-size: 14px; color: var(--gray-600); }
.s15-kpi__sub { font-size: 11px; color: var(--gray-400); line-height: 1.3; margin-top: 2px; }
.s15-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; height: 212px; flex: none; }
.s15-dyn, .s15-ctr { padding: 14px 20px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.s15-legend { display: flex; gap: 14px; font-size: 12px; color: var(--gray-600); }
.s15-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.s15-legend__bar { width: 12px; height: 12px; border-radius: 3px; background: var(--teal-700); }
.s15-legend__line { width: 16px; height: 2px; background: var(--success-700); position: relative; }
.s15-legend__line::after { content: ''; position: absolute; left: 5px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--success-700); }
.s15-ctr__table { display: flex; flex-direction: column; }
.s15-ctr__row { display: grid; grid-template-columns: 262px minmax(0, 1fr) 56px 76px 92px; align-items: center; gap: 8px; height: 21px; font-size: 12px; border-radius: 4px; cursor: default; }
.s15-ctr__row[role="row"]:not(.s15-ctr__row--head):not(.is-base) { cursor: pointer; }
.s15-ctr__row--head { height: 28px; font-size: 11px; color: var(--gray-600); line-height: 1.2; align-items: end; padding-bottom: 4px; border-bottom: 1px solid var(--gray-200); margin-bottom: 4px; }
.s15-ctr__row.is-selected { background: var(--teal-100); box-shadow: inset 3px 0 0 var(--teal-700); }
.s15-ctr__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; color: var(--gray-900); }
.s15-ctr__row--head > div:first-child { padding-left: 6px; }
.s15-ctr__bar { display: flex; align-items: center; gap: 8px; }
.s15-ctr__bar b { width: 36px; text-align: right; font-weight: 600; color: var(--navy-900); }
.s15-ctr__track { flex: 1; height: 8px; border-radius: 4px; background: var(--gray-100); overflow: hidden; }
.s15-ctr__fill { display: block; height: 100%; border-radius: 4px; background: var(--teal-700); transform-origin: left; animation: scGrowX 800ms var(--ease-in) 600ms both; }
.s15-ctr__num { text-align: right; color: var(--gray-900); }
.s15-ctr__row.is-base .s15-ctr__name, .s15-ctr__row.is-base .s15-ctr__num { color: var(--gray-600); }
.s15-ctr__row.is-base .s15-ctr__fill { background: var(--gray-300); }
.s15-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--gray-400); flex: none; margin-top: -4px; }
.s15-caption__actions { display: flex; gap: 8px; }
.s15-print-head, .s15-print-foot, .s17-print-head, .s17-print-foot { display: none; }

/* =====================================================================
   S16. О системе
   ===================================================================== */
.s16 { background: var(--gray-50); }
.s16-wrap { width: 1280px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.s16-anim { animation: scRise 500ms var(--ease-in) both; }
.s16-top { display: flex; align-items: flex-start; gap: 32px; }
.s16-top__text { flex: 1; min-width: 0; }
.s16-title { margin: 0; font-size: 36px; line-height: 1.15; font-weight: 700; color: var(--navy-900); }
.s16-subtitle { margin: 6px 0 0; font-size: 18px; line-height: 1.35; color: var(--gray-600); }
.s16-top__actions { display: flex; gap: 12px; flex: none; }
.s16-messages { display: grid; grid-template-columns: repeat(3, 400px); justify-content: space-between; }
.s16-msg { background: var(--white); border: 1px solid var(--gray-200); border-top: 3px solid var(--teal-700); border-radius: var(--r-card); box-shadow: var(--sh-1); padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 6px; }
.s16-msg__head { display: flex; align-items: flex-start; gap: 12px; }
.s16-msg__icon { color: var(--teal-700); height: 32px; flex: none; }
.s16-msg__title { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 600; color: var(--navy-900); }
.s16-msg__text { margin: 0; font-size: 13px; line-height: 1.35; color: var(--gray-600); }
.s16-block { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-card); box-shadow: var(--sh-1); padding: 12px 20px; min-width: 0; }
.s16-block__title { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--navy-900); }
.s16-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.s16-block__head .s16-block__title { margin-bottom: 10px; }
.s16-middle { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 20px; flex: none; }
.s16-what__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(6, auto); gap: 4px 20px; }
.s16-whom { display: flex; align-items: baseline; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gray-100); }
.s16-whom .s16-block__title { margin: 0; flex: none; font-size: 14px; }
.s16-what__item { display: flex; gap: 10px; align-items: baseline; font-size: 13px; line-height: 1.25; color: var(--gray-900); }
.s16-what__n { font-size: 12px; font-weight: 700; color: var(--teal-700); flex: none; width: 18px; }
.s16-noso__caption { font-size: 12px; color: var(--gray-600); }
.s16-noso__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.s16-noso__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.s16-noso__pic { position: relative; width: 120px; height: 120px; flex: none; }
.s16-noso__img { position: absolute; inset: 0; width: 120px; height: 120px; object-fit: contain; }
.s16-noso__fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.s16-noso__pic.is-fallback .s16-noso__fallback { display: flex; }
.s16-noso__fallback::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--teal-100); }
.s16-noso__fallback .icon { position: relative; color: var(--teal-700); }
.s16-noso__name { font-size: 14px; font-weight: 600; color: var(--navy-900); line-height: 1.25; }
.s16-noso__text { font-size: 12px; line-height: 1.35; color: var(--gray-600); }
.s16-lower { flex: none; }
.s16-whom__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.s16-whom__item { display: inline-flex; align-items: center; gap: 0; padding: 0 10px 0 0; white-space: nowrap; border-radius: var(--r-ctrl); background: var(--gray-50); font-size: 13px; line-height: 1.25; color: var(--gray-900); }
.s16-whom__icon { display: none; }
.s16-whom__item + .s16-whom__item::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--teal-700); margin-right: 10px; }
.s16-whom__item { background: none !important; }
.s16-principles__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.s16-principle { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-ctrl); background: var(--teal-100); font-size: 13px; line-height: 1.35; color: var(--navy-900); }
.s16-principle__icon { color: var(--teal-700); flex: none; display: flex; }
.s16-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; }
.s16-bottom__line { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--gray-600); }
/* S16: плотность под 768 px */
.s16-noso .s16-block__head .s16-block__title { margin-bottom: 6px; }
.s16-noso__name { font-size: 13px; }
.s16-noso__text { line-height: 1.3; }
.s16-whom__item { font-size: 12.5px; }
.s16-whom .s16-block__title { font-size: 13px; }
.s16-what .s16-block__title { margin-bottom: 8px; }
.s16-bottom__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gray-400); }

/* =====================================================================
   S17. Сравнение подходов
   ===================================================================== */
.s17-actions { display: flex; gap: 12px; }
.s17-body { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
.s17-table { width: 1280px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-card); box-shadow: var(--sh-1); overflow: hidden; }
.s17-row { display: grid; grid-template-columns: 280px 500px 500px; min-height: 64px; }
.s17-row.is-zebra { background: var(--gray-50); }
.s17-row--head { min-height: 48px; border-bottom: 1px solid var(--gray-200); background: var(--white); }
.s17-anim { animation: scRise 400ms var(--ease-in) both; }
.s17-cell { display: flex; align-items: center; gap: 12px; padding: 8px 20px; font-size: 14px; line-height: 1.35; color: var(--gray-900); }
.s17-cell--param { font-weight: 600; color: var(--navy-900); }
.s17-cell--foreign { color: var(--gray-600); }
.s17-cell--domestic { box-shadow: inset 3px 0 0 var(--teal-700); }
.s17-row--head .s17-cell { font-size: 13px; font-weight: 600; color: var(--gray-600); }
.s17-row--head .s17-cell--domestic { background: var(--teal-100); color: var(--navy-900); font-size: 14px; }
.s17-mark { flex: none; }
.s17-mark--yes circle { fill: var(--success-700); }
.s17-mark__tick { fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: scDash 300ms var(--ease-move) both; animation-delay: var(--d, 0ms); }
.s17-mark--neutral circle { fill: var(--gray-150); stroke: var(--gray-400); stroke-width: 1.5; }

/* Спринт 6: читаемость на проекторе — контраст ≥ 4,5:1 (gray-400 → gray-600), подписи гексов 11 px,
   шапка S15 без выхода за 1320 px. */
.s13-card__meta, .s13-pnav__item, .s14-kpi__before, .s14-kpi__arrow, .s14-kpi__hint, .s14-q__before,
.s15-kpi__before, .s15-kpi__sub, .s15-caption { color: var(--gray-600); }
.s13-pnav__item.is-active { color: var(--teal-700); }
.s15-map .ch-hex__abbr { font-size: 11px; }
.s15-head { gap: 12px; }

/* =====================================================================
   Печать S15 и S17 (ТЗ, 11.10): A4 альбом, одна страница, без меню и панелей
   ===================================================================== */
@media print {
  #stage:has(.s15), #stage:has(.s17) { width: auto !important; height: auto !important; overflow: visible !important; background: var(--white) !important; }
  #stage:has(.s15) .content, #stage:has(.s17) .content { overflow: visible !important; }
  .overlay-layer { display: none !important; }

  .s15, .s17 { width: 1320px !important; height: auto !important; zoom: 0.76; gap: 12px; background: var(--white); }
  .s15 *, .s17 * { animation: none !important; transition: none !important; }
  .s15-noprint, .s17-noprint { display: none !important; }
  .s15-printyear { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-ctrl); background: var(--teal-700); color: var(--white); font-weight: 600; font-size: 14px; }
  .s15-accent { transition: none !important; }
  .ch-tip { display: none !important; }

  .s15-print-head, .s17-print-head {
    display: block; padding-bottom: 8px; border-bottom: 1px solid var(--gray-200);
    font-size: 13px; font-weight: 600; color: var(--navy-900);
  }
  .s15-print-foot, .s17-print-foot {
    display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--gray-200);
    font-size: 12px; color: var(--gray-600);
  }
  .s15 .card, .s17-table { box-shadow: none; }
  .s17-body { flex: none; }
  .s17-table { width: 1320px; }
  .s17-row { grid-template-columns: 290px 515px 515px; }
}