/* Shared styles for PasadoDocs-web subpages (inventor, hashes, who/*).
   Palette carried over from the app's launch splash (the hummingbird splash) so the site and the
   product are one world. Theme-aware: light by default, dark on prefers-color-scheme: dark (or a
   forced :root[data-theme="dark"]). The landing page (index.html) keeps its own inline copy of these
   tokens; this file exists so the secondary pages don't each duplicate the whole stylesheet. */
:root {
  --bg: #f4f1ea;
  --panel: #fbf9f2;
  --panel-border: rgba(26, 29, 32, 0.12);
  --ink: #1a1d20;
  --muted: #5c6356;
  --line: rgba(26, 29, 32, 0.1);
  --accent: #0b6e5d; /* contrast-safe teal for links / text on light */
  --accent-bright: #43c9b0; /* the bird's brand teal — fills, glow, accents */
  --accent-soft: rgba(11, 110, 93, 0.1);
  --violet: #6f5bd0; /* iridescent partner for teal→violet gradients */
  --btn-ink: #f7f5ef; /* text on a filled primary button */
  --hero-glow: rgba(67, 201, 176, 0.16);
  --shadow: 0 18px 48px rgba(20, 28, 26, 0.14);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1218;
    --panel: #151b23;
    --panel-border: rgba(242, 239, 230, 0.12);
    --ink: #f2efe6;
    --muted: #aab3a6;
    --line: rgba(255, 255, 255, 0.1);
    --accent: #43c9b0;
    --accent-bright: #5fd8c1;
    --accent-soft: rgba(67, 201, 176, 0.16);
    --violet: #9b86ff;
    --btn-ink: #08110e;
    --hero-glow: rgba(67, 201, 176, 0.13);
    --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"] {
  --bg: #0e1218;
  --panel: #151b23;
  --panel-border: rgba(242, 239, 230, 0.12);
  --ink: #f2efe6;
  --muted: #aab3a6;
  --line: rgba(255, 255, 255, 0.1);
  --accent: #43c9b0;
  --accent-bright: #5fd8c1;
  --accent-soft: rgba(67, 201, 176, 0.16);
  --violet: #9b86ff;
  --btn-ink: #08110e;
  --hero-glow: rgba(67, 201, 176, 0.13);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 640px at 50% -10%, var(--hero-glow) 0%, transparent 60%),
    var(--bg);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}
.wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Masthead --- */
header.site {
  padding: 28px 0 8px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
}
.brand .mark {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.brand .tag {
  font-size: 0.82rem;
  color: var(--muted);
}

/* --- Back link --- */
.backlink {
  display: inline-block;
  margin: 16px 0 0;
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: none;
}
.backlink:hover {
  text-decoration: underline;
}

/* --- Page body --- */
main.page {
  padding: 8px 0 8px;
}
.page .eyebrow {
  margin: 24px 0 8px;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.page h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.8rem, 4.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.page .lede {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 0 8px;
  text-wrap: pretty;
}

/* Provenance line — small muted note style (currently unused). */
.provenance {
  margin: 6px 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
}
.provenance a {
  color: var(--accent);
}

/* Prose card — the long-form serif reading surface (inventor, hashes). */
.prose {
  margin: 24px auto 8px;
  padding: 30px 30px 32px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.prose p,
.prose li {
  font-family: var(--serif);
  font-size: 1.03rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 16px;
}
.prose p:last-child {
  margin-bottom: 0;
}
.prose a {
  color: var(--accent);
}

/* Reasons list — the 10-reasons audience pages. */
.reasons {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: reason;
}
.reasons li {
  position: relative;
  margin: 0 0 14px;
  padding: 18px 20px 18px 58px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
}
.reasons li::before {
  counter-increment: reason;
  content: counter(reason);
  position: absolute;
  left: 18px;
  top: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
}
.reasons li h3 {
  font-family: var(--serif);
  font-size: 1.04rem;
  font-weight: 600;
  margin: 0 0 4px;
}
.reasons li p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--muted);
}

/* Call-to-action row back to the beta. */
.cta {
  margin: 28px 0 8px;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  text-align: center;
}
.cta a.btn {
  display: inline-block;
  margin-top: 10px;
  padding: 13px 26px;
  font-weight: 600;
  color: var(--btn-ink);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 12px;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.cta a.btn:hover {
  filter: brightness(1.05);
}

/* Essay teaser card — shared with the landing page (index.html carries its own inline copy of
   these rules; this copy lets the secondary pages, e.g. inventor.html, use the same card). */
.teaser {
  display: block;
  margin: 22px 0;
  padding: 26px 28px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
}
.teaser:hover {
  transform: translateY(-2px);
  filter: brightness(1.01);
}
.teaser:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.teaser .eyebrow {
  margin: 0 0 10px;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.teaser .first-line {
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.6;
  margin: 0 0 10px;
}
.teaser .go {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}

footer.site {
  margin-top: auto;
  padding: 40px 0 32px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}
footer.site a {
  color: var(--accent);
  text-decoration: none;
}

/* --- Eloquence glossary (eloquence.html) ---
   A browsable reference of literary devices. Reuses the site palette/tokens; the essay voice is set
   in the shared .prose serif cards, while the device entries below read as reference material. */

/* Convention legend — tells the reader how to see "the author's own words" vs reference material. */
.legend {
  margin: 18px 0 8px;
  padding: 14px 18px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}
.legend .swatch {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
}

/* Eyebrow tag reused to flag Scott's own prose cards. */
.prose.own {
  position: relative;
}

/* On-page table of contents / jump links. */
.toc {
  margin: 24px 0 8px;
  padding: 20px 24px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
}
.toc h2 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 12px;
}
.toc ol {
  margin: 0;
  padding-left: 1.3em;
  columns: 2;
  column-gap: 28px;
}
.toc li {
  margin: 0 0 8px;
  font-size: 0.95rem;
  break-inside: avoid;
}
.toc a {
  color: var(--accent);
  text-decoration: none;
}
.toc a:hover {
  text-decoration: underline;
}

/* A device family (H2 section) and its entries. */
.family {
  margin: 40px 0 0;
  scroll-margin-top: 16px;
}
.family > h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.family > .family-note {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 60ch;
}

/* One device entry — the device NAME is a real H3 (long-tail search targets). */
.device {
  padding: 18px 0;
  border-top: 1px solid var(--panel-border);
  scroll-margin-top: 16px;
}
.device h3 {
  font-family: var(--serif);
  font-size: 1.14rem;
  font-weight: 600;
  margin: 0 0 6px;
}
.device h3 .alt {
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
  font-size: 0.95rem;
}
.device .def {
  margin: 0 0 10px;
  font-size: 0.98rem;
  color: var(--ink);
}
.device .def:last-child {
  margin-bottom: 0;
}

/* Example line — reference material, set apart from the essay voice. */
.device .ex {
  margin: 0;
  padding: 10px 16px;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--accent-soft);
  border-radius: 10px;
}
.device .ex + .ex {
  margin-top: 8px;
}
.device .ex .who {
  display: block;
  margin-top: 6px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* Ten Measures teaser list. */
.measures {
  margin: 8px 0 0;
  padding-left: 1.4em;
}
.measures li {
  margin: 0 0 10px;
  font-size: 0.98rem;
  line-height: 1.6;
}
.measures li strong {
  font-family: var(--serif);
}

@media (max-width: 640px) {
  .reasons li {
    padding-left: 20px;
    padding-top: 48px;
  }
  .reasons li::before {
    top: 14px;
  }
  .toc ol {
    columns: 1;
  }
}

/* ============================================================================
   PROVENANCE DEMO (the site dogfoods PasadoDocs' own instrument).

   Every piece of content prose on the site is wrapped in
   <span class="prov" data-band="..."> — the SAME idiom the product uses to
   paint provenance in the app (app/ui/app.css). The hue AND the border-style
   both carry the meaning, so the bands read for colorblind users too. The band
   hues are lifted verbatim from the app so the site and the product are one
   world:
     in-band   = the Inventor's own words          (pale green, SOLID)
     elevated  = AI-assisted from his notes         (amber,      DASHED)
     off-band  = AI-generated                       (red,        DOTTED)
     reference = neither ours (quotes / citations)  (warm grey,  SOLID)
   The word tallies behind the scorecard are computed by
   tools/authorship-scorecard.mjs parsing exactly these spans — never eyeballed.
   ========================================================================== */
/* AUSTERE BY DEFAULT: the prose rests as clean editorial text — no band fills,
   no coloured underlines. The bands are DATA (data-band drives the scorecard tally
   and the on-demand "Watch the tool read this page" reveal); they only paint while
   the visitor plays that reveal. A 2px transparent underline reserves space so the
   reveal lights up with no layout shift, and the per-band border STYLE
   (solid/dashed/dotted) is retained so the reveal reads for colourblind users. */
.prov {
  padding: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.prov[data-band="elevated"] {
  border-bottom-style: dashed;
} /* amber, dashed — deviating / AI-assisted (colour appears on reveal) */
.prov[data-band="off-band"] {
  border-bottom-style: dotted;
} /* red, dotted — doesn't match the author / AI-like (colour appears on reveal) */

/* Provenance legend (its own class so it doesn't collide with the .legend note
   box already used on the essays hub / eloquence page). Swatch hues match the
   band underlines above, exactly as the app's legend does. */
.prov-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 14px 0 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--muted);
  list-style: none;
}
.prov-legend li {
  margin: 0;
}
.prov-legend .swatch {
  display: inline-block;
  width: 1.6em;
  vertical-align: -2px;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  margin-right: 6px;
}
.prov-legend .swatch.ok {
  border-bottom-color: #3a9d5d;
}
.prov-legend .swatch.warn {
  border-bottom-color: #c98a2b;
  border-bottom-style: dashed;
}
.prov-legend .swatch.bad {
  border-bottom-color: #c0392b;
  border-bottom-style: dotted;
}
.prov-legend .swatch.ref {
  border-bottom-color: #cfc7ba;
}

/* --- The scorecard: a "Transcript"-style card, computed by the script. --- */
.scorecard {
  margin: 24px 0;
  padding: 22px 24px 24px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.scorecard .eyebrow {
  margin: 0 0 6px;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.scorecard h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 4px;
}
.scorecard .headline {
  margin: 6px 0 14px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}
.scorecard .headline strong {
  color: var(--accent);
}
/* Segmented bar — widths are inlined from the computed percentages. */
.scorebar {
  display: flex;
  height: 20px;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
}
.scorebar span {
  display: block;
  height: 100%;
}
.scorebar .seg-in {
  background: #3a9d5d;
}
.scorebar .seg-el {
  background: #c98a2b;
}
.scorebar .seg-off {
  background: #c0392b;
}
.scorecard .measured {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.scorecard .measured a {
  color: var(--accent);
}
.inventor-note {
  margin: 16px 0 0;
  padding: 14px 18px;
  background: #e5f4ea;
  border-left: 3px solid #3a9d5d;
  border-radius: 10px;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.inventor-note .who {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* --- Per-page badge: "This page: NN% my words" → links to the hub explainer. --- */
.pagebadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: #e5f4ea;
  border: 1px solid #bfe0cc;
  border-radius: 999px;
  text-decoration: none;
}
.pagebadge:hover {
  filter: brightness(0.98);
}
.pagebadge .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a9d5d;
}

/* ============================================================================
   INTERACTIVE PROVENANCE (progressive enhancement via provenance-interactive.js).
   Presentation + interaction only — the band data, classifications, and computed
   numbers are never changed here. Light-theme only, warm palette, band hues match
   the app (#3a9d5d / #c98a2b / #c0392b). Honors prefers-reduced-motion.
   ========================================================================== */

/* Per-band colour tokens reused by the reveal (kept in sync with the band rules
   above). Setting only custom properties here — no visual override. */
.prov {
  --prov-bg: #e9e9ee;
  --prov-line: #b9b9c6;
  cursor: help;
}
.prov[data-band="in-band"] {
  --prov-bg: #e5f4ea;
  --prov-line: #3a9d5d;
}
.prov[data-band="elevated"] {
  --prov-bg: #fbf1dd;
  --prov-line: #c98a2b;
}
.prov[data-band="off-band"] {
  --prov-bg: #fbe4e4;
  --prov-line: #c0392b;
}
.prov[data-band="reference"] {
  --prov-bg: #efece6;
  --prov-line: #cfc7ba;
}
.prov:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Screen-reader-only band descriptions (referenced via aria-describedby). */
.prov-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Visible tooltip — positioned by JS with position:fixed, so it never shifts
   layout or is clipped by an overflow container. */
.prov-tip {
  position: fixed;
  z-index: 80;
  max-width: 250px;
  display: none;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}
.prov-tip[data-show="1"] {
  opacity: 1;
  transform: translateY(0);
}
.prov-tip .pt-title {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 3px;
  color: var(--pt-accent, var(--accent));
}

/* "Watch the tool read this page" control. */
.prov-watch-row {
  margin: 14px 0 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}
.prov-watch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 14px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
}
.prov-watch:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}
.prov-watch:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.prov-watch[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
  filter: none;
}
.prov-watch .pw-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c98a2b, var(--accent));
}
.prov-watch-hint {
  font-size: 0.8rem;
  color: var(--muted);
}
@media (prefers-reduced-motion: no-preference) {
  .prov-watch:not([disabled]) .pw-dot {
    animation: pw-pulse 2.4s ease-in-out infinite;
  }
}
@keyframes pw-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 138, 43, 0.45);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(201, 138, 43, 0);
  }
}

