/* Bonyadbin - the site's one stylesheet.

   Identity: «کاشی» over «دفتر حسابرسی» - Isfahan tilework laid over a page
   that reads like the audited statement its numbers come from, not like a
   dashboard. Everything visual is borrowed
   from that document or from the place it is read:
     - Naskh for headings and figures: the face of printed Persian documents
       and of the statements themselves (B Nazanin, B Lotus are Naskh).
     - Estedad for body and tables: a modern Persian sans that is not the
       Vazirmatn every Persian site already uses.
     - Isfahan tile colours with fixed meanings: lapis is ours, turquoise is
       clickable, saffron is caution and verification, green and pomegranate
       are market direction and nothing else.
     - Statement grammar: rules that mean something (a double rule under a
       total), notes numbered and listed under what they qualify, and one
       auditor's stamp - the single bold element on the page.

   Persian is never letter-spaced (it breaks the joins) and never reshaped:
   the browser shapes and bidi-orders it (see web/format.py).

   Cascade layers, lowest priority first, so a component never fights a page
   rule with specificity:
     vendor, tokens, base, layout, components, pages, utilities
   A colour, font or size written outside `tokens` is a bug. Third-party CSS
   sits in `vendor`; left unlayered it would outrank every rule here. */

@layer vendor, tokens, base, layout, components, pages, utilities;
@import url('/static/uplot.min.css') layer(vendor);

/* ------------------------------------------------------------------------ */
@layer tokens {
  /* Variable fonts, subset to Persian + Latin, served from this origin:
     Google Fonts and most CDNs are unreliable or blocked for Iranian IPs. */
  @font-face{font-family:'Naskh';font-weight:400 700;font-display:swap;
    src:url('/fonts/naskh.woff') format('woff')}
  @font-face{font-family:'Estedad';font-weight:100 900;font-display:swap;
    src:url('/fonts/estedad.woff') format('woff')}

  :root{
    color-scheme:light;
    /* Isfahan tile palette */
    --lapis:#1B3F8B;  --lapis-2:#2256BB;  --lapis-soft:#DCE6F7;
    --turquoise:#0A7F86; --turquoise-soft:#D5EEEF;
    --saffron:#B77610; --saffron-soft:#F8EAC9;
    --up:#1F7A44;  --up-soft:#E0F0E6;
    --down:#B42B23; --down-soft:#F8E1DE;
    /* paper and ink */
    --ground:#EAF3F4; --surface:#FFFFFF; --sunk:#DDEDEF;
    --ink:#0F2240; --ink-2:#2D4466; --muted:#58708C;
    --rule:#CCDFE3; --rule-2:#A6C4CB;
    /* The glazed header band and the hero panel: a darker lapis than --lapis,
       carrying light text. Its gold is repeated inside the star-lattice data
       URI below, which cannot read a custom property - change both together. */
    --band:#13306E; --band-2:#1B3F8B; --band-ink:#FFFFFF; --band-ink-2:#A9BDE6;
    --band-rule:#3D5CA3; --band-rule-2:#6E8CCB; --band-gold:#F2C14E;
    /* roles, so components never name a hue */
    --brand:var(--lapis); --link:var(--turquoise);
    --note:var(--saffron); --note-soft:var(--saffron-soft);
    --accent-ink:#FFFFFF;
    /* chart: validated with the dataviz skill's validate_palette.js against
       the surface (lightness band, chroma, colour-blind and normal-vision
       separation, 3:1 contrast). Bars use line + ma1, which pass as a pair. */
    --chart-line:#2256BB; --chart-fill:rgba(34,86,187,.10);
    --chart-ma1:#B77610; --chart-ma2:#AC4785; --chart-grid:#E3EEF0;
    /* type: two families, clearly distinct */
    --font-display:'Naskh','Noto Naskh Arabic','B Nazanin',serif;
    --font:'Estedad','Vazirmatn',Tahoma,sans-serif;
    /* scale for a Persian x-height, after the classic 12-14-16-18-21-24-36-48 */
    --fs-xs:12.5px; --fs-sm:14px; --fs-md:16px; --fs-lg:19px; --fs-xl:24px;
    --fs-2xl:32px; --fs-3xl:46px;
    /* space and shape: small radii, hierarchy from rules rather than shadows */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px; --s7:56px;
    --r-sm:6px; --r-md:10px; --r-pill:999px;
    --shadow-pop:0 10px 30px rgba(22,29,51,.12),0 2px 6px rgba(22,29,51,.06);
    --page:1240px; --header-h:62px;
  }

  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      color-scheme:dark;
      --lapis:#8EB4FF; --lapis-2:#5992E7; --lapis-soft:#173563;
      --turquoise:#3FD0C8; --turquoise-soft:#0F3A45;
      --saffron:#E8B23C; --saffron-soft:#3A2F12;
      --up:#4CC97F; --up-soft:#14301F; --down:#F07A6E; --down-soft:#3C1A17;
      --ground:#0B1F3A; --surface:#10294A; --sunk:#0D2342;
      --ink:#E6F0FA; --ink-2:#BFD3EA; --muted:#86A0BF;
      --rule:#1E3A63; --rule-2:#2C4D7C;
      --accent-ink:#06211F;
      --chart-line:#5992E7; --chart-fill:rgba(89,146,231,.14);
      --chart-ma1:#C68206; --chart-ma2:#018D87; --chart-grid:#173459;
      --shadow-pop:0 12px 32px rgba(0,0,0,.5);
    }
  }
  :root[data-theme="dark"]{
    color-scheme:dark;
    --lapis:#8EB4FF; --lapis-2:#5992E7; --lapis-soft:#173563;
    --turquoise:#3FD0C8; --turquoise-soft:#0F3A45;
    --saffron:#E8B23C; --saffron-soft:#3A2F12;
    --up:#4CC97F; --up-soft:#14301F; --down:#F07A6E; --down-soft:#3C1A17;
    --ground:#0B1F3A; --surface:#10294A; --sunk:#0D2342;
    --ink:#E6F0FA; --ink-2:#BFD3EA; --muted:#86A0BF;
    --rule:#1E3A63; --rule-2:#2C4D7C;
    --accent-ink:#06211F;
    --chart-line:#5992E7; --chart-fill:rgba(89,146,231,.14);
    --chart-ma1:#C68206; --chart-ma2:#018D87; --chart-grid:#173459;
    --shadow-pop:0 12px 32px rgba(0,0,0,.5);
  }
}

