.bf {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, Arial, sans-serif;
  --text: #1d1d1f;
  --secondary: #6e6e73;
  --tertiary: #aeaeb2;
  --accent: #18845a;
  --blue: #0a7aff;
  --gold: #c28e1e;
  --red: #d65c4a;
  --green: #2ead6b;
  --grey: #85918c;
  --sidebar: #e7e9ef;
  --backdrop: #eef0f5;
  --paper: #ffffff;
  --field-border: rgba(0, 0, 0, 0.14);
  --inspector: #f4f4f6;
  --row: #ffffff;
  --divider: rgba(0, 0, 0, 0.08);
}.bf * { box-sizing: border-box; }.bf .window { position: relative; width: 1440px; height: 900px; background: var(--backdrop); overflow: hidden; display: grid; grid-template-columns: 300px 1fr 280px; grid-template-rows: 52px 1fr; }.bf .window.no-inspector { grid-template-columns: 300px 1fr; }.bf .toolbar { grid-column: 1 / -1; display: grid; grid-template-columns: 300px 1fr 280px; align-items: center; background: linear-gradient(#f7f7f9, #f1f2f5); border-bottom: 1px solid var(--divider); }.bf .window.no-inspector .toolbar { grid-template-columns: 300px 1fr; }.bf .tb-sidebar { display: flex; align-items: center; gap: 8px; padding: 0 14px; }.bf .traffic { display: flex; gap: 8px; margin-right: 14px; }.bf .traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; border: 0.5px solid rgba(0,0,0,0.12); }.bf .traffic .r { background: #ff5f57; }.bf .traffic .y { background: #febc2e; }.bf .traffic .g { background: #28c840; }.bf .tb-btn { height: 28px; min-width: 32px; padding: 0 8px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #3a3a3c; font-size: 12.5px; font-weight: 500; }.bf .tb-btn.split { padding: 0 4px 0 8px; }.bf .tb-btn svg { width: 16px; height: 16px; fill: none; stroke: #3a3a3c; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.bf .tb-btn .chev { width: 9px; height: 9px; opacity: .6; }.bf .tb-btn.bordered { background: #fff; border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 1px 1px rgba(0,0,0,0.04); }.bf .tb-detail { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px; }.bf .tb-title { font-weight: 600; font-size: 13.5px; color: #1d1d1f; }.bf .segmented { display: inline-flex; gap: 2px; background: rgba(0,0,0,0.06); border-radius: 999px; padding: 3px; }.bf .segmented span { padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: #6e6e73; }.bf .segmented span.on { background: rgba(0,0,0,0.10); color: #1d1d1f; font-weight: 600; }.bf .tb-right { display: flex; justify-content: flex-end; gap: 6px; }.bf .tb-inspector { display: flex; justify-content: flex-end; padding: 0 12px; gap: 6px; }.bf .sidebar { background: linear-gradient(180deg, #e9ebf1 0%, #e4e7ee 100%); border-right: 1px solid var(--divider); padding: 10px 10px 0; display: flex; flex-direction: column; }.bf .switcher { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }.bf .switcher .thumb { width: 32px; height: 32px; border-radius: 8px; background: #fff; border: 1px solid rgba(0,0,0,0.1); display: grid; place-items: center; font-weight: 800; font-size: 11px; color: var(--accent); letter-spacing: -0.02em; }.bf .switcher .name { font-weight: 600; font-size: 13.5px; }.bf .switcher .sub { font-size: 11px; color: var(--secondary); }.bf .switcher .updown { margin-left: auto; color: var(--secondary); font-size: 10px; }.bf .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 2px 8px; }.bf .tile { border-radius: 10px; padding: 8px 10px; }.bf .tile .l { font-size: 10px; font-weight: 500; color: var(--secondary); }.bf .tile .v { font-size: 13.5px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }.bf .tile .d { font-size: 10px; margin-top: 1px; }.bf .tile.blue { background: rgba(194,142,30,0.12); }.bf .tile.red { background: rgba(214,92,74,0.12); }.bf .tile.red .d { color: var(--red); }.bf .tile.green { background: rgba(46,173,107,0.13); }.bf .tile.grey { background: rgba(133,145,140,0.14); }.bf .section-h { font-size: 11px; font-weight: 600; color: var(--secondary); padding: 12px 12px 6px; }.bf .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; margin: 0 2px; }.bf .row .c { font-weight: 500; font-size: 13px; }.bf .row .m { font-size: 11px; color: var(--secondary); margin-top: 2px; }.bf .row .amt { font-weight: 600; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }.bf .row .right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }.bf .row.selected { background: var(--accent); color: #fff; }.bf .row.selected .m { color: rgba(255,255,255,0.78); }.bf .loz { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }.bf .loz svg { width: 10px; height: 10px; }.bf .loz.draft { color: var(--grey); background: rgba(133,145,140,0.16); }.bf .loz.sent { color: var(--gold); background: rgba(194,142,30,0.14); }.bf .loz.overdue { color: var(--red); background: rgba(214,92,74,0.13); }.bf .loz.paid { color: var(--green); background: rgba(46,173,107,0.16); }.bf .row.selected .loz { color: #fff; background: rgba(255,255,255,0.24); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.35); }.bf .sidebar-footer { margin-top: auto; padding: 10px 6px 10px; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; color: var(--secondary); }.bf .sidebar-footer .line { display: flex; justify-content: space-between; align-items: center; }.bf .sidebar-footer svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; stroke: currentColor; fill: none; stroke-width: 1.8; }.bf .detail { position: relative; overflow: hidden; background: var(--backdrop); }.bf .paper-wrap { padding: 24px 26px; }.bf .paper { background: var(--paper); border-radius: 18px; padding: 36px; box-shadow: 0 10px 22px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.05); }.bf .paper-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }.bf .field { border: 1px solid var(--field-border); border-radius: 8px; background: #fff; padding: 7px 10px; font-size: 13px; color: var(--text); min-height: 32px; display: flex; align-items: center; }.bf .field.ph { color: #b0b0b6; }.bf .field.big { font-size: 30px; font-weight: 700; padding: 10px 14px; width: 420px; min-height: 56px; }.bf .hint { font-size: 11px; color: var(--tertiary); margin-top: 6px; }.bf .logo-tile { width: 220px; height: 96px; border: 1px solid var(--field-border); border-radius: 12px; display: grid; place-items: center; background: #fff; }.bf .logo-mark { font-weight: 800; font-size: 22px; letter-spacing: -0.03em; color: #1f7054; display: flex; align-items: center; gap: 8px; }.bf .logo-mark i { width: 22px; height: 22px; border-radius: 6px; background: #1f7054; display: inline-block; transform: rotate(45deg) scale(.8); }.bf .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 34px; }.bf .sec-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }.bf .sec-h h3 { margin: 0; font-size: 15px; font-weight: 600; }.bf .mini { font-size: 11px; color: var(--accent); display: inline-flex; align-items: center; gap: 5px; }.bf .mini svg { width: 12px; height: 12px; stroke: var(--accent); fill: none; stroke-width: 1.8; }.bf .frow { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }.bf .frow label { font-size: 12.5px; color: var(--secondary); }.bf .frow .field.multi { min-height: 52px; align-items: flex-start; line-height: 1.45; }.bf .frow .two { display: grid; grid-template-columns: 84px 1fr; gap: 8px; }.bf hr.div { border: 0; border-top: 1px solid var(--divider); margin: 34px 0; }.bf .meta { max-width: 420px; }.bf .meta .field.short { width: 220px; }.bf .meta .pop { width: 220px; justify-content: space-between; background: linear-gradient(#fff, #f4f4f6); }.bf .meta .pop svg { width: 10px; height: 10px; stroke: #3a3a3c; fill: none; stroke-width: 2; }.bf .meta .plain { font-size: 13px; color: var(--secondary); }.bf .items { margin-top: 34px; }.bf .items h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }.bf .ihead { display: grid; grid-template-columns: 1fr 72px 116px 112px 30px; gap: 10px; font-size: 11px; font-weight: 600; color: var(--secondary); padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.6); }.bf .ihead span:nth-child(n+2) { text-align: right; }.bf .irow { display: grid; grid-template-columns: 1fr 72px 116px 112px 30px; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); align-items: start; }.bf .irow .desc { display: flex; flex-direction: column; gap: 8px; }.bf .irow .field.num { justify-content: flex-end; }.bf .irow .amount { text-align: right; font-weight: 500; padding-top: 8px; font-variant-numeric: tabular-nums; }.bf .irow .more { color: var(--secondary); text-align: center; padding-top: 6px; }.bf .add { margin-top: 14px; color: var(--accent); font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }.bf .add i { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-grid; place-items: center; font-size: 13px; line-height: 1; }.bf .totals { display: flex; justify-content: flex-end; margin-top: 34px; }.bf .totals .box { width: 320px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }.bf .totals .tr { display: flex; justify-content: space-between; color: var(--secondary); font-variant-numeric: tabular-nums; }.bf .totals .tr b { color: var(--text); font-weight: 500; }.bf .totals .tr.total { color: var(--text); font-size: 14px; font-weight: 600; }.bf .totals .tr.total b { font-weight: 600; }.bf .totals hr { border: 0; border-top: 1px solid var(--divider); margin: 2px 0; }.bf .totals .due { display: flex; justify-content: space-between; background: rgba(24,132,90,0.10); color: var(--accent); font-weight: 600; font-size: 14px; padding: 9px 12px; border-radius: 8px; }.bf .notes { margin-top: 34px; }.bf .notes h3 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }.bf .notes .field.multi { min-height: 78px; align-items: flex-start; line-height: 1.5; color: var(--text); }.bf .inspector { background: var(--inspector); border-left: 1px solid var(--divider); padding: 14px 12px; overflow: hidden; }.bf .g-h { font-size: 11px; font-weight: 600; color: var(--secondary); padding: 8px 10px 6px; text-transform: none; }.bf .group { background: var(--row); border-radius: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 6px; }.bf .grow { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 12.5px; border-bottom: 1px solid var(--divider); gap: 10px; }.bf .grow:last-child { border-bottom: 0; }.bf .grow .val { color: var(--text); display: inline-flex; align-items: center; gap: 6px; }.bf .grow .val.sec { color: var(--secondary); }.bf .grow .pop { border: 1px solid var(--field-border); border-radius: 6px; padding: 2px 8px; background: linear-gradient(#fff,#f4f4f6); display: inline-flex; gap: 8px; align-items: center; font-size: 12px; }.bf .grow .pop svg { width: 9px; height: 9px; stroke: #3a3a3c; fill: none; stroke-width: 2; }.bf .grow input, .bf .grow .in { border: 1px solid var(--field-border); border-radius: 6px; padding: 3px 8px; width: 90px; text-align: right; font: inherit; font-size: 12px; }.bf .grow .chk { width: 14px; height: 14px; border-radius: 4px; background: var(--accent); display: inline-grid; place-items: center; }.bf .grow .chk svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 2.5; fill: none; }.bf .badge-btn { color: var(--accent); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }.bf .pro { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #fff; padding: 2px 6px; border-radius: 999px; background: linear-gradient(135deg, #fab73d, #ee703a); }.bf .pdfview { position: absolute; inset: 0; background: #d9dbe1; display: flex; justify-content: center; padding-top: 22px; overflow: hidden; }.bf .page { width: 595px; height: 842px; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,0.22); padding: 44px; font-size: 10px; color: #1f1f1f; transform: scale(1.0); transform-origin: top center; position: relative; }.bf .page .ph-row { display: flex; justify-content: space-between; align-items: flex-start; }.bf .page .ptitle { text-align: right; }.bf .page .ptitle .t { font-size: 26px; font-weight: 700; letter-spacing: .1em; }.bf .page .ptitle .n { font-size: 11px; color: #737373; margin-top: 6px; font-weight: 500; }.bf .page .plogo { font-weight: 800; font-size: 19px; letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px; }.bf .page .plogo i { width: 20px; height: 20px; border-radius: 5px; display: inline-block; transform: rotate(45deg) scale(.8); }.bf .page .parties { display: grid; grid-template-columns: 1fr 1fr 168px; gap: 24px; margin-top: 26px; }.bf .page .ph { font-size: 8.5px; font-weight: 600; letter-spacing: .13em; margin-bottom: 7px; }.bf .page .pname { font-size: 11px; font-weight: 600; }.bf .page .pl { font-size: 9.5px; color: #737373; line-height: 1.55; }.bf .page .pmeta { display: flex; justify-content: space-between; font-size: 9.5px; margin-bottom: 5px; }.bf .page .pmeta span:first-child { color: #737373; font-size: 9px; }.bf .page .pmeta span:last-child { font-weight: 500; }.bf .page table { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: 10px; }.bf .page th { font-size: 8.5px; letter-spacing: .1em; font-weight: 600; text-align: right; padding: 7px 0; border-bottom: 1.2px solid; }.bf .page th:first-child, .bf .page td:first-child { text-align: left; }.bf .page td { padding: 8px 0; border-bottom: 0.6px solid #e6e6e6; text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; }.bf .page td .d { color: #737373; font-size: 9px; margin-top: 2px; }.bf .page .psum { display: flex; justify-content: space-between; margin-top: 14px; align-items: flex-start; }.bf .page .ptot { width: 236px; font-size: 10px; }.bf .page .ptot .r { display: flex; justify-content: space-between; margin-bottom: 6px; color: #737373; }.bf .page .ptot .r b { color: #1f1f1f; font-weight: 500; }.bf .page .ptot .r.t { color: #1f1f1f; font-weight: 600; font-size: 11px; }.bf .page .ptot .bal { display: flex; justify-content: space-between; font-weight: 700; font-size: 12px; padding: 8px 10px; border-radius: 5px; margin-top: 4px; }.bf .page .pnotes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; font-size: 9.5px; color: #737373; line-height: 1.6; }.bf .page .pay { display: flex; align-items: center; gap: 12px; margin-top: 18px; }.bf .page .pay .btn { color: #fff; font-weight: 700; font-size: 11px; padding: 7px 14px; border-radius: 6px; }.bf .page .pay .l1 { font-size: 9.5px; font-weight: 500; }.bf .page .pay .l2 { font-size: 8.5px; color: #737373; }.bf .page .pfoot { position: absolute; left: 44px; right: 44px; bottom: 44px; display: flex; justify-content: space-between; font-size: 8px; color: #737373; }.bf .page .stamp { position: absolute; left: 60px; bottom: 210px; transform: rotate(-8deg); border: 2.5px solid #2a9a5c; color: #2a9a5c; border-radius: 6px; padding: 7px 14px; text-align: center; font-weight: 800; font-size: 22px; letter-spacing: .2em; }.bf .page .stamp small { display: block; font-size: 8px; letter-spacing: 0; font-weight: 600; }.bf .dim { position: absolute; inset: 0; background: rgba(0,0,0,0.12); }.bf .sheet { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); background: #f5f5f7; border-radius: 0 0 12px 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.08); overflow: hidden; }.bf .sheet .stb { height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; background: linear-gradient(#f9f9fa,#f2f2f4); border-bottom: 1px solid var(--divider); font-weight: 600; font-size: 13.5px; }.bf .sheet .stb .btn { justify-self: end; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 6px; }.bf .sheet .stb .btn.plain { background: #fff; color: var(--text); border: 1px solid var(--field-border); justify-self: start; font-weight: 500; }.bf .sheet .body { padding: 14px 18px; }.bf .sheet .foot { font-size: 11px; color: var(--secondary); padding: 6px 10px 0; line-height: 1.45; }.bf .pw { text-align: center; padding: 26px 30px; }.bf .pw .crown { width: 96px; height: 96px; border-radius: 50%; background: rgba(24,132,90,0.10); display: grid; place-items: center; margin: 0 auto 12px; }.bf .pw .crown svg { width: 44px; height: 44px; }.bf .pw h1 { font-size: 30px; margin: 0; font-weight: 700; letter-spacing: -0.02em; }.bf .pw p.lead { color: var(--secondary); font-size: 14px; margin: 8px 0 22px; line-height: 1.45; }.bf .pw .feat { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); padding: 22px; text-align: left; display: flex; flex-direction: column; gap: 16px; }.bf .pw .f { display: flex; gap: 14px; align-items: flex-start; }.bf .pw .f svg { width: 22px; height: 22px; flex: 0 0 22px; stroke: var(--accent); fill: none; stroke-width: 1.8; margin-top: 2px; }.bf .pw .f b { display: block; font-size: 14px; font-weight: 600; }.bf .pw .f span { color: var(--secondary); font-size: 12.5px; }.bf .pw .buy { margin: 22px auto 10px; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; padding: 12px; border-radius: 10px; width: 360px; }.bf .pw .restore { color: var(--secondary); font-size: 12px; }.bf .pw .fine { color: var(--tertiary); font-size: 11px; margin-top: 12px; line-height: 1.5; }.bf .smallwin { position: relative; background: #f5f5f7; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }.bf .smallwin .titlebar { height: 52px; display: flex; align-items: center; padding: 0 14px; gap: 8px; background: linear-gradient(#f7f7f9,#f0f0f3); border-bottom: 1px solid var(--divider); font-weight: 600; font-size: 13.5px; }.bf .smallwin .titlebar .t { flex: 1; text-align: center; margin-right: 58px; }.bf .form { padding: 14px 18px; }.bf .form .g-h { padding-left: 12px; }

/* ---------- Live window: scaling, layers and scroll-driven states ---------- */
.bf { position: absolute; inset: 0; overflow: hidden; font-family: var(--font); color: var(--text); font-size: 13px; -webkit-font-smoothing: antialiased; line-height: normal; text-align: left; }
.bf .scaler { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; transform: scale(var(--s, .5)); }
.bf .zoom { width: 1440px; height: 900px; transform-origin: 0 0; transform: translate(0px, 0px) scale(1); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); will-change: transform; backface-visibility: hidden; }
/* States are translate()+scale() about a fixed origin: a change of transform-origin is not animatable in a
   useful way and produced a visible jump at the start of each transition. translate = focal × (1 − scale). */
.bf .window { font-family: var(--font); }
.bf .aboutwin { position: absolute; left: 490px; top: 96px; width: 460px; z-index: 5; box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.1); }
.bf .aboutwin img { width: 112px; height: 112px; margin: 0 auto 6px; }

/* Layers start hidden and animate in per state. */
.bf .paper-wrap { transition: opacity .55s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.bf .pdfview { opacity: 0; transform: translateY(26px); pointer-events: none; transition: opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.bf .dim { opacity: 0; transition: opacity .5s ease; }
.bf .sheet { opacity: 0; transform: translate(-50%, -22px); transition: opacity .4s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.bf .aboutwin { opacity: 0; transform: scale(.9) translateY(14px); transition: opacity .4s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.bf .segmented .e, .bf .segmented .p { transition: background .4s ease, color .4s ease; }
.bf .tile, .bf .row, .bf .section-h { transition: opacity .6s ease .1s, background .5s ease, box-shadow .5s ease, color .5s ease; }

/* Preview + Pay Online */
.bf[data-state="preview"] .paper-wrap, .bf[data-state="paylink"] .paper-wrap { opacity: 0; transform: translateY(-12px); }
.bf[data-state="preview"] .pdfview, .bf[data-state="paylink"] .pdfview { opacity: 1; transform: none; }
.bf[data-state="preview"] .segmented .e, .bf[data-state="paylink"] .segmented .e { background: transparent; color: #6e6e73; font-weight: 500; }
.bf[data-state="preview"] .segmented .p, .bf[data-state="paylink"] .segmented .p { background: rgba(0,0,0,0.10); color: #1d1d1f; font-weight: 600; }
.bf[data-state="preview"] .zoom { transform: translate(-87.3px, -43.2px) scale(1.12); }
.bf[data-state="paylink"] .zoom { transform: translate(-665.3px, -718.2px) scale(2.05); }
.bf[data-state="paylink"] .pay .btn { animation: bf-pulse 1.8s ease-in-out .9s infinite; }
@keyframes bf-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,112,84,.45); } 55% { box-shadow: 0 0 0 7px rgba(31,112,84,0); } }

/* Who owes you: the Overdue tile becomes the active filter and the list narrows to match */
.bf[data-state="owed"] .zoom { transform: translate(-0.0px, -83.7px) scale(1.6); }
.bf[data-state="owed"] .tile.red { box-shadow: inset 0 0 0 1.5px var(--red); background: rgba(214,92,74,.2); }
.bf[data-state="owed"] .tile.red .l { color: var(--red); }
.bf[data-state="owed"] .row:not(:has(.loz.overdue)) { opacity: .2; }
.bf[data-state="owed"] .row.selected { background: transparent; color: var(--text); }
.bf[data-state="owed"] .row.selected .m { color: var(--secondary); }
.bf[data-state="owed"] .row.selected .loz { color: var(--grey); background: rgba(133,145,140,0.16); box-shadow: none; }
.bf[data-state="owed"] .row:has(.loz.overdue) { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.05); }
.bf[data-state="owed"] .section-h { opacity: .35; }

/* Export sheet slides down from the toolbar */
.bf[data-state="export"] .dim { opacity: 1; }
.bf[data-state="export"] .sheet { opacity: 1; transform: translate(-50%, 0); }
.bf[data-state="export"] .zoom { transform: translate(-158.4px, -71.3px) scale(1.22); }

/* About window opens */
.bf[data-state="about"] .dim { opacity: .55; }
.bf[data-state="about"] .aboutwin { opacity: 1; transform: none; }
.bf[data-state="about"] .zoom { transform: translate(-86.4px, -49.7px) scale(1.12); }

/* Fields filling in (hero on load, and step 1 each time it becomes active) */
@keyframes bf-fill { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bf.fill .cols .field, .bf.fill .irow, .bf.fill .totals .box, .bf.fill .logo-tile { animation: bf-fill .55s cubic-bezier(.2,.7,.2,1) both; }
.bf.fill .cols section:nth-child(1) .frow:nth-child(2) .field { animation-delay: 0.16s; }
.bf.fill .cols section:nth-child(1) .frow:nth-child(3) .field { animation-delay: 0.24s; }
.bf.fill .cols section:nth-child(1) .frow:nth-child(4) .field { animation-delay: 0.32s; }
.bf.fill .cols section:nth-child(1) .frow:nth-child(5) .field { animation-delay: 0.40s; }
.bf.fill .cols section:nth-child(1) .frow:nth-child(6) .field { animation-delay: 0.48s; }
.bf.fill .cols section:nth-child(1) .frow:nth-child(7) .field { animation-delay: 0.56s; }
.bf.fill .cols section:nth-child(2) .frow:nth-child(2) .field { animation-delay: 0.72s; }
.bf.fill .cols section:nth-child(2) .frow:nth-child(3) .field { animation-delay: 0.80s; }
.bf.fill .cols section:nth-child(2) .frow:nth-child(4) .field { animation-delay: 0.88s; }
.bf.fill .cols section:nth-child(2) .frow:nth-child(5) .field { animation-delay: 0.96s; }
.bf.fill .cols section:nth-child(2) .frow:nth-child(6) .field { animation-delay: 1.04s; }
.bf.fill .cols section:nth-child(2) .frow:nth-child(7) .field { animation-delay: 1.12s; }
.bf.fill .irow:nth-child(2) { animation-delay: 1.29s; }
.bf.fill .irow:nth-child(3) { animation-delay: 1.41s; }
.bf.fill .irow:nth-child(4) { animation-delay: 1.53s; }
.bf.fill .totals .box { animation-delay: 1.7s; }
.bf.fill .logo-tile { animation-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
  .bf .zoom, .bf .paper-wrap, .bf .pdfview, .bf .dim, .bf .sheet, .bf .aboutwin, .bf .tile, .bf .row, .bf .section-h { transition: none !important; }
  .bf.fill * { animation: none !important; }
  .bf[data-state="paylink"] .pay .btn { animation: none; }
}