.lp-finance {
  --lp-signal: color-mix(in srgb, var(--primary) 54%, #9b6418);
  --lp-signal-2: color-mix(in srgb, var(--accent) 70%, #265b45);
  --lp-finance-gold: color-mix(in srgb, var(--lp-signal) 78%, #c38b35);
}

.lp-finance .lp-masthead {
  background:
    linear-gradient(
      112deg,
      color-mix(in srgb, var(--lp-finance-gold) 9%, transparent),
      transparent 44%
    ),
    radial-gradient(
      circle at 86% -20%,
      color-mix(in srgb, var(--lp-signal) 18%, transparent),
      transparent 42%
    ),
    color-mix(in srgb, var(--lp-paper) 94%, transparent);
}

.lp-finance .lp-masthead::after {
  width: 235px;
  height: 118px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 19px,
      color-mix(in srgb, var(--lp-signal) 20%, transparent) 19px 20px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 19px,
      color-mix(in srgb, var(--lp-signal) 14%, transparent) 19px 20px
    );
  transform: rotate(-8deg);
}

.lp-finance .lp-field small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.lp-finance .lp-primary-btn {
  min-width: 154px;
}

.lp-finance-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-finance-metrics > div:nth-child(3n + 2) {
  border-block-start-color: var(--lp-signal-2);
}

.lp-finance-metrics > div:nth-child(3n) {
  border-block-start-color: var(--lp-finance-gold);
}

.lp-finance-metrics dd {
  font-size: clamp(0.86rem, 1.7vw, 1.05rem);
}

.lp-order-flow {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.lp-order-flow li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--lp-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--lp-soft) 78%, transparent);
}

.lp-order-flow b {
  color: var(--lp-signal);
  font: 900 0.72rem/1 var(--mono);
}

.lp-rule-list {
  display: grid;
  gap: 11px;
  padding-inline-start: 20px;
  color: var(--muted);
  line-height: 1.55;
}

.lp-rule-list li::marker {
  color: var(--lp-signal);
  font-family: var(--mono);
  font-weight: 900;
}

.lp-ledger-summary {
  margin-block-start: 18px;
  padding: 16px;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 31px,
      color-mix(in srgb, var(--lp-line) 15%, transparent) 31px 32px
    ),
    var(--surface);
}

.lp-ledger-summary h3 {
  margin-block-end: 12px;
  font-size: 0.9rem;
}

.lp-ledger-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--lp-line);
}

.lp-ledger-summary dl > div {
  min-width: 0;
  padding: 11px;
  background: var(--surface);
}

.lp-ledger-summary dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.lp-ledger-summary dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  font: 800 0.9rem/1.35 var(--mono);
}

.lp-plan-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
  justify-content: space-between;
  margin-block-start: 22px;
}

.lp-plan-head h3 {
  font-size: 1rem;
}

.lp-plan-head p {
  margin-block-start: 4px;
  color: var(--muted);
  font: 0.72rem/1.4 var(--mono);
}

.lp-prepayment .lp-table-wrap {
  max-height: 430px;
}

.lp-prepayment .lp-table-wrap :where(th, td) {
  font-variant-numeric: tabular-nums;
}

.lp-prepayment .lp-table-wrap tbody th {
  position: static;
  background: var(--surface);
  font-family: var(--mono);
}

.lp-finance [data-tone="error"] {
  color: var(--lp-danger);
}

:dir(rtl) .lp-finance .lp-masthead::after {
  transform: rotate(8deg);
}

:dir(rtl) .lp-rule-list {
  padding-inline: 20px 0;
}

@media (max-width: 640px) {
  .lp-finance-metrics,
  .lp-ledger-summary dl {
    grid-template-columns: 1fr;
  }

  .lp-finance .lp-toolbar > button,
  .lp-plan-head button {
    width: 100%;
  }

  .lp-plan-head {
    align-items: stretch;
  }

  .lp-finance :where(button, select, input[type="file"]::file-selector-button) {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-finance .lp-progress > i {
    animation: none !important;
  }
}