/* ==========================================================================
   Mishnah — chart screens
   ==========================================================================

   Shared by the owner's Manage Chart screen and the public chart page. Both
   render the same seder groups and masechta cards from the same data, so those
   live here rather than in either one.

   Loads after css/mishnah-ui.css and uses its tokens and primitives.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Page head
   -------------------------------------------------------------------------- */
.mishnah-ui .m-manage-head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.mishnah-ui .m-status-set {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   2. Summary card
   -------------------------------------------------------------------------- */
.mishnah-ui .m-summary { padding: 2.4rem; }

/*
 * Manage Pledge's version. That page's card carries four facts - a name, a
 * date, an occasion, one button - where Manage Chart's carries progress bars
 * and a reminder line too, so at the full size it was mostly empty room.
 */
.mishnah-ui .m-summary--compact { padding: 2rem 2.4rem; }

.mishnah-ui .m-summary--compact .m-summary__name { font-size: 2.4rem; }

.mishnah-ui .m-summary--compact .m-meta-grid { margin-top: 1.6rem; }

.mishnah-ui .m-summary--compact .m-summary__actions {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
}

.mishnah-ui .m-summary__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 3.2rem;
}

.mishnah-ui .m-summary__label {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--m-muted-fg));
}

.mishnah-ui .m-summary__name {
  font-size: 2.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  unicode-bidi: isolate;

  /*
   * A chart title is arbitrary text at 25px bold, and a grid item's default
   * min-width is auto - so a long one with no space in it could not shrink
   * to its track and pushed the whole page sideways on a phone. That is the
   * horizontal scroll on Manage Chart.
   */
  overflow-wrap: anywhere;
}

/*
 * Same reason, one level up: the grid item has to be allowed to be narrower
 * than its contents before the wrapping above can take effect.
 */
.mishnah-ui .m-summary__who { min-width: 0; }

.mishnah-ui .m-summary__he,
.mishnah-ui .m-meta-grid__item dd { overflow-wrap: anywhere; }

.mishnah-ui .m-summary__he {
  margin-top: 0.2rem;
  font-size: 2rem;
  color: hsl(var(--m-muted-fg));
  font-family: var(--m-font-he);
  unicode-bidi: isolate;
}

.mishnah-ui .m-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 2.4rem;
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--m-border));
}

.mishnah-ui .m-meta-grid__item--full { grid-column: 1 / -1; }

.mishnah-ui .m-meta-grid dt {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--m-muted-fg));
}

.mishnah-ui .m-meta-grid dd {
  margin-top: 0.4rem;
  font-size: 1.7rem;
  font-weight: 500;
}

/* An overdue siyum is the one thing on this card the owner may need to act
   on, so it is the one thing coloured. */
.mishnah-ui .m-meta-grid dd.is-past { color: hsl(var(--m-danger)); }

.mishnah-ui .m-meta-grid__he {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.6rem;
  font-weight: 400;
  color: hsl(var(--m-muted-fg));
  font-family: var(--m-font-he);
  unicode-bidi: isolate;
}

.mishnah-ui .m-meta-grid .m-hint { margin-top: 0.2rem; }

.mishnah-ui .m-seder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.mishnah-ui .m-seder-chip {
  padding: 0.2rem 0.8rem;
  border: 1px solid hsl(var(--m-border));
  border-radius: 999px;
  background-color: hsl(var(--m-muted));
  font-size: 1.3rem;
  font-weight: 500;
  color: hsl(var(--m-muted-fg));
}

/* --- Progress panel ------------------------------------------------------ */
.mishnah-ui .m-summary__progress {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  border: 1px solid hsl(var(--m-border));
  border-radius: var(--m-radius);
  background-color: hsl(var(--m-muted) / 0.5);
}

.mishnah-ui .m-summary__pct {
  font-size: 4.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: hsl(var(--m-brand));
  font-variant-numeric: tabular-nums;
}

.mishnah-ui .m-summary__of {
  margin-top: 0.6rem;
  font-size: 1.5rem;
  color: hsl(var(--m-muted-fg));
  font-variant-numeric: tabular-nums;
}

.mishnah-ui .m-summary__bar { margin-top: 1.4rem; }

.mishnah-ui .m-summary__split {
  display: flex;
  gap: 2rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid hsl(var(--m-border));
  font-size: 1.4rem;
  color: hsl(var(--m-muted-fg));
}

