/* ═══════════════════════════════════════════════════════════════
   DIRECTION D — salary checker page
   Loaded by salary.html only, AFTER styles.css, redesign-shared.css,
   and the page's own inline <style> block (so these overrides win
   on equal-specificity .sal-* selectors).
   Removes: pill chrome, gradient buttons/cards, heavy shadows.
   Leaves the gauge bar / slider color-scale gradients — functional
   data viz, not decorative "AI tell" gradients.
   ═══════════════════════════════════════════════════════════════ */

/* kicker (was a pill badge) */
.sal-eyebrow {
  display: block;
  background: none;
  border-radius: 0;
  padding: 0;
  gap: 0;
}

/* example-search chips */
.sal-example-chip {
  border-radius: 6px;
  border-color: var(--line);
}
.sal-example-chip:hover {
  border-color: var(--orange);
  background: rgba(244,124,32,0.05);
}

/* form / results card */
.sal-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
}

/* tier picker */
.sal-tier-btn { border-radius: 6px; }

/* primary submit button */
.sal-btn {
  background: var(--navy);
  border-radius: 6px;
}
.sal-btn:hover:not(:disabled) { background: var(--navy-deep); opacity: 1; transform: none; }

/* "check another role" button */
.sal-again-btn {
  border-width: 1px;
  border-radius: 6px;
}

/* trends tile */
.sal-trends-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* small pill chips → flat tags */
.sal-chip,
.sal-prem-chip {
  border-radius: 4px;
}