/* ==========================================================================
   Mishnah — form pages
   ==========================================================================

   The page frame for a single-task form. The controls themselves - .m-input,
   .m-radio-card, .m-chip, .m-error - are primitives in css/mishnah-ui.css,
   because they are used inside dialogs too.

   Also re-skins the third-party widgets these forms embed (the Hebrew
   keyboard, balloon tooltips) and hands Luach Picker the plugin's tokens, so
   none of them look borrowed.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Page frame — one narrow column, nothing competing
   -------------------------------------------------------------------------- */
/*
 * A reading measure, not a page width — a form column stays legible at one
 * width whatever the page does around it. Widen via --m-measure-form.
 */
.mishnah-ui .m-form-page {
  max-width: var(--m-measure-form);
  margin: 0 auto;
  padding-bottom: 6.4rem;
}

/*
 * Create Chart runs wider than a plain form measure. It carries three
 * visibility cards side by side and six seder chips; at 70rem the cards were
 * squeezed to about 220px each.
 */
.mishnah-ui .m-form-page--wide { max-width: var(--m-measure-form-wide); }

.mishnah-ui .m-form-head {
  margin-bottom: 4.4rem;
  text-align: center;
}

.mishnah-ui .m-form-head__title {
  font-size: clamp(2.8rem, 4vw, 3.6rem);
  font-weight: 650;
  letter-spacing: -0.03em;
}

.mishnah-ui .m-form-head__sub {
  margin-top: 0.8rem;
  font-size: 1.8rem;
  color: hsl(var(--m-muted-fg));
}


/* --------------------------------------------------------------------------
   2. Sections
   -------------------------------------------------------------------------- */
.mishnah-ui .m-form-section {
  border: none;
  padding: 0;
  margin: 0 0 4rem;
  min-width: 0;   /* a fieldset defaults to min-content, which breaks grids */
}

.mishnah-ui .m-form-section__legend {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  margin-bottom: 2rem;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--m-muted-fg));
}

/* The rule that runs out from the legend to the edge */
.mishnah-ui .m-form-section__legend::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: hsl(var(--m-border));
}

.mishnah-ui .m-hint--above { margin: -0.5rem 0 1.6rem; }


/* --------------------------------------------------------------------------
   3. Input with a trailing button (the Hebrew keyboard trigger)
   -------------------------------------------------------------------------- */
.mishnah-ui .m-input-wrap { position: relative; }

.mishnah-ui .m-input-wrap .m-input { padding-inline-end: 4.4rem; }

.mishnah-ui .m-input-wrap__btn {
  position: absolute;
  inset-inline-end: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: hsl(var(--m-muted-fg));
  cursor: pointer;
}

.mishnah-ui .m-input-wrap__btn svg { width: 1.8rem; height: 1.8rem; }

/*
 * Shown at every width.
 *
 * It used to be hidden above 48rem, on the reasoning that a desktop has a
 * physical keyboard - but not a Hebrew one, which is the entire reason this
 * exists. The trigger is also the only visible sign that the feature is
 * there, and it is now the only way to open the keyboard deliberately.
 *
 * Where it genuinely is not wanted - an interface already in Hebrew, where
 * the visitor certainly has their own - js/heb-keyboard-init.js does not load
 * it at all, which removes the icon with it.
 */


/* --------------------------------------------------------------------------
   4. Checkbox card (the organisation toggle)
   -------------------------------------------------------------------------- */
.mishnah-ui .m-check-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid hsl(var(--m-border));
  border-radius: var(--m-radius);
  background-color: hsl(var(--m-card));
  cursor: pointer;
  transition: border-color 0.15s var(--m-ease), background-color 0.15s var(--m-ease);
}

.mishnah-ui .m-check-card:hover { border-color: hsl(var(--m-fg) / 0.22); }

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

