/* community.css — the hiker forum (2026-09-04 redesign).
 *
 * Builds on dashboard.css tokens (--ui-*) so the forum, the account area and
 * the buddy finder read as one product. One copy for every brand; brand colour
 * arrives through --green / --terracotta from each styles.v2.css.
 *
 * Anatomy: .forum-top (headline + Ask CTA + stats) → .forum-layout (main list
 * + side rail) → .post-card (discussion) → .forum-thread (one discussion open).
 */

:root {
  --forum-answered-bg: var(--ui-accent-soft);
  --forum-answered-ink: var(--ui-accent);
  --forum-open-bg: var(--ui-warning-soft);
  --forum-open-ink: var(--ui-warning);
  --forum-best-bg: var(--ui-success-soft);
  --forum-best-ink: var(--ui-success);
  --forum-ai-bg: #efe9fd;
  --forum-ai-ink: #6d28d9;
  --forum-chip-bg: #f1f3f5;
  --forum-chip-ink: #374151;
  --forum-line: var(--ui-border);
}

.forum { font-family: var(--ui-font); color: var(--ui-ink); }
.forum *, .forum *::before, .forum *::after { box-sizing: border-box; }
.forum a { color: inherit; }
.forum button { font: inherit; }
.forum [hidden] { display: none !important; }

/* ---------- top band --------------------------------------------------- */
.forum-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ui-space-5); flex-wrap: wrap; margin: 0 0 var(--ui-space-5); }
.forum-top h2 { font-family: var(--ui-font); font-size: var(--ui-text-2xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0; color: var(--ui-ink); }
.forum-top .forum-sub { margin: var(--ui-space-2) 0 0; color: var(--ui-muted); font-size: var(--ui-text-base); line-height: 1.5; max-width: 60ch; }
.forum-top-actions { display: flex; gap: var(--ui-space-2); align-items: center; flex-wrap: wrap; }
.forum-stats { display: flex; gap: var(--ui-space-4); flex-wrap: wrap; margin: 0 0 var(--ui-space-5); font-size: var(--ui-text-sm); color: var(--ui-muted); }
.forum-stats b { color: var(--ui-ink); font-weight: 700; }
.forum-stats:empty { display: none; }

/* ---------- layout ----------------------------------------------------- */
.forum-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--ui-space-6); align-items: start; }
.forum-main { min-width: 0; }
.forum-side { position: sticky; top: 80px; display: grid; gap: var(--ui-space-4); }
.forum-side-card { background: var(--ui-card); border: 1px solid var(--forum-line); border-radius: var(--ui-radius); padding: var(--ui-space-4); box-shadow: var(--ui-shadow-sm); }
.forum-side-card h3 { margin: 0 0 var(--ui-space-3); font-size: var(--ui-text-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.forum-side-card p { margin: 0; font-size: var(--ui-text-sm); color: var(--ui-muted); line-height: 1.5; }
.forum-howto ul { margin: 0; padding: 0 0 0 18px; font-size: var(--ui-text-sm); color: var(--ui-muted); line-height: 1.55; }
.forum-howto li + li { margin-top: 6px; }
.forum-howto a { color: var(--ui-accent); font-weight: 600; text-decoration: none; }
.forum-howto a:hover { text-decoration: underline; }
.forum-side-toggle { display: none; }

/* ---------- toolbar ---------------------------------------------------- */
.community-toolbar { display: flex; align-items: center; gap: var(--ui-space-2); flex-wrap: wrap; margin: 0 0 var(--ui-space-3); }
.community-toolbar .forum-search { flex: 1 1 220px; position: relative; }
.community-toolbar .forum-search input { width: 100%; min-height: var(--ui-control-h); padding: 0 36px 0 38px; border: 1px solid var(--ui-border-strong); border-radius: 999px; background: var(--ui-card); font: inherit; font-size: var(--ui-text-sm); color: var(--ui-ink); }
.community-toolbar .forum-search input:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.community-toolbar .forum-search .forum-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ui-faint); font-size: 15px; }
.community-toolbar .forum-search .forum-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); cursor: pointer; font-size: 16px; line-height: 1; }
.community-toolbar .forum-search .forum-search-clear:hover { background: var(--ui-bg); color: var(--ui-ink); }
.community-toolbar select { min-height: var(--ui-control-h); padding: 0 32px 0 12px; border: 1px solid var(--ui-border-strong); border-radius: 10px; background: var(--ui-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6368' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; -webkit-appearance: none; font: inherit; font-size: var(--ui-text-sm); color: var(--ui-ink); cursor: pointer; }
.community-toolbar select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.community-toolbar .post-count { margin-left: auto; font-size: var(--ui-text-sm); color: var(--ui-muted); white-space: nowrap; }
.community-toolbar .post-count:empty { display: none; }

.status-bar { display: inline-flex; gap: 2px; padding: 3px; background: var(--ui-bg); border-radius: 999px; border: 1px solid var(--forum-line); margin: 0 0 var(--ui-space-4); }
.status-pill { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ui-muted); font: inherit; font-size: var(--ui-text-sm); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.status-pill:hover { color: var(--ui-ink); }
.status-pill.active, .status-pill[aria-pressed="true"] { background: var(--ui-card); color: var(--ui-accent); box-shadow: var(--ui-shadow-sm); }
.status-pill:focus-visible { outline: none; box-shadow: var(--ui-focus); }

.forum-active-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 var(--ui-space-3); }
.forum-active-filters:empty { display: none; }
.forum-active-filters .btn-clear-filters { margin-left: 4px; }

/* chips (tags, stages) — the same shape everywhere a chip appears */
.tag-bar, .category-bar, .compose-tag-picker, .tag-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip, .category-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ui-border-strong); background: var(--ui-card); color: var(--ui-ink); font: inherit; font-size: var(--ui-text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.tag-chip:hover, .category-pill:hover { border-color: var(--ui-accent); color: var(--ui-accent); background: var(--ui-accent-soft); }
.tag-chip.active, .category-pill.active, .tag-chip[aria-pressed="true"], .category-pill[aria-pressed="true"] { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); }
.tag-chip:focus-visible, .category-pill:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.forum-side .category-bar { max-height: 260px; overflow: auto; padding-right: 2px; }
.forum-removable { padding-right: 6px; }
.forum-removable .x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 12px; line-height: 1; }

