/* Eco Club House — Service Guide
   Стиль и типографика повторяют офер Brady Technologies:
   Inter / Inter Tight, светлая oklch-палитра, A4-лист, синие капсы с волосяной линией. */

:root{
  color-scheme:light;
  --sans:"Inter",ui-sans-serif,system-ui,sans-serif;
  --display:"Inter Tight",ui-sans-serif,system-ui,sans-serif;
  --ink:oklch(0.15 0.01 250); --ink-soft:oklch(0.42 0.02 250); --ink-faint:oklch(0.58 0.015 250);
  --canvas:oklch(0.985 0.006 90); --surface:oklch(1 0 0);
  --surface-soft:oklch(0.965 0.008 220); --surface-raised:oklch(0.99 0.004 220);
  --line:oklch(0.88 0.012 230); --line-soft:oklch(0.93 0.008 230);
  --blue:oklch(0.61 0.19 248); --blue-deep:oklch(0.42 0.18 250);
  --cyan:rgb(6 182 212); --cyan-soft:rgb(6 182 212 / 0.11);
  --green:oklch(0.58 0.17 150); --amber:oklch(0.62 0.16 68);
  --page-w:210mm; --pad-x:18mm;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--surface-soft);color:var(--ink);
  font-family:var(--sans);font-size:10.5pt;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

.sheet{width:var(--page-w);margin:0 auto 10mm;background:var(--surface);
  box-shadow:0 1.5rem 4rem rgb(17 24 39 / 0.1), 0 0 0 1px rgb(17 24 39 / 0.04);}

/* ── letterhead: тёмный баннер с фотографией дома ── */
.letterhead{position:relative;display:flex;align-items:flex-end;
  height:52mm;overflow:hidden;background:oklch(0.22 0.03 150)}
.letterhead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 62%}
.letterhead:after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgb(8 20 14 / 0.92) 0%, rgb(8 20 14 / 0.72) 48%, rgb(8 20 14 / 0.35) 100%)}
.letterhead .lh{position:relative;z-index:1;padding:0 var(--pad-x) 7mm;color:#fff}
.letterhead .eyebrow{font-size:7.4pt;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:oklch(0.86 0.06 160);margin-bottom:2.4mm}
.letterhead .nm{font-family:var(--display);font-size:25pt;font-weight:640;
  letter-spacing:-.025em;line-height:1}
.letterhead .sub{font-family:var(--display);font-size:11pt;font-weight:450;
  letter-spacing:.02em;color:oklch(0.9 0.02 160);margin-top:2mm}

.meta{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;padding:9mm var(--pad-x) 0}
.meta .to{font-size:10pt;color:var(--ink-soft)}
.meta .to b{font-family:var(--display);color:var(--ink);font-weight:600}
.meta .date{margin-left:auto;font-size:7.8pt;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:550}
.rule{height:1px;background:var(--line);margin:4mm var(--pad-x) 0}
.body{padding:8mm var(--pad-x) 14mm}

h1{font-family:var(--display);font-size:21pt;line-height:1.2;letter-spacing:-.02em;
  font-weight:620;margin:0 0 2mm}
.lede{font-size:11pt;color:var(--ink-soft);margin:0 0 7mm;max-width:52em}

/* ── части ── */
.part{margin:11mm 0 6mm;break-before:page;page-break-before:always;
  border-top:1.4px solid var(--line);padding-top:5mm}
.part:first-of-type{break-before:auto;page-break-before:auto;margin-top:9mm}
.part .lbl{font-size:7.8pt;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-deep);font-weight:650;margin-bottom:1.6mm}
.part .ttl{font-family:var(--display);font-size:18pt;font-weight:630;letter-spacing:-.02em}

/* ── разделы ── */
h2{font-family:var(--display);font-size:15.5pt;letter-spacing:-.015em;
  color:var(--ink);font-weight:630;margin:9mm 0 3.4mm;line-height:1.25;
  display:flex;align-items:baseline;gap:3mm;break-after:avoid;page-break-after:avoid}
h2:first-child{margin-top:0}
h2:after{content:"";flex:1;height:1px;background:var(--line);align-self:center}
h2 .n{flex:0 0 auto;font-family:var(--sans);font-size:9.6pt;font-weight:650;
  font-variant-numeric:tabular-nums;color:var(--blue-deep);letter-spacing:.04em;
  padding-right:2.2mm;border-right:1px solid var(--line);margin-right:.4mm}
h3{font-family:var(--display);font-size:12pt;font-weight:620;margin:5.4mm 0 1.6mm;
  letter-spacing:-.012em;break-after:avoid;page-break-after:avoid}

p{margin:0 0 3.4mm;max-width:58em}
strong{font-weight:620;color:var(--ink)}
em{font-style:italic}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--surface-soft);padding:.3mm 1.2mm;border-radius:1mm}
ul{margin:0 0 3.4mm;padding-left:6mm;max-width:58em}
li{margin-bottom:2.2mm}
li:last-child{margin-bottom:0}
.fine{font-size:9pt;color:var(--ink-faint);max-width:60em;margin:0 0 3.4mm}

