/* The accounts and the budget screens, the switch, captions and «label → value» rows.
   One of the stylesheets index.html loads IN ORDER: a rule here may rely on coming
   after the files before it. */

/* --- the accounts screen --- */
.totals {
  padding: calc(18px + var(--safe-top)) 16px 6px;
  text-align: center;
}
.totals__caption { color: var(--hint); font-size: 13px; }
.totals__value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* The second currency and beyond are smaller: the first line is the main answer. */
.totals__value ~ .totals__value { font-size: 19px; color: var(--hint); font-weight: 600; }
/* The currency code is smaller and quiet: the amount is the answer. */
.totals__cur { font-size: .6em; font-weight: 600; color: var(--hint); letter-spacing: 0; }

/* «New account» is an action rather than a disabled row: grey text read as unavailable. The
   same accent as «＋ New category» in the category sheet. */
.op--add { color: var(--accent); }
.op--add .op__icon {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.op.is-archived { opacity: .5; }

/* The pencil in an account's row: a tap zone of its own, so it does not interfere with the
   row's */
.op__edit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 32px; height: 32px;
  margin-left: 2px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--hint);
}
/* The default account: its icon wears a ring of the accent — seen without reading. */
.op.is-primary .op__icon {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent);
}
.op__edit:active { opacity: .5; }

/* The account's sheet: fields in pairs (accounts.js, pair()). */
.accform__pair { display: grid; gap: 10px; align-items: end; }
.accform__pair--face { grid-template-columns: 64px minmax(0, 1fr); }
.accform__pair--money { grid-template-columns: 92px minmax(0, 1fr); }
.accform__cell { display: block; min-width: 0; }
.accform__cell .sheet__input { width: 100%; height: 48px; }
.accform__emoji { text-align: center; font-size: 20px; line-height: 1; padding-left: 0; padding-right: 0; }
.accform__cur { text-transform: uppercase; }
.accform__emoji::placeholder { opacity: .45; }
.accform__pair--face + .accform__pair--money { margin-top: 4px; }
.accform__pair--face + .emoji { margin-top: 12px; }

/* The currency code next to the amount is smaller: the amount is the main figure. */
.op__cur { font-size: 12px; font-weight: 500; color: var(--hint); }


/* --- the switch --- */
.toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-card);
  background: var(--bg);
  text-align: left;
}
.toggle__left { flex: 1 1 auto; min-width: 0; }
.toggle__text { display: block; font-size: 16px; }
.toggle__hint { display: block; color: var(--hint); font-size: 12px; }

/* The switch's track is drawn entirely in CSS: a system checkbox looks foreign in a dark
   theme, and calling in a whole component for one setting is not worth it. */
.toggle__box {
  flex: 0 0 auto;
  position: relative;
  width: 46px; height: 28px;
  border-radius: 999px;
  /* Off, the track must still read as a switch on a black ground: --line vanished there. */
  background: color-mix(in srgb, var(--text) 22%, transparent);
  transition: background .18s ease;
}
.toggle__box::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  /* White in both themes, as a system switch: in the card's colour the knob melted into it. */
  background: #fff;
  box-shadow: 0 1px 3px var(--shadow);
  transition: transform .18s cubic-bezier(.32,.72,0,1);
}
.toggle.is-on .toggle__box { background: var(--accent); }
.toggle.is-on .toggle__box::after { transform: translateX(18px); }

/* A field that cannot be changed right now: it is visible that it is not waiting for input. */
.sheet__input:disabled {
  color: var(--hint);
  border-style: dashed;
}

/* --- the budget screen --- */
/* The budget's top (budget.js): «left» large, as the other tabs' totals, and the bar of
   what the ceiling is made of under it. */
.bud__amount.is-over { color: var(--warm); }
.bud__line {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--hint);
}
/* «✎» — the same rounded square as the other icon buttons. */
.bud__edit {
  width: 26px; height: 26px;
  margin-left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
}
.bud__edit:active { opacity: .5; }
/* The stretches: category after category in the accent, a hairline gap between them;
   the track under them is what is free. */
.bud__bar {
  position: relative;
  display: flex;
  gap: 2px;
  height: 12px;
  margin: 18px 16px 8px;
  border-radius: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 9%, transparent);
}
.bud__seg {
  flex: 0 0 0%;
  min-width: 2px;
  background: var(--accent);
  transition: flex-basis .5s cubic-bezier(.2, .7, .3, 1), opacity .15s ease;
}
.bud__seg.is-dim { opacity: .3; }
/* The recurring payments: the fixed part of the month, reserved from day one — muted,
   so the bright stretches after them are what a person actually decides about. */
