/* FirstSelfInt Community — public SSR stylesheet (C3).
   Mobile-first: base rules target ~360px; min-width queries layer on
   larger-viewport refinements at 768px and 1280px (C3 §27). Deliberately
   a small, standalone stylesheet — not a build of the Planner SPA's own
   Vite-hashed CSS, which would create a fragile cross-build dependency
   for a surface that must stay independently deployable (C3 §26). */

/* Community + Planner Visual Refinement (PL) §10: a small shared
   conceptual token set, aligned 1:1 with Planner's own long-established
   literal values (frontend/src/index.css — #2f6fed accent, #1a1d21 ink,
   #5a6069 muted, #fff cards, 8-12px radius, a 0 1px 3px shadow) so both
   surfaces read as the same product without a shared CSS bundle (neither
   deployment needs the other's build). The `--community-*` names stay as
   the aliases every pre-existing rule in this file already uses; new
   rules added by this phase reach for `--fsi-*` directly. */
:root {
  --fsi-color-primary: #2f6fed;
  --fsi-color-primary-soft: #e8f0fe;
  --fsi-color-primary-ink: #15408f;
  --fsi-color-page: #f5f6fa;
  --fsi-color-surface: #ffffff;
  --fsi-color-surface-subtle: #eef2fb;
  --fsi-color-border: #e2e5ec;
  --fsi-color-text: #1a1d21;
  --fsi-color-muted: #5a6069;
  --fsi-radius-sm: 8px;
  --fsi-radius-md: 12px;
  --fsi-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);

  --community-ink: var(--fsi-color-text);
  --community-ink-soft: var(--fsi-color-muted);
  --community-bg: var(--fsi-color-surface);
  --community-bg-soft: var(--fsi-color-page);
  --community-border: var(--fsi-color-border);
  --community-accent: var(--fsi-color-primary);
  --community-accent-ink: var(--fsi-color-primary-ink);
  --community-radius: var(--fsi-radius-sm);
  --community-max-width: 760px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--community-bg-soft);
  color: var(--community-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--community-accent);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 10;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

a {
  color: var(--community-accent-ink);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--community-accent);
  outline-offset: 2px;
}

/* Community + Planner Visual Refinement (PL) §9: a white header bar
   layered over the now-tinted page background (matching Planner's own
   white sticky .app-header, frontend/src/index.css) so the header reads
   as a distinct layer rather than blending into the page. */
.site-header {
  border-bottom: 1px solid var(--community-border);
  background: var(--fsi-color-surface);
}

/* Shared FirstSelf account header (Community Home UX Refinement) — ported
   from frontend/src/index.css's .app-header family (Planner's
   authenticated AppHeader) so both surfaces read as the same account
   environment. Kept as a visually-equivalent standalone copy rather than
   a shared stylesheet, matching this file's own existing "small,
   standalone, independently deployable" principle stated at the top of
   this file. */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 16px;
}

.app-header__brand {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--community-ink);
  text-decoration: none;
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header__brand:hover,
.app-header__brand:focus-visible {
  color: var(--community-accent);
  text-decoration: underline;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Both account-action blocks start `[hidden]` in the SSR markup (layout.php)
   so the page stays session-neutral; a plain class selector like
   `.app-header__actions { display: flex }` above would otherwise win the
   cascade over the UA stylesheet's own `[hidden] { display: none }` rule
   (author styles beat UA styles at equal specificity) and show BOTH
   blocks at once before community-interactions.js's hydrateAccountHeader()
   reveals exactly one of them. This selector's extra specificity
   (class + attribute) restores the correct default-hidden state. */
.app-header__actions[hidden] {
  display: none;
}

.app-header__user {
  color: var(--community-ink-soft);
  font-size: 0.85rem;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: none;
}

.app-header__inbox,
.app-header__profile {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--community-bg-soft);
  color: var(--community-ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.app-header__inbox-label,
.app-header__profile-label {
  display: none;
}

.app-header__badge {
  background: #d1373f;
  color: #fff;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.7rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Starts `[hidden]` in the SSR markup until hydrateUnreadBadge() confirms
   a real unread count > 0 — same cascade gotcha/fix as
   .app-header__actions[hidden] above. */
.app-header__badge[hidden] {
  display: none;
}

.community-header__logout,
.community-header__login {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--community-border);
  background: var(--community-bg);
  color: var(--community-ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.community-header__logout:hover,
.community-header__login:hover,
.community-header__logout:focus-visible,
.community-header__login:focus-visible {
  background: var(--community-bg-soft);
}

@media (min-width: 480px) {
  .app-header__user {
    display: inline-block;
  }

  .app-header__inbox-label,
  .app-header__profile-label {
    display: inline;
  }
}

/* Compact Category Navigation (PL) §2/§3: ONE nav component, used on
   every Community list/detail page (home included — PageRenderer's
   `showCategoryNav` default), so there is never more than one category
   nav rendered per page. Horizontally scrollable rather than wrapping
   into multiple rows at narrow widths (§2's explicit mobile requirement)
   — the page itself never gains horizontal overflow because only this
   inner `<nav>` scrolls, not `<body>`. */
.community-category-nav {
  background: var(--community-bg);
  border-bottom: 1px solid var(--community-border);
}

.community-category-nav ul {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0 auto;
  padding: 0.6rem 1rem;
  max-width: 1040px;
  overflow-x: auto;
  /* Keep the scroll affordance (arrow keys / touch drag still work)
     without an ugly scrollbar track across every engine (§2's explicit
     requirement) — a non-visual scrollbar is not the same as removing
     keyboard/touch scrollability, which the elements below still have. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.community-category-nav ul::-webkit-scrollbar {
  display: none;
}

.community-category-nav li {
  flex: 0 0 auto;
}

.community-category-nav a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 36px;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--community-border);
  text-decoration: none;
  color: var(--community-ink-soft);
  background: var(--community-bg-soft);
  font-size: 0.88rem;
  font-weight: 500;
}

.community-category-nav a:hover,
.community-category-nav a:focus-visible {
  border-color: var(--community-accent);
  color: var(--community-accent-ink);
}

.community-category-nav a[aria-current='page'] {
  background: var(--community-accent);
  border-color: var(--community-accent);
  color: #fff;
  font-weight: 600;
}

main {
  display: block;
  max-width: var(--community-max-width);
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

.category-header h1,
.post-detail__title,
.not-found h1 {
  font-size: 1.5rem;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

/* Community Home UX Refinement — the visible intro/hero copy was
   removed; this keeps the home page's own h1 in the accessibility tree
   (a valid single-h1 outline) without showing it, standard clip-based
   technique (not display:none, which screen readers also skip). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Home Write CTA (PL) §4: ONE compact write-CTA style, shared verbatim
   by the home page's Recent Posts header and every category page's own
   header — never full width, never the oversized hero button this
   replaces. Community Post Composer UI (C4.5) §6/§37 — still a plain,
   static anchor (never session-aware on this surface, §38) to the
   authenticated SPA's composer route. */
.community-write-cta {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--community-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.community-write-cta:hover,
.community-write-cta:focus-visible {
  background: var(--community-accent-ink);
}

.category-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.category-header h1 {
  margin-bottom: 0;
}

.community-section {
  margin: 1.75rem 0;
}

.community-section h2 {
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}

/* Community Home Visual Structure (PL) §7: a very subtle tinted block
   background gives the Recent Posts area its own sense of structure,
   restrained (one light cool/blue-gray tint, no border/shadow needed to
   read as a section) rather than decorative. */
.community-section--recent {
  background: var(--fsi-color-surface-subtle);
  border-radius: var(--fsi-radius-md);
  padding: 1rem;
  margin: 1.25rem 0;
}

.community-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
}

/* Community — Admin Notice / Pinned Announcements: the smallest possible
   visual distinction from the ordinary Recent Posts section — reuses
   the exact same .post-card shape/spacing/hover behavior (no new card
   style), just a colored left accent (the existing primary brand color,
   no new color token) on the section and on each card within it, plus a
   matching heading color. Deliberately not a second card design, not a
   carousel, not a hero banner. */
.community-section--notices {
  border-left: 3px solid var(--community-accent);
  padding-left: 0.85rem;
}

.community-section--notices h2 {
  color: var(--community-accent-ink);
}

.post-list--notices .post-card {
  border-color: var(--community-accent);
}

.community-section__header h2 {
  margin: 0;
}

.empty-state {
  color: var(--community-ink-soft);
  padding: 1.25rem;
  text-align: center;
  border: 1px dashed var(--community-border);
  border-radius: var(--community-radius);
  background: var(--community-bg);
}

.post-list {
  display: grid;
  gap: 0.65rem;
}

/* Post Card Refinement (PL) §8: a touch more polish than a plain bordered
   rectangle — an explicit white surface (the page background is now a
   subtle tint, §7) plus a soft shadow, with a visible hover/focus lift on
   pointer-capable devices only, so touch devices never get a "stuck"
   hover state. Height is unchanged from before — padding/line-height are
   the same as the prior plain-rectangle card. */
.post-card {
  position: relative;
  background: var(--fsi-color-surface);
  border: 1px solid var(--community-border);
  border-radius: var(--community-radius);
  padding: 0.9rem 1rem;
  box-shadow: var(--fsi-shadow-sm);
}

/* Full-Card Navigation (PL2) §1: the "stretched link" technique — the
   REAL, existing title <a> grows an invisible pseudo-element covering
   the whole card (`.post-card` is its `position: relative` containing
   block), so the entire visible card becomes the click/tap target while
   the DOM still has exactly one real anchor here (no nested <a>, no
   JS-only navigation, native Tab/Enter keyboard behavior, a real crawlable
   href). `.post-card__category` is independently clickable on top of it
   via its own stacking context (below). */
.post-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

@media (hover: hover) {
  .post-card:hover {
    border-color: var(--community-accent);
  }
}

.post-card:focus-within {
  outline: 2px solid var(--community-accent);
  outline-offset: 1px;
}

.post-card__meta {
  margin: 0 0 0.35rem;
}

/* A small accent "badge" rather than a plain text link, so category
   reads as metadata/classification rather than competing with the title
   for primary attention (§8). */
.post-card__category {
  /* Full-Card Navigation (PL2) §1: stays independently clickable to its
     OWN category-page destination, above the title link's full-card
     stretched overlay below (its own stacking context + a higher
     z-index than the overlay's implicit 0). */
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--community-accent-ink);
  background: var(--fsi-color-primary-soft);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

.post-card__title {
  margin: 0.4rem 0 0.35rem;
  font-size: 1.05rem;
  line-height: 1.4;
}

.post-card__title a {
  text-decoration: none;
  color: var(--community-ink);
}

/* Comment Counts (PL) §5: visually subordinate to the title (lighter
   weight/color, smaller), but part of the same clickable title anchor —
   never a separate link, never its own tab stop. */
.post-card__comment-count {
  font-weight: 400;
  font-size: 0.92em;
  color: var(--community-ink-soft);
}

.post-card__byline {
  margin: 0;
  font-size: 0.85rem;
  color: var(--community-ink-soft);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Level / XP System brief §43: a compact badge next to the author name,
   never styled to dominate the content. */
.post-card__level-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3346c7;
  font-size: 0.78rem;
  font-weight: 600;
}

.pagination {
  margin-top: 1.25rem;
  text-align: center;
}

.pagination__next {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--community-border);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

.post-detail__meta {
  margin: 0 0 0.4rem;
}

.post-detail__category {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--community-accent-ink);
}

/* Back Button (PL2) §2: same logical row as the title, title stays the
   dominant element (back is a small, neutral, secondary pill — never
   accent-filled). flex-wrap lets the button drop to its own line rather
   than crushing a long title at 360px/390px (§5's explicit requirement);
   min-width: 0 on the title lets its own long-Korean-text wrapping
   (body's existing global word-break/overflow-wrap rules) work correctly
   inside a flex item, which otherwise refuses to shrink below its
   content's intrinsic width. */
.post-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.post-detail__header .post-detail__title {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.post-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--community-border);
  border-radius: 999px;
  background: var(--community-bg);
  color: var(--community-ink-soft);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.post-detail__back:hover,
.post-detail__back:focus-visible {
  border-color: var(--community-accent);
  color: var(--community-accent-ink);
}

.post-detail__byline {
  color: var(--community-ink-soft);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
}

/* Author Post Management (PL5 Task B) §B5: compact, text-link-styled
   controls — deliberately its own row BELOW the byline (never inline
   with the title/author/date), so it never crowds that existing
   metadata at 360px. `hidden` by default (see post_content.php's own
   comment); community-interactions.js removes it only for the post's
   own author. Both targets comfortably clear the 44px touch minimum via
   padding, without looking like full buttons next to plain text. */
.post-detail__owner-actions {
  display: flex;
  gap: 1rem;
  margin: -0.5rem 0 1.25rem;
}

.post-detail__edit-link,
.post-detail__delete-button {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
}

.post-detail__edit-link {
  color: var(--community-accent);
  text-decoration: none;
}

.post-detail__edit-link:hover,
.post-detail__edit-link:focus-visible {
  text-decoration: underline;
}

.post-detail__delete-button {
  color: var(--community-ink-soft);
}

.post-detail__delete-button:hover,
.post-detail__delete-button:focus-visible {
  color: var(--community-danger, #c0392b);
}

.post-detail__body {
  font-size: 1rem;
}

.post-detail__body > :first-child {
  margin-top: 0;
}

.post-detail__body p {
  margin: 0 0 1rem;
}

.post-detail__body h3 {
  font-size: 1.15rem;
  margin: 1.5rem 0 0.6rem;
}

.post-detail__body h4 {
  font-size: 1.05rem;
  margin: 1.25rem 0 0.5rem;
}

.post-detail__body ul,
.post-detail__body ol {
  padding-left: 1.3rem;
  margin: 0 0 1rem;
}

.post-detail__body li {
  margin: 0.25rem 0;
}

.post-detail__body blockquote {
  margin: 0 0 1rem;
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--community-border);
  color: var(--community-ink-soft);
}

.post-detail__body a {
  word-break: break-all;
}

/* Community Safe Formatting Toolbar — a small, finite whitelist of
   classes `RichTextFormatter` (backend) is the ONLY thing ever allowed
   to emit; never arbitrary user-supplied class names or inline style.
   See that class's own docblock for the full security rationale. */
.post-detail__body u {
  text-decoration: underline;
}

.post-detail__body .cm-size-small {
  font-size: 0.85em;
}

.post-detail__body .cm-size-normal {
  font-size: 1em;
}

.post-detail__body .cm-size-large {
  font-size: 1.25em;
}

.post-detail__body .cm-size-x-large {
  font-size: 1.6em;
}

.post-detail__body .cm-color-default {
  color: inherit;
}

.post-detail__body .cm-color-gray {
  color: #6b7280;
}

.post-detail__body .cm-color-red {
  color: #dc2626;
}

.post-detail__body .cm-color-orange {
  color: #d97706;
}

.post-detail__body .cm-color-green {
  color: #16a34a;
}

.post-detail__body .cm-color-blue {
  color: #2563eb;
}

.post-detail__body .cm-color-purple {
  color: #9333ea;
}

.post-detail__body .cm-align-left {
  text-align: left;
}

.post-detail__body .cm-align-center {
  text-align: center;
}

.post-detail__body .cm-align-right {
  text-align: right;
}

/* Community Secure Media Upload (C4) — a controlled gallery, rendered
   outside the Markdown body entirely (see post_content.php). */
.post-detail__gallery {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
}

.post-detail__gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--community-radius);
  border: 1px solid var(--community-border);
}

/* Previous/Next Navigation (PL2) §3/§5: mobile-first — stacked (one full-
   width item per row) below 768px so a long Korean title never has to
   squeeze into a half-width column at 360px/390px; side-by-side only at
   the same 768px breakpoint this file already uses elsewhere. A missing
   side (first/last post in category, or a single-post category) simply
   isn't rendered (template-level `if`) — the remaining item still reads
   as a full-width row via `flex: 1 1 0`, never an empty placeholder. */
.post-adjacent-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 2rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--community-border);
}

/* Final fix (PL5) Task A: the outer <a> IS the card — the single real,
   whole-card-clickable element, never a stretched-link pseudo-element
   over a separate title anchor. `display: flex; flex-direction: column`
   stacks the label and title as two block-level flex items, so the
   border/background/padding always encloses both as one unambiguous
   box regardless of how many lines the title wraps onto. `min-width: 0`
   lets the flex item actually shrink to wrap text instead of forcing
   the card wider than its row; `overflow-wrap: anywhere` on the title
   (plus this file's own global body-level Korean-text rules) keeps a
   long title wrapping inside the card, never escaping it. */
.post-adjacent-nav__item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 44px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--community-border);
  border-radius: var(--community-radius);
  background: var(--fsi-color-surface);
  box-shadow: var(--fsi-shadow-sm);
  text-decoration: none;
}

.post-adjacent-nav__item:hover,
.post-adjacent-nav__item:focus-visible {
  border-color: var(--community-accent);
}

.post-adjacent-nav__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--community-ink-soft);
}

.post-adjacent-nav__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--community-ink);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .post-adjacent-nav {
    flex-direction: row;
  }

  .post-adjacent-nav__item--next {
    text-align: right;
    align-items: flex-end;
  }
}

.not-found {
  text-align: center;
  padding: 2rem 0;
}

