/* Shared styles for the static white-paper detail pages.
   Loaded by every white-paper-<slug>/index.html. Keep the type scale and
   section spacing below authoritative for all of them, so the pages stay
   visually uniform as new white papers are added. Mirrors the case-study
   detail design system (case-study-detail.css) with its own "wpd-" prefix.
   NOTE: never write a directory glob with a star-slash inside a CSS comment
   here - it terminates the comment early and silently kills the next rule. */

.wpd-page {
  /* Type scale */
  --wpd-fs-eyebrow: 13px;
  --wpd-fs-section-title: 26px;
  --wpd-fs-body: 16px;
  --wpd-fs-small: 13px;
  --wpd-fs-meta: 15px;
  --wpd-lh-body: 1.7;

  /* Palette */
  --wpd-accent: #1a6fb5;
  --wpd-ink: #10243f;
  --wpd-body-color: #454f5b;
  --wpd-muted: #6b7280;
  --wpd-tint: #f6f8fa;
  --wpd-line: #e6e9ed;
  --wpd-desk: #eceff3;
  --wpd-sheet-bg: #ffffff;
}

/* ----------------------------------------------------- Section heads --- */

/* Document headings: ink colour, the paper's own capitalisation, and a
   hairline rule like the source PDFs. */
h2.wpd-section-title {
  margin: 0 0 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wpd-line);
  color: var(--wpd-ink);
  font-size: var(--wpd-fs-section-title);
  font-weight: 600;
  line-height: 1.3;
}

/* ---------------------------------------------------------- Body copy --- */

.wpd-body {
  max-width: 820px;
  color: var(--wpd-body-color);
  font-size: var(--wpd-fs-body);
  line-height: var(--wpd-lh-body);
}

.wpd-body p {
  margin-bottom: 18px;
}

.wpd-body p:last-child {
  margin-bottom: 0;
}

.wpd-body + .wpd-list {
  margin-top: 24px;
}

.wpd-list {
  margin: 0;
  padding-left: 0;
  max-width: 820px;
  list-style: none;
}

.wpd-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  color: var(--wpd-body-color);
  font-size: var(--wpd-fs-body);
  line-height: var(--wpd-lh-body);
}

.wpd-list li:last-child {
  margin-bottom: 0;
}

.wpd-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--wpd-fs-body) * var(--wpd-lh-body) / 2 - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wpd-accent);
}

.wpd-list li strong {
  color: var(--wpd-ink);
  font-weight: 600;
}

/* --------------------------------------------------- Subsection head --- */

h3.wpd-subtitle {
  margin: 34px 0 12px;
  color: var(--wpd-ink);
  font-size: calc(var(--wpd-fs-body) + 2px);
  font-weight: 600;
  line-height: 1.35;
}

/* ------------------------------------------------------------ Figures --- */

/* Figures rendered from the source PDF - see "Adding a new white paper" in
   CLAUDE.md. The default column matches .wpd-body's measure so a figure lines
   up with the prose it belongs to; the modifiers below handle the diagrams
   that do not fit that box. */

.wpd-figure {
  margin: 30px 0 0;
  max-width: 820px;
}

.wpd-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--wpd-line);
  border-radius: 12px;
  background: #ffffff;
}

.wpd-figure figcaption {
  margin-top: 12px;
  color: var(--wpd-muted);
  font-size: var(--wpd-fs-small);
  line-height: 1.6;
}

.wpd-figure figcaption strong {
  color: var(--wpd-ink);
  font-weight: 600;
}

/* Wide architecture and flow diagrams get the full content column. */
.wpd-figure--wide {
  max-width: 1000px;
}

/* Tall portrait diagrams: cap the rendered height rather than the width, so a
   full-width render does not push the next section a screen and a half down.
   The image stays centred and keeps its aspect ratio. */
.wpd-figure--tall img {
  width: auto;
  max-width: 100%;
  max-height: 900px;
  margin: 0 auto;
}

