/* The Explorer's own styles, loaded after the site's /site.css (which owns the
   header, section bar and footer). Tokens follow the SQX brand kit's blue and
   neutrals (site.css :root); the class colours are classes.css's. The page
   is light only, as the site is. */
:root {
  color-scheme: light;
  --blue: var(--accent);
  --ink: #1A2430;
  --muted: #444C55;
  --na: #5F6870;
  --page: #FFFFFF;
  --panel: #FFFFFF;
  --panel-2: #E7E9EF;
  --line: #D3D7DF;
  --accent-bg: #EEF1F5;
  --warn: #B7791F;
  --warn-ink: #7A5200;
  --kept: var(--accent);
  --removed: #B8C0C8;
  --focus: var(--accent);
  --pin-bg: #EEF1F5;
  --head: 'Roboto', system-ui, 'Segoe UI', sans-serif;
  --body: 'Roboto', system-ui, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
button { font: inherit; cursor: pointer; color: inherit; }
a { color: var(--blue); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.link-btn { background: none; border: 0; color: var(--blue); padding: 0; text-decoration: underline; }

/* class identity */
.c-corporate_bond { --c: var(--c-corporate_bond); }
.c-municipal_bond { --c: var(--c-municipal_bond); }
.c-structured_note { --c: var(--c-structured_note); }
.c-cd { --c: var(--c-cd); }
.c-fund { --c: var(--c-fund); }
.c-alternative_investment { --c: var(--c-alternative_investment); }
.c-equity { --c: var(--c-equity); }
.c-index { --c: var(--c-index); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 3px; vertical-align: 1px; }


/* The site footer starts below the first screen: the list and the detail view
   each take at least the window under the bars, so the rows and sections that
   fill in after the first paint never move the footer where a reader sees it. */
.layout, .detail-view { min-height: calc(100vh - var(--chrome-h, 128px)); }
.layout { max-width: 1440px; margin: 0 auto; padding: 16px 32px 40px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }

/* rail: its own scroll only when taller than the window */
.rail { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px 16px; position: sticky; top: calc(var(--chrome-offset, 0px) + 12px); max-height: calc(100vh - 24px - var(--chrome-offset, 0px)); overflow-y: auto; scrollbar-gutter: stable; transition: top 0.22s ease-out; }
.rail-head { display: flex; align-items: baseline; gap: 8px; }
.rail-head h2 { font: 700 18px var(--head); margin: 0; color: var(--navy); flex: 1; }
.rail-close { display: none; }
.search input { width: 100%; margin: 10px 0 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font: inherit; background: var(--panel); color: var(--ink); }
.rail-sec { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.rail-sec h3, .rail-sec summary { font: 700 14px var(--head); color: var(--navy); margin: 0 0 6px; }
.rail-sec summary { cursor: pointer; list-style-position: outside; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 3px 10px; font-size: 13px; min-height: 30px; }
.chip .n { color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--blue); color: var(--blue); font-weight: 600; }

.facet { margin: 8px 0 14px; }
.facet-label { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
/* Range sliders: two triangular handles pointing inward on a
   thin track, the two ends' values printed above it. */
.ds-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.facet.is-set .ds-labels { color: var(--ink); }
.ds { position: relative; height: 20px; }
/* The track is the wrapper's, so a lifted handle's input never paints over the other handle. */
.ds::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 2px; background: var(--line); }
.ds input[type="range"] { position: absolute; inset: 0; width: 100%; height: 20px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.ds input[type="range"]:focus { outline: none; }
.ds input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: transparent; }
.ds input::-moz-range-track { height: 4px; border-radius: 2px; background: transparent; }
.ds input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 0; background: var(--blue); cursor: pointer; pointer-events: auto; }
.ds input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 0; background: var(--blue); cursor: pointer; pointer-events: auto; }
.ds .ds-lo::-webkit-slider-thumb { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ds .ds-hi::-webkit-slider-thumb { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.ds .ds-lo::-moz-range-thumb { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ds .ds-hi::-moz-range-thumb { clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.ds input:hover::-webkit-slider-thumb { filter: brightness(1.3); }
.ds input:focus-visible::-webkit-slider-thumb { background: var(--ink); }
.ds input:focus-visible::-moz-range-thumb { background: var(--ink); }
.unknown-toggle { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 6px; }
.facet.is-set > .facet-label > span:first-child { color: var(--blue); }

/* results */
.results { min-width: 0; }
.results-bar { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.page-title { font: 700 30px/1.15 var(--head); color: var(--ink); margin: 0; }
.count { font: 500 16px var(--head); color: var(--muted); flex: 1; font-variant-numeric: tabular-nums; }
.filters-btn { display: none; }
.ghost-btn { background: var(--panel); border: 1px solid var(--blue); color: var(--blue); border-radius: 4px; padding: 6px 12px; font-size: 14px; min-height: 36px; }
.api-btn-foot { display: none; }
.api { margin: 10px 0 0; padding: 8px 10px; background: var(--sqx-ink, #1A2430); color: #EAF2FA; border-radius: 4px; font: 13px var(--mono, ui-monospace, monospace); white-space: pre-wrap; word-break: break-all; }
.hint { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

/* effect rows */
.effects { margin: 10px 0 12px; display: grid; gap: 8px; }
.effects:empty { display: none; }
.effect { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px 8px 12px; }
.effect-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.effect-label { background: none; border: 0; padding: 0; text-align: left; color: var(--navy); font: 500 14px var(--head); cursor: default; }
.remove { background: none; border: 0; color: var(--muted); font-size: 18px; line-height: 1; width: 32px; height: 32px; border-radius: 50%; }
.remove:hover { background: var(--panel-2); color: var(--ink); }
.bar { display: flex; gap: 2px; height: 10px; margin: 6px 0 5px; }
.seg { min-width: 3px; border-radius: 2px; }
.seg.kept { background: var(--kept); }
.seg.removed { background: var(--removed); }
.seg.silent { background: var(--c); }
.seg.hidden { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--warn); }
.effect-nums { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.key.kept { background: var(--kept); }
.key.removed { background: var(--removed); }
.key.hidden { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--warn); }
.passthrough { font-size: 14px; color: var(--ink); padding: 2px 2px; }

/* table: the wrapper does not scroll, so the header sticks to the page, under
   the site's bars while they show (--chrome-offset, set by the header script) */
.table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; overflow: visible; } /* site.css scrolls .table-wrap sideways; here that would unstick the header */
/* The Instrument column's floor: app.js keeps the figure columns whose widths
   (below) leave the name this much of the table, and drops the rest. 128px holds
   the widest class badge ("Structured note") with the cell padding. */
.table-wrap { --name-min: 128px; }
/* The list's columns follow the table's width (app.js layoutColumns). A redrawn list
   of a new height would add or remove the page's scrollbar, change that width and
   redraw again; a reserved gutter keeps the width the same either way. */
html:has(.table-wrap) { scrollbar-gutter: stable; }
.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; table-layout: fixed; font-variant-numeric: tabular-nums; }
.grid th { position: sticky; top: var(--chrome-offset, 0px); transition: top 0.22s ease-out; z-index: 1; background: var(--blue); color: #fff; text-align: left; font: 500 13px var(--head); padding: 8px 10px; white-space: nowrap; }
.grid th:first-child { border-top-left-radius: 5px; }
.grid th.col-name { width: auto; }
.grid th:last-child { border-top-right-radius: 5px; }
.grid th.col-class { width: 128px; }
.grid th.col-isin { width: 112px; }  /* a 12-character ISIN at 12px (letters wider than digits) plus the cell padding */
.grid th.date { width: 100px; }
.grid th.num { width: 84px; }
/* a figure too wide for its column wraps at its space rather than cut: a non-dollar
   size's currency over the figure ("MXN" / "200B"), a long price's basis under it
   ("1,294,000.00" / "KRW") */
.grid td.size, .grid td.price { white-space: normal; line-height: 1.25; }
.grid th.price { width: 112px; }  /* "50,000.00 /unit" and "729.00 TWD" fit; the cell ellipsis never reaches the basis */
.grid th.col-detail { width: 132px; }
.grid th.col-mobile { width: 42%; }
.grid th button { background: none; border: 0; color: inherit; font: inherit; padding: 0; }
.grid th[aria-sort] button::after { content: " ▲"; font-size: 10px; }
.grid th[aria-sort="descending"] button::after { content: " ▼"; }
.grid .num { text-align: right; }
.grid td { padding: 6px 10px; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid tr.row td:first-child { box-shadow: inset 3px 0 0 var(--c); }
.grid tbody tr.row:hover td { background: var(--accent-bg); }
/* the preview pane (detail.js): the row it shows, and the row the reader pinned */
.grid tbody tr.row.peeked td { background: var(--accent-bg); }
.grid tbody tr.row.pinned td { background: var(--pin-bg); }
.grid tbody tr.row.pinned td:first-child { box-shadow: inset 5px 0 0 var(--c); }
.peek { display: none; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px 16px;
  position: sticky; top: calc(var(--chrome-offset, 0px) + 12px); max-height: calc(100vh - 24px - var(--chrome-offset, 0px)); overflow-y: auto; min-width: 0; transition: top 0.22s ease-out; }
.peek-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.peek-pin { font-size: 12px; color: var(--blue); border: 1px solid var(--blue); border-radius: 10px; padding: 0 8px; }
.peek-title { font: 500 20px/1.25 var(--head); margin: 8px 0 4px; text-wrap: balance; overflow-wrap: anywhere; }
.peek .detail-ids { margin: 0 0 6px; }
.peek-open { display: inline-block; margin: 2px 0 12px; font-weight: 600; }
.peek .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.peek .card { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px 0 0; margin-top: 14px; }
.peek-more { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
.peek-hint { margin-top: 12px; }
@media (min-width: 1400px) {
  .layout { max-width: 1880px; grid-template-columns: 280px minmax(0, 1fr) 350px; }  /* the table keeps room for the ISIN column beside the pane */
  .peek { display: block; }
  .grid tbody tr.row { cursor: pointer; }
}
.inst { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); text-decoration: none; }
a.name:hover, a.name:focus-visible { color: var(--blue); text-decoration: underline; }
/* identifiers are data, not code: the body font with tabular figures (site.css
   --mono is for code only) */
.isin { flex: none; font: 12px var(--body); font-variant-numeric: tabular-nums; color: var(--muted); }
/* an exchange symbol, the identifier most readers search by */
.ticker { flex: none; font: 600 12px var(--body); color: var(--navy); }
.count .order { font: 400 14px var(--body); }
/* the ISIN, class badge and key figure whose columns the table dropped (app.js
   renderBody), under the name; each wraps onto the next line when it does not fit */
.sub { display: flex; font-size: 12px; color: var(--muted); margin-top: 2px; gap: 2px 8px; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.sub:empty { display: none; }
.sub .badge { flex: none; }
/* a flex row gets no ellipsis from the cell, so the key figure carries its own */
.sub-detail { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-block; font: 12px var(--body); padding: 0 7px; border-radius: 10px; background: var(--panel-2); color: var(--navy); }
.basis { color: var(--muted); font-size: 12px; }
.na { color: var(--na); }
.unk { color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
/* A licensed-data stub (explorer_teaser.py): a withheld figure's marker, and the
   offer drawn over a muted, empty plot where the price chart sits. The button is
   the site's own (site.css .site-btn). */
.lic { color: var(--muted); font-size: 12px; white-space: nowrap; cursor: help; }
/* a narrow figure column wraps the marker onto two lines rather than cut it */
.grid td .lic { display: inline-block; max-width: 100%; white-space: normal; line-height: 1.2; vertical-align: middle; }
.stub-plot { display: flex; align-items: center; justify-content: center; min-height: 240px; padding: 28px 16px;
  border: 1px solid var(--line); border-radius: 4px;
  background: repeating-linear-gradient(to bottom, transparent 0 47px, var(--line) 47px 48px), var(--accent-bg); }
.stub-offer { max-width: 30rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 18px 20px; text-align: center; }
.card .stub-msg { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.stub-cta { display: inline-block; margin-top: 0; }
.peek .stub-plot { min-height: 0; padding: 16px 12px; }
.divider td { background: var(--panel-2); color: var(--navy); font: 600 13px var(--head); padding: 5px 10px; }
.foot { color: var(--muted); font-size: 13px; }
.foot p { margin: 10px 0; }
.fine { max-width: 90ch; }


@media (prefers-reduced-motion: reduce) { .rail, .peek, .grid th { transition: none; } }

/* phone: the rail becomes a sheet over the results */
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; padding: 12px 16px 32px; }
  /* above the site's pinned header (z-index 20), whose bar would cover the sheet's close button */
  .rail { display: none; position: fixed; inset: 0; z-index: 30; border-radius: 0; max-height: none; top: 0; }
  body.rail-open .rail { display: block; }
  body.rail-open { overflow: hidden; }
  .rail-close { display: inline-block; background: var(--blue); color: #fff; border: 0; border-radius: 4px; padding: 6px 12px; min-height: 40px; }
  .page-title { font-size: 24px; }
  /* the count on a line of its own: beside the title and the Filters button it wraps
     to a height its text sets, which moves the table when the list arrives */
  .count { order: 1; flex-basis: 100%; }
  .filters-btn { display: inline-block; background: var(--blue); color: #fff; border: 0; border-radius: 4px; padding: 8px 16px; min-height: 40px; font-weight: 600; }
  .api-btn { display: none; }
  .api-btn-foot { display: inline-block; }
  .sub-detail { display: none; }
  .foot .fine { font-size: 14px; }  /* the phone text floor; the footnote is body text */
  .grid th.col-name { width: 58%; }
  .grid td.col-mobile { white-space: normal; font-size: 13px; }
  .col-mobile .fig { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .inst { flex-direction: column; gap: 0; }
  .inst .name { width: 100%; }
  .effect-nums { gap: 2px 12px; display: none; }
  .effect.open .effect-nums { display: flex; }
  .effect-label { cursor: pointer; }
  .effect-label::after { content: " ▾"; color: var(--muted); }
  .effect.open .effect-label::after { content: " ▴"; }
}

/* detail page: the list's layout hides, the instrument's sections show */
body.view-detail .layout { display: none; }
.detail-view { max-width: 1180px; margin: 0 auto; padding: 16px 32px 48px; }
.detail-head { margin-bottom: 14px; }
.crumbs { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.crumbs a { font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs a.badge { font-weight: 400; color: var(--navy); }
.detail-api-row { margin-top: 8px; }
.detail-api-row .api { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-title { font: 700 26px/1.2 var(--head); color: var(--navy); margin: 8px 0 4px; }
.detail-ids { margin: 0; color: var(--muted); font-size: 14px; }
.detail-ids .desc { color: var(--ink); }
.detail-head .badge { border-left: 3px solid var(--c); border-radius: 0 10px 10px 0; }
.loading { color: var(--muted); white-space: pre; }
/* ".", ". .", ". . .", then "." again: the 2nd and 3rd dots show in turn and keep their
   room while hidden, so the line never changes width */
.loading .dot { animation: 1.2s steps(1, end) infinite; }
.loading .dot:nth-child(2) { animation-name: loading-dot-2; }
.loading .dot:nth-child(3) { animation-name: loading-dot-3; }
@keyframes loading-dot-2 { 0% { visibility: hidden; } 33.3% { visibility: visible; } }
@keyframes loading-dot-3 { 0% { visibility: hidden; } 66.7% { visibility: visible; } }
@media (prefers-reduced-motion: reduce) { .loading .dot { animation: none; } }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px 14px; min-width: 0; }
.card.wide { grid-column: 1 / -1; }
/* a subheading over the sections that share a registry group (Connections) */
.card-group { grid-column: 1 / -1; font: 700 13px var(--head); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 -4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.card h2 { font: 700 16px var(--head); color: var(--navy); margin: 0 0 10px; }
.card h3 { font: 600 14px var(--head); color: var(--navy); margin: 12px 0 6px; }
.card p { margin: 6px 0; }
.source { color: var(--muted); font-size: 12px; margin-top: 10px !important; }
.lede { font-size: 14px; color: var(--ink); max-width: 80ch; }
.fine { color: var(--muted); font-size: 12px; }
.kv { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 16px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 8px; }
.stat { display: flex; flex-direction: column; min-width: 0; }
.stat-label { font-size: 12px; color: var(--muted); }
.stat-value { font: 500 18px var(--head); color: var(--ink); }
.stat-sub { font-size: 12px; color: var(--muted); }
.chart-title { font-size: 13px; color: var(--muted); margin: 10px 0 2px !important; }
.chart-wrap { position: relative; }
.chart { display: block; overflow: visible; }
.chart:focus-visible { outline-offset: 4px; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--muted); font: 11px var(--body); font-variant-numeric: tabular-nums; }
.chart .ptitle, .chart .vlabel, .chart .hlabel { fill: var(--muted); font: 11px var(--body); }
.chart .hair { stroke: var(--muted); stroke-width: 1; }
.chart .hit { fill: transparent; cursor: crosshair; }
/* series roles: the class colour for the instrument itself, a fixed categorical
   order for underliers (the site's chart palette, slot by slot, never cycled past 8),
   ink for the evaluation curve, muted dashes for thresholds and references */
:root {
  --u1: var(--chart-1, #005388); --u2: var(--chart-2, #C4561F); --u3: var(--chart-3, #12876A); --u4: var(--chart-4, #8B4FB8);
  --u5: var(--chart-5, #8D6E00); --u6: var(--chart-6, #C2336B); --u7: var(--chart-7, #4B5563); --u8: var(--chart-8, #2AA3C9);
  --good: var(--chart-up, #12876A); --bad: var(--chart-down, #B3261E); --barrier: var(--chart-5, #8D6E00); --trigger: var(--chart-4, #8B4FB8);
}
.ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ln.thin { stroke-width: 1.4; opacity: .75; }
.ln.bold { stroke-width: 3; }
.s-c { stroke: var(--c, var(--blue)); }
.area.s-c { fill: var(--c, var(--blue)); stroke: none; opacity: .1; }
.u1 { stroke: var(--u1); } .u2 { stroke: var(--u2); } .u3 { stroke: var(--u3); } .u4 { stroke: var(--u4); }
.u5 { stroke: var(--u5); } .u6 { stroke: var(--u6); } .u7 { stroke: var(--u7); } .u8 { stroke: var(--u8); }
.s-ink { stroke: var(--ink); }
.s-ref { stroke: var(--na); stroke-width: 1; }
.s-ref.dashed { stroke-dasharray: 5 4; stroke-width: 1.5; }
.s-ref.dotted { stroke-dasharray: 2 3; }
.s-barrier { stroke: var(--barrier); stroke-width: 1.5; stroke-dasharray: 3 3; }
.s-trigger { stroke: var(--trigger); stroke-width: 1.5; stroke-dasharray: 8 3 2 3; }
.s-next { stroke: var(--sqx-ink, #1A2430); stroke-width: 1; stroke-dasharray: 5 4; }
.chart .vlabel.s-next, .chart .vlabel.s-ink { fill: var(--ink); }
.chart .hlabel.s-trigger, .chart .vlabel.s-trigger { fill: var(--trigger); }
.chart .vlabel.s-barrier { fill: var(--barrier); }
/* A label takes its series class for colour; that class also carries the line's
   stroke, which SVG text would draw around every glyph. */
.chart text.vlabel, .chart text.hlabel { stroke: none; }
.mk { stroke: var(--panel); stroke-width: 1.5; }
.mk.s-c { fill: var(--c, var(--blue)); }
.mk.s-good { fill: var(--good); } .mk.s-call { fill: var(--trigger); } .mk.s-ink { fill: var(--ink); }
.mk-x.s-bad { stroke: var(--bad); stroke-width: 2.5; fill: none; }
.mk-tick { stroke: var(--muted); stroke-width: 1.5; }
/* a muni's MBIS records (market_activity, series_bonds): the categorical palette's
   first three slots in order, each side with its own marker shape */
.mk.s-offer { fill: var(--u1); } .mk.s-bid { fill: var(--u2); } .mk.s-trade { fill: var(--u3); }
/* a quote beyond the chart's range, drawn at its edge (detail.js sideLayers) */
.mk.off { fill: var(--panel); stroke-width: 2; } .mk.off.s-offer { stroke: var(--u1); } .mk.off.s-bid { stroke: var(--u2); } .mk.off.s-trade { stroke: var(--u3); }
/* market_activity's marks, area by par (detail.js sideLayers maxPar): filled see-through
   and outlined in the side's colour, so overlapping quotes stay visible through each other */
.mk.sz { fill-opacity: .4; stroke-width: 1; } .mk.sz.s-offer { stroke: var(--u1); } .mk.sz.s-bid { stroke: var(--u2); } .mk.sz.s-trade { stroke: var(--u3); }
.mk.sz.off { fill-opacity: 0; stroke-width: 1.5; }
.mk.sz.s-size { fill: var(--muted); stroke: var(--muted); }
.fill-good { fill: var(--good); opacity: .16; stroke: none; }
.fill-bad { fill: var(--bad); opacity: .14; stroke: none; }
.band.future { fill: var(--muted); opacity: .07; }
.band.ended { fill: var(--muted); opacity: .14; }
.swatch { flex: none; overflow: visible; }
.legend-item { display: inline-flex; align-items: center; gap: 4px; }
.legend { margin: 4px 0 2px; }
.tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.12); display: flex; flex-direction: column; white-space: nowrap; }
.tip strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.tip span { color: var(--muted); }
.tip .tip-title { color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.tip .tip-row { display: flex; align-items: center; gap: 4px; }
.tip .tip-row strong { color: var(--ink); margin-left: auto; padding-left: 8px; }
.legend { display: flex; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.table-view summary { cursor: pointer; font-size: 13px; color: var(--blue); margin-top: 8px; }
.dtable-wrap { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.dtable th { text-align: left; font: 500 12px var(--head); color: var(--muted); border-bottom: 1px solid var(--line); padding: 4px 8px 4px 0; white-space: nowrap; }
.dtable td { border-bottom: 1px solid var(--line); padding: 4px 8px 4px 0; vertical-align: top; }
.dtable .num { text-align: right; }
.dtable tr.past td { color: var(--muted); }
.dtable tr.next td { background: var(--accent-bg); font-weight: 600; }
.more-btn { margin-top: 8px; }
.plain-list { margin: 0; padding-left: 18px; font-size: 14px; }
.site-btn { display: inline-block; text-decoration: none; }
.detail-missing { padding: 24px 0; }
@media (max-width: 860px) {
  .detail-view { padding: 12px 16px 32px; }
  .detail-title { font-size: 21px; }
  /* the row above the title stays one line (its height is the server's, explorer_pages.py)
     and inside the screen: the steps keep their links, the position in the results
     gives way, and the class badge shortens to fit */
  .crumbs > a:first-child, .stepper { flex: none; }
  .stepper .step-at { display: none; }
  .crumbs .badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 4px 10px; }
}
.tip[hidden] { display: none; }
.pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pair .col { display: grid; gap: 14px; min-width: 0; }
.dtable td { white-space: nowrap; }
.dtable td.wrap { white-space: normal; min-width: 12ch; }

/* bars: each labelled with its value */
.vbars { display: flex; align-items: stretch; gap: 6px; height: 150px; margin: 6px 0 4px; }
.vbar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; }
.vbar-track { flex: 1; width: 70%; max-width: 44px; display: flex; align-items: flex-end; }
.vbar-fill { display: block; width: 100%; background: var(--c, var(--blue)); border-radius: 3px 3px 0 0; min-height: 1px; }
.vbar.dim .vbar-fill { background: var(--removed); }
.vbar-value { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.vbar-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vbars.signed .vbar-track { position: relative; align-items: stretch; }
.vbars.signed .vbar-fill { position: absolute; bottom: 50%; }
.vbars.signed .vbar.neg .vbar-fill { top: 50%; bottom: auto; border-radius: 0 0 3px 3px; background: var(--bad); }
.vbars.signed .vbar-track { border-bottom: 0; background: linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat; }
.hbars { display: grid; gap: 3px; margin: 6px 0 4px; font-size: 12px; }
.hbar { display: grid; grid-template-columns: minmax(70px, 38%) minmax(0, 1fr) 52px; gap: 8px; align-items: center; }
.hbar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.hbar-track { height: 10px; background: var(--panel-2); border-radius: 2px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: var(--c, var(--blue)); }
.hbar.dim .hbar-fill { background: var(--removed); }
.hbar.dim .hbar-label { color: var(--muted); }
.hbar-value { text-align: right; font-variant-numeric: tabular-nums; }
.hbar.neg .hbar-fill { background: var(--bad); }
/* an index page's paired blocks (the period table and the calendar years; the notes
   by issuer and by payoff): side by side where they fit */
.index-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 32px; align-items: start; }
.index-split h3 { margin-top: 0; }
/* an index section's subsections stand apart from the rows inside them */
.card[data-component^="index_"] h3 { margin-top: 28px; }
.card[data-component="index_returns"] .index-split h3 { margin-top: 0; }
.card[data-component^="index_"] .source { max-width: 75ch; }
/* a stacked table on a phone (detail.js table stack): the first cell on its own line,
   the others under it, each after its column's label */
@media (max-width: 860px) { .card[data-component^="index_"] .source { font-size: 14px; } }
@media (max-width: 600px) {
  .dtable.stack thead { display: none; }
  .dtable.stack tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .dtable.stack td { display: inline-block; border: 0; padding: 0 12px 0 0; white-space: normal; text-align: left; min-width: 0; }
  .dtable.stack td:first-child { display: block; padding-bottom: 2px; }
  .dtable.stack td:not(:first-child)::before { content: attr(data-label) " "; color: var(--muted); }
  .dtable.stack tr.next { background: var(--accent-bg); }
  .dtable.stack tr.next td { background: none; }
}
.ret-ann { display: block; color: var(--muted); font-size: 12px; }
.minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 24px; }
.mini h3 { margin-top: 4px; }
/* fund rating and style box */
.rating-row { display: flex; align-items: center; gap: 12px; }
.rating-band { display: inline-flex; gap: 4px; }
.pip { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--line); }
.pip.on { background: var(--c, var(--blue)); border-color: var(--c, var(--blue)); }
.pip.on.prov { opacity: .6; }
.rating-num { font: 700 18px var(--head); color: var(--ink); }
.stylebox { display: grid; grid-template-columns: max-content repeat(3, minmax(0, 1fr)); gap: 3px; max-width: 360px; font-size: 12px; }
.sb-h { color: var(--muted); padding: 2px 6px; align-self: center; }
.sb-cell { text-align: center; padding: 10px 4px; border-radius: 3px; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--c, var(--blue)) calc(var(--w) * 70%), var(--panel-2)); }
.sb-cell.on { outline: 2px solid var(--ink); outline-offset: -2px; font-weight: 600; }
.cov { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cov.low { color: var(--warn-ink); }

/* timeline range buttons, result stepper, the document's JSON */
.range-row { display: flex; gap: 6px; margin: 4px 0 6px; }
.range-btn { background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 4px; padding: 3px 10px; font-size: 13px; min-height: 30px; }
.range-btn[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); font-weight: 600; }
.stepper { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 14px; }
.stepper a { text-decoration: none; font-weight: 600; }
.stepper .step-off { color: var(--muted); }
.stepper .step-at { color: var(--muted); font-variant-numeric: tabular-nums; }
.doc-json { margin-top: 16px; }
.doc-json pre.json { max-height: 480px; overflow: auto; font-size: 12px; background: var(--panel); border: 1px solid var(--line); padding: 8px; white-space: pre; }
/* other dealers' prices beside the note's main dealer */
.s-dealer1 { stroke: var(--sqx-ink, #1A2430); stroke-width: 1.4; stroke-dasharray: 5 3; }
.s-dealer2 { stroke: var(--barrier); stroke-width: 1.4; stroke-dasharray: 2 2; }
.s-dealer3 { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 8 3; }
/* SQX's evaluated note price: a thin line over two soft translucent ranges, the
   80% range blurred at its edges so it reads as uncertainty, not a boundary */
:root { --eval: var(--chart-4, #8B4FB8); }
.s-eval { stroke: var(--eval); stroke-width: 1.3; }
.mk.s-eval { fill: var(--eval); stroke: var(--panel); stroke-width: 1; }
.ribbon { stroke: none; }
.ribbon.ev80 { fill: var(--eval); opacity: .13; filter: blur(1.5px); }
.ribbon.ev50 { fill: var(--eval); opacity: .22; }
.swatch .ribbon.ev80 { filter: none; }
/* the evaluated price's breakdown under the timeline */
.model-breakdown { margin-top: 12px; }
.model-breakdown summary { font-weight: 600; cursor: pointer; }
.breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 24px; margin: 8px 0; }
.breakdown-grid h4 { margin: 0 0 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
/* the fee medians a fund's net expense ratio is drawn against, narrowest cohort first */
.s-med-category { stroke: var(--u1); stroke-width: 1.6; }
.s-med-vehicle { stroke: var(--u3); stroke-width: 1.6; stroke-dasharray: 6 3; }
.s-med-all { stroke: var(--na); stroke-width: 1.6; stroke-dasharray: 2 3; }
.mk.s-med-category { fill: var(--u1); } .mk.s-med-vehicle { fill: var(--u3); } .mk.s-med-all { fill: var(--na); }
.mk.mk-med { stroke-dasharray: none; stroke-width: 1; }
/* the fund's fee waiver: the gap between its gross and net ratios */
.s-waived { fill: var(--c, var(--blue)); stroke: none; opacity: .18; }
/* a cohort's middle half (25th to 75th percentile) */
.s-spread { fill: var(--u1); stroke: none; opacity: .12; }
.spread-wrap { position: relative; }
.chart .spread-head { fill: var(--ink); font: 600 12px var(--body); }
.chart .spread-label { fill: var(--muted); font: 11px var(--body); }
.spread-whisker { stroke: var(--na); stroke-width: 1.5; }
.spread-box { fill: var(--panel-2); stroke: var(--na); stroke-width: 1; }
.spread-median, .mk-tick.spread-median { stroke: var(--ink); stroke-width: 2; }
.spread-row:focus { outline: none; }
.spread-row:focus .hit { fill: var(--accent-bg); }
.more-data { margin: 8px 0 0; font-size: 14px; }
/* the timeline's range slider */
.range-slider { margin-top: 4px; touch-action: none; }
.chart.strip .strip-bg { fill: var(--panel-2); }
.chart.strip .strip-win { fill: var(--blue); opacity: .12; stroke: var(--blue); stroke-width: 1; cursor: grab; }
.chart.strip .strip-handle { fill: var(--panel); stroke: var(--blue); stroke-width: 1.5; cursor: ew-resize; }
.chart.strip .strip-handle:focus-visible { outline: 2px solid var(--blue); }
.chart.strip .strip-hit { fill: transparent; cursor: ew-resize; }
/* on a phone a section's heading folds it */
.card-toggle { all: unset; font: inherit; color: inherit; }
@media (max-width: 860px) {
  .card-toggle { cursor: pointer; display: flex; justify-content: space-between; width: 100%; }
  .card-toggle::after { content: "▾"; color: var(--muted); }
  .card.collapsed .card-toggle::after { content: "▸"; }
  .card.collapsed > :not(h2) { display: none; }
}
/* the search's suggestions */
.suggest { list-style: none; margin: 0; padding: 4px 0; position: absolute; left: 16px; right: 16px; z-index: 5;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; }
.suggest .sg { display: flex; gap: 8px; align-items: center; padding: 6px 10px; cursor: pointer; font-size: 14px; }
.suggest .sg.active, .suggest .sg:hover { background: var(--accent-bg); }
.suggest .sg-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.suggest .isin { color: var(--muted); font-size: 12px; }
/* The headline facts an instrument page is sent with (explorer_pages.py), shown
   until detail.js draws the page, and to a reader that runs no script. */
.page-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 16px 0; font-variant-numeric: tabular-nums; }
.page-facts dt { color: var(--muted); }
.page-facts dd { margin: 0; }
/* The facts are for a reader without scripts; with them the sections take their place,
   drawn into the space below the header rather than over facts that would vanish. */
@media (scripting: enabled) { .page-facts { display: none; } }

/* A note whose terms are pending (detail.js termsPending) and the extraction it
   offers (live_extract.js). */
.terms-pending > p:first-child { margin-top: 0; }
.live-extract { margin-top: 10px; padding: 12px 14px; border-radius: 6px; background: var(--accent-bg); }
.live-extract > p { max-width: 68ch; }
.live-btn { background: var(--blue); color: #fff; border: 1px solid var(--blue); border-radius: 4px; padding: 8px 16px;
  font: 600 14px var(--head); min-height: 44px; cursor: pointer; }
.live-btn:hover { filter: brightness(1.08); }
.live-btn:disabled { opacity: .55; cursor: default; filter: none; }
.live-btn[hidden] { display: none; }
.live-cancel { background: none; border: 0; color: var(--muted); font: inherit; min-height: 44px; padding: 0 8px; cursor: pointer; }
.live-step { display: grid; gap: 10px; max-width: 520px; margin-top: 4px; }
.live-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.live-field { display: grid; gap: 4px; }
.live-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.live-field input { padding: 9px 10px; border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 16px;
  background: var(--panel); color: var(--ink); min-width: 0; }
.live-field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.live-code { font-variant-numeric: tabular-nums; letter-spacing: .4em; max-width: 12ch; }
.live-actions { display: flex; gap: 10px; align-items: center; }
.live-err { color: #A4262C; font-size: 13px; min-height: 0; margin: 0 !important; }
.live-err:empty { display: none; }
.live-status:not(:empty) { margin-top: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.live-stage { font-variant-numeric: tabular-nums; color: var(--blue); }
.live-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-right: 8px;
  vertical-align: middle; animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live-pulse { animation: none; } }
.live-fine { color: var(--muted); font-size: 12px; }
@media (max-width: 520px) { .live-row { grid-template-columns: 1fr; } }