/* Winston V3 — top-bar Halt button. Always visible, always recognizable.
   Mounted in index.html as static markup so the kill switch survives a
   JS boot failure; halt-button.js hydrates the click handler. */

.halt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--money-down);
  color: var(--ink-inverse);
  border: 1px solid var(--money-down);
  font-size: var(--type-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
  white-space: nowrap;
  flex: 0 0 auto;
}
.halt-btn:hover { background: var(--money-down-2, #B71918); border-color: var(--money-down-2, #B71918); }
.halt-btn:focus-visible {
  outline: 2px solid var(--ink-inverse);
  outline-offset: 2px;
}
.halt-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
}
.halt-label { font-weight: var(--weight-bold); }
.halt-label-short { display: none; }

/* Mobile (≤--bp-sm: 600px): collapse the long label to a short "STOP"
   glyph so the button still reads as a kill switch when the top-bar
   cluster is tight. Raise to --tap-min (48px) for thumb access. UAT
   walk-through #2026-05-26 found operators didn't recognize the bare
   red circle that resulted from hiding the label entirely. */
@media (max-width: 600px) {
  .halt-btn {
    min-height: var(--tap-min);
    padding: 0 var(--space-3);
    font-size: var(--type-sm);
  }
  .halt-label-long { display: none; }
  .halt-label-short { display: inline; }
}

.halt-modal .halt-phrase {
  font-family: var(--font-mono);
  background: var(--money-down-soft);
  color: var(--money-down);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-weight: var(--weight-bold);
}
.halt-modal .halt-field-label {
  display: block;
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
  font-size: var(--type-sm);
  color: var(--ink-2);
}
.halt-modal .halt-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--type-md);
  background: var(--surface);
}
.halt-modal .halt-input:focus {
  outline: 2px solid var(--money-down-soft);
  border-color: var(--money-down);
}