@charset "UTF-8";
/*
 * DinarView — 2026 brand.
 *
 * Geometry here is measured from the handoff prototypes at a 1440px canvas,
 * not estimated from the screenshots. Where a comment gives a pixel figure it
 * is the value the prototype computes to, and the grid tracks are written so
 * they resolve to exactly those widths inside a 1328px content column
 * (1440 − 2 × 56 gutter).
 *
 * ORDER
 *   1  fonts          6  home            11 cities / city
 *   2  tokens         7  popular + news  12 offices
 *   3  base           8  footer          13 chart
 *   4  primitives     9  blog / article  14 responsive
 *   5  shell         10  series / glossary / methodology
 *
 * TWO RULES THAT KEEP THIS WORKING
 *
 * 1. Logical properties everywhere — margin-inline, padding-inline,
 *    inset-inline. Three of the five languages are right-to-left, and the
 *    previous theme mirrored margins but not pseudo-element geometry.
 *
 * 2. Every grid track is minmax(0,…), never a bare 1fr, and no layout lives
 *    in a style= attribute. A track's default minimum is its content's
 *    min-content width, so a bare 1fr cannot shrink below what it holds —
 *    which in RTL pushes the page off the screen rather than adding a bar.
 */

/* ============================================================ 1. FONTS */

@font-face{font-family:"FiraGO";src:url("../fonts/firago-lat-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"FiraGO";src:url("../fonts/firago-lat-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"FiraGO";src:url("../fonts/firago-lat-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"FiraGO";src:url("../fonts/firago-lat-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"FiraGO";src:url("../fonts/firago-lat-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"FiraGO";src:url("../fonts/firago-lat-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

/*
 * IBM Plex Sans Arabic carries the full Sorani set, so Kurdish and Arabic
 * share one family. Every weight the design uses ships as its own file —
 * there is no 700 faked from the 400, the usual cause of smeared Arabic.
 */
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ============================================================ 2. TOKENS */

:root{
  --blue:#3446FC;
  --blue-hover:#5E6BF9;
  /* Buttons darken on hover in this design; they do not lift and they do not
     glow. The blue goes to its pressed ramp, the Volt to its 700, and the
     soft/glass button gains ten points of wash. */
  --blue-press:#2534D6;
  --volt-hover:#AFC518;
  --navy:#07022B;
  --cloud:#EAEDF9;
  --volt:#D4EB3B;
  --white:#fff;
  --hover-ink:#6C7BFF;

  --r-6:6px; --r-8:8px; --r-10:10px; --r-12:12px; --r-14:14px; --r-16:16px;
  --r-18:18px; --r-20:20px; --r-22:22px; --r-24:24px; --r-pill:999px;

  --s-4:4px;  --s-6:6px;   --s-8:8px;   --s-10:10px; --s-12:12px; --s-14:14px;
  --s-16:16px; --s-20:20px; --s-24:24px; --s-28:28px; --s-32:32px; --s-40:40px;
  --s-48:48px; --s-52:52px; --s-56:56px; --s-64:64px; --s-72:72px; --s-80:80px;

  --pad:56px;
  --maxw:1440px;

  --ease:cubic-bezier(.2,.8,.2,1);
  /* Material's 'standard' pace for a hover elevation change: ~250ms, decelerating. */
  --lift:.25s var(--ease);
  --lift-card:.18s var(--ease);

  --f-latin:"FiraGO","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-arabic:"IBM Plex Sans Arabic","FiraGO",system-ui,sans-serif;
  --f-body:var(--f-arabic);
}

/* Latin-script languages take the Latin face; the Arabic face is the
   default because three of the five languages are written in it. Keyed
   on `dir` rather than on `lang`, so Turkish — Latin script but not
   English — is covered without a second selector to keep in step, and
   Persian correctly stays on IBM Plex Sans Arabic. header.php sets the
   attribute from the language, not from the WordPress locale. */
html[dir="ltr"]{ --f-body:var(--f-latin); }

/* ---- Dark, the default ---- */
:root,
html[data-palette="dark"]{
  /*
   * The ground is a desaturated navy ramp, not the near-black it started as.
   * #07022B sat at L=0.0026 — dark enough that the cards had almost nothing
   * behind them (a 1.086:1 step) and the whole screen read as one sheet.
   * Each step here is the same hue mixed a few per cent toward the text, so
   * the ramp lightens and desaturates together the way a dark theme should,
   * and the card now stands off the page at 1.16:1 while body text still
   * runs at 14.5:1.
   */
  --bg:#1B173E;
  --panel:#282449;
  --panel-2:#120E35;
  --text:#EAEDF9;
  --text70:rgba(234,237,249,.7);
  --muted:rgba(234,237,249,.45);
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.08);
  --ctl-line:rgba(255,255,255,.28);
  --btn-soft-bg:rgba(255,255,255,.24);
  --btn-soft-hover:rgba(255,255,255,.34);
  --btn-soft-ink:#fff;
  /* The segmented control and the converter's result field invert between
     the themes rather than just re-tinting, so they carry their own tokens
     instead of leaning on --accent. */
  --seg-on-bg:#D4EB3B;
  --seg-on-ink:#07022B;
  --seg-off-ink:#EAEDF9;
  --conv-out-bg:rgba(52,70,252,.22);
  --conv-out-ink:#D4EB3B;
  --accent:#D4EB3B;
  --on-accent:#07022B;
  --accent-soft:rgba(212,235,59,.14);
  --up:#D4EB3B;
  --down:#FF8FC0;
  --foot-bg:#110D34;
  --pop-bg:#1B173E;
  --pop-line:rgba(255,255,255,.18);
  --card-hover:rgba(108,123,255,.14);
  --shadow-card:0 26px 50px rgba(7,2,43,.30),0 8px 18px rgba(7,2,43,.18);
  --shadow-lift:0 16px 32px -6px rgba(0,0,0,.55),0 6px 12px -4px rgba(0,0,0,.40);
  --shadow-rest:0 2px 6px rgba(7,2,43,.10);
  --shadow-pop:0 18px 40px rgba(0,0,0,.55);
  --aurora-op:.36;
  --quote-bg:rgba(52,70,252,.22);
  --quote-ink:#EAEDF9;
  --quote-label:rgba(234,237,249,.45);
  /* The glossary index and the comment discs swap colour with the theme in
     ways the accent tokens cannot express: the index chip is a white wash on
     navy but a blue wash on frost, and the discs carry category colours. */
  --gloss-bg:rgba(255,255,255,.14);
  --gloss-ink:#EAEDF9;
  --chart-grid-ink:rgba(255,255,255,.35);
  /* The article rail's rate card is a blue wash, not a plain panel, and its
     button and the share pill are the lightest surface on it in dark but the
     darkest in light — an inversion no accent token expresses. */
  --rail-bg:rgba(52,70,252,.22);
  --rail-line:rgba(52,70,252,.45);
  --rail-btn-bg:#EAEDF9;
  --invert-bg:#EAEDF9;
  --invert-ink:#07022B;
  --ava-1:#6C7BFF;
  --ava-2:#7FD7C4;
  --ava-3:#F2A65A;
  --news-bg:rgba(52,70,252,.10);
  --news-line:rgba(52,70,252,.45);

  --cat-dinar:#5FA8E8;
  --cat-hard:#6C7BFF;
  --cat-regional:#7FD7C4;
  --cat-gold:#D9B44A;
  --cat-crypto:#FF9F6E;
  --cat-other:#9BA7C4;
}

html[data-palette="light"]{
  /*
   * Cloud, the brand's own "default light page surface" — not Frost, and not
   * the near-white this had drifted to.
   *
   * At #FBFAFF the page and the white cards were 1.04:1 apart, which is no
   * separation at all: every card, the map panel and the rate table floated
   * with nothing behind them and the whole screen read as one flat sheet with
   * a faint pink cast. Cloud is cooler and puts a real step behind the cards
   * (1.17:1) while still keeping body text at 17:1.
   *
   * 14 Sep 2026: the ground is now a neutral off-white instead of Cloud, at the
   * owner's request (a Volt tint was tried first). Kept a step below white so
   * the cards still separate.
   */
  --bg:#F8F8F5;
  --panel:#FFFFFF;
  --panel-2:#FFFFFF;
  --text:#07022B;
  --text70:rgba(7,2,43,.64);
  --muted:rgba(7,2,43,.40);
  --line:rgba(7,2,43,.12);
  --line-soft:rgba(7,2,43,.07);
  --ctl-line:rgba(7,2,43,.24);
  --btn-soft-bg:rgba(7,2,43,.08);
  --btn-soft-hover:rgba(7,2,43,.14);
  --btn-soft-ink:#07022B;
  --seg-on-bg:#07022B;
  --seg-on-ink:#EAEDF9;
  --seg-off-ink:#3446FC;
  --conv-out-bg:#DDE1FF;
  --conv-out-ink:#3446FC;
  --accent:#3446FC;
  --on-accent:#FFFFFF;
  /* Blue-100, not blue-50. These tints were drawn to lift off a near-white
     page; against Cloud they landed at 1.03:1 and vanished. One step down
     restores the separation the design intended, using a colour the light
     palette already carries for the quote and rail blocks. */
  --accent-soft:#DDE1FF;
  --up:#3446FC;
  --down:#7A2E6A;
  --foot-bg:#07022B;      /* the footer band is navy in both themes */
  --pop-bg:#FFFFFF;
  --pop-line:rgba(7,2,43,.14);
  --card-hover:rgba(108,123,255,.14);
  --shadow-card:0 26px 50px rgba(7,2,43,.22),0 8px 18px rgba(7,2,43,.10);
  --shadow-lift:0 16px 32px -6px rgba(7,2,43,.30),0 6px 12px -4px rgba(7,2,43,.18);
  --shadow-rest:0 2px 6px rgba(7,2,43,.10);
  --shadow-pop:0 18px 40px rgba(7,2,43,.22);
  --aurora-op:.30;
  --quote-bg:#DDE1FF;
  --quote-ink:#07022B;
  --quote-label:rgba(7,2,43,.40);
  --gloss-bg:#DDE1FF;
  --gloss-ink:#3446FC;
  --chart-grid-ink:rgba(7,2,43,.18);
  --rail-bg:#DDE1FF;
  --rail-line:rgba(52,70,252,.22);
  --rail-btn-bg:#FFFFFF;
  --invert-bg:#07022B;
  --invert-ink:#EAEDF9;
  --ava-1:#2B3A8C;
  --ava-2:#1E7F6B;
  --ava-3:#B45A12;
  --news-bg:#DDE1FF;
  --news-line:rgba(52,70,252,.30);

  --cat-dinar:#1F6FA8;
  --cat-hard:#2B3A8C;
  --cat-regional:#1E7F6B;
  --cat-gold:#9A7B18;
  --cat-crypto:#C4551F;
  --cat-other:#5A6B8C;
}

/* ============================================================ 3. BASE */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/*
 * `[hidden]` must beat a component's own display.
 *
 * The attribute's UA rule is `[hidden]{display:none}` at specificity 0,1,0 —
 * any class that sets `display` outranks it. `.dv-off{display:flex}` therefore
 * kept every filtered-out office card on screen. Everything on this site that
 * toggles visibility does it with `el.hidden`, so this is load-bearing.
 */
[hidden]{display:none!important}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-size:16px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto}
img{border-style:none}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0}

:focus-visible{outline:2px solid var(--hover-ink);outline-offset:2px;border-radius:var(--r-6)}

.dv-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.dv-skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:200;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:var(--r-10)}
.dv-skip:focus{clip:auto;clip-path:none;width:auto;height:auto;margin:0;overflow:visible}

.dv-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/*
 * Numbers. Latin digits, tabular so a column does not shimmer, and isolated
 * so a leading sign stays on the correct end in RTL — without the isolate,
 * "−0.06%" renders as "0.06%−".
 */
