@import url('fonts/fonts.css');

/* «Поток» for the family finance dashboard. Load AFTER the dashboard's inline <style>.
   Theme: data-theme on <html> and/or <body>; dark («Вечер») is the default.
   Old variables (--text --text2 --grid --accent --card ...) are plain hex for Chart.js.
   Styles the markup of flow.js (.ff-header .ff-wordmark .ff-nav .ff-hdr-right .ff-month .ff-q(.has-q) .ff-q-dot
   .ff-me .ff-ini .ff-page .ff-title .ff-filter-slot .ff-filterbar .ff-subnav .ff-sub .ff-struct-cta .ff-struct-note .ff-cta
   .ff-psec .ff-psec-h .ff-psec-b .ff-prow .ff-plabel .ff-pval .ff-pinfo .ff-source .ff-switch .ff-app-bar)
   and flow-views.js (class list at the top of that file). Header link and question rows both use .ff-q:
   header rules are scoped to .ff-header, row rules to .ff-qlist. */

/* ---------- tokens (design/flow-tokens.css) ---------- */
:root, [data-theme="dark"] {
  --ff-ground: oklch(0.25 0.03 45);
  --ff-surface: oklch(0.28 0.035 45);
  --ff-raised: oklch(0.29 0.035 45);
  --ff-raised-2: oklch(0.31 0.035 45);
  --ff-raised-3: oklch(0.33 0.035 45);
  --ff-selected: oklch(0.30 0.035 45);
  --ff-seg-on: oklch(0.36 0.04 50);
  --ff-line-soft: oklch(0.31 0.03 45);
  --ff-line: oklch(0.33 0.03 45);
  --ff-line-strong: oklch(0.36 0.03 45);
  --ff-field-edge: oklch(0.38 0.03 45);
  --ff-edge: oklch(0.40 0.03 45);
  --ff-ink: oklch(0.93 0.02 75);
  --ff-ink-soft: oklch(0.85 0.02 72);
  --ff-ink-voice: oklch(0.80 0.03 70);
  --ff-ink-2: oklch(0.78 0.03 70);
  --ff-ink-3: oklch(0.66 0.03 65);
  --ff-candle: oklch(0.85 0.12 78);
  --ff-candle-ink: oklch(0.88 0.10 80);
  --ff-candle-bg: oklch(0.34 0.05 60);
  --ff-on-candle: oklch(0.24 0.03 45);
  --ff-honey: oklch(0.80 0.11 78);
  --ff-ember: oklch(0.80 0.10 32);
  --ff-cream: oklch(0.90 0.07 90);
  --ff-shadow: oklch(0.12 0.02 45 / .9);
  --ff-ring: oklch(0.62 0.09 70);
  --ff-focus: oklch(0.80 0.12 75);
  --ff-hover-edge: oklch(0.50 0.04 55);
  --ff-sel: oklch(0.85 0.12 78 / .14);
  color-scheme: dark;
}
[data-theme="light"] {
  --ff-ground: oklch(0.975 0.012 80);
  --ff-surface: oklch(0.955 0.016 78);
  --ff-raised: oklch(0.94 0.018 76);
  --ff-raised-2: oklch(0.92 0.022 74);
  --ff-raised-3: oklch(0.90 0.024 72);
  --ff-selected: oklch(0.93 0.02 75);
  --ff-seg-on: oklch(0.88 0.035 70);
  --ff-line-soft: oklch(0.91 0.015 75);
  --ff-line: oklch(0.88 0.018 72);
  --ff-line-strong: oklch(0.84 0.02 70);
  --ff-field-edge: oklch(0.82 0.02 70);
  --ff-edge: oklch(0.78 0.025 68);
  --ff-ink: oklch(0.27 0.03 45);
  --ff-ink-soft: oklch(0.33 0.03 48);
  --ff-ink-voice: oklch(0.38 0.035 50);
  --ff-ink-2: oklch(0.44 0.03 55);
  --ff-ink-3: oklch(0.52 0.03 60);
  --ff-candle: oklch(0.62 0.13 62);
  --ff-candle-ink: oklch(0.48 0.11 55);
  --ff-candle-bg: oklch(0.92 0.05 75);
  --ff-on-candle: oklch(0.98 0.01 80);
  --ff-honey: oklch(0.70 0.12 72);
  --ff-ember: oklch(0.55 0.13 35);
  --ff-cream: oklch(0.55 0.08 120);
  --ff-shadow: oklch(0.40 0.03 50 / .25);
  --ff-ring: oklch(0.70 0.10 65);
  --ff-focus: oklch(0.62 0.13 62);
  --ff-hover-edge: oklch(0.66 0.04 60);
  --ff-sel: oklch(0.62 0.13 62 / .12);
  color-scheme: light;
}

/* ---------- old variables read by the dashboard JS: plain hex only (Chart.js) ---------- */
html body,
html body[data-theme="dark"],
html[data-theme="dark"] body:not([data-theme="light"]) {
  --bg: #2e1d15; --card: #2e1d15; --text: #f0e6da; --text2: #c4b4a3;
  --border: #433129; --grid: #3d2c24; --accent: #f9c46e;
  --accent-soft: #4b321c; --pos: #fad18a; --neg: #f7a695; --fam: #e5a2ac;
  --chip-bg: #3f2b21; --hover: #3a261d;
  color-scheme: dark;
}
html body[data-theme="light"],
html[data-theme="light"] body:not([data-theme="dark"]) {
  --bg: #fbf6ee; --card: #fbf6ee; --text: #33221a; --text2: #604e43;
  --border: #dfd6cb; --grid: #e7e0d7; --accent: #bd7221;
  --accent-soft: #f9e1c0; --pos: #8c4a11; --neg: #b05139; --fam: #ba6c78;
  --chip-bg: #eee3d5; --hover: #f2eade;
  color-scheme: light;
}

/* chart palette read by the dashboard via cvar(): cats are 6-digit hex, bands "r,g,b", the rest hex/rgba (no oklch) */
html body,
html body[data-theme="dark"],
html[data-theme="dark"] body:not([data-theme="light"]) {
  --ff-cat-1: #f69c8d; --ff-cat-2: #776a0a; --ff-cat-3: #ebd96e; --ff-cat-4: #ba5661; --ff-cat-5: #b1a02e;
  --ff-cat-6: #f4ccce; --ff-cat-7: #a28572; --ff-cat-8: #815f5e; --ff-cat-9: #b7b292; --ff-cat-10: #b16512;
  --ff-cat-11: #dc8748; --ff-cat-12: #fab45f; --ff-cat-13: #e37a84; --ff-cat-14: #a64831; --ff-cat-15: #ce6c54;
  --ff-cat-16: #b5820c; --ff-cat-17: #d1c685; --ff-cat-18: #fcce9a; --ff-cat-19: #807b5d; --ff-cat-20: #d7aa42;
  --ff-cat-21: #b99495; --ff-cat-22: #ddbcab; --ff-cat-23: #95760d; --ff-cat-24: #955905; --ff-cat-25: #937072;
  --ff-cat-26: #a5a080; --ff-cat-27: #cca6a8;
  --ff-band-1: 249,196,110; --ff-band-2: 247,166,149; --ff-band-3: 240,221,169; --ff-band-4: 229,181,104;
  --ff-band-5: 229,162,172; --ff-band-6: 200,190,130; --ff-band-7: 249,196,110; --ff-band-8: 247,166,149;
  --ff-band-9: 240,221,169; --ff-band-10: 229,181,104; --ff-band-11: 229,162,172; --ff-band-12: 200,190,130;
  --ff-c-dyn-fill: rgba(249,196,110,.18); --ff-c-person-fill: rgba(249,196,110,.15);
  --ff-c-family: #e5a2ac; --ff-c-cum: #8fc9c4; --ff-c-wife: #f7a695; --ff-c-other: #8a7869; --ff-c-salary: #e5b568;
}
html body[data-theme="light"],
html[data-theme="light"] body:not([data-theme="dark"]) {
  --ff-cat-1: #c8664e; --ff-cat-2: #5e5303; --ff-cat-3: #c4b345; --ff-cat-4: #8c2b3b; --ff-cat-5: #e29ba0;
  --ff-cat-6: #8b7b02; --ff-cat-7: #815f5c; --ff-cat-8: #a99e7f; --ff-cat-9: #a05000; --ff-cat-10: #d98941;
  --ff-cat-11: #a68183; --ff-cat-12: #69484a; --ff-cat-13: #a64450; --ff-cat-14: #7f3e00; --ff-cat-15: #e47c75;
  --ff-cat-16: #857a5c; --ff-cat-17: #b5820c; --ff-cat-18: #d7a677; --ff-cat-19: #7c6628; --ff-cat-20: #a6656a;
  --ff-cat-21: #be9a2a; --ff-cat-22: #ae6700; --ff-cat-23: #f69370; --ff-cat-24: #928d6e; --ff-cat-25: #b47e59;
  --ff-cat-26: #875132; --ff-cat-27: #b99495;
  --ff-band-1: 189,114,33; --ff-band-2: 176,81,57; --ff-band-3: 107,121,65; --ff-band-4: 204,145,64;
  --ff-band-5: 186,108,120; --ff-band-6: 150,120,40; --ff-band-7: 189,114,33; --ff-band-8: 176,81,57;
  --ff-band-9: 107,121,65; --ff-band-10: 204,145,64; --ff-band-11: 186,108,120; --ff-band-12: 150,120,40;
  --ff-c-dyn-fill: rgba(189,114,33,.16); --ff-c-person-fill: rgba(189,114,33,.13);
  --ff-c-family: #ba6c78; --ff-c-cum: #6b7941; --ff-c-wife: #b05139; --ff-c-other: #a8998b; --ff-c-salary: #cc9140;
}

/* ---------- base ---------- */
html { background: var(--ff-ground); }
html body {
  margin: 0;
  background: var(--ff-ground);
  color: var(--ff-ink);
  font-family: Commissioner, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ff-candle-ink); }
