/*
 * public-pages.css - the ONLY stylesheet for generated public static pages:
 * /funds/*, /fund-lists/*, /fund-finder/, /fund-errors/*.
 * Not the Blazor app theme: light by default, dark via prefers-color-scheme (no theme toggle).
 * Tokens follow Design.md section 8; see Design.md "Static public pages".
 *
 * CLASS CONTRACT (the server-side generator emits exactly these)
 *   body.pp ; a.pp-skip
 *   header.pp-header > nav.pp-nav > a.pp-wordmark + ul/div.pp-nav-links
 *   main.pp-main
 *   Fund page : .pp-layout > nav.pp-breadcrumb(ol) , h1.pp-title , .pp-summary , .pp-status?,
 *               aside.pp-rail > .pp-cta-block > a.pp-cta + p.pp-cta-note ,
 *               dl.pp-facts > div.pp-fact > dt+dd , .pp-gap? ,
 *               section.pp-section (h2) , section.pp-section.pp-faq (h3.pp-q + p.pp-a) , ul.pp-related
 *   List page : .pp-meta , .pp-sort , a.pp-cta ,
 *               ol.pp-rows > li.pp-row > a.pp-row-link > span.pp-row-rank + span.pp-row-name + span.pp-row-reason ,
 *               .pp-more
 *   Hub       : section.pp-hub-group (h2) + ul.pp-link-list
 *   Footer    : footer.pp-footer > ul.pp-footer-links + p.pp-footer-meta
 *   Finder    : form.pp-form > .pp-field > label.pp-label + select.pp-select + .pp-helper + .pp-error ;
 *               button.pp-button[disabled] ; .pp-results[aria-busy] > .pp-results-heading , ol.pp-rows , .pp-empty ,
 *               .pp-actions > .pp-button-secondary ; .pp-support
 *
 * Breakpoints: 768 and 1024 only (plus the 400px facts rule). No shadows, no cards, no motion
 * except hover/focus colour changes.
 */

:root {
  --pp-bg: #ffffff;
  --pp-surface: #f5f5f5;
  --pp-text: #000000;
  --pp-text-2: #333333;
  --pp-text-3: #666666;      /* 5.3:1 on #f5f5f5, 5.7:1 on #fff */
  --pp-accent: #008080;      /* fills, borders, focus ring (4.8:1 on #fff) */
  --pp-link: #006666;        /* link TEXT: canon hover teal; #008080 is only 4.4:1 on #f5f5f5 */
  --pp-link-hover: #004d4d;
  --pp-visited: #5b3a8c;
  --pp-on-accent: #ffffff;
  --pp-accent-hover: #006666;
  --pp-border: #d4d4d4;
  --pp-error: #b00020;
  --layout-reader-width: 720px;
  --pp-rail-width: 280px;
  --pp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pp-bg: #000000;
    --pp-surface: #333333;
    --pp-text: #ffffff;
    --pp-text-2: #f5f5f5;
    --pp-text-3: #bdbdbd;    /* 6.7:1 on #333, 11:1 on #000 */
    --pp-accent: #20b2aa;
    --pp-link: #20b2aa;
    --pp-link-hover: #7fdad4;
    --pp-visited: #b9a6ee;
    --pp-on-accent: #000000; /* white on #20b2aa is 2.6:1; black is 8:1 */
    --pp-accent-hover: #7fdad4;
    --pp-border: #4d4d4d;
    --pp-error: #ff8a80;
  }
}

*, *::before, *::after { box-sizing: border-box; }

