/* ==========================================================================
   UI layer: the app's visual system, loaded after app.css.
   One calm style: neutral surfaces, hairline borders, a single solid accent,
   no gradients, no glow, no heavy shadows. Layout stays in app.css.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --bg: #f6f6f8;
  --card: #ffffff;
  --ink: #101014;
  --mute: #5f5f6c;
  --line: #e9e9ee;
  /* text versions of the status colours and the accent: darker on light surfaces so small text stays readable */
  --okt: #047857;
  --warnt: #b45309;
  --badt: #be123c;
  --a1t: color-mix(in srgb, var(--a1) 76%, #000);
  --fill: #f0f0f4;
  --hair: transparent;
  --nav: rgba(255, 255, 255, 0.98);
  --navfill: #ffffff;
  --r: 16px;
  --shadow: 0 1px 2px rgba(16, 16, 20, 0.04);
  --glow: 0;
  --tint: 8%;
}
@media (prefers-color-scheme: dark) {
  html:not([data-mode='light']) {
    --bg: #0b0b0e;
    --card: #141418;
    --ink: #f4f4f6;
    --mute: #8d8d9a;
    --line: #25252d;
    --fill: #1c1c23;
    --nav: rgba(16, 16, 20, 0.98);
    --navfill: #101014;
    --shadow: none;
    --tint: 14%;
    --okt: var(--ok);
    --warnt: var(--warn);
    --badt: var(--bad);
    --a1t: var(--a1);
  }
}
html[data-mode='dark'] {
  --bg: #0b0b0e;
  --card: #141418;
  --ink: #f4f4f6;
  --mute: #8d8d9a;
  --line: #25252d;
  --fill: #1c1c23;
  --nav: rgba(16, 16, 20, 0.98);
  --navfill: #101014;
  --shadow: none;
  --tint: 14%;
  --okt: var(--ok);
  --warnt: var(--warn);
  --badt: var(--bad);
  --a1t: var(--a1);
}
/* the accent is one solid colour: both stops of every old gradient are the same hue */
html,
html[data-theme] {
  --a2: var(--a1);
  --h1: var(--a1);
  --h2: var(--a1);
}
html[data-theme='sunset'],
html:not([data-theme]) {
  --a1: #f26a21;
}
html[data-theme='ocean'] {
  --a1: #3b6ef5;
}
html[data-theme='violet'] {
  --a1: #7c5cf0;
}
html[data-theme='rose'] {
  --a1: #e8426f;
}
html[data-theme='emerald'] {
  --a1: #0ea371;
}
html[data-theme='gold'] {
  --a1: #d99106;
}

/* ---------- page ---------- */
body {
  background: var(--bg);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
body::before {
  display: none;
}
.wrap {
  padding-left: 16px;
  padding-right: 16px;
}
#view {
  padding-bottom: 104px;
}

/* header: a plain title row that stays put */
html body .top {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid transparent;
  padding-bottom: 10px;
}
html body .top.scrolled {
  border-bottom-color: var(--line);
  box-shadow: none;
}
html body .top h1 {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.03em;
}
html body .top small {
  font-size: 13px;
  font-weight: 500;
}
html body .backb,
html body .top .icon-btn,
html body #bell,
html body #meb {
  box-shadow: none;
}
html body .backb,
html body #bell {
  background: var(--card);
  border: 1px solid var(--line);
}
html body .famchip {
  background: var(--fill);
  border: 0;
  box-shadow: none;
  color: var(--mute);
}

/* ---------- surfaces ---------- */
html body .card,
html[data-mode='dark'] .card,
html:not([data-mode='light']) .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: none;
}
html body .card h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
html body .card h2 span {
  font-weight: 600;
}
html body .tile,
html body .qact {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: none;
}
html body .tile:active,
html body .qact:active,
html body .row:active {
  background: var(--fill);
}
html body .day {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--mute);
}

/* the big number cards: a quiet tinted surface, not a banner */
html body .card.hero,
html body .card.hero2,
html body .card.tripcard {
  background: color-mix(in srgb, var(--a1) var(--tint), var(--card));
  border: 1px solid color-mix(in srgb, var(--a1) 22%, var(--line));
  color: var(--ink);
  box-shadow: none;
  border-radius: 20px;
}
html body .hero::before,
html body .hero::after,
html body .hero2::before,
html body .hero2::after {
  display: none;
}
html body .hero .lbl,
html body .hero2 .lbl,
html body .hero2 .sub,
html body .hero .sub,
html body .tripcard .trip-ppl,
html body .tripcard .trip-b {
  color: var(--mute);
  opacity: 1;
}
html body .hero .big,
html body .hero2 .big {
  color: var(--ink);
}
html body .hero .chip,
html body .stats3 > div {
  background: var(--card);
  border: 1px solid var(--line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--ink);
}
html body .hero .chip b,
html body .stats3 b {
  color: var(--ink);
}
html body .stats3 small {
  color: var(--mute);
  opacity: 1;
}
html body .stats3 > div:nth-child(1) small svg {
  color: var(--ok);
}
html body .stats3 > div:nth-child(2) small svg {
  color: var(--a1);
}
html body .stats3 > div:nth-child(3) small svg {
  color: var(--bad);
}
html body .delta {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
}
html body .eye {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--mute);
  backdrop-filter: none;
}
html body .spark stop {
  stop-color: var(--a1);
}
html body .spark path[fill='none'] {
  stroke: var(--a1);
}
html body .hero2 .bar.light,
html body .hero .bar {
  background: color-mix(in srgb, var(--a1) 18%, transparent);
}
html body .hero2 .bar.light i,
html body .hero .bar i {
  background: var(--a1);
}
html body .tripcard .trip-bal {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
}
html body .tripcard .trip-bal.pos {
  color: var(--ok);
}
html body .tripcard .trip-bal.neg {
  color: var(--bad);
}

/* ---------- buttons ---------- */
html body .btn {
  border-radius: 12px;
  font-weight: 650;
  letter-spacing: -0.005em;
  box-shadow: none;
}
html body .btn.primary,
html body .sheet .btn.primary {
  background: var(--a1);
  color: #fff;
  box-shadow: none;
  border: 0;
}
html body .btn.primary:active {
  filter: brightness(0.92);
}
html body #view .card .btn.primary:not(.block):not(.qa *) {
  background: color-mix(in srgb, var(--a1) 13%, transparent);
  color: var(--a1);
}
html body .btn.soft {
  background: var(--fill);
  color: var(--ink);
  border: 0;
}
html body .btn.danger {
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  color: var(--bad);
  border: 0;
}
html body .fab {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--a1);
  color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--a1) 60%, transparent);
  bottom: calc(76px + env(safe-area-inset-bottom));
}
html body .checkout {
  bottom: calc(74px + env(safe-area-inset-bottom));
}

/* ---------- bottom navigation: a plain bar ---------- */
html body nav {
  left: 0;
  right: 0;
  bottom: 0;
  max-width: none;
  margin: 0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--navfill);
  /* iOS home-screen apps can open with the page a few pixels short of the screen; this paints the bar's colour into any gap below it */
  box-shadow: 0 120px 0 0 var(--navfill);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  justify-content: center;
}
html body nav button,
html body nav button.on {
  flex: 1;
  max-width: 120px;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0 4px;
  border-radius: 12px;
  background: none;
  box-shadow: none;
  color: var(--mute);
  font-size: 11px;
  font-weight: 600;
}
html body nav button.on {
  color: var(--a1);
}
html body nav button .nl {
  max-width: none;
  opacity: 1;
  margin: 0;
  overflow: visible;
}
html body nav button.on svg {
  transform: none;
  stroke-width: 2.2;
}
html body nav button.alerting::after {
  top: 4px;
  right: calc(50% - 16px);
  background: var(--bad);
  box-shadow: 0 0 0 2px var(--card);
}
html body nav button.on.alerting::after {
  background: var(--bad);
  box-shadow: 0 0 0 2px var(--card);
}

/* ---------- lists, forms, small parts ---------- */
html body .row {
  border-color: var(--line);
}
html body .ic,
html body .empty .ic {
  box-shadow: none;
}
html body .empty {
  padding: 36px 20px 20px;
}
html body .empty .ic {
  width: 64px;
  height: 64px;
  border-radius: 20px;
}
html body .pill {
  background: var(--fill);
  font-weight: 650;
}
html body .seg {
  background: var(--fill);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
html body .seg button {
  border-radius: 9px;
  font-weight: 650;
}
html body .seg button.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
html body .fchip,
html body .whobar button {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink);
}
html body .fchip.on,
html body .whobar button.on {
  background: var(--a1);
  border-color: var(--a1);
  color: #fff;
}
html body .whobar button.on .all {
  background: rgba(255, 255, 255, 0.25);
}
html body .tabs button.on {
  background: var(--ink);
  color: var(--bg);
}
html body .bar {
  height: 6px;
  background: var(--fill);
}
html body .bar i,
html body .bar.over i {
  box-shadow: none;
}
html body .bar i {
  background: var(--a1);
}
html body .bar.over i {
  background: var(--bad);
}
html body input:not([type='checkbox']):not([type='radio']),
html body select,
html body textarea {
  background: var(--fill);
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
}
html body input:focus,
html body select:focus,
html body textarea:focus {
  border-color: var(--a1);
  background: var(--card);
  outline: none;
}
html body .search,
html body .quick input,
html body .qa {
  box-shadow: none;
}
html body .qa input {
  background: none;
  border-color: transparent;
}
html body .qa {
  background: var(--card);
  border: 1px solid var(--line);
}
html body .chk.on {
  background: var(--ok);
  border-color: var(--ok);
}
html body .opt i {
  background: color-mix(in srgb, var(--a1) 16%, transparent);
}
html body label.bf {
  background: color-mix(in srgb, var(--a1) 7%, transparent);
  border-color: color-mix(in srgb, var(--a1) 20%, transparent);
}

/* ---------- sheets and toasts ---------- */
html body .scrim {
  background: rgba(8, 8, 12, 0.5);
  backdrop-filter: none;
}
html body .sheet {
  background: var(--card);
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  box-shadow: none;
}
html body .sheet .grab {
  background: var(--line);
}
html body #toast {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
  border: 0;
}

/* ---------- swipe rows, calendar, charts ---------- */
html body .swp .sw-front {
  background: var(--card);
}
html body .sw-b.edit {
  background: var(--a1);
}
html body .sw-b.del {
  background: var(--bad);
}
html body .dc.sel {
  background: var(--a1);
  box-shadow: none;
}
html body .avatar,
html body .avatar.xl {
  box-shadow: none;
}

/* ---------- sign-in ---------- */
html body .auth form {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: none;
}
html body .logo-img,
html body #splash img {
  box-shadow: none;
}

/* ==========================================================================
   Section identity: every part of the app has its own colour and its own
   top-card artwork, so you always know where you are.
   ========================================================================== */
#view {
  --sec: var(--a1);
}
#view[data-sec='today'],
#view[data-sec='money'] {
  --sec: var(--a1);
}
#view[data-sec='spend'] {
  --sec: #ef4668;
}
#view[data-sec='bills'] {
  --sec: #3b82f6;
}
#view[data-sec='loans'] {
  --sec: #8b5cf6;
}
#view[data-sec='savings'] {
  --sec: #10b981;
}
#view[data-sec='wealth'] {
  --sec: #0891b2;
}
#view[data-sec='reports'] {
  --sec: #d97706;
}
#view[data-sec='split'] {
  --sec: #7c3aed;
}
#view[data-sec='shop'] {
  --sec: #16a34a;
}
#view[data-sec='forecast'] {
  --sec: #0ea5e9;
}
#view[data-sec='repeat'] {
  --sec: #14b8a6;
}
#view[data-sec='trip'] {
  --sec: #0284c7;
}
#view[data-sec='family'] {
  --sec: #f59e0b;
}
#view[data-sec='me'] {
  --sec: #64748b;
}

/* the top card takes the section colour */
html body #view .card.hero,
html body #view .card.hero2,
html body #view .card.sumcard,
html body #view .card.gsum {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--sec) var(--tint), var(--card));
  border-color: color-mix(in srgb, var(--sec) 24%, var(--line));
}
html body #view .card.hero > *,
html body #view .card.hero2 > *,
html body #view .card.sumcard > *,
html body #view .card.gsum > * {
  position: relative;
  z-index: 1;
}
html body #view .hero .lbl svg,
html body #view .hero2 .lbl svg {
  color: var(--sec);
}
html body #view .hero .bar i,
html body #view .hero2 .bar.light i,
html body #view .gsum .bar i {
  background: var(--sec);
}
html body #view .hero .bar,
html body #view .hero2 .bar.light,
html body #view .gsum .bar {
  background: color-mix(in srgb, var(--sec) 18%, transparent);
}
html body #view .spark stop {
  stop-color: var(--sec);
}
html body #view .spark path[fill='none'] {
  stroke: var(--sec);
}
html body #view .sumcard.inc .sum-amt {
  color: var(--ok);
}

/* artwork: a different quiet pattern behind each section's top card */
html body #view .card.hero::after,
html body #view .card.hero2::after,
html body #view .card.sumcard::after,
html body #view .card.gsum::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  background: none;
}
/* money, today: soft diagonal bands */
#view[data-sec='today'] .card.hero2::after,
#view[data-sec='money'] .card.hero2::after {
  background: repeating-linear-gradient(135deg, transparent 0 22px, color-mix(in srgb, var(--sec) 7%, transparent) 22px 44px);
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 55%);
  mask-image: linear-gradient(200deg, #000, transparent 55%);
}
/* spending: vertical bars rising at the right */
#view[data-sec='spend'] .card.sumcard::after {
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--sec) 12%, transparent) 0 6px, transparent 6px 16px);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 70%), linear-gradient(to right, transparent 55%, #000);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, #000, transparent 70%), linear-gradient(to right, transparent 55%, #000);
  mask-composite: intersect;
}
/* bills: a calendar grid of dots */
#view[data-sec='bills'] .card.sumcard::after,
#view[data-sec='bills'] .card.hero::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--sec) 28%, transparent) 1.6px, transparent 2px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 65%);
  mask-image: linear-gradient(to left, #000, transparent 65%);
}
/* loans: rings, like a payoff dial */
#view[data-sec='loans'] .card.hero::after {
}
/* savings: coins */
#view[data-sec='savings'] .card.hero::after {
  background:
    radial-gradient(circle at 92% 30%, color-mix(in srgb, var(--sec) 18%, transparent) 0 26px, transparent 27px),
    radial-gradient(circle at 78% 78%, color-mix(in srgb, var(--sec) 12%, transparent) 0 18px, transparent 19px),
    radial-gradient(circle at 64% 22%, color-mix(in srgb, var(--sec) 9%, transparent) 0 11px, transparent 12px);
}
/* net worth: a climbing line field */
#view[data-sec='wealth'] .card.hero::after {
  background: repeating-linear-gradient(160deg, transparent 0 14px, color-mix(in srgb, var(--sec) 12%, transparent) 14px 15px);
  -webkit-mask-image: linear-gradient(to left, #000, transparent 70%);
  mask-image: linear-gradient(to left, #000, transparent 70%);
}
/* reports, split: slim columns / interlocking circles */
#view[data-sec='reports'] .card.hero::after {
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--sec) 10%, transparent) 0 10px, transparent 10px 22px);
  -webkit-mask-image: linear-gradient(to top left, #000, transparent 60%);
  mask-image: linear-gradient(to top left, #000, transparent 60%);
}
#view[data-sec='split'] .card.hero::after {
  background:
    radial-gradient(circle at 88% 50%, transparent 0 30px, color-mix(in srgb, var(--sec) 16%, transparent) 31px 33px, transparent 34px),
    radial-gradient(circle at 100% 50%, transparent 0 30px, color-mix(in srgb, var(--sec) 16%, transparent) 31px 33px, transparent 34px);
}
/* groceries: a basket weave */
#view[data-sec='shop'] .card.gsum::after {
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--sec) 10%, transparent) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--sec) 10%, transparent) 0 2px, transparent 2px 12px);
  -webkit-mask-image: linear-gradient(to left, #000, transparent 55%);
  mask-image: linear-gradient(to left, #000, transparent 55%);
}
/* forecast: a waveform */
#view[data-sec='forecast'] .card.sumcard::after {
  background: repeating-radial-gradient(ellipse at 50% 140%, transparent 0 14px, color-mix(in srgb, var(--sec) 14%, transparent) 14px 16px);
}
#view[data-sec='repeat'] .card.hero::after {
  background: repeating-linear-gradient(0deg, transparent 0 12px, color-mix(in srgb, var(--sec) 10%, transparent) 12px 13px);
  -webkit-mask-image: linear-gradient(to left, #000, transparent 65%);
  mask-image: linear-gradient(to left, #000, transparent 65%);
}
#view[data-sec='family'] .card.hero::after,
#view[data-sec='me'] .card.hero::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--sec) 22%, transparent) 1.4px, transparent 2px) 0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 60%);
  mask-image: linear-gradient(to left, #000, transparent 60%);
}

/* trips: a boarding pass */
#view[data-sec='trip'] .card.tripcard,
#view[data-sec='trip'] .card.hero {
  background: color-mix(in srgb, var(--sec) var(--tint), var(--card));
}
#view[data-sec='trip'] .card.tripcard {
  border-style: solid;
  border-radius: 22px;
  padding-bottom: 14px;
}
#view[data-sec='trip'] .card.tripcard::after {
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sec) 20%, transparent) 0 70px, transparent 71px);
  opacity: 1;
}
#view[data-sec='trip'] .tripcard .trip-t {
  color: var(--ink);
}
#view[data-sec='trip'] .tripcard .trip-bal {
  border-style: dashed;
}
#view[data-sec='trip'] .card.hero::after {
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sec) 18%, transparent) 0 60px, transparent 61px);
  opacity: 1;
}