.mishnah-ui .m-summary__split b {
  display: block;
  font-size: 1.8rem;
  font-weight: 650;
  color: hsl(var(--m-fg));
  font-variant-numeric: tabular-nums;
}

/* --- Reminder line ------------------------------------------------------- */
.mishnah-ui .m-summary__reminder {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
  padding: 1rem 1.4rem;
  border: 1px solid hsl(var(--m-brand-border));
  border-radius: calc(var(--m-radius) - 3px);
  background-color: hsl(var(--m-brand-soft));
  font-size: 1.5rem;
  color: hsl(var(--m-fg));
}

.mishnah-ui .m-summary__reminder svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: hsl(var(--m-brand));
}

.mishnah-ui .m-summary__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--m-border));
}

.mishnah-ui .m-count-pill {
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background-color: hsl(var(--m-brand));
  color: hsl(var(--m-brand-ink));
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   3. Tool tiles
   -------------------------------------------------------------------------- */
.mishnah-ui .m-tools {
  display: grid;
  /* Three since View Chart moved up to the summary's action row */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 3.2rem;
}

.mishnah-ui .m-tool {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem;
  text-align: start;
  transition: transform 0.2s var(--m-ease), box-shadow 0.2s var(--m-ease),
              border-color 0.2s var(--m-ease);
}

.mishnah-ui .m-tool:hover {
  transform: translateY(-2px);
  box-shadow: var(--m-shadow-lg);
  border-color: hsl(var(--m-fg) / 0.14);
}

.mishnah-ui .m-tool[hidden] { display: none; }

.mishnah-ui .m-tool__icon {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin-bottom: 1.4rem;
  border-radius: calc(var(--m-radius) - 3px);
  background-color: hsl(var(--m-brand-soft));
  color: hsl(var(--m-brand));
}

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

.mishnah-ui .m-tool__title { font-size: 1.7rem; font-weight: 600; }

.mishnah-ui .m-tool__desc {
  margin-top: 0.5rem;
  font-size: 1.5rem;
  line-height: 1.55;
  color: hsl(var(--m-muted-fg));
  flex: 1;
}

.mishnah-ui .m-tool__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--m-brand));
}

.mishnah-ui .m-tool__cta svg {
  width: 1.4rem;
  height: 1.4rem;
  transition: transform 0.2s var(--m-ease);
}

.mishnah-ui .m-tool:hover .m-tool__cta svg { transform: translateX(3px); }

.mishnah-rtl .mishnah-ui .m-tool__cta svg,
[dir="rtl"] .mishnah-ui .m-tool__cta svg { transform: scaleX(-1); }

.mishnah-rtl .mishnah-ui .m-tool:hover .m-tool__cta svg,
[dir="rtl"] .mishnah-ui .m-tool:hover .m-tool__cta svg {
  transform: translateX(-3px) scaleX(-1);
}


/* --------------------------------------------------------------------------
   4. Submissions
   -------------------------------------------------------------------------- */
.mishnah-ui .m-submissions { margin-top: 4.8rem; }

.mishnah-ui .m-submissions__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
  padding-bottom: 2rem;
  border-bottom: 1px solid hsl(var(--m-border));
}

.mishnah-ui .m-submissions__title {
  font-size: 2.3rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.mishnah-ui .m-submissions__sub {
  margin-top: 0.4rem;
  font-size: 1.6rem;
  color: hsl(var(--m-muted-fg));
}


/* --------------------------------------------------------------------------
   5. Seder groups
   -------------------------------------------------------------------------- */
.mishnah-ui .m-seder-group { margin-top: 3.2rem; }
.mishnah-ui .m-seder-group[hidden] { display: none; }

.mishnah-ui .m-seder-head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid hsl(var(--m-border));
}

.mishnah-ui .m-seder-head__name {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mishnah-ui .m-seder-head__count {
  font-size: 1.4rem;
  color: hsl(var(--m-muted-fg));
  font-variant-numeric: tabular-nums;
}

.mishnah-ui .m-seder-head__bar {
  flex: 1;
  max-width: 16rem;
  margin-inline-start: auto;
}

.mishnah-ui .m-mas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}


/* --------------------------------------------------------------------------
   6. Masechta card
   -------------------------------------------------------------------------- */
