/* The Spending page (#spending, js/spending.js): a month's spending by category group,
   and what came in, went out and was kept, a card per currency. */

/* The pie's colours, by slice (data-tone): the five largest groups each their own, then
   the rest together in grey. Checked for colour-blind readers as neighbours around the
   ring, the last beside the first, on each theme's surface; the light ones that are faint
   against it always have their name and share beside them in the key. The bars of the
   list below wear the same colour as their group's slice. */
:root {
  --spend-1: #1baf7a;
  --spend-2: #2a78d6;
  --spend-3: #eda100;
  --spend-4: #6250d6;
  --spend-5: #eb6834;
  --spend-rest: var(--ink-3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --spend-1: #199e70;
    --spend-2: #3987e5;
    --spend-3: #c98500;
    --spend-4: #9085e9;
    --spend-5: #d95926;
  }
}

:root[data-theme="dark"] {
  --spend-1: #199e70;
  --spend-2: #3987e5;
  --spend-3: #c98500;
  --spend-4: #9085e9;
  --spend-5: #d95926;
}

[data-tone="1"] { --tone: var(--spend-1); }
[data-tone="2"] { --tone: var(--spend-2); }
[data-tone="3"] { --tone: var(--spend-3); }
[data-tone="4"] { --tone: var(--spend-4); }
[data-tone="5"] { --tone: var(--spend-5); }
[data-tone="rest"] { --tone: var(--spend-rest); }
[data-tone="none"] { --tone: var(--line-strong); }

.spending-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 46rem;
  margin: 0 auto;
}

.spending-top {
  display: flex;
}

.spending-back {
  gap: var(--space-1);
  padding-left: var(--space-2);
}

.spending-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.spending-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.spending-months {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.spending-month {
  min-width: 9.5rem;
  text-align: center;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.spending-month-btn {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.spending-month-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.spending-through {
  margin: calc(-1 * var(--space-2)) 0 0;
  font-size: var(--fs-meta);
  color: var(--ink-2);
}

.spending-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.spending-total-value {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink-figure);
  font-variant-numeric: tabular-nums;
}

/* With anything left out: the whole of the month's spending, and what was left out. */
.spending-total-whole {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-meta);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* The total's label, and beside it the button that opens the categories to keep, tinted
   while the totals exclude any. */
.spending-total-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.spending-total-head .spending-total-label {
  margin: 0;
}

.spending-categories-btn {
  gap: var(--space-1);
}

.spending-categories-btn[data-excluding] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

/* The pie, its total in the middle, and its key beside it. */
.spending-chart {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0 0 var(--space-4);
}

.spending-pie {
  position: relative;
  flex: none;
  width: 148px;
  height: 148px;
}

.spending-pie-svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.spending-slice {
  fill: none;
  stroke: var(--tone);
  stroke-width: 18;
  transition: opacity var(--dur) ease-out;
}

.spending-pie-centre {
  position: absolute;
  inset: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}

.spending-pie-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-label);
  color: var(--ink-3);
}

.spending-pie-value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.spending-key {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1;
  max-width: 20rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A line of the key opens its group in the list below (showSpendingGroup). */
.spending-key-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-2);
  width: calc(100% + 2 * var(--space-2));
  padding: var(--space-1) var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: var(--fs-body-sm);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: opacity var(--dur) ease-out;
}

.spending-key-item:hover .spending-key-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.spending-key-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.spending-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--tone);
}

.spending-key-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spending-key-pct {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Under the pointer, a slice or its line in the key: the others step back. */
.spending-chart[data-active] [data-slice]:not(.is-active) {
  opacity: 0.3;
}

/* In, out and kept, side by side while they fit, a large amount moving onto a line of
   its own rather than out of the card. */
.spending-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.spending-flow dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.spending-flow dd {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.spending-groups,
.spending-cats {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A group: its name, share and amount over a bar of its share of the month. */
.spending-group-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
  grid-template-areas:
    "chev name pct amount"
    ". bar bar bar";
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
}

button.spending-group-row {
  cursor: pointer;
}

button.spending-group-row:hover .spending-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.spending-group-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.spending-chevron {
  grid-area: chev;
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  transition: transform var(--dur) ease-out;
}

.spending-group-row[aria-expanded="true"] .spending-chevron {
  transform: rotate(90deg);
}

.spending-group-row .spending-name {
  grid-area: name;
  font-weight: 600;
}

.spending-pct {
  grid-area: pct;
  font-size: var(--fs-meta);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.spending-group-row .spending-amount {
  grid-area: amount;
}

.spending-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.spending-bar {
  grid-area: bar;
  display: block;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--sunk);
  overflow: hidden;
}

.spending-bar-fill {
  display: block;
  height: 100%;
  width: calc(var(--share, 0) * 100%);
  border-radius: inherit;
  background: var(--tone, var(--accent));
}

/* A group's categories, under it and indented to its name. */
.spending-cats {
  padding: var(--space-1) 0 var(--space-2) calc(20px + var(--space-3));
  border-bottom: 1px solid var(--line);
}

.spending-cat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
}

a.spending-cat-row:hover {
  background: var(--sunk);
}

.spending-cat-plain {
  color: var(--ink-2);
}

.spending-cat-all {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2);
  font-size: var(--fs-body-sm);
  color: var(--accent);
}

.spending-cat-row:focus-visible,
.spending-cat-all:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.spending-empty {
  margin: 0;
  color: var(--ink-2);
}

/* What is left out of the totals, after the groups. */
.spending-left-out-head {
  margin: var(--space-6) 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.spending-left-out {
  list-style: none;
  margin: 0 calc(-1 * var(--space-2));
  padding: 0;
}

.spending-left-out .spending-cat-row {
  color: var(--ink-2);
}

.spending-of {
  margin-left: var(--space-1);
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

/* The sheet that chooses what to leave out. */
.spending-lo-modal {
  max-width: 460px;
}

.spending-lo-modal .modal-header {
  margin-bottom: var(--space-3);
}

.spending-lo-intro {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-body-sm);
  color: var(--ink-2);
}

.spending-lo-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.spending-lo-search {
  flex: 1;
  min-width: 0;
}

.spending-lo-keep-all {
  flex: none;
}

.spending-lo-none {
  margin: var(--space-3) 0;
  font-size: var(--fs-body-sm);
  color: var(--ink-2);
}

.spending-lo-group {
  margin: 0;
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.spending-lo-group:last-child {
  border-bottom: 0;
}

.spending-lo-head {
  font-weight: 600;
}

.spending-lo-sub {
  padding-left: var(--space-4);
  color: var(--ink-2);
}

.spending-lo-sub:has(.switch-input:disabled) {
  cursor: default;
}

@media (pointer: coarse) {
  .spending-month-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .spending-cat-row,
  .spending-cat-all {
    min-height: 44px;
  }

  .spending-key-item {
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .spending-currency {
    padding: var(--space-4);
  }

  .spending-chart {
    gap: var(--space-4);
  }

  .spending-pie {
    width: 124px;
    height: 124px;
  }

  .spending-pie-centre {
    inset: 20px;
  }

  .spending-month {
    min-width: 8rem;
  }
}