/* ===========================================================================
   AREF RESEARCH — report stylesheet
   Trilingual long-form research page (de / en / fa, RTL-aware).

   Contents
     1. Design tokens (light + dark)
     2. Base & layout
     3. Chrome: progress bar, top bar, language switch, theme switch
     4. Language panes & RTL
     5. Masthead, 30-second view, key numbers, table of contents
     6. Sections, prose, tables, figures
     7. Signature blocks (AREF SIGNAL / INSIGHTS / MY CALL)
     8. Source ledger & footer
     9. Responsive
    10. Print
   =========================================================================== */

/* -------------------------------------------------- 1. Design tokens ----- */

:root{
  color-scheme: light;

  /* Aref Research palette */
  --paper:      #F7F5F0;   /* warm white  */
  --panel:      #EFECE4;
  --ink:        #0B0B0B;   /* deep charcoal */
  --ink-soft:   #2B3238;
  --ink-body:   #3A4147;
  --slate:      #667085;
  --rule:       #DAD5C9;
  --acc:        #3EC48D;   /* emerald */
  --accd:       #17795A;   /* emerald, text-safe on warm white */
  --warn:       #B4462F;
  --call-bg:    #0B0B0B;
  --call-fg:    #E6E4DE;
  --sel:        #CFEFE0;

  /* Figure tokens — consumed by the inline SVGs */
  --fig-ink:      #0B0B0B;
  --fig-slate:    #667085;
  --fig-rule:     #D9D4C7;
  --fig-acc:      #3EC48D;
  --fig-accd:     #17795A;
  --fig-muted:    #C9C3B4;
  --fig-muted-2:  #9AA6A0;
  --fig-warn:     #B4462F;
  --fig-panel:    #EFECE4;
  --fig-tint:     #E6F6EE;
  --fig-paper:    #F7F5F0;

  --measure: 36rem;
  --wrap:    62rem;
  --bar-h:   3.4rem;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --sans-fa: "Vazirmatn", "Inter", Tahoma, system-ui, sans-serif;
}

/* Dark variant — same identity, inverted ground. Remove this block to ship
   light-only; nothing else in the stylesheet depends on it. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:    #101316;
    --panel:    #191D21;
    --ink:      #ECE9E2;
    --ink-soft: #C6CBD1;
    --ink-body: #B3BAC2;
    --slate:    #939DAA;
    --rule:     #2B3036;
    --acc:      #3EC48D;
    --accd:     #56D3A1;
    --warn:     #E8735A;
    --call-bg:  #05070A;
    --call-fg:  #DCDAD4;
    --sel:      #14503A;

    --fig-ink:     #ECE9E2;
    --fig-slate:   #939DAA;
    --fig-rule:    #2E343A;
    --fig-acc:     #3EC48D;
    --fig-accd:    #56D3A1;
    --fig-muted:   #4A5158;
    --fig-muted-2: #63706C;
    --fig-warn:    #E8735A;
    --fig-panel:   #191D21;
    --fig-tint:    #10382A;
    --fig-paper:   #101316;
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:    #101316;
  --panel:    #191D21;
  --ink:      #ECE9E2;
  --ink-soft: #C6CBD1;
  --ink-body: #B3BAC2;
  --slate:    #939DAA;
  --rule:     #2B3036;
  --acc:      #3EC48D;
  --accd:     #56D3A1;
  --warn:     #E8735A;
  --call-bg:  #05070A;
  --call-fg:  #DCDAD4;
  --sel:      #14503A;

  --fig-ink:     #ECE9E2;
  --fig-slate:   #939DAA;
  --fig-rule:    #2E343A;
  --fig-acc:     #3EC48D;
  --fig-accd:    #56D3A1;
  --fig-muted:   #4A5158;
  --fig-muted-2: #63706C;
  --fig-warn:    #E8735A;
  --fig-panel:   #191D21;
  --fig-tint:    #10382A;
  --fig-paper:   #101316;
}

/* -------------------------------------------------- 2. Base & layout ----- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body.aref{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.aref ::selection{background:var(--sel)}

.aref .wrap{max-width:var(--wrap); margin:0 auto; padding:0 1.6rem 5rem}

.aref a{
  color:var(--accd);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accd) 32%, transparent);
  transition:border-color .15s ease, color .15s ease;
}
.aref a:hover{border-bottom-color:var(--accd)}
.aref a:focus-visible,
.aref button:focus-visible{
  outline:2px solid var(--accd); outline-offset:3px; border-radius:2px;
}

.aref .skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; font-size:.85rem; font-weight:600; border:0;
}
.aref .skip:focus{left:1rem; top:1rem}

.aref .vh{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------- 3. Chrome: bars, language, theme ----- */

