/* Shared building blocks of the public data pages: panels, tables, chips, forms, notes, pager, chart. */

.page-head {
    margin: var(--ui-space-3) 0 var(--ui-space-4);
}

.page-head h1,
.hero h1 {
    margin: 0 0 var(--ui-space-2);
    font-size: 1.7rem;
    line-height: 1.2;
}

.lead {
    margin: 0 0 var(--ui-space-3);
    max-width: 70ch;
    color: var(--muted);
}

.muted { color: var(--muted); }
.small { font-size: var(--ui-font-sm); }
.block { display: block; font-weight: 400; }
.positive { color: var(--ui-positive, #0b7a55); }
.negative { color: var(--ui-negative, #c0352b); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-1) var(--ui-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ui-font-sm);
    color: var(--muted);
}

.breadcrumb a { color: var(--green-strong); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb li + li::before {
    content: "›";
    margin-right: var(--ui-space-2);
}

.panel {
    margin: 0 0 var(--ui-space-4);
    padding: var(--ui-surface-padding-comfortable, 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-card-fill, var(--ui-card-bg, var(--card)));
}

.panel h2 {
    margin: 0 0 var(--ui-space-2);
    font-size: 1.1rem;
}

.panel h3 {
    margin: var(--ui-space-4) 0 var(--ui-space-2);
    font-size: 1rem;
}

.prose-block p {
    max-width: 75ch;
    margin: 0 0 var(--ui-space-3);
}

/* Wide windows: the heading sits beside the text block instead of above a half-empty card. */
@media (min-width: 1200px) {
    .prose-block { display: grid; grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr); column-gap: var(--ui-space-6); align-items: start; }
    .prose-block > h2 { grid-column: 1; grid-row: 1 / span 8; margin: 0; }
    .prose-block > :not(h2) { grid-column: 2; }
}

.note {
    margin: var(--ui-space-3) 0;
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-tint-info-border, var(--line));
    border-radius: var(--ui-card-radius);
    background: var(--ui-tint-info-subtle, transparent);
    box-shadow: var(--ui-card-shadow);
    color: var(--ink);
    font-size: var(--ui-font-sm);
}

.note a,
.prose a,
.data-table a { color: var(--green-strong); }

.note p { margin: 0; }
.note p + p { margin-top: var(--ui-space-1); }
.note-warn { border-color: var(--ui-tint-warning-border, var(--gold)); background: var(--ui-tint-warning-subtle, transparent); }
.data-missing { color: var(--muted); }

.table-wrap { overflow-x: auto; }
/* A table that sits straight on the page (lists, comparison) gets its own soft card. */
.site-main > .table-wrap { padding: var(--ui-space-2) var(--ui-space-3); border: 1px solid var(--ui-card-border); border-radius: var(--ui-card-radius); background: var(--ui-card-fill); box-shadow: var(--ui-card-shadow); }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ui-font-sm);
}

.data-table th,
.data-table td {
    padding: var(--ui-space-2) var(--ui-space-3);
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.data-table thead th {
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}

.data-table th.num,
.data-table td.num { text-align: right; }
.data-table tbody th { font-weight: 600; }
.data-table caption { padding: var(--ui-space-2) 0; text-align: left; color: var(--muted); }

.chip-row,
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    margin: var(--ui-space-3) 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
    padding: 4px var(--ui-space-3);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--ui-surface-subtle, transparent);
    color: var(--ink);
    font-size: var(--ui-font-sm);
    text-decoration: none;
}

.chip:hover { border-color: var(--green); }
.chip small { color: var(--muted); }
.chip-accent { border-color: var(--ui-tint-positive-border, var(--green)); background: var(--ui-tint-positive-subtle, transparent); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-space-4);
    border: 1px solid var(--line);
    border-radius: var(--ui-control-radius, var(--ui-radius-md));
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--ui-font-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { border-color: var(--green); }

.btn-primary {
    border-color: var(--ui-button-primary-border, var(--green));
    background: var(--ui-button-primary-bg, var(--green));
    color: var(--ui-button-primary-text, var(--ui-on-accent));
}

.filter-bar {
    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);
    margin-bottom: var(--ui-space-4);
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) auto;
    gap: var(--ui-space-3);
    align-items: end;
    margin: 0 0 var(--ui-space-4);
}

