/* T035: the file viewer. Panel — a full-screen dialog; point — the whole work area under the top bar (the top bar
   with «Вийти» stays). Dark stage in both: a drawing or a photo reads best on a calm, even background. */
.fv { --fv-gap: 12px; --fv-key: 52px; --fv-model: #a9b1ba; box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  margin: 0; padding: 0; border: 0; max-width: none; max-height: none; background: var(--surface-0); color: var(--text-1); overflow: hidden; }
.fv *, .fv *::before, .fv *::after { box-sizing: border-box; }
.fv svg.fv-i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.fv--panel { position: fixed; inset: 0; width: 100vw; height: 100dvh; }
.fv--panel::backdrop { background: rgb(8 9 10 / .7); }
.fv-bar { display: flex; align-items: center; gap: var(--fv-gap); padding: var(--fv-gap) 16px; border-bottom: 1px solid var(--border); background: var(--surface-1); min-width: 0; }
.fv-heading { flex: 1 1 auto; min-width: 0; }
.fv .fv-title { margin: 0; font-family: var(--font-sans); font-size: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv .fv-sub { margin: 2px 0 0; color: var(--text-2); font-size: 18px; }
.fv-bar-actions { display: flex; gap: var(--fv-gap); flex: 0 0 auto; }
.fv .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.fv-download[hidden] { display: none; }
.fv-stage { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background: #0f1113; }
.fv-stage.is-zoomed { cursor: grab; }
.fv-content { position: absolute; inset: 0; }
.fv-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; max-height: none; background: #fff; box-shadow: 0 2px 18px rgb(0 0 0 / .45); }
.fv[data-kind="image"] .fv-img { background: transparent; }
.fv-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.fv-3d { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #2a2e34, #121417); }
.fv-3d-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.fv-in-right { animation: fv-in-right 180ms var(--ease-out, ease-out); }
.fv-in-left { animation: fv-in-left 180ms var(--ease-out, ease-out); }
@keyframes fv-in-right { from { opacity: .3; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes fv-in-left { from { opacity: .3; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.fv .fv-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 12px 18px; max-width: min(90%, 760px); background: rgb(15 17 19 / .88); color: #f5f3ef; font-size: 18px; text-align: center; pointer-events: none; }
.fv .fv-status:empty, .fv .fv-status[hidden] { display: none; }
.fv .fv-status[data-state="error"] { color: #f7909f; }
.fv .fv-status[data-state="warn"], .fv .fv-status[data-state="hint"] { top: auto; bottom: 16px; transform: translateX(-50%); }
.fv .fv-status[data-state="warn"] { color: #f0d26e; }
.fv-zoom { position: absolute; right: 16px; bottom: 16px; display: grid; gap: var(--fv-gap); }
.fv-zoom[hidden] { display: none; }
.fv .fv-key { width: var(--fv-key); min-width: var(--fv-key); height: var(--fv-key); min-height: var(--fv-key); padding: 0; }
.fv-zoom .fv-key { background: rgb(26 29 33 / .92); color: #f5f3ef; border: 1px solid #3a3f46; }
.fv-zoom .fv-key:hover { background: #22262b; }
.fv-card { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: #f5f3ef; }
.fv-card > svg { width: 96px; height: 96px; fill: none; stroke: #c6cacf; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fv-card-pic { width: min(320px, 60vw); aspect-ratio: 1; object-fit: contain; }
.fv .fv-card-name { margin: 0; font-weight: 600; font-size: 20px; overflow-wrap: anywhere; max-width: 40ch; }
.fv .fv-card-text { margin: 0; max-width: 46ch; color: #c6cacf; font-size: 18px; }
.fv-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fv-gap); padding: var(--fv-gap) 16px; border-top: 1px solid var(--border); background: var(--surface-1); }
.fv-controls.is-single .fv-nav { visibility: hidden; }
.fv-middle { display: flex; justify-content: center; flex: 1 1 auto; min-width: 0; }
.fv-pages, .fv-video { display: flex; align-items: center; gap: var(--fv-gap); min-width: 0; }
.fv-pages[hidden], .fv-video[hidden] { display: none; }
.fv .fv-page-no, .fv .fv-time { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 18px; }
.fv-seekbar { flex: 1 1 160px; min-width: 120px; accent-color: var(--accent); height: 32px; }
.fv-nav:disabled { opacity: .45; }

/* ---------- the point: rule 5 — text ≥ 28 px, actions ≥ 280×88, keys ≥ 88×88, no page scroll ---------- */
.fv--terminal { position: fixed; left: 0; right: 0; top: var(--fv-top, 0px); bottom: 0; z-index: 40; --fv-gap: 16px; --fv-key: 88px; }
.fv-host[hidden] { display: none; }
.fv--terminal .fv-bar, .fv--terminal .fv-controls { padding: 12px var(--edge, 24px); }
.fv--terminal .fv-title { font-size: 32px; }
.fv--terminal .fv-sub, .fv--terminal .fv-page-no, .fv--terminal .fv-time, .fv--terminal .fv-status,
.fv--terminal .fv-card-text { font-size: 28px; }
.fv--terminal .fv-card-name { font-size: 32px; }
.fv--terminal .btn { min-width: 280px; min-height: 88px; font-size: 28px; }
.fv--terminal .fv-key { min-width: 88px; width: 88px; height: 88px; }
.fv--terminal svg.fv-i { width: 36px; height: 36px; }
.fv--terminal .fv-play { min-width: 280px; }
.fv--terminal .fv-seekbar { height: 56px; min-width: 200px; }
.fv--terminal .fv-zoom { right: 24px; bottom: 24px; }
.fv--terminal .fv-card > svg { width: 140px; height: 140px; }
@media (max-aspect-ratio: 1/1) {
  /* Portrait point: page and video keys on their own row, «Попередній»/«Наступний» below at both edges. */
  .fv--terminal .fv-middle { order: -1; flex: 1 1 100%; }
  .fv--terminal .fv-video { flex-wrap: wrap; justify-content: center; }
  .fv--terminal .fv-seekbar { flex: 1 1 100%; order: 5; }
}
@media (max-width: 699px) {
  .fv--panel .fv-bar { flex-wrap: wrap; }
  .fv--panel .fv-bar-actions { width: 100%; }
  .fv--panel .fv-bar-actions .btn { flex: 1 1 0; }
  .fv--panel .fv-middle { order: -1; flex: 1 1 100%; }
  .fv--panel .fv-nav { flex: 1 1 0; }
  .fv--panel .fv-video { flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .fv-in-right, .fv-in-left { animation: none; } }

/* ---------- the point's file screen: big tiles, the list scrolls inside itself ---------- */
.fv-materials { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: hidden; }
.fv-materials > h2, .fv-materials > p { margin: 0; flex-shrink: 0; }
#screen:has(.fv-materials) :is(.exit-help, .shift-time) { display: none; }
.fv-grid-wrap { flex: 1; min-height: 0; overflow-y: scroll; scrollbar-width: auto; scrollbar-color: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 16px; scrollbar-gutter: stable; }
.fv-grid-wrap::-webkit-scrollbar { width: 24px; }
.fv-grid-wrap::-webkit-scrollbar-track { background: var(--surface-1); }
.fv-grid-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border: 4px solid var(--surface-1); min-height: 64px; }
.fv-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
.terminal .fv-tile { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 24px; width: 100%; min-width: 0; min-height: 168px; padding: 12px 24px 12px 12px; text-align: left; white-space: normal; font-size: 28px; }
.fv-tile-pic { display: grid; place-items: center; width: 200px; height: 144px; overflow: hidden; background: #fff; color: #16181b; }
.fv-tile-pic img { width: 100%; height: 100%; object-fit: contain; }
.fv-tile--image .fv-tile-pic img, .fv-tile--video .fv-tile-pic img { object-fit: cover; }
.fv-tile-pic svg { width: 72px; height: 72px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fv-tile-pic.is-glyph { background: var(--surface-2); color: var(--text-2); }
.fv-tile-text { display: grid; gap: 6px; min-width: 0; }
.fv-tile-name { font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fv-tile-kind { color: var(--text-2); font-weight: 400; }