/* app.css — the fund profile's page glue on the site's light plate.

   Tokens are site.css's (--plate, --panel, --ink, --deep, --beam, --rule-soft,
   --display, --body, --mono); nothing here restates a colour the site already
   names. Every hover is a per-element rule on the hovered element (a row, a
   tab, a bar) — never a class on an ancestor that restyles a subtree, the
   cost that blanked the explorer's plate. */

body.fp-page { background: var(--plate); color: var(--ink); }
/* site.css caps main at 940px with its own side padding; the profile is a data page and takes a wider column */
.fp-main { flex: 1; max-width: 1240px; padding: 22px 22px 56px; }
.fp-noscript { padding: 40px var(--gutter); font: 15px/1.6 var(--body); }

/* ── search ── */
.fp-search { position: relative; max-width: 620px; }
.fp-search input {
  width: 100%; font: 500 1rem/1.3 var(--body); color: var(--ink);
  background: var(--plate-hi); border: 1px solid var(--rule); border-radius: 6px;
  padding: 11px 14px 11px 42px;
}
.fp-search input:focus { border-color: var(--beam); outline: none; box-shadow: 0 0 0 3px rgba(0,163,173,0.18); }
.fp-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--deep); pointer-events: none; }
.fp-results { list-style: none; margin: 6px 0 0; border: 1px solid var(--rule); border-radius: 6px; background: var(--plate-hi); overflow: hidden; }
.fp-results li a { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 10px; align-items: baseline; padding: 9px 14px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--rule-soft); }
.fp-results li:first-child a { border-top: none; }
.fp-results li a:hover, .fp-results li a:focus { background: var(--panel); }
.fp-results .tk { font: 600 0.82rem/1.3 var(--display); color: var(--deep); letter-spacing: 0.3px; }
.fp-results .nm { font-size: 0.93rem; overflow-wrap: anywhere; }
.fp-results .veh { font: 500 0.72rem/1.3 var(--body); color: var(--deep); text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; }
@media (max-width: 640px) { .fp-results li a { grid-template-columns: 1fr; gap: 2px; } .fp-results .veh { display: none; } }

/* ── landing (no fund chosen) ── */
.fp-lede { font: 700 clamp(1.5rem, 3.4vw, 2.1rem)/1.15 var(--display); letter-spacing: -0.3px; margin: 8px 0 12px; max-width: 760px; }
.fp-sub { max-width: 680px; color: var(--ink); opacity: 0.86; margin-bottom: 22px; }
.fp-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.fp-examples a { font: 500 0.82rem/1.2 var(--body); color: var(--deep); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 12px; text-decoration: none; background: var(--plate-hi); }
.fp-examples a:hover { border-color: var(--beam); color: var(--film); }

/* ── fund header ── */
.fp-head { margin: 22px 0 14px; display: grid; grid-template-columns: 1fr auto; gap: 14px 28px; align-items: start; }
.fp-head h1 { font: 700 clamp(1.35rem, 3vw, 1.9rem)/1.15 var(--display); letter-spacing: -0.3px; margin: 0 0 6px; overflow-wrap: break-word; }
.fp-idline { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 0.82rem/1.4 var(--body); color: var(--deep); }
.fp-idline code { font-family: var(--mono); font-size: 0.86em; color: var(--ink); }
.fp-siblings { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.fp-siblings a, .fp-siblings span { font: 500 0.76rem/1.2 var(--body); border-radius: 999px; padding: 4px 10px; text-decoration: none; border: 1px solid var(--rule); color: var(--deep); background: var(--plate-hi); }
.fp-siblings span[aria-current] { background: var(--film); color: var(--plate); border-color: var(--film); }
.fp-siblings a:hover { border-color: var(--beam); }
.fp-headline-stats { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 8px; }
@media (max-width: 760px) { .fp-head { grid-template-columns: 1fr; } .fp-headline-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── stat tiles ── */
.fp-tile { background: var(--plate-hi); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 10px 13px 11px; min-width: 0; }
.fp-tile .lbl { font: 600 0.68rem/1.3 var(--display); letter-spacing: 0.8px; text-transform: uppercase; color: var(--deep); }
.fp-tile .val { font: 700 1.35rem/1.15 var(--display); letter-spacing: -0.3px; margin-top: 3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fp-tile .val small { font: 500 0.72rem/1.2 var(--body); color: var(--deep); margin-left: 4px; letter-spacing: 0; }
.fp-tile .sub { font: 400 0.76rem/1.4 var(--body); color: var(--ink); opacity: 0.78; margin-top: 3px; }
.fp-tile.fp-hero { border-color: var(--beam); box-shadow: inset 0 3px 0 var(--beam); }

/* ── tabs ── */
.fp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin: 18px 0 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fp-tabs::-webkit-scrollbar { display: none; }
.fp-tabs [role=tab] {
  flex: 0 0 auto; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  font: 600 0.9rem/1.2 var(--display); letter-spacing: 0.2px; color: var(--deep); padding: 10px 14px; cursor: pointer; white-space: nowrap;
}
.fp-tabs [role=tab]:hover { color: var(--film); }
.fp-tabs [role=tab][aria-selected=true] { color: var(--film); border-bottom-color: var(--beam); }
.fp-tabs [role=tab] .badge { font: 500 0.66rem/1 var(--body); color: var(--deep); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 6px; margin-left: 6px; vertical-align: 1px; }

/* ── panels ── */
.fp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.fp-grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.fp-card { background: var(--plate-hi); border: 1px solid var(--rule-soft); border-radius: 10px; padding: 16px 18px 14px; min-width: 0; }
.fp-card.span { grid-column: 1 / -1; }
.fp-card h2 { font: 700 1.02rem/1.25 var(--display); letter-spacing: -0.1px; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.fp-card h2 .asof { font: 500 0.72rem/1.3 var(--body); color: var(--deep); letter-spacing: 0; }
.fp-card .note { font: 400 0.8rem/1.5 var(--body); color: var(--ink); opacity: 0.8; margin: 2px 0 10px; }
.fp-card .note a { color: var(--deep); }

.fp-empty { border: 1px dashed var(--rule); border-radius: 8px; padding: 14px 16px; font: 400 0.86rem/1.5 var(--body); color: var(--ink); opacity: 0.85; background: var(--panel); }
.fp-empty strong { color: var(--film); }
.fp-crash { border-style: solid; border-color: var(--film); margin-top: 8px; }

/* key/value rows — the hover lights the ROW, nothing above it */
.fp-kv { width: 100%; border-collapse: collapse; font: 400 0.86rem/1.4 var(--body); }
.fp-kv th, .fp-kv td { padding: 6px 4px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; text-align: left; }
.fp-kv th { font-weight: 500; color: var(--deep); width: 46%; }
.fp-kv td { font-variant-numeric: tabular-nums; }
.fp-kv td.num { text-align: right; white-space: nowrap; }
.fp-kv tr:hover td, .fp-kv tr:hover th { background: var(--panel); }
.fp-kv code { font-family: var(--mono); font-size: 0.86em; }
.fp-null { color: var(--deep); opacity: 0.6; }
.fp-status { display: inline-block; font: 600 0.68rem/1.2 var(--display); letter-spacing: 0.6px; text-transform: uppercase; border: 1px solid var(--rule); border-radius: 4px; padding: 3px 7px; color: var(--deep); background: var(--panel); }
.fp-status.ok { border-color: var(--beam); color: var(--deep); }
.fp-status.warn { border-color: #B8860B; color: #7A5A00; background: #FBF5E6; }

/* the coverage chip beside every fixed-income measure */
.fp-cov { display: inline-block; font: 500 0.66rem/1.2 var(--body); color: var(--film); background: var(--panel); border: 1px solid var(--rule); border-radius: 999px; padding: 2px 7px; margin-left: 8px; vertical-align: 1px; white-space: nowrap; }
.fp-cov.low { border-color: #B8860B; background: #FBF5E6; }
.fp-cov .bar { display: inline-block; width: 34px; height: 5px; border-radius: 3px; background: var(--rule-soft); margin-right: 5px; vertical-align: 1px; position: relative; overflow: hidden; }
.fp-cov .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--beam); border-radius: 3px; }

/* data tables (holdings, trailing returns, fee history) */
.fp-table { width: 100%; border-collapse: collapse; font: 400 0.84rem/1.35 var(--body); }
.fp-table th, .fp-table td { padding: 6px 6px; border-bottom: 1px solid var(--rule-soft); text-align: left; vertical-align: top; }
.fp-table thead th { font: 600 0.66rem/1.3 var(--display); letter-spacing: 0.7px; text-transform: uppercase; color: var(--deep); white-space: nowrap; }
.fp-table td.num, .fp-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-table tbody tr:hover td { background: var(--panel); }
.fp-table td .rankbar { display: inline-block; width: 48px; height: 6px; background: var(--rule-soft); border-radius: 3px; vertical-align: middle; margin-left: 6px; position: relative; overflow: hidden; }
.fp-table td .rankbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--beam); }
.fp-scroll { overflow-x: auto; }
/* the whole book scrolls inside its card; the header row stays put */
.fp-book { max-height: 70vh; overflow: auto; }
.fp-book thead th { position: sticky; top: 0; background: var(--plate-hi); z-index: 1; }
/* on a phone the identifier/asset columns yield so weight and value stay in
   view; the asset reads as a line under the holding's name instead */
.fp-table .m-only { display: none; }
@media (max-width: 640px) { .fp-table .hide-m { display: none; } .fp-table .m-only { display: block; font-size: 0.74rem; } }

/* ── charts (inline SVG drawn by the app) ── */
.fp-chart-wrap { max-width: 720px; }
.fp-chart { width: 100%; height: auto; display: block; font-family: var(--body); }
.fp-chart text { fill: var(--ink); }
.fp-chart .axis text { fill: var(--deep); font-size: 10px; }
.fp-chart .axis line, .fp-chart .grid line { stroke: var(--rule-soft); }
.fp-chart .bar { fill: var(--beam); }
.fp-chart .bar.dim { fill: var(--rule); }
.fp-chart .bar.neg { fill: #B8860B; }
.fp-chart .bar:hover { fill: var(--deep); }
.fp-chart .line { fill: none; stroke: var(--beam); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fp-chart .dot { fill: var(--plate-hi); stroke: var(--beam); stroke-width: 2; }
.fp-chart .dot:hover { fill: var(--beam); }
.fp-chart .lbl { font-size: 10.5px; }
.fp-chart .val { font-size: 10.5px; font-weight: 600; }
.fp-chart .muted { fill: var(--deep); font-size: 10px; }
.fp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 0.74rem/1.3 var(--body); color: var(--deep); margin-top: 6px; }
.fp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; background: var(--beam); }
.fp-legend i.dim { background: var(--rule); }
.fp-legend i.neg { background: #B8860B; }

/* 3x3 style box */
.fp-matrix { display: grid; grid-template-columns: 64px repeat(3, 1fr); gap: 4px; max-width: 420px; font: 500 0.74rem/1.3 var(--body); color: var(--deep); }
.fp-matrix .cell { border-radius: 4px; min-height: 52px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--ink); font-variant-numeric: tabular-nums; border: 1px solid var(--rule-soft); }
.fp-matrix .cell.on { outline: 2px solid var(--beam); outline-offset: -2px; }
.fp-matrix .cell small { font-size: 0.68rem; color: var(--deep); }
.fp-matrix .hl { display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; text-align: right; }
.fp-matrix .ht { text-align: center; padding: 2px 0; }

/* ── differentiator claims ── */
.fp-claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin: 0 0 16px; }
.fp-claim { border-left: 4px solid var(--beam); border-radius: 0 6px 6px 0; background: var(--plate-hi); padding: 10px 14px; font: 400 0.84rem/1.5 var(--body); }
.fp-claim strong { display: block; font: 700 0.86rem/1.3 var(--display); color: var(--film); margin-bottom: 2px; }

.fp-foot { margin-top: 26px; font: 400 0.76rem/1.5 var(--body); color: var(--deep); }
.fp-foot code { font-family: var(--mono); }
.fp-norow { margin-top: 8px; }

/* ── call to action: opens the site's one lead gate (the dictionary modal) ── */
.fp-cta { margin-top: 30px; display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; align-items: center; background: var(--plate-hi); border: 1px solid var(--rule-soft); border-left: 4px solid var(--beam); border-radius: 10px; padding: 18px 22px; }
.fp-cta h2 { font: 700 1.1rem/1.25 var(--display); letter-spacing: -0.1px; margin: 0 0 6px; }
.fp-cta p { margin: 0 0 8px; font: 400 0.88rem/1.55 var(--body); color: var(--ink); opacity: 0.88; max-width: 70ch; }
.fp-cta p a { color: var(--deep); }
.fp-cta-btn { white-space: nowrap; }
@media (max-width: 760px) { .fp-cta { grid-template-columns: 1fr; } }
.fp-more { margin: 10px 0 0; font: 500 0.9rem/1.5 var(--body); }
.fp-more a { color: var(--deep); font-weight: 600; }
/* style box axes: duration across, credit quality down */
.fp-matrix-wrap { display: grid; grid-template-columns: 18px 1fr; gap: 6px; max-width: 460px; }
.fp-axis-x { text-align: center; font: 600 0.72rem/1.2 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep); margin: 0 0 4px 64px; }
.fp-axis-y { display: flex; align-items: center; justify-content: center; }
.fp-axis-y span { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 0.72rem/1.2 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep); }
/* On a phone the five tabs do not fit on one line and a hidden scrollbar gives
   no hint that more exist: wrap them so every tab is reachable without a scroll. */
@media (max-width: 520px) { .fp-tabs { flex-wrap: wrap; overflow-x: visible; } .fp-tabs [role=tab] { padding: 8px 10px; } }
.fp-segment { font-weight: 600; }
/* The provisional-rating badge beside the band: a rank on the one-year horizon
   alone is labelled where the number is, never only in the note below it. */
.fp-badge { display: inline-block; padding: 1px 8px; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.02em; color: var(--deep); opacity: 0.85; white-space: nowrap; }