@layer components{.month{--day-height:6rem;--day-inline-padding:var(--space-m);--day-padding:var(--space-s) var(--day-inline-padding);& .month__grid{inline-size:100%;table-layout:fixed;border-collapse:separate;border-spacing:var(--space-xs)}& .month__weekday{padding-block-end:var(--space-2xs);padding-inline-start:var(--day-inline-padding);color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--size-step--1);font-weight:500;letter-spacing:.04em;text-align:start;text-transform:lowercase;& abbr{text-decoration:none;cursor:help}}& .month__cell{padding:0;vertical-align:middle}& :is(.month__weekday, .month__cell)[data-sum=true]{inline-size:4.5rem;text-align:start;padding-inline-start:var(--space-xs)}& .month__week-result{display:inline-flex;align-items:center;gap:var(--space-3xs);color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--size-step--2);font-variant-numeric:tabular-nums;white-space:nowrap;&[data-met=true]{color:var(--color-text);font-weight:600}& svg{inline-size:.9em;block-size:.9em}}}@media(max-width:48rem){.month{--day-height:4rem;--day-inline-padding:var(--space-xs);--day-padding:var(--space-2xs) var(--day-inline-padding)}}@media(max-width:30rem){.month{--day-height:2.75rem;--day-inline-padding:var(--space-2xs);--day-padding:var(--space-3xs) var(--day-inline-padding);--day-font:var(--size-step--1);& .month__grid{border-spacing:var(--space-3xs)}& :is(.month__weekday, .month__cell)[data-sum=true]{display:none}}}}