/* ============================================================
   report.css
   Long-form report pages. Loaded only where front matter sets
   `extraCss: report`.

   Supplies the primitives a source-heavy report needs and that
   neither brand.css nor main.css provides: data tables, a sticky
   table of contents, footnote markers, a numbered source list,
   and print rules.

   Consumes semantic tokens only. Redefines no --rg-* and no
   --status-* token, so it adapts with the layer scope. Ember is
   used for rules, borders and fills, never as text: it is 3.8:1
   on cream and fails as a text colour.
   ============================================================ */

.report {
  /* Prose runs the full container width so text blocks, headings, callouts and
     tables all share one left and right edge. A reading measure would set the
     text in a narrower column than the tables beside it, which reads as a
     layout accident in a document that is mostly tables and figures. */
  --report-measure: none;
  --report-rule: rgba(10, 17, 40, 0.08);
  --report-rule-soft: rgba(10, 17, 40, 0.05);
  /* height of the site nav, which this bar sits beneath */
  --report-nav-h: 86px;
}

/* ---------- masthead ---------- */
/* set vertical padding only: the shorthand would zero out the horizontal
   padding .wrap supplies, and content would sit flush to the viewport edge */
.report-mast {
  padding-top: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--report-rule);
}
.report-mast .gradient-bar {
  max-width: 180px;
  margin-bottom: 1.75rem;
}
.report-mast h1 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.report-mast .lead {
  max-width: none;
  margin-bottom: 2rem;
}
.mast-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}
.mast-meta b {
  color: var(--rg-blue);
  font-weight: 500;
}

/* ---------- section rhythm ---------- */
.report-section {
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
  border-top: 1px solid var(--report-rule);
}
.report-section:first-of-type {
  border-top: none;
}
.report-section > h2 {
  font-size: clamp(1.45rem, 2.8vw, 1.9rem);
  margin: 0 0 1.5rem;
  max-width: none;
  text-wrap: balance;
}
.report-section h3 {
  margin: 2.5rem 0 0.85rem;
  max-width: none;
  text-wrap: balance;
}
/* prose spans the container, matching the tables and headings beside it */
.report-section > p,
.report-section > ul,
.report-section > ol:not(.srcs) {
  max-width: var(--report-measure);
}
.report-section ul,
.report-section ol:not(.srcs):not(.nav-list) {
  padding-left: 1.2em;
  margin: 0 0 1.1em;
}
.report-section li {
  margin-bottom: 0.55em;
}
.report-section li::marker {
  color: var(--text-muted);
}
.report-section .lead {
  max-width: var(--report-measure);
}
.report code {
  font-family: var(--font-mono);
  background: var(--rg-paper);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.85em;
}
/* callout labels are already at the 12px floor; code inside must not shrink */
.report .lbl code {
  font-size: 1em;
  background: none;
  padding: 0;
}
.report del {
  opacity: 0.6;
}
/* worked arithmetic: alignment carries meaning, so it scrolls rather than wraps */
.report pre {
  background: var(--rg-blue);
  color: var(--rg-cream);
  padding: 1.1rem 1.25rem;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1.25rem 0 1.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
}
.report pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}
.report blockquote {
  margin: 1.5rem 0;
  padding: 0.1rem 0 0.1rem 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--rg-slate);
}
.report blockquote p:last-child {
  margin-bottom: 0;
}
.report hr {
  border: 0;
  border-top: 1px solid var(--report-rule);
  margin: 2.5rem 0;
}
.report a {
  color: var(--rg-red);
  text-underline-offset: 2px;
}
.report a:focus-visible,
.report button:focus-visible {
  outline: 2px solid var(--rg-red);
  outline-offset: 3px;
  border-radius: 2px;
}
/* bare URLs and long tokens break rather than widen the page */
.report p,
.report li,
.report td,
.report th,
.report figcaption {
  overflow-wrap: break-word;
}

/* ---------- callout tuning for long-form use ---------- */
.report .callout {
  max-width: var(--report-measure);
  margin: 1.75rem 0;
}
.report .callout p {
  font-size: 0.95rem;
  margin-bottom: 0.7rem;
}
.report .callout p:last-child {
  margin-bottom: 0;
}
.report .callout table {
  min-width: 0;
  margin: 0.9rem 0 0.25rem;
  font-size: 0.9rem;
}

/* ---------- tables ---------- */
/* .tw is the scroll container: wide tables scroll inside their own box
   so the page body never scrolls sideways. */
.tw {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 1.5rem 0 2rem;
}
.report table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 0.95rem;
}
.report th,
.report td {
  text-align: left;
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--report-rule-soft);
  vertical-align: top;
  line-height: 1.45;
}
.report th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.55rem;
}
.report th strong {
  font-weight: 500;
}
.report tbody tr:nth-child(even) {
  background: rgba(10, 17, 40, 0.025);
}
.report td:first-child {
  font-weight: 500;
}
.report tr:last-child td {
  border-bottom: none;
}
.report td.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 0.85rem;
}
/* table and figure reference numbers */
.tbl-n,
.fig-n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tbl-n {
  margin: 1.75rem 0 0.35rem;
}
.fig-n {
  display: block;
  margin-bottom: 0.3rem;
}
.sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
}

