/* CASPR policy-paper shared styles.
   The house style for all policy-paper pages (see policy/papers/README.md).
   Edit here once; every paper that links this file updates. Paired with
   /assets/js/policy-paper.js (sticky-TOC highlighting, reading progress, back-to-top). */

/* === Paper page overrides === */
body.paper-page {
  background: #fcfaf7;
  color: #2d2a26;
  --pg: 64px;   /* shared left gutter — the whole article left-anchors to this edge */
}
@media (max-width: 920px) { body.paper-page { --pg: 20px; } }
@media (max-width: 720px) { body.paper-page { --pg: 16px; } }
body.paper-page h1,
body.paper-page h2,
body.paper-page h3,
body.paper-page p {
  color: #2d2a26;
}
body.paper-page a {
  color: #4D52FF;
  text-decoration: underline;
  text-decoration-color: rgba(77, 82, 255, 0.3);
  text-underline-offset: 2px;
}
body.paper-page a:hover {
  text-decoration-color: rgba(77, 82, 255, 0.8);
}
body.paper-page .editorial-footer,
body.paper-page .editorial-footer p,
body.paper-page .editorial-footer a {
  color: rgba(255,255,255,0.7);
}
body.paper-page .editorial-footer h4 {
  color: #fff;
}
.paper-content a {
  text-decoration: none;
  color: #4D52FF;
}
.paper-content a:hover {
  text-decoration: underline;
  text-decoration-color: rgba(77, 82, 255, 0.5);
}

/* Reading progress bar */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: #4D52FF;
  z-index: 200;
  transition: width 0.1s linear;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e0ddd8;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  color: #2d2a26;
  font-size: 19px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
  z-index: 150;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover {
  background: #f3f1ed;
  transform: translateY(-2px);
  text-decoration: none;
}
body.paper-page .topbar {
  border-bottom: 1px solid #e0ddd8;
  background: #fcfaf7;
}
body.paper-page .topbar .top-nav a {
  color: #1a1a1a;
  text-decoration: none;
}
body.paper-page .nav-symbol {
  border-color: #1a1a1a;
}
body.paper-page .nav-symbol::after {
  background: #1a1a1a;
}
body.paper-page .mobile-menu-btn {
  color: #1a1a1a;
}

/* === Paper layout === */
.paper-header-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fcfaf7;
}

.paper-title-block {
  max-width: 880px;
  margin: 0;
  padding: 64px var(--pg) 0;
  text-align: left;
}
.paper-type-label {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #4D52FF;
  margin: 0 0 16px 0;
  display: inline-block;
}
.paper-title-block h1 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 14px 0;
  padding: 0;
  color: #1a1a1a;
  letter-spacing: -0.015em;
}
.paper-title-block .paper-subtitle {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 23px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  margin: 0 0 28px 0;
  color: #555;
}
.paper-meta-bar {
  background: linear-gradient(135deg, #4e58c4 0%, #7a88e8 100%);
  max-width: none;          /* full-bleed band, edge to edge (like the suzetrigine page) */
  padding: 28px var(--pg) 22px;
  margin: 0 0 12px 0;       /* small gap; the co-publication note sits just below */
  border-radius: 0;
}
.paper-meta-note {
  max-width: 800px;
  margin: 0 var(--pg) 36px;   /* sits just below the purple box, at the gutter */
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  line-height: 1.55;
}
/* dark gray on the light page (beats the body.paper-page p specificity); links use the standard blue */
body.paper-page .paper-meta-note {
  color: #555;
}
.paper-meta {
  max-width: calc(25vw + 816px);   /* right edge tracks the body content's right edge */
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.paper-meta-actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
}
.paper-meta .author-name {
  font-weight: 600;
  color: #fff;
}
.paper-meta .author-role {
  color: rgba(255,255,255,0.75);
}
.paper-meta .paper-date {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,0.55);
  font-size: 15px;
}
.paper-meta-author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;        /* vertical space between the two authors */
}
.paper-meta-author:last-of-type {
  margin-bottom: 12px;
}
.author-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 310px;        /* fixed width so both authors' logos line up in a column */
  flex-shrink: 0;
}
.author-logo {
  display: block;
  width: auto;
  flex: 0 0 auto;             /* sits to the right of the name + credit, ~2 lines tall */
}
.author-logo.logo-caspr {
  height: 48px;
  filter: brightness(0) invert(1);   /* black mark → white on the purple bar */
}
.author-logo.logo-ifp {
  height: 38px;                       /* shared IFP svg already ships white */
}

