:root {
  --ink: #1d2327;
  --muted: #5d6b72;
  --paper: #f6f5f1;
  --card: #ffffff;
  --line: #d9ddd9;
  --accent: #1f4e5f;
  --accent-ink: #ffffff;
  --warn-bg: #fff4d6;
  --warn-ink: #6b4a00;
  --ok: #2f6b3a;
  --radius: 10px;
  --tap: 44px;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Elements given display rules below must still disappear when hidden. */
[hidden] { display: none !important; }

html, body { margin: 0; }

/* A column at least as tall as the screen, less the tab bar, so the
   watermark after the page's content is pushed to the foot of the screen
   when the content is short, and follows the content when it is long. */
body {
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.topbar {
  background: var(--accent);
  color: var(--accent-ink);
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
}
.topbar h1 { font-size: 1.1rem; margin: 0; }

.banner {
  background: var(--warn-bg);
  color: var(--warn-ink);
  padding: 8px 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.banner a { color: inherit; font-weight: 600; }

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  /* The tab bar is fixed to the bottom, and the body reserves its height, so
     nothing sits behind it. This is breathing room below the last thing on
     the screen: the explanation of what an import could not read once
     vanished for want of it. */
  padding: 12px 16px 32px;
}
main:focus { outline: none; }

h2 { font-size: 1.3rem; margin: 8px 0 12px; }
h3 { font-size: 1.05rem; margin: 0 0 8px; }

nav.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  /* However many tabs the edition has. The work app has four and the personal
     edition five, and a fixed count squeezed the fifth. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}
nav.tabs a {
  text-align: center;
  padding: 14px 4px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  min-height: var(--tap);
}
nav.tabs a.on { color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin: 12px 0;
}

.field { display: block; margin: 10px 0; }
.field > span, .field > label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }
/* A file input is not styled by the rules below and sat flush against its own
   label, which read as one run of text rather than a label and a control. */
.field > input[type="file"] { display: block; margin-top: 6px; max-width: 100%; }

input[type="text"], input[type="date"], input[type="month"], input[type="search"], input:not([type]), select, textarea {
  width: 100%;
  font: inherit;
  padding: 10px;
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
textarea { resize: vertical; }

button, .button {
  font: inherit;
  min-height: var(--tap);
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button:disabled { opacity: 0.5; cursor: default; }
button.primary, .button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.big, .button.big { min-height: 52px; font-weight: 600; }
button.toggle.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* The currency square beside an amount: its symbol and nothing else, square,
   and big enough to hit with a thumb (owner, 2026-09-28). */
.amount-row { flex-wrap: nowrap; align-items: stretch; }
.amount-row input.amount { flex: 1 1 auto; min-width: 0; }
button.currency-square {
  flex: 0 0 auto;
  width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  font-size: 1.2rem;
  font-weight: 700;
}
.conversion-note:empty { display: none; }

.row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin: 8px 0; }
.row > input, .row > select { flex: 1 1 10rem; width: auto; }
.grow { flex: 1 1 auto; }

.capture-buttons > button { flex: 1 1 0; }

.check { display: flex; gap: 10px; align-items: center; margin: 10px 0; min-height: var(--tap); }
.check input { width: 22px; height: 22px; }

.actions { margin: 16px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.actions .primary.big { flex: 1 1 100%; }
.actions.stack { flex-direction: column; }

.hint { color: var(--muted); font-size: 0.9rem; margin: 4px 0; }

.warning {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 8px 0;
}
.warning-card { border-color: #e6c26a; }

.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.thumb { margin: 0; width: calc(50% - 5px); background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.thumb img { width: 100%; height: 160px; object-fit: contain; background: #eee; display: block; }
/* The photo is the way into the crop editor, so it reads as a control. */
.thumb img.tappable { cursor: pointer; }
.thumb figcaption { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; }
.thumb figcaption button { min-height: 36px; padding: 4px 8px; font-size: 0.85rem; }
.thumb .missing { height: 160px; display: grid; place-items: center; color: var(--muted); }

.segmented { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.segmented a { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: #fff; }
.segmented a.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.entry-list, .period-list { list-style: none; padding: 0; margin: 8px 0; }
.entry-list li, .period-list li {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 6px 0;
  padding: 8px 10px;
}
.entry-list li input { width: 22px; height: 22px; flex: none; }
.entry-list a, .period-list a { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: var(--tap); justify-content: center; }

/* Date, amount, category, then markers. The amount column is fixed so the
   decimal points line up down the list. */
.entry-row { display: grid; grid-template-columns: 4.5rem 6.5rem 1fr; grid-template-areas: "date amount category" "markers markers markers"; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.entry-date { grid-area: date; color: var(--muted); font-variant-numeric: tabular-nums; }
.entry-amount { grid-area: amount; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.entry-category { grid-area: category; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-amount.missing, .entry-category.missing { color: var(--warn-ink); font-weight: 400; font-size: 0.9rem; }
.entry-markers { grid-area: markers; display: flex; flex-wrap: wrap; gap: 4px; }
.entry-markers:empty { display: none; }
.marker { font-size: 0.7rem; padding: 1px 6px; border-radius: 999px; background: #eceeec; color: var(--muted); }
.marker.ok { background: #e1efe3; color: var(--ok); }
.entry-list .empty { color: var(--muted); justify-content: center; }

.badges { display: flex; flex-wrap: wrap; gap: 4px; }
.badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; background: #eceeec; color: var(--muted); width: fit-content; }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.ok { background: #e1efe3; color: var(--ok); }

table { border-collapse: collapse; width: 100%; }
td, th { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); }
table.totals td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
table.totals tr.grand td { font-weight: 700; }

.duplicate-entry { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-variant-numeric: tabular-nums; }
.pick-list { max-height: 50vh; overflow: auto; margin-top: 8px; }
.pick { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  max-width: calc(100% - 32px);
  z-index: 30;
  display: flex;
  gap: 12px;
  align-items: center;
}
/* Undo and its like: readable on the dark toast, and big enough to hit. */
.toast-action {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  min-height: 34px;
  padding: 2px 12px;
  flex: none;
}

.dialog { border: none; border-radius: var(--radius); padding: 16px; width: min(32rem, calc(100% - 24px)); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.dialog h2 { margin-top: 0; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }

.crop-overlay {
  position: fixed;
  inset: 0;
  background: #111;
  z-index: 40;
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.crop-overlay { grid-template-rows: auto 1fr auto auto; }
.crop-header { padding: calc(6px + env(safe-area-inset-top)) 12px 6px; color: #fff; font-weight: 600; }
.crop-count { display: flex; gap: 6px; align-items: center; color: #fff; }
.crop-count-value { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.crop-hint { color: #cfd8dc; font-size: 12px; flex: 1; text-align: center; }
.crop-canvas { width: 100%; height: 100%; touch-action: none; display: block; }
.original-view { width: 100%; height: auto; background: #eee; border-radius: 8px; }
.crop-toolbar, .crop-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px; align-items: center; color: #fff; }
.crop-actions { justify-content: space-between; }
.crop-straighten { display: flex; gap: 8px; align-items: center; flex: 1 1 14rem; }
.crop-straighten input { flex: 1; }
.crop-angle { min-width: 5ch; font-variant-numeric: tabular-nums; }

/* The install offer sits in the banner with the backup and update notices. */
.install-offer { display: inline-flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.install-offer .dismiss { background: none; border: 0; text-decoration: underline; cursor: pointer; font: inherit; }

/* Authorship, at the foot of the main screens: Capture, Entries, Reports,
   Settings (and Import in the personal edition), not the screens reached
   from them and never on paper (owner, 2026-09-28). It is part of the page,
   after everything else on it, in the page's own background: on a short
   screen the body's full height seats it just above the tab bar, and on a
   long one it is only seen by scrolling to the end. Pinned over the screen
   instead, it floated across whatever text reached that far. */
.watermark {
  display: none;
  flex: none;
  margin: 0;
  padding: 4px 16px 8px;
  text-align: center;
  font-size: 0.68rem;
  color: var(--muted);
}
body.top-level .watermark { display: block; }
@media print {
  body { display: block; min-height: 0; }
  .watermark, body.top-level .watermark { display: none; }
}