/* ---- /tools/portfolio/ (29 Oct 2026) ---------------------------------------
   The portfolio valuation tool: the holdings box, the side and date controls,
   the Terms tick box, the results table with totals per currency, and the
   statement buttons. Everything else (shell, type, colours) is learn.css. */
.pf-form{ margin:18px 0 22px; padding:16px 18px 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg2) }
.pf-form h2{ margin:0 0 10px; font-size:17px }
.pf-label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px }
.pf-in{ width:100%; box-sizing:border-box; padding:10px 12px; font-family:var(--mono); font-size:13.5px; line-height:1.5;
        color:var(--text-strong); background:var(--bg); border:1px solid var(--border); border-radius:8px; resize:vertical; min-height:120px }
.pf-in:focus{ outline:none; border-color:var(--accent) }
.pf-hint{ margin:6px 0 0; font-size:12px; color:var(--text-dim) }
.pf-load{ margin:8px 0 0; font-size:13px; color:var(--text-mid); display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center }
.pf-file input{ font-size:12px; margin-left:6px }
.pf-link{ background:none; border:0; padding:0; font:inherit; color:var(--accent); cursor:pointer; text-decoration:underline }
.pf-ctl{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:flex-end; margin:14px 0 4px }
.pf-side{ border:0; padding:0; margin:0; display:flex; gap:14px; align-items:center }
.pf-side legend{ float:left; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-right:4px; padding:0 }
.pf-side label{ font-size:14px; color:var(--text-strong); cursor:pointer }
.pf-asof label{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-right:6px }
.pf-asof input{ font:inherit; font-size:14px; padding:6px 8px; color:var(--text-strong); background:var(--bg); border:1px solid var(--border); border-radius:6px }
.pf-asof .pf-hint{ display:inline; margin-left:8px }
.pf-terms{ display:flex; gap:8px; align-items:flex-start; margin:14px 0 0; font-size:13.5px; line-height:1.5; color:var(--text-mid) }
.pf-terms input{ margin-top:4px; flex:none }
.pf-go{ margin:14px 0 0; display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.pf-btn{ padding:9px 20px; border:0; border-radius:999px; background:var(--accent); color:var(--on-accent, #fff); font:inherit; font-size:14px; font-weight:700; cursor:pointer }
.pf-btn:disabled{ opacity:.6; cursor:wait }
.pf-btn2{ padding:7px 16px; border:1px solid var(--border); border-radius:999px; background:var(--bg2); color:var(--text-strong); font:inherit; font-size:13px; font-weight:600; cursor:pointer }
.pf-btn2:hover{ border-color:var(--accent) }
.pf-msg{ font-size:13px; color:var(--text-dim) }
.pf-msg.bad{ color:var(--red, #e06c75) }
.pf-res h2 .pf-meta{ font-family:var(--mono); font-size:12px; font-weight:400; color:var(--text-dim); margin-left:8px; letter-spacing:0 }
/* The results run wider than the 760px column: up to 1100px, centred, so eight
   columns fit on a laptop; on a phone the table scrolls sideways. */
.pf-res{ width:min(1100px, calc(100vw - 40px)); margin-left:calc(50% - min(550px, 50vw - 20px)) }
.pf-tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px }
table.pf-t{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums }
table.pf-t th, table.pf-t td{ padding:7px 8px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; white-space:nowrap }
table.pf-t th{ font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); font-weight:600 }
table.pf-t th.num, table.pf-t td.num{ text-align:right }
table.pf-t td small{ display:block; font-size:10.5px; color:var(--text-dim); margin-top:2px }
table.pf-t td.pf-v{ color:var(--text-strong); font-weight:700 }
table.pf-t td.pf-w{ white-space:normal; min-width:160px; font-size:11.5px; color:var(--amber) }
table.pf-t tr.pf-bad td{ color:var(--text-dim) }
.pf-up{ color:var(--green, #3fb950) } .pf-dn{ color:var(--red, #e06c75) }
.pf-tot{ margin:14px 0 0; display:grid; gap:10px }
.pf-sum{ display:grid; grid-template-columns:1fr auto; gap:2px 16px; padding:12px 16px; border:1px solid var(--border); border-radius:10px; background:var(--bg2) }
.pf-sum-k{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim) }
.pf-sum-k small{ text-transform:none; letter-spacing:0 }
.pf-sum-v{ grid-row:1 / span 2; align-self:center; font-family:var(--mono); font-size:22px; font-weight:700; color:var(--text-strong); font-variant-numeric:tabular-nums }
.pf-sum-d{ font-size:12.5px; color:var(--text-mid) }
.pf-dl{ margin:14px 0 0; display:flex; gap:10px; flex-wrap:wrap }
.pf-how{ font-size:13.5px; line-height:1.6; color:var(--text-mid) }
.pf-ind{ font-size:12.5px; line-height:1.6; color:var(--text-dim) }
@media (max-width:640px){ .pf-res{ width:auto; margin-left:0 } }
@media (max-width:600px){ .pf-ctl{ gap:10px 18px } .pf-sum{ grid-template-columns:1fr } .pf-sum-v{ grid-row:auto } }
.pf-savebox{ margin:16px 0 0; padding:12px 16px; border-radius:10px; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
             background:color-mix(in srgb, var(--amber) 7%, var(--bg2)); border:1px solid color-mix(in srgb, var(--amber) 40%, var(--border)) }
.pf-save-t{ flex:1 1 320px; margin:0; font-size:13.5px; line-height:1.5; color:var(--text-mid) }