.security-controls {
  display: grid;
  gap: 12px;
  padding: 24px 0;
  border-top: 1px solid #dce0df;
}
.security-controls .eyebrow { margin: 0; }
.security-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.security-options + .eyebrow { margin-top: 12px; }
.security-options button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid #d3d8db;
  border-radius: 30px;
  background: #fff;
  color: #29363d;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.security-options button[aria-pressed="true"] {
  background: #29363d;
  border-color: #29363d;
  color: #fff;
}
.security-options button:focus-visible {
  outline: 3px solid #9a343b;
  outline-offset: 3px;
}
.security-swatch {
  width: 12px;
  height: 12px;
  border: 1px solid #b2b4b6;
  border-radius: 50%;
}
[data-colour="cream"] .security-swatch { background: #e6d5b6; }
[data-colour="taupe"] .security-swatch { background: #82766c; }
[data-colour="navy"] .security-swatch { background: #202a43; }
[data-colour="grey"] .security-swatch { background: #414448; }
[data-colour="maroon"] .security-swatch { background: #662832; }
.security-selection { margin: 8px 0 18px; }
.security-selection h2 { font-size: 24px; font-weight: 500; }
.security-selection p { margin: 4px 0; font-size: 13px; }
#security-board-status:empty { display: none; }
#design, #role-function { scroll-margin-top: 90px; }