/* BluePi paper theme — load LAST, after style.css, visuals.css and anatomy.css.
   All page values share this opt-in. @scope excludes the complete anatomy subtree.
   Only --pt-* tokens are introduced: anatomy's own tokens remain untouched. */
@font-face {
  font-family: PaperInstrument;
  src: url('../assets/instrument-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: PaperSource;
  src: url('../assets/source-sans-3-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@scope (body:is([data-page="overview"], [data-page="how-it-works"], [data-page="sample"], [data-page="guide"], [data-page="conversation"], [data-page="privacy"], [data-page="review"])) to (:is(.workflow-anatomy, #workflow-anatomy, .bp-anatomy)) {
  :scope {
    --pt-paper: oklch(100% 0 0);
    --pt-ink: #071525;
    --pt-muted: #46586b;
    --pt-rule: #d7dee8;
    --pt-source: #1455d9;
    --pt-result: #096b71;
    --pt-human: #865000;
    --pt-display: PaperInstrument, 'Helvetica Neue', sans-serif;
    --pt-body: PaperSource, 'Segoe UI', sans-serif;
    --pt-note: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
    background: var(--pt-paper); color: var(--pt-ink);
    font-family: var(--pt-body);
  }
  :is(h1,h2,h3,h4,.button,.site-nav,.paper-name,.work-table .amount) {
    font-family: var(--pt-display); font-weight: 600;
  }
  :is(h1,h2) { color: var(--pt-ink); letter-spacing: -.025em; text-wrap: balance; }
  h1 { line-height: 1.08; }
  h2 { line-height: 1.16; }
  :is(.eyebrow,.vr-kicker,.paper-label,.work-heading .mono) {
    color: var(--pt-muted); letter-spacing: .08em;
  }
  :is(.lead,.muted,.hero-note,.section-head p) { color: var(--pt-muted); }
  :is(.wrap,.work-sheet,.resource-caption,.hero-copy,.split > *) { min-width: 0; }
  :is(.section,.site-header,.site-footer,.proof-strip,.guide-section,.privacy-item) { border-color: var(--pt-rule); }
  :is(.wash,.retained,.end-cta,.request-form,.review-bar) { background: var(--pt-paper); color: var(--pt-ink); }
  .review-bar { border-bottom: 1px solid var(--pt-rule); color: var(--pt-muted); }
  .review-bar a { color: var(--pt-ink); }
  .site-header { background: var(--pt-paper); }
  .hero h1 em { color: inherit; }
  :is(.retained .eyebrow,.retained .lead,.artifact-lines li span) { color: var(--pt-muted); }
  .artifact-lines li { border-color: var(--pt-rule); }
  :is(.confirmation,.retained .confirmation) { color: var(--pt-human); border-color: var(--pt-rule); }
  .confirmation { border-left: 0; border-top: 1px solid var(--pt-rule); padding: 12px 0 0; }
  .confirmation summary { min-height: 44px; align-content: center; }
  .end-cta { border-top: 1px solid var(--pt-rule); }
  .text-link { color: var(--pt-ink); text-decoration: underline; text-underline-offset: .22em; }
  .text-link:hover { color: var(--pt-source); }
  :is(a,button,input,textarea,select,summary):focus-visible {
    outline: 2px solid var(--pt-source); outline-offset: 4px;
  }
  :is(.button,.menu-toggle,.copy-button,.site-nav a,.pack-nav a,.guide-toc a) { min-height: 44px; }
  :is(.site-nav a,.pack-nav a) { display: inline-flex; align-items: center; }
  .button { background: var(--pt-source); border-color: var(--pt-source); border-radius: 3px; color: var(--pt-paper); box-shadow: none; }
  .button:hover { background: var(--pt-ink); border-color: var(--pt-ink); }
  .button.secondary { background: var(--pt-paper); color: var(--pt-source); }
  .button.secondary:hover { background: color-mix(in srgb,var(--pt-source) 5%,var(--pt-paper)); }
  .site-nav .nav-cta { background: transparent; color: var(--pt-ink); border: 1px solid var(--pt-rule); border-radius: 0; }
  .site-nav a[aria-current="page"] { box-shadow: none; text-decoration: underline; text-underline-offset: 7px; }
  .button:active:not(:disabled) { transform: translateY(1px); }
  button:disabled { cursor: not-allowed; }
  :is(.proof-strip .number,.question-list li::before,.agenda > li > span) { color: var(--pt-muted); }

  /* The homepage is an extract, not a stack of decorative paper cards. */
  .paper-stage { padding: 0; isolation: auto; }
  .paper-stage::before { content: none; }
  .paper { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
  .paper-top { border-bottom: 1px solid var(--pt-ink); gap: 16px; padding-bottom: 14px; }
  .paper-name { font-size: 17px; }
  .paper-label { font-size: 11px; text-align: right; }
  .paper h3 { font-size: clamp(23px,2.1vw,29px); line-height: 1.2; margin-bottom: 24px; }
  .paper-row { grid-template-columns: 28px minmax(0,1fr) auto; padding-block: 13px; border-color: var(--pt-rule); }
  .paper-row .value { font-family: var(--pt-display); font-variant-numeric: tabular-nums; }
  .paper-row.total { color: var(--pt-result); border-bottom: 1px solid var(--pt-result); background: transparent; }
  .paper-row.total .row-id { color: var(--pt-result); }
  .paper-foot { gap: 16px; flex-wrap: wrap; font-size: 12px; border-color: var(--pt-rule); }
  .paper-foot > span:first-child { color: var(--pt-source); }
  .paper-annotation { margin: 20px 0 0 auto; max-width: 37ch; padding: 0 0 0 16px; border-left: 1px solid var(--pt-human); color: var(--pt-human); font-size: 15px; }
  .paper-annotation strong { display: block; font: 400 22px/1.25 var(--pt-note); margin-bottom: 5px; }

  /* Keep the table a table. Source references stay real anchors and controls. */
  .work-area { grid-template-columns: minmax(0,2.6fr) minmax(220px,1fr); gap: clamp(24px,4vw,56px); }
  .work-heading { padding-bottom: 15px; border-bottom: 1px solid var(--pt-ink); flex-wrap: wrap; }
  .work-heading h3 { margin-bottom: 0; }
  .work-heading .mono { font-size: 11px; }
  .work-table { table-layout: auto; }
  .work-table th { color: var(--pt-muted); background: transparent; border-top: 0; letter-spacing: .06em; }
  .work-table :is(td,th) { border-bottom-color: var(--pt-rule); }
  .work-table td:nth-child(2) { overflow-wrap: anywhere; }
  .work-table tr.total { background: transparent; color: var(--pt-result); border-bottom: 1px solid var(--pt-result); }
  .work-table tr.total :is(.row-code,.amount) { color: var(--pt-result); }
  .work-table tr.difference { background: transparent; color: var(--pt-human); }
  .source-button {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 6px;
    background: transparent; color: var(--pt-source); border-radius: 0;
    text-decoration: underline; text-underline-offset: 4px;
  }
  .source-button:hover { background: color-mix(in srgb,var(--pt-source) 6%,var(--pt-paper)); color: var(--pt-source); }
  .source-button:is([aria-pressed="true"],[aria-current="true"]) { background: transparent; color: var(--pt-source); outline: 1px solid var(--pt-source); outline-offset: -4px; }
  .inspector { background: transparent; padding: 0 0 0 24px; border: 0; border-left: 1px solid var(--pt-rule); border-radius: 0; box-shadow: none; }
  .inspector .mono { color: var(--pt-source); }
  .inspector .source-value { color: var(--pt-source); font-size: clamp(21px,2vw,27px); }
  .inspector h4 { font-size: 21px; }
  .sheet-note { border-top: 1px solid var(--pt-rule); padding-top: 14px; }
  .pack-nav { gap: 12px 26px; }
  .pack-nav a[aria-current="true"] { box-shadow: none; padding-bottom: 0; border-bottom: 2px solid var(--pt-source); }
  .sample-reading-note { display: grid; grid-template-columns: minmax(160px,1fr) minmax(0,3fr); gap: 32px; padding-block: 25px; border-block: 1px solid var(--pt-rule); }
  .sample-reading-note .margin-note { font: 600 17px/1.5 var(--pt-display); color: var(--pt-ink); }
  .sample-reading-note p { margin-bottom: 0; }
  .review-issue .issue-amount { font-variant-numeric: tabular-nums; }
  .review-issue:has(.status.open) .issue-amount { color: var(--pt-human); }
  .status.closed { color: var(--pt-result); }
  .status.open { color: var(--pt-human); }
  .source-record:target { background: transparent; outline: 2px solid var(--pt-source); outline-offset: 5px; }
  .table-wrap { max-width: 100%; overflow-x: auto; }
  :is(.responsibilities,.review-register) th { background: transparent; color: var(--pt-muted); }
  .responsibilities thead { background: transparent; color: var(--pt-ink); }
  .request-form { padding: 0; border-top: 1px solid var(--pt-rule); padding-top: 24px; }
  .request-form :is(input,textarea) { border-color: var(--pt-muted); }

  /* Integration component: real PDF links, small covers, readable captions.
     Supports an existing cover PNG or the semantic HTML cover used in the specimen. */
  .resource-shelf { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; }
  .resource-document { min-width: 0; padding-top: 22px; border-top: 1px solid var(--pt-rule); }
  .resource-cover { display: flex; flex-direction: column; width: 158px; aspect-ratio: 210/297; max-width: 100%; margin: 0 0 24px; border: 1px solid var(--pt-rule); background: var(--pt-paper); box-shadow: none; border-radius: 0; color: var(--pt-ink); text-decoration: none; overflow: hidden; }
  .resource-cover img { display: block; width: 100%; height: auto; box-shadow: none; }
  .resource-cover:hover { border-color: var(--pt-source); }
  .resource-cover .cover-content { display: flex; flex-direction: column; flex: 1; padding: 14px 13px; }
  .resource-cover .cover-content img { width: 48px; height: 17px; object-fit: contain; object-position: left; margin-bottom: 20px; }
  .resource-cover .cover-title { font: 600 16px/1.18 var(--pt-display); letter-spacing: -.02em; }
  .resource-cover .cover-subtitle { font: 400 10px/1.4 var(--pt-body); color: var(--pt-muted); margin-top: 9px; }
  .resource-cover .cover-rule { height: 1px; background: var(--pt-rule); margin-top: 13px; }
  .resource-cover .cover-footer { margin-top: auto; padding-top: 12px; font: 400 9px/1.4 var(--pt-body); color: var(--pt-muted); }
  .resource-caption .mono { color: var(--pt-muted); font: 400 12px/1.5 var(--pt-body); letter-spacing: .06em; }
  .resource-caption h3 { font-size: 23px; line-height: 1.2; margin: 10px 0; }
  .resource-caption p { font-size: 17px; max-width: 42ch; color: var(--pt-muted); }
  .resource-caption a { display: inline-flex; align-items: center; min-height: 44px; }
  .margin-note { color: var(--pt-human); font: 400 21px/1.35 var(--pt-note); max-width: 44ch; }
  .resource-note { margin-top: 32px; }
  /* Legacy resource markup gets the same restraint, without hiding content. */
  .bp-visual .vr-document { border-top: 1px solid var(--pt-rule); }
  .bp-visual .vr-document .vr-thumbnail-stage { padding: 0; background: transparent; justify-content: flex-start; }
  .bp-visual .vr-thumbnail { width: 158px; height: 224px; box-shadow: none; border: 1px solid var(--pt-rule); }
  .bp-visual .vr-thumbnail iframe { transform: scale(.197); }
  .bp-visual .vr-thumbnail .vr-export-cover { width: 100%; height: auto; }
  .bp-visual .vr-page-map span { border: 0; border-top: 1px solid var(--pt-rule); }
  .bp-visual .vr-document p { min-height: 0; }
  .bp-visual .vr-reference { background: transparent; border-color: var(--pt-rule); }
  .vr-flags { padding-top: 24px; border-top: 1px solid var(--pt-rule); }
  .vr-flags summary { min-height: 44px; cursor: pointer; color: var(--pt-human); }
  .vr-flags dl { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 18px; font-size: 16px; }
  .vr-flags dt { color: var(--pt-human); }
  .vr-flags dd { margin: 0; }

  /* Quiet routes deliberately share only type, rules and ordinary controls. */
  :scope:is([data-page="conversation"],[data-page="privacy"],[data-page="review"]) .margin-note {
    font: 400 17px/1.5 var(--pt-body); color: var(--pt-muted);
  }
  :scope:is([data-page="conversation"],[data-page="privacy"],[data-page="review"]) .page-hero { border-bottom: 1px solid var(--pt-rule); }

  @media (max-width: 1050px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .paper-stage { max-width: 650px; width: 100%; margin-inline: 0; }
    .work-area { grid-template-columns: minmax(0,1fr) 230px; gap: 24px; }
    .resource-shelf { gap: 24px; }
    .resource-caption h3 { font-size: 21px; }
  }
  @media (max-width: 820px) {
    .work-area { grid-template-columns: minmax(0,1fr); }
    .inspector { position: static; border-left: 0; border-top: 1px solid var(--pt-rule); padding: 24px 0 0; }
    .inspector dl { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 10px 16px; }
    .inspector dt,.inspector dd { margin: 0; }
    .resource-shelf { grid-template-columns: 1fr; gap: 30px; }
    .resource-document { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 24px; }
    .resource-cover { width: 130px; margin: 0; }
    .resource-cover .cover-title { font-size: 14px; }
    .resource-cover .cover-content img { margin-bottom: 12px; }
    .resource-cover .cover-subtitle { font-size: 9px; }
    .resource-caption h3 { margin-top: 6px; }
    .sample-reading-note { grid-template-columns: 1fr; gap: 12px; }
  }
  @media (max-width: 480px) {
    .wrap { width: calc(100% - 32px); }
    .hero h1 { font-size: clamp(38px,10vw,48px); }
    .hero-copy .lead { font-size: 21px; }
    .paper { padding: 0; }
    .paper-top { align-items: flex-start; gap: 10px; }
    .paper-name { max-width: 160px; }
    .paper-label { max-width: 110px; }
    .paper-row { grid-template-columns: 23px minmax(0,1fr) auto; gap: 6px; font-size: 14px; }
    .paper-row .value { font-size: 14px; }
    .paper-foot { font-size: 12px; gap: 10px; }
    .work-table :is(th,td) { padding-inline: 3px; }
    .work-table .amount { font-size: 12px; }
    .work-table .source-button { padding-inline: 2px; min-width: 44px; }
    .resource-document { grid-template-columns: 108px minmax(0,1fr); gap: 18px; }
    .resource-cover { width: 108px; }
    .resource-cover .cover-content { padding: 10px; }
    .resource-cover .cover-title { font-size: 12px; }
    .resource-cover .cover-subtitle { font-size: 8px; }
    .resource-cover .cover-footer { font-size: 8px; padding-top: 8px; }
    .resource-cover .cover-rule { margin-top: 8px; }
    .resource-caption h3 { font-size: 20px; }
    .resource-caption p { font-size: 16px; }
    .work-heading { gap: 10px; }
    .vr-flags dl { gap: 14px 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .button:active:not(:disabled) { transform: none; }
  }
}