/* Customer reviews (js/wa-reviews.js). Paper tokens only (--ink, --oxblood,
   --inkMuted …), which store.css and tangle.css both define, so the section
   drops into either page. Same idiom as the homepage cards: 1.5px ink borders,
   square corners, mono eyebrows and bylines, lowercase. */

.wa-reviews { margin: 34px 0 20px; }
.wa-reviews[hidden] { display: none; }

.wa-rv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 10px 24px; margin-bottom: 16px; }
.wa-rv-head h2 { font-size: clamp(24px, 2.4vw, 30px); }

.wa-rv-score { display: flex; align-items: center; gap: 10px; margin: 0; }
.wa-rv-avg { font-size: 30px; font-weight: 700; line-height: 1; color: var(--ink); }
.wa-rv-count { font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace; font-size: 11px;
  letter-spacing: 0.6px; color: var(--inkMuted); }

/* The ghost row sets the box; the filled row sits over it, clipped to the score.
   The box must be exactly the stars' width — a card is a column flexbox and
   would stretch it to the card, and 80% of a card shows all five. */
.wa-rv-stars { position: relative; display: inline-block; width: max-content; align-self: flex-start;
  line-height: 1; font-size: 15px; letter-spacing: 2px; white-space: nowrap; }
.wa-rv-score .wa-rv-stars { font-size: 20px; }
.wa-rv-stars-off { color: var(--hairline2); }
.wa-rv-stars-on { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--oxblood); }

.wa-rv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.wa-rv-card { display: flex; flex-direction: column; gap: 8px; min-width: 0;
  border: 1.5px solid var(--ink); background: var(--surface); padding: 16px 18px 14px; }
.wa-rv-title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.wa-rv-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--inkMuted);
  white-space: pre-line; overflow-wrap: anywhere; }
.wa-rv-by { margin: auto 0 0; padding-top: 6px; font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
  font-size: 10.5px; letter-spacing: 0.6px; color: var(--inkDim); overflow-wrap: anywhere; }

.wa-rv-readall, .wa-rv-more { align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace; font-size: 11px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: lowercase; color: var(--oxblood); }
.wa-rv-readall:hover, .wa-rv-more:hover { text-decoration: underline; }
.wa-rv-more[hidden] { display: none; }

.wa-rv-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px 24px; margin-top: 16px; }
.wa-rv-write { font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace; font-size: 11px;
  font-weight: 700; letter-spacing: 0.6px; text-transform: lowercase; text-decoration: none; color: var(--oxblood); }
.wa-rv-write:hover { text-decoration: underline; }
/* Alone on its row when every review is already showing. */
.wa-rv-more[hidden] + .wa-rv-write { margin-left: auto; }