/* Viewer CSS — extracted from D-record-page.html & F-record-composite.html
   Shared stylesheet for full-size plate viewer and related UI elements */

/* registration marks: four L-shaped crop marks converging to corners as plate arrives */
.plate .reg-mark{
  position:absolute;width:14px;height:14px;border:1.5px solid var(--accent);pointer-events:none;
  animation:reg-converge var(--paper-dur) var(--paper-ease) .4s both;opacity:0
}
.plate .reg-tl{top:-7px;left:-7px;border-right:none;border-bottom:none}
.plate .reg-tr{top:-7px;right:-7px;border-left:none;border-bottom:none}
.plate .reg-bl{bottom:-7px;left:-7px;border-right:none;border-top:none}
.plate .reg-br{bottom:-7px;right:-7px;border-left:none;border-top:none}
@keyframes reg-converge{
  from{opacity:0;transform:translate(var(--offset))}
  60%{opacity:1}
  to{opacity:1;transform:translate(0)}
}
@keyframes plate-mount{
  from{opacity:0;transform:scale(0.98) translateY(8px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.plate .mount{
  animation:plate-mount var(--press-dur) var(--press-ease);
  transition:box-shadow var(--ink-dur) var(--ink-ease)
}
.plate .mount:hover{
  box-shadow:0 2px 0 rgba(17,16,16,.3),0 32px 80px rgba(255,95,31,.08)
}
.plate .reg-tl{--offset:-8px,-8px}
.plate .reg-tr{--offset:8px,-8px}
.plate .reg-bl{--offset:-8px,8px}
.plate .reg-br{--offset:8px,8px}
@media(prefers-reduced-motion:reduce){.plate .reg-mark{animation:none}}
.plate .mount::after{
  content:"⤢ View full size";position:absolute;bottom:10px;right:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);background:rgba(244,241,234,.94);border:1px solid var(--rule);
  padding:5px 9px;opacity:0;transition:opacity var(--ink-dur) var(--ink-ease);pointer-events:none
}
.plate .mount:hover::after,.plate .mount:focus-visible::after{opacity:1}

/* ── full-size viewer: a light table, not a web-app lightbox ── */
.viewer{
  position:fixed;inset:0;z-index: var(--z-viewer);display:none;
  flex-direction:column;
  background:rgba(17,16,16,.94)
}
.viewer.open{display:flex}
.viewer-stage{
  flex:1;min-height:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;cursor:zoom-in;
  position:relative
}
.viewer-scale,.viewer-close,.viewer-hint{
  background:var(--glass-solid,rgba(17,16,16,.82));
  text-shadow:0 0 4px rgba(0,0,0,.8),0 1px 2px rgba(0,0,0,.4);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .viewer-scale,.viewer-close,.viewer-hint{
    background:var(--glass,rgba(17,16,16,.50));
    backdrop-filter:var(--glass-lens,blur(16px) brightness(.45));
    -webkit-backdrop-filter:var(--glass-lens,blur(16px) brightness(.45));
  }
}
.viewer-scale,.viewer-close{
  border:1px solid var(--glass-edge,rgba(244,241,234,.14));
  box-shadow:inset 0 1px 0 rgba(244,241,234,.10);
}
.viewer-scale{
  position:absolute;left:16px;bottom:14px;z-index: var(--z-command-palette);pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(244,241,234,.86);
  padding:9px 12px 10px;
}
.viewer-scale .rule{
  display:block;height:6px;
  border:1px solid rgba(244,241,234,.86);border-top:none;
  margin-bottom:5px
}
.viewer-scale .rule[hidden]{display:none}
.viewer-scale .said{
  display:block;margin-top:5px;max-width:46ch;
  color:rgba(244,241,234,.72);text-transform:none;letter-spacing:.02em;
  font-size:9.5px;line-height:1.5
}
@media(max-width:700px){
  .viewer-scale .said{display:none}
  .viewer-scale.no-rule{display:none}
  .viewer-toolbar{padding:6px 10px 10px;gap:0}
  .viewer-toolbar button{padding:8px 8px}
}
.viewer-stage.panning{cursor:grabbing}
.viewer-stage img{
  max-width:100%;max-height:100%;display:block;
  transition:transform var(--ink-dur) var(--ink-ease);
  will-change:transform;user-select:none;-webkit-user-drag:none
}
.viewer-stage.panning img{transition:none}
.viewer-toolbar{
  flex:none;
  display:flex;justify-content:flex-end;align-items:center;
  gap:2px;flex-wrap:wrap;
  padding:10px clamp(12px,2vw,20px) 14px;
  background:transparent;border-top:none
}
.viewer-toolbar button{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,241,234,.62);background:transparent;border:none;
  padding:8px 10px;cursor:pointer;
  transition:color var(--ink-dur) var(--ink-ease)
}
.viewer-toolbar button:hover{color:var(--ink)}
.viewer-toolbar button:active{color:var(--accent)}
/* 2026-09-09: was outline:var(--accent). Measured on the rendered glass
   (composited pixels, not a CSS lookup — see smoke.js's own glass-contrast
   check): the old #FF5F1F neon read at a real contrast against this dark
   scrim, the new #C8102E only manages 1.73:1 against it. Every neighbouring
   control on this same dark surface used var(--paper) for exactly this
   reason at the time: --paper meant "light cream", a colour that reads
   against this permanently-dark glass regardless of page theme.
   2026-09-15: theme-unbuilt-archive.css repurposed --paper into the dark
   *surface* colour for the new theme, so every var(--paper) on this glass
   went from "light text on dark glass" to "near-black text on dark glass" --
   caught by the smoke gate's own viewer-chrome contrast checks. --ink is
   the token both themes define as the readable foreground (light in dark
   mode, dark in light mode), which is what this permanently-dark glass
   actually wants -- swapped every var(--paper) in this file's viewer-chrome
   rules to var(--ink). Background/fill uses of --paper elsewhere in this
   file are unaffected; those correctly still mean "the page's own surface
   colour", whichever theme that resolves to. */
.viewer-toolbar button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.viewer-toolbar .sep{width:1px;height:14px;background:rgba(244,241,234,.22);margin:0 8px}
.viewer-toolbar .sep + .sep,.viewer-toolbar .sep:last-of-type{display:none}
.viewer-zoom-label{
  font-family:var(--mono);font-size:10px;
  color:var(--ink);min-width:56px;text-align:center;letter-spacing:.06em
}
.viewer-close{
  position:absolute;top:16px;right:16px;z-index: var(--z-command-palette);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
  padding:8px 14px;cursor:pointer;
  transition:border-color var(--ink-dur) var(--ink-ease),
    box-shadow var(--ink-dur) var(--ink-ease)
}
.viewer-close:hover{
  border-color:rgba(244,241,234,.42);
  box-shadow:var(--glass-lift,0 6px 22px rgba(0,0,0,.30)),
    inset 0 1px 0 rgba(244,241,234,.26)
}
@media(prefers-reduced-motion:reduce){.viewer-close{transition:none}}
/* 2026-09-09: same fix as .viewer-toolbar button:focus-visible above. */
.viewer-close:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.viewer-hint{
  position:absolute;top:20px;left:16px;z-index: var(--z-command-palette);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(244,241,234,.72);
  padding:7px 11px;
  transition:opacity var(--paper-dur) var(--paper-ease);
  pointer-events:none
}
.viewer.used .viewer-hint{opacity:0}
@media(max-width:700px){.viewer-hint{display:none}}
@media(prefers-reduced-motion:reduce){.viewer-hint{transition:none}}
@media(prefers-reduced-motion:reduce){.viewer-stage img{transition:none}}