/* =============================================================================
   COPY -- do not edit here.

   Master: ~/code/aspendora-branding/templates/welcome-packet.css
   Theme:  css/themes/3e.css (master: aspendora-branding/templates/themes/3e.css)
   Contract and design notes: ~/code/aspendora-branding/docs/welcome-packet.md

   This replaced ~440 lines of .pk-* rules that used to live in app.css. Those
   rules and this file were the same design maintained in two places; a fix to
   the print rules in one never reached the other. Re-copy from the master
   after any change there, and put 3E-specific values in the theme, never here.
   ============================================================================= */

/* =============================================================================
   Aspendora Technologies — new-hire welcome packet
   A two-sided US Letter sheet: credential card on the front, getting-started
   guide on the back. Handed to a new employee on their first day.

   Consumers: CIPP (cloud-only tenants), per-client admin apps (hybrid), and
   any HTML -> PDF pipeline. See docs/welcome-packet.md for the data contract.

   THEMING — every colour and typeface in this file comes from a --pk-* custom
   property declared on .packet-preview. The defaults below are Aspendora. A
   host that needs the sheet in a client's own brand adds a class alongside
   .packet-preview and re-points the variables; it does not fork the rules.
   3E NDT's packet works exactly this way — see themes/3e.css. Never hard-code
   a colour into a rule below: that is the one change that forces every
   consumer to fork.

   COLOR SYSTEM — the Aspendora default uses the *interface* palette (navy and
   blue on slate), not the identity crimson and not the burgundy of
   document.css. Two reasons: the identity gradient is logo-only (brand rule 1),
   and the sheet's job is to walk someone into the same blue Microsoft/portal UI
   they are about to sign in to. A red-accented "here is your password" page
   reads as an alarm. document.css stays burgundy for proposals and reports.

   TYPE — Plus Jakarta Sans throughout, per the brand. Titles are 800 weight at
   -0.02em, the same treatment as web headlines. Every --asp-* reference carries
   a literal fallback, so this file also works standalone without tokens.css.

   SIZING — the sheet is laid out at its true physical size (8.5in x 11in, with
   the margins baked in as padding), so the on-screen preview and the printed
   page are the same object rather than an approximation. @page therefore takes
   a zero margin.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* Scoped reset. The sheet is sized in absolute inches with the page margins
   carried as padding, so a content-box .packet-page renders 1.6in wider than
   the paper and the right-hand edge is clipped off the print. Do not rely on
   the host application's global reset — this file has to be correct on its
   own, including in a bare HTML -> PDF pipeline. */
.packet-preview,
.packet-preview *,
.packet-preview *::before,
.packet-preview *::after {
    box-sizing: border-box;
}