a:hover { color: var(--ff-ink); }
button, input, select, textarea { font: inherit; }
input::placeholder, textarea::placeholder { color: var(--ff-ink-3); }
::selection { background: var(--ff-candle-bg); color: var(--ff-ink); }
:focus-visible { outline: 1px solid var(--ff-focus); outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
.mini-scroll, .table-scroll, .multi-list, .ov-months, .ov-legend, .ovt-scroll, .ov-table { scrollbar-color: var(--ff-edge) transparent; scrollbar-width: thin; }

/* generic controls */
button, select, .btn {
  color: var(--ff-ink);
  background: var(--ff-raised);
  border: 1px solid var(--ff-edge);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
button:hover, .btn:hover, select:hover { border-color: var(--ff-hover-edge); background: var(--ff-raised-2); }
button:disabled, button:disabled:hover { opacity: .4; cursor: default; background: var(--ff-raised); border-color: var(--ff-edge); }
select {
  -webkit-appearance: none; appearance: none;
  padding: 7px 32px 7px 14px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select:hover, .pager select, .card-head select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select option { background: var(--ff-surface); color: var(--ff-ink); }
input[type="text"], input[type="number"], input[type="email"], input[type="search"], textarea {
  color: var(--ff-ink);
  background: var(--ff-ground);
  border: 1px solid var(--ff-field-edge);
  border-radius: 12px;
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  cursor: text;
  outline: none;
  transition: border-color .2s;
}
input[type="text"]:hover, input[type="number"]:hover { border-color: var(--ff-edge); }
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, textarea:focus { border-color: var(--ff-candle); }
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.btn-primary { background: var(--ff-candle); border-color: var(--ff-candle); color: var(--ff-on-candle); font-weight: 500; }
.btn-primary:hover { background: var(--ff-honey); border-color: var(--ff-honey); }
.mono { font-variant-numeric: tabular-nums lining-nums; }
.dim { color: var(--ff-ink-2); }
.clickable { cursor: pointer; text-decoration: underline dotted transparent; text-underline-offset: 3px; }
.clickable:hover { color: var(--ff-candle-ink); text-decoration-color: var(--ff-candle-ink); }
.empty { color: var(--ff-ink-3); padding: 40px 0; font: italic 400 17px/1.5 Lora, serif; }
.chart-fail { color: var(--ff-ember); font-size: 14px; }

/* ---------- page frame ---------- */
/* WA-001: the page's own legacy dashboard (Russian, built into the HTML) is not painted until flow.js has built the shell around it;
   the animation is the way out if flow.js never gets there */
html:not(.ff-built) .page { visibility: hidden; animation: ff-prebuild-out 0s 4s forwards; }
@keyframes ff-prebuild-out { to { visibility: visible; } }
.page { max-width: 1440px; margin: 0 auto; padding: 40px 64px 80px; }
.page .ff-page { max-width: none; padding: 0; }

/* the dashboard's own header (title row) */
.page > header { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 32px; }
.page > header h1 { font: italic 400 44px/1.2 Lora, serif; letter-spacing: 0; color: var(--ff-ink); flex: 0 0 100%; }
.page > header .sub { color: var(--ff-ink-2); font-size: 13px; }
.hdr-actions { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------- KPI row ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 0 0 40px; padding: 8px 0 0; }
.kpi { background: transparent; border: 0; border-radius: 0; padding: 0; min-width: 0; }
.kpi-l { color: var(--ff-ink-2); font-size: 13px; text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
.kpi-v { font-size: 26px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; color: var(--ff-ink); font-variant-numeric: tabular-nums lining-nums; }
.kpi-v.pos { color: var(--ff-candle); }
.kpi-v.neg { color: var(--ff-ember); }
.kpi:first-child .kpi-v.neg { color: var(--ff-ink); }
.kpi-v.fam { color: var(--fam); }
.kpi-s { color: var(--ff-ink-3); font-size: 12px; margin-top: 2px; }

/* ---------- filter bar ---------- */
.filters {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center;
  background: var(--ff-surface); border: 0; border-radius: 24px;
  box-shadow: inset 0 0 0 1px var(--ff-line);
  padding: 24px; margin: 0 0 16px;
}
.f-group { grid-column: 1 / -1; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 16px; align-items: center; min-width: 0; }
.filters > .f-group:first-child { grid-column: 1; }
.filters > .f-group:nth-child(2) { grid-column: 2; grid-row: 1; display: block; }
.filters > .f-group:nth-child(2) .f-label { display: none; }
.f-group.grow { flex: none; }
.f-label { color: var(--ff-ink-2); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; display: flex; flex-direction: column; gap: 2px; }
.f-label .f-hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin: 0; color: var(--ff-candle-ink); font-size: 12px; }
.f-body { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }

.pill {
  padding: 7px 14px; font-size: 14px; line-height: 20px; border-radius: 999px;
  border: 0; background: transparent; color: var(--ff-ink-2);
  box-shadow: inset 0 0 0 1px var(--ff-line-strong);
}
.pill:hover { background: transparent; color: var(--ff-ink); box-shadow: inset 0 0 0 1px var(--ff-hover-edge); }
.pill.quick { color: var(--ff-ink-2); }
.pill.month.active, .pill.quick.active, #ovFixed.active {
  background: var(--ff-candle-bg); color: var(--ff-candle-ink); font-weight: 500;
  border: 0; box-shadow: inset 0 0 0 1px var(--ff-ring);
}
/* «Весь период» on: the month pills behind it stay quiet */
.pill.quick.active ~ .pill.month.active { background: transparent; color: var(--ff-ink-2); font-weight: 400; box-shadow: inset 0 0 0 1px var(--ff-line-strong); }
.pill-sep { width: 1px; align-self: stretch; background: var(--ff-line); margin: 4px 4px; }

.seg { display: inline-flex; gap: 2px; padding: 4px; border: 0; border-radius: 999px; overflow: visible; box-shadow: inset 0 0 0 1px var(--ff-line-strong); }
.seg button { border: 0; border-radius: 999px; padding: 6px 16px; background: transparent; color: var(--ff-ink-2); font-size: 14px; }
.seg button:hover { background: var(--ff-raised); color: var(--ff-ink); }
.seg button.active { background: var(--ff-seg-on); color: var(--ff-candle-ink); font-weight: 500; }

.multi { position: relative; display: inline-block; }
.multi-btn {
  border: 0; border-radius: 999px; padding: 7px 12px 7px 14px; font-size: 14px;
  background: transparent; color: var(--ff-ink); box-shadow: inset 0 0 0 1px var(--ff-line-strong);
}
.multi-btn:hover { background: var(--ff-raised); box-shadow: inset 0 0 0 1px var(--ff-hover-edge); }
.multi-btn .caret { color: var(--ff-ink-3); font-size: 10px; margin-left: 2px; }
.multi-btn.active { background: var(--ff-candle-bg); color: var(--ff-candle-ink); box-shadow: inset 0 0 0 1px var(--ff-ring); }
.multi-btn b { color: var(--ff-candle-ink); font-weight: 500; }
.multi-panel {
  top: calc(100% + 8px); min-width: 280px; max-width: 360px;
  background: var(--ff-raised); border: 0; border-radius: 16px; padding: 12px;
  box-shadow: inset 0 0 0 1px var(--ff-line-strong), 0 24px 48px -16px var(--ff-shadow);
}
.multi-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.multi-actions button { font-size: 13px; padding: 4px 12px; line-height: 18px; background: transparent; border-color: var(--ff-edge); }
.ma-info { margin-left: auto; color: var(--ff-ink-3); font-size: 12px; }
input.multi-search { width: 100%; height: 36px; margin-bottom: 8px; font-size: 14px; border-radius: 10px; }
.multi-list { max-height: 280px; overflow: auto; }
.multi-h { color: var(--ff-ink-3); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; padding: 10px 8px 4px; }
.multi-list label { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap; color: var(--ff-ink); font-size: 14px; }
.multi-list label:hover { background: var(--ff-raised-2); }
.mo-l { overflow: hidden; text-overflow: ellipsis; }
.mo-sub { color: var(--ff-ink-3); font-size: 12px; }
.mo-n { margin-left: auto; color: var(--ff-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }

.search-box { position: relative; display: inline-flex; align-items: center; }
.search-box .sc { position: absolute; right: 6px; border: 0; background: transparent; color: var(--ff-ink-2); padding: 0 8px; font-size: 16px; line-height: 28px; }
.search-box .sc:hover { background: var(--ff-raised-2); color: var(--ff-ink); }

.toggles { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; margin: 0 0 16px; padding: 0 8px; }
.toggles label { display: inline-flex; gap: 8px; align-items: center; color: var(--ff-ink-soft); cursor: pointer; font-size: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; min-height: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ff-raised-2); color: var(--ff-ink); border-radius: 999px; padding: 4px 6px 4px 14px; font-size: 14px; }
.chip button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; padding: 0; font-size: 16px; line-height: 1; color: var(--ff-ink-2); display: inline-grid; place-items: center; }
.chip button:hover { background: var(--ff-seg-on); color: var(--ff-ink); }
.chip-reset { border: 0; border-radius: 999px; font-size: 14px; color: var(--ff-ink-2); background: transparent; padding: 4px 10px; }
.chip-reset:hover { color: var(--ff-ember); background: transparent; }

/* ---------- cards: hairlines, not boxes ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px 56px; margin: 0 0 56px; }
.card {
  position: relative; background: transparent; border: 0; border-radius: 0;
  border-top: 1px solid var(--ff-line); padding: 24px 0 0; min-width: 0; overflow: hidden;
}
.card.wide { grid-column: 1 / -1; }
.card-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 16px; padding-right: 48px; }
.card-head h3 { font: italic 400 28px/1.25 Lora, serif; color: var(--ff-ink); margin-right: 8px; }
.card-head select { font-size: 13px; padding: 5px 30px 5px 12px; line-height: 18px; background-color: var(--ff-raised); }
.card-head input[type="text"] { font-size: 13px; padding: 0 12px; }
.card-head input[type="text"] { height: 32px; }
.card-head button { font-size: 13px; padding: 5px 12px; line-height: 18px; }
.card-head .push { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; }
.card-head .zinfo, .zinfo { color: var(--ff-ink-3); font-size: 12px; }
.card-head .lbl, .lbl { color: var(--ff-ink-2); font-size: 13px; cursor: pointer; }
.card .sub { color: var(--ff-ink-3) !important; font-size: 12px !important; }
#btnStructExpand { background: var(--ff-candle-bg); color: var(--ff-candle-ink); border-color: var(--ff-ring); font-weight: 500; }
#btnStructExpand:hover { background: var(--ff-seg-on); }

.card-max {
  position: absolute; top: 24px; right: 0; z-index: 5;
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--ff-edge); border-radius: 50%; background: transparent;
  color: var(--ff-ink-2); font-size: 14px; line-height: 1;
}
.card-max:hover { color: var(--ff-candle-ink); border-color: var(--ff-ring); background: var(--ff-raised); }
.card.maxed {
  position: fixed; inset: 16px; z-index: 300; overflow: auto; display: flex; flex-direction: column;
  background: var(--ff-surface); border: 0; border-radius: 24px; padding: 32px 40px;
  box-shadow: inset 0 0 0 1px var(--ff-line-strong), 0 32px 80px -24px var(--ff-shadow);
}
.card.maxed { animation: ff-fade-in .2s ease-out; }
.card.maxed .card-max { position: fixed; top: 32px; right: 40px; width: 36px; height: 36px; font-size: 15px; padding: 0; color: var(--ff-ember); border-color: var(--ff-ember); }
.card.maxed .chart-wrap, .card.maxed .treemap { height: auto !important; flex: 1; min-height: 320px; }
.card.maxed .mini-scroll { max-height: none; flex: 1; }
.card.maxed .trend-row.head, .card.maxed .sub-row.head, .card.maxed th { background: var(--ff-surface); }
body.no-scroll { overflow: hidden; }

.chart-wrap { position: relative; height: 320px; min-height: 180px; resize: vertical; overflow: hidden; }
.chart-wrap.tall { height: 380px; }
#dynSel { background: var(--ff-sel); border: 1px solid var(--ff-candle); }
.treemap { position: relative; height: 320px; min-height: 180px; resize: vertical; overflow: hidden; border-radius: 12px; }
.tm-box { border-radius: 6px; padding: 8px 10px; color: #fff; }
.tm-box:hover { filter: brightness(1.1); }
/* tiles range from cream to deep olive: labels sit on a small ground-coloured plate so any tile stays legible */
.tm-n, .tm-v { align-self: flex-start; max-width: 100%; padding: 0 6px; border-radius: 4px; text-shadow: none; color: #f0e6da; background: rgba(46,29,21,.62); }
.tm-n { font-size: 13px; font-weight: 500; }
.tm-v { font-size: 12px; opacity: 1; margin-top: 2px; }
body[data-theme="light"] .tm-n, body[data-theme="light"] .tm-v { color: #33221a; background: rgba(251,246,238,.78); }
.fam-note { margin-top: 12px; color: var(--fam); font-size: 13px; }

/* ---------- trends / subscriptions / habits ---------- */
.mini-scroll { max-height: 360px; overflow: auto; resize: vertical; }
.trend-row { grid-template-columns: 14px minmax(120px, 1fr) 100px 96px 96px 72px 80px 96px; gap: 8px; padding: 8px 8px; border-radius: 0; font-size: 14px; border-bottom: 1px solid var(--ff-line-soft); }
.trend-row .t-num { white-space: nowrap; }
.trend-row:hover { background: var(--ff-raised); }
.trend-row.head, .sub-row.head {
  color: var(--ff-ink-2); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  background: var(--ff-ground); border-bottom: 1px solid var(--ff-line-strong);
}
.trend-row.head:hover, .sub-row.head:hover { background: var(--ff-ground); }
.t-sort:hover { color: var(--ff-candle-ink); }
.t-cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.trend-spark { gap: 2px; height: 22px; }
.trend-spark i { width: 10px; border-radius: 2px 2px 0 0; opacity: .6; }
.trend-spark i.last { opacity: 1; }
.t-num { font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.t-up { color: var(--ff-ember); font-weight: 500; }
.t-down { color: var(--ff-cream); font-weight: 500; }
.t-goal { cursor: pointer; border-bottom: 1px dashed var(--ff-edge); text-align: right; }
.t-goal.ok { color: var(--ff-cream); }
.t-goal.over { color: var(--ff-ember); font-weight: 500; }
.trend-row input { height: 28px; font-size: 13px; padding: 0 8px; border-radius: 8px; }
.sub-row { grid-template-columns: minmax(0, 1fr) 96px 96px 112px; gap: 8px; padding: 8px 8px; border-radius: 0; font-size: 14px; border-bottom: 1px solid var(--ff-line-soft); }
.sub-row:hover { background: var(--ff-raised); }
.sub-name small { color: var(--ff-ink-3); }
.sub-dead { opacity: .5; }
.sub-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--ff-candle-bg); color: var(--ff-candle-ink); }
.sub-badge.off { background: var(--ff-raised-2); color: var(--ff-ink-3); }
.habits { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 32px; }
.habit { border: 0; border-top: 1px solid var(--ff-line-soft); border-radius: 0; padding: 16px 0 20px; }
.habit .h-name { font-size: 13px; color: var(--ff-ink-2); }
.habit .h-year { font-size: 20px; font-weight: 500; letter-spacing: -.01em; margin-top: 4px; color: var(--ff-ink); white-space: nowrap; }
.habit .h-mo { font-size: 12px; color: var(--ff-ink-3); }

/* ---------- tables ---------- */
.table-card { padding-bottom: 8px; }
.table-scroll { overflow: auto; resize: vertical; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; color: var(--ff-ink-2); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  padding: 10px 12px; border-bottom: 1px solid var(--ff-line-strong); background: var(--ff-ground);
}
th:hover { color: var(--ff-candle-ink); }
th[data-col="amount_eur"] { text-align: right; }
td { padding: 9px 12px; border-bottom: 1px solid var(--ff-line-soft); color: var(--ff-ink); }
tbody tr:hover { background: var(--ff-raised); }
.desc { max-width: 280px; }
.amt-n { color: var(--ff-ink); font-weight: 500; text-align: right; }
.amt-p { color: var(--ff-candle-ink); font-weight: 500; text-align: right; }
.amt-t { color: var(--ff-ink-3); text-align: right; }
.cat-cell[data-cat="Не разобрано"] { color: var(--ff-candle-ink); }
.cat-cell[data-cat="Не разобрано"]::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ff-candle); margin-right: 8px; vertical-align: 1px; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: flex-end; padding: 16px 0 4px; color: var(--ff-ink-2); font-size: 13px; }
.pager button { min-width: 36px; padding: 5px 12px; font-size: 14px; line-height: 18px; }
.pager select { padding: 5px 30px 5px 12px; border-radius: 999px; border: 1px solid var(--ff-edge); background-color: var(--ff-raised); color: var(--ff-ink); font-size: 13px; line-height: 18px; }

/* ---------- structure overlay ---------- */
.overlay { background: var(--ff-ground); padding: 32px 64px 24px; }
.ov-head { gap: 12px 24px; margin-bottom: 24px; }
.ov-head h2 { font: italic 400 36px/1.2 Lora, serif; letter-spacing: 0; color: var(--ff-ink); }
.ov-sub { color: var(--ff-ink-2); font-size: 13px; }
.ov-controls { gap: 12px; flex-wrap: wrap; }
.ov-close { color: var(--ff-ink-2); }
.ov-close:hover { color: var(--ff-ember); border-color: var(--ff-ember); }
.ov-body { gap: 40px; }
.ov-months-wrap { flex: 0 0 220px; }
.ovm-title { color: var(--ff-ink-2); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; padding: 2px 8px 12px; }
.ov-months { gap: 2px; }
.ovm-row { padding: 8px 8px 8px 6px; border-radius: 10px; border: 1px solid transparent; }
.ovm-row:hover, .ovl-row:hover { background: var(--ff-raised); }
.ovm-name { font-size: 14px; font-weight: 400; color: var(--ff-ink); }
.ovm-sum { font-size: 13px; color: var(--ff-ink-2); }
.ovm-track, .ovl-track { height: 3px; border-radius: 2px; background: var(--ff-line); }
.ovm-fill { background: var(--ff-honey); }
.ovm-row.off, .ovl-row.off { opacity: .38; }
.ov-legend-wrap { flex: 1.6; max-width: 780px; }
.ovl-head { padding: 0 8px 8px 2px; }
.ovl-groups { gap: 6px; padding: 0 8px 12px 2px; }
.ovl-groups .pill, #ovFixed { padding: 4px 12px; font-size: 13px; line-height: 18px; }
.ovl-groups .ovg-none { color: var(--ff-ink-2); box-shadow: none; border: 1px dashed var(--ff-edge); }
.ov-legend { gap: 2px; }
.ovl-row { padding: 7px 12px 7px 6px; border-radius: 10px; border: 1px solid transparent; }
.ovl-solo {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 12px; line-height: 1;
  color: var(--ff-candle-ink); border: 1px solid var(--ff-ring); background: transparent;
}
.ovl-solo:hover { background: var(--ff-candle-bg); border-color: var(--ff-ring); }
.ovl-solo.active, .ovl-row.focus .ovl-solo { background: var(--ff-candle); border-color: var(--ff-candle); color: var(--ff-on-candle); }
.ovl-row.focus { border-color: var(--ff-ring); background: var(--ff-candle-bg); }
.ovl-dot { width: 10px; height: 10px; border-radius: 50%; justify-self: center; }
.ovl-name { font-size: 14px; font-weight: 400; color: var(--ff-ink); }
.ovl-sum { font-size: 14px; font-weight: 500; color: var(--ff-ink); }
.ovl-pct { color: var(--ff-ink-2); font-size: 13px; }
.ovl-n { color: var(--ff-ink-3); font-size: 12px; }
.vsplit { height: 5px; margin-top: 12px; border-radius: 3px; background: var(--ff-line); opacity: 1; }
.vsplit:hover, .vsplit.drag { background: var(--ff-candle); }
.ov-table { border-top: 1px solid var(--ff-line); margin-top: 12px; padding-top: 12px; }
.ovt-head { gap: 16px; color: var(--ff-ink-2); font-size: 13px; margin-bottom: 8px; }
.ovt-head b { color: var(--ff-ink); font-weight: 500; }
.ovt-cat { font-size: 12px; }
.ov-foot { padding: 12px 4px 0; color: var(--ff-ink-2); font-size: 14px; border-top: 1px solid var(--ff-line); margin-top: 12px; }
.ov-foot b { color: var(--ff-ink); font-size: 15px; font-weight: 500; }

