/* ===========================================================================
   CASE FILE — LIVE RENDERING  (?casefile=live, under review 2026-07-31)
   ---------------------------------------------------------------------------
   Loaded ONLY by episode/sections/case-file.blade.php when the live variant is
   selected. Layers over the legacy `style/casefile.css`, which still owns the
   look of the document (parchment ground, .document-* typography, .redacted).
   That file is NOT edited: the flat-screenshot variant still uses its
   .case-file-image rule, and leaving it alone keeps this change reversible.

   WHAT THIS FILE IS FOR: the legacy components were built with UNPREFIXED
   Bootstrap columns (`col-6`, `col-3`), fixed-width floats and absolutely
   positioned stamps, so the document did not collapse on a phone — which is
   why it was replaced by a screenshot in the first place. The Blade ports fix
   the grid (`col-12 col-md-6`); this fixes everything that isn't the grid.

   Everything is scoped under .case-file-container so it cannot leak into the
   rest of the episode page.
   =========================================================================== */

/* --- the sheet of paper ------------------------------------------------- */

.case-file-container {
    /* The legacy fixed 30px is most of a phone's gutter. Scale it, and keep a
       little more headroom at the top than the legacy's two stray <br/>s gave. */
    --cf-pad: clamp(1rem, 3.2vw, 2.25rem);
    margin: 0;
}

.case-file-container .paper,
.case-file-container .paper-rv {
    padding: var(--cf-pad);
    /* The document is a document — hold it to its own ink and type regardless
       of what the surrounding skin sets on body copy. */
    color: #2b2b2b;
    font-family: 'Open Sans', 'Lato', sans-serif;
    font-weight: 400;
    font-size: clamp(0.86rem, 0.45vw + 0.76rem, 0.98rem);
    line-height: 1.55;
    overflow-wrap: break-word;
}

.case-file-container .paper-rv {
    padding: 0; /* the redverse layout paints its own full-bleed bands */
}

/* Bootstrap's .row negative gutter would pull the document's columns outside
   the paper's padding. Nothing in here is a grid that needs one. */
.case-file-container .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}

/* THE DOCUMENT IS NOT PAGE PROSE. `.md-skin .container p` (0,2,1) sets every
   paragraph on an episode page to 1.02rem/1.8 in the body colour — which on
   this sheet flattened the Oswald title to the same size as its own labels.
   This is the exemption the skin already grants .md-hero / .card / .fr-quote,
   spelled at matching specificity so it lands whichever sheet loads last. */
