/* portfolio.css — shared styling for the free member portfolio tracker:
   /portfolio (stats dashboard) + /portfolio/update (editor). Dark, self-contained. */
:root{--pf-bg:#04060a;--pf-panel:#0b101c;--pf-line:rgba(156,180,255,.14);--pf-text:#eaf1ff;
  --pf-dim:rgba(226,236,255,.62);--pf-cyan:#44f1ff;--pf-pos:#2fd08a;--pf-neg:#ff6b7d;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}
.pf-body{margin:0;background:radial-gradient(1100px 560px at 50% -12%,#0a1226 0,var(--pf-bg) 62%);
  color:var(--pf-text);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;min-height:100dvh}
.pf-body a{color:inherit;text-decoration:none}
.pf-wrap{max-width:1080px;margin:0 auto;padding:22px 18px 64px}
.pos{color:var(--pf-pos)}.neg{color:var(--pf-neg)}.flat{color:#8f9bb0}

/* Signed-out gate */
.pf-gate{max-width:560px;margin:8vh auto;text-align:center}
.pf-gate h1{font-size:clamp(26px,5vw,34px);margin:0 0 12px;letter-spacing:-.01em}
.pf-gate p{color:var(--pf-dim);font-size:16px;line-height:1.6;margin:0 auto 26px;max-width:440px}
/* a.pf-cta (not .pf-cta) outranks `.pf-body a{color:inherit}` → text stays BLACK on cyan */
a.pf-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--pf-cyan),#2fd0e6);color:#000;
  font-weight:800;font-size:15px;padding:13px 26px;border-radius:11px;box-shadow:0 10px 28px rgba(68,241,255,.24)}
a.pf-cta:hover{filter:brightness(1.05)}

/* Header row */
.pf-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 18px}
.pf-h h1{font-size:clamp(22px,4.4vw,28px);margin:2px 0 0;letter-spacing:-.01em}
.pf-back{display:inline-block;font-size:13px;color:var(--pf-dim);font-weight:600}
.pf-back:hover{color:var(--pf-cyan)}

