/* site.css - shared styles for detail pages, watchlist, changelog, managers.
   Builds on funds.css tokens & chrome. Load AFTER funds.css. */

/* pill tag (hero) */
.tag { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted);
  border:1px solid var(--border); border-radius:999px; padding:5px 12px; background:var(--surface); text-decoration:none; }
a.tag:hover { border-color:var(--border-strong); color:var(--text); }
.tag .dot { width:7px; height:7px; border-radius:2px; flex-shrink:0; }


/* ===== generic page scaffold reuse ===== */
.detail-page .container { padding-top: 22px; padding-bottom: 60px; }

/* breadcrumb */
.crumb { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin:18px 0 18px; flex-wrap:wrap; }
.crumb a { color:var(--muted); }
.crumb a:hover { color:var(--accent); }
.crumb .sep { color:var(--faint); }
.crumb .cur { color:var(--text); }

/* ===== detail hero ===== */
.dhero { display:grid; grid-template-columns: 1fr auto; gap:28px; align-items:start;
  padding:26px 30px; background:var(--surface); border:1px solid var(--border); border-radius:16px; }
.dhero-l { min-width:0; }
.dhero-eyebrow { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); flex-wrap:wrap; }
.dhero h1 { font-family:var(--font-head); font-size:34px; letter-spacing:-.02em; line-height:1.06; margin:12px 0 0; text-wrap:pretty; }
.dhero-tags { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 0; }
.dhero-r { display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex-shrink:0; }
.dhero-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; }

/* big stat under hero */
.dstat-row { display:grid; grid-template-columns: repeat(4, 1fr); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; background:var(--surface); margin-top:14px; }
.dstat { padding:18px 22px; border-left:1px solid var(--border); }
.dstat:first-child { border-left:0; }
.dstat .v { font-family:var(--font-head); font-size:26px; font-weight:600; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.dstat .v small { font-size:14px; color:var(--muted); font-weight:600; margin-left:2px; }
.dstat .l { font-size:12px; color:var(--muted); margin-top:8px; line-height:1.35; }

/* two-column body */
.dbody { display:grid; grid-template-columns: 1fr 320px; gap:22px; margin-top:22px; align-items:start; }
.dmain { display:flex; flex-direction:column; gap:18px; min-width:0; }
.dside { display:flex; flex-direction:column; gap:16px; position:sticky; top:80px; }

/* card */
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px 24px; }
.card-h { font-family:var(--font-head); font-size:16px; font-weight:600; letter-spacing:-.01em; margin:0 0 14px; }
.card-h.with-note { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.card-h .note { font-family:var(--font-body); font-size:11px; color:var(--faint); font-weight:400; letter-spacing:.02em; }
.card p.body { font-size:14px; line-height:1.65; color:var(--text); margin:0; text-wrap:pretty; }

/* spec grid (key/value) */
.specs { display:grid; grid-template-columns: 1fr 1fr; gap:0 36px; }
.spec { display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--border); }
.spec:last-child, .spec.last { border-bottom:0; }
.spec .k { font-size:12.5px; color:var(--muted); }
.spec .v { font-size:13.5px; font-weight:500; text-align:right; font-variant-numeric:tabular-nums; }
.spec .v.accent { color:var(--accent); font-weight:600; }
@media (max-width:560px){ .specs { grid-template-columns:1fr; } }

/* chips/pills list (asset types, geo) */
.pills { display:flex; flex-wrap:wrap; gap:8px; }
.pill { font-size:12.5px; color:var(--text); background:var(--bg); border:1px solid var(--border);
  border-radius:999px; padding:6px 13px; }

/* target-return highlight */
.ret-hl { display:flex; align-items:baseline; gap:10px; }
.ret-hl .big { font-family:var(--font-head); font-size:32px; font-weight:600; letter-spacing:-.02em; color:var(--pos-fg); font-variant-numeric:tabular-nums; }
.ret-hl .cap { font-size:12.5px; color:var(--muted); }

