/* Lobby Watch: admin + account (design.md 5e, 5f) and the shared ops layout: create rows, the keys panel, the inline
   edit row, action cells. Layout only: widths, grids, gaps and phone reflow. Colours and type come from tokens
   through the shared component classes. */

.v-admin .sec,
.v-account .sec {
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.v-account .stack > * + * {
  margin-top: 32px;
}


/* Create row: a wrapping flex line (label, inputs, "Permissions (n)", the primary button, feedback). The <details>
   panel is a full-width line of its own below the controls, in flow. */
.ops-new {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.ops-new-l {
  font-weight: 600;
}
.ops-new .in {
  width: 180px;
}
.ops-new .in--name {
  width: 200px;
}
/* Open: the whole <details> moves to its own full-width line under the controls. Where the browser exposes the
   details content box (::details-content), the summary stays in the row and only the panel drops below. */
.ops-new details[open] {
  flex: 1 1 100%;
  order: 10;
}
.ops-new .pd-panel {
  padding-top: 4px;
}
@supports selector(details::details-content) {
  .ops-new details,
  .ops-new details[open] {
    display: contents;
  }
  .ops-new details::details-content {
    flex: 1 1 100%;
    order: 10;
  }
}
.ops-new .err-line {
  flex: 1 1 100%;
  order: 11;
}

/* Keys (6.16). Revoked keys are listed struck through rather than filtered away, so there is no toggle over the
   table and it sits 16 px under the create row's rule, like the users table. */
.keys .ops-new {
  margin-bottom: 16px;
}
.keys-once > p:first-child {
  font-weight: 500;
}
.keys-once .help {
  margin-top: 8px;
}
.keys-shown {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
}
.keys-shown .keyval {
  flex: 1 1 auto;
  min-width: 0;
}
.keys-once .btns {
  margin-top: 12px;
}

/* An action cell: buttons on one line, the error line under them. */
.cell-act {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.cell-act .err-line {
  text-align: right;
  white-space: normal;
}
/* Only the inline edit row is left-aligned here; table action cells (td.num) keep the base flex-end so Restart / Swap
   and Revoke sit on the column's right edge under "Revoked". The phone block below puts row-block actions left. */
.tbl tr.edit-row .cell-act {
  align-items: flex-start;
}

/* Inline edit row (5e): three groups, 16 px apart. */
.edit {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.edit-grp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.edit-grp .in {
  width: 240px;
}
.edit-note {
  margin-top: 0;
}

/* Scope checkboxes on the key editor: the groups sit side by side while there is room, each one a heading with its
   All/None toggle over the 6.15 permission rows. Below two columns' worth they stack, so phones need no rule. */
.scopes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px 32px;
  padding-top: 4px;
}
.scope-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 28px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}
.scope-gl {
  font-weight: 600;
}
.scope-h .tbtn {
  margin-left: auto;
  min-height: 0;
  padding: 0;
}
.keys-hint {
  margin-top: 0;
}

/* ---- Admin ------------------------------------------------------------------------------------------------------- */

/* The label cell is the row's own name (.c-key is the primary cell, not the "Key" column): striking it through says
   "this key is dead" without hiding what it was for. */
.v-admin .tbl-keys tr.is-revoked > td.c-key {
  text-decoration: line-through;
}

.v-admin .admin-ph {
  column-gap: 24px;
}
.v-admin .admin-ph .tabs {
  align-self: stretch;
}

/* ---- Account ----------------------------------------------------------------------------------------------------- */

.v-account .acct-line {
  margin-top: -8px;
  margin-bottom: 32px;
}
.v-account .pw-form .field {
  width: 320px;
  max-width: 100%;
}
.v-account .pw-acts {
  margin-top: 16px;
}
.v-account .pw-form .err-line {
  margin-top: 8px;
}

/* ---- Phones ------------------------------------------------------------------------------------------------------- */

@media (max-width: 719.98px) {
  .ops-new .in,
  .ops-new .in--name,
  .edit-grp .in {
    width: 100%;
  }
  .ops-new .ok-line {
    flex: 1 1 100%;
  }
  .edit-grp .btns {
    width: 100%;
  }
  .edit-grp .btns .in {
    flex: 1 1 100%;
  }
  .v-admin .admin-ph .tabs {
    flex: 1 1 100%;
  }
  .cell-act {
    align-items: flex-start;
  }
  .cell-act .err-line {
    text-align: left;
  }
}