/* Roster page only (staff/index.html): "Find your fit" picker panel driving the roster grid. */
.fit {
  display: grid;
  grid-template-columns: minmax(220px, 0.62fr) 1.38fr;
  gap: 24px 52px;
  max-width: 1180px;
  margin: 24px 6vw 8px;
  padding: 36px 40px 26px;
  background: #fbf8f3;
  border: 1px solid rgba(140, 7, 39, 0.14);
  color: var(--ink);
  scroll-margin-top: 96px;
}
.fit-mark {
  display: flex; align-items: center; gap: 14px; margin: 0 0 16px;
  color: var(--bur); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.fit-mark::before { content: ""; width: 36px; height: 1px; background: var(--bur); }
.fit h2 { margin: 0; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; color: var(--ink); }
.fit-note { margin: 14px 0 0; color: var(--ink); font-size: 15px; max-width: 24rem; }
.fit-note a { color: var(--bur); text-underline-offset: 3px; }
.fit-reset {
  margin-top: 16px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px;
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.fit-reset:hover { color: var(--bur); }
.fit-reset[hidden] { display: none; }
.fit-steps { display: grid; gap: 18px; min-width: 0; }
.fit-q {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.fit-q span {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--bur); color: var(--bur); font-size: 11px; letter-spacing: 0;
}
.fit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fit-chips button {
  min-height: 40px; padding: 8px 16px; border: 1px solid var(--line-bur); border-radius: 999px;
  background: rgba(255, 255, 255, 0.7); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.2; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.fit-chips button:hover { border-color: var(--bur); background: #fff; }
.fit-chips button[aria-pressed="true"] { background: var(--bur); border-color: var(--bur); color: #f7f3ec; }
.fit button:focus-visible, .fit a:focus-visible, .fit select:focus-visible { outline: 2px solid var(--bur); outline-offset: 3px; }
.fit-more { display: flex; flex-wrap: wrap; gap: 12px 20px; padding-top: 4px; }
.fit-more label { color: var(--ink); font-size: 12px; letter-spacing: 0.1em; min-width: 200px; flex: 1 1 200px; max-width: 300px; }
.fit-more select { font-size: 15px; padding: 8px 10px; background: #fff; }
.fit.has-more-spec .fit-more label:first-child select { border-color: var(--bur); box-shadow: 0 0 0 1px var(--bur); }
.fit-results { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 18px; }
.fit .staff-count { margin: 0; color: var(--ink); font-size: 16px; font-weight: 500; letter-spacing: 0; min-height: 1.5em; }
.staff-empty { color: var(--ink); max-width: 40rem; }
.staff-empty a { color: var(--bur); font-weight: 600; text-underline-offset: 3px; }
/* Cards fade in softly as they come back into the filtered grid. */
.staff-grid > .person:not([hidden]) { animation: fit-card-in .26s ease both; }
@keyframes fit-card-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fit-chips button { transition: none; }
  .staff-grid > .person:not([hidden]) { animation: none; }
}
@media (max-width: 980px) {
  .fit { grid-template-columns: 1fr; padding: 28px 24px 22px; }
}
@media (max-width: 760px) {
  .fit { margin: 16px 16px 8px; padding: 22px 16px 18px; gap: 20px; }
  .fit-chips button { font-size: 14px; padding: 8px 14px; }
  .fit-more label { max-width: none; }
}