/* embed.css — /embed host page. SEMANTIC TOKENS ONLY, zero hardcoded hex.
   (badge.js is the one deliberate exception in this system: it renders in a
   shadow root on a foreign document and cannot see tokens.css, so it inlines the
   token values. This page can, and does, reference them.) */

.emb-lede{font-size:var(--fs-20);line-height:var(--lh-normal);color:var(--fg-on-dark-2);max-width:64ch}
.emb-lede strong{color:var(--fg-on-dark-1);font-weight:500}

.emb-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--sp-12);align-items:start}
@media(max-width:900px){.emb-grid{grid-template-columns:minmax(0,1fr)}}

.emb-panel{border:1px solid var(--border-on-dark);background:var(--bg-dark-elev);padding:var(--sp-6)}
.emb-panel+.emb-panel{margin-top:var(--sp-4)}

.emb-label{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-on-dark-3);margin-bottom:var(--sp-3)}

.emb-search{width:100%;padding:var(--sp-3) var(--sp-4);background:var(--bg-dark);border:1px solid var(--border-on-dark);color:var(--fg-on-dark-1);font:inherit;font-size:var(--fs-14)}
.emb-search:focus{outline:2px solid var(--accent);outline-offset:1px}

.emb-list{margin-top:var(--sp-3);max-height:220px;overflow:auto;display:flex;flex-direction:column;border-top:1px solid var(--border-on-dark)}
.emb-list button{text-align:left;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-on-dark);color:var(--fg-on-dark-2);font-size:var(--fs-13);display:flex;justify-content:space-between;gap:var(--sp-3)}
.emb-list button:hover{background:var(--bg-dark-hover);color:var(--fg-on-dark-1)}
.emb-list button[aria-current="true"]{color:var(--fg-on-dark-1);border-left:2px solid var(--accent);background:var(--bg-dark-card)}
.emb-list em{font-style:normal;color:var(--fg-on-dark-3);font-family:var(--font-mono);font-size:var(--fs-12)}

.emb-toggles{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.emb-seg{display:flex;border:1px solid var(--border-on-dark)}
.emb-seg button{padding:var(--sp-2) var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:var(--tracking-wide);color:var(--fg-on-dark-3)}
.emb-seg button+button{border-left:1px solid var(--border-on-dark)}
.emb-seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--fg-on-dark-1);box-shadow:inset 0 1px 0 0 var(--border-on-dark-strong)}

.emb-stage{display:flex;align-items:center;justify-content:center;min-height:420px;padding:var(--sp-10);border:1px solid var(--border-on-dark)}
.emb-stage[data-bg="light"]{background:var(--bg-elevated)}
.emb-stage[data-bg="dark"]{background:var(--bg-dark)}

.emb-code{margin-top:var(--sp-4);border:1px solid var(--border-on-dark);background:var(--bg-dark)}
/* The Copy control sits in its own toolbar row, NOT absolutely over the code. An
   overlay clipped the tail of the href on the very artifact the reader is meant
   to read — and padding-right on the <pre> would cost width on all 15+ lines of
   the fallback payload. */
.emb-code__bar{display:flex;justify-content:flex-end;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-on-dark)}
.emb-code pre{margin:0;padding:var(--sp-5);overflow:auto;font-family:var(--font-mono);font-size:var(--fs-12);line-height:var(--lh-normal);color:var(--fg-on-dark-2);white-space:pre-wrap;word-break:break-word;max-height:340px}
.emb-copy{padding:var(--sp-2) var(--sp-4);border:1px solid var(--border-on-dark-strong);background:var(--bg-dark-card);color:var(--fg-on-dark-1);font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:var(--tracking-wide)}
.emb-copy:hover{background:var(--bg-dark-hover)}
.emb-copy[data-copied="1"]{color:var(--status-success);border-color:var(--status-success)}

.emb-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-8)}
.emb-cols h3{font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--fg-on-dark-3);font-weight:400;margin:0 0 var(--sp-3)}
.emb-cols p,.emb-cols li{font-size:var(--fs-14);line-height:var(--lh-relaxed);color:var(--fg-on-dark-2)}

.emb-rules{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3);max-width:70ch}
.emb-rules li{padding-left:var(--sp-5);position:relative;font-size:var(--fs-16);line-height:var(--lh-normal);color:var(--fg-on-dark-2)}
.emb-rules li:before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--border-on-dark-strong)}
.emb-rules strong{color:var(--fg-on-dark-1);font-weight:500}

.emb-note{margin-top:var(--sp-6);padding:var(--sp-5);border:1px solid var(--border-on-dark);border-left:1px solid var(--gold);background:var(--gold-soft);font-size:var(--fs-14);line-height:var(--lh-relaxed);color:var(--fg-on-dark-2);max-width:72ch}

.emb-faq{max-width:74ch;border-top:1px solid var(--border-on-dark)}
.emb-faq dt{padding:var(--sp-6) 0 var(--sp-2);font-size:var(--fs-18);color:var(--fg-on-dark-1);font-weight:400}
.emb-faq dd{margin:0 0 var(--sp-6);padding:0 0 var(--sp-6);border-bottom:1px solid var(--border-on-dark);font-size:var(--fs-14);line-height:var(--lh-relaxed);color:var(--fg-on-dark-2)}

.emb-meta{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--fg-on-dark-3);letter-spacing:var(--tracking-wide)}
.emb-meta a{color:var(--accent-hover);text-decoration:underline;text-underline-offset:2px}
.emb-meta a:hover{color:var(--fg-on-dark-1)}
a.emb-link{color:var(--accent-hover);text-decoration:underline;text-underline-offset:2px}
a.emb-link:hover{color:var(--fg-on-dark-1)}