/* news in the apple.com arrangement, compact: Store-style head, a segmented control for the sources, a summary row
   (the next deadlines beside the active source's summary tile), then filters and the source as one list tile.
   news.js binds by id/class and counts the rows it rendered into the summary tile's icon rows. */

.nw main { display: flex; flex-direction: column; }
.nw main > * + * { margin-top: 0; }
.nw main > .tab-bar { order: 1; align-self: flex-start; margin-top: 36px; }
.nw main > .nw-sum { order: 2; margin-top: 28px; }
.nw main > .tab-panel { order: 3; display: none; margin-top: 48px; }
.nw main > .tab-panel.active { display: block; }

/* ---------- sources: a segmented control (ui.css), the count in grey beside the name ---------- */
.nw main > .tab-bar .tab-btn { height: 34px; padding: 0 16px; font-size: 14px; }
.tab-count { min-width: 1.4ch; font-size: 12px; text-align: center; }
.tab-count:empty { display: none; }
/* news.js leaves a count empty while its source loads and when it failed: … and – say which */
main:has(#msfeedContent > .news-loading) #cntMsfeed:empty,
main:has(#entraContent > .news-loading) #cntEntra:empty,
main:has(#roadmapContent > .news-loading) #cntRoadmap:empty,
main:has(#msfeedContent > .news-empty) #cntMsfeed:empty,
main:has(#entraContent > .news-empty) #cntEntra:empty,
main:has(#roadmapContent > .news-empty) #cntRoadmap:empty { display: inline; }
main:has(#msfeedContent > .news-loading) #cntMsfeed:empty::before,
main:has(#entraContent > .news-loading) #cntEntra:empty::before,
main:has(#roadmapContent > .news-loading) #cntRoadmap:empty::before { content: '…'; }
main:has(#msfeedContent > .news-empty) #cntMsfeed:empty::before,
main:has(#entraContent > .news-empty) #cntEntra:empty::before,
main:has(#roadmapContent > .news-empty) #cntRoadmap:empty::before { content: '–'; }

/* ---------- controls: search pill, filter chips, the source in words ---------- */
.nw-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
main .nw-ctl .news-search {
  flex: 0 1 340px; height: 40px; padding-left: 38px;
  border: 0; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--div);
  background: var(--surf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px 50% / 16px 16px;
}
main .nw-ctl .news-search:focus { box-shadow: inset 0 0 0 1px var(--acc), 0 0 0 4px var(--acc-bg); }
.nw-ctl .source-select { flex: 0 1 300px; height: 40px; }
.nw-src { margin-left: auto; font-size: 13px; color: var(--mut); }
#panelSaved .nw-src { margin: 0 auto 0 0; }
#panelSaved:has(#savedContent > .news-empty) .nw-clear { display: none; }

/* chips filter inside a source; the chosen one inverted like a segment */
.cve-filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cve-filter-pill {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border: 0; border-radius: var(--pill); background: var(--surf); color: var(--ink);
  font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.cve-filter-pill:hover { background: var(--surf-h); }
.cve-filter-pill.active { background: var(--sel); color: var(--sel-ink); }

/* legend for the exploit-probability meter, only while the list carries one */
.nw-legend { display: none; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 14px; font-size: 13px; color: var(--mut); }
.nw-legend > span:first-child { color: var(--body); }
#panelCve:has(.epss-bar-wrap) .nw-legend-epss { display: flex; }
.lg { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.lg-bar { display: inline-block; width: 18px; height: 6px; border-radius: 3px; }
.lg-bar.is-hi { background: var(--down); }
.lg-bar.is-mid { background: var(--warn-dot); }
.lg-bar.is-lo { background: var(--mut); }

/* ---------- the list: one tile, rows divided by inset rules ---------- */
.nw-body { border-radius: var(--r); background: var(--surf); padding: 6px 0; }
.news-loading, .news-empty, .cve-state { display: flex; align-items: center; gap: 12px; margin: 0 28px; padding: 20px 0; font-size: 15px; color: var(--mut); }
.spinner { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--div); border-top-color: var(--acc); animation: nw-spin .9s linear infinite; }
@keyframes nw-spin { to { transform: rotate(360deg); } }
/* the feed error arrives as a loading box without spinner and an inline red: a failed feed is not an alarm */
.news-loading .state-text { color: inherit !important; }
/* failures: an unknown ring next to the words. "nicht erreichbar" and "Keine Einträge" share .news-empty; a count news.js never set marks the failure */
.news-loading:not(:has(.spinner)), .cve-error,
main:has(#cntMsfeed:empty) #msfeedContent > .news-empty,
main:has(#cntEntra:empty) #entraContent > .news-empty,
main:has(#cntRoadmap:empty) #roadmapContent > .news-empty { color: var(--ink); }
.news-loading:not(:has(.spinner))::before, .cve-error::before,
main:has(#cntMsfeed:empty) #msfeedContent > .news-empty::before,
main:has(#cntEntra:empty) #entraContent > .news-empty::before,
main:has(#cntRoadmap:empty) #roadmapContent > .news-empty::before {
  content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--div-2);
}

.show-more-btn {
  display: inline-flex; align-items: center; min-height: 36px; margin: 8px 28px 20px; padding: 0 18px;
  border: 0; border-radius: var(--pill); background: transparent; box-shadow: inset 0 0 0 1px var(--acc); color: var(--acc);
  font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.show-more-btn:hover { background: var(--acc-fill); box-shadow: inset 0 0 0 1px var(--acc-fill); color: #fff; }

/* ---------- rows: tag, source · age, deadline and "Merken" on one line; then title and excerpt ---------- */
.a-card, .entra-card, .cve-card {
  display: block; margin: 0 28px; padding: 22px 0 24px;
  border-top: 1px solid var(--div); color: var(--body); text-decoration: none;
}
.nw-body > :is(.a-card, .entra-card):first-child,
.nw-body > :is(.article-list, .cve-list) > :is(.a-card, .cve-card):first-child { border-top: 0; }
.a-card:hover, .entra-card:hover, .cve-card:hover { color: var(--body); }
.a-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 28px; font-size: 13px; line-height: 1.4; color: var(--mut); }
/* news.js sets inline margins on some of these; the line spaces them with gap */
.a-top > * { margin: 0 !important; }
.a-source { color: var(--body); overflow-wrap: anywhere; }
.a-time { white-space: nowrap; }
.a-source + .a-time::before { content: '·'; margin-right: 8px; }
.a-top > .ts-dead { margin-left: auto !important; }
.a-top > .bm-btn { margin: -4px -10px -4px auto !important; }
.a-top > .ts-dead + .bm-btn { margin-left: 0 !important; }
.a-title {
  margin-top: 8px; max-width: 80ch;
  font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; color: var(--ink); overflow-wrap: anywhere;
}
.a-excerpt, .cve-desc {
  margin-top: 6px; max-width: 80ch;
  font-size: 15px; line-height: 1.55; color: var(--body); overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
/* read rows step back to grey */
.a-card.read :is(.a-title, .a-excerpt), .entra-card.read :is(.a-title, .a-excerpt) { color: var(--mut); }
.a-card:hover .a-title, .entra-card:hover .a-title, .cve-card:hover .cve-vendor { color: var(--acc); }

/* ---------- tags: neutral for categories; amber = act soon, red = critical, green = live ---------- */
.a-badge, .e-badge, .rm-badge, .cve-status, .ts-dead {
  display: inline-block; height: 22px; padding: 0 8px; border-radius: var(--pill);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--div); color: var(--body);
  font-size: 12px; font-weight: 600; line-height: 22px; white-space: nowrap;
}
.a-badge.action, .a-badge.fix, .e-badge.retiring, .ts-dead.urgent, .cve-status.watch { background: var(--warn-bg); box-shadow: none; color: var(--warn); }
.e-badge.breaking, .ts-dead.crit, .cve-status.kev, .cve-status.weaponized { background: var(--down-bg); box-shadow: none; color: var(--down); }
.cve-status.kev-ransomware { background: var(--down-fill); box-shadow: none; color: #fff; }
.rm-badge.launched { background: var(--ok-bg); box-shadow: none; color: var(--ok); }
.e-badge.preview, .rm-badge.dev { background: none; box-shadow: inset 0 0 0 1px var(--div-2); color: var(--mut); font-weight: 400; }
/* deadline in a row: "Noch 12 Tage" */
.a-top > .ts-dead::before { content: 'Noch '; white-space: pre; }

/* save: the bookmark plus the word */
.bm-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 0; border-radius: var(--pill); background: none; color: var(--mut);
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.bm-btn::after { content: 'Merken'; }
.bm-btn:hover { background: var(--card); color: var(--acc); }
.bm-btn.saved { color: var(--acc); font-weight: 600; }
.bm-btn.saved::after { content: 'Gemerkt'; }
.bm-btn.saved svg { fill: currentColor; }
.bm-btn:focus-visible { outline-offset: 0; }

/* ---------- cve: status, id with CVSS, age · product as the title · description; EPSS meter on the right ---------- */
.cve-card {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "badge id date epss" "title title title epss" "desc desc desc epss";
  align-items: center; column-gap: 10px;
}
.cve-kev-badge { grid-area: badge !important; display: flex; }
.cve-id {
  grid-area: id; display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px 10px !important; min-width: 0;
  font: 13.5px/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere;
}
/* the score arrives as a coloured .65rem figure; its colour var names the severity, said here as a word */
.cve-id > span {
  display: inline-block; height: 22px; padding: 0 8px; border-radius: var(--pill);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--div); color: var(--body) !important;
  font: 600 12px/22px var(--font) !important; white-space: nowrap;
}
.cve-id > span::before { content: 'CVSS '; white-space: pre; }
.cve-id > span[style*="--red"] { background: var(--down-bg); box-shadow: none; color: var(--down) !important; }
.cve-id > span[style*="--red"]::after { content: ' · Kritisch'; white-space: pre; }
.cve-id > span[style*="--yellow"] { background: var(--warn-bg); box-shadow: none; color: var(--warn) !important; }
.cve-id > span[style*="--yellow"]::after { content: ' · Hoch'; white-space: pre; }
.cve-date { grid-area: date; font-size: 13px; color: var(--mut); white-space: nowrap; }
.cve-date::before { content: '·'; margin-right: 8px; }
.cve-vendor {
  grid-area: title; margin-top: 8px;
  font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; color: var(--ink); overflow-wrap: anywhere;
}
.cve-desc { grid-area: desc; }
.epss-bar-wrap { grid-area: epss; align-self: start; display: grid; gap: 8px; width: 160px; margin-left: 40px; padding-top: 4px; }
.epss-label { grid-row: 1; font-size: 13px; color: var(--mut); white-space: nowrap; }
.epss-bar { grid-row: 2; height: 6px; border-radius: 3px; background: var(--card); box-shadow: inset 0 0 0 1px var(--div); overflow: hidden; }
.epss-fill { height: 100%; border-radius: 3px; background: var(--mut) !important; }
.epss-fill[style*="--yellow"] { background: var(--warn-dot) !important; }
.epss-fill[style*="--orange"] { background: var(--down) !important; }

/* ---------- summary row: the next deadlines beside the tile of the active source ---------- */
.nw-sum { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.nw:has(#topStories.visible):has(#panelMsfeed.active, #panelEntra.active) .nw-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* one tile per source, shown for the active tab, like the start page cards: title, one sentence, icon rows.
   news.js writes the sentence and the rows; alone the tile sets its rows to the right */
.nw-fig { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; column-gap: 48px; min-width: 0; }
.nw:has(#panelMsfeed.active) .nw-fig-msfeed,
.nw:has(#panelEntra.active) .nw-fig-entra,
.nw:has(#panelRoadmap.active) .nw-fig-roadmap,
.nw:has(#panelCve.active) .nw-fig-cve,
.nw:has(#panelRss.active) .nw-fig-rss,
.nw:has(#panelSaved.active) .nw-fig-saved { display: grid; }
.nw-fig > * { grid-column: 1; }
.nw-fig > .srows { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
.nw-fig > .srows:empty { display: none; }
.nw:has(#topStories.visible):has(#panelMsfeed.active, #panelEntra.active) .nw-fig { grid-template-columns: minmax(0, 1fr); }
.nw:has(#topStories.visible):has(#panelMsfeed.active, #panelEntra.active) .nw-fig > .srows { grid-column: 1; grid-row: auto; margin-top: 24px; }

.nw-fig-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.nw-fig-title { font-size: 24px; letter-spacing: -.02em; }
.nw-say { margin-top: 8px; max-width: 56ch; font-size: 17px; line-height: 1.41; color: var(--body); }

.nw-lbl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.nw-lbl > span:nth-child(2) { font-size: 24px; font-weight: 600; line-height: 1.17; letter-spacing: -.02em; color: var(--ink); }
.nw-stamp { margin-left: auto; font-size: 13px; color: var(--mut); white-space: nowrap; }
#refreshLabel:empty::before, #cveUpdated:empty::before { content: 'Noch kein Stand'; }
.nw-lbl .dm-state { width: 10px; height: 10px; background: none; border: 2px solid var(--div-2); }

.nw-aside-note { display: none; margin-top: 18px; padding: 12px 16px; border-radius: var(--r-m); background: var(--card); font-size: 14px; line-height: 1.45; color: var(--body); }
.nw:has(#cveFilterRow .cve-filter-pill.active:not([data-vendor="kev"])) .nw-aside-note { display: block; }

.nw-filtered { display: none; grid-column: 1 / -1; font-size: 13px; color: var(--mut); }
.nw:has(#panelMsfeed.active #msfeedSearch:not(:placeholder-shown)) .nw-filtered,
.nw:has(#panelEntra.active #entraSearch:not(:placeholder-shown)) .nw-filtered,
.nw:has(#panelEntra.active #entraFilterRow .active:not([data-cat="all"])) .nw-filtered,
.nw:has(#panelRoadmap.active #roadmapSearch:not(:placeholder-shown)) .nw-filtered,
.nw:has(#panelRoadmap.active #roadmapFilterRow .active:not([data-status="all"])) .nw-filtered,
.nw:has(#panelRss.active #newsSearch:not(:placeholder-shown)) .nw-filtered { display: block; }

/* ---------- deadlines: news.js top stories, most urgent first, in a tile with a state dot ---------- */
/* shown on the Message Center and Entra tabs once a deadline exists; news.js hides it inline when none is due */
#urgentSection { display: none; }
.nw:has(#topStories.visible):has(#panelMsfeed.active, #panelEntra.active) #urgentSection { display: flex; }
.nw-fristen { flex-direction: column; min-width: 0; padding: 28px; border-radius: var(--r); background: var(--surf); color: var(--body); }
#urgentSection:has(.ts-row:first-child .ts-dead.plan) .nw-lbl .dm-state { border: 0; background: var(--mut-2); }
#urgentSection:has(.ts-row:first-child .ts-dead.urgent) .nw-lbl .dm-state { border: 0; background: var(--warn-dot); }
#urgentSection:has(.ts-row:first-child .ts-dead.crit) .nw-lbl .dm-state { border: 0; background: var(--down); }
.nw-one { display: none; }
#urgentSection:has(.ts-row:only-child) .nw-one { display: inline; }
#urgentSection:has(.ts-row:only-child) .nw-many { display: none; }

.top-stories { margin-top: 22px; }
.ts-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: baseline; column-gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--div); color: inherit; text-decoration: none;
}
.ts-row .ts-dead {
  grid-column: 1; grid-row: 1; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--mut); font-size: 13px; font-weight: 400; line-height: 1.4;
}
.ts-row .ts-dead.urgent { background: none; color: var(--warn); }
.ts-row .ts-dead.crit { background: none; color: var(--down); }
.ts-row .ts-title { grid-column: 2; grid-row: 1; color: var(--ink); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.ts-row .a-badge { grid-column: 3; grid-row: 1; align-self: center; }
a.ts-row:hover, a.ts-row:hover .ts-title { color: var(--ink); }
a.ts-row:hover .ts-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* the nearest deadline leads: its days as a tag, its title as the tile's headline */
.ts-row:first-child {
  grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "dead badge ." "title title title";
  align-items: center; justify-items: start; gap: 12px 8px; padding: 0 0 22px; border-top: 0;
}
.ts-row:first-child .ts-dead {
  grid-area: dead; height: 24px; padding: 0 10px; border-radius: var(--pill);
  background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 24px;
}
.ts-row:first-child .ts-dead::before { content: 'Noch '; white-space: pre; }
.ts-row:first-child .ts-dead.urgent { background: var(--warn-bg); color: var(--warn); }
.ts-row:first-child .ts-dead.crit { background: var(--down-fill); color: #fff; }
.ts-row:first-child .a-badge { grid-area: badge; }
.ts-row:first-child .ts-title { grid-area: title; font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.22; letter-spacing: -.02em; text-wrap: balance; }

/* a source that failed is said under the deadlines */
.nw-note { display: none; margin-top: 16px; font-size: 14px; color: var(--mut); }
.nw:has(#cntMsfeed:empty):has(#msfeedContent > .news-empty) .nw-no-mc,
.nw:has(#cntEntra:empty):has(#entraContent > .news-empty) .nw-no-entra { display: block; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nw:has(#topStories.visible):has(#panelMsfeed.active, #panelEntra.active) .nw-sum { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* the segments stay on one line and scroll sideways; the fade says there is more */
  .nw main > .tab-bar {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    align-self: stretch; max-width: none; margin-top: 24px; padding-right: 32px;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 32px); mask-image: linear-gradient(to left, transparent, #000 32px);
  }
  .nw main > .tab-bar::-webkit-scrollbar { display: none; }
  .nw main > .tab-bar .tab-btn { flex: none; height: 32px; padding: 0 13px; font-size: 13px; }
  .nw main > .nw-sum { margin-top: 20px; }
  .nw main > .tab-panel { margin-top: 36px; }
  .ui-card.nw-fig, .nw-fristen { padding: 22px; }
  .nw .nw-fig { grid-template-columns: minmax(0, 1fr); }
  .nw .nw-fig > .srows { grid-column: 1; grid-row: auto; margin-top: 14px; }
  .nw-lbl > span:nth-child(2), .nw-fig-title { font-size: 21px; }
  .nw-lbl > .nw-stamp { flex-basis: 100%; margin-left: 20px; }
  .nw-fig-head > .nw-stamp { flex-basis: 100%; margin-left: 0; }
  .nw-say { font-size: 16px; }

  main .nw-ctl .news-search, .nw-ctl .source-select { flex: 1 1 100%; }
  .cve-filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 2px var(--pad); }
  .cve-filter-row::-webkit-scrollbar { display: none; }
  .cve-filter-pill { flex: none; }
  .nw-src { margin-left: 0; }
  .news-loading, .news-empty, .cve-state, .a-card, .entra-card, .cve-card { margin: 0 20px; }
  .show-more-btn { margin: 8px 20px 18px; }
  .a-card, .entra-card, .cve-card { padding: 18px 0 20px; }
  .a-title, .cve-vendor { font-size: 16px; }
  .a-excerpt, .cve-desc { font-size: 14.5px; }
  /* the bookmark keeps its icon; the word goes for room */
  .bm-btn { padding: 0 8px; }
  .bm-btn::after { display: none; }
  .a-top > .bm-btn { margin-right: -8px !important; }

  .cve-card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "badge date" "id id" "title title" "desc desc" "epss epss"; row-gap: 8px; }
  .cve-date { justify-self: start; }
  .cve-date::before { content: none; }
  .cve-vendor { margin-top: 2px; }
  .epss-bar-wrap { width: auto; max-width: 280px; margin: 6px 0 0; padding-top: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
  .epss-label, .epss-bar { grid-row: 1; }
  .epss-label { grid-column: 1; }
  .epss-bar { grid-column: 2; }

  .ts-row { grid-template-columns: 64px minmax(0, 1fr); }
  .ts-row:not(:first-child) .a-badge { display: none; }
}