/* ---------- discussion cards ------------------------------------------ */
.post-list { display: grid; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-5); }
.post-card { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--ui-space-3); padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-3); background: var(--ui-card); border: 1px solid var(--forum-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-sm); transition: border-color .15s, box-shadow .15s, transform .15s; cursor: pointer; }
.post-card:hover { border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--forum-line)); box-shadow: var(--ui-shadow); }
.post-card:focus-within { border-color: var(--ui-accent); }
.post-card.is-pinned { border-left: 3px solid var(--ui-warm); }
.post-card.is-mine { background: color-mix(in srgb, var(--ui-accent) 3%, var(--ui-card)); }

.post-avatar, .forum-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; overflow: hidden; flex: 0 0 auto; }
.post-avatar img, .forum-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-avatar.is-anon, .forum-avatar.is-anon { background: var(--ui-bg); color: var(--ui-muted); font-size: 18px; }
.forum-avatar.sm { width: 32px; height: 32px; font-size: 13px; }

.post-card-content { min-width: 0; }
.post-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; font-size: var(--ui-text-xs); }
.post-title { margin: 0 0 4px; font-size: var(--ui-text-md); font-weight: 700; line-height: 1.3; color: var(--ui-ink); overflow-wrap: anywhere; }
.post-title a { text-decoration: none; color: inherit; }
.post-title a:hover { color: var(--ui-accent); }
.post-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.post-excerpt { margin: 0 0 8px; font-size: var(--ui-text-sm); line-height: 1.5; color: var(--ui-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.post-meta { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; font-size: var(--ui-text-xs); color: var(--ui-faint); }
.post-meta b { color: var(--ui-muted); font-weight: 600; }
.post-meta .post-author { display: inline-flex; align-items: center; gap: 4px; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-meta .reply-count { display: inline-flex; align-items: center; gap: 4px; }
.post-body mark, .reply-body mark, .post-title mark, .post-excerpt mark { background: #fff3a5; color: inherit; padding: 0 2px; border-radius: 2px; }

.post-stage-chip, .post-tag-chip, .post-status, .forum-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.post-stage-chip { background: var(--ui-accent-soft); color: var(--ui-accent); }
.post-tag-chip { background: var(--forum-chip-bg); color: var(--forum-chip-ink); font-weight: 600; }
.post-status.is-answered, .forum-badge.is-answered { background: var(--forum-answered-bg); color: var(--forum-answered-ink); }
.post-status.is-open, .forum-badge.is-open { background: var(--forum-open-bg); color: var(--forum-open-ink); }
.forum-badge.is-best { background: var(--forum-best-bg); color: var(--forum-best-ink); }
.forum-badge.is-ai { background: var(--forum-ai-bg); color: var(--forum-ai-ink); }
.forum-badge.is-staff { background: var(--ui-info-soft); color: var(--ui-info); }
.forum-badge.is-pinned { background: var(--ui-warm-soft); color: var(--ui-warm); }

/* the business behind a post or reply (phase C) */
.post-provider-row { margin: 0 0 6px; }
.post-provider { display: inline-flex; align-items: center; gap: 5px; font-size: var(--ui-text-sm); color: var(--ui-accent); text-decoration: none; font-weight: 600; }
a.post-provider:hover { text-decoration: underline; }
.post-provider-check { color: var(--ui-success); }
.post-provider-kind { color: var(--ui-muted); font-weight: 400; }
.post-promotional { margin-top: 2px; font-size: var(--ui-text-xs); font-style: italic; color: var(--ui-muted); }

/* a photo on a question (phase C) */
.post-photo { display: block; margin-top: 8px; width: 100%; max-height: 320px; object-fit: cover; border-radius: 10px; background: var(--ui-bg); }
.post-photo-card { max-height: 200px; }
.reply-photo { max-height: 240px; }
.compose-photo #postPhotoName { margin-left: 8px; font-size: var(--ui-text-sm); }
.compose-photo-img { display: block; max-height: 180px; border-radius: 10px; margin-bottom: 8px; }

/* a published story's thread (phase B) */
.post-story-link { position: relative; z-index: 1; display: flex; gap: 12px; align-items: center; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--forum-line); border-radius: 10px; background: var(--ui-bg); text-decoration: none; color: inherit; }
.post-story-link:hover { border-color: var(--ui-warm); }
.post-story-link img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.post-story-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.post-story-chip { display: inline-block; align-self: flex-start; padding: 1px 7px; border-radius: 6px; background: var(--ui-warm-soft); color: var(--ui-warm); font-size: 11px; font-weight: 700; }
.post-story-text strong { font-size: var(--ui-text-base); line-height: 1.3; overflow-wrap: anywhere; }
.post-story-read { font-size: var(--ui-text-xs); color: var(--ui-muted); }
.community-offers-near { margin: 0 0 var(--ui-space-3); }

/* vote pill + menu live in the third column, above the stretched link */
.post-card-actions { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.vote-pill { display: inline-flex; align-items: center; border: 1px solid var(--forum-line); border-radius: 999px; background: var(--ui-card); overflow: hidden; }
.vote-pill .post-action { min-width: 36px; min-height: 36px; padding: 0 8px; border: 0; background: transparent; color: var(--ui-muted); cursor: pointer; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.vote-pill .post-action:hover:not(:disabled) { background: var(--ui-bg); color: var(--ui-ink); }
.vote-pill .post-action:disabled { opacity: .5; cursor: default; }
.vote-pill .post-action:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ui-accent); }
.vote-pill .btn-vote-up.voted { color: var(--ui-success); background: var(--ui-success-soft); }
.vote-pill .btn-vote-down.voted { color: var(--ui-danger); background: var(--ui-danger-soft); }
.vote-pill .vote-score { min-width: 26px; text-align: center; font-size: var(--ui-text-sm); font-weight: 700; color: var(--ui-ink); }
.vote-pill .vote-score.is-pos { color: var(--ui-success); }
.vote-pill .vote-score.is-neg { color: var(--ui-danger); }

/* ⋯ menu */
.post-action-menu-wrap, .reply-action-menu-wrap { position: relative; }
.btn-dots { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--ui-muted); cursor: pointer; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.btn-dots:hover, .btn-dots[aria-expanded="true"] { background: var(--ui-bg); color: var(--ui-ink); }
.btn-dots:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.action-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 4px); min-width: 190px; padding: 6px; background: var(--ui-card); border: 1px solid var(--forum-line); border-radius: 10px; box-shadow: var(--ui-shadow-lg); z-index: 40; }
.action-dropdown.visible { display: block; }
.action-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ui-ink); font: inherit; font-size: var(--ui-text-sm); text-align: left; cursor: pointer; }
.action-dropdown button:hover, .action-dropdown button:focus-visible { background: var(--ui-bg); outline: none; }
.action-dropdown button.danger { color: var(--ui-danger); }
.action-dropdown .divider { height: 1px; background: var(--forum-line); margin: 4px 0; }

