/* RSS Hub (tools/cve-feeds.php): hashtag filter + My feed. The feed list itself is styled inline on the page. */
.rh-tools { margin: 0 0 20px; display: flex; flex-direction: column; gap: 14px; }
.rh-tools[hidden], .rh-tools [hidden] { display: none !important; }
.rh-h { margin: 0 0 6px; }
.rh-hint { font-size: 0.85em; color: var(--color-text-muted); margin: 0 0 8px; line-height: 1.5; }
.rh-hint--short { display: none; }
.rh-msg { font-size: 0.85em; color: var(--color-text-muted); margin: 4px 0 0; min-height: 1.2em; }
.rh-msg:empty { min-height: 0; }

.rh-filter, .rh-my, .rh-sources {
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    padding: 14px;
}

.rh-chipbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rh-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.rh-chip {
    display: inline-flex; align-items: center; gap: 2px;
    border: 1px solid var(--color-accent); background: var(--color-accent-bg-subtle);
    font-family: var(--font-mono); font-size: 0.85em; padding: 0 0 0 8px; min-height: 32px;
}
.rh-chip--x { border-style: dashed; border-color: var(--color-text-muted); color: var(--color-text-muted); }
.rh-chip__text { overflow-wrap: anywhere; }
.rh-chip__rm {
    background: none; border: 0; color: inherit; cursor: pointer;
    min-width: 32px; min-height: 32px; font-size: 1.1em; line-height: 1;
}
.rh-chip__rm:hover, .rh-chip__rm:focus-visible { color: var(--color-accent); }
.rh-input {
    flex: 1 1 12em; min-width: 0; min-height: 36px; padding: 6px 10px;
    background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text);
    font-family: var(--font-mono); font-size: 0.9em;
}
.rh-input:focus { border-color: var(--color-accent); }

.rh-btn {
    min-height: 36px; padding: 6px 12px; cursor: pointer;
    background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); font: inherit; font-size: 0.85em;
}
.rh-btn:hover:not(:disabled) { border-color: var(--color-accent); }
.rh-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.rh-btn--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-bg); }
.rh-btn--primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.rh-btn--ghost { border-color: transparent; background: none; text-decoration: underline; }
.rh-btn--small { min-height: 30px; padding: 3px 10px; }

.rh-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.85em; }
.rh-suggest__label { color: var(--color-text-muted); }
.rh-suggest__btn {
    min-height: 30px; padding: 2px 10px; cursor: pointer; font-family: var(--font-mono); font-size: 0.95em;
    background: none; border: 1px dashed var(--color-border); color: var(--color-text);
}
.rh-suggest__btn:hover, .rh-suggest__btn:focus-visible { border-color: var(--color-accent); border-style: solid; }

.rh-mode { border: 0; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.85em; }
.rh-mode legend { padding: 0; margin-bottom: 4px; color: var(--color-text-muted); }
.rh-mode label { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; cursor: pointer; }

.rh-my summary { cursor: pointer; font-weight: 600; min-height: 30px; }
.rh-my[open] summary { margin-bottom: 8px; }
.rh-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 12px; margin-bottom: 10px; }
.rh-group { border: 1px solid var(--color-border); padding: 8px 10px; margin: 0; min-width: 0; }
.rh-group legend { padding: 0 4px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); }
.rh-pick { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85em; padding: 4px 0; min-height: 28px; cursor: pointer; overflow-wrap: anywhere; }
.rh-pick input { margin-top: 2px; flex: none; }
.rh-pick:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }

.rh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rh-sharebar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; font-size: 0.85em;
    border: 1px solid var(--color-accent); background: var(--color-accent-bg-subtle);
}
.rh-sharebar span { flex: 1 1 18em; }

.rh-src-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.85em; }
.rh-src { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 30px; }
.rh-src__name { font-weight: 600; }
.rh-src__msg { color: var(--color-text-muted); overflow-wrap: anywhere; }
.rh-src--error .rh-src__msg { color: var(--color-error); }

.feed-src { font-size: 0.75em; color: var(--color-text-muted); margin: 0 0 8px; }
.feed-list:focus { outline: none; }
.rh-mark { background: var(--color-accent-bg); color: inherit; padding: 0 1px; }
.feed-list > .feed-empty { background: var(--color-bg-secondary); color: var(--color-text-muted); }
.feed-empty p { margin: 0; }
.rh-empty-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.rh-export { margin-top: var(--spacing-md, 1rem); }

/* The feed is what visitors come for: keep the tools compact so the first item stays near the top. */
.rh-tools { gap: 10px; margin-bottom: 14px; }
.rh-filter, .rh-my, .rh-sources { padding: 12px 14px; }
.rh-suggest { margin-top: 6px; }

@media (max-width: 480px) {
    .rh-filter, .rh-my, .rh-sources { padding: 10px; }
    /* the short hint replaces the long one, which stays in the accessibility tree (visually hidden, not display:none) for aria-describedby */
    #rhTagHint { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
    .rh-hint--short { display: block; margin-bottom: 6px; }
    /* suggestions on one scrollable row */
    .rh-suggest { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
    .rh-suggest__label, .rh-suggest__btn { flex: none; }
    .rh-actions .rh-btn { flex: 1 1 100%; }
    .rh-tools .rh-h { font-size: 1em; margin-bottom: 4px; }
    .feed-item { padding: 14px; }
    .feed-info { padding: 10px 0; margin-bottom: 12px; }
}