/*
 * `gap` rather than margins between the parts.
 *
 * The trailing button uses `margin-top: auto` to push itself to the bottom so
 * cards in a row line up. An auto margin only ever grows - it cannot also
 * guarantee a minimum - so on a card with nothing between the bar and the
 * button (an untaken masechta) the two ended up touching. A row gap on the
 * flex container applies on top of the auto margin and fixes the floor.
 */
.mishnah-ui .m-mas {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.6rem;
  transition: border-color 0.15s var(--m-ease), box-shadow 0.15s var(--m-ease);
}

.mishnah-ui .m-mas:hover {
  border-color: hsl(var(--m-fg) / 0.14);
  box-shadow: var(--m-shadow-md);
}

.mishnah-ui .m-mas[hidden] { display: none; }

.mishnah-ui .m-mas__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
}

/* Flex items default to min-width: auto, so a long masechta name would widen
   the card rather than wrap inside it. */
.mishnah-ui .m-mas__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mishnah-ui .m-mas__name {
  font-size: 1.7rem;
  font-weight: 600;
}

.mishnah-ui .m-mas__count {
  margin-inline-start: 0.5rem;
  font-size: 1.5rem;
  font-weight: 400;
  color: hsl(var(--m-muted-fg));
  font-variant-numeric: tabular-nums;
}

.mishnah-ui .m-mas__status {
  flex-shrink: 0;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Available is the one a visitor is looking for, so it gets the brand.
   Taken is settled, so it gets the quiet completion green. Partly taken sits
   between the two and is deliberately neutral. */
.mishnah-ui .m-mas__status--open {
  background-color: hsl(var(--m-brand-soft));
  border-color: hsl(var(--m-brand-border));
  color: hsl(var(--m-brand));
}

.mishnah-ui .m-mas__status--partial {
  background-color: hsl(var(--m-muted));
  border-color: hsl(var(--m-border));
  color: hsl(var(--m-muted-fg));
}

.mishnah-ui .m-mas__status--taken {
  background-color: hsl(var(--m-viz-done) / 0.12);
  border-color: hsl(var(--m-viz-done) / 0.3);
  color: hsl(var(--m-success-text));
}

.mishnah-ui .m-mas__pledgers {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid hsl(var(--m-border));
}

.mishnah-ui .m-mas__label {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--m-muted-fg));
}

.mishnah-ui .m-pledge {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.8rem;
  margin-inline: -0.25rem;
  border-radius: calc(var(--m-radius) - 4px);
  transition: background-color 0.12s var(--m-ease);
}

.mishnah-ui .m-pledge:not(.m-pledge--static):hover {
  background-color: hsl(var(--m-muted) / 0.7);
}

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

.mishnah-ui .m-pledge__name {
  font-size: 1.5rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.mishnah-ui .m-pledge__range {
  font-size: 1.3rem;
  color: hsl(var(--m-muted-fg));
}

/* Cards in a row line up because the trailing button is pushed down. The
   container's row gap supplies the minimum space above it. */
.mishnah-ui .m-mas__add,
.mishnah-ui .m-learn-me { margin-top: auto; }

/* Dashed, because adding is a secondary act on a card that already has
   content. A solid button here would outrank the pledges above it. */
.mishnah-ui .m-mas__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  height: 3.2rem;
  border: 1px dashed hsl(var(--m-brand-border));
  border-radius: calc(var(--m-radius) - 3px);
  background-color: transparent;
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--m-brand));
  transition: background-color 0.15s var(--m-ease), border-color 0.15s var(--m-ease);
}

.mishnah-ui .m-mas__add svg { width: 1.4rem; height: 1.4rem; }

.mishnah-ui .m-mas__add:hover {
  background-color: hsl(var(--m-brand-soft));
  border-style: solid;
}

/* --- Learn Me ------------------------------------------------------------ */
.mishnah-ui .m-learn-me {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.8rem;
  border: none;
  border-radius: calc(var(--m-radius) - 3px);
  background-color: hsl(var(--m-brand));
  color: hsl(var(--m-brand-ink));
  font-size: 1.6rem;
  font-weight: 600;
  transition: background-color 0.15s var(--m-ease), transform 0.1s var(--m-ease);
}

.mishnah-ui .m-learn-me svg { width: 1.4rem; height: 1.4rem; }
.mishnah-ui .m-learn-me:hover { background-color: hsl(var(--m-brand-hover)); }
.mishnah-ui .m-learn-me:active { transform: translateY(1px); }


/* --------------------------------------------------------------------------
   6b. Pledge dialog extras
   The dialog chrome itself is in mishnah-ui.css; these are the pieces only the
   pledge sheet uses.
   -------------------------------------------------------------------------- */

/* Appears only once something is selected — see updatePledgeTally() */
.mishnah-ui .m-pledge-tally {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: 1.4rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid hsl(var(--m-brand-border));
  border-radius: calc(var(--m-radius) - 3px);
  background-color: hsl(var(--m-brand-soft));
  font-size: 1.5rem;
}

.mishnah-ui .m-pledge-tally[hidden] { display: none; }

.mishnah-ui .m-pledge-tally b {
  font-size: 1.7rem;
  font-weight: 650;
  color: hsl(var(--m-brand));
  font-variant-numeric: tabular-nums;
}

.mishnah-ui .m-pledge-tally span {
  color: hsl(var(--m-muted-fg));
  font-variant-numeric: tabular-nums;
}

/* --- Legend -------------------------------------------------------------- */
.mishnah-ui .m-legend {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  font-size: 1.3rem;
  color: hsl(var(--m-muted-fg));
}

.mishnah-ui .m-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.mishnah-ui .m-legend i {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 3px;
  border: 1px solid hsl(var(--m-input));
}

.mishnah-ui .m-legend i.is-mine {
  background-color: hsl(var(--m-brand));
  border-color: hsl(var(--m-brand));
}

/* Neutral, matching the tiles it describes */
.mishnah-ui .m-legend i.is-open {
  background-color: hsl(var(--m-bg));
  border-color: hsl(var(--m-input));
}

.mishnah-ui .m-legend i.is-taken {
  background-color: hsl(var(--m-muted));
  opacity: 0.6;
}

/*
 * The pledge dialog is injected into a SweetAlert popup or a Plainsheet
 * container, neither of which carries our marker class - those hosts are
 * created by the libraries. So the theming is hung off .mishnah-pledge-popup,
 * which IS in our markup, reaching up to its host.
 */
.swal2-popup:has(.mishnah-pledge-popup) {
  width: min(54.4rem, calc(100vw - 3.2rem));
  padding: 0;
  border-radius: var(--m-radius, 1.04rem);
  overflow: hidden;
}

.swal2-popup:has(.mishnah-pledge-popup) .swal2-html-container {
  margin: 0;
  padding: 0;
  max-height: none;
  overflow: visible;
  text-align: start;
  font-size: inherit;
}

.pbs-container:has(.mishnah-pledge-popup) {
  padding: 0;
  border-radius: var(--m-radius, 1.04rem) var(--m-radius, 1.04rem) 0 0;
  overflow: hidden;
}

/* The grab handle only belongs on the bottom sheet */
.swal2-popup .mishnah-pledge-popup .m-sheet__grab { display: none; }

.mishnah-pledge-popup {
  display: flex;
  flex-direction: column;
  max-height: min(85vh, 76.8rem);
}


/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 68rem) {
  .mishnah-ui .m-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mishnah-ui .m-mas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 62rem) {
  .mishnah-ui .m-summary__top { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
}

@media (max-width: 48rem) {
  .mishnah-ui .m-tools,
  .mishnah-ui .m-mas-grid { grid-template-columns: minmax(0, 1fr); }
  .mishnah-ui .m-meta-grid { grid-template-columns: minmax(0, 1fr); }
  .mishnah-ui .m-summary { padding: 2rem; }
  .mishnah-ui .m-seder-head__bar { max-width: none; width: 100%; margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mishnah-ui .m-tool:hover { transform: none; }
  .mishnah-ui .m-pledge { transition: none; }
  .mishnah-ui .m-learn-me:active { transform: none; }
}


/* --------------------------------------------------------------------------
   8. Manage Pledge cards
   One card per masechta, merging every pledge this user holds in it.
   -------------------------------------------------------------------------- */
.mishnah-ui .m-pledge-card__manage {
  border-style: solid;
  border-color: hsl(var(--m-input));
  color: hsl(var(--m-fg));
}

.mishnah-ui .m-pledge-card__manage:hover {
  background: hsl(var(--m-hover));
  border-color: hsl(var(--m-fg) / 0.2);
}

.mishnah-ui .m-pledge-card__manage svg { width: 1.4rem; height: 1.4rem; }