/**
 * access — the register of who holds a console role.
 *
 * Shared primitives live in style.css and are reused rather than restated: `.toolbar`,
 * `.scroller`, `.result`, `.role-pill`, `.self-note`, `.flag`, `.loading`, `.view-error`.
 * Everything here is scoped to `#view-access` so no other view inherits it.
 *
 * Two rules from DESIGN.md govern most of what follows:
 *
 *  - Marking Orange is legal at 24px and above only. Every signal on this screen — the
 *    withdraw control, the escalation notice, the server's standing refusals — sets
 *    below that, so all of them take `--mark-ink` and none take `--mark`.
 *  - The registration offset is the one permitted depth device, and it belongs on a
 *    document plate. The register is the document this screen exists to produce, so it
 *    carries the offset and nothing else on the screen does.
 */

/* --------------------------------------------------------------------------
   Head
   -------------------------------------------------------------------------- */

#view-access h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 118;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: var(--md);
}

#view-access .ac-standfirst {
  max-width: 72ch;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: var(--lg);
}

/* --------------------------------------------------------------------------
   Toolbar: the tally on the left, Refresh pushed to the right as in the design
   -------------------------------------------------------------------------- */

#view-access .toolbar {
  justify-content: flex-end;
  gap: var(--md);
}

#view-access .ac-tally {
  margin: 0;
  flex: 1 1 240px;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--ink-secondary);
}

/* Counts and role keys are measured values; the sentence around them is not. */
#view-access .ac-n,
#view-access .ac-key {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#view-access .ac-tally-role {
  white-space: nowrap;
}
#view-access .ac-tally-role .ac-key {
  margin-left: var(--xs);
  letter-spacing: 0.04em;
}

#view-access .ac-busy {
  display: none;
  color: var(--ink-secondary);
}
#view-access[aria-busy='true'] .ac-busy {
  display: inline-block;
}

#view-access .ac-refresh {
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
}
#view-access .ac-mark {
  display: block;
  flex: none;
}

/* --------------------------------------------------------------------------
   The register. A document plate, and the one registration offset on this screen.
   -------------------------------------------------------------------------- */

#view-access .ac-scroll-note {
  display: none;
  max-width: 60ch;
  margin: 0 0 var(--sm);
  font-size: 0.8125rem;
  color: var(--ink-secondary);
}

#view-access .ac-register {
  background: var(--paper-lit);
  border: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  box-shadow: 3px 3px 0 0 var(--ink);
  margin-bottom: var(--md);
  scrollbar-color: var(--ink-secondary) var(--paper-sunk);
}
#view-access .ac-register:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* The scroll affordance stays visible rather than fading in on hover. */
#view-access .ac-register::-webkit-scrollbar {
  height: 10px;
}
#view-access .ac-register::-webkit-scrollbar-track {
  background: var(--paper-sunk);
  border-top: 1px solid var(--rule);
}
#view-access .ac-register::-webkit-scrollbar-thumb {
  background: var(--ink-secondary);
  border: 0;
}

#view-access .ac-foot {
  max-width: 72ch;
  margin: 0 0 var(--lg);
  font-size: 0.8125rem;
  color: var(--ink-secondary);
}

#view-access #access-table {
  min-width: 760px;
}

#view-access #access-table thead tr {
  background: var(--paper-sunk);
}
#view-access #access-table th {
  padding: 12px var(--md);
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  vertical-align: top;
}
#view-access #access-table th:nth-child(1) { width: 26%; }
#view-access #access-table th:nth-child(2) { width: 21%; }
#view-access #access-table th:nth-child(3) { width: 15%; }
#view-access #access-table th:nth-child(4) { width: 22%; }
#view-access #access-table th:nth-child(5) { width: 16%; }

/* The column's meaning, printed once, above every withdraw control on the screen. */
#view-access .ac-th-note {
  display: block;
  margin-top: var(--xs);
  max-width: 24ch;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
  white-space: normal;
  color: var(--ink-secondary);
}