.dv-num{font-family:var(--f-latin);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

/*
 * A block-level figure aligns with the page, not with itself.
 *
 * `.dv-num` sets `direction:ltr` so the digits and any leading sign order
 * correctly. On an *inline* run that is all it does. On a **block** it also
 * redefines what `text-align:start` means — start becomes the left edge —
 * so the 168px hero figure sat at the left of a right-to-left page. The
 * reference sets these blocks to `text-align:right` explicitly, and that is
 * what these two rules reproduce for each direction.
 */
html[dir="rtl"] .dv-fig{text-align:right}
html[dir="ltr"] .dv-fig{text-align:left}
.dv-code{font-family:var(--f-latin);direction:ltr;unicode-bidi:isolate}
/*
 * A code chip is a fixed-width box flipped to LTR, so its logical `start` is
 * its own left edge — the opposite end from where an RTL column starts. In the
 * rate board that left "USD" sitting 32px inside the column while the "Currency"
 * heading sat flush against it. Pin the text to the physical side the column
 * actually starts on.
 */
html[dir="rtl"] .dv-code{text-align:right}
html[dir="ltr"] .dv-code{text-align:left}

/*
 * Block links take the page's text colour, not the link colour. Every card
 * and row is an <a> wrapping its own typography; left to the rule above they
 * inherit Electric Blue on navy, which made the rate board read as an empty
 * column.
 */
.dv-board__row,.dv-post,.dv-lead,.dv-rail__row,.dv-cityrow,.dv-citycard,
.dv-ser__card,.dv-ser__navcard,.dv-head__logo,.dv-menu__a,.dv-relcard,
.dv-poplink,.dv-foot__col a,.dv-part,.dv-inline{color:var(--text);text-decoration:none}
.dv-board__row:hover,.dv-post:hover,.dv-lead:hover,.dv-rail__row:hover,
.dv-cityrow:hover,.dv-citycard:hover,.dv-ser__card:hover,.dv-ser__navcard:hover,
.dv-head__logo:hover,.dv-relcard:hover,.dv-poplink:hover,.dv-inline:hover{text-decoration:none}

/* ============================================================ 4. PRIMITIVES */

.dv-eyebrow{font-size:15px;font-weight:700;color:var(--accent);line-height:1.5}
.dv-h1{font-size:52px;line-height:1.22;font-weight:700;letter-spacing:-.01em}
.dv-h2{font-size:28px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.dv-h3{font-size:24px;line-height:1.25;font-weight:700}
.dv-dek{font-size:18px;line-height:1.8;color:var(--text70)}
.dv-meta{font-size:14px;font-weight:600;color:var(--text70)}
.dv-label{font-size:13px;font-weight:700;color:var(--muted)}

/* The boxed highlight inside a lede — Electric Blue, white text. */
.dv-mark-link{background:var(--blue);color:#fff;font-weight:inherit;font-size:inherit;border-radius:var(--r-8);padding:0 10px;line-height:1.45;display:inline-block;transition:background .18s var(--ease)}
.dv-mark-link:hover{background:var(--blue);color:#fff;opacity:.88;text-decoration:none}

/* ---- Buttons ---- */
.dv-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);
  height:44px;padding-inline:22px;border-radius:var(--r-pill);
  font-size:15px;font-weight:700;line-height:1.5;letter-spacing:-.005em;white-space:nowrap;
  transition:transform var(--lift),box-shadow var(--lift),background .18s var(--ease);
}
/* Elevation on hover: 3px up, a key shadow that reaches further plus a tighter ambient one (Material 2dp → 8dp). Colour never changes. */
.dv-btn:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.dv-btn:active{transform:translateY(-1px);box-shadow:0 3px 8px rgba(7,2,43,.22);transition-duration:.1s}
.dv-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dv-btn:disabled,.dv-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ============================================================ 3 Sep 2026 additions */

/* Home: the sentence under the market buy/sell naming how many boards it came from. */
.dv-hero__srcnote{font-size:13px;font-weight:600;color:var(--muted);margin-block-start:var(--s-16)}

/* Rate board page */
.dv-rates__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-16);margin-block-start:var(--s-20)}
.dv-rates__tile{display:flex;flex-direction:column;gap:var(--s-10)}
.dv-rates__bs{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-24)}
.dv-rates__bs>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.dv-rates__l{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dv-rates__v{font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
.dv-rates__notes{list-style:none;padding:0;margin:var(--s-16) 0 0;display:grid;gap:var(--s-10);max-width:72ch}
.dv-rates__notes li{position:relative;padding-inline-start:var(--s-20);font-size:15px;line-height:1.7;color:var(--text70)}
.dv-rates__notes li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.dv-board__grid.dv-board__grid--5{grid-template-columns:2fr 1fr 1fr 1fr 1fr}
.dv-board__grid.dv-board__grid--4{grid-template-columns:2fr 1fr 1fr 1fr}
.dv-board__row--static{cursor:default}
.dv-board__unit{font-size:12px;color:var(--muted);font-weight:600;margin-inline-start:6px}
.dv-legend{display:flex;flex-wrap:wrap;gap:var(--s-16);font-size:13px;font-weight:600;color:var(--muted)}
.dv-legend__i{display:inline-flex;align-items:center;gap:8px}

/* Office cards: address, and the "no board" state. */
.dv-off__addr{font-size:13px;line-height:1.6;color:var(--text70);margin-block:var(--s-6) var(--s-10)}
.dv-off__noboard{font-size:13px;font-weight:600;color:var(--muted);margin:0}
.dv-off__hours{font-size:13px;color:var(--text70);margin-block-start:var(--s-6)}

/* Cities: the pending strip under the table. */
.dv-cities__pending{margin-block-start:var(--s-32);padding-block-start:var(--s-24);border-block-start:1px solid var(--line-soft)}
/* These are city names a reader scans, not the metadata tags the same classes
   carry on a series card, so they are set a step up. Scoped here rather than
   on .dv-tag / .dv-meta, which are measured against the reference elsewhere. */
.dv-cities__pending .dv-tag{height:30px;padding-inline:13px;font-size:14px}
.dv-cities__pending .dv-meta{font-size:15px;line-height:1.7}

/* Signup, step two. */
.dv-news__chosen{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--text)}
.dv-linkbtn{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:700;color:var(--accent);cursor:pointer;text-decoration:underline}
.dv-linkbtn:hover{color:var(--hover-ink)}
.dv-error{font-size:13px;font-weight:600;color:var(--down,#ff6b6b);margin-block-start:var(--s-10)}
.dv-notice--err{background:rgba(255,107,107,.12)}
.dv-notice--err .dv-notice__i{color:var(--down,#ff6b6b)}
.dv-news .dv-notice{margin-block:var(--s-12)}

/* Asset pages */
.dv-pair__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-16);margin-block-start:var(--s-20)}
.dv-pair__about{max-width:70ch;font-size:16px;line-height:1.75;color:var(--text70)}
.dv-pair__karat{display:grid;grid-template-columns:1fr auto auto;gap:var(--s-8) var(--s-20);align-items:baseline}
.dv-pair__karat>span{padding-block:10px;border-block-end:1px solid var(--line-soft)}
.dv-pair__karat .dv-code{color:var(--muted)}

/* About page */
.dv-about{display:grid;gap:var(--s-48);max-width:76ch}
.dv-about section{scroll-margin-top:96px}
.dv-about h2{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-block-end:var(--s-12)}
.dv-about p{font-size:16px;line-height:1.8;color:var(--text70)}
.dv-faq details{border-block-end:1px solid var(--line-soft);padding-block:var(--s-12)}
.dv-faq summary{cursor:pointer;font-size:17px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:var(--s-16)}
.dv-faq summary::-webkit-details-marker{display:none}
.dv-faq summary::after{content:"+";color:var(--muted);font-weight:700}
.dv-faq details[open] summary::after{content:"−"}
.dv-faq details p{margin-block-start:var(--s-8)}

@media (prefers-reduced-motion:reduce){.dv-btn:hover,.dv-btn:active{transform:none}}
.dv-btn--sm{height:36px;padding-inline:16px;font-size:13px}
/* Primary is Electric Blue and lifts on hover — it never darkens. */
.dv-btn--primary{background:var(--blue);color:#fff;box-shadow:0 3px 10px rgba(52,70,252,.32)}
/* Client decision, 4 Sep 2026: buttons lift on hover and keep their colour. */
.dv-btn--primary:hover{background:var(--blue);color:#fff;box-shadow:0 16px 32px -6px rgba(52,70,252,.45),0 6px 12px -4px rgba(52,70,252,.30)}
/*
 * Volt, literally, in both themes.
 *
 * `--accent` is the *semantic* accent and becomes Electric Blue on the light
 * theme — which turned this button Electric Blue on the Electric Blue band,
 * i.e. invisible. The design keeps the primary CTA Volt on both grounds, and
 * the band is blue on both grounds, so the literal colour is the correct one.
 */
.dv-btn--volt{background:var(--volt);color:var(--navy)}
.dv-btn--volt:hover{background:var(--volt);color:var(--navy)}
.dv-btn--soft{background:var(--btn-soft-bg);color:var(--btn-soft-ink)}
.dv-btn--soft:hover{background:var(--btn-soft-bg);color:var(--btn-soft-ink)}
.dv-btn--alt{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.dv-btn--alt:hover{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-lift)}

/* ---- Cards ---- */
.dv-card{background:var(--panel);border-radius:var(--r-24);padding:var(--s-24)}
.dv-card--lift{transition:transform var(--lift),box-shadow var(--lift),background var(--lift)}
.dv-card--lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}

/* ---- Pills, chips, tags ---- */
.dv-chip{
  display:inline-flex;align-items:center;gap:6px;height:36px;padding-inline:16px;
  border-radius:var(--r-pill);color:var(--seg-off-ink);border:1px solid var(--line);
  font-size:13px;font-weight:700;white-space:nowrap;
  transition:color var(--lift),border-color var(--lift),background var(--lift),transform var(--lift);
}
.dv-chip:hover:not(:disabled){color:var(--hover-ink);border-color:var(--hover-ink);text-decoration:none}
.dv-chip[aria-pressed="true"],.dv-chip.is-on{background:var(--seg-on-bg);color:var(--seg-on-ink);border-color:transparent}
.dv-chip:disabled{opacity:.3;cursor:not-allowed}
.dv-chips{display:flex;flex-wrap:wrap;gap:var(--s-8)}
/* The larger city filter pill on the offices page: 40px, 15/700. */
.dv-chip--lg{height:40px;font-size:15px;padding-inline:21px}

.dv-tag{display:inline-flex;align-items:center;height:24px;padding-inline:11px;border-radius:var(--r-pill);background:var(--line-soft);color:var(--text70);font-size:12px;font-weight:700;white-space:nowrap}
.dv-tag--muted{color:var(--muted)}

/* An outline action pill — directions / contact / whatsapp. */
.dv-act{display:inline-flex;align-items:center;justify-content:center;height:34px;padding-inline:14px;border-radius:var(--r-pill);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--text70);transition:color var(--lift),border-color var(--lift)}
.dv-act:hover{color:var(--hover-ink);border-color:var(--hover-ink);text-decoration:none}

/* Segmented control — 1 / 100, email / mobile. */
.dv-seg{display:inline-flex;padding:4px;gap:2px;background:var(--line);border-radius:var(--r-pill)}
.dv-seg__a{display:inline-flex;align-items:center;height:28px;padding-inline:14px;border-radius:var(--r-pill);font-size:13px;font-weight:700;color:var(--seg-off-ink);white-space:nowrap;transition:all var(--lift)}
.dv-seg__a:hover{color:var(--hover-ink);text-decoration:none}
.dv-seg__a.is-on,.dv-seg__a[aria-pressed="true"]{background:var(--seg-on-bg);color:var(--seg-on-ink)}
.dv-seg__a.is-on:hover{color:var(--seg-on-ink)}

/* Category dot. */
.dv-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.dv-dot--dinar{background:var(--cat-dinar)}
.dv-dot--hard{background:var(--cat-hard)}
.dv-dot--regional{background:var(--cat-regional)}
.dv-dot--gold{background:var(--cat-gold)}
.dv-dot--crypto{background:var(--cat-crypto)}
.dv-dot--other{background:var(--cat-other)}

/* Up / down — never the traffic-light pair. */
.dv-up{color:var(--up)}
.dv-down{color:var(--down)}
.dv-flat{color:var(--muted)}

/*
 * Signed figures inside right-to-left text. A leading "+" or "−" is bidi
 * neutral and gets flushed to the far end of the run, so every figure is
 * isolated as its own left-to-right run.
 */
.dv-up,.dv-down,.dv-flat,.dv-cap,.dv-board__rate,.dv-hero__statv,
.dv-rail__v,.dv-ladder__v,.dv-cityrow__v,.dv-off__qv,.dv-stat__v,
.dv-citycard__v{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .dv-cap{justify-content:flex-end}

/* Change capsule: "Today ▲ +0.49% · 754 dinars". */
.dv-cap{display:inline-flex;align-items:center;gap:8px;height:36px;padding-inline:14px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-size:15px;line-height:1}
.dv-cap--down{background:color-mix(in srgb,var(--down) 14%,transparent);color:var(--down)}
.dv-cap--flat{background:var(--line-soft);color:var(--muted)}
.dv-cap__label{font-weight:600;opacity:.75}
.dv-cap__pct{font-weight:700}
.dv-cap__sep{opacity:.45}
.dv-cap__abs{font-weight:600}

/* A verified tick. */
.dv-tick{width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1}

/* A search field with its glyph. */
.dv-search{display:flex;align-items:center;gap:10px;height:52px;padding-inline:20px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--muted);min-width:0}
.dv-search--sm{height:46px}
.dv-search input{flex:1 1 0;width:0;min-width:0;border:0;background:none;outline:none;font-size:15px;font-weight:600;color:var(--text)}
.dv-search--lg input,.dv-search--lg input::placeholder{font-size:16px}
.dv-search input::placeholder{color:var(--muted);font-weight:600}

/* ============================================================ 5. SHELL */

.dv-head{position:relative;z-index:30}
.dv-head__in{display:flex;align-items:center;gap:var(--s-40);padding-block:22px}
.dv-head__left{display:flex;align-items:center;gap:var(--s-40);min-width:0}
.dv-head__right{margin-inline-start:auto;display:flex;align-items:center;gap:var(--s-16)}

.dv-logo{display:inline-flex;align-items:center;gap:9px;color:var(--text)}
.dv-mark{display:block;height:var(--mark,26px);width:auto}
.dv-logo__word{font-size:var(--type,21px);font-weight:700;letter-spacing:-.01em;line-height:1}

.dv-nav{display:flex;align-items:center;gap:var(--s-24)}
.dv-nav__a{font-size:16px;font-weight:600;line-height:1.5;color:var(--text70);transition:color var(--lift)}
.dv-nav__a:hover{color:var(--hover-ink);text-decoration:none}
.dv-nav__a.is-on{color:var(--text)}

.dv-live{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;line-height:1.5;color:var(--accent)}
.dv-live__dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.dv-live.is-stale .dv-live__dot{background:var(--muted)}
/* The four freshness states. Green belongs to `live` alone — a green dot is
   read as "this number is moving", and at 22:00 over a 14:39 reading it was
   the single most misleading pixel on the page. `recent` keeps the accent
   text with a neutral dot; `closed` and `stale` go muted throughout. */
.dv-live--recent{color:var(--accent)}
.dv-live--closed,.dv-live--stale{color:var(--muted)}
.dv-live--live .dv-live__dot{background:var(--accent)}
.dv-live__sep{opacity:.5;font-weight:400}

.dv-themetog{width:36px;height:36px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ctl-line);color:var(--text);transition:color var(--lift),border-color var(--lift),transform var(--lift)}
.dv-themetog:hover{background:rgba(108,123,255,.16)}

/*
 * The numeral switch. Same 36px control as the theme toggle, but it carries
 * a sample of the set rather than an icon, so it is a pill that grows with
 * its three characters instead of a fixed circle. The sample is isolated
 * left-to-right: "١٢٣" is a number, and left to the paragraph direction it
 * would reorder against the button's own padding.
 */
.dv-digits{
  height:36px;min-width:36px;padding-inline:12px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-pill);border:1px solid var(--ctl-line);color:var(--text);
  font-size:14px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;
  transition:color var(--lift),border-color var(--lift),background var(--lift);
}
.dv-digits:hover{background:rgba(108,123,255,.16);color:var(--hover-ink);border-color:var(--hover-ink)}

.dv-langpill{position:relative}
.dv-langpill__btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding-inline:16px;border-radius:var(--r-pill);border:1px solid var(--ctl-line);color:var(--text);font-size:14px;font-weight:700;line-height:1.5;transition:all var(--lift)}
.dv-langpill__btn:hover{color:var(--hover-ink);border-color:var(--hover-ink)}
.dv-langpill__menu{position:absolute;inset-block-start:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:150px;padding:6px;border-radius:var(--r-14);background:var(--pop-bg);border:1px solid var(--pop-line);box-shadow:var(--shadow-card)}
.dv-langpill__item{display:block;padding:9px 12px;border-radius:var(--r-10);font-size:14px;font-weight:600;color:var(--text70)}
.dv-langpill__item:hover{background:var(--line-soft);color:var(--hover-ink);text-decoration:none}
.dv-langpill__item.is-on{color:var(--accent)}

