/* ==========================================================================
   qtLandingPage.css  —  QTrack.ca landing page
   Neutrals come from theme-kit.js (var(--ink|panel|hair|text|muted|...)).
   Semantic market colors (gain/loss) are fixed here so their meaning never
   shifts when the theme changes. Do not route these through the theme.
   ========================================================================== */

:root {
  /* Fixed semantic colors — readable on all six theme backgrounds */
  --gain: #2ebd85;
  --loss: #f6465d;
  --gain-rgb: 46, 189, 133;
  --loss-rgb: 246, 70, 93;

  /* Layout tokens */
  --qt-maxw: 1120px;
  --qt-gap: 14px;
  --qt-radius: 14px;
  --qt-radius-sm: 10px;
  --qt-pad: clamp(16px, 4vw, 32px);

  --qt-num: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
            "Roboto Mono", Menlo, Consolas, monospace;
  --qt-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
             "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

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

/* thin, theme-coloured scrollbars on any scrollable panel */
* { scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }
::-webkit-scrollbar-track { background: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font-family: var(--qt-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ------------------------------------------------------------------ topbar */
.qt-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px var(--qt-pad);
  background: linear-gradient(180deg, var(--topbar-top), var(--ink));
  border-bottom: 1px solid var(--hair-soft);
  backdrop-filter: saturate(1.1) blur(6px);
}

.qt-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.qt-brand__mark {
  width: 30px;
  height: 30px;
  display: block;
  color: var(--text);        /* the inline SVG uses currentColor */
  flex: none;
}
.qt-brand__word {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.qt-brand__tld { color: var(--muted); font-weight: 500; }

/* section nav (scrolls to the title bars) */
.qt-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}
.qt-nav a {
  text-decoration: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 7px;
  transition: color .15s ease, background .15s ease;
}
.qt-nav a:hover { color: var(--text); background: var(--panel-2); }

.qt-topbar__spacer { flex: 1 1 auto; }

.qt-topbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.qt-clock {
  font-family: var(--qt-num);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

/* hide the section nav (and, when very tight, the clock) on small screens */
@media (max-width: 860px) { .qt-nav { display: none; } }
@media (max-width: 560px) { .qt-clock { display: none; } }

/* theme-kit toggle is self-styled; just give it room */
#theme-toggle { display: inline-flex; }

/* session button (label is the PHP $brandbar) — high-contrast on any theme */
.qt-session {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--hair);
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.qt-session:hover { color: var(--text); border-color: var(--muted-2); }
.qt-session:active { transform: translateY(1px); }
.qt-session__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gain);
}
.qt-session--out .qt-session__dot { background: var(--muted-2); }

/* --------------------------------------------------------------- container */
.qt-wrap {
  max-width: var(--qt-maxw);
  margin: 0 auto;
  padding: 0 var(--qt-pad);
}

/* -------------------------------------------------------------------- hero */
.qt-hero {
  padding: clamp(36px, 7vw, 68px) 0 clamp(20px, 4vw, 32px);
}
.qt-hero__title {
  margin: 0 0 12px;
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1.05;
  font-weight: 680;
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.qt-hero__sub {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(15px, 2.2vw, 18px);
}

/* --------------------------------------------------------------- pricebar */
.qt-pricebar {
  display: flex;
  border: 1px solid var(--hair);
  border-radius: var(--qt-radius);
  background: var(--panel);
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 14px;
}
.pb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 0;
  min-width: 92px;
  padding: 12px clamp(8px, 1.6vw, 14px);
  text-align: center;
  border-left: 1px solid var(--hair-soft);
}
.pb-item:first-child { border-left: none; }
.pb-item__lab {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pb-item__val {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.pb-item__px {
  font-family: var(--qt-num);
  font-variant-numeric: tabular-nums;
  font-size: clamp(13px, 2.4vw, 15.5px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pb-item__chg {
  font-family: var(--qt-num);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.pb-item[data-dir="up"]   .pb-item__chg { color: var(--gain); }
.pb-item[data-dir="down"] .pb-item__chg { color: var(--loss); }

/* ------------------------------------------------------------- ratio ribbon */
.qt-ribbon {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--hair);
  border-radius: var(--qt-radius);
  background: var(--panel);
  overflow: hidden;
  margin-bottom: 6px;
}
@media (min-width: 760px) { .qt-ribbon { grid-template-columns: repeat(4, 1fr); } }

.qt-ribbon__stamp {
  margin: 0 2px 18px;
  text-align: right;
  font-size: 11px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  min-height: 14px;             /* reserve space so nothing shifts on load */
}

.ratio {
  display: flex;
  flex-direction: column;
  align-items: center;          /* centered content, per request */
  justify-content: center;
  gap: 7px;
  padding: 14px clamp(10px, 2vw, 16px);
  text-align: center;
  border-left: 1px solid var(--hair-soft);
  border-top: 1px solid var(--hair-soft);
  min-width: 0;
}
.ratio__labelrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.ratio__info-btn {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: none; background: none;
  color: var(--muted-2);
  cursor: pointer;
  border-radius: 50%;
  transition: color .15s ease, background .15s ease;
}
.ratio__info-btn:hover,
.ratio__info-btn:focus-visible { color: var(--text); background: var(--panel-2); }
.ratio__info-btn svg { width: 14px; height: 14px; display: block; }
/* first row has no top border; first cell of each row no left border */
.ratio:nth-child(-n + 2) { border-top: none; }
.ratio:nth-child(odd) { border-left: none; }
@media (min-width: 760px) {
  .ratio { border-top: none; }
  .ratio:nth-child(odd) { border-left: 1px solid var(--hair-soft); }
  .ratio:first-child { border-left: none; }
}
.ratio:focus-visible { outline: 2px solid var(--gain); outline-offset: -2px; }

.ratio__label {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.25;
}
.ratio__val {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.ratio__num {
  font-family: var(--qt-num);
  font-variant-numeric: tabular-nums;
  font-size: clamp(17px, 3.4vw, 20px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ratio__chg {
  font-family: var(--qt-num);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.ratio[data-dir="up"]   .ratio__chg { color: var(--gain); }
.ratio[data-dir="down"] .ratio__chg { color: var(--loss); }
/* mini range bar: same idea as the tiles, marker colored by 12h pct sign */
.rbar {
  position: relative;
  width: min(150px, 80%);
  height: 5px;
  border-radius: 3px;
  background: var(--hair);          /* brighter than panel-2 so the track reads */
  border: 1px solid var(--muted-2);
  cursor: help;
}
.rbar__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--muted);
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--hair);
  transition: left .4s ease;
}
.ratio[data-dir="up"]   .rbar__dot { background: var(--gain); }
.ratio[data-dir="down"] .rbar__dot { background: var(--loss); }

/* --------------------------------------------------------------- tooltip */
.qt-tip {
  position: fixed;
  z-index: 100;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12.5px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  white-space: pre-line;        /* honor \n as line breaks */
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  max-width: 240px;
}

/* ---------------------------------------------------------- ratio dialog */
.rd {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 22px 22px 18px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
/* the yield-curve explainer holds more prose — widen it and let it size to its
   content so desktop shows no scrollbar; short viewports still scroll (themed). */
#rates-dialog { width: min(800px, calc(100vw - 32px)); }
.rd::backdrop { background: rgba(0, 0, 0, .55); }

.rd__closewrap { position: absolute; top: 12px; right: 12px; margin: 0; }
.rd__close {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair-soft);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.rd__close:hover { color: var(--text); }

.rd__title {
  margin: 0 40px 4px 0;
  font-size: 19px; font-weight: 660; letter-spacing: -0.01em;
}
.rd__def {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13.5px; line-height: 1.5;
}

.rd__data {
  border: 1px solid var(--hair-soft);
  border-radius: 12px;
  background: var(--panel-2);
  padding: 14px 14px 12px;
  margin-bottom: 16px;
}
.rd__now { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; }
.rd__val {
  font-family: var(--qt-num); font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 600; letter-spacing: -0.01em;
}
.rd__chg {
  font-family: var(--qt-num); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 600; color: var(--muted);
}
.rd[data-dir="up"]   .rd__chg { color: var(--gain); }
.rd[data-dir="down"] .rd__chg { color: var(--loss); }

.rd__track {
  position: relative; height: 6px; border-radius: 3px;
  background: var(--hair); border: 1px solid var(--muted-2);
}
.rd__mark {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--muted);
  border: 2px solid var(--panel-2);
  box-shadow: 0 0 0 1px var(--hair);
}
.rd[data-dir="up"]   .rd__mark { background: var(--gain); }
.rd[data-dir="down"] .rd__mark { background: var(--loss); }
.rd__ends {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
  font-family: var(--qt-num); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--muted);
}
.rd__cap { color: var(--muted-2); font-size: 11px; }

.rd__body .ri-desc { margin: 0 0 14px; font-size: 14px; line-height: 1.6; }
.rd__body .ri-points { margin: 0; padding-left: 18px; }
.rd__body .ri-points li {
  margin-bottom: 10px;
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
}
.rd__body .ri-points li:last-child { margin-bottom: 0; }
.rd__body .ri-points strong { color: var(--text); font-weight: 600; }

/* prose paragraphs in the yield-curve dialog */
#rates-dialog .rd__body p {
  margin: 0 0 12px;
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
#rates-dialog .rd__body p:last-child { margin-bottom: 0; }
#rates-dialog .rd__body p strong { color: var(--text); font-weight: 600; }
#rates-dlg-status { text-transform: capitalize; }

.rd__note {
  margin: 16px 0 0;
  font-size: 11.5px; color: var(--muted-2);
}

/* ------------------------------------------------------------------- board */
.qt-board { padding-bottom: clamp(28px, 5vw, 44px); }

.qt-board__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.qt-board__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.qt-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
}
.qt-status__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted-2);
  box-shadow: 0 0 0 0 rgba(var(--gain-rgb), .5);
}
.qt-status[data-state="live"] .qt-status__dot {
  background: var(--gain);
  animation: qt-pulse 2s ease-out infinite;
}
.qt-status[data-state="down"] .qt-status__dot { background: var(--loss); }
.qt-status__clock { margin-left: auto; font-variant-numeric: tabular-nums; }

@keyframes qt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--gain-rgb), .45); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--gain-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--gain-rgb), 0); }
}

