/* anpacken-finance.css — one look for every tally (finance) console screen.
   Loaded AFTER each page's own <style>, so it wins ties on the shared
   conventions (cards, tables, buttons, nav) while page-specific inline
   styles — the deliberate ones — still win over it. Tokens mirror the hub
   (bloqq-ai-app public/hub.html) and the swept-measured type system in
   nl-rail.css: change them there, change them here. Visual only. */

:root {
  --bg: #F6F5F0; --surface: #FFFFFF; --surface2: #FAF9F6; --surface3: #F0EEE9;
  --border: #E8E6DE; --border2: #D6D1C7; --border-soft: #EDEAE3;
  --accent: #0E5945; --accent-dark: #0B4736; --accent-dim: rgba(14,89,69,0.10);
  --red: #C24040; --red-dim: rgba(194,64,64,0.10);
  --text: #1A1A18; --text2: #5C5952; --text3: #8A867E;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --shadow: 0 1px 2px rgba(26,26,24,0.04), 0 2px 8px rgba(26,26,24,0.05);
  --shadow-md: 0 2px 6px rgba(26,26,24,0.06), 0 12px 32px rgba(26,26,24,0.08);
}

body { background: var(--bg); color: var(--text); font-family: var(--sans);
  font-size: 14px; line-height: 1.5; }

/* ── page titles: the hub's 32px Fraunces, not 1.7rem ─────────────────── */
h1 { font-family: var(--display); font-size: 32px; font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.15; color: var(--text); }
h1 + p, .sub, .page-sub { color: var(--text2); font-size: 13.5px; }
h2 { font-family: var(--display); font-size: 20px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text); }

/* ── the finance nav: hub pills, not uppercase tracking ───────────────── */
nav.fnav { display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
  font-size: 13px !important; text-transform: none !important;
  letter-spacing: normal !important; }
nav.fnav a { font-weight: 500; color: var(--text2); text-decoration: none;
  padding: 7px 14px; border-radius: 999px; line-height: 1.2;
  transition: background .12s ease, color .12s ease; }
nav.fnav a:hover { color: var(--text); background: var(--surface2); }
nav.fnav a.active { background: var(--accent); color: #FFFFFF; font-weight: 600; }
nav.fnav a.hub { color: var(--text3); }
nav.fnav a.hub:hover { color: var(--text2); background: transparent; }

/* ── cards: one radius, one border, one shadow ────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); }

/* ── stat tiles: quiet labels, display values (swept-measured) ────────── */
.stat, .tile, .kpi { border-radius: 14px; }
.stat .n, .stat b, .tile b, .kpi b, .stat-value { font-family: var(--display);
  font-weight: 500; letter-spacing: -0.015em; }
.stat .l, .stat small, .tile small, .kpi small, .stat-label {
  font-size: 12px !important; font-weight: 500 !important; color: var(--text3) !important;
  text-transform: none !important; letter-spacing: normal !important; }

/* ── tables: sentence-case 11px headers, calm rows ────────────────────── */
table { font-size: 13px; }
th { font-size: 11px !important; font-weight: 500 !important; color: var(--text3) !important;
  text-transform: none !important; letter-spacing: normal !important;
  border-bottom: 1px solid var(--border) !important; }
td { border-bottom: 1px solid var(--border-soft); }
tbody tr:hover td { background: var(--surface2); }

/* ── controls: one family of buttons and fields ───────────────────────── */
button, .btn { font-family: var(--sans); font-size: 13px; font-weight: 600;
  border-radius: 10px; border: 1px solid var(--border2); background: var(--surface);
  color: var(--text); padding: 8px 14px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease; }
button:hover, .btn:hover { background: var(--surface2); }
button.quiet, .quiet { font-weight: 500; border-color: var(--border);
  color: var(--text2); }
button.quiet:hover, .quiet:hover { color: var(--text); }
button.primary, .btn-primary, button[type="submit"] {
  background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
button.primary:hover, .btn-primary:hover, button[type="submit"]:hover {
  background: var(--accent-dark); border-color: var(--accent-dark); }
button.danger { background: var(--red); border-color: var(--red); color: #fff; }

input, select, textarea { font-family: var(--sans); font-size: 13.5px;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 10px;
  padding: 8px 12px; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none;
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
input::placeholder, textarea::placeholder { color: var(--text3); }

/* ── quiet prose ──────────────────────────────────────────────────────── */
.hint { color: var(--text2); font-size: 12.5px; }
.msg { font-size: 13px; }
dialog { border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-md); }
dialog::backdrop { background: rgba(26,26,24,0.35); }