/**
 * Review Status Tag Component (Notes.md #2)
 * Small, quiet pill shown inside review cards — "Pending admin review" or
 * "Approved by admin" — rendered above `.review-date` in `.review-meta-right`
 * so it never visually competes with the star rating (`.review-stars-display`
 * lives in the separate `.review-rating-banner` row below).
 *
 * Design: Nobara Kugisaki (docs/design/notes-backlog-ux-spec.md §B)
 * Implementation: Yuuji Itadori, 2026-09-22
 *
 * Color is a secondary cue only — icon shape + text label carry the meaning
 * (WCAG 1.4.1, color not the sole means of conveying information).
 */

.review-status-tag {
  /* Hotfix (2026-09-27, BUG-REVIEWSTATUSTAG-BUTTON-RESET-001): this is a
     real <button class="review-status-tag ...">
     (frontend/scripts/review-status-tag.js), so it also inherits
     main.css's global `button, .button` rule (min-width: 12em;
     height/line-height: 4em; text-transform: uppercase; and on mobile a
     `button{width:100%}` rule) -- verified live at 1280px: 147x46px
     instead of the compact quiet pill this file's own
     padding/min-height/font-size imply, and full grid-row width (346px)
     at 390px because this block never declared its own `width`, so the
     mobile bare-`button` rule's `width: 100%` applied uncontested (only
     one rule declares `width` for this element at all -- `display` was
     already correctly `inline-flex` here since specificity, i.e. class
     beats type-selector `button`, already decided that property; `width`
     was simply never contested). Same root cause as
     BUG-STATE-TILES-BUTTON-RESET-001 / BUG-SHARE-XCLOSE-002 (same file
     family). This rule's own `letter-spacing: 0.01em` below already
     overrides the inherited `0.25em` (specificity: this class beats the
     bare `button` element selector) -- listed here again only as
     confirmation it's intentional, not a fix. */
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 28px;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s ease;
  /* Enlarge the tap target without growing the visual pill (WCAG 2.5.8) */
  position: relative;
  min-width: 0;
  width: auto;
  max-width: none;
  height: auto;
  line-height: 1.2;
  margin: 0;
  text-transform: none;
}

.review-status-tag i {
  font-size: 0.85em;
}

.review-status-tag--pending {
  color: #b0b0b0;
  border-color: rgba(255, 255, 255, 0.18);
}

.review-status-tag--pending:hover {
  background: rgba(255, 255, 255, 0.06);
}

.review-status-tag--approved {
  color: var(--passport-green, #28a745);
  border-color: rgba(40, 167, 69, 0.4);
}

.review-status-tag--approved:hover {
  background: rgba(40, 167, 69, 0.1);
}

.review-status-tag:focus-visible {
  outline: 2px solid #ffee00;
  outline-offset: 2px;
}

/* Invisible hit-area expanding the 28px visual pill to the 44px minimum */
.review-status-tag::before {
  content: '';
  position: absolute;
  inset: -8px;
}

/* Accessibility - Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .review-status-tag {
    transition: none;
  }
}

/* Accessibility - High Contrast Mode Support */
@media (prefers-contrast: high) {
  .review-status-tag {
    border-width: 2px;
  }

  .review-status-tag:focus-visible {
    outline-width: 3px;
  }
}