/* Analyses — the "what changed?" page (Tours 24-27). All bars are plain CSS. */

.analyses-rangebar {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -1rem;
  padding: 0.5rem 1rem 0.75rem;
  background: var(--color-off-white);
}

.analyses-ranges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--color-banner-track);
  border-radius: 11px;
  padding: 4px;
}

.analyses-ranges__seg {
  padding: 7px 0;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-strong);
  text-align: center;
  text-decoration: none;
}

.analyses-ranges__seg--active {
  background: var(--bg-surface);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-resting);
}

/* Two dates side by side, the button on its own line: a single flex row put
   « Appliquer » half off-screen in French. */
.analyses-custom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.analyses-custom input[type="date"] {
  min-width: 0;
}

.analyses-custom input[type="submit"] {
  grid-column: 1 / -1;
}

.analyses-section__title {
  font-size: var(--font-size-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.analyses-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-resting);
}

.analyses-card__label {
  font-size: var(--font-size-body);
  color: var(--text-muted);
}

.analyses-hero {
  font-size: var(--font-size-hero);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text-dark);
  margin-top: -0.5rem;
}

.analyses-compare {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-body);
  color: var(--text-muted);
}

.analyses-compare--quiet {
  color: var(--text-muted);
}

.analyses-compare__chip {
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
}

/* Spending up is the warm signal, down the calm one. */
.analyses-compare__chip--up {
  background: var(--color-danger-20);
  color: var(--color-danger-dark);
}

.analyses-compare__chip--down {
  background: var(--color-success-20);
  color: var(--color-success-dark);
}

.analyses-row {
  border-top: 1px solid var(--border-light);
  padding-top: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.analyses-row__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.analyses-row__label {
  font-size: var(--font-size-body);
  color: var(--text-muted);
}

.analyses-row__value {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}

.analyses-row__value--over {
  color: var(--color-danger-dark);
}

.analyses-row__caption {
  font-size: var(--font-size-label);
  color: var(--text-muted);
}

/* Plan bar: fill clipped at 100%, the prorata tick always visible. */
.analyses-bar {
  position: relative;
  height: 8px;
  background: var(--color-separator);
  border-radius: var(--radius-full);
}

.analyses-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.analyses-bar--over .analyses-bar__fill {
  background: var(--color-danger);
}

.analyses-bar__tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--color-charcoal-black);
  transform: translateX(-1px);
}

.analyses-splitbar {
  display: flex;
  height: 8px;
  background: var(--color-separator); /* the grey remainder = non classé */
  border-radius: var(--radius-full);
  overflow: hidden;
}

.analyses-splitbar__essential {
  display: block;
  height: 100%;
  background: var(--color-primary);
}

.analyses-splitbar__plaisir {
  display: block;
  height: 100%;
  background: var(--color-primary-20);
}

.analyses-moved {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-top: 1px solid var(--border-light);
  padding-top: 0.875rem;
  font-size: var(--font-size-body);
  color: var(--text-muted);
  text-decoration: none;
}

.analyses-moved__amount {
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}

.analyses-empty__title {
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
}

.analyses-empty__message {
  color: var(--text-muted);
}

.analyses-card__title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.analyses-card__count {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
}

.analyses-card--calm {
  color: var(--text-dark);
  font-weight: var(--font-weight-semibold);
}

/* Rhythm: plain flex bars; the future is grey stubs, never a fake zero. */
.analyses-rhythm {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 96px;
}

.analyses-rhythm__bar {
  flex: 1;
  min-height: 4px;
  border-radius: 2px;
  background: var(--color-primary-20);
}

.analyses-rhythm__bar--peak {
  background: var(--color-primary);
}

.analyses-rhythm__bar--future {
  height: 4px !important;
  background: var(--color-separator);
}

.analyses-rhythm__axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-label);
  color: var(--text-muted);
}

.analyses-overrun {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0;
  text-decoration: none;
  color: inherit;
}

.analyses-overrun + .analyses-overrun {
  border-top: 1px solid var(--border-light);
}

.analyses-overrun__name {
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
}

.analyses-overrun__gap {
  font-weight: var(--font-weight-bold);
  color: var(--color-danger-dark);
  font-variant-numeric: tabular-nums;
}

/* Folds: the summary answers without being opened. */
.analyses-fold__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.analyses-fold__summary::-webkit-details-marker {
  display: none;
}

.analyses-fold__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.analyses-fold__title {
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
}

