/* Forum-specific design tokens and components (kept separate to avoid unused CSS on non-forum pages).
   Sizes, line-heights, and spacing tier into the main scales defined in
   theme.css (--font-size-*, --leading-*, --space-*). The two clamps below
   are forum-only and stay inline because they smoothly interpolate between
   scale rungs; the static sizes are routed through the main tokens so a
   future scale change updates the forum in lockstep. */
:root {
  --forum-space-1: var(--space-1);
  --forum-space-2: var(--space-2);
  --forum-space-3: var(--space-3);
  --forum-space-4: var(--space-4);
  --forum-space-5: var(--space-5);
  --forum-space-6: var(--space-6);
  --forum-title-size: clamp(var(--font-size-lg), 0.5vw + 1rem, var(--font-size-2xl));
  --forum-subtitle-size: clamp(var(--font-size-base), 0.25vw + 0.95rem, var(--font-size-lg));
  --forum-meta-size: var(--font-size-xs);
  --forum-body-size: clamp(var(--font-size-base), 0.2vw + 0.98rem, var(--font-size-md));
  --forum-title-line-height: var(--leading-snug);
  --forum-meta-line-height: 1.35;
  --forum-body-line-height: var(--leading-relaxed);
}

/* Forum typography + spacing scales */
.forum-title {
  font-size: var(--forum-title-size);
  line-height: var(--forum-title-line-height);
  font-weight: 700;
}

.forum-subtitle {
  font-size: var(--forum-subtitle-size);
  line-height: 1.35;
  font-weight: 600;
}

.forum-meta {
  font-size: var(--forum-meta-size);
  line-height: var(--forum-meta-line-height);
  color: var(--app-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
}

.forum-meta-item {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.forum-meta-item + .forum-meta-item::before {
  content: "·";
  margin-right: 0.35rem;
  opacity: 0.6;
}

.forum-body {
  font-size: var(--forum-body-size);
  line-height: var(--forum-body-line-height);
}

.forum-stack > * + * {
  margin-top: var(--forum-space-3);
}

.forum-stack-sm > * + * {
  margin-top: var(--forum-space-2);
}

.forum-section-gap {
  margin-bottom: var(--forum-space-5);
}

.forum-thread-list-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94));
}

.forum-thread-list {
  display: grid;
  gap: var(--forum-space-3);
}

.forum-thread-card {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(53, 65, 79, 0.14);
  border-radius: 0.9rem;
  padding: var(--forum-space-3);
  background: #fff;
  box-shadow: 0 0.35rem 1rem rgba(63, 64, 58, 0.08);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.forum-thread-card:hover,
.forum-thread-card:focus-visible {
  border-color: rgba(53, 95, 140, 0.45);
  box-shadow: 0 0.85rem 1.7rem rgba(53, 95, 140, 0.16);
  transform: translateY(-1px);
}

.forum-thread-card-main {
  min-width: 0;
  flex: 1 1 auto;
}

.forum-thread-score {
  align-self: center;
  min-width: 2.65rem;
  flex-shrink: 0;
}

.forum-thread-detail {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 255, 0.96));
  border-color: rgba(53, 95, 140, 0.2);
  animation: forum-detail-enter 0.2s ease-out;
}

.forum-thread-detail .forum-body {
  white-space: pre-wrap;
}

.forum-reply-list {
  display: grid;
  gap: var(--forum-space-2);
}