/* ---------- states ----------------------------------------------------- */
.forum-skeleton { display: grid; gap: var(--ui-space-3); }
.forum-skeleton .sk { padding: var(--ui-space-4); background: var(--ui-card); border: 1px solid var(--forum-line); border-radius: var(--ui-radius); }
.forum-skeleton .sk .ui-skeleton { margin-bottom: 8px; }
.forum-skeleton .sk .ui-skeleton:last-child { margin-bottom: 0; }
.ui-skeleton.xs { width: 20%; height: 12px; }
.community-empty, .forum-state { text-align: center; padding: var(--ui-space-10) var(--ui-space-5); background: var(--ui-card); border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius); }
.community-empty .icon, .forum-state .icon { font-size: 34px; line-height: 1; margin-bottom: var(--ui-space-3); }
.community-empty h3, .forum-state h3 { margin: 0 0 6px; font-size: var(--ui-text-lg); font-weight: 700; color: var(--ui-ink); }
.community-empty p, .forum-state p { margin: 0 auto; max-width: 46ch; color: var(--ui-muted); font-size: var(--ui-text-base); line-height: 1.5; }
.community-empty .btn, .forum-state .btn { margin-top: var(--ui-space-4); }
.forum-state.is-error { border-style: solid; border-color: #f3c1bb; }
.forum-offline { display: flex; gap: 10px; align-items: center; padding: 10px 14px; margin: 0 0 var(--ui-space-3); background: var(--ui-warning-soft); border: 1px solid #f5d493; border-radius: var(--ui-radius-sm); color: var(--ui-warning); font-size: var(--ui-text-sm); }
.load-more { text-align: center; margin: var(--ui-space-2) 0 var(--ui-space-6); }
.forum-end { text-align: center; color: var(--ui-faint); font-size: var(--ui-text-xs); margin: var(--ui-space-2) 0 var(--ui-space-6); }

/* ---------- composer --------------------------------------------------- */
.post-form { display: none; background: var(--ui-card); border: 1px solid color-mix(in srgb, var(--ui-accent) 35%, var(--forum-line)); border-radius: var(--ui-radius); padding: var(--ui-space-5); margin: 0 0 var(--ui-space-5); box-shadow: var(--ui-shadow); }
.post-form.visible { display: block; }
.post-form h3 { margin: 0 0 var(--ui-space-1); font-size: var(--ui-text-lg); font-weight: 700; }
.post-form .forum-help { margin: 0 0 var(--ui-space-4); font-size: var(--ui-text-sm); color: var(--ui-muted); }
.forum-field { margin: 0 0 var(--ui-space-3); }
.forum-field label, .forum-field .forum-label { display: block; font-size: var(--ui-text-xs); font-weight: 700; color: var(--ui-muted); margin: 0 0 6px; letter-spacing: .02em; }
.forum-field input[type="text"], .forum-field textarea, .forum-field select { width: 100%; padding: 10px 12px; border: 1px solid var(--ui-border-strong); border-radius: 10px; background: var(--ui-card); font: inherit; font-size: var(--ui-text-base); color: var(--ui-ink); }
.forum-field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.forum-field input:focus, .forum-field textarea:focus, .forum-field select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.forum-field .forum-counter { text-align: right; font-size: var(--ui-text-xs); color: var(--ui-faint); margin-top: 4px; }
.forum-field .forum-counter.is-over { color: var(--ui-danger); font-weight: 700; }
.forum-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-3); }
.forum-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--ui-text-sm); color: var(--ui-ink); user-select: none; }
.forum-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.forum-switch .track { width: 40px; height: 22px; border-radius: 999px; background: var(--ui-border-strong); position: relative; transition: background .15s; flex: 0 0 auto; }
.forum-switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: var(--ui-shadow-sm); }
.forum-switch input:checked + .track { background: var(--ui-accent); }
.forum-switch input:checked + .track::after { transform: translateX(18px); }
.forum-switch input:focus-visible + .track { box-shadow: var(--ui-focus); }
.forum-switch small { color: var(--ui-muted); }
.post-form .form-actions { display: flex; gap: var(--ui-space-2); justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: var(--ui-space-4); }
.post-form .form-error { margin: 0 auto 0 0; color: var(--ui-danger); font-size: var(--ui-text-sm); }
.post-form .form-error:empty { display: none; }
#similarQuestionsBox { margin: 0 0 var(--ui-space-3); padding: 12px; background: var(--ui-warning-soft); border: 1px solid #f5d493; border-radius: 10px; }
#similarQuestionsBox .sim-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: var(--ui-text-sm); margin: 0 0 8px; color: var(--ui-warning); }
#similarQuestionsBox .sim-head button { width: 28px; height: 28px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; font-size: 16px; color: inherit; }
#similarQuestionsBox a.sim-item { display: block; padding: 8px 10px; margin-bottom: 6px; background: var(--ui-card); border: 1px solid #f0e0a5; border-radius: 8px; text-decoration: none; color: var(--ui-ink); font-size: var(--ui-text-sm); }
#similarQuestionsBox a.sim-item:hover { border-color: var(--ui-accent); }
#similarQuestionsBox a.sim-item .sim-meta { font-size: var(--ui-text-xs); color: var(--ui-muted); margin-top: 3px; }

