/*
 * posts.css — styles for the posts + linear comments feature.
 *
 * Builds on the shared design system in application.css. Uses --fh-* tokens
 * so the message board stays cohesive with the warm cream/teal look.
 */

/* -------------------------------------------------------------------------- */
/* Index — post list                                                          */
/* -------------------------------------------------------------------------- */

.post-list {
  display: grid;
  gap: var(--fh-space-4);
}

.post-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fh-space-3);
}

.post-card-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

.post-card-title a {
  color: var(--fh-text);
  text-decoration: none;
}

.post-card-title a:hover {
  color: var(--fh-accent-dark);
}

.post-comment-count {
  flex: none;
  white-space: nowrap;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--fh-space-2);
  margin: var(--fh-space-3) 0;
  font-size: 0.9rem;
}

.post-meta-name {
  font-weight: 600;
  color: var(--fh-text);
}

.post-meta-dot {
  color: var(--fh-text-muted);
}

.post-excerpt {
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* Show — the conversation panel (one evolving thread, flat transcript)        */
/* -------------------------------------------------------------------------- */

/* The post and its replies render as one bordered panel — a single continuous
   conversation, not a card per contribution. It spans the full --fh-container
   width, matching its New/Edit compose form (both sit in .container), and uses
   the unified white --fh-surface so the eye reads reader and composer as one
   space (DESIGN.md §1, §2). The body prose is capped to a reading measure
   further down (.rt). Built with --fh-* tokens so it inherits dark mode later
   (#54); ships light-only. */
.thread-back {
  margin: 0 0 var(--fh-space-4);
}

.conversation {
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius);
  box-shadow: var(--fh-shadow);
  padding: var(--fh-space-6) var(--fh-space-8);
}

.thread-head {
  margin-bottom: var(--fh-space-2);
}

.doc-title {
  font-size: 2rem;
  line-height: 1.15;
  margin: 0 0 var(--fh-space-2);
}

.doc-sub {
  margin: 0;
  font-size: 0.92rem;
}

/* Each contribution (post, comment, composer) is separated from the previous by
   a hairline rule + a byline. The first contribution's rule is transparent. */
.contribution {
  position: relative;
}

.sep {
  border: 0;
  border-top: 1px solid var(--fh-border);
  margin: var(--fh-space-6) 0 var(--fh-space-5);
}

.contribution:first-of-type .sep {
  border-top-color: transparent;
  margin-top: var(--fh-space-5);
}

.byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--fh-space-4);
  font-size: 0.92rem;
}

.byline .who {
  font-weight: 700;
  color: var(--fh-text);
}

.byline .when,
.byline .dot {
  color: var(--fh-text-muted);
}

/* The original post carries one quiet "started it" tag. */
.tag-started {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--fh-accent-dark);
  background: var(--fh-accent-soft);
  padding: 2px 9px;
  border-radius: var(--fh-radius-pill);
}

.composer .byline .who {
  font-weight: 600;
  color: var(--fh-text-muted);
}

.no-comments {
  margin: 0 0 var(--fh-space-4);
}

.comment-form .form-actions {
  margin-top: var(--fh-space-3);
}

/* -------------------------------------------------------------------------- */
/* Quiet "…" overflow menu — per-contribution management actions (Edit/Delete) */
/* -------------------------------------------------------------------------- */

/* A CSS-only <details> dropdown (no JS controller) pinned to the entry's
   upper-right via margin-left:auto in the flex byline. It is invisible until the
   contribution is hovered or the menu is focused (keyboard-reachable via Tab,
   revealed by :focus-within), keeping a long transcript calm (DESIGN.md §3).
   Delete is muted-red TEXT (--fh-danger), never a filled button. */
.entry-menu {
  position: relative;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.contribution:hover .entry-menu,
.entry-menu:focus-within,
.entry-menu[open] {
  opacity: 1;
}

.entry-menu-trigger {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--fh-radius-sm);
  color: var(--fh-text-muted);
  line-height: 1;
  user-select: none;
}

