/* Welsy. Always white. Monochrome; every word a small spaced capital, every amount a bold tabular number. */
:root{--xo-bg:#fff;--xo-ink:#111;--xo-mute:#8b8b90;--xo-hair:#e9e9eb;--xo-div:#dcdce0;--out:#D2382B;--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
body{background:var(--xo-bg);color:var(--xo-ink);font-family:var(--font);font-size:16px;line-height:1.4;padding:calc(env(safe-area-inset-top,0px) + 20px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 40px) max(16px,env(safe-area-inset-left,0px));-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.app{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding-bottom:84px}
.err{margin:0;text-align:center;font-size:14px;color:var(--out)}

/* the main page and the screens it opens (xo-) */
.xo,.xo-scr{color:var(--xo-ink);font-variant-numeric:tabular-nums}
:where(.xo,.xo-scr) button{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
.xo-k,.xo-t,.xo-crumb,.xo-nm,.xo-note,.xo-gh,.xo-done,.xo-top,.xo-tab,.xo-btn,.xo-cancel,.xo-duo button{font-weight:600;text-transform:uppercase;letter-spacing:1.4px;line-height:1.3}
.xo-ar{letter-spacing:0!important;text-transform:none!important}
.xo-top{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 10px;width:100%;min-height:40px;margin-top:-10px;font-size:11px;letter-spacing:1.5px;color:var(--xo-ink)}
.xo-top:empty{visibility:hidden}
.xo-top .xo-dim{color:var(--xo-mute)}.xo-top .xo-dot{color:var(--xo-mute)}
/* the top line opens the prices */
.xo-topb{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 10px;max-width:100%;min-height:40px;margin:0;padding:0 6px;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;line-height:inherit;color:inherit;cursor:pointer}
.xo{display:flex;flex-direction:column;padding:0 12px}
.xo-blk{margin-top:14px}.xo-blk+.xo-blk{margin-top:46px}
.xo-t{margin:0;font-size:11px;letter-spacing:1.6px;text-align:center;color:var(--xo-ink)}
.xo-two{display:flex;margin-top:13px}
.xo-half{flex:1 1 0;min-width:0;container-type:inline-size;display:block;text-align:center;padding:2px 0 4px}
.xo-half+.xo-half{border-left:1px solid var(--xo-div)}
.xo-k{display:block;font-size:10px;letter-spacing:1.2px;color:var(--xo-mute)}
/* big numbers shrink to fit their half: --c is the length of the longest number they are sized for */
.xo-big{display:block;margin-top:5px;font-size:min(32px,calc((100cqi - 12px) / (var(--c,6) * .55)));font-weight:700;letter-spacing:-.037em;line-height:1.15;white-space:nowrap}
.xo-tog{margin:11px 0 0;text-align:center;font-size:16px}.xo-tog b{font-weight:700}
.xo-scr{position:fixed;inset:0;z-index:25;background:var(--xo-bg);display:flex;flex-direction:column}
.xo-sc{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(env(safe-area-inset-top,0px) + 20px) max(28px,env(safe-area-inset-right,0px)) 16px max(28px,env(safe-area-inset-left,0px))}
.xo-in{max-width:520px;margin:0 auto}
.xo-crumb{margin:0;font-size:10px;text-align:center;color:var(--xo-mute)}
.xo-crumb+.xo-t{margin-top:10px}
.xo-hero{display:block;width:100%;margin-top:6px;container-type:inline-size;text-align:center}
.xo-hero b{display:block;font-size:min(44px,calc(100cqi / (var(--c,6) * .55)));font-weight:700;letter-spacing:-.045em;line-height:1.15;white-space:nowrap}
.xo-hero i,.xo-row i{font-style:normal;font-weight:600;letter-spacing:0;color:var(--xo-mute)}.xo-hero i{font-size:22px;margin-left:6px}
.xo-sc .xo-two{margin-top:14px}
.xo-grp{display:block;width:100%}
.xo-gh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:26px;padding-bottom:9px;border-bottom:1.5px solid var(--xo-ink);font-size:10px;color:var(--xo-mute)}
.xo-gh b{font-weight:700;color:var(--xo-ink);white-space:nowrap}
.xo-row{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:44px;padding:9px 0;border-bottom:1px solid var(--xo-hair);text-align:left}
.xo-l{display:flex;align-items:baseline;min-width:0;overflow:hidden}
.xo-nm{font-size:12px;letter-spacing:1.5px;color:var(--xo-ink);overflow-wrap:anywhere}
.xo-note{flex:none;margin-left:10px;font-size:11px;letter-spacing:1px;color:var(--xo-mute)}
.xo-row b{flex:none;font-size:17px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}.xo-row i{font-size:13px;margin-left:4px}
.xo-fine{margin:12px 0 0;font-size:13px;text-align:center;color:var(--xo-mute)}
.xo-done{flex:none;width:100%;height:calc(66px + env(safe-area-inset-bottom,0px));padding:0 0 env(safe-area-inset-bottom,0px);text-align:center;font-size:12.5px;font-weight:700;letter-spacing:1.8px}

/* + and −: the two black buttons at the bottom of the main page. Equal boxes in a row, so a third one can go between them. */
.xo-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:10px;max-width:560px;margin:0 auto;padding:12px max(28px,env(safe-area-inset-right,0px)) max(34px,calc(env(safe-area-inset-bottom,0px) + 12px)) max(28px,env(safe-area-inset-left,0px));background:var(--xo-bg)}
.xo-bar button{flex:1 1 0;min-width:0;height:54px;border:0;border-radius:16px;background:var(--xo-ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
/* the signs, drawn as thin lines: − is one bar, + adds the upright one */
.xo-sg{position:relative;display:inline-block;flex:none;width:16px;height:16px;--w:1.5px}
.xo-sg::before,.xo-plus::after{content:"";position:absolute;background:currentColor;border-radius:1px}
.xo-sg::before{left:0;right:0;top:50%;height:var(--w);margin-top:calc(var(--w) / -2)}
.xo-plus::after{top:0;bottom:0;left:50%;width:var(--w);margin-left:calc(var(--w) / -2)}
.xo-sign{display:flex;justify-content:center;align-items:center;height:54px;margin-top:6px}
.xo-sign .xo-sg{width:28px;height:28px;--w:2px}
/* the tabs: one row of small capitals, the chosen one black and underlined; they shrink to fit a narrow phone */
.xo-tabs{display:flex;justify-content:space-between;gap:6px;margin-top:22px;border-bottom:1px solid var(--xo-hair);container-type:inline-size}
.xo-sc .xo-tab{padding:0 0 11px;font-size:min(10.5px,3.2cqi);letter-spacing:.11em;color:var(--xo-mute);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.xo-sc .xo-tab[aria-selected=true]{color:var(--xo-ink);border-bottom-color:var(--xo-ink)}
.xo-tabs:has(.xo-tab:nth-child(5)) .xo-tab{font-size:min(10px,2.95cqi);letter-spacing:.1em}
.xo-gap{margin-top:28px}
.xo-u{text-transform:none}
/* the big amount, typed in place: it keeps its size to the width, like the other big numbers */
.xo-amt{display:block;margin-top:30px;container-type:inline-size;text-align:center;cursor:text}
.xo-amtin{display:inline-flex;align-items:baseline;justify-content:center;max-width:100%;font-size:min(60px,calc(100cqi / (var(--c,4) * .58)));font-weight:700;letter-spacing:-.045em;line-height:1.15;white-space:nowrap}
.xo-sub{margin-top:8px}.xo-sub .xo-amtin{font-size:min(46px,calc(100cqi / (var(--c,4) * .58)))}
.xo-fit{display:inline-grid;min-width:.6em}
.xo-fit>*{grid-area:1/1;font:inherit;letter-spacing:inherit;font-variant-numeric:tabular-nums}
.xo-mir{visibility:hidden;white-space:pre;padding:0 .02em}
.xo-fit input,.xo-fit output{width:0;min-width:100%;margin:0;padding:0;border:0;outline:0;background:none;color:var(--xo-ink);text-align:center;border-radius:0;-webkit-appearance:none;appearance:none}
.xo-fit input::placeholder,.xo-fit output.xo-ph{color:#c2c2c6;opacity:1}
.xo-amtin i{font-style:normal;font-size:.4em;font-weight:600;letter-spacing:0;color:var(--xo-mute);margin-left:.15em}.xo-amtin i:empty{display:none}
.xo-pre:empty{display:none}
.xo-part{margin:4px 0 0;min-height:20px;text-align:center;font-size:14px;color:var(--xo-mute)}
.xo-part b{color:var(--xo-ink);font-weight:600}.xo-part em{font-style:normal;color:var(--out)}
/* the lines of a form: a word on the left, what was typed or picked on the right */
.xo-fs{margin-top:26px;border-top:1.5px solid var(--xo-ink)}
.xo-f{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:44px;padding:4px 0;border-bottom:1px solid var(--xo-hair)}
.xo-f .xo-nm{flex:none}
.xo-v{flex:1 1 auto;min-width:0;margin:0;padding:6px 0;border:0;outline:0;background:none;text-align:right;font:inherit;font-size:16px;font-weight:600;color:var(--xo-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:0;-webkit-appearance:none;appearance:none}
.xo-v::placeholder{color:#c2c2c6;font-weight:500;opacity:1}
span.xo-v .xo-nm{font-size:16px;letter-spacing:0;text-transform:none;font-weight:600}
.xo-f select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer}
.xo-duo{display:flex;gap:10px;margin-top:22px}
.xo-sc .xo-duo button{flex:1 1 0;min-width:0;height:44px;border:1.5px solid var(--xo-ink);border-radius:14px;text-align:center;font-size:12px;letter-spacing:1.6px;color:var(--xo-ink)}
.xo-sc .xo-duo button[aria-pressed=true]{background:var(--xo-ink);color:#fff}
.xo-row[aria-pressed] b{font-size:19px;font-weight:600}
.xo-sum{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin:22px 0 0;padding-top:12px;border-top:1.5px solid var(--xo-ink)}
.xo-sum b{margin-left:auto;font-size:20px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.xo-new{margin-top:18px;border-top:1px solid var(--xo-hair)}
.xo-new .xo-sg{width:13px;height:13px;color:var(--xo-mute)}
/* saved */
.xo-ok{margin-top:64px;text-align:center}
.xo-check{display:block;font-size:46px;line-height:1;font-weight:300}
.xo-ok .xo-t{margin-top:12px}
.xo-said{max-width:320px;margin:14px auto 0;font-size:16px;line-height:1.45;overflow-wrap:anywhere}
/* the bottom of a form: one black button (and Cancel under it), or the plain Cancel / Done */
.xo-foot{flex:none;padding:8px max(28px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(28px,env(safe-area-inset-left,0px))}
.xo-sc+.xo-foot .xo-btn:last-child{margin-bottom:34px}
.xo-btn{display:block;width:100%;max-width:520px;height:54px;margin:0 auto;border:0;border-radius:16px;background:var(--xo-ink);color:#fff;text-align:center;font-size:12.5px;font-weight:700;letter-spacing:1.8px;cursor:pointer}
.xo-btn:disabled{opacity:.5}
.xo-cancel{display:block;width:100%;height:46px;text-align:center;font-size:12px;font-weight:700;letter-spacing:1.8px;color:var(--xo-ink)}
.xo-ferr{margin:0 0 10px;text-align:center;font-size:14px;color:var(--out)}
/* tap a number to change it: the grey "Add a bank" line at the end of a group, Remove (plain, grey) and its question */
.xo-addr .xo-nm{color:var(--xo-mute)}
.xo-addr .xo-sg{width:13px;height:13px;color:var(--xo-mute)}
button.xo-hero{cursor:pointer}
.xo-foot .xo-rm{color:var(--xo-mute)}
.xo-ask{max-width:520px;margin:4px auto 14px;text-align:center;font-size:16px;line-height:1.45;overflow-wrap:anywhere}
/* FROM / INTO: each place with its part typed in place (the name opens the choice of place); Save stays grey while something is left */
.xo-prow .xo-l{flex:1 1 auto;min-width:0;text-align:left;cursor:pointer}
.xo-prow b{flex:0 1 auto;min-width:0}
.xo-pa{width:6.6em;max-width:100%;margin:0;padding:4px 0;border:0;outline:0;background:none;border-radius:0;-webkit-appearance:none;appearance:none;text-align:right;font:inherit;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--xo-ink);font-variant-numeric:tabular-nums}
.xo-pa::placeholder{color:#c2c2c6;opacity:1}
.xo-addr b{color:var(--xo-mute);font-weight:400}
.xo-btn.xo-off{background:#e4e4e7;color:#fff;cursor:default}
.xo-btn2{margin-top:10px}
/* done before: the sentence, the day under it in grey */
.xo-ent .xo-l{flex-direction:column;align-items:flex-start}
.xo-es{font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.xo-day{margin-top:4px;font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--xo-mute)}
.xo-ent b{color:var(--xo-mute);font-weight:400}
.xo-esaid{margin-top:18px;text-align:center}
/* the login screen: white, centred; the mark, WELSY, one big PIN field, ENTER, one red line */
.lg{position:fixed;inset:0;z-index:30;background:var(--xo-bg);display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 24px) max(28px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 24px) max(28px,env(safe-area-inset-left,0px))}
.lg-in{display:flex;flex-direction:column;align-items:center;width:100%;max-width:320px;margin:0}
.lg-mark{display:block;width:56px;height:56px}
.lg-name{margin:18px 0 0;font-size:12px;font-weight:600;letter-spacing:4px;text-indent:4px;text-transform:uppercase;line-height:1.3;color:var(--xo-ink)}
.lg-pin{display:block;width:100%;margin:44px 0 0;padding:4px 0 8px;border:0;border-bottom:1px solid var(--xo-div);border-radius:0;outline:0;background:none;-webkit-appearance:none;appearance:none;text-align:center;font:inherit;font-size:44px;font-weight:700;letter-spacing:.2em;text-indent:.2em;line-height:1.15;color:var(--xo-ink)}
.lg-pin:focus{border-bottom-color:var(--xo-ink)}
.lg .lg-go{margin-top:30px}
.lg-err{min-height:20px;margin:14px 0 0;text-align:center;font-size:14px;color:var(--out)}
.xo-foot .xo-out,.xo-hout{color:var(--xo-mute)}
/* Marwa's screen: HOME · NOVEMBER, GOT | LEFT, what was spent, her expenses day by day; one black button at the bottom */
.xo-hm{font-size:11px;letter-spacing:1.6px;margin-top:14px}
.xo-spent{margin:12px 0 0;text-align:center;font-size:16px;font-weight:600;color:var(--xo-mute)}
.xo-mbar button{font-size:12.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase}
.xo-hout{margin-top:22px}
/* her expense: the invoice row opens the camera or the photos; the picture shown large under the form */
.xo-pick{cursor:pointer}.xo-pick .xo-pv{color:var(--xo-mute);font-size:14px;letter-spacing:.4px}
.xo-file{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:16px}
.xo-inv{margin-top:18px}
.xo-inv img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:12px;background:#f4f4f5}