#view-access #access-table td {
  padding: 12px var(--md);
}
#view-access .ac-row:hover > td {
  background: var(--paper-sunk);
}

/* --------------------------------------------------------------------------
   Who
   -------------------------------------------------------------------------- */

#view-access .ac-who {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  font-variation-settings: 'wdth' 106;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
/* An address or a uid identifies rather than names, so it sets as a measured value. */
#view-access .ac-who.ac-measured {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
#view-access .ac-email {
  display: inline-block;
  margin-top: var(--xs);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-secondary);
}
#view-access .ac-row > td > br {
  display: none;
}

#view-access .self-note {
  display: block;
  margin-top: var(--sm);
  max-width: 34ch;
  padding-left: var(--sm);
  border-left: 2px solid var(--ink);
  line-height: 1.4;
}
#view-access .ac-row--self > td {
  background: var(--paper);
}
#view-access .ac-row--self:hover > td {
  background: var(--paper-sunk);
}

/* --------------------------------------------------------------------------
   Role held, and the scope it carries
   -------------------------------------------------------------------------- */

#view-access .role-pill {
  background: var(--paper);
}
#view-access .ac-scope {
  margin: var(--sm) 0 0;
  max-width: 28ch;
  font-family: var(--display);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-secondary);
}

/* A refusal the server will make, printed before anyone runs into it. */
#view-access .ac-refusal {
  margin: var(--sm) 0 0;
  max-width: 32ch;
  padding-left: var(--sm);
  border-left: 2px solid var(--mark-ink);
  font-family: var(--display);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--mark-ink);
}

#view-access .ac-stamp {
  color: var(--ink-secondary);
  white-space: nowrap;
}
#view-access .ac-stamp .absent {
  white-space: normal;
}

/* --------------------------------------------------------------------------
   Change to. The scope is legible at the point of choosing.
   -------------------------------------------------------------------------- */

#view-access .access-role {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  background: var(--paper);
  border-color: var(--ink-secondary);
  padding: 8px 10px;
  min-width: 130px;
}
#view-access .access-role[disabled] {
  border-color: var(--rule);
  color: var(--ink-secondary);
  cursor: not-allowed;
}

#view-access .ac-pending {
  margin-top: var(--sm);
  max-width: 32ch;
  padding-left: var(--sm);
  border-left: 2px solid var(--rule);
}
#view-access .ac-pending-line {
  margin: 0;
  font-family: var(--display);
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--ink-secondary);
}
#view-access .ac-pending-move {
  margin: 0 0 var(--xs);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
#view-access .ac-pending-quiet {
  margin-top: var(--xs);
  font-size: 0.75rem;
}

#view-access .ac-pending--change {
  border-left-color: var(--ink);
}
#view-access .ac-pending--change .ac-pending-line {
  color: var(--ink);
}

/* Handing someone `admin` is not a row edit and does not print like one. */
#view-access .ac-pending--escalate {
  border-left-color: var(--mark-ink);
  background: var(--paper-sunk);
  padding: var(--sm);
  padding-left: var(--sm);
}
#view-access .ac-pending--escalate .ac-pending-move,
#view-access .ac-pending--escalate .ac-pending-line {
  color: var(--mark-ink);
}
#view-access .ac-pending--escalate .ac-pending-quiet {
  color: var(--ink-secondary);
}
#view-access .ac-pending-refusal {
  margin-top: var(--xs);
  color: var(--mark-ink);
}

#view-access .ac-row--escalate > td:first-child {
  border-left: 2px solid var(--mark-ink);
}
#view-access .access-save.ac-escalates {
  border-color: var(--mark-ink);
  color: var(--mark-ink);
  font-weight: 700;
}
#view-access .access-save.ac-escalates:hover {
  background: var(--mark-ink);
  color: var(--paper-lit);
}

/* --------------------------------------------------------------------------
   Action, and the withdrawal plate
   -------------------------------------------------------------------------- */

