.month-navigation {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-width: 0;
  max-width: 100%;
  color: var(--ink, #20231d);
  font-family: var(--sans, Arial, sans-serif);
}
.month-navigation-label {
  min-width: 0;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.month-navigation-select {
  box-sizing: border-box;
  width: 225px;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line, #d9d9ce);
  border-radius: 4px;
  background-color: var(--paper, #f5f3ed);
  color: var(--ink, #20231d);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}
.month-navigation-select:hover:not(:disabled) { border-color: var(--muted, #6b6d62); }
.month-navigation-select:focus-visible { outline: 2px solid var(--accent, #66704a); outline-offset: 3px; }
.month-navigation-select:disabled { opacity: .55; cursor: default; }
.month-navigation--hero { color: #40566a; }
.month-navigation--hero .month-navigation-select { border-color: #9cb8ce; background-color: #f1f7fb; }
.month-navigation--gallery { margin-bottom: 20px; }
html[lang^="zh"] .month-navigation-label { letter-spacing: 0; }
@media (max-width: 680px) {
  .month-navigation { flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
  .month-navigation-select { width: 100%; font-size: 16px; }
}

/* Month colours remain visible on devices whose native pickers ignore styling. */
body .month-navigation--gallery { display: block; }
.month-navigation-months {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px; margin-top: 10px;
}
.month-navigation-month {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 7px; min-width: 0; min-height: 48px; padding: 12px;
  border: 1px solid var(--month-line); border-radius: var(--control-radius, 11px);
  background: var(--month-bg); color: var(--month-ink);
  font: 500 13px/1.4 var(--sans); text-align: start; cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.month-navigation-month[data-month-value="all"],
.month-navigation-month[data-month-value="unknown"] { grid-column: 1 / -1; }
.month-navigation-name { min-width: 0; overflow-wrap: anywhere; text-transform: capitalize; }
.month-navigation-month[data-month-value="all"] .month-navigation-name,
.month-navigation-month[data-month-value="unknown"] .month-navigation-name { text-transform: none; }
.month-navigation-count {
  flex-shrink: 0; min-width: 20px; padding: 2px 5px; border-radius: 6px;
  background: #ffffff80; text-align: center; font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.month-navigation-month:hover:not(:disabled) { border-color: var(--month-ink); }
.month-navigation-month[aria-pressed="true"] {
  border-color: var(--month-ink); box-shadow: inset 0 0 0 1px var(--month-ink);
}
.month-navigation-month[aria-pressed="true"]::after {
  content: '✓'; position: absolute; inset-inline-end: 4px; top: 1px;
  font-size: 10px; line-height: 1;
}
.month-navigation-month:focus-visible { outline: 2px solid var(--month-ink); outline-offset: 3px; }
.month-navigation-month:disabled { cursor: default; opacity: .5; }
@media (max-width: 850px) { .month-navigation-months { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .month-navigation-months { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .month-navigation-month { padding: 12px 8px; gap: 4px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .month-navigation-month { transition: none; } }