/* ECO Cost Index — self-hosted fonts, brand theme, shared page styles.
 *
 * Loaded after ds.css, which supplies the Industry design system's component
 * classes (.btn, .input, .tag, .blueprint, …). This file overrides the design
 * system's tokens with the ECO palette — exactly the :root block every
 * prototype page repeated inline — and adds the handful of page-level classes
 * the pages defined for themselves.
 */

/* ── Fonts ──────────────────────────────────────────────────────────────────
 * IBM Plex, latin subset, served from /static/fonts. Vendored from
 * @fontsource/ibm-plex-* (SIL OFL 1.1 — see fonts/LICENSE.txt). Only the
 * weights the design actually uses are shipped: Sans 400/500/600/700,
 * Serif 500/600/700, Mono 400/500. 204 KB total.
 *
 * font-display: swap so text paints immediately in the fallback rather than
 * blocking on the download.
 */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-serif-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-serif-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-serif-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* ── Brand theme ────────────────────────────────────────────────────────────
 * Overrides the Industry design system's steel-blue defaults. Values are
 * carried over verbatim from the prototype pages.
 */
:root {
  --color-bg: #ffffff;
  --color-surface: #f5f6f8;
  --color-text: #1a1d21;
  --color-accent: #0e7c86;
  --color-divider: #e2e5ea;

  --color-accent-100: #e4f3f4;
  --color-accent-200: #c2e4e6;
  --color-accent-300: #8fccd0;
  --color-accent-400: #4fa9b0;
  --color-accent-500: #0e7c86;
  --color-accent-600: #0c6b74;
  --color-accent-700: #0a565e;
  --color-accent-800: #083f45;
  --color-accent-900: #062c30;

  --font-heading: 'IBM Plex Serif', Georgia, serif;
  --font-heading-weight: 600;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --navy: #0f2a47;
  --navy-700: #123252;
  --ink-dark: #e7eaee;
  --brass: #b8862f;

  /* Muted greys the pages used as literals throughout. */
  --ink-muted: #475059;
  --ink-soft: #6b7480;
  --ink-faint: #9aa2ab;
  --row-stripe: #f7f9fa;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
  letter-spacing: -0.012em;
}

a {
  color: var(--color-accent);
}
a:hover {
  color: var(--color-accent-700);
}

/* Native select arrow, drawn with gradients so it needs no image or script. */
select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #7d8794 50%),
    linear-gradient(135deg, #7d8794 50%, transparent 50%);
  background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* ── Cost index table ───────────────────────────────────────────────────────
 * Lifted from CostIndex.dc.html's inline <style> block.
 */
.idx-th {
  padding: 13px 14px;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(231, 234, 238, 0.74);
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
  background: var(--navy);
  text-align: left;
}
.idx-th[data-sort] {
  cursor: pointer;
}
.idx-th[data-sort]:hover {
  color: #fff;
}
/* The sort control is a real button so it is keyboard reachable; it inherits
   the header's type rather than the browser's default. */
.idx-th button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.idx-th button:focus-visible {
  outline: 2px solid var(--color-accent-300);
  outline-offset: 2px;
}
.idx-td {
  padding: 12px 14px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.idx-row:nth-child(even) {
  background: var(--row-stripe);
}
.idx-row:hover {
  background: #eef4f4;
}

/* Redacted placeholder rows shown to non-subscribers.
 *
 * The prototype rendered real rate data here and blurred it with CSS, which
 * meant the "locked" values were sitting in the DOM. These bars contain no
 * data at all — the rows they stand in for were never sent. */
.idx-locked-bar {
  display: block;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-divider), #eef1f4);
}

/* ── Utilities ──────────────────────────────────────────────────────────── */
.mono {
  font-family: var(--font-mono);
}

/* Visible only to assistive technology. Used for live-region announcements and
   labels the visual design carries by position instead. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}