/* Adviser guides: full-width tool pages (/adviser-guides/portfolio-mix) and the
   call-to-action box a guide uses to open one. Prefix tp-. Tokens only, square
   corners, First Light the one colour. The tool's own layout lives with the tool
   (mix.css for the mix simulator). */

.tp{padding:32px var(--pad) 96px;min-width:0}
.tp-head{padding:4px 0 26px;border-bottom:1px solid var(--border);margin-bottom:28px}
.tp-head .gd-kicker a{color:inherit;text-decoration:none}
.tp-head .gd-kicker a:hover{text-decoration:underline;text-underline-offset:3px}
.tp-head h1{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(32px,3.6vw,48px);line-height:.98;margin:0 0 14px}
.tp-head .gd-dek{font-size:17px;line-height:25px;color:var(--muted);margin:0 0 18px;max-width:52rem}
.tp-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.tp-back{font-family:var(--font-mono);font-size:12px;line-height:18px;letter-spacing:.04em;color:var(--text);
  text-decoration:none;border-bottom:1px solid var(--border-2);padding-bottom:2px}
.tp-back:hover{border-bottom-color:var(--accent)}
.tp-back:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

/* Sources and disclaimer under the tool, on the reading measure, left-aligned. */
.tp .tp-foot{max-width:52rem;margin:0;padding-top:0}
.tp .tp-foot .fnotes{margin-top:36px}

/* In a guide: the box that opens a tool in a new tab. */
.lf-body .callout.tp-cta{display:grid;gap:10px;justify-items:start;margin:28px 0 36px}
.lf-body .callout.tp-cta h4{margin:0}
.lf-body .callout.tp-cta p{color:var(--muted)}
.lf-body .callout.tp-cta .btn{margin-top:6px;text-decoration:none}
.tp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media print{
  .tp-links{display:none!important}
}

/* Tools index */
.tl-index .gd-tools-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
@media (min-width:1100px){.tl-index .gd-tools-grid{grid-template-columns:repeat(3,1fr)}}

/* A calculator on its own page (esvclp-tax-calculator, fees-and-carry-calculator,
   diversification-simulator, commitment-planner, reforms-timeline). The same
   .af-calc box as in a guide, without its head: the page h1 names the tool.
   One column on a phone; from 1100px the inputs sit left and the results right,
   as on the portfolio mix simulator. */
.tp-tool.af-fig{margin:0}
.tp-tool .af-plot.tp-grid{border-top:1px solid var(--border);padding:24px 26px 28px;overflow:visible;
  display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.tp-tool .tp-in,.tp-tool .tp-out{min-width:0}
.tp-tool .tp-out{margin-top:26px;padding-top:24px;border-top:1px solid var(--border)}
.tp-tool .tp-how{font-size:14px;line-height:21px;color:var(--muted-2);margin:0 0 20px;max-width:60ch}
.tp-tool .tp-ill{font-size:13px;line-height:19px;color:var(--muted-2);margin:0 0 16px;padding:8px 12px;
  border-left:2px solid var(--accent);background:var(--surface)}
.tp-tool .tp-ill b{color:var(--text);font-weight:600}
.tp-tool .af-ctrls{margin-bottom:0}
.tp-tool .af-rets,.tp-tool .af-diff{max-width:none}
.tp-tool .af-diff{max-width:62ch}
@media (min-width:1100px){
  .tp-tool .af-plot.tp-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0;padding:28px 32px 32px}
  .tp-tool .tp-in{padding-right:40px}
  .tp-tool .tp-out{margin-top:0;padding-top:0;border-top:0;padding-left:40px;border-left:1px solid var(--border)}
  .tp-tool .tp-in .af-ctrls{grid-template-columns:1fr;gap:26px}
}
@media (max-width:620px){
  .tp-tool .af-plot.tp-grid{padding:20px 18px 24px}
}
/* The reforms timeline needs the full width for its ruler, so it stays one column. */
.tp-tool.tp-tl .af-plot.tp-grid{display:block}
.tp-tool.tp-tl .tp-ill{max-width:52rem}
.tp-tool.tp-tl .ms-details{max-width:52rem}
.tp-tool.tp-hma .af-sched{margin-top:26px}