/* Life HQ — cards, lists, figures, chips, buttons, charts. */

/* ---------- section headers ----------------------------------------------- */

.section {
  margin: var(--sp-6) 0 0;
}
.section:first-of-type { margin-top: var(--sp-2); }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
}

.section__head h2 {
  font-size: var(--text-md);
  letter-spacing: 0.01em;
}

.section__count {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ---------- cards --------------------------------------------------------- */

.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}

.card--flush { padding: 0; overflow: hidden; }

/* The hero panel on Today — the one place with real scale contrast. */
.figure-card {
  position: relative;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.figure-card__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--ink-faint);
}

.figure {
  font-family: var(--font-display);
  font-size: var(--text-figure);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: var(--sp-2) 0 0;
}

.figure--gain { color: var(--gain); }
.figure--loss { color: var(--loss); }

.figure-card__meta {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* ---------- lists --------------------------------------------------------- */

.list { list-style: none; margin: 0; padding: 0; }

.row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
  text-align: left;
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

button.row { appearance: none; font: inherit; color: inherit; cursor: pointer; }
button.row:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-card); }
button.row:active { transform: scale(0.988); }

.row__body { flex: 1; min-width: 0; }

.row__title {
  font-weight: 550;
  letter-spacing: -0.006em;
  overflow-wrap: anywhere;
}

.row__sub {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.row__right {
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.row__amount { font-weight: 600; letter-spacing: -0.01em; }
.row__amount--gain { color: var(--gain); }
.row__amount--loss { color: var(--loss); }

.row--done .row__title { text-decoration: line-through; color: var(--ink-faint); }
.row--flag { border-left: 3px solid var(--flag); }
.row--late { border-left: 3px solid var(--loss); }

/* Timestamp / code gutter on the left of a row. */
.row__stamp {
  flex-shrink: 0;
  width: 3.25rem;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.25;
}
.row__stamp b { display: block; color: var(--ink); font-weight: 600; }

/* ---------- checkbox ------------------------------------------------------ */

.check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  background: none;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.check:active { transform: scale(0.85); }
.check svg { width: 12px; height: 12px; opacity: 0; stroke: var(--accent-ink); stroke-width: 3; }
.check[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); }
.check[aria-pressed='true'] svg { opacity: 1; }

/* ---------- chips & pills ------------------------------------------------- */

.chips {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--sp-1) 0 var(--sp-3);
  margin: 0 calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}
.chip:active { transform: scale(0.95); }
.chip[aria-selected='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.tag {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--paper-sunk);
  color: var(--ink-soft);
}
.tag--gain { background: var(--gain-wash); color: var(--gain); }
.tag--loss { background: var(--loss-wash); color: var(--loss); }
.tag--flag { background: var(--flag-wash); color: oklch(45% 0.11 72); }
.tag--accent { background: var(--accent-wash); color: var(--accent); }

/* ---------- buttons ------------------------------------------------------- */

.btn {
  appearance: none;
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--text-base);
  font-weight: 550;
  transition: all var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(0.96); }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn--ghost { border-color: transparent; background: none; color: var(--ink-soft); }
.btn--danger { color: var(--loss); border-color: transparent; background: var(--loss-wash); }
.btn--block { width: 100%; }
.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); }

/* Floating "add" action, anchored above the tab bar. */
.fab {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--nav-h) + var(--safe-b) + var(--sp-3));
  z-index: 35;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lift);
  transition: transform var(--dur) var(--ease-out-expo);
}
.fab:active { transform: scale(0.9) rotate(90deg); }
.fab svg { width: 26px; height: 26px; stroke-width: 2; }

/* ---------- empty state --------------------------------------------------- */

.empty {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  color: var(--ink-faint);
}
.empty h3 {
  font-size: var(--text-md);
  color: var(--ink-soft);
  margin-bottom: var(--sp-1);
}
.empty p { margin: 0; font-size: var(--text-sm); max-width: 26ch; margin-inline: auto; }

/* ---------- charts -------------------------------------------------------- */

.chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.chart__grid { stroke: var(--rule); stroke-width: 1; }
.chart__zero { stroke: var(--rule-strong); stroke-width: 1; }
.chart__bar-gain { fill: var(--gain); }
.chart__bar-loss { fill: var(--loss); }
.chart__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart__area { fill: var(--accent); opacity: 0.09; }
.chart__label {
  font-size: 10px;
  fill: var(--ink-faint);
  font-family: var(--font-ui);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.stat {
  background: var(--paper-sunk);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
}
.stat__k {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.stat__v {
  font-size: var(--text-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  letter-spacing: -0.015em;
}