/* Classroom (modules/classroom.js): class login, tasks and notes from the teacher, sharing controls. */
.ob-class { text-align: center; margin: 18px 0 0; }
.ob-class a { color: var(--red); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }

/* ---------- join ---------- */
.cls-join .ob-mo { margin-top: 0; }
.cls-join-title { text-align: center; margin: 4px 0 0; }
.cls-join-form { max-width: 340px; margin: 0 auto; }
.cls-join-form .field > span { text-align: center; }
.cls-join-form .input { text-align: center; }
.cls-join-form .field:nth-child(2) { margin-bottom: 0; }
.cls-join .dy-pin-dots { margin-top: 6px; }
.cls-join-foot { justify-content: center; margin-top: 18px; }
.cls-joined-lines { text-align: center; font-size: 1.1rem; margin-top: 8px; }
.cls-joined-lines p { margin: 6px 0; }

/* ---------- what my teacher sees ---------- */
.cls-privacy { margin-top: 18px; background: var(--red-10); border-radius: var(--radius-sm); padding: 12px 16px; }
.card > .cls-privacy:first-child { margin-top: 0; }
.cls-privacy summary { cursor: pointer; font-weight: 700; color: var(--char); display: flex; gap: 8px; align-items: center; list-style: none; }
.cls-privacy summary::-webkit-details-marker { display: none; }
.cls-privacy summary .ico, .cls-privacy li .ico { color: var(--red); flex: none; }
.cls-privacy ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.cls-privacy li { display: flex; gap: 10px; align-items: flex-start; }
.cls-privacy li .ico { margin-top: 3px; }

/* ---------- tasks ---------- */
.cls-tasks { display: grid; gap: 12px; margin-top: 12px; }
.cls-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; }
.cls-task-ic { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 14px; background: var(--char-5); }
.cls-tick { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; background: var(--green-ink); color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
.cls-tick .ico { vertical-align: 0; }
.cls-task-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cls-task-txt b { font-size: 1.1rem; color: var(--char); }
.cls-note { color: var(--char-80); font-size: .95rem; overflow-wrap: anywhere; }
.cls-task.done { background: var(--green-20); border-color: var(--green); }
.cls-task.done .cls-task-ic { background: #fff; }
.cls-done { display: inline-flex; gap: 4px; align-items: center; font-weight: 800; color: var(--green-ink); white-space: nowrap; }
.cls-alldone { display: flex; gap: 12px; align-items: center; margin: 12px 0 0; }

/* ---------- notes from the teacher ---------- */
.cls-msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; border-left: 6px solid var(--red); margin-top: 14px; }
.cls-msg:first-child { margin-top: 0; }
.cls-msg-text { font-size: 1.25rem; font-weight: 600; margin: 6px 0 12px; overflow-wrap: anywhere; }
.cls-hist { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.cls-hist li { border-left: 3px solid var(--red-20); padding: 2px 0 2px 12px; }
.cls-hist p { margin: 2px 0 0; overflow-wrap: anywhere; }
.cls-new { background: var(--red); color: #fff; border-radius: 999px; padding: 1px 8px; font-size: .7rem; }

/* ---------- Me, Today banners ---------- */
.cls-invite, .cls-expired { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cls-invite > div, .cls-expired > div { flex: 1 1 220px; }
.cls-invite p, .cls-expired p { margin: 2px 0 0; }
.cls-classhead { display: flex; gap: 14px; align-items: center; }
.cls-status { font-size: .88rem; margin: 4px 0 0; }

/* ---------- sharing ---------- */
.cls-share { display: flex; align-items: center; gap: 12px; width: 100%; box-shadow: var(--shadow-sm); border: 1px solid var(--char-20); background: #fff; border-radius: 14px; padding: 10px 14px; cursor: pointer; text-align: left; color: var(--char); font: inherit; }
.cls-share > .ico { color: var(--red); flex: none; }
.cls-share-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cls-share-txt small { color: var(--char-80); font-size: .82rem; }
.cls-switch { width: 46px; height: 28px; border-radius: 999px; background: var(--char-20); position: relative; flex: none; transition: background .15s; }
.cls-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.cls-share[aria-pressed="true"] { border-color: var(--red); background: var(--red-10); }
.cls-share[aria-pressed="true"] .cls-switch { background: var(--red); }
.cls-share[aria-pressed="true"] .cls-switch::after { transform: translateX(18px); }
.cls-share:focus-visible { outline: 3px solid var(--red-20); }
.cls-shared-tag { display: inline-flex; gap: 3px; align-items: center; font-size: .72rem; font-weight: 800; color: var(--red); background: var(--red-10); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.cls-shared-badge { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; font-size: .88rem; color: var(--red); background: var(--red-10); border-radius: 999px; padding: 5px 12px; }

@media (prefers-reduced-motion: reduce) { .cls-switch, .cls-switch::after { transition: none; } }
@media (max-width: 560px) {
  .cls-task { grid-template-columns: auto minmax(0, 1fr); padding: 12px; }
  .cls-task > .btn, .cls-task > .cls-done { grid-column: 2; justify-self: start; }
  .cls-msg { gap: 12px; }
  .cls-msg-mo .mo { width: 54px; height: 54px; }
}