/* ==========================================================================
   Mishnah — Calendar generator
   ==========================================================================

   The form itself is on the design system now (.m-form, .m-field, .m-input in
   css/mishnah-ui.css and css/mishnah-form-ui.css), so this file carries only
   what is specific to this page: the two segmented controls, the panels they
   reveal, and the generated-calendar output.

   The whole of the previous file - .radio-hide, .radio-labels, .radio-content,
   .form-heading, .input-instructions and the peach #f1a28d that went with them
   - is gone. Those classes were only ever on this form and on the hadran form,
   and both have been rebuilt.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Segmented control

   Two or three mutually exclusive choices, shown side by side as one control
   rather than as a list of radios. The real <input> stays in the DOM inside
   its <label>, so the arrow keys, the tab order and the screen-reader
   announcement are the browser's, not ours - only the rendering is replaced.
   -------------------------------------------------------------------------- */
.mishnah-ui .m-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.4rem;
  padding: 0.4rem;
  border: 1px solid hsl(var(--m-border));
  border-radius: calc(var(--m-radius) - 2px);
  background-color: hsl(var(--m-muted) / 0.6);
}

.mishnah-ui .m-seg__opt {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0.9rem 1.2rem;
  border-radius: calc(var(--m-radius) - 6px);
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  color: hsl(var(--m-muted-fg));
  cursor: pointer;
  transition: background-color 0.15s var(--m-ease), color 0.15s var(--m-ease),
              box-shadow 0.15s var(--m-ease);
}

.mishnah-ui .m-seg__opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.mishnah-ui .m-seg__opt:hover { color: hsl(var(--m-fg)); }

/* The selected segment lifts out of the track rather than filling with the
   brand colour - it marks which of two equal choices is live, which is a
   quieter job than a primary button. */
.mishnah-ui .m-seg__opt:has(input:checked) {
  background-color: hsl(var(--m-card));
  color: hsl(var(--m-fg));
  font-weight: 600;
  box-shadow: var(--m-shadow-sm);
}

.mishnah-ui .m-seg__opt:has(input:focus-visible) {
  outline: 2px solid hsl(var(--m-ring));
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   2. The panel a segment reveals

   Hidden by default and shown by :has() on the form, so the radio can live
   inside the label it belongs to. The previous rules used a sibling
   combinator, which required every radio to be a sibling of every panel and
   is why they all sat loose at the top of the form.
   -------------------------------------------------------------------------- */
.mishnah-ui .m-seg-panel { display: none; margin-top: 2rem; }

.mishnah-ui .m-cal-form:has(#radio_end_date:checked)       #content-end-date,
.mishnah-ui .m-cal-form:has(#radio_per_day:checked)        #content-per-day,
.mishnah-ui .m-cal-form:has(#radio_select_masechtas:checked) #content-masechtas {
  display: block;
}

/*
 * Fallback for a browser without :has(). Every panel shows, which is a form
 * asking one extra question rather than a form with no answer field at all -
 * and the JS validates whichever radio is actually checked either way.
 */
@supports not selector(:has(*)) {
  .mishnah-ui .m-seg-panel { display: block; }
}


/* --------------------------------------------------------------------------
   3. Output
   -------------------------------------------------------------------------- */
.mishnah-ui .mishnah-calendar-output {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.mishnah-ui .mishnah-calendar-output:empty { display: none; }

.mishnah-ui .mishnah-calendar-output h2 {
  font-size: 2.8rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.mishnah-ui .mishnah-calendar-output p {
  max-width: 52rem;
  color: hsl(var(--m-muted-fg));
}

/* The Lottie loader while the schedule is being built */
.mishnah-ui #lottieContainer {
  width: min(32rem, 80%);
  margin: 0 auto;
}

/*
 * The two download links and Start Over.
 *
 * mishnah-calendar-calc.js writes these with the site's old Bricks button
 * classes, so they are matched on those rather than on .m-btn. Restyling them
 * here keeps the change to one file; the alternative was editing the template
 * literals in the JS and re-testing the AJAX path for a cosmetic fix.
 */
.mishnah-ui .mishnah-calendar-output .brxe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-width: 24rem;
  padding: 1.2rem 2.4rem;
  border: 1px solid transparent;
  border-radius: calc(var(--m-radius) - 2px);
  background-color: hsl(var(--m-brand));
  color: hsl(var(--m-brand-ink));
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s var(--m-ease);
}

.mishnah-ui .mishnah-calendar-output .brxe-button:hover {
  background-color: hsl(var(--m-brand-hover));
  color: hsl(var(--m-brand-ink));
}

.mishnah-ui .mishnah-calendar-output #startOver {
  margin-top: 0.8rem;
  color: hsl(var(--m-muted-fg));
  font-size: 1.5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mishnah-ui .mishnah-calendar-output #startOver:hover { color: hsl(var(--m-fg)); }


/* --------------------------------------------------------------------------
   4. SlimSelect
   The masechta picker is still SlimSelect here. .ss-main is skinned in
   css/mishnah-form-ui.css; this is the one fix that file does not carry.
   -------------------------------------------------------------------------- */
.ss-main .ss-values .ss-value .ss-value-delete svg { min-width: auto; }


@media (max-width: 40rem) {
  .mishnah-ui .m-seg { grid-auto-flow: row; }
  .mishnah-ui .mishnah-calendar-output .brxe-button { min-width: 0; width: 100%; }
}