/* ============================================================================
   topic-impeccable.css — Topic page polish (modern SPA, every theme & forum)
   ============================================================================
   Additive layer over 1-base.css / 2-layout.css / 3-components.css.

   Design contract:
   - Token-driven only: --bg-*, --text-*, --accent-*, --border-*, --shadow-*
   - Theme-safe: light (default), dark, grey, custom, deep-ether, light-ether
   - Forum-safe: bordel / poirier / beta — no realm-coupled styles
   - No glassmorphism (anti-pattern), no side-stripes, no gradient text
   - ease-out-expo emergence, never bounce/elastic
   - Mobile tap targets >= 38px, prefers-reduced-motion respected
   ============================================================================ */

:root {
  --topic-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --topic-ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --topic-content-max: 72ch;
}

/* ============================================================
   1. TOPIC HEADER — Refined sticky chrome
   ============================================================ */

.topic-layout .topic-header {
  transition:
    padding 220ms var(--topic-ease-quart),
    box-shadow 280ms var(--topic-ease-expo);
}

.topic-layout .topic-header.is-compact {
  box-shadow:
    0 1px 0 0 color-mix(in srgb, var(--text-main) 8%, transparent),
    0 10px 24px -18px color-mix(in srgb, var(--text-main) 22%, transparent);
}

/* Title typography polish (without overriding user-set --topic-title-color) */
.topic-layout .topic-title {
  font-feature-settings: "kern" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.012em;
}

@media (min-width: 769px) {
  .topic-layout .topic-title {
    font-size: clamp(18px, 1rem + 0.32vw, 22px);
    letter-spacing: -0.018em;
    line-height: 1.2;
  }
}

