/* Red Raine Labs - the downloadable pre-engagement checklist document.

   Loaded alongside /landing.css by public/pentest-prep-checklist.html, which is
   BOTH the on-screen document and the source Edge renders to
   /red-raine-labs-pentest-prep-checklist.pdf. One file, so the PDF and the web
   version can never drift apart.

   External rather than an inline <style> for the same reason as landing.css:
   style-src 'self' already covers it, so this page adds no sha256 hash to
   public/_headers.

   Layout is paged on purpose. Each .sheet is one printed page, sized so its
   footer lands at the bottom, rather than letting a web page reflow into
   whatever the print engine's paginator decides. Screen mirrors print: a stack
   of white sheets on grey, which is also what the landing-page preview shows.

   Print colour: the red bands are backgrounds, and browsers drop backgrounds
   when printing unless print-color-adjust: exact says otherwise. Without it the
   brand disappears from the PDF entirely. */

:root {
    /* 8.5x11 at 0.55in side margins and 0.5in/0.6in top/bottom. --sheet-h is
       the remaining content height, which is what pins each footer down. */
    --sheet-w: 8.5in;
    --sheet-pad: 0.62in;
    --sheet-h: 9.8in;
}

/* Screen chrome - the download bar above the sheets. Hidden in print, along
   with the nav and site footer, so none of it reaches the PDF. */
.doc-backdrop {
    background: var(--ghost-white);
    padding: 2.5rem 1.25rem 3.5rem;
}

.doc-actions {
    max-width: var(--sheet-w);
    margin: 0 auto 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
}

.doc-actions p {
    font-size: 0.92rem;
    color: var(--concrete-deep);
    margin-right: auto;
}

/* The document itself
   ------------------------------------------------------------------ */

.sheet {
    width: 100%;
    max-width: var(--sheet-w);
    margin: 0 auto 1.75rem;
    padding: var(--sheet-pad);
    background: #fff;
    border: 1px solid var(--border-soft);
    box-shadow: 0 18px 44px -22px rgba(18, 18, 18, 0.45);
    display: flex;
    flex-direction: column;
}

/* Pins the footer to the bottom of its sheet. */
.sheet > .sheet-foot {
    margin-top: auto;
}

/* Masthead - red band carrying the white logo. The logo SVG is white-only, so
   it needs a red or dark field behind it; this is that field. */
.doc-head {
    background: var(--red-raine);
    border-radius: var(--radius);
    padding: 1.25rem 1.6rem 1.4rem;
    color: #fff;
    margin-bottom: 1.3rem;
}

.doc-head img {
    height: 76px;
    width: auto;
    display: block;
    margin-bottom: 0.4rem;
}

.doc-kicker {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.doc-head h1 {
    font-size: 1.9rem;
    margin: 0.55rem 0 0.5rem;
    color: #fff;
}

.doc-head p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.92);
    max-width: 52ch;
}

.doc-intro p {
    font-size: 0.97rem;
    color: var(--gunmetal-zinc);
}

.doc-intro p + p {
    margin-top: 0.85rem;
}

.doc-intro strong {
    color: var(--midnight-carbon);
}

/* Contents list on the cover */
.toc {
    list-style: none;
    margin: 1.2rem 0 0;
    display: grid;
    gap: 0.45rem;
    counter-reset: toc;
}

.toc li {
    counter-increment: toc;
    position: relative;
    padding: 0.5rem 0.9rem 0.5rem 2.9rem;
    background: var(--studio-white);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--midnight-carbon);
}

.toc li::before {
    content: counter(toc);
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--red-raine);
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toc li span {
    display: block;
    font-weight: 400;
    font-size: 0.87rem;
    color: var(--concrete-deep);
    margin-top: 0.1rem;
}

/* Steps
   ------------------------------------------------------------------ */

.step {
    break-inside: avoid;
}

.step + .step {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-soft);
}

.step-head {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    margin-bottom: 0.55rem;
}

.step-num {
    flex: none;
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    background: var(--red-raine);
    border-radius: 999px;
    padding: 0.26rem 0.62rem;
}

.step-head h2 {
    font-size: 1.22rem;
}

.step-lead {
    font-size: 0.94rem;
    color: var(--concrete-deep);
    font-style: italic;
    margin-bottom: 0.8rem;
}

/* Tick lists. The box is a border, not a background, so it survives even where
   a printer or viewer strips backgrounds. */
.checks {
    list-style: none;
    display: grid;
    gap: 0.45rem;
}

.checks li {
    position: relative;
    padding-left: 1.85rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--gunmetal-zinc);
    break-inside: avoid;
}

