/* Layout: one column of deal "windscreen cards" under a sticky ledger header; widens to two columns on desktop. */
:root {
  --bg: #eef1f0; --surface: #ffffff; --ink: #172026; --muted: #4a575c; --line: #d3dad8;
  --accent: #1d5670; --accent-ink: #ffffff; --ok: #276238; --warn: #7d5200; --crit: #9f2d27;
  --ok-bg: #e3f0e6; --warn-bg: #f8edd6; --crit-bg: #f7e2df; --chip-bg: #e4e9e8;
  --display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --body: "Libre Franklin", "Helvetica Neue", Arial, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #101618; --surface: #172124; --ink: #e5ecec; --muted: #a6b4b6; --line: #2b383b;
  --accent: #86c0d8; --accent-ink: #0d1b21; --ok: #86cc98; --warn: #e6b862; --crit: #f19388;
  --ok-bg: #1b3022; --warn-bg: #352a13; --crit-bg: #3a1d1a; --chip-bg: #223033; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #101618; --surface: #172124; --ink: #e5ecec; --muted: #a6b4b6; --line: #2b383b;
  --accent: #86c0d8; --accent-ink: #0d1b21; --ok: #86cc98; --warn: #e6b862; --crit: #f19388;
  --ok-bg: #1b3022; --warn-bg: #352a13; --crit-bg: #3a1d1a; --chip-bg: #223033; color-scheme: dark; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.5 var(--body); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.login { max-width: 24rem; margin: 0 auto; padding-block: 18vh 3rem; padding-inline: 16px; display: grid; gap: 1rem; }
h1 { font: 700 2rem/1.1 var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; color: var(--muted); }
form { display: grid; gap: .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; }
label { font-weight: 600; }
input { font: inherit; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
button { font: 600 1rem var(--body); padding: .75rem; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.error { color: var(--crit); background: var(--crit-bg); padding: .6rem .8rem; border-radius: 8px; }