/* Small charts and photos that the source PDF sets beside its text: float the
   figure inside a .wpd-body--wrap so the prose flows round it, as in print.
   The body becomes a block formatting context so the float never leaks into
   the next block. Stacks full-width on mobile (see the 767px breakpoint). */
.wpd-body--wrap {
  display: flow-root;
}

.wpd-figure--float {
  float: left;
  width: 44%;
  max-width: 380px;
  margin: 6px 32px 16px 0;
}

.wpd-figure--float figcaption {
  font-size: calc(var(--wpd-fs-small) - 1px);
}

/* Flowcharts redrawn as SVG from case-study-diagrams/src (same toolkit as the
   case-study architecture diagrams). They are drawn 720px wide - the sheet's
   narrowest text column (880px sheet minus 2 x 80px padding) - so on the
   document layout they sit at ~1:1 with no scrollbar. Below ~700px they
   scroll sideways instead of shrinking, so the labels stay legible on
   mobile. The border moves to the scroll box so it doesn't scroll away. */
.wpd-figure--diagram {
  max-width: 1000px;
}

.wpd-figure-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--wpd-line);
  border-radius: 12px;
  background: #ffffff;
}

.wpd-figure-scroll img {
  min-width: 700px;
  border: 0;
  border-radius: 0;
}

/* Small figures (sample crops, single screenshots) shown side by side. The
   fixed aspect-ratio box plus object-fit keeps rows aligned when the source
   crops have different native proportions - without distorting any of them. */
.wpd-figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 20px;
  margin: 30px 0 0;
  max-width: 820px;
}

.wpd-figure-grid .wpd-figure {
  margin: 0;
  max-width: none;
}

.wpd-figure-grid .wpd-figure img {
  aspect-ratio: 3 / 4;
  object-fit: contain;
}

/* ------------------------------------------------------------- Tables --- */

.wpd-table-wrap {
  margin: 30px 0 0;
  max-width: 820px;
  overflow-x: auto;
}

.wpd-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--wpd-fs-small);
}

.wpd-table th,
.wpd-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--wpd-line);
  text-align: left;
  line-height: 1.55;
  vertical-align: top;
}

.wpd-table thead th {
  color: var(--wpd-ink);
  font-weight: 600;
  border-bottom-width: 2px;
  white-space: nowrap;
}

.wpd-table tbody th {
  color: var(--wpd-ink);
  font-weight: 600;
}

.wpd-table td {
  color: var(--wpd-body-color);
}

.wpd-table tbody tr:last-child th,
.wpd-table tbody tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------- Note --- */

.wpd-note {
  margin: 26px 0 0;
  max-width: 820px;
  padding: 18px 22px;
  border-left: 3px solid var(--wpd-accent);
  border-radius: 0 10px 10px 0;
  background: rgba(26, 111, 181, 0.06);
  color: var(--wpd-body-color);
  font-size: var(--wpd-fs-small);
  line-height: 1.7;
}

.wpd-note strong {
  color: var(--wpd-ink);
  font-weight: 600;
}

/* --------------------------------------------------------------- Code --- */

.wpd-code {
  margin: 24px 0 0;
  max-width: 820px;
  padding: 18px 22px;
  overflow-x: auto;
  border-radius: 12px;
  background: #0f1c2e;
  color: #d7e3f2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
}

.wpd-code code {
  color: inherit;
  font: inherit;
}

/* ------------------------------------------------- Authors/Contributors --- */

.wpd-authors {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 26px;
}

.wpd-author {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
}

.wpd-author img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.wpd-author-name {
  display: block;
  color: var(--wpd-ink);
  font-size: var(--wpd-fs-meta);
  font-weight: 600;
}

.wpd-author-role {
  display: block;
  color: var(--wpd-muted);
  font-size: var(--wpd-fs-small);
}

/* -------------------------------------------------------- References --- */

.wpd-references {
  margin: 0;
  padding-left: 0;
  max-width: 820px;
  list-style: none;
  counter-reset: wpd-ref;
}

