/* ============ Design Review clusters — PREVIEW CHROME ONLY ============
   Not part of the design system: excluded from design.md and the quality-
   bar review. Same deliberately neutral styling language as switcher.css
   (system font, dark neutrals, no brand gradient) so it never reads as
   part of the page. Each cluster is positioned by review-panel.js next to
   the section it controls (right gutter of the content column; translucent
   overlay on the section's top-right corner when there's no gutter room).
   Safe to delete this file + review-panel.js + their two includes with
   zero effect on the homepage. */

.review-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 998;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.review-cluster {
  position: absolute;
  width: 186px;
  pointer-events: auto;
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  padding: 10px;
}

/* No-gutter fallback (narrow viewports): sits over the section's top-right
   corner, slightly translucent so the design stays readable underneath. */
.review-cluster--overlay {
  background: rgba(28, 28, 30, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.review-cluster__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding: 2px 4px 7px;
}

.review-cluster__opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  border-radius: 9px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) {
  .review-cluster__opt:hover { background: rgba(255, 255, 255, 0.08); }
}
.review-cluster__opt:active { transform: scale(0.98); }
.review-cluster__opt[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ○ / ● radio dot */
.review-cluster__radio {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  display: grid;
  place-items: center;
}
.review-cluster__opt[aria-pressed="true"] .review-cluster__radio {
  border-color: #fff;
}
.review-cluster__opt[aria-pressed="true"] .review-cluster__radio::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .review-cluster__opt { transition: none !important; }
}