/* Услуги «Схема с выносками»: схема сайта с 11 выносками, таблица подтверждений. Перенос _dev/design/services/style.css. */



/* липкая шапка сайта + липкая шапка таблицы */
html { scroll-padding-top: calc(var(--scroll-offset) + 20px); }
/* запятая в моноширинной цифре — узкая, из Fira: «21,6», а не «21 , 6» */
.cm { font-family: var(--sans); letter-spacing: -.02em; }

/* ---------- Лист ---------- */

.frame { --frame-t: var(--pad); }

/* ---------- Лист 1: схема ---------- */
.sheet--hero .frame { flex: 1; display: flex; padding: 0; }

/* порядок чтения: заголовок и лид — над схемой слева; справа выход и штамп; в коде: заголовок, выход и штамп, схема */
.hero { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 448px; grid-template-rows: auto 1fr; grid-template-areas: "head side" "view side"; }

.hero__head { grid-area: head; padding: 26px 24px 0 14px; }
/* заголовок одной строкой над схемой — Headline */
.hero h1 { font-size: var(--fs-headline); line-height: 1.04; letter-spacing: -.015em; }
.hero__key { margin-top: 8px; max-width: 860px; font-size: var(--fs-annotation); line-height: 1.4; color: var(--graphite); text-wrap: pretty; }

/* снизу под схемой — пустое поле высотой с баннер cookie: при первом визите баннер ложится на него, а не на выноски */
.hero__view { grid-area: view; display: grid; align-items: start; justify-items: start; padding: 22px 12px 76px 14px; }

.hero__side { grid-area: side; display: flex; flex-direction: column; border-left: 1px solid var(--hair); }

/* выход: чьей задачи нет на схеме — аудит или письмо; ниже — к таблице доказательств */
.exit { margin: 30px 24px 18px; border-top: 1px solid var(--ink); padding-top: 12px; }
.exit__q { font-size: var(--fs-title); font-weight: 600; line-height: 1.3; }
.exit__a { margin-top: 4px; font-size: var(--fs-annotation); }
.exit__a a { text-decoration-line: underline; font-weight: 600; }
.exit__down { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 9px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-size: var(--fs-annotation); text-decoration: none; }
.exit__down .ic--down { width: 12px; height: 17px; transition: transform .25s var(--ease); }
.exit__down:hover .ic--down, .exit__down:focus-visible .ic--down { transform: translateY(3px); }

/* основная надпись: в правом нижнем углу рамки, вплотную */
.stamp { --stamp-photo: 120px; --stamp-seal-room: 20px; margin-top: auto; grid-template-columns: var(--stamp-photo) minmax(0, 1fr); grid-template-areas: "photo who" "cta cta" "facts facts" "sheet sheet"; margin-left: -1px; }
.stamp > * { border-right: 1px solid var(--ink); }
.stamp__photo { height: var(--stamp-photo); }
.stamp__who { padding: 12px 18px; border-right: 0; }
.stamp .stamp__cta { grid-area: cta; border-right: 0; }
.stamp__facts { padding: 0 0 2px; border: 0; }
.stamp__facts li { padding: 7px 18px; }
/* нижняя строка штампа — малый штамп листа */
.stamp .stamp__sheet { grid-area: sheet; display: flex; border-right: 0; border-bottom: 0; border-top: 1px solid var(--hair); font-size: var(--fs-caption); line-height: 1.4; color: var(--graphite); font-variant-numeric: tabular-nums; }
.stamp__sheet > * { padding: 6px 18px; }
.stamp__sheet > :first-child { flex: 1; }

/* ---------- Чертёж ---------- */

