/* Argenta Developer Docs — public /developers section. Stripe-style three-column shell.
   Neutrals are black/white overlays; every accent comes from an Argenta design token. */

.docs-shell{--docs-fg:var(--color-body); --docs-muted:color-mix(in srgb, var(--color-body), #FFF 42%); --docs-border:rgba(0,0,0,.09); --docs-border-strong:rgba(0,0,0,.14); --docs-bg:#FFF; --docs-sidebar-bg:rgba(39,40,42,.025); --docs-hover:color-mix(in srgb, var(--color-primary), #FFF 90%); --docs-accent:var(--color-primary); --docs-accent-soft:color-mix(in srgb, var(--color-primary), #FFF 88%); --docs-code-bg:var(--color-body); --docs-code-fg:rgba(255,255,255,.92); --docs-code-muted:rgba(255,255,255,.5); --docs-topbar-h:60px; min-height:100vh; background:var(--docs-bg); color:var(--docs-fg); font-family:var(--font-primary)}
.docs-shell *{box-sizing:border-box}

/* Top bar */
.docs-topbar{position:sticky; top:0; z-index:40; height:var(--docs-topbar-h); display:flex; align-items:center; gap:1rem; padding:0 1.25rem; background:var(--docs-bg); border-bottom:1px solid var(--docs-border)}
.docs-brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--docs-fg)}
.docs-brand-logo{height:26px; width:auto}
.docs-brand-tag{font-family:var(--font-headings); font-weight:700; font-size:.9rem; letter-spacing:.02em; color:var(--docs-accent)}
.docs-topbar-links{margin-left:auto; display:flex; align-items:center; gap:1.4rem}
.docs-topbar-links a{text-decoration:none; color:var(--docs-muted); font-size:.9rem; font-weight:600}
.docs-topbar-links a:hover{color:var(--docs-accent)}
.docs-topbar-links a.docs-app-link{color:var(--docs-accent)}
.docs-nav-toggle{display:none; border:1px solid var(--docs-border); background:var(--docs-bg); color:var(--docs-fg); width:38px; height:38px; border-radius:.5rem; cursor:pointer; font-size:1rem}

/* Body grid */
.docs-body{display:grid; grid-template-columns:264px minmax(0,1fr) 220px; align-items:start; max-width:1440px; margin:0 auto}

/* Sidebar */
.docs-sidebar{position:sticky; top:var(--docs-topbar-h); align-self:start; height:calc(100vh - var(--docs-topbar-h)); overflow-y:auto; padding:1.5rem 1rem 3rem; background:var(--docs-sidebar-bg); border-right:1px solid var(--docs-border)}
.docs-search{position:relative; margin-bottom:1.25rem}
.docs-search i{position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:var(--docs-muted); font-size:.85rem}
.docs-search input{width:100%; padding:.5rem .75rem .5rem 2rem; border:1px solid var(--docs-border-strong); border-radius:.5rem; font-family:var(--font-primary); font-size:.85rem; background:var(--docs-bg); color:var(--docs-fg)}
.docs-search input:focus{outline:none; border-color:var(--docs-accent); box-shadow:0 0 0 3px var(--docs-accent-soft)}
.docs-nav-group{margin-bottom:1.4rem}
.docs-nav-group-title{font-family:var(--font-headings); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--docs-muted); padding:0 .5rem; margin-bottom:.5rem}
.docs-nav-group ul{list-style:none; margin:0; padding:0}
.docs-nav-link{display:flex; align-items:center; gap:.6rem; padding:.45rem .5rem; border-radius:.5rem; text-decoration:none; color:var(--docs-fg); font-size:.9rem; border-left:2px solid transparent}
.docs-nav-link i{width:1rem; text-align:center; color:var(--docs-muted); font-size:.85rem}
.docs-nav-link:hover{background:var(--docs-hover)}
.docs-nav-link.active{background:var(--docs-accent-soft); border-left-color:var(--docs-accent); color:var(--docs-accent); font-weight:600}
.docs-nav-link.active i{color:var(--docs-accent)}
.docs-nav-empty{padding:.5rem; color:var(--docs-muted); font-size:.82rem; font-style:italic}