/* ------------------------------------------------------------------------ */
@layer base {
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--s4))}
  body{margin:0;direction:rtl;background:var(--ground);color:var(--ink);
    font-family:var(--font);font-size:var(--fs-md);line-height:1.85;
    -webkit-font-smoothing:antialiased}
  /* No tabular-nums here: Persian digits are already one width in both faces,
     and Estedad's tnum widens the decimal and thousands marks to a full digit
     ("۰ ,۴۱"). */
  a{color:var(--link);text-decoration:none}
  a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
  h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.5;margin:0;color:var(--brand)}
  h1{font-size:var(--fs-2xl)}
  h2{font-size:var(--fs-xl)}
  h3{font-size:var(--fs-lg)}
  p{margin:0 0 var(--s3)}
  b,strong{font-weight:700}
  img,svg{display:block;max-width:100%}
  :focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:var(--r-sm)}
  input,select,button{font:inherit;color:inherit}
  table{border-collapse:collapse;width:100%}
  ::selection{background:var(--lapis-soft);color:var(--ink)}
}

/* ------------------------------------------------------------------------ */
@layer layout {
  .container{max-width:var(--page);margin-inline:auto;padding-inline:var(--s5)}
  main.container{padding-block:var(--s5) var(--s7)}

  /* Header: brand seal, navigation, compact search, theme switch. Sticky. */
  .site-header{position:sticky;top:0;z-index:20;background:var(--surface);
    border-bottom:2px solid var(--brand)}
  .site-header__bar{display:flex;align-items:center;gap:var(--s5);min-height:var(--header-h)}
  .site-header__nav{display:flex;gap:2px;flex:1;min-width:0;align-self:stretch;align-items:stretch}
  .site-header__tools{display:flex;align-items:center;gap:var(--s2);margin-inline-start:auto}
  .site-header__menu{display:none}

  .freshness-strip{background:var(--sunk);color:var(--ink-2);font-size:var(--fs-xs);
    border-bottom:1px solid var(--rule)}
  .freshness-strip .container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s5);padding-block:6px}
  .freshness-strip--warn{background:var(--note-soft)}

  .site-footer{border-top:2px solid var(--brand);background:var(--surface);
    color:var(--muted);font-size:var(--fs-sm);margin-top:var(--s7)}
  .site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s5);padding-block:var(--s6)}
  .site-footer h4{margin:0 0 var(--s2);font-family:var(--font-display);font-size:var(--fs-md);color:var(--brand)}
  .site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
  .site-footer a{color:var(--ink-2)}
  .site-footer__legal{border-top:1px solid var(--rule);padding-block:var(--s4)}

  /* A section is a Naskh heading on a lapis rule - the way a statement
     separates its parts - not another card. */
  .section{margin-top:var(--s7)}
  .section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);
    margin-bottom:var(--s4);padding-bottom:var(--s2);border-bottom:1px solid var(--brand);flex-wrap:wrap}
  .section__head p{margin:4px 0 0;color:var(--muted);font-size:var(--fs-sm);max-width:72ch}

  .grid{display:grid;gap:var(--s3)}
  .grid > *{min-width:0}
  .grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5)}

  /* Company page: in-page navigation beside the content. */
  .with-aside{display:grid;grid-template-columns:190px minmax(0,1fr);gap:var(--s6);align-items:start}
  .with-aside__aside{position:sticky;top:calc(var(--header-h) + var(--s4))}

  @media (max-width:960px){
    .with-aside{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
    .with-aside__aside{position:static}
    .site-footer__grid{grid-template-columns:1fr 1fr}
  }
  /* Navigation folds into the menu before it can crowd the brand, and the
     compact search goes last, on phones, where it moves into the menu. */
  @media (max-width:1080px){
    .site-header__nav{display:none}
    .site-header__menu{display:block}
  }
  @media (max-width:560px){
    .site-header__search{display:none}
    .container{padding-inline:var(--s3)}
    main.container{padding-block:var(--s4) var(--s6)}
    h1{font-size:var(--fs-xl)}
    .site-footer__grid{grid-template-columns:1fr}
  }
}

