/* keys screen: only what the shared system does not already provide. */

/* Row actions sit side by side and never wrap mid-button. */
.key-acts { display: inline-flex; gap: 6px; flex-wrap: nowrap; }
/* Eight columns do not fit beside the rail or in a narrow window: below 1180px each key becomes a labelled record (the
   phone layout, earlier), so Actions is never clipped or pushed off the edge behind a horizontal scroll. */
@media (min-width: 721px) and (max-width: 1180px) {
  .keys-list .tbl.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .keys-list .tbl.stack tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
  .keys-list .tbl.stack td { display: block; padding: 0; border: 0; text-align: left; }
  .keys-list .tbl.stack td:first-child { grid-column: 1; }
  .keys-list .tbl.stack td[data-k='status'] { grid-column: 2; grid-row: 1; justify-self: end; }
  .keys-list .tbl.stack td:not(:first-child):not([data-k='status']) { grid-column: 1 / -1; display: grid; grid-template-columns: 110px 1fr; font-size: 12.5px; }
  .keys-list .tbl.stack td:not(:first-child):not([data-k='status'])::before { content: attr(data-label); color: var(--ink-2); }
  .keys-list .tbl.stack td[data-k='act'] { margin-top: 6px; }
}
@media (max-width: 1180px) {
  .keys-list .tbl.stack td { justify-items: start; align-items: center; }
  .keys-list .tbl.stack td[data-k='act'] { margin-top: 6px; }
}