/* =========================================================================
   Reports · the Month screen and its charts
   Tokens only. The charts' colours: this month in ink, last month in the
   meta grey, income as a track with a green mark, spending as the fill.
   ========================================================================= */

.month { display: flex; flex-direction: column; }

/* ---- What was spent ----------------------------------------------------- */
.month-hero { display: flex; flex-direction: column; padding-block: var(--s-3) var(--s-2); }

.month-hero__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.month-hero__figure {
  margin-block-start: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: var(--fw-semibold);
  font-stretch: var(--wd-hero);
  line-height: var(--lh-flush);
  letter-spacing: var(--track-figure);
}

.month-hero__figure .money__sym,
.month-hero__figure .money__code {
  font-size: 0.5em;
  font-weight: var(--fw-medium);
  color: var(--text-3);
  margin-inline-end: 0.1em;
}

.month-hero__figure .money__minor { font-size: 0.42em; color: var(--text-3); }

.month-hero__sub { margin: var(--s-3) 0 0; font-size: var(--fs-13); color: var(--text-2); }
.month-hero__sub:empty { display: none; }

.month-offline {
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-1);
  font-size: var(--fs-14);
  color: var(--text-2);
}

/* ---- Sections ------------------------------------------------------------ */
.month-sec { margin-block-start: var(--s-6); min-width: 0; }

.month-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-block-end: var(--s-2);
}

.month-sec__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-section);
  font-weight: var(--fw-semibold);
  font-stretch: var(--wd-title);
}

.month-sec__aside { font-size: var(--fs-12); color: var(--text-3); }

/* Line keys, not boxes: the legend mirrors the mark. */
.month-legend { display: inline-flex; gap: var(--s-3); font-size: var(--fs-12); color: var(--text-2); }

.month-legend__key { display: inline-flex; align-items: center; gap: var(--s-1); }

.month-legend__key::before {
  content: '';
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--key, var(--text-3));
}

.month-legend__key--now { --key: var(--out); }
.month-legend__key--was { --key: var(--text-3); }

/* In and Out mirror their marks: a well with a green top, and a fill. */
.month-legend__key--in::before,
.month-legend__key--out::before { width: 10px; height: 10px; border-radius: 2px; }
.month-legend__key--in::before  { background: var(--in-wash); box-shadow: inset 0 2px 0 var(--in); }
.month-legend__key--out::before { background: var(--out); }

/* The value the chart is pointing at. Values lead, the label follows. */
.month-readout {
  min-height: 1.4em;
  margin: 0 0 var(--s-2);
  font-size: var(--fs-13);
  color: var(--text-3);
}

.month-readout strong { color: var(--text-1); font-weight: var(--fw-semibold); }

.month-chart { width: 100%; min-height: 164px; }

/* ---- The chart marks ------------------------------------------------------- */
.chart { display: block; overflow: visible; touch-action: pan-y; }

.chart__grid { stroke: var(--line-soft); stroke-width: 1; }
.chart__base { stroke: var(--line); stroke-width: 1; }

.chart__tick {
  fill: var(--text-3);
  font-family: var(--font-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.chart__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart__line--now { stroke: var(--out); }
.chart__line--was { stroke: var(--text-3); }
.chart__area { fill: var(--out); opacity: 0.08; }

/* A 2px ring in the surface colour keeps a dot legible where it crosses a line. */
.chart__dot { stroke: var(--bg-0); stroke-width: 2; }
.chart__dot--now { fill: var(--out); }
.chart__dot--was { fill: var(--text-3); }

.chart__crossline { stroke: var(--text-3); stroke-width: 1; }

/* Income is the green well, spending the red fill inside it: the owner's
   rule, expense red and income green, holds in the charts too. */
.chart__track { fill: var(--in-wash); }
.chart__cap { stroke: var(--in); stroke-width: 2; stroke-linecap: round; }
.chart__fill { fill: var(--out); }

/* The picked month is at full strength; the others step back. */
.chart__month { opacity: 0.55; transition: opacity var(--t-fast) var(--ease); }
.chart__month.is-picked { opacity: 1; }
.chart__month.is-picked .chart__tick--month { fill: var(--text-1); font-weight: var(--fw-semibold); }

.chart__hit { fill: transparent; cursor: crosshair; outline: none; }
.chart__hit:focus-visible { stroke: var(--accent); stroke-width: 2; }

/* ---- The table behind each chart ------------------------------------------ */
.month-table { margin-block-start: var(--s-2); }

.month-table summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--accent-text);
  cursor: pointer;
}

.month-table .table-wrap { max-height: 22rem; }

/* ---- Category rows (Against your usual, Was it worth it) ------------------ */
.month-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }

.month-cat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 3.25rem;
  grid-template-areas: 'name value delta' 'bar bar bar';
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  font-size: var(--fs-14);
}

.month-cat__name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.month-cat__value { grid-area: value; text-align: end; }
.month-cat__delta { grid-area: delta; text-align: end; font-size: var(--fs-12); color: var(--text-3); }
.month-cat.is-up .month-cat__delta { color: var(--warn); }

.month-cat__bar {
  grid-area: bar;
  position: relative;
  height: 8px;
  border-radius: var(--r-xs);
  background: var(--bg-3);
}

.month-cat__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--w, 0%);
  border-radius: inherit;
  background: var(--text-2);
}

.month-cat__tick {
  position: absolute;
  inset-block: -3px;
  inset-inline-start: var(--at, 0%);
  width: 2px;
  margin-inline-start: -1px;
  border-radius: 1px;
  background: var(--text-1);
}

/* Not judged is a gap in the data, not a band: a hollow bar. */
.month-cat--band-0 .month-cat__fill { background: transparent; box-shadow: inset 0 0 0 1px var(--text-3); }

/* ---- Could have kept -------------------------------------------------------- */
.month-save {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin-block-start: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-1);
}

.month-save__label { font-size: var(--fs-14); font-weight: var(--fw-medium); }

.month-save__figure {
  font-family: var(--font-display);
  font-size: var(--t-fig);
  font-weight: var(--fw-semibold);
  font-stretch: var(--wd-fig);
  color: var(--saved);
}

.month-save__why { grid-column: 1 / -1; font-size: var(--fs-12); color: var(--text-3); }

/* ---- What the month says ---------------------------------------------------- */
.month-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }

.month-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  border-inline-start: 3px solid var(--note-tone, var(--text-4));
  background: var(--bg-1);
  font-size: var(--fs-14);
}

.month-note__lead { font-weight: var(--fw-semibold); color: var(--text-1); }
.month-note__text { color: var(--text-3); font-size: var(--fs-13); }

.month-note--in   { --note-tone: var(--in); }
.month-note--out  { --note-tone: var(--danger); }
.month-note--warn { --note-tone: var(--warn); }
.month-note--info { --note-tone: var(--biz); }