/* Surround Sound Channel Test — tool-specific overrides only (Card 14, Speaker & Output Testing).
   Output-only signal tool: per-channel ID tones, sequential sweep, 5.1/7.1 channel map. No mic. */

/* Honest caveat note (matches the .X-warn-note pattern used across the site) */
.srd-warn-note {
  max-width: 820px; margin: var(--space-md) auto 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgba(255, 180, 60, 0.4); border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-sm); background: rgba(255, 180, 60, 0.06);
  color: #ffd9a0; font-size: 0.9rem; line-height: 1.55; text-align: left;
}
.srd-warn-note strong { color: #ffe9c4; }

/* Toolbar (layout select + volume) */
.srd-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: flex-end; margin-bottom: var(--space-lg); }
.srd-field { flex: 1 1 200px; min-width: 160px; }
.srd-field--vol { flex: 2 1 280px; }
.srd-select {
  width: 100%; margin-top: 6px; padding: 10px 12px; background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.95rem;
}
.srd-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(0, 255, 65, 0.18); }
.srd-range { width: calc(100% - 64px); margin-top: 10px; vertical-align: middle; accent-color: var(--color-primary); }
.srd-volval { display: inline-block; width: 56px; text-align: right; font-family: var(--font-mono); color: var(--color-primary); }

.srd-h3 { font-size: 1.0rem; margin: var(--space-lg) 0 var(--space-xs); color: var(--color-text-bright); }
.srd-hint { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 var(--space-md); }

/* Channel map — 3x3 schematic, listener implied at center-bottom */
.srd-map {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-width: 560px; margin: 0 auto var(--space-sm);
}
.srd-mapcell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 76px; border-radius: var(--radius-md); padding: 8px 6px; text-align: center;
  border: 1px solid var(--color-border); background: rgba(255, 255, 255, 0.02);
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.srd-mapcell--empty { border-style: dashed; border-color: rgba(255, 255, 255, 0.06); background: transparent; }
.srd-mapcell--seat { border: none; background: transparent; }
.srd-mapcell__id { font-family: var(--font-display, 'Orbitron', sans-serif); font-size: 1.2rem; font-weight: 700; color: var(--color-text-muted); line-height: 1; }
.srd-mapcell__name { font-size: 0.7rem; color: var(--color-text-muted); }
.srd-mapcell--sure { border-color: rgba(0, 255, 65, 0.35); }
.srd-mapcell--sure .srd-mapcell__id { color: var(--color-primary); }
.srd-mapcell--maybe { border-color: rgba(0, 229, 255, 0.22); }
.srd-mapcell--maybe .srd-mapcell__id { color: var(--color-secondary); }
.srd-mapcell--active {
  border-color: var(--color-primary); background: rgba(0, 255, 65, 0.14);
  box-shadow: 0 0 16px rgba(0, 255, 65, 0.3);
}
.srd-mapcell--active .srd-mapcell__id,
.srd-mapcell--active .srd-mapcell__name { color: var(--color-primary); }

/* Channel pads */
.srd-pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 720px) { .srd-pads { grid-template-columns: repeat(2, 1fr); } }
.srd-pad {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px 14px; min-height: 78px; cursor: pointer; text-align: left;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-body); transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.srd-pad:hover { border-color: var(--color-border-glow); box-shadow: var(--glow-sm); transform: translateY(-2px); }
.srd-pad:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(0, 255, 65, 0.25); }
.srd-pad__name { font-weight: 600; font-size: 0.95rem; color: var(--color-text-bright); }
.srd-pad__meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); }
.srd-pad__tag {
  font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-secondary); border: 1px solid rgba(0, 229, 255, 0.3); border-radius: var(--radius-full);
  padding: 1px 7px; align-self: flex-start; margin-top: 2px;
}
.srd-pad--sure { border-left: 4px solid var(--color-primary); }
.srd-pad--maybe { border-left: 4px solid rgba(0, 229, 255, 0.45); }
.srd-pad--active {
  border-color: var(--color-primary); background: rgba(0, 255, 65, 0.1);
  box-shadow: 0 0 16px rgba(0, 255, 65, 0.28);
}
.srd-pad--active .srd-pad__name { color: var(--color-primary); }

/* Actions + status */
.srd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-lg); }
.srd-actions .btn { margin: 0; }
.srd-status {
  margin-top: var(--space-md); padding: 10px 14px; min-height: 1.2em; line-height: 1.5;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: rgba(0, 255, 65, 0.03); font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-text);
}

/* Related tools grid + cards (not in design-system; defined per tool) */
.related-tools-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md);
  max-width: 900px; margin: 0 auto; text-align: left;
}
@media (max-width: 760px) { .related-tools-grid { grid-template-columns: 1fr; } }
.related-tool-card {
  display: block; padding: var(--space-md); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); text-decoration: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.related-tool-card:hover { border-color: var(--color-border-glow); box-shadow: var(--glow-sm); transform: translateY(-2px); }
.related-tool-card__title { font-weight: 600; color: var(--color-primary); margin-bottom: 4px; }
.related-tool-card__desc { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; }