/* Live prices for Investing. Built on the site's own tokens, so every theme and the dark grounds carry through. */
.lv {
  --lv-up: color-mix(in srgb, #1f8a4c 72%, var(--ink));
  --lv-dn: color-mix(in srgb, #c0412a 72%, var(--ink));
  --lv-ease: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
}
.iv-quote, .lv-card {
  --lv-up: #86dca2;
  --lv-dn: #f19a88;
}

/* ───────── status dot ───────── */
.lv-dot {
  position: relative; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lv-up); flex: none;
}
.lv-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit;
  animation: lv-ping 2.4s var(--lv-ease) infinite;
}
.is-closed .lv-dot, .lv-dot.is-closed { background: color-mix(in srgb, currentColor 40%, transparent); }
.is-closed .lv-dot::after, .lv-dot.is-closed::after { animation: none; }
@keyframes lv-ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(3.2); opacity: 0; } }

/* ───────── the index deck ───────── */
.lv-deck { margin: 4px 0 0; }
.lv-figs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink);
}
.lv-figs > div { padding: 18px 20px 20px 0; min-width: 0; }
.lv-figs > div + div { padding-left: clamp(16px, 2.4vw, 32px); border-left: var(--hair-w) solid var(--hair); }
.lv-figs b {
  display: block; font: 200 clamp(40px, 5.2vw, 64px)/1 var(--stat); letter-spacing: -.035em; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.lv-figs span {
  display: block; margin-top: 10px; font: var(--lbl-w) var(--lbl-xs)/1.35 var(--sans); letter-spacing: var(--trk-xs);
  text-transform: uppercase; color: var(--ink-2);
}
.lv-figs em { font-style: normal; color: var(--bronze); }
.lv-status {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 0 16px; border-bottom: var(--hair-w) solid var(--hair);
  font: 400 12.5px/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums;
}

/* ───────── the control bar ───────── */
.lv-bar {
  position: sticky; top: var(--lv-top, 0px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  padding: 12px 0; border-bottom: var(--hair-w) solid var(--hair);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
}
.lv-search { position: relative; flex: 1 1 220px; max-width: 340px; min-width: 0; }
.lv-search svg { position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 15px; height: 15px; color: var(--ink-2); pointer-events: none; }
.lv-search input {
  width: 100%; box-sizing: border-box; padding: 9px 30px 9px 24px; border: 0; border-bottom: 1px solid var(--hair-strong); border-radius: 0;
  background: transparent; color: var(--ink); font: 400 15px/1.3 var(--sans); outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color var(--d-2, 320ms) var(--lv-ease);
}
.lv-search input::placeholder { color: var(--ink-2); opacity: .8; }
.lv-search input:focus { border-bottom-color: var(--ink); }
.lv-search kbd {
  position: absolute; right: 0; top: 50%; translate: 0 -50%; font: 500 11px/1 var(--sans); color: var(--ink-2);
  padding: 3px 6px; border: 1px solid var(--hair-strong); border-radius: 5px; pointer-events: none; transition: opacity var(--d-1, 160ms);
}
.lv-search input:focus ~ kbd, .lv-search input:not(:placeholder-shown) ~ kbd { opacity: 0; }
@media (hover: none) { .lv-search kbd { display: none; } }

.lv-seg {
  position: relative; display: inline-flex; padding: 3px; border-radius: var(--r-pill, 999px);
  background: color-mix(in srgb, var(--ink) 6%, transparent); max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.lv-seg::-webkit-scrollbar { display: none; }
.lv-seg i {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: inherit; background: var(--paper);
  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--ink) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--ink) 20%, transparent);
  transition: transform var(--d-3, 560ms) var(--lv-ease), width var(--d-3, 560ms) var(--lv-ease); pointer-events: none;
}
.lv-seg button {
  position: relative; z-index: 1; appearance: none; -webkit-appearance: none; border: 0; background: none; cursor: pointer; white-space: nowrap;
  padding: 7px 14px; border-radius: inherit; font: 500 13px/1.2 var(--sans); color: var(--ink-2); transition: color var(--d-2, 320ms);
}
.lv-seg button[aria-pressed="true"] { color: var(--ink); }
.lv-seg button sup { margin-left: 5px; font: 400 11px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); vertical-align: baseline; }
.lv-seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
@media (hover: hover) { .lv-seg button:hover { color: var(--ink); } }