.dv-burger{display:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);color:var(--text);align-items:center;justify-content:center;flex-direction:column;gap:4px}
.dv-burger__bar{display:block;width:16px;height:2px;background:currentColor;border-radius:2px}

.dv-menu{position:fixed;inset:0;z-index:100;background:var(--bg);padding:var(--s-20);display:flex;flex-direction:column;gap:var(--s-24);overflow-y:auto}
.dv-menu[hidden]{display:none}
.dv-menu__bar{display:flex;align-items:center;justify-content:space-between}
.dv-menu__x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);color:var(--text);display:inline-flex;align-items:center;justify-content:center}
.dv-menu__nav{display:flex;flex-direction:column;gap:2px}
.dv-menu__a{font-size:22px;font-weight:700;padding-block:12px;border-block-end:1px solid var(--line-soft)}
.dv-menu__a:hover{color:var(--hover-ink)}
.dv-menu__a.is-on{color:var(--accent)}
.dv-menu__row{display:flex;flex-direction:column;gap:var(--s-8)}
.dv-menu__label{font-size:13px;font-weight:700;color:var(--muted)}
.dv-menu__pills{display:flex;flex-wrap:wrap;gap:var(--s-8);align-items:center}

/* Breadcrumbs — 14/600 muted, "›" separators. */
.dv-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--muted);padding-block-start:var(--s-24)}
.dv-crumbs__a{color:var(--muted)}
.dv-crumbs__a:hover{color:var(--hover-ink);text-decoration:none}
.dv-crumbs__now{color:var(--text70)}

.dv-page{padding-block:var(--s-40) var(--s-64)}
.dv-page--top{padding-block:var(--s-52) var(--s-64)}
.dv-sec{margin-block-start:var(--s-56)}

/* ============================================================ 6. HOME */

.dv-hero{position:relative;padding-block:var(--s-56) var(--s-48)}
/* 852 + 56 + 420 = 1328 */
.dv-hero__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--s-56);align-items:start}

/*
 * Aurora. Blurred blobs on a layer that fades at both inline edges and at
 * the bottom, so it bleeds under the next section without a seam.
 *
 * `filter:blur()` on the layer rather than per blob: one composited pass,
 * and the blobs blend into each other instead of each getting a halo.
 * `mask-composite` makes both fades apply at once; where it is not
 * understood the layer renders unmasked, which is softer, not broken.
 *
 * The handoff draws this as SVG with feGaussianBlur, an SVG luminance mask
 * and SMIL loops. Built that way, `preserveAspectRatio="slice"` scaled the
 * 1440-wide viewBox to cover the box and pushed every ellipse 400px off the
 * left edge, and the mask relied on mix-blend-mode inside a <mask>, which
 * engines disagree about. This also mirrors itself in RTL for free.
 */
.dv-aurora{display:none!important}
.dv-aurora--retired{
  position:absolute;inset-block-start:0;inset-inline:0;height:calc(100% + 320px);
  z-index:0;pointer-events:none;opacity:var(--aurora-op);overflow:hidden;filter:blur(46px);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 18%,#000 82%,transparent 100%),
                     linear-gradient(to bottom,#000 0,#000 62%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 18%,#000 82%,transparent 100%),
                     linear-gradient(to bottom,#000 0,#000 62%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
/* Two loops per blob, as the reference does it: a long asymmetric drift and a
   slower opacity breath running at 0.8x the drift, so the field never repeats
   on a beat the eye can catch. The travel is a three-stop path — out, back
   past the origin, home — not a there-and-back. */
.dv-aurora__b{
  position:absolute;inset-inline-start:var(--x);inset-block-start:var(--y);
  width:var(--w);height:var(--h);
  background:radial-gradient(closest-side,rgba(var(--c),var(--o)),rgba(var(--c),0) 100%);
  animation:dv-drift var(--dur) cubic-bezier(.45,0,.55,1) infinite,
            dv-breathe var(--breath) cubic-bezier(.45,0,.55,1) infinite;
  will-change:transform,opacity;
}
@keyframes dv-drift{
  0%,100%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(var(--dx),-30px,0)}
  66%{transform:translate3d(calc(var(--dx) * -0.6),20px,0)}
}
@keyframes dv-breathe{0%,100%{opacity:.5}33%{opacity:1}66%{opacity:.7}}

.dv-hero__metarow{display:flex;align-items:center;gap:var(--s-16);min-height:36px}
.dv-hero__pair{font-size:15px;font-weight:700;color:var(--muted)}
/* 168 / .94 / −.04em */
.dv-hero__rate{font-size:148px;line-height:.94;font-weight:600;letter-spacing:-.035em;margin-block-start:var(--s-24);display:block}
.dv-hero__capsrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-16);margin-block-start:var(--s-24)}
.dv-hero__inline{font-size:16px;font-weight:600;color:var(--text70)}
.dv-hero__lede{font-size:18px;line-height:1.7;font-weight:500;max-width:48ch;margin-block-start:var(--s-24)}
.dv-board__grid[hidden],.dv-meta[hidden]{display:none!important}

.dv-hero__stats{display:flex;flex-direction:column}
.dv-hero__stat{display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);min-height:67px;border-block-end:1px solid var(--line-soft)}
.dv-hero__statl{font-size:15px;font-weight:500;line-height:1.5;color:var(--text70)}
.dv-hero__statv{font-size:24px;font-weight:700;line-height:1.5}
/* Home hero table only (4 Sep 2026): smaller, lighter figures. The asset
   pages share the stat classes and keep the original size. */
.dv-hero .dv-hero__stat{min-height:56px}
.dv-hero .dv-hero__statl{font-size:14px}
.dv-hero .dv-hero__statv{font-size:17px;font-weight:600}
.dv-hero__statv .dv-up,.dv-hero__statv .dv-down,.dv-hero__statv .dv-flat{color:var(--text);font-size:inherit;font-weight:inherit}
.dv-hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-12);margin-block-start:var(--s-32)}

/* ---- Chart + converter: 836 + 32 + 460 = 1328 ---- */
.dv-mainrow{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:var(--s-32);align-items:start}

.dv-panel{background:var(--panel);border-radius:var(--r-24);padding:var(--s-24);overflow:hidden}
.dv-panel__head{display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center;justify-content:space-between;margin-block-end:var(--s-20)}
.dv-panel__title{font-size:20px;font-weight:700}

/* The blue band bleeds to the card's edges from inside it. */
.dv-band{background:var(--blue);color:#fff;padding:var(--s-28);margin:var(--s-20) calc(var(--s-24) * -1) calc(var(--s-24) * -1);display:flex;flex-wrap:wrap;gap:var(--s-20);align-items:center;justify-content:space-between}
.dv-band__t{font-size:26px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:#fff;max-width:335px}
.dv-band__b{font-size:15px;font-weight:500;color:rgba(255,255,255,.86);margin-block-start:6px;max-width:396px}

/* ---- Converter ---- */
/*
 * 10px between the two fields, from a grid gap on the wrapper.
 *
 * It used to be `.dv-conv__field + .dv-conv__field{margin-block-start}`, and
 * that silently did nothing: the error paragraph sits between the two fields
 * in the markup, so they are never adjacent siblings and the fields rendered
 * flush against each other. The error is `hidden` and therefore generates no
 * box, so a gap on the wrapper spaces exactly the two visible fields.
 */
.dv-conv{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-10)}
.dv-conv__field{display:flex;align-items:center;gap:var(--s-8);height:56px;padding-inline:var(--s-16);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-16);min-width:0}
.dv-conv__input{flex:1 1 0;width:0;min-width:0;border:0;background:none;outline:none;font-size:26px;font-weight:700;font-family:var(--f-latin);direction:ltr;unicode-bidi:isolate;text-align:start;color:inherit}
.dv-conv__val{flex:1 1 0;min-width:0;font-size:26px;font-weight:700;font-family:var(--f-latin);direction:ltr;unicode-bidi:isolate}
.dv-conv__unit{font-size:15px;font-weight:600;color:var(--text70);white-space:nowrap}
.dv-conv__out{background:var(--conv-out-bg);border-color:transparent}
.dv-conv__out .dv-conv__val{color:var(--conv-out-ink)}
.dv-conv__out .dv-conv__unit{color:var(--text70)}
.dv-conv__acts{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-block-start:var(--s-16)}
.dv-conv__select{flex:0 0 auto;border:0;background:none;outline:none;font-size:15px;font-weight:600;color:var(--text70)}