/* render failure banner: its colours are inline, so !important is the only lever */
#render-error {
  margin: 16px 64px !important; padding: 12px 16px !important; border-radius: 12px !important;
  border: 1px solid var(--ff-ember) !important; background: var(--ff-raised) !important;
  color: var(--ff-ember) !important; font: 400 14px/1.5 Commissioner, sans-serif !important;
}


/* ---------- frame (flow.js) ---------- */
header.ff-header {
  /* past 1440 px the bar's content lines up with .page (1440 max, 64 padding) instead of the screen edges */
  position: relative; min-height: 88px; margin: 0; padding: 0 max(64px, calc((100% - 1312px) / 2));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 48px;
  border-bottom: 1px solid var(--ff-line); background: var(--ff-ground); color: var(--ff-ink);
}
.ff-wordmark { font: italic 400 22px Lora, serif; color: var(--ff-ink); text-decoration: none; white-space: nowrap; }
.ff-wordmark:hover { color: var(--ff-candle-ink); }
.ff-header .ff-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.ff-nav a {
  padding: 10px 16px; border-radius: 999px; color: var(--ff-ink-2); font-size: 15px; font-weight: 400;
  text-decoration: none; white-space: nowrap; transition: color .2s, background .2s;
}
.ff-nav a:hover { color: var(--ff-ink); background: var(--ff-raised); }
.ff-nav a[aria-current] { background: var(--ff-raised-2); color: var(--ff-candle-ink); font-weight: 500; }
.ff-header .ff-hdr-right { margin-left: auto; display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; max-width: 100%; }

.ff-month { display: inline-flex; align-items: center; }
.ff-month select {
  font-size: 15px; line-height: 20px; padding: 8px 34px 8px 16px; color: var(--ff-ink);
  background-color: transparent; border: 1px solid var(--ff-edge);
}
.ff-month select:hover { background-color: var(--ff-raised); }

/* header «Вопросы · N»: quiet at zero, inviting with .has-q */
.ff-header .ff-q {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--ff-edge); background: transparent; color: var(--ff-ink-2);
  font-size: 15px; font-weight: 400; line-height: 20px; text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s;
}
.ff-header .ff-q:hover { color: var(--ff-ink); }
.ff-header .ff-q .ff-q-dot { display: none; }
.ff-header .ff-q.has-q { padding-left: 12px; border-color: transparent; background: var(--ff-candle-bg); color: var(--ff-candle-ink); font-weight: 500; }
.ff-header .ff-q.has-q:hover { background: var(--ff-seg-on); }
.ff-header .ff-q.has-q .ff-q-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ff-candle);
  box-shadow: 0 0 10px 2px oklch(0.80 0.14 75 / .55);
}
.ff-header .ff-q[aria-current] { box-shadow: 0 0 0 1px var(--ff-candle); border-color: var(--ff-candle); }

.ff-me {
  display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px;
  color: var(--ff-ink); font-size: 15px; text-decoration: none; white-space: nowrap; transition: background .2s;
}
.ff-me:hover, .ff-me[aria-current] { background: var(--ff-raised); color: var(--ff-ink); }
.ff-me .ff-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ff-me:has(.ff-name[hidden]) { padding-right: 4px; } /* circle only: flow.js hides a name equal to its initial */
.ff-ini {
  width: 36px; height: 36px; border-radius: 50%; background: var(--ff-raised-3); flex: 0 0 auto;
  display: grid; place-items: center; font: italic 400 16px Lora, serif; color: var(--ff-candle-ink);
}

/* pages live inside .page */
.ff-page { display: block; }
.ff-page[hidden], .ff-sub[hidden], .ff-filterbar[hidden] { display: none !important; }
.ff-title, .ff-h1 { font: italic 400 44px/1.2 Lora, serif; color: var(--ff-ink); margin: 0 0 32px; letter-spacing: 0; }
.ff-h2 { font: italic 400 28px/1.25 Lora, serif; color: var(--ff-ink); margin: 0; }
.ff-filter-slot { display: block; }
.ff-filterbar { display: block; margin: 0 0 8px; }
.ff-page-ops .kpi-row { margin-top: 24px; }
.ff-page > .card, .ff-sub > .card { margin-bottom: 56px; }
.ff-page-analytics .ff-sub { margin-top: 16px; }
.ff-sub .chart-wrap { height: 440px; }
.ff-sub .treemap { height: 440px; }
/* Trends table needs full height on its own sub-tab page, not the 640px cap the base
   .mini-scroll (line ~352) uses inside a shared card grid. */
.ff-sub .mini-scroll { max-height: none; }

.ff-subnav {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; margin: 0 0 32px; border-radius: 28px;
  box-shadow: inset 0 0 0 1px var(--ff-line-strong);
}
.ff-subnav a {
  padding: 9px 18px; border-radius: 999px; color: var(--ff-ink-2);
  font-size: 15px; line-height: 20px; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s;
}
.ff-subnav a:hover { background: var(--ff-raised); color: var(--ff-ink); }
.ff-subnav a[aria-current] { background: var(--ff-seg-on); color: var(--ff-candle-ink); font-weight: 500; }

/* Структура: the way into "all minus one" and "only this one" */
.ff-struct-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
  margin: 0 0 32px; padding: 20px 24px; border-radius: 20px; background: var(--ff-surface);
  box-shadow: inset 0 0 0 1px var(--ff-line);
}
.ff-struct-note { margin: 0; font: italic 400 18px/1.45 Lora, serif; color: var(--ff-ink-voice); }
button.ff-cta, #btnStructExpand.ff-cta {
  padding: 11px 24px; border: 0; border-radius: 999px; background: var(--ff-candle); color: var(--ff-on-candle);
  font-size: 15px; font-weight: 500; line-height: 20px; white-space: normal; max-width: 100%;
}
button.ff-cta:hover, #btnStructExpand.ff-cta:hover { background: var(--ff-honey); }

/* ---------- Кабинет (flow-views) ---------- */
.ff-home, .ff-questions { max-width: 1152px; margin: 0 auto; }
header.ff-home-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.ff-period { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ff-ink-2); }
.ff-period-note { margin: 0; font-size: 13px; color: var(--ff-ink-3); }
.ff-hero { margin: 0; }
.ff-hero-line { margin: 40px 0 0; font: italic 400 44px/1.35 Lora, serif; color: var(--ff-ink-voice); text-wrap: pretty; }
.ff-num {
  font: normal 400 56px/1.1 Commissioner, sans-serif; letter-spacing: -.02em; color: var(--ff-ink);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.ff-num.ff-good { color: var(--ff-candle); font-weight: 500; }
.ff-num.ff-bad { color: var(--ff-ember); font-weight: 500; }
dl.ff-kpis { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 24px 0 0; }
.ff-kpi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; max-width: 100%; font-size: 15px; color: var(--ff-ink-2); }
.ff-kpi dt, .ff-kpi dd { margin: 0; }
.ff-kpi-l { color: var(--ff-ink-2); }
.ff-kpi-v { color: var(--ff-ink); font-weight: 500; }
.ff-kpi-v.ff-neg { color: var(--ff-ember); }
.ff-kpi-d { font-size: 14px; color: var(--ff-ink-3); }
.ff-kpi-d::before { content: "· "; }
.ff-kpi-d.ff-good { color: var(--ff-cream); }
.ff-kpi-d.ff-bad { color: var(--ff-ember); }
.ff-kpi-d.ff-flat { color: var(--ff-ink-3); }

a.ff-qentry {
  display: flex; align-items: baseline; gap: 16px; margin-top: 40px; padding: 20px 0;
  border-top: 1px solid var(--ff-line); border-bottom: 1px solid var(--ff-line); text-decoration: none;
}
.ff-qentry .ff-entry-t { font: normal 500 15px/1.4 Commissioner, sans-serif; white-space: nowrap; }
.ff-qentry .ff-entry-s { font: italic 400 18px/1.4 Lora, serif; }
.ff-qentry-zero .ff-entry-t { color: var(--ff-ink-2); font-weight: 400; }
.ff-qentry-zero .ff-entry-s { color: var(--ff-ink-voice); }
.ff-qentry-on .ff-entry-t { color: var(--ff-candle-ink); display: inline-flex; align-items: center; gap: 10px; }
.ff-qentry-on .ff-entry-t::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ff-candle); box-shadow: 0 0 10px 2px oklch(0.80 0.14 75 / .55); }
.ff-qentry-on .ff-entry-s { color: var(--ff-candle-ink); }
a.ff-qentry:hover .ff-entry-t, a.ff-qentry:hover .ff-entry-s { color: var(--ff-ink); }

.ff-sankey { margin-top: 48px; color: var(--ff-ink); }
.ff-sankey-head {
  display: grid; grid-template-columns: 200fr 554fr 398fr; padding-bottom: 16px; border-bottom: 1px solid var(--ff-line);
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ff-ink-2);
}
.ff-sankey-head > span:nth-child(1) { text-align: right; padding-right: 12px; }
.ff-sankey-head > span:nth-child(2) { text-align: center; white-space: nowrap; }
.ff-sankey-head > span:nth-child(3) { margin-left: -12px; }
.ff-sankey-svg { display: block; width: 100%; height: auto; margin-top: 16px; overflow: visible; font-family: Commissioner, sans-serif; }
.ff-sankey-svg text { font-family: Commissioner, sans-serif; font-variant-numeric: tabular-nums lining-nums; }
.ff-sankey-link { transition: fill-opacity .2s; cursor: pointer; }
.ff-sankey-link:hover { fill-opacity: .7; }
.ff-sankey-node { cursor: pointer; }
.ff-sankey-name, .ff-sankey-amt, .ff-sankey-total { color: var(--ff-ink); }
.ff-sankey-amt.ff-neg { color: var(--ff-ember); }
.ff-sankey-rest .ff-sankey-name, .ff-sankey-rest .ff-sankey-amt { color: var(--ff-candle-ink); }
.ff-sankey-d { color: var(--ff-ink-2); }
.ff-sankey-d.ff-up { color: var(--ff-ember); }
.ff-sankey-d.ff-down { color: var(--ff-cream); }
.ff-sankey-label { cursor: pointer; }
.ff-sankey-label:hover .ff-sankey-name { color: var(--ff-candle-ink); }

.ff-cats-wrap { margin-top: 64px; }
.ff-cats-wrap > .ff-period-note { margin-top: 4px; }
ol.ff-cats { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--ff-line); columns: 2; column-gap: 48px; }
.ff-cat { break-inside: avoid; border-bottom: 1px solid var(--ff-line-soft); }
.ff-cat > a {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 56px 104px; gap: 12px; align-items: baseline;
  padding: 12px 8px 12px 0; color: var(--ff-ink); text-decoration: none; font-size: 15px;
}
.ff-cat > a:hover { background: var(--ff-raised); }
.ff-cat-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.ff-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-cat-amt { font-weight: 500; white-space: nowrap; text-align: right; }
.ff-cat-share { font-size: 13px; color: var(--ff-ink-3); text-align: right; white-space: nowrap; }
.ff-cat-d { font-size: 13px; color: var(--ff-ink-3); text-align: right; white-space: nowrap; }
.ff-cat-d.ff-up { color: var(--ff-ember); }
.ff-cat-d.ff-down { color: var(--ff-cream); }
.ff-cat-tail .ff-cat-name { color: var(--ff-ink-2); }

nav.ff-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 80px; }
.ff-entries .ff-entry { display: block; padding-top: 24px; border-top: 1px solid var(--ff-line); text-decoration: none; }
.ff-entry-t { display: block; font: italic 400 28px/1.25 Lora, serif; color: var(--ff-ink); }
.ff-entry-s { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--ff-ink-2); }
.ff-entries .ff-entry:hover .ff-entry-t { color: var(--ff-candle-ink); }

