/* ═══════════════════════════════════════════════════════════════════════════
   /portfolio/ — the Fund Research palette.                     added 2026-10-02

   These pages arrived from a separate site with their own light-grey theme, so
   inside MF Analyser they read as somebody else's product sitting in our
   header. Same colours as the home and Fund Research pages (seo/fund.css): a
   warm cream page under a fixed gold wash, white cards floating on it, navy for
   structure, gold for the one action, teal and red for gain and loss.

   Loaded after the page's own stylesheets, so order settles it and almost
   nothing here needs !important. The exceptions are marked.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --pf-paper:#efe9db; --pf-card:#fff; --pf-line:#ded5c2; --pf-line2:#c8bda3;
  --pf-gold:#b8871c; --pf-gold-d:#6f550f; --pf-gold-l:#dcab3c;
  --pf-navy:#0d1526; --pf-navy2:#1b2745; --pf-ink:#2b3452; --pf-mut:#6b6350;
  --pf-up:#0a5f58; --pf-up-bg:#ddf5ee; --pf-dn:#a52b22; --pf-dn-bg:#fbe6e2;
  --pf-ease:cubic-bezier(.23,1,.32,1);
  --pf-sh:0 1px 2px rgba(13,21,38,.07),0 6px 20px rgba(13,21,38,.10);
  --pf-sh-sm:0 1px 2px rgba(13,21,38,.06),0 2px 8px rgba(13,21,38,.07);
}

html body{
  background:var(--pf-paper);
  background-image:radial-gradient(1200px 400px at 90% -50px, rgba(201,152,42,.10), transparent 60%);
  background-attachment:fixed;
  color:var(--pf-ink);
}
body > main, main > .content{background:transparent}

/* ── the two-tab bar that replaced the old sidebar ───────────────────────── */
.pf-subnav{
  display:flex; gap:8px; flex-wrap:wrap;
  max-width:1240px; margin:18px auto 0; padding:0 28px;
}
.pf-tab{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:10px; text-decoration:none;
  font-size:13.5px; font-weight:600; letter-spacing:.01em;
  color:var(--pf-mut); background:#fbf8f0; border:1px solid var(--pf-line);
  transition:transform .14s var(--pf-ease), background .16s ease, border-color .16s ease, color .16s ease;
}
.pf-tab:hover{color:var(--pf-navy); border-color:var(--pf-line2); transform:translateY(-1px)}
.pf-tab:active{transform:scale(.97)}
.pf-tab.on{
  background:linear-gradient(135deg,var(--pf-navy) 0%,var(--pf-navy2) 100%);
  border-color:var(--pf-navy); color:#fff;
  box-shadow:0 3px 12px rgba(13,21,38,.26);
}

/* ── content column, matching the rest of the site ───────────────────────── */
main > .content{max-width:1240px; margin:0 auto; padding:22px 28px 60px}

/* ── panels become white cards on the cream ──────────────────────────────── */
.adviser-bar, .import-panel, .review-panel, .allocation-card,
.client-profile, .context-note, .panel, .card{
  background:var(--pf-card);
  border:1px solid var(--pf-line);
  border-radius:16px;
  box-shadow:var(--pf-sh-sm);
}
.adviser-bar{
  background:linear-gradient(135deg,var(--pf-navy) 0%,var(--pf-navy2) 100%);
  border-color:rgba(255,255,255,.14);
  color:#fff;
}
.adviser-bar *{color:inherit}
.adviser-bar strong, .adviser-bar b{color:#fff}
.adviser-bar .muted, .adviser-bar span{color:#c8cfe0}

/* ── headings ────────────────────────────────────────────────────────────── */
h1, h2, h3{color:var(--pf-navy)}
.eyebrow, .kicker, .section-kicker{color:var(--pf-gold-d); font-weight:700; letter-spacing:.12em}
.muted, .hint, .note, small{color:var(--pf-mut)}

/* ── buttons: gold acts, navy confirms, red destroys ─────────────────────── */
button, .button{
  transition:transform .14s var(--pf-ease), background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
button:active, .button:active{transform:scale(.97)}
.button.primary, button.primary, .btn-primary{
  background:linear-gradient(135deg,var(--pf-gold-l) 0%,#f0cd7a 100%);
  border:1px solid var(--pf-gold); color:#3a2c08; font-weight:700;
  border-radius:10px;
  box-shadow:0 3px 14px rgba(184,135,28,.30),0 1px 0 rgba(255,255,255,.4) inset;
}
.button.primary:hover, button.primary:hover, .btn-primary:hover{
  background:linear-gradient(135deg,#f0cd7a 0%,#f7dd9c 100%);
  transform:translateY(-1px);
}
.button.ghost, button.ghost, .btn-secondary{
  background:var(--pf-card); border:1px solid var(--pf-navy); color:var(--pf-navy);
  border-radius:10px; font-weight:600;
}
.button.ghost:hover, button.ghost:hover{background:var(--pf-navy); color:#fff}
.button.danger, button.danger{
  background:var(--pf-dn-bg); border:1px solid #f2c4bb; color:var(--pf-dn); font-weight:600; border-radius:10px;
}

/* ── inputs ──────────────────────────────────────────────────────────────── */
input, select, textarea{
  background:#fbf8f0; border:1px solid var(--pf-line2); color:var(--pf-ink);
  border-radius:10px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--pf-gold); background:#fff;
  box-shadow:0 0 0 4px rgba(184,135,28,.18);
}

/* ── tables ──────────────────────────────────────────────────────────────── */
table{border-collapse:separate; border-spacing:0}
thead th{
  color:var(--pf-gold-d); font-weight:700; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.07em;
  border-bottom:1px solid var(--pf-line);
  background:transparent;
}
tbody tr{background:linear-gradient(180deg,#fff 0%,#fdfbf5 100%)}
tbody tr:hover{background:#faf6ec}
tbody td{border-bottom:1px solid var(--pf-line)}

/* gain and loss, the same green and red the ranking tables use */
.pos, .gain, .up, [data-sign="+"]{color:var(--pf-up)}
.neg, .loss, .down, [data-sign="-"]{color:var(--pf-dn)}

/* ── the file drop zone ──────────────────────────────────────────────────── */
.dropzone, .upload, [class*="drop"]{
  background:#faf6ec; border:1.5px dashed var(--pf-line2); border-radius:14px;
}

/* ── dialogs ─────────────────────────────────────────────────────────────── */
dialog{
  background:var(--pf-card); border:1px solid var(--pf-line);
  border-radius:18px; box-shadow:0 30px 70px -20px rgba(13,21,38,.55);
  color:var(--pf-ink);
}
dialog::backdrop{background:rgba(13,21,38,.62)}

@media(max-width:900px){
  .pf-subnav{padding:0 16px}
  main > .content{padding:18px 16px 48px}
}
@media (prefers-reduced-motion: reduce){
  .pf-tab, button, .button{transition:background .16s ease, border-color .16s ease, color .16s ease}
  .pf-tab:hover, .pf-tab:active, button:active, .button:active,
  .button.primary:hover, button.primary:hover{transform:none}
}