.aref .progress{
  position:fixed; inset-inline:0; top:0; height:2px; z-index:80;
  background:var(--acc); transform:scaleX(0); transform-origin:0 50%;
  will-change:transform; pointer-events:none;
}
[dir="rtl"] .aref .progress,
.aref .progress[data-dir="rtl"]{transform-origin:100% 50%}

.aref .topbar{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(150%) blur(8px);
  -webkit-backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.72rem 0; flex-wrap:wrap;
}
@supports not (backdrop-filter: blur(1px)){ .aref .topbar{background:var(--paper)} }

.aref .wordmark{
  font-size:.78rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
  border:0; background:none; padding:0; font-family:inherit;
}
.aref .wordmark span{color:var(--accd)}

.aref .controls{display:flex; align-items:center; gap:1rem; flex-wrap:wrap}

.aref .switch{display:flex; align-items:center}
.aref .switch-label{
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate); margin-inline-end:.75rem; white-space:nowrap;
}
.aref .switch button{
  font-family:var(--sans); font-size:.8rem; font-weight:500;
  background:none; border:1px solid var(--rule); color:var(--slate);
  padding:.32rem .82rem; cursor:pointer; line-height:1.4;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.aref .switch button + button{border-inline-start:none}
.aref .switch button:first-child{border-radius:2px 0 0 2px}
.aref .switch button:last-child{border-radius:0 2px 2px 0}
.aref .switch button:hover{color:var(--accd); border-color:var(--accd)}
.aref .switch button[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}
.aref .switch button[lang="fa"]{font-family:var(--sans-fa)}
.aref .theme-switch button{padding:.32rem .6rem}

/* --------------------------------------- 4. Language panes & RTL -------- */

.aref .pane[hidden]{display:none}
.aref .pane{animation:aref-fade .25s ease both}
@keyframes aref-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .aref .pane{animation:none} }

.aref .pane[dir="rtl"]{
  direction:rtl; text-align:right;
  font-family:var(--sans-fa);
  font-size:16px; line-height:2.0;
}
.aref .pane[dir="rtl"] ul,
.aref .pane[dir="rtl"] ol{padding-left:0; padding-right:1.2rem}
.aref .pane[dir="rtl"] th,
.aref .pane[dir="rtl"] td{text-align:right}
.aref .pane[dir="rtl"] h1,
.aref .pane[dir="rtl"] h2,
.aref .pane[dir="rtl"] h3{letter-spacing:0; line-height:1.5}
.aref .pane[dir="rtl"] .mast h1{line-height:1.4}
.aref .pane[dir="rtl"] figure svg{direction:ltr}
.aref .pane[dir="rtl"] .stat .v,
.aref .pane[dir="rtl"] .ins-n{direction:ltr}
.aref .pane[dir="rtl"] .sig-head span{margin-inline-start:.7rem}

/* ------------------- 5. Masthead, 30s view, numbers, contents ----------- */

.aref .mast{padding:3.2rem 0 2.2rem; border-bottom:2px solid var(--ink)}
.aref .mast .kicker{
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accd); margin:0 0 1.4rem;
}
.aref .mast h1{
  font-size:clamp(2.05rem, 5.2vw, 3.5rem); line-height:1.07; font-weight:600;
  letter-spacing:-.025em; margin:0 0 1.1rem; max-width:20ch;
}
.aref .mast .standfirst{
  font-size:clamp(1.02rem, 1.6vw, 1.13rem); color:var(--ink-soft);
  margin:0 0 2rem; max-width:56ch; line-height:1.55;
}
.aref .mast .meta{
  font-size:.76rem; color:var(--slate); display:flex; flex-wrap:wrap;
  gap:.5rem 1.4rem; letter-spacing:.02em; margin:0;
}

