/* ── Vedic Horā वैदिक होरा — the shared month picker ────────────────────
   One control, adopted by every surface where a reader chooses a MONTH.

   It is deliberately not a slider. A slider is right for a continuous
   quantity a reader nudges; a month is a named, discrete thing that a reader
   AIMS at, and no one can aim a slider at "March 2027" — nor tab to it, nor
   type it, nor read it out loud from a screen reader. So: two real <select>
   elements, real prev/next links either side of them, and a real submit.

   Colour: nothing new. Every value below is an existing token from
   styles.css :root, or the same rgba(255,255,255,…) glass the rest of the
   site is cut from. Behaviour lives in /month-picker.js; the control is
   fully usable, and fully navigable, with that file absent.

   Contract and events: see the header of public/month-picker.js.
   ──────────────────────────────────────────────────────────────────────── */

.mp {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  padding: 14px 18px;
  margin: 0 0 22px;
}

/* ── prev · the month itself · next ──────────────────────────────────────
   One unit, wrapped as one. Left loose in the flex row the two arrows wrap
   onto a different line from the month they step, which reads as three
   unrelated controls. */
.mp-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mp-legend {
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.mp-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mp-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, .42);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.mp-step svg { display: block; width: 18px; height: 18px; }
.mp-step:hover { background: rgba(255, 255, 255, .74); }
.mp-step:active { background: rgba(255, 255, 255, .58); }

/* At a bound the step stays FOCUSABLE and stays announced — it is dimmed and
   marked aria-disabled, not removed. A control that vanishes at the edge of a
   range teaches the reader nothing; one that dims, and is accompanied by the
   sentence in .mp-bound, tells them where the edge is and why. */
.mp-step[aria-disabled="true"] {
  opacity: .4;
  cursor: default;
  background: rgba(255, 255, 255, .22);
}
.mp-step[aria-disabled="true"]:hover { background: rgba(255, 255, 255, .22); }

/* The month on screen, spelled out. Wide enough for the longest Hindi month
   plus a four-digit year so stepping does not shuffle the arrows sideways. */
.mp-current {
  min-width: 9.5em;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
}

/* ── the two selects ─────────────────────────────────────────────────── */
.mp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  color: color-mix(in srgb, var(--ink-faint) 70%, var(--ink));
  font-weight: 600;
}
.mp-field select {
  font: inherit;
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, .5);
  max-width: 15rem;
}
.mp-field select:hover { background: rgba(255, 255, 255, .7); }

/* ── submit ──────────────────────────────────────────────────────────────
   Present, visible and labelled even when script is running, because it is
   what makes the control work with script switched off. With script it is
   simply the second way to commit a choice. */
.mp-go {
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .8);
  color: #16233a;
  font-weight: 650;
  background: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(215, 232, 255, .4) 55%, rgba(180, 210, 255, .3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
              0 8px 18px -12px rgba(40, 60, 95, .3);
}
.mp-go:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 14px 26px -12px rgba(40, 60, 95, .4); }
.mp-go[disabled] { opacity: .5; cursor: progress; }

/* Anything the host wants pushed to the far end of the row (a place select,
   a print button) carries this. */
.mp-end { margin-left: auto; }

/* ── the bound, stated ───────────────────────────────────────────────────
   Shown only when the reader has reached the first or last month the data
   can answer for. The sentences themselves are rendered by the host page
   through the copy layer, in both languages, and are merely revealed here —
   this file and month-picker.js hold no user-facing words at all. */
.mp-bound {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: .8rem;
  color: var(--ink-soft);
}

/* Motion is a courtesy, never information: everything above is legible and
   complete with no transition at all, so the transitions are only added for
   readers who have not asked for less movement. */
@media (prefers-reduced-motion: no-preference) {
  .mp-step,
  .mp-field select,
  .mp-go { transition: background .25s ease, box-shadow .25s ease, opacity .25s ease; }
}

/* ── Small screens ────────────────────────────────────────────────────────
   At 390px the row becomes a column: prev/label/next keeps its own line, each
   select gets a full-width line of its own, and the submit spans the width.
   Nothing shrinks below 44px and nothing scrolls sideways. */
@media (max-width: 560px) {
  .mp { gap: 12px; padding: 14px; }
  .mp-group,
  .mp-field { flex-basis: 100%; }
  .mp-row { justify-content: space-between; }
  .mp-current { flex: 1; min-width: 0; }
  .mp-field select { max-width: none; width: 100%; }
  .mp-go { flex-basis: 100%; }
  .mp-end { margin-left: 0; }

  /* The month and the year are short and belong together, so they share one
     line rather than eating two — the control is otherwise tall enough on a
     phone to push the month it describes off the first screen. Any other field
     the host adds (a city, whose names are long) keeps its own full line.
     Guarded by @supports so an engine without :has() simply keeps the plain
     stack above; nothing depends on this rule for legibility. */
  @supports selector(:has(*)) {
    .mp-field:has(> select[data-mp-month]),
    .mp-field:has(> select[data-mp-year]) { flex: 1 1 0; min-width: 0; flex-basis: 0; }
  }
}

/* The picker is a control, not content: it has no place on a printed sheet. */
@media print {
  .mp { display: none !important; }
}