/* ===== Portfolios page (scoped) ===== */
body.page-portfolio {
  --panel: var(--card);
  --ink: var(--text);
  --muted-local: var(--muted);
  --line: var(--border, #e6e9ee);
  --radius: 16px;
}

/* spacing under global header */
body.page-portfolio .wrap{
  width:min(1100px,92vw);
  margin:0 auto;
  padding-top: clamp(16px, 2.5vw, 32px);
}

body.page-portfolio .hero.panel{
  margin-bottom: 10px;
}
body.page-portfolio .hero h1{
  margin: 6px 0 8px;
  font-size: clamp(26px, 4.6vw, 40px);
}
body.page-portfolio .tag{
  display:inline-block; padding:4px 8px; border-radius:999px;
  border:1px solid var(--line); font-size:12px; color:var(--muted-local);
}

body.page-portfolio:not(.theme-dark):not(.theme-earth) .hero{
  background: none;
}

body.page-portfolio .portfolio-overview{
  margin: 18px 0 24px;
  padding: 20px clamp(18px, 3vw, 28px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
body.page-portfolio .overview-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
body.page-portfolio .overview-head h2{
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
}
body.page-portfolio .overview-head p{
  margin: 0;
  color: var(--muted-local);
}
body.page-portfolio .mega-chart{
  width: 100%;
  height: clamp(240px, 45vw, 320px);
  display: block;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in oklab, var(--panel), #fff 1.5%);
}

/* Grid (2 per row on desktop) */
body.page-portfolio .portfolio-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px){
  body.page-portfolio .portfolio-grid{
     grid-template-columns: 1fr 1fr;
  }
}

/* Card */
body.page-portfolio .p-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  outline: none;
}
body.page-portfolio .p-card:hover{
  transform: translateY(-2px);
}
body.page-portfolio .p-card:focus{
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent), var(--shadow);
}

body.page-portfolio .p-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 8px;
}
body.page-portfolio .p-head h3{
  margin:0; font-size:1.1rem;
}

body.page-portfolio .pill{
  border:1px solid var(--line);
  padding:2px 8px; border-radius:999px; font-size:12px;
  color: var(--muted-local);
}
body.page-portfolio .pill.live{ color: var(--ok); border-color: color-mix(in oklab, var(--ok) 50%, var(--line)); }
body.page-portfolio .pill.experimental{ color: var(--warn); border-color: color-mix(in oklab, var(--warn) 50%, var(--line)); }
body.page-portfolio .pill.membership{ color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }

body.page-portfolio .mini-chart{
  width:100%; height:120px; display:block;
  border:1px solid var(--line); border-radius:12px;
  background: color-mix(in oklab, var(--panel), #fff 1.5%);
  margin-bottom: 10px;
}

/* Facts row */
body.page-portfolio .facts{
  display:flex; gap:8px; flex-wrap:wrap;
  margin: 6px 0 10px;
  padding:0; list-style:none;
}
body.page-portfolio .fact{
  display:grid; gap:2px; padding:8px 10px;
  border:1px solid var(--line); border-radius:12px;
  background: color-mix(in oklab, var(--panel), #fff 3%);
}
body.page-portfolio .fact b{ font-size:1rem; }
body.page-portfolio .fact span{ font-size:12px; color:var(--muted-local); }

/* Preview table (first few rows) */
body.page-portfolio table.preview{
  width:100%; border-collapse:collapse;
  border:1px solid var(--line);
  border-radius:12px; overflow:hidden;
  background: var(--panel);
}
body.page-portfolio table.preview th,
body.page-portfolio table.preview td{
  padding:.55rem .7rem;
  border-bottom:1px solid var(--line);
  font-size: 14px;
}
body.page-portfolio table.preview tr:last-child td{ border-bottom:none; }

body.page-portfolio .p-card.paywall-card{
  display:grid;
  gap:12px;
  cursor:default;
}
body.page-portfolio .p-card.paywall-card .paywall-copy{
  margin:0;
  color:var(--muted-local);
}
body.page-portfolio .p-card.paywall-card .paywall-note{
  margin:0;
  font-size:13px;
  color:var(--muted-local);
}
body.page-portfolio .p-card.paywall-card .paywall-list{
  margin:0;
  padding-left:18px;
  color:var(--muted-local);
}
body.page-portfolio .p-card.paywall-card .paywall-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ===== Modal ===== */
body.page-portfolio .pf-modal{
  position: fixed; inset: 0; z-index: 80;
  display: none;
}
body.page-portfolio .pf-modal.active{ display:block; }

body.page-portfolio .pf-backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,.45);
}

body.page-portfolio .pf-dialog{
  position: relative;
  width: min(1000px, 92vw);
  max-height: 85vh;
  margin: 4vh auto;
  overflow: auto;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

body.page-portfolio .pf-close{
  position: absolute; top: 10px; right: 10px;
}

body.page-portfolio .pf-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 8px;
}

body.page-portfolio .pf-stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:10px;
  margin-bottom: 12px;
}
@media (max-width:700px){
  body.page-portfolio .pf-stats{ grid-template-columns: repeat(2, 1fr); }
}
body.page-portfolio .pf-stats .stat{
  border:1px solid var(--line); border-radius:12px;
  background: color-mix(in oklab, var(--panel), #fff 2.5%);
  padding:10px;
}
body.page-portfolio .pf-stats .stat b{ font-size:1.1rem; }
body.page-portfolio .pf-stats .stat span{ display:block; color:var(--muted-local); font-size:12px; margin-top:2px; }

body.page-portfolio .pf-chart canvas{
  width:100%; height:240px; display:block;
  border:1px solid var(--line); border-radius:12px;
  background: color-mix(in oklab, var(--panel), #fff 1.5%);
  margin-bottom: 14px;
}

body.page-portfolio .pf-notes{
  margin: 14px 0 18px;
}
body.page-portfolio .pf-notes h4{
  margin: 0 0 8px;
}
body.page-portfolio .pf-notes__list{
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted-local);
  display: grid;
  gap: 6px;
}

/* Holdings table (scrollable container) */
body.page-portfolio .pf-table h4{ margin: 6px 0; }
body.page-portfolio .pf-table .scroll{
  max-height: 40vh; overflow:auto;
  border:1px solid var(--line); border-radius:12px;
  background: var(--panel);
}
body.page-portfolio .pf-table .scroll .table{
  border:0; border-radius:0; box-shadow:none;
}