.code-link { font-weight: 700; letter-spacing: .03em; }
.fund-table td a { color: var(--ink); text-decoration: none; }

/* Rows as soft cards: the table stays a table (and a stack of cards on phones); each row is one tinted, rounded strip. */
.fund-table { border-collapse: separate; border-spacing: 0 var(--ui-space-2); }
.fund-table thead th { padding-block: 0 var(--ui-space-1); border: 0; }
.fund-table tbody tr { position: relative; }
.fund-table tbody th,
.fund-table tbody td {
    padding: var(--ui-space-3);
    border: 0;
    border-block: 1px solid var(--ui-card-border);
    background: color-mix(in srgb, var(--risk-c, var(--brand-mint)) 13%, var(--card));
    vertical-align: middle;
    transition: background-color var(--ui-motion-normal) var(--ui-ease-standard), border-color var(--ui-motion-normal) var(--ui-ease-standard);
}
.fund-table tbody th { border-inline-start: 1px solid var(--ui-card-border); border-start-start-radius: var(--ui-radius-lg); border-end-start-radius: var(--ui-radius-lg); }
.fund-table tbody td:last-child { border-inline-end: 1px solid var(--ui-card-border); border-start-end-radius: var(--ui-radius-lg); border-end-end-radius: var(--ui-radius-lg); }
.fund-table tbody tr:hover > * { border-color: var(--ui-hover-border); background: color-mix(in srgb, var(--risk-c, var(--brand-mint)) 17%, var(--card)); }
/* the code cell carries the risk colour as a fading wash from the left */
.fund-table tbody tr.has-risk th { background: linear-gradient(90deg, color-mix(in srgb, var(--risk-c) 38%, var(--card)), color-mix(in srgb, var(--risk-c) 13%, var(--card))); }

/* The whole row opens the fund: the name link is stretched over it. */
.fund-table .row-link { font-weight: 600; }
.fund-table .row-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--ui-radius-lg); }
.fund-table .row-link:focus-visible { outline: 0; box-shadow: none; }
.fund-table .row-link:focus-visible::after { box-shadow: var(--ui-focus-ring); }
.fund-cell { display: grid; gap: 2px; }
.fund-sub { color: var(--muted); font-size: var(--ui-font-sm); }

.fund-code-chip { display: inline-block; padding: 2px 12px; border: 1px solid color-mix(in srgb, var(--risk-c, var(--green)) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--risk-c, var(--green)) 24%, var(--card)); color: var(--risk-ink, var(--green-strong)); }

@media (max-width: 800px) {
    .fund-table tbody tr { margin-bottom: var(--ui-space-2); padding: var(--ui-space-2) var(--ui-space-3); border: 1px solid var(--ui-card-border); border-radius: var(--ui-radius-lg); background: linear-gradient(120deg, color-mix(in srgb, var(--risk-c, var(--brand-mint)) 18%, var(--card)), var(--card)); }
    .fund-table tbody th,
    .fund-table tbody td,
    .fund-table tbody td:last-child { padding: 2px 0; border: 0; background: none; border-radius: 0; }
    .fund-table td.fund-cell[data-label]::before { content: none; }
    .fund-table tbody tr.has-risk th,
    .fund-table tbody tr:hover > * { background: none; }
    .fund-table tbody tr:hover { border-color: var(--ui-hover-border); }
    .fund-table .fund-cell { display: block; }
    .fund-table .fund-sub { display: block; }
}

/* Category finder: labelled rows in one soft card, instead of a wall of chips. */
.discover { display: grid; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-4); padding: var(--ui-space-4); border: 1px solid var(--ui-card-border); border-radius: var(--ui-card-radius); background: var(--ui-card-fill); box-shadow: var(--ui-card-shadow); }
.discover-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: start; gap: var(--ui-space-2) var(--ui-space-3); }
.discover-row + .discover-row { padding-top: var(--ui-space-3); border-top: 1px dashed var(--ui-card-border); }
.discover-label { margin: 0; padding-top: 6px; color: var(--muted); font-size: var(--ui-font-sm); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.discover .chip-row { margin: 0; }
.risk-link { text-decoration: none; transition: transform var(--ui-motion-fast) var(--ui-ease-standard), box-shadow var(--ui-motion-normal) var(--ui-ease-standard); }
.risk-link:hover { transform: translateY(var(--ui-hover-lift)); box-shadow: var(--ui-card-shadow); }
.risk-link small { margin-inline-start: 4px; opacity: .8; }
.discover-more { grid-column: 2; }
.discover-more summary { display: inline-block; padding: 4px 14px; border: 1px dashed var(--ui-tint-positive-border); border-radius: 999px; color: var(--green-strong); font-weight: 600; cursor: pointer; list-style: none; }
.discover-more summary::-webkit-details-marker { display: none; }
.discover-more[open] summary { margin-bottom: var(--ui-space-2); border-style: solid; background: var(--ui-tint-positive-subtle); }

@media (max-width: 800px) {
    .discover { padding: var(--ui-space-3); }
    .discover-row { grid-template-columns: minmax(0, 1fr); }
    .discover-label { padding-top: 0; }
    .discover-more { grid-column: 1; }
}

/* Sortable headers and the follow star on rows. */
.fund-table th .sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.fund-table th .sort-link:hover, .fund-table th .sort-link.is-sorted { color: var(--green-strong); }
.fund-table th .sort-link:focus-visible { outline: 0; box-shadow: var(--ui-focus-ring); border-radius: var(--ui-radius-sm); }
.row-star-slot { position: relative; z-index: var(--ui-z-local-overlay); margin-inline-start: var(--ui-space-1); }
.row-star { padding: 0 4px; border: 0; background: none; color: var(--ui-orange-text); font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; transition: transform var(--ui-motion-normal) var(--ui-ease-standard); }
.row-star:hover { transform: scale(1.2); }
.row-star:focus-visible { outline: 0; box-shadow: var(--ui-focus-ring); border-radius: var(--ui-radius-sm); }