.forum-reply-card {
  border: 1px solid rgba(53, 65, 79, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.35rem 1rem rgba(63, 64, 58, 0.06);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.forum-reply-card:hover,
.forum-reply-card:focus-within {
  border-color: rgba(53, 95, 140, 0.35);
  box-shadow: 0 0.7rem 1.25rem rgba(53, 95, 140, 0.12);
  transform: translateY(-1px);
}

.forum-composer-panel .form-control,
.forum-composer-panel .form-select {
  border-color: rgba(53, 65, 79, 0.2);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.forum-empty-state {
  padding: var(--forum-space-4);
  border: 1px dashed rgba(53, 95, 140, 0.35);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.95), rgba(241, 247, 255, 0.9));
  text-align: center;
  animation: forum-fade-in 0.2s ease-out;
}

.forum-char-count {
  font-variant-numeric: tabular-nums;
  color: var(--app-muted, #64748b);
  margin-top: 0.25rem;
}

.forum-char-count--near {
  color: #b45309;
}

.forum-char-count--at {
  color: #b91c1c;
  font-weight: 600;
}

:root[data-bs-theme="dark"] .forum-char-count--near {
  color: #fbbf24;
}

:root[data-bs-theme="dark"] .forum-char-count--at {
  color: #fca5a5;
}

.forum-empty-title {
  font-size: var(--forum-subtitle-size);
  font-weight: 700;
  color: var(--app-ink);
}

.forum-empty-copy {
  font-size: var(--forum-meta-size);
  color: var(--app-muted);
}

.forum-skeleton-card {
  pointer-events: none;
}

.forum-skeleton {
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(228, 235, 243, 0.86) 0%,
    rgba(245, 249, 255, 1) 45%,
    rgba(228, 235, 243, 0.86) 100%
  );
  background-size: 220% 100%;
  animation: forum-skeleton-shimmer 1.1s ease-in-out infinite;
}

.forum-skeleton-line {
  height: 0.72rem;
  margin-bottom: 0.65rem;
}

.forum-skeleton-line--title {
  width: 58%;
  height: 0.95rem;
}

.forum-skeleton-line--meta {
  width: 82%;
}

.forum-skeleton-line--body {
  width: 95%;
  margin-bottom: 0;
}

@keyframes forum-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

@keyframes forum-fade-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes forum-detail-enter {
  from {
    opacity: 0.8;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Dark mode forum styling. Driven by [data-bs-theme="dark"] (set by the
   site theme toggle) so it matches theme.css instead of only following the
   OS-level prefers-color-scheme media query. */
:root[data-bs-theme="dark"] .forum-thread-list-panel {
  background: linear-gradient(180deg, rgba(23, 31, 47, 0.92), rgba(14, 22, 37, 0.9));
  border-color: rgba(148, 163, 184, 0.2);
}

:root[data-bs-theme="dark"] .forum-thread-card {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.88);
  box-shadow: 0 0.45rem 1rem rgba(2, 6, 23, 0.45);
  color: rgba(241, 245, 249, 0.95);
}

:root[data-bs-theme="dark"] .forum-thread-card:hover,
:root[data-bs-theme="dark"] .forum-thread-card:focus-visible {
  border-color: rgba(125, 211, 252, 0.52);
  box-shadow: 0 0.9rem 1.8rem rgba(56, 189, 248, 0.18);
}

:root[data-bs-theme="dark"] .forum-thread-detail {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(17, 34, 56, 0.93));
  border-color: rgba(125, 211, 252, 0.28);
  color: rgba(241, 245, 249, 0.95);
}

:root[data-bs-theme="dark"] .forum-reply-card {
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(17, 25, 40, 0.9);
  box-shadow: 0 0.45rem 1rem rgba(2, 6, 23, 0.35);
  color: rgba(241, 245, 249, 0.95);
}

:root[data-bs-theme="dark"] .forum-reply-card:hover,
:root[data-bs-theme="dark"] .forum-reply-card:focus-within {
  border-color: rgba(125, 211, 252, 0.45);
  box-shadow: 0 0.85rem 1.6rem rgba(56, 189, 248, 0.16);
}

:root[data-bs-theme="dark"] .forum-composer-panel .form-control,
:root[data-bs-theme="dark"] .forum-composer-panel .form-select {
  border-color: rgba(148, 163, 184, 0.34);
  background: rgba(15, 23, 42, 0.82);
  color: rgba(241, 245, 249, 0.95);
}

:root[data-bs-theme="dark"] .forum-composer-panel .form-control:focus,
:root[data-bs-theme="dark"] .forum-composer-panel .form-select:focus {
  border-color: rgba(125, 211, 252, 0.58);
  box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.2);
}

:root[data-bs-theme="dark"] .forum-empty-state {
  border-color: rgba(125, 211, 252, 0.35);
  background: linear-gradient(180deg, rgba(17, 25, 40, 0.9), rgba(17, 34, 56, 0.88));
}

:root[data-bs-theme="dark"] .forum-empty-title {
  color: rgba(241, 245, 249, 0.95);
}

:root[data-bs-theme="dark"] .forum-empty-copy,
:root[data-bs-theme="dark"] .forum-meta,
:root[data-bs-theme="dark"] .forum-thread-card .text-muted,
:root[data-bs-theme="dark"] .forum-reply-card .text-muted,
:root[data-bs-theme="dark"] .forum-thread-detail .text-muted {
  color: rgba(191, 209, 232, 0.9) !important;
}