/* ---------- top-card extras: each section's own little visual ---------- */
.rmini .rm-bg {
  stroke: color-mix(in srgb, var(--sec, var(--a1)) 18%, transparent);
}
.rmini .rm-fg {
  stroke: var(--sec, var(--a1));
}
.rmini .rm-t {
  font-size: 15px;
  font-weight: 800;
  fill: var(--ink);
  font-family: inherit;
}
.loanhero .lh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.loanhero .big {
  margin-bottom: 0;
}
.loanhero .lh-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.loanhero .lh-ring small {
  font-size: 11px;
  font-weight: 650;
  color: var(--mute);
}
.gsum-top {
  display: flex;
  align-items: center;
}
.gsum-top .rmini .rm-t {
  font-size: 13px;
}
.stack {
  display: flex;
  gap: 3px;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 4px;
}
.stack i {
  display: block;
  min-width: 6px;
  border-radius: 99px;
}
.stack-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mute);
}
.stack-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stack-key b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
/* spending: a bar for every day with spending */
.mbars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 42px;
  margin: 14px 8px 4px;
}
.mbars i {
  flex: 1;
  max-width: 14px;
  min-height: 4px;
  border-radius: 4px 4px 2px 2px;
  background: color-mix(in srgb, var(--sec) 55%, transparent);
}
.mbars i:last-child {
  background: var(--sec);
}
/* bills: the next seven days */
.wstrip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 14px 0 2px;
}
.wd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 0 5px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border: 1px solid transparent;
}
.wd small {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mute);
}
.wd b {
  font-size: 15px;
  font-weight: 750;
}
.wd i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: 3px 0 1px;
  background: transparent;
}
.wd em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: var(--sec);
  min-height: 12px;
}
.wd.due {
  background: var(--card);
  border-color: color-mix(in srgb, var(--sec) 35%, var(--line));
}
.wd.due i {
  background: var(--sec);
}
.wd.today {
  border-color: var(--sec);
}
/* trips: the perforated line of a boarding pass */
.tripcard .perf {
  position: relative;
  margin: 16px -16px 0;
  border-top: 2px dashed color-mix(in srgb, var(--sec) 30%, var(--line));
  height: 0;
}
.tripcard .perf::before,
.tripcard .perf::after {
  content: '';
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--sec) 24%, var(--line));
}
.tripcard .perf::before {
  left: -11px;
}
.tripcard .perf::after {
  right: -11px;
}

/* the header never changes size while you scroll (a collapsing header moved the page under your finger and made it flicker);
   once you scroll it only gains a hairline underneath */
html body .top,
html body .top.scrolled {
  padding-top: calc(14px + env(safe-area-inset-top));
  padding-bottom: 10px;
  transition: border-color 0.15s;
}
html body .top.scrolled h1 {
  font-size: 26px;
}
html body .top.scrolled small {
  opacity: 1;
  height: auto;
  overflow: visible;
}
html body .top.scrolled {
  border-bottom-color: var(--line);
}
/* a solid header background: blur behind a sticky bar repaints on every scroll frame and can shimmer on phones */
html body .top {
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ===== trip pages ===== */
.phead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 12px;
}
.phead .pt {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.phead .ps {
  font-size: 13px;
  color: var(--mute);
  margin-top: 1px;
}
.phead .ps b {
  font-weight: 700;
}
.phead .ps b.warn {
  color: var(--warn);
}
.phead .ps b.ok {
  color: var(--ok);
}
.pnote {
  font-size: 13px;
  margin: -4px 0 12px;
  white-space: pre-wrap;
}
.bmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--mute);
}
.bmeta .ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mute);
}
.bmeta .ref b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.bmeta a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--a1);
  font-weight: 650;
  text-decoration: none;
}
/* the checklist reads as a tidy list, not a stack of big cards */
#view[data-sec='trip'] .row .chk {
  width: 24px;
  height: 24px;
}
#view[data-sec='trip'] .card .row {
  padding-top: 9px;
  padding-bottom: 9px;
}

/* ===== forms in the bottom sheets: calmer ===== */
.two > * {
  min-width: 0;
}
.two input[type='date'],
label.f input[type='date'] {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  min-height: 46px;
}
html body label.f > span {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--mute);
  letter-spacing: 0;
}
html body label.f input:not([type='checkbox']),
html body label.f select {
  min-height: 46px;
  font-size: 15.5px;
}
html body .sheet h3 {
  font-size: 19px;
  letter-spacing: -0.02em;
}
html body .sheet .mute,
html body .sheet .note {
  font-size: 13px;
  line-height: 1.5;
}
details.mbox {
  margin: 4px 0 12px;
  border-top: 1px solid var(--line);
}
details.mbox > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px;
  font-size: 14px;
  font-weight: 650;
  color: var(--a1);
  cursor: pointer;
}
details.mbox > summary::-webkit-details-marker {
  display: none;
}
details.mbox > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}
details.mbox[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
details.mbox .mbody {
  padding-top: 2px;
}

/* ===== daily deliveries ===== */
#view[data-sec='deliveries'] {
  --sec: #ec4899;
}
#view[data-sec='deliveries'] .card.sumcard::after {
  background:
    radial-gradient(circle at 92% 70%, color-mix(in srgb, var(--sec) 18%, transparent) 0 8px, transparent 9px),
    radial-gradient(circle at 84% 78%, color-mix(in srgb, var(--sec) 14%, transparent) 0 6px, transparent 7px),
    radial-gradient(circle at 96% 84%, color-mix(in srgb, var(--sec) 14%, transparent) 0 6px, transparent 7px),
    radial-gradient(circle at 88% 62%, color-mix(in srgb, var(--sec) 22%, transparent) 0 4px, transparent 5px);
}
.dcard .dtoday {
  margin: 14px 0 12px;
}
.dgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 4px 0 12px;
}
.dgrid .dh {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--mute);
  padding-bottom: 2px;
}
.dl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--fill);
  font-size: 13px;
  transition: transform 0.1s;
}
.dl b {
  font-weight: 650;
}
.dl i {
  width: 13px;
  height: 13px;
}
.dl svg {
  color: #fff;
}
.dl.on {
  background: var(--sec, #ec4899);
  color: #fff;
}
.dl.now {
  box-shadow: inset 0 0 0 2px var(--sec, #ec4899);
}
.dl.on.now {
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--sec, #ec4899);
}
.dl:disabled {
  opacity: 0.35;
  cursor: default;
}
.dl:active:not(:disabled) {
  transform: scale(0.92);
}
.dl em {
  position: absolute;
  top: 2px;
  right: 4px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
}
.dsum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.dsum > div {
  background: var(--fill);
  border-radius: 14px;
  padding: 9px 12px;
}
.dsum small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--mute);
}
.dsum b {
  font-size: 15px;
  font-weight: 800;
}
.dsettled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  font-weight: 700;
  font-size: 14px;
}
.dpays {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

/* ===== plan rows (Today and Plans) ===== */
.plan-row {
  width: 100%;
  text-align: left;
}
.plan-row .pr-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 64px;
}
.plan-row .pr-when {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mute);
  white-space: nowrap;
}
.plan-row .pr-when.warn {
  color: var(--warn);
}
.plan-row .pr-when.ok {
  color: var(--ok);
}
.plan-row .pr-bal {
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}
.plan-row .pr-bal.ok {
  color: var(--ok);
}
.plan-row .pr-bal.bad {
  color: var(--bad);
}
.card .plan-row:last-child {
  border-bottom: 0;
}

/* ===== the space switcher ===== */
.spc-list {
  max-height: 54vh;
  overflow: auto;
  margin: 0 -4px;
  padding: 0 4px 4px;
}
.spc-h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 14px 4px 6px;
}
.spc-sec:first-child .spc-h {
  margin-top: 2px;
}
.spc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 14px;
  text-align: left;
}
.spc-row:active {
  background: var(--fill);
}
.spc-row.cur {
  background: color-mix(in srgb, var(--a1) 9%, transparent);
}
.spc-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: none;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  color: var(--c);
}
.spc-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.spc-t b {
  font-size: 15.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spc-t small {
  font-size: 12.5px;
  color: var(--mute);
  margin-top: 1px;
}
.spc-ck {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--a1);
  color: #fff;
  flex: none;
}
.spc-past {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  color: var(--mute);
  font-size: 13px;
  font-weight: 650;
}
.spc-new {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 6px;
}
.spc-new button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 10px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  text-align: left;
}
.spc-new button:active {
  background: var(--fill);
}
.spc-new button svg {
  color: var(--a1);
}
.spc-note {
  font-size: 12.5px;
  color: var(--mute);
  margin: 6px 10px 2px;
  line-height: 1.45;
}

.srow .sv.warn {
  color: var(--warnt);
  font-weight: 650;
}
html body .qa input:not([type='checkbox']):not([type='radio']),
html body .qa input:not([type='checkbox']):not([type='radio']):focus {
  background: none;
  border-color: transparent;
}

/* an element that has just animated must not keep acting like a transformed box: that trapped fixed bars (like the grocery checkout) inside the page */
.fade > * {
  animation-fill-mode: backwards !important;
}
.gnote {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 2px 4px 8px;
}
.fchip.gmore {
  background: transparent;
  border-style: dashed;
  color: var(--mute);
}
.fchip.gq {
  animation: gin 0.18s ease;
}
@keyframes gin {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
}

/* ===== analytics ===== */
#view[data-sec='insights'] {
  --sec: #6366f1;
}
#view[data-sec='insights'] .card.hero::after {
}
.ahero .ah-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ahero .ah-label {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 6px 0 4px;
}
.ahero .ah-sub {
  font-size: 13px;
  color: var(--mute);
  line-height: 1.45;
}
.ahero .ah-sub b {
  color: var(--ink);
  font-weight: 650;
}
.ah-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: none;
}
.ah-ring .rm-fg {
  stroke: var(--tone);
}
.ah-ring .rm-bg {
  stroke: color-mix(in srgb, var(--tone) 16%, transparent);
}
.ah-ring .rm-t {
  font-size: 20px;
}
.ah-ring small {
  font-size: 11px;
  font-weight: 650;
  color: var(--mute);
}
.asug {
  padding: 14px 16px;
}
.asug.bad {
  border-color: color-mix(in srgb, var(--bad) 40%, var(--line));
}
.asug.warn {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
}
.asug .s b {
  color: var(--ink);
  font-weight: 750;
}
.agrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.atile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.atile small {
  font-size: 12px;
  font-weight: 650;
  color: var(--mute);
  margin-top: 6px;
}
.atile b {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.atile em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--mute);
}
.achart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 130px;
  margin-top: 8px;
}
.achart.small {
  height: 90px;
  gap: 8px;
}
.acol {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  height: 100%;
}
.abars {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
.abars i {
  flex: 1;
  max-width: 9px;
  border-radius: 3px 3px 1px 1px;
}
.achart.small .abars i {
  max-width: 22px;
}
.abars i.in {
  background: color-mix(in srgb, var(--ok) 70%, transparent);
}
.abars i.out {
  background: color-mix(in srgb, var(--a1) 55%, transparent);
}
.acol.cur .abars i.in {
  background: var(--ok);
}
.acol.cur .abars i.out {
  background: var(--a1);
}
.acol span {
  font-size: 11px;
  font-weight: 650;
  color: var(--mute);
}
.akey {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mute);
}
.akey .k {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.akey .k.in {
  background: var(--ok);
}
.akey .k.out {
  background: var(--a1);
}
.acat + .acat {
  margin-top: 14px;
}
.stack.tall {
  height: 14px;
  margin: 6px 0 12px;
}
.rule {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: 13px;
}
.rule > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rule b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.rule strong {
  font-size: 18px;
  font-weight: 800;
}
.rule small {
  font-size: 11.5px;
  color: var(--mute);
}
.apart + .apart {
  margin-top: 14px;
}
.apart > .row b {
  font-size: 16px;
  font-weight: 800;
}

/* ===== meal planner: one list of days ===== */
.mday {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.mday:first-child {
  border-top: 0;
}
.mday .mhd {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mday .mhd b {
  font-size: 15px;
  font-weight: 700;
}
.mday.now .mhd b {
  color: var(--a1);
}
.mday .mhd small {
  display: block;
  font-size: 12.5px;
  color: var(--mute);
  margin-top: 1px;
}
.mrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 0 0;
  text-align: left;
}
.mrow .pill {
  min-width: 70px;
  text-align: center;
}
.mrow .t {
  font-weight: 600;
  font-size: 15px;
}

/* ===== sign in / sign up: plain, no drifting colour blobs ===== */
.auth::before,
.auth::after {
  display: none !important;
}
.auth .codein {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.auth .codein::placeholder {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.auth h1 {
  font-size: 30px;
}
.auth form {
  border-radius: 20px;
}
.mday .mhd .grow {
  flex: 1;
  min-width: 0;
}

/* ===== notification banners ===== */
html body #toast {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(10px + env(safe-area-inset-top));
  bottom: auto;
  transform: none;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
  display: flex;
  justify-content: center;
  max-width: none;
  z-index: 300;
  pointer-events: none;
}
html body #toast.show,
html body #toast.out {
  transform: none;
}
.tbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  pointer-events: auto;
  width: calc(100% - 24px);
  max-width: 420px;
  padding: 12px 14px 14px 12px;
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow:
    0 18px 40px -14px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-140%);
  opacity: 0;
}
#toast.show .tbox {
  animation: tin 0.42s cubic-bezier(0.2, 1.2, 0.3, 1) forwards;
}
#toast.out .tbox {
  animation: tout 0.24s ease-in forwards;
}
@keyframes tin {
  from {
    transform: translateY(-140%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes tout {
  from {
    transform: none;
    opacity: 1;
  }
  to {
    transform: translateY(-120%);
    opacity: 0;
  }
}
.tic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  color: #fff;
}
.tbox.ok .tic {
  background: var(--ok);
}
.tbox.err .tic {
  background: var(--bad);
}
.tbox.info .tic {
  background: #3b82f6;
}
.tbox.ok .tic svg {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: tdraw 0.4s 0.12s ease-out forwards;
}
@keyframes tdraw {
  to {
    stroke-dashoffset: 0;
  }
}
.tmsg {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.tact {
  flex: none;
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 700;
  color: var(--a1);
  background: color-mix(in srgb, var(--a1) 12%, transparent);
}
@keyframes tcount {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #toast.show .tbox {
    animation-duration: 0.01s;
  }
  .tbox.ok .tic svg {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* wide screens (tablet, laptop): the bar stays centred under the column instead of sliding off to the left */
@media (min-width: 700px) {
  html body nav {
    left: 50%;
    right: auto;
    width: min(560px, 100%);
    transform: translateX(-50%);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }
}
/* hidden amounts: small dots, not huge ones */
.hero2 .big .m {
  font-size: 0.4em;
  letter-spacing: 0.14em;
  vertical-align: middle;
}
.stats3 .m {
  letter-spacing: 0.12em;
}

/* sign-in footer links */
.legal-links {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--mut, #8d8d9a);
}
.legal-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* refreshing a page that was already on screen: no second round of grow-in animations */
html body #view.stale .bar i,
html body #view.stale .trend i,
html body #view.still .bar i,
html body #view.still .trend i {
  animation: none;
}

/* ===== need or want ===== */
#view[data-sec='decide'] {
  --sec: #8b5cf6;
}
#view[data-sec='decide'] .card.hero::after {
}
.dhero .dh-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 6px 0 4px;
}
.dhero .dh-sub {
  color: var(--mute);
  font-size: 14px;
  max-width: 28ch;
}
.dform .f input {
  width: 100%;
}
.dq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.dq > span {
  font-size: 14.5px;
  font-weight: 600;
  flex: 1;
}
.dq.col {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.seg.sm {
  flex: none;
  width: auto;
  margin: 0;
}
.seg.sm button {
  padding: 7px 14px;
  font-size: 13px;
}
.dchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dchips button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
}
.dchips button.on {
  background: var(--sec);
  border-color: var(--sec);
  color: #fff;
}
.dverdict {
  border-width: 1.5px;
}
.dverdict.good {
  border-color: var(--ok);
}
.dverdict.warn {
  border-color: var(--warn);
}
.dverdict.bad {
  border-color: var(--bad);
}
.dv-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dv-tag {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.dv-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.dv-sub {
  margin: 8px 0 14px;
  color: var(--mute);
  font-size: 14.5px;
}
.dtiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.dtile {
  background: var(--fill);
  border-radius: 14px;
  padding: 10px 12px;
}
.dtile small {
  display: block;
  color: var(--mute);
  font-size: 11.5px;
  font-weight: 600;
}
.dtile b {
  font-size: 17px;
}
.dwhy {
  list-style: none;
  margin: 14px 0;
  padding: 0;
}
.dwhy li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 14px;
}
.dwhy li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mute);
}
.dwhy li.good::before {
  background: var(--ok);
}
.dwhy li.warn::before {
  background: var(--warn);
}
.dwhy li.bad::before {
  background: var(--bad);
}
.dacts {
  display: grid;
  gap: 8px;
}
.dwait .btn {
  margin-left: 6px;
}

.linkbtn {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: 0;
  color: var(--a1);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}

/* ===== get started checklist ===== */
.obcard .ob-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.obcard .row.ob {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 11px 0;
  font: inherit;
  color: inherit;
}
.obcard .row.ob.done .t {
  color: var(--mute);
  text-decoration: line-through;
}
.obdot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
}
.obcard .row.ob.done .obdot {
  background: var(--ok);
  border-color: var(--ok);
}
.obcard .ob-top .grow {
  flex: 1;
  min-width: 0;
}

/* readable small text: status colours and the accent as text */
html body .pill.ok,
html body .amt.ok,
html body .s.ok {
  color: var(--okt);
}
html body .pill.warn,
html body .sv.warn,
html body .s.warn {
  color: var(--warnt);
}
html body .pill.bad,
html body .amt.bad,
html body .s.bad,
html body .sum-sub.bad {
  color: var(--badt);
}
html body nav button.on,
html body .seeall,
html body .linkbtn {
  color: var(--a1t);
}

/* labels on the tinted top cards, and the red count on the bell */
html body .sum-month,
html body .sum-sub,
html body .hero .lbl,
html body .hero2 .lbl,
html body .hero .sub,
html body .hero2 .sub,
html body .dhero .dh-sub {
  color: color-mix(in srgb, var(--ink) 74%, var(--card));
}
html body .bell i {
  background: color-mix(in srgb, var(--bad) 86%, #000);
}
html body .loan .s {
  white-space: normal;
}
.lshare {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sec, var(--a1)) 10%, var(--fill));
  font-size: 13px;
  color: var(--mute);
}
.lshare b {
  color: var(--ink);
}

.bud2 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--mute);
}
.bud2 b {
  color: var(--ink);
  margin-right: 2px;
}
.hero2 .bud2 .m {
  display: none;
  letter-spacing: 0.1em;
}
.hero2.masked .bud2 .v {
  display: none;
}
.hero2.masked .bud2 .m {
  display: inline;
}

/* ===== calmer pages: one look for the person bar, softer card patterns, one budget/cash-flow layout ===== */
html body .whobar {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin: 0 0 12px;
  background: var(--fill);
  border-radius: 12px;
  overflow-x: auto;
}
html body .whobar button {
  flex: 1 0 auto;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--mute);
  font-size: 13px;
  font-weight: 650;
  box-shadow: none;
}
html body .whobar button.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(16, 16, 20, 0.12);
}
html body .whobar button .all {
  background: transparent;
  width: auto;
  height: auto;
}
html body .whobar button.on .all {
  background: transparent;
}
html body #view .card.hero::after,
html body #view .card.sumcard::after,
html body #view .card.hero2::after {
  opacity: 0.4;
}
html body #view .card.flow {
  display: block;
}

