/* Portfolio simulator — page-local styles.
   Palette is deliberately cooler than the shop's product pages: this is a
   measurement surface, not a sales surface. */
:root{
  --pf-bg:#f2f5f6; --pf-surface:#ffffff; --pf-surface2:#eaf0f1; --pf-surface3:#dfe8ea;
  --pf-ink:#132228; --pf-mid:#55676e; --pf-dim:#7b8f96;
  --pf-line:#d7e0e2; --pf-line2:#bfcdd0;
  --pf-accent:#0089a0; --pf-accent-fill:rgba(0,137,160,.13); --pf-on-accent:#ffffff;
  --pf-warn:#bc5a1c; --pf-warn-fill:rgba(188,90,28,.14);
  --pf-good:#2f7a50;
  --pf-shadow:0 1px 2px rgba(19,34,40,.05),0 10px 28px -14px rgba(19,34,40,.16);
  /* correlation heat steps, low->high |r| */
  --h1:#eaf4f5; --h2:#bedfe3; --h3:#8ac7cf; --h4:#4fa5b3; --h5:#1b7a8c; --h6:#075a6b;
}
.pf-hero,.pf-section,.pf-disclaimer{background:var(--pf-bg);color:var(--pf-ink)}
.pf-alt{background:var(--pf-surface2)}
.pf-hero .wrap,.pf-section .wrap,.pf-disclaimer .wrap{max-width:1080px;margin:0 auto;padding-left:20px;padding-right:20px}

.pf-hero{padding:56px 0 44px;border-bottom:1px solid var(--pf-line)}
.pf-hero .eyebrow{margin:0;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--pf-accent)}
.pf-hero h1{margin:14px 0 0;font-size:clamp(26px,4.4vw,40px);line-height:1.34;
  letter-spacing:-.02em;font-weight:800;text-wrap:balance}
