/*
 * post.css — post detail page.
 */
.wg-post { max-width: 640px; margin: 0 auto; }

/* Thumbnail grid */
.wg-gallery { display: grid; gap: 6px; margin-bottom: 14px; }
.wg-gallery.wg-cols-1 { grid-template-columns: 1fr; }
.wg-gallery.wg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.wg-gallery.wg-cols-3 { grid-template-columns: repeat(3, 1fr); }

.wg-gthumb { position: relative; display: block; padding: 0; border:none; background:none; cursor: pointer; overflow: hidden; border-radius: var(--wg-radius); transition: transform .16s var(--wg-ease-spring, ease); }
.wg-gthumb:hover img { filter: brightness(1.04); }
.wg-gthumb:active { transform: scale(0.97); }
.wg-gthumb img { transition: filter .2s ease; }
@media (prefers-reduced-motion: reduce) { .wg-gthumb, .wg-gthumb img { transition: none; } .wg-gthumb:active { transform: none; } }
.wg-gallery.wg-cols-1 .wg-gthumb img {
  width: 100%; max-height: 460px; object-fit: contain;
  background:var(--wg-surface-2); border:1px solid var(--wg-border); border-radius: var(--wg-radius);
}
.wg-gallery:not(.wg-cols-1) .wg-gthumb { aspect-ratio: 1 / 1; }
.wg-gallery:not(.wg-cols-1) .wg-gthumb img {
  width: 100%; height: 100%; object-fit: cover;
  border:1px solid var(--wg-border); border-radius: var(--wg-radius);
}
.wg-gmore {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:rgba(0, 0, 0, 0.5); color:var(--wg-on-scrim); font-size: 1.4rem; font-weight: 700;
  border-radius: var(--wg-radius);
}

/* Lightbox */

.wg-post-type {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:var(--wg-color-dark);
  background:var(--wg-tint);
  padding: 3px 8px;
  border-radius: 999px;
}
.wg-post-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 6px; }
.wg-post-price { font-size: 1.25rem; font-weight: 700; color:var(--wg-color-dark); }
/* Price line + an above-the-fold "Message seller" button on the right, so the
   contact action is reachable without scrolling to the CTA lower down. */
.wg-post-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.wg-post-price-row .wg-btn { flex: 0 0 auto; }

/* Login-required modal (guests clicking "Message seller"). */
.wg-login-modal-body { color:var(--wg-muted); margin: 0 0 16px; line-height: 1.5; }
.wg-login-modal-actions { display: flex; flex-direction: column; gap: 8px; }
.wg-post-meta { color:var(--wg-muted); font-size: 0.85rem; margin-bottom: 16px; }
.wg-post-body { line-height: 1.6; white-space: normal; margin-bottom: 16px; }
.wg-post-comm { font-size: 0.9rem; color:var(--wg-muted); margin-bottom: 16px; }

.wg-post-seller {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top:1px solid var(--wg-border);
}
.wg-post-seller .wg-avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%; object-fit: cover;
  border:1px solid var(--wg-border);
}

/* Location block */
.wg-post-loc { margin: 8px 0 16px; }
.wg-post-loc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; font-size: 0.9rem;
}
.wg-post-loc-text { color:var(--wg-text); }
.wg-post-map {
  width: 100%; height: 280px;
  border:1px solid var(--wg-border); border-radius: var(--wg-radius);
}

