/* alanchand ui2: design tokens + components.
   Hand-written, no build step. Loaded on every page next to the legacy styles.css; every
   component is class-scoped (c-*, l-*, u-*) so pages that are not migrated yet are untouched.
   Page-level resets live under body.ui2 only. Logical properties throughout, so one rule
   serves fa (RTL) and en/tr (LTR). */

:root{
  --c-ink:#101984;          /* brand navy: headings, links, primary buttons */
  --c-ink-2:#2a37a8;
  --c-board:#0d1360;        /* the rate board */
  --c-board-line:rgba(255,255,255,.09);
  --c-board-muted:#aab2e6;
  --c-text:#1b2140;
  --c-muted:#566079;        /* >= 4.5:1 on white and on --c-bg */
  --c-bg:#eff8ff;
  --c-surface:#fff;
  --c-surface-2:#f6f8fd;
  --c-line:#e3e8f2;
  --c-line-2:#cfd6e6;
  --c-up:#047a48;           /* 5.6:1 on white (audit A13) */
  --c-down:#c81e1e;         /* 5.9:1 on white */
  --c-up-bg:#dff3e8;
  --c-down-bg:#fbe4e4;
  --c-up-on-board:#5fe3a1;
  --c-down-on-board:#ff9a9a;
  --c-gold:#9a6a00;
  --c-warn-bg:#fff6dc;
  --c-warn-line:#efd48a;
  --c-warn-text:#5c4300;
  --c-focus:#2b59ff;
  --c-on-ink:#fff;          /* text on an --c-ink fill (buttons, active chip) */
  --c-glow:rgb(191 221 255 / .65);  /* header shadow */
  --c-icon-bg:transparent;  /* backdrop behind coin/flag icons: white in dark mode so black glyphs stay visible */
  --c-icon-pad:0px;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-7:32px;--s-8:40px;
  --r-1:6px;--r-2:10px;--r-3:14px;--r-pill:999px;

  --t-xs:.75rem;
  --t-sm:.8125rem;
  --t-base:.9375rem;
  --t-md:1.0625rem;
  --t-lg:clamp(1.0625rem,.95rem + .5vw,1.25rem);
  --t-xl:clamp(1.25rem,1.05rem + 1vw,1.625rem);

  --wrap:1140px;

  /* motion: functional feedback only (a state changed, a price moved, a request is open).
     Nothing loops except the refresh icon while a /live request is actually in flight. */
  --m-fast:120ms;   /* colour, fill, outline -> filled */
  --m-base:180ms;   /* small transforms: swap flip, arrow nudge */
  --m-spin:600ms;   /* one refresh turn */
  --m-ping:700ms;   /* live-dot ping after a successful poll */
  --m-flash:1.4s;   /* price-cell flash */
  --m-ease:cubic-bezier(.2,0,0,1);
  --m-out:ease-out;

  --ic-sw:1.8;--ic-tint:.16;  /* icon stroke width, duotone tint */
}

/* ---------- utilities ---------- */
[hidden]{display:none!important}  /* the attribute must win over component display rules */
.u-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.u-sr-focusable:focus{position:fixed!important;inset-block-start:8px;inset-inline-start:8px;width:auto;height:auto;margin:0;padding:8px 12px;clip:auto;overflow:visible;white-space:normal;z-index:10000000;background:var(--c-surface);color:var(--c-ink);border-radius:var(--r-1);outline:2px solid var(--c-focus)}
.u-num{font-variant-numeric:tabular-nums}
:where(.c-ticker,.c-ptable,.c-tiles,.c-conv,.c-goldcalc,.c-sec,.c-updated,.c-chips,.c-crumbs,.c-pagehead) :focus-visible,
.navMenu a:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px;border-radius:var(--r-1)}

/* ---------- Bootstrap utilities the legacy templates use but styles.css never defined
   (audit A10). Values are Bootstrap 5's; they go once every page is on ui2. ---------- */
.flex-wrap{flex-wrap:wrap!important}
.justify-content-center{justify-content:center!important}
.list-unstyled{padding-inline-start:0;list-style:none}
.gap-1{gap:.25rem!important}.gap-3{gap:1rem!important}
.img-fluid{max-width:100%;height:auto}
.text-nowrap{white-space:nowrap!important}
.text-muted,.text-secondary{color:var(--c-muted)!important}
.small{font-size:.875em}
.rounded-pill{border-radius:50rem!important}
.rounded-top{border-top-left-radius:.375rem!important;border-top-right-radius:.375rem!important}
.mb-1{margin-bottom:.25rem!important}.mb-5{margin-bottom:3rem!important}
.mx-3{margin-inline:1rem!important}
.p-1{padding:.25rem!important}.pt-5{padding-top:3rem!important}
.px-2{padding-inline:.5rem!important}.py-3{padding-block:1rem!important}
.form-label{display:inline-block;margin-bottom:.5rem}
.form-control{display:block;width:100%;padding:.375rem .75rem;font:inherit;color:inherit;background:var(--c-surface);border:1px solid var(--c-line-2);border-radius:.375rem}
@media (min-width:768px){
  .flex-md-nowrap{flex-wrap:nowrap!important}
  .justify-content-md-end{justify-content:flex-end!important}
  .mt-md-0{margin-top:0!important}.mt-md-5{margin-top:3rem!important}
  .px-md-0{padding-inline:0!important}
}

/* ---------- navigation (moved from the inline <style> in header.php) ---------- */
.navMenu .navShort,.navMenu .c-ic{display:none}
.navMenu a:is([aria-current="page"],[aria-current="true"]){color:var(--c-ink);font-weight:600}
.navMenu a:is([aria-current="page"],[aria-current="true"]):before{width:100%}
@media screen and (max-width:779px){
  .navMenu a{width:20%;min-height:44px;white-space:nowrap}
  .navMenu a.ConvertMenu{display:flex!important}
  /* five slots: styles.css hides the 5th child by position, so pin crypto on by class */
  .navMenu a.CryptoMenu{display:flex!important}
  .navMenu a.mediaMenu{display:none!important}
  .navMenu .navFull{display:none}
  .navMenu .navShort{display:inline}
  /* sprite icons replace styles.css's :after glyphs; outline at rest, filled when current */
  .navMenu a:after{content:none}
  .navMenu .c-ic{display:block;position:absolute;inset-block-start:0;inset-inline-start:calc(50% - 12px);inline-size:24px;block-size:24px;--ic-knock:var(--ac-primary-text,#101984)}
  .navMenu a:is([aria-current="page"],[aria-current="true"]){color:#fff}
  .navMenu a:is([aria-current="page"],[aria-current="true"]) .navShort{border-block-end:2px solid #ffd54a;padding-block-end:1px}
}
/* landscape phones: a 44px icon-only bar flush with the bottom edge, so it does not cover the hero
   (audit F12); the label stays for screen readers */
@media screen and (max-width:779px) and (max-height:480px){
  .navMenu{block-size:44px;inset-inline:0;bottom:0;padding-block:0;border-radius:0}
  .navMenu a{padding-top:0;min-height:44px;align-items:center}
  .navMenu .c-ic{position:static}
  .navMenu .navShort{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* 780-991px: short labels on one line, so the header nav does not wrap (audit F100) */
@media screen and (min-width:780px) and (max-width:991px){
  .navMenu a{white-space:nowrap}
  .navMenu .navFull{display:none}
  .navMenu .navShort{display:inline}
}
@media screen and (max-width:359px){
  .navMenu{padding-inline:6px;font-size:.6875rem}
  .navMenu a{margin-inline:0}
}
@media screen and (max-width:779px){
  body:has(:is(input,select,textarea):focus) .navMenu{display:none}
}

/* ---------- markets mega-menu (header.php; desktop >= 780px, phones keep the bar link) ----------
   A <details>: native open/close by click, Enter and Space. The panel hangs off .HeaderInner
   (position:relative in styles.css), so .c-mega itself must stay unpositioned. */
.c-mega{display:none}
@media screen and (min-width:780px){
  .navMenu a.marketsMenu{display:none}
  .c-mega{display:block}
}
.c-mega>summary{list-style:none;display:flex;align-items:center;gap:.35em;margin-left:15px;cursor:pointer;white-space:nowrap;color:var(--ac-link-dark)}  /* the nav links' colour; a summary is not an <a> */
.c-mega>summary:hover{color:var(--c-ink)}
.c-mega>summary::-webkit-details-marker{display:none}
/* physical borders: a logical inline-end border turns the chevron sideways in RTL */
.c-mega>summary::after{content:"";inline-size:.4em;block-size:.4em;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-2px) rotate(45deg)}
.c-mega[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.c-mega>summary[aria-current]{color:var(--c-ink);font-weight:600}
.c-mega>summary:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px;border-radius:var(--r-1)}
.c-mega__panel{position:absolute;inset-block-start:100%;inset-inline:var(--s-4);z-index:1000;max-inline-size:60rem;margin-inline:auto;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s-6);padding:var(--s-5) var(--s-6);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-3);box-shadow:0 16px 40px -16px var(--c-glow);font-size:var(--t-sm)}
.c-mega__panel ul{list-style:none;margin:var(--s-2) 0 0;padding:0}
.c-mega__panel a{margin:0;display:flex;align-items:center;min-block-size:36px;color:var(--c-text);font-weight:400}
.c-mega__panel a:before{content:none}
.c-mega__panel a:hover{color:var(--c-ink);text-decoration:underline}
.c-mega__panel a:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px;border-radius:var(--r-1)}
.c-mega__panel a.c-mega__head,.c-mega__sub a{color:var(--c-ink);font-weight:600}
.c-mega__sub{margin-block-start:var(--s-2);border-block-start:1px solid var(--c-line)}

/* ---------- page frame (ui2 pages) ---------- */
.l-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-4)}
body.ui2 main{color:var(--c-text)}
body.ui2 main a{text-decoration:none}
body.ui2 main :where(h1,h2,h3){color:var(--c-ink);margin:0}
.l-stack>*+*{margin-block-start:var(--s-7)}
.l-wrap.l-stack,.l-sect{margin-block-start:var(--s-7)}
@media (max-width:767px){.l-wrap.l-stack{margin-block-start:var(--s-5)}.l-stack>*+*{margin-block-start:var(--s-6)}}
.l-cols{display:grid;gap:var(--s-6);align-items:start}
.l-cols>*{min-width:0}
.l-rail{display:flex;flex-direction:column;gap:var(--s-4)}
.l-rail:empty{display:none}
@media (min-width:1200px){
  .l-cols{grid-template-columns:minmax(0,1fr) 300px}
  .l-cols:not(:has(>.l-rail>*)){grid-template-columns:minmax(0,1fr)}  /* no side creative: no empty 300px column (audit F44) */
  .l-rail{position:sticky;top:var(--s-4)}
}