.lv-sort { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--sans); color: var(--ink-2); }
.lv-sort select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--ink); cursor: pointer;
  font: 500 13px/1 var(--sans); padding: 8px 20px 8px 0; outline: none;
}
.lv-sort select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.lv-sort svg { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 10px; height: 10px; pointer-events: none; color: var(--ink-2); }
.lv-count { flex-basis: 100%; margin: 0; font: 400 12.5px/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .lv-count { flex-basis: auto; margin-left: 0; } }

.lv-note { flex-basis: 100%; margin: 0; padding-top: 2px; font: 400 13px/1.5 var(--serif); font-style: italic; color: var(--ink-2); max-width: 46em; }
.ivx-co .lv-gap.is-above { color: var(--ink); }
.lv-empty { margin: 0; padding: 56px 0 64px; text-align: center; font: 400 19px/1.5 var(--serif); color: var(--ink-2); }
.lv-empty button { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline 1px; text-underline-offset: 5px; cursor: pointer; }

/* ───────── rows ───────── */
.ivx-rows > li[hidden] { display: none; }
.ivx-co .lv-gap { font: 400 12.5px/1.3 var(--sans); color: var(--ink-2); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ivx-co .lv-gap::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: .12em; opacity: .55; }
.ivx-co .lv-gap.is-below { color: var(--lv-up); }
.ivx-co .lv-gap.is-below::before { opacity: 1; }
.ivx-co .lv-gap.is-safe { color: var(--bronze); font-weight: 500; }
.ivx-co .lv-gap.is-safe::before { opacity: 1; }
.ivx-rn .lv-d { font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 6px; }
.ivx-rn .lv-d.is-up { color: var(--lv-up); }
.ivx-rn .lv-d.is-dn { color: var(--lv-dn); }
.ivx-rn .lv-px { font-variant-numeric: lining-nums tabular-nums; transition: color 900ms var(--lv-ease); }
.ivx-rn .lv-px.tick-up { color: var(--lv-up); transition-duration: 0s; }
.ivx-rn .lv-px.tick-dn { color: var(--lv-dn); transition-duration: 0s; }
.ivx-rg .iv-live-dot { transition: cx 900ms var(--lv-ease); }

