/* THINK Professionals — loan prepayment calculator (13 Nov 2026) */

/* ---------- 30. Loan prepayment calculator ---------- */
.lp-private{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;
  font-family:var(--font-mono);font-size:.78rem!important;letter-spacing:.02em;color:var(--brand-700)!important;
  background:var(--brand-50);border:1px solid var(--brand-100);border-radius:100px;padding:.4rem .9rem;max-width:none!important}
.lp-private svg{flex:none}
.lp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lp-body{display:grid;grid-template-columns:minmax(330px,410px) minmax(0,1fr);align-items:start}
.lp-inputs{border-right:1px solid var(--line);padding:.4rem 0 1rem}
.lp-results{padding:clamp(1.2rem,2.4vw,1.8rem);background:var(--paper-2);display:grid;gap:1.1rem;
  min-height:100%;scroll-margin-top:96px}

/* input groups */
.lp-group{border:0;margin:0;padding:1rem clamp(1.1rem,2.2vw,1.6rem);border-top:1px solid var(--line-soft)}
.lp-group:first-child{border-top:0}
.lp-legend{display:block;font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-700);padding:0}
.lp-group small{display:block;font-size:.78rem;color:var(--ink-50);margin:.2rem 0 0}
.lp-group summary{list-style:none;cursor:pointer;position:relative;padding-right:2rem}
.lp-group summary::-webkit-details-marker{display:none}
.lp-group summary::after{content:"";position:absolute;right:.2rem;top:.15rem;width:.55rem;height:.55rem;
  border-right:1.8px solid var(--ink-50);border-bottom:1.8px solid var(--ink-50);transform:rotate(45deg);
  transition:transform .3s var(--ease)}
.lp-group[open] summary::after{transform:rotate(225deg);top:.4rem}
.lp-group summary:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:4px}
.lp-rows{display:grid;gap:.7rem;margin-top:.85rem}

.lp-row{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:.25rem .8rem;align-items:center}
.lp-row label{font-size:.86rem;font-weight:500;color:var(--ink);line-height:1.35}
.lp-u{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-50);font-weight:400;white-space:nowrap}
.lp-for{display:block;font-size:.72rem;font-weight:500;color:var(--brand-700);margin-top:.1rem}
.lp-ctl{display:flex;gap:.35rem;align-items:center}
.lp .lp-ctl input,.lp .lp-ctl select{padding:.5rem .65rem;font-size:.86rem;border-radius:var(--radius-sm)}
.lp .lp-ctl input{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums}
.lp .lp-ctl select{background-position:right .5rem center;padding-right:1.8rem}
.lp-q{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  color:var(--ink-50);font:600 .74rem/1 var(--font-mono);cursor:pointer;transition:all .25s var(--ease)}
.lp-q:hover,.lp-q[aria-expanded="true"]{border-color:var(--brand);color:var(--brand-700);background:var(--brand-50)}
.lp-q:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.lp-help{grid-column:1/-1;display:none;margin:.2rem 0 .1rem;font-size:.78rem;line-height:1.5;color:var(--ink-70);
  background:var(--paper-2);border-left:3px solid var(--brand-300);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:.5rem .7rem}
.lp-row:focus-within .lp-help,.lp-row.is-help .lp-help{display:block}
@media (hover:hover){.lp-row:hover .lp-help{display:block}}

/* verdict cards */
.lp-verdict{display:grid;gap:.8rem}
.lp-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;overflow:hidden}
.lp-card .k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50)}
.lp-card .v{font-family:var(--font-display);font-weight:600;font-size:1.02rem;line-height:1.35;color:var(--navy-900);
  margin:.35rem 0 .3rem;text-wrap:balance}
.lp-card .s{font-size:.8rem;color:var(--ink-50);line-height:1.45}
.lp-card .s b{font-family:var(--font-mono);font-weight:500;color:var(--ink)}
.lp-card.best{border-color:var(--brand-300);background:linear-gradient(180deg,var(--brand-50),#fff 85%)}
.lp-card.best::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--navy))}
.lp-card.best .k{color:var(--brand-700)}

