/* An editorial reading aid. Motion reveals marks once, on visitor request. */
.chart-guide { --guide-accent: #14365d; --guide-wash: #f3f6fa; border: 1px solid var(--rule); border-top: 3px solid var(--guide-accent); margin-top: 4px; background: var(--paper); }
[data-dark] .chart-guide { --guide-accent: #a5c3e7; --guide-wash: #1b232e; }
.chart-guide button { font-family: var(--ui); cursor: pointer; }
.guide-toggle { display: grid; grid-template-columns: 36px 1fr 24px; gap: 14px; align-items: center; width: 100%; border: 0; padding: 22px; background: transparent; color: var(--ink); text-align: left; }
.guide-symbol { width: 32px; height: 32px; color: var(--guide-accent); }
.guide-symbol svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.guide-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--guide-accent); margin-bottom: 6px; }
#guide-title { display: block; font: 750 22px/1.15 var(--ui); letter-spacing: -.025em; }
.guide-intro { display: block; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.guide-open { font: 400 25px var(--ui); color: var(--guide-accent); transition: transform 300ms cubic-bezier(.22,1,.36,1); }
.guide-toggle[aria-expanded="true"] .guide-open { transform: rotate(45deg); }
.guide-toggle:hover { background: var(--guide-wash); }
.chart-guide button:focus-visible, .chart-guide a:focus-visible, .chart-guide summary:focus-visible { outline: 2px solid var(--guide-accent); outline-offset: 3px; }
#guide-body { padding: 0 22px 18px; }
.guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--rule); }
.guide-steps button { padding: 16px 4px 14px; border: 0; background: transparent; color: var(--muted); text-align: left; font-size: 11px; font-weight: 600; line-height: 1.5; }
.guide-steps button span { display: block; font-size: 10px; font-weight: 500; letter-spacing: .1em; margin-bottom: 3px; }
.guide-steps button[aria-pressed="true"] { color: var(--guide-accent); }
.guide-progress { height: 2px; background: var(--rule); }
.guide-progress span { display: block; width: 33.333%; height: 100%; background: var(--guide-accent); transform: translateX(0); transition: transform 500ms cubic-bezier(.22,1,.36,1); }
.chart-guide[data-step="1"] .guide-progress span { transform: translateX(100%); }
.chart-guide[data-step="2"] .guide-progress span { transform: translateX(200%); }
.guide-panel { padding: 22px 0 12px; overflow-wrap: anywhere; }
.guide-form { color: var(--guide-accent); font: 650 10px/1.5 var(--ui); letter-spacing: .09em; text-transform: uppercase; }
.guide-panel h3 { font: 700 23px/1.15 var(--ui); letter-spacing: -.02em; margin: 14px 0; color: var(--ink); }
.guide-prose { font: 400 15px/1.7 var(--ui); color: var(--text); }
.guide-prose p { margin: 12px 0; }
.guide-prose ul, .guide-prose ol { padding-left: 20px; }
.guide-prose table { width: 100%; font-size: 13px; border-collapse: collapse; }
.guide-prose th, .guide-prose td { text-align: left; border-bottom: 1px solid var(--rule); padding: 6px; }
.guide-prose code { font-size: .85em; overflow-wrap: anywhere; }
.guide-diagram { margin: 12px 0 16px; padding: 10px 0; background: var(--guide-wash); }
.guide-diagram svg { display: block; width: 100%; height: auto; }
.guide-diagram figcaption { color: var(--muted); text-align: center; padding: 0 10px 4px; font: 400 10px/1.5 var(--ui); }
.guide-diagram text { fill: var(--text); font: 500 12px var(--ui); }
.guide-diagram .g-caption { text-anchor: middle; font-size: 13px; font-weight: 600; fill: var(--guide-accent); }
.guide-diagram .g-big { font-size: 45px; font-weight: 750; }
.g-axis { fill: none; stroke: var(--muted); stroke-width: 1; }
.g-grid { fill: none; stroke: var(--rule); }
.g-trace { stroke: var(--guide-accent); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.g-mark, .g-bar, .g-column, .g-cell { fill: var(--guide-accent); }
.g-muted { fill: #adb5bf; }
.g-secondary { stroke: #adb5bf; }
.g-secondary-fill { fill: #74869c; }
.g-range { fill: #adb5bf; opacity: .25; }
.g-benchmark { fill: none; stroke: var(--ink); stroke-width: 3; }
.g-density { fill: var(--guide-accent); fill-opacity: .12; }
.guide-original { margin: 18px 0; border-top: 1px solid var(--rule); padding-top: 14px; }
.guide-original summary { font: 600 12px/1.5 var(--ui); color: var(--guide-accent); cursor: pointer; }
.guide-source { display: inline-block; color: var(--guide-accent); font: 600 12px var(--ui); margin-top: 14px; text-underline-offset: 4px; }
.guide-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--rule); }
.guide-controls button { border: 1px solid var(--rule); background: var(--paper); color: var(--ink); padding: 9px 11px; font-size: 11px; font-weight: 600; min-height: 38px; }
.guide-controls [data-guide-next] { margin-left: auto; border-color: var(--guide-accent); color: var(--guide-accent); }
.guide-controls [data-guide-replay] { border-color: transparent; color: var(--muted); padding-inline: 2px; font-weight: 400; }
.guide-controls button:disabled { opacity: .4; cursor: default; }
.guide-controls button:hover:enabled { background: var(--guide-wash); }
.guide-footer { color: var(--muted); font: 400 10px/1.6 var(--ui); margin: 14px 0 0; }
@keyframes guide-rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes guide-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes guide-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes guide-column { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes guide-pop { from { opacity: 0; } to { opacity: 1; } }
.guide-animate > .guide-form, .guide-animate > h3, .guide-animate > .guide-prose { animation: guide-rise 450ms cubic-bezier(.22,1,.36,1) both; }
.guide-animate .g-trace { stroke-dasharray: 1; animation: guide-line 1200ms cubic-bezier(.22,1,.36,1) both; }
.guide-animate .g-bar { transform-box: fill-box; transform-origin: left; animation: guide-bar 1000ms cubic-bezier(.22,1,.36,1) calc(var(--i,0)*120ms) both; }
.guide-animate .g-column { transform-box: fill-box; transform-origin: bottom; animation: guide-column 1000ms cubic-bezier(.22,1,.36,1) calc(var(--i,0)*100ms) both; }
.guide-animate .g-pop, .guide-animate .g-cell, .guide-animate .g-benchmark { animation: guide-pop 600ms ease-out calc(200ms + var(--i,0)*60ms) both; }
@media (max-width: 520px) {
  .guide-toggle { padding: 18px 14px; gap: 10px; grid-template-columns: 28px 1fr 20px; }
  .guide-symbol { width: 27px; }
  #guide-title { font-size: 20px; }
  #guide-body { padding-inline: 14px; }
  .guide-controls { gap: 6px; }
  .guide-controls button { padding: 9px 8px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .chart-guide [data-guide-replay] { display: none !important; }
  .chart-guide *, .chart-guide *::before, .chart-guide *::after { animation: none !important; transition: none !important; }
}