/* ============================================================
   MF Analyser — Live Top Funds Explorer
   Shared design system
   ============================================================ */

:root{
  /* Colors — InvestVerdict navy + gold luxury system */
  --bg: #F8FAFC;   /* navy   */
  --bg2: #FFFFFF;   /* navy-2 */
  --bg3: #F1F5F9;   /* secondary surfaces / inputs */
  --card: #FFFFFF;   /* navy-3 — elevated cards */
  --card2: #F8FAFC;   /* navy-4 — hover / nested */
  --b1: #F1F5F9;
  --b2: #E2E8F0;
  --b3: #CBD5E1;
  --a: #8B6F2F;   /* gold     */
  --a2: #C9A961;   /* gold-2   */
  --gold-soft: rgba(201,169,97,0.12);
  --gold-glow: rgba(201,169,97,0.22);
  --green: #059669;
  --red: #DC2626;
  --gold: #C9A961;
  --t1: #0F172A;   /* cream text   */
  --t2: #64748B;   /* muted        */
  --t3: #94A3B8;   /* muted-2      */

  /* Type — DM Sans body/UI, Bebas hero, Cormorant serif accents */
  --display: 'DM Sans', system-ui, sans-serif;
  --body:    'DM Sans', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;
  --hero:    'Bebas Neue', 'DM Sans', sans-serif;
  --serif:   'Cormorant Garamond', Georgia, serif;

  /* Radius */
  --r6: 6px; --r8: 10px; --r12: 12px; --r14: 16px; --r16: 16px;

  /* Shadow */
  --shadow-cta: 0 4px 16px rgba(139,111,47,0.22);
  --shadow-lift: 0 8px 28px rgba(15,23,42,0.10);

  /* Full-bleed: every container (header, subbar, tabs, cards, footer) is capped
     by this. A fixed pixel cap left ~300px of dead white on each side of a
     1920 monitor, which read as the whole site sitting in a box. Each of those
     containers carries its own 22px padding, so text still has breathing room. */
  --maxw: 100%;
  --header-h: 64px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Flat white. This used to be a gold grid + navy/gold glow painted as fixed
     background layers; it was overridden further down, but the browser still
     painted it for the first frames of every load, so it flashed on refresh.
     Removed at the source rather than layered over. */
  background: #FFFFFF;
  color: var(--t1);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

/* Optional full-screen overlay variants (kept for pages that use divs) */
.bg-texture { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.bg-grid {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(201,152,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,152,42,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(900px 700px at 50% 0%, #000, transparent 75%);
          mask-image: radial-gradient(900px 700px at 50% 0%, #000, transparent 75%);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--a); color: var(--bg); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201,152,42,0.18); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,152,42,0.34); background-clip: padding-box; }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 22px;
  background: rgba(5,17,31,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--b1);
}
.header-inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
}
.logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 16px;
  letter-spacing: -0.01em; white-space: nowrap;
}
.logo .mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--a), var(--a2));
  display: grid; place-items: center; color: var(--bg);
  box-shadow: 0 2px 10px rgba(201,152,42,0.45);
}
.logo .mark svg { width: 15px; height: 15px; }
.logo .dot-sep { color: var(--t3); font-weight: 400; }

.header-center {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px;
  min-width: 0;
}
.header-title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 500; font-size: 14px;
  color: var(--t1); white-space: nowrap;
}
.header-title .trophy { color: var(--gold); display: inline-flex; }

.live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.22);
  font-family: var(--mono); font-size: 11px; color: var(--green);
  white-space: nowrap;
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); position: relative; flex: none;
}
.pulse-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--green); animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.3); opacity: 0.4; }
  100% { transform: scale(1);   opacity: 1; }
}

.header-right { display: flex; align-items: center; gap: 12px; }
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg3); border: 1px solid var(--b1);
  border-radius: var(--r8); padding: 7px 11px; width: 220px;
  transition: border-color .18s, box-shadow .18s;
}
.search:focus-within { border-color: var(--b3); box-shadow: 0 0 0 3px rgba(201,152,42,0.10); }
.search svg { width: 15px; height: 15px; color: var(--t3); flex: none; }
.search input {
  background: none; border: none; outline: none; color: var(--t1);
  font-family: var(--body); font-size: 13px; width: 100%;
}
.search input::placeholder { color: var(--t3); }
.user-menu {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--a), var(--a2));
  display: grid; place-items: center; color: var(--bg);
  font-family: var(--display); font-weight: 700; font-size: 13px;
  border: 1px solid var(--b2);
}

/* ============================================================
   GENERIC
   ============================================================ */