/* Owner notice: this post is hidden from public feeds */
.wg-hidden-note {
  background:var(--wg-surface); border:1px solid var(--wg-border); color:var(--wg-muted);
  padding: 10px 12px; border-radius: var(--wg-radius);
  font-size: 0.9rem; margin-bottom: 12px;
}
.wg-review-note {
  padding: 10px 12px; border-radius: var(--wg-radius);
  font-size: 0.9rem; margin-bottom: 12px; font-weight: 600;
}
.wg-review-pending { background:var(--wg-warn-tint); border:1px solid #f0dcae; color:var(--wg-warn-ink); }
.wg-review-rejected { background:var(--wg-danger-tint); border:1px solid #f3bcbc; color:var(--wg-danger-ink); }

/* Admin "flagged as fake" disclaimer banner */
.wg-disclaimer {
  background:var(--wg-danger-tint); border:1px solid #f3b6b6; color:var(--wg-danger-ink);
  padding: 10px 12px; border-radius: var(--wg-radius);
  font-size: 0.9rem; font-weight: 600; margin-bottom: 12px;
}

/* Sold/closed marketplace posts: status indicator instead of a Message button */
.wg-btn-closed {
  width: auto; background:#9a9a9a; border-color:#9a9a9a; color:var(--wg-on-scrim);
  cursor: default; opacity: 1; text-transform: capitalize;
}
.wg-btn-closed:hover { background:#9a9a9a; border-color:#9a9a9a; box-shadow: none; transform: none; }

/* Share fallback menu */
.wg-share-list { display: flex; flex-direction: column; gap: 8px; }
.wg-share-list .wg-btn { width: 100%; }

/* Moderation bar: admin pin + report (modal/report styles are global in main.css) */
.wg-modbar { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.wg-modbar .wg-btn { width: auto; }

/* Post stats line: date + saved count + (marketplace) chatting count */
.wg-post-stats {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  color:var(--wg-muted); font-size: 0.8rem; margin: 0 0 14px;
}
.wg-post-date { white-space: nowrap; }
.wg-post-edited { font-style: italic; }
/* Anonymous author display */
.wg-avatar-anon { display: inline-flex; align-items: center; justify-content: center; background:var(--wg-border); color:#888; font-weight: 700; }
.wg-anon-tag { display: inline-block; margin-left: 6px; font-size: 0.72rem; color:var(--wg-muted); font-style: italic; }
/* ── Translate (left) + Save/Share (right), on ONE line ────────────────────
   nowrap, not wrap: the row must hold a single line even on a 360px phone, so
   the pieces give up width instead of dropping to a second row. The translate
   block is the flexible one (min-width:0 lets its select shrink); the two
   action buttons keep their size. See the mobile block below for the last
   resort, which is dropping their text labels. */
.wg-post-toolrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  margin: 0 0 12px;
}
.wg-post-toolrow .wg-post-translate { margin: 0; min-width: 0; flex: 0 1 auto; flex-wrap: nowrap; }
.wg-post-toolrow .wg-translate-lang { min-width: 0; flex: 0 1 auto; }
.wg-post-toolrow #wg-translate-btn { flex: 0 0 auto; white-space: nowrap; }
/* Pushed right whether or not the translate block is showing. */
.wg-post-toolrow .wg-post-actions { margin-left: auto; flex: 0 0 auto; }

/* Community tags, folded. */
.wg-post-comm-fold { margin: 0 0 14px; }
.wg-post-comm-fold > summary {
  cursor: pointer; font-size: 0.82rem; color:var(--wg-muted);
  padding: 6px 0; list-style: none;
}
.wg-post-comm-fold > summary::-webkit-details-marker { display: none; }
.wg-post-comm-fold > summary::after { content: ' ▾'; }
.wg-post-comm-fold[open] > summary::after { content: ' ▴'; }
.wg-post-comm-fold .wg-post-comm { margin: 4px 0 0; }

/* Author at the top of a community post. */
.wg-post-seller-top { border-top:none; padding-top: 0; margin-bottom: 10px; }

/* ── Save + share: icons, no words, on every width ─────────────────────────
   A bookmark and a share glyph do not need labelling, and dropping the words
   is what keeps this row on one line in all nine languages instead of only in
   the short ones. Each button carries a title= (kept in step with the saved
   state by toggleSave), so it is still named on hover and to a screen reader.
   Equal width and height, so the inherited 999px radius draws a circle around
   the icon rather than a pill with a gap where the word used to be. */
.wg-post-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wg-post-actions .wg-eng-label { display: none; }
.wg-post-actions .wg-engage-btn {
  width: 34px; height: 34px; padding: 0; justify-content: center; gap: 0;
}
.wg-post-actions .wg-engage-btn .wg-ico { width: 17px; height: 17px; }

/* ── Phone: shrink what is left of the row ─────────────────────────────────
   Save and Share are already icons at every width (above), so all that is
   left to squeeze here is the translate button and its language select. */
@media (max-width: 640px) {
  .wg-post-toolrow { gap: 6px; }
  .wg-post-toolrow .wg-post-translate { gap: 6px; }
  /* The button gives up width first, and is capped so a long translation of
     "Translate" can never push the row over. */
  .wg-post-toolrow #wg-translate-btn {
    flex: 0 1 auto; min-width: 0; max-width: 46%; overflow: hidden;
    padding: 6px 9px; font-size: 0.78rem;
  }
  /* The select has a floor: squashed to 44px it stops saying which language you
     are translating into, which is the whole point of it. */
  .wg-post-toolrow .wg-translate-lang { padding: 4px 6px; font-size: 0.78rem; min-width: 76px; max-width: 96px; }
  .wg-post-actions { gap: 6px; }
  .wg-post-actions .wg-engage-btn { width: 32px; height: 32px; }
  /* Report keeps its icon; the word goes on a narrow screen. */
  .wg-engage-report .wg-eng-label { display: none; }
}

/* Admin edit-history modal */
.wg-edithist { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
/* Admin flag-for-review modal */
#wg-flag-text { width: 100%; padding: 10px 12px; font: inherit; border:1px solid var(--wg-border); border-radius: 10px; resize: vertical; margin-bottom: 12px; }
#wg-flag-modal .wg-btn { width: auto; }
.wg-edithist-item { border:1px solid var(--wg-border); border-radius: var(--wg-radius); padding: 10px 12px; }
.wg-edithist-meta { font-size: 0.75rem; color:var(--wg-muted); }
.wg-edithist-prev { font-size: 0.7rem; color:var(--wg-muted); margin: 6px 0 2px; }
.wg-edithist-title { font-weight: 600; }
.wg-edithist-body-text { white-space: pre-wrap; font-size: 0.9rem; }
.wg-edithist-field { font-size: 0.85rem; color:var(--wg-text); margin-top: 2px; }
.wg-stat { display: inline-flex; align-items: center; gap: 4px; }
.wg-stat .wg-ico { width: 15px; height: 15px; }
/* Admin: clickable chat-count → who-is-chatting modal */
.wg-stat-btn { background:none; border:0; cursor: pointer; font: inherit; color:var(--wg-color-dark); padding: 0; text-decoration: underline dotted; }
.wg-stat-btn:hover { color:var(--wg-color); }
.wg-chatters-row { padding: 10px 0; border-bottom:1px solid var(--wg-border-soft); }
.wg-chatters-row:last-child { border-bottom:0; }
.wg-chatters-ppl { font-size: 0.95rem; }
.wg-chatters-ppl a { color:var(--wg-color-dark); font-weight: 600; }
.wg-chatters-sep { color:var(--wg-muted); margin: 0 2px; }
.wg-chatters-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background:var(--wg-tint); color:var(--wg-muted); padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
.wg-chatters-meta { font-size: 0.8rem; color:var(--wg-muted); margin-top: 3px; }

/* Shared small helpers (used on this page) */
.wg-note { font-size: 0.9rem; color:var(--wg-muted); margin: 8px 0 0; }
.wg-linkbtn {
  background:none; border:none; padding: 0; cursor: pointer;
  font: inherit; color:var(--wg-color); font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .wg-linkbtn:hover { text-decoration: underline; }
}

/* Engagement bar */
.wg-engage {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 0; border-top:1px solid var(--wg-border);
}
.wg-engage-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border:1px solid var(--wg-border); border-radius: 999px;
  background:var(--wg-raised); color:var(--wg-text); font: inherit; font-weight: 600;
  font-size: 0.85rem; cursor: pointer; line-height: 1;
  transition: background .16s ease, border-color .16s ease, color .16s ease,
              transform .14s var(--wg-ease-spring, ease), box-shadow .16s ease;
}
.wg-engage-btn:hover { background:var(--wg-surface); text-decoration: none; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(16,24,40,0.08); }
.wg-engage-btn:active { transform: scale(0.92); }
.wg-engage-btn .wg-ico { width: 18px; height: 18px; }
.wg-engage-btn[disabled] { opacity: 0.6; cursor: default; transform: none; }
.wg-like-btn.is-on { color:var(--wg-accent-red); border-color:var(--wg-accent-red); animation: wg-like-pop .32s var(--wg-ease-spring, ease); }
.wg-like-btn.is-on .wg-ico { fill: var(--wg-accent-red); stroke: var(--wg-accent-red); }
@keyframes wg-like-pop { 0% { transform: scale(0.85); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .wg-engage-btn { transition: none; } .wg-engage-btn:hover, .wg-engage-btn:active { transform: none; } .wg-like-btn.is-on { animation: none; } }
.wg-save-btn.is-on { color:var(--wg-color-dark); border-color:var(--wg-color); }
.wg-save-btn.is-on .wg-ico { fill: var(--wg-color); stroke: var(--wg-color); }

/* Report: same row as the like and comment counts, pushed to the far right.
   Muted and borderless so it never competes with the two counts beside it, and
   is not a button you hit by accident reaching for Like. */
.wg-engage-report {
  margin-left: auto; border-color:transparent; background:none;
  color:var(--wg-muted); font-weight: 600;
}
.wg-engage-report:hover { color:var(--wg-accent-red); background:var(--wg-surface); }
.wg-engage-report.is-reported { color:var(--wg-color-dark); font-weight: 700; }

/* Comments */
.wg-comments { margin-top: 8px; }
.wg-comments-title { font-size: 1rem; margin: 0 0 10px; }
#wg-load-earlier { display: inline-block; margin-bottom: 10px; }
.wg-comment { display: flex; gap: 10px; padding: 10px 0; border-top:1px solid var(--wg-border); }
.wg-comment-av {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  background:var(--wg-color); color:var(--wg-on-brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem; overflow: hidden;
}
.wg-comment-av img { width: 100%; height: 100%; object-fit: cover; }
.wg-comment-main { flex: 1; min-width: 0; }
.wg-comment-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wg-comment-nick { font-weight: 700; font-size: 0.9rem; }
.wg-comment-when { color:var(--wg-muted); font-size: 0.72rem; }
.wg-comment-body { font-size: 0.92rem; line-height: 1.5; margin: 3px 0 6px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.wg-comment-actions { display: flex; align-items: center; gap: 14px; }
.wg-clike, .wg-cdelete, .wg-creply {
  background:none; border:none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.78rem; color:var(--wg-muted);
}
.wg-clike { display: inline-flex; align-items: center; gap: 4px; }
.wg-clike .wg-clike-ico { font-size: 0.95rem; line-height: 1; }
.wg-clike.is-on { color:var(--wg-accent-red); }
.wg-clike[disabled] { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .wg-cdelete:hover { color:var(--wg-accent-red); text-decoration: underline; }
}
.wg-creply { font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .wg-creply:hover { color:var(--wg-color-dark); text-decoration: underline; }
}

/* Optimistic (Facebook-style) posting: the bubble shows immediately, dimmed,
   with a spinner, then solidifies when the server confirms. */
.wg-comment--pending { opacity: 0.62; }
.wg-comment-av--pending { background:var(--wg-border); }
.wg-comment-status { display: inline-flex; align-items: center; gap: 5px; }
.wg-comment-spin {
  width: 11px; height: 11px; border-radius: 50%; display: inline-block;
  border:2px solid var(--wg-border); border-top-color:var(--wg-color);
  animation: wg-comment-spin 0.7s linear infinite;
}
@keyframes wg-comment-spin { to { transform: rotate(360deg); } }
.wg-comment.is-failed { opacity: 1; }
.wg-comment.is-failed .wg-comment-body { color:var(--wg-muted); }
.wg-comment-retry {
  background:none; border:none; padding: 0; cursor: pointer; font: inherit;
  font-size: 0.72rem; font-weight: 600; color:var(--wg-accent-red); text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) { .wg-comment-spin { animation: none; } }

/* Replies: indented under their parent */
.wg-comment-replies { margin-left: 46px; }
.wg-comment--reply .wg-comment-av { width: 28px; height: 28px; font-size: 0.8rem; }
.wg-comment--reply { border-top:1px dashed var(--wg-border); }
.wg-comments-more { width: auto; margin: 4px 0 14px; }

/* ── Comment form: docked on every width ───────────────────────────────────
   Opening a community post and commenting used to mean scrolling past every
   existing comment to reach the box. Docked, it is there the moment the post
   opens. One row (field + send) rather than a stacked block, so it costs as
   little height as possible.

   Desktop floats it as a card the width of the reading column (.wg-post is
   640px, centred), so it lines up with the post above it instead of spanning
   an empty 1360px viewport. left/right 0 + auto margins centre it without a
   transform. Mobile spans the full width and sits above the bottom nav. */
.wg-comment-form {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  position: fixed; z-index: 22;
  left: 0; right: 0; margin: 0 auto;
  bottom: 16px;
  width: min(640px, 92vw);
  padding: 8px 10px;
  background:var(--wg-bg);
  border:1px solid var(--wg-border); border-radius: 16px;
  box-shadow: 0 6px 22px rgba(16, 24, 40, 0.14);
}
.wg-comment-form-row { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; }
/* "Replying to @name" strip above the composer — the reply fills THIS field,
   never a duplicate form under the comment. */
.wg-reply-context {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 6px 2px; font-size: 0.8rem; color:var(--wg-muted);
}
.wg-reply-context-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-reply-context-txt b { color:var(--wg-color-dark); font-weight: 700; }
.wg-reply-cancel {
  flex: none; background:none; border:none; cursor: pointer;
  font-size: 1.15rem; line-height: 1; color:var(--wg-muted); padding: 2px 6px;
}
.wg-reply-cancel:hover { color:var(--wg-accent-red); }
/* The composer grows with the comment (js/post.js growInput) up to this
   ceiling, then scrolls inside itself. 230px is about nine lines at the sizing
   below: 16px text, 1.45 line-height, 9px padding top and bottom, 1px borders.
   Tall enough to write a real answer without losing sight of it, short enough
   that the composer never eats the thread it belongs to.

   The radius is 22px rather than a pill: at one row the box is ~43px tall so
   22px still reads as fully rounded, and once it grows it becomes a rounded
   rectangle instead of a stretched capsule. 16px is not a style choice - iOS
   Safari zooms the page on focus below that, and does not zoom back out. */
.wg-comment-form textarea {
  flex: 1; min-width: 0; resize: none;
  max-height: var(--wg-comment-max, 230px);
  overflow-y: hidden;               /* growInput turns this on at the ceiling */
  padding: 9px 12px; font: inherit; font-size: 16px; line-height: 1.45;
  border:1px solid var(--wg-border); border-radius: 22px;
}
/* flex-end, not stretch. The row aligns to the bottom, but the button carried
   align-self: stretch and so matched the field's height exactly - harmless
   while the field was a fixed single row, and a 230px-tall Comment button once
   the field started growing. It now keeps one height and sits on the bottom
   edge, beside the last line being typed.

   min-height is the resting height of the single-row field (16px text, 1.45
   line-height, 9px padding, 1px borders = 43px), so the pair still reads as
   one control before anything is typed. Its own padding alone would leave the
   button 4px short and looking slightly sunk. Keep the two in step if the
   field's type size or padding ever changes. */
.wg-comment-form .wg-btn {
  flex: none; align-self: flex-end; width: auto;
  min-height: 43px; padding: 9px 18px; border-radius: 999px;
}
/* Room for the docked bar: under the last comment, and under the footer, which
   the floating card would otherwise cover once you reach the end of the page.

   The reserve is the composer's MEASURED height (--wg-composer-h, set by
   js/post.js) plus its offset from the bottom, not a constant: the field grows
   to 230px as you type, and a fixed reserve left the last comment stranded
   underneath the composer with no way to scroll it clear. */
.wg-comments { padding-bottom: 8px; }
.wg-post-page-has-composer #comments { padding-bottom: calc(var(--wg-composer-h, 60px) + 32px); }
.wg-post-page-has-composer .wg-footer { padding-bottom: calc(var(--wg-composer-h, 60px) + 40px); }

@media (max-width: 640px) {
  .wg-comment-form {
    width: auto; padding: 8px 12px;
    /* Sit exactly on top of the bottom bar. --wg-bottom-inset-center is the
       measured room at the bottom of the screen (js/main.js), already counting
       the padding the bar gives itself for the home indicator and the LifePass
       dome, which this composer spans the full width of and so must clear.
       The hardcoded 64px it replaced was right in a browser tab and wrong in
       the installed PWA, where the thread showed through the gap. The fallback
       applies only before the script runs. */
    bottom: 64px;
    bottom: var(--wg-bottom-inset-center, calc(64px + env(safe-area-inset-bottom, 0px)));
    border:none; border-top:1px solid var(--wg-border); border-radius: 0;
    box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.08);
  }
  /* The mobile keyboard does NOT shrink the layout viewport on Android, so a
     position:fixed composer stays where it was — behind the keyboard, with the
     member typing into a box they cannot see. js/post.js measures the keyboard
     with visualViewport and publishes it as --wg-kb; the bottom bar is hidden
     behind the keyboard anyway, so its 64px offset is dropped at the same time.
     Browsers that support interactive-widget=resizes-content resize the layout
     viewport themselves and report an inset of 0, so this never double-shifts. */
  .wg-kb-open .wg-comment-form { bottom: var(--wg-kb, 0px); }
  /* Reserve the composer's whole footprint: its own height PLUS the bottom bar
     it floats above. The old flat 76px only covered the bar, so the last ~48px
     of the thread sat permanently under the composer. */
  .wg-post-page-has-composer #comments {
    padding-bottom: calc(var(--wg-composer-h, 60px) + var(--wg-bottom-inset-center, calc(64px + env(safe-area-inset-bottom, 0px))) + 16px);
  }
}

/* Intermediary disclaimer on marketplace post detail */
.wg-post-disclaimer {
  font-size: 0.8rem; line-height: 1.5; color:var(--wg-muted);
  background:var(--wg-surface); border:1px solid var(--wg-border); border-radius: var(--wg-radius);
  padding: 10px 12px; margin: 10px 0 14px;   /* sits just below the Message-seller button */
}

/* Structured job/housing details */
.wg-post-details { margin: 10px 0 0; display: grid; gap: 4px; }
.wg-detail-row { display: flex; gap: 8px; font-size: 0.9rem; }
.wg-detail-row dt { flex: none; min-width: 120px; color:var(--wg-muted); margin: 0; }
.wg-detail-row dd { margin: 0; font-weight: 600; }

/* Rich-text post body: safe lightweight markdown (headings, lists, quotes, links) */
.wg-rt a { color:var(--wg-color); text-decoration: underline; word-break: break-word; }
.wg-rt a.wg-tag { text-decoration: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .wg-rt a.wg-tag:hover { text-decoration: underline; }
}
.wg-rt strong { font-weight: 700; }
.wg-rt em { font-style: italic; }
.wg-rt .wg-rt-h { margin: 16px 0 6px; line-height: 1.3; color:var(--wg-text); }
.wg-rt h3.wg-rt-h { font-size: 1.15rem; }
.wg-rt h4.wg-rt-h { font-size: 1.05rem; }
.wg-rt h5.wg-rt-h { font-size: 0.98rem; }
.wg-rt .wg-rt-list { margin: 6px 0 6px; padding-left: 22px; }
.wg-rt .wg-rt-list li { margin: 2px 0; }
.wg-rt .wg-rt-quote { margin: 8px 0; padding: 6px 12px; border-left:3px solid var(--wg-color); background:var(--wg-tint); color:var(--wg-text); border-radius: 0 8px 8px 0; }
.wg-rt .wg-rt-hr { border:0; border-top:1px solid var(--wg-border); margin: 14px 0; }

/* Both-ends sale confirmation (buyer confirms → releases seller points) */
.wg-confirm-buy { margin-top: 12px; padding: 12px 14px; border:1px solid var(--wg-color); border-radius: var(--wg-radius); background:var(--wg-tint); }
.wg-confirm-buy-q { margin: 0 0 10px; font-size: 0.92rem; }
.wg-confirm-buy .wg-btn { width: auto; }
.wg-confirm-done { color:var(--wg-color-dark); font-weight: 600; }

/* On-demand AI translation control */
.wg-post-translate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; }
.wg-translate-lang { padding: 4px 8px; border:1px solid var(--wg-border); border-radius: var(--wg-radius); background:var(--wg-bg); font-size: 0.85rem; }
.wg-translate-tag { font-size: 0.75rem; font-weight: 600; color:#3a4bd0; background:var(--wg-info-tint); padding: 2px 8px; border-radius: 999px; }

/* ── [[btn:/path|Label]] call-to-action buttons in a post body ──────────
   Internal links only (enforced in wg_richtext). Two sizes: the default for
   an inline "here's the tool" nudge, and .wg-rt-btn-lg for the end-of-post
   call to action. */
/* Flex rather than text-align so two buttons written on consecutive lines sit
   side by side, and wrap onto their own lines when the screen is too narrow.
   A single button centres exactly as it did before. */
.wg-rt-btnwrap {
  margin: 16px 0; display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 10px;
}
.wg-rt-btnwrap.is-lg { margin: 22px 0 6px; }
.wg-rt .wg-rt-btn {
  /* .wg-btn is width:100% (mobile-first), so the small variant has to opt out
     explicitly or it renders exactly as wide as the large one. */
  display: inline-flex; width: auto; max-width: 100%;
  text-decoration: none; font-weight: 700;
  padding: 10px 20px; border-radius: 999px; color:var(--wg-on-scrim);
  transition: transform .14s var(--wg-ease-spring), box-shadow var(--wg-dur) ease;
}
.wg-rt .wg-rt-btn:hover { text-decoration: none; box-shadow: var(--wg-shadow-hover); }
.wg-rt .wg-rt-btn:active { transform: scale(.97); }
.wg-rt .wg-rt-btn:focus-visible { outline:none; box-shadow: var(--wg-focus-ring); }
.wg-rt .wg-rt-btn-lg {
  display: flex; width: 100%; padding: 16px 22px;
  font-size: 1.05rem; border-radius: 14px;
  box-shadow: var(--wg-shadow-card);
}
@media (prefers-reduced-motion: reduce) {
  .wg-rt .wg-rt-btn { transition: none; }
  .wg-rt .wg-rt-btn:active { transform: none; }
}

/* ── [[tldr]] … [[/tldr]] compact summary block ─────────────────────────
   Deliberately quieter than the body: smaller, italic, tinted. The CTA
   inside it is a nudge, not the main action — the big button lives at the
   end of the post — so it is scaled down here. */
.wg-rt-tldr {
  display: block;
  font-size: .84rem; font-style: italic; line-height: 1.6;
  color:var(--wg-muted);
  background:var(--wg-tint);
  border:1px solid var(--wg-border-soft);
  border-radius: 12px;
  padding: 12px 14px; margin: 14px 0;
}
.wg-rt-tldr .wg-rt-h { font-size: .82rem; font-style: normal; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color:var(--wg-color-dark);
  margin: 0 0 6px; }
.wg-rt-tldr .wg-rt-list { margin: 0 0 6px; padding-left: 18px; }
.wg-rt-tldr .wg-rt-list li { margin-bottom: 3px; }
.wg-rt-tldr strong { font-weight: 700; font-style: normal; }
.wg-rt-tldr .wg-rt-btnwrap { margin: 10px 0 2px; }
/* A deliberately small nudge button. */
.wg-rt .wg-rt-tldr .wg-rt-btn {
  font-size: .78rem; font-style: normal;
  padding: 6px 14px; border-radius: 999px;
}

/* Accepted answer — the reply the asker says resolved their question. It leads
   the thread wherever it falls chronologically, and its "Accepted answer"
   label says so. Never a coloured left bar (design rule). */
.wg-caccepted {
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color:var(--wg-color-ink);
  white-space: nowrap;
}
.wg-caccept {
  background:none;
  border:0;
  padding: 0;
  font-size: 0.78rem;
  color:var(--wg-muted);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .wg-caccept:hover { color:var(--wg-text); text-decoration: underline; }
}
.wg-caccept.is-on { color:var(--wg-color-ink); font-weight: 600; }

/* Measured turnaround shown beside a pending notice. Muted: it is context, not
   a promise, and it is omitted entirely when we have too little data to say. */
.wg-review-eta { opacity: 0.85; font-style: italic; }

/* Vehicle safety notice — shown to buyers on the listing and to sellers on the
   form. A car is the largest sum most members hand to a stranger here, and
   ownership transfer is paperwork a used phone never has. Deliberately not
   styled as a scary red alert: it should be read, not dismissed. */
.wg-vehicle-warn {
  margin: 12px 0;
  padding: 10px 12px;
  border:1px solid var(--wg-border-soft);
  background:var(--wg-surface);
  border-radius: 10px;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* "Community helper" — earned by having answers accepted by several different
   people. Sits beside the name so it reads as "this person's answers have
   worked before", which is what makes a stranger trust the reply. Muted gold,
   not a loud award: it should inform, not gamify. */
.wg-chelper {
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color:var(--wg-warn-ink);
  white-space: nowrap;
}

/* The asker replying under their own anonymous post: a masked name (never a
   profile link) plus a quiet tag, so the thread still reads as a conversation
   without saying who they are. */
.wg-comment-nick.is-anon {
  color:var(--wg-text-muted);
  font-style: italic;
}
.wg-casker {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background:var(--wg-surface-2);
  color:var(--wg-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}
/* One engagement line on community posts: like + comments + save + share */
.wg-engage { flex-wrap: nowrap; }
.wg-engage .wg-engage-btn { flex: 0 0 auto; }

/* ── Community post: compact layout (design C, approved 2026-08-19) ────────
   The post is the only thing on this page carrying visual weight. The byline
   is small, the counts are plain muted text rather than buttons, the three
   controls are bare icons, and every secondary tool sits behind the ⋯ menu.
   Nothing here should compete with what the member came to read. */
.wg-cby { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 8px; }
.wg-cby .wg-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; border:1px solid var(--wg-border); }
.wg-cby .wg-avatar-anon { display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.wg-cby-who { flex: 1 1 auto; min-width: 92px; display: flex; flex-direction: column; gap: 1px; }
.wg-cby-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wg-cby-name { font-weight: 600; font-size: 0.88rem; color:var(--wg-color-dark); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .wg-cby-name:hover { text-decoration: underline; }
}
.wg-cby-sub { font-size: 0.7rem; color:var(--wg-muted); }
.wg-cby .wg-anon-tag { margin-left: 0; }
.wg-cby-type { flex: none; margin: 0 0 0 auto; }
.wg-cby-title { font-size: 1.2rem; margin: 2px 0 6px; }
/* Translate keeps its byline place, sized so it never outweighs the name. */
.wg-cby .wg-post-translate { margin: 0; flex: 0 1 auto; min-width: 0; gap: 6px; flex-wrap: nowrap; }
.wg-cby #wg-translate-btn { padding: 4px 9px; font-size: 0.74rem; white-space: nowrap; }
.wg-cby .wg-translate-lang { padding: 3px 6px; font-size: 0.74rem; max-width: 108px; min-width: 0; }

/* The one control line. */
.wg-cbar {
  display: flex; align-items: center; gap: 15px; flex-wrap: nowrap;
  padding: 8px 0 0; margin: 0 0 6px; border-top:1px solid var(--wg-border);
}
.wg-cstat {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  background:none; border:0; padding: 0; font: inherit; font-size: 0.76rem;
  line-height: 1; color:var(--wg-muted); cursor: pointer; text-decoration: none;
}
.wg-cstat .wg-ico { width: 15px; height: 15px; }
.wg-cstat.is-static { cursor: default; }
.wg-cstat:hover:not(.is-static) { color:var(--wg-text); text-decoration: none; }
.wg-cstat.wg-like-btn.is-on { color:var(--wg-accent-red); }
.wg-cstat.wg-like-btn.is-on .wg-ico { fill: var(--wg-accent-red); stroke: var(--wg-accent-red); }
.wg-cbar-r { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex: none; }
.wg-cicon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border:0; border-radius: 999px;
  background:none; color:var(--wg-text); cursor: pointer;
}
.wg-cicon:hover { background:var(--wg-surface); }
.wg-cicon .wg-ico { width: 16px; height: 16px; }
.wg-save-btn.wg-cicon.is-on { color:var(--wg-color-dark); }
.wg-save-btn.wg-cicon.is-on .wg-ico { fill: var(--wg-color); stroke: var(--wg-color); }

/* ⋯ menu — a <details>, so it opens with no JS at all; post.js only adds the
   two closing behaviours a menu is expected to have (outside click, Escape). */
.wg-cmenu { position: relative; flex: none; }
.wg-cmenu > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  color:var(--wg-text); cursor: pointer; list-style: none;
}
.wg-cmenu > summary::-webkit-details-marker { display: none; }
.wg-cmenu > summary::marker { content: ''; }
.wg-cmenu > summary:hover, .wg-cmenu[open] > summary { background:var(--wg-surface); }
.wg-cmenu > summary .wg-ico { width: 16px; height: 16px; }
.wg-cmenu-p {
  position: absolute; right: 0; top: 34px; z-index: 40; min-width: 196px;
  display: flex; flex-direction: column; padding: 6px;
  background:var(--wg-bg); border:1px solid var(--wg-border);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
}
.wg-cmenu-i {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; margin: 0; border:0; border-radius: 8px; background:none;
  font: inherit; font-size: 0.85rem; font-weight: 400; color:var(--wg-text);
  text-align: left; text-decoration: none; cursor: pointer;
}
.wg-cmenu-i:hover { background:var(--wg-surface); text-decoration: none; }
.wg-cmenu-i .wg-ico { width: 15px; height: 15px; flex: none; color:var(--wg-muted); }
.wg-cmenu-i.is-reported { color:var(--wg-color-dark); font-weight: 600; }

@media (max-width: 420px) {
  .wg-cbar { gap: 12px; }
  .wg-cby #wg-translate-btn { padding: 3px 7px; font-size: 0.58rem; }
}

/* Badges in the byline are labels, not headlines: both were carrying the
   weight of a button next to a name set at 0.88rem. Scoped to the post byline
   so the profile page keeps its full-size verified badge, where that badge IS
   the point. Higher specificity than the base rules, so load order is moot. */
.wg-cby .wg-badge {
  margin-left: 0; padding: 1px 6px;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.01em;
}
.wg-cby .wg-cby-type {
  padding: 2px 7px;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.03em;
}

/* The old engagement row hid this label on a phone, where Report was an icon
   with a title= and no room for the word. In the menu the word IS the item, so
   it always shows — higher specificity than that media-query rule. */
.wg-cmenu-p .wg-cmenu-i .wg-eng-label { display: inline; }

/* Translate is an offer, not an action the reader came for: sized with the
   badges beside it rather than as a button. Kept a touch taller than the text
   so it stays comfortably tappable on a phone. */
.wg-cby #wg-translate-btn { padding: 3px 8px; font-size: 0.6rem; gap: 4px; font-weight: 600; }
.wg-cby #wg-translate-btn .wg-ico { width: 13px; height: 13px; }
.wg-cby .wg-translate-lang { padding: 2px 5px; font-size: 0.6rem; max-width: 92px; }
.wg-cby .wg-translate-tag { padding: 1px 6px; font-size: 0.58rem; }
.wg-cby #wg-translate-orig { font-size: 0.6rem; }

/* The byline type chip is a link into the filtered community list. */
a.wg-cby-type { text-decoration: none; }
a.wg-cby-type:hover { background:var(--wg-tint); text-decoration: none; }

/* Seller classification + intermediary notice (marketplace compliance,
   2026-08-31). Compact: a small neutral chip beside the seller, and one quiet
   line of text. Not colour-dependent - the wording carries the meaning. */
.wg-seller-type {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  border: 1px solid var(--wg-border); border-radius: 999px;
  font-size: .72rem; font-weight: 600; color: var(--wg-muted);
  white-space: nowrap; vertical-align: middle;
}
.wg-seller-type-business { border-color: var(--wg-info-ink); color: var(--wg-info-ink); }
.wg-intermediary-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 0; padding: 10px 12px;
  background: var(--wg-surface); border-radius: 12px;
  font-size: .82rem; line-height: 1.5; color: var(--wg-muted);
}
/* One flex child holds the sentence AND the link, so the link flows after the
   text instead of becoming a second column beside it. min-width:0 lets it
   shrink below its content width, which a flex item will not do by default. */
.wg-intermediary-note-t { flex: 1 1 auto; min-width: 0; }
/* No nowrap: on a narrow screen the label has to be allowed to wrap. Keeping
   it whole was what stopped the text column from ever getting wider. */
.wg-intermediary-note a { color: var(--wg-color-ink); font-weight: 600; }
.wg-intermediary-note .wg-ico-in { flex: none; margin-top: 2px; }

/* What to expect from this seller, shown before the buyer writes. Quiet by
   design: it is information, not a rating, and most of the time it is good
   news. The "not active recently" variant is the one that has to be legible
   enough to actually change a decision. */
.wg-seller-signal {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 0 0; font-size: .8rem; color: var(--wg-muted);
}
.wg-seller-signal svg { flex: none; width: 14px; height: 14px; }
.wg-seller-signal-seen { color: var(--wg-warn-ink); }

/* "Is this still available?" — owner only. */
.wg-freshness {
  margin: 14px 0 0; padding: 14px 16px;
  border: 1px solid var(--wg-warn-ink); border-radius: 14px;
  background: var(--wg-warn-tint);
}
.wg-freshness-q { margin: 0; font-weight: 650; font-size: .95rem; color: var(--wg-warn-ink); }
.wg-freshness-why { margin: 4px 0 0; font-size: .84rem; line-height: 1.5; color: var(--wg-warn-ink); opacity: .9; }
.wg-freshness-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.wg-freshness-acts .wg-btn { flex: 1 1 auto; }
.wg-freshness-done { margin: 14px 0 0; }

/* Admin actions sheet (2026-09-08): the moderator's tools behind one button,
   as a list of the same rows the post overflow menu already uses. */
.wg-adminacts { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; }
.wg-adminacts .wg-cmenu-i { font-size: 0.95rem; padding: 12px 10px; border-radius: 10px; }
.wg-adminacts .wg-cmenu-i .wg-ico { width: 17px; height: 17px; }