/* Footing - the app's look: a soft glow in the brand's blues behind glass tiles, thin large numbers, hairline
   circles, pills, and navy for what is selected. Loaded after et.css on the app's pages. The first part sets
   et.css's own colours to the brand, so every screen takes the look; the rest draws the top bar, the dock and
   the Overview. Brand: footing-logo-kit/README.md. Motion is opacity and transform only. */

/* ---------- colours ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #E9E7E1;
  --surface: rgba(255, 255, 255, .55);
  --band: rgba(255, 255, 255, .3);
  --hilite: rgba(15, 46, 77, .06);
  --chip: rgba(15, 46, 77, .07);
  --rec: rgba(255, 255, 255, .28);
  --line: rgba(15, 27, 40, .1);
  --line-2: rgba(15, 27, 40, .18);
  --ink: #0F1B28;
  --text: #2A3440;
  --slate: #646E79;
  --muted: #9AA2AB;
  --navy: #0F2E4D;
  --navy-2: #173E66;
  --on-navy: #F4F7FA;
  --on-navy-2: rgba(220, 238, 251, .72);
  --primary: #0F2E4D;
  --primary-hover: #173E66;
  --on-primary: #F4F7FA;
  --nav-on-bg: #0F2E4D;
  --nav-on-fg: #F4F7FA;
  --pos: #2E7A5B;
  --neg: #C2563F;
  --due: #2B64AE;
  --inc: #6FB894; --inc-ink: #2E7A5B; --inc-fill: rgba(46, 122, 91, .35); --inc-tint: rgba(46, 122, 91, .06); --inc-tint-2: rgba(46, 122, 91, .12);
  --exp: #D98B7A; --exp-ink: #B04A35; --exp-fill: rgba(194, 86, 63, .32); --exp-tint: rgba(194, 86, 63, .05); --exp-tint-2: rgba(194, 86, 63, .11);
  --inv: #7FA0CF; --inv-ink: #3E66A0; --inv-fill: rgba(74, 111, 165, .32); --inv-tint: rgba(74, 111, 165, .06); --inv-tint-2: rgba(74, 111, 165, .12);
  --bar: #4A6FA5;
  --focus: rgba(94, 184, 255, .45);
  --scrim: rgba(8, 17, 28, .42);
  --shadow-lg: 0 24px 64px rgba(15, 27, 40, .22);
  /* Footing's own */
  --w-bg: rgba(255, 255, 255, .5); --w-line: rgba(255, 255, 255, .6); --w-bg-2: rgba(255, 255, 255, .36);
  --solid: #F5F4F0;
  --field: rgba(255, 255, 255, .6);
  --hair: rgba(15, 27, 40, .18); --hair-2: rgba(15, 27, 40, .32);
  --sel: #0F2E4D; --on-sel: #F4F7FA;
  --accent: #2B64AE;
  --tile-dark: rgba(15, 46, 77, .94); --tile-dark-line: rgba(220, 238, 251, .14);
  --on-dark: #F4F7FA; --on-dark-muted: rgba(220, 238, 251, .66);
  --c-inc: #2E7A5B; --c-exp: #C2563F; --c-inv: #4A6FA5;
  --c-inc-soft: rgba(46, 122, 91, .13); --c-exp-soft: rgba(194, 86, 63, .12); --c-inv-soft: rgba(74, 111, 165, .13);
  --c-inc-tint: rgba(46, 122, 91, .07); --c-exp-tint: rgba(194, 86, 63, .065); --c-inv-tint: rgba(74, 111, 165, .07);
  --track: rgba(15, 27, 40, .09);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #08111C;
  --surface: rgba(220, 238, 251, .06);
  --band: rgba(220, 238, 251, .04);
  --hilite: rgba(220, 238, 251, .07);
  --chip: rgba(220, 238, 251, .09);
  --rec: rgba(220, 238, 251, .035);
  --line: rgba(220, 238, 251, .1);
  --line-2: rgba(220, 238, 251, .18);
  --ink: #F4F7FA;
  --text: #D3DCE6;
  --slate: #8E9BAA;
  --muted: #637080;
  --navy: #0F2E4D;
  --navy-2: #173E66;
  --on-navy: #F4F7FA;
  --on-navy-2: rgba(220, 238, 251, .72);
  --primary: #DCEEFB;
  --primary-hover: #F4F7FA;
  --on-primary: #0F2E4D;
  --nav-on-bg: #DCEEFB;
  --nav-on-fg: #0F2E4D;
  --pos: #8BE0B0;
  --neg: #F0978A;
  --due: #5EB8FF;
  --inc: rgba(139, 224, 176, .55); --inc-ink: #8BE0B0; --inc-fill: rgba(139, 224, 176, .4); --inc-tint: rgba(139, 224, 176, .06); --inc-tint-2: rgba(139, 224, 176, .13);
  --exp: rgba(240, 151, 138, .55); --exp-ink: #F0A194; --exp-fill: rgba(240, 151, 138, .4); --exp-tint: rgba(240, 151, 138, .05); --exp-tint-2: rgba(240, 151, 138, .12);
  --inv: rgba(143, 180, 227, .6); --inv-ink: #8FB4E3; --inv-fill: rgba(143, 180, 227, .4); --inv-tint: rgba(143, 180, 227, .06); --inv-tint-2: rgba(143, 180, 227, .13);
  --bar: #8FB4E3;
  --focus: rgba(94, 184, 255, .45);
  --scrim: rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .55);
  --w-bg: rgba(220, 238, 251, .07); --w-line: rgba(220, 238, 251, .11); --w-bg-2: rgba(220, 238, 251, .05);
  --solid: #0D1B2B;
  --field: rgba(220, 238, 251, .06);
  --hair: rgba(220, 238, 251, .2); --hair-2: rgba(220, 238, 251, .34);
  --sel: #DCEEFB; --on-sel: #0F2E4D;
  --accent: #5EB8FF;
  --tile-dark: rgba(15, 46, 77, .86); --tile-dark-line: rgba(94, 184, 255, .2);
  --on-dark: #F4F7FA; --on-dark-muted: rgba(220, 238, 251, .66);
  --c-inc: #8BE0B0; --c-exp: #F0978A; --c-inv: #8FB4E3;
  --c-inc-soft: rgba(139, 224, 176, .16); --c-exp-soft: rgba(240, 151, 138, .15); --c-inv-soft: rgba(143, 180, 227, .17);
  --c-inc-tint: rgba(139, 224, 176, .07); --c-exp-tint: rgba(240, 151, 138, .06); --c-inv-tint: rgba(143, 180, 227, .07);
  --track: rgba(220, 238, 251, .1);
}
:root {
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 12px;
  --r-box: 24px;
  --r-w: 28px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: 180ms;
}
.k-inc { --k: var(--c-inc); --k-soft: var(--c-inc-soft); --k-tint: var(--c-inc-tint); }
.k-exp { --k: var(--c-exp); --k-soft: var(--c-exp-soft); --k-tint: var(--c-exp-tint); }
.k-inv { --k: var(--c-inv); --k-soft: var(--c-inv-soft); --k-tint: var(--c-inv-tint); }