/* ---------- page head: H1 + freshness ---------- */
.c-pagehead{padding-block:var(--s-6) var(--s-3)}
.c-pagehead h1{font-size:var(--t-xl);font-weight:600;line-height:1.35}
.c-updated{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:var(--s-2) 0 0;font-size:var(--t-sm);color:var(--c-muted)}
.c-updated time{color:var(--c-text)}
.c-live-dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--c-up);box-shadow:0 0 0 3px var(--c-up-bg);flex:none}
.c-updated.is-stale .c-live-dot{background:var(--c-gold);box-shadow:0 0 0 3px var(--c-warn-bg)}
.c-lead{margin:var(--s-3) 0 0;max-width:72ch;color:var(--c-text);font-size:var(--t-base);line-height:1.9}
.c-stale{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-2) 0 0;padding:6px var(--s-3);border:1px solid var(--c-warn-line);background:var(--c-warn-bg);color:var(--c-warn-text);border-radius:var(--r-2);font-size:var(--t-xs);line-height:1.5}
.c-stale svg{flex:none}
.c-stale span{min-width:0}

/* ---------- direction ---------- */
.c-up{color:var(--c-up)}
.c-down{color:var(--c-down)}
.c-flat{color:var(--c-muted)}
.c-arrow{display:inline-block;font-size:.62em;margin-inline-end:.3em;vertical-align:.12em}
.c-up .c-arrow:before{content:"\25B2"}
.c-down .c-arrow:before{content:"\25BC"}

/* ---------- the rate board (key-items ticker) ---------- */
.c-ticker{list-style:none;margin:var(--s-4) 0 0;padding:0;background:var(--c-board);border-radius:var(--r-3);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;box-shadow:0 10px 30px -18px rgba(13,19,96,.8)}
.c-ticker li{position:relative;border-inline-start:1px solid var(--c-board-line);border-block-start:1px solid var(--c-board-line)}
.c-ticker li:nth-child(4n+1){border-inline-start:0}
.c-ticker li:nth-child(-n+4){border-block-start:0}
.c-ticker a{display:flex;flex-direction:column;gap:2px;padding:var(--s-3) var(--s-4);color:#fff;min-height:100%}
.c-ticker a:hover{background:rgba(255,255,255,.12)}
.c-ticker__name{font-size:var(--t-sm);color:var(--c-board-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-ticker__val{font-size:var(--t-lg);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3;white-space:nowrap}
.c-ticker__unit{font-size:var(--t-xs);font-weight:400;color:var(--c-board-muted);margin-inline-start:.25em}
.c-ticker__chg{font-size:var(--t-xs);font-variant-numeric:tabular-nums;white-space:nowrap}
.c-ticker .c-up{color:var(--c-up-on-board)}
.c-ticker .c-down{color:var(--c-down-on-board)}
.c-ticker .c-flat{color:var(--c-board-muted)}
@media (max-width:767px){
  .c-ticker{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--s-4) * -1);border-radius:0}
  .c-ticker::-webkit-scrollbar{display:none}
  .c-ticker li{flex:0 0 auto;min-inline-size:40%;scroll-snap-align:start;border-block-start:0}
  .c-ticker li:nth-child(4n+1){border-inline-start:1px solid var(--c-board-line)}
  .c-ticker li:first-child{border-inline-start:0}
  .c-ticker a{padding:var(--s-3)}
  .c-ticker-dots{display:flex;justify-content:center;align-items:center;gap:6px;block-size:14px;flex:none;background:var(--c-board);margin-inline:calc(var(--s-4) * -1)}
  .c-ticker-dots i{inline-size:5px;block-size:5px;border-radius:3px;background:rgba(255,255,255,.28);transition:background-color .2s}
  .c-ticker-dots i.is-on{background:#fff;inline-size:12px}
}
@media (min-width:768px){.c-ticker-dots{display:none}.c-ticker{margin-block-end:var(--s-3)}}
@media (prefers-reduced-motion:reduce){.c-ticker-dots i{transition:none}}

/* ---------- price hero (single pages) ---------- */
.c-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4) var(--s-5);align-items:center;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-3);padding:var(--s-5)}
.c-hero__label{display:flex;align-items:center;gap:var(--s-2);margin:0;color:var(--c-muted);font-size:var(--t-sm)}
.c-hero__label .flag{margin:0;inline-size:24px!important;block-size:16px!important}
.c-hero__label img{border-radius:50%}
.c-hero__price{border-radius:var(--r-1);margin:var(--s-2) 0 0;display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;line-height:1.15}
.c-hero__value{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.5rem);font-weight:600;font-variant-numeric:tabular-nums}
.c-hero__unit{font-size:var(--t-sm);color:var(--c-muted)}
.c-hero__price.c-flat{color:var(--c-text)}
.c-hero__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-3);margin-block-start:var(--s-2)}
.c-hero__chg{margin:0;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.c-hero__row .c-share{margin:0;min-block-size:44px;padding-inline:var(--s-3)}
.c-hero__acts{display:flex;align-items:center;gap:var(--s-2)}
/* with JS the share and star buttons keep their box while still hidden, so the row is laid out (and wraps)
   as it will once ui.js shows them: no layout shift. ui.js sets .is-set, which frees a button it leaves hidden. */
.js .c-hero__acts:not(.is-set)>[hidden]{display:inline-flex!important;visibility:hidden}
.c-star{min-inline-size:44px;padding-inline:0}  /* «my prices» toggle (ui.js star); filled when on */
.c-star[aria-pressed="true"]{color:var(--c-gold)!important}
.c-star[aria-pressed="true"] svg{fill:currentColor}
.c-star:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.c-hero__note{color:var(--c-muted)}
.c-hero__spark svg{display:block;inline-size:160px;block-size:60px}
.c-hero__sub{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s-3);margin:0;padding-block-start:var(--s-4);border-block-start:1px solid var(--c-line)}
.c-hero__sub dt{font-size:var(--t-xs);color:var(--c-muted)}
.c-hero__sub dd{margin:2px 0 0;font-size:var(--t-md);font-weight:600;font-variant-numeric:tabular-nums}
.c-hero__sub a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:639px){
  .c-hero{padding:var(--s-4);grid-template-columns:1fr}
  .c-hero__spark{display:none}
  .c-hero__sub{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-hero__sub--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}
  .c-hero__sub--1{grid-template-columns:1fr}
  .c-hero__sub--3 dd{font-size:var(--t-base)}
}

