/* =============================================================
 * Bethplanet — Comments 2026
 * Light, airy, brand-accented (#860000).
 * Scope: Module 5 (comments view + comment form).
 * ============================================================= */

:root {
  --bp-cmt-brand: #860000;
  --bp-cmt-brand-soft: #fdf2f2;
  --bp-cmt-brand-line: #f4d4d4;
  --bp-cmt-brand-hover: #a30000;

  --bp-cmt-bg: #ffffff;
  --bp-cmt-surface: #fafafa;
  --bp-cmt-surface-2: #f5f5f7;

  --bp-cmt-text: #161618;
  --bp-cmt-text-muted: #6b6b73;
  --bp-cmt-text-dim: #9a9aa3;

  --bp-cmt-line: #ececef;
  --bp-cmt-line-strong: #d8d8de;

  --bp-cmt-pos: #1f8a4c;
  --bp-cmt-pos-soft: #ecf8f0;
  --bp-cmt-neg: #c4302b;
  --bp-cmt-neg-soft: #fdecec;

  --bp-cmt-badge-admin-bg: #fdf2f2;
  --bp-cmt-badge-admin-fg: #860000;
  --bp-cmt-badge-mod-bg: #eef4ff;
  --bp-cmt-badge-mod-fg: #1d4ed8;
  --bp-cmt-badge-honor-bg: #fff4e5;
  --bp-cmt-badge-honor-fg: #b45309;
  --bp-cmt-badge-banned-bg: #f1f1f3;
  --bp-cmt-badge-banned-fg: #6b6b73;

  --bp-cmt-radius-lg: 20px;
  --bp-cmt-radius-md: 14px;
  --bp-cmt-radius-sm: 10px;
  --bp-cmt-radius-pill: 999px;

  --bp-cmt-shadow-card: 0 1px 2px rgba(20, 20, 30, 0.04);
  --bp-cmt-shadow-hover: 0 4px 16px rgba(20, 20, 30, 0.06);
  --bp-cmt-focus-ring: 0 0 0 3px rgba(134, 0, 0, 0.18);

  --bp-cmt-font: "Inter", "Manrope", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji",
    "Segoe UI Emoji";

  --bp-cmt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --bp-cmt-dur: 180ms;
}

/* =============================================================
 * Layout
 * ============================================================= */

.bp-cmt {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "avatar header"
    "body   body"
    "footer footer";
  column-gap: 14px;
  row-gap: 10px;

  margin: 12px 0;
  padding: 18px 20px;

  background: var(--bp-cmt-bg);
  border: 1px solid var(--bp-cmt-line);
  border-radius: var(--bp-cmt-radius-lg);
  box-shadow: var(--bp-cmt-shadow-card);

  font-family: var(--bp-cmt-font);
  color: var(--bp-cmt-text);
  font-size: 15px;
  line-height: 1.55;

  transition: border-color var(--bp-cmt-dur) var(--bp-cmt-ease),
    box-shadow var(--bp-cmt-dur) var(--bp-cmt-ease);
}

.bp-cmt:hover {
  border-color: var(--bp-cmt-line-strong);
  box-shadow: var(--bp-cmt-shadow-hover);
}

.bp-cmt:focus-within {
  border-color: var(--bp-cmt-brand);
  box-shadow: var(--bp-cmt-focus-ring);
}

.bp-cmt + .bp-cmt {
  margin-top: 10px;
}

/* =============================================================
 * Avatar
 * ============================================================= */

.bp-cmt__avatar {
  grid-area: avatar;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: var(--bp-cmt-radius-pill);
  overflow: hidden;
  background: var(--bp-cmt-surface);
  border: 1px solid var(--bp-cmt-line);
  flex-shrink: 0;
}

.bp-cmt__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =============================================================
 * Header (name, time, badges, vote panel)
 * ============================================================= */

.bp-cmt__header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
}

.bp-cmt__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.bp-cmt__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.bp-cmt__user {
  font-weight: 600;
  font-size: 15px;
  color: var(--bp-cmt-text);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--bp-cmt-dur) var(--bp-cmt-ease);
}

.bp-cmt__user:hover,
.bp-cmt__user:focus-visible {
  color: var(--bp-cmt-brand);
  text-decoration: none;
}

.bp-cmt__time {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  color: var(--bp-cmt-text-muted);
  text-decoration: none;
  transition: color var(--bp-cmt-dur) var(--bp-cmt-ease);
}

.bp-cmt__time:hover,
.bp-cmt__time:focus-visible {
  color: var(--bp-cmt-text);
  text-decoration: none;
}

/* =============================================================
 * Badges
 * ============================================================= */

.bp-cmt__badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.bp-cmt__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--bp-cmt-radius-pill);
  background: var(--bp-cmt-badge-banned-bg);
  color: var(--bp-cmt-badge-banned-fg);
  white-space: nowrap;
}

.bp-cmt__badge--admin {
  background: var(--bp-cmt-badge-admin-bg);
  color: var(--bp-cmt-badge-admin-fg);
}