/* ---------- ledger cards ----------
   The app is a ledger, so the cards borrow from paper and wallets:
   - the big number cards are dark "wallet cards" a gold-to-orange sheen and a dashed perforation above the stats;
   - every other card is crisp paper with a hairline edge, a tiny engraved heading, tabular figures and receipt-style dotted dividers.
   Gradients only, nothing blurred. */
html body .card,
html[data-mode='dark'] .card,
html:not([data-mode='light']) .card {
  border-radius: 20px;
  box-shadow:
    0 1px 0 var(--line),
    0 10px 22px -16px rgba(16, 16, 20, 0.35);
}
html body .card h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute);
}
html body .card h2 span {
  letter-spacing: 0;
  text-transform: none;
}
html body .card .big,
html body .card .amt,
html body .row .amt,
html body .hero .big,
html body .hero2 .big {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
html body .card .row + .row,
html body .card .plan-row + .plan-row {
  border-top: 1px dotted color-mix(in srgb, var(--mute) 45%, transparent);
}
html body #view[data-sec] .card.hero,
html body #view[data-sec] .card.hero2,
html body #view[data-sec] .card.tripcard {
  --ink: #fff;
  --mute: rgba(255, 255, 255, 0.72);
  --card: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.16);
  --okt: #4ade80;
  --warnt: #fbbf24;
  --badt: #fb7185;
  --a1t: #fdba74;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(251, 191, 36, 0.07), transparent 30%), linear-gradient(155deg, #23232b 0%, #14141a 70%, #1c1714 130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 24px -16px rgba(20, 20, 26, 0.6);
}
html body .hero .lbl,
html body .hero2 .lbl {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}
html body .hero .big,
html body .hero2 .big {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
html body .hero .chip,
html body .stats3 > div,
html body .delta,
html body .eye {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}
html body .hero .chip b,
html body .stats3 b,
html body .stats3 small {
  color: #fff;
}
html body .stats3 {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
}
html body .hero2 .bar.light,
html body .hero .bar {
  background: rgba(255, 255, 255, 0.14);
}
html body .hero2 .bar.light i,
html body .hero .bar i {
  background: linear-gradient(90deg, #fbbf24, var(--a1));
}
html body #view[data-sec] .hero::before,
html body #view[data-sec] .hero::after,
html body #view[data-sec] .hero2::before,
html body #view[data-sec] .hero2::after,
html body #view[data-sec] .tripcard::after {
  display: none;
}

/* ---------- motion ----------
   Only opacity and transform are animated (cheap on phones). Pages slide in from the side you came from,
   taps give a small press, the active tab lifts, bars and sheets ease. All of it stops for "reduce motion". */
html {
  -webkit-tap-highlight-color: transparent;
}

html body .card,
html body .tile,
html body .qact,
html body .row,
html body .fab,
html body .btn,
html body nav button {
  transition:
    transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.16s,
    border-color 0.16s,
    opacity 0.16s;
}
html body .tile:active,
html body .qact:active,
html body .fab:active,
html body .btn:active {
  transform: scale(0.96);
}
html body .row[data-go]:active,
html body .row[data-edit]:active {
  transform: scale(0.99);
}
html body nav button svg {
  transition: transform 0.28s cubic-bezier(0.3, 1.5, 0.5, 1);
}
html body nav button.on svg {
  transform: translateY(-2px) scale(1.12);
}
html body nav button:active svg {
  transform: scale(0.9);
}
html body .whobar button,
html body .whobar > * {
  transition:
    background-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
html body .sheet {
  transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.25, 1);
}
html body .sheet-wrap .scrim {
  transition: opacity 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  html body .tile:active,
  html body .qact:active,
  html body .fab:active,
  html body .btn:active,
  html body nav button.on svg {
    transform: none;
  }
}

/* ---------- more motion ---------- */
.fab {
  animation: fabin 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) 0.12s backwards;
}
@keyframes fabin {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-90deg);
  }
}
html body nav button.on {
  animation: tabon 0.3s ease-out;
}
@keyframes tabon {
  from {
    background-color: transparent;
  }
}
html body .chk {
  transition:
    background-color 0.18s,
    border-color 0.18s,
    transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
html body .chk.on {
  transform: scale(1.12);
  animation: chkpop 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes chkpop {
  from {
    transform: scale(0.7);
  }
}
html body .done .t {
  transition: color 0.25s;
}
html body #bell:active,
html body #meb:active,
html body .backb:active {
  transform: scale(0.9);
}
html body #bell,
html body #meb,
html body .backb {
  transition: transform 0.15s;
}
html body #bell svg {
  transform-origin: 50% 10%;
}
html body #bell:active svg {
  animation: ring 0.5s ease;
}
@keyframes ring {
  20% {
    transform: rotate(18deg);
  }
  45% {
    transform: rotate(-14deg);
  }
  70% {
    transform: rotate(8deg);
  }
}
html body .sk {
  animation: skshine 1.4s ease-in-out infinite;
  background: linear-gradient(100deg, var(--card) 30%, var(--fill) 50%, var(--card) 70%);
  background-size: 250% 100%;
}
@keyframes skshine {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}
html body .bar i {
  position: relative;
  overflow: hidden;
}
html body .bar i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: barshine 1.6s ease-in-out 1s 1;
}
@keyframes barshine {
  60%,
  100% {
    transform: translateX(100%);
  }
}
html body .empty .ic {
  animation: floaty 4s ease-in-out infinite;
}
html body .pill,
html body .chip,
html body .tabs button {
  transition:
    background-color 0.2s,
    color 0.2s,
    transform 0.15s;
}
html body .tabs button:active,
html body .pill:active {
  transform: scale(0.94);
}
html body input:focus,
html body select:focus,
html body textarea:focus {
  transition: box-shadow 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .fab,
  html body nav button.on,
  html body .chk.on,
  html body .sk,
  html body .bar i::after,
  html body .empty .ic,
  html body #bell:active svg {
    animation: none;
  }
}

/* ---------- loan cards: each loan is a card ----------
   A dark card face tinted with the loan's colour: name and masked account number on top,
   what is left in big figures, a progress bar, and next EMI / EMI / end date along the bottom like a card's expiry line. */
html body #view .card.lcx {
  --ink: #fff;
  --mute: rgba(255, 255, 255, 0.7);
  --card: rgba(255, 255, 255, 0.09);
  --line: rgba(255, 255, 255, 0.16);
  --okt: #4ade80;
  --warnt: #fbbf24;
  --badt: #fb7185;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 18px;
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--lc) 38%, transparent), transparent 55%),
    linear-gradient(160deg, #24242c, #15151b);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 16px -12px color-mix(in srgb, var(--lc) 45%, #000);
}
.lcx-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lcx-top .t {
  font-weight: 700;
  font-size: 16px;
}
.lcx-top .s {
  font-size: 12.5px;
  color: var(--mute);
}
.lcx-no {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.lcx-bal {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 18px 0 12px;
}
.lcx-bal small,
.lcx-foot small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 600;
}
.lcx-bal .amt {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.lcx-bal .amt.bad {
  color: #fff;
}
.lcx-pct {
  text-align: right;
  font-size: 20px;
  font-weight: 700;
}
.lcx .bar {
  background: rgba(255, 255, 255, 0.14);
  margin: 0 0 6px;
}
.lcx .bar i {
  background: linear-gradient(90deg, #fff, var(--lc));
}
.lcx-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
}
.lcx-foot b {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.lcx-foot .warn b {
  color: #fbbf24;
}
.lcx .lshare {
  background: rgba(255, 255, 255, 0.1);
  color: var(--mute);
}
.lcx .lshare b {
  color: #fff;
}
.lcx .lact .btn.soft {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
html body #view .card.lcx .lact .btn.primary:not(.block):not(.qa *) {
  background: var(--a1);
  color: #fff;
}

/* ---------- card holder ----------
   The loans sit side by side in a rail that snaps like a wallet. The card in the middle is full size, the others
   step back; the next one peeks in so it is clear you can swipe. What you land on shows its details underneath. */
.lholder {
  margin: 0 -16px;
}
.lrail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  padding: 6px 16px 14px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lrail::-webkit-scrollbar {
  display: none;
}
.lslot {
  flex: 0 0 84%;
  max-width: 340px;
  scroll-snap-align: start;
  cursor: pointer;
  will-change: transform, opacity;
}
.lface {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.lface.flipped {
  transform: rotateY(180deg);
}
html body #view .card.lfr,
html body #view .card.lbk {
  margin: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
html body #view .card.lbk {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}
.lcx-back {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  margin-top: 18px;
}
.lcx-back small {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 600;
}
.lcx-back b {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.ldots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: -2px 0 12px;
}
.ldots i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--mute) 40%, transparent);
  transition:
    width 0.3s cubic-bezier(0.2, 0.9, 0.25, 1),
    background-color 0.3s;
  cursor: pointer;
}
.ldots i.on {
  width: 20px;
  background: var(--a1);
}
@keyframes dswap {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
.ldcard {
  position: relative;
  margin-bottom: 14px;
  padding: 18px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 6px 14px -12px color-mix(in srgb, var(--lc) 50%, #000);
  overflow: hidden;
}
.ldcard::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 60px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lc) 9%, transparent), transparent);
  pointer-events: none;
}
.ldcard > * {
  position: relative;
}
.dhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dhead .t {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.dhead span {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--lc);
  background: color-mix(in srgb, var(--lc) 14%, transparent);
}
.dnext {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--fill);
}
.dnext small,
.dtile small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 600;
}
.dwhen {
  font-size: 18px;
  font-weight: 750;
  margin-top: 2px;
}
.damt {
  font-size: 16px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.dring {
  position: relative;
  width: 60px;
  height: 60px;
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
}
.dring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.dring circle {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}
.dring .bg {
  stroke: color-mix(in srgb, var(--lc) 18%, transparent);
}
.dring .fg {
  stroke: var(--lc);
  stroke-dashoffset: var(--to);
}
.dring b {
  font-size: 17px;
  line-height: 1;
}
.dring small {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  margin: 0;
  text-transform: none;
}
.dnext.soon .dring .fg {
  stroke: var(--warn);
}
.dnext.soon .dring b {
  color: var(--warnt);
}
.djourney {
  margin-top: 16px;
}
.dj-top,
.dj-ends {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--mute);
}
.dj-top b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dj-top span:last-child {
  font-weight: 700;
  color: var(--lc);
}
.dj-track {
  position: relative;
  height: 10px;
  margin: 8px 0 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--lc) 14%, var(--fill));
}
.dj-track i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lc) 60%, #fff), var(--lc));
  transform-origin: left;
}
.dj-track em {
  position: absolute;
  top: 50%;
  left: var(--w);
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--lc);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.dj-ends {
  font-size: 12px;
}
.dtiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.dtile {
  padding: 12px;
  border-radius: 16px;
  background: var(--fill);
}
.dtile b {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.dti {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 9px;
  color: var(--lc);
  background: color-mix(in srgb, var(--lc) 14%, transparent);
}
.ldcard .lact {
  margin-top: 16px;
}
/* played only when you land on a different loan: sections rise in one after another, the ring and the bar fill */
#ldetail.swap .dz {
  animation: dzin 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes dzin {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
#ldetail.swap .dring .fg {
  animation: dring 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards;
}
@keyframes dring {
  from {
    stroke-dashoffset: var(--c, 151);
  }
}
#ldetail.swap .dj-track i {
  animation: djfill 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards;
}
@keyframes djfill {
  from {
    transform: scaleX(0);
  }
}
#ldetail.swap .dj-track em {
  animation: djdot 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards;
}
@keyframes djdot {
  from {
    left: 0;
  }
}
.dnext.soon .dring {
  animation: dpulse 2s ease-in-out infinite;
}
@keyframes dpulse {
  50% {
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  #ldetail.swap,
  #ldetail.swap .dz,
  #ldetail.swap .dring .fg,
  #ldetail.swap .dj-track i,
  #ldetail.swap .dj-track em,
  .dnext.soon .dring {
    animation: none;
  }
  .lface,
  .ldots i {
    transition: none;
  }
}

/* ---------- add forms: expense, income, sticky note, bill ----------
   Each form has its own colour (--k). A rounded sheet with a coloured glow at the top, an icon beside the title,
   a big centred amount, soft filled inputs that light up in the form's colour, a pill category picker, and a button
   that stays at the bottom. It rises with a little spring and the fields follow one after another. */
html body .sheet-wrap[data-kind] .sheet {
  --k: var(--a1);
  border: 0;
  border-radius: 30px 30px 0 0;
  padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
  background: radial-gradient(60% 70px at 50% 0%, color-mix(in srgb, var(--k) 8%, transparent), transparent), var(--card);
  box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.35);
}
html body .sheet-wrap[data-kind] .grab {
  width: 44px;
  background: color-mix(in srgb, var(--k) 40%, var(--line));
}
html body .sheet-wrap[data-kind] .sheet h3 {
  justify-content: flex-start;
  gap: 12px;
  font-size: 20px;
  font-weight: 750;
}
html body .sheet-wrap[data-kind] .sheet h3 .sht {
  flex: 1;
}
html body .sheet-wrap[data-kind] .shi {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--k) 70%, #fff), var(--k));
  box-shadow: 0 4px 10px -6px var(--k);
}
html body .sheet-wrap[data-kind] #sx {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fill);
  border: 0;
  color: var(--mute);
}
html body .sheet-wrap[data-kind] .amount-in {
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 46px;
  font-weight: 800;
  padding: 6px 0 10px;
  color: var(--ink);
  border-bottom: 2px solid color-mix(in srgb, var(--k) 25%, var(--line));
  border-radius: 0;
  caret-color: var(--k);
  transition: border-color 0.25s;
}
html body .sheet-wrap[data-kind] .amount-in:focus {
  outline: 0;
  border-bottom-color: var(--k);
}
html body .sheet-wrap[data-kind] .amount-in::placeholder {
  color: color-mix(in srgb, var(--mute) 55%, transparent);
}
html body .sheet-wrap[data-kind] label.f > span {
  margin-left: 2px;
}
html body .sheet-wrap[data-kind] label.f input:not([type='checkbox']),
html body .sheet-wrap[data-kind] label.f select,
html body .sheet-wrap[data-kind] textarea,
html body .sheet-wrap[data-kind] input[type='datetime-local'] {
  background: var(--fill);
  border: 1.5px solid transparent;
  border-radius: 14px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}
