/* The Roles hub's role picker and the role-home screenshots (scripts/site/roles/). Site tokens only. */
.roles-change { margin: var(--space-9) 0; border: 1px solid var(--line-strong); background: var(--surface); }
.roles-change-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--line-strong); }
.roles-change[data-state="static"] .roles-change-tabs { display: none; }
.roles-change-tabs button {
  display: grid; gap: var(--space-1); text-align: left; padding: var(--space-5) var(--space-5); min-height: 64px; border: 0; border-right: 1px solid var(--line);
  background: transparent; color: var(--ink); font: inherit; cursor: pointer;
  transition: background-color var(--dur-moderate) var(--ease-standard);
}
.roles-change-tabs button:last-child { border-right: 0; }
.roles-change-tabs button:hover { background: var(--surface-2); }
.roles-change-tabs button[aria-selected="true"] { background: var(--ink); color: var(--cotton); box-shadow: inset 0 -5px 0 var(--saffron); }
.roles-change-tabs button:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.roles-change-step { font: var(--type-label); }
.roles-change-who { font: var(--type-strong); }
.roles-change-panel { padding: var(--space-8) var(--gutter); display: grid; gap: var(--space-5); max-width: 78ch; }
.roles-change-panel + .roles-change-panel { border-top: 1px solid var(--line); }
.roles-change[data-state="ready"] .roles-change-panel + .roles-change-panel { border-top: 0; }
.roles-change-panel[hidden] { display: none; }
.roles-change-panel h3 { margin: 0; font: var(--type-h3); display: flex; gap: var(--space-5); align-items: baseline; }
.roles-change-n { display: inline-grid; place-items: center; min-width: 1.8em; height: 1.8em; background: var(--ink); color: var(--cotton); font: var(--type-small-strong); }
.roles-change-from { font: var(--type-small); color: var(--ink-2); margin: 0; }
.roles-change-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.roles-change-list li { display: grid; gap: var(--space-1); border-top: var(--rule-hair) solid var(--line-strong); padding-top: var(--space-3); font: var(--type-small); }
.roles-change-list span { color: var(--ink-2); }
.roles-change-measure { border-top: 1px solid var(--line); padding-top: var(--space-5); }
.roles-change .data-note { margin: 0; padding: var(--space-5) var(--gutter); border-top: 1px solid var(--line); }

.roles-shot { margin: var(--space-9) 0; display: grid; gap: var(--space-5); }
.roles-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); background: var(--surface); }
.roles-shot figcaption { font: var(--type-small); color: var(--ink-2); }

@media (max-width: 900px) {
  .roles-change-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roles-change-tabs button:nth-child(3n) { border-right: 0; }
  .roles-change-tabs button:nth-child(-n + 3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .roles-change-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roles-change-tabs button:nth-child(3n) { border-right: 1px solid var(--line); }
  .roles-change-tabs button:nth-child(2n) { border-right: 0; }
  .roles-change-tabs button:nth-child(-n + 4) { border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .roles-change-tabs button { transition: none; } }