.mishnah-ui .m-check-card__box {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  border: 1px solid hsl(var(--m-input));
  border-radius: calc(var(--m-radius) - 5px);
  background-color: hsl(var(--m-bg));
  color: transparent;
  transition: background-color 0.15s var(--m-ease), border-color 0.15s var(--m-ease),
              color 0.15s var(--m-ease);
}

.mishnah-ui .m-check-card__box svg { width: 1.2rem; height: 1.2rem; }

.mishnah-ui .m-check-card:has(input:checked) {
  border-color: hsl(var(--m-brand));
  background-color: hsl(var(--m-brand-soft));
}

.mishnah-ui .m-check-card:has(input:checked) .m-check-card__box {
  background-color: hsl(var(--m-brand));
  border-color: hsl(var(--m-brand));
  color: hsl(var(--m-brand-ink));
}

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

.mishnah-ui .m-check-card__body { min-width: 0; flex: 1; }

.mishnah-ui .m-check-card__title {
  display: block;
  font-size: 1.7rem;
  font-weight: 600;
}

.mishnah-ui .m-check-card__desc {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.5rem;
  line-height: 1.55;
  color: hsl(var(--m-muted-fg));
}


/* --------------------------------------------------------------------------
   5. Pill (the "Recommended" tag on a radio card)
   -------------------------------------------------------------------------- */
.mishnah-ui .m-pill {
  padding: 0.1rem 0.7rem;
  border-radius: 999px;
  background-color: hsl(var(--m-brand-soft));
  border: 1px solid hsl(var(--m-brand-border));
  font-size: 1.3rem;
  font-weight: 600;
  color: hsl(var(--m-brand));
}

/* On the selected card the soft tint is already the ground, so the pill
   needs to come forward rather than blend in. */
.mishnah-ui .m-radio-card:has(input:checked) .m-pill {
  background-color: hsl(var(--m-card));
}

/* Private is disabled while a chart is attached to an organisation */
.mishnah-ui .m-radio-card.disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   6. Chip actions
   -------------------------------------------------------------------------- */
.mishnah-ui .m-chip-set__actions {
  display: flex;
  gap: 1.6rem;
  margin-top: 1.4rem;
}


/* --------------------------------------------------------------------------
   7. Actions
   -------------------------------------------------------------------------- */
.mishnah-ui .m-form-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding-top: 2.8rem;
  border-top: 1px solid hsl(var(--m-border));
}

.mishnah-ui .m-form-actions__note {
  margin-inline-start: auto;
  font-size: 1.4rem;
  color: hsl(var(--m-muted-fg));
}

/* The spinner overlays the submit button, so the container must not collapse */
.mishnah-ui .loading-button-container { position: relative; display: inline-block; }


/* --------------------------------------------------------------------------
   7b. Legacy shortcode forms
   --------------------------------------------------------------------------

   edit-profile and organization still render through their original
   shortcodes, whose inputs and buttons were styled by the page builder for a
   very different surrounding. Dropped into .mishnah-ui they came out as a
   second, older-looking form language beside the new one.

   These pull the bare elements onto the design system without touching the
   shortcodes themselves, so those screens read as one interface until they
   are rebuilt properly.

   Scoped to .mishnah-ui, so no form anywhere else on the site is affected.
   -------------------------------------------------------------------------- */
.mishnah-ui input[type="text"]:not(.hcf-calendar-input),
.mishnah-ui input[type="email"],
.mishnah-ui input[type="tel"],
.mishnah-ui input[type="url"],
.mishnah-ui input[type="number"],
.mishnah-ui input[type="password"],
.mishnah-ui input[type="date"],
.mishnah-ui textarea,
.mishnah-ui select {
  width: 100%;
  padding: 0 1.4rem;
  min-height: 4.4rem;
  border: 1px solid hsl(var(--m-input));
  border-radius: calc(var(--m-radius) - 2px);
  background-color: hsl(var(--m-card));
  font-family: inherit;
  font-size: 1.6rem;
  color: hsl(var(--m-fg));
  box-shadow: var(--m-shadow-sm);
}