/*
 * The full converter page.
 *
 * The pair picker is a real <select> — one control, keyboard and screen
 * reader native, and on a phone it opens the platform's own wheel. It is
 * given `appearance:none` and drawn as a chip so it reads as part of the
 * field instead of as a browser widget, and its background stays
 * transparent because the swap moves it between a plain field and the
 * tinted result field.
 */
.dv-conv__sel{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;max-width:52%;min-width:0}
.dv-conv__sel select{
  appearance:none;-webkit-appearance:none;
  max-width:100%;height:36px;padding-inline:14px 34px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:transparent;color:var(--text70);outline:none;
  font-size:14px;font-weight:700;line-height:1;cursor:pointer;
  text-overflow:ellipsis;
  transition:color var(--lift),border-color var(--lift);
}
.dv-conv__sel select:hover,.dv-conv__sel select:focus-visible{color:var(--hover-ink);border-color:var(--hover-ink)}
/* The dropped-open list is painted by the OS, which does not inherit the
   page palette — dark-on-dark without these two. */
.dv-conv__sel option,.dv-conv__sel optgroup{background:var(--panel);color:var(--text)}
.dv-conv__sel::after{
  content:"";position:absolute;inset-inline-end:14px;top:50%;
  width:7px;height:7px;margin-top:-5px;
  border:2px solid currentColor;border-width:0 2px 2px 0;
  transform:rotate(45deg);pointer-events:none;color:var(--muted);
}

.dv-conv__quick{margin-block-start:var(--s-16)}
.dv-conv__rate{
  margin-block-start:var(--s-20);padding-block-start:var(--s-16);
  border-block-start:1px solid var(--line-soft);
  font-size:14px;font-weight:600;line-height:1.6;color:var(--text70);
}

.dv-convpage{display:grid;gap:var(--s-24);align-items:start;margin-block-start:var(--s-32)}
.dv-convpage__note{margin-block-start:var(--s-24)}
@media (min-width:900px){
  .dv-convpage{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .dv-convpage__note{max-width:760px}
}

/* The ladder's head row is a column heading, not a first entry: it is
   sized down and cased up so the six figures under it read as the list. */
.dv-ladder{margin-block-start:var(--s-12)}
.dv-ladder__row--head{
  min-height:34px;border-block-end:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}

.dv-ladder__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);min-height:44px;border-block-end:1px solid var(--line-soft)}
.dv-ladder__row:last-child{border-block-end:0}
.dv-ladder__k{font-size:15px;color:var(--text70)}
.dv-ladder__v{font-size:15px;font-weight:700}

/* ---- Rate board ---- */
.dv-board__head{display:flex;flex-wrap:wrap;gap:var(--s-12);align-items:flex-start;justify-content:space-between;margin-block-end:var(--s-20)}
.dv-board__tools{display:flex;flex-wrap:wrap;gap:var(--s-12) var(--s-20);align-items:center}
.dv-board__ctl{display:flex;flex-wrap:wrap;gap:var(--s-8)}
.dv-board__unit{font-size:12px;color:var(--muted);font-weight:600;margin-inline-start:6px}
/* The hover wash needs room either side of the text, so the cells carry inline
   padding and the grid is pulled out by the same amount — the columns still
   line up with the heading and the card edge, but the highlight no longer
   starts on the first letter. Same 10px the reference uses on the city list. */
.dv-board__grid{display:grid;grid-template-columns:2fr 1.2fr .9fr .9fr .9fr 1fr;margin-inline:-10px}
.dv-board__hrow,.dv-board__row{display:contents}
.dv-board__cell{display:flex;align-items:center;gap:10px;min-width:0;padding-block:15px;padding-inline:10px;border-block-end:1px solid var(--line-soft)}
.dv-board__cell--h{font-size:13px;font-weight:700;color:var(--muted);padding-block:8px;border-block-end-color:var(--line)}
/* The subtitle row under the column heads: which currency the 1D/7D/30D
   percentages are measured in. It spans the three change columns, so it needs
   no border of its own — the head row above it already drew one. */
.dv-board__cell--sub{padding-block:0 6px;border-block-end:0;font-size:11px;font-weight:600;color:var(--muted)}
.dv-board__cell--terms{grid-column:span 3}
/* The board's change columns are set apart from the row's 17px name and rate:
   the design drops them to 14/700 so the colour, not the size, carries them. */
.dv-board__cell .dv-up,.dv-board__cell .dv-down,.dv-board__cell .dv-flat{font-size:14px;font-weight:700}
.dv-board__cell--num{justify-content:flex-end}
/* The name cell wraps so a row can carry a second line under its caption —
   the toman's dinar gloss. Without this the gloss's flex-basis:100% has
   nothing to wrap onto and the row just gets wider. */
.dv-board__cell--name{flex-wrap:wrap;row-gap:2px}
.dv-board__code{font-size:13px;font-weight:600;color:var(--muted);flex:0 0 56px}
.dv-board__name{font-size:17px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-board__rate{font-size:17px;font-weight:700}
.dv-board__row:hover .dv-board__cell{background:var(--card-hover)}
.dv-board__row:hover .dv-board__cell:first-child{border-start-start-radius:var(--r-12);border-end-start-radius:var(--r-12)}
.dv-board__row:hover .dv-board__cell:last-child{border-start-end-radius:var(--r-12);border-end-end-radius:var(--r-12)}
.dv-spark{display:block;width:100%;max-width:110px;height:24px}

/* The group heading row. The grid puts rows in `display:contents`, so a
   heading has to claim every track itself — 1/-1 rather than a cell. It
   carries the quoting note that used to be one page-wide subtitle sitting
   above rows it did not describe ("per 100 of each currency", over gold). */
.dv-board__grouph{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-12);flex-wrap:wrap;padding-block:18px 8px;padding-inline:10px;border-block-end:1px solid var(--line)}
.dv-board__grouph:first-child{padding-block-start:4px}
.dv-board__grouphl{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:var(--text)}
.dv-board__groupnote{font-size:12px;font-weight:600;color:var(--muted)}

/* "derived" beside a metal row: the mithqal price is calculated from spot,
   not read off an Iraqi gold board, and only the methodology page said so. */
.dv-flag{display:inline-flex;align-items:center;font-size:11px;font-weight:700;line-height:1;
  padding:3px 6px;border-radius:var(--r-6,6px);white-space:nowrap}
.dv-flag--derived{background:var(--line-soft);color:var(--muted)}
.dv-flag--stale{background:var(--warn-soft,rgba(214,158,46,.16));color:var(--warn,#9a6b00)}

/* A city whose only board has gone stale. Muted rather than alarming: it is
   an absence of data, not a fault, and it sits beside cards carrying real
   numbers that should keep the reader's attention. */
.dv-rates__tile--nofresh{opacity:.85}
.dv-rates__nofresh{font-size:15px;font-weight:600;color:var(--muted);margin-block:var(--s-8)}

/* The dinar gloss under a dollar-anchored row: the toman priced per thousand,
   because per one it is 0.006959 and per one it is unreadable. */
.dv-board__gloss{display:block;flex-basis:100%;font-size:11px;font-weight:600;color:var(--muted)}

/* ============================================================ 7. POPULAR + NEWSLETTER */

/* 613 + 40 + 675 = 1328 */
.dv-tail{display:grid;grid-template-columns:minmax(0,1fr) 675px;gap:var(--s-40);align-items:start;padding-block:var(--s-56) var(--s-64)}
.dv-pop__t{font-size:13px;font-weight:700;color:var(--muted);margin-block-end:var(--s-12)}
.dv-poplink{display:block;padding-block:11px;border-block-end:1px solid var(--line-soft);font-size:15px;font-weight:600}
.dv-poplink:hover{color:var(--hover-ink)}

.dv-news{background:var(--news-bg);border:1px solid var(--news-line);border-radius:var(--r-24);padding:var(--s-28)}
.dv-news__t{font-size:24px;font-weight:700;line-height:1.4;letter-spacing:-.01em}
.dv-news__b{font-size:14px;line-height:1.75;color:var(--text70);margin-block:var(--s-8) var(--s-16)}
.dv-news__row{display:flex;flex-wrap:wrap;gap:var(--s-10);align-items:stretch;margin-block-start:var(--s-14)}
.dv-news__row .dv-btn{height:46px;border-radius:var(--r-14)}
/* Radius 14 to match the submit beside it, and the row runs left-to-right
   so the dialling code sits on the visual left of an LTR number — the order
   a phone number is actually read in, in any language. */
.dv-news__field{flex:1 1 220px;min-width:0;display:flex;align-items:center;height:46px;padding-inline:var(--s-16);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-14)}
.dv-news__field.has-prefix{direction:ltr}
.dv-news__prefix{font-family:var(--f-latin);font-size:13px;font-weight:700;color:var(--text70);direction:ltr;unicode-bidi:isolate;padding-inline-end:10px;flex:0 0 auto;order:-1}
.dv-news__input{flex:1 1 0;width:0;min-width:0;border:0;background:none;outline:none;font-size:15px;color:var(--text)}
.dv-news__input::placeholder{color:var(--muted)}
.dv-news__note{font-size:12px;font-weight:600;color:var(--muted);margin-block-start:var(--s-16)}

/* ============================================================ 8. FOOTER */

.dv-foot{background:var(--foot-bg);color:var(--cloud)}
.dv-foot__in{padding-block:var(--s-56) var(--s-28)}
/* 269.5 + 5 × 179.7, gap 32 = 1328 */
.dv-foot__grid{display:grid;grid-template-columns:1.5fr repeat(5,minmax(0,1fr));gap:var(--s-40) var(--s-32)}
.dv-foot__blurb{font-size:14px;line-height:1.75;color:rgba(234,237,249,.62);margin-block:var(--s-16) var(--s-20)}
.dv-foot__social{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-block-end:var(--s-20)}
.dv-foot__social a{font-size:13px;font-weight:600;color:rgba(234,237,249,.75);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-pill);padding:5px 12px}
.dv-foot__social a:hover{color:var(--hover-ink);border-color:var(--hover-ink);text-decoration:none}
.dv-foot__langs{display:flex;flex-wrap:wrap;gap:var(--s-10);align-items:center;font-size:14px}
.dv-foot__langs .dv-label{color:rgba(234,237,249,.45)}
.dv-foot__langs a{color:rgba(234,237,249,.7);font-weight:600}
.dv-foot__langs a:hover{color:var(--hover-ink)}
.dv-foot__col h3{font-size:12px;font-weight:700;color:rgba(234,237,249,.45);margin-block-end:var(--s-14)}
.dv-foot__col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.dv-foot__col a{font-size:14px;font-weight:400;color:rgba(234,237,249,.7)}
.dv-foot__col a:hover{color:var(--hover-ink);text-decoration:none}
.dv-foot__bot{display:flex;flex-wrap:wrap;gap:var(--s-16);justify-content:space-between;align-items:center;margin-block-start:var(--s-40);padding-block-start:var(--s-20);border-block-start:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:400;color:rgba(234,237,249,.45)}
.dv-foot__legal{display:flex;flex-wrap:wrap;gap:var(--s-16)}
.dv-foot__legal a{color:inherit}
.dv-foot__legal a:hover{color:var(--hover-ink)}

/* ============================================================ 9. BLOG / ARTICLE */

/* 900 + 48 + 380 = 1328 */
.dv-blog__grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s-48);align-items:start}
.dv-blog__topics{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-block:var(--s-16) var(--s-32)}