/* ---------- thread view ------------------------------------------------ */
.forum-thread { min-width: 0; }
.forum-thread .thread-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--ui-space-3); font-size: var(--ui-text-sm); font-weight: 600; color: var(--ui-accent); text-decoration: none; }
.forum-thread .thread-back:hover { text-decoration: underline; }
.thread-post { background: var(--ui-card); border: 1px solid var(--forum-line); border-radius: var(--ui-radius); padding: var(--ui-space-5); margin: 0 0 var(--ui-space-4); box-shadow: var(--ui-shadow-sm); }
.thread-post .post-card-head { margin-bottom: 10px; }
.thread-post h1, .thread-post .thread-title { font-family: var(--ui-font); font-size: var(--ui-text-xl); font-weight: 700; line-height: 1.25; margin: 0 0 10px; overflow-wrap: anywhere; }
.thread-author { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--ui-space-4); font-size: var(--ui-text-sm); color: var(--ui-muted); }
.thread-author .who { display: flex; flex-direction: column; min-width: 0; }
.thread-author .who b { color: var(--ui-ink); font-weight: 600; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-author .post-action-menu-wrap { margin-left: auto; }
.post-body, .reply-body { font-size: var(--ui-text-base); line-height: 1.65; color: var(--ui-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.post-body a, .reply-body a { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 2px; }
.post-body blockquote, .reply-body blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--ui-border-strong); color: var(--ui-muted); }
.thread-post .post-actions { display: flex; align-items: center; gap: var(--ui-space-3); flex-wrap: wrap; margin-top: var(--ui-space-4); padding-top: var(--ui-space-3); border-top: 1px solid var(--forum-line); }
.thread-post .post-actions .post-meta { margin-left: auto; }
.forum-edited { font-size: var(--ui-text-xs); color: var(--ui-faint); font-style: italic; }
.thread-replies-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-3); }
.thread-replies-head h2 { font-family: var(--ui-font); font-size: var(--ui-text-lg); font-weight: 700; margin: 0; }
.thread-replies-head .ui-muted { font-size: var(--ui-text-sm); }
.post-replies { display: grid; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-4); }
.reply-card { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: var(--ui-space-4); background: var(--ui-card); border: 1px solid var(--forum-line); border-radius: var(--ui-radius); }
.reply-card.is-best { border-color: color-mix(in srgb, var(--ui-success) 45%, var(--forum-line)); background: color-mix(in srgb, var(--ui-success) 4%, var(--ui-card)); }
.reply-card.is-ai { border-color: color-mix(in srgb, var(--forum-ai-ink) 30%, var(--forum-line)); }
.reply-card.is-focus { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.reply-card.is-mine { background: color-mix(in srgb, var(--ui-accent) 3%, var(--ui-card)); }
.reply-main { min-width: 0; }
.reply-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; font-size: var(--ui-text-xs); color: var(--ui-faint); }
.reply-header .reply-author { font-weight: 600; color: var(--ui-ink); max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-header .reply-action-menu-wrap { margin-left: auto; }
.reply-body { font-size: var(--ui-text-base); }
.reply-footer { display: flex; align-items: center; gap: var(--ui-space-2); flex-wrap: wrap; margin-top: 10px; }
.reply-footer .btn-mod-pin { margin-left: auto; }
.reply-footer .btn-quote { min-height: 32px; padding: 0 10px; border: 0; background: transparent; color: var(--ui-muted); border-radius: 8px; cursor: pointer; font-size: var(--ui-text-xs); font-weight: 600; }
.reply-footer .btn-quote:hover { background: var(--ui-bg); color: var(--ui-ink); }
.reply-edit-form textarea { width: 100%; min-height: 90px; padding: 10px 12px; border: 1px solid var(--ui-accent); border-radius: 10px; font: inherit; font-size: var(--ui-text-base); line-height: 1.5; resize: vertical; }
.reply-edit-form .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.no-replies { padding: var(--ui-space-6) var(--ui-space-4); text-align: center; color: var(--ui-muted); font-size: var(--ui-text-sm); background: var(--ui-card); border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius); }
.no-replies b { display: block; color: var(--ui-ink); font-size: var(--ui-text-base); margin-bottom: 4px; }