/* === Executive Summary — bracketed by hairlines on the same 12-col grid, not a card === */
.exec-summary {
  margin: 8px 0 4px;
  padding: 0 var(--pg);       /* block: content box is the full gutter-to-gutter measure */
}
.exec-summary-inner {
  /* Pinned to the left gutter, flexes right; right edge tracks the body text's
     right edge. The body is cols 4-12 capped at 840px, so its right edge sits at
     CW/4 + 848px from the gutter (CW = gutter-to-gutter width). */
  width: calc(25% + 848px);
  max-width: 100%;
  background: none;
  border: none;
  border-top: 1.5px solid #1a1a1a;
  border-bottom: 1px solid #d8d3ca;
  border-radius: 0;
  padding: 22px 0 30px;       /* flush-left, no horizontal inset */
}
/* label + columns flow as blocks inside .exec-summary-inner */
.exec-summary-label {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #4D52FF;
  margin: 0 0 20px 0;
}
.exec-summary-columns {
  display: flex;
  gap: 48px;
}
.exec-summary-col {
  flex: 1;
}
.exec-summary-heading {
  font-family: 'Lora', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 12px 0;
}
.exec-summary-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.exec-summary-col ul li {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #444;
  margin: 0 0 12px 0;
  padding-left: 16px;
  position: relative;
}
.exec-summary-col ul li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: #6b6b6b;
}
@media (max-width: 720px) {
  .exec-summary-columns {
    flex-direction: column;
    gap: 24px;
  }
  .exec-summary-inner {
    padding: 24px 0 20px;   /* no horizontal inset on mobile — match the body edges */
  }
}

/* === Full-width canvas so the article can pin to the viewport's left edge ===
   (the production wrapper caps at --maxw:1400px and centers; the reference page
    is full-width, which is what lets its Contents sit hard against the left) === */
body.paper-page .wrapper { max-width: none; width: 100%; }

/* === 12-column grid matching the reference: Contents in cols 1–3, content in 4–9,
   cols 10–12 left empty. Full-width (no max cap) so columns scale with the viewport. === */
.paper-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  max-width: none;
  margin: 0;
  padding: 8px var(--pg) 100px;
}

/* === Sticky, pinned-left Table of Contents (columns 1–3) === */
.paper-toc {
  grid-column: 1 / 4;
  position: sticky;
  top: 100px;
  padding: 2px 0 0 0;
  font-family: 'Manrope', sans-serif;
  align-self: start;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
.paper-toc .toc-label {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #6b6b6b;
  margin: 26px 0 14px 0;   /* top margin pushes "Contents" down to align with the first heading */
  padding: 0;
}
.paper-toc ol {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
}
.paper-toc ol li {
  margin: 0;
  padding: 0;
  counter-increment: toc;
}
.paper-toc ol li a {
  display: flex;
  gap: 13px;
  padding: 9px 0;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
  color: #2c2a27;
  text-decoration: none;
  border-top: 1px solid #ece8e1;
  transition: color 0.2s ease;
}
.paper-toc ol li:first-child a {
  border-top: none;
}
.paper-toc ol li a::before {
  content: counter(toc);
  flex: 0 0 auto;
  min-width: 15px;
  color: #9a948c;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.paper-toc ol li a:hover,
.paper-toc ol li a:hover::before {
  color: #4D52FF;
}
.paper-toc ol li a.active {
  color: #1a1a1a;
  font-weight: 600;
}
.paper-toc ol li a.active::before {
  color: #6b6b6b;   /* subtle darken instead of a bright-blue pop */
  font-weight: 600;
}

/* === Main article content: spans all columns after the TOC, capped to a readable measure.
   At medium widths it fills the available space (wider); at large widths it caps and the
   slack falls to the right (the reference's empty-right look). === */
.paper-content {
  grid-column: 4 / -1;
  justify-self: start;
  max-width: 840px;
  min-width: 0;
  padding-left: 36px;
  border-left: 1px solid #d8d3ca;
  font-family: 'Manrope', sans-serif;
  font-size: 18.5px;
  line-height: 30px;   /* fixed: body line-height held constant despite the +1px font */
  color: #2d2a26;
}
.paper-content .drop-cap::first-letter {
  font-family: 'Lora', Georgia, serif;
  float: left;
  font-size: 3.6em;
  line-height: 0.8;
  padding-right: 8px;
  padding-top: 6px;
  color: #1a1a1a;
  font-weight: 700;
}
.paper-content h2 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.25;
  margin: 56px 0 16px 0;
  padding-top: 24px;
  border-top: 1px solid #eae7e2;
  color: #1a1a1a;
  letter-spacing: -0.005em;
}
.paper-content h2:first-child {
  border-top: none;
  margin-top: 24px;    /* reduced so its top aligns with the Contents label */
  padding-top: 0;
}
.paper-content h3 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin: 40px 0 12px 0;
  color: #1a1a1a;
}
.paper-content p {
  margin: 0 0 18px 0;
  font-size: 18.5px;
  line-height: 30px;   /* fixed: body line-height held constant despite the +1px font */
}
.paper-content ul {
  list-style: disc;
  margin: 12px 0 20px 24px;
  padding: 0;
}
.paper-content ul li {
  margin: 0 0 10px 0;
  line-height: 28px;   /* fixed: body list line-height held constant despite the +1px font */
  font-size: 18px;
}
.paper-content ol {
  margin: 12px 0 20px 24px;
  padding: 0;
}
.paper-content ol li {
  margin: 0 0 14px 0;
  line-height: 28px;   /* fixed: body list line-height held constant despite the +1px font */
  font-size: 18px;
}