.checks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.24em;
    width: 0.95rem;
    height: 0.95rem;
    border: 1.5px solid var(--gunmetal-zinc);
    border-radius: 3px;
    background: #fff;
}

.checks li strong {
    color: var(--midnight-carbon);
    font-weight: 600;
}

/* Write-in fields - this is where the reader's own plan lands */
.field {
    margin-top: 0.7rem;
    padding: 0.7rem 0.95rem 0.8rem;
    background: var(--studio-white);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--red-raine);
    border-radius: 0 10px 10px 0;
    break-inside: avoid;
}

.field-label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--midnight-carbon);
    margin-bottom: 0.6rem;
}

.rule {
    display: block;
    height: 1.1rem;
    border-bottom: 1px solid var(--concrete-steel);
}

.rule + .rule {
    margin-top: 0.45rem;
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.2rem;
}

.field-grid .field-label {
    margin-bottom: 0.45rem;
}

/* A label that follows a grid or a choice row inside the same .field needs the
   gap back - two labels in one field is how the denser pages stay on one page. */
.field-grid + .field-label,
.inline-choice + .field-label {
    margin-top: 0.85rem;
}

.inline-choice {
    font-size: 0.92rem;
    color: var(--gunmetal-zinc);
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
}

.inline-choice span {
    position: relative;
    padding-left: 1.55rem;
}

.inline-choice span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.16em;
    width: 0.9rem;
    height: 0.9rem;
    border: 1.5px solid var(--gunmetal-zinc);
    border-radius: 3px;
    background: #fff;
}

/* Go / no-go gate list
   ------------------------------------------------------------------ */

.gate {
    border: 2px solid var(--red-raine);
    border-radius: var(--radius);
    padding: 1.3rem 1.4rem 1.4rem;
    break-inside: avoid;
}

.gate h2 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
}

.gate > p {
    font-size: 0.92rem;
    color: var(--concrete-deep);
    margin-bottom: 1rem;
}

.gate .checks li {
    font-size: 0.93rem;
}

/* Closing call to action */
.doc-cta {
    margin-top: 1.5rem;
    background: var(--midnight-carbon);
    border-radius: var(--radius);
    padding: 1.5rem 1.6rem;
    color: #fff;
    break-inside: avoid;
}

.doc-cta h2 {
    font-size: 1.22rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.doc-cta p {
    font-size: 0.94rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 58ch;
}

.doc-url {
    display: inline-block;
    margin-top: 0.9rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 2px solid var(--red-raine);
    padding-bottom: 0.15rem;
}

.doc-cta a.doc-url:hover {
    color: #fff;
}

/* Per-page footer. Pinned to the bottom of its sheet by .sheet-foot's auto top
   margin, which is the closest thing to a running footer that print CSS gives
   without a pagination library. */
.sheet-foot {
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--concrete-deep);
}

.sheet-foot a {
    color: var(--red-raine);
}

.sheet-foot .pg {
    color: var(--midnight-carbon);
    font-weight: 700;
}

/* Narrow screens - the sheet stops pretending to be 8.5in wide */
@media (max-width: 760px) {
    :root { --sheet-pad: 1.35rem; }
    .doc-backdrop { padding: 1.5rem 0.9rem 2.5rem; }
    .doc-head { padding: 1.15rem 1.15rem 1.35rem; }
    .doc-head img { height: 64px; }
    .doc-head h1 { font-size: 1.6rem; }
    .field-grid { grid-template-columns: 1fr; }
}

/* Print / PDF
   ------------------------------------------------------------------ */

@page {
    size: letter;
    margin: 0.5in 0.55in 0.6in;
}

@media print {
    /* Keep the red bands and the white logo. Without this the masthead prints
       white-on-white and the document arrives unbranded. */
    *,
    *::before,
    *::after {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    :root { --sheet-pad: 0; }

    html,
    body {
        background: #fff;
    }

    /* landing.css makes <body> a flex column with min-height: 100vh so its
       footer sticks to the bottom of short pages. In print that 100vh is one
       page tall, and the flex container fragments rather than letting the
       sheets paginate on their own - which silently turned a 5-page document
       into 7. Back out both for print. */
    body {
        display: block;
        min-height: 0;
    }

    main {
        flex: none;
    }

    /* Nav, the download bar and the site footer are screen-only. */
    nav,
    .doc-actions,
    footer {
        display: none !important;
    }

    .doc-backdrop {
        background: #fff;
        padding: 0;
    }

    .sheet {
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        min-height: var(--sheet-h);
        break-after: page;
    }

    .sheet:last-of-type {
        break-after: auto;
    }

    a {
        color: var(--midnight-carbon);
        text-decoration: none;
    }

    .sheet-foot a {
        color: var(--red-raine);
    }
}