/* ---------- section head ---------- */
.c-sec{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);margin-block-end:var(--s-3)}
.c-perf{margin-block-start:var(--s-7)}
.c-sec h2{font-size:var(--t-lg);font-weight:600}
.c-sec__more{font-size:var(--t-sm);color:var(--c-ink);padding:6px var(--s-3);border:1px solid var(--c-line-2);border-radius:var(--r-pill);background:var(--c-surface);white-space:nowrap;display:inline-flex;align-items:center;min-block-size:40px}
.c-sec__more:hover{border-color:var(--c-ink)}

/* ---------- price table ---------- */
.c-ptable-wrap{max-inline-size:100%;overflow-x:auto;border-radius:var(--r-3)}
.c-ptable{inline-size:100%;border-collapse:separate;border-spacing:0;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-3);overflow:hidden;font-size:var(--t-base)}
.c-ptable caption{text-align:start;caption-side:top;padding:0 0 var(--s-2);font-size:var(--t-sm);color:var(--c-muted)}
.c-ptable th,.c-ptable td{padding:9px var(--s-3);text-align:center;vertical-align:middle;border-block-start:1px solid var(--c-line)}
.c-ptable thead th{border-block-start:0;background:var(--c-surface-2);color:var(--c-muted);font-weight:500;font-size:var(--t-sm);white-space:nowrap}
.c-ptable thead th:first-child,.c-ptable tbody th{text-align:start}
.c-ptable tbody th{font-weight:500}
.c-sort{display:inline-flex;align-items:center;gap:3px;min-block-size:40px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:inherit}
.c-sort:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px;border-radius:var(--r-1)}
th[aria-sort=ascending] .c-sort::after{content:"\25B2"}
th[aria-sort=descending] .c-sort::after{content:"\25BC"}
.c-sort::after{font-size:.7em}
th[aria-sort=ascending],th[aria-sort=descending]{color:var(--c-ink)}
.c-ptable td{font-variant-numeric:tabular-nums;white-space:nowrap}
.c-ptable tbody tr[data-href]{cursor:pointer}
@media (hover:hover){.c-ptable tbody tr:hover{background:var(--c-surface-2)}}
.c-ptable__name{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--c-text)}
.c-ptable__name:hover{color:var(--c-ink)}
.c-ptable__name .flag{margin:0;flex:none;inline-size:22px!important;block-size:15px!important}
.c-ptable__name img{inline-size:24px;block-size:24px;border-radius:50%;flex:none;box-sizing:border-box;background:var(--c-icon-bg);padding:var(--c-icon-pad)}
.c-hero__label img{background:var(--c-icon-bg);padding:var(--c-icon-pad);box-sizing:border-box}
.c-ptable .c-keep>span.c-empty{background:none;color:var(--c-muted)}
.c-tblmore{display:none}
.c-ptable__sub{display:block;font-size:var(--t-xs);color:var(--c-muted);font-weight:400;max-inline-size:20ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[dir="rtl"] .c-ptable__sub{direction:ltr;text-align:right}  /* Latin names: cut the end, not the start (audit F15) */
.c-ptable__main{font-weight:600;color:var(--c-text)}
.c-ptable .c-chg{font-size:var(--t-sm)}
.c-ptable .c-empty{color:var(--c-muted)}
.c-ptable .c-spark{padding-block:4px}
.c-ptable .c-spark svg{display:block;inline-size:96px;block-size:32px;margin-inline:auto}
@media (max-width:639px){
  .c-ptable{font-size:var(--t-sm)}
  .c-ptable th,.c-ptable td{padding:9px 6px}
  .c-ptable thead th:first-child,.c-ptable tbody th{padding-inline-start:var(--s-3)}
  .c-ptable .c-opt{display:none}
  .c-ptable thead th{white-space:normal}
  .c-ptable .c-keep{padding-inline:2px}
  .c-ptable .c-keep>span{display:inline-block;padding:2px 5px;border-radius:var(--r-pill);background:var(--c-surface-2)}
  .c-ptable .c-keep .c-up{background:var(--c-up-bg)}
  .c-ptable .c-keep .c-down{background:var(--c-down-bg)}
  .c-ptable .c-keep .c-arrow{display:none}
  .c-ptable__sub{max-inline-size:10ch}
  .c-ptable tbody tr.c-more{display:none}
  .c-tblmore{display:flex;align-items:center;justify-content:center;min-block-size:44px;margin-block-start:var(--s-2);border:1px solid var(--c-line-2);border-radius:var(--r-2);background:var(--c-surface);color:var(--c-ink);font-size:var(--t-sm);font-weight:500}
}
@media (max-width:400px){
  .c-ptable th,.c-ptable td{padding:8px 3px}
  .c-ptable__name{gap:6px}
  .c-ptable__name img{inline-size:20px;block-size:20px}
  .c-ptable__name .flag{inline-size:18px!important;block-size:12px!important}
}
@media (max-width:359px){.c-ptable__unit--toman{display:none}}  /* room for the change pill (audit F60) */

/* ---------- archive daily table + pager ---------- */
.c-history{margin-block:var(--s-7)}
.c-history__title{font-size:var(--t-lg);font-weight:600;margin:0 0 var(--s-3)}
.c-history__date time{display:block}
.c-history__date .c-ptable__sub{max-inline-size:none}
.c-pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-block-start:var(--s-4)}
.c-pager__of{font-size:var(--t-sm);color:var(--c-muted)}

/* ---------- tiles (gold) ---------- */
.c-tiles{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
@media (min-width:640px) and (max-width:1023px){.c-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}  /* no orphan tile (audit F72) */
.c-tile{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-3);color:var(--c-text);block-size:100%}
.c-tile:hover{border-color:var(--c-line-2)}
.c-tile img{inline-size:40px;block-size:40px;border-radius:50%;flex:none}
.c-tile__body{display:flex;flex-direction:column;min-width:0;flex:1;align-self:stretch}
.c-tile__name{font-size:var(--t-sm);color:var(--c-muted);line-height:1.4}
.c-tile__val{font-size:var(--t-md);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;margin-block-start:auto}  /* prices line up when a name wraps */
@media (max-width:639px){
  .c-tiles,.c-tiles--compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-tile{padding:var(--s-3);gap:var(--s-2);align-items:flex-start}
  .c-tile img{inline-size:28px;block-size:28px}
  .c-tile__val{font-size:var(--t-base);white-space:normal}
  .c-tile__unit{display:block}
}

