/* MV_SameYear (#514) — the quiet "That year: …" line under a dated card.
   Secondary by construction: muted ink a step down from the card's own body
   (rule 2 of THE HOUSE LOOK — a mark that annotates something renders smaller
   than the thing it annotates), separated by a hairline rather than a box, so
   it reads as a footnote to the memory above it and never competes with it.
   The people in it are the app's white name-pills like everywhere else. */

.mv-same-year {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-loose);
  color: var(--color-text-muted);
  /* Ordinary inline flow, deliberately not flex: the line is a *sentence*
     with pills in it, and flex would lift every ", and " into its own item,
     trimming the spaces that hold the sentence together (and stranding the
     comma after a gap). Inline-block pills wrap on their own. */
  display: block;
}

/* The lead-in carries the year's claim ("That year:" / "Around then:") — the
   one part of the line with a little weight, so the eye finds the sentence's
   start among the pills. */
.mv-same-year__lead {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-faint);
  letter-spacing: var(--letter-spacing-tight);
}

.mv-same-year__name {
  display: inline-block;
  padding: 1px var(--space-xxs);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent);
  font-size: var(--font-size-xs);
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.mv-same-year__name:hover,
.mv-same-year__name:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.mv-same-year__name:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

/* On the chronicle's tinted cards the hairline would read as a divider
   between two cards; the tint already separates the line from the body. */
.chronicle__event .mv-same-year {
  border-top-color: transparent;
}

/* Deliberately NOT the app's --touch-target-min here, the one place that
   floor is wrong: these pills sit *inside a sentence*, and a 44px-tall inline
   button stands the line up around it (measured: the line box goes 34px →
   53px, with a control looming mid-prose). A padding bump instead — ~33px
   tall, comfortably past the 24×24 target-size floor — keeps the sentence a
   sentence and the name tappable. Rows of pills elsewhere still take the 44. */
@media (hover: none) and (pointer: coarse) {
  .mv-same-year__name {
    padding: 5px 9px;
    touch-action: manipulation;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mv-same-year__name {
    transition: none;
  }

  .mv-same-year__name:hover,
  .mv-same-year__name:focus-visible {
    transform: none;
  }
}