/* News: toolbar (search, sort, view toggle), filter chips, list and card views, keyword dialog. */
/* search bar: opens from the search button in the header */
.search { display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 8px 0 16px; border-radius: 28px; background: var(--surface-container-high) }
.search > .ms { color: var(--on-surface-variant) }
.search .field { flex: 1; height: 100%; border: 0; padding: 0 8px; font-size: 16px }
.search .field:focus { border: 0; padding: 0 8px }
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: -8px }
.toolbar .groups { flex: 1 }
.toolbar .sort { height: 40px; padding: 0 36px 0 14px; border-radius: 20px; background: var(--surface-container-low) }
.seg { display: inline-flex; border: 1px solid var(--outline); border-radius: 20px; overflow: hidden; height: 40px }
.seg-btn { width: 48px; border: 0; background: transparent; color: var(--on-surface); cursor: pointer; display: grid; place-items: center }
.seg-btn + .seg-btn { border-left: 1px solid var(--outline) }
.seg-btn.on { background: var(--secondary-container); color: var(--on-secondary-container) }

.chips { display: flex; gap: 8px; flex-wrap: wrap }
.chip { height: 32px; padding: 0 16px; border: 1px solid var(--outline); border-radius: 8px; background: transparent; cursor: pointer; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px }
.chip .ms { font-size: 18px; margin-left: -6px }
.chip.on { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent }
.menu-chip .ms { margin: 0 0 0 -2px }
[data-menu="topics"].on { background: var(--tertiary-container); color: var(--on-tertiary-container) }
.menu.topics .menu-item.on .ms { color: var(--tertiary) }
.topic { color: var(--tertiary) }

/* list view */
.news-list { padding: 4px 0 }
.news-row { display: grid; grid-template-columns: 72px 1fr 40px; gap: 14px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--outline-variant) }
.news-row:first-child, .src-head + .news-row { border-top: 0 }
.news-row img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; background: var(--surface-container-highest) }
.news-text { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.news-title { font-size: 15px; line-height: 20px; font-weight: 500 } .news-title:hover { color: var(--primary) }
.news-text small a { text-decoration: underline }
.src-head { padding: 14px 16px 6px; border-top: 1px solid var(--outline-variant); color: var(--primary) }
.src-head:first-child { border-top: 0 }
.ph-img { display: grid; place-items: center; background: var(--surface-container-highest); color: var(--primary); font-size: 28px; font-weight: 500 }
.ph-img.sm { width: 72px; height: 72px; border-radius: 8px }
.mark .ms.fill { color: var(--primary) }

/* cards view */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px }
.news-grid .src-head { grid-column: 1 / -1; padding: 8px 4px 0; border: 0 }
.news-card { display: flex; flex-direction: column }
.news-card img, .news-card .ph-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block }
.news-card-body { padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.news-card .title:hover { color: var(--primary) }
.news-card p { font-size: 13px; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical }
.news-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto }

.show-more { display: flex; width: 100%; justify-content: center; height: 48px; margin-top: 8px }
.empty { padding: 32px 16px }
#keyword-list { width: 100%; height: auto; padding: 12px 16px; margin-top: 12px; resize: vertical; font: inherit }

@media (max-width: 700px) {
  .toolbar .groups { flex-basis: 100% }
  .news-row { grid-template-columns: 56px 1fr 36px; gap: 10px; padding: 10px 12px }
  .news-row img, .ph-img.sm { width: 56px; height: 56px }
}