/* === Blockquote === */
.paper-content blockquote {
  margin: 32px 0;
  padding: 28px 28px 24px 32px;
  border-left: 3px solid #4D52FF;
  background: rgba(77, 82, 255, 0.035);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: #444;
  position: relative;
}
.paper-content blockquote::before {
  content: '\201C';
  font-family: 'Lora', Georgia, serif;
  font-size: 65px;
  font-weight: 700;
  color: rgba(77, 82, 255, 0.18);
  position: absolute;
  top: 8px;
  left: 16px;
  line-height: 1;
}
.paper-content blockquote p {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  position: relative;
  padding-left: 20px;
}
.paper-content blockquote .quote-attribution {
  display: block;
  margin-top: 12px;
  padding-left: 20px;
  font-style: normal;
  font-size: 14.5px;
  font-weight: 600;
  color: #636363;
  letter-spacing: 0.01em;
}

/* === Chart wrapper === */
.chart-wrapper {
  margin: 36px 0 40px;
  padding: 22px 0 18px;
  background: none;
  border: none;
  border-top: 1px solid #d8d3ca;
  border-radius: 0;
  box-shadow: none;
}
.chart-wrapper .chart-figure-label {
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #737373;
  margin: 0 0 12px 0;
}
.chart-wrapper img {
  display: block;
}
.chart-wrapper .chart-source {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: #737373;
  margin: 10px 0 0 0;
  text-align: right;
}
.chart-wrapper .chart-source a {
  color: #4D52FF;
  text-decoration: none;
  border-bottom: 1px solid rgba(77, 82, 255, 0.2);
}

/* === Disclosure === */
.paper-disclosure-wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  max-width: none;
  margin: 0;
  padding: 0 var(--pg) 60px;
}
.paper-disclosure-spacer {
  display: none;
}
.paper-disclosure-content {
  grid-column: 4 / -1;
  justify-self: start;
  max-width: 840px;
  padding-top: 40px;
  padding-left: 36px;
  border-top: 1px solid #d8d3ca;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #6b6b6b;
  font-style: italic;
  margin-bottom: 48px;
}

/* === Heading anchor links === */
.paper-content h2 {
  position: relative;
}
.paper-content h2 .heading-anchor {
  position: absolute;
  left: -1.2em;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Manrope', sans-serif;
  font-size: 0.55em;
  font-weight: 600;
  color: #bbb;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.paper-content h2:first-child .heading-anchor {
  top: calc(50%);
}
.paper-content h2:hover .heading-anchor {
  opacity: 1;
}
.paper-content h2 .heading-anchor:hover {
  color: #4D52FF;
  text-decoration: none;
}
.heading-anchor-copied {
  position: absolute;
  left: -2em;
  top: calc(50% + 1.6em);
  transform: translateY(-50%);
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #555;
  background: #e8e6e2;
  border-radius: 100px;
  padding: 3px 9px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}
.heading-anchor-copied.show {
  opacity: 1;
}

/* === PDF download button (outlined pill) === */
body.paper-page .paper-meta-bar a.pdf-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 100px;
  padding: 8px 20px 8px 16px;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
