.engagement-icon { display:inline-flex; align-items:center; flex:none; }
.engagement-icon svg { display:block; width:18px; height:18px; }
.engagement-community { margin:12px 0 32px; padding:27px 25px 25px; border:1px solid #b1a18055; border-radius:18px; background:#fcfaf5b8; }
.engagement-community-heading { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:19px; }
.engagement-community-heading > .engagement-icon { color:#9b8557; }
.engagement-community-heading h2 { margin:0; font-size:23px; font-weight:800; line-height:1.5; }
.engagement-community-heading p { flex:1 0 100%; margin:0; color:#777b6c; font-size:13px; line-height:1.8; }
.engagement-leaderboard { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.engagement-rank-card { display:flex; align-items:center; gap:12px; min-width:0; padding:17px 14px; border:1px solid #b1a18045; border-radius:13px; background:#ffffffa6; }
.engagement-rank { display:grid; place-items:center; flex:0 0 34px; width:34px; height:38px; color:#90794c; font-size:23px; font-weight:800; border-left:1px solid #b1a18055; padding-left:9px; }
.engagement-rank-person { min-width:0; flex:1; }
.engagement-rank-name { display:block; border:0; padding:0; background:none; color:#2e372e; text-align:right; font-size:14px; font-weight:700; line-height:1.7; overflow-wrap:anywhere; }
button.engagement-rank-name:hover { color:#507051; }
.engagement-rank-level { display:block; color:#777b6c; font-size:11px; line-height:1.8; }
.engagement-rank-count { display:flex; align-items:center; gap:5px; color:#507051; font-size:14px; white-space:nowrap; }
.engagement-rank-count svg { width:15px; height:15px; }
.engagement-rank-empty { background:#ffffff55; }
.engagement-rank-empty .engagement-rank-name { color:#777b6c; font-weight:500; }
.engagement-ranking-note { margin:13px 0 0; color:#858371; font-size:11px; line-height:1.9; }
.engagement-featured-heading { border-top:1px solid #b1a18040; padding-top:20px; margin-top:21px; }
.engagement-featured-heading h3 { margin:0; font-size:19px; font-weight:700; }
.engagement-featured-heading p { margin:6px 0 14px; color:#777b6c; font-size:12px; line-height:1.8; }
.engagement-featured { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.engagement-featured-card { min-width:0; padding:17px; border-radius:12px; border:1px solid #b1a18035; background:#f4f1e9b8; }
.engagement-featured-card > .engagement-icon { color:#8b9b82; margin-bottom:4px; }
.engagement-featured-card .engagement-comment-text { margin:5px 0 15px; font-size:13px; line-height:1.9; }
.engagement-comment-author { display:block; color:#2e372e; font-size:12px; overflow-wrap:anywhere; }
.engagement-comment-student { display:block; margin-top:4px; padding:0; border:0; background:none; color:#507051; font-size:11px; text-align:right; line-height:1.8; overflow-wrap:anywhere; }
.engagement-community-empty { grid-column:1/-1; margin:0; padding:17px 19px; border:1px dashed #b1a18066; border-radius:12px; color:#777b6c; font-size:13px; line-height:1.9; }
.engagement-featured-more { display:flex; justify-content:center; }
.engagement-featured-more:not(:empty) { margin-top:14px; }
.engagement-more,.engagement-retry { display:inline-flex; gap:7px; justify-content:center; align-items:center; min-height:40px; border:1px solid #b1a18070; border-radius:9px; padding:8px 15px; background:#fcfaf5; color:#507051; font-size:12px; font-weight:700; line-height:1.6; }
.engagement-service-status { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin:0 0 15px; padding:10px 13px; border:1px solid #b1a18066; background:#f4efe3; border-radius:10px; color:#6c604b; font-size:12px; line-height:1.8; }
.engagement-service-status[hidden] { display:none; }
.student.has-engagement { display:flex; flex-direction:column; }
.student.has-engagement > .student-open { height:auto; flex:1; }
.engagement-bar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:10px 12px 12px; background:#f6f3ea; border-top:1px solid #b1a18040; }
.engagement-action { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:40px; padding:7px 10px; color:#66745e; border:1px solid #b1a18045; border-radius:9px; background:#fcfaf5; font-size:13px; line-height:1.5; }
.engagement-action:hover:not(:disabled) { background:#e9eee4; border-color:#50705160; }
.engagement-like[aria-pressed=true] { color:#507051; background:#e8eee3; border-color:#50705166; }
.engagement-like[aria-pressed=true] svg { stroke-width:2.5; }
.engagement-action:disabled { cursor:wait; opacity:.55; }
.engagement-action[aria-busy=true] .engagement-icon { opacity:.45; }
.engagement-count { font-variant-numeric:tabular-nums; }
.engagement-bar-error { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 9px; color:#8a4c38; font-size:11px; line-height:1.7; }
.engagement-inline-retry { min-height:32px; padding:3px 5px; border:0; background:none; text-decoration:underline; color:#507051; font-size:11px; }
#detail.engagement-enabled { width:min(430px,calc(100vw - 28px),calc(80dvh - 192px)); }
#detail > .engagement-bar { padding:8px 18px; background:#fcfaf5; }
#detail > .engagement-bar .engagement-action { min-height:40px; }
body.engagement-support-open { overflow:hidden; }
dialog.engagement-dialog { width:calc(100% - 28px); max-width:560px; max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:16px; overflow:auto; color:#2e372e; background:#fcfaf5; }
.engagement-dialog-head { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:23px 25px 20px; border-bottom:2px solid #b1a180; background:#2e372e url('assets/identity-dark.svg') center/650px auto; color:#fcfaf5; }
.engagement-dialog-head h2 { margin:0 0 9px; color:#d3c5a0; font-size:20px; font-weight:700; }
.engagement-dialog-head p { margin:0; font-size:17px; font-weight:700; line-height:1.8; overflow-wrap:anywhere; }
.engagement-dialog-head .engagement-support-level { color:#e2e1d3; font-size:12px; font-weight:500; }
.engagement-dialog-close { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; padding:8px; border:1px solid #b1a18080; border-radius:10px; color:#fcfaf5; background:#fcfaf50d; }
.engagement-dialog-body { padding:20px 25px 25px; }
.engagement-comments-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:11px; }
.engagement-comments-heading h3 { margin:0; font-size:15px; font-weight:700; }
.engagement-comment-total { display:inline-block; margin-right:5px; color:#777b6c; font-size:12px; font-weight:500; }
.engagement-comments-refresh { display:inline-flex; gap:6px; align-items:center; min-height:36px; padding:5px 7px; border:0; background:none; color:#507051; font-size:12px; }
.engagement-comments-refresh svg { width:15px; height:15px; }
.engagement-comments-list { display:grid; gap:10px; }
.engagement-comment { padding:14px; border:1px solid #b1a18040; border-radius:11px; background:#fff9; min-width:0; }
.engagement-comment-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 10px; align-items:center; }
.engagement-comment-heading strong { font-size:13px; overflow-wrap:anywhere; }
.engagement-comment-heading time { color:#888776; font-size:10px; }
.engagement-comment-text { white-space:pre-wrap; overflow-wrap:anywhere; color:#57664e; font-size:14px; line-height:1.9; margin:7px 0 0; }
.engagement-comments-empty { margin:0; padding:19px 14px; background:#f2efe6; color:#777b6c; border-radius:10px; font-size:13px; line-height:1.9; }
.engagement-comments-pagination { text-align:center; }
.engagement-comments-pagination:not(:empty) { padding-top:12px; }
.engagement-load-error { color:#8a4c38; margin:0 0 7px; font-size:12px; }
.engagement-comment-form { display:grid; gap:8px; margin-top:23px; padding-top:22px; border-top:1px solid #b1a18055; }
.engagement-comment-form h3 { margin:0; font-size:17px; font-weight:700; }
.engagement-public-note { margin:0 0 5px; color:#777b6c; font-size:11px; line-height:1.7; }
.engagement-comment-form label { font-size:12px; font-weight:700; line-height:1.7; }
.engagement-comment-form input,.engagement-comment-form textarea { width:100%; min-width:0; border:1px solid #b1a18070; border-radius:9px; background:#fff9; color:#2e372e; padding:11px 12px; font:inherit; font-size:13px; line-height:1.7; }
.engagement-comment-form textarea { resize:vertical; min-height:96px; max-height:300px; }
.engagement-form-bottom { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.engagement-character-count { color:#8a8a78; font-size:10px; direction:ltr; unicode-bidi:isolate; }
.engagement-submit { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:42px; border:1px solid #507051; border-radius:9px; padding:9px 17px; background:#507051; color:#fcfaf5; font-size:13px; font-weight:700; line-height:1.6; }
.engagement-submit svg { width:17px; height:17px; }
.engagement-submit:disabled { opacity:.6; cursor:wait; }
.engagement-form-status { margin:0; color:#507051; font-size:12px; line-height:1.9; }
.engagement-form-status:empty { display:none; }
.engagement-form-status.is-error { color:#8a4c38; }
.engagement-dialog-close:focus-visible { outline-color:#d3c5a0; }
@media(max-width:900px) {
  .engagement-rank-card { gap:8px; padding:13px 10px; }
  .engagement-rank { flex-basis:26px; width:26px; font-size:20px; padding-left:6px; }
  .engagement-rank-count { flex-direction:column; gap:4px; font-size:12px; }
}
@media(max-width:600px) {
  .engagement-community { margin:10px 0 21px; padding:19px 15px; border-radius:14px; }
  .engagement-community-heading { margin-bottom:15px; }
  .engagement-community-heading h2 { font-size:21px; }
  .engagement-community-heading p { font-size:12px; }
  .engagement-leaderboard { grid-template-columns:1fr; gap:8px; }
  .engagement-rank-card { padding:11px 12px; gap:11px; }
  .engagement-rank { flex-basis:31px; width:31px; font-size:21px; }
  .engagement-rank-name { font-size:13px; }
  .engagement-rank-count { flex-direction:row; font-size:13px; gap:6px; }
  .engagement-ranking-note { font-size:10px; }
  .engagement-featured-heading { margin-top:17px; padding-top:18px; }
  .engagement-featured-heading h3 { font-size:17px; }
  .engagement-featured { grid-template-columns:1fr; gap:9px; }
  .engagement-featured-card { padding:14px; }
  .engagement-community-empty { padding:14px; font-size:12px; }
  .engagement-bar { gap:6px; padding:8px 8px 9px; }
  .engagement-action { padding:7px 8px; font-size:12px; gap:6px; border-radius:7px; }
  .engagement-action svg { width:16px; height:16px; }
  dialog.engagement-dialog { border-radius:12px; }
  .engagement-dialog-head { padding:19px 18px 16px; }
  .engagement-dialog-head h2 { font-size:18px; }
  .engagement-dialog-head p { font-size:16px; }
  .engagement-dialog-body { padding:17px 18px 20px; }
  .engagement-comment-form input,.engagement-comment-form textarea { font-size:16px; }
}

/* Separate encouragement ranking and support carousel. */
.engagement-rank-portrait { display:block; flex:0 0 64px; width:64px; height:64px; border-radius:50%; background:#e4e7db; overflow:hidden; }
.engagement-rank-image { display:block; width:100%; height:100%; object-fit:contain; }
.engagement-comments-section { margin:0 0 32px; padding:24px 25px 18px; border:1px solid #b1a18055; border-radius:18px; background:#fcfaf5b8; min-width:0; }
.engagement-slider-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.engagement-comments-section .engagement-featured-heading { margin:0; padding:0; border:0; min-width:0; }
.engagement-featured-heading h2 { margin:0; font-size:22px; font-weight:800; line-height:1.5; }
.engagement-comments-section .engagement-featured-heading p { margin:5px 0 0; }
.engagement-slider-controls { display:flex; align-items:center; gap:7px; flex:none; }
.engagement-slider-controls[hidden],.engagement-slider-track[hidden],.engagement-comments-section .engagement-community-empty[hidden],.engagement-slider-status[hidden],.engagement-slider-toggle[hidden] { display:none; }
.engagement-slider-controls button { display:grid; place-items:center; width:40px; height:40px; flex:0 0 40px; padding:10px; border:1px solid #b1a18070; border-radius:9px; background:#fcfaf5; color:#507051; }
.engagement-slider-controls button:disabled { opacity:.35; cursor:default; }
.engagement-slider-controls button:hover:not(:disabled) { background:#e9eee4; }
.engagement-slider-controls .engagement-slider-toggle { background:#5070510c; }
.engagement-slider-track { display:flex; gap:12px; position:relative; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding:2px 1px 8px; }
.engagement-slider-track::-webkit-scrollbar { display:none; }
.engagement-slider-track > .engagement-featured-card { flex:0 0 calc((100% - 24px)/3); min-width:0; scroll-snap-align:start; display:flex; flex-direction:column; margin:0; }
.engagement-slider-track .engagement-comment-text { margin-bottom:15px; }
.engagement-slider-track .engagement-comment-author { margin-top:auto; }
.engagement-slider-status { margin:6px 0 0; text-align:center; color:#8a8a78; font-size:10px; direction:ltr; unicode-bidi:isolate; }
@media(max-width:1050px) {
  .engagement-leaderboard { grid-template-columns:1fr; }
  .engagement-rank-count { flex-direction:row; }
  .engagement-rank-portrait { flex-basis:54px; width:54px; height:54px; }
}
@media(max-width:900px) {
  .engagement-slider-track > .engagement-featured-card { flex-basis:calc((100% - 12px)/2); }
}
@media(max-width:600px) {
  .engagement-community { margin-bottom:15px; }
  .engagement-rank-portrait { flex-basis:48px; width:48px; height:48px; }
  .engagement-rank-card { gap:9px; }
  .engagement-rank { flex-basis:24px; width:24px; padding-left:5px; font-size:19px; }
  .engagement-comments-section { margin-bottom:21px; padding:19px 15px 14px; border-radius:14px; }
  .engagement-slider-heading { align-items:flex-start; gap:10px; }
  .engagement-featured-heading h2 { font-size:19px; }
  .engagement-comments-section .engagement-featured-heading p { font-size:11px; max-width:170px; }
  .engagement-slider-controls { gap:5px; padding-top:2px; }
  .engagement-slider-controls button { width:40px; height:40px; flex-basis:40px; padding:10px; border-radius:8px; }
  .engagement-slider-controls .engagement-icon svg { width:18px; height:18px; }
  .engagement-slider-track > .engagement-featured-card { flex-basis:100%; min-height:170px; }
}