/* "Fix it for me" card (js/fixreel.js). */

.fix-card{border-color:color-mix(in srgb,var(--purple) 35%,var(--line))}
.fix-lead{margin:0 0 14px;font-size:14px;line-height:1.55}

.fix-opts{display:grid;gap:8px;margin:0 0 16px}
.fix-opt{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;cursor:pointer;
  margin:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.fix-opt input{flex:0 0 auto;width:16px;height:16px;margin:2px 0 0;padding:0;
  accent-color:var(--purple)}
.fix-opt span{flex:1;min-width:0}
.fix-opt b{display:block;font-size:14px}
.fix-opt em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.fix-opt.off{opacity:.55;cursor:default}

.fix-note{margin:0 0 16px}
.fix-note label{display:block;margin:0 0 6px;font-size:14px}
.fix-note textarea{display:block;width:100%;box-sizing:border-box;min-height:64px;resize:vertical;
  padding:10px 12px;font:inherit;font-size:14px;line-height:1.45;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.fix-note textarea:focus{outline:2px solid color-mix(in srgb,var(--purple) 55%,transparent);outline-offset:1px}
.fix-note .hint{display:block;margin:6px 0 0}

.fix-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fix-row button{display:inline-flex;align-items:center;gap:7px}
.fix-row button i{font-style:normal;opacity:.7;font-size:12px}
.fix-row .hint{margin:0}
.fix-keep{margin:14px 0 0}

.fix-working{display:flex;align-items:center;gap:10px;font-weight:600;margin:4px 0 8px}

.fix-done{display:flex;align-items:center;gap:18px;margin:2px 0 12px}
.fix-stat span{display:block;font:600 10px var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.fix-stat b{font:700 26px var(--mono);letter-spacing:-.02em}

.fix-preview{margin:0 0 14px}
#fxPlay{display:inline-flex;align-items:center;gap:7px}
.fix-preview video{display:block;width:100%;max-width:300px;max-height:520px;
  border-radius:var(--r-md);background:#000}

.fix-recheck{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.fix-recheck b{display:block;font-size:14px}
.fix-recheck .hint{display:block;margin:3px 0 10px}

@media (max-width:560px){
  .fix-row button{flex:1 1 100%;justify-content:center}
  .fix-preview video{max-width:100%}
}