.aref .thirty{
  margin:2.6rem 0 0; padding:1.6rem 1.8rem;
  background:var(--panel); border-top:2px solid var(--acc);
}
.aref .thirty .lbl30{
  font-size:.7rem; font-weight:700; letter-spacing:.16em;
  color:var(--accd); margin:0 0 .9rem;
}
.aref .thirty p{max-width:52rem; margin:0 0 .85rem}
.aref .thirty p:last-child{margin-bottom:0}

.aref .boxes{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); border-top:0;
}
.aref .box{background:var(--paper); padding:1.2rem 1.3rem}
.aref .box .k{
  font-size:.66rem; font-weight:700; letter-spacing:.13em;
  color:var(--slate); margin:0 0 .5rem;
}
.aref .box .t{font-size:1.02rem; font-weight:600; margin:0 0 .45rem; line-height:1.3}
.aref .box p{font-size:.87rem; color:var(--ink-body); margin:0; line-height:1.55}

.aref .stats{
  display:flex; flex-wrap:wrap; margin:2.4rem 0 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:1.3rem 0;
}
.aref .stat{
  flex:1 1 17%; min-width:150px; padding:0 1.1rem;
  border-inline-end:1px solid var(--rule);
}
.aref .stat:last-child{border-inline-end:none}
.aref .stat .v{
  font-size:1.55rem; font-weight:700; letter-spacing:-.02em;
  color:var(--accd); line-height:1.1; margin:0 0 .4rem;
  font-variant-numeric:tabular-nums;
}
.aref .stat .l{font-size:.76rem; color:var(--slate); line-height:1.45; margin:0}

.aref .toc{margin:2.6rem 0 0; border-bottom:1px solid var(--rule); padding-bottom:1.4rem}
.aref .toc h2{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); margin:0 0 .9rem;
}
.aref .toc ol{
  list-style:none; margin:0; padding:0; max-width:none;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
  gap:.35rem 1.6rem; counter-reset:toc;
}
.aref .toc li{margin:0; counter-increment:toc; font-size:.87rem}
.aref .toc a{
  display:block; padding:.2rem 0; border-bottom:0; color:var(--ink-body);
}
.aref .toc a::before{
  content:counter(toc, decimal-leading-zero);
  color:var(--acc); font-weight:700; font-size:.72rem;
  margin-inline-end:.6rem; font-variant-numeric:tabular-nums;
}
.aref .toc a:hover{color:var(--accd)}

/* ------------------------- 6. Sections, prose, tables, figures ---------- */

.aref section{padding:3.2rem 0 0; scroll-margin-top:calc(var(--bar-h) + 1.5rem)}
.aref .sec-head{
  display:flex; gap:1.1rem; align-items:baseline;
  border-top:1px solid var(--rule); padding-top:1rem; margin-bottom:1.6rem;
}
.aref .sec-head .n{
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accd); flex:0 0 auto; padding-top:.5rem; white-space:nowrap;
}
.aref .sec-head h2{
  font-size:clamp(1.45rem, 3.2vw, 2rem); font-weight:600; line-height:1.18;
  letter-spacing:-.02em; margin:0; max-width:26ch;
}
.aref section.sig .sec-head h2{letter-spacing:.02em}

.aref .anchor{
  border:0; color:var(--rule); font-weight:400; text-decoration:none;
  margin-inline-start:.5rem; opacity:0; transition:opacity .15s ease;
  font-size:.8em;
}
.aref .sec-head:hover .anchor,
.aref .anchor:focus-visible{opacity:1; color:var(--acc)}

.aref h3{font-size:1.16rem; font-weight:600; margin:2.1rem 0 .6rem; line-height:1.35; max-width:34ch}
.aref h3.sig-head{
  font-size:.74rem; font-weight:700; letter-spacing:.15em; color:var(--accd);
  border-top:1px solid var(--acc); padding-top:.7rem; margin-top:2.4rem; max-width:none;
}
.aref h3.sig-head span{
  font-size:1.1rem; font-weight:600; letter-spacing:-.01em; color:var(--ink);
  margin-inline-start:.7rem; text-transform:none;
}

.aref p{margin:0 0 1rem; max-width:var(--measure)}
.aref ul,.aref ol{margin:0 0 1.1rem; padding-left:1.15rem; max-width:var(--measure)}
.aref li{margin-bottom:.5rem}
.aref strong{font-weight:600}
.aref em{font-style:italic}

