/* Budget styles are scoped; existing payoff, loans and articles keep their layout. */
.budget-page { margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:#18312b; background:#fff; line-height:1.6; }
.budget-page *, .budget-page *::before, .budget-page *::after { box-sizing:border-box; }
.budget-page [hidden] { display:none !important; }
.budget-page a { color:#08614b; text-underline-offset:.16em; }
.budget-page .site-header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 24px; background:#0f6e56; color:#fff; }
.budget-page .site-header a { color:#fff; }
.budget-page .logo { font-size:1.125rem; font-weight:750; text-decoration:none; }
.budget-page .site-header nav { display:flex; gap:18px; align-items:center; }
.budget-page .lang-switch { border:1px solid #a2d4c7; border-radius:5px; padding:7px 10px; }
.budget-page main { max-width:1040px; margin:auto; padding:28px 24px; }
.budget-page h1 { font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.2; margin:22px 0 14px; }
.budget-page h2 { font-size:1.4rem; line-height:1.35; margin:28px 0 14px; }
.budget-page h3 { font-size:1.15rem; line-height:1.4; }
.budget-page p { max-width:85ch; }
.budget-page .budget-byline, .budget-page .budget-hint { font-size:.9rem; color:#405d54; }
.budget-page .budget-intro { font-size:1.1rem; }
.budget-page .budget-warning { padding:14px 18px; border-left:4px solid #ab640f; background:#fff7e8; color:#533600; }
.budget-page .site-footer { padding:30px 24px; background:#f0f6f3; border-top:1px solid #cadbd4; margin-top:32px; }
.budget-page .site-footer p, .budget-page .site-footer nav { max-width:992px; margin-left:auto; margin-right:auto; }
.budget-page .site-footer nav { line-height:2.4; }
.budget-page .skip-link { position:absolute; left:8px; z-index:999; background:#fff; color:#0f513f; padding:12px; }
.budget-page :focus-visible { outline:3px solid #be6800; outline-offset:3px; }
#budget-app { border:1px solid #bdd5ca; border-radius:12px; background:#f7fbf9; padding:24px; margin:28px 0; }
#budget-app > h2 { margin-top:0; }
#budget-app fieldset { min-width:0; border:1px solid #b8cec5; border-radius:8px; padding:18px; margin:16px 0; }
#budget-app legend { font-weight:700; padding:0 6px; max-width:100%; }
#budget-app .budget-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:end; }
#budget-app .budget-field { min-width:0; display:flex; flex-direction:column; }
#budget-app .budget-field label { font-weight:650; }
#budget-app .budget-hint { margin:5px 0 8px; }
#budget-app input:not([type=checkbox]), #budget-app select { width:100%; min-width:0; min-height:46px; border:1px solid #75988a; border-radius:6px; background:#fff; padding:10px; color:#142e24; font:inherit; }
#budget-app input[aria-invalid=true], #budget-app select[aria-invalid=true] { border:2px solid #a02828; }
#budget-app button { min-height:46px; max-width:100%; border:1px solid #0f6e56; border-radius:6px; padding:10px 14px; font:inherit; font-weight:600; background:#fff; color:#07523f; cursor:pointer; overflow-wrap:anywhere; margin:8px 8px 8px 0; }
#budget-app button:hover:not(:disabled) { background:#e4f2eb; }
#budget-app button.budget-primary { background:#0f6e56; color:#fff; margin-top:20px; }
#budget-app button.budget-primary:hover:not(:disabled) { background:#094d3b; }
#budget-app :disabled { cursor:default; opacity:.62; }
#budget-app .budget-check { display:flex; align-items:flex-start; gap:12px; min-height:46px; margin-top:24px; font-weight:650; }
#budget-app input[type=checkbox] { width:22px; height:22px; flex:0 0 22px; accent-color:#0f6e56; margin-top:3px; }
#budget-app .budget-row { background:#fff; }
#budget-app .budget-error { color:#912222; font-weight:600; font-size:.9rem; margin:6px 0 0; }
#budget-status:empty { display:none; }
#budget-status { border-left:3px solid #0f6e56; padding:12px; background:#eaf4ee; }
#budget-app .budget-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#budget-app .budget-metrics > div { min-width:0; padding:12px; background:#edf5f0; border-radius:6px; }
#budget-app dt { font-size:.88rem; color:#405d54; }
#budget-app dd { font-size:1.1rem; font-weight:700; margin:5px 0 0; overflow-wrap:anywhere; }
#budget-app .budget-table-scroll { max-width:100%; overflow-x:auto; border:1px solid #c3d6cc; border-radius:7px; margin:14px 0; background:#fff; }
#budget-app table { border-collapse:collapse; width:100%; font-size:.88rem; }
#budget-app caption { text-align:left; padding:12px; font-weight:700; color:#18312b; }
#budget-app th, #budget-app td { padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid #d7e3dc; min-width:7rem; overflow-wrap:anywhere; }
#budget-app thead th { background:#e7f1eb; }
#budget-app tbody th { font-weight:500; }
#budget-app .budget-actions { display:flex; flex-wrap:wrap; gap:8px; }
#budget-app details { border:1px solid #b8cec5; padding:12px; border-radius:6px; background:#fff; margin:14px 0; overflow-wrap:anywhere; }
#budget-app summary { min-height:32px; cursor:pointer; font-weight:650; }
#budget-print { display:none; }
@media (max-width:600px) {
  .budget-page main { padding:20px 14px; }
  .budget-page .site-header { padding:14px; }
  .budget-page .site-header nav { gap:12px; font-size:.9rem; }
  #budget-app { padding:16px; }
  #budget-app fieldset { padding:12px; }
  #budget-app .budget-fields, #budget-app .budget-metrics { grid-template-columns:minmax(0,1fr); }
  #budget-app .budget-actions button { flex:1 1 13rem; }
}
@media print {
  @page { size:auto; margin:12mm; }
  body.budget-printing > * { display:none !important; }
  body.budget-printing > #budget-print { display:block !important; }
  #budget-print { color:#000; background:#fff; font-size:9pt; line-height:1.35; }
  #budget-print h1 { font-size:16pt; margin:0 0 8pt; }
  #budget-print h2 { font-size:13pt; }
  #budget-print h3 { font-size:11pt; }
  #budget-print .budget-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4pt 12pt; }
  #budget-print .budget-metrics > div { break-inside:avoid; }
  #budget-print dt { font-weight:600; }
  #budget-print dd { margin:0 0 5pt; }
  #budget-print table { border-collapse:collapse; table-layout:fixed; width:100%; font-size:8pt; }
  #budget-print caption { text-align:left; font-weight:700; margin:8pt 0; }
  #budget-print th, #budget-print td { border:1px solid #777; padding:4pt; text-align:left; overflow-wrap:anywhere; }
  #budget-print thead { display:table-header-group; }
  #budget-print tr, #budget-print li { break-inside:avoid; }
}

/* Keep inputs aligned when one translated hint or validation error is longer. */
@supports (grid-template-rows:subgrid) {
  #budget-app .budget-fields { row-gap:.4rem; align-items:stretch; }
  #budget-app .budget-field { display:grid; grid-row:span 4; grid-template-rows:subgrid; }
  #budget-app .budget-field > label { grid-row:1; }
  #budget-app .budget-field > .budget-hint { grid-row:2; }
  #budget-app .budget-field > input, #budget-app .budget-field > select { grid-row:3; margin-top:0; align-self:start; }
  #budget-app .budget-field > .budget-error { grid-row:4; margin-top:0; }
}
@supports not (grid-template-rows:subgrid) {
  #budget-app .budget-fields { grid-template-columns:minmax(0,1fr); }
}