/* =========================================================================
   Finledge — design tokens
   One ink colour at descending alphas. Three chalk accents, small only.
   ========================================================================= */
:root {
  /* Lifted off the original near-black: the ground keeps its violet bias and
     the hierarchy is still one ink at descending alphas, but everything sits
     a few stops brighter so panels and rules are visible without squinting.
     Ink alphas rose with the ground so contrast ratios held. */
  --bg:     #1b1b25;   /* dark, violet bias — never pure black */
  --bg2:    #24252f;
  --ink:    #f6f6fa;   /* off-white, slight violet */
  --soft:   #d6d9e4;
  --dim:    rgba(246,246,250,0.62);
  --faint:  rgba(246,246,250,0.22);
  --rule:   rgba(246,246,250,0.15);
  --acc:    #c2d6e8;   /* pale blue    */
  --acc2:   #9fc7b2;   /* sage green   */
  --warm:   #d9b8a2;   /* warm clay    */
  --acc-lo: rgba(194,214,232,0.10);
  --panel:  rgba(255,255,255,0.06);

  /* Derived — geometry only. Radii stay small and consistent. */
  --r:      10px;
  --r-sm:   7px;
  --r-lg:   16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Fallback glyph colour for UI icons placed inside a tinted well. */
  --t:      var(--soft);
}

/* =========================================================================
   IDENTITY TINTS
   The twelve colour keys already stored in the database (categories.color,
   and the first half of members.avatar), so the vocabulary is unchanged and
   no migration was ever needed.

   The glyphs no longer take their colour from here — each one is painted in
   its own real colours (a fox is orange, a leaf is green, milk is white).
   The tint's remaining job is the well *behind* the glyph, which is how a
   host's colour choice stays visible without fighting the artwork.

   --t    the tint, for UI icons that sit in a tinted well
   --tw   a 13% wash: the only way a tint is used as a surface
   --tl   a 30% line for the 1px edge around that surface
   ========================================================================= */
