/* ADR-0063 viewer chrome lifted from the all-files canon.
.af-file-requirements.is-viewing   destination drops its 960 cap
   .af-req-split(.is-viewing)         always present; two columns while open
     .af-req-panel                    unchanged; kept mounted when hidden
     .af-doc-viewer[role=dialog]      the drawer
   ------------------------------------------------------------------ */
.af-file-requirements.is-viewing { max-width: none; }
.af-req-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; }
.af-req-split.is-viewing { grid-template-columns: minmax(340px, 1fr) minmax(340px, 1.35fr); }
/* The checklist column keeps its wide layout beside the drawer: its narrow
   rules follow the destination's width, not the column's (as in the canon). */
.af-req-split.is-viewing > .af-req-panel { container-type: normal; }

/* View, beside the download link on an evidence row or a ledger row.
   Present exactly where Download is; absent, never disabled. */
.af-doc-view {
    font: inherit;
    font-size: var(--th-size-12);
    padding: 1px 8px;
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-3);
    background: var(--th-paper);
    color: var(--th-ink-2);
    cursor: pointer;
    white-space: nowrap;
}
.af-doc-view:hover { border-color: var(--th-advant); color: var(--th-advant-deep); }
.af-doc-view[aria-pressed="true"] { border-color: var(--th-advant); background: var(--th-advant-soft); color: var(--th-advant-deep); }
.af-doc-view:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }

.af-doc-viewer {
    position: sticky;
    top: 12px;
    /* Fills the nearest scrolling pane less 24px (the shell's main pane). */
    height: calc(100vh - 24px);
    min-height: 360px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--th-line-2);
    border-radius: 6px;
    background: var(--th-paper-sunk);
    min-width: 0;
    overflow: hidden;
    outline: none;
}
.af-doc-viewer:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }
.af-doc-viewer svg { flex: none; }

.af-doc-viewer-head {
    padding: 10px 12px 10px 14px;
    border-bottom: 1px solid var(--th-line);
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: none;
}
.af-doc-viewer-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.af-doc-viewer-back {
    display: none; /* narrow only */
    align-items: center;
    gap: 3px;
    font: inherit;
    font-size: var(--th-size-12);
    padding: 3px 8px 3px 5px;
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-3);
    background: var(--th-paper);
    color: var(--th-ink-2);
    cursor: pointer;
    white-space: nowrap;
}
.af-doc-viewer-back svg { transform: rotate(180deg); }
.af-doc-viewer-icon { color: var(--th-ink-4); }
.af-doc-viewer-name { font-family: var(--th-font-mono); font-size: var(--th-size-13); font-weight: 600; color: var(--th-ink); min-width: 0; overflow-wrap: anywhere; }
.af-doc-viewer-meta { font-size: 11px; color: var(--th-ink-2); white-space: nowrap; }
.af-doc-viewer-head-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.af-doc-viewer-download { font-size: 12px; white-space: nowrap; }
.af-doc-viewer-close {
    font: inherit;
    width: 26px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--th-radius-3);
    background: transparent;
    color: var(--th-ink-2);
    cursor: pointer;
    padding: 0;
}
.af-doc-viewer-close:hover { color: var(--th-ink); border-color: var(--th-line-2); }

.af-doc-viewer-context { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--th-ink-2); line-height: 1.45; }
.af-doc-viewer-context-text { min-width: 0; }
.af-doc-viewer-stepper { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.af-doc-viewer-stepper-count { font-family: var(--th-font-mono); font-size: 11px; color: var(--th-ink-2); white-space: nowrap; }

.af-doc-viewer-serves { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--th-ink-2); }
.af-doc-viewer-serve { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.af-doc-viewer-serve-go {
    font: inherit;
    font-size: var(--th-size-12);
    padding: 1px 8px;
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-3);
    background: var(--th-paper);
    color: var(--th-ink-2);
    cursor: pointer;
    white-space: nowrap;
}
.af-doc-viewer-serve-go:hover { border-color: var(--th-ink-4); color: var(--th-ink); }
.af-doc-viewer-serves-note { font-size: var(--th-size-12); color: var(--th-ink-2); }
.af-doc-viewer-closed { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--th-ink-2); }

/* Icon buttons: evidence stepper (24x22, .is-sm) and toolbar (26x24) */
.af-doc-viewer-iconbtn {
    font: inherit;
    width: 26px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-3);
    background: var(--th-paper);
    color: var(--th-ink-2);
    cursor: pointer;
    padding: 0;
}
.af-doc-viewer-iconbtn.is-sm { width: 24px; height: 22px; }
.af-doc-viewer-iconbtn.is-glyph { font-size: 14px; line-height: 1; }
.af-doc-viewer-iconbtn.is-prev svg { transform: rotate(180deg); }
.af-doc-viewer-iconbtn[aria-disabled="true"] { opacity: 0.4; cursor: default; }