html body .sheet-wrap[data-kind] label.f input:focus,
html body .sheet-wrap[data-kind] label.f select:focus,
html body .sheet-wrap[data-kind] textarea:focus,
html body .sheet-wrap[data-kind] input[type='datetime-local']:focus {
  outline: 0;
  border-color: var(--k);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 12%, transparent);
}
html body .sheet-wrap[data-kind] .cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -20px 14px;
  padding: 4px 20px 6px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding: 0 20px;
}
html body .sheet-wrap[data-kind] .cats::-webkit-scrollbar {
  display: none;
}
html body .sheet-wrap[data-kind] .cats label {
  flex: none;
  scroll-snap-align: start;
}
html body .sheet-wrap[data-kind] .cats span {
  flex-direction: row;
  gap: 7px;
  padding: 9px 14px 9px 10px;
  border-radius: 99px;
  font-size: 13px;
  white-space: nowrap;
  transition:
    transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1),
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}
html body .sheet-wrap[data-kind] .cats span b {
  display: grid;
  place-items: center;
}
html body .sheet-wrap[data-kind] .cats span svg {
  width: 18px;
  height: 18px;
}
html body .sheet-wrap[data-kind] .cats input:checked + span {
  transform: scale(1.05);
  font-weight: 700;
  box-shadow: 0 3px 8px -6px var(--c);
}
html body .sheet-wrap[data-kind] .sbtn {
  position: sticky;
  bottom: -2px;
  min-height: 54px;
  margin-top: 8px;
  border-radius: 18px;
  font-size: 16.5px;
  font-weight: 700;
  background: linear-gradient(135deg, color-mix(in srgb, var(--k) 78%, #fff), var(--k));
  color: #fff;
  box-shadow:
    0 6px 12px -8px var(--k),
    0 0 0 8px var(--card);
}
html body .sheet-wrap[data-kind] .sbtn:active {
  transform: scale(0.98);
}
html body .sheet-wrap[data-kind] .chkrow .tg {
  transition: background-color 0.2s;
}
html body .sheet-wrap[data-kind] .chkrow input:checked + .tg {
  background: var(--k);
}
html body .sheet-wrap[data-kind='note'] textarea {
  min-height: 130px;
  padding: 16px;
  border: 0;
  border-radius: 6px 6px 18px 6px;
  font-size: 16.5px;
  line-height: 1.5;
  box-shadow: 0 12px 22px -14px rgba(0, 0, 0, 0.45);
  transform-origin: 30% 0;
}
html body .sheet-wrap[data-kind='note'] .nsw {
  transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
}
html body .sheet-wrap[data-kind='note'] input:checked + .nsw {
  transform: scale(1.18);
}

/* opening: the sheet springs up, the dim layer fades, then each part rises in turn */
html body .sheet-wrap[data-kind] .sheet {
  transition: transform 0.5s cubic-bezier(0.2, 1.05, 0.3, 1);
}
html body .sheet-wrap[data-kind].open .sheet > *:not(.grab) {
  animation: sfld 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
html body .sheet-wrap[data-kind].open .sheet > *:nth-child(2) {
  animation-delay: 0.08s;
}
html body .sheet-wrap[data-kind].open .sheet > *:nth-child(3) {
  animation-delay: 0.13s;
}
html body .sheet-wrap[data-kind].open .sheet > *:nth-child(4) {
  animation-delay: 0.18s;
}
html body .sheet-wrap[data-kind].open .sheet > *:nth-child(5) {
  animation-delay: 0.23s;
}
html body .sheet-wrap[data-kind].open .sheet > *:nth-child(6) {
  animation-delay: 0.28s;
}
html body .sheet-wrap[data-kind].open .sheet > *:nth-child(n + 7) {
  animation-delay: 0.33s;
}
@keyframes sfld {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
html body .sheet-wrap[data-kind].open .shi {
  animation: shipop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s backwards;
}
@keyframes shipop {
  from {
    transform: scale(0.3) rotate(-25deg);
    opacity: 0;
  }
}
html body .sheet-wrap[data-kind].open .amount-in {
  animation: amtin 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) 0.16s backwards;
}
@keyframes amtin {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
}
html body .sheet-wrap[data-kind='note'].open textarea {
  animation: noteIn 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 0.15s backwards;
}
@keyframes noteIn {
  from {
    transform: rotate(-4deg) translateY(30px) scale(0.92);
    opacity: 0;
  }
}
html body .sheet-wrap[data-kind] .scrim {
  transition: opacity 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  html body .sheet-wrap[data-kind] .sheet,
  html body .sheet-wrap[data-kind] .sheet > *,
  html body .sheet-wrap[data-kind] .shi,
  html body .sheet-wrap[data-kind] .amount-in,
  html body .sheet-wrap[data-kind] textarea {
    animation: none !important;
    transition: none !important;
  }
}
html body .sheet-wrap[data-kind] .chkrow > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- page load ----------
   When a page opens, its cards rise a few pixels and fade in, one after another (the first six, about half a second in all).
   When fresh data replaces a saved copy that is already showing, nothing replays, so pages never flicker. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
html body .fade > * {
  animation-duration: 0.38s;
}
html body .fade > *:nth-child(1) {
  animation-delay: 0ms;
}
html body .fade > *:nth-child(2) {
  animation-delay: 40ms;
}
html body .fade > *:nth-child(3) {
  animation-delay: 80ms;
}
html body .fade > *:nth-child(4) {
  animation-delay: 120ms;
}
html body .fade > *:nth-child(5) {
  animation-delay: 160ms;
}
html body .fade > *:nth-child(n + 6) {
  animation-delay: 200ms;
}

/* ---------- new loan and new trip ---------- */
html body .sheet-wrap[data-kind] .seg {
  display: flex;
  padding: 4px;
  margin: 0 0 12px;
  border-radius: 16px;
  background: var(--fill);
}
html body .sheet-wrap[data-kind] .seg label {
  flex: 1;
  cursor: pointer;
}
html body .sheet-wrap[data-kind] .seg input {
  display: none;
}
html body .sheet-wrap[data-kind] .seg span {
  display: block;
  padding: 10px 8px;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 650;
  color: var(--mute);
  transition:
    background-color 0.25s,
    color 0.25s,
    box-shadow 0.25s;
}
html body .sheet-wrap[data-kind] .seg input:checked + span {
  background: var(--card);
  color: var(--k);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25);
}
html body .sheet-wrap[data-kind] .fsec {
  margin: 16px 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute);
}
html body .sheet-wrap[data-kind] .fsec::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 2px;
  margin-left: 10px;
  vertical-align: middle;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--k), transparent);
}
.hintbar {
  margin: -2px 0 12px;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--k);
  background: color-mix(in srgb, var(--k) 11%, transparent);
  animation: hintin 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hintbar:empty {
  display: none;
}
@keyframes hintin {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
html body .sheet-wrap[data-kind] .bigname {
  width: 100%;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: var(--fill);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
html body .sheet-wrap[data-kind] .bigname:focus {
  outline: 0;
  border-color: var(--k);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 12%, transparent);
}
html body .sheet-wrap[data-kind] .tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
html body .sheet-wrap[data-kind] .tiles label {
  cursor: pointer;
}
html body .sheet-wrap[data-kind] .tiles label:last-child:nth-child(odd) {
  grid-column: span 2;
}
html body .sheet-wrap[data-kind] .tiles input {
  display: none;
}
html body .sheet-wrap[data-kind] .tiles span {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 12px;
  height: 100%;
  border-radius: 18px;
  background: var(--fill);
  border: 1.5px solid transparent;
  transition:
    transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1),
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
html body .sheet-wrap[data-kind] .tiles b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: var(--k);
  background: color-mix(in srgb, var(--k) 14%, transparent);
  transition:
    background-color 0.2s,
    color 0.2s;
}
html body .sheet-wrap[data-kind] .tiles strong {
  font-size: 14.5px;
  font-weight: 700;
  align-self: end;
}
html body .sheet-wrap[data-kind] .tiles small {
  font-size: 11.5px;
  color: var(--mute);
  align-self: start;
}
html body .sheet-wrap[data-kind] .tiles input:checked + span {
  transform: scale(1.03);
  border-color: var(--k);
  background: color-mix(in srgb, var(--k) 9%, var(--card));
  box-shadow: 0 4px 10px -8px var(--k);
}
html body .sheet-wrap[data-kind] .tiles input:checked + span b {
  color: #fff;
  background: var(--k);
}
/* the options pop in one after another when the form opens */
html body .sheet-wrap[data-kind].open .tiles label {
  animation: sfld 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(0.12s + var(--i, 0) * 50ms);
}
@media (prefers-reduced-motion: reduce) {
  .hintbar,
  html body .sheet-wrap[data-kind] .tiles label {
    animation: none !important;
  }
}
html body .sheet-wrap[data-kind] .cats input:checked + span {
  border-color: var(--c, var(--k));
  background: color-mix(in srgb, var(--c, var(--k)) 13%, transparent);
  color: var(--ink);
}

html body .sec-h h2 {
  margin: 18px 4px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute);
}
html body .sec-h h2 span {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}
html body .duerail {
  display: flex;
  gap: 10px;
  margin: 0 -16px 12px;
  padding: 2px 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding: 0 16px;
  scrollbar-width: none;
}
html body .duerail::-webkit-scrollbar {
  display: none;
}
html body .due {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  align-items: center;
  width: 168px;
  padding: 12px;
  border-radius: 18px;
  background: var(--card);
  box-shadow:
    0 1px 0 var(--line),
    0 8px 18px -14px rgba(16, 16, 20, 0.35);
  scroll-snap-align: start;
}
html body .due .t {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body .due .amt {
  grid-column: 1 / -1;
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
html body .due .pill {
  grid-column: 1 / -1;
  justify-self: start;
}
/* the tips that arrive last fade in where they sit, at the bottom */
html body .card.late {
  animation: lateIn 0.4s ease backwards;
}
@keyframes lateIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .card.late {
    animation: none;
  }
}

/* quick doors to Day to day and Wealth, right under the summary */
html body .shorts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
html body .short {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 0;
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  box-shadow:
    0 1px 0 var(--line),
    0 8px 18px -14px rgba(16, 16, 20, 0.35);
}
html body .short .ic {
  grid-row: 1 / 3;
}
html body .short .st {
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .short small {
  font-size: 11.5px;
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .short small.warn {
  color: #f59e0b;
  font-weight: 600;
}
html body .short:active {
  transform: scale(0.97);
}
html body .shorts .short:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* ---------- money page, second take: tinted tiles ----------
   Each door is a tile tinted with its own colour: icon on top, name, then a live line. They pop in one after another once
   when the page opens (never when fresh data swaps in). */
html body .sec-h h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
html body .sec-h h2 i {
  width: 6px;
  height: 14px;
  border-radius: 3px;
  background: var(--sec, #f97316);
}
html body .short {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 104px;
  padding: 14px;
  border-radius: 22px;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 7%, transparent), transparent 55%), var(--card);
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 10px 22px -18px rgba(16, 16, 20, 0.3);
  overflow: hidden;
}
html body .short .ic {
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--c) 11%, transparent) !important;
}
html body .short::after {
  content: '›';
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--mute);
}
html body .short .st {
  max-width: 100%;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
html body .short small {
  max-width: 100%;
  font-size: 12px;
}
html body .short:active {
  transform: scale(0.96);
}
@keyframes tilePop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}
html body #view.fade .short {
  animation: tilePop 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
html body #view.fade .shorts .short:nth-child(1) {
  animation-delay: 0.2s;
}
html body #view.fade .shorts .short:nth-child(2) {
  animation-delay: 0.26s;
}
html body #view.fade .shorts .short:nth-child(3) {
  animation-delay: 0.32s;
}
html body #view.fade .shorts .short:nth-child(4) {
  animation-delay: 0.38s;
}
html body #view.fade .shorts .short:nth-child(5) {
  animation-delay: 0.44s;
}
@media (prefers-reduced-motion: reduce) {
  html body #view.fade .short {
    animation: none;
  }
}

/* the empty Income stat in the dark card asks for the salary */
html body .stats3 .addsal {
  display: block;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  text-align: left;
}
html body .stats3 .addsal b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(251, 146, 60, 0.2);
  color: #fdba74;
  font-size: 12.5px;
  font-weight: 700;
}
html body .stats3 > .addsal:active {
  transform: scale(0.96);
}
html body .stats3 .addsal.has b {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}
html body .stats3 .addsal u {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 50%;
  background: rgba(251, 146, 60, 0.22);
  color: #fdba74;
  text-decoration: none;
}

/* what is left this month, inside the dark card */
html body .leftrow {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
}
html body .leftrow small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
html body .leftrow b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #34d399;
}
html body .leftrow.bad b {
  color: #fb7185;
}
html body .leftrow .bar {
  margin: 0;
}
html body .leftrow .hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  text-align: right;
}
html body .leftrow + .stats3 {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}
html body .hero2.masked .leftrow .bar {
  opacity: 0.4;
}
html body .leftrow .m {
  display: none;
  letter-spacing: 0.12em;
}
html body .hero2.masked .leftrow .m {
  display: inline;
}
html body .hero2.masked .leftrow .v {
  display: none;
}
html body .leftrow {
  display: block;
}
html body .leftrow .lt {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
html body .leftrow .lt .hint {
  padding-bottom: 3px;
}
html body .leftrow .bar {
  margin: 10px 0 0;
}

/* breathing room around the tile groups */
html body .shorts {
  margin-bottom: 14px;
}
html body .shorts + .sec-h h2 {
  margin-top: 8px;
}

/* month arrows on the dark card */
html body .hero2 .lbl.mnav {
  display: flex;
  align-items: center;
  gap: 4px;
}
html body .hero2 .mn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
html body .hero2 .mn:active {
  transform: scale(0.9);
}
html body .hero2 .mn:disabled {
  opacity: 0.25;
}

/* the single + : tapping it fans out Expense, Income, Bill and Note */
html body .fab.open {
  transform: rotate(45deg);
  z-index: 62;
}
html body .qm {
  position: fixed;
  inset: 0;
  z-index: 60;
}
html body .qm-bg {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 14, 0.38);
  animation: qmfade 0.2s ease;
}
html body .qm-list {
  position: absolute;
  right: calc(max(18px, calc(50% - 262px)) + 28px);
  bottom: calc(104px + env(safe-area-inset-bottom));
  width: 0;
  height: 0;
}
html body .qm-i {
  position: absolute;
  left: -32px;
  top: -32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--c);
  font: inherit;
  box-shadow:
    0 10px 22px -8px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);
  transform: translate(var(--x), var(--y));
  animation: qmarc 0.46s cubic-bezier(0.2, 1.1, 0.3, 1.15) backwards;
  animation-delay: calc(var(--n) * 55ms);
}
html body .qm-i span {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
html body .qm-i:active {
  transform: translate(var(--x), var(--y)) scale(0.93);
}
@keyframes qmarc {
  from {
    opacity: 0;
    transform: translate(0, 0) scale(0.3) rotate(-90deg);
  }
}
@keyframes qmfade {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .qm-i,
  html body .qm-bg {
    animation: none;
  }
}

/* the sideways glide must never add a horizontal scrollbar */
html body {
  overflow-x: clip;
}

/* ---------- delight: confetti, coin, pull to refresh, mood, story, jars ---------- */
html body .confetti {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
html body .coin {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 60%, #b45309);
  box-shadow: 0 4px 10px rgba(180, 83, 9, 0.5);
  color: #78350f;
  font-size: 15px;
  font-weight: 800;
  pointer-events: none;
}
html body .fab.bump {
  animation: fabbump 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes fabbump {
  40% {
    transform: scale(1.2);
  }
}
/* the browser's own pull-down spinner would show next to the coin; it only listens to the root element */
html,
html body {
  overscroll-behavior-y: contain;
}

/* how the month is going, in a line */
html body .mood {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  font-weight: 600;
  background: color-mix(in srgb, var(--m) 11%, var(--card));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m) 22%, var(--line));
}
html body .mood svg {
  color: var(--m);
  flex: none;
}
html body .mood.ok {
  --m: #10b981;
}
html body .mood.warn {
  --m: #f59e0b;
}
html body .mood.bad {
  --m: #f43f5e;
}

/* the Money card reflects the budget: a soft glow, and a slow wave that rises as the budget is used */
html body #view[data-sec] .card.hero2[data-mood] {
  --mc: #10b981;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mc) 35%, transparent),
    0 18px 40px -20px color-mix(in srgb, var(--mc) 70%, transparent);
}
html body #view[data-sec] .card.hero2[data-mood='warn'] {
  --mc: #f59e0b;
}
html body #view[data-sec] .card.hero2[data-mood='bad'] {
  --mc: #f43f5e;
}
html body .hero2 > :not(i.wave) {
  position: relative;
  z-index: 1;
}
html body #view[data-sec] .card.hero2 > i.wave {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(8% + var(--f, 0%) * 0.14);
  overflow: visible;
  border-radius: 0 0 22px 22px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--mc) 26%, transparent), transparent);
}
html body .hero2 .wave::before {
  content: '';
  position: absolute;
  left: 0;
  top: -7px;
  width: calc(100% + 60px);
  height: 8px;
  background: color-mix(in srgb, var(--mc) 26%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8V4Q15 0 30 4T60 4V8z'/%3E%3C/svg%3E")
    repeat-x 0 0 / 60px 8px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8V4Q15 0 30 4T60 4V8z'/%3E%3C/svg%3E")
    repeat-x 0 0 / 60px 8px;
  animation: wavemove 4s linear 8;
}
@keyframes wavemove {
  to {
    transform: translateX(-60px);
  }
}

/* month in review button */
html body .storybtn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 8px 18px -14px rgba(16, 16, 20, 0.3);
}
html body .storybtn > span:nth-child(2) {
  flex: 1;
}
html body .storybtn b {
  display: block;
  font-size: 14.5px;
}
html body .storybtn small {
  color: var(--mute);
  font-size: 12px;
}
html body .storybtn .sbi {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: #fff;
  background: conic-gradient(from 200deg, #f97316, #f43f5e, #a855f7, #f97316);
}
html body .storybtn:active {
  transform: scale(0.98);
}

/* the story */
html body .story {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 28px;
  color: #fff;
  animation: storyin 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
  transition:
    background 0.5s,
    opacity 0.22s;
}
html body .story.out {
  opacity: 0;
}
@keyframes storyin {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
}
html body .story .sp {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  left: 16px;
  right: 56px;
  display: flex;
  gap: 5px;
}
html body .story .sp b {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
html body .story .sp i {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
}
html body .story .sp b.done i {
  width: 100%;
}
html body .story .sp b.now i {
  animation: sfill 4.8s linear forwards;
}
@keyframes sfill {
  to {
    width: 100%;
  }
}
html body .story .sx {
  position: absolute;
  top: calc(6px + env(safe-area-inset-top));
  right: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: #fff;
}
html body .story .sl small {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
html body .story .sbig {
  margin: 10px 0 4px;
  font-size: clamp(44px, 15vw, 72px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
html body .story .sline {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  opacity: 0.92;
}
html body .story .ssub {
  margin: 18px 0 0;
  font-size: 15px;
  opacity: 0.7;
}
html body .story .sl.in > * {
  animation: srise 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}
html body .story .sl.in > :nth-child(2) {
  animation-delay: 0.08s;
}
html body .story .sl.in > :nth-child(3) {
  animation-delay: 0.18s;
}
@keyframes srise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}
html body .story .sbars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 240px;
  margin-top: 24px;
}
html body .story .sbars > div {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  text-align: center;
}
html body .story .sbars i {
  display: block;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.28);
  transform-origin: bottom;
  animation: sgrow 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}
html body .story .sbars .cur i {
  background: #f97316;
}
html body .story .sbars small {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
@keyframes sgrow {
  from {
    transform: scaleY(0);
  }
}
html body .story .sshare {
  position: absolute;
  bottom: calc(28px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font: inherit;
  font-weight: 700;
  transform: translateX(-50%);
}
html body .story .stap {
  position: absolute;
  top: 60px;
  bottom: 90px;
  width: 38%;
  z-index: 2;
}
html body .story .stap.l {
  left: 0;
}
html body .story .stap.r {
  right: 0;
}

/* goal jars */
html body .jar {
  flex: none;
  width: 44px;
  height: 60px;
}
html body .jar .jl {
  transform: translateY(var(--y));
  animation: jfill 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
html body .jar .jw {
  animation: jwave 3.2s linear 4;
}
@keyframes jfill {
  from {
    transform: translateY(66px);
  }
}
@keyframes jwave {
  to {
    transform: translateX(48px);
  }
}
html body #view.stale .jar .jl,
html body #view.still .jar .jl {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  html body .jar .jl,
  html body .jar .jw,
  html body .hero2 .wave::before,
  html body .story,
  html body .story .sl.in > *,
  html body .story .sbars i,
  html body .fab.bump {
    animation: none;
  }
}

/* ---------- notification pill, second take ----------
   A dark pill that springs down from the top. Its icon sits in a ring that counts down the time left.
   Success: the tick draws itself and a few sparks fly out. Error: the pill shakes. Info: the icon bounces. */
html body .tbox {
  width: fit-content;
  max-width: min(92vw, 440px);
  gap: 11px;
  padding: 7px 18px 7px 7px;
  border: 0;
  border-radius: 999px;
  background: #17171d;
  color: #fff;
  box-shadow:
    0 16px 34px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  overflow: visible;
}
html[data-mode='dark'] .tbox,
html:not([data-mode='light']) .tbox {
  background: #26262f;
}
html body .tbox:has(.tact) {
  padding-right: 8px;
}
html body #toast.show .tbox {
  animation: tpop 0.55s cubic-bezier(0.2, 1.3, 0.3, 1) forwards;
}
html body #toast.out .tbox {
  animation: tgo 0.24s ease-in forwards;
}
html body #toast.show .tbox.err {
  animation:
    tpop 0.55s cubic-bezier(0.2, 1.3, 0.3, 1) forwards,
    tshake 0.5s 0.3s ease-in-out;
}
@keyframes tpop {
  from {
    transform: translateY(-90px) scale(0.55, 0.8);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes tgo {
  to {
    transform: translateY(-40px) scale(0.8);
    opacity: 0;
  }
}
@keyframes tshake {
  20%,
  60% {
    transform: translateX(-7px);
  }
  40%,
  80% {
    transform: translateX(7px);
  }
}
html body .tbox .tic {
  position: relative;
  width: 36px;
  height: 36px;
  background: none;
}
html body .tbox .tring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
html body .tbox .tring circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: tring linear forwards;
}
html body .tbox.ok .tring circle {
  stroke: #34d399;
}
html body .tbox.err .tring circle {
  stroke: #fb7185;
}
html body .tbox.info .tring circle {
  stroke: #60a5fa;
}
@keyframes tring {
  to {
    stroke-dashoffset: 100;
  }
}
html body .tbox .tic > svg:not(.tring) {
  position: relative;
}
html body .tbox.ok .tic {
  color: #34d399;
}
html body .tbox.err .tic {
  color: #fb7185;
}
html body .tbox.info .tic {
  color: #60a5fa;
  animation: tbounce 0.6s 0.2s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes tbounce {
  40% {
    transform: translateY(-5px);
  }
}
html body .tbox .sp {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: #34d399;
  opacity: 0;
  animation: tspark 0.7s 0.2s ease-out;
}
html body .tbox .sp:nth-child(odd) {
  background: #fbbf24;
}
@keyframes tspark {
  from {
    opacity: 1;
    transform: rotate(var(--a)) translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: rotate(var(--a)) translateY(-26px) scale(0.3);
  }
}
html body .tbox .tmsg {
  font-size: 14.5px;
  font-weight: 600;
  animation: tfade 0.3s 0.1s backwards;
}
@keyframes tfade {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}
html body .tbox .tact {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
html body .tbox.held .tring circle {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  html body #toast.show .tbox,
  html body #toast.show .tbox.err,
  html body .tbox .sp,
  html body .tbox .tmsg,
  html body .tbox.info .tic {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html body .tbox .sp {
    display: none;
  }
}
html body .tbox.ok .tic,
html body .tbox.err .tic,
html body .tbox.info .tic {
  background: none;
}

/* ---------- more delight ---------- */

/* the live budget line in the add-expense form */
html body .bprev {
  max-height: 0;
  margin: 0 0 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 0.25s,
    margin 0.3s;
}
html body .bprev.show {
  max-height: 120px;
  margin: 0 0 14px;
  opacity: 1;
}
html body .bprev .bp-t {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--mute);
}
html body .bprev .bp-t b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
html body .bprev.bad .bp-t b {
  color: #f43f5e;
}
html body .bprev .bp-bar {
  height: 6px;
  margin-top: 7px;
  border-radius: 6px;
  background: var(--fill);
  overflow: hidden;
}
html body .bprev .bp-bar i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: #10b981;
  transition:
    width 0.3s cubic-bezier(0.2, 0.9, 0.3, 1),
    background 0.2s;
}
html body .bprev.warn .bp-bar i {
  background: #f59e0b;
}
html body .bprev.bad .bp-bar i {
  background: #f43f5e;
}
html body .bprev .bp-c {
  margin-top: 6px;
  font-size: 12px;
  color: var(--mute);
}
html body .cats span.popc {
  animation: popc 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes popc {
  40% {
    transform: scale(1.12);
  }
}

/* envelopes */
html body .env {
  flex: none;
  width: 42px;
  height: 34px;
}
html body .env .ef {
  transform: translateY(0);
  animation: envfill 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
@keyframes envfill {
  from {
    transform: translateY(26px);
  }
}
html body .env.over {
  animation: envbulge 0.7s 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes envbulge {
  40% {
    transform: scale(1.14) rotate(-3deg);
  }
}
html body #view.stale .env .ef,
html body #view.still .env .ef,
html body #view.stale .env.over,
html body #view.still .env.over {
  animation: none;
}

/* countdown ring round a bill's icon */
html body .duer {
  flex: none;
  display: inline-grid;
  place-items: center;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), color-mix(in srgb, var(--c) 14%, transparent) 0);
}
html body .duer .ic {
  border-radius: 50%;
  background-color: var(--card) !important;
}

/* streak */
html body .streak {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 11px 12px 11px 14px;
  border-radius: 18px;
  background: var(--card);
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 8px 18px -14px rgba(16, 16, 20, 0.3);
}
html body .streak .flame {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: var(--mute);
  background: var(--fill);
}
html body .streak .flame.lit {
  color: #fff;
  background: linear-gradient(160deg, #fbbf24, #f97316 60%, #ef4444);
}
html body .streak .flame.lit svg {
  fill: rgba(255, 255, 255, 0.35);
  transform-origin: 50% 90%;
  animation: flick 1.6s ease-in-out 3;
}
@keyframes flick {
  30% {
    transform: scale(1.12, 1.18) rotate(-4deg);
  }
  60% {
    transform: scale(0.96, 1.04) rotate(3deg);
  }
}
html body .streak .sk-t {
  flex: 1;
  min-width: 0;
}
html body .streak .sk-t b {
  display: block;
  font-size: 14.5px;
}
html body .streak .sk-t small {
  color: var(--mute);
  font-size: 12px;
}
html body .streak .sk-b {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 7px 10px 7px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}
html body .badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
html body .badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 14px;
  border-radius: 18px;
  background: var(--fill);
  color: var(--mute);
}
html body .badge span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--mute) 16%, transparent);
}
html body .badge b {
  color: var(--ink);
  font-size: 14px;
}
html body .badge small {
  font-size: 11.5px;
}
html body .badge.on {
  background: color-mix(in srgb, #f59e0b 12%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f59e0b 30%, transparent);
}
html body .badge.on span {
  color: #fff;
  background: linear-gradient(160deg, #fbbf24, #f97316);
}

/* time of day: a faint tint washes the top of the screen */
html body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: 260px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--tod, transparent), transparent);
  transition: background 1.5s;
}
html[data-tod='morning'] {
  --tod: rgba(251, 191, 36, 0.14);
}
html[data-tod='day'] {
  --tod: rgba(56, 189, 248, 0.1);
}
html[data-tod='evening'] {
  --tod: rgba(251, 113, 133, 0.13);
}
html[data-tod='night'] {
  --tod: rgba(99, 102, 241, 0.16);
}