.c-tile__unit{font-size:var(--t-xs);font-weight:400;color:var(--c-muted)}
.c-tile__chg{font-size:var(--t-xs);font-variant-numeric:tabular-nums}
.c-tiles--compact{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.c-ptable__unit{font-size:var(--t-xs);color:var(--c-muted)}

/* ---------- converter (rail + hub) ---------- */
.c-conv form{display:flex;flex-direction:column;gap:var(--s-3)}
.c-conv__row{display:grid;gap:var(--s-3)}
.c-conv__out{margin:0;display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.c-conv__unit{color:var(--c-muted);font-size:var(--t-sm)}
.c-conv__note{margin:0;font-size:var(--t-xs);color:var(--c-muted)}
.c-conv .c-btn{align-self:flex-start}
@media (min-width:640px) and (max-width:1199px){.l-rail .c-conv__row{grid-template-columns:repeat(2,minmax(0,1fr))}}  /* rail spans the page here (audit F101) */

/* ---------- home first screen (wave 4) ---------- */
/* rate board as one row of 8 (ticker.php, home only via ticker_row): name and change share the
   first line, the toman unit is implied (USD rows keep their $); 4×2 below 1100px, strip on phones */
@media (min-width:1100px){
  .c-ticker--row{grid-template-columns:repeat(8,minmax(0,1fr));margin-block-end:0}
  .c-ticker--row li{border-block-start:0}
  .c-ticker--row li:nth-child(4n+1){border-inline-start:1px solid var(--c-board-line)}
  .c-ticker--row li:first-child{border-inline-start:0}
  .c-ticker--row a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name chg" "val val";align-items:baseline;column-gap:var(--s-2);row-gap:0;padding:10px var(--s-3)}
  .c-ticker--row .c-ticker__name{grid-area:name}
  .c-ticker--row .c-ticker__chg{grid-area:chg}
  .c-ticker--row .c-ticker__val{grid-area:val;font-size:var(--t-md)}
  .c-ticker--row .c-ticker__unit--toman{display:none}
}
/* H1, freshness and the stale notice (as a pill) on one line */
.c-pagehead--line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-4);padding-block:var(--s-2) 0}
.c-pagehead--line h1{font-size:var(--t-lg)}
.c-pagehead--line :is(.c-updated,.c-stale){margin:0}
.c-pagehead--line .c-stale{flex:1 1 16em;min-width:0;padding-block:3px;border-radius:var(--r-pill)}
@media (min-width:900px){.c-pagehead--line .c-stale span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}

/* converter bar (partials/ui/pair-conv.php). One pill line from 900px: amount | from | swap |
   to | navy result, plus the no-JS submit, which is first in the DOM (the form's default
   button, so Enter never presses swap) and last on screen through the grid areas. Below 900px:
   amount, then from / swap / to, then the result. The result sits on the board navy in both themes. */
.c-conv--bar{margin-block-start:var(--s-2);padding:6px;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-pill);box-shadow:0 14px 34px -24px var(--c-glow)}
.c-conv--bar .c-conv__bar{display:grid;grid-template-columns:8rem minmax(0,1fr) 44px minmax(0,1fr) minmax(0,2fr) auto;grid-template-areas:"amt from swap to res go";align-items:stretch;gap:0}
.c-conv__seg{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;min-inline-size:0;padding:4px 18px;border-radius:var(--r-pill)}
.c-conv__seg:focus-within{background:var(--c-surface-2)}
.c-conv__seg:has(:focus-visible){outline:2px solid var(--c-focus);outline-offset:-2px}
.c-conv__seg label{font-size:var(--t-xs);color:var(--c-muted);line-height:1.3}
.c-conv__amt{grid-area:amt}
.c-conv__from{grid-area:from}
.c-conv__to{grid-area:to}
.c-conv__amt::after{content:"";position:absolute;inset-block:14px;inset-inline-end:0;border-inline-end:1px solid var(--c-line)}
.c-conv--bar .c-conv__amt input{inline-size:100%;min-inline-size:0;padding:0;border:0;background:none;color:var(--c-ink);font:inherit;font-size:1.375rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3}
.c-conv--bar :is(.c-conv__amt input,.c-conv__sel select):focus{outline:none}
.c-conv__sel{position:relative;display:block}
.c-conv__sel :is(.flag,img){position:absolute;inset-inline-start:0;inset-block-start:50%;translate:0 -50%;margin:0;pointer-events:none}
.c-conv__sel .flag{inline-size:26px!important;block-size:18px!important;box-shadow:0 0 0 1px var(--c-line)}
.c-conv__sel img{inline-size:24px;block-size:24px;border-radius:50%;background:var(--c-icon-bg);padding:var(--c-icon-pad)}
.c-conv--bar .c-conv__sel select{appearance:none;inline-size:100%;min-inline-size:0;padding-block:0;padding-inline:36px 20px;border:0;background:none;color:var(--c-text);font:inherit;font-size:var(--t-md);font-weight:600;line-height:1.5;cursor:pointer;text-overflow:ellipsis}
.c-conv__sel :is(option,optgroup){background:var(--c-surface);color:var(--c-text)}
.c-conv__sel::after{content:"";position:absolute;inset-inline-end:4px;inset-block-start:calc(50% - 5px);inline-size:6px;block-size:6px;border-right:1.5px solid var(--c-muted);border-bottom:1.5px solid var(--c-muted);rotate:45deg;pointer-events:none}
.c-conv__swap{grid-area:swap;align-self:center;justify-self:center;display:grid;place-items:center;inline-size:44px;block-size:44px;padding:0;border:1px solid var(--c-line-2);border-radius:50%;background:var(--c-surface);color:var(--c-ink);cursor:pointer;transition:background-color var(--m-fast),color var(--m-fast)}
.c-conv__swap:hover{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-on-ink)}
.c-conv__swap:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.c-conv__res{grid-area:res;display:flex;flex-direction:column;justify-content:center;gap:2px;min-inline-size:0;margin-inline-start:6px;padding:6px 26px;border-radius:var(--r-pill);background:var(--c-board);color:#fff}
.c-conv__res output{display:flex;align-items:baseline;gap:6px;min-inline-size:0;white-space:nowrap}
.c-conv__res b{font-size:1.625rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.c-conv__res output span{font-size:var(--t-sm);color:var(--c-board-muted)}
.c-conv__meta{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);font-size:var(--t-sm);color:var(--c-board-muted);white-space:nowrap}
.c-conv__meta>span{overflow:hidden;text-overflow:ellipsis}
.c-conv__link{flex:none;color:#fff;text-decoration:underline!important;text-underline-offset:3px}
.c-conv__link:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:2px}
.c-conv__cta{margin-block-start:var(--s-3)}  /* the hub: the pair / item page link as a button under the bar */
.c-conv--bar .c-conv__go{grid-area:go;align-self:center;margin-inline-start:6px;border-radius:var(--r-pill)}
.js [data-conv-submit]{display:none}  /* with JS the result updates as you type: gone before first paint, not after it; still the form's default button */
@media (max-width:899px){
  .c-conv--bar{padding:var(--s-2);border-radius:var(--r-3)}
  .c-conv--bar .c-conv__bar{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);grid-template-areas:"amt amt amt" "from swap to" "res res res" "go go go";gap:var(--s-2)}
  .c-conv__seg{min-block-size:58px;padding:6px 10px;border:1px solid var(--c-line-2);border-radius:var(--r-2)}
  .c-conv__seg:focus-within{background:var(--c-surface)}
  .c-conv__amt::after{content:none}
  .c-conv--bar .c-conv__sel select{font-size:var(--t-base);padding-inline:30px 12px}
  .c-conv__sel::after{inset-inline-end:0;inline-size:5px;block-size:5px}
  .c-conv__sel .flag{inline-size:22px!important;block-size:15px!important}
  .c-conv__sel img{inline-size:22px;block-size:22px}
  .c-conv__res{margin:0;padding:10px var(--s-4);border-radius:var(--r-2)}
  .c-conv__res b{font-size:1.5rem}
  .c-conv__meta{flex-wrap:wrap;white-space:normal}
  .c-conv--bar .c-conv__go{margin:0}
}
/* the currency table follows the bar closely when no top banner sits between them */
.l-wrap:has(>.c-conv--bar)+.l-wrap.l-stack{margin-block-start:var(--s-4)}
/* gold as 2×2 tiles beside a live side banner (300×250); full-width row of 4 without one */
@media (min-width:1200px){
  .c-home-grid:has(>.l-rail>*) .c-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-home-grid:has(>.l-rail>*) .c-board__list{grid-template-columns:1fr}  /* Tehran exchange beside the banner: too narrow for two */
}
.c-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.c-links a{display:block;padding:var(--s-2) 0;color:var(--c-ink);border-block-end:1px solid var(--c-line)}
.c-links li:last-child a{border-block-end:0}
.c-links a:hover{text-decoration:underline}
.c-links--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));column-gap:var(--s-6)}
.c-links--grid li:last-child a{border-block-end:1px solid var(--c-line)}

/* legacy calculators (currency / exchange-rate singles, until they move to ui2): the input
   shrinks instead of pushing the select off a 360px screen (audit A5) */
.currCalculate .inputCalc,.currCalculate .ConvertOutput{display:flex;max-width:100%;min-width:0}
.currCalculate .inputIco{flex:1 1 auto;min-width:0}
.currCalculate .inputIco input{width:100%;min-width:0}
.currCalculate select{flex:0 0 40%;min-width:0;max-width:40%}

