/* World ETF layouts use the same design tokens and components as the landing
   page and portfolio report. fonts.css and insightfolio.css load first. */
:root {
  --paper: var(--if-bg-surface);
  --surface: var(--if-bg-surface);
  --soft: var(--if-bg-surface-alt);
  --ink: var(--if-text-primary);
  --muted: color-mix(in srgb, var(--if-text-primary) 66%, var(--if-bg-surface));
  --line: var(--if-border-color);
  --yellow: var(--if-yellow);
  --cyan: var(--if-data-blue);
  --lavender: var(--if-data-darkblue);
  --blue: var(--if-link-blue);
  --serif: var(--if-font-serif);
  --gradient: var(--if-gradient);
  --chart-one: #16789b;
  --chart-two: #6551b2;
  --chart-three: #9d4f93;
  --chart-four: #a17600;
  --shadow: 0 12px 40px var(--if-shadow);
  color-scheme: light;
}
[data-theme="dark"] {
  color-scheme: dark;
  --chart-one: var(--if-data-blue);
  --chart-two: var(--if-data-darkblue);
  --chart-three: var(--if-violett);
  --chart-four: var(--if-yellow);
}
body { font-family: var(--if-font-sans-serif); font-size: 16px; }
main { max-width: 1204px; padding-inline: 32px; }
h1 { font-size: clamp(36px, 4.7vw, 62px); line-height: 1.2; letter-spacing: -1.5px; }
h2 { font-size: 36px; line-height: 1.3; letter-spacing: -.7px; }
h3 { line-height: 1.3; }
/* Plain controls and blue text links, as in the report. */
a:not(.if-button):not(.brand), .text-link, .text-button {
  color: var(--if-link-blue);
}
a:not(.if-button):not(.brand):hover, .text-link:hover, .text-button:hover {
  color: var(--if-link-blue-hover);
}
.button { flex-shrink: 0; white-space: nowrap; }
.button.if-button-large { font-size: 16px; padding-inline: 26px; height: 56px; }
.button.if-button-secondary:hover svg { fill: none; }
.button:focus-visible { outline-color: var(--if-border-focus); }
.icon-button { border-radius: 40px; }
.icon-button:hover { background: var(--soft); }
.appbar {
  background: var(--if-glass-bg);
  border-bottom: 0;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.nav-inner { max-width: 1240px; padding-inline: 32px; }
.brand img { width: 146px; }
.nav-inner nav { gap: 20px; }
.nav-inner nav a, .nav-inner nav a:visited { font-size: 13px; color: var(--muted); border-bottom: 0; }
.nav-inner nav a.active, .nav-inner nav a.active:visited { color: var(--ink); font-weight: 700; }
.edition { font-size: 10px; letter-spacing: 1px; }
.hero { padding-block: 70px 56px; position: relative; isolation: isolate; gap: 32px; }
.hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 calc((1140px - 100vw) / 2) -20px;
  background: radial-gradient(ellipse at 75% 70%, color-mix(in srgb, var(--if-data-darkblue) 12%, transparent), transparent 65%),
              radial-gradient(ellipse at 20% 70%, color-mix(in srgb, var(--if-data-blue) 10%, transparent), transparent 65%);
}
.hero-description { font-size: 17px; line-height: 1.7; max-width: 580px; }
.hero-actions { gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-actions .button { white-space: normal; }
.hero .eyebrow {
  display: inline-flex; width: fit-content; padding: 7px 14px;
  border-radius: 40px; background: color-mix(in srgb, var(--if-blue) 10%, transparent);
  color: var(--if-link-blue-hover); font-size: 11px; letter-spacing: .6px;
}
.provenance { font-size: 11px; flex-wrap: wrap; }
.provenance button { color: var(--if-link-blue); }
.eyebrow { font-size: 11px; letter-spacing: 1px; }
.stats-strip { padding-block: 30px; }
.stats-strip strong { font-family: var(--if-font-sans-serif); font-weight: 900; }
.stats-strip span:not(.percent) { font-size: 12px; }
.section-heading { margin-bottom: 28px; gap: 24px; }
.section-heading > p { font-size: 15px; }
.launch-section, .explore, .cost-section, .guide-section, .fee-history-section { padding-top: 64px; }
/* New launches sit inside the comparison, between the coverage cards and the table. */
.explore .launch-section { padding-top: 16px; margin-bottom: 44px; }
.launch-grid, .coverage-cards, .provider-grid { gap: 20px; }
.launch-card, .coverage-card, .provider-card {
  background: var(--soft); border: 1px solid transparent;
  border-radius: 15px; padding: 24px;
}
/* Compact launch cards. Each card's three parts (fund, fee, launch date + coverage) share row
   tracks with the other cards in its grid row, so every part sits at the same height across cards. */
.launch-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; padding-block: 18px; }
.launch-fund { align-items: flex-start; }
.launch-fund .ticker { padding: 0; background: none; font-size: inherit; }
.launch-fund h3 { font-size: 16px; line-height: 1.45; }
.launch-fund > div > span, .launch-top, .launch-date, .launch-scope { font-size: 12px; }
.launch-bottom { padding-top: 12px; margin-top: 12px; }
.launch-bottom strong { font-size: 27px; font-weight: 900; line-height: 1.1; }
.launch-bottom button { padding-block: 4px; }
.launch-scope { margin-top: 8px; }
.launch-bottom button { color: var(--if-link-blue); font-size: 14px; font-weight: 700; }
.launch-bottom button:hover { color: var(--if-link-blue-hover); }
.launch-bottom div > span { font-size: 12px; }
.coverage-card { transition: border-color .15s, background-color .15s; }
.coverage-card:hover { transform: none; border-color: var(--if-border-focus); }
.coverage-card.selected { background: var(--surface); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.coverage-card h3 { font-size: 23px; }
.coverage-card p { font-size: 14px; line-height: 1.7; }
.card-bottom { font-size: 12px; padding-top: 16px; margin-top: 20px; }
.workbench, .calculator, .fh-card, dialog, .compare-performance { border-radius: 15px; }
.table-toolbar { background: var(--soft); }
.tabs button { font-size: 14px; }
.search-box, .filters select, .extra-filters select, .extra-filters label,
.calc-controls select, .fh-toolbar select, .compare-chart-controls select {
  border-radius: 30px;
}
.filters { gap: 12px; }
.fund-title { color: var(--if-link-blue); }
.fund-title:hover { color: var(--if-link-blue-hover); }
.fund-heading strong { font-weight: 700; }
.fund-name { font-size: 14px; }
.ticker, .cell-sub, .fund-meta, .results-meta { font-size: 11px; }
.coverage-pill, .badge, .tag { border-radius: 40px; }
.row-open { font-size: 12px; width: auto; padding: 7px 12px; }
.fund-mark { border-radius: 8px; }
th { background: var(--soft); }
.portfolio-section { background: var(--soft); border: 0; border-radius: 15px; padding: 40px; gap: 48px; }
.portfolio-intro h2 { font-size: 36px; }
.portfolio-intro p, .portfolio-next li { font-size: 15px; line-height: 1.7; }
.portfolio-next li::before { color: var(--if-link-blue); font-size: 13px; font-weight: 700; }
.portfolio-next .button { white-space: normal; }
.portfolio-note { font-size: 13px; }
.xray-cta { background: var(--soft); border: 0; border-radius: 15px; padding: 24px; gap: 24px; }
.xray-cta p { font-size: 14px; }
.calculator { border: 1px solid var(--line); background: var(--soft); }
.calc-controls { background: var(--soft); }
.calc-controls select {
  width: 100%;
  padding-right: 44px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23212121' d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}
[data-theme="dark"] .calc-controls select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23e8e8e8' d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
}
.calc-result { background: var(--if-bg-surface); color: var(--if-text-primary); }
.calc-result .cyan { background: var(--chart-one); }
.calc-result .lavender { background: var(--chart-two); }
.calc-result .calc-icon { color: var(--if-text-primary); background: var(--if-bg-surface-alt); }
.calc-result-top strong { font-weight: 900; }
.calc-result-top p, .chart-key { font-size: 13px; }
.calc-note { font-size: 12px; }
.fh-detail, .editorial-card, .provider-card { background: var(--soft); }
.editorial-card { border-radius: 15px; }
.editorial-card:before { display: none; }
.editorial-card h3 { font-size: 30px; }
.editorial-card p, .faq details p { font-size: 15px; }
.faq summary { font-size: 16px; }
.faq details { padding-block: 22px; }
.compare-tray { border-radius: 20px; box-shadow: var(--shadow); border-color: var(--line); padding: 16px 20px; }
.tray-label { font-size: 10px; }
#selected-chips button { border-radius: 40px; padding: 6px 12px; font-size: 12px; background: var(--soft); }
.dialog-top { background: var(--surface); }
dialog::backdrop { background: var(--if-modal-overlay); }
.compare-performance { background: var(--soft); border: 0; }
.detail-grid { border-radius: 15px; }
.detail-grid > div { background: var(--soft); }
.detail-title h2 { font-size: 30px; }
#dialog-content > p, .detail-note { font-size: 14px; }
.research-note h3 { font-size: 20px; }
.research-note p, .research-note > .button { font-size: 13px; }
.if-app-links { max-width: 1204px; font-size: 14px; }
footer { max-width: 1204px; font-size: 12px; }
footer > button { font-size: 12px; }
@media (max-width: 1204px) {
  .hero::before { inset-inline: -32px; }
  .hero { grid-template-columns: 1.25fr 1fr; }
  .nav-inner nav { gap: 14px; }
}
@media (max-width: 1000px) {
  .nav-inner nav a[href="#new-launches"] { display: none; }
  .hero-actions .button.if-button-large { font-size: 14px; height: 48px; padding-inline: 20px; }
}
@media (max-width: 760px) {
  main { padding-inline: 20px; }
  .nav-inner { padding-inline: 20px; }
  .brand img { width: 126px; }
  .hero { grid-template-columns: 1fr; padding-block: 40px; }
  .hero::before { inset-inline: -20px; }
  h1 { font-size: 38px; letter-spacing: -.9px; }
  h2, .launch-section h2, .fee-history-section h2 { font-size: 28px; }
  .hero-description { font-size: 16px; }
  .hero .eyebrow { font-size: 10px; }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { flex: 1 1 100%; }
  .hero-actions .button.if-button-large { font-size: 16px; min-height: 52px; }
  .provenance { font-size: 11px; line-height: 1.7; }
  .stats-strip span:not(.percent) { font-size: 11px; }
  .launch-section, .explore, .cost-section, .guide-section, .fee-history-section { padding-top: 40px; }
  .explore .launch-section { padding-top: 12px; margin-bottom: 32px; }
  .launch-grid { gap: 12px; }
  .launch-card { padding: 14px; }
  .launch-fund { min-height: 0; }
  .launch-bottom { padding-top: 10px; margin-top: 10px; }
  .launch-fund h3 { font-size: 14px; }
  .launch-bottom strong { font-size: 24px; }
  .launch-bottom button { font-size: 13px; }
  .launch-bottom div > span, .launch-scope { font-size: 11px; }
  .coverage-cards { grid-template-columns: 1fr; gap: 12px; }
  .coverage-card { padding: 20px; }
  .card-top { float: right; margin: 0 0 12px 16px; }
  .coverage-card h3 { font-size: 22px; }
  .coverage-card p { font-size: 14px; }
  .card-bottom { clear: both; font-size: 12px; margin-top: 14px; padding-top: 14px; }
  .portfolio-section { padding: 24px; gap: 24px; }
  .portfolio-intro h2 { font-size: 30px; }
  .xray-cta { padding: 20px; }
  .xray-cta .button { white-space: normal; }
  .compare-tray { gap: 10px; padding: 12px; }
  .compare-tray > .button { padding: 11px 12px; font-size: 13px; }
  .tray-label { font-size: 9px; }
  #selected-chips button { font-size: 11px; padding: 4px 8px; }
  dialog { padding-inline: 20px; }
  .detail-title h2 { font-size: 26px; }
  .research-note { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .coverage-card, .if-button { transition: none; }
}