/* The moderator interface: the pages under /mod (Pages/Mod), the tools it adds to a
   thread, a post, a profile and the header, the report form, and the notes a banned or
   warned member sees.

   The /mod pages wear the owner interface's frame (the "manage" class and its m-* pieces
   in manage.css: forms, confirmations, cards, lines), so the two staff areas look alike.
   Only what is new is here.

   Mobile first: the rules outside a media query lay the page out for a phone; the
   min-width block at the end adds the desktop columns. Everything tapped is at least
   44 px tall, form fields use 16 px text (smaller makes an iPhone zoom the page), and
   nothing here moves or animates.

   Every color, font and corner radius is a custom property from site.css, so a
   community's theme can change them. A value with no variable yet gets one there first.
   Deleted and banned are never said by color alone: the word is always there too. */

/* The header link, with how many reported posts are waiting */
.mod-nav-link { display: inline-flex; align-items: center; gap: 8px; }
.mod-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: var(--radius-round); background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700;
}

/* A tag that says deleted, banned or in force */
.mod-tag-deleted { background: var(--danger); color: var(--on-danger); }
.forum-button.mod-danger-quiet { color: var(--danger); }

/* A member's ban, and a note from the moderators, at the top of every page they open */
.standing {
  padding: 14px 16px; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-small);
  background: var(--surface); box-shadow: var(--elev-1); display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere;
}
.standing-ban { border-left-color: var(--danger); background: var(--danger-soft); }
.standing-warning { border-left-color: var(--unread); }
.standing-title { margin: 0; font-size: 17px; font-weight: 700; }
.standing-text { margin: 0; }
.standing-message { white-space: pre-line; }
.standing form { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.standing .forum-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A moderator's tools for a thread: one "Moderate" button in the thread's bar, beside
   Watch and Reply, and the menu it opens (Pages/Mod/_ThreadMenu, js/menu.js). On a phone
   the button is its icon alone. Without JavaScript there is no button, and the tools sit
   in the bar as plain buttons. */
.mod-menu { position: relative; display: flex; }
.list-bar .mod-menu { margin-left: auto; }
.list-bar .mod-menu + .watch-form { margin-left: 0; }
.mod-menu-button { display: none; gap: 8px; padding: 0 12px; }
.mod-menu-button[aria-expanded="true"] { border-color: var(--ink); }
.mod-menu-icon, .mod-menu-caret { flex: none; }
.mod-menu-word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mod-menu-panel { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mod-menu-line { display: none; }
html.js .mod-menu-button { display: inline-flex; }
html.js .mod-menu-panel:not(.is-open) { display: none; }
html.js .mod-menu-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 10; min-width: 200px; max-width: calc(100vw - 32px);
  flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 6px;
  border: 1px solid var(--card-line); border-radius: var(--radius-small);
  background: var(--surface-raised); box-shadow: var(--elev-3);
}
html.js .mod-menu-panel .forum-button {
  justify-content: flex-start; width: 100%; min-height: 44px; padding: 0 12px;
  border-color: transparent; border-radius: var(--radius-chip); background: none; box-shadow: none;
  font-size: 15px; font-weight: 500; text-align: left;
}
html.js .mod-menu-panel .forum-button:focus-visible { outline-offset: -2px; }
html.js .mod-menu-line { display: block; height: 1px; margin: 6px 0; background: var(--line); }
@media (hover: hover) {
  html.js .mod-menu-panel .forum-button:hover { border-color: transparent; background: var(--band); box-shadow: none; transform: none; }
}

/* The note on a deleted thread, under its title, with Restore and Move */
.mod-bar {
  padding: 10px 12px; border: 1px solid var(--card-line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--elev-1); display: flex; flex-direction: column; gap: 10px;
}
.mod-bar-deleted { border-left: 4px solid var(--danger); background: var(--danger-soft); }
.mod-bar-note { margin: 0; overflow-wrap: anywhere; }
.mod-bar-buttons { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mod-bar-label { margin-right: 4px; color: var(--label); font-family: var(--font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

/* A deleted post, as a moderator sees it: marked across the top, its words dimmed */
.post.post-deleted { border-color: var(--danger); }
.post-deleted .post-author { background: var(--danger-soft); }
.post-deleted .post-body { opacity: 0.62; }
.post-deleted-note {
  margin: 12px 0 0; padding: 10px 12px; border-left: 4px solid var(--danger); border-radius: var(--radius-small);
  background: var(--danger-soft); color: var(--ink); font-size: 14px; overflow-wrap: anywhere;
}
.mod-post-form { margin: 0; display: flex; }
.thread-row.deleted { background: var(--danger-soft); }
.thread-row.deleted .thread-title { color: var(--muted); }

/* The report form a member fills in */
.mod-report-page .compose + .compose { margin-top: 0; }
.mod-quoted .post-body { margin-top: 8px; padding-left: 12px; border-left: 3px solid var(--line); }
.mod-choices { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; }
.mod-choices legend { padding: 0 0 8px; font-size: 17px; font-weight: 700; }
.mod-choice { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-small); cursor: pointer; transition: border-color var(--ease), background-color var(--ease); }
.mod-choice:hover { border-color: var(--control-line); background: var(--surface-alt); }
.mod-choice:has(input:checked) { border-color: var(--accent); background: var(--surface-alt); }
.mod-choice input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.mod-choice input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The reports queue. On a phone a reported post is a stack of lines. */
.mod-report { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 10px 16px 12px; border-top: 1px solid var(--line-soft); transition: background-color var(--ease); }
.mod-report:hover { background: var(--surface-alt); }
.mod-report:first-child { border-top: 0; }
.mod-report.open { box-shadow: inset 4px 0 0 var(--accent); }
.mod-report-main { position: relative; flex: 1 1 100%; min-width: 0; }
.mod-report-title { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.mod-report-title:hover { text-decoration: underline; }
.mod-report-why { font-size: 14px; overflow-wrap: anywhere; }
.mod-report-count { flex: 1 1 100%; font-size: 14px; }
.mod-report-when { flex: 1 1 100%; display: flex; gap: 5px; font-size: 13px; }

/* One reported post, a post about to be deleted */
.mod-case-body { padding: 14px 16px; }
.mod-case-body > .muted { margin: 0; }
.m-form .mod-case-body { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-small); }
.m-card-title .tag { margin-left: 8px; }
.m-card-foot { display: flex; flex-wrap: wrap; gap: 0 24px; }

/* The log, and a member's history */
.mod-log-link { margin-left: 6px; font-size: 14px; white-space: nowrap; }
.mod-log-reason { overflow-wrap: anywhere; }
.mod-inline-form { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.mod-banned, .mod-banned:hover { margin-left: 6px; border-color: var(--danger); background: var(--danger); color: var(--on-danger); }
.mod-ban-now { border-left: 4px solid var(--danger); }
.mod-lengths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mod-lengths legend { grid-column: 1 / -1; }
.mod-lengths .m-choice { align-items: center; }

/* The moderator's card on a member's profile */
.mod-profile { margin-top: 0; }
.mod-profile-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.mod-profile-facts { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; overflow-wrap: anywhere; }
.mod-profile .forum-button:focus-visible, .mod-bar .forum-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A moderator editing somebody else's post */
.mod-edit-note { margin-bottom: 14px; padding: 12px 14px; border-left: 4px solid var(--ink); border-radius: var(--radius-small); background: var(--surface-alt); }
.mod-edit-note .compose-label { margin-top: 10px; }

/* Tablet and up: the queue's columns side by side, more air. */
@media (min-width: 768px) {
  .mod-report { gap: 8px 20px; padding: 12px 20px; }
  .mod-report-main { flex: 1 1 340px; }
  .mod-report-count { flex: 0 0 190px; }
  .mod-report-when { flex: 0 0 150px; display: block; }
  .mod-report-when span, .mod-report-when time { display: block; }
  .mod-case-body { padding: 16px 20px; }
  .mod-profile-body { padding: 16px 20px 20px; }
  .mod-bar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 16px; }
  .mod-menu-word { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
  .mod-lengths { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}