@import "https://assets.elements.dev/assets/app/shared/styles/page.eb1a7559b8a091ff.css";
@import "https://assets.elements.dev/assets/app/shared/styles/syntax-highlight.3581cc23f9197e5d.css";

.discussion {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.dc-bar          { order: 0; }
.dc-threads      { order: 2; display: flex; flex-direction: column; gap: var(--space-4); }
.dc-compose      { order: 3; }
.discussion.is-newest-first .dc-compose { order: 1; }
.dc-threads:empty { display: none; }

.dc-jump {
  margin-right: auto;
  height: 2rem;
  min-height: 0;
  padding: 0 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.dc-jump:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}

/* Join the conversation: one quiet bar that opens into the editor. */
.dc-join {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 2.75rem;
  text-align: left;
  text-decoration: none;
  cursor: text;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.dc-join:hover {
  border-color: var(--ink-faint);
  color: var(--ink-dim);
  text-decoration: none;
}
.dc-join.is-reply {
  min-height: 2.25rem;
  line-height: 2.25rem;
  font-size: 0.875rem;
}

/* The editors stay mounted so a tap can focus them before they show
   (iOS opens the keyboard only for that). Closed, they take no space. */
.dc-editor,
.dc-edit {
  display: grid;
  scroll-margin-top: var(--space-3);
  /* minmax(0, 1fr), not the implicit auto column: the editor's toolbar
     does not wrap, and an auto column grows to fit it past a phone's
     edge. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition: grid-template-rows var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.dc-editor > *,
.dc-edit > * {
  min-height: 0;
  overflow: hidden;
}
.dc-editor.is-open,
.dc-edit.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}
.dc-editor.is-open > *,
.dc-edit.is-open > * {
  overflow: visible;
}
.dc-editor-actions {
  display: inline-flex;
  gap: var(--space-2);
}
.dc-error {
  margin: var(--space-2) 0 0;
  color: var(--danger, #b42318);
  font-size: 0.8125rem;
}

/* Count and sort. */
.dc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.dc-count {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.dc-count-replies {
  font-weight: var(--weight-regular);
  color: var(--ink-dim);
}
.dc-sort {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dc-sort button {
  padding: 0.3125rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.dc-sort button + button {
  border-left: 1px solid var(--rule);
}
.dc-sort button:hover {
  color: var(--ink);
  background: var(--bg-soft);
}
.dc-sort button.is-active {
  color: var(--ink);
  background: var(--bg-soft);
  font-weight: var(--weight-medium);
}

/* A thread: the top-level comment, its replies, and a reply box, in
   one card. */
.dc-thread {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--bg);
}
.dc-thread.is-answer {
  border-color: var(--success);
  box-shadow: 0 0 0 1px var(--success);
}
/* Replies sit under a rule across the card, as on GitHub, indented
   under the comment they answer. */
/* Each reply is its own row, ruled across the card, its text indented a
   little under the comment it answers. */
.dc-replies .dc {
  padding-left: 2.5rem;
  border-top: 1px solid var(--rule-soft);
}
/* The thread's foot: a light band so the reply box reads as the end of
   the thread, not one more comment. */
.dc-thread-reply {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--rule-soft);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: color-mix(in srgb, var(--ink) 2.5%, var(--bg));
}
.dc-thread-reply .dc-editor.is-open {
  margin-top: 0;
}

/* One comment. */
.dc {
  padding: 0.875rem 1rem;
  scroll-margin-top: 5rem;
}
.dc.is-focused {
  box-shadow: inset 2px 0 0 var(--accent);
}

.dc-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink-dim);
}
.dc-handle {
  color: var(--ink);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.dc-handle:hover {
  color: var(--link-hover);
}
.dc-time {
  color: var(--ink-dim);
  text-decoration: none;
}
.dc-time:hover {
  color: var(--link-hover);
}
.dc-edited {
  color: var(--ink-soft);
}
.dc-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.42em 0.55em;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.dc-chip.is-answer {
  border-color: var(--success);
  color: var(--success);
}

.dc-body {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.dc-body > :first-child {
  margin-top: 0;
}
.dc-body > :last-child {
  margin-bottom: 0;
}
.dc-deleted {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--ink-soft);
}
.dc-edit.is-open {
  margin-top: var(--space-2);
}

.dc-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
/* Reply is a box like the controls beside it. */
.dc-reply {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  min-height: 0;
  padding: 0 0.625rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
}
.dc-reply:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
}
.dc-reply-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* Overflow menu. */
.dc-more-wrap {
  position: relative;
}
/* A box like the upvote and reaction buttons in the same row, as the
   post's own menu is. */
.dc-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink-dim);
  cursor: pointer;
}
.dc-more svg {
  width: 1rem;
  height: 1rem;
}
.dc-more:hover,
.dc-more.is-open {
  border-color: var(--ink-faint);
  color: var(--ink);
}
.dc-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  padding: 0.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
.dc-menu button {
  height: auto;
  min-height: 0;
  line-height: 1.4;
  white-space: nowrap;
  padding: 0.4375rem 0.625rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}
