Add course duplicate and compact list/roster layout

- POST /api/courses/:id/duplicate deep-copies a course with all units,
  items, and quiz questions; opens the copy immediately for renaming
- Roster changed from broken vertical stack to horizontal chip-pills
  (fixes admin-card label override that was collapsing inline-flex)
- item-row padding reduced for tighter lists throughout admin
- Courses and Kids admin panels now use a 2-column auto-fill grid

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/admin.html

@@ -76,6 +76,7 @@
             <input id="cd-color-input" type="color">
             <label class="checkbox-label"><input type="checkbox" id="cd-archived"> Archived</label>
             <button type="submit">Save</button>
+            <button type="button" id="cd-duplicate" class="secondary">Duplicate course</button>
             <button type="button" id="cd-delete" class="danger">Delete course</button>
           </form>
         </div>

public/admin.js

@@ -280,6 +280,13 @@ $('#course-meta-form').addEventListener('submit', async (e) => {
   openCourseDetail(currentCourseId);
 });
 
+$('#cd-duplicate').addEventListener('click', async () => {
+  const { id } = await api(`/api/courses/${currentCourseId}/duplicate`, { method: 'POST' });
+  currentCourseId = id;
+  showPanel('course-detail');
+  msg('Course duplicated — update the name and details below.');
+});
+
 $('#cd-delete').addEventListener('click', async () => {
   if (!confirm('Delete this whole course, including all units, items, and grades?')) return;
   await api(`/api/courses/${currentCourseId}`, { method: 'DELETE' });

public/styles.css

@@ -214,9 +214,9 @@ button.danger { background: var(--bad); }
 .inline-form input { flex: 1; min-width: 140px; }
 
 .item-row {
-  display: flex; align-items: center; gap: 0.75rem;
-  background: var(--card); border-radius: 12px; padding: 0.75rem 1rem; margin: 0.5rem 0;
-  box-shadow: 0 2px 6px rgba(45, 49, 66, 0.06);
+  display: flex; align-items: center; gap: 0.6rem;
+  background: var(--card); border-radius: 10px; padding: 0.45rem 0.75rem; margin: 0.2rem 0;
+  box-shadow: 0 1px 4px rgba(45, 49, 66, 0.06);
   flex-wrap: wrap;
 }
 .item-row .grow { flex: 1; min-width: 120px; }
@@ -349,9 +349,29 @@ table.results tr:nth-child(even) td { background: #faf7ee; }
 }
 
 .checkbox-label { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; margin-right: 1rem; }
+/* admin-card sets label { flex-direction: column } — override for checkboxes */
+.admin-card .checkbox-label { flex-direction: row; font-size: 1rem; }
 .color-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
 .archived-badge { background: #e8e2d0; color: var(--muted); font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 999px; }
 
+/* ---------- roster chips ---------- */
+#cd-roster { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+#cd-roster .checkbox-label {
+  margin-right: 0;
+  background: #f7f2e3; border: 1.5px solid #d8d2c0; border-radius: 999px;
+  padding: 0.3rem 0.85rem; cursor: pointer; font-size: 0.95rem;
+  transition: background 0.12s, border-color 0.12s;
+}
+#cd-roster .checkbox-label:hover { border-color: var(--accent); }
+
+/* ---------- admin list panels — 2-col grid on wider screens ---------- */
+#course-rows, #student-rows {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 0.4rem;
+}
+#course-rows .item-row, #student-rows .item-row { margin: 0; }
+
 button.small { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
 button.tiny { font-size: 0.75rem; padding: 0.15rem 0.5rem; }
 .hint.tiny { font-size: 0.8rem; margin: 0.25rem 0; }