.wpd-references li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: var(--wpd-muted);
  font-size: var(--wpd-fs-small);
  line-height: 1.6;
  word-break: break-word;
}

.wpd-references li::before {
  counter-increment: wpd-ref;
  content: "[" counter(wpd-ref) "]";
  position: absolute;
  left: 0;
  color: var(--wpd-accent);
  font-weight: 600;
}

.wpd-references a {
  color: var(--wpd-accent);
}

/* An in-text [n] link jumps here: clear the fixed header, and highlight
   the entry so the reader can see which reference they landed on. */
.wpd-references li {
  scroll-margin-top: 110px;
}

.wpd-references li:target {
  color: var(--wpd-ink);
}

/* In-text citation markers, e.g. "...context.[1][2]" */
.wpd-cite {
  color: var(--wpd-accent);
  font-size: 0.75em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
}

.wpd-cite:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------- CTA --- */

.wpd-cta {
  padding: 84px 0;
  text-align: center;
}

.wpd-cta-eyebrow {
  margin: 0;
  color: var(--wpd-accent);
  font-size: var(--wpd-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wpd-cta-title {
  margin: 14px 0 0;
  color: var(--wpd-ink);
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.25;
  font-weight: 600;
}

.wpd-cta-text {
  margin: 18px auto 32px;
  max-width: 600px;
  color: var(--wpd-muted);
  font-size: var(--wpd-fs-body);
  line-height: 1.65;
}

.wpd-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* ------------------------------------------------------- Responsive --- */

@media (max-width: 991px) {
  .wpd-cta {
    padding: 64px 0;
  }
}

@media (max-width: 767px) {
  .wpd-cta {
    padding: 52px 0;
  }

  .wpd-figure,
  .wpd-figure-grid,
  .wpd-table-wrap {
    margin-top: 24px;
  }

  .wpd-figure--tall img {
    max-height: 720px;
  }

  /* No room to wrap at phone width: stack, but keep the chart modest. */
  .wpd-figure--float {
    float: none;
    width: 100%;
    max-width: 420px;
    margin: 4px 0 22px;
  }

  .wpd-figure-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
  }

  .wpd-code {
    padding: 14px 16px;
    font-size: 12px;
  }
}

/* =================================================== Document layout ===
   The white paper reads as a document: a single sheet on a grey desk, with
   the title block on the sheet itself (as on a paper's first page) and a
   sticky contents rail in the left margin on wide screens. Continuous
   scroll - no fake page breaks, page numbers or running headers. Below
   992px the sheet effect is dropped and the page is a plain full-width
   column. */

/* No banner band: the sheet starts right under the fixed site header
   (~100px). A cropped banner strip was tried first and cut the artwork
   off mid-picture - the banners range from 1:1 to 3:1, so no fixed-height
   band suits them all. The banner file is still the og:image. */
.wpd-desk {
  --wpd-sheet-w: 880px;
  --wpd-sheet-pad: 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--wpd-sheet-w)) minmax(0, 1fr);
  padding: 148px 24px 96px;
  background: var(--wpd-desk);
}

.wpd-sheet {
  grid-column: 2;
  position: relative;
  z-index: 1;
  padding: 72px var(--wpd-sheet-pad) 80px;
  border-radius: 3px;
  background: var(--wpd-sheet-bg);
  box-shadow: 0 1px 3px rgba(15, 30, 60, 0.08), 0 18px 48px rgba(15, 30, 60, 0.1);
}

/* Side column: the way back to the listing, then the contents list. Below
   1360px there is no room beside the sheet, so only the back link shows,
   above the sheet on the desk (still off the page itself). */
.wpd-toc {
  grid-column: 2;
  margin: -28px 0 20px;
}

.wpd-toc-nav {
  display: none;
}

/* A fixed link rather than history.back(): many readers land here from
   search or a shared link, where "back" would leave the site. */
.wpd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wpd-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.wpd-back:hover,
.wpd-back:focus-visible {
  color: var(--wpd-accent);
}

.wpd-back span {
  transition: transform 0.2s;
}

