/* Bani24 — one stylesheet, one self-hosted typeface, nothing external.
   Design (operator, 2026-09-19: "ceva de 100 de ori mai wow, mai din viitor
   și mult mai compact, informația să iasă imediat în față"): a market
   terminal. One dark theme; a tape of every rate under the menu bar; pages
   that open on their figures — a slim title row, then instrument panels with
   HUD labels, neon charts and the day's radar, packed densely. Figures stay
   big, bold and right-aligned; one family; colour never alone as a signal;
   every text colour is checked for WCAG AA (see CLAUDE.md). */

/* IBM Plex Sans, SIL OFL 1.1 (fonts/OFL.txt) - chosen for figures: every digit,
   "+" and the minus sign are 0.6 em wide at every weight, so a number keeps its
   width in regular and in bold and columns line up without font features.
   url() is rewritten to the hashed asset name at start-up
   (internal/web/assets.go). latin-ext holds the Romanian ă, ș, ț; every page
   needs it, the English ones for the "Română" link in the header, so the
   layout preloads both files. */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-latin-ext.d160e20920.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/static/fonts/ibm-plex-sans-latin.e2291e842c.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Arial reshaped to Plex's metrics (ascent 1025, descent 275 per 1000; text
   0.99 of Arial's width, measured), so the swap does not move the layout.
   Liberation Sans and Arimo are Arial's metric-compatible stand-ins on Linux
   and Chrome OS, Helvetica shares its widths on Apple systems. Android has
   none of them (Roboto): not tuned, not measured. */
@font-face {
  font-family: "Plex Fallback"; src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
  size-adjust: 99%; ascent-override: 103.5%; descent-override: 27.8%; line-gap-override: 0%;
}

/* One theme. Every text colour here is >= 6:1 on every surface below (the
   weakest: --muted on --surface-3, 6.1:1); control borders >= 3:1. */
:root {
  color-scheme: dark;
  --bg: #03050a;
  --surface: #0a0f1c;
  --surface-2: #0f1628;
  --surface-3: #141d33;
  --field: #070b16;
  --field-border: #5d6c89;
  --text: #e6edf9;
  --muted: #8f9cb7;
  --border: #172036;
  --accent: #67e8f9;
  --accent-2: #a78bfa;
  --up: #34d399;
  --down: #fb7185;
  --focus-glow: rgba(103, 232, 249, .22);
  /* panel edges: a hairline that catches the light from the top left */
  --edge-a: rgba(103, 232, 249, .42);
  --edge-b: rgba(167, 139, 250, .24);
  --edge-c: rgba(120, 150, 255, .10);
  /* charts: violet (the oldest day) to cyan (the newest) */
  --chart-a: #a78bfa;
  --chart-m: #818cf8;
  --chart-b: #22d3ee;
  --chart-glow: rgba(34, 211, 238, .5);
  --chart-grid: rgba(148, 163, 255, .13);
  --tag-bg: #67e8f9;
  --tag-ink: #04111a;
  --tab-on: linear-gradient(135deg, rgba(34, 211, 238, .24), rgba(167, 139, 250, .24));
  --tab-on-shadow: inset 0 0 0 1px rgba(103, 232, 249, .42), 0 0 18px -4px rgba(34, 211, 238, .55);

  /* the band: header, title rows, footer */
  --ink-bg: #060913;
  --ink-raised: rgba(148, 163, 255, .06);
  --ink-raised-hover: rgba(148, 163, 255, .11);
  --ink-text: #eef3ff;
  --ink-muted: #9aa8c4;
  --ink-line: rgba(160, 180, 255, .14);
  --ink-accent: #67e8f9;
  --ink-accent-2: #c4b5fd;
  --ink-up: #4ade80;
  --ink-down: #fda4af;
  --ink-glass: rgba(12, 17, 34, .72);

  /* the brand: cyan, indigo, violet; text on it is --btn-ink (>= 6.7:1) */
  --grad: linear-gradient(120deg, #22d3ee 0%, #818cf8 55%, #c084fc 100%);
  --btn-ink: #050914;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -22px rgba(0, 0, 0, .9);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .4), 0 40px 90px -34px rgba(34, 211, 238, .28);
  --radius: 14px;
  --gap: 14px;
  --header-h: 52px;
  --font: "IBM Plex Sans", "Plex Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 100%, not 16px: everything follows the visitor's default font size. The
   strip at the top is what the frosted menu bar shows through before the page
   scrolls: the band's own colour, so bar and title read as one. */
body {
  margin: 0;
  background:
    linear-gradient(var(--ink-bg), var(--ink-bg)) top / 100% var(--header-h) no-repeat,
    radial-gradient(48rem 26rem at 6% 26rem, rgba(139, 92, 246, .12), transparent 70%) no-repeat,
    radial-gradient(54rem 28rem at 96% 34rem, rgba(34, 211, 238, .09), transparent 70%) no-repeat,
    var(--bg);
  color: var(--text);
  font: 100%/1.45 var(--font);
}

h1, h2, h3, p, ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(103, 232, 249, .28); }
/* the menu bar stays on top: a jump to an anchor (#convertor after the form,
   #curs from the menu) and a focused control must not end up under it */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
html { scroll-padding-top: calc(var(--header-h) + 12px); }

.wrap { width: min(1400px, 100% - 32px); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: 12px; top: -64px; z-index: 60; padding: 10px 16px; background: var(--surface-2); color: var(--text); border-radius: 10px; }
.skip-link:focus { top: 8px; }

/* controls that only work with the script keep their place while it loads,
   so nothing jumps when they appear */
.needs-js { visibility: hidden; }
.js .needs-js { visibility: visible; }

/* ---- the band ------------------------------------------------------------------ */

.site-header, .hero, .site-footer { background-color: var(--ink-bg); color: var(--ink-text); }
.site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--ink-accent); }
/* on the band the change colours are the light ones */
.site-header .chg-up, .hero .chg-up, .tape .chg-up { color: var(--m-up, var(--ink-up)); }
.site-header .chg-down, .hero .chg-down, .tape .chg-down { color: var(--m-down, var(--ink-down)); }
.site-header .chg-flat, .site-header .chg-new, .hero .chg-flat, .hero .chg-new, .tape .chg-flat { color: var(--m-muted, var(--ink-muted)); }

