/* Webturbo: страница проверки и отчёт. Без сборки и внешних шрифтов. */

:root {
  color-scheme: light dark;
  --paper: #f4f6f8;
  --surface: #ffffff;
  --ink: #1b2230;
  --muted: #5a6474;
  --rule: #d6dbe3;
  --ttfb: #0e7c86;
  --dcl: #7a4fd0;
  --load: #2f5bd3;
  --high: #b3261e;
  --medium: #9a5b00;
  --low: #5a6474;
  --focus: #2f5bd3;
  --radius: 6px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #10141b;
    --surface: #171c25;
    --ink: #e6e9ef;
    --muted: #9aa3b2;
    --rule: #2a3140;
    --ttfb: #4fc3cc;
    --dcl: #b39dff;
    --load: #86a6ff;
    --high: #ff8a80;
    --medium: #e8b35a;
    --low: #9aa3b2;
    --focus: #86a6ff;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  font-variant-numeric: tabular-nums;
}

a { color: var(--load); text-underline-offset: 0.15em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

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

.wrap { max-width: 64rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
.wrap--narrow { max-width: 38rem; padding-top: 12vh; }

.muted { color: var(--muted); }
.note { color: var(--muted); font-size: 0.9375rem; margin: 0.75rem 0 0; }

/* ---------- типографика ---------- */

.title {
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 1.25rem 0 0.75rem;
  max-width: 18ch;
}
.title--report { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); max-width: none; margin-top: 0.5rem; }
.lead { font-size: 1.125rem; color: var(--muted); margin: 0 0 2rem; max-width: 36rem; }
.h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 1rem; }
.h3 { font-size: 1rem; font-weight: 650; margin: 1.25rem 0 0.5rem; }

/* ---------- знак: водопад загрузки ---------- */

.mark { display: grid; gap: 5px; width: min(15rem, 70%); }
.mark__bar { display: block; height: 7px; border-radius: 4px; background: var(--load); opacity: 0.85; }
.mark__bar[data-w="1"] { width: 30%; margin-left: 0; background: var(--ttfb); }
.mark__bar[data-w="2"] { width: 22%; margin-left: 24%; }
.mark__bar[data-w="3"] { width: 34%; margin-left: 28%; }
.mark__bar[data-w="4"] { width: 18%; margin-left: 40%; }
.mark__bar[data-w="5"] { width: 26%; margin-left: 46%; }
.mark__bar[data-w="6"] { width: 40%; margin-left: 60%; background: var(--high); opacity: 0.7; }