.not-found ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

.site-footer {
  text-align: center;
  color: var(--community-ink-soft);
  font-size: 0.85rem;
  padding: 2rem 1rem;
}

@media (min-width: 768px) {
  .post-detail__gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  main {
    padding-top: 2rem;
  }

  .category-header h1,
  .post-detail__title,
  .not-found h1 {
    font-size: 1.9rem;
  }
}

/* Community Comments, Likes & Bookmarks (C5) — mobile-first (360px
   baseline, §80): the like/bookmark row and comment textarea stay full-
   width with no horizontal scroll; reply indentation is a single modest
   step (one level only, §80's own "avoid deep indentation" guidance). */
.community-interactions {
  margin: 1.5rem 0;
}

.community-interactions__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.community-like-button,
.community-bookmark-button,
.community-report-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--community-border);
  border-radius: 999px;
  background: var(--community-bg);
  color: var(--community-ink);
  font-size: 0.95rem;
  cursor: pointer;
}

/* Community Reports & Moderation Foundation (C6) — never an "active"
   pressed state like like/bookmark (a report has no toggled visual
   state of its own); kept visually quieter (muted text color) so it
   doesn't compete with the primary like/bookmark actions. */
.community-report-button {
  color: var(--community-ink-soft);
}

.community-like-button--active,
.community-bookmark-button--active {
  border-color: var(--community-accent);
  background: var(--community-bg-soft);
  color: var(--community-accent-ink);
  font-weight: 600;
}

