/* Примеры отчётов: четыре карточки с началом письма и документ целиком в <dialog> */
.reports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.report { display: flex; flex-direction: column; gap: 14px; padding: 28px; min-width: 0; } /* min-width: таблица в превью не растягивает колонку */
.report h3 { font-size: 19px; line-height: 1.25; font-weight: 600; }
.report .btn { align-self: flex-start; margin-top: auto; }

/* Письмо как письмо (21.09): белый лист — шапка отправителя и дата, тема, строки разделов по одной (метка + начало текста,
   обрезка многоточием), чипы вложений. Высота у всех карточек одна по устройству, среза с затуханием нет.
   Расчёт — лист файла: имя файла, две колонки таблицы, ярлыки листов внизу. Лист — кнопка, открывает документ целиком. */
.report-preview {
  display: block; width: 100%; text-align: left; font: inherit;
  padding: 16px 18px 14px;
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink-2);
  font-size: 13px; line-height: 1.45;
  box-shadow: var(--sheet-shadow, 0 8px 16px -14px rgba(23, 26, 23, .5));   /* тень листа из paper.css, в тёмной теме своя */
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.report-preview:hover { transform: translateY(-2px); box-shadow: var(--sheet-shadow, none), 0 18px 28px -18px rgba(23, 26, 23, .5); }
.report-preview:focus-visible { border-radius: var(--r-lg); }
.mail-from { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.mail-avatar { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink); }
.mail-from time { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mail-subject { margin: 8px 0 0; font-weight: 600; color: var(--ink); font-size: 13px; line-height: 1.35; }
.mail-rows { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 5px; }
.mail-row { margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.mail-row b { color: var(--ink); font-weight: 600; }
.mail-att { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.att {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px;
  border-radius: 8px; background: var(--bg-soft); color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; white-space: nowrap;
}
.att .icon { width: 12px; height: 12px; }
.stage { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.stage i { width: 10px; height: 4px; border-radius: 2px; background: var(--line); }
.stage i.on { background: var(--moss); }
.sheet-name { display: flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.sheet-name .icon { width: 14px; height: 14px; }
.sheet table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 10px; font-size: 12.5px; }
.sheet th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 8px 6px 0; border-bottom: 1px solid var(--line); }
.sheet td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet th:first-child, .sheet td:first-child { width: 46%; }
.sheet th:nth-child(2), .sheet td:nth-child(2) { width: 32%; }
.sheet th:last-child, .sheet td:last-child { text-align: right; padding-right: 0; }
.sheet tr:last-child td { border-bottom: 0; }
.sheet td b, .sheet td:last-child { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sheet-tabs { display: flex; gap: 2px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.sheet-tabs span { padding: 3px 8px; border-radius: 6px; }
.sheet-tabs .on { background: var(--bg-soft); color: var(--ink); font-weight: 600; }
/* Документ целиком: та же шапка письма и чипы вложений в конце */
.doc-body .mail-from { font-size: 13px; }
.doc-body .mail-avatar { width: 26px; height: 26px; }
.doc-body .mail-subject { font-size: 15px; margin: 10px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.doc-body .mail-subject + * { margin-top: 1em; }
.doc-body .mail-att { margin-top: 1.4em; }
.reports-note { margin-top: 18px; font-size: var(--text-xs); color: var(--muted); }

/* Документ целиком */
.doc {
  width: min(780px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 36px 40px 32px;
  border: 0; border-radius: var(--r-xl);
  background: var(--bg); color: var(--ink);
  box-shadow: var(--shadow-card);
  overflow: auto;
  overscroll-behavior: contain;
}
.doc::backdrop { background: rgba(23, 26, 23, .45); backdrop-filter: blur(3px); }
/* Детали (21.09): документ выплывает и уходит за .25 с, подложка затемняется плавно; без поддержки @starting-style — мгновенно, как раньше */
.doc, .doc::backdrop { transition: opacity .25s var(--ease-out), scale .25s var(--ease-out), translate .25s var(--ease-out), overlay .25s allow-discrete, display .25s allow-discrete; }
.doc:not([open]) { opacity: 0; scale: .98; translate: 0 8px; }
.doc:not([open])::backdrop { opacity: 0; }
@starting-style { .doc[open] { opacity: 0; scale: .98; translate: 0 8px; } .doc[open]::backdrop { opacity: 0; } }
.doc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 10px; }
.doc-close { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; flex-shrink: 0; }
.doc-close .icon { width: 18px; height: 18px; }
.doc-close:hover { background: var(--sage); }
.doc h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 22px; }
.doc-body { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.doc-body p + p, .doc-body p + table, .doc-body table + p, .doc-body ol, .doc-body ul, .doc-body hr, .doc-body h3, .doc-body h4 { margin-top: 1em; }
.doc-body b { color: var(--ink); }
.doc-body h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: -.01em; color: var(--ink); margin-top: 1.6em; }
.doc-body h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 1.4em; }
.doc-body ol, .doc-body ul { padding-left: 1.3em; }
.doc-body ol { list-style: decimal; } .doc-body ul { list-style: disc; }
.doc-body li + li { margin-top: .35em; }
.doc-body hr { border: 0; border-top: 1px solid var(--line); margin-block: 1.6em; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.4; }
.doc-body th, .doc-body td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.doc-body th { font-weight: 600; color: var(--ink); background: var(--bg-soft); }
.doc-body th:first-child, .doc-body td:first-child { padding-left: 0; }
.doc-note { margin-top: 28px; font-size: var(--text-xs); color: var(--muted); }

@media (max-width: 980px) { .reports { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .mail-row { -webkit-line-clamp: 2; } .mail-from time { display: none; }                        /* строка письма в две строки; дата не влезает рядом с подписью */
  .sheet th:nth-child(2), .sheet td:nth-child(2) { display: none; }                               /* на телефоне лист в две колонки: позиция и сбор */
  .sheet th:first-child, .sheet td:first-child { width: 54%; }
}   /* на телефоне строка письма в две строки; дата не влезает рядом с подписью */
@media (max-width: 640px) {
  .doc { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 20px var(--page-gutter) 32px; border-radius: 0; }
  .doc h2 { font-size: 24px; }
  .doc-body { font-size: 15.5px; }
  /* Таблицы на телефоне — карточками: каждая ячейка с подписью столбца */
  .doc-body table, .doc-body tbody, .doc-body tr, .doc-body td { display: block; }
  .doc-body thead { display: none; }
  .doc-body tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .doc-body td { padding: 3px 0; border: 0; }
  .doc-body td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
  .doc-body td:empty { display: none; }
}