@media (prefers-reduced-motion: no-preference) {
  .mark__bar { transform-origin: left; animation: grow 700ms cubic-bezier(.2,.7,.2,1) both; }
  .mark__bar[data-w="2"] { animation-delay: 80ms; }
  .mark__bar[data-w="3"] { animation-delay: 160ms; }
  .mark__bar[data-w="4"] { animation-delay: 240ms; }
  .mark__bar[data-w="5"] { animation-delay: 320ms; }
  .mark__bar[data-w="6"] { animation-delay: 480ms; }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- форма ---------- */

.form { margin-bottom: 1.5rem; }
.form__label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.form__row { display: flex; gap: 0.5rem; }
.form__row input {
  flex: 1; min-width: 0;
  font: inherit; font-family: var(--mono); font-size: 0.95rem;
  padding: 0.7rem 0.8rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.form__row input[aria-invalid="true"] { border-color: var(--high); }
.form__error { color: var(--high); margin: 0.6rem 0 0; }

.button {
  display: inline-block;
  font: inherit; font-weight: 600;
  padding: 0.7rem 1.1rem;
  color: var(--surface); background: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.button:disabled { opacity: 0.6; cursor: progress; }
.button--quiet { color: var(--ink); background: transparent; border-color: var(--rule); font-weight: 500; padding: 0.5rem 0.9rem; }

@media (max-width: 30rem) {
  .form__row { flex-direction: column; }
  .form__row .button { width: 100%; text-align: center; }
}

/* ---------- шапка отчёта ---------- */

.back { margin: 0; font-size: 0.9375rem; }
.head { margin-bottom: 2rem; }
.head__url { font-family: var(--mono); font-size: 0.95rem; margin: 0; overflow-wrap: anywhere; }
.head__status { color: var(--muted); margin: 0.35rem 0 0; }

.block { margin: 0 0 2.75rem; }

/* ---------- ожидание ---------- */

.steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.15rem; }
.steps__item { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: 0.5rem; padding: 0.4rem 0; }
.steps__mark { grid-row: span 2; width: 0.85rem; height: 0.85rem; margin-top: 0.35rem; border-radius: 50%; border: 2px solid var(--rule); }
.steps__item--done .steps__mark { background: var(--ttfb); border-color: var(--ttfb); }
.steps__item--current .steps__mark { border-color: var(--load); box-shadow: inset 0 0 0 3px var(--paper); background: var(--load); }
.steps__item--pending { color: var(--muted); }
.steps__label { font-weight: 600; }
.steps__item--pending .steps__label { font-weight: 400; }
.steps__time { color: var(--muted); font-size: 0.875rem; }
.steps__queue { grid-column: 2; font-size: 0.9375rem; margin-top: 0.15rem; }
@media (prefers-reduced-motion: no-preference) {
  .steps__item--current .steps__mark { animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.35; } }
}

.share { margin: 2rem 0 2.5rem; padding: 1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.share__text { margin: 0 0 0.6rem; }
.share__row { display: flex; gap: 0.5rem; }
.share__link {
  flex: 1; min-width: 0; font: 0.875rem var(--mono); padding: 0.5rem 0.6rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
}
.share__done { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.875rem; min-height: 1.2em; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem 2rem; }
.fact { border-top: 2px solid var(--rule); padding-top: 0.6rem; }
.fact__title { font-size: 1rem; margin: 0 0 0.3rem; }
.fact p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

/* ---------- проблема ---------- */

.problem__text { font-size: 1.125rem; max-width: 40rem; }
.problem__detail { display: block; color: var(--muted); font-size: 0.9375rem; margin-top: 0.4rem; overflow-wrap: anywhere; }

/* ---------- сводка ---------- */

.compare { width: 100%; max-width: 40rem; border-collapse: collapse; }
.compare th, .compare td { padding: 0.55rem 0.5rem; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.compare tbody th { font-weight: 400; color: var(--muted); }
.compare td { font-size: 1.125rem; font-weight: 600; }
.compare__profile { display: block; font-weight: 650; }
.compare__device { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 30rem) {
  .compare th, .compare td { padding: 0.5rem 0.25rem; }
  .compare td { font-size: 1rem; }
}

/* Шкала времени: главный визуальный элемент отчёта. */
.timeline { margin: 1.75rem 0 0; max-width: 52rem; }
.timeline__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.875rem; color: var(--muted); margin-bottom: 0.75rem; }
.legend::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.35rem; vertical-align: -0.05rem; }
.legend--ttfb::before { background: var(--ttfb); }
.legend--dcl::before { background: var(--dcl); }
.legend--load::before { background: var(--load); }

.track { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: 0.75rem; min-height: 2.25rem; }
.track__label { font-weight: 600; font-size: 0.9375rem; }
.track__line { position: relative; height: 10px; background: var(--rule); border-radius: 5px; }
.track__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--to, 0) * 100%); background: var(--load); opacity: 0.25; border-radius: 5px; }
.track__mark {
  position: absolute; top: 50%; left: calc(var(--at) * 100%);
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 3px solid var(--paper);
}
.track__mark--ttfb { background: var(--ttfb); }
.track__mark--dcl { background: var(--dcl); }
.track__mark--load { background: var(--load); }
.track--axis { min-height: 1.5rem; }
.track__line--axis { background: none; height: 1.2rem; }
.tick { position: absolute; left: calc(var(--at) * 100%); transform: translateX(-50%); font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.tick:first-child { transform: none; }
.tick:last-child { transform: translateX(-100%); }
@media (max-width: 30rem) {
  /* На телефоне подпись над шкалой: «Компьютер» не влезает в колонку. */
  .track { grid-template-columns: 1fr; gap: 0.3rem; padding: 0.3rem 0; }
  .track__label { font-size: 0.875rem; }
  .track--axis .track__label { display: none; }
}

/* ---------- находки ---------- */

.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 46rem; }
.finding { padding: 0.25rem 0 0.25rem 1rem; border-left: 4px solid var(--low); }
.finding--high { border-left-color: var(--high); }
.finding--medium { border-left-color: var(--medium); }
.finding__meta { margin: 0; display: flex; gap: 0.75rem; font-size: 0.875rem; color: var(--muted); }
.finding__sev { font-weight: 650; }
.finding--high .finding__sev { color: var(--high); }
.finding--medium .finding__sev { color: var(--medium); }
.finding__title { font-size: 1.0625rem; margin: 0.15rem 0 0.3rem; line-height: 1.35; }
.finding__detail { margin: 0; overflow-wrap: anywhere; }
.finding__data { margin-top: 0.4rem; font-size: 0.875rem; }
.finding__data summary { cursor: pointer; color: var(--muted); }
.finding__data pre {
  margin: 0.4rem 0 0; padding: 0.6rem; overflow: auto; max-height: 20rem;
  font: 0.8125rem/1.45 var(--mono); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}