.mishnah-ui textarea {
  padding-block: 1rem;
  min-height: 10rem;
  line-height: 1.55;
}

.mishnah-ui input:focus,
.mishnah-ui textarea:focus,
.mishnah-ui select:focus {
  outline: none;
  border-color: hsl(var(--m-ring));
  box-shadow: 0 0 0 3px hsl(var(--m-ring) / 0.14);
}

.mishnah-ui label {
  font-size: 1.5rem;
  font-weight: 500;
  color: hsl(var(--m-fg));
}

/*
 * Legacy submit buttons. `.btn--base` and friends are ACSS classes the old
 * shortcodes carry; matching .m-btn--brand here means the two languages agree
 * without editing the shortcode markup.
 */
.mishnah-ui input[type="submit"],
.mishnah-ui button[type="submit"]:not([class*="m-btn"]),
.mishnah-ui .rwmb-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.4rem;
  width: auto;
  padding: 0 2.2rem;
  border: none;
  border-radius: calc(var(--m-radius) - 2px);
  background-color: hsl(var(--m-brand));
  color: hsl(var(--m-brand-ink));
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--m-shadow-sm);
  transition: background-color 0.15s var(--m-ease);
}

.mishnah-ui input[type="submit"]:hover,
.mishnah-ui button[type="submit"]:not([class*="m-btn"]):hover,
.mishnah-ui .rwmb-form button[type="submit"]:hover {
  background-color: hsl(var(--m-brand-hover));
  opacity: 1;
}


/* --------------------------------------------------------------------------
   8. Third-party widgets
   Restyled to the tokens so they stop looking like someone else's controls.
   -------------------------------------------------------------------------- */

/* --- Luach Picker --------------------------------------------------------
   Themed, not styled.

   The library ships a complete look of its own and seventeen --hcf-* custom
   properties as its theming API. This block sets fourteen of them from the
   plugin's tokens and touches nothing else - no padding, no layout, no
   component internals. Every rule about how the calendar looks is still the
   library's; this only tells it which colours to use.

   Why it is needed at all: the vendored build hardcodes its defaults, and
   those defaults happen to BE this palette - #2e77d1, #0a1a2e, #da6648. So
   the picker already matches, and would keep matching right up until someone
   edits the brand block at the top of css/mishnah-ui.css, at which point the
   whole plugin would change colour and the calendar would not. Mapping the
   variables is what keeps that block the single place a reskin happens.

   Specificity: the library declares these on `.hcf-calendar-field` (0-1-0),
   this is `.mishnah-ui .hcf-calendar-field` (0-2-0). It wins on weight, so
   unlike the input reset below it does not depend on load order.

   Three are deliberately left alone. --hcf-grid-line and --hcf-weekday-bg are
   `transparent` by design - a decision about the calendar's own density, not
   a colour of ours - and --hcf-cell-size is geometry.
   ------------------------------------------------------------------------- */
.mishnah-ui .hcf-calendar-field {
  --hcf-primary:       hsl(var(--m-brand));
  --hcf-primary-dark:  hsl(var(--m-ink));
  --hcf-accent:        hsl(var(--m-action));

  --hcf-surface:       hsl(var(--m-card));
  --hcf-surface-muted: hsl(var(--m-muted));
  --hcf-text:          hsl(var(--m-fg));
  --hcf-muted-text:    hsl(var(--m-muted-fg));
  --hcf-border:        hsl(var(--m-border));
  --hcf-rosh-chodesh:  hsl(var(--m-action-soft));

  --hcf-radius:        var(--m-radius);
  --hcf-input-radius:  calc(var(--m-radius) - 2px);
  --hcf-shadow-sm:     var(--m-shadow-sm);
  --hcf-shadow-lg:     var(--m-shadow-lg);
  --hcf-ease:          var(--m-ease);

  /* Not a --hcf-* variable, but the same argument: the library names Inter
     directly, and --m-font is the self-hosted copy with the plugin's own
     fallback stack behind it. */
  font-family: var(--m-font);
}