.reply-form { position: sticky; bottom: 0; z-index: 5; background: var(--ui-card); border: 1px solid var(--forum-line); border-radius: var(--ui-radius); padding: var(--ui-space-3) var(--ui-space-4); box-shadow: 0 -6px 24px rgba(20,16,10,.06); margin-top: var(--ui-space-2); }
.reply-form textarea { width: 100%; min-height: 72px; max-height: 40vh; padding: 10px 12px; border: 1px solid var(--ui-border-strong); border-radius: 10px; font: inherit; font-size: var(--ui-text-base); line-height: 1.5; resize: vertical; }
.reply-form textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.reply-form .reply-form-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); flex-wrap: wrap; margin-top: 8px; }
.reply-form .reply-form-row .right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.reply-form .forum-counter { font-size: var(--ui-text-xs); color: var(--ui-faint); }
.reply-form .forum-counter.is-over { color: var(--ui-danger); font-weight: 700; }
.reply-form .signin-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); flex-wrap: wrap; font-size: var(--ui-text-sm); color: var(--ui-muted); }

/* ---------- modals ----------------------------------------------------- */
.meta-modal-backdrop, .report-overlay, .confirm-overlay { position: fixed; inset: 0; background: rgba(20,16,10,.55); display: none; align-items: center; justify-content: center; padding: var(--ui-space-5); z-index: 1000; backdrop-filter: blur(2px); }
.meta-modal-backdrop.visible, .report-overlay.visible, .confirm-overlay.visible { display: flex; }
.meta-modal, .report-modal, .confirm-modal { width: 100%; max-width: 520px; max-height: min(90vh, 720px); overflow: auto; background: var(--ui-card); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-lg); padding: var(--ui-space-6); animation: ui-pop .18s ease-out; }
.confirm-modal { max-width: 400px; text-align: center; }
.meta-modal h3, .report-modal h3, .confirm-modal h3 { font-family: var(--ui-font); font-size: var(--ui-text-lg); font-weight: 700; margin: 0 0 var(--ui-space-2); }
.report-modal p, .confirm-modal p { margin: 0 0 var(--ui-space-4); color: var(--ui-muted); font-size: var(--ui-text-sm); line-height: 1.5; }
.meta-modal label, .report-modal label { display: block; font-size: var(--ui-text-xs); font-weight: 700; color: var(--ui-muted); margin: var(--ui-space-3) 0 6px; }
.meta-modal select, .meta-modal input[type="text"], .report-modal select, .report-modal textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--ui-border-strong); border-radius: 10px; background: var(--ui-card); font: inherit; font-size: var(--ui-text-base); }
.report-modal textarea { min-height: 90px; resize: vertical; }
.meta-modal select:focus, .meta-modal input:focus, .report-modal select:focus, .report-modal textarea:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }
.modal-actions { display: flex; gap: var(--ui-space-2); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--ui-space-5); }
.confirm-modal .modal-actions { justify-content: center; }

