Add filter facets, new-to-Helios flag, and original-style student cards

web/static/directory/style.css

@@ -246,6 +246,148 @@ main {
   margin: 0;
 }
 
+.filter-wrap {
+  position: relative;
+}
+
+.filter-button.open {
+  box-shadow: 0 0 0 2px var(--sidebar-active);
+}
+
+.filter-panel {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 8px);
+  width: 300px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
+  z-index: 20;
+  overflow: hidden;
+}
+
+.filter-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px 18px;
+  font-size: 15px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--line);
+  cursor: pointer;
+}
+
+.filter-section svg {
+  width: 18px;
+  height: 18px;
+  stroke: #9aa4ab;
+  fill: none;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transform: rotate(-90deg);
+}
+
+.filter-section.open svg {
+  transform: none;
+}
+
+.filter-options {
+  max-height: 250px;
+  overflow-y: auto;
+  border-bottom: 1px solid var(--line);
+}
+
+.filter-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 18px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.filter-option:hover {
+  background: #f6f6f7;
+}
+
+.filter-option input {
+  width: 17px;
+  height: 17px;
+  accent-color: var(--brand);
+}
+
+.filter-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px 18px;
+  font-size: 15px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--line);
+  cursor: pointer;
+}
+
+.filter-switch {
+  appearance: none;
+  width: 40px;
+  height: 24px;
+  border-radius: 12px;
+  background: #d5dadd;
+  position: relative;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.filter-switch::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  transition: left 0.15s;
+}
+
+.filter-switch:checked {
+  background: var(--brand);
+}
+
+.filter-switch:checked::before {
+  left: 18px;
+}
+
+.filter-footer {
+  display: flex;
+  gap: 12px;
+  padding: 14px 16px;
+}
+
+.filter-footer button {
+  flex: 1;
+  padding: 11px 0;
+  border-radius: 10px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.filter-clear {
+  border: 1px solid var(--line);
+  background: #fff;
+  color: var(--ink);
+}
+
+.filter-done {
+  border: 0;
+  background: var(--brand);
+  color: #fff;
+}
+
 .email-hint {
   color: var(--muted);
   font-size: 14px;
@@ -459,8 +601,9 @@ div.person-photo {
 
 .student-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 28px 24px;
+  align-items: start;
 }
 
 .student-card {
@@ -468,16 +611,43 @@ div.person-photo {
   border-radius: 10px;
   overflow: hidden;
   text-align: center;
-  padding-bottom: 20px;
+  padding-bottom: 28px;
   background: #fff;
 }
 
-.student-photo {
+.student-head {
+  position: relative;
+  height: 150px;
+  margin-bottom: 50px;
+}
+
+.student-family-photo {
   width: 100%;
-  aspect-ratio: 1.35;
+  height: 100%;
   object-fit: cover;
   display: block;
-  background: #fff;
+}
+
+.student-photo {
+  position: absolute;
+  left: 50%;
+  bottom: -50px;
+  transform: translateX(-50%);
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 4px solid #fff;
+  background: #eef1f3;
+  color: #fff;
+}
+
+div.student-photo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.8rem;
+  font-weight: 600;
 }
 
 .student-first {