/* 1:1 — viewBox равен ширине колонки при 1440; ужимается только в низком окне (по высоте листа) */
/* в 768 ужимается по высоте листа — см. низкое окно */
.sch { display: block; width: 860px; max-width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.sch marker path, .sch marker circle { fill: var(--ink); }

.sch .box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.sch .box--old { fill: none; stroke: var(--graphite); stroke-dasharray: 7 5; }
.sch .page, .sch .tab, .sch .file, .sch .slot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.sch .slot { fill: var(--side-l); }
.sch .edge { stroke: var(--ink); stroke-width: 1.2; }
.sch .ln { fill: none; stroke: var(--graphite); stroke-width: 1; }
.sch .ln--dash { stroke-dasharray: 6 4; }
.sch .flow { stroke: var(--ink); stroke-width: 2; }
.sch .ext { stroke: var(--thin); stroke-width: 1; }
.sch .dim { stroke: var(--ink); stroke-width: 1; }
.sch .knob { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.sch .nd { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.sch .nd--hub { fill: var(--ink); }

.sch text { fill: var(--ink); }
/* кегли — со шкалы, без пересчёта: схема 1:1 */
.sch .t-s { font-size: var(--fs-label); }
.sch .t-i { font-style: italic; fill: var(--graphite); font-size: var(--fs-annotation); }
/* развилка: заголовки половин схемы — Title, номера позиций — моно */
.sch .t-g { font-size: var(--fs-title); font-weight: 600; }
.sch .t-gn { font: 400 var(--fs-figure) var(--mono); letter-spacing: -.02em; }
.sch .t-a { font: italic 400 var(--fs-label) var(--sans); fill: var(--graphite); }
/* модули на сервере — мелко, списком «модули:», не так, как услуги */
.sch .t-m { font: italic 400 var(--fs-caption) var(--sans); fill: var(--graphite); }
.sch .t-c { font-size: var(--fs-caption); fill: var(--graphite); }
/* ромб: услуга нужна и готовому сайту */
.sch .both { fill: var(--ink); transition: fill .2s; }
.sch .split { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 2 5; }

.sch .part * { transition: stroke .25s, fill .25s; }

/* выноски по DESIGN.md: точка на узле, полка; над полкой — номер и название услуги (ссылка), под полкой — задача «если …» курсивом графитом.
   Вся выноска — одна ссылка на страницу услуги; цифры — только в таблице */
.co polyline { fill: none; stroke: var(--ink); stroke-width: 1; transition: stroke .25s; }
.co a { cursor: pointer; }
.co a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.co__num rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; transition: fill .2s, stroke .2s; }
.co__num text { font: 400 var(--fs-figure) var(--mono); letter-spacing: -.02em; fill: var(--ink); }
/* прозрачная подложка: вся позиция — одна цель */
.co .hit { fill: transparent; }
.co__q { font: italic 400 var(--fs-annotation) var(--sans); fill: var(--graphite); transition: fill .2s; }
/* название услуги — тушью 600 со стрелкой: это ссылка */
.co__n { font: 600 var(--fs-annotation) var(--sans); fill: var(--ink); transition: fill .2s; }
.co__ar { font-weight: 400; }

/* связка: выноска, узел и строка пояснения подсвечиваются вместе (мышь и фокус) */
.co.is-on polyline { stroke: var(--blue); }
.co.is-on .co__num rect { fill: var(--blue-tint); stroke: var(--blue); }
.co.is-on text, .co.is-on tspan { fill: var(--blue-ink); }
.co.is-on .both { fill: var(--blue); }
.co__go:hover .co__n, .co__go:focus-visible .co__n { fill: var(--blue); }
.co__go:target .co__q, .co__go:target .co__n { fill: var(--blue-ink); }
.co__go:target .co__num rect { fill: var(--blue-tint); stroke: var(--blue); }
.sch .part.is-on .box, .sch .part.is-on .page, .sch .part.is-on .tab, .sch .part.is-on .file, .sch .part.is-on .slot, .sch .part.is-on .knob, .sch .part.is-on .nd { fill: var(--blue-tint); stroke: var(--blue); }
.sch .part.is-on .box--old { fill: var(--blue-tint); }
.sch .part.is-on .nd--hub { fill: var(--blue); }
.sch .part.is-on .ln, .sch .part.is-on .edge, .sch .part.is-on .flow, .sch .part.is-on .dim, .sch .part.is-on .ext { stroke: var(--blue); }
.sch .part.is-on text { fill: var(--blue-ink); }

/* ---------- Лист 2: пояснение ---------- */

.frame--legend h2 { font-size: var(--fs-headline); line-height: 1.04; }
/* глоссарий — перед первым употреблением терминов */
.terms { margin: 12px 0 24px; max-width: 90ch; font-size: var(--fs-small); color: var(--graphite); }
.terms a { color: var(--ink); text-decoration-line: underline; }

.expl { width: 100%; border-collapse: collapse; border: var(--frame) solid var(--ink); font-size: var(--fs-annotation); line-height: 1.4; }
.expl .c-pos { width: 60px; }
.expl .c-name { width: 290px; }
.expl .c-src { width: 230px; }
.expl th, .expl td { border: 1px solid var(--ink); padding: 12px 14px; text-align: left; vertical-align: top; }
.expl td { text-wrap: pretty; }
.expl thead th { font-weight: 400; font-style: italic; font-size: var(--fs-label); color: var(--graphite); padding: 6px 14px; border-bottom-width: 2px; }
/* шапка таблицы липнет под шапкой сайта; линии рисуются тенью — рамки ячеек при border-collapse не липнут */
.expl thead th { position: sticky; top: 58px; z-index: 2; background: var(--paper); box-shadow: inset 0 -2px 0 var(--ink), inset 0 1px 0 var(--ink); }

/* строки-доказательства внутри услуги разделены сеткой, услуги — тушью */
.svc { transition: background .2s; }
.svc tr + tr td { border-top-color: var(--hair); }
.svc.is-on, .svc:target { background: var(--blue-tint); }
.svc.is-on .pos a, .svc:target .pos a { color: var(--blue-ink); }

/* номер — ссылка на выноску схемы */
.expl .pos { padding: 0; text-align: center; transition: background .2s, color .2s; }
.pos a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; text-decoration: none; }
.pos .num { font-size: var(--fs-figure); line-height: 1.2; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--thin); }
.pos a:hover .num, .pos a:focus-visible .num { text-decoration-color: currentColor; }
.pos .ic--up { width: 10px; height: 14px; color: var(--graphite); }
.svc.is-on .pos .ic--up, .svc:target .pos .ic--up { color: var(--blue); }
.svc.is-on .pos .num, .svc:target .pos .num { text-decoration-color: currentColor; }
.expl .name { font-weight: 400; }
.name > a:first-child { display: inline; font-size: var(--fs-title); font-weight: 600; line-height: 1.2; text-decoration-line: underline; }
/* задача владельца — той же строкой, что под названием на выноске */
.name .task { display: block; margin-top: 6px; font-size: var(--fs-annotation); font-style: italic; line-height: 1.3; color: var(--ink); }

