/* Plugin pages (/forge/<id>) and the guide (/forge/<id>/docs). Shares tokens and components with site.css. */
.pg{--ember:var(--accent, #e2772e); --ember-hot:var(--accent-hot, #ffb866)}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); margin:0 0 22px}
.crumbs a{color:var(--fg-dim); text-decoration:none}
.crumbs a:hover{color:var(--ember-hot)}
.crumbs .sep{color:var(--fg-faint)}
.crumbs [aria-current]{color:var(--fg)}

/* hero */
.pg-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--bg)}
.pg-hero::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(12,10,9,.2), rgba(12,10,9,.55) 60%, var(--bg))}
.pg-hero-in{position:relative; z-index:1; padding-block:clamp(56px, 8vw, 110px) clamp(48px, 6vw, 80px)}
.pg-title{font-family:var(--f-display); font-size:clamp(3.4rem, 11vw, 8.5rem); line-height:.86; font-weight:800; margin:14px 0 18px; color:var(--fg); text-wrap:balance}
.pg-meta{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-bottom:26px}
.pg-tag{font-size:var(--step-1); color:var(--fg); line-height:1.4}
.pg-hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px 48px; align-items:center}
.pg-hero-grid .lead + .lead{margin-top:14px}
.pg-hero-media{position:relative; aspect-ratio:16 / 9; background:var(--bg-2); box-shadow:0 0 0 1px var(--line-2), 0 30px 80px rgba(0,0,0,.5); overflow:hidden}
.pg-hero-media img,.pg-hero-media video,.fb-media img,.fb-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.pg-stats{margin-top:44px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr))}
.pg-stats div:last-child:nth-child(odd){grid-column:auto}
.pg-stats b{font-size:clamp(2.2rem, 4.6vw, 3.4rem)}

/* features */
.pg-features{position:relative; overflow:hidden}
.pg-back{opacity:.28; pointer-events:none}
.pg-features .wrap{position:relative; z-index:1; display:grid; gap:26px}
.fb .plate-in{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center}
.fb.flip .plate-in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.fb.flip .fb-media{order:2}
.fb-media{position:relative; aspect-ratio:16 / 9; background:var(--bg-2); align-self:stretch}
.fb-copy{padding:34px 36px}
.fb-copy h3{font-family:var(--f-display); font-size:2.2rem; line-height:1; margin:0 0 14px; font-weight:700}
.fb-copy p{color:var(--fg-dim); margin:0}
.fb-copy p + p{margin-top:12px}
.glance{margin:14px 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line)}
.glance div{background:var(--bg); padding:22px 24px}
.glance dt{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--frost); margin:0 0 8px}
.glance dd{margin:0; color:var(--fg)}

/* tutorials */
.vids{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:22px}
.vid h3{font-family:var(--f-body); font-size:1.05rem; font-weight:500; margin:0; padding:16px 18px 18px}
.vid-play{position:relative; display:block; width:100%; aspect-ratio:16 / 9; padding:0; border:0; background:var(--bg-2); cursor:pointer; overflow:hidden}
.vid-play img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s, opacity .3s}
.vid-play:hover img{transform:scale(1.04); opacity:.85}
.vid-btn{position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; display:grid; place-items:center; background:linear-gradient(180deg, var(--ember-hot), var(--ember)); color:var(--ink); font-size:1.4rem; clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px)}
.vid-list{position:absolute; inset:0; display:grid; place-items:center; font-size:4rem; color:var(--fg-faint)}
.vid-frame{display:block; width:100%; aspect-ratio:16 / 9; border:0; background:#000}

/* guide teaser and chapters */
.guide-teaser{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px 56px; align-items:start}
.guide-teaser p{color:var(--fg-dim); margin:0}
.guide-teaser p + p{margin-top:12px}
.chapters{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line)}
.chapters li{background:var(--bg)}
.chapters a{display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; align-items:baseline; padding:14px 16px; color:var(--fg); text-decoration:none; transition:background .25s}
.chapters a:hover{background:var(--bg-2); color:var(--ember-hot)}
.chapters .n{font-family:var(--f-mono); font-size:.72rem; color:var(--frost)}

