/* ============================================================
   BYC 2026 - Speed & Performance guide (speed-performance-2026.php).
   Loads after byc.css (tokens, fonts, nav atoms, grain), byc-chrome.css
   (shared nav/footer + masthead) and byc-install.css (.steps/.step/.idx/
   .tag/.step .frame/.ig-shot/.ig-cap). Adds only the speed-page extras:
   the "on this page" overview (TOC + framed hero accent), step bullet
   lists, side-by-side figures, and a self-contained lightbox.
   Generated from design-prototypes/speed-v1.html. The WP page content
   stays untouched in the DB (rollback = remove the filter branch).
   ============================================================ */

.sp{padding-bottom:var(--space-24)}

/* ---- overview: contents (left) + framed chip (right) ----
   <section>s reset: byc.css gives bare `section` 96px vertical padding (for
   landing full-bleed sections); this guide uses the masthead + .step rhythm
   like the install page instead. */
.sp-overview,.sp-tips{padding:0}
.sp-overview{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-16);
  align-items:start;margin-bottom:var(--space-12)}
.sp-h{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--space-5)}

/* table of contents (numbered, hairline-divided, hover arrow) */
.sp-toc{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sp-toc a{display:flex;align-items:center;gap:16px;padding:15px 4px;
  border-bottom:1px solid var(--line);color:var(--text-read);text-decoration:none;transition:.14s}
.sp-toc .n{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;
  color:var(--accent-dim);flex:none;width:20px}
.sp-toc .t{font-size:var(--fs-read);line-height:1.3;color:var(--text-read)}
.sp-toc .ar{margin-left:auto;font-family:var(--mono);color:var(--text-faint);
  opacity:0;transform:translateX(-5px);transition:.16s}
.sp-toc a:hover .t{color:var(--text)}
.sp-toc a:hover .ar{opacity:1;transform:translateX(0);color:var(--accent-dim)}

/* framed chip accent */
.sp-hero .frame{max-width:100%}
.sp-hero .ig-cap{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-faint);margin-top:var(--space-5)}

/* ---- tips: reuse .steps/.step from byc-install.css; add bullets + zoom ---- */
.sp .step{scroll-margin-top:90px}
.sp .step ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.sp .step li{position:relative;padding-left:18px;color:var(--text-read);
  font-size:var(--fs-read);line-height:var(--leading-read);font-weight:var(--weight-read);max-width:58ch}
.sp .step li::before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--accent)}
.sp .step li b{color:var(--text);font-weight:var(--weight-body)}
.sp .step .frame.zoom{cursor:zoom-in}
/* caption clears the frame's 8px corner-mark overhang (matches install ig-cap) */
.sp-cap{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-faint);margin-top:var(--space-5)}
/* two screenshots side by side (tick size): gap > 16px so the 8px corner-mark
   overhangs of adjacent frames never touch */
.sp-figs{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-6)}
.sp-figs .frame{margin-top:0;max-width:340px;flex:1 1 280px}

/* ---- lightbox (self-contained; mirrors byc-product.css) ---- */
.lightbox{position:fixed;inset:0;z-index:20000;display:none;align-items:center;
  justify-content:center;padding:4vw;background:rgba(5,5,6,.92);backdrop-filter:blur(6px);cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:88vh;display:block;border:1px solid var(--line-strong)}
.lightbox .cap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted);white-space:nowrap}
.lightbox .x{position:absolute;top:20px;right:26px;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;color:var(--text-muted);text-transform:uppercase}

/* ---- responsive ---- */
@media(max-width:880px){
  .sp-overview{grid-template-columns:1fr;gap:var(--space-10)}
  .sp-hero{order:-1}
}
@media(max-width:560px){
  .sp{padding-bottom:var(--space-16)}
  .sp .step .frame,.sp-figs .frame{max-width:100%}
  .sp-figs{flex-direction:column}
}

/* pulse keyframes (standing rule: every 2026 stylesheet ships them) */
@keyframes bycPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-glow)}
  50%{box-shadow:0 0 0 8px rgba(242,32,46,.07)}}