.wpd-back:hover span {
  transform: translateX(-3px);
}

@media (min-width: 1360px) {
  .wpd-toc-nav {
    display: block;
  }

  .wpd-back {
    margin-bottom: 28px;
  }

  .wpd-toc {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    position: sticky;
    top: 130px;
    width: 200px;
    margin: 72px 36px 0 0;
  }
}

.wpd-toc-title {
  margin: 0 0 12px;
  color: var(--wpd-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wpd-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--wpd-line);
}

.wpd-toc-nav a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--wpd-body-color);
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
}

.wpd-toc-nav a:hover,
.wpd-toc-nav a:focus-visible {
  border-left-color: var(--wpd-accent);
  color: var(--wpd-ink);
}

/* Section currently being read (set by assets/js/white-paper-toc.js). */
.wpd-toc-nav a.is-active {
  border-left-color: var(--wpd-accent);
  color: var(--wpd-accent);
  font-weight: 600;
}

/* ----------------------------------------------------- Title block --- */

.wpd-doc-head {
  margin-bottom: 56px;
}

.wpd-doc-eyebrow {
  margin: 0 0 14px;
  color: var(--wpd-accent);
  font-size: var(--wpd-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wpd-doc-title {
  margin: 0;
  color: var(--wpd-ink);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.2;
}

.wpd-doc-deck {
  margin: 18px 0 0;
  color: var(--wpd-body-color);
  font-size: calc(var(--wpd-fs-body) + 1px);
  line-height: 1.6;
}

/* One bar between two hairlines: the paper's details on the left, the
   PDF download on the right. The bar's bottom rule also closes the
   title block. */
.wpd-doc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 28px;
  padding: 18px 0;
  border-top: 1px solid var(--wpd-line);
  border-bottom: 1px solid var(--wpd-line);
}

.wpd-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 0;
}

