/* ============================================================
   Versorix.com study pages (/studies/*)
   Additive to site.css: byline, chart figure, results table.
   Loaded only by scripts/templates/study-page.html, with its own
   ?v=<hash> so a change here never re-stamps the rest of the site.
   Tokens come from colors_and_type.css. No em dashes.
   ============================================================ */

/* The study headline runs about twice the length of a post title. Inter 900 per the
   TYPE RULE (colors_and_type.css): a 20-word title never sets in Pirulen caps. */
.study-post .blog-post-title { font-size: clamp(28px, 3.4vw, 48px); max-width: 26ch; }

.study-byline { font-size: 16px; line-height: 1.5; }

/* ---------- Chart figure ---------- */
.study-figure {
  margin: 8px 0 32px; padding: 24px 24px 20px;
  background: var(--vx-charcoal); border: 1px solid var(--vx-border);
  border-radius: 16px;
}
body[data-theme="cream"] .study-figure { background: #fff; }
.study-figure-title {
  font-family: var(--vx-font-sans); font-weight: 700; font-size: 16px; line-height: 1.35;
  margin: 0 0 20px; color: var(--vx-fg);
}
.study-chart { display: block; width: 100%; overflow: visible; color: var(--vx-fg); }
.study-chart text { font-family: var(--vx-font-sans); font-size: 13px; fill: var(--vx-fg); }
.study-chart .val { font-family: var(--vx-font-mono); font-size: 12px; fill: var(--vx-fg-muted); font-feature-settings: 'tnum' 1; }
.study-chart .tick { font-family: var(--vx-font-mono); font-size: 12px; fill: var(--vx-fg-subtle); }
.study-chart .grid { stroke: var(--vx-border); stroke-width: 1; }
.study-chart .grid.base { stroke: var(--vx-border-strong); }
.study-chart .bar { fill: var(--vx-yellow); }
body[data-theme="cream"] .study-chart .bar { fill: var(--vx-yellow-700); }
.study-figure-source {
  margin: 16px 0 0; font-family: var(--vx-font-mono); font-size: 12px; line-height: 1.5;
  color: var(--vx-stone);
}
@media (max-width: 720px) { .study-figure { padding: 20px 16px 16px; } }

/* ---------- Results table ---------- */
.study-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 32px; }
.study-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--vx-charcoal); border: 1px solid var(--vx-border);
  border-radius: 12px; overflow: hidden;
  font-size: 15px; line-height: 1.45;
}
body[data-theme="cream"] .study-table { background: #fff; }
.study-table th, .study-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--vx-border);
  text-align: left; vertical-align: top;
}
.study-table thead th {
  font-family: var(--vx-font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--vx-stone);
  padding-top: 14px; padding-bottom: 12px;
}
.study-table th:not(:first-child), .study-table td:not(:first-child) {
  text-align: right; white-space: nowrap;
  font-family: var(--vx-font-mono); font-feature-settings: 'tnum' 1;
}
.study-table td:first-child { color: var(--vx-fg); }
.study-table td:not(:first-child) { color: var(--vx-fg-muted); }
.study-table td:last-child { color: var(--vx-fg); font-weight: 700; }
.study-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 720px) {
  .study-table { font-size: 14px; }
  .study-table th, .study-table td { padding: 10px 10px; }
}