/* moderation.css: the Report dialog, the moderator queue page, and the suspended account banner */

/* ===== report dialog ===== */

/* dialog width, the base dialog rule in styles.css handles the surface and backdrop */
.report_dialog { width: min(480px, calc(100vw - 24px)); }

/* form layout */
.report_form { display: grid; gap: var(--space_3); padding: var(--space_6) var(--space_6) var(--space_5); }

/* dialog heading */
.report_form h2 { margin: 0; font-family: var(--font_display); font-weight: 400; font-size: var(--text_xl); }

/* the short explanation under the heading */
.report_lead { margin: 0; color: var(--color_muted); font-size: var(--text_sm); line-height: var(--leading_body); }

/* the reasons group without the default fieldset frame */
.report_reasons { display: grid; gap: var(--space_2); margin: 0; padding: 0; border: 0; }

/* the group label */
.report_reasons legend { margin-bottom: var(--space_2); font-weight: 700; font-size: var(--text_sm); }

/* one reason row, a large target */
.report_reason { display: flex; gap: var(--space_3); align-items: flex-start; min-height: 44px; padding: var(--space_2) var(--space_3); border-radius: var(--radius_md); background: var(--color_panel_raised); cursor: pointer; }

/* hover lifts the row a little */
.report_reason:hover { background: var(--color_panel_high); }

/* the chosen reason gets an accent edge */
.report_reason:has(input:checked) { box-shadow: inset 0 0 0 2px var(--color_rose); }

/* radio size and accent */
.report_reason input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--color_rose); flex-shrink: 0; }

/* label and help stacked */
.report_reason_text { display: grid; gap: 2px; }

/* reason name */
.report_reason_label { font-weight: 700; font-size: var(--text_sm); }

/* reason explanation */
.report_reason_help { color: var(--color_muted); font-size: var(--text_xs); line-height: var(--leading_snug); }

/* note label */
.report_note_label { font-weight: 700; font-size: var(--text_sm); }

/* the optional word */
.report_optional { color: var(--color_muted); font-weight: 400; }

/* the note box */
.report_form textarea { width: 100%; resize: vertical; min-height: 80px; padding: var(--space_3); border: 0; border-radius: var(--radius_md); background: var(--color_panel_raised); color: var(--color_paper); font: inherit; }

/* note counter */
.report_count { margin: calc(var(--space_2) * -1) 0 0; text-align: right; color: var(--color_muted); font-size: var(--text_xs); }

/* inline error */
.report_error { margin: 0; color: var(--color_coral); font-size: var(--text_sm); }

/* buttons on the right */
.report_buttons { display: flex; justify-content: flex-end; gap: var(--space_2); }

/* ===== moderator queue ===== */

/* page width */
.mod_page { max-width: 880px; }

/* status tabs */
.mod_tabs { display: flex; flex-wrap: wrap; gap: var(--space_2); margin: var(--space_5) 0 var(--space_4); }

/* one tab */
.mod_tab { min-height: 44px; padding: 0 var(--space_4); border: 0; border-radius: var(--radius_pill); background: var(--color_panel_raised); color: var(--color_muted); font: inherit; font-weight: 700; cursor: pointer; }

/* the selected tab */
.mod_tab[aria-selected="true"] { background: var(--color_panel_high); color: var(--color_paper); box-shadow: inset 0 0 0 1px var(--tint_outline); }

/* list of cards */
.mod_list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space_4); }

/* one reported item */
.mod_card { display: grid; gap: var(--space_3); padding: var(--space_5); border-radius: var(--radius_lg); background: var(--color_panel); box-shadow: var(--shadow_sm); }

/* top line of a card */
.mod_card_head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space_2); }

/* comment or member label */
.mod_type { font-weight: 700; }

/* report count */
.mod_count { color: var(--color_muted); font-size: var(--text_sm); }

/* reason chips row */
.mod_reasons { display: flex; flex-wrap: wrap; gap: var(--space_1); }

/* one reason chip */
.mod_chip { padding: 2px var(--space_2); border-radius: var(--radius_pill); background: var(--tint_lavender); color: var(--color_paper); font-size: var(--text_xs); font-weight: 700; }

/* serious reasons use the error tint */
.mod_chip_harassment, .mod_chip_hate, .mod_chip_illegal, .mod_chip_sexual { background: var(--tint_coral); }

/* spoiler chips use the spoiler color */
.mod_chip_spoiler { background: var(--tint_honey); }

/* count inside a chip */
.mod_chip_count { opacity: 0.8; }

