.role-preview-banner[hidden]{display:none}
.role-preview-banner{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem 1.25rem;padding:.85rem max(4%,calc((100vw - 1310px)/2));background:#f4e4b9;color:#142e40;border-bottom:2px solid #aa8547;font-size:.95rem}
.role-preview-banner #role-preview-label{font-weight:800}
.role-preview-banner button{margin-left:auto;padding:.55rem .85rem;border:1px solid currentColor;border-radius:.5rem;background:transparent;font-weight:700}
.role-preview-control{grid-column:1/-1;margin-bottom:1rem;padding:1.25rem 1.5rem;border:1px solid #cfad70;border-radius:.8rem;background:#fffaf0}
.role-preview-control h2{margin:0 0 .3rem;font-size:1.25rem}
.role-preview-control p{margin:.2rem 0 .9rem;color:#536774}
.role-preview-options{display:flex;flex-wrap:wrap;gap:.65rem}
.role-preview-options button{padding:.75rem 1rem;border:1px solid #b4c2c7;border-radius:.5rem;background:#fff;color:#142e40;font-weight:700}
.role-preview-options button:hover,.role-preview-options button:focus-visible{border-color:#aa8547;background:#fff4d8}
.role-preview-options button[aria-pressed="true"]{border-color:#142e40;background:#142e40;color:#fff}
@media(max-width:650px){.role-preview-banner{padding:.85rem 1rem}.role-preview-banner button{margin-left:0}.role-preview-control{padding:1rem}.role-preview-options button{width:100%}}