/* Budget surface (LMA-S1-BUDGET) — envelopes with progress bars, accounts,
 * the month ledger, and the Ch 21 dialog/confirm-path dialogs. Tokens only
 * (DG-T1); touch targets >= --tap-min (DG-X2); inputs at --text-base
 * (DG-X3); motion gated behind prefers-reduced-motion (DG-X5). */

/* --- Flash (navigation success lands back here with a notice; DG-S4) ----- */
.budget-flash {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-success-tint);
  color: var(--color-success);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.budget-flash--alert {
  background: var(--color-danger-tint);
  color: var(--color-danger); /* true failure only (DG-H5) */
}

/* --- Month switcher ------------------------------------------------------ */
.budget-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.budget-month-label {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin: 0;
}

.budget-month-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min); /* DG-X2 */
  min-width: var(--tap-min);
  padding: 0 var(--space-3);
  color: var(--color-accent);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
}

/* --- Sections ------------------------------------------------------------ */
.budget-section {
  margin-bottom: var(--space-8);
}

.budget-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.budget-section-header .pillar-section-title {
  margin: 0;
}

.budget-count-note {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin: var(--space-2) 0 0;
}

/* --- Envelope cards with progress bars ----------------------------------- */
.budget-envelope {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.budget-envelope-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2); /* DG-X2 between targets */
}

.budget-envelope-name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

/* Track + fill; the amounts are carried by visible text, the bar is the
 * at-a-glance redundant signal (DG-T6: never color alone). */
.budget-bar {
  height: var(--space-2);
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.budget-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.budget-bar-fill--over {
  background: var(--color-danger); /* a blown envelope is a true failure state (DG-H5) */
}

.budget-envelope-meta {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

.budget-envelope-over {
  color: var(--color-danger);
  font-weight: var(--weight-semibold);
}

/* --- Ledger rows ---------------------------------------------------------- */
.budget-txn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.budget-txn-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.budget-txn-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.budget-txn-meta {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
}

.budget-txn-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2); /* DG-X2 */
  flex-shrink: 0;
}

/* --- Buttons -------------------------------------------------------------- */
/* Quiet button (DG-H3: everything except the screen's one primary action). */
.budget-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min); /* DG-X2 */
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* Quiet destructive trigger — danger marks destruction only (DG-H5). */
.budget-button--danger {
  color: var(--color-danger);
  border-color: var(--color-danger-tint);
}

/* The screen's ONE accent-filled primary action (DG-H3/DG-V7). */
.budget-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-preferred);
  padding: 0 var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-ink);
  background: var(--color-accent); /* 6.0:1 (DG-X1) */
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* Dialog primary submit — the open dialog's own single primary action; the
 * content region behind it is inert while the dialog is up (DG-H3 reading:
 * one primary per visible layer). */
.budget-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-preferred);
  padding: 0 var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.budget-submit--danger {
  background: var(--color-danger); /* confirm-path destruction (DG-H5) */
}

/* --- Native dialogs (Ch 21 dialog-path / confirm-path) -------------------- */
.budget-dialog {
  width: min(28rem, calc(100vw - var(--space-8)));
  padding: var(--space-4);
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}

.budget-dialog::backdrop {
  background: rgb(31 36 48 / 50%); /* --color-ink at half strength */
}

.budget-dialog-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
}

/* Ch 21 §4 motion: dialogs animate in <= 200ms, gated on motion preference
 * (DG-X5) — with reduced motion requested they simply appear. */
@media (prefers-reduced-motion: no-preference) {
  .budget-dialog[open] {
    animation: budget-dialog-in 160ms ease-out;
  }

  @keyframes budget-dialog-in {
    from {
      opacity: 0;
      transform: translateY(var(--space-2)) scale(0.98);
    }
  }
}

/* --- Dialog forms ---------------------------------------------------------- */
.budget-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.budget-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.budget-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.budget-input {
  font-size: var(--text-base); /* DG-X3: >= 16px so iOS never zooms */
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-surface);
  padding: var(--space-3);
  min-height: var(--tap-min);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.budget-fieldset {
  display: flex;
  gap: var(--space-3);
  border: none;
  margin: 0;
  padding: 0;
}

.budget-fieldset legend {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  padding: 0;
  margin-bottom: var(--space-1);
}

.budget-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min); /* DG-X2 */
  font-size: var(--text-base);
  color: var(--color-ink);
}

/* DG-S5 inline validation message — danger marks a true failure (DG-H5);
 * the text itself is the non-color signal (DG-T6). */
.budget-field-error {
  font-size: var(--text-sm);
  color: var(--color-danger);
  margin: 0;
}

.budget-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2); /* DG-X2 */
}

/* --- Info affordance (manual-only / Plaid gate) ---------------------------- */
.budget-info {
  margin-top: var(--space-6);
}

.budget-info-summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min); /* DG-X2 */
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted);
  cursor: pointer;
}

.budget-info-text {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
  margin: var(--space-2) 0 0;
}

/* --- Archived disclosures --------------------------------------------------- */
.budget-archived {
  margin-top: var(--space-3);
}

.budget-archived summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min); /* DG-X2 */
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  cursor: pointer;
}

.budget-archived .pillar-list {
  margin-top: var(--space-2);
}