.entry-menu-trigger::-webkit-details-marker {
  display: none;
}

.entry-menu-trigger:hover {
  background: var(--fh-surface-muted);
  color: var(--fh-text);
}

.entry-menu-list {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  margin-top: var(--fh-space-1);
  min-width: 140px;
  display: flex;
  flex-direction: column;
  padding: var(--fh-space-1);
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-sm);
  box-shadow: var(--fh-shadow);
}

/* The Delete <form> from button_to must not add its own block margin. */
.entry-menu-list form {
  margin: 0;
}

.entry-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--fh-space-2) var(--fh-space-3);
  border: 0;
  border-radius: var(--fh-radius-sm);
  background: transparent;
  color: var(--fh-text);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: none;
}

.entry-menu-item:hover {
  background: var(--fh-surface-muted);
  text-decoration: none;
}

.entry-menu-danger {
  color: var(--fh-danger);
}

/* -------------------------------------------------------------------------- */
/* Rich-text INPUT — Lexxy editor chrome (post form + comment forms)           */
/* -------------------------------------------------------------------------- */

/* Condense the toolbar by shrinking the button size. This redefines Lexxy's
   public `--lexxy-toolbar-button-size` theming token (default 2lh, set at :root
   in lexxy-variables.css) directly on the <lexxy-editor> element, so every
   descendant toolbar button inherits the smaller value from its nearest
   ancestor — no fork, no !important. The toolbar is a nowrap flex row, so
   smaller buttons simply raise the inline-fit threshold: fewer buttons spill
   into Lexxy's JS "…" overflow menu, which is otherwise untouched. The image
   button stays pinned via its `data-prevent-overflow` attribute — do not
   change that. Applies to both the post and comment editors (same element).
   Depends on Lexxy's PUBLIC token, not the Rails 8.1 monkey-patch seam; if a
   future Lexxy renames the token this silently reverts to the default size —
   visible, non-breaking. See the re-verify note in AGENTS.md. */
lexxy-editor {
  --lexxy-toolbar-button-size: 1.6lh; /* tune 1.5–1.75lh by eye */
}

/* Dark editor via the SAME public-token seam (issue #78). Lexxy has no native
   dark mode but derives every semantic colour from a small set of primitives in
   lexxy-variables.css: a grayscale --lexxy-color-ink* ramp, the canvas, and the
   accent tokens. Redefine those primitives scoped to <lexxy-editor> so the whole
   composer (canvas, ink, borders, links, selection) inherits app-parity dark
   values — no fork, no !important. We reuse the --fh-* tokens (already dark
   inside this media query) so the editor tracks the app palette from one source.
   Residues left as-is (legible, not worth a fork): the hardcoded GitHub-light
   syntax-highlight code-token hex and the rgba text-highlight palette. Same
   "re-verify after any Lexxy bump" caveat as the toolbar override above. */
@media (prefers-color-scheme: dark) {
  lexxy-editor {
    /* Invert the meaning of the grayscale ink ramp onto the app palette:
       ink (was darkest = text) → light text; lightest (was subtle bg) → dark bg. */
    --lexxy-color-ink: var(--fh-text);
    --lexxy-color-ink-medium: var(--fh-text-muted);
    --lexxy-color-ink-light: var(--fh-text-muted);
    --lexxy-color-ink-lighter: var(--fh-border);        /* hairlines/borders */
    --lexxy-color-ink-lightest: var(--fh-surface-muted); /* subtle + code bg */

    /* Editor canvas = the app's panel surface. */
    --lexxy-color-canvas: var(--fh-surface);

    /* Accent → the app's warm teal for parity (links, focus ring, selection). */
    --lexxy-color-accent-dark: var(--fh-accent-dark);
    --lexxy-color-accent-medium: var(--fh-accent);
    --lexxy-color-accent-light: var(--fh-accent-soft);
    --lexxy-color-accent-lightest: var(--fh-accent-soft);

    /* Derived semantic tokens are declared on :root (var(--lexxy-color-ink…))
       so indirection resolves at the :root site and the primitive overrides
       above never reach them — re-declare them here on the same seam. */
    --lexxy-color-text: var(--fh-text);
    --lexxy-color-text-subtle: var(--fh-text-muted);
    --lexxy-color-link: var(--fh-accent-dark);
    --lexxy-color-selected: var(--fh-accent-soft);
    --lexxy-color-selected-hover: var(--fh-accent-soft);

    /* Same :root-frozen indirection for the table-editor derived tokens. */
    --lexxy-color-table-header-bg: var(--fh-surface-muted);
    --lexxy-color-table-cell-selected-bg: var(--fh-accent-soft);
    --lexxy-color-table-cell-toggle: var(--fh-accent-soft);
  }
}