.aref .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.6rem 0 1rem}
.aref table{width:100%; border-collapse:collapse; font-size:.88rem; min-width:34rem}
.aref thead th{
  text-align:start; font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--slate);
  border-bottom:1px solid var(--ink); padding:0 .7rem .5rem 0; vertical-align:bottom;
}
.aref td{
  padding:.75rem .7rem .75rem 0; border-bottom:1px solid var(--rule);
  vertical-align:top; line-height:1.5;
}
.aref .pane[dir="rtl"] td,
.aref .pane[dir="rtl"] thead th{padding:.75rem 0 .75rem .7rem}
.aref td:last-child,.aref th:last-child{padding-inline-end:0}
.aref .sub{display:block; font-size:.76rem; color:var(--slate); font-weight:400; margin-top:.15rem}

.aref .dots i{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--accd); margin-inline-end:3px;
}
.aref .dots.on i{background:var(--rule)}
.aref .verdict{font-weight:600}
.aref .verdict.yes{color:var(--accd)}
.aref .verdict.no{color:var(--warn)}
.aref .verdict.maybe{color:var(--slate)}

.aref figure{margin:2.2rem 0; padding:0}
.aref figure svg{width:100%; height:auto; display:block; min-width:30rem}
.aref .figscroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.aref .fig-title{font-size:.92rem; font-weight:600; margin:0 0 .25rem; line-height:1.4}
.aref .fig-sub{font-size:.78rem; color:var(--slate); margin:0 0 1rem; max-width:62ch; line-height:1.5}
.aref figcaption,.aref .figcap{
  font-size:.74rem; color:var(--slate); margin-top:.7rem; padding-top:.55rem;
  border-top:1px solid var(--rule); max-width:64ch; line-height:1.55;
}
.aref .s-cap,.aref .s-lb,.aref .s-val,.aref .s-ax,.aref .s-note{font-family:var(--sans)}
.aref .pane[dir="rtl"] .s-cap,
.aref .pane[dir="rtl"] .s-lb,
.aref .pane[dir="rtl"] .s-note{font-family:var(--sans-fa)}
.aref .s-cap{font-size:11px; letter-spacing:.08em}
.aref .s-lb{font-size:11.5px}
.aref .s-val{font-size:12px}
.aref .s-ax{font-size:10px}
.aref .s-note{font-size:11px}

.aref .callout{
  background:var(--panel); border-inline-start:3px solid var(--acc);
  padding:.9rem 1rem .9rem 1.15rem; margin:1.6rem 0; max-width:44rem;
}
.aref .pane[dir="rtl"] .callout{padding:.9rem 1.15rem .9rem 1rem}
.aref .callout .lead{
  font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accd); margin:0 0 .4rem;
}
.aref .callout p{margin:0; font-size:.92rem; max-width:none; line-height:1.6}

.aref .quote{border-inline-start:3px solid var(--ink); padding-inline-start:1.2rem; margin:1.8rem 0; max-width:42rem}
.aref .quote p{font-size:1.08rem; line-height:1.5; margin:0 0 .6rem; font-weight:500}
.aref .quote .src{font-size:.76rem; color:var(--slate); font-weight:400; margin:0}

.aref .lbl{
  display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.11em;
  background:var(--panel); color:var(--slate); padding:.14rem .45rem;
  border:1px solid var(--rule); vertical-align:.08em; margin-inline-start:.25rem;
}

/* ----------------------------------------- 7. Signature blocks ---------- */

.aref .insight{border-top:1px solid var(--rule); padding:1.3rem 0 .4rem}
.aref .insight .ins-n{
  font-size:.7rem; font-weight:700; letter-spacing:.1em;
  color:var(--acc); margin:0 0 .6rem;
}
.aref .insight p{max-width:42rem; margin:0 0 .7rem; font-size:.95rem}
.aref .insight .ins-conv{color:var(--slate)}
.aref .insight .ins-dec{border-inline-start:2px solid var(--acc); padding-inline-start:.9rem}

.aref .redflags li{margin-bottom:.7rem; max-width:44rem}
.aref .flags li{max-width:44rem}

