/* skbpa:quickstart — image-first step-by-step instruction for someone
   standing next to the device (2026-08-17 rework). Uses tokens from
   docs.center/style.css. */

.skbpa-docs-qs { max-width: 900px; margin: 0 auto; padding: 40px 24px 100px; }

/* --- family selector (two executions, one manual) ----------------------- */

.skbpa-docs-qs-choose { max-width: 720px; margin: 0 auto; padding: 8px 0 40px; }
.skbpa-docs-qs-choose h1 { font-size: 26px; margin: 0 0 10px; }
.skbpa-docs-qs-choose-note {
  margin: 0 0 26px; font-size: 15.5px; line-height: 1.55; color: var(--skbpa-ink-soft);
}
.skbpa-docs-qs-choose-list { display: grid; gap: 12px; }
.skbpa-docs-qs-choose-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border: 1px solid var(--skbpa-line); border-radius: 10px;
  background: var(--skbpa-surface); text-decoration: none;
  box-shadow: 0 1px 6px rgba(33,29,25,.04);
}
.skbpa-docs-qs-choose-item:hover {
  border-color: var(--skbpa-accent); text-decoration: none;
  box-shadow: 0 2px 12px rgba(33,29,25,.08);
}
.skbpa-docs-qs-choose-name { font-size: 17px; font-weight: 600; color: var(--skbpa-ink); }
.skbpa-docs-qs-choose-go { flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--skbpa-accent-dark); }
.skbpa-docs-qs-choose-manual { margin: 24px 0 0; font-size: 14.5px; color: var(--skbpa-ink-soft); }

@media (max-width: 560px) {
  .skbpa-docs-qs-choose-item { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; }
}

.skbpa-docs-qs-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.skbpa-docs-qs-head .skbpa-docs-back-link { font-size: 13.5px; color: var(--skbpa-ink-soft); font-weight: 500; min-width: 0; overflow-wrap: break-word; }
.skbpa-docs-qs-head .skbpa-docs-back-link:hover { color: var(--skbpa-accent-dark); }
.skbpa-docs-qs-head .skbpa-docs-switch { flex-shrink: 0; }

.skbpa-docs-qs-progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.skbpa-docs-qs-progress-label { font-size: 13.5px; font-weight: 700; color: var(--skbpa-ink-soft); }
.skbpa-docs-qs-dots { display: flex; gap: 6px; }
.skbpa-docs-qs-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--skbpa-line); }
.skbpa-docs-qs-dot--filled { background: var(--skbpa-accent); }

.skbpa-docs-qs-card {
  background: var(--skbpa-surface); border: 1px solid var(--skbpa-line); border-radius: 12px;
  padding: 0 0 40px; box-shadow: 0 2px 14px rgba(33,29,25,.05); overflow: hidden;
}

/* The real RE diagram/scheme/screenshot -- the dominant visual element on
   the card, not a small decorative afterthought. object-fit:contain keeps
   technical line-drawings (which already have their own white background
   and baked-in captions from the source PDF) legible instead of being
   cropped or stretched. */
