/* =============================================================
   Rate-board layout & components.

   Every surface colour is a CSS variable, so this one sheet works for a
   light or a dark theme; the palette itself lives in tokens.css.

   TOKEN CONTRACT (tokens.css must define these):
     surfaces  --paper --panel --card-bg --glass --anchor-bg
     lines     --hairline --line-soft --card-line
     text      --ink --ink-soft --muted --faint
     brand     --accent --accent-deep --gold
     semantics --up --down --flat
     honesty   --hold-fg --hold-bg --hold-line
     trust     --trust-fg --trust-bg --trust-line
     bg        --bg-grad-from --bg-grad-to
     type      --font
     shape     --r-sm --r-md --r-lg --pad --page-max
   ============================================================= */

@font-face {
  font-family: "Vazirmatn";
  src: url("vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---- RESET ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  background-color: var(--bg-grad-to);
  background-image: linear-gradient(160deg, var(--bg-grad-from), var(--bg-grad-to));
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-block-size: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
svg, img { display: block; }
h1, h2 { margin: 0; }
.tnum { font-variant-numeric: tabular-nums; }

.page { max-width: var(--page-max); margin-inline: auto; position: relative; }

/* ---- TEST banner (engine is_test; dropped in production) ---- */
.notice { background: var(--hold-bg); color: var(--hold-fg); border-bottom: 1px solid var(--hold-line);
  font-size: 11px; font-weight: 600; padding: 6px var(--pad); text-align: center; }

/* ---- MASTHEAD ---------------------------------------------- */
.mast { display: flex; align-items: center; gap: 8px; padding: 10px var(--pad) 0; }
.brand__mark { inline-size: 16px; block-size: 16px; flex: none; border-radius: 4px;
  background: var(--accent); box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 1px var(--accent); }
.brand { font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.brand__note { font-size: 10px; color: var(--gold); font-weight: 600; padding-top: 3px; }
.lang { margin-inline-start: auto; font-size: 10.5px; font-weight: 700; color: var(--accent);
  border: 1px solid var(--card-line); border-radius: 999px; padding: 2px 10px; background: var(--panel); }

.datestrip { display: flex; justify-content: space-between; gap: 8px; padding: 6px var(--pad) 8px; font-size: 10.5px; color: var(--muted); }
.datestrip b { color: var(--ink); font-weight: 700; }

.rule { block-size: 3px; background: var(--accent); }
.rule--hair { block-size: 1px; background: var(--hairline); margin-top: 1.5px; }

/* ---- TABS (add a tab = add one <a class="tab">) ------------- */
.tabs { display: flex; align-items: center; gap: 2px; padding-inline: 10px; border-bottom: 1px solid var(--hairline); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab { flex: none; font-size: 12px; padding: 9px 11px 7px; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; white-space: nowrap; }
.tab.is-active { color: var(--ink); font-weight: 800; border-bottom-color: var(--accent); }

/* ---- AD SLOTS (config-gated; nothing renders for the dark fleet) ---- */
.adband { padding-inline: var(--pad); margin-top: 14px; }
.ad { border-radius: var(--r-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; overflow: hidden; }
.ad--ph { border: 1px dashed var(--card-line); background: var(--panel); min-height: 100px; }
.ad__label { font-size: 8.5px; color: var(--faint); letter-spacing: .12em; }
.ad__hint { font-size: 11px; color: var(--faint); font-weight: 600; }
.ad--ph.ad--rail { min-height: 250px; }
.ad-pair { display: grid; grid-template-columns: 1fr; gap: 14px; }
.only-desktop { display: none; }
.ad .adsbygoogle { width: 100%; }
.ad .adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* ---- FIRST SCREEN ----------------------------------------- */
.first { padding: 14px var(--pad) 0; display: flex; flex-direction: column; gap: 12px; }
.panel-glass { background: var(--glass); }

.hero { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 14px 16px; }
.hero__label { font-size: 12.5px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.unit-code { font-size: 9.5px; font-weight: 600; color: var(--faint); border: 1px solid var(--hairline); border-radius: 4px; padding: 0 5px; letter-spacing: .05em; }
.hero__row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.hero__val { font-size: 43px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.hero__unit { font-size: 13.5px; color: var(--muted); }
.hero__legs { display: flex; gap: 6px; margin-top: 8px; }
.hero__legs span { font-size: 11.5px; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--hairline); border-radius: 6px; padding: 3px 9px; }
.sentence { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }

.chg { font-weight: 700; }
.chg.up { color: var(--up); }
.chg.down { color: var(--down); }
.chg.flat { color: var(--flat); }

/* co-hero (second dollar / official pair, or headline gold) */
.coin { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.coin__label { font-size: 12px; font-weight: 700; color: var(--muted); }
.coin__valrow { display: flex; align-items: baseline; gap: 6px; }
.coin__val { font-size: 23px; font-weight: 800; letter-spacing: -.4px; }
.coin__unit { font-size: 11px; color: var(--muted); }
.coin__chg { margin-inline-start: auto; font-weight: 700; }
.coin__foot { display: none; font-size: 10.5px; color: var(--faint); border-top: 1px dashed var(--hairline); padding-top: 8px; margin-top: 8px; }

/* the headline-extras strip (a market's second/official dollars, packed) */
.xrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.xcard { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--card-bg); padding: 9px 12px; }
.xcard__k { font-size: 10.5px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.xcard__v { font-size: 19px; font-weight: 800; letter-spacing: -.3px; margin-top: 3px; }
.xcard__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 2px; }

.glance { display: flex; flex-direction: column; gap: 8px; }
.chips { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.chip { border: 1px solid var(--card-line); border-radius: 7px; padding: 6px 8px; background: var(--card-bg); }
.chip__k { font-size: 9.5px; color: var(--faint); }
.chip__v { font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* ---- SECTION HEADER (brand dash) -------------------------- */
.sec { display: flex; align-items: center; gap: 7px; margin: 18px var(--pad) 8px; font-size: 13.5px; font-weight: 800; }
.sec__dash { inline-size: 16px; block-size: 5px; border-radius: 3px; background: var(--accent); flex: none; }
.sec__dash--gold { background: var(--gold); }
.sec__dash--mut { background: var(--faint); }
.sec__rule { flex: 1; block-size: 1px; background: var(--hairline); }
.note { margin: 8px var(--pad) 0; font-size: 10.5px; color: var(--faint); }

/* ---- CARDS / TABLES --------------------------------------- */
.card { margin-inline: var(--pad); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper); overflow: hidden; }
.thead, .row { display: grid; align-items: center; }
.thead { padding: 6px 12px; background: var(--panel); font-size: 10px; color: var(--faint); font-weight: 700; }
.thead > * + * { text-align: end; }
.row { padding: 8.5px 12px; border-top: 1px solid var(--line-soft); font-size: 12.5px; }
.row--anchor { background: var(--anchor-bg); }

.cell-name { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.name { font-weight: 600; }
.name--anchor { font-weight: 800; }
.code { font-size: 9px; color: var(--faint); border: 1px solid var(--hairline); border-radius: 3px; padding: 0 3px; letter-spacing: .04em; }
.val { text-align: end; font-weight: 700; }
.chg-cell { text-align: end; font-size: 11px; font-weight: 700; }

.tag-stale { font-size: 9px; font-weight: 700; color: var(--hold-fg); background: var(--hold-bg); border: 1px solid var(--hold-line); border-radius: 4px; padding: 0 4px; white-space: nowrap; }

.cur .thead, .cur .row { grid-template-columns: 1.6fr 1fr .72fr; }
.gold .row { grid-template-columns: 1.5fr 1.1fr .6fr; }

.metals { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 var(--pad); }
.metal { border: 1px solid var(--card-line); border-radius: 8px; background: var(--card-bg); padding: 8px 10px; }
.metal__k { font-size: 10.5px; color: var(--faint); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.metal__row { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.metal__v { font-size: 16px; font-weight: 800; }
.metal .chg { font-size: 10.5px; }

/* footer */
.foot { margin-top: 16px; border-top: 1px solid var(--hairline); padding: 12px var(--pad) 16px; font-size: 10.5px; color: var(--faint); }
.foot__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot__links { margin-inline-start: auto; display: flex; gap: 10px; }
.foot__disc { margin-top: 6px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--accent-deep); }

/* ---- METHODOLOGY PAGE ------------------------------------- */
.meth { padding: 22px var(--pad) 8px; }
.meth__title { font-size: 26px; font-weight: 800; letter-spacing: -.3px; }
.meth__date { margin: 6px 0 0; font-size: 11.5px; color: var(--faint); }
.meth__intro { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); line-height: 1.65; max-width: 78ch; }
.meth__sec { padding: 0 var(--pad); margin-top: 20px; }
.meth__h { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; display: flex; align-items: center; gap: 7px; }
.meth__p { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); line-height: 1.75; }

/* =============================================================
   LEGAL PAGES — Privacy + Contact (D113)
   Tokenized so the same markup reads correctly on a light or a dark
   theme.
   ============================================================= */
.legal { padding: 22px var(--pad) 8px; max-width: 82ch; margin-inline: auto; }
.legal__title { font-size: 26px; font-weight: 800; letter-spacing: -.3px; margin: 0; }
.legal__updated { margin: 6px 0 0; font-size: 11.5px; color: var(--faint); }
.legal__sec { margin-top: 22px; }
.legal__h { margin: 0 0 8px; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.legal__p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.75; }
.legal__lead { font-size: 15px; color: var(--ink); }
.legal__muted { color: var(--faint); font-size: 12.5px; }
.legal__list { margin: 0 0 10px; padding-inline-start: 20px; }
.legal__list li { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 6px; }
.legal a[href], .legal__mail { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.legal a[href]:hover { color: var(--accent-deep); }
.legal__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px 0 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-md); }
.legal__table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 560px; }
.legal__table th, .legal__table td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.legal__table thead th { background: var(--panel); color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--hairline); }
.legal__table tbody tr:last-child td { border-bottom: 0; }

/* contact email card */
.legal--contact { max-width: 62ch; }
.contact-card { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 16px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.contact-card__label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.contact-card__mail { font-size: 18px; font-weight: 800; color: var(--accent); text-decoration: none; }
.contact-card__mail:hover { text-decoration: underline; }

/* ---- interim cookie-consent banner (renders only on a live ad build) ---- */
/* D120: `.consent` sets display:flex, which OVERRIDES the element's own `hidden`
   attribute — the consent script relies on `hidden` to keep the notice out of the
   way until it decides whether to show it. With JS disabled the script never runs,
   so the bar paints and can never be dismissed (its buttons are dead too). This
   line restores what `hidden` is supposed to mean, and also removes the one-frame
   flash before the script executes. (GPC users were never affected: the script
   removes the element from the DOM outright, so the privacy policy's promise that
   they see no notice was always kept.) */
.consent[hidden] { display: none; }
.consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: var(--paper);
  border-top: 1px solid var(--hairline); box-shadow: 0 -6px 22px rgba(0, 0, 0, .28);
  padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.consent__text { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 92ch; }
.consent__link { color: var(--accent); font-weight: 700; text-decoration: underline; white-space: nowrap; }
.consent__btns { display: flex; gap: 8px; }
.consent__btn { font: inherit; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 7px 18px; cursor: pointer; border: 1px solid var(--hairline); }
.consent__btn--ghost { background: transparent; color: var(--muted); }
.consent__btn--ghost:hover { color: var(--ink); border-color: var(--faint); }
.consent__btn--go { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.consent__btn--go:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

@media (min-width: 900px) {
  .legal { padding-inline: var(--pad); }
  .consent { flex-direction: row; align-items: center; gap: 18px; padding-block: 12px; }
  .consent__btns { margin-inline-start: auto; flex: none; }
}

/* ---- currency board (region-grouped, flagged, balanced 2-col) ---- */
.cur-board { padding: 0; }
.flag { font-size: 15px; line-height: 1; margin-inline-end: 3px; flex: none; }
.catcard { margin: 0 var(--pad) 12px; break-inside: avoid; }
.cat-h { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 2px 5px; }
.cat-h::before { content: ""; inline-size: 14px; block-size: 2px; background: var(--accent); border-radius: 2px; }
.cat-h__n { margin-inline-start: auto; font-weight: 700; color: var(--faint);
  background: var(--panel); border-radius: 999px; padding: 0 7px; font-size: 9.5px; letter-spacing: 0; }
.col-metals .sec:first-child { margin-top: 0; }

.cur-cols { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 760px) {
  .cur-cols { grid-template-columns: 1fr 1fr; padding: 0 var(--pad); }
  .catcard { margin: 0 0 14px; }
  .cur-board .sec, .cur-board > .card, .cur-board > .note { margin-inline: var(--pad); }
}

/* gold + metals reflow into a 2-col row below the currency board */
@media (min-width: 760px) {
  .board-grid { grid-template-columns: 1fr 1fr; }
}

/* coin logos (crypto) + aligned crypto/metal rows + BTC chip */
.clogo { inline-size: 17px; block-size: 17px; flex: none; margin-inline-end: 4px; vertical-align: middle; }
.flag, .clogo { display: inline-flex; align-items: center; }
.chip--btc .chip__v { color: var(--gold); }
@media (max-width: 899px) { .chips { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .board-grid .card.gold { margin-inline: 0; }
}

/* crypto as 5 tiles (with coin logos) */
.crypto-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-inline: var(--pad); }
.ctile { border: 1px solid var(--card-line); border-radius: 10px; background: var(--card-bg); padding: 9px 11px; }
.ctile__h { display: flex; align-items: center; gap: 5px; }
.ctile__h .name { font-size: 12.5px; font-weight: 700; }
.ctile__v { font-size: 17px; font-weight: 800; margin-top: 5px; }
.ctile__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; }
.ctile__sub { font-size: 10px; color: var(--muted); }
.ctile .chg { font-size: 10.5px; }
.ctile .tag-stale { margin-top: 3px; }
.catcard .row--anchor { background: var(--anchor-bg); }
.catcard .row--anchor .val { font-weight: 800; }
@media (min-width: 560px) { .crypto-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .crypto-tiles { grid-template-columns: repeat(5, 1fr); margin-inline: 0; } }

/* =============================================================
   DESKTOP  (≥ 900px)
   ============================================================= */
@media (min-width: 900px) {
  :root { --pad: 26px; }

  .brand { font-size: 21px; }
  .datestrip { padding-block: 8px 10px; font-size: 12px; }

  .first { display: grid; grid-template-columns: 1.55fr 1fr 1.05fr; gap: 14px; align-items: stretch; padding-top: 18px; }
  .hero { padding: 16px 20px; }
  .hero__val { font-size: 56px; letter-spacing: -1.5px; }
  .hero__unit { font-size: 16px; }
  .coin { flex-direction: column; align-items: flex-start; padding: 16px 20px; }
  .coin__val { font-size: 33px; }
  .coin__chg { margin-inline-start: 0; margin-top: 6px; }
  .coin__foot { display: block; margin-top: auto; }
  .xrow { grid-template-columns: 1fr; gap: 8px; }
  .chips { grid-template-columns: 1fr; }
  .chip { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 12px; }
  .chip__v { font-size: 14.5px; }

  .board-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: start; padding: 6px var(--pad) 0; }
  .board-grid > * { min-width: 0; }
  .board-grid .sec { margin-inline: 0; margin-top: 14px; }
  .board-grid .card,
  .board-grid .metals,
  .board-grid .note { margin-inline: 0; }

  .sec { font-size: 14.5px; }

  .ad-pair { grid-template-columns: 1fr 1fr; }
  .ad--ph.ad--leader { min-height: 90px; }
  .only-desktop { display: flex; }

  .foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .foot .foot__disc { margin-top: 0; }

  .meth__grid { column-count: 2; column-gap: 44px; padding-inline: var(--pad); margin-top: 8px; }
  .meth__grid .meth__sec { break-inside: avoid; padding-inline: 0; margin: 0 0 22px; }
}