/* ---------- the guide ---------- */
.docs{position:relative; overflow:clip}
.docs-back{position:absolute; opacity:.14; pointer-events:none}
.docs-empty{padding-block:clamp(40px, 6vw, 72px)}
.docs-grid{position:relative; z-index:1; display:grid; grid-template-columns:300px minmax(0,1fr); gap:56px; padding-block:clamp(32px, 5vw, 64px) 80px; align-items:start}
.docs-side{position:sticky; top:78px}
.docs-side-in{max-height:calc(100vh - 100px); overflow:auto; padding-right:6px; scrollbar-width:thin}
.docs-side .crumbs{margin-bottom:14px}
.docs-search{position:relative; margin:0 0 14px}
.docs-search input{width:100%; box-sizing:border-box; font:inherit; font-size:.95rem; color:var(--fg); background:var(--bg-2); border:0; box-shadow:inset 0 0 0 1px var(--line-2); padding:10px 36px 10px 12px; outline:none}
.docs-search input:focus{box-shadow:inset 0 0 0 1px var(--ember)}
.docs-clear{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--fg-dim); cursor:pointer; font-size:.9rem; padding:6px}
.docs-hits{display:grid; gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line); margin-bottom:16px}
.docs-hits .lbl{background:var(--bg); padding:8px 10px}
.docs-hits a{display:grid; gap:4px; padding:10px 12px; background:var(--bg); color:var(--fg); text-decoration:none}
.docs-hits a:hover{background:var(--bg-2)}
.docs-hits b{font-weight:600; font-size:.92rem}
.docs-hits span{font-size:.82rem; color:var(--fg-dim)}
.docs-hits mark{background:rgba(226,119,46,.28); color:var(--fg); padding:0 1px}
.docs-toc ol{list-style:none; margin:0; padding:0}
.docs-toc > ol > li{border-top:1px solid var(--line)}
.docs-toc a{display:block; text-decoration:none; color:var(--fg-dim); padding:9px 8px; font-size:.92rem; line-height:1.3; transition:color .2s, background .2s}
.docs-toc a:hover{color:var(--fg); background:var(--bg-2)}
.docs-toc li.ch > a{display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; color:var(--fg); font-weight:600}
.docs-toc .n{font-family:var(--f-mono); font-size:.7rem; color:var(--frost); padding-top:2px}
.docs-toc li.ch > ol{display:none; padding:0 0 8px 36px}
.docs-toc li.ch.open > ol{display:block}
.docs-toc li.ch > ol a{padding:5px 8px; font-size:.86rem}
.docs-toc a[aria-current]{color:var(--ember-hot); box-shadow:inset 2px 0 0 var(--ember)}
.docs-side-foot{margin-top:18px; padding-top:14px; border-top:1px solid var(--line)}
.docs-menu{display:none}
.docs-main{min-width:0; max-width:80ch}
.docs-head{margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid var(--line)}
.docs-head .pg-title{font-size:clamp(2.6rem, 6vw, 4.6rem)}
.docs-head .lbl{margin-top:12px}
.docs-pn{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:40px 0 0}
.docs-pn a{display:grid; gap:4px; padding:14px 16px; text-decoration:none; color:var(--fg); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .2s, color .2s}
.docs-pn a:hover{box-shadow:inset 0 0 0 1px var(--ember); color:var(--ember-hot)}
.docs-pn a.nx{text-align:right}

