/* Jormuntl Comment Threads
 *
 * Colours resolve from the theme's own tokens, so light and dark both track
 * automatically — the .dark class flips --accent-rgb and the alpha tints
 * built from it flip with it. Only depth cues are stated twice.
 */

/* --- collapsible reply chains ----------------------------------------- */

.jct-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .25rem 0 .5rem;
  padding: .3rem .7rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent, #2d2d2d);
  background: rgba(var(--accent-rgb, 45, 45, 45), .08);
  border: 1px solid rgba(var(--accent-rgb, 45, 45, 45), .18);
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.jct-toggle:hover {
  background: rgba(var(--accent-rgb, 45, 45, 45), .16);
  border-color: rgba(var(--accent-rgb, 45, 45, 45), .3);
}

.jct-toggle:focus-visible {
  outline: 2px solid var(--accent, #2d2d2d);
  outline-offset: 2px;
}

.jct-toggle svg {
  width: .9rem;
  height: .9rem;
  flex: none;
}

.children.jct-collapsed {
  display: none;
}

/* Positioning context for the rail; the rail itself lives in jct-layout.css
   so the whole indentation scheme can be switched off independently. */
.comment-list .children {
  position: relative;
}

.comment-list .children.jct-collapsed::before {
  display: none;
}

/* --- "edited" marker and edit button ---------------------------------- */

.jct-edited {
  display: inline-block;
  margin-right: .5rem;
  font-size: .6875rem;
  font-style: italic;
  color: var(--secondary-text, #6b7280);
  cursor: help;
}

.jct-edit {
  padding: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--secondary-text, #6b7280);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  transition: color .15s ease;
}

.jct-edit:hover {
  color: var(--accent, #2d2d2d);
}

.jct-edit:focus-visible {
  outline: 2px solid var(--accent, #2d2d2d);
  outline-offset: 2px;
}

/* --- inline editor ----------------------------------------------------- */

.jct-body.jct-editing {
  margin: .25rem 0 .5rem;
}

.jct-editor {
  display: block;
  min-height: 5rem;
  max-height: 24rem;
  padding: .75rem .875rem;
  overflow-y: auto;
  color: var(--primary-text, #1a1a1a);
  line-height: 1.6;
  background: var(--bg, #f5f5f5);
  border: 1px solid var(--accent, #2d2d2d);
  border-radius: .5rem;
  outline: none;
  overflow-wrap: break-word;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 45, 45, 45), .12);
}

.jct-editor > *:first-child { margin-top: 0; }
.jct-editor > *:last-child { margin-bottom: 0; }

.jct-editor p { margin: 0 0 .75em; }
.jct-editor strong { font-weight: 700; }
.jct-editor em { font-style: italic; }

.jct-editor blockquote {
  margin: .75em 0;
  padding: .35em 0 .35em 1em;
  border-left: 3px solid rgba(var(--accent-rgb, 45, 45, 45), .35);
  color: var(--secondary-text, #6b7280);
  font-style: italic;
}

.jct-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
}

.jct-save,
.jct-cancel {
  padding: .35rem .9rem;
  font-size: .8125rem;
  font-weight: 600;
  border-radius: .4rem;
  cursor: pointer;
  transition: opacity .15s ease, background-color .15s ease;
}

.jct-save {
  color: var(--bg, #f5f5f5);
  background: var(--accent, #2d2d2d);
  border: 1px solid var(--accent, #2d2d2d);
}

.jct-save:hover { opacity: .88; }

.jct-save:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.jct-cancel {
  color: var(--secondary-text, #6b7280);
  background: transparent;
  border: 1px solid var(--border, #d0d0d0);
}

.jct-cancel:hover {
  color: var(--primary-text, #1a1a1a);
  border-color: var(--primary-text, #1a1a1a);
}

.jct-save:focus-visible,
.jct-cancel:focus-visible {
  outline: 2px solid var(--accent, #2d2d2d);
  outline-offset: 2px;
}

.jct-note {
  font-size: .75rem;
  color: var(--secondary-text, #6b7280);
}

.jct-note.is-error {
  color: var(--error, #ef4444);
}

/* --- depth, the one thing that differs by mode ------------------------ */

.dark .jct-editor {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 255, 255, 255), .12),
              0 4px 16px rgba(0, 0, 0, .4);
}

@media (prefers-reduced-motion: reduce) {
  .jct-toggle,
  .jct-edit,
  .jct-save,
  .jct-cancel {
    transition: none;
  }
}