.sample-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.flight-plate { min-width: 0; padding: clamp(12px, 2.2vw, 27px); background: var(--v-sheet-paper); border: 1px solid var(--v-line); border-radius: var(--v-radius-md); }
.plate-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--v-4); padding-bottom: var(--v-5); }
.plate-signature { --signature-ratio: var(--v-signature-ratio-es); flex-shrink: 0; display: grid; align-items: center; width: calc(var(--v-signature-height) * var(--signature-ratio)); max-width: 100%; }
.plate-signature:lang(en) { --signature-ratio: var(--v-signature-ratio-en); }
.plate-signature img { width: 100%; height: auto; }
.plate-caption { display: grid; justify-items: end; gap: 6px; font-size: var(--v-text-sm); }
.plate-caption strong { font-weight: 550; }
.art-status { padding: 3px 9px; border: 1px solid var(--v-line-strong); border-radius: var(--v-radius-pill); color: var(--v-muted); background: var(--v-white); font-size: var(--v-text-xs); line-height: 1.45; }
.wipe-stage { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); aspect-ratio: 120 / 78; background: var(--v-white); border: 1px solid var(--v-line); }
.wipe-layer { min-width: 0; display: grid; place-items: center; background: var(--v-white); }
.wipe-layer > svg { width: 100%; height: auto; overflow: hidden; }
.wipe-layer + .wipe-layer { border-left: 1px solid var(--v-line); }
.crop, .wipe-rule, .wipe-grip { display: none; }
.plate-key { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 10px 2px 0; font-size: var(--v-text-sm); font-weight: 550; }
.plate-key > span, .inspection-print figcaption, .ink-proof figcaption { display: flex; align-items: center; gap: 8px; }
.raster-key, .vector-key { display: inline-block; flex: 0 0 11px; height: 11px; }
.raster-key { background: conic-gradient(var(--v-ink) 25%, var(--v-line-strong) 0 50%, var(--v-muted) 0 75%, var(--v-pattern) 0); }
.vector-key { border: 2px solid currentColor; border-radius: 50%; }
.is-ready .wipe-stage { display: block; }
.is-ready .wipe-layer { position: absolute; inset: 0; overflow: hidden; border: 0; }
.is-ready .wipe-layer > svg { height: 100%; }
.is-ready .wipe-vector { clip-path: inset(0 0 0 var(--cut, 48%)); }
.is-detail .wipe-layer .whole { display: none; }
.is-detail .wipe-layer .crop { display: inline; }
.wipe-range { appearance: none; -webkit-appearance: none; position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.wipe-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.wipe-range::-moz-range-track { height: 100%; background: transparent; }
.wipe-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 1px; height: 100%; border: 0; }
.wipe-range::-moz-range-thumb { width: 1px; height: 100%; border: 0; }
.is-ready .wipe-rule { display: block; position: absolute; inset-block: 0; left: clamp(0px, var(--cut, 48%), calc(100% - 1px)); width: 1px; background: var(--v-ink); box-shadow: 1px 0 var(--v-white); pointer-events: none; }
.is-ready .wipe-grip { display: grid; grid-template-columns: 2px 2px; gap: 3px; place-content: center; position: absolute; top: 50%; left: clamp(24px, var(--cut, 48%), calc(100% - 24px)); transform: translate(-50%, -50%); width: 38px; height: 48px; border: 1px solid var(--v-ink); border-radius: 24px; background: var(--v-white); box-shadow: var(--v-shadow); pointer-events: none; }
.wipe-grip::before, .wipe-grip::after { content: ""; width: 2px; height: 15px; background: var(--v-ink); }
.wipe-range:focus-visible ~ .wipe-grip { outline: 3px solid var(--v-focus); outline-offset: 3px; }
.plate-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--v-2) var(--v-4); margin-top: var(--v-3); padding-top: var(--v-2); border-top: 1px solid var(--v-line); }
.plate-controls p, .print-note, .ink-proof figcaption { color: var(--v-muted); font-size: var(--v-text-xs); line-height: 1.55; }
.plate-controls p { max-width: 28ch; }
.zoom-choice { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--v-target); padding: 8px 12px; border: 1px solid var(--v-line-strong); border-radius: var(--v-radius-sm); background: var(--v-white); font-size: var(--v-text-sm); }
.zoom-choice svg { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; }
.zoom-choice:hover, .is-detail .zoom-choice { border-color: var(--v-ink); background: var(--v-paper); }
.zoom-out-label, .is-detail .zoom-in-label { display: none; }
.is-detail .zoom-out-label { display: inline; }
.inspection-print { display: grid; grid-template-columns: minmax(0, .65fr) repeat(2, minmax(0, 1fr)); background: var(--v-white); border: 1px solid var(--v-line-strong); }
.inspection-print figure { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.inspection-print figure + figure { border-left: 1px solid var(--v-line); }
.inspection-print figcaption { padding: 10px 14px; border-top: 1px solid var(--v-line); min-height: 48px; font-size: var(--v-text-sm); font-weight: 550; }
.locating-art { flex: 1; display: grid; place-items: center; padding: var(--v-3); }
.locating-art svg { width: min(100%, 200px); height: auto; }
.locator-back { stroke: var(--v-white); stroke-width: 5px; }
.locator-edge { stroke: var(--v-focus); stroke-width: 2px; }
.crop-print > svg { width: 100%; height: auto; overflow: hidden; margin-block: auto; }
.ref { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--v-focus); color: var(--v-accent-ink); background: var(--v-accent); font: 550 var(--v-text-xs)/1 var(--v-mono); }
.print-note { margin-top: var(--v-2); }
.ink-art { display: grid; place-items: center; padding: clamp(16px, 3vw, 32px); background: var(--v-white); border: 1px solid var(--v-line); }
.ink-art img { width: min(100%, 20rem); height: auto; }
.ink-proof figcaption { margin-top: var(--v-2); }
.collection-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--v-3); border-block: 1px solid var(--v-line-strong); padding: var(--v-4); }
.collection-head h3 { font: 550 clamp(1.2rem, 2vw, 1.6rem)/1.2 var(--v-display); letter-spacing: -.035em; }
.collection-head .art-status { margin-left: auto; }
.folio { padding-right: var(--v-3); border-right: 1px solid var(--v-line-strong); font: 500 var(--v-text-sm)/1.6 var(--v-mono); color: var(--v-muted); }
.collection { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--v-line-strong); }
.collection li { min-width: 0; padding: var(--v-5) var(--v-4); }
.collection li + li { border-left: 1px solid var(--v-line); }
.collection figcaption { display: flex; align-items: baseline; gap: var(--v-2); font: 550 var(--v-text-md)/1.4 var(--v-display); }
.collection figcaption span { color: var(--v-muted); font: 500 var(--v-text-xs)/1.4 var(--v-mono); }
.piece-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--v-2); margin-top: var(--v-4); }
.piece-pair > div { min-width: 0; display: grid; justify-items: center; gap: 10px; padding: 8px 4px; }
.piece-pair img { width: min(100%, 135px); height: auto; aspect-ratio: 1; object-fit: cover; object-position: var(--piece-x, 50%) center; }
.piece-pair span { color: var(--v-muted); font-size: var(--v-text-xs); }
.piece-left { --piece-x: 0%; }
.piece-right { --piece-x: 100%; }
@media (max-width: 650px) {
    .inspection-print { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inspection-print .locator-print { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: start; gap: var(--v-2); border-bottom: 1px solid var(--v-line); }
    .locating-art { flex: 0 1 150px; }
    .locator-print figcaption { border: 0; padding-inline: 0; }
    .inspection-print .locator-print + figure { border-left: 0; }
    .inspection-print figure:not(.locator-print) figcaption { padding-inline: 10px; min-height: 4rem; }
    .collection { grid-template-columns: minmax(0, 1fr); }
    .collection li { padding: var(--v-4) 10px; }
    .collection li + li { border-left: 0; border-top: 1px solid var(--v-line); }
    .collection figure { display: grid; grid-template-columns: minmax(4.6rem, .65fr) minmax(0, 1.6fr); align-items: center; gap: 8px; }
    .collection figcaption { flex-wrap: wrap; }
    .piece-pair { margin: 0; }
    .piece-pair img { width: min(100%, 100px); }
}
@media (max-width: 380px) {
    .plate-head { gap: var(--v-3); }
    .plate-caption { width: 100%; display: flex; align-items: center; justify-content: space-between; }
    .plate-controls { display: grid; }
    .zoom-choice { justify-self: start; }
}
@media (forced-colors: active) {
    .plate-signature { width: auto; }
    .plate-signature .visually-hidden { position: static; width: auto; height: auto; margin: 0; clip-path: none; overflow: visible; white-space: normal; }
    .plate-signature img { display: none; }
    .wipe-grip::before, .wipe-grip::after, .is-ready .wipe-rule { background: CanvasText; }
    .wipe-range:focus-visible ~ .wipe-grip { outline-color: Highlight; }
}