/*
  ЛИСТ АЛЬБОМА — ОБЩАЯ ВЁРСТКА ОБОИХ ПРИЛОЖЕНИЙ.

  Здесь то, что не знает ни про розетки, ни про венцы: сам лист и его поля,
  заголовок, подоснова чертежа (помещения, стены, проёмы, размерные цепочки,
  выноски), масштабная линейка, таблицы, титул, оговорки, штамп и правила
  печати. Знаки раздела — в таблице стилей самого приложения, поверх этой.

  Разделение то же и по той же причине, что у `plan-canvas.ts` и
  `sheet-plan.ts`: фигуры подосновы рисует оболочка, значит и стили их —
  здесь. Две копии этой вёрстки разошлись бы молча, и разошлись бы в том, что
  никто не проверяет глазами, — в полях листа и в толщине волоска.

  Один и тот же код работает на экране (предпросмотр) и на бумаге: браузер
  сам верстает страницы и разрывает таблицы по строкам — свой генератор PDF
  был бы лишней сущностью.

  Подключается ПЕРВОЙ, таблица приложения — после неё.
*/

.album { display: none; }

.app[data-mode="print"] .album { display: block; }
.app[data-mode="print"] .left,
.app[data-mode="print"] .right,
.app[data-mode="print"] .canvas-wrap,
.app[data-mode="print"] .sheet { display: none; }

.app[data-mode="print"] {
  grid-template-areas:
    "bar bar bar"
    "album album album"
    "status status status";
}
.album { grid-area: album; overflow-y: auto; background: var(--sunk); padding: 20px; }