.dc-menu button:hover {
  background: var(--bg-soft);
}
.dc-menu button.is-danger {
  color: var(--danger, #b42318);
}
.dc-menu-sep {
  height: 1px;
  margin: 0.25rem 0;
  background: var(--rule-soft);
}

/* Upvote: a bordered pill with the arrow and the count, filled with
   the accent once you have voted. */
.upvote {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  height: 1.75rem;
  padding: 0 0.625rem 0 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.75rem;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.upvote svg {
  width: 0.9375rem;
  height: 0.9375rem;
}
.upvote:hover {
  border-color: var(--accent-edge);
  color: var(--accent-deep);
}
.upvote.is-voted {
  border-color: var(--accent-edge);
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* Reactions. */
.reactions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.reaction,
.reaction-add {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.reaction:hover,
.reaction-add:hover,
.reaction-add.is-open {
  border-color: var(--ink-faint);
  color: var(--ink);
}
.reaction.is-mine {
  border-color: var(--accent-edge);
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.reaction-glyph {
  font-size: 0.875rem;
  line-height: 1;
}
.reaction-add {
  width: 1.75rem;
  justify-content: center;
  padding: 0;
}
.reaction-add svg {
  width: 1rem;
  height: 1rem;
}
.reaction-add-wrap {
  position: relative;
  display: inline-flex;
}
.reaction-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 50;
  display: flex;
  gap: 0.125rem;
  padding: 0.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
.reaction-pick {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
}
.reaction-pick:hover {
  background: var(--bg-soft);
}
.reaction-pick.is-mine {
  border-color: var(--accent-edge);
  background: var(--accent-soft);
}

/* Participants and who is here. */
.dp {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.dp-title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  color: var(--ink-dim);
}
.dp-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}
.dp-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dp-list a {
  color: var(--link);
  text-decoration: none;
}
.dp-list a:hover {
  color: var(--link-hover);
}
/* Every name keeps the dot's space so the list stays aligned; the dot
   shows for someone on the page now. */
.dp-dot {
  flex: 0 0 auto;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--rule);
}
.dp-dot.is-here {
  background: var(--success);
}

/* Members sit under Participants as their own section, ruled off like
   the sidebar's other sections. */
.dp-members {
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-soft);
}
.dp-group-handle {
  color: var(--ink);
}
.dp-members .post-invite {
  margin-top: 0.75rem;
}
/* ─── Post and sidebar ──────────────────────────────────────────────
   The post and its conversation on the left, the people in it on the
   right, as on a GitHub discussion. The column widens by the sidebar so
   the post keeps its reading measure; below that width the sidebar
   follows the conversation. */
.post-shell:has(.post-layout) {
  max-width: calc(var(--container-marketing) + 16rem);
}
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: 2rem;
  align-items: start;
}
.post-main {
  min-width: 0;
}
/* The sidebar runs the full height of the post, ruled off from it; its
   contents stay in view as the conversation scrolls. */
.post-aside {
  align-self: stretch;
  padding-left: 2rem;
  border-left: 1px solid var(--rule-soft);
}
.post-aside-inner {
  position: sticky;
  top: 5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: 3.25rem;
}
.post-aside-group {
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-soft);
}
.post-aside-title {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  color: var(--ink-dim);
}
.post-aside-button {
  width: 100%;
}
.post-aside-note {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

@media (max-width: 960px) {
  .post-shell:has(.post-layout) {
    max-width: var(--container-marketing);
  }
  .post-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .post-aside {
    padding-left: 0;
    border-left: 0;
  }
  .post-aside-inner {
    position: static;
    padding-top: 0;
  }
}

/* Upvote, reactions, then the quiet links and the menu, on one line
   under the body. */
.post-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-6);
}
.post-actions .upvote {
  height: 2rem;
  padding: 0 0.75rem 0 0.625rem;
  font-size: 0.8125rem;
}
.post-actions .reaction,
.post-actions .reaction-add {
  height: 2rem;
}
.post-actions .reaction-add {
  width: 2rem;
}
.post-actions > .action-row {
  width: auto;
  flex: 1;
  margin: 0;
  gap: 0;
}

