/* The arrow sits under the end of the text above it, not the edge of the
   column: auth.js measures where the text's lines actually stop. */
.gate { display: flex; gap: 0.75rem; margin-top: 2rem; justify-content: flex-end; }
/* Says its piece and gets out of the way. It hangs above the heading, out of
   the flow, so the heading sits exactly where it always does and nothing
   moves when it fades. */
#intro { position: relative; }
.flash { position: absolute; bottom: 100%; margin: 0 0 0.5rem; color: var(--ok);
  font-weight: 550; animation: flash-out 0.8s ease 4s forwards; }
@keyframes flash-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }
#note { min-height: 1.5em; margin-top: 1.25rem; color: var(--bad); }
#note.plain { color: var(--ink-2); }

.keycard, .label { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: var(--rule); border-radius: 14px; }
.keycard { margin-top: 1.25rem; padding: 0.625rem 0.625rem 0.625rem 1rem; font-weight: 600; }
.label { margin: 1.25rem 0 1.5rem; padding: 1rem 1.25rem; border-style: dashed; border-color: #b9c0cb;
  font-size: 1.125rem; font-weight: 600; }
.label svg { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: var(--ok);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.label.approved { border-style: solid; border-color: var(--ok); color: var(--ok); }
.label.approved svg { visibility: visible; }

.roll { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.roll th { text-align: left; font-size: 0.8125rem; font-weight: 550; color: var(--ink-2);
  padding: 0 0.75rem 0.375rem 0; }
.roll td { padding: 0.75rem 0.75rem 0.75rem 0; border-top: var(--rule); vertical-align: middle; }
.roll .name { font-weight: 550; }
.roll .note { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); }
.roll .note.clash { color: var(--bad); }
.roll .when { color: var(--ink-2); font-size: 0.875rem; white-space: nowrap; }
.code { letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.actions { display: flex; gap: 0.5rem; justify-content: flex-end; align-items: center; }
.actions form { margin: 0; }
/* What a member may do, as pills (standing()). */
.role { display: inline-block; padding: 0.2rem 0.75rem; border: 1px solid var(--ok); border-radius: 999px;
  background: var(--ok); color: #fff; font-size: 0.875rem; }
.aside { color: var(--ink-2); }

@media (max-width: 36rem) {
  .roll, .roll tbody { display: block; }
  .roll thead { display: none; }
  .roll tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 1rem;
    padding: 0.75rem 0; border-top: var(--rule); }
  .roll td { border: 0; padding: 0; }
  .roll .when { white-space: normal; }
  .roll td.actions { grid-row: 1 / span 4; grid-column: 2; }
  .roll td[data-label]:not(.name)::before { content: attr(data-label) " "; color: var(--ink-2); }
}