/* ==========================================================================
   Dāstān LEGAL pages (/privacy and /terms): privacy.html, terms.html. Loaded after chrome.css, theme.css, menu.css and listing.css (tokens, hero, page switch, footer).
   One continuous page on the theme ground (light: cream, dark: black): the hero (page switch, title, date line), then the contents list beside (wide) or above (phone) the
   document: an "at a glance" card and numbered sections. The partner's own text sits in tinted blocks (.lg-own); everything else is plain description of how the site works
   (catalog.js keys lg.*, see README "Legal pages"). Text, inline SVG and CSS only: no motion, no scripts of its own.
   Sections: 1 hero, 2 layout, 3 contents, 4 at a glance, 5 sections, 6 definition lists, 7 owner's text, 8 order steps and statuses, 9 contact, 10 Persian + phones.
   ========================================================================== */

/* 1. hero ---------------------------------------------------------------------- */
.lg-hero{padding-bottom:clamp(14px,2vw,28px)}
.pgsw-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
.pgsw-2 .pgsw-t{padding-inline:6px}
.pgsw-tm{--tc:var(--mint)}
.lg-meta{display:inline-flex;align-items:center;gap:.6em;margin:clamp(14px,1.6vw,22px) 0 0;padding:.35em .9em .3em;border:2px solid rgb(var(--th-fg-rgb) / .22);font:700 clamp(13px,1.1vw,15px)/1.5 var(--nian);color:rgb(var(--th-fg-rgb) / .78)}
.lg-meta:before{content:"";flex:none;width:.6em;height:.6em;background:var(--mint)}
.lg-meta time{color:var(--th-fg)}

/* 2. layout: contents on one side, document on the other (stacked on phones) -------------- */
.lg-wrap{padding:clamp(8px,1.4vw,20px) var(--inset) calc(var(--sec) * 1.2);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vw,30px);align-items:start;color:var(--th-fg)}
@media (min-width:960px){
  .lg-wrap{grid-template-columns:minmax(210px,270px) minmax(0,62em);justify-content:start;column-gap:clamp(40px,5vw,84px)}
  .lg-side{position:sticky;top:calc(var(--hdh,64px) + 28px)}
}
.lg-doc{min-width:0;counter-reset:sec;font:400 clamp(16.5px,1.12vw,18.5px)/1.85 var(--nian);color:rgb(var(--th-fg-rgb) / .9);overflow-wrap:break-word}
.lg-doc code,.lg-toc a{overflow-wrap:anywhere}