/* ---------- gold calculator ---------- */
.c-goldcalc__grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin-block-end:var(--s-4)}
.c-goldcalc__sum{inline-size:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.c-goldcalc__sum th,.c-goldcalc__sum td{padding:var(--s-2) 0;border-block-end:1px solid var(--c-line);font-weight:400}
.c-goldcalc__sum th{text-align:start;color:var(--c-muted)}
.c-goldcalc__sum td{text-align:end;white-space:nowrap}
.c-goldcalc__sum tfoot th,.c-goldcalc__sum tfoot td{border-block-end:0;padding-block-start:var(--s-3);color:var(--c-text);font-weight:600}
.c-goldcalc .c-conv__note{margin-block-start:var(--s-3)}

/* ---------- table filter ---------- */
.c-filter{margin-block-end:var(--s-3)}
.c-filter .c-input{max-width:360px}
.c-filter__empty{margin:var(--s-3) 0 0;color:var(--c-muted);font-size:var(--t-sm)}
.js .c-filter[hidden],.js #bubbleChartBox[hidden]{display:block!important;visibility:hidden}  /* with JS the box is reserved until its script shows it, so nothing under it moves (the list filter; the gold single's bubble chart) */

/* ---------- TradingView on request ---------- */
.c-tv{display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}
.c-tv>div{inline-size:100%}

/* ---------- chips ---------- */
.c-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0;padding:0}
.c-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-3);border:1px solid var(--c-line-2);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-text);font:inherit;font-size:var(--t-sm);cursor:pointer}
.c-chip:hover{border-color:var(--c-ink)}
.c-chip[aria-pressed="true"],.c-chip[aria-current="page"],.c-chip.is-active{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-on-ink)}

/* ---------- market section chips (partials/ui/market-chips.php): wrap on desktop, one sticky
   scrolling row on phones ---------- */
.c-mchips{padding-block:var(--s-3) 0}
.c-chips__gap{margin-inline-start:var(--s-2);padding-inline-start:var(--s-3);border-inline-start:1px solid var(--c-line-2)}
@media (max-width:779px){
  .c-mchips{position:sticky;inset-block-start:0;z-index:20;background:var(--c-bg);padding-block:var(--s-2)}
  .c-mchips .c-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .c-mchips .c-chips::-webkit-scrollbar{display:none}
  .c-mchips li{flex:none}
  .c-mchips .c-chip{white-space:nowrap}
}

/* ---------- panel (rail boxes, calculators) ---------- */
.c-panel{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-3);padding:var(--s-4)}
.c-panel h2,.c-panel h3{font-size:var(--t-md);font-weight:600;margin-block-end:var(--s-3)}
/* ---------- share pages (partials/ui/stock-stats.php) ---------- */
.c-badge{display:inline-flex;align-items:center;padding:2px var(--s-2);border:1px solid var(--c-line-2);border-radius:var(--r-pill);background:var(--c-surface-2);color:var(--c-ink);font-size:var(--t-xs);font-weight:500}
.c-badge--soft{background:transparent;color:var(--c-muted);font-weight:400}
.c-stock{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s-4);margin-block-start:var(--s-6)}
.c-kv{inline-size:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.c-kv th,.c-kv td{padding:var(--s-2) 0;border-block-end:1px solid var(--c-line);font-weight:400}
.c-kv th{text-align:start;color:var(--c-muted)}
.c-kv td{text-align:end}
.c-kv tr:last-child>*{border-block-end:0}
.c-split{display:flex;block-size:10px;margin-block:var(--s-1) var(--s-3);border-radius:var(--r-pill);background:var(--c-line-2);overflow:hidden}
.c-split>span{background:var(--c-ink)}
.c-split__label{margin:0;font-size:var(--t-sm);color:var(--c-muted)}
.c-note{margin:var(--s-2) 0 0;font-size:var(--t-xs);color:var(--c-muted)}
.c-kv th .c-note,.c-tile .c-note{display:block;margin:var(--s-1) 0 0}
.c-h2__sub{font-size:var(--t-sm);font-weight:400;color:var(--c-muted)}
/* Fear & Greed panel (crypto list): the value, its band word and a 0–100 bar */
.c-fng__now{margin:0;display:flex;align-items:baseline;gap:var(--s-2)}
.c-fng__v{font-size:var(--t-xl);font-weight:700;font-variant-numeric:tabular-nums}
.c-fng__label{font-weight:600}
.c-fng__bar>span.c-fng--extreme-fear,.c-fng__bar>span.c-fng--fear{background:var(--c-down)}
.c-fng__bar>span.c-fng--neutral{background:var(--c-muted)}
.c-fng__bar>span.c-fng--greed,.c-fng__bar>span.c-fng--extreme-greed{background:var(--c-up)}
.c-fng__label.c-fng--extreme-fear,.c-fng__label.c-fng--fear{color:var(--c-down)}
.c-fng__label.c-fng--greed,.c-fng__label.c-fng--extreme-greed{color:var(--c-up)}
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border:0;border-radius:var(--r-2);background:var(--c-ink);color:var(--c-on-ink)!important;font:inherit;font-size:var(--t-sm);font-weight:500;cursor:pointer}
.c-btn:hover{background:var(--c-ink-2)}
.c-btn--ghost{background:transparent;color:var(--c-ink)!important;border:1px solid var(--c-line-2)}
.c-btn--ghost:hover{background:var(--c-surface-2)}
.c-share{margin-block-start:var(--s-3)}
.c-share:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.c-pagehead .c-share{margin-block-start:var(--s-2)}

/* ---------- form fields ---------- */
.c-field{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.c-field label{font-size:var(--t-sm);color:var(--c-muted)}
.c-input,.c-select{inline-size:100%;min-width:0;min-height:44px;padding:0 var(--s-3);border:1px solid var(--c-line-2);border-radius:var(--r-2);background:var(--c-surface);color:var(--c-text);font:inherit;font-size:var(--t-md);font-variant-numeric:tabular-nums}
.c-input:focus,.c-select:focus{outline:2px solid var(--c-focus);outline-offset:1px;border-color:transparent}
.c-result{font-size:var(--t-lg);font-weight:600;color:var(--c-ink);font-variant-numeric:tabular-nums}

/* ---------- breadcrumbs ---------- */
.c-crumbs{font-size:var(--t-sm);color:var(--c-muted)}
.c-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-1);margin:0;padding:0}
.c-crumbs li+li:before{content:"/";margin-inline-end:var(--s-1);color:var(--c-line-2)}
.c-crumbs a{color:var(--c-muted)}
.c-crumbs a:hover{color:var(--c-ink)}