/* grid: 1 col mobile · 2 col tablet · 3 col desktop */
.qt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--qt-gap);
}
@media (min-width: 560px) { .qt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .qt-grid { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------- tile */
.tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--qt-radius);
  background: var(--panel);
  padding: 16px 16px 14px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
/* 24h-change tint sits under the content */
.tile__tint {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.tile__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tile__sym {
  font-weight: 650;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.tile__chg {
  font-family: var(--qt-num);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.tile[data-dir="up"]   .tile__chg { color: var(--gain); }
.tile[data-dir="down"] .tile__chg { color: var(--loss); }

.tile__price {
  margin-top: 6px;
  font-family: var(--qt-num);
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 4.4vw, 27px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.tile__tick {
  font-size: 0.5em;
  margin-left: 0.34em;
  vertical-align: 0.12em;
  line-height: 1;
}
.tile__tick[data-dir="up"]   { color: var(--gain); }
.tile__tick[data-dir="down"] { color: var(--loss); }

.tile__spark {
  width: 100%;
  height: 34px;
  margin: 10px 0 4px;
  display: block;
  overflow: visible;
}
.tile__spark polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.tile[data-dir="up"]   .tile__spark polyline { stroke: var(--gain); }
.tile[data-dir="down"] .tile__spark polyline { stroke: var(--loss); }
.tile__spark polyline.flat { stroke: var(--muted-2); }

/* 24h low→high position bar, with a VWAP "V" above and a price dot on the track */
.tile__range { margin-top: auto; padding-top: 10px; cursor: help; }

.range__vwap {
  position: relative;
  height: 13px;
  margin-bottom: 3px;
}
.range__v {
  position: absolute;
  left: 50%;
  bottom: 0;
  visibility: hidden;              /* shown once a VWAP is known */
  color: var(--muted);
  line-height: 0;
  transform: translateX(-50%);
  transition: left .4s ease;
}
.range__v svg { width: 15px; height: 12px; display: block; }

.range__track {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: var(--hair);          /* match the ribbon track brightness */
  border: 1px solid var(--muted-2);
}
/* current price: a circle tinted by the 24h change, lifted off the track */
.range__mark {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  width: 11px; height: 11px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--muted);
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--hair);
  transition: left .3s ease;
}
.tile[data-dir="up"]   .range__mark { background: var(--gain); }
.tile[data-dir="down"] .range__mark { background: var(--loss); }
.range__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--qt-num);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted-2);
}