.field { display: grid; gap: var(--ui-space-1); min-width: 0; font-size: var(--ui-font-sm); }
.field > span { color: var(--muted); }

.field input,
.field select {
    width: 100%;
    min-width: 0;
    min-height: var(--ui-control-height);
    padding: 0 var(--ui-space-3);
    border: 1px solid var(--line);
    border-radius: var(--ui-control-radius, var(--ui-radius-md));
    background: var(--ui-input-fill, var(--card));
    color: var(--ink);
    font: inherit;
}

.filter-actions { display: flex; gap: var(--ui-space-2); }
.result-count { margin: 0 0 var(--ui-space-2); color: var(--muted); font-size: var(--ui-font-sm); }

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-4);
    margin: var(--ui-space-4) 0;
    font-size: var(--ui-font-sm);
    white-space: nowrap;
}

.pager-link { padding: var(--ui-space-2) var(--ui-space-3); border: 1px solid var(--line); border-radius: var(--ui-radius-md); text-decoration: none; color: var(--ink); }

/* Sections instead of running text: every row is its own soft, tinted block (tints alternate), so what belongs together reads as one unit. */
.facts { margin: 0; display: grid; gap: var(--ui-space-2); }
.facts > div {
    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-tint-positive-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-tint-positive-subtle);
}
.facts > div:nth-child(even) { border-color: var(--ui-tint-info-border); background: var(--ui-tint-info-subtle); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; text-align: right; }

.callout,
.point-list li,
.source-list li,
.prose-block > p:not(:has(> .btn:only-child)) {
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-tint-info-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-tint-info-subtle);
}
.callout-positive,
.point-list li:nth-child(odd),
.source-list li:nth-child(3n + 1),
.prose-block > p:nth-of-type(3n + 1):not(:has(> .btn:only-child)) { border-color: var(--ui-tint-positive-border); background: var(--ui-tint-positive-subtle); }
.callout-warn,
.source-list li:nth-child(3n + 3),
.prose-block > p:nth-of-type(3n + 3):not(:has(> .btn:only-child)) { border-color: var(--ui-tint-warning-border); background: var(--ui-tint-warning-subtle); }
.point-list, .source-list { display: grid; gap: var(--ui-space-2); margin: var(--ui-space-3) 0 0; padding: 0; list-style: none; }
.callout { margin: var(--ui-space-2) 0; }
.prose-block > p:not(:has(> .btn:only-child)) { margin-block: 0 var(--ui-space-3); }

.chart { margin: 0; }
.chart-svg { display: block; width: 100%; height: 220px; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; }

.chart-plot { position: relative; touch-action: pan-y; outline-offset: 2px; }
.chart-plot:focus-visible { outline: 2px solid var(--green); border-radius: var(--ui-radius-md); }
.chart-crosshair { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--muted); opacity: .5; pointer-events: none; }
.chart-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--green); border: 2px solid var(--ui-surface-raised); pointer-events: none; }
.chart-tip {
    position: absolute;
    transform: translate(12px, -120%);
    padding: var(--ui-space-1) var(--ui-space-2);
    border: 1px solid var(--line);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface-raised);
    color: var(--ink);
    font-size: var(--ui-font-sm);
    white-space: nowrap;
    pointer-events: none;
}
.chart-tip.left { transform: translate(calc(-100% - 12px), -120%); }
.chart-tip.below { transform: translate(12px, 40%); }
.chart-tip.left.below { transform: translate(calc(-100% - 12px), 40%); }
.chart-crosshair[hidden], .chart-dot[hidden], .chart-tip[hidden], .chart-periods[hidden] { display: none; }

.chart-periods { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-top: var(--ui-space-3); }
.chart-period {
    min-width: 2.75rem;
    min-height: 2.5rem;
    padding: var(--ui-space-1) var(--ui-space-3);
    border: 1px solid var(--line);
    border-radius: var(--ui-radius-md);
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}
.chart-period.active { background: var(--green); border-color: var(--green); color: var(--ui-on-accent); font-weight: 600; }

.chart-returns { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: var(--ui-space-2); margin: var(--ui-space-3) 0 0; }
.chart-return { padding: var(--ui-space-2); border: 1px solid var(--line); border-radius: var(--ui-radius-md); text-align: center; }
.chart-return.current { border-color: var(--green); }
.chart-return dt { color: var(--muted); font-size: var(--ui-font-sm); }
.chart-return dd { margin: 0; font-weight: 600; }