/* last report time pushed right */
.mod_when { margin-left: auto; color: var(--color_muted); font-size: var(--text_xs); }

/* the reported comment text */
.mod_quote { margin: 0; padding: var(--space_3) var(--space_4); border-radius: var(--radius_md); background: var(--color_panel_raised); white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--leading_body); }

/* small details lines */
.mod_meta, .mod_member { margin: 0; color: var(--color_muted); font-size: var(--text_sm); }

/* member names stand out */
.mod_member a { color: var(--color_paper); font-weight: 700; }

/* the at handle */
.mod_handle { color: var(--color_muted); }

/* role, history and status flags */
.mod_role, .mod_history, .mod_flag { display: inline-block; margin-left: var(--space_1); padding: 1px var(--space_2); border-radius: var(--radius_pill); background: var(--tint_paper); color: var(--color_paper); font-size: var(--text_xs); }

/* hidden and suspended flags use the warning tint */
.mod_flag { background: var(--tint_honey); margin: 0 var(--space_1) 0 0; }

/* text styled button inside a line */
.mod_link_btn { padding: 0; border: 0; background: none; color: var(--color_periwinkle); font: inherit; text-decoration: underline; cursor: pointer; }

/* reporter notes */
.mod_notes { margin: 0; padding-left: var(--space_5); display: grid; gap: var(--space_1); font-size: var(--text_sm); }

/* reason label inside a note */
.mod_note_reason { color: var(--color_muted); font-weight: 700; }

/* recent comments disclosure */
.mod_recent { font-size: var(--text_sm); }

/* the summary looks like a link and is easy to tap */
.mod_recent summary { min-height: 44px; display: flex; align-items: center; color: var(--color_periwinkle); cursor: pointer; }

/* recent comment list */
.mod_recent ul { margin: 0; padding-left: var(--space_5); display: grid; gap: var(--space_1); color: var(--color_muted); }

/* the action area */
.mod_actions { display: grid; gap: var(--space_3); padding-top: var(--space_3); border-top: 1px solid var(--tint_outline); }

/* note field label */
.mod_note_label { display: grid; gap: var(--space_1); font-size: var(--text_sm); color: var(--color_muted); }

/* note field */
.mod_note_input { min-height: 44px; padding: 0 var(--space_3); border: 0; border-radius: var(--radius_md); background: var(--color_panel_raised); color: var(--color_paper); font: inherit; }

/* the action buttons */
.mod_buttons { display: flex; flex-wrap: wrap; gap: var(--space_2); align-items: center; }

/* coral text for destructive choices */
.mod_danger { color: var(--color_coral); }

/* the suspend length picker and button */
.mod_suspend { display: inline-flex; gap: var(--space_2); align-items: center; }

/* suspend length select */
.mod_suspend select { min-height: 44px; padding: 0 var(--space_3); border: 0; border-radius: var(--radius_md); background: var(--color_panel_raised); color: var(--color_paper); font: inherit; font-size: var(--text_sm); font-weight: 700; }

/* the confirm box */
.mod_confirm { display: grid; gap: var(--space_2); padding: var(--space_4); border-radius: var(--radius_md); background: var(--color_panel_raised); box-shadow: inset 0 0 0 1px var(--tint_coral); }

/* hidden confirm stays hidden */
.mod_confirm[hidden] { display: none; }

/* admin log list */
.mod_log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space_2); }

/* one log line */
.mod_log_row { display: grid; gap: var(--space_1); padding: var(--space_3) var(--space_4); border-radius: var(--radius_md); background: var(--color_panel); }

/* log time */
.mod_log_when { color: var(--color_muted); font-size: var(--text_xs); }

/* log notes */
.mod_log_note { color: var(--color_muted); font-size: var(--text_sm); overflow-wrap: anywhere; }

/* ===== suspended banner ===== */

/* a calm warning strip under the nav */
.suspended_banner { position: relative; z-index: var(--layer_content); margin: var(--space_3) var(--gutter) 0; padding: var(--space_3) var(--space_4); border-radius: var(--radius_md); background: var(--tint_honey); color: var(--color_paper); font-size: var(--text_sm); line-height: var(--leading_body); }

/* link inside the banner */
.suspended_banner a { color: var(--color_paper); }

/* phones stack the queue head and action rows */
@media (max-width: 600px) {
  /* the time drops to its own line */
  .mod_when { margin-left: 0; width: 100%; }
  /* cards get a little less padding */
  .mod_card { padding: var(--space_4); }
  /* dialog padding shrinks */
  .report_form { padding: var(--space_5) var(--space_4) var(--space_4); }
}