/* Importing a statement: the steps, picking shops in batches, the suggestion.
   One of the stylesheets index.html loads IN ORDER: a rule here may rely on coming
   after the files before it. */

/* --- importing a statement --- */
/* Waiting for the suggestion: a bar and a countdown. A line of text read as a frozen screen
   — the phone had time to go dark and people poked it to check whether the app was alive. */
.wait { padding: 28px 4px 24px; text-align: center; }
.wait__title { font-size: 15px; margin-bottom: 14px; }
.wait__bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow: hidden;
}
.wait__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width .5s linear;
}
.wait__left { margin-top: 10px; font-size: 13px; color: var(--hint); font-variant-numeric: tabular-nums; }
.wait__note { margin-top: 12px; font-size: 12px; color: var(--hint); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .wait__fill { transition: none; } }

/* A statement of fact as a row: it opens nothing, so it carries no chevron. */
.row--flat .row__value::after { content: none; }
.row--flat { align-items: flex-start; }
/* And its value is not a short word but a phrase: «10 — we will sort these at the next
   step», «8 — next time they will sort themselves». The general rule cuts that off with an
   ellipsis exactly at the explanation the row was written for. */
.row--flat .row__value {
  white-space: normal;
  overflow: visible;
  text-align: right;
  flex: 1 1 auto;
}
.row--flat .row__title { flex: 0 1 auto; }

/* A column of the file: the name on top, an example from the data beneath it — the example
   is what people recognise their column by, because banks' headers can be things like
   «Felt3». */
.row__left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row__hint {
  font-size: 12px;
  color: var(--hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__value.is-muted { opacity: .55; }

/* An action at the end of a row: «Undo» next to an import. Red — it deletes. */
.row__action {
  flex: none;
  padding: 6px 12px;
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--up) 12%, transparent);
  color: var(--up);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* A preview row: the date and the future category under the description. */
.op__hint {
  display: block;
  font-size: 12px;
  color: var(--hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The balance before and after the import is the main «does it add up» check. */
.import__balance {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--hint);
}
.import__caption { font-size: 12px; }
.import__arrow { opacity: .6; }
.import__after { color: var(--text); font-weight: 700; font-size: 17px; }
.row.is-done .row__title { color: var(--accent); }

/* The «create a category» button right in the picker list is the same plaque as the «clear
   the choice» beneath it: two actions at the bottom of a sheet must look like buttons
   rather than two lines of text. Their colour tells them apart: the accent is the action,
   grey is declining to choose. */
.sheet__row--add {
  justify-content: center;
  margin-top: 10px;
  padding: 13px;
  border-radius: var(--r-card);
  background: var(--bg);
  color: var(--accent);
}
.sheet__row--add .sheet__rowtitle { color: var(--accent); }

/* --- picking shops in batches --- */
.row--pick { gap: 10px; }
.pick__box {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 1.5px solid var(--line);
  border-radius: 7px;
}
/* The tick is a real one, from the icon set. Drawn with two gradients it added up to a
   cross, that is to a «no» instead of a «yes». */
.pick__box {
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
.pick__box.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.row--pick .row__left { flex: 1; min-width: 0; cursor: pointer; }
.row__more {
  flex: 0 0 auto;
  width: 32px;
  color: var(--hint);
  font-size: 18px;
}
.row.is-done .row__hint { color: var(--accent); }

/* Going back a step: a button, not a line of text in the middle of the screen. */
.step__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--hint);
  font-size: 14px;
}
.step__back:active { opacity: .6; }

/* The button at the bottom of a sheet must not stick to the list's last card. */
.sheet__submit--wide { margin-top: 14px; }
.sheet__body > .rows + .sheet__submit--wide,
.sheet__body > .day__list + .sheet__submit--wide { margin-top: 16px; }

/* An operation taken out of the import: it is visible in the list, but it will not travel. */
.row--pick.is-off .row__title { text-decoration: line-through; opacity: .6; }
.row--pick.is-off .row__hint { opacity: .6; }

/* --- the category suggestion in blocks --- */
.block {
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: var(--r-card);
  background: var(--bg);
}
.block__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  /* The heading sticks to the top while you scroll its category and gives way to the next.
     In a long sorting session there is otherwise no telling what you are looking at: the
     category's name went off the top twenty rows ago. It is stretched to the block's full
     width (the block has side padding of its own), or rows can be seen travelling out from
     under the heading. */
  position: sticky;
  top: 0;
  z-index: 2;
  margin-left: -14px;
  margin-right: -14px;
  padding-left: 14px;
  padding-right: 14px;
  padding-top: 12px;
  margin-top: -12px;
  background: var(--bg);
}
.block__name {
  flex: 1;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
}
/* The dashed underline below the name hints that it is edited right here. */
.block__name { border-bottom: 1px dashed var(--line); }
.block__drop { width: 26px; height: 26px; color: var(--hint); }
.block__drop:active { opacity: .5; }

/* A counterparty row inside a block is the same as in the list, only without a card surface
   of its own: the block is already drawn, and a second frame inside it breaks it up. */
.row--inblock {
  background: none;
  padding: 6px 0;
  border-radius: 0;
}
.row--inblock + .row--inblock { border-top: 1px solid var(--line); }
/* Inside a block there is nothing to paint teal: EVERY row there is sorted, and a colour
   that in the general list means «this one is placed» turns into a background. */
.row--inblock.is-done .row__title { color: var(--text); }
.row--inblock.is-done .row__hint { color: var(--hint); }

/* The assign button sticks to the bottom of the sheet. The ticking happens in a list of a
   hundred and fifty rows, and a button at the end of the flow meant «tick them, then scroll
   back up». While nothing is ticked it is not there at all. */
.assign-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: none;
  padding: 10px 0 6px;
  background: linear-gradient(to top,
    var(--surface) 62%,
    color-mix(in srgb, var(--surface) 70%, transparent) 88%,
    transparent);
}
.assign-bar.is-on { display: block; }

/* What the bank calls this operation: the key does not always make it recognisable. */
.block__count { color: var(--hint); font-size: 13px; }
/* «N more» in a large category: it reveals the remainder in place. */
.block__more {
  width: 100%;
  margin-top: 4px;
  padding: 8px 0;
  color: var(--accent);
  font-size: 13px;
}
.block__more:active { opacity: .5; }

/* A noticeable action in a sheet, but not the main one: the category suggestion. */
.sheet__wide-action {
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: var(--r-field);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
}
.sheet__wide-action:active { opacity: .6; }

/* A chip pushed to the right edge of the row: the currency on the summary. It works while
   the row fits the screen's width — and it does: there are three chips there. */
.chip--end { margin-left: auto; }

/* A menu row in the settings: the icon on the left, the chevron on the right. */
.sheet__row--menu .sheet__rowtitle {
  display: flex;
  align-items: center;
  gap: 11px;
}
.sheet__rowicon {
  flex: 0 0 auto;
  display: flex;
  color: var(--hint);
}
.sheet__rowarrow {
  display: flex;
  opacity: .55;
}

/* The reconciliation with the bank under «Done»: a question, a verdict, a short list. */
.check { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.check__ask, .check__gone { display: flex; flex-direction: column; gap: 8px; }
.check__title { font-size: 16px; font-weight: 600; margin-top: 4px; }
.check__card {
  border-radius: var(--r-card);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  background: color-mix(in srgb, var(--up) 12%, transparent);
  color: var(--up);
}
.check__card.is-ok { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
.check__card.is-wait { background: color-mix(in srgb, #e0a100 16%, transparent); color: #b07d00; }
.check__head { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
.check__text { font-size: 13px; line-height: 1.45; color: var(--text); opacity: .85; }
.check__last {
  border: none; background: none; padding: 6px 0;
  color: var(--hint); font: inherit; font-size: 13px; text-decoration: underline;
  cursor: pointer; align-self: center;
}

/* «✓ checked 23 September» on an account: the balance matched the bank that day. */
.op__checked { color: var(--accent-ink); }


/* «Saved» — the strip that takes the «+» button's place for four seconds (toast.js).
   It slides in from the left along the «+» row and pushes the button off to the right;
   when it goes, the button slides back. A plate of its own — raised, with a soft glow of
   the accent along its edge — so it never melts into the rows under it. */
.saved {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(86px + var(--safe-bottom));
  z-index: 6;
  min-height: 56px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 12px;
  border-radius: 18px;
  background: var(--raised);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent),
    0 0 22px -2px color-mix(in srgb, var(--accent) 30%, transparent),
    0 14px 30px -12px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateX(calc(-100% - 24px));
  pointer-events: none;
  transition: transform .32s cubic-bezier(.2, .8, .25, 1), opacity .2s ease;
}
.saved.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Replaced by a newer strip: this one only fades where it stands, the new one slides in. */
.saved.is-replaced { transition: opacity .15s ease; }
/* A wide screen (css/05-screens.css): the strip keeps the «+» button's corner of the app
   and a phone's width, rather than running the whole window under the bar. */
@media (min-width: 900px) {
  .saved { left: auto; right: var(--frame-edge); width: var(--main-column); }
}
/* The «+» steps aside to the right while the strip holds its row. The rule outranks the
   scroll's own «away» (.fab.is-away): whichever way it left, it comes back the same way
   the classes say once the strip is gone. */
body.has-saved .fab {
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  pointer-events: none;
  transition: transform .28s cubic-bezier(.3, 0, .2, 1), opacity .2s ease;
}
.saved__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-inner);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-size: 18px;
}
.saved__text { flex: 1; min-width: 0; }
.saved__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}
.saved__name {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* The number is the news — it is never cut; a long name yields instead. */
.saved__left {
  flex-shrink: 0;
  color: var(--hint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.saved__left b { color: var(--text); font-weight: 600; }
.saved__left.is-over { color: var(--warm); }
.saved.is-over .saved__now { background: var(--warm); }
.saved__bar {
  position: relative;
  height: 6px;
  margin-top: 8px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--line);
}
.saved__was,
.saved__now {
  position: absolute;
  top: 0; bottom: 0; left: 0;
}
.saved__was { background: var(--accent); }
/* What was just spent — pale, growing into its place: the limit shrinks in sight. */
.saved__now {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: width .6s cubic-bezier(.2, .7, .3, 1) .1s;
}
.saved__undo {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--r-inner);
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
  .saved, .saved__now, .amount__limitnow, body.has-saved .fab { transition: none; }
}