/* ---------- prose (intro / FAQ lead) ---------- */
.c-prose{max-width:72ch;color:var(--c-text);font-size:var(--t-base);line-height:1.9}
.c-prose p{margin:0 0 var(--s-3)}
.c-prose p:last-child{margin-block-end:0}
.c-prose a{color:var(--c-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- icon pack ----------
   Sprite: assets/img/icons.svg, rendered by Web\Ui::icon('gold', 'c-ic--16'):
     <svg class="c-ic c-ic--gold"><use href="/assets/img/icons.svg?v=…#i-gold"/></svg>
   24px grid, 1.8 stroke, round caps and joins, currentColor. Each symbol has layers (.ic-b base,
   .ic-d inner detail, .ic-x outer detail, .ic-bg + .ic-ln line icon on a badge) styled by a
   <style> inside the sprite, since page CSS does not reach into an external <use> tree. The
   variant is three registered properties, inherited into that tree, so a state change animates:
     outline (default: nav at rest, rows, links, buttons)
     .c-ic--fill  selected only (current nav item, active tab)
     .c-ic--duo   large decorative spots, 40px and up */
@property --ic-f{syntax:"<number>";inherits:true;initial-value:0}  /* base fill opacity */
@property --ic-k{syntax:"<number>";inherits:true;initial-value:0}  /* detail knock-out 0..1 */
@property --ic-s{syntax:"<number>";inherits:true;initial-value:0}  /* line icon -> badge 0..1 */
.c-ic{
  --ic-knock:var(--c-surface);  /* set to the fill behind the icon when it is not the surface */
  inline-size:20px;block-size:20px;flex:none;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:var(--ic-sw);stroke-linecap:round;stroke-linejoin:round;
  transition:--ic-f var(--m-fast) var(--m-ease),--ic-k var(--m-fast) var(--m-ease),--ic-s var(--m-base) var(--m-ease),transform var(--m-base) var(--m-ease);
}
.c-ic--16{inline-size:16px;block-size:16px}
.c-ic--24{inline-size:24px;block-size:24px}
.c-ic--40{inline-size:40px;block-size:40px}
.c-ic--fill,.c-ic-on .c-ic,[aria-current="page"] .c-ic,.navMenu [aria-current="true"] .c-ic{--ic-f:1;--ic-k:1;--ic-s:1}
.c-ic--duo{--ic-f:var(--ic-tint);--ic-k:0;--ic-s:1}
.c-stale .c-ic{color:var(--c-gold)}
/* placements: beside a heading, inside a button or link */
.c-sec h2>.c-ic,.mkt-section-head h2>.c-ic{vertical-align:-.2em;margin-inline-end:var(--s-2)}
.mkt-section-head h2>.c-ic{color:var(--c-ink)}
.btn>.c-ic{vertical-align:-.2em;margin-inline-end:4px}
.c-range label>.c-ic,.c-textlink>.c-ic{margin-inline-end:6px}

/* refresh (freshness line): one turn per poll; keeps turning only while the request is open */
@keyframes c-spin{to{transform:rotate(360deg)}}
.c-ic--refresh.is-turn{animation:c-spin var(--m-spin) var(--m-ease)}
.is-loading .c-ic--refresh{animation:c-spin var(--m-spin) linear infinite}
/* converter swap: a half turn */
.c-swap[aria-pressed="true"] .c-ic{transform:rotate(180deg)}
/* full chart range: the corners open on hover */
@media (hover:hover){:is(a,button,label):hover>.c-ic--range{transform:scale(1.1)}}

/* ---------- live update flash (only when a raw value really changed) + arrow nudge ---------- */
@keyframes c-flash-up{from{background-color:var(--c-up-bg)}to{background-color:transparent}}
@keyframes c-flash-down{from{background-color:var(--c-down-bg)}to{background-color:transparent}}
@keyframes c-flash-board{from{background-color:rgba(255,255,255,.18)}to{background-color:transparent}}
@keyframes c-nudge-up{from{transform:translateY(3px);opacity:0}}
@keyframes c-nudge-down{from{transform:translateY(-3px);opacity:0}}
.is-flash-up{animation:c-flash-up var(--m-flash) var(--m-out)}
.is-flash-down{animation:c-flash-down var(--m-flash) var(--m-out)}
.c-ticker .is-flash-up,.c-ticker .is-flash-down{animation:c-flash-board var(--m-flash) var(--m-out)}
/* the flash marks the price cell; in a table the arrow sits in the change cell of the same row */
:is(.is-flash-up,tr:has(>.is-flash-up)) :is(.c-up>.c-arrow,.c-ic--up){animation:c-nudge-up var(--m-base) var(--m-ease)}
:is(.is-flash-down,tr:has(>.is-flash-down)) :is(.c-down>.c-arrow,.c-ic--down){animation:c-nudge-down var(--m-base) var(--m-ease)}

/* live dot: one ping after each successful /live poll (ui.js live), none while stale */
@keyframes c-ping{
  from{box-shadow:0 0 0 3px var(--c-up-bg),0 0 0 3px color-mix(in srgb,var(--c-up) 45%,transparent)}
  to{box-shadow:0 0 0 3px var(--c-up-bg),0 0 0 11px color-mix(in srgb,var(--c-up) 0%,transparent)}
}
.c-live-dot.is-ping{animation:c-ping var(--m-ping) var(--m-out)}
.c-updated.is-stale .c-live-dot{animation:none}

/* reduced motion: every state still changes, nothing moves */
@media (prefers-reduced-motion:reduce){
  .c-ic{transition:none}
  .c-ic--refresh.is-turn,.is-loading .c-ic--refresh,.c-live-dot.is-ping,
  .is-flash-up,.is-flash-down,.c-ticker .is-flash-up,.c-ticker .is-flash-down,
  :is(.is-flash-up,.is-flash-down,tr:has(>.is-flash-up),tr:has(>.is-flash-down)) :is(.c-arrow,.c-ic--up,.c-ic--down){animation:none}
  :is(a,button,label):hover>.c-ic--range,.c-swap[aria-pressed="true"] .c-ic{transform:none}
}

/* legacy currency "details" rows (label + value on one line): let a long banknote list wrap
   instead of pushing the page wider than a phone */
.currDataTxt .currDataTxtInner{flex-wrap:wrap;white-space:normal;max-width:100%}

/* ---------- width leaks (phones) ---------- */
img{max-width:100%;height:auto}
.table-responsive{overflow-x:auto}

/* ---------- tap targets (phones) ---------- */
.acDropList>summary{min-block-size:40px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.acDropList>summary::-webkit-details-marker{display:none}
.acDropList>summary:focus-visible{outline:2px solid var(--c-focus);outline-offset:4px;border-radius:var(--r-pill)}
.selectLang>span{min-block-size:40px}
.selectLang a{display:flex;align-items:center;min-block-size:40px}
@media (max-width:779px){
  .c-crumbs li{display:flex;align-items:center}
  .c-crumbs a{display:inline-flex;align-items:center;min-block-size:40px}
  .btn-sm,.btn-outline-primary,a.fs-7{display:inline-flex;align-items:center;justify-content:center;min-block-size:40px}
}

/* ---------- single page: chart range bar, text link, converter, cross-rate grid ---------- */
.c-range{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;max-inline-size:380px;margin-block-end:var(--s-3);border:1px solid var(--c-line-2);border-radius:var(--r-pill);overflow:hidden}
.c-range label{display:flex;align-items:center;justify-content:center;min-block-size:40px;padding-inline:var(--s-2);font-size:var(--t-sm);color:var(--c-text);white-space:nowrap;cursor:pointer;user-select:none}
.c-range label+input+label{border-inline-start:1px solid var(--c-line)}
.c-range input:checked+label{background:var(--c-ink);color:var(--c-on-ink);font-weight:500}
.c-range input:focus-visible+label{outline:2px solid var(--c-focus);outline-offset:-3px}
.c-trend{margin:var(--s-4) 0 0;font-size:var(--t-sm);line-height:1.8;color:var(--c-text)}
.c-textlink{display:inline-flex;align-items:center;min-block-size:40px;margin-block-start:var(--s-2);font-size:var(--t-sm);color:var(--c-ink);text-decoration:underline!important;text-underline-offset:3px}
.c-subh{margin:var(--s-5) 0 var(--s-3)!important;font-size:var(--t-md);font-weight:600}
.c-calcres{margin:var(--s-4) 0 0;text-align:center;font-size:var(--t-md);color:var(--c-ink)}
.c-conv-pic{margin-block-end:var(--s-4);text-align:center}
@media (max-width:767px){.c-conv-pic{display:none}}
.c-xlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.c-xitem{min-inline-size:0;padding:var(--s-2) var(--s-3);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-2)}
.c-xitem__name{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--t-sm);font-weight:500;line-height:1.4}
.c-xitem__name a{color:var(--c-ink)}
.c-xitem__name .flag-container{flex:none;display:flex;margin:0!important}
.c-xitem__name .flag{margin:0;inline-size:24px!important;block-size:16px!important;background-size:cover}
.c-xitem__rate{margin:2px 0 0;font-size:var(--t-xs);color:var(--c-muted)}
.c-xitem__rate strong{margin-inline-end:4px;font-size:var(--t-base);color:var(--c-text);font-variant-numeric:tabular-nums}
@media (min-width:640px){.c-xlist{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}}

/* ---------- chart box: a fixed height so Chart.js does not squash to 2:1 on phones ---------- */
.c-chart{position:relative;inline-size:100%;block-size:240px}

/* youtube embeds: 16:9 instead of the global iframe{min-height:400px} */
.c-video{aspect-ratio:16/9;min-height:0;height:auto}

/* ---------- dark mode (ui2 pages only) ----------
   Follows the phone/OS setting; html[data-theme] (set by the head script and the .c-theme button,
   see ui.js `theme`) wins either way. The two blocks below must hold identical values. Legacy-only
   pages have no body.ui2 and stay light. Text >= 4.5:1 on --c-surface and --c-bg. */
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body.ui2{
  color-scheme:dark;
  --c-ink:#a9b7ff;--c-ink-2:#c4cfff;--c-on-ink:#0b1030;
  --c-board:#171d5e;--c-board-line:rgba(255,255,255,.1);--c-board-muted:#aab2e6;
  --c-text:#e6e9f5;--c-muted:#a0aac6;
  --c-bg:#0e1220;--c-surface:#171c30;--c-surface-2:#1f2540;--c-line:#2a3150;--c-line-2:#3b4468;
  --c-up:#4ade80;--c-down:#ff8a8a;--c-up-bg:#123524;--c-down-bg:#3d1a1f;
  --c-gold:#e0b04a;--c-warn-bg:#3a2f10;--c-warn-line:#6b5720;--c-warn-text:#f2d98a;--c-focus:#7d9bff;
  --ac-link-dark:#b3bbd6;--ac-primary-rgb:169,183,255;--ac-emphasis-color:#e6e9f5;--ac-emphasis-color-rgb:230,233,245;
  --ac-body-bg:#0e1220;--ac-border-color:#2a3150;--ac-white:#171c30;--c-glow:rgba(0,0,0,.35);
  --c-icon-bg:#fff;--c-icon-pad:2px;
  background-image:none;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) body.ui2{
    color-scheme:dark;
    --c-ink:#a9b7ff;--c-ink-2:#c4cfff;--c-on-ink:#0b1030;
    --c-board:#171d5e;--c-board-line:rgba(255,255,255,.1);--c-board-muted:#aab2e6;
    --c-text:#e6e9f5;--c-muted:#a0aac6;
    --c-bg:#0e1220;--c-surface:#171c30;--c-surface-2:#1f2540;--c-line:#2a3150;--c-line-2:#3b4468;
    --c-up:#4ade80;--c-down:#ff8a8a;--c-up-bg:#123524;--c-down-bg:#3d1a1f;
    --c-gold:#e0b04a;--c-warn-bg:#3a2f10;--c-warn-line:#6b5720;--c-warn-text:#f2d98a;--c-focus:#7d9bff;
    --ac-link-dark:#b3bbd6;--ac-primary-rgb:169,183,255;--ac-emphasis-color:#e6e9f5;--ac-emphasis-color-rgb:230,233,245;
    --ac-body-bg:#0e1220;--ac-border-color:#2a3150;--ac-white:#171c30;--c-glow:rgba(0,0,0,.35);
    --c-icon-bg:#fff;--c-icon-pad:2px;
    background-image:none;
  }
}

