/* Sale Proceeds — page-specific styling.
   All colours resolve through brand.css custom properties so recolor.py remaps
   them for a partner build. No literal hex in this file. */

.adv{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.adv summary{
  cursor:pointer;list-style:none;font-family:'Manrope',sans-serif;
  font-size:.84rem;font-weight:700;color:var(--franklin-deep);
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{
  content:"";width:0;height:0;flex:none;align-self:center;
  border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .18s ease;
}
.adv[open] summary::before{transform:rotate(90deg)}
.adv summary span{font-weight:400;font-size:.78rem;color:var(--muted-2)}
.adv summary:focus-visible{outline:2px solid var(--franklin);outline-offset:3px;border-radius:4px}
.adv-in{padding-top:14px}
@media (prefers-reduced-motion:reduce){.adv summary::before{transition:none}}

.field-hint{display:block;margin-top:5px;font-size:.75rem;line-height:1.45;color:var(--muted-2)}

.sel{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:11px;
  background:var(--white);font-family:'Manrope',sans-serif;font-size:.88rem;
  font-weight:600;color:var(--ink);cursor:pointer;
}
.sel:focus-visible{outline:2px solid var(--franklin);outline-offset:2px}

.toggle-row{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-family:'Manrope',sans-serif;font-size:.86rem;font-weight:700;color:var(--franklin-deep);
}
.toggle-row input{width:17px;height:17px;accent-color:var(--franklin)}

/* Where the money goes, as one bar rather than a chart. The seller's question
   is proportional -- how much of my price do I keep -- and a single stacked bar
   answers it before any number is read. */
.wf{margin-top:20px}
#waterfall{width:100%;height:54px;display:block;border-radius:10px;overflow:hidden}
.w-net{fill:#fff}
.w-payoff{fill:rgba(255,255,255,.42)}
.w-comm{fill:rgba(255,255,255,.26)}
.w-other{fill:rgba(255,255,255,.14)}
.wf-key{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:.74rem;color:rgba(255,255,255,.74)}
.wf-key span{display:inline-flex;align-items:center;gap:6px}
.wf-key i{width:11px;height:11px;border-radius:3px;flex:none}
.wf-key .k-net{background:#fff}
.wf-key .k-payoff{background:rgba(255,255,255,.42)}
.wf-key .k-comm{background:rgba(255,255,255,.26)}
.wf-key .k-other{background:rgba(255,255,255,.14)}

.row.tot{
  padding:12px 0;border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);
}
.row.tot span{font-family:'Manrope',sans-serif;font-weight:700;color:#fff;font-size:.9rem}
.row.tot b{font-size:1.06rem;font-weight:800;color:#fff}
.row em{font-style:normal;opacity:.7;font-size:.94em}

.breakdown.gains{margin-top:14px;padding-top:4px;border-top:1px dashed rgba(255,255,255,.2)}
#gains-rows[hidden]{display:none}

/* Negative proceeds are not a small number, they are a different situation, so
   the headline stops looking like a result and starts looking like a warning. */
.result[data-short="1"] .bignum{color:var(--gold-tint)}