#player-surface:has(.news-view) {
  container-type: inline-size;
  container-name: news-shell;
  min-height: 340px;
  align-items: stretch;
}
.cheezcable:has(.news-view),
.cheezcable:has(.news-view):has(#remote-panel:not([hidden])) {
  grid-template-rows: auto minmax(340px, 1fr) auto auto;
}
.news-view {
  box-sizing: border-box;
  width: 100%; height: 100%; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px;
  overflow: hidden; padding: 14px;
  background: #391c25; color: #f8efdd; font-family: Arial, sans-serif;
}
.news-view * { box-sizing: border-box; }
.news-header {
  display: flex; gap: 12px; align-items: center;
  border-bottom: 1px solid #84515d; padding-bottom: 10px;
}
.news-header strong {
  background: #a34756; color: #fff3de; padding: 5px 10px;
  letter-spacing: .1em; font-size: 22px;
}
.news-header span { font-size: 16px; }
.news-layout {
  display: grid; grid-template-columns: 230px minmax(200px, 1fr);
  gap: 16px; min-height: 0;
}
.news-nav {
  min-height: 0; overflow-y: auto; padding: 2px 10px 6px 2px;
  scrollbar-color: #aa6b78 #391c25;
}
.news-view button, .news-view input {
  font: inherit; font-size: 13px; border: 1px solid #a36d79;
  border-radius: 3px; padding: 8px 9px;
  background: #542b37; color: #fff3de;
}
.news-view input { background: #fff5e4; color: #39202a; }
.news-view button { cursor: pointer; }
.news-view button:hover, .news-view button[aria-pressed=true] {
  background: #e7cdb5; color: #40212b;
}
.news-view button:focus-visible, .news-view input:focus-visible {
  outline: 3px solid #e9b967; outline-offset: -3px;
}
.news-view button:disabled { opacity: .55; cursor: default; }
.news-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.news-destinations, .news-sources { display: grid; gap: 6px; margin-bottom: 12px; }
.news-sources button { text-align: left; }
.news-home { font-weight: 600; font-size: 13px; margin: 14px 0 8px; border-top: 1px solid #84515d; padding-top: 12px; }
.news-search, .news-controls, .news-results { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.news-search input { min-width: 0; width: 100%; }
.news-schedule { font-size: 12px; line-height: 1.4; color: #d1abb3; }
.news-pane { min-width: 200px; min-height: 0; display: flex; flex-direction: column; gap: 7px; }
.news-identity { font-weight: 700; font-size: 14px; margin: 0; flex: none; }
.news-message { font-size: 13px; line-height: 1.3; margin: 0; flex: none; }
.news-pane > button { align-self: flex-start; flex: none; }
.news-player {
  width: 100%; min-width: 200px; min-height: 200px; flex: 1 1 0;
  background: #130d10; overflow: hidden;
}
.news-player iframe { display: block; width: 100%; height: 100%; min-height: 200px; }
.news-view [hidden] { display: none; }
@container news-shell (max-width: 640px) {
  .news-view { padding: 10px; gap: 8px; }
  .news-header { padding-bottom: 7px; }
  .news-header span { font-size: 13px; }
  .news-header strong { font-size: 18px; }
  .news-layout { grid-template-columns: minmax(200px, 1fr); grid-template-rows: minmax(min-content, 1fr) minmax(60px, .35fr); gap: 8px; }
  .news-pane { grid-row: 1; min-height: min-content; }
  .news-nav { grid-row: 2; padding: 5px 2px; border-top: 1px solid #84515d; }
  .news-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .news-categories button { min-width: 0; white-space: normal; overflow-wrap: anywhere; padding: 8px 5px; }
  .news-destinations, .news-sources { display: flex; flex-wrap: wrap; }
}
/* Extra rows are reserved only for SNN; guide/remote never cover the provider. */
@media(max-width: 900px) {
  #player-surface:has(.news-view) { min-height: 420px; }
  .cheezcable:has(.news-view),
  .cheezcable:has(.news-view):has(#remote-panel:not([hidden])) { grid-template-rows: auto minmax(420px, 1fr) auto auto; }
}
@media(max-height: 500px) and (min-width: 560px) {
  .cheezcable:has(.news-view):not(:has(#remote-panel:not([hidden]))) { grid-template-rows: auto minmax(420px, 1fr) auto; }
}

/* A narrow remote leaves extra room for wrapped source/status text and browsing. */
@media(max-width: 900px) {
  .cheezcable:has(.news-view):has(#remote-panel:not([hidden])) { grid-template-rows: auto minmax(500px, 1fr) auto auto; }
  .cheezcable:has(#remote-panel:not([hidden])) #player-surface:has(.news-view) { min-height: 500px; }
}