/* ===========================================================================
 * tool-btn.css — shared canonical visual for header tool buttons.
 * ===========================================================================
 * Used by FlagButton, ScratchpadButton, and any future tool button mounted
 * in a subject's page header. NOT surface-scoped — these buttons look the
 * same across every test and every subject. Adding a new tool = add a new
 * <ToolName>Button component that emits .tool-btn; no per-surface override.
 *
 * .is-on is the toggled state (e.g. FlagButton when isFlagged === true).
 * ========================================================================= */

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--ink-10);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui, inherit);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
}
.tool-btn:hover { border-color: var(--ink-30); }
.tool-btn:focus-visible {
  outline: 2px solid var(--accent-coral);
  outline-offset: 2px;
}
.tool-btn.is-on {
  background: var(--accent-coral);
  border-color: var(--accent-coral);
  color: #fff;
}
.tool-btn svg { display: block; }