/* ---------- page and glow ---------- */
/* The scrollbar's space is always kept, so locking the page while the menu is open cannot shift it sideways. */
html { background: var(--bg); scrollbar-gutter: stable; }
body.et-app { background: transparent; font-weight: 500; }
.glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html[data-theme="light"] .glow {
  background:
    radial-gradient(640px 520px at 70% 10%, rgba(94, 184, 255, .82), rgba(94, 184, 255, 0) 70%),
    radial-gradient(700px 560px at 100% 50%, rgba(43, 100, 174, .4), rgba(43, 100, 174, 0) 70%),
    radial-gradient(760px 600px at 5% 85%, rgba(70, 120, 170, .5), rgba(70, 120, 170, 0) 70%),
    radial-gradient(560px 440px at 40% 110%, rgba(220, 238, 251, .75), rgba(220, 238, 251, 0) 70%),
    #E2E0DA;
}
html[data-theme="dark"] .glow {
  background:
    radial-gradient(640px 520px at 70% 10%, rgba(94, 184, 255, .5), rgba(94, 184, 255, 0) 70%),
    radial-gradient(700px 560px at 100% 50%, rgba(43, 100, 174, .5), rgba(43, 100, 174, 0) 70%),
    radial-gradient(760px 600px at 5% 85%, rgba(60, 110, 160, .45), rgba(60, 110, 160, 0) 70%),
    radial-gradient(560px 440px at 40% 110%, rgba(94, 184, 255, .2), rgba(94, 184, 255, 0) 70%),
    #060D17;
}
@media (prefers-reduced-motion: reduce) {
  .fx *, .fx *::before, .fx *::after, #modal-root *, .toast { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ---------- top bar ---------- */
.shell.fx { display: block; min-height: 100vh; }
.ftop { display: flex; align-items: center; gap: 14px; max-width: 1320px; height: 56px; margin: 22px auto 22px; padding: 0 36px; }
/* The F at 37px (its glass panes about 28px tall) and the word at the kit's size beside it: capitals 20px tall
   and centred on the F, 11.5px from it, as in the lockup. */
.flogo { display: inline-flex; align-items: flex-start; margin-left: -5px; }
.flogo img { display: block; }
.flogo .fsym { width: 37px; height: 37px; }
.flogo .fword { width: auto; height: 28.7px; margin: 7px 0 0 2px; }
html[data-theme="dark"] .flogo .lg-light, html[data-theme="light"] .flogo .lg-dark { display: none !important; }
.ftools { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.facct { display: flex; align-items: center; min-width: 0; }
.facct:empty { display: none; }
.rbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; padding: 0;
  border-radius: 50%; border: 1px solid var(--hair); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.rbtn:hover { background: var(--w-bg-2); border-color: var(--hair-2); }
.rbtn:disabled { opacity: .35; cursor: default; background: transparent; }
.rbtn .ic { width: 18px; height: 18px; stroke-width: 1.6; }
.rbtn[aria-current="page"] { background: var(--sel); color: var(--on-sel); border-color: transparent; }
.av {
  width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; background: var(--sel); color: var(--on-sel);
  display: grid; place-items: center; font: inherit; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; cursor: pointer;
}
.fx .menu-btn[aria-expanded="true"] { background: var(--sel); color: var(--on-sel); border-color: transparent; }
.in-setup .ftop .rbtn[data-go], .in-setup .dock { display: none; }

/* Pills: the month, the accounts, small choices. The selected one is filled navy (Ice on dark). */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; flex: none;
  border-radius: 999px; border: 1px solid var(--hair); background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pill:hover { background: var(--w-bg-2); border-color: var(--hair-2); }
.pill.on, .pill[aria-pressed="true"] { background: var(--sel); color: var(--on-sel); border-color: transparent; }
.pill .ic { width: 16px; height: 16px; stroke-width: 1.6; }
.pill small { font-size: 11.5px; font-weight: 500; opacity: .62; }
.pill.sm { height: 32px; padding: 0 13px; font-size: 12.5px; }

/* Accounts: pills, a small arrow for the full list; one pill on phones. */
.acct-pills { display: flex; align-items: center; gap: 6px; }
.acct-pill { max-width: 180px; }
.acct-pill span { overflow: hidden; text-overflow: ellipsis; }
.fx .acct-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 14px; min-width: 0; max-width: 220px;
  border-radius: 999px; border: 1px solid var(--hair); background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.fx .acct-btn:hover, .fx .acct-btn[aria-expanded="true"] { background: var(--w-bg-2); }
.fx .acct-btn > .ic { width: 15px; height: 15px; margin: 0; color: var(--slate); }
.fx .acct-btn .ic:not(:last-child) { width: 15px; height: 15px; color: var(--accent); }
.fx .acct-more { width: 38px; padding: 0; justify-content: center; }
.fx .acct-phone { display: none; }
.acct-pill .ic { color: inherit; }

/* The dock: the pages, along the bottom of the screen. */
.dock {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 25; display: flex; gap: 6px; padding: 8px;
  border-radius: 999px; background: rgba(11, 22, 34, .86); border: 1px solid rgba(220, 238, 251, .12); box-shadow: 0 20px 50px rgba(8, 17, 28, .35);
}
.dock a {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  color: rgba(244, 247, 250, .72); text-decoration: none; transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.dock a .ic { width: 20px; height: 20px; stroke-width: 1.6; }
.dock a:hover { background: rgba(220, 238, 251, .1); color: #F4F7FA; }
.dock a[aria-current="page"] { background: #DCEEFB; color: #0F2E4D; }
.dock a span {
  position: absolute; bottom: 100%; left: 50%; margin-bottom: 10px; transform: translateX(-50%); padding: 4px 9px; border-radius: 8px;
  background: rgba(11, 22, 34, .92); color: #F4F7FA; font-size: 11.5px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.dock a:hover span, .dock a:focus-visible span { opacity: 1; }

.fx .view { max-width: 1320px; margin: 0 auto; padding: 0 36px 128px; }
.fx .demo-bar { max-width: 1248px; margin: -8px auto 18px; padding: 10px 18px; border: 1px solid var(--w-line); border-radius: 999px; background: var(--w-bg); font-size: 13px; }
.fx .demo-bar a { color: var(--accent); }
.fx .ro-bar { border: 1px solid var(--w-line); border-radius: 18px; background: var(--w-bg); }
.fx .ro-bar .ic { color: var(--accent); }

/* The menu (the ≡ button and the initials): drops from the top bar. */
.fx .mmenu:not([hidden]) { display: block; inset: 0; z-index: 45; }
.fx .mm-panel {
  top: 86px; left: max(16px, calc(50% - 624px)); right: auto; width: min(400px, calc(100% - 32px)); max-height: calc(100% - 110px);
  border: 1px solid var(--line); border-radius: 26px; background: var(--solid);
}
.fx .mm-avatar { background: var(--sel); color: var(--on-sel); }
.fx .mm-tile { border-color: var(--line); border-radius: 18px; background: var(--w-bg-2); }
.fx .mm-tile .ic { color: var(--accent); }
.fx .mm-tile[aria-current="page"] { border-color: transparent; background: var(--sel); color: var(--on-sel); }
.fx .mm-tile[aria-current="page"] .ic { color: var(--on-sel); }
.fx .amenu.am-pop { inset: 0; }
.fx .am-pop .am-scrim { background: none; }
.fx .am-panel { border: 1px solid var(--line); border-radius: 22px; background: var(--solid); padding: 10px; }
.fx .am-item, .fx .am-link { border-radius: 14px; min-height: 44px; }
.fx .am-item[aria-checked="true"] .acct-badge { background: var(--sel); color: var(--on-sel); }
.fx .am-item > .ic, .fx .am-link { color: var(--accent); }
.fx .acct-badge { border-radius: 50%; }

/* ---------- the Overview ---------- */
/* Two rows: the greeting beside the month picker, then the content beside the balance column. The gauge and
   the balance card both start at the top of the second row. */
.hbody { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "greet month" "main side"; gap: 18px 32px; align-items: start; }
.hgreet { grid-area: greet; margin-top: 4px; }
.hmonth { grid-area: month; position: relative; }
.hleft { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.hright { grid-area: side; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rh1 { margin: 0; font-size: 46px; font-weight: 300; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.rh1 b { font-weight: 600; }
.rsub { margin: 10px 0 0; color: var(--slate); font-size: 14px; font-weight: 500; }

.rmonth { display: flex; align-items: center; gap: 6px; width: 100%; }
.rmonth .pill { flex: 1; min-width: 0; }
.rmonth .pill span { overflow: hidden; text-overflow: ellipsis; }

/* Amounts: a small currency sign, the whole number, lighter cents. */
.m { display: inline-flex; align-items: baseline; font-weight: 300; letter-spacing: -.02em; white-space: nowrap; color: var(--ink); }
.m > span[aria-hidden] { display: inline-flex; align-items: baseline; }
.m small { font-size: .56em; font-weight: 400; opacity: .7; margin-right: .07em; }
.m small.suf { margin: 0 0 0 .2em; }
.m b { font-weight: 500; }
.m i { font-style: normal; font-weight: 300; font-size: .74em; opacity: .75; }

.hhero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.bignum { display: flex; align-items: flex-end; gap: 18px; min-width: 0; }
.bignum .lab { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; color: var(--slate); }
.m.hero { font-size: 92px; line-height: .9; font-weight: 200; letter-spacing: -.045em; }
.m.hero small { font-size: .42em; font-weight: 300; opacity: .65; margin-right: .06em; align-self: flex-start; margin-top: .22em; }
.m.hero small.suf { align-self: auto; margin: 0 0 0 .15em; }
.m.hero b { font-weight: 300; }
.m.hero i { font-size: .5em; font-weight: 200; opacity: .7; }
.m.hero.neg { color: var(--c-exp); }
.bignum .aside { margin: 0; padding-bottom: 10px; max-width: 200px; font-size: 12.5px; line-height: 1.45; color: var(--slate); font-weight: 500; }
.bignum .aside b { color: var(--ink); font-weight: 600; }
.gauge { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; color: var(--ink); }
/* The drawing has 12px of air above its top tick; pulled up so the tick sits on the row's top edge, level with
   the balance card. */
.gauge svg { width: 250px; height: 136px; overflow: visible; margin-top: -12px; }
.gauge .cap { margin: 0; font-size: 12.5px; color: var(--slate); text-align: right; font-weight: 500; }
.gauge .cap b { color: var(--ink); font-weight: 600; }

.hbars { display: flex; flex-direction: column; gap: 14px; margin: 30px 0; }
.fl { display: grid; grid-template-columns: 118px minmax(0, 1fr) minmax(112px, auto); align-items: center; gap: 16px; }
.fl-l { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fl-l i { width: 9px; height: 9px; border-radius: 50%; background: var(--k); opacity: .75; flex: none; }
.fl .track { position: relative; height: 10px; border-radius: 6px; background: var(--track); }
.fl .track i { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.fl .track .fill { background: var(--k); opacity: .5; }
html[data-theme="dark"] .fl .track .fill { opacity: .55; }
.fl .track .gap { border: 1.5px dashed var(--c-inc); background: var(--c-inc-tint); opacity: .85; }
.fl .track .gap.short { border-color: var(--c-exp); background: var(--c-exp-tint); }
.fl-v { text-align: right; }
.fl-v .m { font-size: 17px; }
.dash-cap { margin: 2px 0 0; font-size: 12px; color: var(--slate); font-weight: 500; }

/* Tiles. */
.w { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 20px 20px 18px; border-radius: var(--r-w); background: var(--w-bg); border: 1px solid var(--w-line); color: var(--ink); text-align: left; }
.w.dark { background: var(--tile-dark); border-color: var(--tile-dark-line); color: var(--on-dark); }
.w.dark .m, .w.dark .wt { color: var(--on-dark); }
.w.dark .wt small, .w.dark .bal-note { color: var(--on-dark-muted); }
.w.dark .circ { border-color: rgba(220, 238, 251, .3); color: var(--on-dark); background: transparent; }
.wtop { display: flex; align-items: flex-start; gap: 12px; }
.circ {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; padding: 0;
  border-radius: 50%; border: 1px solid var(--hair); background: transparent; color: var(--ink);
}
.circ .ic { width: 17px; height: 17px; stroke-width: 1.5; }
button.circ { cursor: pointer; transition: background-color var(--t) var(--ease); }
button.circ:hover { background: var(--w-bg-2); }
.wt { padding-top: 3px; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink); min-width: 0; }
.wt small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--slate); }
.go {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; margin-left: auto;
  border-radius: 50%; background: var(--sel); color: var(--on-sel); text-decoration: none; transition: transform var(--t) var(--ease);
}
.go .ic { width: 16px; height: 16px; stroke-width: 2; }
.go:hover { transform: translate(1px, -1px); }
.w.dark .go { background: #DCEEFB; color: #0F2E4D; }
.wtop .chev { margin-left: auto; width: 36px; height: 36px; }
.chev .ic { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.w[aria-expanded="true"] .chev .ic { transform: rotate(180deg); }
.wbot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; }
.wbot .m { font-size: 34px; letter-spacing: -.03em; line-height: 1; }
.wbot .m.lg { font-size: 40px; }
.mini { color: var(--ink); opacity: .85; flex: none; }
.mini svg { width: 84px; height: 34px; overflow: visible; display: block; }
.mini path, .mini line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini circle { fill: currentColor; }
.w.dark .mini { color: var(--on-dark); }

/* The balance tile's sum: carried over plus the net profit. */
.eqlines { display: flex; flex-direction: column; }
.eqline {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 0; margin: 0;
  border: 0; border-top: 1px solid rgba(220, 238, 251, .14); background: none; color: var(--on-dark-muted); font: inherit; font-size: 12.5px; text-align: left;
}
.eqline .m { font-size: 15px; color: var(--on-dark); }
button.eqline { cursor: pointer; }
button.eqline:hover .m { text-decoration: underline; text-underline-offset: 3px; }
.eqv { display: inline-flex; align-items: center; gap: 8px; }
.eqv .ic { width: 14px; height: 14px; opacity: .7; }
.bal-note { margin: 0; font-size: 13px; line-height: 1.5; }
.ro .eq-edit .ic { display: none; }

/* Lists inside tiles and rows. */
.wlist { display: flex; flex-direction: column; margin: 0 -8px; }
.wrow {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 8px; width: 100%;
  border-radius: 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--t) var(--ease);
}
.wrow:hover { background: rgba(15, 27, 40, .04); }
html[data-theme="dark"] .wrow:hover { background: rgba(220, 238, 251, .06); }
.wrow .circ { width: 36px; height: 36px; color: var(--k, var(--ink)); background: var(--k-soft, transparent); border-color: transparent; }
.wrow .circ .ic { width: 15px; height: 15px; }
.rn { display: flex; flex-direction: column; min-width: 0; }
.rn b { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn > span { font-size: 12px; color: var(--slate); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow .m { font-size: 15px; }
.day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hair); line-height: 1; }
.day b { font-size: 13px; font-weight: 600; color: var(--ink); }
.day small { margin-top: 1px; font-size: 8.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.wrow.today .day { background: var(--sel); border-color: transparent; }
.wrow.today .day b, .wrow.today .day small { color: var(--on-sel); }
.wmore {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 0; border: 0; background: transparent;
  color: var(--slate); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.wmore:hover { color: var(--ink); }
.wmore .ic { width: 14px; height: 14px; }
.w-body { display: flex; flex-direction: column; gap: 6px; }
.w-body[hidden], .acc-body[hidden] { display: none; }
.acc-empty { margin: 0; padding: 6px 0; font-size: 13px; color: var(--slate); line-height: 1.5; }

/* Budgets as thin rings. */
.brings { display: flex; flex-direction: column; gap: 4px; margin: 0 -6px; }
.bring {
  display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 16px; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: background-color var(--t) var(--ease);
}
.bring:hover { background: rgba(15, 27, 40, .04); }
html[data-theme="dark"] .bring:hover { background: rgba(220, 238, 251, .06); }
.bring svg { width: 44px; height: 44px; flex: none; color: var(--accent); }
.bring .bg { fill: none; stroke: var(--hair); stroke-width: 2; }
.bring .fg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.bring.over svg { color: var(--c-exp); }
.bring > span { display: flex; flex-direction: column; min-width: 0; }
.bring b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bring > span > span { font-size: 12px; color: var(--slate); font-weight: 500; }
.bring em { font-style: normal; color: var(--c-exp); font-weight: 600; }

/* Income, expenses and investments: rows that drop open, with a soft wash of their colour. */
.acc { display: flex; flex-direction: column; gap: 10px; }
.w.accrow { padding: 0; gap: 0; overflow: hidden; background: linear-gradient(90deg, var(--k-tint), rgba(0, 0, 0, 0) 55%), var(--w-bg); }
.acc-head {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto minmax(120px, auto) 36px; align-items: center; gap: 16px; width: 100%;
  padding: 14px 18px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.acc-head .circ { width: 44px; height: 44px; color: var(--k); border-color: transparent; background: var(--k-soft); }
.acc-head .circ .ic { width: 18px; height: 18px; }
.at b { display: block; font-size: 15px; font-weight: 600; }
.at span { font-size: 12.5px; color: var(--slate); font-weight: 500; }
.acc-head .mini { color: var(--k); opacity: 1; }
.acc-head > .m { font-size: 24px; justify-content: flex-end; }
.acc-head .chev { width: 36px; height: 36px; }
.acc-body { display: flex; flex-direction: column; padding: 8px 18px 14px; border-top: 1px solid var(--hair); }
.lrow {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(80px, 160px) minmax(100px, auto) 48px; align-items: center; gap: 14px;
  width: calc(100% + 16px); margin: 0 -8px; padding: 9px 8px; border-radius: 16px; border: 0; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; transition: background-color var(--t) var(--ease);
}
.lrow:hover { background: rgba(15, 27, 40, .04); }
html[data-theme="dark"] .lrow:hover { background: rgba(220, 238, 251, .06); }
.lrow .circ { width: 36px; height: 36px; color: var(--k); border-color: transparent; background: var(--k-soft); }
.lrow .circ .ic { width: 15px; height: 15px; }
.lrow .share { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.lrow .share i { display: block; height: 100%; border-radius: 3px; background: var(--k); opacity: .45; }
html[data-theme="dark"] .lrow .share i { opacity: .55; }
.lrow > .m { font-size: 15px; justify-content: flex-end; }
.lrow .pc { font-size: 12px; color: var(--slate); text-align: right; font-weight: 600; }
.addline {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 36px; margin: 4px -8px 0; padding: 0 10px;
  border: 0; border-radius: 12px; background: transparent; color: var(--k, var(--accent)); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background-color var(--t) var(--ease);
}
.addline:hover { background: var(--k-soft, var(--hilite)); }
.addline .ic { width: 16px; height: 16px; stroke-width: 2; }

/* The question about starting money, for accounts made before balances existed. */
.w.ov-ask { margin: 0 0 14px; gap: 14px; }
.ov-ask .wt { font-size: 14px; }
.ov-ask .wt small { font-size: 12.5px; line-height: 1.5; max-width: 70ch; }
.ov-ask-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ov-ask-row .money-in { width: 200px; }

/* The calendar under the month picker. */
.cal {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: 100%; padding: 18px; border-radius: 24px;
  border: 1px solid var(--line); background: var(--solid); box-shadow: var(--shadow-lg); color: var(--ink); animation: cal-in 200ms var(--ease);
}
.cal:focus { outline: none; }
@keyframes cal-in { from { opacity: 0; transform: translateY(-6px); } }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head b { font-size: 15px; font-weight: 600; }
.cal-head .rbtn { width: 34px; height: 34px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-grid .wd { padding: 4px 0 6px; text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cal-d {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 40px;
  border-radius: 12px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 500;
}
button.cal-d { cursor: pointer; transition: background-color var(--t) var(--ease); }
button.cal-d:hover { background: var(--hilite); }
.cal-d.other { color: var(--muted); }
.cal-d.today { box-shadow: inset 0 0 0 1.5px var(--sel); font-weight: 700; }
.cal-d[aria-pressed="true"] { background: var(--sel); color: var(--on-sel); }
.cal-d .dots { display: flex; gap: 3px; height: 4px; }
.cal-d .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--k); }
.cal-d[aria-pressed="true"] .dots i { background: currentColor; }
.cal-day { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.cal-day h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--slate); }
.cal-day .wlist { margin: 0 -8px; }
.cal-day .wrow { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 6px 8px; }
.cal-day .wrow .circ { width: 30px; height: 30px; }
.cal-day .wrow .circ .ic { width: 13px; height: 13px; }
.cal-day .wrow .m { font-size: 14px; }
.cal-day .none { margin: 0; padding: 4px 0; font-size: 13px; color: var(--slate); }
.cal-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }

/* ---------- every other screen: et.css's parts in the same glass ---------- */
.fx h1, .fx h2, .fx h3 { font-family: var(--font); }
.fx .page-head { margin-bottom: 22px; }
.fx .page-head h1 { font-size: 42px; font-weight: 300; letter-spacing: -.03em; line-height: 1.1; }
.fx .page-head .sub { margin-top: 8px; font-size: 14px; }
.fx .page-head .controls { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fx .section-head h2, .fx .panel h2 { font-size: 16px; font-weight: 600; }
.fx .panel, .fx .grid-wrap, .fx .kgrid, .fx .chart-box, .fx .cat-list, .fx .steps, .fx .cur-grid, .fx .m-card, .fx .numbers summary, .fx .sh-list, .fx .empty-panel {
  background: var(--w-bg); border: 1px solid var(--w-line); border-radius: var(--r-box);
}
.fx .panel { padding: 22px 24px; }
.fx .kcell { padding: 18px 20px 16px; box-shadow: none !important; }
.fx .kcell.t-inc .klabel::before, .fx .kcell.t-exp .klabel::before, .fx .kcell.t-inv .klabel::before, .fx .rp-tile.t-inc .klabel::before, .fx .rp-tile.t-exp .klabel::before, .fx .rp-tile.t-inv .klabel::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px;
}
.fx .t-inc .klabel::before { background: var(--c-inc); }
.fx .t-exp .klabel::before { background: var(--c-exp); }
.fx .t-inv .klabel::before { background: var(--c-inv); }
.fx .klabel { font-size: 11.5px; letter-spacing: .06em; }
.fx .kval { font-size: 26px; font-weight: 400; letter-spacing: -.02em; }
.fx .rp-sum { gap: 14px; background: none; border: 0; border-radius: 0; overflow: visible; }
.fx .rp-tile { background: var(--w-bg); border: 1px solid var(--w-line); border-radius: var(--r-box); box-shadow: none !important; padding: 20px 22px; }
.fx .rp-big { font-size: 30px; font-weight: 300; letter-spacing: -.025em; }
.fx .grid thead th { background: transparent; color: var(--slate); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-left: 0; border-bottom: 1px solid var(--line); padding-top: 14px; }
.fx .grid thead tr.sub-head th { background: transparent; }
.fx .grid td + td, .fx .grid th + td, .fx .grid td + th { border-left: 0; }
.fx .grid th, .fx .grid td { padding: 10px 12px; }
.fx .grid tr.band th, .fx .grid tr.band td { background: transparent; color: var(--ink); font-weight: 600; }
.fx .grid tr.alt > td, .fx .grid tr.alt > th { background: rgba(255, 255, 255, .18); }
html[data-theme="dark"] .fx .grid tr.alt > td, html[data-theme="dark"] .fx .grid tr.alt > th { background: rgba(220, 238, 251, .025); }
.fx .grid tr.net th, .fx .grid tr.net td { border-bottom: 0; }
.fx .numbers[open] summary { border-radius: var(--r-box) var(--r-box) 0 0; }

.fx .btn, #modal-root .btn { height: 38px; padding: 0 18px; border-radius: 999px; font-weight: 600; }
.fx .btn-primary, #modal-root .btn-primary { background: var(--sel); color: var(--on-sel); }
.fx .btn-primary:hover, #modal-root .btn-primary:hover { background: var(--sel); opacity: .9; }
.fx .btn-ghost, #modal-root .btn-ghost { background: transparent; border-color: var(--hair); color: var(--ink); }
.fx .btn-ghost:hover, #modal-root .btn-ghost:hover { background: var(--w-bg-2); }
.fx .btn-quiet, #modal-root .btn-quiet { border-radius: 999px; }
.fx .btn-danger, #modal-root .btn-danger { background: var(--c-exp); color: #FFFFFF; }
.fx .icon-btn, #modal-root .icon-btn { border-radius: 50%; border-color: var(--hair); background: transparent; color: var(--ink); }
.fx .link-btn, #modal-root .link-btn { color: var(--accent); }
.fx .add-btn { color: var(--accent); }
.fx .seg, #modal-root .seg { border-radius: 999px; border-color: var(--hair); background: transparent; padding: 3px; gap: 3px; }
.fx .seg button, #modal-root .seg button { border-left: 0; border-radius: 999px; }
.fx .seg button[aria-checked="true"], #modal-root .seg button[aria-checked="true"], html[data-theme="dark"] .fx .seg button[aria-checked="true"], html[data-theme="dark"] #modal-root .seg button[aria-checked="true"] { background: var(--sel); color: var(--on-sel); }
/* The language switch is built like the other switches: a pill track with a little padding, each choice its own
   pill, so the highlight has no flat edges. */
.fx .lang-switch, #modal-root .lang-switch { padding: 3px; gap: 3px; border-radius: 999px; border-color: var(--hair); background: transparent; }
.fx .lang-switch button, #modal-root .lang-switch button { border-left: 0 !important; border-radius: 999px; }
.fx .lang-switch button[aria-pressed="true"], html[data-theme="dark"] .fx .lang-switch button[aria-pressed="true"] { background: var(--sel); color: var(--on-sel); }
.fx .mm-pref .lang-switch button, .fx .mm-theme button { height: 34px; }

/* A switch's highlight slides from the old choice to the new one (see segSlide in et-app.js). While it moves,
   the choices show plain, and the labels change colour as it passes. */
.fx .seg, .fx .lang-switch, #modal-root .seg { position: relative; }
.fx .seg > button, .fx .lang-switch > button, #modal-root .seg > button { position: relative; z-index: 1; transition: color 260ms var(--ease), background-color var(--t) var(--ease); }
.seg-ind { position: absolute; z-index: 0; border-radius: 999px; background: var(--sel); pointer-events: none; transition: transform 260ms var(--ease), width 260ms var(--ease); }
.sliding > button { transition: color 260ms var(--ease) !important; }
.seg-prep > button, .seg-prep > .seg-ind { transition: none !important; }
.sliding > button[aria-checked="true"], .sliding > button[aria-pressed="true"] { background: transparent !important; }
.sliding.seg > button:not(.seg-was):not(.seg-now)[aria-checked="true"] { color: var(--text) !important; }
.sliding.lang-switch > button:not(.seg-was):not(.seg-now)[aria-pressed="true"] { color: var(--slate) !important; }
.sliding > button.seg-was, .sliding > button.seg-now { color: var(--on-sel) !important; }

.fx .field input, .fx .field select, .fx .cat-add input, .fx .ctl select, #modal-root .field input, #modal-root .field select,
.fx .money-in, #modal-root .money-in, #modal-root .imp-col select, #modal-root .imp-row select, #modal-root .imp-row input:not([type="checkbox"]), #modal-root .imp-rep input:not([type="checkbox"]) {
  height: 40px; border-radius: 12px; border-color: var(--hair); background-color: var(--field); color: var(--ink);
}
.fx .field .money-in input, #modal-root .field .money-in input { height: 38px; background: transparent; }
/* A dropdown's list is drawn by the browser from the box's colours; the box is see-through, so in dark mode its
   light text landed on a light list. The list gets the solid window colour and the theme's text colour. */
.fx select, #modal-root select { color-scheme: inherit; }
.fx select option, #modal-root select option, .fx select optgroup, #modal-root select optgroup { background-color: var(--solid); color: var(--ink); }
.fx .ctl select { border-radius: 999px; padding-left: 14px; }
.fx .field, #modal-root .field { color: var(--slate); }
.fx .form-error, #modal-root .form-error { border-radius: 12px; background: var(--c-exp-tint); border-color: var(--c-exp); }

/* Windows. */
#modal-root .modal-scrim { background: var(--scrim); }
#modal-root .modal-card { background: var(--solid); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg); }
#modal-root .modal-head { padding: 20px 22px 6px; background: transparent; }
#modal-root .modal-head h2 { color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
#modal-root .modal-head .icon-btn { width: 36px; height: 36px; border-color: var(--hair); color: var(--ink); }
#modal-root .modal-head .icon-btn:hover { background: var(--hilite); }
#modal-root .modal-body { padding: 14px 22px; }
#modal-root .modal-foot { padding: 14px 22px 20px; background: transparent; border-top: 1px solid var(--line); }
#modal-root .preview, #modal-root .sh-list, #modal-root .imp-chip, #modal-root .sh-made, #modal-root .imp-drop { border-radius: 18px; }
#modal-root .preview { background: var(--hilite); border: 0; }
.toasts .toast { border-radius: 999px; background: var(--sel); color: var(--on-sel); padding: 12px 18px; font-weight: 600; }
.toasts .toast.error { background: var(--c-exp); color: #FFFFFF; }
.toasts .toast.warn { background: #8A6A2E; color: #FFFFFF; }
#tip.tip { border-radius: 14px; background: var(--solid); border-color: var(--line); }
.combo-list { background: var(--solid) !important; border-radius: 14px !important; }

/* ---------- Transactions: each payment washed in its kind's colour, fading out to the right ----------
   Like the Overview's rows. A table row's own background is drawn cell by cell in some browsers, so each of the
   first four cells carries its piece of the fade, the colour at one cell's right edge matching the next one's left. */
.k-inc { --k-rgb: 46, 122, 91; }
.k-exp { --k-rgb: 194, 86, 63; }
.k-inv { --k-rgb: 74, 111, 165; }
html[data-theme="dark"] .k-inc { --k-rgb: 139, 224, 176; }
html[data-theme="dark"] .k-exp { --k-rgb: 240, 151, 138; }
html[data-theme="dark"] .k-inv { --k-rgb: 143, 180, 227; }
.fx .grid.tx tr[class*="k-"] > td:nth-child(1) { background-image: linear-gradient(90deg, rgba(var(--k-rgb), .17), rgba(var(--k-rgb), .12)); }
.fx .grid.tx tr[class*="k-"] > td:nth-child(2) { background-image: linear-gradient(90deg, rgba(var(--k-rgb), .12), rgba(var(--k-rgb), .06)); }
.fx .grid.tx tr[class*="k-"] > td:nth-child(3) { background-image: linear-gradient(90deg, rgba(var(--k-rgb), .06), rgba(var(--k-rgb), .02)); }
.fx .grid.tx tr[class*="k-"] > td:nth-child(4) { background-image: linear-gradient(90deg, rgba(var(--k-rgb), .02), rgba(var(--k-rgb), 0)); }
html[data-theme="dark"] .fx .grid.tx tr[class*="k-"] > td:nth-child(1) { background-image: linear-gradient(90deg, rgba(var(--k-rgb), .14), rgba(var(--k-rgb), .1)); }
html[data-theme="dark"] .fx .grid.tx tr[class*="k-"] > td:nth-child(2) { background-image: linear-gradient(90deg, rgba(var(--k-rgb), .1), rgba(var(--k-rgb), .05)); }
html[data-theme="dark"] .fx .grid.tx tr[class*="k-"] > td:nth-child(3) { background-image: linear-gradient(90deg, rgba(var(--k-rgb), .05), rgba(var(--k-rgb), .015)); }
html[data-theme="dark"] .fx .grid.tx tr[class*="k-"] > td:nth-child(4) { background-image: linear-gradient(90deg, rgba(var(--k-rgb), .015), rgba(var(--k-rgb), 0)); }
/* On phones each payment is a card row; the same fade runs across it. */
.fx .m-row[class*="k-"] { background: linear-gradient(90deg, rgba(var(--k-rgb), .17), rgba(var(--k-rgb), 0) 65%); }
html[data-theme="dark"] .fx .m-row[class*="k-"] { background: linear-gradient(90deg, rgba(var(--k-rgb), .14), rgba(var(--k-rgb), 0) 65%); }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  /* Tablets: the greeting with the month picker beside it; the net profit with the gauge beside it; the bars
     under both; then one column: the question about starting money, balance, rows, upcoming, budgets. */
  .hbody { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; gap: 14px 24px; }
  .hleft, .hright { display: contents; }
  .hgreet { order: 1; grid-area: auto; grid-column: 1; }
  .hmonth { order: 2; grid-area: auto; grid-column: 2; width: 350px; }
  .hmonth .cal { width: 350px; }
  .hhero { order: 3; grid-column: 1 / -1; margin-top: 6px; }
  .hbars { order: 4; grid-column: 1 / -1; margin: 10px 0; }
  .w.ov-ask { order: 5; grid-column: 1 / -1; margin: 0; }
  .h-bal { order: 6; grid-column: 1 / -1; }
  .hleft .acc { order: 7; grid-column: 1 / -1; }
  .h-up { order: 8; grid-column: 1 / -1; }
  .h-bud { order: 9; grid-column: 1 / -1; }
  .m.hero { font-size: 76px; }
  .bignum { flex-wrap: wrap; row-gap: 8px; }
  .bignum .aside { max-width: 180px; }
  .gauge svg { width: 220px; height: 120px; margin-top: 0; }
  .gauge .cap { max-width: 240px; }
  .rh1 { font-size: 40px; }
}
/* Smaller tablets: the note beside the number no longer fits, and the gauge's caption says the same. */
@media (max-width: 800px) {
  .bignum .aside { display: none; }
}@media (max-width: 760px) {
  .ftop { height: 48px; margin: 12px auto 14px; padding: 0 16px; gap: 10px; }
  .flogo .fword { display: none !important; }
  .flogo .fsym { width: 36px; height: 36px; }
  .ftools .ftool { display: none; }
  .acct-pills { display: none; }
  .fx .acct-phone { display: inline-flex; }
  .fx .view { padding: 0 16px 112px; }
  .fx .demo-bar { margin: 0 16px 14px; border-radius: 18px; }
  .fx .mm-panel { top: 70px; left: 16px; }
  .dock { bottom: 14px; gap: 2px; padding: 6px; }
  .dock a { width: 44px; height: 44px; }
  .dock a span { display: none; }
  /* Phones: one column, the month picker under the greeting, and no gauge. */
  .hbody { grid-template-columns: minmax(0, 1fr); }
  .hgreet, .hmonth { grid-column: 1; }
  .hmonth { width: auto; }
  .hmonth .rmonth { max-width: 420px; }
  .hmonth .cal { width: min(360px, 100%); left: 0; right: auto; }
  .hhero { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
  .hhero .gauge { display: none; }
  .rh1 { font-size: 34px; }
  .m.hero { font-size: 64px; }
  .bignum .aside { display: none; }
  .fl { grid-template-columns: 90px minmax(0, 1fr) minmax(86px, auto); gap: 10px; }
  .w { padding: 16px; }
  .wbot .m.lg { font-size: 34px; }
  .acc-head { grid-template-columns: 40px minmax(0, 1fr) auto 32px; gap: 10px; padding: 12px 14px; }
  .acc-head .mini { display: none; }
  .acc-head > .m { font-size: 19px; }
  .acc-head .circ { width: 40px; height: 40px; }
  .acc-body { padding: 6px 14px 12px; }
  .lrow { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .lrow .share, .lrow .pc { display: none; }
  .fx .page-head h1 { font-size: 34px; }
  .fx .panel { padding: 18px 16px; }
}