.af-doc-viewer-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 12px;
    border-bottom: 1px solid var(--th-line);
    background: var(--th-paper-2);
    flex: none;
}
.af-doc-viewer-paging, .af-doc-viewer-zoom { display: inline-flex; align-items: center; gap: 4px; }
.af-doc-viewer-zoom { margin-left: auto; }
.af-doc-viewer-page-count { font-family: var(--th-font-mono); font-size: var(--th-size-12); color: var(--th-ink-2); min-width: 92px; text-align: center; white-space: nowrap; }
.af-doc-viewer-zoom-value { font-family: var(--th-font-mono); font-size: var(--th-size-12); color: var(--th-ink-2); min-width: 42px; text-align: center; white-space: nowrap; }
.af-doc-viewer-fit {
    font: inherit;
    font-size: var(--th-size-12);
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--th-line-2);
    border-radius: var(--th-radius-3);
    background: var(--th-paper);
    color: var(--th-ink-2);
    cursor: pointer;
    white-space: nowrap;
}
.af-doc-viewer-fit[aria-pressed="true"] { border-color: var(--th-advant); background: var(--th-advant-soft); color: var(--th-advant-deep); }
.af-doc-viewer-back:focus-visible, .af-doc-viewer-close:focus-visible, .af-doc-viewer-iconbtn:focus-visible,
.af-doc-viewer-fit:focus-visible, .af-doc-viewer-serve-go:focus-visible, .af-doc-viewer-download:focus-visible { outline: 2px solid var(--th-advant); outline-offset: 2px; }

/* Body: the renderer's pages, one image, the supersede compare, or one honest state */
.af-doc-viewer-body {
    flex: 1 1 0;
    min-height: 200px;
    overflow: auto;
    background: var(--th-paper-3);
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center; /* flex-start once zoomed past fit width */
    gap: 14px;
}
.af-doc-viewer-body.is-zoomed { align-items: flex-start; }
.af-doc-viewer-body.is-state { min-height: 240px; }
/* A page slot. The renderer sets its size from the pdf.js viewport (zoom and
   rotation are render parameters); at Fit width it is the column less 6px. */
.af-doc-viewer-page { position: relative; flex: none; width: calc(100% - 6px); aspect-ratio: 8.5 / 11; box-shadow: 0 1px 3px oklch(20% 0.01 255 / 0.28); }
.af-doc-viewer-page.is-image { aspect-ratio: 4 / 3; }
.af-doc-viewer-page > canvas, .af-doc-viewer-page > img { display: block; width: 100%; height: 100%; }

.af-doc-viewer-state {
    align-self: stretch;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 28px 20px;
}
.af-doc-viewer-state-icon { color: var(--th-ink-4); }
.af-doc-viewer-state-head { font-size: var(--th-size-14); font-weight: 600; color: var(--th-ink); }
.af-doc-viewer-state-body { font-size: var(--th-size-13); color: var(--th-ink-2); max-width: 340px; line-height: 1.5; }
.af-doc-viewer-state-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.af-doc-viewer-foot {
    padding: 7px 14px;
    font-size: 11px;
    color: var(--th-ink-2);
    line-height: 1.45;
    border-top: 1px solid var(--th-line-soft);
    flex: none;
}
/* Runtime page dimensions come from the renderer viewport. Paper pixels never theme. */
.af-doc-viewer { height: calc(100dvh - 110px); }
.af-doc-viewer-render { min-width: 0; flex: none; }
.af-doc-viewer-render[hidden] { display: none; }
.af-doc-viewer-render canvas { display: block; background: white; box-shadow: 0 1px 3px oklch(20% 0.01 255 / 0.28); }
.af-doc-viewer-body:has(.af-doc-viewer-render:not([hidden])) { align-items: flex-start; }
.af-doc-viewer .af-req-sheet { margin: 10px; flex: 0 1 auto; min-height: 0; max-height: 46%; overflow-y: auto; }
.af-doc-viewer-actions { padding: 8px 12px; }
@media (max-width: 1100px) {
    .af-req-split.is-viewing { grid-template-columns: minmax(0, 1fr); }
    .af-req-split.is-viewing > .af-req-panel { display: none; }
    .af-doc-viewer-back { display: inline-flex; }
    .af-doc-viewer { position: static; height: auto; min-height: 0; }
    .af-doc-viewer-body { flex: none; height: 60vh; min-height: 280px; }
    .af-doc-viewer .af-req-sheet { max-height: none; }
}

.af-in-grid.is-viewing { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.15fr); }
.af-in-grid.is-viewing > .af-in-list { display: none; }
.af-in-grid.is-viewing .af-in-back { display: inline-flex; }
@media (max-width: 1100px) {
    .af-in-grid.is-viewing { grid-template-columns: minmax(0, 1fr); }
    .af-in-grid.is-viewing > .af-in-detail { display: none; }
}

.af-doc-viewer-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; }
.af-doc-viewer-actions .cc-btn { background: var(--th-paper); color: var(--th-ink-2); }
.af-doc-viewer-actions .cc-btn.is-primary { background: var(--th-advant-deep); color: var(--th-advant-fg); }
.af-req-sheet.is-docked > .af-req-sheet-actions { position: sticky; bottom: -12px; z-index: 1; margin: -8px -14px -12px; padding: 8px 14px 12px; background: var(--th-paper-sunk); }