/* Main content */
.docs-main{min-width:0; padding:2.5rem 3rem 5rem}
.docs-content{max-width:780px}
.docs-content h1{font-family:var(--font-headings); font-size:2.1rem; font-weight:700; line-height:1.15; margin:0 0 .4rem}
.docs-content .docs-lead{font-size:1.1rem; color:var(--docs-muted); line-height:1.6; margin:0 0 2rem}
.docs-content h2{font-family:var(--font-headings); font-size:1.4rem; font-weight:700; line-height:1.25; margin:2.75rem 0 1rem; padding-top:.5rem; scroll-margin-top:calc(var(--docs-topbar-h) + 1rem)}
.docs-content h3{font-family:var(--font-headings); font-size:1.1rem; font-weight:700; margin:2rem 0 .75rem; scroll-margin-top:calc(var(--docs-topbar-h) + 1rem)}
.docs-content p{line-height:1.7; margin:0 0 1.1rem}
.docs-content ul,.docs-content ol{line-height:1.7; margin:0 0 1.1rem; padding-left:1.3rem}
.docs-content li{margin-bottom:.4rem}
.docs-content a{color:var(--color-tertiary); text-decoration:none; font-weight:600}
.docs-content a:hover{text-decoration:underline}
.docs-content strong{font-weight:700}
.docs-content hr{border:none; border-top:1px solid var(--docs-border); margin:2.5rem 0}
.docs-content code:not(pre code){background:var(--docs-accent-soft); color:var(--color-navy,#072326); padding:.1rem .4rem; border-radius:.35rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.85em}

/* Tables */
.docs-table-wrap{overflow-x:auto; margin:0 0 1.4rem}
.docs-content table{width:100%; border-collapse:collapse; font-size:.9rem}
.docs-content th{text-align:left; font-family:var(--font-headings); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--docs-muted); padding:.6rem .8rem; border-bottom:2px solid var(--docs-border-strong)}
.docs-content td{padding:.65rem .8rem; border-bottom:1px solid var(--docs-border); vertical-align:top; line-height:1.55}
.docs-content tbody tr:last-child td{border-bottom:none}

/* Code blocks */
.docs-code{margin:0 0 1.4rem; border-radius:.6rem; overflow:hidden; background:var(--docs-code-bg); border:1px solid rgba(0,0,0,.2)}
.docs-code-head{display:flex; align-items:center; gap:.25rem; padding:.35rem .5rem; background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.08)}
.docs-code-tab{border:none; background:transparent; color:var(--docs-code-muted); font-family:var(--font-primary); font-size:.8rem; font-weight:600; padding:.3rem .7rem; border-radius:.4rem; cursor:pointer}
.docs-code-tab:hover{color:var(--docs-code-fg)}
.docs-code-tab.active{background:rgba(255,255,255,.1); color:#FFF}
.docs-code-label{color:var(--docs-code-muted); font-size:.78rem; font-weight:600; padding:.3rem .5rem}
.docs-code-copy{margin-left:auto; border:none; background:transparent; color:var(--docs-code-muted); cursor:pointer; font-size:.8rem; padding:.3rem .6rem; border-radius:.4rem; display:flex; align-items:center; gap:.35rem}
.docs-code-copy:hover{background:rgba(255,255,255,.1); color:#FFF}
.docs-code-copy.copied{color:var(--color-secondary)}
.docs-code pre{margin:0; padding:1rem 1.1rem; overflow-x:auto}
.docs-code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.83rem; line-height:1.6; color:var(--docs-code-fg); white-space:pre}
.docs-code-panel[hidden]{display:none}

/* Callouts */
.docs-callout{display:flex; gap:.75rem; padding:.9rem 1.1rem; border-radius:.6rem; margin:0 0 1.4rem; font-size:.92rem; line-height:1.6; border:1px solid var(--docs-border)}
.docs-callout i{margin-top:.15rem}
.docs-callout-info{background:var(--docs-accent-soft); border-color:transparent}
.docs-callout-info i{color:var(--docs-accent)}
.docs-callout-warn{background:color-mix(in srgb, var(--color-tertiary), #FFF 88%); border-color:transparent}
.docs-callout-warn i{color:var(--color-tertiary)}

/* Checklist */
.docs-check{list-style:none; padding:0; margin:0 0 1.1rem}
.docs-check li{display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.55rem; line-height:1.6}
.docs-check li i{color:var(--color-secondary); margin-top:.2rem}

/* Right-hand TOC */
.docs-toc{position:sticky; top:var(--docs-topbar-h); align-self:start; max-height:calc(100vh - var(--docs-topbar-h)); overflow-y:auto; padding:2.5rem 1.25rem 3rem}
.docs-toc-title{font-family:var(--font-headings); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--docs-muted); margin-bottom:.75rem}
.docs-toc-list{display:flex; flex-direction:column; gap:.1rem}
.docs-toc-list a{text-decoration:none; color:var(--docs-muted); font-size:.83rem; line-height:1.4; padding:.3rem .5rem; border-left:2px solid var(--docs-border); border-radius:0 .35rem .35rem 0}
.docs-toc-list a.lvl-3{padding-left:1.1rem}
.docs-toc-list a:hover{color:var(--docs-fg)}
.docs-toc-list a.active{color:var(--docs-accent); border-left-color:var(--docs-accent); font-weight:600}
.docs-toc:empty,.docs-toc-list:empty{display:none}

/* Overview / home */
.docs-hero-badge{display:inline-block; background:var(--docs-accent-soft); color:var(--docs-accent); font-family:var(--font-headings); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; padding:.3rem .7rem; border-radius:1rem; margin-bottom:1rem}
.docs-card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; margin:1.75rem 0}
.docs-card{display:block; text-decoration:none; color:var(--docs-fg); border:1px solid var(--docs-border); border-radius:.7rem; padding:1.25rem; background:var(--docs-bg); transition:border-color .12s,box-shadow .12s,transform .12s}
.docs-card:hover{border-color:var(--docs-accent); box-shadow:0 .35rem 1rem rgba(0,0,0,.07); transform:translateY(-2px)}
.docs-content a.docs-card,.docs-content a.docs-card:hover{text-decoration:none}
.docs-card-icon{width:2.4rem; height:2.4rem; border-radius:.6rem; display:flex; align-items:center; justify-content:center; background:var(--docs-accent-soft); color:var(--docs-accent); font-size:1.1rem; margin-bottom:.8rem}
.docs-card-title{font-family:var(--font-headings); font-weight:700; font-size:1.02rem; margin:0 0 .35rem; display:flex; align-items:center; gap:.5rem}
.docs-card-badge{font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--docs-muted); border:1px solid var(--docs-border-strong); border-radius:1rem; padding:.05rem .45rem}
.docs-card-desc{color:var(--docs-muted); font-size:.88rem; line-height:1.55; margin:0}

