/* pay.css · Pay Equity — band auditor. Demo-specific layout only;
   tokens, cards, table, badges, buttons all come from lab-kit.css. */

.pay-stage { display: flex; flex-direction: column; gap: 16px; }

/* ---- toolbar ---- */
.pay-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.pay-toolbar__block { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pay-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft);
}
.chip[aria-pressed="true"] {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.chip[aria-pressed="true"]:hover { color: #fff; }
.pay-toolbar__action { flex-shrink: 0; }
#payScan .scan-spark { font-size: 15px; line-height: 1; }
#payScan.is-scanning .scan-spark { animation: pay-spin .9s linear infinite; }
@keyframes pay-spin { to { transform: rotate(360deg); } }

/* ---- summary banner ---- */
.pay-summary {
  display: flex; flex-direction: column; gap: 14px;
  border-left: 3px solid var(--mint);
  animation: lab-up .45s cubic-bezier(.2,.7,.2,1) backwards;
}
.pay-summary[hidden] { display: none; }
.pay-summary__stats { display: flex; flex-wrap: wrap; gap: 10px; }
.pay-stat {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; color: var(--text-2);
}
.pay-stat b { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text-1); }
.pay-stat.is-danger { background: var(--danger-soft); border-color: transparent; }
.pay-stat.is-danger b { color: var(--danger); }
.pay-stat.is-warn { background: var(--warn-soft); border-color: transparent; }
.pay-stat.is-warn b { color: var(--warn); }
.pay-stat.is-ok { background: var(--ok-soft); border-color: transparent; }
.pay-stat.is-ok b { color: var(--ok); }
.pay-summary__note {
  font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
  background: var(--mint-tint-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px;
}
.pay-summary__note b { color: var(--text-1); }
.pay-summary__note .pay-deadline {
  font-family: var(--font-mono); font-weight: 600; color: var(--mint-ink);
}

/* ---- table ---- */
.pay-count { margin-left: auto; }
.pay-table th.num, .pay-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pay-table .pay-role { font-weight: 600; color: var(--text-1); }
.pay-table .pay-median { font-family: var(--font-mono); font-weight: 600; }
.pay-table tbody tr { transition: background .2s; }
.pay-table tbody tr.is-flagged-danger { background: var(--danger-soft); }
.pay-table tbody tr.is-flagged-danger:hover { background: #fdd9d9; }
.pay-table tbody tr.is-flagged-warn { background: var(--warn-soft); }
.pay-table tbody tr.is-flagged-warn:hover { background: #fde7c0; }

/* band-range visual: a mini track with the median marker */
.pay-band { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.pay-band__nums {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft);
}
.pay-band__track {
  position: relative; height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--warn-soft), var(--mint-tint), var(--ok-soft));
}
.pay-band__mark {
  position: absolute; top: 50%; width: 3px; height: 13px; border-radius: 2px;
  background: var(--ink); transform: translate(-50%, -50%);
  transition: left .5s cubic-bezier(.2,.7,.2,1), background .3s;
}
.pay-band__mark.below { background: var(--danger); }
.pay-band__mark.above { background: var(--warn); }

/* status cell */
.pay-status { display: inline-flex; align-items: center; gap: 7px; }
.pay-fix {
  font-size: 11px; font-weight: 600; color: var(--mint-ink);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 4px 10px; transition: border-color .15s, background .15s, transform .15s;
}
.pay-fix:hover { border-color: var(--mint); background: var(--mint-tint); transform: translateY(-1px); }
.pay-fix:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* ---- compliant-range drawer ---- */
.pay-drawer {
  position: fixed; inset: 0; z-index: 80;
  display: flex; justify-content: flex-end;
  background: rgba(8,14,11,.42);
  animation: pay-fade .2s ease;
}
.pay-drawer[hidden] { display: none; }
@keyframes pay-fade { from { opacity: 0; } to { opacity: 1; } }
.pay-drawer__panel {
  width: min(440px, 100vw); height: 100%; overflow-y: auto;
  background: var(--surface); box-shadow: -8px 0 40px rgba(0,0,0,.18);
  padding: 22px; display: flex; flex-direction: column; gap: 16px;
  animation: pay-slide .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes pay-slide { from { transform: translateX(28px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.pay-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pay-drawer__title { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.01em; margin-top: 7px; }
.pay-drawer__close {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 15px; color: var(--text-soft); border: 1px solid var(--line);
  transition: background .15s, color .15s;
}
.pay-drawer__close:hover { background: var(--soft); color: var(--text-1); }
.pay-drawer__body { display: flex; flex-direction: column; gap: 14px; }
.pay-range-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.pay-range-row:last-of-type { border-bottom: 0; }
.pay-range-row .lab { color: var(--text-dim); }
.pay-range-row .val { font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--text-1); }
.pay-range-row .val.hi { color: var(--mint-ink); }
.pay-rationale {
  font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
  background: var(--mint-tint-2); border: 1px solid var(--line);
  border-left: 3px solid var(--mint); border-radius: 0 10px 10px 0; padding: 11px 13px;
}
.pay-rationale b { color: var(--text-1); }

@media (max-width: 640px) {
  .pay-toolbar { align-items: stretch; }
  .pay-toolbar__action .lab-btn { width: 100%; }
  .pay-band { min-width: 120px; }
}