/* Spam filtering and unsubscribing (spam.js): the reader's banner and the
   Spam part of Settings > Filters. */

.spam-banner { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border-radius: 8px; padding: 8px 8px 8px 12px; margin: 0 0 16px; font-size: 14px; }
.spam-banner > svg { width: 20px; height: 20px; fill: var(--accent-ink); flex: none; }
.spam-banner .muted { font-size: 13px; margin-top: 2px; }
.spam-banner .btn.small { margin-left: 0; white-space: nowrap; }
.spam-banner.danger { background: #FCE8E6; color: #5C1410; }
.spam-banner.danger > svg { fill: #B3261E; }
.spam-banner.warn { background: #FEF3D6; color: #4A3500; }
.spam-banner.warn > svg { fill: #B06000; }
[data-scheme="dark"] .spam-banner.danger { background: #3B1714; color: #F9DEDC; }
[data-scheme="dark"] .spam-banner.danger > svg { fill: #F2B8B5; }
[data-scheme="dark"] .spam-banner.warn { background: #3A2E10; color: #FBE7B5; }
[data-scheme="dark"] .spam-banner.warn > svg { fill: #F6C35B; }
.spam-banner.danger .muted, .spam-banner.warn .muted { color: inherit; opacity: .8; }

.spam-settings { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 8px; }
.spam-settings h3 { margin: 24px 0 4px; font-size: 15px; }
.spam-settings .spam-status { margin: 4px 0 8px 28px; }
.spam-settings table { margin-bottom: 8px; }
.spam-settings td { vertical-align: middle; }
.spam-add { display: flex; gap: 8px; align-items: center; max-width: 440px; }
.spam-add input, .spam-folders select { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; background: var(--surface); color: var(--text); font: inherit; }
.spam-add input:focus, .spam-folders select:focus { outline: 2px solid var(--accent-ink); outline-offset: -1px; }
.spam-add input { flex: 1; min-width: 0; }
.spam-folders select { max-width: 260px; }

@media (max-width: 600px) {
  .spam-banner { flex-wrap: wrap; }
  .spam-banner .spacer { flex-basis: calc(100% - 40px); }
}