/* ---------- Вопросы (flow-views) ---------- */
header.ff-q-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: end; margin: 0 0 32px; }
.ff-q-head .ff-h1 { grid-column: 1; margin: 0; }
.ff-q-lead { grid-column: 1; margin: 0; max-width: 640px; font-size: 16px; line-height: 1.55; color: var(--ff-ink-voice); }
.ff-q-count { grid-column: 2; grid-row: 1 / span 2; font-size: 20px; color: var(--ff-ink-2); white-space: nowrap; }
ol.ff-qlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ff-line); }
.ff-qlist > li.ff-q {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) 112px 136px 88px 128px; gap: 16px; align-items: baseline;
  padding: 14px 12px; border-bottom: 1px solid var(--ff-line-soft); font-size: 15px; color: var(--ff-ink);
}
.ff-qlist > li.ff-q:hover { background: var(--ff-raised); }
.ff-qlist .ff-q > * { grid-row: 1; min-width: 0; }
.ff-q-date { grid-column: 1; color: var(--ff-ink-2); font-size: 14px; white-space: nowrap; }
.ff-q-desc { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-q-cp { color: var(--ff-ink-3); font-size: 13px; margin-left: 6px; }
.ff-q-bank { grid-column: 3; color: var(--ff-ink-2); font-size: 14px; }
.ff-q-card { grid-column: 4; color: var(--ff-ink-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-q-owner { grid-column: 5; color: var(--ff-ink-2); font-size: 14px; }
.ff-q-amt { grid-column: 6; text-align: right; font-weight: 500; white-space: nowrap; }
.ff-q-amt.ff-neg { color: var(--ff-ink); }
.ff-q-note { margin: 16px 0 0; font-size: 13px; color: var(--ff-ink-3); }
.ff-q-empty { padding: 56px; border-radius: 28px; box-shadow: inset 0 0 0 1px var(--ff-line-strong); }
.ff-q-empty-t { margin: 0; font: italic 400 40px/1.2 Lora, serif; color: var(--ff-ink); }
.ff-q-empty-s { margin: 16px 0 24px; max-width: 640px; font-size: 16px; line-height: 1.55; color: var(--ff-ink-2); }
.ff-q-empty .ff-entry {
  display: inline-flex; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--ff-edge); background: var(--ff-raised);
  color: var(--ff-ink); font-size: 15px; text-decoration: none;
}
.ff-q-empty .ff-entry:hover { background: var(--ff-raised-2); }
.ff-q-empty .ff-empty-files { margin: 16px 0 4px; font-size: 14px; }
#ff-empty-sample { display: inline-flex; align-items: center; min-height: 44px; margin-left: -8px; }
#ff-empty-sample[hidden] { display: none; }

/* answer form under a question row (hosted page only, flow-views answerForm) */
.ff-qlist .ff-q > .ff-q-form { grid-row: 2; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 2px; }
.ff-q-form .ff-q-cat { flex: 0 1 280px; min-width: 0; max-width: 100%; height: 40px; }
.ff-q-form .ff-q-text { flex: 1 1 220px; min-width: 0; }
.ff-q-form .ff-q-send { flex: 0 0 auto; padding: 9px 22px; }
.ff-q-form .ff-q-err { flex: 1 0 100%; margin: 0; font-size: 14px; color: var(--ff-ember); }
.ff-q-form .ff-q-err[hidden] { display: none; }
@media (max-width: 900px) {
  .ff-q-form .ff-q-cat, .ff-q-form .ff-q-text { flex: 1 1 100%; }
}

/* ---------- Загрузить выписку (flow.js slots, web/statement-upload.js; design R8 part 1) ---------- */
.ff-header .ff-upl-link[hidden] { display: none; }
.ff-header .ff-upl-link .ff-upl-short { display: none; }
/* on the upload screen itself (#/upload, the first-run page) it marks where the person is, drawn as the active
   nav tab, not as a second upload button next to the page's own (QA r8b, r8c) */
.ff-header .ff-upl-link[aria-current="page"] { background: var(--ff-raised-2); color: var(--ff-candle-ink); border-color: transparent; box-shadow: none; font-weight: 500; }
.page .ff-page-upload { max-width: 1312px; margin: 0 auto; }
#ff-page-upload:has(.ff-upl) > .ff-title { display: none; }
/* the first run: the uploader says it, the empty page's own lines step aside */
.ff-q-empty:has(.ff-upl) > .ff-q-empty-t, .ff-q-empty:has(.ff-upl) > .ff-q-empty-s { display: none; }
.ff-q-empty:has(.ff-upl) { padding: 0; box-shadow: none; }
.ff-upl { display: flex; flex-direction: column; gap: 24px; }
.ff-upl[data-mode="compact"] { max-width: 640px; }
.ff-upl-title { margin-bottom: 8px; }
.ff-upl-lead { margin: 0; max-width: 720px; font-size: 16px; line-height: 1.55; color: var(--ff-ink-2); }
.ff-upl-owed { color: var(--ff-candle-ink); font-weight: 500; }
.ff-upl-done { color: var(--ff-ink); font-weight: 500; }
.ff-upl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.ff-upl[data-mode="page"] .ff-upl-grid, .ff-upl[data-mode="first"] .ff-upl-grid { grid-template-columns: minmax(0, 1fr) 400px; }
.ff-upl-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ff-upl-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px; border-radius: 20px; cursor: pointer;
  border: 1px dashed var(--ff-edge); background: var(--ff-surface); transition: background .2s, border-color .2s;
}
/* the zone lights up for a pointer that moved onto it while it takes files: not while a file is read or
   sent (the input is off), not when the page shrank under a resting pointer after an import (data-still,
   cleared by the first pointer move; QA r8b) */
.ff-upl:not([data-still]) .ff-upl-drop:not(:has(.ff-upl-input:disabled)):hover { border-color: var(--ff-candle); background: var(--ff-raised); }
.ff-upl-drop:has(.ff-upl-input:disabled) { cursor: default; }
.ff-upl-drop:has(.ff-upl-input:disabled) .ff-upl-pick { opacity: .5; }
.ff-upl-drop:focus-within { outline: 2px solid var(--ff-focus); outline-offset: 2px; }
.ff-upl-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ff-upl-pick {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; margin-bottom: 4px; box-sizing: border-box;
  border-radius: 999px; background: var(--ff-candle); color: var(--ff-on-candle); border: 1px solid var(--ff-candle); font-size: 16px; font-weight: 500;
}
.ff-upl:not([data-still]) .ff-upl-drop:not(:has(.ff-upl-input:disabled)):hover .ff-upl-pick { background: var(--ff-honey); border-color: var(--ff-honey); }
.ff-upl-pick.is-outline, .ff-upl-drop:hover .ff-upl-pick.is-outline { background: transparent; color: var(--ff-ink); border-color: var(--ff-edge); }
.ff-upl-drop-s { font-size: 14px; line-height: 1.5; color: var(--ff-ink-2); }
/* the lock goes with the first word, so a wrapped line stays centred (QA r8) */
.ff-upl-priv { display: block; color: var(--ff-ink-3); }
.ff-upl-priv > svg { display: inline-block; vertical-align: -2px; margin-right: 6px; }
.ff-upl-lock { flex: none; }
.ff-upl-preview[hidden], .ff-upl-rows[hidden], .ff-upl-bar[hidden], .ff-upl-progress[hidden], .ff-upl-over[hidden] { display: none; }
.ff-upl-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.ff-upl-row { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; border-radius: 16px; background: var(--ff-surface); box-shadow: inset 0 0 0 1px var(--ff-line); }
.ff-upl-row[data-state="ready"] { box-shadow: inset 0 0 0 1px var(--ff-edge); }
.ff-upl-rh { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ff-upl-mono { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ff-raised-2); color: var(--ff-ink); font-weight: 600; font-size: 15px; }
.ff-upl-rt { flex: 1 1 auto; min-width: 0; }
.ff-upl-rtitle { margin: 0; font-size: 15px; font-weight: 500; color: var(--ff-ink); overflow-wrap: anywhere; }
.ff-upl-rsub { margin: 2px 0 0; font-size: 13px; color: var(--ff-ink-3); overflow-wrap: anywhere; }
.ff-upl-pill { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--ff-candle-bg); color: var(--ff-candle-ink); font-size: 13px; font-weight: 500; }
button.ff-upl-x { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ff-ink-2); font-size: 22px; line-height: 1; cursor: pointer; }
button.ff-upl-x:hover { color: var(--ff-ink); background: var(--ff-raised-2); }
.ff-upl-rm { margin: 0; font-size: 15px; color: var(--ff-ink-2); }
.ff-upl-ok { display: inline-flex; align-items: center; gap: 8px; color: var(--ff-ink); }
.ff-upl-tick { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ff-candle); color: var(--ff-on-candle); }
.ff-upl-meter { height: 6px; border-radius: 999px; background: var(--ff-raised-3); overflow: hidden; }
.ff-upl-meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ff-candle); transition: width .3s; }
/* not known how long: the whole track striped and moving, so even a still frame reads as busy, not as 20 %
   done (QA r8c); with reduced motion the stripes stand still */
.ff-upl-meter.is-busy { background: repeating-linear-gradient(-45deg, color-mix(in oklch, var(--ff-candle) 55%, transparent) 0 6px, var(--ff-raised-3) 6px 12px); background-size: 16.97px 16.97px; animation: ff-upl-busy .8s linear infinite; }
.ff-upl-meter.is-busy span { display: none; }
/* the busy ring in the file's tile while the bank is not known yet (QA r8b: never "?" while reading) */
.ff-upl-spin { width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ff-raised-3); border-top-color: var(--ff-candle); animation: ff-upl-spin .9s linear infinite; }
@keyframes ff-upl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ff-upl-spin { animation: none; } }
@keyframes ff-upl-busy { to { background-position: 16.97px 0; } }
@media (prefers-reduced-motion: reduce) { .ff-upl-meter.is-busy { animation: none; } }
.ff-upl-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.ff-upl-facts { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; font-size: 15px; flex: 1 1 auto; }
/* "In the 41 transactions to import:" leads the figures on their line; on the phone it wraps above them */
.ff-upl-of { flex: none; margin: 0; font-size: 13px; color: var(--ff-ink-2); }
.ff-upl-facts div { display: flex; gap: 8px; }
.ff-upl-facts dt { color: var(--ff-ink-2); }
.ff-upl-facts dd { margin: 0; color: var(--ff-ink); font-variant-numeric: tabular-nums; }
button.ff-upl-tog, button.ff-upl-howlink { min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--ff-candle-ink); font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button.ff-upl-tog:hover, button.ff-upl-howlink:hover { background: transparent; color: var(--ff-ink); }
.ff-upl-preview { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ff-line); font-size: 14px; color: var(--ff-ink-2); }
.ff-upl-preview p { margin: 0; }
.ff-upl-k { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ff-ink-3); }
.ff-upl-acc .ff-upl-k { margin-right: 8px; }
.ff-upl-first { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ff-upl-first li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; color: var(--ff-ink); }
.ff-upl-fd { color: var(--ff-ink-3); font-variant-numeric: tabular-nums; }
.ff-upl-ft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-upl-fa { font-variant-numeric: tabular-nums; text-align: right; }
.ff-upl-fa.is-in, .ff-upl-facts dd.is-in { color: var(--ff-candle-ink); }
.ff-upl-more { color: var(--ff-ink-3); }
.ff-upl-eq { color: var(--ff-ink); font-variant-numeric: tabular-nums; }
/* each term of the equation stays on one line; a wrap falls between terms (QA r8c) */
.ff-upl-term { white-space: nowrap; }
.ff-upl-prob { display: flex; gap: 12px; align-items: flex-start; }
.ff-upl-bang { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ff-ember); color: var(--ff-ember); font-weight: 600; font-size: 12.5px; }
.ff-upl-prob-t { margin: 0; font-size: 15px; font-weight: 500; color: var(--ff-ink); }
.ff-upl-prob-b { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ff-ink-2); }
.ff-upl-prob-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0 0; }
/* the fix and "How to get the file" share a row, the link aligned with the message text */
.ff-upl-prob-a .ff-upl-again { width: auto; min-height: 44px; padding: 8px 20px; }
.ff-upl-prob-a button.ff-upl-howlink { padding: 0; min-height: 44px; }
.ff-upl-again, .ff-upl-bar .ff-upl-go { min-height: 44px; }
/* the import bar sits above the files and sticks to the top of the column while they scroll (QA r8) */
.ff-upl-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 20px; border-radius: 16px; background: var(--ff-raised); box-shadow: inset 0 0 0 1px var(--ff-line-strong), 0 12px 24px -16px var(--ff-shadow); }
.ff-upl-bar-n { margin: 0; font-size: 14px; color: var(--ff-ink-2); }
.ff-upl-progress { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; border-radius: 16px; background: var(--ff-candle-bg); }
.ff-upl-gh { display: flex; justify-content: space-between; gap: 16px; margin: 0; font-size: 15px; font-weight: 500; color: var(--ff-ink); font-variant-numeric: tabular-nums; }
.ff-upl-status { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ff-ink-2); }
.ff-upl-status:empty { display: none; }
.ff-upl-status[data-state="error"] { color: var(--ff-ember); }
.ff-upl-status a { color: var(--ff-candle-ink); }
/* the outcome of an import is the page's headline over "Answer questions" (QA r8) */
.ff-upl-status[data-state="done"]:not(.ff-sr) { font-size: 18px; line-height: 1.4; font-weight: 500; color: var(--ff-ink); }
.ff-upl-status a.ff-upl-answer { display: flex; width: fit-content; align-items: center; box-sizing: border-box; min-height: 44px; margin-top: 12px; padding: 8px 20px; border-radius: 999px; background: var(--ff-candle); color: var(--ff-on-candle); font-size: 15px; font-weight: 500; text-decoration: none; }
.ff-upl-status a.ff-upl-answer:hover { background: var(--ff-honey); }
/* the checklist: 400 px on the right, stays while the page scrolls */
.ff-upl-check { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 20px; background: var(--ff-surface); box-shadow: inset 0 0 0 1px var(--ff-line); }
.ff-upl-check-h { margin: 0; font: italic 400 24px/1.25 Lora, serif; color: var(--ff-ink); }
.ff-upl-check-s { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ff-ink-2); }
.ff-upl-check-g { margin: 12px 0 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ff-ink-3); }
.ff-upl-lines { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ff-upl-li { border-top: 1px solid var(--ff-line); }
.ff-upl-li-b { display: flex; align-items: flex-start; gap: 12px; width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 0; text-align: left; }
button.ff-upl-li-b { border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
button.ff-upl-li-b:hover { background: transparent; }
button.ff-upl-li-b:hover .ff-upl-li-n { color: var(--ff-candle-ink); }
.ff-upl-li-i { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ff-edge); color: var(--ff-ink-3); font-size: 13px; font-weight: 700; }
.ff-upl-li[data-state="done"] .ff-upl-li-i { background: var(--ff-candle); box-shadow: none; color: var(--ff-on-candle); }
.ff-upl-li[data-state="ready"] .ff-upl-li-i { box-shadow: inset 0 0 0 2px var(--ff-candle); color: var(--ff-candle-ink); }
.ff-upl-li[data-state="problem"] .ff-upl-li-i { background: var(--ff-ember); box-shadow: none; color: var(--ff-ground); }
.ff-upl-li-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ff-upl-li-n { font-size: 15px; font-weight: 500; color: var(--ff-ink); }
.ff-upl-li-s { font-size: 14px; color: var(--ff-ink-2); }
.ff-upl-li[data-state="missing"] .ff-upl-li-s, .ff-upl-li[data-state="partial"] .ff-upl-li-s { color: var(--ff-candle-ink); }
.ff-upl-li[data-state="problem"] .ff-upl-li-s { color: var(--ff-ember); }
.ff-upl-li-h { font-size: 14px; color: var(--ff-candle-ink); text-decoration: underline; text-underline-offset: 3px; }
.ff-upl-how { padding: 0 0 16px 34px; display: flex; flex-direction: column; gap: 12px; }
.ff-upl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.ff-upl-cw { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ff-upl-chip { padding: 4px 10px; border-radius: 999px; background: var(--ff-raised-2); color: var(--ff-ink); font-size: 13px; }
.ff-upl-chip.is-last { background: var(--ff-candle-bg); color: var(--ff-candle-ink); box-shadow: inset 0 0 0 1px var(--ff-candle); font-weight: 500; }
.ff-upl-chev { color: var(--ff-ink-3); }
.ff-upl-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--ff-ink-2); }
.ff-upl :focus-visible { outline: 2px solid var(--ff-focus); outline-offset: 2px; }
/* drop anywhere: the whole page while files are dragged over it */
.ff-upl-over { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 24px; background: var(--ff-scrim, oklch(0.14 0.02 45 / .62)); pointer-events: none; }
.ff-upl-over-f { box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 2px dashed var(--ff-candle); border-radius: 28px; background: oklch(from var(--ff-ground) l c h / .7); }
.ff-upl-over-t { margin: 0; font: italic 400 36px/1.2 Lora, serif; color: var(--ff-ink); text-align: center; }
.ff-upl-over-s { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ff-ink-2); }
@media (max-width: 1100px) {
  .ff-upl[data-mode="page"] .ff-upl-grid, .ff-upl[data-mode="first"] .ff-upl-grid { grid-template-columns: minmax(0, 1fr); }
  .ff-upl-check { position: static; }
}
/* the phone: the import bar is pinned to the screen, not kept in the flow; room for it once, at the end */
@media (max-width: 720px) {
  .ff-upl-bar { position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; z-index: 20; }
  .ff-upl:has(.ff-upl-bar:not([hidden])) { padding-bottom: 120px; }
  /* with the problem note the bar is about 150 px tall: 120 px would hide the end of the checklist */
  .ff-upl:has(.ff-upl-bar:not([hidden]) .ff-upl-bar-n + .ff-upl-bar-n) { padding-bottom: 196px; }
}
@media (max-width: 600px) {
  .ff-header .ff-upl-link .ff-upl-long { display: none; }
  .ff-header .ff-upl-link .ff-upl-short { display: inline; }
  .ff-upl-anywhere, .ff-upl-pill { display: none; }
  .ff-upl-drop { padding: 20px 16px; }
  .ff-upl-pick, .ff-upl-bar .ff-upl-go { width: 100%; }
  .ff-upl-row { padding: 12px 14px; }
  .ff-upl-first li { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; }
  .ff-upl-check { padding: 20px 16px; }
}

/* ---------- Профиль (flow.js) ---------- */
.ff-page-profile, .ff-page-questions { max-width: 1152px; margin: 0 auto; }
@media (max-width: 1360px) { .ff-page-profile, .ff-page-questions, .page .ff-page-profile { margin-left: 0; margin-right: 0; } }
/* .page .ff-page (line ~205) resets max-width/padding to none/0 with matching specificity;
   restate it scoped to .page so the profile content and its section dividers stay centered. */
