.fund-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--ui-space-4);
    margin: var(--ui-space-3) 0 var(--ui-space-4);
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-card-border, var(--line));
    border-radius: var(--ui-card-radius, var(--ui-radius-lg));
    background: var(--ui-tint-positive-subtle, var(--card));
}
.fund-head.has-risk { background: linear-gradient(120deg, color-mix(in srgb, var(--risk-c) 28%, var(--card)) 0%, color-mix(in srgb, var(--risk-c) 10%, var(--card)) 55%, var(--card) 100%); border-color: color-mix(in srgb, var(--risk-c) 45%, var(--ui-card-border)); }
.fund-head.has-risk .fund-code { border: 1px solid color-mix(in srgb, var(--risk-c) 60%, transparent); background: color-mix(in srgb, var(--risk-c) 30%, var(--card)); color: var(--risk-ink); }

.fund-head h1 { margin: var(--ui-space-1) 0; font-size: 1.6rem; line-height: 1.2; overflow-wrap: anywhere; }
.fund-head p { margin: 0 0 var(--ui-space-1); }

.fund-code {
    display: inline-block;
    padding: 2px var(--ui-space-3);
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-strong);
    font-weight: 700;
    letter-spacing: .04em;
}

.freshness { color: var(--muted); font-size: var(--ui-font-sm); }

.fund-head-price { display: grid; gap: var(--ui-space-1); align-content: start; min-width: 14rem; }
.fund-head-price .label { color: var(--muted); font-size: var(--ui-font-sm); }
.fund-head-price .nav { font-size: 1.8rem; line-height: 1.1; }
.fund-head-price em { font-style: normal; font-weight: 600; }
.fund-actions, .button-row { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-top: var(--ui-space-2); }

.fund-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ui-aside-width);
    gap: var(--ui-space-4);
    align-items: start;
}

.peer-list { margin: 0 0 var(--ui-space-3); padding: 0; list-style: none; display: grid; gap: var(--ui-space-2); }
.peer-list li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 1px solid var(--ui-card-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface-wash-inset);
    transition: border-color var(--ui-motion-normal) var(--ui-ease-standard), box-shadow var(--ui-motion-normal) var(--ui-ease-standard), transform var(--ui-motion-fast) var(--ui-ease-standard);
}
.peer-list li:hover { border-color: var(--ui-hover-border); box-shadow: var(--ui-card-shadow); transform: translateY(var(--ui-hover-lift)); }
/* the whole row is the link, the return stays a separate pill */
.peer-list .peer-link { display: grid; gap: var(--ui-space-1); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.peer-list .peer-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.peer-list .peer-link:focus-visible { outline: 0; box-shadow: none; }
.peer-list li:focus-within { box-shadow: var(--ui-focus-ring); }
.code-chip { justify-self: start; padding: 1px 10px; border-radius: 999px; background: var(--ui-tint-positive-soft); color: var(--green-strong); font-size: var(--ui-font-sm); }
.peer-name { color: var(--muted); font-size: var(--ui-font-sm); }
.peer-return { flex: none; padding: 3px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--ui-surface-raised); font-weight: 600; }
.peer-return.positive { border-color: var(--ui-tint-positive-border); background: var(--ui-tint-positive-subtle); }
.peer-return.negative { border-color: var(--ui-tint-danger-subtle); background: var(--ui-tint-danger-subtle); }

/* Wide windows: the main column becomes two columns; the price chart, the portfolio table and the explanation keep the full width. */
@media (min-width: 1400px) {
    .fund-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ui-space-4); align-items: stretch; }
    .fund-main > [aria-labelledby="chart-title"],
    .fund-main > [aria-labelledby="alloc-title"],
    .fund-main > [aria-labelledby="explain-title"] { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
    .fund-layout { grid-template-columns: minmax(0, 1fr); }
    .fund-head { padding: var(--ui-space-3); }
    .fund-head h1 { font-size: 1.35rem; }
    .fund-head-price { min-width: 0; width: 100%; }
}

/* In-page navigation. */
.fund-nav { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-4); }
.fund-nav-link { padding: 4px 14px; border: 1px solid var(--ui-card-border); border-radius: 999px; background: var(--ui-surface-raised); color: var(--ink); font-size: var(--ui-font-sm); font-weight: 600; text-decoration: none; transition: background-color var(--ui-motion-normal) var(--ui-ease-standard), border-color var(--ui-motion-normal) var(--ui-ease-standard); }
.fund-nav-link:hover { border-color: var(--ui-hover-border); background: var(--ui-tint-positive-subtle); }
.panel h2[id] { scroll-margin-top: 6rem; }

/* Period returns: a green card when up, a red card when down. */
.chart-return-positive { border-color: var(--ui-tint-positive-border); background: var(--ui-tint-positive-subtle); }
.chart-return-negative { border-color: var(--ui-negative); background: var(--ui-tint-danger-subtle); }
.chart-return-positive dd { color: var(--ui-positive); }
.chart-return-negative dd { color: var(--ui-negative); }