/* Design system carried over verbatim from the prototype. New at the bottom: auth gate, setup screen, live indicator. */ :root{ --cream:#eae4d9; --navy:#1f2d4e; --sky:#b7cbdc; --rust:#c1432b; --gold:#d9a441; --ground:#f2eee6; --surface:#ffffff; --surface-2:#e7e1d5; --line:#d5cdbe; --line-soft:#e2dbcd; --ink:#1f2d4e; --ink-2:#5a6480; --ink-3:#8b91a3; --accent:#c1432b; --warn:#b07d1c; --ok:#3f6f52; --bad:#c0271f; --track:#ddd6c7; --shadow:0 1px 2px rgba(31,45,78,.06), 0 8px 24px -18px rgba(31,45,78,.35); } @media (prefers-color-scheme: dark){ :root{ --ground:#141b2e; --surface:#1b2338; --surface-2:#222b43; --line:#2f3950; --line-soft:#28324a; --ink:#e8e3d8; --ink-2:#a3adc4; --ink-3:#727d96; --accent:#e0674c; --warn:#e0ac4a; --ok:#6fa585; --bad:#f2685c; --track:#2b3450; --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -20px rgba(0,0,0,.8); } } :root[data-theme="light"]{ --ground:#f2eee6; --surface:#ffffff; --surface-2:#e7e1d5; --line:#d5cdbe; --line-soft:#e2dbcd; --ink:#1f2d4e; --ink-2:#5a6480; --ink-3:#8b91a3; --accent:#c1432b; --warn:#b07d1c; --ok:#3f6f52; --bad:#c0271f; --track:#ddd6c7; --shadow:0 1px 2px rgba(31,45,78,.06), 0 8px 24px -18px rgba(31,45,78,.35); } :root[data-theme="dark"]{ --ground:#141b2e; --surface:#1b2338; --surface-2:#222b43; --line:#2f3950; --line-soft:#28324a; --ink:#e8e3d8; --ink-2:#a3adc4; --ink-3:#727d96; --accent:#e0674c; --warn:#e0ac4a; --ok:#6fa585; --bad:#f2685c; --track:#2b3450; --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -20px rgba(0,0,0,.8); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--ground); font-family:"Assistant","Heebo",system-ui,-apple-system,"Segoe UI","Arial Hebrew",sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; min-height:100dvh; } [hidden]{display:none !important} /* ---------------- photo background ---------------- One random family photo per app open, set on by app.js as --bg-photo. Two fixed layers sit behind everything: the photo, then a scrim that holds it back far enough for figures to stay readable. Tune --scrim to taste — higher means the photo shows through less. */ :root{ --scrim:.35; --panel-alpha:94%; } @media (prefers-color-scheme: dark){ :root{ --scrim:.45 } } :root[data-theme="dark"]{ --scrim:.45 } :root[data-theme="light"]{ --scrim:.35 } /* The scrim varies by screen. Sign-in and setup are mostly empty space with one card, so the photo can be near full strength there. The board is dense with figures, so it stays held back. app.js sets data-screen. */ :root[data-screen="auth"] { --scrim:.10 } :root[data-screen="setup"] { --scrim:.30 } @media (prefers-color-scheme: dark){ :root[data-screen="auth"] { --scrim:.24 } :root[data-screen="setup"] { --scrim:.42 } } :root[data-theme="dark"][data-screen="auth"] { --scrim:.24 } :root[data-theme="dark"][data-screen="setup"] { --scrim:.42 } /* At that scrim the card needs to hold its own against a busy photo. */ :root[data-screen="auth"] .gate-card{ box-shadow:0 8px 40px -12px rgba(0,0,0,.45) } body::before, body::after{ content:""; position:fixed; inset:0; pointer-events:none; } body::before{ z-index:-2; background-image:var(--bg-photo,none); background-size:cover; background-position:center; background-repeat:no-repeat; /* Fade in once the image has decoded, so the first paint is never a flash of half-loaded photo behind the numbers. */ opacity:0; transition:opacity .5s ease; } :root.bg-ready body::before{ opacity:1 } body::after{ z-index:-1; background:var(--ground); opacity:var(--scrim); } /* No photo (or the user prefers less motion/data): plain ground, as before. */ :root:not(.bg-ready) body::after{ opacity:1 } .app{ direction:rtl; text-align:right; /* Holds the home veil's deliberate off-screen bleed. `clip` rather than `hidden` so this never becomes a scroll container. */ overflow-x:clip; max-width:1080px; margin:0 auto; /* Bottom padding clears the fixed tab bar plus the home indicator. */ padding:clamp(14px,3vw,32px) clamp(12px,3vw,28px) calc(96px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:clamp(14px,2.4vw,22px); font-size:16px; line-height:1.55; } .app :where(h1,h2,h3,p,ul,ol,figure,table){margin:0} .app ul,.app ol{list-style:none;padding:0} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .num,.app :where(input,td.num,.tabular){font-variant-numeric:tabular-nums} /* masthead */ .masthead{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--line); } .mast-id{display:flex;align-items:center;gap:12px;min-width:0} .mast-name{font-size:1.02rem;font-weight:600;letter-spacing:.01em} .mast-tools{display:flex;align-items:center;gap:10px} .who-label{font-size:.74rem;color:var(--ink-3);letter-spacing:.08em} .whoswitch{display:flex;background:var(--surface-2);border-radius:999px;padding:3px;gap:2px} .who{ font:inherit;font-size:.85rem;font-weight:600;border:0;background:transparent;color:var(--ink-2); padding:.34em 1em;border-radius:999px;cursor:pointer;transition:background .16s; } /* Each person has a colour: ניב rust, מיקי dark green. */ :root{ --user-a:#c1432b; --user-b:#1f6f4f; --brand:var(--user-a); } @media (prefers-color-scheme: dark){ :root{ --user-a:#e0674c; --user-b:#5cc39a } } :root[data-theme="dark"]{ --user-a:#e0674c; --user-b:#5cc39a } :root[data-theme="light"]{ --user-a:#c1432b; --user-b:#1f6f4f } /* The whole accent follows the selected profile, figures included: the combined balance, over-cap amounts, meter fills, projection rows. These rules sit after the theme blocks on purpose — same specificity, so source order decides, and the profile must win. Over-budget is the exception and uses --bad, a red that never moves. Green "over budget" was the honest consequence of tying every figure to the profile, and the owners called it critical once they saw it. */ :root[data-active-user="a"]{ --brand:var(--user-a); --accent:var(--user-a) } :root[data-active-user="b"]{ --brand:var(--user-b); --accent:var(--user-b) } .who.is-on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)} .who.is-on[data-user="a"]{color:var(--user-a)} .who.is-on[data-user="b"]{color:var(--user-b)} .led-who[data-user="a"]{color:var(--user-a);font-weight:600} .led-who[data-user="b"]{color:var(--user-b);font-weight:600} .who:focus-visible,.btn:focus-visible,.btn-add:focus-visible,input:focus-visible,select:focus-visible,.tk:focus-visible,.del:focus-visible,.btn-out:focus-visible{ outline:2px solid var(--brand);outline-offset:2px } .btn-out{ font:inherit;font-size:.8rem;font-weight:600;color:var(--ink-3);background:transparent; border:0;cursor:pointer;padding:.34em .6em;border-radius:8px } .btn-out:hover{color:var(--brand)} /* panels */ .panel{ background:var(--surface); border:1px solid var(--line-soft); border-radius:14px; padding:clamp(15px,2.4vw,24px); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; /* The ledger table is wider than a phone and scrolls inside .table-scroll, but in RTL its overflow still inflates this panel's scrollable area and escapes to the page, dragging the whole layout sideways. Clip it here. hidden first as a fallback; clip avoids creating a scroll container. */ overflow-x:hidden; overflow-x:clip; } /* Over a photo the panels go faintly translucent with a blur behind them, so the picture reads as one continuous image rather than being chopped into rectangles — while the blur keeps the figures crisp. Solid fallback above means anything without color-mix or backdrop-filter still looks right. */ @supports (backdrop-filter: blur(1px)) and (background: color-mix(in srgb, red 50%, transparent)){ :root.bg-ready .panel, :root.bg-ready .gate-card, :root.bg-ready .nudge{ background:color-mix(in srgb, var(--surface) var(--panel-alpha), transparent); backdrop-filter:blur(14px) saturate(1.05); -webkit-backdrop-filter:blur(14px) saturate(1.05); } /* The masthead and footer sit directly on the photo rather than on a panel. At this scrim they need their own backing, or the text lands on whatever happens to be in that corner of the picture. */ :root.bg-ready .masthead{ background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(14px) saturate(1.05); -webkit-backdrop-filter:blur(14px) saturate(1.05); border:1px solid var(--line-soft); border-radius:14px; padding:10px clamp(12px,2vw,18px); box-shadow:var(--shadow); } :root.bg-ready .foot{ background:color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:99px; padding:6px 14px; align-self:center; } } .eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.14em; color:var(--ink-3); text-transform:none; } .panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} /* shared inputs */ .app input,.app select,.gate input,.gate select{ width:100%;font:inherit;font-size:.98rem;color:var(--ink); background:var(--ground);border:1px solid var(--line);border-radius:9px; padding:.6em .8em; -moz-appearance:textfield; } .fld{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0} .fld>span{font-size:.76rem;font-weight:600;color:var(--ink-2)} .fld>span i{font-style:normal;font-weight:400;color:var(--ink-3)} .fld-amt{flex:0 0 40%} .add-row{display:flex;gap:9px} /* position — carried over from the prototype */ .pos-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:clamp(18px,3vw,34px);align-items:start} .pos-figure{ font-size:clamp(2.5rem,7.5vw,3.9rem); font-weight:700; line-height:.98; letter-spacing:-.025em; color:var(--accent); font-variant-numeric:tabular-nums; } .pos-figure.is-clear{color:var(--ok)} .pos-caption{font-size:.92rem;color:var(--ink-2);margin-top:4px} .climb{margin-top:18px;display:flex;flex-direction:column;gap:7px} .climb-track{height:9px;background:var(--track);border-radius:99px;overflow:hidden} .climb-fill{height:100%;background:var(--accent);border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1)} .climb-fill.is-clear{background:var(--ok)} .climb-ends{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink-3);letter-spacing:.01em} .pos-progress{font-size:.88rem;font-weight:600;color:var(--ink-2)} .pos-side{display:flex;flex-direction:column;gap:10px} .bal{display:flex;flex-direction:column;gap:5px} .bal-name{font-size:.82rem;font-weight:600;color:var(--ink-2)} .bal-name em{font-style:normal;color:var(--ink-3);font-weight:400;font-size:.76rem;margin-inline-start:5px} .bal-in{position:relative;display:block} .bal-in i{ position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%); font-style:normal;color:var(--ink-3);font-size:.9rem;pointer-events:none } .bal-in input{padding-inline-start:2em} .bal-stamp{font-size:.7rem;color:var(--ink-3)} .bal-hint{font-size:.76rem;color:var(--ink-3);line-height:1.45} /* One grid shared by every row here, so the labels line up down the right and the values line up down the left whether they are text or an input. */ .target{ margin-top:2px; display:grid; grid-template-columns:1fr 9.5em; align-items:center; gap:10px; background:var(--surface-2);border-radius:9px;padding:.55em .9em; min-height:3em; } .target-k{font-size:.78rem;color:var(--ink-2)} .target-v{ font-size:1.02rem;font-weight:700;color:var(--ink); font-variant-numeric:tabular-nums; /* Matches the inputs' own padding so text and fields sit on one line. */ padding:.2em .45em; } .target-in{position:relative} .target-in i{ position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%); font-style:normal;color:var(--ink-3);font-size:.85rem;pointer-events:none } .app .target-in input,.app .target-txt{ width:100%; background:transparent;border:1px solid transparent;border-radius:7px; text-align:start;font-weight:700;font-size:1.02rem;padding:.2em .45em; font-variant-numeric:tabular-nums; } .app .target-in input{padding-inline-start:1.7em} .app .target-in input:hover,.app .target-txt:hover{border-color:var(--line)} .app .target-in input:focus,.app .target-txt:focus{background:var(--surface);border-color:var(--line)} .target.cap-over{background:#f7e2dd} .target.cap-over .target-v,.target.cap-over .target-k{color:#8f2f1c} @media (prefers-color-scheme: dark){.target.cap-over{background:#3d2420}.target.cap-over .target-v,.target.cap-over .target-k{color:#f0937c}} :root[data-theme="dark"] .target.cap-over{background:#3d2420} :root[data-theme="dark"] .target.cap-over .target-v,:root[data-theme="dark"] .target.cap-over .target-k{color:#f0937c} /* week */ .week-range{font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums} .week-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,34px);align-items:start} .week-spent{font-size:clamp(2rem,5.6vw,2.9rem);font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .week-spent.ov{color:var(--bad)} .week-spent.near{color:var(--warn)} .week-of{font-size:.86rem;color:var(--ink-2);margin-top:5px} .meter{position:relative;height:11px;background:var(--track);border-radius:99px;margin-top:16px;overflow:hidden} .meter-fill{height:100%;background:var(--ok);border-radius:99px;transition:width .4s ease} .meter-fill.near{background:var(--warn)} .meter-fill.ov{background:var(--bad)} /* The 75% mark, where the meter turns amber. Lives here rather than as an inline style attribute so the CSP can forbid inline styles outright. */ .meter-tick{position:absolute;top:-3px;inset-inline-start:75%;width:1px;height:17px;background:var(--ink-3);opacity:.5} .week-left{margin-top:9px;font-size:.9rem;font-weight:600;color:var(--ink-2)} .week-all{margin-top:5px;font-size:.82rem;color:var(--ink-3);font-variant-numeric:tabular-nums} .week-all.ov{color:var(--bad);font-weight:700} .add{display:flex;flex-direction:column;gap:9px} .btn-add{ font:inherit;font-size:.95rem;font-weight:700;color:#fff;background:var(--brand); border:0;border-radius:9px;padding:.72em 1em;cursor:pointer;margin-top:3px; transition:filter .16s,transform .06s } .btn-add:hover{filter:brightness(1.07)} .btn-add:active{transform:translateY(1px)} .btn-add[disabled]{opacity:.55;cursor:default;transform:none;filter:none} .week-note{font-size:.79rem;color:var(--ink-3);border-top:1px solid var(--line-soft);padding-top:11px} /* month categories */ .month-name{font-size:.85rem;font-weight:600;color:var(--ink-2)} .cats{display:flex;flex-direction:column;gap:11px} .cat{display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:baseline} .cat-n{font-size:.9rem;font-weight:600} .cat-v{font-size:.86rem;color:var(--ink-2);font-variant-numeric:tabular-nums} .cat-v b{color:var(--ink);font-weight:700} .cat-v.ov b{color:var(--bad)} .cat-bar{grid-column:1/-1;height:6px;background:var(--track);border-radius:99px;overflow:hidden} .cat-bar span{display:block;height:100%;background:var(--sky);border-radius:99px;transition:width .4s ease} .cat-bar span.near{background:var(--warn)} .cat-bar span.ov{background:var(--bad)} .cat.locked .cat-n:after{content:" 🔒";font-size:.8em} /* Tapping a month category opens what was actually spent in it. The row is a real