/* ============================================================================
   راهنمای سایت — رنگ‌ها فقط از توکن‌های theme.css، اندازهٔ نوشته‌ها
   calc(… * var(--fs)) تا «اندازهٔ متن» کشوی تنظیمات این‌جا هم کار کند.
   هیچ انیمیشن بی‌پایانی نیست (هزینهٔ CPU)؛ تپش شماره سه بار و تمام.
   قاعدهٔ فایل: هر تغییرِ گوشی بعد از قاعدهٔ دسکتاپ همان جزء می‌آید.

   صفحهٔ عمومی است (مثل لندینگ و حقوقی‌ها): theme.css به body ارتفاع ۱۰۰٪ و
   overflow:hidden می‌دهد برای قاب ثابت تب‌ها؛ این‌جا یک سند بلند معمولی است.
   بی‌جاوااسکریپت (خزنده‌ها) همهٔ متن و عکس دیده می‌شود؛ ابزارهای تعاملی فقط
   زیر html.js (theme.js) نشان داده می‌شوند.
   ========================================================================== */
html, body{ height:auto; min-height:100% }
body{ margin:0; overflow:visible; overflow-x:clip }
/* Tailwind (و preflight‌اش) این‌جا بار نمی‌شود؛ ریست کوچکِ خودِ صفحه، مثل لندینگ */
*, *::before, *::after{ box-sizing:border-box }
button, input, select{ font:inherit; color:inherit }
button{ background:none; border:0; padding:0 }
img{ max-width:100% }
h1, h2, h3, p, figure{ margin:0 }
[hidden]{ display:none !important }
body.g-has-full{ overflow:hidden }
[id]{ scroll-margin-top:84px }
html:not(.js) .g-search, html:not(.js) .g-progress{ display:none }

.g-skip{ position:absolute; inset-inline-start:1rem; top:-60px; z-index:100; padding:.5rem .9rem; border-radius:10px;
  background-color:var(--gold); color:var(--on-gold); font-weight:800; text-decoration:none }
.g-skip:focus{ top:.6rem }

/* -------------------------------- سربرگ ------------------------------------ */
.g-head{ position:sticky; top:0; z-index:60; border-bottom:1px solid var(--line);
  background-color:color-mix(in srgb, var(--surface-2) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px) }
.g-head-in{ display:flex; align-items:center; gap:.9rem; max-width:1680px; margin:0 auto; padding:.55rem 1rem; min-height:60px }
.g-brand{ flex:none; display:block }
.g-brand .brand-mark{ --brand-logo-h:46px }
.g-head-nav{ display:flex; gap:.2rem; flex:none }
.g-head-nav a{ padding:.35rem .6rem; border-radius:8px; color:var(--txt-dim); text-decoration:none;
  font-size:calc(13px * var(--fs)); font-weight:700; transition:color .2s, background-color .2s }
.g-head-nav a:hover{ color:var(--txt); background-color:var(--surface-3) }
.g-enter{ flex:none; display:inline-flex; align-items:center; height:38px; padding:0 1rem; border-radius:11px;
  text-decoration:none; font-size:calc(13px * var(--fs)) }

.g-crumbs{ display:flex; align-items:center; gap:.45rem; margin:0 0 .7rem; font-size:calc(12px * var(--fs)); color:var(--txt-mute) }
.g-crumbs a{ color:var(--txt-dim); text-decoration:none }
.g-crumbs a:hover{ color:var(--gold-ink) }

.g-footer{ margin-top:1rem; border-top:1px solid var(--line); background-color:var(--surface-2) }
.g-footer-in{ max-width:1680px; margin:0 auto; padding:1.4rem 1rem 1.6rem; display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem }
.g-footer .brand-mark{ --brand-logo-h:44px }
.g-footer nav{ display:flex; flex-wrap:wrap; gap:.3rem 1rem }
.g-footer nav a{ color:var(--txt-dim); text-decoration:none; font-size:calc(12.5px * var(--fs)) }
.g-footer nav a:hover{ color:var(--gold-ink) }
.g-copy{ width:100%; margin:0; font-size:calc(11.5px * var(--fs)); color:var(--txt-mute) }

