/* Mehmannavaz documentation — layout and components (builds on mehmannavaz.css tokens) */
:root{--hh:3.6rem;--tk-key:#8a3ffc;--tk-str:#0b7a4a;--tk-com:#6b8085;--tk-num:#b4540a;--tk-fn:#0b62b8;--tk-tag:#b0245c;--tk-attr:#8a5a00}
[data-theme=dark]{--tk-key:#c4a1ff;--tk-str:#7fe0b0;--tk-com:#7d9599;--tk-num:#ffb36b;--tk-fn:#7cc0ff;--tk-tag:#ff8fb8;--tk-attr:#f0c46a}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 1.2rem)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg)}

/* header */
.dh{position:fixed;z-index:30;inset:0 0 auto;height:var(--hh);display:flex;align-items:center;gap:.8rem;padding:0 var(--sp);background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.dh .logo{font-size:1.05rem}.dh .logo i{width:1.8rem;height:1.8rem}
.dh .sep{width:1px;height:1.4rem;background:var(--line)}
.dh .sec{font-weight:600;color:var(--ink-2);font-size:.92rem}
.pill{padding:.05rem .6rem;border-radius:99px;font-size:.72rem;font-weight:700;background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}
.dh .grow{flex:1}
.dh a.lnk{font-size:.88rem;color:var(--ink-2);padding:.35rem .6rem;border-radius:10px}.dh a.lnk:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)}
.sbtn{display:flex;align-items:center;gap:.6rem;min-width:min(17rem,38vw);height:2.5rem;padding:0 .8rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-2);font:400 .88rem var(--font);cursor:pointer;transition:border-color .2s}
.sbtn:hover{border-color:var(--brand)}.sbtn span{flex:1;text-align:start}
kbd{font:600 .72rem ui-monospace,Menlo,monospace;padding:.1rem .45rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--surface-2);color:var(--ink-2);direction:ltr;unicode-bidi:isolate}
.mbtn{display:none;width:2.5rem;height:2.5rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;place-items:center}
.dh .theme{width:2.5rem;height:2.5rem}

/* layout */
.dl{display:grid;grid-template-columns:16.5rem minmax(0,1fr) 14.5rem;gap:2.5rem;max-width:84rem;margin:0 auto;padding:var(--hh) var(--sp) 0}
.side{position:sticky;top:var(--hh);height:calc(100dvh - var(--hh));overflow-y:auto;padding:1.6rem 0 2rem;scrollbar-width:thin}
.ng{margin-bottom:1.5rem}.ng b{display:block;margin-bottom:.4rem;padding-inline:.8rem;font-size:.74rem;letter-spacing:.02em;color:var(--ink-2);font-weight:700}
.ng a{display:block;padding:.38rem .8rem;margin-bottom:2px;border-radius:10px;color:var(--ink-2);font-size:.92rem;font-weight:500;border-inline-start:2px solid transparent;transition:background .2s,color .2s}
.ng a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.ng a[aria-current=page]{background:color-mix(in srgb,var(--brand) 11%,transparent);color:var(--brand);font-weight:700;border-inline-start-color:var(--brand)}
.toc{position:sticky;top:var(--hh);align-self:start;max-height:calc(100dvh - var(--hh));overflow-y:auto;padding:2.2rem 0 2rem;font-size:.85rem}
.toc b{display:block;margin-bottom:.6rem;font-size:.74rem;color:var(--ink-2)}
.toc a{display:block;padding:.28rem .8rem;color:var(--ink-2);font-weight:400;border-inline-start:2px solid var(--line);transition:color .2s,border-color .2s}
.toc a.l3{padding-inline-start:1.6rem;font-size:.82rem}
.toc a:hover{color:var(--ink);text-decoration:none}.toc a.on{color:var(--brand);border-color:var(--brand);font-weight:600}
.art{min-width:0;padding:2.4rem 0 3rem}
.crumb{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--ink-2);margin-bottom:1rem}.crumb a{color:var(--ink-2);font-weight:400}.crumb .ic{width:.9em;height:.9em;rotate:180deg}
.art h1{font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.5;font-weight:800;letter-spacing:-.01em}
.art .lead{margin:.6rem 0 2rem;font-size:1.05rem;max-width:62ch}
.art h2{position:relative;font-size:1.45rem;font-weight:800;margin:2.6rem 0 .8rem;padding-top:1.6rem;border-top:1px solid var(--line);line-height:1.6}
.art .lead+h2{margin-top:1.6rem}
.art h3{position:relative;font-size:1.1rem;font-weight:700;margin:1.8rem 0 .5rem}
.art .anc{margin-inline-start:.5rem;color:var(--ink-2);opacity:0;font-weight:400;transition:opacity .2s}.art h2:hover .anc,.art h3:hover .anc,.anc:focus-visible{opacity:.8}
.art p,.art li{color:var(--ink-2);max-width:68ch}.art p{margin-top:.8rem}
.art ul,.art ol{padding-inline-start:1.4rem;margin-top:.7rem}.art li{margin-top:.35rem}.art li::marker{color:var(--brand)}
.art strong,.art b{color:var(--ink);font-weight:700}
.art code{font:.84em ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);border:1px solid var(--line);padding:.08em .4em;border-radius:6px;color:var(--ink);direction:ltr;unicode-bidi:isolate}