/* legacy surfaces on ui2 pages, driven by the tokens (light values match what they were) */
body.ui2{color:var(--c-ink);background:var(--c-bg)!important}  /* also drops styles.css's dot image (audit F76) */
body.ui2 .text-dark{color:var(--c-text)!important}
body.ui2 .deskMenuTop{box-shadow:0 0 40px var(--c-glow)}
body.ui2 .bg-white{background-color:var(--c-surface)!important}
body.ui2 .cryptoDescription :is(p,ul){color:var(--c-text)}
body.ui2 .faqQuestion{background:var(--c-surface);color:var(--c-text)}
body.ui2 .faqAnswer{border-top-color:var(--c-line);color:var(--c-ink)}
body.ui2 .faqAnswer a{color:var(--c-ink)}
@media (hover:hover){body.ui2 .faqQuestion:hover{background:var(--c-surface-2)}}
@media (max-width:640px){body.ui2 :is(.cryptoTbl,.goldTbl) tbody tr{background:var(--c-surface)!important}}
body.ui2 .text-success{color:var(--c-up)!important}
body.ui2 .text-danger{color:var(--c-down)!important}
body.ui2 .card{background-color:var(--c-surface);border-color:var(--c-line);color:var(--c-text)}
body.ui2 .card.info,body.ui2 .footerBoxLight{background-color:var(--c-surface-2)}
/* ---------- market board (home): a tab bar joined to one compact list; CSS-only tabs ----------
   Not pills: pill tabs read as filter chips and went unclicked. .c-board--solo is one section's
   list on its own (Tehran exchange, oil & energy), no tabs. */
.c-board__radio{position:absolute;inline-size:1px;block-size:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.c-board__tabs{display:flex;overflow-x:auto;scrollbar-width:none;padding-inline:var(--s-2);background:var(--c-surface);border:1px solid var(--c-line);border-block-end:0;border-start-start-radius:var(--r-3);border-start-end-radius:var(--r-3)}
.c-board__tabs::-webkit-scrollbar{display:none}
.c-board__tab{display:inline-flex;align-items:center;gap:var(--s-2);flex:none;min-block-size:48px;padding:0 var(--s-4);border-block-end:3px solid transparent;color:var(--c-muted);font-size:var(--t-sm);font-weight:500;cursor:pointer;user-select:none}
.c-board__tab:hover{color:var(--c-ink)}
.c-board__tab svg{flex:none}
.c-board__panel{display:none;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-3);padding:var(--s-2) var(--s-4) var(--s-4);content-visibility:auto;contain-intrinsic-size:auto 420px}
.c-board__tabs~.c-board__panels .c-board__panel{border-start-start-radius:0;border-start-end-radius:0}
.c-board--solo .c-board__panel{display:block}
.c-board__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-7)}
.c-board__list li{border-block-end:1px solid var(--c-line)}
.c-brow{display:grid;grid-template-columns:minmax(0,1fr) 72px auto 76px;align-items:center;gap:var(--s-3);min-block-size:56px;padding-block:var(--s-2);color:var(--c-text)}
.c-brow:hover .c-brow__name{color:var(--c-ink)}
.c-brow__name{font-weight:500;line-height:1.4;overflow:hidden;text-overflow:ellipsis}
.c-brow__name small{display:block;font-size:var(--t-xs);font-weight:400;color:var(--c-muted)}
.c-brow__spark svg{display:block;inline-size:72px;block-size:26px}
.c-brow__val{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:end}
.c-brow__chg{justify-self:end;font-size:var(--t-xs);font-variant-numeric:tabular-nums;white-space:nowrap}
.c-brow__chg:not(:empty){padding:3px 8px;border-radius:var(--r-pill);background:var(--c-surface-2)}
.c-brow__chg.c-up{background:var(--c-up-bg)}
.c-brow__chg.c-down{background:var(--c-down-bg)}
.c-board__more{margin-block-start:var(--s-3)}
#mb-iran_stocks:checked~.c-board__panels [data-k="iran_stocks"],#mb-energy:checked~.c-board__panels [data-k="energy"],#mb-world:checked~.c-board__panels [data-k="world"],#mb-base_metals:checked~.c-board__panels [data-k="base_metals"],#mb-agriculture:checked~.c-board__panels [data-k="agriculture"]{display:block}
#mb-iran_stocks:checked~.c-board__tabs [data-k="iran_stocks"],#mb-energy:checked~.c-board__tabs [data-k="energy"],#mb-world:checked~.c-board__tabs [data-k="world"],#mb-base_metals:checked~.c-board__tabs [data-k="base_metals"],#mb-agriculture:checked~.c-board__tabs [data-k="agriculture"]{border-block-end-color:var(--c-ink);color:var(--c-ink);font-weight:600}
#mb-iran_stocks:checked~.c-board__tabs [data-k="iran_stocks"] .c-ic,#mb-energy:checked~.c-board__tabs [data-k="energy"] .c-ic,#mb-world:checked~.c-board__tabs [data-k="world"] .c-ic,#mb-base_metals:checked~.c-board__tabs [data-k="base_metals"] .c-ic,#mb-agriculture:checked~.c-board__tabs [data-k="agriculture"] .c-ic{--ic-f:1;--ic-k:1;--ic-s:1;--ic-knock:var(--c-surface)}
#mb-iran_stocks:focus-visible~.c-board__tabs [data-k="iran_stocks"],#mb-energy:focus-visible~.c-board__tabs [data-k="energy"],#mb-world:focus-visible~.c-board__tabs [data-k="world"],#mb-base_metals:focus-visible~.c-board__tabs [data-k="base_metals"],#mb-agriculture:focus-visible~.c-board__tabs [data-k="agriculture"]{outline:2px solid var(--c-focus);outline-offset:2px}
@media (max-width:779px){
  .c-board__list{grid-template-columns:1fr}
  /* two lines: the name gets the width, price over its change pill */
  .c-brow{grid-template-columns:minmax(0,1fr) 56px auto;grid-template-areas:"name spark val" "name spark chg";gap:4px var(--s-3)}
  .c-brow__name{grid-area:name}
  .c-brow__spark{grid-area:spark}
  .c-brow__val{grid-area:val}
  .c-brow__chg{grid-area:chg}
  .c-brow__spark svg{inline-size:56px}
  .c-board__panel{padding-inline:var(--s-3)}
}
@media (max-width:639px){  /* every tab in view (audit F09): equal widths, icon over the label */
  .c-board__tabs{overflow:visible;padding-inline:0}
  .c-board__tab{flex:1 1 0;min-inline-size:0;flex-direction:column;justify-content:center;gap:2px;padding:6px 4px;font-size:var(--t-xs);text-align:center}
}
@media (max-width:359px){.c-brow__spark{display:none}.c-brow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "name chg"}}
/* ---------- my prices (home, ui.js mine): starred prices as board rows with no sparkline, then the
   recently viewed pages as one scrolling chip row ---------- */