/* ───────── the price card ───────── */
.iv-quote.lv-card { position: relative; }
.lv-card .lv-flag {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  font: var(--lbl-w) var(--lbl-xs)/1 var(--sans); letter-spacing: var(--trk-xs); text-transform: uppercase; color: var(--ink);
}
.lv-card .lv-flag .lv-dot { background: var(--lv-up); }
.lv-card .lv-flag.is-closed .lv-dot { background: color-mix(in srgb, var(--ink) 38%, transparent); }
.lv-card .iv-quote-p { align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.lv-card .iv-quote-p .stat { font-size: clamp(40px, 4.4vw, 56px); }
.lv-card .iv-quote-p .stat { transition: color 900ms var(--lv-ease); }
.lv-card .iv-quote-p .stat.tick-up { color: var(--lv-up); transition-duration: 0s; }
.lv-card .iv-quote-p .stat.tick-dn { color: var(--lv-dn); transition-duration: 0s; }
.lv-spark { flex: none; margin-left: auto; width: clamp(72px, 8vw, 104px); height: 36px; overflow: visible; }
.lv-spark path { fill: none; stroke: var(--lv-up); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lv-spark.is-dn path { stroke: var(--lv-dn); }
.lv-spark circle { fill: var(--lv-up); }
.lv-spark.is-dn circle { fill: var(--lv-dn); }
.lv-spark .lv-pc { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 1 3; opacity: .5; }
.lv-chg { margin: 8px 0 0; font: 500 14px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.lv-chg .lv-d { color: var(--lv-up); }
.lv-chg .lv-d.is-dn { color: var(--lv-dn); }
.lv-chg span { font-weight: 400; }

.lv-lens { position: relative; margin: 18px 0 0; }
.lv-lens .lv-rng { display: block; width: 100%; max-width: none; height: auto; margin: 0; touch-action: none; cursor: ew-resize; overflow: visible; outline: none; -webkit-tap-highlight-color: transparent; }
.lv-lens .lv-rng:focus-visible .lv-hit { stroke: var(--ink); stroke-width: 1.5; }
.lv-lens .lv-hit { fill: transparent; stroke: transparent; rx: 6; }
.lv-lens .lv-h { transition: transform 700ms var(--lv-ease); }
.lv-lens.is-drag .lv-h { transition: none; }
.lv-lens .lv-ring { fill: none; stroke: var(--iv-live, var(--accent)); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: lv-ring 2.4s var(--lv-ease) infinite; }
.lv-lens.is-scrub .lv-ring, .lv-lens.is-closed .lv-ring { animation: none; opacity: 0; }
@keyframes lv-ring { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.lv-lens .lv-ghost { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 2 3; opacity: 0; transition: opacity var(--d-2, 320ms); }
.lv-lens.is-scrub .lv-ghost { opacity: .7; }
.lv-tip {
  position: absolute; top: 60px; left: 0; translate: -50% 0; z-index: 2; padding: 6px 10px 7px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  background: var(--ink); color: var(--paper); font: 500 12.5px/1.25 var(--sans); font-variant-numeric: tabular-nums; text-align: center;
  opacity: 0; transform: translateY(4px); transition: opacity var(--d-2, 320ms) var(--lv-ease), transform var(--d-2, 320ms) var(--lv-ease);
}
.lv-tip small { display: block; margin-top: 2px; font: 400 11px/1.2 var(--sans); opacity: .7; }
.lv-lens.is-scrub .lv-tip, .lv-lens.is-drag .lv-tip { opacity: 1; transform: none; }
.lv-lens.is-scrub .lv-hint > span { opacity: 0; }
.lv-hint > span { transition: opacity var(--d-2, 320ms); }
.lv-hint { margin: 8px 0 0; min-height: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 12px/1.4 var(--sans); color: var(--ink-2); }
.lv-hint button {
  white-space: nowrap; appearance: none; border: 0; background: none; padding: 14px 0; margin: -14px 0; cursor: pointer; font: 500 12px/1.4 var(--sans); color: var(--ink);
  text-decoration: underline 1px; text-underline-offset: 4px; opacity: 0; pointer-events: none; transition: opacity var(--d-2, 320ms);
}
.lv-lens.is-scrub .lv-hint button { opacity: 1; pointer-events: auto; }
.lv-gaps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 0; padding: 12px 0 0; border-top: var(--hair-w) solid var(--hair-strong);
}
.lv-gaps dt { font: var(--lbl-w) var(--lbl-xs)/1.3 var(--sans); letter-spacing: var(--trk-xs); text-transform: uppercase; color: var(--ink-2); }
.lv-gaps dd { margin: 4px 0 0; font: 300 clamp(20px, 2vw, 24px)/1.1 var(--stat); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.lv-gaps dd.is-up { color: var(--lv-up); }
.lv-gaps dd.is-dn { color: var(--lv-dn); }
.lv-card .iv-quote-k { margin-top: 16px; }
.lv-card .iv-quote-r b { font-weight: 400; color: var(--ink); box-shadow: inset 0 -1px 0 var(--hair-strong); }

@media (prefers-reduced-motion: reduce) {
  .lv-dot::after, .lv-lens .lv-ring { animation: none; }
  .lv-lens .lv-h, .lv-seg i, .ivx-rg .iv-live-dot, .lv-map circle.lv-n, .lv-map-tip { transition: none; }
}
@media (max-width: 640px) {
  .lv-search { flex-basis: 100%; max-width: none; }
  .lv-seg { width: 100%; justify-content: space-between; }
  .lv-seg button { flex: 1 1 auto; padding: 7px 10px; font-size: 12.5px; }
  .lv-seg button sup { display: none; }
  .lv-count { flex: 1 1 auto; text-align: right; }
  .lv-figs b { font-size: 36px; }
  .lv-figs span { font-size: 11px; letter-spacing: .08em; }
  .lv-sort { margin-left: 0; }
}

/* ───────── moat rating ───────── */
.pv-moat { display: inline-flex; align-items: center; gap: 9px; font: 500 12.5px/1.2 var(--sans); letter-spacing: .01em; color: var(--ink); }
.pv-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
.pv-meter i { display: block; width: 3px; border-radius: 1px; background: var(--hair-strong); }
.pv-meter i:nth-child(1) { height: 5px; } .pv-meter i:nth-child(2) { height: 7px; } .pv-meter i:nth-child(3) { height: 9px; } .pv-meter i:nth-child(4) { height: 12px; }
.pv-meter i.on { background: var(--bronze); }
.ivx-co .pv-moat { color: var(--ink-2); font-size: 12px; }
.pv-badgeline { margin: 16px 0 0; }
.pv-badgeline .pv-moat { font-size: 13.5px; }
.pv-tag { display: inline-block; padding: 3px 10px; border: 1px solid var(--hair-strong); border-radius: 999px; font: var(--lbl-w) var(--lbl-xs)/1.3 var(--sans); letter-spacing: var(--trk-xs); text-transform: uppercase; color: var(--ink); }
.pv-private { border-top-color: var(--ink); }
.pv-note { font: 400 14px/1.55 var(--serif); font-style: italic; color: var(--ink-2); margin: 0 0 6px; }
.pv-moatbox { margin: 30px 0 8px; padding: 22px 0 6px; border-top: 1px solid var(--ink); }
.pv-moathead { display: grid; gap: 10px; }
.pv-moathead .pv-moat { font-size: 15px; }
.pv-moathead p { margin: 0; font: 400 18px/1.5 var(--serif); color: var(--ink); text-wrap: pretty; }
.pv-cols { display: grid; gap: 4px 36px; margin-top: 16px; }
@media (min-width: 760px) { .pv-cols { grid-template-columns: 1fr 1fr; } }
.pv-cols h3 { margin-bottom: 4px; }
.pv-scale { margin: 14px 0 0; font: 400 12.5px/1.5 var(--sans); color: var(--ink-2); }

/* ───────── view toggle and the map ───────── */
.lv-sel { position: relative; display: inline-flex; align-items: center; gap: 8px; font: 400 13px/1 var(--sans); color: var(--ink-2); }
.lv-sel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 500 13px/1 var(--sans); padding: 8px 20px 8px 0; outline: none; }
.lv-sel select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.lv-sel svg { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 10px; height: 10px; pointer-events: none; color: var(--ink-2); }
.lv-view { margin-left: 0; }
.lv-view button { display: inline-flex; align-items: center; gap: 7px; }
.lv-view svg { width: 14px; height: 14px; }
.lv-bar .lv-view { order: 5; }
.lv-map { position: relative; margin: 18px 0 8px; }
.lv-map[hidden] { display: none; }
.lv-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.lv-map text { font-family: var(--sans); fill: var(--ink-2); }
.lv-map .lv-zone { fill: color-mix(in srgb, var(--bronze) 11%, transparent); }
.lv-map .lv-sep { stroke: var(--hair); stroke-width: 1; }
.lv-map .lv-axis { stroke: var(--ink); stroke-width: 1; }
.lv-map .lv-tick { stroke: var(--hair-strong); stroke-width: 1; }
.lv-map .lv-base { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 2 3; }
.lv-map .lv-bl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.lv-map .lv-at { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lv-map .lv-ttl { font-size: 11px; fill: var(--ink); font-weight: 500; }
.lv-map a { outline: none; cursor: pointer; }
.lv-map circle.lv-n { fill: var(--ink); fill-opacity: .82; stroke: var(--paper); stroke-width: 1.5; transition: r .25s var(--lv-ease, ease), fill .25s, fill-opacity .25s; }
@media (hover: hover) { .lv-map a:hover circle.lv-n { fill: var(--accent); fill-opacity: 1; r: 8; } }
.lv-map a:focus-visible circle.lv-n { fill: var(--accent); fill-opacity: 1; r: 8; }
.lv-map .lv-hit { fill: transparent; stroke: none; }
.lv-map-tip.is-tap { pointer-events: auto; cursor: pointer; }
.lv-map a:focus-visible circle.lv-n { stroke: var(--ink); stroke-width: 2; }
.lv-map a.is-off circle.lv-n { fill: var(--hair-strong); fill-opacity: .45; }
.lv-map a.is-sweet circle.lv-n { fill: var(--bronze); fill-opacity: 1; }
.lv-map a.is-edge circle.lv-n { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.lv-map a[class].is-on circle.lv-n { fill: var(--accent); fill-opacity: 1; stroke: var(--paper); r: 8; }
.lv-map .lv-lab { font-size: 11px; fill: var(--ink-2); pointer-events: none; font-weight: 500; letter-spacing: .02em; }
.lv-map-tip { position: absolute; z-index: 3; pointer-events: none; min-width: 180px; max-width: 260px; padding: 10px 12px 11px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 400 12.5px/1.4 var(--sans); opacity: 0; transform: translateY(4px); transition: opacity .2s var(--lv-ease, ease), transform .2s var(--lv-ease, ease); box-shadow: 0 8px 28px -8px rgba(0,0,0,.4); }
.lv-map-tip.on { opacity: 1; transform: none; }
.lv-map-tip b { display: block; font: 400 16px/1.25 var(--serif); }
.lv-map-tip em { font-style: normal; opacity: .72; display: block; margin-top: 2px; }
.lv-map-tip span { display: block; margin-top: 6px; opacity: .88; }
.lv-map-key { margin: 6px 0 0; font: 400 12.5px/1.5 var(--sans); color: var(--ink-2); max-width: 52em; }
@media (max-width: 640px) { .lv-view { flex: 1 1 100%; } .lv-view button { flex: 1; justify-content: center; } }

/* ───────── phones: a compact, non-sticky control bar ───────── */
@media (max-width: 640px) {
  .lv-bar { position: static; gap: 10px 14px; padding: 12px 0 14px; -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; }
  .lv-seg button { padding: 7px 8px; font-size: 12px; }
  .lv-seg .lv-x { display: none; }
  .lv-sel, .lv-sort { flex: 1 1 calc(50% - 8px); min-width: 0; justify-content: space-between; border-bottom: 1px solid var(--hair); }
  .lv-sel select, .lv-sort select { flex: 1; min-width: 0; text-align: right; text-align-last: right; padding-right: 18px; }
  .lv-view { flex: 0 0 auto; order: 6; }
  .lv-count { order: 7; flex: 1 1 auto; text-align: right; }
  .lv-note { order: 8; }
  .lv-map { margin-top: 10px; }
  .lv-map-key { font-size: 12px; }
  .lv-map-tip { min-width: 0; max-width: 230px; }
}

/* drawdown from the 1-year closing high */
.ivx-co .lv-dd { font: 400 12px/1.3 var(--sans); color: var(--ink-2); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ivx-co .lv-dd[hidden] { display: none; }
.ivx-co .lv-dd.is-deep { color: var(--ink); font-weight: 500; }

/* ───────── refine strip: four labelled fields under the main row ───────── */
.lv-bar { row-gap: 14px; padding: 16px 0 12px; }
.lv-bar .lv-view { order: 1; margin-left: auto; }
.lv-refine { order: 2; flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.lv-count { order: 3; flex: 1 1 100%; margin: 0; }
.lv-note { order: 4; }
.lv-refine .lv-sel, .lv-refine .lv-sort {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin: 0; min-width: 0;
  padding: 11px 0 0; border-top: var(--hair-w) solid var(--hair); border-bottom: 0;
  font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.lv-refine select {
  width: 100%; text-align: left; text-align-last: left; padding: 3px 22px 7px 0;
  font: 500 14.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lv-refine .lv-sel svg, .lv-refine .lv-sort svg { top: auto; bottom: 9px; translate: none; }
@media (hover: hover) { .lv-refine .lv-sel:hover, .lv-refine .lv-sort:hover { border-top-color: var(--ink); } }
@media (max-width: 900px) { .lv-refine { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; column-gap: 20px; } }
@media (max-width: 640px) {
  .lv-refine .lv-sel, .lv-refine .lv-sort { flex: none; justify-content: flex-start; border-bottom: 0; }
  .lv-refine select { text-align: left; text-align-last: left; padding-right: 22px; }
  .lv-bar .lv-view { order: 3; margin-left: 0; }
  .lv-count { order: 4; text-align: left; }
}

/* ───────── price history chart on company pages ───────── */
.lv-hist { width: var(--iv-wide, 100%); margin: clamp(28px, 4vw, 48px) auto clamp(48px, 6vw, 72px); padding: 0; box-sizing: border-box; }
/* desktop: the history block is inserted by live.js, often after the first paint, right where the key numbers sit in the
   first screen. Its room is held from the first paint (only when scripts run), so nothing jumps when it arrives.
   The figures are the block's measured height: header row 39, tabs 14 + 28.5 + 6, chart 280 or 340, note 6 + 36 or 18.
   Pages the quote Worker does not cover (live.js NOLIVE, today prosus) and a failed load (.lv-nohist) hold nothing. */
@media (scripting: enabled) and (min-width: 960px) {
  body[data-invest]:not([data-private]):not(.lv-nohist):not(:has(#mr-prosus-d)) .iv-open + .iv-numsec { margin-top: calc(clamp(28px, 4vw, 48px) + clamp(48px, 6vw, 72px) + 409.5px); }
  .lv-h-note { min-height: 36px; }
}
/* the price card grows when live.js builds the lens, the gaps and the live lines (about 171px on a 414px card). On
   desktop, where the card sets the height of the opening, the static card holds that room in the places it will be
   used until live.js takes the card over (.lv-card): under the price for the day's change, in the note for its second
   line, around the range for the lens, its hint and the gaps. Nothing in the opening moves when the card fills in. */
/* the held heights are measured (tools/cardpos.py): note 81 and range foot 110 for a 320 to 351px card, 61 and 114 from 1200px, a 42px note once the card is full width */
@media (min-width: 960px) { body[data-invest] .iv-quote { --lv-hold-note: 81px; --lv-hold-gaps: 110px; } }
@media (min-width: 1200px) { body[data-invest] .iv-quote { --lv-hold-note: 61px; --lv-hold-gaps: 114px; } }
@media (min-width: 1432px) { body[data-invest] .iv-quote { --lv-hold-note: 42px; } } /* the card reaches 468px: the live note fits on one line */
@media (scripting: enabled) and (min-width: 960px) {
  body[data-invest]:not([data-private]):not(:has(#mr-prosus-d)) .iv-quote:not(.lv-card) {
    & .iv-quote-p { margin-bottom: var(--lv-hold-chg, 26px); align-items: center; justify-content: space-between; gap: 8px 16px; }
    & .iv-quote-p .stat { font-size: clamp(40px, 4.4vw, 56px); }
    & .iv-quote-d { min-height: var(--lv-hold-note, 36px); }
    & .iv-mini { max-width: none; aspect-ratio: 400 / 76; margin: 18px 0 var(--lv-hold-gaps, 108px); }
  }
}
@media (scripting: enabled) and (min-width: 1024px) {
  body[data-invest]:not([data-private]):not(.lv-nohist):not(:has(#mr-prosus-d)) .iv-open + .iv-numsec { margin-top: calc(clamp(28px, 4vw, 48px) + clamp(48px, 6vw, 72px) + 451.5px); }
  .lv-h-note { min-height: 0; }
}
.lv-h-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; border-top: var(--hair-w, 1px) solid var(--hair); padding-top: 16px; min-height: 39px; } /* the height it has once the change line is in */
.lv-h-ttl { font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lv-h-chg { font: 400 13px/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lv-h-chg b { font: 500 22px/1 var(--serif); color: var(--ink); margin-right: 10px; }
.lv-h-chg i { font-style: normal; font-weight: 500; }
.lv-h-chg .is-up { color: var(--lv-up); } .lv-h-chg .is-dn { color: var(--lv-dn); }
.lv-h-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 14px 0 6px; }
.lv-h-tabs button { border: 0; background: transparent; font: 500 12.5px/1 var(--sans); color: var(--ink-2); padding: 8px 12px; border-radius: 99px; cursor: pointer; }
.lv-h-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .lv-h-tabs button:hover { color: var(--ink); } .lv-h-tabs button[aria-pressed="true"]:hover { color: var(--paper); } }
.lv-h-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lv-h-box { position: relative; min-height: 200px; transition: opacity .25s; } /* live.js sets the drawn height */
.lv-hist.is-load .lv-h-box { opacity: .45; }
.lv-h-ph { touch-action: pan-y; }
.lv-h-ph svg { width: 100%; height: auto; display: block; overflow: visible; }
.lv-hist.is-err .lv-h-ph { padding: 70px 0; text-align: center; font: italic 400 14px/1.4 var(--serif); color: var(--ink-2); }
.lh-ln { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.lh-ln.is-up { stroke: var(--lv-up); } .lh-ln.is-dn { stroke: var(--lv-dn); }
.lh-ar { stroke: none; opacity: .1; } .lh-ar.is-up { fill: var(--lv-up); } .lh-ar.is-dn { fill: var(--lv-dn); }
.lh-ax { font: 400 11px var(--sans); fill: var(--ink-2); }
.lh-gr { stroke: var(--hair); stroke-width: 1; }
.lh-cs { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 4; opacity: .85; } .lh-cs.is-base { stroke: var(--ink); opacity: .9; }
.lh-cl { font: 500 11px var(--sans); letter-spacing: .04em; fill: var(--ink-2); } .lh-cl.is-base { fill: var(--ink); }
/* a paper halo keeps "Base $195" readable where the price line crosses it */
.lh-cl { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.lh-x { stroke: var(--ink); stroke-width: 1; opacity: 0; } .lh-p { stroke: var(--paper); stroke-width: 2; opacity: 0; }
.lh-p.is-up { fill: var(--lv-up); } .lh-p.is-dn { fill: var(--lv-dn); }
.is-hov .lh-x { opacity: .4; } .is-hov .lh-p { opacity: 1; }
.lv-h-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); font: 500 12px/1.35 var(--sans); padding: 7px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; transform: translate(-50%, -125%); transition: opacity .12s; font-variant-numeric: tabular-nums; }
.lv-h-tip.on { opacity: 1; } .lv-h-tip span { display: block; opacity: .7; font-weight: 400; }
.lv-h-note { margin: 6px 0 0; font: 400 12px/1.5 var(--sans); color: var(--ink-2); }
/* phones: the eight ranges on one row, each a full-height target with a light pill */
@media (max-width: 640px) {
  .lv-h-chg b { font-size: 19px; }
  .lv-h-tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin: 8px 0 4px; }
  /* the pill is the button's own background, clipped to its content box: light to look at, 44px to hit */
  .lv-h-tabs button { min-height: 44px; padding: 8px 1px; font-size: 12.5px; background-clip: content-box; }
  .lv-h-tabs button[aria-pressed="true"] { background-clip: content-box; }
  .lv-h-tabs button:focus-visible { outline-offset: -4px; border-radius: 99px; }
}

.lh-rg { opacity: .12; stroke: none; } .lh-rg.is-up { fill: var(--lv-up); } .lh-rg.is-dn { fill: var(--lv-dn); }
.lh-x2, .lh-p2 { display: none; } .is-rng .lh-x2 { display: block; opacity: .4; } .is-rng .lh-p2 { display: block; opacity: 1; }
.lh-rg { display: none; } .is-rng .lh-rg { display: block; }
.lv-h-ph svg { cursor: crosshair; user-select: none; -webkit-user-select: none; }
.lv-h-ph svg.is-drag { cursor: col-resize; }
.lv-h-ph { -webkit-touch-callout: none; }

/* ───────── touch: every control in the bar is a full 44px target ───────── */
@media (max-width: 640px), (pointer: coarse) {
  /* 16px text: iOS Safari does not zoom the page when the field takes focus */
  .lv-search input { padding-block: 12px; font-size: 16px; }
  .lv-seg { padding: 0 3px; }
  .lv-seg button { min-height: 44px; }
  .lv-refine .lv-sel, .lv-refine .lv-sort { gap: 0; }
  .lv-refine select { min-height: 44px; padding-block: 10px; font-size: 16px; }
  .lv-refine .lv-sel svg, .lv-refine .lv-sort svg { bottom: 17px; }
  .lv-empty button { padding: 12px 0; margin: -12px 0; }
}