/* Scoped public styles keep comments usable with either the default or a custom theme. */
.ok-comments { --comments-border: var(--color-border, #d8dee7); --comments-muted: var(--color-text-muted, #626e80); --comments-surface: var(--color-surface, #fff); --comments-text: var(--color-text, #182230); width: 100%; min-width: 0; max-width: 100%; margin-block: 2.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--comments-border); color: var(--comments-text); scroll-margin-top: 5rem; overflow-wrap: anywhere; }
.ok-comments, .ok-comments *, .ok-comments *::before, .ok-comments *::after { box-sizing: border-box; }
/* Theme prose measures must not constrain comment rows or form content. */
.ok-comments p, .ok-comments li { max-width: none; }
.ok-comments__header h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin: 0 0 .5rem; font-size: 1.4rem; }
.ok-comments__count { display: inline-grid; place-items: center; min-width: 1.75rem; min-height: 1.75rem; padding: .125rem .5rem; border-radius: 1rem; background: var(--color-surface-secondary, #f0f3f7); font-size: .875rem; }
.ok-comments__header > p, .ok-comments__empty, .ok-comments__hint, .ok-comments__meta time { color: var(--comments-muted); }
.ok-comments__header > p { margin: 0 0 1.25rem; font-size: .9375rem; }
.ok-comments .ok-comments__list { width: 100%; max-width: none; list-style: none; margin: 0; padding: 0; }
.ok-comments__item { padding-block: 1.25rem; border-block-end: 1px solid var(--comments-border); scroll-margin-top: 5rem; }
.ok-comments__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; }
.ok-comments__meta time { font-size: .8125rem; }
.ok-comments__body { margin: .75rem 0 0; white-space: pre-wrap; line-height: 1.75; }
.ok-comments__pages { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center; margin-block: 1.25rem; }
.ok-comments__pages a { padding: .5rem .75rem; }
.ok-comments__form { display: grid; gap: 1rem; width: 100%; max-width: none; margin-block-start: 1.75rem; padding: 1.25rem; background: var(--comments-surface); border: 1px solid var(--comments-border); border-radius: .75rem; }
.ok-comments__form h3 { margin: 0; font-size: 1.125rem; }
.ok-comments__field { min-width: 0; display: grid; gap: .375rem; }
.ok-comments__field > label { font-weight: 500; }
.ok-comments__identity-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ok-comments__form input:not([type="checkbox"]):not([type="hidden"]), .ok-comments__form textarea { width: 100%; min-width: 0; min-height: 2.75rem; padding: .625rem .75rem; border: 1px solid var(--comments-border); border-radius: .375rem; background: var(--comments-surface); color: inherit; font: inherit; line-height: 1.5; }
.ok-comments__form textarea { resize: vertical; }
.ok-comments__form [aria-invalid="true"] { border-color: var(--color-danger, #b42318); }
.ok-comments__form :is(input, textarea, button):focus-visible, .ok-comments a:focus-visible { outline: 3px solid var(--color-primary, #2947d7); outline-offset: 3px; }
.ok-comments__hint, .ok-comments__error { margin: 0; font-size: .8125rem; line-height: 1.6; }
.ok-comments__error { color: var(--color-danger, #b42318); }
.ok-comments__consent { display: flex; gap: .625rem; align-items: flex-start; line-height: 1.7; font-size: .875rem; }
.ok-comments__consent input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .2rem; accent-color: var(--color-primary, #2947d7); }
.ok-comments__form button { justify-self: start; min-height: 2.75rem; padding: .625rem 1rem; border: 1px solid transparent; border-radius: .375rem; background: var(--color-primary, #2947d7); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.ok-comments__form button:hover { filter: brightness(.93); }
.ok-comments__notice { padding: .875rem 1rem; margin-block: 1.25rem; border: 1px solid var(--comments-border); border-radius: .5rem; background: var(--color-surface-secondary, #f0f3f7); }
.ok-comments__identity { margin: 0; }
.ok-comments__back { margin-block: 1.5rem; overflow-wrap: anywhere; }
@media (max-width: 540px) { .ok-comments__identity-fields { grid-template-columns: minmax(0, 1fr); } .ok-comments__form { padding: 1rem; } .ok-comments__form button { justify-self: stretch; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ok-comments { --comments-border: var(--color-border, #384454); --comments-muted: var(--color-text-muted, #a6b1c2); --comments-surface: var(--color-surface, #182230); --comments-text: var(--color-text, #edf1f7); } }