/* ---------------------------------------------------------------------
 * Investment funds — explorer and fund record.
 *
 * Real manager identities sit beside fabricated fund figures and a
 * runtime-computed illustrative score. Three kinds of data, one screen:
 * the fabricated/measured chips below carry that distinction visually so
 * it never has to be inferred.
 * ------------------------------------------------------------------- */
.fund-notice {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
}
.heading-overline-link:hover {
  text-decoration: underline;
}

/* On-page anchor nav: a sticky, quiet way into a long record without
 * hiding sections behind tabs. */
.on-page-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 0 18px;
  margin-bottom: 4px;
  background: var(--page);
}
.on-page-nav a {
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--surface);
}
.on-page-nav a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
#nav-journey-title,
#evidence-title,
#fit-title,
#cohort-title,
#fund-sharia-title,
#manager-title {
  scroll-margin-top: calc(var(--header-height) + 56px);
}

/* NAV journey period tabs double as the return figures. */
.nav-period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.nav-period-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  min-width: 76px;
}
.nav-period-tab span {
  font-size: 10px;
  font-weight: 650;
  color: var(--muted);
}
.nav-period-tab strong {
  font-size: 13px;
}
.nav-period-tab.is-active {
  border-color: var(--accent);
  background: var(--tint);
}
.nav-period-tab.is-active span {
  color: var(--accent);
}
.nav-journey-fact {
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
}
.figure-chart.is-ribbon {
  height: 90px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.drawdown-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.figure-chart.is-ribbon .chart-canvas {
  height: 64px;
}
.fund-methodology-link {
  min-height: auto;
  padding: 0;
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.status-chip.is-fabricated {
  color: var(--compare);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--compare) 45%, var(--border));
  background: color-mix(in srgb, var(--compare) 8%, var(--surface));
}

/* Manager logo: a self-contained image-or-initial badge, sized per
 * context. Manager mark adds the name beside it for compact contexts
 * (headings, cohort rows); the fund table uses the logo on its own,
 * larger, beside stacked fund/manager text (see .fund-entity below). */
.manager-logo {
  display: inline-flex;
  flex: none;
}
.manager-logo img,
.manager-logo-fallback {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 7px;
  flex: none;
}
.manager-logo img {
  object-fit: contain;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3px;
}
.manager-logo-fallback {
  background: var(--tint);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.manager-logo.is-chip img,
.manager-logo.is-chip .manager-logo-fallback {
  inline-size: 22px;
  block-size: 22px;
  border-radius: 6px;
}
.manager-logo.is-row img,
.manager-logo.is-row .manager-logo-fallback {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 9px;
}
.manager-logo.is-large img,
.manager-logo.is-large .manager-logo-fallback {
  inline-size: 60px;
  block-size: 60px;
  border-radius: 12px;
  font-size: 22px;
}
.manager-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
}
.manager-mark.is-inline {
  display: flex;
  margin-top: 6px;
}
.manager-mark.is-large {
  font-size: 15px;
  gap: 14px;
  margin-bottom: 4px;
  color: var(--ink);
}
.manager-mark.is-spotlight {
  font-size: 12px;
  gap: 10px;
  color: var(--ink);
}
.manager-mark.is-spotlight .manager-logo img,
.manager-mark.is-spotlight .manager-logo-fallback {
  inline-size: 34px;
  block-size: 34px;
  border-radius: 8px;
}
.manager-panel-identity {
  margin-bottom: 6px;
}
.symbol-link .manager-mark {
  margin-top: 4px;
}

/* Fund table entity cell: a legible logo beside the fund and manager
 * names, so browsing the table reads as browsing real institutions. */
.fund-entity {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.fund-entity-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.fund-entity-text strong {
  font-size: 13px;
}
.fund-entity-text small {
  color: var(--muted);
  font-size: 11px;
}
.fund-entity:hover strong {
  color: var(--accent);
}

/* Manager quick-filter: browse by real institution logo, not just name. */
.manager-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.manager-chip {
  gap: 8px;
  padding-inline-start: 6px;
}

/* Risk and sharia badges. */
.risk-chip {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 650;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.risk-chip.risk-low {
  color: var(--positive);
  border-color: color-mix(in srgb, var(--positive) 45%, var(--border));
  background: color-mix(in srgb, var(--positive) 8%, var(--surface));
}
.risk-chip.risk-medium_low {
  color: var(--positive);
  border-color: color-mix(in srgb, var(--positive) 30%, var(--border));
}
.risk-chip.risk-medium {
  color: var(--caution);
  border-color: color-mix(in srgb, var(--caution) 45%, var(--border));
  background: color-mix(in srgb, var(--caution) 8%, var(--surface));
}
.risk-chip.risk-high {
  color: var(--negative);
  border-color: color-mix(in srgb, var(--negative) 45%, var(--border));
  background: color-mix(in srgb, var(--negative) 8%, var(--surface));
}

/* Filters. */
.fund-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.fund-search-field {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--muted);
}
.fund-search-field input {
  flex: 1;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 13px;
  min-height: 40px;
}
.fund-search-field input:focus {
  outline: none;
}
.fund-filters-toggle {
  flex: none;
  position: relative;
}
.fund-filters-chevron {
  transition: transform var(--dur-fast) var(--ease);
}
.fund-filters-toggle[aria-expanded="true"] .fund-filters-chevron {
  transform: rotate(180deg);
}
.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 17px;
  block-size: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 700;
}
.fund-filters-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.fund-filters-panel > *:first-child {
  margin-top: 0;
}
.fund-sort-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
}
.fund-sort-field select {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
}
.fund-filter-group {
  margin-top: 14px;
}
.fund-filter-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  min-height: 32px;
}
.filter-chip small {
  color: inherit;
  opacity: 0.7;
}
.filter-chip.is-active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.filter-chip:hover:not(.is-active) {
  border-color: var(--accent);
  color: var(--accent);
}

/* Spotlight: at most three cards, not a metric wall. */
.fund-spotlight {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.fund-spotlight-card {
  display: block;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--surface-soft);
}
.fund-spotlight-card:hover {
  border-color: var(--accent);
  background: var(--tint);
}
.fund-spotlight-card h3 {
  margin: 10px 0 12px;
  font-size: 13px;
}
.fund-spotlight-figures {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fund-spotlight-figures .num {
  font-size: 15px;
  font-weight: 700;
}

/* Signal print glyph. */
.signal-print {
  inline-size: 96px;
  block-size: 96px;
  flex: none;
}
.signal-print.is-mini {
  inline-size: 28px;
  block-size: 28px;
}
.signal-grid,
.signal-spoke {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
}
.signal-shape {
  fill: color-mix(in srgb, var(--accent) 22%, transparent);
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.evidence-layout {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.signal-legend {
  flex: 1 1 260px;
  margin: 0;
}
.evidence-brief-text {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.7;
  max-width: 70ch;
}

/* Fit tags. */
.fit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.fit-tag {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 650;
  min-width: 110px;
}
.fit-tag small {
  font-size: 10px;
  font-weight: 700;
}
.fit-tag.is-suited {
  border-color: color-mix(in srgb, var(--positive) 45%, var(--border));
  background: color-mix(in srgb, var(--positive) 8%, var(--surface));
}
.fit-tag.is-suited small {
  color: var(--positive);
}
.fit-tag.is-limited small {
  color: var(--muted);
}

/* Cohort compare rows reuse the coverage dataset-row treatment. */
.cohort-row {
  color: var(--ink);
  cursor: pointer;
}
.cohort-row:hover {
  background: var(--surface-soft);
}
.cohort-figure {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.page-note-count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 650;
}

/* Facet evidence, under the signal print's fact-grid. */
.facet-evidence-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 8px;
}
.facet-evidence-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.facet-evidence-list li:last-child {
  border-bottom: 0;
}
.facet-evidence-list strong {
  flex: 0 0 130px;
  color: var(--muted);
  font-weight: 650;
}
.facet-evidence-list span {
  flex: 1 1 200px;
}

/* Rating card. */
.rating-card {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}
.rating-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rating-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}
.rating-badge.rating-buy {
  color: var(--on-accent);
  background: var(--positive);
}
.rating-badge.rating-hold {
  color: var(--ink);
  background: color-mix(in srgb, var(--caution) 35%, var(--surface));
}
.rating-badge.rating-sell {
  color: var(--on-accent);
  background: var(--negative);
}
.rating-confidence {
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
}
.rating-why {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.7;
}
.rating-rules {
  margin-top: 12px;
  font-size: 11px;
}
.rating-rules summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--accent);
}
.rating-rules ul {
  margin: 10px 0 0;
  padding-inline-start: 18px;
}
.rating-rules li {
  margin-bottom: 4px;
  line-height: 1.6;
}
.rating-card .page-note {
  margin-top: 12px;
  padding-top: 12px;
}