/* Table-editing toolbar — captain-requested palette alignment (folds into #74).
   The floating <lexxy-table-tools> widget (appears after you insert a table and
   focus a cell) carries the "N rows"/"N columns" stepper pills with their −/+
   buttons and a delete-table button. Lexxy paints all of these from its grayscale
   --lexxy-color-ink ramp; our #78 dark seam remaps that primitive onto the light
   --fh-text, so the pills render pale cream in dark (and read washed-out in light
   too). This is an interactive surface the earlier sweep never triggered (it needs
   a table inserted + a cell focused).

   Fix: restyle these controls to the app BUTTON palette in BOTH modes via app-owned
   overrides scoped to the editor — cleaner than remapping the structural ink ramp
   (which is grayscale, not a fill/on-fill pair). Stepper pills + their −/+ buttons
   and count get the primary-button treatment (--fh-accent fill / --fh-on-fill ink,
   matching Publish post / Post comment); the delete button reads destructive via
   --fh-danger. Everything routes through --fh-* tokens, which already flip per mode,
   so AA holds both ways. Scoped to `lexxy-table-tools` so the image/attachment/code
   floating tools are untouched; wins on specificity over Lexxy's :where()-scoped
   rules. This is a DELIBERATE, captain-requested light-mode change for THIS
   component only — the rest of light mode is unchanged. Re-verify after any Lexxy
   bump alongside the other seams (AGENTS.md). */
lexxy-editor lexxy-table-tools .lexxy-floating-controls__group {
  background-color: var(--fh-accent);
}

lexxy-editor lexxy-table-tools .lexxy-table-control__button,
lexxy-editor lexxy-table-tools .lexxy-table-control__more-menu > summary {
  color: var(--fh-on-fill);
}

/* Hover/focus feedback on the stepper −/+ buttons, count, and dropdown items:
   shift to the emphasis accent (still an --fh-on-fill pairing that clears AA in
   both modes). Exclude the delete button — it carries its own danger treatment. */
lexxy-editor lexxy-table-tools .lexxy-table-control__button:not(.lexxy-table-control__button--delete-table):hover:not([aria-disabled="true"]),
lexxy-editor lexxy-table-tools .lexxy-table-control__more-menu[open] > summary,
lexxy-editor lexxy-table-tools .lexxy-table-control__more-menu > summary:hover {
  background-color: var(--fh-accent-dark);
  color: var(--fh-on-fill);
}

lexxy-editor lexxy-table-tools .lexxy-table-control__button[aria-disabled="true"] {
  opacity: 0.5;
}

/* Delete-table button reads destructive, not a neutral cream chip. */
lexxy-editor lexxy-table-tools .lexxy-table-control__button--delete-table {
  background-color: var(--fh-danger);
  color: var(--fh-on-fill);
}

lexxy-editor lexxy-table-tools .lexxy-table-control .lexxy-table-control__button--delete-table:hover {
  background-color: var(--fh-danger-dark);
}

lexxy-editor lexxy-table-tools .lexxy-table-control .lexxy-table-control__button--delete-table svg,
lexxy-editor lexxy-table-tools .lexxy-table-control .lexxy-table-control__button--delete-table:hover svg {
  color: var(--fh-on-fill);
}