.dv-post__topic{font-size:12px;font-weight:700;color:var(--accent)}
/* Blog cards: no movement on hover, the title turns the rich blue. */
.dv-lead{display:block;padding-block-end:var(--s-32);border-block-end:1px solid var(--line-soft)}
.dv-lead__t{font-size:56px;line-height:1.24;font-weight:700;letter-spacing:-.01em;margin-block:var(--s-12)}
.dv-lead:hover .dv-lead__t{color:color-mix(in srgb,var(--hover-ink) 50%,var(--text))}
.dv-lead__d{font-size:20px;line-height:1.8;color:var(--text70);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dv-lead__m{font-size:13px;font-weight:600;color:var(--muted);margin-block-start:var(--s-12)}

.dv-post{display:flex;gap:var(--s-24);align-items:flex-start;justify-content:space-between;padding-block:var(--s-24);border-block-end:1px solid var(--line-soft)}
.dv-post__body{min-width:0}
.dv-post__t{font-size:28px;line-height:1.42;font-weight:700;letter-spacing:-.01em;margin-block:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/*
 * Half-way between the hover ink and the body ink, not either one neat.
 *
 * On a 28px headline both neat colours are a jolt, and each fails in one
 * palette: --blue is 3.26:1 on the dark ground, --hover-ink 3.04:1 on the
 * light one. Because --hover-ink is a fixed periwinkle and --text flips with
 * the palette, mixing them halfway lands at 7.8:1 light and 10.1:1 dark on
 * its own — a shift you can see without one you feel.
 */
.dv-post:hover .dv-post__t{color:color-mix(in srgb,var(--hover-ink) 50%,var(--text))}
.dv-post__d{font-size:16px;line-height:1.8;color:var(--text70);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dv-post__date{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--muted);padding-block-start:2px}

/* The live-rate card that appears in every rail. */
.dv-ratecard{border-radius:var(--r-20)}
.dv-ratecard--sm{background:var(--rail-bg);border:1px solid var(--rail-line)}
/* The pill is the lightest surface on the card in both themes — cloud on
   navy, white on lavender — so its ink is navy either way, never inverted. */
.dv-ratecard--sm .dv-btn--soft{background:var(--rail-btn-bg);color:#07022B;font-size:14px}
.dv-ratecard__meta{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
.dv-ratecard__big{font-size:44px;line-height:1.3;font-weight:700;letter-spacing:-.03em;margin-block:var(--s-8)}
.dv-ratecard__big--sm{font-size:40px}
.dv-ratecard__bs{font-size:13px;font-weight:600;color:var(--text70)}
.dv-ratecard__rows{margin-block-start:var(--s-20);border-block-start:1px solid var(--line-soft);padding-block-start:var(--s-8)}
.dv-rail{display:flex;flex-direction:column;gap:var(--s-16);position:sticky;top:var(--s-24)}
.dv-rail__t{font-size:13px;font-weight:700;color:var(--muted);margin-block-end:var(--s-12)}
/* The converter's own headings are labels, not headings: 14/700 muted. */
.dv-cardlabel{font-size:14px;font-weight:700;line-height:1.5;color:var(--muted)}
/*
 * A grid with fixed value and change tracks, not `flex` + `space-between`.
 * Each row is its own <a>, so with flex every row sized its own middle
 * column to its own text and the figures came out ragged down the card.
 * Fixed tracks make the column by construction.
 */
.dv-rail__row{display:grid;grid-template-columns:minmax(0,1fr) 72px 46px;align-items:center;gap:var(--s-8);padding-block:11px;border-block-end:1px solid var(--line-soft)}
.dv-rail__row:last-child{border-block-end:0}
.dv-rail__name{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;min-width:0}
.dv-rail__v{font-size:14px;font-weight:700}
/* `.dv-num` puts `direction:ltr` on these cells, so logical `end` would
   resolve against the number rather than the page. Pinned physically,
   the same way the city table is. */
html[dir="rtl"] .dv-rail__v,html[dir="rtl"] .dv-rail__d{text-align:left}
html[dir="ltr"] .dv-rail__v,html[dir="ltr"] .dv-rail__d{text-align:right}
.dv-rail__d{font-size:12px;font-weight:700}

/*
 * The blog rail's "most read" card.
 *
 * The rank is the loudest shape in the row and the quietest colour in it:
 * 34px against the title's 15px, but a tint of the ink rather than the ink,
 * so it reads as a position marker and never competes with the headline it
 * is numbering. It is aria-hidden — the list is already an <ol>, so a screen
 * reader counts it without the numeral being read twice.
 */
.dv-mostread{background:var(--rail-bg);border:1px solid var(--rail-line);border-radius:var(--r-20);padding:var(--s-16) var(--s-20) var(--s-8)}
/* Its own heading rather than the muted 13px rail label: this card is a
   ranking, and the label was quieter than the five titles under it. */
.dv-mostread__h{
  display:flex;align-items:center;gap:9px;
  font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text);
  padding-block-end:var(--s-12);margin-block-end:2px;
  border-block-end:1px solid var(--line);
}
.dv-mostread__h::before{content:"";flex:0 0 auto;width:3px;height:15px;border-radius:2px;background:var(--accent)}
.dv-mostread__list{list-style:none;margin:0;padding:0}
.dv-mostread__item{border-block-end:1px solid var(--line-soft)}
.dv-mostread__item:last-child{border-block-end:0}
/* Centred, not baseline-aligned. On a baseline the 26px numeral hangs
   off the title's first line, so against a two-line title it sat visibly
   high; centring puts it level with the block it numbers. */
.dv-mostread__link{display:flex;align-items:center;gap:var(--s-12);padding-block:var(--s-10)}
.dv-mostread__n{
  flex:0 0 auto;min-width:22px;
  font-size:26px;line-height:1;font-weight:700;letter-spacing:-.02em;
  color:color-mix(in srgb,var(--text) 24%,transparent);
  transition:color var(--lift);
}
.dv-mostread__t{
  font-size:14px;line-height:1.45;font-weight:600;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dv-mostread__link:hover .dv-mostread__t{color:color-mix(in srgb,var(--hover-ink) 50%,var(--text))}
.dv-mostread__link:hover .dv-mostread__n{color:color-mix(in srgb,var(--text) 45%,transparent)}

/*
 * Infinite scroll.
 *
 * The pager is only hidden once the observer has bound (`is-auto`), so a
 * reader with no JavaScript — or a failed fetch, which removes the class
 * again — keeps the numbered pagination.
 */
.dv-pager.is-auto,.navigation.is-auto{display:none}
.dv-plist__end{height:1px}

.dv-post--skel{pointer-events:none}
/* The real row's body is sized by its text; a skeleton's children are
   empty, so without this it collapses to nothing and the bars measure
   0px wide against a 0px parent. */
.dv-post--skel .dv-post__body{flex:1 1 auto}
.dv-skel{
  display:block;border-radius:6px;
  background:linear-gradient(90deg,var(--line-soft) 25%,var(--line) 37%,var(--line-soft) 63%);
  background-size:400% 100%;
  animation:dv-skel 1.4s ease-in-out infinite;
}
.dv-skel--topic{width:84px;height:11px}
.dv-skel--title{width:min(100%,420px);height:26px;margin-block:12px}
.dv-skel--line{width:min(100%,540px);height:15px}
.dv-skel--date{flex:0 0 auto;width:58px;height:11px;margin-block-start:3px}
@keyframes dv-skel{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.dv-skel{animation:none}}

/* ---- Article: 240 + 48 + 672 + 48 + 320 = 1328 ---- */
.dv-art__grid{display:grid;grid-template-columns:240px minmax(0,1fr) 320px;gap:var(--s-48);align-items:start}
/* A series part swaps the contents rail for the series rail and drops the
   right-hand column: 300 + 56 + 972 = 1328. */
.dv-art__grid--series{grid-template-columns:300px minmax(0,1fr);gap:var(--s-56)}
.dv-art__col{min-width:0}
.dv-art__chip{display:inline-flex;align-items:center;height:26px;padding-inline:12px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700}
.dv-art__h1{font-size:46px;line-height:1.28;font-weight:700;letter-spacing:-.01em;margin-block:var(--s-16)}
.dv-art__dek{font-size:21px;line-height:1.75;font-weight:500;color:var(--text70)}
.dv-art__by{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-12);padding-block:var(--s-24)}
.dv-art__ava{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.dv-art__byname{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.dv-art__bymeta{font-size:13px;font-weight:500;color:var(--muted)}
.dv-art__share{margin-inline-start:auto;background:var(--invert-bg);color:var(--invert-ink);border-color:transparent;font-size:14px;height:34px}
.dv-art__share{transition:transform var(--lift),box-shadow var(--lift)}
/* Lifts like every other button; the colour never changes. */
.dv-chip.dv-art__share:hover:not(:disabled),.dv-chip.dv-art__share:focus-visible{background:var(--invert-bg);color:var(--invert-ink);border-color:transparent;opacity:1;transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.dv-art__hero{border-radius:var(--r-18);overflow:hidden;max-height:420px;margin-block-end:var(--s-24)}
.dv-art__hero img{width:100%;height:100%;object-fit:cover}

.dv-prose{font-size:18px;line-height:1.95}
.dv-prose > * + *{margin-block-start:1.1em}
.dv-prose h2{font-size:30px;line-height:1.35;font-weight:700;letter-spacing:-.01em;margin-block-start:1.5em}
.dv-prose h3{font-size:21px;line-height:1.35;font-weight:700;margin-block-start:1.4em}
.dv-prose ul,.dv-prose ol{padding-inline-start:1.4em}
.dv-prose li + li{margin-block-start:.5em}
.dv-prose img,.dv-prose iframe,.dv-prose table{max-width:100%}
.dv-prose pre{overflow-x:auto;background:var(--panel);padding:var(--s-16);border-radius:var(--r-14)}
.dv-prose blockquote{margin-inline:0;padding-inline-start:var(--s-20);border-inline-start:3px solid var(--accent);color:var(--text70)}
.dv-prose a{text-decoration:underline;text-underline-offset:3px}
/* Article tables and figures (3 Sep 2026: the data-driven articles). */
.dv-prose .dv-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-block:1.4em;border:1px solid var(--line-soft);border-radius:var(--r-14)}
.dv-prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;margin:0}
.dv-prose th,.dv-prose td{padding:10px 14px;text-align:start;border-block-end:1px solid var(--line-soft);vertical-align:top}
.dv-prose th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text70);background:var(--panel)}
.dv-prose tr:last-child td{border-block-end:0}
.dv-prose td.dv-num,.dv-prose th.dv-num{white-space:nowrap}
html[dir="rtl"] .dv-prose td.dv-num,html[dir="rtl"] .dv-prose th.dv-num{text-align:left}
html[dir="ltr"] .dv-prose td.dv-num,html[dir="ltr"] .dv-prose th.dv-num{text-align:right}
.dv-prose figure{margin:1.6em 0;padding:var(--s-20);background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r-18)}
.dv-prose figure svg{display:block;width:100%;height:auto}
.dv-prose figcaption{font-size:13px;line-height:1.6;color:var(--muted);margin-block-start:var(--s-12)}
.dv-prose .dv-callout{padding:var(--s-16) var(--s-20);border-inline-start:3px solid var(--accent);background:var(--accent-soft);border-radius:var(--r-14);font-size:16px}
.dv-prose .dv-live{font-weight:700}

/* Glossary terms inline — dotted, never a link's treatment. */
.dv-term{border-block-end:2px dotted var(--accent);cursor:help;color:inherit;text-decoration:none}
/* A glossary term in body copy: the design underlines it with a dotted accent
   rule and sets it in the body's own colour at 700, so it reads as emphasis
   with an offer attached rather than as a link. */
.dv-gterm{color:var(--text);font-weight:700;border-block-end:2px dotted var(--accent);cursor:help;padding-block-end:1px}
.dv-gterm:focus-visible{outline:2px solid var(--hover-ink);outline-offset:2px}
.dv-tip{position:fixed;z-index:120;width:320px;max-width:calc(100vw - 32px);padding:14px 16px;border-radius:var(--r-14);background:var(--pop-bg);border:1px solid var(--pop-line);box-shadow:var(--shadow-pop)}
.dv-tip[hidden]{display:none}
.dv-tip__t{font-size:13px;font-weight:800;color:var(--accent)}
.dv-tip__d{font-size:14px;line-height:1.7;color:var(--text70);margin-block-start:6px}
.dv-tip__f{font-size:11px;font-weight:700;color:var(--muted);margin-block-start:8px}

/* An inline live-rate capsule inside body copy. */
.dv-inline{position:relative;display:inline-flex;align-items:center;gap:7px;height:35px;padding-inline:11px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--line-soft);font-size:14px;font-weight:700;vertical-align:middle}
.dv-inline:hover{background:var(--card-hover)}

