/* tapkeeper design system — direction B2. DM Sans + Space Mono (self-hosted). Warm light default; dark mode via data-theme="dark" on . Brand orange #FF5C18 used sparingly (mark, primary action, focus). Reference page: /ds. Keep this and /ds in sync (rule 12). Fonts subset to latin. */ /* ---- Fonts (self-hosted; no CDN) ---- */ @font-face { font-family:'DM Sans'; font-weight:400; font-style:normal; font-display:swap; src:url('/fonts/dmsans-400.woff2') format('woff2'); } @font-face { font-family:'DM Sans'; font-weight:500; font-style:normal; font-display:swap; src:url('/fonts/dmsans-500.woff2') format('woff2'); } @font-face { font-family:'DM Sans'; font-weight:700; font-style:normal; font-display:swap; src:url('/fonts/dmsans-700.woff2') format('woff2'); } @font-face { font-family:'Space Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('/fonts/spacemono-400.woff2') format('woff2'); } @font-face { font-family:'Space Mono'; font-weight:700; font-style:normal; font-display:swap; src:url('/fonts/spacemono-700.woff2') format('woff2'); } /* ---- Tokens ---- */ :root { color-scheme: light; --ground:#F5F0E7; --surface:#FFFFFF; --surface-2:#FBF7EF; --ink:#211F1A; --muted:#6C6558; --faint:#847A65; --line:#E7DFD0; --line-2:#F0EADD; --brand:#FF5C18; --brand-ink:#E24A0C; --brand-soft:#FFEBE0; --green:#2F6B4F; --green-bg:#E4EEE7; --blue:#3B6280; --blue-bg:#E6EDF2; --amber:#8A6A2E; --amber-bg:#F3EAD6; /* Red = needs attention / unsaved. Deliberately deeper and cooler than the brand orange so a warning never reads as a call to action. --red-solid is the fill for solid badges (always white text). */ --red:#A8281B; --red-bg:#F8E3DE; --red-solid:#C0392B; --shadow:0 1px 2px rgba(60,45,20,.06), 0 6px 18px rgba(60,45,20,.06); --sans:'DM Sans', system-ui, sans-serif; --mono:'Space Mono', ui-monospace, Menlo, monospace; --r:14px; --r-sm:9px; --r-xs:7px; } :root[data-theme="dark"] { color-scheme: dark; --ground:#111214; --surface:#1A1C1F; --surface-2:#202327; --ink:#F0ECE6; --muted:#928C99; --faint:#867F8F; --line:#2C2E33; --line-2:#26282C; --brand:#FF5C18; --brand-ink:#FF7038; --brand-soft:#2A1B12; --green:#74C495; --green-bg:#182A20; --blue:#83AACB; --blue-bg:#16242E; --amber:#CAA362; --amber-bg:#2A2416; --red:#F08A7C; --red-bg:#331A18; --red-solid:#C0392B; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); } /* ---- Base ---- */ * { box-sizing:border-box; } body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased; } .wrap { max-width:600px; margin:0 auto; padding:0 20px 72px; } a { color:var(--brand-ink); } /* ---- Eyebrow / section labels ---- */ .eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); font-weight:700; } .sec { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:700; margin:30px 0 12px; display:flex; align-items:center; gap:9px; } .sec .count { color:var(--brand-ink); background:var(--brand-soft); border-radius:999px; padding:2px 9px; font-size:10.5px; } /* ---- App header ---- */ .app-header { display:flex; align-items:center; justify-content:space-between; padding:14px 0 22px; } .brand { font-family:var(--sans); font-size:25px; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; } .brand .mark { width:28px; height:28px; border-radius:9px; background:var(--brand); display:inline-grid; place-items:center; color:#fff; font-weight:700; font-size:16px; box-shadow:0 1px 2px rgba(255,92,24,.35); } .user { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--muted); min-width:0; } .chip { display:inline-flex; align-items:center; gap:8px; max-width:100%; background:var(--surface); border:1px solid var(--line); padding:5px 11px 5px 6px; border-radius:999px; font-family:var(--sans); font-size:13.5px; color:var(--muted); cursor:pointer; } .chip:hover { border-color:var(--brand); } .chip b { color:var(--ink); font-weight:500; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chip .chev { font-size:10px; color:var(--faint); } .avatar { width:22px; height:22px; border-radius:999px; background:var(--brand-soft); color:var(--brand-ink); font-weight:700; font-size:10.5px; display:grid; place-items:center; font-family:var(--mono); flex:0 0 auto; } .linkbtn { font-family:var(--sans); font-size:13.5px; color:var(--muted); background:none; border:0; cursor:pointer; font-weight:500; } .linkbtn:hover { color:var(--brand); } /* Icon-only: the word lives in the accessible name so the bar fits a phone. */ .themebtn { font-size:13px; line-height:1; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:999px; width:30px; height:30px; display:grid; place-items:center; cursor:pointer; flex:0 0 auto; } .themebtn:hover { border-color:var(--brand); color:var(--brand-ink); } /* ---- Account flyout ---- Set password / Log out used to sit in the bar, which overflowed on mobile. They live here now, and it's where admin settings will go. */ .usermenu { position:relative; min-width:0; } .flyout { position:absolute; right:0; top:calc(100% + 7px); z-index:40; min-width:214px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow); padding:5px; } .flyout-head { font-family:var(--mono); font-size:11px; color:var(--faint); padding:8px 11px 9px; border-bottom:1px solid var(--line-2); margin-bottom:5px; overflow-wrap:anywhere; } .flyout-item { display:block; width:100%; text-align:left; font-family:var(--sans); font-size:14px; color:var(--ink); background:none; border:0; border-radius:var(--r-xs); padding:9px 11px; cursor:pointer; } .flyout-item:hover { background:var(--brand-soft); color:var(--brand-ink); } .flyout-sep { height:1px; background:var(--line-2); margin:5px 0; } @media (max-width:520px) { .app-header { padding:12px 0 18px; gap:10px; } .brand { font-size:21px; } /* Avatar-only chip — the full address is in the flyout, one tap away. */ .chip b, .chip .chev { display:none; } .chip { padding:5px; } .flyout { min-width:200px; } } /* ---- Upload drop zone ---- */ .drop { background:var(--surface); border:2px dashed var(--line); border-radius:var(--r); padding:34px 22px; text-align:center; transition:border-color .15s; } .drop:hover, .drop:focus-within { border-color:var(--brand); } .drop .ic { width:46px; height:46px; margin:0 auto 12px; border-radius:13px; background:var(--brand-soft); color:var(--brand-ink); display:grid; place-items:center; font-size:22px; } .drop .big { font-size:18px; font-weight:700; margin:0 0 3px; } .drop .sub { color:var(--muted); font-size:14px; margin:0; } .filerow { display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 14px; margin-top:9px; font-size:14px; } .filerow .fic { width:26px; height:26px; border-radius:7px; background:var(--green-bg); color:var(--green); display:grid; place-items:center; font-size:13px; font-weight:700; } .filerow .name { flex:1; } .filerow .done { font-family:var(--mono); color:var(--green); font-size:11.5px; font-weight:700; } /* ---- Expense entry card ---- */ .entry { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px; margin-bottom:15px; } .entry.saving { opacity:0.55; pointer-events:none; } .entry .top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .entry .vendor { font-size:18px; font-weight:700; line-height:1.25; letter-spacing:-.01em; } .entry .date { font-family:var(--mono); font-size:11.5px; color:var(--muted); background:var(--ground); padding:4px 9px; border-radius:7px; white-space:nowrap; } /* Extracted description — a field to verify, not subtext */ .descfield { display:flex; gap:11px; align-items:baseline; margin-top:11px; padding:9px 13px; background:var(--surface-2); border-radius:var(--r-sm); border-left:3px solid var(--brand); } .descfield .k { font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); padding-top:2px; white-space:nowrap; } .descfield .dtext { color:var(--ink); font-size:14.5px; line-height:1.4; } /* Figure tiles */ .figs { display:flex; gap:8px; margin:15px 0; flex-wrap:wrap; } .fig { flex:1; min-width:88px; background:var(--surface-2); border-radius:var(--r-sm); padding:9px 12px; } .fig .k { font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); } .fig .v { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:16px; font-weight:700; margin-top:3px; } .fig.total { background:var(--green-bg); } .fig.total .v { color:var(--green); } .fig.wait { background:var(--red-bg); box-shadow:inset 0 0 0 1.5px var(--red); } .fig.wait .k { color:var(--red); } .fig.wait .v { color:var(--red); font-weight:400; } /* Tags (category, stream) */ .metarow { display:flex; flex-wrap:wrap; gap:8px; } .tag { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px 12px; color:var(--ink); } .tag .k { color:var(--faint); font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; } /* Actions row: meta (pill, confidence) then a button group. Both wrap, so a wide status pill like "Pending amount" can't shove the buttons off the row — they drop to their own line together instead. */ .actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:16px; padding-top:15px; border-top:1px solid var(--line-2); } .actbtns { display:flex; align-items:center; gap:9px; flex-wrap:wrap; } @media (max-width:560px) { .actions .spacer { display:none; } .actbtns { width:100%; } .actbtns .btn { flex:1 1 auto; justify-content:center; } } /* ---- Status pills ---- */ /* Status enum mirrors netlify/functions/lib/status.js: pending_amount · incomplete · for_review · confirmed */ /* flex:0 0 auto is load-bearing: the pill is a flex item in .actions, so it inherits flex-shrink:1 and a crowded row squeezes it — and because it's nowrap the text spills over its own rounded edge instead of wrapping, which reads as "this pill has less padding than that one". Never let it shrink. */ /* All four status pills occupy the same footprint (min-width sized to the longest label, "Pending amount") with the text centred — otherwise the pill width tracks the label length, which reads as inconsistent padding and shifts everything after it as the status changes. flex:0 0 auto stops a crowded row squeezing a nowrap pill so its text spills past its own rounded edge. */ /* The box is pinned, not derived: explicit height + line-height:1 instead of vertical padding over an inherited line-height, which is what let one pill render taller than another. min-width matches the longest label so all four share a footprint; flex:0 0 auto stops a crowded row squeezing a nowrap pill until its text spills past its own rounded edge. */ .pill { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:6px; box-sizing:border-box; min-width:118px; height:24px; padding:0 12px; line-height:1; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; border-radius:999px; white-space:nowrap; } .pill.incomplete { color:var(--amber); background:var(--amber-bg); } .pill.pending { color:var(--blue); background:var(--blue-bg); } .pill.for-review { color:var(--green); background:var(--green-bg); } .pill.confirmed { color:#fff; background:var(--green); } /* Confidence meter */ .conf { font-family:var(--mono); font-size:11.5px; color:var(--muted); display:inline-flex; flex:0 0 auto; align-items:center; gap:7px; font-variant-numeric:tabular-nums; } .bar { width:50px; height:6px; border-radius:999px; background:var(--line); overflow:hidden; } .bar > i { display:block; height:100%; background:var(--green); border-radius:999px; } /* ---- Buttons ---- */ .btn { font-family:var(--sans); font-size:14px; font-weight:500; padding:9px 16px; border-radius:999px; cursor:pointer; border:1.5px solid transparent; } .btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; } .btn.primary { background:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(255,92,24,.3); } .btn.primary:hover { background:var(--brand-ink); } .btn.secondary { background:var(--surface); color:var(--ink); border-color:var(--line); } .btn.secondary:hover { border-color:var(--brand); color:var(--brand-ink); } .btn.ghost { background:none; color:var(--muted); } .btn.ghost:hover { background:var(--brand-soft); color:var(--brand-ink); } /* Destructive: quiet until you reach for it, so it never competes with Save. */ .btn.danger:hover { background:var(--red-bg); color:var(--red); } /* ---- Form fields ---- */ .field { display:grid; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } .txt { font-family:var(--sans); font-size:14.5px; padding:10px 12px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); min-width:200px; max-width:100%; } .txt:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand); } /* Single-line controls share one pinned height. A date input and a select size themselves differently — especially on iOS, where the date field is taller and wider than its box — so height is set rather than derived from padding. */ input.txt, select.txt { height:44px; padding-top:0; padding-bottom:0; } input[type="date"].txt { -webkit-appearance:none; appearance:none; } /* Description is a textarea — grows with its content (js/entry-card.js). */ textarea.txt { width:100%; resize:vertical; line-height:1.45; overflow:hidden; display:block; } /* ---- Card surface (generic) ---- */ .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:20px; } .foot { margin-top:42px; padding-top:16px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--faint); line-height:1.8; } /* ---- Upload states ---- */ [hidden] { display:none !important; } .drop { cursor:pointer; } .drop.drag { border-color:var(--brand); background:var(--brand-soft); } .signin { text-align:center; padding:64px 20px; } .signin p { color:var(--muted); margin:0 0 18px; } .pending { display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:14px 16px; margin-bottom:15px; } .pending .fname { font-family:var(--mono); font-size:13px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pending .status { font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } .entry .filename { font-family:var(--mono); font-size:11px; color:var(--faint); } .act { display:inline-flex; align-items:center; gap:9px; } a.btn { text-decoration:none; display:inline-flex; align-items:center; } .filed-ok { font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--green); } .errbox { background:var(--amber-bg); border-radius:var(--r-sm); padding:11px 13px; font-size:13.5px; color:var(--ink); margin-top:11px; } .errbox .who { display:block; margin-top:5px; font-family:var(--mono); font-size:11px; color:var(--amber); } .errbox a { color:var(--brand-ink); font-weight:500; } /* ---- /ds reference page ---- */ .ds-block { display:grid; gap:14px; } .ds-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .ds-swatches { display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:10px; } .sw { border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--surface); } .sw .box { height:50px; border-bottom:1px solid var(--line); } .sw .meta { padding:7px 9px; font-family:var(--mono); font-size:10.5px; line-height:1.4; } .sw .meta b { display:block; color:var(--ink); font-weight:700; letter-spacing:.02em; text-transform:none; } .sw .meta span { color:var(--muted); } .ds-type p { margin:0 0 6px; } .ds-type .t-display { font-family:var(--sans); font-size:25px; font-weight:700; letter-spacing:-.02em; } .ds-type .t-mono { font-family:var(--mono); font-size:14px; } .ds-type b.med { font-weight:500; } .ds-type b.bold { font-weight:700; } .ds-scale { font-family:var(--mono); font-size:11px; color:var(--muted); } .spacer { flex:1; } .bar > i.w90 { width:90%; } .sw .box.b-ground{background:var(--ground)} .sw .box.b-surface{background:var(--surface)} .sw .box.b-surface2{background:var(--surface-2)} .sw .box.b-ink{background:var(--ink)} .sw .box.b-muted{background:var(--muted)} .sw .box.b-brand{background:var(--brand)} .sw .box.b-brandsoft{background:var(--brand-soft)} .sw .box.b-green{background:var(--green)} .sw .box.b-greenbg{background:var(--green-bg)} .sw .box.b-blue{background:var(--blue)} .sw .box.b-amber{background:var(--amber)} .sw .box.b-line{background:var(--line)} .sw .box.b-red{background:var(--red)} .sw .box.b-redsolid{background:var(--red-solid)} /* ---- Tab bar (Add / Review) ---- */ .tabbar { display:flex; gap:6px; border-bottom:1.5px solid var(--line); margin:0 0 8px; } .tabbar a { position:relative; display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--muted); text-decoration:none; padding:9px 16px; border-radius:10px 10px 0 0; margin-bottom:-1.5px; border-bottom:2.5px solid transparent; } .tabbar a:hover { color:var(--ink); } .tabbar a.here { color:var(--brand-ink); border-bottom-color:var(--brand); } .navcount { min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--red-solid); color:#fff; font-family:var(--mono); font-size:11px; font-weight:700; display:inline-grid; place-items:center; line-height:1; } /* Loading — the count comes from a slow read, so show the wait rather than popping a number in later. */ .navcount.loading { background:var(--line-2); } .navcount.loading::after { content:""; width:9px; height:9px; border-radius:999px; border:1.5px solid var(--muted); border-top-color:transparent; animation:tk-spin .6s linear infinite; } /* All-clear — green check, then shrink towards centre and vanish. */ .navcount.ok { background:var(--green); } .navcount.vanish { transform:scale(0); opacity:0; transition:transform .32s cubic-bezier(.4,0,.6,1), opacity .32s ease; } @keyframes tk-spin { to { transform:rotate(360deg); } } /* ---- Review queue ---- */ .reviewnote { font-family:var(--mono); font-size:12.5px; color:var(--muted); padding:22px 2px; } .fig .txt.amt { min-width:0; width:100%; padding:6px 8px; font-family:var(--mono); font-size:15px; font-weight:700; margin-top:2px; } .field > span { font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } .field .txt { width:100%; } select.txt { -webkit-appearance:none; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px; } /* ---- LLM category suggestion ---- */ .cat-suggest { display:inline-flex; align-items:center; gap:5px; font-family:var(--sans); font-size:13px; color:var(--blue); background:var(--blue-bg); border:1px solid var(--line); border-radius:999px; padding:5px 12px; cursor:pointer; margin-top:6px; } .cat-suggest:hover { border-color:var(--blue); } .cat-suggest-k { font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; font-weight:700; } /* ---- Evidence disclosure (why the classifier proposed this) ---- Collapsed when the match is strong — it's supporting detail, not a field — and opened automatically when the record needs a judgement call. */ .evidence { margin-top:11px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); } .evidence-sum { display:flex; align-items:center; gap:9px; padding:9px 12px; cursor:pointer; list-style:none; font-family:var(--mono); font-size:11px; color:var(--muted); } .evidence-sum::-webkit-details-marker { display:none; } .evidence-sum::after { content:"▸"; margin-left:auto; font-size:10px; color:var(--faint); transition:transform .18s; } .evidence[open] .evidence-sum::after { transform:rotate(90deg); } .evidence-sum:hover { color:var(--brand-ink); } .evidence-k { font-weight:700; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; } .evidence-sub { color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .evidence-body { padding:0 12px 12px; } .evidence-note { font-family:var(--mono); font-size:10.5px; color:var(--faint); line-height:1.5; margin-top:8px; } .bar.weak > i { background:var(--amber); } /* below the "strong" threshold */ .chips { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:9px; } .chips-k { font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); } .streamchip { font-family:var(--sans); font-size:12.5px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px 12px; color:var(--ink); cursor:pointer; } .streamchip:hover { border-color:var(--brand); color:var(--brand-ink); } .streamchip.on { background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); font-weight:500; } /* ---- Tax calculator (entry card) ---- Disclosure panel below the amount tiles that back-calculates GST/PST from either Pre-tax or Total CAD. Same treatment as the evidence panel. */ .taxcalc { margin-top:8px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); } .taxcalc-sum { display:flex; align-items:center; gap:9px; padding:9px 12px; cursor:pointer; list-style:none; font-family:var(--mono); font-size:11px; color:var(--muted); } .taxcalc-sum::-webkit-details-marker { display:none; } .taxcalc-sum::after { content:"▸"; margin-left:auto; font-size:10px; color:var(--faint); transition:transform .18s; } .taxcalc[open] .taxcalc-sum::after { transform:rotate(90deg); } .taxcalc-sum:hover { color:var(--brand-ink); } .taxcalc-k { font-weight:700; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; } .taxcalc-body { padding:0 12px 12px; } .taxcalc-toggles { display:flex; flex-wrap:wrap; gap:5px 16px; } .taxcalc-toggle { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; color:var(--ink); cursor:pointer; } .taxcalc-toggle input { accent-color:var(--brand); cursor:pointer; } .taxcalc-hint { font-family:var(--mono); font-size:10.5px; color:var(--faint); line-height:1.5; margin-top:8px; } .taxcalc-rows { display:grid; gap:3px; margin-top:5px; } .taxcalc-row { display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); font-size:13px; } .taxcalc-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); } .taxcalc-val { font-weight:700; font-variant-numeric:tabular-nums; } .taxcalc-apply { margin-top:8px; } /* Vendor takes the slack; date and currency size to their content. Stacks on narrow screens (see the max-width rule below). */ .editgrid { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:end; } .editgrid .field .txt { min-width:150px; } .editgrid .field .txt.js-currency { min-width:92px; } .curnote { font-family:var(--mono); font-size:11px; color:var(--amber); margin-top:8px; } /* Own-currency amounts on a foreign receipt — reference figures, read-only until the edit toggle is tapped, so they can't be mistaken for CAD values. */ .orig { margin-top:11px; padding:11px 13px; background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--r-sm); } .orig-head { display:flex; align-items:center; gap:9px; } .orig-k { font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--amber); font-weight:700; flex:1; } .orig-edit { font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--muted); background:none; border:1px solid var(--line); border-radius:999px; padding:3px 10px; cursor:pointer; } .orig-edit:hover { border-color:var(--brand); color:var(--brand-ink); } .orig.editing .orig-edit { border-color:var(--brand); color:var(--brand-ink); background:var(--brand-soft); } .orig-rows { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:8px; } .orig-item { display:inline-flex; align-items:center; gap:7px; } .orig-lbl { font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); } .orig-val { font-family:var(--mono); font-size:13.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; } .orig-item .txt.amt { min-width:0; width:96px; padding:5px 8px; font-size:13.5px; margin-top:0; } .orig-note { font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-top:9px; line-height:1.5; } .fig .txt.amt { font-variant-numeric:tabular-nums; } /* Three across gets tight before the phone breakpoint: give vendor its own full row and let date + currency share the next. */ @media (max-width:560px) { .editgrid { grid-template-columns:1fr 1fr; } .editgrid > .field:first-child { grid-column:1 / -1; } /* min-width:0 lets a grid item shrink below its content; without it the date input keeps its intrinsic width and spills over the currency select. */ .editgrid .field, .editgrid .field .txt, .editgrid .field .txt.js-currency { min-width:0; } .editgrid .field .txt { width:100%; } } /* ---- "Log against project" checkbox (entry card) ---- */ .checkfield { display:flex; align-items:flex-start; gap:11px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; cursor:pointer; } .checkfield:hover { border-color:var(--brand); } .checkfield input[type="checkbox"] { width:17px; height:17px; margin:1px 0 0; accent-color:var(--brand); flex:0 0 auto; cursor:pointer; } .checkfield-t { display:grid; gap:2px; } .checkfield-t b { font-size:14.5px; font-weight:500; color:var(--ink); } .checkfield-sub { font-size:12.5px; color:var(--muted); line-height:1.4; } /* ---- Project log checklist ---- */ .logitem { display:flex; align-items:flex-start; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:15px 17px; margin-bottom:11px; transition:opacity .3s, transform .3s; } .logitem-box { width:19px; height:19px; margin:2px 0 0; accent-color:var(--green); flex:0 0 auto; cursor:pointer; } .logitem-body { flex:1; min-width:0; } .logitem-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .logitem-vendor { font-size:16px; font-weight:700; letter-spacing:-.01em; } .logitem-amt { font-family:var(--mono); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; } .logitem-desc { font-size:14px; color:var(--muted); line-height:1.45; margin-top:3px; } .logitem-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; } .logitem-tag { font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--faint); background:var(--surface-2); border-radius:999px; padding:3px 9px; white-space:nowrap; } .logitem-link { margin-top:9px; padding:5px 12px; font-size:13px; } /* Ticked off — strike through and fade before it leaves the list, so the action is legible rather than the row just vanishing. */ .logitem-going { opacity:.4; transform:translateX(6px); } .logitem-going .logitem-vendor, .logitem-going .logitem-desc { text-decoration:line-through; } /* ---- Possible-duplicate warning (Add screen) ---- Amber, not red: two purchases from one vendor on one day are common and legitimate, so this is "have a look", not "you did something wrong". */ .dupenote { background:var(--amber-bg); border:1px solid var(--amber); border-radius:var(--r-sm); padding:10px 12px; margin:-3px 0 14px; } .dupenote b { display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--amber); margin-bottom:6px; } .dupenote-hit { font-size:13.5px; color:var(--ink); line-height:1.5; } .dupenote-hit a { margin-left:5px; font-size:12.5px; } .dupenote-foot { font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:7px; } /* Restored draft warning — an unsaved extraction held on this device, with its own countdown (js/drafts.js). Red because it's unfinished business, not a neutral status: the receipt still needs saving or it will be swept. */ .draftnote { font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; line-height:1.5; color:var(--red); background:var(--red-bg); border:1px solid var(--red); border-radius:var(--r-xs); padding:7px 11px; margin:-3px 0 14px; } .confirmed-note { font-size:14px; color:var(--muted); display:flex; align-items:center; gap:9px; } .confirmed-note b { color:var(--ink); font-weight:700; } .done-card { background:var(--green-bg); border-color:var(--green); } @media (prefers-reduced-motion: reduce) { * { transition:none !important; } /* Keep the loading ring visible as a static indicator rather than spinning. */ .navcount.loading::after { animation:none; } } /* ---- Records ↔ receipts check (Review screen) ---- */ .integrity { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px 18px; } .integrity-head { font-size:15px; font-weight:700; letter-spacing:-.01em; margin-top:12px; } .integrity-head:first-child { margin-top:0; } .integrity-head.integrity-warn { color:var(--red); } .integrity-sub { font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:5px; line-height:1.6; } .integrity-item { font-size:13.5px; color:var(--ink); padding:5px 0 5px 13px; border-left:2px solid var(--line); margin-top:6px; } /* ---- Saved receipt summary (Add screen) ---- A saved receipt collapses to this. Leaving the edit fields on screen — greyed but still shaped like a form — reads as unfinished work; the receipt is stored and there's nothing left to do on this card. */ .saved-card { padding:15px 17px; } .savedcard-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; } .savedcard-vendor { font-size:16px; font-weight:700; letter-spacing:-.01em; } .savedcard-amt { font-family:var(--mono); font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; margin-left:auto; white-space:nowrap; } .savedcard-meta { font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:7px; line-height:1.5; } .savedcard-note { font-size:13.5px; color:var(--green); margin-top:8px; } .done-card .savedcard-note { color:var(--green); } .savedcard-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:13px; } .savedcard-actions .btn { padding:6px 13px; font-size:13.5px; } @media (max-width:560px) { .savedcard-actions .btn { flex:1 1 auto; justify-content:center; } } /* A .sec row carrying only an action — no heading text. Keeps the button where it sat when the heading beside it was removed. */ .sec.toolbar { min-height:22px; margin:22px 0 10px; } /* A required field that's still empty — what makes a record "Incomplete". Red, and filled rather than outlined: amber on a warm cream background at a 1.5px border was there but not noticeable, which defeats the point of pointing at what to fix. Clears the moment the field is set. */ .field.needs > span { color:var(--red); } .field.needs > span::after { content:" — needed to confirm"; font-weight:400; text-transform:none; letter-spacing:0; } .field.needs .txt { border-color:var(--red); background:var(--red-bg); } .field.needs .txt:focus { background:var(--surface); } /* ---- Documentation page (year-end rollover) ---- */ .doc-h1 { font-size:27px; font-weight:700; letter-spacing:-.02em; margin:6px 0 10px; } .doc-lead { color:var(--muted); font-size:16px; margin:0 0 8px; } .doc-card { margin-bottom:4px; } .doc-list, .doc-steps { margin:0; padding-left:20px; display:grid; gap:11px; } .doc-steps { counter-reset:step; } .doc-list li, .doc-steps li { line-height:1.55; } .doc-card code { font-family:var(--mono); font-size:13px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-xs); padding:1px 5px; white-space:nowrap; } .doc-warn { margin:0 0 14px; padding-left:13px; border-left:3px solid var(--amber); line-height:1.55; } .doc-warn:last-child { margin-bottom:0; } .doc-back { margin:28px 0 0; font-size:14.5px; }