:root {
  --color-bg: oklch(97.1% 0.024 88.23);
  --color-hover: oklch(94.48% 0.024 88.23);
  --color-text: oklch(24.74% 0.024 88.23);
  --color-new: oklch(94.48% 0.024 38.23);
}

body {
  font-family: system-ui;
  font-size: 18px;
  background: var(--color-bg);
  color: var(--color-text);
}

main {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

section ul {
  max-height: 250px;
  overflow-y: auto;
}

.inline-icon {
  height: 1em;
  vertical-align: text-bottom;
}

summary {
  cursor: pointer;
  text-overflow: ellipsis;
}

summary,
details li {
  padding: 0.5em;
  border-radius: 12px;
  margin-block-start: 4px;
  transition: background cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s;
}

summary:hover,
details li:hover {
  background: var(--color-hover)
}

details:has(li.has-recent) {

  summary,
  li.has-recent {
    background: var(--color-new);
  }
}


.errors li {
  word-break: break-all;
}

.feed-url {
  color: #aaa;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

.article-timestamp,
.feed-url {
  font-size: 0.75em;
}

details ul {
  list-style-type: none;
  margin: 0;
}