/* light and dark spread out from the button (only while the theme is switching) */
html[data-vt='theme']::view-transition-old(root),
html[data-vt='theme']::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html[data-vt='theme']::view-transition-new(root) {
  animation: vtreveal 0.65s cubic-bezier(0.3, 0.8, 0.3, 1);
}
@keyframes vtreveal {
  from {
    clip-path: circle(0 at var(--rx, 50%) var(--ry, 50%));
  }
  to {
    clip-path: circle(150vmax at var(--rx, 50%) var(--ry, 50%));
  }
}

/* a little scene for empty pages */
html body .eart {
  position: relative;
  display: grid;
  place-items: center;
  width: 130px;
  height: 100px;
  margin: 0 auto 6px;
}
html body .eart::before {
  content: '';
  position: absolute;
  inset: 8px 14px;
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  background: color-mix(in srgb, var(--a1) 10%, transparent);
  animation: blob 7s ease-in-out infinite alternate;
}
html body .eart .ic {
  position: relative;
  animation: bob 3.4s ease-in-out infinite;
}
html body .eart i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--a1);
  opacity: 0.5;
  animation: floaty 4s ease-in-out infinite;
}
html body .eart i:nth-child(1) {
  top: 10px;
  left: 18px;
}
html body .eart i:nth-child(2) {
  top: 28px;
  right: 14px;
  width: 6px;
  height: 6px;
  animation-delay: -1.3s;
}
html body .eart i:nth-child(3) {
  bottom: 8px;
  left: 30px;
  width: 5px;
  height: 5px;
  animation-delay: -2.4s;
}
@keyframes bob {
  50% {
    transform: translateY(-7px) rotate(-3deg);
  }
}
@keyframes floaty {
  50% {
    transform: translateY(-9px);
    opacity: 0.2;
  }
}
@keyframes blob {
  to {
    border-radius: 54% 46% 46% 54% / 46% 54% 46% 54%;
    transform: rotate(8deg) scale(1.05);
  }
}

/* tap a slice, drag along the bars */
html body .donut .seg {
  cursor: pointer;
  transition:
    opacity 0.2s,
    stroke-width 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
}
html body .donut .seg.sel {
  stroke-width: 17;
}
html body .donut .seg.dim {
  opacity: 0.3;
}
html body .donut .legend [data-i] {
  cursor: pointer;
  transition: opacity 0.2s;
}
html body .donut .legend [data-i].sel b,
html body .donut .legend [data-i].sel span {
  color: var(--a1);
  font-weight: 800;
}
html body .trend {
  position: relative;
  touch-action: pan-y;
}
html body .trend > div.scrub i {
  filter: brightness(0.9) saturate(1.3);
}
html body .trend .ttip {
  position: absolute;
  top: -14px;
  flex: none;
  display: block;
  height: auto;
  width: auto;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  transform: translate(-50%, -100%);
  pointer-events: none;
  white-space: nowrap;
  animation: ttin 0.18s ease-out;
}
html body .trend .ttip small {
  display: block;
  font-size: 10.5px;
  opacity: 0.7;
}
html body .trend .ttip b {
  font-size: 13.5px;
}
@keyframes ttin {
  from {
    opacity: 0;
    transform: translate(-50%, -80%);
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .eart::before,
  html body .eart .ic,
  html body .eart i,
  html body .env .ef,
  html body .env.over,
  html body .streak .flame.lit svg,
  html body .cats span.popc,
  html body .trend .ttip {
    animation: none;
  }
  ::view-transition-new(root) {
    animation: none;
  }
}
html body .duer {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
}
html body .duer .ic {
  position: relative;
  flex: none;
}

/* ---------- safe to spend, spend calendar, what-if, nudges, mountain, challenge, voice, receipt, swipe to pay ---------- */

/* safe to spend today */
html body .safe {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--card);
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 10px 22px -16px rgba(16, 16, 20, 0.35);
}
html body .safe .sgauge {
  flex: none;
  width: 86px;
  height: 50px;
}
html body .safe .sgauge path {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}
html body .safe .sg-bg {
  stroke: var(--fill);
}
html body .safe .sg-fg {
  stroke: #10b981;
  animation: sgdraw 1s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
html body .safe.warn .sg-fg {
  stroke: #f59e0b;
}
html body .safe.bad .sg-fg {
  stroke: #f43f5e;
}
@keyframes sgdraw {
  from {
    stroke-dasharray: 0 100;
  }
}
html body #view.stale .safe .sg-fg,
html body #view.still .safe .sg-fg {
  animation: none;
}
html body .safe .sf-t small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
html body .safe .sf-t b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
html body .safe.bad .sf-t b {
  color: #f43f5e;
}
html body .safe .sf-t span {
  font-size: 12.5px;
  color: var(--mute);
}

/* spend calendar */
html body .scal-g {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 12px;
}
html body .scal .cd-h {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--mute);
}
html body .cd {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--mute);
  background: var(--fill);
}
html body .cd.l1 {
  background: color-mix(in srgb, var(--a1) 22%, var(--fill));
  color: var(--ink);
}
html body .cd.l2 {
  background: color-mix(in srgb, var(--a1) 45%, var(--fill));
  color: var(--ink);
}
html body .cd.l3 {
  background: color-mix(in srgb, var(--a1) 72%, var(--fill));
  color: #fff;
}
html body .cd.l4 {
  background: var(--a1);
  color: #fff;
}
html body .cd.fut {
  opacity: 0.45;
}
html body .cd.now {
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--ink);
}
html body .cd[data-day]:active {
  transform: scale(0.9);
}
html body .scal-k {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--mute);
}
html body .scal-k .cd {
  width: 14px;
  aspect-ratio: auto;
  height: 14px;
  border-radius: 4px;
}
@keyframes calpop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
html body #view.fade .scal .cd[data-day] {
  animation: calpop 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
  animation-delay: calc(0.3s + var(--i, 0) * 10ms);
}

/* what if */
html body .wi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
html body .wi-c {
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
html body .wi-c.on {
  background: color-mix(in srgb, var(--c) 18%, var(--card));
  box-shadow: inset 0 0 0 1.5px var(--c);
}
html body .wi-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
html body .wi-jar .jar {
  width: 58px;
  height: 78px;
}
html body .wi-jar .jar .jl {
  animation: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html body .wi-r {
  flex: 1;
  min-width: 0;
}
html body .wi-r p {
  margin: 0 0 8px;
  font-size: 14px;
}
html body .wi-s {
  width: 100%;
  accent-color: var(--a1);
}
html body .wi-out small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
}
html body .wi-out b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #10b981;
  font-variant-numeric: tabular-nums;
}
html body .wi-out span {
  font-size: 12px;
  color: var(--mute);
}

/* the tips as a conversation */
html body .nudge {
  margin: 14px 0;
}
html body .nd-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 8px;
  font-size: 13px;
}
html body .nd-av {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--a1), var(--a2));
}
html body .nd-typing {
  position: absolute;
  display: inline-flex;
  gap: 4px;
  padding: 10px 13px;
  border-radius: 16px 16px 16px 4px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  animation: typingout 0.1s 0.75s forwards;
}
html body .nd-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mute);
  animation: typedot 0.6s infinite alternate;
}
html body .nd-typing i:nth-child(2) {
  animation-delay: 0.15s;
}
html body .nd-typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes typedot {
  to {
    transform: translateY(-4px);
    opacity: 0.4;
  }
}
@keyframes typingout {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
html body .bubble {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: fit-content;
  max-width: 92%;
  margin: 0 0 7px;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--card);
  box-shadow:
    inset 3px 0 0 var(--t),
    inset 0 0 0 1px var(--line);
  font-size: 13.5px;
  line-height: 1.4;
  animation: bubblein 0.45s var(--d, 0.7s) cubic-bezier(0.2, 1.2, 0.3, 1) backwards;
}
html body .bubble svg {
  flex: none;
  margin-top: 2px;
  color: var(--t);
}
html body .bubble b {
  flex: none;
  font-variant-numeric: tabular-nums;
}
@keyframes bubblein {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.92);
    transform-origin: left bottom;
  }
}
html body .nd-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0 4px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
}
html body #view.stale .bubble,
html body #view.still .bubble {
  animation: none;
}
html body #view.stale .nd-typing,
html body #view.still .nd-typing {
  display: none;
}

/* net worth mountain */
html body .mtn {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  overflow: visible;
}
html body .mtn .mt-l {
  fill: none;
  stroke: var(--a1);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: mtdraw 1.2s cubic-bezier(0.3, 0.7, 0.3, 1) backwards;
}
@keyframes mtdraw {
  from {
    stroke-dashoffset: 100;
  }
}
html body .mtn .mt-a {
  animation: mtfade 1.2s backwards;
}
@keyframes mtfade {
  from {
    opacity: 0;
  }
}
html body .mtn .mt-dot {
  fill: var(--a1);
  stroke: var(--card);
  stroke-width: 2;
}
html body .mtn .mt-pulse {
  fill: var(--a1);
  transform-box: fill-box;
  transform-origin: center;
  animation: mtpulse 2s ease-out 4;
}
@keyframes mtpulse {
  from {
    opacity: 0.5;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(4);
  }
}
html body .mtn .mt-f path {
  stroke: var(--mute);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}
html body .mtn .mt-f text {
  fill: var(--ink);
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
}
html body .mtn .mt-m {
  fill: var(--mute);
  font-size: 9px;
  font-weight: 600;
}
html body #view.stale .mtn *,
html body #view.still .mtn * {
  animation: none;
}

/* family challenge */
html body .chal .ch-p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html body .ch-s {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
html body .ch-s:active {
  transform: scale(0.95);
}
html body .ch-t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 12px;
  font-size: 17px;
}
html body .ch-f {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--mute);
  font-size: 12.5px;
  font-weight: 700;
}
html body .ch-f.lit {
  color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f97316);
}
html body .ch-m {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
html body .ch-a {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  opacity: 0.55;
}
html body .ch-a small {
  font-size: 11px;
  color: var(--mute);
}
html body .ch-a i {
  position: absolute;
  top: 24px;
  right: -2px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  transform: scale(0);
}
html body .ch-a.on {
  opacity: 1;
}
html body .ch-a.on i {
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.3, 1.8, 0.5, 1);
}
html body .ch-w {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
html body .ch-w i {
  flex: 1;
  height: 8px;
  border-radius: 8px;
  background: var(--fill);
}
html body .ch-w i.some {
  background: color-mix(in srgb, #10b981 40%, var(--fill));
}
html body .ch-w i.all {
  background: #10b981;
}

/* voice */
html body #mic.on {
  color: #fff;
  background: #f43f5e;
  border-radius: 50%;
  animation: micpulse 1s ease-in-out infinite;
}
@keyframes micpulse {
  50% {
    box-shadow: 0 0 0 8px rgba(244, 63, 94, 0.2);
  }
}

/* an expense as a paper receipt */
html body .paper {
  position: relative;
  margin: 4px 6px 18px;
  padding: 20px 20px 26px;
  background: #fffdf7;
  color: #2a2724;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.45);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  animation: paperin 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
  transform-origin: top;
}
@keyframes paperin {
  from {
    transform: translateY(-14px) scaleY(0.6);
    opacity: 0;
  }
}
html body .paper .pp-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
}
html body .paper .pp-h small {
  opacity: 0.55;
}
html body .paper .pp-d {
  margin: 12px 0;
  border-top: 2px dashed rgba(42, 39, 36, 0.35);
}
html body .paper .pp-r {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
html body .paper .pp-r span:first-child {
  opacity: 0.6;
}
html body .paper .pp-t {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
}
html body .paper .pp-t b {
  font-size: 22px;
}
html body .paper .pp-bar {
  height: 34px;
  margin: 16px 0 6px;
  background: repeating-linear-gradient(
    90deg,
    #2a2724 0 2px,
    transparent 2px 4px,
    #2a2724 4px 5px,
    transparent 5px 8px,
    #2a2724 8px 11px,
    transparent 11px 13px
  );
  opacity: 0.8;
}
html body .paper .pp-photo img {
  display: block;
  width: 100%;
  margin-top: 10px;
  border-radius: 4px;
  filter: grayscale(0.3);
}
html body .paper .pp-f {
  margin: 8px 0 0;
  text-align: center;
  opacity: 0.55;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* swipe a bill right to pay it */
html body .swp .sw-pay {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  width: 100%;
  background: #10b981;
  color: #fff;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.15s;
}
html body .swp.pay-show .sw-pay {
  opacity: 1;
}
html body .swp .sw-pay svg {
  width: 26px;
  height: 26px;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset 0.3s;
}
html body .swp.pay-ready .sw-pay svg,
html body .swp.pay-done .sw-pay svg {
  stroke-dashoffset: 0;
}
html body .swp.pay-ready .sw-pay {
  background: #059669;
}
@media (prefers-reduced-motion: reduce) {
  html body .safe .sg-fg,
  html body .bubble,
  html body .mtn *,
  html body .paper,
  html body #mic.on {
    animation: none;
  }
  html body .nd-typing {
    display: none;
  }
}
html body .wi-s {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
html body .scal .cd {
  aspect-ratio: 1.25;
}
html body .scal-g {
  gap: 5px;
}

/* quick add: room for the extra mic button */
html body .qa {
  gap: 4px;
  padding: 5px 5px 5px 14px;
}
html body .qa > svg {
  flex: none;
  margin-right: 4px;
}
html body .qa input {
  min-width: 0;
  padding-left: 0;
  text-overflow: ellipsis;
}
html body .qa .qa-t {
  display: inline-flex;
  flex: none;
  gap: 0;
}
html body .qa .icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
}
html body .qa .qa-add {
  flex: none;
  margin-left: 2px;
  padding: 9px 14px !important;
  border-radius: 14px;
}

/* the family challenge card keeps the same gap as the cards around it */
html body .card.chal {
  margin: 12px 0 14px;
}
html body .chal .ch-t {
  margin: 12px 0 14px;
}
html body .chal .ch-m {
  margin-bottom: 14px;
}
html body .chal .ch-w {
  margin-bottom: 14px;
}

/* the app's one pull-to-refresh: a gold coin */
html body #ptr {
  border: 0;
  background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 60%, #b45309);
  box-shadow: 0 6px 14px rgba(180, 83, 9, 0.45);
  color: #78350f;
  font-weight: 800;
  font-size: 18px;
}
html body #ptr span {
  display: inline-block;
}
html body #ptr.spin span {
  animation: coinspin 0.7s linear infinite;
}
@keyframes coinspin {
  to {
    transform: rotateY(360deg);
  }
}

