:root { --navy:#06354b; --blue:#4391ce; --pale-blue:#c8e7fa; --ink:#20252a; --muted:#6d7680; --line:#dbe0e4; --paper:#fff; --canvas:#f7f9fa; --selected:#eaf5fb; --font-display:Manrope,Inter,sans-serif; --font-body:Inter,Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:var(--font-body); font-size:14px; line-height:1.5; }
button,input { font:inherit; }
button { cursor:pointer; }
.skip-link { position:absolute; left:12px; top:-48px; z-index:4; padding:8px 12px; color:white; background:var(--navy); }
.skip-link:focus { top:12px; }
.masthead { position:sticky; top:0; z-index:10; min-height:46px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:0 22px; color:#fff; background:var(--navy); font-size:11px; font-weight:600; }
.wordmark { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.02em; }
.wordmark img { display:block; width:118px; height:auto; }
.wordmark span { padding-left:10px; border-left:1px solid rgba(255,255,255,.34); }
.masthead p { margin:0; }
.masthead-title { color:#fff; font-family:var(--font-display); font-size:12px; font-weight:700; }
.masthead-note { justify-self:end; color:rgba(255,255,255,.78); }
.library-shell { display:grid; width:100%; grid-template-columns:342px minmax(0,1fr); align-items:start; max-width:none; min-height:calc(100vh - 46px); margin:0; border-right:1px solid var(--line); border-left:1px solid var(--line); background:var(--paper); }
.library-nav { position:sticky; top:46px; align-self:start; height:calc(100vh - 46px); overflow-y:auto; padding:20px 14px 36px; border-right:1px solid var(--line); background:#f4f5f6; }
.eyebrow,.reader-kicker { margin:0 0 3px; color:var(--navy); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.library-heading { padding:0 7px 16px; }
h1,h2,h3,h4 { margin:0; font-family:var(--font-display); }
h1 { color:#39444e; font-size:23px; line-height:1.2; letter-spacing:-.04em; }
.search-field { display:flex; align-items:center; gap:8px; height:36px; padding:0 9px; border:1px solid #cfd6dc; background:white; }
.search-field input { min-width:0; width:100%; border:0; outline:0; background:transparent; font-size:12px; }
.search-field span { color:#4f5a63; font-size:20px; }
.search-status { min-height:18px; margin:7px 7px 0; color:var(--muted); font-size:11px; }
.resource-tree { margin-top:3px; border-top:1px solid var(--line); }
.category { border-bottom:1px solid var(--line); }
.category-toggle { display:flex; width:100%; align-items:center; justify-content:space-between; padding:11px 7px 9px; border:0; color:#38444e; background:transparent; font-size:13px; font-weight:700; text-align:left; }
.category-toggle span:last-child { font-size:18px; font-weight:400; }
.resource-list { display:none; padding-bottom:8px; }
.category.is-open .resource-list { display:block; }
.resource-list button { position:relative; display:block; width:100%; padding:6px 10px 6px 22px; border:0; color:#5d6871; background:transparent; font-size:12px; text-align:left; }
.resource-list button::before { position:absolute; left:8px; top:50%; width:8px; height:8px; border:1px solid #a8b1b7; border-radius:50%; content:""; transform:translateY(-50%); }
.resource-list button:hover { color:var(--navy); background:#f0f8fc; }
.resource-list button.is-selected { color:var(--navy); background:var(--selected); font-weight:700; }
.resource-list button.is-selected::before { border-color:var(--blue); background:var(--blue); box-shadow:0 0 0 2px #fff; }
.resource-list button[hidden],.category[hidden] { display:none; }
.library-loading { margin:18px 7px; color:var(--muted); font-size:12px; }
.role-entry { padding:0 0 2px; }
.role-button { font-weight:600; }
.role-button .role-count { float:right; min-width:15px; color:#89939b; font-size:10px; text-align:center; }
.role-documents { margin:1px 0 3px; }
.resource-list .document-button { padding-top:4px; padding-bottom:4px; padding-left:36px; color:#78828a; font-size:11px; }
.resource-list .document-button::before { left:22px; width:5px; height:5px; }
.resource-list .source-needed-button { color:#7b5b21; font-style:italic; }
.resource-list .source-needed-button::before { border-color:#c39737; }
.role-entry.is-active > .role-button { color:var(--navy); }
.reader { min-width:0; padding:0 clamp(34px, 4vw, 84px) 78px; background:var(--paper); }
.reader-toolbar { display:flex; min-height:51px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); color:#66717b; font-size:11px; font-weight:600; }
.reader-toolbar p { margin:0; }
.reader-toolbar span { padding:0 6px; color:#a1aab0; }
.reader-toolbar-actions { display:flex; align-items:center; gap:12px; }
.print-button { padding:7px 11px; border:1px solid #bfd6e4; color:var(--navy); background:#f7fcff; font-size:11px; font-weight:600; }
.print-button:hover { background:#eaf5fb; }
.print-button[hidden] { display:none; }
.reader-menu { display:none; border:0; color:var(--navy); background:transparent; font-size:20px; }
.reader-content { width:100%; max-width:none; margin:32px 0 0; }
.reader-content h2 { margin:4px 0 7px; color:#293640; font-size:32px; letter-spacing:-.045em; }
.document-format { margin:0 0 4px !important; color:#8a949b !important; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.reader-content section { margin-top:30px; }
.reader-content h3 { margin-bottom:9px; color:#3b4650; font-size:16px; }
.reader-content p { max-width:900px; margin:0; color:#4f5962; }
.reader-content ul { display:grid; gap:10px; margin:0; padding-left:22px; color:#4f5962; }
.reader-content li::marker { color:var(--blue); }
.checklist { display:grid; gap:12px; }
.checklist div { position:relative; padding:14px 16px 14px 34px; border:1px solid var(--line); background:#fbfcfc; }
.checklist div::before { position:absolute; top:18px; left:14px; width:10px; height:10px; border:1px solid #a8b1b7; content:""; }
.checklist h4 { margin-bottom:4px; color:#34414c; font-size:13px; }
.checklist p { font-size:13px; }
.empty-reader { display:flex; width:100%; min-height:calc(100vh - 150px); flex-direction:column; justify-content:center; margin-top:0; padding:clamp(32px, 5vw, 76px); border-left:4px solid var(--blue); background:#f7fcff; }
.empty-reader h2 { margin-top:4px; font-size:27px; }
.empty-reader p { margin-top:12px; }
.source-record { padding-top:19px; border-top:1px solid var(--line); }
.source-record dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; }
.source-record div { min-width:0; }
.source-record dt { margin-bottom:2px; color:#7e8991; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.source-record dd { margin:0; overflow-wrap:anywhere; color:#4f5962; font-size:12px; }
.related-documents { padding-top:4px; }
.related-documents div { display:flex; flex-wrap:wrap; gap:8px; }
.related-documents button { padding:7px 10px; border:1px solid #bfd6e4; color:var(--navy); background:#f7fcff; font-size:12px; }
.related-documents button:hover { background:#eaf5fb; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:760px) { .masthead { grid-template-columns:1fr auto; min-height:48px; padding:0 16px; } .masthead-title { display:none; } .wordmark img { width:102px; } .library-shell { display:block; min-height:calc(100vh - 48px); border:0; } .library-nav { position:static; height:auto; overflow:visible; padding:16px; border-right:0; border-bottom:1px solid var(--line); } .library-heading { padding-left:0; } .resource-tree { max-height:220px; overflow:auto; } .reader { padding:0 20px 48px; } .reader-toolbar { min-height:46px; } .reader-menu { display:block; } .reader-content { margin-top:28px; } .reader-content h2 { font-size:28px; } .empty-reader { min-height:360px; padding:32px 24px; } .source-record dl { display:grid; grid-template-columns:1fr; gap:8px; } }

/*
  Printing a document = downloading it as a PDF (index.html's Download PDF
  button just calls window.print()). Everything in this block is scoped to
  print media only, so the on-screen library is byte-for-byte what it was
  before this block existed.

  Page box: US Letter, 0.75in margins on all sides, matching
  --doc-margin-x/--doc-margin-y in
  src/components/resources/render/pageGeometry.css (the editor's document
  view uses the same 0.75in on the same 8.5in page - see that file's
  .resource-doc block). That is the ONE page-geometry constant this
  stylesheet duplicates rather than shares - there is no shared CSS file
  between public/resources/ (no bundler) and src/components/resources/
  (built through Vite) to hold it in common. Change one, change the other.
*/
@media print {
  @page {
    size: Letter;
    margin: 0.75in;
  }

  /* Reader chrome: masthead, sidebar/search/nav, breadcrumb toolbar
     (including the Download PDF button itself) and the skip link. None of
     it belongs on a page a volunteer prints to hand off or file - only the
     document body should print. */
  .skip-link,
  .masthead,
  .library-nav,
  .reader-toolbar {
    display: none !important;
  }

  /* .library-shell drops its screen-only `min-height: calc(100vh - 46px)`
     below, so the white box it and .reader paint is only as tall as the
     document's own content - on a document that ends above the page's
     bottom margin, the page's own canvas-tint body background would
     otherwise show through as a faint band below the content. Printing
     the body white avoids that without faking a full-page-height box. */
  body {
    background: #fff;
  }

  .library-shell {
    display: block;
    min-height: 0;
    border: 0;
  }

  .reader {
    padding: 0;
  }

  .reader-content {
    margin-top: 0;
  }

  /*
    Type scale, mirrored from src/components/resources/render/
    pageGeometry.css's .resource-doc block (the DOCUMENT/print values,
    not its [data-view='web'] override) - --doc-text/--doc-lead/--doc-h1/
    --doc-h2/--doc-h3/--doc-small. That file is the single source of
    geometry for the editor's document view; this is the print side of
    the same page, so a change to one of these values should prompt the
    same change over there.

    The public reader's markup does not carry pageGeometry.css's
    data-block attributes (no bundler here to share that CSS file
    directly), so the mapping is by role rather than by selector:
      --doc-text / --doc-lead -> base reading size for the document body
      --doc-h1 (26pt)         -> the document's own title (.reader-title,
                                  app.js's <h2 class="reader-title">) and
                                  a Wins & Guidelines role heading
                                  (blocks.js's renderWinsGuidelines <h1>)
      --doc-h2 (15pt)         -> in-document section headings (a Training
                                  Guide level-2 heading; Wins & Guidelines'
                                  "The Win"/"Guidelines"/"Checklist")
      --doc-h3 (12pt)         -> a Training Guide level-3 heading, and this
                                  page's own "Source record"/"Related
                                  documents" headings
      --doc-small (9pt)       -> the small uppercase running text
                                  (.reader-kicker, .document-format)
  */
  .reader-content {
    font-size: 11pt;
    line-height: 1.5;
  }

  .reader-content h1 {
    font-size: 26pt;
  }

  .reader-content h2 {
    font-size: 15pt;
  }

  .reader-content h2.reader-title {
    font-size: 26pt;
  }

  .reader-content h3 {
    font-size: 12pt;
  }

  .reader-kicker,
  .document-format,
  .source-record dt,
  .source-record dd {
    font-size: 9pt;
  }

  /*
    A genuine discovery from generating a real PDF (Safety Team Checklist,
    which came out 3 pages) rather than the CSS-application approximation
    this file's earlier comments admit couldn't have caught round 1's bug
    either: Chrome evaluates width-based media queries against the
    PRINTED PAGE's content width, not the screen's. Letter minus 0.75in
    margins on each side leaves about 7in (~672 CSS px) of content width,
    which is BELOW this file's existing `@media (max-width:760px)`
    breakpoint - so that breakpoint's `.source-record dl
    { grid-template-columns: 1fr }` is simultaneously active during
    print, stacking Source filename / Library status / Record ID onto
    three separate lines instead of one three-column row. On Safety Team
    Checklist that stacking pushed "Record ID" alone onto a third page,
    dragging the "Related documents" heading below it (empty in print -
    see .related-documents button, further down) and leaving most of
    that page blank. Restoring the three-column layout here removes both
    the wasted vertical space and the page-3 spillover it caused.
  */
  .source-record dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /*
    Fix for a real defect found by generating an actual PDF (headless
    Chrome --print-to-pdf) and looking at it - a CSS-media-emulation
    check could not have caught this, since the bug is about where
    Chrome's print pagination puts a page break, not about which rules
    apply. The original blanket `break-inside: avoid` on <section>
    (Task 3, round 1) meant a section longer than the space left on a
    page could not break at all, so it jumped wholesale to the next
    page and left the remainder of the current one blank - one wasted
    page per long section on a multi-section document.

    `break-inside: avoid` is right for something that is meaningless
    split apart - a table row, a figure with its caption - and wrong
    for a long prose section, which should flow across the page
    boundary like any other paragraph. So: keep it only on the
    genuinely atomic pieces (a table, its rows, an image and its
    caption); let sections and list items break freely; and instead of
    forbidding the break, control what it looks like via break-after
    (below, on headings) and orphans/widows (below, on running text).
  */
  .reader-content table,
  .reader-content tr,
  .reader-content img,
  .reader-content figure {
    break-inside: avoid;
  }

  /* A heading must never end up alone at the bottom of a page,
     separated from the paragraph it introduces. */
  .reader-content h1,
  .reader-content h2,
  .reader-content h3 {
    break-after: avoid;
  }

  /* With section/li now free to break (above), a single line of a
     paragraph or list item could otherwise strand by itself at a page
     boundary. orphans/widows keep at least 3 lines together on either
     side of a break. */
  .reader-content p,
  .reader-content li {
    orphans: 3;
    widows: 3;
  }

  /* The whole section, not just its buttons - found by generating a real
     PDF (Safety Team Checklist) and looking at it: hiding only the
     buttons (the original version of this rule) left an empty "Related
     documents" heading behind. Once that heading no longer fit at the
     bottom of an otherwise-full page, it printed alone at the top of a
     third page that was blank everywhere else. A heading over nothing is
     worse than no heading, and a visitor can't click a printed button
     regardless (matches printButton.hidden in app.js's
     renderSourceNeeded/showLoadError), so the section never reaches the
     page at all. */
  .related-documents {
    display: none;
  }
}