/* Analytics: the bars by month, account growth, the calendar, a day's card.
   One of the stylesheets index.html loads IN ORDER: a rule here may rely on coming
   after the files before it. */

/* --- analytics: the bars by month --- */
.chart--flat { padding-top: 0; }

/* --- analytics: account growth --- */
.growth {
  margin: 14px 16px 20px;   /* the chart and the list of accounts are two blocks, not one */
  padding: 14px 16px 12px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--edge), var(--lift);
}
.growth:empty { display: none; }
.growth__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* The chip sits on the card, so it takes the page's colour to read as a button. */
.growth__pick { background: var(--bg); max-width: 62%; }
.growth__amount { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.growth__change { margin-top: 8px; font-size: 12px; color: var(--hint); }
.growth__change.is-up { color: var(--accent-ink); }
.growth__change.is-down { color: var(--warm); }
.growth__periods { display: flex; gap: 4px; margin-top: 8px; padding: 3px; border-radius: 12px; background: var(--bg); }
.growth__period { flex: 1; padding: 6px 2px; border-radius: 9px; font-size: 12px; color: var(--hint); }
.growth__period.is-active { background: var(--surface); box-shadow: 0 1px 3px color-mix(in srgb, #000 20%, transparent); color: var(--text); font-weight: 700; }
.growth__chart { display: block; width: 100%; height: 142px; margin-top: 6px; touch-action: none; overflow: visible; }
.growth__area { fill: color-mix(in srgb, var(--accent) 15%, transparent); }
.growth__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.growth__guide { stroke: var(--hint); stroke-width: 1; stroke-dasharray: 3 3; opacity: .65; }
.growth__dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }

/* The chart's choice: a group per currency, another currency dimmed. */
.tune__group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 4px 8px;
}
.tune__groupname { font-size: 15px; font-weight: 700; }
.tune__all { padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--accent-ink); }
.tune__list.is-other { opacity: .4; }

/* The top padding is for the cog: it floats on the left over the screen, and the bars would
   otherwise run straight underneath it. */
.bars { position: relative; padding: calc(56px + var(--safe-top)) 0 4px; }

/* The calendar's period name is hidden: the month is already written under the bars, and
   two captions about the same thing on one screen only confuse. Swiping the calendar still
   flicks through the months. */
.chart--flat .chart__period { display: none; }

/* «■ income ■ spending» — what the two shapes mean, once, in the cog's row. */
.bars__key {
  position: absolute;
  top: calc(20px + var(--safe-top));
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 13px;
  color: var(--hint);
  pointer-events: none;
}
.bars__keyitem { display: inline-flex; align-items: center; gap: 5px; }
.bars__swatch { width: 10px; height: 10px; border-radius: 3px; }
.bars__swatch.is-income { background: color-mix(in srgb, var(--text) 16%, transparent); }
.bars__swatch.is-expense { background: var(--accent); }

.bars__plot { position: relative; }

.bars__strip {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  /* The strip is wider than the screen and scrolls sideways — the gesture is its own, not
     the sheet's and not the month deck's (see data-scroll-x in sheet.js and deck.js). */
  overscroll-behavior-x: contain;
}
.bars__strip::-webkit-scrollbar { display: none; }
/* There are fewer months than fit on the screen, so they are centred. Two bars pressed to
   the left edge in the middle of an empty field looked like a chart that had been cut off.
   Only for a short strip: centring a long one would break the scroll. */
.bars__strip.is-few { justify-content: center; overflow-x: visible; }

.bars__col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 0 4px;
  border-radius: var(--r-inner);
}
.bars__col:active { opacity: .6; }
.bars__svg { width: 46px; height: 92px; overflow: visible; }
/* The income is a pale backdrop, the spending a bar inside it: pale for the other months,
   the full accent for the chosen one. */