.community-like-button__icon {
  font-size: 1.1rem;
}

.community-comments {
  margin: 2rem 0;
}

.community-comments h2 {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}

.community-comment-form,
.community-reply-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.community-comment-form label,
.community-reply-form label {
  font-size: 0.9rem;
  font-weight: 600;
}

.community-comment-form textarea,
.community-reply-form textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.6rem;
  border: 1px solid var(--community-border);
  border-radius: var(--community-radius);
  font: inherit;
  resize: vertical;
}

.community-comment-form button,
.community-reply-form button {
  align-self: flex-start;
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--community-border);
  border-radius: 999px;
  background: var(--community-accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.community-reply-form .community-reply-cancel {
  background: var(--community-bg);
  color: var(--community-ink-soft);
}

.community-comment-form__error {
  color: #c0392b;
  font-size: 0.85rem;
  margin: 0;
}

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

.community-comment {
  border-top: 1px solid var(--community-border);
  padding-top: 0.85rem;
}

.community-comment__meta {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  color: var(--community-ink-soft);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.community-comment__body {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.community-comment__tombstone {
  color: var(--community-ink-soft);
  font-style: italic;
}

.community-comment__actions {
  margin-top: 0.4rem;
  display: flex;
  gap: 0.75rem;
}

.community-comment__actions button {
  background: none;
  border: none;
  padding: 0;
  min-height: 32px;
  font-size: 0.85rem;
  color: var(--community-accent-ink);
  cursor: pointer;
}

.community-comment__delete {
  color: #c0392b !important;
}

.community-comment-replies {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--community-border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.community-comment--reply {
  border-top: none;
  padding-top: 0;
}

.community-comments-more {
  display: block;
  margin: 1rem auto 0;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--community-border);
  border-radius: 999px;
  background: var(--community-bg);
  cursor: pointer;
}

/* Community Reports & Moderation Foundation (C6) — the dynamically
   inserted report form (post or comment). Mobile-first: full-width
   fields, no horizontal scroll at 360px. */
.community-report-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.75rem;
  border: 1px solid var(--community-border);
  border-radius: var(--community-radius);
  background: var(--community-bg-soft);
}

.community-report-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.community-report-form select,
.community-report-form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--community-border);
  border-radius: var(--community-radius);
  font: inherit;
}

.community-report-form textarea {
  min-height: 4rem;
  resize: vertical;
}

.community-report-form button[type='submit'] {
  align-self: flex-start;
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--community-border);
  border-radius: 999px;
  background: var(--community-accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.community-report-form__cancel {
  align-self: flex-start;
  min-height: 36px;
  padding: 0 0.8rem;
  border: 1px solid var(--community-border);
  border-radius: 999px;
  background: var(--community-bg);
  color: var(--community-ink-soft);
  cursor: pointer;
}

.community-report-form__status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--community-ink-soft);
}

@media (min-width: 1280px) {
  main {
    max-width: 880px;
  }
}