/* code */
.d-code{margin:1.1rem 0 0;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);overflow:hidden;direction:ltr}
.d-code figcaption{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.35rem .5rem .35rem .9rem;background:var(--surface-2);border-bottom:1px solid var(--line);font:600 .74rem ui-monospace,Menlo,monospace;color:var(--ink-2)}
.d-code .cp{font:500 .75rem var(--font);display:inline-flex;align-items:center;gap:.35rem;border:1px solid transparent;background:transparent;color:var(--ink-2);border-radius:8px;padding:.25rem .6rem;cursor:pointer;transition:all .2s}
.d-code .cp:hover{background:var(--surface);border-color:var(--line);color:var(--ink)}
.d-code .cp .ic{width:.95rem;height:.95rem}
.d-code pre{margin:0;padding:1rem 1.1rem;overflow-x:auto;font:.84rem/1.85 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);text-align:left;tab-size:2;background:transparent}
.d-code pre code{background:none;border:0;padding:0;font:inherit;border-radius:0}
.hl .k,.hl .kd,.hl .kc,.hl .kr,.hl .kt,.hl .kn,.hl .kp,.hl .nb,.hl .bp,.hl .ow{color:var(--tk-key)}
.hl .s,.hl .s1,.hl .s2,.hl .sb,.hl .sc,.hl .sd,.hl .se,.hl .sh,.hl .si,.hl .sr,.hl .ss,.hl .sx{color:var(--tk-str);unicode-bidi:isolate}
.hl .c,.hl .c1,.hl .cm,.hl .cp,.hl .cs,.hl .ch{color:var(--tk-com);font-style:italic;unicode-bidi:isolate}
.hl .m,.hl .mi,.hl .mf,.hl .mh,.hl .mo,.hl .mb,.hl .il{color:var(--tk-num)}
.hl .nf,.hl .fm,.hl .nc,.hl .nx,.hl .nd{color:var(--tk-fn)}
.hl .nt{color:var(--tk-tag)}.hl .na,.hl .nv,.hl .vi,.hl .py{color:var(--tk-attr)}
.hl .err{color:inherit;background:none;border:0}

/* tabs */
.d-tabs{margin-top:1.1rem}.d-tabs .d-code{margin-top:0;border-start-start-radius:0;border-start-end-radius:0;border-top:0}
.d-tl{display:flex;gap:.2rem;border-bottom:1px solid var(--line);overflow-x:auto}
.d-tl button{border:0;background:none;padding:.55rem 1rem;font:600 .86rem var(--font);color:var(--ink-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.d-tl button:hover{color:var(--ink)}.d-tl button[aria-selected=true]{color:var(--brand);border-color:var(--brand)}

/* callouts */
.d-co{display:flex;gap:.8rem;margin-top:1.2rem;padding:.9rem 1.1rem;border-radius:var(--r-m);border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);background:color-mix(in srgb,var(--brand) 8%,transparent)}
.d-co .ic{margin-top:.3rem;color:var(--brand);width:1.2rem;height:1.2rem}
.d-co>div{flex:1;min-width:0}.d-co b{display:block;margin-bottom:.1rem}.d-co p{margin:0;color:var(--ink);max-width:none;font-size:.93rem}.d-co p+p{margin-top:.5rem}
.d-co.warn{border-color:color-mix(in srgb,var(--gold) 55%,transparent);background:color-mix(in srgb,var(--gold) 12%,transparent)}.d-co.warn .ic{color:var(--warn-ink)}

/* tables */
.d-tw{margin-top:1.1rem;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.d-tw table{width:100%;border-collapse:collapse;font-size:.9rem}
.d-tw th,.d-tw td{padding:.65rem .95rem;text-align:start;vertical-align:top;border-bottom:1px solid var(--line);color:var(--ink-2)}
.d-tw th{background:var(--surface-2);color:var(--ink);font-weight:700;white-space:nowrap}
.d-tw tr:last-child td{border-bottom:0}.d-tw td:first-child{white-space:nowrap;color:var(--ink)}
.d-tw td code{white-space:nowrap}

/* steps */
.d-steps{list-style:none;padding:0!important;margin-top:1.2rem;counter-reset:s;display:grid;gap:1.1rem}
.d-steps>li{position:relative;counter-increment:s;padding-inline-start:3rem;margin:0;max-width:none}
.d-steps>li::before{content:counter(s,persian);position:absolute;inset-inline-start:0;top:0;width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);font-weight:800;font-size:.9rem}
.d-steps>li>b{display:block;color:var(--ink);margin-bottom:.1rem}.d-steps>li>p:first-of-type{margin-top:0}

/* cards, flow, demo */
.d-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:1.2rem}
.d-card{display:block;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);color:var(--ink);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.d-card:hover{transform:translateY(-3px);border-color:var(--brand);box-shadow:var(--sh-2);text-decoration:none}
.d-card b{display:block;margin-bottom:.2rem}.d-card span{display:block;color:var(--ink-2);font-size:.88rem;line-height:1.7;font-weight:400}
.d-flow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.9rem;font-size:.86rem}
.d-flow span{padding:.25rem .8rem;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);direction:ltr;font-family:ui-monospace,Menlo,monospace;font-size:.8rem}
.d-flow i{font-style:normal;color:var(--ink-2)}
.d-flow em{font-style:normal;color:var(--ink-2);font-size:.8rem}
.d-demo{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.1rem;padding:1.4rem;border:1px solid var(--line);border-radius:var(--r-m);background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 8%,transparent) 1px,transparent 0) 0 0/18px 18px,var(--surface)}
.d-demo>*{margin:0}.d-demo .btn{width:auto;padding-inline:1.4rem;height:2.9rem}.d-demo .alert,.d-demo .note{flex:1 1 100%}.d-demo .badge{margin:0}
.d-demo .field{flex:1 1 16rem}.d-demo .meter{flex:1 1 100%}.d-demo .otp{flex:1 1 100%}.d-demo .cd{margin:0}

