/* Reader Messages use the existing 2.2 typography and Soft Basic palette. */
.news-item { padding: 1rem .65rem; border-bottom: 1px solid var(--soft-cyan); overflow-wrap: anywhere; }
.news-item:hover { background: #EFEFEF; }
.news-item p { margin: .5rem 0; }
.news-author { color: var(--gray-24); }
.news-text { white-space: pre-wrap; }
.news-compose { margin: 1rem 0; padding: .75rem; border-inline-start: 3px solid var(--soft-blue); }
.news-compose summary { cursor: pointer; color: var(--soft-blue-deep); }
.news-empty { margin: 2rem 0; }
.private-reply { border-inline-start: 3px solid var(--soft-cyan); }
#conversation { scroll-margin-top: 72px; margin: 1.5rem 0; }
.school-brand a { color: inherit; text-decoration: none; }
.school-brand a:hover { text-decoration: none; }

.news-search { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 1rem 0; padding: .75rem 0; }
.news-search label { display: grid; gap: .4rem; min-width: 0; }
.news-query-field { flex: 1 1 20rem; }
.news-search input[type="search"] { width: 100%; min-width: 0; margin: 0; }
.news-search button { align-self: flex-end; margin: 0; }
.news-search input, .news-search button { font: inherit; padding: .45rem; }
.news-search button { background: var(--soft-blue); color: white; border: 0; padding: .5rem .8rem; cursor: pointer; }
.news-source, .news-kind { font-weight: 600; }
.news-source-links { margin: .5rem 0; padding-inline-start: 1.25rem; }
.news-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.news-table th, .news-table td { text-align: start; padding: .65rem .4rem; border-bottom: 1px solid var(--soft-cyan); vertical-align: top; overflow-wrap: anywhere; }
.news-table th { white-space: nowrap; overflow-wrap: normal; }
.news-table form { margin: .4rem 0; }
.news-notice { border-inline-start: 3px solid var(--soft-blue); padding: .75rem; }

.desk-form .news-checkbox, .news-checkbox { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.desk-form .news-checkbox input[type="checkbox"], .news-checkbox input[type="checkbox"] { width: auto; margin: 0; flex: 0 0 auto; }
@media (max-width: 600px) {
    .news-table, .news-table tbody, .news-table tr, .news-table td { display: block; }
    .news-table thead { display: none; }
    .news-table tr { padding: .75rem 0; border-bottom: 1px solid var(--soft-cyan); }
    .news-table td { border: 0; padding: .3rem 0; }
    .news-table td::before { content: attr(data-label); display: block; font-weight: 600; }
}