/* ------------------------------------------------------------------
   Moderation UI: tabs, comment cards, actions, reply, undo, empty state.
   Shared by the public blog chrome (blog.css depends on this file) and by
   the cabinet's Comments section. One definition: the cabinet supplies the
   --spk-* / --glass-* tokens in its own scope, the blog supplies them from
   .speaker-page.
   ------------------------------------------------------------------ */

/* ── Queue shell ─────────────────────────────────────────────── */

.mmp-queue {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  inline-size: min(100%, var(--sb-page-max, 68.75rem));
  margin-inline: auto;
}

.mmp-queue__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.mmp-queue__eyebrow {
  margin: 0 0 0.4rem;
  color: var(--spk-ink-ice);
  font-family: var(--text-font-family);
  font-size: var(--sb-eyebrow-size, 0.72rem);
  font-weight: 700;
  letter-spacing: var(--sb-eyebrow-tracking, 0.22em);
  text-transform: uppercase;
}

.mmp-queue__title {
  margin: 0;
  font-family: var(--heading-font-family);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: var(--spk-ink);
}

.mmp-queue__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Depth 1 control glass. */
.mmp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--sb-radius-pill);
  background: var(--glass-fill);
  box-shadow: var(--spk-shadow-btn);
  color: var(--spk-ink-body);
  font-family: var(--text-font-family);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--sb-t-base) var(--sb-ease),
              border-color var(--sb-t-base) var(--sb-ease),
              transform var(--sb-t-base) var(--sb-ease);
}

.mmp-pill:hover,
.mmp-pill:focus-visible {
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-hi);
  transform: translateY(-1px);
}

.mmp-queue__frozen {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--sb-radius-reply);
  background: var(--glass-bg-soft);
  color: var(--spk-ink-body);
  font-family: var(--text-font-family);
  font-size: 0.88rem;
}

/* ── Filter tabs ─────────────────────────────────────────────── */

.mmp-queue__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.mmp-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.mmp-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--sb-radius-pill);
  background: var(--glass-fill);
  color: var(--spk-ink-body);
  font-family: var(--text-font-family);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--sb-t-base) var(--sb-ease),
              border-color var(--sb-t-base) var(--sb-ease);
}

.mmp-tab:hover,
.mmp-tab:focus-visible { background: var(--glass-fill-hover); }

/* One accent at a time: the active tab is the only accent-tinted thing in
   this row, which is how the system marks "you are here". */
.mmp-tab.is-active {
  background: var(--spk-accent-tint);
  border-color: var(--spk-accent-edge);
  box-shadow: var(--spk-accent-glow-ring);
  color: var(--spk-ice);
}

.mmp-tab__count { opacity: 0.7; font-variant-numeric: tabular-nums; }

.mmp-queue__sort {
  margin: 0;
  color: var(--spk-ink-muted);
  font-family: var(--text-font-family);
  font-size: 0.78rem;
}

/* ── Comment card — depth 3 ──────────────────────────────────── */

.mmp-queue__list { margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 1rem; }

.mmp-card {
  display: flex;
  flex-direction: column;
  gap: var(--sb-queue-card-gap);
  padding: var(--sb-queue-card-pad);
  border: 1px solid var(--glass-border);
  border-radius: var(--sb-radius-card);
  /* Depth 3, not depth 1: comment text sits over the page's own text. */
  background: var(--spk-bubble-bg);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--spk-shadow-card);
}

.mmp-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  font-family: var(--text-font-family);
}

.mmp-card__author { color: var(--spk-ink); font-size: 1rem; font-weight: 700; }
.mmp-card__email,
.mmp-card__date  { color: var(--spk-ink-muted); font-size: 0.8rem; }

.mmp-card__replypill {
  padding: 2px 9px;
  border: 1px solid var(--glass-hairline);
  border-radius: var(--sb-radius-pill);
  color: var(--spk-ink-muted);
  font-size: 0.72rem;
}

.mmp-card__post {
  margin-inline-start: auto;
  color: var(--spk-ice);
  font-size: 0.82rem;
  text-decoration: none;
}

.mmp-card__post:hover { text-decoration: underline; }

.mmp-card__body {
  margin: 0;
  max-inline-size: 70ch;
  color: var(--spk-ink-body);
  font-family: var(--text-font-family);
  font-size: 0.95rem;
  line-height: 1.72;
}

.mmp-card__body p { margin: 0 0 0.75rem; }
.mmp-card__body p:last-child { margin-block-end: 0; }

.mmp-card__trail {
  margin: 0;
  color: var(--spk-ink-muted);
  font-family: var(--text-font-family);
  font-size: 0.76rem;
}

/* ── Actions ───────────────────────────────────────────────────
   Named .mmp-act, not .mmp-btn. ACSS claims [class*="btn--"] with an
   attribute substring selector, which swallows any BEM modifier containing
   "btn--" -- so .mmp-btn--accent lost its background to --btn-background at
   equal specificity, purely because automatic.css loads later. That
   namespace is ACSS's; this one is ours. */