/*
   The input itself is still untouched.

   That build states margin, padding-inline, line-height, min-height and font
   outright, and selects the field as `.hcf-calendar-field
   input.hcf-calendar-input` (0-2-1) - so Bricks' `input:not([type=submit])`
   (0-1-1) and mishnah-global's `form input[type="text"]` (0-1-2) no longer
   reach it, and the block that used to restate all of that here is gone.

   The `:not(.hcf-calendar-input)` exclusions stay - in the selector further up
   and in css/mishnah-global.css. Ours score 0-2-1 too, which ties the library,
   and a tie is settled by load order that nothing guarantees.
*/

/* --- Hebrew keyboard (Keybrew) ------------------------------------------
   Themed, not styled - the same arrangement as Luach Picker above. The
   library exposes --keybrew-* tokens on .keybrew and this maps them onto the
   plugin's; nothing here touches its layout, keys or panel.

   Not scoped to .mishnah-ui, and it cannot be: Keybrew appends its panel to
   <body> so it can float beside a field without being clipped, which puts it
   outside our wrapper. Every declaration is a variable on the library's own
   root class, so the blast radius is the keyboard and nothing else.
   ------------------------------------------------------------------------- */
.keybrew {
  --keybrew-primary:       hsl(var(--m-brand, 213 64% 50%));
  --keybrew-primary-dark:  hsl(var(--m-ink, 213 64% 11%));
  --keybrew-accent:        hsl(var(--m-action, 12 66% 57%));
  --keybrew-surface:       hsl(var(--m-card, 0 0% 100%));
  --keybrew-surface-muted: hsl(var(--m-muted, 210 8% 96%));
  --keybrew-text:          hsl(var(--m-fg, 210 10% 8%));
  --keybrew-muted-text:    hsl(var(--m-muted-fg, 210 6% 44%));
  --keybrew-border:        hsl(var(--m-border, 210 8% 90%));
  --keybrew-radius:        var(--m-radius, 10px);
  --keybrew-key-radius:    calc(var(--m-radius, 10px) - 4px);
  --keybrew-shadow-sm:     var(--m-shadow-sm, 0 1px 2px rgb(15 23 42 / 0.05));
  --keybrew-shadow-lg:     var(--m-shadow-lg, 0 18px 42px -14px rgb(15 23 42 / 0.24));
}

/*
 * The fallbacks above are not decoration. The panel is a child of <body>, so
 * --m-* is only in scope if something above it declares them - true today
 * because they are on .mishnah-ui and Keybrew inherits nothing from it. Each
 * fallback is the library's own default, so the keyboard looks right either
 * way.
 *
 * The Hebrew face for the keys themselves, which is ours to say.
 */
.keybrew [data-key] { font-family: var(--mishnah-font-text, inherit); }

/* --- balloon.css tooltips ------------------------------------------------ */
.mishnah-ui .tooltip-icon {
  margin: 0 0 0 0.4rem;
  vertical-align: -3px;
  opacity: 0.55;
  cursor: help;
  transition: opacity 0.15s var(--m-ease);
}

.mishnah-ui .tooltip-icon:hover { opacity: 1; }

/* --- SlimSelect, where it is still used ---------------------------------- */
.mishnah-ui .ss-main {
  border: 1px solid hsl(var(--m-input));
  border-radius: calc(var(--m-radius) - 2px);
  background-color: hsl(var(--m-card));
  padding: 0.6rem 1rem;
  margin-bottom: 0;
  box-shadow: var(--m-shadow-sm);
}


/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  .mishnah-ui .m-form-actions { flex-direction: column; align-items: stretch; }
  .mishnah-ui .m-form-actions .m-btn { width: 100%; }
  .mishnah-ui .loading-button-container { display: block; }
  .mishnah-ui .m-form-actions__note { margin-inline-start: 0; text-align: center; }
}