/* ==========================================================================
   Print view (Ctrl+P): the "Light brand" look Ben approved 2026-10-08.

   Mirrors the Download PDF (src/lib/print): white page, Letter, 0.6in side
   margins, logo and page address on top, navy titles, thin teal rules, a pale
   tint only on table heads, no boxes inside boxes.

   WHY EVERY RULE SITS IN `@layer base` WITH !important
   Tailwind v4 utilities live in a cascade layer. For !important declarations
   the layer order flips: an earlier layer beats a later one, and any layered
   rule beats an unlayered one. So an !important rule in `base` beats an
   `!pl-8` utility (layer `utilities`) and anything unlayered, which an
   injected or unlayered rule cannot. Do not move these rules out of the layer.

   Pages that carry `[data-print='results']` (the tools) keep the older
   tool-results print block in globals.css; every rule here is gated off them.

   What drops is marked with `data-print-hide` in the components, never found
   by matching text. Tab panels all print; a panel without a heading of its own
   gets its tab label as one (`.print-panel-heading`).
   ========================================================================== */

@media print {
  @page {
    size: letter;
    margin: 0.6in 0.6in 0.7in;
  }
}

@layer base {
  @media print {
    /* The page, every page type (tool results keep their own block). */
    body:not(:has([data-print='results'])) {
      background: #fff !important;
      color: #111 !important;
      font-size: 10.5pt !important;
      line-height: 1.45 !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    html:has(body:not(:has([data-print='results']))) {
      background: #fff !important;
    }

    /* ---- What leaves the page --------------------------------------------- */
    body:not(:has([data-print='results']))
      :is(
        nav,
        footer,
        [role='dialog'],
        [role='tablist'],
        [role='status'],
        [aria-live],
        button,
        input,
        textarea,
        select,
        [data-print-hide],
        [data-ui='open-in-ai'],
        [data-sidebar-col],
        [data-reference-shell] aside,
        .print-drop
      ):not(.print-keep) {
      display: none !important;
    }
    /* The site header is a nav; hero headers (playbooks) are not. */
    body:not(:has([data-print='results'])) main header[data-hero] {
      display: block !important;
    }
    /* Cookie banner and toasts sit outside main. */
    /* In the app the box around the shell is #main-content and its main sits inside it. */
    body:not(:has([data-print='results'])) > :not(main):not(#main-content):not(script):not(style) {
      display: none !important;
    }

    /* Line clamps would cut text and, with overflow unrolled, overprint the next line. */
    body:not(:has([data-print='results'])) main [class*='line-clamp'] {
      display: block !important;
      -webkit-line-clamp: unset !important;
      line-clamp: unset !important;
      -webkit-box-orient: initial !important;
    }

    /* ---- Unroll anything that scrolls or sticks ----------------------------
       The reference entry sits in a fixed-height box with overflow hidden, and
       prompt boxes use max-h + overflow-y-auto: a browser clips printed output
       at a scroll container's box, so one page and then nothing. */
    body:not(:has([data-print='results'])) main,
    body:not(:has([data-print='results'])) main * {
      overflow: visible !important;
      max-height: none !important;
      box-shadow: none !important;
      background-color: transparent !important;
      background-image: none !important;
    }
    body:not(:has([data-print='results'])) main :is(.sticky, [class*='sticky'], [class*='fixed']) {
      position: static !important;
    }
    body:not(:has([data-print='results'])) :is([data-reference-shell], [data-reference-scroll]) {
      height: auto !important;
      min-height: 0 !important;
      display: block !important;
    }
    /* Page width: no centered columns, no side padding (the page margin does that). */
    body:not(:has([data-print='results']))
      main
      :is([class*='container'], [class*='max-w-'], .prose) {
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    body:not(:has([data-print='results'])) main :is(div, section, article, header)[class*='px-'],
    body:not(:has([data-print='results'])) main :is(div, section, article, header)[class*='!pl-'],
    body:not(:has([data-print='results'])) main :is(div, section, article, header)[class*='!pr-'] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
    body:not(:has([data-print='results'])) main :is(section, [class*='py-']):not(table *) {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
    body:not(:has([data-print='results'])) main [style*='position: sticky'] {
      position: static !important;
    }

    /* ---- Tabs: every panel prints, one after the other -------------------- */
    body:not(:has([data-print='results'])) [role='tabpanel'] {
      display: block !important;
      visibility: visible !important;
      height: auto !important;
    }
    body:not(:has([data-print='results'])) [role='tabpanel'] + [role='tabpanel'] {
      margin-top: 14pt !important;
    }
    /* A panel's tab label becomes its heading, unless the panel opens with a heading already. */
    body:not(:has([data-print='results'])) .print-panel-heading {
      display: block !important;
    }
    body:not(:has([data-print='results']))
      [role='tabpanel']:has(h1, h2, h3)
      > .print-panel-heading:not(.print-panel-heading-forced) {
      display: none !important;
    }

    /* Content that exists only for paper (a playbook's every step). */
    body:not(:has([data-print='results'])) .print-only-block {
      display: block !important;
    }

    /* ---- Page header and credit, added by <PrintFrame> -------------------- */
    body:not(:has([data-print='results'])) .print-head {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      gap: 12pt;
      margin: 0 0 10pt !important;
      padding: 0 0 6pt !important;
      border-bottom: 0.75pt solid #0b2748 !important;
    }
    body:not(:has([data-print='results'])) .print-head img {
      display: block;
      height: 30pt !important;
      width: auto !important;
      max-width: none !important;
    }
    body:not(:has([data-print='results'])) .print-head span {
      font:
        600 8.5pt Arial,
        Helvetica,
        sans-serif !important;
      color: #0b2748 !important;
      text-align: right;
      word-break: break-all;
    }
    body:not(:has([data-print='results'])) .print-credit {
      display: block !important;
      margin: 14pt 0 0 !important;
      padding-top: 6pt !important;
      border-top: 0.5pt solid #9fb3c4 !important;
      font:
        400 8pt Arial,
        Helvetica,
        sans-serif !important;
      color: #0b2748 !important;
    }

    /* ---- Look: Light brand ------------------------------------------------ */
    body:not(:has([data-print='results']))
      main
      :is(p, li, td, th, div, span, dd, dt, label, summary, blockquote, figcaption) {
      color: #111 !important;
    }
    body:not(:has([data-print='results'])) main :is(p, li) {
      font-size: 10.5pt !important;
      line-height: 1.45 !important;
      orphans: 3;
      widows: 3;
    }
    body:not(:has([data-print='results']))
      main
      :is(pre, pre *, [data-print-box], [data-print-box] *) {
      color: #111 !important;
    }
    body:not(:has([data-print='results'])) main :is(h1, h2, h3, h4, strong, b) {
      color: #0b2748 !important;
    }
    body:not(:has([data-print='results'])) main :is(h1, h2, h3, h4) {
      line-height: 1.2 !important;
      break-after: avoid-page;
      text-align: left !important;
    }
    body:not(:has([data-print='results'])) main h1 {
      font-size: 20pt !important;
      font-weight: 700 !important;
      margin: 0 0 4pt !important;
    }
    body:not(:has([data-print='results'])) main h2 {
      font-size: 14pt !important;
      font-weight: 700 !important;
      margin: 14pt 0 4pt !important;
    }
    body:not(:has([data-print='results'])) main h3 {
      font-size: 11.5pt !important;
      font-weight: 700 !important;
      margin: 10pt 0 3pt !important;
    }
    body:not(:has([data-print='results'])) main h4 {
      font-size: 10.5pt !important;
      font-weight: 700 !important;
      margin: 8pt 0 2pt !important;
    }
    body:not(:has([data-print='results'])) main :is(p, ul, ol) {
      margin-top: 0 !important;
      margin-bottom: 5pt !important;
    }
    body:not(:has([data-print='results'])) main :is(p, li) {
      text-align: left !important;
      hyphens: manual !important;
    }
    body:not(:has([data-print='results'])) main a {
      color: #187584 !important;
      text-decoration: none !important;
    }
    body:not(:has([data-print='results'])) main a[href^='http']::after {
      content: none !important;
    }

    /* Hero bands print as the title block: navy title, #111 intro, a teal rule under. */
    body:not(:has([data-print='results'])) main [data-hero] {
      padding: 0 0 8pt !important;
      margin: 0 0 10pt !important;
      min-height: 0 !important;
      border: 0 !important;
      border-bottom: 1.5pt solid #229fb5 !important;
    }
    body:not(:has([data-print='results'])) main [data-hero] :is(div, section) {
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin-top: 0 !important;
    }
    body:not(:has([data-print='results'])) main [data-hero] p {
      font-size: 11pt !important;
    }
    body:not(:has([data-print='results']))
      main
      [data-hero]
      :is(h1, h2, h3, h4, p, span, div, strong) {
      text-align: left !important;
    }
    body:not(:has([data-print='results'])) main [data-hero] h1 {
      color: #0b2748 !important;
    }

    /* Tables: full width, pale tint head with a teal rule, thin row rules, rows stay whole. */
    body:not(:has([data-print='results'])) main table {
      width: 100% !important;
      max-width: 100% !important;
      table-layout: auto;
      border: 0 !important;
      border-collapse: collapse !important;
      font-size: 9.5pt !important;
      break-inside: auto;
    }
    body:not(:has([data-print='results'])) main :is(th, td) {
      padding: 3pt 5pt !important;
      vertical-align: top;
      text-align: left !important;
      border-top: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
      font-size: 9.5pt !important;
      line-height: 1.35 !important;
      overflow-wrap: anywhere;
    }
    body:not(:has([data-print='results'])) main :is(td, td *) {
      font-size: 9.5pt !important;
    }
    body:not(:has([data-print='results'])) main th {
      background-color: #e9f4f6 !important;
      color: #0b2748 !important;
      font-weight: 700 !important;
      border-bottom: 1pt solid #187584 !important;
    }
    body:not(:has([data-print='results'])) main td {
      border-bottom: 0.5pt solid #9fb3c4 !important;
    }
    body:not(:has([data-print='results'])) main tr {
      break-inside: avoid;
    }
    body:not(:has([data-print='results'])) main thead {
      display: table-header-group;
    }

    /* Notes, tips and callouts: a 2.5pt teal bar on the left, nothing else. */
    body:not(:has([data-print='results'])) main :is(aside[role='note'], blockquote, [role='note']) {
      border: 0 !important;
      border-left: 2.5pt solid #229fb5 !important;
      border-radius: 0 !important;
      padding: 2pt 0 2pt 9pt !important;
      margin: 0 0 6pt !important;
      break-inside: avoid;
    }
    /* Key takeaway in a compare hero: a thin teal box with a 3pt bar on the left. */
    body:not(:has([data-print='results'])) main [data-hero] aside:not([role='note']) > div,
    body:not(:has([data-print='results'])) main [data-hero] aside:not([role='note']) {
      border: 0.75pt solid #229fb5 !important;
      border-left-width: 3pt !important;
      border-radius: 0 !important;
      padding: 6pt 9pt !important;
      margin-top: 6pt !important;
      break-inside: avoid;
    }
    body:not(:has([data-print='results'])) main [data-hero] aside:not([role='note']) > div {
      border: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    /* Nothing nested box-in-box: rounded wrappers lose border and side padding. */
    body:not(:has([data-print='results']))
      main
      [class*='rounded']:not(
        :is(
          table,
          th,
          td,
          tr,
          pre,
          aside,
          blockquote,
          [data-hero],
          [data-hero] *,
          [data-print-box],
          [data-print-box] *,
          [class*='whitespace-pre']
        )
      ) {
      border: 0 !important;
      border-radius: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Prompt text and other pre-formatted blocks: one thin bordered box. */
    body:not(:has([data-print='results']))
      main
      :is(pre, [data-print-box], [class*='whitespace-pre']) {
      border: 0.75pt solid #9fb3c4 !important;
      border-radius: 0 !important;
      padding: 7pt 9pt !important;
      font-size: 9.5pt !important;
      line-height: 1.4 !important;
      white-space: pre-wrap !important;
      overflow-wrap: anywhere;
      word-break: break-word;
      break-inside: auto;
    }
    body:not(:has([data-print='results'])) main :is(pre, pre *, [data-print-box] *) {
      font-size: 9.5pt !important;
    }
    body:not(:has([data-print='results'])) main :is(code):not(pre code) {
      font-size: 0.95em !important;
      white-space: pre-wrap !important;
      word-break: break-word;
    }
    body:not(:has([data-print='results'])) main :is(figure, img, svg) {
      max-width: 100% !important;
      break-inside: avoid;
    }
    body:not(:has([data-print='results'])) main :is(ul, ol) {
      padding-left: 18pt !important;
    }
    body:not(:has([data-print='results'])) main .print-only-block ul {
      list-style: disc !important;
    }
  }
}