.skbpa-docs-qs-visual {
  margin: 0; padding: 28px 28px 0; background: var(--skbpa-surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.skbpa-docs-qs-visual-caption {
  margin: 10px 0 0; font-size: 13px; line-height: 1.4; text-align: center;
  color: var(--skbpa-ink-soft);
}
.skbpa-docs-qs-visual-zoom { position: relative; display: block; width: 100%; cursor: zoom-in; }
.skbpa-docs-qs-visual img {
  /* 600px, not 460px. 460 was set when every one of these was a portrait page
     scan, where a taller box only added white margin. A landscape drawing is
     bounded by the height instead, and at 460 it used 629 of the 794px the
     card offers — the callout text on it is the point, so give it the width. */
  width: 100%; max-height: 600px; object-fit: contain; display: block;
  background: #fff; border: 1px solid var(--skbpa-line); border-radius: 8px;
}
/* Real technical diagrams (electrical schematics, register tables) carry
   small labels that shrink below comfortable reading size on a 390px
   mobile viewport -- the image itself can't get any wider than the
   device, so the fix is letting the reader open the full-resolution PNG
   in the browser's own zoomable viewer, not a custom lightbox (2026-08-18,
   caught in visual self-review: рис.2 text was legible on desktop but
   too small to read at a glance on mobile without this). */
/* Inline figures inside the step text.
 *
 * Same treatment as the main visual, because they are the same kind of thing:
 * a drawing lifted from the РЭ whose labels are the point. Capped in height so
 * one picture cannot own the whole step, contained rather than cropped so no
 * terminal marking is cut off, and enlargeable — the cap is what makes the
 * enlarge link necessary rather than optional. */
.skbpa-docs-figure {
  margin: 18px 0 22px;
  padding: 16px;
  background: var(--skbpa-surface-2);
  border-radius: 8px;
  text-align: center;
}
.skbpa-docs-qs-card .skbpa-docs-figure img {
  width: auto;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--skbpa-line);
  border-radius: 8px;
}
.skbpa-docs-figure .skbpa-docs-qs-visual-zoom { display: inline-block; width: auto; }

.skbpa-docs-qs-visual-zoom-badge {
  position: absolute; right: 10px; bottom: 10px; background: rgba(33,29,25,.72); color: #fff;
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 99px; line-height: 1;
  pointer-events: none;
}

/* --- ОДНА ТИПОГРАФИЧЕСКАЯ ШКАЛА БЫСТРОГО СТАРТА ------------------------

   ЧТО БЫЛО ИЗМЕРЕНО (браузер, 169 страниц шагов, 2026-09-10)

     заголовок шага   25px / вес 400 / серый #757575   — не читался как заголовок
     абзац            18px / 21px / чистый чёрный
     пункт списка     16px / 26.4px
     результат        15px / 22.5px                    — «мелкий шрифт»
     подпись рисунка  13px  ИЛИ  16px                  — два разных оформления
     <b>              три разных начертания
     <strong>         четыре

   Три базовых кегля жили внутри одного шага. Причина не в этих правилах, а в
   том, что они целились не туда: `.skbpa-docs-qs-text { font-size: 16px }`
   задаёт размер КОНТЕЙНЕРУ, а тема несёт `body p { font-size: 18px }`, которое
   бьёт наследование, потому что попадает прямо в элемент. То же с заголовком:
   `.skbpa-docs-qs-card h1` задавал только размер, а вес и цвет доставались от
   темы (`body h1 { font-weight: normal }`, `h1 { color: #757575 }`).

   ПОЭТОМУ здесь каждое правило целится в САМ элемент и несёт класс, то есть
   выигрывает у `body p` (0,0,2) и `body h1` (0,0,2) по специфичности, а не по
   порядку подключения — порядок в этой теме не наш.

   Иерархия строится размером, весом и интерлиньяжем. Семейство одно, Roboto;
   моноширинный — только для <code>. Смысл не уплощается: результат сохраняет
   свою плашку и галочку, примечания — свою заливку, вторичный текст — свой
   вес. Меняется то, что они перестают отличаться КЕГЛЕМ без причины. */

.skbpa-docs-qs-card h1 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--skbpa-ink);
  margin: 28px 40px 18px;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}

.skbpa-docs-qs-text { font-size: 17px; max-width: 62ch; margin: 0 40px; }

/* Базовый абзац и пункт списка — один кегль. */
.skbpa-docs-qs-card .skbpa-docs-qs-text p,
.skbpa-docs-qs-card .skbpa-docs-qs-text li {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--skbpa-ink);
}
.skbpa-docs-qs-text p, .skbpa-docs-callout p { margin: 0 0 13px; }
.skbpa-docs-qs-card .skbpa-docs-qs-text li { margin: 0 0 6px; }

/* Главная инструкция шага — первый абзац. Отличается ВЕСОМ, не размером и не
   цветом, чтобы за ней читалось «делай это», а не «здесь другой блок». */
.skbpa-docs-qs-card .skbpa-docs-qs-text > p:first-of-type {
  font-weight: 500;
}

/* Примечание/предупреждение: на полкегля меньше основного текста и с заливкой
   — этого достаточно, чтобы отделиться, и мало, чтобы выглядеть сноской. */
.skbpa-docs-qs-card .skbpa-docs-callout { font-size: 16px; max-width: 62ch; }
.skbpa-docs-qs-card .skbpa-docs-callout p,
.skbpa-docs-qs-card .skbpa-docs-callout li {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--skbpa-ink);
}

/* Подпись рисунка — ОДНА, независимо от того, каким из двух способов вставлена
   иллюстрация. Раньше `.skbpa-docs-qs-visual-caption` получала 13px, а голый
   <figcaption> внутри `.skbpa-docs-figure` — ничего, и наследовал кегль текста. */
.skbpa-docs-qs-card figcaption,
.skbpa-docs-qs-card .skbpa-docs-qs-visual-caption {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--skbpa-ink-faint);
}

/* Акцент. <b> и <strong> — одно и то же начертание: в текстах шагов
   встречаются оба (348 против 114), и разводить их по виду нечем.
   Цвет НЕ задаётся: акцент внутри плашки результата остаётся акцентным
   благодаря своему правилу ниже, а в обычном тексте не должен вводить
   собственный цвет. */