.page .ff-page-profile { max-width: 1152px; margin: 0 auto; }
.ff-page-profile .ff-title { margin-bottom: 16px; }
section.ff-psec { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 16px 48px; align-items: start; padding: 40px 0; border-top: 1px solid var(--ff-line); max-width: 1152px; }
.ff-page-profile .ff-title + section.ff-psec { border-top: 0; padding-top: 16px; }
.ff-psec-h h2 { font: italic 400 28px/1.25 Lora, serif; color: var(--ff-ink); margin: 0; }
.ff-psec-h p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ff-ink-2); }
.ff-psec-b { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ff-psec-b > .ff-prow { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
/* five language names do not fit one pill on a phone: the pill wraps onto a second line */
.ff-lang-row .fa-seg { flex-wrap: wrap; border-radius: 20px; }
.ff-lang-row .fa-seg button { white-space: nowrap; }
.ff-plabel { flex: 0 0 160px; font-size: 14px; color: var(--ff-ink-2); }
.ff-pval { font-size: 17px; font-weight: 500; color: var(--ff-ink); }
.ff-pinfo .sub, .ff-pinfo #genInfo, .ff-pinfo #buildInfo { font-size: 14px; color: var(--ff-ink-2); opacity: 1 !important; }
.ff-pinfo #genInfo { color: var(--ff-ink); }
.ff-source { font-size: 13px; color: var(--ff-ink-3); }

/* theme switch: #btnTheme gets .ff-switch; drop the generic button box */
button.ff-switch, #btnTheme.ff-switch { padding: 2px; border: 0; border-radius: 999px; background: transparent; line-height: 0; }
button.ff-switch:hover { background: transparent; }
.ff-switch .ff-switch-track { display: inline-block; position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--ff-raised-3); box-shadow: inset 0 0 0 1px var(--ff-edge); transition: background .2s; }
.ff-switch .ff-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ff-ink-2); transition: transform .2s, background .2s; }
.ff-switch[aria-checked="true"] .ff-switch-track { background: var(--ff-candle); box-shadow: none; }
.ff-switch[aria-checked="true"] .ff-switch-knob { transform: translateX(20px); background: var(--ff-on-candle); }

/* data-source bar from app-shell.js: a footer line, or a plain row once moved into the profile */
.ff-appbar, .ff-app-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 20px 64px; border-top: 1px solid var(--ff-line); color: var(--ff-ink-3); font-size: 13px; }
.ff-source .ff-appbar, .ff-source .ff-app-bar, .ff-page .ff-app-bar { padding: 0; border-top: 0; }
#app-out { margin-left: 8px; padding: 7px 18px; font-size: 14px; }
/* delete account (app-shell.js): the button in the profile and its one confirm dialog */
#app-del { min-height: 36px; }
.ff-del-na { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ff-ink-2); }
/* plan and household (billing.js, household.js): hosted shell only */
.ff-plan-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px 64px; font-size: 14px; line-height: 1.5; color: var(--ff-ink-2); background: var(--ff-surface); border-bottom: 1px solid var(--ff-line); }
.ff-plan-strip[hidden], .ff-plan-strip button[hidden], .ff-psec-b button[hidden], .ff-hh-link[hidden], .ff-plan-more[hidden], .ff-buy-dlg button[hidden] { display: none; }
html[data-route="explore"] .ff-plan-strip { display: none; }
.ff-plan-state, .ff-plan-more, .ff-hh-until { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ff-ink); }
.ff-plan-more, .ff-hh-until { font-size: 14px; color: var(--ff-ink-2); }
.ff-plan-slot, .ff-hh-slot, .ff-hh-link { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ff-plan-slot .ff-pacts, .ff-hh-slot .ff-pacts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.ff-plan-slot .fa-btn, .ff-hh-slot .fa-btn, .ff-plan-strip .fa-btn, .ff-pay-status .fa-btn { min-height: 44px; box-sizing: border-box; cursor: pointer; }
.ff-hh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.ff-hh-list .ff-plabel { margin-left: 8px; font-size: 13px; color: var(--ff-ink-3); }
.ff-hh-link input { width: 100%; max-width: 480px; box-sizing: border-box; height: 44px; }
.ff-hh-how { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--ff-line); max-width: 560px; }
.ff-hh-how h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--ff-ink); }
.ff-hh-how ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--ff-ink-2); }
.ff-buy-dlg .ff-del-acts .fa-btn { cursor: pointer; }
.ff-buy-vals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ff-buy-vals li { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; color: var(--ff-ink-2); }
.ff-buy-vals b { font-weight: 500; color: var(--ff-ink); }
.ff-buy-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ff-buy-plan { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; box-sizing: border-box; padding: 12px 14px; text-align: left; font: inherit; font-size: 14px; line-height: 1.4; color: var(--ff-ink-2); background: transparent; border: 1px solid var(--ff-line-strong); border-radius: 12px; cursor: pointer; }
.ff-buy-plan b { font-weight: 500; font-size: 15px; color: var(--ff-ink); }
.ff-buy-plan[aria-checked="true"] { border-color: var(--ff-focus); box-shadow: inset 0 0 0 1px var(--ff-focus); }
.ff-buy-plan:disabled { cursor: default; opacity: .6; }
.ff-buy-links { display: flex; gap: 16px; font-size: 14px; }
@media (max-width: 480px) { .ff-buy-plans { grid-template-columns: 1fr; } }
.ff-pay-status { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; font-size: 15px; line-height: 1.4; background: var(--ff-surface); color: var(--ff-ink); box-shadow: inset 0 1px 0 var(--ff-line-strong); }
@media (max-width: 640px) { .ff-plan-strip { padding: 10px 20px; } }
/* the monthly «not uploaded yet» banner (app-shell.js makeReminder; design R8 part 2): hosted shell only */
.ff-remind { display: flex; align-items: center; gap: 14px; min-height: 56px; box-sizing: border-box; padding: 10px max(64px, calc((100% - 1312px) / 2)); font-size: 14.5px; line-height: 1.45; color: var(--ff-ink-soft); background: var(--ff-candle-bg); border-bottom: 1px solid var(--ff-line); }
/* the banner's content lines up with the header's (48 px up to 1360, 16 px from 900) */
@media (max-width: 1360px) { .ff-remind { padding-left: 48px; padding-right: 48px; } }
@media (max-width: 900px) { .ff-remind { padding-left: 16px; padding-right: 16px; } }
.ff-remind.is-quiet { background: var(--ff-surface); }
.ff-remind[hidden] { display: none; }
html[data-route="explore"] .ff-remind, html[data-route="upload"] .ff-remind { display: none; }
.ff-remind-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ff-candle); box-shadow: 0 0 10px 2px oklch(0.80 0.14 75 / .45); }
.ff-remind.is-quiet .ff-remind-dot { background: var(--ff-ink-3); box-shadow: none; }
.ff-remind-t { flex: 1 1 auto; min-width: 0; }
.ff-remind-h, .ff-remind-m { margin: 0; }
.ff-remind-h b { font-weight: 600; color: var(--ff-ink); }
.ff-remind-h b.ff-remind-bank { color: var(--ff-candle-ink); }
.ff-remind-why { color: var(--ff-ink-2); }
.ff-remind-m, .ff-remind-mw { display: none; }
.ff-remind-acts { flex: none; display: flex; align-items: center; gap: 4px; }
/* the design draws them 38 px; the cabinet keeps every control at least 44 px tall */
.ff-remind .fa-btn { min-height: 44px; box-sizing: border-box; cursor: pointer; }
.ff-remind .ff-remind-go { padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 14px; font-weight: 500; background: var(--ff-candle); border-color: var(--ff-candle); color: var(--ff-on-candle); }
.ff-remind .ff-remind-go:hover { background: var(--ff-honey); border-color: var(--ff-honey); }
.ff-remind.is-quiet .ff-remind-go, .ff-remind.is-quiet .ff-remind-go:hover { background: transparent; border-color: var(--ff-edge); color: var(--ff-ink); }
.ff-remind .ff-remind-later { border-color: transparent; background: transparent; color: var(--ff-ink-2); }
.ff-remind .ff-remind-later:hover { color: var(--ff-ink); background: transparent; }
.ff-remind-x { display: none; font-size: 22px; line-height: 1; }
.ff-remind :focus-visible { outline: 2px solid var(--ff-focus); outline-offset: 2px; }
/* the phone: one line, "Upload" and × */
@media (max-width: 600px) {
  .ff-remind { min-height: 52px; padding: 4px 16px; gap: 10px; }
  .ff-remind-h { display: none; }
  .ff-remind-m { display: block; font-size: 13.5px; line-height: 1.3; font-weight: 500; color: var(--ff-ink); }
  .ff-remind-mw { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--ff-ink-2); }
  .ff-remind .ff-remind-later { width: 40px; min-height: 44px; padding: 0; justify-content: center; }
  .ff-remind-later-w { display: none; }
  .ff-remind-x { display: inline; }
  /* one upload button on the phone: the banner's (QA r8); on the upload and explore pages the banner is hidden */
  html:not([data-route="upload"]):not([data-route="explore"]) body:has(.ff-remind:not([hidden])) .ff-header .ff-upl-link { display: none; }
}
.ff-del-dlg { box-sizing: border-box; inset: 0; margin: auto; width: min(480px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); overflow: auto; padding: 0; border: 0; border-radius: 16px; background: var(--ff-surface); color: var(--ff-ink); box-shadow: inset 0 0 0 1px var(--ff-line-strong), 0 24px 48px -16px var(--ff-shadow); }
.ff-del-in { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 24px; }
.ff-del-dlg h2 { margin: 0; font: italic 400 22px/1.25 Lora, serif; color: var(--ff-ink); }
.ff-del-dlg p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ff-ink-2); }
.ff-del-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ff-ink-2); }
.ff-del-field input { width: 100%; box-sizing: border-box; height: 44px; }
.ff-del-dlg p.ff-del-err { color: var(--ff-ember); overflow-wrap: anywhere; }
.ff-del-err[hidden] { display: none; }
.ff-del-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.ff-del-acts .fa-btn { min-height: 44px; box-sizing: border-box; }
.fa-btn.ff-del-yes { background: var(--ff-ember); border-color: var(--ff-ember); color: var(--ff-ground); font-weight: 500; }
.fa-btn.ff-del-yes:disabled { background: transparent; border-color: var(--ff-edge); color: var(--ff-ink-3); cursor: default; }
.ff-del-dlg :focus-visible { outline: 2px solid var(--ff-focus); outline-offset: 2px; }
.fq-newcat[hidden] { display: none; }

