/* =========================================================================
   UNFOLDED · Styleguide — documentation chrome ONLY.
   The components on this page are styled entirely by story.css (the real
   design system). This file just turns the fixed event view into a long
   scrollable document and adds swatch grids, section headers, and the small
   "class name" captions under each live sample. Loaded only on styleguide#show.
   ========================================================================= */

/* --- unlock the page ----------------------------------------------------- */
/* story.css locks .story-page to a fixed-height, non-scrolling viewport
   (it lives over a full-screen map). The styleguide reuses every base reset
   from .story-page but needs to scroll and supply its own backdrop. */
body.sg-page{height:auto;min-height:100dvh;overflow-x:hidden;overflow-y:auto;
  background:
    radial-gradient(120% 90% at 50% -10%, #313946 0%, transparent 60%),
    linear-gradient(180deg, #20262f 0%, #161b22 100%);
  background-attachment:fixed}

/* --- page scaffold ------------------------------------------------------- */
.sg{max-width:1080px;margin:0 auto;padding:72px 28px 140px}
.sg-hero{margin:0 0 64px}
.sg-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--amber)}
.sg-hero h1{font-family:var(--serif);font-weight:700;font-size:46px;line-height:1.05;letter-spacing:-.02em;
  color:var(--t1);margin:16px 0 0;text-wrap:balance}
.sg-hero p{font-size:15.5px;line-height:1.7;color:var(--t3);margin:16px 0 0;max-width:60ch}
.sg-hero .sg-meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.sg-pill{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t2);
  border:1px solid var(--hair-2);border-radius:5px;padding:6px 11px;background:rgba(40,46,56,.5)}

/* --- sections ------------------------------------------------------------ */
.sg-section{margin:0 0 60px;scroll-margin-top:24px}
.sg-section>h2{display:flex;align-items:baseline;gap:14px;margin:0 0 6px;
  font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--t3)}
.sg-section>h2 .n{font-family:var(--mono);font-size:11px;color:var(--amber-dim);letter-spacing:.1em}
.sg-section>.sg-lead{font-size:14px;line-height:1.65;color:var(--t3);margin:0 0 22px;max-width:64ch}
.sg-rule{height:1px;background:var(--hair);border:0;margin:0 0 30px}

.sg-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);
  margin:30px 0 14px}

/* --- captions under live samples ----------------------------------------- */
.sg-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--t4);margin-top:10px;line-height:1.5}
.sg-note code,code.sg-code{font-family:var(--mono);font-size:11px;color:var(--amber-2);
  background:rgba(242,181,74,.08);border:1px solid color-mix(in srgb,var(--amber) 16%,transparent);
  border-radius:4px;padding:1px 6px;letter-spacing:0}

/* --- demo frame (gives floating panels a surface to sit on) -------------- */
.sg-demo{position:relative;border:1px solid var(--hair);border-radius:14px;padding:30px;
  background:linear-gradient(180deg,rgba(13,17,23,.55),rgba(13,17,23,.2));overflow:hidden}
.sg-demo.sg-pad-lg{padding:44px}
.sg-demo+.sg-note{margin-top:12px}
.sg-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.sg-row.sg-top{align-items:flex-start}
.sg-stack{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
/* a light backdrop, for furniture that lives over the light Positron map */
.sg-demo.sg-light{background:linear-gradient(180deg,#eef0ee,#e3e5e2)}

/* =========================================================================
   COLOR SWATCHES
   ========================================================================= */
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.sg-swatch{border:1px solid var(--hair);border-radius:10px;overflow:hidden;background:var(--panel)}
.sg-chip{height:74px;border-bottom:1px solid var(--hair)}
.sg-chip.sg-ck{background-image:
    linear-gradient(45deg,#3a4150 25%,transparent 25%),linear-gradient(-45deg,#3a4150 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#3a4150 75%),linear-gradient(-45deg,transparent 75%,#3a4150 75%);
  background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}
.sg-swatch .sg-info{padding:11px 13px 13px}
.sg-swatch .sg-name{font-size:13px;color:var(--t1);font-weight:500}
.sg-swatch .sg-var{font-family:var(--mono);font-size:10.5px;color:var(--amber-2);letter-spacing:.02em;margin-top:5px}
.sg-swatch .sg-val{font-family:var(--mono);font-size:10px;color:var(--t4);letter-spacing:.04em;margin-top:3px}
.sg-swatch .sg-use{font-size:11px;color:var(--t4);line-height:1.45;margin-top:8px}

/* =========================================================================
   TYPE SPECIMENS
   ========================================================================= */
.sg-type-row{display:grid;grid-template-columns:128px 1fr;gap:24px;align-items:baseline;
  padding:18px 0;border-top:1px solid var(--hair)}
.sg-type-row:first-of-type{border-top:0}
.sg-type-row .sg-tk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--t4);text-transform:uppercase;line-height:1.5}
.sg-type-row .sg-tk b{display:block;color:var(--amber-2);font-weight:400}
.sg-serif{font-family:var(--serif)}
.sg-sans{font-family:var(--sans)}
.sg-mono{font-family:var(--mono)}

/* =========================================================================
   STATIC OVERRIDES — pull absolutely-positioned components inline so they
   can be shown in the document flow instead of floating over a map.
   ========================================================================= */
.sg-demo .panel{max-width:392px}
/* timeline needs explicit width + visible readout when shown standalone */
.sg-tl-demo{position:relative;width:100%;max-width:560px}
.sg-tl-demo .timeline{margin-top:34px}
/* person card: shown in flow instead of as a fixed overlay */
.sg-person-demo{display:flex;justify-content:center}
.sg-person-demo .person{position:relative;left:auto;top:auto;width:100%;max-width:540px;
  max-height:none;transform:none;opacity:1;visibility:visible}
/* lightbox chrome: render the buttons/caption in a contained frame */
.sg-lb-demo{position:relative;min-height:160px;background:rgba(7,6,4,.92);border-radius:12px}
.sg-lb-demo .lb-btn{position:static;transform:none}
.sg-lb-demo .lb-cap{position:absolute;left:0;right:0;bottom:18px}
/* share menu: drop the absolute pop into the flow so every row is visible */
.sg-share-demo .share-pop{position:static;width:232px;opacity:1;visibility:visible;transform:none;margin-top:14px}
.sg-share-demo .share-pop::after{display:none}

/* =========================================================================
   TABLE OF CONTENTS (sticky rail)
   ========================================================================= */
.sg-toc{position:fixed;top:0;left:0;bottom:0;width:208px;padding:72px 18px;z-index:5;
  border-right:1px solid var(--hair);background:rgba(16,20,27,.55);overflow-y:auto;
  scrollbar-width:none}
.sg-toc::-webkit-scrollbar{display:none}
.sg-toc .sg-toc-brand{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--t1);margin-bottom:20px}
.sg-toc a{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t4);text-decoration:none;padding:6px 0;transition:.15s}
.sg-toc a:hover{color:var(--amber-2)}
.sg-has-toc .sg{margin-left:248px;margin-right:24px}

@media (max-width:1080px){
  .sg-toc{display:none}
  .sg-has-toc .sg{margin-left:auto;margin-right:auto}
}
@media (max-width:560px){
  .sg{padding:48px 18px 100px}
  .sg-hero h1{font-size:34px}
  .sg-type-row{grid-template-columns:1fr;gap:8px}
}