@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400&display=swap");

:root {
  --primary-font: "Noto Sans", sans-serif;
  --title-font: "Lora", serif;
  --primary-color: #212529;
  --accent-primary: #2980b9;
  --accent-secondary: #566573;
  --background-color: #fcfcfc;
  --link-color: var(--accent-primary);
  --box-bg-color: #f8f9fa;
  --box-border-color: #e9ecef;
  --separator-color: #dee2e6;
  --header-bg-color: #2c3e50;
  --header-text-color: #ffffff;
  --header-text-subtle-color: rgba(255, 255, 255, 0.8);
  --line-height: 1.6;
  --font-weight: 300;
  --font-weight-bold: 500;
  --heading-size-increment: 0.3em;
  --content-max-width: 68em;
  --content-padding: 2em;
}
@media (max-width: 900px) {
  :root {
    --heading-size-increment: 0.2em;
    --content-padding: 1.5em;
  }
}

/* BODY & TYPOGRAPHY */
body {
  font-family: var(--primary-font);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  font-size: 17px;
  color: var(--primary-color);
  background-color: var(--background-color);
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
}

/* iPhone Landscape Safe Area */
@media (orientation: landscape) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

svg text {
  font-family: var(--primary-font);
  font-weight: var(--font-weight);
  fill: var(--primary-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--title-font);
  font-weight: 400;
  line-height: 1.3;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

h2 {
  font-size: calc(1em + var(--heading-size-increment) * 3);
  color: var(--accent-primary);
}

h3 {
  font-size: calc(1em + var(--heading-size-increment) * 2);
  color: var(--accent-secondary);
}

h4 {
  font-size: calc(1em + var(--heading-size-increment) * 1);
  color: var(--accent-secondary);
}

strong {
  color: var(--accent-secondary);
  font-weight: var(--font-weight-bold);
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* LAYOUT SECTIONS */

/* Report Header */
.report-header {
  display: flex;
  flex-direction: column;
  padding: 4em 1em 8em 1em;
  min-height: 40vh;
  justify-content: center;
  align-items: center;
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
  text-align: center;
}

.report-header .report-label {
  font-size: 1.2em;
  color: var(--header-text-color);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.report-header .report-title {
  font-family: var(--title-font);
  color: var(--header-text-color);
  font-size: calc(1em + var(--heading-size-increment) * 8);
  max-width: 18em;
  font-weight: 400;
  margin: 0.2em 0;
}

.report-header .report-lead {
  font-size: 1.25em;
  color: var(--header-text-subtle-color);
  max-width: 42em;
  margin: 0 auto;
  opacity: 0.9;
}

/* Main Content */
.main-content-wrapper {
  position: relative;
}

.main-content {
  position: relative;
  display: grid;
  grid-template-columns: 18em 1fr;
  align-items: start;
  max-width: var(--content-max-width);
  margin: -5em auto 0 auto;
  border-radius: 1em;
  background-color: var(--background-color);
}

.main-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 70vh;
  z-index: -1;
  box-shadow: 0 -2em 3em -1em rgba(0, 0, 0, 0.15);
  border-radius: 1em 1em 100% 100%;
}

.toc {
  position: sticky;
  top: 2em;
  max-height: calc(100vh - 4em);
  overflow-y: auto;
  padding: var(--content-padding);
  padding-top: 0;
}

.toc h2 {
  font-size: 1em;
  font-family: var(--primary-font);
  font-weight: var(--font-weight-bold);
  color: var(--accent-secondary);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 1em 0;
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc li a {
  display: block;
  padding: 0.3em 0.75em;
  color: var(--accent-secondary);
  font-size: 0.9em;
  text-decoration: none;
  border-left: 2px solid transparent;
}

.toc li a:hover {
  background-color: var(--box-bg-color);
}

.toc li a.active {
  color: var(--accent-primary);
  border-left-color: var(--accent-primary);
}

.toc .toc-level-2 {
  padding-left: 1em;
}

.toc .toc-level-3 {
  padding-left: 2em;
}

.report-body {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  padding: var(--content-padding);
  padding-top: 0;
}

.report-body h2:first-of-type {
  margin-top: 0;
}

.report-body ul {
  list-style: none;
  padding-left: 1em;
}

.report-body ul li {
  position: relative;
  padding-left: 0em;
  margin-bottom: 0.5em;
}

.report-body ul li::before {
  content: "\2022";
  color: var(--accent-secondary);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  position: absolute;
  left: 0;
}

ul.main-findings {
  padding-left: 1em;
}

/* Summary findings read as a list, not a deck of cards. A white panel with a
   border, a shadow and a hover-lift is generic app styling; the bold lead-in
   already marks where each finding starts. */
ul.main-findings li {
  display: list-item;
  margin-bottom: 1em;
}

/* Each finding links to the section that develops it, but the link wraps the
   whole paragraph — so the default hover underline would run across every line
   of it. Only the bold lead-in reacts, which reads as a heading you can click
   rather than a wall of underlined prose. */
ul.main-findings li a,
ul.main-findings li a:hover {
  color: inherit;
  text-decoration: none;
}

ul.main-findings li strong {
  color: var(--accent-secondary);
  font-weight: 600;
}

ul.main-findings li:hover strong {
  color: var(--link-color);
  text-decoration: underline;
}

ul.main-findings li br {
  display: none;
}

ul.main-findings li sup {
  display: inline-block;
}

.report-body img,
.report-body svg {
  box-sizing: border-box;
  padding: 1em;
  width: 100%;
  height: auto;
  display: block;
  margin: 2em auto;

  background-color: white;
  border: 1px solid var(--separator-color);
  border-radius: 0.5em;
  box-shadow: 0 0.5em 1em -0.5em rgba(0, 0, 0, 0.1);
}

.meta-block {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1em;
  grid-column: 1 / -1;
  padding: var(--content-padding);
  margin-bottom: var(--content-padding);
  font-size: 0.8em;
  color: var(--accent-secondary);
  border-bottom: 1px solid var(--separator-color);
}

.meta-item {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.25em;
}

.meta-value {
  color: var(--primary-color);
}

.meta-links {
  display: flex;
  flex-direction: column;
}

.meta-link {
  color: var(--link-color);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
}

.meta-link:hover {
  text-decoration: underline;
}

/* GENERIC COMPONENTS */

.hero-visual-slider {
  grid-column: 1 / -1;
  position: relative;
  padding: var(--content-padding);
  border: 1px solid var(--separator-color);
  border-radius: 1em;
}

.hero-visual-slider img {
  box-sizing: border-box;
  width: 100%;
}

.hero-visual-slider .slides {
  position: relative;
  overflow: hidden;
  /* Every hero chart is drawn 720x432, so reserving that ratio lets the slides
     stack without the panel changing height as one fades into the next. */
  aspect-ratio: 720 / 432;
}

/* Stacked rather than swapped, so one can fade out while the next fades in.
   `visibility` keeps the inactive slides out of the tab order and away from
   screen readers, which opacity alone would not do; it is delayed by the
   length of the fade so the outgoing slide stays visible while it fades. */
.hero-visual-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0s linear 0.4s;
}

.hero-visual-slider .slide.active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s ease,
    visibility 0s;
}

.hero-visual-slider .slide img,
.hero-visual-slider .slide svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual-slider .slide,
  .hero-visual-slider .slide.active {
    transition: none;
  }
}

