/* ============================================================================
   Mindprint — the audience's thumbs (T-21).

   One component, two placements. On a tile it floats in the corner over the art,
   which means it has to read against whatever the pattern happens to be: hence a
   dark scrim and a blur rather than a border, the same treatment the lane and
   grade chips already use so a tile does not accumulate three different chip
   languages. On the pattern page it sits in the tools row as an ordinary control.

   Unpressed thumbs are deliberately quiet. This is an invitation, not a call to
   action — the page is selling a pattern, and a pair of bright buttons over the
   artwork would compete with the thing being rated. Pressed, the up goes pink
   (the brand accent, used here for approval as everywhere else) and the down goes
   dim rather than red: a thumbs down is a preference, not an error.
   ========================================================================== */

.rate {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.rate-compact {
  position: absolute;
  right: 9px;
  bottom: 9px;
  /* Above the name's gradient band, which spans the full width of the tile. */
  z-index: 2;
  padding: 2px;
  border-radius: var(--mp-r-pill);
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(6px);
  /* Present but recessive until the tile is under a pointer or a rating exists —
     twenty tiles each shouting two buttons is a control panel, not a gallery. */
  opacity: .45;
  transition: opacity .15s;
}

.tile:hover .rate-compact,
.tile:focus-within .rate-compact,
.rate-compact[data-mine="up"],
.rate-compact[data-mine="down"] { opacity: 1; }

.rate-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mp-mute);
  cursor: pointer;
  transition: color .15s, background .15s;
}

.rate-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}

.rate-btn:hover { color: var(--mp-ink); background: rgba(255, 255, 255, .08); }
.rate-btn:focus-visible { outline: 2px solid var(--mp-pink); outline-offset: 1px; }

.rate-btn[aria-pressed="true"].rate-up { color: var(--mp-pink); }
.rate-btn[aria-pressed="true"].rate-down { color: var(--mp-ink); }

/* The roomier placement: a labelled control in a row of them, not a corner badge. */
.rate:not(.rate-compact) {
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-pill);
  background: var(--mp-surface);
}

.rate:not(.rate-compact) .rate-btn { width: 30px; height: 30px; }

@media (prefers-reduced-motion: reduce) {
  .rate-compact,
  .rate-btn { transition: none; }
}