/* Source-document reader.
   ---------------------------------------------------------------------------
   The chrome around PDF.js's own viewer components. pdf_viewer.min.css draws
   the pages and, critically, positions the invisible text layer over them --
   that file must load BEFORE this one and must not be overridden loosely, or
   selection stops lining up with what the reader can see.

   The look is a dark reading well under an ink-dark toolbar: white pages on a
   neutral ground is what makes a scanned letter read as a document rather than
   as part of the web page it happens to sit on. */

.osc-doc-body { overflow-y: auto !important; }
.osc-doc-body .header { top: 0; }

/* This site defines no .sr-only anywhere, so it is defined here rather than
   assumed. Without it the toolbar's field labels render as visible text in the
   middle of the controls. */
.osc-doc-body .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------- shell ----- */
.osc-doc-head { margin-bottom: 18px; }
.osc-doc-kicker {
    margin: 0 0 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b21f2d;
}
.osc-doc-title {
    margin: 0 0 10px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.15;
    color: #1b1b1b;
}
.osc-doc-dek {
    margin: 0 0 10px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #3b3b3b;
}
.osc-doc-meta {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    color: #6b6b6b;
}
.osc-doc-meta strong { color: #1b1b1b; font-weight: 700; }

/* -------------------------------------------------------- the reader ----- */
.osc-doc-reader {
    border: 1px solid #2a2d34;
    border-radius: 8px;
    overflow: hidden;
    background: #4a4e57;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    margin-bottom: 28px;
}

/* Toolbar ------------------------------------------------------------------ */
.osc-doc-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: #1c1f26;
    border-bottom: 1px solid #000;
    font-family: Arial, Helvetica, sans-serif;
}
.osc-doc-bar-group { display: flex; align-items: center; gap: 4px; }
.osc-doc-bar-spacer { flex: 1 1 auto; }

.osc-doc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    background: #2c3038;
    color: #e8e6e0;
    border: 1px solid #3c414b;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.osc-doc-btn:hover:not(:disabled) { background: #3a3f49; border-color: #545b68; }