.md-skin .case-file-container p,
.case-file-container p {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* …but the three display lines keep the 150% casefile.css gives them, which the
   rule above would otherwise out-specify and flatten in turn. */
.md-skin .case-file-container .document-title,
.md-skin .case-file-container .document-title-rv,
.case-file-container .document-title,
.case-file-container .document-title-rv {
    font-size: 150%;
    line-height: 1.15;
}

/* NB `.document-classified-rv` is no longer rendered by anything — the redverse
   CLASSIFIED mark is the owner's stamp IMAGE now, see below. casefile.css still
   carries the old text rule; it selects nothing and is left alone, like every
   other legacy rule this sheet layers over. */

/* --- the CLASSIFIED stamp (redverse) ------------------------------------ */

/* The owner's stamp image (2026-07-31), built to match crossuniverse.png, and
   deliberately wired the SAME WAY: absolutely positioned, out of flow, so it
   stamps over the document instead of displacing it — in flow the old text
   version was shoving the case number ~47px down the band.

   Anchored to `.document-meta-rv` rather than to the paper, because what it
   wants to sit on is the top of the TAN band, whose distance from the top of
   the sheet changes with the header logo. `.cross-universe` can anchor to the
   paper because it is pinned to the sheet's own top-right corner.

   IT CROSSES THE CASE NUMBER, the way CROSS UNIVERSE crosses the phone and
   e-mail lines on 402. That is the look, and it is also forced: floating costs
   the band ~47px, and the only remaining gap near this position is 368x50px
   against a stamp whose rotated bounding height is ~60px at native width.
   The band's one genuinely open area is its LOWER left (651x54, under
   VICTIM(S)) if this is ever wanted somewhere clear — change `top`/`left`. */
.case-file-container .document-meta-rv {
    position: relative;
}

.case-file-container .highly-classified {
    position: absolute;
    /* Rotating about the left edge swings the box up — measured 27px above the
       element's own top at native width, and it scales with the stamp, so this
       tracks the viewport rather than being one constant. Without it the stamp's
       top-right corner sits on the dark header band. Measured clearance: 4px at
       both 1280 and 375. */
    top: clamp(17px, 2.4vw, 31px);
    /* 26.5% lands it at the indent the legacy text stamp had (x=382 on a 1068px
       band), i.e. tucked left of the case number rather than centred on it. */
    left: 26.5%;
    /* Native 307px on a full-width sheet, never below a legible floor — the same
       clamp shape as .cross-universe, and the reason neither stamp has to be
       hidden on a phone. */
    width: clamp(150px, 29%, 307px);
    transform: rotate(-5deg);
    transform-origin: left center;
    z-index: 5000;
    pointer-events: none;
}

.case-file-container .highly-classified img {
    width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    /* Below md the band is a single column and the case number wraps to two
       lines, so the legacy indent would push the stamp off the right edge.
       Tuck it back to the band's own padding edge. */
    .case-file-container .highly-classified {
        left: var(--cf-pad);
    }
}

/* NB the "no stamp" case is handled in redverse.blade.php by not rendering the
   element at all — out of flow there is nothing to space, so the legacy's bare
   <br/> spacer on 303/305/307/313 is simply gone. */

/* --- blueverse: letterhead ---------------------------------------------- */

.case-file-container .document-header {
    font-size: 0.95em;
    line-height: 1.45;
}

/* Legacy did this with `float: right` + inline `text-align: right`, which on a
   phone left the address block jammed against a 150px column. Right-aligned
   only once the two columns actually sit side by side. */
@media (min-width: 768px) {
    .case-file-container .cf-header-contact {
        text-align: right;
    }
}

@media (max-width: 767.98px) {
    .case-file-container .cf-header-contact {
        margin-top: 0.6rem;
    }
}

.case-file-container hr,
.case-file-container .blue-hr {
    margin: 0.9rem 0 0.2rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.35);
    opacity: 1;
}

.case-file-container .document-title {
    margin: 0.9rem 0 1.4rem;
    line-height: 1.15;
    /* casefile.css sets Oswald + 150%; 150% of a clamped base stays in range at
       every width, so the title never outgrows a 375px sheet. */
}

/* --- the LABEL: value pairs --------------------------------------------- */

.case-file-container .cf-field {
    margin: 0 0 0.85rem;
}

.case-file-container .document-label,
.case-file-container .document-label-rv {
    /* casefile.css owns the family/colour/weight — this only stops a long label
       and its value being split across a line break awkwardly. */
    margin-right: 0.15rem;
}

/* The two meta columns need a gutter between them once they are side by side,
   and none at all when they are stacked. */
@media (min-width: 768px) {
    .case-file-container .row > .col-md-6:first-child {
        padding-right: 1.75rem;
    }
}

.case-file-container .cf-summary {
    margin-top: 0.35rem;
}

.case-file-container .cf-summary p {
    margin: 0 0 0.9rem;
}

.case-file-container .cf-summary p:last-child {
    margin-bottom: 0;
}

/* --- BLUEVERSE_MD (ep 207): the Massive Dynamic report plate ------------- */

/* Legacy: `width: 250px; float: right` inside a <p> that also contained a
   <div> — invalid nesting, so the paragraph closed early and the float never
   cleared. Rebuilt as a flex row that wraps instead. */
.case-file-container .cf-summary-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.case-file-container .case-file-md-label {
    width: auto;
    max-width: min(250px, 100%);
    float: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: right;
}

.case-file-container .case-file-md-label img {
    max-width: 100%;
    height: auto;
}