/* toast (legacy id kept for the tests; styled like .ui-toast) */
.lw-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: #1f1d1a; color: #fff; padding: 12px 18px; border-radius: 10px; font-size: var(--ui-text-sm); font-weight: 500; z-index: 2000; opacity: 0; transition: all .3s ease; pointer-events: none; box-shadow: var(--ui-shadow-lg); max-width: min(420px, calc(100vw - 32px)); }
.lw-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.lw-toast.is-error { background: var(--ui-danger); }

/* inbox (phase A) — restyled */
.community-bell { position: relative; }
.community-bell-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--ui-warm); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.community-inbox { margin: 0 0 var(--ui-space-4); }
.community-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); }
.community-inbox-list { list-style: none; margin: var(--ui-space-2) 0 0; padding: 0; }
.community-inbox-row a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 8px; border-radius: 8px; text-decoration: none; color: inherit; }
.community-inbox-row a:hover { background: var(--ui-bg); }
.community-inbox-row.is-unread a { background: var(--ui-accent-soft); }
.community-inbox-title { font-weight: 600; font-size: var(--ui-text-sm); }
.community-inbox-excerpt { grid-column: 1; font-size: var(--ui-text-xs); color: var(--ui-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-inbox-time { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--ui-text-xs); color: var(--ui-faint); white-space: nowrap; }

/* feed ("Latest from the trail") — the same card language */
.feed-list { display: grid; gap: var(--ui-space-3); }
.feed-item { display: flex; gap: 12px; background: var(--ui-card); border: 1px solid var(--forum-line); border-radius: var(--ui-radius); padding: var(--ui-space-4); box-shadow: var(--ui-shadow-sm); }
.feed-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.feed-body { flex: 1; min-width: 0; }
.feed-header { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.feed-user { font-weight: 600; margin-right: 8px; }
.feed-type { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ui-bg); color: var(--ui-muted); text-transform: uppercase; letter-spacing: .03em; }
.feed-type.type-warning { background: var(--ui-danger-soft); color: var(--ui-danger); }
.feed-type.type-tip { background: var(--ui-success-soft); color: var(--ui-success); }
.feed-type.type-photo, .feed-type.type-milestone { background: var(--ui-info-soft); color: var(--ui-info); }
.feed-time { font-size: var(--ui-text-xs); color: var(--ui-faint); }
.feed-text { font-size: var(--ui-text-base); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.feed-image { max-width: 100%; border-radius: 10px; margin-top: 10px; display: block; }
.feed-stage { font-size: var(--ui-text-xs); color: var(--ui-muted); margin-top: 8px; }
.community-views { margin-bottom: var(--ui-space-4); }
.feed-story { margin-top: 10px; }

/* ---------- motion & a11y ------------------------------------------------ */
.forum .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes forum-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.post-card, .reply-card, .thread-post { animation: forum-in .18s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .post-card, .reply-card, .thread-post, .lw-toast, .forum-skeleton .ui-skeleton { animation: none; transition: none; }
}

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 960px) {
  .forum-layout { grid-template-columns: minmax(0, 1fr); }
  .forum-side { position: static; display: none; }
  .forum-side.open { display: grid; }
  .forum-side-toggle { display: inline-flex; }
  .forum-side .category-bar { max-height: none; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .forum-side .category-bar::-webkit-scrollbar { display: none; }
}
@media (max-width: 640px) {
  .forum-top h2 { font-size: 22px; }
  .forum-top-actions { width: 100%; }
  .forum-top-actions .btn-primary { flex: 1 1 auto; justify-content: center; }
  .community-toolbar .post-count { display: none; }
  .status-bar { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .status-bar::-webkit-scrollbar { display: none; }
  .status-pill { flex: 1 0 auto; text-align: center; }
  .post-card { grid-template-columns: 32px minmax(0, 1fr); padding: var(--ui-space-3); }
  .post-avatar { width: 32px; height: 32px; font-size: 13px; }
  .post-card-actions { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 8px; }
  .post-title { font-size: var(--ui-text-base); }
  .forum-field-row { grid-template-columns: 1fr; }
  .thread-post, .reply-card { padding: var(--ui-space-3); }
  .thread-post h1, .thread-post .thread-title { font-size: var(--ui-text-lg); }
  .reply-form { border-radius: var(--ui-radius) var(--ui-radius) 0 0; margin: 0 -20px; padding-bottom: calc(var(--ui-space-3) + env(safe-area-inset-bottom)); }
  .meta-modal, .report-modal, .confirm-modal { padding: var(--ui-space-5); border-radius: var(--ui-radius); }
  .modal-actions .btn { flex: 1 1 auto; }
}

/* "Which stage is this about?" — the one soft stop in the composer (2026-09-10).
   11 of the last 13 Lycian Way questions carried no stage, so nothing
   stage-based could route them. */
.stage-nudge { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #cfdccf; border-left: 4px solid #2c5f2d; border-radius: 8px; background: #f4f8f4; font-size: 14px; line-height: 1.45; }
.stage-nudge[hidden] { display: none; }
.stage-nudge strong { display: block; margin-bottom: 2px; }
.stage-nudge-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }