/*
 * psc_sop_widgets.css — styles for timer_checklist_step + defect_log_step.
 * Token-only (no raw hex); paired with psc_sop_widgets.js.
 * Buttons (.psc-btn-primary/secondary/ghost) live in kanban.css.
 */
:root {
  --psc-sop-navy:       var(--bk-navy, #1a1a2e);
  --psc-sop-gold:       var(--bk-gold, #c29954);
  --psc-sop-bg:         var(--bk-parchment, #f4f5f7);
  --psc-sop-card:       var(--bk-card, #ffffff);
  --psc-sop-border:     var(--bk-border, #e9ecef);
  --psc-sop-text:       var(--bk-text, #2d2d3a);
  --psc-sop-text-muted: var(--bk-text-muted, #6c757d);
  --psc-sop-success:    var(--bk-emerald, #10B981);
  --psc-sop-amber:      var(--bk-amber, #F59E0B);
  --psc-sop-danger:     var(--bk-red, #DC2626);
  --psc-sop-radius-sm:  var(--bk-radius-sm, 6px);
  --psc-sop-radius-pill: var(--bk-radius-pill, 9999px);
}

/* shared header */
.psc-tchk-header, .psc-dlog-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; }
.psc-tchk-header .material-symbols-outlined, .psc-dlog-header .material-symbols-outlined { color: var(--psc-sop-gold); }
.psc-tchk-title, .psc-dlog-title { font-weight: 600; color: var(--psc-sop-navy); }
.psc-tchk-count, .psc-dlog-count {
  margin-left: auto; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--psc-sop-text-muted); background: var(--psc-sop-bg); border-radius: var(--psc-sop-radius-pill); padding: 0.15rem 0.55rem;
}

/* ── timer checklist ── */
.psc-tchk-list { list-style: none; margin: 0; padding: 0; }
.psc-tchk-item { border: 1px solid var(--psc-sop-border); border-radius: var(--psc-sop-radius-sm); padding: 0.55rem 0.7rem; margin-bottom: 0.5rem; background: var(--psc-sop-card); }
.psc-tchk-item.is-done { border-color: var(--psc-sop-success); background: color-mix(in srgb, var(--psc-sop-success) 6%, var(--psc-sop-card)); }
.psc-tchk-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.psc-tchk-label { font-weight: 600; color: var(--psc-sop-text); }
.psc-tchk-duration { margin-left: auto; font-size: 0.72rem; color: var(--psc-sop-text-muted); font-variant-numeric: tabular-nums; }
.psc-tchk-timer-host { display: flex; align-items: center; gap: 0.6rem; }
.psc-tchk-countdown { font-size: 0.8rem; font-weight: 600; color: var(--psc-sop-amber); font-variant-numeric: tabular-nums; }
.psc-tchk-done-label { color: var(--psc-sop-success); font-weight: 600; font-size: 0.82rem; }
.psc-tchk-item.is-done .material-symbols-outlined { color: var(--psc-sop-success); }
.psc-tchk-actions { margin-top: 0.6rem; }

/* ── defect log ── */
.psc-dlog-list, .psc-dlog-draft { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.psc-dlog-entry, .psc-dlog-draft-item {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem;
  padding: 0.35rem 0.55rem; border-left: 3px solid var(--psc-sop-border);
  background: var(--psc-sop-bg); border-radius: var(--psc-sop-radius-sm); margin-bottom: 0.3rem;
}
.psc-dlog-minor { border-left-color: var(--psc-sop-text-muted); }
.psc-dlog-major { border-left-color: var(--psc-sop-amber); }
.psc-dlog-critical { border-left-color: var(--psc-sop-danger); }
.psc-dlog-cat { font-weight: 700; color: var(--psc-sop-navy); }
.psc-dlog-sev { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--psc-sop-text-muted); }
.psc-dlog-desc { color: var(--psc-sop-text); }
.psc-dlog-photo { margin-left: auto; font-size: 0.72rem; color: var(--psc-sop-text-muted); }
.psc-dlog-empty {
  padding: 1rem; text-align: center; color: var(--psc-sop-text-muted);
  background: var(--psc-sop-bg); border: 1px dashed var(--psc-sop-border); border-radius: var(--psc-sop-radius-sm); margin-bottom: 0.6rem;
}
.psc-dlog-form { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.psc-dlog-descin { flex: 1 1 140px; }
.psc-dlog-cat, .psc-dlog-sev-in, .psc-dlog-descin, .psc-dlog-photoin {
  min-height: 40px; padding: 0.4rem 0.55rem; border: 1px solid var(--psc-sop-border);
  border-radius: var(--psc-sop-radius-sm); font-size: 0.82rem;
}
.psc-dlog-cat:focus-visible, .psc-dlog-sev-in:focus-visible, .psc-dlog-descin:focus-visible, .psc-dlog-photoin:focus-visible {
  outline: 2px solid var(--psc-sop-navy); outline-offset: 2px;
}
.psc-dlog-live { display: inline-block; margin-top: 0.4rem; font-size: 0.72rem; color: var(--psc-sop-text-muted); }
.psc-dlog-rm { margin-left: auto; min-height: 32px; color: var(--psc-sop-danger); }
.psc-dlog-actions { margin-top: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  .psc-tchk-countdown, .psc-tchk-item { transition-duration: 0.01ms !important; }
}