.tint-ocean  { --t:#c2d6e8; --tw:rgba(194,214,232,.13); --tl:rgba(194,214,232,.30); }
.tint-mint   { --t:#a6d8c6; --tw:rgba(166,216,198,.13); --tl:rgba(166,216,198,.30); }
.tint-sunset { --t:#dcb69c; --tw:rgba(220,182,156,.13); --tl:rgba(220,182,156,.30); }
.tint-berry  { --t:#d1a5c5; --tw:rgba(209,165,197,.13); --tl:rgba(209,165,197,.30); }
.tint-grape  { --t:#b3a5d8; --tw:rgba(179,165,216,.13); --tl:rgba(179,165,216,.30); }
.tint-citrus { --t:#dcd3a4; --tw:rgba(220,211,164,.13); --tl:rgba(220,211,164,.30); }
.tint-coral  { --t:#e3ada2; --tw:rgba(227,173,162,.13); --tl:rgba(227,173,162,.30); }
.tint-indigo { --t:#b0bacf; --tw:rgba(176,186,207,.13); --tl:rgba(176,186,207,.30); }
.tint-rose   { --t:#e4b5c0; --tw:rgba(228,181,192,.13); --tl:rgba(228,181,192,.30); }
.tint-teal   { --t:#99c9cf; --tw:rgba(153,201,207,.13); --tl:rgba(153,201,207,.30); }
.tint-amber  { --t:#e0c69a; --tw:rgba(224,198,154,.13); --tl:rgba(224,198,154,.30); }
.tint-violet { --t:#cbaede; --tw:rgba(203,174,222,.13); --tl:rgba(203,174,222,.30); }

/* Identity glyphs are painted with literal colours on the <symbol> content
   itself, not from here. `<use>` clones a symbol into a shadow tree that
   document stylesheets cannot select into, so a class like `.fox-ear` would
   never apply — the colours have to live on the shape. */

/* =========================================================================
   GROUND
   All ambient depth lives here and nowhere else — no panel casts a shadow.
   ========================================================================= */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* The flat base lives on <html>, so it fills the canvas however tall the
   document gets. <body> must stay transparent: its own background would paint
   in front of the glow layer below (a non-positioned block's background paints
   above negative-z-index children), hiding it for the first viewport. */
html { background: var(--bg); }
body { background: transparent; }

/* The ambient glow is painted by a fixed layer, not by `background` on <body>.
   Two reasons, both of which showed up as a hard seam partway down every view:

   1. <html> carries a background of its own (above), so <body>'s background no
      longer propagates to the canvas — it paints inside the body box only. That
      box is `height: 100%`, exactly one viewport, while `.app` is that tall
      *plus* its bottom padding, so every page overflows it. Below the fold the
      gradients simply stopped and flat --bg took over.
   2. `background-attachment: fixed` is unreliable on mobile Safari and Chrome,
      where it is often downgraded to `scroll` — so the glow drifted on scroll
      instead of staying put.

   A `position: fixed` layer has neither problem: it is the viewport, it cannot
   be clipped by the document box, and it behaves the same everywhere. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 9% 8%,  rgba(194,214,232,.14), transparent 31rem),
    radial-gradient(circle at 86% 18%, rgba(159,199,178,.10), transparent 28rem),
    radial-gradient(circle at 70% 92%, rgba(217,184,162,.075), transparent 32rem),
    linear-gradient(180deg, #1e1e29 0%, #1a1a24 48%, #16161f 100%);
}

::selection { background: rgba(194,214,232,.24); color: var(--ink); }

/* Scrollbars: 2px, faint thumb. */
* { scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 2px; }

.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; color: inherit; }
input, select { font-family: inherit; }
svg { width: 24px; height: 24px; fill: none; }
.icon-sm { width: 18px; height: 18px; }
.icon-lg { width: 40px; height: 40px; color: var(--faint); }

h1, h2, h3 { line-height: 1.3; }

/* =========================================================================
   SURFACES
   A panel is translucent white over the ground with a 1px rule. Never solid,
   never shadowed.
   ========================================================================= */
.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 18px;
}

.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.panel-title {
  font-size: 14px; font-weight: 600; margin: 0; letter-spacing: .01em; color: var(--ink);
}
.panel-head .panel-title { margin: 0; }
.panel-note {
  font-size: 11.5px; color: var(--dim); font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; flex-shrink: 0;
}
.panel-hint { font-size: 13px; color: var(--dim); margin: -8px 0 16px; line-height: 1.6; }
/* The -8px above is a pull *into* a .panel-head's 16px bottom margin. Following
   a bare .panel-title, which has no margin of its own, that same pull dragged
   the hint up over the heading — which is what the Host tools card was doing. */
.panel-title + .panel-hint { margin-top: 8px; }
.field-hint { font-size: 12px; color: var(--dim); line-height: 1.55; margin: -4px 0 4px; }
.field-hint strong { color: var(--soft); font-weight: 600; }
.group-title {
  font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase;
  letter-spacing: .09em; margin: 6px 0 2px; grid-column: 1 / -1;
}
.group-title:first-child { margin-top: 0; }

/* =========================================================================
   IDENTITY SURFACES — avatars, category & product glyph wells
   A tinted well behind a self-coloured glyph. The wash is never a fill.
   ========================================================================= */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
  color: var(--t);
  background: var(--tw, rgba(255,255,255,.07));
  border: 1px solid var(--tl, var(--rule));
}
.avatar svg { fill: currentColor; }
.avatar-xs { width: 20px; height: 20px; } .avatar-xs svg { width: 12px; height: 12px; }
.avatar-sm { width: 28px; height: 28px; } .avatar-sm svg { width: 16px; height: 16px; }
.avatar-md { width: 38px; height: 38px; } .avatar-md svg { width: 21px; height: 21px; }
.avatar-lg { width: 56px; height: 56px; } .avatar-lg svg { width: 30px; height: 30px; }
.avatar-xl { width: 84px; height: 84px; } .avatar-xl svg { width: 42px; height: 42px; }

.tx-icon, .cat-icon-wrap, .prod-icon-wrap, .cat-icon-wrap-sm {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--t);
  background: var(--tw, rgba(255,255,255,.07));
  border: 1px solid var(--tl, var(--rule));
  border-radius: var(--r-sm);
}
.tx-icon, .cat-icon-wrap, .prod-icon-wrap, .cat-icon-wrap-sm { }
.tx-icon svg, .cat-icon-wrap svg, .prod-icon-wrap svg, .cat-icon-wrap-sm svg { fill: currentColor; }
.tx-icon { width: 38px; height: 38px; } .tx-icon svg { width: 21px; height: 21px; }
.cat-icon-wrap { width: 34px; height: 34px; } .cat-icon-wrap svg { width: 19px; height: 19px; }
.prod-icon-wrap { width: 28px; height: 28px; } .prod-icon-wrap svg { width: 16px; height: 16px; }
.cat-icon-wrap-sm { width: 22px; height: 22px; border-radius: 6px; } .cat-icon-wrap-sm svg { width: 13px; height: 13px; }

/* =========================================================================
   SPLASH
   ========================================================================= */
.splash {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background:
    radial-gradient(circle at 9% 8%,  rgba(194,214,232,.14), transparent 31rem),
    radial-gradient(circle at 86% 18%, rgba(159,199,178,.10), transparent 28rem),
    radial-gradient(circle at 70% 92%, rgba(217,184,162,.075), transparent 32rem),
    linear-gradient(180deg, #1e1e29 0%, #1a1a24 48%, #16161f 100%);
  transition: opacity .5s ease;
}
.splash.hidden { display: flex !important; opacity: 0; pointer-events: none; }
.splash-logo svg { width: 64px; height: 64px; color: var(--acc); }
.splash-title {
  font-size: 20px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--soft); padding-left: .3em;
}
.spinner {
  width: 20px; height: 20px;
  border: 1px solid var(--faint);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================================
   AUTH
   ========================================================================= */
.auth-screen {
  min-height: 100%;
  padding: calc(56px + var(--safe-top)) 22px 56px;
  max-width: 460px; margin: 0 auto;
}
.auth-header { text-align: center; margin-bottom: 34px; }
.auth-logo svg { width: 46px; height: 46px; color: var(--acc); }
.auth-header h1 {
  font-size: 24px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  margin: 16px 0 6px; color: var(--ink); padding-left: .22em;
}
.auth-sub { color: var(--dim); font-size: 13.5px; margin: 0; }

.auth-welcome { display: flex; flex-direction: column; gap: 10px; }
.btn-auth-choice {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  border-radius: var(--r); padding: 16px; border: 1px solid var(--rule);
  background: var(--panel); color: var(--ink);
  transition: border-color .18s ease, background .18s ease;
}
.btn-auth-choice:hover, .btn-auth-choice:active { border-color: var(--faint); background: rgba(255,255,255,.045); }
.auth-choice-icon {
  width: 38px; height: 38px; border-radius: var(--r-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--acc-lo); border: 1px solid rgba(194,214,232,.2); color: var(--acc);
}
#choice-create .auth-choice-icon {
  background: rgba(159,199,178,.075); border-color: rgba(159,199,178,.2); color: var(--acc2);
}
.auth-choice-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.auth-choice-text strong { font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.auth-choice-text small { font-size: 12px; color: var(--dim); line-height: 1.5; }
.auth-choice-chevron { color: var(--faint); flex-shrink: 0; }

.auth-back-btn {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: none; border: none; color: var(--dim); font-size: 13px; padding: 0; margin: -2px 0 2px;
}
.auth-back-btn:hover { color: var(--soft); }
.auth-form-title { font-size: 16px; font-weight: 600; margin: 0 0 2px; }

.auth-form { display: flex; flex-direction: column; gap: 15px; }
.auth-form label, #expense-form label, .filter-panel label, #category-edit-form label,
#name-form label, #sharing-form label {
  font-size: 11.5px; font-weight: 500; color: var(--dim); display: flex; flex-direction: column; gap: 7px;
  text-transform: uppercase; letter-spacing: .07em;
}
.auth-form input, #expense-form input, #category-edit-form input, #name-form input,
#sharing-form input, #sharing-form select {
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 12px 13px;
  font-size: 15px; background: rgba(255,255,255,.045); color: var(--ink);
  text-transform: none; letter-spacing: 0; line-height: 1.5;
  transition: border-color .18s ease;
}
.auth-form input::placeholder, #expense-form input::placeholder,
#category-edit-form input::placeholder, #name-form input::placeholder { color: rgba(246,246,250,.34); }
.auth-form input:focus, #expense-form input:focus, #category-edit-form input:focus,
#name-form input:focus, #sharing-form input:focus, #sharing-form select:focus {
  outline: none; border-color: rgba(194,214,232,.34); background: rgba(255,255,255,.07);
}
.checkbox-row {
  flex-direction: row !important; align-items: center; gap: 9px !important;
  text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--soft) !important;
}
.checkbox-row input { width: 15px; height: 15px; accent-color: #7d93a6; flex-shrink: 0; }

/* =========================================================================
   BUTTONS
   No accent is ever a button's fill. The primary action earns its weight from
   a 10% tinted surface, a 1px tinted rule, and accent-coloured label text.
   ========================================================================= */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .btn-quiet-danger {
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 12px 14px;
  font-size: 14px; font-weight: 500; background: transparent; color: var(--soft);
  display: flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.4;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.btn-primary { background: rgba(194,214,232,.10); border-color: rgba(194,214,232,.28); color: var(--acc); font-weight: 600; }
.btn-primary:hover, .btn-primary:active { background: rgba(194,214,232,.15); border-color: rgba(194,214,232,.4); }
.btn-secondary { background: var(--panel); }
.btn-secondary:hover, .btn-secondary:active { border-color: var(--faint); color: var(--ink); }
.btn-danger { background: rgba(217,184,162,.10); border-color: rgba(217,184,162,.3); color: var(--warm); font-weight: 600; }
.btn-danger:hover, .btn-danger:active { background: rgba(217,184,162,.16); }
.btn-ghost { border-color: transparent; color: var(--dim); }
.btn-ghost:hover, .btn-ghost:active { color: var(--soft); }
.btn-quiet-danger { border-color: transparent; color: var(--warm); background: transparent; }
.btn-quiet-danger:hover, .btn-quiet-danger:active { background: rgba(217,184,162,.07); }
.form-error { color: var(--warm); font-size: 12.5px; margin: 0; min-height: 15px; line-height: 1.5; }
/* A statement of fact inside a form — which month an entry will land in —
   not an error. Warm rule, no icon, no alarm. */
.form-notice {
  color: var(--warm); font-size: 12.5px; margin: 0; line-height: 1.6;
  border: 1px solid rgba(217,184,162,.28); background: rgba(217,184,162,.08);
  border-radius: var(--r-sm); padding: 10px 12px;
}
.form-notice strong { font-weight: 600; }

.danger-zone { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; }
.danger-zone .btn-quiet-danger { flex: 1; }

.segmented {
  display: flex; border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 3px; gap: 3px;
  background: rgba(255,255,255,.07);
}
.segmented-btn {
  flex: 1; border: none; background: transparent; padding: 9px 0; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--dim); transition: all .18s ease;
  text-transform: none; letter-spacing: 0;
}
.segmented-btn.active { background: rgba(255,255,255,.09); color: var(--ink); }

/* =========================================================================
   APP SHELL
   ========================================================================= */
.app { min-height: 100%; padding-bottom: calc(104px + var(--safe-bottom)); }

.topbar {
  position: sticky; top: 0; z-index: 20;
  padding: calc(16px + var(--safe-top)) 20px 14px;
  background: rgba(27,27,37,.80);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--rule);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  max-width: 560px; margin: 0 auto;
}
.topbar-id { min-width: 0; }
.topbar-title { font-size: 19px; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
.topbar-room { font-size: 11.5px; color: var(--dim); letter-spacing: .04em; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar-mark svg { width: 26px; height: 26px; color: var(--faint); display: block; }

/* The month everything below is scoped to. Small and quiet while you are in
   the live month; it is the *history* state that has to be impossible to
   miss, because that is the one that misleads. Tapping it goes to the
   switcher in Profile. */
.topbar-month {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 4px 8px; color: var(--dim); line-height: 1.35;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.topbar-month-name {
  font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.topbar-month-tag {
  font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
}
.topbar-month-tag:empty { display: none; }
.topbar-month.is-history {
  color: var(--acc); border-color: rgba(194,214,232,.28); background: var(--acc-lo);
}
.topbar-month:hover { color: var(--soft); }
.topbar-month.is-history:hover { color: var(--acc); border-color: rgba(194,214,232,.44); }

.views { max-width: 560px; margin: 0 auto; padding: 18px 16px 8px; }
.view { display: none; flex-direction: column; gap: 14px; }
.view.active { display: flex; animation: viewIn .3s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================================================
   HOME — hero
   ========================================================================= */
.hero { padding: 20px 18px 6px; }
.hero-label {
  font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; font-weight: 500;
}
.hero-figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.hero-value {
  font-size: 36px; font-weight: 300; letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.hero-spark { margin: 14px 0 2px; height: 34px; }
.hero-spark svg { width: 100%; height: 34px; display: block; }

.hero-stats { display: flex; border-top: 1px solid var(--rule); margin-top: 14px; }
.hero-stat { flex: 1; padding: 14px 0 16px; min-width: 0; }
.hero-stat + .hero-stat { border-left: 1px solid var(--rule); padding-left: 14px; }
.hero-stat-label {
  font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-stat-value {
  font-size: 16px; font-weight: 500; line-height: 1.4; margin-top: 2px; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-stat-sub { font-size: 10.5px; color: var(--dim); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-stat-value.is-pos { color: var(--acc2); }
.hero-stat-value.is-neg { color: var(--warm); }

/* Delta chip — direction is carried by the glyph and the sign, not by colour
   alone, so it survives a colourblind reader and a greyscale print. */
.delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; color: var(--dim); font-variant-numeric: tabular-nums;
}
.delta svg { width: 13px; height: 13px; }
.delta.up { color: var(--warm); }
.delta.down { color: var(--acc2); }

/* =========================================================================
   HOME — filters & transactions
   ========================================================================= */
.filter-bar { display: flex; gap: 8px; align-items: center; }
.search-box {
  flex: 1; display: flex; align-items: center; gap: 9px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 10px 13px;
  transition: border-color .18s ease;
}
.search-box:focus-within { border-color: rgba(194,214,232,.3); }
.search-box input { border: none; background: transparent; font-size: 14px; flex: 1; color: var(--ink); outline: none; min-width: 0; }
.search-box input::placeholder { color: rgba(246,246,250,.34); }
.search-box .icon-sm { color: var(--faint); flex-shrink: 0; }
.search-box:focus-within .icon-sm { color: var(--acc); }

.icon-btn, .icon-btn-sm {
  border: 1px solid var(--rule); background: var(--panel); border-radius: var(--r-sm);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  color: var(--dim); flex-shrink: 0; transition: color .18s ease, border-color .18s ease;
}
.icon-btn:hover, .icon-btn-sm:hover { color: var(--soft); border-color: var(--faint); }
.icon-btn.on { color: var(--acc); border-color: rgba(194,214,232,.28); }
.icon-btn-sm { width: 30px; height: 30px; border-radius: 6px; }

.filter-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.filter-panel select, .filter-panel input {
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 9px 10px; font-size: 13.5px;
  background: rgba(255,255,255,.045); color: var(--ink); text-transform: none; letter-spacing: 0;
}
.filter-panel select:focus, .filter-panel input:focus { outline: none; border-color: rgba(194,214,232,.3); }
.filter-panel option { background: var(--bg2); color: var(--ink); }
.filter-panel .btn-ghost { grid-column: 1 / -1; padding: 8px; font-size: 13px; }

.tx-list { display: flex; flex-direction: column; }
.tx-day {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 2px 8px; border-bottom: 1px solid var(--rule); margin-bottom: 2px;
}
.tx-day:first-child { padding-top: 2px; }
.tx-day-label { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .09em; }
.tx-day-total { font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* Every row is the same box, whatever it holds. A long description or a place
   name used to make a card taller than its neighbours, and a list of cards
   breathing in and out with the data reads as noise — worse, the column of
   amounts stops being a column. Both lines clip; the height never moves. */
/* =========================================================================
   TRANSACTION CARD

   Two earlier attempts bracket this one. First a single clipped row, which hid
   the place and often the payer on a phone. Then a card with the four facts in
   a labelled 2x2 grid, which showed everything but cost ~175px each — three
   transactions to a screen, and no scannable column of amounts left.

   This keeps the second version's promise (nothing hidden, every card the same
   height) at about 66px: description and meta are one clipped line each, so
   the geometry cannot move, and the facts carry no labels because their shape
   already identifies them.
   ========================================================================= */
.tx-list { display: flex; flex-direction: column; gap: 7px; }

/* The card is a button: it is a summary, and the rest is one tap away.
     [icon] description, up to two lines ....... amount
     [icon] date · category · payer
   With edit and delete moved into the detail sheet, the widest thing on the
   right is the amount — which is where the description's extra room comes
   from. */
.tx-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 11px; row-gap: 3px;
  width: 100%; text-align: left;
  font: inherit; color: inherit;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 10px 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .14s ease, border-color .14s ease;
}
.tx-card:hover { background: rgba(255,255,255,.085); }
.tx-card:active { background: rgba(255,255,255,.11); }
.tx-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.tx-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; }

/* Two lines, then ellipsis — and both lines are reserved whether or not they
   are used, which is what keeps every card the same height. */
.tx-desc {
  grid-column: 2; grid-row: 1; min-width: 0;
  font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--ink);
  min-height: calc(2 * 1.4em);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.tx-amount {
  grid-column: 3; grid-row: 1; justify-self: end;
  font-size: 15px; font-weight: 600; line-height: 1.4;
  white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink);
}

/* Three facts only, all of them short and predictable, so this line has no
   reason to overflow on a narrow phone. Place and the exact date live in the
   detail sheet, where they cannot be squeezed out. */
.tx-meta {
  grid-column: 2 / span 2; grid-row: 2;
  display: flex; align-items: center; flex-wrap: nowrap; min-width: 0;
  font-size: 12.5px; line-height: 1.5; color: var(--soft);
  white-space: nowrap; overflow: hidden;
}
.tx-meta-item { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; min-width: 0; }
.tx-meta-item + .tx-meta-item::before {
  content: ''; flex-shrink: 0;
  width: 3px; height: 3px; margin: 0 7px;
  border-radius: 50%; background: var(--faint);
}
/* The payer is the one item long enough to need giving ground. */
.tx-meta-payer { flex-shrink: 1; overflow: hidden; }
.tx-meta-payer > span { overflow: hidden; text-overflow: ellipsis; }

/* ---- detail sheet ---------------------------------------------------- */
.txd-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.txd-headline { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* Nothing is clipped in here — this is the one place the whole description is
   guaranteed to be readable. */
.txd-desc {
  margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4;
  color: var(--ink); overflow-wrap: anywhere;
}
.txd-amount {
  font-size: 21px; font-weight: 600; line-height: 1.25;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

.txd-facts { margin: 0 0 18px; display: flex; flex-direction: column; }
.txd-fact {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--rule);
}
.txd-fact dt {
  font-size: 11px; font-weight: 600; color: var(--dim);
  text-transform: uppercase; letter-spacing: .09em; flex-shrink: 0;
}
.txd-fact dd {
  margin: 0; min-width: 0; text-align: right;
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
  font-size: 14px; color: var(--soft); overflow-wrap: anywhere;
}
.txd-empty { color: var(--faint); }

.txd-actions { display: flex; gap: 10px; }
.txd-actions > button { flex: 1; }
.txd-hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.txd-locked {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 13px; line-height: 1.5; color: var(--dim);
}
.txd-locked svg { flex-shrink: 0; fill: none; stroke: currentColor; }

/* A closed month reads as settled, not as broken: quieter, never crossed out. */
.tx-card.is-locked { background: rgba(255,255,255,.022); }
.tx-card.is-locked .tx-desc, .tx-card.is-locked .tx-amount { color: var(--soft); }
/* Unlocked, row 2 column 3 is empty and the meta line takes it. Locked, the
   lock needs it back — otherwise the two would render on top of each other. */
.tx-card.is-locked .tx-meta { grid-column: 2; }

/* A closed month's rows are readable, not editable. The lock sits under the
   amount, in the column the card already reserves for it, so a locked card is
   exactly as tall as an open one. The sheet explains why when opened. */
.tx-lock {
  grid-column: 3; grid-row: 2; justify-self: end; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--faint);
}
.tx-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; }

/* ---- swipe to reveal ------------------------------------------------- */
/* The row is the clipping frame: the two buttons sit in it, on the right, and
   the card slides left over them. Only History builds these — Home renders a
   bare .tx-card, so it cannot be swiped at all. */
.tx-row { position: relative; border-radius: var(--r); overflow: hidden; }
.tx-row > .tx-card {
  position: relative; z-index: 1;
  /* The browser keeps vertical panning; we take horizontal. Without this the
     page scroll and the swipe fight each other on a phone. */
  touch-action: pan-y;
  transition: transform .22s cubic-bezier(.32,.72,0,1), background .14s ease, border-color .14s ease;
}
/* While a finger is down the card must track it exactly — an easing curve here
   reads as lag. */
.tx-row > .tx-card.is-dragging { transition: none; }

/* The buttons only exist once you swipe. The card is translucent glass, so a
   button sitting under a resting card would show straight through it — which
   is what made them look like they were overlapping every row. */
.tx-row > .tx-card { background: linear-gradient(var(--panel), var(--panel)), var(--bg); }
.tx-row > .tx-card:hover { background: linear-gradient(rgba(255,255,255,.085), rgba(255,255,255,.085)), var(--bg); }
.tx-swipe-actions {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  width: 104px; padding-right: 8px; box-sizing: border-box;
  opacity: 0; visibility: hidden;
  transition: opacity .16s ease, visibility 0s linear .16s;
}
.tx-row.is-open .tx-swipe-actions, .tx-row.is-swiping .tx-swipe-actions {
  opacity: 1; visibility: visible; transition: opacity .16s ease, visibility 0s;
}
/* Round, icon-only, sized to sit inside the card's height with room to spare.
   A calm steel blue for edit and a muted red for delete: clearly different
   under a thumb without either one shouting from every row. */
.tx-swipe-btn {
  width: 40px; height: 40px; flex: 0 0 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
  transition: filter .14s ease, transform .14s ease;
}
.tx-swipe-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.tx-swipe-btn:active { filter: brightness(.9); transform: scale(.92); }
.tx-swipe-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tx-swipe-edit { background: #4f78b8; color: #fff; }
.tx-swipe-del  { background: #c9544d; color: #fff; }

/* A quiet heading for a list that is not in a panel. */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 2px 2px 0;
}
.section-title { font-size: 13px; font-weight: 600; margin: 0; color: var(--soft); }
.section-note {
  font-size: 11px; color: var(--dim); font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; flex-shrink: 0;
}

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 64px 20px; color: var(--dim); text-align: center; font-size: 13.5px;
}
.empty-state p { margin: 0; max-width: 24ch; }

/* =========================================================================
   ANALYTICS
   Charts encode magnitude in ONE hue. Identity is always carried by the
   tinted glyph plus the text label next to it — never by the bar's colour.
   Twelve chalk tints cannot pass a colourblind-separation check as a
   categorical scale, so they are not used as one.
   ========================================================================= */
.stat-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-tile { padding: 14px 14px 13px; }
.stat-label { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .09em; line-height: 1.6; }
.stat-value {
  font-size: 21px; font-weight: 300; letter-spacing: -.015em; line-height: 1.35; margin-top: 2px;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-sub {
  font-size: 11px; color: var(--dim); line-height: 1.6; min-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.chart-wrap { width: 100%; overflow-x: auto; }
.chart-host { position: relative; }
.chart { width: 100%; height: auto; display: block; touch-action: pan-y; }
.chart-empty { color: var(--dim); font-size: 13px; margin: 0; padding: 12px 0; line-height: 1.6; }
.chart-axis { fill: var(--dim); font-size: 9.5px; }
.chart-grid { stroke: var(--rule); stroke-width: 1; }
.chart-baseline { stroke: var(--faint); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { fill: rgba(194,214,232,.07); }

/* Hover / tap readout. Centred on the point, clamped inside the panel. */
.chart-tip {
  position: absolute; top: -6px; transform: translate(-50%, -100%);
  background: rgba(38,39,50,.97); border: 1px solid var(--rule); border-radius: 6px;
  padding: 5px 9px; pointer-events: none; white-space: nowrap; z-index: 2;
  display: flex; flex-direction: column; gap: 1px;
}
.chart-tip[hidden] { display: none; }
.chart-tip-title { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .07em; line-height: 1.5; }
.chart-tip-value { font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.4; }
.chart-dot { fill: var(--acc); stroke: var(--bg); stroke-width: 2; }
.chart-bar { fill: rgba(194,214,232,.34); }
.chart-bar.is-today { fill: var(--acc); }
.chart-hit { fill: transparent; cursor: pointer; }
.chart-crosshair { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 3; }

/* Ranked magnitude list — the shared form for categories, members, places. */
.rank-list { display: flex; flex-direction: column; gap: 14px; }
.rank-row { display: flex; flex-direction: column; gap: 7px; }
.rank-top { display: flex; align-items: center; gap: 9px; font-size: 13.5px; line-height: 1.5; }
.rank-name {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 500;
}
.rank-name > span { overflow: hidden; text-overflow: ellipsis; }
.rank-share { font-size: 11.5px; color: var(--dim); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.rank-value { font-size: 13.5px; flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--soft); }
.rank-track { height: 5px; border-radius: 3px; background: rgba(246,246,250,.10); overflow: hidden; }
.rank-fill {
  height: 100%; border-radius: 3px; background: rgba(194,214,232,.42);
  transition: width .6s cubic-bezier(.22,1,.36,1);
}
.rank-row:first-child .rank-fill { background: var(--acc); }

/* Settle up */
.settle-balances { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.settle-bal-row { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.5; }
.settle-bal-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settle-bal-meter {
  width: 84px; height: 4px; flex-shrink: 0; border-radius: 2px; position: relative;
  background: rgba(246,246,250,.10);
}
.settle-bal-meter i { position: absolute; top: 0; height: 100%; border-radius: 2px; }
.settle-bal-meter i.pos { left: 50%; background: rgba(159,199,178,.75); }
.settle-bal-meter i.neg { right: 50%; background: rgba(217,184,162,.75); }
.settle-bal-meter::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--faint); }
.settle-bal-value { width: 74px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--dim); }
.settle-bal-value.pos { color: var(--acc2); }
.settle-bal-value.neg { color: var(--warm); }

.settle-list { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.settle-row {
  display: flex; align-items: center; gap: 10px; padding: 12px 0;
  border-top: 1px solid var(--rule); font-size: 13.5px; line-height: 1.5;
}
.settle-row-text { flex: 1; min-width: 0; color: var(--soft); }
.settle-row-text strong { font-weight: 500; color: var(--ink); }
.settle-arrow { color: var(--faint); flex-shrink: 0; }
.settle-arrow svg { width: 15px; height: 15px; }
.settle-amount { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--acc); }
.settle-even { color: var(--acc2); font-size: 13.5px; margin: 14px 0 0; text-align: center; padding: 10px 0; border-top: 1px solid var(--rule); }

/* Settle-up agreement — the record of whether the room says these payments
   were actually made. It sits under the figures because it describes them;
   it never changes one. */
.settle-status { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.settle-status:empty { display: none; }
.settle-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px;
  border: 1px solid var(--rule); border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim); line-height: 1.5;
}
.settle-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
.settle-badge.is-settled { color: var(--acc2); border-color: rgba(159,199,178,.32); background: rgba(159,199,178,.09); }
.settle-badge.is-pending { color: var(--acc); border-color: rgba(194,214,232,.28); background: var(--acc-lo); }
.settle-badge.is-stale { color: var(--warm); border-color: rgba(217,184,162,.32); background: rgba(217,184,162,.09); }

.settle-status-note { font-size: 12.5px; color: var(--dim); margin: 10px 0 0; line-height: 1.6; }
.settle-status-note strong { color: var(--soft); font-weight: 500; }

/* Who has agreed. A tick or a wait glyph carries the state as well as the
   colour, so the row still reads without colour vision. */
.settle-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.settle-person {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px;
  border: 1px solid var(--rule); border-radius: 999px; font-size: 12px; color: var(--dim); line-height: 1.5;
}
.settle-person svg { width: 12px; height: 12px; flex-shrink: 0; }
.settle-person.agreed { color: var(--acc2); border-color: rgba(159,199,178,.28); }
.settle-person.waiting { color: var(--dim); }

.settle-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.settle-actions button { width: 100%; }
/* "You've agreed — waiting for 2 more" is a readout, not an action. Dimmed and
   inert rather than removed, so the panel doesn't reflow under your thumb. */
.settle-actions button[disabled] { opacity: .5; pointer-events: none; }

/* =========================================================================
   ACTIVITY
   ========================================================================= */
.activity-list { display: flex; flex-direction: column; }
.activity-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 2px; border-bottom: 1px solid var(--rule);
}
.activity-item:last-child { border-bottom: none; }
.activity-body { min-width: 0; }
.activity-text { font-size: 13.5px; line-height: 1.6; color: var(--soft); }
.activity-time { font-size: 11px; color: var(--dim); line-height: 1.6; }

/* =========================================================================
   PROFILE
   ========================================================================= */
.profile-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 26px 18px 22px; }
.profile-avatar-xl { margin-bottom: 4px; }
.profile-hero-name { font-size: 18px; font-weight: 500; line-height: 1.4; }
.profile-hero-role { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .12em; }
.profile-hero-hint { font-size: 11.5px; color: var(--dim); margin-top: 8px; }

.info-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; line-height: 1.6;
}
.info-row:last-child { border-bottom: none; }
.info-row > span:first-child { color: var(--dim); flex-shrink: 0; }
.info-row strong { font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.reveal-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.profile-actions { display: flex; flex-direction: column; gap: 8px; }

.member-list { display: flex; flex-direction: column; }
/* ---- monthly sharing ------------------------------------------------- */
/* Who is sharing the bill, in the hero tile that used to hold the transaction
   count. The faces sit in the sub-line's slot, so the tile is exactly as tall
   as the two beside it. */
.sharing-face { display: inline-flex; }
/* A paused member is dimmed, never dropped — that they are paused is the
   thing worth seeing, and removing them hides it. */
.sharing-face.is-paused { opacity: .35; }
.sharing-more { font-size: 11px; color: var(--dim); margin-left: 5px; }

/* Stacked panel buttons need air between them — two full-width buttons
   touching read as one broken control. */
.btn-stack { display: flex; flex-direction: column; gap: 10px; }
#sharing-change-btn { margin-top: 12px; width: 100%; }

.sharing-requests:not(:empty) { margin-bottom: 4px; }
.sharing-req {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 11px; margin-bottom: 7px;
  background: var(--acc-lo); border: 1px solid var(--rule); border-radius: var(--r-sm);
}
.sharing-req-text { flex: 1; min-width: 140px; font-size: 13px; line-height: 1.5; color: var(--soft); }
.sharing-req-actions { display: flex; gap: 7px; }
.sharing-req-wait { font-size: 11.5px; color: var(--dim); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }

.sharing-person {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
}
.sharing-person:last-child { border-bottom: none; }
.sharing-person.is-paused .sharing-person-name { color: var(--soft); }
.sharing-person.is-paused > .avatar-md { opacity: .45; }
.sharing-person-info { flex: 1; min-width: 0; }
.sharing-person-name { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sharing-person-sub { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.sharing-pill {
  flex-shrink: 0; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--acc2); background: rgba(159,199,178,.09); border: 1px solid rgba(159,199,178,.26);
}
.sharing-pill.is-paused { color: var(--warm); background: rgba(217,184,162,.09); border-color: rgba(217,184,162,.26); }

/* ---- Analytics: who's sharing -------------------------------------- */
/* Faces in a row with names under them — a glance, not a table. Wraps on a
   narrow phone rather than squeezing. */
.an-sharing-list { display: flex; flex-wrap: wrap; gap: 14px 6px; }
.an-face {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 64px; min-width: 0;
}
.an-face-name {
  max-width: 100%; font-size: 11.5px; color: var(--soft); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-face-tag {
  margin-top: -3px; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--warm); white-space: nowrap;
}
.an-face.is-paused > .avatar-md { opacity: .38; filter: grayscale(.6); }
.an-face.is-paused .an-face-name { color: var(--dim); }
#an-sharing-panel .seg-notice { margin-bottom: 14px; }
#an-sharing-panel .seg-breakdown:not(.hidden) { margin-bottom: 14px; }

/* ---- the mid-month split notice -------------------------------------- */
/* Only drawn when the month really was cut — see renderSegmentNotice. */
.seg-notice {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 0 0 10px; padding: 9px 11px;
  font: inherit; font-size: 12.5px; line-height: 1.45; text-align: left;
  color: var(--soft); background: var(--acc-lo);
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.seg-notice svg { flex-shrink: 0; fill: none; stroke: currentColor; }
.seg-notice-text { flex: 1; min-width: 0; }
.seg-notice-chevron { transform: rotate(90deg); transition: transform .18s ease; }
.seg-notice[aria-expanded="true"] .seg-notice-chevron { transform: rotate(-90deg); }

.seg-breakdown { margin: 0 0 12px; }
.seg-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.seg-row:last-child { border-bottom: none; }
.seg-row-when { font-size: 12px; color: var(--soft); white-space: nowrap; }
.seg-row-faces { flex: 1; display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.seg-row-figures { display: flex; flex-direction: column; align-items: flex-end; }
.seg-row-total { font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.seg-row-each { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---- handing over the host ------------------------------------------- */
.handover-list { display: flex; flex-direction: column; }
.handover-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 0; border: none; border-bottom: 1px solid var(--rule);
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.handover-row:last-child { border-bottom: none; }
.handover-name { flex: 1; min-width: 0; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.handover-row svg { flex-shrink: 0; fill: none; stroke: currentColor; color: var(--faint); }
.handover-row:active { background: rgba(255,255,255,.05); }

.member-list-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.member-list-item:last-child { border-bottom: none; }
.member-list-info { flex: 1; min-width: 0; }
.member-list-name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.member-list-role { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); line-height: 1.6; }

.profile-avatar-xl-btn { position: relative; border: none; background: none; padding: 0; border-radius: 50%; }
.profile-avatar-edit-badge {
  position: absolute; bottom: 0; right: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg2); color: var(--dim); display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
}
.profile-avatar-edit-badge svg { width: 12px; height: 12px; }

/* =========================================================================
   FAB & BOTTOM NAV
   ========================================================================= */
.fab {
  position: fixed; right: 20px; bottom: calc(88px + var(--safe-bottom));
  width: 50px; height: 50px; border-radius: 50%; z-index: 30;
  background: rgba(194,214,232,.12); border: 1px solid rgba(194,214,232,.3); color: var(--acc);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .18s ease;
}
.fab:hover, .fab:active { background: rgba(194,214,232,.19); }
.fab svg { width: 22px; height: 22px; }

.bottom-nav {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--safe-bottom)); z-index: 40;
  display: flex; padding: 6px 4px;
  background: rgba(30,30,41,.86);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--rule); border-radius: var(--r);
  max-width: 536px; margin: 0 auto;
}
.nav-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 8px 0; color: var(--dim); border-radius: var(--r-sm);
  transition: color .18s ease; position: relative;
}
.nav-btn svg { width: 20px; height: 20px; }
/* Five tabs share the bar now, and "Analytics" is the widest label — so the
   label may not wrap and may not push its neighbours around. */
.nav-btn span {
  font-size: 9px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.5;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-btn.active { color: var(--ink); }
/* The active tab is marked by a 2px chalk rule, not a filled pill. */
.nav-btn.active::after {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 16px; height: 2px; border-radius: 1px; background: var(--acc);
}
/* Something is waiting for this member on that tab — currently a settle-up
   request, which can be raised for a month they are not looking at. */
.nav-dot {
  position: absolute; top: 6px; left: 50%; margin-left: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 0 2px rgba(30,30,41,.9);
}

/* =========================================================================
   MODALS
   ========================================================================= */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(12,12,18,.62); z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal.sheet {
  width: 100%; max-width: 560px;
  background: var(--bg2);
  border: 1px solid var(--rule); border-bottom: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 8px 20px calc(24px + var(--safe-bottom));
  max-height: 88vh; overflow-y: auto;
  animation: slideUp .28s cubic-bezier(.32,.72,0,1);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-handle { width: 32px; height: 3px; background: var(--faint); border-radius: 2px; margin: 8px auto 16px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.modal-header h2 { font-size: 17px; font-weight: 600; margin: 0; }

#expense-form, #category-edit-form, #name-form, #sharing-form { display: flex; flex-direction: column; gap: 16px; }
/* Native selects and date inputs ignore half the box rules unless told to
   drop their platform chrome; without this the sharing sheet rendered as
   bright system widgets on the dark sheet. */
#sharing-form select, #sharing-form input[type="date"] {
  -webkit-appearance: none; appearance: none; width: 100%; box-sizing: border-box;
  min-height: 48px; color-scheme: dark;
}
#sharing-form select {
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d6d9e4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
#sharing-form option { background: var(--bg2); color: var(--ink); }
#sharing-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
#sharing-form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); cursor: pointer; }
#sharing-form .field-hint { margin: -6px 0 0; }
.label-optional { text-transform: none; letter-spacing: 0; color: var(--faint); }

.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.category-chip {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 13px 6px;
  border-radius: var(--r-sm); border: 1px solid var(--rule); background: var(--panel);
  transition: border-color .18s ease, background .18s ease;
}
.category-chip span { font-size: 11.5px; color: var(--soft); text-align: center; line-height: 1.35; }
.category-chip.selected { border-color: var(--tl, var(--faint)); background: rgba(255,255,255,.09); }
.category-chip.selected span { color: var(--ink); }

.product-picker { display: flex; flex-direction: column; gap: 10px; animation: viewIn .2s ease; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.product-chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 4px;
  border-radius: 6px; border: 1px solid var(--rule); background: var(--panel);
  transition: border-color .18s ease, background .18s ease;
}
.product-chip span:last-child { font-size: 10px; color: var(--soft); text-align: center; line-height: 1.3; }
.product-chip.selected { border-color: var(--tl, var(--faint)); background: rgba(255,255,255,.09); }
.product-chip.selected span:last-child { color: var(--ink); }

/* Date field & picker */
.date-field {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 12px 13px; font-size: 15px;
  background: rgba(255,255,255,.045); color: var(--ink); text-transform: none; letter-spacing: 0;
}
.date-field svg { color: var(--faint); flex-shrink: 0; }

/* ===========================================================================
   MONTH BAR — Activity only
   The one place a month is chosen. Two chips for the months people actually
   reach for, and "Previous" for the rest, so the common case is a tap and the
   rare case is a tap plus a list. Built from the existing chip vocabulary:
   a rule, a wash, one ink at descending alphas. No new colour.
   ========================================================================= */
.month-bar {
  display: flex; align-items: stretch; gap: 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 2px;
}
.month-bar::-webkit-scrollbar { display: none; }

.month-bar-prev {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 9px 13px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: rgba(255,255,255,.045); color: var(--soft);
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em; text-transform: none;
}
.month-bar-prev svg { color: var(--faint); flex-shrink: 0; }
.month-bar-prev:hover { color: var(--ink); border-color: var(--faint); }
.month-bar-prev[disabled] { opacity: .32; pointer-events: none; }

/* What the month you just picked actually comes to. Without it the month bar
   is a control with no visible result until you read the whole list. */
.month-summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 2px 2px 0;
}
.month-summary-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.month-summary-label {
  font-size: 12px; font-weight: 600; color: var(--dim);
  text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.month-summary-total {
  font-size: 21px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.month-summary-count { font-size: 11.5px; color: var(--dim); white-space: nowrap; flex-shrink: 0; }

.month-bar-chips { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.month-chip {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 9px 14px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: transparent; color: var(--dim);
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em; text-transform: none;
}
.month-chip:hover { color: var(--soft); border-color: var(--faint); }
.month-chip-name { white-space: nowrap; }
.month-chip-tag {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--faint);
}
/* Where you are, carried by weight and a brighter rule rather than a fill —
   a filled chip would read as a category tint, which means something else. */
.month-chip.is-active {
  color: var(--ink); border-color: rgba(194,214,232,.44); background: rgba(255,255,255,.055);
}
.month-chip.is-active .month-chip-tag { color: var(--acc); }

/* Month picker — the full window, newest first, grouped by year. */
.month-picker { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; }
.month-picker-year {
  font-size: 10.5px; font-weight: 600; color: var(--dim);
  text-transform: uppercase; letter-spacing: .11em;
  padding: 14px 2px 6px;
}
.month-picker-year:first-child { padding-top: 2px; }
.month-picker-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 13px 4px; border: none; border-bottom: 1px solid var(--rule);
  background: transparent; color: var(--soft);
  font-size: 14.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
.month-picker-row:last-child { border-bottom: none; }
.month-picker-row:hover { color: var(--ink); }
.month-picker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-picker-tag {
  font-size: 9.5px; font-weight: 600; color: var(--dim);
  text-transform: uppercase; letter-spacing: .1em; flex-shrink: 0;
}
.month-picker-row.is-selected { color: var(--ink); }
.month-picker-check { color: var(--acc); flex-shrink: 0; }

/* A day outside the write window is drawn but dead — the shape of the rule is
   visible, rather than being discovered by being refused. */
.date-cell.out-of-range { opacity: .22; pointer-events: none; }

.date-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
/* Dimmed and inert rather than removed, so the label never shifts under
   your thumb when you reach the end of the window. */
.date-nav .icon-btn-sm[disabled] { opacity: .3; pointer-events: none; }
.date-month-label { font-size: 14px; font-weight: 500; }
.date-chevron-prev { transform: rotate(180deg); }
.date-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
  font-size: 10px; color: var(--dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em;
}
.date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 18px; }
.date-cell {
  aspect-ratio: 1; border: 1px solid transparent; background: none; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--soft); display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.date-cell:hover { background: rgba(255,255,255,.075); }
.date-cell.today { color: var(--acc); }
.date-cell.selected { border-color: rgba(194,214,232,.34); background: rgba(194,214,232,.10); color: var(--acc); }

/* Host tools — category management */
.category-manage-group-title {
  font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .09em; margin: 20px 0 6px;
}
.category-manage-group-title:first-child { margin-top: 0; }
.category-manage-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.category-manage-name { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-manage-actions { display: flex; gap: 4px; flex-shrink: 0; }
.category-manage-actions .icon-btn-sm { border-color: transparent; background: transparent; }
.category-manage-actions .icon-btn-sm:hover { border-color: var(--rule); }
.add-category-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 10px;
  padding: 9px; border-radius: var(--r-sm); border: 1px dashed var(--faint); background: none;
  color: var(--dim); font-size: 12.5px; transition: color .18s ease, border-color .18s ease;
}
.add-category-btn:hover { color: var(--acc); border-color: rgba(194,214,232,.3); }

.icon-picker-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  max-height: 216px; overflow-y: auto; padding: 2px;
}
.icon-picker-option {
  aspect-ratio: 1; border-radius: 6px; border: 1px solid var(--rule); background: var(--panel);
  color: var(--t); display: flex; align-items: center; justify-content: center;
}
.icon-picker-option svg { width: 17px; height: 17px; fill: currentColor; }
.icon-picker-option.selected { border-color: var(--tl, var(--faint)); background: var(--tw, rgba(255,255,255,.05)); }

.color-picker-row { display: flex; flex-wrap: wrap; gap: 8px; }
.color-picker-option {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: var(--tw); border: 1px solid var(--tl); padding: 0;
}
.color-picker-option::before {
  content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--t);
}
.color-picker-option.selected { box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--tl); }

/* Confirm dialog sits above every other overlay (it can be opened from
   inside one, and same-z siblings stack by DOM order). */
#confirm-modal { z-index: 150; }
.modal.alert-modal {
  width: 300px; background: var(--bg2); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 24px 20px; text-align: center; align-self: center;
  animation: popIn .18s cubic-bezier(.32,.72,0,1);
}
@keyframes popIn { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.warning-icon { color: var(--warm); width: 26px; height: 26px; margin-bottom: 12px; }
.alert-modal h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; }
.alert-modal p { margin: 0 0 20px; font-size: 13px; color: var(--dim); line-height: 1.6; }
.alert-actions { display: flex; gap: 8px; }
.alert-actions button { flex: 1; }
/* Three choices don't fit side by side at 300px, and stacking them also puts
   the safe option nearest the thumb. Column-reverse keeps the DOM order
   cancel → alternative → primary while showing primary first. */
.alert-actions.stacked { flex-direction: column-reverse; }
.alert-actions.stacked button { flex: none; width: 100%; }

.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avatar-option {
  position: relative; border: none; background: none; padding: 0; border-radius: 50%;
  width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.avatar-option .avatar { width: 100%; height: 100%; }
.avatar-option .avatar svg { width: 48%; height: 48%; }
.avatar-option.selected .avatar { border-width: 1px; border-color: var(--t); background: var(--tw); }
.avatar-option-check {
  position: absolute; bottom: -1px; right: -1px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg2); color: var(--t); display: none; align-items: center; justify-content: center;
  border: 1px solid var(--tl);
}
.avatar-option.selected .avatar-option-check { display: flex; }
.avatar-option-check svg { width: 8px; height: 8px; }

/* =========================================================================
   TOAST & TOUR
   ========================================================================= */
.toast {
  position: fixed; top: calc(16px + var(--safe-top)); left: 50%; transform: translateX(-50%);
  background: rgba(38,39,50,.96); color: var(--soft); padding: 10px 18px; border-radius: var(--r-sm);
  font-size: 13px; z-index: 200; border: 1px solid var(--rule); max-width: 90vw; text-align: center;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: toastIn .25s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

.tour-overlay { position: fixed; inset: 0; z-index: 500; }
.tour-spotlight {
  position: fixed; border-radius: var(--r);
  box-shadow: 0 0 0 9999px rgba(12,12,18,.80);
  border: 1px solid var(--faint);
  transition: top .32s cubic-bezier(.32,.72,0,1), left .32s cubic-bezier(.32,.72,0,1),
    width .32s cubic-bezier(.32,.72,0,1), height .32s cubic-bezier(.32,.72,0,1), opacity .2s ease;
  pointer-events: none;
}
.tour-overlay.centered .tour-spotlight { opacity: 0 !important; }
.tour-tooltip {
  position: fixed; width: min(330px, 88vw); z-index: 1;
  background: var(--bg2); border: 1px solid var(--rule); border-radius: var(--r); padding: 18px;
  transition: top .32s cubic-bezier(.32,.72,0,1), left .32s cubic-bezier(.32,.72,0,1), opacity .18s ease;
  animation: popIn .2s cubic-bezier(.32,.72,0,1);
}
.tour-overlay.centered .tour-tooltip { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.tour-step-count { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; }
.tour-title { font-size: 15.5px; font-weight: 600; margin: 0 0 6px; }
.tour-body { font-size: 13px; line-height: 1.7; color: var(--dim); margin: 0 0 18px; }
/* margin-right:auto (not space-between) keeps the nav buttons right-aligned on
   the last step, where the skip button is display:none. */
.tour-actions { display: flex; align-items: center; gap: 10px; }
.tour-skip { background: none; border: none; color: var(--dim); font-size: 12.5px; padding: 6px 0; margin-right: auto; }
.tour-skip:hover { color: var(--soft); }
.tour-nav-btns { display: flex; gap: 6px; margin-left: auto; }
.tour-nav-btns .btn-ghost, .tour-nav-btns .btn-primary { padding: 9px 15px; font-size: 13px; }

@media (max-width: 360px) {
  .hero-value { font-size: 30px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .avatar-grid, .icon-picker-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Home: who is sharing, as faces only ------------------------------ */
/* One line of faces, centred on the tile itself. Every other tile after the
   first carries 14px of left padding and none on the right, which puts the
   centre of its content 7px right of the tile's centre — so this tile swaps
   that for 7px on each side: the same 14px in total, now symmetrical. */
.hero-stat.hero-stat-faces {
  display: flex; align-items: center; justify-content: center;
  padding-left: 7px; padding-right: 7px;
}
/* Each face gets an equal slice of the width, up to 28px: two or three people
   show large, a bigger room shrinks evenly to fit. Border-box so the 1px ring
   is inside the measured size and the row adds up exactly. */
.hero-faces { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-width: 0; }
.hero-face { flex: 0 1 28px; min-width: 0; aspect-ratio: 1 / 1; display: flex; }
.hero-face .avatar { width: 100%; height: 100%; box-sizing: border-box; }
.hero-face .avatar svg { width: 60%; height: 60%; }
.hero-face.is-paused { opacity: .32; filter: grayscale(.6); }

/* ---- Monthly sharing: who leads -------------------------------------- */
.sharing-person-name { display: flex; align-items: center; gap: 7px; }
.sharing-person-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-tag {
  flex-shrink: 0; padding: 1px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.6;
  color: var(--acc); background: var(--acc-lo); border: 1px solid rgba(194,214,232,.28);
}

/* ---- What's new ------------------------------------------------------ */
.whatsnew { display: flex; flex-direction: column; gap: 16px; }
.whatsnew-head { text-align: center; }
.whatsnew-kicker {
  display: inline-block; padding: 2px 9px; border-radius: 999px; margin-bottom: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acc2); background: rgba(159,199,178,.09); border: 1px solid rgba(159,199,178,.28);
}
.whatsnew-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.whatsnew-head p { margin: 5px 0 0; font-size: 13px; color: var(--dim); line-height: 1.5; }
.whatsnew-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wn-item {
  display: flex; align-items: center; gap: 13px; padding: 11px 12px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r);
  opacity: 0; transform: translateY(6px); animation: wnIn .4s ease forwards;
}
.wn-item:nth-child(2) { animation-delay: .08s; }
.wn-item:nth-child(3) { animation-delay: .16s; }
.wn-item:nth-child(4) { animation-delay: .24s; }
@keyframes wnIn { to { opacity: 1; transform: none; } }
.wn-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wn-text strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.wn-text span { font-size: 12px; color: var(--dim); line-height: 1.5; }
.whatsnew-check { justify-content: center; }
#whatsnew-close:disabled { opacity: .45; cursor: default; }

/* Snapshots: tiny, looping, one idea each. */
.wn-shot {
  position: relative; flex: 0 0 58px; height: 42px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(255,255,255,.04); border: 1px solid var(--rule);
}
/* Four people; one steps back. */
.wn-shot-share i { width: 10px; height: 10px; border-radius: 50%; background: var(--acc); opacity: .85; }
.wn-shot-share .wn-leaver { animation: wnLeave 3.2s ease-in-out infinite; }
@keyframes wnLeave { 0%, 35% { opacity: .85; transform: none; } 55%, 85% { opacity: .2; transform: translateY(3px) scale(.8); } 100% { opacity: .85; transform: none; } }
/* A bill in four shares becomes three. */
.wn-shot-split { gap: 2px; padding: 0 7px; }
.wn-shot-split b { flex: 1 1 0; height: 12px; border-radius: 3px; background: var(--acc2); opacity: .75; transition: none; }
.wn-shot-split .wn-leaver { animation: wnShrink 3.2s ease-in-out infinite; }
@keyframes wnShrink { 0%, 35% { flex-grow: 1; opacity: .75; } 55%, 85% { flex-grow: .0001; opacity: 0; margin-left: -2px; } 100% { flex-grow: 1; opacity: .75; } }
/* A card slides left to show two round buttons. */
.wn-shot-swipe { justify-content: flex-end; gap: 3px; padding-right: 5px; }
.wn-btn { width: 11px; height: 11px; border-radius: 50%; }
.wn-edit { background: #4f78b8; } .wn-del { background: #c9544d; }
.wn-card {
  position: absolute; left: 5px; top: 10px; width: 46px; height: 20px; border-radius: 5px;
  background: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)), var(--bg);
  animation: wnSwipe 3.2s ease-in-out infinite;
}
@keyframes wnSwipe { 0%, 30% { transform: none; } 50%, 80% { transform: translateX(-22px); } 100% { transform: none; } }
/* A search bar with a blinking caret. */
.wn-bar { width: 42px; height: 14px; border-radius: 7px; border: 1px solid rgba(194,214,232,.35); display: flex; align-items: center; padding-left: 5px; box-sizing: border-box; }
.wn-bar u { width: 1.5px; height: 8px; background: var(--acc); text-decoration: none; animation: wnCaret 1s steps(1) infinite; }
@keyframes wnCaret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wn-item { animation: none; opacity: 1; transform: none; }
  .wn-shot *, .wn-shot::before { animation: none !important; }
}