/* SRI risk meter */
.risk-meter { display:flex; gap:5px; margin:4px 0 0; }
.risk-seg { flex:1; height:9px; border-radius:3px; background:#edece6; }
.risk-seg.on { background:var(--warn-fg); }
.risk-cap { font-size:12px; color:var(--muted); margin-top:9px; }

/* risk list */
.risk-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.risk-list li { font-size:13.5px; color:var(--text); padding:11px 0 11px 22px; position:relative; border-bottom:1px solid var(--border); line-height:1.45; }
.risk-list li:last-child { border-bottom:0; }
.risk-list li::before { content:""; position:absolute; left:2px; top:16px; width:7px; height:7px; border-radius:2px; background:var(--warn-fg); }

/* AUM history sparkline card */
.spark-wrap svg { display:block; width:100%; height:auto; overflow:visible; }
.spark-wrap .axis-lab { font-size:10.5px; fill:var(--faint); }

/* documents */
.docs { display:flex; flex-direction:column; gap:0; }
.doc-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.doc-row:last-child { border-bottom:0; }
.doc-ico { width:30px; height:30px; border-radius:7px; background:var(--accent-soft,#eef2ff); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; flex-shrink:0; }
.doc-name { font-size:13.5px; flex:1; }
.doc-lock { font-size:11px; color:var(--faint); display:inline-flex; align-items:center; gap:5px; }

/* side: manager mini-card */
.mgr-mini { display:flex; flex-direction:column; gap:3px; }
.mgr-mini .role { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:600; }
.mgr-mini .nm { font-family:var(--font-head); font-size:18px; font-weight:600; letter-spacing:-.01em; margin-top:6px; }
.mgr-mini .meta { font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.45; }
.mgr-mini .lnk { font-size:13px; color:var(--accent); font-weight:500; margin-top:12px; display:inline-flex; align-items:center; gap:6px; }

/* gated action card */
.gate-card { background:#14140f; color:#f3f2ec; border-radius:14px; padding:22px 24px; }
.gate-card h4 { font-family:var(--font-head); font-size:16px; font-weight:600; margin:0; color:#fff; }
.gate-card p { font-size:12.5px; color:#a9a89f; line-height:1.5; margin:8px 0 16px; }
.gate-card .btn--primary { width:100%; justify-content:center; }
.gate-card .btn--ghostd { display:flex; width:100%; justify-content:center; align-items:center; gap:8px;
  margin-top:9px; background:transparent; color:#f3f2ec; border:1px solid rgba(255,255,255,.18);
  border-radius:9px; padding:11px 16px; font-size:13.5px; cursor:pointer; font-family:var(--font-body); text-decoration:none; }
.gate-card .btn--ghostd:hover { background:rgba(255,255,255,.08); }
.gate-card .fine { font-size:11px; color:#8d8c83; margin:10px 0 0; text-align:center; }

/* ===== watchlist (save) button ===== */
.wl-btn { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:13px;
  background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:9px;
  padding:9px 14px; cursor:pointer; transition:border-color .15s, background-color .15s, color .15s, transform .15s; }
.wl-btn:hover { border-color:var(--border-strong); }
.wl-btn:active { transform:scale(.97); }
.wl-btn.is-on { background:var(--accent-soft,#eef2ff); border-color:#c7d2fe; color:var(--accent); }
.wl-btn svg { width:15px; height:15px; flex-shrink:0; }
.wl-btn .wl-on-ico { display:none; }
.wl-btn.is-on .wl-on-ico { display:inline; }
.wl-btn.is-on .wl-off-ico { display:none; }
/* small icon-only variant for table rows */
.wl-mini { width:30px; height:30px; padding:0; justify-content:center; border-radius:8px; }
.wl-mini span { display:none; }

/* nav saved badge */
.nav-link .wl-pill { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; margin-left:6px; border-radius:9px; background:var(--accent); color:#fff; font-size:10.5px;
  font-weight:600; font-variant-numeric:tabular-nums; vertical-align:middle; }

/* ===== managers list ===== */
.mgr-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }
@media (max-width:760px){ .mgr-grid { grid-template-columns:1fr; } }
.mgr-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:24px 26px; text-decoration:none; color:var(--text);
  transition:border-color .15s, transform .15s, box-shadow .15s; }
.mgr-card:hover { border-color:var(--border-strong); transform:translateY(-2px); box-shadow:0 14px 38px -24px rgba(26,26,24,.4); }
.mgr-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.mgr-card h3 { font-family:var(--font-head); font-size:20px; letter-spacing:-.015em; margin:0; }
.mgr-card .mgr-since { font-size:12px; color:var(--faint); margin-top:3px; }
.mgr-card .mgr-style { font-size:13.5px; color:var(--muted); line-height:1.55; margin:14px 0 0; text-wrap:pretty; }
.mgr-card-stats { display:flex; gap:22px; margin:18px 0 0; padding-top:16px; border-top:1px solid var(--border); }
.mgr-card-stats .v { font-family:var(--font-head); font-size:20px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.mgr-card-stats .l { font-size:11px; color:var(--muted); margin-top:3px; }
.mgr-rank { font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }

/* fund mini-list (on manager + watchlist + related) */
.fmini-list { display:flex; flex-direction:column; }
.fmini { display:grid; grid-template-columns: 1fr auto auto auto; gap:16px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--border); text-decoration:none; color:var(--text); }
.fmini:last-child { border-bottom:0; }
.fmini:hover .fmini-name { color:var(--accent); }
.fmini-name { font-size:14px; font-weight:500; letter-spacing:-.005em; }
.fmini-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.fmini-aum { font-size:13.5px; font-variant-numeric:tabular-nums; color:var(--text); text-align:right; }
.fmini-aum small { color:var(--faint); }

/* ===== changelog ===== */
.cl-wrap { max-width:760px; }
.cl-filters { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 24px; }
.cl-day { margin:0 0 8px; }
.cl-date { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-weight:600;
  padding:18px 0 12px; position:sticky; top:64px; background:var(--bg); }
.cl-item { display:grid; grid-template-columns: 130px 1fr; gap:18px; padding:14px 0; border-top:1px solid var(--border); }
@media (max-width:600px){ .cl-item { grid-template-columns:1fr; gap:6px; } }
.cl-kind { display:inline-flex; align-items:center; height:fit-content; gap:7px; font-size:11.5px; font-weight:600;
  padding:4px 10px; border-radius:6px; width:fit-content; }
.cl-kind.k-new { background:var(--pos-bg); color:var(--pos-fg); }
.cl-kind.k-status { background:var(--accent-soft,#eef2ff); color:var(--accent); }
.cl-kind.k-aum { background:var(--warn-bg); color:var(--warn-fg); }
.cl-kind.k-other { background:#f1f0ec; color:var(--muted); }
.cl-body { font-size:14px; line-height:1.5; color:var(--text); }
.cl-body a { color:var(--accent); font-weight:500; }
.cl-body .cl-meta { font-size:12.5px; color:var(--muted); margin-top:3px; }

/* empty state */
.empty-state { text-align:center; padding:60px 20px; }
.empty-state .es-ico { width:48px; height:48px; border-radius:12px; background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--faint); }
.empty-state h3 { font-family:var(--font-head); font-size:19px; margin:0 0 8px; }
.empty-state p { font-size:14px; color:var(--muted); max-width:38ch; margin:0 auto 20px; line-height:1.5; }

/* responsive */
@media (max-width:900px){
  .dbody { grid-template-columns:1fr; }
  .dside { position:static; }
  .dstat-row { grid-template-columns:1fr 1fr; }
  .dstat:nth-child(3) { border-left:0; }
  .dstat:nth-child(n+3) { border-top:1px solid var(--border); }
}
@media (max-width:640px){
  .dhero { grid-template-columns:1fr; }
  .dhero-r { align-items:flex-start; }
  .dhero-actions { justify-content:flex-start; }
  .dhero h1 { font-size:27px; }
}