/* FullView: shared full-size image viewer. Each site sets the --fv-* colours. */
:root { --fv-bg: #0c0810; --fv-bg2: #1c1428; --fv-accent: #f0b43c; --fv-text: #f1e7d0; --fv-frame: #fbf6ea; --fv-close: #c8263a; --fv-font: inherit; }
html.fv-open, html.fv-open body { overflow: hidden; }
.fv { position: fixed; inset: 0; z-index: 96; display: grid; grid-template-rows: auto 1fr; background: radial-gradient(ellipse at 50% 0%, var(--fv-bg2), var(--fv-bg) 72%); color: var(--fv-text); font-family: var(--fv-font); }
.fv[hidden] { display: none; }
.fv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; background: rgba(0,0,0,.35); border-bottom: 1px solid color-mix(in srgb, var(--fv-accent) 25%, transparent); position: relative; }
.fv-title { margin-right: auto; font-size: 13px; letter-spacing: .06em; opacity: .85; }
.fv-title b { color: var(--fv-accent); font-weight: 600; }
.fv-count { opacity: .75; }
.fv-btn { font: 13px var(--fv-font); color: var(--fv-accent); background: rgba(0,0,0,.3); border: 1px solid color-mix(in srgb, var(--fv-accent) 50%, transparent); border-radius: 4px; padding: 7px 12px; text-decoration: none; cursor: pointer; }
.fv-btn:hover { background: color-mix(in srgb, var(--fv-accent) 16%, transparent); color: var(--fv-accent); }
.fv-btn[hidden] { display: none; }
.fv-close { background: var(--fv-close); color: #fff; border-color: transparent; font-size: 15px; }
.fv-close:hover { background: var(--fv-close); filter: brightness(1.15); color: #fff; }
.fv-stage { overflow: auto; display: grid; place-items: center; padding: 12px; cursor: zoom-out; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
.fv-stage img { display: block; max-width: 100%; max-height: calc(100vh - 92px); width: auto; height: auto; cursor: zoom-in; box-shadow: 0 0 0 6px var(--fv-frame), 0 20px 60px rgba(0,0,0,.7); user-select: none; -webkit-user-drag: none; }
.fv.actual .fv-stage { place-items: start; touch-action: none; }
.fv.actual .fv-stage img { max-width: none; max-height: none; cursor: grab; margin: auto; }
.fv.actual .fv-stage img:active { cursor: grabbing; }
.fv-nav { position: absolute; top: 50%; margin-top: -40px; width: 52px; height: 80px; border: 0; border-radius: 6px; background: rgba(0,0,0,.35); color: var(--fv-text); font-size: 46px; line-height: 1; cursor: pointer; opacity: .7; }
.fv-nav:hover { opacity: 1; color: var(--fv-accent); }
.fv-nav:disabled { opacity: .15; cursor: default; }
.fv-nav[hidden] { display: none; }
.fv-prev { left: 8px; } .fv-next { right: 8px; }
.fv-spin { position: fixed; right: 18px; bottom: 18px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--fv-accent); animation: fvspin .8s linear infinite; display: none; }
.fv.loading .fv-spin { display: block; }
@keyframes fvspin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .fv-bar { padding-right: 58px; }
  .fv-title { width: 100%; }
  .fv-close { position: absolute; top: 8px; right: 10px; }
  .fv-stage img { max-height: calc(100vh - 116px); }
  .fv-nav { width: 40px; height: 64px; font-size: 36px; margin-top: -32px; }
}
@media (prefers-reduced-motion: reduce) { .fv-spin { animation: none; } }
/* cycling at actual size: keep ‹ › visible, pinned to the viewport */
.fv.actual .fv-nav { display: block; position: fixed; top: 50%; }
.fv.actual .fv-nav[hidden] { display: none; }
.fv-actual[aria-pressed="true"] { background: color-mix(in srgb, var(--fv-accent) 22%, transparent); }
.fv.actual .fv-stage img { max-width: none; max-height: none; }

.fv-jump { padding: 7px 10px; }
@media (max-width: 600px) { .fv-jump { order: 4; } }
.fv-count { font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px dashed currentColor; padding: 0 1px; cursor: pointer; opacity: .85; }
.fv-count:hover { color: var(--fv-accent); opacity: 1; }
.fv-count[hidden] { display: none; }
.fv-goto { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 4px; }
.fv-goto[hidden] { display: none; }
.fv-goto input { width: 5.5em; font: 13px var(--fv-font); padding: 4px 6px; background: rgba(0,0,0,.4); color: var(--fv-text); border: 1px solid color-mix(in srgb, var(--fv-accent) 50%, transparent); border-radius: 3px; }
/* how to move between pictures: keys on a computer, swiping on a touch screen */
.fv-hint { font-size: 12px; opacity: .75; white-space: nowrap; }
.fv-hint[hidden] { display: none; }
.fv-hint kbd { font: 11px var(--fv-font); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; }
.fv-hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .fv-hint-keys { display: none; } .fv-hint-touch { display: inline; } }
@media (max-width: 900px) and (hover: hover) { .fv-hint { display: none; } }   /* a narrow desktop window: no room */
@media (max-width: 600px) { .fv-hint { order: 6; width: 100%; text-align: center; } }

/* a see-through stamp over the picture (e.g. the admin's "ORIGINAL"): never in the way of clicks or drags */
.fv-stamp { position: fixed; left: 50%; top: 55%; transform: translate(-50%, -50%) rotate(-14deg); pointer-events: none; text-align: center; color: rgba(255,255,255,.34);
  border: 5px solid rgba(255,255,255,.3); border-radius: 12px; padding: 10px 26px 12px; text-shadow: 0 1px 3px rgba(0,0,0,.35); box-shadow: 0 0 0 1px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.12); }
.fv-stamp[hidden] { display: none; }
.fv-stamp b { display: block; font: 800 clamp(34px, 9vw, 96px)/1 var(--fv-font); letter-spacing: .14em; }
.fv-stamp span { display: block; margin-top: 6px; font: 600 clamp(9px, 2.2vw, 18px)/1.2 var(--fv-font); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.fv-stamp-btn[aria-pressed="true"], .fv-alt[aria-pressed="true"] { background: color-mix(in srgb, var(--fv-accent) 22%, transparent); }
.fv-btn.fv-tray.on { color: #ffd76a; border-color: #ffd76a; }
.fv .fv-tray .tl-long { display: none; }   /* the bar is crowded: ☆ Tray / ★ In Tray */
.fv .fv-tray .tl-short { display: inline; }

/* Vital signs in the bar (public site): lab.css colours the hearts */
.fv-vitals { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--fv-font); color: var(--fv-accent); }
.fv-vitals[hidden] { display: none; }
.fv-vl { letter-spacing: .14em; text-transform: uppercase; font-size: 11px; opacity: .85; }
.fv-vitals .vitals-beats button { font-size: 19px; }
.fv-vitals .vitals-read { white-space: nowrap; opacity: .9; }
.fv-vitals .vitals-read .vr-n { display: none; }
.fv-vitals .vitals-clear { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; opacity: .7; padding: 0 2px; }
@media (max-width: 700px) { .fv-vl, .fv-vitals .vitals-read { display: none; } }
@media (max-width: 600px) { .fv-bar .fv-jump, .fv-bar [data-open] { display: none; } }   /* phones: swipe instead of First / Last, Download instead of Open */