/* Components: the UI pieces — top bar, tools toolbar, disclaimer footer, the
   stage/canvas layout, the right rail (nav, leaderboard table, per-view notes,
   affiliate slot, legend), the row-detail disclosure, the Info drawer, and the
   marker/label popovers. Ordered as they appear in the page. */

select,
button,
input {
  font-family: inherit;
  color: inherit;
}
.field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.field select {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--ink);
}
.spacer {
  flex: 1 1 auto;
}

.ghost {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ghost:hover {
  border-color: var(--faint);
}
.ghost:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Interval segmented control (Weekly / Daily) in the toolbar; hidden when a view has
     only one interval. */
.ivl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ivl[hidden] {
  display: none;
}
.ivl-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  cursor: help;
  flex: 0 0 auto;
}
.ivl-help:hover {
  color: var(--ink);
  border-color: var(--muted);
}
.ivl-help:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* The two buttons share one bordered track with no gap, so they read as a switch. */
.ivl-switch {
  display: inline-flex;
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.ivl-btn {
  background: none;
  border: 0;
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  border-radius: 5px;
}
.ivl-btn:hover {
  color: var(--ink);
}
.ivl-btn[aria-pressed="true"] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.ivl-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- tools toolbar (visual/rendering controls) ----------------------- */
/* Tail and theme: how the chart renders, kept apart from the header's
     technical info + methodology and the rail's navigation. */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  min-height: var(--bar-h);
  padding: 4px 16px; /* --bar-h keeps it level with the rail legend */
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
/* The tail control and its interval readout never split across rows: the cluster is
     one flex item, so wrapping moves the pair whole. The slider's small flex basis
     means the wrap decision is made at its compressed size (flex line-breaking uses
     hypothetical sizes), and it then grows back up to its full width when the row has
     room, so a narrow toolbar compresses the slider before it wraps anything. */
.toolbar .tool-cluster {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  flex: 1 1 auto;
}
.toolbar .tailctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-width: 0;
}
.toolbar input[type="range"] {
  flex: 1 1 60px;
  width: auto;
  min-width: 60px;
  max-width: 160px;
  accent-color: var(--accent);
  vertical-align: middle;
}
.toolbar .val {
  color: var(--ink);
  font-weight: 400;
  min-width: 1.6em;
}
.toolbar .hint {
  color: var(--faint);
  font-size: 11px;
}
#tailinfo {
  cursor: help;
  white-space: nowrap; /* one line, so the cluster's width maths stays honest */
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
#tailinfo:hover {
  color: var(--muted);
}
#tailinfo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.toolbar .spacer {
  flex: 1 1 auto;
}

/* ---- layout ----------------------------------------------------------- */
.stage {
  display: grid;
  grid-template-columns: 1fr var(--rail-w);
  grid-template-rows: 1fr auto; /* row 1 canvas, row 2 toolbar (footer under the canvas) */
  min-height: 0; /* allow children to shrink for the chart to fill */
}
/* Toolbar sits at the foot of the canvas column; the rail spans both rows, so it
     runs the full height up to the header regardless of the toolbar. */
.canvas-wrap {
  grid-area: 1 / 1 / 2 / 2;
  position: relative;
  min-width: 0;
  min-height: 0;
}
.toolbar {
  grid-area: 2 / 1 / 3 / 2;
}
#plot {
  position: absolute;
  inset: 0;
}
#plot svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* While the next view's data loads, dim the previous chart so it does not masquerade
   as the new view. The transition delay keeps fast loads from flashing. */
#plot[aria-busy="true"] svg {
  opacity: 0.45;
  transition: opacity 0.15s ease 0.2s;
}
#plot g.series {
  cursor: pointer;
  transition: opacity 0.12s ease;
}
#plot g.series text {
  -webkit-user-select: none;
  user-select: none;
}
#plot g.series.dim {
  opacity: 0.14;
}
/* Keyboard focus lands on the marker; ring it tightly (the spotlight and popover
     also respond, so the focused point is unmistakable). */