body.paper-page .paper-meta-bar a.pdf-download-btn:hover {
  background: rgba(255,255,255,0.25);
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}
.pdf-download-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* === PDF note box === */
.paper-pdf-note {
  margin: 0 0 28px 0;
  padding: 20px 24px;
  background: #f3f1ed;
  border: 1px solid #e4e0d9;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}
.paper-pdf-note a {
  color: #4D52FF;
  text-decoration: underline;
  text-decoration-color: rgba(77, 82, 255, 0.3);
}
.paper-pdf-note a:hover {
  text-decoration-color: rgba(77, 82, 255, 0.8);
}

/* === Responsive === */
@media (max-width: 920px) {
  .paper-toc {
    display: none;
  }
  .author-text {
    width: auto;   /* don't force the fixed alignment width on small screens */
    flex-shrink: 1;
    min-width: 0;  /* allow the name/credit to wrap instead of forcing overflow */
  }
  .paper-layout,
  .exec-summary,
  .exec-summary-inner,
  .paper-disclosure-wrapper {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .exec-summary-label,
  .exec-summary-columns {
    grid-column: 1 / -1;
  }
  .paper-layout {
    padding: 28px var(--pg) 60px;
  }
  .exec-summary-inner,
  .paper-content,
  .paper-disclosure-content {
    grid-column: 1 / -1;
  }
  .exec-summary-inner {
    width: auto;        /* full width on mobile */
    max-width: none;
  }
  .paper-content {
    max-width: none;
    padding-left: 0;
    border-left: none;
    min-width: 0;
    /* width:100% pins the grid item to the column. Without it, a block child that is
       itself width:100% (the responsive tables below) creates a circular auto-width
       that resolves to the table's content width and overflows the viewport. */
    width: 100%;
  }
  /* Data reports embed wide tables, figures, charts and grids. In the
     single-column mobile layout they must not stretch the content column past
     the viewport — cap them at the column width and let oversized ones scroll
     within it. Harmless on prose papers (their content already fits). */
  .paper-content img {
    max-width: 100%;
    height: auto;
  }
  /* Chart SVGs use a viewBox with no width/height attrs, so max-width has nothing
     to cap — width:100% lets the viewBox scale them down to the column. */
  .paper-content svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
  .paper-content figure,
  .paper-content .day-grid,
  .paper-content .scenario-grid,
  .paper-content [class*="chart"] {
    max-width: 100%;
    overflow-x: auto;
  }
  .paper-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  .paper-title-block {
    padding: 40px 20px 32px;
  }
  .paper-title-block h1 {
    font-size: 37px;
  }
  .paper-title-block .paper-subtitle {
    font-size: 20px;
  }
  .back-to-top {
    bottom: 20px;
    right: 20px;
  }
  .paper-disclosure-wrapper {
    padding: 0 var(--pg) 48px;
  }
  .paper-disclosure-content {
    max-width: none;
    padding-left: 0;
  }
}
@media (max-width: 720px) {
  .paper-title-block {
    padding: 28px 16px 24px;
  }
  .paper-title-block h1 {
    font-size: 29px;
  }
  .paper-title-block .paper-subtitle {
    font-size: 18px;
  }
  .paper-layout {
    padding: 0 16px 48px;
  }
  .paper-content {
    font-size: 17px;
  }
  .paper-content h2 {
    font-size: 24px;
    margin-top: 40px;
  }
  .paper-content h3 {
    font-size: 20px;
  }
  .paper-content p,
  .paper-content ul li,
  .paper-content ol li {
    font-size: 17px;
  }
  .paper-disclosure-wrapper {
    padding: 0 16px 40px;
  }
  .author-logo.logo-caspr { height: 40px; }
  .author-logo.logo-ifp { height: 32px; }
  .paper-meta-bar {
    margin-bottom: 12px;
    padding: 24px var(--pg) 20px;   /* base is already full-bleed; just tighten vertical padding */
  }
  .paper-meta {
    flex-direction: column;      /* stack authors above the download buttons */
    align-items: stretch;
    gap: 22px;
    max-width: none;             /* full width when stacked */
  }
  .paper-meta-note {
    max-width: none;
  }
  .paper-meta-actions {
    align-items: flex-start;     /* left-align the buttons when stacked */
  }
}

/* === HILT-specific content blocks (Q&A, trial candidates). Only the HILT paper
   uses these; harmless on papers that don't. Kept here so the shared sheet
   covers every policy-paper content type. === */
.paper-content .qa-item {
  margin: 0 0 28px 0;
}
.paper-content .qa-item .qa-question {
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 6px 0;
  font-size: 17.5px;
  line-height: 1.55;
}
.paper-content .qa-item .qa-answer {
  margin: 0;
}
.trial-refs {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #737373;
}
.trial-refs a {
  color: #4D52FF;
  text-decoration: none;
  border-bottom: 1px solid rgba(77, 82, 255, 0.15);
  font-size: 12.5px;
}
.trial-refs a:hover {
  border-bottom-color: rgba(77, 82, 255, 0.5);
}
.paper-content .trial-candidate {
  margin: 0 0 24px 0;
  padding: 0 0 20px 0;
  border-bottom: 1px solid #eae7e2;
}
.paper-content .trial-candidate:last-child {
  border-bottom: none;
}
.paper-content .trial-candidate .trial-title {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 6px 0;
}
.paper-content .trial-candidate p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: #444;
}