/* ---------- narrower windows ---------- */
@media (max-width: 1360px) {
  .page { padding-left: 48px; padding-right: 48px; }
  header.ff-header { padding: 0 48px; gap: 32px; }
  .grid { gap: 48px 40px; }
  .ff-hero-line { font-size: 40px; }
  .ff-num { font-size: 52px; }
}
@media (max-width: 900px) {
  html body { min-width: 0; }
  .page { padding: 24px 16px 48px; }
  .ff-header .ff-nav { flex-wrap: wrap; }
  .ff-header .ff-hdr-right { width: 100%; justify-content: space-between; gap: 8px; }
  .ff-title, .ff-h1 { margin-bottom: 20px; }
  .ff-subnav { display: flex; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toggles { justify-content: flex-start; padding: 0; }
  .table-scroll { max-width: 100%; }
  .ff-struct-cta { padding: 16px; }
  .ff-sankey-head { display: none; }
  header.ff-home-head, header.ff-q-head { display: block; }
  .page > header h1 { flex-basis: auto; }
  header.ff-header { height: auto; min-height: 64px; flex-wrap: wrap; padding: 12px 16px; gap: 8px 16px; }
  .ff-header .ff-hdr-right { margin-left: 0; flex-wrap: wrap; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .filters { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .filters > .f-group:first-child, .filters > .f-group:nth-child(2) { grid-column: 1; grid-row: auto; }
  .f-group { grid-template-columns: minmax(0, 1fr); }
  .overlay { padding: 16px; }
  ol.ff-cats { columns: 1; }
  nav.ff-entries { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  section.ff-psec { grid-template-columns: minmax(0, 1fr); }
  .ff-qlist > li.ff-q { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .ff-q-bank, .ff-q-card, .ff-q-owner { display: none; }
  .ff-q-amt { grid-column: 3; }
  .ff-hero-line { font-size: 28px; }
  .ff-num { font-size: 36px; }
  .ff-title, .ff-h1, .page > header h1 { font-size: 32px; }
}

/* ---------- Кабинет: Семь месяцев / Что изменилось ---------- */
.ff-trend-wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; margin-top: 72px; align-items: start; }
.ff-trend-col, .ff-moves-wrap { min-width: 0; }
.ff-trend-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.ff-trend-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ff-ink-2); }
.ff-trend-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ff-trend-legend i { width: 10px; height: 10px; border-radius: 3px; }
.ff-trend-wrap .ff-period-note { margin: 6px 0 16px; }
.ff-trend { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 2px; }
.ff-tm { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 2px 10px; border: 0; border-radius: 14px; background: transparent; color: var(--ff-ink); cursor: pointer; font: inherit; transition: background .2s; min-width: 0; }
.ff-tm:hover { background: var(--ff-raised); }
.ff-tm:focus-visible { outline: 1px solid var(--ff-candle); outline-offset: 2px; }
.ff-tm-on { background: var(--ff-surface); box-shadow: inset 0 0 0 1.5px var(--ff-candle); }
.ff-tm-bars { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 120px; }
.ff-tm-bars i, .ff-tb-inc, .ff-tb-exp { display: inline-block; }
.ff-tm-bars i { width: 14px; border-radius: 3px 3px 1px 1px; }
.ff-tb-inc { background: var(--ff-honey); }
.ff-tb-exp { background: oklch(0.70 0.10 40); }
.ff-tm-l { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ff-ink-2); text-align: center; }
.ff-tm-b { font-size: 11px; letter-spacing: -.02em; font-weight: 500; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.ff-trend-nob .ff-tm-b { display: none; }
.ff-tm-b.ff-good { color: var(--ff-cream); }
.ff-tm-b.ff-bad { color: var(--ff-ember); }
.ff-trend-none { margin: 16px 0 0; font: italic 400 18px Lora, serif; color: var(--ff-ink-2); }
.ff-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ff-moves-col, .ff-move { min-width: 0; }
.ff-moves-h { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 8px; }
.ff-moves-h.ff-up { color: var(--ff-ember); }
.ff-moves-h.ff-down { color: var(--ff-cream); }
.ff-move { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--ff-line-soft); color: var(--ff-ink); text-decoration: none; }
.ff-move:hover { color: var(--ff-candle-ink); }
.ff-move-n { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-move-d { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ff-move-d.ff-up { color: var(--ff-ember); }
.ff-move-d.ff-down { color: var(--ff-cream); }
.ff-move-c { font-weight: 400; color: var(--ff-ink-3); }
.ff-chg { list-style: none; margin: 0; padding: 0; }
.ff-chg-row { border-top: 1px solid var(--ff-line-soft); padding: 10px 0; min-width: 0; }
.ff-chg-row .ff-move { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 0; padding: 0 0 4px; }
.ff-chg-row .ff-move-n { font-weight: 500; flex: 1 1 auto; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.ff-chg-row .ff-move-d { flex: 0 0 auto; }
.ff-chg-mer { list-style: none; margin: 0; padding: 0; }
.ff-chg-m { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.55; color: var(--ff-ink-2); min-width: 0; }
.ff-chg-mn { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-chg-md { flex: 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 900px) {
  .ff-trend-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 48px; }
  .ff-trend { gap: 2px; }
  .ff-tm { padding: 10px 2px 8px; }
  .ff-tm-bars i { width: 8px; }
  .ff-tm-b { display: none; }
}

/* ---------- round 5: analytics first, questions panel, operations drawer (flow-analytics.js, flow-questions.js) ---------- */
.fa-root [hidden], .fa-panel[hidden], .fq-backdrop[hidden], .fa-pop[hidden], .fa-toast[hidden] { display: none !important; }
.fa-root { min-width: 0; }
.fa-root :focus-visible, .fa-panel :focus-visible, .fa-pop :focus-visible, .fa-toast :focus-visible,
.ff-drawer :focus-visible, .ff-more :focus-visible, .fa-seg :focus-visible, #ff-q-link:focus-visible { outline: 2px solid var(--ff-focus); outline-offset: 2px; }

/* sticky filter bar */
.fa-bar {
  position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 0; margin: 0 0 8px; background: var(--ff-ground); border-bottom: 1px solid var(--ff-line-soft);
}
/* search and merchant filter (W27): one row under the sticky bar, then the active filters as chips and the count */
.fa-find { margin: 0 0 8px; }
.fa-find-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fa-find-box { position: relative; flex: 1 1 220px; min-width: 0; max-width: 420px; display: inline-flex; }
.fa-find-q { width: 100%; box-sizing: border-box; min-width: 0; padding-inline-end: 40px; }
.fa-find-x { position: absolute; inset-block: 4px; inset-inline-end: 4px; width: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ff-ink-2); font-size: 16px; line-height: 1; }
.fa-find-x:hover { background: var(--ff-seg-on); color: var(--ff-ink); border-color: transparent; }
.fa-find-x[hidden] { display: none; }
.fa-find-row .fa-fb { min-height: 40px; box-sizing: border-box; }
.fa-find-row .fa-fb[aria-pressed="true"] { background: var(--ff-seg-on); box-shadow: inset 0 0 0 1px var(--ff-ring); color: var(--ff-candle-ink); font-weight: 500; }
.fa-find-chips:empty { display: none; }
.fa-find-chips { margin: 8px 0 0; }
.fa-find-chip { box-shadow: inset 0 0 0 1px var(--ff-ring); background: var(--ff-candle-bg); color: var(--ff-candle-ink); }
.fa-find-chip .fa-chip-x { color: var(--ff-candle-ink); }
.fa-find-note { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--ff-ink-2); }
.fa-find-note[hidden] { display: none; }
.fa-find-none { color: var(--ff-ink); }
.fa-f { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.fa-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ff-line-strong); max-width: 100%; }
.fa-seg button { border: 0; border-radius: 999px; padding: 5px 14px; background: transparent; color: var(--ff-ink-2); font-size: 14px; line-height: 20px; min-width: 0; }
.fa-seg button:hover { background: var(--ff-raised); border-color: transparent; color: var(--ff-ink); }
.fa-seg button[aria-pressed="true"] { background: var(--ff-seg-on); color: var(--ff-candle-ink); font-weight: 500; }
.fa-seg button:disabled, .fa-seg button:disabled:hover { background: transparent; border-color: transparent; color: var(--ff-ink-3); opacity: .45; }
.fa-ib { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--ff-ink-2); background: transparent; border: 1px solid var(--ff-edge); flex: none; }
.fa-ib:hover { color: var(--ff-ink); }
.fa-fb, .fa-period-b, .fa-banks-b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 16px; background: transparent; box-shadow: inset 0 0 0 1px var(--ff-line-strong); border: 0; }
.fa-fb:hover { box-shadow: inset 0 0 0 1px var(--ff-hover-edge); }
.fa-f-period .fa-fb { min-width: 120px; text-align: center; }
/* period presets (W26): real links; on a phone the row scrolls and fades at its end */
.fa-pre { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.fa-pre-row { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fa-pre-row::-webkit-scrollbar { display: none; }
.fa-pre-a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; line-height: 20px; white-space: nowrap; color: var(--ff-ink-2); text-decoration: none; }
.fa-pre-a:hover { background: var(--ff-raised); color: var(--ff-ink); }
.fa-pre-a[aria-current="true"] { background: var(--ff-seg-on); color: var(--ff-candle-ink); font-weight: 500; }
.fa-pre-a:focus-visible { outline: 2px solid var(--ff-focus); outline-offset: 2px; }
.fa-pre-ph:empty { display: none; }
html.fa-phone .fa-pre-ph { padding: 8px 0 0; }
.fa-pre-note { flex: 1 1 100%; margin: 0; font-size: 13px; line-height: 18px; color: var(--ff-ink-2); }
html.fa-phone .fa-pre-row { padding-inline-end: 32px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }

/* layout: one column; docked panel from 1100px (JS adds html.fa-wide) */
.fa-layout { display: block; min-width: 0; }
.fa-main { min-width: 0; }
html.fa-wide .fa-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
/* closing the docked panel: its column and gap shrink with the shared ease-out, so the main column grows
   over a quarter second instead of snapping wider in one frame (opening stays instant: the panel fades in) */
html.fa-wide .fa-layout.fa-panel-off { grid-template-columns: minmax(0, 1fr) 0px; column-gap: 0; transition: grid-template-columns .25s ease-out, column-gap .25s ease-out; }
@media (prefers-reduced-motion: reduce) { html.fa-wide .fa-layout.fa-panel-off { transition: none; } }
.fa-panel:empty { display: none; }
.fa-panel { box-sizing: border-box; min-width: 0; background: var(--ff-surface); border-radius: 16px; padding: 16px; box-shadow: inset 0 0 0 1px var(--ff-line); }
html.fa-wide .fa-panel:not(.fq-sheet) { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto; margin-top: 24px; }
.fa-panel-h { margin: 0; }

/* phone bottom sheet: JS sets [hidden] when closed */
.fa-panel.fq-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow: auto; z-index: 60; margin: 0;
  border-radius: 18px 18px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: inset 0 1px 0 var(--ff-line-strong), 0 -16px 48px -12px var(--ff-shadow); background: var(--ff-surface);
}
.fa-panel.fq-sheet.fq-open { animation: fa-sheet-in .25s ease-out; }
.fa-panel.fq-flash { animation: fq-flash-k 1.2s ease-out; }
@keyframes fq-flash-k { 0%, 100% { box-shadow: inset 0 0 0 1px var(--ff-line); } 25% { box-shadow: inset 0 0 0 2px var(--ff-candle), 0 0 14px 2px var(--ff-candle); } }
@keyframes fa-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
#fq-backdrop.fq-backdrop, .fq-backdrop { position: fixed; inset: 0; z-index: 59; background: oklch(0.1 0.02 45 / .5); }
html.fq-sheet-open, html.fq-sheet-open body, html.ff-drawer-open, html.ff-drawer-open body { overflow: hidden; }

/* Keep the phone question link in the header so it never covers chart labels. */
html.fa-phone[data-route="analytics"] #ff-q-link, html.fa-phone[data-route="questions"] #ff-q-link {
  position: static; transform: none; min-height: 44px; box-sizing: border-box;
  justify-content: center; background: var(--ff-raised-2); border-color: var(--ff-edge); box-shadow: 0 8px 24px -8px var(--ff-shadow);
}
html.fa-phone[data-route="analytics"] #ff-q-link.has-q, html.fa-phone[data-route="questions"] #ff-q-link.has-q { background: var(--ff-candle-bg); color: var(--ff-candle-ink); border-color: var(--ff-ring); }
html.fa-phone.fq-sheet-open #ff-q-link { display: none; }

/* hero */
.fa-hero { padding: 24px 0 8px; }
.fa-sentence { margin: 0; font: italic 400 26px/1.3 Lora, serif; color: var(--ff-ink-voice); text-wrap: pretty; }
.fa-num { font-family: Commissioner, -apple-system, "Segoe UI", sans-serif; font-style: normal; font-weight: 500; color: var(--ff-ink); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.fa-good { color: var(--ff-candle-ink); }
.fa-bad { color: var(--ff-ember); }
.fa-qline { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ff-ink-2); }

/* forecast tile (W19). The four bar parts alternate light and dark so that each neighbour is at least 3:1 apart in both themes */
.fa-fc { --fc-in: oklch(0.91 0.12 90); --fc-exp: oklch(0.58 0.10 75); --fc-spent: oklch(0.91 0.07 25); --fc-rest: oklch(0.58 0.12 350);
  --fc-in-alt: oklch(0.58 0.12 90); --fc-exp-alt: oklch(0.91 0.10 75); --fc-spent-alt: oklch(0.58 0.09 25); --fc-rest-alt: oklch(0.91 0.09 350);
  margin: 16px 0 8px; padding: 20px 24px 18px; background: var(--ff-raised); border: 1px solid var(--ff-line); border-radius: 24px; }
[data-theme="light"] .fa-fc { --fc-in: oklch(0.56 0.13 65); --fc-exp: oklch(0.27 0.05 70); --fc-spent: oklch(0.56 0.15 30); --fc-rest: oklch(0.27 0.08 340);
  --fc-in-alt: oklch(0.27 0.06 65); --fc-exp-alt: oklch(0.56 0.12 70); --fc-spent-alt: oklch(0.27 0.07 30); --fc-rest-alt: oklch(0.56 0.12 340); }
.fa-fc[hidden] { display: none; }
.fa-fc-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.fa-fc-h { margin: 0; font: italic 400 24px/1.3 Lora, serif; color: var(--ff-ink-voice); }
.fa-fc-asof { font-size: 13px; color: var(--ff-ink-3); }
.fa-fc-kind { margin: 12px 0 0; font-size: 14px; color: var(--ff-ink-2); }
.fa-fc-total { margin: 2px 0 12px; font-size: 44px; line-height: 1.15; font-weight: 500; color: var(--ff-candle-ink); }
.fa-fc-total.fa-bad { color: var(--ff-ember); }
.fa-fc-bar { display: flex; gap: 3px; height: 12px; }
.fa-fc-seg { flex: 0 1 0; min-width: 8px; border-radius: 6px; }
.fa-fc-seg[hidden] { display: none; }
.fa-fc-seg.fa-fc-in { background: var(--fc-in); } .fa-fc-seg.fa-fc-exp { background: var(--fc-exp); }
.fa-fc-seg.fa-fc-spent { background: var(--fc-spent); } .fa-fc-seg.fa-fc-rest { background: var(--fc-rest); }
.fa-fc-seg.fa-fc-alt.fa-fc-in, .fa-fc-lg.fa-fc-alt.fa-fc-in .fa-fc-sw { background: var(--fc-in-alt); } .fa-fc-seg.fa-fc-alt.fa-fc-exp, .fa-fc-lg.fa-fc-alt.fa-fc-exp .fa-fc-sw { background: var(--fc-exp-alt); }
.fa-fc-seg.fa-fc-alt.fa-fc-spent, .fa-fc-lg.fa-fc-alt.fa-fc-spent .fa-fc-sw { background: var(--fc-spent-alt); } .fa-fc-seg.fa-fc-alt.fa-fc-rest, .fa-fc-lg.fa-fc-alt.fa-fc-rest .fa-fc-sw { background: var(--fc-rest-alt); }
.fa-fc-grow .fa-fc-seg { animation: fa-fc-grow 150ms cubic-bezier(.2, .7, .2, 1) backwards; }
.fa-fc-grow .fa-fc-exp { animation-delay: 150ms; } .fa-fc-grow .fa-fc-spent { animation-delay: 300ms; } .fa-fc-grow .fa-fc-rest { animation-delay: 450ms; }
@keyframes fa-fc-grow { from { flex-grow: 0; } }
@media (prefers-reduced-motion: reduce) { .fa-fc-grow .fa-fc-seg { animation: none; } }
.fa-fc-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ff-ink-2); }
.fa-fc-lg { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fa-fc-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; align-self: center; }
.fa-fc-lg.fa-fc-in .fa-fc-sw { background: var(--fc-in); } .fa-fc-lg.fa-fc-exp .fa-fc-sw { background: var(--fc-exp); }
.fa-fc-lg.fa-fc-spent .fa-fc-sw { background: var(--fc-spent); } .fa-fc-lg.fa-fc-rest .fa-fc-sw { background: var(--fc-rest); }
.fa-fc-lg .fa-num { font-size: 13px; }
.fa-fc-line { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ff-ink-soft); text-wrap: pretty; }
.fa-fc-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ff-line); }
.fa-fc-parts dt { font-size: 13px; color: var(--ff-ink-3); }
.fa-fc-parts dd { margin: 2px 0 0; font-size: 16px; }
.fa-fc #fa-fc-how { margin-top: 6px; min-height: 44px; padding-left: 0; cursor: pointer; }
.fa-fc-note { margin: 12px 0 0; padding: 12px 16px; border-radius: 16px; background: var(--ff-surface); font-size: 14px; color: var(--ff-ink-2); }
.fa-fc-note strong { display: block; color: var(--ff-ink); font-weight: 600; }
.fa-fc-note p { margin: 2px 0 0; }
html.fa-phone .fa-fc { padding: 16px; border-radius: 20px; }
html.fa-phone .fa-fc-h { font-size: 20px; }
html.fa-phone .fa-fc-total { font-size: 36px; }
html.fa-phone .fa-fc-legend { flex-direction: column; gap: 6px; }
html.fa-phone .fa-fc-lg { display: grid; grid-template-columns: 10px 1fr auto; column-gap: 8px; align-items: baseline; }
html.fa-phone .fa-fc-lg .fa-fc-sw { align-self: start; margin-top: 4px; }
html.fa-phone .fa-fc-lg .fa-num { justify-self: end; }
html.fa-phone .fa-fc-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { html:not(.fa-phone) .fa-fc-parts { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fa-note { margin: 0; font-size: 13px; color: var(--ff-ink-3); }
.fa-h2 { margin: 0; font: italic 400 24px/1.25 Lora, serif; color: var(--ff-ink); }
.fa-river, .fa-struct, .fa-months { margin-top: 32px; min-width: 0; }

/* river */
.fa-river-box { width: 100%; min-width: 0; }
.fa-river-svg { display: block; width: 100%; overflow: visible; color: var(--ff-ink); font-family: Commissioner, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums lining-nums; }
.fa-river-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.fa-rl { color: var(--ff-ink); pointer-events: none; }
.fa-rl-name { font-size: 14px; }
.fa-rl-amt { font-size: 14px; font-weight: 500; }
.fa-rl-d { font-size: 12px; color: var(--ff-ink-3); }
.fa-rl-d.fa-up { color: var(--ff-ember); }
.fa-rl-d.fa-down { color: var(--ff-cream); }
.fa-rl-d.fa-flat { color: var(--ff-ink-3); }
.fa-river-svg.fa-phone .fa-rl-name, .fa-river-svg.fa-phone .fa-rl-amt { font-size: 13px; }
.fa-river-svg.fa-phone .fa-rl-d { display: none; }
.fa-total { font-size: 15px; font-weight: 500; }
.fa-band, .fa-node, .fa-arc { cursor: pointer; }
.fa-arc { stroke: var(--ff-ground); stroke-width: 1.5; }
.fa-hatch-bg { fill: var(--ff-raised-2); }
.fa-hatch-line { stroke: var(--ff-ink-3); stroke-width: 2; }
.fa-dot-q { background: repeating-linear-gradient(45deg, var(--ff-ink-3) 0 2px, var(--ff-raised-2) 2px 5px); }
.fa-chip-q { background: repeating-linear-gradient(45deg, var(--ff-raised-3) 0 2px, var(--ff-raised-2) 2px 7px); }

/* glow: 2 s pulse on the stream or chip that just received money */
.fa-glow { animation: fa-glow-f 2s ease-in-out; }
.fa-chip.fa-glow { animation-name: fa-glow-b; }
@keyframes fa-glow-f { 0%, 100% { filter: drop-shadow(0 0 0 transparent); } 40% { filter: drop-shadow(0 0 6px var(--ff-candle)); } }
@keyframes fa-glow-b { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 40% { box-shadow: 0 0 0 3px var(--ff-candle-bg), 0 0 12px 2px var(--ff-candle); } }

/* buttons */
.fa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 16px; border-radius: 999px; background: transparent; border: 1px solid var(--ff-edge); color: var(--ff-ink); font-size: 14px; line-height: 20px; text-decoration: none; }
.fa-btn:hover { background: var(--ff-raised); border-color: var(--ff-hover-edge); color: var(--ff-ink); }
.fa-btn-main, a.fa-btn-main { background: var(--ff-candle); border-color: var(--ff-candle); color: var(--ff-on-candle); font-weight: 500; }
.fa-btn-main:hover, a.fa-btn-main:hover { background: var(--ff-honey); border-color: var(--ff-honey); color: var(--ff-on-candle); }
.fa-btn-on, .fa-btn[aria-pressed="true"] { background: var(--ff-candle-bg); border-color: var(--ff-ring); color: var(--ff-candle-ink); }
.fa-link, .fa-btn.fa-link { border: 0; background: transparent; padding: 6px 8px; color: var(--ff-candle-ink); text-decoration: underline; text-underline-offset: 3px; }
.fa-link:hover, .fa-btn.fa-link:hover { background: transparent; color: var(--ff-ink); }
.fa-busy { cursor: progress; opacity: .55; }

/* structure: chips and ring */
.fa-st-head, .fa-mo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.fa-st-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-merge-bar { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.fa-sug { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-sug-b { padding: 5px 14px; border-radius: 999px; background: transparent; color: var(--ff-candle-ink); border: 1px dashed var(--ff-ring); font-size: 14px; }
.fa-sug-b:hover { background: var(--ff-candle-bg); }
.fa-st-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; }
.fa-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; }
.fa-chip { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; border-radius: 999px; background: var(--ff-raised-2); color: var(--ff-ink); transition: opacity .2s; }
.fa-chip-b { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-size: 14px; }
.fa-chip-b:hover { background: var(--ff-raised-3); border-color: transparent; }
.fa-chip.fa-merged .fa-chip-b { padding-right: 6px; border-radius: 999px 0 0 999px; }
.fa-chip-x { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; margin-right: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--ff-ink-2); font-size: 16px; line-height: 1; flex: none; }
.fa-chip-x:hover { background: var(--ff-seg-on); color: var(--ff-ink); border-color: transparent; }
.fa-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.fa-chip-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-chip-v { flex: none; color: var(--ff-ink-2); font-variant-numeric: tabular-nums lining-nums; }
.fa-chip.fa-off { opacity: .55; }
.fa-chip.fa-off .fa-chip-n { text-decoration: line-through; }
.fa-chip.fa-sel { outline: 2px solid var(--ff-focus); outline-offset: 1px; }
.fa-ring { position: relative; min-width: 0; }
.fa-ring-svg { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; overflow: visible; color: var(--ff-ink); font-family: Commissioner, sans-serif; }
.fa-ring-v { font-size: 20px; font-weight: 500; }
.fa-ring-l { font-size: 12px; color: var(--ff-ink-2); }
.fa-ring-empty { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 0 24px; text-align: center; font: italic 400 15px/1.4 Lora, serif; color: var(--ff-ink-2); pointer-events: none; }

