/* The reading and «Кратко» of a file (views/files.js, docs/PLAN-file-readings.md): the state icon on a file's card,
   the card over a file, the two modes of the viewer, the reading on its paper sheet, the history as a diff. */

/* the card: the state of the reading before size · who */
.fcard .fsub { display: flex; align-items: center; gap: 4px; }
.fcard .fsub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fcard .fsub > .i { flex: none; width: 12px; height: 12px; }
.fsub .st-failed, .file-hover .st-failed, .vw-read-state .st-failed { color: var(--red); }

/* over a file: its whole name, the state of the reading, «Кратко» */
.file-hover { position: fixed; z-index: 58; width: min(340px, calc(100vw - 16px)); padding: 10px 12px; border-radius: var(--r-md); background: var(--elev); color: var(--text); box-shadow: var(--shadow); font-size: var(--fs-body); line-height: 1.45; pointer-events: none; animation: tip-in .12s var(--ease); }
.file-hover[hidden] { display: none; }
.fh-name { font-weight: 550; overflow-wrap: anywhere; }
.fh-state { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--text-3); font-size: var(--fs-caption); }
.fh-state .i { width: 14px; height: 14px; }
.fh-sum { margin-top: 8px; max-height: 260px; overflow: hidden; color: var(--text-2); }
.fh-sum > :first-child { margin-top: 0; }
.fh-sum > :last-child { margin-bottom: 0; }

/* the viewer's actions: on a computer in the head, after the name — «3 из 4», «Кратко», «Расшифровка», «Скачать» */
.vw-acts { display: flex; align-items: center; gap: 10px; flex: none; }
.vw-acts .vw-step, .vw-acts .vw-acts-gap { display: none; }
/* a long name ends with «…» before «Закрыть» — the block of the name and its grey line may shrink (Vlad, 13.11.2026) */
.vw-name > div { min-width: 0; }
.vw-top .vw-close { flex: none; }
.vw-name .faint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a phone (Vlad, 13.11.2026): the head keeps the file and «Закрыть»; the actions go to a bar at the bottom, under the
   thumb — «‹ 3 из 4 ›» on the left, «Кратко», «Расшифровка», «Скачать» on the right; the file gets the whole width */
@media (max-width: 860px) {
  .vw-top .vw-name { flex: 1; }
  .vw-top .vw-title { max-width: none; }
  .vw-top > .spacer { display: none; }
  .vw-acts { position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--text) 6%, var(--viewer-ground)); border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
  .vw-acts .vw-step { display: inline-flex; width: 36px; padding: 0; justify-content: center; }
  .vw-acts .vw-step[hidden] { display: none; }
  .vw-acts .vw-acts-gap { display: block; flex: 1; }
  .vw-acts .vw-count { font-variant-numeric: tabular-nums; }
  /* the page ends above the bar; a file with nothing to do and alone has no bar */
  .viewer:has(.vw-acts > :is(.vw-step, .vw-mode, .vw-dl):not([hidden])) { padding-bottom: calc(53px + env(safe-area-inset-bottom)); }
  .vw-acts:not(:has(> :is(.vw-step, .vw-mode, .vw-dl):not([hidden]))) { display: none; }
}

/* the viewer: «Кратко» and «Расшифровка» next to «Скачать»; the one shown is lit */
.vw-acts .vw-mode { width: 36px; padding: 0; justify-content: center; }
.vw-acts .vw-mode[aria-pressed="true"] { background: color-mix(in srgb, var(--text) 14%, transparent); }

/* the reading on its sheet: its state and actions above it */
.vw-reading { display: block; }
.vw-read-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 820px; margin: 0 auto 10px; color: var(--text-2); }
.vw-read-bar .spacer { flex: 1; }
.vw-read-bar .btn { color: var(--text); border-color: color-mix(in srgb, var(--text) 18%, transparent); background: color-mix(in srgb, var(--text) 6%, transparent); }
.vw-read-bar .btn.ghost { background: transparent; border-color: transparent; }
.vw-read-bar .btn.primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.vw-read-state { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vw-read-state .faint { color: var(--text-3); }
.vw-read-paper .rich-body { color: inherit; min-height: 40vh; outline: none; }
.vw-read-empty { color: var(--text-2); }

/* a page of the file: a thin divider with its number */
.vw-page-mark { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.vw-page-mark::before, .vw-page-mark::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--text) 14%, transparent); }
.vw-page-mark button { border: 0; padding: 2px 10px; border-radius: var(--r-full); background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text-2); font: inherit; font-size: var(--fs-caption); cursor: pointer; }
.vw-page-ref { display: inline; border: 0; padding: 0; background: transparent; color: var(--accent); font: inherit; text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }

/* the history: who, when, what changed — removed lines tinted red, added green, as GitHub shows a change */
.vw-hist h2 { margin: 0 0 8px; font-size: var(--fs-read); font-weight: 600; }
.vw-hist-item { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.vw-hist-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vw-hist-head .spacer { flex: 1; }
.vw-hist-head .faint { color: var(--text-2); font-size: var(--fs-caption); }
.vw-hist-note { margin-top: 6px; color: var(--text-2); font-size: var(--fs-body); }
.vw-diff { margin-top: 8px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: var(--r-sm); overflow: hidden; font-size: var(--fs-body); line-height: 1.5; }
.vw-diff > div { display: flex; gap: 8px; padding: 1px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.vw-diff i { flex: none; width: 1ch; font-style: normal; color: var(--text-2); }
.vw-diff .del { background: color-mix(in srgb, var(--red) 14%, transparent); }
.vw-diff .add { background: color-mix(in srgb, var(--green) 16%, transparent); }
.vw-diff .vw-diff-at { padding: 2px 10px; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text-2); font-size: var(--fs-caption); }
.vw-hist-more { margin-top: 10px; }

/* over the viewer (z 100): a question (leave without saving?), the editor's menus, the notices */
body.viewer-open .backdrop { z-index: 110; }
body.viewer-open .popover { z-index: 120; }
/* a file's «Кратко» card is under menus (a menu opened from the same file covers it when it has no room elsewhere) */
body.viewer-open .file-hover { z-index: 115; }
body.viewer-open #toasts { z-index: 130; }

/* «Расшифровки» on a grant of a person's access (FO «Доступы»): may change the reading and «Кратко» of its files */
.access-reading { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--text-3); font-size: var(--fs-caption); cursor: pointer; }