/* ============================================================
   SEAM IDEAS — two treatments for the dark ↔ paper section seams,
   switched via body[data-seam]:
     "current" — the existing stepped gradient (baseline)
     "smooth"  — A · Silk fade: taller seam, smootherstep-eased
                 stops mixed in oklab so both ends land with zero
                 visible edge (no hot band, no hard line)
     "pixel"   — B · Pixel dissolve: canvas dither in the page's
                 pixel-mosaic language (see seam-pixel.js)
   ============================================================ */

/* ---- switcher: stack the seams bar under the theme bar ---- */
#theme-switch { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* seam swatches */
.usw-sw--seam-current { background: linear-gradient(to bottom, #15191B 0%, #15191B 28%, #CFD6D5 62%, #CFD6D5 100%); }
.usw-sw--seam-smooth  { background: linear-gradient(to bottom in oklab, #15191B 8%, #CFD6D5 92%); }
.usw-sw--seam-pixel   {
  background:
    repeating-conic-gradient(rgba(21,25,27,0.9) 0% 25%, rgba(0,0,0,0) 25% 50%) 0 0 / 7px 7px,
    linear-gradient(to bottom, #15191B 0%, #CFD6D5 100%);
}

/* ============================================================
   A · SILK FADE  (body[data-seam="smooth"])
   Smootherstep curve (6t⁵−15t⁴+10t³) sampled every 10%, mixed in
   oklab so lightness ramps perceptually evenly. Derivative is zero
   at both ends → the seam melts into the flat sections above and
   below with no detectable boundary. Taller band gives the eye room.
   ============================================================ */
body[data-seam="smooth"] .sd-seam { height: 460px; }

body[data-seam="smooth"] .sd-seam--i1p { background: linear-gradient(to bottom,
  #0C0A07 0%,
  color-mix(in oklab, #0C0A07 99.1%, var(--abm-paper)) 10%,
  color-mix(in oklab, #0C0A07 94.2%, var(--abm-paper)) 20%,
  color-mix(in oklab, #0C0A07 83.7%, var(--abm-paper)) 30%,
  color-mix(in oklab, #0C0A07 68.3%, var(--abm-paper)) 40%,
  color-mix(in oklab, #0C0A07 50%,   var(--abm-paper)) 50%,
  color-mix(in oklab, #0C0A07 31.7%, var(--abm-paper)) 60%,
  color-mix(in oklab, #0C0A07 16.3%, var(--abm-paper)) 70%,
  color-mix(in oklab, #0C0A07 5.8%,  var(--abm-paper)) 80%,
  color-mix(in oklab, #0C0A07 0.9%,  var(--abm-paper)) 90%,
  var(--abm-paper) 100%); }

body[data-seam="smooth"] .sd-seam--pi2 { background: linear-gradient(to bottom,
  var(--abm-paper) 0%,
  color-mix(in oklab, var(--ad-bg) 0.9%,  var(--abm-paper)) 10%,
  color-mix(in oklab, var(--ad-bg) 5.8%,  var(--abm-paper)) 20%,
  color-mix(in oklab, var(--ad-bg) 16.3%, var(--abm-paper)) 30%,
  color-mix(in oklab, var(--ad-bg) 31.7%, var(--abm-paper)) 40%,
  color-mix(in oklab, var(--ad-bg) 50%,   var(--abm-paper)) 50%,
  color-mix(in oklab, var(--ad-bg) 68.3%, var(--abm-paper)) 60%,
  color-mix(in oklab, var(--ad-bg) 83.7%, var(--abm-paper)) 70%,
  color-mix(in oklab, var(--ad-bg) 94.2%, var(--abm-paper)) 80%,
  color-mix(in oklab, var(--ad-bg) 99.1%, var(--abm-paper)) 90%,
  var(--ad-bg) 100%); }

body[data-seam="smooth"] .sd-seam--i2p { background: linear-gradient(to bottom,
  var(--ad-bg) 0%,
  color-mix(in oklab, var(--ad-bg) 99.1%, var(--abm-paper)) 10%,
  color-mix(in oklab, var(--ad-bg) 94.2%, var(--abm-paper)) 20%,
  color-mix(in oklab, var(--ad-bg) 83.7%, var(--abm-paper)) 30%,
  color-mix(in oklab, var(--ad-bg) 68.3%, var(--abm-paper)) 40%,
  color-mix(in oklab, var(--ad-bg) 50%,   var(--abm-paper)) 50%,
  color-mix(in oklab, var(--ad-bg) 31.7%, var(--abm-paper)) 60%,
  color-mix(in oklab, var(--ad-bg) 16.3%, var(--abm-paper)) 70%,
  color-mix(in oklab, var(--ad-bg) 5.8%,  var(--abm-paper)) 80%,
  color-mix(in oklab, var(--ad-bg) 0.9%,  var(--abm-paper)) 90%,
  var(--abm-paper) 100%); }

/* ============================================================
   B · PIXEL DISSOLVE  (body[data-seam="pixel"])
   The canvas (injected by seam-pixel.js) takes over the band.
   ============================================================ */
.sd-seampx { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
body[data-seam="pixel"] .sd-seampx { display: block; }
body[data-seam="pixel"] .sd-seam { height: 380px; }
/* the dither IS the texture — drop the noise overlay */
body[data-seam="pixel"] .sd-seam::after { display: none; }