.src a { font-weight: 600; }
.expl td a { text-decoration-line: underline; }

/* «Что именно»: текст слева, цифры справа в той же графе */
.what { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 6px 28px; align-items: start; }
.what > p { grid-column: 1; max-width: 72ch; }
.what > p:only-child { grid-column: 1 / -1; }
.fig { grid-column: 2; margin: 0; }
.fig > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 2px 0; }
.fig > div + div { border-top: 1px dotted var(--thin); margin-top: 3px; padding-top: 5px; }
.fig dt { font-size: var(--fs-label); color: var(--graphite); line-height: 1.3; }
.fig dd { margin: 0; font-size: var(--fs-figure); white-space: nowrap; line-height: 1.2; }

/* ромб: услуга нужна и готовому сайту — тот же знак, что на схеме */
span.both { display: inline-block; width: 9px; height: 9px; margin: 0 2px 0 10px; background: var(--ink); transform: rotate(45deg); vertical-align: .2em; }
.svc.is-on span.both, .svc:target span.both { background: var(--blue); }

/* группа услуг: линия 2px и 600, без своей бумаги */
.expl__group th { font-size: var(--fs-title); font-weight: 600; line-height: 1.3; padding: 22px 14px 10px; border-top-width: var(--frame); }
.expl__group .num { display: inline-block; min-width: 46px; margin-right: 14px; font-size: var(--fs-figure); }
.expl__key { margin-left: 14px; font-size: var(--fs-small); font-weight: 400; font-style: italic; color: var(--graphite); }
.expl__key span.both { margin-left: 4px; }

/* под таблицей: примечания и цена */
.after { display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 44px; align-items: start; margin-top: 28px; }
.after__h { font-size: var(--fs-title); line-height: 1.15; margin-bottom: 10px; }

.notes ol { margin: 0; padding: 0 0 0 26px; font-size: var(--fs-small); color: var(--graphite); max-width: 78ch; }
.notes li { padding: 3px 0 3px 4px; text-wrap: pretty; }
.notes li::marker { font-variant-numeric: tabular-nums lining-nums; font-size: var(--fs-small); color: var(--ink); }
.tg-link { gap: 7px; margin-left: 4px; padding: 2px 0; color: var(--ink); text-decoration-line: underline; }
.tg-link .ic { width: 18px; height: 18px; }
.tg-link .ic--out { width: 12px; height: 12px; }

/* условия — графа в рамке тушью, без заливки: бумага на листе одна */
.price { padding: 14px 18px 14px; border: 1.5px solid var(--ink); }
.price dl { margin: 0; display: grid; }
.price__lead { font-size: var(--fs-small); color: var(--graphite); margin-bottom: 6px; }
.price__inc { display: block; margin-top: 2px; color: var(--graphite); text-wrap: pretty; }
.price dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 7px 0; font-size: var(--fs-small); }
.price dl > div + div { border-top: 1px solid var(--hair); }
.price dt { font-weight: 600; }
.price dd { margin: 0; }
.price__foot { margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--ink); font-size: var(--fs-label); color: var(--graphite); }
.price__foot a { color: var(--ink); text-decoration-line: underline; }

/* ---------- Низкое окно (1440×768): штамп целиком на первом экране ---------- */

