| as any transaction row, so none of
the existing column-width/mobile-grid CSS above needs to know about it
specially. Not hoverable/clickable, so no cursor/hover treatment.
The flex layout lives on an inner , NOT the | itself — a |
needs to stay `display: table-cell` for the table's own column/colspan
sizing algorithm to compute its width correctly; overriding that to
`flex` directly made the browser stop treating it as a real table cell,
so the colspan="4" span collapsed to a sliver the width of one column
instead of the full row (confirmed visually: the label and amount were
crushed together at the row's left edge, clipped by the base |
rule's overflow:hidden). */
tr.txn-day-header td {
padding: 12px 10px 6px; border-top: none;
font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
overflow: visible; white-space: normal;
}
tr.txn-day-header td div { display: flex; justify-content: space-between; align-items: baseline; }
tr.txn-day-header:first-child td { padding-top: 4px; }
tr.txn-day-header:hover { background: transparent; }
tr.txn-day-header td b { font-size: 13px; font-weight: 800; letter-spacing: normal; text-transform: none; }
tr.txn-day-header td b.pos { color: var(--pos); }
tr.txn-day-header td b.neg { color: var(--neg); }
/* Mobile: 4 fixed-width columns (14/46/24/16%) on a ~340px viewport leaves
almost no room per cell — merchant names truncate to a handful of
characters and the category chip barely fits its own label. Below
560px the table stops being a table (grid on each row instead) and
becomes one small card per transaction: merchant name gets a full-width
line to itself, date/amount share a row, category sits under its own —
the same "list of cards" pattern already used for merchants/anomalies/
subscriptions elsewhere on this page. thead is dropped since the grid
areas below are self-labelling (date is obviously a date, amount is
right-aligned and bold) the way a table header would have been. */
@media (max-width: 560px) {
.txn-scroll { max-height: 60vh; }
#txn-table thead { display: none; }
#txn-table, #txn-table tbody, #txn-table tr, #txn-table td { display: block; width: auto; }
#txn-table tr {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "merchant merchant" "date category" "amount amount";
row-gap: 5px; column-gap: 10px;
padding: 12px 8px; border-top: 1px solid var(--line);
}
#txn-table tbody tr:first-child { border-top: 0; }
#txn-table td {
padding: 0; border-top: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#txn-table td:nth-child(1) { grid-area: date; align-self: center; font-size: 12.5px; color: var(--muted); }
#txn-table td:nth-child(2) { grid-area: merchant; font-weight: 700; font-size: 15.5px; white-space: normal; }
/* #txn-table td (line above) forces display:block at higher specificity
(id+tag beats .td-merchant's plain class) — restore flex for the badge
layout, and let the name wrap onto a 2nd line instead of ellipsis-ing,
since the mobile card has vertical room a table row didn't. */
#txn-table td.td-merchant { display: flex; align-items: flex-start; }
#txn-table td.td-merchant .td-merchant-name { white-space: normal; overflow: visible; text-overflow: clip; }
#txn-table td.td-merchant .merchant-badge { margin-top: 1px; }
#txn-table td:nth-child(3) { grid-area: category; justify-self: start; align-self: center; }
#txn-table td:nth-child(4) { grid-area: amount; justify-self: end; align-self: center; font-size: 16px; }
/* The flag tint is normally painted per- | (fine on a real table where
cells sit flush), which on this grid layout would show as separate
patches with gaps between them instead of one solid highlighted card —
move it to the row itself and neutralise the per-cell version. */
#txn-table tr.flag { background: color-mix(in srgb, var(--neg) 7%, transparent); }
#txn-table tr.flag:hover { background: color-mix(in srgb, var(--neg) 12%, transparent); }
#txn-table tr.flag td { background: transparent; }
/* Day-header row only has one | , so the 4-column grid
above doesn't apply — override display:grid back to a simple flex row
(higher specificity than the td:nth-child(1) rules above, via the
.txn-day-header class, so those don't leak font-size/color onto it). */
#txn-table tr.txn-day-header {
display: block; padding: 14px 8px 6px; border-top: none;
}
#txn-table tr.txn-day-header td {
display: block; padding: 0; border-top: 0;
font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
#txn-table tr.txn-day-header td div { display: flex; justify-content: space-between; align-items: baseline; }
}
/* ── Headline band: the page's entry point ── */
.headline {
background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, var(--card)), var(--card) 70%);
border: 1.5px solid color-mix(in srgb, var(--brand) 28%, transparent);
border-radius: var(--radius); padding: clamp(16px, 3vw, 22px) clamp(18px, 3.5vw, 26px);
margin-bottom: 16px; animation: rise .5s ease both;
}
.headline p { margin: 0; font-size: clamp(17px, 2.6vw, 21px); line-height: 1.45; letter-spacing: -.01em; }
.headline b { font-weight: 800; color: var(--brand); }
.headline-sub { margin-top: 7px !important; font-size: 14px !important; color: var(--muted); line-height: 1.55 !important; }
.headline-sub b { color: var(--ink); font-weight: 700; }
/* ── Net-total hero (Dime-inspired) ──
One big typographic number instead of four equal-weight cards. Purely
visual — no new data, reads d.stats via render() same as the existing
stat cards right below it, which are untouched. */
.net-hero { text-align: center; margin: 4px 0 18px; animation: rise .5s ease both; }
.net-hero-label {
display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--muted);
background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; margin-bottom: 10px;
}
.net-hero-amount { margin: 0; font-size: clamp(34px, 8vw, 46px); font-weight: 800; letter-spacing: -0.02em; }
.net-hero-amount.pos { color: var(--pos); }
.net-hero-amount.neg { color: var(--neg); }
.net-hero-sub { margin-top: 4px; font-size: 14.5px; font-weight: 700; }
.net-hero-in { color: var(--pos); }
.net-hero-out { color: var(--neg); }
.net-hero-sep { color: var(--muted); font-weight: 400; margin: 0 6px; }
/* ── Section nav ──
No bar behind the links — each link is its own floating pill (a solid
background + shadow, not a strip spanning the row), so what's sticky is
a handful of buttons, not a bar that reads as a stray UI layer. */
.section-nav {
display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px;
padding: 2px 2px 8px; scrollbar-width: none;
/* Sticky under the topbar so it stays reachable through a long scroll. */
/* --topbar-h is measured in app.js: the topbar wraps to two rows on
narrow screens, so a hard-coded offset parks this nav underneath it. */
position: sticky; top: calc(var(--topbar-h, 66px) + 2px); z-index: 4;
}
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a {
flex: none; font-size: 13px; font-weight: 600; text-decoration: none;
color: var(--muted); background: var(--card); border: 1.5px solid var(--line);
border-radius: 999px; padding: 6px 13px;
box-shadow: 0 2px 10px rgba(0,0,0,.08);
transition: color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.section-nav a:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--card)); box-shadow: 0 3px 14px rgba(0,0,0,.12); transform: translateY(-1px); }
/* Anchor jumps must clear the sticky topbar + this nav, or the heading
lands underneath them. */
#cats-card, #mom-card, #months-card, #subscription-card, #anomaly-card, #txn-card {
scroll-margin-top: calc(var(--topbar-h, 66px) + var(--nav-h, 44px) + 12px);
}
/* ── KPI sparklines ── */
.spark { display: block; height: 26px; margin-top: 6px; opacity: .9; }
.spark svg { width: 100%; height: 26px; display: block; }
.spark:empty { display: none; }
/* ── Empty states ── */
.empty-state {
font-size: 14px; color: var(--muted); line-height: 1.6;
background: var(--bg); border: 1.5px dashed var(--line);
border-radius: 12px; padding: 14px 16px; margin: 12px 0 0;
}
/* ── Upload-screen preview sketch ── */
.preview-peek { max-width: 680px; margin: 22px auto 0; width: 100%; animation: rise .6s .3s ease both; }
.preview-label {
text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--muted); margin-bottom: 10px;
}
.peek {
background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
padding: 14px; box-shadow: var(--shadow);
display: grid; gap: 12px;
/* Muted via colour/contrast alone, not filter:blur or a mask fade — those
read as an out-of-focus/broken image rather than a deliberate sketch.
"Not real data" is communicated by the shapes having no numbers or
labels at all, not by making them hard to see. */
}
.peek-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.peek-stats span {
height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--brand) 16%, var(--bg));
/* Pre-animate state. Transform/opacity only — no width/height tween — so
this never triggers layout, matching the rest of the app's motion. */
opacity: 0; transform: translateY(6px);
transition: opacity .5s ease, transform .5s var(--spring);
}
.peek-body { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; }
.peek-donut {
width: 84px; height: 84px; overflow: visible;
/* overflow:visible — a popped-out segment's stroke extends past the
viewBox's own 0-100 bounds (the pop distance was chosen assuming
room to breathe outside it); clipping would flatten the pop back down
right at the edge instead of showing it. */
opacity: 0; transform: scale(.8);
transition: opacity .5s ease, transform .5s var(--spring);
}
.peek-donut-seg {
/* Rest position — the idle cycle below animates FROM here, so a segment
between its own turns (or before .pk-idle ever starts, e.g. reduced-
motion) sits exactly where the original flat gradient donut drew it. */
transform: translate(0, 0);
}
.peek-lines { display: grid; gap: 9px; }
.peek-lines i {
display: block; height: 9px; width: var(--w); border-radius: 999px;
background: color-mix(in srgb, var(--brand) 26%, var(--bg));
/* scaleX from the left edge, not a width tween — GPU-composited, and the
bar visibly "draws" left-to-right the way a reading eye already moves. */
transform-origin: left; transform: scaleX(0);
transition: transform .55s var(--spring);
}
.peek-bars { display: flex; align-items: flex-end; gap: 7px; height: 62px; }
.peek-bars i {
flex: 1; height: var(--h); border-radius: 5px 5px 0 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--pos) 55%, transparent), color-mix(in srgb, var(--pos) 12%, transparent));
transform-origin: bottom; transform: scaleY(0);
transition: transform .6s var(--spring);
}
/* Scroll-triggered reveal for the sketch above — see the IntersectionObserver
in app.js (mirrors animateMonthsChartOnScroll's play-once pattern). Each
group staggers on its own nth-child track so the eye reads stats, then
the donut+lines, then the bars, rather than everything snapping at once.
#peek.pk-in is the ONLY thing JS ever toggles; every other rule above is
pure CSS, and prefers-reduced-motion already zeroes all transitions
globally (see the app's top-level rule), so this degrades to an instant
full-strength reveal with zero extra code for that case. */
#peek.pk-in .peek-stats span { opacity: 1; transform: translateY(0); }
#peek.pk-in .peek-donut { opacity: 1; transform: scale(1); }
#peek.pk-in .peek-lines i { transform: scaleX(1); }
#peek.pk-in .peek-bars i { transform: scaleY(1); }
#peek.pk-in .peek-stats span:nth-child(1) { transition-delay: 0ms; }
#peek.pk-in .peek-stats span:nth-child(2) { transition-delay: 60ms; }
#peek.pk-in .peek-stats span:nth-child(3) { transition-delay: 120ms; }
#peek.pk-in .peek-stats span:nth-child(4) { transition-delay: 180ms; }
#peek.pk-in .peek-donut { transition-delay: 160ms; }
#peek.pk-in .peek-lines i:nth-child(1) { transition-delay: 220ms; }
#peek.pk-in .peek-lines i:nth-child(2) { transition-delay: 260ms; }
#peek.pk-in .peek-lines i:nth-child(3) { transition-delay: 300ms; }
#peek.pk-in .peek-lines i:nth-child(4) { transition-delay: 340ms; }
#peek.pk-in .peek-lines i:nth-child(5) { transition-delay: 380ms; }
#peek.pk-in .peek-bars i:nth-child(1) { transition-delay: 380ms; }
#peek.pk-in .peek-bars i:nth-child(2) { transition-delay: 415ms; }
#peek.pk-in .peek-bars i:nth-child(3) { transition-delay: 450ms; }
#peek.pk-in .peek-bars i:nth-child(4) { transition-delay: 485ms; }
#peek.pk-in .peek-bars i:nth-child(5) { transition-delay: 520ms; }
#peek.pk-in .peek-bars i:nth-child(6) { transition-delay: 555ms; }
#peek.pk-in .peek-bars i:nth-child(7) { transition-delay: 590ms; }
#peek.pk-in .peek-bars i:nth-child(8) { transition-delay: 625ms; }
/* Idle motion — kicks in once the entrance transition finishes (JS adds
.pk-idle ~1.25s after .pk-in; see app.js), so it never fights the
transition above for the same `transform` property. Small amplitude,
slow, staggered per element — reads as "quietly alive," not a gimmick.
Bars bob like a soft equalizer, lines sway, the donut breathes; nothing
here changes size/position enough to look like a loading indicator.
animation-play-state is flipped to paused while #peek scrolls out of
view (same observer that starts it), so this never spends cycles on an
element nobody's looking at. */
@keyframes pk-bob { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.9); } }
@keyframes pk-sway { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.96); } }
/* Each segment sits at rest for 4/5 of the shared 6500ms cycle and pops
out for its own 1300ms turn — one segment "active" at a time, matching
how a real doughnut chart pops exactly one slice, not the whole ring
breathing together. The 6%/15% plateau (not a bare 0%/20% snap) gives
the pop a held moment at full extension rather than an instant flick.
FIVE separate keyframe rules, one hardcoded translate destination each
— each segment's own arc-bisector direction at a 7-unit pop distance in
the SVG's 0-100 viewBox space, expressed in %. The % matters: an
EARLIER version wrote these as bare unitless numbers (translate(6.51,
-2.58)), on the assumption that CSS transforms on SVG shapes treat
unitless translate() arguments as native user-space units the way the
legacy SVG `transform` ATTRIBUTE does. They don't — confirmed by reading
back anim.effect.getKeyframes(): the 6%/15% keyframes had NO `transform`
entry at all, meaning the whole declaration was silently rejected as
invalid at parse time and dropped, leaving those offsets undefined and
interpolating as if they'd never been declared. translate()'s CSS spec
requires a real ; % resolves correctly against the
viewBox (the default transform-box for SVG shape elements) and IS valid. */
@keyframes pk-slice-pop-1 { 0%, 100% { transform: translate(0, 0); } 6%, 15% { transform: translate(6.51%, -2.58%); } 21% { transform: translate(0, 0); } }
@keyframes pk-slice-pop-2 { 0%, 100% { transform: translate(0, 0); } 6%, 15% { transform: translate(0, 7%); } 21% { transform: translate(0, 0); } }
@keyframes pk-slice-pop-3 { 0%, 100% { transform: translate(0, 0); } 6%, 15% { transform: translate(-6.78%, 1.74%); } 21% { transform: translate(0, 0); } }
@keyframes pk-slice-pop-4 { 0%, 100% { transform: translate(0, 0); } 6%, 15% { transform: translate(-5.39%, -4.46%); } 21% { transform: translate(0, 0); } }
@keyframes pk-slice-pop-5 { 0%, 100% { transform: translate(0, 0); } 6%, 15% { transform: translate(-1.74%, -6.78%); } 21% { transform: translate(0, 0); } }
#peek.pk-idle .peek-bars i { animation: pk-bob 2.6s ease-in-out infinite; transform-origin: bottom; }
#peek.pk-idle .peek-lines i { animation: pk-sway 3.2s ease-in-out infinite; transform-origin: left; }
#peek.pk-idle .peek-donut-seg { animation-duration: 6500ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
#peek.pk-idle .peek-donut-seg:nth-child(1) { animation-name: pk-slice-pop-1; animation-delay: 0ms; }
#peek.pk-idle .peek-donut-seg:nth-child(2) { animation-name: pk-slice-pop-2; animation-delay: 1300ms; }
#peek.pk-idle .peek-donut-seg:nth-child(3) { animation-name: pk-slice-pop-3; animation-delay: 2600ms; }
#peek.pk-idle .peek-donut-seg:nth-child(4) { animation-name: pk-slice-pop-4; animation-delay: 3900ms; }
#peek.pk-idle .peek-donut-seg:nth-child(5) { animation-name: pk-slice-pop-5; animation-delay: 5200ms; }
#peek.pk-idle .peek-bars i:nth-child(1) { animation-delay: 0ms; }
#peek.pk-idle .peek-bars i:nth-child(2) { animation-delay: 130ms; }
#peek.pk-idle .peek-bars i:nth-child(3) { animation-delay: 260ms; }
#peek.pk-idle .peek-bars i:nth-child(4) { animation-delay: 390ms; }
#peek.pk-idle .peek-bars i:nth-child(5) { animation-delay: 520ms; }
#peek.pk-idle .peek-bars i:nth-child(6) { animation-delay: 650ms; }
#peek.pk-idle .peek-bars i:nth-child(7) { animation-delay: 780ms; }
#peek.pk-idle .peek-bars i:nth-child(8) { animation-delay: 910ms; }
#peek.pk-idle .peek-lines i:nth-child(1) { animation-delay: 0ms; }
#peek.pk-idle .peek-lines i:nth-child(2) { animation-delay: 220ms; }
#peek.pk-idle .peek-lines i:nth-child(3) { animation-delay: 440ms; }
#peek.pk-idle .peek-lines i:nth-child(4) { animation-delay: 660ms; }
#peek.pk-idle .peek-lines i:nth-child(5) { animation-delay: 880ms; }
#peek.pk-idle.pk-paused .peek-bars i,
#peek.pk-idle.pk-paused .peek-lines i,
#peek.pk-idle.pk-paused .peek-donut-seg { animation-play-state: paused; }
/* "What you'll get" is a hint of the dashboard, not something worth
scrolling past on a phone — shrunk so the dropzone (the actual next
action) stays closer to the fold. Placed after the base .peek rules
above (same specificity, source order decides the winner regardless
of the media query being true — an earlier mobile override here would
silently lose to those later, unscoped rules). */
@media (max-width: 620px) {
.preview-peek { margin-top: 14px; }
.preview-label { font-size: 10.5px; margin-bottom: 6px; }
.peek { padding: 10px; gap: 8px; }
.peek-stats { gap: 6px; }
.peek-stats span { height: 22px; border-radius: 7px; }
.peek-body { gap: 10px; }
.peek-lines { gap: 6px; }
.peek-lines i { height: 7px; }
.peek-bars { height: 40px; gap: 5px; }
}
@media (max-width: 480px) {
.peek-body { grid-template-columns: 52px 1fr; }
.peek-donut { width: 52px; height: 52px; }
}
/* ── Month-over-month card ── */
.mom-head h2 { margin-bottom: 2px; }
.mom-head .muted { font-size: 13px; margin-bottom: 14px; }
.mom-hero {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px; margin-bottom: 20px;
}
.mom-metric {
background: var(--bg); border: 1.5px solid var(--line); border-radius: 14px;
padding: 13px 15px;
}
.mom-metric small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.mom-metric b { display: block; font-size: clamp(20px, 3.4vw, 25px); letter-spacing: -.02em; margin: 3px 0 5px; }
.delta { font-size: 12.5px; font-weight: 700; display: inline-block; }
.delta.is-good { color: var(--pos); }
.delta.is-bad { color: var(--neg); }
.delta.is-flat { color: var(--muted); }
.mom-sub-head { font-size: 14px; margin-bottom: 10px; color: var(--muted); }
.mom-cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mom-cats li {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 10px 13px; background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px;
}
.mom-cat-name { font-weight: 700; font-size: 14.5px; }
.mom-cats small { font-size: 12.5px; }
.mom-cat-delta { font-size: 13px; font-weight: 700; white-space: nowrap; text-align: right; }
.mom-cat-delta.is-up { color: var(--neg); }
.mom-cat-delta.is-down { color: var(--pos); }
/* ── Subscription total ── */
.sub-total {
background: color-mix(in srgb, var(--pos) 10%, transparent);
border: 1.5px solid color-mix(in srgb, var(--pos) 35%, transparent);
border-radius: 14px; padding: 14px 16px; margin: 12px 0 14px;
}
.sub-total-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.sub-total-main b {
font-size: clamp(26px, 5vw, 34px); letter-spacing: -.03em; color: var(--pos);
display: inline-block; margin-top: 2px;
}
.sub-total-unit { font-size: 14px; font-weight: 700; color: var(--pos); margin-left: 5px; }
.sub-total-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
/* ── Category correction ── */
.txn-hint { font-size: 13px; margin-bottom: 8px; }
.cat-filter-bar { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.cat-filter-bar::-webkit-scrollbar { display: none; }
.cat-pill {
flex: none; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
color: var(--muted); background: var(--bg); border: 1.5px solid var(--line);
border-radius: 999px; padding: 6px 13px; cursor: pointer;
transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.cat-pill:hover { color: var(--ink); transform: translateY(-1px); }
.cat-pill.is-active {
color: var(--brand-ink); background: linear-gradient(135deg, var(--brand), var(--brand-2));
border-color: transparent;
}
.cat-override-note {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 12.5px; font-weight: 600; color: var(--brand);
background: color-mix(in srgb, var(--brand) 10%, transparent);
border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
}
.cat-chip-btn { font-family: inherit; border: 1.5px solid transparent; cursor: pointer; transition: box-shadow .15s ease, background .15s ease; }
.cat-chip-btn:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.cat-chip-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent); }
/* An edited category is marked so a corrected row is distinguishable from
one the classifier got right on its own. */
.cat-chip-btn.is-overridden { border-color: currentColor; }
.cat-chip-btn.is-overridden::after { content: " ✎"; font-size: 10px; opacity: .75; }
.cat-menu {
position: absolute; z-index: 70; width: 210px; max-width: calc(100vw - 16px);
background: var(--card); border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 14px 38px rgba(0,0,0,.2); padding: 6px;
animation: pop-in .15s ease both;
}
.cat-menu-head {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--muted); padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-menu-item {
display: block; width: 100%; text-align: left; font: inherit; font-size: 14px;
background: none; border: 0; border-radius: 9px; padding: 8px 10px; cursor: pointer; color: var(--ink);
}
.cat-menu-item:hover, .cat-menu-item:focus-visible { background: color-mix(in srgb, var(--brand) 12%, transparent); outline: none; }
.cat-menu-item.is-current { color: var(--brand); font-weight: 700; }
.cat-menu-item.is-current::after { content: " ✓"; }
.cat-chip { font-size: 12.5px; font-weight: 600; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.muted { color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.foot { text-align: center; color: var(--muted); font-size: 14px; padding: 28px 0 10px; }
/* Cross-links to my other tools. Kept the quietest thing in the footer —
muted, smaller than the footer line above it — because this is a
trust-first tool people hand their bank statement to, and a prominent row
of outbound links reads as an ad. flex-wrap so the long descriptive
anchors (descriptive on purpose: that text is what search engines read)
wrap on a phone instead of forcing a horizontal scroll. */
.foot-tools {
margin-top: 10px; font-size: 12.5px; line-height: 1.6;
display: flex; flex-wrap: wrap; justify-content: center;
align-items: baseline; gap: 2px 6px;
}
.foot-tools a {
color: var(--muted); font-weight: 600; text-decoration: underline;
text-underline-offset: 2px; text-decoration-thickness: 1px;
padding: 2px 4px; border-radius: 6px;
transition: color .2s ease, background-color .2s ease;
}
.foot-tools a:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
/* ── Motion ── */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes scan { 0%,100% { top: 6%; } 50% { top: 92%; } }
/* Timed to match .scan-line's own keyframe percentages so the icon visibly
"reacts" as the beam passes over its midpoint — brightens and glows
right as the line crosses it, dims again as it moves away. */
@keyframes doc-pulse {
0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); opacity: .82; }
50% { filter: brightness(1.45) drop-shadow(0 0 16px color-mix(in srgb, var(--brand) 55%, transparent)); opacity: 1; }
}
@keyframes shake { 0%,100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* ── Theme toggle FAB (thumb zone) ── */
.btn-theme {
position: fixed; z-index: 50;
right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
width: 54px; height: 54px; border-radius: 50%;
border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
cursor: pointer; display: grid; place-items: center;
transition: transform .35s cubic-bezier(.34,1.56,.64,1), border-color .2s ease;
}
.btn-theme:hover { transform: scale(1.12); border-color: var(--brand); }
.btn-theme:active { transform: scale(.88); }
/* Mirrors .btn-theme on the opposite corner — same size/z-index/shadow so
the two read as a matched pair rather than one being an afterthought,
and neither ever overlaps the other regardless of viewport width. */
.btn-feedback { left: 18px; right: auto; color: var(--brand); }
.btn-feedback:hover { border-color: var(--brand); }
.feedback-type-row { display: flex; gap: 8px; margin: 4px 0 10px; }
.feedback-type {
flex: 1; font: inherit; font-size: 13.5px; font-weight: 700;
padding: 9px 6px; border-radius: 10px; border: 1.5px solid var(--line);
background: var(--bg); color: var(--muted); cursor: pointer;
transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.feedback-type:hover { color: var(--ink); }
.feedback-type.is-active { color: var(--brand); border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.feedback-textarea {
width: 100%; min-height: 100px; font: inherit; font-size: 16px;
padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px;
background: var(--bg); color: var(--ink); resize: vertical;
margin-bottom: 4px;
}
.feedback-textarea:focus { border-color: var(--brand); outline: none; }
.feedback-shake-note {
font-size: 13px; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent);
border-radius: 10px; padding: 9px 12px; margin: 8px 0 0;
}
/* Opt-in row for shake-to-report. Only rendered on iOS, and only while the
permission hasn't been granted — see renderShakeOptin() in app.js. */
.shake-optin {
display: flex; align-items: center; gap: 12px;
margin: 12px 0 0; padding: 11px 13px;
border: 1px solid var(--line); border-radius: 12px;
background: color-mix(in srgb, var(--card) 70%, transparent);
}
.shake-optin b { display: block; font-size: 13.5px; color: var(--ink); }
.shake-optin small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.btn-mini-action {
flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 700;
color: var(--brand-ink); background: linear-gradient(135deg, var(--brand), var(--brand-2));
border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: transform .15s ease, opacity .15s ease;
}
.btn-mini-action:hover { transform: translateY(-1px); }
.btn-mini-action:active { transform: scale(.95); }
.btn-mini-action:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-theme svg { position: absolute; transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .35s ease; }
.ico-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.ico-moon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] .ico-sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] .ico-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .ico-sun { opacity: 1; transform: rotate(0) scale(1); }
:root:not([data-theme="dark"]) .ico-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
}
/* ── History drawer ── */
.topbar-left { display: flex; align-items: center; gap: 8px; }
.btn-history {
width: 40px; height: 40px; border-radius: 12px; border: 0;
background: none; color: var(--muted); cursor: pointer;
display: grid; place-items: center;
transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease;
}
.btn-history:hover { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--ink); transform: scale(1.08); }
.btn-history:active { transform: scale(.88); }
.drawer {
position: fixed; z-index: 60; top: 0; bottom: 0; left: 0;
width: min(320px, 86vw);
background: var(--card); box-shadow: 0 0 60px rgba(0, 0, 0, .35);
padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
transform: translateX(-105%);
transition: transform .45s cubic-bezier(.34,1.56,.64,1);
display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { font-size: 18px; }
.drawer-note { color: var(--muted); font-size: 13px; margin: 8px 0 12px; }
.btn-mini {
font: inherit; font-size: 14px; font-weight: 700; color: var(--brand);
background: color-mix(in srgb, var(--brand) 12%, transparent);
border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer;
transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.btn-mini:hover { transform: scale(1.07); }
.btn-mini:active { transform: scale(.9); }
.drawer-backdrop {
position: fixed; inset: 0; z-index: 55;
background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px);
opacity: 0; transition: opacity .3s ease;
}
.drawer-backdrop.show { opacity: 1; }
.history-list { list-style: none; overflow-y: auto; flex: 1; }
.history-list li {
display: flex; gap: 10px; align-items: center;
padding: 11px 10px; border-radius: 12px; cursor: pointer;
transition: background .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.history-list li:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); transform: translateX(3px); }
.history-list li:active { transform: scale(.97); }
.h-badge {
flex: none; min-width: 44px; height: 44px; border-radius: 12px; padding: 0 6px;
display: grid; place-items: center;
font-size: 12px; font-weight: 800;
background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand);
}
.h-meta { min-width: 0; }
.h-title { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-sub { font-size: 12px; color: var(--muted); }
.drawer-empty { color: var(--muted); font-size: 14.5px; text-align: center; margin-top: 30px; }
|