/* ============================================================
   retiro.ph — the review panel beside one Explore photograph
   JEV-20261012322

   One panel per selected photograph: the reader's own rating, ordered
   checkmark tags, freehand drawing and rotation, and the one explicit
   practical vote that is separate from all of it. Nothing here is a pill, a
   card wall or a tutorial: plain labels, one control a line, and the reader's
   own order shown back to them.
   ============================================================ */

.rv {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}

.rv__h {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

.rv__status {
  margin: 0;
  min-height: 1.2rem;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-fg-muted);
}

.rv__status[data-kind="ok"] {
  color: var(--color-fg);
}

.rv__status[data-kind="warn"] {
  color: var(--color-fg);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-2);
}

.rv__status a {
  color: var(--color-accent);
}

.rv__field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
}

.rv__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg);
}

.rv__select,
.rv__input {
  min-height: var(--tap);
  width: 100%;
  max-width: 22rem;
  padding: 0.35rem 0.5rem;
  font: inherit;
  color: var(--color-fg);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
}

.rv__chosen {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rv__tag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.rv__tagtext {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-base);
}

.rv__move,
.rv__offerbtn,
.rv__btn {
  min-height: 1.75rem;
  padding: 0.15rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-mono);
  color: var(--color-fg);
  background: var(--color-paper);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.rv__move:disabled,
.rv__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.rv__move:hover:not(:disabled),
.rv__offerbtn:hover,
.rv__btn:hover:not(:disabled) {
  border-color: var(--color-fg-muted);
}

.rv__offer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rv__offerbtn[aria-pressed="true"] {
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.rv__add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.rv__add .rv__label {
  flex: 1 1 100%;
}

.rv__add .rv__input {
  flex: 1 1 10rem;
  max-width: 18rem;
}

.rv__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.rv__hint[hidden] {
  display: none;
}

.rv__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rv__tools .rv__btn[aria-pressed="true"] {
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.rv__vote {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}

.rv__votebtn {
  justify-self: start;
  min-height: var(--tap);
  padding: 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.rv__votebtn[aria-pressed="true"] {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.rv__votebtn:disabled {
  opacity: 0.6;
  cursor: default;
}

.rv__votetext {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.rv__retry[hidden] {
  display: none;
}

.rv__btn--go {
  font-size: var(--text-sm);
  padding: 0 var(--space-4);
  min-height: var(--tap);
}

/* The drawing surface covers the whole photograph frame. In View it takes no
   pointer at all, so the page scrolls over the picture as usual; in Draw and
   Erase it takes the pointer and the touch, which is what makes a stroke a
   stroke instead of a page scroll. */
.rv__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: none;
}

.rv__canvas[data-mode="view"] {
  pointer-events: none;
}

.rv--visitor,
.rv--absent {
  gap: var(--space-2);
}