.pf-hero h1 span{color:var(--pf-accent)}
.pf-hero .lead{margin:16px 0 0;max-width:62ch;color:var(--pf-mid);font-size:15.5px;line-height:1.85}
.pf-herostats{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.pf-herostats div{background:var(--pf-surface);border:1px solid var(--pf-line);border-radius:12px;
  padding:11px 16px;min-width:132px}
.pf-herostats dt{margin:0;font-size:10.5px;letter-spacing:.1em;color:var(--pf-dim);font-weight:700}
.pf-herostats dd{margin:4px 0 0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.pf-note{margin:22px 0 0;max-width:66ch;font-size:12.5px;line-height:1.85;color:var(--pf-mid);
  border-left:3px solid var(--pf-line2);padding-left:14px}
.pf-note strong{color:var(--pf-ink)}

.pf-section{padding:52px 0}
.pf-h2{margin:0;font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.45}
.pf-sub{margin:12px 0 0;max-width:66ch;color:var(--pf-mid);font-size:14.5px;line-height:1.85}
.pf-cap{margin:16px 0 0;max-width:70ch;color:var(--pf-dim);font-size:12.5px;line-height:1.85}
.pf-cap strong{color:var(--pf-mid)}

.pf-panel{margin-top:24px;background:var(--pf-surface);border:1px solid var(--pf-line);
  border-radius:18px;padding:22px;box-shadow:var(--pf-shadow)}
@media(max-width:600px){.pf-panel{padding:16px;border-radius:14px}}

/* Selecting EAs and reading the chart used to be two separate scroll
   positions in one long column -- picking a combo meant scrolling down to
   see it, then back up to change it. From 860px up there's room to put the
   picker beside the results and pin it in view; below that, the picker
   sticks to the top of the viewport instead so it's still one tap away
   without permanently occupying most of a phone screen. Both stick under
   the shop's own sticky site header (65px, see .sl-site-header), not the
   viewport edge, or the header would cover the top chip row. */
.pf-results{min-width:0}
@media(min-width:860px){
  .pf-panel{display:grid;grid-template-columns:minmax(240px,290px) 1fr;gap:28px;align-items:start}
  .pf-selectbar{position:sticky;top:81px;max-height:calc(100vh - 97px);overflow-y:auto;
    padding-right:4px;margin-right:-4px}
  .pf-chips{flex-direction:column}
  .pf-chip{width:100%}
}
@media(max-width:859px){
  .pf-selectbar{position:sticky;top:65px;z-index:12;margin:0 -16px;padding:12px 16px 10px;
    background:var(--pf-surface);border-bottom:1px solid var(--pf-line);
    box-shadow:0 8px 16px -12px rgba(19,34,40,.18)}
}

.pf-chips{display:flex;flex-wrap:wrap;gap:9px}
.pf-chip{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:11px 16px;border-radius:12px;border:1px solid var(--pf-line2);
  background:var(--pf-surface2);color:var(--pf-mid);cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:800;line-height:1.35;text-align:left;
  transition:border-color .12s}
.pf-chip span.n{font-size:10px;font-weight:700;letter-spacing:.08em;opacity:.85}
.pf-chip span.f{font-size:9.5px;font-weight:800;letter-spacing:.05em;color:var(--pf-warn);
  background:rgba(188,90,28,.12);border-radius:5px;padding:2px 6px;margin-top:3px}
.pf-chip[aria-pressed="true"] span.f{color:#fff;background:rgba(255,255,255,.22)}
.pf-chip[aria-pressed="true"]{background:var(--pf-accent);border-color:var(--pf-accent);color:var(--pf-on-accent)}
.pf-chip.has-flag{border-style:dashed}
.pf-chip:hover{border-color:var(--pf-accent)}

.pf-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--pf-line)}
.pf-toollab{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--pf-dim)}
.pf-seg{display:inline-flex;border:1px solid var(--pf-line2);border-radius:10px;overflow:hidden}
.pf-seg button{border:0;background:var(--pf-surface2);color:var(--pf-mid);cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 14px;line-height:1.4}
.pf-seg button[aria-pressed="true"]{background:var(--pf-accent);color:var(--pf-on-accent)}
.pf-toolnote{font-size:11.5px;color:var(--pf-dim);line-height:1.7;flex:1 1 220px;overflow-wrap:anywhere}

.pf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--pf-line);border:1px solid var(--pf-line);border-radius:14px;
  overflow:hidden;margin-top:20px}
.pf-stat{background:var(--pf-surface);padding:14px 16px}
.pf-stat .k{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--pf-dim)}
.pf-stat .v{margin-top:6px;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  font-variant-numeric:tabular-nums}
.pf-stat .v.a{color:var(--pf-accent)} .pf-stat .v.w{color:var(--pf-warn)}
.pf-stat .s{margin-top:3px;font-size:10.5px;color:var(--pf-dim);line-height:1.6}

.pf-plot{margin-top:22px}
.pf-plotlab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-bottom:8px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--pf-dim)}
.pf-plot svg{display:block;width:100%;height:auto}
.pf-gl{stroke:var(--pf-line);stroke-width:1}
.pf-ax{fill:var(--pf-dim);font-size:10px;font-weight:700}
.pf-base{stroke:var(--pf-line2);stroke-width:1}
.pf-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pf-line.cum{stroke:var(--pf-accent)} .pf-line.uw{stroke:var(--pf-warn)}
.pf-area.cum{fill:var(--pf-accent-fill)} .pf-area.uw{fill:var(--pf-warn-fill)}
.pf-dot{stroke:var(--pf-surface);stroke-width:2}
.pf-dot.cum{fill:var(--pf-accent)} .pf-dot.uw{fill:var(--pf-warn)}
.pf-cross{stroke:var(--pf-dim);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.pf-cross.on{opacity:1}
.pf-hit{fill:transparent;cursor:crosshair}

.pf-msg{margin-top:16px;padding:13px 17px;border-radius:0 12px 12px 0;font-size:13px;
  line-height:1.8;color:var(--pf-mid);border-left:3px solid var(--pf-accent);background:var(--pf-accent-fill)}
.pf-msg strong{color:var(--pf-ink)}
.pf-empty{padding:48px 20px;text-align:center;color:var(--pf-dim);font-size:14px}

.pf-tablewrap{overflow-x:auto;margin-top:22px;border:1px solid var(--pf-line);
  border-radius:14px;background:var(--pf-surface)}
.pf-table{border-collapse:collapse;width:100%;min-width:620px;font-size:13.5px}
.pf-table th,.pf-table td{padding:11px 14px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--pf-line)}
.pf-table th{font-size:10.5px;letter-spacing:.08em;color:var(--pf-dim);font-weight:800;
  background:var(--pf-surface2)}