/* pager + footer */
.d-pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem}
.d-pager a{display:block;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);color:var(--ink);transition:border-color .25s,transform .25s var(--ease)}
.d-pager a:hover{border-color:var(--brand);text-decoration:none;transform:translateY(-2px)}
.d-pager small{display:block;color:var(--ink-2);font-size:.78rem;font-weight:400}.d-pager b{color:var(--brand)}
.d-pager .pv{grid-column:1;text-align:start}.d-pager .nx{grid-column:2;text-align:end}
.d-foot{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--ink-2);font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

/* search palette */
.d-pal{position:fixed;inset:0;z-index:60;display:none;align-items:flex-start;justify-content:center;padding:12vh 1rem 1rem;background:rgba(4,20,22,.55);backdrop-filter:blur(6px)}
.d-pal.open{display:flex}
.d-pal .box{width:min(100%,38rem);max-height:70vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-2);overflow:hidden;animation:enter .3s var(--ease)}
.d-pal .in{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line);color:var(--ink-2)}
.d-pal input{flex:1;border:0;outline:0;background:none;font:400 1rem var(--font);color:var(--ink)}
.d-pal ul{list-style:none;margin:0;padding:.5rem;overflow-y:auto}
.d-pal li a{display:block;padding:.6rem .8rem;border-radius:10px;color:var(--ink)}
.d-pal li a small{display:block;color:var(--ink-2);font-weight:400;font-size:.8rem;line-height:1.6}
.d-pal li a .where{color:var(--brand);font-size:.74rem;font-weight:600}
.d-pal li a:hover,.d-pal li a.sel{background:color-mix(in srgb,var(--brand) 10%,transparent);text-decoration:none}
.d-pal .empty{padding:1.5rem;text-align:center;color:var(--ink-2);font-size:.9rem}
.d-pal .hint{display:flex;gap:1rem;padding:.55rem 1.1rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--ink-2)}

.d-ov{display:none}

@media(max-width:1180px){.dl{grid-template-columns:16.5rem minmax(0,1fr)}.toc{display:none}}
@media(max-width:860px){
 .dl{grid-template-columns:minmax(0,1fr);gap:0}
 .mbtn{display:grid}.dh .sec,.dh .sep,.dh .lnk{display:none}.sbtn{min-width:0;flex:1}.sbtn kbd{display:none}.dh .grow{display:none}
 .side{position:fixed;z-index:25;top:var(--hh);inset-inline-start:0;width:min(20rem,86vw);height:calc(100dvh - var(--hh));padding:1.2rem 1rem;background:var(--surface);border-inline-end:1px solid var(--line);translate:100% 0;transition:translate .35s var(--ease);box-shadow:var(--sh-2)}
 body.nav-open .side{translate:0 0}
 .d-ov{position:fixed;inset:var(--hh) 0 0;z-index:24;background:rgba(4,20,22,.45)}body.nav-open .d-ov{display:block}
 .art{padding-top:1.6rem}
 .d-pager{grid-template-columns:1fr}.d-pager .pv,.d-pager .nx{grid-column:1;text-align:start}
}
@media print{.dh,.side,.toc,.d-pager,.d-pal,.d-ov{display:none!important}.dl{display:block;padding-top:0}}
.d-steps{grid-template-columns:minmax(0,1fr)}.d-steps>li{min-width:0}
.d-code,.d-tabs{max-width:100%;min-width:0}