/* Granskningen före OK (public/js/patch-review.js): en rad per ändring i
   INCA:s förslag — ✕ tar bort (48 px för handskar), ett tryck på raden rättar.
   Samma rader i röstpanelen, rutan Tala och chatten; bygger på .voice-pv-row. */

.voice-pv-list { display: flex; flex-direction: column; gap: 6px; }

.voice-pv-row.prv-row {
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.prv-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
button.prv-main { cursor: pointer; }
button.prv-main:active { background: rgba(1, 94, 159, 0.08); }
button.prv-main:focus-visible { outline: 3px solid var(--interactive); outline-offset: -3px; }
.prv-main .voice-pv-text { flex: 1 1 10em; }
/* Det som står under raden: rättad, följer med, ✕ tar också bort … */
.prv-tag, .prv-note { flex: 1 0 100%; font-size: 13px; line-height: 1.3; font-weight: 700; }
.prv-tag { color: var(--interactive); }
.prv-tag::before { content: '✎ '; }
.prv-note { color: var(--text-secondary); }
.prv-pen { flex: 0 0 auto; margin-left: auto; color: var(--interactive); font-size: 15px; opacity: 0.7; }

.prv-x {
    flex: 0 0 auto;
    min-width: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-left: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.prv-x:active { background: #fdecec; color: var(--danger); }
.prv-x:focus-visible { outline: 3px solid var(--interactive); outline-offset: -3px; }
.prv-x--back { font-size: 15px; color: var(--interactive); padding: 0 12px; }
.prv-x--back:active { background: rgba(1, 94, 159, 0.1); color: var(--interactive); }

/* Borttagen rad: överstruken och blek, med Ångra. */
.voice-pv-row.prv-row--off { background: #f2f3f5; border-left-color: #b9bec6; }
.prv-row--off .voice-pv-label, .prv-row--off .voice-pv-text { text-decoration: line-through; color: var(--text-secondary); }
.prv-row--off .voice-pv-label { color: var(--text-secondary); }

.prv-none { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--text-secondary); }

/* Redigeraren under raden. */
.prv-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: -2px 0 4px;
    padding: 10px;
    border: 2px solid var(--interactive);
    border-radius: 8px;
    background: var(--bg-card);
}
.prv-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prv-field-label { font-size: 12px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--interactive); }
.prv-before { font-size: 14px; line-height: 1.35; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.prv-input, .prv-select {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--border-strong, #9aa3ad);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    font-size: 16px;            /* 16 px: iOS zoomar inte in */
    line-height: 1.35;
}
textarea.prv-input { resize: vertical; min-height: 64px; }
.prv-input:focus, .prv-select:focus { outline: none; border-color: var(--interactive); box-shadow: 0 0 0 2px rgba(1, 94, 159, 0.25); }

.prv-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.prv-opt {
    flex: 1 1 72px;
    min-height: 48px;
    padding: 4px 10px;
    border: 2px solid var(--border-strong, #9aa3ad);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}
.prv-opt.active { background: var(--interactive); border-color: var(--interactive); color: #fff; }
/* Data: triagens och riskens färger, trenden. */
.prv-opt--red.active, .prv-opt--worse.active { background: #d32f2f; border-color: #d32f2f; color: #fff; }
.prv-opt--yellow.active, .prv-opt--stable.active { background: #f2c200; border-color: #c9a100; color: #000; }
.prv-opt--green.active, .prv-opt--better.active { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.prv-opt--black.active { background: #000; border-color: #000; color: #fff; }

.prv-editor-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.prv-btn {
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid var(--border-strong, #9aa3ad);
    border-radius: 10px;
    background: var(--bg-secondary, #f0f2f5);
    color: var(--text-primary);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}
.prv-btn--primary { background: var(--interactive); border-color: var(--interactive); color: #fff; min-width: 96px; }
.prv-btn--quiet { margin-right: auto; background: transparent; border-color: transparent; color: var(--interactive); padding: 0 8px; }
.prv-btn:active { transform: scale(0.97); }

@media (max-width: 600px) {
    .prv-main .voice-pv-label { max-width: none; }
    .prv-editor-actions .prv-btn { flex: 1 1 auto; }
    .prv-btn--quiet { flex-basis: 100%; }
}