.bud__seg--fixed { background: color-mix(in srgb, var(--accent) 38%, transparent); }
.bud__seg--fixed.is-picked { background: color-mix(in srgb, var(--accent) 70%, transparent); }
/* Past the ceiling: everything beyond it is warm. */
.bud__over {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: 100%;
  background: var(--warm);
  transition: left .5s cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .bud__seg, .bud__over { transition: none; } }
.bud__labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  min-height: 18px;
  font-size: 13px;
  color: var(--hint);
  font-variant-numeric: tabular-nums;
}
.bud__labels span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bud__labels span:last-child { flex: 0 0 auto; }
.bud__labels b { color: var(--text); font-weight: 600; }
.bud__tabs { padding-top: 16px; }

/* The limits card's head: how much can still be allocated, and the «+». */
.budget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 6px 16px;
  font-size: 13px;
  color: var(--hint);
}
.budget__head b { color: var(--text); font-weight: 600; }
.budget__headhint { margin-top: 2px; font-size: 12px; opacity: .8; }
.budget__head.is-over { color: var(--warm); }
.budget__add {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
}
.budget__add:active { opacity: .5; }

.sheet__hint {
  min-height: 18px;
  padding: 8px 4px 0;
  text-align: center;
  color: var(--hint);
  font-size: 13px;
}
.sheet__hint.is-over { color: var(--up); }

/* A limit row: the name and «1 226 left» on one line, the bar of what is SPENT under
   them — in the text column, so it starts and ends with the words (budget.js). */
.op--limit .op__text { display: flex; flex-direction: column; gap: 8px; }
.op__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.op__top .op__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op__left {
  flex: 0 0 auto;
  color: var(--hint);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.op__left b { color: var(--text); font-weight: 500; }
.op__left.is-over b { color: var(--warm); }
/* On the budget the category is the headline of its row and the money is under it in
   weight: the name larger, the sums medium. */
.budget__list .op__name { font-size: 17px; }
.budget__list .op__sum { font-size: 15px; font-weight: 500; }
.op__bar {
  position: relative;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  overflow: hidden;
}
/* One colour for the whole bar: the accent within the limit, warm past it. */
.op__barfill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width .5s cubic-bezier(.2, .7, .3, 1);
}
.op__barfill.is-over { background: var(--warm); }
@media (prefers-reduced-motion: reduce) { .op__barfill { transition: none; } }
/* A category paid by a recurring payment, its limit emptied on the payment day: a tick
   and the sum, quiet — at the bottom of the card, where nothing needs attention. */
.op__paid {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--hint);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.op__paid svg { color: var(--accent); }

/* --- a section's caption (accounts.js) --- */
.section__text { flex: 1 1 auto; min-width: 0; color: var(--hint); font-size: 13px; }

/* --- the «label → value» rows in forms ---
   One group per block: the rows share a single plaque and are divided by a hairline, as
   in the system settings. Separate plaques one under another read as a list of unrelated
   things, and «category» looked like one more setting of «when». */
.rows {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  background: var(--bg);
  overflow: hidden;
}
.rows + .rows { margin-top: 14px; }
/* An action inside a group («Remove the dates»): the accent, no chevron — it opens nothing. */
.row--action { color: var(--accent-ink); font-size: 15px; }
/* A note under a group: small and flush with it — a centred paragraph read as a message. */
.sheet__hint.rows__note { padding: 6px 4px 0; text-align: left; }
.rows > .row { position: relative; border-radius: 0; background: none; }
.rows > .row + .row::before {
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 0;
  height: 1px;
  background: var(--line);
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r-card);
  background: var(--bg);
  text-align: left;
}
.row:active { opacity: .65; }
.row__title { font-size: 15px; }
.row__value {
  color: var(--hint);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__value::after { content: " ›"; opacity: .6; }

/* An icon inside a chip: fitted to the line so it does not stick out. */
.chip svg { display: block; margin: -2px 0; }

/* An overdue payment: the date has passed and no money has gone. */
.op__meta.is-overdue { color: var(--up); }

/* Cards inside a sheet: the panel's background and a card's background are the same
   --surface, so rows and chips inside a sheet disappeared, leaving bare text. Inside a
   panel the surface goes one level lower. */
.sheet .op,
.sheet .chip { background: var(--bg); }
/* An active chip in the entry sheet gets a soft fill rather than the solid accent. On a
   filled-in operation every chip is active at once (the date, the description, the
   account), and the whole row blazed with the accent: when everything is highlighted,
   nothing is. */
.sheet .chip.is-active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.sheet .op.is-picked { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); }