/* Кейсы: оглавление с главной цифрой, разборы «было → стало», Минпань, реестр. Перенос _dev/design/cases/style.css. */


h1, h2, h3, h4 { font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
/* знаки при моноширинной цифре — запятая, ×, +, %, тире, единицы — набираются Fira, без широкой моноширинной клетки */
.sg { font-family: var(--sans); letter-spacing: 0; }
.ic--arrow { width: 22px; height: 11px; }
.ic--up { width: 10px; height: 14px; }
.skip:focus, .skip:focus-visible, .skip:hover { top: 12px; color: var(--paper); }

/* ---------- Кнопки и ссылки ---------- */
.btn--case .ic--arrow { transition: transform .35s var(--ease); }
.btn--case:hover .ic--arrow, .btn--case:focus-visible .ic--arrow { transform: translateX(4px); }

.out { padding: 4px 0; }

.link--big { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-body); padding-bottom: 4px; }

/* ---------- Шапка ---------- */

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

.frame { --frame-t: 32px; --frame-b: 72px; }

/* ---------- Лист 1: заголовок, доказательство, оглавление, штамп ---------- */

/* слева h1 и оглавление; справа два главных результата и штамп с главной кнопкой — в правом нижнем углу рамки вплотную */
.frame--intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  grid-template-areas: "intro side" "toc side";
  grid-template-rows: auto 1fr;
  column-gap: 72px;
  padding: 30px var(--frame-x) 0;
}
.intro { grid-area: intro; padding-bottom: 24px; }
.intro h1 { font-size: var(--fs-headline); line-height: 1.04; }
.intro__lead { margin-top: 10px; font-size: var(--fs-body); line-height: 1.35; color: var(--graphite); max-width: 44ch; text-wrap: pretty; }

.side { grid-area: side; display: flex; flex-direction: column; }

/* итоговая графа первого листа: два главных результата; правый край — по внутренней грани рамки, как штамп */
.wins { flex: 0 0 auto; display: flex; flex-direction: column; margin: 0 calc(-1 * var(--frame-x)) 0 0; border: var(--frame) solid var(--ink); border-right: 0; }
.sheet .wins__t { padding: 8px 20px 7px; border-bottom: var(--frame) solid var(--ink); font-size: var(--fs-label); font-weight: 400; font-style: italic; line-height: 1.45; letter-spacing: 0; color: var(--graphite); }
.wins__list { display: flex; flex-direction: column; background: var(--blue-tint); }
.win { display: flex; flex-direction: column; justify-content: center; padding: 12px 24px 14px; }
.win + .win { border-top: 1px solid var(--ink); }
.win__n { font-size: var(--fs-headline); line-height: 1; color: var(--ink); }
.win__what { margin-top: 6px; font-size: var(--fs-title); font-weight: 600; line-height: 1.2; }
.win__src { margin-top: 4px; font-size: var(--fs-label); line-height: 1.35; color: var(--graphite); text-wrap: pretty; }
.win__src a { color: var(--ink); font-weight: 600; text-decoration-color: var(--graphite); }
.win__src a:hover, .win__src a:focus-visible { color: var(--blue-ink); }