.skbpa-docs-qs-card .skbpa-docs-qs-text b,
.skbpa-docs-qs-card .skbpa-docs-qs-text strong,
.skbpa-docs-qs-card .skbpa-docs-callout b,
.skbpa-docs-qs-card .skbpa-docs-callout strong {
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  color: inherit;
}
.skbpa-docs-qs-card .skbpa-docs-qs-text em,
.skbpa-docs-qs-card .skbpa-docs-callout em {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  font-style: italic;
}

/* Моноширинный — только здесь, и только для настоящих литералов (адреса
   регистров, имена файлов). Тема отдавала Monaco малиновым по умолчанию
   Bootstrap; это не оформление, а отсутствие оформления. */
.skbpa-docs-qs-card .skbpa-docs-qs-text code,
.skbpa-docs-qs-card .skbpa-docs-callout code {
  font-family: "Roboto Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .92em;
  font-weight: 400;
  color: var(--skbpa-ink);
  background: var(--skbpa-surface-2);
  border: 1px solid var(--skbpa-line);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Explicit "what you should end up with" completion criterion -- distinct
   from the plain instructional paragraph so it reads as a checkpoint, not
   more of the same prose.

   NOT a flex container, and this is the whole point. Flexbox makes every
   ELEMENT child its own flex item -- only bare text runs get merged into
   anonymous ones -- so a checkpoint sentence carrying two emphasised terms
   («<strong>Результат:</strong> ... горит индикатор <strong>WORK</strong>.»)
   was shattered into four items spread across the line, and «WORK» ended up
   marooned against the right edge with the full stop after it. It read as a
   stray label rather than as the end of the sentence it belongs to.
   (2026-09-08, from human visual review of UVP-280 step 5.)

   The tick is placed instead of laid out: absolute inside the padding, which
   leaves the paragraph as ordinary flowing text and lets the sentence wrap the
   way a sentence should. */
.skbpa-docs-qs-result {
  position: relative;
  background: var(--skbpa-surface-2); border-radius: 8px;
  padding: 14px 16px 14px 40px;
  /* 16px, not 15px. At 15px against 17px body text the checkpoint read as a
     footnote — the stakeholder's words were «выглядит как мелкий шрифт» — and
     it is the one line the engineer checks themselves against. It stays
     distinct through the tinted panel, the tick and the accent-coloured label,
     which is distinction by ROLE rather than by being smaller. */
  margin: 18px 0 0 !important; font-size: 17px; line-height: 1.6; color: var(--skbpa-ink);
}
/* The checkpoint carries .skbpa-docs-qs-text in its selector for a reason:
   without it the rule is (0,2,0) and loses to the paragraph rule (0,2,1) —
   the result IS a <p> inside .skbpa-docs-qs-text — so it silently took the
   body size instead of its own. Measured, not assumed.

   Weight is pinned to 400 for the same class of reason: where the checkpoint
   happens to be the FIRST paragraph of a step, :first-of-type made it 500 and
   five steps rendered a semibold checkpoint while the rest were regular.

   Size equals body text. Smaller was the original complaint, and there is
   nothing left to gain from it — the panel, the tick and the accent-coloured
   «Результат:» already say what this block is. */
.skbpa-docs-qs-card .skbpa-docs-qs-text .skbpa-docs-qs-result,
.skbpa-docs-qs-card .skbpa-docs-qs-text p.skbpa-docs-qs-result,
.skbpa-docs-qs-card .skbpa-docs-qs-text .skbpa-docs-qs-result p,
.skbpa-docs-qs-card .skbpa-docs-qs-text .skbpa-docs-qs-result li {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--skbpa-ink);
}
.skbpa-docs-qs-result::before {
  content: "✓"; position: absolute; left: 16px; top: 14px;
  color: var(--skbpa-accent-dark); font-weight: 700; line-height: 1.5;
}
.skbpa-docs-qs-card .skbpa-docs-qs-result strong,
.skbpa-docs-qs-card .skbpa-docs-qs-result b {
  color: var(--skbpa-accent-dark);
  font-weight: 600;
}

.skbpa-docs-qs-more { display: inline-block; margin: 20px 40px 0; font-size: 14px; font-weight: 600; }

