/* Страницы сервиса «Анализы». Пишется РУКАМИ (в отличие от tokens.css, который
   собирается из дизайн-системы) и не содержит ни одного литерального цвета:
   всё через переменные — иначе смена бренда станет поиском по файлу.

   Скриптов на страницах нет вовсе (CSP `script-src 'none'`), поэтому здесь же
   живёт всё, что в других проектах сделал бы JS: раскрытие подробностей —
   <details>, ожидание разбора — мета-обновление страницы. */

/* ——— Каркас ——— */
.container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding:0 var(--container-pad)}

.site-header{background:var(--surface-card);border-bottom:1px solid var(--border-subtle)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:64px}
.site-header__logo{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-semibold);font-size:var(--text-lg);color:var(--text-heading);text-decoration:none}
.site-header__logo:hover{color:var(--text-heading)}
.site-header__mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-sm);background:var(--surface-accent);color:var(--text-inverse);font-size:var(--text-sm);font-weight:var(--weight-bold)}
.site-nav{display:flex;gap:var(--space-4);flex-wrap:wrap}
.site-nav a{color:var(--text-muted);text-decoration:none;font-size:var(--text-sm)}
.site-nav a:hover,.site-nav a.is-active{color:var(--text-link)}

main{display:block;padding:var(--space-8) 0 var(--space-12)}
.site-footer{border-top:1px solid var(--border-subtle);background:var(--surface-card);padding:var(--space-6) 0;color:var(--text-muted);font-size:var(--text-sm)}
.site-footer__inner{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between}

/* Подвал юридический: ссылки на документы, реквизиты оператора и уведомление о
   cookie. Отдельным блоком под основным — реквизиты обязаны быть видны на
   КАЖДОЙ странице, а не только там, где есть навигация. */
.site-footer__legal{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--border-subtle)}
.site-footer__docs{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);margin-bottom:var(--space-4)}
.site-footer__docs a{color:var(--text-muted);text-decoration:none}
.site-footer__docs a:hover{color:var(--text-link)}
.site-footer__cookies{margin-top:var(--space-3);font-size:var(--text-xs)}
.legal-requisites p{margin:0 0 var(--space-2)}
/* Страница результата: подвал без ссылок и без верхней черты второго блока —
   на ней нет основного блока с навигацией, к которому её можно было бы
   пририсовать. */
.site-footer--bare .site-footer__legal{margin-top:0;padding-top:0;border-top:0}

/* Юридический документ: разметку собирает @saas-platform/legal-docs, поэтому
   стили вешаются на голые теги внутри статьи, а не на классы. */
.legal{max-width:var(--measure)}
.legal h2{margin-top:var(--space-8)}
.legal p,.legal ul,.legal ol{margin-bottom:var(--space-4)}
.legal li{margin-bottom:var(--space-2)}
.legal-version{margin-top:var(--space-8);padding-top:var(--space-4);border-top:1px solid var(--border-subtle);color:var(--text-muted);font-size:var(--text-sm)}

/* Утилиты отступов. Их ровно три, и это не начало «своего тейлвинда»: они
   существуют потому, что инлайновый style="" на странице потребовал бы
   `style-src 'unsafe-inline'` в политике — то есть ослабления CSP ради трёх
   отступов. */
.mt-6{margin-top:var(--space-6)}
.mt-10{margin-top:var(--space-10)}
.mb-3{margin-bottom:var(--space-3)}

.stack>*+*{margin-top:var(--space-4)}
.stack-lg>*+*{margin-top:var(--space-8)}
.measure{max-width:var(--measure)}
.muted{color:var(--text-muted)}
.small{font-size:var(--text-sm)}

/* ——— Карточки и блоки ——— */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.card+.card{margin-top:var(--space-4)}
.card__title{margin-bottom:var(--space-2)}

.hero{padding:var(--space-8) 0 var(--space-4)}
.hero h1{max-width:var(--measure)}
.hero p{margin-top:var(--space-4);max-width:var(--measure);font-size:var(--text-lg);color:var(--text-muted)}

.steps{list-style:none;padding:0;display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.steps li{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-5)}
.steps .step-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-pill);background:var(--surface-accent-soft);color:var(--accent-700);font-weight:var(--weight-bold);font-size:var(--text-sm);margin-bottom:var(--space-3)}

/* ——— Кнопки ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);border:1px solid transparent;background:var(--action-bg);color:var(--action-fg);font-size:var(--text-base);font-weight:var(--weight-semibold);text-decoration:none;cursor:pointer;transition:background var(--duration-fast) var(--ease-standard)}
.btn:hover{background:var(--action-bg-hover);color:var(--action-fg)}
.btn--ghost{background:transparent;color:var(--text-link);border-color:var(--action-ghost-border)}
.btn--ghost:hover{background:var(--surface-subtle);color:var(--text-link-hover)}
.btn--block{width:100%}

/* ——— Форма загрузки ——— */
.field{display:block}
.field__label{display:block;font-weight:var(--weight-medium);margin-bottom:var(--space-2)}
.field__hint{display:block;margin-top:var(--space-2);color:var(--text-muted);font-size:var(--text-sm)}
.field input[type=file],.field input[type=email]{width:100%;padding:var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-card);font:inherit;color:var(--text-body)}
.field input[type=file]{padding:var(--space-3);background:var(--surface-subtle)}
.checkbox{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-sm);color:var(--text-muted)}
.checkbox input{margin-top:0.35em}

/* ——— Дисклеймер: главный текст сервиса ———
   Он обязан быть виден на КАЖДОЙ странице, где показывается или обещается
   разбор, и не должен выглядеть как реклама, которую взгляд пропускает. */
.disclaimer{border:1px solid var(--warn-border);background:var(--warn-bg);color:var(--warn-fg);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5)}
.disclaimer strong{font-weight:var(--weight-bold)}
.disclaimer--inline{font-size:var(--text-sm)}

.notice{border:1px solid var(--border-subtle);background:var(--surface-subtle);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);color:var(--text-muted)}
.notice--demo{border-color:var(--accent-200);background:var(--surface-accent-soft);color:var(--accent-800)}

/* ——— Показатели разбора ——— */
.markers{display:grid;gap:var(--space-3)}
.marker{border:1px solid var(--border-subtle);border-left-width:4px;border-radius:var(--radius-md);background:var(--surface-card);padding:var(--space-4) var(--space-5)}
.marker__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-3)}
.marker__name{font-weight:var(--weight-semibold);color:var(--text-heading)}
.marker__value{font-family:var(--font-mono);font-size:var(--text-sm)}
.marker__ref{color:var(--text-faint);font-size:var(--text-sm)}
.marker__text{margin-top:var(--space-2);color:var(--text-body)}

/* Статус показателя: цвет + СЛОВО. Значок цветом одним не сообщается ничего —
   разбор читают в том числе на распечатке. */
.tag{display:inline-flex;align-items:center;padding:2px var(--space-2);border-radius:var(--radius-pill);border:1px solid;font-size:var(--text-xs);font-weight:var(--weight-semibold);white-space:nowrap}
.tag--ok{color:var(--state-ok-fg);background:var(--state-ok-bg);border-color:var(--state-ok-border)}
.tag--low{color:var(--state-low-fg);background:var(--state-low-bg);border-color:var(--state-low-border)}
.tag--high{color:var(--state-high-fg);background:var(--state-high-bg);border-color:var(--state-high-border)}
.tag--unknown{color:var(--state-unknown-fg);background:var(--state-unknown-bg);border-color:var(--state-unknown-border)}

.marker--ok{border-left-color:var(--state-ok-border)}
.marker--low{border-left-color:var(--state-low-border)}
.marker--high{border-left-color:var(--state-high-border)}
.marker--unknown{border-left-color:var(--state-unknown-border)}

.questions li+li{margin-top:var(--space-2)}

/* ——— Ожидание разбора ——— */
.waiting{text-align:center;padding:var(--space-10) var(--space-4)}
.waiting h1{margin-bottom:var(--space-3)}
.progress{height:6px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden;margin:var(--space-6) auto 0;max-width:22rem}
.progress__bar{display:block;height:100%;width:40%;background:var(--surface-accent);border-radius:var(--radius-pill)}

details{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);padding:var(--space-3) var(--space-4)}
details+details{margin-top:var(--space-2)}
summary{cursor:pointer;font-weight:var(--weight-medium)}
details[open] summary{margin-bottom:var(--space-2)}

@media (max-width:40rem){
  .site-header__inner{flex-wrap:wrap;padding-top:var(--space-3);padding-bottom:var(--space-3)}
  .card{padding:var(--space-5) var(--space-4)}
  h1{font-size:var(--text-2xl)}
}

/* Печать: разбор носят врачу на бумаге. Шапка, подвал и кнопки на листе не
   нужны, а дисклеймер нужен тем более — именно эту бумагу читает врач. */
@media print{
  .site-header,.site-footer,.btn,.no-print{display:none !important}
  body{background:var(--white)}
  .card,.marker{box-shadow:none;border-color:var(--ink-300)}
}