/* Окно документа, как в дашборде BloomDeals: сверху название, масштаб, «Завантажити» и закрыть,
   ниже таблица файла. Окно по ширине таблицы, не шире экрана. Цвета из токенов панели, поэтому работает в светлой и тёмной теме. */

.dv {--bg:rgb(var(--c-surface)); --sunk:rgb(var(--c-surface-sunken));
     --line:rgb(var(--c-line)); --line-2:rgb(var(--c-line-strong));
     --ink:rgb(var(--c-ink-900)); --ink-2:rgb(var(--c-ink-700)); --ink-3:rgb(var(--c-ink-500));
     width:fit-content; min-width:min(640px, calc(100vw - 48px)); max-width:calc(100vw - 48px); height:calc(100dvh - 48px); max-height:none; margin:auto; padding:0;
     border:1px solid var(--line-2); border-radius:12px; background:var(--bg); color:var(--ink);
     font-family:inherit; font-size:15px;}
.dv[open] {display:flex; flex-direction:column;}
.dv::backdrop {background:rgb(0 0 0 / .5);}
/* Окно поднимается на 16px за .36s и уходит за .16s. */
.dv[open] {animation:dv-in .36s cubic-bezier(.2,0,0,1);}
.dv[open]::backdrop {animation:dv-fade .36s cubic-bezier(.2,0,0,1);}
.dv.dv-out {animation:dv-out .16s cubic-bezier(.2,0,0,1) forwards;}
.dv.dv-out::backdrop {animation:dv-fade .16s cubic-bezier(.2,0,0,1) reverse forwards;}
@keyframes dv-in {from {opacity:0; transform:translateY(16px);}}
@keyframes dv-out {to {opacity:0;}}
@keyframes dv-fade {from {opacity:0;}}
.dv-head {display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px;
          border-bottom:1px solid var(--line);}
.dv-head h2 {margin:0; min-width:0; overflow-wrap:anywhere; font-size:16px; font-weight:700;}
.dv-acts {display:flex; flex:0 0 auto; align-items:center; gap:8px;}
.dv-btn {display:inline-flex; flex:0 0 auto; width:36px; height:36px; align-items:center; justify-content:center;
         padding:0; border:1px solid var(--line-2); border-radius:10px; background:var(--bg); color:var(--ink-2);
         cursor:pointer; text-decoration:none;}
.dv-btn[hidden] {display:none;}
.dv-btn:hover {border-color:var(--ink-3); color:var(--ink);}
.dv-btn:focus-visible {outline:2px solid var(--ink); outline-offset:2px;}
.dv-btn svg {width:18px; height:18px;}
.dv-zoom {display:flex; align-items:center; gap:2px; margin-right:8px;}
.dv-zoom-v {min-width:48px; height:36px; padding:0 4px; border:0; border-radius:8px; background:none;
            font:inherit; font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink-2); cursor:pointer;}
.dv-zoom-v:hover {color:var(--ink);}
.dv-zoom-v:focus-visible {outline:2px solid var(--ink); outline-offset:0;}
.dv-pages {flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:auto; scrollbar-width:none;}
.dv-pages::-webkit-scrollbar {display:none;}
.dv-sheet {flex:0 0 auto; width:max-content; min-width:100%; animation:dv-fade .24s cubic-bezier(.2,0,0,1);}
/* Таблица файла: шрифт растёт с масштабом, шапка остаётся видна при прокрутке. */
.dv-table {width:100%; border-collapse:separate; border-spacing:0; font-size:calc(14px * var(--zoom, 1)); line-height:1.4; -webkit-user-select:text; user-select:text;}
.dv-table th {position:sticky; top:0; z-index:1; padding:.6em .9em; background:var(--sunk); border-bottom:1px solid var(--line-2);
              text-align:left; font-weight:600; color:var(--ink-2); white-space:nowrap;}
.dv-table td {padding:.45em .9em; border-bottom:1px solid var(--line); white-space:nowrap;}
.dv-table :is(th, td):first-child {padding-left:calc(20px * var(--zoom, 1));}
.dv-table :is(th, td):last-child {padding-right:calc(20px * var(--zoom, 1));}
.dv-table th {vertical-align:bottom;}
.dv-table .dv-w {width:22em; min-width:22em; white-space:normal;}
.dv-table th.dv-h {width:13em; white-space:normal;}
.dv-table td {vertical-align:top;}
.dv-table :is(th, td) + :is(th, td) {border-left:1px solid var(--line);}
.dv-table :is(th, td).dv-n {text-align:right; font-variant-numeric:tabular-nums;}
.dv-msg {margin:auto; color:var(--ink-3); text-align:center;}
/* Имя, которое открывает файл: подчёркивание и рука появляются под курсором. */
:where(.dv-link) {padding:0; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer;
          text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
          text-decoration-color:transparent; transition:text-decoration-color .16s cubic-bezier(.2,0,0,1);}
:where(.dv-link):hover, :where(.dv-link):focus-visible {text-decoration-color:rgb(var(--c-ink-900));}
:where(.dv-link):focus-visible {outline:2px solid rgb(var(--c-ink-900)); outline-offset:2px; border-radius:4px;}
html.dv-wait, html.dv-wait * {cursor:progress !important;}
/* На телефоне курсора нет: нажатое имя файла бледнеет, пока файл грузится. */
[data-doc].dv-busy {opacity:.45; transition:opacity .16s;}
/* Нажатие открывает, а не выделяет текст. */
[data-doc] {cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;}
.dv-head, .dv-pages {-webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;}
.dv:focus-visible {outline:none;}
@media (prefers-reduced-motion: reduce) {
  .dv[open], .dv[open]::backdrop, .dv.dv-out, .dv.dv-out::backdrop {animation:none;}
  .dv-sheet {animation:none;}
}
@media (pointer: coarse) { .dv-btn {width:44px; height:44px;} }
@media (max-width: 640px) {
  .dv {width:100vw; min-width:0; max-width:none; height:100dvh; border-radius:0;}
  .dv-head {padding:10px 12px 10px 16px;}
  .dv-zoom {display:none;}
  .dv-table :is(th, td):first-child {padding-left:calc(16px * var(--zoom, 1));}
}