.bars__in { fill: color-mix(in srgb, var(--text) 9%, transparent); }
.bars__out { fill: color-mix(in srgb, var(--accent) 42%, transparent); }
.bars__out.is-beyond { fill: color-mix(in srgb, var(--warm) 50%, transparent); }
.bars__col.is-current .bars__in { fill: color-mix(in srgb, var(--text) 14%, transparent); }
.bars__col.is-current .bars__out { fill: var(--accent); }
.bars__col.is-current .bars__out.is-beyond { fill: var(--warm); }
.bars__label {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--hint);
}
/* It is THE LABEL that is highlighted, not the whole column: a full-height column read as a
   hole in the strip and argued with the bars themselves. A filled capsule, as the chosen
   tab is — bold type alone was too quiet to say «this is the month you are looking at». */
.bars__col.is-current .bars__label {
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
}
/* The year under the strip's first month and under every January. */
.bars__year { min-height: 14px; margin-top: -4px; font-size: 11px; color: var(--hint); }

/* Three cards under the strip: income, spending, and what was put aside. */
.bars__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px 0;
}
.bars__card {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--edge), var(--lift);
}
/* The cards are all alike; only the saved one's NUMBER speaks — the accent when something
   was put aside, the bars' warm colour when the month went into the red. */
.bars__cap { font-size: 12px; color: var(--hint); }
.bars__num {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.bars__card.is-saved .bars__num { color: var(--accent-ink); }
.bars__card.is-over .bars__num { color: var(--warm); }
.bars__sub { margin-top: 1px; font-size: 12px; color: var(--hint); font-variant-numeric: tabular-nums; }
.bars__month { grid-column: 1 / -1; font-size: 15px; font-weight: 700; padding: 0 2px; }
.bars__none { grid-column: 1 / -1; text-align: center; font-size: 13px; color: var(--hint); }

/* --- analytics: the calendar --- */
/* The calendar lives in a card of its own, titled — as the month's cards above it do. */
/* The slide already stands 16px in from the edges — the card takes its full width. */
.cal__card {
  margin: 12px 0 0;
  padding: 12px 8px 10px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--edge), var(--lift);
}
.cal__cap {
  margin: 0 6px 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal__wd {
  padding-bottom: 2px;
  text-align: center;
  font-size: 11px;
  color: var(--hint);
}
.cal__wd.is-off { opacity: .55; }
.cal__pad { min-height: 46px; }

.cal__day {
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  padding: 4px 1px;
  border-radius: var(--r-inner);
  background: color-mix(in srgb, var(--text) 5%, var(--surface));
  line-height: 1.1;
}
.cal__day.is-empty { background: transparent; }
.cal__day.is-off:not(.is-empty) { background: color-mix(in srgb, var(--text) 3%, var(--surface)); }
.cal__day.is-off .cal__num { opacity: .7; }
.cal__day.is-today { outline: 1.5px solid var(--accent); }
.cal__day:active { opacity: .6; }
.cal__num { font-size: 12px; color: var(--hint); }
.cal__day:not(.is-empty) .cal__num { color: var(--text); }
/* Money out in the bars' warm colour, money in in the accent — the same pair as the
   month's bars above. How dear a day was (spendingLevels in analytics.js) is told by the
   strength of that colour alone: pale for an ordinary day, full and bold for the month's
   dearer ones. A plate under the biggest ones read as a button, not a number. */
.cal__out {
  font-size: 11px;
  color: color-mix(in srgb, var(--warm) 60%, var(--hint));
  font-variant-numeric: tabular-nums;
}
.cal__out.is-notable,
.cal__out.is-huge { color: var(--warm); font-weight: 700; }
.cal__in { font-size: 11px; color: var(--accent-ink); font-weight: 600; }

/* --- a day's card --- */
.day__sums {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: var(--r-card);
  background: var(--bg);
}
.day__fact { flex: 1; text-align: center; }
.day__cap { font-size: 11px; color: var(--hint); }
.day__num { font-size: 17px; font-weight: 700; }
.day__num.is-income { color: var(--accent-ink); }
.day__list { display: flex; flex-direction: column; gap: 6px; }