@media (min-width: 1180px) and (max-height: 820px) {
 @container hero (width >= 1270px) {
  .hero__head { padding-top: 14px; }
  .hero h1 { font-size: var(--fs-headline); }
  .hero__key { margin-top: 4px; font-size: var(--fs-label); }
  /* исключение для низкого окна: схема ужимается по высоте листа, не уходя под баннер cookie */
  .sch { width: auto; height: max(440px, calc(100vh - 314px)); }
  .stamp { --stamp-photo: 100px; }
  .stamp__who { padding: 6px 18px; }
  .stamp__who span { font-size: var(--fs-label); }
  .stamp .stamp__cta { padding-top: 10px; padding-bottom: 10px; }
  .stamp__facts li { padding: 4px 18px; font-size: var(--fs-label); }
  .stamp__sheet > * { padding-top: 4px; padding-bottom: 4px; }
  .exit { margin-top: 16px; padding-top: 8px; }
  .exit__down { margin-top: 8px; padding: 6px 0; }
  .hero__view { padding-top: 10px; }
}
}


/* ---------- Узкие экраны ---------- */

/* разворот «схема | штамп» нужен 860 + 448; не помещается — штамп уходит под схему в правый нижний угол */
.sheet--hero .frame { container: hero / inline-size; }
.hero__view { container: view / inline-size; }
.frame--legend { container: legend / inline-size; }

/* 1270–1340: штамп уже (380), схема остаётся 1:1 рядом */
@container hero (1270px <= width < 1340px) {
  .hero { grid-template-columns: minmax(0, 1fr) 380px; }
}
@container hero (width < 1270px) {
  /* блок, а не сетка: у сетки дорожка растягивается по схеме, и процент отступа считается от неё */
  .hero__view { display: block; overflow: clip; }
  .hero { min-width: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "view" "side"; }
  .hero__head { padding: var(--pad) var(--pad) 0; }
  .hero__view { padding: 18px var(--pad) 28px; }
  .hero__side { flex-direction: row; flex-wrap: wrap; align-items: flex-end; border-left: 0; }
  .exit { flex: 1 1 300px; margin: 0 var(--pad) 24px; }
  .stamp { flex: 0 1 448px; margin-left: auto; }
}

/* схема всегда 1:1: колонка уже схемы — выноски уходят в список, на схеме остаётся окно изделия с номерами у узлов */
@container view (width < 860px) {
  .hero__view { overflow: hidden; }
  .sch {
    /* окно изделия (x 255–605) по центру; на самых узких экранах оно ужимается до ширины колонки */
    width: min(860px, 100cqw * 2.457); max-width: none; height: auto;
    margin: -34px 0 0 50%; transform: translateX(-50%);
  }
  .sch .co, .sch .t-g, .sch .t-a, .sch > g > .both { display: none; }
  .sch .pins { display: inline; }
  .positions { display: block; }
}

@container legend (width < 1000px) {
  .expl, .expl > tbody, .expl tr { display: block; }
  .expl thead { display: none; }
  .expl th, .expl td { border: 0; }
  .expl__group th { display: block; }
  .expl__group:not(:first-of-type) { border-top: var(--frame) solid var(--ink); }
  .svc { border-top: 1px solid var(--ink); }
  .svc tr { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 14em); grid-template-areas: "pos name src" "pos what what"; }
  .svc .pos { grid-area: pos; border-right: 1px solid var(--ink); }
  .svc .name { grid-area: name; padding-bottom: 4px; }
  .svc .src { grid-area: src; padding-bottom: 4px; }
  .svc td:last-child { grid-area: what; padding-top: 6px; }
  /* подпись графы — из data-label: шапки таблицы в свёрнутом виде нет */
  .svc .src::before { content: attr(data-label); display: block; font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
  .after { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@container legend (width < 640px) {
  .svc tr { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "pos name" "pos src" "pos what"; }
  .expl th, .expl td { padding-left: 12px; padding-right: 12px; }
  .expl .pos { padding: 0; }
  .svc .src { padding-top: 0; }
  .what { grid-template-columns: minmax(0, 1fr); }
  .fig { grid-column: 1; margin-top: 6px; }
  .expl__group th { padding: 18px 12px 8px; }
  .expl__group .num { min-width: 0; margin-right: 10px; }
  .expl__key { display: block; margin: 4px 0 0; }
  .price dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (max-width: 1179px) {
  .frame { --frame-b: 72px; }
}
@media (max-width: 719px) {
  .frame { --frame-b: 56px; }
  .sheet--hero .frame { padding: 0; }
  .stamp { flex-basis: 100%; margin: 0; }
  .exit { flex-basis: 100%; }
  .frame--legend h2 { font-size: var(--fs-headline); }
}