/* Μπλοκάκι — the Sum. Cobalt system with receipt moments. */

/* Sotto · Mint. Dark is the native look; the light variant keeps the same shapes with a deeper mint. */
:root {
  --bg: #f2f4f6;
  --surface: #ffffff;
  --ink: #0f141a;
  --muted: #5b6573;
  --line: #d9dee6;
  --hair: rgba(15, 20, 26, 0.12);
  --accent: #0b7d54;
  --on-accent: #ffffff;
  --soft: #dff5ea;
  --danger: #b4441f;
  --shadow: rgba(0, 0, 0, 0.14);
  --brand: #2242c8;
  --m0: #0b7d54; --on-m0: #ffffff;
  --m1: #b8771f; --on-m1: #ffffff;
  --m2: #4f86a8; --on-m2: #ffffff;
  --m3: #8a8074; --on-m3: #ffffff;
  /* The side pills under a new receipt: undo (grey) and correct (amber). */
  --undo-pill: #cfd3da; --undo-ink: #4a5260; --undo-label: #7d8490;
  --fix-pill: #e3a73a; --fix-ink: #6e4c0e; --fix-label: #a3721a;
  /* The receipt is paper: it keeps the Μπλοκάκι blue in both themes. */
  --paper: #fffefa;
  --r-ink: #111111;
  --r-muted: #555555;
  --r-accent: #2242c8;
  --r-soft: #e6eaf6;
  --sans: Manrope, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --num-font: 'Num Punct', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --cond: 'Sofia Sans Extra Condensed', 'Sofia Sans', system-ui, sans-serif;
  --mono: Cousine, 'Courier New', monospace;
  --top-inset: env(safe-area-inset-top, 0px);
  --bottom-inset: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t: 0.45s;
  --r: 14px;
  --r-lg: 22px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0c0f14;
  --surface: #161b23;
  --ink: #e8ecf1;
  --muted: #9aa3b2;
  --line: #273040;
  --hair: rgba(232, 236, 241, 0.12);
  --accent: #3ddc97;
  --on-accent: #0c0f14;
  --soft: #14261f;
  --danger: #ff9b82;
  --shadow: rgba(0, 0, 0, 0.5);
  --brand: #8fa3ff;
  --m0: #3ddc97; --on-m0: #0c0f14;
  --m1: #f2b233; --on-m1: #0c0f14;
  --m2: #7fb2e6; --on-m2: #0c0f14;
  --m3: #b3a897; --on-m3: #0c0f14;
  --undo-pill: #4a4a4f; --undo-ink: #0c0f14; --undo-label: #5f626a;
  --fix-pill: #d09c31; --fix-ink: #74510c; --fix-label: #9a6d22;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #0c0f14;
    --surface: #161b23;
    --ink: #e8ecf1;
    --muted: #9aa3b2;
    --line: #273040;
    --hair: rgba(232, 236, 241, 0.12);
    --accent: #3ddc97;
    --on-accent: #0c0f14;
    --soft: #14261f;
    --danger: #ff9b82;
    --shadow: rgba(0, 0, 0, 0.5);
    --brand: #8fa3ff;
    --m0: #3ddc97; --on-m0: #0c0f14;
    --m1: #f2b233; --on-m1: #0c0f14;
    --m2: #7fb2e6; --on-m2: #0c0f14;
    --m3: #b3a897; --on-m3: #0c0f14;
    --undo-pill: #4a4a4f; --undo-ink: #0c0f14; --undo-label: #5f626a;
    --fix-pill: #d09c31; --fix-ink: #74510c; --fix-label: #9a6d22;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }
html { background: var(--bg); } /* what shows past the edges (the status bar and home bar areas, a bounce) is the app's own colour */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
  transition: background-color 0.5s ease, color 0.5s ease;
}
body:has(.app:not([hidden])) { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
button { font-family: inherit; color: inherit; }
input, select, textarea { -webkit-user-select: text; user-select: text; }

.num { font-family: var(--num-font); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.num-l { font-size: 36px; line-height: 1; }
.num-xl { font-size: 46px; line-height: 1; letter-spacing: -0.03em; }
.meta { font-size: 13px; color: var(--muted); }
.hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.hint:empty { display: none; }
.form-error { margin: 0; min-height: 1.4em; text-align: center; font-size: 14px; font-weight: 600; color: var(--danger); }

/* ─── Motion ──────────────────────────────────────────────────────────── */

@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-in { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes receipt-in { from { opacity: 0; transform: translateY(30px) rotate(-1.6deg) scale(0.96); } to { opacity: 1; transform: rotate(-1.6deg); } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-down { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ripple-out { 0% { transform: scale(0.25); opacity: 0; } 12% { opacity: 1; } 72% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes rise-up { 0% { transform: translateY(100%); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-70%); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes moment-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { opacity: 0.5; } }
@keyframes ring { to { stroke-dashoffset: 88; } }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-9deg) scale(1.9); } }
@keyframes pill-in-left { from { transform: translateX(-100%); opacity: 0; } }
@keyframes pill-in-right { from { transform: translateX(100%); opacity: 0; } }

.screen.entering { animation: fade-up 0.5s var(--ease) backwards; }
.bubble-row.entering { animation: fade-up 0.55s var(--ease) backwards; }
.home-list.entering, .days.entering { animation: fade-up 0.5s var(--ease) backwards; }
dialog.sheet-bottom[open] { animation: sheet-up 0.5s var(--ease) backwards; }
dialog.sheet-top[open] { animation: sheet-down 0.5s var(--ease) backwards; }
dialog.sheet[open]::backdrop { animation: fade-in 0.5s ease backwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ─── Simple screens (loading, install, welcome) ─────────────────────── */

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: calc(var(--top-inset) + 24px) 20px calc(var(--bottom-inset) + 24px);
  animation: fade-in 0.3s ease backwards;
}
.status { margin: 0; font-size: 18px; font-weight: 600; text-align: center; }
.status.error { color: var(--danger); }
.intro { text-align: center; }
.intro h1 { margin: 0; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; }
.intro p { margin: 6px 0 0; font-size: 16px; color: var(--muted); }
.wordmark-static, .wordmark {
  font-family: var(--cond);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.wordmark-static { margin-bottom: 18px; }
.install-steps {
  width: min(360px, 100%);
  margin: 0;
  padding: 18px 18px 18px 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 17px;
  line-height: 1.4;
}
.install-steps strong { color: var(--accent); font-weight: 700; }
.share-icon { width: 20px; height: 20px; vertical-align: -3px; color: var(--accent); }
.install-where { display: block; font-size: 14px; color: var(--muted); }

.welcome-form { width: min(360px, 100%); display: flex; flex-direction: column; gap: 12px; }
.welcome-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.welcome-form input {
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
}
.welcome-form input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.or { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.welcome-hint { margin: 0; text-align: center; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* ─── Buttons ─────────────────────────────────────────────────────────── */

.button {
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.button:active, .icon-btn:active, .nav:active, .pill:active { transform: scale(0.97); }
.button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.button.soft { border-color: transparent; background: var(--soft); display: flex; align-items: center; justify-content: center; gap: 8px; height: auto; min-height: 52px; padding: 12px 18px; line-height: 1.25; text-align: center; }
.button.soft svg { flex: none; }
.button.danger { border-color: var(--danger); background: var(--surface); color: var(--danger); }
.button:disabled { opacity: 0.5; }
.icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease, background-color 0.2s ease, color 0.2s ease;
}
.icon-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.icon-btn.quiet { border: 0; background: transparent; width: 40px; height: 40px; }
.icon-btn.round { width: 40px; height: 40px; border-radius: 50%; }
.nav {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.12s ease;
}
.nav:disabled { opacity: 0.3; }
.actions { display: flex; gap: 8px; margin-top: 4px; }
.actions .button { flex: 1; padding: 0 6px; font-size: 15px; }

.segmented { display: flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.segmented button {
  flex: 1;
  height: 44px;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

.disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 4px;
  border: 0;
  border-top: 1px solid var(--hair);
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.disclosure-icon { display: grid; place-items: center; transition: transform 0.25s var(--ease); }
.disclosure[aria-expanded="true"] .disclosure-icon { transform: rotate(180deg); }
.section { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; animation: fade-up 0.45s var(--ease) backwards; }

/* ─── App shell ───────────────────────────────────────────────────────── */

/* The app scrolls as one page on the home: the hold zone fills the first screen, the month's list waits below. */
.app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  position: relative;
  z-index: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.app > * { flex-shrink: 0; }
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-top: calc(var(--top-inset) + 10px);
  padding: 0 16px;
}
.wordmark { border: 0; background: transparent; padding: 0; cursor: pointer; }
.top-actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 359px) { .top-actions { gap: 5px; } } /* four buttons beside the wordmark on the smallest phones */
/* The header stays quiet so the owl leads: grey icons and pill text (the chat button still lights up when on). */
.top-actions .icon-btn:not([aria-pressed="true"]), .people .pill { color: var(--muted); }
.people {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
}
/* The names show only when they fit whole beside the month pill; otherwise they wrap onto a second line, which is
   cut off, and the circles stay alone. */
.who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 0 8px;
  height: 44px;
  overflow: hidden;
  padding: 0 8px 0 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-width: 0;
}
.names { line-height: 44px; white-space: nowrap; }
.avatars { display: flex; align-items: center; flex: none; height: 44px; }
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  flex: none;
}
.avatar + .avatar { margin-left: -10px; }
/* The first circle sits on top of the second, the second on the third */
.avatars .avatar { position: relative; }
.avatars .avatar:nth-child(1) { z-index: 3; }
.avatars .avatar:nth-child(2) { z-index: 2; }
.avatars .avatar:nth-child(3) { z-index: 1; }
.avatar.sm { width: 30px; height: 30px; border-color: var(--surface); }
.pill {
  font-family: var(--num-font);
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  flex: none;
  transition: transform 0.12s ease;
}

.screen { display: flex; flex-direction: column; }

/* Home: just the moment (the receipt, when there is one). While it shows, the receipt (centred) and the side pills
   under it fill exactly the first screen, so the month's list starts below the fold. Above: the two top rows
   (top inset + 10 + 44 + 48 = 102). Below: the pills (78) and the gap under them, which on an iPhone 15 matches
   Kleanthis's example (128 pt, home indicator included). */
:root {
  --verdict-gap: calc(var(--bottom-inset) + clamp(28px, 11vh, 110px));
  --verdict-gap: calc(var(--bottom-inset) + clamp(28px, 11dvh, 110px));
}
.home { flex: none; }
.moment { display: none; position: relative; flex-direction: column; justify-content: center; padding: 16px 20px; }
.home.has-moment { min-height: calc(100vh - var(--top-inset) - 102px - 78px - var(--verdict-gap)); min-height: calc(100dvh - var(--top-inset) - 102px - 78px - var(--verdict-gap)); }
.home.has-moment .moment { display: flex; flex: 1 0 auto; }
.moment .receipt { width: 100%; animation: receipt-in 0.7s var(--ease) backwards; }

/* The month's list, below the button */
.list-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  margin: 0 16px calc(var(--bottom-inset) + 12px);
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.month-list { display: flex; flex-direction: column; padding-bottom: calc(var(--bottom-inset) + 28px); }
/* The month's header sticks under the status bar while its rows scroll by. Once it sticks (.stuck, ledger.js), a strip
   of background covers the status bar above it and the rows fade out under its lower edge. */
.month-list { scroll-margin-top: var(--top-inset); }
.list-head {
  position: sticky;
  top: var(--top-inset);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 10px;
  padding: 4px 0;
  background: var(--bg);
  transition: background-color 0.5s ease;
}
.list-head::before, .list-head::after { content: ''; position: absolute; left: -16px; right: -16px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
.list-head::before { bottom: 100%; height: var(--top-inset); background: var(--bg); }
.list-head::after { top: 100%; height: 14px; background: linear-gradient(var(--bg), transparent); }
.list-head.stuck::before, .list-head.stuck::after { opacity: 1; }
.list-title { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 14px; font-weight: 700; color: var(--muted); }
.list-title .num { font-size: 24px; color: var(--ink); }

/* Chat view */
.chat { flex: 1 0 0; min-height: 0; overflow: hidden; }
.feed {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 16px 12px;
  -webkit-overflow-scrolling: touch;
}
.feed-day { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); margin: 6px 0 2px; }
.bubble-row { display: flex; }
.bubble-row.mine { justify-content: flex-end; }
.bubble-row:not(.mine) .bubble { border-radius: 18px 18px 18px 4px; }
.bubble {
  max-width: 80%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 18px 18px 4px 18px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.bubble:active { transform: scale(0.98); }
.mine .bubble { background: var(--soft); border-color: var(--soft); }
.bubble-top { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.bubble-desc { font-size: 16px; font-weight: 600; }
.bubble-amount { font-size: 17px; }
.bubble-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Day-grouped rows (the month's list) */
.days {
  margin: 0 16px;
  padding: 2px 14px 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.day-head {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  border-top: 1px solid var(--hair);
}
.day-head:first-child { border-top: 0; }
.empty { padding: 24px 0; text-align: center; font-size: 14px; color: var(--muted); }
.row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.row:active { opacity: 0.6; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-desc { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub.check { color: var(--danger); }
.row-amount { font-size: 16px; }
.split { display: flex; height: 10px; margin: 10px 20px 0; overflow: hidden; border-radius: 999px; }
.split span { display: block; height: 100%; transition: width 0.5s var(--ease); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 20px 0; font-size: 13px; font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ─── Capture: the owl stage (tap to talk) ────────────────────────────── */
/* Measured from Kleanthis's mockup (375-pt screen): the box is full width minus 16 on each side, radius 28, and its
   bottom edge stays put while its top moves: 179 tall idle, 233 listening, 150 processing. The owl video's bottom edge
   sits on the box's bottom line and its full frame spans the screen width. The dome (125 wide) sits in front of the owl;
   while listening/processing it sinks 33 and melts into an 8-pt band along the bottom. */

.capture {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  margin: 4px 16px 4px;
  position: relative;
}
/* On the home the stage fills the first screen: what's above (rows) and below (handle) is subtracted. */
.capture:not(.compact):not(.gone) { min-height: calc(100vh - var(--top-inset) - var(--bottom-inset) - 158px); min-height: calc(100dvh - var(--top-inset) - var(--bottom-inset) - 158px); }
.hold-text { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: clamp(12px, 7dvh, 60px) 8px 12px; text-align: center; }
.hold-text strong { font-size: 27px; font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); transition: color 0.5s ease; }
.hold-text span { font-size: 13px; font-weight: 500; color: var(--muted); }
.hold-text span:empty { display: none; }
/* What waits to be sent (capture.js «The outbox»): a quiet pill under the text; tap to try now. */
.outbox-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: 600 12.5px/1.2 var(--sans); cursor: pointer; }
.outbox-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fix-pill); flex: none; }
.outbox-pill.offline::before { background: var(--muted); }
.outbox-pill[hidden] { display: none; }
.capture.holding .outbox-pill, .capture.working .outbox-pill { display: none; }
.capture.compact .outbox-pill { padding: 4px 10px; font-size: 11.5px; }

.stage {
  --box-h: 179px;
  --band: 1px;
  --box-bg: var(--soft);
  --box-line: var(--accent);
  --band-color: var(--accent);
  --dome: var(--accent);
  --dome-ink: #2f9a6b;
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation; /* a swipe scrolls the page; a still finger records (see capture.js) */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Light theme idle: a pale mic on the deep-mint dome. :where() keeps this below the listening/thinking rules. */
:where(:root[data-theme="light"]) .stage { --dome-ink: #dff5ea; }
@media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .stage { --dome-ink: #dff5ea; } }
.stage > * { pointer-events: none; }

.stage-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--band));
  height: calc(var(--box-h) + var(--band));
  border: 1px solid var(--box-line);
  border-bottom: var(--band) solid var(--band-color);
  border-radius: 28px;
  background: var(--box-bg);
  box-shadow: inset 0 0 0 transparent;
  overflow: hidden;
  transition: height 0.55s var(--ease), bottom 0.35s var(--ease), border-color 0.5s ease, border-bottom-width 0.35s var(--ease), background-color 0.5s ease, box-shadow 0.5s ease;
}

/* The owl: a still on the home, then the intro and the loop (owl.js). Frame width = screen width; the element is the
   crop of the frame that the owl ever occupies (1308×1472 of 1560×1600), so it is centred 46% from its left. */
.owl {
  position: relative;
  display: block;
  left: 50%;
  width: min(calc(83.85% + 26.8px), calc((100dvh - var(--top-inset) - var(--bottom-inset) - 290px) * 0.8886));
  aspect-ratio: 1308 / 1472;
  transform: translateX(-46.02%);
}
.owl > img, .owl > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.owl-intro, .owl-loop { opacity: 0; }
.owl[data-phase="intro"] .owl-intro, .owl[data-phase="loop"] .owl-loop { opacity: 1; }
.owl[data-phase="intro"] .owl-still, .owl[data-phase="loop"] .owl-still { opacity: 0; }

/* The dome: a circle clipped at the box's bottom; its fillets (::before/::after) melt it into the band when active. */
.dome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--band));
  height: 170px;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  transition: bottom 0.35s var(--ease);
}
.dome-ball {
  position: absolute;
  left: 50%;
  width: 125px;
  height: 125px;
  margin-left: -62.5px;
  bottom: calc(var(--band) - 47.2px);
  border-radius: 50%;
  background: var(--dome);
  transition: translate 0.5s var(--ease), background-color 0.5s ease, bottom 0.35s var(--ease), scale 0.2s ease;
}
.stage:active .dome-ball { scale: 0.97; }
/* The fillets (22 px round) meet the ball at 33.28 px from its top (where the two circles touch) and the band 11.72 px
   lower; above that point they would stick out past the ball. Their colour is a background colour under a mask, so it
   fades with the ball's; they show only once the ball has sunk, and leave at once when it starts to rise. */
.dome-ball::before, .dome-ball::after {
  content: '';
  position: absolute;
  top: 33.28px;
  width: 22px;
  height: 11.72px;
  background-color: var(--dome);
  opacity: 0;
  transition: opacity 0s, background-color 0.5s ease;
}
.dome-ball::before { left: -12.2px; -webkit-mask: radial-gradient(circle at 0 -10.28px, transparent 21.5px, #000 22px); mask: radial-gradient(circle at 0 -10.28px, transparent 21.5px, #000 22px); }
.dome-ball::after { left: 115.2px; -webkit-mask: radial-gradient(circle at 100% -10.28px, transparent 21.5px, #000 22px); mask: radial-gradient(circle at 100% -10.28px, transparent 21.5px, #000 22px); }
/* Idle, the dome breathes: a circle of the same colour behind it slowly grows and shrinks back (the mic stays still).
   Hidden at once while recording or thinking, while pressed, and in the chat view's small bar; back only once the ball
   has risen again. */
.dome::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 125px;
  height: 125px;
  margin-left: -62.5px;
  bottom: calc(var(--band) - 47.2px);
  border-radius: 50%;
  background-color: var(--dome);
  animation: breathe 3s ease-in-out infinite;
  transition: opacity 0.4s ease 0.45s, background-color 0.5s ease;
}
@keyframes breathe { 50% { scale: 1.072; } }
body[data-cap="listening"] .dome::before, body[data-cap="thinking"] .dome::before,
.stage:active .dome::before, .capture.compact .dome::before { opacity: 0; animation-play-state: paused; transition: opacity 0s, background-color 0.5s ease; }
/* The mic: 38 px on the home (was 46; the circle keeps its size). While listening/processing it is scaled to the same
   29.4 px as the mockup, so those screens don't change. */
.dome-icon {
  position: absolute;
  left: 50%;
  top: 52.8px;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  display: grid;
  place-items: center;
  color: var(--dome-ink);
  transition: translate 0.5s var(--ease), scale 0.5s var(--ease), color 0.5s ease;
}
.dome-icon svg { grid-area: 1 / 1; width: 38px; height: 38px; transition: opacity 0.3s ease; }
.dome-icon .spinner { opacity: 0; }
.dome-icon .spinner g { transform-origin: 12px 12px; animation: spin 0.9s steps(8) infinite; }

/* Background shapes inside the box, behind the owl */
.fx { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.fx i { position: absolute; display: block; }
.fx-ripple i {
  left: 50%;
  bottom: -230px;
  width: 460px;
  height: 460px;
  margin-left: -230px;
  border-radius: 50%;
  background: rgba(196, 66, 70, 0.14);
  animation: ripple-out 2.7s cubic-bezier(0.25, 0.6, 0.4, 1) infinite;
}
.fx-ripple i:nth-child(2) { animation-delay: 0.9s; }
.fx-ripple i:nth-child(3) { animation-delay: 1.8s; }
.fx-rise i {
  left: -4%;
  bottom: 0;
  width: 108%;
  height: 190px;
  background: rgba(146, 52, 176, 0.2);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation: rise-up 3s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
}
.fx-rise i:nth-child(2) { animation-delay: 1s; }
.fx-rise i:nth-child(3) { animation-delay: 2s; }
body:not([data-cap="listening"]) .fx-ripple i, body:not([data-cap="thinking"]) .fx-rise i { animation-play-state: paused; }

/* The three moments. Listening and processing look the same in both themes. */
body[data-cap="listening"], body[data-cap="thinking"] {
  --ink: #ffffff;
  --muted: #9aa3b2;
  --line: rgba(255, 255, 255, 0.1);
  --hair: rgba(255, 255, 255, 0.1);
  --accent: #3ddc97;
  --on-accent: #0c0f14;
  --shadow: rgba(0, 0, 0, 0.5);
  --m0: #3ddc97; --on-m0: #0c0f14;
  --m1: #f2b233; --on-m1: #0c0f14;
  --m2: #7fb2e6; --on-m2: #0c0f14;
  --m3: #b3a897; --on-m3: #0c0f14;
  color-scheme: dark;
}
body[data-cap="listening"] { --bg: #502025; --surface: #56292e; --soft: #3d1a1e; }
body[data-cap="thinking"] { --bg: #3e1d4e; --surface: #442657; --soft: #2f1a3c; }
body[data-cap="listening"] .stage { --box-h: 233px; --band: 8px; --box-bg: #2f0f10; --box-line: #d97a7d; --band-color: #c44246; --dome: #c44246; --dome-ink: #3a1a1f; }
body[data-cap="thinking"] .stage { --box-h: 150px; --band: 8px; --box-bg: #20102d; --box-line: #ac7cd2; --band-color: #9234b0; --dome: #9234b0; --dome-ink: #2a0f33; }
body[data-cap="listening"] .fx-ripple, body[data-cap="thinking"] .fx-rise { opacity: 1; }
body[data-cap="listening"] .stage-box, body[data-cap="thinking"] .stage-box { box-shadow: inset 0 -1px 0 var(--box-line); } /* thin light line above the band */
body:not([data-cap="thinking"]) .dome-icon .spinner g { animation-play-state: paused; }
body[data-cap="listening"] .dome-ball, body[data-cap="thinking"] .dome-ball { translate: 0 32.8px; }
body[data-cap="listening"] .dome-ball::before, body[data-cap="listening"] .dome-ball::after,
body[data-cap="thinking"] .dome-ball::before, body[data-cap="thinking"] .dome-ball::after { opacity: 1; transition: opacity 0.2s ease 0.3s, background-color 0.5s ease; }
body[data-cap="listening"] .dome-icon, body[data-cap="thinking"] .dome-icon { translate: 0 -25.6px; scale: 0.775; }
body[data-cap="thinking"] .dome-icon .mic { opacity: 0; }
body[data-cap="thinking"] .dome-icon .spinner { opacity: 1; }

/* Chat view: a short bar, no owl */
.capture.compact { flex: 0 0 auto; margin-bottom: calc(var(--bottom-inset) + 16px); }
.capture.compact .hold-text { flex: none; padding: 4px 8px 8px; gap: 2px; }
.capture.compact .hold-text strong { font-size: 16px; }
.capture.compact .hold-text span { font-size: 12px; }
.capture.compact .owl { display: none; }
.capture.compact .stage { height: 84px; }
body .capture.compact .stage { --box-h: 84px; }
.capture.compact .dome-ball { scale: 0.6; }

/* While the receipt shows, the stage and its text step aside and the side pills take their place, edge to edge */
.capture.gone { justify-content: flex-start; margin-left: 0; margin-right: 0; }
.capture.gone:not(.compact) { margin-top: 0; margin-bottom: 0; }
.capture.gone .stage, .capture.gone .hold-text { display: none; }

/* ─── The side pills: undo (left) and correct (right) ───────────────────── */
/* From Kleanthis's example (iPhone, 393 pt): 78 tall, 68 showing, flat against the screen edge, round towards the
   middle, the icon centred in the round end; the label 15 pt from the pill. Dragging the receipt towards a pill
   stretches it and lights its label (--pull-l / --pull-r, 0 → 1, set by capture.js). */
.verdict {
  --pull-l: 0;
  --pull-r: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 78px;
}
.capture.gone .verdict { display: flex; }
.capture.gone:not(.compact) .verdict { margin-bottom: var(--verdict-gap); }
.side-pill {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 78px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  animation: pill-in-left 0.5s var(--ease) 0.2s backwards;
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
}
.side-pill.fix { text-align: right; animation-name: pill-in-right; }
.side-pill-shape {
  display: grid;
  align-items: center;
  flex: none;
  width: calc(68px + var(--pull-l) * 22px);
  height: 78px;
  padding-right: 26px;                  /* puts the 26-px icon in the centre of the round end */
  justify-content: end;
  border-radius: 0 39px 39px 0;
  background: var(--undo-pill);
  color: var(--undo-ink);
  transition: width 0.3s var(--ease), filter 0.2s ease;
}
.side-pill.fix .side-pill-shape {
  width: calc(68px + var(--pull-r) * 22px);
  padding: 0 0 0 26px;
  justify-content: start;
  border-radius: 39px 0 0 39px;
  background: var(--fix-pill);
  color: var(--fix-ink);
}
.side-pill-shape svg { display: block; }
.side-pill-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.15; color: var(--undo-label); filter: brightness(calc(1 + var(--pull-l) * 0.9)); transition: filter 0.3s ease; }
.side-pill.fix .side-pill-text { align-items: flex-end; color: var(--fix-label); filter: brightness(calc(1 + var(--pull-r) * 0.9)); }
.side-pill-text strong { font-size: 15px; font-weight: 800; letter-spacing: -0.005em; white-space: nowrap; }
.side-pill-text small { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.side-pill:active .side-pill-shape { filter: brightness(1.18); }
.verdict.pulling .side-pill-shape, .verdict.pulling .side-pill-text { transition: none; }
.capture.decided .side-pill { animation: none; opacity: 0; pointer-events: none; }
.capture.decided .side-pill.undo { transform: translateX(-45%); }
.capture.decided .side-pill.fix { transform: translateX(45%); }

/* iPhone haptic trick: an off-screen switch we flip programmatically */
.haptic-switch { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ─── The receipt (a captured entry) ─────────────────────────────────── */

.receipt {
  background: var(--paper);
  border-top: 2px dashed var(--r-ink);
  border-bottom: 2px dashed var(--r-ink);
  box-shadow: 0 18px 40px var(--shadow);
  transform: rotate(-1.6deg);
  padding: 14px 18px 16px;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  color: var(--r-ink);
  touch-action: pan-y;
  cursor: grab;
  animation: receipt-in 0.7s var(--ease) backwards;
  transition: transform 0.3s var(--ease);
}
.stack .receipt { position: absolute; top: 30px; left: 0; right: 0; z-index: 2; }
.feed .receipt-wrap { position: relative; display: flex; justify-content: flex-end; margin: 4px 0 12px; }
.feed .receipt { width: 86%; transform: rotate(-1.4deg); }
/* Undo: the receipt leaves to the left and «Αναιρέθηκε» stays behind in its place (capture.js, UNDONE_MS) */
.moment .receipt, .feed .receipt { position: relative; z-index: 1; }
.undone {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
  pointer-events: none;
  animation: undone-in 0.4s var(--ease) 0.08s backwards;
  transition: opacity 0.3s ease;
}
.undone.fading { opacity: 0; }
@keyframes undone-in { from { opacity: 0; transform: scale(0.94); } }
/* The entrance runs once: once it has ended (or a finger takes the receipt) it is switched off for good, so letting go
   can never replay it and flash the receipt back in its old place. */
.receipt.entered, .moment .receipt.entered { animation: none; }
.receipt.dragging { transition: none; }
.receipt.leaving { transition: transform 0.4s ease, opacity 0.4s ease; opacity: 0; transform: translateY(-16px) rotate(-1.6deg) scale(0.98); }
.receipt-head { text-align: center; font-size: 13px; color: var(--r-muted); }
.rrow { display: flex; align-items: baseline; gap: 6px; }
.rrow .lead { flex: 1; border-bottom: 2px dotted var(--r-ink); opacity: 0.45; transform: translateY(-4px); }
.rrow .val { white-space: nowrap; }
.receipt-heard { margin: 4px 0 0; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--r-muted); }
.receipt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 2px dotted var(--r-ink);
}
.receipt-countdown { display: inline-flex; align-items: center; gap: 10px; color: var(--r-accent); font-weight: 700; font-size: 14px; white-space: nowrap; }
.ring { width: 36px; height: 36px; flex: none; }
.ring circle { fill: none; stroke-width: 4; }
.ring .track { stroke: var(--r-soft); }
.ring .arc {
  stroke: var(--r-accent);
  stroke-linecap: round;
  stroke-dasharray: 88;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: ring 5s linear forwards;
}
/* The stamp lands only when the entry settles (nothing faint while counting down). */
.stamp {
  display: none;
  padding: 4px 10px;
  border: 2px solid var(--r-accent);
  border-radius: 4px;
  color: var(--r-accent);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-4deg) scale(1.08);
}
.receipt.settled .receipt-countdown { display: none; }
.receipt.settled .stamp { display: inline-block; animation: stamp-in 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) backwards; }
.receipt-undo {
  border: 0;
  background: transparent;
  padding: 8px 6px;
  color: var(--r-accent);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  display: none;
}
.receipt.settled .receipt-undo { display: inline-block; }

/* ─── Sheets ──────────────────────────────────────────────────────────── */

.sheet {
  width: 100%;
  max-width: 480px;
  border: 0;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
}
.sheet::backdrop { background: rgba(10, 12, 16, 0.5); }
.sheet-top { margin: 0 auto auto; border-bottom: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 20px 50px var(--shadow); }
.sheet-bottom { margin: auto auto 0; border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -20px 50px var(--shadow); }
.sheet-body {
  max-height: 90dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px calc(var(--bottom-inset) + 20px);
}
.sheet-top .sheet-body { padding-top: calc(var(--top-inset) + 14px); }
.sheet-body h3 { margin: 0; font-size: 19px; font-weight: 800; }
/* ‹ month › on the left (the title keeps a fixed width so the arrows never move under the finger), X on the right */
.month-head { display: flex; align-items: center; gap: 6px; padding: 0; }
.month-head h2 { flex: none; width: 10.5em; margin: 0; text-align: center; font-size: 17px; font-weight: 700; }
.month-head .sheet-x { margin-right: auto; flex: none; } /* back arrow on the left; the month and its arrows on the right */

/* The drawer's top: an arrow to tap, and the handle to push the drawer down by (app.js) */
.sheet-grab {
  display: grid;
  place-items: center;
  flex: none;
  width: 100%;
  height: 42px;
  padding: 8px 0 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}
.sheet-grab + .sheet-body { padding-top: 0; max-height: calc(90vh - 42px); max-height: calc(90dvh - 42px); overscroll-behavior-y: contain; }
dialog.sheet.closing::backdrop { opacity: 0; transition: opacity 0.28s ease; }
.sheet-body .drawer-heading { margin: 22px 4px 2px; }
.theme-field { padding-top: 12px; border-top: 1px solid var(--hair); }
.sheet-body .num-xl { margin-top: 4px; }
/* The month sheet: the summary (down to who spent what) and the «Όλες οι κινήσεις» button stay put; only the
   categories between them scroll. */
#month-sheet .sheet-body { overflow: hidden; padding-bottom: 6px; max-height: calc(90vh - 30px); max-height: calc(90dvh - 30px); }
/* Its handle, under the button: tap it, or push the sheet up from it (or from the summary), to close (app.js) */
.sheet-pull { display: grid; place-items: center; width: 100%; height: 30px; padding: 0 0 6px; border: 0; background: transparent; cursor: grab; touch-action: none; }
.sheet-pull .handle { margin: 0; }
#month-sheet .sheet-body > * { flex-shrink: 0; }
#month-sheet .sheet-body > .sheet-scroll {
  flex: 0 1 auto;
  min-height: 0;
  margin-top: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--hair);
}
.sheet-scroll > .cats:first-child { margin-top: 0; border-top: 0; }
/* While more categories wait below, the list fades out at its lower edge (.more, ledger.js) */
#month-sheet .sheet-scroll.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent); mask-image: linear-gradient(#000 calc(100% - 32px), transparent); }
.sheet-scroll > :last-child { padding-bottom: 4px; }
.sheet-body .split { margin: 6px 0 0; }
.sheet-body .legend { margin: 8px 0 0; }
.cats { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hair); }
.cat { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cat-name { width: 112px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-bar { flex: 1; height: 8px; background: var(--soft); overflow: hidden; border-radius: 999px; }
.cat-bar span { display: block; height: 100%; transition: width 0.5s var(--ease); }
.cat-amount { width: 72px; text-align: right; font-size: 14px; }
.budget-inline { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; margin-top: -2px; }
.budget-inline.over { color: var(--danger); }
.budget-bar { display: block; height: 6px; background: var(--soft); overflow: hidden; border-radius: 999px; }
.budget-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.9s var(--ease); }
.budget-inline.over .budget-bar span { background: var(--danger); }
.handle { width: 44px; height: 5px; margin: 6px auto 0; border-radius: 999px; background: var(--hair); }

.sheet-body label, .sheet-body .field, .page-body label, .page-body .field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.sheet-body input, .sheet-body select, .page-body input, .shop-field input {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.sheet-body input:focus-visible, .sheet-body select:focus-visible, .page-body input:focus-visible, .shop-field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
/* minmax(0, …): a field may never push into its neighbour (iPhone's date field is wider than its column otherwise).
   The date field is a flex box, as the iPhone's own is, so the date sits in its middle both ways. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sheet-body select { min-width: 0; max-width: 100%; }
.sheet-body input[type="date"] { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; line-height: normal; text-align: center; }
.sheet-body input[type="date"]::-webkit-date-and-time-value { margin: 0; text-align: center; }
.field-row { display: flex; gap: 8px; }
.field-row input { flex: 1; }
.field-row .button { flex: none; padding: 0 18px; height: 46px; border-radius: var(--r); }

.family-members { margin: 0 0 4px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.family-members li { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.family-members .mail { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
.code-box { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: var(--soft); border-radius: var(--r-lg); text-align: center; }
.code-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.code-value { font-size: 28px; font-weight: 800; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; }
.code-hint { font-size: 13px; color: var(--muted); }

/* Lists you can reorder (drag ≡) and swipe left to change or delete: categories, accounts */
.lrows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.lrow { position: relative; overflow: hidden; touch-action: pan-y; }
.lrow + .lrow { border-top: 1px solid var(--hair); }
.lrow-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 12px 0 6px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.25s var(--ease);
}
.lrow.dragging-x .lrow-inner { transition: none; }
.lrow.open .lrow-inner { transform: translateX(calc(-1 * var(--reveal, 168px))); }
.lrow-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grip { display: grid; place-items: center; width: 36px; height: 48px; color: var(--muted); cursor: grab; touch-action: none; flex: none; }
.lrow.lifted { z-index: 3; }
.lrow.lifted .lrow-inner { background: var(--soft); box-shadow: 0 10px 24px var(--shadow); transition: none; }
.lrow-actions { position: absolute; inset: 0 0 0 auto; display: flex; width: var(--reveal, 168px); }
.lrow-actions button { flex: 1; border: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.lrow-actions .edit { background: var(--soft); color: var(--accent); }
.lrow-actions .del { background: var(--danger); color: #ffffff; }
.lrow-actions .paint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--soft); color: var(--ink); border-right: 1px solid var(--hair); }
/* Changing a row: the rename box and a category's colours open right under the row, inside the list */
.lrows > .list-edit { border-radius: 0; border-top: 1px solid var(--hair); }
.list-edit .hint { text-align: center; }
.color-note { flex-basis: 100%; text-align: center; }
.color-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px 10px; border-top: 1px solid var(--hair); background: var(--soft); animation: fade-up 0.3s var(--ease) backwards; }
.swatch { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; touch-action: manipulation; transition: transform 0.12s ease, box-shadow 0.2s ease; }
.swatch:active { transform: scale(0.9); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--soft), 0 0 0 5px var(--ink); }
.sub-block { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hair); }
.sub-title { font-size: 12px; font-weight: 700; color: var(--muted); }
.list-edit { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-lg); background: var(--soft); animation: fade-up 0.35s var(--ease) backwards; }
.list-edit .field-row .button { flex: 1; padding: 0 10px; font-size: 15px; }
.list-edit .field-row .button.primary { flex: none; padding: 0 18px; }

/* Theme picker: text + two icons */
.segmented button svg { display: block; margin: 0 auto; }

/* Photos in the avatars. In the drawer your own circle is a button: a faint camera until you add a photo; then the
   photo itself, which you tap to change it. */
img.avatar { object-fit: cover; padding: 0; }
.avatar.md { width: 40px; height: 40px; font-size: 15px; border-color: var(--surface); }
.avatar-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -2px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; touch-action: manipulation; transition: transform 0.12s ease; }
.avatar-btn:active { transform: scale(0.94); }
.avatar-btn .avatar { pointer-events: none; }
.avatar .cam { display: grid; place-items: center; opacity: 0.5; }

/* Income */
.income-block { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hair); }
.income-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 700; color: var(--muted); }
.income-head .num { font-size: 18px; color: var(--accent); }
.arrow { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--muted); flex: none; }
.arrow.in { color: var(--accent); }
.row-amount.in, .bubble-amount.in { color: var(--accent); }
.arrow.save, .row-amount.save, .bubble-amount.save, .search-sums .num.save { color: var(--m2); }
.savings-block .income-head .num { color: var(--m2); }
.savings-block .budget-bar span { background: var(--m2); }
.amount-wrap { display: inline-flex; align-items: center; gap: 4px; }