/* months strip */
.fa-mo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.fa-mo-b { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; padding: 8px 2px 6px; border: 0; border-radius: 12px; background: transparent; color: var(--ff-ink-2); touch-action: pan-y; }
.fa-mo-b:hover { background: var(--ff-raised); border-color: transparent; }
.fa-mo-b.fa-on { background: var(--ff-surface); box-shadow: inset 0 0 0 1.5px var(--ff-candle); color: var(--ff-candle-ink); }
.fa-mo-b.fa-drag { background: var(--ff-sel); box-shadow: inset 0 0 0 1px var(--ff-ring); }
.fa-mo-b:disabled, .fa-mo-b:disabled:hover { background: transparent; border-color: transparent; }
.fa-mo-bar { display: flex; flex-direction: column-reverse; justify-content: flex-start; height: 120px; width: 60%; max-width: 32px; margin: 0 auto; }
.fa-mo-bar i { display: block; flex: none; min-height: 1px; }
.fa-mo-l { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: visible; }

/* popover, category picker, toast */
.fa-pop {
  position: absolute; z-index: 70; box-sizing: border-box; max-width: calc(100vw - 16px); max-height: 70vh; overflow: auto;
  background: var(--ff-raised-2); border-radius: 12px; padding: 12px; color: var(--ff-ink);
  box-shadow: inset 0 0 0 1px var(--ff-line-strong), 0 24px 48px -16px var(--ff-shadow);
}
.fa-pop-h { margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ff-ink-2); }
.fa-pop-s { margin: 0 0 8px; font-size: 13px; color: var(--ff-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-pop-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.fa-pop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.fa-pop-grid .fa-btn { padding: 6px 4px; min-width: 0; }
.fa-pop-list { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; }
.fa-pop-err { margin: 8px 0 0; font-size: 13px; color: var(--ff-ember); }
.fa-sw-row, .fa-pick-b { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ff-ink); font-size: 14px; text-align: left; }
.fa-sw-row { justify-content: space-between; }
.fa-sw-row:hover, .fa-pick-b:hover { background: var(--ff-raised-3); border-color: transparent; }
.fa-pick-b[aria-pressed="true"] { background: var(--ff-candle-bg); color: var(--ff-candle-ink); }
.fa-pick { max-height: 280px; overflow: auto; }
.fa-sw-row .ff-switch-track { display: inline-block; position: relative; flex: none; width: 44px; height: 24px; border-radius: 999px; background: var(--ff-raised-3); box-shadow: inset 0 0 0 1px var(--ff-edge); transition: background .2s; }
.fa-sw-row .ff-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ff-ink-2); transition: transform .2s, background .2s; }
.fa-sw-row[aria-checked="true"] .ff-switch-track { background: var(--ff-candle); box-shadow: none; }
.fa-sw-row[aria-checked="true"] .ff-switch-knob { transform: translateX(20px); background: var(--ff-on-candle); }
.fa-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px 12px 10px 18px; border-radius: 999px;
  background: var(--ff-raised-3); color: var(--ff-ink); font-size: 14px; box-shadow: inset 0 0 0 1px var(--ff-edge), 0 16px 40px -12px var(--ff-shadow);
}
.fa-toast-on { animation: fa-toast-in .2s ease-out; }
@keyframes fa-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.fa-toast-t { min-width: 0; }
.fa-toast-u { padding: 4px 12px; border: 0; background: transparent; color: var(--ff-candle-ink); font-weight: 500; }
.fa-toast-u:hover { background: var(--ff-seg-on); border-color: transparent; }

/* operations table: category tag */
td.fa-tag { cursor: pointer; text-decoration: underline dashed var(--ff-edge); text-underline-offset: 5px; text-decoration-thickness: 1px; }
td.fa-tag:hover { color: var(--ff-candle-ink); text-decoration-color: var(--ff-candle-ink); }
td.fa-tag:focus-visible { outline: 2px solid var(--ff-focus); outline-offset: -2px; border-radius: 6px; }
td.cat-cell.fa-tag-q, td.cat-cell.fa-tag-q[data-cat] { color: var(--ff-candle-ink); }
td.cat-cell.fa-tag-q::before, td.cat-cell.fa-tag-q[data-cat]::before {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; vertical-align: 0;
  background: repeating-linear-gradient(45deg, var(--ff-ink-3) 0 2px, var(--ff-raised-2) 2px 5px);
}

/* operations drawer */
#ff-page-ops.ff-drawer, .ff-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(1100px, 100vw); max-width: 100vw; box-sizing: border-box; overflow: auto; z-index: 50;
  margin: 0; padding: 16px 20px; background: var(--ff-ground); box-shadow: 0 0 64px -8px var(--ff-shadow); animation: fa-drawer-in .25s ease-out;
}
@keyframes fa-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
#ff-scrim.ff-scrim, .ff-scrim { position: fixed; inset: 0; z-index: 49; background: oklch(0.1 0.02 45 / .5); }
.ff-drawer-head { position: sticky; top: -16px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -16px -20px 16px; padding: 16px 20px 12px; background: var(--ff-ground); border-bottom: 1px solid var(--ff-line-soft); }
.ff-drawer-head .ff-title { margin: 0; font-size: 30px; }
.ff-drawer-x { width: 44px; height: 44px; font-size: 22px; }
.ff-drawer > *, .ff-drawer .table-card, .ff-drawer .card, .ff-drawer #ff-filterbar, .ff-drawer .kpi-row { min-width: 0; max-width: 100%; }
.ff-drawer .table-scroll { max-width: 100%; overflow-x: auto; resize: none; }
.ff-drawer > .ff-drawer-head { max-width: none; }
/* scroll cue: the wide table fades at its right edge so the cut CUR. column reads as scrollable */
.ff-drawer .table-scroll { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); }
.ff-drawer .grid { grid-template-columns: minmax(0, 1fr); }
.ff-drawer .chart-wrap { max-width: 100%; }

/* analytics sub routes and the "more" section */
.fa-root.fa-sub-on .fa-main, .fa-root.fa-sub-on .fa-panel, .fa-root.fa-sub-on .fa-toast { display: none; }
.ff-more { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--ff-line); }
.ff-more-h { margin-bottom: 16px; font-size: 20px; }
.ff-more .ff-subnav { margin-bottom: 0; }
html.fa-phone .ff-more { margin-top: 16px; }
.ff-subnav a[aria-current="page"] { background: var(--ff-seg-on); color: var(--ff-candle-ink); font-weight: 500; }

/* questions panel */
.fq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.fq-h { margin: 0; font: italic 400 22px/1.25 Lora, serif; color: var(--ff-ink); outline: none; }
.fq-x { width: 36px; height: 36px; font-size: 20px; }
.fq-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--ff-ink-2); }
.fq-list { list-style: none; margin: 0; padding: 0; }
.fq-card { margin: 0 0 10px; padding: 12px; border-radius: 12px; background: var(--ff-raised); box-shadow: inset 0 0 0 1px var(--ff-line-soft); min-width: 0; }
.fq-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--ff-ink-3); }
.fq-date, .fq-bank, .fq-who { white-space: nowrap; }
.fq-who { color: var(--ff-candle-ink); }
.fq-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.fq-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.fq-amt { flex: none; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.fq-guess { margin: 10px 0; font: italic 400 17px/1.35 Lora, serif; color: var(--ff-ink-voice); }
.fq-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fq-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fq-sel, .fq-note { width: 100%; box-sizing: border-box; min-width: 0; }
.fq-note { height: 40px; }
.fq-save { align-self: flex-start; }
.fq-err { margin: 8px 0 0; font-size: 13px; color: var(--ff-ember); }
.fq-done { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; background: transparent; }
.fq-done-t { margin: 0; min-width: 0; font-size: 14px; color: var(--ff-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fq-closed { padding: 16px 0 8px; }
/* nothing to answer: the title carries the done mark (QA r8c) */
.fq-h-tick { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--ff-candle); color: var(--ff-on-candle); font: 600 13px/1 system-ui, sans-serif; vertical-align: 3px; }
.fq-closed-t { margin: 0; font: italic 400 22px/1.25 Lora, serif; color: var(--ff-ink); }
.fq-closed-s { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ff-ink-2); }
.fq-try { margin-top: 16px; }

/* ---------- cabinet lenses: preview on analytics, explore page #/explore (flow-explore.js, flow-analytics.js) ---------- */
/* preview row under the structure head */
.fa-lens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; min-width: 0; }
.fa-lens-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.fa-lens-b { max-width: 100%; padding: 5px 14px; }
.fa-lens-b[aria-pressed="true"] { font-weight: 500; }
.fa-lens-on { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 2px; min-width: 0; padding: 0 4px 0 14px; border-radius: 999px; background: var(--ff-raised-2); color: var(--ff-ink-2); font-size: 13px; }
.fa-lens-t { min-width: 0; overflow-wrap: anywhere; }
.fa-lens-on .fa-btn.fa-link { font-size: 13px; padding: 4px 8px; }
.fa-lens-note { margin: -8px 0 16px; }
.fa-chip.fa-part:not(.fa-sel) { outline: 1px dashed var(--ff-line-strong); outline-offset: -3px; }

/* explore: the chrome the rail replaces goes away; the page itself keeps scrolling */
html[data-route="explore"] #ff-header, html[data-route="explore"] .ff-more, html[data-route="explore"] #fa-months, html[data-route="explore"] #fa-panel { display: none !important; }
html[data-route="explore"] #fa-struct .fa-st-head, html[data-route="explore"] #fa-lens, html[data-route="explore"] #fa-struct .fa-lens-note,
html[data-route="explore"] #fa-chips, html[data-route="explore"] #fq-backdrop { display: none !important; }
html[data-route="explore"] #fa-struct .fa-st-body { grid-template-columns: minmax(0, 1fr); }
html[data-route="explore"] #fa-struct .fa-ring { width: 100%; max-width: 240px; margin: 0 auto; }

/* head */
.fx-head { padding: 24px 0 0; min-width: 0; }
.fx-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fx-title { margin: 0; min-width: 0; font: italic 400 30px/1.2 Lora, serif; color: var(--ff-ink); overflow-wrap: anywhere; }
.fx-close { flex: none; }
.fx-sel { margin: 8px 0 0; font-size: 16px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums lining-nums; color: var(--ff-ink); }
.fx-base { margin: 4px 0 0; }