/* The capsule's popover. 230 wide with a thirty-day sparkline under the rate,
   matching the reference; it is a child of the capsule so it inherits the
   hover with no script, and it is taken out of flow so a capsule mid-sentence
   does not reserve 176px of line height for it. */
.dv-inline__pop{
  position:absolute;z-index:130;inset-inline-start:50%;inset-block-end:calc(100% + 10px);
  transform:translateX(50%) translateY(4px);
  width:230px;padding:14px;border-radius:var(--r-16);
  background:var(--pop-bg);border:1px solid var(--pop-line);box-shadow:var(--shadow-pop);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--lift),transform var(--lift),visibility 0s linear .14s;
}
html[dir="ltr"] .dv-inline__pop{transform:translateX(-50%) translateY(4px)}
.dv-inline:hover .dv-inline__pop,.dv-inline:focus-visible .dv-inline__pop{
  opacity:1;visibility:visible;transform:translateX(50%) translateY(0);transition-delay:0s;
}
html[dir="ltr"] .dv-inline:hover .dv-inline__pop,
html[dir="ltr"] .dv-inline:focus-visible .dv-inline__pop{transform:translateX(-50%) translateY(0)}
.dv-inline__pophead{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
.dv-inline__popname{font-size:13px;font-weight:800;color:var(--text)}
.dv-inline__pophead .dv-up,.dv-inline__pophead .dv-down,.dv-inline__pophead .dv-flat{font-size:13px;font-weight:700}
.dv-inline__poprate{display:block;font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.01em;margin-block-start:6px}
.dv-inline__popchart{display:block;height:56px;margin-block-start:10px}
.dv-inline__popchart .dv-spark{width:100%;height:100%}
.dv-inline__popfoot{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-block-start:8px}

/* TOC rail: a 2px track with a dot that slides to the active section. */
.dv-toc{position:sticky;top:var(--s-24)}
.dv-toc__track{position:relative;padding-inline-start:18px}
.dv-toc__track::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;background:var(--line-soft);border-radius:2px}
.dv-toc__dot{position:absolute;inset-inline-start:-5px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);transition:transform .3s var(--ease)}
.dv-toc__a{display:block;font-size:15px;font-weight:500;color:var(--text70);padding-block:10px}
.dv-toc__a:hover{color:var(--hover-ink);text-decoration:none}
.dv-toc__a.is-on{font-weight:700;color:var(--text)}

/* Comments. */
.dv-cmt{margin-block-start:var(--s-40);padding-block-start:var(--s-32);border-block-start:1px solid var(--line)}
.dv-cmt__head{display:flex;align-items:baseline;gap:var(--s-12);margin-block-end:var(--s-16)}
.dv-cmt__title{font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.dv-cmt__n{font-size:13px;font-weight:600;color:var(--muted)}
.dv-cmt__form{display:flex;gap:var(--s-8);align-items:center}
.dv-cmt__in{flex:1 1 0;width:0;min-width:0;height:54px;padding-inline:var(--s-20);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-pill);font-size:15px;outline:none}
.dv-cmt__in:focus{border-color:var(--blue)}
.dv-cmt__one{display:flex;gap:var(--s-12);padding-block:var(--s-20);border-block-end:1px solid var(--line-soft)}
.dv-cmt__ava{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:color-mix(in srgb,var(--ava,var(--accent)) 16%,transparent);color:var(--ava,var(--accent));display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.dv-cmt__name{font-size:15px;font-weight:700}
.dv-cmt__when{font-size:12px;font-weight:500;color:var(--muted);margin-inline-start:8px}
.dv-cmt__body{font-size:15px;line-height:1.8;color:var(--text70);margin-block-start:6px}

.dv-relcard{display:block;padding-block:var(--s-16);border-block-end:1px solid var(--line-soft)}
.dv-relcard__t{font-size:16px;font-weight:700;line-height:1.35}
.dv-relcard:hover .dv-relcard__t{color:var(--hover-ink)}
.dv-relcard__d{font-size:12px;font-weight:600;color:var(--muted);margin-block-start:6px}

/* ============================================================ 10. SERIES / GLOSSARY / METHODOLOGY */

/* 654 + 20 + 654 = 1328 */
.dv-ser__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-20)}
.dv-ser__card{display:block;background:var(--panel);border-radius:var(--r-24);padding:var(--s-24);transition:transform var(--lift),box-shadow var(--lift)}
.dv-ser__card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.dv-ser__head{display:flex;align-items:center;gap:var(--s-8);flex-wrap:wrap}
.dv-ser__meta{margin-inline-start:auto;font-size:12px;font-weight:600;color:var(--muted)}
.dv-ser__t{font-size:28px;line-height:1.35;font-weight:700;letter-spacing:-.01em;margin-block:var(--s-12) var(--s-8)}
.dv-ser__card:hover .dv-ser__t{color:var(--hover-ink)}
.dv-ser__d{font-size:15px;line-height:1.75;color:var(--text70)}
/* A segmented progress bar: one segment per part, filled for those done. */
.dv-ser__bar{display:flex;gap:5px;margin-block:var(--s-20) var(--s-16)}
.dv-ser__seg{flex:1 1 0;height:5px;border-radius:var(--r-pill);background:var(--line-soft)}
.dv-ser__seg.is-done{background:var(--accent)}
.dv-ser__more{font-size:13px;font-weight:700;color:var(--accent)}
/* The board's "all N rates" link sits beside a 34px title and is a step up. */
.dv-ser__more--lg{font-size:15px}

.dv-ser__rail{display:flex;flex-direction:column;gap:2px}
.dv-part{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-12);font-size:14px;font-weight:600;color:var(--text70);transition:background var(--lift)}
.dv-part:hover{background:rgba(108,123,255,.16);box-shadow:inset 0 0 0 1px rgba(108,123,255,.55);color:var(--hover-ink);text-decoration:none}
.dv-part.is-on{background:var(--accent-soft);color:var(--text)}
.dv-part__n{width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:var(--line-soft);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.dv-part.is-on .dv-part__n{background:var(--accent);color:var(--on-accent)}
.dv-part.is-done .dv-part__n{background:transparent;color:var(--accent)}

.dv-ser__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16);margin-block-start:var(--s-32)}
.dv-ser__navcard{display:block;padding:var(--s-20);border-radius:var(--r-18);background:var(--panel);box-shadow:var(--shadow-rest);transition:transform var(--lift),box-shadow var(--lift),background var(--lift)}
.dv-ser__navcard{transition:transform var(--lift-card),box-shadow var(--lift-card),background var(--lift-card)}
.dv-ser__navcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.dv-ser__navcard--next{background:var(--accent-soft)}
.dv-ser__navl{font-size:12px;font-weight:700;color:var(--muted)}
.dv-ser__navt{font-size:17px;font-weight:700;line-height:1.35;margin-block-start:6px}

/* The "read the one before this?" recap box. */
.dv-recap{display:flex;gap:var(--s-14);align-items:flex-start;padding:var(--s-20);border-radius:var(--r-18);background:var(--panel);margin-block:var(--s-24)}
.dv-recap__n{width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.dv-recap__t{font-size:14px;font-weight:700}
.dv-recap__b{font-size:14px;line-height:1.7;color:var(--text70);margin-block-start:4px}

/* ---- Glossary: 120 + 32 + 1176 = 1328 ---- */
.dv-gloss__letters{display:flex;flex-wrap:wrap;gap:var(--s-6);margin-block:var(--s-24) var(--s-40)}
.dv-gloss__letter{width:38px;height:38px;flex:0 0 38px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-10);background:var(--gloss-bg);font-size:16px;font-weight:700;color:var(--gloss-ink);transition:transform .22s var(--ease),box-shadow .28s var(--ease),color .22s var(--ease)}
.dv-gloss__letter:hover{transform:translateY(-3px);color:var(--hover-ink);box-shadow:inset 0 0 0 42px rgba(108,123,255,.22),0 0 0 1px rgba(108,123,255,.55)}
.dv-gloss__letter.is-on{background:var(--seg-on-bg);color:var(--seg-on-ink)}
.dv-gloss__group{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s-32);padding-block:var(--s-24);border-block-start:1px solid var(--line-soft)}
.dv-gloss__initial{font-size:46px;font-weight:700;line-height:1;color:var(--accent)}
.dv-gloss__terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-32) var(--s-40)}
.dv-gloss__head{display:flex;align-items:baseline;gap:var(--s-10);flex-wrap:wrap}
.dv-gloss__t{font-size:19px;font-weight:700}
.dv-gloss__en{font-size:13px;font-weight:600;color:var(--muted);font-family:var(--f-latin);direction:ltr;unicode-bidi:isolate}
.dv-gloss__d{font-size:15px;line-height:1.8;color:var(--text70);margin-block-start:6px}

/* ---- Methodology: 844 + 64 + 420 = 1328 ---- */
.dv-meth__grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--s-64);align-items:start}
.dv-meth__step{display:flex;gap:var(--s-24);padding-block:22px;border-block-start:1px solid var(--line-soft)}
.dv-meth__n{
  width:40px;height:40px;flex:0 0 40px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);
  font-family:var(--f-latin);font-size:16px;font-weight:800;line-height:1;
}
.dv-meth__st{font-size:20px;font-weight:700}
.dv-meth__sb{font-size:16px;line-height:1.8;color:var(--text70);margin-block-start:8px}
.dv-meth__warn{padding:22px;border-radius:var(--r-20);background:color-mix(in srgb,var(--down) 14%,transparent);margin-block-start:var(--s-32)}
.dv-meth__warnt{font-size:16px;font-weight:700;color:var(--down)}
.dv-meth__askt{font-size:15px;font-weight:700;color:var(--accent)}
.dv-meth__warnb{font-size:15px;line-height:1.8;color:var(--text70);margin-block-start:8px;max-width:56ch}

.dv-stat{display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);min-height:58px;border-block-end:1px solid var(--line-soft)}
.dv-stat:last-child{border-block-end:0}
.dv-stat__l{font-size:14px;font-weight:500;color:var(--text70)}
.dv-stat__v{font-size:22px;font-weight:700}

/* ============================================================ 11. CITIES / CITY */

.dv-cities__head{display:flex;flex-wrap:wrap;gap:var(--s-24);align-items:flex-start;justify-content:space-between}
/* 644 + 40 + 644 = 1328 */
.dv-cities__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-40);align-items:start;margin-block-start:var(--s-32)}
.dv-map{background:var(--panel-2);border-radius:var(--r-22);padding:13px}
.dv-map iframe{width:100%;aspect-ratio:1.1/1;border:0;display:block;border-radius:var(--r-16)}

/*
 * `align-items:stretch`, not `center`, and one line-height for every cell.
 *
 * The row's hover is painted per cell — `.dv-cityrow` is `display:contents`,
 * so there is no row box to paint. Centred items are only as tall as their
 * own text, so a row of 18px, 17px, 14px and 13px type gave four different
 * cell heights at four different offsets, and the hover came out as a
 * staircase with the divider under it broken into steps. Stretch makes every
 * cell fill the track; the shared line-height keeps the type centred in it
 * and holds the row at the 58px it already was.
 */
.dv-citytable{display:grid;grid-template-columns:minmax(0,2fr) .85fr .8fr .8fr .6fr .5fr;align-items:stretch;margin-inline:-10px}
.dv-citytable__h{display:contents}
.dv-citytable__h span{font-size:12px;font-weight:700;color:var(--muted);padding-block:8px;padding-inline:10px;border-block-end:1px solid var(--line)}
.dv-cityrow{display:contents}
.dv-cityrow > *{padding-block:15px;padding-inline:10px;line-height:27px;border-block-end:1px solid var(--line-soft);min-width:0}
.dv-cityrow:hover > *{background:var(--card-hover)}
.dv-cityrow:hover > :first-child{border-start-start-radius:var(--r-12);border-end-start-radius:var(--r-12)}
.dv-cityrow:hover > :last-child{border-start-end-radius:var(--r-12);border-end-end-radius:var(--r-12)}
.dv-cityrow__n{font-size:18px;font-weight:700}
.dv-cityrow__v{font-size:17px;font-weight:700}
.dv-cityrow__s{font-size:14px;font-weight:500;color:var(--text70);direction:ltr;unicode-bidi:isolate}
.dv-cityrow__c{font-size:13px;font-weight:700}
.dv-cityrow__o{font-size:13px;font-weight:600;color:var(--muted)}
/*
 * Numeric columns align to the row's end — and the heading must resolve that
 * the same way its column does.
 *
 * `.dv-num` sets direction:ltr, so any box carrying it reads `end` as its own
 * right edge while its RTL heading reads `end` as the left. Putting the class
 * on the cell therefore aligned a column and its heading to opposite sides.
 * The class now goes on a span *inside* each cell; these are pinned to a
 * physical side as well, so the pair cannot drift apart again if it moves.
 */
