/* ===================================================================
   PROSE — Article/content page layout
   Used by: research articles, resource guides, privacy page
   =================================================================== */

.prose {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
}
.prose:has(.paper) {
  max-width: 1040px;
}
.paper {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-5) var(--space-5);
  margin-bottom: var(--space-4);
}
@media (prefers-color-scheme: dark) {
  .paper { background: rgba(255, 255, 255, 0.04); }
}
html.theme-dark .paper { background: rgba(255, 255, 255, 0.04); }
html.theme-light .paper { background: rgba(255, 255, 255, 0.55); }
@media (max-width: 700px) {
  .paper { padding: var(--space-3) var(--space-3); }
}
.prose h1 { margin-bottom: var(--space-1); }
.prose .meta {
  color: var(--muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-3);
}
.prose h2 {
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: var(--line-height-tight);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.prose h2:first-of-type {
  border-top: none;
  padding-top: 0;
}
.prose h3 {
  font-size: 1.1rem;
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
}
.prose p, .prose li { line-height: 1.75; }
.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-5) 0;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: var(--font-size-sm);
}
.prose th, .prose td {
  text-align: left;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border);
}
.prose th { font-weight: var(--font-weight-semibold); color: var(--muted); }

/* Table of contents — mobile: collapsible card above paper */
.prose .toc {
  background: var(--overlay-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
}
.prose .toc details summary {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-tight);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.prose .toc details summary::-webkit-details-marker { display: none; }
.prose .toc details summary::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.prose .toc details[open] summary::after {
  transform: rotate(45deg);
}
.prose .toc details[open] ol {
  margin-top: var(--space-2);
}
.prose .toc ol {
  margin: 0;
  padding-left: var(--space-3);
}
.prose .toc li { margin-bottom: 4px; }
.prose .toc a { text-decoration: none; color: var(--text); }
.prose .toc a:hover { color: var(--brand); }

/* Table of contents — desktop: sticky left sidebar */
@media (min-width: 1380px) {
  .prose:has(.toc) {
    position: relative;
  }
  .prose .toc {
    position: sticky;
    top: 100px;
    float: left;
    width: 200px;
    margin-left: calc(-200px - var(--space-4));
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--space-5);
  }
  .prose .toc details summary {
    pointer-events: none;
    cursor: default;
  }
  .prose .toc details summary::after { display: none; }
  .prose .toc details > ol {
    margin-top: var(--space-2);
  }
  .prose .toc a.active { color: var(--brand); font-weight: var(--font-weight-semibold); }
}

/* Post CTA row (bottom of articles) */
.post-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 820px;
  margin: var(--space-5) auto 0;
  padding: 0 var(--space-3);
}
@media (max-width: 700px) {
  .post-cta-row { grid-template-columns: 1fr; }
}
.post-cta {
  background: var(--overlay-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.post-cta h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-lg); }
.post-cta p,
.post-cta .form-group label { margin: 0 0 var(--space-2); font-weight: var(--font-weight-normal); font-size: var(--font-size-base); }
.post-cta > a.btn,
.post-cta > form { margin-top: auto; }
.post-cta .btn { line-height: 1.2; }

