/*
  Светлый вид сайта meddesk.kg — эскиз Ж (docs/site/variants/light), выбранный
  владельцем 04.11.2026. Главная А (/assets/site.css) в светлом, без плиток «Всё,
  что нужно клинике»; начало — как в Е («а не в пяти вкладках», «Записаться на
  показ», три факта, пять вкладок над окном закрываются — чуть медленнее, чем в
  Е), в «Одном дне» нет времени над шагами; «Пропал интернет» и «Безопасность и
  данные пациентов» — тексты Е (без копий базы), схема без интернета — из site.css.
  Окно программы на первом экране — в светлой теме MedDesk: цвета меню, сетки и
  записей взяты из client/theme.py (THEME_TOKENS["light"], SLOT_COLORS), экраны
  «Одного дня» — светлые снимки программы (assets/img, scripts/site_assets.py).
  Документы (политика, удаление данных) и 404 — в том же светлом виде: шапка и
  подвал как у главной, цвета общие.
  Здесь — перекраска site.css и первый экран Е (dark.css) в светлом. Всё своё,
  без style= (CSP сайта).
*/
/* Сайт только светлый: тёмная тема телефона не должна его перекрашивать
   (и <meta name="color-scheme" content="only light"> на каждой странице). */
:root { color-scheme: only light; }
.home, .doc-page {
  --bg: #F5F7FB;
  --bg-2: #FFFFFF;
  --panel: #FFFFFF;
  --panel-2: #FFFFFF;
  --line: #E3E8F0;
  --line-2: #CDD5E2;
  --text: #0B1324;
  --muted: #475369;
  --dim: #5F6A82;
  --accent: #3D6BF0;
  --accent-2: #2F5BDF;
  --amber: #E08A00;
  --green: #15A35B;
  --red: #E0432F;
  --link: #2F5BDF;
  color-scheme: only light;
}