/* Comparison chart: one line colour per fund slot (a swatch repeats it in the legend). */
.comparison-line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.comparison-line-0 { stroke: var(--green); }
.comparison-line-1 { stroke: var(--blue); }
.comparison-line-2 { stroke: var(--gold); }
.comparison-line-3 { stroke: var(--ui-negative); }
.comparison-line-4 { stroke: var(--ui-info); }
.comparison-line-5 { stroke: var(--ui-warning); }
.chip-remove { color: var(--muted); text-decoration: none; font-weight: 700; line-height: 1; }
.chip-remove:hover { color: var(--ink); }
.chart-dot.comparison-line-0 { background: var(--green); }
.chart-dot.comparison-line-1 { background: var(--blue); }
.chart-dot.comparison-line-2 { background: var(--gold); }
.chart-dot.comparison-line-3 { background: var(--ui-negative); }
.chart-dot.comparison-line-4 { background: var(--ui-info); }
.chart-dot.comparison-line-5 { background: var(--ui-warning); }
.chart-tip-row { display: block; }
.chart-tip-row::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-inline-end: .4em; border-radius: 50%; background: currentColor; }
.chart-tip-row.comparison-line-0 { color: var(--green); }
.chart-tip-row.comparison-line-1 { color: var(--blue); }
.chart-tip-row.comparison-line-2 { color: var(--gold); }
.chart-tip-row.comparison-line-3 { color: var(--ui-negative); }
.chart-tip-row.comparison-line-4 { color: var(--ui-info); }
.chart-tip-row.comparison-line-5 { color: var(--ui-warning); }
.chart-tip-row span { color: var(--ink); }
.comparison-legend { display: flex; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-4); margin: var(--ui-space-3) 0 0; padding: 0; list-style: none; }
.comparison-legend li { display: inline-flex; align-items: center; gap: var(--ui-space-2); }
.comparison-swatch { display: inline-block; width: 18px; height: 4px; border-radius: 999px; }
.comparison-swatch.comparison-line-0 { background: var(--green); }
.comparison-swatch.comparison-line-1 { background: var(--blue); }
.comparison-swatch.comparison-line-2 { background: var(--gold); }
.comparison-swatch.comparison-line-3 { background: var(--ui-negative); }
.comparison-swatch.comparison-line-4 { background: var(--ui-info); }
.comparison-swatch.comparison-line-5 { background: var(--ui-warning); }

.chart-scale {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2) var(--ui-space-4);
    margin-top: var(--ui-space-2);
    color: var(--muted);
    font-size: var(--ui-font-sm);
}

.chart-scale strong { color: var(--ink); }

@media (max-width: 800px) {
    .filter-bar { grid-template-columns: 1fr 1fr; }
    .filter-bar .field-wide { grid-column: 1 / -1; }
    .filter-actions { grid-column: 1 / -1; }
    .chart-svg { height: 180px; }

    /* Wide tables restack into labelled rows; the cell label comes from data-label. */
    .fund-table thead,
    .fund-table .col-company,
    .fund-table .col-category { display: none; }

    .fund-table,
    .fund-table tbody,
    .fund-table tr,
    .fund-table th,
    .fund-table td { display: block; }

    .fund-table tr { padding: var(--ui-space-2) 0; border-bottom: 1px solid var(--line); }
    .fund-table th,
    .fund-table td { padding: 2px 0; border: 0; text-align: left; }
    .fund-table td.num { text-align: left; }
    .fund-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); }
}

/* Chips for risk (1-2 green, 3-5 orange, 6-7 red) and for a signed change. */
.risk-pill,
.change-pill { display: inline-block; padding: 2px 12px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; }
.risk-pill.risk-low,
.change-pill.positive { border-color: var(--ui-tint-positive-border); background: var(--ui-tint-positive-subtle); color: var(--ui-positive); }
.risk-pill.risk-medium { border-color: var(--ui-orange); background: color-mix(in srgb, var(--ui-orange) 16%, var(--card)); color: var(--ui-orange-text); }
.risk-pill.risk-high,
.change-pill.negative { border-color: var(--ui-negative); background: var(--ui-tint-danger-subtle); color: var(--ui-negative); }
.change-pill.muted { background: transparent; }

