/* =====================================================================
   Careeris — shared print stylesheet
   Loaded by the three reflection tools:
     index-careeris.html      (aspiring)
     careeris-practising.html (practising)
     careeris-health-check.html

   WHY A SHARED FILE. The three tools are separate single-file pages, but
   their report furniture is one design system — .result-section, .r-eyebrow,
   .r-title, .r-prose, .band-*, .card, .metric — copied verbatim between them.
   Print rules written three times drift three ways. This is the same move
   lead-capture.js already makes for the gate.

   WHAT WAS WRONG BEFORE. None of the three had an @page rule, so printing
   used the browser default: Letter-ish margins, screen background, and
   headings sized off the viewport through clamp(..vw..). Worse, all three
   put `page-break-inside: avoid` on .result-section — the wrong unit. A
   section taller than a page cannot be kept together, so the browser pushes
   it to a fresh page and it overflows anyway, leaving the previous page half
   empty. The fix is the opposite of what looks obvious: let the big
   containers break, and forbid breaks only inside the small atoms, gluing
   every heading to the text underneath it.

   RULE OF THUMB USED THROUGHOUT.
     * big containers (a section, a band, a list)  -> breakable
     * small atoms (a card, a metric, a step, a li) -> break-inside: avoid
     * every label/heading                          -> break-after: avoid
   ===================================================================== */

/* Screen: the print-only furniture stays out of the way. Deliberately
   OUTSIDE @media print — it has to be hidden on screen too. */
.print-only { display: none; }