/* header: brand, menu, rates, language. Frosted: the page scrolls under it
   blurred; the tint alone keeps every text on it above 5.8:1 even over a
   white area. */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--ink-line); }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, .55) 30%, rgba(196, 181, 253, .45) 70%, transparent);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background-color: rgb(from var(--ink-bg) r g b / .86); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); }
  /* An element with a backdrop filter is where the backdrop of everything
     inside it stops: while a panel is open the bar gives its own up, so the
     panel's frosted glass sees the page and blurs it */
  .site-header:has(.nav-toggle:checked), .site-header:has(.menu[open]) { background-color: var(--ink-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* the bar is --header-h tall with its 1 px border: the converter sticks exactly 12 px under it */
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: calc(var(--header-h) - 1px); }
/* the logo: a core in the brand's gradient with a "b", an orbit behind it
   with its satellite (it turns a little under the pointer), the name, and
   the address under it */
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; color: inherit; text-decoration: none; }
.brand-mark { flex: none; width: 34px; height: 34px; overflow: visible; filter: drop-shadow(0 0 10px rgba(103, 232, 249, .4)); }
.mark-ring { fill: none; stroke: url(#ring-grad); stroke-width: 1.5; }
.mark-core { fill: url(#fill-brand); }
.mark-b { fill: none; stroke: var(--btn-ink); stroke-width: 2.6; stroke-linecap: round; }
.mark-sat { fill: #eef3ff; }
.mark-orbit { transform-origin: 16px 16px; }
#ring-grad .stop-a { stop-color: #c4b5fd; }
#ring-grad .stop-b { stop-color: #67e8f9; }
.brand-text { display: grid; line-height: 1.05; }
.brand-name { font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.brand-name b { font-weight: 700; background: linear-gradient(90deg, var(--ink-accent), var(--ink-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand-domain { margin-top: 1px; color: var(--ink-accent); font-size: .625rem; font-weight: 700; letter-spacing: .24em; }
.brand-lg .brand-mark { width: 46px; height: 46px; }
.brand-lg .brand-name { font-size: 1.375rem; }
.brand-lg .brand-domain { font-size: .75rem; }
#fill-brand .stop-a { stop-color: #22d3ee; }
#fill-brand .stop-m { stop-color: #818cf8; }
#fill-brand .stop-b { stop-color: #c084fc; }

.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--ink-text); cursor: pointer; }
.nav-burger:hover { background: var(--ink-raised); }
.nav-toggle:focus-visible ~ .header-tools .nav-burger { outline: 2px solid var(--ink-accent); outline-offset: 2px; }
.burger-close { display: none; }
.nav-toggle:checked ~ .header-tools .burger-lines { display: none; }
.nav-toggle:checked ~ .header-tools .burger-close { display: inline; }

.nav-list { display: flex; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 11px; border-radius: 9px;
  color: var(--ink-text); font-weight: 600; font-size: .875rem; text-decoration: none; cursor: pointer; white-space: nowrap;
}
summary.nav-link { list-style: none; }
summary.nav-link::-webkit-details-marker { display: none; }
.nav-link:hover, .menu[open] > .nav-link { background: var(--ink-raised-hover); }
.chev { opacity: .75; }
.menu[open] .chev { transform: rotate(180deg); }

.header-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ticker { display: none; }
.ticker a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 9px; color: var(--ink-text); text-decoration: none; font-size: .8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticker a:hover .ticker-rate { text-decoration: underline; }
.ticker-code { color: var(--ink-muted); font-weight: 600; }
.ticker-rate { font-weight: 700; }
.ticker .chg { font-size: .75rem; }
.lang { display: flex; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 40px; border-radius: 9px; color: var(--ink-muted); text-decoration: none; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lang a:hover { color: var(--ink-text); }
.lang a[aria-current] { color: var(--ink-text); background: var(--ink-raised-hover); }

/* the mega panels: dark glass, floating under the bar or inside the phone's drawer */
.mega {
  --m-text: var(--ink-text); --m-muted: var(--ink-muted); --m-line: var(--ink-line); --m-hover: var(--ink-raised-hover);
  --m-accent: var(--ink-accent); --m-up: var(--ink-up); --m-down: var(--ink-down);
  --m-fill-up: url(#fill-ink-up); --m-fill-down: url(#fill-ink-down); --m-fill-flat: url(#fill-ink-flat);
  color: var(--m-text);
}
.mega a { color: var(--m-text); text-decoration: none; }
.mega-title { margin: 0 0 6px 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--m-muted); }
.mega-rate { display: grid; grid-template-columns: 3em minmax(0, 1fr) 3.5rem auto 5.4em; align-items: baseline; gap: 10px; min-height: 36px; padding: 6px 8px; border-radius: 9px; font-size: .875rem; }
.mega-rate .spark { align-self: center; width: 3.5rem; height: 1.25rem; }
.mega .spark-line { stroke: var(--m-muted); }
.mega .spark-area { fill: var(--m-fill-flat); }
.mega .spark-up .spark-line { stroke: var(--m-up); }
.mega .spark-up .spark-area { fill: var(--m-fill-up); }
.mega .spark-down .spark-line { stroke: var(--m-down); }
.mega .spark-down .spark-area { fill: var(--m-fill-down); }
.mega-rate:hover, .mega-grid a:hover, .mega-links a:hover { background: var(--m-hover); }
.mega-code { font-weight: 700; font-variant-numeric: tabular-nums; }
.mega-name { overflow: hidden; color: var(--m-muted); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.mega-unit { font-size: .75rem; }
.mega-figure { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.mega-chg { font-size: .75rem; text-align: right; }
.mega .chg-up { color: var(--m-up); }
.mega .chg-down { color: var(--m-down); }
.mega .chg-flat, .mega .chg-new { color: var(--m-muted); }
.mega .mega-more { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 8px; margin-top: 4px; font-weight: 600; font-size: .875rem; color: var(--m-accent); }
.mega .mega-more:hover { text-decoration: underline; }
.mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.mega-grid a, .mega-links a { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: 8px; font-size: .875rem; }
.mega-grid .mega-code { min-width: 2.6em; }
.mega-links a { font-weight: 600; }
.mega-years li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 0 3px 8px; }
.mega-years .mega-code { min-width: 3em; font-size: .875rem; }
.mega-years a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border: 1px solid var(--m-line); border-radius: 999px; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mega-years a:hover { border-color: var(--m-accent); color: var(--m-accent); }
.mega .mega-card {
  display: grid; align-content: start; gap: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid transparent;
  background:
    radial-gradient(20rem 10rem at 100% 0%, rgba(34, 211, 238, .26), transparent 70%) padding-box,
    radial-gradient(16rem 10rem at 0% 110%, rgba(139, 92, 246, .24), transparent 70%) padding-box,
    linear-gradient(var(--ink-bg), var(--ink-bg)) padding-box,
    linear-gradient(135deg, rgba(103, 232, 249, .5), rgba(196, 181, 253, .2) 45%, var(--ink-line)) border-box;
  color: var(--ink-muted); font-size: .8125rem;
}
.mega-card-title { color: var(--ink-text); font-size: .9375rem; font-weight: 700; }
.mega-card:hover .mega-card-title { text-decoration: underline; }

/* ---- the tape: every rate of the day, running under the bar ------------------------
   It stops under the pointer, with the focus in it, and with its button
   (a checkbox: works without the script); it does not move at all for those
   who asked for less motion (WCAG 2.2.2). The rates themselves are hidden
   from screen readers, which have the same figures in the table and the
   menu; their links are out of the tab order. */
.tape { position: relative; display: flex; align-items: center; height: 32px; background: rgba(6, 9, 19, .92); border-bottom: 1px solid var(--ink-line); color: var(--ink-text); overflow: hidden; }
.tape-pause {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--ink-muted);
  border-right: 1px solid var(--ink-line); cursor: pointer; background: var(--ink-bg);
}
.tape-pause:hover { color: var(--ink-accent); }
.tape-pause svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tape-icon-play { display: none; }
.tape-toggle:checked + .tape-pause .tape-icon-pause { display: none; }
.tape-toggle:checked + .tape-pause .tape-icon-play { display: inline; fill: currentColor; }
.tape-toggle:focus-visible + .tape-pause { outline: 2px solid var(--ink-accent); outline-offset: -3px; }
.tape-view { display: flex; min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
/* running (site.js): clipped, fading at both ends, with its pause button */
.tape-on .tape-view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
html:not(.tape-on) .tape-toggle, html:not(.tape-on) .tape-pause { display: none; }
.tape-track { display: flex; flex: none; }
.tape-track li { display: flex; }
.tape-track a {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 16px; color: var(--ink-text); text-decoration: none;
  font-size: .75rem; font-variant-numeric: tabular-nums; white-space: nowrap; border-right: 1px solid rgba(160, 180, 255, .08);
}
.tape-track a:hover { background: var(--ink-raised); }
.tape-track b { color: var(--ink-accent); font-weight: 700; letter-spacing: .04em; }
.tape .chg { font-size: .6875rem; }
.tape .arrow { border-inline-width: 4px; margin-right: 4px; }
.tape .chg-up .arrow { border-bottom-width: 6px; }
.tape .chg-down .arrow { border-top-width: 6px; }

/* ---- the title row: every page opens on its figures ----------------------------------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-image:
    radial-gradient(56rem 22rem at 88% -40%, rgba(34, 211, 238, .26), transparent 62%),
    radial-gradient(46rem 22rem at -6% 130%, rgba(139, 92, 246, .24), transparent 62%),
    radial-gradient(30rem 16rem at 58% 150%, rgba(217, 70, 239, .10), transparent 70%);
}
/* a fine grid, brightest under the aurora, and a film grain over it all */
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero::before {
  background-image:
    linear-gradient(rgba(160, 180, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 180, 255, .07) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(70rem 30rem at 75% 0%, #000, transparent 75%); mask-image: radial-gradient(70rem 30rem at 75% 0%, #000, transparent 75%);
}
.hero::after {
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* the page's own rates as a horizon, fading towards the ends and the top,
   where the title and the big figures are */
/* In a title row this slim it stays on the right, behind the big figure,
   clear of the title and the lead */
.hero-line {
  position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: min(80%, 200px); pointer-events: none; opacity: .8;
  filter: drop-shadow(0 0 6px rgba(103, 232, 249, .55));
  -webkit-mask-image: linear-gradient(90deg, transparent 48%, #000 74%, #000 92%, transparent), linear-gradient(0deg, #000 30%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 48%, #000 74%, #000 92%, transparent), linear-gradient(0deg, #000 30%, transparent);
  mask-composite: intersect;
}
.hero-home .hero-line {
  top: 10px; bottom: auto; left: auto; right: 0; width: min(52%, 820px); height: 96px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 90%, transparent), linear-gradient(0deg, #000 55%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32%, #000 90%, transparent), linear-gradient(0deg, #000 55%, transparent);
}
.hero-line-path { fill: none; stroke: url(#hero-grad); stroke-width: 1.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hero-line-area { stroke: none; fill: url(#fill-hero); }
#hero-grad .stop-a { stop-color: #a78bfa; stop-opacity: .55; }
#hero-grad .stop-m { stop-color: #818cf8; stop-opacity: .8; }
#hero-grad .stop-b { stop-color: #67e8f9; }
#fill-hero .stop-top { stop-color: #22d3ee; stop-opacity: .16; }
#fill-hero .stop-bottom { stop-color: #22d3ee; stop-opacity: 0; }

.hero .wrap { padding: 4px 0 18px; }
.hero-overlap .wrap { padding-bottom: 42px; }
.hero-solo .wrap { padding: 56px 0 72px; }
.hero a { color: var(--ink-text); }
.page-head { padding-top: 12px; }
.hero .crumbs + .page-head, .hero .crumbs + .rate-hero .page-head, .hero .crumbs + .year-hero .page-head { padding-top: 0; }
.page-head h1 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.15; font-weight: 700; letter-spacing: -.025em; }
/* the headline in light: white fading to a cool steel, 9:1 at its darkest */
.hero .page-head h1, .hero-kicker { background: linear-gradient(180deg, #ffffff 30%, #b6c4e2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-head .lead { margin-top: 4px; max-width: 52rem; color: var(--ink-muted); font-size: .875rem; }
.hero-kicker { width: fit-content; font-size: clamp(4rem, 3rem + 6vw, 7rem); line-height: 1; font-weight: 700; letter-spacing: -.04em; filter: drop-shadow(0 0 28px rgba(103, 232, 249, .35)); }
.hero .hero-kicker { background-image: linear-gradient(120deg, #67e8f9, #a5b4fc 55%, #d8b4fe); }
.hero .source-line { margin-top: 6px; color: var(--ink-muted); font-size: .75rem; }

/* the panels ride up over the band's lower edge */
.overlap { position: relative; margin-top: -30px; }
.overlap > * + * { margin-top: var(--gap); }

/* a panel: an opaque face, a hairline edge lit from the top left, and the
   corners of a viewfinder */
.card {
  position: relative; border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 100px) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--edge-a), var(--edge-b) 30%, var(--edge-c) 62%) border-box;
}
.card::before, .converter::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none; border-radius: 10px;
  --hud: rgba(103, 232, 249, .38);
  background:
    linear-gradient(var(--hud), var(--hud)) left top / 9px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left top / 1px 9px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right bottom / 9px 1px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right bottom / 1px 9px no-repeat;
}
.card h2 { font-size: .9375rem; line-height: 1.3; font-weight: 700; letter-spacing: -.005em; }
/* instrument labels: short headings as HUD captions with a status light */
.converter h2, .rates > h2, .radar-card > h2, .chart-card > h2, .history > h2, .heat-card > h2, .code-links > h2, .page-links > h2 {
  display: flex; align-items: center; gap: 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.converter h2::before, .rates > h2::before, .radar-card > h2::before, .chart-card > h2::before, .history > h2::before, .heat-card > h2::before, .code-links > h2::before, .page-links > h2::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px 1px rgba(103, 232, 249, .7);
}

/* breadcrumb: one quiet line above the headline */
.crumbs { font-size: .75rem; color: var(--ink-muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0 7px; }
.crumbs li { display: inline-flex; align-items: center; min-height: 30px; }
.crumbs li + li::before { content: "/"; margin-right: 7px; opacity: .45; }
.hero .crumbs a { display: inline-flex; align-items: center; min-height: 30px; color: var(--ink-muted); text-decoration: none; }
.hero .crumbs a:hover { color: var(--ink-text); text-decoration: underline; }

/* homepage: the main currencies as glass tiles over the horizon, lit where
   the pointer is (js/site.js). position: the screen-reader text inside is
   absolutely positioned; on a phone, where the list scrolls sideways, it must
   not escape it and widen the page */
.tiles { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.hero .tile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 9px 12px 8px;
  border: 1px solid transparent; border-radius: 12px; color: var(--ink-text); text-decoration: none;
  background:
    radial-gradient(14rem circle at var(--mx, 50%) var(--my, -60%), rgba(103, 232, 249, .14), transparent 62%) padding-box,
    linear-gradient(var(--ink-glass), var(--ink-glass)) padding-box,
    linear-gradient(135deg, rgba(103, 232, 249, .42), rgba(196, 181, 253, .16) 40%, rgba(160, 180, 255, .08)) border-box;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero .tile:hover { box-shadow: 0 16px 36px -18px rgba(34, 211, 238, .5); }
.tile-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 7px; min-width: 0; font-size: .75rem; }
.tile-code { font-weight: 700; letter-spacing: .06em; color: var(--ink-accent); }
.tile-name { overflow: hidden; color: var(--ink-muted); text-overflow: ellipsis; white-space: nowrap; }
.tile-rate { font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.tile-chg { font-size: .75rem; font-variant-numeric: tabular-nums; text-align: right; }
.tile-abs { display: block; color: var(--ink-muted); font-size: .6875rem; font-weight: 400; }
.hero .tile-spark { grid-column: 1 / -1; width: 100%; height: 26px; margin-top: 3px; filter: drop-shadow(0 0 5px rgba(103, 232, 249, .35)); }

/* ---- layout: converter beside the table (and the radar) --------------------------------- */

/* minmax(0, …): an auto column would grow with the table and push the page
   sideways instead of letting .table-wrap scroll */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }

/* converter: the one panel that floats. Its edge is a conic gradient; while
   the pointer or the focus is in it, the bright part runs round (--beam is
   registered, so it animates; without @property it simply stays put) */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 200deg; }
.converter {
  position: relative; border: 1px solid transparent; border-radius: 16px; box-shadow: var(--shadow-2); padding: 14px 16px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 140px) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--beam), var(--edge-c) 0deg, #22d3ee 40deg, #818cf8 80deg, #c084fc 110deg, var(--edge-c) 170deg, var(--edge-c) 360deg) border-box;
}
.conv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.converter h2 { flex: 1 1 0; }
.conv-date { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.conv-date label { font-size: .6875rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.conv-date .date-wrap { width: 10.75rem; }
.conv-date input[type="date"] { min-height: 36px; padding: 3px 40px 3px 9px; font-size: .875rem; }

.conv-out { min-height: 8.25rem; margin-top: 8px; }
.conv-eq { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.conv-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; line-height: 1.1; margin-top: 1px; }
.conv-value {
  font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.375rem); font-weight: 700; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(100deg, var(--text) 40%, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(103, 232, 249, .22));
}
/* set by the server and by converter.js from the figure's length (valueSize) */
.conv-value.len-m { font-size: min(1.875rem, 8vw); }
.conv-value.len-l { font-size: min(1.5rem, 6.2vw); }
.conv-value.len-xl { font-size: min(1.125rem, 4.2vw); white-space: normal; overflow-wrap: anywhere; }
.conv-cur { font-size: 1.0625rem; font-weight: 700; color: var(--accent); }
.conv-rate { margin-top: 4px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .875rem; }
.conv-basis { color: var(--muted); font-size: .8125rem; }
.conv-error { color: var(--down); font-weight: 600; font-size: .875rem; }

.conv-actions { display: flex; gap: 16px; }
.text-btn {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 2px; border: 0; background: none;
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
}
.text-btn:hover { text-decoration-color: currentColor; }
.text-btn:disabled { color: var(--muted); cursor: default; text-decoration: none; }

.field { display: grid; gap: 3px; min-width: 0; margin-top: 8px; }
.field label, .vat-rate label { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
input[type="text"], input[type="date"], select {
  width: 100%; min-height: 42px; padding: 6px 12px; font: inherit; font-size: .9375rem; color: var(--text);
  background: var(--field); border: 1px solid var(--field-border); border-radius: 10px;
}
input[type="text"]:hover, select:hover, input[type="date"]:hover { border-color: var(--muted); }
input[type="text"]:focus-visible, input[type="date"]:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); box-shadow: 0 0 0 5px var(--focus-glow); }
input[type="text"] { font-variant-numeric: tabular-nums; }
input.input-lg { min-height: 48px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
select { text-overflow: ellipsis; }
input[aria-invalid="true"] { border-color: var(--down); border-width: 2px; }

.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 6px; align-items: end; }
.swap {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  color: var(--accent); background: var(--surface-2); border: 1px solid var(--field-border); border-radius: 10px;
}
.swap:hover { border-color: var(--accent); background: var(--field); box-shadow: 0 0 0 5px var(--focus-glow); }

.vat { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.vat-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.vat-rate label { flex: 1 1 0; color: var(--text); }
.vat-input { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 600; color: var(--muted); }
.vat-input input[type="text"] { width: 4.25rem; min-height: 36px; padding: 4px 9px; text-align: right; font-weight: 700; }
.vat-presets { display: flex; gap: 6px; }
.chip { min-height: 36px; min-width: 46px; padding: 0 10px; font: inherit; font-size: .75rem; font-weight: 700; color: var(--text); background: var(--surface-2); border: 1px solid var(--field-border); border-radius: 999px; cursor: pointer; }
.chip:hover { border-color: var(--accent); background: var(--field); box-shadow: 0 0 0 4px var(--focus-glow); }
/* The two VAT figures are numbers the visitor came for, not a footnote
   (operator, 2026-09-20: "să se vadă mult mai bine"): each stands on its own
   panel, with the label and the copy button on the top row and the figure
   large underneath, on the full width — a long figure keeps one line. */
/* the height of the two panels: the block keeps it when a wrong VAT rate
   replaces them with the error, so nothing below moves (CLS 0) */
.vat-out { min-height: 8.1875rem; margin-top: 6px; }
#vat-ok { display: grid; gap: 6px; }
.vat-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center;
  padding: 5px 11px 7px; border: 1px solid var(--field-border); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0));
}
/* the total: the figure most people leave with */
.vat-line + .vat-line { border-color: rgba(103, 232, 249, .4); background: linear-gradient(180deg, rgba(103, 232, 249, .12), rgba(167, 139, 250, .05)); }
.vat-label { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vat-num { grid-column: 1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.15; font-size: clamp(1.125rem, 5.2vw, 1.5rem); white-space: nowrap; }
/* the same tiers as the result above (valueSize in pages.go, mirrored in
   converter.js): a long figure is set smaller, never cut by the copy button */
.vat-num.len-m { font-size: clamp(1rem, 4.4vw, 1.25rem); }
.vat-num.len-l { font-size: clamp(.9375rem, 3.6vw, 1.0625rem); }
.vat-num.len-xl { font-size: .875rem; white-space: normal; overflow-wrap: anywhere; }
.vat-cur { color: var(--accent); font-weight: 700; font-size: .8125rem; }
.hint { margin-top: 3px; color: var(--muted); font-size: .6875rem; }

.btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 12px; padding: 0 20px;
  font: inherit; font-size: .9375rem; font-weight: 700; color: var(--btn-ink); background: var(--grad);
  border: 0; border-radius: 10px; cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 30px -12px rgba(99, 102, 241, .7);
}
.btn:hover { filter: brightness(1.07) saturate(1.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 36px -10px rgba(34, 211, 238, .7); }
.hero .btn-hero { width: fit-content; margin-top: 24px; padding-inline: 26px; color: var(--btn-ink); }
/* with the script every change converts at once; the button is only needed
   without it, or when the script could not fetch the chosen date's rates
   (.conv-stuck): then the plain GET form, which always works, takes over. It
   sits far below the first screen, so removing it shifts nothing visible. */
.js form:not(.conv-stuck) .conv-submit { display: none; }

.conv-options { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0 18px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: .8125rem; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ---- the date picker (js/calendar.js): a glowing month over a year strip ------------------
   The button sits inside the date field, where the browser's own calendar
   icon was (hidden while the script runs); its place is kept from the
   start (needs-js), so nothing moves when the script arrives. */
.date-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }
.date-wrap input[type="date"] { padding-right: 42px; }
.js .date-wrap input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.cal-btn {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px;
  border: 0; border-radius: 8px; background: rgba(103, 232, 249, .12); color: var(--accent); cursor: pointer;
}
.cal-btn:hover, .cal-btn[aria-expanded="true"] { background: rgba(103, 232, 249, .22); box-shadow: 0 0 14px -2px rgba(34, 211, 238, .6); }
.cal-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(2, 4, 10, .4); }
.cal {
  position: fixed; z-index: 71; top: 80px; left: 16px; width: 336px; max-width: calc(100vw - 16px); padding: 12px 14px 14px;
  border: 1px solid transparent; border-radius: 18px; color: var(--text);
  background:
    radial-gradient(22rem 10rem at 100% 0%, rgba(34, 211, 238, .16), transparent 70%) padding-box,
    radial-gradient(18rem 10rem at 0% 100%, rgba(139, 92, 246, .16), transparent 70%) padding-box,
    linear-gradient(#090d1a, #090d1a) padding-box,
    linear-gradient(135deg, rgba(103, 232, 249, .6), rgba(196, 181, 253, .3) 45%, rgba(120, 150, 255, .12)) border-box;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .85), 0 0 44px -12px rgba(34, 211, 238, .4);
}
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cal-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px 1px rgba(103, 232, 249, .7); }
.cal-close, .cal-step { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 1.125rem; line-height: 1; cursor: pointer; }
.cal-close:hover, .cal-step:hover { border-color: var(--accent); color: var(--accent); }
.cal-nav { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 8px; margin-top: 10px; }
.cal-month {
  text-align: center; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em;
  background: linear-gradient(90deg, #ffffff, #a5f3fc 60%, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cal-month::first-letter { text-transform: uppercase; }
.cal-years { display: flex; gap: 4px; margin: 10px 0 6px; padding: 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cal-years button { flex: none; min-height: 26px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-years button:hover { color: var(--accent); border-color: var(--accent); }
.cal-years button[aria-pressed="true"] { border-color: transparent; background: var(--grad); color: var(--btn-ink); }
.cal-grid { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
.cal-grid th { padding: 4px 0; color: var(--muted); font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cal-grid th.wkd { color: rgba(143, 156, 183, .6); }
.cal-grid td { padding: 0; }
.cal-day {
  position: relative; display: block; width: 100%; height: 34px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text); font: inherit; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.cal-day:hover { background: rgba(103, 232, 249, .1); }
.cal-day.wkd { color: var(--muted); }
.cal-day.out { color: rgba(143, 156, 183, .4); }
/* a day with a BNR publication: a point of light under its number */
.cal-day.pub::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px 1px rgba(103, 232, 249, .8); }
.cal-day.last { box-shadow: inset 0 0 0 1px rgba(103, 232, 249, .7); }
.cal-day.sel { background: var(--grad); color: var(--btn-ink); box-shadow: 0 8px 22px -8px rgba(99, 102, 241, .95); }
.cal-day.sel::after { background: var(--btn-ink); box-shadow: none; }
.cal-day[aria-disabled="true"] { opacity: .25; cursor: not-allowed; }
.cal-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cal-status { min-height: 2.8em; margin-top: 6px; color: var(--text); font-size: .75rem; }
.cal-legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .6875rem; }
.cal-legend i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px 1px rgba(103, 232, 249, .8); }
.cal-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.cal-quick button { min-height: 30px; padding: 0 10px; border: 1px solid var(--field-border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }
.cal-quick button:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--focus-glow); }
.cal-quick button:first-child { border-color: transparent; background: var(--grad); color: var(--btn-ink); }
/* phones: a sheet from the bottom of the screen */
@media (max-width: 560px) {
  .cal { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-radius: 20px 20px 0 0; padding-bottom: 20px; }
  .cal-day { height: 42px; }
}

/* ---- tables: dense rows, big right-aligned figures, colour only beside the arrow -------- */

.source-line { margin-top: 3px; color: var(--muted); font-size: .75rem; }
.table-wrap { position: relative; overflow-x: auto; margin-top: 6px; }
.rates-table, .preset { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .875rem; }
.rates-table th, .rates-table td, .preset th, .preset td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.rates-table tbody:last-child tr:last-child > *, .preset tbody tr:last-child > * { border-bottom: 0; }
.rates-table th:first-child, .preset th:first-child, .preset td:first-child { padding-left: 0; }
.rates-table th:last-child, .rates-table td:last-child, .preset th:last-child, .preset td:last-child { padding-right: 0; }
.rates-table thead th, .preset thead th { padding-block: 6px; font-size: .625rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 700; white-space: nowrap; }
.rates-table tbody th { font-weight: 400; }
.num { text-align: right !important; }
.rates-table .rate { font-size: .9375rem; font-weight: 700; }
.rates-table .col-abs, .rates-table .col-units { color: var(--muted); }
.rates-table .code { display: inline-block; min-width: 3.2em; font-weight: 700; color: var(--text); }
.rates-table .name { color: var(--muted); }
.units-inline, .abs-inline { display: none; color: var(--muted); font-size: .6875rem; }
@media (hover: hover) {
  .rates-table tbody tr:hover > *, .preset tbody tr:hover > * { background: linear-gradient(90deg, rgba(103, 232, 249, .07), rgba(103, 232, 249, .02)); }
  .history-table .month-row:hover > * { background: none; }
}
.rates-table .row-link { color: inherit; text-decoration: none; }
.rates-table .row-link:hover .name, .rates-table .row-link:focus-visible .name { text-decoration: underline; }

/* change indicators: arrow shape + sign + colour, never colour alone */
.chg { white-space: nowrap; font-weight: 600; }
.chg-up { color: var(--up); }
.chg-down { color: var(--down); }
.chg-flat, .chg-new { color: var(--muted); }
.arrow { display: inline-block; width: 0; height: 0; margin-right: 5px; vertical-align: middle; border-inline: 5px solid transparent; }
.chg-up .arrow { border-bottom: 8px solid currentColor; margin-bottom: 3px; }
.chg-down .arrow { border-top: 8px solid currentColor; margin-top: 1px; }
.chg-flat .arrow { width: 10px; border: 0; border-top: 2px solid currentColor; }

/* Preset amounts: a compact block. The title, the day of its rates and both
   directions fit in as little height as possible — each direction is cut in
   two halves (splitPresets) and the halves stand side by side wherever the
   column is at least 13rem wide, so 17 rows take 9 rows of height. */
.presets-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; }
.presets-date { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
/* align-items: start — a stretched table would spread its rows to the height
   of the taller half beside it, and the two halves would stop lining up */
/* on a phone the two directions stand side by side whenever they both fit
   (EUR–RON does at 390 px); a pair with very long figures wraps to one under
   the other on its own */
.preset-grid { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 4px; align-items: start; }
.preset-grid > * { flex: 1 1 13rem; }
/* flex, not a grid of fixed minimum tracks: a half only stands beside the
   other if both fit at their own width, so a pair with very long figures
   (XAU–IDR) falls back to one column instead of spilling out of the card */
.preset-cols { display: flex; flex-wrap: wrap; gap: 0 22px; align-items: start; }
.preset-cols > table { flex: 1 1 13rem; }
.preset th, .preset td { padding: 3px 8px; }
.preset thead th { padding-block: 5px 3px; }
.preset td:last-child { font-weight: 700; }
.preset th:first-child, .preset td:first-child { width: 42%; }
.page-links ul { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 6px; }
.page-links a { display: inline-flex; align-items: center; min-height: 34px; font-weight: 600; font-size: .875rem; }
.about p { margin-top: 6px; max-width: 52rem; color: var(--muted); font-size: .875rem; }
.link-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }

/* a pair's page: its chart and the preset tables take the place of the rates table */
.side-stack { min-width: 0; }
.side-stack > * + * { margin-top: var(--gap); }
.side-sources { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--muted); font-size: .75rem; }
.side-sources p + p { margin-top: 2px; }

/* lists of currency codes and of years: compact chips */
.code-links ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.code-links a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 32px; padding: 0 11px;
  border: 1px solid var(--field-border); border-radius: 999px; color: var(--text); text-decoration: none;
  font-weight: 600; font-size: .8125rem; font-variant-numeric: tabular-nums;
}
.code-links a:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--focus-glow); }
/* wide enough for four digits in the web font and in its fallback alike, so
   the row of years does not re-wrap when the font arrives */
.year-links a { min-width: 3.75rem; }
.code-links a[aria-current] { background: var(--grad); border-color: transparent; color: var(--btn-ink); box-shadow: 0 8px 20px -10px rgba(99, 102, 241, .8); }

/* ---- homepage: the day's radar and its biggest moves -------------------------------------- */

.radar-card { min-width: 0; }
.radar { display: block; width: 100%; max-width: 340px; margin: 6px auto 0; overflow: visible; filter: drop-shadow(0 0 8px rgba(103, 232, 249, .25)); }
.radar-ring { fill: none; stroke: var(--chart-grid); stroke-width: 1; stroke-dasharray: 2 5; }
.radar-ring-zero { stroke: rgba(103, 232, 249, .35); stroke-dasharray: none; }
.radar-up, .radar-down, .radar-flat { fill: none; stroke-width: 4; stroke-linecap: round; }
.radar-up { stroke: var(--up); }
.radar-down { stroke: var(--down); }
.radar-flat { stroke: var(--muted); stroke-width: 2; }
@media (hover: hover) { .radar-up:hover, .radar-down:hover { stroke-width: 6; } }
.radar-code { fill: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; dominant-baseline: central; }
.radar-code.radar-main { fill: var(--text); font-weight: 700; }
.radar-day { fill: var(--text); font-size: 20px; font-weight: 700; text-anchor: middle; letter-spacing: -.01em; }
.radar-count { font-size: 14px; font-weight: 700; text-anchor: middle; }
.radar-up-t { fill: var(--up); }
.radar-down-t { fill: var(--down); }
.movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; margin-top: 10px; }
.movers h3 { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.movers ol { margin-top: 2px; }
.movers a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 28px; padding-block: 4px; color: var(--text); text-decoration: none; font-size: .8125rem; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border); }
.movers li:last-child a { border-bottom: 0; }
.movers a:hover b { text-decoration: underline; }

/* ---- history -------------------------------------------------------------------- */

/* the year in six figures: glass tiles on the band */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.stats div {
  padding: 8px 11px; border: 1px solid transparent; border-radius: 11px;
  background: linear-gradient(var(--ink-glass), var(--ink-glass)) padding-box, linear-gradient(135deg, rgba(103, 232, 249, .32), rgba(160, 180, 255, .08) 50%) border-box;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.stats dt { font-size: .625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.stats dd { margin: 1px 0 0; }
.stat-value { display: block; font-size: 1.125rem; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-note { display: block; margin-top: 1px; color: var(--ink-muted); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.notice { margin-top: 10px; padding: 9px 13px; border: 1px solid var(--ink-line); border-radius: 10px; background: var(--ink-glass); color: var(--ink-text); max-width: 52rem; font-size: .875rem; }
.year-hero { display: grid; gap: 12px 36px; }
.year-main { min-width: 0; }
/* the ring: the year's days around a circle, rises outwards, falls inwards */
.year-ring { display: none; width: 100%; max-width: 270px; margin-inline: auto; overflow: visible; filter: drop-shadow(0 0 8px rgba(103, 232, 249, .3)); }
.ring-zero { fill: none; stroke: var(--ink-line); stroke-width: 1; }
.ring-ticks { fill: none; stroke: var(--ink-muted); stroke-width: 1; opacity: .5; }
.ring-up, .ring-down { fill: none; stroke-width: 2.1; stroke-linecap: round; }
.ring-up { stroke: var(--ink-up); }
.ring-down { stroke: var(--ink-down); }
.ring-now { fill: none; stroke: var(--ink-accent); stroke-width: 9; stroke-linecap: round; }
.ring-month { fill: var(--ink-muted); font-size: 15px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.ring-year { fill: var(--ink-text); font-size: 36px; font-weight: 700; text-anchor: middle; letter-spacing: -.02em; }
.ring-pct { fill: var(--ink-muted); font-size: 17px; font-weight: 700; text-anchor: middle; }
.ring-pct.ring-up { fill: var(--ink-up); stroke: none; }
.ring-pct.ring-down { fill: var(--ink-down); stroke: none; }
.history-table tbody th, .history-index tbody th { font-weight: 400; }
.history-table tbody th, .history-index .code { white-space: nowrap; }
.history-table .month-row th { padding-top: 18px; padding-bottom: 6px; font-weight: 400; white-space: normal; }
.history-table tbody:first-of-type .month-row th { padding-top: 6px; }
.month-name { display: inline-block; font-weight: 700; font-size: .875rem; }
.month-name::first-letter { text-transform: uppercase; }
.month-avg { margin-left: 10px; color: var(--muted); font-size: .75rem; }
.history-index a { display: inline-flex; align-items: baseline; min-height: 32px; padding-block: 5px; color: var(--text); text-decoration: none; }
.history-index a:hover .name { text-decoration: underline; }
.history-index th, .history-index td { padding-block: 1px; }
.ended { display: block; color: var(--muted); font-size: .6875rem; }
.history > .source-line { max-width: 56rem; }
/* a table of many rows beside a chart scrolls inside its panel; it can take
   the focus, so the keyboard scrolls it too */
.table-scroll:focus-visible { outline-offset: 0; }

/* ---- a currency's (and a pair's) title row: the figure beside the title --------------------- */

.rate-hero { display: grid; gap: 8px 40px; }
.rate-now { font-variant-numeric: tabular-nums; }
.rate-eq { color: var(--ink-muted); font-size: .8125rem; }
.rate-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; line-height: 1.05; }
.rate-figure {
  font-size: clamp(2.25rem, 1.8rem + 2.4vw, 3.5rem); font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(180deg, #ffffff 30%, #a5f3fc 75%, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(103, 232, 249, .32));
}
.rate-cur { font-size: 1.125rem; font-weight: 700; color: var(--ink-accent); }
.rate-change { margin-top: 4px; white-space: normal; font-size: .875rem; }
.rate-note { margin-top: 2px; color: var(--ink-muted); font-size: .75rem; }
.rate-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }

/* ---- charts: neon instruments ------------------------------------------------------ */

/* A chart card: its label and the buttons share the first row while they
   fit (the set's box is dissolved into the card's flex row), the figure
   takes the whole width under them. The card is lit from above. */
.chart-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.card.chart-card {
  background:
    radial-gradient(100% 70% at 50% -14%, rgba(34, 211, 238, .09), transparent 70%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg, var(--edge-a), var(--edge-b) 35%, var(--edge-c) 65%) border-box;
}
.chart-card > h2 { flex: 1 1 auto; }
.chart-card > .chart-set { display: contents; }
.chart-card .chart, .chart-card > .chart-note { flex: 1 0 100%; }
.chart-note { color: var(--muted); font-size: .75rem; }

/* the buttons (periods or currencies): one segmented control whose lit
   segment slides to the checked one. Equal columns, so its place is
   (index x width); the index comes from :has. The radios stay in the page,
   invisible, for the keyboard and screen readers. */
.chart-tabs {
  position: relative; isolation: isolate; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(2.75rem, 1fr); gap: 2px; padding: 3px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
}
.chart-tabs::before {
  content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; border-radius: 8px;
  width: calc((100% - 6px - (var(--n, 1) - 1) * 2px) / var(--n, 1));
  transform: translateX(calc(var(--i, 0) * (100% + 2px)));
  background: var(--tab-on); box-shadow: var(--tab-on-shadow);
}
.tabs-2 { --n: 2; } .tabs-3 { --n: 3; } .tabs-4 { --n: 4; } .tabs-5 { --n: 5; }
.chart-set:has(.chart-radio:nth-of-type(2):checked) .chart-tabs { --i: 1; }
.chart-set:has(.chart-radio:nth-of-type(3):checked) .chart-tabs { --i: 2; }
.chart-set:has(.chart-radio:nth-of-type(4):checked) .chart-tabs { --i: 3; }
.chart-set:has(.chart-radio:nth-of-type(5):checked) .chart-tabs { --i: 4; }
.chart-tab {
  display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 10px;
  border-radius: 8px; color: var(--muted); font-size: .75rem; font-weight: 700; white-space: nowrap; cursor: pointer; user-select: none;
}
.chart-tab:hover, .chart-radio:checked + .chart-tab { color: var(--text); }
.chart-radio:focus-visible + .chart-tab { outline: 2px solid var(--accent); outline-offset: 1px; }

/* only the checked button's figure; without :has, all of them, and the
   checked button lit on its own */
.chart-set .chart { display: none; }
.chart-set:has(.chart-radio:nth-of-type(1):checked) > .chart:nth-of-type(1),
.chart-set:has(.chart-radio:nth-of-type(2):checked) > .chart:nth-of-type(2),
.chart-set:has(.chart-radio:nth-of-type(3):checked) > .chart:nth-of-type(3),
.chart-set:has(.chart-radio:nth-of-type(4):checked) > .chart:nth-of-type(4),
.chart-set:has(.chart-radio:nth-of-type(5):checked) > .chart:nth-of-type(5) { display: block; }
@supports not selector(:has(*)) {
  .chart-set .chart { display: block; }
  .chart-tabs::before { display: none; }
  .chart-radio:checked + .chart-tab { background: var(--tab-on); box-shadow: var(--tab-on-shadow); }
}

/* the line runs violet (the span's first day) to cyan (its last); the
   direction is the arrow and the signed figure above it */
.chart { margin: 0; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.chart-pct { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chart-pct.chg-up { text-shadow: 0 0 22px rgba(52, 211, 153, .5); }
.chart-pct.chg-down { text-shadow: 0 0 22px rgba(251, 113, 133, .5); }
.chart-range { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.chart-empty { color: var(--muted); padding: 18px 0; font-size: .875rem; }

.chart-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; margin-top: 12px; }
.chart-canvas { position: relative; height: clamp(180px, 19vw, 250px); touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
/* HUD corners round the plot */
.chart-canvas::before {
  content: ""; position: absolute; inset: -8px -6px; pointer-events: none;
  --hud: rgba(34, 211, 238, .6);
  background:
    linear-gradient(var(--hud), var(--hud)) left top / 12px 1.5px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left top / 1.5px 12px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right top / 12px 1.5px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right top / 1.5px 12px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left bottom / 12px 1.5px no-repeat,
    linear-gradient(var(--hud), var(--hud)) left bottom / 1.5px 12px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right bottom / 12px 1.5px no-repeat,
    linear-gradient(var(--hud), var(--hud)) right bottom / 1.5px 12px no-repeat;
}
.chart-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 7px var(--chart-glow)); }
.chart-grid { fill: none; stroke: var(--chart-grid); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.chart-area { stroke: none; fill: url(#fill-chart); }
.chart-line { fill: none; stroke: url(#line-grad); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-halo, .chart-dot, .chart-pulse { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-halo { stroke: var(--surface); stroke-width: 13; }
.chart-dot { stroke: var(--text); stroke-width: 7; }
.chart-last { stroke: var(--chart-b); stroke-width: 10; }
.chart-pulse { stroke: var(--chart-b); stroke-width: 10; opacity: 0; }
#line-grad .stop-a { stop-color: var(--chart-a); }
#line-grad .stop-m { stop-color: var(--chart-m); }
#line-grad .stop-b { stop-color: var(--chart-b); }
#fill-chart .stop-top { stop-color: var(--chart-b); stop-opacity: .22; }
#fill-chart .stop-bottom { stop-color: var(--chart-m); stop-opacity: 0; }
#fill-up .stop-top { stop-color: var(--up); stop-opacity: .24; }
#fill-down .stop-top { stop-color: var(--down); stop-opacity: .22; }
#fill-flat .stop-top { stop-color: var(--accent); stop-opacity: .2; }
#fill-up .stop-bottom { stop-color: var(--up); stop-opacity: 0; }
#fill-down .stop-bottom { stop-color: var(--down); stop-opacity: 0; }
#fill-flat .stop-bottom { stop-color: var(--accent); stop-opacity: 0; }
#fill-ink-up .stop-top { stop-color: var(--ink-up); stop-opacity: .32; }
#fill-ink-down .stop-top { stop-color: var(--ink-down); stop-opacity: .32; }
#fill-ink-flat .stop-top { stop-color: var(--ink-accent); stop-opacity: .32; }
#fill-ink-up .stop-bottom { stop-color: var(--ink-up); stop-opacity: 0; }
#fill-ink-down .stop-bottom { stop-color: var(--ink-down); stop-opacity: 0; }
#fill-ink-flat .stop-bottom { stop-color: var(--ink-accent); stop-opacity: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* the light that draws the line, once, when the chart appears (motion only) */
.chart-scan { display: none; }

/* axis labels: the value labels sit on the grid lines (the scale's ends are
   ticks, so they are evenly spaced); the dates at 0, 1/4, 1/2, 3/4 and the
   end of the span */
.chart-y { display: flex; flex-direction: column; justify-content: space-between; color: var(--muted); font-size: .6875rem; font-variant-numeric: tabular-nums; text-align: right; }
.chart-y li { line-height: 1; margin-block: -.5em; }
.chart-x { position: relative; grid-column: 1; height: .9rem; margin-top: 10px; color: var(--muted); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.chart-x li { position: absolute; top: 0; white-space: nowrap; line-height: 1; }
.chart-x li:nth-child(1) { left: 0; }
.chart-x li:nth-child(2) { left: 25%; transform: translateX(-50%); }
.chart-x li:nth-child(3) { left: 50%; transform: translateX(-50%); }
.chart-x li:nth-child(4) { left: 75%; transform: translateX(-50%); }
.chart-x li:nth-child(5) { right: 0; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 12px 0 0; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-legend div { display: flex; align-items: baseline; gap: 7px; }
.chart-legend dt { display: inline-flex; align-items: center; gap: 6px; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.chart-legend dt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border); }
.chart-legend dd { margin: 0; }
.chart-legend b { color: var(--text); font-weight: 700; }

/* js/charts.js: a HUD crosshair — two hairlines, a glowing point, the value
   tagged on the value axis and the date on the time axis. Moved by
   transforms only (a box moved by left/top counts as a layout shift). */
.chart-cross, .chart-crossh, .chart-hover, .chart-ytag, .chart-xtag { position: absolute; top: 0; left: 0; display: none; pointer-events: none; }
.chart-active .chart-cross, .chart-active .chart-crossh, .chart-active .chart-hover, .chart-active .chart-ytag, .chart-active .chart-xtag { display: block; }
.chart-cross { bottom: 0; width: 1px; background: linear-gradient(transparent, var(--chart-b) 18%, var(--chart-b) 82%, transparent); opacity: .75; }
.chart-crossh { right: 0; height: 0; border-top: 1px dashed rgba(34, 211, 238, .6); }
.chart-hover {
  z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--chart-b);
  box-shadow: 0 0 0 3px var(--surface), 0 0 18px 4px rgba(34, 211, 238, .55);
}
.chart-ytag, .chart-xtag {
  z-index: 2; padding: 2px 7px; border-radius: 5px; font-size: .6875rem; font-weight: 700; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5);
}
.chart-ytag { background: var(--tag-bg); color: var(--tag-ink); }
.chart-xtag { background: var(--text); color: var(--surface); }
.chart-scrub { position: absolute; inset: -6px; border-radius: 10px; cursor: crosshair; }
.chart-scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- small charts ---------------------------------------------------------------- */

.spark { display: block; width: 100%; height: 100%; overflow: visible; }
.spark-line { fill: none; stroke: var(--muted); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-area { stroke: none; fill: url(#fill-flat); }
.spark-up .spark-line { stroke: var(--up); }
.spark-up .spark-area { fill: url(#fill-up); }
.spark-down .spark-line { stroke: var(--down); }
.spark-down .spark-area { fill: url(#fill-down); }
/* on the band, the light variants */
.hero .spark-line { stroke: var(--ink-accent); }
.hero .spark-area { fill: url(#fill-ink-flat); }
.hero .spark-up .spark-line { stroke: var(--ink-up); }
.hero .spark-up .spark-area { fill: url(#fill-ink-up); }
.hero .spark-down .spark-line { stroke: var(--ink-down); }
.hero .spark-down .spark-area { fill: url(#fill-ink-down); }
/* the tables: a column shown where there is room for it */
.col-spark { display: none; width: 5.25rem; padding-left: 12px !important; }
.col-spark .spark { width: 4.5rem; height: 1.5rem; }
.rates-table td.col-spark { vertical-align: middle; }

/* ---- the year as a calendar: an LED board ------------------------------------------ */

.heat-note { margin-top: 4px; max-width: 56rem; color: var(--muted); font-size: .75rem; }
.heat-months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 12px; margin-top: 10px; }
.heat-month { display: grid; gap: 4px; min-width: 0; }
.heat-name { color: var(--muted); font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.heat-grid { display: block; width: 100%; height: auto; max-width: 6.5rem; }
.heat-grid rect, .heat-scale i { fill: var(--hm); background: var(--hm); }
.hm-u1 { --hm: #0c3b2e; } .hm-u2 { --hm: #0f6b4f; } .hm-u3 { --hm: #10b981; } .hm-u4 { --hm: #6ee7b7; }
.hm-d1 { --hm: #3f1420; } .hm-d2 { --hm: #7f1d35; } .hm-d3 { --hm: #e11d48; } .hm-d4 { --hm: #fda4af; }
.hm-flat { --hm: #3b4760; }
.hm-none { --hm: var(--border); }
/* the brightest days glow */
.heat-grid .hm-u3, .heat-grid .hm-u4, .heat-grid .hm-d3, .heat-grid .hm-d4 { filter: url(#led-glow); }
.heat-grid .hm-future { fill: none; stroke: var(--border); stroke-width: 1; }
@media (hover: hover) { .heat-grid rect:not(.hm-future):hover { stroke: var(--text); stroke-width: 1.5; } }
.heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; margin-top: 10px; color: var(--muted); font-size: .6875rem; font-weight: 600; }
.heat-scale { display: inline-flex; gap: 3px; }
.heat-scale i, .heat-none i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.heat-none { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.heat-none i { background: var(--border); }
.heat-summary { margin-top: 6px; max-width: 60rem; font-size: .8125rem; }

/* ---- API documentation: a developer console ------------------------------------------ */

.docs code, .term-body, .api-base code, .endpoint-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.docs code { font-size: .9em; }
.api-hero { display: grid; gap: 14px 40px; }
.api-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.api-chips li { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border: 1px solid var(--ink-line); border-radius: 999px; color: var(--ink-text); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; background: var(--ink-raised); }
.api-chips .chip-get { border-color: transparent; background: var(--grad); color: var(--btn-ink); }
.api-base { margin-top: 10px; font-size: .8125rem; color: var(--ink-muted); }
.api-base-label { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.api-base code { color: var(--ink-accent); font-weight: 600; }

/* terminals: a window bar (label, status or a copy button) over the code */
.term { margin-top: 12px; border: 1px solid var(--ink-line); border-radius: 12px; overflow: hidden; background: #04070f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -24px rgba(0, 0, 0, .9); }
.term-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; padding: 0 12px; border-bottom: 1px solid var(--ink-line); background: linear-gradient(90deg, rgba(34, 211, 238, .08), rgba(139, 92, 246, .06)); }
.term-dots { display: inline-flex; gap: 6px; margin-right: 4px; }
.term-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2a3450; }
.term-dots i:nth-child(2) { background: #67e8f9; box-shadow: 0 0 8px rgba(103, 232, 249, .8); }
.term-label { overflow: hidden; color: var(--ink-muted); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.term-status { flex: none; color: var(--ink-up); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.term-copy { flex: none; min-height: 26px; padding: 0 10px; border: 1px solid var(--ink-line); border-radius: 7px; background: var(--ink-raised); color: var(--ink-text); font: inherit; font-size: .6875rem; font-weight: 700; cursor: pointer; }
.term-copy:hover { border-color: var(--ink-accent); color: var(--ink-accent); }
.term-body { margin: 0; padding: 12px 14px; overflow-x: auto; color: #d9f6ff; font-size: .8125rem; line-height: 1.55; tab-size: 2; }
.term-body:focus-visible { outline-offset: -3px; }
.t-prompt { color: var(--ink-accent); font-weight: 700; user-select: none; }
.j-key { color: #a5b4fc; }
.j-str { color: #6ee7b7; }
.j-num { color: #fcd34d; }
.j-lit { color: #f9a8d4; }
.j-pun { color: #8190ad; }
.api-term { align-self: center; margin-top: 0; }
.api-term .term-body { max-height: 168px; overflow: hidden; font-size: .75rem; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.t-line { display: block; white-space: pre-wrap; word-break: break-all; }

/* the page: contents on the left, sticky; the reference on the right */
.api-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.api-main { min-width: 0; }
.api-main > * + * { margin-top: var(--gap); }
.api-toc ol { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; counter-reset: toc; }
.api-toc a { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); text-decoration: none; font-size: .8125rem; font-weight: 600; }
.api-toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); color: var(--muted); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.api-toc a:hover { border-color: var(--accent); color: var(--accent); }
.toc-method { padding: 0 5px; border-radius: 4px; background: rgba(103, 232, 249, .14); color: var(--accent); font-size: .5625rem; font-weight: 700; letter-spacing: .06em; }
.rules-list { margin-top: 10px; counter-reset: rule; }
.rules-list li { position: relative; padding: 8px 0 8px 40px; border-top: 1px solid var(--border); font-size: .875rem; }
.rules-list li:first-child { border-top: 0; }
.rules-list li::before { counter-increment: rule; content: counter(rule, decimal-leading-zero); position: absolute; left: 0; top: 8px; color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.endpoint-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.method { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 7px; background: var(--grad); color: var(--btn-ink); font-size: .75rem; font-weight: 700; letter-spacing: .1em; box-shadow: 0 8px 20px -10px rgba(99, 102, 241, .9); }
.endpoint-path { color: var(--accent); font-size: 1.0625rem; font-weight: 700; }
.endpoint-intro { margin-top: 8px; max-width: 60rem; font-size: .9375rem; }
.docs-table caption { padding-top: 12px; text-align: left; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.docs-table th, .docs-table td { vertical-align: top; white-space: normal; }
.docs-table tbody th { font-weight: 600; white-space: nowrap; padding-right: 20px; }
.params-table tbody th code { color: var(--accent); }
.errors-table tbody th code { color: var(--text); }
.status-code { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 6px; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-4xx { background: #fcd34d; color: #1c1402; }
.sc-5xx { background: #fb7185; color: #1f0508; }

/* the console: four fields and a send button over a live terminal */
.console-intro { margin-top: 6px; max-width: 60rem; color: var(--muted); font-size: .8125rem; }
.console-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin-top: 10px; align-items: end; }
.console-field { display: grid; gap: 3px; min-width: 0; }
/* a date field has a minimum width of its own: on narrow screens it takes the whole row */
.console-date { grid-column: 1 / -1; }
.console-field label { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .75rem; font-weight: 700; }
.console-field input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; min-height: 40px; }
.console-send { grid-column: 1 / -1; margin-top: 2px; min-height: 42px; }
.console-out .term-body { max-height: 420px; overflow: auto; }

/* ---- footer --------------------------------------------------------------------- */

/* The footer from the future: the address, huge, standing on a grid that
   runs to a glowing horizon; the data's status as a console line; the links
   as prompts. */
.site-footer {
  position: relative; margin-top: 48px; color: var(--ink-muted); font-size: .8125rem;
  background-image: radial-gradient(60rem 22rem at 50% 0%, rgba(34, 211, 238, .14), transparent 70%), radial-gradient(50rem 20rem at 8% 100%, rgba(139, 92, 246, .14), transparent 70%);
}
.footer-horizon { position: relative; height: clamp(130px, 17vw, 230px); overflow: hidden; perspective: 300px; }
.footer-horizon::before {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: 0; height: 190%; transform-origin: 50% 100%; transform: rotateX(74deg);
  background-image: linear-gradient(rgba(103, 232, 249, .34) 1px, transparent 1px), linear-gradient(90deg, rgba(103, 232, 249, .3) 1px, transparent 1px);
  background-size: 60px 60px; background-position: center bottom;
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 62%); mask-image: linear-gradient(to top, #000 5%, transparent 62%);
}
.footer-horizon::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 36%; height: 1px;
  background: linear-gradient(90deg, transparent, #67e8f9 25%, #c084fc 75%, transparent); box-shadow: 0 0 28px 6px rgba(34, 211, 238, .3);
}
.footer-giant {
  position: absolute; left: 50%; bottom: 36%; z-index: 1; transform: translateX(-50%); white-space: nowrap;
  font-size: clamp(3.5rem, 13vw, 11rem); font-weight: 700; letter-spacing: -.05em; line-height: .78;
  background: linear-gradient(180deg, #ffffff 15%, #a5f3fc 55%, rgba(129, 140, 248, .15) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 36px rgba(34, 211, 238, .3));
}
.footer-status ul { display: flex; flex-wrap: wrap; gap: 6px 26px; padding: 11px 0; border-block: 1px solid var(--ink-line); font-size: .75rem; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: var(--ink-text); }
.footer-status li { display: inline-flex; align-items: center; gap: 8px; }
.led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-up); box-shadow: 0 0 8px 1px rgba(74, 222, 128, .8); }
.led-dim { background: var(--ink-accent); box-shadow: 0 0 8px 1px rgba(103, 232, 249, .7); }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, .5) 30%, rgba(196, 181, 253, .4) 70%, transparent);
}
.site-footer a { color: var(--ink-text); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-col a::before { content: "›"; margin-right: 7px; color: var(--ink-accent); font-weight: 700; }
.footer-col a:hover { color: var(--ink-accent); }
/* phones: the three lists of links side by side, two by two, under the brand */
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; padding: 26px 0 16px; }
.footer-about { grid-column: 1 / -1; }
.footer-sources { margin-top: 8px; }
.footer-sources p + p, .footer-note + .footer-note { margin-top: 3px; }
.footer-sources .source { color: var(--ink-text); font-weight: 600; }
.footer-sources .source a { text-decoration: underline; text-decoration-color: var(--ink-line); }
.footer-note { margin-top: 8px; max-width: 34rem; }
.footer-col h2 { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.footer-col ul { margin-top: 4px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 30px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; border-top: 1px solid var(--ink-line); padding: 10px 0 20px; font-size: .75rem; }
.copy-domain { color: var(--ink-accent); font-weight: 700; letter-spacing: .24em; }

/* ---- wider screens -------------------------------------------------------------- */

@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .heat-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .history-index .col-spark { display: table-cell; }
}
/* the homepage's table has room for its month column alone on tablets, and
   beside the converter from 1280 px, where it takes the units' place (the
   units, when not 1, go under the name, as on narrow screens). Below that
   "Dirham din Emiratele Arabe Unite" would break over two lines;
   check-layout.cjs measures every name. */
@media (min-width: 720px) and (max-width: 999px), (min-width: 1280px) {
  .rates .col-spark { display: table-cell; }
}
@media (min-width: 1280px) {
  .rates .col-units { display: none; }
  .rates .units-inline { display: block; }
}

@media (min-width: 720px) {
  /* the two directions side by side, with a rule between them: the second
     block's figures read the other way round. Both give up the same width to
     the rule, or one direction would split into halves while the other, a few
     pixels narrower, would not */
  .preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 0; }
  .preset-grid > :first-child { padding-right: 24px; }
  .preset-grid > :nth-child(2) { padding-left: 24px; border-left: 1px solid var(--border); }
  .link-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .history-table, .history-index { max-width: 60rem; }
}

@media (min-width: 900px) {
  .rate-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .rate-now { text-align: right; }
  .rate-value { justify-content: flex-end; }
  .footer-grid { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
  .footer-about { grid-column: auto; }
}

/* the menu as a bar, its panels floating under it */
@media (min-width: 1000px) {
  .nav-toggle, .nav-burger { display: none; }
  .nav { margin-left: 10px; }
  .nav-list { align-items: center; gap: 2px; }
  .mega {
    position: absolute; top: calc(100% + 8px); left: 50%; z-index: 50; transform: translateX(-50%);
    width: min(1400px, 100vw - 32px); max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto;
    display: grid; gap: 16px 22px; padding: 16px;
    border: 1px solid transparent; border-radius: var(--radius);
    --mega-bg: rgba(8, 12, 24, .97);
    background:
      radial-gradient(40rem 14rem at 100% 0%, rgba(34, 211, 238, .10), transparent 70%) padding-box,
      linear-gradient(var(--mega-bg), var(--mega-bg)) padding-box,
      linear-gradient(135deg, rgba(103, 232, 249, .45), rgba(196, 181, 253, .18) 40%, var(--ink-line)) border-box;
    box-shadow: 0 40px 90px -28px rgba(0, 0, 0, .7), 0 0 40px -12px rgba(34, 211, 238, .25);
  }
  /* frosted where the browser can blur: the page shows through as colour
     only. Worst case, white under it: the muted text keeps 5:1 */
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .mega { --mega-bg: rgba(8, 12, 24, .84); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); }
  }
  .mega-rates { grid-template-columns: 26rem minmax(0, 1fr); }
  .mega-converter { grid-template-columns: 17rem repeat(3, minmax(0, 1fr)); }
  .mega-history { grid-template-columns: 17rem minmax(0, 1fr); }
  .mega-years { columns: 2; column-gap: 22px; }
  .mega-years li { break-inside: avoid; }

  /* the data on the left, the converter beside it: on the homepage the
     converter takes the middle column as soon as there is room for three
     (1400 px below), so it sits in the centre of the page */
  .layout { grid-template-columns: minmax(0, 1fr) 372px; align-items: start; }
  .layout:not(.layout-home) > .side-stack { grid-column: 1; grid-row: 1; }
  .layout:not(.layout-home) > .converter { grid-column: 2; grid-row: 1; }
  .layout-home { grid-template-areas: "table conv" "radar conv"; }
  .layout-home > .converter { grid-area: conv; }
  .layout-home > .rates { grid-area: table; }
  .layout-home > .radar-card { grid-area: radar; }
  .year-hero { grid-template-columns: minmax(0, 1fr) 270px; align-items: center; }
  .year-ring { display: block; }
  .heat-months { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 10px; }
  /* sticky under the menu at every desktop height. When the panel is taller
     than the window it scrolls inside itself, so its lower controls (VAT,
     options) stay reachable. No overscroll containment: the page must keep
     scrolling under the pointer. */
  .converter { position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; scrollbar-width: thin; }
}
/* the rate's page: the chart and the month's table side by side, the table
   scrolling within the chart's height */
@media (min-width: 1100px) {
  .rate-grid { grid-template-columns: minmax(0, 1fr) 420px; align-items: stretch; }
  .rate-grid > .history { display: flex; flex-direction: column; min-height: 0; }
  .rate-grid .table-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .rate-grid .table-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
}
@media (min-width: 1000px) {
  .api-layout { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .api-toc { position: sticky; top: calc(var(--header-h) + 12px); }
  .api-toc ol { display: grid; gap: 4px; }
  .api-toc a { display: flex; }
  .console-form { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
  .console-send { grid-column: auto; margin-top: 0; width: auto; }
  .console-date { grid-column: auto; }
}
@media (min-width: 1100px) {
  .api-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: end; }
}
@media (min-width: 1200px) {
  .ticker { display: flex; margin-right: 4px; }
  .mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* the homepage as a terminal: all the BNR rates on the left, the converter in
   the middle, the day's radar on the right */
@media (min-width: 1400px) {
  .layout-home { grid-template-columns: minmax(0, 1fr) 360px 300px; grid-template-areas: "table conv radar"; }
  .layout-home > .radar-card { position: sticky; top: calc(var(--header-h) + 12px); }
}
/* narrow desktop: the table gives up two columns, as on phones, instead of
   wrapping currency names under their codes */
@media (min-width: 1000px) and (max-width: 1199px) {
  /* beside the converter there is room for one direction at a time, not two */
  .side .preset-grid { grid-template-columns: minmax(0, 1fr); gap: 4px 18px; }
  .rates-table .col-units, .rates-table .col-abs { display: none; }
  .rates-table .units-inline, .rates-table .abs-inline { display: block; }
  .rates-table .abs-inline { font-weight: 400; }
  /* the name under its code, as on phones: at 1000 px the longest one does
     not fit beside it */
  .rates .rates-table .name { display: block; font-size: .75rem; line-height: 1.3; }
}
/* a name that does wrap hangs under itself, not under the code */
@media (min-width: 561px) {
  .rates-table tbody th:first-child { padding-left: 3.5em; text-indent: -3.5em; }
  .rates-table .code, .rates-table .units-inline { text-indent: 0; }
  /* the history tables have dates and links there, nothing to hang */
  .history-table tbody th:first-child, .history-index tbody th:first-child, .docs-table tbody th:first-child { padding-left: 0; text-indent: 0; }
}

/* ---- phones and tablets: the menu as a drawer ----------------------------------- */

@media (max-width: 999px) {
  .hero-home .hero-line { display: none; }
  .header-tools { order: 1; }
  .nav { order: 2; display: none; flex: 1 0 100%; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .nav-toggle:checked ~ .nav { display: block; }
  .nav-list { flex-direction: column; padding-bottom: 10px; }
  .nav-item { border-top: 1px solid var(--ink-line); }
  .nav-link { justify-content: space-between; width: 100%; min-height: 48px; padding: 0 4px; border-radius: 0; font-size: .9375rem; }
  .nav-link:hover, .menu[open] > .nav-link { background: none; }
  .mega { display: grid; gap: 12px; padding: 0 0 12px; }
}

@media (max-width: 560px) {
  :root { --gap: 10px; }
  .wrap { width: min(1400px, 100% - 24px); }
  .hero .wrap { padding-bottom: 14px; }
  .hero-overlap .wrap { padding-bottom: 38px; }
  .hero-solo .wrap { padding: 40px 0 56px; }
  .overlap { margin-top: -28px; }
  .page-head { padding-top: 8px; }
  .card { padding: 12px; border-radius: 12px; }
  /* the tiles scroll sideways: the converter stays near the top */
  .tiles { display: flex; gap: 8px; margin: 10px -12px 0; padding: 0 12px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .tiles li { flex: 0 0 46%; scroll-snap-align: start; }
  .hero .tile { padding: 8px 10px 6px; }
  .tile-rate { font-size: 1.125rem; }
  .hero .tile-spark { height: 20px; }
  .converter { padding: 12px 12px 10px; border-radius: 14px; }
  .conv-out { min-height: 7.9rem; }
  /* thumbs: the fields keep 44 px on a phone */
  input[type="text"], input[type="date"], select { min-height: 44px; }
  .conv-date input[type="date"] { min-height: 40px; }
  /* full-width lists show the whole currency name; the swap button sits beside them */
  .pair { grid-template-columns: minmax(0, 1fr) 44px; gap: 0 8px; align-items: center; }
  .pair .field { grid-column: 1; }
  .pair .swap { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 22px; width: 44px; height: 48px; }
  .pair .swap svg { transform: rotate(90deg); }
  .hero .btn-hero { width: 100%; }

  .col-abs, .col-units { display: none; }
  /* tighter figures, so both directions of the preset amounts stand side by
     side from 360 px up (at 320 px they wrap, one under the other) */
  .preset { font-size: .8125rem; }
  .preset th, .preset td { padding: 3px 4px; }
  .preset-grid { gap: 6px 12px; }
  .rates-table th, .rates-table td { padding: 8px 4px; line-height: 1.3; }
  .rates-table thead th { white-space: normal; letter-spacing: .06em; line-height: 1.25; vertical-align: bottom; }
  .rates-table tbody th { width: 100%; }
  .rates-table .name { display: block; font-size: .6875rem; }
  .units-inline, .abs-inline { display: block; }
  .abs-inline { font-weight: 400; }
  .docs-table tbody th { white-space: normal; padding-right: 8px; }
  /* "currency_not_quoted" has no place to break: at 320 px it may break anywhere */
  .docs-table code { overflow-wrap: anywhere; }
  .stats { gap: 6px; }
  .stat-value { font-size: 1rem; }
  .history-table th, .history-table td { padding: 8px 4px; }
  /* at 320 px a date on one line would push the percentage out of view */
  .history-table tbody th { white-space: normal; }
  .history-index th, .history-index td { padding-inline: 4px; }
  .month-avg { display: block; margin: 2px 0 0; }
  .rate-figure { font-size: 2.25rem; }
  /* the buttons fill the row, each an equal share */
  .chart-card .chart-tabs { display: grid; flex: 1 0 100%; grid-auto-columns: minmax(0, 1fr); }
  .chart-tab { min-width: 0; padding: 0 4px; min-height: 34px; }
  .chart-pct { font-size: 1.25rem; }
  .hero-line { height: min(46%, 160px); }
  .chart-x li:nth-child(2), .chart-x li:nth-child(4) { display: none; }
  .chart-legend { gap: 4px 14px; }
}
@media (max-width: 479px) {
  .mega-rate { grid-template-columns: 3em minmax(0, 1fr) auto 5.4em; }
  .mega-rate .spark { display: none; }
}

/* Motion only for those who have not asked for less, and nothing that moves
   on its own for more than five seconds without a way to stop it (WCAG
   2.2.2): the tape stops under the pointer and with its button; a chart draws
   itself once; its last day pulses twice; the converter's beam runs only
   while the pointer or the focus is in it; the homepage's scan passes once. */
@media (prefers-reduced-motion: no-preference) {
  .btn, .swap, .chip, .text-btn, .nav-link, .mega-rate, .code-links a, .chart-tab, input, select { transition: background-color .15s, border-color .15s, color .15s, text-decoration-color .15s, box-shadow .2s, filter .2s; }
  .hero .tile { transition: box-shadow .25s, transform .25s cubic-bezier(.2, .8, .2, 1); }
  .hero .tile:hover { transform: translateY(-2px); }
  .mark-orbit { transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
  .brand:hover .mark-orbit { transform: rotate(-24deg); }
  .chev { transition: transform .15s; }
  .menu[open] > .mega { animation: mega-in .18s cubic-bezier(.2, .8, .2, 1); }
  .cal:not([hidden]) { animation: cal-in .2s cubic-bezier(.2, .8, .2, 1); }
  @keyframes cal-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
  .cal-swap { animation: cal-swap .22s ease-out; }
  @keyframes cal-swap { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
  .cal-day { transition: background-color .12s, box-shadow .2s; }
  @keyframes mega-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
  .tape-on .tape-track { animation: tape 150s linear infinite; }
  .tape:hover .tape-track, .tape:focus-within .tape-track, .tape-toggle:checked ~ .tape-view .tape-track { animation-play-state: paused; }
  @keyframes tape { to { transform: translateX(-100%); } }
  .chart-tabs::before { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .t-typed { animation: t-type .9s steps(40, end) .15s both; }
  @keyframes t-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .api-term .t-out { animation: t-show .35s ease-out 1s both; }
  @keyframes t-show { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  /* a chart draws itself from left to right when it appears, and again for
     every other period, a light running ahead of the line */
  .chart-svg { animation: chart-draw 1s cubic-bezier(.3, .7, .2, 1) both; }
  @keyframes chart-draw { from { clip-path: inset(-24px 100% -24px -24px); } to { clip-path: inset(-24px -24px -24px -24px); } }
  .chart-scan {
    display: block; position: absolute; inset: -8px 0; pointer-events: none;
    background: linear-gradient(90deg, transparent calc(100% - 90px), rgba(34, 211, 238, .22) calc(100% - 3px), var(--chart-b) calc(100% - 1px), transparent);
    animation: chart-scan 1s cubic-bezier(.3, .7, .2, 1) both;
  }
  @keyframes chart-scan { 0% { transform: translateX(-100%); opacity: 1; } 82% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
  .chart-pulse { animation: chart-pulse 2.2s ease-out 1s 2; }
  @keyframes chart-pulse { 0% { stroke-width: 10; opacity: .5; } 75%, 100% { stroke-width: 38; opacity: 0; } }
  .chart-cross, .chart-crossh, .chart-hover { transition: transform .06s linear; }
  .heat-grid rect { transition: stroke-width .1s; }
  .year-ring .ring-bars, .radar .radar-spokes { transform-origin: 180px 180px; animation: ring-in 1.1s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes ring-in { from { opacity: 0; transform: rotate(-24deg) scale(.9); } to { opacity: 1; transform: none; } }
  /* the homepage wakes up: one line of light down the screen */
  body:has(.hero-home)::after {
    content: ""; position: fixed; left: 0; right: 0; top: 0; z-index: 100; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, #67e8f9 30%, #a78bfa 70%, transparent);
    box-shadow: 0 0 24px 6px rgba(34, 211, 238, .35);
    animation: boot 1.2s cubic-bezier(.4, .1, .3, 1) .1s both;
  }
  @keyframes boot { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 90% { opacity: .7; } 100% { opacity: 0; transform: translateY(100vh); } }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .converter:hover, .converter:focus-within { animation: beam 4.5s linear infinite; }
  @keyframes beam { to { --beam: 560deg; } }
}
/* no motion: the tape is a row that scrolls by hand, its second copy gone */
@media (prefers-reduced-motion: reduce) {
  .tape-on .tape-view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .tape-track + .tape-track, .tape-pause, .tape-toggle { display: none; }
}

/* Windows contrast themes repaint borders: keep the triangles triangles */
@media (forced-colors: active) {
  .arrow { forced-color-adjust: none; }
  .chg-up .arrow { border-bottom-color: CanvasText; }
  .chg-down .arrow, .chg-flat .arrow { border-top-color: CanvasText; }
  .converter, .card, .mega, .tile { border: 1px solid CanvasText; }
  .rate-figure, .hero .page-head h1, .hero-kicker, .brand-name b, .conv-value { background: none; -webkit-text-fill-color: currentColor; }
  .chart-line, .spark-line, .hero-line-path, .ring-up, .ring-down, .radar-up, .radar-down { stroke: CanvasText; }
  .chart-ytag, .chart-xtag { border: 1px solid CanvasText; }
  .chart-tabs::before { display: none; }
  .chart-radio:checked + .chart-tab { outline: 2px solid CanvasText; }
}

@media print {
  .site-header, .tape, .skip-link, .conv-actions, #conv-form, .conv-options, .tiles, .site-footer nav { display: none; }
  body, .hero, .site-footer { background: none; color: #000; }
  .page-head .lead, .crumbs { color: #333; }
  .overlap { margin-top: 0; }
  .card, .converter { box-shadow: none; border: 0; padding: 0; background: none; }
  .card::before, .converter::before, .hero::before, .hero::after, .hero-line, .year-ring, .radar-card, .chart-tabs, .chart-scan { display: none; }
  .rate-figure, .hero .page-head h1, .hero-kicker, .brand-name b, .conv-value { background: none; -webkit-text-fill-color: currentColor; filter: none; }
  .chart-svg { animation: none; filter: none; }
}