/* Buttons */
.pf-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;border:0;border-radius:10px;cursor:pointer;
  font:inherit;font-weight:800;font-size:14px;background:linear-gradient(135deg,var(--pf-cyan),#2fd0e6);color:#000;white-space:nowrap}
/* a.pf-btn outranks `.pf-body a{color:inherit}` so a link-styled cyan button keeps
   BLACK text (e.g. "Update Portfolio"). Ghost buttons stay light via .pf-btn.ghost. */
a.pf-btn{color:#000}
.pf-btn:hover{filter:brightness(1.05)}
.pf-btn.ghost{background:rgba(156,180,255,.06);border:1px solid var(--pf-line);color:var(--pf-text);font-weight:700}
.pf-btn.sm{height:32px;padding:0 12px;font-size:12.5px}

/* Stat cards */
.pf-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
@media(max-width:720px){.pf-totals{grid-template-columns:repeat(2,1fr)}}
.pf-card{background:var(--pf-panel);border:1px solid var(--pf-line);border-radius:14px;padding:14px 16px}
.pf-card .k{font-size:12px;color:var(--pf-dim);font-weight:600}
.pf-card .v{margin-top:6px;font:800 clamp(20px,4vw,26px)/1 var(--mono);letter-spacing:-.01em}
.pf-card .s{margin-top:4px;font:700 13px/1 var(--mono)}

/* Section panel */
.pf-panel{background:var(--pf-panel);border:1px solid var(--pf-line);border-radius:14px;padding:16px 18px;margin-bottom:16px}
.pf-panel h2{margin:0 0 12px;font-size:15px}
.pf-panel .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.pf-panel .hd h2{margin:0}

/* Performance chart */
#pfChart{width:100%;height:300px}
@media(max-width:640px){#pfChart{height:230px}}

/* Insight cards (best / worst / top holding) */
.pf-ins{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
@media(max-width:720px){.pf-ins{grid-template-columns:1fr}}
.pf-ins .k{font-size:12px;color:var(--pf-dim);font-weight:600}
.pf-ins .tk{margin-top:8px;font:800 18px/1 var(--mono)}
.pf-ins .nm{margin-top:3px;font-size:12px;color:var(--pf-dim)}
.pf-ins .p{margin-top:8px;font:800 16px/1 var(--mono)}

/* Allocation bars */
.pf-alloc-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(156,180,255,.07)}
.pf-alloc-row:last-child{border-bottom:0}
.pf-alloc-tk{flex:0 0 90px;font:800 13px/1 var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-alloc-track{flex:1 1 auto;height:9px;background:rgba(156,180,255,.08);border-radius:99px;overflow:hidden}
.pf-alloc-fill{height:100%;background:linear-gradient(90deg,var(--pf-cyan),#2fd0e6);border-radius:99px}
.pf-alloc-w{flex:0 0 84px;text-align:right;font:700 13px/1 var(--mono);color:var(--pf-dim)}

/* Add form (editor) */
.pf-add{background:var(--pf-panel);border:1px solid var(--pf-line);border-radius:14px;padding:16px;margin-bottom:18px}
.pf-add h2{margin:0 0 12px;font-size:15px}
.pf-addgrid{display:grid;grid-template-columns:1.6fr .8fr .9fr 1fr auto;gap:10px;align-items:end}
@media(max-width:760px){.pf-addgrid{grid-template-columns:1fr 1fr}}
.pf-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.pf-field label{font-size:11px;color:var(--pf-dim);font-weight:600}
.pf-input{height:42px;background:rgba(156,180,255,.06);border:1px solid var(--pf-line);border-radius:10px;
  padding:0 12px;color:var(--pf-text);font:inherit;font-size:14px;outline:0;min-width:0;width:100%}
.pf-input:focus{border-color:var(--pf-cyan)}
.pf-ac{position:relative}
.pf-aclist{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;background:#0a1322;border:1px solid var(--pf-line);
  border-radius:10px;max-height:280px;overflow:auto;display:none;box-shadow:0 22px 60px rgba(0,0,0,.5)}
.pf-aclist.open{display:block}
.pf-acitem{padding:10px 12px;cursor:pointer;border-bottom:1px solid rgba(156,180,255,.08)}
.pf-acitem:hover,.pf-acitem.hl{background:rgba(68,241,255,.07)}
.pf-acitem b{font-family:var(--mono)}
.pf-acitem small{display:block;color:var(--pf-dim);font-size:12px}
.pf-bound{font-size:12px;color:var(--pf-pos);min-height:15px;margin-top:2px}
.pf-flash{margin-top:10px}
.pf-flash .ok{color:var(--pf-pos)}.pf-flash .err{color:var(--pf-neg)}

/* Holdings table */
.pf-tablewrap{background:var(--pf-panel);border:1px solid var(--pf-line);border-radius:14px;overflow:hidden}
.pf-tablescroll{overflow-x:auto}
table.pf-t{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.pf-t th,.pf-t td{text-align:right;padding:12px 14px;border-bottom:1px solid rgba(156,180,255,.08);white-space:nowrap}
.pf-t th{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--pf-dim);font-weight:700}
.pf-t th:first-child,.pf-t td:first-child{text-align:left}
.pf-t tbody tr:last-child td{border-bottom:0}
.pf-t tbody tr:hover{background:rgba(156,180,255,.03)}
.pf-tk{font-weight:800;font-family:var(--mono)}
.pf-nm{font-size:12px;color:var(--pf-dim);font-weight:500}
.pf-acts{display:inline-flex;gap:6px}
.pf-empty{padding:34px 16px;text-align:center;color:var(--pf-dim);font-size:14px}

/* Modal */
.pf-scrim{position:fixed;inset:0;background:#0009;z-index:80;display:none}.pf-scrim.open{display:block}
.pf-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:90;width:min(560px,94vw);
  background:var(--pf-panel);border:1px solid var(--pf-line);border-radius:16px;padding:20px;display:none;max-height:90vh;overflow:auto}
.pf-modal.open{display:block}
.pf-modal h3{margin:0 0 12px;font-size:17px}
.pf-modal label{display:block;font-size:11px;color:var(--pf-dim);font-weight:600;margin:10px 0 4px}
.txn-pill{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:800}
.txn-pill.buy{background:rgba(47,208,138,.16);color:var(--pf-pos)}
.txn-pill.sell{background:rgba(255,107,125,.16);color:var(--pf-neg)}

/* ── Seamless on phones: reflow the editor holdings table into stacked cards, so
   nothing is ever cut off at the edge (no reliance on horizontal scroll). ──────── */
@media(max-width:640px){
  .pf-wrap{padding:18px 14px 56px}
  .pf-h{flex-direction:column;align-items:stretch;gap:10px}
  .pf-h .pf-btn,.pf-h a.pf-btn{width:100%;justify-content:center}
  /* Add form → single-column stack */
  .pf-addgrid{grid-template-columns:1fr}
  /* Holdings table → one card per holding */
  table.pf-t{min-width:0}
  .pf-tablescroll{overflow-x:visible}
  .pf-t thead{display:none}
  .pf-t,.pf-t tbody{display:block}
  .pf-t tr{display:block;padding:14px 16px;border-bottom:1px solid rgba(156,180,255,.1)}
  .pf-t tbody tr:last-child{border-bottom:0}
  .pf-t td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-align:right;padding:5px 0;border:0;white-space:normal}
  .pf-t td::before{content:attr(data-l);color:var(--pf-dim);font-size:12px;font-weight:600;text-align:left;flex:0 0 auto}
  .pf-t td[data-l=""]::before{content:none}
  .pf-t td:first-child{display:block;text-align:left;padding:0 0 9px;margin-bottom:5px;border-bottom:1px solid rgba(156,180,255,.08)}
  .pf-t td:last-child{padding-top:11px}
  .pf-acts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%}
  .pf-acts .pf-btn{width:100%}
  /* Allocation: tighter so the % never wraps off-screen */
  .pf-alloc-tk{flex-basis:66px}
  .pf-alloc-w{flex-basis:auto;font-size:12px}
}
@media(max-width:400px){ .pf-acts{grid-template-columns:1fr} }