.mmp-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.mmp-card__spacer  { flex: 1 1 auto; }

.mmp-act {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--sb-radius-pill);
  background: var(--glass-fill);
  color: var(--spk-ink-body);
  font-family: var(--text-font-family);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--sb-t-base) var(--sb-ease),
              border-color var(--sb-t-base) var(--sb-ease);
}

.mmp-act:hover,
.mmp-act:focus-visible {
  background: var(--glass-fill-hover);
  border-color: var(--glass-border-hi);
}

/* Approve is the only accent pill in a row. */
.mmp-act--accent {
  background: var(--spk-accent-tint);
  border-color: var(--spk-accent-edge);
  color: var(--spk-ice);
}

.mmp-act--accent:hover,
.mmp-act--accent:focus-visible {
  background: var(--spk-accent-tint-hover);
  border-color: var(--spk-accent-edge-hover);
  box-shadow: var(--spk-accent-glow-ring);
}

/* Spam and Trash recede. There is no red in this palette and none is
   being introduced — weight carries the warning, not hue. */
.mmp-act--quiet {
  background: none;
  border-color: var(--glass-hairline);
  color: var(--spk-ink-muted);
}

.mmp-act--quiet:hover,
.mmp-act--quiet:focus-visible {
  background: var(--glass-fill);
  border-color: var(--glass-border);
  color: var(--spk-ink-body);
}

.mmp-act--strong { border-color: var(--glass-border-hi); color: var(--spk-ink); }

.mmp-cta {
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: var(--sb-radius-pill);
  background: var(--spk-grad-cta);
  box-shadow: var(--spk-shadow-cta);
  color: var(--spk-cta-ink);
  font-family: var(--text-font-family);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow var(--sb-t-base) var(--sb-ease),
              transform var(--sb-t-base) var(--sb-ease);
}

.mmp-cta:hover,
.mmp-cta:focus-visible { box-shadow: var(--spk-shadow-cta-hi); transform: translateY(-2px); }

/* ── Confirm and reply ───────────────────────────────────────── */

/* An explicit display beats the hidden attribute's UA rule, so every panel
   that starts hidden has to say so itself. Without this each card renders
   with its trash confirmation and reply composer already open. */
.mmp-confirm[hidden],
.mmp-reply[hidden] { display: none; }

.mmp-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--glass-hairline);
}

.mmp-confirm__q { margin: 0; color: var(--spk-ink); font-family: var(--text-font-family);
  font-size: 0.9rem; font-weight: 700; }
.mmp-confirm__note,
.mmp-reply__note { flex-basis: 100%; margin: 0; color: var(--spk-ink-muted);
  font-family: var(--text-font-family); font-size: 0.76rem; }

.mmp-reply {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--spk-accent-edge);
  border-radius: var(--sb-radius-reply);
  background: var(--spk-accent-wash, color-mix(in oklab, var(--sb-primary) 8%, transparent));
}

.mmp-reply__as { margin: 0; display: flex; align-items: center; gap: 0.5rem;
  color: var(--spk-ink-body); font-family: var(--text-font-family); font-size: 0.82rem; }

.mmp-speakerpill {
  padding: 2px 10px;
  border: 1px solid var(--spk-accent-edge);
  border-radius: var(--sb-radius-pill);
  background: var(--spk-accent-tint);
  color: var(--spk-ice);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mmp-reply__text {
  inline-size: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--spk-well-bg);
  color: var(--spk-ink-body);
  font-family: var(--text-font-family);
  font-size: 0.92rem;
  line-height: 1.6;
  resize: vertical;
}

.mmp-reply__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

/* ── Undo strip ──────────────────────────────────────────────── */

.mmp-queue__undo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--spk-accent-edge);
  border-radius: var(--sb-radius-reply);
  background: var(--spk-accent-tint);
  color: var(--spk-ink-body);
  font-family: var(--text-font-family);
  font-size: 0.85rem;
}

.mmp-queue__undo[hidden] { display: none; }

.mmp-queue__undo-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--spk-ice);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.mmp-queue__undo-count { margin-inline-start: auto; color: var(--spk-ink-muted);
  font-variant-numeric: tabular-nums; }

/* ── Empty state (1b) ────────────────────────────────────────── */

.mmp-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.75rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--sb-radius-card);
  background: var(--glass-bg-soft);
  box-shadow: var(--spk-shadow-card);
}

.mmp-empty__title { margin: 0; color: var(--spk-ink); font-family: var(--text-font-family);
  font-size: 1.05rem; font-weight: 700; }
.mmp-empty__body { margin: 0; color: var(--spk-ink-body); font-family: var(--text-font-family);
  font-size: 0.9rem; }