/* people who ask for less motion get none of it: a safety net over every animation and transition in the app */
@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* the + while scrolling down */
html body .fab {
  transition:
    transform 0.28s cubic-bezier(0.3, 0.9, 0.3, 1),
    opacity 0.2s;
}
html body.fab-away .fab:not(.open) {
  transform: translateY(96px) scale(0.7);
  opacity: 0;
  pointer-events: none;
}

/* ---------- accounts, cards, categories, emergency fund, approvals, close the month, tax pack ---------- */

/* "+ New" at the end of the category picker, and the pickers in the new-category form */
html body .catnew {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 64px;
  padding: 10px 12px;
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  background: none;
  color: var(--mute);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
}
html body .cpick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
html body .cpick label {
  cursor: pointer;
}
html body .cpick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
html body .cpick span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--fill);
  color: var(--ink);
  transition: transform 0.15s;
}
html body .cpick input:checked + span {
  box-shadow: 0 0 0 2px var(--a1);
  transform: scale(1.06);
}
html body .cpick.cols span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

/* emergency fund */
html body .emg {
  margin: 12px 0 0;
  text-align: left;
}
html body .emg.empty-emg {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  color: var(--ink);
  font: inherit;
}
html body .emg.empty-emg b,
html body .emg-h b {
  display: block;
  font-size: 14.5px;
}
html body .emg small {
  display: block;
  color: var(--mute);
  font-size: 12px;
  margin-top: 2px;
}
html body .emg-i {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(160deg, #38bdf8, #6366f1);
}
html body .emg-h {
  display: flex;
  align-items: center;
  gap: 12px;
}
html body .emg-h > div {
  flex: 1;
  min-width: 0;
}
html body .emg-bar {
  position: relative;
  height: 12px;
  margin: 14px 0 8px;
  border-radius: 12px;
  background: var(--fill);
  overflow: hidden;
}
html body .emg-bar i {
  display: block;
  height: 100%;
  border-radius: 12px;
  background: #10b981;
  animation: emgfill 1s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  transform-origin: left;
}
html body .emg.warn .emg-bar i {
  background: #f59e0b;
}
html body .emg.bad .emg-bar i {
  background: #f43f5e;
}
html body .emg-bar u {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--card);
}
@keyframes emgfill {
  from {
    transform: scaleX(0);
  }
}
html body #view.stale .emg-bar i,
html body #view.still .emg-bar i {
  animation: none;
}
html body .emg-f {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--mute);
}
html body .emg-f span:first-child {
  color: var(--ink);
  font-weight: 700;
}
html body .efund {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 10px 0 0;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--mute);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
html body .efund.on {
  background: color-mix(in srgb, #6366f1 16%, var(--card));
  color: #6366f1;
}

/* approvals */
html body .apr {
  margin: 12px 0 0;
}
html body .apr-b {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
}
html body .apr-b.ok {
  background: #10b981;
}
html body .apr-b.no {
  background: #f43f5e;
}
html body .lim {
  margin: 0 0 12px;
}
html body .lim > b {
  display: block;
  margin-bottom: 4px;
}

/* accounts and cards */
html body .ac-go {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
html body .ac-go .btn {
  flex: 1;
}
html body .adh {
  text-align: center;
  margin: 4px 0 6px;
}
html body .adh small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 700;
}
html body .adh b {
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
html body .cardx {
  margin-bottom: 12px;
}
html body .cx-n {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
html body .cx-n b {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
html body .cx-n span {
  font-size: 12px;
  color: var(--mute);
}
html body .cx-d {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}
html body .cx-d > div {
  padding: 9px 10px;
  border-radius: 14px;
  background: var(--fill);
}
html body .cx-d small,
html body .cx-d span {
  display: block;
  font-size: 11px;
  color: var(--mute);
}
html body .cx-d b {
  display: block;
  margin: 2px 0;
  font-size: 13.5px;
}
html body .cx-d > div.warn {
  background: color-mix(in srgb, #f59e0b 16%, var(--card));
}
html body .cx-d > div.warn b {
  color: #d97706;
}

/* close the month */
html body .cl-step {
  margin: 12px 0 0;
}
html body .cl-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14.5px;
}
html body .cl-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fill);
  color: var(--mute);
  font-size: 12.5px;
  font-weight: 800;
}
html body .cl-step.fin .cl-n {
  background: #10b981;
  color: #fff;
}
html body .cl-sel {
  max-width: 130px;
  padding: 8px 10px;
}
html body .cl-b {
  font-size: 15px;
}
html body .tile.dim {
  opacity: 0.55;
}

/* the two buttons in the dark Accounts card */
html body .ac-go .btn {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: none;
}
html body .ac-go .btn svg {
  color: #fdba74;
}
html body .cats .catnew {
  flex-direction: row;
  gap: 6px;
  min-width: 0;
  padding: 11px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- credit cards, drawn as cards ---------- */
html body .c-midnight {
  --c1: #3b4252;
  --c2: #0f1320;
}
html body .c-ocean {
  --c1: #38bdf8;
  --c2: #1e40af;
}
html body .c-ember {
  --c1: #fb923c;
  --c2: #be123c;
}
html body .c-forest {
  --c1: #34d399;
  --c2: #065f46;
}
html body .c-royal {
  --c1: #a78bfa;
  --c2: #4c1d95;
}
html body .c-rose {
  --c1: #fb7185;
  --c2: #9f1239;
}
html body .c-gold {
  --c1: #fcd34d;
  --c2: #b45309;
}
html body .c-slate {
  --c1: #94a3b8;
  --c2: #1e293b;
}
html body .cpick .sw {
  background: linear-gradient(135deg, var(--c1), var(--c2));
}
html body .ccsum {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 4px 12px;
}
html body .ccsum small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
html body .ccsum b {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
html body .ccsum span {
  padding-bottom: 5px;
  font-size: 12.5px;
  color: var(--mute);
}
html body .ccrail {
  display: flex;
  gap: 14px;
  margin: 0 -16px;
  padding: 8px 7% 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 7%;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  perspective: 900px;
}
html body .ccrail::-webkit-scrollbar {
  display: none;
}
html body .ccslot {
  flex: none;
  width: 86%;
  scroll-snap-align: center;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 0.3s;
  transform: scale(0.92);
  opacity: 0.7;
}
html body .ccslot.on {
  transform: none;
  opacity: 1;
}
html body .cc {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1.586;
  padding: 18px 20px 16px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow:
    0 22px 36px -18px var(--c2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
html body .cc::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.35), transparent 55%),
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
  pointer-events: none;
}
html body .cc > * {
  position: relative;
}
html body .cc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
html body .cc-top b {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
html body .cc-nfc {
  flex: none;
  width: 26px;
  height: 26px;
  opacity: 0.85;
}
html body .cc-chip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2px;
  width: 44px;
  height: 34px;
  padding: 3px;
  border-radius: 7px;
  background: linear-gradient(135deg, #fde68a, #d6a431 60%, #f6d77a);
  box-shadow: inset 0 0 0 1px rgba(120, 80, 0, 0.35);
}
html body .cc-chip i {
  border-radius: 2px;
  background: rgba(120, 80, 0, 0.28);
}
html body .cc-chip i:nth-child(1) {
  grid-column: 1 / -1;
}
html body .cc-num {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: clamp(15px, 4.6vw, 20px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
html body .cc-bot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
html body .cc-bot small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
html body .cc-bot span {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
html body .cc-bot .r {
  text-align: right;
}
html body .cc-use {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 8px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
html body .cc-use i {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 3px;
}
html body .ccdots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: -8px;
}
html body .ccdots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition:
    width 0.25s,
    background 0.25s;
}
html body .ccdots i.on {
  width: 18px;
  border-radius: 6px;
  background: var(--a1);
}
html body .ccd {
  margin-top: 14px;
}
html body #ccdetail.swap .ccd {
  animation: ccswap 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes ccswap {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
html body .ccd .cx-n small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
html body .ccd .seeall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
@media (prefers-reduced-motion: reduce) {
  html body .ccslot,
  html body #ccdetail.swap .ccd {
    transition: none;
    animation: none;
  }
}
html body .ccrail {
  padding-bottom: 38px;
  margin-bottom: -26px;
}
html body .f .cpick {
  margin: 8px 0 16px;
}

/* the card colour picker sits in half a row */
html body .cpick.tight {
  gap: 5px;
  margin: 8px 0 0;
}
html body .cpick.tight span {
  width: 24px;
  height: 24px;
}
html body .f .cpick.tight {
  margin: 8px 0 0;
}
html body .cpick.tight {
  gap: 3px;
  flex-wrap: nowrap;
}
html body .cpick.tight span {
  width: 22px;
  height: 22px;
}

/* ---------- every form: saved tick, shake on error, room under the amount ---------- */
html body .sheet-wrap[data-kind] .amount-in {
  margin-bottom: 14px;
}
html body .sheet-wrap[data-kind] .sbtn.saved {
  background: #10b981;
  box-shadow: 0 10px 22px -10px rgba(16, 185, 129, 0.6);
  animation: savedpop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
  pointer-events: none;
}
html body .sheet-wrap[data-kind] .sbtn.saved svg {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: tdraw 0.35s 0.05s ease-out forwards;
}
@keyframes savedpop {
  40% {
    transform: scale(1.04);
  }
}
html body .sheet.shake {
  animation: sheetshake 0.45s ease-in-out;
}
@keyframes sheetshake {
  20%,
  60% {
    transform: translateX(-8px);
  }
  40%,
  80% {
    transform: translateX(8px);
  }
}

/* a tap made while the page was still loading: shown pressed until it is carried out */
html body #view .tapq {
  opacity: 0.55;
  transform: scale(0.98);
  transition:
    opacity 0.15s,
    transform 0.15s;
}

/* ---------- page changes (the motion itself is in js/core/transition.js) ----------
   The old page stays as a still picture (#pgghost, never tappable) while the live new page slides in or out; only transform and opacity move. */
#pgghost {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
  contain: strict;
}
#pgghost *,
#pgghost *::before,
#pgghost *::after {
  animation: none !important;
  transition: none !important;
}
#pgghost .pgdim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
}
#pgghost.pg-top,
html.pg-moving #view.pg-top {
  box-shadow: -14px 0 30px rgba(0, 0, 0, 0.16);
  will-change: transform;
}
html.pg-moving #view.pg-top,
html.pg-moving #view.pg-under {
  position: relative;
  min-height: 100dvh;
  background: var(--bg);
  will-change: transform;
}

/* screen-reader announcements and the focus target of a new page */
.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;
}
#view:focus {
  outline: none;
}

/* the picture layer of a running transition must never catch taps: they go straight to the live page underneath */
html::view-transition {
  pointer-events: none;
}

/* while a page slides, nothing may widen the document: on a phone, any horizontal overflow makes the browser widen its layout viewport,
   and the fixed bottom bar jumps out of view */
html.pg-moving {
  overflow-x: hidden;
}
html.pg-moving .wrap {
  overflow-x: clip;
}

/* ---------- personality, next 14 days, can I afford it, the quick tour ---------- */

/* spending personality */
html body .pers {
  margin: 12px 0;
}
html body .pers-h {
  display: flex;
  align-items: center;
  gap: 14px;
}
html body .pers-h > div {
  flex: 1;
  min-width: 0;
}
html body .pers-h small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
html body .pers-h b {
  display: block;
  margin: 2px 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}
html body .pers-h span {
  font-size: 13px;
  line-height: 1.4;
  color: var(--mute);
}
html body .mas {
  flex: none;
  width: 74px;
  height: 74px;
  overflow: visible;
}
html body .mas-sh {
  fill: rgba(0, 0, 0, 0.1);
}
html body .mas-b {
  transform-origin: 36px 64px;
  animation: masbob 2.6s ease-in-out 3;
}
html body .mas-e {
  transform-origin: 36px 36px;
  animation: masblink 4s ease-in-out 2;
}
@keyframes masbob {
  50% {
    transform: translateY(-4px) scale(1.03, 0.98);
  }
}
@keyframes masblink {
  94%,
  100% {
    transform: scaleY(1);
  }
  97% {
    transform: scaleY(0.1);
  }
}
html body .pers-w {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 74px;
  margin: 14px 0 8px;
}
html body .pers-w > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 5px;
}
html body .pers-w i {
  display: block;
  width: 100%;
  border-radius: 8px 8px 5px 5px;
  background: var(--fill);
  transform-origin: bottom;
  animation: sgrow 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}
html body .pers-w .peak i {
  background: linear-gradient(180deg, var(--a1), var(--a2));
}
html body .pers-w small {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mute);
}
html body .pers-f {
  margin: 0;
  font-size: 12.5px;
  color: var(--mute);
}
html body #view.stale .pers-w i,
html body #view.still .pers-w i {
  animation: none;
}

/* the next 14 days */
html body .nd {
  margin: 12px 0;
}
html body .nd-r {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 3px;
  margin: 12px -4px 0;
}
html body .nd-d {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 5px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
}
html body .nd-d small {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mute);
}
html body .nd-d b {
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html body .nd-d span {
  display: flex;
  gap: 2px;
  min-height: 5px;
}
html body .nd-d i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
html body .nd-d i.out {
  background: #f97316;
}
html body .nd-d i.in {
  background: #10b981;
}
html body .nd-d.now {
  background: color-mix(in srgb, var(--a1) 14%, transparent);
}
html body .nd-d.none {
  opacity: 0.55;
}
html body .nd-d[data-nd]:active {
  transform: scale(0.92);
}
html body .nd-c {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  overflow: visible;
}
html body .nd-c path {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body .nd-l1 {
  stroke: var(--mute);
  opacity: 0.5;
  stroke-dasharray: 100;
}
html body .nd-l2 {
  stroke: var(--a1);
  stroke-dasharray: 100;
  animation: ndline 1s 0.1s cubic-bezier(0.3, 0.7, 0.3, 1) backwards;
}
@keyframes ndline {
  from {
    stroke-dashoffset: 100;
  }
}
html body .nd-z {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
html body .nd-lo {
  fill: var(--a1);
  stroke: var(--card);
  stroke-width: 2;
}
html body .nd-lo.bad {
  fill: #f43f5e;
}
html body .nd-f {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--mute);
}
html body .nd-f b {
  color: var(--ink);
}
html body .nd-f.bad b {
  color: #f43f5e;
}
html body .nd-k {
  margin: 6px 0 0;
  font-size: 10.5px;
  color: var(--mute);
}
html body .nd-k i {
  display: inline-block;
  width: 14px;
  height: 3px;
  margin: 0 3px 2px 6px;
  border-radius: 3px;
  vertical-align: middle;
}
html body .nd-k i.a {
  background: var(--mute);
  opacity: 0.5;
  margin-left: 0;
}
html body .nd-k i.b {
  background: var(--a1);
}
html body #view.stale .nd-l2,
html body #view.still .nd-l2 {
  animation: none;
}

/* can I afford it */
html body .af-in {
  margin: 4px 0 14px;
}
html body .af-hint {
  text-align: center;
  margin: 24px 12px;
}
html body .af-v {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: 20px;
  color: #fff;
  animation: afpop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
html body .af-v b {
  font-size: 24px;
  letter-spacing: -0.02em;
}
html body .af-v span {
  opacity: 0.9;
  font-size: 13.5px;
}
html body .af-v.ok {
  background: linear-gradient(135deg, #34d399, #059669);
}
html body .af-v.warn {
  background: linear-gradient(135deg, #fbbf24, #d97706);
}
html body .af-v.bad {
  background: linear-gradient(135deg, #fb7185, #be123c);
}
@keyframes afpop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}
html body .af-l {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  padding: 13px 14px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  animation: afin 0.4s calc(var(--n) * 60ms) cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}
@keyframes afin {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* the quick tour: a spotlight that glides from one thing to the next */
#tour {
  position: fixed;
  inset: 0;
  z-index: 400;
  animation: tourin 0.3s ease;
}
#tour.out {
  opacity: 0;
  transition: opacity 0.25s;
}
@keyframes tourin {
  from {
    opacity: 0;
  }
}
#tour .t-hole {
  position: absolute;
  border-radius: 20px;
  box-shadow:
    0 0 0 100vmax rgba(10, 10, 14, 0.66),
    0 0 0 3px color-mix(in srgb, var(--a1) 70%, #fff);
  transition:
    top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#tour .t-hole::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 24px;
  border: 2px solid var(--a1);
  animation: tourpulse 1.6s ease-out 3;
}
@keyframes tourpulse {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.12);
  }
}
#tour .t-card {
  position: absolute;
  left: 16px;
  right: 16px;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px 18px 14px;
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.55);
  transition: top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#tour .t-card.in > * {
  animation: tourtxt 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}
@keyframes tourtxt {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
#tour .t-n {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
#tour .t-card b {
  display: block;
  margin: 4px 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}
#tour .t-card p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--mute);
}
#tour .t-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#tour .t-skip {
  padding: 9px 4px;
  border: 0;
  background: none;
  color: var(--mute);
  font: inherit;
  font-weight: 600;
}
#tour .t-next {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--a1);
  color: #fff;
  font: inherit;
  font-weight: 700;
}
#tour .t-dots {
  display: flex;
  gap: 5px;
}
#tour .t-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition:
    width 0.25s,
    background 0.25s;
}
#tour .t-dots i.on {
  width: 18px;
  border-radius: 6px;
  background: var(--a1);
}

