/* School Directory (Figma 22316:132304 Students, 22316:132480 Staff). Tabs reuse .n-tabs, chips .m-chip, profile sheet .ch-profile. */
.screen.sd { background: var(--goku); }
.sd-top { background: var(--gohan); padding-top: var(--sb-dash); }
.sd-head { display: flex; align-items: center; gap: 8px; padding: 16px 20px 4px; }
.sd-back { flex: none; width: 31.69px; height: 31.69px; display: grid; place-items: center; border-radius: 6px; }
.sd-back:hover { background: var(--heles); }
.sd-search { flex: 1; min-width: 0; height: 40px; background: var(--goku); }
.sd-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--goku); }
.sd-btn:hover { background: #ECECEC; }
.sd-page { display: flex; flex-direction: column; gap: 24px; padding: 16px 20px 110px; }
.sd-chips .m-chip { border-color: transparent; }
.sd-chips .m-chip.is-on, .sd-chips .m-chip.is-open { border-color: var(--piccolo); }
.sd-list { display: flex; flex-direction: column; gap: 8px; }
.sd-row { width: 100%; display: flex; align-items: center; gap: 20px; padding: 12px 8px 12px 16px; border-radius: 8px; background: var(--gohan); text-align: left; }
.sd-row:hover { background: #FCFCFC; }
.sd-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sd-name { font: 400 16px/24px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-meta { font: 400 12px/16px var(--font); color: var(--trunks); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-row > img:last-child { flex: none; }

/* Funnel sheet */
.sd-sheet { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.sd-sheet-group { display: flex; flex-direction: column; gap: 8px; }
.sd-sheet-label { font: 700 14px/24px var(--font); color: var(--trunks); }
.sd-sheet-opts { display: flex; flex-wrap: wrap; gap: 8px; }