/* оглавление: проект и его главная цифра, строка — ссылка на разбор, лист или строку реестра */
.toc { grid-area: toc; align-self: start; }
/* под баннер cookie — пустое поле листа: баннер не закрывает последнюю строку оглавления */
.frame--intro { --under: 96px; padding-bottom: var(--under); }
.stamp.stamp--intro { margin-bottom: calc(-1 * var(--under)); }
.toc__head { display: flex; justify-content: space-between; padding: 0 12px 6px; font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.toc__box { border: var(--frame) solid var(--ink); }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li + li { border-top: 1px solid var(--hair); }
/* группа — строка-раздел таблицы: вес 600 и линия тушью снизу, на бумаге листа */
.toc__grp { padding: 6px 12px 4px; font-size: var(--fs-label); font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--ink); }
.toc ol + .toc__grp { border-top: 1px solid var(--ink); }
.toc a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px; align-items: baseline;
  min-height: 44px; padding: 8px 12px 9px;
  text-decoration: none; transition: background .2s, color .2s;
}
.toc b { font-size: var(--fs-annotation); font-weight: 600; text-decoration: underline; text-decoration-color: var(--thin); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.toc a > .num, .toc__fig { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: var(--fs-title); line-height: 1; white-space: nowrap; text-align: right; }
.toc__fig { font-size: var(--fs-annotation); }
.toc__fig .num { font-size: var(--fs-title); }
.toc__what { grid-column: 1; grid-row: 2; font-style: normal; font-size: var(--fs-label); line-height: 1.3; color: var(--graphite); }
.toc a:hover, .toc a:focus-visible { background: var(--blue-tint); color: var(--blue-ink); }
.toc a:hover b, .toc a:focus-visible b { text-decoration-color: currentColor; }
.toc a:focus-visible { outline-offset: -2px; }

/* штамп — в правом нижнем углу рамки и на высоком окне: свободное место уходит над ним */
.stamp.stamp--intro { width: auto; margin-top: auto; margin-right: calc(-1 * var(--frame-x)); margin-left: 0; }
/* подпись штампа: фото и имя автора */
.stamp__who { display: flex; align-items: center; gap: 16px; padding: 10px 18px; }
.stamp__photo { width: 72px; height: var(--stamp-photo); border: 1px solid var(--ink); }
.stamp__who b { display: block; font-size: var(--fs-title); font-weight: 600; line-height: 1.15; }
.stamp__who i { display: block; font-size: var(--fs-small); color: var(--graphite); }

/* ---------- Лист 4: Минпань ---------- */

.frame--minpan { display: grid; grid-template-columns: 560px minmax(0, 1fr); column-gap: 56px; align-items: start; }
.flag__view { margin: 0; }
.flag__text { display: flex; flex-direction: column; align-items: flex-start; }
.flag__text h2 { font-size: var(--fs-headline); line-height: 1.04; }
.flag__lead { margin-top: 8px; font-size: var(--fs-body); color: var(--graphite); }
.shot { display: block; border: 1px solid var(--ink); padding: 7px; background: #fff; transition: border-color .2s, background .2s; }
/* внутри листа всё плоское: наведение меняет рамку и поле, без тени */
.shot:hover, .shot:focus-visible { border-color: var(--blue); background: var(--blue-tint); }
.shot img { border: 1px solid var(--hair); aspect-ratio: 1440 / 770; object-fit: cover; object-position: top; }
/* «Что внутри» — шапка графы: курсив графитом, линия тушью снизу, как в таблицах листа */
.parts__h { width: 100%; margin-top: 24px; padding: 5px 12px 4px; border: var(--frame) solid var(--ink); font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.parts { width: 100%; margin: 0 0 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--frame) solid var(--ink); border-top: 0; font-size: var(--fs-small); }
.parts li { padding: 9px 12px; border-top: 1px solid var(--hair); }
.parts li:nth-child(-n+2) { border-top: 0; }
.parts li:nth-child(odd) { border-right: 1px solid var(--hair); }

/* размерная линия под снимком */
.dim { margin-top: 4px; padding: 0 12px; }
.dim::before { top: 30px; }
.dim::after { top: 26px; }
.dim__text { font-style: italic; font-size: var(--fs-body); }

/* ---------- Листы 2 и 3: разборы ---------- */

/* выписка из отчёта: шапка проекта и три графы — было, сделал, стало */
.report { border: var(--frame) solid var(--ink); }

.report__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name acts" "meta acts";
  column-gap: 32px; row-gap: 6px;
  padding: 14px 24px 12px;
  border-bottom: var(--frame) solid var(--ink);
}
.report__name { grid-area: name; }
.report__name h2 { font-size: var(--fs-headline); line-height: 1.04; }
.report__name p { margin-top: 2px; font-size: var(--fs-body); color: var(--graphite); }
.report__meta { grid-area: meta; font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
.report__acts { grid-area: acts; display: flex; align-items: center; gap: 24px; }

/* тело разбора: пары «было → стало» по строкам, справа — что сделал, снизу — остальные цифры и скорость */
.report__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "lead did" "pairs did" "notes notes";
  grid-template-rows: auto 1fr auto;
}

/* главный итог разбора — светло-синяя итоговая графа над парами */
.lead { grid-area: lead; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding: 14px 20px 12px; background: var(--blue-tint); border-bottom: 1px solid var(--ink); }
.lead__n { grid-row: 1 / 3; font-size: var(--fs-headline); line-height: 1; color: var(--ink); }
.lead__t { font-size: var(--fs-title); font-weight: 600; line-height: 1.2; }
.lead__was { grid-column: 2; font-size: var(--fs-label); line-height: 1.35; color: var(--graphite); }

/* линия между «было» и «стало» — на всю высоту графы, даже если «что сделал» длиннее пар */
.pairs-wrap { grid-area: pairs; display: flex; flex-direction: column; }
.pairs-box { flex: 1; position: relative; }
.pairs-box::after { content: ""; position: absolute; left: 300px; top: 0; bottom: 0; border-left: 1px solid var(--ink); pointer-events: none; }
.pairs { width: 100%; border-collapse: collapse; }
.pairs th { padding: 8px 20px 6px; text-align: left; font-weight: 400; font-style: italic; font-size: var(--fs-label); color: var(--graphite); border-bottom: 1px solid var(--ink); }
.pairs td { padding: 12px 20px 14px; vertical-align: top; }
.pairs tbody tr + tr td { border-top: 1px solid var(--hair); }
/* строка-разделитель: пары с другим периодом — пометка периода на всю ширину таблицы, поверх линии между графами */
.pairs .per th { position: relative; z-index: 1; padding: 6px 20px 5px; background: var(--paper); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); font-style: italic; font-size: var(--fs-label); color: var(--graphite); }
.pairs thead + tbody > .per:first-child th { border-top: 0; }
.pairs .per a { color: var(--ink); font-style: normal; font-weight: 600; }
.pairs .per + tr td { border-top: 0; }
.pw { width: 300px; }
.pw b { display: block; font-weight: 400; font-size: var(--fs-figure); line-height: 1.1; color: var(--graphite); white-space: nowrap; }
.pw > span { display: block; margin-top: 4px; font-size: var(--fs-label); line-height: 1.35; }
/* стрелка-треугольник на границе пары: было → стало */
.pg { position: relative; }
.pg::before { content: ""; position: absolute; left: -8px; top: 18px; width: 14px; height: 10px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.res b { display: block; font-size: var(--fs-chapter); line-height: 1.05; white-space: nowrap; color: var(--ink); }
.res > span { display: block; margin-top: 6px; font-size: var(--fs-small); line-height: 1.35; color: var(--ink); text-wrap: pretty; }

/* величины с другим периодом — не в паре, а строкой «Название: значение» под таблицей, со своей пометкой периода */
.off { border-top: 1px solid var(--ink); font-size: var(--fs-small); line-height: 1.35; }
.off__r { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 20px 6px; }
.off__r + .off__r { border-top: 1px solid var(--hair); }
.off dt { font-weight: 600; }
.off dd { display: contents; }
.off .num { font-size: var(--fs-figure); line-height: 1.1; white-space: nowrap; }
.off i { font-size: var(--fs-label); color: var(--graphite); }

.did-col { grid-area: did; padding: 8px 24px 16px; border-left: var(--frame) solid var(--ink); }
/* «Что сделал» — шапка графы, как «Было» и «Стало»: курсив графитом, линия тушью снизу */
.did-col h3 { margin: -8px -24px 6px; padding: 8px 24px 6px; font-size: var(--fs-label); font-weight: 400; font-style: italic; color: var(--graphite); border-bottom: 1px solid var(--ink); }
.did { font-size: var(--fs-small); line-height: 1.4; }
.did li { position: relative; padding: 4px 0 4px 18px; text-wrap: pretty; }
.did li::before { content: ""; position: absolute; left: 0; top: .9em; width: 8px; border-top: 1px solid var(--ink); }

/* под разбором: цифры без пары — компактный реестр «величина · цифра · пояснение» */
.facts { grid-area: notes; width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.35; }
.facts__h { caption-side: top; padding: 7px 20px 6px; text-align: left; font-size: var(--fs-label); font-style: italic; color: var(--graphite); border-top: var(--frame) solid var(--ink); border-bottom: 1px solid var(--ink); }
.facts th, .facts td { padding: 7px 20px 6px; text-align: left; vertical-align: baseline; }
.facts tr + tr > * { border-top: 1px solid var(--hair); }
.facts th { width: 300px; font-weight: 600; }
.facts td.facts__n { width: 160px; font-size: var(--fs-figure); line-height: 1.1; white-space: nowrap; text-align: right; border-right: 1px solid var(--hair); }
.facts td:last-child { color: var(--graphite); text-wrap: pretty; }
.report__end { margin-top: 14px; }

/* переход из оглавления: шапка разбора и строка проекта подсвечены светло-синим */
.sheet { scroll-margin-top: 76px; }
.sheet:target .report__head { background: var(--blue-tint); }
.reg tr { scroll-margin-top: 84px; }
.reg tr:target > * { background: var(--blue-tint); }

/* «к оглавлению» — тихая ссылка в конце разбора */
.up { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: var(--fs-small); color: var(--graphite); text-decoration: underline; }

/* ---------- Синяя лента ---------- */

/* ---------- Лист 5: ещё три сайта ---------- */

#h-more { margin-bottom: 24px; }
.reg { width: 100%; border-collapse: collapse; border: var(--frame) solid var(--ink); }
.reg th, .reg td { border: 1px solid var(--ink); padding: 12px 16px; text-align: left; vertical-align: top; }
.reg thead th { padding: 6px 16px; font-weight: 400; font-style: italic; font-size: var(--fs-label); color: var(--graphite); border-bottom-width: 2px; }
.reg tbody th { width: 420px; font-weight: 400; }
.reg tbody th b { display: block; font-size: var(--fs-title); font-weight: 600; line-height: 1.15; }
.reg tbody th > span { display: block; margin-top: 4px; font-size: var(--fs-label); line-height: 1.35; color: var(--graphite); }
.reg tbody th .out { margin-top: 6px; }
.reg__did { font-size: var(--fs-body); line-height: 1.45; text-wrap: pretty; }
.reg__n { width: 400px; padding-top: 4px; padding-bottom: 4px; }
/* цифры: подпись слева, значение моно справа */
.fig { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; }
.fig + .fig { border-top: 1px dotted var(--thin); }
.fig dt { font-size: var(--fs-label); line-height: 1.3; color: var(--graphite); }
.fig dd { margin: 0; font-size: var(--fs-small); line-height: 1; white-space: nowrap; }
.fig dd .num { font-size: var(--fs-figure); }

/* конец альбома: штамп-призыв в правом нижнем углу рамки вплотную */
.sheet-end { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; margin: 18px calc(-1 * var(--frame-x)) calc(-1 * var(--frame-b)) 0; }
/* пояснение метрик реестра — под таблицей, слева от штампа */
.reg__note { max-width: 62ch; padding-top: 4px; font-size: var(--fs-small); line-height: 1.45; color: var(--graphite); text-wrap: pretty; }

.stamp { --stamp-photo: 95px; position: relative; width: 440px; flex: none; }
.stamp__title { font-size: var(--fs-title); line-height: 1.15; }
.stamp__note { padding: 8px 18px; font-size: var(--fs-small); }
.stamp__sheet { border-bottom: 0; font-size: var(--fs-label); }
.stamp__sheet b { flex: 1; font-weight: 400; color: var(--ink); }
.stamp__sheet > span { border-left: 1px solid var(--hair); }


/* невысокое окно (ноутбук 768–820): первый лист целиком над баннером cookie — размерная линия, малый штамп и последняя строка оглавления видны */
@media (max-height: 820px) and (min-width: 1180px) {
  .top { padding-top: 6px; padding-bottom: 6px; margin-bottom: 10px; }
  .sheet { padding-top: 8px; padding-bottom: 8px; }
  .band { margin-bottom: 6px; }
  .frame--intro { padding-top: 18px; }
  .intro { padding-bottom: 16px; }
  .intro__lead { margin-top: 6px; }
  .toc a { padding-top: 4px; padding-bottom: 5px; }
  .toc__grp { padding-top: 3px; padding-bottom: 2px; }
  .frame--intro { --under: 72px; }
  .win { padding-top: 8px; padding-bottom: 10px; }
  .stamp { --stamp-photo: 68px; }
  .stamp__photo { width: 52px; }
  .stamp__who { padding-top: 6px; padding-bottom: 6px; }
  .stamp--intro .btn-tg { padding: 10px 18px; }
  .stamp--intro .stamp__note { padding-top: 5px; padding-bottom: 5px; }
  .stamp--intro .stamp__sheet > * { padding-top: 5px; padding-bottom: 5px; }
  .cookie { bottom: 10px; padding: 8px 16px; }
  .cookie__v > p:first-child { line-height: 1.3; }
}

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

.side { container: side / inline-size; }
.report { container: report / inline-size; }
.frame:has(> .reg) { container: reg / inline-size; }
.flag__text { container-type: inline-size; }

/* разворот складывается: заголовок, оглавление, итоговая графа и штамп — друг под другом; штамп в углу рамки */
@media (max-width: 1179px) {
  .frame--intro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "toc" "side"; row-gap: 28px; --under: 0px; }
  .intro { padding-bottom: 0; }
  .side { gap: 28px; }
  .stamp.stamp--intro { align-self: flex-end; width: min(440px, calc(100% + var(--frame-x))); }
  .frame--minpan { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .flag__view { max-width: 680px; }
}
/* два главных результата — в строку, пока помещаются */
@container side (width >= 560px) {
  .wins__list { flex-direction: row; }
  .win { flex: 1 1 0; }
  .win + .win { border-top: 0; border-left: 1px solid var(--ink); }
}

/* разбор: «что сделал» уходит под пары, шапка — в столбец */
@container report (width < 900px) {
  .report__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lead" "pairs" "did" "notes"; grid-template-rows: none; }
  .did-col { border-left: 0; border-top: var(--frame) solid var(--ink); }
}
@container report (width < 700px) {
  .report__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "meta" "acts"; padding: 14px 16px 12px; }
  .report__acts { flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
  .lead { padding: 12px 16px 10px; column-gap: 14px; }
  /* пары — пополам: линия между «было» и «стало» по середине */
  .pw { width: 50%; }
  .pairs-box::after { left: 50%; }
  .pairs th, .pairs td, .pairs .per th { padding-left: 14px; padding-right: 14px; }
  .pw b { white-space: normal; }
  .res b { font-size: var(--fs-headline); white-space: normal; }
  .off__r { padding-left: 16px; padding-right: 16px; }
  .did-col { padding: 8px 16px 14px; }
  .did-col h3 { margin: -8px -16px 6px; padding: 8px 16px 6px; }
  /* «ещё цифры» строками: величина и цифра в строку, пояснение под ними */
  .facts, .facts tbody { display: block; }
  .facts__h { display: block; padding: 7px 16px 6px; }
  .facts tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 8px 16px 9px; }
  .facts tr + tr { border-top: 1px solid var(--hair); }
  .facts tr + tr > * { border-top: 0; }
  .facts th, .facts td { display: block; width: auto; padding: 0; }
  .facts td.facts__n { width: auto; border-right: 0; }
  .facts td:last-child { grid-column: 1 / -1; margin-top: 4px; }
}