/* ---------- trips: themed cards, the overview hero, the itinerary timeline ----------
   Each trip has a colour world (--a, --b, --c) chosen from where it goes, with a small animated scene (.art) in its card. */
.th-sunset,
.th-ocean,
.th-lagoon,
.th-forest,
.th-dusk,
.th-desert {
  background: linear-gradient(140deg, var(--a), var(--b) 55%, var(--c));
}
html body .art {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 58%;
  pointer-events: none;
}
html body .a-sun {
  animation: artrise 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
html body .a-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: artspin 70s linear 1;
}
html body .a-w1 {
  animation: artwave 11s linear 5;
}
html body .a-w2 {
  animation: artwave 8s linear 6 reverse;
}
html body .a-w3 {
  animation: artwave 6s linear 9;
}
html body .a-star {
  animation: arttwinkle 2.6s ease-in-out 4 alternate;
}
html body .a-cloud {
  animation: artdrift 26s ease-in-out 1 forwards;
}
@keyframes artrise {
  from {
    transform: translateY(46px);
    opacity: 0;
  }
}
@keyframes artspin {
  to {
    transform: rotate(120deg);
  }
}
@keyframes artwave {
  to {
    transform: translateX(-120px);
  }
}
@keyframes arttwinkle {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
@keyframes artdrift {
  to {
    transform: translateX(70px);
  }
}
html body #view.stale .art *,
html body #view.still .art * {
  animation: none;
}

/* the Plans list */
html body .tsum {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 2px 0 6px;
}
html body .tsum > div {
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
html body .tsum small {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
}
html body .tsum b {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
html body .tsum b.pos {
  color: #10b981;
}
html body .tsum b.neg {
  color: #f43f5e;
}
html body .tsum-o {
  margin: 0 4px 4px;
  font-size: 12px;
  color: var(--mute);
}
html body .sec-h h2 span {
  margin-left: 6px;
  letter-spacing: 0;
  font-weight: 500;
}
html body .tcs {
  display: grid;
  gap: 14px;
  margin-bottom: 8px;
}
html body .tc {
  position: relative;
  display: block;
  width: 100%;
  min-height: 176px;
  padding: 0;
  border: 0;
  border-radius: 26px;
  overflow: hidden;
  text-align: left;
  color: #fff;
  font: inherit;
  box-shadow: 0 22px 38px -22px var(--b);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html body .tc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.28), transparent 55%);
  pointer-events: none;
}
html body .tc:active {
  transform: scale(0.98);
}
html body .tc-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 176px;
  padding: 16px 18px 14px;
}
html body .tc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
html body .tc-kind,
html body .tv-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 11.5px;
  font-weight: 700;
}
html body .tc-when {
  padding: 5px 12px;
  border-radius: 99px;
  background: #fff;
  color: #27272f;
  font-size: 12px;
  font-weight: 800;
}
html body .tc-when.warn {
  color: #b45309;
}
html body .tc-when.ok {
  color: #047857;
}
html body .tc-t {
  margin-top: auto;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
html body .tc-s {
  margin-top: 3px;
  font-size: 13px;
  opacity: 0.9;
}
html body .tc-prog {
  position: relative;
  height: 6px;
  margin: 10px 0 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.28);
}
html body .tc-prog i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: #fff;
  transform-origin: left;
  animation: barin 1s 0.3s cubic-bezier(0.3, 0.7, 0.3, 1) backwards;
}
html body .tc-prog em {
  position: absolute;
  right: 0;
  top: 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  opacity: 0.9;
}
@keyframes barin {
  from {
    transform: scaleX(0);
  }
}
html body .tc-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  margin-top: 14px;
}
html body .tc-av,
html body .tv-faces {
  display: inline-flex;
  align-items: center;
}
html body .tc-av > *,
html body .tv-faces > * {
  margin-left: -8px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
html body .tc-av > :first-child,
html body .tv-faces > :first-child {
  margin-left: 0;
}
html body .tc-av i {
  display: grid;
  place-items: center;
  height: 24px;
  padding: 0 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.9);
  color: #27272f;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
html body .tc-net {
  padding: 6px 12px;
  border-radius: 99px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
html body .tc-net.pos {
  color: #047857;
}
html body .tc-net.neg {
  color: #be123c;
}
html body .tcs.past .tc {
  filter: saturate(0.5);
  opacity: 0.92;
}
@keyframes tcin {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
}
html body #view.fade .tcs .tc {
  animation: tcin 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}
html body #view.fade .tcs .tc:nth-child(2) {
  animation-delay: 0.07s;
}
html body #view.fade .tcs .tc:nth-child(3) {
  animation-delay: 0.14s;
}
html body #view.fade .tcs .tc:nth-child(n + 4) {
  animation-delay: 0.2s;
}

/* the trip overview's hero: a boarding pass */
html body .tv {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 30px;
  color: #fff;
  box-shadow: 0 28px 46px -26px var(--b);
}
html body .tv::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 80% at 100% 0%, rgba(255, 255, 255, 0.26), transparent 55%);
  pointer-events: none;
}
html body .tv .art {
  height: 64%;
  opacity: 0.6;
}
html body .tv-in {
  position: relative;
  z-index: 1;
  padding: 18px 20px 18px;
}
html body .tv-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
}
html body .tv-name {
  min-width: 0;
}
html body .tv-t {
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.26);
  overflow-wrap: anywhere;
}
html body .tv-d {
  margin-top: 6px;
  font-size: 14px;
  opacity: 0.92;
}
html body .tv-big {
  flex: none;
  text-align: right;
  line-height: 1;
}
html body .tv-big b {
  display: block;
  font-size: 42px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.26);
}
html body .tv-big small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.92;
}
html body .tv-set {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: 99px;
  background: #fff;
  color: #27272f;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}
html body .tv-route {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
  font-size: 11.5px;
  font-weight: 700;
}
html body .tv-line {
  position: relative;
  height: 30px;
}
html body .tv-line::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: 2px dashed rgba(255, 255, 255, 0.55);
}
html body .tv-fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--p) * 100%);
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
  background: #fff;
  transform-origin: left;
  animation: barin 1.1s 0.3s cubic-bezier(0.3, 0.7, 0.3, 1) backwards;
}
html body .tv-line em.d {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: dpop 0.4s calc(0.45s + var(--n) * 40ms) cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
}
html body .tv-line em.d.past {
  background: #fff;
}
html body .tv-line em.d.now {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}
@keyframes dpop {
  from {
    transform: scale(0);
  }
}
html body .tv-plane {
  position: absolute;
  top: 50%;
  left: calc(16px + var(--p) * (100% - 32px));
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--b);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%) rotate(45deg);
  animation: tvfly 1.4s 0.25s cubic-bezier(0.3, 0.7, 0.3, 1) backwards;
}
html body .tv-plane.before {
  animation:
    tvfly 1.4s 0.25s cubic-bezier(0.3, 0.7, 0.3, 1) backwards,
    tvbob 2.4s 1.7s ease-in-out 3;
}
@keyframes tvfly {
  from {
    left: 16px;
  }
}
@keyframes tvbob {
  50% {
    transform: translate(-50%, calc(-50% - 4px)) rotate(45deg);
  }
}
html body .tv-ppl {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 600;
}
html body .tv-perf {
  position: relative;
  margin: 18px -20px 16px;
  border-top: 2px dashed rgba(255, 255, 255, 0.45);
}
html body .tv-perf::before,
html body .tv-perf::after {
  content: '';
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg);
}
html body .tv-perf::before {
  left: -10px;
}
html body .tv-perf::after {
  right: -10px;
}
html body .tv-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
html body .tv-sp {
  flex: 1;
  min-width: 0;
}
html body .tv-sp small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.88;
}
html body .tv-sp b {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
html body .tv-bar {
  height: 6px;
  margin-top: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
html body .tv-bar i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: #fff;
  transform-origin: left;
  animation: barin 1s 0.4s cubic-bezier(0.3, 0.7, 0.3, 1) backwards;
}
html body .tv-bar.over i {
  background: #ffd1d9;
}
html body .tv-sp .tv-bs {
  margin-top: 5px;
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}
html body .tv-bal {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 13px;
  font-weight: 700;
}
html body .tv-bal.pos {
  background: #fff;
  color: #047857;
}
html body .tv-bal.neg {
  background: #fff;
  color: #be123c;
}
html body #view.stale .tv *,
html body #view.still .tv *,
html body #view.stale .tc *,
html body #view.still .tc * {
  animation: none;
}

/* the trip's own header (Plan, Expenses, ...) */
html body .tvh {
  position: relative;
  margin: 2px 0 12px;
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 18px 32px -22px var(--b);
}
html body .tvh .art {
  height: 100%;
}
html body .tvh-in {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 16px 18px 20px;
}
html body .tvh-t b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
html body .tvh-t span {
  font-size: 13px;
  opacity: 0.94;
}
html body .tvh-t em {
  padding: 2px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.24);
  font-style: normal;
  font-weight: 800;
}
html body .tvh .icon-btn {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
html body .ttabs {
  display: flex;
  gap: 8px;
  margin: 0 -16px 12px;
  padding: 2px 16px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
html body .ttabs::-webkit-scrollbar {
  display: none;
}
html body .ttabs button {
  flex: none;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--mute);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.15s;
}
html body .ttabs button.on {
  background: linear-gradient(135deg, var(--a1), var(--a2));
  box-shadow: 0 10px 20px -10px var(--a1);
  color: #fff;
}
html body .ttabs button:active {
  transform: scale(0.95);
}

/* settle up */
html body .tvs-r {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px dashed var(--line);
  animation: tlin 0.45s calc(0.1s + var(--n) * 70ms) cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}
html body .tvs-r .grow .amt {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 800;
}
html body .tvs-f {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mute);
}
html body .tvs-f i {
  display: inline-flex;
  animation: tvarrow 1.4s ease-in-out 3;
}
@keyframes tvarrow {
  50% {
    transform: translateX(4px);
  }
}

/* timelines: Next up and the itinerary */
html body .tl {
  position: relative;
  padding: 2px 0;
}
html body .tl::before {
  content: '';
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 17px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
  transform-origin: top;
  animation: tlline 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) backwards;
}
@keyframes tlline {
  from {
    transform: scaleY(0);
  }
}
html body .tli {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  animation: tlin 0.45s calc(0.1s + var(--n) * 70ms) cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}
@keyframes tlin {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
html body .tl-dot {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 16%, var(--card));
  box-shadow: 0 0 0 4px var(--card);
  color: var(--c);
}
html body .tli.now .tl-dot {
  background: var(--c);
  color: #fff;
  animation: tlnow 1.8s ease-out 3;
}
@keyframes tlnow {
  from {
    box-shadow:
      0 0 0 4px var(--card),
      0 0 0 4px color-mix(in srgb, var(--c) 50%, transparent);
  }
  to {
    box-shadow:
      0 0 0 4px var(--card),
      0 0 0 16px transparent;
  }
}
html body .tl-b {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}
html body .tl-b .t {
  font-size: 14.5px;
  font-weight: 650;
}
html body .tl-b .t span {
  margin-right: 2px;
  color: var(--mute);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html body .tl-b .s {
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--mute);
}
html body .tl-r {
  flex: none;
  text-align: right;
  padding-top: 1px;
}
html body .tday .tl {
  padding: 8px 14px;
  border-radius: 22px;
  background: var(--card);
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 10px 20px -16px rgba(16, 16, 20, 0.3);
}
html body .tday .tl::before {
  left: 31px;
}
html body .tday .tl .swp .sw-front {
  background: transparent;
}
html body .tday.past {
  opacity: 0.6;
}
html body .tday .day em {
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--a1);
  color: #fff;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
}
html body #view.stale .tl::before,
html body #view.still .tl::before,
html body #view.stale .tli,
html body #view.still .tli,
html body #view.stale .tvs-r,
html body #view.still .tvs-r {
  animation: none;
}

/* the generic card background must not win over a trip's colours */
html body .card.tv,
html body .card.tv::before {
  background: linear-gradient(140deg, var(--a), var(--b) 55%, var(--c));
}
html body .card.tv::before {
  display: none;
}
html body .tvh-t em,
html body .tc-when {
  color: inherit;
}
html body .tvh-t em {
  color: #fff;
}
html body .tc-when.warn {
  color: #b45309;
}
html body .tc-when.ok {
  color: #047857;
}

/* ===== wellness ===== */
#view[data-sec='wellness'] {
  --sec: #10b981;
}
html body #view .wl {
  display: block;
}
html body #view .card.wl-hero {
  position: relative;
  overflow: hidden;
  padding: 16px 18px 14px;
  color: #fff;
  background: linear-gradient(150deg, #047857, #0d9488 55%, #0e7490);
}
html body #view .card.wl-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -50px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 65%);
  animation: wl-drift 9s ease-in-out infinite alternate;
}
@keyframes wl-drift {
  to {
    transform: translate(-24px, 18px) scale(1.12);
  }
}
html body .wl-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
html body .wl-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12.5px;
  font-weight: 700;
}
html body .wl-gear {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
html body .wl-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 14px 0 12px;
}
html body .wl-ringbox {
  position: relative;
  flex: none;
  width: 140px;
  height: 140px;
}
html body .wl-track {
  opacity: 0.2;
}
html body .wl-arc {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.3, 0.7, 0.3, 1);
  animation: wl-ring 1.2s 0.15s cubic-bezier(0.3, 0.7, 0.3, 1) backwards;
}
@keyframes wl-ring {
  from {
    stroke-dashoffset: var(--c);
  }
}
html body .wl-score {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
html body .wl-score b {
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
html body .wl-score small {
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}
html body .wl-legend {
  display: grid;
  flex: 1;
  gap: 9px;
  min-width: 0;
}
html body .wl-lg {
  display: flex;
  align-items: center;
  gap: 9px;
}
html body .wl-dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--c);
}
html body .wl-lg b {
  display: block;
  font-size: 13px;
  line-height: 1.15;
}
html body .wl-lg small {
  display: block;
  font-size: 11.5px;
  opacity: 0.82;
  white-space: nowrap;
}
html body .wl-msg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
html body #view .wl-msg h2 {
  margin: 0;
  color: #fff;
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
html body .wl-msg p {
  margin: 2px 0 0;
  font-size: 13px;
  opacity: 0.86;
}
html body .wl-streak {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 13px;
}
html body #view .wl-streak.sm {
  padding: 4px 9px;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #d97706;
  font-size: 12.5px;
}
html body .wl-lock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  font-size: 11px;
  opacity: 0.7;
}

/* cards */
html body #view .card.wl-card {
  position: relative;
  padding: 16px;
  margin-bottom: 12px;
  text-align: left;
  border: 0;
  background: var(--card);
  color: var(--ink);
}
html body .wl-h {
  display: flex;
  align-items: center;
  gap: 10px;
}
html body .wl-h .grow {
  min-width: 0;
}
html body .wl-h b {
  display: block;
  font-size: 15px;
  line-height: 1.2;
}
html body .wl-h small {
  display: block;
  margin-top: 1px;
  color: var(--mute);
  font-size: 12px;
  font-weight: 600;
}
html body .wl-chip {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  color: var(--c);
}
html body .wl-val {
  margin-left: auto;
  text-align: right;
}
html body .wl-val b {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
html body .wl-glasses {
  display: flex;
  gap: 6px;
  margin: 14px 0;
}
html body .wl-gl {
  position: relative;
  flex: 1;
  height: 46px;
  overflow: hidden;
  border-radius: 8px 8px 14px 14px;
  background: var(--fill);
}
html body .wl-gl::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(var(--f) * 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 62%, #fff), var(--c));
  transition: height 0.55s cubic-bezier(0.3, 0.8, 0.3, 1);
  animation: wl-fill 0.8s cubic-bezier(0.3, 0.8, 0.3, 1) backwards;
}
@keyframes wl-fill {
  from {
    height: 0;
  }
}
html body .wl-gl.full {
  box-shadow: 0 6px 14px -6px var(--c);
}
html body .wl-btns {
  display: grid;
  grid-template-columns: 46px 1fr 1fr;
  gap: 8px;
}
html body .wl-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c) 13%, transparent);
  color: var(--c);
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.12s;
}
html body .wl-b small {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
}
html body .wl-b.main {
  background: var(--c);
  color: #fff;
  box-shadow: 0 8px 18px -8px var(--c);
}
html body .wl-b:active,
html body .wl-tile:active,
html body .wl-face:active {
  transform: scale(0.95);
}
html body .wl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
html body #view .wl-grid .card.wl-card {
  margin: 0;
}
html body .wl-tile {
  display: block;
  width: 100%;
  font: inherit;
  cursor: pointer;
  transition: transform 0.12s;
}
html body .wl-big {
  margin-top: 12px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
html body .wl-big small {
  color: var(--mute);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
html body .wl-sub {
  margin-top: 5px;
  color: var(--mute);
  font-size: 12px;
  font-weight: 600;
}
html body .wl-bar {
  height: 6px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--fill);
}
html body .wl-bar i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--c);
  transition: width 0.6s cubic-bezier(0.3, 0.8, 0.3, 1);
  animation: barin 0.9s backwards;
}
html body .wl-faces {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
html body .wl-face {
  width: 54px;
  height: 54px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--fill);
  font-size: 27px;
  line-height: 1;
  filter: grayscale(0.85);
  opacity: 0.75;
  transition:
    transform 0.2s,
    filter 0.2s,
    opacity 0.2s,
    background 0.2s;
}
html body .wl-face.on {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 22%, transparent);
  filter: none;
  opacity: 1;
  transform: scale(1.12);
  animation: wl-pop 0.4s;
}
@keyframes wl-pop {
  40% {
    transform: scale(1.3);
  }
}

/* habits */
html body .wl-hb {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
html body .wl-tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 2px solid color-mix(in srgb, var(--c) 40%, var(--line));
  border-radius: 50%;
  background: transparent;
  color: transparent;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
html body .wl-hb.done .wl-tick {
  border-color: var(--c);
  background: var(--c);
  color: #fff;
  animation: wl-pop 0.4s;
}
html body .wl-hn {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
html body .wl-hn b {
  display: block;
  font-size: 15px;
  transition: opacity 0.2s;
}
html body .wl-hb.done .wl-hn b {
  opacity: 0.55;
  text-decoration: line-through;
}
html body .wl-wk {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
html body .wl-wk i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fill);
}
html body .wl-wk i.on {
  background: var(--c);
}
html body .wl-wk i.now {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent);
}
html body .wl-fire {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #d97706;
  font-size: 12.5px;
  font-weight: 800;
}
html body .wl-empty,
html body .wl-note {
  margin: 0 0 12px;
  color: var(--mute);
  font-size: 13px;
  line-height: 1.5;
}
html body .wl-ideas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
html body .wl-idea,
html body .wl-ch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
html body .wl-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  height: 44px;
  margin-top: 10px;
  border: 2px dashed color-mix(in srgb, var(--c) 40%, var(--line));
  border-radius: 14px;
  background: none;
  color: var(--c);
  font-size: 14px;
  font-weight: 700;
}
html body .wl-cnt {
  color: var(--mute);
  font-size: 12.5px;
  font-weight: 700;
}