#plot .mk {
  outline: none;
}
#plot .mk:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- right rail: view controls + leaderboard table (one panel) -------- */
/* The rail is the whole control surface: an active-view label, the faceted
     cut-first selectors (a Sectors/Countries/Themes cut, with region and market
     sub-selectors that appear only where the context offers a choice), the tail
     control, then the leaderboard table and glyph key. It sits beside the table
     it drives and leaves the canvas full-bleed on the left. */
.rail {
  grid-area: 1 / 2 / 3 / 3; /* full height, from the header down */
  border-left: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Control section: always visible, never collapses with the table. */
.rail-nav {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
}
.nav-group {
  padding: 0;
}
.nav-group[hidden] {
  display: none;
}
/* Secondary view selection: a full-width, unlabelled dropdown of the views in
     the current cut (Global/US/Europe, or the single theme name). */
.view-select {
  width: 100%;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  /* left padding matches the "Sector" table heading (thead th, 10px); right
       padding clears the custom caret, which sits 12px in from the right edge */
  padding: 10px 32px 10px 10px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 12px center;
  /* caret drawn ourselves (appearance:none drops the native one); one SVG per
       theme so it tracks --muted in both light and dark */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238b93a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .view-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235c6472' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
}
.view-select:focus-visible {
  outline: none;
  background-color: var(--surface-2);
}

/* Cut selector, styled as tabs: the primary "what am I looking at" switch,
     visually distinct from the view dropdown below it. */
.tabs {
  display: flex;
  gap: 2px;
  padding: 6px 12px 0;
  border-bottom: 1px solid var(--line);
}
.tab-btn {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 11px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.tab-btn:hover {
  color: var(--ink);
}
.tab-btn[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
.tab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 3px;
}

/* Table panel scrolls on its own, so the controls above and the legend below
     stay put. */
.rail-table {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
}

/* Glyph key, pinned to the rail foot (margin-top:auto floats it down when the
     table is collapsed). Adapts to the view kind. */
.nav-legend {
  flex: 0 0 auto;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 15px;
  min-height: var(--bar-h);
  padding: 4px 14px; /* match the toolbar height so the two bottom bars align */
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.nav-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-legend .marker {
  margin: 0;
  color: var(--faint);
}
/* Risk-appetite panel: the defensive/cyclical tilt as its own small section after
     the table (a derived spread, not a table row; see buildRisk in js/notes.js).
     The tilt label is a definition trigger styled like the other hint labels; the
     line beneath interprets the current reading in plain terms. */
.risk-panel {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line); /* divider before the view notes */
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.risk-panel .risk-line {
  margin: 0 0 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
}
.risk-panel .risk-read {
  margin: 0;
}
.risk-panel .tilt {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.05em;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.risk-panel .tilt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.risk-panel .tilt[data-dir="DEFENSIVE"] {
  color: var(--improving);
}
.risk-panel .tilt[data-dir="CYCLICAL"] {
  color: var(--weakening);
}

/* Affiliate slot: a small, clearly-demarcated card that flows after the view context in the
     rail's scroll region, distinct from the tool content. Hidden until initAd() populates it. */
.ad-slot {
  margin: 12px 0 0;
  border-top: 1px solid var(--line);
  padding: 12px 14px 14px;
  background: var(--surface);
}
.ad-label {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 5px;
}
.ad-cta {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.ad-cta:hover {
  text-decoration: underline;
}
.ad-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.ad-risk {
  margin: 6px 0 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* Per-view context: what this view rotates, its benchmark, the trade-offs, and the
     chart-specific technical facts. Rebuilt on every view change. It sits inside the
     table's scroll region (after the rows), so it is reached by scrolling rather than
     docked to the rail foot. */
.rail-notes {
  padding: 12px 14px; /* no border-top: the table's last-row border is the divider */
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.rail-notes .rn-title,
.risk-panel .rn-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.rail-notes .rn-blurb {
  margin: 10px 0;
  color: var(--ink);
}
.rail-notes dl {
  margin: 0;
}
.rail-notes dt {
  margin-top: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.rail-notes dd {
  margin: 2px 0 0;
}
/* The benchmark's own reading against the wider market, as a second dd under the same
   Benchmark term. The quadrant word takes its quadrant's hue (the same tokens the chart
   and table use) via the data attribute, so it follows a theme change without the panel
   being rebuilt; the rest of the line stays muted so the colour carries the meaning. */
.rail-notes .rn-bench-mkt {
  color: var(--muted);
  /* Sets the panel head off from the description that follows. It collapses out through
     the dl (which has no padding or border), so it reads as one gap, and the body's own
     first child keeps its margin-top: 0. */
  margin-bottom: 8px;
}
.rail-notes .rn-quad {
  font-weight: 700;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.rail-notes .rn-quad:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.rail-notes [data-quad="Leading"] .rn-quad {
  color: var(--leading);
}
.rail-notes [data-quad="Weakening"] .rn-quad {
  color: var(--weakening);
}
.rail-notes [data-quad="Lagging"] .rn-quad {
  color: var(--lagging);
}
.rail-notes [data-quad="Improving"] .rn-quad {
  color: var(--improving);
}
.rail-notes ul {
  margin: 2px 0 0;
  padding-left: 16px;
}
.rail-notes li {
  margin: 0 0 4px;
}
.rail-notes .rn-tech {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--faint);
}
/* Collapsible body: when an ad is shown after the panel, the info (which varies in length) clamps
     to the first couple of lines and fades, with a "Show more" toggle, so it does not push the ad
     down. With no ad it is shown in full. The title and benchmark stay above it, always visible. */
.rn-body {
  position: relative;
}
.rn-body > :first-child {
  margin-top: 0;
}
.rn-body.rn-clamped {
  max-height: 4em;
  overflow: hidden;
}
.rn-body.rn-clamped::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.2em;
  background: linear-gradient(transparent, var(--surface));
  pointer-events: none;
}
.rn-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 0;
  padding: 2px 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  transition: color 0.12s ease;
}
.rn-more:hover {
  color: var(--ink);
} /* match the rail tabs' hover (Sectors / Countries / Themes) */
.rn-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.rn-more svg {
  width: 11px;
  height: 11px;
  transition: transform 0.15s ease;
}
.rn-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.rail-notes .rn-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.rail-notes .ext {
  vertical-align: middle;
}
.rail-notes abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  vertical-align: bottom;
  text-align: right;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
/* Separator as a pseudo-element, not a border/shadow: border-collapse drops a
     sticky cell's border on scroll and won't paint box-shadow on cells, but an
     absolutely-positioned ::after (in the header's z-index:3 cell) renders in both
     states and paints over the overlapping group heading. */
thead th::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
}
/* Number tint is applied inline per cell (richness scales with magnitude);
     the +/- glyph is the non-colour cue so it never relies on colour alone. */
thead th:first-child,
tbody td:first-child {
  text-align: left;
}
tbody td {
  text-align: right;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
}
tbody tr:hover,
tbody tr.hi {
  background: var(--surface-2);
}
tbody tr.hi .toggle {
  opacity: 1;
}
tbody tr.hidden-row .nm,
tbody tr.hidden-row td.tnum {
  opacity: 0.5;
}
tr.composite td.name {
  font-weight: 700;
}
/* The shape marker IS the visibility toggle: filled = shown, outline = hidden.
     A real (visually hidden) checkbox sits behind it for keyboard and SR use. */
.toggle {
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 0.12s ease;
}
.toggle:hover,
.toggle:focus-within {
  opacity: 1;
}
.marker {
  margin-right: 8px;
  line-height: 1;
  font-size: 0.98em;
}
.marker.round::before {
  content: "\25CF";
} /* ● */
.marker.square::before {
  content: "\25A0";
} /* ■ */
.marker.diamond::before {
  content: "\25C6";
} /* ◆ */
.hidden-row .marker.round::before {
  content: "\25CB";
} /* ○ */
.hidden-row .marker.square::before {
  content: "\25A1";
} /* □ */
.hidden-row .marker.diamond::before {
  content: "\25C7";
} /* ◇ */
/* Group subheadings (Leading, etc) stick just under the column header as their
     rows scroll, each pushed up by the next group. Solid background + z-index below
     the header so both stay readable over the scrolling rows. */
.grouphead th {
  position: sticky;
  top: 27px;
  z-index: 2;
  background: var(--surface);
  text-align: left;
  padding: 14px 12px 5px;
  border-bottom: 0;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
tbody + tbody .grouphead th {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.grouphead .qn {
  color: var(--faint);
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 7px;
}
/* Group heading glyph = select-all for the group, with a mixed state. */
.grouptoggle {
  cursor: pointer;
  margin-right: 9px;
  opacity: 0.82;
  transition: opacity 0.12s ease;
}
.grouptoggle:hover,
.grouptoggle:focus-within {
  opacity: 1;
}
.qbox {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1.5px solid var(--qc);
  box-sizing: border-box;
  vertical-align: baseline;
  margin-right: 9px;
}
.qbox[data-state="on"] {
  background: var(--qc);
}
.qbox[data-state="off"] {
  background: transparent;
}
.qbox[data-state="mixed"] {
  background: linear-gradient(var(--qc), var(--qc)) center / 100% 46% no-repeat;
}
.groupcb:focus-visible + .qbox {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Long names truncate with an ellipsis rather than wrapping the row onto a second
     line, on desktop and mobile alike. The name cell claims the slack (width:100%)
     while max-width:0 gives the ellipsis a definite width to work against; the number
     and caret columns stay content-sized (nowrap) so only the name gives way. The full
     name stays reachable via the row's title tooltip. */
td.name {
  line-height: 1.25;
  max-width: 0;
  width: 100%;
}
td.name .toggle {
  display: flex;
  align-items: center;
  min-width: 0;
}
td.name .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
td.tnum,
td.disc {
  white-space: nowrap;
}
/* The three-letter code is a mobile-only affordance (the chart shows the same
     code there); on desktop the full name alone is enough, so it stays hidden. */
.code {
  display: none;
}
.rowtoggle,
.groupcb {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
}
.rowtoggle:focus-visible + .marker {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Small external link to a ticker's Yahoo Finance page. A quiet secondary
     affordance: faint, with only a gentle lift on hover. Sits outside the
     toggle label so following it never flips the series' visibility. */
.ext {
  display: inline-flex;
  vertical-align: baseline;
  margin-left: 6px;
  color: var(--faint);
  opacity: 0.75;
  transition: color 0.12s ease, opacity 0.12s ease;
}
.ext svg {
  width: 10px;
  height: 10px;
  display: block;
}
.ext:hover {
  color: var(--muted);
  opacity: 1;
}
.ext:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- row detail disclosure ------------------------------------------- */
/* A quiet caret in its own trailing column, so it lands in the same place on every
     row independent of name length; kept narrow so the numbers keep their room. It
     sits outside the visibility-toggle label so opening detail never flips the series
     on or off, and rotates when expanded. */
.disccol,
td.disc {
  width: 1%;
  text-align: right;
  padding-left: 4px;
  padding-right: 8px;
}
.disclose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--faint);
  opacity: 0.7;
  vertical-align: middle;
  transition: color 0.12s ease, opacity 0.12s ease, transform 0.15s ease;
}
.disclose svg {
  width: 12px;
  height: 12px;
  display: block;
}
.disclose:hover {
  color: var(--muted);
  opacity: 1;
}
.disclose:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.disclose[aria-expanded="true"] {
  color: var(--muted);
  opacity: 1;
  transform: rotate(180deg);
}
/* The panel (discloseHTML, distinct from the popover's tipHTML) reuses the popover's
     .tip-* CSS. No box of its own; instead the open row and its panel share the
     row-highlight fill so the expanded pair reads as one connected block. */
tbody tr.open,
tbody tr.open:hover,
tbody tr.detail-row {
  background: var(--surface-2);
}
tbody tr.open > td {
  border-bottom-color: transparent;
} /* merge row into panel */
.detail-row > td {
  padding: 2px 10px 12px;
}
.detail {
  padding: 4px 0 2px;
  font-size: 12px;
}
/* Sparkline beside the stats it can't show inline; links sit below. */
.detail-cols {
  display: flex;
  align-items: center;
  gap: 16px;
}
.detail-cols .tip-spark {
  margin: 0;
  flex: none;
}
.detail-meta {
  flex: 1 1 auto;
}
.detail-ticker {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
/* Shared caption for the panel's labelled blocks (Yahoo links, Strength). */
.detail-sub {
  color: var(--faint);
  font-size: 10.5px;
  margin-bottom: 4px;
}
.detail-links {
  margin: 0 0 10px;
}
.detail-links-head {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.detail-links-head svg {
  width: 10px;
  height: 10px;
}
.detail-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.detail-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
}
.detail-link:hover {
  color: var(--ink);
  text-decoration: underline;
}
.detail-stat-val {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
}
.detail-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Price context: absolute figures, so they sit full width under the rotation block
     rather than competing with it, separated by a rule. */
.detail-price {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
/* Stamped like the view notes' technical footer, and worded to match it, so the panel's
     provenance line reads as the same convention rather than a second one. */
.detail-price .detail-sub {
  margin-bottom: 9px;
  text-wrap: pretty;
}
/* One block per figure: a heading, then the figure with its caption running on from it.
     Not a grid -- the caption belongs to its figure, and giving it a column of its own
     read as loose prose set beside the numbers. Both are inline, so a caption too long for
     the line wraps under the figure and keeps reading. Blocks are independent, so the
     order can change and another can be added without reflowing the rest. */
.price-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.price-stat {
  line-height: 1.4;
}
.price-label {
  display: block;
  color: var(--faint);
  font-size: 10px;
  line-height: 1.3;
}
.price-val {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
}
.price-ctx {
  margin-left: 8px;
  color: var(--muted);
  font-size: 11px;
  text-wrap: pretty;
}

.empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  text-align: center;
  padding: 24px;
  line-height: 1.7;
}

/* ---- marker popover -------------------------------------------------- */
.tip {
  position: fixed;
  margin: 0;
  inset: auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  color: var(--ink);
  padding: 11px 13px;
  width: 168px;
  font-size: 12px; /* fixed, so name length never drives it */
  pointer-events: none; /* never steal the hover from the marker */
  opacity: 0;
  transition: opacity 0.12s ease;
}
.tip:popover-open {
  opacity: 1;
}
@starting-style {
  .tip:popover-open {
    opacity: 0;
  }
}
/* Just the name heads the card; the fixed width keeps it from stretching, so a
     long name wraps to a second line. */
.tip-head {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  padding-bottom: 8px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.tip-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: baseline;
}
.tip-grid span {
  color: var(--muted);
  font-size: 11px;
}
.tip-grid b {
  font-family: var(--font-mono);
  font-weight: 400;
  text-align: right;
}
/* Status line: glyph + quadrant, centred. The ticker-vs-benchmark reference sits
     centred below the sparkline. */
.tip-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.tip-quad {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tip-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}
.tip-ref {
  margin-top: 10px;
  text-align: center;
  color: var(--faint);
  font-size: 10.5px;
}
/* No frame: a faint grey glow radiating from the centre (where the axis crosshair
     sits, matching the main quadrant's centre) grounds the spark instead. */
.tip-spark {
  display: block;
  width: 104px;
  height: 104px;
  margin: 12px auto 0;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in oklab, var(--muted) 16%, transparent),
    transparent 68%
  );
}
.tip-cross {
  stroke: var(--crosshair);
  stroke-width: 1;
}
.tip-path {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
} /* per-segment opacity set inline */

/* ---- chart label definitions ----------------------------------------- */
/* The quadrant captions and axis titles explain themselves on hover, focus or
     tap: brighten to signal they are interactive, and open a small definition
     card. The full text also rides in each label's aria-label for screen readers. */
#plot .hint {
  cursor: help;
  transition: fill 0.12s ease;
}
#plot .hint:hover {
  fill: var(--ink);
}
#plot .hint:focus {
  outline: none;
}
#plot .hint:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  fill: var(--ink);
}
.hintpop {
  position: fixed;
  margin: 0;
  inset: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  color: var(--ink);
  padding: 9px 12px;
  max-width: 232px;
  font-size: 12px;
  pointer-events: none; /* never steal the hover from the label */
  opacity: 0;
  transition: opacity 0.12s ease;
}
.hintpop:popover-open {
  opacity: 1;
}
@starting-style {
  .hintpop:popover-open {
    opacity: 0;
  }
}
.hintpop b {
  display: block;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.hintpop code {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--faint);
  margin-bottom: 5px;
  white-space: pre-line;
}
.hintpop span {
  color: var(--muted);
  line-height: 1.4;
}