.analyses-fold__sub {
  font-size: var(--font-size-label);
  color: var(--text-muted);
}

.analyses-fold__toggle {
  flex-shrink: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.analyses-fold[open] > .analyses-fold__summary {
  margin-bottom: 0.5rem;
}

.analyses-fold[open] > .analyses-fold__summary .analyses-fold__toggle::after,
details.analyses-fold:not([open]) > .analyses-fold__summary .analyses-fold__toggle::after {
  content: "";
}

/* Slim rows for the folded lists. */
.analyses-slim {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  text-decoration: none;
  color: inherit;
}

.analyses-slim__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-body);
  color: var(--text-dark);
}

.analyses-slim__bar {
  flex: 0 0 5.5rem;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-separator);
  overflow: hidden;
}

.analyses-slim__bar span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.analyses-slim__amount {
  flex-shrink: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}

.analyses-slim__action {
  flex-shrink: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
}

/* Section 2 — between you and others */
.analyses-hero--negative {
  color: var(--color-danger-dark);
}

.analyses-hero--positive {
  color: var(--color-success-dark);
}

.analyses-debt-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.analyses-debt-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-lg);
}

.analyses-debt-chip--in {
  background: var(--color-success-20);
}

.analyses-debt-chip--out {
  background: var(--color-danger-20);
}

.analyses-debt-chip__label {
  font-size: var(--font-size-label);
}

.analyses-debt-chip--in .analyses-debt-chip__label { color: var(--color-success-dark); }
.analyses-debt-chip--out .analyses-debt-chip__label { color: var(--color-danger-dark); }

.analyses-debt-chip__value {
  font-weight: 700;
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}

.analyses-debt-list__title {
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}

.analyses-person {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4rem 0;
  text-decoration: none;
  color: inherit;
}

.analyses-person__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  background: var(--color-primary-20);
  color: var(--color-primary);
}

.analyses-person__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.analyses-person__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.analyses-person__name {
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analyses-person__amount {
  font-weight: var(--font-weight-semibold);
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}

.analyses-person__bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-separator);
  overflow: hidden;
}

.analyses-person__bar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
}

.analyses-person__bar--in span { background: var(--color-success); }
.analyses-person__bar--out span { background: var(--color-danger); }

.analyses-debt-note {
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-20);
  color: var(--color-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

/* Section 3 — what you set aside */
.analyses-streak {
  align-self: flex-start;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  background: var(--color-success-20);
  color: var(--color-success-dark);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
}

.analyses-minimonths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  align-items: end;
  height: 84px;
}

.analyses-minimonths__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 0.3rem;
  height: 100%;
}

.analyses-minimonths__bar {
  border-radius: var(--radius-md);
  background: var(--color-primary-20);
}

.analyses-minimonths__bar--current {
  background: var(--color-primary);
}

.analyses-minimonths__label {
  text-align: center;
  font-size: var(--font-size-label);
  color: var(--text-muted);
}

.analyses-goal {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0;
  text-decoration: none;
  color: inherit;
}

.analyses-goal + .analyses-goal {
  border-top: 1px solid var(--border-light);
}

.analyses-goal__figures {
  font-size: var(--font-size-body);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.analyses-goal__eta {
  font-size: var(--font-size-label);
  color: var(--text-muted);
}

.analyses-card__link {
  margin-left: auto;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
}

.analyses-stack {
  display: flex;
  gap: 2px;
  height: 12px;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.analyses-stack__seg {
  display: block;
  height: 100%;
  background: var(--color-primary);
  min-width: 4px;
}

.analyses-slim--muted .analyses-slim__name,
.analyses-slim--muted .analyses-slim__amount {
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

.analyses-footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-xl);
  background: var(--color-charcoal-black);
  color: var(--color-white);
  text-decoration: none;
}

.analyses-footer-cta__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.analyses-footer-cta__title {
  font-weight: var(--font-weight-bold);
}

.analyses-footer-cta__sub {
  font-size: var(--font-size-label);
  opacity: 0.75;
}

.analyses-allgood {
  border-top: 1px solid var(--border-light);
  padding-top: 0.875rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-success-dark);
}

.analyses-slim__bar {
  position: relative;
  overflow: visible;
}

.analyses-slim__tick {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--color-charcoal-black);
  transform: translateX(-1px);
}

.analyses-slim__chip {
  margin-left: 0.25rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-full);
  background: var(--color-success-20);
  color: var(--color-success-dark);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
}