.tile__meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.tile[data-state="na"] { opacity: .55; }
.tile[data-state="na"] .tile__price::after { content: "unavailable"; }

/* ----------------------------------------------------------------- teasers */
.qt-tools {
  padding: clamp(24px, 5vw, 40px) 0 clamp(40px, 7vw, 64px);
  border-top: 1px solid var(--hair-soft);
}
.qt-tools__title {
  margin: 0 0 4px;
  font-size: clamp(19px, 3vw, 24px);
  font-weight: 660;
  letter-spacing: -0.02em;
}
.qt-tools__sub {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 15px;
  max-width: 60ch;
}
.qt-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--qt-gap);
}
@media (min-width: 720px) { .qt-cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 1px solid var(--hair);
  border-radius: var(--qt-radius);
  background: var(--panel);
  padding: 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--muted-2); }
.card__tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 3px 9px;
  border: 1px solid var(--hair);
  border-radius: 999px;
}
.card__name { font-size: 17px; font-weight: 640; letter-spacing: -0.01em; }
.card__desc { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* ------------------------------------------------------------- rates panel */
.qt-rates {
  margin-bottom: clamp(28px, 5vw, 44px);
  border: 1px solid var(--hair);
  border-radius: var(--qt-radius);
  background: var(--panel);
  padding: 16px clamp(14px, 2.5vw, 20px) 14px;
}
/* section title bars (Relative Ratios / US Treasury Yields and Markets) */
.qt-secbar {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.qt-sec-title { margin: 0; font-size: 15px; font-weight: 600; }
.qt-sec-sub { font-size: 12px; color: var(--muted); }
[id^="sec-"] { scroll-margin-top: 76px; }
.qt-board__head { scroll-margin-top: 76px; }

.qt-rates__head {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.qt-modes { display: inline-flex; gap: 4px; }
.qt-rates__spread {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-variant-numeric: tabular-nums;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--hair-soft); background: var(--panel-2);
}
.qt-rates__spread:empty { display: none; }
.rsp__k { color: var(--muted); font-weight: 600; }
.rsp__s { font-weight: 600; }
.qt-rates__spread[data-state="normal"] .rsp__v,
.qt-rates__spread[data-state="normal"] .rsp__s { color: var(--gain); }
.qt-rates__spread[data-state="inverted"] .rsp__v,
.qt-rates__spread[data-state="inverted"] .rsp__s { color: var(--loss); }
.qt-rates__ranges { display: inline-flex; gap: 4px; margin-left: auto; }
.qt-rates__stamp {
  font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums;
}
.rbtn {
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--hair-soft); border-radius: 7px;
  padding: 3px 9px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.rbtn:hover { color: var(--text); }
.rbtn.is-active { color: var(--ink); background: var(--text); border-color: var(--text); }

#qt-treasury-chart { width: 100%; height: 320px; position: relative; }
@media (max-width: 640px) { #qt-treasury-chart { height: 240px; } }

.qt-cht-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--panel-2);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  min-width: 120px;
}
.qt-cht-tip__date { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.qt-cht-tip__row { display: flex; align-items: center; gap: 6px; }
.qt-cht-tip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.qt-cht-tip__lab { font-weight: 600; color: var(--text); }
.qt-cht-tip__val { margin-left: auto; color: var(--text); }

.qt-rates__legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rlg {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--hair-soft);
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: opacity .15s ease;
}
.rlg--off { opacity: .4; }
.rlg__dot { width: 9px; height: 9px; border-radius: 50%; }
.rlg__lab { font-weight: 600; }
.rlg__val { color: var(--muted); }

/* ------------------------------------------------------------------ footer */
.qt-foot {
  padding: 22px var(--qt-pad);
  border-top: 1px solid var(--hair-soft);
  color: var(--muted-2);
  font-size: 13px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.qt-foot__spacer { flex: 1 1 auto; }
.qt-foot__leaf { margin-left: 6px; text-decoration: none; }
.qt-foot__leaf svg { height: 14px; width: auto; vertical-align: -2px; display: inline-block; }
.qt-foot__leaf:hover { opacity: .82; }
.qt-foot__leaf:focus-visible { outline: 2px solid var(--gain); outline-offset: 2px; border-radius: 3px; }

/* --------------------------------------------------------------- a11y / etc */
:focus-visible {
  outline: 2px solid var(--gain);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .qt-status[data-state="live"] .qt-status__dot { animation: none; }
  .range__mark, .range__v, .rbar__dot { transition: none; }
  * { scroll-behavior: auto; }
}