.page { position: relative; z-index: 1; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

.card {
  background: var(--card);
  border: 1px solid var(--b1);
  border-radius: var(--r14);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--b2); background: var(--bg3); color: var(--t1);
  border-radius: var(--r8); padding: 8px 14px; font-size: 13px; font-weight: 500;
  transition: transform .14s, border-color .14s, background .14s, box-shadow .14s;
}
.btn:hover { border-color: var(--b3); transform: scale(1.02); }
.btn-primary {
  background: linear-gradient(135deg, var(--a), var(--a2));
  border: none; color: var(--bg); font-weight: 700; box-shadow: var(--shadow-cta);
}
.btn-primary:hover { box-shadow: 0 6px 22px rgba(201,152,42,0.45); }

.up   { color: var(--green); }
.down { color: var(--red); }

.stars { color: var(--gold); letter-spacing: 1px; font-size: 11px; white-space: nowrap; }
.stars .off { color: var(--t3); }

/* skeleton shimmer */
.sk {
  position: relative; overflow: hidden;
  background: rgba(201,152,42,0.07); border-radius: 6px;
}
.sk::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(228,223,208,0.10), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* entrance */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .5s cubic-bezier(.2,.7,.3,1) both; }

@keyframes flipIn {
  from { opacity: 0; transform: translateY(6px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.flip-in { animation: flipIn .42s cubic-bezier(.2,.7,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===========================================================================
   FLAT WHITE THEME  (2026-08-02) — appended last so it wins.
   Drives top-funds.html and fund-detail.html. Same rules as try.html's block.
   Header (.chrome) and footer (.mfa-foot) are deliberately left dark + gold.
   =========================================================================== */

body, .wrap, main, section{ background:#FFFFFF; background-image:none; }
/* the fixed gold-grid + navy glow layer */
.bg-grid{ display:none !important; }

body, h1, h2, h3, h4, .stat-val{ color:#0B1220; }
p, .muted, small, label, th, .sub{ color:#1E3A5F; }
a:not(.chrome-tab):not(.ntab){ color:#1D4ED8; }
.pos, .up{ color:#047857; }
/* Negatives stay red — a negative return shown in green or blue reads as a gain. */
.neg, .down{ color:#B91C1C; }

.seg-btn.active, .chip.on, .plan-btn.active, .chrome-tab.active, .ntab.active{
  background:#F5C518 !important; color:#000 !important;
  border-color:#D9A916 !important; background-image:none !important;
}
.btn-primary, .cta{
  background:#E8B84B !important; background-image:none !important; color:#0B1220 !important;
}

.card, .box, .panel{ background-image:none; color:#0B1220; border:1px solid rgba(11,18,32,.10); }
.card:nth-of-type(6n+1), .box:nth-of-type(6n+1){ background:#EFF6FF; border-color:#BFDBFE; }
.card:nth-of-type(6n+2), .box:nth-of-type(6n+2){ background:#ECFDF5; border-color:#A7F3D0; }
.card:nth-of-type(6n+3), .box:nth-of-type(6n+3){ background:#FFFBEB; border-color:#FDE68A; }
.card:nth-of-type(6n+4), .box:nth-of-type(6n+4){ background:#F5F3FF; border-color:#DDD6FE; }
.card:nth-of-type(6n+5), .box:nth-of-type(6n+5){ background:#FFF1F2; border-color:#FECDD3; }
.card:nth-of-type(6n),   .box:nth-of-type(6n)  { background:#ECFEFF; border-color:#A5F3FC; }

/* ===========================================================================
   READABILITY PASS
   Every value below replaces one that was measured failing on the live site.
   Contrast ratios quoted are the measured "before" against the element's own
   effective background, so they can be re-checked rather than taken on trust.
   =========================================================================== */

/* --- 1. The gold tile behind the logo mark -------------------------------
   The mark is already a full-colour logo; the gradient tile behind it read as
   a yellow box around the icon. */
.chrome-brand .mark {
  background: none !important;
  box-shadow: none !important;
  width: 34px; height: 34px;
}
.chrome-brand .mark img,
.chrome-brand .mark svg { width: 100%; height: 100%; object-fit: contain; }

/* --- 2. Blue links ------------------------------------------------------
   styles.css set a{color:#1D4ED8} for every link on the site. On the white
   pages that is fine, but the header, breadcrumb bar and footer are dark navy,
   where the same blue measured 2.83:1 — the brand wordmark and the breadcrumb
   were the worst of it. Dark surfaces get light type instead. */
   !important throughout: the rule being beaten is `a:not(.chrome-tab):not(.ntab)`,
   whose two :not() arguments each add a class's worth of specificity, so it
   outranks a plain descendant selector like `.subbar .bc-link`. */
.chrome a, .chrome a:visited,
.subbar a, .subbar a:visited,
.mfa-foot a, .mfa-foot a:visited,
.app-footer a, .app-footer a:visited { color: #E8EEF6 !important; }
.chrome a:hover, .subbar a:hover,
.mfa-foot a:hover, .app-footer a:hover { color: #F5C518 !important; }

/* The wordmark is a link, so it inherited the blue too. */
.chrome-brand .name       { color: #FFFFFF !important; }
.chrome-brand .name .dot  { color: #F5C518 !important; font-weight: 600; }

/* Breadcrumb: current page stays plain, ancestors read as gold links. */
.subbar .bc-link { color: #F5C518 !important; }
.subbar .cur     { color: #E8EEF6 !important; }

/* --- 3. Fund-detail tab bar --------------------------------------------
   The bar kept its dark navy background from the old theme while the labels
   were switched to the new near-black (#0F172A) — 1.06:1, i.e. invisible, and
   the inactive labels were #64748B on the same navy. Rebuilt to match the tabs
   everywhere else on the site: light bar, yellow active pill, black label. */
.tabs-bar {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid #D8DFEA;
  box-shadow: 0 1px 0 rgba(11,18,32,.04);
}
.tabs-inner { gap: 6px; padding-top: 8px; padding-bottom: 8px; }
/* !important on the idle colour too: fund-detail.css declares `.tab{color:
   var(--t2)}` at equal specificity and loads after this file, so it would win
   the tie on source order. */
.tab {
  color: #1E3A5F !important; border-radius: 10px; padding: 10px 15px;
  border: 1px solid transparent; font-weight: 600;
}
.tab:hover { color: #0B1220 !important; background: #F1F5F9; }
.tab.active {
  background: #F5C518 !important; color: #000000 !important;
  border-color: #D9A916 !important;
}
/* The old active marker was a gradient underline sitting under a dark bar. */
.tab.active::after { display: none !important; }

/* --- 4. Washed-out chips ------------------------------------------------
   Same equal-specificity-but-later-file problem as .tab, hence !important. */
.tag.accent {                      /* was #C7D2FE on #F1F5F9 — 1.36:1 */
  background: #EFF6FF !important; border-color: #BFDBFE !important; color: #1E3A8A !important;
}
.tag.gold {                        /* was #C9A961 on near-white — 2.25:1 */
  color: #7A5C10 !important; border-color: #E3C766 !important; background: #FFF8E1 !important;
}

/* --- 5. Muted text on white --------------------------------------------
   --t3 (#94A3B8) was chosen for a dark theme. On the white pages it measured
   2.36:1 across every caption: "annualised", "absolute · last 1 year", the
   heatmap month labels, calculator field labels. #475569 keeps the same
   quiet-secondary role at 7.4:1. */
body .hint, body .ss, body .cr-block .l, body .calc-input .pre,
body .hm-month, body .hm-legend, body .nav-label, body .nav-as,
body .plan, body .desc, body .section-head .hint {
  color: #475569;
}

/* Gold emphasis on white needs to be darker than the gold used on navy. */
body .bench-toggle b, body .chart-card b { color: #7A5C10; }

/* --- 6. --t2 / --t3 were picked for a dark theme -------------------------
   Rather than chase each caption class one at a time, retune the two muted
   text variables at the surface they sit on. On the white pages they need to
   be DARKER; on the navy chrome, subbar and footer they need to stay LIGHT —
   which is why this cannot be a single global value.
   Measured on white: #94A3B8 = 2.36:1, #475569 = 7.6:1.
   Measured on navy:  #64748B = 3.99:1, #C3D0E0 = 9.8:1. */
body { --t2: #334155; --t3: #475569; }
.chrome, .subbar, .mfa-foot, .app-footer,
.tabs-bar { --t1: #FFFFFF; --t2: #C3D0E0; --t3: #A9BACE; }
/* .tabs-bar is white now, so it keeps the page's dark muted colours. */
.tabs-bar { --t1: #0B1220; --t2: #334155; --t3: #475569; }

/* --- 7. Gold gradient tiles carrying white text -------------------------
   White on the light end of the old gradient (#C9A961) measured 2.1:1. */
.amc-logo, .fab { background-image: linear-gradient(135deg, #6E561F, #8B6F2F) !important; }

/* --- 8. Status green on white ------------------------------------------- */
.nav-live { color: #047857 !important; }   /* was #059669 — 3.58:1 */
.bench-name { color: #7A5C10; }            /* replaces an inline var(--gold) */

/* --- 9. Last four, measured on TINTED cards ------------------------------
   These sit on the coloured hero/calculator cards rather than pure white, so
   the retuned --t2/--t3 landed just under 4.5 (3.95 and 4.11). One step
   darker clears it on the tinted background too. */
body .plan, body .desc            { color: #1E293B !important; }
body .cr-block .l, body .cr-arrow { color: #334155 !important; }
/* --- 10. "AMFI filing" badge -------------------------------------------
   var(--green) #059669 on its own 10%-green pill measured 3.77:1. */
.source-badge { color: #046B4E !important; }