/* ============================================================
   salary-percentile-calculator — custom styles
   Tool-specific elements: percentile bar, distribution table,
   occupation picker, color-coded verdict tile, premium panels.
   ============================================================ */

/* ---- Compact select + search combo for occupation picker ---- */
.spc-occ-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.spc-occ-row .form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--evvy-text-secondary, #666);
}
.spc-occ-row .form-select,
.spc-occ-row .form-control {
  font-size: 0.95rem;
}
.spc-occ-meta {
  font-size: 0.75rem;
  color: var(--evvy-text-secondary, #666);
  margin-top: 0.25rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.spc-soc-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  background: var(--cluster-surface, #F7EDEF);
  color: var(--cluster-dark, #4A1528);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
[data-bs-theme="dark"] .spc-soc-code {
  background: color-mix(in srgb, var(--cluster-dark) 30%, transparent);
  color: var(--cluster-text, #fff);
}

/* ---- Live data freshness badge ---- */
.spc-data-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--cluster-dark) 10%, transparent),
              color-mix(in srgb, var(--cluster-dark) 4%, transparent));
  color: var(--cluster-dark, #4A1528);
  border: 1px solid color-mix(in srgb, var(--cluster-dark) 18%, transparent);
  margin-bottom: 0.5rem;
}
.spc-data-badge i {
  color: var(--evvy-subscriber-color, #d4a017);
}
[data-bs-theme="dark"] .spc-data-badge {
  background: color-mix(in srgb, var(--cluster-dark) 25%, transparent);
  color: var(--cluster-text, #fff);
  border-color: color-mix(in srgb, var(--cluster-dark) 40%, transparent);
}

/* ---- Verdict chip (below hero result) ---- */
.spc-verdict-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  margin-top: 0.5rem;
  letter-spacing: 0.01em;
  transition: background 0.3s ease, color 0.3s ease;
}
.spc-verdict-chip i {
  font-size: 0.85rem;
}
.spc-verdict-chip.is-below    { background: rgba(220, 53, 69, 0.14);  color: #b02a37; }
.spc-verdict-chip.is-average  { background: rgba(255, 193, 7, 0.18);  color: #a17400; }
.spc-verdict-chip.is-above    { background: rgba(25, 135, 84, 0.15);  color: #146c43; }
.spc-verdict-chip.is-top      { background: rgba(13, 110, 253, 0.15); color: #084298; }
[data-bs-theme="dark"] .spc-verdict-chip.is-below    { background: rgba(220, 53, 69, 0.25);  color: #f1aeb5; }
[data-bs-theme="dark"] .spc-verdict-chip.is-average  { background: rgba(255, 193, 7, 0.22);  color: #ffd96b; }
[data-bs-theme="dark"] .spc-verdict-chip.is-above    { background: rgba(25, 135, 84, 0.25);  color: #98ddbc; }
[data-bs-theme="dark"] .spc-verdict-chip.is-top      { background: rgba(13, 110, 253, 0.25); color: #9ec5fe; }

/* ---- Animated percentile bar ---- */
.spc-percentile-bar-wrap {
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 1.25rem 1.5rem 1.5rem;
  margin-top: 1rem;
}
[data-bs-theme="dark"] .spc-percentile-bar-wrap {
  background: var(--evvy-gray-100, #1E1E1E);
}
.spc-bar-title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--evvy-text-secondary, #666);
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.spc-bar-title small {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}
.spc-bar-track {
  position: relative;
  height: 34px;
  border-radius: 17px;
  background: linear-gradient(90deg,
    rgba(220, 53, 69, 0.32) 0%,
    rgba(255, 193, 7, 0.35) 30%,
    rgba(25, 135, 84, 0.35) 65%,
    rgba(13, 110, 253, 0.38) 100%);
  overflow: visible;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  margin: 0.25rem 0 0.5rem;
}
[data-bs-theme="dark"] .spc-bar-track {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.spc-bar-tick {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
[data-bs-theme="dark"] .spc-bar-tick {
  background: rgba(255, 255, 255, 0.18);
}
.spc-bar-tick-label {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  transform: translateX(-50%);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--evvy-text-secondary, #666);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spc-bar-marker {
  position: absolute;
  top: -8px;
  bottom: -8px;
  width: 4px;
  border-radius: 3px;
  background: var(--cluster-dark, #4A1528);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--cluster-dark) 45%, transparent),
              0 0 0 2px var(--bs-body-bg, #fff);
  left: 50%;
  transform: translateX(-50%);
  transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}
[data-bs-theme="dark"] .spc-bar-marker {
  box-shadow: 0 2px 10px color-mix(in srgb, var(--cluster-dark) 70%, transparent),
              0 0 0 2px var(--evvy-gray-100, #1E1E1E);
}
.spc-bar-marker::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cluster-dark, #4A1528);
  box-shadow: 0 0 0 3px var(--bs-body-bg, #fff),
              0 4px 12px color-mix(in srgb, var(--cluster-dark) 55%, transparent);
}
[data-bs-theme="dark"] .spc-bar-marker::after {
  box-shadow: 0 0 0 3px var(--evvy-gray-100, #1E1E1E),
              0 4px 12px color-mix(in srgb, var(--cluster-dark) 70%, transparent);
}
.spc-bar-marker.is-pulsing::after {
  animation: spcPulse 1.4s ease-out infinite;
}
@keyframes spcPulse {
  0%   { box-shadow: 0 0 0 3px var(--bs-body-bg, #fff),
                     0 0 0 0 color-mix(in srgb, var(--cluster-dark) 55%, transparent); }
  70%  { box-shadow: 0 0 0 3px var(--bs-body-bg, #fff),
                     0 0 0 14px color-mix(in srgb, var(--cluster-dark) 0%, transparent); }
  100% { box-shadow: 0 0 0 3px var(--bs-body-bg, #fff),
                     0 0 0 0 color-mix(in srgb, var(--cluster-dark) 0%, transparent); }
}
.spc-bar-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  font-size: 0.7rem;
  color: var(--evvy-text-secondary, #666);
  letter-spacing: 0.02em;
}

/* ---- Distribution table (10/25/50/75/90) ---- */
.spc-dist-table {
  margin-top: 1rem;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px);
  overflow: hidden;
  background: var(--bs-body-bg, #fff);
}
[data-bs-theme="dark"] .spc-dist-table {
  background: var(--evvy-gray-100, #1E1E1E);
}
.spc-dist-header,
.spc-dist-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  align-items: center;
}
.spc-dist-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--evvy-text-secondary, #666);
  background: color-mix(in srgb, var(--cluster-dark) 5%, transparent);
  border-bottom: 1px solid var(--evvy-border-color, #DEE2E6);
}
[data-bs-theme="dark"] .spc-dist-header {
  background: color-mix(in srgb, var(--cluster-dark) 20%, transparent);
}
.spc-dist-row {
  font-size: 0.9rem;
  border-bottom: 1px solid var(--evvy-border-color, #DEE2E6);
  transition: background 0.25s ease;
}
.spc-dist-row:last-child { border-bottom: 0; }
.spc-dist-row.is-median {
  font-weight: 700;
  background: color-mix(in srgb, var(--cluster-dark) 4%, transparent);
}
[data-bs-theme="dark"] .spc-dist-row.is-median {
  background: color-mix(in srgb, var(--cluster-dark) 18%, transparent);
}
.spc-dist-row.is-user-bracket {
  background: rgba(13, 110, 253, 0.08);
  border-left: 3px solid var(--cluster-dark, #4A1528);
}
[data-bs-theme="dark"] .spc-dist-row.is-user-bracket {
  background: rgba(13, 110, 253, 0.18);
}
.spc-dist-pct {
  font-weight: 600;
  color: var(--evvy-text-secondary, #666);
  font-variant-numeric: tabular-nums;
}
.spc-dist-annual,
.spc-dist-hourly {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.spc-dist-hourly {
  color: var(--evvy-text-secondary, #666);
  font-weight: 500;
}
.spc-dist-row.is-median .spc-dist-annual,
.spc-dist-row.is-median .spc-dist-hourly {
  color: var(--cluster-dark, #4A1528);
}
[data-bs-theme="dark"] .spc-dist-row.is-median .spc-dist-annual,
[data-bs-theme="dark"] .spc-dist-row.is-median .spc-dist-hourly {
  color: var(--cluster-text, #fff);
}

/* ---- National vs state comparison ---- */
.spc-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.spc-compare-card {
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 1rem 1.25rem;
  text-align: center;
}
[data-bs-theme="dark"] .spc-compare-card {
  background: var(--evvy-gray-100, #1E1E1E);
}
.spc-compare-card-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--evvy-text-secondary, #666);
  margin-bottom: 0.35rem;
}
.spc-compare-card-value {
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--evvy-text-primary, #333);
  line-height: 1.1;
}
.spc-compare-card-note {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.spc-compare-card-note.is-up    { background: rgba(25, 135, 84, 0.15);  color: #146c43; }
.spc-compare-card-note.is-down  { background: rgba(220, 53, 69, 0.14);  color: #b02a37; }
.spc-compare-card-note.is-flat  { background: rgba(108, 117, 125, 0.18); color: #495057; }
[data-bs-theme="dark"] .spc-compare-card-note.is-up    { background: rgba(25, 135, 84, 0.25);  color: #98ddbc; }
[data-bs-theme="dark"] .spc-compare-card-note.is-down  { background: rgba(220, 53, 69, 0.25);  color: #f1aeb5; }
[data-bs-theme="dark"] .spc-compare-card-note.is-flat  { background: rgba(108, 117, 125, 0.30); color: #d0d5db; }

/* ---- Experience context note ---- */
.spc-exp-note {
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--cluster-dark) 5%, transparent);
  border-left: 3px solid var(--cluster-dark, #4A1528);
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--evvy-text-primary, #333);
}
[data-bs-theme="dark"] .spc-exp-note {
  background: color-mix(in srgb, var(--cluster-dark) 22%, transparent);
}
.spc-exp-note strong { color: var(--cluster-dark, #4A1528); }
[data-bs-theme="dark"] .spc-exp-note strong { color: var(--cluster-text, #fff); }

/* ---- Premium section shared ---- */
.spc-premium-section {
  margin-top: 1.25rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  border-radius: var(--evvy-radius-lg, 12px);
  padding: 1.25rem 1.5rem;
  position: relative;
}
[data-bs-theme="dark"] .spc-premium-section {
  background: var(--evvy-gray-100, #1E1E1E);
}
.spc-premium-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cluster-dark, #4A1528);
  margin-bottom: 1rem;
}
[data-bs-theme="dark"] .spc-premium-section-title {
  color: var(--cluster-text, #fff);
}
.spc-premium-section-title .evvy-premium-badge {
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Multi-state comparison ---- */
.spc-state-picker {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
  align-items: center;
}
.spc-state-picker select {
  max-width: 220px;
}
.spc-state-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: color-mix(in srgb, var(--cluster-dark) 10%, transparent);
  color: var(--cluster-dark, #4A1528);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--cluster-dark) 20%, transparent);
}
[data-bs-theme="dark"] .spc-state-chip {
  background: color-mix(in srgb, var(--cluster-dark) 30%, transparent);
  color: var(--cluster-text, #fff);
  border-color: color-mix(in srgb, var(--cluster-dark) 50%, transparent);
}
.spc-state-chip button {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.spc-state-chip button:hover { opacity: 1; }
.spc-states-table {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.spc-state-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  background: color-mix(in srgb, var(--cluster-dark) 3%, transparent);
  border-radius: 8px;
  align-items: center;
  font-size: 0.88rem;
}
[data-bs-theme="dark"] .spc-state-row {
  background: color-mix(in srgb, var(--cluster-dark) 18%, transparent);
}
.spc-state-row-name { font-weight: 600; }
.spc-state-row-median { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.spc-state-row-delta {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  font-size: 0.82rem;
}
.spc-state-row-delta.is-up    { color: #146c43; }
.spc-state-row-delta.is-down  { color: #b02a37; }
.spc-state-row-delta.is-flat  { color: var(--evvy-text-secondary, #666); }
[data-bs-theme="dark"] .spc-state-row-delta.is-up    { color: #98ddbc; }
[data-bs-theme="dark"] .spc-state-row-delta.is-down  { color: #f1aeb5; }

/* ---- Total comp estimator ---- */
.spc-tc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}
.spc-tc-grid label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--evvy-text-secondary, #666);
  margin-bottom: 0.2rem;
}
.spc-tc-summary {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  background: color-mix(in srgb, var(--cluster-dark) 7%, transparent);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}
[data-bs-theme="dark"] .spc-tc-summary {
  background: color-mix(in srgb, var(--cluster-dark) 24%, transparent);
}
.spc-tc-summary-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cluster-dark, #4A1528);
}
[data-bs-theme="dark"] .spc-tc-summary-label { color: var(--cluster-text, #fff); }
.spc-tc-summary-value {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--evvy-text-primary, #333);
}
.spc-tc-delta {
  font-size: 0.82rem;
  font-weight: 600;
}

/* ---- Career earnings projection ---- */
.spc-career-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.spc-career-card {
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--cluster-dark) 5%, transparent);
  border-radius: 10px;
  text-align: center;
}
[data-bs-theme="dark"] .spc-career-card {
  background: color-mix(in srgb, var(--cluster-dark) 22%, transparent);
}
.spc-career-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--evvy-text-secondary, #666);
}
.spc-career-card-value {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--evvy-text-primary, #333);
  margin-top: 0.25rem;
}
.spc-career-card-sub {
  font-size: 0.72rem;
  color: var(--evvy-text-secondary, #666);
  margin-top: 0.15rem;
}
.spc-career-vs {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--evvy-text-secondary, #666);
  line-height: 1.45;
}
.spc-career-vs strong { color: var(--evvy-text-primary, #333); }
[data-bs-theme="dark"] .spc-career-vs strong { color: #fff; }

/* ---- Results hidden until calculated ---- */
.spc-results-detail {
  display: none;
}
.spc-results-detail.is-visible {
  display: block;
}

/* ---- Mobile ---- */
@media (max-width: 575.98px) {
  .spc-occ-row,
  .spc-compare-row,
  .spc-tc-grid {
    grid-template-columns: 1fr;
  }
  .spc-career-grid {
    grid-template-columns: 1fr;
  }
  .spc-state-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 0.25rem;
  }
  .spc-state-row-name { grid-column: 1 / -1; }
  #results-area .evvy-results-row { grid-template-columns: 1fr !important; }
  .spc-bar-title { flex-direction: column; align-items: flex-start; }
  .spc-dist-header,
  .spc-dist-row {
    font-size: 0.78rem;
    padding: 0.5rem 0.75rem;
  }
}