/* Reveal: while scanning, bands start blank and light up as the reading line
   passes. The border-STYLE (solid/dashed/dotted) stays put — only colour + wash
   animate in, so the resting appearance is unchanged. */
body.prov-no-trans .prov {
  transition: none !important;
}
body.is-scanning .prov {
  background: transparent !important;
  border-bottom-color: transparent !important;
  transition:
    background 0.5s ease,
    border-color 0.5s ease;
}
body.is-scanning .prov.prov--lit {
  background: var(--prov-bg) !important;
  border-bottom-color: var(--prov-line) !important;
}
@media (prefers-reduced-motion: reduce) {
  body.is-scanning .prov {
    transition: none !important;
  }
}

/* The sweeping "reading" line (position:absolute in document coords, moved by JS). */
.prov-scanline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 46px;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    rgba(58, 157, 93, 0) 0%,
    rgba(201, 138, 43, 0.1) 42%,
    rgba(58, 157, 93, 0.18) 50%,
    rgba(201, 138, 43, 0.1) 58%,
    rgba(58, 157, 93, 0) 100%
  );
  transition: opacity 0.3s ease;
}
.prov-scanline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-1px);
  background: linear-gradient(
    90deg,
    rgba(58, 157, 93, 0),
    #3a9d5d 20%,
    #c98a2b 50%,
    #c0392b 80%,
    rgba(192, 57, 43, 0)
  );
  opacity: 0.75;
}
.prov-scanline[data-on="1"] {
  opacity: 1;
}

