/* -- Comment Form (website) -----------------------------------------
   Collects a new comment or a reply: the writer's avatar beside a Textarea
   that grows with its text (field-sizing), optional name / email fields for
   guests, a hint and the submit Button. Native validation (required,
   minlength) - :user-invalid marks the field only after an attempt. */

@layer components {
  .mk-comment-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;

    & > .avatar { margin-block-start: 0.25rem; }
    /* without an avatar the form takes the full row */
    &:not(:has(> .avatar)) { grid-template-columns: minmax(0, 1fr); }
  }

  .mk-comment-form-main {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;

    & .textarea {
      field-sizing: content;
      min-height: 5.5rem;
      max-height: 20rem;
      resize: none;
    }
  }

  /* guest fields: name + email side by side */
  .mk-comment-form-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.625rem;

    & > div { display: flex; flex-direction: column; gap: 0.375rem; }
  }

  .mk-comment-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .mk-comment-form-hint {
    margin: 0 auto 0 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
  }

  /* a formatting row above the text (a Toggle Group, a Separator, Buttons) */
  .mk-comment-form-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
  }

  /* framed: toolbar, text and footer in one bordered box - the textarea
     loses its own border, the box takes the focus ring */
  .mk-comment-form[data-variant="framed"] .mk-comment-form-main {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--input);
    border-radius: var(--radius-lg);
    background: var(--background);
    transition: border-color 120ms, box-shadow 120ms;

    &:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent); }
    & .mk-comment-form-toolbar { padding: 0.375rem; border-block-end: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 50%, transparent); }
    & .textarea { border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent; }
    & .mk-comment-form-footer { padding: 0.5rem 0.625rem; border-block-start: 1px solid var(--border); }
    & .tabs { gap: 0; }
    & .tab-content { padding: 0; }
  }

  /* reply: compact, under a comment */
  .mk-comment-form[data-variant="reply"] {
    gap: 0.5rem;

    & .mk-comment-form-main .textarea { min-height: 3.5rem; font-size: 0.875rem; }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-comment-form[data-variant="framed"] .mk-comment-form-main { transition: none; }
  }

  @media (prefers-contrast: more) {
    .mk-comment-form-hint { color: var(--foreground); }
  }

  @media (forced-colors: active) {
    .mk-comment-form-main .textarea { border: 1px solid CanvasText; }
  }
}