/* django-heckle. Colours are custom properties, which a site can set on .heckle:
 * --heckle-ink, -muted, -line, -surface, -input, -accent and -accent-on. */
.heckle {
  --hk-ink: var(--heckle-ink, currentColor);
  --hk-muted: var(--heckle-muted, color-mix(in srgb, currentColor 70%, transparent));
  --hk-line: var(--heckle-line, color-mix(in srgb, currentColor 25%, transparent));
  --hk-surface: var(--heckle-surface, color-mix(in srgb, currentColor 4%, transparent));
  --hk-accent: var(--heckle-accent, light-dark(#1d4ed8, #93c5fd));
  --hk-accent-on: var(--heckle-accent-on, light-dark(#ffffff, #0b1220));
  color: var(--hk-ink);
  line-height: 1.55;
}
.heckle h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 1rem; }
.heckle h2 { font-size: 1.375rem; font-weight: 700; margin: 2.5rem 0 1rem; }
.heckle h3 { font-size: 1.125rem; font-weight: 600; margin: 2rem 0 0.75rem; }
.heckle a { color: var(--hk-accent); }
.heckle-muted, .heckle-help { color: var(--hk-muted); font-size: 0.875rem; }
.heckle-help { display: block; margin-top: 0.25rem; }
.heckle-notice { padding: 0.5rem 0.75rem; border: 1px solid var(--hk-line); border-radius: 0.5rem; background: var(--hk-surface); }
.heckle-list { list-style: none; margin: 0; padding: 0; }
.heckle-comment { padding: 1rem 0; border-top: 1px solid var(--hk-line); }
.heckle-replies { margin: 0.75rem 0 0 1.5rem; border-left: 2px solid var(--hk-line); padding-left: 1rem; }
.heckle-replies .heckle-comment:first-child { border-top: 0; padding-top: 0; }
.heckle-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.heckle-avatar { width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; }
.heckle-name { font-weight: 600; }
.heckle-badge { padding: 0 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--hk-accent); color: var(--hk-accent-on); }
.heckle-date { color: var(--hk-muted); text-decoration: none; }
.heckle-body { margin-top: 0.5rem; overflow-wrap: anywhere; }
.heckle-body p { margin: 0.5rem 0; }
.heckle-body pre { overflow-x: auto; padding: 0.75rem; border-radius: 0.375rem; background: var(--hk-surface); border: 1px solid var(--hk-line); }
.heckle-body code { font-size: 0.9em; }
.heckle-reply { font-size: 0.875rem; }
.heckle-field { margin: 0.75rem 0; }
.heckle-field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.heckle-field input, .heckle-field textarea {
  width: 100%; box-sizing: border-box; padding: 0.5rem 0.625rem; font: inherit; font-size: max(1rem, 16px);
  color: inherit; background: var(--heckle-input, transparent); border: 1px solid var(--hk-line); border-radius: 0.375rem;
}
.heckle-field input:focus, .heckle-field textarea:focus { outline: 2px solid var(--hk-accent); outline-offset: 1px; }
.heckle-error { display: block; color: light-dark(#b91c1c, #fca5a5); font-size: 0.875rem; margin: 0.25rem 0; }
.heckle-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.heckle-button { padding: 0.5rem 1.25rem; font: inherit; font-weight: 600; cursor: pointer; border-radius: 0.375rem; border: 1px solid var(--hk-accent); background: var(--hk-accent); color: var(--hk-accent-on); }
.heckle-button-plain { background: transparent; color: var(--hk-accent); border-color: var(--hk-line); }
.heckle-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.cf-turnstile { margin: 0.75rem 0; }