/* Roles and access: people, roles, policies and parties. */
.access { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.access .lede button.info { margin-left: 4px; }
.access .search { flex-basis: 300px; max-width: 300px; }
.access .mark { display: inline-flex; flex: none; }
.access .mark svg, .access .mark img { width: 16px; height: auto; display: block; }
.access .product { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.access .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.access .who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.access .who b { font: 600 14px/20px var(--f-body); color: var(--ink); }
.access .who small { font: 400 13px/18px var(--f-body); color: var(--ink-2); }
.access .table .who b, .access .table .who small { white-space: nowrap; }
.access .table td .link { font-weight: 600; color: var(--ink); text-align: left; white-space: normal; }
.access .table td .link:hover { color: var(--link); }
.access .table td.menucell, .access .table th.menucell { width: 48px; padding-left: 0; padding-right: 8px; text-align: right; }
.access .badge { text-transform: uppercase; }

.access .rowmenu > summary { list-style: none; width: 32px; height: 32px; min-height: 32px; color: var(--link); cursor: pointer; }
.access .rowmenu > summary::-webkit-details-marker { display: none; }
.access .rowmenu .menupop { min-width: 230px; }

.access .split { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
.access .sidepanel .fields { grid-template-columns: minmax(0, 1fr); }
.access .sidepanel .cardhead .actions { flex-wrap: nowrap; }
.access .perms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.access .perms li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font: 400 14px/20px var(--f-body); }
.access .perms .ic { flex: none; margin-top: 1px; }
.access .perms.can .ic { color: var(--ok); }
.access .perms.cannot .ic { color: var(--muted); }
.access .perms.cannot li { color: var(--ink-2); }
.access .stack > div > .eyebrow { margin-bottom: 4px; }
.access .codes > summary { cursor: pointer; color: var(--link); font: 600 13px/18px var(--f-body); }
.access .codes p { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; }

.access .card .form {
  margin: 0; padding: 0; background: none; border: 0;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px 0;
}
.access .card .form > :not(.accfoot):not(.formacts) { flex: 0 0 100%; }
.access .card .form > .fields { order: -2; }
.access .card .form > .formerr { order: -1; margin: 0; color: var(--bad-fg); }
.access .card .form > .accfoot { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.access .card .form > .accfoot .grow { flex: 1; }
.access .card .form > .formacts { margin: 0 0 0 auto; padding-left: 8px; gap: 8px; }
.access .field abbr { text-decoration: none; color: var(--bad-fg); }
.access .checks {
  border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 0;
}
.access .checks legend { padding: 0 0 4px; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ink-2); }
.access .checks label {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line);
  font: 600 14px/20px var(--f-body);
}
.access .checks label:last-child { border-bottom: 0; }
.access .checks input { margin-top: 1px; flex: none; }

.access .rolesplit { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.access .rolelist { overflow: hidden; }
.access .rolelist .rolerow {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 0;
  padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; text-align: left; white-space: normal; font: inherit; color: var(--ink);
}
.access .rolelist .rolerow:last-child { border-bottom: 0; }
.access .rolelist .rolerow:hover { background: var(--hover); }
.access .rolelist .rolerow[aria-current="true"] { background: var(--tint); }
.access .rolelist .rolerow .who { flex: 1; }
.access .roleedit .cardhead .ptitle h2 { font: 600 20px/28px var(--f-head); }
.access .roleedit .cardhead .mark img { width: 22px; }
.access .roleedit .cardbody { display: flex; flex-direction: column; gap: 16px; }
.access .roleedit .fields { grid-template-columns: minmax(0, 1fr); }
.access .roleedit .form > .accfoot, .access .roleedit .form > .formacts {
  margin-bottom: -16px; padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--line);
}
.access .roleedit .form > .accfoot { margin-left: -20px; padding-left: 20px; }
.access .roleedit .form > .formacts { margin-right: -20px; padding-right: 20px; }

.access .members { list-style: none; margin: 0; padding: 0; }
.access .members li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.access .members li .who { flex: 1; }

.access .permlist > li { justify-content: flex-start; align-items: baseline; gap: 16px; }
.access .permlist code { flex: 0 0 220px; overflow-wrap: anywhere; }

#crumb:has(> a) { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
#crumb > .ic { width: 18px; height: 18px; color: var(--muted); }
#crumb > span { color: var(--ink); font-weight: 600; }

@media (min-width: 1241px) and (max-width: 1360px) {
  .access .split .prodcol { display: none; }
}

@media (max-width: 1240px) {
  .access .split, .access .rolesplit { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .access { gap: 16px; }
  .access .search { max-width: none; }
  .access .table.cards tr { position: relative; }
  .access .table.cards tr[aria-selected="true"] { background: var(--tint); }
  .access .table.cards tr[aria-selected="true"] td { background: transparent; }
  .access .table.cards td.menucell { position: absolute; top: 8px; right: 8px; width: auto; padding: 0; }
  .access .table.cards td .who { padding-right: 40px; margin-bottom: 6px; }
  .access .permlist > li { flex-direction: column; gap: 2px; }
  .access .permlist code { flex-basis: auto; }
  #crumb > a, #crumb > .ic { display: none; }
}