/* Shared chrome — global header + section sub-nav.
   Loaded by dashboard, /etf, and /analyzer so the chrome is identical site-wide.
   Mirrors app/_chrome.py:_CHROME_CSS — keep in sync if either is edited. */
.gh{position:sticky;top:0;z-index:100;background:rgba(250,250,245,.92);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(229,224,216,.55)}
.gh-inner{max-width:1320px;margin:0 auto;padding:10px 24px;display:flex;
    align-items:center;gap:16px}
.gh-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.gh-brand svg{flex-shrink:0}
.gh-brand-text{display:flex;flex-direction:column;line-height:1.2}
.gh-brand-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.18em;font-weight:600;
    letter-spacing:2.5px;color:#1A1A1A;text-transform:uppercase}
.gh-brand-sub{font-family:'DM Sans',-apple-system,sans-serif;font-size:.65em;
    color:#6e6354;letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.gh-nav{display:flex;gap:24px;flex:1;justify-content:center;flex-wrap:wrap}
.gh-nav a{font-family:'DM Sans',sans-serif;font-size:.78em;font-weight:500;
    letter-spacing:1.8px;color:#5b5346;text-transform:uppercase;text-decoration:none;
    padding:6px 2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.gh-nav a:hover{color:#1A1A1A}
.gh-nav a.act{color:#1E3A2F;border-bottom-color:#C9A84C}
.gh-right{display:flex;align-items:center;gap:14px}
.gh-lang{font-family:'DM Sans',sans-serif;font-size:.65em;letter-spacing:2px;
    text-transform:uppercase;font-weight:500;color:#6e6354;
    padding:5px 9px;border:1px solid #d8d2c4;border-radius:4px;text-decoration:none;
    transition:color .15s,border-color .15s}
.gh-lang:hover{color:#1A1A1A;border-color:#C9A84C}
.gh-signin{font-family:'DM Sans',sans-serif;font-size:.78em;letter-spacing:1px;
    text-transform:uppercase;font-weight:500;color:#5b5346;text-decoration:none;
    transition:color .15s}
.gh-signin:hover{color:#1A1A1A}
.gh-register{font-family:'DM Sans',sans-serif;font-size:.78em;letter-spacing:1.5px;
    text-transform:uppercase;font-weight:600;background:#1E3A2F;color:#FAFAF5;
    padding:8px 16px;border-radius:4px;text-decoration:none;
    transition:background .15s}
.gh-register:hover{background:#2a5443}
/* Logged-in user chip — username + plan badge + sign-out link */
.user-chip{display:flex;align-items:center;gap:10px;font-family:'DM Sans',sans-serif}
.user-chip .plan-badge{font-size:.6em;letter-spacing:1.2px;text-transform:uppercase;
    font-weight:600;color:#FAFAF5;padding:3px 8px;border-radius:3px;line-height:1.2}
.user-chip .logout-link{font-size:.7em;letter-spacing:1.5px;text-transform:uppercase;
    font-weight:500;color:#6e6354;text-decoration:none;transition:color .15s}
.user-chip .logout-link:hover{color:#1A1A1A}
.gh-subnav{background:#f4efe5;border-bottom:1px solid rgba(229,224,216,.6)}
.gh-subnav-inner{max-width:1320px;margin:0 auto;padding:10px 24px;display:flex;
    gap:6px;flex-wrap:wrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.gh-subnav a{font-family:'DM Sans',sans-serif;font-size:.85em;font-weight:500;
    color:#5b5346;text-decoration:none;padding:6px 14px;border-radius:6px;
    white-space:nowrap;transition:background .15s,color .15s}
.gh-subnav a:hover{background:rgba(201,168,76,.12);color:#1A1A1A}
.gh-subnav a.act{background:#1E3A2F;color:#FAFAF5}
.gh-breadcrumb{background:#FAFAF5;border-bottom:1px solid rgba(229,224,216,.4)}
.gh-bc-inner{max-width:1320px;margin:0 auto;padding:8px 24px;
    font-family:'DM Sans',sans-serif;font-size:.78em;color:#6e6354}
.gh-bc-inner a{color:#6e6354;text-decoration:none;border-bottom:1px solid transparent;
    transition:color .15s,border-color .15s}
.gh-bc-inner a:hover{color:#1A1A1A;border-bottom-color:#C9A84C}
.gh-bc-current{color:#1A1A1A;font-weight:500}
.gh-bc-sep{color:#bcb3a1;margin:0 6px}
@media (max-width:760px){
  .gh-inner{flex-wrap:wrap;gap:10px;padding:10px 16px}
  .gh-brand-text{display:none}
  .gh-nav{order:3;width:100%;justify-content:flex-start;gap:14px;
      overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;
      padding-bottom:2px}
  .gh-nav a{white-space:nowrap}
  .gh-right{margin-left:auto}
  .gh-subnav-inner{padding:8px 16px;flex-wrap:nowrap}
}

/* ── Equity 6-pillar grid (used on /analyzer/) ─────────────────── */
.pillars-section{padding:56px 0;background:#FAFAF5}
.pillars-section .container{max-width:1320px;margin:0 auto;padding:0 24px}
.pillars-section .s-header{text-align:center;margin-bottom:32px}
.pillars-section .eyebrow{font-family:'DM Sans',sans-serif;font-size:.72em;
    letter-spacing:3px;text-transform:uppercase;color:#7B6121;font-weight:600;margin-bottom:10px}
.pillars-section .s-title{font-family:'Cormorant Garamond',Georgia,serif;
    font-size:2em;font-weight:500;color:#1A1A1A;margin-bottom:14px}
.pillars-section .s-divider{width:50px;height:1px;background:#C9A84C;margin:0 auto}
.fw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fw-card{background:#FFFFFF;border:1px solid #E5E0D8;border-radius:8px;
    overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    position:relative;display:block;text-decoration:none;color:inherit;cursor:pointer}
.fw-card[data-pillar=quality]   {border-left:3px solid #2d6a4f}
.fw-card[data-pillar=earnings]  {border-left:3px solid #2a6496}
.fw-card[data-pillar=financials]{border-left:3px solid #446e54}
.fw-card[data-pillar=management]{border-left:3px solid #7a5a10}
.fw-card[data-pillar=valuation] {border-left:3px solid #7b6121}
.fw-card[data-pillar=context]   {border-left:3px solid #8b4c6d}
.fw-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08);
    border-color:#C9A84C}
.fw-card:focus-visible{outline:2px solid #C9A84C;outline-offset:2px}
.fw-accent{height:3px}
.fw-body{padding:24px 22px}
.fw-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-family:'Cormorant Garamond',Georgia,serif;
    font-size:1.1em;font-weight:600;color:#fff;margin-bottom:14px}
.fw-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.3em;font-weight:500;margin-bottom:4px;color:#1A1A1A}
.fw-sub{font-size:.7em;color:#8A8A8A;letter-spacing:.5px;text-transform:uppercase;
    margin-bottom:12px;font-weight:500}
.fw-desc{font-size:.84em;color:#5A5A5A;line-height:1.75}
.fw-when{font-size:.77em;color:#1A1A1A;font-weight:500;margin-top:12px;
    padding-top:12px;border-top:1px solid #E5E0D8;line-height:1.6}
.fw-when em{color:#8A8A8A;font-style:normal}
.fw-cta{font-family:'DM Sans',sans-serif;font-size:.74em;letter-spacing:1.4px;
    text-transform:uppercase;font-weight:600;margin-top:14px;
    transition:transform .15s ease}
.fw-card:hover .fw-cta{transform:translateX(3px)}
@media(max-width:900px){.fw-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .pillars-section{padding:36px 0}
  .pillars-section .s-title{font-size:1.6em}
  .fw-grid{grid-template-columns:1fr}
}

/* ── Featured ETFs grid (used on /) ─────────────────────────────── */
.featured-section{padding:56px 0;background:#F4F1EB}
.featured-section .container{max-width:1320px;margin:0 auto;padding:0 24px}
.featured-section .s-header{text-align:center;margin-bottom:32px}
.featured-section .eyebrow{font-family:'DM Sans',sans-serif;font-size:.72em;
    letter-spacing:3px;text-transform:uppercase;color:#7B6121;font-weight:600;margin-bottom:10px}
.featured-section .s-title{font-family:'Cormorant Garamond',Georgia,serif;
    font-size:2em;font-weight:500;color:#1A1A1A;margin-bottom:14px}
.featured-section .s-divider{width:50px;height:1px;background:#C9A84C;margin:0 auto}
.etf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.etf-card{background:#FFFFFF;border:1px solid #E5E0D8;border-radius:8px;
    padding:22px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.etf-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08);border-color:#C9A84C}
.etf-card-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.1em;
    font-weight:600;color:#1A1A1A;line-height:1.3}
.etf-card-isin{font-family:'DM Sans',sans-serif;font-size:.7em;letter-spacing:1.5px;
    text-transform:uppercase;color:#8A8A8A;font-weight:500}
.etf-card-stats{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;
    padding-top:12px;border-top:1px solid #E5E0D8}
.etf-card-stat{display:flex;flex-direction:column;gap:2px}
.etf-card-stat-label{font-size:.62em;letter-spacing:1.2px;text-transform:uppercase;
    color:#8A8A8A;font-weight:500}
.etf-card-stat-val{font-family:'DM Sans',sans-serif;font-size:.92em;font-weight:600;color:#1E3A2F}
.etf-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.etf-card-tag{font-family:'DM Sans',sans-serif;font-size:.62em;letter-spacing:1.2px;
    text-transform:uppercase;font-weight:600;padding:3px 8px;border-radius:10px;
    background:rgba(201,168,76,.12);color:#7B6121}
@media(max-width:900px){.etf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .featured-section{padding:36px 0}
  .featured-section .s-title{font-size:1.6em}
  .etf-grid{grid-template-columns:1fr}
}

/* ── Category quick-pick chips (used on /) ──────────────────────── */
.cat-section{padding:48px 0;background:#FAFAF5;border-top:1px solid #E5E0D8}
.cat-section .container{max-width:1320px;margin:0 auto;padding:0 24px;text-align:center}
.cat-section .eyebrow{font-family:'DM Sans',sans-serif;font-size:.72em;
    letter-spacing:3px;text-transform:uppercase;color:#7B6121;font-weight:600;margin-bottom:10px}
.cat-section .s-title{font-family:'Cormorant Garamond',Georgia,serif;
    font-size:1.7em;font-weight:500;color:#1A1A1A;margin-bottom:24px}
.cat-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cat-chip{font-family:'DM Sans',sans-serif;font-size:.82em;font-weight:500;
    color:#1A1A1A;background:#FFFFFF;border:1px solid #E5E0D8;border-radius:24px;
    padding:9px 18px;text-decoration:none;transition:all .15s}
.cat-chip:hover{background:#1E3A2F;color:#FAFAF5;border-color:#1E3A2F}

/* ── Hero search box (used on /) ─────────────────────────────────── */
.hero-search{display:flex;gap:8px;max-width:560px;margin:18px auto 0;
    background:#FFFFFF;border:1px solid #E5E0D8;border-radius:6px;padding:6px;
    box-shadow:0 4px 18px rgba(0,0,0,.05)}
.hero-search input{flex:1;font-family:'DM Sans',sans-serif;font-size:1em;
    padding:12px 16px;border:none;background:transparent;color:#1A1A1A;outline:none}
.hero-search input::placeholder{color:#bbb}
.hero-search button{font-family:'DM Sans',sans-serif;font-size:.78em;font-weight:600;
    letter-spacing:1.5px;text-transform:uppercase;background:#1E3A2F;color:#FAFAF5;
    border:none;padding:0 22px;border-radius:4px;cursor:pointer;transition:background .15s}
.hero-search button:hover{background:#2a5443}
@media(max-width:540px){.hero-search{flex-direction:column}.hero-search button{padding:12px 22px}}

/* ── Site footer (rendered by _chrome.render_footer) ───────────────── */
.site-footer{padding:32px 0 28px;border-top:1px solid #E5E0D8;background:#FAFAF5;color:#5A5A5A;margin-top:48px}
.site-footer-inner{max-width:980px;margin:0 auto;padding:0 24px;text-align:center;font-size:.78em;line-height:1.7}
.site-footer-brand{margin:0 0 14px;font-family:'DM Sans',sans-serif;color:#1A1A1A;font-weight:500;letter-spacing:.3px}
.site-footer-legal{margin:0 0 14px;color:#8A8A8A;max-width:760px;margin-left:auto;margin-right:auto}
.site-footer-legal strong{color:#5A5A5A}
.site-footer-links{margin:0;font-family:'DM Sans',sans-serif;font-size:.92em;color:#8A8A8A}
.site-footer-links a{color:#5A5A5A;text-decoration:none;letter-spacing:.4px;font-weight:500}
.site-footer-links a:hover{color:#1E3A2F;text-decoration:underline}
.site-footer-sep{color:#C9A84C;margin:0 8px;font-weight:400}

/* A100: shared accessibility helper — visually-hidden label for
   screen-reader-only text. Mirrors the same rule already in
   app/static/css/base.css; lifted to chrome.css so dashboard pages
   (which load chrome.css but not base.css) can use sr-only labels
   on form inputs. WCAG 1.3.1 / 3.3.2. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* A110: visible focus indicator on every chrome interactive element.
   Pre-A110 only .fw-card and .skip-link had :focus-visible — the nav
   links, brand, lang toggle, sub-nav, breadcrumbs, hero-search input
   (which carries outline:none above), hero-search button, cat-chips
   and footer links had only :hover styles. Keyboard users got the
   browser default outline at best, and on .hero-search input got
   NOTHING (outline:none with no replacement). WCAG 2.4.7 Focus Visible.
   2px gold outline + 2px offset matches the existing .fw-card and
   .skip-link pattern — site-wide visual language. */
.gh-brand:focus-visible,
.gh-nav a:focus-visible,
.gh-lang:focus-visible,
.gh-signin:focus-visible,
.gh-register:focus-visible,
.user-chip .logout-link:focus-visible,
.gh-subnav a:focus-visible,
.gh-bc-inner a:focus-visible,
.cat-chip:focus-visible,
.hero-search input:focus-visible,
.hero-search button:focus-visible,
.site-footer-links a:focus-visible{
  outline:2px solid #C9A84C;outline-offset:2px;border-radius:3px}

/* A106: skip-to-main-content link. Visually hidden off-screen by
   default (sr-only shape with clip) so it stays in the
   accessibility tree, reveals as a prominent button at the
   top-left on :focus-visible. Mirrors the same rule in
   app/static/css/base.css and _chrome._CHROME_CSS.
   WCAG 2.4.1 Bypass Blocks. */
.skip-link{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;
  margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
  border:0;z-index:1000}
.skip-link:focus,.skip-link:focus-visible{position:fixed;top:12px;left:12px;
  width:auto;height:auto;padding:10px 16px;margin:0;overflow:visible;
  clip:auto;white-space:normal;background:#1E3A2F;color:#FAFAF5;
  border-radius:4px;text-decoration:none;
  font-family:'DM Sans',-apple-system,sans-serif;font-weight:600;
  font-size:.95rem;outline:2px solid #C9A84C;outline-offset:2px}

/* A107: respect prefers-reduced-motion globally (WCAG 2.3.3). The
   dashboard hero ships orb rotations, chart-line draw animations, a
   pulsing live dot, scroll-reveal transforms, and a count-up; the
   analyser tab-nav transitions; the screener has hover transitions.
   None were guarded. base.css already has scoped rules for the .eyebrow
   / .grad-text / .reveal patterns it owns, but that file isn't loaded
   by the dashboard or analyser — so the hero kept moving for users
   with vestibular sensitivity. This global hammer (the canonical
   pattern from a11yproject.com and web.dev) neutralises every
   animation + transition on every page that loads the chrome.
   Mirrors _chrome._CHROME_CSS per the keep-in-sync contract at L3. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}