.case-file-container .case-file-md-label__text {
    margin-left: auto;
}

.case-file-container .case-file-md-label__title {
    font-size: 16px;
}

/* --- BOTH (402/409/417/418): the cross-universe stamp -------------------- */

/* Legacy pinned it at `top: 70px; right: 80px`, which on a narrow sheet lands
   it on top of the address block. Anchored proportionally instead, and it
   scales with the sheet.

   IT OVERLAPS THE LETTERHEAD ON PURPOSE — that is what a rubber stamp does, and
   what the original screenshots show. So the mobile answer is to shrink it, not
   to look for clear space (and never to hide it: on a BOTH episode the stamp is
   the only thing on the page that says the case crossed universes).

   A percentage max-width alone collapses it to ~115px on a 303px sheet, which
   is too small to read. `clamp()` holds a legible floor: 360px (its native
   width) on a full-width sheet, never below 172px. */
.case-file-container .cross-universe {
    top: clamp(1.7rem, 6.5vw, 4.5rem);
    right: clamp(0.5rem, 6vw, 5rem);
    width: clamp(172px, 34%, 360px);
    max-width: 82%;
    pointer-events: none;
}

.case-file-container .cross-universe img {
    width: 100%;
    height: auto;
}

/* --- redverse ----------------------------------------------------------- */

.case-file-container .document-header-background-rv {
    padding: var(--cf-pad) var(--cf-pad) calc(var(--cf-pad) / 2);
    letter-spacing: clamp(2px, 0.6vw, 7px);
}

.case-file-container .document-header-rv {
    align-items: center;
}

.case-file-container .document-logo-rv {
    /* The legacy -90px pulled the oversized logo back up into the band; with a
       fluid logo that overlap has to scale too, or it eats the heading. */
    margin-bottom: clamp(-90px, -6vw, -20px);

    /* THE NEGATIVE MARGIN MAKES THE LOGO OVERHANG THE DARK HEADER BAND — the
       image is ~150px tall in a ~74px row, so ~59px of it hangs below
       `.document-header-background-rv` and onto the tan meta band. That band is
       `position: relative` (it anchors the CLASSIFIED stamp, see the top of
       this file) with an opaque background, so as a positioned element it
       painted OVER the logo's static overhang and cut the bottom off it.
       Positioning the logo too, with a z-index above the band, puts it back on
       top. `.highly-classified` sits at 5000, so the stamp still wins. */
    position: relative;
    z-index: 1;
}

.case-file-container .document-logo-rv img {
    max-width: 100%;
    height: auto;
}

.case-file-container .cf-rv-dept {
    font-size: clamp(9px, 1vw, 12px);
}

.case-file-container .cf-rv-title {
    font-size: clamp(17px, 2.6vw, 28px);
}

.case-file-container .document-meta-rv,
.case-file-container .document-summary-rv {
    padding: 0.75rem var(--cf-pad);
}

/* Legacy right-aligned BOTH redverse meta columns with inline styles, which
   reads as a ragged left edge once they stack. Right-aligned only side by
   side, same call as the blueverse letterhead. */
@media (min-width: 768px) {
    .case-file-container .cf-rv-col {
        text-align: right;
    }

    .case-file-container .cf-rv-col:first-child {
        padding-right: 1.75rem;
    }
}

.case-file-container .document-classified-rv,
.case-file-container .document-title-rv {
    margin-bottom: 0.5rem;
}

/* NB there is deliberately NO mobile un-rotate for the CLASSIFIED stamp. An
   earlier pass flattened it below 768px because the rotated text overhung its
   box; now that it is an inline-block sized to its own text it measures 246px
   inside a 303px sheet at 375px, so it keeps its angle everywhere — which is
   what the owner asked for (2026-07-31). */

/* --- links inside the document ------------------------------------------ */

/* massive-dynamic.css tints in-content links with the per-episode accent, which
   on parchment reads as a stray highlight. Keep them in the document's ink. */
.md-skin .case-file-container .col-lg a,
.md-skin .case-file-container a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}