/* ==========================================================================
   Billing, site balance and player-funded sponsor slots.

   Kept out of style.css so the money pages can be restyled without touching the
   sheet every other page depends on. Everything here is scoped to a class this
   feature owns · no bare element selectors.

   The one rule that is not decoration: .pledge-warn must stay visually loud in
   both themes. It carries "a pledge is not refundable", it sits directly above
   the button that commits the money, and a reader who skims must still see it.
   ========================================================================== */

/* ---------------------------------------------------------- the warning */
.pledge-warn {
  display: block;
  margin: var(--gap) 0;
  padding: 12px 14px;
  border: 1px solid var(--gold);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--gold) 12%, var(--panel));
  color: var(--text);
  line-height: 1.5;
}

.pledge-warn-title {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  letter-spacing: .01em;
}

.pledge-warn-body { display: block; font-size: .92rem; }

/* The second copy, immediately above the submit button. Same colours, less
   height · it is a reminder of the block higher up the card, not a new claim. */
.pledge-warn.is-compact {
  margin: 12px 0 10px;
  padding: 9px 12px;
}

.pledge-warn.is-compact .pledge-warn-title { font-size: .92rem; }
.pledge-warn.is-compact .pledge-warn-body { font-size: .86rem; }

/* ------------------------------------------------------------- the form */
.pledge-card .pledge-form { margin-top: 4px; }

.pledge-named {
  display: block;
  margin: 10px 0 2px;
  line-height: 1.45;
}

.pledge-named .form-help { display: block; margin-top: 2px; }

/* The label is a full sentence on purpose · "I understand it is not refundable"
   is the last thing read before the money is committed. .btn is nowrap, which
   clipped it in the sidebar column, so this one button is allowed to wrap. */
.pledge-submit {
  width: 100%;
  white-space: normal;
  height: auto;
  line-height: 1.35;
  padding-top: 9px;
  padding-bottom: 9px;
  text-align: center;
}

.pledge-hint { border-left: 3px solid var(--accent); }

/* ---------------------------------------------------------- supporters */
.supporters-total {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.supporter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.supporter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--panel-2);
}

.supporter-name { font-weight: 600; }
.supporter-amount { text-align: right; color: var(--accent); font-weight: 700; }
.supporter-what,
.supporter-when { grid-column: 1 / -1; font-size: .82rem; }

.supporter-msg {
  grid-column: 1 / -1;
  font-style: italic;
  color: var(--text);
  font-size: .9rem;
}

/* Anonymous is the DEFAULT, so it must not look like a lesser kind of backer. */
.supporter.is-anon .supporter-name { font-weight: 500; }
.supporter-anon { color: var(--muted); }

/* --------------------------------------------------------- goal progress */
.pledge-goal { margin: 4px 0 12px; }

.pledge-goal-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  overflow: hidden;
}

.pledge-goal-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* ------------------------------------------------------- balance / ledger */
.balance-hero { text-align: center; }

.balance-figure {
  margin: 4px 0 2px;
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--accent);
}

.balance-sub { margin: 0 0 8px; }

.billing-balance .balance-figure {
  font-size: 1.6rem;
  text-align: left;
}

/* The "What" column carries a full sentence of detail, so it takes the slack
   and the two narrow columns keep their natural width. */
.ledger-table td:nth-child(2) { width: 100%; }

.ledger-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-amount.pos { color: var(--accent); }
.ledger-amount.neg { color: var(--muted); }

.ledger-detail { display: block; font-size: .84rem; }

/* ------------------------------------------------------------ auction bid */
.bid-pledged {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
}

/* --------------------------------------------- premium plan chooser
   One server selector above the pricing row, replacing the copy that used to
   sit inside every paid card. Lives here rather than in style.css so the
   pricing-card rules another agent is working on stay untouched. */
.plan-chooser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 auto;
  padding: 12px 16px;
  max-width: 44rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--panel);
}

.plan-chooser label { font-weight: 600; white-space: nowrap; }
.plan-chooser select { flex: 1 1 12rem; min-width: 0; }
.plan-chooser .form-help { flex: 1 1 100%; margin: 0; }

/* No servers on the account: pricing information plus exactly one live control,
   instead of a dead dropdown repeated once per card. */
.plan-chooser-empty {
  justify-content: center;
  text-align: center;
  color: var(--muted);
}

.plan-chooser-empty .btn { flex: 0 0 auto; }

/* --------------------------------------------------------- account links */
.acct-billing-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}

@media (max-width: 640px) {
  .balance-figure { font-size: 1.7rem; }
  .supporter { grid-template-columns: 1fr auto; }
}