/* rail */
.fx-rail { min-width: 0; }
.fx-sec { margin-top: 24px; min-width: 0; }
.fx-h { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ff-ink-2); }
.fx-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.fx-filters, .fx-groups { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.fx-sec-mode .fx-empty-only { margin-top: 8px; }
.fx-pill { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ff-edge); }
.fx-pill .fa-btn { min-width: 0; max-width: 100%; border: 0; border-radius: 999px 0 0 999px; background: transparent; padding: 5px 8px 5px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; text-align: left; }
.fx-pill .fa-btn:hover, .fx-pill .fa-btn[aria-pressed="true"]:hover { background: var(--ff-raised); }
.fx-pill .fa-btn[aria-pressed="true"] { background: transparent; color: var(--ff-candle-ink); font-weight: 500; }
.fx-pill:has(.fa-btn[aria-pressed="true"]) { background: var(--ff-candle-bg); box-shadow: inset 0 0 0 1px var(--ff-ring); }
.fx-pill.fx-absent { opacity: .55; }
.fx-x { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; margin-right: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--ff-ink-2); font-size: 16px; line-height: 1; }
.fx-x:hover { background: var(--ff-seg-on); color: var(--ff-ink); border-color: transparent; }
.fx-x svg { display: block; }
/* the «Не разобрано» row has no solo button: an empty slot keeps its amount in the column */
.fx-x-none { visibility: hidden; }
.fx-cats { list-style: none; margin: 0; padding: 0; }
.fx-cat { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fx-cat-b { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; box-sizing: border-box; padding: 8px 8px 9px; border: 0; border-radius: 8px; background: transparent; color: var(--ff-ink); font-size: 14px; line-height: 20px; text-align: left; }
button.fx-cat-b:hover { background: var(--ff-raised); border-color: transparent; }
span.fx-cat-b { cursor: default; }
.fx-cat-n { grid-column: 2; min-width: 0; margin-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-cat-s { grid-column: 3; margin-left: 8px; font-size: 12px; color: var(--ff-ink-3); white-space: nowrap; }
.fx-cat-s:empty { margin-left: 0; }
.fx-cat-v { grid-column: 4; margin-left: 10px; text-align: right; color: var(--ff-ink-2); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.fx-cat-bar { grid-column: 1 / -1; display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--ff-line-soft); overflow: hidden; }
.fx-cat-bar i { display: block; height: 100%; border-radius: 2px; }
.fx-cat.fx-off { opacity: .55; }
.fx-cat.fx-off .fx-cat-n { text-decoration: line-through; }
.fx-cat.fx-off .fx-cat-bar { visibility: hidden; }
.fx-cat-q .fx-cat-bar { display: none; }
.fx-cat-q .fx-cat-b { padding-bottom: 8px; }

/* from 1100 px: rail beside the river; below: one column in the plan's order */
html.fa-wide[data-route="explore"] #fa-layout { grid-template-columns: 360px minmax(0, 1fr); gap: 32px; }
html.fa-wide[data-route="explore"] #fx-rail { position: sticky; top: 72px; box-sizing: border-box; max-height: calc(100vh - 88px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--ff-edge) transparent; }
html:not(.fa-wide)[data-route="explore"] #fa-layout { display: flex; flex-direction: column; }
html:not(.fa-wide)[data-route="explore"] #fx-rail:not([hidden]), html:not(.fa-wide)[data-route="explore"] #fa-main { display: contents; }
html:not(.fa-wide)[data-route="explore"] .fx-sec-filters { order: 1; }
html:not(.fa-wide)[data-route="explore"] #fa-layout .fa-river { order: 2; }
html:not(.fa-wide)[data-route="explore"] .fx-sec-mode { order: 3; }
html:not(.fa-wide)[data-route="explore"] .fx-sec-groups { order: 4; }
html:not(.fa-wide)[data-route="explore"] .fx-sec-cats { order: 5; }
html:not(.fa-wide)[data-route="explore"] #fa-layout .fa-struct { order: 6; }

/* sticky bottom bar, phone only */
.fx-foot { display: none; }
.fx-foot-sel { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }

/* dialogs */
.fx-scrim { position: fixed; inset: 0; z-index: 90; background: oklch(0.1 0.02 45 / .5); }
.fx-dialog {
  position: fixed; inset: 0; margin: auto; z-index: 91; box-sizing: border-box; width: min(480px, calc(100vw - 32px)); height: fit-content; max-height: calc(100vh - 64px);
  display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 16px; background: var(--ff-surface); color: var(--ff-ink);
  box-shadow: inset 0 0 0 1px var(--ff-line-strong), 0 24px 48px -16px var(--ff-shadow);
}
html.fx-dialog-open body { overflow: hidden; }
.fx-dlg-h { margin: 0; flex: none; font: italic 400 22px/1.25 Lora, serif; color: var(--ff-ink); overflow-wrap: anywhere; }
.fx-field { display: flex; flex-direction: column; gap: 6px; flex: none; min-width: 0; margin: 0; padding: 0; border: 0; font-size: 13px; color: var(--ff-ink-2); }
.fx-field input[type="text"] { width: 100%; box-sizing: border-box; }
.fx-field legend { padding: 0; margin-bottom: 6px; font-size: 13px; color: var(--ff-ink-2); }
.fx-field-list { flex: 1 1 auto; min-height: 0; }
.fx-checks { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 2px 8px; scrollbar-width: thin; scrollbar-color: var(--ff-edge) transparent; }
.fx-check { display: flex; align-items: center; gap: 10px; min-width: 0; box-sizing: border-box; padding: 6px 8px; border-radius: 8px; color: var(--ff-ink); font-size: 14px; line-height: 20px; cursor: pointer; }
.fx-check:hover { background: var(--ff-raised-3); }
.fx-check input { flex: none; margin: 0; }
.fx-check span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-fold { flex: none; }
.fx-keeps { flex: none; font-size: 13px; line-height: 1.5; }
.fx-dlg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; margin-top: 4px; }
.fx-sp { flex: 1 1 0; min-width: 0; }
.fa-btn.fx-danger { color: var(--ff-ember); }

/* phone: <720px, touch targets and no horizontal overflow */
html.fa-phone :is(.fa-root, .fa-panel, .ff-drawer, .fa-pop, .fa-toast, .ff-header) :is(button, a, select, [role="button"], [role="switch"], input:not([type="checkbox"], [type="radio"])) { min-height: 44px; min-width: 44px; }
html.fa-phone td.fa-tag { min-height: 44px; }
/* phone: twelve 44 px months do not fit 375 px, so the strip scrolls inside its own box (latest month in view) */
html.fa-phone .fa-mo { grid-template-columns: repeat(12, 44px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
html.fa-phone .fa-root .fa-mo .fa-mo-b { min-width: 44px; touch-action: pan-x; }
/* scroll cue: the strip fades at both edges so a half-visible month reads as scrollable, not cut */
html.fa-phone .fa-mo { padding-inline: 12px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
html.fa-phone .fa-bar { gap: 6px; }
html.fa-phone .fa-f { flex-wrap: wrap; }
html.fa-phone .fa-seg button { padding: 5px 12px; }
html.fa-phone .fa-f-period { flex: 1 1 100%; justify-content: space-between; }
html.fa-phone .fa-f-period .fa-fb { flex: 1 1 auto; min-width: 0; }
html.fa-phone .fa-sentence { font-size: 20px; }
html.fa-phone .fa-st-body { grid-template-columns: minmax(0, 1fr); }
/* the donut first, its legend chips under it */
html.fa-phone .fa-st-body .fa-ring { order: -1; }
html.fa-phone .fa-mo { gap: 2px; }
html.fa-phone .fa-mo-bar { height: 90px; width: 70%; }
html.fa-phone .fa-mo-l { font-size: 10px; letter-spacing: 0; }
html.fa-phone .fa-pop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.fa-phone .fa-toast { bottom: 72px; }
html.fa-phone .fq-acts .fa-btn { flex: 1 1 0; }
html.fa-phone .ff-drawer, html.fa-phone #ff-page-ops.ff-drawer { padding: 12px 16px; }
.ff-drawer .card-max { z-index: 2; }
html.fa-phone .ff-drawer-head { margin: -12px -16px 12px; padding: 12px 16px 8px; top: -12px; }
html.fa-phone .ff-drawer-head .ff-title { font-size: 24px; }
html.fa-phone .fa-chip-b { max-width: 100%; }

/* phone: explore */
html.fa-phone[data-route="explore"] .fx-head { padding-top: 16px; }
html.fa-phone[data-route="explore"] .fx-title { font-size: 24px; }
html.fa-phone[data-route="explore"] .fa-hero { display: none; }
html.fa-phone[data-route="explore"] .fx-filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
html.fa-phone[data-route="explore"] .fx-filters .fx-pill { flex: none; }
html.fa-phone[data-route="explore"] .fx-sec-filters .fx-acts { display: none; }
html.fa-phone[data-route="explore"] #fa-layout { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
html.fa-phone[data-route="explore"] .fx-x { width: 44px; height: 44px; }
html.fa-phone[data-route="explore"] .fx-cat-b { min-height: 44px; }
html.fa-phone[data-route="explore"] #fx-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--ff-ground); border-top: 1px solid var(--ff-line);
}
html.fa-phone[data-route="explore"] #fx-foot .fa-btn { flex: none; }
html.fa-phone[data-route="explore"] .fa-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
html.fa-phone .fx-dialog { inset: 0; width: auto; height: auto; max-height: none; margin: 0; border-radius: 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: none; overflow: hidden; }
html.fa-phone .fx-checks { grid-template-columns: minmax(0, 1fr); }
html.fa-phone .fx-check { min-height: 44px; }
html.fa-phone .fx-dlg-acts { margin-top: auto; }

/* ---------- exits: every sheet, drawer, dialog, popover and toast leaves with the motion it arrives with ----------
   .25s for the drawer, the sheet and their scrims, .2s for the small ones, ease-out, as the entrances above.
   JS surfaces (flow.js leave()) play .ff-out and then hide; popovers, toasts and the explore dialog are [hidden] with
   display and opacity transitioning, so every code path that hides them gets the exit; native <dialog>s the same on [open]. */
@keyframes ff-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ff-fade-out { to { opacity: 0; } }
@keyframes fa-drawer-out { to { transform: translateX(100%); } }
@keyframes fa-sheet-out { to { transform: translateY(100%); } }
@keyframes fa-dlg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ff-page-in { animation: ff-fade-in .2s ease-out; }
#ff-page-ops.ff-drawer.ff-out, .ff-drawer.ff-out { animation: fa-drawer-out .25s ease-out forwards; }
.fa-panel.fq-sheet.ff-out { animation: fa-sheet-out .25s ease-out forwards; }
.fa-panel:not(.fq-sheet).ff-out { animation: ff-fade-out .2s ease-out forwards; }
.ff-scrim, .fq-backdrop { animation: ff-fade-in .25s ease-out; }
#ff-scrim.ff-scrim.ff-out, .ff-scrim.ff-out, .fq-backdrop.ff-out { animation: ff-fade-out .25s ease-out forwards; }
.fa-pop { animation: ff-fade-in .2s ease-out; transition: opacity .2s ease-out, display .2s ease-out allow-discrete; }
.fa-pop[hidden] { opacity: 0; pointer-events: none; }
.fa-toast { transition: opacity .2s ease-out, transform .2s ease-out, display .2s ease-out allow-discrete; }
.fa-toast[hidden] { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; }
.fx-scrim { animation: ff-fade-in .2s ease-out; transition: opacity .2s ease-out, display .2s ease-out allow-discrete; }
.fx-scrim[hidden] { opacity: 0; pointer-events: none; }
.fx-dialog { animation: fa-dlg-in .2s ease-out; transition: opacity .2s ease-out, transform .2s ease-out, display .2s ease-out allow-discrete; }
.fx-dialog[hidden] { opacity: 0; transform: translateY(8px); pointer-events: none; }
.ff-del-dlg { opacity: 0; transform: translateY(8px); transition: opacity .2s ease-out, transform .2s ease-out, overlay .2s ease-out allow-discrete, display .2s ease-out allow-discrete; }
.ff-del-dlg[open] { opacity: 1; transform: translateY(0); }
.ff-del-dlg::backdrop { background: transparent; transition: background-color .2s ease-out, overlay .2s ease-out allow-discrete, display .2s ease-out allow-discrete; }
.ff-del-dlg[open]::backdrop { background: oklch(0.1 0.02 45 / .5); }
@starting-style {
  .ff-del-dlg[open] { opacity: 0; transform: translateY(8px); }
  .ff-del-dlg[open]::backdrop { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .fa-glow, .fa-chip.fa-glow { animation: none; }
  .fa-band.fa-glow, .fa-arc.fa-glow, .fa-node.fa-glow { stroke: var(--ff-candle); stroke-width: 2; }
  .fa-chip.fa-glow { outline: 2px solid var(--ff-candle); outline-offset: 1px; }
  .fa-panel.fq-flash { animation: none; outline: 2px solid var(--ff-candle); outline-offset: 1px; }
  .fa-toast-on, .ff-drawer, .fa-panel.fq-sheet.fq-open { animation: none; }
  .fa-toast, .fa-chip, .fa-sw-row .ff-switch-track, .fa-sw-row .ff-switch-knob { transition: none; }
  .ff-page-in, .ff-out, .ff-scrim, .fq-backdrop, .fa-pop, .fx-scrim, .fx-dialog, .card.maxed { animation: none; }
  .fa-pop, .fx-scrim, .fx-dialog, .ff-del-dlg, .ff-del-dlg::backdrop { transition: none; }
}
/* headings that receive focus from code (drawer and panel titles) do not draw a focus box */
[tabindex="-1"]:focus:not(:focus-visible), .ff-title[tabindex="-1"]:focus, .fq-h[tabindex="-1"]:focus { outline: none; }

/* W2-10: on a phone the Transactions table keeps date, recipient, amount and category, so the amount is on screen
   without scrolling sideways; month (repeats the date), who, bank, card, description, currency, type and flag
   stay in the filters, the drawer and the CSV */
@media (max-width: 480px) {
  #tblWrap :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(9), :nth-child(10), :nth-child(11)) { display: none; }
  #tblWrap .cp-cell { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- shell rules (W18: WR-B5, WR-B9) ---------- */
/* WR-B9: Skip to content, hidden until focused, then at the top left above the header */
.ff-skip { position: fixed; left: 12px; top: calc(var(--ff-sample-h, 0px) + 12px); z-index: 1000; padding: 10px 16px; border-radius: 8px;
  background: var(--ff-ground); color: var(--ff-ink); font: 500 15px/20px Commissioner, sans-serif; text-decoration: none;
  transform: translateY(calc(-100% - var(--ff-sample-h, 0px) - 24px)); }
.ff-skip:focus, .ff-skip:focus-visible { transform: none; outline: 2px solid var(--ff-focus); outline-offset: 2px; }
#ff-main:focus { outline: none; }
/* WR-B5: an amount never breaks after its sign (the label row wraps, not the figure) */
.ff-num, .ff-kpi-v, .ff-tm-b, .ff-move-d, .ff-move-c, .ff-chg-md, .fa-num, .fa-chip-v, .ff-amt, .amt-n, .amt-p, .kpi-v { white-space: nowrap; }

/* W09 narrow phone (336): the Home category rows stack, so a name keeps its room; the month labels fit ten bars */
@media (max-width: 480px) {
  .ff-cat > a { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 12px; }
  .ff-cat-name { grid-column: 2; }
  .ff-cat-amt { grid-column: 3; }
  .ff-cat-share { grid-column: 2; grid-row: 2; text-align: left; }
  .ff-cat-d { grid-column: 3; grid-row: 2; }
  .ff-tm-l { font-size: 10px; letter-spacing: 0; }
  /* the filter bar takes three rows here (about 190 px): sticky, it covers the river it filters */
  .fa-bar { position: static; }
  /* the What changed heading names the month: one line on the 343 px column (336: 304 px) instead of breaking at 220 px */
  .ff-chg-h { font-size: min(28px, 6.7vw); }
}