/*
      Scroll-Driven Progress Indicator
      ─────────────────────────────────────────────────────────────
      A reading progress bar driven entirely by CSS using the
      scroll-driven animations API. Zero JavaScript.

      @supports check ensures a graceful fallback - the bar simply
      doesn't appear on browsers without support.
      ─────────────────────────────────────────────────────────────
    */

    @layer reset, base, components;

    @layer reset {
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      html { scroll-behavior: smooth; }
    }

    @layer base {
      :root {
        --colour-bg:         #06060f;
        --colour-surface:    #0c0c1e;
        --colour-border:     #1c1c36;
        --colour-text:       #eaeaf4;
        --colour-text-muted: #7e7ea6;
        --colour-cyan:       #40d9ff;
        --colour-green:      #7fff8a;
        --font-display: system-ui, sans-serif;
        --font-mono:    ui-monospace, 'Cascadia Code', monospace;
      }

      @media (prefers-color-scheme: light) {
        :root:not([data-theme="dark"]) {
          --colour-bg:         #f4f4f8;
          --colour-surface:    #ffffff;
          --colour-border:     #c9c9db;
          --colour-text:       #12121e;
          --colour-text-muted: #4e4e6a;
          --colour-cyan:       #ae5600;
          --colour-green:      #7a2e00;
        }
      }

      :root[data-theme="light"] {
        --colour-bg:         #f4f4f8;
        --colour-surface:    #ffffff;
        --colour-border:     #c9c9db;
        --colour-text:       #12121e;
        --colour-text-muted: #4e4e6a;
        --colour-cyan:       #ae5600;
        --colour-green:      #7a2e00;
      }

      .reading-page {
        background: var(--colour-bg);
        color: var(--colour-text);
        font-family: var(--font-display);
        font-size: clamp(1rem, 2vw, 1.125rem);
        line-height: 1.7;
      }
    }

    @layer components {

      /* ── Progress bar ── */
      @supports (animation-timeline: scroll()) {
        .reading-progress {
          position: fixed;
          inset-block-start: 0;
          inset-inline: 0;
          block-size: 3px;
          background: linear-gradient(
            to right,
            var(--colour-cyan),
            var(--colour-green)
          );
          transform-origin: 0 50%;
          transform: scaleX(0);
          z-index: 100;

          animation: progress linear both;
          animation-timeline: scroll(root);
          animation-range: entry 0% exit 0%;

          /* Glow effect */
          box-shadow:
            0 0 8px var(--colour-cyan),
            0 0 20px rgba(64, 217, 255, .4);
        }

        @keyframes progress {
          from { transform: scaleX(0); }
          to   { transform: scaleX(1); }
        }
      }

      /* ── Article ── */
      .reading-article {
        max-inline-size: 65ch;
        margin-inline: auto;
        padding-block: 5rem 8rem;
        padding-inline: clamp(1.25rem, 5vw, 2rem);
      }

      :root[data-embed="pen"] .reading-article {
        padding-block-start: 1.5rem;
      }

      .reading-article > header { margin-block-end: 3rem; }

      .reading-article > .label {
        font-family: var(--font-mono);
        font-size: .72rem;
        color: var(--colour-green);
        letter-spacing: .15em;
        text-transform: uppercase;
        margin-block-end: .75rem;
        display: flex;
        align-items: center;
        gap: .6rem;
      }

      .reading-article > .label::before {
        content: '';
        inline-size: 1.5rem;
        block-size: 1px;
        background: var(--colour-green);
        box-shadow: 0 0 6px var(--colour-green);
        display: block;
      }

      h1 {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.15;
        margin-block-end: 1rem;
      }

      h1 strong {
        color: var(--colour-cyan);
        text-shadow: 0 0 20px rgba(64, 217, 255, .4);
      }

      .reading-article > .meta {
        font-family: var(--font-mono);
        font-size: .72rem;
        color: var(--colour-text-muted);
        display: flex;
        gap: 1.5rem;
      }

      h2 {
        font-size: 1.25rem;
        font-weight: 600;
        letter-spacing: -.01em;
        margin-block: 2.5rem .75rem;
        color: var(--colour-text);
      }

      p { color: var(--colour-text-muted); margin-block-end: 1.25rem; }

      p:last-child { margin-block-end: 0; }

      code {
        font-family: var(--font-mono);
        font-size: .875em;
        color: var(--colour-green);
        background: var(--colour-surface);
        padding-block: .1em;
        padding-inline: .35em;
        border-radius: 3px;
      }

      pre {
        background: var(--colour-surface);
        border: 1px solid var(--colour-border);
        border-radius: 6px;
        padding: 1.25rem;
        overflow-x: auto;
        font-family: var(--font-mono);
        font-size: .8rem;
        line-height: 1.75;
        margin-block-end: 1.25rem;
      }

      pre code {
        background: none;
        padding: 0;
        color: var(--colour-text-muted);
        font-size: inherit;
      }

      ._cyan  { color: var(--colour-cyan); }
      ._green { color: var(--colour-green); }
      ._amber { color: #ffbe00; }

      .callout-note {
        border: 1px solid var(--colour-border);
        border-inline-start: 2px solid var(--colour-cyan);
        border-radius: 4px;
        padding: 1rem 1.25rem;
        background: var(--colour-surface);
        font-family: var(--font-mono);
        font-size: .8rem;
        color: var(--colour-text-muted);
        line-height: 1.65;
        margin-block: 2rem;
      }

      .note strong { color: var(--colour-cyan); }
    }