/* Redwork review (redwork.js). Shares the auto-digitize layout (autodigitize.css);
   only what is particular to a single-line trace lives here. */

.rw-mark {
  width: 32px; height: 32px; border-radius: 10px; flex: none; background: #b3202b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 22c4-9 7 4 11-4s6-9 11-3' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-dasharray='4 3'/%3E%3C/svg%3E") center / 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 22c4-9 7 4 11-4s6-9 11-3' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-dasharray='4 3'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.rw-stitch { min-width: 170px; }

.rw-play {
  border: 1px solid var(--field-line); background: var(--field); color: var(--ink); font: inherit;
  font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 9px; cursor: pointer; transition: var(--tr);
}
.rw-play:hover { border-color: var(--accent); }

.rw-result h4 { font-size: 13.5px; }
.rw-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 10px 0 0; }
.rw-facts div { display: flex; flex-direction: column; gap: 1px; }
.rw-facts dt { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rw-facts dd { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); }

.rw-set { padding: 4px 2px 2px; }
.rw-set h5 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 4px 0 0; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.rw-set h5 output { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.rw-set .adr-choices { margin-top: 7px; }
.rw-set .adr-muted { margin-top: 6px; }
.rw-set input[type="range"] { width: 100%; margin: 8px 0 2px; accent-color: var(--accent); }

.rw-notes {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px;
  background: rgba(var(--ink-rgb), .05); border: 1px solid var(--card-line);
}
.rw-notes p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 520px) {
  .rw-stitch { min-width: 0; flex: 1; }
  .rw-play { order: 3; }
}