html[dir="rtl"] .dv-citytable__h span:not(:first-child),
html[dir="rtl"] .dv-cityrow > *:not(:first-child){text-align:left}
html[dir="ltr"] .dv-citytable__h span:not(:first-child),
html[dir="ltr"] .dv-cityrow > *:not(:first-child){text-align:right}

/* ---- City detail: 610 + 48 + 670 = 1328 ---- */
.dv-city__hero{display:grid;grid-template-columns:minmax(0,1fr) 670px;gap:var(--s-48);align-items:start;padding-block-start:var(--s-32)}
.dv-city__name{font-size:76px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.dv-city__meta{display:flex;flex-wrap:wrap;gap:var(--s-12);font-size:15px;font-weight:600;color:var(--muted);margin-block-start:var(--s-12)}
.dv-city__rate{font-size:68px;line-height:1.05;font-weight:700;letter-spacing:-.03em;margin-block:var(--s-16) var(--s-12);direction:ltr;unicode-bidi:isolate}
.dv-city__bs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-16);font-size:15px;font-weight:600;color:var(--text70)}
/* 728 + 40 + 560 = 1328 */
.dv-city__body{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:var(--s-40);align-items:start;margin-block-start:var(--s-56)}
.dv-city__tabs{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-block:var(--s-16) var(--s-20)}
.dv-city__pane{font-size:16px;line-height:1.85;color:var(--text70)}
.dv-city__pane[hidden]{display:none}
.dv-city__tiles{display:flex;flex-direction:column;gap:var(--s-16)}
.dv-city__tile{padding:var(--s-24);border-radius:var(--r-18);background:var(--panel)}
.dv-city__tile--svc{background:var(--accent-soft)}
.dv-city__tl{font-size:13px;font-weight:700;color:var(--muted);margin-block-end:var(--s-12)}
.dv-city__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-16);padding-block:8px}
.dv-city__rv{font-size:22px;font-weight:700;direction:ltr;unicode-bidi:isolate}
.dv-city__rl{font-size:14px;color:var(--text70)}
/* 5 across, gap 16 */
.dv-city__others{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-16);margin-block-start:var(--s-20)}
.dv-citycard{display:block;padding:var(--s-20);border-radius:var(--r-18);background:var(--panel);transition:transform var(--lift),box-shadow var(--lift)}
.dv-citycard:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
.dv-citycard__h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-8)}
.dv-citycard__n{font-size:17px;font-weight:700}
.dv-citycard__c{font-size:13px;font-weight:700}
.dv-citycard__v{font-size:26px;font-weight:700;margin-block-start:var(--s-12)}
.dv-citycard__f{font-size:12px;font-weight:600;color:var(--muted);margin-block-start:var(--s-12);padding-block-start:var(--s-12);border-block-start:1px solid var(--line-soft)}
.dv-citycard--all{display:flex;flex-direction:column;justify-content:center;gap:8px;background:var(--accent-soft)}

.dv-sec__head{display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center;margin-block-end:var(--s-20)}
.dv-sec__legend{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.dv-sec__more{margin-inline-start:auto;font-size:13px;font-weight:700;color:var(--accent)}

/* ============================================================ 12. OFFICES */

/* 656 + 16 + 656 = 1328 */
.dv-off__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16)}
.dv-off{display:flex;gap:var(--s-20);align-items:flex-start;justify-content:space-between;background:var(--panel);border-radius:var(--r-20);padding:var(--s-24)}
.dv-off__main{min-width:0;flex:1 1 auto}
.dv-off__name{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700}
.dv-off__badge{width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.dv-off__ccy{display:flex;flex-wrap:wrap;gap:6px;margin-block:var(--s-14)}
/* "+12 more currencies" is an outline chip, not a filled one — it is a count,
   not a currency, and the reference draws the difference. */
.dv-tag--ghost{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.dv-off__acts{display:flex;flex-wrap:wrap;gap:8px}
.dv-off__acts .dv-act{gap:6px}

.dv-off__side{flex:0 0 auto;text-align:end;min-width:0}
.dv-off__where{font-size:13px;font-weight:500;color:var(--muted);margin-block-end:var(--s-12)}
/*
 * The buy/sell pair sits in its own blue block — it is the number the reader
 * came for, and on a panel-coloured card it needs to be the loudest thing
 * after the office's name.
 */
.dv-off__quote{
  background:var(--quote-bg);border-radius:var(--r-14);
  padding:var(--s-14) var(--s-16);min-width:170px;
}
.dv-off__q{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-16)}
.dv-off__q + .dv-off__q{margin-block-start:6px}
.dv-off__ql{font-size:11px;font-weight:700;color:var(--quote-label)}
.dv-off__qv{font-size:18px;font-weight:700;color:var(--quote-ink)}
.dv-off__read{display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:11px;font-weight:600;color:var(--quote-label);margin-block-start:var(--s-12)}
.dv-off__readdot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto}

.dv-off__bar{display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center;margin-block:var(--s-16) var(--s-32)}
.dv-off__count{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:var(--s-12);align-items:center;font-size:14px;font-weight:600;color:var(--muted)}

.dv-form{display:grid;gap:var(--s-12)}
.dv-form--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12)}
.dv-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-16);margin-block-start:var(--s-16)}
/* The heading of the panel that replaces the form once a request is sent. */
.dv-done__t{font-size:20px;font-weight:700;margin-block:var(--s-20) var(--s-8)}
.dv-form__in,.dv-form__ta{width:100%;height:48px;padding-inline:var(--s-16);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-14);font-size:15px;outline:none}
.dv-form__ta{height:auto;min-height:110px;padding-block:var(--s-12);resize:vertical}
.dv-form__in:focus,.dv-form__ta:focus{border-color:var(--blue)}
/*
 * The honeypot is hidden by clipping, never by `left:-9999px` — off-screen
 * positioning adds 10,000px of scroll width, and in RTL that drags the page
 * sideways. `display:none` is not an option: some bots skip fields they
 * cannot see, which defeats the trap.
 */
.dv-form__hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.dv-notice{display:flex;gap:var(--s-12);align-items:flex-start;padding:var(--s-16) var(--s-20);border-radius:var(--r-14);background:var(--accent-soft);color:var(--text70);font-size:14px;line-height:1.6}
.dv-notice__i{color:var(--accent);flex:0 0 auto;font-weight:700}

/*
 * A single-column stack with an explicit shrinkable track. A grid with no
 * columns gets one implicit `auto` track sized to max-content, which sized a
 * card holding a nowrap snippet to 1,244px inside a 335px container.
 */
.dv-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-32)}
.dv-snippet__row{display:flex;gap:var(--s-8);align-items:center;margin-block-start:var(--s-16);min-width:0}
.dv-snippet{display:block;flex:1 1 0;min-width:0;overflow-x:auto;white-space:nowrap;font-size:12px;line-height:46px;padding-block:0}

/* ============================================================ 13. CHART */

/*
 * The markup comes from inc/render.php unchanged — the gap-aware plotter. It
 * emits absolutely-positioned label layers rather than SVG <text>, so a label
 * can use the page's font stack. Those layers have no size of their own,
 * which is why every rule below is load-bearing: without them the axis labels
 * collapse into one run of digits at the foot of the plot.
 */
.dv-chart{
  position:relative;width:100%;
  --chart-line:var(--accent);
  --chart-area:color-mix(in srgb,var(--accent) 10%,transparent);
  --chart-grid:var(--chart-grid-ink);
  --chart-ref:var(--blue);
  --chart-cross:var(--text70);
  --chart-ring:var(--panel);
}
.dv-chart__plot{position:relative;width:100%;padding-inline-end:72px;padding-bottom:28px}
.dv-chart__area{position:relative;width:100%;height:var(--plot-h)}
.dv-chart__svg{width:100%;height:100%;display:block;overflow:visible}

.dv-chart__y{position:absolute;inset-block:0;inset-inline-end:-72px;width:72px;pointer-events:none}
.dv-chart__y span{position:absolute;left:12px;text-align:left;transform:translateY(-50%);white-space:nowrap;font-family:var(--f-latin);font-size:13px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .dv-chart__y span{left:auto;right:12px;text-align:right}
.dv-chart__y span.is-first{transform:none}
.dv-chart__y span.is-last{transform:translateY(-100%)}

.dv-chart__x{position:absolute;inset-inline:0;top:100%;margin-top:6px;height:20px;pointer-events:none}
.dv-chart__x span{position:absolute;transform:translateX(-50%);white-space:nowrap;font-family:var(--f-latin);font-size:13px;font-weight:600;color:var(--text);direction:ltr;unicode-bidi:isolate}
.dv-chart__x span.is-first{transform:none}
.dv-chart__x span.is-last{transform:translateX(-100%)}

/* Gridlines dashed and hairline; the line is the only solid mark. */
.dv-c-grid{stroke:var(--chart-grid);stroke-width:1.5;stroke-dasharray:2 7}
.dv-c-ref{stroke:var(--chart-ref);stroke-width:1;stroke-dasharray:4 5}
.dv-c-area{fill:var(--chart-area)}
.dv-c-line{fill:none;stroke:var(--chart-line);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}
.dv-c-cross{stroke:var(--chart-line);stroke-width:1;stroke-dasharray:3 4}
/*
 * .dv-c-trace is the same polyline as .dv-c-line, stroked with a sweeping
 * gradient. `fill:none` is mandatory — a polyline's default fill is black,
 * and without it the trace paints a solid wedge under the chart.
 */
.dv-c-trace{fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.dv-chart:hover .dv-c-trace,.dv-chart:focus-within .dv-c-trace{opacity:0}

.dv-chart__dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--chart-line);box-shadow:0 0 0 2px var(--chart-ring);transform:translate(-50%,-50%);pointer-events:none}
.dv-chart__dot--hover{background:var(--chart-line);width:10px;height:10px;box-shadow:0 0 0 2px var(--chart-ring)}
.dv-chart__dot[hidden]{display:none}
.dv-chart__dot:not(.dv-chart__dot--hover){z-index:1}

/* The crosshair pill carries the rate and nothing else, per the design. */
.dv-chart__tip{position:absolute;z-index:5;pointer-events:none;padding:5px 10px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-family:var(--f-latin);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;transform:translate(-50%,-140%);white-space:nowrap}
.dv-chart__tip[hidden]{display:none}
.dv-chart__tipd{display:none}
.dv-chart__tipv{font-size:13px;font-weight:700;line-height:1}

.dv-chart__empty{padding:var(--s-40) 0;text-align:center;color:var(--muted)}
.dv-chart__emptyt{font-weight:600;color:var(--text70)}
.dv-chart__hint{font-size:13px;color:var(--muted);margin-block-start:var(--s-12)}
.dv-chart__area:focus-visible{outline:2px solid var(--hover-ink);outline-offset:4px}
.dv-chart__area:focus:not(:focus-visible){outline:none}
.dv-chart.is-loading .dv-chart__plot{opacity:.45;transition:opacity 120ms var(--ease)}
.dv-chart__legend{display:flex;align-items:center;gap:var(--s-20);flex-wrap:wrap;font-size:13px;color:var(--muted)}
.dv-chart__key{display:inline-flex;align-items:center;gap:8px}
.dv-chart__key::before{content:"";width:22px;height:0;border-top:1.75px solid var(--chart-line)}
.dv-chart__key--ref{opacity:.6}
.dv-chart__key--ref::before{border-top:1px dashed var(--chart-ref)}

.dv-spark--empty{display:block;width:100%;height:24px}
.dv-spark--up polyline{stroke:var(--up)}
.dv-spark--down polyline{stroke:var(--down)}
.dv-spark--flat polyline{stroke:var(--muted)}