.pp {
  margin: 0;
  background: var(--pp-bg);
  color: var(--pp-text-2);
  font-family: var(--pp-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.pp a { color: var(--pp-link); text-decoration: underline; text-underline-offset: 2px; }
.pp a:visited { color: var(--pp-visited); }
.pp a:hover { color: var(--pp-link-hover); }

/* Focus: 2px teal ring, 2px offset, on every control */
.pp a:focus-visible,
.pp button:focus-visible,
.pp select:focus-visible,
.pp input:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 2px;
}

.pp-skip {
  position: absolute; left: 1rem; top: -4rem;
  padding: .75rem 1rem; min-height: 44px;
  background: var(--pp-bg); color: var(--pp-link);
  border: 2px solid var(--pp-accent);
}
.pp-skip:focus { top: 1rem; z-index: 10; }

/* Header / nav */
.pp-header { border-bottom: 1px solid var(--pp-border); }
.pp-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem;
  max-width: 1048px; margin: 0 auto; padding: 0 1rem; min-height: 56px;
}
.pp a.pp-wordmark,
.pp a.pp-wordmark:visited { font-weight: 700; font-size: 1.125rem; color: var(--pp-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.pp-nav-links { display: flex; flex-wrap: wrap; gap: 0 .25rem; margin: 0 0 0 -.5rem; padding: 0; list-style: none; }
.pp-nav-links li { display: flex; }
.pp-nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; font-size: .9375rem; }

/* Main column */
.pp-main {
  max-width: var(--layout-reader-width);
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
.pp-main:has(> .pp-layout) { max-width: calc(var(--layout-reader-width) + var(--pp-rail-width) + 3rem + 2rem); }
/* The layout grid is the 720+280 shell. Capping it at 68ch pushes the rail past the viewport. */
.pp-main > *:not(.pp-layout), .pp-layout > * { max-width: 68ch; }
.pp-main > .pp-rows, .pp-layout > .pp-rows { max-width: none; }

.pp h1, .pp h2, .pp h3 { color: var(--pp-text); line-height: 1.25; }
:where(.pp) h1, .pp-title { font-size: 1.625rem; font-weight: 700; margin: 1rem 0 .75rem; }
:where(.pp) h2 { font-size: 1.25rem; font-weight: 600; margin: 2.5rem 0 .75rem; }
:where(.pp) h3, .pp-q { font-size: 1.0625rem; font-weight: 600; margin: 1.5rem 0 .25rem; }
@media (min-width: 768px) {
  :where(.pp) h1, .pp-title { font-size: 2rem; }
}
:where(.pp) p { margin: 0 0 1rem; }

.pp-summary { font-size: 1.125rem; color: var(--pp-text); }
.pp-meta, .pp-sort { color: var(--pp-text-3); font-size: .9375rem; margin: 0 0 .5rem; font-variant-numeric: tabular-nums; }
.pp-status {
  margin: 0 0 1rem; padding: .5rem 0 .5rem .75rem;
  border-left: 3px solid var(--pp-accent); color: var(--pp-text); font-size: .9375rem;
}

/* Breadcrumb */
.pp-breadcrumb { font-size: .875rem; color: var(--pp-text-3); }
.pp-breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.pp-breadcrumb li { display: inline-flex; align-items: center; }
.pp-breadcrumb li + li::before { content: "\203A"; margin: 0 .5rem; color: var(--pp-text-3); }
.pp-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }

/* Buttons and CTA */
.pp-cta, .pp-button, .pp-button-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .625rem 1.25rem;
  border: 2px solid var(--pp-accent); border-radius: 4px;
  font: inherit; font-weight: 600; line-height: 1.3; text-align: center;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.pp a.pp-cta, .pp a.pp-cta:visited, .pp .pp-button {
  text-decoration: none;
  background: var(--pp-accent); color: var(--pp-on-accent);
}
.pp a.pp-cta:hover, .pp .pp-button:hover:not([disabled]) {
  background: var(--pp-accent-hover); border-color: var(--pp-accent-hover); color: var(--pp-on-accent);
}
.pp .pp-button-secondary { background: transparent; color: var(--pp-link); }
.pp .pp-button-secondary:hover { color: var(--pp-link-hover); border-color: var(--pp-link-hover); }
.pp .pp-button[disabled] { cursor: not-allowed; background: var(--pp-surface); border-color: var(--pp-border); color: var(--pp-text-3); }

.pp-cta-block { background: var(--pp-surface); padding: 1rem; margin: 0 0 1.5rem; }
.pp-cta-block .pp-cta { display: flex; width: 100%; }
.pp-cta-note { margin: .5rem 0 0; font-size: .875rem; color: var(--pp-text-3); }
.pp-main > a.pp-cta { margin: .5rem 0 1rem; }

/* Facts */
.pp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin: 1.5rem 0; }
.pp-fact { margin: 0; }
.pp-fact dt { font-size: .875rem; color: var(--pp-text-3); margin: 0; }
.pp-fact dd { margin: 0; color: var(--pp-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 399px) { .pp-facts { grid-template-columns: 1fr; } }
.pp-gap { color: var(--pp-text-3); font-size: .9375rem; margin: 0 0 1rem; }

.pp-section { margin: 0; }
.pp-related, .pp-link-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.pp-related li, .pp-link-list li { margin: 0; }
.pp-related a, .pp-link-list a { display: flex; align-items: center; min-height: 44px; }

/* Fund page grid: 720 column + 280 sticky rail at >=1024, DOM order kept */
@media (min-width: 1024px) {
  .pp-layout {
    display: grid;
    width: 100%;
    max-width: none;
    /* First column is 720px when the viewport allows, and shrinks so the 280px rail stays on screen at 1024. */
    grid-template-columns: minmax(0, var(--layout-reader-width)) var(--pp-rail-width);
    column-gap: 3rem; row-gap: 0; align-items: start;
  }
  .pp-layout > * { grid-column: 1; max-width: none; }
  .pp-layout > .pp-summary, .pp-layout > .pp-status, .pp-layout > .pp-gap,
  .pp-layout > .pp-section p, .pp-layout > .pp-facts { max-width: 68ch; }
  .pp-layout > .pp-rail {
    grid-column: 2; grid-row: 1 / span 30;
    position: sticky; top: 1rem; align-self: start; margin-top: 1rem;
  }
  .pp-cta-block { margin-bottom: 0; }
}

/* List rows */
.pp-rows { list-style: none; margin: 1rem 0; padding: 0; counter-reset: none; }
.pp-row { margin: 0; border-bottom: 1px solid var(--pp-border); }
.pp-row:first-child { border-top: 1px solid var(--pp-border); }
.pp .pp-row-link {
  display: grid; grid-template-columns: 2rem 1fr; grid-template-areas: "rank name" ". reason";
  column-gap: .5rem; padding: .5rem 0; min-height: 44px; align-items: baseline;
  color: var(--pp-text); text-decoration: none;
}
.pp .pp-row-link:hover .pp-row-name { color: var(--pp-link-hover); text-decoration: underline; }
.pp .pp-row-link:visited .pp-row-name { color: var(--pp-visited); }
.pp-row-rank { grid-area: rank; color: var(--pp-text-3); font-variant-numeric: tabular-nums; text-align: right; }
.pp-row-name { grid-area: name; font-weight: 600; color: var(--pp-link); }
.pp-row-name::after { content: " \203A"; }
.pp-row-reason { grid-area: reason; color: var(--pp-text-3); font-size: .9375rem; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .pp .pp-row-link {
    grid-template-columns: 2rem minmax(0, 22rem) 1fr; grid-template-areas: "rank name reason";
    column-gap: 1rem; align-items: center;
  }
  .pp-row-reason { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.pp-more { color: var(--pp-text); margin: 1rem 0; }
.pp-more a { display: inline-flex; align-items: center; min-height: 44px; }

/* Hub */
.pp-hub-group { margin: 0; }

/* Footer */
.pp-footer { border-top: 1px solid var(--pp-border); margin-top: 2rem; }
.pp-footer-links, .pp-footer-meta { max-width: 1048px; margin: 0 auto; padding: 0 1rem; }
.pp-footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding-top: .75rem; padding-bottom: 0; font-size: .9375rem; }
.pp-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.pp-footer-meta { font-size: .875rem; color: var(--pp-text-3); padding-top: .5rem; padding-bottom: 2rem; margin-bottom: 0; }

/* Fund Finder */
.pp-form { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.5rem 0; max-width: none; }
.pp-field { display: flex; flex-direction: column; min-width: 0; }
.pp-label { font-size: .875rem; font-weight: 600; color: var(--pp-text); margin-bottom: .25rem; }
.pp-select {
  width: 100%; min-height: 44px; padding: .5rem .75rem; font: inherit;
  color: var(--pp-text); background: var(--pp-bg); border: 1px solid var(--pp-text-3); border-radius: 4px;
}
.pp-select[aria-invalid="true"] { border-color: var(--pp-error); border-width: 2px; }
.pp-helper { font-size: .875rem; color: var(--pp-text-3); margin: .25rem 0 0; }
.pp-error { font-size: .875rem; color: var(--pp-error); margin: .25rem 0 0; }
.pp-error:empty { display: none; }
.pp-form .pp-button { width: 100%; }
@media (min-width: 768px) {
  .pp-form { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; align-items: start; }
  .pp-form .pp-button { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
}
@media (min-width: 1024px) {
  .pp-form .pp-button { width: auto; justify-self: start; min-width: 14rem; }
}
.pp-results { margin-top: 2rem; transition: opacity .15s; max-width: none; }
.pp-results[aria-busy="true"] { opacity: .5; }
.pp-results-heading { font-size: 1.25rem; font-weight: 600; margin: 0 0 .5rem; }
.pp-results-heading:focus { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.pp-empty { color: var(--pp-text); margin: 0 0 1rem; }
.pp-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.pp-support { color: var(--pp-text-3); font-size: .9375rem; margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .pp *, .pp *::before, .pp *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.pp-results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.pp-results-head .pp-button-secondary { min-height: 44px; }