/* Risk colour for a whole card: --risk-c tints the card and its code chip (green 1-2, orange 3-5, red 6-7). */
.risk-low { --risk-c: var(--green); --risk-ink: var(--ui-positive); }
.risk-medium { --risk-c: var(--ui-orange); --risk-ink: var(--ui-orange-text); }
.risk-high { --risk-c: var(--ui-risk-red); --risk-ink: var(--ui-negative); }
.risk-unknown { --risk-c: var(--muted); --risk-ink: var(--muted); }

/* Fund tones (accent stripe of a row or card). */
.discovery-tone-free { --tone: #7a5cc4; }
.discovery-tone-variable { --tone: #2f8f9d; }
.discovery-tone-equity { --tone: #2f7fd0; }
.discovery-tone-mixed { --tone: #7d8f2f; }
.discovery-tone-fixed-income { --tone: #5a6fd6; }
.discovery-tone-money { --tone: #1a9a6b; }
.discovery-tone-participation { --tone: #b8821f; }
.discovery-tone-pension { --tone: #c25a8a; }
.discovery-tone-precious { --tone: #d6a41f; }
.discovery-tone-foreign { --tone: #d0662f; }
.discovery-tone-real-estate { --tone: #8c6a4a; }
.discovery-tone-venture { --tone: #c24f67; }
.discovery-tone-default { --tone: var(--line); }

/* Category tiles on the home page: each category gets its own colour wash. */
.tile.has-tone { border-color: color-mix(in srgb, var(--tone) 45%, var(--ui-card-border)); background-image: linear-gradient(135deg, color-mix(in srgb, var(--tone) 24%, var(--card)) 0%, color-mix(in srgb, var(--tone) 8%, var(--card)) 65%, var(--card) 100%); }
.tile.has-tone strong { color: var(--ink); }

/* Comparison: the selected funds as cards, a segmented period switch, the best value of each row highlighted. */
.cmp-picker { display: grid; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-4); }
.cmp-cards { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); margin: 0; padding: 0; list-style: none; }
.cmp-card {
    position: relative;
    flex: 1 1 11rem;
    max-width: 16rem;
    display: grid;
    gap: 6px;
    align-content: start;
    padding: var(--ui-space-3);
    border: 1px solid color-mix(in srgb, var(--risk-c, var(--brand-mint)) 45%, var(--ui-card-border));
    border-radius: var(--ui-radius-lg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--risk-c, var(--brand-mint)) 22%, var(--card)) 0%, var(--card) 75%);
}
.cmp-code { justify-self: start; 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)); font-weight: 700; letter-spacing: .03em; text-decoration: none; }
.cmp-name { padding-right: var(--ui-space-4); font-size: var(--ui-font-sm); font-weight: 600; overflow-wrap: anywhere; }
.cmp-remove { position: absolute; top: 8px; right: 12px; font-size: 1.1rem; }
.cmp-add { display: grid; place-items: center; border: 1px dashed var(--ui-tint-positive-border); background: transparent; }
.cmp-add form { display: grid; gap: var(--ui-space-2); width: 100%; }
.cmp-add input[type="text"] { width: 100%; min-width: 0; min-height: var(--ui-control-height); padding: 0 var(--ui-space-3); border: 1px solid var(--line); border-radius: var(--ui-control-radius); background: var(--ui-input-fill); color: var(--ink); font: inherit; }
.seg { display: inline-flex; justify-self: start; border: 1px solid var(--ui-card-border); border-radius: 999px; overflow: hidden; }
.seg-link { padding: 5px 16px; background: var(--ui-surface-raised); color: var(--ink); font-size: var(--ui-font-sm); text-decoration: none; transition: background-color var(--ui-motion-normal) var(--ui-ease-standard); }
.seg-link:hover { background: var(--ui-tint-positive-subtle); }
.seg-link.active { background: var(--ui-button-primary-bg); color: var(--ui-button-primary-text); font-weight: 600; }
.compare-table td.cmp-best { background: var(--ui-tint-positive-soft); color: var(--ui-positive); font-weight: 600; }

/* Summary band (fund page under the header, category pages above the filters). */
.fund-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--ui-space-3); margin: 0 0 var(--ui-space-3); }
.band-tile { display: grid; gap: 2px; padding: var(--ui-space-2) var(--ui-space-3); border: 1px solid; border-radius: var(--ui-radius-lg); }
.band-tile span { font-size: var(--ui-font-sm); }
.band-tile strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.band-blue { border-color: var(--ui-tint-info-border); background: var(--ui-tint-info-subtle); }
.band-blue span, .band-blue strong { color: var(--ui-info-text); }
.band-green { border-color: var(--ui-tint-positive-border); background: var(--ui-tint-positive-subtle); }
.band-green span, .band-green strong { color: var(--ui-positive); }
.band-orange { border-color: var(--ui-orange); background: color-mix(in srgb, var(--ui-orange) 14%, var(--card)); }
.band-orange span, .band-orange strong { color: var(--ui-orange-text); }

/* 404 page, delete-account card and the admin status alert. */
.not-found { max-width: 32rem; margin: var(--ui-space-6) auto; padding: var(--ui-space-5); text-align: center; border: 1px solid var(--ui-card-border); border-radius: var(--ui-card-radius); background: var(--ui-card-fill); box-shadow: var(--ui-card-shadow); }
.not-found-code { margin: 0; font-size: 3.5rem; font-weight: 700; line-height: 1; color: var(--green); }
.not-found-actions { display: flex; justify-content: center; gap: var(--ui-space-2); flex-wrap: wrap; }
.danger-card { padding: var(--ui-space-4); border: 1px solid var(--ui-negative); border-radius: var(--ui-card-radius); background: var(--ui-tint-danger-subtle); }
.status-alert { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); align-items: center; margin: 0 0 var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); border: 1px solid var(--ui-negative); border-radius: var(--ui-radius-lg); background: var(--ui-tint-danger-subtle); color: var(--ui-negative); }

/* Exchange rates as cards: the value first, the label small. */
.rate-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--ui-space-2); margin: 0 0 var(--ui-space-3); padding: 0; list-style: none; }
.rate-card { display: grid; gap: 2px; padding: var(--ui-space-2) var(--ui-space-3); border: 1px solid; border-radius: var(--ui-radius-lg); }
.rate-card span { font-size: var(--ui-font-sm); }
.rate-card strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.rate-card small { opacity: .85; }
.rate-card:nth-child(3n + 1) { border-color: var(--ui-tint-info-border); background: var(--ui-tint-info-subtle); color: var(--ui-info-text); }
.rate-card:nth-child(3n + 2) { border-color: var(--ui-tint-positive-border); background: var(--ui-tint-positive-subtle); color: var(--ui-positive); }
.rate-card:nth-child(3n + 3) { border-color: var(--ui-orange); background: color-mix(in srgb, var(--ui-orange) 14%, var(--card)); color: var(--ui-orange-text); }

