/* Ice's design language on the web: one file every web surface (the site, apps/landing; the web app, apps/web) builds
   from, so they read as one. Its palette is the app's (apps/ios/PersonalAccounting/FinanceDesign.swift); then the one
   type scale and spacing scale, and the parts every surface is made of: buttons, the bar, rows. Each surface's own
   stylesheet lays out its pages from these and adds nothing here. */
:root {
  --page: #ffffff;
  --surface: #ffffff;
  --ink: #0a1119;
  --muted: #5b6b7a;
  --border: #d3dee7;
  --accent: #2f7dc4;
  --on-accent: #ffffff;
  --alert: #c2475a;
  --frost: #5a6fd6;
  --good: #23946b;
  --live: #34c759;
  --tile: #f2f5f8;
  /* The app's chrome: its drawer (the sidebar), and the bar over a page. */
  --drawer: #e4eaf0;
  --chrome: #0a1119;
  --on-chrome: #eef3f8;
  --radius: 18px;
  /* One tint per account type (the double-entry root). */
  --tint-Assets: #1d93b5; --tint-Liabilities: #5d7389; --tint-Equity: #2f7dc4; --tint-Income: #2e8c9e;
  --tint-Expenses: #4f78b5; --tint-Pots: #7b7fd1;
  /* A report part's colour: its server-assigned slot (1–8); a part without one (Other) is neutral. */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948; --series-none: #93a3b3;
  /* A surface's bar, pinned to its top. */
  --nav: 52px;
  /* The whole type scale: every text is one of these five sizes. */
  --display: clamp(44px, 7vw, 80px);
  --title: clamp(28px, 4vw, 40px);
  --large: clamp(18px, min(2.6vw, 3.4svh), 36px);
  --body: 17px;
  --small: 14px;
  /* The whole spacing scale: within a part, between parts, between groups, and around sections. */
  --gap-s: 8px;
  --gap: 16px;
  --gap-l: 32px;
  --gap-xl: clamp(48px, 6vw, 96px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0a1119;
    --surface: #1a2634;
    --ink: #eef3f8;
    --muted: #93a3b3;
    --border: #243244;
    --accent: #6fb3ee;
    --on-accent: #0a1119;
    --alert: #f0899a;
    --frost: #8d9cf0;
    --good: #5fd0a5;
    --live: #30d158;
    --tile: #101923;
    --drawer: #05090e;
    --chrome: #05090e;
    --tint-Assets: #5cc6e3; --tint-Liabilities: #9db0c3; --tint-Equity: #6fb3ee; --tint-Income: #6cc9d8;
    --tint-Expenses: #8fb1e3; --tint-Pots: #adb0ef;
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; --series-none: #5b6b7a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font: var(--body)/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, p, hgroup { margin: 0; }

/* A button: a pill in ink, or `.pill`, the small one in the accent. */
button {
  height: 48px; padding: 0 24px; font: inherit; font-size: var(--body); font-weight: 700; line-height: 1; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--page); cursor: pointer; white-space: nowrap;
}
.pill { height: auto; padding: 6px 14px; background: var(--accent); color: var(--on-accent); font-size: var(--small); }

/* The bar: a field and its button in one pill. */
.bar {
  width: 100%; display: flex; padding: 6px; border-radius: 999px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--border), 0 20px 48px rgb(10 17 25 / 0.25);
}
.bar:focus-within { box-shadow: 0 0 0 3px var(--accent), 0 20px 48px rgb(10 17 25 / 0.25); }
.bar input { flex: 1; min-width: 0; padding: 0 18px; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--body); font-weight: 600; outline: none; }

/* Rows, as in the app: a card holds one; a group holds several, ruled between. A row is one line: its name (with a
   mark or a detail beside it) and its figure. */
.card, .group { background: var(--surface); border-radius: var(--radius); padding: var(--gap); }
.group { display: grid; gap: var(--gap); }
.group .line + .line { border-top: 1px solid var(--border); padding-top: var(--gap); }
.line { display: flex; justify-content: space-between; align-items: center; gap: var(--gap-s); font-weight: 600; white-space: nowrap; }
.line span { display: flex; align-items: center; gap: var(--gap-s); }
.line b { font-weight: 700; font-variant-numeric: tabular-nums; }
.line small, .line time { font-size: 0.7em; color: var(--muted); font-variant-numeric: tabular-nums; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--mark, var(--frost)); }

/* Ice, by name and icon. */
.brand { display: flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 800; color: var(--ink); text-decoration: none; }