/* tools/full-device-check/tool.css */
.full-check-wizard-panel {
  padding: var(--space-4);
}

.wizard-stepper {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  position: relative;
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-3);
  overflow-x: auto;
}

.step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
  min-width: 60px;
}

.step-node.active {
  opacity: 1;
}

.step-node.completed .node-num {
  background-color: var(--color-success);
  color: #ffffff;
  border-color: var(--color-success);
}

.node-num {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: 700;
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.step-node.active .node-num {
  border-color: var(--color-brand-cyan);
  color: var(--color-brand-cyan);
}

.node-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.wizard-step-pane {
  display: none;
}

.wizard-step-pane.active {
  display: block;
}

.wizard-pane-hero {
  text-align: center;
  margin-bottom: var(--space-4);
}

.wizard-pane-header {
  margin-bottom: var(--space-4);
  text-align: center;
}

.step-badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-brand-cyan);
  margin-bottom: var(--space-1);
}

.wizard-pane-header h3 {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--space-1);
}

.wizard-pane-header p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  max-width: 580px;
  margin: 0 auto;
}

.device-type-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
}

.btn-device-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-device-type:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.btn-device-type.active {
  border-color: var(--color-brand-cyan);
  background-color: rgba(6, 182, 212, 0.08);
  color: var(--color-brand-cyan);
}

.detect-hints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}

.display-test-viewport {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  transition: background-color 0.2s ease;
}

.viewport-color-label {
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.swatch-controls-row {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.swatch-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-subtle);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.swatch-btn.active {
  border-color: var(--color-brand-cyan);
  transform: scale(1.15);
}

.step-decision-card {
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
}

.decision-title {
  display: block;
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}

.decision-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.audio-channel-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 520px;
  margin: 0 auto var(--space-4);
}

.channel-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  text-align: center;
}

.channel-card h4 {
  margin: 0 0 4px;
  font-size: var(--font-size-base);
}

.channel-card p {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}

.input-target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.input-tile {
  padding: var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
}

.input-tile.pressed {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--color-success);
  color: var(--color-success);
}

.interactive-click-zone {
  padding: var(--space-6);
  border: 2px dashed var(--color-border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
  margin-bottom: var(--space-4);
}

.interactive-click-zone:active {
  background-color: var(--color-bg-subtle);
}

.touch-quadrant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.touch-target-btn {
  padding: var(--space-6);
  background: var(--color-bg-surface);
  border: 2px dashed var(--color-border-subtle);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.touch-target-btn.touched {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--color-success);
  color: var(--color-success);
}

.camera-preview-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.perf-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 500px;
  margin: 0 auto var(--space-4);
}

.metric-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  text-align: center;
}

.metric-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.metric-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  font-family: var(--font-family-mono);
  color: var(--color-brand-cyan);
  margin-bottom: 2px;
}

.metric-sub {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.summary-tally-bar {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.tally-box {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
}

.pass-box { background: rgba(16, 185, 129, 0.1); border: 1px solid var(--color-success); color: var(--color-success); }
.issue-box { background: rgba(239, 68, 68, 0.1); border: 1px solid var(--color-error); color: var(--color-error); }
.skip-box { background: rgba(148, 163, 184, 0.1); border: 1px solid var(--color-text-muted); color: var(--color-text-muted); }

.tally-num {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  font-family: var(--font-family-mono);
}

.tally-text {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  font-weight: 600;
}

.diagnostic-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.diagnostic-summary-table th,
.diagnostic-summary-table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
}

.diagnostic-summary-table th {
  background-color: var(--color-bg-subtle);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.report-action-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media print {
  body { background: #ffffff !important; color: #000000 !important; }
  header, footer, nav, .site-header, .site-footer, .wizard-stepper, .report-action-buttons { display: none !important; }
  .tool-workstation-panel { border: none !important; box-shadow: none !important; padding: 0 !important; }
  .wizard-step-pane { display: none !important; }
  #wizard-pane-7 { display: block !important; }
  .diagnostic-summary-table { border: 1px solid #ccc !important; }
}