/* === Site tokens ============================================================
   Defined here because every page's `css:` list includes styles.css, so these
   resolve everywhere. Two of these exist because the refinement CSS originally
   referenced Bootstrap variables that do not mean what they look like:
     --bs-teal       is Bootstrap's own #20c997 (bright mint), NOT the site teal
     --bs-font-serif does not exist in Quarto's Bootstrap build at all
   ========================================================================= */

:root {
  --site-serif: Newsreader, Georgia, "Times New Roman", serif;
  --site-accent-2: #1f5f5b;   /* matches $accent-2 in assets/theme-light.scss */
}

body.quarto-dark {
  --site-accent-2: #6fbfae;   /* matches $accent-2 in assets/theme-dark.scss */
}

/* Project-specific overrides.
   Theme-level styling lives in assets/theme-light.scss and assets/theme-dark.scss —
   edit those for colors, fonts, and components. Use this file for one-off tweaks. */

.cell-output-display img {
  border-radius: 4px;
}

/* --- Manuscript pages ------------------------------------------------------
   The body of a manuscript page is the author's text verbatim, so the styling
   carries the structure that Word carried with its own styles: a title block,
   and captions that sit apart from body prose. */

.title-page {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--bs-secondary-color, #5c6672);
  border-left: 2px solid var(--bs-border-color, #e3e1dc);
  padding-left: 1.1rem;
  margin: 0 0 2.4rem;
}
.title-page p { max-width: none; text-align: left; }

.figure-caption,
.table-caption {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--bs-secondary-color, #5c6672);
}
.figure-caption { margin: 0.5rem 0 2.2rem; }
.table-caption  { margin: 2.2rem 0 0.5rem; }
.figure-caption p,
.table-caption p { max-width: none; text-align: left; }

/* Wide manuscript tables scroll rather than break the page. */
main table { font-size: 0.86rem; }
main .table-responsive, main table { display: block; overflow-x: auto; max-width: 100%; }

/* --- Recolourable PCA figure ---------------------------------------------- */
.pca-toggle { margin: 1.6rem 0 0.4rem; }
.pca-toggle > input { position: absolute; opacity: 0; pointer-events: none; }
.pca-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.pca-tabs label {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.01em;
  padding: 0.34rem 0.8rem; border: 1px solid var(--bs-border-color, #e3e1dc);
  border-radius: 999px; cursor: pointer; user-select: none;
  color: var(--bs-secondary-color, #5c6672);
  transition: border-color 150ms ease, color 150ms ease;
}
.pca-tabs label:hover { color: var(--bs-link-color, #8a2f2f); }
.pca-stack > .view { display: none; }
#pca-view-cluster:checked ~ .pca-stack > .v-cluster,
#pca-view-vendor:checked  ~ .pca-stack > .v-vendor { display: block; }
#pca-view-cluster:checked ~ .pca-tabs label[for="pca-view-cluster"],
#pca-view-vendor:checked  ~ .pca-tabs label[for="pca-view-vendor"] {
  border-color: var(--bs-link-color, #8a2f2f);
  color: var(--bs-link-color, #8a2f2f);
}
.pca-stack img { width: 100%; height: auto; }