@media print {

  /* ---------- 1. THE PAGE ----------
     A4 with margins a printer will not clip. The first page gets a little
     more room at the head because the report opens with its own title
     block rather than a running header. */
  @page { size: A4; margin: 18mm 16mm 18mm; }

  html, body {
    background: #fff !important;
    /* The screen sets min-height:100vh, which in print means "at least one
       full page" and can push a blank sheet out at the end. */
    min-height: 0 !important;
  }

  body {
    font-size: 10.5pt;
    line-height: 1.55;
    color: #1f1d1a;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The screen container is centred with generous air. On paper the @page
     margin is the air, so the padding would only cost usable width. */
  .container,
  .container--wide,
  .lead-wrap {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ---------- 2. STOP THE CHOREOGRAPHY ----------
     The reports reveal themselves with staggered `reveal`/`infoIn`
     animations. Print snapshots whatever the page looks like, so an
     un-finished animation prints faded or, at opacity 0, blank. Each tool
     only ever reset .result-section; anything with its own animation could
     still print as a ghost. Belt and braces: reset everything. */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .result-section,
  .band, .band-card, .card, .insight, .insight-part,
  .path, .metric, .contradiction, .step, .cell, .chip,
  .env-hero, .stage-hero, .careeris-card, .confidence, .r-note {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ---------- 3. WHAT DOES NOT BELONG ON PAPER ----------
     Controls, the "Start again" footer, the brand mark (the report carries
     its own title block), and the lead-capture banner — which is
     position:fixed and would otherwise print stamped across the first page. */
  .btn,
  .btn-row,
  .result-footer,
  .brand,
  .q-nav,
  .saved-note,
  .rate-choices,
  #careeris-lead-status,
  .lead-form,
  .lead-note,
  [hidden] {
    display: none !important;
  }

  /* Links print as text. Nobody wants a URL in brackets after every phrase,
     and the accent colour goes muddy on a mono printer. */
  a, a:visited {
    color: inherit !important;
    text-decoration: none !important;
  }

  /* ---------- 4. TYPE, IN POINTS ----------
     Every display size on screen is clamp(px, vw, px). In print the viewport
     is the paper, so those resolve to whatever the print viewport happens to
     be — which is how a 42px heading lands at 112px on an A4 sheet. Pin them. */
  .r-title           { font-size: 19pt; line-height: 1.2; margin-bottom: 10pt; }
  .band-line         { font-size: 15pt; line-height: 1.3; }
  .card-name         { font-size: 14pt; }
  .env-hero-name,
  .stage-hero-name   { font-size: 20pt; line-height: 1.15; margin: 3pt 0 8pt; }
  .part-title        { font-size: 20pt; line-height: 1.15; }
  .hero-number       { font-size: 40pt; line-height: 1; margin: 6pt 0 4pt; }
  .hero-unit         { font-size: 13pt; margin-bottom: 10pt; }
  .roi-number        { font-size: 24pt; line-height: 1; }
  .roi-saved-number  { font-size: 20pt; line-height: 1; }
  .metric-band       { font-size: 13pt; margin-bottom: 6pt; }
  .band-name         { font-size: 13pt; }
  .confidence-band   { font-size: 12pt; }

  .r-prose, .hero-sub, .band-body, .card-prose,
  .insight-text, .metric-desc, .stage-hero-prose, .env-hero-sub {
    font-size: 10.5pt;
    line-height: 1.55;
  }
  .r-eyebrow, .band-label, .card-kicker, .mini-label,
  .insight-label, .band-cell-label, .part-label, .metric-label,
  .roi-eyebrow, .path-eyebrow, .contradiction-label, .distinction-label {
    font-size: 7.5pt;
    margin-bottom: 5pt;
  }
  .r-note, .roi-caveat, .band-gloss, .scale-item, .pattern-note {
    font-size: 9pt;
  }

  /* ---------- 5. BREAKS ----------
     The class names below are the ones the three reports actually render,
     taken from a real Chrome run rather than from the stylesheets — several
     of the obvious-looking ones (.card, .metric, .insight) are never emitted.

     5a. The containers. Let them flow. `avoid` here is what produced the
     half-empty pages. */
  .result-section {
    break-inside: auto;
    page-break-inside: auto;
    margin-bottom: 20pt;
  }
  .cells, .contradictions, .paths, .steps, .ways, .shifts, .themes,
  .structures, .devs, .evomap, .band, .band-body, .r-bullets, .r-prose {
    break-inside: auto;
    page-break-inside: auto;
  }

  /* Saying `break-inside: auto` is not enough for the stacked lists. They are
     flex columns, and Chrome will not fragment a flex container: it keeps the
     whole stack together, and because the heading above is glued to it, the
     heading goes too. That is what left a page 58% empty — three little cards
     that would not split dragged their title onto the next sheet with them.

     A vertical flex column and a block stack lay out identically here, so in
     print they become blocks, with the flex `gap` restated as a margin. The
     children stay flex where they need to be (a .step is an icon beside its
     text); it is only the containers that change. */
  .steps, .themes, .devs, .contradictions, .shifts, .ways {
    display: block !important;
  }
  .steps > * + *, .themes > * + *, .devs > * + *,
  .contradictions > * + * { margin-top: 8pt !important; }

  /* 5b. The atoms. Small enough to always fit a page once the type is in
     points, so keeping them whole is a promise the layout can keep. */
  .band-card, .cell, .contradiction, .way, .advantage, .path, .difference,
  .step, .confidence, .closing-q, .r-note, .distinction, .shift,
  .pattern, .evocol, .shiftrow, .theme, .structure, .dev,
  .band-head, .band-cell li, .r-bullets li, .path ul li, .part-divider {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 5c. Never strand a heading at the foot of a page. This is the single
     rule that does most of the work: a label alone at the bottom with its
     paragraph overleaf is the thing that reads as broken.

     ONLY BLOCK-LEVEL HEADINGS BELONG HERE. `break-after: avoid` on a FLEX
     ITEM is read by Chrome as a restriction on the whole flex container, and
     the container then refuses to fragment at all — so one decorative numeral
     inside a card made an entire stack of cards monolithic, and a stack that
     could not be split had to move to the next sheet whole. That is what left
     pages 60% empty. The numerals beside a step or a theme (.step-num,
     .theme-num) and the parts of a band header (.band-name, .band-count) are
     flex items, never headings, and are deliberately NOT listed. Measured:
     removing those two alone took the practising report from three badly
     short pages to none. */
  .r-eyebrow, .r-title, .greeting,
  .band-label, .band-line, .band-head, .band-cell-label,
  .part-label, .part-title, .mini-label,
  .cell-name, .cell-verdict,
  .contradiction-head, .contradiction-label,
  .way-label, .advantage-label,
  .path-eyebrow, .path-title,
  .step-title,
  .pattern-kicker, .pattern-title,
  .evocol-tier, .evocol-name,
  .theme-name,
  .structure-label, .structure-head,
  .dev-label, .dev-name,
  .distinction-label, .confidence-band,
  .env-hero-name, .stage-hero-name,
  .print-head-title {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* 5d. Widows and orphans. A single trailing line on a fresh page is the
     other half of "improper breaks". */
  p, li, .r-prose, .band-body, .cell-desc, .contradiction-narrative,
  .contradiction-bridge, .step-body, .pattern-body, .theme-narr, .theme-why,
  .structure-body, .dev-body, .part-text, .confidence-text, .advantage-note {
    orphans: 3;
    widows: 3;
  }

  /* ---------- 6. SOLID INK BLOCKS GO LIGHT ----------
     .env-hero, .stage-hero, .careeris-card and .advantage are solid --ink
     (#1f1d1a) with pale text. Printed as-is each is a full-bleed black
     rectangle: it drinks ink, shows every roller mark, and on a printer set
     to drop backgrounds the pale text vanishes onto white. Restated as
     bordered blocks in the same hierarchy. The health check already did this
     for .env-hero; it is now the rule for all three tools. */
  .env-hero, .stage-hero, .careeris-card, .advantage {
    background: #fff !important;
    color: #1f1d1a !important;
    border: 1px solid #e8e0cf !important;
    border-left: 3pt solid #8b6f47 !important;
    border-radius: 0 !important;
    padding: 12pt 14pt !important;
    box-shadow: none !important;
  }
  .env-hero .r-eyebrow,
  .stage-hero .r-eyebrow,
  .careeris-card .r-eyebrow,
  .advantage-label        { color: #8b6f47 !important; }
  .careeris-card .r-title { color: #1f1d1a !important; }
  .advantage-figure       { color: #1f1d1a !important; }
  .env-hero-sub,
  .stage-hero-prose,
  .advantage-note,
  .careeris-card .r-prose { color: #6d685f !important; }
  .careeris-card .r-prose em { color: #5e4a2f !important; }
  .cta-meta { color: #6d685f !important; }

  /* ---------- 7. THE HEALTH CHECK BANDS ----------
     The four bands are a pale tint plus a coloured ink. print-color-adjust
     keeps the tint, but a mono printer still flattens all four to the same
     near-white — and the band IS the finding. A rule in the band's own ink
     gives a second, greyscale-safe cue, since four inks render as four
     distinct greys even when the tints do not. */
  .band {
    border-radius: 0;
    margin-top: 12pt;
  }
  .band + .band { margin-top: 12pt; }
  .band-head { padding: 9pt 12pt; }
  .band-cell { padding: 9pt 12pt; }
  .band--4 { border-left: 3pt solid #3e6c54; }
  .band--3 { border-left: 3pt solid #4a6f8c; }
  .band--2 { border-left: 3pt solid #866926; }
  .band--1 { border-left: 3pt solid #9c4a40; }

  /* Three columns of bullets survive A4 at this size — it is the shape of
     the report people recognise from the live tool — but the gutters have to
     come in to keep the lines from turning into two-word ribbons. */
  .band-body { grid-template-columns: repeat(3, 1fr) !important; }
  .band-cell li { font-size: 9.5pt; line-height: 1.4; margin-bottom: 4pt; }

  /* ---------- 8. CONTAINERS THAT PAINT THEMSELVES ----------
     .cells draws its dividing lines by showing a tan background through a
     1px grid gap, and .ways / .shifts clip their rounded corners with
     overflow:hidden. Both tricks work on a continuous screen and both break
     on paper: when the container splits across a page, the unused remainder
     of the sheet paints as a solid tan rectangle, and overflow:hidden can
     clip whatever lands past the page edge. Give the children real borders
     and take the paint off the parent. */
  .cells {
    background: transparent !important;
    gap: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .cell {
    border: 1px solid #e8e0cf !important;
    margin: -0.5pt 0 0 -0.5pt;   /* collapse the doubled shared edges */
  }
  .ways, .shifts {
    overflow: visible !important;
    border-radius: 0 !important;
  }

  /* Screen grids use auto-fit with a px minimum, which on paper can collapse
     to one very wide column. Fix the track counts to what A4 holds. */
  .cells      { grid-template-columns: repeat(2, 1fr) !important; }
  .paths      { grid-template-columns: repeat(2, 1fr) !important; }
  .structures { grid-template-columns: repeat(2, 1fr) !important; }
  .evomap     { grid-template-columns: repeat(3, 1fr) !important; }

  /* Screen cards lean on soft shadows and big radii for separation; paper
     has neither, so the border does the work. */
  .band-card, .cell, .contradiction, .path, .step, .confidence, .r-note,
  .difference, .distinction, .shift, .pattern, .evocol, .theme,
  .structure, .dev, .ways, .shifts, .band {
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .band-card, .contradiction, .path, .step, .pattern, .evocol,
  .theme, .structure, .dev, .cell { padding: 10pt 12pt !important; }
  .way, .shiftrow { padding: 8pt 12pt !important; }

  /* ---------- 9. THE PRINT TITLE BLOCK ----------
     These reports get carried into a conversation with a manager or a
     mentor, so a loose sheet has to say what it is, whose it is and when it
     was taken. Rendered into the results by each tool, hidden on screen. */
  .print-only { display: block; }

  .print-head {
    border-bottom: 1.5pt solid #8b6f47;
    padding-bottom: 8pt;
    margin-bottom: 18pt;
    break-after: avoid;
    page-break-after: avoid;
  }
  .print-head-brand {
    font-size: 7.5pt;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #8b6f47;
    font-weight: 600;
    margin-bottom: 2pt;
  }
  /* The framework the reading comes from, marked. Sits under the brand as a
     descriptor, so it reads as an attribution and not as a second title. */
  .print-head-framework {
    font-size: 7pt;
    letter-spacing: 0.06em;
    color: #6d685f;
    margin-bottom: 5pt;
  }
  .print-head-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 17pt;
    line-height: 1.15;
    font-weight: 600;
    color: #1f1d1a;
    margin-bottom: 4pt;
  }
  .print-head-meta {
    font-size: 8.5pt;
    color: #6d685f;
  }

  /* ---------- 10. LAST PAGE ----------
     The screen pads the bottom of the container by 96px so the footer is not
     flush with the viewport. On paper that trailing space is what tips a
     report onto a blank final sheet. */
  .result-section:last-of-type { margin-bottom: 0; }
}