/* ======================================================================
   article-print.css
   ----------------------------------------------------------------------
   Print and "Save as PDF" styling for the single clinical article page.

   LINKED BY article.php AND BY NOTHING ELSE.

   Same rule as swot-report.css: @page, break-inside and print rules have
   no business on the other 32 pages that load site.css. Do not move any
   of this into site.css or style.css.

   The file has two parts:

     1. A small SCREEN block for the actions row that carries the Print
        button. It introduces three new class names and touches nothing
        that already existed.

     2. The @media print block. It applies however the print was started:
        the button, Ctrl+P, right click then Print, and the "Save as PDF"
        destination inside the browser print dialog. That is deliberate.
        Christopher's original complaint was about right click then Print,
        so a rule that only fired for the button would have fixed the new
        route and left the old one broken.
   ====================================================================== */


/* ======================================================================
   1. SCREEN
   ====================================================================== */

/* Back link on the left, print button on the right. .ps-article-back
   carries its own 24px bottom margin in site.css; inside this row the row
   owns the spacing instead, or the two sit at different heights. */
.ps-article-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ps-article-actions .ps-article-back { margin-bottom: 0; }

/* .ps-btn was written for <a>. On a <button> the UA font wins unless it
   is explicitly inherited. */
.ps-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 8px 14px;
    cursor: pointer;
}
.ps-print-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Provenance block. Hidden on screen, printed on paper. Not the [hidden]
   attribute, so the author display versus UA stylesheet trap recorded in
   CLAUDE.md cannot apply here. */
.ps-print-source { display: none; }

@media (max-width: 600px) {
    .ps-print-btn { font-size: 0.82rem; padding: 7px 12px; }
}


/* ======================================================================
   2. PRINT
   ====================================================================== */

@media print {

    @page {
        size: A4;
        margin: 15mm 15mm 16mm;
    }

    /* ---- Anything that cannot be used on a sheet of paper ----
       The back link is listed in its own right as well as through the row
       that contains it, so it stays hidden if the row is ever restyled. */
    .ps-topbar,
    .ps-footer,
    .ps-article-actions,
    .ps-article-back,
    .ps-print-btn,
    .ps-cpd-cta,
    .ps-art-checklist-btns {
        display: none !important;
    }

    /* ---- Page shell: fit the paper, not the viewport ----
       Every article size is set in rem, so scaling the root scales the
       whole document in proportion. 11pt is roughly an 8 percent
       reduction on the screen size, which buys a useful amount of page
       without costing legibility on a clinical reference. */
    html {
        font-size: 11pt;
        background: #fff;
    }
    body {
        background: #fff;
        margin: 0;
        padding: 0;
    }
    .ps-main {
        min-height: 0;
        padding: 0;
    }
    .ps-article-wrap {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* ---- Keep the triage colour coding ----
       Browsers drop backgrounds when printing. Without this the red,
       amber and green banding that carries the entire escalation message
       prints as plain white boxes, which for this content is the single
       most damaging thing that can happen to the page. */
    .ps-art-action,
    .ps-art-section--danger,
    .ps-art-section--warning,
    .ps-art-section--framework,
    .ps-art-section--references,
    .ps-art-checklist-box,
    .ps-art-table th,
    .ps-art-takeaways li::before,
    .ps-art-stop-letter,
    .ps-article-tag,
    .ps-alert,
    .ps-alert-err {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ---- Tables ----
       .ps-art-table-wrap is overflow-x: auto on screen, which CLIPS the
       right hand columns on paper rather than wrapping them. It has to
       open up. thead repeats on every page a long table runs onto. */
    .ps-art-table-wrap {
        overflow: visible !important;
        border-radius: 0;
    }
    .ps-art-table { font-size: 0.86rem; }
    .ps-art-table thead { display: table-header-group; }
    .ps-art-table th,
    .ps-art-table td { padding: 7px 10px; }

    /* ---- Pagination ----
       Small units stay whole; containers are left free to flow.

       Note what is NOT here: break-inside: avoid on .ps-art-section. A
       section longer than a page that is told never to break simply moves
       to the next page and overflows anyway, leaving most of a page
       blank. That is the same fault recorded against the SWOT PDF in
       CLAUDE.md (phase 5, rule 3), and it is worse than the problem it
       tries to solve. */
    p,
    li,
    tr,
    .ps-art-action,
    .ps-art-stop-item,
    .ps-art-checklist-box,
    .ps-art-obs-note,
    .ps-art-script,
    .ps-art-disclaimer,
    .ps-print-source {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* The coloured callouts are short by construction, never a page long,
       so these are safe to keep atomic. */
    .ps-art-section--danger,
    .ps-art-section--warning,
    .ps-art-section--framework {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* A heading never sits alone at the foot of a page. */
    h1, h2, h3,
    .ps-art-subhead,
    .ps-article-header {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
    }

    /* No single line stranded from the rest of its paragraph. */
    p, li {
        orphans: 3;
        widows: 3;
    }

    /* ---- Spacing: screen margins are generous for scrolling and waste
       paper. Tightened, not removed. ---- */
    .ps-art-section { margin-bottom: 20px; }
    .ps-art-section h2 { margin-bottom: 10px; font-size: 1.12rem; }
    .ps-article-header {
        margin-bottom: 18px;
        padding-bottom: 14px;
    }
    .ps-article-title { font-size: 1.55rem; }
    .ps-article-summary { font-size: 1rem; }

    /* ---- Greys that are legible on a backlit screen and faint on paper ---- */
    .ps-article-meta { color: #4b5563; }
    .ps-art-disclaimer {
        color: #333;
        font-size: 0.8rem;
        margin-top: 22px;
        padding-top: 12px;
    }
    .ps-art-disclaimer strong { color: #000; }

    /* ---- Links ----
       A blue underlined phrase that does nothing reads as broken on
       paper. Hrefs are deliberately NOT expanded with attr(href):
       render_ps_references already prints every reference URL as visible
       text, so nothing is lost there, and the cross article links the
       Dynamic Linking Engine inserts would litter clinical prose with
       URLs nobody asked for. */
    a { color: #000; text-decoration: none; }
    .ps-dyn-link {
        color: #000;
        text-decoration: none;
    }
    .ps-ref-link {
        color: #333;
        text-decoration: none;
        font-size: 0.82rem;
    }

    /* ---- The checklist box keeps its label once the buttons are gone.
       The address the PDF actually lives at is printed by the provenance
       block at the foot of the page. ---- */
    .ps-art-checklist-box {
        display: block;
        padding: 12px 16px;
    }

    /* ---- Provenance ----
       A printout gets kept, photocopied and pinned up. It has to say
       which article it is, which version, and that it does not update. */
    .ps-print-source {
        display: block !important;
        margin-top: 18px;
        padding-top: 10px;
        border-top: 1px solid #9ca3af;
        font-size: 0.78rem;
        line-height: 1.55;
        color: #333;
    }
    .ps-print-source p { margin: 0 0 2px; }
    .ps-print-source strong { color: #000; }
}