/* ============================================================================
   working-paper.css: long-form reading treatment.
   Loads on top of tokens.css.

   PORTED FROM the Claude Design project, `templates/working-paper/
   WorkingPaper.dc.html`, whose styles are inline. Values are transcribed
   verbatim; only the delivery changes (inline attributes to classes).

   Notes on fidelity:
   - The template carries its own slightly cooler hairline (#E3E8EF) and body
     ink (#1B2A3D) than the foundation tokens (#D4DCE6 / #1A2535). The
     template wins inside the paper sheet, so those are scoped here rather
     than changed globally.
   - Measure follows the template's "comfortable" step, 800px. The template's
     own body copy states this is the width that holds roughly 72 characters
     per line at 18px.
   - The RESPONSIVE and figure-link sections at the foot are new; the template
     is a fixed-width preview.
   ============================================================================ */

.wp-page {
  --wp-ink:      #1B2A3D;
  --wp-hairline: #E3E8EF;
  --wp-quote-bg: #EEF3FA;
  --wp-cite:     #B9CBE4;

  padding: 72px 24px 120px;
  font-family: var(--font-sans);
  color: var(--wp-ink);
  background: var(--paper);
}

.wp-sheet {
  max-width: 800px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--wp-hairline);
  border-radius: 6px;
  padding: 72px 76px 88px;
}

/* ---- Masthead ------------------------------------------------------------- */

.wp-header { margin-bottom: 56px; }

.wp-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .09em;
  color: var(--slate);
  margin: 0 0 26px;
}

.wp-title {
  font-size: 42px;
  font-weight: var(--w-medium);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--gov-navy);
  margin: 0;
  text-wrap: pretty;
}

.wp-deck {
  font-size: 19px;
  line-height: 1.5;
  color: var(--slate);
  margin: 20px 0 0;
  max-width: 52ch;
  text-wrap: pretty;
}

.wp-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: baseline;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 2px solid var(--gov-navy);
}
.wp-byline .who { font-size: 15px; font-weight: var(--w-medium); color: var(--gov-navy); }
.wp-byline a { font-family: var(--font-mono); font-size: 12px; text-decoration: none; }
.wp-byline .when { font-family: var(--font-mono); font-size: 12px; color: var(--slate); margin-left: auto; }

/* ---- Lede ----------------------------------------------------------------- */

.wp-lede {
  font-size: 21px;
  line-height: 1.6;
  color: var(--gov-navy);
  margin: 0 0 44px;
  text-wrap: pretty;
}

/* ---- Sections ------------------------------------------------------------- */

.wp-section { margin-bottom: 52px; scroll-margin-top: 24px; }

.wp-section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.wp-section-head .num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: var(--w-medium);
  color: var(--signal-blue);
  flex: none;
}
.wp-section-head h2 {
  font-size: 26px;
  font-weight: var(--w-medium);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--gov-navy);
  margin: 0;
  text-wrap: pretty;
}

.wp-sheet h3 {
  font-size: 18px;
  font-weight: var(--w-medium);
  color: var(--gov-navy);
  margin: 32px 0 12px;
}

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

.wp-sheet p {
  font-size: 18px;
  line-height: 1.72;
  margin: 0 0 20px;
  text-wrap: pretty;
}
.wp-sheet p:last-child { margin-bottom: 0; }

/* Inline emphasis is medium weight in navy, never bold. */
.wp-sheet b,
.wp-sheet strong {
  font-weight: var(--w-medium);
  color: var(--gov-navy);
}

.wp-sheet ul { margin: 0 0 20px; padding: 0; list-style: none; }
.wp-sheet ul li {
  font-size: 18px;
  line-height: 1.7;
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
  text-wrap: pretty;
}
.wp-sheet ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 5px; height: 5px;
  background: var(--signal-blue);
  border-radius: 1px;
  display: block;
}

/* ---- Pull quote: the one place serif appears. No quotation marks. --------- */

.wp-sheet blockquote {
  margin: 34px 0;
  background: var(--wp-quote-bg);
  border-radius: 5px;
  padding: 22px 26px;
}
.wp-sheet blockquote p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--wp-ink);
  margin: 0;
}

/* ---- Callout -------------------------------------------------------------- */

.wp-callout { border-left: 2px solid var(--gov-navy); padding: 2px 0 2px 22px; margin: 0 0 20px; }
.wp-callout .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; color: var(--slate); margin-bottom: 8px; }
.wp-callout p { font-size: 17px; line-height: 1.65; color: var(--gov-navy); margin: 0; }

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