/* The delete button's hover confirmation tooltip ("Delete this table?") also
   reads danger rather than the frozen ink chip. */
lexxy-editor lexxy-table-tools .lexxy-table-control .lexxy-table-control__button--delete-table span {
  background: var(--fh-danger);
  color: var(--fh-on-fill);
}

/* -------------------------------------------------------------------------- */
/* Rich-text OUTPUT — the "Letter" reading treatment (app-owned .rt)           */
/* -------------------------------------------------------------------------- */

/* Layered OVER actiontext.css: Lexxy's shipped CSS styles the editor chrome;
   this styles the rendered contribution body. Full-width inline-image styling
   arrives with #58. */
/* Reading measure: the conversation panel spans the full container, but prose
   must not stretch to an unreadable line length — cap the BODY (not the panel)
   at ~68ch so a wide document-style view still reads like a letter
   (DESIGN.md §1). Inline images fill this measure (max-width: 100% below). */
.rt {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--fh-text);
}

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

.rt > :last-child {
  margin-bottom: 0;
}

.rt p {
  margin: 0 0 var(--fh-space-4);
}

.rt h1,
.rt h2,
.rt h3 {
  font-size: 1.3rem;
  line-height: 1.25;
  margin: 1.3em 0 0.5em;
}

.rt ul,
.rt ol {
  margin: 0 0 var(--fh-space-4);
  padding-left: 1.5em;
}

.rt li {
  margin-bottom: 4px;
}

.rt a {
  color: var(--fh-accent-dark);
  text-decoration: underline;
}

.rt blockquote {
  margin: 0 0 var(--fh-space-4);
  padding: var(--fh-space-1) var(--fh-space-4);
  border-left: 3px solid var(--fh-accent-soft);
  color: var(--fh-text-muted);
}

.rt pre {
  margin: 0 0 var(--fh-space-4);
  padding: var(--fh-space-3);
  background: var(--fh-surface-muted);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius-sm);
  overflow-x: auto;
  font-family: var(--fh-mono);
  font-size: 0.85rem;
}

.rt code {
  font-family: var(--fh-mono);
  font-size: 0.9em;
}

.rt figure {
  margin: var(--fh-space-5) 0;
}

/* Inline images render full-width within the contribution body — max-width so a
   photo fills the column but a small image is not upscaled (spec §11e). */
.rt img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--fh-radius);
}

.rt figcaption {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--fh-text-muted);
}

/* Dark overrides for the RENDERED rich-text body (issue #79). The vendored
   actiontext.css is loaded AFTER posts.css and paints a handful of rules with
   light hardcoded hex (#ccc, #eee, #666, #333/#bbb) using `.trix-content <el>`
   selectors — (0,1,1), which tie and then beat our `.rt <el>` rules on source
   order (the #76 audit finding; live in light mode too). On a dark ground those
   light values glare. Rather than fork the vendored file, out-specify only the
   painting rules with `.rt .trix-content <el>` — (0,2,1) beats (0,1,1) — and
   route through --fh-* tokens (already dark inside this media query). The DOM is
   `.rt > div.trix-content > …` (layouts/action_text/contents/_content). Inline
   user images are content, not chrome — left unfiltered. */
@media (prefers-color-scheme: dark) {
  /* blockquote left rule — actiontext paints it #ccc */
  .rt .trix-content blockquote {
    border-color: var(--fh-border);
  }
  /* code block — actiontext paints the fill #eee */
  .rt .trix-content pre {
    background-color: var(--fh-surface-muted);
  }
  /* image caption — actiontext paints it #666 (too dim on a dark ground) */
  .rt .trix-content .attachment--preview .attachment__caption {
    color: var(--fh-text-muted);
  }
  /* non-image file attachment chrome (defensive: rare here) — #333 text / #bbb border */
  .rt .trix-content .attachment--file {
    color: var(--fh-text);
    border-color: var(--fh-border);
  }
}