/* ============================================================================
   DARK-THEME RETUNING of the provenance demo's semantic washes. The band HUES
   (green / amber / red) carry meaning and stay; only their pale light-mode fills
   become dark tints so the demo reads on a dark page. (No visual override in
   light theme — these rules only fire under prefers-color-scheme: dark.)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prov {
    --prov-bg: rgba(255, 255, 255, 0.05);
    --prov-line: #6b7686;
  }
  :root:not([data-theme="light"]) .prov[data-band="in-band"] {
    --prov-bg: rgba(58, 157, 93, 0.18);
    --prov-line: #57c07d;
  }
  :root:not([data-theme="light"]) .prov[data-band="elevated"] {
    --prov-bg: rgba(201, 138, 43, 0.18);
    --prov-line: #d7a24d;
  }
  :root:not([data-theme="light"]) .prov[data-band="off-band"] {
    --prov-bg: rgba(192, 57, 43, 0.2);
    --prov-line: #e2705f;
  }
  :root:not([data-theme="light"]) .prov[data-band="reference"] {
    --prov-bg: rgba(207, 199, 186, 0.14);
    --prov-line: #cfc7ba;
  }
  :root:not([data-theme="light"]) .inventor-note {
    background: rgba(58, 157, 93, 0.14);
  }
  :root:not([data-theme="light"]) .pagebadge {
    background: rgba(58, 157, 93, 0.16);
    border-color: rgba(58, 157, 93, 0.4);
  }
  :root:not([data-theme="light"]) .prov-tip .pt-title {
    color: var(--accent);
  }
}
/* Same retuning for an explicitly-forced dark theme (data-theme), matching the OS-preference path. */
:root[data-theme="dark"] .prov {
  --prov-bg: rgba(255, 255, 255, 0.05);
  --prov-line: #6b7686;
}
:root[data-theme="dark"] .prov[data-band="in-band"] {
  --prov-bg: rgba(58, 157, 93, 0.18);
  --prov-line: #57c07d;
}
:root[data-theme="dark"] .prov[data-band="elevated"] {
  --prov-bg: rgba(201, 138, 43, 0.18);
  --prov-line: #d7a24d;
}
:root[data-theme="dark"] .prov[data-band="off-band"] {
  --prov-bg: rgba(192, 57, 43, 0.2);
  --prov-line: #e2705f;
}
:root[data-theme="dark"] .prov[data-band="reference"] {
  --prov-bg: rgba(207, 199, 186, 0.14);
  --prov-line: #cfc7ba;
}
:root[data-theme="dark"] .inventor-note {
  background: rgba(58, 157, 93, 0.14);
}
:root[data-theme="dark"] .pagebadge {
  background: rgba(58, 157, 93, 0.16);
  border-color: rgba(58, 157, 93, 0.4);
}