/* the guide body: the builder's semantics on the site's theme */
.guide{color:var(--fg); line-height:1.62; counter-reset:chapter}
.guide h1{font-family:var(--f-display); font-size:2.9rem; line-height:1; font-weight:800; margin:64px 0 18px; padding-top:30px; border-top:1px solid var(--line); scroll-margin-top:90px; counter-increment:chapter}
.guide h1:first-child{margin-top:0; padding-top:0; border-top:0}
.guide h1::before{content:counter(chapter, decimal-leading-zero); display:block; font:600 .74rem var(--f-mono); letter-spacing:.3em; color:var(--ember); margin-bottom:10px}
.guide h2{font-family:var(--f-display); font-size:1.9rem; line-height:1.05; font-weight:700; margin:40px 0 12px; scroll-margin-top:90px}
.guide h3{font-size:1.1rem; font-weight:700; color:var(--frost); margin:26px 0 8px; scroll-margin-top:90px}
.guide h4{font-size:1rem; margin:18px 0 6px}
.guide p,.guide li,.guide dd{color:var(--fg-dim)}
.guide p{margin:0 0 12px}
.guide strong,.guide b{color:var(--fg); font-weight:600}
.guide a{color:var(--ember-hot)}
.guide ul,.guide ol{margin:0 0 14px; padding-left:22px}
.guide li{margin:4px 0}
.guide li > p{margin:0 0 6px}
.guide .chapter-intro{font-size:var(--step-1); color:var(--fg); line-height:1.5; margin:0 0 20px}
.guide dl{margin:0 0 14px}
.guide dt{font-weight:600; color:var(--fg); margin-top:10px}
.guide dd{margin:2px 0 0}
.guide img{max-width:100%; height:auto}
.guide figure{margin:22px 0 26px; text-align:center}
.guide figure > img,.guide .pair-cell > img{display:block; margin:0 auto; box-shadow:0 0 0 1px var(--line-2), 0 18px 40px rgba(0,0,0,.45); cursor:zoom-in}
.guide figcaption{font-family:var(--f-mono); font-size:.74rem; color:var(--fg-dim); margin-top:10px; text-align:center}
.guide figcaption b{color:var(--frost)}
.guide figure.pair .pair-row{display:flex; justify-content:space-between; gap:14px}
.guide figure.pair .pair-cell{position:relative; display:block; flex:1 1 0; min-width:0}
.guide figure.pair .pair-cell > img{width:100%}
.guide figure.pair .pair-tag{position:absolute; left:10px; top:10px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.7); color:#fff; font:700 .74rem/22px var(--f-mono); text-align:center}
.guide .steps{counter-reset:step}
.guide .steps ol{list-style:none; padding-left:0; margin:8px 0 16px}
.guide .steps > figure{margin-left:38px}
.guide .steps ol > li{counter-increment:step; position:relative; padding:2px 0 8px 38px; margin:0 0 4px}
.guide .steps ol > li::before{content:counter(step); position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%; background:var(--ember); color:var(--ink); font:700 .78rem/24px var(--f-mono); text-align:center}
.guide .steps ol > li figure{margin-top:8px}
.guide .ui{display:inline-block; font:600 .8rem/1.5 var(--f-mono); color:var(--fg); background:var(--plate-2); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:4px; padding:0 6px; white-space:nowrap}
.guide .menu{white-space:nowrap}
.guide .menu .sep{color:var(--fg-faint); margin:0 4px; font-weight:600}
.guide kbd{display:inline-block; font:600 .78rem/1.5 var(--f-mono); color:var(--fg); background:var(--bg-2); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:4px; padding:0 6px}
.guide code{font-family:var(--f-mono); font-size:.86em; background:var(--bg-2); border-radius:3px; padding:1px 5px; box-shadow:inset 0 0 0 1px var(--line)}
.guide pre{font:.84rem/1.5 var(--f-mono); background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line); padding:14px 16px; overflow:auto; white-space:pre-wrap; margin:8px 0 16px}
.guide pre code{background:none; box-shadow:none; padding:0; font-size:inherit}
.guide pre.report{background:#07090c; color:#dfe3ea; box-shadow:inset 0 0 0 1px var(--line-2)}
.guide pre.report .hl{color:var(--ember-hot)}
.guide blockquote{margin:10px 0 16px; padding:10px 16px; background:var(--bg-2); border-left:3px solid var(--ember)}
.guide blockquote p{margin:0}
.guide .admonition{margin:14px 0 18px; padding:12px 16px 10px 18px; border-left:4px solid var(--ad, #4f8fe0); background:var(--ad-wash, rgba(79,143,224,.1))}
.guide .admonition p{margin:0 0 6px}
.guide .admonition .admonition-title{font:700 .72rem var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ad, #4f8fe0); margin:0 0 6px}
.guide .admonition.tip{--ad:#5fc38c; --ad-wash:rgba(95,195,140,.1)}
.guide .admonition.warning,.guide .admonition.careful{--ad:#e8705f; --ad-wash:rgba(232,112,95,.1)}
.guide .admonition.example{--ad:var(--ember-hot); --ad-wash:rgba(226,119,46,.1)}
.guide table{width:100%; border-collapse:separate; border-spacing:0; margin:10px 0 18px; font-size:.92rem; box-shadow:0 0 0 1px var(--line)}
.guide thead th{background:var(--plate-2); color:var(--fg); font:600 .72rem var(--f-mono); letter-spacing:.08em; text-transform:uppercase; text-align:left; padding:9px 11px}
.guide tbody td{padding:9px 11px; vertical-align:top; border-top:1px solid var(--line); color:var(--fg-dim)}
.guide tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.guide td:first-child{font-weight:600; color:var(--fg)}
.guide table.legend td:first-child{width:40px; text-align:center}
.guide .badge{display:inline-block; width:22px; height:22px; border-radius:50%; background:var(--ember); color:var(--ink); font:700 .74rem/22px var(--f-mono); text-align:center}
.guide .card{columns:2; column-gap:28px; font-size:.92rem}
.guide .card h3{margin-top:6px; break-after:avoid}
.guide .card ul{padding-left:16px; break-inside:avoid}

@media (max-width:960px){
  .docs-grid{grid-template-columns:minmax(0,1fr); gap:0}
  .docs-menu{display:inline-flex; justify-self:start; margin-bottom:20px}
  .docs-side{position:fixed; inset:0; z-index:60; background:rgba(12,10,9,.96); backdrop-filter:blur(10px); padding:max(16px, env(safe-area-inset-top, 0px)) 16px 16px; transform:translateX(-100%); transition:transform .25s; top:0}
  .docs-side.open{transform:none}
  .docs-side-in{max-height:100%; padding-right:0}
  .guide .card{columns:1}
  .guide figure.pair .pair-row{flex-direction:column}
}

@media (max-width:860px){
  .pg-hero-grid,.guide-teaser{grid-template-columns:minmax(0,1fr)}
  .fb .plate-in,.fb.flip .plate-in{grid-template-columns:minmax(0,1fr)}
  .fb.flip .fb-media{order:0}
  .fb-copy{padding:24px 22px 26px}
  .chapters{grid-template-columns:minmax(0,1fr)}
}