/* ==========================================================================
   Mishnah — public chart page
   ==========================================================================

   Loads after css/mishnah-chart-ui.css, which supplies the seder groups and
   masechta cards this page shares with the manage screen. Only the hero, the
   instructions and the sticky toolbar are here.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
/*
 * No background and no border: the hero is rendered by its own function now,
 * so it can be dropped into a full-width Bricks section that supplies the
 * band behind it. Adding one here would sit inside that section and show as
 * a second, narrower stripe.
 */
.mishnah-ui .m-chart-hero {
  padding: 4rem 0 4.4rem;
  text-align: center;
}

/*
 * A reading measure, not a page width. The hero is a centred column of text —
 * a name and a date — and that has an optimum line length however wide the
 * band behind it runs.
 */
.mishnah-ui .m-chart-hero__inner {
  max-width: var(--m-measure-hero);
  margin: 0 auto;
  padding: 0 2.4rem;
}

.mishnah-ui .m-chart-hero__occasion {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  border: 1px solid hsl(var(--m-brand-border));
  border-radius: 999px;
  background-color: hsl(var(--m-card));
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--m-brand));
}

.mishnah-ui .m-chart-hero__title {
  margin-top: 1.6rem;
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.mishnah-ui .m-chart-hero__he {
  margin-top: 1rem;
  font-size: 2.3rem;
  line-height: 1.6;
  color: hsl(var(--m-muted-fg));
  /* The Mishnah's own face, not the UI Hebrew — this is a name being
     memorialised, and it is the most important line on the page. */
  font-family: var(--mishnah-font-text);
  unicode-bidi: isolate;
}

.mishnah-ui .m-chart-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
  font-size: 1.6rem;
  color: hsl(var(--m-muted-fg));
}

.mishnah-ui .m-chart-hero__meta svg { width: 1.4rem; height: 1.4rem; }
.mishnah-ui .m-chart-hero__meta b { font-weight: 600; color: hsl(var(--m-fg)); }

.mishnah-ui .m-chart-hero__he-date {
  font-family: var(--m-font-he);
  unicode-bidi: isolate;
}

.mishnah-ui .m-countdown {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background-color: hsl(var(--m-card));
  border: 1px solid hsl(var(--m-brand-border));
  font-size: 1.4rem;
  font-weight: 600;
  color: hsl(var(--m-brand));
  font-variant-numeric: tabular-nums;
}

.mishnah-ui .m-countdown--past {
  border-color: hsl(var(--m-danger) / 0.35);
  color: hsl(var(--m-danger));
}

.mishnah-ui .m-chart-hero__progress { margin-top: 2.8rem; }

/* The hero keeps the site's existing animated bar. It is wider and taller
   here than in a table row, because it is the page's headline figure. */
.mishnah-ui .m-chart-hero__progress .progress-bar {
  height: 2.8rem;
  background-color: hsl(var(--m-card));
  border: 1px solid hsl(var(--m-brand-border));
}

.mishnah-ui .m-chart-hero__progress .progress-bar-fill {
  background: hsl(213deg 79.82% 9.97%);
}

.mishnah-ui .m-chart-hero__progress .progress-label {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

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

.mishnah-ui .m-chart-hero__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.4rem;
}

.mishnah-ui .m-chart-hero__actions .m-btn[hidden] { display: none; }


/* --------------------------------------------------------------------------
   2. Body
   -------------------------------------------------------------------------- */
/* Full width; the Bricks container owns it. See mishnah-ui.css.
   width:100% for the same reason as .m-dash - a shrink-to-fit parent would
   otherwise let this collapse to its content, which is what made the page
   narrow when the instructions accordion was closed. */
.mishnah-ui .m-chart-body {
  width: 100%;
  max-width: var(--m-page-max);
  margin-inline: auto;
  padding-inline: var(--m-page-pad);
  padding-bottom: 8rem;
}

.mishnah-ui.m-chart,
.mishnah-ui.m-chart-hero-wrap { width: 100%; }


/* --------------------------------------------------------------------------
   3. Instructions
   -------------------------------------------------------------------------- */
.mishnah-ui .m-instructions {
  margin: 3.2rem 0 0;
  border: 1px solid hsl(var(--m-border));
  border-radius: var(--m-radius);
  background-color: hsl(var(--m-card));
  box-shadow: var(--m-shadow-sm);
}

.mishnah-ui .m-instructions__summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.8rem;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

/* Both are needed: the pseudo-element for WebKit, list-style for the rest */
.mishnah-ui .m-instructions__summary::-webkit-details-marker { display: none; }

.mishnah-ui .m-instructions__summary > svg:first-child {
  width: 1.6rem;
  height: 1.6rem;
  color: hsl(var(--m-brand));
}