/* ---------- подробности ---------- */

.more { border-top: 1px solid var(--rule); }
.more:last-child { border-bottom: 1px solid var(--rule); }
.more > summary { cursor: pointer; padding: 0.85rem 0; font-weight: 600; }
.more__body { padding-bottom: 1.25rem; }
.per-profile .h3 { margin-top: 0.5rem; }

.scroll { overflow-x: auto; }
.data { border-collapse: collapse; font-size: 0.875rem; min-width: 100%; }
.data th, .data td { padding: 0.35rem 0.6rem 0.35rem 0; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.data th { color: var(--muted); font-weight: 500; }
.data .num { text-align: right; padding-left: 0.6rem; }
.data td:first-child { white-space: normal; overflow-wrap: anywhere; max-width: 22rem; font-family: var(--mono); font-size: 0.8125rem; }

.wf { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.wf__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0.75rem; align-items: center; min-height: 1.4rem; }
.wf__label { font: 0.75rem var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.wf__track { position: relative; height: 8px; }
.wf__bar { position: absolute; top: 0; bottom: 0; left: calc(var(--left) * 100%); width: calc(var(--width) * 100%); min-width: 2px; border-radius: 2px; background: var(--load); }
.wf__bar--failed { background: var(--high); }
.wf__bar--unfinished { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px); }
@media (max-width: 30rem) {
  .wf__row { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.2rem 0; }
}

.small { font-size: 0.875rem; margin: 0 0 0.6rem; max-width: 46rem; }
.places summary { cursor: pointer; }
.places ul { margin: 0.3rem 0 0; padding: 0; list-style: none; text-align: right; color: var(--muted); font-size: 0.8125rem; }

/* ---------- узкий экран: ничего не вылезает за край ---------- */

a, .finding__detail, .finding__title, .note, .problem__text, .data td { overflow-wrap: anywhere; }
.findings { grid-template-columns: minmax(0, 1fr); }
.finding, .per-profile, .more__body, .summary, .timeline, .facts > *, .steps__item > * { min-width: 0; }

/* Таблицы подробностей до 40rem — карточки «подпись: значение» вместо колонок:
   8 колонок изображений в 360 px не помещаются, а горизонтальная прокрутка внутри
   длинной страницы на телефоне плохо заметна. Подписи — из data-label (заданы скриптом). */
@media (max-width: 40rem) {
  .data, .data tbody, .data tr, .data td { display: block; width: 100%; }
  .data { min-width: 0; }
  .data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data tr { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
  .data td { border: 0; padding: 0.1rem 0; text-align: left; white-space: normal; max-width: none; }
  .data td.num { display: flex; justify-content: space-between; gap: 1rem; padding-left: 0; text-align: right; }
  .data td.num::before { content: attr(data-label); color: var(--muted); text-align: left; }
  .data td:first-child { font-weight: 600; margin-bottom: 0.2rem; }
  .places ul { text-align: right; }
}

.foot { padding-top: 0; }
.compare__note { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }