First commit

frontend/app/assets/css/_admin.scss

@@ -0,0 +1,78 @@
+// ---------- Admin dashboard: the list of accounts ----------
+// One row per account, read left to right: who, what they may do, when they
+// arrived, and the one thing an admin can change about them.
+.account-list {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.account-entry {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 12px 16px;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  box-shadow: var(--shadow-sm);
+}
+
+.account-entry-name {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.95rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// the marker on the row that is the person looking at the page
+.account-entry-you {
+  margin-left: 6px;
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--faint);
+}
+
+.account-entry-since { flex-shrink: 0; font-size: 0.78rem; color: var(--faint); }
+
+// where the ⋮ goes on the row of the admin looking at the page: their own role
+// and their own account are the two things they cannot change, so the row says
+// it instead of offering a menu that could only fail
+.account-entry-note {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 0.76rem;
+  font-style: italic;
+  color: var(--faint);
+}
+
+.role-pill {
+  flex-shrink: 0;
+  padding: 3px 11px;
+  border-radius: 999px;
+  background: var(--surface-2);
+  color: var(--muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+
+  // an admin's row is the accent one, so the few of them stand out at a glance
+  &.is-admin {
+    background: color-mix(in srgb, var(--accent) 14%, transparent);
+    color: var(--accent);
+  }
+}
+
+// on a wide row the ⋮ sits at the end of the line; once the row wraps (a narrow
+// window) it starts a line of its own, still at the end of what came before
+.account-entry-kebab { margin-left: auto; flex: none; }
+
+// the article cards' skeleton, in the shape of one row of the list
+.skeleton-row { height: 62px; }