/* ── содержание ── */
.toc{background:var(--surface-raised);border:1px solid var(--line);border-radius:3mm;
  padding:6mm 6.6mm;margin:0 0 8mm;break-inside:avoid;page-break-inside:avoid}
.toc .hd{font-size:7.8pt;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-deep);font-weight:650;margin-bottom:3.4mm}
.toc .grp{display:table;width:100%;margin-bottom:3.4mm}
.toc .grp:last-child{margin-bottom:0}
.toc .gl{font-family:var(--display);font-size:10.6pt;font-weight:620;letter-spacing:-.01em;
  margin-bottom:1.6mm}
.toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:8mm}
.toc li{margin-bottom:1.4mm;font-size:10pt;break-inside:avoid}
.toc a{color:var(--ink-soft);text-decoration:none;display:flex;gap:2.4mm}
.toc a:hover{color:var(--blue-deep)}
.toc a .n{color:var(--ink-faint);font-variant-numeric:tabular-nums;flex:0 0 5mm;text-align:right}

/* ── выноски ── */
.callout{background:var(--cyan-soft);border:1px solid var(--line);
  border-left:3px solid var(--cyan);border-radius:3mm;padding:5mm 6mm;margin:0 0 4mm;
  break-inside:avoid;page-break-inside:avoid;max-width:60em}
.callout.green{background:oklch(0.58 0.17 150 / 0.08);border-left-color:var(--green)}
.callout.amber{background:oklch(0.62 0.16 68 / 0.09);border-left-color:var(--amber)}
.callout.grey{background:var(--surface-raised);border-left-color:var(--line)}
.callout p{margin-bottom:2.6mm}
.callout p:last-child{margin-bottom:0}
.callout ul{margin-bottom:0}
.callout .lbl{font-size:7.4pt;letter-spacing:.14em;text-transform:uppercase;
  font-weight:650;color:var(--ink-faint);margin-bottom:2.2mm}
.callout.green .lbl{color:oklch(0.46 0.15 150)}
.callout.amber .lbl{color:oklch(0.5 0.14 68)}
.callout.key p{font-size:11pt;color:var(--ink)}

/* готовые тексты */
.script{position:relative;background:var(--surface);border:1px dashed var(--cyan);
  border-left:3px solid var(--cyan);border-radius:3mm;padding:5mm 6mm;margin:0 0 4mm;
  break-inside:avoid;page-break-inside:avoid;max-width:60em}
.script .lbl{font-size:7.4pt;letter-spacing:.14em;text-transform:uppercase;
  font-weight:650;color:oklch(0.48 0.1 220);margin-bottom:2.4mm}
.script p{margin-bottom:2.6mm;color:var(--ink-soft)}
.script p:last-child{margin-bottom:0}
.copy{position:absolute;top:4mm;right:4.6mm;font-family:var(--sans);
  font-size:7.4pt;letter-spacing:.08em;text-transform:uppercase;font-weight:650;
  color:var(--blue-deep);background:var(--surface-raised);border:1px solid var(--line);
  border-radius:9mm;padding:1.4mm 3.4mm;cursor:pointer}
.copy:hover{background:var(--blue-deep);color:#fff;border-color:var(--blue-deep)}
.copy.done{background:oklch(0.58 0.17 150 / 0.12);border-color:var(--green);
  color:oklch(0.44 0.14 150)}

/* ── карточки 2-up, table-based для WeasyPrint ── */
.proof{display:table;table-layout:fixed;width:calc(100% + 6mm);margin:0 -3mm 4mm;
  border-spacing:3mm 3mm;break-inside:avoid;page-break-inside:avoid}
.proof .row{display:table-row}
.proof .cell{display:table-cell;width:50%;vertical-align:top;
  background:var(--surface-raised);border:1px solid var(--line);
  border-left:3px solid var(--green);border-radius:3mm;padding:4mm 4.6mm;
  font-size:9.4pt;color:var(--ink-soft)}
.proof .cell.empty{background:transparent;border:none}
.proof b{display:block;font-family:var(--display);color:var(--ink);font-size:11pt;
  font-weight:640;letter-spacing:-.015em;margin-bottom:1.2mm}

/* ── нумерованные шаги ── */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 4mm;max-width:60em}
ol.steps li{counter-increment:s;position:relative;padding-left:11mm;margin-bottom:4mm}
ol.steps li:before{content:counter(s);position:absolute;left:0;top:0;
  width:7.4mm;height:7.4mm;border-radius:50%;background:var(--blue-deep);color:#fff;
  font-family:var(--display);font-size:9.6pt;font-weight:660;
  display:flex;align-items:center;justify-content:center}
ol.steps li b{font-family:var(--display);font-size:10.6pt;font-weight:620;display:block;
  letter-spacing:-.01em;margin-bottom:.8mm}
ol.steps li span{display:block;font-size:9.6pt;color:var(--ink-soft)}

/* ── таблица «ключ — значение» ── */
table.fit{width:100%;border-collapse:collapse;font-size:9.6pt;margin:0 0 4mm;
  break-inside:avoid;page-break-inside:avoid}