:root[data-bs-theme="dark"] .forum-thread-card .badge.text-bg-light,
:root[data-bs-theme="dark"] .forum-thread-detail .badge.text-bg-light,
:root[data-bs-theme="dark"] .forum-reply-card .badge.text-bg-light,
:root[data-bs-theme="dark"] .forum-profile-popover .badge.text-bg-light {
  background-color: rgba(56, 189, 248, 0.18) !important;
  border-color: rgba(125, 211, 252, 0.45) !important;
  color: rgba(224, 242, 254, 0.95) !important;
}

:root[data-bs-theme="dark"] .forum-skeleton {
  background: linear-gradient(
    90deg,
    rgba(51, 65, 85, 0.88) 0%,
    rgba(71, 85, 105, 0.94) 45%,
    rgba(51, 65, 85, 0.88) 100%
  );
}

:root[data-bs-theme="dark"] #forumFilterControls {
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.82);
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  .forum-thread-card,
  .forum-reply-card,
  .forum-composer-panel .form-control,
  .forum-composer-panel .form-select {
    transition: none;
  }

  .forum-empty-state,
  .forum-thread-detail,
  .forum-skeleton {
    animation: none;
  }
}

@media (max-width: 767.98px) {
  #forumFilterControls {
    border: 1px solid rgba(53, 65, 79, 0.14);
    border-radius: var(--radius-lg);
    padding: var(--forum-space-2);
    background: rgba(255, 255, 255, 0.9);
  }

  .forum-composer-actions {
    position: sticky;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.25rem);
    z-index: 15;
    padding-top: var(--forum-space-2);
    padding-bottom: var(--forum-space-2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95) 40%);
  }

  :root[data-bs-theme="dark"] .forum-composer-actions {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.95) 40%);
  }

  .forum-composer-actions .btn {
    width: 100%;
  }
}