.lp-alerts{display:grid;gap:.5rem}
.lp-alerts:empty{display:none}
.lp-alert{font-size:.82rem;color:#7A5A00;background:#FFF8E6;border-left:3px solid #E0B400;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:.55rem .8rem}

/* ranked table */
.lp-rank{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.lp-rank-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.7rem;
  padding:1rem 1.1rem .7rem}
.lp-rank-head h4{margin:0;font-family:var(--font-display);font-size:var(--step-1);color:var(--navy-900)}
.lp-toggle{display:flex;gap:.35rem;flex-wrap:wrap}
.lp-toggle .tab{padding:.4rem .85rem;font-size:.78rem}
.lp-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.lp-table th,.lp-table td{padding:.65rem .75rem;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.lp-table th{font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-50);white-space:nowrap;background:var(--paper-2);border-bottom-color:var(--line)}
.lp-table th.r,.lp-table td.r{text-align:right}
.lp-table td.lp-no{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-50);width:2.6rem}
.lp-table td.opt{min-width:14rem}
.lp-table td.opt b{display:block;font-weight:600;color:var(--ink);font-size:.88rem;line-height:1.4}
.lp-table td.opt small{display:block;color:var(--ink-50);font-size:.76rem;margin-top:.15rem}
.lp-table td.r{font-family:var(--font-mono);font-size:.84rem;white-space:nowrap;color:var(--ink)}
.lp-table td.na{color:var(--ink-30)}
.lp-barcell{width:22%;min-width:110px}
.lp-bar{height:8px;border-radius:100px;background:linear-gradient(90deg,var(--brand),var(--navy));margin-top:.45rem;
  transition:width .45s var(--ease-out)}