.c-mine{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}  /* minmax: the chip row scrolls, never widens the page */
.c-mine[hidden]+*{margin-block-start:0}  /* hidden, it must not push the currency table down */
/* no layout shift: the inline script in home.php shows the block before first paint with the saved
   counts (--mine-n rows in one column, --mine-n2 in two), ui.js fills it and drops them. A row is
   .c-brow's 56px plus its 1px rule; on phones two lines: 16 padding + 25.6 price + 4 gap + 25.2 pill + 1. */
.c-mine [data-mine-list]{min-block-size:calc(var(--mine-n2,0)*57px)}
.c-mine .c-board__panel{content-visibility:visible}  /* in view at load: an auto panel is first laid out at its 420px placeholder, which would shift the table once */
.c-brow--mine{grid-template-columns:minmax(0,1fr) auto 76px}
.c-brow--mine .c-brow__val small{font-size:var(--t-xs);font-weight:400;color:var(--c-muted)}
.c-mine__recent{display:flex;align-items:center;gap:var(--s-3)}
.c-mine__recent h2{flex:none;margin:0;font-size:var(--t-sm);font-weight:500;color:var(--c-muted)}
.c-mine__recent .c-chips{flex:1 1 0;min-inline-size:0;min-block-size:48px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px}
.c-mine__recent .c-chips::-webkit-scrollbar{display:none}
.c-mine__recent .c-chip{white-space:nowrap}
@media (max-width:779px){.c-brow--mine{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name val" "name chg"}.c-mine [data-mine-list]{min-block-size:calc(var(--mine-n,0)*71.8px)}}
/* footer disclaimer: plain small print under a rule, not another card like the page's own panels */
body.ui2 .footer-about{background:none;border:0;border-block-start:1px solid var(--c-line);border-radius:0;box-shadow:none;padding:var(--s-4) 0 0!important}
body.ui2 .footer-about,body.ui2 .footer-about p{color:var(--c-muted)!important;font-size:var(--t-sm);line-height:1.9;margin:0}
@media (max-width:767px){
  body.ui2 .footer{margin-top:var(--s-7)!important}  /* styles.css gives 5em (audit F57) */
  body.ui2 .footerBoxLight ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4);margin:0;line-height:1.5}
  body.ui2 .footerBoxLight li a{display:flex;align-items:center;min-block-size:44px}  /* audit F64 */
}
body.ui2 .table-striped tbody tr:nth-of-type(even){background-color:var(--c-surface-2)}
body.ui2 .tableMini tr{border-bottom-color:var(--c-line)}
body.ui2 .table-noborder td{border-bottom-color:var(--c-line)}
body.ui2 .currDataTxt .currDataTxtInner{border-color:var(--c-line-2)}
body.ui2 .acDropList{background-color:var(--c-surface);border-color:var(--c-line-2)}
body.ui2 .selectLang{background:var(--c-surface);box-shadow:0 0 10px rgba(0,0,0,.28)}
body.ui2 :is(input,select,textarea){background-color:var(--c-surface);color:var(--c-text)}
body.ui2 .currCalculate select,body.ui2 .currCalculate .inputCalc select,body.ui2 .currCalculate .ConvertOutput select{background-color:var(--c-surface-2)}
body.ui2 .btn-outline-primary{--ac-btn-color:var(--c-ink);--ac-btn-border-color:var(--c-ink);--ac-btn-hover-color:var(--c-on-ink);--ac-btn-hover-bg:var(--c-ink);--ac-btn-hover-border-color:var(--c-ink);--ac-btn-active-color:var(--c-on-ink);--ac-btn-active-bg:var(--c-ink);--ac-btn-active-border-color:var(--c-ink)}
@media screen and (min-width:780px){
  body.ui2 .navMenu a:hover{color:var(--c-ink)}
  body.ui2 .navMenu a:before{background:var(--c-ink);inset-inline:3px auto}  /* en/tr: the underline sits under its own item (audit F100) */
}

/* ---------- theme toggle (header; ui.js unhides it) ---------- */
.c-theme{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;block-size:44px;padding:0;border:1px solid var(--c-line-2);border-radius:50%;background:var(--c-surface);color:var(--c-ink);cursor:pointer}
.c-theme:hover{background:var(--c-surface-2)}
.c-theme:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.c-theme__sun,.c-theme[aria-pressed="true"] .c-theme__moon{display:none}
.c-theme[aria-pressed="true"] .c-theme__sun{display:block}

/* ---------- share card in the page body (partials/ui/og-card.php) ---------- */
.c-ogcard{margin:var(--s-5) auto;max-inline-size:600px;inline-size:100%}
.c-ogcard img{display:block;inline-size:100%;block-size:auto;aspect-ratio:1200/630;border-radius:var(--r-3);border:1px solid var(--c-line)}

/* ---------- curated page content (partials/ui/page-content.php) ---------- */
.c-pcontent{display:grid;gap:var(--s-5)}
.c-pcontent .c-lead{margin:0}
.c-pcontent__block{max-inline-size:72ch}
.c-pcontent__block h2{font-size:var(--t-lg);font-weight:600;margin:0 0 var(--s-3)}
.c-pcontent__block p{margin:0 0 var(--s-3);line-height:1.9;color:var(--c-text)}
.c-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:var(--s-3) var(--s-5);margin:0}
.c-facts dt{font-size:var(--t-xs);color:var(--c-muted)}
.c-facts dd{margin:0;font-size:var(--t-base);line-height:1.7;color:var(--c-text)}
.c-pcontent__list{margin:0;padding-inline-start:var(--s-5);line-height:1.9;color:var(--c-text)}
.c-pcontent__block--wide{max-inline-size:none}
.c-related{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:var(--s-3)}
.c-related__card{display:flex;align-items:center;gap:var(--s-3);block-size:100%;min-block-size:64px;padding:var(--s-3) var(--s-4);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-3);color:var(--c-text);text-decoration:none;transition:border-color var(--m-fast) var(--m-out),box-shadow var(--m-fast) var(--m-out)}
.c-related__ic{flex:none;display:grid;place-items:center;inline-size:36px;block-size:36px;border-radius:var(--r-2);background:var(--c-surface-2);color:var(--c-ink)}
.c-related__body{flex:1;min-inline-size:0;display:grid;gap:2px}
.c-related__title{font-weight:600;color:var(--c-ink);line-height:1.5}
.c-related__why{font-size:var(--t-sm);color:var(--c-muted);line-height:1.6}
.c-related__go{flex:none;color:var(--c-muted);font-size:var(--t-base);transition:transform var(--m-fast) var(--m-out),color var(--m-fast) var(--m-out)}
@media (hover:hover){.c-related__card:hover{border-color:var(--c-line-2);box-shadow:0 10px 26px -18px var(--c-glow)}.c-related__card:hover .c-related__go{color:var(--c-ink);transform:translateX(-3px)}[dir="ltr"] .c-related__card:hover .c-related__go{transform:translateX(3px)}}
.c-related__card:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.c-related__card,.c-related__go{transition:none}}