/* Short company pages: each section in its own tinted card. */
.info-card { break-inside: avoid; margin: 0 0 var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); border: 1px solid var(--ui-tint-positive-border); border-radius: var(--ui-card-radius); background: var(--ui-tint-positive-subtle); }
.info-card:nth-of-type(3n + 2) { border-color: var(--ui-tint-info-border); background: var(--ui-tint-info-subtle); }
.info-card:nth-of-type(3n + 3) { border-color: var(--ui-tint-warning-border); background: var(--ui-tint-warning-subtle); }
.info-card h2 { margin-top: 0; }
.info-card > :last-child { margin-bottom: 0; }
.band-pro { border-color: color-mix(in srgb, var(--ui-pro) 50%, var(--ui-card-border)); background: color-mix(in srgb, var(--ui-pro) 12%, var(--card)); }
.band-pro span, .band-pro strong { color: var(--ui-pro-text); }

/* Drop-down menus. A plain <select> (touch screens, no script) gets a thin theme-coloured arrow instead of the browser's grey
   button; with a mouse site.js hides it behind .cs-button and a listbox in the site's own look. */
select {
    appearance: none;
    padding-inline-end: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230f9d77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
    background-size: 1.1rem;
}
.theme-dark select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2376e4bc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
}
.cs { position: relative; display: block; min-width: 0; }
.cs-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cs-button {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); width: 100%;
    min-height: var(--ui-control-height); padding: 0 var(--ui-space-3);
    border: 1px solid var(--line); border-radius: var(--ui-control-radius); background: var(--ui-input-fill); color: var(--ink);
    font: inherit; text-align: left; cursor: pointer;
}
.cs-button:hover { border-color: var(--ui-hover-border); }
.cs.is-open .cs-button { border-color: var(--green); }
.cs-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-arrow { flex: none; width: 1rem; height: 1rem; background: currentColor; color: var(--green-strong); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--ui-motion-normal) var(--ui-ease-standard); }
.cs.is-open .cs-arrow { transform: rotate(180deg); }
.cs-list {
    position: absolute; z-index: var(--ui-z-popover); inset-inline: 0; top: calc(100% + 6px);
    max-height: 16rem; overflow: auto; margin: 0; padding: 6px; list-style: none;
    border: 1px solid var(--ui-card-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface-raised); box-shadow: var(--ui-modal-shadow);
}
.cs-list[hidden] { display: none; }
.cs.cs-up .cs-list { top: auto; bottom: calc(100% + 6px); }
.cs-option { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); padding: 8px 10px; border-radius: var(--ui-radius-md); color: var(--ink); cursor: pointer; }
.cs-option.is-active { background: var(--ui-tint-positive-subtle); }
.cs-option[aria-selected="true"] { font-weight: 600; }
.cs-option[aria-selected="true"]::after { content: "\2713"; color: var(--ui-positive); }
.cs-option[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cs-low { color: var(--ui-positive); }
.cs-mid { color: var(--ui-orange-text); }
.cs-high { color: var(--ui-negative); }
.cs-low.is-active { background: var(--ui-tint-positive-subtle); }
.cs-mid.is-active { background: color-mix(in srgb, var(--ui-orange) 16%, var(--card)); }
.cs-high.is-active { background: var(--ui-tint-danger-subtle); }
.watchlist-actions .cs { min-width: 9rem; }

/* Comfort details: themed check boxes, inline field errors, keyboard focus on disclosure rows, empty states, recent funds, dialogs. */
input[type="checkbox"], input[type="radio"] {
    appearance: none; flex: none; width: 1.3rem; height: 1.3rem; margin: 0; cursor: pointer;
    border: 1.5px solid var(--ui-tint-positive-border); border-radius: 7px; background: var(--ui-input-fill) center / 80% no-repeat;
    transition: transform var(--ui-motion-normal) var(--ui-ease-standard), box-shadow var(--ui-motion-normal) var(--ui-ease-standard);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); }