.lp-bar.neg{background:var(--sage)}
.lp-table tr.top td{background:var(--brand-50)}
.lp-table tr.top td.lp-no{color:var(--brand-700);font-weight:600}
.lp-table tr:last-child td{border-bottom:0}
.lp-pill{display:inline-block;font-size:.7rem;font-weight:500;padding:.12rem .55rem;border-radius:100px;white-space:nowrap;
  border:1px solid var(--line);color:var(--ink-50);background:#fff}
.lp-pill.g{color:var(--brand-700);border-color:var(--brand-100);background:var(--brand-50)}
.lp-pill.r{color:#7A5A00;border-color:#F2DC9B;background:#FFF8E6}

.lp-notes{display:grid;gap:.6rem;font-size:.8rem;color:var(--ink-50);line-height:1.6}
.lp-notes p{margin:0;max-width:95ch}
.lp-notes b{color:var(--navy-800)}

/* sticky summary on small screens */
.lp-dock{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:40;display:grid;
  grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:.8rem;align-items:center;
  padding:.65rem .9rem .7rem 1rem;border-radius:var(--radius);background:var(--navy-900);color:#fff;
  text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(140%);transition:transform .35s var(--ease-out)}
.lp-dock.is-on{transform:none}
.lp-dock-k{grid-column:1;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-300)}
.lp-dock-v{grid-column:1;font-size:.84rem;font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-dock-a{grid-column:2;grid-row:1/3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12)}
.lp-dock:focus-visible{outline:3px solid var(--brand-300);outline-offset:3px}

@media (max-width:980px){
  .lp-body{grid-template-columns:1fr}
  .lp-inputs{border-right:0;border-bottom:1px solid var(--line)}
}
@media (min-width:981px){.lp-dock{display:none}}
@media (max-width:640px){
  .lp-row{grid-template-columns:1fr}
  .lp-results{padding:1rem .8rem}
}
.lp-rank{container-type:inline-size}
@container (max-width:760px){
  .lp-table thead{display:none}
  .lp-table,.lp-table tbody{display:block}
  .lp-table tr{display:grid;grid-template-columns:2rem 1fr 1fr;column-gap:.7rem;row-gap:.35rem;
    padding:.85rem 1rem;border-bottom:1px solid var(--line-soft)}
  .lp-table tr:last-child{border-bottom:0}
  .lp-table td{padding:0;border:0;background:none!important}
  .lp-table tr.top{background:var(--brand-50)}
  .lp-table td.lp-no{grid-row:1/5;width:auto}
  .lp-table td.opt{grid-column:2/4}
  .lp-table td.lp-barcell{grid-column:2/4;grid-row:3;width:auto;min-width:0}
  .lp-table td.lp-barcell .lp-bar{margin-top:.1rem}
  .lp-table td.r{text-align:left;font-size:.82rem}
  .lp-table td.r::before{content:attr(data-label);display:block;font-family:var(--font-body);font-size:.68rem;
    color:var(--ink-50);letter-spacing:.02em}
  .lp-table td.lp-risk{grid-column:2/4}
}
.lp-results{container-type:inline-size}
@container (min-width:860px){.lp-verdict{grid-template-columns:repeat(4,1fr)}}
@container (max-width:859px){.lp-verdict{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:430px){.lp-verdict{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.lp-bar,.lp-dock,.lp-group summary::after{transition:none}}
@media print{.lp-dock,.lp-q{display:none}}

.lp .tool-head .card-icon,.lp-teaser .tool-head .card-icon{flex:none}

/* review request */
.lp-review{display:grid;gap:.8rem;justify-items:start}
.lp-rv-open{font-size:.9rem}
.lp-rv-panel{justify-self:stretch;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.1rem,2.4vw,1.6rem);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.lp-rv-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--navy))}
.lp-rv-panel h4{font-size:var(--step-1);margin:0 0 .3rem;color:var(--navy-900)}
.lp-rv-intro{font-size:.88rem;color:var(--ink-50);margin:0 0 1.1rem}
.lp-rv-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
.lp-rv-fields .field{margin-bottom:.9rem}
.lp-rv-fields input{padding:.65rem .85rem;font-size:.92rem}
.lp-consent{display:flex;gap:.65rem;align-items:flex-start;font-size:.82rem;color:var(--ink-70);line-height:1.5;cursor:pointer;margin:.2rem 0 1rem}
.lp-consent input{flex:none;width:17px;height:17px;margin:.15em 0 0;accent-color:var(--brand)}
.lp-rv-actions{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.lp-rv-form[aria-busy="true"] .btn{opacity:.6;pointer-events:none}
.lp-rv-msg{margin:1rem 0 0;font-size:.86rem;padding:.7rem .9rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.lp-rv-msg.ok{margin:0;background:var(--brand-50);border-left:3px solid var(--brand);color:var(--navy-900);font-weight:500}
.lp-rv-msg.err{background:#FFF8E6;border-left:3px solid #E0B400;color:#7A5A00}
.lp-results{container-type:inline-size}
@container (max-width:520px){.lp-rv-fields{grid-template-columns:1fr}.lp-review .btn{width:100%}}

/* risk labels: explanation on hover / tap, plus a key under the table */
button.lp-pill{font-family:var(--font-body);line-height:1.4;cursor:help;position:relative;
  transition:box-shadow .2s var(--ease)}
button.lp-pill:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
button.lp-pill[data-tip]::after{content:attr(data-tip);position:absolute;z-index:20;right:0;bottom:calc(100% + 8px);
  width:min(260px,70vw);white-space:normal;text-align:left;font-size:.76rem;font-weight:400;line-height:1.5;
  color:#fff;background:var(--navy-900);border-radius:var(--radius-sm);padding:.6rem .75rem;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none}
button.lp-pill.is-tip::after{opacity:1;visibility:visible;transform:none}
@media (hover:hover){button.lp-pill[data-tip]:hover::after{opacity:1;visibility:visible;transform:none}}
@container (max-width:760px){button.lp-pill[data-tip]::after{right:auto;left:0}}
.lp-key{border-top:1px solid var(--line);background:var(--paper-2);padding:.9rem 1.1rem 1rem;border-radius:0 0 var(--radius) var(--radius)}
.lp-key h5{margin:0 0 .6rem;font-family:var(--font-mono);font-size:.66rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-50)}
.lp-key dl{margin:0;display:grid;gap:.45rem}
.lp-key-row{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:.8rem;align-items:baseline}
.lp-key dt{margin:0}
.lp-key dd{margin:0;font-size:.79rem;line-height:1.5;color:var(--ink-70)}
@container (max-width:560px){.lp-key-row{grid-template-columns:1fr;gap:.2rem}.lp-key-row+.lp-key-row{margin-top:.35rem}}

.lp-pill-k{font-weight:400;opacity:.75}

.lp-teaser{display:block;text-decoration:none;color:inherit;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.lp-teaser:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.lp-teaser .tool-head{border-bottom:0;background:#fff;flex-wrap:wrap}
.lp-teaser .tool-head>div:nth-child(2){flex:1 1 280px}
.lp-teaser .tool-head .card-icon{flex:none}