/* The memory ruler (facts/_ruler): one instrument for how finely an answer
   stays in memory, dealt on the meet card, the reveal, and the fact page.
   Every mark is a real reading; the readout shows the one under the thumb.
   --marks (set on the ruler, by the partial and the controller) is the
   count of readings in the current unit. */

.ruler {
  --thumb: 1.4375rem;
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 1.0625rem;
  background: var(--card);
  color: var(--ink);
  text-align: center;
}

.ruler-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
  text-align: left;
}

.ruler-heading strong {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 740;
  letter-spacing: -0.01em;
}

/* What the mark under the thumb is worth (Recognize it, Ballpark it, Know
   it exactly), on the heading's right */
.ruler-heading .ruler-worth {
  flex: 0 0 auto;
  color: var(--accent-deep);
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.ruler-units {
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875rem;
  margin: 0 auto 1rem;
  padding: 0.1875rem;
  border-radius: 999px;
  background: var(--wash);
}

.ruler-unit {
  min-height: 2.125rem;
  padding: 0.375rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--accent-deep);
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease;
}

.ruler-unit[aria-pressed="true"] {
  background: var(--card);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--shadow) 12%, transparent);
}

.ruler-readout {
  min-height: 4.25rem;
  display: grid;
  place-items: center;
  margin-bottom: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: 0.875rem;
  background: var(--wash);
  color: var(--accent-deep);
  font-family: var(--display);
  font-size: 1.625rem;
  letter-spacing: -0.01em;
  font-weight: 760;
  overflow-wrap: anywhere;
}

/* The track is inset so the thumb's stops fall on the tick columns'
   centers: a thumb travels from half its width in to half its width short
   of the end, while the ticks share the row in equal columns */
.ruler-range {
  --inset: calc(100% / (2 * var(--marks, 1)) - var(--thumb) / 2);
  display: block;
  width: calc(100% - 2 * var(--inset));
  height: 1.5rem;
  margin: 0.25rem var(--inset) 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.ruler-range::-webkit-slider-runnable-track {
  height: 0.4375rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--wash), var(--accent));
}

.ruler-range::-moz-range-track {
  height: 0.4375rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--wash), var(--accent));
}

.ruler-range::-webkit-slider-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: -0.5625rem;
  appearance: none;
  border: 4px solid var(--card);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--line), 0 4px 9px color-mix(in srgb, var(--shadow) 20%, transparent);
}

.ruler-range::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border: 4px solid var(--card);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--line), 0 4px 9px color-mix(in srgb, var(--shadow) 20%, transparent);
}

/* The ticks: each label a button, its hairline hanging above it in the
   gap under the track, outside the pill the selected one wears. No gap
   between columns, so their centers are where the track's inset puts the
   thumb's stops. */
.ruler-ticks {
  display: grid;
  grid-template-columns: repeat(var(--marks, 1), minmax(0, 1fr));
  margin-top: 0.875rem;
}

.ruler-tick {
  position: relative;
  min-width: 0;
  padding: 0.5rem 0.25rem;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  transition: background 0.15s ease, color 0.15s ease;
}

.ruler-tick::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 50%;
  width: 1px;
  height: 0.5rem;
  background: var(--line);
}

.ruler-tick.is-selected {
  background: var(--wash);
  color: var(--accent-deep);
  font-weight: 700;
}

.ruler-save {
  width: 100%;
  min-height: 2.625rem;
  margin-top: 0.75rem;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
}

/* A unit with a single mark, a ruler without a second tick: the readout
   is the whole story, so the track and its one tick stay folded */
.ruler:not(:has(.ruler-tick + .ruler-tick)) :is(.ruler-range, .ruler-ticks) {
  display: none;
}

.ruler:not(:has(.ruler-tick + .ruler-tick)) .ruler-readout {
  margin-bottom: 0;
}

/* The reveal's offer sits under the verdict, in the feedback column */
.ruler-offer {
  margin-top: 0.75rem;
  text-align: left;
}

.ruler-offer-note {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

@media (max-width: 660px) {
  .ruler {
    padding: 0.875rem;
  }

  .ruler-heading strong {
    font-size: 0.9375rem;
  }

  .ruler-readout {
    min-height: 3.75rem;
    font-size: 1.375rem;
  }

  .ruler-tick {
    padding: 0.375rem 0.125rem;
    font-size: 0.6875rem;
  }
}