/* Year-by-Year owns the choice between its detailed wide table and the
   selected-year view used where the full column set is not practical. */
.year-by-year-card {
  --year-individual-tint: color-mix(in srgb, var(--color-action-subtle) 88%, var(--color-surface));
  --year-household-tint: color-mix(in srgb, var(--color-action-subtle) 48%, var(--color-surface));
}

.year-toolbar-copy {
  min-width: 0;
}

.year-person-filter {
  width: min(330px, 100%);
  margin-top: var(--space-2);
}

.year-person-hint {
  max-width: 520px;
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.year-mobile-view {
  display: none;
}

.year-by-year-table {
  overflow-x: auto;
}

.year-by-year-table:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

#cashflowTable {
  min-width: 1780px;
}

#cashflowTable .year-age-column {
  position: sticky;
  left: 0;
  min-width: 190px;
  box-shadow: 2px 0 0 var(--color-line);
}

#cashflowTable tbody .year-age-column span {
  display: block;
  max-width: 170px;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  white-space: normal;
}

#cashflowTable thead .year-age-column {
  z-index: 2;
  background: var(--color-action-subtle);
}

#cashflowTable tbody .year-age-column {
  z-index: 1;
  background: var(--color-surface);
}

#cashflowTable tbody tr.highlight-row .year-age-column {
  background:
    linear-gradient(rgba(200, 169, 110, 0.08), rgba(200, 169, 110, 0.08)),
    var(--color-surface);
}

#cashflowTable tbody tr.danger-row .year-age-column {
  background: var(--red-light);
}

#cashflowTable .year-group-heading {
  text-align: center;
  color: var(--color-text);
  border-left: 2px solid var(--color-line);
}

#cashflowTable .year-group-individual,
#cashflowTable .year-header-individual {
  background: var(--year-individual-tint);
}

#cashflowTable .year-group-household,
#cashflowTable .year-header-household {
  background: var(--year-household-tint);
}

#cashflowTable .year-group-start {
  border-left: 2px solid var(--color-line);
}

#cashflowTable .year-phase-cell {
  min-width: 160px;
}

@media (max-width: 1024px) {
  .year-table-toggle,
  .year-by-year-table {
    display: none;
  }

  .year-mobile-view {
    display: block;
  }

  .year-mobile-nav {
    display: grid;
    grid-template-columns: 44px minmax(0, 320px) 44px;
    align-items: end;
    justify-content: center;
    gap: var(--space-3);
  }

  .year-mobile-select {
    margin-bottom: 0;
  }

  .year-mobile-select select {
    width: 100%;
  }

  .year-step-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .year-step-next .action-icon {
    transform: rotate(180deg);
  }

  .year-position {
    margin: var(--space-2) 0 var(--space-5);
    text-align: center;
  }

  .year-detail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-thin);
  }

  .year-detail-heading h3,
  .year-detail-group h4 {
    margin: 0;
  }

  .year-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .year-detail-heading {
    grid-column: 1 / -1;
  }

  .year-detail-group {
    min-width: 0;
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: var(--border-thin);
    border-radius: var(--radius-md);
  }

  .year-detail-group + .year-detail-group {
    padding-left: var(--space-4);
  }

  .year-detail-group-individual {
    background: var(--year-individual-tint);
  }

  .year-detail-group-household {
    background: var(--year-household-tint);
  }

  .year-detail-list {
    margin: var(--space-3) 0 0;
  }

  .year-detail-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 7px 0;
    border-bottom: var(--border-thin);
  }

  .year-detail-list > div:last-child {
    border-bottom: 0;
  }

  .year-detail-list dt {
    color: var(--color-text-muted);
  }

  .year-detail-list dd {
    margin: 0;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: right;
  }

  .year-detail-list dd.positive {
    color: var(--green);
  }

  .year-detail-list dd.negative {
    color: var(--red);
  }

}

@media (max-width: 767px) {
  .year-by-year-card {
    padding: var(--space-4);
  }

  .year-detail {
    display: block;
  }

  .year-detail-group + .year-detail-group {
    margin-top: var(--space-3);
    padding-left: var(--space-4);
  }
}

@media (forced-colors: active) {
  #cashflowTable .year-group-heading,
  #cashflowTable .year-header-individual,
  #cashflowTable .year-header-household,
  .year-detail-group {
    background: Canvas;
    border-color: CanvasText;
  }
}

@media print {
  #cashflowTable .year-group-heading,
  #cashflowTable .year-header-individual,
  #cashflowTable .year-header-household,
  .year-detail-group {
    border-color: var(--color-text);
  }
}
.year-by-year-table table:not(.has-one-offs) .year-one-off-column,
.year-by-year-table table:not(.has-reserve) .year-reserve-column {
  display: none;
}

.year-reserve-detail,
.year-access-note {
  display: block;
  margin-top: 2px;
  color: var(--text-light);
  white-space: nowrap;
}