/* Page badge next to H1 */
.docs-page-badge{display:inline-block; vertical-align:middle; margin-left:.6rem; font-size:.6em; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--docs-accent); background:var(--docs-accent-soft); border-radius:1rem; padding:.2rem .6rem}

/* Responsive */
@media (max-width:1200px){
.docs-body{grid-template-columns:240px minmax(0,1fr)}
.docs-toc{display:none}
.docs-main{padding:2.5rem 2rem 5rem}
}
@media (max-width:860px){
.docs-nav-toggle{display:inline-flex; align-items:center; justify-content:center}
.docs-body{grid-template-columns:minmax(0,1fr)}
.docs-sidebar{position:fixed; top:var(--docs-topbar-h); left:0; bottom:0; width:280px; max-width:85vw; transform:translateX(-100%); transition:transform .2s ease; z-index:45; height:auto}
.docs-sidebar.open{transform:translateX(0); box-shadow:0 0 2rem rgba(0,0,0,.2)}
.docs-main{padding:2rem 1.25rem 4rem}
.docs-scrim{position:fixed; inset:var(--docs-topbar-h) 0 0 0; background:rgba(0,0,0,.35); z-index:44; opacity:0; pointer-events:none; transition:opacity .2s}
.docs-scrim.open{opacity:1; pointer-events:auto}
}