/* Marcação de pessoas no vídeo (Trocar personagem): the numbered pin of each character, its line in the character card and the marking dialog. */
/* The colors (--pin-fill, --pin-ink) come inline from public/person-pins.js, the same ones the GPU draws. */
.pin-badge { --pin-fill: #7c3aed; --pin-ink: #fff; display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; background: var(--pin-fill); color: var(--pin-ink); box-shadow: 0 1px 4px #000a; font: 800 12px/1 var(--font); font-variant-numeric: tabular-nums; }

/* Line of a character card: pin, whether it is marked, and the button that opens the dialog. */
.pin-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; min-width: 0; padding: 8px 10px; border: 1px solid #3a363f; border-radius: 8px; background: #232227; }
.pin-row.is-marked { border-color: #5b4a78; }
.pin-state { flex: 1 1 130px; min-width: 0; color: #cfc6da; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.pin-row.is-marked .pin-state { color: var(--text); font-weight: 600; }
.pin-mark { flex: 1 1 150px; max-width: 100%; min-height: 44px; white-space: normal; text-align: center; }

/* Marking dialog. */
/* Pinned to the top instead of centered: what appears below the picture (the remove button, a notice) must never move the picture under a finger. */
dialog.pin-dialog { width: min(560px, calc(100% - 32px)); margin-top: clamp(12px, 5dvh, 48px); margin-bottom: auto; overscroll-behavior: contain; }
.pin-dialog [hidden] { display: none !important; }
.pin-dialog .dialog-heading h2 { display: flex; align-items: center; gap: 10px; }
.pin-dialog .dialog-heading .pin-badge { width: 28px; height: 28px; font-size: 14px; }
.pin-dialog .dialog-heading .round-button { width: 44px; height: 44px; }
.pin-help { max-width: 60ch; margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* The stage takes the shape of the picture (--pin-ar is width / height of the video) and never taller than the screen allows;
   the video is still object-fit: contain inside it, and every touch is measured on the picture rectangle that public/person-pins.js computes. */
.pin-stage { --pin-max-h: min(46dvh, 460px); position: relative; width: min(100%, calc(var(--pin-max-h) * var(--pin-ar, .5625))); aspect-ratio: var(--pin-ar, .5625); max-height: var(--pin-max-h); margin: 0 auto 12px; border-radius: 10px; background: #000; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.pin-stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pin-video { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; background: #000; object-fit: contain; pointer-events: none; }
.pin-layer { position: absolute; }
.pin-stage-note { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; border-radius: inherit; background: #000c; color: #d9d0e3; font-size: 13px; line-height: 1.5; text-align: center; }
.pin-stage-note[data-tone="error"] { color: var(--error); }

/* The pin: a drop whose tip is the marked point. The box is 44 x 52 px so a finger can always grab it. */
.pin-marker { position: absolute; display: flex; align-items: flex-end; justify-content: center; width: 44px; height: 52px; transform: translate(-50%, calc(-100% + 1px)); touch-action: none; }
.pin-marker.is-own { z-index: 2; cursor: grab; }
.pin-marker.is-other { z-index: 1; opacity: .6; pointer-events: none; transform: translate(-50%, calc(-100% + 1px)) scale(.75); transform-origin: 50% 100%; }
.pin-svg { display: block; width: 32px; height: 42px; overflow: visible; filter: drop-shadow(0 2px 3px #000b); }

.pin-controls { display: grid; gap: 6px; margin-bottom: 6px; }
.pin-transport { display: flex; align-items: center; gap: 8px; }
.pin-step { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: #29272f; color: var(--text); }
.pin-step:hover:not(:disabled) { background: #363040; }
.pin-step:disabled { opacity: .4; cursor: default; }
.pin-step:focus-visible, .pin-range:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pin-clock { margin-left: auto; color: var(--text); font: 700 15px var(--font); font-variant-numeric: tabular-nums; }
.pin-range { width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--purple); }
.pin-bounds { display: flex; justify-content: space-between; margin-top: -12px; color: #b1a6be; font-size: 11px; font-variant-numeric: tabular-nums; }

.pin-status { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; min-height: 30px; margin-bottom: 10px; }
.pin-message { flex: 1 1 200px; min-height: 1.4em; margin: 0; color: #cfc6da; font-size: 12px; line-height: 1.4; }
.pin-message[data-tone="warning"] { color: #ffd28a; font-weight: 600; }
.pin-goto { min-height: 44px; }
.pin-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.pin-actions-main { display: flex; gap: 10px; margin-left: auto; }
.pin-actions .button { min-height: 44px; }

@media (max-width: 600px) {
  .pin-dialog .dialog-heading { margin-bottom: 10px; }
  .pin-dialog .dialog-heading h2 { font-size: 20px; }
  .pin-help { margin-bottom: 10px; font-size: 12px; }
  .pin-stage { --pin-max-h: min(40dvh, 380px); margin-bottom: 8px; }
  .pin-actions { flex-direction: column-reverse; align-items: stretch; }
  .pin-actions-main { margin-left: 0; }
  .pin-actions-main .button { flex: 1; padding-inline: 10px; }
  .pin-remove { width: 100%; }
}