/*!
 * PPLI.com — Wealth Simulator
 * Additive to xray-1.0.3.css, which supplies the shared panel, table, tile and
 * tooltip primitives. Only what the simulator adds lives here.
 *
 * The .pp prefixes are load-bearing — see the specificity note in the X-Ray
 * stylesheet. Version lives in the filename; this host ignores ?ver.
 *
 * v1.0.0 — 2026-08-30
 */

/* ------------------------------------------------------------ chip rows */
.pp .sm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.pp .sm-chip{border:1px solid var(--rl);background:transparent;color:var(--tx2);font-family:'DM Sans',sans-serif;
	font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:9px 15px;cursor:pointer;
	transition:border-color .25s,color .25s,background .25s}
.pp .sm-chip:hover{border-color:var(--gd);color:var(--gd)}
.pp .sm-chip.on{background:var(--nv);border-color:var(--nv);color:#fff}
.pp .sm-chip.on:hover{color:#fff}

.pp .sm-setup{border:1px solid var(--rl);border-top:2px solid var(--gd);background:#fff;margin:0 0 22px}
.pp .sm-setup-r{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rl)}
.pp .sm-setup-r:last-child{border-bottom:none}
.pp .sm-setup-r > div{padding:20px 24px;border-right:1px solid var(--rl)}
.pp .sm-setup-r > div:last-child{border-right:none}
.pp .sm-setup label{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);font-weight:700;margin:0 0 9px}
.pp .sm-setup input{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:500;color:var(--nv);
	border:none;border-bottom:1px solid var(--rl);background:transparent;padding:2px 0 4px;width:100%;outline:none;
	transition:border-color .25s;-moz-appearance:textfield}
.pp .sm-setup input:focus{border-bottom-color:var(--gd)}
.pp .sm-setup input::-webkit-outer-spin-button,.pp .sm-setup input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pp .sm-pre{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;color:var(--gd)}
.pp .sm-suf{font-size:13px;color:var(--tx3)}
.pp .sm-row2{display:flex;align-items:baseline;gap:6px}
.pp .sm-hint{font-family:'Source Serif 4',Georgia,serif;font-size:12px;line-height:1.6;color:var(--tx3);margin:9px 0 0}
.pp .sm-hint b{color:var(--tx2);font-weight:600}

/* --------------------------------------------------------- second tile row */
.pp .sm-tiles2{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07);margin:1px 0 0}

/* ------------------------------------------------------------- wealth path */
.pp .sm-chart{margin:0;padding:4px 0 0}
.pp .sm-chart svg{display:block;width:100%;height:auto;overflow:visible}
.pp .sm-chart .ln-b{fill:none;stroke:#C7C1B4;stroke-width:1.5}
.pp .sm-chart .ln-n{fill:none;stroke:#B09548;stroke-width:2.5}
.pp .sm-chart .ar-n{fill:rgba(176,149,72,.10);stroke:none}
.pp .sm-chart .gl{stroke:#EFEDE6;stroke-width:1}
.pp .sm-chart .tk{font-family:'DM Sans',sans-serif;font-size:10px;fill:#8A877E}
.pp .sm-key{display:flex;flex-wrap:wrap;gap:20px;margin:14px 0 0;font-size:11.5px;color:var(--tx2)}
.pp .sm-key span{display:inline-flex;align-items:center;gap:8px}
.pp .sm-key i{width:16px;height:2px;display:block}
.pp .sm-key i.b{background:#C7C1B4}
.pp .sm-key i.n{background:var(--gd)}

/* -------------------------------------------------------- liquidity ladder */
.pp .sm-liq{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rl);border:1px solid var(--rl);margin:0 0 20px}
.pp .sm-liq > div{background:#fff;padding:18px 20px}
.pp .sm-liq .k{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);font-weight:700}
.pp .sm-liq .v{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;color:var(--nv);margin:8px 0 4px;font-weight:400}
.pp .sm-liq .s{font-family:'Source Serif 4',Georgia,serif;font-size:12.5px;line-height:1.6;color:var(--tx2)}
.pp .sm-liqbar{display:flex;height:8px;margin:0 0 16px;background:var(--cr2)}
.pp .sm-liqbar i{display:block;height:8px}
.pp .sm-liqbar i.l1{background:var(--gd)}
.pp .sm-liqbar i.l2{background:rgba(176,149,72,.52)}
.pp .sm-liqbar i.l3{background:rgba(10,15,23,.28)}

/* ------------------------------------------------------------------ flags */
.pp .sm-flag{border-top:1px solid var(--rl);padding:16px 0}
.pp .sm-flag:first-child{border-top:none;padding-top:2px}
.pp .sm-flag h4{font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;font-weight:500;color:var(--nv);margin:0 0 5px}
.pp .sm-flag p{font-family:'Source Serif 4',Georgia,serif;font-size:14px;line-height:1.75;color:var(--tx2);margin:0}
.pp .sm-none{font-family:'Source Serif 4',Georgia,serif;font-size:14px;line-height:1.75;color:var(--tx2);margin:0}

/* -------------------------------------------------------------- next steps */
.pp .sm-next{counter-reset:sn}
.pp .sm-next a{display:flex;gap:18px;align-items:baseline;border-top:1px solid var(--rl);padding:17px 0;text-decoration:none;transition:background .25s}
.pp .sm-next a:first-child{border-top:none}
.pp .sm-next a:hover{background:#FCFBF8}
.pp .sm-next a::before{counter-increment:sn;content:counter(sn,decimal-leading-zero);flex:0 0 auto;
	font-family:'DM Sans',sans-serif;font-size:10px;letter-spacing:.14em;color:var(--gd);font-weight:700}
.pp .sm-next .n{flex:1 1 auto;font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;color:var(--nv)}
.pp .sm-next .d{flex:2 1 auto;font-family:'Source Serif 4',Georgia,serif;font-size:13.5px;line-height:1.6;color:var(--tx2)}
.pp .sm-next .a{flex:0 0 auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gd);font-weight:700}

/* ------------------------------------------------------- allocation select */
.pp .sm-sel{font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--tx1);border:none;background:transparent;
	padding:12px 8px;width:100%;outline:none;text-align:right;cursor:pointer;-webkit-appearance:none;appearance:none}
.pp .sm-sel:focus{background:rgba(176,149,72,.09)}

/* --------------------------------------------------------------- responsive */
@media(max-width:900px){
	.pp .sm-tiles2{grid-template-columns:repeat(2,1fr)}
	.pp .sm-setup-r{grid-template-columns:1fr}
	.pp .sm-setup-r > div{border-right:none;border-bottom:1px solid var(--rl)}
	.pp .sm-setup-r > div:last-child{border-bottom:none}
	.pp .sm-liq{grid-template-columns:1fr}
}
@media(max-width:600px){
	.pp .sm-tiles2{grid-template-columns:1fr}
	.pp .sm-chip{font-size:10px;padding:8px 12px}
	.pp .sm-next a{flex-direction:column;gap:5px}
	.pp .sm-next .d{font-size:13px}
	.pp .sm-liq .v{font-size:26px}
}