/* ═══════════════════════════════════════════════════════════════
   Conversion Workspace — Epic 7.
   Reuses style.css's existing design tokens (--space-*, --font-*,
   --bg-*, --border-*, --text-*, --cyan/--green/--amber/--red and
   their -dim variants, --r-*) — no new tokens introduced.
   ═══════════════════════════════════════════════════════════════ */

.cw-workspace {
  margin-top: var(--space-4);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  font-family: var(--font-ui);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ── Panel header (Finding #9) — names the panel and shows overall status
   at a glance before the user even looks at a tab. ── */
.cw-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.cw-panel-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }

/* ── Tabs ── */
.cw-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.cw-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.cw-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.cw-tab-active { background: var(--cyan-dim); color: var(--cyan); border-color: rgba(0,212,255,0.25); }

.cw-tabpanel { display: none; padding: var(--space-4); }
.cw-tabpanel-active { display: block; }

/* ── Pipeline (ConversionPipeline / ProgressStep) ── */
.cw-pipeline { display: flex; flex-direction: column; gap: var(--space-2); }
.cw-step { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--text-secondary); }
.cw-step-icon { width: 18px; text-align: center; font-family: var(--font-mono); }
.cw-step-completed .cw-step-icon { color: var(--green); }
.cw-step-completed .cw-step-label { color: var(--text-primary); }
.cw-step-running .cw-step-icon { color: var(--cyan); animation: cwPulse 1.2s infinite ease-in-out; }
.cw-step-running .cw-step-label { color: var(--text-primary); font-weight: 600; }
.cw-step-failed .cw-step-icon { color: var(--red); }
.cw-step-failed .cw-step-label { color: var(--red); }
.cw-step-pending .cw-step-icon { color: var(--text-faint); }
@keyframes cwPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* TIME-2 (Backend Execution & Generation Timing Telemetry) — Stage Timing */
.cw-stage-timing {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.cw-stage-timing-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: var(--space-1);
}
.cw-stage-timing-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  padding: 1px 0;
}

/* ── Timeline ── */
.cw-timeline { display: flex; flex-direction: column; }
.cw-timeline-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cw-timeline-row:last-child { border-bottom: none; }
.cw-timeline-time {
  flex: 0 0 56px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  padding-top: 1px;
}
.cw-timeline-label { font-size: 13px; color: var(--text-primary); }
.cw-timeline-detail { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.cw-timeline-failed .cw-timeline-label { color: var(--red); }
.cw-timeline-completed .cw-timeline-label { color: var(--green); }

/* ── Badges (StatusBadge) ── */
.cw-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  margin-right: var(--space-2);
}
.cw-badge-ok, .cw-badge-pass, .cw-badge-completed { background: var(--green-dim); color: var(--green); }
.cw-badge-error, .cw-badge-fail, .cw-badge-failed, .cw-badge-blocker { background: var(--red-dim); color: var(--red); }
.cw-badge-warning, .cw-badge-advisory { background: var(--amber-dim); color: var(--amber); }