.mishnah-ui .m-instructions__chev {
  width: 1.6rem;
  height: 1.6rem;
  margin-inline-start: auto;
  color: hsl(var(--m-muted-fg));
  transition: transform 0.2s var(--m-ease);
}

.mishnah-ui .m-instructions[open] .m-instructions__chev { transform: rotate(180deg); }

.mishnah-ui .m-instructions__body {
  padding: 0 1.8rem 1.8rem;
  border-top: 1px solid hsl(var(--m-border));
}

.mishnah-ui .m-instructions ol {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.mishnah-ui .m-instructions li {
  position: relative;
  counter-increment: step;
  padding-inline-start: 3.2rem;
  font-size: 1.6rem;
  line-height: 1.6;
  color: hsl(var(--m-muted-fg));
}

.mishnah-ui .m-instructions li + li { margin-top: 1.2rem; }

.mishnah-ui .m-instructions li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0.1rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background-color: hsl(var(--m-brand-soft));
  border: 1px solid hsl(var(--m-brand-border));
  font-size: 1.3rem;
  font-weight: 700;
  color: hsl(var(--m-brand));
}

.mishnah-ui .m-instructions__yasher {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px dashed hsl(var(--m-border));
  font-size: 1.6rem;
  font-weight: 600;
  color: hsl(var(--m-brand));
}


/* --------------------------------------------------------------------------
   4. Sticky toolbar
   One sticky layer, not two: because the seder bar reports where you are, the
   per-seder headings below deliberately do NOT stick. Two stacked sticky
   strips ate too much of a phone viewport.
   -------------------------------------------------------------------------- */
.mishnah-ui .m-chart-toolbar {
  position: sticky;
  top: var(--m-header-h, 0rem);
  z-index: 20;
  margin-top: 3.2rem;
  background-color: hsl(var(--m-bg));
  border-bottom: 1px solid hsl(var(--m-border));
}

.mishnah-ui .m-filter-bar {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding: 1.4rem 0 1.2rem;
}

.mishnah-ui .m-search--compact { flex: 0 1 25.6rem; }

.mishnah-ui .m-filter-bar__count {
  margin-inline-start: auto;
  font-size: 1.5rem;
  color: hsl(var(--m-muted-fg));
  font-variant-numeric: tabular-nums;
}

/* --- Seder jump bar ------------------------------------------------------ */
.mishnah-ui .m-seder-bar {
  position: relative;
  display: flex;
  gap: 0.3rem;
  padding-bottom: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.mishnah-ui .m-seder-bar::-webkit-scrollbar { display: none; }

/* Fades hint the strip runs past the edge; the script sets the attribute */
.m-chart-toolbar[data-overflow~="start"] .m-seder-bar {
  mask-image: linear-gradient(to right, transparent, #000 2.8rem);
}

.m-chart-toolbar[data-overflow~="end"] .m-seder-bar {
  mask-image: linear-gradient(to left, transparent, #000 2.8rem);
}

.m-chart-toolbar[data-overflow~="start"][data-overflow~="end"] .m-seder-bar {
  mask-image: linear-gradient(to right, transparent, #000 2.8rem,
                              #000 calc(100% - 2.8rem), transparent);
}

.mishnah-ui .m-seder-link {
  flex: 0 0 auto;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--m-muted-fg));
  white-space: nowrap;
  transition: color 0.15s var(--m-ease), background-color 0.15s var(--m-ease);
}

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

.mishnah-ui .m-seder-link.is-active {
  background-color: hsl(var(--m-ink));
  color: hsl(var(--m-ink-fg));
}

/* Nothing left under it once the filter has run */
.mishnah-ui .m-seder-link.is-empty {
  opacity: 0.3;
  pointer-events: none;
}

/* Anchors land below the sticky toolbar rather than under it */
.mishnah-ui .m-seder-group {
  scroll-margin-top: calc(var(--m-header-h, 0rem) + 8.8rem);
}


/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .mishnah-ui .m-chart-hero { padding: 2.8rem 0 3.2rem; }
  .mishnah-ui .m-chart-hero__inner { padding: 0 1.6rem; }
  /* Only the bottom gap shrinks; the gutter is the container's job. */
  .mishnah-ui .m-chart-body { padding-bottom: 5.6rem; }

  .mishnah-ui .m-filter-bar { gap: 1rem; }
  .mishnah-ui .m-search--compact { flex: 1 1 100%; }

  .mishnah-ui .m-filter-bar__count {
    margin-inline-start: 0;
    width: 100%;
  }

  /* Let the strip run to both screen edges so it reads as swipeable */
  .mishnah-ui .m-seder-bar {
    margin-inline: -1rem;
    padding-inline: 1.6rem;
  }

  .mishnah-ui .m-seder-group {
    scroll-margin-top: calc(var(--m-header-h, 0rem) + 12rem);
  }

  .mishnah-ui .m-chart-hero__actions .m-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mishnah-ui .m-instructions__chev { transition: none; }
}