.pf-table td:first-child,.pf-table th:first-child{text-align:left}
.pf-table td{font-variant-numeric:tabular-nums}
.pf-table tbody tr:last-child td{border-bottom:0}
.pf-table tr.tot td{background:var(--pf-surface2);font-weight:800}

.pf-corrwrap{overflow-x:auto;margin-top:22px;border:1px solid var(--pf-line);
  border-radius:14px;background:var(--pf-surface);padding:18px}
.pf-heat{border-collapse:separate;border-spacing:2px;min-width:560px;width:100%}
.pf-heat th{border:0;text-align:center;padding:4px 2px;font-size:10px;font-weight:800;color:var(--pf-mid)}
.pf-heat th.row{text-align:right;padding-right:8px;width:58px}
.pf-heat td{border:0;padding:0}
.pf-hcell{display:flex;align-items:center;justify-content:center;height:42px;border-radius:6px;
  font-size:12px;font-weight:700;color:var(--pf-ink);font-variant-numeric:tabular-nums;
  outline:2px solid transparent;outline-offset:-2px}
.pf-hcell:hover{outline-color:var(--pf-ink)}
.pf-hself{background:var(--pf-surface2)!important;color:var(--pf-dim)}
.pf-heatlegend{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;color:var(--pf-dim)}
.pf-heatsw{display:flex;gap:2px}
.pf-heatsw span{width:28px;height:10px;border-radius:1px}

.pf-msg-warn{border-left-color:var(--pf-warn);background:var(--pf-warn-fill)}
.pf-rowflag{color:var(--pf-warn);font-weight:800}

.pf-limits{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.pf-limits li{position:relative;padding-left:22px;color:var(--pf-mid);font-size:14px;line-height:1.85}
.pf-limits li::before{content:"";position:absolute;left:2px;top:.78em;width:9px;height:2px;
  background:var(--pf-accent);border-radius:1px}
.pf-limits li strong{color:var(--pf-ink);font-weight:800}
.pf-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

.pf-disclaimer{padding:32px 0 48px;border-top:1px solid var(--pf-line)}
.pf-disclaimer p{margin:0;font-size:12px;line-height:1.9;color:var(--pf-dim);overflow-wrap:anywhere}
.pf-disclaimer p+p{margin-top:8px}
.pf-disclaimer strong{color:var(--pf-mid)}

.pf-tip{position:fixed;pointer-events:none;z-index:60;background:var(--pf-ink);color:#fff;
  padding:8px 11px;border-radius:8px;font-size:11.5px;line-height:1.6;white-space:nowrap;
  opacity:0;transition:opacity .1s;box-shadow:0 8px 24px rgba(0,0,0,.28);
  font-variant-numeric:tabular-nums}
.pf-tip.on{opacity:1}

@media (prefers-reduced-motion:reduce){.pf-chip,.pf-tip{transition:none}}
.pf-chip:focus-visible,.pf-seg button:focus-visible{outline:2px solid var(--pf-accent);outline-offset:2px}