/* ── Validation (ValidationCard) ── */
.cw-validation-summary { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: 13px; }
.cw-validation-recommend { color: var(--text-secondary); }
.cw-category { border: 1px solid var(--border-subtle); border-radius: var(--r-md); margin-bottom: var(--space-2); overflow: hidden; }
.cw-category-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-elevated); }
.cw-category-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.cw-category-counts { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.cw-category-items { padding: var(--space-2) var(--space-3); }
/* Conversion Results UI/UX — hybrid progressive disclosure for long
   validation reports (see ValidationCard()/_categoryItemsBlock()): the
   collapsed view (≤5 items) never scrolls; only the EXPANDED view of a
   genuinely long report (>8 items total) gets a scroll cap, so the page
   itself never grows unbounded once a user expands a large report. */
.cw-category-items-scroll { max-height: 320px; overflow-y: auto; }
.cw-category-toggle {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
  cursor: pointer;
  transition: background 0.15s ease;
}
.cw-category-toggle:hover { background: var(--bg-hover); }
.cw-category-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

.cw-rule { border: 1px solid var(--border-subtle); border-radius: var(--r-sm); margin-bottom: var(--space-1); background: var(--bg-base); }
.cw-rule summary { cursor: pointer; padding: var(--space-2); display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.cw-rule summary::-webkit-details-marker { display: none; }
/* Finding H5/H1 — <summary> gave no visual hint it was expandable; a
   CSS-only chevron (no image asset, no JS) that rotates on [open] restores
   the affordance for every collapsible row in this file (rules, manifest
   sections, certification categories all share .cw-disclosure-marker). */
.cw-disclosure-marker { margin-left: auto; color: var(--text-muted); font-size: 10px; transition: transform var(--t-fast); flex-shrink: 0; }
details[open] > summary .cw-disclosure-marker { transform: rotate(90deg); }
.cw-rule-title { font-size: 12px; color: var(--text-primary); }
.cw-rule-body { padding: 0 var(--space-3) var(--space-3); }
.cw-rule-row { font-size: 12px; color: var(--text-secondary); margin-top: var(--space-1); }
.cw-rule-key { color: var(--text-muted); margin-right: var(--space-1); }

/* ── Repair / Resume ── */
.cw-repair-available, .cw-repair-running { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: 13px; color: var(--text-primary); }
.cw-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border-muted); border-top-color: var(--cyan); animation: cwSpin 0.7s linear infinite; }
@keyframes cwSpin { to { transform: rotate(360deg); } }
.cw-repair-attempt { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--text-secondary); padding: var(--space-1) 0; }
.cw-subhead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: var(--space-3) 0 var(--space-2); }

.cw-resume { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.cw-resume .cw-btn { margin-top: var(--space-1); }
.cw-resume-row { font-size: 12px; color: var(--text-secondary); }
.cw-resume-row .cw-rule-key { display: inline-block; min-width: 140px; }
/* Conversion Retry Persistence & UI Simplification — helper text under the
   single unified "Retry Conversion" button (ErrorDetails/RepairCard/
   ResumePanel all share this same class). */
.cw-resume-helper { font-size: 11px; margin-top: var(--space-1); }

/* ── Manifest ── */
.cw-manifest-section { border: 1px solid var(--border-subtle); border-radius: var(--r-sm); margin-bottom: var(--space-1); background: var(--bg-base); }
.cw-manifest-section summary { cursor: pointer; padding: var(--space-2) var(--space-3); font-size: 12px; font-weight: 600; color: var(--text-primary); list-style: none; display: flex; align-items: center; gap: var(--space-2); }
.cw-manifest-section summary::-webkit-details-marker { display: none; }
.cw-count { color: var(--text-muted); font-weight: 400; }
.cw-manifest-list { padding: 0 var(--space-3) var(--space-2); }
.cw-manifest-row { font-size: 12px; color: var(--text-secondary); padding: 2px 0; }

/* ── Tables (GeneratedFilesTable) ── */
.cw-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cw-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--border-subtle); }
.cw-table td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }

/* ── Repair Reports ── */
.cw-repair-report { border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: var(--space-3); margin-bottom: var(--space-2); background: var(--bg-base); }
.cw-repair-report-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }

/* ── Error / Success ── */
.cw-error-panel, .cw-success-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.cw-error-headline { margin-bottom: var(--space-1); }
.cw-error-reasons { margin: 0; padding-left: var(--space-4); font-size: 13px; color: var(--text-primary); }
.cw-error-reasons li { margin-bottom: var(--space-1); }
.cw-success-headline { font-size: 15px; font-weight: 700; color: var(--green); margin-bottom: var(--space-1); }
.cw-success-cert { font-size: 13px; margin-bottom: var(--space-1); }
.cw-success-row { font-size: 13px; color: var(--text-primary); }
.cw-success-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }

/* ── Buttons ── */
.cw-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-muted);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--t-fast);
}
.cw-btn:hover { background: var(--bg-hover); }
.cw-btn-primary { background: var(--cyan-dim); color: var(--cyan); border-color: rgba(0,212,255,0.3); }
.cw-btn-primary:hover { background: rgba(0,212,255,0.2); }

/* ── Utility ── */
.cw-empty { font-size: 12px; color: var(--text-muted); padding: var(--space-2) 0; }
.cw-mono { font-family: var(--font-mono); }
.cw-muted { color: var(--text-muted); }