.dv-strip{display:flex;flex-wrap:wrap;gap:var(--s-24);padding-block:var(--s-20);border-block-start:1px solid var(--line-soft);margin-block-start:var(--s-20)}
.dv-strip__cell{display:flex;flex-direction:column;gap:2px}
.dv-strip__cell--wide{flex:1 1 260px}
.dv-strip__v{font-size:18px;font-weight:700}

/* ============================================================ 14. RESPONSIVE */

/* Tablet: 601–1023. Phone gutter 20, tablet 32. */
@media (max-width:1023px){
  :root{--pad:32px}

  .dv-nav{gap:var(--s-20)}
  .dv-nav__a{font-size:14px}
  /* The menu carries a labelled copy of the numeral switch, so the bare
     one in the header bar would be a second, unexplained control. */
  .dv-live,.dv-langpill,.dv-head__right .dv-digits{display:none}
  .dv-burger{display:inline-flex}

  .dv-hero__in{grid-template-columns:minmax(0,1fr);gap:var(--s-32)}
  .dv-hero__rate{font-size:108px}
  .dv-aurora{display:none}

  .dv-mainrow,.dv-tail,.dv-meth__grid,.dv-city__hero,.dv-city__body,
  .dv-cities__grid,.dv-ser__cards{grid-template-columns:minmax(0,1fr);gap:var(--s-32)}
  .dv-blog__grid{grid-template-columns:minmax(0,1fr) 260px;gap:var(--s-32)}
  .dv-art__grid{grid-template-columns:180px minmax(0,1fr);gap:var(--s-32)}
  .dv-art__rail{grid-column:1 / -1}
  .dv-foot__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-32)}
  .dv-off__grid{grid-template-columns:minmax(0,1fr)}
  .dv-city__others{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dv-gloss__terms{grid-template-columns:minmax(0,1fr);gap:var(--s-24)}

  .dv-h1,.dv-art__h1{font-size:38px}
  .dv-lead__t{font-size:36px}
  .dv-city__name{font-size:38px}
  .dv-city__rate{font-size:72px}
  .dv-board__grid{grid-template-columns:minmax(0,2fr) 1fr 1fr}
  .dv-board__cell--d30,.dv-board__cell--spark{display:none}
}

/* Phone: ≤600 */
@media (max-width:600px){
  :root{--pad:20px}

  .dv-nav{display:none}
  .dv-head__in{gap:var(--s-16);padding-block:16px}

  .dv-hero{padding-block:var(--s-24) var(--s-32)}
  .dv-hero__rate{font-size:68px}
  .dv-hero__cta .dv-btn--alt{display:none}

  .dv-blog__grid,.dv-art__grid,.dv-ser__nav,.dv-city__others,
  .dv-gloss__terms{grid-template-columns:minmax(0,1fr)}
  .dv-toc,.dv-rail{display:none}
  .dv-foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-gloss__group{grid-template-columns:minmax(0,1fr);gap:var(--s-12)}
  .dv-gloss__initial{font-size:32px}

  /* The board becomes one-line cards. */
  .dv-board__grid{grid-template-columns:minmax(0,1fr)}
  .dv-board__hrow{display:none}
  .dv-board__hrow--sub{display:none}
  .dv-board__grid.dv-board__grid--5,.dv-board__grid.dv-board__grid--4{grid-template-columns:minmax(0,1fr)}
  .dv-board__unit{display:none}
  .dv-board__grouph{padding-block:16px 6px;padding-inline:0}
  .dv-board__groupnote{flex-basis:100%}
  .dv-flag{font-size:10px;padding:2px 5px}
  .dv-board__name{white-space:normal}
  .dv-rates__v{font-size:22px}
  .dv-pair__karat{grid-template-columns:1fr auto}
  .dv-pair__karat>span:nth-child(3n){display:none}
  .dv-board__row{display:flex;align-items:center;gap:10px;padding-block:12px;border-block-end:1px solid var(--line-soft)}
  .dv-board__cell{padding:0;border:0;flex:0 0 auto}
  .dv-board__cell--name{flex:1 1 auto;min-width:0}
  .dv-board__cell--spark,.dv-board__cell--d7,.dv-board__cell--d30{display:none}
  .dv-board__code{flex:0 0 34px;font-size:12px}
  .dv-board__name{font-size:15px}
  .dv-board__rate{font-size:16px}

  /* The city table drops its buy, sell and office-count columns. Three
     tracks need three cells: hiding only buy and sell left four, and the
     office count wrapped onto a grid row of its own under every card. */
  .dv-citytable{grid-template-columns:minmax(0,1.6fr) .9fr .7fr}
  .dv-citytable__h span:nth-child(3),.dv-citytable__h span:nth-child(4),
  .dv-citytable__h span:nth-child(6),
  .dv-cityrow > *:nth-child(3),.dv-cityrow > *:nth-child(4),
  .dv-cityrow > *:nth-child(6){display:none}

  .dv-off{flex-direction:column;gap:var(--s-16)}
  .dv-off__side{text-align:start;width:100%}
  .dv-form--two{grid-template-columns:minmax(0,1fr)}

  .dv-h1,.dv-art__h1,.dv-lead__t{font-size:28px}
  .dv-h2{font-size:24px}
  .dv-prose{font-size:17px;line-height:1.85}
  .dv-prose h2{font-size:24px}
  .dv-city__rate{font-size:64px}
  .dv-band{margin-inline:calc(var(--s-20) * -1);padding:var(--s-20)}
  .dv-band__t{font-size:21px}
  .dv-panel,.dv-card{padding:var(--s-20)}
  .dv-ratecard__big{font-size:36px}
  .dv-conv__input,.dv-conv__val{font-size:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .dv-c-trace{opacity:0}
}

@media print{
  .dv-head,.dv-foot,.dv-aurora,.dv-menu,.dv-rail,.dv-toc,.dv-band,.dv-tail{display:none!important}
  body{background:#fff;color:#000}
}

/* ============================================================ 21. WIDGETS (4 Sep 2026) */

/*
 * Each widget is shown at its natural size on a dotted stage, so its shape
 * is the first thing a reader sees. The strip is the exception: it is meant
 * to be stretched, so it spans the row and is stretched.
 */
.dv-wid__cfg{margin-block-start:var(--s-32)}
.dv-wid__cfgrow{display:flex;flex-wrap:wrap;gap:var(--s-20) var(--s-32);align-items:flex-end;margin-block-start:var(--s-20)}
.dv-wid__ctl{display:flex;flex-direction:column;gap:var(--s-8);min-width:0}
.dv-wid__ctll{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dv-wid__sel{position:relative;display:block;min-width:260px}
.dv-wid__sel select{height:40px;padding-inline-end:40px;appearance:none;-webkit-appearance:none;cursor:pointer;font-weight:600}
.dv-wid__sel::after{content:"";position:absolute;inset-inline-end:16px;top:50%;width:8px;height:8px;margin-top:-6px;border:2px solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);pointer-events:none;color:var(--muted)}
.dv-wid__ways{margin-block-start:var(--s-48)}
.dv-wid__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-24);margin-block-start:var(--s-20)}
.dv-wid__item{display:flex;flex-direction:column;min-width:0}
.dv-wid__item--wide{grid-column:1 / -1}
.dv-wid__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-16)}
.dv-wid__head .dv-tag{flex:0 0 auto;margin-block-start:4px}
.dv-wid__stage{
  flex:1 0 auto;display:flex;align-items:center;justify-content:center;
  margin-block-start:var(--s-20);padding:var(--s-24);border-radius:var(--r-14);
  background-color:var(--panel);
  /* --text, not --ink: --ink has never been defined, and an undefined
     custom property inside color-mix() invalidates the whole declaration,
     so this stage has been painting no dots at all. */
  background-image:radial-gradient(color-mix(in srgb,var(--text) 16%,transparent) 1px,transparent 1.2px);
  background-size:14px 14px;
}
.dv-wid__stage iframe{box-shadow:0 10px 30px -14px rgba(7,2,43,.35)}
.dv-wid__item--wide .dv-wid__stage{padding-inline:var(--s-24)}
.dv-wid__list{list-style:none;padding:0;margin-block-start:var(--s-16);display:grid;gap:var(--s-12)}
.dv-wid__list li{display:flex;gap:var(--s-12);align-items:flex-start;font-size:15px;line-height:1.55;color:var(--text70)}
.dv-wid__list .dv-tick{flex:0 0 auto;margin-block-start:2px}
.dv-wid__api{margin-block-start:var(--s-32)}
.dv-wid .dv-snippet__row{margin-block-start:var(--s-20)}
@media (max-width:860px){
  .dv-wid__grid{grid-template-columns:minmax(0,1fr)}
  .dv-wid__item--wide{grid-column:auto}
  .dv-wid__sel{min-width:0;width:100%}
  .dv-wid__ctl{width:100%}
  .dv-wid__stage{padding:var(--s-16)}
}

/*
 * The footer is navy in both palettes, so nothing in it may take a palette
 * token that flips to navy in light mode. `.dv-logo` picks up --text, which
 * is navy on the light palette — the footer logo vanished there. Literal
 * colours, as the rest of the footer already uses.
 */
.dv-foot .dv-logo,.dv-foot .dv-head__logo{color:#EAEDF9}
.dv-foot .dv-foot__social a:hover,.dv-foot .dv-foot__langs a:hover,.dv-foot .dv-foot__col a:hover,.dv-foot .dv-foot__legal a:hover{color:#D4EB3B;border-color:#D4EB3B}

/* ============================================================ 22. COMMENTS (4 Sep 2026) */

/*
 * The block as drawn: one pill field and a blue Send, name and email under
 * it (hidden until the reader starts writing, when script is present), then
 * the thread. The field is a textarea so a long comment can grow, but it
 * starts as the single 54px line the design shows.
 */
textarea.dv-cmt__in{height:54px;min-height:54px;max-height:280px;padding-block:16px;line-height:1.4;resize:none;overflow:hidden;font:inherit;font-size:15px}
.dv-cmt__who{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);margin-block-start:var(--s-8)}
.dv-cmt__who .dv-form__in{height:46px;border-radius:var(--r-pill);background:var(--panel)}
.dv-cmt__as{font-size:13px;color:var(--muted);margin-block-start:var(--s-8)}
.dv-cmt__replying{display:flex;align-items:center;gap:var(--s-12);font-size:13px;font-weight:600;color:var(--muted);margin-block-start:var(--s-8)}
.dv-cmt__cancel{background:none;border:0;padding:0;color:var(--blue);font-size:13px;font-weight:700;cursor:pointer}
.dv-cmt__cancel:hover{color:var(--hover-ink)}
.dv-cmt__list,.dv-cmt__children{list-style:none;padding:0;margin:0}
.dv-cmt__list{margin-block-start:var(--s-12)}
.dv-cmt__children{margin-inline-start:48px}
.dv-cmt__main{min-width:0;flex:1 1 auto}
.dv-cmt__meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 4px}
.dv-cmt__reply{background:none;border:0;padding:0;margin-inline-start:10px;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}
.dv-cmt__reply:hover{color:var(--hover-ink)}
.dv-cmt__heldnote{font-size:12px;font-weight:600;color:var(--muted);margin-block-start:4px}
.dv-cmt__body p{margin:0}
.dv-cmt__body p+p{margin-block-start:.6em}
.dv-cmt__body a{color:var(--blue)}
.dv-cmt .dv-notice{margin-block-end:var(--s-16)}
.dv-cmt__pages{display:flex;gap:var(--s-8);justify-content:center;margin-block-start:var(--s-20);font-size:14px;font-weight:600}
.dv-cmt__pages a,.dv-cmt__pages span{padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line)}
.dv-cmt__pages .current{background:var(--seg-on-bg);color:var(--seg-on-ink);border-color:transparent}
@media (max-width:560px){
  .dv-cmt__who{grid-template-columns:minmax(0,1fr)}
  .dv-cmt__children{margin-inline-start:24px}
}
/* A comment can be in any script on any page; let each one set its own direction. */
.dv-cmt__body,.dv-cmt__name{unicode-bidi:plaintext}

/* A city with offices but no board: the headline says so instead of a number. */
.dv-city__noboard{font-size:32px;line-height:1.2;font-weight:700;letter-spacing:-.015em;margin-block-start:var(--s-16);max-width:14ch;text-wrap:balance}