/* Chart figures */
.prose figure.chart { margin: var(--space-4) 0; padding: var(--space-2) var(--space-2) var(--space-1); background: #FFFFFF; border: 1px solid rgba(18,42,43,0.10); border-radius: var(--radius); box-shadow: 0 2px 12px rgba(18,42,43,0.07); }
.prose figure.chart img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.prose figure.chart canvas { max-width: 100%; border-radius: var(--radius-sm); background: #FFFFFF; }
.prose figure.chart figcaption { font-size: var(--font-size-sm); color: var(--muted); margin-top: var(--space-2); font-style: italic; }
/* Caption label ("Figure N." / "Table N.") — standard markup is <strong class="fig-label">;
   this normalizes it to non-italic semibold across every figure type. */
.prose figcaption .fig-label { font-style: normal; font-weight: var(--font-weight-semibold); }
.prose figure.chart svg.diagram .fig-bg { fill: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  .prose figure.chart { background: #1D3538; border-color: rgba(167,220,217,0.12); box-shadow: 0 2px 12px rgba(0,0,0,0.30); }
  .prose figure.chart canvas { background: #1D3538; }
  .prose figure.chart img { opacity: 0.92; }
  .prose figure.chart svg.diagram .fig-bg { fill: #1D3538; }
}
html.theme-dark .prose figure.chart { background: #1D3538; border-color: rgba(167,220,217,0.12); box-shadow: 0 2px 12px rgba(0,0,0,0.30); }
html.theme-dark .prose figure.chart canvas { background: #1D3538; }
html.theme-dark .prose figure.chart img { opacity: 0.92; }
html.theme-dark .prose figure.chart svg.diagram .fig-bg { fill: #1D3538; }
html.theme-light .prose figure.chart { background: #FFFFFF; border-color: rgba(18,42,43,0.10); box-shadow: 0 2px 12px rgba(18,42,43,0.07); }
html.theme-light .prose figure.chart canvas { background: #FFFFFF; }
html.theme-light .prose figure.chart img { opacity: 1; }
html.theme-light .prose figure.chart svg.diagram .fig-bg { fill: #FFFFFF; }

/* Fade in Mermaid diagrams after render */
pre.mermaid { transition: opacity 0.3s ease; }
pre.mermaid:not([data-processed]) { opacity: 0; }

/* Video figures */
.prose figure.video { margin: var(--space-4) 0; padding: var(--space-2) var(--space-2) var(--space-1); background: #FFFFFF; border: 1px solid rgba(18,42,43,0.10); border-radius: var(--radius); box-shadow: 0 2px 12px rgba(18,42,43,0.07); }
.prose figure.video video { width: 100%; border-radius: var(--radius-sm); display: block; }
.prose figure.video figcaption { font-size: var(--font-size-sm); color: var(--muted); margin-top: var(--space-2); font-style: italic; }
@media (prefers-color-scheme: dark) {
  .prose figure.video { background: #1D3538; border-color: rgba(167,220,217,0.12); box-shadow: 0 2px 12px rgba(0,0,0,0.30); }
}
html.theme-dark .prose figure.video { background: #1D3538; border-color: rgba(167,220,217,0.12); box-shadow: 0 2px 12px rgba(0,0,0,0.30); }
html.theme-light .prose figure.video { background: #FFFFFF; border-color: rgba(18,42,43,0.10); box-shadow: 0 2px 12px rgba(18,42,43,0.07); }

/* References list */
.prose .references { font-size: var(--font-size-sm); color: var(--muted); }
.prose .references p { padding-left: 2em; text-indent: -2em; margin: 0 0 var(--space-1); line-height: 1.6; }

/* Table figures (table + caption) */
.prose figure.table-wrap { margin: var(--space-4) 0; overflow-x: auto; }
.prose figure.table-wrap table { margin: 0; }
.prose figure.table-wrap figcaption { font-size: var(--font-size-sm); color: var(--muted); margin-top: var(--space-2); font-style: italic; }
.prose td .ch, .prose th .ch { font-style: normal; }

/* Inline-rendered display math (hand-built fractions) */
.prose .math-display {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  font-size: 1.05rem;
}
.prose .math-display .eq { display: inline-flex; align-items: center; gap: 0.4em; }
.prose .frac { display: inline-flex; flex-direction: column; text-align: center; line-height: 1.3; }
.prose .frac > .num { border-bottom: 1px solid currentColor; padding: 0 0.5em 0.12em; }
.prose .frac > .den { padding: 0.12em 0.5em 0; }

/* Footnotes */
.prose sup.fn-ref { font-size: 0.7em; line-height: 0; }
.prose sup.fn-ref a { text-decoration: none; }
.prose .footnotes { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--font-size-sm); color: var(--muted); }
.prose .footnotes ol { padding-left: var(--space-3); }
.prose .footnotes li { margin-bottom: var(--space-2); line-height: 1.6; }
.prose .footnotes li:target { background: var(--overlay-surface); border-radius: var(--radius-sm); }
.prose .fn-back { text-decoration: none; margin-left: 0.35em; }

/* Article subtitle (under h1) */
.prose .subtitle { color: var(--muted); font-style: italic; margin: 0 0 var(--space-3); }

/* Side-by-side passage table figures */
.prose figure.passages { margin: var(--space-4) 0; }
.prose figure.passages table { table-layout: fixed; }
.prose figure.passages th, .prose figure.passages td { vertical-align: top; width: 50%; }
.prose figure.passages figcaption { font-size: var(--font-size-sm); color: var(--muted); margin-top: var(--space-1); font-style: italic; }

/* Two-up figure grid (used inside figure.chart) */
.prose figure.chart .figure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); align-items: start; }
.prose figure.chart .figure-grid figure { margin: 0; }
.prose figure.chart .figure-grid figcaption { font-size: var(--font-size-sm); color: var(--muted); text-align: center; margin-top: var(--space-1); font-style: italic; }
@media (max-width: 640px) {
  .prose figure.chart .figure-grid { grid-template-columns: 1fr; }
}

/* Inline SVG diagrams inside figure.chart.
   Label-size standard (applies to research memos + resource illustrations alike):
   primary labels render ~16px on screen (≈ body text), secondary/annotations ~14px.
   Because SVG text scales with the viewBox, a figure's font-size attributes are NOT
   the on-screen size — choose them per figure as:
       font = targetPx × (viewBoxWidth / displayWidth)
   where displayWidth is the rendered width: xwide ≈ 864px, wide = 640px, half ≈ 371px.
   That is why the same on-screen size shows up as different font-size values across
   figures. Feature diagrams use .xwide (fill the card); .half is for side notes —
   it stays a side note but still targets the same ~16px/14px label sizes.
   Color: primary labels are full-strength currentColor; secondary text and annotations
   use opacity="0.7" (one value, not the old 0.45–0.85 spread). Decorative opacities on
   leader lines, arrows, and fills are unrelated and set independently. */
.prose figure.chart svg.diagram { display: block; width: 100%; height: auto; margin: 0 auto; }
.prose figure.chart svg.diagram.narrow { max-width: 480px; }
.prose figure.chart svg.diagram.wide { max-width: 640px; }
.prose figure.chart svg.diagram.xwide { max-width: 100%; }

/* Half-width figure: floats to the right margin so prose wraps around it. */
.prose figure.chart.half {
  float: right;
  width: 45%;
  max-width: 420px;
  margin: 0 0 var(--space-2) var(--space-3);
  clear: right;
}
.prose h2, .prose h3 { clear: both; }
@media (max-width: 700px) {
  .prose figure.chart.half {
    float: none;
    width: auto;
    max-width: none;
    margin: var(--space-4) 0;
  }
}

/* Click-to-mark animated demo (svg.click-demo inside figure.chart) */
.prose figure.chart .click-demo { cursor: pointer; }
.prose figure.chart .click-demo .cd-cursor { transform: translate(60px, 220px); }
.prose figure.chart .click-demo .cd-mark,
.prose figure.chart .click-demo .cd-callout { opacity: 0; }

.prose figure.chart .click-demo.playing .cd-cursor {
  animation: cd-cursor-path 5s ease-in-out forwards;
}
@keyframes cd-cursor-path {
  0%   { transform: translate(60px, 220px) scale(1); opacity: 1; }
  14%  { transform: translate(450px, 130px) scale(1); opacity: 1; }
  16%  { transform: translate(450px, 130px) scale(0.82); opacity: 1; }
  18%  { transform: translate(450px, 130px) scale(1); opacity: 1; }
  38%  { transform: translate(528px, 130px) scale(1); opacity: 1; }
  40%  { transform: translate(528px, 130px) scale(0.82); opacity: 1; }
  42%  { transform: translate(528px, 130px) scale(1); opacity: 1; }
  44%  { transform: translate(528px, 130px) scale(0.82); opacity: 1; }
  46%  { transform: translate(528px, 130px) scale(1); opacity: 1; }
  62%  { transform: translate(528px, 130px) scale(1); opacity: 1; }
  78%  { transform: translate(528px, 130px) scale(1); opacity: 0; }
  100% { transform: translate(528px, 130px) scale(1); opacity: 0; }
}

.prose figure.chart .click-demo.playing .cd-word-hard  { animation: cd-word-flash-hard  0.4s ease-out 0.85s forwards; }
.prose figure.chart .click-demo.playing .cd-word-again { animation: cd-word-flash-again 0.6s ease-out 2s    forwards; }
@keyframes cd-word-flash-hard {
  0%   { opacity: 1;    fill: currentColor; }
  40%  { opacity: 0.35; fill: currentColor; }
  60%  { opacity: 1;    fill: #D6973C; }
  100% { opacity: 1;    fill: #D6973C; }
}
@keyframes cd-word-flash-again {
  0%   { opacity: 1;   fill: currentColor; }
  16%  { opacity: 0.35; fill: currentColor; }
  33%  { opacity: 1;   fill: #D6973C; }
  50%  { opacity: 0.4; fill: #D6973C; }
  66%  { opacity: 1;   fill: #B36743; }
  100% { opacity: 1;   fill: #B36743; }
}

.prose figure.chart .click-demo.playing .cd-mark-hard    { animation: cd-fade-in 0.3s ease-out 1s forwards; }
.prose figure.chart .click-demo.playing .cd-mark-again-1 { animation: cd-mark-amber-to-red 0.6s ease-out 2.15s forwards; }
.prose figure.chart .click-demo.playing .cd-mark-again-2 { animation: cd-fade-in 0.3s ease-out 2.35s forwards; }
@keyframes cd-fade-in { to { opacity: 1; } }
@keyframes cd-mark-amber-to-red {
  0%   { opacity: 0; fill: #D6973C; }
  35%  { opacity: 1; fill: #D6973C; }
  42%  { opacity: 1; fill: #B36743; }
  100% { opacity: 1; fill: #B36743; }
}

.prose figure.chart .click-demo.playing .cd-callout-hard  { animation: cd-rise 0.5s ease-out 1.3s forwards; }
.prose figure.chart .click-demo.playing .cd-callout-again { animation: cd-rise 0.5s ease-out 2.7s forwards; }
.prose figure.chart .click-demo.playing .cd-callout-good  { animation: cd-rise 0.5s ease-out 3.5s forwards; }
@keyframes cd-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .prose figure.chart .click-demo .cd-cursor,
  .prose figure.chart .click-demo .cd-mark,
  .prose figure.chart .click-demo .cd-callout,
  .prose figure.chart .click-demo .cd-word-hard,
  .prose figure.chart .click-demo .cd-word-again { animation: none !important; }
  .prose figure.chart .click-demo .cd-mark,
  .prose figure.chart .click-demo .cd-callout    { opacity: 1; }
  .prose figure.chart .click-demo .cd-cursor     { display: none; }
  .prose figure.chart .click-demo .cd-word-hard  { fill: #D6973C; }
  .prose figure.chart .click-demo .cd-word-again { fill: #B36743; }
}

/* Releveling animated demo (svg.relevel-demo inside figure.chart).
   Static end state is the default; .playing toggles the substitution sequence. */
.prose figure.chart .relevel-demo { cursor: pointer; }
.prose figure.chart .relevel-demo .cd-rl-pre { opacity: 0; }

.prose figure.chart .relevel-demo.playing .cd-rl-arrow-1 { animation: cd-rl-arrow-in 0.35s ease-out 0.3s  both; }
.prose figure.chart .relevel-demo.playing .cd-rl-pre-1   { animation: cd-rl-pre-out  0.4s  ease-in  0.5s  both; }
.prose figure.chart .relevel-demo.playing .cd-rl-sub-1   { animation: cd-rl-sub-in   0.4s  ease-out 0.5s  both; }

.prose figure.chart .relevel-demo.playing .cd-rl-arrow-2 { animation: cd-rl-arrow-in 0.35s ease-out 0.7s  both; }
.prose figure.chart .relevel-demo.playing .cd-rl-pre-2   { animation: cd-rl-pre-out  0.4s  ease-in  0.9s  both; }
.prose figure.chart .relevel-demo.playing .cd-rl-sub-2   { animation: cd-rl-sub-in   0.4s  ease-out 0.9s  both; }

.prose figure.chart .relevel-demo.playing .cd-rl-arrow-3 { animation: cd-rl-arrow-in 0.35s ease-out 1.1s  both; }
.prose figure.chart .relevel-demo.playing .cd-rl-pre-3   { animation: cd-rl-pre-out  0.4s  ease-in  1.3s  both; }
.prose figure.chart .relevel-demo.playing .cd-rl-sub-3   { animation: cd-rl-sub-in   0.4s  ease-out 1.3s  both; }

.prose figure.chart .relevel-demo.playing .cd-rl-arrow-4 { animation: cd-rl-arrow-in 0.35s ease-out 1.5s  both; }
.prose figure.chart .relevel-demo.playing .cd-rl-pre-4   { animation: cd-rl-pre-out  0.4s  ease-in  1.7s  both; }
.prose figure.chart .relevel-demo.playing .cd-rl-sub-4   { animation: cd-rl-sub-in   0.4s  ease-out 1.7s  both; }

.prose figure.chart .relevel-demo.playing .cd-rl-score-after { animation: cd-rl-fade-in 0.5s ease-out 2.2s both; }

@keyframes cd-rl-arrow-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cd-rl-pre-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes cd-rl-sub-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cd-rl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .prose figure.chart .relevel-demo .cd-rl-arrow,
  .prose figure.chart .relevel-demo .cd-rl-pre,
  .prose figure.chart .relevel-demo .cd-rl-sub,
  .prose figure.chart .relevel-demo .cd-rl-score-after { animation: none !important; }
}

/* Staggered reveal demo (svg.reveal-demo inside figure.chart).
   Static end state is the default; .playing replays a staggered fade-in of .rv-N steps. */
.prose figure.chart .reveal-demo { cursor: pointer; }
.prose figure.chart .reveal-demo.playing .rv-1 { animation: rv-rise 0.5s ease-out 0.15s both; }
.prose figure.chart .reveal-demo.playing .rv-2 { animation: rv-rise 0.5s ease-out 0.50s both; }
.prose figure.chart .reveal-demo.playing .rv-3 { animation: rv-rise 0.5s ease-out 0.85s both; }
.prose figure.chart .reveal-demo.playing .rv-4 { animation: rv-rise 0.5s ease-out 1.20s both; }
.prose figure.chart .reveal-demo.playing .rv-5 { animation: rv-rise 0.5s ease-out 1.55s both; }
.prose figure.chart .reveal-demo.playing .rv-6 { animation: rv-rise 0.5s ease-out 1.90s both; }

@keyframes rv-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .prose figure.chart .reveal-demo .rv-1,
  .prose figure.chart .reveal-demo .rv-2,
  .prose figure.chart .reveal-demo .rv-3,
  .prose figure.chart .reveal-demo .rv-4,
  .prose figure.chart .reveal-demo .rv-5,
  .prose figure.chart .reveal-demo .rv-6 { animation: none !important; }
}

/* Whole-element fade-up reveal, for diagrams rendered too dynamically to stagger
   (e.g. a Mermaid graph). Resting state stays fully visible. */
.prose figure.chart .fade-in-demo { cursor: pointer; }
.prose figure.chart .fade-in-demo.playing { animation: rv-rise 0.6s ease-out 0.15s both; }
@media (prefers-reduced-motion: reduce) {
  .prose figure.chart .fade-in-demo { animation: none !important; }
}

/* Let a Mermaid diagram fill the figure card like the other figures. */
.prose figure.chart pre.mermaid svg { max-width: 100% !important; width: 100%; height: auto; }