/* Discussion components -- an event's discussion (see discussions/_discussion.html), plus
   the avatar and .list-header pieces the rest of the site borrows. Deliberately
   flatter/tighter than .card/.list (less padding, subtler border, no shadow) as the pilot
   for a less "chunky" visual style site-wide. */
.discussion-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.discussion-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

/* Per-user fallback-avatar background -- picked by username hash (see the avatar() macro)
   from a small fixed set, all mixed from the active theme's own named tokens rather than
   a hardcoded hue, so they stay in-palette (and correct) under every theme preset instead
   of clashing with whichever one happens to be active. */
.avatar-variant-0 { background: color-mix(in srgb, var(--accent) 70%, var(--bg)); }
.avatar-variant-1 { background: color-mix(in srgb, var(--pop) 65%, var(--bg)); }
.avatar-variant-2 { background: color-mix(in srgb, var(--accent-dim) 85%, var(--pop)); }
.avatar-variant-3 { background: color-mix(in srgb, var(--pop-dim) 80%, var(--accent)); }
.avatar-variant-4 { background: color-mix(in srgb, var(--success) 40%, var(--bg-2)); }
.avatar-variant-5 { background: color-mix(in srgb, var(--accent) 40%, var(--pop-dim)); }

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.list-header h1 {
  margin: 0;
}

/* Thread detail: OP + nested reply tree */
.discussion-op-card {
  padding: 1rem;
}

.discussion-post-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.discussion-post-menu {
  position: relative;
  margin-left: auto;
}

.discussion-post-menu-toggle {
  padding: 0.15rem 0.5rem;
  border-radius: 0.2rem;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--muted);
}

.discussion-post-menu-toggle:hover,
.discussion-post-menu-toggle:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--text);
}

.discussion-post-menu-items {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  background: var(--panel);
  border: 1px solid var(--accent-dim);
  border-radius: 0;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 9rem;
  z-index: 20;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--text) 28%, transparent);
}

.discussion-post-menu-items form {
  margin: 0;
}

/* Both rows are one component, so every box property is set here rather than left to
   `button, .btn` (components.css) and the <a> defaults -- the same fix, for the same
   reason, as .nav-account-menu-item in chrome.css. Resetting margin/background/border was
   not enough: `button, .btn` also makes the button an inline-flex box with
   `justify-content: center` and `min-height: 2.7rem`, while the <a> stayed a plain inline
   box that ignores `width` and `text-align` outright -- so "Remove Discussion" sat centred
   in a tall row above a short, left-aligned "Edit Discussion". text-transform is here for
   the same reason: the link picked up the sitewide uppercase treatment (a:not(.btn),
   foundation.css) and the button did not, so the two rows did not agree on case either.
   Any row added to this menu needs both. */
.discussion-post-menu-items a,
.discussion-post-menu-items button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  min-height: 2.25rem;
  margin: 0;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 0.35rem 0.5rem;
  border-radius: 0.15rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.discussion-post-menu-items a:hover,
.discussion-post-menu-items button:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  text-decoration: none;
}

/* A compact, immediately available composer makes the primary discussion action
   obvious without adding a separate "Add a comment" step. */
.discussion-root-reply {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--seam);
}

.discussion-username {
  font-weight: 700;
}

.discussion-timestamp {
  font-size: 0.78rem;
}

.discussion-title {
  margin: 0.25rem 0 0.5rem;
}

.discussion-body {
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mention {
  font-weight: 600;
}

/* A plain block holding the Reply toggle, not a flex row. It used to hold the ⋮ menu too
   (that moved to the post header, where the discussion's own menu lives), and as a flex
   item the toggle was sized to its own contents -- so the composer it opens came out as a
   narrow column in the middle of a wide post, whatever the screen width. */
.discussion-actions {
  margin-top: 0.5rem;
}

.discussion-actions form,
.discussion-actions .btn,
.discussion-actions button {
  margin: 0;
}

.discussion-replies-heading {
  margin: 1.25rem 0 0.5rem;
  color: var(--muted);
  font-weight: 600;
}

.discussion-reply-tree {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 2px solid var(--text);
}

.discussion-reply-context {
  display: block;
  margin-bottom: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-left: 2px solid var(--accent);
  border-radius: 0 0.2rem 0.2rem 0;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
}

.discussion-reply-context:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.discussion-reply-context strong {
  color: var(--text);
}

.discussion-reply-context-quote {
  display: block;
  margin-top: 0.1rem;
  font-style: italic;
  opacity: 0.8;
}

.discussion-post {
  position: relative;
  padding: 1rem 0.55rem;
  border-radius: 0;
  background: none;
  border: 0;
  border-bottom: 2px solid var(--text);
}

.discussion-reply-item:nth-child(even) .discussion-post {
  background: color-mix(in srgb, var(--accent-dim) 5%, transparent);
}

.discussion-post-removed {
  padding: 0.5rem 0.85rem;
  background: transparent;
  border-bottom-style: dashed;
}

.discussion-removed-note {
  margin: 0;
  font-style: italic;
}

.discussion-reply-toggle[open] summary {
  margin-bottom: 0.5rem;
}

.discussion-reply-form textarea {
  min-height: 3.25rem;
}

.discussion-reply-form .photo-dropzone {
  min-height: 2.25rem;
  margin-top: 0.35rem;
  padding: 0.35rem 0.6rem;
}

.discussion-reply-form .dropzone-drag-hint { display: none; }

.discussion-reply-form .mention-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Sizing only -- placement is .composer-actions' job (components.css). */
.discussion-submit {
  min-height: 2.25rem;
  padding: 0.3rem 1.1rem;
}

.mention-hint {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
}

.mention-input-wrap {
  position: relative;
}

/* Everything else about this dropdown is the shared typeahead styling in typeahead.css,
   which loads first. Height is the one thing it does differently. */
.mention-dropdown {
  max-height: 10rem;
}

/* A discussion is one reading surface, embedded in the event page's own ruled section,
   so it deliberately gets a flat treatment without a second enclosing border. */
.events-flat .discussion-op-card {
  margin: 0;
  padding: 0 0 1rem;
  border: 0;
  border-bottom: 2px solid var(--text);
  border-radius: 0;
  background: none;
}