@jjlmoya/utils-civic 1.5.0 → 1.7.0

package/src/tool/public-budget-analyzer/logic.ts

@@ -0,0 +1,249 @@
+export interface RawBudgetRecord {
+  [key: string]: unknown;
+}
+
+export interface ParsedBudgetText {
+  format: 'csv' | 'json';
+  records: RawBudgetRecord[];
+  errors: string[];
+}
+
+export interface NormalizedBudgetRow {
+  category: string;
+  path: string[];
+  amount: number;
+  population?: number | undefined;
+  priorAmount?: number | undefined;
+  period?: string | undefined;
+  currency?: string | undefined;
+  sourceRow: number;
+}
+
+export interface BudgetCategorySummary {
+  category: string;
+  path: string[];
+  amount: number;
+  share?: number | undefined;
+  priorAmount?: number | undefined;
+  variation?: number | undefined;
+  sourceRows: number[];
+}
+
+export interface BudgetAnalysis {
+  rows: NormalizedBudgetRow[];
+  categories: BudgetCategorySummary[];
+  total: number;
+  positiveTotal: number;
+  previousTotal?: number | undefined;
+  population?: number | undefined;
+  perCapita?: number | undefined;
+  variation?: number | undefined;
+  currency?: string | undefined;
+  period?: string | undefined;
+  warnings: string[];
+  errors: string[];
+}
+
+const aliases = {
+  category: ['category', 'categoryname', 'name', 'label', 'programme', 'program', 'function'],
+  amount: ['amount', 'spending', 'expenditure', 'expense', 'value', 'total'],
+  population: ['population', 'inhabitants', 'residents'],
+  priorAmount: ['prioramount', 'previousamount', 'prior', 'previous', 'lastperiod'],
+  period: ['period', 'year', 'fiscalyear', 'date'],
+  currency: ['currency', 'currencycode', 'unit'],
+  parent: ['parentcategory', 'parent', 'group'],
+};
+
+function normalizeKey(value: string): string {
+  return value.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase().replace(/[^a-z0-9]/g, '');
+}
+
+function findKey(record: RawBudgetRecord, names: string[]): string | undefined {
+  const keys = Object.keys(record);
+  const normalized = new Map(keys.map((key) => [normalizeKey(key), key]));
+  return names.map(normalizeKey).map((name) => normalized.get(name)).find(Boolean);
+}
+
+function readValue(record: RawBudgetRecord, names: string[]): unknown {
+  const key = findKey(record, names);
+  return key ? record[key] : undefined;
+}
+
+function parseNumber(value: unknown): number | undefined {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : undefined;
+  if (typeof value !== 'string' || !value.trim()) return undefined;
+  const compact = value.trim().replace(/\s/g, '').replace(/[^\d,.-]/g, '');
+  if (!compact) return undefined;
+  const comma = compact.lastIndexOf(',');
+  const dot = compact.lastIndexOf('.');
+  const normalized = comma > dot ? compact.replace(/\./g, '').replace(',', '.') : compact.replace(/,/g, '');
+  const result = Number(normalized);
+  return Number.isFinite(result) ? result : undefined;
+}
+
+function splitPath(value: string): string[] {
+  return value.split(/\s*(?:>|\/|\\|:)\s*/).map((part) => part.trim()).filter(Boolean);
+}
+
+function validateRow(record: RawBudgetRecord, category: string, amount: number | undefined, sourceRow: number): string | undefined {
+  if (!category) return `Row ${sourceRow}: category is empty.`;
+  if (amount === undefined) return `Row ${sourceRow}: amount is missing or not numeric.`;
+  if (hasInvalidOptional(record, aliases.population)) return `Row ${sourceRow}: population is not numeric.`;
+  if (hasInvalidOptional(record, aliases.priorAmount)) return `Row ${sourceRow}: priorAmount is not numeric.`;
+  return undefined;
+}
+
+function normalizeRow(record: RawBudgetRecord, sourceRow: number): { row?: NormalizedBudgetRow; error?: string } {
+  const categoryValue = readValue(record, aliases.category);
+  const amountValue = readValue(record, aliases.amount);
+  const category = typeof categoryValue === 'string' ? categoryValue.trim() : String(categoryValue ?? '').trim();
+  const amount = parseNumber(amountValue);
+  const error = validateRow(record, category, amount, sourceRow);
+  if (error) return { error };
+  if (amount === undefined) return { error: `Row ${sourceRow}: amount is missing or not numeric.` };
+  const parentValue = readValue(record, aliases.parent);
+  const parent = typeof parentValue === 'string' ? splitPath(parentValue) : [];
+  const path = [...parent, ...splitPath(category)];
+  const population = parseOptional(record, aliases.population);
+  const priorAmount = parseOptional(record, aliases.priorAmount);
+  const period = stringValue(readValue(record, aliases.period));
+  const currency = stringValue(readValue(record, aliases.currency));
+  return { row: { category: path[path.length - 1] || category, path, amount, population, priorAmount, period, currency, sourceRow } };
+}
+
+function parseOptional(record: RawBudgetRecord, names: string[]): number | undefined {
+  const value = readValue(record, names);
+  return value === undefined || value === null || value === '' ? undefined : parseNumber(value);
+}
+
+function hasInvalidOptional(record: RawBudgetRecord, names: string[]): boolean {
+  const value = readValue(record, names);
+  return value !== undefined && value !== null && value !== '' && parseNumber(value) === undefined;
+}
+
+function stringValue(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+}
+
+function parseCsvLine(line: string): string[] {
+  const row: string[] = [];
+  let cell = '';
+  let quoted = false;
+  for (let index = 0; index < line.length; index += 1) {
+    const char = line[index];
+    const next = line[index + 1];
+    if (char === '"' && quoted && next === '"') { cell += '"'; index += 1; continue; }
+    if (char === '"') { quoted = !quoted; continue; }
+    if (char === ',' && !quoted) { row.push(cell.trim()); cell = ''; continue; }
+    cell += char;
+  }
+  row.push(cell.trim());
+  return row;
+}
+
+function parseCsvRows(text: string): string[][] {
+  return text.split(/\r?\n/).map(parseCsvLine).filter((row) => row.some(Boolean));
+}
+
+function hasUnclosedQuotes(line: string): boolean {
+  return ((line.match(/"/g) || []).length % 2) === 1;
+}
+
+function recordsFromCsv(text: string): ParsedBudgetText {
+  if (text.split(/\r?\n/).some(hasUnclosedQuotes)) return { format: 'csv', records: [], errors: ['CSV contains an unclosed quoted field.'] };
+  const rows = parseCsvRows(text);
+  if (rows.length < 2) return { format: 'csv', records: [], errors: ['CSV needs a header row and at least one data row.'] };
+  const headers = rows[0] || [];
+  const records = rows.slice(1).map((values) => Object.fromEntries(headers.map((header, index) => [header, values[index] ?? ''])));
+  return { format: 'csv', records, errors: [] };
+}
+
+function recordsFromJson(text: string): ParsedBudgetText {
+  try {
+    const parsed: unknown = JSON.parse(text);
+    const data = Array.isArray(parsed) ? parsed : objectValue(parsed)?.data;
+    if (!Array.isArray(data) || !data.every(isRecord)) return { format: 'json', records: [], errors: ['JSON must be an array of objects or an object with a data array.'] };
+    return { format: 'json', records: data, errors: [] };
+  } catch {
+    return { format: 'json', records: [], errors: ['JSON could not be parsed.'] };
+  }
+}
+
+function objectValue(value: unknown): RawBudgetRecord | undefined {
+  return value && typeof value === 'object' && !Array.isArray(value) ? value as RawBudgetRecord : undefined;
+}
+
+function isRecord(value: unknown): value is RawBudgetRecord {
+  return Boolean(objectValue(value));
+}
+
+export function parseBudgetText(text: string, format?: 'csv' | 'json'): ParsedBudgetText {
+  const clean = text.trim();
+  if (!clean) return { format: format ?? 'csv', records: [], errors: ['The file is empty.'] };
+  const inferred = format ?? (clean.startsWith('{') || clean.startsWith('[') ? 'json' : 'csv');
+  return inferred === 'json' ? recordsFromJson(clean) : recordsFromCsv(clean);
+}
+
+function uniqueNumbers(rows: NormalizedBudgetRow[], property: 'population' | 'priorAmount'): number[] {
+  return [...new Set(rows.map((row) => row[property]).filter((value): value is number => value !== undefined))];
+}
+
+function groupCategories(rows: NormalizedBudgetRow[], total: number): BudgetCategorySummary[] {
+  const grouped = new Map<string, BudgetCategorySummary>();
+  rows.forEach((row) => {
+    const key = row.path.join(' > ');
+    const current = grouped.get(key) ?? { category: row.category, path: row.path, amount: 0, sourceRows: [] };
+    current.amount += row.amount;
+    if (row.priorAmount !== undefined) current.priorAmount = (current.priorAmount ?? 0) + row.priorAmount;
+    current.sourceRows.push(row.sourceRow);
+    grouped.set(key, current);
+  });
+  return [...grouped.values()].map((category) => ({
+    ...category,
+    share: total > 0 ? category.amount / total : undefined,
+    variation: category.priorAmount !== undefined && category.priorAmount !== 0 ? (category.amount - category.priorAmount) / Math.abs(category.priorAmount) : undefined,
+  })).sort((left, right) => right.amount - left.amount);
+}
+
+function collectWarnings(rows: NormalizedBudgetRow[], categories: BudgetCategorySummary[], total: number): string[] {
+  const warnings: string[] = [];
+  const duplicate = categories.filter((category) => category.sourceRows.length > 1).map((category) => category.path.join(' > '));
+  if (duplicate.length) warnings.push(`Duplicate category paths were grouped: ${duplicate.join(', ')}.`);
+  const populations = uniqueNumbers(rows, 'population');
+  if (populations.length > 1) warnings.push('More than one population denominator was found. Per-capita spending uses the first value and needs review.');
+  if (populations.some((population) => population <= 0)) warnings.push('Population contains a non-positive value, so the denominator needs review.');
+  if (rows.some((row) => row.amount < 0)) warnings.push('Negative amounts are preserved as adjustments but are excluded from the positive visual composition.');
+  if (total <= 0) warnings.push('The total is not positive, so category shares are not shown.');
+  if (rows.some((row) => row.priorAmount === 0)) warnings.push('A zero prior amount has no percentage variation and is shown without a change rate.');
+  if (rows.some((row) => row.path.length > 1)) warnings.push('Nested paths are grouped by the exact path shown in the source data. Check that parent rows are not also counted as child totals.');
+  return warnings;
+}
+
+export function analyzeBudgetRecords(records: RawBudgetRecord[]): BudgetAnalysis {
+  const normalized = records.map((record, index) => normalizeRow(record, index + 2));
+  const errors = normalized.flatMap((result) => result.error ? [result.error] : []);
+  const rows = normalized.flatMap((result) => result.row ? [result.row] : []);
+  const total = rows.reduce((sum, row) => sum + row.amount, 0);
+  const positiveTotal = rows.reduce((sum, row) => sum + (row.amount > 0 ? row.amount : 0), 0);
+  const categories = groupCategories(rows, total);
+  const populations = uniqueNumbers(rows, 'population');
+  const validPopulation = populations.find((value) => value > 0);
+  const previousTotal = rows.some((row) => row.priorAmount !== undefined) ? rows.reduce((sum, row) => sum + (row.priorAmount ?? 0), 0) : undefined;
+  const currencies = [...new Set(rows.map((row) => row.currency).filter(Boolean))];
+  const periods = [...new Set(rows.map((row) => row.period).filter(Boolean))];
+  const warnings = collectWarnings(rows, categories, total);
+  if (currencies.length > 1) warnings.push('More than one currency label was found. Values have not been converted.');
+  if (currencies.some((currency) => !/^[A-Za-z]{3}$/.test(currency || ''))) warnings.push('At least one currency label is not a three-letter code. Values have not been converted.');
+  if (periods.length > 1) warnings.push('More than one period label was found. The first period is shown and the source periods need review.');
+  return { rows, categories, total, positiveTotal, previousTotal, population: validPopulation, perCapita: validPopulation ? total / validPopulation : undefined, variation: previousTotal !== undefined && previousTotal !== 0 ? (total - previousTotal) / Math.abs(previousTotal) : undefined, currency: currencies[0], period: periods[0], warnings, errors };
+}
+
+export function exampleBudgetRecords(): RawBudgetRecord[] {
+  return [
+    { category: 'Education > Schools', amount: 480000, population: 24000, period: '2026', priorAmount: 430000, currency: 'EUR' },
+    { category: 'Health > Clinics', amount: 310000, population: 24000, period: '2026', priorAmount: 290000, currency: 'EUR' },
+    { category: 'Housing', amount: 220000, population: 24000, period: '2026', priorAmount: 250000, currency: 'EUR' },
+    { category: 'Parks', amount: 145000, population: 24000, period: '2026', priorAmount: 130000, currency: 'EUR' },
+    { category: 'Culture', amount: 95000, population: 24000, period: '2026', priorAmount: 90000, currency: 'EUR' },
+  ];
+}

package/src/tool/public-budget-analyzer/public-budget-analyzer.css

@@ -0,0 +1,461 @@
+:root {
+  --n-paper: #f8f6ef;
+  --n-surface: #fffdf8;
+  --n-ink: #1d252c;
+  --n-muted: #5b6870;
+  --n-line: #cbd5d2;
+  --n-accent: #a6442f;
+  --n-accent-strong: #7d2f27;
+  --n-segment-a: #1e6870;
+  --n-segment-b: #c97943;
+  --n-good: #286c4a;
+  --n-warn-bg: #fff1d2;
+  --n-warn-ink: #704b0b;
+  --n-error-bg: #f9dfdb;
+  --n-error-ink: #7d2f27;
+  --n-shadow: rgba(29, 37, 44, 0.12);
+}
+
+.theme-dark {
+  --n-paper: #15171b;
+  --n-surface: #20242a;
+  --n-ink: #f3eee3;
+  --n-muted: #bcc3c5;
+  --n-line: #4b555b;
+  --n-accent: #e48663;
+  --n-accent-strong: #ffad86;
+  --n-segment-a: #63bcc0;
+  --n-segment-b: #e5a068;
+  --n-good: #7ad49e;
+  --n-warn-bg: #473818;
+  --n-warn-ink: #ffe09b;
+  --n-error-bg: #512923;
+  --n-error-ink: #ffb5a5;
+  --n-shadow: rgba(0, 0, 0, 0.3);
+}
+
+.public-budget-analyzer {
+  --n-paper: #f8f6ef;
+  --n-surface: #fffdf8;
+  --n-ink: #1d252c;
+  --n-muted: #5b6870;
+  --n-line: #cbd5d2;
+  --n-accent: #a6442f;
+  --n-accent-strong: #7d2f27;
+  --n-segment-a: #1e6870;
+  --n-segment-b: #c97943;
+  --n-good: #286c4a;
+  --n-warn-bg: #fff1d2;
+  --n-warn-ink: #704b0b;
+  --n-error-bg: #f9dfdb;
+  --n-error-ink: #7d2f27;
+  --n-shadow: rgba(29, 37, 44, 0.12);
+
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  border-radius: 1.25rem;
+  box-shadow: 0 1rem 2rem var(--n-shadow);
+  color: var(--n-ink);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.theme-dark .public-budget-analyzer {
+  --n-paper: #15171b;
+  --n-surface: #20242a;
+  --n-ink: #f3eee3;
+  --n-muted: #bcc3c5;
+  --n-line: #4b555b;
+  --n-accent: #e48663;
+  --n-accent-strong: #ffad86;
+  --n-segment-a: #63bcc0;
+  --n-segment-b: #e5a068;
+  --n-good: #7ad49e;
+  --n-warn-bg: #473818;
+  --n-warn-ink: #ffe09b;
+  --n-error-bg: #512923;
+  --n-error-ink: #ffb5a5;
+  --n-shadow: rgba(0, 0, 0, 0.3);
+}
+
+main:has(.public-budget-analyzer) {
+  min-width: 0;
+}
+
+.budget-command-bar,
+.budget-result,
+.budget-guidance {
+  padding: 1.5rem;
+}
+
+.budget-command-bar {
+  align-items: stretch;
+  border-bottom: 1px solid var(--n-line);
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: minmax(0, 1fr);
+  min-width: 0;
+}
+
+.budget-dropzone {
+  border: 1px dashed var(--n-accent);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  position: relative;
+  min-width: 0;
+}
+
+.budget-dropzone.is-dragging {
+  background: var(--n-warn-bg);
+}
+
+.budget-dropzone input {
+  block-size: 100%;
+  cursor: pointer;
+  inline-size: 100%;
+  inset: 0;
+  opacity: 0;
+  position: absolute;
+}
+
+.budget-dropzone label {
+  color: var(--n-accent-strong);
+  display: block;
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.budget-dropzone p,
+.budget-dropzone small {
+  color: var(--n-muted);
+  display: block;
+  line-height: 1.5;
+  margin: 0.35rem 0 0;
+  overflow-wrap: anywhere;
+}
+
+.budget-actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-start;
+  min-width: 0;
+}
+
+.budget-actions button {
+  background: var(--n-surface);
+  border: 1px solid var(--n-line);
+  border-radius: 999px;
+  color: var(--n-ink);
+  cursor: pointer;
+  flex: 1 1 8rem;
+  font: inherit;
+  font-size: 0.82rem;
+  min-width: 0;
+  max-width: 16rem;
+  padding: 0.65rem 0.85rem;
+  white-space: normal;
+}
+
+.budget-actions button:first-child {
+  background: var(--n-accent);
+  border-color: var(--n-accent);
+  color: var(--n-surface);
+}
+
+.budget-actions button:hover,
+.budget-actions button:focus-visible {
+  border-color: var(--n-accent-strong);
+  outline: 2px solid var(--n-accent);
+  outline-offset: 2px;
+}
+
+.budget-result {
+  background: var(--n-surface);
+  min-height: 16rem;
+  min-width: 0;
+}
+
+.budget-result-head,
+.budget-detail-heading,
+.budget-landscape-axis,
+.budget-category-label,
+.budget-facts {
+  align-items: baseline;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+}
+
+.budget-result-head h2,
+.budget-detail-heading h3,
+.budget-guidance h2,
+.budget-notice h3 {
+  color: var(--n-ink);
+  margin: 0;
+}
+
+.budget-result-head > p,
+.budget-detail-heading > span,
+.budget-category-row small,
+.budget-landscape-axis,
+.budget-facts span {
+  color: var(--n-muted);
+  font-size: 0.78rem;
+}
+
+.budget-status {
+  border: 1px solid var(--n-line);
+  border-radius: 999px;
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  margin-bottom: 0.55rem;
+  padding: 0.25rem 0.55rem;
+  text-transform: uppercase;
+}
+
+.budget-status-ready { color: var(--n-good); }
+.budget-status-review { color: var(--n-warn-ink); }
+.budget-status-empty { color: var(--n-muted); }
+
+.budget-metrics {
+  display: grid;
+  gap: 0.6rem;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin: 1.5rem 0;
+}
+
+.budget-metric {
+  border-left: 3px solid var(--n-accent);
+  min-width: 0;
+  padding: 0.25rem 0 0.25rem 0.75rem;
+}
+
+.budget-metric span,
+.budget-metric strong,
+.budget-facts strong,
+.budget-facts span {
+  display: block;
+}
+
+.budget-metric span {
+  color: var(--n-muted);
+  font-size: 0.75rem;
+}
+
+.budget-metric strong {
+  font-size: 1.08rem;
+  margin-top: 0.25rem;
+  overflow-wrap: anywhere;
+}
+
+.budget-landscape {
+  border-top: 1px solid var(--n-line);
+  padding-top: 0.8rem;
+}
+
+.budget-category-row {
+  margin-top: 0.9rem;
+}
+
+.budget-category-label strong {
+  font-size: 0.86rem;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.budget-category-label span {
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+
+.budget-bar {
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  height: 1rem;
+  margin-top: 0.35rem;
+  overflow: hidden;
+}
+
+.budget-bar span {
+  background: var(--n-segment-a);
+  display: block;
+  height: 100%;
+  width: var(--segment-width);
+}
+
+.budget-bar .budget-segment-b {
+  background: var(--n-segment-b);
+}
+
+.budget-category-row small {
+  display: block;
+  margin-top: 0.3rem;
+}
+
+.budget-detail {
+  border-top: 1px solid var(--n-line);
+  margin-top: 1.5rem;
+  min-width: 0;
+  padding-top: 1.25rem;
+}
+
+.budget-table-wrap {
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.budget-table-wrap table {
+  border-collapse: collapse;
+  margin-top: 0.8rem;
+  min-width: 42rem;
+  width: 100%;
+}
+
+.budget-table-wrap th,
+.budget-table-wrap td {
+  border-bottom: 1px solid var(--n-line);
+  padding: 0.65rem 0.5rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.budget-table-wrap th {
+  color: var(--n-muted);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+}
+
+.budget-table-wrap td {
+  font-size: 0.84rem;
+}
+
+.budget-notice {
+  border-left: 4px solid var(--n-accent);
+  margin-top: 1.25rem;
+  padding: 0.8rem 1rem;
+}
+
+.budget-notice-warning {
+  background: var(--n-warn-bg);
+  border-color: var(--n-warn-ink);
+  color: var(--n-warn-ink);
+}
+
+.budget-notice-error {
+  background: var(--n-error-bg);
+  border-color: var(--n-error-ink);
+  color: var(--n-error-ink);
+}
+
+.budget-notice h3 {
+  color: var(--n-ink);
+  font-size: 0.95rem;
+}
+
+.budget-notice ul {
+  line-height: 1.5;
+  margin: 0.5rem 0 0;
+  padding-left: 1.15rem;
+}
+
+.budget-facts {
+  border-top: 1px solid var(--n-line);
+  flex-wrap: wrap;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+}
+
+.budget-facts div {
+  min-width: 10rem;
+}
+
+.budget-facts strong {
+  margin-top: 0.25rem;
+  overflow-wrap: anywhere;
+}
+
+.budget-empty-note,
+.budget-inline-message {
+  border: 1px solid var(--n-line);
+  color: var(--n-muted);
+  margin: 0;
+  padding: 1rem;
+}
+
+.budget-inline-error {
+  background: var(--n-error-bg);
+  border-color: var(--n-error-ink);
+  color: var(--n-error-ink);
+}
+
+.budget-guidance {
+  border-top: 1px solid var(--n-line);
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.budget-guidance section {
+  border-left: 2px solid var(--n-accent);
+  padding-left: 0.8rem;
+}
+
+.budget-guidance h2 {
+  font-size: 0.92rem;
+}
+
+.budget-guidance p {
+  color: var(--n-muted);
+  font-size: 0.83rem;
+  line-height: 1.55;
+  margin: 0.5rem 0 0;
+}
+
+@media (max-width: 800px) {
+  .budget-command-bar,
+  .budget-guidance {
+    grid-template-columns: 1fr;
+  }
+
+  .budget-actions {
+    justify-content: flex-start;
+  }
+
+  .budget-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 480px) {
+  .budget-command-bar,
+  .budget-result,
+  .budget-guidance {
+    padding: 1rem;
+  }
+
+  .budget-metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .budget-result-head,
+  .budget-detail-heading,
+  .budget-category-label {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+}
+
+@media print {
+  .public-budget-analyzer {
+    box-shadow: none;
+  }
+
+  .budget-command-bar {
+    display: none;
+  }
+}