/* Observations. */
.observations-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.observations-block h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.observations-block ul {
  margin: 0;
  padding-inline-start: 18px;
}
.observations-block li {
  font-size: 12px;
  line-height: 1.7;
  margin-bottom: 6px;
  max-width: 76ch;
}

/* Investor lens, movement profile, stress scenarios — sub-blocks inside
 * the fit section, each with its own quiet sub-heading. */
.investor-lens,
.movement-profile,
.stress-scenarios {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.investor-lens h3,
.movement-profile h3,
.stress-scenarios h3 {
  font-size: 13px;
  margin-bottom: 4px;
}
.lens-bars {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.lens-bar-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 650;
  margin-bottom: 6px;
}
.lens-track {
  height: 8px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.lens-track i {
  display: block;
  block-size: 100%;
  background: var(--accent);
}

/* Terms & tools: dealing terms, calculator, ledger, inside one section. */
.section-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 22px 0 0;
}
.dealing-terms,
.fund-calculator {
  margin-top: 18px;
}
.dealing-terms h3,
.fund-calculator h3 {
  font-size: 13px;
  margin-bottom: 4px;
}
.calculator-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 14px;
}
.calculator-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
}
.calculator-field input {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  max-width: 160px;
}
.calculator-field .segmented button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.calculator-field .segmented button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent);
}
.calculator-result {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
}

/* Peers compare. */
.cohort-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cohort-compare-check {
  flex: none;
  display: inline-flex;
}
.cohort-compare-check input {
  width: 16px;
  height: 16px;
}
.cohort-row-link {
  flex: 1;
  min-width: 0;
  color: var(--ink);
}
.cohort-row-link:hover h3 {
  color: var(--accent);
}
.compare-table th[scope="row"] {
  font-weight: 650;
  color: var(--muted);
}

/* Follow, feedback, community, sponsored. */
.follow-toggle {
  margin-top: 6px;
}
.follow-toggle.is-active {
  border-color: var(--accent);
  color: var(--accent);
}
.community-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 18px;
  display: grid;
  gap: 10px;
}
.community-list li {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-size: 12px;
  line-height: 1.6;
}
.sponsored-panel {
  padding: 20px;
  background: var(--surface-soft);
}
.sponsored-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.sponsored-panel p:not(.page-note) {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
}
.feedback-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.feedback-buttons {
  display: flex;
  gap: 8px;
}
.feedback-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--tint);
}

#terms-title {
  scroll-margin-top: calc(var(--header-height) + 56px);
}

@media (max-width: 767px) {
  .fund-search-row {
    flex-direction: column;
    align-items: stretch;
  }
  .evidence-layout {
    flex-direction: column;
    align-items: flex-start;
  }
  .facet-evidence-list strong {
    flex-basis: 100%;
  }
  .feedback-row {
    flex-direction: column;
    align-items: flex-start;
  }
}