/**
 * Proof annotator
 * Shared by the portal and the admin proof view.
 */

.mwp-annotate-hint {
    color: #6b7280;
    font-size: 14px;
    margin: 0 0 14px;
}

.mwp-annotate-figure { margin-bottom: 26px; }

.mwp-annotate-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.mwp-annotate-image {
    display: block;
    max-width: 100%;
    height: auto;
    cursor: crosshair;
}

/* Pins are positioned by percentage, so they hold their spot at any size */
.mwp-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    border: 2px solid #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    padding: 0;
    z-index: 2;
}
.mwp-pin:hover { transform: translate(-50%, -50%) scale(1.15); }
.mwp-pin.is-active {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35);
}
.mwp-pin.is-pending {
    background: #16a34a;
    animation: mwp-pin-pulse 1.4s ease-in-out infinite;
}
.mwp-pin.is-resolved { background: #9ca3af; }

@keyframes mwp-pin-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
}

/* Notes list, numbered to match the pins */
.mwp-pin-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    counter-reset: none;
}
.mwp-pin-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 10px;
    border-radius: 8px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.mwp-pin-item:last-child { border-bottom: none; }
.mwp-pin-item:hover { background: #f9fafb; }
.mwp-pin-item.is-active { background: #fffbeb; }
.mwp-pin-item.is-resolved .mwp-pin-text { color: #9ca3af; text-decoration: line-through; }

.mwp-pin-number {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mwp-pin-item.is-resolved .mwp-pin-number { background: #9ca3af; }

.mwp-pin-body { flex: 1; min-width: 0; }
.mwp-pin-text { font-size: 14.5px; line-height: 1.55; color: #374151; word-break: break-word; }
.mwp-pin-meta { font-size: 12px; color: #9ca3af; margin-top: 3px; }

.mwp-pin-resolve {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    font-size: 12px;
    padding: 3px 9px;
    cursor: pointer;
    color: #6b7280;
    white-space: nowrap;
}
.mwp-pin-resolve:hover { border-color: #9ca3af; color: #374151; }

/* The note form, moved under whichever image was clicked */
.mwp-annotate-form {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 22px;
}
.mwp-annotate-form-title { font-weight: 600; margin: 0 0 8px; font-size: 14px; }
.mwp-annotate-form textarea,
.mwp-general-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
}
.mwp-annotate-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.mwp-annotate-result, .mwp-general-result { font-size: 13px; margin-left: 4px; }

.mwp-general-comments { margin-top: 26px; }
.mwp-general-comments h3 { font-size: 15px; margin: 0 0 12px; }
.mwp-general-list { list-style: none; margin: 0 0 14px; padding: 0; }
.mwp-general-list li { padding: 11px 0; border-bottom: 1px solid #f3f4f6; }
.mwp-general-list li:last-child { border-bottom: none; }
.mwp-general-comments .mwp-general-input { margin-bottom: 8px; }