/* Topic-expires indicator — pill chip, theme-aware */
.topic-expires-indicator {
  background: color-mix(in srgb, var(--accent-warning, #f59e0b) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-warning, #f59e0b) 18%, transparent);
  border-radius: 999px;
  padding: 2px 10px !important;
  margin-top: 4px !important;
  width: -moz-fit-content;
  width: fit-content;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}

[data-theme="dark"] .topic-expires-indicator,
[data-theme="grey"] .topic-expires-indicator,
[data-theme="custom"] .topic-expires-indicator,
[data-theme="deep-ether"] .topic-expires-indicator {
  background: color-mix(in srgb, var(--accent-warning, #fbbf24) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent-warning, #fbbf24) 26%, transparent);
}

/* ============================================================
   2. ADMIN BUTTONS — Comfortable taps + refined motion
   ============================================================ */

.topic-admin-actions .btn-admin {
  transition:
    background 200ms var(--topic-ease-quart),
    border-color 200ms var(--topic-ease-quart),
    box-shadow 240ms var(--topic-ease-expo),
    transform 200ms var(--topic-ease-expo),
    color 180ms ease;
}

.topic-admin-actions .btn-admin:hover {
  box-shadow: 0 4px 12px color-mix(in srgb, var(--text-main) 14%, transparent);
}

.topic-admin-actions .btn-admin:active {
  transform: translateY(0) scale(0.94);
}

@media (max-width: 768px) {
  .topic-admin-actions .btn-admin {
    width: 38px;
    height: 38px;
    font-size: 15px;
    border-radius: var(--radius-md, 10px);
  }
  .topic-back-btn {
    border-radius: var(--radius-md, 10px);
  }
  .topic-back-btn:active {
    background: color-mix(in srgb, var(--text-main) 6%, transparent);
  }
}

/* ============================================================
   3. POSTS — Density rhythm + entrance motion
   ============================================================ */

@keyframes topic-post-enter {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .topic-container .post:not(.no-anim):not(.consecutive-post):not(.skeleton-post):not([data-rendered="recycle"]) {
    animation: topic-post-enter 360ms var(--topic-ease-expo) both;
  }
}

/* Avatar — subtle accent ring on hover (desktop hover-capable only) */
@media (hover: hover) and (min-width: 769px) {
  .post .author-avatar-small {
    transition:
      box-shadow 240ms var(--topic-ease-expo),
      transform 220ms var(--topic-ease-expo) !important;
  }
  .post:hover .author-avatar-small {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary, #a8c545) 40%, transparent),
                0 4px 14px color-mix(in srgb, var(--accent-primary, #a8c545) 22%, transparent);
  }
}

/* Post content — breathable line-height, capped reading column on wide screens */
.post .post-content {
  line-height: 1.62;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@media (min-width: 1280px) {
  .post .post-content > p,
  .post .post-content > ul,
  .post .post-content > ol,
  .post .post-content > blockquote {
    max-width: var(--topic-content-max);
  }
}

/* Date — tabular nums always (some places miss it) */
.post .post-date,
.post .post-edited {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Username — consistent feature-settings (kerning helps on long names) */
.post .author-username {
  font-feature-settings: "kern" 1, "calt" 1;
}

/* ============================================================
   4. REPLY-CONTEXT — Theme-aware hairline
   ============================================================ */

/* The base rule uses rgba(255,255,255,0.06) which is invisible on light themes.
   Token-driven overrides per theme. */
.post .post-reply-context {
  background: color-mix(in srgb, var(--text-main) 4%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent) !important;
  transition: background 180ms var(--topic-ease-quart);
}

[data-theme="dark"] .post .post-reply-context,
[data-theme="grey"] .post .post-reply-context,
[data-theme="custom"] .post .post-reply-context,
[data-theme="deep-ether"] .post .post-reply-context {
  background: color-mix(in srgb, var(--accent-primary, #a8c545) 6%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--accent-primary, #a8c545) 14%, transparent) !important;
}

.post .post-reply-context:hover {
  background: color-mix(in srgb, var(--accent-primary, #a8c545) 9%, transparent) !important;
}

/* ============================================================
   5. CONSECUTIVE POSTS — Cleaner visual chain
   ============================================================ */

/* Subtle inner separator between merged consecutive posts.
   Indented hairline (avatar gutter) on desktop, edge hairline on mobile.
   Strictly NEVER a side-stripe — top hairline only. */
.post.consecutive-post::before {
  content: "";
  display: block;
  height: 1px;
  background: color-mix(in srgb, var(--text-main) 7%, transparent);
  margin-bottom: 6px;
}

@media (min-width: 769px) {
  .post.consecutive-post::before {
    margin-left: 76px;
    margin-right: 20px;
  }
}

@media (max-width: 768px) {
  .post.consecutive-post::before {
    margin-left: 14px;
    margin-right: 14px;
  }
}

/* Don't double-up the hairline on ping-pong condensed groups */
.post.pingpong-condensed.consecutive-post::before,
.post.consecutive-post.skeleton-post::before {
  display: none;
}

/* ============================================================
   6. HOVER PILL — Anti-glass, solid tinted
   ============================================================ */

/* Replace the glassmorphic pill (banned default) with a clean solid pill.
   Higher specificity wins over the base 0,1,0 selector. */
.post .post-hover-pill {
  background: var(--bg-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid color-mix(in srgb, var(--text-main) 10%, transparent) !important;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--text-main) 8%, transparent),
    0 10px 28px color-mix(in srgb, var(--text-main) 12%, transparent) !important;
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  transform: translateY(6px) scale(0.96);
  transition:
    opacity 220ms var(--topic-ease-expo),
    transform 260ms var(--topic-ease-expo) !important;
}

[data-theme="dark"] .post .post-hover-pill,
[data-theme="grey"] .post .post-hover-pill,
[data-theme="custom"] .post .post-hover-pill,
[data-theme="deep-ether"] .post .post-hover-pill {
  background: var(--bg-surface-raised, var(--bg-surface)) !important;
  border-color: color-mix(in srgb, var(--text-main) 16%, transparent) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 14px 32px rgba(0, 0, 0, 0.36) !important;
}

@media (hover: hover) {
  .post:hover .post-hover-pill {
    transform: translateY(0) scale(1) !important;
  }
}

/* Pill buttons — slightly larger, refined motion */
.post .post-hover-pill .pill-btn {
  width: 30px;
  height: 30px;
  font-size: 13px;
  transition:
    background 160ms var(--topic-ease-quart),
    color 160ms ease,
    transform 200ms var(--topic-ease-expo) !important;
}

.post .post-hover-pill .pill-btn:hover {
  background: color-mix(in srgb, var(--accent-primary, #a8c545) 14%, transparent);
  transform: scale(1.08);
}

.post .post-hover-pill .pill-btn:active {
  transform: scale(0.94);
}

/* ============================================================
   7. SKELETON — Better perceived loading (subtle stagger)
   ============================================================ */

#posts-initial-skeleton .skeleton-post {
  border: 1px solid color-mix(in srgb, var(--text-main) 5%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-main) 4%, transparent);
}

#posts-initial-skeleton .skeleton-post:nth-child(1) { animation-delay: 0ms; }
#posts-initial-skeleton .skeleton-post:nth-child(2) { animation-delay: 70ms; }
#posts-initial-skeleton .skeleton-post:nth-child(3) { animation-delay: 140ms; }
#posts-initial-skeleton .skeleton-post:nth-child(4) { animation-delay: 210ms; }

/* ============================================================
   8. NAV BUTTONS — Calmer floats (top/bottom scroll)
   ============================================================ */

.nav-btn {
  border-radius: var(--radius-lg, 16px);
  transition:
    transform 280ms var(--topic-ease-expo),
    background 200ms ease,
    border-color 200ms ease,
    opacity 200ms ease,
    box-shadow 240ms var(--topic-ease-expo);
}

.nav-btn:hover {
  transform: scale(1.06) translateY(-1px);
}

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

@media (max-width: 768px) {
  .nav-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md, 10px);
  }
  .nav-btn-top { right: 12px; }
  .nav-btn-bottom { right: 12px; }
}

/* ============================================================
   9. ALERT BARS — Token-driven chrome (locked / banned / deleted / info)
   ============================================================ */

.alert-bar {
  border-radius: var(--radius-md, 10px);
  padding: 10px 14px;
  margin: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  border: 1px solid transparent;
}

.alert-bar i { font-size: 14px; flex-shrink: 0; }

.alert-bar-info {
  background: color-mix(in srgb, var(--accent-blue, #3b82f6) 9%, var(--bg-surface));
  color: var(--text-main);
  border-color: color-mix(in srgb, var(--accent-blue, #3b82f6) 20%, transparent);
}

.alert-bar-warning {
  background: color-mix(in srgb, var(--accent-warning, #f59e0b) 11%, var(--bg-surface));
  color: var(--text-main);
  border-color: color-mix(in srgb, var(--accent-warning, #f59e0b) 24%, transparent);
}

.alert-bar-danger {
  background: color-mix(in srgb, var(--accent-danger, #ef4444) 10%, var(--bg-surface));
  color: var(--text-main);
  border-color: color-mix(in srgb, var(--accent-danger, #ef4444) 24%, transparent);
}

/* ============================================================
   10. REPLY FORM — Subtle elevation seam
   ============================================================ */

.fixed-reply-form {
  border-top: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent);
  box-shadow: 0 -10px 28px -20px color-mix(in srgb, var(--text-main) 16%, transparent);
}

@media (max-width: 768px) {
  .fixed-reply-form {
    background: var(--bg-surface);
  }
}

/* ============================================================
   11. POST POLL & REACTIONS — Even rhythm + tactile press
   ============================================================ */

.post .post-reactions {
  gap: 4px;
}

.post .post-reactions button,
.post .post-reactions .reaction-btn {
  border-radius: var(--radius-md, 10px);
  transition:
    background 180ms var(--topic-ease-quart),
    border-color 180ms var(--topic-ease-quart),
    transform 200ms var(--topic-ease-expo);
}

.post .post-reactions button:active,
.post .post-reactions .reaction-btn:active {
  transform: scale(0.92);
}

/* ============================================================
   12. FOCUS — Visible ring on every theme
   ============================================================ */

.topic-back-btn:focus-visible,
.btn-admin:focus-visible,
.post .author-avatar-small:focus-visible,
.post .author-username:focus-visible,
.post .post-hover-pill .pill-btn:focus-visible,
.post .post-reactions button:focus-visible,
.nav-btn:focus-visible {
  outline: 2px solid var(--focus-ring-color, color-mix(in srgb, var(--accent-primary, #a8c545) 60%, transparent));
  outline-offset: 2px;
}

/* ============================================================
   13. REDUCED MOTION — Honor system preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .topic-container .post,
  .post .post-hover-pill,
  .post .author-avatar-small,
  .post .post-reactions button,
  .post .post-reactions .reaction-btn,
  .nav-btn,
  .btn-admin,
  .topic-admin-actions .btn-admin,
  .topic-layout .topic-header {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   14. SCROLL CONTAINER — Smoother scrollbar on every theme
   ============================================================ */

.topic-scroll-container {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-main) 18%, transparent) transparent;
}

.topic-scroll-container::-webkit-scrollbar {
  width: 10px;
}

.topic-scroll-container::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-main) 18%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.topic-scroll-container::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-main) 28%, transparent);
  background-clip: padding-box;
  border: 2px solid transparent;
}

.topic-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 768px) {
  .topic-scroll-container::-webkit-scrollbar {
    width: 0;
  }
}