/* ═══════════════════════════════════════════════════════════════════════
   #sec-moderation — the ONE Moderation destination (dashboard redesign R3).

   ITS OWN FILE, NOT A BLOCK IN sections.css. The page needs a filter table, a
   rail modal and a chat-mode grid — the same shapes the Bot page grew in R2b,
   whose rules are all scoped `#sec-bot`. Rather than widen ~40 shared selectors
   (a merge hazard while another pass is live in sections.css, and a change that
   would silently restyle #sec-bot on any future edit), the page carries its own
   stylesheet, exactly as sec-obs-live.css / control-surface.css / scene-editor.css
   do. EVERY selector below is prefixed #sec-moderation, so nothing here can reach
   another section.

   Global tokens only (DESIGN-GUIDELINES §3, source shared/design-tokens.json): no
   hardcoded hex, no px colours, no inline styles. The base components (.card,
   .btn, .toggle, .badge, .chip, .field, .input, .subtabs, .sec-modal, .sec-item)
   are already styled globally in sections.css; these rules only add the layout
   those components sit in. Everything wraps + stacks on narrow, and wide content
   scrolls INSIDE .sec-tablewrap so the body never scrolls horizontally.
   ═══════════════════════════════════════════════════════════════════════ */

#sec-moderation .page-header h1 { letter-spacing: -.02em; }
#sec-moderation .sec-hint { margin-top: 0; }

/* ── pane toolbar (search) ── */
#sec-moderation .mod-pane-toolbar {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; margin-bottom: var(--space-3);
}
#sec-moderation .mod-pane-search { flex: 1 1 12rem; min-width: 0; }
#sec-moderation .mod-pane-host { min-height: 4rem; }

/* ── the FILTERS table ── */
#sec-moderation .mod-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#sec-moderation .mod-table th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-faint);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
#sec-moderation .mod-table td {
  padding: var(--space-3); border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
#sec-moderation .mod-table tbody tr:last-child td { border-bottom: 0; }
#sec-moderation .mod-tr { cursor: pointer; }
#sec-moderation .mod-tr:focus-visible { outline: 2px solid var(--border-accent); outline-offset: -2px; }
@media (hover: hover) {
  #sec-moderation .mod-tr:hover > td { background: var(--surface-2); }
}
/* A disabled filter is DIMMED IN PLACE — visible, not hidden behind a filter
   chip you had to know to click. Its switch stays at full contrast so the way
   back on is never the dim thing. */
#sec-moderation .mod-tr-off > td { opacity: .5; }
#sec-moderation .mod-tr-off .toggle { opacity: 1; }
#sec-moderation .mod-tr-empty > td { border-bottom: 0; }
#sec-moderation .mod-td-toggle, #sec-moderation .mod-th-toggle { width: 44px; }
#sec-moderation .mod-td-name { color: var(--text); font-weight: 600; min-width: 12rem; }
#sec-moderation .mod-row-sub {
  display: block; margin-top: 2px; font-weight: 400; font-size: 11px; color: var(--text-faint);
}
#sec-moderation .mod-td-act,
#sec-moderation .mod-td-exempt,
#sec-moderation .mod-td-esc { color: var(--text-dim); white-space: nowrap; }
#sec-moderation .mod-td-actions { text-align: right; white-space: nowrap; }
#sec-moderation .mod-td-actions > .btn + .btn { margin-left: var(--space-1); }
#sec-moderation .mod-th-actions { width: 8.5rem; }

/* ── the RAIL MODAL (sections + fields, one dialog reused by create + edit) ── */
#sec-moderation .mod-rail-box { width: min(720px, 100%); }
#sec-moderation .mod-rail { display: flex; gap: var(--space-4); align-items: flex-start; }
#sec-moderation .mod-rail-nav {
  flex: none; width: 10.5rem; display: flex; flex-direction: column; gap: 2px;
}
#sec-moderation .mod-rail-tab {
  text-align: left; border: 0; background: transparent; color: var(--text-dim);
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px var(--space-3);
  border-radius: var(--r-sm); cursor: pointer;
}
#sec-moderation .mod-rail-tab.on { background: var(--surface-2); color: var(--text); }
#sec-moderation .mod-rail-tab:focus-visible { outline: 2px solid var(--border-accent); outline-offset: 2px; }
#sec-moderation .mod-rail-panes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
#sec-moderation .mod-rail-pane { display: flex; flex-direction: column; gap: var(--space-3); }
#sec-moderation .mod-rail .between { display: flex; gap: var(--space-3); flex-wrap: wrap; }
#sec-moderation .mod-rail .between > .field { flex: 1 1 8rem; min-width: 0; }
#sec-moderation .ef-check { display: flex; align-items: center; gap: var(--space-2); font-size: 12.5px; color: var(--text-dim); }
@media (max-width: 640px) {
  #sec-moderation .mod-rail { flex-direction: column; }
  #sec-moderation .mod-rail-nav { width: 100%; flex-direction: row; flex-wrap: wrap; }
}

/* ── CHAT MODES: one card per connected platform ── */
#sec-moderation .mod-mode-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
#sec-moderation .mod-mode-card .card-head h3 { margin: 0; font-size: 13px; }
#sec-moderation .mod-mode-toggles { display: flex; flex-direction: column; gap: var(--space-3); }
#sec-moderation .mod-mode-toggle { display: flex; align-items: center; gap: var(--space-2); }
#sec-moderation .mod-mode-toggle .lbl { font-size: 12px; color: var(--text); cursor: pointer; }
#sec-moderation .mod-mode-slow .input { max-width: 8rem; }

/* ── BANNED WORDS (the same view in the tab and in the blocklist rail) ── */
#sec-moderation .mod-wordadd { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
#sec-moderation .mod-wordadd > .field { flex: 1 1 220px; min-width: 0; }
#sec-moderation .mod-wordlist.chips { margin-top: var(--space-3); }
#sec-moderation .mod-word .mod-word-label { color: var(--text); }

/* ── AI moderation ── */
#sec-moderation .mod-ai-status { display: block; margin: 0 0 var(--space-3); }
/* The honest-state line. Colour NEVER carries the meaning on its own: the
   sentence itself says whether the classifier is connected. */
#sec-moderation .mod-ai-status--warn { color: var(--warn); }
#sec-moderation .mod-ai-status--ok { color: var(--ok); }
#sec-moderation .mod-ai-cats {
  display: grid; gap: var(--space-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: var(--space-3); margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
#sec-moderation .mod-ai-cats > legend { padding: 0 var(--space-2); }