/* Shared visual language with the landing page; demo behavior stays in app.js. */
:root {
  --paper: #f7f8fa;
  --white: #fff;
  --ink: #172438;
  --muted: #627087;
  --green: #172438;
  --line: #dce2ed;
  --mint: #e8edfa;
  --gold: #4462f5;
  --accent: #4462f5;
}
body { background: var(--paper); color: var(--ink); }
p, .page-heading p, .prose p, .muted, .eyebrow, .page-heading .eyebrow,
.metric-caption, .panel-foot, .small-panel h2 small, .chart-summary small,
.filters label, .results-count, .grid-card-heading p, .grid-financials dt,
.property-link small, .source-list small, .detail-grid { color: var(--muted); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible { outline-color: var(--accent); }
.sidebar { background: var(--paper); color: var(--ink); height: 104px; border-bottom: 1px solid var(--line); gap: 24px; }
.brand { font-size: 49px; letter-spacing: -2px; }
.brand-sub { color: var(--muted); font-size: 8px; letter-spacing: 1.5px; margin-top: 12px; }
.sidebar nav { gap: 6px; }
.sidebar nav a { padding: 12px 17px; border-radius: 40px; color: var(--muted); }
.sidebar nav a span { font-size: 13px; font-weight: 500; }
.sidebar nav a.active { background: var(--mint); color: var(--accent); }
.sidebar nav a.active::after { display: none; }
.sidebar nav a:hover { background: #edf0f6; color: var(--ink); }
.profile { font-size: 12px; }
.profile > span { width: 40px; height: 40px; border-color: var(--line); background: var(--mint); color: var(--ink); font-size: 11px; }
.profile small { color: var(--muted); }
.topbar { background: transparent; border: 0; height: 46px; color: var(--muted); letter-spacing: 1px; }
.topbar b { color: var(--muted); }
main { padding-top: 30px; padding-bottom: 64px; }
.page-heading { margin-bottom: 34px; gap: 24px; }
h1 { font: 500 clamp(38px, 4vw, 60px)/1.08 'Public Sans', sans-serif; letter-spacing: -.055em; margin: 13px 0 16px; }
h2, h3, .grid-card-heading h2 { font-family: 'Public Sans', sans-serif; font-weight: 500; letter-spacing: -.045em; }
h2 { font-size: 25px; line-height: 1.2; }
h3 { font-size: 24px; }
.page-heading p { font-size: 16px; }
.eyebrow { font-weight: 500; letter-spacing: 1.3px; }
.primary, .secondary { min-height: 48px; padding: 13px 24px; border-radius: 99px; font-weight: 500; letter-spacing: 0; }
.primary { background: var(--accent); border-color: var(--accent); }
.primary:hover { background: #354fe0; border-color: #354fe0; }
.secondary { border-color: var(--line); color: var(--ink); background: transparent; }
.secondary:hover { background: var(--mint); }
.metrics { border: 1px solid var(--line); border-radius: 22px; padding: 26px 0; gap: 0; background: #fff; margin-bottom: 28px; overflow: hidden; }
.metric, .metric.featured { padding: 3px 24px; min-height: 117px; background: transparent; color: var(--ink); }
.metric:first-child { padding-left: 24px; }
.featured .eyebrow, .featured .metric-caption { color: var(--muted); }
.metric-value { font-weight: 500; font-size: clamp(24px, 2.35vw, 35px); letter-spacing: -.05em; margin: 19px 0 10px; }
.metric.featured .metric-value { color: var(--accent); }
.two-column, .three-column, .detail-hero { gap: 24px; }
.panel { border: 1px solid var(--line); border-radius: 22px; padding: 28px; background: #fff; margin-bottom: 24px; }
.panel:has(> .filters) { background: transparent; padding: 0; border: 0; }
.small-panel { background: transparent; }
.small-panel h2 { font-weight: 500; letter-spacing: -.045em; }
.segmented, .view-switch { border: 1px solid var(--line); background: var(--paper); padding: 4px; border-radius: 99px; gap: 2px; }
.segmented button, .view-switch button { border: 0; border-radius: 99px; min-height: 36px; padding: 8px 13px; color: var(--muted); }
.view-switch button + button { border: 0; }
.segmented button.selected, .view-switch button[aria-pressed='true'] { background: var(--ink); color: white; border-color: transparent; }
.view-switch button:hover { box-shadow: none; }
.chart-summary { font-weight: 500; }
.chart-summary span { color: var(--accent); font-size: 12px; }
.chart-summary small { font-size: 11px; }
.chart .axis { fill: var(--muted); }
.chart-tooltip { background: var(--ink); color: white; border-radius: 10px; box-shadow: 0 8px 24px #17243815; }
.chart-point:hover circle, .chart-point:focus circle { stroke: #b9c5ff; }
.track, .track span { height: 6px; border-radius: 6px; }
.track { background: #edf0f7; }
.swatch { border-radius: 2px; width: 8px; height: 8px; }
.c0 { background: var(--accent); }.c1 { background: var(--ink); }
.c2 { background: #8d9ff3; }.c3 { background: #c4cff2; }
.allocation-total { font: 500 64px/1.1 'Public Sans', sans-serif; letter-spacing: -.055em; color: var(--accent); }
.inline-link, .back, .source-action, .grid-detail-link, .text-button, summary { color: var(--ink); text-decoration-color: #aebbd2; }
.inline-link:hover, .grid-detail-link:hover, .source-list a:hover, .property-link:hover { color: var(--accent); }
th { color: var(--muted); border-color: var(--line); }
td { border-color: var(--line); }
tbody tr:hover { background: #f7f9fd; }
.property-photo { border-radius: 10px; background: var(--mint); }
.property-photo img { filter: none; }
.photo-fallback { color: var(--muted); }
.portfolio-strip { border-color: var(--line); color: var(--muted); font-size: 13px; padding: 24px 0; }
.portfolio-strip b { color: var(--ink); font-weight: 500; }
.filters input, .filters select { border: 1px solid var(--line); border-radius: 12px; background: white; padding: 13px 15px; min-height: 48px; color: var(--ink); }
.mortgage-grid { gap: 24px; }
.mortgage-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 12px 12px 24px; overflow: hidden; }
.mortgage-card .property-photo { border-radius: 12px; height: 218px; }
.grid-card-heading { padding: 22px 12px 0; }
.grid-card-heading h2 { font-size: 25px; line-height: 1.18; margin-top: 10px; }
.grid-financials { margin: 22px 12px; gap: 18px 12px; }
.grid-financials dd { font-size: 21px; font-weight: 500; letter-spacing: -.025em; }
.grid-detail-link { margin-left: 12px; }
.detail-grid strong { color: var(--ink); font-weight: 500; }
.detail-hero .panel h2 { font-weight: 500; color: var(--accent); }
.detail-hero .property-figure .hero-photo { border-radius: 20px; }
.detail-hero .property-figure .hero-photo img { background: var(--mint); }
.property-figure figcaption { color: var(--muted); }
.redemption-banner { border: 1px solid var(--line); background: var(--mint); border-radius: 20px; padding: 26px 28px; margin-bottom: 24px; }
.redemption-banner p { color: var(--muted); }
.mini-button { background: var(--mint); border-color: var(--line); border-radius: 30px; }
.prose { max-width: 1000px; padding: 36px; }
footer { background: var(--paper); color: var(--muted); border-color: var(--line); }
footer span { color: var(--muted); }
footer > a { color: var(--ink); font: 32px 'Libre Caslon Display', Georgia, serif; letter-spacing: -1px; text-transform: capitalize; }
dialog { background: var(--paper); border-color: var(--line); border-radius: 24px; padding: 32px; box-shadow: 0 30px 100px #17243830; }
dialog::backdrop { background: #17243866; }
dialog h2 { font: 500 34px/1.1 'Public Sans', sans-serif; letter-spacing: -.05em; }
dialog p { font-size: 14px; }
.amount-input { border-color: var(--line); border-radius: 12px; background: white; }
.icon-button { border: 1px solid var(--line); border-radius: 50%; width: 38px; height: 38px; }
#toast { border-radius: 12px; background: var(--ink); font-size: 13px; }
@media (max-width: 1150px) {
  .sidebar { gap: 16px; padding-inline: 4%; }
  .sidebar nav { gap: 0; }.sidebar nav a { padding-inline: 12px; }
  .sidebar nav a span { font-size: 12px; }
  .brand { font-size: 42px; }
  .metric, .metric.featured { padding-inline: 18px; }
  .panel { padding: 22px; }
  .two-column { grid-template-columns: 1.5fr 1fr; }
}
@media (max-width: 780px) {
  .sidebar { height: auto; padding: 24px 20px 12px; gap: 18px; }
  .sidebar nav { gap: 5px; margin-top: 5px; padding: 4px 0; }
  .sidebar nav a { padding: 11px 14px; }
  .brand-sub { font-size: 7px; }
  .topbar { height: 42px; }
  main { padding: 24px 20px 42px; }
  h1 { font-size: 42px; }
  .page-heading { margin-bottom: 28px; }
  .page-heading p { font-size: 15px; }
  .metrics { padding: 0; border-radius: 18px; }
  .metric, .metric.featured, .metric:nth-child(odd) { padding: 22px 16px; min-height: 150px; }
  .metric-value, .metric:last-child .metric-value { font-size: clamp(22px, 5.5vw, 29px); }
  .metric:last-child .metric-value { font-size: clamp(17px, 4.3vw, 26px); letter-spacing: -.04em; }
  .two-column, .three-column, .detail-hero { grid-template-columns: 1fr; gap: 0; }
  .panel { padding: 22px 18px; border-radius: 18px; }
  .section-head h2 { font-size: 23px; }
  .chart { padding-top: 20px; }
  .chart svg { min-width: 460px; }
  .portfolio-strip { font-size: 12px; }
  .prose { padding: 24px; }
  .source-list a { gap: 20px; }
  .redemption-banner { padding: 24px; }
  .grid-card-heading h2 { font-size: 27px; }
  dialog { padding: 26px; }
}

/* Color establishes hierarchy: fund figures, performance, then supporting detail. */
.metrics { background: var(--ink) !important; border-color: var(--ink) !important; }
.metrics .metric { color: #fff; border-color: #ffffff25; }
.metrics .eyebrow, .metrics .metric-caption { color: #c4cfe2; }
.metrics .metric-value, .metrics .metric.featured .metric-value { color: #fff; }
.two-column > .panel:nth-child(2) { background: var(--mint); border-color: var(--mint); }
.three-column > .panel:last-child { background: var(--accent); border-color: var(--accent); color: #fff; }
.three-column > .panel:last-child :is(.eyebrow,p,.inline-link) { color: #fff; text-decoration-color: #c4cfff; }
.chart svg polyline { stroke: var(--accent); }
.chart .chart-point circle { fill: var(--accent); }
.chart linearGradient stop { stop-color: var(--accent); }
.badge.good { color: #4462b5 !important; }

/* Keep native select behavior, with a consistently inset visual chevron. */
.filters select{
 appearance:none;
 -webkit-appearance:none;
 padding-right:44px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 5 4 4 4-4' fill='none' stroke='%23627087' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;
 background-position:right 16px center;
 background-size:14px 14px;
}
@media(forced-colors:active){.filters select{appearance:auto;background-image:none}}

/* Compact mortgage catalogue. */
.mortgage-grid{gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.mortgage-card{--card-surface:#e8edfa;padding:0;background:var(--card-surface);color:var(--ink);border:1px solid #d3ddf1;border-radius:18px;transition:border-color .2s,box-shadow .2s}
.mortgage-card:hover{border-color:#9aacd7;box-shadow:0 8px 24px #17243810}
.mortgage-card:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.grid-card-image{position:relative}
.mortgage-card .property-photo{height:220px;border-radius:0}
.grid-card-image::after{content:"";position:absolute;inset:75% 0 -1px;background:linear-gradient(to bottom,rgba(232,237,250,0),rgba(232,237,250,.22) 35%,#e8edfa 100%);pointer-events:none}
.grid-type{position:absolute;top:14px;left:16px;padding:6px 10px;border-radius:10px;background:var(--ink);color:#fff;font-size:11px}
.grid-card-heading{position:relative;margin-top:-24px;padding:0 22px;min-height:68px}
.grid-card-heading h2{font-size:23px;margin:0 0 8px;color:var(--ink)}
.grid-card-heading p{font-size:12px;color:#576c91}
.grid-financials{margin:18px 22px 0;padding:0 0 18px;border:0;gap:12px;background:transparent}
.grid-financials>div{display:flex;flex-direction:column-reverse;gap:5px}
.grid-financials>div+div{border-left:1px solid #cbd6ec;padding-left:18px}
.grid-financials dt{color:#576c91;font-size:11px;margin:0}
.grid-financials dd{color:var(--ink);font-size:27px;font-weight:600;letter-spacing:-.04em}
.grid-financials>div+div dd{color:var(--accent)}
.card-status{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 22px;padding:16px 0 20px;border-top:1px solid #cbd6ec;background:transparent}
.card-status>span{display:flex;flex-direction:column;gap:6px;font-size:11px;color:#576c91}
.card-status>span+span{border-left:1px solid #cbd6ec;padding-left:18px}
.card-status .badge{font-size:12px;padding:0;background:transparent}
.card-status .badge::before{display:none}
.card-status .badge.good{color:var(--ink)!important}
.card-status .badge.warn{color:#936025!important}
.card-status .badge.bad{color:#a54343!important}
main:has(.compact-detail) .page-heading{margin-bottom:22px}
main:has(.compact-detail) h1{font-size:clamp(32px,3.2vw,46px)}
main:has(.compact-detail) .back{margin-bottom:10px}
.compact-detail{grid-template-columns:1fr 1.15fr;gap:20px;align-items:stretch}
.compact-detail .property-figure{margin:0 0 20px;position:relative;overflow:hidden;border-radius:20px;background:var(--ink)}
.detail-hero.compact-detail .property-figure .hero-photo{height:100%;min-height:290px;aspect-ratio:auto;border-radius:0}
.detail-hero.compact-detail .property-figure .hero-photo img{object-fit:cover}
.compact-detail .property-figure figcaption{position:absolute;bottom:0;left:0;right:0;margin:0;padding:24px 18px 12px;background:linear-gradient(transparent,#172438dc);border:0;color:#fff;font-size:10px}
.compact-detail .loan-summary{background:var(--ink);color:white;border-color:var(--ink);padding:24px;margin-bottom:20px}
.compact-detail .loan-summary :is(.eyebrow,.muted,.detail-grid){color:#bdc9df}
.compact-detail .loan-summary h2{color:#fff;font-size:36px;margin:10px 0 20px}
.compact-detail .detail-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px;border-top:1px solid #ffffff24;padding-top:18px;font-size:11px}
.compact-detail .detail-grid strong{color:white;font-size:20px;margin-top:5px;letter-spacing:-.035em}
.compact-detail .loan-summary .muted{font-size:10px;margin:20px 0 0}
.servicing-panels{grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
.servicing-panels .panel{padding:20px 24px;margin-bottom:20px}
.servicing-panels h2{font-size:22px}
.servicing-panels :is(td,th){padding-top:12px;padding-bottom:12px;font-size:12px}
.servicing-panels .muted{font-size:11px}
.servicing-panels .mini-stat{padding:16px 0}
.provenance{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:18px 24px;background:transparent;border-radius:14px}
.provenance h2{font-size:17px;margin:0 auto 0 0}
.provenance p{margin:0;font-size:11px}
.shell>footer{background:#172438;color:#bdc9df;border:0;border-radius:32px 32px 0 0;padding:36px 5% 28px;gap:24px}
.shell>footer>a{color:#fff;font-size:40px}
.shell>footer :is(span,.footer-disclosure){color:#bdc9df}
.shell>footer .text-button{color:#fff;text-decoration:underline;text-underline-offset:5px}
.shell>footer .footer-disclosure{border-top:1px solid #ffffff26;padding-top:22px;max-width:none}
@media(min-width:1650px){.mortgage-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1050px){.mortgage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-detail .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){
 .compact-detail,.servicing-panels{grid-template-columns:1fr;gap:0}
 .detail-hero.compact-detail .property-figure .hero-photo{height:230px;min-height:230px}
 .compact-detail .loan-summary{padding:22px}
 .servicing-panels .panel{padding:20px}
 .provenance{align-items:flex-start;flex-direction:column;gap:12px}
 .shell>footer{padding:30px 20px;border-radius:28px 28px 0 0}
}
@media(max-width:600px){.mortgage-grid{grid-template-columns:1fr}.mortgage-card .property-photo{height:230px}.grid-card-heading{min-height:0;padding-bottom:4px}}