.print-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 210mm;
  margin: 0 auto 16px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.print-toolbar .sheet-toggle {
  font: inherit;
  font-size: 12.5px;
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.print-toolbar .sheet-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
/*
  Переключатели листов (что войдёт в альбом) и обычные кнопки (что с ним
  сделать — печать, экспорт) в разметке идут одной лентой и выглядели
  неразличимо на два десятка контролов. Первая `.btn` сразу после
  переключателей — это всегда первая кнопка-действие (порядок задаётся
  разметкой `renderAlbum`/`renderTimberAlbum`), и авто-отступ перед ней
  прижимает все действия к правому краю, не трогая разметку.
*/
.print-toolbar .sheet-toggle + .btn { margin-left: auto; }

/*
 * Быстрый переход по листам.
 *
 * Альбом — один длинный скролл (в маленькой квартире это 9 листов, в доме
 * побольше — заметно больше), а переключатели выше — это включение/выключение
 * листа в составе, а не навигация. Прилипающая строка ссылок под ними даёт
 * прыгнуть сразу к нужному листу, не мотая колесом.
 */
.album-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 210mm;
  margin: 0 auto 16px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 12px;
}
.album-nav a {
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.album-nav a:hover { background: var(--sunk); color: var(--ink); }
.album-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── Лист ───────────────────────────────────────────────────────────── */

.page {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 16px;
  padding: 16mm 14mm 22mm;
  background: #fff;
  color: #111;
  position: relative;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
  font: 11pt/1.4 system-ui, "Segoe UI", sans-serif;
  break-after: page;
}

.sheet-title {
  font-family: var(--display);
  font-size: 20pt;
  font-weight: 700;
  margin: 0 0 10mm;
  padding-bottom: 3mm;
  border-bottom: 1.5pt solid #111;
}

.block-title { font-size: 12pt; font-weight: 700; margin: 7mm 0 3mm; }

.plan-holder { width: 100%; display: flex; justify-content: center; }

/*
 * Легенда рядом с планом, а не под ним.
 *
 * Где ширины листа хватает (A3 почти всегда, A4 у узкого плана), легенда
 * уходит колонкой вправо и перестаёт отнимать у чертежа высоту — а вместе с
 * ней ступень масштаба. Решает это `planSvg` (`PlanSheet.legendAside`): он же
 * подбирал масштаб, и поле листа они делят по одному правилу.
 */
.plan-row { display: flex; gap: 6mm; align-items: flex-start; }
.plan-col { flex: 1 1 auto; min-width: 0; }
.plan-aside { flex: 0 0 auto; width: 112mm; }


/*
 * План печатается в МАСШТАБЕ, а не «во всю ширину листа».
 *
 * Размер в миллиметрах бумаги задаёт сам SVG (см. plan-svg.ts), поэтому
 * растягивать его отсюда нельзя: `width: 100%` превращал масштаб в
 * произвольный, и подпись «М 1:50» в штампе была бы обещанием, которого лист
 * не держит. `max-width` оставлен страховкой на случай, когда не влез даже
 * самый грубый масштаб: лучше ужать, чем разъехаться за поле листа.
 */
.plan-svg { display: block; max-width: 100%; }

/*
 * Толщины линий и кегли заданы в МИЛЛИМЕТРАХ БУМАГИ и домножаются на
 * знаменатель масштаба `--u` (сколько мм плана в одном мм бумаги), который
 * SVG проставляет себе сам. Зашитые в мм плана значения читались только в
 * 1:50: в 1:100 тот же волосок вдвое тоньше, а подпись вдвое мельче.
 */
/*
 * Значения по умолчанию — на случай, если переменные не пришли. Настоящие
 * проставляет сам SVG из `metricsFor`: кегли считаются в миллиметрах бумаги
 * там же, где по ним считается раскладка подписей, и разъехаться не могут.
 */
.plan-svg { --u: 50; --f-label: 125px; --f-room: 175px; --f-area: 125px; --f-dim: 125px; }

/*
 * Архитектура — подоснова, электрика — поверх (см. шапку plan-svg.ts).
 * Стена печатается светло-серой заливкой, а не чёрной: раньше стена и
 * условный знак были одним и тем же `#111`, и знак в стене пропадал.
 */
.plan-svg .room { fill: #fafaf7; }
.plan-svg .wall { stroke: #c9c9c3; stroke-linecap: butt; }

/*
 * Выпуск стены за границу фрагмента (см. focus.ts).
 *
 * Светлее самой стены: он показывает, что стена продолжается, но ничего не
 * измеряет — размеры на фрагменте берутся только от углов помещения.
 */
.plan-svg .wall-stub { stroke: #e4e4de; }

/*
 * Проём: белый разрыв стены и тонкие косяки по краям. Разрыв кроет стену
 * целиком — иначе серая полоса просвечивала бы сквозь дверь.
 */
.plan-svg .opening-gap { fill: #fff; stroke: none; }
.plan-svg .opening-line { stroke: #b3b3ad; stroke-width: calc(var(--u) * 0.2px); }

/* Выноска: тонкая линия от подписи к своему знаку (multileader). */
.plan-svg .leader {
  stroke: #666;
  stroke-width: calc(var(--u) * 0.32px);
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}


.plan-svg .dim { stroke: #777; stroke-width: calc(var(--u) * 0.28px); }
.plan-svg .dim-text {
  font-size: var(--f-dim);
  fill: #444;
  text-anchor: middle;
  font-family: monospace;
}

/*
 * Текст поверх чертежа — с белой обводкой (`paint-order: stroke fill`):
 * обводка уходит ПОД заливку глифа и работает как выморозка, поэтому подпись
 * читается на стене, на трассе и на заливке помещения одинаково.
 */

.plan-svg .room-name,
.plan-svg .room-area {

  paint-order: stroke fill;
  stroke: #fff;
  stroke-linejoin: round;
}
.plan-svg .room-name {
  font-size: var(--f-room);
  fill: #333;
  text-anchor: middle;
  font-weight: 600;
  stroke-width: calc(var(--u) * 1px);
}
.plan-svg .room-area {
  font-size: var(--f-area);
  fill: #666;
  text-anchor: middle;
  font-family: monospace;
  stroke-width: calc(var(--u) * 0.8px);
}

/*
 * Размерные привязки: выносные линии, размерная линия с засечками и число
 * над ней. Тон чуть темнее подосновы, но легче электрики: размер — часть
 * архитектурного слоя, а главный на листе всё-таки условный знак.
 */
.plan-svg .chain-line,
.plan-svg .chain-witness,
.plan-svg .chain-tick {
  stroke: #8a8a84;
  fill: none;
}
.plan-svg .chain-line { stroke-width: calc(var(--u) * 0.18px); }
.plan-svg .chain-witness { stroke-width: calc(var(--u) * 0.13px); }
.plan-svg .chain-tick { stroke-width: calc(var(--u) * 0.25px); stroke: #55554f; }
.plan-svg .chain-text {
  font-size: var(--f-dim);
  /*
   * Размер светлее марки точки (#111) на два шага, а не на один: на листе
   * их всё равно больше, чем знаков, и при равном тоне глаз читает лист как
   * таблицу чисел, среди которой ищет электрику. Порядок важности —
   * знак, подпись знака, размер — задаётся именно тоном.
   */
  fill: #5b5b55;
  text-anchor: middle;
  font-family: monospace;
  paint-order: stroke fill;
  stroke: #fff;
  stroke-width: calc(var(--u) * 0.8px);
  stroke-linejoin: round;
}


/* Несущая стена на листе трасс: штробление в ней ограничено. */
.plan-svg .wall-bearing {
  stroke: #9a9a94;
  stroke-dasharray: calc(var(--u) * 1.6px) calc(var(--u) * 1.6px);
  stroke-linecap: butt;
}


.elev-list { display: flex; flex-direction: column; gap: 6mm; }
.elev-item { margin: 0; break-inside: avoid; }
.elev-item figcaption { font-size: 9pt; color: #444; margin-bottom: 1.5mm; }
.elev-svg { display: block; }
.plan-svg .elev-wall { fill: #fafaf7; stroke: #c9c9c3; stroke-width: calc(var(--u) * 0.4px); }
.plan-svg .elev-floor { stroke: #55554f; stroke-width: calc(var(--u) * 0.5px); }
.plan-svg .elev-opening { fill: #fff; stroke: #b3b3ad; stroke-width: calc(var(--u) * 0.25px); }

.plan-svg .elev-height { text-anchor: end; }
.plan-svg .elev-mark { text-anchor: middle; }


/* ── Масштабная линейка ─────────────────────────────────────────────── */

.plan-scale { margin: 4mm auto 0; width: max-content; text-align: left; }
.scale-ruler { display: flex; border: 0.3mm solid #111; height: 2mm; }
.scale-ruler i { display: block; height: 100%; }
.scale-ruler i.on { background: #111; }
.scale-marks { display: flex; font-size: 7pt; color: #333; font-family: monospace; }
.scale-marks b { display: block; text-align: right; font-weight: 400; }
.scale-marks b.zero { width: 0; }
.scale-unit { padding-left: 1.5mm; }
.scale-note { font-size: 7.5pt; color: #555; margin-top: 1mm; }

/* ── Таблицы ────────────────────────────────────────────────────────── */

table.grid { width: 100%; border-collapse: collapse; font-size: 9pt; }
table.grid th {
  text-align: left;
  border-bottom: 1pt solid #111;
  padding: 1.5mm 2mm 1.5mm 0;
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
table.grid td { padding: 1.2mm 2mm 1.2mm 0; border-bottom: 0.4pt solid #ccc; vertical-align: top; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tfoot td { border-top: 1pt solid #111; border-bottom: 0; font-weight: 700; }
table.grid tr { break-inside: avoid; }

table.data, table.totals-table { border-collapse: collapse; font-size: 10.5pt; margin: 6mm 0; }
table.data td, table.totals-table td { padding: 1.6mm 8mm 1.6mm 0; border-bottom: 0.4pt solid #ddd; }
table.data td:last-child, table.totals-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
table.totals-table { min-width: 90mm; }
table.totals-table tr.grand td {
  border-top: 1pt solid #111;
  border-bottom: 0;
  font-size: 13pt;
  font-weight: 700;
  padding-top: 3mm;
}

/* ── Титул и КП ─────────────────────────────────────────────────────── */

.title-page { display: flex; flex-direction: column; }
.title-top { font-size: 10pt; color: #666; }
.title-main { font-family: var(--display); font-size: 34pt; font-weight: 700; margin: 30mm 0 4mm; }
.title-object { font-size: 15pt; }
.title-address { font-size: 11pt; color: #555; margin-top: 1mm; }
.title-contacts { margin-top: auto; font-size: 10pt; color: #555; }
.title-date { font-size: 10pt; color: #555; margin-top: 2mm; }

.offer-lead { font-size: 12pt; margin: 0 0 5mm; }
.offer-terms ul { margin: 2mm 0 0; padding-left: 6mm; font-size: 10pt; }
.offer-terms li { margin-bottom: 1.5mm; }
.offer-signature { margin-top: 12mm; font-size: 10.5pt; }

.disclaimer {
  margin-top: 8mm;
  padding: 3mm 4mm;
  border-left: 2pt solid #999;
  font-size: 8.5pt;
  color: #444;
  max-width: 150mm;
}
.warn-block {
  margin-top: 6mm;
  padding: 3mm 4mm;
  border-left: 2pt solid #b33a2b;
  color: #b33a2b;
  font-size: 10pt;
}
.note-print { font-size: 8.5pt; color: #555; margin-top: 4mm; }
.note-print.warn { color: #b33a2b; }
.legend { font-size: 8.5pt; color: #444; margin-top: 4mm; }
.empty { color: #999; font-size: 10pt; }

/* ── Однолинейная схема ─────────────────────────────────────────────── */

/*
 * Ряд таблицы на группу, а не колонка на группу (см. шапку single-line.ts):
 * шрифт и значки держат постоянный физический размер, а не сжимаются под
 * ширину листа с ростом числа групп. Таблица — тот же класс `grid`, что у
 * кабельного журнала и спецификации, поэтому переносится по листам печати
 * теми же правилами, без отдельного кода на этот случай.
 */
.page.landscape { width: 297mm; min-height: 210mm; }
/*
 * A3 landscape — для планов, которые в масштабе не грубее 1:100 на A4 не
 * помещаются (дом, а не квартира). Формат выбирает сам план, см. planSvg.
 */
.page.a3 { width: 420mm; min-height: 297mm; }


.notes-list { font-size: 10pt; line-height: 1.45; margin: 0; padding-left: 6mm; }
.notes-list li { margin-bottom: 2mm; break-inside: avoid; }

/*
 * Подписи на титуле. Пустые строки под роспись и дату: комплект выпускает
 * программа, а отвечает за него человек — см. disclaimer выше.
 */
.sign-table { width: 100%; margin-top: 10mm; font-size: 10pt; border-collapse: collapse; }
.sign-table td { padding: 4mm 2mm 1mm 0; vertical-align: bottom; }
.sign-table .sign-line { width: 60%; border-bottom: 0.3mm solid #111; }
.sign-table .sign-date { width: 25%; border-bottom: 0.3mm solid #111; }

/* ── Штамп ──────────────────────────────────────────────────────────── */

.stamp {
  position: absolute;
  left: 14mm;
  right: 14mm;
  bottom: 10mm;
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  border-top: 1pt solid #111;
  padding-top: 2mm;
  font-size: 8pt;
  color: #333;
}
.stamp-title { font-weight: 700; }


/* ── Печать ─────────────────────────────────────────────────────────── */

@page { size: A4 portrait; margin: 0; }
@page landscape { size: A4 landscape; margin: 0; }
.page.landscape { page: landscape; }
@page a3land { size: A3 landscape; margin: 0; }
.page.a3 { page: a3land; }

@media print {
  body { background: #fff; overflow: visible; }
  .app { display: block; height: auto; }
  .bar, .left, .right, .canvas-wrap, .sheet, .status, .print-toolbar, .album-nav { display: none !important; }
  .album { display: block !important; padding: 0; background: #fff; overflow: visible; }
  .page { box-shadow: none; margin: 0; break-after: page; }
  .page:last-child { break-after: auto; }
}