/* ================================================================
   DataHints DS — Reading Progress Bar Component
   Requires: tokens.css
   ================================================================ */

  .dh-rpb {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--rpb-h, 3px);
    background: transparent;
    z-index: var(--rpb-z, 51);
    pointer-events: none;
  }
  .rpb-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-fill);
    transition: width 80ms linear;
    will-change: width;
  }
  .dh-rpb.rpb-gradient .rpb-fill  { background: var(--grad-accent); }
  .dh-rpb.rpb-insight  .rpb-fill  { background: var(--insight); }
  .dh-rpb.rpb-mint     .rpb-fill  { background: var(--mint); }
  @media (prefers-reduced-motion: reduce) {
    .rpb-fill { transition: none; }
  }
  /* END COMPONENT CSS */

  /* ── Demo scaffolding ──────────────────────────────────────── */
  .demo-article-wrap {
    position: relative;
    background: var(--bg-card); border: 1px solid var(--border-s);
    border-radius: var(--r-md); overflow: hidden;
    height: 220px;
    margin-bottom: var(--sp-6);
  }
  .demo-article-scroll {
    height: 100%; overflow-y: scroll;
    padding: var(--sp-6);
    scrollbar-width: thin;
    scrollbar-color: var(--border-s) transparent;
  }
  .demo-article-inner { min-height: 600px; }
  .demo-article-inner p {
    font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.7;
    color: var(--fg-2); margin-bottom: var(--sp-4);
  }
  .demo-article-inner h3 {
    font-family: var(--font-sans); font-size: 1rem; font-weight: 600;
    color: var(--fg-heading); margin-bottom: var(--sp-3); margin-top: var(--sp-6);
  }

  /* ── Progress bar inside demo container ───────────────────── */
  .demo-rpb-wrap {
    position: sticky;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: transparent;
    z-index: 2;
    pointer-events: none;
    flex-shrink: 0;
  }
  .demo-rpb-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-fill);
    transition: width 80ms linear;
  }
  .demo-rpb-wrap.rpb-gradient .demo-rpb-fill { background: var(--grad-accent); }
  .demo-rpb-wrap.rpb-insight  .demo-rpb-fill { background: var(--insight); }
  .demo-rpb-wrap.rpb-mint     .demo-rpb-fill { background: var(--mint); }

  /* ── Colour swatches ────────────────────────────────────────── */
  .swatch-row {
    display: flex; gap: var(--sp-4); flex-wrap: wrap;
    margin-bottom: var(--sp-6);
  }
  .swatch {
    flex: 1; min-width: 120px; border-radius: var(--r-sm);
    background: var(--bg-card); border: 1px solid var(--border-s);
    overflow: hidden;
  }
  .swatch-bar { height: 4px; }
  .swatch-info {
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--font-mono); font-size: 9.5px; color: var(--fg-3); line-height: 1.6;
  }
  .swatch-info strong { color: var(--fg-2); display: block; margin-bottom: 2px; }

  /* ── Indicator note ──────────────────────────────────────── */
  .live-note {
    background: var(--bg-elevated); border: 1px solid var(--border-s);
    border-radius: var(--r-sm); padding: var(--sp-4) var(--sp-5);
    font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3);
    margin-bottom: var(--sp-8);
    display: flex; align-items: center; gap: var(--sp-3);
  }
  .live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--accent-sub);
  }
  .live-pct {
    margin-left: auto; color: var(--accent-text);
    font-weight: 500;
  }

  /* ── Spacer for scroll demo ──────────────────────────────── */
  .scroll-content {
    font-family: var(--font-sans); font-size: 1rem;
    color: var(--fg-2); line-height: 1.75;
  }
  .scroll-content h2 {
    font-family: var(--font-sans); font-size: 1.25rem; font-weight: 600;
    color: var(--fg-heading); margin-bottom: var(--sp-3); margin-top: var(--sp-8);
  }
  .scroll-content p { margin-bottom: var(--sp-5); }