/* ============================================================================
   LAYOUT — containers, masthead, toc-bar, theme-switch, footer
   ============================================================================ */


  .grain{
    position:fixed;inset:0;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:multiply;z-index:1;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  .wrap{position:relative;z-index:2;max-width:1480px;margin:0 auto;padding:36px 32px 80px;}

  /* ── Section TOC — sticky navigation pill bar ───────────────────────────────
     Desktop (>900px): horizontal pill strip, sticky just below the theme-switch.
     It floats in the left portion of the viewport so it never overlaps the
     theme-switch (which floats right).
     Tablet (600–900px): same bar but smaller text, below theme-switch.
     Mobile (≤600px): hidden — page is short enough and bottom theme-bar occupies
     the only available fixed real-estate.                                      */
  .toc-bar{
    position:sticky;
    top:14px;
    z-index:49;            /* one below theme-switch (z:50) */
    display:flex;
    gap:0;
    background:var(--paper-2);
    border:1px solid var(--rule);
    box-shadow:var(--shadow);
    width:fit-content;
    max-width:calc(100% - 32px);
    margin-bottom:0;
    /* No float: floats combined with sticky cause unstable margin-collapse with
       the next-sibling masthead, producing an intermittent ghost gap above the
       header after DOM mutations (e.g. running the optimizer). The element is
       naturally left-aligned as the first item in normal flow; the theme-switch
       (position:absolute, top-right) doesn't collide because it's out of flow. */
  }
  .toc-bar a{
    display:flex;align-items:center;gap:5px;
    padding:5px 11px;
    font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);text-decoration:none;
    border-right:1px solid var(--rule);
    transition:color .15s, background .15s;
    white-space:nowrap;
    line-height:1;
  }
  .toc-bar a:last-child{border-right:none;}
  .toc-bar a:hover{color:var(--ink);background:var(--paper);}
  .toc-bar a.toc-active{
    color:var(--ink);
    background:var(--accent);
    color:var(--paper);  /* accent is dark enough in all themes */
  }
  /* The § glyph is accent-colored in inactive state */
  .toc-bar a .toc-num{
    font-size:8.5px;opacity:.6;
  }
  .toc-bar a.toc-active .toc-num{opacity:.85;}

  /* Theme switcher: positioned absolutely in the top-right of .wrap so it sits
     out of normal flow. We previously used `position:sticky + float:right` which
     caused intermittent extra space above the masthead — `float` removes the
     element from flow, but combined with sticky and the masthead's margin-top
     it produced unstable margin-collapse. Absolute positioning is stable and
     achieves the same visual result without scrolling behaviour. */
  .theme-switch{
    position:absolute;top:14px;right:32px;z-index:50;
    display:inline-flex;align-items:center;gap:8px;
    background:var(--paper-2);border:1px solid var(--rule);padding:5px 8px;
    box-shadow:var(--shadow);
  }
  .theme-switch .ts-icon{
    display:flex;align-items:center;
    color:var(--muted);flex-shrink:0;
    /* Inherits cursor:default — not interactive on its own */
  }
  .theme-switch .ts-icon svg{
    width:15px;height:15px;
    fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  }
  .theme-switch .ts-select{
    background:transparent;border:none;cursor:pointer;outline:none;
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink);
    padding:3px 4px;max-width:240px;
  }
  .theme-switch .ts-select:focus{outline:1px dotted var(--accent);outline-offset:2px;}

  /* Masthead */
  header.masthead{
    border-top:6px double var(--ink);
    border-bottom:1px solid var(--ink);
    padding:28px 0 18px;
    margin-bottom:28px;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:24px;
    clear:both;
  }
  .meta-left, .meta-right{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
  .meta-right{text-align:right}

  /* State export/import toolbar in masthead */
  .state-toolbar{
    grid-column:1/-1;
    display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
    margin-top:14px;padding-top:14px;
    border-top:1px dashed var(--rule);
  }
  .state-toolbar button{
    background:transparent;
    border:1px solid var(--ink);
    color:var(--ink);
    font-family:var(--font-mono);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    padding:8px 16px;
    cursor:pointer;
    transition:background-color .15s ease, color .15s ease;
  }
  .state-toolbar button:hover{background:var(--ink);color:var(--paper);}
  .state-toolbar button:disabled{opacity:.4;cursor:not-allowed;}
  .state-toolbar button:disabled:hover{background:transparent;color:var(--ink);}
  .state-toolbar .state-status{
    font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
    color:var(--muted);align-self:center;
    min-width:200px;text-align:center;
  }
  .state-toolbar .state-status.ok{color:var(--accent);}
  .state-toolbar .state-status.err{color:#c0392b;}

  .title{
    font-family:var(--font-display);
    text-align:center;font-weight:300;font-size:clamp(40px,7vw,84px);line-height:.95;letter-spacing:-.02em;
    font-style:italic;
  }
  .title b{font-style:normal;font-weight:700;}
  .subtitle{
    grid-column:1/-1;text-align:center;margin-top:8px;
    font-family:var(--font-mono);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--ink);
  }

  /* Sections */
  section{margin-bottom:28px;}
  .sec-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    border-bottom:1px solid var(--ink);padding-bottom:8px;margin-bottom:16px;
  }
  .sec-head h2{
    margin:0;font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:-.01em;
  }
  .sec-head h2 .num{
    font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--accent);
    margin-right:10px;vertical-align:2px;
  }
  .sec-head .hint{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}

  /* ── §04 / §05 differentiation ──────────────────────────────────────────────
     §04 = refine existing (accent = primary, analytical)
     §05 = build from scratch (accent-2 = constructive, generative)
     Three layers: sec-head left stripe + badge pill + run-button tint.      */

  /* Left stripe on sec-head only — avoids touching layout of the whole section */
  section#s04 > .sec-head{
    border-left:3px solid var(--accent);
    padding-left:12px;
    margin-left:-12px;  /* compensate for added padding so content stays aligned */
  }
  section#s05 > .sec-head{
    border-left:3px solid var(--accent-2);
    padding-left:12px;
    margin-left:-12px;
  }

  footer.colophon{
    margin-top:48px;border-top:1px solid var(--ink);padding-top:14px;
    display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  }