/* ==========================================================================
   REVIEW LAYER
   Only ever present when the page is opened with ?review=<token>. Everything
   is prefixed .rvw- and carries its own colours rather than the site's custom
   properties, so the layer looks identical in light and dark mode and can
   never be restyled by a change to the design it is being used to review.
   Its own chrome is set in Poppins (self-hosted, declared in app.css), by
   request on 14 Sept 2026; the fallback stack is the system UI face.
   z-index sits above the site's highest (the LP modal, 97).
   ========================================================================== */

.rvw-bar, .rvw-pop, .rvw-hint, .rvw-pin span {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.rvw-bar {
  position: fixed; right: 18px; bottom: 18px; z-index: 9000;
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px;
  max-width: calc(100vw - 36px);
}
.rvw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 100px; border: 0; cursor: pointer;
  background: #10192b; color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 24px -6px rgba(0,0,0,.5); transition: background .2s, transform .2s;
}
.rvw-btn:hover { background: #1d2a44; transform: translateY(-1px); }
.rvw-btn.on { background: #055ec4; }
.rvw-btn .rvw-dot { width: 8px; height: 8px; border-radius: 50%; background: #4b95ea; }
.rvw-btn.on .rvw-dot { background: #fff; }
.rvw-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px;
  background: rgba(255,255,255,.18); font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center;
}

/* Crosshair over the whole page while a pin is being placed. */
.rvw-arming, .rvw-arming * { cursor: crosshair !important; }
.rvw-hint {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 9000;
  background: #055ec4; color: #fff; padding: 8px 16px; border-radius: 100px;
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .02em;
  box-shadow: 0 6px 24px -6px rgba(0,0,0,.5); pointer-events: none;
}

/* Pins live in document space so they scroll with the element they mark. */
.rvw-pins { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 8999; }
.rvw-pin {
  position: absolute; width: 26px; height: 26px; border-radius: 50% 50% 50% 2px;
  transform: translate(-50%, -100%) rotate(-45deg);
  background: #055ec4; border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.45);
  display: grid; place-items: center; transition: transform .18s, background .18s;
}
.rvw-pin span { transform: rotate(45deg); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.rvw-pin:hover { transform: translate(-50%, -100%) rotate(-45deg) scale(1.15); }
.rvw-pin.done { background: #0e8a63; }
.rvw-pin.hidden { display: none; }

/* Compose + thread popover. */
.rvw-pop {
  position: absolute; z-index: 9001; width: 300px; max-width: calc(100vw - 24px);
  background: #10192b; color: #eef1f6; border-radius: 12px; padding: 14px;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.7);
  display: flex; flex-direction: column; gap: 10px;
}
.rvw-pop textarea, .rvw-pop input {
  width: 100%; box-sizing: border-box; background: #0a1120; color: #eef1f6;
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 9px 10px;
  font: 400 13px/1.5 inherit; resize: vertical;
}
.rvw-pop textarea { min-height: 74px; }
.rvw-pop textarea:focus, .rvw-pop input:focus { outline: none; border-color: #4b95ea; }
.rvw-row { display: flex; gap: 8px; align-items: center; }
.rvw-row .rvw-sp { margin-left: auto; }
.rvw-mini {
  padding: 7px 13px; border-radius: 7px; border: 0; cursor: pointer;
  font: 600 12px/1 inherit; background: #055ec4; color: #fff;
}
.rvw-mini.ghost { background: rgba(255,255,255,.12); }
.rvw-mini:hover { filter: brightness(1.15); }
.rvw-note { border-top: 1px solid rgba(255,255,255,.12); padding-top: 9px; }
.rvw-note:first-child { border-top: 0; padding-top: 0; }
.rvw-who { font: 700 11px/1 inherit; color: #85b9f5; letter-spacing: .03em; }
.rvw-when { font: 400 10px/1 inherit; color: #7d8798; margin-left: 6px; }
.rvw-body { font: 400 13px/1.5 inherit; margin-top: 5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rvw-notes { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
.rvw-err { font: 500 12px/1.4 inherit; color: #ff9a8a; }

@media print { .rvw-bar, .rvw-pins, .rvw-pop, .rvw-hint { display: none !important; } }