/* DR Markets — the shared surface for Assay and wavelab.
 *
 * The same tokens valorvenal uses, because three products under one company that look
 * like three companies is a choice nobody made on purpose. Navy #202C4C, accent #2563EB,
 * teal #06B6D4, Sora for headings, Inter for text.
 *
 * FONTS ARE SELF-HOSTED, and not as a preference. assay.dr-techsolutions.com ships
 * `default-src 'self'` with no external style or font source, so a Google Fonts link
 * silently falls back to the system stack and the page quietly stops being branded.
 * Latin only: Spanish, Catalan and English all live inside it, and latin-ext would have
 * added 340 KB for characters none of the three languages use.
 *
 * One file per family, not one per weight. Google serves a VARIABLE font for these, so
 * the five files this used to declare were two distinct files under five names — the same
 * 48 KB fetched three times. A weight RANGE on the descriptor is what a variable font
 * wants: the browser pins the wght axis per use. The ranges are the axes the files
 * actually carry (Inter 100-900, Sora 400-800), not the CSS maximum.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.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;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/sora-latin.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;
}

:root {
  /* Corporate. Identical to valorvenal's globals.css — change them there and here together. */
  --brand-navy:    #202C4C;
  --accent:        #2563EB;
  --accent-600:    #1D4ED8;
  --accent-2:      #06B6D4;

  --bg:            #080C18;
  --bg-alt:        #0C1120;
  --surface:       rgba(255,255,255,0.045);
  --surface-2:     rgba(255,255,255,0.08);
  --surface-3:     rgba(255,255,255,0.11);

  --text:          rgba(255,255,255,0.88);
  --text-muted:    rgba(255,255,255,0.65);
  --text-faint:    rgba(255,255,255,0.50);
  --heading:       #ffffff;

  --border:        rgba(255,255,255,0.08);
  --border-hi:     rgba(255,255,255,0.16);
  --header-bg:     rgba(8,12,24,0.80);

  --ok:            #34D399;
  --warn:          #FBBF24;
  --err:           #F87171;

  /* Market colours stay conventional — green up, red down — because a chart that
   * renders them in brand colours is a chart nobody can read at a glance. */
  --up:            #26A69A;
  --down:          #EF5350;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Sora', 'Inter', -apple-system, sans-serif;
  --font-num:  ui-monospace, 'SF Mono', Menlo, monospace;

  --radius:    12px;
  --radius-sm: 8px;
  --header-h:  58px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--heading);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ── the header lockup ──────────────────────────────────────────────────────────
 * [DR]  Assay          with DR MARKETS above the product name, small.
 * The same shape valorvenal uses: mark at 26px, name in Sora 800, one word accented.
 */
.appbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 22px;
  /* Wraps instead of overflowing. wavelab's bar carries the brand, both page tabs, the
     symbol, the price, the change and four two-line timeframe buttons — 999 px of content
     that a phone cannot show in one row. With a fixed `height` and no wrapping it ran off
     the right edge and took the layout viewport with it: the chart sat at 390 px while the
     document was 999 wide, so the whole page was scrolled sideways on a phone.
     `min-height` rather than a breakpoint, so the bar reflows when its own content stops
     fitting rather than at a width guessed here. On a desktop the row is ~34 px tall and
     the 58 px minimum still governs, so nothing above the fold moves. */
  flex-wrap: wrap;
  row-gap: 10px;
  min-height: var(--header-h);
  padding: 8px 20px;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { display: block; flex: none; width: 26px; height: 26px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-eyebrow {
  font-family: var(--font-head); font-size: 8.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 3px;
}
.brand-name {
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 800;
  color: var(--heading); letter-spacing: -0.02em;
}
.brand-name span { color: var(--accent); }

/* ── navigation ─────────────────────────────────────────────────────────────── */
.pages { display: flex; gap: 2px; }
.pages a {
  color: var(--text-faint); text-decoration: none;
  padding: 6px 13px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; transition: color .12s, background .12s;
}
.pages a:hover { color: var(--text); background: var(--surface); }
.pages a.on { color: var(--heading); background: rgba(37,99,235,.16); font-weight: 600; }

.lang { display: flex; align-items: center; gap: 1px; margin-left: auto; flex: none; }
.lang button {
  background: transparent; border: 0; color: var(--text-faint);
  font: 600 11px/1 var(--font-body); letter-spacing: .06em;
  padding: 6px 9px; border-radius: 6px; cursor: pointer;
}
.lang button:hover { color: var(--text); background: var(--surface); }
.lang button[aria-pressed=true] { color: var(--heading); background: rgba(37,99,235,.16); }

/* ── shared pieces ──────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 10px/1 var(--font-head); letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
.chip-ok   { background: rgba(52,211,153,.14); color: var(--ok); }
.chip-warn { background: rgba(251,191,36,.14); color: var(--warn); }
.chip-err  { background: rgba(248,113,113,.14); color: var(--err); }
.chip-mute { background: var(--surface-2); color: var(--text-faint); }
.chip-info { background: rgba(37,99,235,.16); color: #7FA9FF; }

.num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }