/* Finances, under the template's house system (ART.md; Template/HOUSE.md) and its pane-app register
   (HOUSE 11): one column on --page, each section a plate on it, one key number per pane at 34 px,
   tiles and tables in place of sentences, one face, gray chrome, no shadows, no glass. Data hues (a
   pair's two series, the funds) are fitted to a lightness band per theme by tools/art/palette.py;
   four meaning colors, one meaning each (HOUSE 11.2): --own and --owe for the Balance's two sides,
   --up and --down for a change printed with its sign, which still says it without the color. */

@font-face {
  font-family: 'Ysabeau Office';
  src: url(fonts/ysabeau-office-gw.woff2) format('woff2');
  font-weight: 400 650;
  font-display: block;
}

:root {
  --page: #e8eef0;
  --sheet: #f6f9fa;
  --ink: #0f1c23;
  --ink-2: #45555d;
  --ink-3: #5b6a72;
  --line: #c9d4d8;
  --line-strong: #74858c;
  --draw: cubic-bezier(0.2, 0, 0, 1);
  --sheet-in: cubic-bezier(0.32, 0.72, 0, 1);
  --face: 'Ysabeau Office', system-ui, -apple-system, sans-serif;
  color-scheme: light;
  /* data tokens: python3 finances/tools/art/palette.py --json (from Template/) */
  --series-1: #034992; --series-2: #db5923; --series-3: #0a8d61; --series-4: #654301; --series-5: #9f3964; --series-6: #8265d9;
  --amount: #4a6588;
  /* the register's meaning colors (HOUSE 11.2): owned, owed; a change up, down */
  --own: #1f5f99; --owe: #a64a1a; --up: #17723e; --down: #b42318;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #141d21;
    --sheet: #1c272c;
    --ink: #e6edee;
    --ink-2: #a3b1b6;
    --ink-3: #8b9a9f;
    --line: #2a373c;
    --line-strong: #64757b;
    color-scheme: dark;
    --series-1: #abcffe; --series-2: #c34605; --series-3: #06a471; --series-4: #febf62; --series-5: #eb7ea7; --series-6: #8669de;
    --amount: #93aeca;
    --own: #8cbcf0; --owe: #f0a070; --up: #6fd39a; --down: #ff9a8f;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--page);
  color: var(--ink);
  font: 400 13.5px/1.35 var(--face);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
h1, h2, h3, p, dl, dd { margin: 0; }
button, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; }

/* ── the header: the name, the stamp, the panes as tabs ── */
/* centered with the pane's 760 px column on a wide screen: the name and tabs start where the plates do */
.head { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); padding: calc(6px + env(safe-area-inset-top)) calc(max(16px, 50% - 364px) + env(safe-area-inset-right)) 0 calc(max(16px, 50% - 364px) + env(safe-area-inset-left)); }
.head h1 { font-size: 15px; font-weight: 650; line-height: 22px; }
.stamp-home { min-width: 0; padding-bottom: 6px; }
.stamp { position: relative; display: block; max-width: 100%; font-size: 11.5px; line-height: 16px; color: var(--ink-2); }
.stamp .lead { color: var(--ink); }
/* the hit runs up over the name (not a control) and down into the gap: 22 + 16 + 6 = 44 px */
.stamp::before { content: ''; position: absolute; inset: -22px 0 -6px; }

.tabs, .words { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-padding: 0 16px; margin: 0 -8px; }
.tabs::-webkit-scrollbar, .words::-webkit-scrollbar { display: none; }
/* the rows scroll sideways and are exactly a key tall, so a ring outside a key is clipped to a bar */
.tabs button:focus-visible, .words button:focus-visible { outline-offset: -2px; }
.tabs button, .words button { position: relative; flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 8px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
/* the chosen word: 620 in ink, a tracer under it drawn from its tail to its head (HOUSE 4.3) */
.tabs [aria-selected="true"], .words [aria-pressed="true"] { color: var(--ink); font-weight: 620; }
.tabs [aria-selected="true"]::after, .words [aria-pressed="true"]::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 9px;
  height: 4px;
  background:
    radial-gradient(circle at calc(100% - 2px) 50%, var(--ink) 1.9px, transparent 2.1px),
    linear-gradient(90deg, transparent, var(--ink) calc(100% - 3px), transparent calc(100% - 3px)) 0 1px / 100% 2px no-repeat;
  animation: tracer-in 160ms var(--draw);
}
@keyframes tracer-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ── the pane: it scrolls inside the frame under the header, and pads the home indicator itself ── */
.pane { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panebody { max-width: 760px; margin: 0 auto; padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)); padding-top: 4px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

/* ── sections on plates (HOUSE 11.1 rule 4): a --sheet fill, a 1 px --line edge, 12 px apart ── */
.sec { position: relative; margin-top: 12px; padding: 12px 12px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); }
.headline { padding: 14px 12px 12px; }
.balsec { padding-top: 10px; }
.sec > h2, .sec > h3 { font-size: 15px; font-weight: 650; margin-bottom: 4px; }
.group { font-size: 15px; font-weight: 650; padding: 28px 0 0; }
.cap { margin-top: 6px; max-width: 62ch; font-size: 11px; line-height: 15px; color: var(--ink-2); }
.empty { padding: 12px 0; font-size: 12.5px; color: var(--ink-2); }
.statement { padding: 8px 0; line-height: 1.4; max-width: 62ch; }
.statement b { font-weight: 620; }
/* the key number (HOUSE 11.1 rule 2): its label, the figure at 34 px, its change or lead under it */
.hl { display: grid; gap: 2px; }
.hl-what { font-size: 12.5px; font-weight: inherit; color: var(--ink-2); }
.hl-fig { font-size: 34px; font-weight: 650; line-height: 1.05; }
.hl-lead, .hl-chg { margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.hl-chg { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.chg b { font-weight: 620; }
/* a change printed with its sign, in its direction's color (HOUSE 11.1 rule 5) */
.up { color: var(--up); }
.down { color: var(--down); }

/* text keys: a 28 px frame on a 44 px hit */
.keys { display: flex; flex-wrap: wrap; column-gap: 8px; margin-top: 2px; }
.keys:empty { display: none; }
.textkey { position: relative; height: 44px; padding: 0 10px; font-size: 12.5px; }
.textkey::before { content: ''; position: absolute; inset: 8px 0; border: 1px solid var(--line-strong); border-radius: 6px; }
.textkey:active::before { background: color-mix(in srgb, currentColor 22%, transparent); }

/* facts as tiles (HOUSE 11.1 rule 3): two columns, a label, the value at 19 px, a note, parted by hairlines */
.facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; margin-top: 10px; }
.fact { padding: 7px 0 6px; border-top: 1px solid var(--line); }
.fact dt { font-size: 11.5px; color: var(--ink-2); }
.fact b { display: block; font-size: 19px; font-weight: 650; line-height: 1.25; white-space: nowrap; }
.fact dd span { display: block; font-size: 11.5px; line-height: 15px; color: var(--ink-2); }

/* rows: accounts, holdings, loans, merchants, repeating charges, transactions */
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); }
.sec > h2 + .row, .sec > h3 + .row, .day + .row { border-top: 0; }
.row .meta, .row .basis, .row .sm { font-size: 12.5px; color: var(--ink-2); }
.row .basis { grid-column: 1 / 3; margin-top: 2px; }
.row .amt { text-align: right; font-size: 15px; font-weight: 600; white-space: nowrap; }
.row.debt .amt { color: var(--owe); }
.row .sm { display: block; font-weight: 400; }
.row .words { grid-column: 1 / 3; margin-top: 2px; }
.day { padding: 14px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.daysec { margin-top: 6px; padding: 0 12px; }
.daysec > .row:first-child { border-top: 0; }
.track { grid-column: 1 / 3; height: 6px; margin: 6px 0 2px; background: var(--line); }
.track i { display: block; height: 100%; background: var(--amount); }

/* ── charts: square bars, ink only where it is read against ── */
.chartwrap { position: relative; margin-top: 4px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.chartwrap svg { display: block; overflow: visible; touch-action: pan-y; }
.chartwrap text { font-size: 10.5px; fill: var(--ink-2); }
.chartwrap .mk { fill: var(--ink-3); }
.chartwrap .head-word { font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.chartwrap .nw-what { font-size: 12.5px; }
.chartwrap .nw-fig { font-size: 15px; font-weight: 600; fill: var(--ink); }   /* the key number above carries it */
.chartwrap .own-word { fill: var(--own); }
.chartwrap .owe-word { fill: var(--owe); }
.blk-own { fill: var(--own); }
.blk-owe { fill: var(--owe); }
/* a halo, a casing or a dot's ring takes the plate it is drawn on */
.halo { paint-order: stroke; stroke: var(--sheet); stroke-width: 3px; stroke-linejoin: round; }
.grid { stroke: var(--line); }
.base { stroke: var(--line-strong); }
.casing { fill: none; stroke: var(--sheet); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.cdot { fill: var(--ink); stroke: var(--sheet); stroke-width: 2; }
.ink { fill: var(--ink); }
.ruler { fill: var(--line-strong); }
/* the Balance's two sides as a table under it: each side's total, then its rows */
.sides { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.side-what { font-size: 12.5px; font-weight: 620; }
.side-own .side-what { color: var(--own); }
.side-owe .side-what { color: var(--owe); }
.side-total { font-size: 19px; font-weight: 650; line-height: 1.2; margin-bottom: 4px; }
.side-rows div { display: flex; justify-content: space-between; gap: 6px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.side-rows dt { color: var(--ink-2); }
.side-rows dd { font-weight: 560; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 10.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { flex: 0 0 auto; width: 8px; height: 8px; background: var(--c); }
.legend i.line { width: 16px; height: 2px; }

/* the readout card (HOUSE 4.7): the one card on the screen */
.readout { position: absolute; z-index: 3; width: max-content; min-width: 176px; max-width: min(280px, calc(100% - 16px)); padding: 4px 4px 10px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--sheet); animation: card-in 120ms var(--draw); }
@keyframes card-in { from { opacity: 0; transform: translateY(4px); } }
.readout-where { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.readout-close { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin: -6px 0 -10px; color: var(--ink-2); }
.readout-close svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.readout-main { padding-right: 8px; }
.readout-value { font-size: 21px; font-weight: 600; line-height: 1.2; }
.readout-unit { font-size: 13.5px; color: var(--ink-2); }
.readout-all { display: grid; grid-template-columns: auto 1fr; gap: 1px 14px; margin: 4px 6px 0 0; font-size: 12.5px; }
.readout-all:empty { display: none; }
.readout-all dt { color: var(--ink-2); }
.readout-all dd { text-align: right; font-weight: 560; }

table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { padding: 4px 6px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th { font-size: 11.5px; font-weight: 600; color: var(--ink-2); border-bottom-color: var(--line-strong); }
th:first-child, td:first-child { text-align: left; padding-left: 0; white-space: normal; }
.tableview { overflow-x: auto; margin-top: 4px; }

/* the search field: the house's frame, and no browser clear button in the browser's blue (HOUSE 4.8);
   16 px, off the scale, because iOS zooms the page into a field set smaller (as Shelf Atlas's find field) */
.search { display: block; width: 100%; height: 44px; margin: 12px 0 4px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--ink); background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 6px; appearance: none; -webkit-appearance: none; }
.search::placeholder { color: var(--ink-2); }
.search::-webkit-search-cancel-button, .search::-webkit-search-decoration { appearance: none; -webkit-appearance: none; }

/* a problem with the data is a sentence on a plate, never a blank pane */
.notice { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 5; width: max-content; max-width: min(300px, calc(100% - 32px)); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--sheet); line-height: 1.4; text-align: center; }
.notice.kept { position: fixed; }
.notice-lines { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }

/* the key to About at every pane's end (HOUSE 11.1 rule 1) */
.aboutlink { display: block; margin: 14px 0 0; min-height: 44px; font-size: 12.5px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.aboutlink:active { color: var(--ink); }

/* ── About: a full-height sheet ── */
.about { position: fixed; inset: 0; z-index: 20; }
.about-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--sheet); animation: sheet-in 220ms var(--sheet-in); }
@keyframes sheet-in { from { transform: translateY(100%); } }
.about-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
.about-head h2 { font-size: 15px; font-weight: 650; }
.about .textkey::before { border: 0; }
.about-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
.about-body section { max-width: 62ch; padding: 12px 0; border-bottom: 1px solid var(--line); }
.about-body h3 { margin-bottom: 6px; font-size: 13.5px; font-weight: 650; }
.about-body p { line-height: 1.5; }
.about-body p + p, .about-body p + dl { margin-top: 8px; }
.about-body dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; line-height: 1.45; }
.about-body dt { color: var(--ink-2); }
.about-body dd { overflow-wrap: anywhere; }
.about-foot { margin-top: 8px; }

@media (hover: hover) {
  .tabs button:hover, .words button:hover, .stamp:hover, .readout-close:hover, .aboutlink:hover { color: var(--ink); }
  .textkey:hover::before { background: color-mix(in srgb, currentColor 7%, transparent); }
}
/* a phone on its side: the header is one row */
@media (orientation: landscape) and (max-height: 500px) {
  .head { grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: 22px 24px; column-gap: 16px; padding-top: env(safe-area-inset-top); }
  .stamp-home { grid-area: 2 / 1; padding-bottom: 0; }
  .stamp { white-space: nowrap; }
  .tabs { grid-area: 1 / 2 / 3 / 3; align-self: center; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}