.bp-cmt__badge--mod {
  background: var(--bp-cmt-badge-mod-bg);
  color: var(--bp-cmt-badge-mod-fg);
}

.bp-cmt__badge--honor {
  background: var(--bp-cmt-badge-honor-bg);
  color: var(--bp-cmt-badge-honor-fg);
}

.bp-cmt__badge--banned {
  background: var(--bp-cmt-badge-banned-bg);
  color: var(--bp-cmt-badge-banned-fg);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* =============================================================
 * Vote panel (header right side)
 * ============================================================= */

.bp-cmt__vote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px;
  background: var(--bp-cmt-surface);
  border: 1px solid var(--bp-cmt-line);
  border-radius: var(--bp-cmt-radius-pill);
  flex-shrink: 0;
}

.bp-cmt__vote-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: var(--bp-cmt-radius-pill);
  color: var(--bp-cmt-text-muted);
  cursor: pointer;
  transition: background var(--bp-cmt-dur) var(--bp-cmt-ease),
    color var(--bp-cmt-dur) var(--bp-cmt-ease),
    transform var(--bp-cmt-dur) var(--bp-cmt-ease);
}

.bp-cmt__vote-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}

.bp-cmt__vote-btn:hover {
  background: var(--bp-cmt-bg);
  color: var(--bp-cmt-text);
  transform: scale(1.06);
}

.bp-cmt__vote-btn:active {
  transform: scale(0.94);
}

.bp-cmt__vote-btn:focus-visible {
  outline: none;
  box-shadow: var(--bp-cmt-focus-ring);
}

.bp-cmt__vote-btn--pos:hover {
  background: var(--bp-cmt-pos-soft);
  color: var(--bp-cmt-pos);
}

.bp-cmt__vote-btn--neg:hover {
  background: var(--bp-cmt-neg-soft);
  color: var(--bp-cmt-neg);
}

.bp-cmt__vote-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.bp-cmt__vote-rate {
  min-width: 28px;
  padding: 0 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bp-cmt-text);
  user-select: none;
}

.bp-cmt__vote-rate.is-pos {
  color: var(--bp-cmt-pos);
}

.bp-cmt__vote-rate.is-neg {
  color: var(--bp-cmt-neg);
}

.bp-cmt__vote-rate.is-zero {
  color: var(--bp-cmt-text-dim);
}

/* =============================================================
 * Body
 * ============================================================= */

.bp-cmt__body {
  grid-area: body;
  margin-top: 2px;
}

.bp-cmt__text {
  color: var(--bp-cmt-text);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bp-cmt__text > *:first-child {
  margin-top: 0;
}

.bp-cmt__text > *:last-child {
  margin-bottom: 0;
}

.bp-cmt__text a {
  color: var(--bp-cmt-brand);
  text-decoration: none;
  border-bottom: 1px solid var(--bp-cmt-brand-line);
  transition: border-color var(--bp-cmt-dur) var(--bp-cmt-ease),
    color var(--bp-cmt-dur) var(--bp-cmt-ease);
}

.bp-cmt__text a:hover,
.bp-cmt__text a:focus-visible {
  color: var(--bp-cmt-brand-hover);
  border-bottom-color: var(--bp-cmt-brand);
}

.bp-cmt__text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--bp-cmt-radius-sm);
}

.bp-cmt__text blockquote,
.bp-cmt__text .bbquote {
  margin: 10px 0;
  padding: 10px 14px;
  background: var(--bp-cmt-surface);
  border-left: 3px solid var(--bp-cmt-brand);
  border-radius: 0 var(--bp-cmt-radius-sm) var(--bp-cmt-radius-sm) 0;
  color: var(--bp-cmt-text-muted);
  font-style: italic;
}

/* Reply / answer block */

.bp-cmt__reply {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bp-cmt-brand-soft);
  border: 1px solid var(--bp-cmt-brand-line);
  border-radius: var(--bp-cmt-radius-md);
}

.bp-cmt__reply-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bp-cmt-brand);
}

.bp-cmt__reply-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bp-cmt-brand);
}

.bp-cmt__reply-text {
  color: var(--bp-cmt-text);
  font-size: 14px;
  line-height: 1.55;
}

/* =============================================================
 * Footer (action buttons + moder panel)
 * ============================================================= */

.bp-cmt__footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--bp-cmt-line);
}

.bp-cmt__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  background: transparent;
  color: var(--bp-cmt-text-muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--bp-cmt-radius-pill);
  transition: background var(--bp-cmt-dur) var(--bp-cmt-ease),
    color var(--bp-cmt-dur) var(--bp-cmt-ease),
    border-color var(--bp-cmt-dur) var(--bp-cmt-ease);
}

.bp-cmt__action:hover,
.bp-cmt__action:focus-visible {
  color: var(--bp-cmt-brand);
  background: var(--bp-cmt-brand-soft);
  border-color: var(--bp-cmt-brand-line);
  text-decoration: none;
  outline: none;
}

.bp-cmt__action svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.bp-cmt__moder {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--bp-cmt-text-dim);
}

