/* =========================================================================
   review.css — Anmerkungsebene fuer die Freigabe.
   Wird nur auf der Vorschau-Adresse geladen. Liegt ueber allem, benutzt aber
   dieselben Farb-Token, damit sie in beiden Schemata lesbar ist.
   ========================================================================= */
.rv { position: static; }
.rv__toggle {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 9500;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .6rem 1.1rem;
  border-radius: 999px; border: 1px solid var(--line-control);
  background: var(--surface); color: var(--ink);
  font: 500 .875rem/1.2 var(--ff); letter-spacing: .01em;
  box-shadow: var(--shadow-card); cursor: pointer;
}
.rv__toggle[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.rv__count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 .35em; border-radius: 999px;
  background: var(--s8); color: #fff; font-size: .6875rem; font-weight: 700;
}
.rv__hint {
  position: fixed; left: 1.25rem; bottom: calc(1.25rem + 56px); z-index: 9500;
  max-width: 22rem; padding: .7rem .9rem;
  border-radius: var(--r-md); border: 1px solid var(--line-control);
  background: var(--surface); color: var(--ink-soft);
  font: 400 .8125rem/1.5 var(--ff); box-shadow: var(--shadow-card);
}

/* Im Aufnahmemodus zeigt der Zeiger ein Kreuz und nichts auf der Seite reagiert. */
html.rv-on, html.rv-on * { cursor: crosshair !important; }
html.rv-on .rv, html.rv-on .rv * { cursor: default !important; }

.rv__pins { position: absolute; inset: 0; z-index: 9400; pointer-events: none; }
.rv__pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 999px;
  border: 2px solid var(--ground);
  background: var(--s8); color: #fff;
  font: 700 .75rem/1 var(--ff);
  display: grid; place-items: center;
  pointer-events: auto; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.rv__pin.is-done { background: var(--s3); opacity: .55; }

.rv__card {
  position: absolute; transform: translate(-8px, 14px);
  width: 300px; padding: .85rem;
  border-radius: var(--r-md); border: 1px solid var(--line-control);
  background: var(--surface); color: var(--ink);
  font: 400 .875rem/1.5 var(--ff);
  box-shadow: var(--shadow-lift); pointer-events: auto;
}
.rv__card input, .rv__card textarea {
  width: 100%; margin-bottom: .5rem; padding: .5rem .6rem;
  border: 1px solid var(--line-control); border-radius: var(--r-sm);
  background: var(--ground); color: var(--ink); font: inherit;
}
.rv__card textarea { resize: vertical; }
.rv__row { display: flex; gap: .5rem; justify-content: flex-end; }
.rv__row button {
  min-height: 36px; padding: .4rem .8rem; border-radius: 999px;
  font: 500 .8125rem/1 var(--ff); cursor: pointer;
  border: 1px solid var(--line-control); background: transparent; color: var(--ink);
}
.rv__save, .rv__done { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.rv__meta { font-size: .75rem; color: var(--ink-mute); margin-bottom: .35rem; }
.rv__body { margin-bottom: .7rem; }

@media print { .rv { display: none; } }