/* "Is that you?" when joining with a name that already exists */
.rejoin { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--soft); animation: fade-up 0.4s var(--ease) backwards; }
.rejoin p { margin: 0; font-size: 15px; line-height: 1.4; text-align: center; color: var(--ink); }

/* The end of the drawer: erase everything, and where the data lives */
.danger-zone { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--hair); }
.danger-zone .button { font-size: 15px; }
.danger-zone #delete-me { margin-top: 6px; }
.legal { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; text-align: center; color: var(--muted); }

/* Feedback: a note to Kleanthis (saved in the database, then emailed by api/feedback) */
.feedback-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-lg); background: var(--soft); animation: fade-up 0.35s var(--ease) backwards; }
.feedback-form .actions { margin-top: 0; }
.sheet-body textarea {
  width: 100%;
  min-height: 118px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  resize: vertical;
}
.sheet-body textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

/* "Σχετικά με εμάς": a row that opens the about page */
.link-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; margin-top: 2px; padding: 0 4px; border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; touch-action: manipulation; }
.link-row svg { flex: none; color: var(--muted); }
.link-row .chev { margin-left: auto; }

/* The about page: full screen over the drawer */
dialog.page {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 480px;
  height: 100%;
  max-height: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}
dialog.page[open] { display: flex; flex-direction: column; animation: page-in 0.4s var(--ease) backwards; }
dialog.page::backdrop { background: var(--bg); }
@keyframes page-in { from { transform: translateX(28px); opacity: 0; } }
.page-bar { display: flex; align-items: center; gap: 8px; flex: none; padding: calc(var(--top-inset) + 10px) 16px 8px; }
.page-bar h2 { flex: 1; margin: 0; text-align: center; font-size: 17px; font-weight: 800; }
.page-bar-end { flex: none; width: 40px; }
.page-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 6px 22px calc(var(--bottom-inset) + 28px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.about-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 4px; text-align: center; }
.about-hero .wordmark-static { margin: 0; font-size: 42px; }
.about-hero p { margin: 0; font-size: 16px; color: var(--muted); }
.badge { display: inline-block; margin-top: 10px; padding: 5px 12px; border: 1px solid var(--m1); border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: var(--m1); }
.about-section h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.about-section p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); -webkit-user-select: text; user-select: text; }
.about-section .button { width: 100%; margin-top: 14px; }
.about-version { margin: 0; text-align: center; font-size: 12.5px; color: var(--muted); }

/* Closed beta: version and a plain warning, under the GDPR line */
.beta-note { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); text-align: center; }
.beta-note strong { font-size: 14px; font-weight: 800; color: var(--ink); }
.beta-note span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* ─── Search ──────────────────────────────────────────────────────────── */
/* A page over the app whose top row lines up with the app's own: the field grows out of the search button until it
   fills the whole row, over the wordmark and the chat button. The page follows the part of the screen the keyboard
   leaves free (--vv-top / --vv-h, set in ledger.js), so the results end just above it. */
dialog.search {
  position: fixed;
  inset: var(--vv-top, 0px) 0 auto;
  width: 100%;
  max-width: 480px;
  height: var(--vv-h, 100%);
  max-height: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
}
dialog.search[open] { display: flex; flex-direction: column; }
dialog.search::backdrop { background: var(--bg); }
dialog.search[open]::backdrop { animation: fade-in 0.25s ease backwards; }
dialog.search.closing::backdrop { opacity: 0; transition: opacity 0.22s ease; }
.search-bar { display: flex; align-items: center; gap: 10px; flex: none; height: 44px; margin-top: calc(var(--top-inset) + 10px); padding: 0 16px; }
.search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  clip-path: inset(0 round 999px);
  transition: border-color 0.2s ease;
}
.search-field:focus-within { border-color: var(--accent); }
dialog.search[open] .search-field { animation: search-grow 0.32s var(--ease) backwards; }
/* The search button's circle inside the full-width field: 40 px wide, --from-right from its right end (the buttons
   after it and their gaps; measured by openSearch in ledger.js) */