/* =============================================================
 * Comment form (Module 5 / template 2)
 * ============================================================= */

.bp-cform {
  margin: 18px 0;
  padding: 18px;
  background: var(--bp-cmt-bg);
  border: 1px solid var(--bp-cmt-line);
  border-radius: var(--bp-cmt-radius-lg);
  box-shadow: var(--bp-cmt-shadow-card);
  font-family: var(--bp-cmt-font);
  color: var(--bp-cmt-text);
  transition: border-color var(--bp-cmt-dur) var(--bp-cmt-ease),
    box-shadow var(--bp-cmt-dur) var(--bp-cmt-ease);
}

.bp-cform:focus-within {
  border-color: var(--bp-cmt-brand);
  box-shadow: var(--bp-cmt-focus-ring);
}

.bp-cform__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bp-cmt-text-muted);
}

.bp-cform__title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bp-cmt-brand);
}

.bp-cform__field {
  display: block;
  width: 100%;
  min-height: 110px;
  padding: 14px 16px;
  background: var(--bp-cmt-surface);
  border: 1px solid var(--bp-cmt-line);
  border-radius: var(--bp-cmt-radius-md);
  color: var(--bp-cmt-text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  resize: vertical;
  transition: background var(--bp-cmt-dur) var(--bp-cmt-ease),
    border-color var(--bp-cmt-dur) var(--bp-cmt-ease),
    box-shadow var(--bp-cmt-dur) var(--bp-cmt-ease);
  box-sizing: border-box;
}

.bp-cform__field::placeholder {
  color: var(--bp-cmt-text-dim);
}

.bp-cform__field:hover {
  background: var(--bp-cmt-bg);
}

.bp-cform__field:focus,
.bp-cform__field:focus-visible {
  outline: none;
  background: var(--bp-cmt-bg);
  border-color: var(--bp-cmt-brand);
  box-shadow: var(--bp-cmt-focus-ring);
}

.bp-cform__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.bp-cform__hint {
  flex: 1 1 auto;
  font-size: 12px;
  color: var(--bp-cmt-text-dim);
  line-height: 1.4;
}

.bp-cform__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 22px;
  background: var(--bp-cmt-brand);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: var(--bp-cmt-radius-pill);
  cursor: pointer;
  transition: background var(--bp-cmt-dur) var(--bp-cmt-ease),
    transform var(--bp-cmt-dur) var(--bp-cmt-ease),
    box-shadow var(--bp-cmt-dur) var(--bp-cmt-ease);
}

.bp-cform__submit:hover {
  background: var(--bp-cmt-brand-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(134, 0, 0, 0.22);
}

.bp-cform__submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(134, 0, 0, 0.18);
}

.bp-cform__submit:focus-visible {
  outline: none;
  box-shadow: var(--bp-cmt-focus-ring);
}

.bp-cform__error {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--bp-cmt-neg-soft);
  border: 1px solid #f5c2c0;
  border-radius: var(--bp-cmt-radius-md);
  color: var(--bp-cmt-neg);
  font-size: 13px;
  line-height: 1.45;
}

.bp-cform__error:empty {
  display: none;
}

.bp-cform__guest {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--bp-cmt-surface);
  border: 1px dashed var(--bp-cmt-line-strong);
  border-radius: var(--bp-cmt-radius-md);
  font-size: 13px;
  color: var(--bp-cmt-text-muted);
}

.bp-cform__guest-label {
  font-weight: 600;
  color: var(--bp-cmt-text);
}

.bp-cform__denied {
  margin: 0;
  padding: 14px 16px;
  background: var(--bp-cmt-surface);
  border: 1px dashed var(--bp-cmt-line-strong);
  border-radius: var(--bp-cmt-radius-md);
  color: var(--bp-cmt-text-muted);
  font-size: 14px;
  text-align: center;
}

/* =============================================================
 * Responsive
 * ============================================================= */

@media (max-width: 600px) {
  .bp-cmt {
    padding: 14px 14px;
    border-radius: var(--bp-cmt-radius-md);
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 10px;
  }

  .bp-cmt__avatar {
    width: 36px;
    height: 36px;
  }

  .bp-cmt__header {
    min-height: 36px;
    flex-wrap: wrap;
  }

  .bp-cmt__vote {
    margin-left: 0;
    margin-top: 6px;
    width: 100%;
    justify-content: space-between;
  }

  .bp-cform {
    padding: 14px;
    border-radius: var(--bp-cmt-radius-md);
  }

  .bp-cform__bar {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .bp-cform__submit {
    width: 100%;
  }
}

/* =============================================================
 * Reduced motion
 * ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .bp-cmt,
  .bp-cmt__user,
  .bp-cmt__time,
  .bp-cmt__vote-btn,
  .bp-cmt__action,
  .bp-cform,
  .bp-cform__field,
  .bp-cform__submit {
    transition: none;
  }

  .bp-cmt__vote-btn:hover,
  .bp-cmt__vote-btn:active,
  .bp-cform__submit:hover {
    transform: none;
  }
}