/* The comment count is a box like the upvote and reactions beside it,
   and jumps to the conversation. */
.post-comments-count {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  color: var(--ink-dim);
  font-size: 0.8125rem;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.post-comments-count svg {
  width: 1rem;
  height: 1rem;
}
.post-comments-count:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
  text-decoration: none;
}

/* The post's menu is a box like the controls beside it. */
.post-actions > .action-row {
  flex: 0 0 auto;
}
.post-actions .action-row .action-menu {
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}
.post-actions .action-row .action-menu:hover,
.post-actions .action-row .action-menu.is-open {
  border-color: var(--ink-faint);
  color: var(--ink);
}

/* The sort control matches the 2rem controls around it. */
.dc-sort button {
  height: 2rem;
  min-height: 0;
  line-height: 1;
}

@media (max-width: 640px) {
  .dc {
    padding: 0.75rem;
  }
  .dc-replies .dc {
    padding-left: 1.5rem;
  }
}

.dc-compose-title.dc-compose-title {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.dc-signin {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  color: var(--ink-dim);
  font-size: 0.875rem;
}

/* An @mention reads as a name, not a plain link. */
.dc-body a.mention,
.post-body a.mention {
  font-weight: var(--weight-medium);
}

/* Action buttons, on the post and on every comment, sit back from the
   text: a faint border and soft gray ink, full strength under the
   pointer. A cast vote or reaction keeps the accent. */
.discussion,
.post-actions {
  --ctl-border: color-mix(in srgb, var(--ink) 9%, var(--bg));
  --ctl-ink:    color-mix(in srgb, var(--ink) 52%, var(--bg));
}
:is(.post-actions, .dc-foot) :is(.upvote:not(.is-voted), .reaction:not(.is-mine), .reaction-add, .dc-reply, .dc-more, .action-menu, .post-comments-count) {
  border-color: var(--ctl-border);
  color: var(--ctl-ink);
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
:is(.post-actions, .dc-foot) :is(.upvote:not(.is-voted), .reaction:not(.is-mine), .reaction-add, .dc-reply, .dc-more, .action-menu, .post-comments-count):is(:hover, .is-open) {
  border-color: var(--rule);
  color: var(--ink);
}

/* On a phone the count, Join the conversation and the sort each take
   their own row, since the count and the sort do not fit on one line. */
@media (max-width: 640px) {
  .dc-bar {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    row-gap: var(--space-3);
  }
  .dc-count {
    grid-row: 1;
  }
  .dc-jump {
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    height: 2.25rem;
    margin-right: 0;
  }
  .dc-sort {
    grid-row: 3;
  }
}

/* On a phone the picker opens from the start of the action row, not
   the smiley button, and wraps, so a nested comment cannot push it
   off the right edge of the screen. */
@media (max-width: 640px) {
  :is(.post-actions, .dc-foot) {
    position: relative;
  }
  :is(.post-actions, .dc-foot) .reaction-add-wrap {
    position: static;
  }
  :is(.post-actions, .dc-foot) .reaction-picker {
    flex-wrap: wrap;
    max-width: 100%;
  }
}