/* PPLI.com for advisors — the instrument layer.
 *
 * Everything here belongs to the four things that turn the simulator from a
 * demonstration into a tool an adviser would actually use in front of a client:
 * a second scenario held beside the first, a sheet that leaves the browser, a
 * route to the assumptions, and an honest account of where a saved run lives.
 *
 * The print rules at the bottom are the part most often skipped and most often
 * noticed. A page that prints as a screenshot of a website tells a client what
 * kind of firm they are dealing with.
 */

/* ==========================================================================
   1. The toolbar.
   ========================================================================== */

.pp.adv .advx-simbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}

.pp.adv .advx-simbtn{font-family:inherit;font-size:8.5px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:700;padding:11px 16px;line-height:1;
  background:transparent;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.2);
  cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pp.adv .advx-simbtn:hover{border-color:var(--a-gd);color:var(--a-gd);background:rgba(176,149,72,.09)}
.pp.adv .advx-simbtn:focus-visible{outline:2px solid var(--a-gd);outline-offset:2px}
.pp.adv .advx-simbtn.on{border-color:var(--a-gd);background:var(--a-gd);color:var(--a-nv)}

.pp.adv .advx-simnote{flex:1 1 100%;margin-top:6px;font-size:11.5px;line-height:1.75;
  color:rgba(255,255,255,.52)}
.pp.adv .advx-simnote:empty{display:none}
.pp.adv .advx-simnote a{color:var(--a-gd);border-bottom:1px solid rgba(176,149,72,.4)}
.pp.adv .advx-simnote a:hover{border-bottom-color:var(--a-gd)}
.pp.adv .advx-simnote b{color:rgba(255,255,255,.8)}

/* ==========================================================================
   2. Two scenarios, one basis.

   The column that matters is the last one. An adviser does not need to be told
   what each scenario is worth; they need to be told what changed.
   ========================================================================== */

.pp.adv .advx-cmp{margin-top:18px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.03)}
.pp.adv .advx-cmp-h{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.1);
  font-size:8px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--a-gd)}
.pp.adv .advx-cmplink{font-family:inherit;font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.42);background:none;border:none;cursor:pointer;padding:0}
.pp.adv .advx-cmplink:hover{color:#fff}

.pp.adv .advx-cmp table{width:100%;border-collapse:collapse}
.pp.adv .advx-cmp th{font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.4);text-align:right;padding:9px 15px;
  border-bottom:1px solid rgba(255,255,255,.09)}
.pp.adv .advx-cmp th:first-child{text-align:left;width:40%}
.pp.adv .advx-cmp td{padding:9px 15px;font-size:12.5px;color:rgba(255,255,255,.82);text-align:right;
  border-top:1px solid rgba(255,255,255,.06);font-variant-numeric:tabular-nums lining-nums}
.pp.adv .advx-cmp td:first-child{text-align:left;color:rgba(255,255,255,.55);font-size:11.5px}
.pp.adv .advx-cmp td.d{color:var(--a-gd);font-weight:600}

/* The methodology, when you have just asked to see it. */
.pp.adv .advx-flash{animation:advxFlash 1.6s ease-out 1}
@keyframes advxFlash{
  0%{box-shadow:0 0 0 0 rgba(176,149,72,0)}
  18%{box-shadow:0 0 0 3px rgba(176,149,72,.45)}
  100%{box-shadow:0 0 0 0 rgba(176,149,72,0)}
}
@media(prefers-reduced-motion:reduce){.pp.adv .advx-flash{animation:none;outline:2px solid var(--a-gd)}}

@media(max-width:600px){
  .pp.adv .advx-simbtn{flex:1 1 calc(50% - 4px);text-align:center;padding:11px 8px}
  .pp.adv .advx-cmp th:first-child{width:34%}
  .pp.adv .advx-cmp td,.pp.adv .advx-cmp th{padding-left:10px;padding-right:10px}
}

/* ==========================================================================
   3. The sheet that leaves the browser.

   Hidden on screen, and the only thing on the page when the page is printed.
   Set in the same two faces as everything else, in black on white, with the
   assumptions beside the result so a reader can check one against the other
   without turning back a page.
   ========================================================================== */

.advx-print{display:none}

@media print{
  body *{visibility:hidden!important}
  .advx-print,.advx-print *{visibility:visible!important}
  .advx-print{display:block!important;position:absolute!important;left:0;top:0;width:100%;
    padding:0 6mm;color:#111;background:#fff;
    font-family:'DM Sans',system-ui,-apple-system,sans-serif;font-size:9.5pt;line-height:1.55}

  .advx-print-h{border-bottom:1.5pt solid #B09548;padding-bottom:6pt;margin-bottom:14pt}
  .advx-print-m{font-family:'Cormorant Garamond',Georgia,serif;font-size:19pt;line-height:1;color:#0A0F17}
  .advx-print-t{font-family:'Cormorant Garamond',Georgia,serif;font-size:15pt;line-height:1.15;
    color:#0A0F17;margin-top:5pt}
  .advx-print-d{font-size:7.5pt;letter-spacing:.14em;text-transform:uppercase;color:#6b6862;margin-top:5pt}

  .advx-print-cols{display:flex;gap:16pt;align-items:flex-start}
  .advx-print-cols > div{flex:1 1 0;min-width:0}

  .advx-print h3{font-family:'DM Sans',system-ui,sans-serif;font-size:7.5pt;letter-spacing:.18em;
    text-transform:uppercase;font-weight:700;color:#B09548;margin:0 0 6pt;
    border-bottom:.5pt solid #ddd9d0;padding-bottom:3pt}
  .advx-print h3 + p,.advx-print h3 + table{margin-top:0}
  .advx-print > h3{margin-top:14pt}

  .advx-print table{width:100%;border-collapse:collapse}
  .advx-print td{padding:3pt 0;border-bottom:.5pt solid #efede6;vertical-align:top;font-size:9pt}
  .advx-print td:last-child{text-align:right;font-variant-numeric:tabular-nums lining-nums;
    white-space:nowrap;padding-left:8pt;color:#0A0F17}
  .advx-print td:first-child{color:#5a5850}

  .advx-print p{margin:6pt 0 0;font-size:9pt;line-height:1.6;color:#2a2822}
  .advx-print-f{margin-top:16pt!important;padding-top:7pt;border-top:.5pt solid #ddd9d0;
    font-size:7.5pt!important;line-height:1.55;color:#6b6862}

  @page{margin:14mm 12mm}
}