/* ===========================================================================
   "See the document" — the in-story document insert, and the overlay it opens.
   ===========================================================================

   WHY THE INSERT IS AN <a> AND NOT A BUTTON.

   The story body passes through sanitizeStoryHtmlBlock(), which removes
   <button> outright and allows no data-* attributes. So the insert is an
   anchor whose href is the PDF itself, and the viewer reads the URL off that
   href. This is not a workaround dressed up as a principle -- it is the better
   shape anyway: with JavaScript off, or before it loads, or if the overlay
   throws, the link still opens the document. Nothing about this insert can
   leave a reader with a dead "See the document".

   Scoped under .article-container because custom.css sets rules like
   `.article-container h3` at specificity (0,1,1), which silently outranks a
   bare class at (0,1,0). Two classes deep beats it.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   THE INSERT
   ------------------------------------------------------------------------- */

.article-container .osc-doc-callout {
    position: relative;
    display: flex;
    gap: 18px;
    margin: 34px 0;
    padding: 22px 24px 22px 22px;
    background: linear-gradient(180deg, #fffdf8 0%, #f7f1e4 100%);
    border: 1px solid #ded2b8;
    border-left: 5px solid #1f4e79;
    border-radius: 3px;
    box-shadow: 0 2px 0 #ffffff inset, 0 10px 26px rgba(31, 46, 66, .10);
}

/* A sheet of paper with a turned corner, drawn rather than shipped as an
   image: the insert has to survive a sanitizer that allows no <svg>, and a
   decorative <img> would be one more request and one more thing to 404. */
.article-container .osc-doc-callout-sheet {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 60px;
    background: #ffffff;
    border: 1px solid #c9bda2;
    border-radius: 2px;
    box-shadow: 2px 2px 0 rgba(31, 78, 121, .10);
}
/* Ruled lines suggesting text, so it reads as a document at a glance. */
.article-container .osc-doc-callout-sheet::before {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    top: 14px;
    height: 30px;
    background: repeating-linear-gradient(
        180deg,
        #c3cedd 0, #c3cedd 2px,
        transparent 2px, transparent 7px
    );
}
/* The folded corner. */
.article-container .osc-doc-callout-sheet::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 14px;
    height: 14px;
    background: linear-gradient(225deg, #f7f1e4 0 50%, #c9bda2 50% 54%, #ffffff 54%);
    border-left: 1px solid #c9bda2;
    border-bottom: 1px solid #c9bda2;
}

.article-container .osc-doc-callout-main {
    flex: 1 1 auto;
    min-width: 0;
}

.article-container .osc-doc-callout-kicker {
    margin: 0 0 5px !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .68rem !important;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: #1f4e79;
    text-indent: 0 !important;
}

/* !important throughout: these sit inside .article-container, whose own
   heading and paragraph rules are more specific than a single class. */
.article-container .osc-doc-callout-title {
    margin: 0 0 7px !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.18rem !important;
    font-weight: 700;
    line-height: 1.3;
    color: #14243a;
}

.article-container .osc-doc-callout-note {
    margin: 0 0 15px !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: .95rem !important;
    line-height: 1.55;
    color: #4e5a6b;
    text-indent: 0 !important;
}

.article-container .osc-doc-callout-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    /* 44px, the smallest target a thumb hits reliably. */
    min-height: 44px;
    padding: 11px 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .875rem;
    font-weight: 700;
    color: #ffffff !important;
    background: #1f4e79;
    border: 1px solid #1f4e79;
    border-radius: 999px;
    text-decoration: none !important;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* A small arrow that nudges right on hover -- the one bit of motion, and it
   points at what happens next. */
.article-container .osc-doc-callout-action::after {
    content: "\2192";
    font-size: 1.05em;
    line-height: 1;
    transition: transform .18s ease;
}

.article-container .osc-doc-callout-action:hover,
.article-container .osc-doc-callout-action:focus-visible {
    background: #143b5e;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(20, 59, 94, .28);
    outline: none;
}
.article-container .osc-doc-callout-action:hover::after,
.article-container .osc-doc-callout-action:focus-visible::after {
    transform: translateX(3px);
}
.article-container .osc-doc-callout-action:focus-visible {
    box-shadow: 0 0 0 3px rgba(31, 78, 121, .35);
}

@media (max-width: 40rem) {
    .article-container .osc-doc-callout {
        gap: 14px;
        padding: 18px;
    }
    .article-container .osc-doc-callout-sheet { width: 36px; height: 47px; }
    .article-container .osc-doc-callout-sheet::before { top: 11px; height: 24px; }
    .article-container .osc-doc-callout-title { font-size: 1.06rem !important; }
    .article-container .osc-doc-callout-action { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .article-container .osc-doc-callout-action,
    .article-container .osc-doc-callout-action::after { transition: none; }
    .article-container .osc-doc-callout-action:hover { transform: none; }
}

/* In print the overlay is irrelevant and the URL is the useful part. */
@media print {
    .article-container .osc-doc-callout { box-shadow: none; break-inside: avoid; }
    .article-container .osc-doc-callout-action { color: #14243a !important; background: none; border-color: #14243a; }
    .article-container .osc-doc-callout-action::after { content: ""; }
    .article-container .osc-doc-callout-action[href]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ---------------------------------------------------------------------------
   THE OVERLAY
   ------------------------------------------------------------------------- */

.osc-docview {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    flex-direction: column;
    background: rgba(10, 16, 24, .88);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: oscDocViewIn .18s ease-out both;
}
.osc-docview[hidden] { display: none; }

@keyframes oscDocViewIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.osc-docview-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    color: #ffffff;
    background: #14243a;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.osc-docview-titles { flex: 1 1 auto; min-width: 0; }

.osc-docview-kicker {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: #8fc3f2;
}

.osc-docview-title {
    margin: 2px 0 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    /* One line with an ellipsis: a long document title must not push the close
       button off a narrow screen. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.osc-docview-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.osc-docview-link,
.osc-docview-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    color: #eaf2fb;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 7px;
    text-decoration: none;
    cursor: pointer;
}
.osc-docview-link:hover,
.osc-docview-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .2);
}
.osc-docview-close { min-width: 40px; font-size: 1.15rem; }

.osc-docview-stage {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px;
}

.osc-docview-frame {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

/* The small-screen path. Phones do not reliably render a PDF in an iframe --
   iOS Safari shows page one and will not scroll it, and Android Chrome often
   downloads instead. A viewer that shows a single frozen page is worse than
   an honest handoff to the device's own reader, so on those widths the stage
   holds this card rather than a frame that half works. */
.osc-docview-handoff {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    padding: 26px 22px;
    text-align: center;
    color: #14243a;
    background: #fffdf8;
    border-radius: 6px;
}
.osc-docview-handoff p {
    margin: 0;
    max-width: 30rem;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1rem;
    line-height: 1.55;
}
.osc-docview-handoff .osc-docview-handoff-open {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 12px 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .9rem;
    font-weight: 700;
    color: #ffffff;
    background: #1f4e79;
    border-radius: 999px;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .osc-docview { animation: none; }
}

/* While the overlay is open the article behind it must not scroll. custom.css
   already sets `body { overflow: hidden }` and releases it on load, so this
   re-applies it for the duration rather than fighting that rule. */
body.osc-docview-open { overflow: hidden !important; }

@media print {
    .osc-docview { display: none !important; }
}

/* ===========================================================================
   THE RECORDING INSERT, and the video stage it opens.
   ===========================================================================

   Same machinery as the document insert above -- an <a> whose href is the file,
   intercepted by document-viewer.js -- for the same reason: the story sanitizer
   strips <button>, allows no data-* attributes, and does not allow <video> in
   the body at all. So the player is built in JavaScript inside the overlay, and
   the thing in the story is a link that still works if none of that runs.
   ========================================================================= */

.article-container .osc-media-callout {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 34px 0;
    padding: 20px 24px;
    background: linear-gradient(135deg, #14243a 0%, #1f4e79 100%);
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(12, 26, 43, .28);
    overflow: hidden;
}

/* A bright rule along the top, the same signal the writer callout uses to say
   "this is the paper speaking, not the story". */
.article-container .osc-media-callout::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #8fc3f2, #f6c756 60%, #8fc3f2);
}

/* The play affordance, drawn rather than an image: no <svg> survives the
   sanitizer and a decorative <img> is one more thing to 404. */
.article-container .osc-media-callout-play {
    position: relative;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 2px solid rgba(255, 255, 255, .55);
}
.article-container .osc-media-callout-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #ffffff;
}

.article-container .osc-media-callout-main { flex: 1 1 auto; min-width: 0; }

.article-container .osc-media-callout-kicker {
    margin: 0 0 4px !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .66rem !important;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8fc3f2;
    text-indent: 0 !important;
}

.article-container .osc-media-callout-title {
    margin: 0 0 6px !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.16rem !important;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.article-container .osc-media-callout-note {
    margin: 0 0 14px !important;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: .93rem !important;
    line-height: 1.55;
    color: #cfe0f3;
    text-indent: 0 !important;
}

.article-container .osc-media-callout-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;              /* the smallest target a thumb hits reliably */
    padding: 11px 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .875rem;
    font-weight: 700;
    color: #14243a !important;
    background: #ffffff;
    border-radius: 999px;
    text-decoration: none !important;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.article-container .osc-media-callout-action:hover,
.article-container .osc-media-callout-action:focus-visible {
    background: #dceafc;
    color: #14243a !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
    outline: none;
}
.article-container .osc-media-callout-action:focus-visible {
    box-shadow: 0 0 0 3px rgba(143, 195, 242, .75);
}

@media (max-width: 40rem) {
    .article-container .osc-media-callout {
        gap: 14px;
        padding: 18px;
    }
    .article-container .osc-media-callout-play { width: 44px; height: 44px; }
    .article-container .osc-media-callout-play::after { border-width: 8px 0 8px 13px; }
    .article-container .osc-media-callout-title { font-size: 1.05rem !important; }
    .article-container .osc-media-callout-action { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .article-container .osc-media-callout-action { transition: none; }
    .article-container .osc-media-callout-action:hover { transform: none; }
}

@media print {
    .article-container .osc-media-callout {
        background: none;
        border: 1px solid #14243a;
        box-shadow: none;
        break-inside: avoid;
    }
    .article-container .osc-media-callout-kicker,
    .article-container .osc-media-callout-title,
    .article-container .osc-media-callout-note { color: #14243a !important; }
    .article-container .osc-media-callout-play { display: none; }
    .article-container .osc-media-callout-action { color: #14243a !important; background: none; border: 1px solid #14243a; }
    .article-container .osc-media-callout-action[href]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ---------------------------------------------------------------------------
   THE VIDEO ON THE OVERLAY STAGE
   ------------------------------------------------------------------------- */

/* Centred, and never taller than the space it has. object-fit keeps a 16:9
   recording from being stretched on a tall phone held upright. */
.osc-docview-video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 1100px;
    margin: 0 auto;
    object-fit: contain;
    background: #000000;
    border-radius: 4px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

@media (max-width: 40rem) {
    /* The stage keeps its padding on a phone, but the player should use the
       width it has -- a 16:9 clip in a portrait window is short already. */
    .osc-docview-stage { padding: 8px; }
    .osc-docview-video { border-radius: 0; }
}