/* 3. contents ------------------------------------------------------------------- */
.lg-toc{padding:14px 0 10px;border-top:3px solid var(--th-hl)}
.lg-toc-h{margin:0 0 6px;font:900 clamp(15px,1.2vw,17px)/1.4 var(--nian);color:var(--th-hl)}
.lg-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.lg-toc li{counter-increment:toc}
.lg-toc a{display:flex;gap:.75em;align-items:baseline;min-height:40px;padding:6px 0;border-bottom:1px solid rgb(var(--th-fg-rgb) / .14);font:400 clamp(15px,1.08vw,16.5px)/1.5 var(--nian);color:var(--th-fg)}
.lg-toc a:before{content:counter(toc,decimal-leading-zero);flex:none;min-width:1.8em;font:400 12px/1.5 var(--mc);color:var(--th-hl2)}
.lg-toc a:hover,.lg-toc a:focus-visible{color:var(--th-hl);text-decoration:underline;text-underline-offset:4px}
@media (max-width:959px){
  .lg-side{margin-inline:calc(var(--inset) * -1)}
  .lg-toc{padding:10px var(--inset) 12px;border-top:0;border-bottom:2px solid rgb(var(--th-fg-rgb) / .16)}
  .lg-toc-h{display:none}
  .lg-toc ol{display:flex;gap:8px;overflow-x:auto;padding:2px var(--inset) 6px;margin-inline:calc(var(--inset) * -1);scroll-snap-type:x proximity;scroll-padding-inline:var(--inset);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lg-toc ol::-webkit-scrollbar{display:none}
  .lg-toc li{flex:none;scroll-snap-align:start}
  .lg-toc a{min-height:40px;padding:6px 14px 6px 12px;border:2px solid rgb(var(--th-fg-rgb) / .22);white-space:nowrap;font-size:15px}
  .lg-toc a:hover,.lg-toc a:focus-visible{text-decoration:none;border-color:var(--th-hl)}
}

/* 4. at a glance ------------------------------------------------------------------ */
.lg-glance{margin:0 0 clamp(22px,3vw,38px)}
.lg-gl-h{margin:0 0 12px;font:900 clamp(17px,1.4vw,20px)/1.4 var(--nian);color:var(--th-hl)}
.lg-gl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:2px;margin:0;border:2px solid rgb(var(--th-fg-rgb) / .16);background:rgb(var(--th-fg-rgb) / .16)}
.lg-gl>div{display:grid;grid-template-columns:auto 1fr;align-content:start;gap:2px 10px;padding:14px 16px 16px;background:var(--th-bg)}
.lg-gl .lg-ic{grid-row:1 / span 2;width:26px;height:26px;margin-top:3px;color:var(--th-hl);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lg-gl dt{font:700 13.5px/1.5 var(--nian);color:rgb(var(--th-fg-rgb) / .62)}
.lg-gl dd{margin:0;font:700 clamp(15px,1.1vw,16.5px)/1.55 var(--nian);color:var(--th-fg)}
@media (max-width:520px){.lg-gl{grid-template-columns:repeat(2,minmax(0,1fr))}.lg-gl>div:last-child:nth-child(odd){grid-column:1 / -1}}

/* 5. numbered sections ------------------------------------------------------------ */
.lg-sec{counter-increment:sec;padding:clamp(24px,3vw,40px) 0;border-top:2px solid rgb(var(--th-fg-rgb) / .2);scroll-margin-top:calc(var(--hdh,64px) + 12px)}
.lg-sec>h2{display:flex;align-items:center;gap:.65em;margin:0 0 .75em;font:900 clamp(21px,2.1vw,30px)/1.35 var(--nian);color:var(--th-hl);text-wrap:balance}
.lg-sec>h2:before{content:counter(sec,decimal-leading-zero);flex:none;display:grid;place-items:center;min-width:2.1em;height:2.1em;padding:.1em .2em 0;background:var(--coral);color:#000;font:400 .55em/1 var(--mc);letter-spacing:.02em}
.lg-sec:nth-of-type(even)>h2:before{background:var(--mint)}
.lg-p{margin:0 0 .9em}
.lg-p:last-child,.lg-sec>p:last-child{margin-bottom:0}
.lg-note{font-size:.92em;color:rgb(var(--th-fg-rgb) / .68)}
.lg-h3{margin:1.6em 0 .4em;font:700 1.08em/1.5 var(--nian);color:var(--th-hl2)}

/* 6. definition lists (what is stored, where it is used ...) ---------------------------------- */
.lg-dl{margin:1.1em 0 0;border-top:1px solid rgb(var(--th-fg-rgb) / .16)}
.lg-dl>div{display:grid;gap:2px 28px;padding:14px 0;border-bottom:1px solid rgb(var(--th-fg-rgb) / .16)}
.lg-dl dt{margin:0;font:700 1em/1.7 var(--nian);color:var(--th-fg)}
.lg-dl dd{margin:0;color:rgb(var(--th-fg-rgb) / .86)}
@media (min-width:720px){.lg-dl>div{grid-template-columns:minmax(150px,225px) minmax(0,1fr)}}
.lg-dl code{display:inline-block;margin:0 0 4px;padding:.05em .5em;background:rgb(var(--th-fg-rgb) / .08);border:1px solid rgb(var(--th-fg-rgb) / .14);font:600 .84em/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;direction:ltr;unicode-bidi:isolate;text-align:left}
.lg-dl-code dt{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:flex-start;align-content:flex-start}

/* 7. the partner's own text ------------------------------------------------------------ */
.lg-own{margin:0 0 1.1em;padding:clamp(16px,2vw,24px) clamp(18px,2.2vw,28px);background:rgb(var(--th-fg-rgb) / .055);border-inline-start:6px solid var(--mint);font-size:clamp(17.5px,1.35vw,21px);line-height:1.85;color:var(--th-fg)}
.lg-own strong{font-weight:900;color:var(--th-hl)}
.lg-wa{font-weight:700;color:var(--th-fg);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.lg-wa:hover,.lg-wa:focus-visible{color:var(--th-hl)}
.lg-ol{list-style:none;counter-reset:pt;padding-top:clamp(6px,1vw,12px);padding-bottom:clamp(6px,1vw,12px)}
.lg-ol li{counter-increment:pt;display:flex;align-items:flex-start;gap:1em;margin:0;padding:clamp(12px,1.4vw,18px) 0;border-top:1px solid rgb(var(--th-fg-rgb) / .16)}
.lg-ol li:first-child{border-top:0}
.lg-ol li:before{content:counter(pt,decimal-leading-zero);flex:none;display:grid;place-items:center;min-width:2.3em;height:2.3em;margin-top:.1em;padding:.1em .2em 0;background:var(--coral);color:#000;font:400 .62em/1 var(--mc);letter-spacing:.02em}
.lg-ol li:nth-child(even):before{background:var(--mint)}
.lg-own-lead{border-inline-start-color:var(--coral)}
.lg-qa dd{color:rgb(var(--th-fg-rgb) / .92)}
.lg-qa dt{color:var(--th-hl)}

/* 8. order steps and statuses --------------------------------------------------------------- */
.lg-steps{list-style:none;counter-reset:st;margin:1.2em 0 0;padding:0}
.lg-steps>li{counter-increment:st;position:relative;padding:0 0 clamp(18px,2vw,26px);padding-inline-start:clamp(54px,5vw,66px)}
.lg-steps>li:before{content:counter(st);position:absolute;inset-inline-start:0;top:0;display:grid;place-items:center;width:2.4em;height:2.4em;padding-top:.1em;background:var(--mint);color:#000;font:400 17px/1 var(--mc)}
.lg-steps>li:nth-child(odd):before{background:var(--coral)}
.lg-steps>li:after{content:"";position:absolute;inset-inline-start:calc(1.2em - 1px);top:2.7em;bottom:.3em;width:2px;background:rgb(var(--th-fg-rgb) / .16)}
.lg-steps>li:last-child{padding-bottom:0}
.lg-steps>li:last-child:after{display:none}
.lg-steps h3{margin:0 0 .25em;font:900 1.12em/1.5 var(--nian);color:var(--th-fg)}
.lg-steps .lg-p{margin:0}
.lg-legend-h{margin:1.8em 0 .6em;font:700 .95em/1.5 var(--nian);color:rgb(var(--th-fg-rgb) / .68)}
.lg-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 .4em;padding:0}
.lg-chip{padding:.3em .85em .25em;border:2px solid rgb(var(--th-fg-rgb) / .24);font:700 14.5px/1.5 var(--nian);color:var(--th-fg)}
.lg-st-awaiting_payment,.lg-st-proof_submitted{border-style:dashed}
.lg-st-paid,.lg-st-shipped{border-color:var(--mint)}
.lg-st-rejected,.lg-st-cancelled,.lg-st-expired{border-color:var(--coral)}

/* 9. contact ------------------------------------------------------------------------ */
.lg-contact{display:flex;flex-wrap:wrap;gap:12px;margin:1.1em 0 0}
.lg-btn{display:inline-flex;align-items:center;gap:.6em;min-height:50px;padding:0 20px;border:2px solid var(--th-fg);font:700 16px/1.2 var(--nian);color:var(--th-fg);transition:background-color .2s,color .2s}
.lg-btn .lg-ic{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lg-btn:hover,.lg-btn:focus-visible{background:var(--th-inv-bg);color:var(--th-inv-fg)}
@media (max-width:520px){.lg-contact{flex-direction:column}.lg-btn{justify-content:center}}
@media (prefers-reduced-motion:reduce){.lg-btn{transition:none}}

/* 10. Persian + phones --------------------------------------------------------------- */
html[lang=fa] .lg-doc{line-height:2.1;word-spacing:.08em}
html[lang=fa] .lg-own{line-height:2.1}
html[lang=fa] .lg-toc a,html[lang=fa] .lg-gl dd,html[lang=fa] .lg-gl dt,html[lang=fa] .lg-chip,html[lang=fa] .lg-meta{line-height:1.8}
html[lang=fa] .lg-sec>h2{line-height:1.6}
html[lang=fa] .lg-sec>h2,html[lang=fa] .lg-gl-h,html[lang=fa] .lg-toc-h,html[lang=fa] .lg-steps h3,html[lang=fa] .lg-h3,html[lang=fa] .lg-own strong,html[lang=fa] .lg-dl dt,html[lang=fa] .lg-gl dd,html[lang=fa] .lg-gl dt{word-spacing:.14em}
html[lang=fa] .lg-sec>h2:before{content:counter(sec,persian);font-family:var(--nian);font-weight:900;font-size:.62em;letter-spacing:0}
html[lang=fa] .lg-toc a:before{content:counter(toc,persian);font-family:var(--nian);font-weight:700;font-size:14px}
html[lang=fa] .lg-ol li:before{content:counter(pt,persian);font-family:var(--nian);font-weight:900;font-size:.7em;letter-spacing:0}
html[lang=fa] .lg-steps>li:before{content:counter(st,persian);font-family:var(--nian);font-weight:900;font-size:19px}
html[lang=fa] .lg-steps h3{line-height:1.7}
html:not([lang=fa]) .lg-wrap,html:not([lang=fa]) .lg-meta{word-spacing:.16em}
html:not([lang=fa]) .lg-doc{font-size:clamp(17.5px,1.2vw,19.5px);line-height:1.75}
html:not([lang=fa]) .lg-own{line-height:1.75}
html:not([lang=fa]) .lg-toc a{font-size:clamp(15.5px,1.1vw,17px)}
html:not([lang=fa]) .lg-gl dt{font-size:14px}
@media (max-width:520px){
  .lg-sec>h2{font-size:21px}
  .lg-ol li{gap:.8em}
  .lg-own{border-inline-start-width:5px}
}