.wp-figure {
  margin: 0 -38px 12px;
  background: var(--card);
  border: 1px solid var(--wp-hairline);
  border-radius: 6px;
  padding: 14px;
}
.wp-figure img { display: block; width: 100%; height: auto; border-radius: 3px; }
.wp-figure a { display: block; border-radius: 3px; }

.wp-figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--slate);
  margin: 0 -38px 34px;
  line-height: 1.5;
}
/* New: dense matrix figures are unreadable inline on small screens. */
.wp-figcaption a { text-decoration: none; border-bottom: 1px solid var(--wp-cite); }

/* ---- Code / method blocks ------------------------------------------------- */

.wp-sheet pre {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--wp-ink);
  background: var(--paper);
  border: 1px solid var(--wp-hairline);
  border-radius: 5px;
  padding: 20px 22px;
  margin: 0 0 24px;
  overflow-x: auto;
}

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

.wp-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.wp-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-regular);
  letter-spacing: .07em;
  color: var(--slate);
  padding: 0 12px 10px 0;
  border-bottom: 2px solid var(--gov-navy);
}
.wp-table td { font-size: 16px; color: var(--gov-navy); padding: 13px 12px 13px 0; border-bottom: 1px solid var(--wp-hairline); }
.wp-table td.muted { color: var(--slate); }
.wp-table td.num { font-family: var(--font-mono); font-size: 15px; text-align: right; }

/* ---- Citations and notes -------------------------------------------------- */

.wp-sheet a.cite { text-decoration: none; border-bottom: 1px solid var(--wp-cite); }
.wp-sheet sup { font-family: var(--font-mono); font-size: 11px; color: var(--signal-blue); padding-left: 2px; }

.wp-notes { border-top: 2px solid var(--gov-navy); padding-top: 26px; }
.wp-notes .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; color: var(--slate); margin-bottom: 20px; }
.wp-notes ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.wp-notes li { display: flex; gap: 14px; font-size: 15px; line-height: 1.6; color: var(--slate); }
.wp-notes li .n { font-family: var(--font-mono); font-size: 12px; color: var(--signal-blue); flex: none; width: 16px; }

/* ---- Sheet footer --------------------------------------------------------- */

.wp-foot {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--wp-hairline);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wp-foot span, .wp-foot a { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: var(--slate); }

/* ---- Actions bar (new: HTML paper needs navigation the print template does not) */

.wp-actions {
  max-width: 800px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.wp-actions a.back { font-size: 14px; text-decoration: none; }
.wp-actions a.back:hover { text-decoration: underline; }

/* ============================================================================
   RESPONSIVE: new in this port.
   ============================================================================ */

@media (max-width: 900px) {
  .wp-page { padding: 40px 16px 80px; }
  .wp-sheet { padding: 44px 36px 56px; }
  .wp-figure, .wp-figcaption { margin-inline: -18px; }
  .wp-title { font-size: 34px; }
  .wp-lede { font-size: 19px; }
}

@media (max-width: 560px) {
  .wp-page { padding: 24px 0 64px; }
  .wp-sheet { padding: 32px 20px 44px; border-left: 0; border-right: 0; border-radius: 0; }
  .wp-figure, .wp-figcaption { margin-inline: 0; }
  .wp-title { font-size: 28px; }
  .wp-deck { font-size: 17px; }
  .wp-lede { font-size: 18px; }
  .wp-sheet p, .wp-sheet ul li { font-size: 17px; }
  .wp-section-head h2 { font-size: 22px; }
  .wp-byline .when { margin-left: 0; }
  .wp-actions { padding: 0 20px; }
}

/* ============================================================================
   PRINT: from the template's @page rules.
   ============================================================================ */

@page { size: letter; margin: 0.9in 0.85in; }

@media print {
  body { background: #fff; }
  .wp-page { padding: 0 !important; background: #fff !important; }
  .wp-sheet { border: 0 !important; padding: 0 !important; background: #fff !important; max-width: none; }
  .wp-actions, .skip-link, .cl-nav { display: none !important; }
  .wp-figure, .wp-figcaption { margin-inline: 0; }
  h2, h3, figure, table, blockquote { break-inside: avoid; page-break-inside: avoid; }
  h2 { break-after: avoid; }
}