input[type="checkbox"]:active, input[type="radio"]:active { transform: scale(.92); }
input[type="checkbox"]:checked, input[type="radio"]:checked { border-color: var(--green-strong); background-color: var(--green); }
input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23062b21' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5l3.6 3.6 7.4-7.7'/%3E%3C/svg%3E"); }
input[type="radio"]:checked { background-image: radial-gradient(circle, #062b21 0 28%, transparent 32%); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 0; box-shadow: var(--ui-focus-ring); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--ui-negative); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-negative) 18%, transparent); }
summary:focus-visible { outline: 0; box-shadow: var(--ui-focus-ring); border-radius: var(--ui-radius-md); }
.empty-state { padding: var(--ui-space-5) var(--ui-space-4); border: 1px dashed var(--ui-tint-positive-border); border-radius: var(--ui-card-radius); background: var(--ui-tint-positive-subtle); text-align: center; color: var(--muted); }
.recent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-3); padding: var(--ui-space-2) var(--ui-space-3); border: 1px solid var(--ui-tint-info-border); border-radius: var(--ui-card-radius); background: var(--ui-tint-info-subtle); }
.recent[hidden] { display: none; }
.recent-title { margin-right: var(--ui-space-1); color: var(--ui-info-text); font-size: var(--ui-font-sm); }
.recent-chip { text-decoration: none; }
.confirm-dialog { max-width: min(26rem, calc(100vw - 32px)); padding: var(--ui-space-4); border: 1px solid var(--ui-card-border); border-radius: var(--ui-card-radius); background: var(--ui-surface-raised); color: var(--ink); box-shadow: var(--ui-modal-shadow); }
.confirm-dialog::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
.confirm-text { margin: 0 0 var(--ui-space-4); }
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--ui-space-2); }

@media print {
    .site-header, .site-footer, .to-top, .fund-actions, .page-progress, .toast-line, .recent, .filter-bar { display: none !important; }
    body { background: none; color: #000000; }
    .panel, .fund-band, .band-tile { box-shadow: none; break-inside: avoid; }
}