/* News from teachers: big cards, like a LinkedIn post (who posted, the title, the question in its own large panel, the
   description), on the student dashboard and in the teachers' department. Also the department's own pages. */
.news-feed { display: grid; gap: 14px; }
.news-card { background: #fff; color: var(--ink, #0f1a3d); border: 1px solid var(--edge, #dbe4fb); border-radius: 16px; padding: 16px 18px; box-shadow: 0 6px 18px rgba(10, 18, 56, .06); }
.news-head { display: flex; align-items: center; gap: 10px; }
.news-av { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--subj-soft, #e9efff); color: var(--subj, var(--blue-d, #1d4ed8)); font-family: var(--display); font-weight: 700; flex: none; }
.news-who { display: grid; line-height: 1.25; min-width: 0; }
.news-who small { color: var(--mute, #5a6788); font-size: .78rem; }
.news-remove { margin-left: auto; font: inherit; font-size: .76rem; border: 1px solid var(--edge, #dbe4fb); background: #fff; border-radius: 999px; padding: 4px 10px; min-height: 30px; cursor: pointer; color: var(--mute, #5a6788); }
.news-title { font-size: 1.15rem; margin: 12px 0 8px; line-height: 1.35; }
.news-q { background: linear-gradient(160deg, var(--subj-soft, #eef3ff), #fff); border: 2px solid var(--subj, var(--blue, #2f6bff)); border-radius: 14px; padding: 16px 18px; margin: 8px 0; }
.news-q-tag { display: block; font-size: .74rem; font-weight: 600; color: var(--subj, var(--blue-d, #1d4ed8)); margin-bottom: 6px; }
.news-q-text { font-size: 1.12rem; line-height: 1.55; overflow-x: auto; }
.news-opts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.news-opts li { background: #fff; border: 1px solid var(--edge, #dbe4fb); border-radius: 10px; padding: 8px 12px; }
.news-parts { margin: 8px 0 0; padding-left: 18px; }
.news-body { margin-top: 8px; line-height: 1.55; color: var(--ink, #0f1a3d); }
.news-foot { display: flex; justify-content: flex-end; margin-top: 10px; }

/* the teachers' department */
.dept-card { width: min(100%, 460px); }
.dept-nav { margin: 0; }
.dept-nav button { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .2); }
.dept-nav button.on { background: #fff; color: var(--navy, #0a1238); border-color: #fff; }
.dept-page { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }   /* a column the screen's width: wide tables scroll inside their card */
.dept-page > * { min-width: 0; }
.dept-h { margin: 6px 0 0; font-size: 1.1rem; color: var(--ink, #0f1a3d); }
.dept-compose { border-top: 4px solid var(--gold, #ffb547); }
.dept-compose h2 { margin: 0 0 8px; }
.dept-form { display: grid; gap: 10px; margin-top: 10px; }
.dept-form textarea, .dept-form input:not([type=radio]), .dept-form select { width: 100%; }
.dept-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dept-preview { min-height: 0; padding: 0 12px; border-left: 3px solid var(--edge, #dbe4fb); color: var(--ink, #0f1a3d); }
.dept-preview:empty { display: none; }
.dept-sub { font-size: .86rem; }
.dept-opt { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; }
.dept-part { display: grid; grid-template-columns: auto 2fr 70px 2fr; align-items: center; gap: 8px; margin-bottom: 6px; }
.dept-train { display: grid; gap: 8px; }
.dept-item { border: 1px solid var(--edge, #dbe4fb); border-radius: 12px; padding: 8px 12px; background: #fff; }
.dept-item summary { cursor: pointer; }
.dept-item.done { opacity: .6; }
.dept-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 14px; }
.dept-dl dt { color: var(--mute, #5a6788); }
.dept-dl dd { margin: 0; font-weight: 600; }
.dept-profile textarea, .dept-profile input { width: 100%; }
@media (max-width: 720px) {
  .dept-row { grid-template-columns: 1fr 1fr; }
  .dept-part { grid-template-columns: auto 1fr 64px; }
  .dept-part input:last-child { grid-column: 2 / -1; }
  .room-top { flex-direction: column; align-items: flex-start; }
}