/* Builder Skills page: document layout, generated catalog cards, the loop transcript */

.doc{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(2rem,5vw,4rem);padding-block:clamp(3rem,6vw,5rem)}
.doc-toc{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
.doc-toc p{font-size:.82rem;font-weight:650;color:var(--muted);margin-bottom:.6rem}
.doc-toc ol{list-style:none;display:grid;gap:.15rem;border-left:2px solid var(--line)}
.doc-toc a{display:block;padding:.35rem .9rem;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:.93rem;transition:color 160ms ease,border-color 160ms ease}
.doc-toc a.on{color:var(--text);border-left-color:var(--purple)}
@media (hover:hover) and (pointer:fine){.doc-toc a:hover{color:var(--text)}}
@media (max-width:900px){.doc{grid-template-columns:1fr}.doc-toc{position:static}.doc-toc ol{display:flex;flex-wrap:wrap;border-left:0;gap:.4rem}.doc-toc a{border:1px solid var(--line);border-radius:99px;padding:.3rem .8rem;margin:0}}

.prose{min-width:0;max-width:880px}
.prose h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:3rem 0 1rem;scroll-margin-top:calc(var(--nav-h) + 20px)}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1rem;max-width:72ch}
.prose ul{margin:0 0 1.25rem;padding-left:1.25rem;display:grid;gap:.6rem;max-width:72ch}
.prose li::marker{color:var(--purple)}
.prose a{color:var(--link)}
.prose code{font-family:var(--mono);font-size:.88em;padding:.1rem .35rem;border-radius:6px;background:var(--accent-soft);color:var(--link)}
.prose .muted{color:var(--muted);font-size:.95rem}
.callout{margin:1.75rem 0;padding:1.1rem 1.25rem;border-radius:var(--r-panel);background:var(--done-soft);border:1px solid color-mix(in srgb,var(--done) 30%,transparent)}
.callout p{margin:0}
.client-list{list-style:none;padding:0!important;gap:0!important;border-top:1px solid var(--line)}
.client-list li{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.client-list a{font-weight:650}
.client-list span{color:var(--muted)}
@media (max-width:620px){.client-list li{grid-template-columns:1fr;gap:.15rem}}

/* Generated catalog cards (markup owned by ai-twin/gen_skills_catalog.py) */
.skillcat{--cat:var(--purple);--cat-ink:color-mix(in srgb,var(--cat) 62%,var(--text));border:1px solid var(--line);border-radius:var(--r-panel);background:var(--surface);margin:0 0 .7rem;overflow:hidden;transition:border-color 200ms ease}
:root[data-theme="dark"] .skillcat{--cat-ink:color-mix(in srgb,var(--cat) 72%,#ffffff)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .skillcat{--cat-ink:color-mix(in srgb,var(--cat) 72%,#ffffff)}}
.skillcat[open]{border-color:color-mix(in srgb,var(--cat) 50%,transparent)}
summary.skillcat__head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;cursor:pointer;list-style:none;padding:1rem 1.25rem;transition:background-color 160ms ease}
summary.skillcat__head::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){summary.skillcat__head:hover{background:var(--surface-2)}}
.skillcat__logo{width:26px;height:26px;flex:none}
.skillcat__name{font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.skillcat__mkt,.skillcat__mkt code{font-size:.75rem;color:var(--muted)}
.skillcat__count{font-size:.8rem;font-weight:600;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
.skillcat__chev{color:var(--muted);flex:none;transition:transform 200ms var(--ease-out)}
.skillcat[open] .skillcat__chev{transform:rotate(90deg)}
.skillcat__body{padding:0 1.25rem 1.1rem}
.skillcat__desc{font-size:.95rem;color:var(--muted);margin:0 0 .6rem}
.skillcat__repo{display:inline-block;font-size:.82rem;font-weight:600;color:var(--link);margin:0 0 .6rem}
.skillcat .badge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:650;padding:.15rem .55rem;border-radius:99px;background:var(--accent-soft);color:var(--link)}
.skillcat .badge--purple{background:var(--accent-soft);color:var(--link)}
.skillcat .badge--preview{background:var(--surface-2);color:var(--muted)}
.sk-rows{display:flex;flex-direction:column;margin-top:.4rem;border-top:1px solid var(--line)}
.sk-row{display:flex;gap:16px;align-items:baseline;font-size:.93rem;line-height:1.5;padding:.55rem .15rem;border-bottom:1px solid var(--line)}
.skillcat .sk-rows .sk-row code{flex:0 0 auto;min-width:215px;font-family:var(--mono);font-size:.82rem;font-weight:600;padding:.2rem .6rem;border-radius:6px;background:color-mix(in srgb,var(--cat) 12%,transparent);color:var(--cat-ink);border:1px solid color-mix(in srgb,var(--cat) 28%,transparent)}
.sk-row span{color:var(--muted)}
.sk-grp{font-weight:700;font-size:.8rem;color:var(--cat-ink);padding:.9rem .15rem .4rem;margin-top:.3rem;border-top:1px solid var(--line)}
.sk-rows .sk-grp:first-child{border-top:0;margin-top:0;padding-top:.3rem}
.sk-tabs{display:flex;gap:2px;margin:.6rem 0 .15rem;border-bottom:1px solid var(--line)}
.sk-tab{color:var(--muted);font-size:.85rem;font-weight:650;padding:.4rem .8rem;border-bottom:2px solid transparent}
.sk-tab[aria-selected="true"]{color:var(--cat-ink);border-bottom-color:var(--cat)}
.sk-panel[hidden]{display:none}
.sk-cmds{display:flex;flex-wrap:wrap;gap:6px}
.sk-cmds code{font-family:var(--mono);font-size:.78rem;padding:.15rem .5rem;border-radius:6px;background:var(--accent-soft);color:var(--link)}
.sk-legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.5rem}
.sk-legend span{font-size:.78rem;padding:.2rem .6rem;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.skillcat__video{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;margin:.35rem 0 1rem}
.skillcat__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:560px){.sk-row{flex-direction:column;gap:2px}.skillcat .sk-rows .sk-row code{min-width:0}}

/* The loop: a client transcript, a product object, dark in both themes */
.loop{border:1px solid #24212f;border-radius:var(--r-surface);background:#08070d;overflow:hidden;margin:1.25rem 0;color:#cfcbe0;box-shadow:var(--shadow-exhibit)}
.loop__bar{display:flex;align-items:center;gap:8px;padding:.65rem 1rem;border-bottom:1px solid #1f1c2a}
.loop__bar i{width:8px;height:8px;border-radius:50%;background:#2dd4bf;display:block}
.loop__bar span{font-size:.75rem;color:#8d88a0;font-family:var(--mono)}
.loop__body{padding:.2rem 1.1rem .6rem}
.loop__turn{padding:.85rem 0;border-bottom:1px solid #1a1724}
.loop__turn:last-child{border-bottom:0}
.loop__you{color:#f4f2fa;font-size:.92rem;line-height:1.5;margin-bottom:.45rem}
.loop__you b{color:#e0bf5f;font-weight:700;margin-right:.5rem}
.loop__act{font-family:var(--mono);font-size:.78rem;color:#a9a5b8;padding:.12rem 0 .12rem 1rem}
.loop__act .t{color:#c4b5fd}
.loop__res{color:#a9a5b8;font-size:.84rem;line-height:1.5;padding:.05rem 0 .2rem 1rem}
.loop__res b{color:#f4f2fa;font-weight:600}
.loop__plan{margin:.5rem 0 .1rem 1rem;padding:.7rem .9rem;border-radius:10px;background:rgba(124,58,237,.12);border:1px solid rgba(167,139,250,.25);color:#ddd6fe;font-size:.84rem;line-height:1.5}
.loop__plan b{color:#fff}
.loop__plan ol{margin:.35rem 0 0;padding-left:1.15rem}
.loop code{font-family:var(--mono);background:rgba(124,58,237,.18);color:#c4b5fd;padding:1px 5px;border-radius:5px;font-size:.95em}
code.sk{background:color-mix(in srgb,var(--c) 16%,transparent)!important;color:var(--c)!important;border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.sk--dv{--c:#16BBDA}.sk--pp{--c:#8F8FFF}.sk--canvas{--c:#D467B9}.sk--pa{--c:#0FAFFF}.sk--mda{--c:#E48CC7}.sk--cs{--c:#2BDABE}.sk--code{--c:#F7C4E2}.sk--mob{--c:#1EC8B0}.sk--mcp{--c:#A855F7}.sk--docs{--c:#5EB2FF}.sk--ado{--c:#4FA8F5}

/* Closing gate */
.gate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem clamp(2rem,5vw,4.5rem);align-items:start}
.gate .lede{margin-bottom:1.75rem}
.gate-note{margin-top:1rem;font-size:.88rem;color:var(--ink-muted)}
@media (max-width:900px){.gate{grid-template-columns:1fr}}
.skillcat .badge[style]{background:var(--accent-soft)!important;color:var(--link)!important}