.osc-doc-btn:active:not(:disabled) { background: #23272e; }
.osc-doc-btn:disabled { opacity: 0.35; cursor: default; }
.osc-doc-btn.is-on { background: #b21f2d; border-color: #b21f2d; color: #fff; }
/* The download control is an <a>, not a <button>, because it is a real link to
   a real file -- it works with JavaScript off and can be opened in a new tab.
   That means the site's global anchor styling lands on it, and it rendered blue
   and underlined next to four grey buttons. Naming the element raises the
   specificity above those rules without !important. */
a.osc-doc-btn,
a.osc-doc-btn:link,
a.osc-doc-btn:visited {
    color: #e8e6e0;
    text-decoration: none;
}
a.osc-doc-btn:hover,
a.osc-doc-btn:focus {
    color: #fff;
    text-decoration: none;
}

.osc-doc-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Focus must be visible against a dark bar, where the default ring vanishes. */
.osc-doc-btn:focus-visible,
.osc-doc-page-input:focus-visible,
.osc-doc-zoom-select:focus-visible,
.osc-doc-find-input:focus-visible {
    outline: 2px solid #7aa7ff;
    outline-offset: 1px;
}

.osc-doc-page-input {
    width: 44px;
    height: 32px;
    padding: 0 6px;
    background: #2c3038;
    color: #e8e6e0;
    border: 1px solid #3c414b;
    border-radius: 5px;
    font-size: 0.8rem;
    text-align: center;
    /* The spinners steal width the number needs and are redundant beside the
       prev/next buttons. */
    -moz-appearance: textfield;
    appearance: textfield;
}
.osc-doc-page-input::-webkit-outer-spin-button,
.osc-doc-page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.osc-doc-page-count { color: #9aa0ab; font-size: 0.8rem; white-space: nowrap; }

.osc-doc-zoom-select {
    height: 32px;
    padding: 0 6px;
    background: #2c3038;
    color: #e8e6e0;
    border: 1px solid #3c414b;
    border-radius: 5px;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Find bar ----------------------------------------------------------------- */
.osc-doc-find {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #23272e;
    border-bottom: 1px solid #000;
    font-family: Arial, Helvetica, sans-serif;
}
.osc-doc-find[hidden] { display: none; }
.osc-doc-find-input {
    flex: 0 1 260px;
    min-width: 0;
    height: 30px;
    padding: 0 9px;
    background: #12151a;
    color: #e8e6e0;
    border: 1px solid #3c414b;
    border-radius: 5px;
    font-size: 0.82rem;
}
.osc-doc-find-input::placeholder { color: #767d89; }
.osc-doc-find-status { color: #9aa0ab; font-size: 0.78rem; white-space: nowrap; }
.osc-doc-find-status.is-none { color: #ff9a9a; }
.osc-doc-find-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    color: #9aa0ab; font-size: 0.78rem; cursor: pointer; user-select: none;
}
.osc-doc-find-toggle input { accent-color: #b21f2d; }

/* Scroll well -------------------------------------------------------------- */
.osc-doc-stage { position: relative; }

/* PDFViewer measures this element, so it needs a real height and its own
   scrollbar. position:absolute is what the component expects for the pages
   it positions inside. */
.osc-doc-container {
    position: absolute;
    inset: 0;
    overflow: auto;
    background: #4a4e57;
}
.osc-doc-stage { height: min(78vh, 1000px); }
.osc-doc-reader.is-full .osc-doc-stage { height: calc(100vh - 96px); }

/* Fullscreen: the reader leaves the page flow entirely. Fixed rather than the
   Fullscreen API so the site's own header stays reachable and Escape is ours
   to handle consistently. */
.osc-doc-reader.is-full {
    position: fixed;
    inset: 0;
    z-index: 60;
    margin: 0;
    border-radius: 0;
    border: 0;
}

/* Page rail ---------------------------------------------------------------- */
.osc-doc-thumbs {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 132px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 8px;
    background: #23272e;
    border-right: 1px solid #12151a;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 3;
}
.osc-doc-thumbs[hidden] { display: none; }

/* The scroll well makes room for the rail rather than sliding under it, so no
   part of a page is ever hidden behind it. */
.osc-doc-reader.has-thumbs .osc-doc-container { left: 132px; }

.osc-doc-thumb {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
}
.osc-doc-thumb-frame {
    display: block;
    width: 100%;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
    overflow: hidden;
    /* Holds the slot open before the canvas is painted, so opening the rail
       does not make every later thumbnail jump upward as they arrive. */
    aspect-ratio: 17 / 22;
}
.osc-doc-thumb canvas { display: block; width: 100%; height: auto; }
.osc-doc-thumb-num {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    color: #9aa0ab;
    text-align: center;
}
.osc-doc-thumb:hover .osc-doc-thumb-frame { border-color: #6b7280; }
.osc-doc-thumb.is-current .osc-doc-thumb-frame { border-color: #b21f2d; }
.osc-doc-thumb.is-current .osc-doc-thumb-num { color: #fff; font-weight: 700; }
.osc-doc-thumb:focus-visible .osc-doc-thumb-frame { outline: 2px solid #7aa7ff; outline-offset: 2px; }

/* On a narrow screen the rail would leave the document a sliver, so it floats
   over the pages instead of taking a share of the width. */
@media (max-width: 700px) {
    .osc-doc-thumbs { width: 108px; box-shadow: 6px 0 18px rgba(0,0,0,0.35); }
    .osc-doc-reader.has-thumbs .osc-doc-container { left: 0; }
}

/* Pages -------------------------------------------------------------------- */
.osc-doc-container .pdfViewer .page {
    margin: 14px auto;
    border: 0;
    border-image: none;
    background-color: #fff;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.32);
}
.osc-doc-container .pdfViewer .page:last-child { margin-bottom: 24px; }

/* Search hits. The default is a washed yellow that disappears on a scan. */
.osc-doc-container .textLayer .highlight {
    background-color: rgba(255, 210, 0, 0.42);
    border-radius: 2px;
}
.osc-doc-container .textLayer .highlight.selected {
    background-color: rgba(178, 31, 45, 0.42);
}
.osc-doc-container .textLayer ::selection { background: rgba(122, 167, 255, 0.45); }

/* States ------------------------------------------------------------------- */
.osc-doc-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    background: #4a4e57;
    color: #e8e6e0;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 2;
}
.osc-doc-state[hidden] { display: none; }
.osc-doc-state-label { font-size: 0.85rem; letter-spacing: 0.02em; }
.osc-doc-state-sub { font-size: 0.78rem; color: #b8bdc6; max-width: 34rem; line-height: 1.5; }

.osc-doc-progress {
    width: min(240px, 60%);
    height: 4px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    overflow: hidden;
}
.osc-doc-progress-bar {
    height: 100%;
    width: 0;
    background: #b21f2d;
    transition: width 0.18s ease;
}
/* Before Content-Length is known there is no percentage to show, so the bar
   sweeps instead of sitting at zero looking stalled. */
.osc-doc-progress.is-indeterminate .osc-doc-progress-bar {
    width: 35%;
    animation: osc-doc-sweep 1.1s ease-in-out infinite;
}
@keyframes osc-doc-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(340%); }
}

.osc-doc-state-link {
    color: #fff;
    background: #b21f2d;
    border-radius: 5px;
    padding: 9px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}
.osc-doc-state-link:link,
.osc-doc-state-link:visited { color: #fff; text-decoration: none; }
.osc-doc-state-link:hover { background: #8f1824; color: #fff; text-decoration: none; }

/* Footer under the reader -------------------------------------------------- */
.osc-doc-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: -12px 0 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem;
    color: #6b6b6b;
}
.osc-doc-foot-note { flex: 1 1 16rem; min-width: 0; line-height: 1.5; }

/* A LEGEND, NOT CONTROLS.
   These were raised keycaps -- a 2px bottom border reads as a button lifting off
   the page -- sitting in a row immediately below a toolbar of real buttons, and
   they were being read as a second set of controls. They are now labelled,
   flat, dimmer than the text around them, and explicitly not interactive: no
   pointer cursor, no hover, and not selectable, so nothing invites a click. */
.osc-doc-keys {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin: 0;
    color: #8a8a8a;
    cursor: default;
    user-select: none;
}
.osc-doc-keys-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a5a5a5;
}
.osc-doc-key-item { white-space: nowrap; font-size: 0.76rem; }
.osc-doc-keys kbd {
    display: inline-block;
    min-width: 1.1em;
    padding: 0 3px;
    margin-right: 1px;
    background: none;
    border: 1px solid #cfcac0;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: center;
    color: #6f6f6f;
}

/* Small screens ------------------------------------------------------------ */
@media (max-width: 860px) {
    .osc-doc-title { font-size: 1.6rem; }
    .osc-doc-stage { height: 70vh; }
    /* Labels go, icons stay: the bar has to survive down to a phone without
       wrapping into three rows. */
    .osc-doc-btn-label { display: none; }
    .osc-doc-btn { padding: 0 8px; }
    .osc-doc-find-input { flex: 1 1 auto; }
}
@media (max-width: 560px) {
    .osc-doc-page-count { display: none; }
    .osc-doc-keys { display: none; }
}

/* Someone printing the page wants the document, not the newspaper around it.
   The pages themselves are canvases inside the scroll well, so the toolbar and
   chrome go and the well is allowed to grow. */
@media print {
    .header, .nav, nav, footer, aside, .osc-doc-bar, .osc-doc-find,
    #marquee, #preloader, .osc-doc-foot, .osc-doc-state { display: none !important; }
    .osc-doc-reader { border: 0; box-shadow: none; background: #fff; }
    .osc-doc-stage { height: auto !important; }
    .osc-doc-container { position: static !important; overflow: visible !important; background: #fff; }
    .osc-doc-container .pdfViewer .page { box-shadow: none; margin: 0 auto 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .osc-doc-progress.is-indeterminate .osc-doc-progress-bar { animation: none; width: 100%; }
    .osc-doc-btn, .osc-doc-progress-bar { transition: none; }
}