/* ---------- figures ---------- */
.report figure.diagram {
  margin: 2.25rem 0;
}
.report figure.diagram svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  color: var(--rg-blue);
}
.fig-t {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}
.report figcaption {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--rg-slate);
  margin-top: 1.1rem;
}
.report figcaption b {
  color: var(--rg-blue);
  font-weight: 600;
}

/* ---------- footnotes and sources ---------- */
.fnref {
  text-decoration: none;
  font-weight: 600;
  color: var(--rg-red);
  padding: 0 1px;
}
/* footnote markers are tap targets, so they hold the 12px floor rather than
   shrinking the way a decorative superscript would */
.fnref sup {
  font-size: 0.75rem;
}
.fnback {
  text-decoration: none;
  opacity: 0.55;
  margin-right: 4px;
}
ol.srcs {
  max-width: var(--report-measure);
  margin: 0 0 1.5rem;
  padding-left: 1.6rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
ol.srcs li {
  margin-bottom: 0.65rem;
}
ol.srcs a[target] {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  opacity: 0.75;
}
.srcs-noweb {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  opacity: 0.6;
  font-style: italic;
}

/* ---------- about the author ---------- */
.author {
  max-width: var(--report-measure);
  padding: 1.5rem 0 0.25rem;
}

/* ---------- sticky contents nav ---------- */
/* Sits below the site nav, which is sticky at top:0 with z-index 50. */
.report .navbar {
  position: sticky;
  top: var(--report-nav-h);
  z-index: 40;
  background: rgba(247, 244, 239, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--report-rule);
  margin-bottom: 0;
}
.navbar-in {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 1.75rem;
  max-width: var(--max-width);
  margin: 0 auto;
}
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rg-cream);
  background: var(--rg-blue);
  border: 0;
  border-radius: 4px;
  padding: 0.45rem 0.8rem;
  flex: none;
}
.nav-btn:hover {
  background: var(--rg-red);
}
.nav-ico {
  width: 13px;
  height: 9px;
  flex: none;
  background:
    linear-gradient(currentColor, currentColor) top / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 1px no-repeat;
}
.nav-here {
  font-size: 0.82rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.nav-top {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}
.report .nav-top:hover {
  color: var(--rg-red);
}
.nav-prog {
  height: 2px;
  background: transparent;
}
.nav-prog i {
  display: block;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gradient-a) 0%, var(--gradient-b) 100%);
  transition: width 0.1s linear;
}
.nav-panel {
  max-height: min(70vh, 620px);
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 1px solid var(--report-rule);
  background: var(--rg-cream);
}
.nav-list {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.1rem 1.75rem 1.5rem;
  list-style: none;
  columns: 2;
  column-gap: 2.5rem;
}
.nav-list li {
  break-inside: avoid;
}
.nav-list ul {
  list-style: none;
  margin: 0.15rem 0 0.75rem;
  padding: 0;
}
.report .nav-list a {
  text-decoration: none;
  display: block;
  border-bottom: none;
}
.n2 > a {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--rg-blue);
  line-height: 1.32;
  padding: 0.25rem 0 0.2rem;
}
.report .n2 > a:hover {
  color: var(--rg-red);
}
.n3 a {
  font-size: 0.82rem;
  color: var(--rg-slate);
  line-height: 1.4;
  padding: 0.2rem 0 0.2rem 1.75rem;
  border-left: 1px solid var(--report-rule);
  margin-left: 0.45rem;
}
.report .n3 a:hover {
  color: var(--rg-red);
  border-left-color: var(--accent);
}
.report .nav-list a.on {
  color: var(--rg-red);
}
/* anchors clear both sticky bars */
.report section[id],
.report h3[id] {
  scroll-margin-top: calc(var(--report-nav-h) + 64px);
}

@media (max-width: 720px) {
  .nav-list {
    columns: 1;
  }
  .nav-here {
    display: none;
  }
  .navbar-in,
  .nav-list {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .report table {
    min-width: 560px;
  }
  ol.srcs {
    padding-left: 1.25rem;
  }
  ol.srcs a[target] {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-prog i {
    transition: none;
  }
}

/* ---------- print ---------- */
/* This is a council-facing document and will be printed. */
@media print {
  @page {
    size: letter;
    margin: 0.6in 0.55in;
  }
  .report .navbar,
  .site-nav,
  .site-footer {
    display: none;
  }
  body,
  .report-section {
    background: #fff;
  }
  .report-section {
    padding: 0.5rem 0;
    border-top: none;
    break-inside: auto;
  }
  .report-mast h1 {
    font-size: 26pt;
  }
  .report-section > h2 {
    font-size: 15pt;
    break-after: avoid;
  }
  .report-section h3,
  .fig-t,
  .tbl-n {
    break-after: avoid;
  }
  .report figure,
  .report .callout,
  .report tr,
  .report li {
    break-inside: avoid;
  }
  .tw {
    overflow: visible;
  }
  .report table {
    font-size: 8.5pt;
  }
  .report figure.diagram svg {
    max-height: 2.6in;
  }
  .report a {
    color: inherit;
    text-decoration: none;
  }
  ol.srcs {
    font-size: 8.5pt;
  }
  ol.srcs a[target] {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}