/* ------------------------------------------------------------------------ */
@layer components {

  /* brand: a lapis seal with the initial, beside the name in Naskh --------- */
  .brand{display:flex;align-items:center;gap:var(--s2);color:var(--brand);white-space:nowrap}
  .brand:hover{text-decoration:none}
  .brand__seal{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;
    border:1.5px solid var(--brand);box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 4px var(--brand);
    font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1;padding-top:3px}
  .brand__name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);line-height:1.2}
  .brand__tag{display:block;font-family:var(--font);font-weight:400;font-size:11px;color:var(--muted);line-height:1.4}

  /* navigation: the active page is underlined in saffron on the header rule */
  .nav-link{display:flex;align-items:center;padding:0 10px;color:var(--ink-2);font-size:var(--fs-sm);
    white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-2px}
  .nav-link:hover{color:var(--brand);text-decoration:none}
  .nav-link.is-active{color:var(--brand);font-weight:700;border-bottom-color:var(--saffron)}

  .menu{position:relative}
  .menu > summary{list-style:none;cursor:pointer}
  .menu > summary::-webkit-details-marker{display:none}
  .menu__panel{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:230px;
    background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r-md);
    box-shadow:var(--shadow-pop);padding:var(--s2);display:grid;gap:2px;z-index:30}
  .menu__panel .nav-link{border:0;margin:0;padding:7px 10px;border-radius:var(--r-sm)}
  .menu__panel .nav-link.is-active{background:var(--sunk)}
  .menu__search{display:none;padding-bottom:var(--s2)}
  .menu__search .search--sm{width:100%}
  @media (max-width:560px){.menu__search{display:block}}

  /* buttons ---------------------------------------------------------------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--rule-2);
    background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:6px 14px;
    font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;line-height:1.5}
  .btn:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
  .btn--primary{background:var(--brand);border-color:var(--brand);color:var(--surface);font-weight:700}
  .btn--icon{padding:6px;width:36px;height:36px}
  .btn svg{width:17px;height:17px}

  /* segmented control: tabs on one rule, not a pill group -------------------- */
  .segmented{display:inline-flex;flex-wrap:wrap;border-bottom:1px solid var(--rule)}
  .segmented button{border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;
    padding:4px 10px;font-size:var(--fs-xs);color:var(--muted);cursor:pointer;line-height:1.8;white-space:nowrap}
  .segmented button:hover{color:var(--ink)}
  .segmented button[aria-pressed="true"]{color:var(--brand);font-weight:700;border-bottom-color:var(--brand)}
  .segmented button:disabled{opacity:.4;cursor:not-allowed}

  .toggle{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--ink-2);
    padding:3px 0;cursor:pointer;user-select:none}
  .toggle input{margin:0;accent-color:var(--brand)}
  .toggle__swatch{width:14px;height:3px;border-radius:2px;background:var(--brand)}
  .toggle--ma1 .toggle__swatch{background:var(--chart-ma1)}
  .toggle--ma2 .toggle__swatch{background:var(--chart-ma2)}

  /* search ------------------------------------------------------------------ */
  .search{position:relative}
  .search__field{display:flex;align-items:center;gap:var(--s2);background:var(--surface);
    border:1px solid var(--rule-2);border-radius:var(--r-md);padding-inline:var(--s3)}
  .search__field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--lapis-soft)}
  .search__field svg{width:18px;height:18px;color:var(--muted);flex:none}
  .search__field input{flex:1;min-width:0;border:0;background:transparent;outline:0;padding:9px 0}
  .search--lg .search__field{border:1.5px solid var(--brand);padding-inline:var(--s4)}
  .search--lg input{padding:14px 0;font-size:var(--fs-lg)}
  .search--sm{width:210px}
  .search--sm input{font-size:var(--fs-sm);padding:6px 0}
  .search__select{border:0;background:transparent;outline:0;padding:9px 0;max-width:320px}
  .search__results{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:40;background:var(--surface);
    border:1px solid var(--rule-2);border-radius:var(--r-md);box-shadow:var(--shadow-pop);overflow:hidden}
  .search__results:empty{display:none}
  .search__item{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
    padding:9px var(--s3);color:var(--ink);border-bottom:1px solid var(--rule)}
  .search__item:last-child{border-bottom:0}
  .search__item:hover,.search__item:focus{background:var(--sunk);text-decoration:none;outline:0}
  .search__empty{padding:var(--s3);color:var(--muted);font-size:var(--fs-sm)}

  /* panel: a ruled sheet for tools and grouped figures, not for every piece
     of content. No drop shadow - hierarchy comes from rules. -------------- */
  .card{background:var(--surface);border:1px solid var(--rule);border-top:2px solid var(--brand);
    border-radius:var(--r-sm)}
  .card__body{padding:var(--s4) var(--s5)}
  .card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
    padding:var(--s3) var(--s5);border-bottom:1px solid var(--rule);flex-wrap:wrap}
  .card__head h2,.card__head h3{font-size:var(--fs-lg)}
  .card__sub{margin:0;color:var(--muted);font-size:var(--fs-xs)}
  .card__foot{padding:var(--s3) var(--s5);border-top:1px solid var(--rule);color:var(--muted);font-size:var(--fs-xs)}
  @media (max-width:560px){.card__body,.card__head,.card__foot{padding-inline:var(--s3)}}

  /* key figures: one ruled band of cells, like a statement's summary line -- */
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--surface);
    border:1px solid var(--rule);border-top:2px solid var(--brand);border-radius:var(--r-sm)}
  .kpi{padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:2px;min-width:0;
    border-inline-start:1px solid var(--rule)}
  .kpi:first-child{border-inline-start:0}
  .kpi__label{font-size:var(--fs-xs);color:var(--muted)}
  .kpi__value{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;line-height:1.45;color:var(--ink)}
  .kpi__note{font-size:var(--fs-xs);color:var(--muted);line-height:1.6}
  .kpi--accent .kpi__value{color:var(--brand)}
  @media (max-width:560px){
    .kpis{grid-template-columns:1fr 1fr}
    .kpi{border-inline-start:0;border-top:1px solid var(--rule)}
    .kpi:nth-child(2n){border-inline-start:1px solid var(--rule)}
    .kpi:nth-child(-n+2){border-top:0}
  }

  /* chip: a small ruled tag ----------------------------------------------- */
  .chip{display:inline-flex;align-items:center;gap:4px;border-radius:var(--r-sm);padding:0 8px;
    font-size:var(--fs-xs);background:transparent;color:var(--ink-2);border:1px solid var(--rule-2);
    white-space:nowrap;line-height:1.9}
  a.chip:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
  .chip--accent{border-color:var(--brand);color:var(--brand);font-weight:700}
  .chip--warn{border-color:var(--note);color:var(--note);background:var(--note-soft)}
  .chip--up{border-color:transparent;color:var(--up);background:var(--up-soft);font-weight:700}
  .chip--down{border-color:transparent;color:var(--down);background:var(--down-soft);font-weight:700}
  .chips{display:flex;flex-wrap:wrap;gap:6px}

  /* signed figures --------------------------------------------------------- */
  .delta{font-weight:700;white-space:nowrap}
  .delta--up{color:var(--up)}
  .delta--down{color:var(--down)}
  .delta--flat{color:var(--muted)}

  /* score as a ruler: a track with quarter ticks, a filled length, the number */
  .meter{display:inline-flex;align-items:center;gap:var(--s2);min-width:112px}
  .meter__track{flex:1;height:5px;min-width:52px;overflow:hidden;background:
      linear-gradient(90deg,transparent calc(25% - .5px),var(--rule-2) 0 calc(25% + .5px),
        transparent 0 calc(50% - .5px),var(--rule-2) 0 calc(50% + .5px),
        transparent 0 calc(75% - .5px),var(--rule-2) 0 calc(75% + .5px),transparent 0),
      var(--sunk)}
  .meter__fill{display:block;height:100%;width:var(--v,0%);background:var(--brand)}
  .meter__fill--mid{background:var(--saffron)}
  .meter__fill--low{background:var(--down)}
  .meter__value{font-weight:700;min-width:2.2em;text-align:start;color:var(--ink)}
  .meter--lg{display:flex}
  .meter--lg .meter__track{height:8px}
  .meter--lg .meter__value{font-family:var(--font-display);font-size:var(--fs-lg)}

  /* note marker: how many notes qualify a figure, in saffron ---------------- */
  .caveat{display:inline-grid;place-items:center;min-width:17px;height:17px;padding-inline:3px;
    border-radius:var(--r-pill);background:var(--note-soft);color:var(--note);font-size:11px;
    font-weight:700;cursor:help;vertical-align:middle;margin-inline-start:5px;line-height:1}

  /* statement notes: numbered, listed under what they qualify --------------- */
  .notes{margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border-inline-start:3px solid var(--note);
    background:var(--note-soft);border-radius:0 var(--r-sm) var(--r-sm) 0}
  .notes__title{font-family:var(--font-display);font-weight:700;color:var(--ink);margin-bottom:var(--s1)}
  .notes ol{margin:0;padding-inline-start:26px;list-style-type:persian}
  .notes li{margin:3px 0;font-size:var(--fs-sm);color:var(--ink-2)}
  .notes li::marker{color:var(--note);font-weight:700}
  .notes--info{border-inline-start-color:var(--brand);background:var(--lapis-soft)}
  .notes--info li::marker{color:var(--brand)}

  /* callout ------------------------------------------------------------------ */
  .note{border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s3) var(--s4);background:var(--sunk);
    border-inline-start:3px solid var(--brand);margin:var(--s3) 0}
  .note ul{margin:var(--s1) 0 0;padding-inline-start:20px}
  .note li{margin:2px 0}
  .note p:last-child{margin-bottom:0}
  .note--warn{background:var(--note-soft);border-inline-start-color:var(--note)}
  .note--info{background:var(--lapis-soft);border-inline-start-color:var(--brand)}

  /* the auditor's stamp: the page's one bold element ------------------------ */
  .stamp{display:inline-grid;place-items:center;align-content:center;text-align:center;width:156px;height:108px;
    padding:var(--s2);border:3px double var(--saffron);border-radius:50%;color:var(--saffron);
    transform:rotate(-9deg);font-family:var(--font-display);line-height:1.35;
    background:color-mix(in srgb,var(--surface) 72%,transparent)}
  .stamp__big{font-size:var(--fs-lg);font-weight:700}
  .stamp__small{font-family:var(--font);font-size:11px}
  @media (prefers-reduced-motion:no-preference){
    .stamp--press{animation:stamp-press .55s cubic-bezier(.2,.9,.3,1.25) .5s both}
    @keyframes stamp-press{
      0%{opacity:0;transform:rotate(-9deg) scale(1.6)}
      70%{opacity:1;transform:rotate(-9deg) scale(.96)}
      100%{opacity:1;transform:rotate(-9deg) scale(1)}
    }
  }

  /* data table: statement grammar - a brand rule under the header, hairlines
     between rows, figures aligned to the end ---------------------------------- */
  .table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm)}
  .card .table-wrap{border:0;border-radius:0}
  .table{font-size:var(--fs-sm)}
  .table th,.table td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--rule);white-space:nowrap}
  .table thead th{background:var(--surface);color:var(--ink-2);font-weight:700;font-size:var(--fs-xs);
    border-bottom:2px solid var(--brand);position:sticky;top:0;z-index:1}
  .table tbody tr:hover{background:var(--sunk)}
  .table tbody tr:last-child td{border-bottom:0}
  .table td.num,.table th.num{text-align:end}
  .table tr.is-muted td{color:var(--muted)}
  .table tr.is-current td{background:var(--lapis-soft)}
  .table .sort{color:var(--ink-2);display:inline-flex;align-items:center;gap:3px}
  .table .sort:hover{color:var(--brand);text-decoration:none}
  .table .sort.is-sorted{color:var(--brand)}
  .table .sort.is-sorted::after{content:"▾";font-size:10px}
  .table .sort.is-sorted.is-asc::after{content:"▴"}
  .table td.empty{text-align:center;color:var(--muted);padding:var(--s6)}
  .table td.cell-wrap{white-space:normal;min-width:150px;max-width:220px}
  .table--sticky-first td:first-child,.table--sticky-first th:first-child{position:sticky;inset-inline-start:0;
    background:var(--surface);z-index:1}
  .table--sticky-first thead th:first-child{z-index:2}
  .table--compact th,.table--compact td{padding:7px 12px}

  .symbol-cell{display:flex;flex-direction:column;line-height:1.45}
  .symbol-cell__code{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);color:var(--ink)}
  .symbol-cell__name{font-size:var(--fs-xs);color:var(--muted);max-width:220px;overflow:hidden;text-overflow:ellipsis}
  a.symbol-cell:hover{text-decoration:none}
  a.symbol-cell:hover .symbol-cell__code{color:var(--link)}

  .nodata{color:var(--muted);font-size:var(--fs-xs);border-bottom:1px dotted var(--muted);cursor:help}

  /* facts: a figure and its sector benchmark, set as statement lines -------- */
  .facts{display:grid;grid-template-columns:1fr auto;margin:0}
  .facts > div{display:contents}
  .facts dt,.facts dd{padding:8px 0;border-bottom:1px solid var(--rule);margin:0}
  .facts > div:last-child dt,.facts > div:last-child dd{border-bottom:0}
  .facts dt{color:var(--ink-2);font-size:var(--fs-sm)}
  .facts dd{text-align:end;font-weight:700;display:flex;flex-direction:column;align-items:flex-end;line-height:1.5}
  .facts__bench{font-weight:400;font-size:var(--fs-xs);color:var(--muted)}
  .facts__bench .delta{font-size:var(--fs-xs)}

  /* index: sectors and their winners as a ruled list, read like a contents
     page - not a grid of identical cards ------------------------------------- */
  .index{list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(auto-fill,minmax(360px,1fr));column-gap:var(--s6)}
  .index__row{display:grid;grid-template-columns:minmax(0,1fr) auto 120px;align-items:center;gap:var(--s3);
    padding:10px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
  .index__row:hover{text-decoration:none}
  .index__row:hover .index__lead{color:var(--link)}
  .index__sector{font-size:var(--fs-sm);color:var(--ink-2);min-width:0}
  .index__sector small{display:block;font-size:var(--fs-xs);color:var(--muted)}
  .index__lead{font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);color:var(--ink)}
  .index .meter{min-width:0;width:100%}
  @media (max-width:560px){.index{grid-template-columns:1fr}.index__row{grid-template-columns:minmax(0,1fr) auto 96px}}

  /* breadcrumb --------------------------------------------------------------- */
  .crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--s3)}
  .crumbs a{color:var(--muted)}
  .crumbs span[aria-hidden]{opacity:.6}

  /* in-page navigation: a rule on the start side, saffron at the current part */
  .toc{display:grid;border-inline-start:2px solid var(--rule)}
  .toc a{padding:6px var(--s3);color:var(--ink-2);font-size:var(--fs-sm);
    border-inline-start:2px solid transparent;margin-inline-start:-2px}
  .toc a:hover{color:var(--brand);text-decoration:none}
  .toc a.is-active{color:var(--brand);font-weight:700;border-inline-start-color:var(--saffron)}
  @media (max-width:960px){
    .toc{display:flex;overflow-x:auto;border-inline-start:0;border-bottom:1px solid var(--rule)}
    .toc a{white-space:nowrap;border-inline-start:0;margin:0;border-bottom:2px solid transparent}
    .toc a.is-active{border-bottom-color:var(--saffron)}
  }

  /* pagination ------------------------------------------------------------------ */
  .pager{display:flex;align-items:center;justify-content:center;gap:var(--s3);margin:var(--s4) 0;font-size:var(--fs-sm)}

  /* filter bar (screener) ------------------------------------------------------- */
  .filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s3)}
  .filter-bar__grow{flex:1;min-width:220px}

  /* bar chart (server-rendered SVG). Geometry is LTR coordinates (web/charts.py);
     inheriting RTL would flip every text-anchor. ------------------------------- */
  .bars{width:100%;height:auto;overflow:visible;direction:ltr}
  .bars text{font-family:var(--font);font-size:11px;fill:var(--muted)}
  .bars .bars__grid{stroke:var(--chart-grid)}
  .bars .bars__zero{stroke:var(--rule-2)}
  .bars .bars__a{fill:var(--chart-line)}
  .bars .bars__b{fill:var(--chart-ma1)}
  .bars .is-other-basis{opacity:.35}
  .legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:var(--fs-xs);color:var(--muted)}
  .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:5px;vertical-align:-1px}
  .legend__a{background:var(--chart-line)}
  .legend__b{background:var(--chart-ma1)}

  /* price chart ------------------------------------------------------------------- */
  .pchart__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2)}
  .pchart__opts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
  .pchart__returns{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));margin:var(--s4) 0 0;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .pchart__ret{display:flex;flex-direction:column;align-items:center;padding:6px 4px;font-size:var(--fs-xs);
    color:var(--muted);line-height:1.6;border-inline-start:1px solid var(--rule)}
  .pchart__ret:first-child{border-inline-start:0}
  .pchart__ret b{font-size:var(--fs-sm)}
  .pchart__ret--up b{color:var(--up)} .pchart__ret--down b{color:var(--down)}
  .pchart__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s4);min-height:32px;
    font-size:var(--fs-sm);color:var(--muted)}
  .pchart__head b{font-family:var(--font-display);color:var(--ink);font-size:var(--fs-xl)}
  .pchart__canvas{direction:ltr;position:relative}
  .pchart__canvas .u-legend{display:none}
  .pchart__vol{direction:ltr;margin-top:-6px}
  .pchart__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 var(--s5);margin-top:var(--s2)}
  .pchart__stat{padding:6px 0;border-bottom:1px dotted var(--rule-2);font-size:var(--fs-xs);color:var(--muted);
    display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
  .pchart__stat b{color:var(--ink);font-size:var(--fs-sm);white-space:nowrap}
  .pchart__hint{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s3)}
  .pchart__loading{display:grid;place-items:center;height:340px;color:var(--muted);font-size:var(--fs-sm)}
  .u-select{background:color-mix(in srgb,var(--brand) 12%,transparent)}
  .u-cursor-x,.u-cursor-y{border-color:var(--rule-2) !important}

  /* prose pages (method, glossary) --------------------------------------------------- */
  .prose{max-width:74ch}
  .prose h1{margin-bottom:var(--s3)}
  .prose h2{margin:var(--s6) 0 var(--s2);padding-bottom:var(--s2);border-bottom:1px solid var(--brand)}
  .prose h3{margin:var(--s5) 0 var(--s2)}
  .prose ul{padding-inline-start:22px}
  .prose li{margin:6px 0}
}