/* ---------- кнопки: синяя глубже — белый текст читается на светлом ---------- */
.btn {
  background: linear-gradient(180deg, #3F72F8, #2A58E0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 24px -12px rgba(42, 88, 224, 0.6);
}
.btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 14px 30px -12px rgba(42, 88, 224, 0.7); }
.btn-ghost { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(11, 19, 36, 0.05); color: var(--text); }
.btn-ghost:hover { background: #F8FAFD; box-shadow: inset 0 0 0 1px #9AA7BD, 0 1px 2px rgba(11, 19, 36, 0.05); }

/* ---------- шапка ---------- */
.bar { background: rgba(255, 255, 255, 0.72); }
.bar.is-scrolled { background: rgba(255, 255, 255, 0.9); border-bottom-color: var(--line); }
.mark { color: var(--text); }
.nav a, .langs a { color: var(--muted); }
.nav a:hover, .langs a:hover { color: var(--text); background: rgba(11, 19, 36, 0.06); }
/* языки — как в Е: RU, KY, EN, текущий выделен */
.langs a[aria-current="page"] { color: var(--text); background: rgba(11, 19, 36, 0.08); }
/* Языки заняли место в шапке: меню разделов уходит раньше, чем в А (980 px), —
   на 981–1100 px оно ломалось на две строки; разделы есть и в подвале. */
.nav a { white-space: nowrap; }
@media (max-width: 1100px) {
  .nav { display: none; }
  .bar-end { margin-left: auto; }
}

/* ---------- первый экран: сетка точек и светлая дымка вместо свечения ---------- */
.hero-bg::before { background-image: radial-gradient(rgba(61, 107, 240, 0.2) 1px, transparent 1.4px); }
.g1 { background: #7FA2FF; opacity: 0.3; }
.g2 { background: #B49DFF; opacity: 0.22; }

/* ---------- начало как в Е: приписка к заголовку, две кнопки, три факта ---------- */
.hero h1 .l.l-sub { margin-top: 0.24em; font-size: 0.48em; letter-spacing: -0.02em; color: #536079; animation-name: kinetic-sub; animation-delay: 0.26s; }
@keyframes kinetic-sub {
  from { opacity: 0; translate: 0 0.35em; font-variation-settings: "wght" 200; filter: blur(6px); }
  to { opacity: 1; translate: 0 0; font-variation-settings: "wght" 400; filter: blur(0); }
}
/* По-кыргызски заголовок набран Inter (в Unbounded нет ң, ө, ү — правило в
   site.css): приписка — обычным начертанием, как тонкий Unbounded в русской. */
:lang(ky) .hero h1 .l.l-sub { font-weight: 400; }
.hero .lead { max-width: 34em; text-wrap: balance; }
.trust {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin-top: 26px; color: var(--muted); font-size: 15px;
  animation: rise 0.9s 0.6s var(--ease) both;
}
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- вкладки над расписанием: пять закрываются, остаётся MedDesk ---------- */
.mock .m-tabs {
  grid-column: 1 / -1; display: flex; align-items: flex-end; height: 46px; padding: 0 14px;
  background: #E8ECF4; border-bottom: 1px solid #E4E8F1; overflow: hidden;
}
.m-dots { flex: none; display: flex; gap: 7px; align-self: center; margin-right: 14px; }
.m-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(11, 19, 36, 0.14); }
.tab {
  display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; max-width: 0; height: 36px;
  padding: 0; overflow: hidden; opacity: 0;
  border-radius: 10px 10px 0 0; color: var(--muted); font-size: 12.5px; white-space: nowrap;
  box-shadow: inset -1px 0 0 #D5DCE8;
}
.tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tab b { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: var(--dim); font-weight: 400; font-size: 14px; line-height: 1; }
.fav { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.f-crm { background: #8B6CFF; } .f-odoc { background: #1FBF9F; } .f-chat { background: #2DBE7E; }
.f-soc { background: linear-gradient(135deg, #FFB347, #FF5FA2); } .f-xls { background: #2DA160; }
/* конечный вид (и без скрипта): одна вкладка MedDesk */
.tab.t-md {
  max-width: 240px; padding: 0 18px 0 12px; opacity: 1; color: var(--text); font-weight: 600;
  background: #FFFFFF; box-shadow: inset 0 2px 0 #2F6BFF;
}
.t-md img { width: 16px; height: 16px; }
/* до событий дня: пять вкладок, первая открыта, MedDesk ещё нет */
.js .mock:not(.play) .tab { max-width: 210px; padding: 0 8px 0 12px; opacity: 1; }
.js .mock:not(.play) .tab.t-md { max-width: 0; padding: 0; opacity: 0; }
.js .mock .t1 { color: var(--text); background: #FFFFFF; }
/* Порядок и движения — как в Е, только примерно в полтора раза медленнее
   (владелец 02.11: «как на варианте Е, но чуть медленнее»): у Е всё
   кончается к 4,9 с, здесь — к 7,1 с. */
.mock.play .t5 { animation: tab-close 0.55s 0.6s var(--ease) both; }
.mock.play .t4 { animation: tab-close 0.55s 1s var(--ease) both; }
.mock.play .t3 { animation: tab-close 0.55s 1.4s var(--ease) both; }
.mock.play .t2 { animation: tab-close 0.55s 1.8s var(--ease) both; }
.mock.play .t1 { animation: tab-close 0.55s 2.2s var(--ease) both; }
.mock.play .t-md { animation: tab-open 0.6s 2.65s var(--ease) both; }
@keyframes tab-close {
  from { max-width: 210px; padding: 0 8px 0 12px; opacity: 1; }
  to { max-width: 0; padding: 0; opacity: 0; }
}
@keyframes tab-open {
  from { max-width: 0; padding: 0; opacity: 0; }
  to { max-width: 240px; padding: 0 18px 0 12px; opacity: 1; }
}
/* крестик «нажимают» перед тем, как вкладка закроется */
.mock.play .tab b { animation: x-press 0.4s var(--ease) both; }
.mock.play .t5 b { animation-delay: 0.3s; } .mock.play .t4 b { animation-delay: 0.7s; } .mock.play .t3 b { animation-delay: 1.1s; }
.mock.play .t2 b { animation-delay: 1.5s; } .mock.play .t1 b { animation-delay: 1.9s; }
@keyframes x-press { 50% { color: #FFFFFF; background: #E0432F; } }
/* двенадцать непрочитанных переезжают из вкладки мессенджера в «Чаты» */
.m-badge { margin-left: auto; min-width: 22px; padding: 1px 6px; border-radius: 999px; background: #2C66F5; color: #FFFFFF; font-size: 11px; font-weight: 600; text-align: center; }
.js .mock:not(.play) .m-badge { opacity: 0; }
.mock.play .m-badge { animation: pop 0.45s 1.55s var(--ease) both; }
/* события дня — после того, как закрылись вкладки */
.mock .m-toast { top: 112px; }
.mock.play .m-toast { animation: toast 5.2s 3.3s var(--ease) both; }
.mock.play .k6 { animation: drop 0.6s 3.6s var(--ease) both, ring 1.4s 3.75s ease-out 2; }
.mock.play .k3 { animation: to-done 0.6s 5.4s var(--ease) both; }
.mock.play .k3 .tick { animation: pop 0.45s 5.6s var(--ease) both; }
.mock.play .paid { animation: pop 0.5s 6.6s var(--ease) both; }
/* Узкое окно (телефон): подписи пяти вкладок не влезали и резались — у них
   только значки; вкладка MedDesk, которая остаётся, — с подписью. Записи в
   сетке чуть мельче — фамилии помещаются целиком. */
@container (max-width: 560px) {
  .mock .m-toast { top: 100px; }
  .mock .m-tabs { padding: 0 8px; }
  .m-dots, .tab b, .tab:not(.t-md) .tt { display: none; }
  .js .mock:not(.play) .tab:not(.t-md) { padding: 0 11px; }
  .mock.play .tab:not(.t-md) { animation-name: tab-close-narrow; }
  .appt { padding: 4px 5px 4px 6px; font-size: 12px; }
  .appt .tick { right: 4px; }
}
/* самые узкие телефоны (320 px): поля окна и колонка времени уже — фамилии целиком */
@container (max-width: 300px) {
  .mock .m-main { padding: 14px 10px; }
  .mock .m-grid { grid-template-columns: 34px repeat(3, minmax(0, 1fr)); }
  .appt { padding: 4px 4px 4px 5px; font-size: 11.5px; }
}
@keyframes tab-close-narrow {
  from { max-width: 210px; padding: 0 11px; opacity: 1; }
  to { max-width: 0; padding: 0; opacity: 0; }
}

/* ---------- живое расписание — как в светлой теме программы ---------- */
/* Тень гаснет внутри нижнего отступа (от 56px): первый экран обрезает всё, что
   за ним, и на светлом иначе виден шов. */
.mock {
  background: #F1F4FA;
  box-shadow: 0 0 0 1px rgba(11, 19, 36, 0.08), 0 28px 56px -28px rgba(11, 19, 36, 0.32), 0 0 90px -40px rgba(76, 125, 255, 0.35);
}
/* «Операторская панель» — в одну строку: меню окна шире, чем у А (188px).
   На узком окне меню скрыто, как в site.css, — там одна колонка. */
.mock { grid-template-columns: 220px minmax(0, 1fr); }
@container (max-width: 820px) {
  .mock { grid-template-columns: minmax(0, 1fr); }
}
.m-side { background: #FFFFFF; border-right-color: #E4E8F1; }
.m-side li svg { color: #6B7793; }
.m-side li.on { color: #1F54E0; background: #E7EEFF; box-shadow: none; }
.m-side li.on svg { color: #1F54E0; }
.m-btn { background: #2C66F5; }
.m-seg { background: #E8ECF4; }
.m-seg b { color: #1F54E0; background: #FFFFFF; box-shadow: 0 1px 2px rgba(11, 19, 36, 0.12); }
.m-date { background: #FFFFFF; box-shadow: inset 0 0 0 1px #D3DAE8; color: #3C4865; }
.m-grid {
  box-shadow: inset 0 0 0 1px #E4E8F1;
  background: #FFFFFF repeating-linear-gradient(to bottom, transparent 0 39px, #EDF0F6 39px 40px) 0 46px / 100% calc(100% - 46px) no-repeat;
}

/* Записи: «Запланирован», «Принят», «Не пришёл» — SLOT_COLORS["light"]
   (текст «Принят» и кнопка «Новая запись» на тон темнее — контраст 4,5:1);
   новая с odoctor — янтарная, как предупреждение в программе. */
.appt { border-left-color: #2F6BFF; background: #E7EEFF; color: #1F54E0; }
.s-done { border-left-color: #15A35B; background: #E3F5EC; color: #0D7A45; }
.s-miss { border-left-color: #E0432F; background: #FBE6E2; color: #C0392A; }
.s-new { border-left-color: #E08A00; background: #FBF0DD; color: #8F5600; box-shadow: inset 0 0 0 1px rgba(224, 138, 0, 0.55); }
.break { background: repeating-linear-gradient(135deg, rgba(11, 19, 36, 0.05) 0 6px, transparent 6px 12px); }
.js .mock:not(.play) .k3 { border-left-color: #2F6BFF; background-color: #E7EEFF; color: #1F54E0; }
@keyframes to-done {
  from { border-left-color: #2F6BFF; background-color: #E7EEFF; color: #1F54E0; }
  to { border-left-color: #15A35B; background-color: #E3F5EC; color: #0D7A45; }
}
@keyframes ring {
  0% { box-shadow: inset 0 0 0 1px rgba(224, 138, 0, 0.55), 0 0 0 0 rgba(224, 138, 0, 0.45); }
  100% { box-shadow: inset 0 0 0 1px rgba(224, 138, 0, 0.55), 0 0 0 10px rgba(224, 138, 0, 0); }
}
.paid { color: #FFFFFF; background: #0F8049; }
.now::before { background: linear-gradient(90deg, var(--red), rgba(224, 67, 47, 0.12)); }
.now::after { box-shadow: 0 0 0 0 rgba(224, 67, 47, 0.5); }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(224, 67, 47, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 67, 47, 0); } }
.m-toast { background: rgba(255, 255, 255, 0.96); box-shadow: 0 0 0 1px rgba(224, 138, 0, 0.45), 0 20px 40px -14px rgba(11, 19, 36, 0.3); }
.m-toast .dot { box-shadow: 0 0 10px rgba(224, 138, 0, 0.6); }

/* ---------- один день клиники: без времени над шагами ---------- */
.step h3 { margin-top: 0; }
/* Шаги короче, чем у А (72vh): та же история — на экран с лишним меньше прокрутки. */
@media (min-width: 901px) {
  .step { min-height: 56vh; }
}
/* Снимок под шагом — на планшете и телефоне (рамки справа там нет). На телефоне
   (≤ 640 px) <picture> берёт свой кадр: целые панели программы крупно, в одном
   масштабе (scripts/site_assets.py, PHONE), — экран компьютера целиком там мелкий. */
.zoom { display: none; }
.zoom picture { display: block; }
.frame {
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(11, 19, 36, 0.08), 0 40px 90px -40px rgba(11, 19, 36, 0.35), 0 0 100px -40px rgba(76, 125, 255, 0.3);
}

/* ---------- пропал интернет: схема из site.css на светлом (как в Е) ---------- */
.clinic { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -32px rgba(11, 19, 36, 0.3); }
.node { background: #FFFFFF; }
.server { box-shadow: inset 0 0 0 1px rgba(61, 107, 240, 0.55), 0 12px 30px -12px rgba(61, 107, 240, 0.5); }
.thumb { box-shadow: 0 1px 3px rgba(11, 19, 36, 0.3); }
.switch input:not(:checked) + .track { background: #C4CCDB; }
.uplink-label { white-space: nowrap; }
.uplink-label .off { color: #C0392A; }
.state.crm-note { min-height: 0; margin-top: 8px; color: var(--dim); }

/* ---------- безопасность и данные пациентов (из Е): описание, а не карточки ---------- */
.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line); }
.spec > div { padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.spec dt { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.spec dt svg {
  flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 11px;
  color: var(--accent); background: rgba(61, 107, 240, 0.09);
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.spec dd { margin: 12px 0 0; color: var(--muted); }
/* полос, как в Е, в Ж нет: заметка о законе — белая на фоне страницы */
.law { max-width: 64em; margin-top: 28px; padding: 18px 22px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 15px; }
.law b { color: var(--text); font-weight: 600; }

/* ---------- контакты и подвал ---------- */
.contact-card {
  background: radial-gradient(ellipse 80% 90% at 50% 0%, rgba(76, 125, 255, 0.16), transparent 70%), #FFFFFF;
  box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(11, 19, 36, 0.35);
}
/* Подвал — колонками, как в Е: о программе, разделы (на телефоне меню в шапке
   нет — здесь единственный путь к разделам), связь, документы; внизу — «Наверх». */
.foot { border-top-color: var(--line); background: #FFFFFF; color: var(--muted); }
.foot-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px 40px; padding-top: 56px; padding-bottom: 32px; }
.foot .mark { color: var(--text); }
.foot .who { max-width: 22em; margin-top: 14px; color: var(--muted); }
.foot-h { margin-bottom: 14px; color: var(--text); font-weight: 600; }
.foot nav ul { list-style: none; padding: 0; display: grid; gap: 10px; justify-items: start; }
.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--text); text-decoration: underline; }
/* языки в подвале — как в Е: под описанием программы */
.foot-langs { display: flex; gap: 4px; margin-top: 20px; }
.foot .foot-langs a { padding: 4px 10px; border-radius: 999px; color: var(--muted); font-size: 13px; text-decoration: none; }
.foot .foot-langs a:hover { color: var(--text); background: rgba(11, 19, 36, 0.06); }
.foot .foot-langs a[aria-current="page"] { color: var(--text); background: rgba(11, 19, 36, 0.08); }
.foot-end {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.copy { color: var(--dim); }
.foot .to-top { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; color: var(--muted); font-size: 14px; text-decoration: none; }
.foot .to-top:hover { color: var(--text); }
.foot .to-top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 980px) {
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .step-shot { box-shadow: 0 0 0 1px rgba(11, 19, 36, 0.08), 0 24px 50px -28px rgba(11, 19, 36, 0.35); }
  .zoom { display: block; margin-top: 22px; }
  .zoom .step-shot { margin-top: 0; }
}
@media (max-width: 760px) {
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec > div { padding: 20px 0 22px; }
}
/* На 561–640 px в шапке помещаются и языки, и «Записаться на показ». */
@media (max-width: 640px) {
  .bar .btn-sm { display: inline-flex; }
  .trust { flex-direction: column; align-items: center; gap: 8px; }
  /* подписи схемы «Пропал интернет» на телефоне чуть крупнее (12 → 13 px) */
  .uplink-label, .clinic-label { font-size: 13px; }
  /* подвал: «Разделы» и «Связь» рядом, «Документы» под ними; ссылки — под палец */
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; padding-top: 44px; }
  .foot-docs { grid-column: 1 / -1; }
  .foot nav ul { gap: 0; }
  .foot nav a { display: inline-block; padding: 11px 0; }
  .foot .foot-langs a { padding: 11px 14px; }
  .foot-h { margin-bottom: 2px; }
  .foot .to-top { padding: 12px 0; }
  /* свечение за заголовком на телефоне стоит: меньше работы видеокарте */
  .hero .glow { animation: none; }
}
/* На телефоне в шапке — логотип и языки: кнопка рядом с ними не помещается
   (RU и KY — от ~530 px), а «Записаться на показ» первой стоит на первом экране. */
@media (max-width: 560px) {
  .bar .btn-sm { display: none; }
}
/* самые узкие телефоны (320 px): подвал в одну колонку, иначе почта вылезает вбок */
@media (max-width: 340px) {
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
}