.wpd-doc-meta dt {
  color: var(--wpd-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wpd-doc-meta dd {
  margin: 2px 0 0;
  color: var(--wpd-ink);
  font-size: var(--wpd-fs-meta);
  font-weight: 600;
}

/* The paper's own cover art, where the PDF has one (AR, TB): shown whole,
   like a cover page, between the title block and the first section. */
.wpd-sheet .wpd-figure.wpd-doc-cover {
  max-width: 520px;
  margin: 0 auto 56px;
}

/* ------------------------------------------------ Sections on sheet --- */

.wpd-doc-section {
  scroll-margin-top: 110px;
}

.wpd-doc-section + .wpd-doc-section {
  margin-top: 56px;
}

.wpd-sheet .wpd-body p {
  margin-bottom: 16px;
}

/* Figures centred in the text column with a centred caption, as in print.
   Floated figures keep their left float and left-aligned caption. */
.wpd-sheet .wpd-figure:not(.wpd-figure--float) {
  margin-left: auto;
  margin-right: auto;
}

.wpd-sheet .wpd-figure:not(.wpd-figure--float) figcaption {
  text-align: center;
}

.wpd-sheet .wpd-figure img,
.wpd-sheet .wpd-figure-scroll {
  border-radius: 4px;
}

.wpd-sheet .wpd-figure-scroll img {
  border-radius: 0;
}

@media (max-width: 1199px) {
  .wpd-desk {
    --wpd-sheet-pad: 60px;
  }
}

/* No sheet on tablet and phone: full width, the desk and shadow go. */
@media (max-width: 991px) {
  .wpd-desk {
    display: block;
    padding: 88px 0 0;
    background: var(--wpd-sheet-bg);
  }

  .wpd-toc {
    max-width: 760px;
    margin: 16px auto 0;
    padding: 0 24px;
  }

  .wpd-sheet {
    margin: 0 auto;
    max-width: 760px;
    padding: 44px 24px 64px;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 767px) {
  .wpd-sheet {
    padding: 32px 16px 52px;
  }

  .wpd-toc {
    padding: 0 16px;
  }

  .wpd-doc-head {
    margin-bottom: 40px;
  }

  .wpd-sheet .wpd-figure.wpd-doc-cover {
    margin-bottom: 40px;
  }

  .wpd-doc-meta {
    gap: 10px 28px;
  }

  .wpd-doc-section + .wpd-doc-section {
    margin-top: 44px;
  }

  .wpd-page {
    --wpd-fs-section-title: 22px;
  }
}

/* ========================================================= Dark theme ===
   Follows the site switcher (body.sala-dark-scheme). The sheet becomes a
   dark-grey page on a darker desk - not a white sheet glowing in the dark.
   Figures keep their own white backgrounds; they are rendered from print. */

body.wpd-page.sala-dark-scheme {
  --wpd-accent: #5aa9e6;
  --wpd-ink: #eceff3;
  --wpd-body-color: #c5cbd3;
  --wpd-muted: #98a1ac;
  --wpd-tint: #2b2f35;
  --wpd-line: #3a3f47;
  --wpd-desk: #141619;
  --wpd-sheet-bg: #22252a;
}

body.wpd-page.sala-dark-scheme .wpd-sheet {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 48px rgba(0, 0, 0, 0.45);
}

body.wpd-page.sala-dark-scheme .wpd-note {
  background: rgba(90, 169, 230, 0.1);
}

/* ============================================================== Print ===
   Browser "Print" / "Save as PDF" gives a clean document: site chrome,
   contents rail, CTA and download button hidden; always light colours;
   figures and tables kept whole, in either theme. */

@media print {
  @page {
    size: A4;
    margin: 18mm 16mm 20mm;
  }

  body.wpd-page,
  body.wpd-page.sala-dark-scheme {
    --wpd-fs-body: 10.5pt;
    --wpd-fs-small: 9pt;
    --wpd-fs-meta: 10pt;
    --wpd-lh-body: 1.5;
    --wpd-accent: #1a6fb5;
    --wpd-ink: #000000;
    --wpd-body-color: #222222;
    --wpd-muted: #555555;
    --wpd-tint: #ffffff;
    --wpd-line: #cccccc;
    --wpd-desk: #ffffff;
    --wpd-sheet-bg: #ffffff;
    background: #ffffff !important;
    color: #222222;
  }

  #header,
  .site-header,
  #footer,
  #backtotop,
  #messageModal,
  .modal,
  .modal-backdrop,
  #cc-main,
  .wpd-toc,
  .wpd-cta,
  .wpd-doc-download {
    display: none !important;
  }

  .wpd-page .container {
    max-width: none;
    padding: 0;
  }

  .wpd-desk {
    display: block;
    padding: 0;
    background: none;
  }

  .wpd-sheet {
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.wpd-page,
  body.wpd-page.sala-dark-scheme {
    --wpd-fs-section-title: 15pt;
  }

  .wpd-doc-title {
    font-size: 22pt;
  }

  .wpd-doc-section + .wpd-doc-section {
    margin-top: 20pt;
  }

  .wpd-section-title,
  h3.wpd-subtitle {
    break-after: avoid;
  }

  .wpd-body p,
  .wpd-list li {
    orphans: 3;
    widows: 3;
  }

  .wpd-figure,
  .wpd-figure-grid,
  .wpd-table-wrap,
  .wpd-table tr,
  .wpd-note,
  .wpd-code,
  .wpd-author,
  .wpd-references li {
    break-inside: avoid;
  }

  .wpd-figure img {
    max-height: 190mm;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }

  .wpd-figure--float img {
    width: 100%;
  }

  .wpd-figure-scroll {
    overflow: visible;
  }

  .wpd-figure-scroll img {
    min-width: 0;
  }

  .wpd-table-wrap {
    overflow: visible;
  }

  .wpd-table {
    min-width: 0;
  }

  .wpd-code {
    background: #f4f5f7;
    color: #111111;
    white-space: pre-wrap;
  }

  .wpd-page a {
    color: inherit;
  }

  .wpd-cite {
    color: #1a6fb5 !important;
  }
}