.month-picker {
  display: block;
  position: relative;
  margin-top: var(--space-2, 8px);
  max-width: 360px;
}

/* Keep the named input validatable while exposing one accessible control. */
.month-picker .month-picker-value {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.month-picker .month-picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  width: 100%;
  min-height: var(--control-height, 44px);
  padding: 10px var(--space-3, 12px);
  border: 1px solid var(--control-border, #7b8794);
  border-radius: var(--control-radius, 8px);
  background: var(--surface, #fff);
  color: var(--text, #1b1f23);
  text-align: left;
  font: inherit;
  font-weight: 400;
  line-height: 1.375;
}

.month-picker-caption { min-width: 0; overflow-wrap: anywhere; }
.month-picker .month-picker-empty { color: var(--muted, #64717d); }
.month-picker-icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.month-picker-trigger .month-picker-icon { color: var(--muted, #64717d); }
.month-picker .month-picker-trigger[aria-expanded="true"] { border-color: var(--primary, #315f7d); }
.month-picker .month-picker-trigger[aria-invalid="true"] { border-color: var(--danger, #b3261e); }

.month-picker-popup {
  box-sizing: border-box;
  position: fixed;
  width: min(320px, calc(100vw - 16px));
  padding: var(--space-3, 12px);
  border: 1px solid var(--border, #d9e0e6);
  border-radius: var(--control-radius, 8px);
  background: var(--surface, #fff);
  color: var(--text, #1b1f23);
  box-shadow: var(--shadow, 0 4px 18px rgba(20, 32, 44, .06));
  z-index: 1000;
  overflow: auto;
  font: inherit;
  font-weight: 400;
}
.month-picker-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-3, 12px);
}
.month-picker-year { font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.month-picker-popup button {
  min-height: var(--control-height, 44px);
  padding: var(--space-2, 8px);
  border: 1px solid transparent;
  border-radius: var(--control-radius, 8px);
  background: transparent;
  color: var(--text, #1b1f23);
  font: inherit;
  line-height: 1.375;
}
.month-picker-nav button { min-width: var(--control-height, 44px); }
.month-picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1, 4px); }
.month-picker-popup .month-picker-cell { min-width: 0; font-size: var(--text-small, .875rem); }
.month-picker-popup .month-picker-cell[aria-pressed="true"] {
  background: var(--primary, #315f7d);
  color: var(--surface, #fff);
  font-weight: 650;
}
.month-picker-popup .month-picker-clear {
  width: 100%;
  margin-top: var(--space-3, 12px);
  border-top-color: var(--border, #d9e0e6);
  border-radius: 0;
  color: var(--muted, #64717d);
  font-size: var(--text-small, .875rem);
}
.month-picker-error { color: var(--danger, #b3261e); font-size: var(--text-small, .875rem); margin: var(--space-3, 12px) 0 0; }

/* Neutralize the shared primary-button hover on touch browsers too. */
.month-picker .month-picker-trigger:hover:not(:disabled) { background: var(--surface, #fff); }
.month-picker-popup button:hover:not(:disabled) { background: transparent; }
.month-picker-popup .month-picker-cell[aria-pressed="true"]:hover { background: var(--primary, #315f7d); }

@media (hover: hover) {
  .month-picker .month-picker-trigger:hover:not(:disabled) { background: var(--surface-soft, #f6f8fa); }
  .month-picker .month-picker-trigger:hover:not(:disabled):not([aria-invalid="true"]) { border-color: var(--primary, #315f7d); }
  .month-picker-popup button:hover:not(:disabled) { background: var(--surface-soft, #f6f8fa); }
  .month-picker-popup .month-picker-cell[aria-pressed="true"]:hover { background: var(--primary-dark, #24485f); }
}
.month-picker .month-picker-trigger:active:not(:disabled),
.month-picker-popup button:active:not(:disabled) { background: var(--surface-soft, #f6f8fa); }
.month-picker-popup .month-picker-cell[aria-pressed="true"]:active { background: var(--primary-dark, #24485f); }
.month-picker-popup button:focus-visible, .month-picker .month-picker-trigger:focus-visible { outline: 2px solid var(--focus-ring, #315f7d); outline-offset: 3px; }
.month-picker-popup button:disabled, .month-picker .month-picker-trigger:disabled { opacity: .55; cursor: not-allowed; }
.month-picker .month-picker-trigger:disabled { background: var(--surface-soft, #f6f8fa); }
.month-picker-popup[hidden], .month-picker-clear[hidden], .month-picker-error[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .month-picker-trigger, .month-picker-popup button { transition: none; }
}