/* ------------------------------------------------------------------------ */
@layer pages {
  /* home: the question on the start side, a statement excerpt on the other,
     stamped. */
  /* overflow-x:clip - the stamp's press starts at 1.6x scale, and its box
     must not widen the page for that half second on a phone. */
  .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s7);align-items:center;
    padding:var(--s6) 0 var(--s6);overflow-x:clip}
  .hero h1{font-size:var(--fs-3xl);line-height:1.45}
  .hero__lede{color:var(--ink-2);max-width:56ch;margin:var(--s4) 0 var(--s5)}
  .hero__links{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
  .excerpt{position:relative;margin:0 0 var(--s6);background:var(--surface);border:1px solid var(--rule);
    border-top:2px solid var(--brand);border-radius:var(--r-sm);padding:var(--s4) var(--s5) var(--s5)}
  .excerpt__title{font-family:var(--font-display);font-weight:700;color:var(--brand);font-size:var(--fs-lg)}
  .excerpt__sub{font-size:var(--fs-xs);color:var(--muted);margin:0 0 var(--s2)}
  .excerpt table{font-size:var(--fs-sm)}
  .excerpt th{font-size:var(--fs-xs);color:var(--muted);font-weight:400;text-align:start;padding:6px 0;
    border-bottom:1px solid var(--rule-2)}
  .excerpt td{padding:9px 0;border-bottom:1px solid var(--rule)}
  .excerpt th.num,.excerpt td.num{text-align:end}
  .excerpt tfoot td{border-top:1px solid var(--brand);border-bottom:3px double var(--brand);padding:7px 0;
    font-size:var(--fs-xs);color:var(--ink-2)}
  .excerpt .stamp{position:absolute;inset-inline-start:-56px;bottom:-70px}
  @media (max-width:900px){
    .hero{grid-template-columns:1fr;gap:var(--s6)}
    .hero h1{font-size:var(--fs-2xl)}
    .excerpt .stamp{inset-inline-start:auto;inset-inline-end:6px;bottom:-50px}
  }

  /* company */
  .company-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);align-items:flex-end;
    padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:2px solid var(--brand)}
  .company-head h1{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s3);font-size:var(--fs-3xl);line-height:1.3}
  .company-head h1 small{font-family:var(--font);font-size:var(--fs-md);font-weight:400;color:var(--muted)}
  .company-head__price{text-align:end}
  .company-head__price .value{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;line-height:1.3}
  .company-head__price .unit{font-family:var(--font);font-size:var(--fs-xs);color:var(--muted);font-weight:400}
  @media (max-width:560px){.company-head__price{text-align:start}.company-head h1{font-size:var(--fs-2xl)}}

  .scoreboard{display:grid;grid-template-columns:minmax(200px,.8fr) 2fr;gap:var(--s6);align-items:center}
  .scoreboard__main{padding-inline-end:var(--s5);border-inline-end:1px solid var(--rule)}
  .scoreboard__rank{font-family:var(--font-display);font-size:var(--fs-3xl);font-weight:700;line-height:1.2;color:var(--brand)}
  .scoreboard__rank small{font-family:var(--font);font-size:var(--fs-md);color:var(--muted);font-weight:400}
  .scoreboard__families{display:grid;gap:var(--s3)}
  .family{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:var(--s3)}
  .family__label{font-size:var(--fs-sm);color:var(--ink-2)}
  @media (max-width:700px){.scoreboard{grid-template-columns:1fr}.scoreboard__main{border:0;padding:0}}

  .glossary dt{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);margin-top:var(--s5);color:var(--brand)}
  .glossary dd{margin:6px 0 0;max-width:74ch}

  .factor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s3);margin:var(--s3) 0}
  .factor .k{font-size:var(--fs-xs);color:var(--muted);display:block}
  .factor .v{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;display:block;margin:2px 0 6px;color:var(--brand)}
  .factor p{margin:6px 0;font-size:var(--fs-sm)}
  td.wrap{white-space:normal;min-width:320px}
  td.tilt{font-weight:700}
  .t2,.t1{color:var(--up)} .t-1,.t-2{color:var(--down)}

  /* ---------------------------------------------------------------------- */
  /* «کاشی» - the identity itself: a glazed lapis band across the header and
     behind the hero, an eight-point star lattice, saffron for the rules that
     mean verification. Chosen by the user 2026-10-18 from eight candidates;
     these rules sit at the end of `pages` because that is exactly where the
     old `skins` layer sat, so each keeps the cascade position it was tested
     in. */
  .site-header{background:var(--band);border-bottom:3px solid var(--saffron)}
  .site-header .brand,.site-header .nav-link{color:#EAF1FF}
  .site-header .nav-link.is-active{color:var(--band-ink)}
  .brand__seal{border-color:currentColor;
    box-shadow:inset 0 0 0 3px var(--band),inset 0 0 0 4px currentColor}
  .site-header .brand__tag{color:var(--band-ink-2)}
  .site-header .btn{background:transparent;border-color:var(--band-rule);color:#EAF1FF}
  .site-header .search__field{background:var(--band-2);border-color:var(--band-rule)}
  .site-header .search__field input{color:var(--band-ink)}
  .site-header .search__field input::placeholder{color:var(--band-ink-2)}

  /* The hero is a glazed tile panel. The lattice is an inline SVG data URI:
     it cannot read --band-gold, so that value is repeated here as %23F2C14E. */
  .hero{position:relative;isolation:isolate;padding:var(--s6) var(--s6) var(--s7);
    margin-top:var(--s3)}
  .hero::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--r-md);
    background-color:var(--band);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F2C14E' stroke-opacity='.22' stroke-width='1.2'%3E%3Cpath d='M36 6l8.5 21.5L66 36l-21.5 8.5L36 66l-8.5-21.5L6 36l21.5-8.5z'/%3E%3Cpath d='M15 15h42v42H15z' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3C/g%3E%3C/svg%3E");
    background-size:72px 72px}
  .hero h1{color:var(--band-ink)}
  .hero__lede{color:#D4E0F7}
  .hero .search--lg .search__field{border-color:var(--band-gold)}
  .hero__links .btn{background:transparent;border-color:var(--band-rule-2);color:var(--band-ink)}
  .hero__links .btn:hover{border-color:var(--band-gold)}
  @media (max-width:560px){.hero{padding:var(--s5) var(--s3) var(--s7)}}

  .excerpt{border-top-color:var(--saffron)}
  .excerpt .stamp{background:var(--surface)}

  /* An eight-point star opens every section, the way a tile panel starts. */
  .section__head h2::before,.card__head h2::before{
    content:"";display:inline-block;width:.62em;height:.62em;margin-inline-end:.4em;
    vertical-align:.08em;background:var(--saffron);
    clip-path:polygon(50% 0,61% 28%,85% 15%,72% 39%,100% 50%,72% 61%,85% 85%,61% 72%,50% 100%,39% 72%,15% 85%,28% 61%,0 50%,28% 39%,15% 15%,39% 28%)}

  .card{border-top-color:var(--turquoise)}
  .kpis{border-top-color:var(--saffron)}
  .table thead th{background:var(--sunk);border-bottom-color:var(--lapis)}
}


/* ------------------------------------------------------------------------ */
@layer utilities {
  .muted{color:var(--muted)}
  .small{font-size:var(--fs-xs)}
  .nowrap{white-space:nowrap}
  .stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
  .mt-0{margin-top:0} .mt-3{margin-top:var(--s3)} .mt-5{margin-top:var(--s5)}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}