#view-access .ac-action-cell {
  text-align: right;
}
#view-access .ac-action-cell .ac-arm {
  white-space: nowrap;
  color: var(--mark-ink);
  border-color: var(--mark-ink);
  padding: 7px 12px;
  font-size: 0.8125rem;
}
#view-access .ac-action-cell .ac-arm:hover {
  background: var(--mark-ink);
  color: var(--paper-lit);
}
#view-access .ac-action-cell .ac-arm[aria-expanded='true'] {
  background: var(--mark-ink);
  color: var(--paper-lit);
}

#view-access .ac-confirm-cell {
  background: var(--paper-sunk);
  padding: var(--md);
  border-bottom: 2px solid var(--ink);
}

/* Sticky against the register's own sideways scroll, so the sentence stays on screen
   at 320px instead of sitting off the right edge of a scrolled table. */
#view-access .ac-plate {
  position: sticky;
  left: var(--md);
  max-width: 34rem;
  background: var(--paper-lit);
  border: 2px solid var(--ink);
  padding: var(--lg) var(--md) var(--md);
}
#view-access .ac-plate:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* Printer's furniture: registration crosses at the four corners of the plate. */
#view-access .ac-cross {
  position: absolute;
  width: 12px;
  height: 12px;
}
#view-access .ac-cross::before,
#view-access .ac-cross::after {
  content: '';
  position: absolute;
  background: var(--ink);
}
#view-access .ac-cross::before { width: 12px; height: 1px; top: 5px; left: 0; }
#view-access .ac-cross::after { width: 1px; height: 12px; left: 5px; top: 0; }
#view-access .ac-cross--tl { top: 5px; left: 5px; }
#view-access .ac-cross--tr { top: 5px; right: 5px; }
#view-access .ac-cross--bl { bottom: 5px; left: 5px; }
#view-access .ac-cross--br { bottom: 5px; right: 5px; }

#view-access .ac-plate-h {
  margin: 0 0 var(--sm);
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 650;
  font-variation-settings: 'wdth' 106;
  line-height: 1.25;
  color: var(--ink);
}
#view-access .ac-plate-p {
  margin: 0 0 var(--sm);
  max-width: 46ch;
  font-family: var(--display);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
}
#view-access .ac-plate-refusal {
  padding-left: var(--sm);
  border-left: 2px solid var(--mark-ink);
  color: var(--mark-ink);
}

#view-access .ac-plate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm);
  align-items: center;
  margin-top: var(--md);
  padding-top: var(--md);
  border-top: 1px solid var(--rule);
}
#view-access .ac-plate-actions button {
  padding: 10px 18px;
  font-size: 0.875rem;
}
/* The destructive action is filled rather than outlined, as the design has it. It sets
   well below 24px, so the ground is Marking Ink and never Marking Orange. */
#view-access .ac-plate-actions .access-revoke {
  background: var(--mark-ink);
  border-color: var(--mark-ink);
  color: var(--paper-lit);
  font-weight: 700;
}
#view-access .ac-plate-actions .access-revoke:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-lit);
}

/* --------------------------------------------------------------------------
   Loading, empty, failure
   -------------------------------------------------------------------------- */

#view-access .ac-placeholder {
  padding: var(--lg) var(--md);
  font-family: var(--display);
}
#view-access .ac-empty {
  display: block;
  max-width: 60ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

#view-access .ac-error-note {
  max-width: 60ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Narrow. Reviewers and admins read this screen from a phone in the field.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  #view-access .ac-scroll-note {
    display: block;
  }
  #view-access .toolbar {
    justify-content: flex-start;
  }
  #view-access .ac-tally {
    flex: 1 1 100%;
  }
  #view-access .ac-register {
    box-shadow: 3px 3px 0 0 var(--ink);
    margin-right: 3px;
  }
  #view-access .ac-plate {
    left: var(--sm);
    max-width: calc(100vw - 96px);
  }
}

@media (max-width: 420px) {
  #view-access h2 {
    font-size: 1.625rem;
  }
  #view-access .ac-plate {
    max-width: calc(100vw - 72px);
    padding: var(--lg) var(--sm) var(--sm);
  }
  #view-access .ac-plate-actions button {
    flex: 1 1 auto;
  }
}