.g-search{ position:relative; flex:1 1 auto; min-width:0; max-width:460px }
.g-search > svg{ position:absolute; inset-inline-start:.7rem; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--txt-mute); pointer-events:none }
.g-search input{
  width:100%; height:36px; border-radius:10px; border:1px solid var(--line); background-color:var(--surface-3);
  color:var(--txt); padding-inline:2.3rem 2.4rem; font:inherit; font-size:calc(12.5px * var(--fs));
  transition:border-color .2s, background-color .2s;
}
.g-search input::placeholder{ color:var(--txt-mute) }
.g-search input:focus{ outline:none; border-color:var(--gold); background-color:var(--surface-2) }
.g-search input::-webkit-search-cancel-button{ display:none }
.g-search > .g-kbd{ position:absolute; inset-inline-end:.55rem; top:50%; transform:translateY(-50%) }

.g-kbd{
  display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 .35rem; border-radius:6px;
  border:1px solid var(--line-strong); border-bottom-width:2px; background-color:var(--surface-2);
  color:var(--txt-dim); font-family:inherit; font-size:calc(11px * var(--fs)); font-weight:800; line-height:1; white-space:nowrap;
}

.g-hits{
  position:absolute; top:calc(100% + 6px); inset-inline:0; z-index:75; padding:.35rem;
  background-color:var(--surface-2); border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:var(--pop-shadow); max-height:min(60vh, 440px); overflow-y:auto;
}
.g-hit{
  width:100%; display:grid; grid-template-columns:28px minmax(0,1fr); gap:.1rem .55rem; align-items:center;
  padding:.5rem .55rem; border-radius:9px; text-align:start; color:var(--txt); background:none; border:0; cursor:pointer;
}
.g-hit:hover, .g-hit.on{ background-color:var(--surface-4) }
.g-hit-ico{ grid-row:span 2; width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background-color:var(--gold-soft); color:var(--gold-ink) }
.g-hit-ico svg{ width:15px; height:15px }
.g-hit-t{ font-size:calc(13px * var(--fs)); font-weight:800; display:flex; gap:.45rem; align-items:baseline; min-width:0 }
.g-hit-t small{ font-size:calc(11px * var(--fs)); font-weight:600; color:var(--txt-mute); white-space:nowrap }
.g-hit-s{ grid-column:2; font-size:calc(11.5px * var(--fs)); color:var(--txt-mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.g-hit-none{ padding:.8rem; font-size:calc(12px * var(--fs)); color:var(--txt-mute); text-align:center }

.g-progress{
  display:inline-flex; align-items:center; gap:.4rem; height:36px; padding:0 .65rem 0 .5rem; border-radius:10px;
  border:1px solid var(--line); background-color:var(--surface-3); color:var(--txt-dim); cursor:pointer;
  font-size:calc(12px * var(--fs)); font-weight:800; transition:border-color .2s, color .2s;
}
.g-progress:hover{ border-color:var(--gold); color:var(--txt) }
.g-progress svg{ width:24px; height:24px; transform:rotate(-90deg) }
.g-ring-bg, .g-ring{ fill:none; stroke-width:4 }
.g-ring-bg{ stroke:var(--line-strong) }
.g-ring{ stroke:var(--gold); stroke-linecap:round; stroke-dasharray:0 100; transition:stroke-dasharray .6s var(--ease-out) }

/* ------------------------------- چیدمان ------------------------------------ */
.g-layout{
  display:grid; grid-template-columns:232px minmax(0,1fr); gap:1.25rem;
  max-width:1680px; margin:0 auto; padding:1rem 1rem 3rem;
}
.g-main{ min-width:0 }

.g-toc{
  position:sticky; top:76px; align-self:start; display:flex; flex-direction:column; gap:2px;
  padding:.55rem; border:1px solid var(--line); border-radius:14px; background-color:var(--surface);
  max-height:calc(100vh - 96px); overflow-y:auto; scrollbar-width:thin;
}
.g-toc-h{ padding:.3rem .55rem .5rem; font-size:calc(11px * var(--fs)); font-weight:800; color:var(--txt-mute) }
.g-toc-i{
  display:grid; grid-template-columns:20px minmax(0,1fr) 12px; align-items:center; gap:.5rem;
  padding:.45rem .55rem; border-radius:9px; color:var(--txt-dim); text-decoration:none;
  font-size:calc(12.5px * var(--fs)); font-weight:700; transition:background-color .18s, color .18s;
}
.g-toc-i:hover{ background-color:var(--surface-3); color:var(--txt) }
.g-toc-i.on{ background-color:var(--gold-soft); color:var(--gold-ink) }
.g-toc-ico svg{ width:17px; height:17px; display:block; color:var(--gold-ink) }
.g-toc-t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.g-toc-n{ display:inline-block; min-width:1.1rem; color:var(--txt-mute); font-size:calc(11px * var(--fs)) }
.g-toc-st{ width:12px; height:12px; border-radius:50%; border:1.5px solid var(--line-strong) }
.g-toc-st.part{ border-color:var(--gold); background:conic-gradient(var(--gold) var(--p), transparent 0) }
.g-toc-st.ok{ border-color:var(--up); background-color:var(--up);
  box-shadow:inset 0 0 0 2px var(--surface) }

/* ------------------------------ نقشهٔ راه ----------------------------------- */
.g-hero{
  position:relative; overflow:hidden; padding:1.4rem 1.4rem 1.1rem; border-radius:18px; border:1px solid var(--line);
  background-color:var(--surface);
  background-image:radial-gradient(900px 260px at 88% -30%, rgba(255,197,49,.14), transparent 62%),
                   radial-gradient(600px 220px at 0% 120%, rgba(255,197,49,.06), transparent 60%);
  box-shadow:var(--card-shadow);
}
.g-kicker{ display:inline-flex; align-items:center; gap:.35rem; font-size:calc(11.5px * var(--fs)); font-weight:800;
  color:var(--gold-ink); letter-spacing:.01em }
.g-kicker svg{ width:15px; height:15px }
.g-hero-title{ margin:.35rem 0 .3rem; font-size:calc(25px * var(--fs)); font-weight:900; color:var(--txt-strong); line-height:1.5 }
.g-hero-lede{ margin:0; max-width:760px; font-size:calc(13.5px * var(--fs)); line-height:2; color:var(--txt-dim) }
.g-hero-cta{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.9rem }
.g-cta{ display:inline-flex; align-items:center; gap:.45rem; height:38px; padding:0 1rem; border-radius:11px;
  font-size:calc(13px * var(--fs)); font-weight:800 }
.g-cta svg{ width:16px; height:16px }

.g-path{ list-style:none; margin:1.3rem 0 .2rem; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:.9rem }
.g-path li{ position:relative }
/* خط‌چینِ میان دو گام (در راست‌به‌چپ، گام بعدی سمت چپ است) */
.g-path li:not(:last-child)::after{
  content:''; position:absolute; top:38px; inset-inline-end:calc(-.9rem - 1px); width:calc(.9rem + 2px);
  border-top:2px dashed var(--gold); opacity:.55; pointer-events:none;
}
.g-node{
  position:relative; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:.85rem .55rem .8rem; border-radius:14px; border:1px solid var(--line); background-color:var(--surface-2);
  color:inherit; text-align:center; cursor:pointer;
  transition:border-color .25s, transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.g-node:hover{ border-color:var(--gold); transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(255,197,49,.55) }
.g-node-n{ position:absolute; top:.45rem; inset-inline-start:.6rem; font-size:calc(11px * var(--fs)); font-weight:900; color:var(--txt-mute) }
.g-node-ico{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background-color:var(--gold-soft); color:var(--gold-ink); border:1px solid var(--gold-ring) }
.g-node-ico svg{ width:22px; height:22px }
.g-node-t{ font-size:calc(13.5px * var(--fs)); font-weight:800; color:var(--txt) }
.g-node-s{ font-size:calc(11.5px * var(--fs)); color:var(--txt-mute) }

.g-side{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin-top:.9rem }
.g-side-lbl{ font-size:calc(12px * var(--fs)); color:var(--txt-mute); font-weight:700 }
.g-side-chip{
  display:inline-flex; align-items:center; gap:.35rem; height:30px; padding:0 .7rem; border-radius:99px;
  border:1px solid var(--line); background-color:var(--surface-3); color:var(--txt-dim); cursor:pointer;
  font-size:calc(12px * var(--fs)); font-weight:700; transition:border-color .2s, color .2s;
}
.g-side-chip:hover{ border-color:var(--gold); color:var(--txt) }
.g-side-chip svg{ width:15px; height:15px; color:var(--gold-ink) }

/* -------------------------------- فصل‌ها ------------------------------------ */
.g-chap, .g-sec{ margin-top:2.6rem; border-radius:18px }
.g-chap-head, .g-sec-head{ display:flex; align-items:flex-start; gap:.85rem }
.g-chap-ico{ flex:none; width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background-color:var(--gold-soft); color:var(--gold-ink); border:1px solid var(--gold-ring) }
.g-chap-ico svg{ width:22px; height:22px }
.g-chap-txt{ flex:1; min-width:0 }
.g-chap-title{ margin:.1rem 0 .25rem; font-size:calc(20px * var(--fs)); font-weight:900; color:var(--txt-strong) }
.g-lede{ margin:0; max-width:820px; font-size:calc(13px * var(--fs)); line-height:1.95; color:var(--txt-dim) }
.g-chap-act{ flex:none; display:flex; align-items:center; gap:.45rem; padding-top:.2rem }
.g-go{ display:inline-flex; align-items:center; gap:.4rem; height:34px; padding:0 .8rem; border-radius:10px;
  font-size:calc(12.5px * var(--fs)); font-weight:700; text-decoration:none }
.g-go svg{ width:15px; height:15px }
.g-done{
  display:inline-flex; align-items:center; gap:.35rem; height:34px; padding:0 .8rem; border-radius:10px;
  border:1px dashed var(--line-strong); background:none; color:var(--txt-mute); cursor:pointer;
  font-size:calc(12.5px * var(--fs)); font-weight:700; transition:border-color .2s, color .2s, background-color .2s;
}
.g-done svg{ width:15px; height:15px }
.g-done:hover{ border-color:var(--up); color:var(--txt) }
.g-done.on{ border-style:solid; border-color:rgba(34,197,94,.45); background-color:rgba(34,197,94,.1); color:var(--up) }

.g-flash{ animation:gFlash 1.3s var(--ease-out) 1 }
@keyframes gFlash{ 0%{ box-shadow:0 0 0 0 rgba(255,197,49,0) } 25%{ box-shadow:0 0 0 6px rgba(255,197,49,.28) } 100%{ box-shadow:0 0 0 0 rgba(255,197,49,0) } }

.g-tips{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:.6rem; margin-top:.8rem }
.g-tip{ display:flex; align-items:flex-start; gap:.6rem; padding:.7rem .85rem; border-radius:12px;
  border:1px solid var(--line); background-color:var(--surface) }
.g-tip svg{ flex:none; width:18px; height:18px; margin-top:.2rem; color:var(--gold-ink) }
.g-tip-warn svg{ color:var(--down) }
.g-tip{ margin:0 }
.g-tip span{ font-size:calc(12.5px * var(--fs)); line-height:1.95; color:var(--txt-dim) }

/* ============================ عکس نشانه‌دار ================================ */
.sh{
  margin:1rem 0 0; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background-color:var(--surface); box-shadow:var(--card-shadow);
}
.sh:focus{ outline:none }
.sh:focus-visible{ outline:2px solid var(--gold-ring); outline-offset:2px }

.sh-bar{ position:relative; display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem;
  border-bottom:1px solid var(--line); background-color:var(--surface-2) }
.sh-dots{ display:flex; gap:5px; flex:none }
.sh-dots i{ width:9px; height:9px; border-radius:50%; background-color:var(--line-strong) }
.sh-dots i:nth-child(1){ background-color:#ff5f57 } .sh-dots i:nth-child(2){ background-color:#febc2e } .sh-dots i:nth-child(3){ background-color:#28c840 }
.sh-url{ flex:none; padding:.18rem .7rem; border-radius:99px; background-color:var(--surface-3); border:1px solid var(--line);
  color:var(--txt-mute); font-size:calc(11px * var(--fs)); font-family:ui-monospace, Consolas, monospace }
.sh-cap-t{ min-width:0; font-size:calc(13px * var(--fs)); font-weight:800; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sh-tools{ margin-inline-start:auto; display:flex; gap:.35rem; flex:none }
.sh-btn{
  display:inline-flex; align-items:center; gap:.35rem; height:30px; padding:0 .6rem; border-radius:9px;
  border:1px solid var(--line); background-color:var(--surface-3); color:var(--txt-dim); cursor:pointer;
  font-size:calc(12px * var(--fs)); font-weight:700; white-space:nowrap;
  transition:border-color .2s, color .2s, background-color .2s;
}
.sh-btn:hover{ border-color:var(--line-strong); color:var(--txt) }
.sh-btn.on{ border-color:var(--gold); color:var(--gold-ink); background-color:var(--gold-soft) }
.sh-btn svg{ width:15px; height:15px; flex:none }
.sh-play .i-pause{ display:none }
.sh-play.on .i-play{ display:none }
.sh-play.on .i-pause{ display:block }
.sh-prog{ position:absolute; inset-inline:0; bottom:-1px; height:2px; pointer-events:none }
.sh-prog i{ display:block; width:0; height:100%; background-color:var(--gold) }

.sh-body{ display:grid; grid-template-columns:minmax(0,1fr) }
.sh.sh-wide .sh-body{ grid-template-columns:minmax(0,1fr) 300px }
.sh-stage{ position:relative; margin:.8rem; min-width:0 }

.sh-view{
  position:relative; overflow:hidden; border-radius:10px; border:1px solid var(--line);
  background-color:var(--surface-3);
  background-image:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.035) 50%, transparent 70%);
}
.sh-cam{ position:absolute; inset:0; transform-origin:0 0; --s:1;
  transition:transform .75s cubic-bezier(.2,.75,.2,1) }
.sh-img{ display:block; width:100%; height:100%; transition:opacity .45s var(--ease-soft); user-select:none; -webkit-user-drag:none }
/* محو تا بار شدن فقط با جاوااسکریپت (کلاس loaded را app.js می‌گذارد) */
.js .sh-img{ opacity:0 }
.js .sh.loaded .sh-img{ opacity:1 }

/* نورافکن: سوراخی در پردهٔ تیره دور عنصر */
.sh-spot{ position:absolute; border-radius:9px; pointer-events:none; opacity:0;
  box-shadow:0 0 0 9999px rgba(0,0,0,.56);
  transition:left .55s var(--ease-out), top .55s var(--ease-out), width .55s var(--ease-out), height .55s var(--ease-out), opacity .3s }
.sh-spot.show{ opacity:1 }

/* دست‌خط طلایی */
.sh-ink{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.sh-ink path{ fill:none; stroke:var(--gold); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 0 5px rgba(255,197,49,.55)) }
.sh-ink .sh-ink-b{ stroke-width:1.8; opacity:.75 }
.sh-ink path.draw{ animation:shInk .8s cubic-bezier(.45,.05,.25,1) forwards }
.sh-ink path.light{ opacity:.55 }
.sh-ink path.ok{ stroke:var(--up); filter:drop-shadow(0 0 5px rgba(34,197,94,.55)) }
@keyframes shInk{ to{ stroke-dashoffset:0 } }

/* شماره‌ها: با بزرگ‌نمایی دوربین هم اندازه‌شان ثابت می‌ماند */
.sh-pin{
  position:absolute; z-index:2; width:26px; height:26px; padding:0; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; background-color:var(--gold); color:var(--on-gold);
  font-family:inherit; font-size:calc(12px * var(--fs)); font-weight:900; line-height:1;
  box-shadow:0 0 0 3px rgba(0,0,0,.38), 0 6px 14px -4px rgba(0,0,0,.65);
  transform:translate(-50%, -50%) scale(calc(1 / var(--s)));
  transition:transform .75s cubic-bezier(.2,.75,.2,1), opacity .25s, background-color .2s, box-shadow .2s;
}
.sh-pin:hover{ box-shadow:0 0 0 3px rgba(0,0,0,.38), 0 0 0 7px rgba(255,197,49,.35) }
.sh-pin:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.sh.sh-active .sh-pin:not(.on){ opacity:.4 }
.sh-pin.on{ background-color:#fff; color:#111; box-shadow:0 0 0 3px var(--gold), 0 8px 20px -6px rgba(0,0,0,.7) }
.sh-pin.pulse::after{ content:''; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--gold);
  animation:shPulse 1.3s ease-out 3; pointer-events:none }
@keyframes shPulse{ from{ transform:scale(.85); opacity:.95 } to{ transform:scale(2.1); opacity:0 } }

.sh-hint{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:3; pointer-events:none;
  padding:.3rem .85rem; border-radius:99px; background-color:rgba(0,0,0,.66); color:#fff; white-space:nowrap;
  font-size:calc(11.5px * var(--fs)); font-weight:700; transition:opacity .35s;
}
.sh.sh-touched .sh-hint, .sh.sh-quizzing .sh-hint{ opacity:0 }

/* حباب توضیح */
.sh-cap{
  position:absolute; z-index:6; width:340px; padding:.7rem .8rem .55rem; border-radius:12px;
  background-color:var(--surface-2); border:1px solid var(--gold); box-shadow:var(--pop-shadow);
  opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .25s, transform .25s var(--ease-out);
}
.sh-cap.show{ opacity:1; transform:none; pointer-events:auto }
.sh-cap::before{ content:''; position:absolute; top:-7px; left:var(--ax, 50%); width:12px; height:12px;
  background-color:inherit; border-left:1px solid var(--gold); border-top:1px solid var(--gold);
  transform:translateX(-50%) rotate(45deg) }
.sh-cap.above::before{ top:auto; bottom:-7px; transform:translateX(-50%) rotate(225deg) }
.sh-cap-h{ display:flex; align-items:center; gap:.45rem }
.sh-cap-h b{ font-size:calc(13.5px * var(--fs)); font-weight:900; color:var(--txt-strong) }
.sh-cap-of{ margin-inline-start:auto; font-size:calc(11px * var(--fs)); color:var(--txt-mute) }
.sh-cap p{ margin:.4rem 0 .45rem; font-size:calc(12.5px * var(--fs)); line-height:1.9; color:var(--txt-dim) }
.sh-cap-nav{ display:flex; justify-content:flex-end; gap:.3rem }
.sh-cap-btn{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); background-color:var(--surface-3); color:var(--txt-dim) }
.sh-cap-btn:hover:not(:disabled){ border-color:var(--gold); color:var(--gold-ink) }
.sh-cap-btn:disabled{ opacity:.35; cursor:default }
.sh-cap-btn svg{ width:15px; height:15px }

.sh-n{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background-color:var(--gold); color:var(--on-gold); font-size:calc(11.5px * var(--fs)); font-weight:900 }

/* «خودت پیدا کن» */
.sh-quizbar{ display:none; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.6rem; padding:.55rem .75rem;
  border:1px dashed var(--gold); border-radius:11px; background-color:var(--gold-soft) }
.sh-quizbar.show{ display:flex }
.sh-q-ico svg{ width:18px; height:18px; display:block; color:var(--gold-ink) }
.sh-q-t{ font-size:calc(13px * var(--fs)); font-weight:800; color:var(--txt) }
.sh-q-sc{ font-size:calc(11.5px * var(--fs)); color:var(--txt-mute); font-weight:700 }
.sh-q-msg{ flex-basis:100%; font-size:calc(12.5px * var(--fs)); font-weight:700; color:var(--txt-dim) }
.sh-q-msg.ok{ color:var(--up) }
.sh-q-msg.bad{ color:var(--down) }
.sh-q-skip{ margin-inline-start:auto; height:28px; padding:0 .7rem; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background-color:var(--surface-3); color:var(--txt-dim);
  font-family:inherit; font-size:calc(12px * var(--fs)); font-weight:700 }
.sh-q-skip + .sh-q-skip{ margin-inline-start:0 }
.sh-q-skip:hover{ border-color:var(--gold); color:var(--txt) }
.sh.sh-quizzing .sh-view{ cursor:crosshair }
.sh.sh-quizzing .sh-pin{ display:none }
.sh.sh-quizzing .sh-steps{ filter:blur(5px); opacity:.6; pointer-events:none; user-select:none }
.sh-click{ position:absolute; z-index:4; width:18px; height:18px; border-radius:50%; pointer-events:none;
  border:2px solid #fff; box-shadow:0 0 0 2px rgba(0,0,0,.45);
  transform:translate(-50%, -50%) scale(calc(1 / var(--s))); animation:shClick .9s ease-out forwards }
@keyframes shClick{ from{ opacity:1 } to{ opacity:0; width:34px; height:34px } }

/* فهرست گام‌ها */
.sh-steps{ list-style:none; margin:0; padding:.55rem; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:.15rem .4rem; align-content:start }
.sh.sh-wide .sh-steps{ display:block; border-top:0; border-inline-start:1px solid var(--line);
  height:0; min-height:100%; overflow-y:auto; scrollbar-width:thin }
.sh-step{
  width:100%; display:grid; grid-template-columns:22px minmax(0,1fr); gap:.15rem .55rem; align-items:center;
  padding:.5rem .5rem; border-radius:10px; border:1px solid transparent; background:none; color:inherit;
  text-align:start; cursor:pointer; font-family:inherit; transition:background-color .18s, border-color .18s;
}
.sh-step:hover{ background-color:var(--surface-3) }
.sh-step .sh-n{ background-color:var(--surface-4); color:var(--txt-dim); transition:background-color .2s, color .2s }
.sh-st{ font-size:calc(13px * var(--fs)); font-weight:800; color:var(--txt) }
.sh-sd{ grid-column:2; font-size:calc(12px * var(--fs)); line-height:1.8; color:var(--txt-mute);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.sh-step.on{ background-color:var(--gold-soft); border-color:var(--gold-ring) }
.sh-step.on .sh-n{ background-color:var(--gold); color:var(--on-gold) }
.sh-step.on .sh-sd{ -webkit-line-clamp:unset; color:var(--txt-dim) }

/* تمام‌صفحه */
.sh.sh-full{ position:fixed; inset:14px; z-index:90; margin:0; display:flex; flex-direction:column;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.74), var(--pop-shadow) }
.sh.sh-full .sh-body{ flex:1; min-height:0; grid-template-columns:minmax(0,1fr) 320px }
.sh.sh-full .sh-stage{ align-self:center; justify-self:center; width:min(calc(100% - 1.6rem), calc((100vh - 150px) * var(--ar, 1.6))) }
.sh.sh-full .sh-steps{ display:block; border-top:0; border-inline-start:1px solid var(--line); height:auto; min-height:0; overflow-y:auto }

/* گوشی: حباب زیر عکس، نه روی آن */
.sh.sh-narrow .sh-cap{ position:static; width:auto; margin-top:.6rem; display:none; transform:none }
.sh.sh-narrow .sh-cap.show{ display:block }
.sh.sh-narrow .sh-cap::before{ display:none }

/* ------------------------------- میانبرها ------------------------------------ */
.g-keys{ width:100%; margin-top:.9rem; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  border-collapse:separate; border-spacing:0; background-color:var(--surface) }
.g-keys th{ padding:.55rem .9rem; text-align:start; font-size:calc(11.5px * var(--fs)); font-weight:800; color:var(--txt-mute);
  background-color:var(--surface-2) }
.g-keys td{ padding:.55rem .9rem; border-top:1px solid var(--line-soft); vertical-align:middle }
.g-key-where{ display:inline-block; padding:.15rem .6rem; border-radius:99px; background-color:var(--surface-3);
  color:var(--txt-mute); font-size:calc(11.5px * var(--fs)); font-weight:700; white-space:nowrap }
.g-key-k{ white-space:nowrap }
.g-key-k .g-kbd{ vertical-align:middle }
.g-plus{ margin:0 .25rem; color:var(--txt-mute); font-size:calc(11px * var(--fs)) }
.g-key-what{ font-size:calc(12.5px * var(--fs)); color:var(--txt-dim); line-height:1.8 }

/* ------------------------------- واژه‌نامه ------------------------------------ */
.g-gl-filter{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem }
.g-gl-chip{ height:30px; padding:0 .8rem; border-radius:99px; border:1px solid var(--line); background-color:var(--surface-3);
  color:var(--txt-dim); cursor:pointer; font-family:inherit; font-size:calc(12px * var(--fs)); font-weight:700;
  transition:border-color .2s, color .2s, background-color .2s }
.g-gl-chip:hover{ color:var(--txt) }
.g-gl-chip.on{ border-color:var(--gold); color:var(--gold-ink); background-color:var(--gold-soft) }
.g-gl-h{ margin:1.1rem 0 0; font-size:calc(13px * var(--fs)); font-weight:800; color:var(--txt-mute) }
.g-gl{ margin:.5rem 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:.6rem }
.g-gl-i{ padding:.75rem .85rem; border-radius:12px; border:1px solid var(--line); background-color:var(--surface) }
.g-gl-i dt{ font-size:calc(13.5px * var(--fs)); font-weight:900; color:var(--gold-ink) }
.g-gl-i dd{ margin:.3rem 0 0; font-size:calc(12.5px * var(--fs)); line-height:1.9; color:var(--txt-dim) }

/* -------------------------------- پرسش‌ها ------------------------------------ */
.g-faq{ margin-top:.9rem; display:flex; flex-direction:column; gap:.5rem }
.g-faq-i{ border:1px solid var(--line); border-radius:12px; background-color:var(--surface); padding:0 .9rem }
.g-faq-i summary{ list-style:none; cursor:pointer; padding:.8rem 0; font-size:calc(13.5px * var(--fs)); font-weight:800;
  color:var(--txt); display:flex; align-items:center; gap:.5rem }
.g-faq-i summary::-webkit-details-marker{ display:none }
.g-faq-i summary h3{ margin:0; font:inherit; color:inherit }
.g-faq-i summary::before{ content:''; flex:none; width:8px; height:8px; border-inline-end:2px solid var(--gold);
  border-bottom:2px solid var(--gold); transform:rotate(-45deg); transition:transform .2s; margin-inline-end:.2rem }
.g-faq-i[open] summary::before{ transform:rotate(45deg) }
.g-faq-i p{ margin:0 0 .6rem; font-size:calc(12.5px * var(--fs)); line-height:2; color:var(--txt-dim) }
.g-faq-go{ display:inline-flex; align-items:center; gap:.35rem; height:30px; padding:0 .75rem; margin-bottom:.8rem;
  border-radius:9px; border:1px solid var(--gold-ring); background-color:var(--gold-soft); color:var(--gold-ink);
  cursor:pointer; font-family:inherit; font-size:calc(12px * var(--fs)); font-weight:800 }
.g-faq-go svg{ width:15px; height:15px }

.g-foot{ margin:2.2rem 0 0; text-align:center; font-size:calc(11.5px * var(--fs)); color:var(--txt-mute) }

@media (prefers-reduced-motion: reduce){
  .sh-cam, .sh-pin, .sh-spot{ transition:none }
  .sh-ink path.draw{ animation-duration:.01s }
  .sh-pin.pulse::after{ animation:none }
}

/* ======================= پهنای کمتر (بعد از قاعده‌های بالا) ===================== */
@media (max-width:1180px){
  .g-layout{ grid-template-columns:minmax(0,1fr); gap:.8rem }
  .g-toc{ top:61px; z-index:20; flex-direction:row; align-items:center; max-height:none; overflow-x:auto; overflow-y:hidden;
    padding:.4rem; border-radius:12px; box-shadow:0 10px 24px -18px rgba(0,0,0,.9) }
  .g-toc-h{ display:none }
  .g-toc-i{ flex:none; grid-template-columns:18px auto 10px; padding:.38rem .6rem }
  .g-toc-t{ overflow:visible }
}
@media (max-width:900px){
  .g-path{ grid-template-columns:minmax(0,1fr); gap:.55rem }
  .g-path li:not(:last-child)::after{ top:auto; bottom:calc(-.55rem - 1px); inset-inline-end:auto; inset-inline-start:37px;
    width:0; height:calc(.55rem + 2px); border-top:0; border-inline-start:2px dashed var(--gold) }
  .g-node{ flex-direction:row; align-items:center; text-align:start; padding:.6rem .7rem; gap:.7rem }
  .g-node-n{ position:static; order:-1 }
  .g-node-s{ margin-inline-start:auto }
  .g-keys thead{ display:none }
  .g-keys tr{ display:grid; grid-template-columns:auto 1fr; gap:.3rem .6rem; padding:.55rem .8rem; border-top:1px solid var(--line-soft) }
  .g-keys tr:first-child{ border-top:0 }
  .g-keys td{ padding:0; border:0 }
  .g-keys td.g-key-what{ grid-column:1 / -1 }
}
@media (max-width:640px){
  .g-search .g-kbd{ display:none }
  .g-search input{ padding-inline-end:.8rem }
  .g-progress span{ display:none }
  .g-layout{ padding:.6rem .6rem 2.5rem }
  .g-hero{ padding:1rem }
  .g-hero-title{ font-size:calc(20px * var(--fs)) }
  .g-chap-head{ flex-wrap:wrap }
  .g-chap-act{ width:100%; padding-top:0 }
  .sh-url, .sh-dots{ display:none }
  .sh-btn span{ display:none }
  .sh-stage{ margin:.5rem }
  .g-node-s{ display:none }
}

/* ------------------- پیوندهایی که در نسخهٔ ایستا جای دکمه‌اند ------------------- */
a.g-node, a.g-side-chip, a.g-cta, a.g-faq-go{ text-decoration:none }
a.g-node{ color:inherit }
.g-path-h{ margin:1.2rem 0 0; font-size:calc(13px * var(--fs)); font-weight:800; color:var(--txt-mute) }
.g-path{ margin-top:.6rem }

/* گام‌ها در HTML ایستا li اند؛ app.js فقط به گامِ دارای کادر نقش دکمه می‌دهد */
li.sh-step{ list-style:none; cursor:default }
li.sh-step.has-mark{ cursor:pointer }
li.sh-step.has-mark:focus-visible{ outline:2px solid var(--gold-ring); outline-offset:1px }
li.sh-step.no-mark:hover, html:not(.js) li.sh-step:hover{ background:none }
html:not(.js) .sh-sd{ -webkit-line-clamp:unset; display:block }
html:not(.js) .sh-steps{ height:auto; min-height:0 }

@media (max-width:1000px){
  .g-head-nav{ display:none }
}
@media (max-width:640px){
  .g-head-in{ gap:.5rem; padding:.45rem .6rem; min-height:54px }
  .g-brand .brand-mark{ --brand-logo-h:34px }
  .g-enter{ height:34px; padding:0 .7rem; font-size:calc(12px * var(--fs)) }
  [id]{ scroll-margin-top:110px }
  .g-toc{ top:55px }
}
@media (max-width:420px){
  .g-progress{ display:none }
  .g-brand .brand-mark{ --brand-logo-h:28px }
}