.hero-visual-slider .slider-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
.hero-visual-slider .slider-controls > div {
  flex: 0 0 auto;
  min-width: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-visual-slider .arrow {
  font-size: 1.5em;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  /* A button centres its text horizontally but leaves it on the baseline, so
     the arrow sat low in the circle. */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* Flex centres the glyph's box, but the arrow's ink sits below the centre of
     that box, leaving it visibly low. Trimming the bottom of the content area
     lifts it onto the optical centre. */
  box-sizing: border-box;
  padding-bottom: 3px;

  background: none;
  border: none;
  cursor: pointer;
  color: var(--link-color);
  border: 1px solid var(--separator-color);
  border-radius: 50%;
}
.hero-visual-slider .arrow:hover {
  color: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

.hero-visual-slider .dots {
  display: flex;
  align-items: center;
}

.hero-visual-slider .dot {
  background-color: var(--accent-secondary);
  opacity: 0.5;
  border: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.hero-visual-slider .dot:hover {
  background-color: var(--accent-primary);
}
.hero-visual-slider .dot.active {
  opacity: 1;
}

.footnotes {
  font-size: 0.9em;
  border-top: 1px solid var(--separator-color);
  padding-top: 1em;
  margin-top: 2em;
}

.footnote-ref {
  vertical-align: super;
  font-size: 0.8em;
}

.footnotes li p {
  display: inline;
}

.footnote-backref {
  font-size: 0.8em;
  text-decoration: none;
  margin-left: 0.5em;
}

.tooltip {
  display: inline-block;
  /* The tooltip is positioned against its marker; report-interactivity.js then
     nudges it back inside the text column when a marker near the right margin
     would otherwise push it past the edge, where `overflow: hidden` clips it.
     Neither anchor alone works: against the column it drifts away from its
     marker, against the marker it clips. */
  position: relative;
}

.tooltip .tooltiptext {
  pointer-events: none;
  box-sizing: border-box;
  position: absolute;
  z-index: 1;
  margin-top: 2.5em;
  left: 0;
  right: auto;
  width: max-content;
  max-width: 34em;

  font-size: 0.8rem;
  font-weight: normal;
  background-color: var(--header-bg-color);
  color: var(--header-text-color);
  border-radius: 6px;
  padding: 0.5em;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  pointer-events: all;
  opacity: 1;
}

.reference-list {
  list-style-type: none;
  padding-left: 0;
}

.reference-list li {
  margin-bottom: 0.5em;
}

hr {
  border: 0;
  height: 1px;
  background: var(--separator-color);
  margin: 1em 0;
}

.consideration-list {
  background-color: var(--box-bg-color);
  padding: 1.5em;
  margin: 2em 0;
  border-left: 5px solid var(--box-border-color);
}

.consideration-list h4 {
  margin: 0 0 1em 0;
}

.references-section {
  font-size: 0.9em;
  border-top: 1px solid var(--separator-color);
  padding-top: 1em;
  margin-top: 2em;
}

.references-section h2 {
  margin-top: 0;
}

.references-section p {
  margin-bottom: 0.5em;
}

.back-to-top-button {
  position: fixed;
  bottom: var(--content-padding);
  right: var(--content-padding);
  font-size: 1.5em;
  width: 2em;
  height: 2em;
  background-color: #fff;
  color: var(--link-color);
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  transform: translateY(100px);
  transition:
    opacity 0.25s,
    transform 0.25s;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
}
.back-to-top-button:hover {
  color: var(--accent-secondary);
  text-decoration: none;
}
.back-to-top-button.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* MOBILE & INTERACTIVITY */

.menu-toggle {
  display: none;
  position: fixed;
  top: calc(4em + 8vh);
  right: 0;
  z-index: 1002;
  background: var(--background-color);
  border: 1px solid var(--separator-color);
  border-right: none;
  border-radius: 24px 0 0 24px;
  padding: 0;
  cursor: pointer;
  width: 48px;
  height: 48px;
  box-shadow: 0.2em 0 0.75em -0.2em rgba(0, 0, 0, 0.3);
  align-items: center;
  justify-content: center;
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  background-color: var(--primary-color);
  height: 2px;
  width: 24px;
  transition: transform 0.3s ease;
}

.menu-icon {
  position: relative;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-icon::before {
  top: -8px;
}

.menu-icon::after {
  bottom: -8px;
}

.menu-toggle[aria-expanded="true"] .menu-icon {
  background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-icon::before {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-icon::after {
  transform: translateY(-8px) rotate(-45deg);
}

.overlay {
  display: none;
}

@media (max-width: 900px) {
  .main-content {
    grid-template-columns: 1fr;
  }

  .toc {
    position: fixed;
    top: 0;
    /* Parked off-screen with a transform rather than `right: -140%`: an offset
       puts the panel outside the viewport as a matter of layout, which widens
       the layout viewport on mobile and zooms the whole page out. A transform
       moves it without affecting layout. */
    right: 0;
    bottom: 0;
    transform: translateX(100%);
    width: calc(100% - 6em);
    max-width: 26em;
    background-color: var(--background-color);
    z-index: 1000;
    transition: transform 0.3s ease;
    padding: 2em;
  }

  .toc.active {
    transform: translateX(0);
  }

  .menu-toggle {
    display: flex;
  }

  .overlay.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  body.menu-open {
    overflow: hidden;
  }
}

/* Fix spacing for footnotes that are now inside the anchor tags */
ul.main-findings li a sup {
  margin-top: 0;
  margin-left: 0.2em; /* Small space between text and footnote */
}

/* TABLES */

.report-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 0.9em;
}

.report-body th,
.report-body td {
  padding: 0.6em 0.8em;
  text-align: left;
  border-bottom: 1px solid var(--separator-color);
}

.report-body th {
  font-weight: var(--font-weight-bold);
  color: var(--accent-secondary);
  border-bottom: 2px solid var(--separator-color);
  white-space: nowrap;
}

/* Per-column alignment comes from the Markdown separator row (`--:` for right),
   which Showdown emits as an inline style. Guessing it from column position
   right-aligns text columns whenever the first column is not the row label.
   Tabular figures apply throughout so numbers line up either way. */
.report-body td,
.report-body th {
  font-variant-numeric: tabular-nums;
}

.report-body tbody tr:hover {
  background-color: var(--box-bg-color);
}

/* A wide table must scroll inside its own box rather than widening the page. */
.report-body .table-wrapper {
  overflow-x: auto;
  margin: 2em 0;
}

.report-body .table-wrapper table {
  margin: 0;
}

/* SITE BAR */

/* Sits above the dark header band and identifies the site across reports.
   Left-aligned, sharing the left edge with the content below it. */
.site-bar {
  background: #1d2935;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-bar-inner {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.8em;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0.45em var(--content-padding);
  font-size: 0.74em;
  letter-spacing: 0.01em;
}

.site-bar a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}

.site-bar a:hover {
  color: #ffffff;
}

.site-bar .brand {
  color: rgba(255, 255, 255, 0.95);
  font-weight: var(--font-weight-bold);
  padding-right: 0.8em;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.site-bar nav a {
  margin-left: 1em;
}

.site-bar nav a.current {
  color: #ffffff;
}

@media (max-width: 900px) {
  /* Let the links fall to a second line rather than shrinking further. */
  .site-bar-inner {
    flex-wrap: wrap;
    gap: 0.4em 0.6em;
    font-size: 0.72em;
  }

  /* Once the links wrap to their own line the divider would dangle at the end
     of the first line, so drop it. */
  .site-bar .brand {
    padding-right: 0;
    border-right: none;
  }

  .site-bar nav a {
    margin-left: 0;
    margin-right: 0.9em;
  }
}

/* AUTHOR AFFILIATIONS */

/* Superscript marker after an author's name. Hovering names the institution,
   so a reader need not look down at the legend, but the legend still carries
   the information for touch and screen readers. */
.affiliation-ref {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.1em;
  color: var(--accent-secondary);
}

.affiliation-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1.25em;
  margin-top: 0.6em;
  font-size: 0.92em;
  color: var(--accent-secondary);
}

.affiliation-list sup {
  font-size: 0.8em;
  vertical-align: super;
  line-height: 0;
  margin-right: 0.3em;
}

@media (max-width: 900px) {
  .affiliation-list {
    gap: 0.2em 1em;
  }
}

/* With affiliation superscripts present, the footnote marker would otherwise
   butt up against one and read as a second affiliation number. */
.meta-value .footnote-ref {
  margin-left: 0.4em;
}

@media (max-width: 900px) {
  /* Three columns leaves each one only a few words wide on a phone, which
     wraps the author list into a narrow ragged column and squeezes the links
     against the floating menu button. Stack them instead. */
  .meta-block {
    grid-template-columns: 1fr;
    gap: 1.25em;
  }

  .meta-links {
    flex-direction: row;
    gap: 1.5em;
  }
}

/* Considerations raised in the workshop-table discussions rather than in the
   survey comments. The source document distinguishes them by colour; a left
   rule reads more clearly here and does not rely on colour alone. */
.report-body li.from-workshop-table {
  border-left: 2px solid var(--box-border-color);
  padding-left: 0.75em;
  margin-left: -0.75em;
  color: var(--accent-secondary);
}


/* CHARTS ON SMALL SCREENS */

@media (max-width: 900px) {
  /* A chart designed at 720pt renders at under half size on a phone, so its
     labels fall to about 4px. Trimming the figure's own padding gives a little
     of that back. Pulling it out past the column with negative margins gives
     more, but widens the layout viewport and zooms the whole page out, so the
     figure viewer does that job instead. */
  .report-body img,
  .report-body svg {
    padding: 0.4em;
  }
}


/* FIGURE VIEWER */

.figure-zoomable {
  cursor: zoom-in;
}

/* The overlay must never be wider than the viewport. Content that overflows the
   page widens the layout viewport on mobile, which would take this fixed
   element with it and stop it covering the screen — so the overflow is confined
   to the inner stage. */
.figure-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: hidden;
  background: #ffffff;
}

.figure-viewer[hidden] {
  display: none;
}

.figure-viewer-stage {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 3.5rem 1rem 1rem 1rem;
  box-sizing: border-box;
}

.figure-viewer-stage svg,
.figure-viewer-stage img {
  display: block;
  /* `margin: auto` centres it when it fits and lets it overflow to the right
     when it does not; flex centring would clip the overflowing edge instead. */
  margin: auto;
  width: 100%;
  max-width: 60em;
  height: auto;
  padding: 0;
  border: none;
  box-shadow: none;
  background: none;
  cursor: auto;
}

.figure-viewer-close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  z-index: 1;
  width: 2.2em;
  height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--primary-font);
  font-size: 1.4em;
  line-height: 1;
  color: var(--accent-secondary);
  background: #fff;
  border: 1px solid var(--separator-color);
  border-radius: 50%;
  cursor: pointer;
}

body.figure-viewer-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  /* On a phone the point is to see it larger than the column allows, so it is
     drawn at twice the stage width and panned. */
  .figure-viewer-stage svg,
  .figure-viewer-stage img {
    width: 200%;
    max-width: none;
    margin: 0;
  }
}