.citron-spam-wrapper { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; background-color: var(--background-color-neutral-subtle, #f8f9fa); color: var(--color-base, #202122); border: 1px solid var(--border-color-base, #a2a9b1); font-size: 0.875rem;}.citron-spam-wrapper + .citron-spam-wrapper,.citron-spam-wrapper + span + .citron-spam-wrapper { margin-top: 1rem;}.citron-spam-header { display: flex; justify-content: space-between; align-items: center; gap: 0.375rem; flex-direction: column;}.citron-spam-title { font-weight: bold; letter-spacing: 0.5px;}.citron-spam-actions { display: inline-flex; gap: 0.625rem; font-size: 0.75rem; color: var(--color-progressive, #36c);}.citron-spam-actions > span:hover { text-decoration: underline; cursor: pointer;}.citron-spam-date { font-family: monospace;}.citron-spam-content { display: flex; flex-direction: column; gap: 0.625rem;}.citron-spam-content-title-wrapper { font-size: 0.75rem; color: var(--color-base--subtle, #54595d); display: flex; justify-content: space-between;}.citron-spam-content-title-wrapper::before { content: "–"; font-family: monospace; position: absolute;}.mw-collapsed + .citron-spam-content-title-wrapper::before { content: "+";}.citron-spam-content-title { margin-inline-start: 0.875rem;}.citron-spam-good-count,.citron-spam-bad-count,.citron-spam-added-count { font-weight: bold;}.citron-spam-good-count { color: var(--color-progressive, #36c);}.citron-spam-bad-count { color: var(--color-destructive, #bf3c2c);;}.citron-spam-added-count { color: var(--color-success, #2cb491);}.citron-spam-hostname { display: flex; justify-content: space-between; gap: 0.625rem; flex-direction: column;}.citron-spam-hostname-time { padding-inline: 0.3125rem; display: flex; align-items: center; height: 1.375rem; font-size: 0.75rem; font-family: monospace; background-color: var(--background-color-neutral, #eaecf0); color: var(--color-base--subtle, #54595d); border: 1px solid var(--border-color-base, #a2a9b1); width: max-content;}.citron-spam-hostname-inner { flex: 1; display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; border-inline-start: 0.3125rem solid var(--background-color-interactive--hover, #dadde3); padding-inline-start: 0.625rem;}.citron-spam-hostname-inner[data-added="true"] { border-inline-start: 0.3125rem solid var(--border-color-success, #099979);}.citron-spam-hostname-inner-top { display: flex; justify-content: space-between; gap: 0.625rem; flex-direction: column;}.citron-spam-hostname-inner-top-left { flex: 1; padding-inline: 0.3125rem; height: 1.375rem; overflow: hidden; display: flex; justify-content: space-between; gap: 0.625rem; background: var(--background-hostname-inner-top-left);}.citron-spam-hostname-hostname { font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.citron-spam-hostname-inner-top-right,.citron-spam-feedbacks { display: flex; gap: 0.625rem; flex-wrap: wrap;}.citron-spam-hostname-score,.citron-spam-hostname-status,.citron-spam-feedback { white-space: nowrap; font-size: 0.75rem; display: flex; align-items: center; justify-content: center;}.citron-spam-hostname-status { height: 1.375rem; min-width: 4.5rem;}.citron-spam-feedback { height: 1.375rem; padding-inline: 0.3125rem;}.citron-spam-feedback-icon { mask-size: 1rem; height: 1rem; width: 1rem; margin-right: 0.375rem;}.citron-spam-feedback-bad .citron-spam-feedback-icon { mask-image: url("https://upload.wikimedia.org/wikipedia/commons/8/80/OOjs_UI_icon_alert.svg"); background-color: var(--background-color-error, #f54739);}.citron-spam-feedback-good .citron-spam-feedback-icon { mask-image: url("https://upload.wikimedia.org/wikipedia/commons/e/ef/OOjs_UI_icon_arrowNext-ltr.svg"); background-color: var(--background-color-progressive--focus, #6485d1);}.citron-spam-hostname-inner-bottom { display: flex; gap: 0.625rem; flex-wrap: wrap;}.citron-spam-revision { padding-block: 0.125rem; padding-inline: 0.3125rem; font-size: 0.75rem; background-color: var(--background-color-warning-subtle, #fdf2d5); color: var(--color-warning, #886425); border: 1px dotted var(--border-color-warning, #ab7f2a); word-break: break-word;}.citron-spam-footer { font-size: 0.75rem; color: var(--color-base--subtle, #54595d); border-top: 1px dotted var(--border-color-base, #a2a9b1); padding-top: 0.625rem; display: flex; justify-content: space-between; gap: 0.3125rem; flex-wrap: wrap;}.citron-spam-status[data-today="true"] { color: var(--color-icon-warning, #ab7f2a);}.citron-spam-status[data-today="false"] { color: var(--color-success, #177860);}.citron-spam-info > a { text-decoration: none;}.citron-spam-empty { text-align: center; font-style: italic; color: var(--color-base--subtle, #54595d);}/* Responsive */@media (min-width: 576px) { .citron-spam-header, .citron-spam-hostname, .citron-spam-hostname-inner-top { flex-direction: row; }}/* Utilities */.citron-spam-very-bad,.citron-spam-feedback-bad { background-color: var(--background-color-destructive-subtle, #ffe9e5); color: var(--color-destructive, #bf3c2c); border: 1px solid var(--border-color-destructive, #f54739);}.citron-spam-bad { background-color: #ffead4; /* orange50 */ color: #a95226; /* orange700 */ border: 1px solid #d46926; /* orange500 */}@media screen { html.skin-theme-clientpref-night .citron-spam-bad { background-color: #361d13; /* orange1000 */ color: #f97f26; /* orange400 */ }}@media screen and (prefers-color-scheme: dark) { html.skin-theme-clientpref-os .citron-spam-bad { background-color: #361d13; /* orange1000 */ color: #f97f26; /* orange400 */ }}.citron-spam-uncertain { background-color: var(--background-color-progressive-subtle, #f1f4fd); color: var(--color-progressive, #36c); border: 1px solid var(--border-color-progressive, #6485d1);}.citron-spam-added { background-color: var(--background-color-success-subtle, #dff2eb); color: var(--color-success, #177860); border: 1px solid var(--border-color-success, #099979);}.citron-spam-not-added { background-color: var(--background-color-neutral, #eaecf0); color: var(--color-base--subtle, #54595d); border: 1px solid var(--border-color-base, #a2a9b1);}.citron-spam-feedback-good { background-color: var(--background-color-progressive-subtle, #f1f4fd); color: var(--color-progressive, #36c); border: 1px solid var(--border-color-progressive, #6485d1);}/* Fixes */.citron-spam-wrapper [id^="mw-customcollapsible-citron"].mw-collapsed { display: none;}
