feat: merge event rankings and attribute badges into the page printer

Interview notes can print each student's ranked events and a shared attribute legend from the same catalog as the ranking index, without leftover table markup or collapsed answer space.

Co-authored-by: Cursor <cursoragent@cursor.com>

WebApp/wwwroot/app.css

@@ -61,6 +61,7 @@
     }
 
     .print-answer-space {
+        height: calc(var(--print-answer-lines, 3) * 1.35em);
         background-image: repeating-linear-gradient(
             to bottom,
             transparent,
@@ -88,6 +89,10 @@
 .event-rank-4 { background-color: #ffe599; }
 .event-rank-5 { background-color: #fff2cc; }
 .event-rank-6 { background-color: #fffaea; }
+.event-rank-7 { background-color: #fffefa; }
+.event-rank-8 { background-color: #fffefc; }
+.event-rank-9 { background-color: #fffffd; }
+.event-rank-10 { background-color: #fffffe; }
 
 
 .pre-wrap-text {
@@ -390,9 +395,52 @@
     font-size: 0.85em;
 }
 
+.print-rank-badges {
+    margin: 0.2em 0 0.5em;
+    line-height: 1.6;
+}
+
+.print-rank-badge {
+    display: inline-block;
+    white-space: nowrap;
+    line-height: 1.2;
+}
+
+.print-rank-dot {
+    display: inline-block;
+    width: 0.65em;
+    height: 0.65em;
+    border-radius: 50%;
+    flex-shrink: 0;
+    background: #ddd;
+}
+
+.print-event-attrs {
+    font-family: monospace;
+    white-space: pre;
+}
+
+.print-badge-legend {
+    margin: 0.4em 0 0.9em;
+    font-size: 0.85em;
+}
+
+.print-attr-legend {
+    margin-top: 0.25em;
+    line-height: 1.6;
+}
+
+.print-legend-mark {
+    display: inline-block;
+    white-space: nowrap;
+}
+
 .print-answer-space {
-    min-height: calc(var(--print-answer-lines, 3) * 1.35em);
-    margin: 0.2em 0 0.75em;
+    display: block;
+    height: calc(var(--print-answer-lines, 3) * 1.35em);
+    overflow: hidden;
+    margin: 0.35em 0 0.75em;
+    box-sizing: content-box;
     background-image: repeating-linear-gradient(
         to bottom,
         transparent,