dialog.search.closing .search-field { clip-path: inset(0 var(--from-right, 150px) 0 calc(100% - var(--from-right, 150px) - 40px) round 999px); opacity: 0; transition: clip-path 0.22s ease, opacity 0.22s ease; }
@keyframes search-grow { from { clip-path: inset(0 var(--from-right, 150px) 0 calc(100% - var(--from-right, 150px) - 40px) round 999px); } }
.search-glass { display: grid; place-items: center; flex: none; color: var(--muted); }
.search-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16 px or more, or the iPhone zooms in on the field */
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
}
.search-field input::placeholder { color: var(--muted); font-weight: 500; }
.search-field input::-webkit-search-cancel-button, .search-field input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-x {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
dialog.search[open] .search-x { animation: fade-in 0.2s ease 0.2s backwards; }
.search-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 0 calc(var(--bottom-inset) + 20px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
dialog.search[open] .search-body { animation: fade-in 0.3s ease backwards; }
dialog.search.closing .search-body { opacity: 0; transition: opacity 0.18s ease; }
.search-hint { margin: 10px 28px 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--muted); }
.search-hint:empty { display: none; }
.search-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 20px 10px; font-size: 14px; font-weight: 700; color: var(--muted); }
.search-sums { display: flex; gap: 10px; }
.search-sums .num { font-size: 18px; color: var(--ink); }
.search-sums .num.in { color: var(--accent); }
.row-said { font-size: 12px; font-style: italic; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── The assistant (the owl button) ──────────────────────────────────── */
/* The app follows the part of the screen the keyboard leaves free (--app-h / --app-top, app.js), so the question box
   sits right above the keyboard. */
.app { height: var(--app-h, 100dvh); }
html.kb .app { translate: 0 var(--app-top, 0px); } /* only while a keyboard is up: a transform would pin fixed layers to the scrolling app */
.assistant { flex: 1 0 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ai-feed { gap: 10px; }
.ai-row { align-items: flex-end; gap: 6px; }
.ai-owl { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--soft); color: var(--accent); }
.ai-bubble { max-width: 84%; font-size: 15px; line-height: 1.45; cursor: default; -webkit-user-select: text; user-select: text; }
.ai-bubble:active { transform: none; }
.ai-answer { background: var(--surface); }
.ai-answer strong { font-weight: 800; }
.ai-li { display: block; position: relative; padding-left: 14px; }
.ai-li::before { content: '•'; position: absolute; left: 2px; color: var(--accent); }
.ai-note { align-self: center; padding: 6px 12px; border-radius: 999px; background: var(--soft); color: var(--accent); font-size: 12.5px; font-weight: 700; }
.ai-cards { display: flex; flex-direction: column; gap: 6px; margin-left: 34px; }
.days.ai-card { margin: 0; padding: 0 12px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0 34px; }
.ai-chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; touch-action: manipulation; }
.ai-chip:active { transform: scale(0.97); }
.ai-typing { display: flex; gap: 4px; padding: 14px 16px; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulse 1s ease-in-out infinite; }
.ai-typing i:nth-child(2) { animation-delay: 0.15s; }
.ai-typing i:nth-child(3) { animation-delay: 0.3s; }
.ai-clear { align-self: center; padding: 8px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ai-form { display: flex; align-items: flex-end; gap: 8px; flex: none; padding: 8px 16px calc(var(--bottom-inset) + 12px); border-top: 1px solid var(--hair); background: var(--bg); }
html.kb .ai-form { padding-bottom: 8px; }
#ai-input { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.35; resize: none; }
#ai-input:focus-visible { outline: 0; border-color: var(--accent); }
.icon-btn.ai-send { flex: none; width: 44px; height: 44px; border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* ─── The drawer and its pages (Ρυθμίσεις, Οικογένεια) ─────────────────── */
/* The drawer: the family card, two links, the beta note, «Πρόβλημα ή ιδέα;», and «Διαγραφή όλων» at the bottom. */
.sheet-body.drawer { min-height: min(78dvh, 720px); gap: 12px; }
.family-card {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 88px; padding: 16px 18px;
  border: 0; border-radius: var(--r-lg); background: var(--soft); color: var(--ink);
  font: inherit; font-size: 17px; font-weight: 700; text-align: left; cursor: pointer; touch-action: manipulation;
}
.family-card .chev { flex: none; margin-left: auto; color: var(--muted); }
.card-avatars { display: flex; align-items: center; flex: none; }
.card-avatars .avatar.md { width: 48px; height: 48px; font-size: 18px; border-color: var(--soft); position: relative; }
.card-avatars .avatar + .avatar { margin-left: -16px; }
.card-avatars .avatar:nth-child(1) { z-index: 3; }
.card-avatars .avatar:nth-child(2) { z-index: 2; }
.card-names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-links { display: flex; flex-direction: column; margin: 10px 0 4px; }
.drawer-links .link-row { height: 54px; margin: 0; border: 0; font-size: 16.5px; font-weight: 600; }
.drawer .beta-note { margin: 0; }
.drawer-end { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 24px; }
.drawer-end #delete-me { width: 100%; min-height: 52px; border-radius: var(--r-lg); font-size: 15px; }

/* The pages: a big heading per part, as in the mockups. */
.settings-body, .family-body { gap: 18px; }
.page-section { display: flex; flex-direction: column; gap: 12px; }
.page-section + .page-section { margin-top: 14px; }
.page-h { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.page-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.page-lists { display: flex; flex-direction: column; margin-top: 10px; }
.page-lists .disclosure { height: 64px; padding: 0 2px; border-top: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.page-lists .disclosure + .section + .disclosure, .page-lists .section + .disclosure { margin-top: 6px; }
.family-body .family-members li { font-size: 17px; }
.code-actions { display: flex; flex-direction: column; gap: 8px; }
.code-actions .button { width: 100%; font-size: 15px; }

/* The install screen, when an invitation link brought a code */
.install-join { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 360px; padding: 16px; border-radius: var(--r-lg); background: var(--soft); text-align: center; }
.install-join > span:first-child { font-size: 13px; font-weight: 600; color: var(--muted); }
.install-join .button { width: 100%; }
.page-body label, .page-body .field { gap: 8px; font-size: 14px; font-weight: 500; }
.page-body .field-row .button { height: 50px; }
.page-body .field-row input { height: 50px; }

/* ─── The accounts page (accounts.js), to the right of the owl ─────────── */
.app.paging { overflow-x: hidden; }
.accounts.incoming { position: absolute; left: 0; right: 0; z-index: 3; }
.accounts { gap: 16px; padding: 6px 16px calc(var(--bottom-inset) + 32px); }
.bal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
#bal-edit[aria-pressed="true"] { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.bal-controls { display: flex; align-items: center; gap: 8px; }
.bal-range { flex: 1; }
.bal-range button { height: 38px; font-size: 13px; }
.bal-split { flex: none; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--muted); font: 700 13px/1 var(--sans); white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.bal-split[aria-pressed="true"] { border-color: transparent; background: var(--soft); color: var(--ink); }
.bal-chart { position: relative; width: 100%; min-height: 210px; touch-action: pan-y; }
.bal-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.bal-chart .grid { stroke: var(--hair); stroke-width: 1; }
.bal-chart .grid.zero { stroke: var(--line); }
.bal-chart .axis { fill: var(--muted); font: 600 10.5px var(--sans); }
.bal-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bal-chart .cross-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.bal-chart .cross-dot { stroke: var(--bg); stroke-width: 2; }
.bal-tip { position: absolute; top: -6px; display: flex; flex-direction: column; gap: 3px; min-width: 132px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 20px var(--shadow); font-size: 12px; color: var(--ink); pointer-events: none; }
.bal-tip[hidden] { display: none; }
.tip-row { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.tip-row b { margin-left: auto; padding-left: 12px; color: var(--ink); font-size: 12.5px; }
.tip-row .dot, .bal-row .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.bal-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 4px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.bal-total span { font-size: 14px; font-weight: 600; color: var(--muted); }
.bal-total strong { font-size: 28px; }
.bal-list { display: flex; flex-direction: column; }
.bal-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 4px; border-bottom: 1px solid var(--hair); font-size: 16px; font-weight: 600; }
.bal-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bal-amount { margin-left: auto; font-size: 17px; }
.bal-amount.neg { color: var(--danger); }
.bal-input { flex: none; width: 150px; height: 44px; margin-left: auto; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font: 700 16px var(--num-font); text-align: right; }
.bal-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.bal-actions[hidden] { display: none; }
.bal-status { text-align: center; }

/* ─── The new-entry card and its two round buttons (from Kleanthis's example, 2026-10-03) ─────────── */
/* The card: «Καταγράφω…» with a dot (a check once settled) and the source (voice/photo), the amount and what for, a
   thin bar running down the 5 seconds, then the category and the account side by side. The app's own surface. */
.receipt {
  gap: 12px;
  padding: 16px 18px 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 18px 40px var(--shadow);
  transform: none;
  font-family: var(--sans);
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  animation-name: card-in;
}
.feed .receipt { transform: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
.receipt.leaving { transform: translateY(-14px) scale(0.98); }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.rc-dot { display: grid; place-items: center; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: rc-pulse 1.2s ease-in-out infinite; }
.receipt.settled .rc-dot { width: 18px; height: 18px; color: var(--on-accent); animation: none; }
.rc-dot svg { display: block; }
@keyframes rc-pulse { 50% { opacity: 0.35; } }
.rc-source { display: grid; place-items: center; color: var(--accent); }
.rc-title { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.rc-amount { font-weight: 700; }
.rc-bar { height: 2px; border-radius: 2px; background: var(--hair); overflow: hidden; }
.rc-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: rc-run 5s linear forwards; }
.receipt.settled .rc-bar i { animation: none; transform: scaleX(0); }
@keyframes rc-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.rc-cells { display: flex; align-items: center; gap: 12px; }
.rc-cell { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.rc-sep { flex: none; align-self: stretch; width: 1px; background: var(--hair); }
.rc-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); color: var(--ink); }
.rc-cell-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-cell-text strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-cell-text small { font-size: 12.5px; color: var(--muted); }

/* The buttons: two circles close together, centred under the card; a simple shadow, the app's colours. */
:root {
  --verdict-gap: calc(var(--bottom-inset) + clamp(36px, 24vh, 260px));
  --verdict-gap: calc(var(--bottom-inset) + clamp(36px, 24dvh, 260px));
}
.home.has-moment .moment { justify-content: flex-end; padding-bottom: 6px; }
.verdict { justify-content: center; align-items: flex-start; gap: 36px; height: auto; padding-top: 14px; }
.side-pill { flex-direction: column; gap: 8px; height: auto; animation-name: circle-in; text-align: center; }
.side-pill.fix { flex-direction: column-reverse; animation-name: circle-in; text-align: center; }
@keyframes circle-in { from { opacity: 0; transform: translateY(10px) scale(0.9); } }
.side-pill-shape, .side-pill.fix .side-pill-shape {
  justify-content: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 8px 18px var(--shadow), 0 1px 3px var(--shadow);
  transform: scale(calc(1 + var(--pull-l) * 0.16));
  transition: transform 0.3s var(--ease), background-color 0.2s ease;
}
.side-pill.fix .side-pill-shape { transform: scale(calc(1 + var(--pull-r) * 0.16)); }
.side-pill-text, .side-pill.fix .side-pill-text { align-items: center; color: var(--muted); filter: none; }
.side-pill-text strong { font-size: 13px; font-weight: 700; }
.side-pill-text small { display: none; }
.side-pill:active .side-pill-shape { filter: none; background: var(--soft); }
.capture.decided .side-pill.undo, .capture.decided .side-pill.fix { transform: scale(0.9); }

/* Round 15 */
.sheet-body .split { margin: 10px 0 2px; }  /* the shares bar now sits right under the family members */
.income-empty { margin: 2px 0 0; }
.bal-range button { min-width: 0; }
.bal-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.bal-pick[hidden] { display: none; }
.bal-tick { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.bal-tick input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.bal-tick .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.bal-tick:has(input:not(:checked)) { color: var(--muted); }
.bal-tick:has(input:not(:checked)) .dot { opacity: 0.35; }
.bal-none { display: grid; place-items: center; min-height: 180px; margin: 0; }
#bal-edit:disabled { opacity: 1; cursor: default; }
/* While editing amounts: Αποθήκευση / Άκυρο stay pinned at the bottom of the screen. */
.accounts.editing { padding-bottom: calc(var(--bottom-inset) + 96px); }
.accounts .bal-actions { position: sticky; bottom: 0; z-index: 4; margin: 0 -16px; padding: 12px 16px calc(var(--bottom-inset) + 12px); background: var(--bg); border-top: 1px solid var(--hair); box-shadow: 0 -10px 24px var(--shadow); }
/* Under the month's list: the accounts are a swipe away */
.swipe-note { margin: 18px 0 0; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--muted); opacity: 0.8; }

/* ─── Round 16: transfers, the shopping list, the plain home button ─────── */

.arrow.move, .row-amount.move, .bubble-amount.move { color: var(--muted); }
.bal-tools { display: flex; align-items: center; gap: 8px; }
#bal-move:disabled { opacity: 0.4; }
.edit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.edit-basket { color: var(--accent); }
#edit-kind button { padding: 0 4px; font-size: 13px; }

/* The shopping list: a page like the accounts, to the left of the home */
.shopping { gap: 14px; padding: 6px 16px calc(var(--bottom-inset) + 32px); }
.shopping.incoming { position: absolute; left: 0; right: 0; z-index: 3; }
.shop-count { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.shop-field { margin: 0; }
.shop-field input { height: 50px; }
.shop-field .button { height: 50px; display: grid; place-items: center; padding: 0 16px; }
.shop-status { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 0; margin: -6px 0 -4px; text-align: center; }
.shop-status:empty { display: none; }
.shop-undo { border: 0; background: transparent; padding: 6px 4px; color: var(--accent); font: 700 13px var(--sans); cursor: pointer; }
.shop-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.shop-list:has(> .shop-empty) { border-style: dashed; background: transparent; }
.shop-empty { margin: 0; padding: 26px 18px; text-align: center; font-size: 14px; line-height: 1.45; }
.shop-row { position: relative; overflow: hidden; }
.shop-row + .shop-row { border-top: 1px solid var(--hair); }
.shop-under { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 14px; font-weight: 700; }
.shop-under > span { display: inline-flex; align-items: center; gap: 8px; opacity: 0; }
.shop-row.to-del .shop-under { background: var(--danger); color: var(--bg); }
.shop-row.to-buy .shop-under { background: var(--accent); color: var(--on-accent); }
.shop-row.to-del .shop-under-del, .shop-row.to-buy .shop-under-buy { opacity: 1; }
.shop-inner { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 14px; background: var(--surface); transition: transform 0.22s var(--ease); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.shop-row.dragging .shop-inner { transition: none; }
.shop-row.gone .shop-inner { transition: transform 0.18s ease-in; }
.shop-tick { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: transparent; color: var(--on-accent); cursor: pointer; touch-action: manipulation; }
.shop-row.taken .shop-tick { border-color: var(--accent); background: var(--accent); }
.shop-text { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.shop-row.taken .shop-text { color: var(--muted); text-decoration: line-through; }
.shop-hint { margin: -6px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.shop-list:has(> .shop-empty) + .shop-hint { display: none; }
.shop-basket { display: flex; flex-direction: column; gap: 8px; }
.shop-basket .sub-title, .shop-old-title { margin: 6px 4px 0; }
.shop-basket .shop-list { opacity: 0.85; }
.shop-ask { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--soft); animation: fade-up 0.35s var(--ease) backwards; }
.shop-ask p { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.shop-done { position: sticky; bottom: calc(var(--bottom-inset) + 12px); z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; box-shadow: 0 10px 28px var(--shadow); }
.shop-old { display: flex; flex-direction: column; opacity: 0.72; }
.shop-old-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--hair); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.shop-old-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shop-old-main strong { font-size: 15px; font-weight: 700; }
.shop-old-main small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-old-cost { flex: none; font-size: 15px; }
.shop-old-cost.none { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* «Πέρασε το κόστος»: on the list page, and on top of the month's list */
.shop-reminder { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-lg); background: var(--soft); animation: fade-up 0.35s var(--ease) backwards; }
.shop-reminder p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.shop-reminder .button { grid-column: 1 / -1; }
.shop-reminder .shop-remind-x { grid-row: 1; grid-column: 3; }
.shop-remind-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--accent); }
.shop-remind-x { color: var(--muted); }
.list-reminder { margin: 0 16px 12px; }
.shop-remind { display: flex; align-items: center; gap: 12px; padding: 10px 4px 10px 12px; border-radius: var(--r-lg); background: var(--soft); }
.shop-remind-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.shop-remind-main strong { font-size: 15px; font-weight: 700; }
.shop-remind-main small { font-size: 12.5px; color: var(--muted); }

/* The voice card for things put on the list */
.lc-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 18px; font-weight: 600; }
.lc-items li { display: flex; align-items: center; gap: 10px; }
.lc-items svg { flex: none; color: var(--accent); }
.lc-items .lc-already { font-size: 14px; font-weight: 500; color: var(--muted); }

/* What a list bought */
.basket .sheet-body { gap: 14px; }
.basket-cost { font-size: 28px; }
.basket-cost:empty { display: none; }
.basket-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 17px; font-weight: 600; }
.basket-items li { display: flex; align-items: center; gap: 10px; }
.basket-items svg { flex: none; color: var(--accent); }
.basket-items .none { color: var(--muted); font-weight: 500; font-size: 15px; }
.basket-left { display: flex; flex-direction: column; gap: 4px; }

/* The plain home button (Ρυθμίσεις → Αρχική οθόνη → Απλό κουμπί): no owl and no box, a round button low on the
   screen where the thumb reaches; it turns red while listening (a ring pulses out of it) and purple while thinking. */
html[data-home="button"] .capture:not(.compact) .owl,
html[data-home="button"] .capture:not(.compact) .stage-box { display: none; }
html[data-home="button"] .capture:not(.compact) .stage { height: 168px; margin-bottom: clamp(4px, 3dvh, 32px); }
html[data-home="button"] .capture:not(.compact) .dome { inset: 0; height: auto; overflow: visible; border-radius: 0; }
html[data-home="button"] .capture:not(.compact) .dome-ball,
html[data-home="button"] .capture:not(.compact) .dome::before { left: 50%; top: 50%; bottom: auto; width: 104px; height: 104px; margin: -52px 0 0 -52px; }
html[data-home="button"] .capture:not(.compact) .dome-ball { translate: none; box-shadow: 0 10px 30px var(--shadow); }
html[data-home="button"] .capture:not(.compact) .dome-ball::before,
html[data-home="button"] .capture:not(.compact) .dome-ball::after { display: none; }
html[data-home="button"] .capture:not(.compact) .dome-icon { top: 50%; translate: none; scale: 1; }
html[data-home="button"] body[data-cap="listening"] .capture:not(.compact) .dome::before { opacity: 0.5; animation: home-ring 1.6s ease-out infinite; animation-play-state: running; }
@keyframes home-ring { from { scale: 1; opacity: 0.55; } to { scale: 1.7; opacity: 0; } }

/* ─── Round 17 ──────────────────────────────────────────────────────────── */

/* The shopping list: the title on one line; the field and «Αγοράστηκαν» stuck to the bottom */
.shop-title { white-space: nowrap; font-size: clamp(21px, 6.6vw, 26px); }
.shop-bar { position: sticky; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px; margin: 0 -16px; padding: 10px 16px calc(var(--bottom-inset) + 12px); background: linear-gradient(to bottom, transparent, var(--bg) 14px); }
.shop-new { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.shop-new::placeholder { color: var(--muted); }
.shop-new:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.shop-bar .shop-done { position: static; box-shadow: none; }
.shop-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.shop-aisle { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.shop-row.taken .shop-aisle { opacity: 0.7; }
.shop-text { cursor: text; }
.shop-edit { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--bg); color: var(--ink); font: 600 17px var(--sans); }
.shop-edit:focus-visible { outline: none; }
.shop-hint .shop-count { font-weight: 700; }
.shop-stats { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.shop-stats .sub-title { margin: 0; }
.shop-stats .sub-title + * { margin-bottom: 6px; }
.shop-top { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: top; }
.shop-top li { display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 600; counter-increment: top; }
.shop-top li::before { content: counter(top); width: 18px; flex: none; font: 700 12px var(--num-font); color: var(--muted); }
.shop-top-n { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.shop-aisles { margin-top: 0; padding-top: 0; border-top: 0; }
.shop-aisles .cat-name { width: 150px; font-size: 13px; }
.shop-aisles .cat-amount { width: 44px; font-size: 13px; }
.shop-rhythm { margin: 0; }
.basket .button.danger { margin-top: 6px; }

/* The header: icons and the month straight on the background (no circles, no pill); a toggled button (the chat) keeps
   its filled circle. */
.top-actions .icon-btn { border-color: transparent; background: transparent; }
.top-actions .icon-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.people .pill { border-color: transparent; background: transparent; padding: 0 2px 0 8px; }

/* The accounts page: plain buttons; the range is one word that steps 1Μ → 6Μ → 1Ε */
#bal-move { border-color: transparent; background: transparent; color: var(--muted); }
.bal-split { border-color: transparent; background: transparent; }
.bal-split[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.bal-controls { justify-content: space-between; }
.bal-range-btn { flex: none; min-width: 56px; height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--accent); font: 700 15px var(--num-font); cursor: pointer; touch-action: manipulation; }
.bal-range-btn:active { transform: scale(0.95); }
.bal-update { width: 100%; }
.bal-update-hint { text-align: center; margin: 4px 8px -6px; }

/* Swipe the accounts list left: the changes come in from the right edge */
.bal-list { overflow: hidden; --pull: 0px; }
.bal-row { position: relative; display: block; padding: 0; overflow: hidden; }
.bal-main { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 4px; }
.bal-main .bal-amount { transform: translateX(var(--pull)); opacity: calc(1 - var(--pulled, 0)); transition: transform 0.25s var(--ease), opacity 0.25s ease; }
.bal-change { position: absolute; top: 0; bottom: 0; right: 0; background: var(--bg); width: var(--change-w, 172px); display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 4px 0 10px; transform: translateX(calc(100% + var(--pull))); transition: transform 0.25s var(--ease); border-left: 1px solid var(--hair); }
.bal-list.pulling .bal-amount, .bal-list.pulling .bal-change { transition: none; }
.bal-change-row { display: flex; align-items: baseline; gap: 6px; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.bal-change-row b { width: 18px; flex: none; font-weight: 700; }
.bal-change-row .num { font-size: 11px; letter-spacing: -0.02em; }
.bal-change-row.up .num { color: var(--accent); }
.bal-change-row.down .num { color: var(--danger); }

/* OK beside a field shows only once the field has changed */
.field-row.savable:not(.dirty) > .button { display: none; }

/* Settings: a switch row */
.switch-row { flex-direction: row !important; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0; }
.switch-text { display: flex; flex-direction: column; gap: 3px; }
.switch-text strong { font-size: 15px; color: var(--ink); }
.switch-text small { font-size: 12px; font-weight: 500; color: var(--muted); line-height: 1.35; }
input.switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 52px !important; height: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: var(--line) !important; cursor: pointer; transition: background-color 0.2s ease; }
input.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s var(--ease); }
input.switch:checked { background: var(--accent) !important; }
input.switch:checked::after { transform: translateX(20px); }

/* (v0.14: hidden amounts are written as €**,** by euros() in format.js, no blur any more) */

/* The home text: a saying gets smaller letters */
.hold-text strong.long { font-size: 19px; font-weight: 600; line-height: 1.35; max-width: 330px; text-wrap: balance; }

/* The plain home button: a very soft, wide glow behind it */
html[data-home="button"] .capture:not(.compact) .stage::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--dome) 22%, transparent) 0%, color-mix(in srgb, var(--dome) 8%, transparent) 38%, transparent 68%);
  transition: background 0.5s ease;
}

/* The owl bar: floats up from the bottom over the month's list; a tap opens the chat, growing up from it */
.ask-bar {
  position: sticky; bottom: calc(var(--bottom-inset) + 14px); z-index: 4; display: flex; align-items: center; gap: 10px;
  height: 52px; margin: -52px 16px 0; padding: 0 18px 0 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted); font: 600 15px var(--sans); text-align: left; cursor: text;
  box-shadow: 0 10px 30px var(--shadow); opacity: 0; transform: translateY(calc(100% + 30px)); pointer-events: none;
  transition: transform 0.35s var(--ease), opacity 0.25s ease;
}
.ask-bar.shown { opacity: 1; transform: none; pointer-events: auto; }
.ask-owl { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--soft); color: var(--accent); flex: none; }
.month-list { padding-bottom: calc(var(--bottom-inset) + 84px); }
.ai-head { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 0 8px 0 16px; height: 44px; }
.ai-head-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.assistant.opening { animation: ask-open 0.42s var(--ease) both; }
@keyframes ask-open {
  from { clip-path: inset(calc(100% - 66px) 16px 14px 16px round 26px); opacity: 0.6; }
  to { clip-path: inset(0 0 0 0 round 0); opacity: 1; }
}

/* Round 18: nothing may make the page wider than the screen (the glow behind the plain button did: the page slid
   sideways on a scroll); header and accounts icons line up with the cards' edges; the header icons a little closer. */
.app { overflow-x: hidden; }
.capture { overflow-x: clip; }
.top-actions { gap: 2px; margin-right: -12px; }
@media (max-width: 359px) { .top-actions { gap: 0; } }
.people .pill { padding-right: 0; margin-right: -4px; }
.bal-tools { margin-right: -13px; }
.bal-range-btn { min-width: 48px; padding: 0 16px 0 0; text-align: left; }

/* Round 19 (v0.14.0) */
/* Month sheet: each category's share of the month, right of its amount; the bars a little smaller */
.cat-bar { height: 6px; }
.cat-pct { width: 38px; flex: none; text-align: right; font-size: 12.5px; color: var(--muted); }
.cat-amount { width: 76px; }
.sheet-body .cat-name { width: 104px; }
/* Account kinds: small grey tags (accounts page under the name; settings beside it) */
.bal-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kind-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.kind-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.lrow-inner .kind-tag { flex: none; margin-left: 4px; }
.lrow-inner .kind-tag + .kind-tag { margin-left: 0; }
.acc-kinds { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.acc-kinds .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* «Ανά λογαριασμό»: the ticks on one line that scrolls sideways, edge to edge */
.bal-pick { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.bal-pick::-webkit-scrollbar { display: none; }
.bal-tick { flex: none; }
/* The graph's box glides after the finger (transform, set in accounts.js) */
.bal-tip { left: 0; will-change: transform; }
/* The email rests half-hidden in grey until tapped */
.masked-field { position: relative; display: flex; flex: 1; min-width: 0; }
.masked-field input { flex: 1; min-width: 0; }
.field-mask { position: absolute; inset: 0; display: none; align-items: center; padding: 0 13px; color: var(--muted); font-size: 16px; pointer-events: none; white-space: nowrap; overflow: hidden; }
.masked-field.has-value:not(:focus-within) .field-mask { display: flex; }
.masked-field.has-value:not(:focus-within) input { color: transparent; }
/* «Ρώτα την κουκουβάγια»: a wide soft glow around it, like the one behind the record button */
.ask-bar.shown { box-shadow: 0 10px 30px var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 50px 8px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 120px 36px color-mix(in srgb, var(--accent) 13%, transparent); }

/* Round 20 (v0.14.1): quieter greens for the home's secondary words, and the home quote's own colour */
:root { --quiet: #6e7e76; --quote: #7d8b84; --quote-glow: none; }
:root[data-theme="dark"] { --quiet: #465a4e; --quote: #35524a; --quote-glow: 0 0 3px rgba(53, 82, 74, 0.23), 0 0 18px rgba(53, 82, 74, 0.23); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --quiet: #465a4e; --quote: #35524a; --quote-glow: 0 0 3px rgba(53, 82, 74, 0.23), 0 0 18px rgba(53, 82, 74, 0.23); }
}
.top-actions .icon-btn:not([aria-pressed="true"]), .people .pill, .list-handle, .list-title, .ask-bar,
.bal-split:not([aria-pressed="true"]), .bal-total span { color: var(--quiet); }
.bal-chart .axis { fill: var(--quiet); }
/* The quote: a little heavier, in its own colour (a faint glow in the dark); it sits a little higher */
body:not([data-cap="listening"]):not([data-cap="thinking"]) .hold-text strong.long { font-weight: 700; color: var(--quote); text-shadow: var(--quote-glow); }
.capture:not(.compact) .hold-text { padding-bottom: calc(12px + 6dvh); }
/* Only the circles beside the month pill: no names */
#names { display: none; }

/* Round 21 (v0.15.0) */
/* Accounts: the total top left under a small «Σύνολο λογαριασμών», with the eye beside it */
.bal-head { align-items: flex-start; }
.bal-top { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bal-kicker { margin: 0; font-size: 14px; font-weight: 700; color: var(--quiet); }
.bal-top-row { display: flex; align-items: center; gap: 4px; }
.bal-top-row strong { font-size: 32px; line-height: 1.1; }
.bal-eye { width: 36px; height: 36px; color: var(--quiet); }
.family-members .mail-add { border: 0; background: transparent; padding: 6px 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--accent); cursor: pointer; }

/* No zoom: pinch and double-tap stay with the app */
html { touch-action: manipulation; }

/* ─── The bottom bar (list · home · report · accounts) ──────────────────── */
/* Above the home indicator; everything that sat at the bottom of a page (the owl bar, the list's buttons, the month's
   list end) moves above it through --bottom-inset. Hidden while recording, a receipt waits, a keyboard is up, and in
   the chat views. */
:root { --tab-h: 54px; --tab-bg: #ffffff; --tab-ink: #6e7e76; --tab-pill: #dff5ea; --tab-on: #0b7d54; }
:root[data-theme="dark"] { --tab-bg: #11161d; --tab-ink: #6f8278; --tab-pill: #1b3329; --tab-on: #3ddc97; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tab-bg: #11161d; --tab-ink: #6f8278; --tab-pill: #1b3329; --tab-on: #3ddc97; } }
.app.has-tabs { --bottom-inset: calc(env(safe-area-inset-bottom, 0px) + var(--tab-h) + 20px); }
.tabbar {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); z-index: 20;
  display: flex; align-items: center; width: min(calc(100% - 32px), 420px); height: var(--tab-h); padding: 5px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--tab-bg);
  box-shadow: 0 12px 32px var(--shadow), 0 2px 6px var(--shadow);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none;
  transition: transform 0.4s var(--ease), opacity 0.25s ease;
}
.tabbar.shown { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
html.kb .tabbar, body[data-cap="listening"] .tabbar, body[data-cap="thinking"] .tabbar, body:has(.capture.gone) .tabbar { transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; }
.tab-pill { position: absolute; top: 5px; left: 0; height: calc(100% - 10px); border-radius: 999px; background: var(--tab-pill); transition: transform 0.38s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.38s cubic-bezier(0.3, 1.25, 0.5, 1); }
.tab {
  position: relative; z-index: 1; flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 100%;
  padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--tab-ink); font: 700 13px var(--sans);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tab[hidden] { display: none; }
.tab.on { flex: 0 0 auto; padding: 0 16px 0 14px; color: var(--tab-on); }
.tab-icon { display: grid; place-items: center; flex: none; }
.tab-label { display: none; white-space: nowrap; }
.tab.on .tab-label { display: inline; animation: tab-label 0.35s var(--ease) both; }
@keyframes tab-label { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.tab:active .tab-icon { transform: scale(0.9); }

/* ─── The live report (report.js) ───────────────────────────────────────── */
.report.incoming { position: absolute; left: 0; right: 0; z-index: 3; }
.report { gap: 14px; padding: 6px 16px calc(var(--bottom-inset) + 32px); }
.rep-total { font-size: 32px; line-height: 1.1; }
.rep-mode { margin-top: 2px; }
.rep-compare { margin: -6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--quiet); }
.rep-compare.up { color: var(--danger, #e66767); }
.rep-compare.down { color: var(--accent); }
.rep-perday { margin: -10px 0 0; font-size: 13px; color: var(--quiet); }
.rep-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rep-tile { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hair); min-width: 0; }
.rep-tile span { font-size: 11.5px; font-weight: 700; color: var(--quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-tile strong { font-size: 13px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-tile .in { color: var(--accent); }
.rep-tile .neg { color: var(--danger, #e66767); }
.rep-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--hair); }
.rep-card[hidden] { display: none; }
.rep-h { margin: 0; font-size: 15px; font-weight: 800; }
.rep-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; font-weight: 600; color: var(--quiet); }
.rep-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rep-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.rep-legend .dash i { background: repeating-linear-gradient(90deg, var(--chart-prev) 0 4px, transparent 4px 7px) !important; }
.rep-legend .budget i { background: repeating-linear-gradient(90deg, var(--quiet) 0 2px, transparent 2px 5px); }
:root { --chart-prev: #9aa6a0; }
:root[data-theme="dark"] { --chart-prev: #55665d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chart-prev: #55665d; } }
.rep-chart { min-height: 0; }
.bal-chart .line.dashed { stroke-dasharray: 5 4; }
.bal-chart .budget-line { stroke: var(--quiet); stroke-width: 1.2; stroke-dasharray: 2 4; }
.bal-chart .end-dot { stroke: var(--surface); stroke-width: 2; }
.rep-bars .bar { fill: var(--accent); opacity: 0.55; }
.rep-bars .bar.today { opacity: 1; }
.rep-bars .bar.future { opacity: 0.2; }
.rep-bars .hit { fill: transparent; }
.rep-rows { display: flex; flex-direction: column; gap: 10px; }
.rep-rows .cat-name { width: 108px; }
.rep-biggest { display: flex; flex-direction: column; }
.rep-big { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border: 0; border-top: 1px solid var(--hair); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.rep-big:first-child { border-top: 0; }
.rep-big-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rep-big-desc { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-big-sub { font-size: 12px; color: var(--muted); }
.rep-big-amount { font-size: 15px; font-weight: 700; }
.rep-empty { text-align: center; }

/* Accounts: «1Μ» and «Φίλτρα» side by side, the same pill; filters open = filled; on but closed = a count */
.bal-controls { justify-content: flex-start; gap: 8px; }
.bal-range-btn, .bal-split {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 34px;
  padding: 0 14px; border: 1px solid var(--line) !important; border-radius: 999px; background: var(--surface) !important;
  color: var(--ink) !important; font: 700 13px var(--sans); text-align: center; cursor: pointer; touch-action: manipulation;
}
.bal-range-btn { min-width: 52px; font-family: var(--num-font); }
.bal-split[aria-pressed="true"] { border-color: transparent !important; background: var(--accent) !important; color: var(--on-accent) !important; }
.bal-split.active { border-color: var(--accent) !important; color: var(--accent) !important; }
.filter-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 800 11px var(--sans); }

/* Eye buttons (code, accounts, report): pressed = the closed eye, same colour, never a filled circle that hides it */
.icon-btn.quiet[aria-pressed="true"], #code-eye[aria-pressed="true"] { border-color: transparent; background: transparent; color: var(--ink); }
.bal-eye[aria-pressed="true"] { color: var(--ink); }

/* Report: the categories' pie, above their bars */
.rep-pie { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 6px; }
.rep-pie:empty { display: none; }
.rep-pie svg { display: block; max-width: 100%; height: auto; }
.rep-pie .slice { stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; cursor: pointer; transition: opacity 0.2s ease; }
.rep-pie .slice.dim { opacity: 0.3; }
.rep-pie-label { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 20px; margin: 0; font-size: 13.5px; color: var(--quiet); }
.rep-pie-label strong { color: var(--ink); font-weight: 700; }
.rep-pie-label .num { color: var(--ink); }
.rep-pie-label .dot { width: 10px; height: 10px; border-radius: 50%; }

/* v0.15.5: «Απλό / Σωρευτό» at the right end of the graph's buttons; stacked bands */
.bal-stack { margin-left: auto; font-family: var(--sans); }
.bal-chart .band { stroke: none; }
/* The home quote in Geologica (picked from the mockups) */
.hold-text strong.long, body:not([data-cap="listening"]):not([data-cap="thinking"]) .hold-text strong.long {
  font-family: Geologica, Manrope, system-ui, sans-serif; font-size: 21px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em;
}
/* Month sheet: no back button; the month and its arrows from edge to edge */
.month-head .sheet-x { display: none; }
.month-head { justify-content: space-between; }
.month-head h2 { flex: 1; width: auto; }

/* ═══ v0.16.0 · Neumorphism (from the UI Styleguide canvas) ═══════════════════════════════════════════════════════
   One soft ground; cards and buttons are pressed out of it (light from the top left), fields and pressed things into
   it. No borders. The transaction list and the report's three figures sit straight on the ground. Geologica for text. */
:root {
  --bg: #e4e8ed; --surface: #e4e8ed; --line: transparent; --muted: #717b88;
  --sans: Geologica, Manrope, system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --nd: rgba(150, 163, 184, 0.55); --nl: rgba(255, 255, 255, 0.95);
  --danger-bg: #ece0e2; --tick-line: rgba(113, 123, 136, 0.45);
  --knob-shadow: 1px 2px 4px rgba(60, 72, 90, 0.28), -1px -1px 2px rgba(255, 255, 255, 0.35);
  --switch-on-inset: inset 1px 1px 3px rgba(0, 0, 0, 0.22);
  --tab-bg: #e4e8ed; --tab-pill: transparent;
}
:root[data-theme="dark"] {
  --bg: #1b2027; --surface: #1b2027; --muted: #838c9a; --quote: #40625a;
  --nd: rgba(0, 0, 0, 0.55); --nl: rgba(255, 255, 255, 0.045);
  --danger-bg: #271e23; --tick-line: rgba(131, 140, 154, 0.45);
  --knob-shadow: 3px 3px 6px var(--nd), -3px -3px 6px var(--nl);
  --switch-on-inset: inset 2px 2px 5px var(--nd), inset -2px -2px 5px var(--nl);
  --tab-bg: #1b2027;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b2027; --surface: #1b2027; --muted: #838c9a; --quote: #40625a;
    --nd: rgba(0, 0, 0, 0.55); --nl: rgba(255, 255, 255, 0.045);
    --danger-bg: #271e23; --tick-line: rgba(131, 140, 154, 0.45);
    --knob-shadow: 3px 3px 6px var(--nd), -3px -3px 6px var(--nl);
    --switch-on-inset: inset 2px 2px 5px var(--nd), inset -2px -2px 5px var(--nl);
    --tab-bg: #1b2027;
  }
}
:root {
  --out-s: 3px 3px 7px var(--nd), -3px -3px 7px var(--nl);
  --out: 5px 5px 12px var(--nd), -5px -5px 12px var(--nl);
  --out-l: 8px 8px 20px var(--nd), -8px -8px 20px var(--nl);
  --in: inset 3px 3px 7px var(--nd), inset -3px -3px 7px var(--nl);
  --in-s: inset 2px 2px 5px var(--nd), inset -2px -2px 5px var(--nl);
}
body[data-cap="listening"], body[data-cap="thinking"] { --nd: rgba(0, 0, 0, 0.45); --nl: rgba(255, 255, 255, 0.05); --muted: #9aa3b2; }

/* Raised: cards and buttons */
.button, .icon-btn:not(.quiet), .pill, .nav, .lrows, .shop-list, .shop-new, .shop-stats, .install-steps, .beta-note,
.outbox-pill, .ai-chip, .bubble, .bal-tick, .bal-tip, .rep-card, .bal-range-btn, .bal-split { border-color: transparent !important; box-shadow: var(--out); }
.lrows, .shop-list, .shop-stats, .rep-card { box-shadow: var(--out-l); }
.pill, .nav, .ai-chip, .bal-tick, .outbox-pill, .bal-range-btn, .bal-split { box-shadow: var(--out-s); }
.nav { background: var(--surface); color: var(--accent); }
.button.primary { box-shadow: var(--out), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.button.danger { background: var(--danger-bg); }
.button:active:not(:disabled), .pill:active, .nav:active, .bal-range-btn:active, .bal-split:active { box-shadow: var(--in-s); }
/* Pressed = sunk into the ground, the icon green */
.icon-btn:not(.quiet)[aria-pressed="true"], .bal-split[aria-pressed="true"] { background: var(--surface) !important; color: var(--accent) !important; box-shadow: var(--in) !important; }
.bal-split.active { box-shadow: var(--out-s); }

/* Sunk: fields, the theme picker, tracks */
.welcome-form input, .sheet-body input:not(.switch), .sheet-body select, .page-body input:not(.switch), .shop-field input, .sheet-body textarea,
.search-field, #ai-input, .bal-input { border-color: transparent !important; background: var(--surface); box-shadow: var(--in); }
.segmented { gap: 4px; padding: 4px; border: 0; border-radius: calc(var(--r) + 4px); background: var(--surface); box-shadow: var(--in); overflow: visible; }
.segmented button { border-radius: var(--r) !important; background: transparent; color: var(--muted); }
.segmented button + button { border-left: 0; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--out-s); }
.cat-bar { background: var(--surface); box-shadow: var(--in-s); }
input.switch { background: var(--surface) !important; box-shadow: var(--in-s); }
input.switch:checked { background: var(--accent) !important; box-shadow: var(--switch-on-inset); }
input.switch::after { background: var(--surface); box-shadow: var(--knob-shadow); }
.shop-tick { border-color: var(--tick-line); }
.bal-chart .grid.zero { stroke: var(--hair); }

/* Flat on the ground: the month's list and the report's three figures */
.days { padding: 2px 4px 4px; border: 0; background: transparent; box-shadow: none; }
.rep-tile { padding: 6px 2px; border: 0; background: transparent; }

/* Sheets: the same ground, no line */
.sheet-top, .sheet-bottom { border: 0; }

/* Account kinds: an outline in their own colour, flat */
.kind-tag { height: 18px; border: 1px solid; background: transparent; }
.kind-tag.saving { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.kind-tag.asset { color: var(--m1); border-color: color-mix(in srgb, var(--m1) 50%, transparent); }

/* Tab bar: raised; the current page gets a thin soft green line, not a filled pill */
.tabbar { border: 0; box-shadow: 8px 8px 20px var(--nd), -8px -8px 20px var(--nl); }
.tab-pill { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }

/* «Ρώτα την κουκουβάγια»: only a green glow and a faint green line, no relief (it floats over the list) */
.ask-bar { border: 0; box-shadow: none; }
.ask-bar.shown { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 46px 6px color-mix(in srgb, var(--accent) 20%, transparent); }

/* The record button at rest: a raised circle of the ground with a green mic and a green ring, on a sunk box.
   Listening and thinking keep their red and purple (their rules set the same variables with higher specificity). */
.stage { --box-bg: var(--surface); --box-line: transparent; --band-color: transparent; --dome: var(--surface); --dome-ink: var(--accent); }
:where(:root[data-theme="light"]) .stage { --dome-ink: var(--accent); }
@media (prefers-color-scheme: light) { :where(:root:not([data-theme="dark"])) .stage { --dome-ink: var(--accent); } }
body:not([data-cap="listening"]):not([data-cap="thinking"]) .stage-box { box-shadow: var(--in); }
body:not([data-cap="listening"]):not([data-cap="thinking"]) .dome-ball { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 6px 6px 14px var(--nd), -6px -6px 14px var(--nl); }
body:not([data-cap="listening"]):not([data-cap="thinking"]) .dome::before { background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
html[data-home="button"] .capture:not(.compact) .stage::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent) 0%, color-mix(in srgb, var(--accent) 5%, transparent) 38%, transparent 68%);
}

/* v0.16.1: the header flat on the ground (icons and month pill, no shapes; the active view = a green icon) */
.top-actions .icon-btn, .top-actions .icon-btn[aria-pressed="true"], .people .pill { border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
.top-actions .icon-btn[aria-pressed="true"] { color: var(--accent) !important; }
/* Dark: the small print of the report, the accounts and the header in a neutral grey, not the dim green */
:root[data-theme="dark"] :is(#report, #accounts, .top, .people) { --quiet: #959eab; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(#report, #accounts, .top, .people) { --quiet: #959eab; } }
/* Report: a little more air between its parts */
.report { gap: 22px; }
.rep-compare { margin-top: -12px; }
.rep-perday { margin-top: -16px; }
/* Accounts: the filter chips get room above and below so their shadows aren't cut by the sideways scroll */
.bal-pick { padding-top: 10px; padding-bottom: 12px; margin-top: -14px; margin-bottom: -12px; }
/* Accounts: the new-transfer button is a bare plus */
#bal-move { border-color: transparent !important; background: transparent !important; box-shadow: none !important; color: var(--quiet); }

/* v0.16.2: the report's comparison and count under «Πώς πάει», on the ground */
.rep-notes { display: flex; flex-direction: column; gap: 4px; margin: -8px 2px 0; }
.rep-notes .rep-compare, .rep-notes .rep-perday { margin: 0; }
/* Entry editor: the date like «Ποιος / Από / Προς», no frame (selects keep their native look, so no inset on them either) */
.sheet-body select, .sheet-body input[type="date"] { box-shadow: none !important; background: transparent !important; }
.sheet-body input[type="date"] { justify-content: flex-start; text-align: left; padding-left: 0; }
.sheet-body input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.sheet-body select { padding-left: 0; }
/* Shopping list: the count alone on the left, the hint in two lines a little lower */
.shop-count-line { margin: -6px 2px 0; text-align: left; }
.shop-count-line:empty { display: none; }
.shop-hint { margin: 4px 2px 0; line-height: 1.5; text-align: left; }
/* Chat and owl chat: messages in a plain grey outline, no shadows */
.bubble, .mine .bubble, .ai-bubble { box-shadow: none !important; border: 1px solid var(--line-soft, rgba(127, 136, 150, 0.35)) !important; }
.shop-list:has(> .shop-empty) ~ .shop-hint { display: none; }

/* v0.16.3: one header row. The month pill (and its sheet) are gone; the family's circles sit right of the chat
   button. The three buttons closer together; the chat view on = a filled green circle. */
.people { display: none !important; }
.top-actions { gap: 0; margin-right: 0; }
.top-actions .icon-btn { width: 38px; height: 38px; }
.top-actions .icon-btn[aria-pressed="true"] { border-radius: 50%; background: var(--accent) !important; color: var(--on-accent) !important; }
.top-actions .who { height: 38px; margin-left: 6px; padding: 0; }
.top-actions .names { display: none; }
.top-actions .avatars { height: 38px; }
.home.has-moment { min-height: calc(100vh - var(--top-inset) - 54px - 78px - var(--verdict-gap)); min-height: calc(100dvh - var(--top-inset) - 54px - 78px - var(--verdict-gap)); }
/* The home quote appears in its own colour at once (no fade from the bold title colour) */
.hold-text strong.long { transition: none; }
/* Softer eyes */
.amount-eye, #code-eye { opacity: 0.6; }
.amount-eye svg, #code-eye svg { stroke-width: 1.6; }
.capture:not(.compact):not(.gone) { min-height: calc(100vh - var(--top-inset) - var(--bottom-inset) - 110px); min-height: calc(100dvh - var(--top-inset) - var(--bottom-inset) - 110px); }

/* v0.16.4: the report's period arrows around «Μήνας / Εβδομάδα» */
.rep-nav { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.rep-nav .nav { width: 34px; height: 34px; }
.rep-nav .nav:disabled { opacity: 0.3; box-shadow: none; }

/* ═══ v0.17.0 ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
/* The bottom bar's room is kept only while the bar shows: with a keyboard, while recording/thinking and while a new
   entry's card waits, things sit on the real bottom (no empty band; the shopping field right above the keyboard). */
html.kb .app.has-tabs, body[data-cap="listening"] .app.has-tabs, body[data-cap="thinking"] .app.has-tabs,
body[data-cap="confirming"] .app.has-tabs, body:has(.capture.gone) .app.has-tabs { --bottom-inset: env(safe-area-inset-bottom, 0px); }

/* «Οι κινήσεις του μήνα»: fades out once the home scrolls, and in the red/purple/blue moments */
.list-handle { transition: opacity 0.35s ease; }
.list-handle.faded { opacity: 0; pointer-events: none; }
/* The header's buttons and the family's circles step aside (fade) while recording, thinking and while the card waits */
.top-actions > * { transition: opacity 0.35s ease; }
body:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"]) :is(.top-actions > *, .list-handle) { opacity: 0; pointer-events: none; }

/* Bottom bar: no white light on top; one dark shadow falling down */
.tabbar { box-shadow: 0 10px 22px var(--nd), 0 3px 6px color-mix(in srgb, var(--nd) 60%, transparent); }

/* The record button's glow and shadow follow the moment's colour (green at rest, red, purple) */
.stage { --glow-c: var(--accent); }
body[data-cap="listening"] .stage, body[data-cap="thinking"] .stage { --glow-c: var(--dome); }
html[data-home="button"] .capture:not(.compact) .stage::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--glow-c) 22%, transparent) 0%, color-mix(in srgb, var(--glow-c) 8%, transparent) 38%, transparent 68%);
}
html[data-home="button"] body:is([data-cap="listening"], [data-cap="thinking"]) .capture:not(.compact) .dome-ball { box-shadow: 0 12px 30px color-mix(in srgb, var(--dome) 55%, #000000); }

/* Text fields: shallower, with a shorter fade */
.welcome-form input, .sheet-body input:not(.switch):not([type="date"]), .page-body input:not(.switch), .shop-field input, .sheet-body textarea,
.search-field, #ai-input, .bal-input, .shop-new { box-shadow: inset 2px 2px 4px var(--nd), inset -2px -2px 4px var(--nl) !important; }

/* The new-entry card's moment: blue behind it; dragged left it turns orange, dragged right white */
body[data-cap="confirming"] {
  --ink: #ffffff; --muted: #b7c3d9; --hair: rgba(255, 255, 255, 0.12); --accent: #3ddc97; --on-accent: #0c0f14;
  --nd: rgba(0, 0, 0, 0.35); --nl: rgba(255, 255, 255, 0.06);
  --surface: #22365e; --soft: #1a2a4a;
  --bg: color-mix(in srgb, #ffffff calc(var(--pull-r, 0) * 85%), color-mix(in srgb, #c8681e calc(var(--pull-l, 0) * 100%), #1c2f55));
  color-scheme: dark;
}
body[data-cap="confirming"] .side-pill-text { color: color-mix(in srgb, #1c2f55 calc(var(--pull-r, 0) * 100%), #d6deec); }
/* The card a little taller, the two round buttons a little lower */
.receipt { padding: 22px 18px 20px; gap: 16px; }
.verdict { padding-top: 34px; }

/* Report: the arrows sit around the period's name (no extra height, nothing squeezed) */
.rep-period { display: flex; align-items: center; gap: 2px; margin-left: -8px; }
.rep-step { display: grid; place-items: center; width: 28px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--accent); cursor: pointer; touch-action: manipulation; }
.rep-step:disabled { opacity: 0.25; cursor: default; }
.rep-step:active:not(:disabled) { transform: scale(0.9); }
/* Report: categories, the biggest and per day straight on the ground; «Ποιος» much smaller */
.rep-card.rep-flat { padding: 0 2px; background: transparent; box-shadow: none; }
.rep-card.rep-small { padding: 12px 14px; }
.rep-small .rep-pie { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 0; }
.rep-small .rep-pie svg { width: 96px; height: 96px; flex: none; }
.rep-small .rep-pie-label { justify-content: flex-start; text-align: left; }
.rep-send { width: 100%; margin-top: 4px; }
.rep-send-status:empty { display: none; }
.rep-send-status { margin: -12px 0 0; text-align: center; }
/* The three figures each with a small icon */
.rep-tile span { display: inline-flex; align-items: center; gap: 5px; }
.rep-tile span svg { flex: none; opacity: 0.85; }

/* Accounts: the buttons and the filters under the graph, above the accounts */
.bal-chart + .bal-controls { margin-top: 2px; }
/* The new-transfer plus: a bigger raised circle with the green glow, level with the total, at the right edge */
.bal-head { align-items: center; }
#bal-move { width: 52px; height: 52px; border-radius: 50%; background: var(--surface) !important; color: var(--accent);
  box-shadow: 5px 5px 12px var(--nd), -5px -5px 12px var(--nl), 0 0 26px 2px color-mix(in srgb, var(--accent) 22%, transparent) !important; }
.bal-tools { margin-right: 0; }
/* Filters: no checkboxes; a chosen one is pressed in (green), like «Φίλτρα» when open */
.bal-tick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bal-tick { position: relative; padding: 0 14px; cursor: pointer; }
.bal-tick:has(input:checked) { color: var(--accent); box-shadow: var(--in-s) !important; }
.bal-tick:has(input:not(:checked)) { color: var(--muted); }
.bal-tick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Shopping list: the thing's emoji (or its aisle's icon) on the right */
.shop-pic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--muted); }
.shop-pic.emoji { font-size: 30px; line-height: 1; }
.shop-row.taken .shop-pic { opacity: 0.45; }
/* «+ Προσθήκη στη λίστα» waits greyed until the first letter */
#shop-done.adding:disabled { opacity: 0.45; }
.rep-card.rep-small { flex-direction: row; align-items: center; gap: 16px; padding: 10px 14px; }
.rep-small .rep-h { flex: none; }
.rep-small .rep-pie { flex: 1; min-width: 0; }
.rep-small .rep-pie svg { width: 72px; height: 72px; }
body[data-cap="confirming"] { transition: background-color 0.15s linear, color 0.3s ease; }

/* ═══ v0.17.1 ═══ */
/* The plain home button's glow: a layer as big as the screen, centred on the button (--glow-y, app.js), so it fades
   out softly over the whole screen instead of being cut at the sides and below */
html[data-home="button"] .capture:not(.compact) .stage::before {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; translate: none; border-radius: 0; z-index: -1;
  background: radial-gradient(circle at 50% var(--glow-y, 70%), color-mix(in srgb, var(--glow-c) 22%, transparent) 0, color-mix(in srgb, var(--glow-c) 9%, transparent) 150px, color-mix(in srgb, var(--glow-c) 3%, transparent) 300px, transparent 460px);
}
html.kb .capture .stage::before { display: none; }

/* Report: more air between its parts */
.report { gap: 34px; }
.rep-notes { margin-top: -22px; }
.rep-send-status { margin-top: -24px; }
/* The total: a small grey arrow up-right before the € (money going out) */
.rep-total::before {
  content: ''; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.18em; vertical-align: 0.12em; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Search: a taller field */
.search-bar { height: 56px; }
.search-field { height: 52px; padding-left: 16px; }
.search-field input { font-size: 17px; }

/* The card's moment: dragged right it goes to the app's own colour (not white); undone, it stays orange and then
   fades back home slowly */
:root { --ground: #e4e8ed; --ground-ink: #0f141a; }
:root[data-theme="dark"] { --ground: #1b2027; --ground-ink: #e8ecf1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #1b2027; --ground-ink: #e8ecf1; } }
body[data-cap="confirming"] { --bg: color-mix(in srgb, var(--ground) calc(var(--pull-r, 0) * 100%), color-mix(in srgb, #c8681e calc(var(--pull-l, 0) * 100%), #1c2f55)); }
body[data-cap="confirming"] .side-pill-text { color: color-mix(in srgb, var(--ground-ink) calc(var(--pull-r, 0) * 100%), #d6deec); }
body { transition: background-color 0.8s ease, color 0.5s ease; }

/* ═══ v0.18.0 · «Μελάνι & χαρτί» (proposal A from the styleguide) ═══════════════════════════════════════════════
   Blue receipt ink as the main colour, on warm paper (light) or graphite (dark). Green only for good news (income,
   under budget); amber when something goes over; spending stays in the text colour, never red. */
:root {
  --ground: #ebe7e0; --ground-ink: #1d1f24;
  --bg: #ebe7e0; --surface: #ebe7e0; --ink: #1d1f24; --muted: #77726a; --hair: rgba(29, 31, 36, 0.12);
  --accent: #2242c8; --on-accent: #ffffff; --soft: #dde3f6; --brand: #2242c8;
  --good: #2f7a5a; --over: #b8771f;
  --quiet: #7f796f; --quote: #6479cf; --quote-glow: none;
  --nd: rgba(166, 155, 138, 0.55); --nl: rgba(255, 253, 248, 0.95);
  --danger-bg: #efe0dc; --tick-line: rgba(119, 114, 106, 0.45);
  --tab-bg: #ebe7e0; --tab-ink: #7f796f; --tab-on: #2242c8; --chart-prev: #a8a196;
  --m0: #2242c8; --on-m0: #ffffff;
}
:root[data-theme="dark"] {
  --ground: #1c2029; --ground-ink: #e9ebf2;
  --bg: #1c2029; --surface: #1c2029; --ink: #e9ebf2; --muted: #8a92a3; --hair: rgba(233, 235, 242, 0.12);
  --accent: #9db0ff; --on-accent: #141a33; --soft: #232b45; --brand: #9db0ff;
  --good: #7cc4a0; --over: #e0a458;
  --quiet: #59627c; --quote: #6f7db8; --quote-glow: 0 0 3px rgba(111, 125, 184, 0.23), 0 0 18px rgba(111, 125, 184, 0.23);
  --nd: rgba(0, 0, 0, 0.55); --nl: rgba(255, 255, 255, 0.045);
  --danger-bg: #2a1f26; --tick-line: rgba(138, 146, 163, 0.45);
  --tab-bg: #1c2029; --tab-ink: #7d869a; --tab-on: #9db0ff; --chart-prev: #5a6276;
  --m0: #9db0ff; --on-m0: #141a33;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #1c2029; --ground-ink: #e9ebf2;
    --bg: #1c2029; --surface: #1c2029; --ink: #e9ebf2; --muted: #8a92a3; --hair: rgba(233, 235, 242, 0.12);
    --accent: #9db0ff; --on-accent: #141a33; --soft: #232b45; --brand: #9db0ff;
    --good: #7cc4a0; --over: #e0a458;
    --quiet: #59627c; --quote: #6f7db8; --quote-glow: 0 0 3px rgba(111, 125, 184, 0.23), 0 0 18px rgba(111, 125, 184, 0.23);
    --nd: rgba(0, 0, 0, 0.55); --nl: rgba(255, 255, 255, 0.045);
    --danger-bg: #2a1f26; --tick-line: rgba(138, 146, 163, 0.45);
    --tab-bg: #1c2029; --tab-ink: #7d869a; --tab-on: #9db0ff; --chart-prev: #5a6276;
    --m0: #9db0ff; --on-m0: #141a33;
  }
}
/* Dark: the small print of the report, the accounts and the header a little brighter than the home's quiet words */
:root[data-theme="dark"] :is(#report, #accounts, .top, .people) { --quiet: #9aa2b4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(#report, #accounts, .top, .people) { --quiet: #9aa2b4; } }
/* Recording and thinking keep their red and purple; their accent is the soft ink */
body[data-cap="listening"], body[data-cap="thinking"] { --accent: #9db0ff; --on-accent: #141a33; --good: #7cc4a0; }
/* Good news in green, going over in amber */
.income-head .num, .arrow.in, .row-amount.in, .bubble-amount.in, .search-sums .num.in, .rep-compare.down, .rep-tile .in { color: var(--good); }
.rep-compare.up, .rep-tile .neg { color: var(--over); }

/* The plain button's glow: taller than any screen (an installed iPhone app can report a short height), and it steps
   aside once the page scrolls, so the month's header never sits on it */
html[data-home="button"] .capture:not(.compact) .stage::before { height: calc(100lvh + 240px); transition: opacity 0.35s ease, background 0.5s ease; }
html.scrolled .capture .stage::before { opacity: 0; }

/* The card's moment: only the background changes (blue, orange, the app's colour); the card keeps the app's look */
body[data-cap="confirming"] {
  --ink: var(--ground-ink); --muted: inherit; --hair: inherit; --surface: var(--ground); --soft: inherit; --accent: inherit; --on-accent: inherit;
  --nd: inherit; --nl: inherit; color-scheme: inherit;
  color: var(--ground-ink);
}
body[data-cap="confirming"] .undone { color: #ffffff; }
/* Undone or kept: the two round buttons just fade, no shadow or scale left behind */
.capture.decided .side-pill, .capture.decided .side-pill.undo, .capture.decided .side-pill.fix { transform: none; transition: opacity 0.18s ease; }
.capture.decided .side-pill-shape { box-shadow: none; transition: none; }

/* Shopping: «Αγοράστηκαν» hangs from under the list; its top runs under the list's rounded corners */
#shop-items { position: relative; z-index: 1; }
.shop-finish {
  position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 76px; margin-top: -38px; padding: 22px 16px 0; border: 0; border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--accent); color: var(--on-accent); font: 700 16px var(--sans); cursor: pointer; touch-action: manipulation;
  box-shadow: 5px 5px 12px var(--nd), -5px 0 12px var(--nl);
}
.shop-finish:active { filter: brightness(0.95); }
.shop-finish:disabled { opacity: 0.6; }

/* ═══ v0.18.1 ═══ */
/* Undone/kept: the two round buttons leave at once (a fade left ghosts on the iPhone) */
.capture.decided .side-pill, .capture.decided .side-pill.undo, .capture.decided .side-pill.fix { visibility: hidden; opacity: 0; transition: none; animation: none; }

/* The report's pies: a ring with thin gaps, the total (or the tapped piece) in the middle, a legend of chips under it */
.rep-pie { gap: 14px; }
.pie-wheel { position: relative; display: grid; place-items: center; width: 232px; height: 232px; margin: 0 auto; }
.pie-wheel svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pie-track { fill: none; stroke: var(--surface); filter: drop-shadow(3px 3px 6px var(--nd)) drop-shadow(-3px -3px 6px var(--nl)); }
.rep-pie .slice { stroke: none; transform: translate(0, 0); transition: transform 0.25s var(--ease), opacity 0.2s ease; }
.rep-pie .slice.on { transform: translate(var(--dx), var(--dy)); }
.rep-pie .slice.dim { opacity: 0.28; }
.pie-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; text-align: center; }
.pie-center strong { font-size: 24px; color: var(--ink); letter-spacing: -0.02em; }
.pie-center span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pie-center .pie-center-name { max-width: 120px; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pie-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pie-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 13px var(--sans); box-shadow: var(--out-s); cursor: pointer; }
.pie-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pie-chip-pct { color: var(--muted); font-size: 12px; }
.pie-chip.on { box-shadow: var(--in-s); color: var(--accent); }
/* «Ποιος»: the same ring, small, with its chips beside it */
.rep-small .rep-pie { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
.rep-small .pie-wheel { width: 76px; height: 76px; margin: 0; flex: none; }
.rep-small .pie-track, .rep-small .pie-center { display: none; }
.rep-small .pie-legend { justify-content: flex-start; }
.rep-small .rep-pie svg { width: 100%; height: 100%; }

/* v0.18.2: the bottom bar slides off while scrolling down, back on the first upward scroll (app.js) */
.tabbar.shown.away { transform: translate(-50%, calc(100% + 40px)); pointer-events: none; }

/* ═══ v0.18.3 · Header 5: the family's circles, the wordmark beside them, the three buttons in one raised capsule ═══ */
.top.top5 { justify-content: flex-start; gap: 12px; height: 48px; }
.top5 .who { flex: none; height: 38px; margin: 0; padding: 0; }
.top5 .names { display: none; }
.top5 .avatars { height: 38px; }
.top5 .wordmark { flex: 1; min-width: 0; font-size: 26px; text-align: left; }
.top5 .top-actions { flex: none; display: flex; align-items: center; gap: 2px; height: 44px; margin: 0; padding: 0 5px; border-radius: 999px; background: var(--surface); box-shadow: var(--out-s); }
.top5 .top-actions .icon-btn { width: 36px; height: 36px; }
.top5 .top-sep { display: block; width: 1px; height: 18px; background: var(--hair); }
@media (max-width: 359px) { .top.top5 { gap: 8px; } .top5 .wordmark { font-size: 22px; } }
/* The moments: the capsule and the circles fade out together */
.top5 .who { transition: opacity 0.35s ease; }
body:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"]) :is(.top5 .who, .top5 .top-actions) { opacity: 0; pointer-events: none; }
.top5 .top-actions { transition: opacity 0.35s ease; }

/* ═══ v0.18.4 · the plain home button as a soft square (concept ΣΤ) ═════════════════════════════════════════════
   Same centre as the round button, so nothing else on the home moves (the stage keeps its 168 px). At rest a raised
   rounded square of the ground with a faint light-to-dark slope; listening and thinking keep their colour and ring. */
:root { --sq-hi: #f3efe9; --sq-lo: #e1dcd3; }
:root[data-theme="dark"] { --sq-hi: #222736; --sq-lo: #181b23; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sq-hi: #222736; --sq-lo: #181b23; } }
html[data-home="button"] .capture:not(.compact) .dome-ball,
html[data-home="button"] .capture:not(.compact) .dome::before { width: 136px; height: 136px; margin: -68px 0 0 -68px; border-radius: 44px; }
html[data-home="button"] body:not([data-cap="listening"]):not([data-cap="thinking"]) .capture:not(.compact) .dome-ball {
  background-image: linear-gradient(145deg, var(--sq-hi), var(--sq-lo));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 13%, transparent), 10px 10px 24px var(--nd), -10px -10px 24px var(--nl);
}
html[data-home="button"] .capture:not(.compact) .dome-icon svg { width: 40px; height: 40px; }

/* v0.18.5 · while recording, thinking or confirming, the wordmark glides to the middle of the header (app.js
   placeLogo sets --logo-x) and back after, with an easy ease both ways. */
.top5 .wordmark { transition: translate 0.6s cubic-bezier(0.45, 0, 0.25, 1); }
body:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"]) .top5 .wordmark { translate: var(--logo-x, 0) 0; }
@media (prefers-reduced-motion: reduce) { .top5 .wordmark { transition: none; } }

/* ═══ v0.18.6 ═══════════════════════════════════════════════════════════════════════════════════════════════════
   The owl bar sits where the bottom bar is; when the bar comes back it lifts the owl bar on top of it. */
.app.has-tabs .ask-bar { bottom: calc(env(safe-area-inset-bottom, 0px) + 9px); }
.app.has-tabs:has(.tabbar.shown:not(.away)) .ask-bar.shown { transform: translateY(calc(-1 * (var(--tab-h) + 12px))); }
.ask-bar { transition: transform 0.4s var(--ease), opacity 0.25s ease; }
/* «Απλό» ⇄ «Σωρευτό» as a picture */
.bal-stack { display: grid; place-items: center; min-width: 44px; padding: 0; color: var(--muted); }
/* Report: no arrow before the total; the big section titles like the settings page's (Κατηγορίες, Λογαριασμοί) */
.rep-total::before { content: none; }
.rep-h-big { margin-top: 18px; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
/* Shopping: «Παλιότερες λίστες» with the average cost on the right */
.shop-old-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shop-old-title[hidden] { display: none; }
.shop-old-title .sub-title { margin: 0; }
.shop-avg { font-weight: 600; text-align: right; }
/* Fields: a shorter, tighter inner shadow so they read as clearly sunk */
.welcome-form input, .sheet-body input:not(.switch):not([type="date"]), .page-body input:not(.switch), .shop-field input, .sheet-body textarea,
.search-field, #ai-input, .bal-input, .shop-new { box-shadow: inset 1.5px 1.5px 2.5px var(--nd), inset -1.5px -1.5px 2.5px var(--nl) !important; }

/* ═══ v0.18.7 ═══════════════════════════════════════════════════════════════════════════════════════════════════
   Report pies: the title in two lines on the left, a little lower; the pie on the right */
.rep-pie-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 18px; }
.rep-pie-row .rep-h-big { margin: 0; padding-top: 28px; line-height: 1.1; }
.rep-pie-row .rep-pie { flex: none; width: 172px; margin: 0; padding: 0; }
.rep-pie-row .pie-wheel { width: 172px; height: 172px; margin: 0; }
/* The chart's key under its dates */
#rep-pace-legend { margin-top: 12px; }
/* The pages' main amounts: bolder, the digits closer */
#list-sum, #rep-total, #bal-total { font-weight: 800; letter-spacing: -0.07em; }

/* ═══ v0.18.8 · Accounts as tiles: two by two, rounded, tinted with each account's colour; the change over the
   graph's period (1Μ / 6Μ / 1Ε) on each ═════════════════════════════════════════════════════════════════════════ */
.bal-layout { margin-left: 0; }
.bal-list.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 6px 0 4px; overflow: visible; }
.bal-tile {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 14px 12px; border-radius: 20px;
  background: color-mix(in srgb, var(--c) 16%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent), 5px 5px 12px var(--nd), -5px -5px 12px var(--nl);
}
.bal-tile-name { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-tile-name::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.bal-tile-amount { margin-top: 6px; font-size: 20px; font-weight: 800; letter-spacing: -0.06em; color: var(--ink); white-space: nowrap; }
.bal-tile-amount.neg { color: var(--danger); }
.bal-tile-change { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; font-size: 11.5px; color: var(--muted); }
.bal-tile-change .num { letter-spacing: -0.03em; }
.bal-tile-change.up .num { color: var(--good); }
.bal-tile-change.down .num { color: var(--over); }
.bal-tile-change b { margin-left: auto; font-weight: 700; color: var(--quiet); }

/* ═══ v0.18.9 · The home words typed, with a blinking cursor (capture.js typeIdle). The rest of the sentence is laid
   out but invisible (no glow either), so nothing moves; the cursor takes no width. ═══════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The spans inside the title are the sentence itself: not the small grey hint style (.hold-text span), never hidden
   when empty, and inline only (an inline-block cursor would let a word break where the cursor is). */
#hold-title .tw, #hold-title .tw span { display: inline; font: inherit; letter-spacing: inherit; color: inherit; }
#hold-title .tw span.tw-rest { color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
#hold-title { position: relative; }
#hold-title .tw-caret {
  position: absolute; display: block; left: 0; top: 0; width: 2px; height: 1.2em; margin-left: 1px; border-radius: 1px; pointer-events: none;
  background: var(--accent); animation: tw-blink 1.05s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }

/* ═══ v0.19.1 · Choice rows and switches follow a sideways swipe too (swipe-controls.js) ════════════════════════ */
.segmented, input.switch, .switch-row { touch-action: pan-y; }
.segmented.seg-dragging button[aria-pressed="true"]:not(.seg-on) { background: transparent; color: var(--muted); box-shadow: none; }
.segmented button.seg-on { background: var(--surface); color: var(--ink); box-shadow: var(--out-s); }
input.switch.sw-on, input.switch.sw-on:checked { background: var(--accent) !important; box-shadow: var(--switch-on-inset); }
input.switch.sw-on::after { transform: translateX(20px); }
input.switch.sw-off, input.switch.sw-off:checked { background: var(--surface) !important; box-shadow: var(--in-s); }
input.switch.sw-off::after { transform: none; }

/* ═══ v0.19.2 · Report: the graph on the ground, the three figures under it in raised boxes; more air above
   «Από ποιους λογαριασμούς…». Shopping: the count in the middle, no instructions. ═══════════════════════════════ */
.rep-card.rep-pace-card { padding: 0 2px; }
.rep-tiles.rep-tiles-boxed { gap: 10px; margin-top: -14px; }
.rep-tiles.rep-tiles-boxed .rep-tile { gap: 6px; padding: 12px 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--out-s); }
.rep-card.rep-accounts-card { margin-top: 22px; }
.shop-count-line { text-align: center; }
.rep-tiles.rep-tiles-boxed .rep-tile span { display: block; white-space: normal; overflow: visible; line-height: 1.25; }
.rep-tiles.rep-tiles-boxed .rep-tile span svg { display: block; margin-bottom: 4px; }
.rep-tiles.rep-tiles-boxed .rep-tile strong { margin-top: auto; }

/* ═══ v0.19.3 · Header icons: no capsule, the three icons in the app's blue with thin dividers (his screenshot) ═══ */
.top5 .top-actions { background: transparent; box-shadow: none; padding: 0; margin-right: -6px; }
.top5 .top-actions .icon-btn:not([aria-pressed="true"]) { color: var(--accent); }
.top5 .top-sep { height: 22px; background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ═══ v0.20.0 · Shopping: the field floats above the bottom bar (not in the page behind it); the bar hides and
   returns on scroll like every page, the field going down to its place; while typing, the bar gives its place to
   the «Προσθήκη» button. Fixed layers here: no transform on .shop-bar while adding (it would hold the button). ═══ */
.shopping { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tab-h) + 112px); }
.shop-bar {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px + var(--tab-h) + 12px); z-index: 19;
  width: min(calc(100% - 32px), 420px); margin: 0 auto; padding: 0; background: none; transition: transform 0.4s var(--ease);
}
.app:has(.tabbar.away) .shop-bar:not(.adding) { transform: translateY(calc(var(--tab-h) + 12px)); }
.shop-new { box-shadow: 0 10px 26px var(--shadow), inset 1.5px 1.5px 2.5px var(--nd), inset -1.5px -1.5px 2.5px var(--nl) !important; }
.shop-bar #shop-done {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); width: min(calc(100% - 32px), 420px); height: var(--tab-h);
  margin: 0 auto; border-radius: 999px; animation: fade-up 0.25s var(--ease) backwards;
}
html.kb .shop-bar { bottom: calc(8px + var(--tab-h) + 12px); }
html.kb .shop-bar #shop-done { bottom: 8px; }
.app:has(#shopping:not([hidden]) .shop-bar.adding) .tabbar { transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; }

/* Report: the key right under the dates (the three boxes stay where they were); in the boxes the word and the amount
   on top, the icon large and faint in the bottom right corner. */
#rep-pace-legend { margin-top: -2px; }
.rep-tiles.rep-tiles-boxed { margin-top: 0; }
.rep-tiles.rep-tiles-boxed .rep-tile { position: relative; justify-content: flex-start; gap: 4px; min-height: 92px; overflow: hidden; }
.rep-tiles.rep-tiles-boxed .rep-tile strong { margin-top: 0; }
.rep-tile-icon { position: absolute; right: 8px; bottom: 6px; display: grid; color: var(--ink); opacity: 0.1; pointer-events: none; font-style: normal; }
/* «Τα μεγαλύτερα έξοδα»: cards side by side, swiped sideways */
.rep-biggest { flex-direction: row; gap: 12px; margin: 0 -16px; padding: 6px 16px 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.rep-biggest::-webkit-scrollbar { display: none; }
.rep-big { flex: 0 0 136px; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 118px; padding: 14px 14px 12px; border: 0; border-radius: 20px; background: var(--surface); box-shadow: var(--out-s); scroll-snap-align: start; }
.rep-big:first-child { border-top: 0; }
.rep-big .rep-big-amount { margin-bottom: auto; font-size: 20px; font-weight: 800; letter-spacing: -0.05em; }
.rep-big .rep-big-desc { max-width: 100%; font-size: 14px; }
.rep-big .rep-big-sub { max-width: 100%; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A sentence of what the numbers mean, under the categories and under the accounts */
.rep-insight { margin: 14px 2px 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink); text-align: left; }
#rep-acc-note { margin-top: -18px; }
/* Accounts graph: soft grey week / month / quarter lines; the stacked bands' names where they start */
.bal-chart .vgrid { stroke: var(--hair); stroke-width: 1; }
.bal-chart .band-label { font-family: var(--sans); font-size: 9px; font-weight: 700; fill: var(--ink); opacity: 0.8; pointer-events: none; }
/* Home: the month's arrows a little bigger */
.list-head .nav { width: 48px; height: 48px; }
/* «Επεξεργασία κίνησης»: taller buttons with a bin, an X and a tick instead of words */
#editor .actions { gap: 10px; }
#editor .actions .button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 60px; }
#edit-delete[data-armed="yes"] span { font-size: 14px; font-weight: 700; }
/* The new entry's card: the amount very large on its own line, what it was for under it; the card taller */
.rc-title { display: flex; flex-direction: column; gap: 6px; }
.rc-amount { display: block; font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -0.06em; }
.rc-what { font-size: 20px; font-weight: 700; }
.moment .receipt { gap: 22px; padding: 26px 20px 24px; min-height: 280px; }
.feed .rc-amount { font-size: 32px; }
.feed .rc-what { font-size: 16px; }

/* ═══ Textures (textures/*.png, made by devtools/make_textures.py; edit freely in Photoshop): a very faint paper grain
   in the sunk fields, a very faint matte rubbery grain on the raised neutral buttons and boxes. Each tile averages
   the ground colour exactly; only elements painted in the ground colour get one (never blue or red buttons). ═══ */
:root { --tex-paper: url("textures/paper-light.png"); --tex-matte: url("textures/matte-light.png"); }
:root[data-theme="dark"] { --tex-paper: url("textures/paper-dark.png"); --tex-matte: url("textures/matte-dark.png"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tex-paper: url("textures/paper-dark.png"); --tex-matte: url("textures/matte-dark.png"); } }
.welcome-form input, .sheet-body input:not(.switch):not([type="date"]), .page-body input:not(.switch), .shop-field input, .sheet-body textarea,
.search-field, #ai-input, .bal-input, .shop-new, .segmented, input.switch:not(:checked) {
  background-image: var(--tex-paper) !important; background-size: 128px 128px !important;
}
.tabbar, .button:not(.primary):not(.danger):not(.soft), .icon-btn.round:not([aria-pressed="true"]):not(.quiet), .nav, .pill, .bal-range-btn, .bal-split:not(.active),
.segmented button[aria-pressed="true"], .rep-tiles-boxed .rep-tile, .rep-big, .rep-card:not(.rep-flat), .shop-list, .lrows {
  background-image: var(--tex-matte); background-size: 128px 128px;
}

/* ═══ The camera inside the app (capture.js): a rounded window under the header down to about the middle of the
   screen, and an ear rising from it over the camera button (so the button reads as on), joined by soft curves. ═══ */
.cam { position: fixed; inset: 0; z-index: 40; pointer-events: none; --cam-bg: #0d0f14; }
.cam[hidden] { display: none; }
.cam-window {
  position: fixed; left: 16px; right: 16px; top: var(--cam-top); height: var(--cam-h); overflow: hidden; border-radius: 28px;
  background: var(--cam-bg); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35); pointer-events: auto;
  transform-origin: calc(var(--ear-x) - 16px + var(--ear-w) / 2) 0; animation: cam-in 0.38s var(--ease) both;
}
@keyframes cam-in { from { opacity: 0; transform: scale(0.9) translateY(-12px); } }
.cam-window video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cam-ear {
  position: fixed; left: var(--ear-x); top: var(--ear-top); z-index: 1; width: var(--ear-w); height: var(--ear-h);
  display: grid; justify-items: center; align-content: start; padding: calc((var(--ear-w) - 8px - 22px) / 2 + 4px) 0 0;
  border: 0; border-radius: 22px 22px 0 0; background: var(--cam-bg); color: #ffffff; cursor: pointer; pointer-events: auto;
  animation: fade-in 0.2s ease both;
}
.cam-ear::before, .cam-ear::after { content: ''; position: absolute; bottom: 2px; width: 14px; height: 14px; }
.cam-ear::before { left: -14px; background: radial-gradient(circle at 0 0, transparent 13.5px, var(--cam-bg) 14px); }
.cam-ear::after { right: -14px; background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--cam-bg) 14px); }
@keyframes fade-in { from { opacity: 0; } }
.cam-btn { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.42); color: #ffffff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cam-close { top: 12px; right: 12px; }
.cam-pick { left: 16px; bottom: 18px; }
.cam-shot {
  position: absolute; left: 50%; bottom: 14px; width: 66px; height: 66px; margin-left: -33px; padding: 0; border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%; background: #ffffff; background-clip: content-box; padding: 4px; cursor: pointer; transition: transform 0.12s ease, opacity 0.2s ease;
}
.cam-shot:active { transform: scale(0.92); }
.cam-shot:disabled { opacity: 0.35; }
.cam-note { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: #ffffff; }
.cam-note[hidden] { display: none; }
.cam-note p { margin: 0; font-size: 15px; font-weight: 600; }
#camera-open.cam-on { visibility: hidden; }

/* ═══ v0.21.0 · home scenes (scene.js): «Μπλοκάκι», the plain button on a photo ════════════════════════════════════
   The photo is a layer behind the home only (it scrolls away with it and fades into the ground below «Οι κινήσεις του
   μήνα»); day with the light theme, dusk with the dark one. The button and the handle keep the plain button's places;
   only the button's shadow changes: a physical one falling on the paper, away from the scene's light. In the
   recording/thinking/card moments the scene steps aside and the moment's colours come back as before. */
.scene { display: none; position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: calc(var(--app-h, 100dvh) + 40px); pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent);
  transition: opacity 0.5s ease; }
html[data-scene] .app:has(#home:not([hidden])) .scene { display: block; }
body:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"]) .scene { opacity: 0; transition: opacity 0.55s ease 0.05s; }
html[data-scene]:has(#home:not([hidden])) body[data-cap="listening"] { transition: background-color 0s, color 0.3s ease; }
html[data-scene]:has(#home:not([hidden])) body[data-cap="idle"] { transition: background-color 0s linear 0.55s, color 0.3s ease; }
.scene-side { position: absolute; inset: 0; background: #efe3d3; } /* the paper's tone while the photo loads */
.scene-side.night { background: #c9976c; }
.scene-bg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.scene-side.night, .ink-side.night { display: none; }
:root[data-theme="dark"] :is(.scene-side, .ink-side).day { display: none; }
:root[data-theme="dark"] :is(.scene-side, .ink-side).night { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.scene-side, .ink-side).day { display: none; }
  :root:not([data-theme="light"]) :is(.scene-side, .ink-side).night { display: block; }
}

/* The handwritten words: where the typed ones are (centred on their place, which keeps its size); typed again in the
   moments and when the home turns compact */
.hold-text { position: relative; }
.scene-ink { display: none; position: absolute; left: 50%; top: calc(50% + (clamp(12px, 7dvh, 60px) - 12px) / 2); translate: -50% -50%; pointer-events: none; }
.ink-side { position: relative; }
.ink-layer { display: block; height: auto; max-width: none; }
.ink-layer:not(.first) { position: absolute; top: 0; left: 0; }
html[data-scene] body:not(:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"])) .capture:not(.compact) .scene-ink { display: block; }
html[data-scene] body:not(:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"])) .capture.saying:not(.compact) .hold-text:has(.ink-layer) #hold-title { display: none; }
/* A message (after a failed recording, «Κρατήθηκε στο κινητό.», the hint under the words) goes low, right above the
   button, under the handwriting */
html[data-scene] body:not(:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"])) .capture:not(.compact) .hold-text:has(.ink-layer) { justify-content: flex-end; gap: 4px; padding-bottom: 6px; }
html[data-scene] body:not(:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"])) .capture:not(.saying):not(.compact) .hold-text:has(.ink-layer) #hold-title { font-size: 19px; font-weight: 700; line-height: 1.25; max-width: 300px; text-wrap: balance; text-shadow: none; }

/* No coloured glow or ring on the paper at rest */
html[data-scene] body:not(:is([data-cap="listening"], [data-cap="thinking"])) .capture:not(.compact) .stage::before,
html[data-scene] body:not(:is([data-cap="listening"], [data-cap="thinking"])) .capture:not(.compact) .dome::before { opacity: 0; }

/* Day: the sun from the upper left, as in the photo's leaf shadows, so the shadow falls long, down and to the right: a
   dark contact line, a tight occlusion, a near shadow and long soft ones, warm brown (never grey) */
html[data-scene][data-home="button"] body:not([data-cap="listening"]):not([data-cap="thinking"]) .capture:not(.compact) .dome-ball {
  background-image: linear-gradient(150deg, #fbf7ef 0%, #f1eadd 55%, #e7dece 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 2px rgba(120, 92, 55, 0.12), inset 0 0 0 1px rgba(120, 92, 55, 0.07),
    0 1px 1px rgba(74, 56, 38, 0.55), 2px 3px 3px rgba(74, 56, 38, 0.45), 8px 10px 9px rgba(74, 56, 38, 0.36),
    22px 28px 20px -2px rgba(80, 62, 44, 0.32), 46px 58px 38px -6px rgba(84, 66, 48, 0.24), 80px 100px 64px -10px rgba(84, 66, 48, 0.15),
    118px 146px 96px -16px rgba(84, 66, 48, 0.08);
}
/* Dusk: a low warm sun from the left, so the shadow is longer still and lies more to the right; deeper and browner,
   with a thin warm rim of light on the button's upper left edge */
:root[data-theme="dark"][data-scene][data-home="button"] body:not([data-cap="listening"]):not([data-cap="thinking"]) .capture:not(.compact) .dome-ball {
  background-image: linear-gradient(150deg, #313749 0%, #252a38 55%, #1c202b 100%);
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 196, 140, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -3px 4px rgba(0, 0, 0, 0.25),
    0 1px 1px rgba(26, 10, 0, 0.70), 3px 3px 3px rgba(26, 10, 0, 0.60), 12px 10px 10px rgba(28, 11, 1, 0.48),
    32px 26px 20px -2px rgba(30, 12, 2, 0.42), 66px 52px 38px -6px rgba(30, 12, 2, 0.30), 112px 86px 62px -10px rgba(30, 12, 2, 0.18),
    166px 126px 90px -16px rgba(30, 12, 2, 0.09);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-scene][data-home="button"] body:not([data-cap="listening"]):not([data-cap="thinking"]) .capture:not(.compact) .dome-ball {
    background-image: linear-gradient(150deg, #313749 0%, #252a38 55%, #1c202b 100%);
    box-shadow:
      inset 1.5px 1.5px 0 rgba(255, 196, 140, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -3px 4px rgba(0, 0, 0, 0.25),
      0 1px 1px rgba(26, 10, 0, 0.70), 3px 3px 3px rgba(26, 10, 0, 0.60), 12px 10px 10px rgba(28, 11, 1, 0.48),
      32px 26px 20px -2px rgba(30, 12, 2, 0.42), 66px 52px 38px -6px rgba(30, 12, 2, 0.30), 112px 86px 62px -10px rgba(30, 12, 2, 0.18),
      166px 126px 90px -16px rgba(30, 12, 2, 0.09);
  }
}
/* Day ink on the paper: the light theme's own; on the dusk paper the header, the words and the handle wear dark ink
   (the dark theme's pale blue would vanish on sand). The bottom bar keeps its own look. */
:root[data-theme="dark"][data-scene] body:not(:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"])) .app:has(#home:not([hidden])) :is(.top5, .hold-text, .list-handle) {
  --accent: #26357f; --ink: #2a2118; --muted: #5b4632; --quiet: #4d3a28; --hair: rgba(70, 44, 20, 0.28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-scene] body:not(:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"])) .app:has(#home:not([hidden])) :is(.top5, .hold-text, .list-handle) {
    --accent: #26357f; --ink: #2a2118; --muted: #5b4632; --quiet: #4d3a28; --hair: rgba(70, 44, 20, 0.28);
  }
}

/* ═══ v0.21.1 ═══════════════════════════════════════════════════════════════════════════════════════════════════
   The plain button stays where it is at rest while recording and thinking: the home keeps the bottom bar's room (the
   bar itself steps aside as before), so the button no longer drops. */
html[data-home="button"]:not(.kb) body:is([data-cap="listening"], [data-cap="thinking"]) .app.has-tabs:not(:has(.capture.compact)) {
  --bottom-inset: calc(env(safe-area-inset-bottom, 0px) + var(--tab-h) + 20px);
}
/* The scene comes in softly when the home does (after a swipe or a tap on the bar) */
/* (the scene now slides in with the home: no fade of its own) */
/* While a page moves, the glow is pulled back to the screen's corner (app.js pinGlow) */
html[data-home="button"] .app.paging .capture:not(.compact) .stage::before { left: var(--gx, 0px); top: var(--gy, 0px); transition: none; }

/* The totals at the top of Αναφορά and Λογαριασμοί: bigger numbers, more room above and below; the eye, the button on
   the right and its word sit on the number's middle */
#rep-total, #bal-total { font-size: 44px; line-height: 48px; }
:is(#report, #accounts) .blue-top > .bal-head { align-items: flex-end; margin-top: 22px; margin-bottom: 12px; }
#accounts .blue-top > .bal-head > .bal-tools { margin-bottom: -2px; }
#report .blue-top > .bal-head > .rep-mode { margin-bottom: 7px; }
.bal-top-row { align-items: center; }
.bal-top { gap: 6px; }

/* The two short insights of the report get room before and after */
.rep-insight { margin: 26px 2px 26px; }
#rep-acc-note { margin-top: 2px; }

/* The chat's bottom button: the home button's look (a raised soft square of the ground, the faint accent edge, the
   two shadows), kept wide; the mic in its middle, no round dome inside */
body:not([data-cap="listening"]):not([data-cap="thinking"]) .capture.compact .stage-box {
  bottom: 0; height: 84px; border: 0; border-radius: 30px; overflow: visible;
  background: linear-gradient(145deg, var(--sq-hi), var(--sq-lo));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 13%, transparent), 10px 10px 24px var(--nd), -10px -10px 24px var(--nl);
}
body:not([data-cap="listening"]):not([data-cap="thinking"]) .capture.compact .dome-ball { background: transparent; box-shadow: none; bottom: -20.5px; }
body:not([data-cap="listening"]):not([data-cap="thinking"]) .capture.compact .dome-ball::before,
body:not([data-cap="listening"]):not([data-cap="thinking"]) .capture.compact .dome-ball::after { display: none; }
body:not([data-cap="listening"]):not([data-cap="thinking"]) .capture.compact .dome::before { opacity: 0; }
body:not([data-cap="listening"]):not([data-cap="thinking"]) .capture.compact .dome-icon { color: var(--accent); }
body:not([data-cap="listening"]):not([data-cap="thinking"]) .capture.compact .stage:active .stage-box { scale: 0.985; }

/* v0.21.4 · No glow behind the plain button at rest (it whitened the screen as it came in, on opening and on coming
   back home); it shows only while recording and thinking, in the moment's colour. */
html[data-home="button"] body:not(:is([data-cap="listening"], [data-cap="thinking"])) .capture .stage::before { opacity: 0 !important; }

/* ═══ v0.21.5 ═══════════════════════════════════════════════════════════════════════════════════════════════════
   «Οι κινήσεις του μήνα» under the bottom bar, in the phone's home strip (when there is one: html.room-below). Its
   margins trade places so the first screen keeps its height: the buttons above do not move, nor does the bar. */
html.room-below body:not(:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"])) .app.has-tabs:not(:has(.capture.gone)) .list-handle {
  margin-top: calc(env(safe-area-inset-bottom, 0px) / 2 + var(--tab-h) + 46px);
  margin-bottom: calc(env(safe-area-inset-bottom, 0px) / 2 - 14px);
  height: 36px; position: relative; z-index: 21;
}
/* Without that strip there is no room for it beside the + (the plain button home): the page scrolls to the list */
html:not(.room-below)[data-home="button"] .list-handle { visibility: hidden; }

/* The + under the record button: the same raised soft square of the ground (smaller, still), a new entry by hand */
.add-new { display: none; }
html[data-home="button"] body:not(:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"])) .capture:not(.compact):not(.gone) .add-new {
  display: grid; place-items: center; position: absolute; z-index: 3; left: 50%; top: calc(100% - clamp(4px, 3dvh, 32px) + 12px);
  width: 52px; height: 52px; margin-left: -26px; padding: 0; border: 0; border-radius: 18px; color: var(--accent); cursor: pointer; touch-action: manipulation;
  background-color: var(--bg); background-image: linear-gradient(145deg, var(--sq-hi), var(--sq-lo));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 13%, transparent), 6px 6px 14px var(--nd), -6px -6px 14px var(--nl);
  transition: scale 0.15s ease, opacity 0.35s ease;
}
html[data-home="button"] .capture .add-new:active { scale: 0.95; }
/* On the paper (Μπλοκάκι) it wears the record button's paper and shadow, smaller */
html[data-scene][data-home="button"] body:not(:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"])) .capture:not(.compact):not(.gone) .add-new {
  background-image: linear-gradient(150deg, #fbf7ef 0%, #f1eadd 55%, #e7dece 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(120, 92, 55, 0.07),
    0 1px 1px rgba(74, 56, 38, 0.5), 2px 3px 3px rgba(74, 56, 38, 0.38), 8px 10px 9px -1px rgba(80, 62, 44, 0.28), 20px 26px 22px -6px rgba(84, 66, 48, 0.16);
}
:root[data-theme="dark"][data-scene][data-home="button"] body:not(:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"])) .capture:not(.compact):not(.gone) .add-new {
  background-image: linear-gradient(150deg, #313749 0%, #252a38 55%, #1c202b 100%); color: #9db0ff;
  box-shadow: inset 1px 1px 0 rgba(255, 196, 140, 0.2), 0 1px 1px rgba(26, 10, 0, 0.65), 3px 3px 3px rgba(26, 10, 0, 0.5), 12px 10px 10px -1px rgba(30, 12, 2, 0.4), 30px 24px 22px -6px rgba(30, 12, 2, 0.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-scene][data-home="button"] body:not(:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"])) .capture:not(.compact):not(.gone) .add-new {
    background-image: linear-gradient(150deg, #313749 0%, #252a38 55%, #1c202b 100%); color: #9db0ff;
    box-shadow: inset 1px 1px 0 rgba(255, 196, 140, 0.2), 0 1px 1px rgba(26, 10, 0, 0.65), 3px 3px 3px rgba(26, 10, 0, 0.5), 12px 10px 10px -1px rgba(30, 12, 2, 0.4), 30px 24px 22px -6px rgba(30, 12, 2, 0.22);
  }
}

/* The budget forecast: the days left as a big number with «ημέρες» under it, the words beside it smaller */
#rep-forecast.fc { display: flex; align-items: center; gap: 14px; }
.fc-num { display: flex; flex-direction: column; align-items: center; flex: none; line-height: 1; }
.fc-num b { font-size: 56px; font-weight: 800; letter-spacing: -0.05em; color: var(--ink); }
.fc-num small { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--quiet); }
.fc-rest { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--quiet); }

/* ═══ v0.21.6 · the card's moment ═══════════════════════════════════════════════════════════════════════════════
   The circles behind the card's category and account icons wear the card's own colour (pressed into it), not the
   screen's blue/orange behind the card. */
.receipt .rc-icon { background: var(--surface); box-shadow: inset 2px 2px 5px var(--nd), inset -2px -2px 5px var(--nl); color: var(--accent); }
body[data-cap="confirming"] .receipt .rc-icon { background: var(--ground); }

/* The tick between undo and correct: keeps the entry now. Filled with the accent, a little larger. */
.verdict { gap: 26px; }
.side-pill.ok { flex-direction: column; animation-name: circle-in; text-align: center; }
.side-pill.ok .side-pill-shape { width: 72px; height: 72px; margin-top: -4px; border: 0; background: var(--accent); color: var(--on-accent); transform: none;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 4px var(--shadow); }
body[data-cap="confirming"] .side-pill.ok .side-pill-shape { background: #6479cf; color: #ffffff; }
.side-pill.ok:active .side-pill-shape { filter: brightness(1.1); background: var(--accent); }
body[data-cap="confirming"] .side-pill.ok:active .side-pill-shape { background: #6479cf; }
.verdict.pulling .side-pill.ok { opacity: 0.35; transition: opacity 0.2s ease; }

/* The reward: paper confetti bursting from the card, then falling; the card gives a small happy pop */
.confetti { position: absolute; z-index: 0; width: 0; height: 0; pointer-events: none; } /* behind the card (z-index 1) */
.confetti i { position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; border-radius: 2px; opacity: 0;
  animation: confetti-burst 1.25s cubic-bezier(0.15, 0.7, 0.3, 1) var(--d, 0ms) forwards; }
.confetti i.round { width: 9px; height: 9px; border-radius: 50%; }
@keyframes confetti-burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.4); }
  45% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) * 0.6)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + var(--fall))) rotate(var(--r)) scale(0.9); }
}
.receipt.cheer { animation: card-cheer 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.moment .receipt.cheer { animation: card-cheer 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes card-cheer { 0% { scale: 1; } 40% { scale: 1.04; } 100% { scale: 1; } }
.receipt.settled .rc-dot { animation: dot-pop 0.45s cubic-bezier(0.3, 1.8, 0.5, 1); }
@keyframes dot-pop { 0% { scale: 0.4; } 60% { scale: 1.5; } 100% { scale: 1; } }

/* «Οι κινήσεις του μήνα» under the bar: when the page scrolls it goes behind the bar and is gone at once, so it never
   shows above it */
html.room-below body:not(:is([data-cap="listening"], [data-cap="thinking"], [data-cap="confirming"])) .app.has-tabs:not(:has(.capture.gone)) .list-handle { z-index: 1; }
html.room-below .list-handle.faded { transition: none; }

/* v0.21.7 · the supermarket's card in «Τα μεγαλύτερα έξοδα»: all its visits together, not tappable */
.rep-big.rep-big-group { cursor: default; }

/* ═══ v0.21.9 ═══════════════════════════════════════════════════════════════════════════════════════════════════
   The + beside the record button instead of below it (Ρυθμίσεις → Κουμπί +): on its middle line, a little gap away */
html[data-add][data-home="button"] body .capture:not(.compact):not(.gone) .add-new { top: calc(100% - clamp(4px, 3dvh, 32px) - 84px - 26px); }
html[data-add="left"][data-home="button"] body .capture:not(.compact):not(.gone) .add-new { left: calc(50% - 68px - 22px - 52px); margin-left: 0; }
html[data-add="right"][data-home="button"] body .capture:not(.compact):not(.gone) .add-new { left: calc(50% + 68px + 22px); margin-left: 0; }

/* Dragging a choice row: one knob slides under the finger (swipe-controls.js), the options' own raised looks wait */
.segmented.seg-dragging button { position: relative; z-index: 1; background: transparent !important; background-image: none !important; box-shadow: none !important; }
.segmented.seg-dragging button.seg-on { color: var(--ink); }
.seg-thumb { position: absolute; z-index: 0; border-radius: var(--r); background-color: var(--surface); background-image: var(--tex-matte); background-size: 128px 128px;
  box-shadow: var(--out-s); pointer-events: none; will-change: transform; }
/* Dragging a switch: the knob follows the finger's pull (--kx) and darts across once it lets go */
input.switch.sw-drag::after { transform: translateX(var(--kx, 0px)); transition: var(--kx-t, none); }

/* ═══ v0.21.10 ══════════════════════════════════════════════════════════════════════════════════════════════════
   The empty band at the bottom of the iPhone app. Opened from the Home Screen, the page runs under the status bar, but
   the phone (seen on iOS 18.7 up to 27) works the screen out as if the status bar took its height off the bottom:
   100dvh, 100%, position:fixed and window.innerHeight all stop 59–62pt short, and below them shows only the page's
   colour. Only 100lvh is the true height, and once the page itself is that tall the phone gives the whole screen back
   (100dvh and innerHeight follow, so the bar and the sheets sit at the real bottom). Measured in the iOS 27 simulator
   from a Home Screen icon: 812 → 874 pt on a 874-pt screen, also after a relaunch, coming back, and a keyboard.
   overflow:hidden keeps the page itself from scrolling into the extra height (the app scrolls inside .app). Inside
   @supports: on a phone without lvh, var(--app-h, 100lvh) would leave the app without a height at all. */
@supports (height: 100lvh) {
  html.ios-app { min-height: 100lvh; }
  html.ios-app:has(.app:not([hidden])) { height: 100lvh; overflow: hidden; }
  html.ios-app body:has(.app:not([hidden])) { height: 100lvh; }
  html.ios-app .app { height: var(--app-h, 100lvh); }
}

/* ═══ v0.22.0 ═══════════════════════════════════════════════════════════════════════════════════════════════════
   The list's field is a sibling of its page now (index.html): shown only with the page, fading in with it. */
#shopping[hidden] + .shop-bar { display: none; }
#shopping.entering + .shop-bar { animation: fade-in 0.5s var(--ease) backwards; }
.app.paging .shop-bar { transition: none; } /* follows the finger with its page (the release sets its own glide) */
.app:has(#shopping:not([hidden]) + .shop-bar.adding) .tabbar { transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; }

/* A clear red for what goes wrong (a negative balance, spending over the budget): the amber (--over) stays for the
   rest of the app. */
:root { --red: #c8402f; }
:root[data-theme="dark"] { --red: #ff7b6b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --red: #ff7b6b; } }

/* The totals at the top of the report and the accounts: the cents smaller, their top level with where the eye was;
   the eye a little lower, on the cents' middle. */
#rep-total .cents, #bal-total .cents { font-size: 0.64em; letter-spacing: -0.05em; }
.bal-top-row .bal-eye { transform: translateY(var(--eye-y, 3px)); }

/* Report · Μ / Ε: a small round key; on the week it is pressed in and coloured */
.rep-mode {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-top: 2px; padding: 0; border: 0; border-radius: 50%;
  background-color: var(--surface); background-image: var(--tex-matte); background-size: 128px 128px; box-shadow: var(--out-s);
  color: var(--accent); font: 800 16px var(--num-font); cursor: pointer; touch-action: manipulation;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.rep-mode[aria-pressed="true"] { background-color: var(--accent); background-image: none; color: var(--on-accent); box-shadow: var(--switch-on-inset), inset 0 0 0 1px color-mix(in srgb, #000 8%, transparent); }
.rep-mode:active { transform: scale(0.94); }

/* Report · the three boxes: income − spending green above zero, red below, grey at zero; savings blue once there are any */
#rep-left.in { color: var(--good); }
#rep-left.neg { color: var(--red); }
#rep-left.zero { color: var(--quiet); }
#rep-saved { color: var(--ink); }
#rep-saved.saved { color: var(--accent); }

/* Report · the graph, without its title, starts higher; it takes the whole width (the amounts sit inside, over their
   lines) and more height. The accounts' graph the same. Spending over the budget: red, gently pulsing. */
.report .rep-pace-card { margin-top: -10px; }
.rep-chart, #bal-chart { width: calc(100% + 16px); margin-left: -8px; margin-right: -8px; }
.bal-chart .axis { paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.bal-chart .over-area { fill: var(--red); opacity: 0.32; animation: over-pulse 2.4s ease-in-out infinite; }
.bal-chart .over-line { fill: none; stroke: var(--red); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
@keyframes over-pulse { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.46; } }
@media (prefers-reduced-motion: reduce) { .bal-chart .over-area { animation: none; opacity: 0.3; } }
.rep-legend span:first-child i { height: 3px; }

/* Report · «… ημέρες ως να ξεπεράσεις…» in a raised box like the accounts' one, with air above it */
#rep-forecast { margin: 26px 0 4px; padding: 16px 16px; border-radius: 20px; background-color: var(--surface); background-image: var(--tex-matte);
  background-size: 128px 128px; box-shadow: var(--out-l); }

/* Report · «Πού να κάνω οικονομία;» */
.rep-coach-card { gap: 12px; }
.rep-coach-text { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.rep-coach { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 4px; }
.rep-coach-owl { display: grid; place-items: center; }

/* Accounts · tiles: the fill only, no coloured outline */
.bal-tile { box-shadow: 5px 5px 12px var(--nd), -5px -5px 12px var(--nl); }

/* The bottom bar like Ρυθμίσεις → Εμφάνιση: a sunk paper groove with an inner shadow, the corners of those choice
   rows, and the page's knob raised in it like theirs. A thin light rim keeps it a small floating pill. */
:root { --tab-rim: rgba(255, 255, 255, 0.7); }
:root[data-theme="dark"] { --tab-rim: rgba(255, 255, 255, 0.075); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tab-rim: rgba(255, 255, 255, 0.075); } }
#tabbar {
  border: 2px solid var(--tab-rim); border-radius: calc(var(--r) + 6px); padding: 4px;
  background-color: var(--surface); background-image: var(--tex-paper); background-size: 128px 128px;
  box-shadow: var(--in), 0 12px 24px var(--nd), 0 3px 7px color-mix(in srgb, var(--nd) 60%, transparent);
}
#tab-pill { top: 4px; height: calc(100% - 8px); border-radius: var(--r); background-color: var(--surface); background-image: var(--tex-matte);
  background-size: 128px 128px; box-shadow: var(--out-s); }

/* Search · the X beside the field, as tall as it, raised (like + on the accounts page) */
.search-bar .search-x {
  width: 52px; height: 52px; border-radius: 50%; background: var(--surface); background-image: var(--tex-matte); background-size: 128px 128px;
  color: var(--accent); box-shadow: 5px 5px 12px var(--nd), -5px -5px 12px var(--nl);
}
.search-bar .search-x:active { box-shadow: var(--in-s); }
.search-field { padding-right: 14px; }

/* Shopping · the list's card (or its «empty» note) on a real sheet of paper */
#shop-items.shop-list, #shop-items.shop-list:has(> .shop-empty) {
  background-color: var(--surface); background-image: var(--tex-sheet) !important; background-size: 256px 256px !important;
}
#shop-items .shop-inner { background-image: var(--tex-sheet); background-size: 256px 256px; } /* each row's face slides over its buttons */
:root { --tex-sheet: url("textures/sheet-light.png"); }
:root[data-theme="dark"] { --tex-sheet: url("textures/sheet-dark.png"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tex-sheet: url("textures/sheet-dark.png"); } }

/* ═══ The owl's chats (the assistant, and the report's «Πού να κάνω οικονομία;»): minimal and clean. No outlines,
   no shadows; the owl's messages in soft tinted bubbles stacked close together (as a person sending one after the
   other), the owl small beside the last one; yours in the blue on the right. While it waits, the small owl looks
   around with a few words beside it. ═══ */
.ai-feed { gap: 14px; }
.ai-group { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; animation: fade-up 0.3s var(--ease) backwards; }
.ai-bubbles { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: calc(100% - 44px); }
.ai-row { display: flex; align-items: flex-end; gap: 8px; }
.ai-row.mine { justify-content: flex-end; }
.ai-owl { width: 30px; height: 30px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.ai-bubble, .ai-bubble.ai-answer, .ai-bubble.ai-mine {
  max-width: 100%; padding: 10px 14px; border: 0 !important; box-shadow: none !important; background-image: none !important;
  font-size: 15.5px; line-height: 1.45; -webkit-user-select: text; user-select: text; animation: bubble-in 0.28s var(--ease) backwards;
}
.ai-bubble.ai-answer { border-radius: 20px 20px 20px 6px; background: color-mix(in srgb, var(--ink) 6%, var(--surface)); color: var(--ink); }
.ai-bubbles .ai-bubble.ai-answer:not(:last-child) { border-radius: 20px 20px 20px 6px; }
.ai-bubbles .ai-bubble.ai-answer + .ai-bubble.ai-answer { border-top-left-radius: 6px; }
.ai-bubble.ai-mine { max-width: 82%; border-radius: 20px 20px 6px 20px; background: var(--accent); color: var(--on-accent); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.ai-typing { display: flex; gap: 5px; padding: 15px 16px; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing-dot 1.1s ease-in-out infinite; }
.ai-typing i:nth-child(2) { animation-delay: 0.15s; }
.ai-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.ai-thinking { align-items: center; gap: 10px; animation: fade-up 0.3s var(--ease) backwards; }
.ai-think-words { font-size: 14px; font-weight: 600; color: var(--muted); }
.ai-think-words.swap { animation: fade-in 0.4s ease; }
.ai-owl.thinking svg { animation: owl-tilt 2.4s ease-in-out infinite; transform-origin: 50% 80%; }
.ai-owl.thinking .owl-eye { animation: owl-look 2.4s ease-in-out infinite; }
@keyframes owl-tilt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } }
@keyframes owl-look { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-0.7px); } 60% { transform: translate(0.7px, -0.3px); } }
@media (prefers-reduced-motion: reduce) { .ai-owl.thinking svg, .ai-owl.thinking .owl-eye { animation: none; } }
.ai-chips { margin: 2px 0 0 38px; }
.ai-chip { padding: 8px 13px; border: 0 !important; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)) !important;
  background-image: none !important; box-shadow: none !important; color: var(--accent); font-size: 13.5px; font-weight: 700; }
.ai-note { margin-left: 38px; align-self: flex-start; }
.ai-cards { margin-left: 38px; }
.ai-share {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 0 38px; padding: 6px 4px;
  border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.ai-share:active { opacity: 0.6; }
.ai-form { border-top: 0; background: var(--bg); }
#ai-input, #coach-input { border: 0 !important; border-radius: 24px; }
.ai-head { border-bottom: 0; }

/* The coach's sheet: almost the whole screen, its talk scrolling between the title and the field */
dialog.coach { height: 92vh; height: 92dvh; max-height: none; overflow: hidden; background: var(--bg); border-top: 0; }
dialog.coach .coach-body { display: flex; flex-direction: column; height: calc(100% - 42px); }
.coach-head { display: flex; align-items: center; gap: 10px; flex: none; padding: 0 16px 10px; }
.coach-head h3 { flex: 1; min-width: 0; margin: 0; font-size: 17.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-owl { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.coach-new { flex: none; width: 38px; height: 38px; margin-right: -6px; color: var(--muted); }
.coach-feed { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 8px 16px 16px; overscroll-behavior: contain; }
.coach-form { display: flex; align-items: flex-end; gap: 8px; flex: none; padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 12px); }
#coach-input { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; padding: 11px 16px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.35; resize: none;
  background-image: var(--tex-paper); background-size: 128px 128px; box-shadow: inset 1.5px 1.5px 2.5px var(--nd), inset -1.5px -1.5px 2.5px var(--nl); }
#coach-input:focus-visible { outline: 0; }
html.kb dialog.coach[open] { top: var(--vv-top, 0px); bottom: auto; height: var(--app-h, 92dvh); margin: 0 auto; border-radius: 0; }
html.kb .coach-form { padding-bottom: 8px; }
/* The send key keeps its blue (the raised buttons' grain is opaque and would cover it) */
.icon-btn.ai-send { background-image: none !important; }
dialog.search.closing .search-x { opacity: 0; transition: opacity 0.15s ease; }

/* ═══ v0.22.1 ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
/* Report · «ΗΜΕΡΕΣ» under the big number: bold, black, small capitals */
.fc-num small { margin-top: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }

/* Report · a thin line across the top inside each box: income green; income − spending green or red; savings blue */
.rep-tiles.rep-tiles-boxed .rep-tile::before { content: ''; position: absolute; top: 7px; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: transparent; pointer-events: none; }
.rep-tiles.rep-tiles-boxed .rep-tile { padding-top: 16px; }
.rep-tiles.rep-tiles-boxed .rep-tile:has(#rep-income)::before { background: var(--good); }
.rep-tiles.rep-tiles-boxed .rep-tile:has(#rep-left.in)::before { background: var(--good); }
.rep-tiles.rep-tiles-boxed .rep-tile:has(#rep-left.neg)::before { background: var(--red); }
.rep-tiles.rep-tiles-boxed .rep-tile:has(#rep-left.zero)::before { background: var(--quiet); opacity: 0.5; }
.rep-tiles.rep-tiles-boxed .rep-tile:has(#rep-saved)::before { background: var(--accent); }

/* Home · «Ρώτα την κουκουβάγια»: all in the app's blue, white words, the owl white with no circle round it */
:root { --ask-blue: #2242c8; }
:root[data-theme="dark"] { --ask-blue: #3a57d8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ask-blue: #3a57d8; } }
#ask-bar.ask-bar { background: var(--ask-blue) !important; background-image: none !important; border-color: transparent !important; color: #ffffff !important; padding-left: 14px; }
#ask-bar .ask-owl { width: 28px; height: 28px; background: transparent; color: #ffffff; }
#ask-bar.ask-bar.shown { box-shadow: 0 10px 26px color-mix(in srgb, var(--ask-blue) 40%, transparent), 0 0 46px 6px color-mix(in srgb, var(--ask-blue) 22%, transparent); }

/* The family drawer's arrow: more room above and below it */
#family-grab { height: 64px; padding: 18px 0 10px; }
#family-grab + .sheet-body { max-height: calc(90vh - 64px); max-height: calc(90dvh - 64px); }

/* The drawer's family card: the family's own name, the names under it */
.card-names.two-lines { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; }
.card-family { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 800; color: var(--ink); }
.card-people { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--muted); }

/* Settings · the fields inside «Αρχική οθόνη» keep the page's spacing */
#home-section { gap: 18px; padding-bottom: 14px; }

/* Home · the month's header (arrows, month, total): its top corners rounded like the arrows, so it no longer cuts a
   square out of the paper scene behind it; square again once it sticks to the top */
.list-head { border-radius: 30px 30px 0 0; transition: background-color 0.5s ease, border-radius 0.2s ease; }
.list-head.stuck { border-radius: 0; }

/* Accounts · locked: an empty page with one button in the middle (the record button's soft square, a padlock in it);
   open, the page fades in */
.accounts.locked > :not(.bal-lock) { display: none !important; }
.bal-lock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: calc(100dvh - var(--top-inset) - var(--bottom-inset) - 120px); padding: 0 24px; text-align: center; }
.bal-lock[hidden] { display: none; }
.lock-btn {
  position: relative; display: grid; place-items: center; width: 136px; height: 136px; padding: 0; border: 0; border-radius: 44px; cursor: pointer; touch-action: manipulation;
  background-color: var(--surface); background-image: linear-gradient(145deg, var(--sq-hi), var(--sq-lo)); color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 13%, transparent), 10px 10px 24px var(--nd), -10px -10px 24px var(--nl);
  transition: scale 0.15s ease;
}
.lock-btn::before { content: ''; position: absolute; inset: -60px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%); pointer-events: none; }
.lock-btn:active { scale: 0.97; }
.lock-icon { display: grid; place-items: center; }
.bal-lock-text { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: var(--quiet); max-width: 260px; line-height: 1.4; }
.bal-lock-status { margin: 0; min-height: 1.4em; }
.bal-lock-again { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px; }
.bal-lock-again[hidden] { display: none; }
.accounts.revealing > :not(.bal-lock) { animation: fade-in 0.7s ease both; }

/* v0.22.2 · Report graph key: «Προϋπολογισμός» on the right */
#rep-pace-legend .budget { margin-left: auto; }

/* ═══ v0.23.0 · iPad (made for the iPad, not the desktop) ════════════════════════════════════════════════════════
   Phone: unchanged, the column groups of the report and the accounts are invisible (display: contents).
   From 700 px wide (an iPad upright, or in Split View): the app is a 760 px column, the sheets and pages wider, the
   bottom bar and the list's field a little wider.
   From 1000 px wide in landscape: the app is 1080 px; the report and the accounts become two columns side by side;
   the home, the list, the chats and the shopping list stay a 760 px column in the middle. */
.rep-col, .bal-col { display: contents; }

@media (min-width: 700px) {
  .app { max-width: 760px; }
  .sheet { max-width: 620px; }
  .sheet-bottom { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  dialog.page, dialog.search { max-width: 760px; }
  .tabbar, #tabbar { width: min(calc(100% - 32px), 500px); }
  .shop-bar, .shop-bar #shop-done { width: min(calc(100% - 32px), 560px); }
  .accounts, .report, .shopping { padding-left: 24px; padding-right: 24px; }
  .rep-biggest { margin: 0 -24px; padding-left: 24px; padding-right: 24px; scroll-padding: 0 24px; }
  /* the pies a little bigger beside their headings */
  .rep-pie-row .rep-pie, .rep-pie-row .pie-wheel { width: 200px; }
  .rep-pie-row .pie-wheel { height: 200px; }
  .rep-h-big { font-size: 30px; }
  /* the tiles of the accounts three across */
  .bal-list.tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the coach and the owl's chats: messages not too long a line */
  .ai-bubbles { max-width: min(calc(100% - 44px), 520px); }
  .ai-bubble.ai-mine { max-width: min(82%, 480px); }
}

@media (min-width: 1000px) and (orientation: landscape) {
  .app { max-width: 1080px; }
  /* single-column pages keep a readable 760 px in the middle */
  .capture, .list-handle, .month-list, .chat, .assistant, .shopping { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
  .ask-bar { width: calc(100% - 32px); max-width: 728px; margin-left: auto !important; margin-right: auto !important; align-self: center; }
  /* report: the total across the top, then two columns */
  .report { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 48px; row-gap: 0; align-items: start; }
  .report > p:empty { display: none; }
  .report > .rep-col { margin-top: 26px; }
  .report > :not(.rep-col) { grid-column: 1 / -1; }
  .report > .rep-col { display: flex; flex-direction: column; gap: 34px; min-width: 0; }
  .report > .rep-col-a { grid-column: 1; grid-row: 4; }
  .report > .rep-col-b { grid-column: 2; grid-row: 4 / span 2; }
  .report > .rep-col-a2 { grid-column: 1; grid-row: 5; }
  .report .rep-pace-card { margin-top: 0; }
  .report .rep-col-b > .rep-card:first-child .rep-pie-row { margin-top: 0; }
  .rep-biggest { margin: 0; padding: 6px 0 16px; scroll-padding: 0; }
  /* accounts: the graph and its keys on the left, the accounts on the right */
  .accounts { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 48px; row-gap: 16px; align-items: start; }
  .accounts > :not(.bal-col) { grid-column: 1 / -1; }
  .accounts > .bal-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .accounts > .bal-col-a { grid-column: 1; }
  .accounts > .bal-col-b { grid-column: 2; }
  .accounts.locked { display: flex; }
  .bal-list.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══ v0.23.1 ═══ */
/* Κατηγορίες εξόδων: the five biggest, the rest folded under «Όλες οι κατηγορίες» (report.js renderShares limit) */
.rep-more { display: grid; grid-template-rows: 0fr; margin-top: -10px; transition: grid-template-rows 0.35s var(--ease), margin-top 0.35s var(--ease); }
.rep-more.open { grid-template-rows: 1fr; margin-top: 0; }
.rep-more-inner { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
.rep-more-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; padding: 10px; border: 0; background: none;
  color: var(--accent); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.rep-more-btn[aria-expanded="true"] .disclosure-icon { transform: rotate(180deg); }

/* The coloured line of the three tiles: at the very top edge inside each tile, twice as thick (the corners round it) */
.rep-tiles.rep-tiles-boxed .rep-tile::before { top: 0; left: 0; right: 0; height: 4px; border-radius: 0; }

/* Αναφορά and Λογαριασμοί: everything above the graph (the period, the total, the eye, the key) in one raised tab */
:is(#report, #accounts) .blue-top > .bal-head {
  margin-top: 18px; margin-bottom: 14px; padding: 16px 16px 16px 18px; border-radius: 24px;
  background-color: var(--surface); background-image: var(--tex-matte); background-size: 128px 128px; box-shadow: var(--out-s);
}
#accounts .blue-top > .bal-head > .bal-tools, #report .blue-top > .bal-head > .rep-mode { margin-bottom: 4px; }

/* «Από ποιους λογαριασμούς έγιναν τα έξοδα»: a big piggy bank on its left, the words in two or three lines */
.rep-h.rep-acc-h { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; line-height: 1.1; }
.rep-acc-icon { flex: none; display: grid; color: var(--accent); }

/* The camera open: the record button takes the photo and the + picks one from the library (capture.js dock), so the
   window's own round button and photos button step aside; the two buttons show a camera and a picture */
.cam.docked-shot .cam-shot, .cam.docked-pick .cam-pick { display: none; }
.dome-icon .cam-glyph { opacity: 0; }
body.cam-shot-here .dome-icon .mic { opacity: 0; }
body.cam-shot-here .dome-icon .cam-glyph { opacity: 1; }
.add-new svg { grid-area: 1 / 1; transition: opacity 0.25s ease; }
.add-new .add-photo { opacity: 0; }
body.cam-pick-here .add-new .add-plus { opacity: 0; }
body.cam-pick-here .add-new .add-photo { opacity: 1; }

/* ═══ v0.23.2 ═══ */
/* Numbers: JetBrains Mono gives «.» and «,» a whole digit's width. «Num Punct» (fonts/, made from JetBrains Mono by
   devtools/make_num_punct.py) has only those two: «.» with little room either side, «,» with its room before kept
   and little after. It is first in --num-font, and only for those two characters (unicode-range). */
@font-face { font-family: 'Num Punct'; src: url("fonts/num-punct-500.woff2") format("woff2"); font-weight: 400 600; unicode-range: U+002C, U+002E; font-display: swap; }
@font-face { font-family: 'Num Punct'; src: url("fonts/num-punct-700.woff2") format("woff2"); font-weight: 700; unicode-range: U+002C, U+002E; font-display: swap; }
@font-face { font-family: 'Num Punct'; src: url("fonts/num-punct-800.woff2") format("woff2"); font-weight: 800 900; unicode-range: U+002C, U+002E; font-display: swap; }

/* The camera's ✕: bottom right of the window */
.cam-close { top: auto; bottom: 18px; right: 16px; }

/* Αναφορά and Λογαριασμοί: the raised tab a little taller, a little less room under it; the eye on the right, beside
   the tab's button; the € in the wordmark's colour */
:is(#report, #accounts) .blue-top > .bal-head { padding-top: 22px; padding-bottom: 22px; }
#report .blue-top > .bal-head { margin-bottom: -14px; } /* the page's 34px gap → 20 */
#accounts .blue-top > .bal-head { margin-bottom: -4px; } /* its 16px gap → 12 */
:is(#report, #accounts) .blue-top > .bal-head > .bal-top { flex: 1; }
:is(#report, #accounts) .blue-top > .bal-head .bal-top-row { width: 100%; }
:is(#report, #accounts) .blue-top > .bal-head .bal-eye { margin-left: auto; }
:is(#rep-total, #bal-total) .cur { color: var(--accent); }

/* The bottom bar: the home tab is only the house, even when it is on */
.tab[data-page="home"] .tab-label { display: none !important; }
.tab.on[data-page="home"] { padding: 0 18px; }

/* ═══ v0.23.3 ═══ */
/* The raised tab: the number row (total, eye, button) sits low, near the bottom edge; the period stays on top.
   A hair more room after the € */
:is(#report, #accounts) .blue-top > .bal-head { padding-bottom: 12px; }
:is(#report, #accounts) .blue-top > .bal-head > .bal-top { gap: 18px; }
:is(#rep-total, #bal-total) .cur { margin-right: 0.06em; }

/* ═══ v0.24.0 · Νέα (news.js): the fifth page — topic chips, official announcements, article cards ═══ */
.news.incoming { position: absolute; left: 0; right: 0; z-index: 3; }
.news { gap: 14px; padding: 6px 16px calc(var(--bottom-inset) + 32px); }
.news-head { align-items: baseline; margin-top: 22px; }
.news-updated { font-size: 12.5px; font-weight: 600; color: var(--quiet); white-space: nowrap; }
.news-chips {
  display: flex; gap: 8px; margin: 0 -16px; padding: 4px 16px 10px; overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x;
}
.news-chips::-webkit-scrollbar { display: none; }
.news-chip {
  flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background-color: var(--surface); color: var(--ink);
  font: 700 14px var(--sans); white-space: nowrap; cursor: pointer; touch-action: manipulation; box-shadow: var(--out-s);
  background-image: var(--tex-matte); background-size: 128px 128px;
}
.news-chip[aria-pressed="true"] { background-color: var(--accent); background-image: none; color: #ffffff; box-shadow: none; }
.news-status:empty, .news-loading[hidden], .news-empty[hidden] { display: none; }
.news-status, .news-loading, .news-empty { margin: 0; }

.news-official { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 8px; border-radius: 20px; background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.news-official[hidden] { display: none; }
.news-official-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--accent); }
.news-official-h span { display: grid; }
.news-official-list { display: flex; flex-direction: column; }
.news-notice { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; color: var(--ink); text-decoration: none; }
.news-notice + .news-notice { border-top: 1px solid var(--hair); }
.news-notice-title { font-size: 14.5px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.news-list { display: flex; flex-direction: column; gap: 12px; }
.news-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 20px; color: var(--ink); text-decoration: none;
  background-color: var(--surface); background-image: var(--tex-matte); background-size: 128px 128px; box-shadow: var(--out-s);
  -webkit-tap-highlight-color: transparent; transition: scale 0.15s ease;
}
.news-card:active { scale: 0.985; }
.news-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.news-meta { font-size: 12px; font-weight: 600; color: var(--quiet); }
.news-meta strong { font-weight: 800; color: var(--ink); }
.news-title { font-size: 16.5px; font-weight: 800; line-height: 1.28; letter-spacing: -0.005em; }
.news-summary { font-size: 14px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.news-tag { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.news-img { flex: none; width: 84px; height: 84px; border-radius: 14px; object-fit: cover; background: var(--hair); }
.news-sources { margin: 6px 2px 0; font-size: 12px; }
.news-topics { display: flex; flex-direction: column; gap: 2px; }

/* Five tabs: a little tighter so the open one's word still fits on a narrow phone */
.tab { padding: 0 8px; }
@media (min-width: 700px) {
  .news { padding-left: 24px; padding-right: 24px; }
  .news-chips { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1000px) and (orientation: landscape) {
  .news { width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
}

/* ═══ v0.24.1 ═══ */
/* Νέα: more room between the articles */
.news-list { gap: 22px; }
/* The raised tab of Αναφορά and Λογαριασμοί: taller, with more room between the month (or «Σύνολο λογαριασμών») and the amount */
:is(#report, #accounts) .blue-top > .bal-head { padding-top: 24px; padding-bottom: 16px; }
:is(#report, #accounts) .blue-top > .bal-head > .bal-top { gap: 34px; }


/* ═══ v0.25.0 · Αναφορά and Λογαριασμοί: the top in blue, like the blue sections of toblokaki.app ═══
   The period, the total, the eye, the key and the graph sit in one blue block from the very top of the screen (under
   the status bar and the header) down to round corners; the header turns white over it. Inside, the colours are
   light (the graph lines white, the income green, the accounts a third lighter: report.js / accounts.js read them
   from the graph's own box). Everything under it stays on the paper. */
:root { --blue-top: #2242c8; }
:root[data-theme="dark"] { --blue-top: #2a44c4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --blue-top: #2a44c4; } }
.blue-top {
  --ink: #ffffff; --muted: rgba(255, 255, 255, 0.78); --quiet: rgba(255, 255, 255, 0.7); --hair: rgba(255, 255, 255, 0.16);
  --line: rgba(255, 255, 255, 0.35); --accent: #ffffff; --good: #8fe3b8; --red: #ffb09c; --chart-prev: rgba(255, 255, 255, 0.45);
  --bg: var(--blue-top); --surface: var(--blue-top);
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px;
  margin: calc(-1 * (var(--top-inset) + 60px)) -16px 0;
  padding: calc(var(--top-inset) + 72px) 20px 20px;
  border-radius: 0 0 32px 32px; background: var(--blue-top); color: #ffffff;
}
.blue-top::before { /* the soft light glow of the site's blue sections, low in the block */
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: -140px; width: 520px; height: 300px; margin-left: -260px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(157, 176, 255, 0.34), rgba(157, 176, 255, 0)); pointer-events: none;
}
.blue-top > .bal-head, :is(#report, #accounts) .blue-top > .bal-head {
  margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none;
}
.blue-top .bal-kicker { color: rgba(255, 255, 255, 0.82); }
.blue-top :is(#rep-total, #bal-total) .cur { color: #9db0ff; }
.blue-top .bal-eye { color: rgba(255, 255, 255, 0.85) !important; }
/* The round key (Μ / Ε) and the new-transfer button: white, with the blue inside, like the site's white buttons */
.blue-top .rep-mode, .blue-top #bal-move {
  background: #ffffff !important; background-image: none !important; color: var(--blue-top) !important;
  box-shadow: 0 10px 22px rgba(10, 20, 70, 0.3) !important; border-color: transparent !important;
}
.blue-top .rep-mode[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55) !important;
}
/* The graph's controls: see-through white pills; the one that is on turns white */
.blue-top :is(.bal-range-btn, .bal-split) {
  background: rgba(255, 255, 255, 0.16) !important; background-image: none !important; color: #ffffff !important;
  border-color: transparent !important; box-shadow: none !important;
}
.blue-top .bal-split[aria-pressed="true"], .blue-top .bal-split.active { background: #ffffff !important; color: var(--blue-top) !important; }
.blue-top .rep-card.rep-flat { margin-top: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.blue-top .rep-legend { color: rgba(255, 255, 255, 0.85); }
.blue-top .bal-pick { margin-top: -6px; margin-bottom: -6px; }
/* Αναφορά: more room between the blue and the three tiles under it */
.report > .rep-col-a { margin-top: 14px; }
/* iPad across: the blue spans the page; the accounts list takes the whole width under it */
@media (min-width: 1000px) and (orientation: landscape) {
  .accounts > .bal-col-b { grid-column: 1 / -1; }
}
/* On the blue, a see-through band turns muddy: the stacked accounts nearly solid (their line on top still shows) */
.blue-top .bal-chart .band { opacity: 0.82; }
/* v0.25.1 · The filter chips (Φίλτρα) on the blue: dark see-through, no paper shadows (their light edge glowed white);
   a chosen one sits pressed in, darker, with white text */
.blue-top .bal-tick {
  background: rgba(10, 20, 70, 0.26) !important; background-image: none !important; border-color: transparent !important;
  box-shadow: none !important; color: rgba(255, 255, 255, 0.72);
}
.blue-top .bal-tick:has(input:checked) {
  background: rgba(10, 20, 70, 0.5) !important; color: #ffffff;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.35), inset -1px -1px 3px rgba(255, 255, 255, 0.06) !important;
}


/* ═══ v0.26.0 ═══ */
/* The header over the blue tops: its wordmark, buttons, separators and the circles' rings blend towards white by
   --hb on #app (0 = the paper's colours, 1 = white). app.js sets it to 1 on Αναφορά and on Λογαριασμοί once unlocked,
   and in between while a finger swipes from page to page, in step with how far it has gone. */
.app > .top { position: relative; z-index: 5; }
.app .top5 .wordmark { color: color-mix(in srgb, #ffffff calc(var(--hb, 0) * 100%), var(--accent)); }
.app .top5 .top-actions .icon-btn:not([aria-pressed="true"]) { color: color-mix(in srgb, #ffffff calc(var(--hb, 0) * 100%), var(--accent)) !important; }
.app .top5 .top-sep { background: color-mix(in srgb, rgba(255, 255, 255, 0.35) calc(var(--hb, 0) * 100%), color-mix(in srgb, var(--accent) 30%, transparent)); }
.app .top5 .avatars .avatar { border-color: color-mix(in srgb, var(--blue-top) calc(var(--hb, 0) * 100%), var(--bg)); }
.app:not(.dragging) .top5 :is(.wordmark, .top-actions .icon-btn, .top-sep, .avatars .avatar) {
  transition: color 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, translate 0.6s cubic-bezier(0.45, 0, 0.25, 1);
}

/* Αναφορά · the three figures under the blue, without boxes: centred, a short coloured line over each, the amount
   large, its icon and name under it */
.rep-tiles.rep-tiles-boxed { gap: 8px; }
.rep-tiles.rep-tiles-boxed .rep-tile {
  display: grid; grid-template-columns: auto auto; grid-template-areas: "line line" "value value" "icon label";
  justify-content: center; align-items: center; column-gap: 5px; row-gap: 8px; min-height: 0; padding: 0; overflow: visible;
  background: none !important; background-image: none !important; border: 0; box-shadow: none !important; text-align: center;
}
.rep-tiles.rep-tiles-boxed .rep-tile::before { grid-area: line; position: static; justify-self: center; width: 32px; height: 4px; border-radius: 2px; }
.rep-tiles.rep-tiles-boxed .rep-tile strong { grid-area: value; margin: 0; font-size: 21px; line-height: 1.1; letter-spacing: -0.03em; }
.rep-tiles.rep-tiles-boxed .rep-tile span { grid-area: label; font-size: 12px; line-height: 1.2; white-space: nowrap; color: var(--quiet); }
.rep-tiles.rep-tiles-boxed .rep-tile .rep-tile-icon { grid-area: icon; position: static; display: grid; color: var(--quiet); opacity: 1; }
.rep-tiles.rep-tiles-boxed .rep-tile .rep-tile-icon svg { width: 15px; height: 15px; }
/* Pulled down past its top, a blue page shows blue above it: the blue top reaches a screen's height further up
   (it scrolls with the page, so the paper behind the rest of the page stays the paper) */
.blue-top::after { content: ""; position: absolute; z-index: -2; left: 0; right: 0; bottom: 100%; height: 100vh; background: var(--blue-top); pointer-events: none; }