/* Preview inspection follows the existing blue acrylic workspace. */
.preview-open { align-self: flex-end; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 13px; border-radius: 8px; color: #004e9e; background: #e7eff9; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: pointer; }
.preview-open:hover { background: #d9e7f8; }
.preview-open:active { background: #cbdff5; }
.preview-tap-hint { display: none; }
.preview-open:focus-visible, #deskCanvas:focus-visible, #sheetCanvas:focus-visible, .preview-details-dialog button:focus-visible { outline: 3px solid #0765bd; outline-offset: 3px; }
#deskCanvas[role=button], #sheetCanvas[role=button] { cursor: zoom-in; }
.print-preview-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; margin-top: 5px; }
.print-preview-actions .name-limit { margin: 0; font-size: 11px; line-height: 1.5; }
.preview-details-dialog { box-sizing: border-box; position: fixed; inset: 0; width: min(1120px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 0; margin: auto; border: 0; border-radius: 16px; color: #23364b; background: #edf2f8; box-shadow: 0 20px 64px #132b4566; overflow: hidden; z-index: 10000; }
.preview-details-dialog[open] { display: flex; flex-direction: column; }
.preview-details-dialog:not([open]) { display: none; }
.preview-details-dialog::backdrop { background: #162b476b; backdrop-filter: blur(4px); }
.preview-details-dialog *, .preview-details-dialog *::before, .preview-details-dialog *::after { box-sizing: border-box; }
.preview-details-dialog [hidden] { display: none !important; }
.preview-details-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px 9px; flex-shrink: 0; }
.preview-details-heading h2 { font-size: 21px; line-height: 1.4; font-weight: 600; margin: 0; color: #163d67; }
.preview-details-close { min-width: 60px; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: #174d83; background: #dfe9f6; font-size: 14px; cursor: pointer; }
.preview-details-close:hover { background: #d1e2f5; }
.preview-details-views { display: flex; gap: 4px; padding: 0 18px 12px; flex-shrink: 0; }
.preview-details-views button { min-height: 44px; padding: 8px 15px; border-radius: 8px; color: #465d76; background: transparent; font-size: 14px; cursor: pointer; }
.preview-details-views button:hover { background: #e1e9f3; }
.preview-details-views button[aria-pressed=true] { color: #004e9e; background: #fff; box-shadow: 0 2px 5px #233e5914; font-weight: 600; }
.preview-details-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 18px 18px; scrollbar-color: #9aafc5 #e3eaf2; }
.preview-details-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 22px; }
.preview-details-figure { margin: 0; min-width: 0; }
.preview-details-stage { display: flex; align-items: center; justify-content: center; height: min(56dvh, 490px); min-height: 240px; padding: 10px; background: #e1e9e8; border-radius: 12px; overflow: hidden; }
.preview-details-stage[data-preview-detail-view=sheet] { background: #c8d3df; }
#previewDetailsCanvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.preview-details-stage[data-preview-detail-view=finished] #previewDetailsCanvas { width: 100%; height: 100%; }
.preview-details-figure figcaption { margin: 8px 0 0; font-size: 12px; color: #4c6076; line-height: 1.5; }
.preview-details-specs h3 { font-size: 17px; line-height: 1.5; margin: 0 0 8px; color: #233f60; }
.preview-details-specs dl { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 14px; line-height: 1.6; }
.preview-details-specs dt { color: #52677f; }
.preview-details-specs dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.preview-details-roster { color: #174e83; font-size: 14px; line-height: 1.65; margin: 18px 0 10px; }
.preview-details-production, .preview-details-note, .preview-details-policy { font-size: 13px; line-height: 1.7; color: #405a73; margin: 10px 0 0; }
.preview-details-note { padding-top: 14px; margin-top: 16px; border-top: 1px solid #ccd7e4; }
.preview-details-policy { font-size: 12px; margin-top: 5px; }
.preview-details-error { padding: 20px 0; font-size: 14px; line-height: 1.7; color: #8d382b; }
@media (max-width: 740px), (max-height: 500px) and (pointer: coarse) {
 #screen-edit>.edit-preview { grid-template-rows: 44px minmax(0, 1fr) 44px; }
 #enlargePreview { grid-column: 2; grid-row: 3; align-self: center; padding: 7px 9px; font-size: 12px; }
 .edit-preview .preview-tap-hint { display: block; grid-column: 1/-1; grid-row: 3; align-self: center; min-width: 0; margin: 0; padding-right: 106px; font-size: 11px; line-height: 16px; white-space: pre-line; color: #405a73; }
 .edit-preview .preview-state, .edit-preview .layout-preview-caption:not([hidden]) { display: none; }
 body[data-keyboard-open=true] #enlargePreview { display: none; }
 body[data-keyboard-open=true] .edit-preview .preview-tap-hint { display: none; }
 .preview-details-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); border-radius: 12px; }
 .preview-details-heading { padding: 10px 12px 6px; gap: 8px; }
 .preview-details-heading h2 { font-size: 18px; }
 .preview-details-views { padding: 0 12px 10px; gap: 3px; }
 .preview-details-views button { flex: 1; padding: 7px 5px; font-size: 13px; }
 .preview-details-scroll { padding: 0 12px 14px; }
 .preview-details-body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
 .preview-details-stage { height: clamp(200px, 35dvh, 340px); min-height: 180px; padding: 7px; }
 .preview-details-specs h3 { font-size: 16px; }
 .preview-details-specs dl { grid-template-columns: 6em minmax(0, 1fr); gap: 7px 10px; font-size: 13px; }
 .preview-details-production, .preview-details-note { font-size: 12px; }
 .print-preview-actions .preview-open { padding: 7px 9px; font-size: 12px; }
}