.r32-solar-lunar,
.r32-lunar-leap-month {
  display: grid;
  gap: 1rem;
}

.r32-lunar-intro {
  display: grid;
  gap: .35rem;
}

.r32-lunar-intro p,
.r32-lunar-summary,
.r32-lunar-status {
  margin: 0;
}

.r32-lunar-intro p:not(.r32-lunar-eyebrow) {
  color: var(--muted-text, #667085);
}

.r32-lunar-eyebrow {
  margin: 0;
  color: var(--accent, #2563eb);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.r32-lunar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.r32-lunar-grid label {
  display: grid;
  min-inline-size: 0;
  gap: .4rem;
  color: var(--text, #172033);
  font-weight: 650;
}

.r32-lunar-grid input,
.r32-lunar-grid select {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  border: 1px solid color-mix(in srgb, var(--border, #d0d5dd) 85%, transparent);
  border-radius: .75rem;
  padding: .68rem .75rem;
  background: var(--surface, #fff);
  color: var(--text, #172033);
  font: inherit;
}

.r32-lunar-check {
  align-content: end;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem !important;
  padding-block: .68rem;
}

.r32-lunar-check input {
  inline-size: auto;
}

.r32-lunar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.r32-lunar-status {
  min-block-size: 1.4rem;
}

.r32-lunar-summary {
  color: var(--text, #172033);
  font-weight: 700;
}

.r32-lunar-output {
  box-sizing: border-box;
  min-block-size: 7rem;
  max-block-size: 24rem;
  margin: 0;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--border, #d0d5dd) 80%, transparent);
  border-radius: .85rem;
  padding: .85rem;
  background: color-mix(in srgb, var(--surface, #fff) 92%, var(--accent, #2563eb));
  color: var(--text, #172033);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: .84rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 720px) {
  .r32-lunar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .r32-lunar-actions > * {
    flex: 1 1 8rem;
  }
}

@media (max-width: 460px) {
  .r32-lunar-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r32-solar-lunar *,
  .r32-solar-lunar *::before,
  .r32-solar-lunar *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}