/* Earned badge chips: themed by category with tier accents on multi-tier badges. */
.forum-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.25rem;
  padding: 0.15rem 0.55rem 0.15rem 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 999px;
  border: 1px solid var(--forum-badge-border, rgba(0, 0, 0, 0.12));
  background: var(--forum-badge-bg, #f1f5f9);
  color: var(--forum-badge-fg, #1f2937);
  white-space: nowrap;
  vertical-align: middle;
}

.forum-badge-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.forum-badge--mod        { --forum-badge-bg: #ede9fe; --forum-badge-fg: #4c1d95; --forum-badge-border: rgba(76, 29, 149, 0.3); }
.forum-badge--premium    { --forum-badge-bg: #fef3c7; --forum-badge-fg: #92400e; --forum-badge-border: rgba(146, 64, 14, 0.3); }
.forum-badge--contributor{ --forum-badge-bg: #dcfce7; --forum-badge-fg: #166534; --forum-badge-border: rgba(22, 101, 52, 0.3); }
.forum-badge--reputation { --forum-badge-bg: #cffafe; --forum-badge-fg: #155e75; --forum-badge-border: rgba(21, 94, 117, 0.3); }
.forum-badge--pioneer    { --forum-badge-bg: #ffedd5; --forum-badge-fg: #9a3412; --forum-badge-border: rgba(154, 52, 18, 0.3); }
.forum-badge--seeker     { --forum-badge-bg: #e0e7ff; --forum-badge-fg: #3730a3; --forum-badge-border: rgba(55, 48, 163, 0.3); }
.forum-badge--baseroot   { --forum-badge-bg: #dcfce7; --forum-badge-fg: #14532d; --forum-badge-border: rgba(20, 83, 45, 0.3); }
.forum-badge--gematrist  { --forum-badge-bg: #fce7f3; --forum-badge-fg: #9d174d; --forum-badge-border: rgba(157, 23, 77, 0.3); }
.forum-badge--learning   { --forum-badge-bg: #fef9c3; --forum-badge-fg: #854d0e; --forum-badge-border: rgba(133, 77, 14, 0.3); }

/* Tier accents: bronze → silver → gold → platinum. The thicker border
   and subtle shadow make higher tiers feel more prestigious. */
.forum-badge--tier-1 { box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.35); }
.forum-badge--tier-2 { box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.55); }
.forum-badge--tier-3 { box-shadow: inset 0 0 0 1px rgba(202, 138, 4, 0.6); }
.forum-badge--tier-4 { box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.8), 0 0 0 1px rgba(56, 189, 248, 0.25); }

:root[data-bs-theme="dark"] .forum-badge--mod        { --forum-badge-bg: rgba(167, 139, 250, 0.18); --forum-badge-fg: #ddd6fe; --forum-badge-border: rgba(167, 139, 250, 0.45); }
:root[data-bs-theme="dark"] .forum-badge--premium    { --forum-badge-bg: rgba(251, 191, 36, 0.18); --forum-badge-fg: #fde68a; --forum-badge-border: rgba(251, 191, 36, 0.45); }
:root[data-bs-theme="dark"] .forum-badge--contributor{ --forum-badge-bg: rgba(74, 222, 128, 0.18); --forum-badge-fg: #bbf7d0; --forum-badge-border: rgba(74, 222, 128, 0.45); }
:root[data-bs-theme="dark"] .forum-badge--reputation { --forum-badge-bg: rgba(34, 211, 238, 0.18); --forum-badge-fg: #a5f3fc; --forum-badge-border: rgba(34, 211, 238, 0.45); }
:root[data-bs-theme="dark"] .forum-badge--pioneer    { --forum-badge-bg: rgba(251, 146, 60, 0.18); --forum-badge-fg: #fed7aa; --forum-badge-border: rgba(251, 146, 60, 0.45); }
:root[data-bs-theme="dark"] .forum-badge--seeker     { --forum-badge-bg: rgba(129, 140, 248, 0.18); --forum-badge-fg: #c7d2fe; --forum-badge-border: rgba(129, 140, 248, 0.45); }
:root[data-bs-theme="dark"] .forum-badge--baseroot   { --forum-badge-bg: rgba(34, 197, 94, 0.18); --forum-badge-fg: #bbf7d0; --forum-badge-border: rgba(34, 197, 94, 0.45); }
:root[data-bs-theme="dark"] .forum-badge--gematrist  { --forum-badge-bg: rgba(244, 114, 182, 0.18); --forum-badge-fg: #fbcfe8; --forum-badge-border: rgba(244, 114, 182, 0.45); }
:root[data-bs-theme="dark"] .forum-badge--learning   { --forum-badge-bg: rgba(250, 204, 21, 0.18); --forum-badge-fg: #fef08a; --forum-badge-border: rgba(250, 204, 21, 0.45); }

/* The Beginner Path Graduate badge gets a primary anchor treatment when
   linked to its public /b/USERNAME page: bolder weight, gold gradient,
   and slightly larger padding so the achievement reads first in the row. */
a.forum-badge--primary {
  text-decoration: none;
  padding: 0.2rem 0.65rem 0.2rem 0.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 60%, #b45309 100%);
  color: #1d1306;
  border-color: #92400e;
  box-shadow: 0 0.25rem 0.6rem -0.25rem rgba(146, 64, 14, 0.5);
}

a.forum-badge--primary:hover,
a.forum-badge--primary:focus-visible {
  color: #1d1306;
  filter: brightness(1.05);
  text-decoration: none;
}

:root[data-bs-theme="dark"] a.forum-badge--primary {
  background: linear-gradient(135deg, #fde68a 0%, #d97706 100%);
  color: #1d1306;
  border-color: #fbbf24;
}

/* Moderator toolbar that sits beside "Report thread" / "Report reply" in
   the thread detail header. The "Mod" badge labels the cluster so admins
   reading the page understand the affordances are theirs (and so the
   visual rhythm telegraphs to non-mods that nothing is missing for them).
   Toggled via the `hidden` attribute *and* the `.d-none` class for
   maximum compatibility with the existing Bootstrap pattern. */
.forum-mod-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: 0.5rem;
  margin-left: 0.25rem;
  border-left: 1px solid rgba(var(--color-text-rgb, 53, 65, 79), 0.18);
}
.forum-mod-toolbar[hidden] { display: none; }
.forum-mod-toolbar__label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
:root[data-bs-theme="dark"] .forum-mod-toolbar {
  border-left-color: rgba(230, 235, 242, 0.22);
}

/* Inline "Mod" label that fronts the per-reply Delete button so admins
   recognize at a glance that the destructive action is gated to them. */
.forum-mod-inline-label {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}