/* ---- The theme contract. Override these, not the rules. ------------------ */
.packet-preview {
    /* Type */
    --pk-font: var(--asp-font, "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --pk-heading-font: var(--pk-font);
    --pk-heading-weight: 800;
    --pk-heading-tracking: -0.02em;
    --pk-heading-leading: 1.05;
    /* Step headings on page 2 are set smaller, so they take less negative
       tracking than the display titles. Its own variable rather than reusing
       --pk-heading-tracking: a pixel diff caught them drifting when they shared
       one. */
    --pk-subheading-tracking: -0.01em;
    /* The small uppercase labels (eyebrow, card head, password label, sign-in
       label). Tracking and weight move together per brand, and the sign-in row
       is a flex layout, so a label that tracks differently shifts the URL
       beside it. */
    --pk-label-tracking: 0.18em;
    --pk-label-weight: 700;
    --pk-mono: Consolas, "SF Mono", Menlo, "Courier New", monospace;

    /* Accent — the head rule, step bullets, borders, callout labels */
    --pk-accent: var(--asp-blue, #2563eb);
    --pk-accent-dark: var(--asp-action-hover, #1d4ed8);
    --pk-accent-light: var(--asp-blue-light, #60a5fa);
    --pk-rule: var(--asp-grad-cta, linear-gradient(90deg, #2563eb 0%, #1d4ed8 50%, #2563eb 100%));
    --pk-eyebrow: var(--asp-action, #2563eb);
    --pk-marker: var(--asp-action, #2563eb);

    /* Grounds */
    --pk-ink: var(--asp-navy-hero, #0f172a);
    --pk-wash: #eff6ff;
    --pk-surface: var(--asp-slate-100, #f1f5f9);
    --pk-badge-bg: var(--asp-navy-hero, #0f172a);

    /* Text */
    --pk-text: var(--asp-text, #0f1729);
    --pk-body: var(--asp-slate-700, #334155);
    --pk-muted: var(--asp-text-muted, #475569);
    /* The lede sits between body and muted, and the two brands land on
       different sides of that line. */
    --pk-lede-color: var(--pk-muted);
    --pk-border: var(--asp-border, #e2e8f0);

    /* Shape */
    --pk-radius: var(--asp-r-sm, 8px);

    background: var(--asp-slate-200, #e2e8f0);
    padding: 1.5rem;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.packet {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.packet-page {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 8.5in;
    min-height: 11in;
    padding: 0.6in 0.8in;
    background: #ffffff;
    color: var(--pk-text);
    font-family: var(--pk-font);
    font-size: 11.5pt;
    line-height: 1.5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* Full-bleed accent rule across the head of every sheet. */
.pk-rule {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.16in;
    background: var(--pk-rule);
}

.pk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.18in;
    border-bottom: 1px solid var(--pk-border);
}

/* Sized by height so any lockup aspect ratio drops in cleanly. Prefer an SVG
   master — this sheet gets printed, and raster lockups soften at 0.55in. */
.pk-logo {
    height: 0.55in;
    width: auto;
}

/* Fallback when a client has no logo on file: the company name set as a
   wordmark. Never rebuild the Aspendora lockup from live type — this is only
   ever used for a client's own name. */
.pk-wordmark {
    font-size: 15pt;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pk-ink);
}

.pk-eyebrow {
    font-size: 9pt;
    font-weight: var(--pk-label-weight);
    letter-spacing: var(--pk-label-tracking);
    text-transform: uppercase;
    color: var(--pk-eyebrow);
}

.pk-title {
    font-family: var(--pk-heading-font);
    font-size: 30pt;
    font-weight: var(--pk-heading-weight);
    letter-spacing: var(--pk-heading-tracking);
    line-height: var(--pk-heading-leading);
    color: var(--pk-ink);
    margin: 0.32in 0 0.1in;
}

.pk-title-sm {
    font-size: 25pt;
}

.pk-lede {
    font-size: 12pt;
    line-height: 1.55;
    color: var(--pk-lede-color);
    margin: 0 0 0.28in;
    max-width: 5.9in;
}

/* --- Account details card --- */

.pk-card {
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius);
    overflow: hidden;
    margin-bottom: 0.26in;
}

.pk-card-head {
    background: var(--pk-ink);
    color: #ffffff;
    font-size: 9pt;
    font-weight: var(--pk-label-weight);
    letter-spacing: var(--pk-label-tracking);
    text-transform: uppercase;
    padding: 0.09in 0.18in;
}

.pk-details {
    display: grid;
    grid-template-columns: 1.5in 1fr;
    gap: 0;
    margin: 0;
    padding: 0.06in 0.18in 0.12in;
}

.pk-details dt {
    font-size: 10pt;
    color: var(--pk-muted);
    padding: 0.06in 0 0.02in;
}

.pk-details dd {
    margin: 0;
    padding: 0.06in 0 0.02in;
    font-size: 11.5pt;
    font-weight: 600;
    color: var(--pk-ink);
    word-break: break-word;
}

/* --- The password itself --- */

.pk-password {
    border: 2px solid var(--pk-accent);
    border-radius: var(--pk-radius);
    background: var(--pk-wash);
    padding: 0.2in 0.22in;
    text-align: center;
    margin-bottom: 0.24in;
}

.pk-password-label {
    font-size: 9pt;
    font-weight: var(--pk-label-weight);
    letter-spacing: var(--pk-label-tracking);
    text-transform: uppercase;
    color: var(--pk-accent-dark);
}

.pk-password-value {
    font-family: var(--pk-mono);
    font-size: 21pt;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--pk-ink);
    margin: 0.09in 0 0.07in;
    /* Prefer the hyphens as break points — a mid-word break reads as though
       the password contains a space or a line-ending character. */
    overflow-wrap: anywhere;
}

.pk-password-hint {
    font-size: 9.5pt;
    line-height: 1.45;
    color: var(--pk-body);
    max-width: 4.6in;
    margin: 0 auto;
}

/* --- Notices --- */

.pk-notice {
    border-left: 4px solid var(--pk-accent);
    background: var(--pk-surface);
    padding: 0.13in 0.18in;
    font-size: 10pt;
    line-height: 1.5;
    color: var(--pk-body);
    margin-bottom: 0.24in;
}

.pk-notice strong {
    color: var(--pk-ink);
}

.pk-notice-quiet {
    border-left-color: var(--pk-ink);
    margin-top: 0.1in;
}

/* --- Sign-in callout --- */

.pk-signin {
    display: flex;
    align-items: baseline;
    gap: 0.14in;
    padding: 0.14in 0.18in;
    background: var(--pk-ink);
    border-radius: var(--pk-radius);
    color: #ffffff;
}

.pk-signin-label {
    font-size: 9pt;
    letter-spacing: var(--pk-label-tracking);
    text-transform: uppercase;
    color: var(--pk-accent-light);
}

.pk-signin-url {
    font-size: 16pt;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* --- Numbered steps (page 2) --- */

.pk-steps {
    list-style: none;
    counter-reset: pk-step;
    margin: 0 0 0.2in;
    padding: 0;
}

.pk-steps > li {
    counter-increment: pk-step;
    position: relative;
    padding-left: 0.52in;
    margin-bottom: 0.19in;
}

.pk-steps > li::before {
    content: counter(pk-step);
    position: absolute;
    left: 0;
    top: 0.01in;
    width: 0.34in;
    height: 0.34in;
    border-radius: 50%;
    background: var(--pk-accent);
    color: #ffffff;
    font-size: 13pt;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pk-steps h2 {
    font-family: var(--pk-heading-font);
    font-size: 14pt;
    font-weight: var(--pk-heading-weight);
    letter-spacing: var(--pk-subheading-tracking);
    color: var(--pk-ink);
    margin: 0 0 0.04in;
}

.pk-steps p {
    margin: 0;
    font-size: 10.5pt;
    line-height: 1.5;
    color: var(--pk-body);
}

/* Emphasis badge. The Aspendora theme makes this navy rather than red: in this
   brand red means risk, and "required" here is emphasis on a routine step. A
   client theme is free to disagree. */
.pk-req {
    display: inline-block;
    vertical-align: 2px;
    margin-left: 0.08in;
    padding: 0.02in 0.09in;
    border-radius: var(--asp-r-pill, 9999px);
    background: var(--pk-badge-bg);
    color: #ffffff;
    font-family: var(--pk-font);
    font-size: 7.5pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pk-substeps {
    margin: 0.07in 0 0;
    padding-left: 0.2in;
    font-size: 10.5pt;
    line-height: 1.55;
    color: var(--pk-body);
}

.pk-substeps li::marker {
    color: var(--pk-marker);
}

.pk-apps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.07in 0.16in;
    margin-top: 0.09in;
}

.pk-apps > div {
    border-left: 3px solid var(--pk-accent-light);
    padding-left: 0.11in;
    font-size: 10pt;
    line-height: 1.35;
}

.pk-apps strong {
    display: block;
    color: var(--pk-ink);
}

.pk-apps span {
    color: var(--pk-muted);
}

/* The guide page carries five steps plus a closing notice, which is more
   content than the credential sheet. Tighten its vertical rhythm so the whole
   guide — footer included — stays on one sheet. */

.pk-guide .pk-title {
    font-size: 21pt;
    margin-top: 0.14in;
    margin-bottom: 0.07in;
}

.pk-guide .pk-lede {
    font-size: 11pt;
    margin-bottom: 0.09in;
}

.pk-guide .pk-steps {
    margin-bottom: 0.06in;
}

/* Step 3 (Authenticator) carries five sub-steps, which is what sets the height
   of this page. These margins are the slack that keeps the guide on one sheet;
   if you add content, re-print and count pages before assuming it still fits. */
.pk-guide .pk-steps > li {
    margin-bottom: 0.075in;
}

.pk-guide .pk-substeps {
    margin-top: 0.05in;
}

.pk-guide .pk-steps p,
.pk-guide .pk-substeps,
.pk-guide .pk-apps > div {
    line-height: 1.42;
}

.pk-guide .pk-notice-quiet {
    margin-top: 0.04in;
    margin-bottom: 0.08in;
    padding: 0.1in 0.16in;
}

/* --- Footer, pinned to the foot of the sheet --- */

.pk-foot {
    margin-top: auto;
    padding-top: 0.14in;
    border-top: 1px solid var(--pk-border);
    display: flex;
    justify-content: space-between;
    gap: 0.2in;
    font-size: 8.5pt;
    color: var(--pk-muted);
}

/* =============================================================================
   Print rules
   ============================================================================= */

@media print {
    @page {
        size: letter;
        /* Margins live in .packet-page padding so preview == printout. */
        margin: 0;
    }

    /* Clamp the document to the paper.

       A host that hides its app shell with `visibility: hidden` (the usual
       trick, because it does not disturb the packet's own layout) leaves the
       shell OCCUPYING ITS FULL WIDTH — visibility hides pixels, not boxes. The
       printed document is then as wide as the application, Chrome scales the
       whole page down to make it fit, and the sheet arrives shrunk with a band
       of dead paper at the foot. The scale factor is whatever the operator's
       window happened to be, so the same packet prints differently every time.

       Observed in the wild before this rule existed: a sheet scaled to 0.90,
       with 1.76in of blank paper below the footer instead of 0.74in.

       Clamping here rather than in the host because every consumer with a
       sidebar hits it, and a narrow test fixture will not reveal it. */
    html, body {
        background: #ffffff;
        margin: 0;
        padding: 0;
        width: 8.5in !important;
        max-width: 8.5in !important;
        overflow: hidden !important;
    }

    /* Hide every on-screen-only control. Host applications should add their
       own shell selectors (header, nav, overlays) to this list. */
    .no-print {
        display: none !important;
    }

    .packet-preview {
        display: block;
        background: none;
        padding: 0;
        overflow: visible;
    }

    .packet {
        display: block;
        gap: 0;
    }

    .packet-page {
        width: 100%;
        /* Just under 11in: an element exactly as tall as the page box can
           round up and emit a trailing blank sheet. */
        min-height: 10.9in;
        margin: 0;
        box-shadow: none;
    }

    /* Break *before* each subsequent sheet rather than after every sheet —
       break-after on the last page is what produces a stray blank page. */
    .packet-page + .packet-page {
        break-before: page;
        page-break-before: always;
    }

    /* Browsers drop background colours when printing unless told otherwise;
       this packet is meant to be printed in colour. */
    .packet-page,
    .packet-page * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Keep a step and its heading together across a break. */
    .pk-steps > li,
    .pk-password,
    .pk-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}