/* реестр проектов: строки-блоки; подпись графы — из data-label */
@container reg (width < 980px) {
  .reg, .reg tbody, .reg tr, .reg th, .reg td { display: block; width: auto; }
  .reg thead { display: none; }
  .reg { border: 0; }
  .reg tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); grid-template-areas: "name n" "did n"; border: var(--frame) solid var(--ink); }
  .reg tr + tr { border-top: 0; }
  .reg th, .reg td { border: 0; }
  .reg tbody th { grid-area: name; width: auto; }
  .reg__did { grid-area: did; padding-top: 0; }
  .reg__n { grid-area: n; border-left: 1px solid var(--ink); }
  .reg td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: var(--fs-label); font-style: italic; color: var(--graphite); }
  .reg__n[data-label]::before { margin: 8px 0 0; }
}
@container reg (width < 620px) {
  .reg tr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "did" "n"; }
  .reg__n { border-left: 0; border-top: 1px solid var(--hair); }
  .reg__did { font-size: var(--fs-small); }
}

@container (width < 400px) {
  .parts { grid-template-columns: minmax(0, 1fr); }
  .parts li:nth-child(2) { border-top: 1px solid var(--hair); }
  .parts li:nth-child(odd) { border-right: 0; }
}

/* узкий лист: пояснение метрик над штампом, штамп в углу рамки */
@media (max-width: 719px) {
  .sheet-end { flex-direction: column; align-items: flex-end; gap: 20px; }
  .reg__note { align-self: stretch; margin-right: var(--frame-x); }
  .sheet-end .stamp { width: min(440px, calc(100% + var(--frame-x))); }
  .stamp__who { padding: 10px 14px; }
}