/* ════════════════════════════════════════════════════════════
   Expense Ratio Calculator — "The Drag"
   Neutral ink-black · tangerine gross · clay net · mahogany gap.
   Identity: the gross-vs-net diverging chart is the centrepiece;
   the widening shaded gap is the fee drag.
   ════════════════════════════════════════════════════════════ */

body[data-tool="expense"] {
  --surface:        #100E0C;
  --surface-raised: #1B1814;
  --surface-high:   #2A241D;
  --hairline:       rgba(240, 179, 106, 0.13);
  --hairline-bold:  rgba(240, 179, 106, 0.28);
  --accent:         #E59A4A;
  --accent-bright:  #F0B36A;
  --accent-deep:    #3A2A18;
  --accent-glow:    rgba(240, 179, 106, 0.40);
  --contrast:       #A98C7A;
  --contrast-bright:#C3A892;
  --contrast-soft:  rgba(169, 140, 122, 0.13);
  --contrast-glow:  rgba(169, 140, 122, 0.40);
}

body[data-tool="expense"] .tk-readout {
  background:
    radial-gradient(130% 150% at 10% 80%, rgba(138,52,46,0.14), transparent 56%),
    var(--surface-raised);
}

/* fee-drag legend swatch */
.tk-legend .lg-drag::before {
  background: rgba(150, 58, 50, 0.75);
}

/* ── transparency band ──────────────────────────────────────
   A sincere editorial aside: why this tool exists. Two-column
   on desktop — kicker + serif statement | the explanation. */
.exp-transparency {
  background:
    radial-gradient(120% 150% at 90% 0%, rgba(240, 179, 106, 0.08), transparent 58%),
    radial-gradient(120% 150% at 8% 110%, rgba(150, 58, 50, 0.10), transparent 60%),
    var(--surface);
}
.exp-trans-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(30px, 5vw, 86px);
  align-items: start;
}
@media (max-width: 860px) {
  .exp-trans-grid { grid-template-columns: 1fr; gap: 26px; }
}
.exp-trans-rule {
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent-bright);
  box-shadow: 0 0 18px var(--accent-glow);
  margin-bottom: 22px;
}
.exp-trans-head .tk-kicker { display: block; margin-bottom: 16px; }
.exp-trans-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 47px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
  font-variation-settings: "SOFT" 50, "opsz" 110;
}
.exp-trans-body { padding-top: 4px; }
.exp-trans-body p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.72;
  color: var(--text-soft);
  margin: 0 0 18px;
  max-width: 56ch;
}
.exp-trans-close {
  font-family: var(--serif) !important;
  font-style: italic;
  font-size: 19px !important;
  line-height: 1.5 !important;
  color: var(--accent-bright) !important;
  margin: 4px 0 0 !important;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-variation-settings: "SOFT" 60, "opsz" 90;
}