.aref section.call{
  background:var(--call-bg); color:var(--call-fg);
  margin:3.4rem 0 0; padding:2.4rem 2rem 2rem;
}
.aref section.call .sec-head{border-top:0; padding-top:0; margin-bottom:1.2rem}
.aref section.call .sec-head h2{color:#fff; font-size:clamp(1.5rem,3vw,1.9rem); letter-spacing:.02em}
.aref section.call .sec-head .n{color:var(--acc)}
.aref section.call p,.aref section.call li{color:var(--call-fg)}
.aref section.call strong{color:#fff}
.aref section.call a{color:var(--acc); border-bottom-color:rgba(62,196,141,.4)}
.aref section.call .call-lead{
  font-size:clamp(1.08rem,2vw,1.25rem); line-height:1.45; font-weight:600; color:#fff;
  max-width:40rem; margin-bottom:1.4rem;
  border-inline-start:3px solid var(--acc); padding-inline-start:1rem;
}

.aref .limits{margin-top:3rem; border-top:1px solid var(--rule); padding-top:1.2rem}
.aref .limits h2{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); margin:0 0 .8rem;
}
.aref .limits li{font-size:.85rem; color:var(--ink-body); max-width:46rem}

/* ------------------------------------ 8. Source ledger & footer --------- */

.aref .ledger{margin-top:4rem; border-top:2px solid var(--ink); padding-top:1.6rem}
.aref .ledger > h2{font-size:1.4rem; font-weight:600; margin:0 0 .4rem; letter-spacing:-.01em}
.aref .ledger .lg-note{font-size:.8rem; color:var(--slate); margin:0 0 2rem; max-width:52rem}
.aref .lg-group{margin-bottom:2rem}
.aref .lg-group h3{
  font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accd); border-bottom:1px solid var(--rule);
  padding-bottom:.5rem; margin:0 0 1rem; max-width:none;
}
.aref .src-item{margin-bottom:1rem; max-width:52rem}
.aref .src-item .t{font-size:.92rem; font-weight:600; margin:0; line-height:1.4}
.aref .src-item .m{font-size:.78rem; color:var(--slate); margin:.1rem 0 .2rem}
.aref .src-item .nt{font-size:.83rem; color:var(--ink-body); margin:0; line-height:1.5}

.aref .pagefoot{
  margin-top:3.5rem; border-top:1px solid var(--rule); padding:1.1rem 0 0;
  font-size:.72rem; color:var(--slate);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}

/* ------------------------------------------------- 9. Responsive -------- */

@media (max-width:900px){
  .aref .boxes{grid-template-columns:1fr}
  .aref .stat{flex:1 1 45%; border-inline-end:none; border-bottom:1px solid var(--rule);
              padding-bottom:.9rem; margin-bottom:.9rem}
  .aref .stat:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
  .aref .sec-head{flex-direction:column; gap:.25rem}
  .aref .sec-head .n{padding-top:0}
  .aref section.call{padding:2rem 1.3rem 1.6rem; margin-inline:-1.6rem}
}

@media (max-width:640px){
  body.aref{font-size:16.5px}
  .aref .wrap{padding:0 1.1rem 3.5rem}
  .aref .thirty{padding:1.2rem 1.2rem; margin-inline:-1.1rem}
  .aref .topbar{gap:.6rem; padding:.6rem 0}
  .aref .switch-label{display:none}
  .aref .controls{gap:.6rem}
  .aref .toc ol{grid-template-columns:1fr}
  .aref .mast{padding:2.2rem 0 1.6rem}
}

/* ----------------------------------------------------- 10. Print -------- */

@media print{
  .aref .topbar,.aref .progress,.aref .toc,.aref .skip,.aref .anchor{display:none!important}
  .aref .pane[hidden]{display:block!important}
  .aref .pane{break-before:page}
  .aref .pane:first-of-type{break-before:auto}
  body.aref{font-size:10.5pt; background:#fff; color:#000}
  .aref .wrap{max-width:none; padding:0}
  .aref section{padding-top:1.6rem}
  .aref .sec-head,.aref h3{break-after:avoid; break-inside:avoid}
  .aref figure,.aref .tablewrap,.aref .callout,.aref .quote,
  .aref .insight,.aref .box,.aref .thirty{break-inside:avoid}
  .aref figure svg{min-width:0}
  .aref section.call{break-before:page; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .aref .thirty,.aref .callout,.aref .stats,.aref .box{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .aref a{color:#000; border-bottom:0}
  .aref .src-item .t a::after{content:" (" attr(href) ")"; font-weight:400; font-size:.75em; color:#444}
}