/* The administration wing's own spacing: what is not the component set's. Every rule is scoped to
   `.administration`, which is the wrapper each of this wing's pages renders, so nothing here
   reaches a class a shell or another page owns. Tokens only. */

/* The way back, above the heading of one organization's page. */
.administration .back {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
}

/* Each block on a page — the table, the name, the people, the form — stands apart from the one
   before it. The component set owns what is inside them. */
.administration > .panel,
.administration > .data-table-scroll,
.administration > .empty-state {
  margin-bottom: var(--space-6);
}

.administration > h2 {
  margin-top: var(--space-8);
}

/* The last cell of a member's row holds a control and not a value, so it takes only the width it
   needs and keeps the control off the row's left edge. */
.administration .member-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* A form inside a panel: its fields stack, and the button that sends it sits under them. */
.administration .panel-body > .text-input,
.administration .panel-body > .select {
  margin-bottom: var(--space-4);
}

/* The role cell holds a control, so it takes only the width it needs. */
.administration .member-role {
  width: 1%;
  white-space: nowrap;
}

/* One label per row would be noise on screen and is exactly what a screen reader needs: the
   column heading says "Role" once, and each control says whose. Same pattern as the table's
   quiet caption, which is where the rule is written out. */
.administration .member-role .select-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the snapshot's face (design round 5) ----
   The wing was built before the design pass and kept round 1's components, which were restyled
   underneath it; these rules are what its pages needed on top, and nothing here changes what a page
   does. */

/* One organization's page is sections, as the rest of HQ is: a heading at the section size over the
   ink rule, and what is in it under that. The two panels there (the name, and adding somebody) read
   as the people table between them does, rather than as two cards around an open section. */
.administration > .panel {
  background: none;
  border: none;
  border-radius: 0;
}

.administration > .panel > .panel-header {
  padding: 0 0 var(--space-3);
  border-bottom: var(--rule-strong) solid var(--color-ink);
}

.administration > .panel > .panel-header > :is(h2, h3) {
  margin: 0;
  font-size: var(--text-display-5);
  font-weight: var(--weight-regular);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
}

.administration > .panel > .panel-body {
  padding: var(--space-5) 0 0;
}

/* A form's fields are as wide as a sentence needs, not the width of the page. */
.administration .panel-body > .text-input,
.administration .panel-body > .select {
  max-width: var(--measure-column);
}

/* A member's row: every cell on the control's middle line, so a name does not sit above the select
   beside it. */
.administration .data-table-cell {
  vertical-align: middle;
}

/* The role in its row: as wide as the longest role, at the small height a control in a row has, and
   in the row's type. Its width was the cell's 1%, which left the browser's arrow and no word. */
.administration .member-role .select-control {
  width: auto;
  height: var(--control-height-small);
  font-size: var(--text-sm);
}

/* Taking somebody out is a row's quiet control, as "take off" is on an order: the danger colour,
   underlined, and no fill. A filled red button on every row made the table read as a list of
   warnings. */
.administration .member-actions .button-danger {
  height: auto;
  padding: 0;
  background: none;
  border-color: transparent;
  color: var(--color-danger);
  font-size: var(--text-quiet);
  font-weight: var(--weight-regular);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.administration .member-actions .button-danger:hover:not([disabled], [aria-disabled="true"]) {
  background: none;
  border-color: transparent;
  color: var(--color-danger-hover);
}

/* The new organization's two fields, apart from each other as the page's forms are. */
.administration .dialog-body > .text-input + .text-input {
  margin-top: var(--space-4);
}

/* On a phone a member's row is two lines rather than four columns that run off the screen: who
   they are and their address, then their role and the way out. The column heads go, visually only,
   because each line says what it is. */
@media (max-width: 36rem) {
  .administration .data-table:has(.member-role) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .administration .data-table-row:has(.member-role) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: var(--hairline) solid var(--color-line);
  }

  .administration .data-table-row:has(.member-role) > .data-table-cell {
    padding: 0;
    border-bottom: none;
  }

  .administration .data-table-row:has(.member-role) > .data-table-cell:not(.member-role, .member-actions) {
    grid-column: 1 / -1;
  }

  .administration .data-table-row:has(.member-role) > .data-table-cell:nth-child(2) {
    color: var(--color-muted);
  }

  .administration .data-table-row:has(.member-role) > .member-role,
  .administration .data-table-row:has(.member-role) > .member-actions {
    width: auto;
    margin-top: var(--space-2);
  }

  .administration .data-table-row:has(.member-role) > .member-role {
    justify-self: start;
  }
}