/* Signal widget styles. The widget is mounted on [data-signal-widget] and owns
 * all inner controls/canvas elements. It inherits the Fira Code font face from
 * the parent page and uses the site's off-white background.
 */

.signal-page {
  min-height: 100%;
}

.signal-main {
  width: min(72rem, 100%);
}


[data-signal-widget] {
  border: 1px solid rgba(45, 42, 38, 0.28);
  min-height: 14rem;
}

.signal-widget {
  font-family: inherit;
  color: #2d2a26;
  background: transparent;
  padding: 0.5rem;
  box-sizing: border-box;
}

.signal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.signal-btn,
.signal-select {
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25;
  color: #2d2a26;
  background: transparent;
  border: 1px solid rgba(45, 42, 38, 0.25);
  border-radius: 0.25rem;
  padding: 0.35rem 0.6rem;
  min-height: 44px;
  cursor: pointer;
}

.signal-btn:hover:not(:disabled),
.signal-btn:focus-visible:not(:disabled),
.signal-select:focus-visible {
  background: rgba(45, 42, 38, 0.06);
  outline: 2px solid rgba(45, 42, 38, 0.35);
  outline-offset: 1px;
}

.signal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.signal-status {
  flex: 1 1 auto;
  min-width: 12rem;
  font-size: 0.8rem;
  line-height: 1.3;
  opacity: 0.85;
}

.signal-trace-canvas,
.signal-psd-canvas {
  display: block;
  width: 100%;
  background: #f7f5ee;
}

.signal-psd-panel {
  margin-top: 0.5rem;
}

.signal-psd-panel[hidden] {
  display: none;
}

@media (max-width: 42rem) {
  .signal-status {
    flex-basis: 100%;
    min-width: 0;
  }
}

.embedded .signal-main { padding: 20px; }
[data-signal-widget] { background: #f4f0df; border-color: #a9b7a1; border-radius: 3px; }
.signal-btn, .signal-select { background: var(--paper); border-color: #a9b7a1; }
.signal-btn[aria-pressed="true"] { background: var(--sage); }