/* the week */
html body .wl-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
html body .wl-tabs button {
  flex: 1;
  padding: 8px 4px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--mute);
  font-size: 12.5px;
  font-weight: 700;
  transition:
    background 0.2s,
    color 0.2s;
}
html body .wl-tabs button.on {
  background: var(--c);
  color: #fff;
}
html body .wl-bars {
  position: relative;
  display: flex;
  gap: 8px;
  padding-top: 16px;
}
html body .wl-bars::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 0;
  left: 0;
  border-top: 1.5px dashed color-mix(in srgb, var(--c) 45%, transparent);
}
html body .wl-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--mute);
  font-size: 11.5px;
  font-weight: 700;
}
html body .wl-bw {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100px;
}
html body .wl-bw i {
  display: block;
  width: 100%;
  max-width: 30px;
  height: var(--h);
  border-radius: 9px 9px 4px 4px;
  background: color-mix(in srgb, var(--c) 40%, var(--fill));
  transition:
    height 0.6s cubic-bezier(0.3, 0.8, 0.3, 1),
    background 0.3s;
  animation: wl-grow 0.8s cubic-bezier(0.3, 0.8, 0.3, 1) backwards;
}
html body .wl-col.hit .wl-bw i,
html body .wl-col.now .wl-bw i {
  background: var(--c);
}
html body .wl-col.now {
  color: var(--ink);
}
html body .wl-bw em {
  position: absolute;
  bottom: calc(var(--h) + 3px);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}
@keyframes wl-grow {
  from {
    height: 0;
  }
}
html body .wl-wsum {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 14px;
  color: var(--mute);
  font-size: 12.5px;
  font-weight: 600;
}
html body .wl-wsum b {
  color: var(--ink);
}

/* body, tips */
html body .wl-spark {
  display: block;
  width: 100%;
  height: 64px;
  margin: 14px 0 10px;
  overflow: visible;
}
html body .wl-bmi {
  font-size: 13px;
  font-weight: 600;
}
html body .wl-bmi small {
  display: block;
  margin-top: 4px;
  color: var(--mute);
  font-size: 11.5px;
}
html body .wl-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c);
  font-size: 12px;
  font-weight: 800;
}
html body .wl-tips {
  display: grid;
  gap: 10px;
}
html body #view .card.wl-tip {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin: 0;
  box-shadow:
    inset 3px 0 0 var(--c),
    var(--shadow);
  animation: wl-rise 0.5s calc(var(--n) * 70ms) cubic-bezier(0.3, 0.8, 0.3, 1) backwards;
}
html body #view .card.wl-tip.warn {
  background: color-mix(in srgb, var(--c) 7%, var(--card));
}
html body .wl-tip b {
  display: block;
  font-size: 14.5px;
  line-height: 1.3;
}
html body .wl-tip p {
  margin: 4px 0 0;
  color: var(--mute);
  font-size: 13px;
  line-height: 1.5;
}
@keyframes wl-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
html body .wl-fine {
  margin: 14px 8px 4px;
  color: var(--mute);
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

/* forms */
html body .wl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 14px;
}
html body .wl-ch.on {
  background: #10b981;
  color: #fff;
}
html body .wl-bigin {
  margin: 4px 0 8px;
  text-align: center;
}
html body .wl-bigin b {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
html body .wl-range {
  width: 100%;
  accent-color: #6366f1;
}
html body .wl-kinds,
html body .wl-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
html body .wl-kinds input,
html body .wl-icons input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
html body .wl-kinds span {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--fill);
  font-size: 13.5px;
  font-weight: 600;
}
html body .wl-kinds input:checked + span {
  background: #ef4444;
  color: #fff;
}
html body .wl-icons span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--fill);
}
html body .wl-icons input:checked + span {
  background: color-mix(in srgb, #10b981 22%, transparent);
  box-shadow: inset 0 0 0 2px #10b981;
  color: #10b981;
}
html body .wl-hstat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 14px;
  text-align: center;
}
html body .wl-hstat b {
  display: block;
  font-size: 22px;
  font-weight: 800;
}
html body .wl-hstat small {
  color: var(--mute);
  font-size: 12px;
}

/* the small card on Home */
html body #view .card.wl-mini {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  background: var(--card);
  color: var(--ink);
  text-align: left;
}
html body .wl-mini b {
  display: block;
  font-size: 15px;
}
html body .wl-mini small {
  color: var(--mute);
  font-size: 12.5px;
  font-weight: 600;
}
html body .wl-mini .grow {
  min-width: 0;
}
html body .wl-mini > svg:last-child {
  color: var(--mute);
}

/* the Home page: the rest of the month is tucked away until asked for */
html body details.hm-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin: 4px 0 12px;
  border-radius: 16px;
  background: var(--fill);
  color: var(--mute);
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
html body details.hm-more > summary::-webkit-details-marker {
  display: none;
}
html body details.hm-more > summary .i {
  transition: transform 0.25s;
}
html body details.hm-more[open] > summary .i {
  transform: rotate(180deg);
}
html body #view .card.hm-plan {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  background: var(--card);
  color: var(--ink);
  text-align: left;
}
html body .hm-plan b {
  display: block;
  font-size: 15px;
}
html body .hm-plan small {
  color: var(--mute);
  font-size: 12.5px;
  font-weight: 600;
}

/* list rows: the name keeps its line, and the small grey value gives way (shortened with …) instead of squeezing the name onto three lines */
html body .srow .st {
  flex: 1 0 auto;
  white-space: nowrap;
}
html body .srow .sv {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* wellness challenges */
html body .wl-ch {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: left;
  color: var(--ink);
}
html body .wl-ch .wl-dots {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
  gap: 8px 4px;
  margin: 14px 0 10px;
}
html body .wl-dots i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
html body .wl-dots i.on {
  background: var(--c);
}
html body .wl-dots i.miss {
  background: transparent;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #f43f5e 55%, transparent);
}
html body .wl-dots i.now {
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--c);
}
html body .wl-chf {
  font-size: 12px;
  color: var(--mute);
}
html body .wl-ch.won {
  background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 16%, var(--card)), var(--card));
}
html body .wl-ch.lost {
  opacity: 0.75;
}
html body .wl-chadd {
  margin-top: 10px;
}
html body .wl-chempty .wl-ideas {
  margin-top: 10px;
}
html body .wl-chpick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
html body .wl-chdesc {
  margin: 0 0 14px;
  min-height: 20px;
}
html body .wl-chpick label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  cursor: pointer;
}
html body .wl-chpick label:has(input:checked) {
  box-shadow: inset 0 0 0 2px var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
html body .wl-chpick input,
html body .wl-chlen input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
html body .wl-chpick b {
  display: block;
  font-size: 14px;
  line-height: 1.2;
}
html body .wl-chpick small {
  color: var(--mute);
  font-size: 12px;
}
html body .wl-chlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0 4px;
}
html body .wl-chlen label {
  text-align: center;
  padding: 10px 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  cursor: pointer;
  font-size: 13px;
}
html body .wl-chlen label:has(input:checked) {
  background: #10b981;
  color: #fff;
}
html body .wl-chlen b {
  font-size: 17px;
  display: block;
}

/* wellness: rest day, plants, buddies, season, trophies, the weekly review, habit triggers, reminder */
html body .wl-lock {
  justify-content: space-between;
}
html body .wl-rest {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  padding: 6px 11px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  background: rgba(255, 255, 255, 0.18);
}
html body .wl-rest.on {
  background: #fff;
  color: #0f766e;
}
html body .wl-chb {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
html body .wl-chb .wl-dots {
  flex: 1;
}
html body .wl-plant {
  width: 56px;
  height: 56px;
  flex: none;
}
html body .wl-plant.wilt {
  opacity: 0.8;
}
html body .wl-dots i.rest {
  background: color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent);
}
html body .wl-chf {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
html body .wl-bd {
  margin: 4px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  font-size: 12px;
  color: var(--mute);
}
html body .wl-bdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
html body .wl-bdr span {
  width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
}
html body .wl-bdr i {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}
html body .wl-bdr u {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--c);
}
html body .wl-bdr b {
  width: 22px;
  text-align: right;
  color: var(--ink);
}
html body .wl-inv .wl-btns {
  margin-top: 4px;
}
html body .wl-season {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  text-align: left;
  color: var(--ink);
  border: 0;
  background: linear-gradient(120deg, color-mix(in srgb, #f59e0b 20%, var(--card)), var(--card));
}
html body .wl-season .wl-chip {
  background: color-mix(in srgb, #f59e0b 22%, transparent);
  color: #f59e0b;
}
html body .wl-season small {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f59e0b;
}
html body .wl-season b {
  display: block;
  font-size: 16px;
}
html body .wl-season em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--mute);
}
html body .wl-go {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: #f59e0b;
  color: #1a1204;
}
html body .wl-badges {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}
html body .wl-badges::-webkit-scrollbar {
  display: none;
}
html body .wl-bg {
  flex: none;
  width: 112px;
  padding: 12px 10px;
  border-radius: 16px;
  text-align: center;
  background: var(--card);
  opacity: 0.5;
  filter: grayscale(1);
}
html body .wl-bg.got {
  opacity: 1;
  filter: none;
  background: linear-gradient(160deg, color-mix(in srgb, #f59e0b 22%, var(--card)), var(--card));
}
html body .wl-bg span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: color-mix(in srgb, #f59e0b 20%, transparent);
  color: #f59e0b;
}
html body .wl-bg b {
  display: block;
  font-size: 13px;
}
html body .wl-bg small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--mute);
}
html body .wl-rv {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
html body .wl-rv span {
  width: 64px;
  color: var(--mute);
  font-size: 13px;
}
html body .wl-rv b {
  flex: 1;
  font-size: 16px;
}
html body .wl-rv b small {
  font-weight: 500;
  font-size: 11px;
  color: var(--mute);
}
html body .wl-rv em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  min-width: 52px;
  text-align: right;
}
html body .wl-rv em.up {
  color: #10b981;
}
html body .wl-rv em.dn {
  color: #f59e0b;
}
html body .wl-review .card {
  margin-top: 8px;
}
html body .wl-hn small {
  display: block;
  font-size: 11px;
  color: var(--mute);
  font-weight: 500;
}
html body .wl-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}
html body .wl-anchors input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
html body .wl-anchors span {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  cursor: pointer;
}
html body .wl-anchors input:checked + span {
  background: #10b981;
  color: #fff;
}
html body .wl-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 0;
}
html body .wl-check input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: #10b981;
}
html body .wl-check b {
  display: block;
  font-size: 14px;
}
html body .wl-check small {
  display: block;
  color: var(--mute);
  font-size: 12px;
  line-height: 1.35;
}
html body .sec-h:has(.wl-cnt) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
html body .wl-rest .on,
html body .wl-rest.on .off {
  display: none;
}
html body .wl-rest.on .on {
  display: inline;
}

/* the tagline under the name while the app opens */
#splash .sp-tag {
  margin-top: -8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--mute);
}
/* a challenge made of several habits: tap the ones that all have to be done */
html body .wl-hpick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 6px;
}
html body .wl-hpick label {
  display: inline-flex;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
html body .wl-hpick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
html body .wl-hpick label:has(input:checked) {
  background: var(--c);
  color: #fff;
}
/* the public link sheet */
html body .shlink input {
  width: 100%;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 0;
  color: var(--ink);
  text-overflow: ellipsis;
}
html body .shbtns {
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
}
html body .shbtns .btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 8px;
  font-size: 14px;
  text-decoration: none;
}
html body .shlist {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--mute);
  font-size: 14px;
}
html body .shmore {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
html body .linkbtn {
  background: none;
  border: 0;
  padding: 8px 2px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  color: var(--mute);
  cursor: pointer;
}
html body .linkbtn.bad {
  color: var(--bad);
}
/* the habit picker's label looks like the other field labels */
html body #wl-chhabit div.f {
  margin-bottom: 12px;
}
html body #wl-chhabit div.f > span {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--mute);
  margin: 0 2px 2px;
}
/* the share link button on a trip */
html body .tv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
html body .tv-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 99px;
  border: 0;
  background: #fff;
  color: #27272f;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5);
}
html body .tvh-b {
  display: inline-flex;
  gap: 6px;
}
/* the trip feed */
html body .momf {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
html body .momf input {
  flex: 1;
  min-width: 0;
}
html body .momf .btn {
  flex: none;
  width: 46px;
  padding: 0;
  display: grid;
  place-items: center;
}
html body .momlink {
  width: 100%;
  margin: 8px 0 4px;
}
html body .momr {
  padding: 10px 0 2px;
}
html body #momadd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
}
/* the hidden radios and checkboxes of the Wellness pickers stay inside their own labels (they used to sit across the whole sheet and make it scroll sideways) */
html body .wl-icons label,
html body .wl-anchors label,
html body .wl-kinds label,
html body .wl-chpick label,
html body .wl-chlen label,
html body .wl-hpick label {
  position: relative;
}
html body .wl-icons input,
html body .wl-anchors input,
html body .wl-kinds input,
html body .wl-chpick input,
html body .wl-chlen input,
html body .wl-hpick input {
  width: 1px;
  height: 1px;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
}
@media (max-height: 700px) {
  html body .wl-icons span {
    width: 42px;
    height: 42px;
  }
  html body .wl-icons {
    margin-bottom: 8px;
  }
}
/* ---------- the modern add/edit form, on every sheet: lighter, tighter, and a button that is not a slab ---------- */
html body .sheet-wrap[data-kind] .sheet {
  border-radius: 24px 24px 0 0;
  padding: 8px 18px calc(14px + env(safe-area-inset-bottom));
  background: var(--card);
  box-shadow:
    0 -1px 0 var(--line),
    0 -18px 40px -26px rgba(0, 0, 0, 0.45);
}
html body .sheet-wrap[data-kind] .grab {
  width: 36px;
  height: 4px;
  background: var(--line);
}
html body .sheet-wrap[data-kind] .sheet h3 {
  gap: 10px;
  margin: 8px 0 14px;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.015em;
}
html body .sheet-wrap[data-kind] .shi {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--k);
  background: color-mix(in srgb, var(--k) 15%, transparent);
  box-shadow: none;
}
html body .sheet-wrap[data-kind] .shi svg {
  width: 18px;
  height: 18px;
}
html body .sheet-wrap[data-kind] #sx {
  width: 30px;
  height: 30px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
html body .sheet-wrap[data-kind] #sx svg {
  width: 16px;
  height: 16px;
}
html body .sheet-wrap[data-kind] .amount-in {
  margin-bottom: 12px;
  padding: 12px 16px;
  font-size: 34px;
  letter-spacing: -0.02em;
  background: var(--fill);
  border: 1.5px solid transparent;
  border-radius: 18px;
}
html body .sheet-wrap[data-kind] .amount-in:focus {
  border-color: var(--k);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k) 12%, transparent);
}
html body .sheet-wrap[data-kind] .cats {
  gap: 6px;
  margin: 0 -18px 10px;
  padding: 2px 18px 4px;
}
html body .sheet-wrap[data-kind] .cats span {
  gap: 6px;
  padding: 7px 12px 7px 8px;
  font-size: 12.5px;
  font-weight: 620;
}
html body .sheet-wrap[data-kind] .cats span svg {
  width: 16px;
  height: 16px;
}
html body .sheet-wrap[data-kind] .cats input:checked + span {
  transform: none;
  box-shadow: none;
}
html body .sheet-wrap[data-kind] label.f {
  margin-bottom: 10px;
}
html body .sheet-wrap[data-kind] label.f > span {
  margin: 0 2px 5px;
  font-size: 12px;
  font-weight: 620;
}
html body .sheet-wrap[data-kind] label.f input:not([type='checkbox']),
html body .sheet-wrap[data-kind] label.f select {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 12px;
}
html body .sheet-wrap[data-kind] details.mbox {
  margin: 0 0 6px;
  border-top: 0;
}
html body .sheet-wrap[data-kind] details.mbox > summary {
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 620;
  color: var(--mute);
  justify-content: flex-start;
  gap: 8px;
}
html body .sheet-wrap[data-kind] .sbtn {
  min-height: 46px;
  margin-top: 6px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.005em;
  background: var(--k);
  box-shadow: 0 0 0 10px var(--card);
}
html body .sheet-wrap[data-kind] .sbtn.saved {
  background: #10b981;
  box-shadow: 0 0 0 10px var(--card);
}
html body .sheet-wrap[data-kind] .cats {
  align-items: flex-start;
  margin-bottom: 6px;
}
html body .sheet-wrap[data-kind] .cats .catnew {
  padding: 7px 12px;
  font-size: 12.5px;
  gap: 5px;
}
html body .sheet-wrap[data-kind] .cats .catnew svg {
  width: 15px;
  height: 15px;
}
html body .sheet-wrap[data-kind] .sbtn {
  height: 46px;
  padding: 0 16px;
}
html body .sheet-wrap[data-kind] .cats .catnew {
  height: 34px;
  min-height: 0;
  padding: 0 12px;
  align-self: flex-start;
}
html body .sheet-wrap[data-kind] .cats .catnew span {
  padding: 0;
  background: none;
  font-size: 12.5px;
}
html body .sheet-wrap[data-kind] .amt-wrap {
  position: relative;
}
html body .sheet-wrap[data-kind] .amt-wrap::before {
  content: attr(data-sym);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-62%);
  font-size: 22px;
  font-weight: 700;
  color: var(--mute);
  pointer-events: none;
}
html body .sheet-wrap[data-kind] .amount-in {
  margin-bottom: 0;
  padding: 8px 16px;
  font-size: 32px;
  text-align: center;
}
html body .sheet-wrap[data-kind] .amt-wrap .amount-in {
  padding-left: 44px;
}
html body .sheet-wrap[data-kind] .amt-wrap {
  margin-bottom: 10px;
}
html body .sheet-wrap[data-kind] .sbtn {
  height: 44px;
  min-height: 44px;
}
html body .sheet-wrap[data-kind] .amt-wrap .amount-in {
  margin-bottom: 0 !important;
}