.skbpa-docs-qs-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 32px 40px 0; }
.skbpa-docs-qs-nav-btn {
  text-align: center; padding: 14px; border-radius: 6px; font-weight: 700; font-size: 15.5px;
  border: 1px solid var(--skbpa-line);
  /* !important: the shared ".skbpa-docs a" rule (docs.center/style.css)
     sets color:accent-dark on every link and, because it pairs a class
     with an element selector, actually OUTRANKS a single-class selector
     like this one -- without !important this color declaration silently
     loses. Confirmed live (2026-08-18): text was already rendering
     accent-dark instead of the intended color in the normal state, and
     on hover the *background* also becomes accent-dark (see below),
     making the text and background identical and the label vanish. */
  color: var(--skbpa-ink) !important;
}
.skbpa-docs-qs-nav-btn:hover { text-decoration: none; border-color: var(--skbpa-accent); }
.skbpa-docs-qs-nav-btn--next, .skbpa-docs-qs-nav-btn--done {
  background: var(--skbpa-accent); border-color: var(--skbpa-accent); color: #fff !important;
  grid-column: 2;
}
.skbpa-docs-qs-nav-btn--next:hover, .skbpa-docs-qs-nav-btn--done:hover,
.skbpa-docs-qs-nav-btn--next:focus, .skbpa-docs-qs-nav-btn--done:focus,
.skbpa-docs-qs-nav-btn--next:active, .skbpa-docs-qs-nav-btn--done:active {
  background: var(--skbpa-accent-dark); border-color: var(--skbpa-accent-dark); color: #fff !important;
}

@media (max-width: 640px) {
  .skbpa-docs-qs-visual { padding: 20px 20px 0; }
  .skbpa-docs-figure { padding: 12px; margin: 14px 0 18px; }
  .skbpa-docs-qs-card .skbpa-docs-figure img { max-height: 300px; }
  .skbpa-docs-qs-visual img { max-height: 360px; }
  .skbpa-docs-qs-card h1, .skbpa-docs-qs-text, .skbpa-docs-qs-more, .skbpa-docs-qs-nav { margin-left: 22px; margin-right: 22px; }
}

@media (max-width: 480px) {
  .skbpa-docs-qs { padding: 24px 16px 90px; }
  .skbpa-docs-qs-card { padding-bottom: 26px; border-radius: 10px; }
  .skbpa-docs-qs-card h1 { font-size: 22px; line-height: 1.25; }
  .skbpa-docs-qs-text { font-size: 16px; }
  .skbpa-docs-qs-card .skbpa-docs-qs-text p,
  .skbpa-docs-qs-card .skbpa-docs-qs-text li { font-size: 16px; line-height: 1.6; }
  .skbpa-docs-qs-card .skbpa-docs-callout p,
  .skbpa-docs-qs-card .skbpa-docs-callout li,
  .skbpa-docs-qs-card .skbpa-docs-qs-text .skbpa-docs-qs-result,
  .skbpa-docs-qs-card .skbpa-docs-qs-text p.skbpa-docs-qs-result,
  .skbpa-docs-qs-card .skbpa-docs-qs-text .skbpa-docs-qs-result p,
  .skbpa-docs-qs-card .skbpa-docs-qs-text .skbpa-docs-qs-result li { font-size: 16px; }
  .skbpa-docs-qs-nav { grid-template-columns: 1fr; }
  .skbpa-docs-qs-nav-btn--next, .skbpa-docs-qs-nav-btn--done { grid-column: 1; }
}

/* Breadcrumbs + relation-driven return navigation (§25/§26). Deliberately the
   same class names the manual template uses, so the two documents present one
   navigation model; the rules themselves are duplicated here because the
   Quick Start page does not load the manual's stylesheet. */
.skbpa-docs-crumbs {
  padding: 22px 0 0;
  font-size: 13px;
  color: var(--skbpa-ink-faint);
  line-height: 1.6;
  overflow-wrap: break-word;
}
.skbpa-docs-crumbs a { color: var(--skbpa-ink-soft); }
.skbpa-docs-crumbs a:hover, .skbpa-docs-crumbs a:focus-visible { color: var(--skbpa-accent-dark); text-decoration: underline; }
.skbpa-docs-crumbs-sep { margin: 0 7px; opacity: .5; }
.skbpa-docs-crumbs-current { color: var(--skbpa-ink-faint); }

.skbpa-docs-head-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0; }

.skbpa-docs-productlinks {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; min-width: 0;
}
.skbpa-docs-productlinks-label { color: var(--skbpa-ink-faint); }
.skbpa-docs-productlinks-item {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--skbpa-line);
  border-radius: 4px;
  color: var(--skbpa-ink-soft);
  overflow-wrap: anywhere;
}
.skbpa-docs-productlinks-item:hover,
.skbpa-docs-productlinks-item:focus-visible {
  border-color: var(--skbpa-accent); color: var(--skbpa-accent-dark); text-decoration: none;
}

/* A checkpoint that carries a list rather than one sentence — the УВП-280Б.01
   power step ends in three indicator states, and they belong inside the box. */
.skbpa-docs-qs-result p { margin: 0 0 8px; }
.skbpa-docs-qs-result p:last-child { margin-bottom: 0; }
.skbpa-docs-qs-result ul { margin: 0; padding-left: 18px; }
.skbpa-docs-qs-result li { margin: 3px 0; }