/* In-server rules (client/js/moderationRules.js): the Timeout dialog's duration pills, the
   moderators' timeout mark in the member list, the notice above the composer (timeout,
   verification level, slowmode), Channel Settings' Slowmode slider and Overview's Verification
   Level choices. Uses the theme tokens from styles.css. */

.timeout-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.timeout-preset { padding: 6px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-rail); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.timeout-preset:hover { background: var(--bg-hover); }
.timeout-preset.selected { border-color: var(--accent); background: var(--accent); color: #fff; }
.timeout-preset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.timeout-dialog .settings-field > .muted.small { margin-top: 2px; }

.timeout-badge { flex: none; display: inline-flex; align-items: center; margin-left: 4px; color: var(--danger); }

.composer-rule-notice { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; padding: 8px 12px; border-radius: var(--radius); background: var(--bg-input); color: var(--text-muted); font-size: 13px; line-height: 18px; }
.composer-rule-notice[hidden] { display: none; }
/* The notice's announcement for screen readers (client/js/moderationRules.js renderNotice): read, not shown. */
.composer-rule-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.composer-rule-notice .icon { flex: none; margin-top: 1px; }
.composer-rule-notice strong { color: var(--text-strong); }
.composer-rule-notice.timeout { color: var(--text); box-shadow: inset 3px 0 0 var(--danger); }
.composer-rule-notice.timeout .icon { color: var(--danger); }
.composer-rule-notice.verification { color: var(--text); box-shadow: inset 3px 0 0 var(--warning); }
.composer-rule-notice.verification .icon { color: var(--warning); }
.composer-rule-notice.slowmode { padding: 4px 12px; background: none; }
.composer-rule-notice.slowmode.cooling .icon { color: var(--warning); }
.composer-rule-text { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.slowmode-input { flex: 1; max-width: 360px; accent-color: var(--accent); }
.slowmode-value { min-width: 72px; color: var(--text-strong); font-weight: 600; }

.verification-levels { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin-top: 4px; }
.verification-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--bg-rail); cursor: pointer; }
.verification-option:hover { background: var(--bg-hover); }
.verification-option.selected { box-shadow: inset 0 0 0 1px var(--accent); }
.verification-option input { accent-color: var(--accent); margin: 0; }
.verification-text { display: flex; flex-direction: column; gap: 2px; }
.verification-text .strong { color: var(--text-strong); font-weight: 600; }