/* Kalman — the look of the whole thing.
   ---------------------------------------------------------------------------
   Mobile-first, and written with logical properties (inline-start, block-end)
   rather than left and right, so the entire layout mirrors itself when Hebrew
   turns the page right-to-left. Nothing here needs a second Hebrew stylesheet.

   **No web fonts.** Every typeface here is already on the reader's machine.
   That is the same rule the charts follow: nothing is fetched from somebody
   else's server, because fetching it would tell that server which pages are
   being looked at and when. The cost is that the app looks slightly different
   on a Mac and on Windows. That is a fair price.

   **Numbers line up.** Every figure uses tabular numerals, so a column of
   amounts can be read down rather than deciphered row by row. On a screen made
   almost entirely of money this is the single most useful typographic choice
   available, and it costs one line.

   **Quiet by default.** Colour is spent on the two or three things that need
   attention and withheld everywhere else. The plan's rule is that an empty
   screen is a good week; a design that shouts on every card has no way left to
   shout when something is actually wrong.
*/

:root {
  /* --- the page ------------------------------------------------------- */
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-sunk: #f7f9fb;
  --text: #16202b;
  --text-soft: #3f4d5c;
  /* Dark enough to clear the 4.5:1 readability standard against the page
     background, not only against a white card. At #66747f it was 4.44 on the
     page, which is the shade most of the muted text actually sits on. */
  --muted: #63717c;
  --border: #dde3e9;
  --border-soft: #e9eef2;

  /* --- the one accent, and the three that mean something --------------- */
  --accent: #1f5fbf;
  --accent-soft: #e8f0fc;
  --accent-text: #ffffff;
  --ok: #1c6349;
  --ok-soft: #e4f1ea;
  --warn: #8a5206;
  --warn-soft: #fdf1df;
  --error: #b42318;
  --error-soft: #fdeceb;

  /* Kept as their old names so every existing rule still works. */
  --notice-bg: var(--warn-soft);
  --notice-border: #f0c48a;

  /* --- spacing, on a scale rather than by eye -------------------------- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  --radius: 10px;
  --radius-small: 7px;

  /* Two levels of lift, so a card and a menu are not the same object. */
  --lift: 0 1px 2px rgba(22, 32, 43, 0.04), 0 1px 3px rgba(22, 32, 43, 0.06);
  --lift-high: 0 2px 4px rgba(22, 32, 43, 0.06), 0 12px 28px -14px rgba(22, 32, 43, 0.28);

  /* --- type ------------------------------------------------------------ */
  --font: system-ui, -apple-system, "Segoe UI", "Noto Sans Hebrew",
          "Arial Hebrew", Arial, sans-serif;
  --font-figures: "Segoe UI", system-ui, -apple-system, "Noto Sans Hebrew", sans-serif;

  --t-tiny: 0.78rem;
  --t-small: 0.875rem;
  --t-body: 1rem;
  --t-lead: 1.08rem;
  --t-h3: 1.05rem;
  --t-h2: 1.2rem;
  --t-h1: 1.45rem;
  --t-figure: 1.6rem;

  --maxw: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151a;
    --surface: #1a2027;
    --surface-sunk: #151b21;
    --text: #e8edf3;
    --text-soft: #c3ccd6;
    --muted: #93a0ac;
    --border: #2f3943;
    --border-soft: #262f38;

    --accent: #6ba5f5;
    --accent-soft: #182333;
    --accent-text: #0b1220;
    --ok: #5fbf95;
    --ok-soft: #142620;
    --warn: #e0a44f;
    --warn-soft: #2a2114;
    --error: #ff9b8f;
    --error-soft: #2e1a18;

    --notice-border: #7a5c2e;

    --lift: 0 1px 2px rgba(0, 0, 0, 0.4);
    --lift-high: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 30px -16px rgba(0, 0, 0, 0.9);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Anything that is a figure reads down a column, not across a row. */
.networth-main, .networth-second, .total strong, .section-amount,
.exposure-amount, .holding-value, .entry-body, .facts dd,
.chart-latest strong, .chart-edges, .sheet-total, .tally dd,
td, th, .money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- getting to the content ------------------------------------------- */

.skip-link {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-start: var(--s3);
  z-index: 20;
  padding: var(--s2) var(--s4);
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 0 0 var(--radius-small) var(--radius-small);
  text-decoration: none;
  font-weight: 600;
  transition: inset-block-start 0.12s ease;
}
.skip-link:focus { inset-block-start: 0; }

/* --- the bar across the top -------------------------------------------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}

/* The header, two ways round.
   
   On a phone the links take a line of their own, so the name and the language
   share the first one -- which is a whole row saved on every page, and a third
   of a phone screen was header before this.
   
   On anything wider it is all one line, with the language pushed to the far
   end, because it is a setting rather than a place to go. */
.site-header > .header-out { margin-inline-start: auto; order: 1; }
.site-header > .lang-switch { margin-inline-start: auto; order: 2; }
/* Only the first of the two gets pushed to the far end, or the gap between
   them is split. Logged out there is no Log out, and the language buttons take
   the job. */
.site-header > .header-out ~ .lang-switch { margin-inline-start: 0; }
.site-header > .site-nav { order: 3; flex-basis: 100%; }

@media (min-width: 40rem) {
  .site-header > .site-nav { order: 1; flex-basis: auto; }
  .site-header > .header-out { order: 2; }
  .site-header > .lang-switch { order: 3; }
}

.brand {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--text);
  text-decoration: none;
  margin-inline-end: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s2) var(--s4);
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--accent);
  text-decoration: none;
  padding-block: var(--s1);
  border-block-end: 2px solid transparent;
}
.site-nav a:hover { border-block-end-color: var(--border); }

/* Where you are now. Set from the template, not guessed at in CSS. */
.site-nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  border-block-end-color: var(--accent);
}

/* --- the column everything sits in ------------------------------------- */

.page {
  max-width: var(--maxw);
  margin: var(--s5) auto;
  padding: 0 var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* A card is one thing. Several in a row used to be several margins that
   collapsed into each other differently depending on what was inside them. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: var(--s5) var(--s5);
}

h1 {
  font-size: var(--t-h1);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}

.muted { color: var(--muted); }
small.muted { display: block; margin-block-start: var(--s1); }

.stack { display: flex; flex-direction: column; gap: var(--s4); margin-block-start: var(--s4); }

.field { display: flex; flex-direction: column; gap: var(--s1); }
.field > span { font-weight: 600; font-size: var(--t-small); color: var(--text-soft); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  background: var(--surface);
  border-color: var(--accent);
}

/* One visible focus ring everywhere, including for people using a keyboard
   because a mouse is not an option rather than a preference. */
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

.button {
  display: inline-block;
  padding: 0.65rem 1.1rem;
  font: inherit;
  font-weight: 600;
  text-align: center;
  color: var(--accent-text);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  cursor: pointer;
  text-decoration: none;
}
.button:hover { filter: brightness(1.08); }
.button:active { filter: brightness(0.94); }
.button-small { padding: 0.35rem 0.7rem; font-size: var(--t-small); }

/* A second action beside a first one should not compete with it. */
.button-quiet {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--border);
}
.button-quiet:hover { background: var(--surface-sunk); filter: none; }

.link-button {
  padding: 0;
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
}
.link-button:hover { text-decoration: underline; }

.inline-form { display: inline; }

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  overflow: hidden;
}
.lang-option {
  padding: 0.3rem 0.6rem;
  font: inherit;
  font-size: var(--t-tiny);
  font-weight: 600;
  background: var(--surface);
  color: var(--accent);
  border: 0;
  border-inline-start: 1px solid var(--border);
  cursor: pointer;
}
.lang-option:first-child { border-inline-start: 0; }
.lang-option:hover { background: var(--surface-sunk); }
.lang-option.is-current {
  background: var(--accent);
  color: var(--accent-text);
  cursor: default;
}

.messages { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.message {
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-small);
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--muted);
  box-shadow: var(--lift);
}
.message.success { border-inline-start-color: var(--ok); }
.message.error { border-inline-start-color: var(--error); }
.message.warning { border-inline-start-color: var(--warn); }

.notice {
  padding: var(--s3) var(--s4);
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  border-radius: var(--radius-small);
}
/* A notice that is a whole card should not also draw its own box inside it. */
.card.notice { border-inline-start: 3px solid var(--warn); }
.card.notice.warning { border-inline-start-color: var(--error); }

.form-error, .errorlist {
  color: var(--error);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-small);
}

/* Said once at the top, before the form: nothing was saved, and here is each
   thing to fix, as a link that jumps to it. */
.form-error-summary {
  border: 1px solid var(--error);
  border-radius: var(--radius-small);
  padding: var(--s3) var(--s4);
  background: var(--surface);
}
.form-error-summary .form-error-line { margin: 0; font-size: var(--t-body); }
.form-error-summary ul { margin: var(--s2) 0 0; padding-inline-start: 1.1rem; list-style: disc; }
.form-error-summary li { margin-block-start: var(--s1); }
.form-error-summary a { color: inherit; }

/* The box that needs attention is the box that is marked. A red line of text
   under a field is easy to miss when the field above it looks untouched. */
.field.has-error input,
.field.has-error select,
.field.has-error textarea,
.field-block.has-error input {
  border-color: var(--error);
}
/* Jumping to a field should not put it under the top edge of the screen. */
.field input, .field select, .field textarea { scroll-margin-block: var(--s6); }

.device-list { list-style: none; padding: 0; margin: var(--s4) 0; display: flex; flex-direction: column; gap: var(--s3); }
.device {
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  padding: var(--s3) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.device.is-current { border-color: var(--accent); }
.device-main { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }

.tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: var(--t-tiny);
  font-weight: 600;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

.device-meta { font-size: var(--t-small); color: var(--muted); }

a { color: var(--accent); }

/* --- more room once there is more room --------------------------------- */

@media (min-width: 40rem) {
  :root {
    --maxw: 42rem;
    --t-h1: 1.65rem;
    --t-figure: 1.9rem;
  }
  .page { margin-block-start: var(--s6); gap: var(--s5); }
  .card { padding: var(--s5) var(--s6); }
  .site-header { padding-inline: var(--s5); }
}

@media (min-width: 64rem) {
  :root {
    --maxw: 50rem;
    --t-figure: 2.1rem;
  }
}

/* Settings sections and the dashboard's short link list */
/* --- a list of places to go ---------------------------------------------- */
/*
   A row you tap anywhere on, with its name and one line saying what it is for.
   Used wherever a screen is really a menu. The whole row is the link, so there
   is no small target to hunt for with a thumb, and the arrow says which way it
   goes -- inline-start/end, so it turns round by itself in Hebrew.
*/
.menu-rows { display: flex; flex-direction: column; }
.menu-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: var(--s3) 0;
  border-block-start: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
  position: relative;
  padding-inline-end: 1.5rem;
}
.menu-row:first-child { border-block-start: 0; }
.menu-row::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.35rem;
  inset-block-start: 50%;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: -0.28rem;
  border-block-start: 2px solid var(--muted);
  border-inline-end: 2px solid var(--muted);
  transform: rotate(45deg);
}
/* The borders themselves already swap sides in Hebrew, because they are named
   block-start and inline-end rather than top and right. Only the turn has to
   be undone, or the arrow ends up pointing at the floor. */
[dir="rtl"] .menu-row::after { transform: rotate(-45deg); }
.menu-row:hover { background: var(--surface-sunk); }
.menu-row:hover .menu-name { text-decoration: underline; }
.menu-name { font-weight: 600; color: var(--accent); }
.menu-about { color: var(--muted); font-size: var(--t-small); }

/* The way back, at the top of a screen. Sits above the heading rather than
   beside it so it is in the same place on every screen and in both languages.
   In Hebrew the arrow points the same way it does in the text around it -- the
   character itself is bidirectional, so nothing has to be flipped by hand. */
.back-link { margin-block: 0 var(--s3); }
.back-link a { text-decoration: none; }
.back-link a:hover { text-decoration: underline; }

.setting {
  padding-block: 1rem;
  border-block-start: 1px solid var(--border);
}
.setting:first-of-type { border-block-start: 0; padding-block-start: 0; }
.setting h2 { font-size: 1rem; margin: 0 0 0.4rem; }
.setting p { margin: 0 0 0.5rem; }

h2 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; }

.quick-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.quick-links a { display: inline-block; padding-block: 0.15rem; }

/* Holdings and the ledger */
.totals { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block: 0.5rem 1rem; }
.total { display: flex; flex-direction: column; }
.total-label { font-size: 0.8rem; color: var(--muted); }
.total strong { font-size: 1.3rem; }

.small { font-size: 0.85rem; }

.holding-list { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: 0.8rem; }
.holding {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.holding.is-archived { opacity: 0.65; }
.holding-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.holding-head a { text-decoration: none; }
.holding-meta, .holding-value { font-size: 0.9rem; }

/* Choosing several news sources at once: a tickbox and the name on one line,
   the "visit" link at the far end, and the whole name part tappable. */
.source-pick {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
}
.source-pick .field.checkbox { flex: 1 1 14rem; }
.source-pick .field.checkbox > span { font-weight: inherit; }

/* The button that approves the ticked ones. It stays at the bottom of the
   screen while the list scrolls past, so it is always one press away rather
   than a scroll to the end of a long list. */
.bulk-bar {
  position: sticky;
  inset-block-end: 0;
  z-index: 1;
  padding-block: var(--s3);
  background: var(--surface);
  border-block-start: 1px solid var(--border-soft);
}
.tag-quiet { background: var(--muted); }

.facts { margin: 1rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-block-end: 1px solid var(--border);
  padding-block-end: 0.4rem;
}
.facts dt { color: var(--muted); margin: 0; font-size: 0.9rem; }
.facts dd { margin: 0; font-weight: 600; }

.ledger { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.entry { border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.85rem; }
.entry-head { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.entry-body { margin-block: 0.2rem; }
.row-links { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* The overview: one row of "add" buttons, and debts shown as debts */
.add-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1rem 0.5rem; }
.is-debt { color: var(--error); }
.facts dd { text-align: end; }

/* Dashboard: one number per section, detail on tap */
.networth { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-block: 0.3rem 0.9rem; }
.networth-main { font-size: 2rem; line-height: 1.2; }
.networth-second { font-size: 1.15rem; color: var(--muted); }

.sections { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.section { border: 1px solid var(--border); border-radius: 8px; }
.section > summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  list-style: none;
}
.section > summary::-webkit-details-marker { display: none; }
.section > summary::before {
  content: "▸";
  color: var(--muted);
  margin-inline-end: 0.5rem;
  font-size: 0.8em;
}
.section[open] > summary::before { content: "▾"; }
.section-label { flex: 1; }
.section-amount { font-weight: 600; white-space: nowrap; }

.section-rows { list-style: none; margin: 0; padding: 0 0.85rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.section-rows > li {
  display: flex;
  justify-content: space-between;
  /* Two columns while both halves fit, and the second drops to its own line
     when they do not -- rather than each half breaking across two lines of its
     own, which is what "DEMO Example Haifa flat · 2026-09" against "12 days
     late" did at 375px, and it read as four things rather than one.
     No breakpoint: it gives way exactly when it has to. */
  flex-wrap: wrap;
  gap: 0.1rem 1rem;
  font-size: 0.92rem;
  border-block-start: 1px solid var(--border);
  padding-block-start: 0.4rem;
}

.exposure { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.exposure > li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.1rem 1rem; }
.exposure-amount { font-weight: 600; }

/* Change since the last snapshot */
.change { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.3rem; color: #16794a; }
.change.is-down { color: var(--error); }
@media (prefers-color-scheme: dark) { .change { color: #5fd39b; } }

/* Broker report preview */
.table-scroll { overflow-x: auto; }
.preview { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.preview th, .preview td {
  text-align: start;
  padding: 0.4rem 0.5rem;
  border-block-end: 1px solid var(--border);
  white-space: nowrap;
}
.preview th { color: var(--muted); font-weight: 600; }
.preview tr.status-duplicate { opacity: 0.55; }
.preview tr.status-problem td { color: var(--error); }
.preview tr.status-new_holding td { font-style: italic; }
input[type="file"] { font: inherit; padding: 0.5rem 0; }

/* A button that cannot be pressed yet must look like it */
.button[disabled], .button[disabled]:hover {
  background: var(--muted);
  border-color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Decision Inbox */
.quiet-week { font-size: 1.35rem; font-weight: 600; margin: 0.6rem 0 0.3rem; }
.inbox-entry .inbox-title { font-size: 1.1rem; margin: 0 0 0.3rem; }
.inbox-entry .inbox-title a { text-decoration: none; }
.touches { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0; font-size: 0.9rem; }
.why { margin-block: 0.6rem; }
.decide-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.button-quiet { background: var(--surface); color: var(--accent); border-color: var(--border); }

/* Alerts */
.field.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}
.field.checkbox > span { font-weight: 500; }

/* A tickbox and the sentence explaining it. The sentence is outside the label
   -- tapping an explanation should not tick a box -- so it needs something to
   hold the two together at the right spacing. */
.field-block { display: flex; flex-direction: column; gap: var(--s1); }
.field-block > small { margin-inline-start: 1.75rem; }
.field.checkbox input[type="checkbox"] {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin: 0;
  flex: none;
}

/* Two short fields sit side by side on a wide screen and stack on a phone. */
.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row > .field { flex: 1 1 8rem; }

.notice.warning {
  background: var(--surface);
  border-color: var(--error);
  color: var(--error);
}
.notice.warning .muted { color: inherit; opacity: 0.85; }

/* Rules */
.rule-hit { padding-block: 0.6rem; border-block-end: 1px solid var(--border); }
.rule-hit:last-child { border-block-end: none; }
.rule-said { font-weight: 600; margin: 0 0 0.3rem; }
.rule-title { font-size: 1.05rem; margin: 0 0 0.4rem; }
.rule-off { opacity: 0.6; }
.calendar-list .calendar-near { font-weight: 600; }

/* A link that is drawn as a button should not also be underlined like a link. */
a.button { text-decoration: none; }

/* Property: rent and real returns */
.facts-total dt, .facts-total dd { font-weight: 700; }
.facts-total { border-block-start: 1px solid var(--border); padding-block-start: 0.4rem; }
.rent-missing { color: var(--error); }
.rent-partial { font-weight: 600; }

/* Charts, drawn on the server as SVG */
.chart { margin-block: 0.8rem; }
.chart svg {
  inline-size: 100%;
  block-size: 190px;
  overflow: visible;
}
.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.chart-line-second {
  stroke: var(--muted);
  stroke-dasharray: 5 4;
}
.chart-area { fill: var(--accent); opacity: 0.12; }
.chart-bar { fill: var(--accent); }
.chart-zero {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.chart-edges {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.3rem 0 0;
}
.chart-key { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.key-line {
  display: inline-block;
  inline-size: 1.6rem;
  block-size: 0;
  border-block-start: 2px solid var(--accent);
}
.key-line-second {
  border-block-start-style: dashed;
  border-block-start-color: var(--muted);
  margin-inline-start: 0.8rem;
}

/* The search box that sits on every screen */
.site-search {
  max-inline-size: var(--maxw);
  margin: 0.8rem auto 0;
  padding-inline: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.site-search form { display: flex; gap: 0.4rem; flex: 1 1 18rem; }
.site-search input[type="search"] {
  flex: 1;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.hit { padding-block: 0.55rem; border-block-end: 1px solid var(--border); }
.hit:last-child { border-block-end: none; }
.hit-title { margin: 0 0 0.15rem; font-weight: 600; }
.hit-title a { text-decoration: none; }
.hit-detail { margin: 0; }

/* Looking at somebody else's money. Deliberately hard to miss. */
.visiting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  background: var(--notice-bg);
  border-block-end: 2px solid var(--notice-border);
}
.visiting p { margin: 0; font-size: 0.95rem; }

/* The line that has to be on every page */
.site-footer {
  max-inline-size: var(--maxw);
  margin: 2rem auto 3rem;
  padding: 1rem;
  border-block-start: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
}
.not-advice { margin: 0 0 0.4rem; }

/* Checking your money on a train. Blurred, not removed: the shape of the
   screen stays readable, and one tap brings the figures back. */
.numbers-hidden .networth,
.numbers-hidden .exposure-amount,
.numbers-hidden .facts dd,
.numbers-hidden .section-rows li span:last-child,
.numbers-hidden .entry-body,
.numbers-hidden .change,
.numbers-hidden .rule-said,
.numbers-hidden .chart svg,
.numbers-hidden .chart-latest,
.numbers-hidden .holding-value,
.numbers-hidden .total strong,
.numbers-hidden .sheet-total {
  filter: blur(7px);
  user-select: none;
}
.numbers-hidden .networth:hover,
.numbers-hidden .facts dd:hover {
  filter: none;
}

/* The one line somebody opens the dashboard to read: is there anything
   for me? The good answer is no, so "no" gets a calm treatment rather
   than a grey one -- silence here is a result, not an absence. */
.needs-you { border-inline-start: 3px solid var(--border); }
.needs-you.is-clear { border-inline-start-color: var(--ok, #1c6349); }
.needs-you.is-something { border-inline-start-color: var(--accent); }
.needs-you.is-urgent { border-inline-start-color: var(--error); }
.needs-you-line { margin: 0; font-size: 1.15rem; font-weight: 600; }
.needs-you-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
}
.needs-you-list li { color: var(--muted); }
.needs-you-list strong { color: var(--text); }
/* Every line is a link now. Kept in the reading colour rather than link blue --
   a row of blue would shout, and this card is meant to be calm even when the
   answer is "yes, four things". The underline says it can be pressed. */
.needs-you-list a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  /* A flex box eats the space between the number and the words, and "82months
     of rent" is not a sentence. Put it back as a gap rather than relying on
     whitespace that only survives while this is not a flex box.

     The figure ends up outside the underline, which turns out to be the better
     reading of it: the number is the thing being counted and the words are the
     thing to press. */
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}
.needs-you-list a:hover { text-decoration-color: currentColor; }
/* Jumping to a card should not leave it jammed against the top of the screen. */
[id^="dashboard-"] { scroll-margin-block-start: var(--s4); }

/* A faint stem marking where the line ends, and the figure it ends on.
   The figure is printed under the drawing rather than inside it: the SVG is
   stretched to its container's width, and text in there would stretch too. */
.chart-now {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}
.chart-hover { fill: transparent; }
.chart-latest {
  margin: 0.4rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.chart-latest strong { font-size: 1.1rem; }

/* The page you print and take to somebody. On screen it is another card; on
   paper the app around it disappears and only the sheet is left. */
.sheet {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.sheet-head { border-block-end: 2px solid var(--text); padding-block-end: 0.6rem; }
.sheet section { margin-block-start: 1.5rem; }
.sheet h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-block-end: 0.5rem;
}
.sheet-total { font-size: 1.6rem; font-weight: 700; margin: 0; }
.sheet-foot { margin-block-start: 1.5rem; border-block-start: 1px solid var(--border); padding-block-start: 0.6rem; }

@media print {
  .site-header, .site-footer, .site-search, .no-print, .messages { display: none !important; }
  body { background: #fff; color: #000; }
  .page { padding: 0; max-inline-size: none; }
  .sheet { border: 0; padding: 0; }
  .sheet section { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}

/* ===========================================================================
   Refinements
   ---------------------------------------------------------------------------
   Everything above grew one phase at a time, which is why the same idea is
   sometimes spelled three ways. Rather than rewrite rules that work and risk
   breaking screens nobody is looking at tonight, this section tightens the
   things worth tightening: a type scale that means something, figures that can
   be read down a column, and enough room to press things with a thumb.
   =========================================================================== */

/* --- headings that step down rather than all being roughly the same ------ */

h2 {
  font-size: var(--t-h2);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s3);
}
.card > h2:not(:first-child) { margin-block-start: var(--s5); }

h3 {
  font-size: var(--t-h3);
  line-height: 1.3;
  margin: var(--s4) 0 var(--s2);
}

.setting h2 { font-size: var(--t-h3); margin: 0 0 var(--s1); }
.setting { padding-block: var(--s4); border-block-start: 1px solid var(--border-soft); }

/* --- figures ------------------------------------------------------------- */

.networth { margin-block: var(--s2) var(--s3); gap: var(--s3) var(--s4); }
.networth-main {
  font-size: var(--t-figure);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.networth-second { font-size: var(--t-lead); }

.total strong { font-size: var(--t-h2); letter-spacing: -0.01em; }
.total-label { font-size: var(--t-tiny); letter-spacing: 0.02em; }
.totals { gap: var(--s5); }

/* Up is green, down is red, and neither is the accent -- so a figure moving
   never competes with the one thing on the screen that wants pressing. */
.change { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s2); }
.change { color: var(--ok); font-weight: 600; }
.change.is-down { color: var(--error); }
.change .muted { font-weight: 400; }

.small { font-size: var(--t-small); }

/* --- rows of things ------------------------------------------------------ */

.holding, .entry, .device {
  border-color: var(--border-soft);
  border-radius: var(--radius-small);
  background: var(--surface-sunk);
}
.holding { padding: var(--s3) var(--s4); gap: var(--s1); }
.holding-list { gap: var(--s2); margin-block: var(--s4); }
.holding-head a { font-weight: 600; }
.holding-head a:hover { text-decoration: underline; }
.holding-meta, .holding-value { font-size: var(--t-small); color: var(--muted); }
.holding-value strong, .holding-value b { color: var(--text); }

/* A quiet tag has to be readable, which the old one was not: it painted the
   background the muted colour and left the text the accent colour on top. */
.tag-quiet {
  background: var(--surface-sunk);
  color: var(--muted);
  border: 1px solid var(--border);
}

.section-rows > li { padding-block: var(--s2); border-block-end: 1px solid var(--border-soft); }
.section-rows > li:last-child { border-block-end: 0; }

.facts > div { border-block-end-color: var(--border-soft); padding-block-end: var(--s2); }
.facts dt { font-size: var(--t-small); }

.entry { padding: var(--s3) var(--s4); }
.entry-meta { color: var(--muted); }

/* An entry that a later statement restated. Struck through rather than hidden:
   it was true on its own day, and a figure that quietly disappears is worse
   than one that is visibly no longer counted. */
.entry:has(.superseded) .entry-body { text-decoration: line-through; opacity: 0.7; }
.superseded { font-style: italic; }

/* --- room for a thumb ---------------------------------------------------- */

/* A finger is about 9mm across; a line of text is about 4mm tall. So anything
   meant to be tapped needs to be taller than the words in it.
   
   Only things that are *the point of their row* are listed here. A link inside
   a sentence stays the height of the sentence: padding it out would space the
   paragraph oddly and gain nothing, because a link inside prose is read before
   it is tapped. */
@media (pointer: coarse) {
  .button, .link-button, .site-nav a, .lang-option, .section > summary,
  .header-out .link-button,
  .row-links a, .section-rows a, .site-footer a, .hit-title a,
  .entry-head a, .needs-you-list a, .back-link a, .menu-row {
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
  }
  /* A menu row is already tall enough and already a block. It only appears in
     the list above so nothing here shrinks it -- and it must keep its own
     stacked, start-aligned layout rather than the centred one. */
  .menu-row { display: flex; flex-direction: column; align-items: flex-start; }
  /* The words beside a tickbox are part of the target: they toggle it too. */
  .field.checkbox { min-block-size: 2.75rem; }
  .row-links { gap: var(--s4) var(--s5); }
}

/* --- tables -------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin-block: var(--s3); }
.preview th {
  position: sticky;
  inset-block-start: 0;
  background: var(--surface);
  font-size: var(--t-tiny);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.preview td, .preview th { border-block-end-color: var(--border-soft); }
.preview tbody tr:hover { background: var(--surface-sunk); }

/* --- nothing to show ----------------------------------------------------- */

/* An empty screen is a result, not a gap. It gets room and a calm voice
   rather than being squeezed into the corner of a card. */
.card > h1 + .muted { font-size: var(--t-lead); max-inline-size: 34rem; }

/* --- printing ------------------------------------------------------------ */

@media print {
  .card { box-shadow: none; border-color: #999; break-inside: avoid; }
  .page { gap: var(--s4); }
}

/* --- people who would rather things held still --------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* The row of "add one of these" buttons is a toolbar, not the thing the screen
   wants you to do. Five solid blue buttons in a row spend all the emphasis the
   page has before the money underneath gets any. */
.add-row .button {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--border);
  font-weight: 500;
}
.add-row .button:hover { background: var(--accent-soft); filter: none; }
.add-row { gap: var(--s2); margin-block: var(--s4) var(--s2); }

/* Log out is a form button rather than a link, because logging out changes
   something and a link should not. It should still look like its neighbours. */
.site-nav .link-button, .header-out .link-button {
  color: var(--accent);
  padding-block: var(--s1);
  border-block-end: 2px solid transparent;
}
.site-nav .link-button:hover,
.header-out .link-button:hover { text-decoration: none; border-block-end-color: var(--border); }