/* Class tools (v16): note, goal, live session, weekly board, class news and cheers, members, tasks and review tasks. */

/* Text clamped to three lines (class news). */
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* The host's note keeps its line breaks and wraps long words. */
.class-note-text { white-space: pre-line; overflow-wrap: anywhere; line-height: 21px; }

/* Class news and its cheers. */
.class-news { display: flex; flex-direction: column; gap: 10px; }
.cheer-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  transition: background 0.2s, border-color 0.2s, transform 0.18s cubic-bezier(.3, 1.6, .5, 1);
}
.cheer-chip.mine { background: var(--primary-tint); border-color: rgba(109, 74, 255, 0.6); }
.cheer-chip[aria-disabled="true"] { cursor: default; }

/* Hard words and the review task (task screen). */
.task-hard-grid { display: flex; flex-direction: column; gap: 8px; }

@media (hover: hover) {
  .cheer-chip.tappable:hover { border-color: rgba(109, 74, 255, 0.45); }
  .class-tool-round:hover { background: var(--primary-tint) !important; color: var(--primary) !important; }
}

/* Desktop: the class (and its members) on the left, the tasks beside it, and the week and the news
   under the tasks; on a wide window the week and the news get a third column. */
@media (min-width: 900px) {
  .class-layout3 {
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    grid-template-areas: "info tasks" "info social";
    grid-template-rows: auto 1fr;
    column-gap: 28px;
    row-gap: 20px;
    align-items: start;
  }
  .class-col-info { grid-area: info; }
  .class-col-tasks { grid-area: tasks; }
  .class-col-social { grid-area: social; }
  .task-hard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
}
@media (min-width: 1700px) {
  .class-page { max-width: 1640px; }
  .class-layout3 {
    grid-template-columns: minmax(340px, 400px) minmax(0, 1fr) minmax(340px, 460px);
    grid-template-areas: "info tasks social";
    grid-template-rows: auto;
  }
}