table.fit td{padding:3.2mm 0;border-bottom:1px solid var(--line-soft);vertical-align:top;
  color:var(--ink-soft)}
table.fit td:first-child{width:34%;padding-right:6mm}
table.fit td:first-child b{font-family:var(--sans);color:var(--ink-faint);font-size:7.8pt;
  letter-spacing:.1em;text-transform:uppercase;font-weight:650;display:block}
table.fit tr:last-child td{border-bottom:none}

/* ── цитата ── */
.q{font-size:10.6pt;color:var(--ink-soft);font-style:italic;
  border-left:2px solid var(--line);padding-left:4mm;margin:0 0 3.4mm;max-width:56em}

/* ── фото ── */
figure.photo{margin:0 0 4mm;break-inside:avoid;page-break-inside:avoid}
figure.photo img{display:block;width:100%;height:auto;border-radius:3mm;
  border:1px solid var(--line)}
figure.photo figcaption{font-size:9pt;color:var(--ink-faint);margin-top:2mm}

/* ── схемы ── */
figure.diagram{margin:0 0 5mm;max-width:64em;break-inside:avoid;page-break-inside:avoid}
figure.diagram svg{display:block;width:100%;height:auto;font-family:var(--sans)}
figure.diagram figcaption{font-size:9pt;color:var(--ink-faint);margin-top:2mm}

.pnum{padding:0 var(--pad-x) 7mm;font-size:7.8pt;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:550;display:flex;gap:6mm}
.pnum span:last-child{margin-left:auto}

/* ── наверх (только экран) ── */
.totop{position:fixed;right:18px;bottom:18px;z-index:20;
  font-family:var(--sans);font-size:7.8pt;letter-spacing:.1em;text-transform:uppercase;
  font-weight:650;color:var(--blue-deep);background:var(--surface);
  border:1px solid var(--line);border-radius:9mm;padding:2.2mm 4mm;cursor:pointer;
  box-shadow:0 .6rem 1.6rem rgb(17 24 39 / 0.12);opacity:0;pointer-events:none;
  transition:opacity .2s ease}
.totop.on{opacity:1;pointer-events:auto}

@media screen{
  body{padding:10mm 0 18mm}
  .sec,h3{scroll-margin-top:4mm}
}

/* ── узкие экраны: лист распрямляется на всю ширину ── */
@media (max-width:230mm){
  :root{--page-w:100%;--pad-x:7mm}
  body{font-size:11pt;padding:0 0 14mm}
  .sheet{box-shadow:none;margin-bottom:0}
  .letterhead{height:44mm}
  .letterhead .nm{font-size:20pt}
  .toc ol{columns:1}
  .proof{display:block;width:100%;margin:0 0 4mm}
  .proof .row{display:block}
  .proof .cell{display:block;width:100%;margin-bottom:3mm}
  .proof .cell.empty{display:none}
  .part{break-before:auto;page-break-before:auto}
}

/* ── телефон ── */
@media screen and (max-width:600px){
  h2{gap:2.4mm}
  .meta{flex-direction:column;gap:4px}
  .meta .date{margin-left:0}
  .toc{padding:18px;border-radius:12px}
  .callout,.script{padding:16px 18px;border-radius:12px}
  .script{padding-top:42px}
  .copy{top:12px;right:14px}
  table.fit tbody,table.fit tr,table.fit td{display:block}
  table.fit tr{padding:10px 0;border-bottom:1px solid var(--line-soft)}
  table.fit tr:last-child{border-bottom:none}
  table.fit td{padding:0;border-bottom:none}
  table.fit td:first-child{width:auto;padding:0 0 4px}
  ol.steps li{padding-left:34px}
  ol.steps li:before{width:24px;height:24px;font-size:12px}
  .q{padding-left:14px}
  figure.diagram{margin-bottom:18px}
  .totop{right:12px;bottom:12px}
  /* читаемость на телефоне: ничего мельче 12px, основной текст 16px */
  body{font-size:16px}
  .lede,.callout.key p{font-size:16.5px}
  .meta .to,.toc li,ol.steps li span,table.fit,.proof .cell{font-size:15px}
  .toc .gl,ol.steps li b,.q{font-size:16px}
  .fine,figure.photo figcaption,figure.diagram figcaption{font-size:13.5px}
  h2 .n,ol.steps li:before{font-size:13px}
  .letterhead .eyebrow,.meta .date,.part .lbl,.toc .hd,.callout .lbl,.script .lbl,.copy,
  table.fit td:first-child b,.pnum,.totop{font-size:12px}
}

@page{size:A4;margin:0}
@media print{
  html,body{background:#fff;padding:0;font-size:10.5pt}
  .sheet{width:auto;box-shadow:none;margin:0}
  .letterhead{break-after:avoid;page-break-after:avoid}
  .copy,.totop{display:none !important}
  a{color:var(--blue-deep);text-decoration:none}
  .toc{break-after:page;page-break-after:always}
}
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}