.month-comparison { border: 1px solid #dedbd1; border-radius: 1rem; background: #fffdf7; color: #29263e; min-width: 0; overflow: hidden; container: month-comparison / inline-size; }
.month-comparison > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; cursor: pointer; list-style: none; background: #29263e; color: #fffdf7; min-height: 2.75rem; }
.month-comparison > summary::-webkit-details-marker { display: none; }
.month-comparison > summary:focus-visible { outline: 3px solid #c2a447; outline-offset: -3px; }
.month-comparison > summary > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.month-comparison > summary strong { font-size: 1.125rem; }
.month-comparison > summary small { font-size: .75rem; opacity: .85; }
.month-comparison-toggle { font-size: 1.5rem; line-height: 1; }
.month-comparison[open] .month-comparison-toggle { font-size: 0; }
.month-comparison[open] .month-comparison-toggle::after { content: '−'; font-size: 1.5rem; }
.month-comparison-body { padding: .625rem 1rem .75rem; }
.month-comparison-ranges { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .5rem; margin: 0 0 .375rem; font-size: .75rem; color: #625d54; }
.month-comparison dl { margin: 0; }
.month-comparison-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .8fr); align-items: center; column-gap: .75rem; padding: .5rem 0; border-top: 1px solid #e7e2d5; }
.month-comparison dt { font-size: .875rem; font-weight: 600; }
.month-comparison-value { margin: 0; text-align: right; min-width: 0; }
.month-comparison-value strong { display: block; font-variant-numeric: tabular-nums; font-size: .9375rem; overflow-wrap: anywhere; }
.month-comparison-value-label, .month-comparison-value small { display: block; font-size: .6875rem; color: #625d54; line-height: 1.4; }
.month-comparison [data-trend='up'] { color: #236145; }
.month-comparison [data-trend='down'] { color: #a33d37; }
.month-comparison-note { margin: .375rem 0 0; color: #625d54; font-size: .6875rem; line-height: 1.45; }
@container month-comparison (max-width: 32rem) {
  .month-comparison-body { padding-inline: .75rem; }
  .month-comparison-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .75fr); gap: .25rem .5rem; }
  .month-comparison dt { grid-column: 1 / -1; }
  .month-comparison-value { text-align: left; }
  .month-comparison-value:last-child { text-align: right; }
  .month-comparison-value strong { font-size: .8125rem; }
  .month-comparison-ranges > span[aria-hidden] { display: none; }
}